@json-render/remotion 0.4.0

package/dist/chunk-5C3GTKV7.mjs

@@ -0,0 +1,356 @@
+// src/schema.ts
+import { defineSchema } from "@json-render/core";
+function remotionPromptTemplate(context) {
+  const { catalog, options } = context;
+  const { system = "You are a video timeline generator.", customRules = [] } = options;
+  const lines = [];
+  lines.push(system);
+  lines.push("");
+  lines.push("OUTPUT FORMAT:");
+  lines.push(
+    "Output JSONL (one JSON object per line) with patches to build a timeline spec."
+  );
+  lines.push(
+    "Each line is a JSON patch operation. Build the timeline incrementally."
+  );
+  lines.push("");
+  lines.push("Example output (each line is a separate JSON object):");
+  lines.push("");
+  lines.push(`{"op":"set","path":"/composition","value":{"id":"intro","fps":30,"width":1920,"height":1080,"durationInFrames":300}}
+{"op":"set","path":"/tracks","value":[{"id":"main","name":"Main","type":"video","enabled":true},{"id":"overlay","name":"Overlay","type":"overlay","enabled":true}]}
+{"op":"set","path":"/clips/0","value":{"id":"clip-1","trackId":"main","component":"TitleCard","props":{"title":"Welcome","subtitle":"Getting Started"},"from":0,"durationInFrames":90,"transitionIn":{"type":"fade","durationInFrames":15},"transitionOut":{"type":"fade","durationInFrames":15}}}
+{"op":"set","path":"/clips/1","value":{"id":"clip-2","trackId":"main","component":"TitleCard","props":{"title":"Features"},"from":90,"durationInFrames":90}}
+{"op":"set","path":"/audio","value":{"tracks":[]}}`);
+  lines.push("");
+  const catalogData = catalog;
+  if (catalogData.components) {
+    lines.push(
+      `AVAILABLE COMPONENTS (${Object.keys(catalogData.components).length}):`
+    );
+    lines.push("");
+    for (const [name, def] of Object.entries(catalogData.components)) {
+      const duration = def.defaultDuration ? ` [default: ${def.defaultDuration} frames]` : "";
+      lines.push(
+        `- ${name}: ${def.description || "No description"}${duration}`
+      );
+    }
+    lines.push("");
+  }
+  if (catalogData.transitions && Object.keys(catalogData.transitions).length > 0) {
+    lines.push("AVAILABLE TRANSITIONS:");
+    lines.push("");
+    for (const [name, def] of Object.entries(catalogData.transitions)) {
+      lines.push(`- ${name}: ${def.description || "No description"}`);
+    }
+    lines.push("");
+  }
+  lines.push("RULES:");
+  const baseRules = [
+    "Output ONLY JSONL patches - one JSON object per line, no markdown, no code fences",
+    "First set /composition with {id, fps:30, width:1920, height:1080, durationInFrames}",
+    "Then set /tracks array with video/overlay tracks",
+    "Then set each clip: /clips/0, /clips/1, etc.",
+    "Finally set /audio with {tracks:[]}",
+    "ONLY use components listed above",
+    "fps is always 30 (1 second = 30 frames, 10 seconds = 300 frames)",
+    `Clips on "main" track flow sequentially (from = previous clip's from + durationInFrames)`,
+    'Overlay clips (LowerThird, TextOverlay) go on "overlay" track'
+  ];
+  const allRules = [...baseRules, ...customRules];
+  allRules.forEach((rule, i) => {
+    lines.push(`${i + 1}. ${rule}`);
+  });
+  return lines.join("\n");
+}
+var schema = defineSchema(
+  (s) => ({
+    // What the AI-generated SPEC looks like (timeline-based)
+    spec: s.object({
+      /** Composition settings */
+      composition: s.object({
+        /** Unique composition ID */
+        id: s.string(),
+        /** Frames per second */
+        fps: s.number(),
+        /** Width in pixels */
+        width: s.number(),
+        /** Height in pixels */
+        height: s.number(),
+        /** Total duration in frames */
+        durationInFrames: s.number()
+      }),
+      /** Timeline tracks (like layers in video editing) */
+      tracks: s.array(
+        s.object({
+          /** Unique track ID */
+          id: s.string(),
+          /** Track name for organization */
+          name: s.string(),
+          /** Track type: "video" | "audio" | "overlay" | "text" */
+          type: s.string(),
+          /** Whether track is muted/hidden */
+          enabled: s.boolean()
+        })
+      ),
+      /** Clips placed on the timeline */
+      clips: s.array(
+        s.object({
+          /** Unique clip ID */
+          id: s.string(),
+          /** Which track this clip belongs to */
+          trackId: s.string(),
+          /** Component type from catalog */
+          component: s.ref("catalog.components"),
+          /** Component props */
+          props: s.propsOf("catalog.components"),
+          /** Start frame (when clip begins) */
+          from: s.number(),
+          /** Duration in frames */
+          durationInFrames: s.number(),
+          /** Transition in effect */
+          transitionIn: s.object({
+            type: s.ref("catalog.transitions"),
+            durationInFrames: s.number()
+          }),
+          /** Transition out effect */
+          transitionOut: s.object({
+            type: s.ref("catalog.transitions"),
+            durationInFrames: s.number()
+          })
+        })
+      ),
+      /** Audio configuration */
+      audio: s.object({
+        /** Background music/audio clips */
+        tracks: s.array(
+          s.object({
+            id: s.string(),
+            src: s.string(),
+            from: s.number(),
+            durationInFrames: s.number(),
+            volume: s.number()
+          })
+        )
+      })
+    }),
+    // What the CATALOG must provide
+    catalog: s.object({
+      /** Video component definitions (scenes, overlays, etc.) */
+      components: s.map({
+        /** Zod schema for component props */
+        props: s.zod(),
+        /** Component type: "scene" | "overlay" | "text" | "image" | "video" */
+        type: s.string(),
+        /** Default duration in frames (can be overridden per clip) */
+        defaultDuration: s.number(),
+        /** Description for AI generation hints */
+        description: s.string()
+      }),
+      /** Transition effect definitions */
+      transitions: s.map({
+        /** Default duration in frames */
+        defaultDuration: s.number(),
+        /** Description for AI generation hints */
+        description: s.string()
+      }),
+      /** Effect definitions (filters, animations, etc.) */
+      effects: s.map({
+        /** Zod schema for effect params */
+        params: s.zod(),
+        /** Description for AI generation hints */
+        description: s.string()
+      })
+    })
+  }),
+  {
+    promptTemplate: remotionPromptTemplate
+  }
+);
+
+// src/catalog/definitions.ts
+import { z } from "zod";
+var standardComponentDefinitions = {
+  // ==========================================================================
+  // Scene Components (full-screen)
+  // ==========================================================================
+  TitleCard: {
+    props: z.object({
+      title: z.string(),
+      subtitle: z.string().nullable(),
+      backgroundColor: z.string().nullable(),
+      textColor: z.string().nullable()
+    }),
+    type: "scene",
+    defaultDuration: 90,
+    description: "Full-screen title card with centered text. Use for intros, outros, and section breaks."
+  },
+  ImageSlide: {
+    props: z.object({
+      src: z.string(),
+      alt: z.string(),
+      fit: z.enum(["cover", "contain"]).nullable(),
+      backgroundColor: z.string().nullable()
+    }),
+    type: "image",
+    defaultDuration: 150,
+    description: "Full-screen image display. Use for product shots, photos, and visual content."
+  },
+  SplitScreen: {
+    props: z.object({
+      leftTitle: z.string(),
+      rightTitle: z.string(),
+      leftColor: z.string().nullable(),
+      rightColor: z.string().nullable()
+    }),
+    type: "scene",
+    defaultDuration: 120,
+    description: "Split screen with two sides. Use for comparisons or before/after."
+  },
+  QuoteCard: {
+    props: z.object({
+      quote: z.string(),
+      author: z.string().nullable(),
+      backgroundColor: z.string().nullable()
+    }),
+    type: "scene",
+    defaultDuration: 150,
+    description: "Quote display with attribution. Use for testimonials."
+  },
+  StatCard: {
+    props: z.object({
+      value: z.string(),
+      label: z.string(),
+      prefix: z.string().nullable(),
+      suffix: z.string().nullable(),
+      backgroundColor: z.string().nullable()
+    }),
+    type: "scene",
+    defaultDuration: 90,
+    description: "Large statistic display. Use for key metrics and numbers."
+  },
+  TypingText: {
+    props: z.object({
+      text: z.string(),
+      backgroundColor: z.string().nullable(),
+      textColor: z.string().nullable(),
+      fontSize: z.number().nullable(),
+      fontFamily: z.enum(["monospace", "sans-serif", "serif"]).nullable(),
+      showCursor: z.boolean().nullable(),
+      cursorChar: z.string().nullable(),
+      charsPerSecond: z.number().nullable()
+    }),
+    type: "scene",
+    defaultDuration: 180,
+    description: "Terminal-style typing animation that reveals text character by character. Perfect for code demos, CLI commands, and dramatic text reveals."
+  },
+  // ==========================================================================
+  // Overlay Components
+  // ==========================================================================
+  LowerThird: {
+    props: z.object({
+      name: z.string(),
+      title: z.string().nullable(),
+      backgroundColor: z.string().nullable()
+    }),
+    type: "overlay",
+    defaultDuration: 120,
+    description: "Name/title overlay in lower third of screen. Use to identify speakers."
+  },
+  TextOverlay: {
+    props: z.object({
+      text: z.string(),
+      position: z.enum(["top", "center", "bottom"]).nullable(),
+      fontSize: z.enum(["small", "medium", "large"]).nullable()
+    }),
+    type: "overlay",
+    defaultDuration: 90,
+    description: "Simple text overlay. Use for captions and annotations."
+  },
+  LogoBug: {
+    props: z.object({
+      position: z.enum(["top-left", "top-right", "bottom-left", "bottom-right"]).nullable(),
+      opacity: z.number().nullable()
+    }),
+    type: "overlay",
+    defaultDuration: 300,
+    description: "Corner logo watermark. Use for branding throughout video."
+  },
+  // ==========================================================================
+  // Video Components
+  // ==========================================================================
+  VideoClip: {
+    props: z.object({
+      src: z.string(),
+      startFrom: z.number().nullable(),
+      volume: z.number().nullable()
+    }),
+    type: "video",
+    defaultDuration: 150,
+    description: "Video file playback. Use for B-roll and footage."
+  }
+};
+var standardTransitionDefinitions = {
+  fade: {
+    defaultDuration: 15,
+    description: "Smooth fade in/out. Use for gentle transitions."
+  },
+  slideLeft: {
+    defaultDuration: 20,
+    description: "Slide from right to left. Use for forward progression."
+  },
+  slideRight: {
+    defaultDuration: 20,
+    description: "Slide from left to right. Use for backward progression."
+  },
+  slideUp: {
+    defaultDuration: 15,
+    description: "Slide from bottom to top. Use for overlays appearing."
+  },
+  slideDown: {
+    defaultDuration: 15,
+    description: "Slide from top to bottom. Use for overlays disappearing."
+  },
+  zoom: {
+    defaultDuration: 20,
+    description: "Zoom in/out effect. Use for emphasis."
+  },
+  wipe: {
+    defaultDuration: 15,
+    description: "Horizontal wipe. Use for scene changes."
+  },
+  none: {
+    defaultDuration: 0,
+    description: "No transition (hard cut)."
+  }
+};
+var standardEffectDefinitions = {
+  kenBurns: {
+    params: z.object({
+      startScale: z.number(),
+      endScale: z.number(),
+      panX: z.number().nullable(),
+      panY: z.number().nullable()
+    }),
+    description: "Ken Burns pan and zoom effect for images."
+  },
+  pulse: {
+    params: z.object({
+      intensity: z.number()
+    }),
+    description: "Subtle pulsing scale effect for emphasis."
+  },
+  shake: {
+    params: z.object({
+      intensity: z.number()
+    }),
+    description: "Camera shake effect for energy."
+  }
+};
+
+export {
+  schema,
+  standardComponentDefinitions,
+  standardTransitionDefinitions,
+  standardEffectDefinitions
+};
+//# sourceMappingURL=chunk-5C3GTKV7.mjs.map

package/dist/chunk-5C3GTKV7.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/schema.ts","../src/catalog/definitions.ts"],"sourcesContent":["import { defineSchema, type PromptContext } from \"@json-render/core\";\n\n/**\n * Prompt template for Remotion timeline generation\n *\n * Uses JSONL patch format (same as React) but builds up a timeline spec structure.\n */\nfunction remotionPromptTemplate(context: PromptContext): string {\n  const { catalog, options } = context;\n  const { system = \"You are a video timeline generator.\", customRules = [] } =\n    options;\n\n  const lines: string[] = [];\n  lines.push(system);\n  lines.push(\"\");\n\n  // Output format - JSONL patches\n  lines.push(\"OUTPUT FORMAT:\");\n  lines.push(\n    \"Output JSONL (one JSON object per line) with patches to build a timeline spec.\",\n  );\n  lines.push(\n    \"Each line is a JSON patch operation. Build the timeline incrementally.\",\n  );\n  lines.push(\"\");\n  lines.push(\"Example output (each line is a separate JSON object):\");\n  lines.push(\"\");\n  lines.push(`{\"op\":\"set\",\"path\":\"/composition\",\"value\":{\"id\":\"intro\",\"fps\":30,\"width\":1920,\"height\":1080,\"durationInFrames\":300}}\n{\"op\":\"set\",\"path\":\"/tracks\",\"value\":[{\"id\":\"main\",\"name\":\"Main\",\"type\":\"video\",\"enabled\":true},{\"id\":\"overlay\",\"name\":\"Overlay\",\"type\":\"overlay\",\"enabled\":true}]}\n{\"op\":\"set\",\"path\":\"/clips/0\",\"value\":{\"id\":\"clip-1\",\"trackId\":\"main\",\"component\":\"TitleCard\",\"props\":{\"title\":\"Welcome\",\"subtitle\":\"Getting Started\"},\"from\":0,\"durationInFrames\":90,\"transitionIn\":{\"type\":\"fade\",\"durationInFrames\":15},\"transitionOut\":{\"type\":\"fade\",\"durationInFrames\":15}}}\n{\"op\":\"set\",\"path\":\"/clips/1\",\"value\":{\"id\":\"clip-2\",\"trackId\":\"main\",\"component\":\"TitleCard\",\"props\":{\"title\":\"Features\"},\"from\":90,\"durationInFrames\":90}}\n{\"op\":\"set\",\"path\":\"/audio\",\"value\":{\"tracks\":[]}}`);\n  lines.push(\"\");\n\n  // Components\n  const catalogData = catalog as {\n    components?: Record<\n      string,\n      { description?: string; defaultDuration?: number }\n    >;\n    transitions?: Record<string, { description?: string }>;\n    effects?: Record<string, { description?: string }>;\n  };\n\n  if (catalogData.components) {\n    lines.push(\n      `AVAILABLE COMPONENTS (${Object.keys(catalogData.components).length}):`,\n    );\n    lines.push(\"\");\n    for (const [name, def] of Object.entries(catalogData.components)) {\n      const duration = def.defaultDuration\n        ? ` [default: ${def.defaultDuration} frames]`\n        : \"\";\n      lines.push(\n        `- ${name}: ${def.description || \"No description\"}${duration}`,\n      );\n    }\n    lines.push(\"\");\n  }\n\n  // Transitions\n  if (\n    catalogData.transitions &&\n    Object.keys(catalogData.transitions).length > 0\n  ) {\n    lines.push(\"AVAILABLE TRANSITIONS:\");\n    lines.push(\"\");\n    for (const [name, def] of Object.entries(catalogData.transitions)) {\n      lines.push(`- ${name}: ${def.description || \"No description\"}`);\n    }\n    lines.push(\"\");\n  }\n\n  // Rules\n  lines.push(\"RULES:\");\n  const baseRules = [\n    \"Output ONLY JSONL patches - one JSON object per line, no markdown, no code fences\",\n    \"First set /composition with {id, fps:30, width:1920, height:1080, durationInFrames}\",\n    \"Then set /tracks array with video/overlay tracks\",\n    \"Then set each clip: /clips/0, /clips/1, etc.\",\n    \"Finally set /audio with {tracks:[]}\",\n    \"ONLY use components listed above\",\n    \"fps is always 30 (1 second = 30 frames, 10 seconds = 300 frames)\",\n    'Clips on \"main\" track flow sequentially (from = previous clip\\'s from + durationInFrames)',\n    'Overlay clips (LowerThird, TextOverlay) go on \"overlay\" track',\n  ];\n  const allRules = [...baseRules, ...customRules];\n  allRules.forEach((rule, i) => {\n    lines.push(`${i + 1}. ${rule}`);\n  });\n\n  return lines.join(\"\\n\");\n}\n\n/**\n * The schema for @json-render/remotion\n *\n * This schema is fundamentally different from the React element tree schema.\n * It's timeline-based, designed for video composition:\n *\n * - Spec: A composition with tracks containing timed clips\n * - Catalog: Video components (scenes, overlays, etc.) and effects\n *\n * This demonstrates that json-render is truly agnostic - different renderers\n * can have completely different spec formats.\n */\nexport const schema = defineSchema(\n  (s) => ({\n    // What the AI-generated SPEC looks like (timeline-based)\n    spec: s.object({\n      /** Composition settings */\n      composition: s.object({\n        /** Unique composition ID */\n        id: s.string(),\n        /** Frames per second */\n        fps: s.number(),\n        /** Width in pixels */\n        width: s.number(),\n        /** Height in pixels */\n        height: s.number(),\n        /** Total duration in frames */\n        durationInFrames: s.number(),\n      }),\n\n      /** Timeline tracks (like layers in video editing) */\n      tracks: s.array(\n        s.object({\n          /** Unique track ID */\n          id: s.string(),\n          /** Track name for organization */\n          name: s.string(),\n          /** Track type: \"video\" | \"audio\" | \"overlay\" | \"text\" */\n          type: s.string(),\n          /** Whether track is muted/hidden */\n          enabled: s.boolean(),\n        }),\n      ),\n\n      /** Clips placed on the timeline */\n      clips: s.array(\n        s.object({\n          /** Unique clip ID */\n          id: s.string(),\n          /** Which track this clip belongs to */\n          trackId: s.string(),\n          /** Component type from catalog */\n          component: s.ref(\"catalog.components\"),\n          /** Component props */\n          props: s.propsOf(\"catalog.components\"),\n          /** Start frame (when clip begins) */\n          from: s.number(),\n          /** Duration in frames */\n          durationInFrames: s.number(),\n          /** Transition in effect */\n          transitionIn: s.object({\n            type: s.ref(\"catalog.transitions\"),\n            durationInFrames: s.number(),\n          }),\n          /** Transition out effect */\n          transitionOut: s.object({\n            type: s.ref(\"catalog.transitions\"),\n            durationInFrames: s.number(),\n          }),\n        }),\n      ),\n\n      /** Audio configuration */\n      audio: s.object({\n        /** Background music/audio clips */\n        tracks: s.array(\n          s.object({\n            id: s.string(),\n            src: s.string(),\n            from: s.number(),\n            durationInFrames: s.number(),\n            volume: s.number(),\n          }),\n        ),\n      }),\n    }),\n\n    // What the CATALOG must provide\n    catalog: s.object({\n      /** Video component definitions (scenes, overlays, etc.) */\n      components: s.map({\n        /** Zod schema for component props */\n        props: s.zod(),\n        /** Component type: \"scene\" | \"overlay\" | \"text\" | \"image\" | \"video\" */\n        type: s.string(),\n        /** Default duration in frames (can be overridden per clip) */\n        defaultDuration: s.number(),\n        /** Description for AI generation hints */\n        description: s.string(),\n      }),\n      /** Transition effect definitions */\n      transitions: s.map({\n        /** Default duration in frames */\n        defaultDuration: s.number(),\n        /** Description for AI generation hints */\n        description: s.string(),\n      }),\n      /** Effect definitions (filters, animations, etc.) */\n      effects: s.map({\n        /** Zod schema for effect params */\n        params: s.zod(),\n        /** Description for AI generation hints */\n        description: s.string(),\n      }),\n    }),\n  }),\n  {\n    promptTemplate: remotionPromptTemplate,\n  },\n);\n\n/**\n * Type for the Remotion schema\n */\nexport type RemotionSchema = typeof schema;\n\n/**\n * Infer the spec type from a catalog\n */\nexport type RemotionSpec<TCatalog> = typeof schema extends {\n  createCatalog: (catalog: TCatalog) => { _specType: infer S };\n}\n  ? S\n  : never;\n","import { z } from \"zod\";\n\n/**\n * Standard component definitions for Remotion catalogs\n *\n * These can be used directly or extended with custom components.\n */\nexport const standardComponentDefinitions = {\n  // ==========================================================================\n  // Scene Components (full-screen)\n  // ==========================================================================\n\n  TitleCard: {\n    props: z.object({\n      title: z.string(),\n      subtitle: z.string().nullable(),\n      backgroundColor: z.string().nullable(),\n      textColor: z.string().nullable(),\n    }),\n    type: \"scene\",\n    defaultDuration: 90,\n    description:\n      \"Full-screen title card with centered text. Use for intros, outros, and section breaks.\",\n  },\n\n  ImageSlide: {\n    props: z.object({\n      src: z.string(),\n      alt: z.string(),\n      fit: z.enum([\"cover\", \"contain\"]).nullable(),\n      backgroundColor: z.string().nullable(),\n    }),\n    type: \"image\",\n    defaultDuration: 150,\n    description:\n      \"Full-screen image display. Use for product shots, photos, and visual content.\",\n  },\n\n  SplitScreen: {\n    props: z.object({\n      leftTitle: z.string(),\n      rightTitle: z.string(),\n      leftColor: z.string().nullable(),\n      rightColor: z.string().nullable(),\n    }),\n    type: \"scene\",\n    defaultDuration: 120,\n    description:\n      \"Split screen with two sides. Use for comparisons or before/after.\",\n  },\n\n  QuoteCard: {\n    props: z.object({\n      quote: z.string(),\n      author: z.string().nullable(),\n      backgroundColor: z.string().nullable(),\n    }),\n    type: \"scene\",\n    defaultDuration: 150,\n    description: \"Quote display with attribution. Use for testimonials.\",\n  },\n\n  StatCard: {\n    props: z.object({\n      value: z.string(),\n      label: z.string(),\n      prefix: z.string().nullable(),\n      suffix: z.string().nullable(),\n      backgroundColor: z.string().nullable(),\n    }),\n    type: \"scene\",\n    defaultDuration: 90,\n    description: \"Large statistic display. Use for key metrics and numbers.\",\n  },\n\n  TypingText: {\n    props: z.object({\n      text: z.string(),\n      backgroundColor: z.string().nullable(),\n      textColor: z.string().nullable(),\n      fontSize: z.number().nullable(),\n      fontFamily: z.enum([\"monospace\", \"sans-serif\", \"serif\"]).nullable(),\n      showCursor: z.boolean().nullable(),\n      cursorChar: z.string().nullable(),\n      charsPerSecond: z.number().nullable(),\n    }),\n    type: \"scene\",\n    defaultDuration: 180,\n    description:\n      \"Terminal-style typing animation that reveals text character by character. Perfect for code demos, CLI commands, and dramatic text reveals.\",\n  },\n\n  // ==========================================================================\n  // Overlay Components\n  // ==========================================================================\n\n  LowerThird: {\n    props: z.object({\n      name: z.string(),\n      title: z.string().nullable(),\n      backgroundColor: z.string().nullable(),\n    }),\n    type: \"overlay\",\n    defaultDuration: 120,\n    description:\n      \"Name/title overlay in lower third of screen. Use to identify speakers.\",\n  },\n\n  TextOverlay: {\n    props: z.object({\n      text: z.string(),\n      position: z.enum([\"top\", \"center\", \"bottom\"]).nullable(),\n      fontSize: z.enum([\"small\", \"medium\", \"large\"]).nullable(),\n    }),\n    type: \"overlay\",\n    defaultDuration: 90,\n    description: \"Simple text overlay. Use for captions and annotations.\",\n  },\n\n  LogoBug: {\n    props: z.object({\n      position: z\n        .enum([\"top-left\", \"top-right\", \"bottom-left\", \"bottom-right\"])\n        .nullable(),\n      opacity: z.number().nullable(),\n    }),\n    type: \"overlay\",\n    defaultDuration: 300,\n    description: \"Corner logo watermark. Use for branding throughout video.\",\n  },\n\n  // ==========================================================================\n  // Video Components\n  // ==========================================================================\n\n  VideoClip: {\n    props: z.object({\n      src: z.string(),\n      startFrom: z.number().nullable(),\n      volume: z.number().nullable(),\n    }),\n    type: \"video\",\n    defaultDuration: 150,\n    description: \"Video file playback. Use for B-roll and footage.\",\n  },\n};\n\n/**\n * Standard transition definitions for Remotion catalogs\n */\nexport const standardTransitionDefinitions = {\n  fade: {\n    defaultDuration: 15,\n    description: \"Smooth fade in/out. Use for gentle transitions.\",\n  },\n  slideLeft: {\n    defaultDuration: 20,\n    description: \"Slide from right to left. Use for forward progression.\",\n  },\n  slideRight: {\n    defaultDuration: 20,\n    description: \"Slide from left to right. Use for backward progression.\",\n  },\n  slideUp: {\n    defaultDuration: 15,\n    description: \"Slide from bottom to top. Use for overlays appearing.\",\n  },\n  slideDown: {\n    defaultDuration: 15,\n    description: \"Slide from top to bottom. Use for overlays disappearing.\",\n  },\n  zoom: {\n    defaultDuration: 20,\n    description: \"Zoom in/out effect. Use for emphasis.\",\n  },\n  wipe: {\n    defaultDuration: 15,\n    description: \"Horizontal wipe. Use for scene changes.\",\n  },\n  none: {\n    defaultDuration: 0,\n    description: \"No transition (hard cut).\",\n  },\n};\n\n/**\n * Standard effect definitions for Remotion catalogs\n */\nexport const standardEffectDefinitions = {\n  kenBurns: {\n    params: z.object({\n      startScale: z.number(),\n      endScale: z.number(),\n      panX: z.number().nullable(),\n      panY: z.number().nullable(),\n    }),\n    description: \"Ken Burns pan and zoom effect for images.\",\n  },\n  pulse: {\n    params: z.object({\n      intensity: z.number(),\n    }),\n    description: \"Subtle pulsing scale effect for emphasis.\",\n  },\n  shake: {\n    params: z.object({\n      intensity: z.number(),\n    }),\n    description: \"Camera shake effect for energy.\",\n  },\n};\n\n/**\n * Type for component definition\n */\nexport type ComponentDefinition = {\n  props: z.ZodType;\n  type: string;\n  defaultDuration: number;\n  description: string;\n};\n\n/**\n * Type for transition definition\n */\nexport type TransitionDefinition = {\n  defaultDuration: number;\n  description: string;\n};\n\n/**\n * Type for effect definition\n */\nexport type EffectDefinition = {\n  params: z.ZodType;\n  description: string;\n};\n"],"mappings":"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","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,166 @@
+export { BuiltInTransition, ComponentDefinition, EffectDefinition, EffectFn, Effects, FrameContext, RemotionSchema, RemotionSpec, TransitionDefinition, TransitionFn, VideoComponentContext, VideoComponentFn, VideoComponents, schema, standardComponentDefinitions, standardEffectDefinitions, standardTransitionDefinitions } from './server.mjs';
+export { Spec } from '@json-render/core';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import 'zod';
+import 'react';
+
+/**
+ * Types for Remotion timeline components
+ */
+/**
+ * Clip data passed to components
+ */
+interface Clip {
+    id: string;
+    trackId: string;
+    component: string;
+    props: Record<string, unknown>;
+    from: number;
+    durationInFrames: number;
+    transitionIn?: {
+        type: string;
+        durationInFrames: number;
+    };
+    transitionOut?: {
+        type: string;
+        durationInFrames: number;
+    };
+}
+/**
+ * Timeline spec structure
+ */
+interface TimelineSpec {
+    composition?: {
+        id: string;
+        fps: number;
+        width: number;
+        height: number;
+        durationInFrames: number;
+    };
+    tracks?: {
+        id: string;
+        name: string;
+        type: string;
+        enabled: boolean;
+    }[];
+    clips?: Clip[];
+    audio?: {
+        tracks: AudioTrack[];
+    };
+}
+/**
+ * Audio track in the timeline
+ */
+interface AudioTrack {
+    id: string;
+    src: string;
+    from: number;
+    durationInFrames: number;
+    volume: number;
+}
+/**
+ * Transition styles calculated by useTransition hook
+ */
+interface TransitionStyles {
+    opacity: number;
+    translateX: number;
+    translateY: number;
+    scale: number;
+}
+/**
+ * Component render function type
+ */
+type ClipComponent = React.ComponentType<{
+    clip: Clip;
+}>;
+/**
+ * Component registry type
+ */
+type ComponentRegistry = Record<string, ClipComponent>;
+
+/**
+ * Calculate transition styles based on clip configuration
+ *
+ * Handles both transitionIn and transitionOut with support for:
+ * - fade
+ * - slideLeft / slideRight
+ * - slideUp / slideDown
+ * - zoom
+ * - wipe
+ */
+declare function useTransition(clip: Clip, frame: number): TransitionStyles;
+
+interface ClipWrapperProps {
+    clip: Clip;
+    children: React.ReactNode;
+}
+/**
+ * Wrapper component that applies transition animations to clips
+ *
+ * Automatically handles transitionIn and transitionOut based on clip config.
+ */
+declare function ClipWrapper({ clip, children }: ClipWrapperProps): react_jsx_runtime.JSX.Element;
+
+declare function TitleCard({ clip }: {
+    clip: Clip;
+}): react_jsx_runtime.JSX.Element;
+declare function ImageSlide({ clip }: {
+    clip: Clip;
+}): react_jsx_runtime.JSX.Element;
+declare function SplitScreen({ clip }: {
+    clip: Clip;
+}): react_jsx_runtime.JSX.Element;
+declare function QuoteCard({ clip }: {
+    clip: Clip;
+}): react_jsx_runtime.JSX.Element;
+declare function StatCard({ clip }: {
+    clip: Clip;
+}): react_jsx_runtime.JSX.Element;
+declare function LowerThird({ clip }: {
+    clip: Clip;
+}): react_jsx_runtime.JSX.Element;
+declare function TextOverlay({ clip }: {
+    clip: Clip;
+}): react_jsx_runtime.JSX.Element;
+declare function TypingText({ clip }: {
+    clip: Clip;
+}): react_jsx_runtime.JSX.Element;
+declare function LogoBug({ clip }: {
+    clip: Clip;
+}): react_jsx_runtime.JSX.Element;
+declare function VideoClip({ clip }: {
+    clip: Clip;
+}): react_jsx_runtime.JSX.Element;
+
+/**
+ * Standard components provided by @json-render/remotion
+ */
+declare const standardComponents: ComponentRegistry;
+interface RendererProps {
+    /** The timeline spec to render */
+    spec: TimelineSpec;
+    /**
+     * Custom component registry to merge with standard components.
+     * Custom components override standard ones with the same name.
+     */
+    components?: ComponentRegistry;
+}
+/**
+ * Renders a timeline spec into Remotion components
+ *
+ * @example
+ * // Use with standard components only
+ * <Renderer spec={mySpec} />
+ *
+ * @example
+ * // Add custom components
+ * <Renderer
+ *   spec={mySpec}
+ *   components={{
+ *     CustomScene: MyCustomSceneComponent,
+ *   }}
+ * />
+ */
+declare function Renderer({ spec, components: customComponents, }: RendererProps): react_jsx_runtime.JSX.Element;
+
+export { type AudioTrack, type Clip, type ClipComponent, ClipWrapper, type ComponentRegistry, ImageSlide, LogoBug, LowerThird, QuoteCard, Renderer, SplitScreen, StatCard, TextOverlay, type TimelineSpec, TitleCard, type TransitionStyles, TypingText, VideoClip, standardComponents, useTransition };