@appinternalleads/ui 0.4.0 → 0.4.1

package/dist/esm/motion/promo/controls.js

@@ -0,0 +1,567 @@
+/* eslint-disable comppack/no-raw-colour -- the defaults are content: the reference preset's colours, which people and agents replace (DECISIONS §25, §26). */
+/**
+ * **promo-product-showcase — the control table.** Every editable value of the promo, once: its path,
+ * type, range or options, default, description, and who may edit it. The JSON Schema, the validator,
+ * the defaults, the patch API, the Remotion Studio schema, the site editor and the reference in
+ * `docs/MOTION-TEMPLATES.md` are all generated from this table, so a person and an agent always see
+ * the same contract.
+ *
+ * Two kinds of entry:
+ * - **Controls** — one typed value at a fixed dotted path (`content.title`).
+ * - **Lists** — an array of items (`productContent.cards`), each item a set of controls. Patches
+ *   address items by index (`productContent.cards.1.title`) or replace the whole array.
+ *
+ * Units:
+ * - `frames` — motion frames at the canonical 60 fps, whatever `canvas.fps` the output samples at.
+ * - `du` — design units: 1/1080 of the canvas's short side (2 px at 4K), so sizes hold across aspect ratios.
+ * - `normalized` — 0‥1 across the box named in the description (the canvas, the layout slot, the UI).
+ * - `short` — a fraction of the canvas's short side.
+ */
+export const EASING_NAMES = [
+    'linear', 'easeIn', 'easeOut', 'easeInOut', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic',
+    'easeOutQuart', 'easeInOutQuart', 'easeOutExpo', 'easeOutBack', 'springSoft', 'springSnappy',
+];
+export const ASPECT_RATIOS = ['16:9', '9:16', '1:1'];
+/** The layout block each aspect ratio reads (`layout.<name>`). */
+export const LAYOUT_FOR = { '16:9': 'landscape', '9:16': 'portrait', '1:1': 'square' };
+export const FPS_OPTIONS = [24, 25, 30, 50, 60];
+/** Registered typefaces: each is loaded by the Remotion compositions and by the web player. */
+export const FONT_FAMILIES = ['Inter', 'Manrope', 'DM Sans', 'Plus Jakarta Sans', 'Space Grotesk'];
+export const FONT_WEIGHTS = [300, 400, 500, 600, 700, 800];
+export const TEXT_MODES = ['fade', 'slide', 'scale', 'blur', 'reveal', 'none'];
+export const CARD_ENTRANCES = ['fade', 'slide-up', 'slide-left', 'scale', 'none'];
+export const ICONS = ['none', 'sparkle', 'bolt', 'star', 'check', 'chart', 'heart', 'rocket', 'lock', 'arrow', 'globe', 'chat'];
+export const PLACEHOLDERS = ['website', 'gallery', 'chart', 'gradient', 'text', 'none'];
+export const PHASES = ['intro', 'productEntrance', 'productSettle', 'contentReveal', 'showcase', 'outro'];
+/** The groups people see (the Studio sections and the site editor tabs), in order. */
+export const GROUPS = [
+    'Canvas', 'Layout', 'Content', 'Product', 'Product Header', 'Product UI', 'Background', 'Lights', 'Typography',
+    'Text Animation', 'Product Animation', 'Card Animation', 'Camera', 'Floating Elements', 'Particles', 'Glow',
+    'Timeline', 'Scenes', 'Assets', 'Export',
+];
+/** Which people-facing group a config key belongs to. */
+const GROUP_OF = {
+    canvas: 'Canvas', layout: 'Layout', content: 'Content', productWindow: 'Product', window: 'Product',
+    productHeader: 'Product Header', productContent: 'Product UI', background: 'Background', lights: 'Lights',
+    typography: 'Typography', textAnimation: 'Text Animation', productEntrance: 'Product Animation', productFloat: 'Product Animation',
+    cardAnimation: 'Card Animation', camera: 'Camera', floatingElements: 'Floating Elements', particles: 'Particles', glow: 'Glow',
+    timeline: 'Timeline', loop: 'Timeline', scenes: 'Scenes', sceneTransition: 'Scenes', assets: 'Assets', export: 'Export',
+};
+const base = (o = {}) => ({ userEditable: o.userEditable ?? true, agentEditable: o.agentEditable ?? true, ...(o.unit ? { unit: o.unit } : {}), ...(o.step !== undefined ? { step: o.step } : {}) });
+const groupOf = (path) => GROUP_OF[path.split('.')[0]] ?? 'Canvas';
+const num = (path, def, min, max, description, o = {}) => ({ path, group: groupOf(path), type: 'number', default: def, min, max, description, ...base({ step: 0.01, ...o }) });
+const int = (path, def, min, max, description, o = {}) => ({ path, group: groupOf(path), type: 'integer', default: def, min, max, description, ...base({ step: 1, ...o }) });
+const frames = (path, def, max, description, min = 0) => int(path, def, min, max, description, { unit: 'frames' });
+const bool = (path, def, description, o = {}) => ({ path, group: groupOf(path), type: 'boolean', default: def, description, ...base(o) });
+const color = (path, def, description, o = {}) => ({ path, group: groupOf(path), type: 'color', default: def, description, ...base(o) });
+const choice = (path, def, options, description, o = {}) => ({ path, group: groupOf(path), type: 'enum', default: def, options, description, ...base(o) });
+const text = (path, def, maxLength, description, o = {}) => ({ path, group: groupOf(path), type: 'text', default: def, maxLength, minLength: o.minLength ?? 0, description, ...base(o) });
+const easing = (path, def, description) => ({ path, group: groupOf(path), type: 'easing', default: def, options: EASING_NAMES, description, ...base() });
+const asset = (path, description) => ({ path, group: groupOf(path), type: 'asset', default: '', maxLength: 2048, description, ...base() });
+const opacity = (path, def, description) => num(path, def, 0, 1, description, { unit: 'fraction' });
+const du = (path, def, min, max, description) => num(path, def, min, max, description, { step: 1, unit: 'du' });
+const norm = (path, def, min, max, description) => num(path, def, min, max, description, { step: 0.005, unit: 'normalized' });
+const deg = (path, def, min, max, description) => num(path, def, min, max, description, { step: 0.1, unit: 'deg' });
+const factor = (path, def, min, max, description) => num(path, def, min, max, description, { step: 0.01, unit: 'factor' });
+const weight = (path, def, description) => choice(path, def, FONT_WEIGHTS, description, { unit: 'weight' });
+const LAYOUTS = {
+    landscape: { textY: 0.085, textWidth: 0.7, productX: 0.5, productY: 0.66, productWidth: 0.6, productHeight: 0.58, ctaY: 0.955, titleScale: 1, uiColumns: 3, logoX: 0.045, logoY: 0.07 },
+    portrait: { textY: 0.08, textWidth: 0.86, productX: 0.5, productY: 0.61, productWidth: 0.84, productHeight: 0.54, ctaY: 0.935, titleScale: 1.3, uiColumns: 2, logoX: 0.07, logoY: 0.04 },
+    square: { textY: 0.075, textWidth: 0.82, productX: 0.5, productY: 0.635, productWidth: 0.76, productHeight: 0.6, ctaY: 0.955, titleScale: 0.92, uiColumns: 3, logoX: 0.05, logoY: 0.06 },
+};
+const layoutControls = (name, d) => {
+    const p = `layout.${name}`;
+    const shape = name === 'landscape' ? '16:9' : name === 'portrait' ? '9:16' : '1:1';
+    return [
+        norm(`${p}.text.x`, 0.5, 0, 1, `(${shape}) Centre of the headline block, across the canvas.`),
+        norm(`${p}.text.y`, d.textY, 0, 1, `(${shape}) Top of the headline block, down the canvas.`),
+        norm(`${p}.text.width`, d.textWidth, 0.2, 1, `(${shape}) Width the headline wraps within, as a fraction of the canvas width.`),
+        choice(`${p}.text.align`, 'center', ['left', 'center', 'right'], `(${shape}) Headline alignment.`),
+        factor(`${p}.titleScale`, d.titleScale, 0.3, 2.5, `(${shape}) Multiplies every headline type size on this canvas shape.`),
+        norm(`${p}.product.x`, d.productX, 0, 1, `(${shape}) Centre of the product slot, across the canvas.`),
+        norm(`${p}.product.y`, d.productY, 0, 1.2, `(${shape}) Centre of the product slot, down the canvas.`),
+        norm(`${p}.product.width`, d.productWidth, 0.1, 1.5, `(${shape}) Product slot width, as a fraction of the canvas width.`),
+        norm(`${p}.product.height`, d.productHeight, 0.1, 1.5, `(${shape}) Product slot height, as a fraction of the canvas height.`),
+        int(`${p}.uiColumns`, d.uiColumns, 1, 4, `(${shape}) Card columns inside the product UI (grid layout).`),
+        norm(`${p}.cta.x`, 0.5, 0, 1, `(${shape}) Centre of the call-to-action button, across the canvas.`),
+        norm(`${p}.cta.y`, d.ctaY, 0, 1, `(${shape}) Centre of the call-to-action button, down the canvas.`),
+        norm(`${p}.logo.x`, d.logoX, 0, 1, `(${shape}) Left edge of the promo logo, across the canvas.`),
+        norm(`${p}.logo.y`, d.logoY, 0, 1, `(${shape}) Centre of the promo logo, down the canvas.`),
+    ];
+};
+const textAnim = (el, what, d) => {
+    const p = `textAnimation.${el}`;
+    return [
+        bool(`${p}.enabled`, true, `Animate the ${what} in. Off: it is shown at its end values from the start.`),
+        choice(`${p}.mode`, d.mode, TEXT_MODES, `How the ${what} arrives. fade: opacity. slide: Y and opacity. scale: scale and opacity. blur: blur, Y and opacity. reveal: a mask wipes it up from below. none: no motion.`),
+        frames(`${p}.delayFrames`, d.delay, 600, `Delay after its phase starts (${el === 'cta' ? 'outro' : 'intro'}; in later scenes, after the scene starts).`),
+        frames(`${p}.durationFrames`, d.duration, 600, `How long the ${what} takes to arrive.`, 1),
+        du(`${p}.startY`, d.startY, -600, 600, `Vertical offset it starts from (slide, blur, reveal).`),
+        du(`${p}.endY`, 0, -600, 600, `Vertical offset it settles at.`),
+        opacity(`${p}.startOpacity`, 0, `Opacity it starts from.`),
+        opacity(`${p}.endOpacity`, 1, `Opacity it settles at.`),
+        factor(`${p}.startScale`, d.startScale, 0, 4, `Scale it starts from (scale mode; slight in the others).`),
+        factor(`${p}.endScale`, 1, 0, 4, `Scale it settles at.`),
+        deg(`${p}.rotation`, 0, -45, 45, `Rotation it starts from, settling to 0.`),
+        du(`${p}.blur`, d.blur, 0, 80, `Blur it starts from (blur mode; a light touch in the others).`),
+        easing(`${p}.easing`, d.easing, `How the ${what} arrives.`),
+        choice(`${p}.split`, d.split, ['none', 'words', 'lines'], `Animate the ${what} as one block, word by word, or line by line.`),
+        frames(`${p}.staggerFrames`, d.stagger, 60, `Delay between words or lines when split.`),
+    ];
+};
+const phase = (id, delay, duration, hold, what) => [
+    int(`timeline.${id}.delayFrames`, delay, -240, 600, `Gap after the previous phase ends (negative overlaps it). ${what}`, { unit: 'frames' }),
+    frames(`timeline.${id}.durationFrames`, duration, 3600, `Length of the ${id} phase.`, id === 'showcase' || id === 'productSettle' ? 0 : 1),
+    frames(`timeline.${id}.holdFrames`, hold, 3600, `Still frames added after the ${id} phase before the next one starts.`),
+];
+export const CONTROLS = [
+    /* ─── canvas ─────────────────────────────────────────────────────────────────────────────── */
+    choice('canvas.aspectRatio', '16:9', ASPECT_RATIOS, 'Canvas shape. Each shape reads its own layout block (layout.landscape / portrait / square): the composition reflows, it is never stretched.'),
+    int('canvas.width', 3840, 256, 7680, 'Output width in pixels. Must match the aspect ratio (±1%).', { unit: 'px' }),
+    int('canvas.height', 2160, 256, 7680, 'Output height in pixels. Must match the aspect ratio (±1%).', { unit: 'px' }),
+    choice('canvas.fps', 60, FPS_OPTIONS, 'Output frame rate. Timing is authored in 60 fps motion frames; a lower rate samples the same motion, it does not slow it down.'),
+    choice('canvas.durationMode', 'auto', ['auto', 'fixed'], 'auto: the video lasts as long as the timeline (or the scenes, if longer). fixed: it lasts canvas.durationFrames — the end is held, or the timeline is cut.'),
+    int('canvas.durationFrames', 600, 30, 36000, 'Output length in output frames (durationMode fixed).', { unit: 'frames' }),
+    color('canvas.backgroundColor', '#12062e', 'Colour behind everything; the outro\'s fadeToBase exit fades to it.'),
+    int('canvas.seed', 20260930, 0, 2147483647, 'Seed for every random choice not seeded on its own. Same config + same seed = identical frames.'),
+    num('canvas.safeArea', 0.04, 0, 0.2, 'Inset on every side, as a fraction of the short side, that the logo, headline and CTA keep clear of.', { unit: 'fraction' }),
+    /* ─── layout (per aspect ratio) ─────────────────────────────────────────────────────────── */
+    ...layoutControls('landscape', LAYOUTS.landscape),
+    ...layoutControls('portrait', LAYOUTS.portrait),
+    ...layoutControls('square', LAYOUTS.square),
+    /* ─── content ────────────────────────────────────────────────────────────────────────────── */
+    text('content.eyebrow', 'Website promo video', 48, 'Small line above the headline. Empty hides it.'),
+    text('content.title', 'Build faster with AI', 80, 'The headline. Wraps within the layout\'s text width. Empty hides it.'),
+    text('content.subtitle', 'Turn your ideas into production-ready experiences.', 140, 'The line under the headline. Empty hides it.'),
+    text('content.productName', 'Acme AI', 40, 'The product\'s name: the browser tab title and the accessible label.', { minLength: 1 }),
+    bool('content.logo.enabled', true, 'Show the promo logo in the corner of the video.'),
+    text('content.logo.text', 'LOGO', 24, 'Logo wordmark. With assets.logo set, the image is shown instead of the mark.'),
+    choice('content.logo.mark', 'spark', ['none', 'dot', 'spark', 'square', 'ring'], 'A procedural logo mark drawn before the wordmark.'),
+    color('content.logo.color', '#ffffff', 'Logo wordmark colour.'),
+    color('content.logo.markColor', '#f0abfc', 'Logo mark colour.'),
+    du('content.logo.size', 30, 8, 120, 'Logo wordmark size.'),
+    bool('content.cta.enabled', true, 'Show the call-to-action button.'),
+    text('content.cta.text', 'Try it now', 32, 'Call-to-action label.'),
+    choice('content.cta.style', 'pill', ['pill', 'rounded', 'outline'], 'Button shape.'),
+    color('content.cta.backgroundColor', '#ffffff', 'Button fill (the outline colour in outline style).'),
+    color('content.cta.textColor', '#4c1d95', 'Button label colour.'),
+    bool('content.cta.arrow', true, 'Draw an arrow after the label.'),
+    bool('content.badge.enabled', true, 'Show the badge pinned to the product window\'s top-right corner.'),
+    text('content.badge.text', 'AI powered', 28, 'Badge label.'),
+    choice('content.badge.icon', 'sparkle', ICONS, 'Badge icon (drawn procedurally).'),
+    color('content.badge.backgroundColor', '#ffffff', 'Badge fill.'),
+    color('content.badge.textColor', '#6d28d9', 'Badge label and icon colour.'),
+    bool('content.showTopBarTitle', true, 'Show the product name as the browser tab title.'),
+    /* ─── product window ───────────────────────────────────────────────────────────────────────── */
+    bool('productWindow.enabled', true, 'Show the product window at all.'),
+    norm('productWindow.x', 0.5, -0.5, 1.5, 'Window centre across its layout slot (0.5 = centred in the slot).'),
+    norm('productWindow.y', 0.5, -0.5, 1.5, 'Window centre down its layout slot.'),
+    norm('productWindow.width', 1, 0.1, 2, 'Window width as a fraction of the slot width.'),
+    norm('productWindow.height', 1, 0.1, 2, 'Window height as a fraction of the slot height.'),
+    factor('productWindow.scale', 1, 0.2, 3, 'Scale of the window (after entrance and float).'),
+    deg('productWindow.rotation', 0, -30, 30, 'Resting rotation of the window.'),
+    du('productWindow.radius', 30, 0, 200, 'Corner radius.'),
+    color('productWindow.backgroundColor', '#ffffff', 'Window surface colour.'),
+    du('productWindow.borderWidth', 2, 0, 20, 'Border width.'),
+    color('productWindow.borderColor', '#ffffff', 'Border colour.'),
+    opacity('productWindow.borderOpacity', 0.7, 'Border opacity.'),
+    bool('productWindow.shadow', true, 'Drop a soft shadow under the window.'),
+    du('productWindow.shadowBlur', 90, 0, 400, 'Shadow blur.'),
+    opacity('productWindow.shadowOpacity', 0.38, 'Shadow opacity.'),
+    color('productWindow.shadowColor', '#2a0a5e', 'Shadow colour.'),
+    du('productWindow.shadowOffsetY', 40, -200, 200, 'Shadow offset down.'),
+    opacity('productWindow.opacity', 1, 'Window opacity (after the entrance).'),
+    /* ─── window chrome ────────────────────────────────────────────────────────────────────────── */
+    bool('window.showChrome', true, 'Draw browser chrome (the top bar and its parts). Off: a bare rounded panel.'),
+    bool('window.showTopBar', true, 'Show the top bar.'),
+    bool('window.showTrafficLights', true, 'Show the three window buttons in the top bar.'),
+    bool('window.showAddressBar', true, 'Show the address field in the top bar.'),
+    text('window.addressText', 'acme.ai/studio', 60, 'Text in the address field.'),
+    du('window.topBarHeight', 52, 20, 160, 'Top bar height.'),
+    color('window.topBarColor', '#f5f3fa', 'Top bar colour.'),
+    color('window.topBarTextColor', '#8b85a0', 'Top bar text colour (address and tab title).'),
+    color('window.trafficLight1', '#ff6159', 'First window button colour.'),
+    color('window.trafficLight2', '#ffbd2e', 'Second window button colour.'),
+    color('window.trafficLight3', '#28c941', 'Third window button colour.'),
+    du('window.perspective', 2600, 400, 10000, 'Perspective distance for the window\'s 3D tilt.'),
+    deg('window.tiltX', 0, -40, 40, 'Resting tilt back (positive) or forward, in 3D.'),
+    deg('window.tiltY', 0, -40, 40, 'Resting turn left or right, in 3D.'),
+    /* ─── product header ───────────────────────────────────────────────────────────────────────── */
+    bool('productHeader.showNavigation', true, 'Show the app\'s navigation bar under the top bar.'),
+    bool('productHeader.showLogo', true, 'Show the app logo in the navigation bar.'),
+    text('productHeader.logo', 'LOGO', 24, 'App logo text in the navigation bar.'),
+    text('productHeader.activeItem', 'Text', 24, 'The highlighted navigation item: one of productHeader.navItems, or empty for none.'),
+    bool('productHeader.showAction', true, 'Show a button on the right of the navigation bar.'),
+    text('productHeader.actionText', 'Sign up', 20, 'Navigation bar button label.'),
+    du('productHeader.height', 72, 30, 200, 'Navigation bar height.'),
+    du('productHeader.padding', 34, 0, 160, 'Horizontal padding of the navigation bar.'),
+    du('productHeader.fontSize', 19, 8, 60, 'Navigation text size.'),
+    weight('productHeader.fontWeight', 500, 'Navigation text weight.'),
+    color('productHeader.backgroundColor', '#ffffff', 'Navigation bar colour.'),
+    color('productHeader.textColor', '#6f6886', 'Navigation item colour.'),
+    color('productHeader.activeColor', '#1c1432', 'Active item colour.'),
+    color('productHeader.activeBackground', '#f0eaff', 'Active item pill colour.'),
+    color('productHeader.logoColor', '#1c1432', 'App logo colour.'),
+    color('productHeader.accentColor', '#7c3aed', 'Navigation button colour.'),
+    bool('productHeader.showDivider', true, 'Draw a line under the navigation bar.'),
+    color('productHeader.dividerColor', '#eeebf5', 'Divider colour.'),
+    /* ─── product UI content ───────────────────────────────────────────────────────────────────── */
+    color('productContent.backgroundColor', '#ffffff', 'App content background.'),
+    color('productContent.accentColor', '#7c3aed', 'App accent: send button, focus ring, highlights.'),
+    color('productContent.textColor', '#1c1432', 'App body text colour.'),
+    color('productContent.mutedColor', '#8b85a0', 'App secondary text colour.'),
+    du('productContent.padding', 40, 0, 200, 'App content padding.'),
+    du('productContent.fontSize', 21, 8, 60, 'App body text size.'),
+    bool('productContent.greeting.enabled', true, 'Show the user\'s message bubble.'),
+    text('productContent.greeting.text', 'Could you please send me your amazing portfolio to check?', 140, 'The user\'s message.'),
+    choice('productContent.greeting.align', 'right', ['left', 'right'], 'Which side the user\'s message sits.'),
+    color('productContent.greeting.bubbleColor', '#7c3aed', 'Message bubble colour.'),
+    color('productContent.greeting.textColor', '#ffffff', 'Message text colour.'),
+    bool('productContent.avatar.enabled', true, 'Show the assistant avatar beside the reply.'),
+    text('productContent.avatar.initials', 'A', 3, 'Avatar initials (with no assets.avatar image).'),
+    color('productContent.avatar.color', '#c084fc', 'Avatar colour (with no image).'),
+    bool('productContent.response.enabled', true, 'Show the assistant\'s reply line above the cards.'),
+    text('productContent.response.text', 'Sure! Here are a few things I made for you:', 120, 'The assistant\'s reply.'),
+    bool('productContent.hero.enabled', false, 'Show a wide hero panel above the cards (assets.heroImage, or a procedural placeholder).'),
+    norm('productContent.hero.height', 0.3, 0.05, 0.8, 'Hero panel height, as a fraction of the content area.'),
+    choice('productContent.cardLayout', 'grid', ['grid', 'free'], 'grid: cards fill a grid (their x/y nudge, width/height multiply the cell). free: each card\'s x/y/width/height place it in the content area.'),
+    du('productContent.cardGap', 22, 0, 120, 'Space between cards (grid).'),
+    bool('productContent.input.enabled', true, 'Show the message input at the bottom of the app.'),
+    text('productContent.input.placeholder', 'Write a message...', 60, 'Input placeholder.'),
+    text('productContent.input.typeText', 'Make the hero section brighter', 80, 'Text typed into the input during the showcase. Empty: the placeholder stays.'),
+    num('productContent.input.typeSpeed', 18, 1, 80, 'Typing speed, characters per second.', { step: 1, unit: 'factor' }),
+    color('productContent.input.backgroundColor', '#f7f5fc', 'Input colour.'),
+    color('productContent.input.borderColor', '#e9e4f5', 'Input border colour.'),
+    text('productContent.sendButton', '↑', 8, 'Send button label.'),
+    color('productContent.sendButtonColor', '#7c3aed', 'Send button colour.'),
+    color('productContent.sendButtonTextColor', '#ffffff', 'Send button label colour.'),
+    /* ─── background ───────────────────────────────────────────────────────────────────────────── */
+    color('background.baseColor', '#3b0f8c', 'Base colour under the gradient.'),
+    bool('background.gradient.enabled', true, 'Lay the gradient (background.gradient.stops) over the base.'),
+    choice('background.gradient.type', 'mesh', ['linear', 'radial', 'mesh'], 'linear: along the angle. radial: from the centre out. mesh: soft blobs of each stop colour around the canvas.'),
+    deg('background.gradient.angle', 135, 0, 360, 'Linear direction (0 = upwards, 90 = to the right); for mesh, rotates the blobs.'),
+    norm('background.gradient.softness', 0.65, 0, 1, 'Mesh blob softness (0 = hard edges, 1 = very diffuse).'),
+    bool('background.glow.enabled', true, 'The main luminous glow behind the product.'),
+    norm('background.glow.x', 0.5, -0.5, 1.5, 'Glow centre across the canvas.'),
+    norm('background.glow.y', 0.6, -0.5, 1.5, 'Glow centre down the canvas.'),
+    num('background.glow.radius', 0.75, 0, 3, 'Glow radius, as a fraction of the short side.', { unit: 'short' }),
+    color('background.glow.color', '#f5a3ff', 'Glow colour.'),
+    opacity('background.glow.intensity', 0.75, 'Glow strength.'),
+    du('background.glow.blur', 60, 0, 400, 'Extra blur on the glow.'),
+    bool('background.secondaryGlow.enabled', true, 'A second, cooler glow.'),
+    norm('background.secondaryGlow.x', 0.12, -0.5, 1.5, 'Second glow centre across the canvas.'),
+    norm('background.secondaryGlow.y', 0.18, -0.5, 1.5, 'Second glow centre down the canvas.'),
+    num('background.secondaryGlow.radius', 0.7, 0, 3, 'Second glow radius, as a fraction of the short side.', { unit: 'short' }),
+    color('background.secondaryGlow.color', '#7c9bff', 'Second glow colour.'),
+    opacity('background.secondaryGlow.intensity', 0.55, 'Second glow strength.'),
+    bool('background.noise.enabled', true, 'Fine film grain over the background (a seeded turbulence).'),
+    opacity('background.noise.opacity', 0.07, 'Grain opacity.'),
+    factor('background.noise.scale', 1, 0.2, 5, 'Grain size.'),
+    int('background.noise.seed', 7, 0, 100000, 'Grain seed.'),
+    bool('background.vignette.enabled', true, 'Darken towards the corners.'),
+    opacity('background.vignette.intensity', 0.35, 'Vignette strength.'),
+    color('background.vignette.color', '#14052f', 'Vignette colour.'),
+    /* ─── typography ───────────────────────────────────────────────────────────────────────────── */
+    choice('typography.fontFamily', 'Plus Jakarta Sans', FONT_FAMILIES, 'Headline typeface (registered and loaded by the renderer).'),
+    choice('typography.uiFontFamily', 'Inter', FONT_FAMILIES, 'Typeface inside the product UI.'),
+    du('typography.eyebrowSize', 24, 8, 120, 'Eyebrow size.'),
+    du('typography.titleSize', 96, 16, 400, 'Headline size (times the layout\'s titleScale).'),
+    du('typography.subtitleSize', 32, 8, 160, 'Subtitle size.'),
+    du('typography.ctaSize', 26, 8, 120, 'Call-to-action label size.'),
+    du('typography.badgeSize', 19, 8, 80, 'Badge label size.'),
+    weight('typography.eyebrowWeight', 600, 'Eyebrow weight.'),
+    weight('typography.titleWeight', 700, 'Headline weight.'),
+    weight('typography.subtitleWeight', 400, 'Subtitle weight.'),
+    weight('typography.ctaWeight', 600, 'Call-to-action weight.'),
+    num('typography.titleLetterSpacing', -0.035, -0.15, 0.3, 'Headline tracking.', { step: 0.005, unit: 'em' }),
+    num('typography.eyebrowLetterSpacing', 0.12, -0.1, 0.5, 'Eyebrow tracking.', { step: 0.005, unit: 'em' }),
+    num('typography.titleLineHeight', 1.04, 0.7, 2, 'Headline line height.', { step: 0.01, unit: 'em' }),
+    num('typography.subtitleLineHeight', 1.4, 0.8, 2.5, 'Subtitle line height.', { step: 0.01, unit: 'em' }),
+    choice('typography.eyebrowCase', 'uppercase', ['none', 'uppercase'], 'Eyebrow letter case.'),
+    choice('typography.eyebrowStyle', 'pill', ['pill', 'plain'], 'Eyebrow in a translucent pill, or plain text.'),
+    color('typography.eyebrowColor', '#ffffff', 'Eyebrow colour.'),
+    color('typography.eyebrowBackground', '#ffffff', 'Eyebrow pill colour.'),
+    opacity('typography.eyebrowBackgroundOpacity', 0.16, 'Eyebrow pill opacity.'),
+    color('typography.titleColor', '#ffffff', 'Headline colour.'),
+    bool('typography.titleGradient.enabled', true, 'Fill the headline with a vertical gradient instead of the flat colour.'),
+    color('typography.titleGradient.from', '#ffffff', 'Headline gradient top.'),
+    color('typography.titleGradient.to', '#f3d4ff', 'Headline gradient bottom.'),
+    color('typography.subtitleColor', '#f3e8ff', 'Subtitle colour.'),
+    opacity('typography.subtitleOpacity', 0.86, 'Subtitle opacity.'),
+    du('typography.gap', 20, 0, 200, 'Space between eyebrow, headline and subtitle.'),
+    opacity('typography.shadowOpacity', 0.28, 'Soft shadow under the headline text.'),
+    color('typography.shadowColor', '#2a0a5e', 'Headline shadow colour.'),
+    du('typography.shadowBlur', 30, 0, 200, 'Headline shadow blur.'),
+    /* ─── text animation ───────────────────────────────────────────────────────────────────────── */
+    ...textAnim('eyebrow', 'eyebrow', { mode: 'blur', delay: 0, duration: 30, startY: 24, blur: 14, easing: 'easeOutCubic', split: 'none', stagger: 0, startScale: 0.96 }),
+    ...textAnim('title', 'headline', { mode: 'blur', delay: 6, duration: 42, startY: 48, blur: 22, easing: 'easeOutQuart', split: 'words', stagger: 5, startScale: 0.96 }),
+    ...textAnim('subtitle', 'subtitle', { mode: 'slide', delay: 20, duration: 36, startY: 30, blur: 8, easing: 'easeOutCubic', split: 'none', stagger: 0, startScale: 0.98 }),
+    ...textAnim('cta', 'call-to-action', { mode: 'scale', delay: 0, duration: 30, startY: 24, blur: 6, easing: 'easeOutBack', split: 'none', stagger: 0, startScale: 0.7 }),
+    /* ─── product entrance / float ─────────────────────────────────────────────────────────────── */
+    bool('productEntrance.enabled', true, 'Animate the product window in. Off: it is in place from the first frame.'),
+    factor('productEntrance.startScale', 0.84, 0, 4, 'Scale it starts from.'),
+    factor('productEntrance.endScale', 1, 0, 4, 'Scale it settles at.'),
+    du('productEntrance.startY', 260, -2000, 2000, 'Vertical offset it rises from.'),
+    du('productEntrance.endY', 0, -2000, 2000, 'Vertical offset it settles at.'),
+    opacity('productEntrance.startOpacity', 0, 'Opacity it starts from.'),
+    opacity('productEntrance.endOpacity', 1, 'Opacity it settles at.'),
+    deg('productEntrance.startRotation', -1.5, -45, 45, 'Rotation it starts from.'),
+    deg('productEntrance.endRotation', 0, -45, 45, 'Rotation it settles at.'),
+    deg('productEntrance.startTilt', 22, -60, 60, '3D tilt back it starts from (perspective).'),
+    deg('productEntrance.endTilt', 0, -60, 60, '3D tilt it settles at.'),
+    frames('productEntrance.delayFrames', 0, 600, 'Delay after the productEntrance phase starts.'),
+    frames('productEntrance.durationFrames', 54, 600, 'How long the entrance takes.', 1),
+    easing('productEntrance.easing', 'easeOutQuart', 'How the window arrives.'),
+    bool('productFloat.enabled', true, 'After the entrance, the window floats gently (from the productSettle phase).'),
+    du('productFloat.amplitudeX', 4, 0, 200, 'Horizontal float.'),
+    du('productFloat.amplitudeY', 10, 0, 200, 'Vertical float.'),
+    deg('productFloat.rotationAmplitude', 0.3, 0, 10, 'Rotation float.'),
+    num('productFloat.frequency', 0.22, 0.01, 3, 'Float cycles per second (a whole number of cycles per loop when looping).', { step: 0.01, unit: 'hz' }),
+    norm('productFloat.phase', 0, 0, 1, 'Where in its cycle the float starts.'),
+    choice('productFloat.easing', 'easeInOut', ['linear', 'easeInOut', 'easeInOutCubic', 'easeInOutQuart'], 'Float wave shape: easeInOut is sine-like, linear a triangle.'),
+    frames('productFloat.rampFrames', 40, 600, 'The float grows in over this long, so it does not jump after the entrance.'),
+    /* ─── camera ───────────────────────────────────────────────────────────────────────────────── */
+    bool('camera.enabled', true, 'Move a camera over the whole composition (zoom, pan, drift).'),
+    factor('camera.startScale', 1.08, 0.3, 4, 'Zoom at the start.'),
+    factor('camera.endScale', 1, 0.3, 4, 'Zoom at the end of the move.'),
+    norm('camera.startX', 0, -0.5, 0.5, 'Pan at the start, as a fraction of the canvas width (positive moves the view right).'),
+    norm('camera.endX', 0, -0.5, 0.5, 'Pan at the end.'),
+    norm('camera.startY', 0.02, -0.5, 0.5, 'Pan at the start, as a fraction of the canvas height (positive moves the view down).'),
+    norm('camera.endY', 0, -0.5, 0.5, 'Pan at the end.'),
+    deg('camera.startRotation', 0, -30, 30, 'Roll at the start.'),
+    deg('camera.endRotation', 0, -30, 30, 'Roll at the end.'),
+    du('camera.perspective', 3000, 400, 10000, 'Perspective distance for the camera tilt.'),
+    deg('camera.startTilt', 6, -40, 40, 'Camera tilt at the start (3D, around the horizontal axis).'),
+    deg('camera.endTilt', 0, -40, 40, 'Camera tilt at the end.'),
+    frames('camera.delayFrames', 0, 3600, 'When the move starts (from frame 0).'),
+    frames('camera.durationFrames', 360, 36000, 'How long the move takes.', 1),
+    easing('camera.easing', 'easeInOutCubic', 'How the camera moves.'),
+    du('camera.driftAmplitude', 6, 0, 200, 'A slow drift layered over the move (also what keeps a loop alive).'),
+    num('camera.driftFrequency', 0.08, 0.01, 2, 'Drift cycles per second.', { step: 0.01, unit: 'hz' }),
+    factor('camera.parallax', 0.5, 0, 2, 'How much more the background and floating elements move than the product (depth).'),
+    /* ─── card animation ───────────────────────────────────────────────────────────────────────── */
+    choice('cardAnimation.entrance', 'slide-up', CARD_ENTRANCES, 'How each card arrives.'),
+    frames('cardAnimation.delayFrames', 12, 600, 'Delay after the contentReveal phase starts.'),
+    frames('cardAnimation.durationFrames', 34, 600, 'How long each card takes to arrive.', 1),
+    frames('cardAnimation.staggerFrames', 8, 120, 'Delay between one card and the next (deterministic, in list order).'),
+    du('cardAnimation.distance', 60, 0, 1000, 'How far cards travel in (slide modes).'),
+    factor('cardAnimation.startScale', 0.9, 0, 2, 'Scale cards start from (scale mode, and slightly in the others).'),
+    opacity('cardAnimation.opacity', 0, 'Opacity cards start from.'),
+    easing('cardAnimation.easing', 'easeOutCubic', 'How each card arrives.'),
+    bool('cardAnimation.highlight.enabled', true, 'During the showcase, lift each card in turn.'),
+    factor('cardAnimation.highlight.scale', 1.045, 1, 1.5, 'Lifted card scale.'),
+    du('cardAnimation.highlight.lift', 10, 0, 100, 'Lifted card rise.'),
+    frames('cardAnimation.highlight.everyFrames', 50, 600, 'How long each card stays lifted.', 10),
+    /* ─── particles ────────────────────────────────────────────────────────────────────────────── */
+    bool('particles.enabled', true, 'Drifting light particles over the background.'),
+    int('particles.count', 70, 0, 400, 'Number of particles.'),
+    int('particles.seed', 42, 0, 100000, 'Particle seed. Same seed = same particles, frame for frame.'),
+    du('particles.sizeMin', 2, 0.5, 60, 'Smallest particle diameter.'),
+    du('particles.sizeMax', 7, 0.5, 120, 'Largest particle diameter.'),
+    opacity('particles.opacityMin', 0.2, 'Faintest particle.'),
+    opacity('particles.opacityMax', 0.85, 'Brightest particle.'),
+    num('particles.speed', 22, 0, 600, 'Drift speed.', { step: 1, unit: 'du/s' }),
+    deg('particles.direction', 270, 0, 360, 'Drift direction (0 = right, 90 = down, 270 = up).'),
+    deg('particles.spread', 35, 0, 180, 'How far each particle\'s direction may vary from the main one.'),
+    color('particles.color', '#ffffff', 'Particle colour.'),
+    opacity('particles.glow', 0.6, 'Soft halo around each particle.'),
+    du('particles.blur', 0, 0, 40, 'Particle blur.'),
+    opacity('particles.twinkle', 0.5, 'How much particles flicker (0 = steady).'),
+    frames('particles.fadeInFrames', 40, 600, 'Particles fade in over this long from frame 0.'),
+    /* ─── glow (bloom) ─────────────────────────────────────────────────────────────────────────── */
+    bool('glow.enabled', true, 'Bloom: a coloured halo around the product window and the headline.'),
+    opacity('glow.intensity', 0.55, 'Bloom strength.'),
+    du('glow.radius', 140, 0, 600, 'Bloom spread.'),
+    opacity('glow.opacity', 0.6, 'Bloom opacity.'),
+    color('glow.color', '#e879f9', 'Bloom colour.'),
+    opacity('glow.threshold', 0.55, 'Only elements brighter than this bloom (by their colour\'s luminance): 0 = everything, 1 = nothing.'),
+    /* ─── timeline ─────────────────────────────────────────────────────────────────────────────── */
+    ...phase('intro', 0, 42, 0, 'The background settles and the headline arrives.'),
+    ...phase('productEntrance', -18, 60, 0, 'The product window arrives.'),
+    ...phase('productSettle', -10, 20, 0, 'The window settles and starts to float.'),
+    ...phase('contentReveal', -6, 84, 0, 'The UI fills in: message, reply, cards, floating elements.'),
+    ...phase('showcase', 0, 210, 0, 'The product is shown off: cards lift in turn, the input types.'),
+    ...phase('outro', 0, 48, 36, 'The call to action arrives; the exit plays.'),
+    choice('timeline.outro.exit', 'none', ['none', 'fade', 'zoom', 'fadeToBase'], 'How the video ends: hold (none), fade everything out, zoom into the product, or fade to canvas.backgroundColor.'),
+    bool('loop.enabled', false, 'Loop seamlessly: the settled composition plays with only periodic motion (float, drift, lights, particles, card highlights, scenes), and the last frame leads into the first.'),
+    frames('loop.loopDurationFrames', 480, 36000, 'Loop length (motion frames). Periodic motion is fitted to a whole number of cycles.', 60),
+    /* ─── scenes ───────────────────────────────────────────────────────────────────────────────── */
+    frames('sceneTransition.durationFrames', 24, 240, 'Scene change length: the old copy leaves, the new copy arrives, overridden values blend.', 1),
+    choice('sceneTransition.style', 'blur', ['crossfade', 'slide', 'blur'], 'How the old scene\'s copy leaves.'),
+    /* ─── assets ───────────────────────────────────────────────────────────────────────────────── */
+    asset('assets.logo', 'Logo image, shown instead of the logo mark and wordmark. An asset reference: static:<file> (the render\'s public folder), https://…, or a PNG/JPEG/WebP data: URL. Empty: the procedural mark.'),
+    asset('assets.appLogo', 'Logo image inside the product\'s navigation bar. Empty: productHeader.logo text.'),
+    asset('assets.avatar', 'Assistant avatar image. Empty: initials on a colour.'),
+    asset('assets.heroImage', 'Hero panel image (productContent.hero). Empty: a procedural placeholder.'),
+    /* ─── export ───────────────────────────────────────────────────────────────────────────────── */
+    choice('export.codec', 'h264', ['h264', 'h265', 'prores', 'vp9'], 'Video codec for rendered files.'),
+    choice('export.pixelFormat', 'yuv420p', ['yuv420p', 'yuv422p10le', 'yuv444p10le'], 'Pixel format. yuv420p plays everywhere; ProRes needs a 10-bit format.'),
+    choice('export.colorSpace', 'bt709', ['bt709', 'default'], 'Colour space tag. bt709 is correct for HD/4K SDR.'),
+    int('export.crf', 12, 0, 51, 'H.264/H.265 quality (lower is better; 12 is visually lossless).'),
+    choice('export.x264Preset', 'slow', ['ultrafast', 'veryfast', 'fast', 'medium', 'slow', 'slower', 'veryslow'], 'Encoder effort.'),
+    choice('export.imageFormat', 'png', ['png', 'jpeg'], 'Frame capture format (png keeps gradients clean).'),
+];
+/* ─── lists ───────────────────────────────────────────────────────────────────────────────────── */
+const itemCtl = (group) => ({
+    num: (path, def, min, max, description, o = {}) => ({ ...num(path, def, min, max, description, o), group }),
+    int: (path, def, min, max, description, o = {}) => ({ ...int(path, def, min, max, description, o), group }),
+    text: (path, def, maxLength, description, o = {}) => ({ ...text(path, def, maxLength, description, o), group }),
+    color: (path, def, description) => ({ ...color(path, def, description), group }),
+    choice: (path, def, options, description) => ({ ...choice(path, def, options, description), group }),
+    asset: (path, description) => ({ ...asset(path, description), group }),
+    bool: (path, def, description) => ({ ...bool(path, def, description), group }),
+});
+const S = itemCtl('Background');
+const STOP_ITEM = [
+    S.num('offset', 0, 0, 1, 'Where the stop sits along the gradient (0‥1). Stops must be in order.', { step: 0.01, unit: 'fraction' }),
+    S.color('color', '#7c3aed', 'Stop colour.'),
+    S.num('opacity', 1, 0, 1, 'Stop opacity.', { unit: 'fraction' }),
+];
+const L = itemCtl('Lights');
+const LIGHT_ITEM = [
+    L.num('x', 0.5, -0.5, 1.5, 'Light centre across the canvas.', { step: 0.005, unit: 'normalized' }),
+    L.num('y', 0.5, -0.5, 1.5, 'Light centre down the canvas.', { step: 0.005, unit: 'normalized' }),
+    L.num('radius', 0.4, 0.01, 3, 'Light radius, as a fraction of the short side.', { unit: 'short' }),
+    L.color('color', '#a855f7', 'Light colour.'),
+    L.num('opacity', 0.6, 0, 1, 'Light strength.', { unit: 'fraction' }),
+    L.num('blur', 40, 0, 400, 'Light blur.', { step: 1, unit: 'du' }),
+    L.choice('animation', 'drift', ['none', 'drift', 'pulse', 'orbit'], 'drift: wanders slowly. pulse: breathes in strength. orbit: circles its centre.'),
+    L.num('amplitude', 0.04, 0, 0.5, 'How far it moves (drift, orbit) as a fraction of the short side, or how much it breathes (pulse).', { step: 0.005, unit: 'short' }),
+    L.num('frequency', 0.1, 0.01, 2, 'Animation cycles per second.', { unit: 'hz' }),
+    L.num('phase', 0, 0, 1, 'Where in its cycle it starts.', { unit: 'fraction' }),
+];
+const C = itemCtl('Product UI');
+const CARD_ITEM = [
+    C.text('title', 'Card', 40, 'Card title. Empty hides it.'),
+    C.text('subtitle', '', 60, 'Card subtitle. Empty hides it.'),
+    C.asset('image', 'Card preview image (asset reference). Empty: the procedural placeholder.'),
+    C.choice('imageFit', 'cover', ['cover', 'contain'], 'How the image fills the preview.'),
+    C.choice('placeholder', 'website', PLACEHOLDERS, 'Procedural preview drawn when there is no image.'),
+    C.color('backgroundColor', '#f7f3ff', 'Card colour.'),
+    C.color('textColor', '#1c1432', 'Card text colour.'),
+    C.color('accentColor', '#8b5cf6', 'Card accent (the placeholder art and tag).'),
+    C.num('width', 1, 0.1, 3, 'grid: multiplies the cell width. free: fraction of the content area width.', { unit: 'factor' }),
+    C.num('height', 1, 0.1, 3, 'grid: multiplies the cell height. free: fraction of the content area height.', { unit: 'factor' }),
+    C.num('radius', 20, 0, 200, 'Corner radius.', { step: 1, unit: 'du' }),
+    C.num('x', 0, -1, 1, 'grid: nudge across, as a fraction of the cell width. free: centre across the content area (0‥1).', { step: 0.005, unit: 'normalized' }),
+    C.num('y', 0, -1, 1, 'grid: nudge down, as a fraction of the cell height. free: centre down the content area (0‥1).', { step: 0.005, unit: 'normalized' }),
+    C.num('rotation', 0, -45, 45, 'Card rotation.', { step: 0.1, unit: 'deg' }),
+    C.num('scale', 1, 0.1, 3, 'Card scale.', { unit: 'factor' }),
+    C.num('opacity', 1, 0, 1, 'Card opacity.', { unit: 'fraction' }),
+];
+const N = itemCtl('Product Header');
+const NAV_ITEM = [N.text('', 'Item', 20, 'A navigation item label.', { minLength: 1 })];
+const F = itemCtl('Floating Elements');
+const FLOAT_ITEM = [
+    F.choice('type', 'pill', ['badge', 'pill', 'icon', 'text'], 'badge: icon + label on a card. pill: label on a rounded pill. icon: an icon in a circle. text: bare label.'),
+    F.text('content', 'New', 24, 'Label (badge, pill, text).'),
+    F.choice('icon', 'sparkle', ICONS, 'Icon (badge, icon).'),
+    F.num('x', 0.5, -0.8, 1.8, 'Centre across the product window (0 = its left edge, 1 = its right edge; beyond floats beside it). Anchored to the window, so it follows every aspect ratio\'s layout; kept inside the safe area.', { step: 0.005, unit: 'normalized' }),
+    F.num('y', 0.5, -0.8, 1.8, 'Centre down the product window (0 = its top edge, 1 = its bottom edge).', { step: 0.005, unit: 'normalized' }),
+    F.num('scale', 1, 0.1, 5, 'Element scale.', { unit: 'factor' }),
+    F.num('rotation', 0, -180, 180, 'Element rotation.', { step: 0.1, unit: 'deg' }),
+    F.num('fontSize', 22, 8, 120, 'Label size.', { step: 1, unit: 'du' }),
+    F.color('backgroundColor', '#ffffff', 'Element fill colour.'),
+    F.num('backgroundOpacity', 0.92, 0, 1, 'Fill opacity (lower for glass).', { unit: 'fraction' }),
+    F.color('textColor', '#4c1d95', 'Label and icon colour.'),
+    F.num('borderRadius', 999, 0, 999, 'Corner radius (999 = fully round).', { step: 1, unit: 'du' }),
+    F.num('opacity', 1, 0, 1, 'Element opacity.', { unit: 'fraction' }),
+    F.num('blur', 0, 0, 60, 'Blur (depth of field).', { step: 1, unit: 'du' }),
+    F.choice('animation', 'float', ['none', 'float', 'pulse', 'drift', 'spin'], 'Motion once it has arrived.'),
+    F.num('amplitude', 12, 0, 300, 'How far it floats or drifts (du), or how much it pulses (per cent of its size).', { step: 1, unit: 'du' }),
+    F.num('frequency', 0.3, 0.01, 3, 'Motion cycles per second.', { unit: 'hz' }),
+    F.num('phase', 0, 0, 1, 'Where in its cycle it starts.', { unit: 'fraction' }),
+    F.choice('enter', 'pop', ['pop', 'fade', 'slide-up', 'none'], 'How it arrives.'),
+    F.int('delayFrames', 0, 0, 3600, 'When it arrives, after the contentReveal phase starts.', { unit: 'frames' }),
+    F.num('depth', 1, 0, 3, 'Parallax depth: how much it follows the camera drift (0 = fixed to the frame).', { unit: 'factor' }),
+];
+const SC = itemCtl('Scenes');
+/** What a scene's override maps may reach. */
+export const OVERRIDE_SCOPES = {
+    contentOverrides: ['content.'],
+    backgroundOverrides: ['background.', 'lights.', 'glow.', 'particles.color', 'particles.count', 'particles.speed', 'particles.direction', 'canvas.backgroundColor'],
+    productOverrides: ['productWindow.', 'window.', 'productHeader.', 'productContent.'],
+    animationOverrides: ['camera.', 'productFloat.', 'cardAnimation.', 'textAnimation.'],
+};
+const overrides = (path, description) => ({
+    path, group: 'Scenes', type: 'overrides', default: {}, allow: OVERRIDE_SCOPES[path], description, userEditable: true, agentEditable: true,
+});
+const SCENE_ITEM = [
+    SC.text('id', 'scene', 32, 'Scene name (for people and patches).', { minLength: 1 }),
+    SC.int('durationFrames', 120, 30, 3600, 'Scene length.', { unit: 'frames' }),
+    overrides('contentOverrides', 'Copy for this scene: { "content.title": "…" }. Paths under content.'),
+    overrides('backgroundOverrides', 'Look for this scene: paths under background, lights, glow, and particles.color / count / speed / direction. Blended in over the transition.'),
+    overrides('productOverrides', 'Product for this scene: paths under productWindow, window, productHeader, productContent (e.g. "productContent.cards.0.title").'),
+    overrides('animationOverrides', 'Motion for this scene: paths under camera, productFloat, cardAnimation, textAnimation.'),
+];
+const card = (title, subtitle, placeholder, bg, accent) => ({
+    title, subtitle, image: '', imageFit: 'cover', placeholder, backgroundColor: bg, textColor: '#1c1432', accentColor: accent,
+    width: 1, height: 1, radius: 20, x: 0, y: 0, rotation: 0, scale: 1, opacity: 1,
+});
+const light = (x, y, radius, colorHex, op, animation, frequency, phase) => ({
+    x, y, radius, color: colorHex, opacity: op, blur: 40, animation, amplitude: 0.04, frequency, phase,
+});
+const floating = (type, content, icon, x, y, extra = {}) => ({
+    type, content, icon, x, y, scale: 1, rotation: 0, fontSize: 22, backgroundColor: '#ffffff', backgroundOpacity: 0.92, textColor: '#4c1d95',
+    borderRadius: 999, opacity: 1, blur: 0, animation: 'float', amplitude: 12, frequency: 0.3, phase: 0, enter: 'pop', delayFrames: 0, depth: 1, ...extra,
+});
+export const LISTS = [
+    {
+        path: 'background.gradient.stops', group: 'Background', minItems: 2, maxItems: 6, item: STOP_ITEM,
+        description: 'Gradient colour stops, in order of offset.',
+        default: [
+            { offset: 0, color: '#6d28d9', opacity: 1 },
+            { offset: 0.45, color: '#d946ef', opacity: 1 },
+            { offset: 1, color: '#4f7cff', opacity: 1 },
+        ],
+    },
+    {
+        path: 'lights', group: 'Lights', minItems: 0, maxItems: 8, item: LIGHT_ITEM,
+        description: 'Ambient light sources: soft coloured glows that drift, pulse or orbit.',
+        default: [
+            light(0.16, 0.34, 0.55, '#a855f7', 0.7, 'drift', 0.09, 0),
+            light(0.86, 0.24, 0.5, '#f472b6', 0.65, 'drift', 0.07, 0.35),
+            light(0.8, 0.9, 0.6, '#60a5fa', 0.6, 'orbit', 0.06, 0.6),
+            light(0.5, 0.5, 0.38, '#ffffff', 0.18, 'pulse', 0.12, 0.2),
+        ],
+    },
+    {
+        path: 'productHeader.navItems', group: 'Product Header', minItems: 0, maxItems: 6, item: NAV_ITEM,
+        description: 'Navigation items in the product\'s header, in order.',
+        default: ['Explore', 'Images', 'Text'],
+    },
+    {
+        path: 'productContent.cards', group: 'Product UI', minItems: 0, maxItems: 8, item: CARD_ITEM,
+        description: 'Result cards inside the product UI (0–8).',
+        default: [
+            card('AI Website', 'Landing page', 'website', '#f6f1ff', '#8b5cf6'),
+            card('Portfolio', 'Personal site', 'gallery', '#fdf0f8', '#ec4899'),
+            card('Dashboard', 'Analytics', 'chart', '#eef3ff', '#3b82f6'),
+        ],
+    },
+    {
+        path: 'floatingElements', group: 'Floating Elements', minItems: 0, maxItems: 10, item: FLOAT_ITEM,
+        description: 'Badges, pills, icons and labels floating around the product.',
+        default: [
+            floating('badge', 'Generated in 3s', 'bolt', -0.05, 0.24, { delayFrames: 30, phase: 0.1 }),
+            floating('pill', 'New', 'none', 1.06, 0.12, { backgroundColor: '#fdf4ff', textColor: '#a21caf', delayFrames: 42, phase: 0.55, rotation: 4 }),
+            floating('icon', '', 'sparkle', -0.03, 0.8, { textColor: '#c026d3', delayFrames: 52, phase: 0.3, fontSize: 30 }),
+            floating('pill', '99% faster', 'none', 1.04, 0.74, { delayFrames: 60, phase: 0.8, rotation: -3 }),
+        ],
+    },
+    {
+        path: 'scenes', group: 'Scenes', minItems: 0, maxItems: 6, item: SCENE_ITEM,
+        description: 'Optional scenes: each overrides copy, look, product or motion for a stretch of the video. Empty: one scene, the base config.',
+        default: [],
+    },
+];
+export const CONTROL_BY_PATH = new Map(CONTROLS.map((c) => [c.path, c]));
+export const LIST_BY_PATH = new Map(LISTS.map((l) => [l.path, l]));
+/** Every editable leaf, lists expanded as `<list>[].<field>` — the count people and agents see. */
+export function allControls() {
+    return [
+        ...CONTROLS,
+        ...LISTS.flatMap((l) => l.item.map((c) => ({ ...c, path: c.path ? `${l.path}[].${c.path}` : `${l.path}[]`, list: l.path }))),
+    ];
+}
+//# sourceMappingURL=controls.js.map