@cueframe/kernel 0.0.1

package/dist/_members/primitives/chunk-HFPFGZXT.js

@@ -0,0 +1,1494 @@
+import {
+  ACCENT,
+  BG,
+  BG_DEEP,
+  BLUE,
+  BORDER,
+  BORDER_SOFT,
+  MAC_GREEN,
+  MAC_RED,
+  MAC_YELLOW,
+  SURFACE,
+  SURFACE_HI,
+  SYN_KEYWORD,
+  SYN_NUMBER,
+  SYN_PROP,
+  SYN_TEXT,
+  TEXT,
+  TEXT_HI,
+  TEXT_MUTED,
+  VIOLET
+} from "./chunk-3OMURV6Q.js";
+import {
+  FitText
+} from "./chunk-ROV2ODWC.js";
+
+// src/layouts/chat-to-preview-layout/index.tsx
+import { Easing, interpolate, useCurrentFrame, useVideoConfig } from "remotion";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FONT_FAMILY = "inherit";
+function DefaultChat() {
+  const messages = [
+    { from: "user", text: "Build me a landing page" },
+    { from: "ai", text: "Sure \u2014 what should it feature?" },
+    { from: "user", text: "Hero, pricing, footer." },
+    { from: "ai", text: "On it. Generating now..." }
+  ];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        padding: 24,
+        display: "flex",
+        flexDirection: "column",
+        gap: 12,
+        fontFamily: FONT_FAMILY,
+        background: BG
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              color: TEXT_MUTED,
+              fontSize: 12,
+              fontWeight: 600,
+              letterSpacing: "0.08em",
+              textTransform: "uppercase",
+              marginBottom: 8
+            },
+            children: "Chat"
+          }
+        ),
+        messages.map((m, i) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              alignSelf: m.from === "user" ? "flex-end" : "flex-start",
+              background: m.from === "user" ? ACCENT : SURFACE_HI,
+              color: TEXT_HI,
+              padding: "10px 14px",
+              borderRadius: 14,
+              fontSize: 14,
+              maxWidth: "85%"
+            },
+            children: m.text
+          },
+          i
+        ))
+      ]
+    }
+  );
+}
+function DefaultPreview() {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        background: TEXT_HI,
+        display: "flex",
+        flexDirection: "column",
+        fontFamily: FONT_FAMILY
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              height: 36,
+              background: TEXT,
+              borderBottom: `1px solid ${BORDER_SOFT}`,
+              display: "flex",
+              alignItems: "center",
+              gap: 6,
+              padding: "0 12px"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    width: 10,
+                    height: 10,
+                    borderRadius: 999,
+                    background: MAC_RED
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    width: 10,
+                    height: 10,
+                    borderRadius: 999,
+                    background: MAC_YELLOW
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    width: 10,
+                    height: 10,
+                    borderRadius: 999,
+                    background: MAC_GREEN
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              flex: 1,
+              padding: 32,
+              display: "flex",
+              flexDirection: "column",
+              gap: 16
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    fontSize: 36,
+                    fontWeight: 700,
+                    letterSpacing: "-0.03em",
+                    color: BG
+                  },
+                  children: "Ship faster."
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { style: { fontSize: 16, color: TEXT_MUTED, maxWidth: 360 }, children: "The fastest way to launch your idea. Built with Remotion." }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    marginTop: 12,
+                    display: "inline-flex",
+                    background: BG,
+                    color: TEXT_HI,
+                    padding: "10px 18px",
+                    borderRadius: 10,
+                    alignSelf: "flex-start",
+                    fontSize: 14,
+                    fontWeight: 600
+                  },
+                  children: "Get started"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function ChatToPreviewLayout({
+  chat,
+  preview,
+  startChatRatio = 0.5,
+  endChatRatio = 0.25,
+  background = BG,
+  speed = 1,
+  className
+}) {
+  const frame = useCurrentFrame() * speed;
+  const { durationInFrames } = useVideoConfig();
+  const APPLE_EASE = Easing.bezier(0.16, 1, 0.3, 1);
+  const morphStart = durationInFrames * 0.1;
+  const morphEnd = durationInFrames * 0.7;
+  const ratio = interpolate(
+    frame,
+    [morphStart, morphEnd],
+    [startChatRatio, endChatRatio],
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+      easing: APPLE_EASE
+    }
+  );
+  const previewOpacity = interpolate(frame, [morphStart, morphEnd], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: APPLE_EASE
+  });
+  const previewTx = interpolate(frame, [morphStart, morphEnd], [40, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: APPLE_EASE
+  });
+  const chatBasis = `${ratio * 100}%`;
+  const previewBasis = `${(1 - ratio) * 100}%`;
+  const CHAT_INNER_MIN = 520;
+  const PREVIEW_INNER_MIN = 720;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: {
+        position: "absolute",
+        inset: 0,
+        background,
+        padding: 32,
+        display: "flex",
+        gap: 16
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              flexBasis: chatBasis,
+              flexGrow: 0,
+              flexShrink: 0,
+              position: "relative",
+              overflow: "hidden",
+              borderRadius: 16,
+              border: `1px solid ${BORDER_SOFT}`
+            },
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  inset: 0,
+                  minWidth: CHAT_INNER_MIN
+                },
+                children: chat ?? /* @__PURE__ */ jsx(DefaultChat, {})
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              flexBasis: previewBasis,
+              flexGrow: 0,
+              flexShrink: 0,
+              position: "relative",
+              overflow: "hidden",
+              borderRadius: 16,
+              border: `1px solid ${BORDER_SOFT}`,
+              opacity: previewOpacity,
+              transform: `translateX(${previewTx}px)`
+            },
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  inset: 0,
+                  minWidth: PREVIEW_INNER_MIN
+                },
+                children: preview ?? /* @__PURE__ */ jsx(DefaultPreview, {})
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/layouts/infinite-bento-pan/index.tsx
+import { interpolate as interpolate2, useCurrentFrame as useCurrentFrame2, useVideoConfig as useVideoConfig2 } from "remotion";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var FONT_FAMILY2 = "inherit";
+var SUPER_W = 3500;
+var SUPER_H = 2500;
+var CARDS = [
+  { x: 80, y: 80, w: 480, h: 280, kind: "chart", hue: 220, label: "Revenue" },
+  { x: 600, y: 80, w: 280, h: 280, kind: "counter", hue: 280, label: "MRR" },
+  { x: 920, y: 80, w: 360, h: 180, kind: "gradient", hue: 200 },
+  { x: 1320, y: 80, w: 480, h: 280, kind: "code", hue: 0, label: "deploy.ts" },
+  { x: 1840, y: 80, w: 280, h: 280, kind: "logo", hue: 320 },
+  { x: 2160, y: 80, w: 380, h: 180, kind: "stat", hue: 160, label: "Uptime" },
+  { x: 2580, y: 80, w: 360, h: 280, kind: "bars", hue: 40, label: "Visits" },
+  { x: 920, y: 300, w: 360, h: 200, kind: "counter", hue: 180, label: "Users" },
+  {
+    x: 2160,
+    y: 300,
+    w: 380,
+    h: 200,
+    kind: "chart",
+    hue: 100,
+    label: "Latency"
+  },
+  { x: 80, y: 400, w: 280, h: 280, kind: "gradient", hue: 340 },
+  { x: 400, y: 400, w: 480, h: 280, kind: "code", hue: 0, label: "api.ts" },
+  { x: 1320, y: 420, w: 280, h: 280, kind: "stat", hue: 60, label: "P95" },
+  { x: 1640, y: 420, w: 380, h: 280, kind: "bars", hue: 260, label: "Builds" },
+  { x: 2580, y: 420, w: 360, h: 280, kind: "logo", hue: 200 },
+  { x: 80, y: 720, w: 480, h: 240, kind: "chart", hue: 290, label: "Errors" },
+  { x: 600, y: 720, w: 280, h: 240, kind: "stat", hue: 20, label: "RPS" },
+  { x: 920, y: 740, w: 380, h: 220, kind: "gradient", hue: 240 },
+  {
+    x: 1320,
+    y: 740,
+    w: 360,
+    h: 220,
+    kind: "counter",
+    hue: 140,
+    label: "Active"
+  },
+  { x: 1720, y: 740, w: 480, h: 240, kind: "code", hue: 0, label: "worker.ts" },
+  { x: 2240, y: 740, w: 360, h: 240, kind: "bars", hue: 320, label: "Queue" },
+  { x: 80, y: 1e3, w: 360, h: 220, kind: "logo", hue: 180 },
+  { x: 460, y: 1e3, w: 380, h: 220, kind: "stat", hue: 80, label: "Cache" },
+  { x: 880, y: 1e3, w: 480, h: 220, kind: "chart", hue: 200, label: "CPU" },
+  {
+    x: 1400,
+    y: 1e3,
+    w: 280,
+    h: 220,
+    kind: "counter",
+    hue: 360,
+    label: "Jobs"
+  },
+  { x: 1720, y: 1020, w: 360, h: 220, kind: "gradient", hue: 120 },
+  { x: 2120, y: 1020, w: 380, h: 220, kind: "code", hue: 0, label: "db.sql" },
+  { x: 2540, y: 1020, w: 400, h: 220, kind: "bars", hue: 280, label: "Tasks" },
+  { x: 80, y: 1280, w: 480, h: 260, kind: "code", hue: 0, label: "edge.ts" },
+  { x: 600, y: 1280, w: 360, h: 260, kind: "chart", hue: 240, label: "TTFB" },
+  { x: 1e3, y: 1280, w: 280, h: 260, kind: "logo", hue: 60 },
+  { x: 1320, y: 1280, w: 380, h: 260, kind: "stat", hue: 200, label: "Hits" },
+  {
+    x: 1740,
+    y: 1280,
+    w: 360,
+    h: 260,
+    kind: "counter",
+    hue: 300,
+    label: "Bytes"
+  },
+  { x: 2140, y: 1280, w: 380, h: 260, kind: "gradient", hue: 160 },
+  { x: 2560, y: 1280, w: 380, h: 260, kind: "bars", hue: 0, label: "Errors" },
+  { x: 80, y: 1600, w: 380, h: 220, kind: "stat", hue: 280, label: "Saved" },
+  { x: 500, y: 1600, w: 480, h: 220, kind: "chart", hue: 40, label: "Net Out" },
+  { x: 1020, y: 1600, w: 360, h: 220, kind: "code", hue: 0, label: "auth.ts" },
+  { x: 1420, y: 1600, w: 280, h: 220, kind: "logo", hue: 220 },
+  {
+    x: 1740,
+    y: 1620,
+    w: 380,
+    h: 220,
+    kind: "counter",
+    hue: 100,
+    label: "Hooks"
+  },
+  { x: 2160, y: 1620, w: 360, h: 220, kind: "bars", hue: 340, label: "Runs" },
+  { x: 2560, y: 1620, w: 380, h: 220, kind: "gradient", hue: 200 },
+  { x: 80, y: 1880, w: 480, h: 240, kind: "bars", hue: 180, label: "Edges" },
+  { x: 600, y: 1880, w: 380, h: 240, kind: "gradient", hue: 320 },
+  { x: 1020, y: 1880, w: 360, h: 240, kind: "logo", hue: 80 },
+  {
+    x: 1420,
+    y: 1880,
+    w: 480,
+    h: 240,
+    kind: "chart",
+    hue: 260,
+    label: "Tokens"
+  },
+  {
+    x: 1940,
+    y: 1880,
+    w: 280,
+    h: 240,
+    kind: "counter",
+    hue: 20,
+    label: "Calls"
+  },
+  { x: 2260, y: 1880, w: 380, h: 240, kind: "stat", hue: 140, label: "Score" },
+  { x: 2680, y: 1880, w: 260, h: 240, kind: "code", hue: 0, label: "ws.ts" }
+];
+function noise(i, frame) {
+  return Math.sin(frame / 30 + i) * 0.5 + 0.5;
+}
+function ChartCard({ accent, t }) {
+  const points = [];
+  for (let i = 0; i < 12; i++) {
+    const x = i / 11 * 100;
+    const y = 50 - (Math.sin(i * 0.7 + t) * 18 + Math.cos(i * 0.4 + t * 0.6) * 8);
+    points.push(`${x},${y}`);
+  }
+  return /* @__PURE__ */ jsxs2(
+    "svg",
+    {
+      viewBox: "0 0 100 60",
+      preserveAspectRatio: "none",
+      style: { width: "100%", height: "100%" },
+      children: [
+        /* @__PURE__ */ jsx2(
+          "polyline",
+          {
+            points: points.join(" "),
+            fill: "none",
+            stroke: accent,
+            strokeWidth: 1.4,
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "polyline",
+          {
+            points: `${points.join(" ")} 100,60 0,60`,
+            fill: `${accent}22`,
+            stroke: "none"
+          }
+        )
+      ]
+    }
+  );
+}
+function BarsCard({ accent, t }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "flex-end",
+        gap: 6,
+        height: "100%",
+        width: "100%"
+      },
+      children: Array.from({ length: 10 }).map((_, i) => {
+        const h = 25 + (Math.sin(i * 0.8 + t) * 0.5 + 0.5) * 70;
+        return /* @__PURE__ */ jsx2(
+          "div",
+          {
+            style: {
+              flex: 1,
+              height: `${h}%`,
+              background: `linear-gradient(180deg, ${accent} 0%, ${accent}55 100%)`,
+              borderRadius: 4
+            }
+          },
+          i
+        );
+      })
+    }
+  );
+}
+function CodeCard() {
+  const lines = [
+    { indent: 0, w: 60, c: SYN_PROP },
+    { indent: 1, w: 80, c: `${SYN_TEXT}cc` },
+    { indent: 1, w: 50, c: SYN_KEYWORD },
+    { indent: 2, w: 70, c: `${SYN_TEXT}cc` },
+    { indent: 2, w: 40, c: SYN_NUMBER },
+    { indent: 1, w: 30, c: `${SYN_TEXT}99` },
+    { indent: 0, w: 20, c: `${SYN_TEXT}99` }
+  ];
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 8,
+        fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
+      },
+      children: lines.map((l, i) => /* @__PURE__ */ jsx2(
+        "div",
+        {
+          style: {
+            marginLeft: l.indent * 14,
+            width: `${l.w}%`,
+            height: 8,
+            borderRadius: 3,
+            background: l.c,
+            opacity: 0.7
+          }
+        },
+        i
+      ))
+    }
+  );
+}
+function LogoCard({ accent, hue }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: /* @__PURE__ */ jsx2(
+        "div",
+        {
+          style: {
+            width: 80,
+            height: 80,
+            borderRadius: 20,
+            background: `linear-gradient(135deg, ${accent} 0%, hsl(${hue},70%,55%) 100%)`
+          }
+        }
+      )
+    }
+  );
+}
+function GradientCard({ hue }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        background: `radial-gradient(circle at 30% 30%, hsl(${hue},80%,60%) 0%, hsl(${(hue + 60) % 360},70%,40%) 50%, ${BG} 100%)`
+      }
+    }
+  );
+}
+function Card({
+  card,
+  accent,
+  index,
+  frame
+}) {
+  const t = noise(index, frame) * 6.28;
+  const baseStyle = {
+    position: "absolute",
+    left: card.x,
+    top: card.y,
+    width: card.w,
+    height: card.h,
+    borderRadius: 18,
+    background: `linear-gradient(180deg, ${SURFACE} 0%, ${BG} 100%)`,
+    border: `1px solid ${BORDER_SOFT}`,
+    overflow: "hidden",
+    padding: 18,
+    color: TEXT_HI,
+    display: "flex",
+    flexDirection: "column"
+  };
+  const labelEl = card.label ? /* @__PURE__ */ jsx2(
+    "div",
+    {
+      style: {
+        fontSize: 12,
+        fontWeight: 600,
+        color: TEXT_MUTED,
+        letterSpacing: "0.04em",
+        textTransform: "uppercase",
+        marginBottom: 8
+      },
+      children: card.label
+    }
+  ) : null;
+  if (card.kind === "chart") {
+    return /* @__PURE__ */ jsxs2("div", { style: baseStyle, children: [
+      labelEl,
+      /* @__PURE__ */ jsx2("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsx2(ChartCard, { accent, t }) })
+    ] });
+  }
+  if (card.kind === "bars") {
+    return /* @__PURE__ */ jsxs2("div", { style: baseStyle, children: [
+      labelEl,
+      /* @__PURE__ */ jsx2("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsx2(BarsCard, { accent, t }) })
+    ] });
+  }
+  if (card.kind === "counter") {
+    const v = Math.floor(1200 + noise(index, frame) * 800);
+    return /* @__PURE__ */ jsxs2("div", { style: baseStyle, children: [
+      labelEl,
+      /* @__PURE__ */ jsx2(
+        "div",
+        {
+          style: {
+            flex: 1,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "flex-start",
+            fontSize: 56,
+            fontWeight: 700,
+            letterSpacing: "-0.04em",
+            color: TEXT_HI
+          },
+          children: v.toLocaleString()
+        }
+      ),
+      /* @__PURE__ */ jsxs2("div", { style: { fontSize: 12, color: accent, fontWeight: 600 }, children: [
+        "+",
+        (noise(index + 1, frame) * 12).toFixed(1),
+        "%"
+      ] })
+    ] });
+  }
+  if (card.kind === "stat") {
+    const v = (95 + noise(index, frame) * 5).toFixed(2);
+    return /* @__PURE__ */ jsxs2("div", { style: baseStyle, children: [
+      labelEl,
+      /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          style: {
+            flex: 1,
+            display: "flex",
+            alignItems: "center",
+            fontSize: 48,
+            fontWeight: 700,
+            letterSpacing: "-0.03em"
+          },
+          children: [
+            v,
+            /* @__PURE__ */ jsx2(
+              "span",
+              {
+                style: {
+                  fontSize: 20,
+                  color: TEXT_MUTED,
+                  marginLeft: 4
+                },
+                children: "%"
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+  if (card.kind === "code") {
+    return /* @__PURE__ */ jsxs2("div", { style: baseStyle, children: [
+      labelEl,
+      /* @__PURE__ */ jsx2("div", { style: { flex: 1, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx2("div", { style: { width: "100%" }, children: /* @__PURE__ */ jsx2(CodeCard, {}) }) })
+    ] });
+  }
+  if (card.kind === "logo") {
+    return /* @__PURE__ */ jsx2("div", { style: { ...baseStyle, padding: 0 }, children: /* @__PURE__ */ jsx2(LogoCard, { accent, hue: card.hue }) });
+  }
+  return /* @__PURE__ */ jsx2("div", { style: { ...baseStyle, padding: 0 }, children: /* @__PURE__ */ jsx2(GradientCard, { hue: card.hue }) });
+}
+function InfiniteBentoPan({
+  panSpeed = 1,
+  accentColor = VIOLET,
+  speed = 1,
+  className
+}) {
+  const frame = useCurrentFrame2() * speed;
+  const { durationInFrames, width, height } = useVideoConfig2();
+  const maxX = SUPER_W - width;
+  const maxY = SUPER_H - height;
+  const t = interpolate2(frame, [0, durationInFrames], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  const px = t * maxX * Math.min(1, panSpeed);
+  const py = t * maxY * Math.min(1, panSpeed);
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className,
+      style: {
+        position: "absolute",
+        inset: 0,
+        background: BG_DEEP,
+        overflow: "hidden",
+        fontFamily: FONT_FAMILY2
+      },
+      children: [
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: 0,
+              top: 0,
+              width: SUPER_W,
+              height: SUPER_H,
+              transform: `translate(${-px}px, ${-py}px)`,
+              willChange: "transform"
+            },
+            children: CARDS.map((c, i) => /* @__PURE__ */ jsx2(Card, { card: c, accent: accentColor, index: i, frame }, i))
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              background: "radial-gradient(circle at center, transparent 30%, rgba(0,0,0,0.85) 80%, #000 100%)",
+              pointerEvents: "none"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/layouts/letterbox/index.tsx
+import { useCurrentFrame as useCurrentFrame3, useVideoConfig as useVideoConfig3, spring, interpolate as interpolate3, AbsoluteFill } from "remotion";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var Letterbox = ({
+  ratio = 2.35,
+  color = "#000000",
+  animated = true,
+  children
+}) => {
+  const frame = useCurrentFrame3();
+  const { fps, width, height } = useVideoConfig3();
+  const currentRatio = width / height;
+  const targetHeight = width / ratio;
+  const rawBarHeight = Math.max(0, (height - targetHeight) / 2);
+  let barHeight;
+  if (animated) {
+    const spr = spring({
+      fps,
+      frame,
+      config: { damping: 18, stiffness: 80 }
+    });
+    barHeight = interpolate3(spr, [0, 1], [0, rawBarHeight]);
+  } else {
+    barHeight = rawBarHeight;
+  }
+  if (currentRatio >= ratio && rawBarHeight <= 0) {
+    return /* @__PURE__ */ jsx3(AbsoluteFill, { children });
+  }
+  return /* @__PURE__ */ jsxs3(AbsoluteFill, { children: [
+    children,
+    /* @__PURE__ */ jsx3(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "100%",
+          height: barHeight,
+          backgroundColor: color
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          bottom: 0,
+          left: 0,
+          width: "100%",
+          height: barHeight,
+          backgroundColor: color
+        }
+      }
+    )
+  ] });
+};
+
+// src/layouts/photo-grid/index.tsx
+import { useCurrentFrame as useCurrentFrame4, useVideoConfig as useVideoConfig4, spring as spring2, interpolate as interpolate4, AbsoluteFill as AbsoluteFill2, Img } from "remotion";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var PhotoGrid = ({
+  images,
+  columns = 2,
+  gap = 8,
+  stagger = 0.15
+}) => {
+  const frame = useCurrentFrame4();
+  const { fps } = useVideoConfig4();
+  const staggerFrames = Math.round(stagger * fps);
+  return /* @__PURE__ */ jsx4(
+    AbsoluteFill2,
+    {
+      style: {
+        display: "grid",
+        gridTemplateColumns: `repeat(${columns}, 1fr)`,
+        gap,
+        padding: gap
+      },
+      children: images.map((src, i) => {
+        const delay = i * staggerFrames;
+        const spr = spring2({
+          fps,
+          frame: Math.max(0, frame - delay),
+          config: { damping: 14, stiffness: 100 }
+        });
+        const opacity = interpolate4(spr, [0, 1], [0, 1]);
+        const scale = interpolate4(spr, [0, 1], [0.85, 1]);
+        const translateY = interpolate4(spr, [0, 1], [20, 0]);
+        return /* @__PURE__ */ jsx4(
+          "div",
+          {
+            style: {
+              overflow: "hidden",
+              borderRadius: 4,
+              opacity,
+              transform: `scale(${scale}) translateY(${translateY}px)`
+            },
+            children: /* @__PURE__ */ jsx4(
+              Img,
+              {
+                src,
+                style: {
+                  width: "100%",
+                  height: "100%",
+                  objectFit: "cover"
+                }
+              }
+            )
+          },
+          i
+        );
+      })
+    }
+  );
+};
+
+// src/layouts/picture-in-picture/index.tsx
+import { useCurrentFrame as useCurrentFrame5, useVideoConfig as useVideoConfig5, spring as spring3, interpolate as interpolate5, AbsoluteFill as AbsoluteFill3 } from "remotion";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var PictureInPicture = ({
+  position = "bottom-right",
+  size = 0.3,
+  borderRadius = 12,
+  shadow = "none",
+  children,
+  main
+}) => {
+  const frame = useCurrentFrame5();
+  const { fps, width, height } = useVideoConfig5();
+  const spr = spring3({
+    fps,
+    frame,
+    config: { damping: 16, stiffness: 120 }
+  });
+  const scale = interpolate5(spr, [0, 1], [0, 1]);
+  const pipWidth = width * size;
+  const pipHeight = height * size;
+  const margin = 20;
+  const positionStyle = {};
+  if (position.includes("top")) {
+    positionStyle.top = margin;
+  } else {
+    positionStyle.bottom = margin;
+  }
+  if (position.includes("left")) {
+    positionStyle.left = margin;
+  } else {
+    positionStyle.right = margin;
+  }
+  const originX = position.includes("left") ? "0%" : "100%";
+  const originY = position.includes("top") ? "0%" : "100%";
+  return /* @__PURE__ */ jsxs4(AbsoluteFill3, { children: [
+    main,
+    /* @__PURE__ */ jsx5(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          ...positionStyle,
+          width: pipWidth,
+          height: pipHeight,
+          borderRadius,
+          overflow: "hidden",
+          border: `1px solid ${BORDER}`,
+          boxShadow: shadow,
+          transform: `scale(${scale})`,
+          transformOrigin: `${originX} ${originY}`
+        },
+        children
+      }
+    )
+  ] });
+};
+
+// src/layouts/split-screen/index.tsx
+import React from "react";
+import { useCurrentFrame as useCurrentFrame6, useVideoConfig as useVideoConfig6, spring as spring4, interpolate as interpolate6, AbsoluteFill as AbsoluteFill4 } from "remotion";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var SplitScreen = ({
+  columns = 2,
+  gap = 4,
+  children
+}) => {
+  const frame = useCurrentFrame6();
+  const { fps } = useVideoConfig6();
+  const childArray = React.Children.toArray(children);
+  const staggerFrames = 4;
+  return /* @__PURE__ */ jsx6(
+    AbsoluteFill4,
+    {
+      style: {
+        display: "flex",
+        flexDirection: "row",
+        gap
+      },
+      children: childArray.map((child, i) => {
+        const delay = i * staggerFrames;
+        const spr = spring4({
+          fps,
+          frame: Math.max(0, frame - delay),
+          config: { damping: 14, stiffness: 100 }
+        });
+        const opacity = interpolate6(spr, [0, 1], [0, 1]);
+        const scale = interpolate6(spr, [0, 1], [0.92, 1]);
+        return /* @__PURE__ */ jsx6(
+          "div",
+          {
+            style: {
+              flex: `1 1 ${100 / columns}%`,
+              overflow: "hidden",
+              opacity,
+              transform: `scale(${scale})`
+            },
+            children: child
+          },
+          i
+        );
+      })
+    }
+  );
+};
+
+// src/layouts/staggered-bento-grid/index.tsx
+import { Sequence, spring as spring5, useCurrentFrame as useCurrentFrame7, useVideoConfig as useVideoConfig7 } from "remotion";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var FONT_FAMILY3 = "inherit";
+var DEFAULT_ITEMS = [
+  { title: "Fast", body: "Built on Remotion", span: 2 },
+  { title: "Animated", body: "Spring physics" },
+  { title: "Composable", body: "Drop-in blocks" },
+  { title: "Themed", body: "Tailwind ready" },
+  { title: "Typed", body: "First-class TS" },
+  { title: "Open", body: "MIT licensed", span: 2 },
+  { title: "Tiny", body: "Zero runtime cost" }
+];
+var GRID_MAX_WIDTH = 1100;
+var GRID_GAP = 20;
+var CARD_PADDING = 24;
+function Card2({
+  item,
+  cardColor,
+  textColor,
+  speed,
+  columns
+}) {
+  const frame = useCurrentFrame7() * speed;
+  const { fps } = useVideoConfig7();
+  const span = item.span ?? 1;
+  const cellWidth = (GRID_MAX_WIDTH - GRID_GAP * (columns - 1)) / columns;
+  const contentWidth = Math.max(
+    80,
+    cellWidth * span + GRID_GAP * (span - 1) - CARD_PADDING * 2
+  );
+  const progress = spring5({
+    frame,
+    fps,
+    durationInFrames: Math.round(0.6 * fps),
+    config: { damping: 12 }
+  });
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      style: {
+        gridColumn: `span ${item.span ?? 1}`,
+        background: cardColor,
+        borderRadius: 16,
+        padding: 24,
+        opacity: progress,
+        transform: `scale(${0.85 + progress * 0.15})`,
+        transformOrigin: "center center",
+        willChange: "transform, opacity",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "flex-end",
+        minHeight: 140,
+        border: `1px solid ${BORDER_SOFT}`
+      },
+      children: [
+        /* @__PURE__ */ jsx7(
+          FitText,
+          {
+            maxFontSize: 28,
+            maxWidth: contentWidth,
+            maxLines: 2,
+            fontFamily: FONT_FAMILY3,
+            fontWeight: 700,
+            letterSpacing: "-0.03em",
+            style: { color: textColor, marginBottom: 4 },
+            children: item.title
+          }
+        ),
+        item.body ? /* @__PURE__ */ jsx7(
+          FitText,
+          {
+            maxFontSize: 16,
+            maxWidth: contentWidth,
+            maxLines: 3,
+            fontFamily: FONT_FAMILY3,
+            fontWeight: 400,
+            style: { color: textColor, opacity: 0.6 },
+            children: item.body
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function StaggeredBentoGrid({
+  items = DEFAULT_ITEMS,
+  staggerDelay = 8,
+  columns = 3,
+  background = BG,
+  cardColor = SURFACE,
+  textColor = TEXT_HI,
+  speed = 1,
+  className
+}) {
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      className,
+      style: {
+        position: "absolute",
+        inset: 0,
+        background,
+        padding: 64,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: /* @__PURE__ */ jsx7(
+        "div",
+        {
+          style: {
+            display: "grid",
+            gridTemplateColumns: `repeat(${columns}, 1fr)`,
+            gap: 20,
+            width: "100%",
+            maxWidth: 1100
+          },
+          children: items.map((item, index) => /* @__PURE__ */ jsx7(
+            Sequence,
+            {
+              from: Math.round(index * staggerDelay / speed),
+              layout: "none",
+              children: /* @__PURE__ */ jsx7(
+                Card2,
+                {
+                  item,
+                  cardColor,
+                  textColor,
+                  speed,
+                  columns
+                }
+              )
+            },
+            index
+          ))
+        }
+      )
+    }
+  );
+}
+
+// src/layouts/chat-to-preview-layout/config.ts
+import { z } from "zod";
+var paramsSchema = z.object({
+  startChatRatio: z.number().min(0).max(1).default(0.55).describe("Initial width ratio of the chat pane (0\u20131)."),
+  endChatRatio: z.number().min(0).max(1).default(0.35).describe("Final width ratio of the chat pane."),
+  background: z.string().default(BG).describe("Frame background."),
+  speed: z.number().min(0.25).max(4).default(1).describe("Playback speed multiplier.")
+}).passthrough();
+var config = {
+  id: "chat-to-preview-layout",
+  component: ChatToPreviewLayout,
+  name: "Chat to Preview Layout",
+  category: "layouts",
+  kind: "component",
+  version: "0.1.1",
+  intent: "split-screen",
+  description: 'Two-pane layout with a chat panel on the left and a preview canvas on the right. The chat pane animates from a wider start ratio to a narrower end ratio, simulating the "chat conversation produces a result" pattern.',
+  useWhen: 'AI/agent demo videos, "chat \u2192 output" walkthroughs, cueframe self-promo. Pass actual chat + preview ReactNodes for content. Avoid for non-AI workflows \u2014 the framing is specific.',
+  pairsWith: ["typewriter", "glass-code-block", "success-confetti"],
+  avoidWith: ["split-screen"],
+  tier: "standard",
+  useCase: ["full-scene"],
+  tags: ["layout", "split", "chat", "preview", "ai-demo"],
+  mood: ["tech-demo", "corporate"],
+  paramsSchema,
+  propDefaults: { startChatRatio: 0.55, endChatRatio: 0.35, background: BG, speed: 1 },
+  examples: [
+    { name: "agent-demo", mood: ["tech-demo"], params: { startChatRatio: 0.55, endChatRatio: 0.35, background: BG, speed: 1 } }
+  ],
+  textParam: null,
+  subtextParam: null,
+  tokens: [
+    { propPath: "background", cssVar: "--cf-bg", fallback: BG, brandKitPath: "colors.background" }
+  ],
+  durationInFrames: 180,
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  preview: { thumbnailFrame: 90, mode: "oneshot", defaultExample: "agent-demo" }
+};
+
+// src/layouts/infinite-bento-pan/config.ts
+import { z as z2 } from "zod";
+var paramsSchema2 = z2.object({
+  panSpeed: z2.number().min(0.25).max(2).default(1).describe(
+    'How aggressively the camera pans across the supergrid. 0.5 feels languid; 1 reads as "tour"; >1.5 starts blurring cards.'
+  ),
+  accentColor: z2.string().default(VIOLET).describe(
+    "Highlight color for chart lines, bars, and counter deltas. Dial to brand accent."
+  ),
+  speed: z2.number().min(0.25).max(4).default(1).describe("Global playback speed multiplier (compounds with panSpeed).")
+}).passthrough();
+var config2 = {
+  id: "infinite-bento-pan",
+  component: InfiniteBentoPan,
+  name: "Infinite Bento Pan",
+  category: "layouts",
+  kind: "component",
+  version: "0.1.1",
+  intent: "pan-grid",
+  description: 'A 3500\xD72500 supergrid of pre-baked bento cards (charts, counters, code snippets, gradients, logos, stats, bars) with a slow diagonal camera pan and a vignette mask. The "platform overview" hero shot \u2014 gives the impression of a vast, dense product surface without needing real data.',
+  useWhen: 'Top-of-funnel marketing intros, "look how much this platform does" beats, opening titles for product demos, B-roll under VO. Avoid when you need the audience to read specific cards (the pan is constant \u2014 use staggered-bento-grid instead) or when the brand is minimalist (this primitive is intentionally maximal).',
+  pairsWith: ["cinematic-title", "kinetic-type", "grain", "volumetric-rays"],
+  avoidWith: ["staggered-bento-grid", "split-screen", "picture-in-picture"],
+  tier: "niche",
+  useCase: ["background"],
+  tags: ["layout", "bento", "pan", "infinite", "supergrid", "b-roll", "platform-overview"],
+  mood: ["tech-demo", "cinematic", "corporate"],
+  paramsSchema: paramsSchema2,
+  propDefaults: { panSpeed: 1, accentColor: VIOLET, speed: 1 },
+  examples: [
+    {
+      name: "platform-overview",
+      mood: ["tech-demo", "cinematic"],
+      params: { panSpeed: 1, accentColor: VIOLET },
+      description: "Default purple-accent pan for hero intros."
+    },
+    {
+      name: "slow-tour",
+      mood: ["cinematic", "corporate"],
+      params: { panSpeed: 0.5, accentColor: BLUE },
+      description: "Half-speed pan, blue accent \u2014 calmer, more corporate."
+    }
+  ],
+  textParam: null,
+  subtextParam: null,
+  tokens: [
+    { propPath: "accentColor", cssVar: "--cf-accent", fallback: VIOLET, brandKitPath: "colors.accent" }
+  ],
+  durationInFrames: 300,
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  preview: { thumbnailFrame: 150, mode: "loop", defaultExample: "platform-overview" }
+};
+
+// src/layouts/letterbox/config.ts
+import { z as z3 } from "zod";
+var paramsSchema3 = z3.object({
+  ratio: z3.number().min(1).max(3.5).default(2.35).describe("Target aspect ratio for the bars. 2.35 = cinemascope; 1.85 = academy widescreen."),
+  color: z3.string().default("#000000").describe("Bar color."),
+  animated: z3.boolean().default(true).describe("Spring-animate the bars opening.")
+}).passthrough();
+var config3 = {
+  id: "letterbox",
+  component: Letterbox,
+  name: "Letterbox",
+  category: "layouts",
+  kind: "component",
+  version: "0.1.0",
+  intent: "letterbox",
+  description: "Cinematic letterbox bars overlay. Calculates bar height from current vs target aspect ratio and optionally spring-animates the bars in.",
+  useWhen: 'Establishing shots, dramatic moments, signaling "this is a film". Pair with cinematic-title for the full intro feel. Avoid for already-cropped content (no bars to add).',
+  pairsWith: ["cinematic-title", "parallax", "color-grade", "grain"],
+  avoidWith: [],
+  tier: "standard",
+  useCase: ["title-over-footage"],
+  tags: ["layout", "letterbox", "cinemascope", "bars", "cinematic"],
+  mood: ["cinematic"],
+  paramsSchema: paramsSchema3,
+  propDefaults: { ratio: 2.35, color: "#000000", animated: true },
+  examples: [
+    { name: "cinemascope", mood: ["cinematic"], params: { ratio: 2.35, color: "#000000", animated: true } },
+    { name: "widescreen", mood: ["cinematic"], params: { ratio: 1.85, color: "#000000", animated: true } }
+  ],
+  textParam: null,
+  subtextParam: null,
+  tokens: [],
+  durationInFrames: 90,
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  preview: { thumbnailFrame: 60, mode: "oneshot", defaultExample: "cinemascope" }
+};
+
+// src/layouts/photo-grid/config.ts
+import { z as z4 } from "zod";
+var paramsSchema4 = z4.object({
+  images: z4.array(z4.string().url()).min(1).describe("Array of image URLs to display."),
+  columns: z4.number().int().min(1).max(6).default(2).describe("Grid columns."),
+  gap: z4.number().min(0).max(40).default(8).describe("Gap between cells in pixels."),
+  stagger: z4.number().min(0).max(2).default(0.15).describe("Seconds between each cell's reveal. 0.1\u20130.25 reads natural.")
+}).passthrough();
+var config4 = {
+  id: "photo-grid",
+  component: PhotoGrid,
+  name: "Photo Grid",
+  category: "layouts",
+  kind: "component",
+  version: "0.1.0",
+  intent: "split-screen",
+  description: "CSS-grid photo gallery with spring-animated staggered entry. Each cell fades in, scales up from 0.85, and translates from slight Y offset.",
+  useWhen: 'Photo collages, image-driven montages, "look at all these" reels. 4\u20138 images at 2 columns is the sweet spot. Avoid for non-photo content \u2014 the cell framing is photo-shaped.',
+  pairsWith: ["parallax", "cinematic-title", "mesh-gradient-bg"],
+  avoidWith: [],
+  tier: "standard",
+  useCase: ["full-scene"],
+  tags: ["layout", "grid", "photos", "gallery", "staggered"],
+  mood: ["editorial", "cinematic", "soft"],
+  paramsSchema: paramsSchema4,
+  propDefaults: { columns: 2, gap: 8, stagger: 0.15 },
+  examples: [
+    {
+      name: "four-up",
+      mood: ["editorial"],
+      params: {
+        images: ["https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=800", "https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=800", "https://images.unsplash.com/photo-1465146344425-f00d5f5c8f07?w=800", "https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=800"],
+        columns: 2,
+        gap: 8,
+        stagger: 0.15
+      }
+    }
+  ],
+  textParam: null,
+  subtextParam: null,
+  tokens: [],
+  durationInFrames: 120,
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  preview: { thumbnailFrame: 90, mode: "oneshot", defaultExample: "four-up" }
+};
+
+// src/layouts/picture-in-picture/config.ts
+import { z as z5 } from "zod";
+var paramsSchema5 = z5.object({
+  position: z5.enum(["top-left", "top-right", "bottom-left", "bottom-right"]).default("bottom-right").describe("Corner for the PiP overlay."),
+  size: z5.number().min(0.1).max(0.6).default(0.3).describe("PiP size as fraction of video width (0\u20131)."),
+  borderRadius: z5.number().min(0).max(60).default(12).describe("Border radius in pixels."),
+  shadow: z5.string().default("none").describe("CSS box-shadow. Defaults to none; a hairline border provides separation.")
+}).passthrough();
+var config5 = {
+  id: "picture-in-picture",
+  component: PictureInPicture,
+  name: "Picture-in-Picture",
+  category: "layouts",
+  kind: "component",
+  version: "0.1.1",
+  intent: "picture-in-picture",
+  description: "Floating PiP overlay layout. Renders main content full-screen with a spring-animated PiP window in a chosen corner. Pass `main` and `children` ReactNodes.",
+  useWhen: "Speaker overlay on top of presentation/screen-share, reaction inset on top of video, dual-feed podcasts. Avoid stacking multiple PiPs.",
+  pairsWith: ["lower-third", "parallax", "pulsing-indicator"],
+  avoidWith: ["split-screen"],
+  tier: "standard",
+  useCase: ["title-over-footage"],
+  tags: ["layout", "pip", "picture-in-picture", "overlay", "corner"],
+  mood: ["tech-demo", "editorial", "breaking-news"],
+  paramsSchema: paramsSchema5,
+  propDefaults: { position: "bottom-right", size: 0.3, borderRadius: 12, shadow: "none" },
+  examples: [
+    { name: "speaker-overlay", mood: ["tech-demo"], params: { position: "bottom-right", size: 0.25, borderRadius: 12, shadow: "none" } },
+    { name: "reaction-inset", mood: ["editorial"], params: { position: "top-right", size: 0.2, borderRadius: 8, shadow: "none" } }
+  ],
+  textParam: null,
+  subtextParam: null,
+  tokens: [],
+  durationInFrames: 60,
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  preview: { thumbnailFrame: 30, mode: "loop", defaultExample: "speaker-overlay" }
+};
+
+// src/layouts/split-screen/config.ts
+import { z as z6 } from "zod";
+var paramsSchema6 = z6.object({
+  columns: z6.number().int().min(1).max(6).default(2).describe("Number of equal columns. 2 is the canonical split."),
+  gap: z6.number().min(0).max(40).default(4).describe("Gap between panels in pixels.")
+}).passthrough();
+var config6 = {
+  id: "split-screen",
+  component: SplitScreen,
+  name: "Split Screen",
+  category: "layouts",
+  kind: "component",
+  version: "0.1.0",
+  intent: "split-screen",
+  description: "Multi-panel split-screen layout. Arranges children into equal-width columns with spring-animated stagger. Each panel scales-and-fades in with a 4-frame delay between them.",
+  useWhen: "Side-by-side comparisons, multi-feed podcasts (interviewer + interviewee), photo grids. Avoid for >4 columns at 1920\xD71080 \u2014 content gets cramped.",
+  pairsWith: ["lower-third", "photo-grid"],
+  avoidWith: ["picture-in-picture"],
+  tier: "standard",
+  useCase: ["full-scene"],
+  tags: ["layout", "split", "columns", "comparison", "multi-feed"],
+  mood: ["editorial", "corporate", "tech-demo"],
+  paramsSchema: paramsSchema6,
+  propDefaults: { columns: 2, gap: 4 },
+  examples: [
+    { name: "two-up", mood: ["editorial"], params: { columns: 2, gap: 4 } },
+    { name: "three-grid", mood: ["corporate"], params: { columns: 3, gap: 6 } }
+  ],
+  textParam: null,
+  subtextParam: null,
+  tokens: [],
+  durationInFrames: 60,
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  preview: { thumbnailFrame: 30, mode: "oneshot", defaultExample: "two-up" }
+};
+
+// src/layouts/staggered-bento-grid/config.ts
+import { z as z7 } from "zod";
+var itemSchema = z7.object({
+  title: z7.string().min(1).max(80).describe("Bento card title. 1\u20133 words. The visual hero. Auto-fits (shrinks + wraps to 2 lines) to the cell."),
+  body: z7.string().max(160).optional().describe("Optional subtitle beneath the title. Auto-fits (shrinks + wraps to 3 lines) to the cell."),
+  span: z7.union([z7.literal(1), z7.literal(2)]).optional().describe("Column span. 2 doubles the card width \u2014 use for 1\u20132 anchor cards in the grid.")
+});
+var paramsSchema7 = z7.object({
+  items: z7.array(itemSchema).min(1).max(16).default([
+    { title: "Fast", body: "Built on Remotion", span: 2 },
+    { title: "Animated", body: "Spring physics" },
+    { title: "Composable", body: "Drop-in blocks" },
+    { title: "Themed", body: "Tailwind ready" },
+    { title: "Typed", body: "First-class TS" },
+    { title: "Open", body: "MIT licensed", span: 2 },
+    { title: "Tiny", body: "Zero runtime cost" }
+  ]).describe(
+    "Cards to render. Order = stagger order (top-left first). Mix span:1 / span:2 for a varied bento rhythm; 6\u20139 cards reads best."
+  ),
+  staggerDelay: z7.number().int().min(2).max(20).default(8).describe(
+    "Frames between each card's entrance. 6\u201310 feels intentional; <4 is chaotic; >12 makes the audience wait."
+  ),
+  columns: z7.number().int().min(2).max(5).default(3).describe(
+    "Grid column count. 3 is the canonical bento."
+  ),
+  background: z7.string().default(BG).describe("Frame background behind the grid."),
+  cardColor: z7.string().default(SURFACE).describe("Bento card fill. Should be one step lighter than background."),
+  textColor: z7.string().default(TEXT_HI).describe("Title and body text color."),
+  speed: z7.number().min(0.25).max(4).default(1).describe("Playback speed multiplier across all card entrances.")
+}).passthrough();
+var config7 = {
+  id: "staggered-bento-grid",
+  component: StaggeredBentoGrid,
+  name: "Staggered Bento Grid",
+  category: "layouts",
+  kind: "component",
+  version: "0.1.1",
+  intent: "arrange-grid",
+  description: `Bento-style feature grid where each card pops in on a spring with a staggered delay. Mixed-span cards (1\xD7 / 2\xD7 columns) create the asymmetric "Apple keynote" rhythm that's become the default for feature recaps and product capability tours.`,
+  useWhen: `Feature lists, "what's new", capability summaries, anything that needs to communicate 5\u20139 discrete points without overwhelming the viewer. Avoid for 1\u20133 items (use a single hero card) or >12 items (text becomes unreadable; consider infinite-bento-pan instead).`,
+  pairsWith: ["mesh-gradient-bg", "kinetic-type", "cinematic-title", "spring-pop-in"],
+  avoidWith: ["split-screen", "picture-in-picture"],
+  tier: "standard",
+  useCase: ["full-scene"],
+  tags: ["layout", "bento", "grid", "features", "stagger", "spring", "apple", "keynote"],
+  mood: ["tech-demo", "minimal", "corporate", "editorial"],
+  paramsSchema: paramsSchema7,
+  propDefaults: {
+    items: [
+      { title: "Fast", body: "Built on Remotion", span: 2 },
+      { title: "Animated", body: "Spring physics" },
+      { title: "Composable", body: "Drop-in blocks" },
+      { title: "Themed", body: "Tailwind ready" },
+      { title: "Typed", body: "First-class TS" },
+      { title: "Open", body: "MIT licensed", span: 2 },
+      { title: "Tiny", body: "Zero runtime cost" }
+    ],
+    staggerDelay: 8,
+    columns: 3,
+    background: BG,
+    cardColor: SURFACE,
+    textColor: TEXT_HI,
+    speed: 1
+  },
+  examples: [
+    {
+      name: "feature-recap",
+      mood: ["tech-demo"],
+      params: {
+        items: [
+          { title: "Streaming", body: "Sub-100ms first token", span: 2 },
+          { title: "Caching", body: "90% prompt reuse" },
+          { title: "Tools", body: "Native function calls" },
+          { title: "Eval", body: "Built-in scoring" },
+          { title: "OSS", body: "MIT licensed", span: 2 }
+        ],
+        columns: 3
+      },
+      description: "Five-card mixed-span recap."
+    },
+    {
+      name: "capability-tour",
+      mood: ["corporate", "minimal"],
+      params: {
+        items: [
+          { title: "SOC 2" },
+          { title: "GDPR" },
+          { title: "HIPAA" },
+          { title: "ISO 27001" }
+        ],
+        columns: 4,
+        staggerDelay: 6,
+        cardColor: SURFACE
+      },
+      description: "Compact compliance grid."
+    }
+  ],
+  textParam: null,
+  subtextParam: null,
+  tokens: [
+    { propPath: "background", cssVar: "--cf-bg", fallback: BG, brandKitPath: "colors.background" },
+    { propPath: "cardColor", cssVar: "--cf-surface", fallback: SURFACE, brandKitPath: "colors.surface" },
+    { propPath: "textColor", cssVar: "--cf-fg", fallback: TEXT_HI, brandKitPath: "colors.textOnSurface" }
+  ],
+  durationInFrames: 120,
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  preview: { thumbnailFrame: 90, mode: "oneshot", defaultExample: "feature-recap" }
+};
+
+// src/layouts/index.ts
+var catalog = [
+  config,
+  config2,
+  config3,
+  config4,
+  config5,
+  config6,
+  config7
+];
+
+export {
+  ChatToPreviewLayout,
+  InfiniteBentoPan,
+  Letterbox,
+  PhotoGrid,
+  PictureInPicture,
+  SplitScreen,
+  StaggeredBentoGrid,
+  catalog
+};
+//# sourceMappingURL=chunk-HFPFGZXT.js.map