Show unresolved dependency warnings, add URL import, and replace examples with platform guide

- JShellBridge: show "cannot be referenced until" warnings for TypeDeclSnippet
  and VarSnippet with unresolved dependencies (MethodSnippet already worked).
  Extract unresolvedList() helper shared by all three cases.
- Import notebook from URL via ?url= query parameter. If another browser tab
  is already open, delegate via BroadcastChannel instead of loading a second
  instance.
- Replace four Java examples with a single platform guide notebook explaining
  UI features, menus, shortcuts, and settings.
- Add markdown table styles (borders, header background, padding).

Author: Federico-G

CLAUDE.md

@@ -1,14 +1,14 @@
 # Java Notebook
 
-Notebook de Java 100% client-side que corre en el navegador. Java 17 completo corre en WebAssembly via CheerpJ + JShell — sin servidor, sin backend, sin instalacion.
+Notebook de Java 100% client-side que corre en el navegador. Java 17 completo corre en WebAssembly via CheerpJ + JShell. Sin servidor, sin backend, sin instalacion.
 
 ## Arquitectura
 
 ```
 index.html              → Punto de entrada (Vite entry point)
 css/notebook.css        → Estilos responsive mobile-first con dark mode
 js/
-  app.js                → Bootstrap, navbar, settings, shortcuts modal, read mode, autosave, ejemplos
+  app.js                → Bootstrap, navbar, settings, shortcuts modal, read mode, autosave, ejemplos, import por URL
   tab-manager.js        → Multiples notebooks en pestanas, barra de tabs + menu de acciones
   cell-manager.js       → Ciclo de vida de celdas, seleccion, ejecucion, mutaciones DOM targeted
   cell-renderer.js      → Creacion del DOM para celdas code/markdown (Bootstrap cards)
@@ -34,33 +34,33 @@ start.bat               → Script de inicio para Windows
 
 ## Stack tecnico
 
-- **Vite** — build tool + dev server, resuelve dependencias desde node_modules/
-- **Bootstrap 5** via npm — framework CSS + componentes JS (navbar, nav-tabs, cards, modals, dropdowns)
-- **Bootstrap Icons** via npm — iconos consistentes en toda la UI
-- **CodeMirror 6** via npm — editor, syntax highlighting Java + Markdown, search
-- **marked.js** via npm — renderizado de markdown
-- **CheerpJ** — JVM completa en WebAssembly, cargada desde CDN
-- **JShell** — REPL de Java 17 para evaluacion interactiva de codigo
-- **@codemirror/theme-one-dark** — tema oscuro, togglable desde settings (Auto/Claro/Oscuro)
-- **@codemirror/lang-markdown** — syntax highlighting para editor de celdas markdown
+- **Vite**: build tool + dev server, resuelve dependencias desde node_modules/
+- **Bootstrap 5** via npm: framework CSS + componentes JS (navbar, nav-tabs, cards, modals, dropdowns)
+- **Bootstrap Icons** via npm: iconos consistentes en toda la UI
+- **CodeMirror 6** via npm: editor, syntax highlighting Java + Markdown, search
+- **marked.js** via npm: renderizado de markdown
+- **CheerpJ**: JVM completa en WebAssembly, cargada desde CDN
+- **JShell**: REPL de Java 17 para evaluacion interactiva de codigo
+- **@codemirror/theme-one-dark**: tema oscuro, togglable desde settings (Auto/Claro/Oscuro)
+- **@codemirror/lang-markdown**: syntax highlighting para editor de celdas markdown
 
 ## Como funciona la ejecucion
 
 1. CheerpJ se inicializa una vez al cargar la pagina (carga JVM WASM desde CDN)
 2. JShellBridge se carga via `cheerpjRunLibrary()` en library mode
 3. Cada tab crea una sesion JShell independiente via `JShellBridge.init(sessionId)`
 4. Al ejecutar una celda, `jshell-proxy.js` llama a `JShellBridge.eval(sessionId, code)`
-5. JShell compila y ejecuta el snippet — variables, clases y metodos persisten en la sesion
+5. JShell compila y ejecuta el snippet. Variables, clases y metodos persisten en la sesion
 6. La salida se captura de dos fuentes: Java `SwitchOutputStream` buffer + CheerpJ `#console` DOM
 7. "Reiniciar y ejecutar todo" hace reset de la sesion y ejecuta todas las celdas en orden
 
 ## Sesiones JShell por tab
 
 - Cada tab tiene su propia sesion JShell (Map<String, SessionState> en Java)
-- Las sesiones son independientes — variables de un tab no afectan a otro
+- Las sesiones son independientes. Variables de un tab no afectan a otro
 - "Reiniciar sesion" destruye y recrea la sesion JShell del tab activo
 - Al cerrar un tab se destruye su sesion (`JShellBridge.close(sessionId)`)
-- Las evaluaciones se serializan via promise chain — solo una eval a la vez (output capture compartido)
+- Las evaluaciones se serializan via promise chain, solo una eval a la vez (output capture compartido)
 
 ## JShellBridge (src/JShellBridge.java)
 
@@ -71,42 +71,79 @@ Bridge multi-sesion entre JavaScript y JShell en CheerpJ. Estrategia de evaluaci
 3. Declaraciones/statements → eval normal con display de valores post-iteracion
 
 Workarounds para CheerpJ:
-- `SnippetEvent.value()` siempre retorna null — no usable
-- `shell.varValue()` retorna defaults (0, null, false) — no usable
+- `SnippetEvent.value()` siempre retorna null, no usable
+- `shell.varValue()` retorna defaults (0, null, false), no usable
 - Se usa `shell.eval("println(varName)")` para leer valores reales
-- Excepciones del LocalExecutionControl se tragan silenciosamente — wrap en try/catch
+- Excepciones del LocalExecutionControl se tragan silenciosamente, wrap en try/catch
 
 ## Limitaciones de CheerpJ
 
-- `Scanner` / `System.in` — NO hay stdin en browser
-- `java.io.File` — NO hay filesystem
+- `Scanner` / `System.in`: NO hay stdin en browser
+- `java.io.File`: NO hay filesystem
 - Algunas excepciones no se lanzan (ej: `1/0` retorna 0 en vez de ArithmeticException)
 - Primera ejecucion lenta (~5-10s) mientras CheerpJ inicializa la JVM
-- CheerpJ se carga desde CDN — requiere conexion a internet
+- CheerpJ se carga desde CDN, requiere conexion a internet
+
+## UI: menus y controles
+
+**Menu Archivo** (navbar dropdown):
+- Importar: abre un .ipynb desde disco (tambien drag-drop)
+- Exportar: descarga el notebook actual
+- Ejemplos: notebooks de ejemplo cargados desde `public/examples/index.json`
+
+**Configuracion** (engranaje en navbar):
+- Tema: Auto, Claro, Oscuro
+- Identacion: 2 o 4 espacios
+- Modo: Edicion o Lectura (alterna controles de edicion)
+- Atajos generales: On u Off
+
+**Menu del notebook** (icono ⋮ a la derecha de la barra de tabs):
+- Reiniciar y ejecutar todo
+- Reiniciar sesion
+- Agregar celda: Codigo, Texto
+- Celda seleccionada: Subir, Bajar, Cortar, Copiar, Pegar, Eliminar, Deshacer eliminar
+
+**Pestanas**:
+- Boton + para nuevo notebook
+- Doble clic en pestana para renombrar (long-press en mobile)
+- Boton X para cerrar
+
+**Celdas de codigo**: boton Ejecutar, botones Subir/Bajar/Eliminar, botones Copiar/Limpiar resultado
+**Celdas de markdown**: doble clic para editar, botones Editar/Listo, Subir/Bajar/Eliminar
+
+## Import por URL
+
+Se puede abrir un notebook desde una URL con el query parameter `?url=`:
+```
+https://sitio.com/?url=https://ejemplo.com/notebook.ipynb
+```
+- Hace fetch del .ipynb, lo parsea y abre como tab nuevo
+- Muestra "Notebook importado: nombre" en el loading overlay
+- Si ya hay otra pestana del navegador abierta, delega via BroadcastChannel y muestra "Notebook enviado a la pestana abierta"
 
 ## Settings
 
 Se guardan en localStorage key `java-notebook-settings`:
 - `theme`: system, light o dark (default system)
 - `indentSize`: 2 o 4 espacios (default 4)
-- `readMode`: true/false (default false) — modo lectura oculta controles de edicion
-- `shortcuts`: true/false (default false) — habilita atajos idle (cut/copy/paste/delete/undo celda)
+- `readMode`: true/false (default false). Modo lectura oculta controles de edicion
+- `shortcuts`: true/false (default false). Habilita atajos idle (cut/copy/paste/delete/undo celda)
 
 Los tabs/notebooks se guardan en localStorage key `java-notebook-autosave` (formato multi-tab).
 
 ## Atajos de teclado
 
 Hay dos categorias de atajos globales (Ctrl+key):
 
-**Always-on** — funcionan siempre, incluso dentro del editor (bloqueados solo por modals/dropdowns):
+**Always-on**, funcionan siempre, incluso dentro del editor (bloqueados solo por modals/dropdowns):
 
 | Atajo | Accion |
 |---|---|
 | Ctrl+S | Exportar notebook |
 | Ctrl+E | Alternar modo lectura/edicion |
 | Ctrl+Up/Down | Navegar entre celdas |
 
-**Idle-only** — requieren foco fuera del editor + setting "Atajos generales" habilitado:
+**Idle-only**, requieren foco fuera del editor + setting "Atajos generales" habilitado:
 
 | Atajo | Accion |
 |---|---|
@@ -122,7 +159,7 @@ Hay dos categorias de atajos globales (Ctrl+key):
 |---|---|
 | Shift+Enter | Ejecutar y quedarse (code) / Salir edicion (markdown) |
 | Ctrl+Enter | Ejecutar y avanzar (code) / Salir y avanzar (markdown) |
-| Ctrl+Shift+F | Formatear codigo |
+| Ctrl+Shift+F | Corregir indentacion |
 | Escape | Salir de edicion markdown |
 | ? | Mostrar/ocultar modal de atajos (fuera de editor) |
 

css/notebook.css

@@ -302,6 +302,21 @@ body {
     color: var(--bs-secondary-color);
     margin: 8px 0;
 }
+.cell-rendered-markdown table {
+    width: auto;
+    border-collapse: collapse;
+    margin: 8px 0;
+    font-size: 0.92em;
+}
+.cell-rendered-markdown th,
+.cell-rendered-markdown td {
+    border: 1px solid var(--bs-border-color);
+    padding: 6px 12px;
+}
+.cell-rendered-markdown th {
+    background: var(--bs-tertiary-bg);
+    font-weight: 600;
+}
 .cell-rendered-markdown ul, .cell-rendered-markdown ol {
     padding-left: 1.5rem;
     margin: 4px 0;

index.html

@@ -75,7 +75,8 @@
     <div id="loading-overlay" class="position-fixed top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center" style="z-index:1055; background:rgba(0,0,0,0.5)">
         <div class="bg-body rounded-3 p-5 text-center shadow">
             <div class="spinner-border text-primary mb-3" role="status"></div>
-            <div id="loading-status" class="fs-6">Inicializando Java...</div>
+            <div id="loading-import" class="fs-6 fw-bold mb-3 d-none"></div>
+            <div id="loading-status" class="fs-6 text-body-secondary">Inicializando Java...</div>
         </div>
     </div>
 

js/app.js

@@ -25,12 +25,55 @@ const container = document.getElementById('notebook-container');
 const tabActionsBar = document.getElementById('tab-actions-bar');
 const loadingOverlay = document.getElementById('loading-overlay');
 const loadingStatus = document.getElementById('loading-status');
+const loadingImport = document.getElementById('loading-import');
 const btnImport = document.getElementById('btn-import');
 const btnExport = document.getElementById('btn-export');
 
+// --- Multi-tab: delegate ?url= to existing tab ---
+
+const channel = new BroadcastChannel('java-notebook');
+
+async function tryDelegateURL() {
+    const url = new URLSearchParams(window.location.search).get('url');
+    if (!url) return false;
+
+    return new Promise(resolve => {
+        const onMessage = (e) => {
+            if (e.data?.type === 'ack-import') {
+                channel.removeEventListener('message', onMessage);
+                resolve(true);
+            }
+        };
+        channel.addEventListener('message', onMessage);
+        channel.postMessage({ type: 'import-url', url });
+        setTimeout(() => {
+            channel.removeEventListener('message', onMessage);
+            resolve(false);
+        }, 500);
+    });
+}
+
+function showDelegatedMessage() {
+    loadingOverlay.querySelector('.spinner-border')?.remove();
+    loadingStatus.remove();
+    loadingImport.textContent = 'Notebook enviado a la pestaña abierta';
+    loadingImport.classList.remove('d-none');
+    const btn = document.createElement('button');
+    btn.className = 'btn btn-sm btn-outline-secondary mt-3';
+    btn.textContent = 'Cerrar pestaña';
+    btn.addEventListener('click', () => window.close());
+    loadingImport.after(btn);
+}
+
 let autosaveTimer = null;
 
 async function main() {
+    // If ?url= and another tab is open, delegate and stop
+    if (await tryDelegateURL()) {
+        showDelegatedMessage();
+        return;
+    }
+
     // Restore read mode before rendering
     initReadMode();
 
@@ -50,6 +93,9 @@ async function main() {
         createTab(nb, 'notebook.ipynb');
     }
 
+    // Import notebook from ?url= query parameter
+    await importFromURL();
+
     // Setup drag-drop — opens as new tab
     setupDragDrop(container, ({ notebook, filename }) => {
         createTab(notebook, filename);
@@ -66,6 +112,23 @@ async function main() {
     initHelpButton();
     initGlobalShortcuts();
 
+    // Listen for ?url= delegated from other tabs
+    channel.addEventListener('message', async (e) => {
+        if (e.data?.type !== 'import-url') return;
+        const url = e.data.url;
+        try {
+            const resp = await fetch(url);
+            if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+            const obj = await resp.json();
+            const nb = fromJSON(obj);
+            const filename = url.split('/').pop().split('?')[0] || 'notebook.ipynb';
+            createTab(nb, filename);
+            channel.postMessage({ type: 'ack-import' });
+        } catch (err) {
+            console.error('Error importing delegated URL:', err);
+        }
+    });
+
     // Init JShell (CheerpJ + JShellBridge)
     setProgressCallback(updateLoadingStatus);
     try {
@@ -130,6 +193,29 @@ function handleExport() {
     }
 }
 
+// --- Import from URL ---
+
+async function importFromURL() {
+    const url = new URLSearchParams(window.location.search).get('url');
+    if (!url) return;
+    const filename = url.split('/').pop().split('?')[0] || 'notebook.ipynb';
+    try {
+        const resp = await fetch(url);
+        if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+        const obj = await resp.json();
+        const nb = fromJSON(obj);
+        createTab(nb, filename);
+        loadingImport.textContent = 'Notebook importado: ' + filename;
+        loadingImport.classList.remove('d-none');
+        // Clean the URL without reloading
+        window.history.replaceState({}, '', window.location.pathname);
+    } catch (e) {
+        loadingImport.textContent = 'Error al importar: ' + e.message;
+        loadingImport.classList.remove('d-none');
+        console.error('Error importing from URL:', e);
+    }
+}
+
 // --- Examples ---
 
 async function initExamples() {