pageflow 17.1.0 → 17.2.0

data/entry_types/scrolled/package/widgets/excursionSheet.css

@@ -1 +1 @@
-.CloseButton-module_button__3aQ6f{position:sticky;top:var(--widget-margin-top,0);z-index:10;display:flex;margin:.25rem .25rem .25rem auto;padding:.75rem;border:0;background-color:transparent;color:var(--theme-light-content-text-color);cursor:pointer;outline-offset:-3px;transition:opacity .5s,top .15s ease;@starting-style{opacity:0}}.CloseButton-module_button__3aQ6f svg{position:relative;transition:color .5s}.CloseButton-module_invert__3C788 svg{color:var(--theme-dark-content-text-color)}.ReturnButton-module_wrapper__3rzAj{height:50lvh;font-family:var(--theme-widget-font-family)}.ReturnButton-module_button__1SKjN{position:absolute;left:50%;display:flex;flex-direction:column;gap:.5rem;align-items:center;text-align:center;border:0;padding:.5rem;background-color:transparent;color:var(--theme-light-content-text-color);font-size:1.25rem;cursor:pointer}.colors-module_contentColorScope__1Oidv{--theme-light-content-surface-color:var(--root-light-content-surface-color);--theme-dark-content-surface-color:var(--root-dark-content-surface-color);--theme-light-content-text-color:var(--root-light-content-text-color);--theme-dark-content-text-color:var(--root-dark-content-text-color)}.ExcursionSheet-module_container__2NpY_{position:relative;margin-top:-100vh;z-index:10;padding-top:33lvh;pointer-events:none}.ExcursionSheet-module_container__2NpY_>*{pointer-events:auto}.ExcursionSheet-module_backdrop__3RyMJ{position:fixed;top:0;height:100vh;width:100%;background-color:rgba(0,0,0,.7);transition:opacity .2s ease;@starting-style{opacity:0}}.ExcursionSheet-module_content__3pYqz{transition:transform .2s ease-out,opacity .2s;box-shadow:0 0 20px 5px rgba(0,0,0,.5);position:relative;overflow:clip;@starting-style{transform:translateY(20lvh);opacity:0}}.ExcursionSheet-module_probe__3xetc{--section-intersection-observer-root-margin-top:calc(var(--widget-margin-top) + 1.5rem)}
+.CloseButton-module_button__3aQ6f{position:sticky;top:var(--widget-margin-top,0);z-index:10;display:flex;margin:.25rem .25rem .25rem auto;padding:.75rem;border:0;background-color:initial;color:var(--theme-light-content-text-color);cursor:pointer;outline-offset:-3px;transition:opacity .5s,top .15s ease;@starting-style{opacity:0}}.CloseButton-module_button__3aQ6f svg{position:relative;transition:color .5s}.CloseButton-module_invert__3C788 svg{color:var(--theme-dark-content-text-color)}.ReturnButton-module_wrapper__3rzAj{height:50lvh;font-family:var(--theme-widget-font-family)}.ReturnButton-module_button__1SKjN{position:absolute;left:50%;display:flex;flex-direction:column;gap:.5rem;align-items:center;text-align:center;border:0;padding:.5rem;background-color:initial;color:var(--theme-light-content-text-color);font-size:1.25rem;cursor:pointer}.colors-module_contentColorScope__1Oidv{--theme-light-content-surface-color:var(--root-light-content-surface-color);--theme-dark-content-surface-color:var(--root-dark-content-surface-color);--theme-light-content-text-color:var(--root-light-content-text-color);--theme-dark-content-text-color:var(--root-dark-content-text-color)}.ExcursionSheet-module_container__2NpY_{position:relative;margin-top:-100vh;z-index:10;padding-top:33lvh;pointer-events:none}.ExcursionSheet-module_width-inset__2uSgb{margin-left:3vw;margin-right:3vw}.ExcursionSheet-module_container__2NpY_>*{pointer-events:auto}.ExcursionSheet-module_backdrop__3RyMJ{position:fixed;top:0;height:100vh;width:100%;background-color:rgba(0,0,0,.7)}@media (prefers-reduced-motion:no-preference){.ExcursionSheet-module_backdrop__3RyMJ{transition:opacity .2s ease;@starting-style{opacity:0}}}.ExcursionSheet-module_content__3pYqz{box-shadow:0 0 20px 5px rgba(0,0,0,.5);position:relative;overflow:clip}.ExcursionSheet-module_clip__2y2Bg{clip-path:inset(0)}@media (prefers-reduced-motion:no-preference){.ExcursionSheet-module_content__3pYqz{transition:transform .2s ease-out,opacity .2s;@starting-style{transform:translateY(20lvh);opacity:0}}}.ExcursionSheet-module_probe__3xetc{--section-intersection-observer-root-margin-top:calc(var(--widget-margin-top) + 1.5rem)}

data/entry_types/scrolled/package/widgets/excursionSheet.js

@@ -1,90 +1,21 @@
-import { useI18n, ThemeIcon, useIsomorphicLayoutEffect, SectionIntersectionObserver, frontend } from 'pageflow-scrolled/frontend';
+import { useI18n, ThemeIcon, useIsomorphicLayoutEffect, SectionIntersectionObserver, useOnScreen, frontend } from 'pageflow-scrolled/frontend';
 import React, { useRef, useEffect, useState } from 'react';
 import classNames from 'classnames';
 
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(arr, i) {
-  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-  var _e = undefined;
-
-  try {
-    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
-  }
-
-  return _arr;
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) {
-    arr2[i] = arr[i];
-  }
-
-  return arr2;
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(n);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
 var styles = {"button":"CloseButton-module_button__3aQ6f","invert":"CloseButton-module_invert__3C788"};
 
 var _jsxFileName = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/widgets/excursionSheet/CloseButton.js";
-function CloseButton(_ref) {
-  var invert = _ref.invert,
-    onClick = _ref.onClick;
-  var _useI18n = useI18n(),
-    t = _useI18n.t;
+function CloseButton({
+  invert,
+  onClick
+}) {
+  const {
+    t
+  } = useI18n();
   return /*#__PURE__*/React.createElement("button", {
-    className: classNames(styles.button, _defineProperty({}, styles.invert, invert)),
+    className: classNames(styles.button, {
+      [styles.invert]: invert
+    }),
     "aria-label": t('pageflow_scrolled.public.close'),
     title: t('pageflow_scrolled.public.close'),
     onClick: onClick,
@@ -108,17 +39,17 @@ function CloseButton(_ref) {
 }
 
 function useScrollCenter() {
-  var parentRef = useRef();
-  var childRef = useRef();
-  useEffect(function () {
+  const parentRef = useRef();
+  const childRef = useRef();
+  useEffect(() => {
     function onScroll() {
-      var parentRect = parentRef.current.getBoundingClientRect();
-      childRef.current.style.transform = "translate(-50%, calc((100lvh - ".concat(parentRect.top, "px) * 0.3 - 50%)");
+      const parentRect = parentRef.current.getBoundingClientRect();
+      childRef.current.style.transform = `translate(-50%, calc((100lvh - ${parentRect.top}px) * 0.3 - 50%)`;
     }
     window.addEventListener('scroll', onScroll);
     window.addEventListener('resize', onScroll);
     onScroll();
-    return function () {
+    return () => {
       window.removeEventListener('scroll', onScroll);
       window.removeEventListener('resize', onScroll);
     };
@@ -129,32 +60,29 @@ function useScrollCenter() {
 var styles$1 = {"wrapper":"ReturnButton-module_wrapper__3rzAj","button":"ReturnButton-module_button__1SKjN"};
 
 var _jsxFileName$1 = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/widgets/excursionSheet/ReturnButton.js";
-function ReturnButton(_ref) {
-  var label = _ref.label,
-    onClose = _ref.onClose,
-    children = _ref.children;
-  var _useScrollCenter = useScrollCenter(),
-    _useScrollCenter2 = _slicedToArray(_useScrollCenter, 2),
-    wrapperRef = _useScrollCenter2[0],
-    buttonRef = _useScrollCenter2[1];
-  useIsomorphicLayoutEffect(function () {
-    var timeline = new window.ViewTimeline({
+function ReturnButton({
+  label,
+  onClose,
+  children
+}) {
+  const [wrapperRef, buttonRef] = useScrollCenter();
+  useIsomorphicLayoutEffect(() => {
+    const timeline = new window.ViewTimeline({
       subject: wrapperRef.current
     });
-    var animation = buttonRef.current.animate({
+    const animation = buttonRef.current.animate({
       opacity: ['0', '1']
     }, {
-      timeline: timeline,
+      timeline,
       fill: 'both',
       rangeStart: 'entry 10%',
       rangeEnd: 'entry 50%'
     });
-    return function () {
-      return animation.cancel();
-    };
+    return () => animation.cancel();
   }, []);
-  var _useI18n = useI18n(),
-    t = _useI18n.t;
+  const {
+    t
+  } = useI18n();
   return /*#__PURE__*/React.createElement("div", {
     className: styles$1.wrapper,
     ref: wrapperRef,
@@ -187,33 +115,34 @@ function ReturnButton(_ref) {
   }), label || t('pageflow_scrolled.public.exit_excursion')));
 }
 
-var styles$2 = {"container":"ExcursionSheet-module_container__2NpY_ colors-module_contentColorScope__1Oidv","backdrop":"ExcursionSheet-module_backdrop__3RyMJ","content":"ExcursionSheet-module_content__3pYqz","probe":"ExcursionSheet-module_probe__3xetc"};
+var styles$2 = {"container":"ExcursionSheet-module_container__2NpY_ colors-module_contentColorScope__1Oidv","width-inset":"ExcursionSheet-module_width-inset__2uSgb","backdrop":"ExcursionSheet-module_backdrop__3RyMJ","content":"ExcursionSheet-module_content__3pYqz","clip":"ExcursionSheet-module_clip__2y2Bg","probe":"ExcursionSheet-module_probe__3xetc"};
 
 var _jsxFileName$2 = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/widgets/excursionSheet/ExcursionSheet.js";
-function ExcursionSheet(_ref) {
-  var excursion = _ref.excursion,
-    onClose = _ref.onClose,
-    children = _ref.children;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    intersectingSectionInverted = _useState2[0],
-    setIntersectingSectionInverted = _useState2[1];
+function ExcursionSheet({
+  excursion,
+  onClose,
+  setIsCoveringBackground,
+  children
+}) {
+  const contentRef = useRef();
+  const [intersectingSectionInverted, setIntersectingSectionInverted] = useState(false);
+  useCoversScreen(contentRef, setIsCoveringBackground);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: styles$2.backdrop,
     onClick: onClose,
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 16,
+      lineNumber: 19,
       columnNumber: 7
     }
   }), /*#__PURE__*/React.createElement("div", {
     key: excursion.id,
-    className: styles$2.container,
+    className: classNames(styles$2.container, styles$2[`width-${excursion.sheetWidth}`]),
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 18,
+      lineNumber: 21,
       columnNumber: 7
     }
   }, /*#__PURE__*/React.createElement(CloseButton, {
@@ -222,40 +151,74 @@ function ExcursionSheet(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 20,
+      lineNumber: 23,
       columnNumber: 9
     }
   }), /*#__PURE__*/React.createElement("div", {
+    ref: contentRef,
     className: styles$2.content,
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 22,
+      lineNumber: 25,
       columnNumber: 9
     }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$2.clip,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 26,
+      columnNumber: 11
+    }
   }, /*#__PURE__*/React.createElement(SectionIntersectionObserver, {
     sections: excursion.sections,
     probeClassName: styles$2.probe,
-    onChange: function onChange(section) {
-      return setIntersectingSectionInverted(section === null || section === void 0 ? void 0 : section.invert);
-    },
+    onChange: section => setIntersectingSectionInverted(section === null || section === void 0 ? void 0 : section.invert),
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 23,
-      columnNumber: 11
+      lineNumber: 27,
+      columnNumber: 13
     }
-  }, children)), /*#__PURE__*/React.createElement(ReturnButton, {
+  }, children))), /*#__PURE__*/React.createElement(ReturnButton, {
     label: excursion.returnButtonLabel,
     onClose: onClose,
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 30,
+      lineNumber: 35,
       columnNumber: 9
     }
   })));
 }
+function useCoversScreen(ref, onChange) {
+  const intersectsTopRef = useRef(false);
+  const intersectsBottomRef = useRef(false);
+  const updateCoverage = () => {
+    const isCovering = intersectsTopRef.current && intersectsBottomRef.current;
+    onChange(isCovering);
+  };
+  const handleTopEdgeIntersection = intersecting => {
+    intersectsTopRef.current = intersecting;
+    updateCoverage();
+  };
+  const handleBottomEdgeIntersection = intersecting => {
+    intersectsBottomRef.current = intersecting;
+    updateCoverage();
+  };
+  useOnScreen(ref, {
+    rootMargin: '0px 0px -100% 0px',
+    onChange: handleTopEdgeIntersection
+  });
+  useOnScreen(ref, {
+    rootMargin: '-100% 0px 0px 0px',
+    onChange: handleBottomEdgeIntersection
+  });
+  useEffect(() => {
+    return () => onChange(false);
+  }, [onChange]);
+}
 
 frontend.widgetTypes.register('excursionSheet', {
   component: ExcursionSheet

data/entry_types/scrolled/package/widgets/iconInlineFileRights.css

@@ -1 +1 @@
-.IconInlineFileRights-module_standAlone__15788{color:#fff;position:absolute;right:0;left:0;display:flex;justify-content:flex-end;pointer-events:none;z-index:2}.IconInlineFileRights-module_position-top__rxJ3d{top:0}.IconInlineFileRights-module_position-bottom__25azC{bottom:0}.IconInlineFileRights-module_standAlone__15788>*{pointer-events:auto}.IconInlineFileRights-module_button__o5ZmR{border:0;padding:0;background-color:transparent;width:44px;height:40px;margin:0;display:flex;align-items:center;justify-content:center;color:currentColor;cursor:pointer;position:relative}.IconInlineFileRights-module_button__o5ZmR,.IconInlineFileRights-module_tooltip__2e1u8{transition:opacity .2s,visibility .2s}.IconInlineFileRights-module_fadedOut__3A7WF .IconInlineFileRights-module_button__o5ZmR{opacity:.6}.IconInlineFileRights-module_wrapper__2kQK_:active .IconInlineFileRights-module_button__o5ZmR,.IconInlineFileRights-module_wrapper__2kQK_:focus .IconInlineFileRights-module_button__o5ZmR,.IconInlineFileRights-module_wrapper__2kQK_:hover .IconInlineFileRights-module_button__o5ZmR{opacity:1}.IconInlineFileRights-module_button__o5ZmR svg{width:23px;height:23px}.IconInlineFileRights-module_standAlone__15788 .IconInlineFileRights-module_button__o5ZmR svg{filter:drop-shadow(0 1px 4px #000)}.IconInlineFileRights-module_tooltip__2e1u8{font-size:13.5555px;font-family:sans-serif;line-height:1.4;position:absolute;right:5px;background-color:rgba(17,17,17,.9);border-radius:3px;color:#fff;padding:8px;visibility:hidden;opacity:0;text-align:right;margin-left:10px;box-sizing:border-box;max-width:95%;z-index:1}.IconInlineFileRights-module_position-bottom__25azC .IconInlineFileRights-module_tooltip__2e1u8{bottom:38px}.IconInlineFileRights-module_position-top__rxJ3d .IconInlineFileRights-module_tooltip__2e1u8{top:38px}.IconInlineFileRights-module_tooltip__2e1u8:after{content:"";display:block;border:5px solid transparent;position:absolute;right:11px}.IconInlineFileRights-module_position-bottom__25azC .IconInlineFileRights-module_tooltip__2e1u8:after{border-top-color:rgba(17,17,17,.9);top:100%}.IconInlineFileRights-module_position-top__rxJ3d .IconInlineFileRights-module_tooltip__2e1u8:after{border-bottom-color:rgba(17,17,17,.9);bottom:100%}.IconInlineFileRights-module_tooltip__2e1u8 a{color:#fff;-webkit-text-decoration-color:hsla(0,0%,100%,.3);text-decoration-color:hsla(0,0%,100%,.3)}.IconInlineFileRights-module_tooltip__2e1u8 li{white-space:nowrap}.IconInlineFileRights-module_tooltip__2e1u8 span{color:hsla(0,0%,100%,.7)}.IconInlineFileRights-module_wrapper__2kQK_:focus-within .IconInlineFileRights-module_tooltip__2e1u8,.IconInlineFileRights-module_wrapper__2kQK_:hover .IconInlineFileRights-module_tooltip__2e1u8{visibility:visible;opacity:1}.IconInlineFileRights-module_scroller__1hT8t{overflow:auto;overflow-y:hidden;scrollbar-width:thin}.IconInlineFileRights-module_scroller__1hT8t::-webkit-scrollbar{height:12px}.IconInlineFileRights-module_scroller__1hT8t::-webkit-scrollbar-thumb{background-color:hsla(0,0%,100%,.9);border-radius:20px;border:3px solid rgba(17,17,17,.9)}
+.colors-module_contentColorScope__1Nxn3{--theme-light-content-surface-color:var(--root-light-content-surface-color);--theme-dark-content-surface-color:var(--root-dark-content-surface-color);--theme-light-content-text-color:var(--root-light-content-text-color);--theme-dark-content-text-color:var(--root-dark-content-text-color)}.IconInlineFileRights-module_wrapper__2kQK_{--ai-indicator-letter-color:var(--theme-dark-content-surface-color,#101010)}.IconInlineFileRights-module_onLightBackground__GTXJd .IconInlineFileRights-module_button__o5ZmR{--ai-indicator-letter-color:var(--theme-light-content-surface-color,#fff)}.IconInlineFileRights-module_standAlone__15788{color:#fff;position:absolute;right:0;left:0;display:flex;justify-content:flex-end;pointer-events:none;z-index:2}.IconInlineFileRights-module_position-top__rxJ3d{top:0}.IconInlineFileRights-module_position-bottom__25azC{bottom:0}.IconInlineFileRights-module_standAlone__15788>*{pointer-events:auto}.IconInlineFileRights-module_button__o5ZmR{border:0;padding:0 10px;background-color:initial;box-sizing:border-box;min-width:44px;height:40px;margin:0;display:flex;align-items:center;justify-content:center;gap:4px;color:currentColor;cursor:pointer;position:relative;outline-offset:-5px}.IconInlineFileRights-module_button__o5ZmR,.IconInlineFileRights-module_tooltip__2e1u8{transition:opacity .2s,visibility .2s}.IconInlineFileRights-module_fadedOut__3A7WF .IconInlineFileRights-module_button__o5ZmR{opacity:.6}.IconInlineFileRights-module_wrapper__2kQK_:active .IconInlineFileRights-module_button__o5ZmR,.IconInlineFileRights-module_wrapper__2kQK_:focus .IconInlineFileRights-module_button__o5ZmR,.IconInlineFileRights-module_wrapper__2kQK_:hover .IconInlineFileRights-module_button__o5ZmR{opacity:1}.IconInlineFileRights-module_button__o5ZmR svg{width:23px;height:23px}.IconInlineFileRights-module_button__o5ZmR .IconInlineFileRights-module_aiIcon__33otY{width:19px;height:19px}.IconInlineFileRights-module_standAlone__15788 .IconInlineFileRights-module_button__o5ZmR svg{filter:drop-shadow(0 1px 4px #000)}.IconInlineFileRights-module_tooltip__2e1u8{font-size:13.5555px;font-family:sans-serif;line-height:1.4;position:absolute;right:5px;background-color:rgba(17,17,17,.9);border-radius:3px;color:#fff;padding:8px;visibility:hidden;opacity:0;text-align:right;margin-left:10px;box-sizing:border-box;max-width:95%;z-index:1}.IconInlineFileRights-module_position-bottom__25azC .IconInlineFileRights-module_tooltip__2e1u8{bottom:38px}.IconInlineFileRights-module_position-top__rxJ3d .IconInlineFileRights-module_tooltip__2e1u8{top:38px}.IconInlineFileRights-module_tooltip__2e1u8:after{content:"";display:block;border:5px solid transparent;position:absolute;right:11px}.IconInlineFileRights-module_position-bottom__25azC .IconInlineFileRights-module_tooltip__2e1u8:after{border-top-color:rgba(17,17,17,.9);top:100%}.IconInlineFileRights-module_position-top__rxJ3d .IconInlineFileRights-module_tooltip__2e1u8:after{border-bottom-color:rgba(17,17,17,.9);bottom:100%}.IconInlineFileRights-module_tooltip__2e1u8 a{color:#fff;-webkit-text-decoration-color:hsla(0,0%,100%,.3);text-decoration-color:hsla(0,0%,100%,.3)}.IconInlineFileRights-module_tooltip__2e1u8 [data-part]{white-space:nowrap}.IconInlineFileRights-module_tooltip__2e1u8 [data-label]{color:hsla(0,0%,100%,.7)}.IconInlineFileRights-module_wrapper__2kQK_:focus-within .IconInlineFileRights-module_tooltip__2e1u8,.IconInlineFileRights-module_wrapper__2kQK_:hover .IconInlineFileRights-module_tooltip__2e1u8{visibility:visible;opacity:1}.IconInlineFileRights-module_scroller__1hT8t{overflow:auto;overflow-y:hidden;scrollbar-width:thin}.IconInlineFileRights-module_scroller__1hT8t::-webkit-scrollbar{height:12px}.IconInlineFileRights-module_scroller__1hT8t::-webkit-scrollbar-thumb{background-color:hsla(0,0%,100%,.9);border-radius:20px;border:3px solid rgba(17,17,17,.9)}

data/entry_types/scrolled/package/widgets/iconInlineFileRights.js

@@ -1,43 +1,76 @@
-import { ThemeIcon, frontend } from 'pageflow-scrolled/frontend';
+import { useDarkBackground, AiIndicatorIcon, ThemeIcon, frontend } from 'pageflow-scrolled/frontend';
 import React from 'react';
 import classNames from 'classnames';
 
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
-var styles = {"standAlone":"IconInlineFileRights-module_standAlone__15788","position-top":"IconInlineFileRights-module_position-top__rxJ3d","position-bottom":"IconInlineFileRights-module_position-bottom__25azC","button":"IconInlineFileRights-module_button__o5ZmR","tooltip":"IconInlineFileRights-module_tooltip__2e1u8","fadedOut":"IconInlineFileRights-module_fadedOut__3A7WF","wrapper":"IconInlineFileRights-module_wrapper__2kQK_","scroller":"IconInlineFileRights-module_scroller__1hT8t"};
+var styles = {"darkContentSurfaceColor":"var(--theme-dark-content-surface-color, #101010)","lightContentSurfaceColor":"var(--theme-light-content-surface-color, #fff)","contentColorScope":"colors-module_contentColorScope__1Nxn3","wrapper":"IconInlineFileRights-module_wrapper__2kQK_ colors-module_contentColorScope__1Nxn3","onLightBackground":"IconInlineFileRights-module_onLightBackground__GTXJd","button":"IconInlineFileRights-module_button__o5ZmR","standAlone":"IconInlineFileRights-module_standAlone__15788","position-top":"IconInlineFileRights-module_position-top__rxJ3d","position-bottom":"IconInlineFileRights-module_position-bottom__25azC","tooltip":"IconInlineFileRights-module_tooltip__2e1u8","fadedOut":"IconInlineFileRights-module_fadedOut__3A7WF","aiIcon":"IconInlineFileRights-module_aiIcon__33otY","scroller":"IconInlineFileRights-module_scroller__1hT8t"};
 
-function IconInlineFileRights(_ref) {
-  var context = _ref.context,
-    position = _ref.position,
-    playerControlsStandAlone = _ref.playerControlsStandAlone,
-    playerControlsFadedOut = _ref.playerControlsFadedOut,
-    children = _ref.children;
+var _jsxFileName = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/widgets/iconInlineFileRights/IconInlineFileRights.js";
+function IconInlineFileRights({
+  context,
+  position,
+  playerControlsStandAlone,
+  playerControlsFadedOut,
+  hasRights,
+  hasAiIndicators,
+  children
+}) {
+  const darkBackground = useDarkBackground();
   if (context === 'afterElement') {
     return null;
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles.wrapper, styles["position-".concat(position || 'bottom')], _defineProperty(_defineProperty({}, styles.fadedOut, context !== 'playerControls' || playerControlsFadedOut), styles.standAlone, context !== 'playerControls'))
+    className: classNames(styles.wrapper, styles[`position-${position || 'bottom'}`], {
+      [styles.fadedOut]: context !== 'playerControls' || playerControlsFadedOut,
+      [styles.standAlone]: context !== 'playerControls',
+      [styles.onLightBackground]: context === 'playerControls' && playerControlsStandAlone && !darkBackground
+    }),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 19,
+      columnNumber: 5
+    }
   }, /*#__PURE__*/React.createElement("button", {
-    className: styles.button
-  }, /*#__PURE__*/React.createElement(ThemeIcon, {
-    name: "copyright"
+    className: styles.button,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 26,
+      columnNumber: 7
+    }
+  }, hasAiIndicators && /*#__PURE__*/React.createElement(AiIndicatorIcon, {
+    kind: "ai",
+    className: styles.aiIcon,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 27,
+      columnNumber: 29
+    }
+  }), hasRights && /*#__PURE__*/React.createElement(ThemeIcon, {
+    name: "copyright",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 28,
+      columnNumber: 23
+    }
   })), /*#__PURE__*/React.createElement("div", {
-    className: styles.tooltip
+    className: styles.tooltip,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 30,
+      columnNumber: 7
+    }
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles.scroller
+    className: styles.scroller,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 31,
+      columnNumber: 9
+    }
   }, children)));
 }
 

data/entry_types/scrolled/package/widgets/iconScrollIndicator.js

@@ -4,12 +4,14 @@ import classNames from 'classnames';
 
 var styles = {"indicator":"IconScrollIndicator-module_indicator__2sC27","size-large":"IconScrollIndicator-module_size-large__Ym7cB","align-center":"IconScrollIndicator-module_align-center__3zoez","align-left":"IconScrollIndicator-module_align-left__3kHWt","align-right":"IconScrollIndicator-module_align-right__3TvRM","animation-smallBounce":"IconScrollIndicator-module_animation-smallBounce__2SngV","animation-largeBounce":"IconScrollIndicator-module_animation-largeBounce__LVzn_","bounce":"IconScrollIndicator-module_bounce__IrI-f"};
 
-function IconScrollIndicator(_ref) {
-  var configuration = _ref.configuration,
-    sectionLayout = _ref.sectionLayout;
-  var ref = useRef();
-  useEffect(function () {
-    var animation = ref.current.animate({
+var _jsxFileName = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/widgets/iconScrollIndicator/IconScrollIndicator.js";
+function IconScrollIndicator({
+  configuration,
+  sectionLayout
+}) {
+  const ref = useRef();
+  useEffect(() => {
+    const animation = ref.current.animate({
       opacity: ['100%', '0%'],
       visibility: ['visible', 'hidden']
     }, {
@@ -20,17 +22,34 @@ function IconScrollIndicator(_ref) {
       rangeStart: 'exit-crossing 0%',
       rangeEnd: 'exit-crossing 100px'
     });
-    return function () {
-      return animation.cancel();
-    };
+    return () => animation.cancel();
   }, []);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles.indicator, styles["animation-".concat(configuration.animation || 'smallBounce')], styles["size-".concat(configuration.size)], styles["align-".concat(getAlignment(configuration, sectionLayout))]),
-    ref: ref
-  }, /*#__PURE__*/React.createElement(WidgetSelectionRect, null, /*#__PURE__*/React.createElement(ThemeIcon, {
+    className: classNames(styles.indicator, styles[`animation-${configuration.animation || 'smallBounce'}`], styles[`size-${configuration.size}`], styles[`align-${getAlignment(configuration, sectionLayout)}`]),
+    ref: ref,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 34,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement(WidgetSelectionRect, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 39,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement(ThemeIcon, {
     name: "scrollDown",
     width: 30,
-    height: 30
+    height: 30,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 40,
+      columnNumber: 9
+    }
   })));
 }
 function getAlignment(configuration, sectionLayout) {

data/entry_types/scrolled/package/widgets/mainStorylineSheet.css

@@ -1 +1 @@
-.MainStorylineSheet-module_inactive__1Ji-y{position:sticky;top:0;height:100vh;overflow:clip}.MainStorylineSheet-module_scaler__jscn7{position:relative;transition:filter .3s ease,transform .3s ease;transform-origin:center calc(var(--previous-scroll-y) + 100vh)}.MainStorylineSheet-module_inactive__1Ji-y>.MainStorylineSheet-module_scaler__jscn7{filter:blur(2px);top:calc(var(--previous-scroll-y)*-1)}@media (max-width:480px){.MainStorylineSheet-module_inactive__1Ji-y>.MainStorylineSheet-module_scaler__jscn7{transform:scale(.94)}}@media (min-width:481px) and (max-width:768px){.MainStorylineSheet-module_inactive__1Ji-y>.MainStorylineSheet-module_scaler__jscn7{transform:scale(.95)}}@media (min-width:769px) and (max-width:1024px){.MainStorylineSheet-module_inactive__1Ji-y>.MainStorylineSheet-module_scaler__jscn7{transform:scale(.96)}}@media (min-width:1025px) and (max-width:1440px){.MainStorylineSheet-module_inactive__1Ji-y>.MainStorylineSheet-module_scaler__jscn7{transform:scale(.97)}}@media (min-width:1441px) and (max-width:1920px){.MainStorylineSheet-module_inactive__1Ji-y>.MainStorylineSheet-module_scaler__jscn7{transform:scale(.98)}}@media (min-width:1921px){.MainStorylineSheet-module_inactive__1Ji-y>.MainStorylineSheet-module_scaler__jscn7{transform:scale(.99)}}
+.MainStorylineSheet-module_inactive__1Ji-y{position:sticky;top:0;height:100vh;overflow:clip}.MainStorylineSheet-module_scaler__jscn7{position:relative;transform-origin:center calc(var(--previous-scroll-y) + 100vh)}@media (prefers-reduced-motion:no-preference){.MainStorylineSheet-module_scaler__jscn7{transition:filter .3s ease,transform .3s ease}}.MainStorylineSheet-module_inactive__1Ji-y>.MainStorylineSheet-module_scaler__jscn7{filter:blur(2px);top:calc(var(--previous-scroll-y)*-1)}.MainStorylineSheet-module_fixedPositioningContainingBlock__3Pz_y{--fixed-positioning-containing-block-offset:var(--previous-scroll-y)}@media (max-width:480px){.MainStorylineSheet-module_inactive__1Ji-y>.MainStorylineSheet-module_scaler__jscn7{transform:scale(.94)}}@media (min-width:481px) and (max-width:768px){.MainStorylineSheet-module_inactive__1Ji-y>.MainStorylineSheet-module_scaler__jscn7{transform:scale(.95)}}@media (min-width:769px) and (max-width:1024px){.MainStorylineSheet-module_inactive__1Ji-y>.MainStorylineSheet-module_scaler__jscn7{transform:scale(.96)}}@media (min-width:1025px) and (max-width:1440px){.MainStorylineSheet-module_inactive__1Ji-y>.MainStorylineSheet-module_scaler__jscn7{transform:scale(.97)}}@media (min-width:1441px) and (max-width:1920px){.MainStorylineSheet-module_inactive__1Ji-y>.MainStorylineSheet-module_scaler__jscn7{transform:scale(.98)}}@media (min-width:1921px){.MainStorylineSheet-module_inactive__1Ji-y>.MainStorylineSheet-module_scaler__jscn7{transform:scale(.99)}}