routes updated

public/components/products-crud.js

@@ -1,4 +1,6 @@
 import { api } from "../lib/api.js";
+import { on } from "../lib/bus.js";
+import { navigateToItem } from "../lib/router.js";
 
 class ProductsCrud extends HTMLElement {
   constructor() {
@@ -112,9 +114,20 @@ class ProductsCrud extends HTMLElement {
       this.updateStatStyles();
     };
 
+    // Escuchar cambios de ruta para deep-linking
+    this._unsubRouter = on("router:viewChanged", ({ view, params }) => {
+      if (view === "products" && params.id) {
+        this.selectProductById(params.id);
+      }
+    });
+
     this.load();
   }
 
+  disconnectedCallback() {
+    this._unsubRouter?.();
+  }
+
   updateStatStyles() {
     const statTotal = this.shadowRoot.getElementById("statTotal");
     const statStock = this.shadowRoot.getElementById("statStock");
@@ -132,6 +145,17 @@ class ProductsCrud extends HTMLElement {
       this.loading = false;
       this.renderList();
       this.renderStats();
+      
+      // Si hay un producto pendiente de selección (deep-link), seleccionarlo
+      if (this._pendingProductId) {
+        const product = this.items.find(p => p.woo_product_id === this._pendingProductId);
+        if (product) {
+          this.selectedItems = [product];
+          this.renderList();
+          this.renderDetail();
+        }
+        this._pendingProductId = null;
+      }
     } catch (e) {
       console.error("Error loading products:", e);
       this.items = [];
@@ -270,6 +294,8 @@ class ProductsCrud extends HTMLElement {
   handleItemClick(e, item, index) {
     console.log("[products-crud] handleItemClick", { shift: e.shiftKey, ctrl: e.ctrlKey, index, item: item?.name });
     
+    let updateUrl = false;
+    
     if (e.shiftKey && this.lastClickedIndex >= 0) {
       // Shift+Click: seleccionar rango
       const start = Math.min(this.lastClickedIndex, index);
@@ -292,6 +318,7 @@ class ProductsCrud extends HTMLElement {
     } else {
       // Click normal: selección única
       this.selectedItems = [item];
+      updateUrl = true;
     }
     
     console.log("[products-crud] after click, selectedItems:", this.selectedItems.length, this.selectedItems.map(s => s.name));
@@ -309,6 +336,27 @@ class ProductsCrud extends HTMLElement {
     // Scroll detail panel to top
     const detail = this.shadowRoot.getElementById("detail");
     if (detail) detail.scrollTop = 0;
+    
+    // Actualizar URL solo en selección única
+    if (updateUrl && this.selectedItems.length === 1) {
+      navigateToItem("products", item.woo_product_id);
+    }
+  }
+
+  selectProductById(productId) {
+    const id = parseInt(productId);
+    if (!id) return;
+    
+    // Buscar en los items cargados
+    const product = this.items.find(p => p.woo_product_id === id);
+    if (product) {
+      this.selectedItems = [product];
+      this.renderList();
+      this.renderDetail();
+    } else {
+      // Guardar el ID pendiente para seleccionar después de cargar
+      this._pendingProductId = id;
+    }
   }
 
   escapeHtml(str) {