@makeitvisible/cli 0.1.0 → 0.2.0

package/dist/video/remotion/index.js

@@ -0,0 +1,716 @@
+import { registerRoot, Composition, useVideoConfig, Sequence, useCurrentFrame, interpolate, AbsoluteFill, spring } from 'remotion';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+// src/video/remotion/index.tsx
+
+// src/video/remotion/theme.ts
+var colors = {
+  // Backgrounds
+  background: "#0A0A0B",
+  card: "#141415",
+  popover: "#1C1C1E",
+  // Text
+  foreground: "#FAFAFA",
+  mutedForeground: "#A1A1A6",
+  // Accent colors
+  primary: "#10B981",
+  // Green
+  primaryForeground: "#FAFAFA",
+  // Secondary
+  secondary: "#27272A",
+  secondaryForeground: "#FAFAFA",
+  // Destructive
+  destructive: "#EF4444",
+  // Border
+  border: "#27272A",
+  // Chart colors
+  chart: {
+    3: "#0EA5E9"}
+};
+var typography = {
+  fontFamily: {
+    sans: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    mono: 'JetBrains Mono, "Fira Code", Monaco, Consolas, monospace'
+  },
+  fontSize: {
+    xs: 12,
+    sm: 14,
+    base: 16,
+    lg: 18,
+    xl: 20,
+    "2xl": 24,
+    "3xl": 30,
+    "4xl": 36,
+    "5xl": 48},
+  fontWeight: {
+    medium: 500,
+    semibold: 600,
+    bold: 700
+  },
+  lineHeight: {
+    relaxed: 1.625
+  }
+};
+var spacing = {
+  1: 4,
+  2: 8,
+  3: 12,
+  4: 16,
+  6: 24,
+  8: 32,
+  10: 40,
+  12: 48,
+  16: 64};
+var borderRadius = {
+  sm: 4,
+  md: 6,
+  lg: 8,
+  full: 9999
+};
+var animation = {
+  duration: {
+    fast: 8,
+    normal: 15}
+};
+var dimensions = {
+  "1080p": { width: 1920, height: 1080 },
+  "720p": { width: 1280, height: 720 },
+  square: { width: 1080, height: 1080 },
+  vertical: { width: 1080, height: 1920 }
+};
+var Main = ({ storyboard }) => {
+  const { width, height } = useVideoConfig();
+  let currentFrame = 0;
+  return /* @__PURE__ */ jsx("div", { style: { width, height, position: "relative", overflow: "hidden" }, children: storyboard.scenes.map((scene, index) => {
+    const startFrame = currentFrame;
+    currentFrame += scene.durationInFrames;
+    return /* @__PURE__ */ jsx(
+      Sequence,
+      {
+        from: startFrame,
+        durationInFrames: scene.durationInFrames,
+        name: `${scene.type}-${index}`,
+        children: /* @__PURE__ */ jsx(SceneRenderer, { scene, storyboard })
+      },
+      scene.id
+    );
+  }) });
+};
+var SceneRenderer = ({
+  scene,
+  storyboard
+}) => {
+  const { artifact } = storyboard;
+  switch (scene.type) {
+    case "title":
+      return /* @__PURE__ */ jsx(
+        TitleScene,
+        {
+          title: scene.title,
+          description: scene.content,
+          keywords: scene.props?.keywords,
+          sourceType: artifact.source.type
+        }
+      );
+    case "overview":
+      return /* @__PURE__ */ jsx(
+        OverviewScene,
+        {
+          title: scene.title,
+          summary: scene.content,
+          componentCount: scene.props?.componentCount || 0,
+          breakingChanges: scene.props?.breakingChanges || false
+        }
+      );
+    case "walkthrough":
+      return /* @__PURE__ */ jsx(
+        WalkthroughScene,
+        {
+          title: scene.title,
+          steps: scene.props?.steps || [scene.content],
+          stepIndex: scene.props?.stepIndex || 0
+        }
+      );
+    case "code":
+      return /* @__PURE__ */ jsx(
+        CodeScene,
+        {
+          title: scene.title,
+          files: scene.props?.files || [],
+          totalFiles: scene.props?.totalFiles || 0
+        }
+      );
+    case "code-highlight":
+      return /* @__PURE__ */ jsx(
+        CodeHighlightScene,
+        {
+          title: scene.title,
+          snippets: scene.props?.snippets || []
+        }
+      );
+    case "ui":
+      return /* @__PURE__ */ jsx(
+        UIScene,
+        {
+          title: scene.title,
+          componentName: scene.props?.componentName || "Component",
+          description: scene.content,
+          jsx: scene.props?.jsx,
+          pattern: scene.props?.pattern
+        }
+      );
+    case "outro":
+      return /* @__PURE__ */ jsx(
+        OutroScene,
+        {
+          title: scene.title,
+          content: scene.content,
+          guidelines: scene.props?.guidelines || []
+        }
+      );
+    default:
+      return /* @__PURE__ */ jsx(DefaultScene, { title: scene.title, content: scene.content });
+  }
+};
+var TitleScene = ({ title, description, keywords = [], sourceType }) => {
+  const frame = useCurrentFrame();
+  const { fps, durationInFrames } = useVideoConfig();
+  const logoScale = spring({ frame, fps, config: { damping: 12, stiffness: 100 } });
+  const titleOpacity = interpolate(frame, [15, 30], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const titleY = interpolate(frame, [15, 30], [30, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const fadeOut = interpolate(frame, [durationInFrames - 15, durationInFrames], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  return /* @__PURE__ */ jsxs(
+    AbsoluteFill,
+    {
+      style: {
+        backgroundColor: colors.background,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: spacing[16],
+        opacity: fadeOut,
+        fontFamily: typography.fontFamily.sans
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { style: { marginBottom: spacing[12], transform: `scale(${logoScale})` }, children: /* @__PURE__ */ jsx(Logo, {}) }),
+        sourceType && /* @__PURE__ */ jsx("div", { style: { marginBottom: spacing[4], opacity: titleOpacity }, children: /* @__PURE__ */ jsx(Badge, { children: formatSourceType(sourceType) }) }),
+        /* @__PURE__ */ jsx("div", { style: { opacity: titleOpacity, transform: `translateY(${titleY}px)`, textAlign: "center", maxWidth: 1200 }, children: /* @__PURE__ */ jsx("h1", { style: { color: colors.foreground, fontSize: typography.fontSize["5xl"], fontWeight: typography.fontWeight.bold, margin: 0 }, children: title }) }),
+        /* @__PURE__ */ jsx("div", { style: { marginTop: spacing[6], opacity: titleOpacity, textAlign: "center", maxWidth: 900 }, children: /* @__PURE__ */ jsx("p", { style: { color: colors.mutedForeground, fontSize: typography.fontSize.lg, margin: 0, lineHeight: typography.lineHeight.relaxed }, children: description }) }),
+        keywords.length > 0 && /* @__PURE__ */ jsx("div", { style: { marginTop: spacing[8], display: "flex", gap: spacing[2], opacity: interpolate(frame, [45, 60], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }) }, children: keywords.slice(0, 5).map((kw, i) => /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: kw }, i)) })
+      ]
+    }
+  );
+};
+var OverviewScene = ({ title, summary, componentCount, breakingChanges }) => {
+  const frame = useCurrentFrame();
+  const { fps, durationInFrames } = useVideoConfig();
+  const fadeIn = interpolate(frame, [0, 15], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const fadeOut = interpolate(frame, [durationInFrames - 15, durationInFrames], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const cardScale = spring({ frame: frame - 15, fps, config: { damping: 12, stiffness: 100 } });
+  return /* @__PURE__ */ jsxs(
+    AbsoluteFill,
+    {
+      style: {
+        backgroundColor: colors.background,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: spacing[16],
+        opacity: fadeIn * fadeOut,
+        fontFamily: typography.fontFamily.sans
+      },
+      children: [
+        /* @__PURE__ */ jsx("h2", { style: { color: colors.primary, fontSize: typography.fontSize["4xl"], fontWeight: typography.fontWeight.bold, marginBottom: spacing[8] }, children: title }),
+        /* @__PURE__ */ jsx("div", { style: { transform: `scale(${Math.max(0, cardScale)})`, width: "100%", maxWidth: 900 }, children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx("p", { style: { color: colors.foreground, fontSize: typography.fontSize.lg, lineHeight: typography.lineHeight.relaxed, margin: 0 }, children: summary }) }) }),
+        /* @__PURE__ */ jsxs("div", { style: { marginTop: spacing[10], display: "flex", gap: spacing[8], opacity: interpolate(frame, [30, 45], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }) }, children: [
+          /* @__PURE__ */ jsx(MetricCard, { label: "Files Changed", value: String(componentCount) }),
+          /* @__PURE__ */ jsx(MetricCard, { label: "Breaking Changes", value: breakingChanges ? "Yes" : "No", variant: breakingChanges ? "destructive" : "default" })
+        ] })
+      ]
+    }
+  );
+};
+var WalkthroughScene = ({ title, steps, stepIndex }) => {
+  const frame = useCurrentFrame();
+  const { durationInFrames } = useVideoConfig();
+  const fadeIn = interpolate(frame, [0, 15], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const fadeOut = interpolate(frame, [durationInFrames - 15, durationInFrames], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  return /* @__PURE__ */ jsxs(
+    AbsoluteFill,
+    {
+      style: {
+        backgroundColor: colors.background,
+        display: "flex",
+        flexDirection: "column",
+        padding: spacing[16],
+        opacity: fadeIn * fadeOut,
+        fontFamily: typography.fontFamily.sans
+      },
+      children: [
+        /* @__PURE__ */ jsx("h2", { style: { color: colors.primary, fontSize: typography.fontSize["3xl"], fontWeight: typography.fontWeight.bold, marginBottom: spacing[10] }, children: title }),
+        /* @__PURE__ */ jsx("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: spacing[4] }, children: steps.map((step, i) => /* @__PURE__ */ jsx(StepItem, { step, number: stepIndex * 3 + i + 1, delay: 20 + i * 15, frame }, i)) })
+      ]
+    }
+  );
+};
+var StepItem = ({ step, number, delay, frame }) => {
+  const opacity = interpolate(frame, [delay, delay + animation.duration.normal], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const translateX = interpolate(frame, [delay, delay + animation.duration.normal], [-30, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        gap: spacing[4],
+        alignItems: "flex-start",
+        opacity,
+        transform: `translateX(${translateX}px)`,
+        padding: spacing[4],
+        backgroundColor: colors.card,
+        borderRadius: borderRadius.lg,
+        border: `1px solid ${colors.border}`
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              width: 40,
+              height: 40,
+              borderRadius: borderRadius.full,
+              backgroundColor: colors.primary,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0,
+              color: colors.primaryForeground,
+              fontWeight: typography.fontWeight.bold
+            },
+            children: number
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { style: { color: colors.foreground, fontSize: typography.fontSize.base, lineHeight: typography.lineHeight.relaxed, margin: 0, paddingTop: spacing[2] }, children: step })
+      ]
+    }
+  );
+};
+var CodeScene = ({ title, files, totalFiles }) => {
+  const frame = useCurrentFrame();
+  const { durationInFrames } = useVideoConfig();
+  const fadeIn = interpolate(frame, [0, 15], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const fadeOut = interpolate(frame, [durationInFrames - 15, durationInFrames], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  return /* @__PURE__ */ jsxs(
+    AbsoluteFill,
+    {
+      style: {
+        backgroundColor: colors.background,
+        display: "flex",
+        flexDirection: "column",
+        padding: spacing[16],
+        opacity: fadeIn * fadeOut,
+        fontFamily: typography.fontFamily.sans
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: spacing[4], marginBottom: spacing[8] }, children: [
+          /* @__PURE__ */ jsx(FolderIcon, {}),
+          /* @__PURE__ */ jsx("h2", { style: { color: colors.primary, fontSize: typography.fontSize["3xl"], fontWeight: typography.fontWeight.bold, margin: 0 }, children: title }),
+          /* @__PURE__ */ jsxs("span", { style: { marginLeft: "auto", color: colors.mutedForeground, fontSize: typography.fontSize.xl }, children: [
+            totalFiles,
+            " file",
+            totalFiles !== 1 ? "s" : ""
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: spacing[2] }, children: [
+          files.map((file, i) => /* @__PURE__ */ jsx(FileItem, { file, index: i, frame }, file)),
+          totalFiles > files.length && /* @__PURE__ */ jsxs("div", { style: { color: colors.mutedForeground, fontSize: typography.fontSize.sm, padding: spacing[2] }, children: [
+            "+",
+            totalFiles - files.length,
+            " more files"
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+var FileItem = ({ file, index, frame }) => {
+  const delay = index * 5;
+  const opacity = interpolate(frame, [delay, delay + animation.duration.fast], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const translateX = interpolate(frame, [delay, delay + animation.duration.fast], [-20, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: spacing[3],
+        padding: `${spacing[2]}px ${spacing[3]}px`,
+        backgroundColor: colors.popover,
+        borderRadius: borderRadius.md,
+        border: `1px solid ${colors.border}`,
+        opacity,
+        transform: `translateX(${translateX}px)`
+      },
+      children: [
+        /* @__PURE__ */ jsx(FileIcon, {}),
+        /* @__PURE__ */ jsx("span", { style: { fontFamily: typography.fontFamily.mono, fontSize: typography.fontSize.sm, color: colors.foreground }, children: file })
+      ]
+    }
+  );
+};
+var CodeHighlightScene = ({ title, snippets }) => {
+  const frame = useCurrentFrame();
+  const { durationInFrames } = useVideoConfig();
+  const fadeIn = interpolate(frame, [0, 15], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const fadeOut = interpolate(frame, [durationInFrames - 15, durationInFrames], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  return /* @__PURE__ */ jsxs(
+    AbsoluteFill,
+    {
+      style: {
+        backgroundColor: colors.background,
+        display: "flex",
+        flexDirection: "column",
+        padding: spacing[12],
+        opacity: fadeIn * fadeOut,
+        fontFamily: typography.fontFamily.sans
+      },
+      children: [
+        /* @__PURE__ */ jsx("h3", { style: { color: colors.primary, fontSize: typography.fontSize["2xl"], fontWeight: typography.fontWeight.semibold, marginBottom: spacing[6] }, children: title }),
+        /* @__PURE__ */ jsx("div", { style: { flex: 1, display: "flex", gap: spacing[4] }, children: snippets.map((snippet, i) => /* @__PURE__ */ jsx(CodeSnippetCard, { snippet, index: i, frame }, i)) })
+      ]
+    }
+  );
+};
+var CodeSnippetCard = ({ snippet, index, frame }) => {
+  const delay = 15 + index * 10;
+  const opacity = interpolate(frame, [delay, delay + animation.duration.normal], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const accentColor = snippet.changeType === "added" ? colors.primary : snippet.changeType === "deleted" ? colors.destructive : colors.chart[3];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+        backgroundColor: colors.card,
+        borderRadius: borderRadius.lg,
+        border: `1px solid ${colors.border}`,
+        overflow: "hidden",
+        opacity
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: spacing[2], padding: `${spacing[2]}px ${spacing[4]}px`, backgroundColor: colors.popover, borderBottom: `1px solid ${colors.border}` }, children: [
+          /* @__PURE__ */ jsx("div", { style: { width: 8, height: 8, borderRadius: borderRadius.full, backgroundColor: accentColor } }),
+          /* @__PURE__ */ jsx("span", { style: { fontSize: typography.fontSize.sm, fontFamily: typography.fontFamily.mono, color: colors.foreground }, children: snippet.file })
+        ] }),
+        snippet.description && /* @__PURE__ */ jsx("div", { style: { padding: `${spacing[2]}px ${spacing[4]}px`, borderBottom: `1px solid ${colors.border}` }, children: /* @__PURE__ */ jsx("span", { style: { fontSize: typography.fontSize.sm, color: colors.mutedForeground }, children: snippet.description }) }),
+        /* @__PURE__ */ jsx("pre", { style: { flex: 1, padding: spacing[4], margin: 0, fontFamily: typography.fontFamily.mono, fontSize: typography.fontSize.sm, color: colors.foreground, overflow: "hidden", whiteSpace: "pre-wrap" }, children: snippet.code })
+      ]
+    }
+  );
+};
+var UIScene = ({ title, componentName, description, jsx: jsx3, pattern }) => {
+  const frame = useCurrentFrame();
+  const { fps, durationInFrames } = useVideoConfig();
+  const fadeIn = interpolate(frame, [0, 15], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const fadeOut = interpolate(frame, [durationInFrames - 15, durationInFrames], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const uiScale = spring({ frame: frame - 10, fps, config: { damping: 15, stiffness: 100 } });
+  return /* @__PURE__ */ jsxs(
+    AbsoluteFill,
+    {
+      style: {
+        backgroundColor: colors.background,
+        display: "flex",
+        flexDirection: "column",
+        padding: spacing[10],
+        opacity: fadeIn * fadeOut,
+        fontFamily: typography.fontFamily.sans
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { marginBottom: spacing[6] }, children: [
+          /* @__PURE__ */ jsx("h3", { style: { color: colors.primary, fontSize: typography.fontSize["2xl"], fontWeight: typography.fontWeight.semibold, margin: 0 }, children: title }),
+          /* @__PURE__ */ jsx("p", { style: { color: colors.mutedForeground, fontSize: typography.fontSize.sm, marginTop: spacing[1] }, children: description })
+        ] }),
+        /* @__PURE__ */ jsx("div", { style: { flex: 1, display: "flex", alignItems: "center", justifyContent: "center", transform: `scale(${Math.max(0, uiScale)})` }, children: /* @__PURE__ */ jsx(BrowserFrame, { title: componentName, children: jsx3 ? /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: convertJsxToHtml(jsx3) } }) : /* @__PURE__ */ jsx(PlaceholderUI, { pattern, name: componentName }) }) }),
+        /* @__PURE__ */ jsx("div", { style: { position: "absolute", bottom: spacing[6], right: spacing[6] }, children: /* @__PURE__ */ jsxs("code", { style: { backgroundColor: colors.card, border: `1px solid ${colors.border}`, borderRadius: borderRadius.md, padding: `${spacing[1]}px ${spacing[3]}px`, fontSize: typography.fontSize.xs, color: colors.mutedForeground, fontFamily: typography.fontFamily.mono }, children: [
+          "<",
+          componentName,
+          " />"
+        ] }) })
+      ]
+    }
+  );
+};
+var BrowserFrame = ({ title, children }) => /* @__PURE__ */ jsxs("div", { style: { backgroundColor: colors.card, borderRadius: borderRadius.lg, border: `1px solid ${colors.border}`, boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)", overflow: "hidden", maxWidth: "90%", maxHeight: "80%" }, children: [
+  /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: spacing[2], padding: `${spacing[2]}px ${spacing[4]}px`, backgroundColor: colors.popover, borderBottom: `1px solid ${colors.border}` }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6 }, children: [
+      /* @__PURE__ */ jsx("div", { style: { width: 10, height: 10, borderRadius: "50%", backgroundColor: "#FF5F56" } }),
+      /* @__PURE__ */ jsx("div", { style: { width: 10, height: 10, borderRadius: "50%", backgroundColor: "#FFBD2E" } }),
+      /* @__PURE__ */ jsx("div", { style: { width: 10, height: 10, borderRadius: "50%", backgroundColor: "#27CA40" } })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { flex: 1, marginLeft: spacing[4], backgroundColor: colors.background, borderRadius: borderRadius.sm, padding: `${spacing[1]}px ${spacing[3]}px`, fontSize: typography.fontSize.xs, color: colors.mutedForeground }, children: [
+      "localhost:3000/",
+      title.toLowerCase()
+    ] })
+  ] }),
+  /* @__PURE__ */ jsx("div", { style: { padding: spacing[8], backgroundColor: colors.background, minWidth: 600, minHeight: 300 }, children })
+] });
+var PlaceholderUI = ({ pattern, name }) => /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", height: "100%", color: colors.mutedForeground }, children: /* @__PURE__ */ jsxs("span", { children: [
+  pattern ? `${pattern}: ` : "",
+  name
+] }) });
+var OutroScene = ({ title, content, guidelines }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const logoScale = spring({ frame, fps, config: { damping: 12, stiffness: 100 } });
+  const fadeIn = interpolate(frame, [0, 15], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  return /* @__PURE__ */ jsxs(
+    AbsoluteFill,
+    {
+      style: {
+        backgroundColor: colors.background,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: spacing[16],
+        opacity: fadeIn,
+        fontFamily: typography.fontFamily.sans
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { style: { marginBottom: spacing[8], transform: `scale(${logoScale})` }, children: /* @__PURE__ */ jsx(Logo, { size: 60 }) }),
+        /* @__PURE__ */ jsx("h2", { style: { color: colors.primary, fontSize: typography.fontSize["3xl"], fontWeight: typography.fontWeight.bold, marginBottom: spacing[4] }, children: title }),
+        /* @__PURE__ */ jsx("p", { style: { color: colors.mutedForeground, fontSize: typography.fontSize.lg, textAlign: "center", maxWidth: 800 }, children: content }),
+        guidelines.length > 0 && /* @__PURE__ */ jsxs(Card, { style: { marginTop: spacing[10], maxWidth: 700 }, children: [
+          /* @__PURE__ */ jsx("span", { style: { fontSize: typography.fontSize.xs, color: colors.mutedForeground, textTransform: "uppercase", letterSpacing: "0.05em" }, children: "Key Takeaways" }),
+          /* @__PURE__ */ jsx("div", { style: { marginTop: spacing[3], display: "flex", flexDirection: "column", gap: spacing[2] }, children: guidelines.slice(0, 3).map((g, i) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: spacing[2] }, children: [
+            /* @__PURE__ */ jsx(CheckIcon, {}),
+            /* @__PURE__ */ jsx("span", { style: { color: colors.foreground, fontSize: typography.fontSize.sm }, children: g })
+          ] }, i)) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { position: "absolute", bottom: spacing[8], display: "flex", alignItems: "center", gap: spacing[2] }, children: [
+          /* @__PURE__ */ jsx("span", { style: { color: colors.mutedForeground, fontSize: typography.fontSize.sm }, children: "Generated with" }),
+          /* @__PURE__ */ jsx("span", { style: { color: colors.primary, fontSize: typography.fontSize.sm, fontWeight: typography.fontWeight.semibold }, children: "Visible" })
+        ] })
+      ]
+    }
+  );
+};
+var DefaultScene = ({ title, content }) => {
+  const frame = useCurrentFrame();
+  const { durationInFrames } = useVideoConfig();
+  const fadeIn = interpolate(frame, [0, 15], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const fadeOut = interpolate(frame, [durationInFrames - 15, durationInFrames], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  return /* @__PURE__ */ jsxs(
+    AbsoluteFill,
+    {
+      style: {
+        backgroundColor: colors.background,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: spacing[16],
+        opacity: fadeIn * fadeOut,
+        fontFamily: typography.fontFamily.sans
+      },
+      children: [
+        /* @__PURE__ */ jsx("h2", { style: { color: colors.foreground, fontSize: typography.fontSize["4xl"], fontWeight: typography.fontWeight.bold }, children: title }),
+        /* @__PURE__ */ jsx("p", { style: { color: colors.mutedForeground, fontSize: typography.fontSize.lg, textAlign: "center", maxWidth: 800 }, children: content })
+      ]
+    }
+  );
+};
+var Card = ({ children, style }) => /* @__PURE__ */ jsx("div", { style: { backgroundColor: colors.card, border: `1px solid ${colors.border}`, borderRadius: borderRadius.lg, padding: spacing[6], ...style }, children });
+var Badge = ({ children, variant = "default" }) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    style: {
+      display: "inline-flex",
+      alignItems: "center",
+      fontSize: typography.fontSize.xs,
+      fontWeight: typography.fontWeight.medium,
+      padding: `${spacing[1]}px ${spacing[2]}px`,
+      borderRadius: borderRadius.full,
+      backgroundColor: variant === "secondary" ? colors.secondary : `${colors.primary}22`,
+      color: variant === "secondary" ? colors.secondaryForeground : colors.primary,
+      border: variant === "default" ? "none" : `1px solid ${colors.border}`
+    },
+    children
+  }
+);
+var MetricCard = ({ label, value, variant = "default" }) => {
+  const accentColor = variant === "destructive" ? colors.destructive : colors.primary;
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", padding: spacing[6], backgroundColor: colors.card, borderRadius: borderRadius.lg, border: `1px solid ${colors.border}`, minWidth: 200 }, children: [
+    /* @__PURE__ */ jsx("span", { style: { color: accentColor, fontSize: typography.fontSize["2xl"], fontWeight: typography.fontWeight.bold }, children: value }),
+    /* @__PURE__ */ jsx("span", { style: { color: colors.mutedForeground, fontSize: typography.fontSize.sm, marginTop: spacing[1] }, children: label })
+  ] });
+};
+var Logo = ({ size = 80 }) => /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 100 100", children: [
+  /* @__PURE__ */ jsx("circle", { cx: 50, cy: 50, r: 45, fill: colors.primary, opacity: 0.1 }),
+  /* @__PURE__ */ jsx("circle", { cx: 50, cy: 50, r: 35, fill: colors.primary, opacity: 0.2 }),
+  /* @__PURE__ */ jsx("ellipse", { cx: 50, cy: 50, rx: 25, ry: 15, fill: "none", stroke: colors.primary, strokeWidth: 3 }),
+  /* @__PURE__ */ jsx("circle", { cx: 50, cy: 50, r: 8, fill: colors.primary }),
+  /* @__PURE__ */ jsx("circle", { cx: 53, cy: 47, r: 3, fill: colors.foreground })
+] });
+var FolderIcon = () => /* @__PURE__ */ jsx("svg", { width: 40, height: 40, viewBox: "0 0 24 24", fill: "none", stroke: colors.primary, strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { d: "M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" }) });
+var FileIcon = () => /* @__PURE__ */ jsxs("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: colors.mutedForeground, strokeWidth: 2, children: [
+  /* @__PURE__ */ jsx("path", { d: "M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" }),
+  /* @__PURE__ */ jsx("polyline", { points: "14,2 14,8 20,8" })
+] });
+var CheckIcon = () => /* @__PURE__ */ jsx("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: colors.primary, strokeWidth: 2, style: { flexShrink: 0, marginTop: 2 }, children: /* @__PURE__ */ jsx("polyline", { points: "20,6 9,17 4,12" }) });
+function formatSourceType(type) {
+  const map = { pr: "Pull Request", commit: "Commit", "code-section": "Feature", repository: "Repository" };
+  return map[type] || type;
+}
+function convertJsxToHtml(jsx3) {
+  return jsx3.replace(/style=\{\{([^}]+)\}\}/g, (_, styles) => {
+    const cssString = styles.split(",").map((s) => {
+      const [key, value] = s.split(":").map((x) => x.trim());
+      if (!key || !value) return "";
+      const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
+      const cssValue = value.replace(/["']/g, "");
+      return `${cssKey}: ${cssValue}`;
+    }).filter(Boolean).join("; ");
+    return `style="${cssString}"`;
+  });
+}
+var defaultStoryboard = {
+  title: "Sample Feature",
+  totalDurationInFrames: 900,
+  scenes: [
+    {
+      id: "title",
+      type: "title",
+      title: "New Feature",
+      content: "A sample video composition",
+      durationInFrames: 120,
+      props: { keywords: ["sample", "demo"] }
+    },
+    {
+      id: "overview",
+      type: "overview",
+      title: "What Changed",
+      content: "This is a sample overview scene.",
+      durationInFrames: 180,
+      props: { componentCount: 5, breakingChanges: false }
+    },
+    {
+      id: "walkthrough",
+      type: "walkthrough",
+      title: "How It Works",
+      content: "Step by step explanation",
+      durationInFrames: 240,
+      props: { steps: ["Step 1: Initialize", "Step 2: Process", "Step 3: Complete"], stepIndex: 0 }
+    },
+    {
+      id: "code",
+      type: "code",
+      title: "Files Changed",
+      content: "5 files affected",
+      durationInFrames: 180,
+      props: { files: ["src/index.ts", "src/utils.ts", "src/components/App.tsx"], totalFiles: 5 }
+    },
+    {
+      id: "outro",
+      type: "outro",
+      title: "Summary",
+      content: "Learn more about this feature",
+      durationInFrames: 180,
+      props: { guidelines: ["Test thoroughly", "Update documentation"] }
+    }
+  ],
+  artifact: {
+    title: "Sample Feature",
+    description: "A sample feature for testing",
+    source: { type: "code-section", reference: "sample" },
+    context: {
+      summary: "This is a sample feature.",
+      technicalDetails: ["Detail 1", "Detail 2"],
+      affectedComponents: ["src/index.ts"],
+      breakingChanges: false,
+      keywords: ["sample"]
+    },
+    guidelines: ["Test thoroughly"]
+  },
+  theme: {
+    primaryColor: "#10B981",
+    backgroundColor: "#0A0A0B",
+    foregroundColor: "#FAFAFA",
+    accentColor: "#10B981",
+    mutedColor: "#A1A1A6",
+    cardColor: "#141415",
+    borderColor: "#27272A",
+    fontFamily: "Inter, system-ui, sans-serif"
+  }
+};
+var RemotionRoot = () => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Composition,
+      {
+        id: "Main",
+        component: Main,
+        durationInFrames: 900,
+        fps: 30,
+        width: dimensions["1080p"].width,
+        height: dimensions["1080p"].height,
+        defaultProps: { storyboard: defaultStoryboard },
+        calculateMetadata: async ({ props }) => ({
+          durationInFrames: props.storyboard?.totalDurationInFrames || 900
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Composition,
+      {
+        id: "Main720p",
+        component: Main,
+        durationInFrames: 900,
+        fps: 30,
+        width: dimensions["720p"].width,
+        height: dimensions["720p"].height,
+        defaultProps: { storyboard: defaultStoryboard },
+        calculateMetadata: async ({ props }) => ({
+          durationInFrames: props.storyboard?.totalDurationInFrames || 900
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Composition,
+      {
+        id: "MainSquare",
+        component: Main,
+        durationInFrames: 900,
+        fps: 30,
+        width: dimensions.square.width,
+        height: dimensions.square.height,
+        defaultProps: { storyboard: defaultStoryboard },
+        calculateMetadata: async ({ props }) => ({
+          durationInFrames: props.storyboard?.totalDurationInFrames || 900
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Composition,
+      {
+        id: "MainVertical",
+        component: Main,
+        durationInFrames: 900,
+        fps: 30,
+        width: dimensions.vertical.width,
+        height: dimensions.vertical.height,
+        defaultProps: { storyboard: defaultStoryboard },
+        calculateMetadata: async ({ props }) => ({
+          durationInFrames: props.storyboard?.totalDurationInFrames || 900
+        })
+      }
+    )
+  ] });
+};
+
+// src/video/remotion/index.tsx
+registerRoot(RemotionRoot);
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map