i18n(ar): address code review findings

Mirror the dock trays and their pin, the compact Radio window and the
phone top-bar actions in right-to-left; keep the Cyber cockpit's Data
Layers stack on the left edge. Isolate the Space Missions counter,
landing coordinates and CCTV summary parts, format their numbers with
the locale's numerals, decide pack shot titles by the marker binding,
and place Bhote Koshi media cards between the panels on either side.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

src/data/bhoteKoshiEmbeddedMedia.js

@@ -569,7 +569,8 @@ function anchorOnScreen(viewer, anchor, root) {
   return { x, y, width: rootBounds.width, height: rootBounds.height };
 }
 
-function placeCard(card, leader, anchor) {
+/** Place a media card beside its map anchor, in the lane between the panels. */
+export function placeCard(card, leader, anchor) {
   const margin = 18;
   const gap = 42;
   const width = card.offsetWidth || 392;
@@ -580,22 +581,22 @@ function placeCard(card, leader, anchor) {
   let laneRight = anchor.width - margin;
   let laneBottom = anchor.height - margin;
   if (rootBounds && documentRef?.querySelector) {
-    const leftPanel = documentRef
-      .querySelector('#scene-panel')
-      ?.getBoundingClientRect?.();
-    const rightRail = documentRef
-      .querySelector('#right-context-rail')
-      ?.getBoundingClientRect?.();
     const commandDock = documentRef
       .querySelector('#command-dock')
       ?.getBoundingClientRect?.();
-    if (leftPanel?.width > 0)
-      laneLeft = Math.max(laneLeft, leftPanel.right - rootBounds.left + margin);
-    if (rightRail?.width > 0)
-      laneRight = Math.min(
-        laneRight,
-        rightRail.left - rootBounds.left - margin,
-      );
+    // The scene panel and the context rail swap sides in right-to-left
+    // languages: each narrows the lane from the side it sits on.
+    for (const selector of ['#scene-panel', '#right-context-rail']) {
+      const panel = documentRef
+        .querySelector(selector)
+        ?.getBoundingClientRect?.();
+      if (!(panel?.width > 0)) continue;
+      const start = panel.left - rootBounds.left;
+      const end = panel.right - rootBounds.left;
+      if (start + end < rootBounds.width)
+        laneLeft = Math.max(laneLeft, end + margin);
+      else laneRight = Math.min(laneRight, start - margin);
+    }
     if (commandDock?.height > 0)
       laneBottom = Math.min(
         laneBottom,

src/data/bhoteKoshiEmbeddedMedia.test.mjs

@@ -6,6 +6,7 @@ import {
   createBhoteKoshiEmbeddedMedia,
   createTrimmedYouTubePlayback,
   embeddedMediaFrameUrl,
+  placeCard,
   publicEmbeddedMediaUrl,
   resolveEmbeddedMediaSource,
 } from './bhoteKoshiEmbeddedMedia.js';
@@ -394,3 +395,25 @@ test('pausing cancels a mounted Facebook preload and rejects its late ready call
   assert.deepEqual(playerCalls, []);
   media.destroy();
 });
+
+test('a media card stays between the panels when right-to-left swaps their sides', () => {
+  const rect = (left, right, top = 0, bottom = 900) => ({ left, right, top, bottom, width: right - left, height: bottom - top });
+  // Arabic: the scene panel sits on the right, the context rail on the left.
+  const panels = {
+    '#scene-panel': rect(1040, 1420),
+    '#right-context-rail': rect(20, 340),
+    '#command-dock': rect(500, 940, 820, 880),
+  };
+  const card = {
+    offsetWidth: 392,
+    offsetHeight: 360,
+    parentElement: { getBoundingClientRect: () => rect(0, 1440) },
+    ownerDocument: { querySelector: (selector) => ({ getBoundingClientRect: () => panels[selector] }) },
+    classList: { contains: () => false },
+    style: {},
+  };
+  placeCard(card, { querySelector: () => null }, { x: 700, y: 400, width: 1440, height: 900 });
+  const left = parseFloat(card.style.left);
+  assert.ok(left >= 340 + 18, `card at ${left}px lands on the context rail`);
+  assert.ok(left + 392 <= 1040 - 18, `card at ${left}px lands on the scene panel`);
+});

src/data/geoFileImport.js

@@ -65,7 +65,8 @@ const KML_REMOVED_ELEMENTS = new Set([
 /**
  * An error whose message is meant for the person who chose the file. The
  * message stays English; `template` and `values`, when given, let the UI show
- * it in the active language.
+ * it in the active language. Numbers stay numbers in `values`: the UI formats
+ * them in that language's numerals.
  */
 export class GeoImportError extends Error {
   constructor(message, template = message, values = {}) {
@@ -259,7 +260,7 @@ function overLimitError({ over, features }) {
     return new GeoImportError(
       `That file creates more than ${MAX_IMPORT_ENTITIES.toLocaleString()} map objects (the limit).`,
       msg('That file creates more than {limit} map objects (the limit).'),
-      { limit: MAX_IMPORT_ENTITIES.toLocaleString() },
+      { limit: MAX_IMPORT_ENTITIES },
     );
   if (over === 'links')
     return new GeoImportError(
@@ -267,13 +268,13 @@ function overLimitError({ over, features }) {
       msg(
         'That file has more than {limit} style definitions and image links after cleanup (the limit).',
       ),
-      { limit: MAX_KML_LINKS.toLocaleString() },
+      { limit: MAX_KML_LINKS },
     );
   if (over === 'features')
     return new GeoImportError(
       `That file has more than ${MAX_IMPORT_ENTITIES.toLocaleString()} features (the limit).`,
       msg('That file has more than {limit} features (the limit).'),
-      { limit: MAX_IMPORT_ENTITIES.toLocaleString() },
+      { limit: MAX_IMPORT_ENTITIES },
     );
   const limit = MAX_IMPORT_POSITIONS.toLocaleString();
   if (features)
@@ -282,12 +283,12 @@ function overLimitError({ over, features }) {
       msg(
         'That file has more than {limit} points (the limit) across {features} features.',
       ),
-      { limit, features: features.toLocaleString() },
+      { limit: MAX_IMPORT_POSITIONS, features },
     );
   return new GeoImportError(
     `That file has more than ${limit} points (the limit).`,
     msg('That file has more than {limit} points (the limit).'),
-    { limit },
+    { limit: MAX_IMPORT_POSITIONS },
   );
 }
 
@@ -1466,8 +1467,8 @@ export async function loadGeoFile(
       `That file has ${entityCount.toLocaleString()} map objects; the limit is ${MAX_IMPORT_ENTITIES.toLocaleString()}.`,
       msg('That file has {count} map objects; the limit is {limit}.'),
       {
-        count: entityCount.toLocaleString(),
-        limit: MAX_IMPORT_ENTITIES.toLocaleString(),
+        count: entityCount,
+        limit: MAX_IMPORT_ENTITIES,
       },
     );
   }