Initial commit: Vue 3 photo viewer, filters, zoom, docs

.gitignore

@@ -0,0 +1,11 @@
+# Ignore image contents but keep the folder
+imagenes/*
+!imagenes/.gitkeep
+
+# OS/editor junk
+.DS_Store
+Thumbs.db
+.idea/
+.vscode/
+node_modules/
+

README.md

@@ -0,0 +1,66 @@
+# Visualizador de Fotos / Foto‑Betrachter
+
+Aplicación web sin build (CDN) para visualizar y navegar imágenes localmente, leer EXIF (GPS/altitud), filtrar por metadatos embebidos en el nombre del archivo, ordenar, hacer zoom/pan y descargar la imagen actual. No se requiere servidor ni instalación.
+
+Build‑freie Web‑App (CDN) zum lokalen Betrachten von Bildern, Lesen von EXIF (GPS/Höhe), Filtern anhand im Dateinamen kodierter Metadaten, Sortieren, Zoomen/Pannen und Herunterladen des aktuellen Bildes. Kein Server, keine Installation nötig.
+
+## Español
+
+- Abrí `index.html` en tu navegador (funciona por `file://` o `http(s)` local).
+- Cargar imágenes: botón “Cargar imágenes” o arrastrar y soltar sobre el visor. Podés seleccionar varias o una carpeta (según navegador).
+- Navegación: flechas del teclado (izquierda/derecha) o botones ◀ ▶.
+- Filtros (barra superior):
+  - Finca: F1/F2/F3
+  - Aruco: G1/G2/G3/P1/P2/P3 (coincide si contiene cualquiera de los seleccionados)
+  - Altura: 60m/80m/100m (se interpreta desde nombres como `Finca-Altura-arucos-toma`, aceptando `M60` o `60m`)
+  - Si el filtro devuelve 0 resultados aparece “Limpiar filtros”.
+
+Formato de nombres (requerido para filtros)
+- Estructura: `Finca-Altura-arucos-toma`
+- Ejemplos válidos:
+  - `F1-M60-P1P2-5.JPG` → Finca F1 · Altura 60m · Arucos P1,P2 · Toma 5
+  - `F2-80m-G1-12.jpg` → Finca F2 · Altura 80m · Aruco G1 · Toma 12
+- Altura puede escribirse como `M60` o `60m` (se normaliza a 60m/80m/100m).
+- Los arucos pueden ir concatenados (P1P2, G1G2G3) o separados por comas.
+- Panel lateral:
+  - Ordenar por: Nombre, Tamaño, Modificada, Fecha EXIF, Altitud (asc/desc).
+  - Árbol de archivos: refleja la jerarquía y el orden actual.
+  - Detalles: Nombre editable (con “Guardar como…”), tamaño, fechas y GPS (si EXIF disponible). Enlace a Google Maps cuando hay coordenadas.
+- Zoom y pan: rueda del mouse o botones +/−, “Reset” para volver al encuadre. Arrastrá para panear cuando el zoom > 1.
+- Descargar: botón “Descargar” para guardar la imagen actual.
+- Idioma: botón “Deutsch/Español” en la barra superior cambia todos los textos de la interfaz.
+
+Limitaciones
+- El renombrado “en sitio” del archivo no se realiza (solo “Guardar como…”). Para manipular archivos en disco se necesitaría la File System Access API en contexto seguro (Chrome/Edge + localhost/https).
+- La lectura de EXIF desde URL locales puede variar por navegador.
+- Todo ocurre localmente en tu navegador; no se suben imágenes a ningún servidor.
+
+## Deutsch
+
+- `index.html` im Browser öffnen (funktioniert via `file://` oder lokalem `http(s)`).
+- Bilder laden: „Bilder laden“ oder per Drag‑and‑Drop in den Viewer. Mehrfachauswahl möglich (je nach Browser auch Ordner).
+- Navigation: Pfeiltasten (links/rechts) oder Buttons ◀ ▶.
+- Filter (obere Leiste):
+  - Finca: F1/F2/F3
+  - Aruco: G1/G2/G3/P1/P2/P3 (erfüllt, wenn eines der ausgewählten vorkommt)
+  - Höhe: 60m/80m/100m (aus Dateinamen wie `Finca-Altura-arucos-toma` erkannt; sowohl `M60` als auch `60m`)
+  - Wenn 0 Treffer: „Filter löschen“ erscheint.
+- Seitenleiste:
+  - Sortieren nach: Name, Größe, Geändert, EXIF‑Datum, Höhe (auf/absteigend).
+  - Dateibaum: zeigt Hierarchie und aktuelle Reihenfolge.
+  - Details: Bearbeitbarer Name (mit „Speichern unter…“), Größe, Datum und GPS (falls EXIF vorhanden). Link zu Google Maps bei Koordinaten.
+- Zoom & Pan: Mausrad oder +/−, „Zurücksetzen“ für Standardansicht. Bei Zoom > 1 ziehen zum Pannen.
+- Herunterladen: „Herunterladen“ speichert das aktuelle Bild.
+- Sprache: „Deutsch/Español“‑Button in der oberen Leiste wechselt alle UI‑Texte.
+
+Dateiname‑Format (für Filter erforderlich)
+- Struktur: `Finca-Altura-arucos-toma`
+- Gültige Beispiele:
+  - `F1-M60-P1P2-5.JPG` → Finca F1 · Höhe 60m · Aruco(s) P1,P2 · Aufnahme 5
+  - `F2-80m-G1-12.jpg` → Finca F2 · Höhe 80m · Aruco G1 · Aufnahme 12
+- Höhe kann als `M60` oder `60m` geschrieben werden (normalisiert zu 60m/80m/100m).
+- Arucos können zusammengehängt (P1P2, G1G2G3) oder kommasepariert sein.
+Einschränkungen
+- Direktes Umbenennen im Dateisystem erfolgt nicht (nur „Speichern unter…“). Für Schreibzugriff wäre die File System Access API im sicheren Kontext (Chrome/Edge + localhost/https) nötig.
+- EXIF‑Lesen kann je nach Browser unterschiedlich funktionieren.
+- Alles läuft lokal im Browser; es werden keine Bilder hochgeladen.

README.txt

@@ -0,0 +1,95 @@
+================================================================================
+  VISUALIZADOR DE FOTOS · FOTO‑BETRACHTER
+================================================================================
+
+Un visor de imágenes ligero (sin build) que corre 100% en tu navegador.
+Ein leichter Bildbetrachter (ohne Build), 100% im Browser.
+
+--------------------------------------------------------------------------------
+  ▶ ARRANQUE RÁPIDO · SCHNELLSTART
+--------------------------------------------------------------------------------
+1) Abre/Öffne: index.html (funciona via file:// o http(s)/lokal).
+2) Carga/Lade Bilder: botón “Cargar imágenes” / „Bilder laden“ o arrastra/ziehen.
+3) Navega/Navigiere: ◀ ▶ (flechas/Pfeile) o los botones en pantalla.
+4) Filtra/Filter: Finca, Aruco, Altura (puedes combinar Mehrfachauswahl).
+5) Ordena/Sortieren: Nombre/Größe/Geändert/EXIF‑Datum/Höhe (asc/desc).
+6) Zoom & Pan: rueda/Mausrad o +/−, “Reset/Zurücksetzen” para encuadre normal.
+7) Descargar/Herunterladen: guarda la imagen actual.
+8) Idioma/Sprache: “Deutsch/Español” cambia todos los textos de la UI.
+
+--------------------------------------------------------------------------------
+  ✦ ¿QUÉ LEE DEL NOMBRE? · WAS STEHT IM DATEINAMEN?
+--------------------------------------------------------------------------------
+Formato/Form:  Finca-Altura-arucos-toma
+Ejemplo/Beispiel:  F1-M60-P1P2-5  → Finca=F1 · Altura=60m · Aruco(s)=P1,P2 · Toma=5
+• Altura/Höhe: acepta „M60“ o „60m“ (normaliza a 60m/80m/100m)
+• Aruco: G1,G2,G3,P1,P2,P3 (también concatenados: P1P2, G1G2G3)
+• Toma/Aufnahme: número entero al final del nombre
+• Extensión/Erweiterung: .JPG/.JPEG/.PNG/.WEBP/.GIF/.HEIC
+
+--------------------------------------------------------------------------------
+  ☰ FILTROS (ES) · FILTER (DE)
+--------------------------------------------------------------------------------
+ES
+• Finca: F1, F2, F3
+• Aruco: G1, G2, G3, P1, P2, P3 (coincide si contiene cualquiera)
+• Altura: 60m, 80m, 100m
+• Si 0 resultados: aparece “Limpiar filtros”
+
+DE
+• Finca: F1, F2, F3
+• Aruco: G1, G2, G3, P1, P2, P3 (erfüllt, wenn eines vorkommt)
+• Höhe: 60m, 80m, 100m
+• Bei 0 Treffern: „Filter löschen“
+
+--------------------------------------------------------------------------------
+  ⇥ LATERAL (ES) · SEITENLEISTE (DE)
+--------------------------------------------------------------------------------
+ES
+• Ordenar: Nombre, Tamaño, Modificada, Fecha EXIF, Altitud (asc/desc)
+• Árbol: jerarquía y orden actuales
+• Detalles: nombre editable (Guardar como…), tamaño, fechas
+• GPS/EXIF: latitud, longitud, altitud (si disponible) + enlace a Google Maps
+
+DE
+• Sortieren: Name, Größe, Geändert, EXIF‑Datum, Höhe (auf/ab)
+• Dateibaum: aktuelle Hierarchie/Reihenfolge
+• Details: bearbeitbarer Name („Speichern unter…“), Größe, Datum
+• GPS/EXIF: Breite, Länge, Höhe (falls vorhanden) + Link zu Google Maps
+
+--------------------------------------------------------------------------------
+  🔍 ZOOM / PAN
+--------------------------------------------------------------------------------
+• Zoom: rueda del mouse / Mausrad o botones + / − (hasta/bis 12×)
+• Pan: arrastra/ziehen la imagen cuando hay zoom > 1
+• Reset/Zurücksetzen: vuelve a encuadre normal
+
+--------------------------------------------------------------------------------
+  ⬇ DESCARGA · HERUNTERLADEN
+--------------------------------------------------------------------------------
+• Guarda la imagen actual tal como se ve (sin modificar el archivo original)
+• Speichert das aktuelle Bild (Originaldatei bleibt unverändert)
+
+--------------------------------------------------------------------------------
+  🌐 IDIOMA · SPRACHE
+--------------------------------------------------------------------------------
+• Botón “Deutsch/Español” en la barra superior
+• Schalter „Deutsch/Español“ oben in der Leiste
+
+--------------------------------------------------------------------------------
+  ⚠ NOTAS / LIMITACIONES · HINWEISE / EINSCHRÄNKUNGEN
+--------------------------------------------------------------------------------
+• Renombrado: solo “Guardar como…”; no se escribe en el archivo original
+• Umbenennen: nur „Speichern unter…“, keine Schreibzugriffe auf Originaldateien
+• EXIF: lectura/Lesen depende del navegador
+• Todo/local: no se suben archivos · Es werden keine Dateien hochgeladen
+
+--------------------------------------------------------------------------------
+  💡 CONSEJOS · TIPPS
+--------------------------------------------------------------------------------
+• Para un servidor local simple:  python3 -m http.server 5173  (opcional)
+• Großes Set? Carga por carpeta (según soporte del navegador)
+
+================================================================================
+  HECHO CON VUE 3 (CDN) · GEMACHT MIT VUE 3 (CDN)
+================================================================================

imagenes/.gitkeep

@@ -0,0 +1 @@
+

index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="es">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Visualizador de Fotos</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <div id="app"></div>
+
+    <!-- Global CDN builds to work from file:// without CORS issues -->
+    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/exifr/dist/full.umd.js"></script>
+    <script src="./main.js"></script>
+  </body>
+  </html>

main.js

@@ -0,0 +1,748 @@
+// Use global Vue and exifr (loaded via CDN in index.html)
+const { createApp, ref, computed, onMounted, onUnmounted, watch } = Vue;
+
+const formatLatLng = (num, isLat) => {
+  if (typeof num !== 'number' || Number.isNaN(num)) return null;
+  const dir = isLat ? (num >= 0 ? 'N' : 'S') : (num >= 0 ? 'E' : 'W');
+  const abs = Math.abs(num);
+  const deg = Math.floor(abs);
+  const minFloat = (abs - deg) * 60;
+  const min = Math.floor(minFloat);
+  const sec = (minFloat - min) * 60;
+  return `${deg}° ${min}' ${sec.toFixed(2)}" ${dir}`;
+};
+
+const TreeNode = {
+  props: ['node', 'isExpanded', 'toggleExpand', 'isActiveId', 'selectById'],
+  template: `
+    <template v-if="node.type==='dir'">
+      <div class="node dir">
+        <div class="dir-row" @click="toggleExpand(node.path)">
+          <span class="caret">{{ isExpanded(node.path) ? '▼' : '▶' }}</span>
+          <span class="label" :title="node.path">{{ node.name || 'Raíz' }}</span>
+        </div>
+        <div v-if="isExpanded(node.path)" class="children">
+          <TreeNode v-for="child in node.children" :key="child.path || child.id"
+            :node="child"
+            :isExpanded="isExpanded"
+            :toggleExpand="toggleExpand"
+            :isActiveId="isActiveId"
+            :selectById="selectById"
+          />
+        </div>
+      </div>
+    </template>
+    <template v-else>
+      <div class="node file" :class="{ active: isActiveId(node.id) }" @click="selectById(node.id)">
+        <span class="dot">•</span>
+        <span class="label" :title="node.name">{{ node.name }}</span>
+      </div>
+    </template>
+  `,
+};
+
+const app = {
+  setup() {
+    const items = ref([]); // [{ file, url, name, size, lastModified, meta? }]
+    const current = ref(0); // index within orderedItems
+    const loadingMeta = ref(false);
+    const dragOver = ref(false);
+    const imgRef = ref(null);
+    const rootDirHandle = ref(null); // FS Access handle for the images folder (opened via Abrir carpeta)
+    const projectRootHandle = ref(null); // FS Access handle for the project root (to write manifest.js)
+    const sortKey = ref('name'); // name | size | modified | exifDate | altitude
+    const sortDir = ref('asc');  // asc | desc
+    const expanded = ref({ '': true }); // tree expansion state by dir path
+    const selectedFincas = ref([]); // ['F1','F2','F3']
+    const selectedAlturas = ref([]); // ['60m','80m','100m']
+    const selectedArucos = ref([]); // ['G1','G2','G3','P1','P2','P3']
+    const lang = ref('es');
+    const toggleLang = () => { lang.value = lang.value === 'es' ? 'de' : 'es'; };
+
+    const hasImages = computed(() => items.value.length > 0);
+    const filteredCount = computed(() => orderedItems.value.length);
+    const hasVisible = computed(() => filteredCount.value > 0);
+    const matchesFilters = (it) => {
+      const p = it.parsed || {};
+      // Finca
+      if (selectedFincas.value.length) {
+        if (!p.finca || !selectedFincas.value.includes(p.finca)) return false;
+      }
+      // Altura
+      if (selectedAlturas.value.length) {
+        if (!p.alturaText || !selectedAlturas.value.includes(p.alturaText)) return false;
+      }
+      // Arucos: match if item has ANY of the selected
+      if (selectedArucos.value.length) {
+        const arr = p.arucos || [];
+        if (!arr.some(a => selectedArucos.value.includes(a))) return false;
+      }
+      return true;
+    };
+    const orderedItems = computed(() => {
+      const arr = items.value.filter(matchesFilters).slice();
+      const dir = sortDir.value === 'desc' ? -1 : 1;
+      const key = sortKey.value;
+      const getVal = (it) => {
+        switch (key) {
+          case 'name': return (it.name || '').toLowerCase();
+          case 'size': return it.size || 0;
+          case 'modified': return it.lastModified || 0;
+          case 'exifDate': return it.meta?.date ? new Date(it.meta.date).getTime() : null;
+          case 'altitude': return typeof it.meta?.altitude === 'number' ? it.meta.altitude : null;
+          default: return (it.name || '').toLowerCase();
+        }
+      };
+      arr.sort((a, b) => {
+        const va = getVal(a); const vb = getVal(b);
+        const aNull = (va == null); const bNull = (vb == null);
+        if (aNull && bNull) return 0;
+        if (aNull) return 1; // nulls last
+        if (bNull) return -1;
+        if (va < vb) return -1 * dir;
+        if (va > vb) return 1 * dir;
+        // tie-breaker by name
+        const na = (a.name || '').toLowerCase();
+        const nb = (b.name || '').toLowerCase();
+        if (na < nb) return -1;
+        if (na > nb) return 1;
+        return 0;
+      });
+      return arr;
+    });
+    const currentItem = computed(() => hasVisible.value ? orderedItems.value[current.value] : null);
+
+    const parseFromName = (filename) => {
+      const base = filename.replace(/\.[^.]+$/, '');
+      const parts = base.split('-');
+      let finca = parts[0] || null;
+      let alturaText = null;
+      let arucosText = null;
+      let toma = null;
+      if (parts.length >= 2) {
+        const alt = parts[1] || '';
+        // Accept '60m' or 'M60' forms; normalize to '60m'
+        const m = alt.match(/(?:^M(\d+)$)|^(\d+)m$/i);
+        const num = m ? (m[1] || m[2]) : null;
+        alturaText = num ? (num + 'm') : alt;
+      }
+      if (parts.length >= 3) arucosText = parts[2] || null;
+      if (parts.length >= 4) {
+        const t = parts[3];
+        const tm = t.match(/(\d+)/);
+        toma = tm ? parseInt(tm[1], 10) : null;
+      }
+      // Parse arucos like 'P1P2P3' or 'G1G2' into tokens
+      const arucos = [];
+      if (arucosText) {
+        const re = /[GP][1-3]/g;
+        let m;
+        while ((m = re.exec(arucosText))) arucos.push(m[0]);
+        // If commas present, also split and normalize tokens
+        if (arucos.length === 0) {
+          for (const tok of arucosText.split(/[,+\s]+/)) if (/^[GP][1-3]$/.test(tok)) arucos.push(tok);
+        }
+      }
+      return { finca, alturaText, arucos, toma };
+    };
+
+    const decorateItem = (obj) => {
+      const parsed = parseFromName(obj.name || '');
+      obj.parsed = parsed;
+      return obj;
+    };
+
+    const selectFiles = async (fileList) => {
+      if (!fileList) return;
+      // Revoke old URLs
+      for (const it of items.value) {
+        try { URL.revokeObjectURL(it.url); } catch {}
+      }
+      const files = Array.from(fileList).filter(f => f.type.startsWith('image/'));
+      items.value = files.map((f, i) => decorateItem({
+        file: f,
+        url: URL.createObjectURL(f),
+        name: f.name,
+        newName: f.name,
+        size: f.size,
+        lastModified: f.lastModified,
+        path: f.webkitRelativePath || '',
+        meta: null,
+        metaError: null,
+        renameStatus: null, // 'ok' | 'warn' | 'error'
+        renameMessage: null,
+        id: (typeof crypto !== 'undefined' && crypto.randomUUID) ? crypto.randomUUID() : (Date.now() + '-' + Math.random().toString(36).slice(2) + '-' + i),
+      }));
+      current.value = 0;
+      // Preload metadata for the first image
+      if (items.value.length) await ensureMetadataIndex(0);
+    };
+
+    const ensureMetadataItem = async (it) => {
+      if (!it || it.meta || it.metaError) return;
+      loadingMeta.value = true;
+      try {
+        // exifr can parse File directly; get minimal info + GPS
+        const source = it.file || it.url;
+        const meta = await exifr.parse(source, { tiff: true, ifd0: true, exif: true, gps: true });
+        let lat = null, lng = null;
+        let altitudeVal = null;
+        let altitudeRef = null; // 0 = above sea level, 1 = below
+        try {
+          const gps = await exifr.gps(source);
+          if (gps && typeof gps.latitude === 'number' && typeof gps.longitude === 'number') {
+            lat = gps.latitude; lng = gps.longitude;
+          }
+          // Try altitude from gps block
+          const candAlt = gps?.altitude ?? gps?.Altitude ?? gps?.GPSAltitude;
+          const candRef = gps?.altitudeRef ?? gps?.AltitudeRef ?? gps?.GPSAltitudeRef;
+          if (typeof candAlt === 'number') altitudeVal = candAlt;
+          if (candRef != null) altitudeRef = candRef;
+        } catch {}
+        if (altitudeVal == null) {
+          const candAlt2 = meta?.GPSAltitude ?? meta?.Altitude ?? meta?.altitude;
+          const candRef2 = meta?.GPSAltitudeRef ?? meta?.AltitudeRef ?? meta?.altitudeRef;
+          if (typeof candAlt2 === 'number') altitudeVal = candAlt2;
+          if (candRef2 != null) altitudeRef = candRef2;
+        }
+        // Normalize altitude: if ref==1 means below sea level -> negative
+        if (typeof altitudeVal === 'number' && altitudeRef === 1) altitudeVal = -Math.abs(altitudeVal);
+        it.meta = {
+          lat,
+          lng,
+          latText: lat != null ? formatLatLng(lat, true) : null,
+          lngText: lng != null ? formatLatLng(lng, false) : null,
+          altitude: typeof altitudeVal === 'number' ? altitudeVal : null,
+          altitudeText: typeof altitudeVal === 'number' ? `${altitudeVal.toFixed(2)} m` : null,
+          make: meta?.Make || null,
+          model: meta?.Model || null,
+          date: meta?.DateTimeOriginal || meta?.CreateDate || null,
+          orientation: meta?.Orientation || null,
+        };
+      } catch (e) {
+        it.metaError = e?.message || String(e);
+      } finally {
+        loadingMeta.value = false;
+      }
+    };
+    const ensureMetadataIndex = async (idx) => {
+      const it = orderedItems.value[idx] ?? items.value[idx];
+      if (it) await ensureMetadataItem(it);
+    };
+
+    const prefetchMetaIfNeeded = () => {
+      if (sortKey.value === 'exifDate' || sortKey.value === 'altitude') {
+        // Fire and forget
+        for (const it of items.value) { ensureMetadataItem(it); }
+      }
+    };
+
+    const onFileInput = (e) => selectFiles(e.target.files);
+
+    // Zoom and pan state
+    const scale = ref(1);
+    const tx = ref(0);
+    const ty = ref(0);
+    const isPanning = ref(false);
+    const panStart = { x: 0, y: 0, tx: 0, ty: 0 };
+
+    const resetView = () => { scale.value = 1; tx.value = 0; ty.value = 0; };
+    const zoomBy = (delta) => { scale.value = Math.min(12, Math.max(1, scale.value + delta)); if (scale.value === 1) { tx.value = 0; ty.value = 0; } };
+    const onWheel = (e) => { e.preventDefault(); const delta = -Math.sign(e.deltaY) * 0.1; zoomBy(delta); };
+    const onPointerDown = (e) => { if (scale.value <= 1) return; isPanning.value = true; panStart.x = e.clientX; panStart.y = e.clientY; panStart.tx = tx.value; panStart.ty = ty.value; };
+    const onPointerMove = (e) => { if (!isPanning.value) return; tx.value = panStart.tx + (e.clientX - panStart.x); ty.value = panStart.ty + (e.clientY - panStart.y); };
+    const onPointerUp = () => { isPanning.value = false; };
+
+    const verifyPermission = async (handle, mode = 'read') => {
+      try {
+        const opts = { mode };
+        if ((await handle.queryPermission?.(opts)) === 'granted') return true;
+        return (await handle.requestPermission?.(opts)) === 'granted';
+      } catch { return false; }
+    };
+
+    const enumerateImages = async (dirHandle, basePath = '') => {
+      const out = [];
+      // Prefer values() for broader compatibility
+      const iterator = dirHandle.values ? dirHandle.values() : dirHandle.entries();
+      for await (const entry of iterator) {
+        const handle = entry[1] || entry; // entries(): [name, handle] or values(): handle
+        try {
+          if (handle.kind === 'file') {
+            const file = await handle.getFile();
+            const name = handle.name || file.name;
+            if (!file.type || file.type.startsWith('image/')) {
+              out.push({ file, handle, dirHandle, path: basePath ? basePath + '/' + name : name });
+            }
+          } else if (handle.kind === 'directory') {
+            const name = handle.name;
+            const sub = await enumerateImages(handle, basePath ? basePath + '/' + name : name);
+            out.push(...sub);
+          }
+        } catch {}
+      }
+      return out;
+    };
+
+    const onOpenFolder = async () => {
+      if (!('showDirectoryPicker' in window)) {
+        alert('Tu navegador no soporta acceso directo a carpeta. Usa "Cargar imágenes".');
+        return;
+      }
+      try {
+        const dir = await window.showDirectoryPicker({ mode: 'readwrite' });
+        const ok = await verifyPermission(dir, 'read');
+        if (!ok) { alert('No se concedió permiso de lectura a la carpeta.'); return; }
+        rootDirHandle.value = dir;
+        const entries = await enumerateImages(dir, '');
+        // Revoke old URLs
+        for (const it of items.value) { try { URL.revokeObjectURL(it.url); } catch {} }
+        items.value = entries.map((en, i) => decorateItem({
+          file: en.file,
+          fileHandle: en.handle,
+          dirHandle: en.dirHandle,
+          url: URL.createObjectURL(en.file),
+          name: en.file.name,
+          newName: en.file.name,
+          size: en.file.size,
+          lastModified: en.file.lastModified,
+          path: en.path,
+          meta: null,
+          metaError: null,
+          renameStatus: null,
+          renameMessage: null,
+          id: (typeof crypto !== 'undefined' && crypto.randomUUID) ? crypto.randomUUID() : (Date.now() + '-' + Math.random().toString(36).slice(2) + '-' + i),
+        }));
+        current.value = 0;
+        if (items.value.length) await ensureMetadataIndex(0);
+        // Try to write manifest if project root already selected
+        await writeManifestIfPossible();
+      } catch (e) {
+        // cancelled or denied
+      }
+    };
+
+    const onRefreshFolder = async () => {
+      if (!rootDirHandle.value) { alert('Primero abrí una carpeta.'); return; }
+      try {
+        const ok = await verifyPermission(rootDirHandle.value, 'read');
+        if (!ok) { alert('Sin permiso de lectura para refrescar.'); return; }
+        const entries = await enumerateImages(rootDirHandle.value, '');
+        for (const it of items.value) { try { URL.revokeObjectURL(it.url); } catch {} }
+        items.value = entries.map((en, i) => decorateItem({
+          file: en.file,
+          fileHandle: en.handle,
+          dirHandle: en.dirHandle,
+          url: URL.createObjectURL(en.file),
+          name: en.file.name,
+          newName: en.file.name,
+          size: en.file.size,
+          lastModified: en.file.lastModified,
+          path: en.path,
+          meta: null,
+          metaError: null,
+          renameStatus: null,
+          renameMessage: null,
+          id: (typeof crypto !== 'undefined' && crypto.randomUUID) ? crypto.randomUUID() : (Date.now() + '-' + Math.random().toString(36).slice(2) + '-' + i),
+        }));
+        current.value = 0;
+        if (items.value.length) await ensureMetadataIndex(0);
+        await writeManifestIfPossible();
+      } catch (e) {
+        console.warn('Error al refrescar carpeta:', e);
+      }
+    };
+
+    const onSelectProjectRoot = async () => {
+      if (!('showDirectoryPicker' in window)) {
+        alert('Tu navegador no soporta seleccionar raíz del proyecto.');
+        return;
+      }
+      try {
+        const dir = await window.showDirectoryPicker({ mode: 'readwrite' });
+        const ok = await verifyPermission(dir, 'readwrite');
+        if (!ok) { alert('No se concedió permiso de lectura/escritura a la raíz.'); return; }
+        projectRootHandle.value = dir;
+        await writeManifestIfPossible();
+        alert('Manifest actualizado en la raíz del proyecto.');
+      } catch (e) {
+        // cancelled or denied
+      }
+    };
+
+    const buildManifestContent = (names) => {
+      const lines = names.map(n => `  "${n}"`).join(',\n');
+      return `// Auto-generated list of images in ./imagenes at the same level as index.html\nwindow.IMG_MANIFEST = [\n${lines}\n];\n`;
+    };
+
+    const getCurrentManifestNames = () => {
+      // Prefer items inside the opened folder (rootDirHandle); fall back to items with url under imagenes
+      const imgs = items.value.filter(it => it.name && (!it.name.includes(':')));
+      // Keep stable by name ascending
+      const names = imgs.map(it => it.name).sort((a, b) => a.localeCompare(b));
+      return names;
+    };
+
+    const writeManifestIfPossible = async () => {
+      if (!projectRootHandle.value) return false;
+      try {
+        const fileHandle = await projectRootHandle.value.getFileHandle('manifest.js', { create: true });
+        const writable = await fileHandle.createWritable();
+        const names = getCurrentManifestNames();
+        await writable.write(buildManifestContent(names));
+        await writable.close();
+        return true;
+      } catch (e) {
+        console.warn('No se pudo escribir manifest.js:', e);
+        return false;
+      }
+    };
+
+    const onDrop = (e) => {
+      e.preventDefault();
+      dragOver.value = false;
+      const dt = e.dataTransfer;
+      if (!dt) return;
+      let files = [];
+      if (dt.items && dt.items.length) {
+        for (const item of dt.items) {
+          if (item.kind === 'file') files.push(item.getAsFile());
+        }
+      } else if (dt.files && dt.files.length) {
+        files = Array.from(dt.files);
+      }
+      selectFiles(files);
+    };
+
+    const onDragOver = (e) => { e.preventDefault(); dragOver.value = true; };
+    const onDragLeave = (e) => { e.preventDefault(); dragOver.value = false; };
+
+    const prev = () => {
+      const n = orderedItems.value.length;
+      if (!n) return;
+      current.value = (current.value - 1 + n) % n;
+    };
+    const next = () => {
+      const n = orderedItems.value.length;
+      if (!n) return;
+      current.value = (current.value + 1) % n;
+    };
+
+    const onKey = (e) => {
+      if (e.key === 'ArrowLeft') { e.preventDefault(); prev(); }
+      else if (e.key === 'ArrowRight') { e.preventDefault(); next(); }
+    };
+
+    watch(current, (idx) => { ensureMetadataIndex(idx); resetView(); });
+    watch(orderedItems, (arr) => { if (current.value >= arr.length) current.value = 0; });
+    watch(sortKey, prefetchMetaIfNeeded);
+    watch(sortDir, () => {});
+
+    const buildTree = () => {
+      const root = { type: 'dir', name: '', path: '', children: [] };
+      const dirMap = { '': root };
+      const getDirNode = (dirPath) => {
+        if (dirMap[dirPath]) return dirMap[dirPath];
+        const parts = dirPath.split('/').filter(Boolean);
+        let curPath = '';
+        let parent = root;
+        for (const p of parts) {
+          curPath = curPath ? curPath + '/' + p : p;
+          if (!dirMap[curPath]) {
+            const node = { type: 'dir', name: p, path: curPath, children: [] };
+            dirMap[curPath] = node;
+            parent.children.push(node);
+          }
+          parent = dirMap[curPath];
+        }
+        return dirMap[dirPath];
+      };
+      orderedItems.value.forEach((it) => {
+        const dirPath = (it.path && it.path.includes('/')) ? it.path.split('/').slice(0, -1).join('/') : '';
+        const dirNode = getDirNode(dirPath);
+        dirNode.children.push({ type: 'file', name: it.name, id: it.id, item: it });
+      });
+      return root;
+    };
+    const treeRoot = computed(buildTree);
+
+    const isActiveId = (id) => currentItem.value && currentItem.value.id === id;
+    const selectById = (id) => {
+      const idx = orderedItems.value.findIndex(it => it.id === id);
+      if (idx >= 0) current.value = idx;
+    };
+    const toggleExpand = (path) => { expanded.value[path] = !expanded.value[path]; };
+    const isExpanded = (path) => expanded.value[path] ?? true;
+
+    const ensureExtension = (base, originalName) => {
+      const origExt = (originalName.split('.').pop() || '').toLowerCase();
+      if (!base.includes('.')) return `${base}.${origExt}`;
+      return base;
+    };
+
+    const pickRootIfNeeded = async () => {
+      if (!('showDirectoryPicker' in window)) return null;
+      if (!rootDirHandle.value) {
+        try {
+          rootDirHandle.value = await window.showDirectoryPicker({ mode: 'readwrite' });
+        } catch (e) {
+          return null;
+        }
+      }
+      return rootDirHandle.value;
+    };
+
+    const getDirHandleForPath = async (root, relPath) => {
+      // relPath like "folder/sub/file.jpg"; we need the directory handle for that path
+      const parts = relPath.split('/').filter(Boolean);
+      if (parts.length <= 1) return root; // file at root
+      const dirParts = parts.slice(0, -1);
+      let dir = root;
+      for (const p of dirParts) {
+        dir = await dir.getDirectoryHandle(p, { create: false });
+      }
+      return dir;
+    };
+
+    const renameInPlace = async (it, newName) => {
+      // Use existing directory handle if present, else prompt once
+      let dir = it.dirHandle;
+      if (!dir) {
+        if (!('showDirectoryPicker' in window)) throw new Error('El navegador no permite renombrar archivos directamente.');
+        if (!it.path) throw new Error('Para renombrar automáticamente, abre la carpeta con "Abrir carpeta".');
+        const root = await pickRootIfNeeded();
+        if (!root) throw new Error('Permiso denegado o carpeta no seleccionada.');
+        dir = await getDirHandleForPath(root, it.path);
+      }
+      const canWrite = await verifyPermission(dir, 'readwrite');
+      if (!canWrite) throw new Error('Se necesita permiso de escritura para renombrar.');
+      const oldName = it.name;
+      const finalName = ensureExtension(newName, it.name);
+      if (finalName === oldName) return { status: 'ok', message: 'Sin cambios.' };
+      // Create new file and write content
+      const newHandle = await dir.getFileHandle(finalName, { create: true });
+      const ws = await newHandle.createWritable();
+      const blob = it.file || (await (await dir.getFileHandle(oldName, { create: false })).getFile());
+      await ws.write(blob);
+      await ws.close();
+      await dir.removeEntry(oldName);
+      const newFile = await newHandle.getFile();
+      // Update item to point to new file
+      try { URL.revokeObjectURL(it.url); } catch {}
+      it.file = newFile;
+      it.url = URL.createObjectURL(newFile);
+      it.name = finalName;
+      it.newName = finalName;
+      it.parsed = parseFromName(finalName);
+      // Update path to new name
+      if (it.path) {
+        const parts = it.path.split('/');
+        parts[parts.length - 1] = finalName;
+        it.path = parts.join('/');
+      }
+      it.fileHandle = newHandle;
+      it.dirHandle = dir;
+      // Attempt to refresh manifest
+      await writeManifestIfPossible();
+      return { status: 'ok', message: 'Renombrado en carpeta seleccionada.' };
+    };
+
+    const saveAsCopy = async (it, newName) => {
+      if (!('showSaveFilePicker' in window)) throw new Error('El navegador no soporta "Guardar como".');
+      const finalName = ensureExtension(newName, it.name);
+      const handle = await window.showSaveFilePicker({
+        suggestedName: finalName,
+        types: [{ description: 'Imagen', accept: { [it.file.type || 'image/*']: ['.' + (finalName.split('.').pop() || 'jpg')] } }]
+      });
+      const ws = await handle.createWritable();
+      await ws.write(it.file);
+      await ws.close();
+      return { status: 'warn', message: 'Copia guardada con el nuevo nombre.' };
+    };
+
+    const onCommitName = async () => {
+      const it = currentItem.value;
+      if (!it) return;
+      const newBase = (it.newName || '').trim();
+      if (!newBase || newBase === it.name) return;
+      try {
+        let res;
+        if ('showSaveFilePicker' in window) {
+          res = await saveAsCopy(it, newBase);
+        } else {
+          throw new Error('Renombrado no disponible sin soporte de Guardar como.');
+        }
+        it.renameStatus = res.status;
+        it.renameMessage = res.message;
+      } catch (e) {
+        it.renameStatus = 'error';
+        it.renameMessage = e?.message || String(e);
+      }
+    };
+
+    onMounted(() => {
+      window.addEventListener('keydown', onKey);
+    });
+    onUnmounted(() => {
+      window.removeEventListener('keydown', onKey);
+      for (const it of items.value) {
+        try { URL.revokeObjectURL(it.url); } catch {}
+      }
+    });
+
+    const hasAnyFilter = computed(() => selectedFincas.value.length || selectedAlturas.value.length || selectedArucos.value.length);
+    const clearFilters = () => { selectedFincas.value = []; selectedAlturas.value = []; selectedArucos.value = []; current.value = 0; };
+
+    return { items, current, currentItem, hasImages, hasVisible, onFileInput, onDrop, onDragOver, onDragLeave, dragOver, prev, next, loadingMeta, imgRef, onCommitName, sortKey, sortDir, orderedItems, treeRoot, toggleExpand, isExpanded, selectById, isActiveId, selectedFincas, selectedAlturas, selectedArucos, filteredCount, hasAnyFilter, clearFilters, scale, tx, ty, isPanning, resetView, zoomBy, onWheel, onPointerDown, onPointerMove, onPointerUp, lang, toggleLang };
+  },
+  template: `
+    <div class="app">
+      <header class="topbar">
+        <div class="brand">{{ lang==='de' ? 'Foto‑Betrachter' : 'Visualizador de Fotos' }}</div>
+        <div class="actions" style="gap:16px; align-items:flex-start;">
+          <div style="display:flex; gap:8px; align-items:center;">
+            <label class="btn">
+              {{ lang==='de' ? 'Bilder laden' : 'Cargar imágenes' }}
+              <input type="file" accept="image/*" multiple webkitdirectory directory @change="onFileInput" />
+            </label>
+            <button class="btn" @click="toggleLang">{{ lang==='de' ? 'Español' : 'Deutsch' }}</button>
+          </div>
+          <div class="filters">
+            <div class="filter-group">
+              <span class="key">{{ lang==='de' ? 'Finca' : 'Finca' }}</span>
+              <label><input type="checkbox" value="F1" v-model="selectedFincas" /> F1</label>
+              <label><input type="checkbox" value="F2" v-model="selectedFincas" /> F2</label>
+              <label><input type="checkbox" value="F3" v-model="selectedFincas" /> F3</label>
+            </div>
+            <div class="filter-group">
+              <span class="key">{{ lang==='de' ? 'Aruco' : 'Aruco' }}</span>
+              <label><input type="checkbox" value="G1" v-model="selectedArucos" /> G1</label>
+              <label><input type="checkbox" value="G2" v-model="selectedArucos" /> G2</label>
+              <label><input type="checkbox" value="G3" v-model="selectedArucos" /> G3</label>
+              <label><input type="checkbox" value="P1" v-model="selectedArucos" /> P1</label>
+              <label><input type="checkbox" value="P2" v-model="selectedArucos" /> P2</label>
+              <label><input type="checkbox" value="P3" v-model="selectedArucos" /> P3</label>
+            </div>
+            <div class="filter-group">
+              <span class="key">{{ lang==='de' ? 'Höhe' : 'Altura' }}</span>
+              <label><input type="checkbox" value="60m" v-model="selectedAlturas" /> 60m</label>
+              <label><input type="checkbox" value="80m" v-model="selectedAlturas" /> 80m</label>
+              <label><input type="checkbox" value="100m" v-model="selectedAlturas" /> 100m</label>
+            </div>
+            <div class="filter-group" v-if="filteredCount === 0 && hasAnyFilter">
+              <button class="btn" @click="clearFilters">{{ lang==='de' ? 'Filter löschen' : 'Limpiar filtros' }}</button>
+            </div>
+          </div>
+          <span class="hint">{{ lang==='de' ? 'Tipp: Dateien hierher ziehen' : 'Tip: arrastra y suelta archivos aquí' }}</span>
+        </div>
+      </header>
+
+      <div class="content" @drop="onDrop" @dragover="onDragOver" @dragleave="onDragLeave">
+        <div class="viewer" :class="{ over: dragOver }">
+          <div v-if="!hasImages" class="placeholder">
+            <div class="dropmsg">{{ lang==='de' ? 'Bilder hier ablegen oder „Bilder laden“ benutzen' : 'Suelta imágenes aquí o usa "Cargar imágenes"' }}</div>
+          </div>
+          <div v-else-if="!hasVisible" class="placeholder">
+            <div class="dropmsg">{{ lang==='de' ? 'Keine Ergebnisse für den aktuellen Filter.' : 'No hay resultados para el filtro actual.' }}</div>
+            <div style="margin-top:8px" v-if="hasAnyFilter"><button class="btn" @click="clearFilters">{{ lang==='de' ? 'Filter löschen' : 'Limpiar filtros' }}</button></div>
+          </div>
+          <div v-else class="stage" @wheel.prevent="onWheel">
+            <div v-if="currentItem?.parsed" class="info-header">
+              {{ lang==='de' ? 'Finca' : 'Finca' }}: {{ currentItem.parsed.finca || '-' }}. 
+              {{ lang==='de' ? 'Höhe' : 'Altura' }}: {{ currentItem.parsed.alturaText || '-' }}. 
+              {{ lang==='de' ? 'Aruco(s)' : 'arucos' }}: {{ (currentItem.parsed.arucos||[]).join(',') || '-' }}. 
+              {{ lang==='de' ? 'Aufnahme' : 'Toma' }}: {{ currentItem.parsed.toma ?? '-' }}
+            </div>
+            <div class="img-wrap" :class="{grabbing: isPanning}" :style="{ transform: 'translate(' + tx + 'px,' + ty + 'px) scale(' + scale + ')' }" @mousedown="onPointerDown" @mousemove="onPointerMove" @mouseup="onPointerUp" @mouseleave="onPointerUp">
+              <img ref="imgRef" class="photo" :src="currentItem.url" :alt="currentItem.name" />
+            </div>
+            <div class="tools">
+              <button class="tool-btn" @click="zoomBy(0.2)">+</button>
+              <button class="tool-btn" @click="zoomBy(-0.2)">-</button>
+              <button class="tool-btn" @click="resetView">{{ lang==='de' ? 'Zurücksetzen' : 'Reset' }}</button>
+              <a class="tool-btn" :href="currentItem.url" :download="currentItem.name">{{ lang==='de' ? 'Herunterladen' : 'Descargar' }}</a>
+            </div>
+            <div class="nav">
+              <button class="nav-btn left" @click="prev" aria-label="Anterior">◀</button>
+              <button class="nav-btn right" @click="next" aria-label="Siguiente">▶</button>
+            </div>
+            <div class="counter">{{ current + 1 }} / {{ orderedItems.length }}</div>
+          </div>
+        </div>
+
+        <aside class="side">
+          <div class="panel">
+            <h3>{{ lang==='de' ? 'Sortieren' : 'Ordenar' }}</h3>
+            <div class="row">
+              <span class="key">{{ lang==='de' ? 'Feld' : 'Campo' }}</span>
+              <span class="val" style="flex:1">
+                <select v-model="sortKey" class="name-input">
+                  <option value="name">{{ lang==='de' ? 'Name' : 'Nombre' }}</option>
+                  <option value="size">{{ lang==='de' ? 'Größe' : 'Tamaño' }}</option>
+                  <option value="modified">{{ lang==='de' ? 'Geändert' : 'Modificada' }}</option>
+                  <option value="exifDate">{{ lang==='de' ? 'EXIF‑Datum' : 'Fecha EXIF' }}</option>
+                  <option value="altitude">{{ lang==='de' ? 'Höhe' : 'Altitud' }}</option>
+                </select>
+              </span>
+            </div>
+            <div class="row">
+              <span class="key">{{ lang==='de' ? 'Richtung' : 'Dirección' }}</span>
+              <span class="val" style="flex:1">
+                <select v-model="sortDir" class="name-input">
+                  <option value="asc">{{ lang==='de' ? 'Aufsteigend' : 'Ascendente' }}</option>
+                  <option value="desc">{{ lang==='de' ? 'Absteigend' : 'Descendente' }}</option>
+                </select>
+              </span>
+            </div>
+            <div class="sep"></div>
+            <h3>{{ lang==='de' ? 'Dateien' : 'Archivos' }}</h3>
+            <div v-if="!hasImages" class="muted">{{ lang==='de' ? 'Keine Bilder' : 'No hay imágenes' }}</div>
+            <div v-else class="tree">
+              <TreeNode v-for="node in treeRoot.children" :key="node.path || node.id"
+                :node="node"
+                :isExpanded="isExpanded"
+                :toggleExpand="toggleExpand"
+                :isActiveId="isActiveId"
+                :selectById="selectById"
+              />
+            </div>
+            <div class="sep"></div>
+            <h3>{{ lang==='de' ? 'Details' : 'Detalles' }}</h3>
+            <div v-if="!hasImages" class="muted">{{ lang==='de' ? 'Keine Bilder geladen' : 'No hay imágenes cargadas' }}</div>
+            <div v-else-if="!hasVisible" class="muted">{{ lang==='de' ? 'Keine Ergebnisse für den aktuellen Filter.' : 'No hay resultados del filtro' }}</div>
+            <template v-else>
+              <div class="row">
+                <span class="key">{{ lang==='de' ? 'Name' : 'Nombre' }}</span>
+                <span class="val" style="flex:1">
+                  <input class="name-input" v-model="currentItem.newName" @keydown.enter.prevent="onCommitName" @blur="onCommitName" />
+                  <div class="small-muted" v-if="currentItem.renameMessage">
+                    <span :class="{ ok: currentItem.renameStatus==='ok', warn: currentItem.renameStatus==='warn' }">{{ currentItem.renameMessage }}</span>
+                  </div>
+                </span>
+              </div>
+              <div class="row"><span class="key">{{ lang==='de' ? 'Größe' : 'Tamaño' }}</span><span class="val">{{ (currentItem.size/1024/1024).toFixed(2) }} MB</span></div>
+              <div class="row"><span class="key">{{ lang==='de' ? 'Geändert' : 'Modificada' }}</span><span class="val">{{ new Date(currentItem.lastModified).toLocaleString() }}</span></div>
+              <div class="sep"></div>
+              <div class="row" v-if="loadingMeta"><span class="key">GPS</span><span class="val">{{ lang==='de' ? 'EXIF wird gelesen…' : 'Leyendo EXIF…' }}</span></div>
+              <template v-else>
+                <div class="row" v-if="currentItem.meta?.latText"><span class="key">{{ lang==='de' ? 'Breitengrad' : 'Latitud' }}</span><span class="val">{{ currentItem.meta.latText }}</span></div>
+                <div class="row" v-if="currentItem.meta?.lngText"><span class="key">{{ lang==='de' ? 'Längengrad' : 'Longitud' }}</span><span class="val">{{ currentItem.meta.lngText }}</span></div>
+                <div class="row" v-if="currentItem.meta?.altitudeText"><span class="key">{{ lang==='de' ? 'Höhe' : 'Altitud' }}</span><span class="val">{{ currentItem.meta.altitudeText }}</span></div>
+                <div class="row" v-if="currentItem.meta?.lat != null && currentItem.meta?.lng != null">
+                  <span class="key">GPS</span>
+                  <span class="val"><a :href="'https://www.google.com/maps?q=' + currentItem.meta.lat + ',' + currentItem.meta.lng" target="_blank" rel="noopener">{{ lang==='de' ? 'In Google Maps öffnen' : 'Abrir en Google Maps' }}</a></span>
+                </div>
+                <div class="row" v-if="!currentItem.metaError && (currentItem.meta?.lat == null || currentItem.meta?.lng == null)"><span class="key">GPS</span><span class="val muted">{{ lang==='de' ? 'Nicht verfügbar' : 'No disponible' }}</span></div>
+                <div class="row" v-if="currentItem.meta?.make"><span class="key">{{ lang==='de' ? 'Kamera' : 'Cámara' }}</span><span class="val">{{ currentItem.meta.make }} {{ currentItem.meta.model || '' }}</span></div>
+                <div class="row" v-if="currentItem.meta?.date"><span class="key">{{ lang==='de' ? 'Datum' : 'Fecha' }}</span><span class="val">{{ new Date(currentItem.meta.date).toLocaleString() }}</span></div>
+                <div class="row error" v-if="currentItem.metaError"><span class="key">EXIF</span><span class="val">{{ currentItem.metaError }}</span></div>
+              </template>
+            </template>
+          </div>
+        </aside>
+      </div>
+    </div>
+  `,
+};
+
+createApp(app).component('TreeNode', TreeNode).mount('#app');

styles.css

@@ -0,0 +1,90 @@
+:root {
+  --bg: #0f1115;
+  --panel: #181b22;
+  --text: #e8eaf0;
+  --muted: #9aa3b2;
+  --accent: #56b6c2;
+  --border: #2a2f3a;
+}
+
+* { box-sizing: border-box; }
+html, body, #app { height: 100%; margin: 0; background: var(--bg); color: var(--text); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
+.app { display: flex; flex-direction: column; height: 100%; }
+
+.topbar {
+  min-height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--border);
+  background: #12151b;
+}
+.brand { font-weight: 600; letter-spacing: 0.2px; }
+.actions { display: flex; gap: 12px; align-items: center; }
+.btn { display: inline-flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--border); padding: 8px 12px; border-radius: 8px; cursor: pointer; color: var(--text); }
+.btn input[type=file] { display: none; }
+.hint { color: var(--muted); font-size: 12px; }
+
+.content { display: grid; grid-template-columns: 1fr 320px; flex: 1 1 auto; min-height: 0; }
+
+.viewer { position: relative; height: 100%; border-right: 1px solid var(--border); display: flex; align-items: center; justify-content: center; background: #0d0f14; overflow: hidden; }
+.viewer.over { outline: 2px dashed var(--accent); outline-offset: -8px; }
+.placeholder { color: var(--muted); text-align: center; }
+.dropmsg { opacity: 0.8; }
+.stage { width: 100%; height: 100%; position: relative; display: grid; place-items: center; }
+.img-wrap { user-select: none; cursor: grab; }
+.img-wrap.grabbing { cursor: grabbing; }
+.photo { max-width: 95vw; max-height: 95vh; width: auto; height: auto; object-fit: contain; pointer-events: none; }
+
+.nav { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
+.nav-btn { pointer-events: auto; margin: 0 8px; background: rgba(0,0,0,0.35); border: 1px solid var(--border); color: var(--text); width: 44px; height: 44px; border-radius: 50%; font-size: 18px; cursor: pointer; }
+.nav-btn:hover { background: rgba(0,0,0,0.5); }
+.nav .left { }
+.nav .right { }
+.counter { position: absolute; bottom: 10px; right: 12px; background: rgba(0,0,0,0.5); padding: 4px 8px; border-radius: 6px; font-size: 12px; }
+.info-header { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.5); padding: 6px 10px; border-radius: 8px; font-size: 13px; white-space: nowrap; z-index: 3; }
+.tools { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; }
+.tools { z-index: 3; }
+.tool-btn { background: rgba(0,0,0,0.5); border: 1px solid var(--border); color: var(--text); padding: 6px 8px; border-radius: 6px; font-size: 12px; cursor: pointer; }
+.tool-btn:hover { background: rgba(0,0,0,0.65); }
+
+.side { background: var(--panel); height: 100%; overflow: auto; }
+.panel { padding: 16px; }
+.panel h3 { margin: 0 0 12px; font-size: 16px; font-weight: 600; }
+.row { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px dashed rgba(255,255,255,0.04); }
+.row:last-child { border-bottom: none; }
+.key { color: var(--muted); min-width: 84px; }
+.name-input { width: 100%; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border); background: #11151c; color: var(--text); }
+.small-muted { color: var(--muted); font-size: 12px; }
+.ok { color: #8bd17c; }
+.warn { color: #f0c674; }
+.val a { color: var(--accent); text-decoration: none; }
+.val a:hover { text-decoration: underline; }
+.sep { height: 12px; }
+.muted { color: var(--muted); }
+.error .val { color: #ff6b6b; }
+
+/* Tree */
+.tree { max-height: 35vh; overflow: auto; border: 1px solid var(--border); border-radius: 8px; padding: 8px; background: #12161d; }
+.node { padding: 4px 4px; cursor: default; user-select: none; }
+.node.file { cursor: pointer; display: flex; align-items: center; gap: 8px; border-radius: 6px; padding: 4px 6px; }
+.node.file:hover { background: rgba(255,255,255,0.04); }
+.node.file.active { background: rgba(86, 182, 194, 0.15); }
+.dir-row { display: flex; align-items: center; gap: 6px; cursor: pointer; border-radius: 6px; padding: 4px 6px; }
+.dir-row:hover { background: rgba(255,255,255,0.04); }
+.children { padding-left: 16px; }
+.caret { width: 14px; display: inline-block; color: var(--muted); }
+.dot { color: var(--muted); width: 10px; display: inline-block; text-align: center; }
+.label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+
+@media (max-width: 900px) {
+  .content { grid-template-columns: 1fr; }
+.side { border-top: 1px solid var(--border); }
+}
+
+/* Filters */
+.filters { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
+.filter-group { display: flex; gap: 8px; align-items: center; background: #12161b; border: 1px solid var(--border); padding: 6px 8px; border-radius: 8px; }
+.filter-group label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; cursor: pointer; }
+.filter-group input[type=checkbox] { margin: 0; }