@algoux/standard-ranklist-renderer-component-solid 0.5.0

package/dist/index.js

@@ -0,0 +1,1047 @@
+import "@algoux/standard-ranklist-renderer-component-styles";
+import { delegateEvents, createComponent, use, insert, setAttribute, effect, className, style, template, memo, setStyleProperty, mergeProps } from "solid-js/web";
+import { SRK_ANIMATED_MODAL_ROOT_CLASS, ensureModalInteractionTracker, unregisterModalFocusScope, resolveModalTransformOrigin, MODAL_ANIMATION_DURATION_MS, lockModalBodyScroll, unlockModalBodyScroll, registerModalFocusScope, getSolutionModalTitle, formatSolutionTimestamp, getSolutionResultMeta, getMarkerPresentation, resolveSrkAssetUrl, getProgressMaxAvailableMinutes, getProgressDurationMinutes, isProgressEnded, getProgressMetrics, caniuse, srkSupportedVersions, getProblemHeaderBackgroundImage, shouldShowTimeColumn, captureModalTriggerPointFromMouseEvent, getAcceptedStatusDetails } from "@algoux/standard-ranklist-renderer-component-core";
+import { createUniqueId, createSignal, createMemo, onMount, createEffect, onCleanup, on, untrack, Show, For } from "solid-js";
+import { resolveText, resolveUserMarkers, EnumTheme, secToTimeStr, formatTimeDuration, numberToAlphabet, resolveStyle } from "@algoux/standard-ranklist-utils";
+var _tmpl$$4 = /* @__PURE__ */ template(`<div class=srk-modal-header><div class=srk-modal-title>`), _tmpl$2$4 = /* @__PURE__ */ template(`<div><div class=srk-modal-mask></div><div tabindex=-1><div aria-modal=true class=srk-modal data-srk-modal-panel=true role=dialog tabindex=-1><div class=srk-modal-content><button aria-label=Close class=srk-modal-close type=button><span class=srk-modal-close-x></span></button><div class=srk-modal-body>`);
+function classNames(...values) {
+  return values.filter(Boolean).join(" ");
+}
+function Modal(props) {
+  const titleId = createUniqueId();
+  const destroyOnClose = () => {
+    var _a;
+    return (_a = props.destroyOnClose) != null ? _a : true;
+  };
+  const closeOnEsc = () => {
+    var _a;
+    return (_a = props.closeOnEsc) != null ? _a : true;
+  };
+  const closeOnMaskClick = () => {
+    var _a;
+    return (_a = props.closeOnMaskClick) != null ? _a : true;
+  };
+  const [isMounted, setIsMounted] = createSignal(props.open || !destroyOnClose());
+  const [animationState, setAnimationState] = createSignal(props.open ? "pre-open" : "closing");
+  const [transformOrigin, setTransformOrigin] = createSignal({
+    x: 0,
+    y: 0
+  });
+  let rootRef;
+  let dialogRef;
+  let closeTimer = null;
+  let openTimer = null;
+  let bodyLocked = false;
+  let focusScopeId = null;
+  let pendingFocusRegistration = false;
+  const shouldRender = createMemo(() => props.open || isMounted() || !destroyOnClose());
+  const shouldLockBody = createMemo(() => props.open || destroyOnClose() && isMounted());
+  const rootClassName = createMemo(() => classNames("srk-modal-root", SRK_ANIMATED_MODAL_ROOT_CLASS, props.rootClassName));
+  const baseDialogStyle = createMemo(() => {
+    var _a, _b;
+    return {
+      ...props.style,
+      width: props.width ? `${props.width}px` : (_a = props.style) == null ? void 0 : _a.width,
+      maxWidth: (_b = props.style) == null ? void 0 : _b.maxWidth
+    };
+  });
+  const clearTimers = () => {
+    if (closeTimer !== null) {
+      window.clearTimeout(closeTimer);
+      closeTimer = null;
+    }
+    if (openTimer !== null) {
+      window.clearTimeout(openTimer);
+      openTimer = null;
+    }
+  };
+  function handleEscape(event) {
+    var _a;
+    if (props.open && closeOnEsc()) {
+      (_a = props.onClose) == null ? void 0 : _a.call(props, event, "escape");
+    }
+  }
+  const registerFocusScope = () => {
+    if (!props.open || !dialogRef || focusScopeId !== null) {
+      return;
+    }
+    if (!dialogRef.isConnected) {
+      if (!pendingFocusRegistration) {
+        pendingFocusRegistration = true;
+        queueMicrotask(() => {
+          pendingFocusRegistration = false;
+          registerFocusScope();
+        });
+      }
+      return;
+    }
+    focusScopeId = registerModalFocusScope(dialogRef, {
+      onEscape: handleEscape
+    });
+  };
+  onMount(() => {
+    registerFocusScope();
+  });
+  createEffect(() => {
+    ensureModalInteractionTracker();
+  });
+  onCleanup(() => {
+    clearTimers();
+    unregisterModalFocusScope(focusScopeId);
+    focusScopeId = null;
+  });
+  createEffect(on(() => props.open, (open) => {
+    const destroy = destroyOnClose();
+    clearTimers();
+    if (open) {
+      setIsMounted(true);
+      setTransformOrigin({
+        x: 0,
+        y: 0
+      });
+      setAnimationState("pre-open");
+      if (typeof window !== "undefined") {
+        openTimer = window.setTimeout(() => {
+          if (!props.open || animationState() !== "pre-open") {
+            openTimer = null;
+            return;
+          }
+          const resolution = resolveModalTransformOrigin(dialogRef || null);
+          setTransformOrigin(resolution.origin);
+          setAnimationState("opening");
+          openTimer = null;
+        }, 0);
+      }
+      return;
+    }
+    if (focusScopeId !== null) {
+      unregisterModalFocusScope(focusScopeId);
+      focusScopeId = null;
+    }
+    setAnimationState("closing");
+    if (!destroy) {
+      setIsMounted(true);
+      return;
+    }
+    if (untrack(isMounted) && typeof window !== "undefined") {
+      closeTimer = window.setTimeout(() => {
+        if (bodyLocked) {
+          unlockModalBodyScroll();
+          bodyLocked = false;
+        }
+        rootRef == null ? void 0 : rootRef.remove();
+        setIsMounted(false);
+        closeTimer = null;
+      }, MODAL_ANIMATION_DURATION_MS);
+    }
+  }, {
+    defer: false
+  }));
+  createEffect(on(shouldLockBody, (lock) => {
+    if (lock && !bodyLocked) {
+      lockModalBodyScroll();
+      bodyLocked = true;
+      return;
+    }
+    if (!lock && bodyLocked) {
+      unlockModalBodyScroll();
+      bodyLocked = false;
+      return;
+    }
+  }, {
+    defer: false
+  }));
+  onCleanup(() => {
+    if (bodyLocked) {
+      unlockModalBodyScroll();
+      bodyLocked = false;
+    }
+    unregisterModalFocusScope(focusScopeId);
+    focusScopeId = null;
+  });
+  createEffect(() => {
+    if (props.open && shouldRender()) {
+      registerFocusScope();
+    }
+  });
+  createEffect(() => {
+    var _a;
+    const width = props.width ? `${props.width}px` : typeof ((_a = props.style) == null ? void 0 : _a.width) === "string" ? props.style.width : null;
+    const originX = `${transformOrigin().x}px`;
+    const originY = `${transformOrigin().y}px`;
+    const state = animationState();
+    const root = rootRef;
+    const dialog = dialogRef;
+    if (root) {
+      root.setAttribute("data-srk-modal-state", state);
+    }
+    if (!dialog) {
+      return;
+    }
+    if (width) {
+      dialog.style.width = width;
+      dialog.style.setProperty("--srk-modal-max-width", width);
+    } else {
+      dialog.style.removeProperty("width");
+      dialog.style.removeProperty("--srk-modal-max-width");
+    }
+    dialog.style.setProperty("--srk-modal-origin-x", originX);
+    dialog.style.setProperty("--srk-modal-origin-y", originY);
+  });
+  const content = () => (() => {
+    var _el$ = _tmpl$2$4(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$9 = _el$6.nextSibling;
+    var _ref$ = rootRef;
+    typeof _ref$ === "function" ? use(_ref$, _el$) : rootRef = _el$;
+    _el$3.$$mousedown = (event) => {
+      var _a;
+      if (closeOnMaskClick() && event.target === event.currentTarget) {
+        (_a = props.onClose) == null ? void 0 : _a.call(props, event, "mask");
+      }
+    };
+    use((element) => {
+      dialogRef = element;
+      registerFocusScope();
+    }, _el$4);
+    _el$6.$$click = (event) => {
+      var _a;
+      return (_a = props.onClose) == null ? void 0 : _a.call(props, event, "close-button");
+    };
+    insert(_el$5, createComponent(Show, {
+      get when() {
+        return props.title !== void 0;
+      },
+      get children() {
+        var _el$7 = _tmpl$$4(), _el$8 = _el$7.firstChild;
+        setAttribute(_el$8, "id", titleId);
+        insert(_el$8, () => props.title);
+        return _el$7;
+      }
+    }), _el$9);
+    insert(_el$9, () => props.children);
+    effect((_p$) => {
+      var _v$ = rootClassName(), _v$2 = animationState(), _v$3 = classNames("srk-modal-wrap", props.wrapClassName), _v$4 = props.title !== void 0 ? titleId : void 0, _v$5 = baseDialogStyle();
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && setAttribute(_el$, "data-srk-modal-state", _p$.t = _v$2);
+      _v$3 !== _p$.a && className(_el$3, _p$.a = _v$3);
+      _v$4 !== _p$.o && setAttribute(_el$4, "aria-labelledby", _p$.o = _v$4);
+      _p$.i = style(_el$4, _v$5, _p$.i);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0
+    });
+    return _el$;
+  })();
+  return createComponent(Show, {
+    get when() {
+      return shouldRender();
+    },
+    children: content
+  });
+}
+delegateEvents(["mousedown", "click"]);
+var _tmpl$$3 = /* @__PURE__ */ template(`<table class="srk-common-table srk-solutions-table"><thead><tr><th class=srk--text-left>Result</th><th class=srk--text-right>Time</th></tr></thead><tbody>`), _tmpl$2$3 = /* @__PURE__ */ template(`<tr><td><span></span></td><td class=srk--text-right>`);
+function DefaultSolutionModal(props) {
+  const [cachedPayload, setCachedPayload] = createSignal(props.user ? {
+    user: props.user,
+    problem: props.problem,
+    problemIndex: props.problemIndex,
+    solutions: props.solutions || []
+  } : null);
+  createEffect(() => {
+    if (props.user) {
+      setCachedPayload({
+        user: props.user,
+        problem: props.problem,
+        problemIndex: props.problemIndex,
+        solutions: props.solutions || []
+      });
+    }
+  });
+  return createComponent(Show, {
+    get when() {
+      return cachedPayload();
+    },
+    children: (payload) => createComponent(Modal, {
+      get open() {
+        return props.open;
+      },
+      get onClose() {
+        return props.onClose;
+      },
+      get rootClassName() {
+        return props.rootClassName || "srk-general-modal-root";
+      },
+      get style() {
+        return props.style;
+      },
+      get title() {
+        return props.title || getSolutionModalTitle(payload().problemIndex, payload().user);
+      },
+      get width() {
+        return props.width || 320;
+      },
+      get wrapClassName() {
+        return props.wrapClassName || "srk-solutions-modal";
+      },
+      get children() {
+        var _el$ = _tmpl$$3(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+        insert(_el$3, createComponent(For, {
+          get each() {
+            return payload().solutions;
+          },
+          children: (solution) => {
+            const meta = () => getSolutionResultMeta(solution.result);
+            return (() => {
+              var _el$4 = _tmpl$2$3(), _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$5.nextSibling;
+              insert(_el$6, () => meta().label);
+              insert(_el$7, () => formatSolutionTimestamp(solution));
+              effect(() => className(_el$6, `srk-solution-result-text ${meta().className || ""}`));
+              return _el$4;
+            })();
+          }
+        }));
+        return _el$;
+      }
+    })
+  });
+}
+var _tmpl$$2 = /* @__PURE__ */ template(`<div class=srk-user-modal-info-team-members>`), _tmpl$2$2 = /* @__PURE__ */ template(`<div class=srk-user-modal-info><h3 class=srk-user-modal-info-user-name></h3><div class=srk-user-modal-info-labels><span class="srk-user-modal-info-labels-label srk-user-modal-info-labels-label-preset-general">`), _tmpl$3$2 = /* @__PURE__ */ template(`<p class=srk-user-modal-info-user-second-name>`), _tmpl$4$2 = /* @__PURE__ */ template(`<span>`), _tmpl$5$2 = /* @__PURE__ */ template(`<span class=srk-user-modal-info-team-members-slash> / `), _tmpl$6$2 = /* @__PURE__ */ template(`<div class=srk-user-modal-info-photo><img alt="User portrait"class=srk-user-modal-info-photo-img>`);
+function DefaultUserModal(props) {
+  const [cachedUser, setCachedUser] = createSignal(props.user || null);
+  const theme = () => props.theme || EnumTheme.light;
+  const markers = () => props.markers || [];
+  const resolvedMarkers = (user) => resolveUserMarkers(user, markers()).map((marker) => ({
+    marker,
+    presentation: getMarkerPresentation(marker, theme())
+  }));
+  const formatAssetUrl = (url, field) => resolveSrkAssetUrl(url, field, props.formatSrkAssetUrl);
+  createEffect(() => {
+    if (props.user) {
+      setCachedUser(props.user);
+    }
+  });
+  return createComponent(Show, {
+    get when() {
+      return cachedUser();
+    },
+    children: (user) => createComponent(Modal, {
+      get open() {
+        return props.open;
+      },
+      get onClose() {
+        return props.onClose;
+      },
+      get rootClassName() {
+        return props.rootClassName || "srk-general-modal-root";
+      },
+      get style() {
+        return props.style;
+      },
+      get title() {
+        return props.title || "User Info";
+      },
+      get width() {
+        return props.width || 420;
+      },
+      get wrapClassName() {
+        return props.wrapClassName || "srk-user-modal";
+      },
+      get children() {
+        var _el$ = _tmpl$2$2(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild;
+        insert(_el$2, () => resolveText(user().name));
+        insert(_el$, createComponent(Show, {
+          get when() {
+            return user().organization;
+          },
+          children: (organization) => (() => {
+            var _el$6 = _tmpl$3$2();
+            insert(_el$6, () => resolveText(organization()));
+            return _el$6;
+          })()
+        }), _el$3);
+        insert(_el$4, () => user().official === false ? "\uFF0A \u975E\u6B63\u5F0F\u53C2\u52A0\u8005" : "\u6B63\u5F0F\u53C2\u52A0\u8005");
+        insert(_el$3, createComponent(For, {
+          get each() {
+            return resolvedMarkers(user());
+          },
+          children: (entry) => (() => {
+            var _el$7 = _tmpl$4$2();
+            insert(_el$7, () => resolveText(entry.marker.label));
+            effect((_p$) => {
+              var _v$ = `srk-user-modal-info-labels-label ${entry.presentation.className || ""}`, _v$2 = entry.presentation.style;
+              _v$ !== _p$.e && className(_el$7, _p$.e = _v$);
+              _p$.t = style(_el$7, _v$2, _p$.t);
+              return _p$;
+            }, {
+              e: void 0,
+              t: void 0
+            });
+            return _el$7;
+          })()
+        }), null);
+        insert(_el$, createComponent(Show, {
+          get when() {
+            var _a;
+            return (_a = user().teamMembers) == null ? void 0 : _a.length;
+          },
+          get children() {
+            var _el$5 = _tmpl$$2();
+            insert(_el$5, createComponent(For, {
+              get each() {
+                return user().teamMembers;
+              },
+              children: (member, index) => [createComponent(Show, {
+                get when() {
+                  return index() > 0;
+                },
+                get children() {
+                  return _tmpl$5$2();
+                }
+              }), (() => {
+                var _el$9 = _tmpl$4$2();
+                insert(_el$9, () => resolveText(member.name));
+                return _el$9;
+              })()]
+            }));
+            return _el$5;
+          }
+        }), null);
+        insert(_el$, createComponent(Show, {
+          get when() {
+            return user().photo;
+          },
+          children: (photo) => (() => {
+            var _el$10 = _tmpl$6$2(), _el$11 = _el$10.firstChild;
+            effect(() => setAttribute(_el$11, "src", formatAssetUrl(photo(), "user.photo")));
+            return _el$10;
+          })()
+        }), null);
+        return _el$;
+      }
+    })
+  });
+}
+var _tmpl$$1 = /* @__PURE__ */ template(`<div class=srk-progress-slider-tooltip>`), _tmpl$2$1 = /* @__PURE__ */ template(`<div class=srk-progress-slider-layer><input aria-label="Time Travel"class=srk-progress-slider min=0 step=1 type=range>`), _tmpl$3$1 = /* @__PURE__ */ template(`<div class=srk-progress-time-machine-status><div class=srk-progress-time-machine-text>Time Travel Mode`), _tmpl$4$1 = /* @__PURE__ */ template(`<div class=srk-progress-bar-container><div class=srk-progress-bar><div class=srk-progress-bar-body><div class="srk-progress-bar-segment srk-progress-bar-normal"><div class=srk-progress-bar-fill></div></div><div class="srk-progress-bar-segment srk-progress-bar-frozen"><div class=srk-progress-bar-fill></div></div></div></div><div class=srk-progress-secondary-area><div class=srk-progress-secondary-area-left>Elapsed: </div><div class=srk-progress-secondary-area-center></div><div class=srk-progress-secondary-area-right>Remaining: `), _tmpl$5$1 = /* @__PURE__ */ template(`<div class=srk-progress-live-text>Live`), _tmpl$6$1 = /* @__PURE__ */ template(`<div style=visibility:hidden>SRK`);
+const timeTravelKeys = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End", "PageUp", "PageDown"]);
+function ProgressBar(props) {
+  var _a, _b;
+  const [localTime, setLocalTime] = createSignal(Date.now());
+  const [inTimeMachine, setInTimeMachine] = createSignal(false);
+  const [timeTravelIsChanging, setTimeTravelIsChanging] = createSignal(false);
+  const [timeTravelCurrentValue, setTimeTravelCurrentValue] = createSignal(getProgressMaxAvailableMinutes(props.data.contest, localTime(), props.td));
+  const [timeTravelValue, setTimeTravelValue] = createSignal(null);
+  const [isMounted, setIsMounted] = createSignal(false);
+  let liveInterval;
+  let previousContestTitle = JSON.stringify((_b = (_a = props.data) == null ? void 0 : _a.contest) == null ? void 0 : _b.title);
+  const td = () => {
+    var _a2;
+    return (_a2 = props.td) != null ? _a2 : 0;
+  };
+  const durationMinutes = () => getProgressDurationMinutes(props.data.contest);
+  const maxAvailableMinutes = () => getProgressMaxAvailableMinutes(props.data.contest, localTime(), td());
+  const ended = () => isProgressEnded(props.data.contest, localTime(), td());
+  const progressMetrics = () => getProgressMetrics(props.data, localTime(), td(), timeTravelCurrentValue(), inTimeMachine());
+  const clearLiveInterval = () => {
+    if (liveInterval) {
+      window.clearInterval(liveInterval);
+      liveInterval = void 0;
+    }
+  };
+  const handleProgressTimer = () => {
+    setLocalTime(Date.now());
+    if (ended()) {
+      clearLiveInterval();
+    }
+  };
+  const handleTimeTravelChange = (value) => {
+    var _a2;
+    const exited = value >= durationMinutes() || value >= maxAvailableMinutes();
+    (_a2 = props.onTimeTravel) == null ? void 0 : _a2.call(props, exited ? null : value * 60 * 1e3);
+    setInTimeMachine(!exited);
+    setTimeTravelValue(exited ? null : value * 60 * 1e3);
+    setTimeTravelIsChanging(false);
+  };
+  const beginTimeTravel = () => {
+    setTimeTravelIsChanging(true);
+    setInTimeMachine(true);
+  };
+  const commitTimeTravel = () => {
+    if (timeTravelIsChanging()) {
+      handleTimeTravelChange(timeTravelCurrentValue());
+    }
+  };
+  const handleSliderKeyDown = (event) => {
+    if (timeTravelKeys.has(event.key)) {
+      beginTimeTravel();
+    }
+  };
+  const handleSliderKeyUp = (event) => {
+    if (timeTravelKeys.has(event.key)) {
+      commitTimeTravel();
+    }
+  };
+  createEffect(() => {
+    const maxValue = maxAvailableMinutes();
+    if (!timeTravelIsChanging() && timeTravelValue() === null && timeTravelCurrentValue() !== maxValue) {
+      setTimeTravelCurrentValue(maxValue);
+    }
+  });
+  createEffect(() => {
+    var _a2, _b2, _c;
+    const contestTitle = JSON.stringify((_b2 = (_a2 = props.data) == null ? void 0 : _a2.contest) == null ? void 0 : _b2.title);
+    if (contestTitle === previousContestTitle) {
+      return;
+    }
+    previousContestTitle = contestTitle;
+    setTimeTravelIsChanging(false);
+    setTimeTravelCurrentValue(maxAvailableMinutes());
+    setTimeTravelValue(null);
+    setInTimeMachine(false);
+    (_c = props.onTimeTravel) == null ? void 0 : _c.call(props, null);
+  });
+  createEffect(() => {
+    if (!props.live || typeof window === "undefined") {
+      clearLiveInterval();
+      return;
+    }
+    clearLiveInterval();
+    liveInterval = window.setInterval(handleProgressTimer, 1e3);
+    onCleanup(clearLiveInterval);
+  });
+  onMount(() => setIsMounted(true));
+  onCleanup(clearLiveInterval);
+  return (() => {
+    var _el$ = _tmpl$4$1(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$4.nextSibling, _el$7 = _el$6.firstChild, _el$11 = _el$2.nextSibling, _el$12 = _el$11.firstChild;
+    _el$12.firstChild;
+    var _el$14 = _el$12.nextSibling, _el$16 = _el$14.nextSibling;
+    _el$16.firstChild;
+    insert(_el$2, createComponent(Show, {
+      get when() {
+        return memo(() => !!(props.enableTimeTravel && progressMetrics().supportRegen))() && isMounted();
+      },
+      get children() {
+        var _el$8 = _tmpl$2$1(), _el$10 = _el$8.firstChild;
+        insert(_el$8, createComponent(Show, {
+          get when() {
+            return timeTravelIsChanging();
+          },
+          get children() {
+            var _el$9 = _tmpl$$1();
+            insert(_el$9, () => secToTimeStr(timeTravelCurrentValue() * 60));
+            effect((_$p) => setStyleProperty(_el$9, "left", `${durationMinutes() ? timeTravelCurrentValue() / durationMinutes() * 100 : 0}%`));
+            return _el$9;
+          }
+        }), _el$10);
+        _el$10.$$touchstart = beginTimeTravel;
+        _el$10.$$touchend = commitTimeTravel;
+        _el$10.$$mouseup = commitTimeTravel;
+        _el$10.$$mousedown = beginTimeTravel;
+        _el$10.$$keyup = handleSliderKeyUp;
+        _el$10.$$keydown = handleSliderKeyDown;
+        _el$10.$$input = (event) => setTimeTravelCurrentValue(Number(event.currentTarget.value));
+        _el$10.addEventListener("blur", () => {
+          if (timeTravelIsChanging()) {
+            commitTimeTravel();
+          }
+        });
+        effect((_p$) => {
+          var _v$ = durationMinutes(), _v$2 = secToTimeStr(timeTravelCurrentValue() * 60);
+          _v$ !== _p$.e && setAttribute(_el$10, "max", _p$.e = _v$);
+          _v$2 !== _p$.t && setAttribute(_el$10, "title", _p$.t = _v$2);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        effect(() => _el$10.value = timeTravelCurrentValue());
+        return _el$8;
+      }
+    }), null);
+    insert(_el$12, () => secToTimeStr(Math.round(progressMetrics().elapsed / 1e3)), null);
+    insert(_el$14, createComponent(Show, {
+      get when() {
+        return inTimeMachine();
+      },
+      get fallback() {
+        return memo(() => !!(props.live && !ended()))() ? _tmpl$5$1() : _tmpl$6$1();
+      },
+      get children() {
+        return _tmpl$3$1();
+      }
+    }));
+    insert(_el$16, () => secToTimeStr(Math.round(progressMetrics().remaining / 1e3)), null);
+    effect((_p$) => {
+      var _v$3 = `${progressMetrics().frozenBreakpoint * 100}%`, _v$4 = `${progressMetrics().normalInnerPercent}%`, _v$5 = `${(1 - progressMetrics().frozenBreakpoint) * 100}%`, _v$6 = `${progressMetrics().frozenInnerPercent}%`, _v$7 = props.live || inTimeMachine() ? {} : {
+        display: "none"
+      }, _v$8 = props.live || inTimeMachine() ? {} : {
+        display: "none"
+      };
+      _v$3 !== _p$.e && setStyleProperty(_el$4, "width", _p$.e = _v$3);
+      _v$4 !== _p$.t && setStyleProperty(_el$5, "width", _p$.t = _v$4);
+      _v$5 !== _p$.a && setStyleProperty(_el$6, "width", _p$.a = _v$5);
+      _v$6 !== _p$.o && setStyleProperty(_el$7, "width", _p$.o = _v$6);
+      _p$.i = style(_el$12, _v$7, _p$.i);
+      _p$.n = style(_el$16, _v$8, _p$.n);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0
+    });
+    return _el$;
+  })();
+}
+delegateEvents(["input", "keydown", "keyup", "mousedown", "mouseup", "touchend", "touchstart"]);
+var _tmpl$ = /* @__PURE__ */ template(`<th class=srk--nowrap>Time`), _tmpl$2 = /* @__PURE__ */ template(`<div class="srk-common-table srk-main"><table><thead><tr><th class="srk--text-left srk--nowrap">Name</th><th class=srk--nowrap>Score</th></tr></thead><tbody>`), _tmpl$3 = /* @__PURE__ */ template(`<div>srk type "<!>" is not supported`), _tmpl$4 = /* @__PURE__ */ template(`<div>srk version "<!>" is not supported (current supported: <!>)`), _tmpl$5 = /* @__PURE__ */ template(`<th class="srk-series-header srk--text-right srk--nowrap">`), _tmpl$6 = /* @__PURE__ */ template(`<th class="srk--nowrap srk-problem-header">`), _tmpl$7 = /* @__PURE__ */ template(`<a target=_blank rel="noopener noreferrer"style=color:unset>`), _tmpl$8 = /* @__PURE__ */ template(`<td class="srk--text-right srk--nowrap">`), _tmpl$9 = /* @__PURE__ */ template(`<tr><td class="srk--text-right srk--nowrap">`), _tmpl$10 = /* @__PURE__ */ template(`<td>`), _tmpl$11 = /* @__PURE__ */ template(`<td class="srk--text-left srk--nowrap srk-user-cell"><div class=srk-user-cell-content><div class=srk-user-body><div class=srk-user-name-row><span class=srk-user-name-text></span><span class=srk-marker-dot-group>`), _tmpl$12 = /* @__PURE__ */ template(`<div class=srk-user-avatar><img alt="User Avatar">`), _tmpl$13 = /* @__PURE__ */ template(`<span>`), _tmpl$14 = /* @__PURE__ */ template(`<p class="srk-user-secondary-text srk--text-ellipsis"title>`), _tmpl$15 = /* @__PURE__ */ template(`<span class=srk--display-block>`), _tmpl$16 = /* @__PURE__ */ template(`<span class="srk--display-block srk-problem-stats">`), _tmpl$17 = /* @__PURE__ */ template(`<td class="srk-prest-status-block srk--text-center srk--nowrap srk-prest-status-block-fb">`), _tmpl$18 = /* @__PURE__ */ template(`<td class="srk-prest-status-block srk--text-center srk--nowrap srk-prest-status-block-accepted">`), _tmpl$19 = /* @__PURE__ */ template(`<td class="srk-prest-status-block srk--text-center srk--nowrap srk-prest-status-block-frozen">`), _tmpl$20 = /* @__PURE__ */ template(`<td class="srk-prest-status-block srk--text-center srk--nowrap srk-prest-status-block-failed">`), _tmpl$21 = /* @__PURE__ */ template(`<span class=srk-prest-status-block-score>`), _tmpl$22 = /* @__PURE__ */ template(`<span class=srk-prest-status-block-score-details>`);
+function Ranklist(props) {
+  const theme = () => props.theme || EnumTheme.light;
+  const showTimeColumn = () => shouldShowTimeColumn(props.data.rows);
+  const formatAssetUrl = (url, field) => resolveSrkAssetUrl(url, field, props.formatSrkAssetUrl);
+  const emitUserClick = (event, row, rowIndex) => {
+    var _a;
+    if (event) {
+      captureModalTriggerPointFromMouseEvent(event, {
+        source: "user-cell",
+        context: {
+          rowIndex,
+          userId: row.user.id || null,
+          userName: resolveText(row.user.name)
+        }
+      });
+    }
+    (_a = props.onUserClick) == null ? void 0 : _a.call(props, {
+      user: row.user,
+      row,
+      rowIndex,
+      ranklist: props.data
+    });
+  };
+  const buildSolutionPayload = (row, rowIndex, status, problemIndex) => ({
+    user: row.user,
+    row,
+    rowIndex,
+    problemIndex,
+    problem: props.data.problems[problemIndex],
+    status,
+    solutions: getStatusSolutions(status),
+    ranklist: props.data
+  });
+  const emitSolutionClick = (event, row, rowIndex, status, problemIndex) => {
+    var _a, _b;
+    const payload = buildSolutionPayload(row, rowIndex, status, problemIndex);
+    if (!payload.solutions.length) {
+      return;
+    }
+    if (event) {
+      captureModalTriggerPointFromMouseEvent(event, {
+        source: "status-cell",
+        context: {
+          rowIndex,
+          problemIndex,
+          problemAlias: ((_a = payload.problem) == null ? void 0 : _a.alias) || null,
+          problemTitle: payload.problem ? resolveText(payload.problem.title) : null,
+          userId: row.user.id || null
+        }
+      });
+    }
+    (_b = props.onSolutionClick) == null ? void 0 : _b.call(props, payload);
+  };
+  return createComponent(Show, {
+    get when() {
+      return props.data.type === "general";
+    },
+    get fallback() {
+      return (() => {
+        var _el$9 = _tmpl$3(), _el$10 = _el$9.firstChild, _el$12 = _el$10.nextSibling;
+        _el$12.nextSibling;
+        insert(_el$9, () => props.data.type, _el$12);
+        return _el$9;
+      })();
+    },
+    get children() {
+      return createComponent(Show, {
+        get when() {
+          return caniuse(props.data.version);
+        },
+        get fallback() {
+          return (() => {
+            var _el$13 = _tmpl$4(), _el$14 = _el$13.firstChild, _el$17 = _el$14.nextSibling, _el$15 = _el$17.nextSibling, _el$18 = _el$15.nextSibling;
+            _el$18.nextSibling;
+            insert(_el$13, () => props.data.version, _el$17);
+            insert(_el$13, srkSupportedVersions, _el$18);
+            return _el$13;
+          })();
+        },
+        get children() {
+          var _el$ = _tmpl$2(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild;
+          _el$5.nextSibling;
+          var _el$8 = _el$3.nextSibling;
+          insert(_el$4, createComponent(For, {
+            get each() {
+              return props.data.series;
+            },
+            children: (series) => (() => {
+              var _el$19 = _tmpl$5();
+              insert(_el$19, () => series.title);
+              return _el$19;
+            })()
+          }), _el$5);
+          insert(_el$4, createComponent(Show, {
+            get when() {
+              return showTimeColumn();
+            },
+            get children() {
+              return _tmpl$();
+            }
+          }), null);
+          insert(_el$4, createComponent(For, {
+            get each() {
+              return props.data.problems;
+            },
+            children: (problem, problemIndex) => {
+              var _a;
+              const ProblemHeaderCellPart = (_a = props.parts) == null ? void 0 : _a.problemHeaderCell;
+              const index = problemIndex();
+              return ProblemHeaderCellPart ? createComponent(ProblemHeaderCellPart, {
+                problem,
+                problemIndex: index,
+                index,
+                get theme() {
+                  return theme();
+                }
+              }) : (() => {
+                var _el$20 = _tmpl$6();
+                insert(_el$20, createComponent(Show, {
+                  get when() {
+                    return problem.link;
+                  },
+                  get fallback() {
+                    return createComponent(ProblemHeaderBody, {
+                      problem,
+                      index
+                    });
+                  },
+                  children: (link) => (() => {
+                    var _el$21 = _tmpl$7();
+                    insert(_el$21, createComponent(ProblemHeaderBody, {
+                      problem,
+                      index
+                    }));
+                    effect(() => setAttribute(_el$21, "href", link()));
+                    return _el$21;
+                  })()
+                }));
+                effect((_$p) => setStyleProperty(_el$20, "background-image", getProblemHeaderBackgroundImage(problem.style, theme())));
+                return _el$20;
+              })();
+            }
+          }), null);
+          insert(_el$8, createComponent(For, {
+            get each() {
+              return props.data.rows;
+            },
+            children: (row, rowIndex) => (() => {
+              var _el$22 = _tmpl$9(), _el$23 = _el$22.firstChild;
+              insert(_el$22, createComponent(For, {
+                get each() {
+                  return getRankValues(row, props.data.series);
+                },
+                children: (rankValue, seriesIndex) => (() => {
+                  var _el$25 = _tmpl$10();
+                  insert(_el$25, () => getRankText(rankValue, row));
+                  effect((_p$) => {
+                    var _v$3 = `srk--text-right srk--nowrap ${getSeriesSegmentClass(rankValue, props.data.series[seriesIndex()])}`, _v$4 = getSeriesSegmentStyle(rankValue, props.data.series[seriesIndex()], theme());
+                    _v$3 !== _p$.e && className(_el$25, _p$.e = _v$3);
+                    _p$.t = style(_el$25, _v$4, _p$.t);
+                    return _p$;
+                  }, {
+                    e: void 0,
+                    t: void 0
+                  });
+                  return _el$25;
+                })()
+              }), _el$23);
+              insert(_el$22, () => {
+                var _a;
+                const UserCellPart = (_a = props.parts) == null ? void 0 : _a.userCell;
+                return UserCellPart ? createComponent(UserCellPart, {
+                  get user() {
+                    return row.user;
+                  },
+                  row,
+                  get rowIndex() {
+                    return rowIndex();
+                  },
+                  get ranklist() {
+                    return props.data;
+                  },
+                  get markers() {
+                    return props.data.markers;
+                  },
+                  get theme() {
+                    return theme();
+                  },
+                  onClick: (event) => emitUserClick(event, row, rowIndex())
+                }) : (() => {
+                  var _el$26 = _tmpl$11(), _el$27 = _el$26.firstChild, _el$28 = _el$27.firstChild, _el$29 = _el$28.firstChild, _el$30 = _el$29.firstChild, _el$31 = _el$30.nextSibling;
+                  _el$26.$$click = (event) => {
+                    event.preventDefault();
+                    emitUserClick(event, row, rowIndex());
+                  };
+                  insert(_el$27, createComponent(Show, {
+                    get when() {
+                      return row.user.avatar;
+                    },
+                    children: (avatar) => (() => {
+                      var _el$32 = _tmpl$12(), _el$33 = _el$32.firstChild;
+                      effect(() => setAttribute(_el$33, "src", formatAssetUrl(avatar(), "user.avatar")));
+                      return _el$32;
+                    })()
+                  }), _el$28);
+                  insert(_el$30, () => resolveText(row.user.name));
+                  insert(_el$31, createComponent(For, {
+                    get each() {
+                      return getResolvedUserMarkers(row.user, props.data.markers, theme());
+                    },
+                    children: (entry) => (() => {
+                      var _el$34 = _tmpl$13();
+                      effect((_p$) => {
+                        var _v$7 = `srk-marker srk-marker-dot srk--c-tooltip ${entry.presentation.className || ""}`, _v$8 = getMarkerStyle(entry.presentation.style), _v$9 = resolveText(entry.marker.label);
+                        _v$7 !== _p$.e && className(_el$34, _p$.e = _v$7);
+                        _p$.t = style(_el$34, _v$8, _p$.t);
+                        _v$9 !== _p$.a && setAttribute(_el$34, "data-tooltip", _p$.a = _v$9);
+                        return _p$;
+                      }, {
+                        e: void 0,
+                        t: void 0,
+                        a: void 0
+                      });
+                      return _el$34;
+                    })()
+                  }));
+                  insert(_el$28, createComponent(Show, {
+                    get when() {
+                      return row.user.organization;
+                    },
+                    children: (organization) => (() => {
+                      var _el$35 = _tmpl$14();
+                      insert(_el$35, () => resolveText(organization()));
+                      return _el$35;
+                    })()
+                  }), null);
+                  effect((_p$) => {
+                    var _v$5 = !!props.onUserClick, _v$6 = resolveText(row.user.name);
+                    _v$5 !== _p$.e && _el$26.classList.toggle("srk--cursor-pointer", _p$.e = _v$5);
+                    _v$6 !== _p$.t && setAttribute(_el$30, "title", _p$.t = _v$6);
+                    return _p$;
+                  }, {
+                    e: void 0,
+                    t: void 0
+                  });
+                  return _el$26;
+                })();
+              }, _el$23);
+              insert(_el$23, () => row.score.value);
+              insert(_el$22, createComponent(Show, {
+                get when() {
+                  return showTimeColumn();
+                },
+                get children() {
+                  var _el$24 = _tmpl$8();
+                  insert(_el$24, (() => {
+                    var _c$ = memo(() => !!row.score.time);
+                    return () => _c$() ? formatTimeDuration(row.score.time, "min", Math.floor) : "-";
+                  })());
+                  return _el$24;
+                }
+              }), null);
+              insert(_el$22, createComponent(For, {
+                get each() {
+                  return row.statuses;
+                },
+                children: (status, problemIndex) => {
+                  var _a;
+                  const partProps = {
+                    status,
+                    problem: props.data.problems[problemIndex()],
+                    problemIndex: problemIndex(),
+                    user: row.user,
+                    row,
+                    rowIndex: rowIndex(),
+                    ranklist: props.data,
+                    solutions: getStatusSolutions(status),
+                    onClick: (event) => emitSolutionClick(event, row, rowIndex(), status, problemIndex())
+                  };
+                  const StatusCellPart = (_a = props.parts) == null ? void 0 : _a.statusCell;
+                  return StatusCellPart ? createComponent(StatusCellPart, partProps) : createComponent(StatusCell, mergeProps(partProps, {
+                    get onSolutionClick() {
+                      return props.onSolutionClick;
+                    }
+                  }));
+                }
+              }), null);
+              return _el$22;
+            })()
+          }));
+          effect((_p$) => {
+            var _v$ = !!props.borderedRows, _v$2 = !!props.stripedRows;
+            _v$ !== _p$.e && _el$2.classList.toggle("srk-table-row-bordered", _p$.e = _v$);
+            _v$2 !== _p$.t && _el$2.classList.toggle("srk-table-row-striped", _p$.t = _v$2);
+            return _p$;
+          }, {
+            e: void 0,
+            t: void 0
+          });
+          return _el$;
+        }
+      });
+    }
+  });
+}
+function ProblemHeaderBody(props) {
+  return [(() => {
+    var _el$36 = _tmpl$15();
+    insert(_el$36, () => props.problem.alias || numberToAlphabet(props.index));
+    return _el$36;
+  })(), createComponent(Show, {
+    get when() {
+      return props.problem.statistics;
+    },
+    children: (statistics) => (() => {
+      var _el$37 = _tmpl$16();
+      insert(_el$37, () => statistics().accepted);
+      effect(() => setAttribute(_el$37, "title", getProblemStatsTitle(statistics())));
+      return _el$37;
+    })()
+  })];
+}
+function getProblemStatsTitle(statistics) {
+  const ratio = statistics.submitted ? (statistics.accepted / statistics.submitted * 100).toFixed(1) : 0;
+  return `${statistics.accepted} / ${statistics.submitted} (${ratio}%)`;
+}
+function StatusCell(props) {
+  const isClickable = () => props.solutions.length > 0 && !!props.onSolutionClick;
+  const onClick = (event) => {
+    event.preventDefault();
+    if (isClickable()) {
+      props.onClick(event);
+    }
+  };
+  if (props.status.result === "FB") {
+    return (() => {
+      var _el$38 = _tmpl$17();
+      _el$38.$$click = onClick;
+      insert(_el$38, createComponent(AcceptedStatusBody, {
+        get status() {
+          return props.status;
+        }
+      }));
+      effect(() => _el$38.classList.toggle("srk--cursor-pointer", !!isClickable()));
+      return _el$38;
+    })();
+  }
+  if (props.status.result === "AC") {
+    return (() => {
+      var _el$39 = _tmpl$18();
+      _el$39.$$click = onClick;
+      insert(_el$39, createComponent(AcceptedStatusBody, {
+        get status() {
+          return props.status;
+        }
+      }));
+      effect(() => _el$39.classList.toggle("srk--cursor-pointer", !!isClickable()));
+      return _el$39;
+    })();
+  }
+  if (props.status.result === "?") {
+    return (() => {
+      var _el$40 = _tmpl$19();
+      _el$40.$$click = onClick;
+      insert(_el$40, () => props.status.tries);
+      effect(() => _el$40.classList.toggle("srk--cursor-pointer", !!isClickable()));
+      return _el$40;
+    })();
+  }
+  if (props.status.result === "RJ") {
+    return (() => {
+      var _el$41 = _tmpl$20();
+      _el$41.$$click = onClick;
+      insert(_el$41, () => props.status.tries);
+      effect(() => _el$41.classList.toggle("srk--cursor-pointer", !!isClickable()));
+      return _el$41;
+    })();
+  }
+  return _tmpl$10();
+}
+function AcceptedStatusBody(props) {
+  const details = () => getAcceptedStatusDetails(props.status);
+  if (typeof props.status.score === "number") {
+    return [(() => {
+      var _el$43 = _tmpl$21();
+      insert(_el$43, () => props.status.score);
+      return _el$43;
+    })(), (() => {
+      var _el$44 = _tmpl$22();
+      insert(_el$44, details);
+      return _el$44;
+    })()];
+  }
+  return memo(details);
+}
+function getRankValues(row, series) {
+  return row.rankValues || series.map(() => ({
+    rank: null,
+    segmentIndex: null
+  }));
+}
+function getRankText(rankValue, row) {
+  return rankValue.rank ? rankValue.rank : row.user.official === false ? "\uFF0A" : "";
+}
+function getStatusSolutions(status) {
+  return [...status.solutions || []].reverse();
+}
+function getResolvedUserMarkers(user, markers, theme) {
+  return resolveUserMarkers(user, markers).map((marker) => ({
+    marker,
+    presentation: getMarkerPresentation(marker, theme)
+  }));
+}
+function resolveSeriesSegment(rankValue, series) {
+  const index = rankValue.segmentIndex || rankValue.segmentIndex === 0 ? rankValue.segmentIndex : -1;
+  return ((series == null ? void 0 : series.segments) || [])[index] || {};
+}
+function getSeriesSegmentClass(rankValue, series) {
+  const segmentStyle = resolveSeriesSegment(rankValue, series).style;
+  return typeof segmentStyle === "string" ? `srk-preset-series-segment-${segmentStyle}` : "";
+}
+function getSeriesSegmentStyle(rankValue, series, theme) {
+  const emptyColor = {
+    [EnumTheme.light]: void 0,
+    [EnumTheme.dark]: void 0
+  };
+  const segmentStyle = resolveSeriesSegment(rankValue, series).style;
+  if (!segmentStyle || typeof segmentStyle === "string") {
+    return {};
+  }
+  const style2 = resolveStyle(segmentStyle);
+  const textColor = style2.textColor || emptyColor;
+  const backgroundColor = style2.backgroundColor || emptyColor;
+  return {
+    color: textColor[theme],
+    "background-color": backgroundColor[theme]
+  };
+}
+function getMarkerStyle(style2) {
+  return (style2 == null ? void 0 : style2.backgroundColor) ? {
+    "background-color": style2.backgroundColor
+  } : {};
+}
+delegateEvents(["click"]);
+export { DefaultSolutionModal, DefaultUserModal, Modal, ProgressBar, Ranklist };