@cueframe/kernel 0.2.2 → 0.2.3

package/dist/{chunk-TMIBBD5E.js → chunk-I5QWBM3M.js}

@@ -4,9 +4,17 @@ import {
 } from "./chunk-QGAWDLYX.js";
 import {
   DashboardPopulate
-} from "./chunk-ZSZABOE5.js";
+} from "./chunk-S5H6GH6M.js";
 import {
+  useFrameScale
+} from "./chunk-QAGGJHAF.js";
+import {
+  EASING_BY_INTENT
+} from "./chunk-MFHXCHRI.js";
+import {
+  ACCENT,
   ACCENT_SOFT,
+  ACCENT_STRONG,
   BG,
   BG_DEEP,
   BLUE,
@@ -27,7 +35,22 @@ import {
   TEXT_MUTED,
   VIOLET,
   WARNING
-} from "./chunk-CX2IIQ4R.js";
+} from "./chunk-W2245F6G.js";
+import {
+  CAMERA_PRESETS,
+  DEFAULT_CAMERA,
+  ThreeCanvas,
+  makeDefaultScreenTexture,
+  resolveCamera,
+  useImageTexture
+} from "./chunk-5DJ3IEJR.js";
+import {
+  DEVICE_GLASS_OPACITY_ENCODED,
+  DeviceMesh,
+  StudioRig,
+  deviceDimensions,
+  laptopLayout
+} from "./chunk-VKATKWWR.js";
 
 // ../execution/primitives/src/scenes/changelog-bite/index.tsx
 import {
@@ -403,8 +426,9 @@ var EVENTS = [
   },
   { code: "\n      style={{", ui: {} },
   {
-    code: '\n        background: "#7b93b0",',
-    ui: { background: "#7b93b0" }
+    code: `
+        background: "${BLUE}",`,
+    ui: { background: BLUE }
   },
   {
     code: '\n        color: "white",',
@@ -466,7 +490,7 @@ function highlightLine(line, accentColor) {
   return tokens;
 }
 function LiveCodeCompilation({
-  accentColor = "#7b93b0",
+  accentColor = BLUE,
   speed = 1,
   className
 }) {
@@ -751,7 +775,7 @@ function ProductLaunchTrailer({
   logoLabel = "R",
   productName = "Remocn",
   versionLabel = "v1.0 is live",
-  accentPeach = ACCENT_SOFT,
+  accentPeach = ACCENT_STRONG,
   accentLavender = VIOLET,
   accentMint = SUCCESS,
   background = BG,
@@ -1271,9 +1295,12 @@ function toHex(alpha) {
 }
 
 // ../execution/primitives/src/scenes/hero-device-assemble/index.tsx
-import { interpolate as interpolate3, spring as spring3, useCurrentFrame as useCurrentFrame4, useVideoConfig as useVideoConfig3 } from "remotion";
+import { Img, interpolate as interpolate3, spring as spring3, useCurrentFrame as useCurrentFrame4, useVideoConfig as useVideoConfig3 } from "remotion";
 var FONT_FAMILY4 = "inherit";
-function MockUI({ accentColor }) {
+function MockUI({
+  accentColor,
+  scale
+}) {
   return /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -1297,16 +1324,16 @@ function MockUI({ accentColor }) {
           borderBottom: "1px solid rgba(255,255,255,0.06)",
           display: "flex",
           alignItems: "center",
-          padding: "0 16px",
-          gap: 8
+          padding: `0 ${16 * scale}px`,
+          gap: 8 * scale
         }
       },
       /* @__PURE__ */ React.createElement(
         "div",
         {
           style: {
-            width: 10,
-            height: 10,
+            width: 10 * scale,
+            height: 10 * scale,
             borderRadius: "50%",
             background: "rgba(255,255,255,0.18)"
           }
@@ -1316,8 +1343,8 @@ function MockUI({ accentColor }) {
         "div",
         {
           style: {
-            width: 10,
-            height: 10,
+            width: 10 * scale,
+            height: 10 * scale,
             borderRadius: "50%",
             background: "rgba(255,255,255,0.18)"
           }
@@ -1327,8 +1354,8 @@ function MockUI({ accentColor }) {
         "div",
         {
           style: {
-            width: 10,
-            height: 10,
+            width: 10 * scale,
+            height: 10 * scale,
             borderRadius: "50%",
             background: "rgba(255,255,255,0.18)"
           }
@@ -1342,18 +1369,18 @@ function MockUI({ accentColor }) {
           width: "22%",
           background: BG,
           borderRight: "1px solid rgba(255,255,255,0.05)",
-          padding: 16,
+          padding: 16 * scale,
           display: "flex",
           flexDirection: "column",
-          gap: 10
+          gap: 10 * scale
         }
       },
       /* @__PURE__ */ React.createElement(
         "div",
         {
           style: {
-            height: 12,
-            borderRadius: 4,
+            height: 12 * scale,
+            borderRadius: 4 * scale,
             background: accentColor,
             opacity: 0.85,
             width: "70%"
@@ -1364,8 +1391,8 @@ function MockUI({ accentColor }) {
         "div",
         {
           style: {
-            height: 10,
-            borderRadius: 4,
+            height: 10 * scale,
+            borderRadius: 4 * scale,
             background: "rgba(255,255,255,0.1)",
             width: "85%"
           }
@@ -1375,8 +1402,8 @@ function MockUI({ accentColor }) {
         "div",
         {
           style: {
-            height: 10,
-            borderRadius: 4,
+            height: 10 * scale,
+            borderRadius: 4 * scale,
             background: "rgba(255,255,255,0.08)",
             width: "60%"
           }
@@ -1386,8 +1413,8 @@ function MockUI({ accentColor }) {
         "div",
         {
           style: {
-            height: 10,
-            borderRadius: 4,
+            height: 10 * scale,
+            borderRadius: 4 * scale,
             background: "rgba(255,255,255,0.08)",
             width: "75%"
           }
@@ -1398,20 +1425,20 @@ function MockUI({ accentColor }) {
       {
         style: {
           flex: 1,
-          padding: 24,
+          padding: 24 * scale,
           display: "flex",
           flexDirection: "column",
-          gap: 16
+          gap: 16 * scale
         }
       },
       /* @__PURE__ */ React.createElement(
         "div",
         {
           style: {
-            height: 18,
+            height: 18 * scale,
             width: "40%",
             background: "rgba(255,255,255,0.85)",
-            borderRadius: 4
+            borderRadius: 4 * scale
           }
         }
       ),
@@ -1419,10 +1446,10 @@ function MockUI({ accentColor }) {
         "div",
         {
           style: {
-            height: 10,
+            height: 10 * scale,
             width: "65%",
             background: "rgba(255,255,255,0.18)",
-            borderRadius: 4
+            borderRadius: 4 * scale
           }
         }
       ),
@@ -1432,16 +1459,16 @@ function MockUI({ accentColor }) {
           style: {
             display: "grid",
             gridTemplateColumns: "1fr 1fr 1fr",
-            gap: 12,
-            marginTop: 12
+            gap: 12 * scale,
+            marginTop: 12 * scale
           }
         },
         /* @__PURE__ */ React.createElement(
           "div",
           {
             style: {
-              height: 90,
-              borderRadius: 8,
+              height: 90 * scale,
+              borderRadius: 8 * scale,
               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)"
             }
@@ -1451,8 +1478,8 @@ function MockUI({ accentColor }) {
           "div",
           {
             style: {
-              height: 90,
-              borderRadius: 8,
+              height: 90 * scale,
+              borderRadius: 8 * scale,
               background: `linear-gradient(180deg, ${accentColor}33, ${accentColor}11)`,
               border: `1px solid ${accentColor}55`
             }
@@ -1462,8 +1489,8 @@ function MockUI({ accentColor }) {
           "div",
           {
             style: {
-              height: 90,
-              borderRadius: 8,
+              height: 90 * scale,
+              borderRadius: 8 * scale,
               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)"
             }
@@ -1475,7 +1502,7 @@ function MockUI({ accentColor }) {
         {
           style: {
             flex: 1,
-            borderRadius: 8,
+            borderRadius: 8 * scale,
             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)"
           }
@@ -1487,22 +1514,24 @@ function MockUI({ accentColor }) {
 function HeroDeviceAssemble({
   assembleStart = 0,
   device = "laptop",
+  screenSrc,
   accentColor = SUCCESS,
   speed = 1,
   className
 }) {
   const frame = useCurrentFrame4() * speed;
   const { fps } = useVideoConfig3();
+  const s = useFrameScale();
   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 lidZ = interpolate3(assemble, [0, 1], [1e3 * s, 0]);
+  const baseZ = interpolate3(assemble, [0, 1], [-800 * s, 0]);
+  const bezelZ = interpolate3(assemble, [0, 1], [600 * s, 0]);
+  const screenZ = interpolate3(assemble, [0, 1], [300 * s, 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], {
@@ -1523,10 +1552,10 @@ function HeroDeviceAssemble({
     { 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;
+  const deviceW = (isPhone ? 320 : 760) * s;
+  const deviceH = (isPhone ? 640 : 470) * s;
+  const screenInset = (isPhone ? 12 : 18) * s;
+  const bezelRadius = (isPhone ? 36 : 14) * s;
   return /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -1539,7 +1568,7 @@ function HeroDeviceAssemble({
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
-        perspective: 2e3,
+        perspective: 2e3 * s,
         fontFamily: FONT_FAMILY4
       }
     },
@@ -1561,9 +1590,9 @@ function HeroDeviceAssemble({
           style: {
             position: "absolute",
             inset: 0,
-            transform: `translateZ(${lidZ - 8}px)`,
+            transform: `translateZ(${lidZ - 8 * s}px)`,
             background: `linear-gradient(180deg, ${SURFACE_HI} 0%, ${BG} 100%)`,
-            borderRadius: bezelRadius + 4,
+            borderRadius: bezelRadius + 4 * s,
             border: "1px solid rgba(255,255,255,0.08)",
             opacity: layerOpacity
           }
@@ -1574,14 +1603,14 @@ function HeroDeviceAssemble({
         {
           style: {
             position: "absolute",
-            left: -40,
-            right: -40,
-            bottom: -28,
-            height: 28,
+            left: -40 * s,
+            right: -40 * s,
+            bottom: -28 * s,
+            height: 28 * s,
             transform: `translateZ(${baseZ}px) rotateX(78deg)`,
             transformOrigin: "top center",
             background: `linear-gradient(180deg, ${SURFACE_HI} 0%, ${BG} 100%)`,
-            borderRadius: "0 0 12px 12px",
+            borderRadius: `0 0 ${12 * s}px ${12 * s}px`,
             border: "1px solid rgba(255,255,255,0.06)",
             opacity: layerOpacity
           }
@@ -1608,7 +1637,7 @@ function HeroDeviceAssemble({
             position: "absolute",
             inset: screenInset,
             transform: `translateZ(${screenZ}px)`,
-            borderRadius: bezelRadius - 6,
+            borderRadius: bezelRadius - 6 * s,
             overflow: "hidden",
             background: "black",
             opacity: layerOpacity
@@ -1625,7 +1654,19 @@ function HeroDeviceAssemble({
             }
           }
         ),
-        /* @__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, opacity: screenWake } }, screenSrc ? /* @__PURE__ */ React.createElement(
+          Img,
+          {
+            src: screenSrc,
+            style: {
+              position: "absolute",
+              inset: 0,
+              width: "100%",
+              height: "100%",
+              objectFit: "cover"
+            }
+          }
+        ) : /* @__PURE__ */ React.createElement(MockUI, { accentColor, scale: s })),
         /* @__PURE__ */ React.createElement(
           "div",
           {
@@ -1725,7 +1766,7 @@ function PricingTierFocus({
       const lift = isFocused ? focusLift : 0;
       const brightness = isFocused ? 1 : sideBrightness;
       const blurPx = isFocused ? 0 : sideBlur;
-      const z8 = isFocused ? 10 : 1;
+      const z9 = isFocused ? 10 : 1;
       return /* @__PURE__ */ React.createElement(
         "div",
         {
@@ -1741,7 +1782,7 @@ function PricingTierFocus({
             border: isFocused ? `1px solid ${accentColor}88` : `1px solid ${BORDER}`,
             transform: `translateY(${lift}px) scale(${scale})`,
             filter: `brightness(${brightness}) blur(${blurPx}px)`,
-            zIndex: z8,
+            zIndex: z9,
             display: "flex",
             flexDirection: "column",
             willChange: "transform, filter"
@@ -2907,6 +2948,72 @@ function LandingCodeShowcase({
   );
 }
 
+// ../execution/primitives/src/scenes/device-showcase/index.tsx
+import { useMemo } from "react";
+import { AbsoluteFill as AbsoluteFill4, interpolate as interpolate7, spring as spring7, useCurrentFrame as useCurrentFrame8, useVideoConfig as useVideoConfig7 } from "remotion";
+function deviceBodyWidth(kind, frameWidth) {
+  return kind === "laptop" ? Math.round(frameWidth * 0.57) : Math.round(frameWidth * 0.2);
+}
+function deviceGroupY(kind, frameHeight) {
+  return kind === "laptop" ? Math.round(frameHeight * 0.02) : 0;
+}
+var FLOOR_EPSILON = 0.5;
+function deviceFloorY(kind, frameWidth, frameHeight) {
+  const dim = deviceDimensions(kind, deviceBodyWidth(kind, frameWidth));
+  const groupY = deviceGroupY(kind, frameHeight);
+  const bottom = kind === "laptop" ? groupY + laptopLayout(dim).bottomY : groupY - dim.h / 2;
+  return bottom - FLOOR_EPSILON;
+}
+var PLACEHOLDER_LONG_EDGE = 1600;
+function useScreenTexture(src, accent, screenW, screenH) {
+  const loaded = useImageTexture(src ?? null);
+  const fallback = useMemo(() => {
+    if (src) return null;
+    const scale = PLACEHOLDER_LONG_EDGE / Math.max(screenW, screenH);
+    return makeDefaultScreenTexture(accent, Math.round(screenW * scale), Math.round(screenH * scale));
+  }, [src, accent, screenW, screenH]);
+  return src ? loaded : fallback;
+}
+function DeviceShowcase({
+  device = "laptop",
+  screenSrc,
+  move = "dolly-in",
+  fov = 36,
+  amount,
+  easing = "entrance",
+  finish = "#2a2a30",
+  background = BG,
+  accentColor = ACCENT,
+  openAngle = 100,
+  lighting = "soft",
+  speed = 1
+}) {
+  const frame = useCurrentFrame8() * speed;
+  const { fps, width, height, durationInFrames } = useVideoConfig7();
+  const keyframes = useMemo(
+    () => CAMERA_PRESETS[move](durationInFrames, { fov, amount, easing: EASING_BY_INTENT[easing] }),
+    [move, durationInFrames, fov, amount, easing]
+  );
+  const camera = resolveCamera(keyframes, frame, { ...DEFAULT_CAMERA, fov });
+  const lid = spring7({ frame, fps, config: { mass: 1.2, damping: 16, stiffness: 70 }, durationInFrames: Math.round(fps * 1.4) });
+  const angle = device === "laptop" ? interpolate7(lid, [0, 1], [30, openAngle]) : 0;
+  const bodyWidth = deviceBodyWidth(device, width);
+  const dim = deviceDimensions(device, bodyWidth);
+  const screen = useScreenTexture(screenSrc, accentColor, dim.w - dim.screenInset * 2, dim.h - dim.screenInset * 2);
+  return /* @__PURE__ */ React.createElement(AbsoluteFill4, { style: { background: `radial-gradient(ellipse at 50% 60%, ${SURFACE} 0%, ${background} 65%)` } }, /* @__PURE__ */ React.createElement(ThreeCanvas, { width, height, stageCamera: camera, shadows: true }, /* @__PURE__ */ React.createElement(StudioRig, { preset: lighting, floorY: deviceFloorY(device, width, height) }), /* @__PURE__ */ React.createElement(
+    DeviceMesh,
+    {
+      kind: device,
+      screen,
+      finish,
+      glassOpacity: DEVICE_GLASS_OPACITY_ENCODED,
+      openAngle: angle,
+      width: bodyWidth,
+      position: [0, deviceGroupY(device, height), 0]
+    }
+  )));
+}
+
 // ../execution/primitives/src/scenes/changelog-bite/config.ts
 import { z } from "zod";
 var paramsSchema = z.object({
@@ -2915,7 +3022,7 @@ var paramsSchema = z.object({
   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.'),
+  accent: z.string().default(ACCENT_SOFT).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."),
   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.")
@@ -2937,11 +3044,11 @@ var config = {
   tags: ["scene", "changelog", "release", "social", "comparison"],
   mood: ["corporate", "tech-demo", "minimal"],
   paramsSchema,
-  propDefaults: { label: "Changelog", title: "Faster builds", format: "square", accent: "#ffb38e", speed: 1 },
+  propDefaults: { label: "Changelog", title: "Faster builds", format: "square", accent: ACCENT_SOFT, 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 } }
+    { name: "square-feed", mood: ["corporate"], params: { label: "Changelog", title: "Faster builds", format: "square", accent: ACCENT_SOFT, speed: 1 } },
+    { name: "portrait-story", mood: ["minimal"], params: { label: "v2.1", title: "New API surface", format: "portrait", accent: VIOLET, speed: 1 } }
   ],
   textParam: "title",
   subtextParam: "label",
@@ -2954,7 +3061,7 @@ var config = {
     // mid-wipe footer labels
   ],
   tokens: [
-    { propPath: "accent", cssVar: "--cf-accent", fallback: "#ffb38e", brandKitPath: "colors.accent" }
+    { propPath: "accent", cssVar: "--cf-accent", fallback: ACCENT_SOFT, brandKitPath: "colors.accent" }
   ],
   durationInFrames: 180,
   fps: 30,
@@ -2966,7 +3073,7 @@ var config = {
 // ../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."),
+  accentColor: z2.string().default(SUCCESS).describe("Accent for build success indicators."),
   speed: z2.number().min(0.25).max(4).default(1).describe("Playback speed multiplier.")
 }).passthrough();
 var config2 = {
@@ -2986,11 +3093,11 @@ var config2 = {
   tags: ["scene", "code", "build", "compilation", "developer", "demo"],
   mood: ["tech-demo", "corporate"],
   paramsSchema: paramsSchema2,
-  propDefaults: { accentColor: "#7fae7a", speed: 1 },
+  propDefaults: { accentColor: SUCCESS, 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 } }
+    { name: "green-build", mood: ["tech-demo"], params: { accentColor: SUCCESS, speed: 1 } },
+    { name: "brand-blue", mood: ["corporate"], params: { accentColor: BLUE, speed: 1 } }
   ],
   textParam: null,
   subtextParam: null,
@@ -3003,7 +3110,7 @@ var config2 = {
     // the rendered button label in the live output panel
   ],
   tokens: [
-    { propPath: "accentColor", cssVar: "--cf-accent", fallback: "#7fae7a", brandKitPath: "colors.accent" }
+    { propPath: "accentColor", cssVar: "--cf-accent", fallback: SUCCESS, brandKitPath: "colors.accent" }
   ],
   durationInFrames: 240,
   fps: 30,
@@ -3018,10 +3125,10 @@ 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."),
+  accentPeach: z3.string().default(ACCENT_STRONG).describe("Primary accent color (indigo by default)."),
+  accentLavender: z3.string().default(VIOLET).describe("Secondary accent color (violet by default)."),
+  accentMint: z3.string().default(SUCCESS).describe("Tertiary accent color (green by default)."),
+  background: z3.string().default(BG).describe("Frame background."),
   speed: z3.number().min(0.25).max(4).default(1).describe("Playback speed multiplier.")
 }).passthrough();
 var config3 = {
@@ -3041,10 +3148,10 @@ var config3 = {
   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 },
+  propDefaults: { logoLabel: "cf", productName: "cueframe", versionLabel: "v2.1", accentPeach: ACCENT_STRONG, accentLavender: VIOLET, accentMint: SUCCESS, background: BG, 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 } }
+    { name: "cueframe-launch", mood: ["corporate"], params: { logoLabel: "cf", productName: "cueframe", versionLabel: "v2.1", accentPeach: ACCENT_STRONG, accentLavender: VIOLET, accentMint: SUCCESS, background: BG, speed: 1 } }
   ],
   textParam: "productName",
   subtextParam: "versionLabel",
@@ -3067,10 +3174,10 @@ var config3 = {
     '<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" }
+    { propPath: "accentPeach", cssVar: "--cf-accent", fallback: ACCENT_STRONG, brandKitPath: "colors.accent" },
+    { propPath: "accentLavender", cssVar: "--cf-accent-2", fallback: VIOLET, brandKitPath: "colors.accentMuted" },
+    { propPath: "accentMint", cssVar: "--cf-accent-3", fallback: SUCCESS, brandKitPath: "colors.accentMuted" },
+    { propPath: "background", cssVar: "--cf-bg", fallback: BG, brandKitPath: "colors.background" }
   ],
   durationInFrames: 240,
   fps: 30,
@@ -3084,7 +3191,10 @@ 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."),
+  screenSrc: z4.string().url().meta({ cueframeAsset: true }).optional().describe(
+    "Screenshot to show on the screen (object-fit cover). Omitted: the placeholder mock UI."
+  ),
+  accentColor: z4.string().default(SUCCESS).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();
@@ -3094,10 +3204,10 @@ var config4 = {
   name: "Hero Device Assemble",
   category: "scenes",
   kind: "scene",
-  version: "0.1.1",
+  version: "0.1.2",
   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"`.',
+  useWhen: 'App / SaaS hero loops, product-page intros, "see it on your device" moments, ad pre-rolls. Use `device="phone"` for mobile-first products. Give it a real screenshot via `screenSrc` \u2014 without one the screen wakes to a placeholder mock dashboard. 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",
@@ -3105,32 +3215,32 @@ var config4 = {
   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 },
+  propDefaults: { assembleStart: 0, device: "laptop", accentColor: SUCCESS, speed: 1 },
   primitivesUsed: [],
   examples: [
     {
       name: "laptop-green",
       mood: ["tech-demo", "corporate"],
-      params: { assembleStart: 0, device: "laptop", accentColor: "#7fae7a", speed: 1 },
+      params: { assembleStart: 0, device: "laptop", accentColor: SUCCESS, 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."
+      params: { assembleStart: 0, device: "phone", accentColor: VIOLET, speed: 1 },
+      description: "Phone variant with violet accent. Use for mobile-first product launches."
     },
     {
       name: "delayed-laptop",
       mood: ["cinematic"],
-      params: { assembleStart: 30, device: "laptop", accentColor: "#7b93b0", speed: 1 },
+      params: { assembleStart: 30, device: "laptop", accentColor: BLUE, 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" }
+    { propPath: "accentColor", cssVar: "--cf-accent", fallback: SUCCESS, brandKitPath: "colors.accent" }
   ],
   durationInFrames: 240,
   fps: 30,
@@ -3150,7 +3260,7 @@ var paramsSchema5 = z5.object({
     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.'),
+  accentColor: z5.string().default(SUCCESS).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();
@@ -3171,25 +3281,25 @@ var config5 = {
   tags: ["scene", "pricing", "tiers", "saas", "upsell", "plans"],
   mood: ["corporate", "tech-demo", "minimal"],
   paramsSchema: paramsSchema5,
-  propDefaults: { focusedTier: 1, accentColor: "#7fae7a", speed: 1 },
+  propDefaults: { focusedTier: 1, accentColor: SUCCESS, speed: 1 },
   primitivesUsed: [],
   examples: [
     {
       name: "pro-upsell",
       mood: ["corporate"],
-      params: { focusedTier: 1, accentColor: "#7fae7a", speed: 1 },
+      params: { focusedTier: 1, accentColor: SUCCESS, 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."
+      params: { focusedTier: 2, accentColor: VIOLET, speed: 1 },
+      description: "Spotlight Enterprise with violet accent. Use in sales-deck loops or B2B trailers."
     },
     {
       name: "free-onboarding",
       mood: ["playful", "minimal"],
-      params: { focusedTier: 0, accentColor: "#7b93b0", speed: 1 },
+      params: { focusedTier: 0, accentColor: BLUE, speed: 1 },
       description: "Spotlight the Free tier with sky-blue accent. Use in product-led-growth onboarding videos."
     }
   ],
@@ -3219,7 +3329,7 @@ var config5 = {
     // badge on the focused tier
   ],
   tokens: [
-    { propPath: "accentColor", cssVar: "--cf-accent", fallback: "#7fae7a", brandKitPath: "colors.accent" }
+    { propPath: "accentColor", cssVar: "--cf-accent", fallback: SUCCESS, brandKitPath: "colors.accent" }
   ],
   durationInFrames: 240,
   fps: 30,
@@ -3231,7 +3341,7 @@ var config5 = {
 // ../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."),
+  accentColor: z6.string().default(ACCENT_SOFT).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 = {
@@ -3242,7 +3352,7 @@ var config6 = {
   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.',
+  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 dark 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"],
@@ -3251,7 +3361,7 @@ var config6 = {
   tags: ["scene", "landing", "code", "showcase", "hero", "split-pane", "components", "library"],
   mood: ["cinematic", "tech-demo", "editorial"],
   paramsSchema: paramsSchema6,
-  propDefaults: { accentColor: "#FFB38E", speed: 1 },
+  propDefaults: { accentColor: ACCENT_SOFT, speed: 1 },
   primitivesUsed: [
     "dashboard-populate",
     "frosted-glass-wipe",
@@ -3262,14 +3372,14 @@ var config6 = {
     {
       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."
+      params: { accentColor: ACCENT_SOFT, speed: 1 },
+      description: "Default soft indigo accent. Use for premium dev-tool landing pages where the dark 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.'
+      params: { accentColor: SUCCESS, speed: 1 },
+      description: 'Green accent \u2014 pairs well when the brand already uses green for "ship/deploy" semantics.'
     }
   ],
   textParam: null,
@@ -3290,7 +3400,7 @@ var config6 = {
     '<MaskedSlideReveal text="Ship to production." />'
   ],
   tokens: [
-    { propPath: "accentColor", cssVar: "--cf-accent", fallback: "#FFB38E", brandKitPath: "colors.accent" }
+    { propPath: "accentColor", cssVar: "--cf-accent", fallback: ACCENT_SOFT, brandKitPath: "colors.accent" }
   ],
   durationInFrames: LANDING_CODE_SHOWCASE_DURATION,
   fps: 30,
@@ -3303,7 +3413,7 @@ var config6 = {
 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."),
+  accentColor: z7.string().default(SUCCESS).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();
@@ -3324,26 +3434,26 @@ var config7 = {
   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 },
+  propDefaults: { siteUrl: "https://app.example.com", accentColor: SUCCESS, speed: 1 },
   primitivesUsed: [],
   examples: [
     {
       name: "green-ship",
       mood: ["tech-demo"],
-      params: { siteUrl: "https://app.example.com", accentColor: "#7fae7a", speed: 1 },
+      params: { siteUrl: "https://app.example.com", accentColor: SUCCESS, 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 },
+      params: { siteUrl: "https://acme.dev", accentColor: BLUE, 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."
+      params: { siteUrl: "https://remocn.dev", accentColor: VIOLET, speed: 1.4 },
+      description: "1.4x speed cut, violet accent. Use inside compilation montages where the deploy beat is one of several."
     }
   ],
   textParam: "siteUrl",
@@ -3365,7 +3475,7 @@ var config7 = {
     // browser hero headline + CTA
   ],
   tokens: [
-    { propPath: "accentColor", cssVar: "--cf-accent", fallback: "#7fae7a", brandKitPath: "colors.accent" }
+    { propPath: "accentColor", cssVar: "--cf-accent", fallback: SUCCESS, brandKitPath: "colors.accent" }
   ],
   durationInFrames: 240,
   fps: 30,
@@ -3374,6 +3484,61 @@ var config7 = {
   preview: { thumbnailFrame: 165, mode: "oneshot", defaultExample: "green-ship" }
 };
 
+// ../execution/primitives/src/scenes/device-showcase/config.ts
+import { z as z8 } from "zod";
+var paramsSchema8 = z8.object({
+  device: z8.enum(["laptop", "phone"]).default("laptop").describe("Procedural device body. `phone` for mobile-first products."),
+  screenSrc: z8.string().url().meta({ cueframeAsset: true }).optional().describe(
+    "Screenshot shown on the screen. Use a 16:10 image for laptop, ~1:2 for phone. Omitted: a neutral placeholder dashboard."
+  ),
+  move: z8.enum(["static", "dolly-in", "dolly-out", "drift", "tilt-reveal", "orbit"]).default("dolly-in").describe("Camera move over the scene."),
+  fov: z8.number().min(18).max(80).default(36).describe("Vertical field of view in degrees."),
+  amount: z8.number().optional().describe("Move magnitude: px for dolly/drift, degrees for tilt/orbit."),
+  easing: z8.enum(["entrance", "emphasis", "playful", "exit", "cross", "drama", "none"]).default("entrance"),
+  finish: z8.string().default("#2a2a30").describe("Chassis finish color (metallic)."),
+  background: z8.string().default(BG).describe("Backdrop color behind the vignette."),
+  accentColor: z8.string().default(ACCENT).describe("Accent used by the placeholder screen when no screenshot is given."),
+  openAngle: z8.number().min(60).max(130).default(100).describe("Laptop lid angle at rest (deg). Ignored for phone."),
+  lighting: z8.enum(["soft", "key", "rim"]).default("soft").describe("Studio lighting preset."),
+  speed: z8.number().min(0.25).max(4).default(1)
+}).passthrough();
+var config8 = {
+  id: "device-showcase",
+  component: DeviceShowcase,
+  name: "Device Showcase",
+  category: "scenes",
+  kind: "scene",
+  version: "0.1.0",
+  graphics: "webgl",
+  intent: "device-hero",
+  description: "A lit, procedurally modelled laptop or phone in 3D showing your screenshot, with studio lighting, reflections, a contact shadow, and a camera move. The laptop lid opens on the first beat.",
+  useWhen: 'Hero shots for app and SaaS launches, "see it on your device" beats, ad pre-rolls. Give it a real screenshot via screenSrc \u2014 the placeholder is only for previews. Pair with a title before and a CTA after. Needs ~3 s for the lid and dolly to land. It is an overlay, so wrap effects (stage-camera, color-grade, blur) never reach it: use its own `move`, `fov` and `lighting` for camera and look.',
+  pairsWith: ["cinematic-title", "vignette", "grain"],
+  avoidWith: ["hero-device-assemble", "device-mockup-zoom"],
+  tier: "recommended",
+  useCase: ["intro", "full-scene"],
+  tags: ["device", "laptop", "phone", "mockup", "3d", "lit", "screenshot", "hero", "product"],
+  mood: ["cinematic", "tech-demo", "minimal", "corporate"],
+  paramsSchema: paramsSchema8,
+  propDefaults: { device: "laptop", move: "dolly-in", fov: 36, easing: "entrance", finish: "#2a2a30", background: BG, accentColor: ACCENT, openAngle: 100, lighting: "soft", speed: 1 },
+  examples: [
+    { name: "laptop-dolly", mood: ["cinematic"], params: { device: "laptop", move: "dolly-in" }, description: "Default: laptop settles in from far while the lid opens." },
+    { name: "phone-orbit", mood: ["tech-demo"], params: { device: "phone", move: "orbit", amount: 18, lighting: "rim" }, description: "Phone with a slow orbit and rim light." },
+    { name: "laptop-tilt", mood: ["minimal"], params: { device: "laptop", move: "tilt-reveal", openAngle: 95 } }
+  ],
+  textParam: null,
+  subtextParam: null,
+  tokens: [
+    { propPath: "accentColor", cssVar: "--cf-accent", fallback: ACCENT, brandKitPath: "colors.accent" },
+    { propPath: "background", cssVar: "--cf-bg", fallback: BG, brandKitPath: "colors.background" }
+  ],
+  durationInFrames: 150,
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  preview: { thumbnailFrame: 100, mode: "oneshot", defaultExample: "laptop-dolly" }
+};
+
 // ../execution/primitives/src/scenes/index.ts
 var catalog = [
   config,
@@ -3382,7 +3547,8 @@ var catalog = [
   config4,
   config5,
   config6,
-  config7
+  config7,
+  config8
 ];
 
 export {
@@ -3393,5 +3559,6 @@ export {
   PricingTierFocus,
   TerminalToBrowserDeploy,
   LandingCodeShowcase,
+  DeviceShowcase,
   catalog
 };