@cueframe/kernel 0.1.0 → 0.1.1

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

@@ -1,1494 +0,0 @@
-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