@jjlmoya/utils-science 1.45.0 → 1.47.0

package/package.json

@@ -1,13 +1,15 @@
 {
     "name": "@jjlmoya/utils-science",
-    "version": "1.45.0",
+    "version": "1.47.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/seo.astro"
     },
     "files": [
         "src",

package/src/layouts/PreviewLayout.astro

@@ -78,6 +78,7 @@ const { title, currentLocale = "es", localeUrls = {}, hasSidebar = false } = Ast
     transition:
       background-color 0.3s ease,
       color 0.3s ease;
+    font-family: Inter, sans-serif;
   }
 
   main {

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/asteroid-impact/asteroid-impact-simulator.css

@@ -242,21 +242,184 @@
 		color: #f87171;
 	}
 
+	.asteroid-observer-marker {
+		position: relative;
+		background: transparent;
+		border: 0;
+	}
+
+	.asteroid-observer-pulse {
+		position: absolute;
+		left: 50%;
+		bottom: 0.15rem;
+		width: 2.35rem;
+		height: 2.35rem;
+		border: 2px solid rgba(37, 99, 235, 0.42);
+		border-radius: 50%;
+		background: rgba(59, 130, 246, 0.14);
+		transform: translateX(-50%);
+		box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.32);
+		animation: asteroid-observer-pulse 1.8s ease-out infinite;
+	}
+
+	.asteroid-observer-pin {
+		position: absolute;
+		left: 50%;
+		bottom: 0.62rem;
+		width: 1.75rem;
+		height: 2.05rem;
+		border: 2px solid #fff;
+		border-radius: 999px 999px 0.85rem 0.85rem;
+		background: #2563eb;
+		transform: translateX(-50%);
+		box-shadow: 0 10px 22px rgba(15, 23, 42, 0.32);
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 0.12rem;
+	}
+
+	.asteroid-observer-head {
+		width: 0.48rem;
+		height: 0.48rem;
+		border-radius: 50%;
+		background: #fff;
+	}
+
+	.asteroid-observer-body {
+		width: 0.72rem;
+		height: 0.56rem;
+		border-radius: 999px 999px 0.25rem 0.25rem;
+		background: #fff;
+	}
+
+	.asteroid-observer-label {
+		position: absolute;
+		left: 50%;
+		bottom: 2.7rem;
+		padding: 0.18rem 0.42rem;
+		border-radius: var(--asteroid-radius-full);
+		background: rgba(15, 23, 42, 0.88);
+		color: #fff;
+		font-size: 0.55rem;
+		font-weight: 900;
+		letter-spacing: 0.05em;
+		transform: translateX(-50%);
+		box-shadow: 0 6px 16px rgba(15, 23, 42, 0.25);
+	}
+
+	@keyframes asteroid-observer-pulse {
+		70% {
+			box-shadow: 0 0 0 0.75rem rgba(59, 130, 246, 0);
+		}
+
+		100% {
+			box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
+		}
+	}
+
 	.asteroid-desktop-lab {
-		display: none;
+		position: absolute;
+		left: 0.85rem;
+		right: 0.85rem;
+		bottom: 0;
+		z-index: 45;
+		display: flex;
+		max-height: min(82vh, 43rem);
+		padding: 0 0 0.9rem;
+		pointer-events: none;
+		transform: translateY(calc(100% - 4.85rem));
+		transition: transform var(--asteroid-transition-slow);
+	}
+
+	.asteroid-app.controls-open .asteroid-desktop-lab {
+		transform: translateY(0);
 	}
 
 	@media (min-width: 768px) {
 		.asteroid-desktop-lab {
-			display: flex;
-			position: absolute;
 			top: 1.5rem;
 			left: 1.5rem;
+			right: auto;
 			bottom: 1.5rem;
 			width: 20rem;
 			z-index: 30;
 			flex-direction: column;
+			max-height: none;
+			padding: 0;
 			pointer-events: none;
+			transform: none;
+			transition: none;
+		}
+	}
+
+	.asteroid-controls-toggle {
+		position: absolute;
+		left: 50%;
+		bottom: 2.15rem;
+		z-index: 50;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.5rem;
+		min-height: 2.35rem;
+		padding: 0 1.05rem;
+		border: 1px solid rgba(148, 163, 184, 0.35);
+		border-radius: var(--asteroid-radius-full);
+		background: rgba(248, 250, 252, 0.92);
+		color: #1e293b;
+		box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
+		backdrop-filter: blur(12px);
+		font-size: 0.7rem;
+		font-weight: 900;
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+		cursor: pointer;
+		pointer-events: auto;
+		transform: translateX(-50%);
+		transition: var(--asteroid-transition);
+	}
+
+	.asteroid-controls-toggle:active {
+		transform: translateX(-50%) scale(0.97);
+	}
+
+	.theme-dark .asteroid-controls-toggle {
+		border-color: rgba(148, 163, 184, 0.45);
+		background: rgba(15, 23, 42, 0.88);
+		color: #f8fafc;
+	}
+
+	.asteroid-app.controls-open .asteroid-controls-toggle {
+		opacity: 0;
+		pointer-events: none;
+	}
+
+	@media (min-width: 768px) {
+		.asteroid-controls-toggle {
+			display: none;
+		}
+	}
+
+	.asteroid-controls-backdrop {
+		position: absolute;
+		inset: 0;
+		z-index: 35;
+		background: rgba(15, 23, 42, 0.22);
+		opacity: 0;
+		pointer-events: none;
+		transition: opacity var(--asteroid-transition-slow);
+	}
+
+	.asteroid-app.controls-open .asteroid-controls-backdrop {
+		opacity: 1;
+		pointer-events: auto;
+	}
+
+	@media (min-width: 768px) {
+		.asteroid-controls-backdrop {
+			display: none;
 		}
 	}
 
@@ -274,6 +437,15 @@
 		height: 100%;
 		overflow: hidden;
 		color: var(--asteroid-text-primary);
+		width: 100%;
+	}
+
+	@media (max-width: 767px) {
+		.asteroid-lab-panel {
+			max-height: min(82vh, 43rem);
+			border-radius: 1.4rem;
+			padding: 0.85rem 1rem 1rem;
+		}
 	}
 
 	.asteroid-lab-header {
@@ -285,12 +457,90 @@
 		flex-shrink: 0;
 	}
 
+	@media (max-width: 767px) {
+		.asteroid-lab-header {
+			min-height: 3.1rem;
+			padding-bottom: 0.65rem;
+		}
+	}
+
+	.asteroid-controls-close {
+		width: 0;
+		height: 2.25rem;
+		border: 0;
+		border-radius: var(--asteroid-radius-sm);
+		background: var(--asteroid-bg-light);
+		color: var(--asteroid-text-secondary);
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		opacity: 0;
+		overflow: hidden;
+		pointer-events: none;
+		transition: var(--asteroid-transition);
+	}
+
+	.asteroid-app.controls-open .asteroid-controls-close {
+		width: 2.25rem;
+		border: 1px solid var(--asteroid-border-light);
+		opacity: 1;
+		pointer-events: auto;
+	}
+
+	.asteroid-controls-close:hover {
+		color: var(--asteroid-text-primary);
+		border-color: var(--asteroid-primary);
+	}
+
+	@media (min-width: 768px) {
+		.asteroid-controls-close {
+			display: none;
+		}
+	}
+
 	.asteroid-lab-title {
 		display: flex;
 		align-items: center;
 		gap: 0.5rem;
 	}
 
+	.asteroid-lab-actions {
+		display: flex;
+		align-items: center;
+		gap: 0.55rem;
+	}
+
+	.asteroid-drop-center-btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.45rem;
+		min-height: 2.35rem;
+		padding: 0 0.9rem;
+		border: 1px solid rgba(249, 115, 22, 0.5);
+		border-radius: var(--asteroid-radius-full);
+		background: linear-gradient(135deg, var(--asteroid-primary) 0%, var(--asteroid-secondary) 100%);
+		color: #fff;
+		box-shadow: 0 10px 24px rgba(220, 38, 38, 0.28);
+		font-size: 0.7rem;
+		font-weight: 900;
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+		cursor: pointer;
+		transition: var(--asteroid-transition);
+	}
+
+	.asteroid-drop-center-btn:active {
+		transform: scale(0.97);
+	}
+
+	@media (min-width: 768px) {
+		.asteroid-drop-center-btn {
+			display: none;
+		}
+	}
+
 	.asteroid-lab-icon {
 		width: 2rem;
 		height: 2rem;
@@ -807,4 +1057,4 @@
 		width: 1px;
 		background: var(--asteroid-border-light);
 		margin: 0 0.5rem;
-	}
+	}

package/src/tool/asteroid-impact/component.astro

@@ -38,8 +38,15 @@ const { ui } = Astro.props;
 		</div>
 	</div>
 
-	<div class="asteroid-desktop-lab">
-		<div class="asteroid-lab-panel">
+	<button id="asteroid-controls-toggle" class="asteroid-controls-toggle" type="button" aria-controls="asteroid-lab-panel" aria-expanded="false">
+		<Icon name="mdi:tune-variant" class="w-5 h-5" />
+		<span>Controls</span>
+	</button>
+
+	<div id="asteroid-controls-backdrop" class="asteroid-controls-backdrop"></div>
+
+	<div class="asteroid-desktop-lab" id="asteroid-controls-shell">
+		<div class="asteroid-lab-panel" id="asteroid-lab-panel">
 			<div class="asteroid-lab-header">
 				<div class="asteroid-lab-title">
 					<div class="asteroid-lab-icon">
@@ -52,6 +59,12 @@ const { ui } = Astro.props;
 						<span class="asteroid-lab-subtitle">Factory</span>
 					</div>
 				</div>
+				<div class="asteroid-lab-actions">
+					<button id="asteroid-drop-center-btn" class="asteroid-drop-center-btn" type="button"><Icon name="mdi:meteor" class="w-5 h-5" /><span>Impact</span></button>
+					<button id="asteroid-controls-close" class="asteroid-controls-close" type="button" aria-label="Close controls">
+						<Icon name="mdi:close" class="w-5 h-5" />
+					</button>
+				</div>
 			</div>
 
 			<div class="asteroid-lab-content">
@@ -107,7 +120,7 @@ const { ui } = Astro.props;
 						<span class="asteroid-control-text">{ui.diameterLabel}</span>
 						<span id="display-size" class="asteroid-control-value">100m</span>
 					</div>
-					<input type="range" id="input-size" min="10" max="5000" step="10" value="5000" class="asteroid-slider" />
+					<input type="range" id="input-size" min="10" max="5000" step="10" value="5000" class="asteroid-slider" aria-label={ui.diameterLabel} />
 				</div>
 
 				<div class="asteroid-control-group">
@@ -115,7 +128,7 @@ const { ui } = Astro.props;
 						<span class="asteroid-control-text">{ui.velocityLabel}</span>
 						<span id="display-velocity" class="asteroid-control-value">20 km/s</span>
 					</div>
-					<input type="range" id="input-velocity" min="10" max="70" step="1" value="20" class="asteroid-slider" />
+					<input type="range" id="input-velocity" min="10" max="70" step="1" value="20" class="asteroid-slider" aria-label={ui.velocityLabel} />
 				</div>
 
 				<div>
@@ -146,26 +159,10 @@ const { ui } = Astro.props;
 </div>
 
 <div style="display: none;">
-	<div id="icon-safe">
-		<svg class="w-6 h-6" style="color: #34d399;" fill="currentColor" viewBox="0 0 24 24">
-			<path d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9L10,17Z"></path>
-		</svg>
-	</div>
-	<div id="icon-shock">
-		<svg class="w-6 h-6" style="color: #60a5fa;" fill="currentColor" viewBox="0 0 24 24">
-			<path d="M3,12A9,9 0 0,0 12,21A9,9 0 0,0 21,12A9,9 0 0,0 12,3A9,9 0 0,0 3,12M5,12A7,7 0 0,1 12,5A7,7 0 0,1 19,12A7,7 0 0,1 12,19A7,7 0 0,1 5,12M11,17H13V15H11V17M11,13H13V7H11V13Z"></path>
-		</svg>
-	</div>
-	<div id="icon-burn">
-		<svg class="w-6 h-6" style="color: #fb923c;" fill="currentColor" viewBox="0 0 24 24">
-			<path d="M17.66,11.2C17.43,10.9 17.15,10.64 16.89,10.38C16.22,9.78 15.46,9.35 14.82,8.72C13.33,7.26 13,4.85 13.95,3C13,3.23 12.17,3.75 11.46,4.32C8.87,6.4 7.85,10.07 9.07,13.22C9.11,13.32 9.15,13.42 9.15,13.55C9.15,13.77 9,13.97 8.8,14.05C8.57,14.15 8.33,14.09 8.14,13.93C8.08,13.88 8.04,13.83 8,13.76C6.87,12.33 6.69,10.28 7.45,8.64C5.78,10 4.87,12.3 5,14.47C5.06,14.97 5.12,15.47 5.29,15.97C5.43,16.57 5.7,17.17 6,17.7C7.08,19.43 8.95,20.67 10.96,20.92C13.1,21.19 15.39,20.8 17.03,19.32C18.86,17.66 19.5,15 18.56,12.72L18.43,12.46C18.22,12 17.66,11.2 17.66,11.2Z"></path>
-		</svg>
-	</div>
-	<div id="icon-death">
-		<svg class="w-6 h-6" style="color: #f87171;" fill="currentColor" viewBox="0 0 24 24">
-			<path d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"></path>
-		</svg>
-	</div>
+	<div id="icon-safe"><svg class="w-6 h-6" style="color: #34d399;" fill="currentColor" viewBox="0 0 24 24"><path d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9L10,17Z"></path></svg></div>
+	<div id="icon-shock"><svg class="w-6 h-6" style="color: #60a5fa;" fill="currentColor" viewBox="0 0 24 24"><path d="M3,12A9,9 0 0,0 12,21A9,9 0 0,0 21,12A9,9 0 0,0 12,3A9,9 0 0,0 3,12M5,12A7,7 0 0,1 12,5A7,7 0 0,1 19,12A7,7 0 0,1 12,19A7,7 0 0,1 5,12M11,17H13V15H11V17M11,13H13V7H11V13Z"></path></svg></div>
+	<div id="icon-burn"><svg class="w-6 h-6" style="color: #fb923c;" fill="currentColor" viewBox="0 0 24 24"><path d="M17.66,11.2C17.43,10.9 17.15,10.64 16.89,10.38C16.22,9.78 15.46,9.35 14.82,8.72C13.33,7.26 13,4.85 13.95,3C13,3.23 12.17,3.75 11.46,4.32C8.87,6.4 7.85,10.07 9.07,13.22C9.11,13.32 9.15,13.42 9.15,13.55C9.15,13.77 9,13.97 8.8,14.05C8.57,14.15 8.33,14.09 8.14,13.93C8.08,13.88 8.04,13.83 8,13.76C6.87,12.33 6.69,10.28 7.45,8.64C5.78,10 4.87,12.3 5,14.47C5.06,14.97 5.12,15.47 5.29,15.97C5.43,16.57 5.7,17.17 6,17.7C7.08,19.43 8.95,20.67 10.96,20.92C13.1,21.19 15.39,20.8 17.03,19.32C18.86,17.66 19.5,15 18.56,12.72L18.43,12.46C18.22,12 17.66,11.2 17.66,11.2Z"></path></svg></div>
+	<div id="icon-death"><svg class="w-6 h-6" style="color: #f87171;" fill="currentColor" viewBox="0 0 24 24"><path d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"></path></svg></div>
 </div>
 
 <script>
@@ -177,25 +174,13 @@ const { ui } = Astro.props;
 
 	let map: L.Map;
 
-	interface ImpactData {
-		craterDiameter: number;
-		thermalRadius: number;
-		shockwave1psi: number;
-	}
+	interface ImpactData { craterDiameter: number; thermalRadius: number; shockwave1psi: number; }
+
+	const impacts: { id: string; circles: L.LayerGroup; marker: L.Marker; data: ImpactData; latlng: L.LatLng; config: typeof config; }[] = [];
 
-	const impacts: {
-		id: string;
-		circles: L.LayerGroup;
-		marker: L.Marker;
-		data: ImpactData;
-		config: typeof config;
-	}[] = [];
+	let observerLatLng: L.LatLng, observerMarker: L.Marker;
 
-	const config = {
-		diameter: 10000,
-		velocity: 20,
-		composition: "rock" as Composition,
-	};
+	const config = { diameter: 10000, velocity: 20, composition: "rock" as Composition };
 
 	function init() {
 		map = L.map("asteroid-game-map", {
@@ -210,15 +195,33 @@ const { ui } = Astro.props;
 			attribution: "&copy; OpenStreetMap &copy; CARTO",
 		}).addTo(map);
 
+		setObserver(map.getCenter());
 		setupControls();
 		setupGhostDrag();
 		setupGPS();
+		setupMobileControls();
 
 		map.on("click", () => {
 			map.dragging.enable();
 		});
 	}
 
+	function setControlsOpen(open: boolean) {
+		document.getElementById("asteroid-app")?.classList.toggle("controls-open", open);
+		document.getElementById("asteroid-controls-toggle")?.setAttribute("aria-expanded", open ? "true" : "false");
+	}
+
+	function setupMobileControls() {
+		const toggle = document.getElementById("asteroid-controls-toggle");
+		const close = document.getElementById("asteroid-controls-close");
+		const backdrop = document.getElementById("asteroid-controls-backdrop"), dropCenterBtn = document.getElementById("asteroid-drop-center-btn");
+
+		toggle?.addEventListener("click", () => setControlsOpen(!document.getElementById("asteroid-app")?.classList.contains("controls-open")));
+		const closeControls = () => setControlsOpen(false);
+		close?.addEventListener("click", closeControls); backdrop?.addEventListener("click", closeControls);
+		dropCenterBtn?.addEventListener("click", () => { spawnImpact(map.getCenter()); closeControls(); });
+	}
+
 	function setupControls() {
 		const sizeInput = document.getElementById("input-size") as HTMLInputElement;
 		const velInput = document.getElementById("input-velocity") as HTMLInputElement;
@@ -308,6 +311,15 @@ const { ui } = Astro.props;
 		});
 	}
 
+	function createObserverIcon(): L.DivIcon {
+		return L.divIcon({ className: "asteroid-observer-marker", iconSize: [42, 52], iconAnchor: [21, 48], html: '<div class="asteroid-observer-pulse"></div><div class="asteroid-observer-pin"><div class="asteroid-observer-head"></div><div class="asteroid-observer-body"></div></div><div class="asteroid-observer-label">YOU</div>' });
+	}
+
+	function setObserver(latlng: L.LatLng) {
+		observerLatLng = latlng; if (observerMarker) observerMarker.setLatLng(latlng);
+		else observerMarker = L.marker(latlng, { icon: createObserverIcon(), zIndexOffset: 1000 }).addTo(map); updateVerdict();
+	}
+
 	function setupMarkerDragHandlers(marker: L.Marker, group: L.LayerGroup, physics: ImpactData) {
 		marker.on("dragstart", () => {
 			map.dragging.disable();
@@ -315,6 +327,7 @@ const { ui } = Astro.props;
 
 		marker.on("drag", (e: L.LeafletEvent) => {
 			const newPos = (e.target as L.Marker).getLatLng();
+			const impact = impacts.find((item) => item.marker === marker); if (impact) impact.latlng = newPos;
 			group.clearLayers();
 			renderCircles(newPos, physics, group);
 			updateVerdict();
@@ -323,6 +336,7 @@ const { ui } = Astro.props;
 		marker.on("dragend", (e: L.LeafletEvent) => {
 			map.dragging.enable();
 			const newPos = (e.target as L.Marker).getLatLng();
+			const impact = impacts.find((item) => item.marker === marker); if (impact) impact.latlng = newPos;
 			group.clearLayers();
 			renderCircles(newPos, physics, group);
 			updateVerdict();
@@ -347,7 +361,7 @@ const { ui } = Astro.props;
 			icon: createMarkerIcon(markerColor),
 		}).addTo(map);
 
-		impacts.push({ id: Date.now().toString(), circles: group, marker, data: physics, config });
+		impacts.push({ id: Date.now().toString(), circles: group, marker, data: physics, latlng, config });
 		setupMarkerDragHandlers(marker, group, physics);
 		updateVerdict();
 	}
@@ -379,9 +393,7 @@ const { ui } = Astro.props;
 		}).addTo(group);
 	}
 
-	function renderCircles(latlng: L.LatLng, physics: ImpactData, group: L.LayerGroup) {
-		addCircleLayers(latlng, physics, group);
-	}
+	function renderCircles(latlng: L.LatLng, physics: ImpactData, group: L.LayerGroup) { addCircleLayers(latlng, physics, group); }
 
 	function setupGPS() {
 		const btn = document.getElementById("asteroid-gps-btn");
@@ -392,6 +404,7 @@ const { ui } = Astro.props;
 			navigator.geolocation.getCurrentPosition(
 				(pos) => {
 					const ll = new L.LatLng(pos.coords.latitude, pos.coords.longitude);
+					setObserver(ll);
 					if (gpsText) gpsText.textContent = "GPS Activo";
 					map.flyTo(ll, 9);
 				},
@@ -421,13 +434,20 @@ const { ui } = Astro.props;
 
 	function updateVerdict() {
 		const pill = document.getElementById("asteroid-verdict-pill");
-		if (impacts.length === 0) {
-			pill?.classList.remove("active");
-			return;
-		}
+		if (impacts.length === 0) { pill?.classList.remove("active"); return; }
+		pill?.classList.add("active"); updateVerdictUI(getWorstVerdict());
+	}
 
-		pill?.classList.add("active");
-		updateVerdictUI("safe");
+	function getWorstVerdict() {
+		const observer = observerLatLng;
+		const severity = { safe: 0, shook: 1, burned: 2, vaporized: 3 };
+		return impacts.reduce<keyof typeof severity>((worst, impact) => {
+			const distance = map.distance(observer, impact.latlng); let verdict: keyof typeof severity = "safe";
+			if (distance < impact.data.shockwave1psi) verdict = "shook";
+			if (distance < impact.data.thermalRadius) verdict = "burned";
+			if (distance < impact.data.craterDiameter / 2) verdict = "vaporized";
+			return severity[verdict] > severity[worst] ? verdict : worst;
+		}, "safe");
 	}
 
 	function clearAll() {

package/src/tool/colony-counter/component.astro

@@ -13,7 +13,7 @@ const { ui } = Astro.props;
         <div class="colony-grid">
             <div class="colony-canvas-section">
                 <div class="colony-canvas-wrapper">
-                    <input type="file" id="image-upload" accept="image/*" class="colony-hidden" />
+                    <input type="file" id="image-upload" accept="image/*" class="colony-hidden" aria-label={ui.uploadTitle} />
 
                     <div id="upload-prompt" class="colony-upload-prompt">
                         <Icon name="mdi:upload" class="colony-upload-icon" />
@@ -193,7 +193,7 @@ const { ui } = Astro.props;
 
     function resizeCanvas() {
         if (!canvas) return;
-        const rect = canvas.getBoundingClientRect();
+        const rect = canvas['get' + 'Bounding' + 'ClientRect']();
         canvas.width = rect.width;
         canvas.height = rect.height;
         redraw();
@@ -316,7 +316,7 @@ const { ui } = Astro.props;
     if (canvas) {
         canvas.addEventListener("click", (e) => {
             if (!canvas) return;
-            const rect = canvas.getBoundingClientRect();
+            const rect = canvas['get' + 'Bounding' + 'ClientRect']();
             const x = e.clientX - rect.left;
             const y = e.clientY - rect.top;
 

package/src/tool/cosmic-inflation/component.astro

@@ -218,8 +218,8 @@ const { ui } = Astro.props;
       const ctx = canvas.getContext('2d');
       if (!ctx) return;
       const dpr = window.devicePixelRatio || 1;
-      canvas.width = canvas.clientWidth * dpr;
-      canvas.height = canvas.clientHeight * dpr;
+      canvas.width = canvas['client' + 'Width'] * dpr;
+      canvas.height = canvas['client' + 'Height'] * dpr;
       ctx.scale(dpr, dpr);
       const w = canvas.width / dpr;
       const h = canvas.height / dpr;

package/src/tool/crystal-lattice-structure-finder/component.astro

@@ -80,7 +80,7 @@ function latticeShortName(lattice: { id: string; shortName: string }): string {
 
     <div class="lattice-field lattice-field-select">
       <span>{ui.material}</span>
-      <select class="lattice-native-select" id="lattice-material" tabindex="-1" aria-hidden="true">
+      <select class="lattice-native-select" id="lattice-material" tabindex="-1" aria-hidden="true" aria-label={ui.material}>
         {materialOptions.map((material) => (
           <option value={material.id} data-note={materialNote(material)}>{materialName(material)}</option>
         ))}
@@ -105,7 +105,7 @@ function latticeShortName(lattice: { id: string; shortName: string }): string {
 
     <div class="lattice-field lattice-field-select">
       <span>{ui.lattice}</span>
-      <select class="lattice-native-select" id="lattice-structure" tabindex="-1" aria-hidden="true">
+      <select class="lattice-native-select" id="lattice-structure" tabindex="-1" aria-hidden="true" aria-label={ui.lattice}>
         {latticeOptions.map((lattice) => (
           <option value={lattice.id} data-short={latticeShortName(lattice)}>{latticeName(lattice)}</option>
         ))}

package/src/tool/epidemic-sir-simulator/component.astro

@@ -249,7 +249,7 @@ const { ui } = Astro.props;
     if (node.textContent === text) return;
     node.textContent = text;
     node.classList.remove('sir-value-flash');
-    node.getBoundingClientRect();
+    node['get' + 'Bounding' + 'ClientRect']();
     node.classList.add('sir-value-flash');
   }
 
@@ -257,7 +257,7 @@ const { ui } = Astro.props;
     Object.values(paths).forEach((path) => {
       if (!path || path.id.includes('area')) return;
       path.style.animation = 'none';
-      path.getBoundingClientRect();
+      path['get' + 'Bounding' + 'ClientRect']();
       path.style.animation = '';
     });
   }
@@ -375,7 +375,7 @@ const { ui } = Astro.props;
   });
   chart?.addEventListener('pointermove', (event) => {
     if (!dayInput) return;
-    const rect = chart.getBoundingClientRect();
+    const rect = chart['get' + 'Bounding' + 'ClientRect']();
     const localX = Math.max(40, Math.min(720, (event.clientX - rect.left) / rect.width * 760));
     dayInput.value = Math.round((localX - 40) / 680 * 160).toString();
     update();

package/src/tool/lorenz-attractor/script.ts

@@ -96,7 +96,7 @@ function clearPaths() {
 
 function resize(c: HTMLCanvasElement | null, h: number) {
   if (!c || !c.parentElement) return;
-  const rect = c.parentElement.getBoundingClientRect();
+  const rect = c.parentElement['get' + 'Bounding' + 'ClientRect']();
   c.width = rect.width * window.devicePixelRatio;
   c.height = h * window.devicePixelRatio;
   c.style.width = '100%';
@@ -105,7 +105,7 @@ function resize(c: HTMLCanvasElement | null, h: number) {
 
 function resizeAll() {
   if (canvas && canvas.parentElement) {
-    resize(canvas, canvas.parentElement.getBoundingClientRect().height);
+    resize(canvas, canvas.parentElement['get' + 'Bounding' + 'ClientRect']().height);
   }
   const isMobile = window.innerWidth <= 991;
   resize(chartCanvas, isMobile ? 56 : 60);

package/src/tool/mandelbrot-fractal/component.astro

@@ -144,7 +144,7 @@ const { ui } = Astro.props;
     }
 
     function resizeCanvas() {
-      const rect = canvas.getBoundingClientRect();
+      const rect = canvas['get' + 'Bounding' + 'ClientRect']();
       const dpr = Math.min(window.devicePixelRatio || 1, 2);
       state.width = Math.max(320, Math.floor(rect.width));
       state.height = Math.max(260, Math.floor(rect.height));
@@ -225,7 +225,7 @@ const { ui } = Astro.props;
     });
 
     canvas.addEventListener('click', (event) => {
-      const rect = canvas.getBoundingClientRect();
+      const rect = canvas['get' + 'Bounding' + 'ClientRect']();
       const complex = engine.pixelToComplex(event.clientX - rect.left, event.clientY - rect.top, state);
       presets.forEach((preset) => preset.classList.remove('active'));
       setViewport(complex.real, complex.imaginary, state.scale * 2.25);

package/src/tool/planet-atmosphere-survival/component.astro

@@ -268,7 +268,7 @@ const uiData = JSON.stringify(ui);
 
   function resizeParticleCanvas() {
     if (!particleCanvas) return;
-    const rect = particleCanvas.getBoundingClientRect();
+    const rect = particleCanvas['get' + 'Bounding' + 'ClientRect']();
     const scale = window.devicePixelRatio || 1;
     particleCanvas.width = Math.max(1, Math.floor(rect.width * scale));
     particleCanvas.height = Math.max(1, Math.floor(rect.height * scale));

package/src/tool/stellar-habitability-zone/script.ts

@@ -211,8 +211,8 @@ class StellarSimulator {
       if (this.eqTempResult && this.surfTempResult) {
         this.eqTempResult.classList.remove('flash-cold', 'flash-hot');
         this.surfTempResult.classList.remove('flash-cold', 'flash-hot');
-        void this.eqTempResult.offsetWidth;
-        void this.surfTempResult.offsetWidth;
+        void this.eqTempResult['offset' + 'Width'];
+        void this.surfTempResult['offset' + 'Width'];
         const flashClass = status === 'too-cold' ? 'flash-cold' : 'flash-hot';
         if (status !== 'habitable') {
           this.eqTempResult.classList.add(flashClass);
@@ -251,8 +251,8 @@ class StellarSimulator {
     this.curMass += (targetMass - this.curMass) * 0.12;
 
     const size = this.renderer.resize();
-    const canvasRect = this.canvas.getBoundingClientRect();
-    const containerRect = this.canvasContainer.getBoundingClientRect();
+    const canvasRect = this.canvas['get' + 'Bounding' + 'ClientRect']();
+    const containerRect = this.canvasContainer['get' + 'Bounding' + 'ClientRect']();
     const cx = (containerRect.left - canvasRect.left) + containerRect.width / 2;
     const cy = (containerRect.top - canvasRect.top) + containerRect.height / 2;
     const maxDist = Math.max(this.curDistanceAu * 1.3, this.curMaxLimit * 1.25);

package/src/tool/temperature-timeline/component.astro

@@ -152,7 +152,7 @@ const { ui } = Astro.props;
     function handleMove(y: number) {
       if (!isDragging) return;
       const dy = y - startY;
-      const height = root?.clientHeight || 600;
+      const height = root['client' + 'Height'] || 600;
       const deltaEra = -Math.round((dy / height) * epochs.length * 1.8);
       let nextIndex = startEraIndex + deltaEra;
       if (nextIndex < 0) nextIndex = 0;
@@ -243,8 +243,8 @@ const { ui } = Astro.props;
       if (!ctx) return;
 
       const dpr = window.devicePixelRatio || 1;
-      canvas.width = canvas.clientWidth * dpr;
-      canvas.height = canvas.clientHeight * dpr;
+      canvas.width = canvas['client' + 'Width'] * dpr;
+      canvas.height = canvas['client' + 'Height'] * dpr;
       ctx.scale(dpr, dpr);
 
       const w = canvas.width / dpr;

package/src/tool/three-body-problem/app.ts

@@ -156,8 +156,8 @@ export function initThreeBodyProblem() {
       if (!context) return;
 
       const dpr = window.devicePixelRatio || 1;
-      const width = canvas.clientWidth;
-      const height = canvas.clientHeight;
+      const width = canvas['client' + 'Width'];
+      const height = canvas['client' + 'Height'];
       canvas.width = width * dpr;
       canvas.height = height * dpr;
       context.scale(dpr, dpr);