pageflow 17.1.0 → 17.2.0

data/entry_types/scrolled/package/frontend/index.js

@@ -1,100 +1,31 @@
-import { E as EventContextDataProvider, C as ConnectedSection, u as usePrevious, g as getEventObject, w as withInlineEditingDecorator, a as useCurrentSectionIndexState, b as useScrollToTarget, c as usePostMessageListener, d as contentStyles, A as AtmoProvider, W as Widget, S as SelectableWidget, _ as _asyncToGenerator, e as withInlineEditingAlternative, f as useDarkBackground, i as isBlankEditableTextValue, h as EditableText, j as useContentElementAttributes, k as widths, l as useContentElementConfigurationUpdate, I as InlineFileRights, m as useTextTracks, n as useMediaMuted, o as useFocusOutlineVisible, p as useVideoQualitySetting, q as useIsomorphicLayoutEffect, r as frontendStyles, L as Link, F as Fullscreen, T as Text, s as utils, t as styles$d, R as RootProviders, v as registerVendors, x as api, y as loadInlineEditingComponents } from './FloatingPortalRootProvider-51914be7.js';
-export { ac as Atmo, ad as AtmoContext, A as AtmoProvider, aa as AudioPlayer, D as ContentElementAttributesProvider, H as ContentElementEditorCommandEmitterContext, K as ContentElementLifecycleContext, U as EditableTable, h as EditableText, $ as FloatingPortalRootProvider, a4 as Image, I as InlineFileRights, a5 as MediaPlayer, af as OnScreenObserverRootProvider, P as PlayerEventContextDataProvider, R as RootProviders, ai as SectionThumbnail, S as SelectableWidget, ah as StandaloneSectionThumbnail, T as Text, V as ThirdPartyOptIn, X as ThirdPartyOptOutInfo, a9 as VideoPlayer, W as Widget, a3 as contentElementWidthName, k as contentElementWidths, x as frontend, a1 as getAvailableTransitionNames, a6 as getInitialPlayerState, a0 as getTransitionNames, a2 as paletteColor, a7 as playerStateReducer, ab as processSources, v as registerConsentVendors, ae as useAtmo, z as useAudioFocus, B as useBackgroundFile, Y as useConsentRequested, l as useContentElementConfigurationUpdate, G as useContentElementEditorCommandSubscription, J as useContentElementLifecycle, M as useCurrentChapter, f as useDarkBackground, Z as useFloatingPortalRoot, N as useIsStaticPreview, q as useIsomorphicLayoutEffect, n as useMediaMuted, ag as useOnScreen, O as useOnUnmuteMedia, a8 as usePlayerState, Q as usePortraitOrientation, s as utils } from './FloatingPortalRootProvider-51914be7.js';
-import 'core-js/modules/es.symbol';
-import 'core-js/modules/es.symbol.description';
-import 'core-js/modules/es.symbol.async-iterator';
-import 'core-js/modules/es.symbol.has-instance';
-import 'core-js/modules/es.symbol.is-concat-spreadable';
-import 'core-js/modules/es.symbol.iterator';
-import 'core-js/modules/es.symbol.match';
-import 'core-js/modules/es.symbol.replace';
-import 'core-js/modules/es.symbol.search';
-import 'core-js/modules/es.symbol.species';
-import 'core-js/modules/es.symbol.split';
-import 'core-js/modules/es.symbol.to-primitive';
-import 'core-js/modules/es.symbol.to-string-tag';
-import 'core-js/modules/es.symbol.unscopables';
-import 'core-js/modules/es.array.concat';
-import 'core-js/modules/es.array.fill';
-import 'core-js/modules/es.array.find';
-import 'core-js/modules/es.array.from';
-import 'core-js/modules/es.array.iterator';
-import 'core-js/modules/es.json.to-string-tag';
-import 'core-js/modules/es.map';
-import 'core-js/modules/es.math.to-string-tag';
-import 'core-js/modules/es.object.assign';
-import 'core-js/modules/es.object.to-string';
-import 'core-js/modules/es.promise';
-import 'core-js/modules/es.promise.finally';
-import 'core-js/modules/es.set';
-import 'core-js/modules/es.string.iterator';
-import 'core-js/modules/es.string.starts-with';
-import 'core-js/modules/esnext.aggregate-error';
-import 'core-js/modules/esnext.map.delete-all';
-import 'core-js/modules/esnext.map.every';
-import 'core-js/modules/esnext.map.filter';
-import 'core-js/modules/esnext.map.find';
-import 'core-js/modules/esnext.map.find-key';
-import 'core-js/modules/esnext.map.from';
-import 'core-js/modules/esnext.map.group-by';
-import 'core-js/modules/esnext.map.includes';
-import 'core-js/modules/esnext.map.key-by';
-import 'core-js/modules/esnext.map.key-of';
-import 'core-js/modules/esnext.map.map-keys';
-import 'core-js/modules/esnext.map.map-values';
-import 'core-js/modules/esnext.map.merge';
-import 'core-js/modules/esnext.map.of';
-import 'core-js/modules/esnext.map.reduce';
-import 'core-js/modules/esnext.map.some';
-import 'core-js/modules/esnext.map.update';
-import 'core-js/modules/esnext.promise.all-settled';
-import 'core-js/modules/esnext.promise.any';
-import 'core-js/modules/esnext.promise.try';
-import 'core-js/modules/esnext.set.add-all';
-import 'core-js/modules/esnext.set.delete-all';
-import 'core-js/modules/esnext.set.difference';
-import 'core-js/modules/esnext.set.every';
-import 'core-js/modules/esnext.set.filter';
-import 'core-js/modules/esnext.set.find';
-import 'core-js/modules/esnext.set.from';
-import 'core-js/modules/esnext.set.intersection';
-import 'core-js/modules/esnext.set.is-disjoint-from';
-import 'core-js/modules/esnext.set.is-subset-of';
-import 'core-js/modules/esnext.set.is-superset-of';
-import 'core-js/modules/esnext.set.join';
-import 'core-js/modules/esnext.set.map';
-import 'core-js/modules/esnext.set.of';
-import 'core-js/modules/esnext.set.reduce';
-import 'core-js/modules/esnext.set.some';
-import 'core-js/modules/esnext.set.symmetric-difference';
-import 'core-js/modules/esnext.set.union';
-import 'core-js/modules/esnext.symbol.dispose';
-import 'core-js/modules/esnext.symbol.observable';
-import 'core-js/modules/esnext.symbol.pattern-match';
-import 'core-js/modules/web.dom-collections.iterator';
-import 'regenerator-runtime/runtime.js';
-import { browser, events, consent, features } from 'pageflow/frontend';
+import { browser, events, features, consent } from 'pageflow/frontend';
 import React, { useRef, useState, useEffect, useCallback, useMemo, Suspense, useContext } from 'react';
 import ReactDOM from 'react-dom';
-import { _ as _slicedToArray, m as useSectionsWithChapter, t as useEntryStructure, v as getFileUrlTemplateHost, u as useI18n, g as useTheme, b as _defineProperty, a as _objectSpread2, T as ThemeIcon, o as _toConsumableArray, e as _objectWithoutProperties, w as useAvailableQualities, x as setupI18n } from './ThemeIcon-81f2f066.js';
-export { L as LocaleProvider, T as ThemeIcon, x as setupI18n, l as useAdditionalSeedData, y as useChapters, z as useCredits, A as useCutOff, B as useDarkWidgets, c as useEntryMetadata, r as useEntryStateDispatch, C as useEntryTranslations, j as useFile, D as useFileRights, i as useFileWithInlineRights, u as useI18n, F as useLegalInfo, J as useLocale, G as useMainChapters, H as useShareProviders, I as useShareUrl, g as useTheme } from './ThemeIcon-81f2f066.js';
 import classNames from 'classnames';
-import { a as useContentElementEditorState } from './useContentElementEditorState-77fe6c79.js';
-export { C as ContentElementEditorStateContext, a as useContentElementEditorState } from './useContentElementEditorState-77fe6c79.js';
-import './inherits-539844a6.js';
+import { e as extensible, u as useScrollToTarget, a as useActiveExcursion, M as MainStorylineCoverageProvider, b as MainStorylineActivity, c as useMainStorylineCoverage, d as api, p as provideExtensions, f as useDarkBackground, E as EditableText, g as useContentElementAttributes, w as widths, L as Link, T as Text } from './FloatingPortalRootProvider-58189220.js';
+export { C as ContentElementAttributesProvider, i as ContentElementLifecycleContext, k as ContentElementViewTimelineContext, E as EditableText, F as FloatingPortalRootProvider, L as Link, b as MainStorylineActivity, O as OnScreenObserverRootProvider, T as Text, r as contentElementWidthName, w as contentElementWidths, d as frontend, l as getViewTimelineProgress, q as paletteColor, h as useContentElementLifecycle, j as useContentElementViewTimelineProgress, f as useDarkBackground, o as useFloatingPortalRoot, m as useIsStaticPreview, s as useOnScreen, n as useStorylineActivity } from './FloatingPortalRootProvider-58189220.js';
+export { u as useDelayedBoolean } from './useDelayedBoolean-a387d85b.js';
+import { E as EventContextDataProvider, C as ConnectedSection, g as getEventObject, u as useCurrentSectionIndexState, a as usePostMessageListener, c as contentStyles, A as AtmoProvider, W as Widget, S as SelectableWidget, i as isBlankEditableTextValue, b as useContentElementConfigurationUpdate, d as usePrevious, I as InlineFileRights, e as useFocusOutlineVisible, f as useTextTracks, h as useMediaMuted, j as useVideoQualitySetting, k as useIsomorphicLayoutEffect, l as frontendStyles, s as styles$e, F as Fullscreen, m as utils, n as styles$f, r as registerVendors, R as RootProviders } from './Placeholder.module-bf0966b4.js';
+export { G as AiIndicatorIcon, $ as Atmo, a0 as AtmoContext, A as AtmoProvider, Z as AudioPlayer, v as ContentElementEditorCommandEmitterContext, z as EditableTable, Q as Image, I as InlineFileRights, T as MediaPlayer, P as PlayerEventContextDataProvider, R as RootProviders, J as SectionIntersectionObserver, a3 as SectionThumbnail, S as SelectableWidget, a2 as StandaloneSectionThumbnail, O as ThirdPartyOptIn, B as ThirdPartyOptOutInfo, Y as VideoPlayer, W as Widget, N as getAppearanceSectionScopeName, M as getAvailableTransitionNames, U as getInitialPlayerState, L as getTransitionNames, V as playerStateReducer, _ as processSources, r as registerConsentVendors, H as useAiIndicatorLabel, a1 as useAtmo, o as useAudioFocus, p as useBackgroundFile, D as useConsentRequested, b as useContentElementConfigurationUpdate, t as useContentElementEditorCommandSubscription, w as useCurrentChapter, k as useIsomorphicLayoutEffect, h as useMediaMuted, x as useOnUnmuteMedia, X as usePlayerState, y as usePortraitOrientation, K as usePrivacyLink, q as useWidgetConfigurationUpdate, m as utils } from './Placeholder.module-bf0966b4.js';
 import 'backbone-events-standalone';
-import 'use-context-selector';
-import 'reselect';
-import 'slugify';
+import { useEntryStructure, useActiveWidgets, getFileUrlTemplateHost, useTheme, useAvailableQualities } from 'pageflow-scrolled/entryState';
+export { useAdditionalSeedData, useChapters, useCredits, useCutOff, useDarkWidgets, useEntryMetadata, useEntryStateDispatch, useEntryTranslations, useFile, useFileRights, useFileWithInlineRights, useLegalInfo, useMainChapters, useShareProviders, useShareUrl, useTheme } from 'pageflow-scrolled/entryState';
 import 'i18n-js';
+import { u as useI18n, s as setupI18n } from './i18n-e06cac14.js';
+export { L as LocaleProvider, s as setupI18n, u as useI18n, a as useLocale } from './i18n-e06cac14.js';
 import 'striptags';
 import Measure from 'react-measure';
-export { P as PhonePlatformContext } from './PhonePlatformContext-9f76033e.js';
+export { P as PhonePlatformContext } from './PhonePlatformContext-9da43797.js';
+import { u as useContentElementEditorState } from './useContentElementEditorState-a084912e.js';
+export { C as ContentElementEditorStateContext, u as useContentElementEditorState } from './useContentElementEditorState-a084912e.js';
+import { T as ThemeIcon } from './ThemeIcon-f6cb3a8f.js';
+export { T as ThemeIcon } from './ThemeIcon-f6cb3a8f.js';
+import PropTypes from 'prop-types';
 import { DraggableCore } from 'react-draggable';
-export { T as ToggleFullscreenCornerButton } from './ToggleFullscreenCornerButton-788e9cdb.js';
-export { F as FullscreenViewer } from './index-eb670c2f.js';
+export { T as ToggleFullscreenCornerButton } from './ToggleFullscreenCornerButton-61c25224.js';
+export { F as FullscreenViewer } from './index-de2b418d.js';
 import { useI18n as useI18n$1, useTheme as useTheme$1 } from 'pageflow-scrolled/frontend';
-export { u as usePhonePlatform } from './usePhonePlatform-c2ba875d.js';
+export { u as usePhonePlatform } from './usePhonePlatform-4ecb96d4.js';
 import invert from 'invert-color';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -115,37 +46,59 @@ if (browser.agent.matchesSafari() && window.parent !== window) {
 }
 require('intersection-observer');
 
-// Make sure we're in a Browser-like environment before importing polyfills
-// This prevents `fetch()` from being imported in a Node test environment
+// Make sure we're in a Browser-like environment before importing the
+// polyfill. This prevents it from being imported in a Node test
+// environment.
 if (typeof window !== 'undefined') {
-  require('whatwg-fetch');
   require('scroll-timeline');
 }
 
+var styles = {"wrapper":"Chapter-module_wrapper__3Pdly"};
+
+var _jsxFileName = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/Chapter.js";
 function Chapter(props) {
   return /*#__PURE__*/React.createElement("div", {
-    id: props.chapterSlug
+    id: props.chapterSlug,
+    className: styles.wrapper,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 10,
+      columnNumber: 5
+    }
   }, renderSections(props.sections, props.currentSectionIndex, props.setCurrentSection));
 }
 function renderSections(sections, currentSectionIndex, setCurrentSection) {
-  function _onActivate(section) {
+  function onActivate(section) {
     setCurrentSection(section);
   }
-  return sections.map(function (section) {
+  return sections.map(section => {
     return /*#__PURE__*/React.createElement(EventContextDataProvider, {
       key: section.permaId,
       section: section,
-      sectionsCount: sections.length
+      sectionsCount: sections.length,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 27,
+        columnNumber: 7
+      }
     }, /*#__PURE__*/React.createElement(ConnectedSection, {
       state: section.sectionIndex > currentSectionIndex ? 'below' : section.sectionIndex < currentSectionIndex ? 'above' : 'active',
-      onActivate: function onActivate() {
-        return _onActivate(section);
-      },
-      section: section
+      onActivate: () => onActivate(section),
+      section: section,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 28,
+        columnNumber: 9
+      }
     }));
   });
 }
 
+var _jsxFileName$1 = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/VhFix.js";
+
 // InApp browsers on iOS (e.g. Twitter) report the height of the
 // initial viewport as 100vh. Once the page is scrolled, browser
 // toolbars are hidden, the viewport becomes larger and elements with
@@ -164,47 +117,54 @@ function renderSections(sections, currentSectionIndex, setCurrentSection) {
 // On orientation change, we do want to update `--vh`, though. We
 // therefore do update it when the inner height of the window
 // decreases by more than 30%.
-function VhFix(_ref) {
-  var children = _ref.children;
-  var probeRef = useRef();
-  var _useState = useState(),
-    _useState2 = _slicedToArray(_useState, 2),
-    height = _useState2[0],
-    setHeight = _useState2[1];
-  useEffect(function () {
+function VhFix({
+  children
+}) {
+  const probeRef = useRef();
+  const [height, setHeight] = useState();
+  useEffect(() => {
     if (!browser.has('ios platform')) {
       return;
     }
     window.addEventListener('resize', update);
-    return function () {
-      return window.removeEventListener('resize', update);
-    };
+    return () => window.removeEventListener('resize', update);
     function update() {
-      setHeight(function (previousHeight) {
-        return getHeight({
-          windowHeight: window.innerHeight,
-          probeHeight: probeRef.current.clientHeight,
-          previousHeight: previousHeight
-        });
-      });
+      setHeight(previousHeight => getHeight({
+        windowHeight: window.innerHeight,
+        probeHeight: probeRef.current.clientHeight,
+        previousHeight
+      }));
     }
   }, []);
   return /*#__PURE__*/React.createElement("div", {
     style: height && {
-      '--vh': "".concat(height / 100, "px")
+      '--vh': `${height / 100}px`
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 44,
+      columnNumber: 5
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       height: '100vh',
       position: 'absolute'
     },
-    ref: probeRef
+    ref: probeRef,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 45,
+      columnNumber: 7
+    }
   }), children);
 }
-function getHeight(_ref2) {
-  var windowHeight = _ref2.windowHeight,
-    probeHeight = _ref2.probeHeight,
-    previousHeight = _ref2.previousHeight;
+function getHeight({
+  windowHeight,
+  probeHeight,
+  previousHeight
+}) {
   if (probeHeight < windowHeight || previousHeight) {
     if (!previousHeight || windowHeight > previousHeight || windowHeight < previousHeight * 0.7) {
       return windowHeight;
@@ -214,211 +174,369 @@ function getHeight(_ref2) {
   }
 }
 
-function useActiveExcursion(entryStructure) {
-  var _useState = useState(),
-    _useState2 = _slicedToArray(_useState, 2),
-    activeExcursionId = _useState2[0],
-    setActiveExcursionId = _useState2[1];
-  useEffect(function () {
-    function handleHashChange(event) {
-      var _window$history$state;
-      var slug = window.location.hash.slice(1);
-      var excursion = entryStructure.excursions.find(function (chapter) {
-        return chapter.chapterSlug === slug;
-      });
-      if (excursion && !((_window$history$state = window.history.state) === null || _window$history$state === void 0 ? void 0 : _window$history$state.excursionReturnHash)) {
-        window.history.replaceState({
-          excursionReturnHash: '#' + event.oldURL.split('#')[1]
-        }, null);
-      }
-      setActiveExcursionId(excursion === null || excursion === void 0 ? void 0 : excursion.id);
-    }
-    window.addEventListener('hashchange', handleHashChange);
-    return function () {
-      return window.removeEventListener('hashchange', handleHashChange);
-    };
-  }, [entryStructure]);
-  var activateExcursionOfSection = useCallback(function (_ref) {
-    var id = _ref.id;
-    var excursion = entryStructure.excursions.find(function (chapter) {
-      return chapter.sections.find(function (section) {
-        return section.id === id;
-      });
-    });
-    if (excursion) {
-      var _window$history$state2;
-      window.history.replaceState({
-        excursionReturnHash: ((_window$history$state2 = window.history.state) === null || _window$history$state2 === void 0 ? void 0 : _window$history$state2.excursionReturnHash) || window.location.hash
-      }, null, '#' + excursion.chapterSlug);
-    }
-    setActiveExcursionId(excursion === null || excursion === void 0 ? void 0 : excursion.id);
-  }, [entryStructure]);
-  var returnFromExcursion = useCallback(function () {
-    var _window$history$state3;
-    setActiveExcursionId(undefined);
-    if ((_window$history$state3 = window.history.state) === null || _window$history$state3 === void 0 ? void 0 : _window$history$state3.excursionReturnHash) {
-      var _window$history$state4;
-      window.history.replaceState(null, null, (_window$history$state4 = window.history.state) === null || _window$history$state4 === void 0 ? void 0 : _window$history$state4.excursionReturnHash);
-    }
-  }, []);
-  var activeExcursion = useMemo(function () {
-    return entryStructure.excursions.find(function (excursion) {
-      return excursion.id === activeExcursionId;
-    });
-  }, [entryStructure, activeExcursionId]);
-  return {
-    activeExcursion: activeExcursion,
-    activateExcursionOfSection: activateExcursionOfSection,
-    returnFromExcursion: returnFromExcursion
-  };
-}
-
-function useSectionChangeEvents(currentSectionIndex) {
-  var previousSectionIndex = usePrevious(currentSectionIndex);
-  var sections = useSectionsWithChapter();
-  useEffect(function () {
-    if (previousSectionIndex !== currentSectionIndex) {
+function useSectionChangeEvents(events) {
+  const previousSectionPermaIdRef = useRef();
+  return useCallback((section, sectionsCount) => {
+    if (previousSectionPermaIdRef.current !== (section === null || section === void 0 ? void 0 : section.permaId)) {
       events.trigger('page:change', getEventObject({
-        section: sections[currentSectionIndex],
-        sectionsCount: sections.length
+        section,
+        sectionsCount
       }));
+      previousSectionPermaIdRef.current = section === null || section === void 0 ? void 0 : section.permaId;
     }
-  });
+  }, [events]);
 }
 
-var sectionChangeMessagePoster = function sectionChangeMessagePoster(index) {
+const sectionChangeMessagePoster = (sectionIndex, excursionId) => {
   if (window.parent !== window) {
     window.parent.postMessage({
       type: 'CHANGE_SECTION',
       payload: {
-        index: index
+        sectionIndex,
+        excursionId
       }
     }, window.location.origin);
   }
 };
 
-var Content = withInlineEditingDecorator('ContentDecorator', function Content(props) {
-  var entryStructure = useEntryStructure();
-  var _useActiveExcursion = useActiveExcursion(entryStructure),
-    activeExcursion = _useActiveExcursion.activeExcursion,
-    activateExcursionOfSection = _useActiveExcursion.activateExcursionOfSection,
-    returnFromExcursion = _useActiveExcursion.returnFromExcursion;
-  var _useCurrentSectionInd = useCurrentSectionIndexState(),
-    _useCurrentSectionInd2 = _slicedToArray(_useCurrentSectionInd, 2),
-    currentSectionIndex = _useCurrentSectionInd2[0],
-    setCurrentSectionIndexState = _useCurrentSectionInd2[1];
-  useSectionChangeEvents(currentSectionIndex);
-  var updateChapterSlug = function updateChapterSlug(section) {
-    if (window.history && window.history.replaceState) {
-      if (section.sectionIndex > 0) {
-        window.history.replaceState(null, null, '#' + section.chapter.chapterSlug);
-      } else {
-        window.history.replaceState(null, null, window.location.href.split('#')[0]);
-      }
+function useChapterSlugUpdater() {
+  const windowLoadedRef = useRef(false);
+  useWindowLoadTracking(windowLoadedRef);
+  const updateChapterSlug = useCallback(section => {
+    if (!windowLoadedRef.current) {
+      return;
+    }
+    if (section.sectionIndex > 0) {
+      window.history.replaceState(null, null, '#' + section.chapter.chapterSlug);
+    } else {
+      window.history.replaceState(null, null, window.location.href.split('#')[0]);
+    }
+  }, []);
+  const updateExcursionChapterSlug = useCallback(section => {
+    if (!windowLoadedRef.current) {
+      return;
     }
+    window.history.replaceState(null, null, '#' + section.chapter.chapterSlug);
+  }, []);
+  return {
+    updateChapterSlug,
+    updateExcursionChapterSlug
   };
-  var setCurrentSection = useCallback(function (section) {
+}
+function useWindowLoadTracking(windowLoadedRef) {
+  useEffect(() => {
+    if (document.readyState === 'complete') {
+      windowLoadedRef.current = true;
+      return;
+    }
+    const handleLoad = () => {
+      windowLoadedRef.current = true;
+    };
+    window.addEventListener('load', handleLoad);
+    return () => window.removeEventListener('load', handleLoad);
+  }, [windowLoadedRef]);
+}
+
+var _jsxFileName$2 = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/Content.js";
+const Content = extensible('Content', function Content(props) {
+  const entryStructure = useEntryStructure();
+  const scrollToTarget = useScrollToTarget();
+  const {
+    activeExcursion,
+    activateExcursionOfSection,
+    returnFromExcursion
+  } = useActiveExcursion();
+  const [currentSectionIndex, setCurrentSectionIndexState] = useCurrentSectionIndexState();
+  const [currentExcursionSectionIndex, setCurrentExcursionSectionIndex] = useState(0);
+  const {
+    updateChapterSlug,
+    updateExcursionChapterSlug
+  } = useChapterSlugUpdater();
+  const triggerSectionChange = useSectionChangeEvents(events);
+  const setCurrentSection = useCallback(section => {
     sectionChangeMessagePoster(section.sectionIndex);
     setCurrentSectionIndexState(section.sectionIndex);
     updateChapterSlug(section);
-  }, [setCurrentSectionIndexState]);
-  var scrollToTarget = useScrollToTarget();
-  var receiveMessage = useCallback(function (data) {
+    triggerSectionChange(section, entryStructure.mainSectionsCount);
+  }, [setCurrentSectionIndexState, updateChapterSlug, triggerSectionChange, entryStructure.mainSectionsCount]);
+  const setCurrentExcursionSection = useCallback(section => {
+    sectionChangeMessagePoster(section.sectionIndex, section.chapter.id);
+    setCurrentExcursionSectionIndex(section.sectionIndex);
+    updateExcursionChapterSlug(section);
+    triggerSectionChange(section, activeExcursion.sections.length);
+  }, [updateExcursionChapterSlug, triggerSectionChange, activeExcursion]);
+  const receiveMessage = useCallback(data => {
     if (data.type === 'SCROLL_TO_SECTION') {
       activateExcursionOfSection({
         id: data.payload.id
       });
       scrollToTarget({
         id: data.payload.id,
-        align: data.payload.align
+        align: data.payload.align,
+        ifNeeded: data.payload.ifNeeded,
+        behavior: data.payload.behavior
       });
     }
   }, [scrollToTarget, activateExcursionOfSection]);
   usePostMessageListener(receiveMessage);
   return /*#__PURE__*/React.createElement("div", {
     className: contentStyles.Content,
-    id: "goToContent"
-  }, /*#__PURE__*/React.createElement(VhFix, null, /*#__PURE__*/React.createElement(AtmoProvider, null, renderChapters(entryStructure.main, currentSectionIndex, setCurrentSection), renderExcursion(activeExcursion, {
-    onClose: function onClose() {
-      return returnFromExcursion();
+    id: "goToContent",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 67,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement(VhFix, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 68,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement(MainStorylineCoverageProvider, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 69,
+      columnNumber: 9
     }
-  }))));
+  }, /*#__PURE__*/React.createElement(AtmoProvider, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 70,
+      columnNumber: 11
+    }
+  }, renderMainStoryline(entryStructure.main, activeExcursion, currentSectionIndex, setCurrentSection), /*#__PURE__*/React.createElement(ActiveExcursion, {
+    excursion: activeExcursion,
+    currentExcursionSectionIndex: currentExcursionSectionIndex,
+    setCurrentExcursionSection: setCurrentExcursionSection,
+    onClose: () => {
+      returnFromExcursion();
+      sectionChangeMessagePoster(currentSectionIndex);
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 75,
+      columnNumber: 13
+    }
+  })))));
 });
-function renderExcursion(excursion, _ref) {
-  var onClose = _ref.onClose;
-  if (excursion) {
-    return /*#__PURE__*/React.createElement(Widget, {
-      role: "excursion",
-      props: {
-        excursion: excursion,
-        onClose: onClose
-      }
-    }, renderChapters([excursion], 0, function () {}));
+function renderMainStoryline(chapters, activeExcursion, currentSectionIndex, setCurrentSection) {
+  return /*#__PURE__*/React.createElement(Widget, {
+    role: "mainStoryline",
+    props: {
+      activeExcursion
+    },
+    renderFallback: ({
+      children
+    }) => children,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 93,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement(MainStorylineActivity, {
+    activeExcursion: activeExcursion,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 96,
+      columnNumber: 7
+    }
+  }, renderChapters(chapters, currentSectionIndex, setCurrentSection)), /*#__PURE__*/React.createElement(Widget, {
+    role: "footer",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 99,
+      columnNumber: 7
+    }
+  }));
+}
+function ActiveExcursion({
+  excursion,
+  currentExcursionSectionIndex,
+  setCurrentExcursionSection,
+  onClose
+}) {
+  const {
+    setMainStorylineCovered
+  } = useMainStorylineCoverage();
+  if (!excursion) {
+    return null;
   }
+  return /*#__PURE__*/React.createElement(Widget, {
+    role: "excursion",
+    props: {
+      excursion,
+      onClose: () => {
+        onClose();
+        setMainStorylineCovered(false);
+      },
+      setIsCoveringBackground: setMainStorylineCovered
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 117,
+      columnNumber: 5
+    }
+  }, renderChapters([excursion], currentExcursionSectionIndex, setCurrentExcursionSection));
 }
 function renderChapters(chapters, currentSectionIndex, setCurrentSection) {
-  return chapters.map(function (chapter, index) {
+  return chapters.map((chapter, index) => {
     return /*#__PURE__*/React.createElement(Chapter, {
       key: index,
       chapterSlug: chapter.chapterSlug,
       permaId: chapter.permaId,
       sections: chapter.sections,
       currentSectionIndex: currentSectionIndex,
-      setCurrentSection: setCurrentSection
+      setCurrentSection: setCurrentSection,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 138,
+        columnNumber: 7
+      }
     });
   });
 }
 
-var Entry = withInlineEditingDecorator('EntryDecorator', function Entry() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Widget, {
-    role: "consent"
+var _jsxFileName$3 = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/WidgetPresenceWrapper.js";
+function WidgetPresenceWrapper({
+  children
+}) {
+  const widgets = useActiveWidgets();
+  return /*#__PURE__*/React.createElement(PresenceProviders, {
+    widgets: widgets,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 9,
+      columnNumber: 5
+    }
+  }, children);
+}
+function PresenceProviders({
+  widgets,
+  children
+}) {
+  if (widgets.length === 0) {
+    return children;
+  }
+  const [first, ...rest] = widgets;
+  const Provider = api.widgetTypes.getPresenceProvider(first.typeName);
+  if (Provider) {
+    return /*#__PURE__*/React.createElement(Provider, {
+      configuration: first.configuration,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 25,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/React.createElement(PresenceProviders, {
+      widgets: rest,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 26,
+        columnNumber: 9
+      }
+    }, children));
+  }
+  return /*#__PURE__*/React.createElement(PresenceProviders, {
+    widgets: rest,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 34,
+      columnNumber: 5
+    }
+  }, children);
+}
+
+var _jsxFileName$4 = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/Entry.js";
+const Entry = extensible('Entry', function Entry() {
+  return /*#__PURE__*/React.createElement(WidgetPresenceWrapper, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$4,
+      lineNumber: 12,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement(Widget, {
+    role: "consent",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$4,
+      lineNumber: 13,
+      columnNumber: 7
+    }
   }), /*#__PURE__*/React.createElement(SelectableWidget, {
-    role: "header"
-  }), /*#__PURE__*/React.createElement(Content, null), /*#__PURE__*/React.createElement(Widget, {
-    role: "footer"
+    role: "header",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$4,
+      lineNumber: 14,
+      columnNumber: 7
+    }
+  }), /*#__PURE__*/React.createElement(Content, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$4,
+      lineNumber: 15,
+      columnNumber: 7
+    }
   }));
 });
 
-function _regeneratorRuntime() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == typeof h && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator["return"] && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(typeof e + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, "catch": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
-function loadDashUnlessHlsSupported(_x) {
-  return _loadDashUnlessHlsSupported.apply(this, arguments);
-}
-function _loadDashUnlessHlsSupported() {
-  _loadDashUnlessHlsSupported = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(seed) {
-    return _regeneratorRuntime().wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          if (hasHlsSupport({
-            seed: seed,
-            agent: browser.agent
-          })) {
-            _context.next = 3;
-            break;
-          }
-          _context.next = 3;
-          return import('@videojs/http-streaming');
-        case 3:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee);
-  }));
-  return _loadDashUnlessHlsSupported.apply(this, arguments);
+function loadInlineEditingExtensions() {
+  return import('./extensions-2318f92b.js').then(({
+    extensions
+  }) => {
+    provideExtensions(extensions);
+  });
+}
+
+function loadCommentingExtensions() {
+  return import( /* webpackPreload: true */'./extensions-c98269fd.js').then(({
+    extensions
+  }) => {
+    provideExtensions(extensions);
+  });
 }
-function hasHlsSupport(_ref) {
-  var agent = _ref.agent,
-    seed = _ref.seed;
+
+async function loadDashUnlessHlsSupported(seed) {
+  if (!hasHlsSupport({
+    seed,
+    agent: browser.agent
+  })) {
+    await import('@videojs/http-streaming');
+  }
+}
+function hasHlsSupport({
+  agent,
+  seed
+}) {
   return agent.matchesSafari() || agent.matchesMobilePlatform() && (!agent.matchesAndroid() || hlsHostSupportedByAndroid(seed));
 }
 function hlsHostSupportedByAndroid(seed) {
   return getFileUrlTemplateHost(seed, 'videoFiles', 'hls-playlist').indexOf('_') < 0;
 }
 
-var ActionButton = withInlineEditingAlternative('ActionButton', function ActionButton() {
+const ActionButton = extensible('ActionButton', function ActionButton() {
   return null;
 });
 
-var styles = {"darkContentSurfaceColor":"var(--theme-dark-content-surface-color, #101010)","lightContentSurfaceColor":"var(--theme-light-content-surface-color, #fff)","darkContentTextColor":"var(--theme-dark-content-text-color, #222)","lightContentTextColor":"var(--theme-light-content-text-color, #fff)","contentColorScope":"colors-module_contentColorScope__2Zizr","root":"Figure-module_root__3FC-x colors-module_contentColorScope__2Zizr","invert":"Figure-module_invert___0BJP"};
+var styles$1 = {"darkContentSurfaceColor":"var(--theme-dark-content-surface-color, #101010)","lightContentSurfaceColor":"var(--theme-light-content-surface-color, #fff)","darkContentTextColor":"var(--theme-dark-content-text-color, #222)","lightContentTextColor":"var(--theme-light-content-text-color, #fff)","contentColorScope":"colors-module_contentColorScope__2Zizr","root":"Figure-module_root__3FC-x colors-module_contentColorScope__2Zizr","invert":"Figure-module_invert___0BJP"};
+
+var _jsxFileName$5 = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/Figure.js";
 
 /**
  * Render a figure with a caption text attached.
@@ -431,52 +549,64 @@ var styles = {"darkContentSurfaceColor":"var(--theme-dark-content-surface-color,
  * @param {boolean} [props.addCaptionButtonVisible=true] - Control visiblility of action button.
  * @param {string} [props.captionButtonPosition='outside'] - Position of action button.
  */
-function Figure(_ref) {
-  var children = _ref.children,
-    variant = _ref.variant,
-    caption = _ref.caption,
-    onCaptionChange = _ref.onCaptionChange,
-    _ref$addCaptionButton = _ref.addCaptionButtonVisible,
-    addCaptionButtonVisible = _ref$addCaptionButton === void 0 ? true : _ref$addCaptionButton,
-    _ref$addCaptionButton2 = _ref.addCaptionButtonPosition,
-    addCaptionButtonPosition = _ref$addCaptionButton2 === void 0 ? 'outside' : _ref$addCaptionButton2,
-    renderInsideCaption = _ref.renderInsideCaption;
-  var darkBackground = useDarkBackground();
-  var _useContentElementEdi = useContentElementEditorState(),
-    isSelected = _useContentElementEdi.isSelected,
-    isEditable = _useContentElementEdi.isEditable;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isEditingCaption = _useState2[0],
-    setIsEditingCaption = _useState2[1];
-  var _useI18n = useI18n({
-      locale: 'ui'
-    }),
-    t = _useI18n.t;
-  var theme = useTheme();
-  var captionAbove = theme.options.figureCaptionPosition === 'above';
-  caption = useMemo(function () {
-    return typeof caption === 'string' ? [{
-      type: 'paragraph',
-      children: [{
-        text: caption
-      }]
-    }] : caption;
-  }, [caption]);
+function Figure({
+  children,
+  variant,
+  caption,
+  onCaptionChange,
+  addCaptionButtonVisible = true,
+  addCaptionButtonPosition = 'outside',
+  renderInsideCaption
+}) {
+  const darkBackground = useDarkBackground();
+  const {
+    isSelected,
+    isEditable
+  } = useContentElementEditorState();
+  const [isEditingCaption, setIsEditingCaption] = useState(false);
+  const {
+    t
+  } = useI18n({
+    locale: 'ui'
+  });
+  const theme = useTheme();
+  const captionAbove = theme.options.figureCaptionPosition === 'above';
+  caption = useMemo(() => typeof caption === 'string' ? [{
+    type: 'paragraph',
+    children: [{
+      text: caption
+    }]
+  }] : caption, [caption]);
   if (!isBlankEditableTextValue(caption) || isEditable) {
     return /*#__PURE__*/React.createElement("figure", {
-      className: classNames(styles.root, _defineProperty({}, styles.invert, !darkBackground))
+      className: classNames(styles$1.root, {
+        [styles$1.invert]: !darkBackground
+      }),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 49,
+        columnNumber: 7
+      }
     }, !captionAbove && children, isBlankEditableTextValue(caption) && isSelected && !isEditingCaption && addCaptionButtonVisible && /*#__PURE__*/React.createElement(ActionButton, {
       position: addCaptionButtonPosition,
       icon: "pencil",
       text: t('pageflow_scrolled.inline_editing.add_caption'),
-      onClick: function onClick() {
-        return setIsEditingCaption(true);
+      onClick: () => setIsEditingCaption(true),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 53,
+        columnNumber: 10
       }
     }), (!isBlankEditableTextValue(caption) || isEditingCaption) && /*#__PURE__*/React.createElement("figcaption", {
-      className: classNames(variant && "scope-figureCaption-".concat(variant)),
-      onBlur: function onBlur() {
-        return setIsEditingCaption(false);
+      className: classNames(variant && `scope-figureCaption-${variant}`),
+      onBlur: () => setIsEditingCaption(false),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 59,
+        columnNumber: 10
       }
     }, renderInsideCaption === null || renderInsideCaption === void 0 ? void 0 : renderInsideCaption(), /*#__PURE__*/React.createElement(EditableText, {
       autoFocus: isEditingCaption,
@@ -485,14 +615,41 @@ function Figure(_ref) {
       onChange: onCaptionChange,
       onlyParagraphs: true,
       hyphens: "none",
-      placeholder: t('pageflow_scrolled.inline_editing.type_text')
+      placeholder: t('pageflow_scrolled.inline_editing.type_text'),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 62,
+        columnNumber: 12
+      }
     })), captionAbove && children);
   } else {
     return children;
   }
 }
 
-var styles$1 = {"wrapper":"ContentElementBox-module_wrapper__3wZgP","full":"ContentElementBox-module_full__AfWPr","positioned":"ContentElementBox-module_positioned__3R1dq"};
+var styles$2 = {"properties":"ContentElementBox-module_properties__1ljc9","wrapper":"ContentElementBox-module_wrapper__3wZgP","full":"ContentElementBox-module_full__AfWPr","positioned":"ContentElementBox-module_positioned__3R1dq"};
+
+function contentElementBoxProps(configuration, {
+  borderRadius
+} = {}) {
+  return {
+    className: styles$2.properties,
+    style: {
+      ...(borderRadius && borderRadius !== 'none' && {
+        '--content-element-box-border-radius': `var(--theme-content-element-box-border-radius-${borderRadius})`
+      }),
+      ...((configuration === null || configuration === void 0 ? void 0 : configuration.boxShadow) && {
+        '--content-element-box-shadow': `var(--theme-content-element-box-shadow-${configuration.boxShadow})`
+      }),
+      ...((configuration === null || configuration === void 0 ? void 0 : configuration.outlineColor) && {
+        '--content-element-box-outline-color': configuration.outlineColor
+      })
+    }
+  };
+}
+
+var _jsxFileName$6 = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/ContentElementBox.js";
 
 /**
  * Wrap content element that render a visible box in this component to
@@ -500,97 +657,148 @@ var styles$1 = {"wrapper":"ContentElementBox-module_wrapper__3wZgP","full":"Cont
  *
  * @param {Object} props
  * @param {string} props.children - Content of box.
- * @param {string} props.borderRadius - Border radius value from theme scale, or "none" to render no wrapper.
+ * @param {Object} [props.configuration] - Content element configuration. Used to read box shadow and outline styles.
+ * @param {string} [props.borderRadius] - Border radius value from theme scale, or "none" to render no wrapper.
  */
-function ContentElementBox(_ref) {
-  var children = _ref.children,
-    borderRadius = _ref.borderRadius,
-    positioned = _ref.positioned;
-  var _useContentElementAtt = useContentElementAttributes(),
-    position = _useContentElementAtt.position,
-    width = _useContentElementAtt.width;
-  if (position === 'backdrop' || borderRadius === 'none') {
+function ContentElementBox({
+  children,
+  configuration,
+  borderRadius,
+  positioned
+}) {
+  const {
+    position,
+    width
+  } = useContentElementAttributes();
+  const {
+    style
+  } = contentElementBoxProps(configuration, {
+    borderRadius
+  });
+  if (position === 'backdrop') {
+    return children;
+  }
+  if (borderRadius === 'none' && !Object.keys(style).length) {
     return children;
   }
-  var style = borderRadius ? {
-    '--content-element-box-border-radius': "var(--theme-content-element-box-border-radius-".concat(borderRadius, ")")
-  } : {};
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$1.wrapper, _defineProperty(_defineProperty({}, styles$1.full, width === widths.full), styles$1.positioned, positioned)),
-    style: style
+    className: classNames(styles$2.properties, styles$2.wrapper, {
+      [styles$2.full]: width === widths.full,
+      [styles$2.positioned]: positioned
+    }),
+    style: style,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$6,
+      lineNumber: 33,
+      columnNumber: 5
+    }
   }, children);
 }
 
+var _jsxFileName$7 = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/ContentElementFigure.js";
+
 /**
  * @param {Object} props
  * @param {Object} props.configuration - Configuration of the content element.
  * @param {string} props.children - Content of box.
  */
-function ContentElementFigure(_ref) {
-  var configuration = _ref.configuration,
-    children = _ref.children;
-  var updateConfiguration = useContentElementConfigurationUpdate();
-  var _useContentElementAtt = useContentElementAttributes(),
-    width = _useContentElementAtt.width,
-    position = _useContentElementAtt.position;
-  var _useContentElementEdi = useContentElementEditorState(),
-    isEditable = _useContentElementEdi.isEditable;
+function ContentElementFigure({
+  configuration,
+  children
+}) {
+  const updateConfiguration = useContentElementConfigurationUpdate();
+  const {
+    width,
+    position
+  } = useContentElementAttributes();
+  const {
+    isEditable
+  } = useContentElementEditorState();
   if (position === 'backdrop') {
     return children;
   }
   return /*#__PURE__*/React.createElement(Figure, {
     caption: configuration.caption,
     variant: configuration.captionVariant,
-    renderInsideCaption: function renderInsideCaption() {
-      return isEditable && /*#__PURE__*/React.createElement(HasCaptionTransientState, null);
-    },
-    onCaptionChange: function onCaptionChange(caption) {
-      return updateConfiguration({
-        caption: caption
-      });
-    },
-    addCaptionButtonPosition: width === widths.full ? 'outsideIndented' : 'outside'
+    renderInsideCaption: () => isEditable && /*#__PURE__*/React.createElement(HasCaptionTransientState, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$7,
+        lineNumber: 26,
+        columnNumber: 54
+      }
+    }),
+    onCaptionChange: caption => updateConfiguration({
+      caption
+    }),
+    addCaptionButtonPosition: width === widths.full ? 'outsideIndented' : 'outside',
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$7,
+      lineNumber: 24,
+      columnNumber: 5
+    }
   }, children);
 }
 function HasCaptionTransientState() {
-  var _useContentElementEdi2 = useContentElementEditorState(),
-    setTransientState = _useContentElementEdi2.setTransientState;
-  useEffect(function () {
+  const {
+    setTransientState
+  } = useContentElementEditorState();
+  useEffect(() => {
     setTransientState({
       hasCaption: true
     });
-    return function () {
-      return setTransientState({
-        hasCaption: false
-      });
-    };
+    return () => setTransientState({
+      hasCaption: false
+    });
   }, [setTransientState]);
   return null;
 }
 
-function MediaInteractionTracking(_ref) {
-  var playerState = _ref.playerState,
-    playerActions = _ref.playerActions,
-    idleDelay = _ref.idleDelay,
-    children = _ref.children;
-  var hideControlsTimeout = useRef();
-  var wasPlaying = usePrevious(playerState.isPlaying);
-  var focusWasInside = usePrevious(playerState.focusInsideControls);
-  var setHideControlsTimeout = useCallback(function () {
+function processImageModifiers(imageModifiers) {
+  const cropValue = getModifierValue(imageModifiers, 'crop');
+  const isCircleCrop = cropValue === 'circle';
+  return {
+    aspectRatio: isCircleCrop ? 'square' : cropValue,
+    rounded: isCircleCrop ? 'circle' : getModifierValue(imageModifiers, 'rounded')
+  };
+}
+function getModifierValue(imageModifiers, name) {
+  var _find;
+  return (_find = (imageModifiers || []).find(imageModifier => imageModifier.name === name)) === null || _find === void 0 ? void 0 : _find.value;
+}
+
+function useFileWithCropPosition(file, cropPosition) {
+  return file && {
+    ...file,
+    cropPosition
+  };
+}
+
+var _jsxFileName$8 = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/MediaInteractionTracking.js";
+function MediaInteractionTracking({
+  playerState,
+  playerActions,
+  idleDelay,
+  children
+}) {
+  const hideControlsTimeout = useRef();
+  const wasPlaying = usePrevious(playerState.isPlaying);
+  const focusWasInside = usePrevious(playerState.focusInsideControls);
+  const setHideControlsTimeout = useCallback(() => {
     clearTimeout(hideControlsTimeout.current);
     hideControlsTimeout.current = setTimeout(playerActions.userIdle, idleDelay);
   }, [playerActions.userIdle, idleDelay]);
-  useEffect(function () {
+  useEffect(() => {
     if (!wasPlaying && playerState.isPlaying || focusWasInside !== playerState.focusInsideControls) {
       setHideControlsTimeout();
     }
   }, [wasPlaying, playerState.isPlaying, setHideControlsTimeout, playerState.focusInsideControls, focusWasInside]);
-  useEffect(function () {
-    return function () {
-      return clearTimeout(hideControlsTimeout.current);
-    };
+  useEffect(() => {
+    return () => clearTimeout(hideControlsTimeout.current);
   }, []);
-  var handleInteraction = function handleInteraction() {
+  const handleInteraction = function () {
     playerActions.userInteraction();
     setHideControlsTimeout();
   };
@@ -598,29 +806,33 @@ function MediaInteractionTracking(_ref) {
     onClick: handleInteraction,
     onMouseMove: handleInteraction,
     onMouseEnter: playerActions.mouseEntered,
-    onMouseLeave: playerActions.mouseLeft
+    onMouseLeave: playerActions.mouseLeft,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$8,
+      lineNumber: 32,
+      columnNumber: 5
+    }
   }, children);
 }
 MediaInteractionTracking.defaultProps = {
   idleDelay: 2000
 };
 
-function RemotePeakData(_ref) {
-  var audioFile = _ref.audioFile,
-    children = _ref.children;
-  var peakDataUrl = audioFile === null || audioFile === void 0 ? void 0 : audioFile.urls.peakData;
-  var _useState = useState('pending'),
-    _useState2 = _slicedToArray(_useState, 2),
-    peakData = _useState2[0],
-    setPeakData = _useState2[1];
-  useEffect(function () {
+function RemotePeakData({
+  audioFile,
+  children
+}) {
+  const peakDataUrl = audioFile === null || audioFile === void 0 ? void 0 : audioFile.urls.peakData;
+  const [peakData, setPeakData] = useState('pending');
+  useEffect(() => {
     if (peakDataUrl) {
-      fetch(peakDataUrl).then(function (response) {
+      fetch(peakDataUrl).then(response => {
         if (!response.ok) {
-          throw new Error("HTTP error ".concat(response.status, " while loading peaks."));
+          throw new Error(`HTTP error ${response.status} while loading peaks.`);
         }
         return response.json();
-      }).then(function (peaks) {
+      }).then(peaks => {
         setPeakData(peaks.data);
       });
     } else {
@@ -634,16 +846,16 @@ function RemotePeakData(_ref) {
   }
 }
 
-var styles$2 = {"container":"Waveform-module_container__1Dxdv","clickMask":"Waveform-module_clickMask__3LYAT","menuBar":"Waveform-module_menuBar__342n-","menuBarInner":"Waveform-module_menuBarInner__3wjQs","timeDisplay":"Waveform-module_timeDisplay__1v4Tl","playControl":"Waveform-module_playControl__QWTsJ","waveWrapper":"Waveform-module_waveWrapper__3gamc"};
+const defaultRemainingWaveformColor = '#828282ed';
+const defaultRemainingWaveformColorInverted = 'rgba(0, 0, 0, 0.5)';
+const defaultWaveformCursorColor = '#fff';
+const defaultWaveformCursorColorInverted = '#888';
 
-var waveColor = '#828282ed';
-var waveColorInverted = 'rgba(0, 0, 0, 0.5)';
-var cursorColor = '#fff';
-var cursorColorInverted = '#888';
-var Wavesurfer = React.lazy(function () {
-  return import('./Wavesurfer-1cdc3925.js');
-});
-var waveformStyles = {
+var styles$3 = {"container":"Waveform-module_container__1Dxdv","clickMask":"Waveform-module_clickMask__3LYAT","menuBar":"Waveform-module_menuBar__342n-","menuBarInner":"Waveform-module_menuBarInner__3wjQs","timeDisplay":"Waveform-module_timeDisplay__1v4Tl","playControl":"Waveform-module_playControl__QWTsJ","invertPlayButton":"Waveform-module_invertPlayButton__kfCbL","waveWrapper":"Waveform-module_waveWrapper__3gamc"};
+
+var _jsxFileName$9 = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/PlayerControls/WaveformPlayerControls/Waveform.js";
+const Wavesurfer = React.lazy(() => import('./Wavesurfer-b753b838.js'));
+const waveformStyles = {
   waveformLines: {
     barWidth: 1,
     barGap: 2
@@ -655,171 +867,282 @@ var waveformStyles = {
   }
 };
 function Waveform(props) {
-  var _useState = useState(90),
-    _useState2 = _slicedToArray(_useState, 2),
-    height = _useState2[0],
-    setHeight = _useState2[1];
+  const [height, setHeight] = useState(90);
   if (props.mediaElementId) {
     return /*#__PURE__*/React.createElement(Suspense, {
-      fallback: /*#__PURE__*/React.createElement("div", null)
+      fallback: /*#__PURE__*/React.createElement("div", {
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$9,
+          lineNumber: 34,
+          columnNumber: 27
+        }
+      }),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$9,
+        lineNumber: 34,
+        columnNumber: 7
+      }
     }, /*#__PURE__*/React.createElement(Measure, {
       client: true,
-      onResize: function onResize(contentRect) {
-        return setHeight(contentRect.client.height);
+      onResize: contentRect => setHeight(contentRect.client.height),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$9,
+        lineNumber: 35,
+        columnNumber: 9
       }
-    }, function (_ref) {
-      var measureRef = _ref.measureRef;
-      return /*#__PURE__*/React.createElement("div", {
-        ref: measureRef,
-        className: styles$2.waveWrapper
-      }, /*#__PURE__*/React.createElement(RemotePeakData, {
-        audioFile: props.audioFile
-      }, function (peakData) {
-        return /*#__PURE__*/React.createElement(Wavesurfer, {
-          key: props.variant,
-          mediaElt: "#".concat(props.mediaElementId),
-          audioPeaks: peakData,
-          options: _objectSpread2(_objectSpread2({}, waveformStyles[props.variant]), {}, {
-            normalize: true,
-            removeMediaElementOnDestroy: false,
-            hideScrollbar: true,
-            progressColor: props.waveformColor || props.mainColor,
-            waveColor: props.inverted ? waveColorInverted : waveColor,
-            cursorColor: props.inverted ? cursorColorInverted : cursorColor,
-            height: height
-          })
-        });
-      }));
-    }));
+    }, ({
+      measureRef
+    }) => /*#__PURE__*/React.createElement("div", {
+      ref: measureRef,
+      className: styles$3.waveWrapper,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$9,
+        lineNumber: 37,
+        columnNumber: 13
+      }
+    }, /*#__PURE__*/React.createElement(RemotePeakData, {
+      audioFile: props.audioFile,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$9,
+        lineNumber: 38,
+        columnNumber: 15
+      }
+    }, peakData => /*#__PURE__*/React.createElement(Wavesurfer, {
+      key: props.variant,
+      mediaElt: `#${props.mediaElementId}`,
+      audioPeaks: peakData,
+      options: {
+        ...waveformStyles[props.variant],
+        normalize: true,
+        removeMediaElementOnDestroy: false,
+        hideScrollbar: true,
+        progressColor: props.progressWaveformColor || props.mainColor,
+        waveColor: props.remainingWaveformColor || (props.inverted ? defaultRemainingWaveformColorInverted : defaultRemainingWaveformColor),
+        cursorColor: props.waveformCursorColor || (props.inverted ? defaultWaveformCursorColorInverted : defaultWaveformCursorColor),
+        height
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$9,
+        lineNumber: 40,
+        columnNumber: 19
+      }
+    })))));
   } else {
     return null;
   }
 }
 
-var styles$3 = {"timeDisplay":"TimeDisplay-module_timeDisplay__2UwqM","time":"TimeDisplay-module_time__li1ZU"};
+var styles$4 = {"timeDisplay":"TimeDisplay-module_timeDisplay__2UwqM","time":"TimeDisplay-module_time__li1ZU"};
 
-var unknownTimePlaceholder = '-:--';
+const unknownTimePlaceholder = '-:--';
 function formatTime(value) {
   if (isNaN(value)) {
     return unknownTimePlaceholder;
   }
-  var seconds = Math.floor(value) % 60;
-  var minutes = Math.floor(value / 60) % 60;
-  var hours = Math.floor(value / 60 / 60);
+  const seconds = Math.floor(value) % 60;
+  const minutes = Math.floor(value / 60) % 60;
+  const hours = Math.floor(value / 60 / 60);
   if (hours > 0) {
-    return "".concat(hours, ":").concat(pad(minutes), ":").concat(pad(seconds));
+    return `${hours}:${pad(minutes)}:${pad(seconds)}`;
   } else {
-    return "".concat(minutes, ":").concat(pad(seconds));
+    return `${minutes}:${pad(seconds)}`;
   }
 }
 function pad(value) {
   return value < 10 ? '0' + value : value;
 }
 
+var _jsxFileName$a = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/PlayerControls/TimeDisplay.js";
 function TimeDisplay(props) {
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": 'time-display',
-    className: styles$3.timeDisplay
+    className: styles$4.timeDisplay,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$a,
+      lineNumber: 8,
+      columnNumber: 5
+    }
   }, /*#__PURE__*/React.createElement("span", {
-    className: styles$3.time
+    className: styles$4.time,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$a,
+      lineNumber: 9,
+      columnNumber: 7
+    }
   }, formatTime(props.currentTime)), "/", /*#__PURE__*/React.createElement("span", {
-    className: styles$3.time
+    className: styles$4.time,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$a,
+      lineNumber: 11,
+      columnNumber: 7
+    }
   }, formatTime(props.duration)));
 }
 
-var styles$4 = {"wrapper":"MenuBarButton-module_wrapper__2lFoI","button":"MenuBarButton-module_button__2sY0F ControlBar-module_button___4aXE utils-module_unstyledButton__3rgne","subMenuItemAnnotation":"MenuBarButton-module_subMenuItemAnnotation__32Quc","subMenu":"MenuBarButton-module_subMenu__f-E-X","subMenuExpanded":"MenuBarButton-module_subMenuExpanded__2UvkJ","subMenuItem":"MenuBarButton-module_subMenuItem__1pyn_","subMenuItemButton":"MenuBarButton-module_subMenuItemButton__2QnUz utils-module_unstyledButton__3rgne"};
+var styles$5 = {"wrapper":"MenuBarButton-module_wrapper__2lFoI","button":"MenuBarButton-module_button__2sY0F ControlBar-module_button___4aXE utils-module_unstyledButton__3rgne","subMenuItemAnnotation":"MenuBarButton-module_subMenuItemAnnotation__32Quc","subMenu":"MenuBarButton-module_subMenu__f-E-X","subMenuExpanded":"MenuBarButton-module_subMenuExpanded__2UvkJ","subMenuItem":"MenuBarButton-module_subMenuItem__1pyn_","subMenuItemButton":"MenuBarButton-module_subMenuItemButton__2QnUz utils-module_unstyledButton__3rgne"};
 
+var _jsxFileName$b = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/PlayerControls/MenuBarButton.js";
 function MenuBarButton(props) {
-  var subMenuItems = props.subMenuItems,
-    onClick = props.onClick;
-  var _useState = useState(props.subMenuExpanded),
-    _useState2 = _slicedToArray(_useState, 2),
-    subMenuExpanded = _useState2[0],
-    setSubMenuExpanded = _useState2[1];
-  var closeMenuTimeout = useRef();
-  var openMenu = useCallback(function () {
+  const {
+    subMenuItems,
+    onClick
+  } = props;
+  const [subMenuExpanded, setSubMenuExpanded] = useState(props.subMenuExpanded);
+  const closeMenuTimeout = useRef();
+  const openMenu = useCallback(() => {
     if (subMenuItems.length > 0) {
       setSubMenuExpanded(true);
     }
   }, [subMenuItems.length]);
-  var closeMenu = useCallback(function () {
+  const closeMenu = useCallback(() => {
     setSubMenuExpanded(false);
   }, []);
-  var onButtonClick = useCallback(function (event) {
+  const onButtonClick = useCallback(event => {
     openMenu();
     if (onClick) {
       onClick();
     }
   }, [onClick, openMenu]);
-  var onFocus = useCallback(function () {
+  const onFocus = useCallback(() => {
     clearTimeout(closeMenuTimeout.current);
   }, []);
-  var onBlur = useCallback(function () {
+  const onBlur = useCallback(() => {
     clearTimeout(closeMenuTimeout.current);
-    closeMenuTimeout.current = setTimeout(function () {
+    closeMenuTimeout.current = setTimeout(() => {
       setSubMenuExpanded(false);
     }, 100);
   }, []);
-  var onKeyDown = useCallback(function (event) {
+  const onKeyDown = useCallback(event => {
     if (event.key === 'Escape') {
       setSubMenuExpanded(false);
     }
   }, []);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(_defineProperty({}, styles$4.subMenuExpanded, subMenuExpanded), styles$4.wrapper),
+    className: classNames({
+      [styles$5.subMenuExpanded]: subMenuExpanded
+    }, styles$5.wrapper),
     onMouseEnter: openMenu,
     onMouseLeave: closeMenu,
     onFocus: onFocus,
     onBlur: onBlur,
-    onKeyDown: onKeyDown
+    onKeyDown: onKeyDown,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$b,
+      lineNumber: 53,
+      columnNumber: 5
+    }
   }, /*#__PURE__*/React.createElement("button", {
-    className: styles$4.button,
+    className: styles$5.button,
     title: props.title,
-    onClick: onButtonClick
+    onClick: onButtonClick,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$b,
+      lineNumber: 59,
+      columnNumber: 7
+    }
   }, /*#__PURE__*/React.createElement(ThemeIcon, {
-    name: props.icon
+    name: props.icon,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$b,
+      lineNumber: 62,
+      columnNumber: 9
+    }
   })), renderSubMenu(props, closeMenu));
 }
+MenuBarButton.propTypes = {
+  title: PropTypes.string,
+  icon: PropTypes.string,
+  subMenuItems: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    annotation: PropTypes.string,
+    active: PropTypes.bool
+  })),
+  onClick: PropTypes.func,
+  onSubMenuItemClick: PropTypes.func
+};
 MenuBarButton.defaultProps = {
   subMenuItems: []
 };
 function renderSubMenu(props, closeMenu) {
   if (props.subMenuItems.length > 0) {
     return /*#__PURE__*/React.createElement("ul", {
-      className: styles$4.subMenu,
-      role: "menu"
+      className: styles$5.subMenu,
+      role: "menu",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$b,
+        lineNumber: 94,
+        columnNumber: 7
+      }
     }, renderSubMenuItems(props, closeMenu));
   }
 }
 function renderSubMenuItems(props, closeMenu) {
-  return props.subMenuItems.map(function (item) {
+  return props.subMenuItems.map(item => {
     return /*#__PURE__*/React.createElement("li", {
-      className: styles$4.subMenuItem,
-      key: item.value
+      className: styles$5.subMenuItem,
+      key: item.value,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$b,
+        lineNumber: 104,
+        columnNumber: 7
+      }
     }, /*#__PURE__*/React.createElement("button", {
-      className: styles$4.subMenuItemButton,
+      className: styles$5.subMenuItemButton,
       role: "menuitemradio",
       "aria-checked": item.active,
-      onClick: subMenuItemClickHandler(props, item.value, closeMenu)
+      onClick: subMenuItemClickHandler(props, item.value, closeMenu),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$b,
+        lineNumber: 105,
+        columnNumber: 9
+      }
     }, renderSubMenuItemIcon(item), item.label, renderSubMenuItemAnnotation(props, item)));
   });
 }
 function renderSubMenuItemIcon(item) {
   if (item.active) {
     return /*#__PURE__*/React.createElement(ThemeIcon, {
-      name: "checked"
+      name: "checked",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$b,
+        lineNumber: 122,
+        columnNumber: 7
+      }
     });
   }
 }
 function renderSubMenuItemAnnotation(props, item) {
   if (item.annotation) {
     return /*#__PURE__*/React.createElement("span", {
-      className: styles$4.subMenuItemAnnotation
+      className: styles$5.subMenuItemAnnotation,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$b,
+        lineNumber: 130,
+        columnNumber: 7
+      }
     }, item.annotation);
   }
 }
 function subMenuItemClickHandler(props, value, closeMenu) {
-  return function (event) {
+  return event => {
     event.preventDefault();
     closeMenu();
     if (props.onSubMenuItemClick) {
@@ -828,9 +1151,11 @@ function subMenuItemClickHandler(props, value, closeMenu) {
   };
 }
 
+var _jsxFileName$c = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/PlayerControls/TextTracksMenu.js";
 function TextTracksMenu(props) {
-  var _useI18n = useI18n(),
-    t = _useI18n.t;
+  const {
+    t
+  } = useI18n();
   if (props.items.length < 2) {
     return null;
   }
@@ -838,149 +1163,336 @@ function TextTracksMenu(props) {
     title: t('pageflow_scrolled.public.player_controls.text_tracks'),
     icon: "textTracks",
     subMenuItems: props.items,
-    onSubMenuItemClick: props.onItemClick
+    onSubMenuItemClick: props.onItemClick,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$c,
+      lineNumber: 15,
+      columnNumber: 5
+    }
   });
 }
+TextTracksMenu.propTypes = {
+  items: MenuBarButton.propTypes.subMenuItems,
+  onMenuItemClick: PropTypes.func
+};
 TextTracksMenu.defaultProps = {
   items: []
 };
 
-var styles$5 = {"container":"ControlBar-module_container__1GH64","sticky":"ControlBar-module_sticky__6qVoI","lightBackground":"ControlBar-module_lightBackground__3-tGf","darkBackground":"ControlBar-module_darkBackground__31Wv7","controlBarContainer":"ControlBar-module_controlBarContainer__1cxRO","inset":"ControlBar-module_inset__JvBh9","controlBarInner":"ControlBar-module_controlBarInner__39fE9","fadedOut":"ControlBar-module_fadedOut__2sP_3","button":"ControlBar-module_button___4aXE utils-module_unstyledButton__3rgne","playControl":"ControlBar-module_playControl__Vg5et ControlBar-module_button___4aXE utils-module_unstyledButton__3rgne"};
+var styles$6 = {"container":"ControlBar-module_container__1GH64","sticky":"ControlBar-module_sticky__6qVoI","lightBackground":"ControlBar-module_lightBackground__3-tGf","darkBackground":"ControlBar-module_darkBackground__31Wv7","controlBarContainer":"ControlBar-module_controlBarContainer__1cxRO","inset":"ControlBar-module_inset__JvBh9","controlBarInner":"ControlBar-module_controlBarInner__39fE9","fadedOut":"ControlBar-module_fadedOut__2sP_3","button":"ControlBar-module_button___4aXE utils-module_unstyledButton__3rgne","playControl":"ControlBar-module_playControl__Vg5et ControlBar-module_button___4aXE utils-module_unstyledButton__3rgne"};
 
+var _jsxFileName$d = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/PlayerControls/PlayPauseButton.js";
 function PlayPauseButton(props) {
-  var _useI18n = useI18n(),
-    t = _useI18n.t;
+  const {
+    t
+  } = useI18n();
   return /*#__PURE__*/React.createElement("button", {
-    className: styles$5.playControl,
+    className: styles$6.playControl,
     "aria-label": t(props.isPlaying ? 'pause' : 'play', {
       scope: 'pageflow_scrolled.public.player_controls'
     }),
-    onClick: function onClick() {
-      return props.isPlaying ? props.pause({
-        via: 'playPauseButton'
-      }) : props.play({
-        via: 'playPauseButton'
-      });
+    onClick: () => props.isPlaying ? props.pause({
+      via: 'playPauseButton'
+    }) : props.play({
+      via: 'playPauseButton'
+    }),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$d,
+      lineNumber: 10,
+      columnNumber: 5
     }
   }, pausePlayIcon(props));
 }
 function pausePlayIcon(props) {
   if (props.isPlaying) {
     return /*#__PURE__*/React.createElement(ThemeIcon, {
-      name: "pause"
+      name: "pause",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$d,
+        lineNumber: 23,
+        columnNumber: 12
+      }
     });
   } else {
     return /*#__PURE__*/React.createElement(ThemeIcon, {
-      name: "play"
+      name: "play",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$d,
+        lineNumber: 25,
+        columnNumber: 12
+      }
     });
   }
 }
 
+var _jsxFileName$e = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/PlayerControls/WaveformPlayerControls/index.js";
 function WaveformPlayerControls(props) {
   var _theme$options$proper, _theme$options$proper2, _theme$options$colors;
-  var darkBackground = useDarkBackground();
-  var theme = useTheme();
+  const darkBackground = useDarkBackground();
+  const theme = useTheme();
   return /*#__PURE__*/React.createElement("div", {
     onFocus: props.onFocus,
     onBlur: props.onBlur,
     onMouseEnter: props.onMouseEnter,
     onMouseLeave: props.onMouseLeave,
     "data-testid": "waveform-controls",
-    className: classNames(styles$2.container)
+    className: classNames(styles$3.container),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$e,
+      lineNumber: 20,
+      columnNumber: 5
+    }
   }, props.children, /*#__PURE__*/React.createElement("div", {
-    className: styles$2.clickMask,
-    onClick: props.onPlayerClick
+    className: styles$3.clickMask,
+    onClick: props.onPlayerClick,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$e,
+      lineNumber: 27,
+      columnNumber: 7
+    }
   }), /*#__PURE__*/React.createElement(Waveform, {
     audioFile: props.file,
     isPlaying: props.isPlaying,
     inverted: !darkBackground,
     variant: props.variant,
-    waveformColor: props.waveformColor,
+    progressWaveformColor: props.waveformColor,
+    remainingWaveformColor: props.remainingWaveformColor,
+    waveformCursorColor: props.waveformCursorColor,
     mainColor: ((_theme$options$proper = theme.options.properties) === null || _theme$options$proper === void 0 ? void 0 : (_theme$options$proper2 = _theme$options$proper.root) === null || _theme$options$proper2 === void 0 ? void 0 : _theme$options$proper2.accentColor) || ((_theme$options$colors = theme.options.colors) === null || _theme$options$colors === void 0 ? void 0 : _theme$options$colors.accent),
     play: props.play,
     pause: props.pause,
-    mediaElementId: props.mediaElementId
+    mediaElementId: props.mediaElementId,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$e,
+      lineNumber: 28,
+      columnNumber: 7
+    }
   }), /*#__PURE__*/React.createElement("div", {
-    className: styles$2.playControl
+    className: classNames(styles$3.playControl, {
+      [styles$3.invertPlayButton]: props.invertPlayButton
+    }),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$e,
+      lineNumber: 40,
+      columnNumber: 7
+    }
   }, /*#__PURE__*/React.createElement(PlayPauseButton, {
     isPlaying: props.isPlaying,
     play: props.play,
-    pause: props.pause
+    pause: props.pause,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$e,
+      lineNumber: 42,
+      columnNumber: 9
+    }
   })), /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$2.menuBar, darkBackground ? styles$5.darkBackground : styles$5.lightBackground, _defineProperty({}, styles$5.inset, !props.standAlone))
+    className: classNames(styles$3.menuBar, darkBackground ? styles$6.darkBackground : styles$6.lightBackground, {
+      [styles$6.inset]: !props.standAlone
+    }),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$e,
+      lineNumber: 46,
+      columnNumber: 7
+    }
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$2.menuBarInner
+    className: styles$3.menuBarInner,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$e,
+      lineNumber: 49,
+      columnNumber: 9
+    }
   }, /*#__PURE__*/React.createElement(TimeDisplay, {
     currentTime: props.currentTime,
-    duration: props.duration
+    duration: props.duration,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$e,
+      lineNumber: 50,
+      columnNumber: 11
+    }
   }), /*#__PURE__*/React.createElement(TextTracksMenu, {
     items: props.textTracksMenuItems,
-    onItemClick: props.onTextTracksMenuItemClick
+    onItemClick: props.onTextTracksMenuItemClick,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$e,
+      lineNumber: 52,
+      columnNumber: 11
+    }
   })), /*#__PURE__*/React.createElement(InlineFileRights, {
     items: props.inlineFileRightsItems,
     context: "playerControls",
     playerControlsFadedOut: false,
-    playerControlsStandAlone: props.standAlone
+    playerControlsStandAlone: props.standAlone,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$e,
+      lineNumber: 55,
+      columnNumber: 9
+    }
   })));
 }
 
-var styles$6 = {"container":"BigPlayPauseButton-module_container__19sKj","fadeOutDelay":"BigPlayPauseButton-module_fadeOutDelay__yoaW6","pointerCursor":"BigPlayPauseButton-module_pointerCursor__2A55P","hideCursor":"BigPlayPauseButton-module_hideCursor__2Hyys","button":"BigPlayPauseButton-module_button__10g4Q utils-module_unstyledButton__3rgne","hidden":"BigPlayPauseButton-module_hidden__1KUzr","animated":"BigPlayPauseButton-module_animated__1MMNq","fadeOut":"BigPlayPauseButton-module_fadeOut__2vcA_","fadeIn":"BigPlayPauseButton-module_fadeIn__1Ge1-"};
+var styles$7 = {"container":"BigPlayPauseButton-module_container__19sKj","fadeOutDelay":"BigPlayPauseButton-module_fadeOutDelay__yoaW6","pointerCursor":"BigPlayPauseButton-module_pointerCursor__2A55P","hideCursor":"BigPlayPauseButton-module_hideCursor__2Hyys","button":"BigPlayPauseButton-module_button__10g4Q utils-module_unstyledButton__3rgne","hidden":"BigPlayPauseButton-module_hidden__1KUzr","animated":"BigPlayPauseButton-module_animated__1MMNq","fadeOut":"BigPlayPauseButton-module_fadeOut__2vcA_","fadeIn":"BigPlayPauseButton-module_fadeIn__1Ge1-"};
+
+function useFocusHandoff() {
+  const ref1 = useRef();
+  const ref2 = useRef();
+  return [{
+    sourceRef: ref1,
+    targetRef: ref2,
+    name: 'A'
+  }, {
+    sourceRef: ref2,
+    targetRef: ref1,
+    name: 'B'
+  }];
+}
+function usePassFocus(inert, {
+  name,
+  sourceRef,
+  targetRef
+}) {
+  const hasFocusRef = useRef();
+  const passFocusRef = useRef();
+  const setSourceRef = useCallback(source => {
+    if (sourceRef.current) {
+      sourceRef.current.removeEventListener('focusin', updateHasFocus);
+      sourceRef.current.removeEventListener('focusout', updateHasFocus);
+    }
+    sourceRef.current = source;
+    if (sourceRef.current) {
+      sourceRef.current.addEventListener('focusin', updateHasFocus);
+      sourceRef.current.addEventListener('focusout', updateHasFocus);
+    }
+    function updateHasFocus(event) {
+      hasFocusRef.current = event.type === 'focusin';
+    }
+  }, [sourceRef]);
+  if (inert && hasFocusRef.current && !passFocusRef.current) {
+    passFocusRef.current = true;
+  }
+  useEffect(() => {
+    if (inert && passFocusRef.current && targetRef.current) {
+      passFocusRef.current = false;
+      if (targetRef.current.tagName === 'BUTTON') {
+        targetRef.current.focus();
+      } else {
+        targetRef.current.querySelector('button').focus();
+      }
+    }
+  }, [inert, targetRef, name]);
+  return setSourceRef;
+}
 
+var _jsxFileName$f = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/PlayerControls/ClassicPlayerControls/BigPlayPauseButton.js";
 function BigPlayPauseButton(props) {
-  var c = classNames(styles$6.button, _defineProperty(_defineProperty(_defineProperty({}, styles$6.hidden, props.hidden || props.lastControlledVia === 'playPauseButton'), styles$6.fadeIn, props.unplayed), styles$6.animated, !props.unplayed));
+  const {
+    t
+  } = useI18n();
+  const c = classNames(styles$7.button, {
+    [styles$7.hidden]: props.hidden || props.lastControlledVia === 'playPauseButton',
+    [styles$7.fadeIn]: props.unplayed,
+    [styles$7.animated]: !props.unplayed
+  });
+  const inert = props.hidden || !props.unplayed;
+  const ref = usePassFocus(inert, props.focusHandoff);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$6.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$6.hideCursor, props.hideCursor), styles$6.hidden, props.fadedOut), styles$6.fadeOutDelay, props.isPlaying), styles$6.pointerCursor, !!props.onClick)),
-    onClick: props.onClick
-  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles$7.container, {
+      [styles$7.hideCursor]: props.hideCursor,
+      [styles$7.hidden]: props.fadedOut,
+      [styles$7.fadeOutDelay]: props.isPlaying,
+      [styles$7.pointerCursor]: !!props.onClick
+    }),
+    onClick: props.onClick,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$f,
+      lineNumber: 23,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("button", {
     key: props.isPlaying,
-    className: c
+    ref: ref,
+    className: c,
+    "aria-label": t('pageflow_scrolled.public.player_controls.play'),
+    inert: inert ? 'true' : undefined,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$f,
+      lineNumber: 29,
+      columnNumber: 7
+    }
   }, pausePlayIcon$1(props)));
 }
 function pausePlayIcon$1(props) {
   if (props.unplayed || props.isPlaying) {
     return /*#__PURE__*/React.createElement(ThemeIcon, {
-      name: "play"
+      name: "play",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$f,
+        lineNumber: 42,
+        columnNumber: 12
+      }
     });
   } else {
     return /*#__PURE__*/React.createElement(ThemeIcon, {
-      name: "pause"
+      name: "pause",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$f,
+        lineNumber: 45,
+        columnNumber: 12
+      }
     });
   }
 }
 
-var styles$7 = {"container":"ProgressIndicators-module_container__1QiQJ","wrapper":"ProgressIndicators-module_wrapper__2PCVv","draggable":"ProgressIndicators-module_draggable__1iAE8","bars":"ProgressIndicators-module_bars__2-ddd","progressBar":"ProgressIndicators-module_progressBar__2PYn-","background":"ProgressIndicators-module_background__-x5f_ ProgressIndicators-module_progressBar__2PYn-","loadingProgressBar":"ProgressIndicators-module_loadingProgressBar__YD2GH ProgressIndicators-module_progressBar__2PYn-","playProgressBar":"ProgressIndicators-module_playProgressBar__3mCSX ProgressIndicators-module_progressBar__2PYn-","sliderHandle":"ProgressIndicators-module_sliderHandle__3ArIf","dragging":"ProgressIndicators-module_dragging__3yY3t"};
-
-function ProgressIndicators(_ref) {
-  var currentTime = _ref.currentTime,
-    duration = _ref.duration,
-    bufferedEnd = _ref.bufferedEnd,
-    scrubTo = _ref.scrubTo,
-    seekTo = _ref.seekTo;
-  var _useI18n = useI18n(),
-    t = _useI18n.t;
-  var _useState = useState(),
-    _useState2 = _slicedToArray(_useState, 2),
-    dragging = _useState2[0],
-    setDragging = _useState2[1];
-  var progressBarsContainerWidth = useRef();
-  var positionToTime = useCallback(function (x) {
+var styles$8 = {"container":"ProgressIndicators-module_container__1QiQJ","wrapper":"ProgressIndicators-module_wrapper__2PCVv","draggable":"ProgressIndicators-module_draggable__1iAE8","bars":"ProgressIndicators-module_bars__2-ddd","progressBar":"ProgressIndicators-module_progressBar__2PYn-","background":"ProgressIndicators-module_background__-x5f_ ProgressIndicators-module_progressBar__2PYn-","loadingProgressBar":"ProgressIndicators-module_loadingProgressBar__YD2GH ProgressIndicators-module_progressBar__2PYn-","playProgressBar":"ProgressIndicators-module_playProgressBar__3mCSX ProgressIndicators-module_progressBar__2PYn-","sliderHandle":"ProgressIndicators-module_sliderHandle__3ArIf","dragging":"ProgressIndicators-module_dragging__3yY3t"};
+
+var _jsxFileName$g = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/PlayerControls/ClassicPlayerControls/ProgressIndicators.js";
+function ProgressIndicators({
+  currentTime,
+  duration,
+  bufferedEnd,
+  scrubTo,
+  seekTo
+}) {
+  const {
+    t
+  } = useI18n();
+  const [dragging, setDragging] = useState();
+  const progressBarsContainerWidth = useRef();
+  const positionToTime = useCallback(x => {
     if (duration && progressBarsContainerWidth.current) {
-      var fraction = Math.max(0, Math.min(1, x / progressBarsContainerWidth.current));
+      const fraction = Math.max(0, Math.min(1, x / progressBarsContainerWidth.current));
       return fraction * duration;
     } else {
       return 0;
     }
   }, [duration]);
-  var handleStop = useCallback(function (mouseEvent, dragEvent) {
+  const handleStop = useCallback((mouseEvent, dragEvent) => {
     setDragging(false);
     seekTo(positionToTime(dragEvent.x));
   }, [seekTo, positionToTime]);
-  var handleDrag = useCallback(function (mouseEvent, dragEvent) {
+  const handleDrag = useCallback((mouseEvent, dragEvent) => {
     setDragging(true);
     scrubTo(positionToTime(dragEvent.x));
   }, [scrubTo, positionToTime]);
-  var handleKeyDown = useCallback(function (event) {
-    var destination;
+  const handleKeyDown = useCallback(event => {
+    let destination;
     if (event.key === 'ArrowLeft') {
       destination = Math.max(0, currentTime - 1);
     } else if (event.key === 'ArrowRight') {
@@ -988,64 +1500,125 @@ function ProgressIndicators(_ref) {
     }
     seekTo(destination);
   }, [seekTo, currentTime, duration]);
-  var loadProgress = duration > 0 ? Math.min(1, bufferedEnd / duration) : 0;
-  var playProgress = duration > 0 ? Math.min(1, currentTime / duration) : 0;
+  const loadProgress = duration > 0 ? Math.min(1, bufferedEnd / duration) : 0;
+  const playProgress = duration > 0 ? Math.min(1, currentTime / duration) : 0;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$7.container, _defineProperty({}, styles$7.dragging, dragging)),
+    className: classNames(styles$8.container, {
+      [styles$8.dragging]: dragging
+    }),
     "aria-label": t('pageflow_scrolled.public.player_controls.progress', {
       currentTime: formatTime(currentTime),
       duration: formatTime(duration)
     }),
     onKeyDown: handleKeyDown,
-    tabIndex: "0"
+    tabIndex: "0",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$g,
+      lineNumber: 52,
+      columnNumber: 5
+    }
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$7.wrapper
+    className: styles$8.wrapper,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$g,
+      lineNumber: 59,
+      columnNumber: 7
+    }
   }, /*#__PURE__*/React.createElement(Measure, {
     client: true,
-    onResize: function onResize(contentRect) {
-      return progressBarsContainerWidth.current = contentRect.client.width;
-    }
-  }, function (_ref2) {
-    var measureRef = _ref2.measureRef;
-    return /*#__PURE__*/React.createElement(DraggableCore, {
-      onStart: handleDrag,
-      onDrag: handleDrag,
-      onStop: handleStop
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classNames(styles$7.draggable)
-    }, /*#__PURE__*/React.createElement("div", {
-      ref: measureRef,
-      className: styles$7.bars
-    }, /*#__PURE__*/React.createElement("div", {
-      className: styles$7.background
-    }), /*#__PURE__*/React.createElement("div", {
-      className: styles$7.loadingProgressBar,
-      style: {
-        width: toPercent(loadProgress)
-      },
-      "data-testid": "loading-progress-bar"
-    }), /*#__PURE__*/React.createElement("div", {
-      className: styles$7.playProgressBar,
-      style: {
-        width: toPercent(playProgress)
-      },
-      "data-testid": "play-progress-bar"
-    }), /*#__PURE__*/React.createElement("div", {
-      className: styles$7.sliderHandle,
-      style: {
-        left: toPercent(playProgress)
-      },
-      "data-testid": "slider-handle"
-    }))));
-  })));
+    onResize: contentRect => progressBarsContainerWidth.current = contentRect.client.width,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$g,
+      lineNumber: 60,
+      columnNumber: 9
+    }
+  }, ({
+    measureRef
+  }) => /*#__PURE__*/React.createElement(DraggableCore, {
+    onStart: handleDrag,
+    onDrag: handleDrag,
+    onStop: handleStop,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$g,
+      lineNumber: 63,
+      columnNumber: 13
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles$8.draggable),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$g,
+      lineNumber: 66,
+      columnNumber: 15
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: measureRef,
+    className: styles$8.bars,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$g,
+      lineNumber: 67,
+      columnNumber: 17
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$8.background,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$g,
+      lineNumber: 68,
+      columnNumber: 19
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles$8.loadingProgressBar,
+    style: {
+      width: toPercent(loadProgress)
+    },
+    "data-testid": "loading-progress-bar",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$g,
+      lineNumber: 69,
+      columnNumber: 19
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles$8.playProgressBar,
+    style: {
+      width: toPercent(playProgress)
+    },
+    "data-testid": "play-progress-bar",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$g,
+      lineNumber: 72,
+      columnNumber: 19
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles$8.sliderHandle,
+    style: {
+      left: toPercent(playProgress)
+    },
+    "data-testid": "slider-handle",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$g,
+      lineNumber: 75,
+      columnNumber: 19
+    }
+  })))))));
 }
 function toPercent(value) {
   return value > 0 ? value * 100 + '%' : 0;
 }
 
+var _jsxFileName$h = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/PlayerControls/ClassicPlayerControls/QualityMenu.js";
 function QualityMenu(props) {
-  var _useI18n = useI18n(),
-    t = _useI18n.t;
+  const {
+    t
+  } = useI18n();
   if (props.items.length < 2) {
     return null;
   }
@@ -1055,97 +1628,215 @@ function QualityMenu(props) {
     subMenuItems: props.items,
     subMenuExpanded: props.subMenuExpanded,
     onSubMenuItemClick: props.onItemClick,
-    x: true
+    x: true,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$h,
+      lineNumber: 15,
+      columnNumber: 5
+    }
   });
 }
+QualityMenu.propTypes = {
+  items: MenuBarButton.propTypes.subMenuItems,
+  onMenuItemClick: PropTypes.func
+};
 QualityMenu.defaultProps = {
   items: []
 };
 
+var _jsxFileName$i = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/PlayerControls/ClassicPlayerControls/index.js";
 function ClassicPlayerControls(props) {
-  var darkBackground = useDarkBackground();
-  var fadedOut = !props.standAlone && props.unplayed || props.isPlaying && props.inactive || props.fadedOut;
+  const darkBackground = useDarkBackground();
+  const [bigPlayButtonFocusHandoff, controlBarFocusHandoff] = useFocusHandoff();
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$5.container, _defineProperty({}, styles$5.sticky, props.sticky))
+    className: classNames(styles$6.container, {
+      [styles$6.sticky]: props.sticky
+    }),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$i,
+      lineNumber: 21,
+      columnNumber: 5
+    }
   }, props.children, !props.standAlone && /*#__PURE__*/React.createElement(BigPlayPauseButton, {
+    focusHandoff: bigPlayButtonFocusHandoff,
     unplayed: props.unplayed,
     isPlaying: props.isPlaying,
     lastControlledVia: props.lastControlledVia,
     hidden: props.hideBigPlayButton,
     fadedOut: props.fadedOut,
     hideCursor: props.isPlaying && props.inactive,
-    onClick: props.onPlayerClick
-  }), !props.hideControlBar && renderControlBar(props, darkBackground, fadedOut));
+    onClick: props.onPlayerClick,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$i,
+      lineNumber: 25,
+      columnNumber: 8
+    }
+  }), !props.hideControlBar && /*#__PURE__*/React.createElement(ControlBar, Object.assign({}, props, {
+    darkBackground: darkBackground,
+    focusHandoff: controlBarFocusHandoff,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$i,
+      lineNumber: 34,
+      columnNumber: 8
+    }
+  })));
 }
-function renderControlBar(props, darkBackground, fadedOut) {
+function ControlBar({
+  darkBackground,
+  focusHandoff,
+  ...props
+}) {
+  const hidden = !props.standAlone && props.unplayed || props.fadedOut;
+  const inactive = props.isPlaying && props.inactive;
+  const fadedOut = hidden || inactive;
+  const focusHandoffRef = usePassFocus(hidden, focusHandoff);
   return /*#__PURE__*/React.createElement("div", {
     onFocus: props.onFocus,
     onBlur: props.onBlur,
     onMouseEnter: props.onMouseEnter,
     onMouseLeave: props.onMouseLeave,
-    className: classNames(styles$5.controlBarContainer, darkBackground ? styles$5.darkBackground : styles$5.lightBackground, _defineProperty(_defineProperty({}, styles$5.inset, !props.standAlone), styles$5.fadedOut, fadedOut))
+    className: classNames(styles$6.controlBarContainer, darkBackground ? styles$6.darkBackground : styles$6.lightBackground, {
+      [styles$6.inset]: !props.standAlone,
+      [styles$6.fadedOut]: fadedOut
+    }),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$i,
+      lineNumber: 49,
+      columnNumber: 5
+    }
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$5.controlBarInner
+    ref: focusHandoffRef,
+    inert: hidden ? 'true' : undefined,
+    className: styles$6.controlBarInner,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$i,
+      lineNumber: 59,
+      columnNumber: 7
+    }
   }, /*#__PURE__*/React.createElement(PlayPauseButton, {
     isPlaying: props.isPlaying,
     play: props.play,
-    pause: props.pause
+    pause: props.pause,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$i,
+      lineNumber: 62,
+      columnNumber: 9
+    }
   }), /*#__PURE__*/React.createElement(ProgressIndicators, {
     currentTime: props.currentTime,
     duration: props.duration,
     bufferedEnd: props.bufferedEnd,
     scrubTo: props.scrubTo,
-    seekTo: props.seekTo
+    seekTo: props.seekTo,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$i,
+      lineNumber: 65,
+      columnNumber: 9
+    }
   }), /*#__PURE__*/React.createElement(TimeDisplay, {
     currentTime: props.currentTime,
-    duration: props.duration
+    duration: props.duration,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$i,
+      lineNumber: 70,
+      columnNumber: 9
+    }
   }), /*#__PURE__*/React.createElement(TextTracksMenu, {
     items: props.textTracksMenuItems,
-    onItemClick: props.onTextTracksMenuItemClick
+    onItemClick: props.onTextTracksMenuItemClick,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$i,
+      lineNumber: 72,
+      columnNumber: 9
+    }
   }), /*#__PURE__*/React.createElement(QualityMenu, {
     items: props.qualityMenuItems,
     onItemClick: props.onQualityMenuItemClick,
-    subMenuExpanded: props.qualityMenuExpanded
+    subMenuExpanded: props.qualityMenuExpanded,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$i,
+      lineNumber: 74,
+      columnNumber: 9
+    }
   })), /*#__PURE__*/React.createElement(InlineFileRights, {
     items: props.inlineFileRightsItems,
     context: "playerControls",
     playerControlsFadedOut: fadedOut,
-    playerControlsStandAlone: props.standAlone
+    playerControlsStandAlone: props.standAlone,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$i,
+      lineNumber: 78,
+      columnNumber: 7
+    }
   }));
 }
 
+var _jsxFileName$j = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/PlayerControls/index.js";
 function PlayerControls(props) {
   var _props$variant;
-  var ControlComponent = ((_props$variant = props.variant) === null || _props$variant === void 0 ? void 0 : _props$variant.startsWith('waveform')) ? WaveformPlayerControls : ClassicPlayerControls;
-  return /*#__PURE__*/React.createElement(ControlComponent, props);
+  const ControlComponent = ((_props$variant = props.variant) === null || _props$variant === void 0 ? void 0 : _props$variant.startsWith('waveform')) ? WaveformPlayerControls : ClassicPlayerControls;
+  return /*#__PURE__*/React.createElement(ControlComponent, Object.assign({}, props, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$j,
+      lineNumber: 13,
+      columnNumber: 5
+    }
+  }));
 }
 PlayerControls.defaultProps = {
   currentTime: 200,
   duration: 600,
   bufferedEnd: 400,
   isPlaying: false,
-  play: function play() {},
-  pause: function pause() {},
-  scrubTo: function scrubTo() {},
-  seekTo: function seekTo() {},
+  play: () => {},
+  pause: () => {},
+  scrubTo: () => {},
+  seekTo: () => {},
   inset: false
 };
 
+// Whether the player controls should auto-hide because the user is
+// idle and not interacting with them. Shared by the control bar and by
+// chrome rendered alongside it (e.g. the fullscreen button) so they
+// fade in sync.
+function usePlayerControlsInactive(playerState) {
+  const focusOutlineVisible = useFocusOutlineVisible();
+  return (playerState.userIdle || !playerState.userHovering) && (!focusOutlineVisible || !playerState.focusInsideControls) && !playerState.userHoveringControls;
+}
+
+var _jsxFileName$k = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/MediaPlayerControls.js";
 function MediaPlayerControls(props) {
-  var playerState = props.playerState;
-  var playerActions = props.playerActions;
-  var _useI18n = useI18n(),
-    t = _useI18n.t;
-  var textTracks = useTextTracks({
+  const playerState = props.playerState;
+  const playerActions = props.playerActions;
+  const {
+    t
+  } = useI18n();
+  const textTracks = useTextTracks({
     file: props.file,
     defaultTextTrackFilePermaId: props.defaultTextTrackFilePermaId,
     captionsByDefault: useMediaMuted()
   });
-  var focusOutlineVisible = useFocusOutlineVisible();
+  const controlsInactive = usePlayerControlsInactive(playerState);
   return /*#__PURE__*/React.createElement(PlayerControls, Object.assign({
     type: props.type,
     variant: props.configuration.playerControlVariant,
     waveformColor: props.configuration.waveformColor,
+    remainingWaveformColor: props.configuration.remainingWaveformColor,
+    waveformCursorColor: props.configuration.waveformCursorColor,
+    invertPlayButton: props.configuration.invertPlayButton,
     mediaElementId: playerState.mediaElementId,
     currentTime: playerState.scrubbingAt !== undefined ? playerState.scrubbingAt : playerState.currentTime,
     bufferedEnd: playerState.bufferedEnd,
@@ -1153,7 +1844,7 @@ function MediaPlayerControls(props) {
     isPlaying: playerState.shouldPlay,
     unplayed: playerState.unplayed,
     lastControlledVia: playerState.lastControlledVia,
-    inactive: props.autoHide && (playerState.userIdle || !playerState.userHovering) && (!focusOutlineVisible || !playerState.focusInsideControls) && !playerState.userHoveringControls,
+    inactive: props.autoHide && controlsInactive,
     onFocus: playerActions.focusEnteredControls,
     onBlur: playerActions.focusLeftControls,
     onMouseEnter: playerActions.mouseEnteredControls,
@@ -1166,7 +1857,14 @@ function MediaPlayerControls(props) {
     onTextTracksMenuItemClick: textTracks.select,
     qualityMenuItems: props.qualityMenuItems,
     onQualityMenuItemClick: props.onQualityMenuItemClick
-  }, props));
+  }, props, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$k,
+      lineNumber: 22,
+      columnNumber: 5
+    }
+  }));
 }
 MediaPlayerControls.defaultProps = {
   configuration: {}
@@ -1183,104 +1881,153 @@ function getTextTracksMenuItems(textTracks, t) {
     value: 'auto',
     label: textTracks.autoDisplayLabel,
     active: textTracks.mode === 'auto'
-  }].concat(_toConsumableArray(textTracks.files.map(function (textTrackFile) {
-    return {
-      value: textTrackFile.id,
-      label: textTrackFile.displayLabel,
-      active: textTracks.mode === 'user' && textTrackFile.id === textTracks.activeFileId
-    };
-  })));
+  }, ...textTracks.files.map(textTrackFile => ({
+    value: textTrackFile.id,
+    label: textTrackFile.displayLabel,
+    active: textTracks.mode === 'user' && textTrackFile.id === textTracks.activeFileId
+  }))];
 }
 
-var _excluded = ["videoFile"];
-function VideoPlayerControls(_ref) {
-  var videoFile = _ref.videoFile,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var _useVideoQualitySetti = useVideoQualitySetting(),
-    _useVideoQualitySetti2 = _slicedToArray(_useVideoQualitySetti, 2),
-    activeQuality = _useVideoQualitySetti2[0],
-    setActiveQuality = _useVideoQualitySetti2[1];
-  var availableQualities = useAvailableQualities(videoFile);
-  var _useI18n = useI18n(),
-    t = _useI18n.t;
+var _jsxFileName$l = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/VideoPlayerControls.js";
+function VideoPlayerControls({
+  videoFile,
+  ...props
+}) {
+  const [activeQuality, setActiveQuality] = useVideoQualitySetting();
+  const availableQualities = useAvailableQualities(videoFile);
+  const {
+    t
+  } = useI18n();
   return /*#__PURE__*/React.createElement(MediaPlayerControls, Object.assign({}, props, {
     file: videoFile,
     autoHide: true,
     qualityMenuItems: getQualityMenuItems(availableQualities, activeQuality, t),
-    onQualityMenuItemClick: setActiveQuality
+    onQualityMenuItemClick: setActiveQuality,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$l,
+      lineNumber: 14,
+      columnNumber: 5
+    }
   }));
 }
 function getQualityMenuItems(availableQualities, activeQuality, t) {
-  return availableQualities.map(function (quality) {
-    return {
-      value: quality,
-      label: t("pageflow_scrolled.public.video_qualities.labels.".concat(quality)),
-      annotation: t("pageflow_scrolled.public.video_qualities.annotations.".concat(quality), {
-        defaultValue: ''
-      }),
-      active: activeQuality === quality
-    };
-  });
+  return availableQualities.map(quality => ({
+    value: quality,
+    label: t(`pageflow_scrolled.public.video_qualities.labels.${quality}`),
+    annotation: t(`pageflow_scrolled.public.video_qualities.annotations.${quality}`, {
+      defaultValue: ''
+    }),
+    active: activeQuality === quality
+  }));
 }
 
-var _excluded$1 = ["audioFile"];
-function AudioPlayerControls(_ref) {
-  var audioFile = _ref.audioFile,
-    props = _objectWithoutProperties(_ref, _excluded$1);
+var _jsxFileName$m = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/AudioPlayerControls.js";
+function AudioPlayerControls({
+  audioFile,
+  ...props
+}) {
   return /*#__PURE__*/React.createElement(MediaPlayerControls, Object.assign({}, props, {
-    file: audioFile
+    file: audioFile,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$m,
+      lineNumber: 7,
+      columnNumber: 5
+    }
   }));
 }
 
-var Viewer = React.lazy(function () {
-  return import('./Viewer-0345ce57.js');
-});
+var _jsxFileName$n = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/Panorama/index.js";
+const Viewer = React.lazy(() => import('./Viewer-1482ca34.js'));
 function Panorama(props) {
   return /*#__PURE__*/React.createElement(Suspense, {
-    fallback: /*#__PURE__*/React.createElement("div", null)
-  }, /*#__PURE__*/React.createElement(Viewer, props));
+    fallback: /*#__PURE__*/React.createElement("div", {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$n,
+        lineNumber: 7,
+        columnNumber: 25
+      }
+    }),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$n,
+      lineNumber: 7,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement(Viewer, Object.assign({}, props, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$n,
+      lineNumber: 8,
+      columnNumber: 7
+    }
+  })));
 }
 
-var _excluded$2 = ["enabled"];
-var Viewer$1 = React.lazy(function () {
-  return import('./Viewer-cdc549cc.js');
-});
-function ExpandableImage(_ref) {
-  var enabled = _ref.enabled,
-    props = _objectWithoutProperties(_ref, _excluded$2);
+var _jsxFileName$o = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/ExpandableImage/index.js";
+const Viewer$1 = React.lazy(() => import('./Viewer-70504231.js'));
+function ExpandableImage({
+  enabled,
+  ...props
+}) {
   if (!enabled) {
     return props.children;
   }
   return /*#__PURE__*/React.createElement(Suspense, {
-    fallback: /*#__PURE__*/React.createElement("div", null)
-  }, /*#__PURE__*/React.createElement(Viewer$1, props));
-}
-
-var styles$8 = {"nav":"PaginationIndicator-module_nav__cY6JE","item":"PaginationIndicator-module_item__O7cZ-","current":"PaginationIndicator-module_current__1wxHj"};
-
-function PaginationIndicator(_ref) {
-  var itemCount = _ref.itemCount,
-    currentIndex = _ref.currentIndex,
-    scrollerRef = _ref.scrollerRef,
-    navAriaLabelTranslationKey = _ref.navAriaLabelTranslationKey,
-    itemAriaLabelTranslationKey = _ref.itemAriaLabelTranslationKey,
-    onItemClick = _ref.onItemClick;
-  var _useI18n = useI18n$1(),
-    t = _useI18n.t;
-  var navRef = useRef();
-  var theme = useTheme$1();
-  var currentItemFlex = theme.options.properties.root.paginationIndicatorCurrentItemFlex || 3;
-  useEffect(function () {
+    fallback: /*#__PURE__*/React.createElement("div", {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$o,
+        lineNumber: 11,
+        columnNumber: 25
+      }
+    }),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$o,
+      lineNumber: 11,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement(Viewer$1, Object.assign({}, props, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$o,
+      lineNumber: 12,
+      columnNumber: 7
+    }
+  })));
+}
+
+var styles$9 = {"nav":"PaginationIndicator-module_nav__cY6JE","item":"PaginationIndicator-module_item__O7cZ-","current":"PaginationIndicator-module_current__1wxHj"};
+
+var _jsxFileName$p = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/PaginationIndicator.js";
+function PaginationIndicator({
+  itemCount,
+  currentIndex,
+  scrollerRef,
+  navAriaLabelTranslationKey,
+  itemAriaLabelTranslationKey,
+  onItemClick
+}) {
+  const {
+    t
+  } = useI18n$1();
+  const navRef = useRef();
+  const theme = useTheme$1();
+  const currentItemFlex = theme.options.properties.root.paginationIndicatorCurrentItemFlex || 3;
+  useEffect(() => {
     if (!(currentItemFlex > 1)) {
       return;
     }
-    var timeline = new window.ScrollTimeline({
+    const timeline = new window.ScrollTimeline({
       source: scrollerRef.current,
       axis: 'inline'
     });
-    var animations = _toConsumableArray(navRef.current.children).map(function (element, index) {
-      var start = 1 / Math.max(itemCount - 1, 1) * (index - 1);
-      var end = 1 / Math.max(itemCount - 1, 1) * (index + 1);
+    const animations = [...navRef.current.children].map((element, index) => {
+      const start = 1 / Math.max(itemCount - 1, 1) * (index - 1);
+      const end = 1 / Math.max(itemCount - 1, 1) * (index + 1);
       return element.animate([start >= 0 && {
         flex: 1,
         offset: start
@@ -1291,48 +2038,55 @@ function PaginationIndicator(_ref) {
         offset: end
       }].filter(Boolean), {
         easing: 'linear',
-        timeline: timeline
+        timeline
       });
     });
-    return function () {
-      return animations.forEach(function (animation) {
-        return animation.cancel();
-      });
-    };
+    return () => animations.forEach(animation => animation.cancel());
   }, [currentItemFlex, scrollerRef, itemCount]);
   return /*#__PURE__*/React.createElement("nav", {
     ref: navRef,
-    className: styles$8.nav,
+    className: styles$9.nav,
     "aria-label": t(navAriaLabelTranslationKey),
     style: {
-      aspectRatio: "".concat(itemCount + 2, " / 1")
+      aspectRatio: `${itemCount + 2} / 1`
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$p,
+      lineNumber: 54,
+      columnNumber: 5
     }
-  }, Array(itemCount).fill().map(function (_, index) {
-    return /*#__PURE__*/React.createElement("button", {
-      key: index,
-      className: classNames(styles$8.item, _defineProperty({}, styles$8.current, index === currentIndex)),
-      "aria-label": t(itemAriaLabelTranslationKey, {
-        index: index
-      }),
-      "aria-current": index === currentIndex,
-      onClick: function onClick() {
-        return onItemClick(index);
-      }
-    });
-  }));
+  }, Array(itemCount).fill().map((_, index) => /*#__PURE__*/React.createElement("button", {
+    key: index,
+    className: classNames(styles$9.item, {
+      [styles$9.current]: index === currentIndex
+    }),
+    "aria-label": t(itemAriaLabelTranslationKey, {
+      index
+    }),
+    "aria-current": index === currentIndex,
+    onClick: () => onItemClick(index),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$p,
+      lineNumber: 59,
+      columnNumber: 9
+    }
+  })));
 }
 
 // from https://github.com/n8tb1t/use-scroll-position
-var isBrowser = typeof window !== "undefined";
-function getScrollPosition(_ref) {
-  var element = _ref.element,
-    useWindow = _ref.useWindow;
+const isBrowser = typeof window !== `undefined`;
+function getScrollPosition({
+  element,
+  useWindow
+}) {
   if (!isBrowser) return {
     x: 0,
     y: 0
   };
-  var target = element ? element.current : document.body;
-  var position = target.getBoundingClientRect();
+  const target = element ? element.current : document.body;
+  const position = target.getBoundingClientRect();
   return useWindow ? {
     x: window.scrollX,
     y: window.scrollY
@@ -1342,27 +2096,27 @@ function getScrollPosition(_ref) {
   };
 }
 function useScrollPosition(effect, deps, element, useWindow, wait) {
-  var position = useRef(getScrollPosition({
-    useWindow: useWindow
+  const position = useRef(getScrollPosition({
+    useWindow
   }));
-  var throttleTimeout = null;
-  var callBack = function callBack() {
-    var currPos = getScrollPosition({
-      element: element,
-      useWindow: useWindow
+  let throttleTimeout = null;
+  const callBack = () => {
+    const currPos = getScrollPosition({
+      element,
+      useWindow
     });
     effect({
       prevPos: position.current,
-      currPos: currPos
+      currPos
     });
     position.current = currPos;
     throttleTimeout = null;
   };
-  useIsomorphicLayoutEffect(function () {
+  useIsomorphicLayoutEffect(() => {
     if (!isBrowser) {
       return;
     }
-    var handleScroll = function handleScroll() {
+    const handleScroll = () => {
       if (wait) {
         if (throttleTimeout === null) {
           // Todo: store in useRef hook?
@@ -1373,9 +2127,7 @@ function useScrollPosition(effect, deps, element, useWindow, wait) {
       }
     };
     window.addEventListener('scroll', handleScroll);
-    return function () {
-      return window.removeEventListener('scroll', handleScroll);
-    };
+    return () => window.removeEventListener('scroll', handleScroll);
   }, deps);
 }
 useScrollPosition.defaultProps = {
@@ -1385,41 +2137,97 @@ useScrollPosition.defaultProps = {
   wait: null
 };
 
-var EditableInlineText = withInlineEditingAlternative('EditableInlineText', function EditableInlineText(_ref) {
+var _jsxFileName$q = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/EditableInlineText.js";
+const EditableInlineText = extensible('EditableInlineText', function EditableInlineText({
+  value,
+  hyphens,
+  defaultValue = ''
+}) {
   var _value$, _value$$children$;
-  var value = _ref.value,
-    hyphens = _ref.hyphens,
-    _ref$defaultValue = _ref.defaultValue,
-    defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue;
-  var text = value ? (_value$ = value[0]) === null || _value$ === void 0 ? void 0 : (_value$$children$ = _value$.children[0]) === null || _value$$children$ === void 0 ? void 0 : _value$$children$.text : defaultValue;
+  const text = value ? (_value$ = value[0]) === null || _value$ === void 0 ? void 0 : (_value$$children$ = _value$.children[0]) === null || _value$$children$ === void 0 ? void 0 : _value$$children$.text : defaultValue;
   return /*#__PURE__*/React.createElement("span", {
-    className: classNames(frontendStyles.root, frontendStyles.textEffects, frontendStyles["hyphens-".concat(hyphens)])
-  }, /*#__PURE__*/React.createElement("span", null, text));
+    className: classNames(frontendStyles.root, frontendStyles.textEffects, frontendStyles[`hyphens-${hyphens}`]),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$q,
+      lineNumber: 14,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$q,
+      lineNumber: 17,
+      columnNumber: 9
+    }
+  }, text));
 });
 
-var EditableLink = withInlineEditingAlternative('EditableLink', function EditableLink(_ref) {
-  var className = _ref.className,
-    href = _ref.href,
-    openInNewTab = _ref.openInNewTab,
-    children = _ref.children;
+var _jsxFileName$r = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/EditableLink.js";
+const EditableLink = extensible('EditableLink', function EditableLink({
+  className,
+  href,
+  openInNewTab,
+  onClick,
+  children
+}) {
   return /*#__PURE__*/React.createElement(Link, {
     href: href,
     openInNewTab: openInNewTab,
     attributes: {
-      className: className
+      className,
+      onClick
     },
-    children: children
+    children: children,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$r,
+      lineNumber: 10,
+      columnNumber: 7
+    }
   });
 });
 
-var LinkTooltipProvider = withInlineEditingAlternative('LinkTooltipProvider', function LinkTooltipProvider(_ref) {
-  var children = _ref.children;
+var _jsxFileName$s = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/Placeholder.js";
+const Placeholder = extensible('Placeholder', function Placeholder() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles$e.placeholder,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$s,
+      lineNumber: 6,
+      columnNumber: 10
+    }
+  });
+});
+
+var _jsxFileName$t = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/FilePlaceholderDecorator.js";
+function FilePlaceholder({
+  file
+}) {
+  if (file === null || file === void 0 ? void 0 : file.isReady) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Placeholder, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$t,
+      lineNumber: 9,
+      columnNumber: 10
+    }
+  });
+}
+
+const LinkTooltipProvider = extensible('LinkTooltipProvider', function LinkTooltipProvider({
+  children
+}) {
   return children;
 });
 
-var styles$9 = {"container":"FitViewport-module_container__-awVj","content":"FitViewport-module_content__1_K5a","inner":"FitViewport-module_inner__3psd1","opaque":"FitViewport-module_opaque__3EE3o"};
+var styles$a = {"container":"FitViewport-module_container__-awVj","content":"FitViewport-module_content__1_K5a","inner":"FitViewport-module_inner__3psd1"};
 
-var AspectRatioContext = React.createContext();
+var _jsxFileName$u = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/FitViewport.js";
+const AspectRatioContext = React.createContext();
 
 /**
  * Render a div with the given aspect ratio which does not
@@ -1444,115 +2252,225 @@ var AspectRatioContext = React.createContext();
  * @param {number} [props.aspectRatio] - Aspect ratio of div.
  * @param {Object} [props.file] - Use width/height of file to calculate aspect ratio.
  * @param {number} [props.scale] - Only take up fraction of the viewport height supplied as value between 0 and 1.
- * @param {Object} [props.opaque] - Render black background behind content.
  * @param {string} [props.fill] - Ignore aspect ration and fill viewport vertically.
  */
-function FitViewport(_ref) {
-  var file = _ref.file,
-    aspectRatio = _ref.aspectRatio,
-    opaque = _ref.opaque,
-    children = _ref.children,
-    fill = _ref.fill,
-    scale = _ref.scale;
-  if (!file && !aspectRatio) return children;
+function FitViewport({
+  file,
+  aspectRatio,
+  fallbackAspectRatio,
+  children,
+  fill,
+  scale
+}) {
+  if (!file && !aspectRatio && !fallbackAspectRatio) return children;
   if (typeof aspectRatio === 'string') {
-    aspectRatio = "var(--theme-aspect-ratio-".concat(aspectRatio, ")");
+    aspectRatio = `var(--theme-aspect-ratio-${aspectRatio})`;
   }
-  aspectRatio = fill ? 'fill' : aspectRatio || file.height / file.width;
+  aspectRatio = fill ? 'fill' : aspectRatio || ((file === null || file === void 0 ? void 0 : file.width) ? file.height / file.width : fallbackAspectRatio);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$9.container, _defineProperty({}, styles$9.opaque, opaque)),
+    className: styles$a.container,
     style: {
       '--fit-viewport-aspect-ratio': fill ? undefined : aspectRatio,
       '--fit-viewport-scale': scale
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$u,
+      lineNumber: 45,
+      columnNumber: 5
     }
   }, /*#__PURE__*/React.createElement(AspectRatioContext.Provider, {
-    value: aspectRatio
+    value: aspectRatio,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$u,
+      lineNumber: 48,
+      columnNumber: 7
+    }
   }, children));
 }
-FitViewport.Content = function FitViewportContent(_ref2) {
-  var children = _ref2.children;
-  var aspectRatio = useContext(AspectRatioContext);
+FitViewport.Content = function FitViewportContent({
+  children
+}) {
+  let aspectRatio = useContext(AspectRatioContext);
   if (aspectRatio === 'fill') {
     return /*#__PURE__*/React.createElement(Fullscreen, {
-      children: children
+      children: children,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$u,
+        lineNumber: 61,
+        columnNumber: 9
+      }
     });
   } else if (!aspectRatio) {
     return children;
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: styles$9.content
-  }, /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", {
-    className: styles$9.inner
+    className: styles$a.content,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$u,
+      lineNumber: 69,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$u,
+      lineNumber: 70,
+      columnNumber: 9
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles$a.inner,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$u,
+      lineNumber: 71,
+      columnNumber: 9
+    }
   }, children));
 };
 
-var styles$a = {"container":"Tooltip-module_container__3V63U","bubble":"Tooltip-module_bubble__FIL1C scope-tooltip","fixed":"Tooltip-module_fixed__3NGyG","openOnHover":"Tooltip-module_openOnHover__1EeI5","fadeIn":"Tooltip-module_fadeIn__3g9QH","inner":"Tooltip-module_inner__E2hsp","highlight":"Tooltip-module_highlight__2NpuQ","arrow":"Tooltip-module_arrow__3LxXo"};
-
-function Tooltip(_ref) {
-  var bubbleClassName = _ref.bubbleClassName,
-    arrowPos = _ref.arrowPos,
-    children = _ref.children,
-    content = _ref.content,
-    fixed = _ref.fixed,
-    highlight = _ref.highlight,
-    openOnHover = _ref.openOnHover,
-    verticalOffset = _ref.verticalOffset,
-    horizontalOffset = _ref.horizontalOffset;
+var styles$b = {"container":"Tooltip-module_container__3V63U","bubble":"Tooltip-module_bubble__FIL1C scope-tooltip","open":"Tooltip-module_open__1avQa","fixed":"Tooltip-module_fixed__3NGyG","openOnHover":"Tooltip-module_openOnHover__1EeI5","fadeIn":"Tooltip-module_fadeIn__3g9QH","inner":"Tooltip-module_inner__E2hsp","highlight":"Tooltip-module_highlight__2NpuQ","arrow":"Tooltip-module_arrow__3LxXo"};
+
+var _jsxFileName$v = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/Tooltip.js";
+function Tooltip({
+  bubbleClassName,
+  arrowPos,
+  children,
+  content,
+  fixed,
+  highlight,
+  name,
+  openOnHover,
+  verticalOffset,
+  horizontalOffset
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const buttonRef = useRef(null);
+  const containerRef = useRef(null);
+  const tooltipId = `tooltip-${name}`;
+  const handleClick = () => {
+    setIsOpen(prev => !prev);
+  };
+  const handleKeyDown = event => {
+    if (event.key === 'Escape' && isOpen) {
+      setIsOpen(false);
+      setTimeout(() => {
+        var _buttonRef$current;
+        return (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
+      }, 0);
+    }
+  };
+  const handleBlur = event => {
+    var _containerRef$current;
+    if (isOpen && event.relatedTarget && !((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.contains(event.relatedTarget))) {
+      setIsOpen(false);
+    }
+  };
+  const isControlled = !openOnHover && !fixed;
+  useEffect(() => {
+    if (!isControlled || !isOpen) {
+      return;
+    }
+    const handleDocumentClick = event => {
+      var _containerRef$current2;
+      if (!((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.contains(event.target))) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener('click', handleDocumentClick);
+    return () => {
+      document.removeEventListener('click', handleDocumentClick);
+    };
+  }, [isControlled, isOpen]);
+  const triggerProps = isControlled ? {
+    onClick: handleClick,
+    ref: buttonRef,
+    'aria-expanded': isOpen,
+    'aria-controls': tooltipId
+  } : openOnHover ? {
+    'aria-describedby': tooltipId
+  } : {};
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$a.container, _defineProperty(_defineProperty({}, styles$a.openOnHover, openOnHover), styles$a.fixed, fixed)),
-    onClick: fixFocusHandlingSafari
-  }, children, /*#__PURE__*/React.createElement(Bubble, {
+    ref: containerRef,
+    className: classNames(styles$b.container, {
+      [styles$b.openOnHover]: openOnHover,
+      [styles$b.fixed]: fixed
+    }),
+    onKeyDown: isControlled ? handleKeyDown : undefined,
+    onBlur: isControlled ? handleBlur : undefined,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$v,
+      lineNumber: 73,
+      columnNumber: 5
+    }
+  }, typeof children === 'function' ? children(triggerProps) : children, /*#__PURE__*/React.createElement(Bubble, {
     className: bubbleClassName,
     highlight: highlight,
     arrowPos: arrowPos,
     verticalOffset: verticalOffset,
-    horizontalOffset: horizontalOffset
+    horizontalOffset: horizontalOffset,
+    isOpen: isOpen,
+    id: tooltipId,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$v,
+      lineNumber: 81,
+      columnNumber: 7
+    }
   }, content));
 }
-function Bubble(_ref2) {
-  var className = _ref2.className,
-    arrowPos = _ref2.arrowPos,
-    children = _ref2.children,
-    highlight = _ref2.highlight,
-    horizontalOffset = _ref2.horizontalOffset,
-    verticalOffset = _ref2.verticalOffset;
-  var inlineStyle = {
+function Bubble({
+  className,
+  arrowPos,
+  children,
+  highlight,
+  horizontalOffset,
+  verticalOffset,
+  isOpen,
+  id
+}) {
+  let inlineStyle = {
     marginLeft: horizontalOffset,
     marginTop: verticalOffset
   };
-
-  // Negative tabIndex ensures element can take focus but does not
-  // come up in tab order. This ensures the tooltip stays expanded
-  // when text in the legal info menu is selected.
   return /*#__PURE__*/React.createElement("div", {
     style: inlineStyle,
-    tabIndex: "-1",
-    className: classNames(className, styles$a.bubble, _defineProperty({}, styles$a.highlight, highlight))
+    id: id,
+    className: classNames(className, styles$b.bubble, {
+      [styles$b.highlight]: highlight,
+      [styles$b.open]: isOpen
+    }),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$v,
+      lineNumber: 101,
+      columnNumber: 5
+    }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       left: arrowPos
     },
-    className: styles$a.arrow
+    className: styles$b.arrow,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$v,
+      lineNumber: 106,
+      columnNumber: 7
+    }
   }), /*#__PURE__*/React.createElement("div", {
-    className: styles$a.inner
+    className: styles$b.inner,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$v,
+      lineNumber: 107,
+      columnNumber: 7
+    }
   }, children));
 }
-
-// Safari does not focus buttons after they are clicked [1]. Focus
-// manually to ensure `focus-within` selector that opens the tooltip
-// applies.
-//
-// [1] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
-function fixFocusHandlingSafari(event) {
-  if (!event.target.closest) {
-    // IE does not support closest, but also does not need this fix.
-    return;
-  }
-  var button = event.target.closest('button');
-  if (button) {
-    button.focus();
-  }
-}
 Tooltip.defaultProps = {
   arrowPos: '50%',
   fixed: false,
@@ -1561,27 +2479,56 @@ Tooltip.defaultProps = {
   horizontalOffset: 0
 };
 
-var styles$b = {"button":"ScrollButton-module_button__3rrDc","icon":"ScrollButton-module_icon__128_J","disabled":"ScrollButton-module_disabled__35fFF","visuallyHidden":"ScrollButton-module_visuallyHidden__36chO"};
-
-var size = 40;
-function ScrollButton(_ref) {
-  var direction = _ref.direction,
-    disabled = _ref.disabled,
-    onClick = _ref.onClick;
-  var _useI18n = useI18n(),
-    t = _useI18n.t;
+var styles$c = {"button":"ScrollButton-module_button__3rrDc","icon":"ScrollButton-module_icon__128_J","disabled":"ScrollButton-module_disabled__35fFF","visuallyHidden":"ScrollButton-module_visuallyHidden__36chO"};
+
+var _jsxFileName$w = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/ScrollButton.js";
+const size = 40;
+function ScrollButton({
+  direction,
+  disabled,
+  onClick
+}) {
+  const {
+    t
+  } = useI18n();
   return /*#__PURE__*/React.createElement("button", {
-    className: classNames(styles$b.button, _defineProperty({}, styles$b.disabled, disabled)),
+    className: classNames(styles$c.button, {
+      [styles$c.disabled]: disabled
+    }),
     tabIndex: "-1",
-    onClick: onClick
+    onClick: onClick,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$w,
+      lineNumber: 14,
+      columnNumber: 5
+    }
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$b.icon
+    className: styles$c.icon,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$w,
+      lineNumber: 18,
+      columnNumber: 7
+    }
   }, /*#__PURE__*/React.createElement(ThemeIcon, {
     name: direction === 'left' ? 'arrowLeft' : 'arrowRight',
     width: size,
-    height: size
+    height: size,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$w,
+      lineNumber: 19,
+      columnNumber: 9
+    }
   }), /*#__PURE__*/React.createElement("span", {
-    className: styles$b.visuallyHidden
+    className: styles$c.visuallyHidden,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$w,
+      lineNumber: 22,
+      columnNumber: 9
+    }
   }, t(direction === 'left' ? 'pageflow_scrolled.public.previous' : 'pageflow_scrolled.public.next'))));
 }
 
@@ -1590,98 +2537,102 @@ function textColorForBackgroundColor(hex) {
 }
 
 function registerTemplateWidgetType (typeName, callback) {
-  var element = document.getElementById('template-widget-container');
+  let element = document.getElementById('template-widget-container');
   callback(element);
 }
 
-var WidgetSelectionRect = withInlineEditingAlternative('WidgetSelectionRect', function WidgetSelectionRect(_ref) {
-  var children = _ref.children;
+const WidgetSelectionRect = extensible('WidgetSelectionRect', function WidgetSelectionRect({
+  children
+}) {
   return children;
 });
 
-var styles$c = {"button":"LinkButton-module_button__33q1F","editable":"LinkButton-module_editable__FzuA4"};
-
-var _excluded$3 = ["href", "openInNewTab", "value", "onTextChange", "onLinkChange", "scaleCategory", "className", "actionButtonVisible", "linkPreviewPosition", "linkPreviewDisabled", "children"];
-function LinkButton(_ref) {
-  var href = _ref.href,
-    openInNewTab = _ref.openInNewTab,
-    value = _ref.value,
-    onTextChange = _ref.onTextChange,
-    onLinkChange = _ref.onLinkChange,
-    scaleCategory = _ref.scaleCategory,
-    className = _ref.className,
-    actionButtonVisible = _ref.actionButtonVisible,
-    linkPreviewPosition = _ref.linkPreviewPosition,
-    linkPreviewDisabled = _ref.linkPreviewDisabled,
-    children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$3);
-  var _useI18n = useI18n({
-      locale: 'ui'
-    }),
-    t = _useI18n.t;
-  var _useContentElementEdi = useContentElementEditorState(),
-    isEditable = _useContentElementEdi.isEditable;
+var styles$d = {"button":"LinkButton-module_button__33q1F scope-linkButton","editable":"LinkButton-module_editable__FzuA4"};
+
+var _jsxFileName$x = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/LinkButton.js";
+function LinkButton({
+  href,
+  openInNewTab,
+  value,
+  onTextChange,
+  onLinkChange,
+  scaleCategory,
+  className,
+  actionButtonVisible,
+  linkPreviewPosition,
+  linkPreviewDisabled,
+  children,
+  ...props
+}) {
+  const {
+    t
+  } = useI18n({
+    locale: 'ui'
+  });
+  const {
+    isEditable
+  } = useContentElementEditorState();
   return /*#__PURE__*/React.createElement(Text, {
     inline: true,
-    scaleCategory: scaleCategory
+    scaleCategory: scaleCategory,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$x,
+      lineNumber: 29,
+      columnNumber: 5
+    }
   }, /*#__PURE__*/React.createElement(EditableLink, Object.assign({
     href: href,
     openInNewTab: openInNewTab,
     linkPreviewPosition: linkPreviewPosition,
     linkPreviewDisabled: utils.isBlankEditableTextValue(value) || linkPreviewDisabled,
     actionButtonVisible: actionButtonVisible,
-    className: classNames(styles$c.button, className, _defineProperty({}, styles$c.editable, isEditable)),
+    className: classNames(styles$d.button, className, {
+      [styles$d.editable]: isEditable
+    }),
     onChange: onLinkChange
-  }, props), /*#__PURE__*/React.createElement(EditableInlineText, {
+  }, props, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$x,
+      lineNumber: 30,
+      columnNumber: 7
+    }
+  }), /*#__PURE__*/React.createElement(EditableInlineText, {
     value: value,
     onChange: onTextChange,
-    placeholder: t('pageflow_scrolled.inline_editing.type_text')
+    placeholder: t('pageflow_scrolled.inline_editing.type_text'),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$x,
+      lineNumber: 38,
+      columnNumber: 9
+    }
   }), children));
 }
 
-function _regeneratorRuntime$1() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime$1 = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == typeof h && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator["return"] && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(typeof e + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, "catch": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
-var editMode = typeof window !== 'undefined' && window.location.pathname.indexOf('/editor/entries') === 0;
-var withShadowClassName = styles$d.withShadow;
-global.pageflowScrolledRender = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime$1().mark(function _callee(seed) {
-    return _regeneratorRuntime$1().wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          setupI18n(seed.i18n);
-          features.enable('frontend', seed.config.enabledFeatureNames);
-          _context.next = 4;
-          return browser.detectFeatures();
-        case 4:
-          _context.next = 6;
-          return loadDashUnlessHlsSupported(seed);
-        case 6:
-          if (!editMode) {
-            _context.next = 11;
-            break;
-          }
-          _context.next = 9;
-          return loadInlineEditingComponents();
-        case 9:
-          _context.next = 12;
-          break;
-        case 11:
-          registerVendors({
-            contentElementTypes: api.contentElementTypes,
-            consent: consent,
-            seed: seed
-          });
-        case 12:
-          render(seed);
-        case 13:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee);
-  }));
-  return function (_x) {
-    return _ref.apply(this, arguments);
-  };
-}();
+var _jsxFileName$y = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/index.js";
+const editMode = typeof window !== 'undefined' && window.location.pathname.indexOf('/editor/entries') === 0;
+const withShadowClassName = styles$f.withShadow;
+global.pageflowScrolledRender = async function (seed) {
+  setupI18n(seed.i18n);
+  features.enable('frontend', seed.config.enabledFeatureNames);
+  await browser.detectFeatures();
+  await loadDashUnlessHlsSupported(seed);
+  if (seed.config.loadInlineEditing) {
+    await loadInlineEditingExtensions();
+  } else {
+    registerVendors({
+      contentElementTypes: api.contentElementTypes,
+      consent,
+      seed
+    });
+  }
+  render(seed);
+  if (seed.config.loadCommenting) {
+    loadCommentingExtensions();
+  }
+};
 global.pageflowScrolledRegisterUpdateSeedHandler = function () {
   if (window.parent !== window) {
     window.addEventListener('message', receive);
@@ -1694,22 +2645,66 @@ global.pageflowScrolledRegisterUpdateSeedHandler = function () {
     }
   }
 };
+function bootFromSeedElement() {
+  const element = document.querySelector('script[type="application/json"][data-pageflow-scrolled-seed]');
+  if (element) {
+    global.pageflowScrolledRender(JSON.parse(element.textContent));
+  }
+}
+if (typeof document !== 'undefined') {
+  // Widget packs (defaultNavigation, consentBar, mainStorylineSheet, ...) are
+  // separate scripts that load after this entry bundle and register their widget
+  // types on execution. All deferred pack scripts run before DOMContentLoaded, so
+  // waiting for that event is what guarantees every widget type - and the seed
+  // element that follows the scripts - is present before we render.
+  if (document.readyState === 'complete') {
+    bootFromSeedElement();
+  } else {
+    document.addEventListener('DOMContentLoaded', bootFromSeedElement);
+  }
+}
 function render(seed) {
   if (editMode) {
     ReactDOM.render( /*#__PURE__*/React.createElement(Root, {
-      seed: seed
+      seed: seed,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$y,
+        lineNumber: 226,
+        columnNumber: 21
+      }
     }), document.getElementById('root'));
   } else {
     ReactDOM.hydrate( /*#__PURE__*/React.createElement(Root, {
-      seed: seed
+      seed: seed,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$y,
+        lineNumber: 229,
+        columnNumber: 22
+      }
     }), document.getElementById('root'));
   }
 }
-function Root(_ref2) {
-  var seed = _ref2.seed;
+function Root({
+  seed
+}) {
   return /*#__PURE__*/React.createElement(RootProviders, {
-    seed: seed
-  }, /*#__PURE__*/React.createElement(Entry, null));
+    seed: seed,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$y,
+      lineNumber: 235,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement(Entry, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$y,
+      lineNumber: 236,
+      columnNumber: 7
+    }
+  }));
 }
 
-export { AudioPlayerControls, ClassicPlayerControls, ContentElementBox, ContentElementFigure, EditableInlineText, EditableLink, Entry, ExpandableImage, Figure, FitViewport, LinkButton, LinkTooltipProvider, MediaInteractionTracking, MediaPlayerControls, PaginationIndicator, Panorama, PlayerControls, Root, ScrollButton, Tooltip, VideoPlayerControls, WaveformPlayerControls, WidgetSelectionRect, registerTemplateWidgetType, textColorForBackgroundColor, useScrollPosition, withShadowClassName };
+export { ActionButton, AudioPlayerControls, ClassicPlayerControls, ContentElementBox, ContentElementFigure, EditableInlineText, EditableLink, Entry, ExpandableImage, Figure, FilePlaceholder, FitViewport, LinkButton, LinkTooltipProvider, MediaInteractionTracking, MediaPlayerControls, PaginationIndicator, Panorama, Placeholder, PlayerControls, Root, ScrollButton, Tooltip, VideoPlayerControls, WaveformPlayerControls, WidgetSelectionRect, contentElementBoxProps, processImageModifiers, registerTemplateWidgetType, textColorForBackgroundColor, useFileWithCropPosition, usePlayerControlsInactive, useScrollPosition, withShadowClassName };