@cueframe/kernel 0.2.2 → 0.2.4

package/dist/{chunk-U5LBYS3N.js → chunk-VLJOIUHL.js}

@@ -1,16 +1,19 @@
+import {
+  DashboardPopulate
+} from "./chunk-S5H6GH6M.js";
+import {
+  useFrameScale
+} from "./chunk-QAGGJHAF.js";
 import {
   resolveTypeface
-} from "./chunk-BDMTUEEZ.js";
+} from "./chunk-LT4PWSR2.js";
 import {
   FLOOR_SHADOW
-} from "./chunk-EMGFZ3PR.js";
+} from "./chunk-FWSJLHSV.js";
 import {
   FitText,
   resolveFitFontSize
 } from "./chunk-XHGZ2E77.js";
-import {
-  DashboardPopulate
-} from "./chunk-ZSZABOE5.js";
 import {
   ACCENT,
   ACCENT_DEEP,
@@ -40,7 +43,7 @@ import {
   TEXT_MUTED,
   VIOLET,
   WARNING
-} from "./chunk-CX2IIQ4R.js";
+} from "./chunk-W2245F6G.js";
 
 // ../execution/primitives/src/ui-blocks/glass-code-block/index.tsx
 import { Sequence, interpolate, useCurrentFrame } from "remotion";
@@ -117,7 +120,9 @@ function GlassCodeBlock({
   speed = 1,
   className
 }) {
+  const s = useFrameScale();
   const lines = code.split("\n");
+  const scaledFontSize = fontSize * s;
   return /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -137,11 +142,11 @@ function GlassCodeBlock({
       {
         style: {
           position: "relative",
-          padding: 1,
-          borderRadius: 16,
+          padding: 1 * s,
+          borderRadius: 16 * s,
           background: "linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 100%)",
-          width,
-          height
+          width: width * s,
+          height: height * s
         }
       },
       /* @__PURE__ */ React.createElement(
@@ -150,10 +155,10 @@ function GlassCodeBlock({
           style: {
             width: "100%",
             height: "100%",
-            borderRadius: 15,
+            borderRadius: 15 * s,
             background: glassColor,
-            backdropFilter: "blur(16px)",
-            WebkitBackdropFilter: "blur(16px)",
+            backdropFilter: `blur(${16 * s}px)`,
+            WebkitBackdropFilter: `blur(${16 * s}px)`,
             display: "flex",
             flexDirection: "column",
             overflow: "hidden",
@@ -164,15 +169,15 @@ function GlassCodeBlock({
           "div",
           {
             style: {
-              height: 40,
+              height: 40 * s,
               display: "flex",
               alignItems: "center",
-              gap: 8,
-              padding: "0 16px",
+              gap: 8 * s,
+              padding: `0 ${16 * s}px`,
               borderBottom: "1px solid rgba(255,255,255,0.06)"
             }
           },
-          showTrafficLights && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Light, { color: MAC_RED }), /* @__PURE__ */ React.createElement(Light, { color: MAC_YELLOW }), /* @__PURE__ */ React.createElement(Light, { color: MAC_GREEN })),
+          showTrafficLights && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Light, { color: MAC_RED, size: 12 * s }), /* @__PURE__ */ React.createElement(Light, { color: MAC_YELLOW, size: 12 * s }), /* @__PURE__ */ React.createElement(Light, { color: MAC_GREEN, size: 12 * s })),
           /* @__PURE__ */ React.createElement(
             "div",
             {
@@ -180,7 +185,7 @@ function GlassCodeBlock({
                 flex: 1,
                 textAlign: "center",
                 color: TEXT_MUTED,
-                fontSize: 12,
+                fontSize: 12 * s,
                 letterSpacing: "0.02em"
               }
             },
@@ -192,11 +197,11 @@ function GlassCodeBlock({
           {
             style: {
               flex: 1,
-              padding: "20px 24px",
+              padding: `${20 * s}px ${24 * s}px`,
               display: "flex",
               flexDirection: "column",
-              gap: 4,
-              fontSize,
+              gap: 4 * s,
+              fontSize: scaledFontSize,
               lineHeight: 1.55
             }
           },
@@ -207,20 +212,28 @@ function GlassCodeBlock({
               from: Math.round(i * staggerFrames / speed),
               layout: "none"
             },
-            /* @__PURE__ */ React.createElement(CodeLine, { line, index: i, fontSize })
+            /* @__PURE__ */ React.createElement(
+              CodeLine,
+              {
+                line,
+                index: i,
+                fontSize: scaledFontSize,
+                gutterWidth: 28 * s
+              }
+            )
           ))
         )
       )
     )
   );
 }
-function Light({ color }) {
+function Light({ color, size }) {
   return /* @__PURE__ */ React.createElement(
     "div",
     {
       style: {
-        width: 12,
-        height: 12,
+        width: size,
+        height: size,
         borderRadius: "50%",
         background: color,
         opacity: 0.6
@@ -231,7 +244,8 @@ function Light({ color }) {
 function CodeLine({
   line,
   index,
-  fontSize
+  fontSize,
+  gutterWidth
 }) {
   const frame = useCurrentFrame();
   const opacity = interpolate(frame, [0, 8], [0, 1], {
@@ -257,7 +271,17 @@ function CodeLine({
         gap: 0
       }
     },
-    /* @__PURE__ */ React.createElement("span", { style: { width: 28, color: TEXT_FAINT, userSelect: "none" } }, String(index + 1).padStart(2, " ")),
+    /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        style: {
+          width: gutterWidth,
+          color: TEXT_FAINT,
+          userSelect: "none"
+        }
+      },
+      String(index + 1).padStart(2, " ")
+    ),
     /* @__PURE__ */ React.createElement("span", null, tokens.map((t, i) => /* @__PURE__ */ React.createElement("span", { key: i, style: { color: TOKEN_COLORS[t.kind] } }, t.text)))
   );
 }
@@ -321,10 +345,12 @@ function TerminalSimulator({
 }) {
   const frame = useCurrentFrame2() * speed;
   const { fps } = useVideoConfig();
-  const lineHeight = Math.round(fontSize * 1.6);
+  const s = useFrameScale();
+  const scaledFontSize = fontSize * s;
+  const lineHeight = Math.round(scaledFontSize * 1.6);
   const visibleLines = 8;
-  const windowWidth = 900;
-  const windowHeight = 480;
+  const windowWidth = 900 * s;
+  const windowHeight = 480 * s;
   const starts = [];
   let acc = 10;
   for (let i = 0; i < lines.length; i++) {
@@ -362,7 +388,7 @@ function TerminalSimulator({
           width: windowWidth,
           height: windowHeight,
           background,
-          borderRadius: 12,
+          borderRadius: 12 * s,
           overflow: "hidden",
           border: `1px solid ${BORDER}`,
           display: "flex",
@@ -374,18 +400,18 @@ function TerminalSimulator({
         "div",
         {
           style: {
-            height: 40,
+            height: 40 * s,
             background: chromeColor,
             display: "flex",
             alignItems: "center",
-            padding: "0 16px",
-            gap: 8,
+            padding: `0 ${16 * s}px`,
+            gap: 8 * s,
             borderBottom: `1px solid ${BORDER_SOFT}`
           }
         },
-        /* @__PURE__ */ React.createElement(Light2, { color: MAC_RED }),
-        /* @__PURE__ */ React.createElement(Light2, { color: MAC_YELLOW }),
-        /* @__PURE__ */ React.createElement(Light2, { color: MAC_GREEN }),
+        /* @__PURE__ */ React.createElement(Light2, { color: MAC_RED, size: 12 * s }),
+        /* @__PURE__ */ React.createElement(Light2, { color: MAC_YELLOW, size: 12 * s }),
+        /* @__PURE__ */ React.createElement(Light2, { color: MAC_GREEN, size: 12 * s }),
         /* @__PURE__ */ React.createElement(
           "div",
           {
@@ -393,7 +419,7 @@ function TerminalSimulator({
               flex: 1,
               textAlign: "center",
               color: TEXT_MUTED,
-              fontSize: 13
+              fontSize: 13 * s
             }
           },
           title
@@ -404,7 +430,7 @@ function TerminalSimulator({
         {
           style: {
             flex: 1,
-            padding: 20,
+            padding: 20 * s,
             overflow: "hidden",
             position: "relative"
           }
@@ -414,9 +440,9 @@ function TerminalSimulator({
           {
             style: {
               position: "absolute",
-              left: 20,
-              right: 20,
-              top: 20,
+              left: 20 * s,
+              right: 20 * s,
+              top: 20 * s,
               transform: `translateY(${translateY}px)`
             }
           },
@@ -432,8 +458,9 @@ function TerminalSimulator({
               {
                 line,
                 prompt,
-                fontSize,
+                fontSize: scaledFontSize,
                 lineHeight,
+                scale: s,
                 charsPerFrame,
                 chunkSize,
                 fps,
@@ -446,13 +473,13 @@ function TerminalSimulator({
     )
   );
 }
-function Light2({ color }) {
+function Light2({ color, size }) {
   return /* @__PURE__ */ React.createElement(
     "div",
     {
       style: {
-        width: 12,
-        height: 12,
+        width: size,
+        height: size,
         borderRadius: "50%",
         background: color,
         opacity: 0.85
@@ -468,7 +495,8 @@ function TerminalLineRow({
   charsPerFrame,
   chunkSize,
   fps,
-  speed
+  speed,
+  scale
 }) {
   const localFrame = useCurrentFrame2() * speed;
   const totalChars = line.text.length;
@@ -497,7 +525,7 @@ function TerminalLineRow({
         whiteSpace: "pre"
       }
     },
-    line.type === "command" && /* @__PURE__ */ React.createElement("span", { style: { color: SUCCESS, marginRight: 8 } }, prompt),
+    line.type === "command" && /* @__PURE__ */ React.createElement("span", { style: { color: SUCCESS, marginRight: 8 * scale } }, prompt),
     /* @__PURE__ */ React.createElement("span", null, visible),
     !typingDone && cursorVisible && /* @__PURE__ */ React.createElement(
       "span",
@@ -507,7 +535,7 @@ function TerminalLineRow({
           width: fontSize * 0.55,
           height: fontSize,
           background: TYPE_COLORS[line.type],
-          marginLeft: 2
+          marginLeft: 2 * scale
         }
       }
     )
@@ -1162,31 +1190,37 @@ function BrowserFlow({
 }
 
 // ../execution/primitives/src/ui-blocks/device-mockup-zoom/index.tsx
-import { Easing, interpolate as interpolate5, useCurrentFrame as useCurrentFrame5, useVideoConfig as useVideoConfig4 } from "remotion";
-var FONT_FAMILY2 = "inherit";
-function DefaultScreen() {
+import { Easing, Img, interpolate as interpolate5, useCurrentFrame as useCurrentFrame5, useVideoConfig as useVideoConfig4 } from "remotion";
+function DefaultScreen({ src }) {
+  if (src) {
+    return /* @__PURE__ */ React.createElement(
+      Img,
+      {
+        src,
+        style: {
+          position: "absolute",
+          inset: 0,
+          width: "100%",
+          height: "100%",
+          objectFit: "cover"
+        }
+      }
+    );
+  }
   return /* @__PURE__ */ React.createElement(
     "div",
     {
       style: {
         position: "absolute",
         inset: 0,
-        background: `linear-gradient(135deg, ${ACCENT} 0%, ${VIOLET} 100%)`,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        color: TEXT_HI,
-        fontFamily: FONT_FAMILY2,
-        fontSize: 32,
-        fontWeight: 700,
-        letterSpacing: "-0.03em"
+        background: `linear-gradient(135deg, ${SURFACE_HI} 0%, ${BG} 100%)`
       }
-    },
-    "Your UI"
+    }
   );
 }
 function DeviceMockupZoom({
   children,
+  screenSrc,
   device = "laptop",
   frameColor = SURFACE,
   screenColor = BG,
@@ -1196,11 +1230,12 @@ function DeviceMockupZoom({
 }) {
   const frame = useCurrentFrame5() * speed;
   const { durationInFrames } = useVideoConfig4();
+  const s = useFrameScale();
   const scale = interpolate5(frame, [0, durationInFrames], [2, 1], {
     extrapolateRight: "clamp",
     easing: Easing.bezier(0.22, 1, 0.36, 1)
   });
-  const screen = children ?? /* @__PURE__ */ React.createElement(DefaultScreen, null);
+  const screen = children ?? /* @__PURE__ */ React.createElement(DefaultScreen, { src: screenSrc });
   return /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -1219,7 +1254,7 @@ function DeviceMockupZoom({
       "div",
       {
         style: {
-          transform: `scale(${scale})`,
+          transform: `scale(${scale * s})`,
           transformOrigin: "center center",
           willChange: "transform"
         }
@@ -1490,7 +1525,7 @@ function SimulatedCursor({
 
 // ../execution/primitives/src/ui-blocks/cursor-flow/index.tsx
 import { interpolate as interpolate7, spring as spring4, useCurrentFrame as useCurrentFrame7, useVideoConfig as useVideoConfig6 } from "remotion";
-var FONT_FAMILY3 = "inherit";
+var FONT_FAMILY2 = "inherit";
 var LABEL_TEXT_WIDTH = 200;
 var DEFAULT_WAYPOINTS = [
   { x: 200, y: 180 },
@@ -1574,7 +1609,7 @@ function CursorFlow({
         position: "absolute",
         inset: 0,
         background,
-        fontFamily: FONT_FAMILY3
+        fontFamily: FONT_FAMILY2
       }
     },
     showTargets && waypoints.map((wp, i) => {
@@ -1717,7 +1752,7 @@ function ClickTarget({
         maxFontSize: 14,
         maxWidth: LABEL_TEXT_WIDTH,
         maxLines: 1,
-        fontFamily: FONT_FAMILY3,
+        fontFamily: FONT_FAMILY2,
         fontWeight: 600
       },
       label ?? "Click"
@@ -1727,7 +1762,7 @@ function ClickTarget({
 
 // ../execution/primitives/src/ui-blocks/morphing-modal/index.tsx
 import { interpolate as interpolate8, spring as spring5, useCurrentFrame as useCurrentFrame8, useVideoConfig as useVideoConfig7 } from "remotion";
-var FONT_FAMILY4 = "inherit";
+var FONT_FAMILY3 = "inherit";
 var VIEWPORT_W = 1280;
 var VIEWPORT_H = 720;
 var DEFAULT_FROM = {
@@ -1794,7 +1829,7 @@ function MorphingModal({
         position: "absolute",
         inset: 0,
         background,
-        fontFamily: FONT_FAMILY4,
+        fontFamily: FONT_FAMILY3,
         overflow: "hidden"
       }
     },
@@ -1845,7 +1880,7 @@ function MorphingModal({
             maxFontSize: 20,
             maxWidth: 304,
             maxLines: 2,
-            fontFamily: FONT_FAMILY4,
+            fontFamily: FONT_FAMILY3,
             fontWeight: 700,
             letterSpacing: "-0.01em",
             style: { color: textColor }
@@ -1857,7 +1892,7 @@ function MorphingModal({
             maxFontSize: 14,
             maxWidth: 304,
             maxLines: 4,
-            fontFamily: FONT_FAMILY4,
+            fontFamily: FONT_FAMILY3,
             style: { color: mutedColor }
           },
           sourceBody
@@ -1883,7 +1918,7 @@ function MorphingModal({
             maxFontSize: 56,
             maxWidth: 720,
             maxLines: 2,
-            fontFamily: FONT_FAMILY4,
+            fontFamily: FONT_FAMILY3,
             fontWeight: 700,
             letterSpacing: "-0.03em",
             style: { color: textColor, lineHeight: 1.05 }
@@ -1895,7 +1930,7 @@ function MorphingModal({
             maxFontSize: 20,
             maxWidth: 720,
             maxLines: 6,
-            fontFamily: FONT_FAMILY4,
+            fontFamily: FONT_FAMILY3,
             style: { lineHeight: 1.55, color: mutedColor }
           },
           modalBody
@@ -3442,7 +3477,7 @@ var BeforeAfterSlider = ({
 
 // ../execution/primitives/src/ui-blocks/bounding-box-selector/index.tsx
 import { spring as spring15, useCurrentFrame as useCurrentFrame20, useVideoConfig as useVideoConfig19 } from "remotion";
-var FONT_FAMILY5 = "inherit";
+var FONT_FAMILY4 = "inherit";
 function DefaultPlaceholder() {
   return /* @__PURE__ */ React.createElement(
     "div",
@@ -3457,7 +3492,7 @@ function DefaultPlaceholder() {
         alignItems: "center",
         justifyContent: "center",
         color: TEXT_MUTED,
-        fontFamily: FONT_FAMILY5,
+        fontFamily: FONT_FAMILY4,
         fontSize: 24,
         fontWeight: 600,
         letterSpacing: "-0.02em"
@@ -3577,7 +3612,7 @@ import {
   useCurrentFrame as useCurrentFrame21,
   useVideoConfig as useVideoConfig20
 } from "remotion";
-var FONT_FAMILY6 = "inherit";
+var FONT_FAMILY5 = "inherit";
 var ICON_GLYPHS = ["B", "S", "C", "P", "E", "T", "M", "L"];
 var PANEL_SLIDE_DURATION = 22;
 function ToolMenuSlideIn({
@@ -3620,7 +3655,7 @@ function ToolMenuSlideIn({
         inset: 0,
         overflow: "hidden",
         background,
-        fontFamily: FONT_FAMILY6,
+        fontFamily: FONT_FAMILY5,
         backgroundImage: "radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1px)",
         backgroundSize: "22px 22px"
       }
@@ -3850,8 +3885,13 @@ function CodeAccordion({
 }) {
   const frame = useCurrentFrame22() * speed;
   const { fps } = useVideoConfig21();
-  const lineHeight = Math.round(fontSize * 1.55);
-  const titleMaxWidth = Math.max(80, width - 96);
+  const s = useFrameScale();
+  const scaledFontSize = fontSize * s;
+  const scaledWidth = width * s;
+  const gutterWidth = 56 * s;
+  const gutterPadding = 16 * s;
+  const lineHeight = Math.round(scaledFontSize * 1.55);
+  const titleMaxWidth = Math.max(80 * s, scaledWidth - 96 * s);
   const [start, end] = collapseRange;
   const collapsedCount = Math.max(0, end - start + 1);
   const collapseProgress = spring17({
@@ -3894,9 +3934,9 @@ function CodeAccordion({
       "div",
       {
         style: {
-          width,
+          width: scaledWidth,
           background: cardColor,
-          borderRadius: 14,
+          borderRadius: 14 * s,
           overflow: "hidden",
           border: "1px solid rgba(255,255,255,0.06)"
         }
@@ -3905,17 +3945,17 @@ function CodeAccordion({
         "div",
         {
           style: {
-            height: 38,
+            height: 38 * s,
             display: "flex",
             alignItems: "center",
-            gap: 8,
-            padding: "0 14px",
+            gap: 8 * s,
+            padding: `0 ${14 * s}px`,
             borderBottom: "1px solid rgba(255,255,255,0.05)"
           }
         },
-        /* @__PURE__ */ React.createElement(Light3, { color: MAC_RED }),
-        /* @__PURE__ */ React.createElement(Light3, { color: MAC_YELLOW }),
-        /* @__PURE__ */ React.createElement(Light3, { color: MAC_GREEN }),
+        /* @__PURE__ */ React.createElement(Light3, { color: MAC_RED, size: 11 * s }),
+        /* @__PURE__ */ React.createElement(Light3, { color: MAC_YELLOW, size: 11 * s }),
+        /* @__PURE__ */ React.createElement(Light3, { color: MAC_GREEN, size: 11 * s }),
         /* @__PURE__ */ React.createElement(
           "div",
           {
@@ -3929,7 +3969,7 @@ function CodeAccordion({
           /* @__PURE__ */ React.createElement(
             FitText,
             {
-              maxFontSize: 12,
+              maxFontSize: 12 * s,
               maxWidth: titleMaxWidth,
               maxLines: 1,
               fontFamily: FONT_MONO2,
@@ -3939,79 +3979,101 @@ function CodeAccordion({
           )
         )
       ),
-      /* @__PURE__ */ React.createElement("div", { style: { padding: "16px 0", fontSize, lineHeight: 1.55 } }, before.map((line, i) => /* @__PURE__ */ React.createElement(
-        Line,
-        {
-          key: `b-${i}`,
-          line,
-          index: i,
-          lineHeight,
-          textColor,
-          mutedColor
-        }
-      )), /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement(
         "div",
         {
           style: {
-            position: "relative",
-            height: collapsedHeight,
-            overflow: "hidden",
-            transition: "none"
+            padding: `${16 * s}px 0`,
+            fontSize: scaledFontSize,
+            lineHeight: 1.55
           }
         },
-        /* @__PURE__ */ React.createElement("div", { style: { opacity: collapsedOpacity } }, collapsed.map((line, i) => /* @__PURE__ */ React.createElement(
+        before.map((line, i) => /* @__PURE__ */ React.createElement(
           Line,
           {
-            key: `c-${i}`,
+            key: `b-${i}`,
             line,
-            index: start + i,
+            index: i,
             lineHeight,
+            gutterWidth,
+            gutterPadding,
             textColor,
             mutedColor
           }
-        ))),
+        )),
         /* @__PURE__ */ React.createElement(
           "div",
           {
             style: {
-              position: "absolute",
-              left: 0,
-              right: 0,
-              bottom: 0,
-              height: lineHeight,
-              display: "flex",
-              alignItems: "center",
-              paddingLeft: 56,
-              color: mutedColor,
-              fontStyle: "italic",
-              opacity: placeholderOpacity
+              position: "relative",
+              height: collapsedHeight,
+              overflow: "hidden",
+              transition: "none"
             }
           },
-          "\u22EF ",
-          collapsedCount,
-          " lines collapsed"
-        )
-      ), after.map((line, i) => /* @__PURE__ */ React.createElement(
-        Line,
-        {
-          key: `a-${i}`,
-          line,
-          index: end + 1 + i,
-          lineHeight,
-          textColor,
-          mutedColor
-        }
-      )))
+          /* @__PURE__ */ React.createElement("div", { style: { opacity: collapsedOpacity } }, collapsed.map((line, i) => /* @__PURE__ */ React.createElement(
+            Line,
+            {
+              key: `c-${i}`,
+              line,
+              index: start + i,
+              lineHeight,
+              gutterWidth,
+              gutterPadding,
+              textColor,
+              mutedColor
+            }
+          ))),
+          /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                left: 0,
+                right: 0,
+                bottom: 0,
+                height: lineHeight,
+                display: "flex",
+                alignItems: "center",
+                paddingLeft: gutterWidth,
+                color: mutedColor,
+                // No italic here. This row inherits FONT_MONO (Space Mono), which ships one
+                // upright file per weight and no italic binary, so `fontStyle: "italic"` asked the
+                // browser to slant the upright face — a synthesised oblique, not the typeface, and
+                // not reproducible across engines. The row is already set apart by the muted
+                // colour and the reduced opacity.
+                opacity: placeholderOpacity
+              }
+            },
+            "\u22EF ",
+            collapsedCount,
+            " lines collapsed"
+          )
+        ),
+        after.map((line, i) => /* @__PURE__ */ React.createElement(
+          Line,
+          {
+            key: `a-${i}`,
+            line,
+            index: end + 1 + i,
+            lineHeight,
+            gutterWidth,
+            gutterPadding,
+            textColor,
+            mutedColor
+          }
+        ))
+      )
     )
   );
 }
-function Light3({ color }) {
+function Light3({ color, size }) {
   return /* @__PURE__ */ React.createElement(
     "div",
     {
       style: {
-        width: 11,
-        height: 11,
+        width: size,
+        height: size,
         borderRadius: "50%",
         background: color,
         opacity: 0.6
@@ -4023,6 +4085,8 @@ function Line({
   line,
   index,
   lineHeight,
+  gutterWidth,
+  gutterPadding,
   textColor,
   mutedColor
 }) {
@@ -4041,9 +4105,9 @@ function Line({
       "span",
       {
         style: {
-          width: 56,
+          width: gutterWidth,
           textAlign: "right",
-          paddingRight: 16,
+          paddingRight: gutterPadding,
           color: mutedColor,
           userSelect: "none"
         }
@@ -4056,7 +4120,7 @@ function Line({
 
 // ../execution/primitives/src/ui-blocks/ai-generation-canvas/index.tsx
 import { interpolate as interpolate21, spring as spring18, useCurrentFrame as useCurrentFrame23, useVideoConfig as useVideoConfig22 } from "remotion";
-var FONT_FAMILY7 = "inherit";
+var FONT_FAMILY6 = "inherit";
 function MiniBarChart({ accentColor }) {
   const bars = [0.4, 0.7, 0.55, 0.85, 0.5, 0.95, 0.65];
   return /* @__PURE__ */ React.createElement(
@@ -4122,7 +4186,7 @@ function StatBlock({
         fontWeight: 700,
         color: TEXT_HI,
         letterSpacing: "-0.03em",
-        fontFamily: FONT_FAMILY7
+        fontFamily: FONT_FAMILY6
       }
     },
     value
@@ -4160,7 +4224,7 @@ function CardContent({
         fontSize: 12,
         color: "rgba(255,255,255,0.55)",
         fontWeight: 500,
-        fontFamily: FONT_FAMILY7,
+        fontFamily: FONT_FAMILY6,
         letterSpacing: "0.02em",
         textTransform: "uppercase"
       }
@@ -4238,7 +4302,7 @@ function AIGenerationCanvas({
         inset: 0,
         background: BG,
         overflow: "hidden",
-        fontFamily: FONT_FAMILY7
+        fontFamily: FONT_FAMILY6
       }
     },
     /* @__PURE__ */ React.createElement(
@@ -4427,7 +4491,7 @@ function AIGenerationCanvas({
             maxFontSize: inputFontSize,
             maxWidth: Math.max(1, inputW - 72),
             maxLines: 3,
-            fontFamily: FONT_FAMILY7,
+            fontFamily: FONT_FAMILY6,
             fontWeight: 500,
             letterSpacing: "-0.01em",
             style: { color: TEXT_HI }
@@ -4489,7 +4553,7 @@ function AIGenerationCanvas({
 
 // ../execution/primitives/src/ui-blocks/ai-generate-overlay/index.tsx
 import { interpolate as interpolate22, spring as spring19, useCurrentFrame as useCurrentFrame24, useVideoConfig as useVideoConfig23 } from "remotion";
-var FONT_FAMILY8 = "inherit";
+var FONT_FAMILY7 = "inherit";
 var PILL_TEXT_WIDTH = 360;
 var DEFAULT_SOURCE_BG = `linear-gradient(135deg, ${BG_DEEP} 0%, ${BLUE} 50%, ${SURFACE} 100%)`;
 var DEFAULT_GENERATED_BG = `radial-gradient(ellipse at center, ${ACCENT_SOFT} 0%, ${ACCENT_DEEP} 22%, ${BG_DEEP} 42%), linear-gradient(180deg, ${BG} 0%, ${BG_DEEP} 50%, ${BG} 100%)`;
@@ -4557,7 +4621,7 @@ function AIGenerateOverlay({
         position: "absolute",
         inset: 0,
         background,
-        fontFamily: FONT_FAMILY8,
+        fontFamily: FONT_FAMILY7,
         overflow: "hidden"
       }
     },
@@ -4675,7 +4739,7 @@ function AIGenerateOverlay({
           {
             maxFontSize: 18,
             maxWidth: PILL_TEXT_WIDTH,
-            fontFamily: FONT_FAMILY8,
+            fontFamily: FONT_FAMILY7,
             fontWeight: 500,
             letterSpacing: "-0.01em"
           },
@@ -4939,7 +5003,7 @@ function DragAndDropFlow({
 
 // ../execution/primitives/src/ui-blocks/data-flow-pipes/index.tsx
 import { interpolate as interpolate24, useCurrentFrame as useCurrentFrame26 } from "remotion";
-var FONT_FAMILY9 = "inherit";
+var FONT_FAMILY8 = "inherit";
 var NODE_LABEL_WIDTH = 104;
 var DEFAULT_NODES = [
   { id: "client", x: 140, y: 360, label: "Client" },
@@ -5008,7 +5072,7 @@ function DataFlowPipes({
         position: "absolute",
         inset: 0,
         background,
-        fontFamily: FONT_FAMILY9
+        fontFamily: FONT_FAMILY8
       }
     },
     /* @__PURE__ */ React.createElement(
@@ -5113,7 +5177,7 @@ function DataFlowPipes({
           maxFontSize: 14,
           maxWidth: NODE_LABEL_WIDTH,
           maxLines: 1,
-          fontFamily: FONT_FAMILY9,
+          fontFamily: FONT_FAMILY8,
           fontWeight: 600,
           letterSpacing: "-0.01em"
         },
@@ -5125,7 +5189,7 @@ function DataFlowPipes({
 
 // ../execution/primitives/src/ui-blocks/pipeline-journey/index.tsx
 import { interpolate as interpolate25, spring as spring20, useCurrentFrame as useCurrentFrame27, useVideoConfig as useVideoConfig25 } from "remotion";
-var FONT_FAMILY10 = "inherit";
+var FONT_FAMILY9 = "inherit";
 var MONO_FAMILY2 = "monospace";
 var COLUMNS = [
   { id: "todo", title: "Todo", count: 3 },
@@ -5298,7 +5362,7 @@ function PipelineJourney({
         position: "absolute",
         inset: 0,
         background: BG,
-        fontFamily: FONT_FAMILY10,
+        fontFamily: FONT_FAMILY9,
         color: TEXT_HI,
         overflow: "hidden"
       }
@@ -5435,7 +5499,7 @@ function PipelineJourney({
           maxFontSize: 16,
           maxWidth: CARD_W - 32,
           maxLines: 2,
-          fontFamily: FONT_FAMILY10,
+          fontFamily: FONT_FAMILY9,
           fontWeight: 600,
           letterSpacing: "-0.01em"
         },
@@ -5522,7 +5586,7 @@ import {
   useCurrentFrame as useCurrentFrame28,
   useVideoConfig as useVideoConfig26
 } from "remotion";
-var FONT_FAMILY11 = "inherit";
+var FONT_FAMILY10 = "inherit";
 var SOFT = Easing8.bezier(0.16, 1, 0.3, 1);
 var BROWSER = {
   left: 100,
@@ -5633,7 +5697,7 @@ function VisualDocsSnippet({
       className,
       style: {
         background,
-        fontFamily: FONT_FAMILY11
+        fontFamily: FONT_FAMILY10
       }
     },
     /* @__PURE__ */ React.createElement(
@@ -5741,7 +5805,7 @@ function VisualDocsSnippet({
         {
           maxFontSize: 17,
           maxWidth: BUTTON.width - 32,
-          fontFamily: FONT_FAMILY11,
+          fontFamily: FONT_FAMILY10,
           fontWeight: 600,
           style: { color: BG_DEEP }
         },
@@ -5941,7 +6005,7 @@ function Tooltip({
         backdropFilter: "blur(14px)",
         WebkitBackdropFilter: "blur(14px)",
         opacity: settle,
-        fontFamily: FONT_FAMILY11
+        fontFamily: FONT_FAMILY10
       }
     },
     /* @__PURE__ */ React.createElement(
@@ -5949,7 +6013,7 @@ function Tooltip({
       {
         maxFontSize: 17,
         maxWidth: 276,
-        fontFamily: FONT_FAMILY11,
+        fontFamily: FONT_FAMILY10,
         fontWeight: 600,
         letterSpacing: "-0.01em",
         style: {
@@ -5967,7 +6031,7 @@ function Tooltip({
         maxFontSize: 14,
         maxWidth: 276,
         maxLines: 4,
-        fontFamily: FONT_FAMILY11,
+        fontFamily: FONT_FAMILY10,
         style: {
           opacity: bodyT,
           transform: `translateY(${(1 - bodyT) * 12}px)`,
@@ -6013,7 +6077,7 @@ function lerp(a, b, t) {
 
 // ../execution/primitives/src/ui-blocks/brush-stroke-simulator/index.tsx
 import { interpolate as interpolate27, spring as spring22, useCurrentFrame as useCurrentFrame29, useVideoConfig as useVideoConfig27 } from "remotion";
-var FONT_FAMILY12 = "inherit";
+var FONT_FAMILY11 = "inherit";
 var STAGE_W = 1280;
 var STAGE_H = 720;
 var WAYPOINTS = [
@@ -6116,7 +6180,7 @@ function BrushStrokeSimulator({
         inset: 0,
         overflow: "hidden",
         background,
-        fontFamily: FONT_FAMILY12,
+        fontFamily: FONT_FAMILY11,
         opacity: introOpacity
       }
     },
@@ -6196,7 +6260,7 @@ function BrushStrokeSimulator({
 
 // ../execution/primitives/src/ui-blocks/image-expand-to-fullscreen/index.tsx
 import { interpolate as interpolate28, spring as spring23, useCurrentFrame as useCurrentFrame30, useVideoConfig as useVideoConfig28 } from "remotion";
-var FONT_FAMILY13 = "inherit";
+var FONT_FAMILY12 = "inherit";
 var DEFAULT_FROM2 = {
   left: 460,
   top: 280,
@@ -6267,7 +6331,7 @@ function ImageExpandToFullscreen({
         position: "absolute",
         inset: 0,
         overflow: "hidden",
-        fontFamily: FONT_FAMILY13
+        fontFamily: FONT_FAMILY12
       }
     },
     /* @__PURE__ */ React.createElement(
@@ -6325,7 +6389,7 @@ function ImageExpandToFullscreen({
         {
           maxFontSize: 15,
           maxWidth: 416,
-          fontFamily: FONT_FAMILY13,
+          fontFamily: FONT_FAMILY12,
           fontWeight: 600,
           letterSpacing: "-0.005em",
           style: { color: BG }
@@ -6338,7 +6402,7 @@ function ImageExpandToFullscreen({
           maxFontSize: 14,
           maxWidth: 472,
           maxLines: 4,
-          fontFamily: FONT_FAMILY13,
+          fontFamily: FONT_FAMILY12,
           style: { lineHeight: 1.5, color: SURFACE_HI }
         },
         postBody
@@ -6483,9 +6547,9 @@ import { z } from "zod";
 var paramsSchema = z.object({
   code: z.string().default('// Example\nimport { Typewriter } from "@cueframe/primitives/text";\n\nexport const App = () => <Typewriter text="Hello" />;').describe("Code content. Newlines preserved; basic syntax highlighting applied."),
   title: z.string().default("App.tsx").describe("Filename in the window chrome."),
-  width: z.number().int().min(200).max(2e3).optional().describe("Block width in pixels. Defaults to fit container."),
-  height: z.number().int().min(120).max(1400).optional().describe("Block height in pixels. Defaults to fit content."),
-  fontSize: z.number().min(10).max(48).default(16).describe("Code font size in pixels."),
+  width: z.number().int().min(200).max(2e3).optional().describe("Block width in pixels on the 1280-wide authoring frame. Scaled with the frame: every px value here is multiplied by max(0.5, frameWidth/1280), so a 1920-wide render draws it 1.5x larger, and the 0.5x floor pins anything narrower than 640. Defaults to fit container."),
+  height: z.number().int().min(120).max(1400).optional().describe("Block height in pixels on the 1280-wide authoring frame. Scaled with the frame: every px value here is multiplied by max(0.5, frameWidth/1280), so a 1920-wide render draws it 1.5x larger, and the 0.5x floor pins anything narrower than 640. Defaults to fit content."),
+  fontSize: z.number().min(10).max(48).default(16).describe("Code font size in pixels on the 1280-wide authoring frame. Scaled with the frame: every px value here is multiplied by max(0.5, frameWidth/1280), so a 1920-wide render draws it 1.5x larger, and the 0.5x floor pins anything narrower than 640."),
   background: z.string().default("rgba(20, 20, 30, 0.7)").describe("Glass tint color (low alpha for the glassmorphism look)."),
   glassColor: z.string().default("rgba(255, 255, 255, 0.05)").describe("Highlight gradient over the glass."),
   staggerFrames: z.number().int().min(0).max(20).default(3).describe("Frames between each line's entrance."),
@@ -6544,7 +6608,7 @@ var paramsSchema2 = z2.object({
   title: z2.string().default("Terminal").describe("Window title in the chrome."),
   background: z2.string().default("#0a0a0a").describe("Window background."),
   chromeColor: z2.string().default("#1f2937").describe("Window chrome (title-bar) color."),
-  fontSize: z2.number().min(10).max(48).default(18).describe("Font size in pixels."),
+  fontSize: z2.number().min(10).max(48).default(18).describe("Font size in pixels on the 1280-wide authoring frame. Scaled with the frame: every px value here is multiplied by max(0.5, frameWidth/1280), so a 1920-wide render draws it 1.5x larger, and the 0.5x floor pins anything narrower than 640."),
   charsPerFrame: z2.number().min(0.5).max(20).default(2).describe("Reveal rate (cps multiplier on the underlying chunk timer)."),
   chunkSize: z2.number().int().min(1).max(40).default(3).describe("Characters revealed per step. Higher = burstier output."),
   speed: z2.number().min(0.25).max(4).default(1).describe("Playback speed multiplier.")
@@ -6634,8 +6698,8 @@ var config3 = {
   textParam: "title",
   subtextParam: "message",
   tokens: [
-    { propPath: "cardColor", cssVar: "--cf-card", fallback: "#1c1611", brandKitPath: "colors.card" },
-    { propPath: "textColor", cssVar: "--cf-text", fallback: "#f4ece0", brandKitPath: "colors.textOnSurface" }
+    { propPath: "cardColor", cssVar: "--cf-card", fallback: SURFACE, brandKitPath: "colors.card" },
+    { propPath: "textColor", cssVar: "--cf-text", fallback: TEXT_HI, brandKitPath: "colors.textOnSurface" }
   ],
   durationInFrames: 120,
   fps: 30,
@@ -6702,6 +6766,9 @@ var paramsSchema5 = z5.object({
   device: z5.enum(["laptop", "phone"]).default("laptop").describe(
     "Device chrome shell. `laptop` for product/web demos; `phone` for mobile-app reveals."
   ),
+  screenSrc: z5.string().url().meta({ cueframeAsset: true }).optional().describe(
+    "Screenshot to show on the screen (object-fit cover). Omitted: a neutral gradient."
+  ),
   frameColor: z5.string().default(SURFACE).describe("Bezel/frame color of the device chrome."),
   screenColor: z5.string().default(BG).describe("Inner screen background behind any children."),
   background: z5.string().default(TEXT_HI).describe("Outer page background behind the device."),
@@ -6713,10 +6780,10 @@ var config5 = {
   name: "Device Mockup Zoom",
   category: "ui-blocks",
   kind: "component",
-  version: "0.1.1",
+  version: "0.1.2",
   intent: "mock-device",
   description: 'Laptop or phone bezel that starts at 2\xD7 zoom and eases down to 1\xD7 over the duration. Wraps any child content as the screen, so it doubles as a "this is your UI" reveal frame.',
-  useWhen: 'App/product reveal hooks, hero shots, "the new dashboard" intros, mockup heroes for marketing. Pair with a dashboard or static screen as children. Avoid for kinetic browser navigation flows (use browser-flow) or when the screen content needs cursor interaction (use a separate component composed inside).',
+  useWhen: 'App/product reveal hooks, hero shots, "the new dashboard" intros, mockup heroes for marketing. Pair with a dashboard or static screen as children, or pass a real screenshot as `screenSrc` when there is nothing to compose inside \u2014 with neither, the screen is only a neutral gradient. Avoid for kinetic browser navigation flows (use browser-flow) or when the screen content needs cursor interaction (use a separate component composed inside).',
   pairsWith: ["browser-flow", "mesh-gradient-bg", "glass-code-block", "dashboard-populate"],
   avoidWith: [],
   tier: "standard",
@@ -6755,8 +6822,8 @@ var config5 = {
 // ../execution/primitives/src/ui-blocks/simulated-cursor/config.ts
 import { z as z6 } from "zod";
 var cursorPointSchema = z6.object({
-  x: z6.number().describe("X coordinate in pixels (canonical 1280-wide stage)."),
-  y: z6.number().describe("Y coordinate in pixels (canonical 720-tall stage)."),
+  x: z6.number().describe("X in absolute frame pixels, not rescaled: 0 is the left edge and the frame width is the right one. The centre of a 1920-wide render is 960, not 640."),
+  y: z6.number().describe("Y in absolute frame pixels, not rescaled: 0 is the top edge and the frame height is the bottom one. The centre of a 1080-tall render is 540, not 360."),
   hold: z6.number().int().min(0).max(120).optional().describe("Frames to hold here before moving on. Defaults to 15."),
   click: z6.boolean().optional().describe("Fire a click ripple + dip when arriving at this point.")
 }).passthrough();
@@ -6764,9 +6831,9 @@ var paramsSchema6 = z6.object({
   points: z6.array(cursorPointSchema).min(1).optional().describe(
     "Ordered cursor waypoints. Each leg takes ~24 frames to traverse plus the destination's `hold`. Defaults to a 3-point sample path."
   ),
-  color: z6.string().default("#f4ece0").describe("Cursor fill color."),
+  color: z6.string().default(TEXT_HI).describe("Cursor fill color."),
   size: z6.number().int().min(12).max(96).default(32).describe("Cursor SVG size in pixels."),
-  background: z6.string().default("#14100c").describe("Stage background \u2014 typically a dark canvas the cursor traverses."),
+  background: z6.string().default(BG).describe("Stage background \u2014 typically a dark canvas the cursor traverses."),
   speed: z6.number().min(0.25).max(4).default(1).describe("Playback speed multiplier on the entire path.")
 }).passthrough();
 var config6 = {
@@ -6786,7 +6853,7 @@ var config6 = {
   tags: ["ui", "cursor", "pointer", "click", "overlay"],
   mood: ["tech-demo", "minimal"],
   paramsSchema: paramsSchema6,
-  propDefaults: { color: "#f4ece0", size: 32, background: "#14100c", speed: 1 },
+  propDefaults: { color: TEXT_HI, size: 32, background: BG, speed: 1 },
   examples: [
     {
       name: "three-stop-tour",
@@ -6797,7 +6864,7 @@ var config6 = {
           { x: 800, y: 360, hold: 25, click: true },
           { x: 1050, y: 560, hold: 20 }
         ],
-        color: "#f4ece0"
+        color: TEXT_HI
       },
       description: "Default 3-point tour with one click in the middle."
     },
@@ -6810,7 +6877,7 @@ var config6 = {
           { x: 640, y: 360, hold: 30, click: true },
           { x: 1180, y: 100, hold: 5 }
         ],
-        color: "#f4ece0",
+        color: TEXT_HI,
         size: 28
       },
       description: "Enter, click center, exit upper-right."
@@ -6819,8 +6886,8 @@ var config6 = {
   textParam: null,
   subtextParam: null,
   tokens: [
-    { propPath: "color", cssVar: "--cf-fg", fallback: "#f4ece0", brandKitPath: "colors.text" },
-    { propPath: "background", cssVar: "--cf-bg", fallback: "#14100c", brandKitPath: "colors.background" }
+    { propPath: "color", cssVar: "--cf-fg", fallback: TEXT_HI, brandKitPath: "colors.text" },
+    { propPath: "background", cssVar: "--cf-bg", fallback: BG, brandKitPath: "colors.background" }
   ],
   durationInFrames: 150,
   fps: 30,
@@ -6924,10 +6991,10 @@ var paramsSchema8 = z8.object({
   borderRadiusFrom: z8.number().min(0).max(80).default(24).describe("Corner radius before morph."),
   borderRadiusTo: z8.number().min(0).max(80).default(0).describe("Corner radius after morph (0 for sheet/full-bleed)."),
   morphAt: z8.number().int().min(0).max(300).default(30).describe("Frame at which the morph spring fires."),
-  background: z8.string().default("#14100c").describe("Stage background behind the modal + bento grid."),
-  cardColor: z8.string().default("#1c1611").describe("Card/modal fill color."),
-  textColor: z8.string().default("#f4ece0").describe("Title text color."),
-  mutedColor: z8.string().default("#b8a894").describe("Body / supporting text color."),
+  background: z8.string().default(BG).describe("Stage background behind the modal + bento grid."),
+  cardColor: z8.string().default(SURFACE).describe("Card/modal fill color."),
+  textColor: z8.string().default(TEXT_HI).describe("Title text color."),
+  mutedColor: z8.string().default(TEXT_MUTED).describe("Body / supporting text color."),
   sourceTitle: z8.string().max(120).default("Compose video").describe("Title shown on the source card (pre-morph). Auto-fits (shrinks + wraps to 2 lines)."),
   sourceBody: z8.string().max(220).default("Click to start a new project").describe("Body shown on the source card. Auto-fits (shrinks + wraps to 4 lines)."),
   modalTitle: z8.string().max(140).default("New project").describe("Hero title shown in the modal (post-morph). Auto-fits (shrinks + wraps to 2 lines)."),
@@ -6955,10 +7022,10 @@ var config8 = {
     borderRadiusFrom: 24,
     borderRadiusTo: 0,
     morphAt: 30,
-    background: "#14100c",
-    cardColor: "#1c1611",
-    textColor: "#f4ece0",
-    mutedColor: "#b8a894",
+    background: BG,
+    cardColor: SURFACE,
+    textColor: TEXT_HI,
+    mutedColor: TEXT_MUTED,
     sourceTitle: "Compose video",
     sourceBody: "Click to start a new project",
     modalTitle: "New project",
@@ -6994,9 +7061,9 @@ var config8 = {
   textParam: "modalTitle",
   subtextParam: "modalBody",
   tokens: [
-    { propPath: "cardColor", cssVar: "--cf-bg", fallback: "#1c1611", brandKitPath: "colors.background" },
-    { propPath: "textColor", cssVar: "--cf-fg", fallback: "#f4ece0", brandKitPath: "colors.textOnSurface" },
-    { propPath: "mutedColor", cssVar: "--cf-muted", fallback: "#b8a894", brandKitPath: "colors.textMuted" }
+    { propPath: "cardColor", cssVar: "--cf-bg", fallback: SURFACE, brandKitPath: "colors.background" },
+    { propPath: "textColor", cssVar: "--cf-fg", fallback: TEXT_HI, brandKitPath: "colors.textOnSurface" },
+    { propPath: "mutedColor", cssVar: "--cf-muted", fallback: TEXT_MUTED, brandKitPath: "colors.textMuted" }
   ],
   durationInFrames: 150,
   fps: 30,
@@ -7015,10 +7082,10 @@ var paramsSchema9 = z9.object({
     "Ordered list of steps. Each activates sequentially with a check-mark pop, color fade, and connecting-line fill."
   ),
   orientation: z9.enum(["horizontal", "vertical"]).default("horizontal").describe("Layout direction."),
-  activeColor: z9.string().default("#7fae7a").describe("Color of completed nodes + connecting line fill."),
-  inactiveColor: z9.string().default("#241d16").describe("Color of pending nodes + background track."),
-  background: z9.string().default("#14100c").describe("Stage background."),
-  textColor: z9.string().default("#f4ece0").describe("Step label color."),
+  activeColor: z9.string().default(SUCCESS).describe("Color of completed nodes + connecting line fill."),
+  inactiveColor: z9.string().default(SURFACE_HI).describe("Color of pending nodes + background track."),
+  background: z9.string().default(BG).describe("Stage background."),
+  textColor: z9.string().default(TEXT_HI).describe("Step label color."),
   stepDuration: z9.number().int().min(10).max(120).default(30).describe("Frames between successive step activations."),
   speed: z9.number().min(0.25).max(4).default(1).describe("Playback speed multiplier.")
 }).passthrough();
@@ -7039,7 +7106,7 @@ var config9 = {
   tags: ["ui", "steps", "progress", "stepper", "workflow", "check", "sequential"],
   mood: ["tech-demo", "corporate", "minimal"],
   paramsSchema: paramsSchema9,
-  propDefaults: { orientation: "horizontal", activeColor: "#7fae7a", inactiveColor: "#241d16", background: "#14100c", textColor: "#f4ece0", stepDuration: 30, speed: 1 },
+  propDefaults: { orientation: "horizontal", activeColor: SUCCESS, inactiveColor: SURFACE_HI, background: BG, textColor: TEXT_HI, stepDuration: 30, speed: 1 },
   examples: [
     {
       name: "three-step-deploy",
@@ -7047,7 +7114,7 @@ var config9 = {
       params: {
         steps: [{ label: "Connect" }, { label: "Process" }, { label: "Deploy" }],
         orientation: "horizontal",
-        activeColor: "#7fae7a"
+        activeColor: SUCCESS
       },
       description: "Default deploy workflow stepper."
     },
@@ -7057,7 +7124,7 @@ var config9 = {
       params: {
         steps: [{ label: "Sign up" }, { label: "Verify" }, { label: "Invite team" }, { label: "Launch" }],
         orientation: "vertical",
-        activeColor: "#7b93b0",
+        activeColor: BLUE,
         stepDuration: 40
       },
       description: "Vertical onboarding chain in blue."
@@ -7066,10 +7133,10 @@ var config9 = {
   textParam: null,
   subtextParam: null,
   tokens: [
-    { propPath: "activeColor", cssVar: "--cf-accent", fallback: "#7fae7a", brandKitPath: "colors.accent" },
-    { propPath: "inactiveColor", cssVar: "--cf-muted", fallback: "#241d16", brandKitPath: "colors.textMuted" },
-    { propPath: "background", cssVar: "--cf-bg", fallback: "#14100c", brandKitPath: "colors.background" },
-    { propPath: "textColor", cssVar: "--cf-fg", fallback: "#f4ece0", brandKitPath: "colors.text" }
+    { propPath: "activeColor", cssVar: "--cf-accent", fallback: SUCCESS, brandKitPath: "colors.accent" },
+    { propPath: "inactiveColor", cssVar: "--cf-muted", fallback: SURFACE_HI, brandKitPath: "colors.textMuted" },
+    { propPath: "background", cssVar: "--cf-bg", fallback: BG, brandKitPath: "colors.background" },
+    { propPath: "textColor", cssVar: "--cf-fg", fallback: TEXT_HI, brandKitPath: "colors.text" }
   ],
   durationInFrames: 150,
   fps: 30,
@@ -7309,7 +7376,7 @@ var paramsSchema14 = z14.object({
   ]).describe("Eval rows with 0\u20131 scores."),
   threshold: z14.number().min(0).max(1).default(0.9).describe("Pass threshold \u2014 at/above gets a green PASS badge, below an amber NEAR."),
   title: z14.string().max(40).default("Eval suite").describe("Uppercase card header."),
-  accentColor: z14.string().default("#7fae7a").describe("Pass accent.")
+  accentColor: z14.string().default(SUCCESS).describe("Pass accent.")
 }).passthrough();
 var config14 = {
   id: "eval-scorecard",
@@ -7337,15 +7404,15 @@ var config14 = {
     ],
     threshold: 0.9,
     title: "Eval suite",
-    accentColor: "#7fae7a"
+    accentColor: SUCCESS
   },
   examples: [
-    { name: "receipts", mood: ["tech-demo"], params: { title: "Eval suite", threshold: 0.9, accentColor: "#7fae7a", rows: [{ name: "Instruction following", score: 0.97 }, { name: "Tool-use accuracy", score: 0.94 }, { name: "Long-context recall", score: 0.92 }, { name: "Refusal calibration", score: 0.88 }] } }
+    { name: "receipts", mood: ["tech-demo"], params: { title: "Eval suite", threshold: 0.9, accentColor: SUCCESS, rows: [{ name: "Instruction following", score: 0.97 }, { name: "Tool-use accuracy", score: 0.94 }, { name: "Long-context recall", score: 0.92 }, { name: "Refusal calibration", score: 0.88 }] } }
   ],
   textParam: "title",
   subtextParam: null,
   tokens: [
-    { propPath: "accentColor", cssVar: "--cf-accent", fallback: "#7fae7a", brandKitPath: "colors.accent" }
+    { propPath: "accentColor", cssVar: "--cf-accent", fallback: SUCCESS, brandKitPath: "colors.accent" }
   ],
   durationInFrames: 180,
   fps: 30,
@@ -7362,7 +7429,7 @@ var paramsSchema15 = z15.object({
   label: z15.string().max(48).default("TIME TO FIRST TOKEN").describe("Uppercase label under the readout."),
   min: z15.number().default(0).describe("Gauge scale minimum."),
   max: z15.number().default(500).describe('Gauge scale maximum. Put value in the lower third for a "fast" read.'),
-  accentColor: z15.string().default("#f2913c").describe("Arc fill + unit accent."),
+  accentColor: z15.string().default(ACCENT).describe("Arc fill + unit accent."),
   decimals: z15.number().int().min(0).max(2).default(0).describe("Decimal places on the readout.")
 }).passthrough().superRefine((v, ctx) => {
   if (v.max <= v.min) {
@@ -7396,17 +7463,17 @@ var config15 = {
     label: "TIME TO FIRST TOKEN",
     min: 0,
     max: 500,
-    accentColor: "#f2913c",
+    accentColor: ACCENT,
     decimals: 0
   },
   examples: [
-    { name: "ttft", mood: ["tech-demo"], params: { value: 87, unit: "ms", label: "TIME TO FIRST TOKEN", min: 0, max: 500, accentColor: "#f2913c" } },
-    { name: "throughput", mood: ["tech-demo"], params: { value: 412, unit: "tok/s", label: "THROUGHPUT PER GPU", min: 0, max: 500, accentColor: "#7fae7a" } }
+    { name: "ttft", mood: ["tech-demo"], params: { value: 87, unit: "ms", label: "TIME TO FIRST TOKEN", min: 0, max: 500, accentColor: ACCENT } },
+    { name: "throughput", mood: ["tech-demo"], params: { value: 412, unit: "tok/s", label: "THROUGHPUT PER GPU", min: 0, max: 500, accentColor: SUCCESS } }
   ],
   textParam: "label",
   subtextParam: null,
   tokens: [
-    { propPath: "accentColor", cssVar: "--cf-accent", fallback: "#f2913c", brandKitPath: "colors.accent" }
+    { propPath: "accentColor", cssVar: "--cf-accent", fallback: ACCENT, brandKitPath: "colors.accent" }
   ],
   durationInFrames: 120,
   fps: 30,
@@ -7420,7 +7487,7 @@ import { z as z16 } from "zod";
 var paramsSchema16 = z16.object({
   steps: z16.array(z16.string().min(1).max(60)).min(2).max(7).default(["Reading the thread", "Pulling related tickets", "Drafting a fix plan", "Ready for review"]).describe("Trace steps in order. Present-tense verbs read as live work."),
   title: z16.string().max(40).default("Working on it").describe("Uppercase card header."),
-  accentColor: z16.string().default("#f2913c").describe("Spinner + final-step accent."),
+  accentColor: z16.string().default(ACCENT).describe("Spinner + final-step accent."),
   stepFrames: z16.number().int().min(12).max(60).default(26).describe("Frames each step runs before its check lands.")
 }).passthrough();
 var config16 = {
@@ -7443,17 +7510,17 @@ var config16 = {
   propDefaults: {
     steps: ["Reading the thread", "Pulling related tickets", "Drafting a fix plan", "Ready for review"],
     title: "Working on it",
-    accentColor: "#f2913c",
+    accentColor: ACCENT,
     stepFrames: 26
   },
   examples: [
-    { name: "agent-at-work", mood: ["tech-demo"], params: { steps: ["Reading the thread", "Pulling related tickets", "Drafting a fix plan", "Ready for review"], title: "Working on it", accentColor: "#f2913c" } },
-    { name: "research-run", mood: ["tech-demo"], params: { steps: ["Scanning 214 sources", "Ranking by relevance", "Cross-checking claims", "Writing the brief"], title: "Deep research", accentColor: "#9b8bb0", stepFrames: 22 } }
+    { name: "agent-at-work", mood: ["tech-demo"], params: { steps: ["Reading the thread", "Pulling related tickets", "Drafting a fix plan", "Ready for review"], title: "Working on it", accentColor: ACCENT } },
+    { name: "research-run", mood: ["tech-demo"], params: { steps: ["Scanning 214 sources", "Ranking by relevance", "Cross-checking claims", "Writing the brief"], title: "Deep research", accentColor: VIOLET, stepFrames: 22 } }
   ],
   textParam: "title",
   subtextParam: null,
   tokens: [
-    { propPath: "accentColor", cssVar: "--cf-accent", fallback: "#f2913c", brandKitPath: "colors.accent" }
+    { propPath: "accentColor", cssVar: "--cf-accent", fallback: ACCENT, brandKitPath: "colors.accent" }
   ],
   durationInFrames: 180,
   fps: 30,
@@ -7474,7 +7541,7 @@ var paramsSchema17 = z17.object({
     { name: "read_logs", args: '{ service: "auth", last: "1h" }', result: "stack trace found" },
     { name: "open_pr", args: '{ fix: "token refresh race" }', result: "PR #482 opened" }
   ]).describe("Function calls in execution order: name(args) types in, then the result chip pops."),
-  accentColor: z17.string().default("#f2913c").describe("Function-name + active-border accent."),
+  accentColor: z17.string().default(ACCENT).describe("Function-name + active-border accent."),
   callFrames: z17.number().int().min(16).max(80).default(34).describe("Frames between call arrivals.")
 }).passthrough();
 var config17 = {
@@ -7500,16 +7567,16 @@ var config17 = {
       { name: "read_logs", args: '{ service: "auth", last: "1h" }', result: "stack trace found" },
       { name: "open_pr", args: '{ fix: "token refresh race" }', result: "PR #482 opened" }
     ],
-    accentColor: "#f2913c",
+    accentColor: ACCENT,
     callFrames: 34
   },
   examples: [
-    { name: "bug-hunt", mood: ["tech-demo"], params: { accentColor: "#f2913c", calls: [{ name: "search_issues", args: '{ query: "login 500" }', result: "14 matches" }, { name: "read_logs", args: '{ service: "auth", last: "1h" }', result: "stack trace found" }, { name: "open_pr", args: '{ fix: "token refresh race" }', result: "PR #482 opened" }] } }
+    { name: "bug-hunt", mood: ["tech-demo"], params: { accentColor: ACCENT, calls: [{ name: "search_issues", args: '{ query: "login 500" }', result: "14 matches" }, { name: "read_logs", args: '{ service: "auth", last: "1h" }', result: "stack trace found" }, { name: "open_pr", args: '{ fix: "token refresh race" }', result: "PR #482 opened" }] } }
   ],
   textParam: null,
   subtextParam: null,
   tokens: [
-    { propPath: "accentColor", cssVar: "--cf-accent", fallback: "#f2913c", brandKitPath: "colors.accent" }
+    { propPath: "accentColor", cssVar: "--cf-accent", fallback: ACCENT, brandKitPath: "colors.accent" }
   ],
   durationInFrames: 180,
   fps: 30,
@@ -7522,7 +7589,7 @@ var config17 = {
 import { z as z18 } from "zod";
 var paramsSchema18 = z18.object({
   barCount: z18.number().int().min(12).max(72).default(36).describe("Bars in the waveform."),
-  accentColor: z18.string().default("#f2913c").describe("Waveform accent."),
+  accentColor: z18.string().default(ACCENT).describe("Waveform accent."),
   mode: z18.enum(["speaking", "listening"]).default("speaking").describe("'speaking' = phrase bursts with breaths \xB7 'listening' = gentle uniform breathing."),
   label: z18.string().max(48).default("Assistant is speaking").describe("Uppercase label under the waveform. Empty hides it."),
   seed: z18.number().int().min(0).max(9999).default(7).describe("Pattern seed \u2014 different phrase rhythms.")
@@ -7546,19 +7613,19 @@ var config18 = {
   paramsSchema: paramsSchema18,
   propDefaults: {
     barCount: 36,
-    accentColor: "#f2913c",
+    accentColor: ACCENT,
     mode: "speaking",
     label: "Assistant is speaking",
     seed: 7
   },
   examples: [
-    { name: "agent-speaking", mood: ["tech-demo"], params: { barCount: 36, accentColor: "#f2913c", mode: "speaking", label: "Assistant is speaking", seed: 7 } },
-    { name: "listening", mood: ["minimal"], params: { barCount: 36, accentColor: "#9b8bb0", mode: "listening", label: "Listening", seed: 3 } }
+    { name: "agent-speaking", mood: ["tech-demo"], params: { barCount: 36, accentColor: ACCENT, mode: "speaking", label: "Assistant is speaking", seed: 7 } },
+    { name: "listening", mood: ["minimal"], params: { barCount: 36, accentColor: VIOLET, mode: "listening", label: "Listening", seed: 3 } }
   ],
   textParam: "label",
   subtextParam: null,
   tokens: [
-    { propPath: "accentColor", cssVar: "--cf-accent", fallback: "#f2913c", brandKitPath: "colors.accent" }
+    { propPath: "accentColor", cssVar: "--cf-accent", fallback: ACCENT, brandKitPath: "colors.accent" }
   ],
   durationInFrames: 192,
   fps: 30,
@@ -7675,10 +7742,10 @@ var paramsSchema21 = z21.object({
   panelStartFrame: z21.number().int().min(0).max(120).default(18).describe("Frame at which the floating tool panel slides up from the bottom."),
   iconStagger: z21.number().int().min(0).max(30).default(4).describe("Frames between successive icon pop-ins after the panel arrives."),
   iconCount: z21.number().int().min(1).max(8).default(5).describe("How many icons to render (clamped 1\u20138). The first is shown as active."),
-  accent: z21.string().default("#9b8bb0").describe("Accent color used by the active icon glow + gradient fill."),
-  panelColor: z21.string().default("#14100cb8").describe("Glassmorphic panel fill (low alpha for the blur to read)."),
-  background: z21.string().default("#14100c").describe("Stage background \u2014 also receives a subtle dot grid."),
-  iconBg: z21.string().default("#241d16").describe("Background of inactive icons."),
+  accent: z21.string().default(VIOLET).describe("Accent color used by the active icon glow + gradient fill."),
+  panelColor: z21.string().default(`${BG}b8`).describe("Glassmorphic panel fill (low alpha for the blur to read)."),
+  background: z21.string().default(BG).describe("Stage background \u2014 also receives a subtle dot grid."),
+  iconBg: z21.string().default(SURFACE_HI).describe("Background of inactive icons."),
   speed: z21.number().min(0.25).max(4).default(1).describe("Playback speed multiplier.")
 }).passthrough();
 var config21 = {
@@ -7702,31 +7769,31 @@ var config21 = {
     panelStartFrame: 18,
     iconStagger: 4,
     iconCount: 5,
-    accent: "#9b8bb0",
-    panelColor: "#14100cb8",
-    background: "#14100c",
-    iconBg: "#241d16",
+    accent: VIOLET,
+    panelColor: `${BG}b8`,
+    background: BG,
+    iconBg: SURFACE_HI,
     speed: 1
   },
   examples: [
     {
       name: "violet-palette",
       mood: ["tech-demo"],
-      params: { panelStartFrame: 18, iconStagger: 4, iconCount: 5, accent: "#9b8bb0" },
+      params: { panelStartFrame: 18, iconStagger: 4, iconCount: 5, accent: VIOLET },
       description: "Default violet 5-tool palette."
     },
     {
       name: "dense-tools",
       mood: ["minimal"],
-      params: { panelStartFrame: 12, iconStagger: 3, iconCount: 8, accent: "#5fa5a0" },
+      params: { panelStartFrame: 12, iconStagger: 3, iconCount: 8, accent: TEAL },
       description: "Cyan accent, all 8 icons, fast stagger."
     }
   ],
   textParam: null,
   subtextParam: null,
   tokens: [
-    { propPath: "accent", cssVar: "--cf-accent", fallback: "#9b8bb0", brandKitPath: "colors.accent" },
-    { propPath: "background", cssVar: "--cf-bg", fallback: "#14100c", brandKitPath: "colors.background" }
+    { propPath: "accent", cssVar: "--cf-accent", fallback: VIOLET, brandKitPath: "colors.accent" },
+    { propPath: "background", cssVar: "--cf-bg", fallback: BG, brandKitPath: "colors.background" }
   ],
   durationInFrames: 150,
   fps: 30,
@@ -7744,8 +7811,8 @@ var paramsSchema22 = z22.object({
   ),
   collapseAt: z22.number().int().min(0).max(300).default(30).describe("Frame at which the collapse spring fires."),
   title: z22.string().max(120).default("process-orders.ts").describe("Filename in the window chrome. Auto-fits (shrinks) to the chrome bar."),
-  fontSize: z22.number().min(10).max(36).default(16).describe("Code font size in pixels."),
-  width: z22.number().min(360).max(1600).default(720).describe("Card width in pixels."),
+  fontSize: z22.number().min(10).max(36).default(16).describe("Code font size in pixels on the 1280-wide authoring frame. Scaled with the frame: every px value here is multiplied by max(0.5, frameWidth/1280), so a 1920-wide render draws it 1.5x larger, and the 0.5x floor pins anything narrower than 640."),
+  width: z22.number().min(360).max(1600).default(720).describe("Card width in pixels on the 1280-wide authoring frame. Scaled with the frame: every px value here is multiplied by max(0.5, frameWidth/1280), so a 1920-wide render draws it 1.5x larger, and the 0.5x floor pins anything narrower than 640."),
   background: z22.string().default(BG).describe("Stage background."),
   cardColor: z22.string().default(BG_DEEP).describe("Code window fill color."),
   textColor: z22.string().default(TEXT).describe("Code text color."),
@@ -8052,8 +8119,8 @@ var config26 = {
 import { z as z27 } from "zod";
 var nodeSchema = z27.object({
   id: z27.string().min(1).describe("Unique node id, referenced by edge `from`/`to`."),
-  x: z27.number().describe("X coordinate in pixels (canonical 1280-wide stage)."),
-  y: z27.number().describe("Y coordinate in pixels."),
+  x: z27.number().describe("X of the node, authored against a 1280x720 frame. Two coordinate spaces resolve it and they diverge as the frame grows: the pipes are drawn inside an SVG viewBox of 0 0 1280 720 fitted to the frame, so a pipe endpoint at 640 lands on the horizontal centre of any render, while the node card is a plain absolutely-positioned div at left = x - 60 in raw frame pixels and stays at 640. They agree only on a 1280-wide render; above that the cards sit left of the pipe ends they belong to. Known layout defect, not yet fixed \u2014 author and render at 1280x720 to avoid it."),
+  y: z27.number().describe("Y of the node, in the same 1280x720 authoring space and split the same way: the pipe endpoint is fitted to the frame height, the node card is placed at raw top = y - 24 in frame pixels. They agree on a 720-tall render and drift apart as the frame grows."),
   label: z27.string().max(80).optional().describe("Display label. Falls back to `id`. Auto-fits (shrinks) to the node card.")
 }).passthrough();
 var edgeSchema = z27.object({
@@ -8143,7 +8210,7 @@ var config27 = {
 import { z as z28 } from "zod";
 var paramsSchema28 = z28.object({
   cardLabel: z28.string().min(1).max(120).default("Build pipeline").describe("Title text on the flying ticket card. Auto-fits (shrinks + wraps to 2 lines)."),
-  accentColor: z28.string().default("#7fae7a").describe("Accent for card border, status dot, timer, and one of the confetti colors."),
+  accentColor: z28.string().default(SUCCESS).describe("Accent for card border, status dot, timer, and one of the confetti colors."),
   speed: z28.number().min(0.25).max(4).default(1).describe("Playback speed multiplier.")
 }).passthrough();
 var config28 = {
@@ -8163,25 +8230,25 @@ var config28 = {
   tags: ["ui", "kanban", "pipeline", "workflow", "ticket", "journey", "confetti"],
   mood: ["tech-demo", "corporate", "playful"],
   paramsSchema: paramsSchema28,
-  propDefaults: { cardLabel: "Build pipeline", accentColor: "#7fae7a", speed: 1 },
+  propDefaults: { cardLabel: "Build pipeline", accentColor: SUCCESS, speed: 1 },
   examples: [
     {
       name: "build-pipeline",
       mood: ["tech-demo"],
-      params: { cardLabel: "Build pipeline", accentColor: "#7fae7a" },
+      params: { cardLabel: "Build pipeline", accentColor: SUCCESS },
       description: "Default green-accent build ticket."
     },
     {
       name: "feature-shipped",
       mood: ["playful"],
-      params: { cardLabel: "Ship onboarding v2", accentColor: "#9b8bb0" },
+      params: { cardLabel: "Ship onboarding v2", accentColor: VIOLET },
       description: "Violet feature ticket with confetti payoff."
     }
   ],
   textParam: "cardLabel",
   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,
@@ -8203,8 +8270,8 @@ var paramsSchema29 = z29.object({
   tooltipTitle: z29.string().min(1).max(120).default("Generate runs").describe("Tooltip heading shown right of the bounding box. Auto-fits (shrinks) to the tooltip."),
   tooltipBody: z29.string().min(1).max(320).default("Click to start a new generation. The job will appear in the sidebar.").describe("Tooltip body copy explaining the action. Auto-fits (shrinks + wraps to 4 lines)."),
   buttonLabel: z29.string().min(1).max(80).default("Generate").describe("Label on the call-to-action button. Auto-fits (shrinks) to the button."),
-  accent: z29.string().default("#ffb38e").describe("Accent for the bounding box stroke, ripple, and tooltip border."),
-  background: z29.string().default("#14100c").describe("Stage background behind the browser."),
+  accent: z29.string().default(ACCENT_SOFT).describe("Accent for the bounding box stroke, ripple, and tooltip border."),
+  background: z29.string().default(BG).describe("Stage background behind the browser."),
   speed: z29.number().min(0.25).max(4).default(1).describe("Playback speed multiplier.")
 }).passthrough();
 var config29 = {
@@ -8229,8 +8296,8 @@ var config29 = {
     tooltipTitle: "Generate runs",
     tooltipBody: "Click to start a new generation. The job will appear in the sidebar.",
     buttonLabel: "Generate",
-    accent: "#ffb38e",
-    background: "#14100c",
+    accent: ACCENT_SOFT,
+    background: BG,
     speed: 1
   },
   examples: [
@@ -8241,7 +8308,7 @@ var config29 = {
         tooltipTitle: "Generate runs",
         tooltipBody: "Click to start a new generation. The job will appear in the sidebar.",
         buttonLabel: "Generate",
-        accent: "#ffb38e"
+        accent: ACCENT_SOFT
       },
       description: "Default docs annotation for a Generate button."
     },
@@ -8252,7 +8319,7 @@ var config29 = {
         tooltipTitle: "Deploy your project",
         tooltipBody: "Pushes your build to production. Roll back any time from the dashboard.",
         buttonLabel: "Deploy",
-        accent: "#7fae7a",
+        accent: SUCCESS,
         clickFrame: 130
       },
       description: "Deploy-button explainer in green."
@@ -8261,8 +8328,8 @@ var config29 = {
   textParam: "tooltipTitle",
   subtextParam: "tooltipBody",
   tokens: [
-    { propPath: "accent", cssVar: "--cf-accent", fallback: "#ffb38e", brandKitPath: "colors.accent" },
-    { propPath: "background", cssVar: "--cf-bg", fallback: "#14100c", brandKitPath: "colors.background" }
+    { propPath: "accent", cssVar: "--cf-accent", fallback: ACCENT_SOFT, brandKitPath: "colors.accent" },
+    { propPath: "background", cssVar: "--cf-bg", fallback: BG, brandKitPath: "colors.background" }
   ],
   durationInFrames: 240,
   fps: 30,
@@ -8353,12 +8420,12 @@ var paramsSchema31 = z31.object({
   borderRadiusFrom: z31.number().min(0).max(60).default(12).describe("Corner radius before morph."),
   borderRadiusTo: z31.number().min(0).max(60).default(16).describe("Corner radius after morph."),
   morphAt: z31.number().int().min(0).max(300).default(30).describe("Frame at which the morph spring fires."),
-  imageColorA: z31.string().default("#d1685e").describe("First gradient stop for the simulated image."),
-  imageColorB: z31.string().default("#9b8bb0").describe("Second gradient stop for the simulated image."),
-  imageColorC: z31.string().default("#7b93b0").describe("Third gradient stop for the simulated image."),
-  feedBackground: z31.string().default("#e4dccf").describe("Light feed/page background that fades out during morph."),
-  editorBackground: z31.string().default("#14100c").describe("Dark editor canvas background that fades in during morph."),
-  accent: z31.string().default("#f4ece0").describe("Toolbar accent (active tool tile + Editor label color)."),
+  imageColorA: z31.string().default(DANGER).describe("First gradient stop for the simulated image."),
+  imageColorB: z31.string().default(VIOLET).describe("Second gradient stop for the simulated image."),
+  imageColorC: z31.string().default(BLUE).describe("Third gradient stop for the simulated image."),
+  feedBackground: z31.string().default(TEXT).describe("Light feed/page background that fades out during morph."),
+  editorBackground: z31.string().default(BG).describe("Dark editor canvas background that fades in during morph."),
+  accent: z31.string().default(TEXT_HI).describe("Toolbar accent (active tool tile + Editor label color)."),
   postAuthor: z31.string().min(1).max(120).default("Maya Larsson").describe("Feed-card author name shown pre-morph. Auto-fits (shrinks) to the card."),
   postBody: z31.string().min(1).max(320).default("Sunset over the old harbor \u2014 color graded straight out of camera.").describe("Feed-card body copy shown pre-morph. Auto-fits (shrinks + wraps to 4 lines)."),
   speed: z31.number().min(0.25).max(4).default(1).describe("Playback speed multiplier.")
@@ -8384,12 +8451,12 @@ var config31 = {
     borderRadiusFrom: 12,
     borderRadiusTo: 16,
     morphAt: 30,
-    imageColorA: "#d1685e",
-    imageColorB: "#9b8bb0",
-    imageColorC: "#7b93b0",
-    feedBackground: "#e4dccf",
-    editorBackground: "#14100c",
-    accent: "#f4ece0",
+    imageColorA: DANGER,
+    imageColorB: VIOLET,
+    imageColorC: BLUE,
+    feedBackground: TEXT,
+    editorBackground: BG,
+    accent: TEXT_HI,
     postAuthor: "Maya Larsson",
     postBody: "Sunset over the old harbor \u2014 color graded straight out of camera.",
     speed: 1
@@ -8403,15 +8470,15 @@ var config31 = {
         postBody: "Sunset over the old harbor \u2014 color graded straight out of camera.",
         morphAt: 30
       },
-      description: "Default warm-gradient sunset post \u2192 editor."
+      description: "Default coral-to-blue gradient post \u2192 editor."
     },
     {
       name: "cool-portrait",
       mood: ["tech-demo"],
       params: {
-        imageColorA: "#5fa5a0",
-        imageColorB: "#7b93b0",
-        imageColorC: "#9b8bb0",
+        imageColorA: TEAL,
+        imageColorB: BLUE,
+        imageColorC: VIOLET,
         postAuthor: "Renji Tanaka",
         postBody: "Studio portrait, midday light.",
         morphAt: 24
@@ -8422,8 +8489,8 @@ var config31 = {
   textParam: "postBody",
   subtextParam: "postAuthor",
   tokens: [
-    { propPath: "editorBackground", cssVar: "--cf-bg", fallback: "#14100c", brandKitPath: "colors.background" },
-    { propPath: "accent", cssVar: "--cf-accent", fallback: "#f4ece0", brandKitPath: "colors.accent" }
+    { propPath: "editorBackground", cssVar: "--cf-bg", fallback: BG, brandKitPath: "colors.background" },
+    { propPath: "accent", cssVar: "--cf-accent", fallback: TEXT_HI, brandKitPath: "colors.accent" }
   ],
   durationInFrames: 180,
   fps: 30,