@jjlmoya/utils-tabletop 1.33.0 → 1.36.0

package/src/tool/card-draw-odds-calculator/card-draw-odds-calculator.css

@@ -0,0 +1,382 @@
+:root {
+  --n-ink: #172326;
+  --n-muted: #667477;
+  --n-paper: #f6f3ec;
+  --n-panel: #fffdf8;
+  --n-line: #d7d8cf;
+  --n-accent: #bd5b39;
+  --n-accent-soft: #f2d4c5;
+  --n-teal: #2e7772;
+  --n-shadow: rgba(26, 43, 42, 0.12);
+}
+
+.theme-dark {
+  --n-ink: #edf3ee;
+  --n-muted: #aebdb9;
+  --n-paper: #1d2728;
+  --n-panel: #263334;
+  --n-line: #455554;
+  --n-accent: #e58a61;
+  --n-accent-soft: #59382e;
+  --n-teal: #69b8a8;
+  --n-shadow: rgba(0, 0, 0, 0.3);
+}
+
+.card-draw-odds-tool {
+  --n-ink: #172326;
+  --n-muted: #667477;
+  --n-paper: #f6f3ec;
+  --n-panel: #fffdf8;
+  --n-line: #d7d8cf;
+  --n-accent: #bd5b39;
+  --n-accent-soft: #f2d4c5;
+  --n-teal: #2e7772;
+  --n-shadow: rgba(26, 43, 42, 0.12);
+
+  display: grid;
+  grid-template-columns: minmax(260px, 0.8fr) minmax(360px, 1.45fr);
+  gap: 1px;
+  overflow: hidden;
+  border: 1px solid var(--n-line);
+  background: var(--n-line);
+  color: var(--n-ink);
+}
+
+.theme-dark .card-draw-odds-tool {
+  --n-ink: #edf3ee;
+  --n-muted: #aebdb9;
+  --n-paper: #1d2728;
+  --n-panel: #263334;
+  --n-line: #455554;
+  --n-accent: #e58a61;
+  --n-accent-soft: #59382e;
+  --n-teal: #69b8a8;
+  --n-shadow: rgba(0, 0, 0, 0.3);
+}
+
+.card-draw-controls,
+.card-draw-results {
+  background: var(--n-panel);
+  padding: clamp(1.2rem, 3vw, 2.4rem);
+}
+
+.card-draw-controls {
+  background: var(--n-paper);
+}
+
+.controls-heading,
+.result-header,
+.timeline-title-row,
+.timeline-heading,
+.result-meta {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.controls-heading,
+.result-header {
+  align-items: flex-start;
+}
+
+.controls-heading p,
+.result-header p,
+.timeline-title-row span,
+.mulligan-note {
+  margin: 0;
+  color: var(--n-muted);
+  font-size: 0.86rem;
+  line-height: 1.5;
+}
+
+.section-kicker {
+  color: var(--n-accent);
+  font-size: 0.7rem;
+  font-weight: 800;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.field-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+  margin-top: 2rem;
+}
+
+.field {
+  position: relative;
+  display: grid;
+  gap: 0.45rem;
+}
+
+.field-wide {
+  grid-column: 1 / -1;
+}
+
+.field > span,
+.field > label,
+.custom-select > label {
+  color: var(--n-muted);
+  font-size: 0.78rem;
+  font-weight: 700;
+}
+
+.field input,
+.select-trigger {
+  width: 100%;
+  border: 1px solid var(--n-line);
+  border-radius: 0.45rem;
+  background: var(--n-panel);
+  color: var(--n-ink);
+  font: inherit;
+  padding: 0.72rem 0.78rem;
+}
+
+.field input:focus,
+.select-trigger:focus,
+.select-menu button:focus {
+  outline: 2px solid var(--n-accent);
+  outline-offset: 2px;
+}
+
+.select-trigger {
+  cursor: pointer;
+  text-align: left;
+}
+
+.select-menu {
+  position: absolute;
+  z-index: 2;
+  top: calc(100% + 0.35rem);
+  right: 0;
+  left: 0;
+  display: grid;
+  overflow: hidden;
+  border: 1px solid var(--n-line);
+  border-radius: 0.45rem;
+  background: var(--n-panel);
+  box-shadow: 0 0.8rem 1.8rem var(--n-shadow);
+}
+
+.select-menu[hidden] {
+  display: none;
+}
+
+.select-menu button {
+  border: 0;
+  border-bottom: 1px solid var(--n-line);
+  background: transparent;
+  color: var(--n-ink);
+  cursor: pointer;
+  font: inherit;
+  padding: 0.68rem 0.78rem;
+  text-align: left;
+}
+
+.select-menu button:last-child {
+  border-bottom: 0;
+}
+
+.select-menu button:hover {
+  background: var(--n-accent-soft);
+}
+
+.final-result {
+  display: grid;
+  justify-items: end;
+  gap: 0.2rem;
+}
+
+.final-result span,
+.result-meta span {
+  color: var(--n-muted);
+  font-size: 0.76rem;
+}
+
+.final-result strong {
+  color: var(--n-accent);
+  font-size: clamp(2.1rem, 5vw, 3.5rem);
+  line-height: 0.95;
+}
+
+.card-fan-stage {
+  display: grid;
+  min-height: 14rem;
+  place-items: end center;
+  margin: 1.5rem 0 1rem;
+  overflow: hidden;
+  border-bottom: 1px solid var(--n-line);
+}
+
+.card-fan {
+  position: relative;
+  width: min(100%, 26rem);
+  height: 11rem;
+}
+
+.fan-card {
+  position: absolute;
+  bottom: 0;
+  left: calc(50% - 1.8rem);
+  width: 3.6rem;
+  height: 8.5rem;
+  border: 2px solid var(--n-teal);
+  border-radius: 0.65rem 0.65rem 0.35rem 0.35rem;
+  background: var(--n-paper);
+  box-shadow: 0 0.4rem 0.7rem var(--n-shadow);
+  transform: rotate(calc((var(--fan-index) - 5) * 8deg));
+  transform-origin: 50% 100%;
+}
+
+.fan-card::after {
+  position: absolute;
+  top: 0.65rem;
+  right: 0.55rem;
+  bottom: 0.65rem;
+  left: 0.55rem;
+  border: 1px solid var(--n-line);
+  border-radius: 0.25rem;
+  content: '';
+}
+
+.fan-card-target {
+  border-color: var(--n-accent);
+  background: var(--n-accent-soft);
+}
+
+.fan-card-target::before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  color: var(--n-accent);
+  content: '+';
+  font-size: 1.2rem;
+  transform: translate(-50%, -50%);
+}
+
+.fan-marker {
+  position: absolute;
+  right: 0;
+  bottom: 0.6rem;
+  border: 1px solid var(--n-accent);
+  border-radius: 999px;
+  background: var(--n-panel);
+  color: var(--n-accent);
+  font-size: 0.72rem;
+  font-weight: 800;
+  padding: 0.45rem 0.65rem;
+}
+
+.result-meta {
+  align-items: center;
+  border-bottom: 1px solid var(--n-line);
+  padding-bottom: 1.1rem;
+}
+
+.result-meta strong {
+  color: var(--n-teal);
+  font-size: 0.9rem;
+}
+
+.timeline-block {
+  padding-top: 1.5rem;
+}
+
+.timeline-title-row {
+  align-items: baseline;
+  margin-bottom: 1rem;
+}
+
+.timeline-title-row h2 {
+  margin: 0;
+  font-size: 1rem;
+}
+
+.timeline {
+  display: grid;
+  gap: 0.85rem;
+}
+
+.timeline-row {
+  display: grid;
+  grid-template-columns: minmax(7rem, 0.8fr) minmax(5rem, 1.4fr) 3.5rem;
+  align-items: center;
+  gap: 0.7rem;
+}
+
+.timeline-heading {
+  align-items: baseline;
+  flex-wrap: wrap;
+}
+
+.timeline-title {
+  font-size: 0.78rem;
+  font-weight: 800;
+}
+
+.timeline-cards {
+  color: var(--n-muted);
+  font-size: 0.68rem;
+}
+
+.timeline-track {
+  height: 0.45rem;
+  overflow: hidden;
+  border-radius: 999px;
+  background: var(--n-paper);
+}
+
+.timeline-fill {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--n-teal);
+}
+
+.timeline-result {
+  color: var(--n-ink);
+  font-size: 0.8rem;
+  text-align: right;
+}
+
+.mulligan-note {
+  margin-top: 1.2rem;
+  border-left: 2px solid var(--n-accent);
+  padding-left: 0.8rem;
+}
+
+.validation-error {
+  grid-column: 1 / -1;
+  background: var(--n-panel);
+  color: var(--n-accent);
+  padding: 1.5rem;
+}
+
+@media (max-width: 760px) {
+  .card-draw-odds-tool {
+    grid-template-columns: 1fr;
+  }
+
+  .timeline-row {
+    grid-template-columns: minmax(6.4rem, 0.75fr) minmax(4rem, 1.2fr) 3.2rem;
+  }
+}
+
+@media (max-width: 420px) {
+  .field-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .field-wide {
+    grid-column: auto;
+  }
+
+  .result-header {
+    display: grid;
+  }
+
+  .final-result {
+    justify-items: start;
+  }
+}

package/src/tool/card-draw-odds-calculator/component.astro

@@ -0,0 +1,89 @@
+---
+import './card-draw-odds-calculator.css';
+import type { CardDrawOddsUI } from './ui';
+import { DEFAULT_INPUT } from './logic';
+
+interface Props {
+  ui: CardDrawOddsUI;
+}
+
+const { ui } = Astro.props;
+---
+
+<section class="card-draw-odds-tool" data-card-draw-tool data-ui={JSON.stringify(ui)}>
+  <form class="card-draw-controls" novalidate>
+    <div class="controls-heading">
+      <span class="section-kicker">{ui.configureLabel}</span>
+      <p>{ui.configureHint}</p>
+    </div>
+    <div class="field-grid">
+      <div class="field field-wide custom-select" data-select-key="preset" data-value="custom">
+        <label id="preset-label">{ui.presetLabel}</label>
+        <button type="button" class="select-trigger" data-select-trigger aria-expanded="false" aria-haspopup="listbox" aria-controls="preset-options" aria-labelledby="preset-label">{ui.presetCustom}</button>
+        <div id="preset-options" class="select-menu" data-select-menu role="listbox" hidden>
+          <button type="button" data-option-value="custom" role="option" aria-selected="true">{ui.presetCustom}</button>
+          <button type="button" data-option-value="standard" role="option" aria-selected="false">{ui.presetStandard}</button>
+          <button type="button" data-option-value="limited" role="option" aria-selected="false">{ui.presetLimited}</button>
+          <button type="button" data-option-value="singleton" role="option" aria-selected="false">{ui.presetSingleton}</button>
+        </div>
+      </div>
+      <label class="field">
+        <span>{ui.deckSizeLabel}</span>
+        <input data-input-key="deckSize" type="number" min="1" max="10000" value={DEFAULT_INPUT.deckSize} inputmode="numeric" />
+      </label>
+      <label class="field">
+        <span>{ui.targetCopiesLabel}</span>
+        <input data-input-key="targetCopies" type="number" min="0" max="10000" value={DEFAULT_INPUT.targetCopies} inputmode="numeric" />
+      </label>
+      <label class="field">
+        <span>{ui.openingHandLabel}</span>
+        <input data-input-key="openingHand" type="number" min="0" max="10000" value={DEFAULT_INPUT.openingHand} inputmode="numeric" />
+      </label>
+      <label class="field">
+        <span>{ui.drawsPerTurnLabel}</span>
+        <input data-input-key="drawsPerTurn" type="number" min="0" max="10000" value={DEFAULT_INPUT.drawsPerTurn} inputmode="numeric" />
+      </label>
+      <label class="field">
+        <span>{ui.throughTurnLabel}</span>
+        <input data-input-key="throughTurn" type="number" min="0" max="60" value={DEFAULT_INPUT.throughTurn} inputmode="numeric" />
+      </label>
+      <div class="field field-wide custom-select" data-select-key="mulliganMode" data-value={DEFAULT_INPUT.mulliganMode}>
+        <label id="mulligan-label">{ui.mulliganLabel}</label>
+        <button type="button" class="select-trigger" data-select-trigger aria-expanded="false" aria-haspopup="listbox" aria-controls="mulligan-options" aria-labelledby="mulligan-label">{ui.mulliganFullRedraw}</button>
+        <div id="mulligan-options" class="select-menu" data-select-menu role="listbox" hidden>
+          <button type="button" data-option-value="none" role="option" aria-selected="false">{ui.mulliganNone}</button>
+          <button type="button" data-option-value="fullRedraw" role="option" aria-selected="true">{ui.mulliganFullRedraw}</button>
+        </div>
+      </div>
+    </div>
+  </form>
+
+  <div class="card-draw-results" data-result-content>
+    <div class="result-header">
+      <div>
+        <span class="section-kicker">{ui.visualLabel}</span>
+        <p>{ui.visualHint}</p>
+      </div>
+      <div class="final-result" aria-live="polite" aria-atomic="true">
+        <span>{ui.finalChanceLabel}</span>
+        <strong data-final-probability>0%</strong>
+      </div>
+    </div>
+    <div class="card-fan-stage" data-card-fan aria-hidden="true"></div>
+    <div class="result-meta">
+      <span>{ui.expectedCopiesLabel}</span>
+      <strong data-expected-copies>0.00 {ui.copyLabel}</strong>
+    </div>
+    <div class="timeline-block">
+      <div class="timeline-title-row">
+        <h2>{ui.probabilityByTurnLabel}</h2>
+        <span>{ui.explanationLabel}</span>
+      </div>
+      <div class="timeline" data-timeline></div>
+      <p class="mulligan-note" data-mulligan-note></p>
+    </div>
+  </div>
+  <div class="validation-error" data-validation-error hidden role="alert"></div>
+</section>
+
+<script src="./controller.ts"></script>

package/src/tool/card-draw-odds-calculator/controller.ts

@@ -0,0 +1,118 @@
+import { calculateCardDrawOdds, DEFAULT_INPUT, PRESETS, type CardDrawInput, type MulliganMode } from './logic';
+import { clearError, renderError, renderResult } from './dom-views';
+import { evaluateInput, type InputErrorKey } from './evaluator';
+import { loadCardDrawInput, saveCardDrawInput } from './storage';
+import type { CardDrawOddsUI } from './ui';
+
+type InputKey = 'deckSize' | 'targetCopies' | 'openingHand' | 'drawsPerTurn' | 'throughTurn';
+
+const readUi = (root: HTMLElement): CardDrawOddsUI => JSON.parse(root.dataset.ui ?? '{}') as CardDrawOddsUI;
+
+const errorUiKey: Record<InputErrorKey, keyof CardDrawOddsUI> = {
+  invalidDeck: 'invalidDeck',
+  invalidCopies: 'invalidCopies',
+  invalidHand: 'invalidHand',
+  invalidDraws: 'invalidDraws',
+  invalidTurns: 'invalidTurns',
+};
+
+const getInputs = (root: HTMLElement): NodeListOf<HTMLInputElement> => root.querySelectorAll<HTMLInputElement>('input[data-input-key]');
+
+const readInput = (root: HTMLElement): CardDrawInput => {
+  const values = {} as Record<InputKey, number>;
+  getInputs(root).forEach((element) => {
+    values[element.dataset.inputKey as InputKey] = Number(element.value);
+  });
+  const mulligan = root.querySelector<HTMLElement>('[data-select-key="mulliganMode"]');
+  return { ...values, mulliganMode: (mulligan?.dataset.value ?? 'fullRedraw') as MulliganMode };
+};
+
+const writeInput = (root: HTMLElement, input: CardDrawInput): void => {
+  getInputs(root).forEach((element) => {
+    const key = element.dataset.inputKey as InputKey;
+    element.value = String(input[key]);
+  });
+  setSelectValue(root, 'mulliganMode', input.mulliganMode);
+};
+
+const setSelectValue = (root: HTMLElement, key: string, value: string): void => {
+  const select = root.querySelector<HTMLElement>(`[data-select-key="${key}"]`);
+  if (!select) return;
+  select.dataset.value = value;
+  const option = select.querySelector<HTMLElement>(`[data-option-value="${value}"]`);
+  const trigger = select.querySelector<HTMLButtonElement>('[data-select-trigger]');
+  if (option && trigger) trigger.textContent = option.textContent;
+  select.querySelectorAll<HTMLElement>('[data-option-value]').forEach((item) => {
+    item.setAttribute('aria-selected', String(item === option));
+  });
+  select.querySelector<HTMLElement>('[data-select-menu]')?.setAttribute('hidden', '');
+  trigger?.setAttribute('aria-expanded', 'false');
+};
+
+const applyPreset = (root: HTMLElement, preset: string): void => {
+  if (!PRESETS[preset]) return;
+  writeInput(root, { ...readInput(root), ...PRESETS[preset] });
+  setSelectValue(root, 'preset', preset);
+};
+
+const update = (root: HTMLElement): void => {
+  const input = readInput(root);
+  const evaluation = evaluateInput(input);
+  if (!evaluation.valid) {
+    const ui = readUi(root);
+    renderError(root, evaluation.errorKey ? (ui[errorUiKey[evaluation.errorKey]] ?? ui.invalidInput) : ui.invalidInput);
+    return;
+  }
+  clearError(root);
+  saveCardDrawInput(input);
+  renderResult(root, calculateCardDrawOdds(input), input, readUi(root));
+};
+
+const bindSelect = (root: HTMLElement, select: HTMLElement): void => {
+  const trigger = select.querySelector<HTMLButtonElement>('[data-select-trigger]');
+  const menu = select.querySelector<HTMLElement>('[data-select-menu]');
+  if (!trigger || !menu) return;
+  trigger.addEventListener('click', () => {
+    const isOpen = !menu.hasAttribute('hidden');
+    menu.toggleAttribute('hidden', isOpen);
+    trigger.setAttribute('aria-expanded', String(!isOpen));
+  });
+  menu.querySelectorAll<HTMLElement>('[data-option-value]').forEach((option) => {
+    option.addEventListener('click', () => {
+      setSelectValue(root, select.dataset.selectKey ?? '', option.dataset.optionValue ?? '');
+      update(root);
+    });
+  });
+};
+
+const bindEvents = (root: HTMLElement): void => {
+  root.querySelectorAll<HTMLElement>('[data-select-key]').forEach((select) => bindSelect(root, select));
+  root.querySelectorAll<HTMLInputElement>('input[data-input-key]').forEach((input) => input.addEventListener('input', () => {
+    setSelectValue(root, 'preset', 'custom');
+    update(root);
+  }));
+  root.querySelectorAll<HTMLElement>('[data-option-value]').forEach((option) => {
+    if (option.closest('[data-select-key="mulliganMode"]')) return;
+    option.addEventListener('click', () => applyPreset(root, option.dataset.optionValue ?? ''));
+  });
+  root.querySelector('form')?.addEventListener('submit', (event) => event.preventDefault());
+  document.addEventListener('click', (event) => {
+    if (event.target instanceof Node && root.contains(event.target)) return;
+    root.querySelectorAll<HTMLElement>('[data-select-menu]').forEach((menu) => menu.setAttribute('hidden', ''));
+    root.querySelectorAll<HTMLButtonElement>('[data-select-trigger]').forEach((trigger) => trigger.setAttribute('aria-expanded', 'false'));
+  });
+  document.addEventListener('keydown', (event) => {
+    if (event.key !== 'Escape') return;
+    root.querySelectorAll<HTMLElement>('[data-select-menu]').forEach((menu) => menu.setAttribute('hidden', ''));
+    root.querySelectorAll<HTMLButtonElement>('[data-select-trigger]').forEach((trigger) => trigger.setAttribute('aria-expanded', 'false'));
+  });
+};
+
+const start = (root: HTMLElement): void => {
+  writeInput(root, { ...DEFAULT_INPUT, ...loadCardDrawInput() });
+  setSelectValue(root, 'preset', 'custom');
+  bindEvents(root);
+  update(root);
+};
+
+document.querySelectorAll<HTMLElement>('[data-card-draw-tool]').forEach(start);

package/src/tool/card-draw-odds-calculator/dom-views.ts

@@ -0,0 +1,90 @@
+import type { CardDrawOddsUI } from './ui';
+import type { CardDrawInput, CardDrawResult, DrawOddsPoint } from './logic';
+
+const getLocale = (): string => document.documentElement.lang || 'en';
+
+const formatPercent = (value: number): string => new Intl.NumberFormat(getLocale(), {
+  style: 'percent',
+  maximumFractionDigits: 1,
+}).format(value);
+
+const formatCopies = (value: number): string => new Intl.NumberFormat(getLocale(), {
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+}).format(value);
+
+const createElement = <T extends keyof HTMLElementTagNameMap>(tag: T, className?: string): HTMLElementTagNameMap[T] => {
+  const element = document.createElement(tag);
+  if (className) element.className = className;
+  return element;
+};
+
+const renderCardFan = (container: HTMLElement, result: CardDrawResult): void => {
+  container.replaceChildren();
+  const fan = createElement('div', 'card-fan');
+  const visibleCards = 11;
+  for (let index = 0; index < visibleCards; index += 1) {
+    const card = createElement('span', index === 5 ? 'fan-card fan-card-target' : 'fan-card');
+    card.style.setProperty('--fan-index', String(index));
+    fan.append(card);
+  }
+  const marker = createElement('div', 'fan-marker');
+  marker.textContent = formatPercent(result.finalProbability);
+  fan.append(marker);
+  container.append(fan);
+};
+
+const renderTimelinePoint = (point: DrawOddsPoint, input: CardDrawInput, ui: CardDrawOddsUI): HTMLElement => {
+  const row = createElement('div', 'timeline-row');
+  const heading = createElement('div', 'timeline-heading');
+  const title = createElement('span', 'timeline-title');
+  title.textContent = point.stage === 'opening' ? ui.openingHandStage : `${ui.turnLabel} ${point.turn}`;
+  const cards = createElement('span', 'timeline-cards');
+  cards.textContent = `${ui.cardsSeenLabel}: ${point.cardsSeen} ${ui.cardsLabel}`;
+  heading.append(title, cards);
+  const track = createElement('div', 'timeline-track');
+  const fill = createElement('span', 'timeline-fill');
+  fill.style.width = `${point.probability * 100}%`;
+  track.append(fill);
+  const result = createElement('strong', 'timeline-result');
+  result.textContent = formatPercent(point.probability);
+  row.append(heading, track, result);
+  if (point.stage === 'opening' && input.mulliganMode === 'fullRedraw') row.dataset.mulligan = 'true';
+  return row;
+};
+
+const renderTimeline = (container: HTMLElement, result: CardDrawResult, input: CardDrawInput, ui: CardDrawOddsUI): void => {
+  container.replaceChildren();
+  result.points.forEach((point) => container.append(renderTimelinePoint(point, input, ui)));
+};
+
+export const renderResult = (root: HTMLElement, result: CardDrawResult, input: CardDrawInput, ui: CardDrawOddsUI): void => {
+  const finalProbability = root.querySelector<HTMLElement>('[data-final-probability]');
+  const expectedCopies = root.querySelector<HTMLElement>('[data-expected-copies]');
+  const note = root.querySelector<HTMLElement>('[data-mulligan-note]');
+  const fan = root.querySelector<HTMLElement>('[data-card-fan]');
+  const timeline = root.querySelector<HTMLElement>('[data-timeline]');
+  if (!finalProbability || !expectedCopies || !note || !fan || !timeline) return;
+  finalProbability.textContent = formatPercent(result.finalProbability);
+  expectedCopies.textContent = `${formatCopies(result.expectedCopiesAtFinal)} ${ui.copyLabel}`;
+  note.textContent = input.mulliganMode === 'fullRedraw' ? ui.fullRedrawNote : ui.noMulliganNote;
+  renderCardFan(fan, result);
+  renderTimeline(timeline, result, input, ui);
+};
+
+export const renderError = (root: HTMLElement, message: string): void => {
+  const error = root.querySelector<HTMLElement>('[data-validation-error]');
+  const result = root.querySelector<HTMLElement>('[data-result-content]');
+  if (!error || !result) return;
+  error.textContent = message;
+  error.hidden = false;
+  result.hidden = true;
+};
+
+export const clearError = (root: HTMLElement): void => {
+  const error = root.querySelector<HTMLElement>('[data-validation-error]');
+  const result = root.querySelector<HTMLElement>('[data-result-content]');
+  if (!error || !result) return;
+  error.hidden = true;
+  result.hidden = false;
+};