@json-render/remotion 0.4.0

package/dist/index.js

@@ -0,0 +1,913 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ClipWrapper: () => ClipWrapper,
+  ImageSlide: () => ImageSlide,
+  LogoBug: () => LogoBug,
+  LowerThird: () => LowerThird,
+  QuoteCard: () => QuoteCard,
+  Renderer: () => Renderer,
+  SplitScreen: () => SplitScreen,
+  StatCard: () => StatCard,
+  TextOverlay: () => TextOverlay,
+  TitleCard: () => TitleCard,
+  TypingText: () => TypingText,
+  VideoClip: () => VideoClip,
+  schema: () => schema,
+  standardComponentDefinitions: () => standardComponentDefinitions,
+  standardComponents: () => standardComponents,
+  standardEffectDefinitions: () => standardEffectDefinitions,
+  standardTransitionDefinitions: () => standardTransitionDefinitions,
+  useTransition: () => useTransition
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/schema.ts
+var import_core = require("@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 = (0, import_core.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/components/hooks.ts
+var import_remotion = require("remotion");
+function useTransition(clip, frame) {
+  const { fps } = (0, import_remotion.useVideoConfig)();
+  const relativeFrame = frame - clip.from;
+  const clipEnd = clip.durationInFrames;
+  let opacity = 1;
+  let translateX = 0;
+  let translateY = 0;
+  let scale = 1;
+  if (clip.transitionIn && relativeFrame < clip.transitionIn.durationInFrames) {
+    const progress = relativeFrame / clip.transitionIn.durationInFrames;
+    const easedProgress = (0, import_remotion.spring)({
+      frame: relativeFrame,
+      fps,
+      config: { damping: 200 },
+      durationInFrames: clip.transitionIn.durationInFrames
+    });
+    switch (clip.transitionIn.type) {
+      case "fade":
+        opacity = easedProgress;
+        break;
+      case "slideLeft":
+        translateX = (0, import_remotion.interpolate)(easedProgress, [0, 1], [100, 0]);
+        opacity = easedProgress;
+        break;
+      case "slideRight":
+        translateX = (0, import_remotion.interpolate)(easedProgress, [0, 1], [-100, 0]);
+        opacity = easedProgress;
+        break;
+      case "slideUp":
+        translateY = (0, import_remotion.interpolate)(easedProgress, [0, 1], [100, 0]);
+        opacity = easedProgress;
+        break;
+      case "slideDown":
+        translateY = (0, import_remotion.interpolate)(easedProgress, [0, 1], [-100, 0]);
+        opacity = easedProgress;
+        break;
+      case "zoom":
+        scale = (0, import_remotion.interpolate)(easedProgress, [0, 1], [0.8, 1]);
+        opacity = easedProgress;
+        break;
+      case "wipe":
+        opacity = progress;
+        break;
+    }
+  }
+  if (clip.transitionOut && relativeFrame > clipEnd - clip.transitionOut.durationInFrames) {
+    const outStart = clipEnd - clip.transitionOut.durationInFrames;
+    const outProgress = (relativeFrame - outStart) / clip.transitionOut.durationInFrames;
+    const easedOutProgress = 1 - outProgress;
+    switch (clip.transitionOut.type) {
+      case "fade":
+        opacity = Math.min(opacity, easedOutProgress);
+        break;
+      case "slideLeft":
+        translateX = (0, import_remotion.interpolate)(outProgress, [0, 1], [0, -100]);
+        opacity = Math.min(opacity, easedOutProgress);
+        break;
+      case "slideRight":
+        translateX = (0, import_remotion.interpolate)(outProgress, [0, 1], [0, 100]);
+        opacity = Math.min(opacity, easedOutProgress);
+        break;
+      case "slideUp":
+        translateY = (0, import_remotion.interpolate)(outProgress, [0, 1], [0, -100]);
+        opacity = Math.min(opacity, easedOutProgress);
+        break;
+      case "slideDown":
+        translateY = (0, import_remotion.interpolate)(outProgress, [0, 1], [0, 100]);
+        opacity = Math.min(opacity, easedOutProgress);
+        break;
+      case "zoom":
+        scale = (0, import_remotion.interpolate)(outProgress, [0, 1], [1, 1.2]);
+        opacity = Math.min(opacity, easedOutProgress);
+        break;
+    }
+  }
+  return { opacity, translateX, translateY, scale };
+}
+
+// src/components/ClipWrapper.tsx
+var import_remotion2 = require("remotion");
+var import_jsx_runtime = require("react/jsx-runtime");
+function ClipWrapper({ clip, children }) {
+  const frame = (0, import_remotion2.useCurrentFrame)();
+  const { opacity, translateX, translateY, scale } = useTransition(
+    clip,
+    frame + clip.from
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_remotion2.AbsoluteFill,
+    {
+      style: {
+        opacity,
+        transform: `translateX(${translateX}%) translateY(${translateY}%) scale(${scale})`
+      },
+      children
+    }
+  );
+}
+
+// src/components/standard.tsx
+var import_remotion3 = require("remotion");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function TitleCard({ clip }) {
+  const { title, subtitle, backgroundColor, textColor } = clip.props;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ClipWrapper, { clip, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    import_remotion3.AbsoluteFill,
+    {
+      style: {
+        backgroundColor: backgroundColor || "#1a1a2e",
+        color: textColor || "#ffffff",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 40
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "div",
+          {
+            style: {
+              fontSize: 72,
+              fontWeight: "bold",
+              textAlign: "center",
+              marginBottom: 16
+            },
+            children: title
+          }
+        ),
+        subtitle && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "div",
+          {
+            style: {
+              fontSize: 36,
+              opacity: 0.7,
+              textAlign: "center"
+            },
+            children: subtitle
+          }
+        )
+      ]
+    }
+  ) });
+}
+function ImageSlide({ clip }) {
+  const { src, alt, fit, backgroundColor } = clip.props;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ClipWrapper, { clip, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_remotion3.AbsoluteFill,
+    {
+      style: {
+        backgroundColor: backgroundColor || "#0a0a0a",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: src ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "img",
+        {
+          src,
+          alt,
+          style: {
+            width: "100%",
+            height: "100%",
+            objectFit: fit || "cover"
+          }
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { color: "rgba(255,255,255,0.5)", fontSize: 24 }, children: [
+        "[",
+        alt,
+        "]"
+      ] })
+    }
+  ) });
+}
+function SplitScreen({ clip }) {
+  const { leftTitle, rightTitle, leftColor, rightColor } = clip.props;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ClipWrapper, { clip, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_remotion3.AbsoluteFill, { style: { display: "flex", flexDirection: "row" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        style: {
+          flex: 1,
+          backgroundColor: leftColor || "#1a1a2e",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "#ffffff"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: 48, fontWeight: "bold" }, children: leftTitle })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        style: {
+          flex: 1,
+          backgroundColor: rightColor || "#2e1a1a",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "#ffffff"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: 48, fontWeight: "bold" }, children: rightTitle })
+      }
+    )
+  ] }) });
+}
+function QuoteCard({ clip }) {
+  const { quote, author, backgroundColor } = clip.props;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ClipWrapper, { clip, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    import_remotion3.AbsoluteFill,
+    {
+      style: {
+        backgroundColor: backgroundColor || "#1a1a2e",
+        color: "#ffffff",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 80
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "div",
+          {
+            style: {
+              fontSize: 48,
+              fontStyle: "italic",
+              textAlign: "center",
+              marginBottom: 24
+            },
+            children: [
+              "\u201C",
+              quote,
+              "\u201D"
+            ]
+          }
+        ),
+        author && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { fontSize: 28, opacity: 0.7 }, children: [
+          "- ",
+          author
+        ] })
+      ]
+    }
+  ) });
+}
+function StatCard({ clip }) {
+  const { value, label, prefix, suffix, backgroundColor } = clip.props;
+  const frame = (0, import_remotion3.useCurrentFrame)();
+  const { fps } = (0, import_remotion3.useVideoConfig)();
+  const animationProgress = (0, import_remotion3.spring)({
+    frame,
+    fps,
+    config: { damping: 100 },
+    durationInFrames: 30
+  });
+  const numValue = typeof value === "number" ? value : parseFloat(value) || 0;
+  const displayValue = Math.round(numValue * animationProgress);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ClipWrapper, { clip, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    import_remotion3.AbsoluteFill,
+    {
+      style: {
+        backgroundColor: backgroundColor || "#1a1a2e",
+        color: "#ffffff",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { fontSize: 96, fontWeight: "bold", marginBottom: 16 }, children: [
+          prefix || "",
+          typeof value === "number" ? displayValue : value,
+          suffix || ""
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: 32, opacity: 0.7 }, children: label })
+      ]
+    }
+  ) });
+}
+function LowerThird({ clip }) {
+  const { name, title } = clip.props;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ClipWrapper, { clip, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_remotion3.AbsoluteFill, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        bottom: 100,
+        left: 40,
+        backgroundColor: "rgba(0,0,0,0.8)",
+        color: "#ffffff",
+        padding: "16px 24px",
+        borderRadius: 8
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: 28, fontWeight: "bold" }, children: name }),
+        title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: 20, opacity: 0.7 }, children: title })
+      ]
+    }
+  ) }) });
+}
+function TextOverlay({ clip }) {
+  const { text, position, fontSize } = clip.props;
+  const positionStyles = {
+    top: { top: 100, left: 0, right: 0 },
+    center: { top: "50%", left: 0, right: 0, transform: "translateY(-50%)" },
+    bottom: { bottom: 100, left: 0, right: 0 }
+  };
+  const fontSizes = {
+    small: 24,
+    medium: 36,
+    large: 56
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ClipWrapper, { clip, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_remotion3.AbsoluteFill, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        ...positionStyles[position || "center"],
+        textAlign: "center",
+        color: "#ffffff",
+        fontSize: fontSizes[fontSize || "medium"],
+        padding: 20,
+        textShadow: "2px 2px 4px rgba(0,0,0,0.5)"
+      },
+      children: text
+    }
+  ) }) });
+}
+function TypingText({ clip }) {
+  const {
+    text,
+    backgroundColor,
+    textColor,
+    fontSize,
+    fontFamily,
+    showCursor = true,
+    cursorChar = "|",
+    charsPerSecond = 15
+  } = clip.props;
+  const frame = (0, import_remotion3.useCurrentFrame)();
+  const { fps } = (0, import_remotion3.useVideoConfig)();
+  const framesPerChar = fps / charsPerSecond;
+  const charsToShow = Math.min(Math.floor(frame / framesPerChar), text.length);
+  const displayedText = text.slice(0, charsToShow);
+  const isTypingComplete = charsToShow >= text.length;
+  const cursorVisible = showCursor && (Math.floor(frame / (fps / 2)) % 2 === 0 || !isTypingComplete);
+  const fontFamilyMap = {
+    monospace: "'Courier New', Consolas, monospace",
+    "sans-serif": "system-ui, -apple-system, sans-serif",
+    serif: "Georgia, 'Times New Roman', serif"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ClipWrapper, { clip, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_remotion3.AbsoluteFill,
+    {
+      style: {
+        backgroundColor: backgroundColor || "#1e1e1e",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 60
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "div",
+        {
+          style: {
+            color: textColor || "#00ff00",
+            fontSize: fontSize || 48,
+            fontFamily: fontFamilyMap[fontFamily || "monospace"],
+            whiteSpace: "pre-wrap",
+            wordBreak: "break-word",
+            maxWidth: "90%",
+            textAlign: "left"
+          },
+          children: [
+            displayedText,
+            cursorVisible && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "span",
+              {
+                style: {
+                  opacity: isTypingComplete ? Math.floor(frame / (fps / 2)) % 2 === 0 ? 1 : 0 : 1
+                },
+                children: cursorChar
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) });
+}
+function LogoBug({ clip }) {
+  const { position, opacity: propOpacity } = clip.props;
+  const positionStyles = {
+    "top-left": { top: 20, left: 20 },
+    "top-right": { top: 20, right: 20 },
+    "bottom-left": { bottom: 20, left: 20 },
+    "bottom-right": { bottom: 20, right: 20 }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ClipWrapper, { clip, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_remotion3.AbsoluteFill, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        ...positionStyles[position || "bottom-right"],
+        opacity: propOpacity ?? 0.5,
+        color: "#ffffff",
+        fontSize: 14,
+        fontWeight: "bold",
+        textShadow: "1px 1px 2px rgba(0,0,0,0.5)"
+      },
+      children: "LOGO"
+    }
+  ) }) });
+}
+function VideoClip({ clip }) {
+  const { src } = clip.props;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ClipWrapper, { clip, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_remotion3.AbsoluteFill,
+    {
+      style: {
+        backgroundColor: "#000000",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: "rgba(255,255,255,0.5)"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+        "[Video: ",
+        src,
+        "]"
+      ] })
+    }
+  ) });
+}
+
+// src/components/Renderer.tsx
+var import_remotion4 = require("remotion");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var standardComponents = {
+  TitleCard,
+  ImageSlide,
+  SplitScreen,
+  QuoteCard,
+  StatCard,
+  LowerThird,
+  TextOverlay,
+  TypingText,
+  LogoBug,
+  VideoClip
+};
+function Renderer({
+  spec,
+  components: customComponents
+}) {
+  const components = {
+    ...standardComponents,
+    ...customComponents
+  };
+  if (!spec.clips || spec.clips.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_remotion4.AbsoluteFill,
+      {
+        style: {
+          backgroundColor: "#1a1a2e",
+          color: "#ffffff",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontSize: 24, opacity: 0.5 }, children: "No clips" })
+      }
+    );
+  }
+  const mainClips = spec.clips.filter((c) => c.trackId === "main");
+  const overlayClips = spec.clips.filter((c) => c.trackId === "overlay");
+  const renderClip = (clip) => {
+    const Component = components[clip.component];
+    if (!Component) {
+      console.warn(`Unknown component: ${clip.component}`);
+      return null;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_remotion4.Sequence,
+      {
+        from: clip.from,
+        durationInFrames: clip.durationInFrames,
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, { clip })
+      },
+      clip.id
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_remotion4.AbsoluteFill, { style: { backgroundColor: "#000000" }, children: [
+    mainClips.map(renderClip),
+    overlayClips.map(renderClip)
+  ] });
+}
+
+// src/catalog/definitions.ts
+var import_zod = require("zod");
+var standardComponentDefinitions = {
+  // ==========================================================================
+  // Scene Components (full-screen)
+  // ==========================================================================
+  TitleCard: {
+    props: import_zod.z.object({
+      title: import_zod.z.string(),
+      subtitle: import_zod.z.string().nullable(),
+      backgroundColor: import_zod.z.string().nullable(),
+      textColor: import_zod.z.string().nullable()
+    }),
+    type: "scene",
+    defaultDuration: 90,
+    description: "Full-screen title card with centered text. Use for intros, outros, and section breaks."
+  },
+  ImageSlide: {
+    props: import_zod.z.object({
+      src: import_zod.z.string(),
+      alt: import_zod.z.string(),
+      fit: import_zod.z.enum(["cover", "contain"]).nullable(),
+      backgroundColor: import_zod.z.string().nullable()
+    }),
+    type: "image",
+    defaultDuration: 150,
+    description: "Full-screen image display. Use for product shots, photos, and visual content."
+  },
+  SplitScreen: {
+    props: import_zod.z.object({
+      leftTitle: import_zod.z.string(),
+      rightTitle: import_zod.z.string(),
+      leftColor: import_zod.z.string().nullable(),
+      rightColor: import_zod.z.string().nullable()
+    }),
+    type: "scene",
+    defaultDuration: 120,
+    description: "Split screen with two sides. Use for comparisons or before/after."
+  },
+  QuoteCard: {
+    props: import_zod.z.object({
+      quote: import_zod.z.string(),
+      author: import_zod.z.string().nullable(),
+      backgroundColor: import_zod.z.string().nullable()
+    }),
+    type: "scene",
+    defaultDuration: 150,
+    description: "Quote display with attribution. Use for testimonials."
+  },
+  StatCard: {
+    props: import_zod.z.object({
+      value: import_zod.z.string(),
+      label: import_zod.z.string(),
+      prefix: import_zod.z.string().nullable(),
+      suffix: import_zod.z.string().nullable(),
+      backgroundColor: import_zod.z.string().nullable()
+    }),
+    type: "scene",
+    defaultDuration: 90,
+    description: "Large statistic display. Use for key metrics and numbers."
+  },
+  TypingText: {
+    props: import_zod.z.object({
+      text: import_zod.z.string(),
+      backgroundColor: import_zod.z.string().nullable(),
+      textColor: import_zod.z.string().nullable(),
+      fontSize: import_zod.z.number().nullable(),
+      fontFamily: import_zod.z.enum(["monospace", "sans-serif", "serif"]).nullable(),
+      showCursor: import_zod.z.boolean().nullable(),
+      cursorChar: import_zod.z.string().nullable(),
+      charsPerSecond: import_zod.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: import_zod.z.object({
+      name: import_zod.z.string(),
+      title: import_zod.z.string().nullable(),
+      backgroundColor: import_zod.z.string().nullable()
+    }),
+    type: "overlay",
+    defaultDuration: 120,
+    description: "Name/title overlay in lower third of screen. Use to identify speakers."
+  },
+  TextOverlay: {
+    props: import_zod.z.object({
+      text: import_zod.z.string(),
+      position: import_zod.z.enum(["top", "center", "bottom"]).nullable(),
+      fontSize: import_zod.z.enum(["small", "medium", "large"]).nullable()
+    }),
+    type: "overlay",
+    defaultDuration: 90,
+    description: "Simple text overlay. Use for captions and annotations."
+  },
+  LogoBug: {
+    props: import_zod.z.object({
+      position: import_zod.z.enum(["top-left", "top-right", "bottom-left", "bottom-right"]).nullable(),
+      opacity: import_zod.z.number().nullable()
+    }),
+    type: "overlay",
+    defaultDuration: 300,
+    description: "Corner logo watermark. Use for branding throughout video."
+  },
+  // ==========================================================================
+  // Video Components
+  // ==========================================================================
+  VideoClip: {
+    props: import_zod.z.object({
+      src: import_zod.z.string(),
+      startFrom: import_zod.z.number().nullable(),
+      volume: import_zod.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: import_zod.z.object({
+      startScale: import_zod.z.number(),
+      endScale: import_zod.z.number(),
+      panX: import_zod.z.number().nullable(),
+      panY: import_zod.z.number().nullable()
+    }),
+    description: "Ken Burns pan and zoom effect for images."
+  },
+  pulse: {
+    params: import_zod.z.object({
+      intensity: import_zod.z.number()
+    }),
+    description: "Subtle pulsing scale effect for emphasis."
+  },
+  shake: {
+    params: import_zod.z.object({
+      intensity: import_zod.z.number()
+    }),
+    description: "Camera shake effect for energy."
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ClipWrapper,
+  ImageSlide,
+  LogoBug,
+  LowerThird,
+  QuoteCard,
+  Renderer,
+  SplitScreen,
+  StatCard,
+  TextOverlay,
+  TitleCard,
+  TypingText,
+  VideoClip,
+  schema,
+  standardComponentDefinitions,
+  standardComponents,
+  standardEffectDefinitions,
+  standardTransitionDefinitions,
+  useTransition
+});
+//# sourceMappingURL=index.js.map