@cueframe/kernel 0.0.1

package/dist/chunk-JD77Y2WM.js

@@ -0,0 +1,3423 @@
+import {
+  TransitionSeries,
+  linearTiming
+} from "./chunk-EAUSEGB7.js";
+import {
+  frostedGlassWipe,
+  spatialPush
+} from "./chunk-QGAWDLYX.js";
+import {
+  DashboardPopulate
+} from "./chunk-ZSZABOE5.js";
+import {
+  ACCENT_SOFT,
+  BG,
+  BG_DEEP,
+  BLUE,
+  BORDER,
+  BORDER_STRONG,
+  DANGER,
+  SUCCESS,
+  SURFACE,
+  SURFACE_HI,
+  SYN_COMMENT,
+  SYN_FN,
+  SYN_KEYWORD,
+  SYN_NUMBER,
+  SYN_STRING,
+  SYN_TEXT,
+  TEXT,
+  TEXT_HI,
+  TEXT_MUTED,
+  VIOLET,
+  WARNING
+} from "./chunk-CX2IIQ4R.js";
+
+// ../execution/primitives/src/scenes/changelog-bite/index.tsx
+import {
+  AbsoluteFill,
+  Easing,
+  interpolate,
+  spring,
+  useCurrentFrame,
+  useVideoConfig
+} from "remotion";
+var FONT_FAMILY = "inherit";
+var MONO_FAMILY = "monospace";
+var SOFT = Easing.bezier(0.16, 1, 0.3, 1);
+function ChangelogBite({
+  label = "New",
+  title = "Inline diff view",
+  oldContent,
+  newContent,
+  oldLines,
+  newLines,
+  format = "square",
+  background = BG,
+  cardBackground = SURFACE,
+  accent = ACCENT_SOFT,
+  speed = 1,
+  className
+}) {
+  const frame = useCurrentFrame() * speed;
+  const { fps, durationInFrames } = useVideoConfig();
+  const enterT = interpolate(frame, [0, 10], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: SOFT
+  });
+  const exitT = interpolate(
+    frame,
+    [durationInFrames - 15, durationInFrames - 1],
+    [0, 1],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: SOFT }
+  );
+  const cardScale = 0.95 + enterT * 0.05 - exitT * 0.05;
+  const cardOpacity = enterT * (1 - exitT);
+  const wipe = spring({
+    frame: frame - 60,
+    fps,
+    config: { damping: 18, mass: 0.9, stiffness: 90 },
+    durationInFrames: 50
+  });
+  const wipePct = wipe * 100;
+  const isSquare = format === "square";
+  const cardWidth = isSquare ? 880 : 880;
+  const cardHeight = isSquare ? 880 : 1100;
+  const oldNode = oldContent ?? (oldLines && oldLines.length > 0 ? /* @__PURE__ */ React.createElement(LinesPanel, { lines: oldLines, variant: "old", accent }) : /* @__PURE__ */ React.createElement(DefaultOldPanel, { accent }));
+  const newNode = newContent ?? (newLines && newLines.length > 0 ? /* @__PURE__ */ React.createElement(LinesPanel, { lines: newLines, variant: "new", accent }) : /* @__PURE__ */ React.createElement(DefaultNewPanel, { accent }));
+  return /* @__PURE__ */ React.createElement(
+    AbsoluteFill,
+    {
+      className,
+      style: {
+        background,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontFamily: FONT_FAMILY
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          width: cardWidth,
+          height: cardHeight,
+          borderRadius: 56,
+          background: cardBackground,
+          border: `1px solid ${accent}33`,
+          opacity: cardOpacity,
+          transform: `scale(${cardScale})`,
+          transformOrigin: "center",
+          willChange: "transform, opacity",
+          padding: 56,
+          display: "flex",
+          flexDirection: "column",
+          gap: 28,
+          position: "relative",
+          overflow: "hidden"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between"
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              color: "rgba(255,255,255,0.55)",
+              fontSize: 22,
+              letterSpacing: "0.02em"
+            }
+          },
+          title
+        ),
+        /* @__PURE__ */ React.createElement(PulsingPill, { label, color: accent, speed })
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            position: "relative",
+            flex: 1,
+            borderRadius: 32,
+            overflow: "hidden",
+            background: "rgba(8,7,12,0.6)",
+            border: "1px solid rgba(255,255,255,0.05)"
+          }
+        },
+        /* @__PURE__ */ React.createElement("div", { style: { position: "absolute", inset: 0 } }, newNode),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              clipPath: `inset(0 ${wipePct}% 0 0)`,
+              willChange: "clip-path"
+            }
+          },
+          oldNode
+        ),
+        wipePct > 0 && wipePct < 100 && /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              bottom: 0,
+              left: `calc(${wipePct}% - 60px)`,
+              width: 120,
+              background: "linear-gradient(90deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.0) 100%)",
+              backdropFilter: "blur(18px)",
+              WebkitBackdropFilter: "blur(18px)",
+              pointerEvents: "none"
+            }
+          }
+        ),
+        wipePct > 0 && wipePct < 100 && /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              bottom: 0,
+              left: `${wipePct}%`,
+              width: 1.5,
+              background: accent,
+              opacity: 0.55,
+              pointerEvents: "none"
+            }
+          }
+        )
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            display: "flex",
+            justifyContent: "space-between",
+            color: "rgba(255,255,255,0.4)",
+            fontSize: 16,
+            fontFamily: MONO_FAMILY
+          }
+        },
+        /* @__PURE__ */ React.createElement("span", { style: { opacity: 1 - wipe } }, "before"),
+        /* @__PURE__ */ React.createElement("span", { style: { opacity: wipe } }, "after")
+      )
+    )
+  );
+}
+function LinesPanel({
+  lines,
+  variant,
+  accent
+}) {
+  const isOld = variant === "old";
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        background: isOld ? BG_DEEP : "radial-gradient(ellipse at 50% 30%, rgba(255,179,142,0.10) 0%, rgba(10,9,14,1) 70%)",
+        padding: "44px 52px",
+        fontFamily: MONO_FAMILY,
+        color: isOld ? TEXT_MUTED : TEXT,
+        fontSize: 22,
+        lineHeight: 1.55,
+        whiteSpace: "pre"
+      }
+    },
+    lines.map((line, i) => /* @__PURE__ */ React.createElement("div", { key: i }, line === "" ? "\xA0" : line)),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          marginTop: 24,
+          display: "inline-block",
+          padding: "6px 14px",
+          borderRadius: 999,
+          background: isOld ? `${DANGER}1f` : `${accent}1a`,
+          border: isOld ? `1px solid ${DANGER}59` : `1px solid ${accent}55`,
+          color: isOld ? DANGER : accent,
+          fontSize: 13,
+          letterSpacing: "0.12em",
+          fontWeight: 700
+        }
+      },
+      isOld ? "BEFORE" : "AFTER"
+    )
+  );
+}
+function DefaultOldPanel({ accent }) {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        background: BG_DEEP,
+        padding: "44px 52px",
+        fontFamily: MONO_FAMILY,
+        color: TEXT_MUTED,
+        fontSize: 22,
+        lineHeight: 1.55,
+        whiteSpace: "pre"
+      }
+    },
+    /* @__PURE__ */ React.createElement("div", null, "function diff(a, b) {"),
+    /* @__PURE__ */ React.createElement("div", null, "  if (a === b) return null;"),
+    /* @__PURE__ */ React.createElement("div", null, "  return {"),
+    /* @__PURE__ */ React.createElement("div", null, "    before: a,"),
+    /* @__PURE__ */ React.createElement("div", null, "    after: b,"),
+    /* @__PURE__ */ React.createElement("div", null, "  };"),
+    /* @__PURE__ */ React.createElement("div", null, "}"),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          marginTop: 24,
+          display: "inline-block",
+          padding: "6px 14px",
+          borderRadius: 999,
+          background: `${DANGER}1f`,
+          border: `1px solid ${DANGER}59`,
+          color: DANGER,
+          fontSize: 13,
+          letterSpacing: "0.12em",
+          fontWeight: 700
+        }
+      },
+      "BEFORE"
+    ),
+    /* @__PURE__ */ React.createElement("span", { style: { display: "none" } }, accent)
+  );
+}
+function DefaultNewPanel({ accent }) {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        background: "radial-gradient(ellipse at 50% 30%, rgba(255,179,142,0.10) 0%, rgba(10,9,14,1) 70%)",
+        padding: "44px 52px",
+        fontFamily: MONO_FAMILY,
+        color: TEXT,
+        fontSize: 22,
+        lineHeight: 1.55,
+        whiteSpace: "pre"
+      }
+    },
+    /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("span", { style: { color: SYN_KEYWORD } }, "function"), " ", /* @__PURE__ */ React.createElement("span", { style: { color: SYN_FN } }, "diff"), "(a, b) {"),
+    /* @__PURE__ */ React.createElement("div", null, "  return ", /* @__PURE__ */ React.createElement("span", { style: { color: SYN_STRING } }, "visualDiff"), "(a, b);"),
+    /* @__PURE__ */ React.createElement("div", null, "}"),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          marginTop: 24,
+          display: "inline-block",
+          padding: "6px 14px",
+          borderRadius: 999,
+          background: `${accent}1a`,
+          border: `1px solid ${accent}55`,
+          color: accent,
+          fontSize: 13,
+          letterSpacing: "0.12em",
+          fontWeight: 700
+        }
+      },
+      "AFTER"
+    )
+  );
+}
+function PulsingPill({
+  label,
+  color,
+  speed
+}) {
+  const frame = useCurrentFrame() * speed;
+  const wave = (Math.sin(frame / 8) + 1) / 2;
+  const dotScale = 0.92 + wave * 0.16;
+  const ringPhase = frame % 60 / 60;
+  const ringScale = 1 + ringPhase * 1.6;
+  const ringOpacity = (1 - ringPhase) * 0.6;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 12,
+        padding: "10px 18px 10px 14px",
+        borderRadius: 999,
+        background: `${color}1a`,
+        border: `1px solid ${color}55`,
+        color,
+        fontSize: 16,
+        fontWeight: 600,
+        letterSpacing: "0.02em"
+      }
+    },
+    /* @__PURE__ */ React.createElement("div", { style: { position: "relative", width: 12, height: 12 } }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          inset: 0,
+          borderRadius: "50%",
+          background: color,
+          opacity: ringOpacity,
+          transform: `scale(${ringScale})`
+        }
+      }
+    ), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          inset: 0,
+          borderRadius: "50%",
+          background: color,
+          transform: `scale(${dotScale})`
+        }
+      }
+    )),
+    label
+  );
+}
+
+// ../execution/primitives/src/scenes/live-code-compilation/index.tsx
+import { useCurrentFrame as useCurrentFrame2 } from "remotion";
+var FONT_FAMILY2 = "inherit";
+var MONO_FAMILY2 = "monospace";
+var EVENTS = [
+  {
+    code: "export function Button() {\n  return (\n    <button",
+    ui: {}
+  },
+  { code: "\n      style={{", ui: {} },
+  {
+    code: '\n        background: "#7b93b0",',
+    ui: { background: "#7b93b0" }
+  },
+  {
+    code: '\n        color: "white",',
+    ui: { color: "white" }
+  },
+  {
+    code: '\n        padding: "12px 28px",',
+    ui: { padding: "12px 28px" }
+  },
+  {
+    code: '\n        borderRadius: "999px",',
+    ui: { borderRadius: "999px" }
+  },
+  {
+    code: "\n        fontWeight: 600,",
+    ui: { fontWeight: 600 }
+  },
+  {
+    code: "\n      }}\n    >\n      Ship it\n    </button>\n  );\n}",
+    ui: { label: "Ship it" }
+  }
+];
+var CHARS_PER_FRAME = 1.6;
+var DWELL_FRAMES = 5;
+var INITIAL_OFFSET = 8;
+var TIMELINE = (() => {
+  let cursor = INITIAL_OFFSET;
+  return EVENTS.map((ev) => {
+    const start = cursor;
+    const end = start + Math.ceil(ev.code.length / CHARS_PER_FRAME);
+    cursor = end + DWELL_FRAMES;
+    return { ...ev, start, end };
+  });
+})();
+var TIMELINE_END = TIMELINE[TIMELINE.length - 1].end;
+function highlightLine(line, accentColor) {
+  const tokens = [];
+  const regex = /(\bexport\b|\bfunction\b|\breturn\b)|("[^"]*")|(\b[a-zA-Z_][a-zA-Z0-9_]*)(?=:)|(\{|\}|\(|\)|<|>|\/)|([0-9]+)/g;
+  let lastIndex = 0;
+  let m = regex.exec(line);
+  while (m !== null) {
+    if (m.index > lastIndex) {
+      tokens.push({
+        text: line.slice(lastIndex, m.index),
+        color: SYN_TEXT
+      });
+    }
+    if (m[1]) tokens.push({ text: m[1], color: SYN_KEYWORD });
+    else if (m[2]) tokens.push({ text: m[2], color: SYN_STRING });
+    else if (m[3]) tokens.push({ text: m[3], color: accentColor });
+    else if (m[4]) tokens.push({ text: m[4], color: SYN_COMMENT });
+    else if (m[5]) tokens.push({ text: m[5], color: SYN_NUMBER });
+    lastIndex = regex.lastIndex;
+    m = regex.exec(line);
+  }
+  if (lastIndex < line.length) {
+    tokens.push({ text: line.slice(lastIndex), color: SYN_TEXT });
+  }
+  return tokens;
+}
+function LiveCodeCompilation({
+  accentColor = "#7b93b0",
+  speed = 1,
+  className
+}) {
+  const frame = useCurrentFrame2() * speed;
+  let visibleCode = "";
+  const ui = {};
+  for (const t of TIMELINE) {
+    if (frame < t.start) break;
+    const elapsed = frame - t.start;
+    const charsTyped = Math.min(
+      t.code.length,
+      Math.floor(elapsed * CHARS_PER_FRAME)
+    );
+    visibleCode += t.code.slice(0, charsTyped);
+    if (frame >= t.end) Object.assign(ui, t.ui);
+  }
+  const lines = visibleCode.split("\n");
+  const buttonLabel = ui.label ?? "Button";
+  const cursorVisible = frame < TIMELINE_END && Math.floor(frame / 12) % 2 === 0;
+  const lastLineIndex = lines.length - 1;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className,
+      style: {
+        position: "absolute",
+        inset: 0,
+        background: BG,
+        overflow: "hidden",
+        fontFamily: FONT_FAMILY2,
+        display: "flex"
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          inset: 0,
+          background: `radial-gradient(ellipse at 20% 30%, ${BLUE}14, transparent 60%), radial-gradient(ellipse at 80% 70%, ${VIOLET}0f, transparent 60%)`
+        }
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          flex: 1,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: 48,
+          position: "relative"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            width: "100%",
+            maxWidth: 560,
+            position: "relative",
+            borderRadius: 14,
+            padding: 1,
+            background: "linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.06) 100%)"
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              borderRadius: 13,
+              background: "rgba(12,12,14,0.85)",
+              backdropFilter: "blur(20px)",
+              overflow: "hidden"
+            }
+          },
+          /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              style: {
+                height: 38,
+                display: "flex",
+                alignItems: "center",
+                padding: "0 16px",
+                borderBottom: "1px solid rgba(255,255,255,0.06)",
+                gap: 8
+              }
+            },
+            /* @__PURE__ */ React.createElement(
+              "div",
+              {
+                style: {
+                  width: 11,
+                  height: 11,
+                  borderRadius: 6,
+                  background: "#ff5f57",
+                  opacity: 0.6
+                }
+              }
+            ),
+            /* @__PURE__ */ React.createElement(
+              "div",
+              {
+                style: {
+                  width: 11,
+                  height: 11,
+                  borderRadius: 6,
+                  background: "#febc2e",
+                  opacity: 0.6
+                }
+              }
+            ),
+            /* @__PURE__ */ React.createElement(
+              "div",
+              {
+                style: {
+                  width: 11,
+                  height: 11,
+                  borderRadius: 6,
+                  background: "#28c840",
+                  opacity: 0.6
+                }
+              }
+            ),
+            /* @__PURE__ */ React.createElement(
+              "div",
+              {
+                style: {
+                  marginLeft: 12,
+                  fontSize: 12,
+                  color: "rgba(255,255,255,0.45)",
+                  fontFamily: MONO_FAMILY2
+                }
+              },
+              "Button.tsx"
+            )
+          ),
+          /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              style: {
+                padding: "20px 22px",
+                fontFamily: MONO_FAMILY2,
+                fontSize: 14,
+                lineHeight: 1.65,
+                color: SYN_TEXT,
+                minHeight: 360
+              }
+            },
+            lines.map((line, i) => {
+              const tokens = highlightLine(line, accentColor);
+              const isLast = i === lastLineIndex;
+              return /* @__PURE__ */ React.createElement("div", { key: i, style: { display: "flex", whiteSpace: "pre" } }, /* @__PURE__ */ React.createElement(
+                "span",
+                {
+                  style: {
+                    width: 28,
+                    color: "rgba(255,255,255,0.2)",
+                    userSelect: "none",
+                    flexShrink: 0
+                  }
+                },
+                i + 1
+              ), /* @__PURE__ */ React.createElement("span", null, tokens.length === 0 ? /* @__PURE__ */ React.createElement("span", null, " ") : tokens.map((t, j) => /* @__PURE__ */ React.createElement("span", { key: j, style: { color: t.color } }, t.text)), isLast && cursorVisible && /* @__PURE__ */ React.createElement(
+                "span",
+                {
+                  style: {
+                    display: "inline-block",
+                    width: 8,
+                    height: 16,
+                    marginLeft: 1,
+                    verticalAlign: "text-bottom",
+                    background: accentColor
+                  }
+                }
+              )));
+            })
+          )
+        )
+      )
+    ),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          flex: 1,
+          position: "relative",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          borderLeft: "1px solid rgba(255,255,255,0.05)",
+          background: "repeating-conic-gradient(rgba(255,255,255,0.018) 0deg 90deg, transparent 90deg 180deg) 0 0 / 28px 28px"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            top: 24,
+            left: 24,
+            display: "flex",
+            alignItems: "center",
+            gap: 8
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              width: 8,
+              height: 8,
+              borderRadius: 4,
+              background: SUCCESS
+            }
+          }
+        ),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              fontSize: 11,
+              fontFamily: MONO_FAMILY2,
+              color: "rgba(255,255,255,0.5)",
+              textTransform: "uppercase",
+              letterSpacing: "0.08em"
+            }
+          },
+          "Preview \xB7 HMR"
+        )
+      ),
+      /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          type: "button",
+          style: {
+            background: ui.background ?? "rgba(255,255,255,0.06)",
+            color: ui.color ?? "rgba(255,255,255,0.4)",
+            padding: ui.padding ?? "10px 20px",
+            borderRadius: ui.borderRadius ?? "4px",
+            fontWeight: ui.fontWeight ?? 400,
+            fontSize: 18,
+            fontFamily: FONT_FAMILY2,
+            border: ui.background ? "none" : "1px dashed rgba(255,255,255,0.15)",
+            cursor: "pointer",
+            transition: "none"
+          }
+        },
+        buttonLabel
+      )
+    )
+  );
+}
+
+// ../execution/primitives/src/scenes/product-launch-trailer/index.tsx
+import {
+  AbsoluteFill as AbsoluteFill2,
+  Easing as Easing2,
+  interpolate as interpolate2,
+  random,
+  Sequence,
+  spring as spring2,
+  useCurrentFrame as useCurrentFrame3,
+  useVideoConfig as useVideoConfig2
+} from "remotion";
+var FONT_FAMILY3 = "inherit";
+var MONO_FAMILY3 = "monospace";
+var SOFT2 = Easing2.bezier(0.16, 1, 0.3, 1);
+var T = {
+  pulseStart: 0,
+  pulseEnd: 50,
+  zoomStart: 38,
+  zoomEnd: 78,
+  shellStart: 70,
+  flyStart: 110,
+  flyEnd: 200,
+  outroStart: 190,
+  outroEnd: 240
+};
+function ProductLaunchTrailer({
+  logoLabel = "R",
+  productName = "Remocn",
+  versionLabel = "v1.0 is live",
+  accentPeach = ACCENT_SOFT,
+  accentLavender = VIOLET,
+  accentMint = SUCCESS,
+  background = BG,
+  speed = 1,
+  className
+}) {
+  return /* @__PURE__ */ React.createElement(AbsoluteFill2, { className, style: { background } }, /* @__PURE__ */ React.createElement(Sequence, { from: T.pulseStart, durationInFrames: T.zoomEnd - T.pulseStart }, /* @__PURE__ */ React.createElement(
+    PulseLogo,
+    {
+      label: logoLabel,
+      name: productName,
+      accentLavender,
+      background,
+      speed
+    }
+  )), /* @__PURE__ */ React.createElement(Sequence, { from: T.shellStart, durationInFrames: T.outroEnd - T.shellStart }, /* @__PURE__ */ React.createElement(
+    AppShellFlyover,
+    {
+      accentPeach,
+      accentLavender,
+      accentMint,
+      background,
+      speed,
+      flyStartLocal: T.flyStart - T.shellStart,
+      flyEndLocal: T.flyEnd - T.shellStart,
+      outroStartLocal: T.outroStart - T.shellStart
+    }
+  )), /* @__PURE__ */ React.createElement(
+    Sequence,
+    {
+      from: T.outroStart,
+      durationInFrames: T.outroEnd - T.outroStart + 1
+    },
+    /* @__PURE__ */ React.createElement(
+      Outro,
+      {
+        versionLabel,
+        accentMint,
+        accentPeach,
+        accentLavender,
+        speed
+      }
+    )
+  ));
+}
+function PulseLogo({
+  label,
+  name,
+  accentLavender,
+  background,
+  speed
+}) {
+  const frame = useCurrentFrame3() * speed;
+  const localDuration = T.zoomEnd - T.pulseStart;
+  const pulse = (Math.sin(frame / 6) + 1) / 2;
+  const zoomLocal = Math.max(0, frame - (T.zoomStart - T.pulseStart));
+  const zoomDuration = T.zoomEnd - T.zoomStart;
+  const zoom = interpolate2(zoomLocal, [0, zoomDuration], [1, 14], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing2.bezier(0.7, 0, 0.84, 0)
+  });
+  const fade = interpolate2(zoomLocal, [zoomDuration * 0.5, zoomDuration], [1, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  const baseScale = 0.96 + pulse * 0.04;
+  const glowAlpha = 0.35 + pulse * 0.4;
+  const labelOpacity = interpolate2(frame, [4, 18], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  return /* @__PURE__ */ React.createElement(
+    AbsoluteFill2,
+    {
+      style: {
+        // Exposure lift — the scene graded ~1.5 stops under launch-video norm.
+        filter: "brightness(1.28) contrast(1.03)",
+        background,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          transform: `scale(${zoom * baseScale})`,
+          opacity: fade,
+          willChange: "transform, opacity",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: 28
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            width: 200,
+            height: 200,
+            borderRadius: 56,
+            background: "linear-gradient(160deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 100%)",
+            border: `1px solid ${accentLavender}55`,
+            boxShadow: `0 0 ${60 + pulse * 80}px ${accentLavender}${toHex(
+              glowAlpha
+            )}, inset 0 1px 0 rgba(255,255,255,0.12)`,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            color: "white",
+            fontFamily: FONT_FAMILY3,
+            fontSize: 112,
+            fontWeight: 700,
+            letterSpacing: "-0.06em"
+          }
+        },
+        label
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            opacity: labelOpacity,
+            color: "rgba(255,255,255,0.92)",
+            fontFamily: FONT_FAMILY3,
+            fontSize: 28,
+            fontWeight: 500,
+            letterSpacing: "0.02em"
+          }
+        },
+        name
+      )
+    ),
+    /* @__PURE__ */ React.createElement("span", { style: { display: "none" } }, localDuration)
+  );
+}
+function AppShellFlyover({
+  accentPeach,
+  accentLavender,
+  accentMint,
+  background,
+  speed,
+  flyStartLocal,
+  flyEndLocal,
+  outroStartLocal
+}) {
+  const frame = useCurrentFrame3() * speed;
+  const enter = interpolate2(frame, [0, 14], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: SOFT2
+  });
+  const flyT = interpolate2(frame, [flyStartLocal, flyEndLocal], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: SOFT2
+  });
+  const outroT = interpolate2(
+    frame,
+    [outroStartLocal, outroStartLocal + 30],
+    [0, 1],
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+      easing: SOFT2
+    }
+  );
+  const rx = interpolate2(flyT, [0, 1], [0, -8]) * (1 - outroT);
+  const ry = interpolate2(flyT, [0, 1], [-6, 6]) * (1 - outroT);
+  const tz = interpolate2(flyT, [0, 1], [-220, 80]) * (1 - outroT) + outroT * -360;
+  const scaleBoost = interpolate2(flyT, [0, 1], [0.92, 1.04]) * (1 - outroT) + outroT * 0.84;
+  const shadowBlur = Math.max(20, 28 + tz * 0.4);
+  const shadowOpacity = 0.35 + Math.max(0, tz / 180) * 0.35;
+  return /* @__PURE__ */ React.createElement(
+    AbsoluteFill2,
+    {
+      style: {
+        // Exposure lift — the scene graded ~1.5 stops under launch-video norm.
+        filter: "brightness(1.28) contrast(1.03)",
+        background,
+        opacity: enter,
+        perspective: 2e3,
+        perspectiveOrigin: "50% 45%"
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          inset: 0,
+          transformStyle: "preserve-3d",
+          transform: `rotateX(${rx}deg) rotateY(${ry}deg) translateZ(${tz}px) scale(${scaleBoost})`,
+          willChange: "transform"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            inset: 40,
+            borderRadius: 24,
+            border: `1px solid ${accentLavender}1f`,
+            background: "linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0) 100%)"
+          }
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            left: 80,
+            top: 110,
+            width: 520,
+            height: 500,
+            transform: "translateZ(20px)",
+            filter: `drop-shadow(0 22px ${shadowBlur}px ${accentLavender}${toHex(
+              shadowOpacity
+            )})`
+          }
+        },
+        /* @__PURE__ */ React.createElement(FauxCodeBlock, { accentLavender, accentMint })
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            right: 80,
+            top: 110,
+            width: 540,
+            height: 500,
+            transform: "translateZ(40px)",
+            filter: `drop-shadow(0 22px ${shadowBlur}px ${accentPeach}${toHex(
+              shadowOpacity
+            )})`
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          FauxBentoGrid,
+          {
+            accentPeach,
+            accentLavender,
+            accentMint,
+            speed
+          }
+        )
+      )
+    )
+  );
+}
+function FauxCodeBlock({
+  accentLavender,
+  accentMint
+}) {
+  const frame = useCurrentFrame3();
+  const lines = [
+    { t: "import { Trailer } from 'remocn'", c: SYN_KEYWORD },
+    { t: "", c: "" },
+    { t: "export const Scene = () => (", c: SYN_TEXT },
+    { t: "  <Trailer", c: SYN_TEXT },
+    { t: `    label="v1.0"`, c: SYN_STRING },
+    { t: `    accent="lavender"`, c: SYN_NUMBER },
+    { t: "  />", c: SYN_TEXT },
+    { t: ")", c: SYN_TEXT }
+  ];
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        borderRadius: 20,
+        background: "rgba(20,19,24,0.78)",
+        backdropFilter: "blur(18px)",
+        WebkitBackdropFilter: "blur(18px)",
+        border: `1px solid ${accentLavender}33`,
+        overflow: "hidden",
+        fontFamily: MONO_FAMILY3
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          height: 38,
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          padding: "0 16px",
+          borderBottom: "1px solid rgba(255,255,255,0.06)"
+        }
+      },
+      [ACCENT_SOFT, WARNING, accentMint].map((c) => /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          key: c,
+          style: {
+            width: 10,
+            height: 10,
+            borderRadius: "50%",
+            background: c,
+            opacity: 0.85
+          }
+        }
+      )),
+      /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          style: {
+            marginLeft: 12,
+            color: "rgba(255,255,255,0.45)",
+            fontSize: 12
+          }
+        },
+        "scene.tsx"
+      )
+    ),
+    /* @__PURE__ */ React.createElement("div", { style: { padding: "20px 22px", display: "flex", flexDirection: "column", gap: 6 } }, lines.map((line, i) => {
+      const local = frame - 14 - i * 5;
+      const o = interpolate2(local, [0, 10], [0, 1], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp"
+      });
+      const x = interpolate2(local, [0, 10], [12, 0], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp"
+      });
+      return /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          key: i,
+          style: {
+            display: "flex",
+            gap: 14,
+            opacity: o,
+            transform: `translateX(${x}px)`,
+            fontSize: 15,
+            lineHeight: "22px"
+          }
+        },
+        /* @__PURE__ */ React.createElement("span", { style: { color: BORDER_STRONG, width: 18, textAlign: "right" } }, i + 1),
+        /* @__PURE__ */ React.createElement("span", { style: { color: line.c || SYN_TEXT, whiteSpace: "pre" } }, line.t || " ")
+      );
+    }))
+  );
+}
+function FauxBentoGrid({
+  accentPeach,
+  accentLavender,
+  accentMint,
+  speed
+}) {
+  const frame = useCurrentFrame3() * speed;
+  const { fps } = useVideoConfig2();
+  const cards = [
+    { title: "Animations", body: "Spring-tuned", tint: accentLavender, span: 2 },
+    { title: "Transitions", body: "Cinematic", tint: accentPeach, span: 1 },
+    { title: "Backgrounds", body: "Volumetric", tint: accentMint, span: 1 },
+    { title: "Compositions", body: "Production-ready", tint: accentLavender, span: 2 }
+  ];
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        display: "grid",
+        gridTemplateColumns: "1fr 1fr",
+        gap: 16
+      }
+    },
+    cards.map((c, i) => {
+      const progress = spring2({
+        frame: frame - 30 - i * 8,
+        fps,
+        config: { damping: 14, stiffness: 110, mass: 0.7 },
+        durationInFrames: 28
+      });
+      return /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          key: c.title,
+          style: {
+            gridColumn: c.span === 2 ? "span 2" : "span 1",
+            minHeight: 110,
+            padding: 22,
+            borderRadius: 18,
+            background: "linear-gradient(160deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%)",
+            border: `1px solid ${c.tint}33`,
+            opacity: progress,
+            transform: `translateY(${(1 - progress) * 18}px) scale(${0.92 + progress * 0.08})`,
+            transformOrigin: "center",
+            willChange: "transform, opacity",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "flex-end"
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              color: TEXT_HI,
+              fontFamily: FONT_FAMILY3,
+              fontSize: 22,
+              fontWeight: 600,
+              letterSpacing: "-0.02em"
+            }
+          },
+          c.title
+        ),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              color: `${c.tint}cc`,
+              fontFamily: FONT_FAMILY3,
+              fontSize: 13,
+              marginTop: 2
+            }
+          },
+          c.body
+        )
+      );
+    })
+  );
+}
+function Outro({
+  versionLabel,
+  accentMint,
+  accentPeach,
+  accentLavender,
+  speed
+}) {
+  const frame = useCurrentFrame3() * speed;
+  const { fps } = useVideoConfig2();
+  const drop = spring2({
+    frame: frame - 6,
+    fps,
+    config: { damping: 14, stiffness: 110, mass: 0.7 },
+    durationInFrames: 28
+  });
+  const headingY = interpolate2(drop, [0, 1], [-40, 0]);
+  const headingOpacity = interpolate2(drop, [0, 1], [0, 1]);
+  const particles = Array.from({ length: 70 }, (_, i) => {
+    const angle = random(`pl:${i}:a`) * Math.PI * 2;
+    const v = 9 + random(`pl:${i}:v`) * 9;
+    const sz = 5 + random(`pl:${i}:s`) * 7;
+    const f = Math.max(0, frame - 14 - Math.floor(random(`pl:${i}:d`) * 6));
+    const cx = 640 + Math.cos(angle) * v * f;
+    const cy = 280 + Math.sin(angle) * v * f + 0.4 * f * f;
+    const colors = [accentMint, accentPeach, accentLavender, WARNING];
+    const color = colors[Math.floor(random(`pl:${i}:c`) * colors.length)];
+    const opacity = interpolate2(f, [0, 4, 38, 50], [0, 1, 1, 0], {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp"
+    });
+    return { cx, cy, sz, color, opacity, key: i };
+  });
+  return /* @__PURE__ */ React.createElement(AbsoluteFill2, { style: { pointerEvents: "none" } }, /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      width: 1280,
+      height: 720,
+      viewBox: "0 0 1280 720",
+      style: { position: "absolute", inset: 0 }
+    },
+    particles.map((p) => /* @__PURE__ */ React.createElement(
+      "rect",
+      {
+        key: p.key,
+        x: p.cx - p.sz / 2,
+        y: p.cy - p.sz / 2,
+        width: p.sz,
+        height: p.sz * 0.55,
+        rx: 1,
+        fill: p.color,
+        opacity: p.opacity
+      }
+    ))
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        top: 240,
+        textAlign: "center",
+        transform: `translateY(${headingY}px)`,
+        opacity: headingOpacity,
+        willChange: "transform, opacity"
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          fontFamily: FONT_FAMILY3,
+          fontSize: 96,
+          fontWeight: 700,
+          letterSpacing: "-0.04em",
+          color: TEXT_HI
+        }
+      },
+      versionLabel
+    )
+  ));
+}
+function toHex(alpha) {
+  const clamped = Math.max(0, Math.min(1, alpha));
+  return Math.round(clamped * 255).toString(16).padStart(2, "0");
+}
+
+// ../execution/primitives/src/scenes/hero-device-assemble/index.tsx
+import { interpolate as interpolate3, spring as spring3, useCurrentFrame as useCurrentFrame4, useVideoConfig as useVideoConfig3 } from "remotion";
+var FONT_FAMILY4 = "inherit";
+function MockUI({ accentColor }) {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        display: "flex",
+        flexDirection: "column",
+        background: BG,
+        fontFamily: FONT_FAMILY4,
+        color: "white",
+        overflow: "hidden"
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          height: "10%",
+          background: SURFACE,
+          borderBottom: "1px solid rgba(255,255,255,0.06)",
+          display: "flex",
+          alignItems: "center",
+          padding: "0 16px",
+          gap: 8
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            width: 10,
+            height: 10,
+            borderRadius: "50%",
+            background: "rgba(255,255,255,0.18)"
+          }
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            width: 10,
+            height: 10,
+            borderRadius: "50%",
+            background: "rgba(255,255,255,0.18)"
+          }
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            width: 10,
+            height: 10,
+            borderRadius: "50%",
+            background: "rgba(255,255,255,0.18)"
+          }
+        }
+      )
+    ),
+    /* @__PURE__ */ React.createElement("div", { style: { flex: 1, display: "flex" } }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          width: "22%",
+          background: BG,
+          borderRight: "1px solid rgba(255,255,255,0.05)",
+          padding: 16,
+          display: "flex",
+          flexDirection: "column",
+          gap: 10
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            height: 12,
+            borderRadius: 4,
+            background: accentColor,
+            opacity: 0.85,
+            width: "70%"
+          }
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            height: 10,
+            borderRadius: 4,
+            background: "rgba(255,255,255,0.1)",
+            width: "85%"
+          }
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            height: 10,
+            borderRadius: 4,
+            background: "rgba(255,255,255,0.08)",
+            width: "60%"
+          }
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            height: 10,
+            borderRadius: 4,
+            background: "rgba(255,255,255,0.08)",
+            width: "75%"
+          }
+        }
+      )
+    ), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          flex: 1,
+          padding: 24,
+          display: "flex",
+          flexDirection: "column",
+          gap: 16
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            height: 18,
+            width: "40%",
+            background: "rgba(255,255,255,0.85)",
+            borderRadius: 4
+          }
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            height: 10,
+            width: "65%",
+            background: "rgba(255,255,255,0.18)",
+            borderRadius: 4
+          }
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            display: "grid",
+            gridTemplateColumns: "1fr 1fr 1fr",
+            gap: 12,
+            marginTop: 12
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              height: 90,
+              borderRadius: 8,
+              background: "linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02))",
+              border: "1px solid rgba(255,255,255,0.06)"
+            }
+          }
+        ),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              height: 90,
+              borderRadius: 8,
+              background: `linear-gradient(180deg, ${accentColor}33, ${accentColor}11)`,
+              border: `1px solid ${accentColor}55`
+            }
+          }
+        ),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              height: 90,
+              borderRadius: 8,
+              background: "linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02))",
+              border: "1px solid rgba(255,255,255,0.06)"
+            }
+          }
+        )
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            flex: 1,
+            borderRadius: 8,
+            background: "linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01))",
+            border: "1px solid rgba(255,255,255,0.06)"
+          }
+        }
+      )
+    ))
+  );
+}
+function HeroDeviceAssemble({
+  assembleStart = 0,
+  device = "laptop",
+  accentColor = SUCCESS,
+  speed = 1,
+  className
+}) {
+  const frame = useCurrentFrame4() * speed;
+  const { fps } = useVideoConfig3();
+  const assemble = spring3({
+    frame: frame - assembleStart,
+    fps,
+    config: { mass: 1.4, damping: 12, stiffness: 90 },
+    durationInFrames: 60
+  });
+  const lidZ = interpolate3(assemble, [0, 1], [1e3, 0]);
+  const baseZ = interpolate3(assemble, [0, 1], [-800, 0]);
+  const bezelZ = interpolate3(assemble, [0, 1], [600, 0]);
+  const screenZ = interpolate3(assemble, [0, 1], [300, 0]);
+  const rotX = interpolate3(assemble, [0, 1], [-22, 0]);
+  const rotY = interpolate3(assemble, [0, 1], [28, 0]);
+  const layerOpacity = interpolate3(assemble, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  const settleFrame = assembleStart + 45;
+  const screenWake = interpolate3(
+    frame,
+    [settleFrame, settleFrame + 18],
+    [0, 1],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+  );
+  const shimmerProgress = interpolate3(
+    frame,
+    [settleFrame + 6, settleFrame + 30],
+    [-1, 2],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+  );
+  const isPhone = device === "phone";
+  const deviceW = isPhone ? 320 : 760;
+  const deviceH = isPhone ? 640 : 470;
+  const screenInset = isPhone ? 12 : 18;
+  const bezelRadius = isPhone ? 36 : 14;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className,
+      style: {
+        position: "absolute",
+        inset: 0,
+        overflow: "hidden",
+        background: `radial-gradient(ellipse at center, ${SURFACE} 0%, ${BG_DEEP} 70%)`,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        perspective: 2e3,
+        fontFamily: FONT_FAMILY4
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          position: "relative",
+          width: deviceW,
+          height: deviceH,
+          transformStyle: "preserve-3d",
+          transform: `rotateX(${rotX}deg) rotateY(${rotY}deg)`,
+          willChange: "transform"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            inset: 0,
+            transform: `translateZ(${lidZ - 8}px)`,
+            background: `linear-gradient(180deg, ${SURFACE_HI} 0%, ${BG} 100%)`,
+            borderRadius: bezelRadius + 4,
+            border: "1px solid rgba(255,255,255,0.08)",
+            opacity: layerOpacity
+          }
+        }
+      ),
+      !isPhone && /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            left: -40,
+            right: -40,
+            bottom: -28,
+            height: 28,
+            transform: `translateZ(${baseZ}px) rotateX(78deg)`,
+            transformOrigin: "top center",
+            background: `linear-gradient(180deg, ${SURFACE_HI} 0%, ${BG} 100%)`,
+            borderRadius: "0 0 12px 12px",
+            border: "1px solid rgba(255,255,255,0.06)",
+            opacity: layerOpacity
+          }
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            inset: 0,
+            transform: `translateZ(${bezelZ}px)`,
+            background: BG_DEEP,
+            borderRadius: bezelRadius,
+            border: "1px solid rgba(255,255,255,0.12)",
+            opacity: layerOpacity
+          }
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            inset: screenInset,
+            transform: `translateZ(${screenZ}px)`,
+            borderRadius: bezelRadius - 6,
+            overflow: "hidden",
+            background: "black",
+            opacity: layerOpacity
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              background: "#000",
+              opacity: 1 - screenWake
+            }
+          }
+        ),
+        /* @__PURE__ */ React.createElement("div", { style: { position: "absolute", inset: 0, opacity: screenWake } }, /* @__PURE__ */ React.createElement(MockUI, { accentColor })),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              background: `linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.18) 50%, transparent 60%)`,
+              transform: `translateX(${shimmerProgress * 100}%)`,
+              mixBlendMode: "screen",
+              pointerEvents: "none"
+            }
+          }
+        )
+      )
+    )
+  );
+}
+
+// ../execution/primitives/src/scenes/pricing-tier-focus/index.tsx
+import { interpolate as interpolate4, spring as spring4, useCurrentFrame as useCurrentFrame5, useVideoConfig as useVideoConfig4 } from "remotion";
+var FONT_FAMILY5 = "inherit";
+var TIERS = [
+  {
+    name: "Free",
+    price: "$0",
+    period: "/mo",
+    features: ["1 project", "Community support", "1 GB storage"],
+    cta: "Get started"
+  },
+  {
+    name: "Pro",
+    price: "$24",
+    period: "/mo",
+    features: [
+      "Unlimited projects",
+      "Priority support",
+      "100 GB storage",
+      "Advanced analytics"
+    ],
+    cta: "Buy Pro"
+  },
+  {
+    name: "Enterprise",
+    price: "$99",
+    period: "/mo",
+    features: ["SSO & SAML", "Dedicated manager", "Unlimited storage"],
+    cta: "Contact sales"
+  }
+];
+function PricingTierFocus({
+  focusedTier = 1,
+  accentColor = SUCCESS,
+  speed = 1,
+  className
+}) {
+  const frame = useCurrentFrame5() * speed;
+  const { fps } = useVideoConfig4();
+  const focusedIdx = Number(focusedTier);
+  const focusStart = 30;
+  const focusProgress = spring4({
+    frame: frame - focusStart,
+    fps,
+    config: { mass: 1, damping: 18, stiffness: 90 },
+    durationInFrames: 50
+  });
+  const focusScale = interpolate4(focusProgress, [0, 1], [1, 1.05]);
+  const focusLift = interpolate4(focusProgress, [0, 1], [0, -20]);
+  const sideBrightness = interpolate4(focusProgress, [0, 1], [1, 0.4]);
+  const sideBlur = interpolate4(focusProgress, [0, 1], [0, 4]);
+  const sideScale = interpolate4(focusProgress, [0, 1], [1, 0.95]);
+  const shimmerStart = 90;
+  const shimmerPos = interpolate4(
+    frame,
+    [shimmerStart, shimmerStart + 40],
+    [-150, 250],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+  );
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className,
+      style: {
+        position: "absolute",
+        inset: 0,
+        background: BG,
+        fontFamily: FONT_FAMILY5,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 60,
+        gap: 28
+      }
+    },
+    TIERS.map((tier, i) => {
+      const isFocused = i === focusedIdx;
+      const scale = isFocused ? focusScale : sideScale;
+      const lift = isFocused ? focusLift : 0;
+      const brightness = isFocused ? 1 : sideBrightness;
+      const blurPx = isFocused ? 0 : sideBlur;
+      const z8 = isFocused ? 10 : 1;
+      return /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          key: tier.name,
+          style: {
+            position: "relative",
+            flex: "1 1 0",
+            maxWidth: 320,
+            minHeight: 460,
+            padding: 32,
+            borderRadius: 20,
+            background: `linear-gradient(180deg, ${SURFACE} 0%, ${BG} 100%)`,
+            border: isFocused ? `1px solid ${accentColor}88` : `1px solid ${BORDER}`,
+            transform: `translateY(${lift}px) scale(${scale})`,
+            filter: `brightness(${brightness}) blur(${blurPx}px)`,
+            zIndex: z8,
+            display: "flex",
+            flexDirection: "column",
+            willChange: "transform, filter"
+          }
+        },
+        isFocused && /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 16,
+              right: 16,
+              padding: "4px 10px",
+              borderRadius: 999,
+              background: accentColor,
+              color: BG,
+              fontSize: 11,
+              fontWeight: 700,
+              letterSpacing: "0.04em",
+              textTransform: "uppercase"
+            }
+          },
+          "Popular"
+        ),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              fontSize: 14,
+              fontWeight: 600,
+              color: "rgba(255,255,255,0.6)",
+              letterSpacing: "0.04em",
+              textTransform: "uppercase"
+            }
+          },
+          tier.name
+        ),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              marginTop: 12,
+              display: "flex",
+              alignItems: "baseline",
+              gap: 4
+            }
+          },
+          /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              style: {
+                fontSize: 56,
+                fontWeight: 700,
+                color: TEXT_HI,
+                letterSpacing: "-0.04em",
+                lineHeight: 1
+              }
+            },
+            tier.price
+          ),
+          /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              style: {
+                fontSize: 16,
+                color: "rgba(255,255,255,0.5)",
+                fontWeight: 500
+              }
+            },
+            tier.period
+          )
+        ),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              marginTop: 24,
+              display: "flex",
+              flexDirection: "column",
+              gap: 12,
+              flex: 1
+            }
+          },
+          tier.features.map((f) => /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              key: f,
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 10,
+                fontSize: 14,
+                color: "rgba(255,255,255,0.85)"
+              }
+            },
+            /* @__PURE__ */ React.createElement(
+              "div",
+              {
+                style: {
+                  width: 16,
+                  height: 16,
+                  borderRadius: 999,
+                  background: `${accentColor}22`,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  color: accentColor,
+                  fontSize: 11,
+                  fontWeight: 700,
+                  flexShrink: 0
+                }
+              },
+              "\u2713"
+            ),
+            f
+          ))
+        ),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              marginTop: 24,
+              position: "relative",
+              height: 44,
+              borderRadius: 12,
+              background: isFocused ? accentColor : "rgba(255,255,255,0.08)",
+              color: isFocused ? BG : TEXT_HI,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: 14,
+              fontWeight: 600,
+              overflow: "hidden",
+              border: isFocused ? "none" : "1px solid rgba(255,255,255,0.1)"
+            }
+          },
+          tier.cta,
+          isFocused && /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                bottom: 0,
+                width: 80,
+                transform: `translateX(${shimmerPos}px) skewX(-20deg)`,
+                background: "linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%)",
+                pointerEvents: "none"
+              }
+            }
+          )
+        )
+      );
+    })
+  );
+}
+
+// ../execution/primitives/src/scenes/terminal-to-browser-deploy/index.tsx
+import { interpolate as interpolate5, spring as spring5, useCurrentFrame as useCurrentFrame6, useVideoConfig as useVideoConfig5 } from "remotion";
+var FONT_FAMILY6 = "inherit";
+var MONO_FAMILY4 = "monospace";
+function MacDots({ size = 12 }) {
+  return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: 8, alignItems: "center" } }, ["#ff5f57", "#febc2e", "#28c840"].map((c) => /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      key: c,
+      style: {
+        width: size,
+        height: size,
+        borderRadius: "50%",
+        background: c,
+        opacity: 0.85
+      }
+    }
+  )));
+}
+function TerminalToBrowserDeploy({
+  siteUrl = "https://app.example.com",
+  accentColor = SUCCESS,
+  speed = 1,
+  className
+}) {
+  const frame = useCurrentFrame6() * speed;
+  const { fps, durationInFrames } = useVideoConfig5();
+  const lines = [
+    { text: "$ pnpm deploy", start: 10, type: "command" },
+    { text: "\u2192 Building project...", start: 35, type: "step" },
+    { text: "\u2192 Bundling assets...", start: 55, type: "step" },
+    { text: "\u2192 Optimizing images...", start: 75, type: "step" },
+    { text: "\u2192 Uploading...", start: 95, type: "step" },
+    { text: `\u2713 Deployed to ${siteUrl}`, start: 120, type: "success" }
+  ];
+  const renderedLines = lines.map((line) => {
+    const elapsed = frame - line.start;
+    const charsPerFrame = 1.6;
+    const visibleChars = Math.max(
+      0,
+      Math.min(line.text.length, Math.floor(elapsed * charsPerFrame))
+    );
+    return {
+      ...line,
+      visible: line.text.slice(0, visibleChars),
+      isVisible: elapsed >= 0
+    };
+  });
+  const collapseStart = 155;
+  const collapseProgress = interpolate5(
+    frame,
+    [collapseStart, collapseStart + 18],
+    [0, 1],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+  );
+  const terminalScale = interpolate5(collapseProgress, [0, 1], [1, 0.8]);
+  const terminalBlur = interpolate5(collapseProgress, [0, 1], [0, 10]);
+  const terminalOpacity = interpolate5(collapseProgress, [0, 1], [1, 0.35]);
+  const browserSpring = spring5({
+    frame: frame - collapseStart - 4,
+    fps,
+    config: { mass: 1, damping: 14, stiffness: 110 },
+    durationInFrames: 50
+  });
+  const browserScale = browserSpring;
+  const browserOpacity = interpolate5(browserSpring, [0, 0.3, 1], [0, 1, 1], {
+    extrapolateRight: "clamp"
+  });
+  let activeLine;
+  for (let i = renderedLines.length - 1; i >= 0; i--) {
+    const l = renderedLines[i];
+    if (l.isVisible && l.visible.length < l.text.length) {
+      activeLine = l;
+      break;
+    }
+  }
+  const urlLineIndex = 5;
+  const lineHeight = 30;
+  const terminalBodyPaddingTop = 22;
+  const urlLineCenterY = terminalBodyPaddingTop + urlLineIndex * lineHeight + 12;
+  const terminalWidth = 820;
+  const terminalHeight = 360;
+  const terminalLeft = (1280 - terminalWidth) / 2;
+  const terminalTop = (720 - terminalHeight) / 2;
+  const terminalHeaderHeight = 36;
+  const originX = terminalLeft + 200;
+  const originY = terminalTop + terminalHeaderHeight + urlLineCenterY;
+  const browserWidth = 980;
+  const browserHeight = 560;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className,
+      style: {
+        position: "absolute",
+        inset: 0,
+        overflow: "hidden",
+        background: BG,
+        fontFamily: FONT_FAMILY6
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          inset: 0,
+          background: `radial-gradient(ellipse at center, ${SURFACE} 0%, ${BG_DEEP} 70%)`
+        }
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: terminalLeft,
+          top: terminalTop,
+          width: terminalWidth,
+          height: terminalHeight,
+          borderRadius: 14,
+          background: "rgba(15,15,17,0.96)",
+          border: "1px solid rgba(255,255,255,0.08)",
+          overflow: "hidden",
+          transform: `scale(${terminalScale})`,
+          filter: `blur(${terminalBlur}px)`,
+          opacity: terminalOpacity,
+          transformOrigin: "center center",
+          willChange: "transform, filter"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            height: terminalHeaderHeight,
+            display: "flex",
+            alignItems: "center",
+            paddingLeft: 14,
+            borderBottom: "1px solid rgba(255,255,255,0.06)",
+            background: "rgba(255,255,255,0.02)"
+          }
+        },
+        /* @__PURE__ */ React.createElement(MacDots, null),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              flex: 1,
+              textAlign: "center",
+              color: "rgba(255,255,255,0.45)",
+              fontFamily: MONO_FAMILY4,
+              fontSize: 12,
+              marginRight: 56
+            }
+          },
+          "~/project \u2014 zsh"
+        )
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            padding: `${terminalBodyPaddingTop}px 22px`,
+            fontFamily: MONO_FAMILY4,
+            fontSize: 16,
+            lineHeight: `${lineHeight}px`,
+            color: "rgba(255,255,255,0.85)"
+          }
+        },
+        renderedLines.map((line, i) => {
+          if (!line.isVisible) return null;
+          const isActive = activeLine === line;
+          const showCursor = isActive && Math.floor(frame / 12) % 2 === 0;
+          const color = line.type === "success" ? accentColor : line.type === "command" ? "rgba(255,255,255,0.95)" : "rgba(255,255,255,0.7)";
+          return /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              key: i,
+              style: {
+                color,
+                whiteSpace: "pre"
+              }
+            },
+            line.visible,
+            showCursor && /* @__PURE__ */ React.createElement(
+              "span",
+              {
+                style: {
+                  display: "inline-block",
+                  width: 8,
+                  height: 18,
+                  background: "rgba(255,255,255,0.85)",
+                  verticalAlign: "text-bottom",
+                  marginLeft: 2
+                }
+              }
+            )
+          );
+        })
+      )
+    ),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: (1280 - browserWidth) / 2,
+          top: (720 - browserHeight) / 2,
+          width: browserWidth,
+          height: browserHeight,
+          borderRadius: 16,
+          overflow: "hidden",
+          background: BG,
+          border: "1px solid rgba(255,255,255,0.1)",
+          transform: `scale(${browserScale})`,
+          transformOrigin: `${(originX - (1280 - browserWidth) / 2) / browserWidth * 100}% ${(originY - (720 - browserHeight) / 2) / browserHeight * 100}%`,
+          opacity: browserOpacity,
+          willChange: "transform, opacity"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            height: 44,
+            display: "flex",
+            alignItems: "center",
+            gap: 14,
+            paddingLeft: 16,
+            paddingRight: 16,
+            background: "rgba(20,20,22,0.95)",
+            borderBottom: "1px solid rgba(255,255,255,0.06)"
+          }
+        },
+        /* @__PURE__ */ React.createElement(MacDots, null),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              flex: 1,
+              height: 26,
+              borderRadius: 13,
+              background: "rgba(255,255,255,0.06)",
+              border: "1px solid rgba(255,255,255,0.08)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              color: "rgba(255,255,255,0.7)",
+              fontFamily: MONO_FAMILY4,
+              fontSize: 12
+            }
+          },
+          siteUrl
+        ),
+        /* @__PURE__ */ React.createElement("div", { style: { width: 60 } })
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            inset: "44px 0 0 0",
+            background: `linear-gradient(180deg, ${BG} 0%, ${SURFACE} 60%, ${BG} 100%)`,
+            color: "white",
+            padding: "60px 80px",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start",
+            gap: 24
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 22,
+              left: 80,
+              right: 80,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              fontFamily: FONT_FAMILY6,
+              fontSize: 14,
+              color: "rgba(255,255,255,0.7)"
+            }
+          },
+          /* @__PURE__ */ React.createElement("div", { style: { fontWeight: 600, color: TEXT_HI } }, "Acme"),
+          /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: 24 } }, /* @__PURE__ */ React.createElement("span", null, "Features"), /* @__PURE__ */ React.createElement("span", null, "Pricing"), /* @__PURE__ */ React.createElement("span", null, "Docs"))
+        ),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              right: 60,
+              top: 120,
+              width: 280,
+              height: 280,
+              borderRadius: "50%",
+              background: `radial-gradient(circle at 30% 30%, ${accentColor}55, transparent 70%)`,
+              filter: "blur(20px)"
+            }
+          }
+        ),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              right: 100,
+              top: 160,
+              width: 200,
+              height: 200,
+              borderRadius: 24,
+              border: `1px solid ${accentColor}55`,
+              transform: "rotate(12deg)",
+              background: "linear-gradient(135deg, rgba(255,255,255,0.04), transparent)"
+            }
+          }
+        ),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              fontFamily: FONT_FAMILY6,
+              fontSize: 14,
+              color: accentColor,
+              fontWeight: 500,
+              marginTop: 50
+            }
+          },
+          "Now live"
+        ),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              fontFamily: FONT_FAMILY6,
+              fontSize: 72,
+              fontWeight: 700,
+              letterSpacing: "-0.04em",
+              lineHeight: 1,
+              maxWidth: 560
+            }
+          },
+          "Ship faster."
+        ),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              fontFamily: FONT_FAMILY6,
+              fontSize: 18,
+              color: "rgba(255,255,255,0.65)",
+              maxWidth: 480,
+              lineHeight: 1.5
+            }
+          },
+          "From commit to global edge in seconds. No config. No drama."
+        ),
+        /* @__PURE__ */ React.createElement(
+          "button",
+          {
+            type: "button",
+            style: {
+              marginTop: 8,
+              padding: "14px 28px",
+              borderRadius: 10,
+              background: accentColor,
+              color: BG,
+              fontFamily: FONT_FAMILY6,
+              fontSize: 15,
+              fontWeight: 600,
+              border: "none"
+            }
+          },
+          "Get started \u2192"
+        )
+      )
+    ),
+    /* @__PURE__ */ React.createElement("div", { style: { display: "none" } }, durationInFrames)
+  );
+}
+
+// ../execution/primitives/src/scenes/landing-code-showcase/index.tsx
+import {
+  AbsoluteFill as AbsoluteFill3,
+  Freeze,
+  interpolate as interpolate6,
+  Sequence as Sequence2,
+  spring as spring6,
+  useCurrentFrame as useCurrentFrame7,
+  useVideoConfig as useVideoConfig6
+} from "remotion";
+
+// ../execution/primitives/src/scenes/landing-code-showcase/timeline.ts
+var SCENES = {
+  blur: { start: 0, duration: 90 },
+  push1: { start: 70, duration: 60 },
+  dashboard: { start: 130, duration: 110 },
+  glassWipe: { start: 230, duration: 60 },
+  maskedSlide: { start: 290, duration: 120 },
+  push2: { start: 400, duration: 60 },
+  terminal: { start: 460, duration: 180 },
+  // Quiet hold at the very end so the loop never restarts mid-action.
+  endHold: 80
+};
+var LANDING_CODE_SHOWCASE_DURATION = SCENES.terminal.start + SCENES.terminal.duration + SCENES.endHold;
+
+// ../execution/primitives/src/scenes/landing-code-showcase/index.tsx
+function WipeWindow({
+  presentation,
+  duration,
+  from,
+  to
+}) {
+  return /* @__PURE__ */ React.createElement(TransitionSeries, null, /* @__PURE__ */ React.createElement(TransitionSeries.Sequence, { durationInFrames: duration }, from), /* @__PURE__ */ React.createElement(
+    TransitionSeries.Transition,
+    {
+      presentation,
+      timing: linearTiming({ durationInFrames: duration - 1 })
+    }
+  ), /* @__PURE__ */ React.createElement(TransitionSeries.Sequence, { durationInFrames: duration }, to));
+}
+var FONT_FAMILY7 = "inherit";
+var MONO_FAMILY5 = "monospace";
+var PEACH = ACCENT_SOFT;
+var LAVENDER = VIOLET;
+var MINT = SUCCESS;
+var STAGE_BG = BG_DEEP;
+var PANEL_BG = BG;
+var HEADER = `import { BlurReveal, DashboardPopulate, MaskedSlideReveal,
+  TerminalToBrowserDeploy, Transition } from "@/components/remocn";
+
+export default function Scene() {
+  return (
+    <>
+`;
+var FOOTER = `    </>
+  );
+}`;
+var STEPS = [
+  {
+    startFrame: 4,
+    code: `      <BlurReveal text="Build faster." />
+`
+  },
+  {
+    startFrame: SCENES.push1.start,
+    code: `      <Transition type="spatial-push" />
+`,
+    highlight: "spatial-push"
+  },
+  {
+    startFrame: SCENES.dashboard.start,
+    code: `      <DashboardPopulate data={metrics} />
+`
+  },
+  {
+    startFrame: SCENES.glassWipe.start,
+    code: `      <Transition type="glass-wipe" />
+`,
+    highlight: "glass-wipe"
+  },
+  {
+    startFrame: SCENES.maskedSlide.start,
+    code: `      <MaskedSlideReveal text="Ship to production." />
+`
+  },
+  {
+    startFrame: SCENES.push2.start,
+    code: `      <Transition type="spatial-push" direction="left" />
+`,
+    highlight: "spatial-push"
+  },
+  {
+    startFrame: SCENES.terminal.start,
+    code: `      <TerminalToBrowserDeploy />
+`
+  }
+];
+var CHARS_PER_FRAME2 = 2.2;
+var BUILT_STEPS = STEPS.map((s) => ({
+  ...s,
+  endFrame: s.startFrame + Math.ceil(s.code.length / CHARS_PER_FRAME2)
+}));
+function tokenizeLine(line, accentColor, highlightedToken) {
+  const tokens = [];
+  const regex = /(\bimport\b|\bfrom\b|\bexport\b|\bdefault\b|\bfunction\b|\breturn\b|\bconst\b)|("[^"]*")|(\b[A-Z][a-zA-Z0-9_]*)|(\b[a-zA-Z_][a-zA-Z0-9_]*)(?==)|(\{|\}|\(|\)|<|>|\/|;)|([0-9]+)/g;
+  let lastIndex = 0;
+  let m = regex.exec(line);
+  while (m !== null) {
+    if (m.index > lastIndex) {
+      tokens.push({
+        text: line.slice(lastIndex, m.index),
+        color: SYN_TEXT
+      });
+    }
+    if (m[1]) tokens.push({ text: m[1], color: LAVENDER });
+    else if (m[2]) {
+      const inner = m[2].slice(1, -1);
+      if (highlightedToken && inner === highlightedToken) {
+        tokens.push({ text: m[2], color: LAVENDER, glow: true });
+      } else {
+        tokens.push({ text: m[2], color: MINT });
+      }
+    } else if (m[3]) tokens.push({ text: m[3], color: PEACH });
+    else if (m[4]) tokens.push({ text: m[4], color: accentColor });
+    else if (m[5]) tokens.push({ text: m[5], color: SYN_COMMENT });
+    else if (m[6]) tokens.push({ text: m[6], color: SYN_NUMBER });
+    lastIndex = regex.lastIndex;
+    m = regex.exec(line);
+  }
+  if (lastIndex < line.length) {
+    tokens.push({ text: line.slice(lastIndex), color: SYN_TEXT });
+  }
+  return tokens;
+}
+function CodeEditor({
+  frame,
+  accentColor
+}) {
+  const dynamicChunks = [];
+  let activeHighlight = null;
+  for (const step of BUILT_STEPS) {
+    if (frame < step.startFrame) break;
+    const elapsed = frame - step.startFrame;
+    const charsTyped = Math.min(
+      step.code.length,
+      Math.floor(elapsed * CHARS_PER_FRAME2)
+    );
+    dynamicChunks.push(step.code.slice(0, charsTyped));
+    if (step.highlight) {
+      const sinceStart = frame - step.startFrame;
+      if (sinceStart >= 0 && sinceStart < 60) {
+        activeHighlight = step.highlight;
+      }
+    }
+  }
+  const allTyped = dynamicChunks.join("");
+  const lastStep = BUILT_STEPS[BUILT_STEPS.length - 1];
+  const showFooter = frame > lastStep.endFrame + 4;
+  const visibleCode = HEADER + allTyped + (showFooter ? FOOTER : "");
+  const lines = visibleCode.split("\n");
+  const lastLineIdx = lines.length - 1;
+  const caretOn = Math.floor(frame / 12) % 2 === 0;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        width: "100%",
+        maxWidth: 540,
+        position: "relative",
+        borderRadius: 16,
+        padding: 1,
+        background: "linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.06) 100%)"
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          borderRadius: 15,
+          background: "rgba(12,12,14,0.9)",
+          backdropFilter: "blur(20px)",
+          overflow: "hidden"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            height: 40,
+            display: "flex",
+            alignItems: "center",
+            padding: "0 16px",
+            borderBottom: "1px solid rgba(255,255,255,0.06)",
+            gap: 8
+          }
+        },
+        ["#ff5f57", "#febc2e", "#28c840"].map((c) => /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            key: c,
+            style: {
+              width: 11,
+              height: 11,
+              borderRadius: 6,
+              background: c,
+              opacity: 0.65
+            }
+          }
+        )),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              marginLeft: 12,
+              fontSize: 12,
+              color: "rgba(255,255,255,0.5)",
+              fontFamily: MONO_FAMILY5
+            }
+          },
+          "scene.tsx"
+        )
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            padding: "20px 22px",
+            fontFamily: MONO_FAMILY5,
+            fontSize: 12.5,
+            lineHeight: 1.7,
+            color: SYN_TEXT,
+            minHeight: 480
+          }
+        },
+        lines.map((line, i) => {
+          const tokens = tokenizeLine(line, accentColor, activeHighlight);
+          const isLast = i === lastLineIdx;
+          return /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              key: i,
+              style: { display: "flex", whiteSpace: "pre" }
+            },
+            /* @__PURE__ */ React.createElement(
+              "span",
+              {
+                style: {
+                  width: 26,
+                  color: "rgba(255,255,255,0.18)",
+                  userSelect: "none",
+                  flexShrink: 0
+                }
+              },
+              i + 1
+            ),
+            /* @__PURE__ */ React.createElement("span", null, tokens.length === 0 ? /* @__PURE__ */ React.createElement("span", null, " ") : tokens.map((t, j) => /* @__PURE__ */ React.createElement(
+              "span",
+              {
+                key: j,
+                style: {
+                  color: t.color
+                }
+              },
+              t.text
+            )), isLast && caretOn && /* @__PURE__ */ React.createElement(
+              "span",
+              {
+                style: {
+                  display: "inline-block",
+                  width: 7,
+                  height: 14,
+                  marginLeft: 1,
+                  verticalAlign: "text-bottom",
+                  background: accentColor
+                }
+              }
+            ))
+          );
+        })
+      )
+    )
+  );
+}
+function PastelStage({
+  background = STAGE_BG,
+  children
+}) {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        background,
+        overflow: "hidden"
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          inset: 0,
+          background: "radial-gradient(ellipse at 20% 30%, rgba(255,179,142,0.08), transparent 60%), radial-gradient(ellipse at 80% 70%, rgba(155,139,176,0.06), transparent 60%)"
+        }
+      }
+    ),
+    children
+  );
+}
+function BlurRevealScene() {
+  const frame = useCurrentFrame7();
+  const opacity = interpolate6(frame, [0, 50], [0, 1], {
+    extrapolateRight: "clamp"
+  });
+  const blurAmount = interpolate6(frame, [0, 50], [22, 0], {
+    extrapolateRight: "clamp"
+  });
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        style: {
+          opacity,
+          filter: `blur(${blurAmount}px)`,
+          fontSize: 96,
+          fontWeight: 600,
+          color: PEACH,
+          letterSpacing: "-0.04em",
+          fontFamily: FONT_FAMILY7
+        }
+      },
+      "Build faster."
+    )
+  );
+}
+function DashboardScene() {
+  return /* @__PURE__ */ React.createElement("div", { style: { position: "absolute", inset: 0 } }, /* @__PURE__ */ React.createElement(DashboardPopulate, { accentColor: PEACH }));
+}
+function MaskedSlideScene() {
+  const frame = useCurrentFrame7();
+  const { fps } = useVideoConfig6();
+  const words = "Ship to production.".split(" ");
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        style: {
+          fontSize: 92,
+          fontWeight: 700,
+          color: MINT,
+          letterSpacing: "-0.03em",
+          fontFamily: FONT_FAMILY7
+        }
+      },
+      words.map((word, i) => {
+        const t = spring6({
+          frame: frame - i * 4,
+          fps,
+          config: { damping: 18, stiffness: 120 }
+        });
+        return /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            key: i,
+            style: {
+              display: "inline-block",
+              overflow: "hidden",
+              verticalAlign: "bottom",
+              lineHeight: 1.05,
+              marginRight: "0.25em"
+            }
+          },
+          /* @__PURE__ */ React.createElement(
+            "span",
+            {
+              style: {
+                display: "inline-block",
+                transform: `translateY(${(1 - t) * 110}%)`
+              }
+            },
+            word
+          )
+        );
+      })
+    )
+  );
+}
+function TerminalScene() {
+  return /* @__PURE__ */ React.createElement("div", { style: { position: "absolute", inset: 0 } }, /* @__PURE__ */ React.createElement(TerminalToBrowserDeploy, { accentColor: MINT, siteUrl: "remocn.dev" }));
+}
+function RightPane() {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        position: "relative",
+        width: "100%",
+        height: "100%",
+        background: STAGE_BG,
+        overflow: "hidden",
+        borderRadius: 18
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      Sequence2,
+      {
+        from: SCENES.blur.start,
+        durationInFrames: SCENES.blur.duration + SCENES.push1.duration
+      },
+      /* @__PURE__ */ React.createElement(PastelStage, null, /* @__PURE__ */ React.createElement(BlurRevealScene, null))
+    ),
+    /* @__PURE__ */ React.createElement(
+      Sequence2,
+      {
+        from: SCENES.dashboard.start,
+        durationInFrames: SCENES.dashboard.duration + SCENES.glassWipe.duration
+      },
+      /* @__PURE__ */ React.createElement(PastelStage, null, /* @__PURE__ */ React.createElement(DashboardScene, null))
+    ),
+    /* @__PURE__ */ React.createElement(
+      Sequence2,
+      {
+        from: SCENES.maskedSlide.start,
+        durationInFrames: SCENES.maskedSlide.duration + SCENES.push2.duration
+      },
+      /* @__PURE__ */ React.createElement(PastelStage, null, /* @__PURE__ */ React.createElement(MaskedSlideScene, null))
+    ),
+    /* @__PURE__ */ React.createElement(
+      Sequence2,
+      {
+        from: SCENES.terminal.start,
+        durationInFrames: SCENES.terminal.duration + SCENES.endHold
+      },
+      /* @__PURE__ */ React.createElement(PastelStage, null, /* @__PURE__ */ React.createElement(TerminalScene, null))
+    ),
+    /* @__PURE__ */ React.createElement(
+      Sequence2,
+      {
+        from: SCENES.push1.start,
+        durationInFrames: SCENES.push1.duration
+      },
+      /* @__PURE__ */ React.createElement(
+        WipeWindow,
+        {
+          presentation: spatialPush({ direction: "up" }),
+          duration: SCENES.push1.duration,
+          from: /* @__PURE__ */ React.createElement(Freeze, { frame: SCENES.push1.start - SCENES.blur.start - 1 }, /* @__PURE__ */ React.createElement(PastelStage, null, /* @__PURE__ */ React.createElement(BlurRevealScene, null))),
+          to: /* @__PURE__ */ React.createElement(Freeze, { frame: 0 }, /* @__PURE__ */ React.createElement(PastelStage, null, /* @__PURE__ */ React.createElement(DashboardScene, null)))
+        }
+      )
+    ),
+    /* @__PURE__ */ React.createElement(
+      Sequence2,
+      {
+        from: SCENES.glassWipe.start,
+        durationInFrames: SCENES.glassWipe.duration
+      },
+      /* @__PURE__ */ React.createElement(
+        WipeWindow,
+        {
+          presentation: frostedGlassWipe({ glassBlur: 28 }),
+          duration: SCENES.glassWipe.duration,
+          from: /* @__PURE__ */ React.createElement(Freeze, { frame: SCENES.dashboard.duration - 1 }, /* @__PURE__ */ React.createElement(PastelStage, null, /* @__PURE__ */ React.createElement(DashboardScene, null))),
+          to: /* @__PURE__ */ React.createElement(Freeze, { frame: 0 }, /* @__PURE__ */ React.createElement(PastelStage, null, /* @__PURE__ */ React.createElement(MaskedSlideScene, null)))
+        }
+      )
+    ),
+    /* @__PURE__ */ React.createElement(
+      Sequence2,
+      {
+        from: SCENES.push2.start,
+        durationInFrames: SCENES.push2.duration
+      },
+      /* @__PURE__ */ React.createElement(
+        WipeWindow,
+        {
+          presentation: spatialPush({ direction: "left" }),
+          duration: SCENES.push2.duration,
+          from: /* @__PURE__ */ React.createElement(Freeze, { frame: SCENES.maskedSlide.duration - 1 }, /* @__PURE__ */ React.createElement(PastelStage, null, /* @__PURE__ */ React.createElement(MaskedSlideScene, null))),
+          to: /* @__PURE__ */ React.createElement(Freeze, { frame: 0 }, /* @__PURE__ */ React.createElement(PastelStage, null, /* @__PURE__ */ React.createElement(TerminalScene, null)))
+        }
+      )
+    )
+  );
+}
+function LandingCodeShowcase({
+  accentColor = ACCENT_SOFT,
+  speed = 1
+}) {
+  const rawFrame = useCurrentFrame7();
+  const frame = rawFrame * speed;
+  const successGlow = interpolate6(
+    frame,
+    [SCENES.terminal.start + 70, SCENES.terminal.start + 100],
+    [0, 1],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+  );
+  return /* @__PURE__ */ React.createElement(
+    AbsoluteFill3,
+    {
+      style: {
+        background: PANEL_BG,
+        fontFamily: FONT_FAMILY7,
+        overflow: "hidden"
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          inset: 0,
+          background: "radial-gradient(ellipse at 20% 30%, rgba(255,179,142,0.06), transparent 55%), radial-gradient(ellipse at 80% 70%, rgba(155,139,176,0.06), transparent 55%)"
+        }
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: 0,
+          top: 0,
+          bottom: 0,
+          width: "38%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: 48
+        }
+      },
+      /* @__PURE__ */ React.createElement(CodeEditor, { frame, accentColor })
+    ),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          right: 0,
+          top: 0,
+          bottom: 0,
+          width: "62%",
+          borderLeft: "1px solid rgba(255,255,255,0.05)"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            top: 22,
+            left: 24,
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            zIndex: 5
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              width: 8,
+              height: 8,
+              borderRadius: 4,
+              background: MINT,
+              boxShadow: `0 0 ${10 + successGlow * 12}px ${MINT}`
+            }
+          }
+        ),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              fontSize: 11,
+              fontFamily: MONO_FAMILY5,
+              color: "rgba(255,255,255,0.5)",
+              textTransform: "uppercase",
+              letterSpacing: "0.1em"
+            }
+          },
+          "Preview \xB7 HMR"
+        )
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            inset: 0,
+            overflow: "hidden",
+            boxShadow: `inset 0 0 ${60 * successGlow}px rgba(127,174,122,${successGlow * 0.45})`
+          }
+        },
+        /* @__PURE__ */ React.createElement(RightPane, null)
+      )
+    )
+  );
+}
+
+// ../execution/primitives/src/scenes/changelog-bite/config.ts
+import { z } from "zod";
+var paramsSchema = z.object({
+  label: z.string().default("Changelog").describe("Short eyebrow label (1\u20132 words)."),
+  title: z.string().default("Faster builds").describe("Headline (1 short sentence)."),
+  format: z.enum(["square", "portrait"]).default("square").describe("Aspect ratio. square: 1080\xD71080. portrait: 1080\xD71920."),
+  background: z.string().optional().describe("Frame background."),
+  cardBackground: z.string().optional().describe("Card panel background."),
+  accent: z.string().default("#ffb38e").describe('Accent color for label/highlights. Brand-bindable: pass "$brand:colors.accent" to track the project brand kit.'),
+  speed: z.number().min(0.25).max(4).default(1).describe("Playback speed multiplier."),
+  // Structured-content slot for the before/after comparison panels. These are
+  // the JSON-serializable replacement for the inexpressible `oldContent`/
+  // `newContent` ReactNode props: supply the literal diff lines and they render
+  // in the panels. Omit them to show the baked sample diff.
+  oldLines: z.array(z.string()).optional().describe("BEFORE-panel content: one string per line (e.g. the old code). Rendered as monospace text. Omit to show the baked sample diff."),
+  newLines: z.array(z.string()).optional().describe("AFTER-panel content: one string per line (e.g. the new code). Rendered as monospace text. Omit to show the baked sample diff.")
+}).passthrough();
+var config = {
+  id: "changelog-bite",
+  component: ChangelogBite,
+  name: "Changelog Bite",
+  category: "scenes",
+  kind: "scene",
+  version: "0.1.1",
+  intent: "changelog",
+  description: "Short-form changelog post (square or portrait) with a label/title header and side-by-side old/new content panels. Designed for social-feed posts announcing a release.",
+  useWhen: "Twitter/X, Instagram, LinkedIn release posts. The portrait format works for Stories/Reels; square works for feeds. Pass oldLines/newLines (string[]) to fill the before/after comparison panels; omit them to show the baked sample diff.",
+  pairsWith: [],
+  avoidWith: ["product-launch-trailer"],
+  tier: "niche",
+  useCase: ["social-cut"],
+  tags: ["scene", "changelog", "release", "social", "comparison"],
+  mood: ["corporate", "tech-demo", "minimal"],
+  paramsSchema,
+  propDefaults: { label: "Changelog", title: "Faster builds", format: "square", accent: "#ffb38e", speed: 1 },
+  primitivesUsed: [],
+  examples: [
+    { name: "square-feed", mood: ["corporate"], params: { label: "Changelog", title: "Faster builds", format: "square", accent: "#ffb38e", speed: 1 } },
+    { name: "portrait-story", mood: ["minimal"], params: { label: "v2.1", title: "New API surface", format: "portrait", accent: "#9b8bb0", speed: 1 } }
+  ],
+  textParam: "title",
+  subtextParam: "label",
+  // label/title/oldLines/newLines ARE params — the diff CONTENT is now
+  // expressible (string[] panels, see oldLines/newLines). What remains baked is
+  // only the panel chrome: the BEFORE/AFTER corner badges and the mid-wipe
+  // footer labels. Omitting oldLines/newLines falls back to a baked sample diff
+  // (its literals are the params' documented defaults, not fixed copy).
+  fixedCopy: [
+    "BEFORE",
+    "AFTER",
+    // old/new panel corner badges
+    "before",
+    "after"
+    // mid-wipe footer labels
+  ],
+  tokens: [
+    { propPath: "accent", cssVar: "--cf-accent", fallback: "#ffb38e", brandKitPath: "colors.accent" }
+  ],
+  durationInFrames: 180,
+  fps: 30,
+  width: 1080,
+  height: 1080,
+  preview: { thumbnailFrame: 90, mode: "oneshot", defaultExample: "square-feed" }
+};
+
+// ../execution/primitives/src/scenes/live-code-compilation/config.ts
+import { z as z2 } from "zod";
+var paramsSchema2 = z2.object({
+  accentColor: z2.string().default("#7fae7a").describe("Accent for build success indicators."),
+  speed: z2.number().min(0.25).max(4).default(1).describe("Playback speed multiplier.")
+}).passthrough();
+var config2 = {
+  id: "live-code-compilation",
+  component: LiveCodeCompilation,
+  name: "Live Code Compilation",
+  category: "scenes",
+  kind: "scene",
+  version: "0.1.1",
+  intent: "feature-walkthrough",
+  description: "Composed scene showing code typing alongside a live build/output panel. Self-contained mini-product-demo for developer-tooling content. Compiles green when the code reaches a working state.",
+  useWhen: 'Developer-tooling product demos, build-time-savings claims, "watch the magic" moments for compiler/transpiler/builder tools. Pair with a mesh-gradient-bg behind for premium feel. Avoid for non-build content.',
+  pairsWith: ["mesh-gradient-bg", "pulsing-indicator", "success-confetti"],
+  avoidWith: ["changelog-bite"],
+  tier: "niche",
+  useCase: ["full-scene", "explainer"],
+  tags: ["scene", "code", "build", "compilation", "developer", "demo"],
+  mood: ["tech-demo", "corporate"],
+  paramsSchema: paramsSchema2,
+  propDefaults: { accentColor: "#7fae7a", speed: 1 },
+  primitivesUsed: [],
+  examples: [
+    { name: "green-build", mood: ["tech-demo"], params: { accentColor: "#7fae7a", speed: 1 } },
+    { name: "brand-blue", mood: ["corporate"], params: { accentColor: "#7b93b0", speed: 1 } }
+  ],
+  textParam: null,
+  subtextParam: null,
+  // The typed program + rendered output are BAKED — no param sets the code or
+  // the resulting button label.
+  fixedCopy: [
+    "Button",
+    // editor filename tab
+    "export function Button() { \u2026 }",
+    // baked sample component source
+    "Ship it"
+    // the rendered button label in the live output panel
+  ],
+  tokens: [
+    { propPath: "accentColor", cssVar: "--cf-accent", fallback: "#7fae7a", brandKitPath: "colors.accent" }
+  ],
+  durationInFrames: 240,
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  preview: { thumbnailFrame: 120, mode: "oneshot", defaultExample: "green-build" }
+};
+
+// ../execution/primitives/src/scenes/product-launch-trailer/config.ts
+import { z as z3 } from "zod";
+var paramsSchema3 = z3.object({
+  logoLabel: z3.string().default("cf").describe("Short logo glyph (1\u20133 characters)."),
+  productName: z3.string().default("cueframe").describe("Product name (1\u20133 words)."),
+  versionLabel: z3.string().default("v2.1").describe("Version or release tag."),
+  accentPeach: z3.string().default("#e8782b").describe("Primary accent color (peach in default)."),
+  accentLavender: z3.string().default("#9b8bb0").describe("Secondary accent color (lavender in default)."),
+  accentMint: z3.string().default("#7fae7a").describe("Tertiary accent color (mint in default)."),
+  background: z3.string().default("#14100c").describe("Frame background."),
+  speed: z3.number().min(0.25).max(4).default(1).describe("Playback speed multiplier.")
+}).passthrough();
+var config3 = {
+  id: "product-launch-trailer",
+  component: ProductLaunchTrailer,
+  name: "Product Launch Trailer",
+  category: "scenes",
+  kind: "scene",
+  version: "0.1.2",
+  intent: "product-trailer",
+  description: "Full-frame multi-phase trailer: pulsing logo intro \u2192 app-shell flyover \u2192 outro with confetti. ~8-second self-contained scene with three named accent colors. Use as a reference template for client-trailer work or as a drop-in launch video.",
+  useWhen: "Product launches, version releases, hero pages, anywhere a polished 8-second trailer fits. Customize via the brand-kit-driven accent triplet + product copy. Avoid editing the timing \u2014 the anchor object inside is tuned.",
+  pairsWith: [],
+  avoidWith: ["changelog-bite", "live-code-compilation"],
+  tier: "recommended",
+  useCase: ["intro", "full-scene"],
+  tags: ["scene", "trailer", "product", "launch", "composition", "multi-phase"],
+  mood: ["cinematic", "corporate", "aggressive"],
+  paramsSchema: paramsSchema3,
+  propDefaults: { logoLabel: "cf", productName: "cueframe", versionLabel: "v2.1", accentPeach: "#e8782b", accentLavender: "#9b8bb0", accentMint: "#7fae7a", background: "#14100c", speed: 1 },
+  primitivesUsed: [],
+  examples: [
+    { name: "cueframe-launch", mood: ["corporate"], params: { logoLabel: "cf", productName: "cueframe", versionLabel: "v2.1", accentPeach: "#e8782b", accentLavender: "#9b8bb0", accentMint: "#7fae7a", background: "#14100c", speed: 1 } }
+  ],
+  textParam: "productName",
+  subtextParam: "versionLabel",
+  // logoLabel/productName/versionLabel ARE params; these are the BAKED strings
+  // (FauxBentoGrid cards + FauxCodeBlock body) no param can change.
+  fixedCopy: [
+    "Animations",
+    "Spring-tuned",
+    // bento card 1
+    "Transitions",
+    "Cinematic",
+    // bento card 2
+    "Backgrounds",
+    "Volumetric",
+    // bento card 3
+    "Compositions",
+    "Production-ready",
+    // bento card 4
+    "scene.tsx",
+    // faux code block title bar
+    "import { Trailer } from 'remocn'",
+    '<Trailer label="v1.0" accent="lavender" />'
+  ],
+  tokens: [
+    { propPath: "accentPeach", cssVar: "--cf-accent", fallback: "#e8782b", brandKitPath: "colors.accent" },
+    { propPath: "accentLavender", cssVar: "--cf-accent-2", fallback: "#9b8bb0", brandKitPath: "colors.accentMuted" },
+    { propPath: "accentMint", cssVar: "--cf-accent-3", fallback: "#7fae7a", brandKitPath: "colors.accentMuted" },
+    { propPath: "background", cssVar: "--cf-bg", fallback: "#14100c", brandKitPath: "colors.background" }
+  ],
+  durationInFrames: 240,
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  preview: { thumbnailFrame: 120, mode: "oneshot", defaultExample: "cueframe-launch" }
+};
+
+// ../execution/primitives/src/scenes/hero-device-assemble/config.ts
+import { z as z4 } from "zod";
+var paramsSchema4 = z4.object({
+  assembleStart: z4.number().min(0).default(0).describe("Frame at which the 3D layer-stack assembly spring fires. Use to delay the assemble after a title beat."),
+  device: z4.enum(["laptop", "phone"]).default("laptop").describe("Device silhouette. `laptop` adds a chassis base under the screen; `phone` uses a tall portrait bezel."),
+  accentColor: z4.string().default("#7fae7a").describe("Accent color for the mock-UI sidebar bar, the highlighted dashboard card, and brand surfaces inside the screen."),
+  speed: z4.number().min(0.25).max(4).default(1).describe("Playback speed multiplier. >1 condenses the assemble + screen wake + shimmer."),
+  className: z4.string().optional().describe("Optional className passthrough on the outer absolute frame.")
+}).passthrough();
+var config4 = {
+  id: "hero-device-assemble",
+  component: HeroDeviceAssemble,
+  name: "Hero Device Assemble",
+  category: "scenes",
+  kind: "scene",
+  version: "0.1.1",
+  intent: "assemble-hero-device",
+  description: "Hero shot where a laptop or phone assembles in 3D from exploded layers (lid, base, bezel, screen) into a settled device, then the screen wakes from black to a mock UI and a shimmer sweeps across. Self-contained ~3-second product reveal beat.",
+  useWhen: 'App / SaaS hero loops, product-page intros, "see it on your device" moments, ad pre-rolls. Use `device="phone"` for mobile-first products. Pair with a title card before or a CTA after. Avoid for short clips <4s \u2014 the assemble spring + wake + shimmer needs ~80 frames to land. Avoid for vertical/9:16 with `device="laptop"` \u2014 the laptop aspect cuts off; switch to `device="phone"`.',
+  pairsWith: ["kinetic-type-mask", "pulsing-indicator"],
+  avoidWith: ["changelog-bite"],
+  tier: "standard",
+  useCase: ["intro", "full-scene"],
+  tags: ["scene", "hero", "device", "mockup", "laptop", "phone", "3d", "assemble", "product"],
+  mood: ["cinematic", "tech-demo", "corporate"],
+  paramsSchema: paramsSchema4,
+  propDefaults: { assembleStart: 0, device: "laptop", accentColor: "#7fae7a", speed: 1 },
+  primitivesUsed: [],
+  examples: [
+    {
+      name: "laptop-green",
+      mood: ["tech-demo", "corporate"],
+      params: { assembleStart: 0, device: "laptop", accentColor: "#7fae7a", speed: 1 },
+      description: "Default \u2014 laptop assemble with green accent on the mock dashboard. Use for SaaS hero loops."
+    },
+    {
+      name: "phone-lavender",
+      mood: ["cinematic"],
+      params: { assembleStart: 0, device: "phone", accentColor: "#9b8bb0", speed: 1 },
+      description: "Phone variant with lavender accent. Use for mobile-first product launches."
+    },
+    {
+      name: "delayed-laptop",
+      mood: ["cinematic"],
+      params: { assembleStart: 30, device: "laptop", accentColor: "#7b93b0", speed: 1 },
+      description: "Hold black for 1s before assembling. Use when stacking after a title-card beat."
+    }
+  ],
+  textParam: null,
+  subtextParam: null,
+  tokens: [
+    { propPath: "accentColor", cssVar: "--cf-accent", fallback: "#7fae7a", brandKitPath: "colors.accent" }
+  ],
+  durationInFrames: 240,
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  preview: { thumbnailFrame: 75, mode: "oneshot", defaultExample: "laptop-green" }
+};
+
+// ../execution/primitives/src/scenes/pricing-tier-focus/config.ts
+import { z as z5 } from "zod";
+var paramsSchema5 = z5.object({
+  focusedTier: z5.union([
+    z5.literal(0),
+    z5.literal(1),
+    z5.literal(2),
+    z5.literal("0"),
+    z5.literal("1"),
+    z5.literal("2")
+  ]).default(1).describe('Index of the tier to focus (0=Free, 1=Pro, 2=Enterprise). The focused tier scales up, lifts, and gets a "Popular" badge + shimmering CTA; siblings dim and blur.'),
+  accentColor: z5.string().default("#7fae7a").describe('Accent color for the focused-tier border glow, "Popular" badge, feature checks, and CTA fill.'),
+  speed: z5.number().min(0.25).max(4).default(1).describe("Playback speed multiplier."),
+  className: z5.string().optional().describe("Optional className passthrough on the outer flex frame.")
+}).passthrough();
+var config5 = {
+  id: "pricing-tier-focus",
+  component: PricingTierFocus,
+  name: "Pricing Tier Focus",
+  category: "scenes",
+  kind: "scene",
+  version: "0.1.1",
+  intent: "showcase-pricing",
+  description: "Three-card pricing layout (Free / Pro / Enterprise) where one tier scales up, lifts, and shimmers while the others dim and blur. Tier copy is hardcoded; the agent picks which tier to spotlight via `focusedTier`.",
+  useWhen: 'SaaS pricing reveals, plan-upgrade promos, "this is the one to pick" moments. Use `focusedTier=1` for Pro-default upsell, `2` for enterprise sales decks. Avoid for short clips <8s \u2014 the focus spring lands at frame 50, shimmer at 90. Avoid for vertical/9:16 unless rebuilt \u2014 three side-by-side cards need 16:9 width.',
+  pairsWith: ["success-confetti"],
+  avoidWith: ["changelog-bite"],
+  tier: "standard",
+  useCase: ["full-scene", "explainer"],
+  tags: ["scene", "pricing", "tiers", "saas", "upsell", "plans"],
+  mood: ["corporate", "tech-demo", "minimal"],
+  paramsSchema: paramsSchema5,
+  propDefaults: { focusedTier: 1, accentColor: "#7fae7a", speed: 1 },
+  primitivesUsed: [],
+  examples: [
+    {
+      name: "pro-upsell",
+      mood: ["corporate"],
+      params: { focusedTier: 1, accentColor: "#7fae7a", speed: 1 },
+      description: "Default \u2014 focus the middle Pro tier with green accent. Best for self-serve SaaS landing pages."
+    },
+    {
+      name: "enterprise-sales",
+      mood: ["corporate", "cinematic"],
+      params: { focusedTier: 2, accentColor: "#9b8bb0", speed: 1 },
+      description: "Spotlight Enterprise with lavender accent. Use in sales-deck loops or B2B trailers."
+    },
+    {
+      name: "free-onboarding",
+      mood: ["playful", "minimal"],
+      params: { focusedTier: 0, accentColor: "#7b93b0", speed: 1 },
+      description: "Spotlight the Free tier with sky-blue accent. Use in product-led-growth onboarding videos."
+    }
+  ],
+  textParam: null,
+  subtextParam: null,
+  // focusedTier picks WHICH card to spotlight; all tier copy/prices are BAKED.
+  // The scene that exists to show pricing cannot carry the agent's pricing.
+  fixedCopy: [
+    "Free",
+    "$0",
+    "/mo",
+    "1 project",
+    "Community support",
+    "1 GB storage",
+    "Get started",
+    "Pro",
+    "$24",
+    "/mo",
+    "Unlimited projects",
+    "Priority support",
+    "100 GB storage",
+    "Advanced analytics",
+    "Buy Pro",
+    "Enterprise",
+    "Dedicated manager",
+    "Unlimited storage",
+    "Contact sales",
+    "Popular"
+    // badge on the focused tier
+  ],
+  tokens: [
+    { propPath: "accentColor", cssVar: "--cf-accent", fallback: "#7fae7a", brandKitPath: "colors.accent" }
+  ],
+  durationInFrames: 240,
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  preview: { thumbnailFrame: 110, mode: "oneshot", defaultExample: "pro-upsell" }
+};
+
+// ../execution/primitives/src/scenes/landing-code-showcase/config.ts
+import { z as z6 } from "zod";
+var paramsSchema6 = z6.object({
+  accentColor: z6.string().default("#FFB38E").describe("Accent color for the code editor caret, syntax highlight on local identifiers, and the success-glow halo on the right preview pane."),
+  speed: z6.number().min(0.25).max(4).default(1).describe("Playback speed multiplier. The internal timeline assumes 30fps base; >1 condenses the whole 24s sequence.")
+}).passthrough();
+var config6 = {
+  id: "landing-code-showcase",
+  component: LandingCodeShowcase,
+  name: "Landing Code Showcase",
+  category: "scenes",
+  kind: "scene",
+  version: "0.1.1",
+  intent: "showcase-landing-code",
+  description: 'Two-pane "code \u2192 live preview" hero loop. Left: a glassy editor types JSX one component at a time. Right: each typed component renders inside a warm pastel stage, with `spatial-push` and `frosted-glass-wipe` transitions between beats (BlurReveal \u2192 DashboardPopulate \u2192 MaskedSlideReveal \u2192 TerminalToBrowserDeploy). Self-contained 24-second showcase loop for component-library marketing.',
+  useWhen: 'Component library / framework / Remotion-style SDK landing pages, hero loops, "build with us" demos, conference talk title cards. Avoid for short clips <16s \u2014 the staged code-typing pace cannot be compressed without losing the reveal beats. Avoid for vertical/9:16 unless rebuilt \u2014 split-pane layout assumes 16:9.',
+  pairsWith: [],
+  avoidWith: ["changelog-bite", "product-launch-trailer"],
+  tier: "recommended",
+  useCase: ["full-scene"],
+  tags: ["scene", "landing", "code", "showcase", "hero", "split-pane", "components", "library"],
+  mood: ["cinematic", "tech-demo", "editorial"],
+  paramsSchema: paramsSchema6,
+  propDefaults: { accentColor: "#FFB38E", speed: 1 },
+  primitivesUsed: [
+    "dashboard-populate",
+    "frosted-glass-wipe",
+    "spatial-push",
+    "terminal-to-browser-deploy"
+  ],
+  examples: [
+    {
+      name: "peach-default",
+      mood: ["cinematic", "editorial"],
+      params: { accentColor: "#FFB38E", speed: 1 },
+      description: "Default warm peach accent. Use for premium dev-tool landing pages where the pastel stage matches the brand."
+    },
+    {
+      name: "mint-hero",
+      mood: ["tech-demo"],
+      params: { accentColor: "#7fae7a", speed: 1 },
+      description: 'Mint accent \u2014 pairs well when the brand already uses green for "ship/deploy" semantics.'
+    }
+  ],
+  textParam: null,
+  subtextParam: null,
+  // No prop changes the marketing copy or the typed program — fork via
+  // get_component_source to rewrite (index.tsx STEPS / BlurRevealScene /
+  // MaskedSlideScene / TerminalScene).
+  fixedCopy: [
+    "Build faster.",
+    // BlurReveal headline (right preview pane)
+    "Ship to production.",
+    // MaskedSlideReveal headline
+    "Preview \xB7 HMR",
+    // live-preview label
+    "scene.tsx",
+    // editor title-bar filename
+    "remocn.dev",
+    // deploy URL inside the embedded terminal-to-browser beat
+    'import { BlurReveal, DashboardPopulate, MaskedSlideReveal, TerminalToBrowserDeploy, Transition } from "@/components/remocn"',
+    '<BlurReveal text="Build faster." />',
+    '<MaskedSlideReveal text="Ship to production." />'
+  ],
+  tokens: [
+    { propPath: "accentColor", cssVar: "--cf-accent", fallback: "#FFB38E", brandKitPath: "colors.accent" }
+  ],
+  durationInFrames: LANDING_CODE_SHOWCASE_DURATION,
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  preview: { thumbnailFrame: 540, mode: "oneshot", defaultExample: "peach-default" }
+};
+
+// ../execution/primitives/src/scenes/terminal-to-browser-deploy/config.ts
+import { z as z7 } from "zod";
+var paramsSchema7 = z7.object({
+  siteUrl: z7.string().default("https://app.example.com").describe("Deploy target URL shown on the success line and inside the browser address bar."),
+  accentColor: z7.string().default("#7fae7a").describe("Accent color for the deploy success line, browser hero copy, and CTA button."),
+  speed: z7.number().min(0.25).max(4).default(1).describe("Playback speed multiplier. >1 condenses the typewriter + collapse + browser reveal."),
+  className: z7.string().optional().describe("Optional className passthrough on the outer absolute frame.")
+}).passthrough();
+var config7 = {
+  id: "terminal-to-browser-deploy",
+  component: TerminalToBrowserDeploy,
+  name: "Terminal to Browser Deploy",
+  category: "scenes",
+  kind: "scene",
+  version: "0.1.1",
+  intent: "animate-deploy-flow",
+  description: 'Full-frame deploy beat: terminal types `pnpm deploy`, prints build/bundle/upload steps, then the success line collapses-and-blurs while a polished marketing browser springs forward at the URL. Self-contained ~6-second story for "ship it" moments.',
+  useWhen: 'Developer-tooling launches, deploy/CI/CD product demos, "from commit to live" moments, hero loops behind a CTA. Pair with `success-confetti` or a short outro card. Avoid for short clips <10s where the terminal collapse never plays. Avoid for vertical/9:16 unless the terminal + browser geometry is rebuilt \u2014 internal coordinates are baked at 1280\xD7720.',
+  pairsWith: ["success-confetti", "pulsing-indicator"],
+  avoidWith: ["changelog-bite"],
+  tier: "recommended",
+  useCase: ["outro", "full-scene"],
+  tags: ["scene", "terminal", "deploy", "browser", "cli", "developer", "shipping", "cicd"],
+  mood: ["tech-demo", "cinematic", "corporate"],
+  paramsSchema: paramsSchema7,
+  propDefaults: { siteUrl: "https://app.example.com", accentColor: "#7fae7a", speed: 1 },
+  primitivesUsed: [],
+  examples: [
+    {
+      name: "green-ship",
+      mood: ["tech-demo"],
+      params: { siteUrl: "https://app.example.com", accentColor: "#7fae7a", speed: 1 },
+      description: "Default green-build deploy. Use for generic developer-tool demos."
+    },
+    {
+      name: "brand-blue",
+      mood: ["corporate"],
+      params: { siteUrl: "https://acme.dev", accentColor: "#7b93b0", speed: 1 },
+      description: "Corporate blue accent on a real-looking domain. Use when the brand kit resolves the accent."
+    },
+    {
+      name: "fast-edit",
+      mood: ["tech-demo", "aggressive"],
+      params: { siteUrl: "https://remocn.dev", accentColor: "#9b8bb0", speed: 1.4 },
+      description: "1.4x speed cut, lavender accent. Use inside compilation montages where the deploy beat is one of several."
+    }
+  ],
+  textParam: "siteUrl",
+  subtextParam: null,
+  // siteUrl is a param (it interpolates into the success line + address bar);
+  // the terminal log lines + browser chrome/hero are BAKED.
+  fixedCopy: [
+    "$ pnpm deploy",
+    "\u2192 Building project...",
+    "\u2192 Bundling assets...",
+    "\u2192 Uploading...",
+    "\u2713 Deployed to <siteUrl>",
+    // siteUrl param interpolates here
+    "Acme",
+    "Features",
+    "Pricing",
+    "Docs",
+    // browser nav (Acme brand is fixed)
+    "Ship faster.",
+    "Get started \u2192"
+    // browser hero headline + CTA
+  ],
+  tokens: [
+    { propPath: "accentColor", cssVar: "--cf-accent", fallback: "#7fae7a", brandKitPath: "colors.accent" }
+  ],
+  durationInFrames: 240,
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  preview: { thumbnailFrame: 165, mode: "oneshot", defaultExample: "green-ship" }
+};
+
+// ../execution/primitives/src/scenes/index.ts
+var catalog = [
+  config,
+  config2,
+  config3,
+  config4,
+  config5,
+  config6,
+  config7
+];
+
+export {
+  ChangelogBite,
+  LiveCodeCompilation,
+  ProductLaunchTrailer,
+  HeroDeviceAssemble,
+  PricingTierFocus,
+  TerminalToBrowserDeploy,
+  LandingCodeShowcase,
+  catalog
+};