@zync/zync-screnplay-player 0.1.204 → 0.1.205

package/dist/screenplay/RemotionRenderer/components/layouts/CreatorCollabRackFocus.js

@@ -0,0 +1,603 @@
+import React from 'react';
+import { AbsoluteFill, Easing, interpolate, OffthreadVideo, useCurrentFrame, useVideoConfig } from 'remotion';
+import { loadFont as loadHeadlineFont } from '@remotion/google-fonts/Oswald';
+import { loadFont as loadBodyFont } from '@remotion/google-fonts/Poppins';
+import { useOrientationBased } from '../../hooks/useOrientationBased.js';
+import { useTheme } from '../../theme/hooks/useTheme.js';
+import { distributeTextToFit } from '../../theme/themes/default/Sentence/SentenceSimple.helpers.js';
+import FaceCenteredVideo from '../utils/FaceCenteredVideo';
+import { BlurOverlay } from '../utils/BlurOverlay';
+import { CHROME_PADDING } from '../../config.js';
+import { useVirtualBackground } from '../../hooks/useVirtualBackground';
+import { VirtualBackgroundUnderlay } from '../backgrounds/VirtualBackgroundUnderlay';
+var _loadHeadlineFont = loadHeadlineFont(),
+  headlineFontFamily = _loadHeadlineFont.fontFamily;
+var _loadBodyFont = loadBodyFont(),
+  bodyFontFamily = _loadBodyFont.fontFamily;
+var withAlpha = function withAlpha(color, alpha) {
+  if (!color || typeof color !== 'string' || !color.startsWith('#')) {
+    return color;
+  }
+  var hex = color.replace('#', '');
+  if (![3, 6].includes(hex.length)) {
+    return color;
+  }
+  var normalizedHex = hex.length === 3 ? hex.split('').map(function (_char) {
+    return _char + _char;
+  }).join('') : hex;
+  var intValue = Number.parseInt(normalizedHex, 16);
+  if (Number.isNaN(intValue)) {
+    return color;
+  }
+  var r = intValue >> 16 & 255;
+  var g = intValue >> 8 & 255;
+  var b = intValue & 255;
+  return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha, ")");
+};
+var sanitizeText = function sanitizeText(value) {
+  return typeof value === 'string' ? value.trim() : '';
+};
+var clampLines = function clampLines() {
+  var lines = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var maxLines = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
+  if (lines.length <= maxLines) return lines;
+  var trimmed = lines.slice(0, maxLines);
+  var last = trimmed[maxLines - 1].trimEnd();
+  var shortened = last.length > 3 ? last.slice(0, -3).trimEnd() : last;
+  trimmed[maxLines - 1] = "".concat(shortened, "...");
+  return trimmed;
+};
+var mergeFilters = function mergeFilters() {
+  for (var _len = arguments.length, filters = new Array(_len), _key = 0; _key < _len; _key++) {
+    filters[_key] = arguments[_key];
+  }
+  var merged = filters.filter(Boolean);
+  return merged.length ? merged.join(' ') : undefined;
+};
+var interpolateWithClamp = function interpolateWithClamp(frame, inputRange, outputRange) {
+  var easing = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : Easing.out(Easing.ease);
+  return interpolate(frame, inputRange, outputRange, {
+    easing: easing,
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp'
+  });
+};
+export var CreatorCollabRackFocus = function CreatorCollabRackFocus(_ref) {
+  var children = _ref.children,
+    text = _ref.text,
+    fullName = _ref.fullName,
+    title = _ref.title,
+    collaboratorName = _ref.collaboratorName,
+    collaboratorTitle = _ref.collaboratorTitle,
+    topicLabel = _ref.topicLabel,
+    activeSpeaker = _ref.activeSpeaker,
+    _ref$startVideoFrom = _ref.startVideoFrom,
+    startVideoFrom = _ref$startVideoFrom === void 0 ? 0 : _ref$startVideoFrom,
+    firstVideoFile = _ref.firstVideoFile,
+    _ref$startSecondVideo = _ref.startSecondVideoFrom,
+    startSecondVideoFrom = _ref$startSecondVideo === void 0 ? 0 : _ref$startSecondVideo,
+    secondVideoFile = _ref.secondVideoFile,
+    firstNoBackgroundVideoUrl = _ref.firstNoBackgroundVideoUrl,
+    firstNoBackgroundFaceMetadata = _ref.firstNoBackgroundFaceMetadata,
+    noBackgroundVideoEffects = _ref.noBackgroundVideoEffects;
+  var _useVideoConfig = useVideoConfig(),
+    width = _useVideoConfig.width,
+    height = _useVideoConfig.height,
+    fps = _useVideoConfig.fps,
+    durationInFrames = _useVideoConfig.durationInFrames;
+  var frame = useCurrentFrame();
+  var _useTheme = useTheme(),
+    primaryColor = _useTheme.primaryColor,
+    primaryContrast = _useTheme.primaryContrast,
+    accentColor = _useTheme.accentColor;
+  var _useVirtualBackground = useVirtualBackground(),
+    isVirtual = _useVirtualBackground.isVirtual,
+    virtualBgUrl = _useVirtualBackground.url;
+  var showVirtual = isVirtual && !!firstNoBackgroundVideoUrl;
+  var safeText = sanitizeText(text);
+  var safeTopicLabel = sanitizeText(topicLabel);
+  var safeFullName = sanitizeText(fullName);
+  var safeTitle = sanitizeText(title);
+  var safeCollaboratorName = sanitizeText(collaboratorName);
+  var safeCollaboratorTitle = sanitizeText(collaboratorTitle);
+  var speaker = sanitizeText(activeSpeaker).toLowerCase();
+  var collaboratorActive = speaker === 'collaborator';
+  var hasTitle = Boolean(safeText);
+  var hasHostInfo = Boolean(safeFullName || safeTitle);
+  var hasCollaboratorInfo = Boolean(safeCollaboratorName || safeCollaboratorTitle);
+  var hasCollaboratorVideo = Boolean(secondVideoFile);
+  var showCollaboratorLayer = hasCollaboratorVideo || hasCollaboratorInfo;
+  var _useOrientationBased = useOrientationBased({
+      landscape: {
+        framePadding: CHROME_PADDING + 12,
+        introTop: height * 0.22,
+        introLeft: CHROME_PADDING + 16,
+        introCentered: false,
+        introWidth: Math.min(width * 0.5, 840),
+        introHeight: height * 0.3,
+        introFontSize: 90,
+        introMaxLines: 3,
+        compactTop: CHROME_PADDING + 14,
+        compactLeft: CHROME_PADDING + 16,
+        compactWidth: Math.min(width * 0.34, 560),
+        compactHeight: 112,
+        compactFontSize: 38,
+        compactMaxLines: 2,
+        topicFontSize: 12,
+        hostLeft: CHROME_PADDING + 16,
+        hostBottom: 114,
+        hostWidth: Math.min(width * 0.34, 540),
+        hostNameMaxFontSize: 34,
+        hostRoleMaxFontSize: 20,
+        layerTop: height * 0.14,
+        layerLeft: width * 0.48,
+        layerWidth: Math.min(width * 0.56, 860),
+        layerHeight: Math.min(height * 0.74, 780),
+        layerRadius: 44,
+        layerNameMaxSize: 32,
+        layerRoleMaxSize: 17,
+        layerLabelSize: 11
+      },
+      portrait: {
+        framePadding: CHROME_PADDING + 4,
+        introTop: height * 0.18,
+        introLeft: width / 2,
+        introCentered: true,
+        introWidth: Math.min(width * 0.8, 620),
+        introHeight: height * 0.24,
+        introFontSize: 62,
+        introMaxLines: 3,
+        compactTop: CHROME_PADDING + 18,
+        compactLeft: CHROME_PADDING + 8,
+        compactWidth: Math.min(width * 0.62, 500),
+        compactHeight: 120,
+        compactFontSize: 33,
+        compactMaxLines: 2,
+        topicFontSize: 15,
+        hostLeft: CHROME_PADDING + 8,
+        hostBottom: 178,
+        hostWidth: Math.min(width * 0.58, 480),
+        hostNameMaxFontSize: 40,
+        hostRoleMaxFontSize: 24,
+        layerTop: CHROME_PADDING + 38,
+        layerLeft: width * 0.08,
+        layerWidth: width * 0.84,
+        layerHeight: Math.min(height * 0.32, 330),
+        layerRadius: 30,
+        layerNameMaxSize: 25,
+        layerRoleMaxSize: 15,
+        layerLabelSize: 12
+      },
+      square: {
+        framePadding: CHROME_PADDING + 4,
+        introTop: height * 0.2,
+        introLeft: width / 2,
+        introCentered: true,
+        introWidth: Math.min(width * 0.76, 540),
+        introHeight: height * 0.23,
+        introFontSize: 56,
+        introMaxLines: 2,
+        compactTop: CHROME_PADDING + 10,
+        compactLeft: CHROME_PADDING + 6,
+        compactWidth: Math.min(width * 0.6, 420),
+        compactHeight: 84,
+        compactFontSize: 28,
+        compactMaxLines: 1,
+        topicFontSize: 11,
+        hostLeft: CHROME_PADDING + 6,
+        hostBottom: 146,
+        hostWidth: Math.min(width * 0.54, 400),
+        hostNameMaxFontSize: 31,
+        hostRoleMaxFontSize: 18,
+        layerTop: CHROME_PADDING + 32,
+        layerLeft: width * 0.08,
+        layerWidth: width * 0.84,
+        layerHeight: Math.min(height * 0.28, 230),
+        layerRadius: 26,
+        layerNameMaxSize: 20,
+        layerRoleMaxSize: 12,
+        layerLabelSize: 10
+      }
+    }),
+    orientation = _useOrientationBased.orientation,
+    framePadding = _useOrientationBased.framePadding,
+    introTop = _useOrientationBased.introTop,
+    introLeft = _useOrientationBased.introLeft,
+    introCentered = _useOrientationBased.introCentered,
+    introWidth = _useOrientationBased.introWidth,
+    introHeight = _useOrientationBased.introHeight,
+    introFontSize = _useOrientationBased.introFontSize,
+    introMaxLines = _useOrientationBased.introMaxLines,
+    compactTop = _useOrientationBased.compactTop,
+    compactLeft = _useOrientationBased.compactLeft,
+    compactWidth = _useOrientationBased.compactWidth,
+    compactHeight = _useOrientationBased.compactHeight,
+    compactFontSize = _useOrientationBased.compactFontSize,
+    compactMaxLines = _useOrientationBased.compactMaxLines,
+    topicFontSize = _useOrientationBased.topicFontSize,
+    hostLeft = _useOrientationBased.hostLeft,
+    hostBottom = _useOrientationBased.hostBottom,
+    hostWidth = _useOrientationBased.hostWidth,
+    hostNameMaxFontSize = _useOrientationBased.hostNameMaxFontSize,
+    hostRoleMaxFontSize = _useOrientationBased.hostRoleMaxFontSize,
+    layerTop = _useOrientationBased.layerTop,
+    layerLeft = _useOrientationBased.layerLeft,
+    layerWidth = _useOrientationBased.layerWidth,
+    layerHeight = _useOrientationBased.layerHeight,
+    layerRadius = _useOrientationBased.layerRadius,
+    layerNameMaxSize = _useOrientationBased.layerNameMaxSize,
+    layerRoleMaxSize = _useOrientationBased.layerRoleMaxSize,
+    layerLabelSize = _useOrientationBased.layerLabelSize;
+  var isLandscape = orientation === 'landscape';
+  var isPortrait = orientation === 'portrait';
+  var introIn = interpolateWithClamp(frame, [0, fps * 0.95], [0, 1]);
+  var introOut = interpolateWithClamp(frame, [fps * 1.7, fps * 2.5], [1, 0]);
+  var introOpacity = introIn * introOut;
+  var introTranslateY = interpolateWithClamp(frame, [0, fps * 0.95, fps * 2.5], [24, 0, -22], Easing.out(Easing.cubic));
+  var compactOpacity = interpolateWithClamp(frame, [fps * 2.1, fps * 3.0], [0, 1]);
+  var compactTranslateY = interpolateWithClamp(frame, [fps * 2.1, fps * 3.0], [14, 0]);
+  var hostOpacityBase = interpolateWithClamp(frame, [fps * 1.15, fps * 2.0], [0, 1]);
+  var hostSustain = durationInFrames > fps * 10 ? interpolateWithClamp(frame, [fps * 6.8, fps * 9.8], [1, 0.55]) : 1;
+  var hostOpacity = hostOpacityBase * hostSustain;
+  var hostTranslateY = interpolateWithClamp(frame, [fps * 1.15, fps * 2.0], [20, 0]);
+  var layerIn = interpolateWithClamp(frame, [fps * 1.9, fps * 3.1], [0, 1]);
+  var layerTranslateY = interpolateWithClamp(frame, [fps * 1.9, fps * 3.1], [18, 0], Easing.out(Easing.cubic));
+  var layerTranslateX = interpolateWithClamp(frame, [fps * 1.9, fps * 3.1], [34, 0], Easing.out(Easing.cubic));
+  var accent = accentColor || '#6ec8ff';
+  var textColor = primaryContrast || '#ffffff';
+  var mutedTextColor = withAlpha(textColor, 0.68) || textColor;
+  var softTextColor = withAlpha(textColor, 0.8) || textColor;
+  var _distributeTextToFit = distributeTextToFit(safeText, introWidth, introHeight, introFontSize),
+    introLinesRaw = _distributeTextToFit.lines,
+    introFinalSize = _distributeTextToFit.fontSize;
+  var introLines = clampLines(introLinesRaw, introMaxLines);
+  var _distributeTextToFit2 = distributeTextToFit(safeText, compactWidth, compactHeight, compactFontSize),
+    compactLinesRaw = _distributeTextToFit2.lines,
+    compactFinalSize = _distributeTextToFit2.fontSize;
+  var compactLines = clampLines(compactLinesRaw, compactMaxLines);
+  var _distributeTextToFit3 = distributeTextToFit(safeFullName, hostWidth, isLandscape ? 78 : 92, hostNameMaxFontSize),
+    hostNameLines = _distributeTextToFit3.lines,
+    hostNameSize = _distributeTextToFit3.fontSize;
+  var _distributeTextToFit4 = distributeTextToFit(safeTitle, hostWidth, isLandscape ? 48 : 58, hostRoleMaxFontSize),
+    hostRoleLines = _distributeTextToFit4.lines,
+    hostRoleSize = _distributeTextToFit4.fontSize;
+  var layerTextWidth = Math.max(layerWidth - 52, 0);
+  var _distributeTextToFit5 = distributeTextToFit(safeCollaboratorName, layerTextWidth, isLandscape ? 70 : 52, layerNameMaxSize),
+    guestNameRaw = _distributeTextToFit5.lines,
+    guestNameSize = _distributeTextToFit5.fontSize;
+  var guestNameLines = clampLines(guestNameRaw, isLandscape ? 2 : 1);
+  var _distributeTextToFit6 = distributeTextToFit(safeCollaboratorTitle, layerTextWidth, isLandscape ? 56 : 40, layerRoleMaxSize),
+    guestRoleRaw = _distributeTextToFit6.lines,
+    guestRoleSize = _distributeTextToFit6.fontSize;
+  var guestRoleLines = clampLines(guestRoleRaw, 1);
+  var hostFocus = collaboratorActive ? 1 : 0;
+  var hostBlurPx = 0.25 + hostFocus * 1.7;
+  var hostBrightness = 1 - hostFocus * 0.16;
+  var hostSaturation = 1.03 - hostFocus * 0.2;
+  var guestBlurPx = 3.8 - hostFocus * 3.3;
+  var guestBrightness = 0.66 + hostFocus * 0.42;
+  var guestSaturation = 0.76 + hostFocus * 0.34;
+  var guestLabel = collaboratorActive ? 'NOW RESPONDING' : 'NEXT RESPONSE';
+  var hostScale = 1.014 + interpolateWithClamp(frame, [0, durationInFrames], [0, 0.02]);
+  var layerDrift = Math.sin(frame / 32) * (isLandscape ? 5 : 3);
+  var renderCreatorVideo = function renderCreatorVideo(containerWidth, containerHeight, radius) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, showVirtual && virtualBgUrl ? /*#__PURE__*/React.createElement(VirtualBackgroundUnderlay, {
+      url: virtualBgUrl,
+      width: "100%",
+      height: "100%",
+      borderRadius: radius,
+      zIndex: 1
+    }) : null, firstNoBackgroundFaceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+      startFrom: startVideoFrom,
+      src: firstVideoFile,
+      faceMetadata: firstNoBackgroundFaceMetadata,
+      containerWidth: containerWidth,
+      containerHeight: containerHeight,
+      useAveragePosition: true,
+      muted: false,
+      style: {
+        filter: mergeFilters(!showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && firstNoBackgroundVideoUrl ? 'brightness(0.7)' : undefined)
+      }
+    }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+      startFrom: startVideoFrom,
+      src: firstVideoFile,
+      muted: false,
+      style: {
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover',
+        filter: mergeFilters(!showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && firstNoBackgroundVideoUrl ? 'brightness(0.7)' : undefined)
+      }
+    }), /*#__PURE__*/React.createElement(BlurOverlay, {
+      show: !showVirtual && (noBackgroundVideoEffects === null || noBackgroundVideoEffects === void 0 ? void 0 : noBackgroundVideoEffects.backgroundBlur) && firstNoBackgroundVideoUrl,
+      width: containerWidth,
+      height: containerHeight,
+      zIndex: 2
+    }), firstNoBackgroundVideoUrl && (showVirtual || noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop || noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim || noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundBlur) ? /*#__PURE__*/React.createElement(AbsoluteFill, {
+      style: {
+        position: 'absolute',
+        inset: 0,
+        zIndex: 4
+      }
+    }, firstNoBackgroundFaceMetadata ? /*#__PURE__*/React.createElement(FaceCenteredVideo, {
+      startFrom: startVideoFrom,
+      src: firstNoBackgroundVideoUrl,
+      faceMetadata: firstNoBackgroundFaceMetadata,
+      containerWidth: containerWidth,
+      containerHeight: containerHeight,
+      useAveragePosition: true,
+      muted: true,
+      transparent: true,
+      noBackgroundVideoEffects: noBackgroundVideoEffects
+    }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+      startFrom: startVideoFrom,
+      src: firstNoBackgroundVideoUrl,
+      muted: true,
+      transparent: true,
+      style: {
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover',
+        filter: noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop ? 'brightness(1.1) contrast(1.15) saturate(1.05)' : undefined
+      }
+    })) : null);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      width: width,
+      height: height,
+      overflow: 'hidden',
+      backgroundColor: primaryColor || '#0f172a',
+      color: textColor,
+      fontFamily: bodyFontFamily
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      inset: 0,
+      transform: "scale(".concat(hostScale, ")"),
+      transformOrigin: 'center',
+      filter: "blur(".concat(hostBlurPx, "px) brightness(").concat(hostBrightness, ") saturate(").concat(hostSaturation, ")"),
+      zIndex: 1
+    }
+  }, renderCreatorVideo(width, height, 0)), showCollaboratorLayer && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      top: layerTop,
+      left: layerLeft,
+      width: layerWidth,
+      height: layerHeight,
+      opacity: layerIn * (collaboratorActive ? 0.98 : 0.86),
+      transform: "translateX(".concat(layerTranslateX, "px) translateY(").concat(layerTranslateY + layerDrift, "px)"),
+      zIndex: 2
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      inset: 0,
+      borderRadius: layerRadius,
+      overflow: 'hidden',
+      border: "1px solid ".concat(withAlpha(textColor, collaboratorActive ? 0.26 : 0.14)),
+      boxShadow: '0 24px 58px rgba(0, 0, 0, 0.46)',
+      backgroundColor: withAlpha(primaryColor || '#0f172a', 0.65)
+    }
+  }, hasCollaboratorVideo ? /*#__PURE__*/React.createElement(OffthreadVideo, {
+    startFrom: startSecondVideoFrom,
+    src: secondVideoFile,
+    muted: true,
+    style: {
+      width: '100%',
+      height: '100%',
+      objectFit: 'cover',
+      objectPosition: '50% 20%',
+      filter: "blur(".concat(guestBlurPx, "px) brightness(").concat(guestBrightness, ") saturate(").concat(guestSaturation, ")"),
+      transform: "scale(".concat(collaboratorActive ? 1.08 : 1.03, ")")
+    }
+  }) : /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      inset: 0,
+      background: "linear-gradient(130deg, ".concat(withAlpha(accent, 0.28), " 0%, ").concat(withAlpha(primaryColor || '#0f172a', 0.92), " 100%)")
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      inset: 0,
+      background: isLandscape ? "linear-gradient(105deg, ".concat(withAlpha('#000000', 0.14), " 0%, ").concat(withAlpha('#000000', 0.55), " 100%)") : "linear-gradient(180deg, ".concat(withAlpha('#000000', 0.18), " 0%, ").concat(withAlpha('#000000', 0.62), " 100%)")
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      left: 18,
+      right: 18,
+      top: 14
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 42,
+      height: 2,
+      backgroundColor: accent,
+      marginBottom: 8
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: layerLabelSize,
+      letterSpacing: '0.24em',
+      textTransform: 'uppercase',
+      fontWeight: 700,
+      color: collaboratorActive ? accent : mutedTextColor
+    }
+  }, guestLabel)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      left: 18,
+      right: 18,
+      bottom: 16
+    }
+  }, guestNameLines.map(function (line, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "rack-focus-guest-name-".concat(index),
+      style: {
+        fontFamily: headlineFontFamily,
+        fontSize: guestNameSize,
+        lineHeight: 0.98,
+        letterSpacing: '-0.02em',
+        fontWeight: 500,
+        textShadow: '0 10px 28px rgba(0, 0, 0, 0.5)',
+        marginBottom: index === guestNameLines.length - 1 ? 0 : 2
+      }
+    }, line);
+  }), safeCollaboratorTitle && /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: safeCollaboratorName ? 6 : 0
+    }
+  }, guestRoleLines.map(function (line, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "rack-focus-guest-role-".concat(index),
+      style: {
+        fontSize: guestRoleSize,
+        lineHeight: 1.2,
+        color: softTextColor,
+        marginBottom: index === guestRoleLines.length - 1 ? 0 : 1
+      }
+    }, line);
+  }))))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      inset: 0,
+      zIndex: 3,
+      background: isLandscape ? "linear-gradient(90deg, ".concat(withAlpha('#000000', 0.72), " 0%, ").concat(withAlpha('#000000', 0.44), " 34%, ").concat(withAlpha('#000000', 0.08), " 70%, ").concat(withAlpha('#000000', 0.36), " 100%)") : "linear-gradient(180deg, ".concat(withAlpha('#000000', 0.52), " 0%, ").concat(withAlpha('#000000', 0.2), " 34%, ").concat(withAlpha('#000000', 0.2), " 62%, ").concat(withAlpha('#000000', 0.72), " 100%)")
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      inset: 0,
+      zIndex: 4,
+      background: isLandscape ? "radial-gradient(circle at 78% 36%, ".concat(withAlpha(accent, collaboratorActive ? 0.26 : 0.16), " 0%, ").concat(withAlpha(accent, 0), " 42%)") : "radial-gradient(circle at 76% 24%, ".concat(withAlpha(accent, collaboratorActive ? 0.24 : 0.14), " 0%, ").concat(withAlpha(accent, 0), " 38%)")
+    }
+  }), hasTitle && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      top: introTop,
+      left: introCentered ? '50%' : introLeft,
+      width: introWidth,
+      textAlign: introCentered ? 'center' : 'left',
+      opacity: introOpacity,
+      transform: "".concat(introCentered ? 'translateX(-50%) ' : '', "translateY(").concat(introTranslateY, "px)"),
+      zIndex: 6
+    }
+  }, safeTopicLabel && /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: topicFontSize,
+      letterSpacing: '0.28em',
+      textTransform: 'uppercase',
+      color: mutedTextColor,
+      marginBottom: 10,
+      fontWeight: 600
+    }
+  }, safeTopicLabel), introLines.map(function (line, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "rack-focus-intro-".concat(index),
+      style: {
+        fontFamily: headlineFontFamily,
+        fontSize: introFinalSize,
+        lineHeight: 0.96,
+        letterSpacing: '-0.03em',
+        fontWeight: 500,
+        marginBottom: index === introLines.length - 1 ? 0 : 5,
+        textShadow: '0 14px 36px rgba(0, 0, 0, 0.45)'
+      }
+    }, line);
+  })), (hasTitle || safeTopicLabel) && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      top: compactTop,
+      left: compactLeft,
+      width: compactWidth,
+      opacity: compactOpacity,
+      transform: "translateY(".concat(compactTranslateY, "px)"),
+      zIndex: 7
+    }
+  }, safeTopicLabel && /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: topicFontSize,
+      letterSpacing: '0.3em',
+      textTransform: 'uppercase',
+      color: mutedTextColor,
+      marginBottom: hasTitle ? 8 : 0,
+      fontWeight: 600
+    }
+  }, safeTopicLabel), compactLines.map(function (line, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "rack-focus-compact-".concat(index),
+      style: {
+        fontFamily: headlineFontFamily,
+        fontSize: compactFinalSize,
+        lineHeight: 0.99,
+        letterSpacing: '-0.025em',
+        fontWeight: 500,
+        marginBottom: index === compactLines.length - 1 ? 0 : 2,
+        textShadow: '0 10px 24px rgba(0, 0, 0, 0.32)'
+      }
+    }, line);
+  })), hasHostInfo && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      left: hostLeft,
+      bottom: hostBottom,
+      width: hostWidth,
+      opacity: hostOpacity,
+      transform: "translateY(".concat(hostTranslateY, "px)"),
+      zIndex: 7
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: isPortrait ? 52 : 44,
+      height: 2,
+      backgroundColor: accent,
+      marginBottom: 12,
+      boxShadow: "0 0 18px ".concat(withAlpha(accent, 0.36))
+    }
+  }), hostNameLines.map(function (line, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "rack-focus-host-name-".concat(index),
+      style: {
+        fontFamily: headlineFontFamily,
+        fontSize: hostNameSize,
+        lineHeight: 0.98,
+        letterSpacing: '-0.02em',
+        fontWeight: 500,
+        marginBottom: index === hostNameLines.length - 1 ? 0 : 2,
+        textShadow: '0 12px 30px rgba(0, 0, 0, 0.42)'
+      }
+    }, line);
+  }), safeTitle && /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: safeFullName ? 6 : 0
+    }
+  }, hostRoleLines.map(function (line, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "rack-focus-host-role-".concat(index),
+      style: {
+        fontSize: hostRoleSize,
+        lineHeight: 1.2,
+        color: softTextColor,
+        marginBottom: index === hostRoleLines.length - 1 ? 0 : 1,
+        textShadow: '0 12px 30px rgba(0, 0, 0, 0.36)'
+      }
+    }, line);
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      inset: framePadding,
+      border: "1px solid ".concat(withAlpha(accent, collaboratorActive ? 0.26 : 0.12)),
+      opacity: isPortrait ? 0.42 : 0.34,
+      pointerEvents: 'none',
+      zIndex: 5
+    }
+  })), /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      zIndex: 100
+    }
+  }, children));
+};