@cueframe/kernel 0.2.1 → 0.2.3

package/dist/{chunk-DQKSCHFC.js → chunk-6EWRIAZA.js}

@@ -21,7 +21,10 @@ import {
   TEXT_HI,
   TEXT_MUTED,
   VIOLET
-} from "./chunk-CX2IIQ4R.js";
+} from "./chunk-W2245F6G.js";
+import {
+  FlexLayout
+} from "./chunk-5DJ3IEJR.js";
 
 // ../execution/primitives/src/layouts/chat-to-preview-layout/index.tsx
 import { Easing, interpolate, useCurrentFrame, useVideoConfig } from "remotion";
@@ -289,6 +292,10 @@ function ChatToPreviewLayout({
   );
 }
 
+// ../execution/primitives/src/layouts/flex-layout/index.tsx
+import React2 from "react";
+var FlexLayout2 = (props) => /* @__PURE__ */ React2.createElement(FlexLayout, { outlineColor: BORDER_SOFT, ...props });
+
 // ../execution/primitives/src/layouts/infinite-bento-pan/index.tsx
 import { interpolate as interpolate2, useCurrentFrame as useCurrentFrame2, useVideoConfig as useVideoConfig2 } from "remotion";
 var FONT_FAMILY2 = "inherit";
@@ -695,7 +702,7 @@ function InfiniteBentoPan({
 }
 
 // ../execution/primitives/src/layouts/letterbox/index.tsx
-import React2 from "react";
+import React3 from "react";
 import { useCurrentFrame as useCurrentFrame3, useVideoConfig as useVideoConfig3, spring, interpolate as interpolate3, AbsoluteFill } from "remotion";
 var Letterbox = ({
   ratio = 2.35,
@@ -720,9 +727,9 @@ var Letterbox = ({
     barHeight = rawBarHeight;
   }
   if (currentRatio >= ratio && rawBarHeight <= 0) {
-    return /* @__PURE__ */ React2.createElement(AbsoluteFill, null, children);
+    return /* @__PURE__ */ React3.createElement(AbsoluteFill, null, children);
   }
-  return /* @__PURE__ */ React2.createElement(AbsoluteFill, null, children, /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React3.createElement(AbsoluteFill, null, children, /* @__PURE__ */ React3.createElement(
     "div",
     {
       style: {
@@ -734,7 +741,7 @@ var Letterbox = ({
         backgroundColor: color
       }
     }
-  ), /* @__PURE__ */ React2.createElement(
+  ), /* @__PURE__ */ React3.createElement(
     "div",
     {
       style: {
@@ -750,7 +757,7 @@ var Letterbox = ({
 };
 
 // ../execution/primitives/src/layouts/photo-grid/index.tsx
-import React3 from "react";
+import React4 from "react";
 import { useCurrentFrame as useCurrentFrame4, useVideoConfig as useVideoConfig4, spring as spring2, interpolate as interpolate4, AbsoluteFill as AbsoluteFill2, Img } from "remotion";
 var PhotoGrid = ({
   images,
@@ -761,7 +768,7 @@ var PhotoGrid = ({
   const frame = useCurrentFrame4();
   const { fps } = useVideoConfig4();
   const staggerFrames = Math.round(stagger * fps);
-  return /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React4.createElement(
     AbsoluteFill2,
     {
       style: {
@@ -781,7 +788,7 @@ var PhotoGrid = ({
       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__ */ React3.createElement(
+      return /* @__PURE__ */ React4.createElement(
         "div",
         {
           key: i,
@@ -792,7 +799,7 @@ var PhotoGrid = ({
             transform: `scale(${scale}) translateY(${translateY}px)`
           }
         },
-        /* @__PURE__ */ React3.createElement(
+        /* @__PURE__ */ React4.createElement(
           Img,
           {
             src,
@@ -809,7 +816,7 @@ var PhotoGrid = ({
 };
 
 // ../execution/primitives/src/layouts/picture-in-picture/index.tsx
-import React4 from "react";
+import React5 from "react";
 import { useCurrentFrame as useCurrentFrame5, useVideoConfig as useVideoConfig5, spring as spring3, interpolate as interpolate5, AbsoluteFill as AbsoluteFill3 } from "remotion";
 var PictureInPicture = ({
   position = "bottom-right",
@@ -843,7 +850,7 @@ var PictureInPicture = ({
   }
   const originX = position.includes("left") ? "0%" : "100%";
   const originY = position.includes("top") ? "0%" : "100%";
-  return /* @__PURE__ */ React4.createElement(AbsoluteFill3, null, main, /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React5.createElement(AbsoluteFill3, null, main, /* @__PURE__ */ React5.createElement(
     "div",
     {
       style: {
@@ -864,7 +871,7 @@ var PictureInPicture = ({
 };
 
 // ../execution/primitives/src/layouts/split-screen/index.tsx
-import React5 from "react";
+import React6 from "react";
 import { useCurrentFrame as useCurrentFrame6, useVideoConfig as useVideoConfig6, spring as spring4, interpolate as interpolate6, AbsoluteFill as AbsoluteFill4 } from "remotion";
 var SplitScreen = ({
   columns = 2,
@@ -873,9 +880,9 @@ var SplitScreen = ({
 }) => {
   const frame = useCurrentFrame6();
   const { fps } = useVideoConfig6();
-  const childArray = React5.Children.toArray(children);
+  const childArray = React6.Children.toArray(children);
   const staggerFrames = 4;
-  return /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React6.createElement(
     AbsoluteFill4,
     {
       style: {
@@ -893,7 +900,7 @@ var SplitScreen = ({
       });
       const opacity = interpolate6(spr, [0, 1], [0, 1]);
       const scale = interpolate6(spr, [0, 1], [0.92, 1]);
-      return /* @__PURE__ */ React5.createElement(
+      return /* @__PURE__ */ React6.createElement(
         "div",
         {
           key: i,
@@ -1090,18 +1097,130 @@ var config = {
   preview: { thumbnailFrame: 90, mode: "oneshot", defaultExample: "agent-demo" }
 };
 
-// ../execution/primitives/src/layouts/infinite-bento-pan/config.ts
+// ../execution/primitives/src/layouts/flex-layout/config.ts
 import { z as z2 } from "zod";
+var sizing = {
+  weight: z2.number().min(0).describe("Share of the free space along the main axis. 0 = content-sized (uses basis / min)."),
+  basis: z2.number().min(0).optional().describe("Declared size in px along the main axis. With weight 0 the track takes exactly this and pushes its neighbours."),
+  min: z2.number().min(0).optional().describe("Minimum px along the main axis."),
+  max: z2.number().min(0).optional().describe("Maximum px along the main axis."),
+  shrink: z2.number().min(0).max(1).optional().describe("0 keeps a declared size even when it overflows (default for weight 0); 1 lets it shrink.")
+};
+var leaf = z2.object(sizing).strict();
+var container = z2.object({
+  ...sizing,
+  split: z2.array(z2.union([z2.number().min(0), leaf])).min(1).max(8).describe("Cells nested across the other axis, each a weight or a sizing object.")
+}).strict();
+var track = z2.union([z2.number().min(0).describe("Leaf weight along the main axis."), container, leaf]);
+var fit = z2.object({
+  mode: z2.enum(["stretch", "contain", "cover", "position", "scale", "matte"]).describe("stretch fills the cell; contain/cover fit an aspect; position keeps natural size; scale fits an authored size; matte clips instead of resizing."),
+  aspect: z2.number().positive().optional().describe("Content w/h for contain, cover, matte."),
+  size: z2.object({ w: z2.number().positive(), h: z2.number().positive() }).optional().describe("Authored px size for scale."),
+  anchor: z2.object({ x: z2.number().min(0).max(1), y: z2.number().min(0).max(1) }).optional().describe("0..1 position of the content inside the cell. Default centre.")
+}).strict();
 var paramsSchema2 = z2.object({
-  panSpeed: z2.number().min(0.25).max(2).default(1).describe(
+  direction: z2.enum(["row", "column"]).default("row").describe("Main axis for the top-level tracks."),
+  gap: z2.number().min(0).max(120).default(24).describe("Gap between cells in pixels."),
+  padding: z2.number().min(0).max(200).default(0).describe("Padding inside the frame in pixels."),
+  tracks: z2.array(track).min(1).max(8).default([1, 1]).describe("Main-axis tracks. A number is a weight; an object adds declared sizing and may `split` into nested cells. Children fill the leaves depth-first."),
+  tracksEnd: z2.array(track).min(1).max(8).optional().describe("End state. Weights ease from tracks to tracksEnd across the clip and every cell reflows. Shapes may differ: a cell present on one side only enters from, or exits to, zero."),
+  fits: z2.array(fit).max(64).optional().describe("Per-leaf fit rule in leaf order. Omitted leaves stretch."),
+  outline: z2.boolean().default(false).describe("Draw thin outlines on every cell. Reads as a design element, not debug UI.")
+}).passthrough();
+var config2 = {
+  id: "flex-layout",
+  component: FlexLayout2,
+  name: "Flex Layout",
+  category: "layouts",
+  kind: "component",
+  version: "0.1.0",
+  intent: "flex-layout",
+  description: "Weighted flexbox layout that reflows. Tracks are weights, not pixels, so the same layout fits any frame and any content count; a track with weight 0 and a basis is content-sized and pushes its neighbours. Set tracksEnd to animate the weights \u2014 cells that exist on only one side enter or exit \u2014 and everything re-solves every frame. Per-leaf fit rules (stretch, contain, cover, position, scale, matte) decide how content sits in its cell. One solve positions everything, so cells never drift against each other.",
+  useWhen: "Any multi-cell arrangement whose proportions should be data, not hand-nudged pixels \u2014 dashboards, feature grids, side-by-sides, fixed sidebars beside fluid content, and any layout that should visibly reflow as a beat. Prefer over split-screen when columns are unequal, content-sized or animated. Not for a single floating box (use picture-in-picture) or bars (letterbox). Never CSS-scale the whole primitive; size the container instead. Like the other layouts it takes children, so use it inside an authored component (import FlexLayout from @cueframe/animate); as a bare composition overlay it draws only the rig outlines.",
+  pairsWith: ["lower-third", "split-screen", "photo-grid"],
+  avoidWith: ["picture-in-picture", "letterbox"],
+  tier: "standard",
+  useCase: ["full-scene", "explainer"],
+  tags: ["layout", "flex", "flexbox", "grid", "reflow", "weights", "cells", "responsive", "matte", "fit"],
+  mood: ["editorial", "tech-demo", "minimal", "corporate"],
+  paramsSchema: paramsSchema2,
+  propDefaults: { direction: "row", gap: 24, padding: 0, tracks: [1, 1], outline: false },
+  examples: [
+    { name: "three-up", mood: ["editorial"], params: { tracks: [1, 1, 1], gap: 24 } },
+    { name: "sidebar", mood: ["tech-demo"], params: { tracks: [1, 3], gap: 16, padding: 32 } },
+    {
+      name: "content-sized",
+      mood: ["corporate"],
+      description: "A fixed 520px rail and a fixed 360px panel; the middle takes whatever is left.",
+      params: {
+        tracks: [{ weight: 0, basis: 520 }, 1, { weight: 0, basis: 360 }],
+        fits: [{ mode: "stretch" }, { mode: "position" }, { mode: "stretch" }],
+        gap: 16,
+        padding: 24,
+        outline: true
+      }
+    },
+    {
+      name: "reflow",
+      mood: ["minimal"],
+      description: "A cast column, a type cell, and a nested block grid; weights ease so the whole rig reflows.",
+      params: {
+        tracks: [{ weight: 1, split: [1, 1, 1, 1] }, 1, { weight: 3, split: [1, 1] }],
+        tracksEnd: [{ weight: 3, split: [1, 1.6, 1, 1] }, 1, { weight: 1, split: [2, 1] }],
+        fits: [
+          { mode: "stretch" },
+          { mode: "stretch" },
+          { mode: "stretch" },
+          { mode: "stretch" },
+          { mode: "position" },
+          { mode: "stretch" },
+          { mode: "stretch" }
+        ],
+        gap: 16,
+        padding: 24,
+        outline: true
+      }
+    },
+    {
+      name: "enter-exit",
+      mood: ["tech-demo"],
+      description: "Two cells become three: the third enters from zero and takes its share.",
+      params: { tracks: [1, 1], tracksEnd: [1, 1, 1], gap: 24, padding: 24, outline: true }
+    },
+    {
+      name: "mattes",
+      mood: ["editorial"],
+      description: "Square and 16:9 mattes over stretched content \u2014 the art is never resized.",
+      params: {
+        tracks: [1, 1, 1],
+        gap: 24,
+        padding: 48,
+        fits: [{ mode: "matte", aspect: 1 }, { mode: "contain", aspect: 16 / 9 }, { mode: "cover", aspect: 1 }]
+      }
+    }
+  ],
+  textParam: null,
+  subtextParam: null,
+  tokens: [],
+  durationInFrames: 90,
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  preview: { thumbnailFrame: 45, mode: "oneshot", defaultExample: "reflow" }
+};
+
+// ../execution/primitives/src/layouts/infinite-bento-pan/config.ts
+import { z as z3 } from "zod";
+var paramsSchema3 = z3.object({
+  panSpeed: z3.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(
+  accentColor: z3.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).")
+  speed: z3.number().min(0.25).max(4).default(1).describe("Global playback speed multiplier (compounds with panSpeed).")
 }).passthrough();
-var config2 = {
+var config3 = {
   id: "infinite-bento-pan",
   component: InfiniteBentoPan,
   name: "Infinite Bento Pan",
@@ -1117,7 +1236,7 @@ var config2 = {
   useCase: ["background"],
   tags: ["layout", "bento", "pan", "infinite", "supergrid", "b-roll", "platform-overview"],
   mood: ["tech-demo", "cinematic", "corporate"],
-  paramsSchema: paramsSchema2,
+  paramsSchema: paramsSchema3,
   propDefaults: { panSpeed: 1, accentColor: VIOLET, speed: 1 },
   examples: [
     {
@@ -1146,13 +1265,13 @@ var config2 = {
 };
 
 // ../execution/primitives/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.")
+import { z as z4 } from "zod";
+var paramsSchema4 = z4.object({
+  ratio: z4.number().min(1).max(3.5).default(2.35).describe("Target aspect ratio for the bars. 2.35 = cinemascope; 1.85 = academy widescreen."),
+  color: z4.string().default("#000000").describe("Bar color."),
+  animated: z4.boolean().default(true).describe("Spring-animate the bars opening.")
 }).passthrough();
-var config3 = {
+var config4 = {
   id: "letterbox",
   component: Letterbox,
   name: "Letterbox",
@@ -1168,7 +1287,7 @@ var config3 = {
   useCase: ["title-over-footage"],
   tags: ["layout", "letterbox", "cinemascope", "bars", "cinematic"],
   mood: ["cinematic"],
-  paramsSchema: paramsSchema3,
+  paramsSchema: paramsSchema4,
   propDefaults: { ratio: 2.35, color: "#000000", animated: true },
   examples: [
     { name: "cinemascope", mood: ["cinematic"], params: { ratio: 2.35, color: "#000000", animated: true } },
@@ -1185,14 +1304,14 @@ var config3 = {
 };
 
 // ../execution/primitives/src/layouts/photo-grid/config.ts
-import { z as z4 } from "zod";
-var paramsSchema4 = z4.object({
-  images: z4.array(z4.string().url().meta({ cueframeAsset: true })).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.")
+import { z as z5 } from "zod";
+var paramsSchema5 = z5.object({
+  images: z5.array(z5.string().url().meta({ cueframeAsset: true })).min(1).describe("Array of image URLs to display."),
+  columns: z5.number().int().min(1).max(6).default(2).describe("Grid columns."),
+  gap: z5.number().min(0).max(40).default(8).describe("Gap between cells in pixels."),
+  stagger: z5.number().min(0).max(2).default(0.15).describe("Seconds between each cell's reveal. 0.1\u20130.25 reads natural.")
 }).passthrough();
-var config4 = {
+var config5 = {
   id: "photo-grid",
   component: PhotoGrid,
   name: "Photo Grid",
@@ -1208,7 +1327,7 @@ var config4 = {
   useCase: ["full-scene"],
   tags: ["layout", "grid", "photos", "gallery", "staggered"],
   mood: ["editorial", "cinematic", "soft"],
-  paramsSchema: paramsSchema4,
+  paramsSchema: paramsSchema5,
   propDefaults: { columns: 2, gap: 8, stagger: 0.15 },
   examples: [
     {
@@ -1233,14 +1352,14 @@ var config4 = {
 };
 
 // ../execution/primitives/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.")
+import { z as z6 } from "zod";
+var paramsSchema6 = z6.object({
+  position: z6.enum(["top-left", "top-right", "bottom-left", "bottom-right"]).default("bottom-right").describe("Corner for the PiP overlay."),
+  size: z6.number().min(0.1).max(0.6).default(0.3).describe("PiP size as fraction of video width (0\u20131)."),
+  borderRadius: z6.number().min(0).max(60).default(12).describe("Border radius in pixels."),
+  shadow: z6.string().default("none").describe("CSS box-shadow. Defaults to none; a hairline border provides separation.")
 }).passthrough();
-var config5 = {
+var config6 = {
   id: "picture-in-picture",
   component: PictureInPicture,
   name: "Picture-in-Picture",
@@ -1256,7 +1375,7 @@ var config5 = {
   useCase: ["title-over-footage"],
   tags: ["layout", "pip", "picture-in-picture", "overlay", "corner"],
   mood: ["tech-demo", "editorial", "breaking-news"],
-  paramsSchema: paramsSchema5,
+  paramsSchema: paramsSchema6,
   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" } },
@@ -1273,12 +1392,12 @@ var config5 = {
 };
 
 // ../execution/primitives/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.")
+import { z as z7 } from "zod";
+var paramsSchema7 = z7.object({
+  columns: z7.number().int().min(1).max(6).default(2).describe("Number of equal columns. 2 is the canonical split."),
+  gap: z7.number().min(0).max(40).default(4).describe("Gap between panels in pixels.")
 }).passthrough();
-var config6 = {
+var config7 = {
   id: "split-screen",
   component: SplitScreen,
   name: "Split Screen",
@@ -1294,7 +1413,7 @@ var config6 = {
   useCase: ["full-scene"],
   tags: ["layout", "split", "columns", "comparison", "multi-feed"],
   mood: ["editorial", "corporate", "tech-demo"],
-  paramsSchema: paramsSchema6,
+  paramsSchema: paramsSchema7,
   propDefaults: { columns: 2, gap: 4 },
   examples: [
     { name: "two-up", mood: ["editorial"], params: { columns: 2, gap: 4 } },
@@ -1311,14 +1430,14 @@ var config6 = {
 };
 
 // ../execution/primitives/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.")
+import { z as z8 } from "zod";
+var itemSchema = z8.object({
+  title: z8.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: z8.string().max(160).optional().describe("Optional subtitle beneath the title. Auto-fits (shrinks + wraps to 3 lines) to the cell."),
+  span: z8.union([z8.literal(1), z8.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([
+var paramsSchema8 = z8.object({
+  items: z8.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" },
@@ -1329,18 +1448,18 @@ var paramsSchema7 = z7.object({
   ]).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(
+  staggerDelay: z8.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(
+  columns: z8.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.")
+  background: z8.string().default(BG).describe("Frame background behind the grid."),
+  cardColor: z8.string().default(SURFACE).describe("Bento card fill. Should be one step lighter than background."),
+  textColor: z8.string().default(TEXT_HI).describe("Title and body text color."),
+  speed: z8.number().min(0.25).max(4).default(1).describe("Playback speed multiplier across all card entrances.")
 }).passthrough();
-var config7 = {
+var config8 = {
   id: "staggered-bento-grid",
   component: StaggeredBentoGrid,
   name: "Staggered Bento Grid",
@@ -1356,7 +1475,7 @@ var config7 = {
   useCase: ["full-scene"],
   tags: ["layout", "bento", "grid", "features", "stagger", "spring", "apple", "keynote"],
   mood: ["tech-demo", "minimal", "corporate", "editorial"],
-  paramsSchema: paramsSchema7,
+  paramsSchema: paramsSchema8,
   propDefaults: {
     items: [
       { title: "Fast", body: "Built on Remotion", span: 2 },
@@ -1429,11 +1548,13 @@ var catalog = [
   config4,
   config5,
   config6,
-  config7
+  config7,
+  config8
 ];
 
 export {
   ChatToPreviewLayout,
+  FlexLayout2 as FlexLayout,
   InfiniteBentoPan,
   Letterbox,
   PhotoGrid,

package/dist/{chunk-YQ7FFW3G.js → chunk-6VWICHOZ.js}

@@ -7,6 +7,10 @@ import {
 import {
   FLOORS
 } from "./chunk-JF4JJAFP.js";
+import {
+  captionFontSource,
+  effectiveCaptionFamily
+} from "./chunk-TARKDVP6.js";
 
 // ../composition/src/projection/brandKit.ts
 var LOGO_DEFAULT_PLACEMENT = "br";
@@ -35,6 +39,11 @@ function resolveBrandKit(kit, compositionWidth) {
     primary: kit.colors.primary ?? kit.colors.accent,
     secondary: kit.colors.secondary ?? kit.colors.accent,
     accent: kit.colors.accent,
+    accentStrong: kit.colors.primary ?? kit.colors.accent,
+    accentSoft: kit.colors.accentMuted ?? safe.accentMuted,
+    success: "#22c55e",
+    warning: "#f59e0b",
+    danger: "#ef4444",
     background: safe.background,
     text: safe.text,
     textMuted: kit.colors.textMuted ?? clampToFloor(colorMix(safe.text, safe.background, 0.4), safe.background, FLOORS.nonBody),
@@ -50,7 +59,10 @@ function resolveBrandKit(kit, compositionWidth) {
   const fonts = {
     heading: kit.fonts.heading,
     body: kit.fonts.body ?? kit.fonts.heading,
-    caption: kit.fonts.caption ?? kit.fonts.body ?? kit.fonts.heading
+    // The slot chain lives in `../fonts` because the kit validator judges the profile at the
+    // family this line picks. Two copies of it is how a kit came to validate against Inter and
+    // project Poppins.
+    caption: captionFontSource(kit.fonts).ref
   };
   const spacing = {
     base: kit.spacing?.base ?? compositionWidth * 0.03,
@@ -70,7 +82,7 @@ function resolveBrandKit(kit, compositionWidth) {
     staggerMs: kit.motion?.staggerMs ?? 90,
     exitMs: kit.motion?.exitMs ?? 0
   };
-  const captionBaseFamily = kit.captionProfile?.fontFamily ?? fonts.caption.family;
+  const captionBaseFamily = effectiveCaptionFamily(kit).family;
   const cp = kit.captionProfile;
   const caption = {
     fg: cp?.emphasisColor ? clampToFloor(cp.emphasisColor, safe.captionScrim, FLOORS.body) : safe.captionFg,
@@ -83,6 +95,7 @@ function resolveBrandKit(kit, compositionWidth) {
     ...cp?.entranceStaggerMs != null ? { entranceStaggerMs: cp.entranceStaggerMs } : {},
     ...cp?.exitMs != null ? { exitMs: cp.exitMs } : {},
     ...captionBaseFamily ? { fontFamily: captionBaseFamily } : {},
+    ...cp?.fontWeight != null ? { fontWeight: cp.fontWeight } : {},
     ...cp?.emphasisFontFamily ? { emphasisFontFamily: cp.emphasisFontFamily } : {},
     ...cp?.emphasisScale != null ? { emphasisScale: cp.emphasisScale } : {},
     ...cp?.emphasisFontWeight != null ? { emphasisFontWeight: cp.emphasisFontWeight } : {},
@@ -347,7 +360,7 @@ function unionExclusionsForAspect(aspect) {
 }
 
 // ../composition/src/projection/composition-floor.ts
-var FLOOR_VERSION = "floor-v6-2026.06.09";
+var FLOOR_VERSION = "floor-v7-2026.09.09";
 var FACE_PADDING = { top: 0.6, bottom: 0.3, side: 0.25 };
 var CAPTION_LC_FLOOR = 60;
 var MIN_ZOOM = 0.4;
@@ -456,6 +469,7 @@ function captionsBehindEligible(input) {
 }
 var CENTER = 0.5;
 var MIN_CAPTION_WIDTH = 0.5;
+var CAPTION_BOTTOM_INSET = 0.06;
 var straddlesCentre = (r) => r.x < CENTER && r.x + r.w > CENTER;
 function placeInLegalArea(el, b) {
   const all = [...b.faceKeepOut, ...b.safeZones];
@@ -496,11 +510,17 @@ function placeInLegalArea(el, b) {
 function resolveCaptionRegion(input) {
   const sz = lookupSafeZones(input.platform ?? "", input.aspect);
   const ext = input.captionExtent ?? { w: 0.8, h: 0.15 };
+  const bottomInset = { x: 0, y: 1 - CAPTION_BOTTOM_INSET, w: 1, h: CAPTION_BOTTOM_INSET };
   const region = placeInLegalArea(
     { id: "captions", anchor: input.anchor ?? "lower-third", minH: ext.h, minW: ext.w },
-    { faceKeepOut: [], safeZones: sz.exclusions }
+    { faceKeepOut: [], safeZones: [...sz.exclusions, bottomInset] }
   );
-  return region ?? { x: 0.1, y: clamp01(1 - ext.h), w: ext.w, h: ext.h };
+  return region ?? {
+    x: 0.1,
+    y: clamp01(1 - CAPTION_BOTTOM_INSET - ext.h),
+    w: ext.w,
+    h: ext.h
+  };
 }
 function resolveOverlayRegion(input) {
   const sz = lookupSafeZones(input.platform ?? "", input.aspect);
@@ -664,6 +684,7 @@ export {
   COVIEW_MIN_BAND_COVERAGE,
   COVIEW_MAX_BAND_COVERAGE,
   captionsBehindEligible,
+  CAPTION_BOTTOM_INSET,
   placeInLegalArea,
   resolveCaptionRegion,
   resolveOverlayRegion,

package/dist/{chunk-2PGLNTB7.js → chunk-A74FZCPY.js}

@@ -1,13 +1,15 @@
 import {
   ComponentRuntimeError
-} from "./chunk-LQUWKBST.js";
+} from "./chunk-ZVG446DJ.js";
 
-// ../execution/component-runtime/src/importPolicy.ts
-import { parse } from "@babel/parser";
+// ../execution/component-runtime/src/allowedImports.ts
 var COMPONENT_IMPORT_ALLOWLIST = Object.freeze([
   "react",
+  "react/jsx-runtime",
   "remotion",
   "@remotion/media",
+  "@remotion/layout-utils",
+  "@remotion/transitions",
   "@remotion/motion-blur",
   "@remotion/noise",
   "@remotion/paths",
@@ -17,10 +19,12 @@ var COMPONENT_IMPORT_ALLOWLIST = Object.freeze([
   "three/webgpu",
   "three/tsl",
   "@react-three/fiber",
-  "@react-three/drei",
   "@cueframe/animate",
   "gsap"
 ]);
+
+// ../execution/component-runtime/src/importPolicy.ts
+import { parse } from "@babel/parser";
 var ALLOWED_IMPORTS = new Set(COMPONENT_IMPORT_ALLOWLIST);
 var DENIED_NONDETERMINISTIC_MEMBERS = /* @__PURE__ */ new Set([
   "Math.random",
@@ -35,6 +39,14 @@ var DENIED_AMBIENT_CALLS = /* @__PURE__ */ new Set([
   "setTimeout",
   "setInterval"
 ]);
+var GUARDED_MEDIA_EXPORTS = /* @__PURE__ */ new Set(["Audio", "Html5Audio", "Html5Video", "OffthreadVideo", "Video"]);
+function importedName(specifier) {
+  const imported = specifier.imported;
+  if (specifier.type !== "ImportSpecifier" || !imported) return null;
+  if (imported.type === "Identifier" && typeof imported.name === "string") return imported.name;
+  if (imported.type === "StringLiteral" && typeof imported.value === "string") return imported.value;
+  return null;
+}
 function staticMemberPath(value) {
   if (!value || typeof value !== "object") return null;
   const node = value;
@@ -55,8 +67,9 @@ function denied(specifier) {
     `Component import is not allowed: ${JSON.stringify(specifier)}.`
   );
 }
-function assertComponentImportsAllowed(tsxSource) {
+function assertComponentImportsAllowed(tsxSource, graphicsApi) {
   let root;
+  let usesMediaTileScene = false;
   try {
     root = parse(tsxSource, {
       sourceType: "module",
@@ -80,6 +93,15 @@ function assertComponentImportsAllowed(tsxSource) {
     if ((type === "ImportDeclaration" || type === "ExportNamedDeclaration" || type === "ExportAllDeclaration") && node.source && typeof node.source === "object") {
       const specifier = node.source.value;
       if (typeof specifier === "string" && !ALLOWED_IMPORTS.has(specifier)) denied(specifier);
+      if ((specifier === "remotion" || specifier === "@remotion/media") && type === "ImportDeclaration") {
+        const specifiers = Array.isArray(node.specifiers) ? node.specifiers : [];
+        const mediaExport = specifiers.map(importedName).find((name) => name !== null && GUARDED_MEDIA_EXPORTS.has(name));
+        if (mediaExport) denied(`${specifier}.${mediaExport}; use @cueframe/animate MediaTileScene`);
+      }
+      if (specifier === "@cueframe/animate" && type === "ImportDeclaration") {
+        const specifiers = Array.isArray(node.specifiers) ? node.specifiers : [];
+        usesMediaTileScene ||= specifiers.map(importedName).some((name) => name === "MediaTileScene" || name === "ImageTileScene");
+      }
     }
     if (type === "ImportExpression") denied("dynamic import()");
     if (type === "CallExpression") {
@@ -89,6 +111,18 @@ function assertComponentImportsAllowed(tsxSource) {
       if (callee?.type === "Identifier" && typeof callee.name === "string" && DENIED_AMBIENT_CALLS.has(callee.name)) {
         denied(`ambient ${callee.name}`);
       }
+      const member = normalizedAmbientPath(node.callee);
+      const args = Array.isArray(node.arguments) ? node.arguments : [];
+      const tag = args[0]?.type === "StringLiteral" ? args[0].value : void 0;
+      if (member === "document.createElement" && (tag === "video" || tag === "audio")) {
+        denied(`raw ${tag} element; use @cueframe/animate MediaTileScene`);
+      }
+    }
+    if (type === "JSXOpeningElement") {
+      const name = node.name;
+      if (name?.type === "JSXIdentifier" && (name.name === "video" || name.name === "audio")) {
+        denied(`raw <${String(name.name)}> element; use @cueframe/animate MediaTileScene`);
+      }
     }
     if (type === "NewExpression") {
       const callee = node.callee;
@@ -124,6 +158,12 @@ function assertComponentImportsAllowed(tsxSource) {
     }
   };
   visit(root);
+  if (usesMediaTileScene && graphicsApi !== void 0 && graphicsApi !== "webgl2") {
+    throw new ComponentRuntimeError(
+      "component_graphics_mismatch",
+      "MediaTileScene requires manifest.graphics.api to be webgl2."
+    );
+  }
 }
 
 export {