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

package/dist/index.server.es.js

@@ -0,0 +1,694 @@
+import "@algoux/standard-ranklist-renderer-component-styles";
+import { createComponent, ssr, ssrHydrationKey, ssrAttribute, escape, ssrStyle, ssrStyleProperty, mergeProps } from "solid-js/web";
+import { SRK_ANIMATED_MODAL_ROOT_CLASS, ensureModalInteractionTracker, unregisterModalFocusScope, resolveModalTransformOrigin, MODAL_ANIMATION_DURATION_MS, lockModalBodyScroll, unlockModalBodyScroll, 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 = ["<div", ' class="srk-modal-header"><div class="srk-modal-title"', ">", "</div></div>"], _tmpl$2$4 = ["<div", '><div class="srk-modal-mask"></div><div', ' tabindex="-1"><div', ' aria-modal="true" class="srk-modal" data-srk-modal-panel="true" role="dialog" style="', '" 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">', "</div></div></div></div></div>"];
+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 [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;
+    }
+  };
+  const registerFocusScope = () => {
+    if (!props.open || !dialogRef || focusScopeId !== null) {
+      return;
+    }
+    if (!dialogRef.isConnected) {
+      if (!pendingFocusRegistration) {
+        pendingFocusRegistration = true;
+        queueMicrotask(() => {
+          pendingFocusRegistration = false;
+          registerFocusScope();
+        });
+      }
+      return;
+    }
+  };
+  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(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;
+    props.width ? `${props.width}px` : typeof ((_a = props.style) == null ? void 0 : _a.width) === "string" ? props.style.width : null;
+    `${transformOrigin().x}px`;
+    `${transformOrigin().y}px`;
+    animationState();
+    {
+      return;
+    }
+  });
+  const content = () => ssr(_tmpl$2$4, ssrHydrationKey() + ssrAttribute("class", escape(rootClassName(), true), false) + ssrAttribute("data-srk-modal-state", escape(animationState(), true), false), ssrAttribute("class", escape(classNames("srk-modal-wrap", props.wrapClassName), true), false), ssrAttribute("aria-labelledby", props.title !== void 0 ? escape(titleId, true) : escape(void 0, true), false), ssrStyle(baseDialogStyle()), escape(createComponent(Show, {
+    get when() {
+      return props.title !== void 0;
+    },
+    get children() {
+      return ssr(_tmpl$$4, ssrHydrationKey(), ssrAttribute("id", escape(titleId, true), false), escape(props.title));
+    }
+  })), escape(props.children));
+  return createComponent(Show, {
+    get when() {
+      return shouldRender();
+    },
+    children: content
+  });
+}
+var _tmpl$$3 = ["<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>', "</tbody></table>"], _tmpl$2$3 = ["<tr", '><td><span class="', '">', '</span></td><td class="srk--text-right">', "</td></tr>"];
+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() {
+        return ssr(_tmpl$$3, ssrHydrationKey(), escape(createComponent(For, {
+          get each() {
+            return payload().solutions;
+          },
+          children: (solution) => {
+            const meta = () => getSolutionResultMeta(solution.result);
+            return ssr(_tmpl$2$3, ssrHydrationKey(), `srk-solution-result-text ${escape(meta().className || "", true)}`, escape(meta().label), escape(formatSolutionTimestamp(solution)));
+          }
+        })));
+      }
+    })
+  });
+}
+var _tmpl$$2 = ["<div", ' class="srk-user-modal-info-team-members">', "</div>"], _tmpl$2$2 = ["<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">', "</span><!--$-->", "<!--/--></div><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"], _tmpl$3$2 = ["<p", ' class="srk-user-modal-info-user-second-name">', "</p>"], _tmpl$4$2 = ["<span", ' class="', '" style="', '">', "</span>"], _tmpl$5$2 = ["<span", ' class="srk-user-modal-info-team-members-slash"> / </span>'], _tmpl$6$2 = ["<span", ">", "</span>"], _tmpl$7$1 = ["<div", ' class="srk-user-modal-info-photo"><img', ' alt="User portrait" class="srk-user-modal-info-photo-img"></div>'];
+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() {
+        return ssr(_tmpl$2$2, ssrHydrationKey(), escape(resolveText(user().name)), escape(createComponent(Show, {
+          get when() {
+            return user().organization;
+          },
+          children: (organization) => ssr(_tmpl$3$2, ssrHydrationKey(), escape(resolveText(organization())))
+        })), user().official === false ? "\uFF0A \u975E\u6B63\u5F0F\u53C2\u52A0\u8005" : "\u6B63\u5F0F\u53C2\u52A0\u8005", escape(createComponent(For, {
+          get each() {
+            return resolvedMarkers(user());
+          },
+          children: (entry) => ssr(_tmpl$4$2, ssrHydrationKey(), `srk-user-modal-info-labels-label ${escape(entry.presentation.className || "", true)}`, ssrStyle(entry.presentation.style), escape(resolveText(entry.marker.label)))
+        })), escape(createComponent(Show, {
+          get when() {
+            var _a;
+            return (_a = user().teamMembers) == null ? void 0 : _a.length;
+          },
+          get children() {
+            return ssr(_tmpl$$2, ssrHydrationKey(), escape(createComponent(For, {
+              get each() {
+                return user().teamMembers;
+              },
+              children: (member, index) => [createComponent(Show, {
+                get when() {
+                  return index() > 0;
+                },
+                get children() {
+                  return ssr(_tmpl$5$2, ssrHydrationKey());
+                }
+              }), ssr(_tmpl$6$2, ssrHydrationKey(), escape(resolveText(member.name)))]
+            })));
+          }
+        })), escape(createComponent(Show, {
+          get when() {
+            return user().photo;
+          },
+          children: (photo) => ssr(_tmpl$7$1, ssrHydrationKey(), ssrAttribute("src", escape(formatAssetUrl(photo(), "user.photo"), true), false))
+        })));
+      }
+    })
+  });
+}
+var _tmpl$$1 = ["<div", ' class="srk-progress-slider-tooltip" style="', '">', "</div>"], _tmpl$2$1 = ["<div", ' class="srk-progress-slider-layer"><!--$-->', '<!--/--><input aria-label="Time Travel" class="srk-progress-slider"', ' min="0" step="1"', ' type="range"', "></div>"], _tmpl$3$1 = ["<div", ' class="srk-progress-time-machine-status"><div class="srk-progress-time-machine-text">Time Travel Mode</div></div>'], _tmpl$4$1 = ["<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" style="', '"><div class="srk-progress-bar-fill" style="', '"></div></div><div class="srk-progress-bar-segment srk-progress-bar-frozen" style="', '"><div class="srk-progress-bar-fill" style="', '"></div></div></div><!--$-->', '<!--/--></div><div class="srk-progress-secondary-area"><div class="srk-progress-secondary-area-left" style="', '">Elapsed: <!--$-->', '<!--/--></div><div class="srk-progress-secondary-area-center">', '</div><div class="srk-progress-secondary-area-right" style="', '">Remaining: <!--$-->', "<!--/--></div></div></div>"], _tmpl$5$1 = ["<div", ' class="srk-progress-live-text">Live</div>'], _tmpl$6$1 = ["<div", ' style="', '">SRK</div>'];
+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();
+    }
+  };
+  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 ssr(_tmpl$4$1, ssrHydrationKey(), ssrStyleProperty("width:", `${escape(progressMetrics().frozenBreakpoint, true) * 100}%`), ssrStyleProperty("width:", `${escape(progressMetrics().normalInnerPercent, true)}%`), ssrStyleProperty("width:", `${(1 - escape(progressMetrics().frozenBreakpoint, true)) * 100}%`), ssrStyleProperty("width:", `${escape(progressMetrics().frozenInnerPercent, true)}%`), escape(createComponent(Show, {
+    get when() {
+      return props.enableTimeTravel && progressMetrics().supportRegen && isMounted();
+    },
+    get children() {
+      return ssr(_tmpl$2$1, ssrHydrationKey(), escape(createComponent(Show, {
+        get when() {
+          return timeTravelIsChanging();
+        },
+        get children() {
+          return ssr(_tmpl$$1, ssrHydrationKey(), ssrStyleProperty("left:", `${durationMinutes() ? escape(timeTravelCurrentValue(), true) / escape(durationMinutes(), true) * 100 : 0}%`), escape(secToTimeStr(timeTravelCurrentValue() * 60)));
+        }
+      })), ssrAttribute("max", escape(durationMinutes(), true), false), ssrAttribute("title", escape(secToTimeStr(timeTravelCurrentValue() * 60), true), false), ssrAttribute("value", escape(timeTravelCurrentValue(), true), false));
+    }
+  })), ssrStyle(props.live || inTimeMachine() ? {} : {
+    display: "none"
+  }), escape(secToTimeStr(Math.round(progressMetrics().elapsed / 1e3))), escape(createComponent(Show, {
+    get when() {
+      return inTimeMachine();
+    },
+    get fallback() {
+      return props.live && !ended() ? ssr(_tmpl$5$1, ssrHydrationKey()) : ssr(_tmpl$6$1, ssrHydrationKey(), ssrStyleProperty("visibility:", "hidden"));
+    },
+    get children() {
+      return ssr(_tmpl$3$1, ssrHydrationKey());
+    }
+  })), ssrStyle(props.live || inTimeMachine() ? {} : {
+    display: "none"
+  }), escape(secToTimeStr(Math.round(progressMetrics().remaining / 1e3))));
+}
+var _tmpl$ = ["<th", ' class="srk--nowrap">Time</th>'], _tmpl$2 = ["<div", ' class="srk-common-table srk-main"><table class="', '"><thead><tr><!--$-->', '<!--/--><th class="srk--text-left srk--nowrap">Name</th><th class="srk--nowrap">Score</th><!--$-->', "<!--/--><!--$-->", "<!--/--></tr></thead><tbody>", "</tbody></table></div>"], _tmpl$3 = ["<div", '>srk type "<!--$-->', '<!--/-->" is not supported</div>'], _tmpl$4 = ["<div", '>srk version "<!--$-->', '<!--/-->" is not supported (current supported: <!--$-->', "<!--/-->)</div>"], _tmpl$5 = ["<th", ' class="srk-series-header srk--text-right srk--nowrap">', "</th>"], _tmpl$6 = ["<th", ' class="srk--nowrap srk-problem-header" style="', '">', "</th>"], _tmpl$7 = ["<a", ' target="_blank" rel="noopener noreferrer" style="', '">', "</a>"], _tmpl$8 = ["<td", ' class="srk--text-right srk--nowrap">', "</td>"], _tmpl$9 = ["<tr", "><!--$-->", "<!--/--><!--$-->", '<!--/--><td class="srk--text-right srk--nowrap">', "</td><!--$-->", "<!--/--><!--$-->", "<!--/--></tr>"], _tmpl$10 = ["<td", ' class="', '" style="', '">', "</td>"], _tmpl$11 = ["<td", ' class="', '"><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">', "</span></div><!--$-->", "<!--/--></div></div></td>"], _tmpl$12 = ["<div", ' class="srk-user-avatar"><img', ' alt="User Avatar"></div>'], _tmpl$13 = ["<span", ' class="', '" style="', '"', "></span>"], _tmpl$14 = ["<p", ' class="srk-user-secondary-text srk--text-ellipsis" title>', "</p>"], _tmpl$15 = ["<span", ' class="srk--display-block">', "</span>"], _tmpl$16 = ["<span", ' class="srk--display-block srk-problem-stats"', ">", "</span>"], _tmpl$17 = ["<td", ' class="', '">', "</td>"], _tmpl$18 = ["<td", "></td>"], _tmpl$19 = ["<span", ' class="srk-prest-status-block-score">', "</span>"], _tmpl$20 = ["<span", ' class="srk-prest-status-block-score-details">', "</span>"];
+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 ssr(_tmpl$3, ssrHydrationKey(), escape(props.data.type));
+    },
+    get children() {
+      return createComponent(Show, {
+        get when() {
+          return caniuse(props.data.version);
+        },
+        get fallback() {
+          return ssr(_tmpl$4, ssrHydrationKey(), escape(props.data.version), escape(srkSupportedVersions));
+        },
+        get children() {
+          return ssr(_tmpl$2, ssrHydrationKey(), `${!!props.borderedRows ? "srk-table-row-bordered" : ""} ${!!props.stripedRows ? "srk-table-row-striped" : ""}`, escape(createComponent(For, {
+            get each() {
+              return props.data.series;
+            },
+            children: (series) => ssr(_tmpl$5, ssrHydrationKey(), escape(series.title))
+          })), escape(createComponent(Show, {
+            get when() {
+              return showTimeColumn();
+            },
+            get children() {
+              return ssr(_tmpl$, ssrHydrationKey());
+            }
+          })), escape(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();
+                }
+              }) : ssr(_tmpl$6, ssrHydrationKey(), ssrStyleProperty("background-image:", escape(getProblemHeaderBackgroundImage(problem.style, theme()), true)), escape(createComponent(Show, {
+                get when() {
+                  return problem.link;
+                },
+                get fallback() {
+                  return createComponent(ProblemHeaderBody, {
+                    problem,
+                    index
+                  });
+                },
+                children: (link) => ssr(_tmpl$7, ssrHydrationKey() + ssrAttribute("href", escape(link(), true), false), ssrStyleProperty("color:", "unset"), escape(createComponent(ProblemHeaderBody, {
+                  problem,
+                  index
+                })))
+              })));
+            }
+          })), escape(createComponent(For, {
+            get each() {
+              return props.data.rows;
+            },
+            children: (row, rowIndex) => ssr(_tmpl$9, ssrHydrationKey(), escape(createComponent(For, {
+              get each() {
+                return getRankValues(row, props.data.series);
+              },
+              children: (rankValue, seriesIndex) => ssr(_tmpl$10, ssrHydrationKey(), `srk--text-right srk--nowrap ${escape(getSeriesSegmentClass(rankValue, props.data.series[seriesIndex()]), true)}`, ssrStyle(getSeriesSegmentStyle(rankValue, props.data.series[seriesIndex()], theme())), escape(getRankText(rankValue, row)))
+            })), (() => {
+              var _a;
+              const UserCellPart = (_a = props.parts) == null ? void 0 : _a.userCell;
+              return UserCellPart ? escape(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())
+              })) : ssr(_tmpl$11, ssrHydrationKey(), `srk--text-left srk--nowrap srk-user-cell ${!!props.onUserClick ? "srk--cursor-pointer" : ""}`, escape(createComponent(Show, {
+                get when() {
+                  return row.user.avatar;
+                },
+                children: (avatar) => ssr(_tmpl$12, ssrHydrationKey(), ssrAttribute("src", escape(formatAssetUrl(avatar(), "user.avatar"), true), false))
+              })), ssrAttribute("title", escape(resolveText(row.user.name), true), false), escape(resolveText(row.user.name)), escape(createComponent(For, {
+                get each() {
+                  return getResolvedUserMarkers(row.user, props.data.markers, theme());
+                },
+                children: (entry) => ssr(_tmpl$13, ssrHydrationKey(), `srk-marker srk-marker-dot srk--c-tooltip ${escape(entry.presentation.className || "", true)}`, ssrStyle(getMarkerStyle(entry.presentation.style)), ssrAttribute("data-tooltip", escape(resolveText(entry.marker.label), true), false))
+              })), escape(createComponent(Show, {
+                get when() {
+                  return row.user.organization;
+                },
+                children: (organization) => ssr(_tmpl$14, ssrHydrationKey(), escape(resolveText(organization())))
+              })));
+            })(), escape(row.score.value), escape(createComponent(Show, {
+              get when() {
+                return showTimeColumn();
+              },
+              get children() {
+                return ssr(_tmpl$8, ssrHydrationKey(), row.score.time ? escape(formatTimeDuration(row.score.time, "min", Math.floor)) : "-");
+              }
+            })), escape(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;
+                  }
+                }));
+              }
+            })))
+          })));
+        }
+      });
+    }
+  });
+}
+function ProblemHeaderBody(props) {
+  return [ssr(_tmpl$15, ssrHydrationKey(), escape(props.problem.alias || numberToAlphabet(props.index))), createComponent(Show, {
+    get when() {
+      return props.problem.statistics;
+    },
+    children: (statistics) => ssr(_tmpl$16, ssrHydrationKey(), ssrAttribute("title", escape(getProblemStatsTitle(statistics()), true), false), escape(statistics().accepted))
+  })];
+}
+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;
+  if (props.status.result === "FB") {
+    return ssr(_tmpl$17, ssrHydrationKey(), `${escape("srk-prest-status-block srk--text-center srk--nowrap srk-prest-status-block-fb", true)} ${isClickable() ? "srk--cursor-pointer" : ""}`, escape(createComponent(AcceptedStatusBody, {
+      get status() {
+        return props.status;
+      }
+    })));
+  }
+  if (props.status.result === "AC") {
+    return ssr(_tmpl$17, ssrHydrationKey(), `${escape("srk-prest-status-block srk--text-center srk--nowrap srk-prest-status-block-accepted", true)} ${isClickable() ? "srk--cursor-pointer" : ""}`, escape(createComponent(AcceptedStatusBody, {
+      get status() {
+        return props.status;
+      }
+    })));
+  }
+  if (props.status.result === "?") {
+    return ssr(_tmpl$17, ssrHydrationKey(), `${escape("srk-prest-status-block srk--text-center srk--nowrap srk-prest-status-block-frozen", true)} ${isClickable() ? "srk--cursor-pointer" : ""}`, escape(props.status.tries));
+  }
+  if (props.status.result === "RJ") {
+    return ssr(_tmpl$17, ssrHydrationKey(), `${escape("srk-prest-status-block srk--text-center srk--nowrap srk-prest-status-block-failed", true)} ${isClickable() ? "srk--cursor-pointer" : ""}`, escape(props.status.tries));
+  }
+  return ssr(_tmpl$18, ssrHydrationKey());
+}
+function AcceptedStatusBody(props) {
+  const details = () => getAcceptedStatusDetails(props.status);
+  if (typeof props.status.score === "number") {
+    return [ssr(_tmpl$19, ssrHydrationKey(), escape(props.status.score)), ssr(_tmpl$20, ssrHydrationKey(), escape(details()))];
+  }
+  return 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 style = resolveStyle(segmentStyle);
+  const textColor = style.textColor || emptyColor;
+  const backgroundColor = style.backgroundColor || emptyColor;
+  return {
+    color: textColor[theme],
+    "background-color": backgroundColor[theme]
+  };
+}
+function getMarkerStyle(style) {
+  return (style == null ? void 0 : style.backgroundColor) ? {
+    "background-color": style.backgroundColor
+  } : {};
+}
+export { DefaultSolutionModal, DefaultUserModal, Modal, ProgressBar, Ranklist };