v1.21.0: la pestaña del color de su página y pestañas con nombre

Para el modo edición de los sets de fotos de Labstream OS, que se abre en su
propia pestaña:

- Color de la página: una página pide el color de su pestaña con
  <html data-ls-pestana="#rrggbb">. El script de la pestaña lo manda en
  ls-title (y lo vigila con el mismo observador del tema); Rust solo acepta
  #rrggbb (color_de_pagina) y la barra pinta la pestaña de ese color, con letra
  clara u oscura según su luminancia. Activa se funde con la barra de arriba de
  la página; detrás conserva el color. Un color del menú encima va de franja.
  Una página con color propio no manda el tema: su fondo oscuro no es el de la
  app y no debe oscurecer la barra.
- Pestañas con nombre: window.open(url, "ls-…") o target="ls-…" abre la
  pestaña la primera vez; las siguientes activan ESA y le pasan la URL por
  window.__lsAbrir (el modo edición cambia de foto sin recargar); sin él,
  navega. Una descartada se revive ya en la URL nueva. Solo nombres ls-
  alfanuméricos (nombre_de_ventana); los demás abren pestaña como siempre.
- Color de página y nombre se guardan con la sesión (paginas, nombres en
  estado.json; un estado viejo carga igual).

Prueba nueva: la_pagina_solo_pide_colores_y_nombres_de_la_app.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

dist/index.html

@@ -7,7 +7,7 @@
     <!--
       Barra de pestañas del shell de escritorio (webview "chrome", local).
       Habla con Rust por eventos (__TAURI__.event):
-        recibe  ls-tabs      {tabs:[{label,title,url,loading,active,color}], zoom, version,
+        recibe  ls-tabs      {tabs:[{label,title,url,loading,active,color,pagina}], zoom, version,
                               mac, win, maximized, dark}
         emite   ls-ready, ls-new-tab, ls-activate, ls-close-tab, ls-reload, ls-zoom, ls-cycle,
                 ls-activate-n, ls-nav, ls-menu, ls-check-update, ls-tab-menu, ls-reorder
@@ -208,6 +208,17 @@
       }
       :root.oscuro .tab[data-color]:not(.active) { background: rgba(var(--tc), 0.36); }
       :root.oscuro .tab[data-color]:not(.active):hover { background: rgba(var(--tc), 0.5); }
+      /* ── La pestaña del COLOR DE SU PÁGINA (1.21) ──
+         La página lo pide (`<html data-ls-pestana="#262626">`): el modo edición de un set pinta la
+         suya del gris del editor. Activa, es de ese color y se funde con la barra de arriba de la
+         página, como la de siempre se funde con el blanco de la app. Detrás, el mismo color: entre
+         las demás se reconoce de un vistazo. Con color del menú encima, ese va de franja arriba.
+         (#tabs delante: gana a las reglas de tema y de color del menú sin !important.) */
+      #tabs .tab.pagina { --muted: color-mix(in srgb, var(--tp-fg) 60%, transparent); background: var(--tp); color: var(--tp-fg); }
+      #tabs .tab.pagina:not(.active) { box-shadow: none; }
+      #tabs .tab.pagina:not(.active):hover { background: color-mix(in srgb, var(--tp) 86%, var(--tp-fg)); color: var(--tp-fg); }
+      #tabs .tab.pagina .cerrar:hover { background: color-mix(in srgb, var(--tp-fg) 18%, transparent); color: var(--tp-fg); }
+      #tabs .tab.pagina[data-color] { box-shadow: inset 0 3px 0 rgb(var(--tc)); }
       /* Reordenar arrastrando: NO se usa drag&drop de HTML5 (en el webview de la barra en
          macOS los eventos no llegan), sino eventos de puntero. Se apaga el arrastre nativo de
          WebKit para que no salga la imagen fantasma al mover una pestaña. */
@@ -500,6 +511,14 @@
         $tabs.classList.toggle("compactas", ancho < 112);
       }
 
+      // ¿Un #rrggbb claro? (luminancia relativa): decide si la letra encima va oscura o clara.
+      function esClaro(hex) {
+        const n = parseInt(hex.slice(1), 16);
+        const lin = (c) => { c /= 255; return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4; };
+        const l = 0.2126 * lin((n >> 16) & 255) + 0.7152 * lin((n >> 8) & 255) + 0.0722 * lin(n & 255);
+        return l > 0.35;
+      }
+
       function render() {
         $tabs.textContent = "";
         for (const t of estado.tabs) {
@@ -508,6 +527,12 @@
           el.className = "tab" + (t.active ? " active" : "");
           el.dataset.label = t.label;
           if (t.color) el.dataset.color = t.color; // teñido desde el menú de la pestaña
+          // El color que pide la página (ya validado #rrggbb en el shell), con letra que se lea encima.
+          if (t.pagina) {
+            el.classList.add("pagina");
+            el.style.setProperty("--tp", t.pagina);
+            el.style.setProperty("--tp-fg", esClaro(t.pagina) ? "#202124" : "#ececec");
+          }
           el.title = texto;
 
           const fav = document.createElement("span");