@klikeai/cut-preview 1.0.0

package/dist/index.js

@@ -0,0 +1,1163 @@
+// ../src/SmartStudioComposition.tsx
+import { AbsoluteFill as AbsoluteFill9 } from "remotion";
+
+// ../src/themes.ts
+var STYLE_PRESETS = [
+  "bold_impact",
+  "clean_saas",
+  "ugc_casual",
+  "premium_dark"
+];
+var DEFAULT_CAPTION_STYLE = {
+  fontFamily: "Montserrat",
+  fontSize: 64,
+  primaryColor: "#FFFFFF",
+  highlightColor: "#FFFF00",
+  outlineColor: "#000000",
+  outlineWidth: 3,
+  bold: true,
+  italic: false,
+  uppercase: false,
+  activeScale: 1.15,
+  animateIn: true,
+  template: "classic",
+  position: "bottom"
+};
+var DEFAULT_CAPTION_DISPLAY_MODE = "highlight";
+var DEFAULT_CAPTION_COMBINE_MS = 1200;
+var DEFAULT_OVERLAY_STYLE = {
+  fontFamily: "Poppins",
+  fontSize: 72,
+  color: "#FFFFFF",
+  outlineColor: "#000000",
+  outlineWidth: 3,
+  enterAnimation: "spring-pop",
+  bold: true
+};
+var DEFAULT_ENDCARD_STYLE = {
+  background: "#101010",
+  color: "#FFFFFF",
+  fontFamily: "Poppins",
+  fontSize: 88,
+  animateIn: true
+};
+var DEFAULT_PROGRESS_BAR = {
+  enabled: false,
+  color: "#FFFFFF",
+  heightPx: 10
+};
+var THEMES = {
+  // Promoção/varejo/urgência: tipografia pesada, caixa alta, box no token
+  // ativo, paleta amarelo-vibrante, progress bar de urgência.
+  bold_impact: {
+    captions: {
+      fontFamily: "Anton",
+      uppercase: true,
+      template: "box",
+      highlightColor: "#FFE600",
+      primaryColor: "#FFFFFF",
+      outlineWidth: 4,
+      activeScale: 1.1
+    },
+    overlays: {
+      fontFamily: "Anton",
+      enterAnimation: "zoom",
+      color: "#FFE600",
+      outlineWidth: 4
+    },
+    endcard: {
+      gradient: { from: "#1B1B1B", to: "#4A0E0E", angleDeg: 160 },
+      color: "#FFE600",
+      fontFamily: "Anton"
+    },
+    progressBar: { enabled: true, color: "#FFE600" },
+    cutTransition: { type: "slide", durationMs: 250 }
+  },
+  // Produto digital/B2B: limpo, pill translúcido, azul confiável, fades.
+  clean_saas: {
+    captions: {
+      fontFamily: "Inter",
+      template: "pill",
+      highlightColor: "#4D9FFF",
+      primaryColor: "#FFFFFF",
+      outlineWidth: 0,
+      activeScale: 1.06
+    },
+    overlays: {
+      fontFamily: "Inter",
+      enterAnimation: "slide-up",
+      color: "#FFFFFF",
+      outlineWidth: 2
+    },
+    endcard: {
+      gradient: { from: "#0F2027", to: "#2C5364", angleDeg: 150 },
+      color: "#FFFFFF",
+      fontFamily: "Inter"
+    },
+    progressBar: { enabled: true, color: "#4D9FFF", heightPx: 8 },
+    cutTransition: { type: "fade", durationMs: 300 }
+  },
+  // Creator falando pra câmera: informal, pop forte, cores quentes.
+  ugc_casual: {
+    captions: {
+      fontFamily: "Poppins",
+      template: "classic",
+      highlightColor: "#7CFF6B",
+      activeScale: 1.25
+    },
+    overlays: {
+      fontFamily: "Poppins",
+      enterAnimation: "spring-pop"
+    },
+    endcard: {
+      background: "#141414",
+      color: "#7CFF6B",
+      fontFamily: "Poppins"
+    },
+    cutTransition: { type: "fade", durationMs: 200 }
+  },
+  // Marca premium: glow dourado sutil, tipografia condensada, fades lentos.
+  premium_dark: {
+    captions: {
+      fontFamily: "Oswald",
+      template: "glow",
+      primaryColor: "#F4EBDC",
+      highlightColor: "#E8C46B",
+      outlineWidth: 0,
+      activeScale: 1.08,
+      bold: false
+    },
+    overlays: {
+      fontFamily: "Oswald",
+      enterAnimation: "fade",
+      color: "#E8C46B",
+      outlineWidth: 1,
+      bold: false
+    },
+    endcard: {
+      gradient: { from: "#0B0B0D", to: "#2A2118", angleDeg: 170 },
+      color: "#E8C46B",
+      fontFamily: "Oswald"
+    },
+    cutTransition: { type: "fade", durationMs: 500 }
+  }
+};
+var resolveTheme = (preset) => {
+  if (preset && STYLE_PRESETS.includes(preset)) {
+    return THEMES[preset];
+  }
+  return null;
+};
+var merge = (...layers) => {
+  const out = {};
+  for (const layer of layers) {
+    if (!layer) continue;
+    for (const [k, v] of Object.entries(layer)) {
+      if (v !== void 0) out[k] = v;
+    }
+  }
+  return out;
+};
+var resolveCaptionStyle = (theme, explicit) => merge(
+  DEFAULT_CAPTION_STYLE,
+  theme?.captions,
+  explicit
+);
+var resolveCaptionDisplayMode = (theme, explicit) => explicit ?? theme?.captions.displayMode ?? DEFAULT_CAPTION_DISPLAY_MODE;
+var resolveCaptionCombineMs = (theme, explicit) => explicit ?? theme?.captions.combineTokensWithinMs ?? DEFAULT_CAPTION_COMBINE_MS;
+var resolveOverlayItem = (theme, item) => merge(
+  DEFAULT_OVERLAY_STYLE,
+  theme?.overlays,
+  item
+);
+var resolveEndcard = (theme, endcard) => merge(
+  DEFAULT_ENDCARD_STYLE,
+  theme?.endcard,
+  endcard
+);
+var resolveProgressBar = (theme, explicit) => merge(DEFAULT_PROGRESS_BAR, theme?.progressBar, explicit);
+var DEFAULT_CUT_TRANSITION_MS = 300;
+var resolveCutTransition = (theme, explicitType, explicitMs) => {
+  const type = explicitType ?? theme?.cutTransition?.type ?? "fade";
+  const durationMs = explicitMs ?? theme?.cutTransition?.durationMs ?? DEFAULT_CUT_TRANSITION_MS;
+  return { type, durationMs };
+};
+
+// ../src/layers/VideoBase.tsx
+import { AbsoluteFill, OffthreadVideo } from "remotion";
+import { jsx } from "react/jsx-runtime";
+var VideoBase = ({ source, fit = "cover" }) => {
+  return /* @__PURE__ */ jsx(AbsoluteFill, { children: /* @__PURE__ */ jsx(
+    OffthreadVideo,
+    {
+      src: source.videoPath,
+      style: { width: "100%", height: "100%", objectFit: fit }
+    }
+  ) });
+};
+
+// ../src/layers/ReframeContainer.tsx
+import { AbsoluteFill as AbsoluteFill2, OffthreadVideo as OffthreadVideo2 } from "remotion";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var ReframeContainer = ({ reframe, source, children }) => {
+  if (!reframe.enabled) {
+    return /* @__PURE__ */ jsx2(Fragment, { children });
+  }
+  return /* @__PURE__ */ jsxs(AbsoluteFill2, { children: [
+    /* @__PURE__ */ jsx2(AbsoluteFill2, { children: /* @__PURE__ */ jsx2(
+      OffthreadVideo2,
+      {
+        src: source.videoPath,
+        muted: true,
+        style: {
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+          filter: "blur(30px)",
+          transform: "scale(1.1)"
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsx2(
+      AbsoluteFill2,
+      {
+        style: { alignItems: "center", justifyContent: "center" },
+        children
+      }
+    )
+  ] });
+};
+
+// ../src/layers/CutsSequencer.tsx
+import {
+  AbsoluteFill as AbsoluteFill3,
+  interpolate as interpolate2,
+  OffthreadVideo as OffthreadVideo3,
+  useVideoConfig
+} from "remotion";
+import {
+  linearTiming,
+  TransitionSeries
+} from "@remotion/transitions";
+import { fade } from "@remotion/transitions/fade";
+import { slide } from "@remotion/transitions/slide";
+import { wipe } from "@remotion/transitions/wipe";
+
+// ../src/helpers.ts
+import { interpolate, spring } from "remotion";
+var msToFrames = (ms, fps) => Math.round(ms / 1e3 * fps);
+var REFERENCE_MIN_SIDE = 1080;
+var uiScale = (width, height) => Math.min(width, height) / REFERENCE_MIN_SIDE;
+var springScale = (localFrame, fps, peak = 1.15, durationInFrames = 8) => {
+  const s = spring({
+    fps,
+    frame: localFrame,
+    config: { damping: 12, stiffness: 200, mass: 0.6 },
+    durationInFrames
+  });
+  return interpolate(s, [0, 1], [1, peak]);
+};
+var justifyForPosition = (position) => {
+  if (position === "top") return "flex-start";
+  if (position === "bottom") return "flex-end";
+  return "center";
+};
+var GRADE_TARGETS = {
+  warm: { sepia: 0.35, saturate: 1.25, brightness: 1.04 },
+  cold: { saturate: 1.1, hueDeg: -12, brightness: 1.02 },
+  vintage: { sepia: 0.5, contrast: 0.92, saturate: 0.85 },
+  bw: { grayscale: 1, contrast: 1.08 },
+  high_contrast: { contrast: 1.35, saturate: 1.1 },
+  vivid: { saturate: 1.45, contrast: 1.1 }
+};
+var gradeFilter = (preset, intensity) => {
+  const t = preset ? GRADE_TARGETS[preset] : void 0;
+  if (!t) return "none";
+  const k = Math.max(0, Math.min(intensity, 1));
+  const lerp = (from, to) => from + (to - from) * k;
+  const parts = [];
+  if (t.grayscale !== void 0) parts.push(`grayscale(${lerp(0, t.grayscale)})`);
+  if (t.sepia !== void 0) parts.push(`sepia(${lerp(0, t.sepia)})`);
+  if (t.saturate !== void 0) parts.push(`saturate(${lerp(1, t.saturate)})`);
+  if (t.contrast !== void 0) parts.push(`contrast(${lerp(1, t.contrast)})`);
+  if (t.brightness !== void 0) parts.push(`brightness(${lerp(1, t.brightness)})`);
+  if (t.hueDeg !== void 0) parts.push(`hue-rotate(${lerp(0, t.hueDeg)}deg)`);
+  return parts.length ? parts.join(" ") : "none";
+};
+var textOutline = (color, px = 3) => {
+  const o = [];
+  for (let dx = -px; dx <= px; dx++) {
+    for (let dy = -px; dy <= px; dy++) {
+      if (dx === 0 && dy === 0) continue;
+      o.push(`${dx}px ${dy}px 0 ${color}`);
+    }
+  }
+  return o.join(", ");
+};
+
+// ../src/layers/CutsSequencer.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var presentationFor = (type) => {
+  if (type === "wipe") return wipe();
+  if (type === "slide") return slide();
+  return fade();
+};
+var SegmentVideo = ({
+  source,
+  startFromFrames,
+  fadeInFrames,
+  fadeOutFrames,
+  durationInFrames,
+  reframe
+}) => {
+  const volume = (f) => {
+    let v = 1;
+    if (fadeInFrames > 0) {
+      v *= interpolate2(f, [0, fadeInFrames], [0, 1], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp"
+      });
+    }
+    if (fadeOutFrames > 0) {
+      v *= interpolate2(
+        f,
+        [durationInFrames - fadeOutFrames, durationInFrames],
+        [1, 0],
+        { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+      );
+    }
+    return v;
+  };
+  const fg = /* @__PURE__ */ jsx3(
+    OffthreadVideo3,
+    {
+      src: source.videoPath,
+      startFrom: startFromFrames,
+      volume,
+      style: {
+        width: "100%",
+        height: "100%",
+        objectFit: reframe.enabled ? "contain" : "cover"
+      }
+    }
+  );
+  if (!reframe.enabled) {
+    return /* @__PURE__ */ jsx3(AbsoluteFill3, { children: fg });
+  }
+  return /* @__PURE__ */ jsxs2(AbsoluteFill3, { children: [
+    /* @__PURE__ */ jsx3(AbsoluteFill3, { children: /* @__PURE__ */ jsx3(
+      OffthreadVideo3,
+      {
+        src: source.videoPath,
+        startFrom: startFromFrames,
+        muted: true,
+        style: {
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+          filter: "blur(30px)",
+          transform: "scale(1.1)"
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsx3(AbsoluteFill3, { style: { alignItems: "center", justifyContent: "center" }, children: fg })
+  ] });
+};
+var CutsSequencer = ({ source, cuts, reframe, transition }) => {
+  const { fps } = useVideoConfig();
+  const segments = cuts.segmentsKeepMs.filter(([s, e]) => e > s);
+  if (segments.length === 0) return null;
+  const minSegMs = Math.min(...segments.map(([s, e]) => e - s));
+  const useTransition = transition.type !== "none" && transition.durationMs > 0 && segments.length > 1;
+  const transF = useTransition ? Math.max(
+    1,
+    msToFrames(Math.min(transition.durationMs, minSegMs / 2), fps)
+  ) : 0;
+  const children = [];
+  segments.forEach(([startMs, endMs], i) => {
+    const durationInFrames = Math.max(1, msToFrames(endMs - startMs, fps));
+    const fadeInF = i > 0 ? transF : 0;
+    const fadeOutF = i < segments.length - 1 ? transF : 0;
+    children.push(
+      /* @__PURE__ */ jsx3(
+        TransitionSeries.Sequence,
+        {
+          durationInFrames,
+          children: /* @__PURE__ */ jsx3(
+            SegmentVideo,
+            {
+              source,
+              startFromFrames: msToFrames(startMs, fps),
+              fadeInFrames: fadeInF,
+              fadeOutFrames: fadeOutF,
+              durationInFrames,
+              reframe
+            }
+          )
+        },
+        `seg-${i}`
+      )
+    );
+    if (useTransition && i < segments.length - 1) {
+      children.push(
+        /* @__PURE__ */ jsx3(
+          TransitionSeries.Transition,
+          {
+            presentation: presentationFor(transition.type),
+            timing: linearTiming({ durationInFrames: transF })
+          },
+          `trans-${i}`
+        )
+      );
+    }
+  });
+  return /* @__PURE__ */ jsx3(TransitionSeries, { children });
+};
+
+// ../src/layers/ZoomLayer.tsx
+import { AbsoluteFill as AbsoluteFill4, spring as spring2, useCurrentFrame } from "remotion";
+import { Fragment as Fragment2, jsx as jsx4 } from "react/jsx-runtime";
+var momentScaleBoost = (frame, fps, moment) => {
+  const startF = msToFrames(moment.startMs, fps);
+  const endF = msToFrames(moment.endMs, fps);
+  const ramp = Math.max(1, Math.round(Math.min(fps * 0.3, (endF - startF) / 2)));
+  const enter = spring2({
+    fps,
+    frame: frame - startF,
+    config: { damping: 14, stiffness: 160, mass: 0.8 },
+    durationInFrames: ramp
+  });
+  const exit = spring2({
+    fps,
+    frame: frame - (endF - ramp),
+    config: { damping: 200 },
+    durationInFrames: ramp
+  });
+  return (moment.factor - 1) * Math.max(0, enter - exit);
+};
+var ZoomLayer = ({ zoom, fps, children }) => {
+  const frame = useCurrentFrame();
+  if (!zoom.enabled) {
+    return /* @__PURE__ */ jsx4(Fragment2, { children });
+  }
+  const moments = zoom.moments?.length ? zoom.moments : [{ startMs: zoom.startMs, endMs: zoom.endMs, factor: zoom.factor }];
+  let scale = 1;
+  if (zoom.animated) {
+    for (const moment of moments) {
+      scale += momentScaleBoost(frame, fps, moment);
+    }
+  } else {
+    for (const moment of moments) {
+      const startF = msToFrames(moment.startMs, fps);
+      const endF = msToFrames(moment.endMs, fps);
+      if (frame >= startF && frame <= endF) {
+        scale = moment.factor;
+        break;
+      }
+    }
+  }
+  return /* @__PURE__ */ jsx4(AbsoluteFill4, { style: { transform: `scale(${scale})` }, children });
+};
+
+// ../src/layers/CaptionsLayer.tsx
+import {
+  AbsoluteFill as AbsoluteFill5,
+  Easing,
+  interpolate as interpolate3,
+  Sequence,
+  useCurrentFrame as useCurrentFrame2,
+  useVideoConfig as useVideoConfig2
+} from "remotion";
+import {
+  createTikTokStyleCaptions
+} from "@remotion/captions";
+
+// ../src/fonts.ts
+import { loadFont as loadAnton } from "@remotion/google-fonts/Anton";
+import { loadFont as loadBebasNeue } from "@remotion/google-fonts/BebasNeue";
+import { loadFont as loadInter } from "@remotion/google-fonts/Inter";
+import { loadFont as loadMontserrat } from "@remotion/google-fonts/Montserrat";
+import { loadFont as loadOswald } from "@remotion/google-fonts/Oswald";
+import { loadFont as loadPoppins } from "@remotion/google-fonts/Poppins";
+import { loadFont as loadRoboto } from "@remotion/google-fonts/Roboto";
+var FONTS = {
+  Montserrat: loadMontserrat().fontFamily,
+  Inter: loadInter().fontFamily,
+  Poppins: loadPoppins().fontFamily,
+  Oswald: loadOswald().fontFamily,
+  "Bebas Neue": loadBebasNeue().fontFamily,
+  BebasNeue: "",
+  Anton: loadAnton().fontFamily,
+  Roboto: loadRoboto().fontFamily
+};
+FONTS.BebasNeue = FONTS["Bebas Neue"];
+var DEFAULT_CAPTION_FONT = "Montserrat";
+var DEFAULT_OVERLAY_FONT = "Poppins";
+function resolveFontFamily(name) {
+  if (name && FONTS[name]) {
+    return `${FONTS[name]}, Arial, sans-serif`;
+  }
+  if (name && name.trim()) {
+    return `${name}, Arial, sans-serif`;
+  }
+  return `${FONTS[DEFAULT_CAPTION_FONT]}, Arial, sans-serif`;
+}
+var AVAILABLE_FONTS = Object.keys(FONTS).filter((k) => FONTS[k]);
+
+// ../src/layers/CaptionsLayer.tsx
+import { Fragment as Fragment3, jsx as jsx5 } from "react/jsx-runtime";
+var glowShadow = (color, scale = 1) => `0 0 ${8 * scale}px ${color}, 0 0 ${18 * scale}px ${color}, 0 0 ${36 * scale}px ${color}66`;
+var Page = ({ page, style, displayMode, safeZones }) => {
+  const frame = useCurrentFrame2();
+  const { fps, width, height } = useVideoConfig2();
+  const nowMs = frame / fps * 1e3 + page.startMs;
+  const template = style.template;
+  const fontWeight = style.bold ? 800 : 500;
+  const ui = uiScale(width, height);
+  const enter = style.animateIn ? interpolate3(frame, [0, 5], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing.out(Easing.cubic)
+  }) : 1;
+  const textShadow = template === "glow" ? glowShadow(style.highlightColor, ui) : template === "pill" || style.outlineWidth <= 0 ? "none" : textOutline(
+    style.outlineColor,
+    Math.max(1, Math.round(style.outlineWidth * ui))
+  );
+  const baseStyle = {
+    fontFamily: resolveFontFamily(style.fontFamily),
+    fontWeight,
+    fontStyle: style.italic ? "italic" : "normal",
+    fontSize: style.fontSize * ui,
+    color: style.primaryColor,
+    textShadow,
+    textTransform: style.uppercase ? "uppercase" : "none"
+  };
+  const renderToken = (tokenText, fromMs, toMs, key) => {
+    const active = nowMs >= fromMs && nowMs < toMs;
+    if (displayMode === "word_by_word" && !active) return null;
+    const canHighlight = displayMode === "highlight" || displayMode === "karaoke" || displayMode === "word_by_word";
+    const highlight = canHighlight && active;
+    let scale = 1;
+    if (highlight && style.activeScale > 1) {
+      const tokenStartFrame = msToFrames(fromMs - page.startMs, fps);
+      scale = springScale(frame - tokenStartFrame, fps, style.activeScale);
+    }
+    const boxed = template === "box" && highlight;
+    return /* @__PURE__ */ jsx5(
+      "span",
+      {
+        style: {
+          color: boxed ? "#111111" : highlight ? style.highlightColor : style.primaryColor,
+          display: "inline-block",
+          transform: `scale(${scale})`,
+          whiteSpace: "pre",
+          ...boxed ? {
+            backgroundColor: style.highlightColor,
+            borderRadius: "0.18em",
+            padding: "0 0.12em",
+            textShadow: "none"
+          } : {},
+          ...template === "glow" && highlight ? { textShadow: glowShadow(style.highlightColor, ui) } : {}
+        },
+        children: tokenText
+      },
+      key
+    );
+  };
+  const position = style.position;
+  return /* @__PURE__ */ jsx5(
+    AbsoluteFill5,
+    {
+      style: {
+        justifyContent: position === "top" ? "flex-start" : position === "center" ? "center" : "flex-end",
+        alignItems: "center",
+        paddingTop: height * safeZones.marginTopPercent,
+        paddingBottom: height * safeZones.marginBottomPercent,
+        paddingLeft: width * safeZones.marginSidePercent,
+        paddingRight: width * safeZones.marginSidePercent
+      },
+      children: /* @__PURE__ */ jsx5(
+        "div",
+        {
+          style: {
+            ...baseStyle,
+            textAlign: "center",
+            lineHeight: 1.25,
+            opacity: enter,
+            transform: `scale(${interpolate3(enter, [0, 1], [0.92, 1])})`,
+            // Template pill: bloco da página sobre fundo arredondado translúcido.
+            ...template === "pill" ? {
+              backgroundColor: "rgba(12, 12, 14, 0.72)",
+              borderRadius: 22 * ui,
+              padding: "0.35em 0.6em"
+            } : {}
+          },
+          children: page.tokens.map((t, i) => renderToken(t.text, t.fromMs, t.toMs, i))
+        }
+      )
+    }
+  );
+};
+var CaptionsLayer = ({ captions, style, displayMode, combineTokensWithinMs, safeZones, fps }) => {
+  if (!captions.enabled || !captions.tokens || captions.tokens.length === 0) {
+    return null;
+  }
+  const remotionCaptions = captions.tokens.map((t, i) => ({
+    text: i === 0 ? t.text : ` ${t.text}`,
+    startMs: t.startMs,
+    endMs: t.endMs,
+    timestampMs: (t.startMs + t.endMs) / 2,
+    confidence: t.confidence ?? null
+  }));
+  const sentenceChunks = [];
+  let currentChunk = [];
+  for (const caption of remotionCaptions) {
+    currentChunk.push(caption);
+    if (/[.!?…]["')\]]?$/.test(caption.text.trim())) {
+      sentenceChunks.push(currentChunk);
+      currentChunk = [];
+    }
+  }
+  if (currentChunk.length > 0) sentenceChunks.push(currentChunk);
+  const pages = sentenceChunks.flatMap((chunk) => {
+    const normalized = chunk.map(
+      (c, i) => i === 0 ? { ...c, text: c.text.trimStart() } : c
+    );
+    return createTikTokStyleCaptions({
+      captions: normalized,
+      combineTokensWithinMilliseconds: combineTokensWithinMs
+    }).pages;
+  });
+  return /* @__PURE__ */ jsx5(Fragment3, { children: pages.map((page, i) => {
+    const from = msToFrames(page.startMs, fps);
+    const durationInFrames = Math.max(1, msToFrames(page.durationMs, fps));
+    return /* @__PURE__ */ jsx5(
+      Sequence,
+      {
+        from,
+        durationInFrames,
+        name: `caption-page-${i}`,
+        children: /* @__PURE__ */ jsx5(
+          Page,
+          {
+            page,
+            style,
+            displayMode,
+            safeZones
+          }
+        )
+      },
+      i
+    );
+  }) });
+};
+
+// ../src/layers/OverlayLayer.tsx
+import {
+  AbsoluteFill as AbsoluteFill6,
+  interpolate as interpolate4,
+  Sequence as Sequence2,
+  spring as spring3,
+  useCurrentFrame as useCurrentFrame3,
+  useVideoConfig as useVideoConfig3
+} from "remotion";
+import { fitText } from "@remotion/layout-utils";
+import { Fragment as Fragment4, jsx as jsx6 } from "react/jsx-runtime";
+var DEFAULT_FADE_MS = 300;
+var DEFAULT_FONT_SIZE = 72;
+var DEFAULT_COLOR = "#FFFFFF";
+var DEFAULT_OUTLINE = "#000000";
+var MIN_FONT_SIZE = 40;
+var fitFontSize = (text, desired, withinWidth, fontFamily, fontWeight, uppercase, minSize = MIN_FONT_SIZE) => {
+  try {
+    const oneLine = fitText({
+      text,
+      withinWidth,
+      fontFamily,
+      fontWeight,
+      textTransform: uppercase ? "uppercase" : void 0
+    }).fontSize;
+    if (oneLine >= desired * 0.7) return Math.min(desired, oneLine);
+    const twoLines = fitText({
+      text,
+      withinWidth: withinWidth * 1.9,
+      fontFamily,
+      fontWeight,
+      textTransform: uppercase ? "uppercase" : void 0
+    }).fontSize;
+    return Math.max(minSize, Math.min(desired, twoLines));
+  } catch {
+    return desired;
+  }
+};
+var CAPTION_BAND_PCT = 0.13;
+var OverlayText = ({ item, durationInFrames, fps, safeZones, captionsPosition }) => {
+  const frame = useCurrentFrame3();
+  const { width, height } = useVideoConfig3();
+  const fadeInF = Math.max(1, msToFrames(item.fadeMs ?? DEFAULT_FADE_MS, fps));
+  const fadeOutF = Math.max(
+    1,
+    msToFrames(item.fadeOutMs ?? item.fadeMs ?? DEFAULT_FADE_MS, fps)
+  );
+  const enterAnim = item.enterAnimation ?? "spring-pop";
+  const enterSpring = spring3({
+    fps,
+    frame,
+    config: { damping: 14, stiffness: 200, mass: 0.7 },
+    durationInFrames: fadeInF
+  });
+  const enterLinear = interpolate4(frame, [0, fadeInF], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  const opacity = interpolate4(
+    frame,
+    [0, fadeInF, Math.max(fadeInF, durationInFrames - fadeOutF), durationInFrames],
+    [0, 1, 1, 0],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+  );
+  let transform = "none";
+  if (enterAnim === "slide-up") {
+    transform = `translateY(${interpolate4(enterLinear, [0, 1], [40, 0])}px)`;
+  } else if (enterAnim === "slide-down") {
+    transform = `translateY(${interpolate4(enterLinear, [0, 1], [-40, 0])}px)`;
+  } else if (enterAnim === "zoom") {
+    transform = `scale(${interpolate4(enterLinear, [0, 1], [0.6, 1])})`;
+  } else if (enterAnim === "spring-pop") {
+    transform = `scale(${interpolate4(enterSpring, [0, 1], [0.7, 1])})`;
+  }
+  const fontFamily = resolveFontFamily(item.fontFamily ?? DEFAULT_OVERLAY_FONT);
+  const fontWeight = item.bold === false ? 500 : 700;
+  const ui = uiScale(width, height);
+  const outlineWidth = Math.max(
+    1,
+    Math.round((item.outlineWidth ?? 3) * ui)
+  );
+  const withinWidth = width * (1 - 2 * safeZones.marginSidePercent);
+  const fontSize = fitFontSize(
+    item.text,
+    (item.fontSize ?? DEFAULT_FONT_SIZE) * ui,
+    withinWidth,
+    fontFamily,
+    fontWeight,
+    false,
+    MIN_FONT_SIZE * ui
+  );
+  const overlayPos = item.position ?? "center";
+  const bottomClearance = safeZones.marginBottomPercent + (captionsPosition === "bottom" && overlayPos === "bottom" ? CAPTION_BAND_PCT : 0);
+  const topClearance = safeZones.marginTopPercent + (captionsPosition === "top" && overlayPos === "top" ? CAPTION_BAND_PCT : 0);
+  return /* @__PURE__ */ jsx6(
+    AbsoluteFill6,
+    {
+      style: {
+        justifyContent: justifyForPosition(item.position),
+        alignItems: "center",
+        paddingTop: height * topClearance,
+        paddingBottom: height * bottomClearance,
+        paddingLeft: width * safeZones.marginSidePercent,
+        paddingRight: width * safeZones.marginSidePercent
+      },
+      children: /* @__PURE__ */ jsx6(
+        "div",
+        {
+          style: {
+            opacity,
+            transform,
+            textAlign: "center",
+            fontFamily,
+            fontWeight,
+            fontStyle: item.italic ? "italic" : "normal",
+            fontSize,
+            color: item.color ?? DEFAULT_COLOR,
+            textShadow: outlineWidth > 0 ? textOutline(item.outlineColor ?? DEFAULT_OUTLINE, outlineWidth) : "none",
+            lineHeight: 1.15,
+            whiteSpace: "pre-wrap"
+          },
+          children: item.text
+        }
+      )
+    }
+  );
+};
+var OverlayLayer = ({ overlays, safeZones, fps, captionsPosition = null }) => {
+  if (!overlays || overlays.length === 0) return null;
+  return /* @__PURE__ */ jsx6(Fragment4, { children: overlays.map((item, i) => {
+    const from = msToFrames(item.startMs, fps);
+    const durationInFrames = Math.max(
+      1,
+      msToFrames(item.endMs, fps) - from
+    );
+    return /* @__PURE__ */ jsx6(
+      Sequence2,
+      {
+        from,
+        durationInFrames,
+        name: `overlay-${i}`,
+        children: /* @__PURE__ */ jsx6(
+          OverlayText,
+          {
+            item,
+            durationInFrames,
+            fps,
+            safeZones,
+            captionsPosition
+          }
+        )
+      },
+      i
+    );
+  }) });
+};
+
+// ../src/layers/ImageOverlayLayer.tsx
+import {
+  AbsoluteFill as AbsoluteFill7,
+  Img,
+  interpolate as interpolate5,
+  Sequence as Sequence3,
+  useCurrentFrame as useCurrentFrame4,
+  useVideoConfig as useVideoConfig4
+} from "remotion";
+import { Fragment as Fragment5, jsx as jsx7 } from "react/jsx-runtime";
+var FADE_MS = 300;
+var alignFor = (corner) => {
+  const vertical = corner.startsWith("top") ? "flex-start" : corner.startsWith("bottom") ? "flex-end" : "center";
+  const horizontal = corner.endsWith("left") ? "flex-start" : corner.endsWith("right") ? "flex-end" : "center";
+  return { vertical, horizontal };
+};
+var ImageOverlay = ({ item, durationInFrames, fps, safeZones }) => {
+  const frame = useCurrentFrame4();
+  const { width, height } = useVideoConfig4();
+  const fadeF = Math.max(1, msToFrames(FADE_MS, fps));
+  const opacity = interpolate5(
+    frame,
+    [0, fadeF, Math.max(fadeF, durationInFrames - fadeF), durationInFrames],
+    [0, 1, 1, 0],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+  ) * item.opacity;
+  const { vertical, horizontal } = alignFor(item.corner);
+  return /* @__PURE__ */ jsx7(
+    AbsoluteFill7,
+    {
+      style: {
+        justifyContent: vertical,
+        alignItems: horizontal,
+        paddingTop: height * safeZones.marginTopPercent,
+        paddingBottom: height * safeZones.marginBottomPercent,
+        paddingLeft: width * safeZones.marginSidePercent,
+        paddingRight: width * safeZones.marginSidePercent
+      },
+      children: /* @__PURE__ */ jsx7(
+        Img,
+        {
+          src: item.src,
+          style: {
+            height: height * item.heightPct,
+            width: "auto",
+            maxWidth: width * 0.8,
+            objectFit: "contain",
+            opacity
+          }
+        }
+      )
+    }
+  );
+};
+var ImageOverlayLayer = ({ imageOverlays, safeZones, fps }) => {
+  if (!imageOverlays || imageOverlays.length === 0) return null;
+  return /* @__PURE__ */ jsx7(Fragment5, { children: imageOverlays.map((item, i) => {
+    const from = msToFrames(item.startMs, fps);
+    const durationInFrames = Math.max(
+      1,
+      msToFrames(item.endMs, fps) - from
+    );
+    return /* @__PURE__ */ jsx7(
+      Sequence3,
+      {
+        from,
+        durationInFrames,
+        name: `image-overlay-${i}`,
+        children: /* @__PURE__ */ jsx7(
+          ImageOverlay,
+          {
+            item,
+            durationInFrames,
+            fps,
+            safeZones
+          }
+        )
+      },
+      i
+    );
+  }) });
+};
+
+// ../src/layers/ProgressBarLayer.tsx
+import { useCurrentFrame as useCurrentFrame5, useVideoConfig as useVideoConfig5 } from "remotion";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var ProgressBarLayer = ({ progressBar, sourceDurationInSeconds, fps }) => {
+  const frame = useCurrentFrame5();
+  const { width, height } = useVideoConfig5();
+  if (!progressBar.enabled || sourceDurationInSeconds <= 0) return null;
+  const totalFrames = Math.max(1, Math.round(sourceDurationInSeconds * fps));
+  const progress = Math.min(1, frame / totalFrames);
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: `${progress * 100}%`,
+        // heightPx calibrado p/ lado menor 1080 → escala p/ o canvas real.
+        height: Math.max(2, progressBar.heightPx * uiScale(width, height)),
+        backgroundColor: progressBar.color,
+        opacity: 0.9
+      }
+    }
+  );
+};
+
+// ../src/layers/EndcardSequence.tsx
+import {
+  AbsoluteFill as AbsoluteFill8,
+  Img as Img2,
+  interpolate as interpolate6,
+  Sequence as Sequence4,
+  spring as spring4,
+  useCurrentFrame as useCurrentFrame6,
+  useVideoConfig as useVideoConfig6
+} from "remotion";
+import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+var DEFAULT_GRADIENT_ANGLE_DEG = 160;
+var DEFAULT_LOGO_HEIGHT_PX = 140;
+var backgroundStyle = (endcard) => {
+  if (endcard.gradient?.from && endcard.gradient?.to) {
+    const angle = endcard.gradient.angleDeg ?? DEFAULT_GRADIENT_ANGLE_DEG;
+    return {
+      background: `linear-gradient(${angle}deg, ${endcard.gradient.from}, ${endcard.gradient.to})`
+    };
+  }
+  return { backgroundColor: endcard.background ?? "#101010" };
+};
+var EndcardCard = ({
+  endcard,
+  fps
+}) => {
+  const frame = useCurrentFrame6();
+  const { width, height } = useVideoConfig6();
+  const animate = endcard.animateIn ?? true;
+  const ui = uiScale(width, height);
+  const logoIn = animate ? spring4({
+    fps,
+    frame,
+    config: { damping: 12, stiffness: 170, mass: 0.7 },
+    durationInFrames: Math.round(fps * 0.5)
+  }) : 1;
+  const textDelay = animate ? Math.round(fps * 0.15) : 0;
+  const textIn = animate ? spring4({
+    fps,
+    frame,
+    delay: textDelay,
+    config: { damping: 200 },
+    durationInFrames: Math.round(fps * 0.5)
+  }) : 1;
+  const textY = interpolate6(textIn, [0, 1], [40 * ui, 0]);
+  return /* @__PURE__ */ jsxs3(
+    AbsoluteFill8,
+    {
+      style: {
+        ...backgroundStyle(endcard),
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "8%"
+      },
+      children: [
+        endcard.logoUrl ? /* @__PURE__ */ jsx9(
+          Img2,
+          {
+            src: endcard.logoUrl,
+            style: {
+              height: (endcard.logoHeightPx ?? DEFAULT_LOGO_HEIGHT_PX) * ui,
+              objectFit: "contain",
+              marginBottom: 48 * ui,
+              opacity: logoIn,
+              transform: `scale(${interpolate6(logoIn, [0, 1], [0.6, 1])})`
+            }
+          }
+        ) : null,
+        /* @__PURE__ */ jsx9(
+          "div",
+          {
+            style: {
+              opacity: textIn,
+              transform: `translateY(${textY}px)`,
+              textAlign: "center",
+              fontFamily: resolveFontFamily(endcard.fontFamily ?? DEFAULT_OVERLAY_FONT),
+              fontWeight: 700,
+              fontSize: (endcard.fontSize ?? 88) * ui,
+              color: endcard.color ?? "#FFFFFF",
+              textShadow: textOutline("#000000", Math.max(1, Math.round(2 * ui))),
+              lineHeight: 1.2,
+              whiteSpace: "pre-wrap"
+            },
+            children: endcard.text
+          }
+        )
+      ]
+    }
+  );
+};
+var EndcardSequence = ({ endcard, sourceDurationInSeconds, fps }) => {
+  if (!endcard.enabled || !endcard.text) return null;
+  const from = Math.round(sourceDurationInSeconds * fps);
+  const durationInFrames = Math.max(1, msToFrames(endcard.durationMs, fps));
+  return /* @__PURE__ */ jsx9(Sequence4, { from, durationInFrames, name: "endcard", children: /* @__PURE__ */ jsx9(EndcardCard, { endcard, fps }) });
+};
+
+// ../src/SmartStudioComposition.tsx
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+var SmartStudioComposition = (props) => {
+  const { source, output, captions, overlays, endcard, safeZones, reframe, zoom, cuts } = props;
+  const theme = resolveTheme(props.stylePreset);
+  const captionStyle = resolveCaptionStyle(theme, captions.style);
+  const displayMode = resolveCaptionDisplayMode(theme, captions.displayMode);
+  const combineMs = resolveCaptionCombineMs(theme, captions.combineTokensWithinMs);
+  const themedOverlays = overlays.map((o) => resolveOverlayItem(theme, o));
+  const themedEndcard = resolveEndcard(theme, endcard);
+  const progressBar = resolveProgressBar(theme, props.progressBar);
+  const cutTransition = resolveCutTransition(
+    theme,
+    cuts.transitionType,
+    cuts.transitionMs
+  );
+  const videoFilter = props.colorGrade ? gradeFilter(props.colorGrade.preset, props.colorGrade.intensity) : "none";
+  return /* @__PURE__ */ jsxs4(AbsoluteFill9, { style: { backgroundColor: "#000000" }, children: [
+    /* @__PURE__ */ jsx10(AbsoluteFill9, { style: videoFilter !== "none" ? { filter: videoFilter } : void 0, children: cuts.enabled ? (
+      // Cortes DENTRO da composição: CutsSequencer é reframe-aware por
+      // segmento; o ZoomLayer envolve tudo (janelas já remapeadas p/ a
+      // timeline pós-corte pelo Python).
+      /* @__PURE__ */ jsx10(ZoomLayer, { zoom, fps: output.fps, children: /* @__PURE__ */ jsx10(
+        CutsSequencer,
+        {
+          source,
+          cuts,
+          reframe,
+          transition: cutTransition
+        }
+      ) })
+    ) : /* @__PURE__ */ jsx10(ReframeContainer, { reframe, output, source, children: /* @__PURE__ */ jsx10(ZoomLayer, { zoom, fps: output.fps, children: /* @__PURE__ */ jsx10(
+      VideoBase,
+      {
+        source,
+        fit: reframe.enabled ? "contain" : "cover"
+      }
+    ) }) }) }),
+    /* @__PURE__ */ jsx10(
+      CaptionsLayer,
+      {
+        captions,
+        style: captionStyle,
+        displayMode,
+        combineTokensWithinMs: combineMs,
+        safeZones,
+        fps: output.fps
+      }
+    ),
+    /* @__PURE__ */ jsx10(
+      OverlayLayer,
+      {
+        overlays: themedOverlays,
+        safeZones,
+        fps: output.fps,
+        captionsPosition: captions.enabled && captions.tokens.length > 0 ? captionStyle.position : null
+      }
+    ),
+    /* @__PURE__ */ jsx10(
+      ImageOverlayLayer,
+      {
+        imageOverlays: props.imageOverlays,
+        safeZones,
+        fps: output.fps
+      }
+    ),
+    /* @__PURE__ */ jsx10(
+      ProgressBarLayer,
+      {
+        progressBar,
+        sourceDurationInSeconds: source.durationInSeconds,
+        fps: output.fps
+      }
+    ),
+    /* @__PURE__ */ jsx10(
+      EndcardSequence,
+      {
+        endcard: themedEndcard,
+        sourceDurationInSeconds: source.durationInSeconds,
+        fps: output.fps
+      }
+    )
+  ] });
+};
+
+// ../src/metadata.ts
+var FALLBACK_DURATION_IN_FRAMES = 300;
+var calculateSmartStudioMetadata = ({
+  props
+}) => {
+  const fps = props.output?.fps || props.source?.fps || 30;
+  const sourceSeconds = props.source?.durationInSeconds || 0;
+  const endcardSeconds = props.endcard?.enabled && props.endcard?.durationMs ? props.endcard.durationMs / 1e3 : 0;
+  const totalSeconds = sourceSeconds + endcardSeconds;
+  const durationInFrames = Math.max(
+    1,
+    Math.round(totalSeconds * fps) || FALLBACK_DURATION_IN_FRAMES
+  );
+  return {
+    durationInFrames,
+    fps,
+    width: props.output?.width || props.source?.width || 1080,
+    height: props.output?.height || props.source?.height || 1920
+  };
+};
+
+// ../src/types.ts
+var DEFAULT_INPUT_PROPS = {
+  source: {
+    videoPath: "",
+    width: 1080,
+    height: 1920,
+    durationInSeconds: 0,
+    fps: 30
+  },
+  output: { width: 1080, height: 1920, fps: 30 },
+  captions: {
+    enabled: false,
+    tokens: [],
+    // style/displayMode/combineTokensWithinMs = overrides explícitos; os
+    // defaults e o tema (stylePreset) são resolvidos em themes.ts.
+    style: {}
+  },
+  overlays: [],
+  endcard: {
+    enabled: false,
+    text: "",
+    durationMs: 3e3
+  },
+  safeZones: {
+    enabled: true,
+    marginTopPercent: 0.08,
+    marginBottomPercent: 0.25,
+    marginSidePercent: 0.03
+  },
+  reframe: { enabled: false, mode: "blur_fill" },
+  zoom: { enabled: false, startMs: 0, endMs: 0, factor: 1.15, animated: true },
+  cuts: { enabled: false, segmentsKeepMs: [] }
+};
+export {
+  DEFAULT_INPUT_PROPS,
+  FALLBACK_DURATION_IN_FRAMES,
+  STYLE_PRESETS,
+  SmartStudioComposition,
+  calculateSmartStudioMetadata
+};