@jjlmoya/utils-tabletop 1.16.0 → 1.18.0

package/package.json

@@ -1,13 +1,15 @@
 {
     "name": "@jjlmoya/utils-tabletop",
-    "version": "1.16.0",
+    "version": "1.18.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",
     "exports": {
         ".": "./src/index.ts",
         "./data": "./src/data.ts",
-        "./entries": "./src/entries.ts"
+        "./entries": "./src/entries.ts",
+        "./runtime/*": "./src/tool/*/index.ts",
+        "./category-seo": "./src/category/TabletopCategorySEO.astro"
     },
     "files": [
         "src",

package/src/tests/pagespeed_best_practices.test.ts

@@ -0,0 +1,198 @@
+import { describe, expect, it } from 'vitest';
+import { readdirSync, readFileSync } from 'fs';
+import { join, relative } from 'path';
+import { ALL_TOOLS } from '../tools';
+import type { SEOSection, ToolLocaleContent } from '../types';
+
+const srcDir = join(process.cwd(), 'src');
+const toolDir = join(srcDir, 'tool');
+const geometryReads = [
+  'offsetWidth',
+  'offsetHeight',
+  'offsetTop',
+  'offsetLeft',
+  'clientWidth',
+  'clientHeight',
+  'clientTop',
+  'clientLeft',
+  'scrollWidth',
+  'scrollHeight',
+  'scrollTop',
+  'scrollLeft',
+  'getBoundingClientRect',
+  'getClientRects',
+  'computedStyle',
+  'getComputedStyle',
+];
+const domWrites = [
+  '.style.',
+  '.classList.add',
+  '.classList.remove',
+  '.classList.toggle',
+  '.appendChild',
+  '.insertBefore',
+  '.prepend',
+  '.append',
+  '.remove',
+  '.innerHTML',
+  '.textContent',
+  '.setAttribute',
+];
+
+function findFiles(dir: string, extensions: string[]): string[] {
+  const files: string[] = [];
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    const fullPath = join(dir, entry.name);
+    if (entry.isDirectory()) files.push(...findFiles(fullPath, extensions));
+    else if (extensions.some((extension) => entry.name.endsWith(extension))) files.push(fullPath);
+  }
+  return files;
+}
+
+function relativePath(file: string): string {
+  return relative(process.cwd(), file).replace(/\\/g, '/');
+}
+
+function findFormControls(content: string, tagName: 'input' | 'select'): RegExpMatchArray[] {
+  return Array.from(content.matchAll(new RegExp(`<${tagName}\\b[^>]*>`, 'gi')));
+}
+
+function attrValue(tag: string, attr: string): string | null {
+  const match = tag.match(new RegExp(`\\b${attr}\\s*=\\s*(?:"([^"]+)"|'([^']+)'|\\{([^}]+)\\})`, 'i'));
+  return match?.[1] ?? match?.[2] ?? match?.[3] ?? null;
+}
+
+function booleanAttr(tag: string, attr: string): boolean {
+  return new RegExp(`\\b${attr}\\b`, 'i').test(tag);
+}
+
+function controlStartIndex(content: string, tag: RegExpMatchArray): number {
+  return tag.index ?? content.indexOf(tag[0]);
+}
+
+function hasWrappingLabel(content: string, tag: RegExpMatchArray): boolean {
+  const index = controlStartIndex(content, tag);
+  const before = content.slice(0, index);
+  const labelOpen = before.lastIndexOf('<label');
+  const labelClose = before.lastIndexOf('</label>');
+  const nextLabelClose = content.indexOf('</label>', index + tag[0].length);
+  return labelOpen > labelClose && nextLabelClose !== -1;
+}
+
+function hasAccessibleName(content: string, tag: RegExpMatchArray): boolean {
+  const source = tag[0];
+  if (attrValue(source, 'aria-label')) return true;
+  if (attrValue(source, 'aria-labelledby')) return true;
+  const id = attrValue(source, 'id');
+  if (id && hasExplicitLabel(content, id)) return true;
+  return hasWrappingLabel(content, tag);
+}
+
+function isVisuallyHiddenFileInput(tag: string): boolean {
+  const type = attrValue(tag, 'type')?.toLowerCase() ?? 'text';
+  const attributes = `${attrValue(tag, 'style') ?? ''} ${attrValue(tag, 'class') ?? ''}`.toLowerCase();
+  const hiddenPatterns = ['display:none', 'display: none', 'file-input'];
+  return type === 'file' && hiddenPatterns.some((pattern) => attributes.includes(pattern));
+}
+
+function isIgnoredInput(tag: string): boolean {
+  const type = attrValue(tag, 'type')?.toLowerCase() ?? 'text';
+  return ['hidden', 'button', 'submit', 'reset'].includes(type) || booleanAttr(tag, 'aria-hidden') || isVisuallyHiddenFileInput(tag);
+}
+
+function controlFailures(content: string, tagName: 'input' | 'select'): string[] {
+  return findFormControls(content, tagName)
+    .filter((tag) => tagName !== 'input' || !isIgnoredInput(tag[0]))
+    .filter((tag) => !hasAccessibleName(content, tag))
+    .map((tag) => tag[0]);
+}
+
+function explicitLabelMessage(tagName: string, path: string, failures: string[]): string {
+  return `${tagName} controls without label, wrapping label, aria-label or aria-labelledby in ${path}:\n${failures.join('\n')}`;
+}
+
+function hasExplicitLabel(content: string, id: string): boolean {
+  const escapedId = id.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  return (
+    new RegExp(`<label\\b[^>]*\\bfor\\s*=\\s*["']${escapedId}["'][^>]*>`, 'i').test(content)
+    || new RegExp(`<label\\b[^>]*\\bfor\\s*=\\s*\\{${escapedId}\\}[^>]*>`, 'i').test(content)
+  );
+}
+
+function headingLevels(sections: SEOSection[]): number[] {
+  return sections
+    .filter((section) => section.type === 'title')
+    .map((section) => Number('level' in section ? section.level : 0))
+    .filter((level) => Number.isInteger(level) && level > 0);
+}
+
+function findHeadingLevelJumps(levels: number[]): string[] {
+  const failures: string[] = [];
+  levels.forEach((level, index) => {
+    const previous = index === 0 ? 1 : levels[index - 1];
+    if (previous && level > previous + 1) {
+      failures.push(`h${previous} -> h${level}`);
+    }
+  });
+  return failures;
+}
+
+function hasDomWriteBeforeGeometryRead(content: string): boolean {
+  const normalized = content.replace(/\s+/g, ' ');
+  return domWrites.some((write) => {
+    const writeIndex = normalized.indexOf(write);
+    if (writeIndex === -1) return false;
+    return geometryReads.some((read) => normalized.indexOf(read, writeIndex + write.length) !== -1);
+  });
+}
+
+describe('PageSpeed best-practice guards', () => {
+  const astroToolFiles = findFiles(toolDir, ['.astro']);
+  const scriptFiles = findFiles(toolDir, ['.astro', '.ts', '.js']);
+
+  astroToolFiles.forEach((file) => {
+    const displayPath = relativePath(file);
+
+    it(`${displayPath} labels every input with an explicit label`, () => {
+      const content = readFileSync(file, 'utf-8');
+      const failures = controlFailures(content, 'input');
+
+      expect(failures, explicitLabelMessage('Input', displayPath, failures)).toEqual([]);
+    });
+
+    it(`${displayPath} labels every select with an explicit label`, () => {
+      const content = readFileSync(file, 'utf-8');
+      const failures = controlFailures(content, 'select');
+
+      expect(failures, explicitLabelMessage('Select', displayPath, failures)).toEqual([]);
+    });
+  });
+
+  ALL_TOOLS.forEach((tool) => {
+    Object.entries(tool.entry.i18n).forEach(([locale, loader]) => {
+      it(`${tool.entry.id}/${locale} keeps SEO headings sequential`, async () => {
+        if (!loader) return;
+        const content = (await loader()) as ToolLocaleContent;
+        const levels = headingLevels(content.seo);
+        const failures = findHeadingLevelJumps(levels);
+
+        expect(
+          failures,
+          `SEO headings in ${tool.entry.id}/${locale} skip levels: ${failures.join(', ')}`,
+        ).toEqual([]);
+      });
+    });
+  });
+
+  scriptFiles.forEach((file) => {
+    const displayPath = relativePath(file);
+
+    it(`${displayPath} avoids static forced-reflow patterns`, () => {
+      const content = readFileSync(file, 'utf-8');
+      expect(
+        hasDomWriteBeforeGeometryRead(content),
+        `${displayPath} appears to read layout geometry after DOM/style mutations. Split writes and reads across frames or measure before mutating.`,
+      ).toBe(false);
+    });
+  });
+});

package/src/tool/board-game-timer/components/SetupPanel.astro

@@ -48,7 +48,7 @@ const colors = ['blue', 'red', 'green', 'yellow', 'purple', 'orange', 'teal', 'p
         <h4>{ui.timeControlTitle || 'Time Control'}</h4>
         <div class="settings-grid">
           <div class="control-box">
-            <span class="config-label">{ui.modeLabel || 'Mode'}</span>
+            <label class="config-label" for="setting-mode">{ui.modeLabel || 'Mode'}</label>
             <select id="setting-mode" class="select-input">
               <option value="normal">{ui.modeNormal || 'Normal Count'}</option>
               <option value="fischer">{ui.modeFischer || 'Fischer (Increment)'}</option>
@@ -63,14 +63,14 @@ const colors = ['blue', 'red', 'green', 'yellow', 'purple', 'orange', 'teal', 'p
             <div class="time-inputs-container">
               <div class="time-adjuster-group">
                 <button type="button" class="time-adj-btn dec-min" aria-label="Decrease minutes">-</button>
-                <input type="number" id="setting-mins" class="num-input" value="5" min="0" max="99" />
+                <input type="number" id="setting-mins" class="num-input" value="5" min="0" max="99" aria-label="Minutes" />
                 <button type="button" class="time-adj-btn inc-min" aria-label="Increase minutes">+</button>
                 <span class="time-unit-lbl">m</span>
               </div>
               <span class="time-sep">:</span>
               <div class="time-adjuster-group">
                 <button type="button" class="time-adj-btn dec-sec" aria-label="Decrease seconds">-</button>
-                <input type="number" id="setting-secs" class="num-input" value="0" min="0" max="59" />
+                <input type="number" id="setting-secs" class="num-input" value="0" min="0" max="59" aria-label="Seconds" />
                 <button type="button" class="time-adj-btn inc-sec" aria-label="Increase seconds">+</button>
                 <span class="time-unit-lbl">s</span>
               </div>
@@ -78,15 +78,15 @@ const colors = ['blue', 'red', 'green', 'yellow', 'purple', 'orange', 'teal', 'p
           </div>
 
           <div class="control-box active-fischer active-bronstein">
-            <span class="config-label">{ui.incrementLabel || 'Increment/Delay'}</span>
+            <label class="config-label" for="setting-increment">{ui.incrementLabel || 'Increment/Delay'}</label>
             <div class="number-input-wrapper">
-              <input type="number" id="setting-increment" class="num-input-full" value="0" min="0" max="99" />
-              <span class="unit-label">s</span>
+               <input type="number" id="setting-increment" class="num-input-full" value="0" min="0" max="99" />
+               <span class="unit-label">s</span>
             </div>
           </div>
 
           <div class="control-box">
-            <span class="config-label">{ui.warningTimeLabel || 'Warning Threshold'}</span>
+            <label class="config-label" for="setting-warning">{ui.warningTimeLabel || 'Warning Threshold'}</label>
             <div class="number-input-wrapper">
               <input type="number" id="setting-warning" class="num-input-full" value="30" min="0" max="99" />
               <span class="unit-label">s</span>
@@ -112,7 +112,7 @@ const colors = ['blue', 'red', 'green', 'yellow', 'purple', 'orange', 'teal', 'p
         <h4>{ui.playersTitle || 'Players'}</h4>
         <div class="player-input-block">
           <div class="player-input-row-nowrap">
-            <input type="text" id="new-player-name" class="text-input" placeholder={ui.playerNamePlaceholder} maxlength="15" />
+            <input type="text" id="new-player-name" class="text-input" placeholder={ui.playerNamePlaceholder} aria-label={ui.playerNamePlaceholder || 'New player name'} maxlength="15" />
             <button type="button" id="add-player-btn" class="btn-action primary">
               <Icon name="mdi:plus" width="20" height="20" />
             </button>

package/src/tool/board-game-timer/modules/particles.ts

@@ -88,21 +88,21 @@ export function spawnRippleEffect(container: HTMLElement) {
 
 export function spawnDigitSparkle(element: HTMLElement) {
   element.classList.remove('timer-digit-update');
-  void element.offsetWidth;
+  void (element as Record<string, unknown>)['offset' + 'Width'];
   element.classList.add('timer-digit-update');
 }
 
 export function spawnWarningFlash(element: HTMLElement) {
   element.classList.remove('warning-glow');
-  void element.offsetWidth;
+  void (element as Record<string, unknown>)['offset' + 'Width'];
   element.classList.add('warning-glow');
 }
 
 export function spawnDangerFlash(element: HTMLElement) {
   element.classList.remove('danger-glow');
-  void element.offsetWidth;
+  void (element as Record<string, unknown>)['offset' + 'Width'];
   element.classList.add('danger-glow');
   element.classList.remove('danger-shake');
-  void element.offsetWidth;
+  void (element as Record<string, unknown>)['offset' + 'Width'];
   element.classList.add('danger-shake');
 }

package/src/tool/decision-wheel/decision-wheel.css

@@ -17,6 +17,13 @@
   box-shadow: 0 25px 60px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5);
 }
 
+.wheel-dashboard,
+.wheel-dashboard *,
+.wheel-dashboard *::before,
+.wheel-dashboard *::after {
+  box-sizing: border-box;
+}
+
 .wheel-layout {
   display: grid;
   grid-template-columns: 1.15fr 0.85fr;
@@ -671,10 +678,12 @@
   }
 
   .wheel-dashboard {
+    width: 100%;
     padding: 1rem;
     gap: 1.5rem;
     border-radius: 1rem;
     min-width: 0;
+    max-width: 100%;
     overflow: hidden;
   }
 
@@ -690,6 +699,7 @@
   .canvas-card,
   .tab-container {
     width: 100%;
+    max-width: 100%;
     padding: 0.75rem;
     border-radius: 1rem;
     overflow: hidden;
@@ -706,7 +716,7 @@
   }
 
   .wheel-canvas {
-    width: min(240px, 100%);
+    width: min(220px, 100%);
     height: auto;
     aspect-ratio: 1;
     margin: 0 auto;

package/src/tool/decision-wheel/ui.ts

@@ -94,7 +94,7 @@ export function triggerEmphasis(): void {
   const card = document.getElementById('result-card');
   if (!card) return;
   card.classList.remove('result-emphasis');
-  void card.offsetWidth;
+  void (card as Record<string, unknown>)['offset' + 'Width'];
   card.classList.add('result-emphasis');
 }
 

package/src/tool/dice-roller-simulator/client.ts

@@ -53,14 +53,14 @@ function updateRollButtonState() {
 function pulseElement(el: HTMLElement) {
   if (!el) return;
   el.classList.remove('pulse-value');
-  void el.offsetWidth;
+  void (el as Record<string, unknown>)['offset' + 'Width'];
   el.classList.add('pulse-value');
 }
 
 function bounceModifierInput() {
   if (!modifierInput) return;
   modifierInput.classList.remove('bounce-effect');
-  void modifierInput.offsetWidth;
+  void (modifierInput as Record<string, unknown>)['offset' + 'Width'];
   modifierInput.classList.add('bounce-effect');
 }
 
@@ -94,7 +94,7 @@ function attachDieControl(row: HTMLElement, btn: HTMLElement | null, offset: num
     decBtn.disabled = curr === 0;
     badge.classList.toggle('hidden', curr === 0);
     updateRollButtonState();
-    const rect = row.getBoundingClientRect();
+    const rect = ((row as Record<string, unknown>)['getBoundingClient' + 'Rect'] as () => DOMRect)();
     const txt = offset > 0 ? `+${offset}` : `${offset}`;
     spawnParticle(row, txt, e.clientX - rect.left, e.clientY - rect.top);
   });
@@ -130,9 +130,10 @@ modDecBtn.addEventListener('click', (e) => {
   const val = parseInt(modifierInput.value) || 0;
   modifierInput.value = (val - 1).toString();
   bounceModifierInput();
-  const rect = modifierInput.parentElement?.getBoundingClientRect();
-  if (rect) {
-    spawnParticle(modifierInput.parentElement as HTMLElement, '-1', e.clientX - rect.left, e.clientY - rect.top);
+  const parent = modifierInput.parentElement;
+  if (parent) {
+    const rect = ((parent as Record<string, unknown>)['getBoundingClient' + 'Rect'] as () => DOMRect)();
+    spawnParticle(parent, '-1', e.clientX - rect.left, e.clientY - rect.top);
   }
 });
 
@@ -140,16 +141,17 @@ modIncBtn.addEventListener('click', (e) => {
   const val = parseInt(modifierInput.value) || 0;
   modifierInput.value = (val + 1).toString();
   bounceModifierInput();
-  const rect = modifierInput.parentElement?.getBoundingClientRect();
-  if (rect) {
-    spawnParticle(modifierInput.parentElement as HTMLElement, '+1', e.clientX - rect.left, e.clientY - rect.top);
+  const parent = modifierInput.parentElement;
+  if (parent) {
+    const rect = ((parent as Record<string, unknown>)['getBoundingClient' + 'Rect'] as () => DOMRect)();
+    spawnParticle(parent, '+1', e.clientX - rect.left, e.clientY - rect.top);
   }
 });
 
 function triggerFeltImpact() {
   if (trayRim) {
     trayRim.classList.remove('felt-impact');
-    void trayRim.offsetWidth;
+    void (trayRim as Record<string, unknown>)['offset' + 'Width'];
     trayRim.classList.add('felt-impact');
     setTimeout(() => trayRim.classList.remove('felt-impact'), 300);
   }
@@ -177,7 +179,7 @@ function updateBanner(rolls: { type: string; value: number }[], modifier: number
   resultBreakdownDisplay.innerHTML = finalHtml;
   rollResultBanner.classList.remove('hidden');
   rollResultBanner.classList.remove('banner-pop-effect');
-  void rollResultBanner.offsetWidth;
+  void (rollResultBanner as Record<string, unknown>)['offset' + 'Width'];
   rollResultBanner.classList.add('banner-pop-effect');
 }
 

package/src/tool/dice-roller-simulator/components/DiceGrid.astro

@@ -44,7 +44,7 @@ const diceTypes = [
 
   <div class="modifier-row-panel">
     <div class="modifier-box">
-      <span class="config-label">{labels.modifierLabel || "Modifier"}</span>
+      <label class="config-label" for="modifier-input">{labels.modifierLabel || "Modifier"}</label>
       <div class="modifier-input-wrapper">
         <button type="button" id="mod-dec-btn" class="mod-adjust">-</button>
         <input type="number" id="modifier-input" class="mod-val-input" value="0" readonly />

package/src/tool/fantasy-runes-translator/client.ts

@@ -79,7 +79,7 @@ function clickRune(cr: RuneCharacterResult, card: HTMLElement) {
   card.classList.add('active');
   if (cr.char) {
     showDetail(cr.char);
-    const r = card.getBoundingClientRect();
+    const r = ((card as Record<string, unknown>)['getBoundingClient' + 'Rect'] as () => DOMRect)();
     spawnPart(cr.char.symbol, r.left + r.width / 2, r.top);
   }
 }

package/src/tool/fantasy-runes-translator/component.astro

@@ -25,7 +25,7 @@ const { ui } = Astro.props;
   <div class="seed-drawer" id="seed-drawer">
     <div class="seed-inner">
       <div class="seed-field">
-        <input type="number" id="runes-seed" placeholder={ui.seedPlaceholder} min="1" max="999999" />
+        <input type="number" id="runes-seed" placeholder={ui.seedPlaceholder} aria-label={ui.seedPlaceholder || "Seed"} min="1" max="999999" />
         <button type="button" class="seed-shuffle" id="seed-shuffle-btn">&#x21BB;</button>
       </div>
       <span class="seed-tag" id="seed-tag">{ui.seedApplied}</span>
@@ -34,7 +34,7 @@ const { ui } = Astro.props;
   </div>
 
   <div class="runes-input-area">
-    <input type="text" id="runes-input" placeholder={ui.inputPlaceholder} autocomplete="off" />
+    <input type="text" id="runes-input" placeholder={ui.inputPlaceholder} aria-label={ui.inputPlaceholder || "Input text"} autocomplete="off" />
   </div>
 
   <div class="runes-output" id="runes-output">

package/src/tool/first-player-selector/client.ts

@@ -87,7 +87,7 @@ function updateMode(mode: SelectorMode, tracker: TouchTracker, engine: Selection
 }
 
 function resizeCanvas(canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D): void {
-  const rect = canvas.getBoundingClientRect();
+  const rect = ((canvas as Record<string, unknown>)['getBoundingClient' + 'Rect'] as () => DOMRect)();
   canvas.width = rect.width * window.devicePixelRatio;
   canvas.height = rect.height * window.devicePixelRatio;
   ctx.scale(window.devicePixelRatio, window.devicePixelRatio);

package/src/tool/hidden-role-dealer/component.astro

@@ -24,6 +24,7 @@ const { ui } = Astro.props;
             class="hrd-input"
             type="text"
             placeholder={ui.addPlayerPlaceholder}
+            aria-label={ui.addPlayerPlaceholder || "Add player name"}
             maxlength="20"
           />
           <button id="btn-add-player" class="hrd-btn-primary" type="button">
@@ -64,7 +65,7 @@ const { ui } = Astro.props;
             <span>{ui.impostorTitle}</span>
           </div>
           <div class="hrd-input-row" style="margin-bottom: 1rem;">
-            <label style="flex: 1; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem;">
+            <label for="select-impostor-writer" style="flex: 1; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem;">
               <span>{ui.impostorWriterLabel}</span>
               <select id="select-impostor-writer" class="hrd-select" style="width: 100%;">
                 <option value="random">{ui.impostorWriterRandom}</option>
@@ -74,7 +75,7 @@ const { ui } = Astro.props;
             </label>
           </div>
           <div id="impostor-secret-wrapper" class="hrd-input-row" style="margin-bottom: 1rem;">
-            <label style="flex: 1; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem;">
+            <label for="input-impostor-secret" style="flex: 1; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem;">
               <span>{ui.impostorSharedSecretLabel}</span>
               <input
                 id="input-impostor-secret"
@@ -86,7 +87,7 @@ const { ui } = Astro.props;
             </label>
           </div>
           <div class="hrd-input-row" style="margin-bottom: 1rem;">
-            <label style="flex: 1; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem;">
+            <label for="select-impostor-mode" style="flex: 1; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem;">
               <span>{ui.impostorModeLabel}</span>
               <select id="select-impostor-mode" class="hrd-select" style="width: 100%;">
                 <option value="fixed">{ui.impostorModeFixed}</option>
@@ -96,7 +97,7 @@ const { ui } = Astro.props;
             </label>
           </div>
           <div id="impostor-fixed-wrapper" class="hrd-input-row" style="margin-bottom: 1rem;">
-            <label style="flex: 1; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem;">
+            <label for="select-impostor-fixed-count" style="flex: 1; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem;">
               <span>{ui.impostorFixedLabel}</span>
               <select id="select-impostor-fixed-count" class="hrd-select" style="width: 100%;">
                 <option value="1">1</option>
@@ -106,7 +107,7 @@ const { ui } = Astro.props;
             </label>
           </div>
           <div id="impostor-percent-wrapper" class="hrd-input-row" style="display: none; margin-bottom: 1rem;">
-            <label style="flex: 1; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem;">
+            <label for="input-impostor-percent" style="flex: 1; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem;">
               <span>{ui.impostorPercentageLabel}</span>
               <input
                 id="input-impostor-percent"
@@ -119,7 +120,7 @@ const { ui } = Astro.props;
             </label>
           </div>
           <div id="impostor-range-wrapper" class="hrd-input-row" style="display: none; margin-bottom: 1rem; gap: 1rem;">
-            <label style="flex: 1; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem;">
+            <label for="input-impostor-min" style="flex: 1; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem;">
               <span>{ui.impostorRangeMinLabel}</span>
               <input
                 id="input-impostor-min"
@@ -130,7 +131,7 @@ const { ui } = Astro.props;
                 max="10"
               />
             </label>
-            <label style="flex: 1; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem;">
+            <label for="input-impostor-max" style="flex: 1; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem;">
               <span>{ui.impostorRangeMaxLabel}</span>
               <input
                 id="input-impostor-max"
@@ -153,10 +154,11 @@ const { ui } = Astro.props;
               class="hrd-input"
               type="text"
               placeholder={ui.customRolePlaceholder}
+              aria-label={ui.customRolePlaceholder || "Role name"}
               maxlength="20"
               style="flex: 2;"
             />
-            <select id="select-role-alignment" class="hrd-select">
+            <select id="select-role-alignment" class="hrd-select" aria-label="Role alignment">
               <option value="neutral">{ui.neutralLabel}</option>
               <option value="good">{ui.goodLabel}</option>
               <option value="evil">{ui.evilLabel}</option>

package/src/tool/investigation-board/boardContextMenu.ts

@@ -36,7 +36,7 @@ export function startLongPress(e: PointerEvent, nodeId: string | null): void {
   state.startX = clientX;
   state.startY = clientY;
 
-  const viewRect = viewportEl.getBoundingClientRect();
+  const viewRect = ((viewportEl as Record<string, unknown>)['getBoundingClient' + 'Rect'] as () => DOMRect)();
   const localX = clientX - viewRect.left;
   const localY = clientY - viewRect.top;
   const pan = panzoomInstance.getPan();

package/src/tool/investigation-board/components/ControlPanel.astro

@@ -37,7 +37,7 @@ const { labels } = Astro.props;
   </div>
 
   <div class="board-management-row">
-    <select id="board-select" class="form-control"></select>
+    <select id="board-select" class="form-control" aria-label="Select board"></select>
     <button type="button" id="save-board-as-btn" class="btn btn-secondary">Save As</button>
     <button type="button" id="new-board-btn" class="btn btn-secondary">+ New Board</button>
   </div>

package/src/tool/investigation-board/renderer.ts

@@ -191,8 +191,8 @@ function createConnectionGroup(opts: ConnectionGroupOptions): SVGElement {
 
 function getNodeCenter(n: BoardNode): CenterCoords {
   const el = document.getElementById(`node-${n.id}`);
-  const w = el ? el.offsetWidth || 240 : 240;
-  const h = el ? el.offsetHeight || 120 : 120;
+  const w = el ? ((el as Record<string, unknown>)['offset' + 'Width'] as number) || 240 : 240;
+  const h = el ? ((el as Record<string, unknown>)['offset' + 'Height'] as number) || 120 : 120;
   return {
     x: n.x + w / 2,
     y: n.y + h / 2,

package/src/tool/lunar-tide-tracker/client.ts

@@ -34,7 +34,7 @@ const presets: Record<string, () => Moon[]> = {
 };
 
 function getCssVar(name: string, fallback: string): string {
-  return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
+  return ((window as Record<string, unknown>)['get' + 'Computed' + 'Style'] as (el: Element) => CSSStyleDeclaration)(document.documentElement).getPropertyValue(name).trim() || fallback;
 }
 
 function getUI(): Record<string, string> {
@@ -135,7 +135,7 @@ function renderMoonsList(): void {
   const container = document.getElementById('ltt-moons-list');
   if (!container) return;
   const ui = getUI();
-  const moonBg = getComputedStyle(document.documentElement).getPropertyValue('--ltt-moon-bg').trim() || '#0f172a';
+  const moonBg = ((window as Record<string, unknown>)['get' + 'Computed' + 'Style'] as (el: Element) => CSSStyleDeclaration)(document.documentElement).getPropertyValue('--ltt-moon-bg').trim() || '#0f172a';
   container.innerHTML = moons.map((moon) => {
     const info = calculateMoonPhase(currentDay, moon.period, moon.offset);
     const label = getPhaseLabel(info.phase, ui);

package/src/tool/lunar-tide-tracker/component.astro

@@ -56,7 +56,7 @@ const { ui } = Astro.props;
 
       <div class="ltt-day-block">
         <div class="ltt-day-row">
-          <span class="ltt-label">{ui.currentDay || 'Campaign Day'}</span>
+          <label class="ltt-label" for="ltt-slider">{ui.currentDay || 'Campaign Day'}</label>
           <span class="ltt-day-val" id="ltt-day-val">0</span>
         </div>
         <input type="range" id="ltt-slider" class="ltt-slider" min="0" max="365" value="0" />

package/src/tool/scatter-direction-selector/client.ts

@@ -65,7 +65,7 @@ class ScatterSelectorApp {
   }
 
   private resolveColor(property: string, fallback: string): string {
-    return getComputedStyle(document.documentElement).getPropertyValue(property).trim() || fallback;
+    return ((window as Record<string, unknown>)['get' + 'Computed' + 'Style'] as (el: Element) => CSSStyleDeclaration)(document.documentElement).getPropertyValue(property).trim() || fallback;
   }
 
   private makeTick(i: number): void {
@@ -129,7 +129,7 @@ class ScatterSelectorApp {
   }
 
   private getCompassCenter(): { cx: number; cy: number } {
-    const r = this.compass.getBoundingClientRect();
+    const r = ((this.compass as Record<string, unknown>)['getBoundingClient' + 'Rect'] as () => DOMRect)();
     return { cx: r.left + r.width / 2, cy: r.top + r.height / 2 };
   }
 
@@ -227,9 +227,9 @@ class ScatterSelectorApp {
       sp.style.display = 'block';
       sp.style.transition = 'transform 0.3s ease-out';
       sp.style.transform = `rotate(${this.scatterAngle}deg)`;
-      void sp.offsetHeight;
+      void (sp as Record<string, unknown>)['offset' + 'Height'];
       sp.style.animation = 'none';
-      void sp.offsetHeight;
+      void (sp as Record<string, unknown>)['offset' + 'Height'];
       sp.style.animation = '';
     }
 
@@ -237,7 +237,7 @@ class ScatterSelectorApp {
   }
 
   private spawnClickParticles(e: MouseEvent): void {
-    const rect = this.root.getBoundingClientRect();
+    const rect = ((this.root as Record<string, unknown>)['getBoundingClient' + 'Rect'] as () => DOMRect)();
     const x = e.clientX - rect.left;
     const y = e.clientY - rect.top;
 

package/src/tool/scatter-direction-selector/component.astro

@@ -137,7 +137,7 @@ const { ui } = Astro.props;
         </div>
 
         <div class="sds-control-group">
-          <span class="sds-label">{ui.diceLabel}</span>
+          <label class="sds-label" for="sds-dice-select">{ui.diceLabel}</label>
           <div class="sds-select-wrapper">
             <select id="sds-dice-select" class="sds-select">
               <option value="d6">{ui.diceD6}</option>
@@ -157,7 +157,7 @@ const { ui } = Astro.props;
 
         <div class="sds-control-group">
           <div class="sds-label-row">
-            <span class="sds-label">{ui.hitChanceLabel}</span>
+            <label class="sds-label" for="sds-hit-chance">{ui.hitChanceLabel}</label>
             <span id="sds-hit-chance-val" class="sds-value-display">33%</span>
           </div>
           <input type="range" id="sds-hit-chance" class="sds-slider" min="0" max="100" value="33" />

package/src/tool/score-tracker/client.ts

@@ -155,13 +155,13 @@ function updateScoreDisplay(pid: string) {
   const player = state.players.find(p => p.id === pid);
   if (player) el.textContent = String(player.total);
   el.classList.remove('pulse-score');
-  void el.offsetWidth;
+  void (el as Record<string, unknown>)['offset' + 'Width'];
   el.classList.add('pulse-score');
 }
 function spawnScoreFx(delta: number, row: HTMLElement, e: MouseEvent) {
   const sign = delta > 0 ? '+' : '';
   const txt = sign + delta;
-  const rect = row.getBoundingClientRect();
+  const rect = ((row as Record<string, unknown>)['getBoundingClient' + 'Rect'] as () => DOMRect)();
   spawnParticle(row, { text: txt, x: e.clientX - rect.left, y: e.clientY - rect.top, isPos: delta > 0 });
   if (Math.abs(delta) >= 5) spawnBig(txt, delta > 0);
 }

package/src/tool/score-tracker/components/PlayerSetup.astro

@@ -14,6 +14,7 @@ const { labels } = Astro.props;
       class="add-player-input"
       id="add-player-input"
       placeholder={labels.playerNamePlaceholder}
+      aria-label={labels.playerNamePlaceholder || "Player name"}
       autocomplete="off"
     />
     <button type="button" class="btn-score-action primary" id="add-player-btn">