From 00ea6cff8cc3956344ab9e965d16fadc61a616c8 Mon Sep 17 00:00:00 2001
From: ARCHITECT <architect@tzzr.local>
Date: Sat, 17 Jan 2026 20:43:21 +0000
Subject: [PATCH] Add HST-specific frontend (hst-frontend.html)

Customized version of DECK frontend for HST server (tzrtech.org):
- Remove DECK-specific bases: MST, BCK, MTH, ATC, Oracle, MAIL, CHAT
- Keep only taxonomy bases: HST, FLG, ITM, LOC, PLY
- Update IMG_BASE to https://tzrtech.org
- Update title to "hst" and logo to "HST"
- Clean up schema documentation

HST serves as the semantic tag model/template that DECK can copy from.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 deck-frontend/hst-frontend.html | 1599 +++++++++++++++++++++++++++++++
 1 file changed, 1599 insertions(+)
 create mode 100644 deck-frontend/hst-frontend.html
diff --git a/deck-frontend/hst-frontend.html b/deck-frontend/hst-frontend.html
new file mode 100644
index 0000000..8eda822
--- /dev/null
+++ b/deck-frontend/hst-frontend.html
@@ -0,0 +1,1599 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>hst</title>
+  <meta name="description" content="DECK Tag Management System">
+
+<!--
+  DECK FRONTEND v4.6 - EventBus decoupling
+  Extract: ./extract.sh deck.html [output_dir]
+-->
+
+<style>
+/* =============================================================================
+ * DECK STYLES v4.6
+ * ============================================================================= */
+
+/* -----------------------------------------------------------------------------
+ * 1. VARIABLES
+ * ----------------------------------------------------------------------------- */
+:root {
+  --bg-primary: #0a0a0f;
+  --bg-secondary: #12121a;
+  --bg-card: #1a1a24;
+  --bg-hover: #252535;
+  --border-color: #2a2a3a;
+  --border-radius-sm: 4px;
+  --border-radius-md: 6px;
+  --border-radius-lg: 8px;
+  --border-radius-pill: 16px;
+  --text-primary: #e0e0e0;
+  --text-muted: #888888;
+  --text-accent: #7c8aff;
+  --accent: #7c8aff;
+  --accent-hover: #9aa4ff;
+  --topbar-height: 50px;
+  --toolbar-height: 44px;
+  --left-panel-width: 85px;
+  --detail-panel-width: 360px;
+  --card-width: 176px;
+  --card-img-height: 176px;
+  --transition-fast: 0.15s ease;
+  --transition-normal: 0.3s ease;
+}
+
+/* -----------------------------------------------------------------------------
+ * 2. RESET & BASE
+ * ----------------------------------------------------------------------------- */
+*, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box; }
+html, body { height: 100%; overflow: hidden; }
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-size: 14px;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  line-height: 1.4;
+}
+
+::-webkit-scrollbar { width: 10px; height: 10px; }
+::-webkit-scrollbar-track { background: var(--bg-secondary); }
+::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 5px; }
+::-webkit-scrollbar-thumb:hover { background: #444; }
+
+/* -----------------------------------------------------------------------------
+ * 3. LAYOUT
+ * ----------------------------------------------------------------------------- */
+.app { display: flex; flex-direction: column; height: 100vh; }
+
+.topbar {
+  height: var(--topbar-height);
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  gap: 12px;
+  flex-shrink: 0;
+  z-index: 20;
+}
+
+.topbar__left, .topbar__right { display: flex; align-items: center; gap: 10px; }
+.topbar__center { flex: 1; display: flex; justify-content: center; gap: 16px; overflow-x: auto; }
+
+.toolbar {
+  height: var(--toolbar-height);
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  gap: 12px;
+  flex-shrink: 0;
+}
+
+.toolbar__left { display: flex; align-items: center; gap: 6px; }
+.toolbar__center { flex: 1; display: flex; gap: 6px; overflow-x: auto; padding: 4px 0; }
+.toolbar__right { display: flex; gap: 4px; }
+
+.main-layout { flex: 1; display: flex; overflow: hidden; }
+
+/* -----------------------------------------------------------------------------
+ * 4. COMPONENTS
+ * ----------------------------------------------------------------------------- */
+.logo { font-weight: 700; font-size: 1.2em; color: var(--accent); letter-spacing: 1px; user-select: none; }
+
+.btn {
+  padding: 7px 14px;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius-md);
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 0.8em;
+  font-weight: 500;
+  transition: all var(--transition-fast);
+  white-space: nowrap;
+}
+
+.btn:hover:not(.btn--disabled) { border-color: var(--accent); color: var(--text-primary); }
+.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.btn--active { background: var(--accent); border-color: var(--accent); color: #fff; }
+.btn--disabled { opacity: 0.5; cursor: not-allowed; }
+.btn--sm { padding: 5px 10px; font-size: 0.75em; }
+
+.base-group { display: flex; gap: 2px; background: var(--bg-card); border-radius: var(--border-radius-md); padding: 3px; }
+
+.base-btn {
+  padding: 6px 12px;
+  background: transparent;
+  border: none;
+  border-radius: var(--border-radius-sm);
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 0.75em;
+  font-weight: 600;
+  transition: all var(--transition-fast);
+  white-space: nowrap;
+}
+
+.base-btn:hover { color: var(--text-primary); }
+.base-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.base-btn--active { background: var(--accent); color: #fff; }
+
+.view-tab {
+  padding: 6px 16px;
+  background: transparent;
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius-md);
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 0.85em;
+  transition: all var(--transition-fast);
+}
+
+.view-tab:hover { color: var(--text-primary); }
+.view-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.view-tab--active { background: var(--accent); border-color: var(--accent); color: #fff; }
+
+.group-btn {
+  padding: 5px 12px;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius-pill);
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 0.75em;
+  white-space: nowrap;
+  transition: all var(--transition-fast);
+}
+
+.group-btn:hover { border-color: var(--accent); color: var(--text-primary); }
+.group-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.group-btn--active { background: var(--accent); border-color: var(--accent); color: #fff; }
+
+.search-input {
+  width: 280px;
+  padding: 9px 14px;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius-md);
+  color: var(--text-primary);
+  font-size: 0.9em;
+}
+
+.search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(124, 138, 255, 0.2); }
+.search-input::placeholder { color: var(--text-muted); }
+
+.lang-select {
+  padding: 5px 8px;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius-sm);
+  color: var(--text-primary);
+  font-size: 0.8em;
+  cursor: pointer;
+}
+
+.lang-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+
+/* Left Panel */
+.left-panel {
+  width: var(--left-panel-width);
+  background: var(--bg-secondary);
+  border-right: 1px solid var(--border-color);
+  padding: 12px 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow-y: auto;
+  flex-shrink: 0;
+}
+
+.lib-icon {
+  flex-shrink: 0;
+  width: 65px;
+  height: 65px;
+  background: var(--bg-card);
+  border: 2px solid var(--border-color);
+  border-radius: var(--border-radius-lg);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  overflow: hidden;
+}
+
+.lib-icon:hover { border-color: var(--accent); }
+.lib-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.lib-icon--active { border-color: var(--accent); background: var(--bg-hover); }
+.lib-icon img { width: 42px; height: 42px; object-fit: cover; border-radius: var(--border-radius-sm); }
+
+.lib-icon span {
+  font-size: 0.6em;
+  color: var(--text-muted);
+  text-align: center;
+  margin-top: 2px;
+  max-width: 60px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Center Panel */
+.center-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; min-width: 0; }
+.content-area { flex: 1; overflow: auto; padding: 16px; }
+
+/* Detail Panel */
+.detail-panel {
+  width: 0;
+  background: var(--bg-secondary);
+  border-left: 1px solid var(--border-color);
+  overflow: hidden;
+  transition: width var(--transition-normal);
+  flex-shrink: 0;
+}
+
+.detail-panel--open { width: var(--detail-panel-width); }
+.detail-content { width: var(--detail-panel-width); height: 100%; overflow-y: auto; }
+
+.detail-header {
+  position: relative;
+  width: 100%;
+  height: 200px;
+  background: linear-gradient(145deg, var(--bg-card), var(--bg-primary));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.detail-close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: var(--bg-hover);
+  border: none;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  font-size: 20px;
+  cursor: pointer;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--transition-fast);
+  z-index: 2;
+}
+
+.detail-close:hover { background: var(--accent); color: #fff; }
+.detail-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.detail-img { width: 150px; height: 150px; object-fit: cover; border-radius: 12px; }
+.detail-placeholder { font-size: 4em; font-weight: 700; color: var(--accent); opacity: 0.4; text-transform: uppercase; }
+.detail-body { padding: 20px; }
+.detail-ref { font-size: 0.9em; color: var(--accent); font-weight: 600; margin-bottom: 4px; }
+
+.detail-mrf {
+  font-size: 0.65em;
+  color: var(--text-muted);
+  font-family: monospace;
+  cursor: pointer;
+  padding: 6px 10px;
+  background: var(--bg-card);
+  border-radius: var(--border-radius-sm);
+  margin-bottom: 12px;
+  word-break: break-all;
+  transition: all var(--transition-fast);
+}
+
+.detail-mrf:hover { color: var(--accent); background: var(--bg-hover); }
+.detail-name { font-size: 1.2em; font-weight: 600; margin-bottom: 8px; }
+.detail-desc { font-size: 0.9em; color: var(--text-muted); line-height: 1.5; margin-bottom: 16px; }
+.detail-section { margin-top: 20px; }
+.detail-section h4 { font-size: 0.8em; color: var(--accent); text-transform: uppercase; margin-bottom: 10px; }
+
+.chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
+
+.tag-chip {
+  padding: 6px 12px;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius-pill);
+  font-size: 0.8em;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.tag-chip:hover { border-color: var(--accent); color: var(--text-primary); }
+.tag-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+
+/* Modal */
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.7);
+  display: none;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+}
+
+.modal--open { display: flex; }
+
+.modal-content {
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  padding: 24px;
+  max-width: 500px;
+  width: 90%;
+  position: relative;
+}
+
+.modal-close {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  color: var(--text-muted);
+}
+
+.modal-close:hover { color: var(--text-primary); }
+.modal-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.modal h2 { margin-bottom: 16px; color: var(--accent); }
+.modal code { background: var(--bg-primary); padding: 2px 6px; border-radius: var(--border-radius-sm); font-size: 0.85em; }
+.modal ul { margin: 8px 0 0 20px; line-height: 1.8; }
+
+/* Toast */
+.toast {
+  position: fixed;
+  bottom: 30px;
+  left: 50%;
+  transform: translateX(-50%) translateY(20px);
+  background: var(--accent);
+  color: #fff;
+  padding: 14px 28px;
+  border-radius: 10px;
+  font-size: 0.9em;
+  font-weight: 500;
+  opacity: 0;
+  transition: all var(--transition-normal);
+  z-index: 1000;
+  pointer-events: none;
+}
+
+.toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }
+
+/* -----------------------------------------------------------------------------
+ * 5. VIEWS
+ * ----------------------------------------------------------------------------- */
+
+/* Grid View */
+.content-area--grid { display: flex; flex-wrap: wrap; gap: 16px; align-content: start; }
+
+.card {
+  width: var(--card-width);
+  flex-shrink: 0;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius-lg);
+  overflow: hidden;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  position: relative;
+}
+
+.card:hover { border-color: var(--accent); transform: translateY(-2px); }
+.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.card--selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
+.card__checkbox { position: absolute; top: 8px; left: 8px; z-index: 2; width: 20px; height: 20px; accent-color: var(--accent); }
+.card__img { display: block; width: 100%; height: var(--card-img-height); object-fit: cover; background: var(--bg-hover); }
+
+.card__placeholder {
+  width: 100%;
+  height: var(--card-img-height);
+  background: linear-gradient(135deg, var(--bg-hover), var(--bg-card));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 2.5em;
+  font-weight: 700;
+  color: var(--accent);
+  opacity: 0.6;
+  text-transform: uppercase;
+}
+
+.card__name {
+  padding: 10px;
+  font-size: 0.85em;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Tree View */
+.content-area--tree { display: flex; flex-direction: column; gap: 2px; }
+.tree-node { border-left: 1px solid var(--border-color); margin-left: 10px; }
+.tree-node[data-depth="0"] { border-left: none; margin-left: 0; }
+.tree-children { display: none; }
+.tree-children--expanded { display: block; }
+
+.tree-toggle { width: 20px; font-weight: bold; color: var(--accent); text-align: center; user-select: none; cursor: pointer; flex-shrink: 0; }
+.tree-toggle--empty { visibility: hidden; }
+.tree-count { color: var(--text-muted); font-size: 0.75em; margin-left: auto; }
+
+.tree-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  border-radius: var(--border-radius-md);
+  cursor: pointer;
+  transition: background var(--transition-fast);
+}
+
+.tree-item:hover { background: var(--bg-hover); }
+.tree-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.tree-item--parent .tree-toggle:hover { color: var(--accent-hover); }
+.tree-item__img { width: 28px; height: 28px; object-fit: cover; border-radius: var(--border-radius-sm); flex-shrink: 0; }
+
+.tree-item__placeholder {
+  width: 28px;
+  height: 28px;
+  background: var(--bg-hover);
+  border-radius: var(--border-radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 0.75em;
+  color: var(--accent);
+  flex-shrink: 0;
+}
+
+.tree-item__name { font-size: 0.85em; }
+
+/* Graph View */
+.content-area--graph { position: relative; padding: 0; overflow: hidden; }
+.graph-container { width: 100%; height: 100%; position: relative; }
+.graph-container svg { display: block; width: 100%; height: 100%; }
+
+.graph-sidebar {
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  width: 200px;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius-lg);
+  padding: 12px;
+  z-index: 10;
+  max-height: calc(100% - 32px);
+  overflow-y: auto;
+}
+
+.graph-section { margin-bottom: 16px; }
+.graph-section:last-child { margin-bottom: 0; }
+.graph-section__title { font-size: 0.75em; font-weight: 600; color: var(--accent); text-transform: uppercase; margin-bottom: 8px; }
+.graph-stat { display: flex; justify-content: space-between; font-size: 0.85em; margin-bottom: 4px; }
+.graph-stat__value { font-weight: 600; color: var(--accent); }
+.graph-checkbox { display: flex; align-items: center; gap: 8px; font-size: 0.8em; margin-bottom: 4px; cursor: pointer; }
+.graph-checkbox input { cursor: pointer; accent-color: var(--accent); }
+.color-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
+.graph-slider { margin-top: 8px; }
+.graph-slider__label { display: flex; justify-content: space-between; font-size: 0.75em; margin-bottom: 4px; }
+.graph-slider__value { color: var(--accent); }
+
+.graph-slider input[type="range"] {
+  width: 100%;
+  height: 4px;
+  background: var(--border-color);
+  border-radius: 2px;
+  -webkit-appearance: none;
+  cursor: pointer;
+}
+
+.graph-slider input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 14px;
+  height: 14px;
+  background: var(--accent);
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.graph-controls { position: absolute; top: 16px; right: 16px; display: flex; gap: 6px; z-index: 10; }
+
+.graph-legend {
+  position: absolute;
+  bottom: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 16px;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: 20px;
+  padding: 8px 16px;
+  z-index: 10;
+}
+
+.legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.75em; }
+
+/* -----------------------------------------------------------------------------
+ * 6. UTILITIES
+ * ----------------------------------------------------------------------------- */
+.loading, .empty { display: flex; align-items: center; justify-content: center; padding: 60px; color: var(--text-muted); font-size: 0.9em; }
+.sel-count { font-size: 0.75em; color: var(--accent); margin-left: 6px; }
+.hidden { display: none !important; }
+
+/* -----------------------------------------------------------------------------
+ * 7. RESPONSIVE
+ * ----------------------------------------------------------------------------- */
+@media (max-width: 1024px) {
+  :root {
+    --left-panel-width: 70px;
+    --detail-panel-width: 300px;
+    --card-width: 150px;
+    --card-img-height: 150px;
+  }
+  .lib-icon { width: 55px; height: 55px; }
+  .lib-icon img { width: 36px; height: 36px; }
+  .search-input { width: 200px; }
+  .graph-sidebar { width: 180px; }
+}
+
+@media (max-width: 768px) {
+  :root {
+    --topbar-height: 45px;
+    --toolbar-height: 40px;
+    --card-width: 140px;
+    --card-img-height: 140px;
+  }
+  .left-panel { display: none; }
+  .detail-panel--open { width: 100%; position: absolute; right: 0; top: 0; bottom: 0; z-index: 50; }
+  .search-input { width: 150px; }
+  .topbar__center { gap: 8px; }
+  .base-group { padding: 2px; }
+  .base-btn { padding: 5px 8px; font-size: 0.7em; }
+  .graph-sidebar { width: 160px; font-size: 0.9em; }
+  .graph-legend { padding: 6px 12px; gap: 10px; }
+}
+
+@media (max-width: 480px) {
+  :root {
+    --card-width: 120px;
+    --card-img-height: 120px;
+  }
+  .topbar { padding: 0 8px; gap: 8px; }
+  .toolbar { padding: 0 8px; }
+  .content-area { padding: 8px; }
+  .content-area--grid { gap: 8px; }
+  .search-input { width: 120px; padding: 7px 10px; }
+  .btn { padding: 5px 10px; }
+  .view-tab { padding: 5px 10px; font-size: 0.8em; }
+  .graph-sidebar { display: none; }
+}
+
+/* -----------------------------------------------------------------------------
+ * 8. REDUCED MOTION
+ * ----------------------------------------------------------------------------- */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+</style>
+</head>
+
+<body>
+<!-- ══════════════════════════════════════════════════════════════════════════
+     HTML STRUCTURE
+     ══════════════════════════════════════════════════════════════════════════ -->
+<div class="app">
+
+  <!-- TOPBAR -->
+  <header class="topbar" role="banner">
+    <div class="topbar__left">
+      <span class="logo">HST</span>
+      <select id="lang-select" class="lang-select" aria-label="Seleccionar idioma">
+        <option value="es">ES</option>
+        <option value="en">EN</option>
+        <option value="ch">CH</option>
+      </select>
+      <button class="btn" id="btn-api" aria-label="Ver referencia API">API</button>
+    </div>
+
+    <div class="topbar__center" role="navigation" aria-label="Bases de datos">
+      <div class="base-group" data-group="taxonomy" role="group" aria-label="Taxonomía">
+        <button class="base-btn base-btn--active" data-base="hst" aria-pressed="true">HST</button>
+        <button class="base-btn" data-base="flg" aria-pressed="false">FLG</button>
+        <button class="base-btn" data-base="itm" aria-pressed="false">ITM</button>
+        <button class="base-btn" data-base="loc" aria-pressed="false">LOC</button>
+        <button class="base-btn" data-base="ply" aria-pressed="false">PLY</button>
+      </div>
+    </div>
+
+    <div class="topbar__right">
+      <input type="text" id="search" class="search-input" placeholder="Buscar... (/)" aria-label="Buscar tags">
+    </div>
+  </header>
+
+  <!-- TOOLBAR -->
+  <div class="toolbar" role="toolbar" aria-label="Herramientas">
+    <div class="toolbar__left">
+      <button class="btn" id="btn-sel" aria-label="Modo selección" aria-pressed="false">SEL</button>
+      <button class="btn" id="btn-get" aria-label="Copiar MRFs seleccionados">GET<span class="sel-count hidden" id="sel-count" aria-live="polite"></span></button>
+    </div>
+    <div class="toolbar__center" id="groups-bar" role="group" aria-label="Filtros de grupo"></div>
+    <div class="toolbar__right" role="group" aria-label="Tipo de vista">
+      <button class="view-tab view-tab--active" data-view="grid" aria-pressed="true">Grid</button>
+      <button class="view-tab" data-view="tree" aria-pressed="false">Tree</button>
+      <button class="view-tab" data-view="graph" aria-pressed="false">Graph</button>
+    </div>
+  </div>
+
+  <!-- MAIN LAYOUT -->
+  <div class="main-layout">
+    <aside class="left-panel" id="left-panel" role="complementary" aria-label="Bibliotecas"></aside>
+    <main class="center-panel" role="main">
+      <div class="content-area" id="content-area" aria-live="polite">
+        <div class="loading">Cargando...</div>
+      </div>
+    </main>
+    <aside class="detail-panel" id="detail-panel" role="complementary" aria-label="Detalle del tag">
+      <div class="detail-content" id="detail-content"></div>
+    </aside>
+  </div>
+</div>
+
+<!-- API MODAL -->
+<div class="modal" id="api-modal" role="dialog" aria-labelledby="api-modal-title" aria-modal="true">
+  <div class="modal-content">
+    <button class="modal-close" aria-label="Cerrar modal">&times;</button>
+    <h2 id="api-modal-title">API Reference</h2>
+    <div class="api-info">
+      <p><strong>Base URL:</strong> <code>/api</code></p>
+      <p style="margin-top: 12px;"><strong>Headers:</strong></p>
+      <ul>
+        <li>GET: <code>Accept-Profile: {schema}</code></li>
+        <li>POST: <code>Content-Profile: {schema}</code></li>
+      </ul>
+      <p style="margin-top: 16px;"><strong>Schemas:</strong></p>
+      <ul style="font-size: 0.9em;">
+        <li>HST, FLG → <code>tzzr_core_hst</code></li>
+        <li>ITM, LOC, PLY → <code>tzzr_core_itm_base</code></li>
+        <li>Groups, Libraries → <code>public</code></li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+<!-- TOAST -->
+<div class="toast" id="toast" role="alert" aria-live="assertive"></div>
+
+<script>
+/**
+ * DECK Frontend v4.6
+ * EventBus pattern for module decoupling
+ */
+
+// =============================================================================
+// 1. CONFIG
+// =============================================================================
+const CONFIG = {
+  API_BASE: "/api",
+  IMG_BASE: "https://tzrtech.org",
+
+  BASES: {
+    // Taxonomía
+    hst:    { schema: "tzzr_core_hst",        table: "hst", hasGroups: true,  hasLibraries: true  },
+    flg:    { schema: "tzzr_core_hst",        table: "flg", hasGroups: false, hasLibraries: true  },
+    itm:    { schema: "tzzr_core_itm_base",   table: "itm", hasGroups: false, hasLibraries: true  },
+    loc:    { schema: "tzzr_core_itm_base",   table: "loc", hasGroups: false, hasLibraries: true  },
+    ply:    { schema: "tzzr_core_itm_base",   table: "ply", hasGroups: false, hasLibraries: true  }
+  },
+
+  CATEGORIES: {
+    hst: { name: "Hashtags",   color: "#7c8aff" },
+    spe: { name: "Specs",      color: "#FF9800" },
+    vue: { name: "Values",     color: "#00BCD4" },
+    vsn: { name: "Visions",    color: "#E91E63" },
+    msn: { name: "Missions",   color: "#9C27B0" },
+    flg: { name: "Flags",      color: "#4CAF50" },
+    ply: { name: "Players",    color: "#FF5722" },
+    itm: { name: "Items",      color: "#795548" },
+    loc: { name: "Locations",  color: "#009688" }
+  },
+
+  EDGE_TYPES: {
+    relation: "#8BC34A", specialization: "#9C27B0", mirror: "#607D8B",
+    dependency: "#2196F3", sequence: "#4CAF50", composition: "#FF9800",
+    hierarchy: "#E91E63", library: "#00BCD4", contextual: "#FFC107", association: "#795548"
+  },
+
+  GRAPH_DEFAULTS: { nodeSize: 20, linkDist: 80, showImages: true, showLabels: true }
+};
+
+// =============================================================================
+// 2. STATE
+// =============================================================================
+const State = {
+  _data: {
+    base: "hst", view: "grid", lang: "es",
+    search: "", group: "all", library: "all", libraryMembers: new Set(),
+    selectionMode: false, selected: new Set(), selectedTag: null,
+    tags: [], hstTags: [], groups: [], libraries: [], edges: [], treeData: [],
+    graphFilters: { categories: new Set(Object.keys(CONFIG.CATEGORIES)), edgeTypes: new Set(Object.keys(CONFIG.EDGE_TYPES)) },
+    graphSettings: { ...CONFIG.GRAPH_DEFAULTS }
+  },
+
+  get(key) { return key ? this._data[key] : { ...this._data }; },
+  set(updates) { this._data = { ...this._data, ...updates }; },
+
+  resetFilters() {
+    this.set({ group: "all", library: "all", libraryMembers: new Set(), search: "", selected: new Set(), selectionMode: false });
+  }
+};
+
+// =============================================================================
+// 3. EVENTS (desacoplamiento entre módulos)
+// =============================================================================
+const Events = {
+  _handlers: {},
+  _debug: true,  // Toggle: Events._debug = false to disable
+  on(event, fn) {
+    (this._handlers[event] ||= []).push(fn);
+    if (this._debug) console.log(`%c[Events.on] ${event}`, 'color: #4CAF50', `(${this._handlers[event].length} handlers)`);
+  },
+  off(event, fn) {
+    if (!fn) delete this._handlers[event];
+    else this._handlers[event] = (this._handlers[event] || []).filter(h => h !== fn);
+    if (this._debug) console.log(`%c[Events.off] ${event}`, 'color: #FF9800');
+  },
+  emit(event, data) {
+    const handlers = this._handlers[event] || [];
+    if (this._debug) console.log(`%c[Events.emit] ${event}`, 'color: #7c8aff; font-weight: bold', data !== undefined ? data : '', `→ ${handlers.length} handlers`);
+    handlers.forEach(fn => fn(data));
+  }
+};
+
+// =============================================================================
+// 4. UTILS
+// =============================================================================
+const Utils = {
+  $(selector) { return document.querySelector(selector); },
+  $$(selector) { return document.querySelectorAll(selector); },
+
+  // XSS Protection
+  escapeHtml(str) {
+    if (!str) return "";
+    const div = document.createElement("div");
+    div.textContent = str;
+    return div.innerHTML;
+  },
+
+  debounce(fn, delay) {
+    let timer;
+    return (...args) => { clearTimeout(timer); timer = setTimeout(() => fn(...args), delay); };
+  },
+
+  resolveImage(url) {
+    if (!url) return "";
+    if (url.startsWith("http")) return url;
+    return `${CONFIG.IMG_BASE}/${url}`;
+  },
+
+  getName(tag, lang = "es") {
+    if (!tag) return "";
+    return tag[`name_${lang}`] || tag.name_es || tag.name_en || tag.alias || tag.ref || (tag.mrf ? tag.mrf.slice(0, 8) : "");
+  },
+
+  toast(message, duration = 2000) {
+    const el = Utils.$("#toast");
+    el.textContent = message;
+    el.classList.add("toast--show");
+    setTimeout(() => el.classList.remove("toast--show"), duration);
+  },
+
+  async copyToClipboard(text) {
+    try { await navigator.clipboard.writeText(text); return true; }
+    catch {
+      const textarea = document.createElement("textarea");
+      textarea.value = text;
+      textarea.style.cssText = "position:fixed;opacity:0";
+      document.body.appendChild(textarea);
+      textarea.select();
+      const success = document.execCommand("copy");
+      textarea.remove();
+      return success;
+    }
+  },
+
+  getCategory(tag) {
+    const ref = (tag.ref || "").toLowerCase();
+    for (const cat of Object.keys(CONFIG.CATEGORIES)) {
+      if (ref.startsWith(cat)) return cat;
+    }
+    return State.get("base");
+  },
+
+  updateHash() {
+    const { base, view } = State.get();
+    const parts = [base];
+    if (view !== "grid") parts.push(view);
+    window.location.hash = "/" + parts.join("/") + "/";
+  },
+
+  parseHash() {
+    const hash = window.location.hash.replace(/^#\/?/, "").replace(/\/?$/, "");
+    const parts = hash.split("/").filter(Boolean);
+    const result = {};
+    if (parts[0] && CONFIG.BASES[parts[0]]) result.base = parts[0];
+    if (parts[1] && ["grid", "tree", "graph"].includes(parts[1])) result.view = parts[1];
+    return result;
+  }
+};
+
+// =============================================================================
+// 5. API
+// =============================================================================
+const API = {
+  async fetch(endpoint, schema, options = {}) {
+    const headers = {};
+    if (schema) headers[options.method === "POST" ? "Content-Profile" : "Accept-Profile"] = schema;
+    if (options.body) headers["Content-Type"] = "application/json";
+
+    try {
+      const response = await fetch(`${CONFIG.API_BASE}${endpoint}`, {
+        method: options.method || "GET", headers,
+        body: options.body ? JSON.stringify(options.body) : undefined
+      });
+      if (!response.ok) throw new Error(`API Error: ${response.status}`);
+      return response.json();
+    } catch (error) {
+      console.error(`API request failed: ${endpoint}`, error);
+      return options.fallback !== undefined ? options.fallback : [];
+    }
+  },
+
+  getTags(base) {
+    const config = CONFIG.BASES[base];
+    if (!config) return Promise.resolve([]);
+    return this.fetch(`/${config.table}?order=${config.orderBy || "ref.asc"}`, config.schema, { fallback: [] });
+  },
+
+  getHstTags() { return this.fetch("/hst?select=mrf,ref,name_es,name_en,alias", "tzzr_core_hst", { fallback: [] }); },
+  getGroups() { return this.fetch("/api_groups", "public", { fallback: [] }); },
+
+  getLibraries(base) {
+    const config = CONFIG.BASES[base];
+    if (!config?.hasLibraries) return Promise.resolve([]);
+    return this.fetch(`/api_library_list_${base}`, "public", { fallback: [] });
+  },
+
+  async getLibraryMembers(base, libraryMrf) {
+    const config = CONFIG.BASES[base];
+    if (!config) return [];
+    const data = await this.fetch(`/library_${base}?mrf_library=eq.${libraryMrf}`, config.schema, { fallback: [] });
+    return data.map(item => item.mrf_tag || item.mrf_child || item.mrf);
+  },
+
+  getEdges(base) {
+    const config = CONFIG.BASES[base];
+    if (!config) return Promise.resolve([]);
+    return this.fetch(`/graph_${base}`, config.schema, { fallback: [] });
+  },
+
+  getTree(base) {
+    const config = CONFIG.BASES[base];
+    if (!config) return Promise.resolve([]);
+    return this.fetch(`/tree_${base}`, config.schema, { fallback: [] });
+  },
+
+  getChildren(mrf, base) {
+    const config = CONFIG.BASES[base];
+    if (!config) return Promise.resolve([]);
+    return this.fetch("/rpc/api_children", config.schema, { method: "POST", body: { parent_mrf: mrf }, fallback: [] });
+  },
+
+  getRelated(mrf, base) {
+    const config = CONFIG.BASES[base];
+    if (!config) return Promise.resolve([]);
+    return this.fetch("/rpc/api_related", config.schema, { method: "POST", body: { tag_mrf: mrf }, fallback: [] });
+  }
+};
+
+// =============================================================================
+// 6. FILTER
+// =============================================================================
+const Filter = {
+  apply(tags) {
+    const { search, group, library, libraryMembers, lang } = State.get();
+    const query = search.toLowerCase();
+
+    return tags.filter(tag => {
+      if (library !== "all" && !libraryMembers.has(tag.mrf)) return false;
+      if (group !== "all" && tag.set_hst !== group) return false;
+      if (query) {
+        const name = Utils.getName(tag, lang).toLowerCase();
+        const ref = (tag.ref || "").toLowerCase();
+        const alias = (tag.alias || "").toLowerCase();
+        if (!name.includes(query) && !ref.includes(query) && !alias.includes(query)) return false;
+      }
+      return true;
+    });
+  }
+};
+
+// =============================================================================
+// 7. COMPONENTS
+// =============================================================================
+const GroupsBar = {
+  el: null,
+
+  init() {
+    this.el = Utils.$("#groups-bar");
+    this.el.addEventListener("click", (e) => {
+      const btn = e.target.closest(".group-btn");
+      if (!btn) return;
+      State.set({ group: btn.dataset.group });
+      this.render();
+      Events.emit('render');
+    });
+  },
+
+  render() {
+    const { base, tags, groups, group: activeGroup, lang } = State.get();
+    const config = CONFIG.BASES[base];
+
+    if (!config?.hasGroups || !groups.length) { this.el.innerHTML = ""; return; }
+
+    const allBtn = `<button class="group-btn ${activeGroup === "all" ? "group-btn--active" : ""}" data-group="all" aria-pressed="${activeGroup === "all"}">Todos (${tags.length})</button>`;
+    const groupBtns = groups.map(g => {
+      const name = Utils.escapeHtml(Utils.getName(g, lang));
+      return `<button class="group-btn ${activeGroup === g.mrf ? "group-btn--active" : ""}" data-group="${Utils.escapeHtml(g.mrf)}" aria-pressed="${activeGroup === g.mrf}">${name} (${g.count || 0})</button>`;
+    }).join("");
+    this.el.innerHTML = allBtn + groupBtns;
+  }
+};
+
+const LibrariesPanel = {
+  el: null,
+
+  init() {
+    this.el = Utils.$("#left-panel");
+    this.el.addEventListener("click", async (e) => {
+      const item = e.target.closest(".lib-icon");
+      if (!item) return;
+
+      const mrf = item.dataset.lib;
+      const base = State.get("base");
+
+      if (mrf === "all") {
+        State.set({ library: "all", libraryMembers: new Set() });
+      } else {
+        const members = await API.getLibraryMembers(base, mrf);
+        State.set({ library: mrf, libraryMembers: new Set(members) });
+      }
+      this.render();
+      Events.emit('render');
+    });
+  },
+
+  render() {
+    const { base, libraries, library: activeLib, lang } = State.get();
+    const config = CONFIG.BASES[base];
+
+    if (!config?.hasLibraries) {
+      this.el.innerHTML = '<div class="empty" style="font-size:0.7em;padding:20px">—</div>';
+      return;
+    }
+
+    const allIcon = `<div class="lib-icon ${activeLib === "all" ? "lib-icon--active" : ""}" data-lib="all" title="Todas" tabindex="0" role="button" aria-pressed="${activeLib === "all"}"><span>ALL</span></div>`;
+    const libIcons = libraries.map(lib => {
+      const name = Utils.escapeHtml(Utils.getName(lib, lang));
+      const img = Utils.resolveImage(lib.img_thumb_url || lib.icon_url);
+      const mrf = Utils.escapeHtml(lib.mrf);
+      return `<div class="lib-icon ${activeLib === lib.mrf ? "lib-icon--active" : ""}" data-lib="${mrf}" title="${name}" tabindex="0" role="button" aria-pressed="${activeLib === lib.mrf}">${img ? `<img src="${img}" alt="${name}">` : `<span>${name.slice(0, 4)}</span>`}</div>`;
+    }).join("");
+
+    this.el.innerHTML = allIcon + libIcons;
+  }
+};
+
+const DetailPanel = {
+  el: null,
+  contentEl: null,
+
+  init() {
+    this.el = Utils.$("#detail-panel");
+    this.contentEl = Utils.$("#detail-content");
+
+    this.el.addEventListener("click", async (e) => {
+      if (e.target.closest(".detail-close")) { this.close(); return; }
+      if (e.target.closest(".detail-mrf")) {
+        await Utils.copyToClipboard(e.target.textContent.trim());
+        Utils.toast("MRF copiado");
+        return;
+      }
+      const chip = e.target.closest(".tag-chip");
+      if (chip?.dataset.mrf) this.show(chip.dataset.mrf);
+    });
+  },
+
+  async show(mrf) {
+    const { tags, hstTags, lang, base } = State.get();
+    const tag = tags.find(t => t.mrf === mrf) || hstTags.find(t => t.mrf === mrf);
+    if (!tag) { Utils.toast("Tag no encontrado"); return; }
+
+    State.set({ selectedTag: tag });
+    const [children, related] = await Promise.all([API.getChildren(mrf, base), API.getRelated(mrf, base)]);
+
+    const name = Utils.escapeHtml(Utils.getName(tag, lang));
+    const img = Utils.resolveImage(tag.img_thumb_url || tag.img_url);
+    const ref = Utils.escapeHtml(tag.ref || "");
+    const desc = Utils.escapeHtml(tag.txt || tag.alias || "");
+    const safeMrf = Utils.escapeHtml(mrf);
+
+    this.contentEl.innerHTML = `
+      <div class="detail-header">
+        <button class="detail-close" aria-label="Cerrar detalle">&times;</button>
+        ${img ? `<img class="detail-img" src="${img}" alt="${ref}">` : `<div class="detail-placeholder">${ref.slice(0, 2) || "?"}</div>`}
+      </div>
+      <div class="detail-body">
+        <div class="detail-ref">${ref}</div>
+        <div class="detail-mrf" title="Click para copiar" tabindex="0" role="button">${safeMrf}</div>
+        <div class="detail-name">${name}</div>
+        ${desc ? `<div class="detail-desc">${desc}</div>` : ""}
+        ${children.length ? `<div class="detail-section"><h4>Hijos (${children.length})</h4><div class="chip-list">${children.map(c => `<span class="tag-chip" data-mrf="${Utils.escapeHtml(c.mrf)}" tabindex="0" role="button">${Utils.escapeHtml(Utils.getName(c, lang))}</span>`).join("")}</div></div>` : ""}
+        ${related.length ? `<div class="detail-section"><h4>Relacionados (${related.length})</h4><div class="chip-list">${related.map(r => `<span class="tag-chip" data-mrf="${Utils.escapeHtml(r.mrf)}" title="${Utils.escapeHtml(r.edge_type || "")}" tabindex="0" role="button">${Utils.escapeHtml(Utils.getName(r, lang))}</span>`).join("")}</div></div>` : ""}
+      </div>
+    `;
+    this.el.classList.add("detail-panel--open");
+  },
+
+  close() {
+    this.el.classList.remove("detail-panel--open");
+    State.set({ selectedTag: null });
+  }
+};
+
+// =============================================================================
+// 8. VIEWS
+// =============================================================================
+const GridView = {
+  render(tags) {
+    const area = Utils.$("#content-area");
+    area.className = "content-area content-area--grid";
+
+    if (!tags.length) { area.innerHTML = '<div class="empty">Sin resultados</div>'; return; }
+
+    const { lang, selectionMode, selected } = State.get();
+    area.innerHTML = tags.map(tag => {
+      const name = Utils.escapeHtml(Utils.getName(tag, lang));
+      const img = Utils.resolveImage(tag.img_thumb_url);
+      const ref = Utils.escapeHtml(tag.ref || "");
+      const mrf = Utils.escapeHtml(tag.mrf);
+      const isSelected = selected.has(tag.mrf);
+      return `
+        <div class="card ${isSelected ? "card--selected" : ""}" data-mrf="${mrf}" tabindex="0" role="button" aria-pressed="${isSelected}">
+          ${selectionMode ? `<input type="checkbox" class="card__checkbox" ${isSelected ? "checked" : ""} aria-label="Seleccionar ${name}">` : ""}
+          ${img ? `<img class="card__img" src="${img}" alt="${name}" loading="lazy">` : `<div class="card__placeholder">${ref.slice(0, 2) || "?"}</div>`}
+          <div class="card__name">${name}</div>
+        </div>
+      `;
+    }).join("");
+  }
+};
+
+const TreeView = {
+  render(tags) {
+    const area = Utils.$("#content-area");
+    area.className = "content-area content-area--tree";
+
+    if (!tags.length) { area.innerHTML = '<div class="empty">Sin resultados</div>'; return; }
+
+    const { lang, treeData } = State.get();
+
+    // Create tag lookup map
+    const tagMap = new Map();
+    tags.forEach(tag => tagMap.set(tag.mrf, tag));
+
+    // Create children map from tree_* data
+    const childrenMap = new Map(); // parent_mrf → [child_mrfs]
+    const hasParent = new Set();   // mrfs that have a parent
+
+    treeData.forEach(rel => {
+      if (tagMap.has(rel.mrf_child)) { // Only if child is in filtered tags
+        if (!childrenMap.has(rel.mrf_parent)) childrenMap.set(rel.mrf_parent, []);
+        childrenMap.get(rel.mrf_parent).push(rel.mrf_child);
+        hasParent.add(rel.mrf_child);
+      }
+    });
+
+    // Find root nodes: tags that don't have a parent (or parent not in tagMap)
+    const roots = tags.filter(tag => !hasParent.has(tag.mrf));
+
+    // Recursive render function
+    const renderNode = (mrf, depth = 0) => {
+      const tag = tagMap.get(mrf);
+      if (!tag) return "";
+
+      const name = Utils.escapeHtml(Utils.getName(tag, lang));
+      const img = Utils.resolveImage(tag.img_thumb_url);
+      const ref = Utils.escapeHtml(tag.ref || "");
+      const safeMrf = Utils.escapeHtml(mrf);
+      const children = childrenMap.get(mrf) || [];
+      const hasChildren = children.length > 0;
+
+      return `
+        <div class="tree-node" data-depth="${depth}">
+          <div class="tree-item ${hasChildren ? 'tree-item--parent' : ''}" data-mrf="${safeMrf}" tabindex="0" role="button" style="padding-left: ${12 + depth * 20}px">
+            ${hasChildren ? '<span class="tree-toggle" aria-hidden="true">+</span>' : '<span class="tree-toggle tree-toggle--empty"></span>'}
+            ${img ? `<img class="tree-item__img" src="${img}" alt="${name}">` : `<div class="tree-item__placeholder">${ref.slice(0, 1) || "?"}</div>`}
+            <span class="tree-item__name">${name}</span>
+            ${hasChildren ? `<span class="tree-count">${children.length}</span>` : ''}
+          </div>
+          ${hasChildren ? `<div class="tree-children" role="group">${children.map(c => renderNode(c, depth + 1)).join("")}</div>` : ''}
+        </div>
+      `;
+    };
+
+    if (!roots.length) {
+      area.innerHTML = '<div class="empty">Sin jerarquía definida</div>';
+      return;
+    }
+
+    area.innerHTML = roots.map(tag => renderNode(tag.mrf, 0)).join("");
+
+    // Bind toggle events
+    area.querySelectorAll(".tree-item--parent").forEach(item => {
+      const toggle = item.querySelector(".tree-toggle");
+      const children = item.nextElementSibling;
+
+      item.onclick = item.onkeydown = (e) => {
+        // Don't toggle if clicking to select (will be handled by content-area click)
+        if (e.target.closest(".tree-item__img, .tree-item__name, .tree-item__placeholder")) return;
+        if (e.type === "keydown" && e.key !== "Enter" && e.key !== " ") return;
+        if (e.type === "keydown") e.preventDefault();
+
+        if (children) {
+          const isExpanded = children.classList.toggle("tree-children--expanded");
+          toggle.textContent = isExpanded ? "−" : "+";
+        }
+      };
+    });
+  }
+};
+
+const GraphView = {
+  svg: null,
+  simulation: null,
+  zoom: null,
+  d3Loaded: false,
+
+  async render(tags) {
+    const area = Utils.$("#content-area");
+    area.className = "content-area content-area--graph";
+
+    // Clean up previous simulation
+    this.unmount();
+
+    if (!tags.length) { area.innerHTML = '<div class="empty">Sin resultados</div>'; return; }
+
+    if (!this.d3Loaded && typeof d3 === "undefined") {
+      area.innerHTML = '<div class="loading">Cargando visualización...</div>';
+      await this.loadD3();
+    }
+
+    const { graphFilters, graphSettings, edges, lang } = State.get();
+
+    const nodeMap = new Map();
+    tags.forEach(tag => {
+      const cat = Utils.getCategory(tag);
+      if (graphFilters.categories.has(cat)) {
+        nodeMap.set(tag.mrf, {
+          id: tag.mrf, ref: tag.ref || "",
+          name: Utils.getName(tag, lang),
+          img: Utils.resolveImage(tag.img_thumb_url),
+          category: cat, color: CONFIG.CATEGORIES[cat]?.color || "#7c8aff"
+        });
+      }
+    });
+
+    const links = edges
+      .filter(e => nodeMap.has(e.mrf_a) && nodeMap.has(e.mrf_b) && graphFilters.edgeTypes.has(e.edge_type))
+      .map(e => ({ source: e.mrf_a, target: e.mrf_b, type: e.edge_type, weight: e.weight || 1, color: CONFIG.EDGE_TYPES[e.edge_type] || "#666" }));
+
+    const nodes = Array.from(nodeMap.values());
+
+    area.innerHTML = '<div class="graph-container"></div>';
+    const container = area.querySelector(".graph-container");
+
+    this.renderSVG(container, nodes, links);
+    this.renderSidebar(container, nodes.length, links.length);
+    this.renderControls(container);
+    this.renderLegend(container);
+  },
+
+  async loadD3() {
+    return new Promise((resolve, reject) => {
+      const script = document.createElement("script");
+      script.src = "https://d3js.org/d3.v7.min.js";
+      script.onload = () => { this.d3Loaded = true; resolve(); };
+      script.onerror = reject;
+      document.head.appendChild(script);
+    });
+  },
+
+  renderSVG(container, nodes, links) {
+    const { graphSettings } = State.get();
+    const width = container.clientWidth || 800;
+    const height = container.clientHeight || 600;
+
+    this.svg = d3.select(container).append("svg").attr("width", width).attr("height", height).attr("role", "img").attr("aria-label", "Grafo de relaciones");
+    const g = this.svg.append("g");
+
+    this.zoom = d3.zoom().scaleExtent([0.1, 4]).on("zoom", (e) => g.attr("transform", e.transform));
+    this.svg.call(this.zoom);
+
+    const hasLinks = links.length > 0;
+    this.simulation = d3.forceSimulation(nodes)
+      .force("link", d3.forceLink(links).id(d => d.id).distance(graphSettings.linkDist))
+      .force("charge", d3.forceManyBody().strength(hasLinks ? -150 : -30))
+      .force("center", d3.forceCenter(width / 2, height / 2))
+      .force("collision", d3.forceCollide().radius(graphSettings.nodeSize + 5));
+
+    if (!hasLinks) {
+      this.simulation.force("radial", d3.forceRadial(Math.min(width, height) / 3, width / 2, height / 2).strength(0.1));
+    }
+
+    const link = g.append("g").selectAll("line").data(links).join("line")
+      .attr("stroke", d => d.color).attr("stroke-width", d => Math.max(1.5, Math.sqrt(d.weight)));
+
+    const node = g.append("g").selectAll("g").data(nodes).join("g").call(this.createDrag());
+    node.append("circle").attr("r", graphSettings.nodeSize).attr("fill", d => d.color).attr("stroke", "#fff").attr("stroke-width", 2);
+
+    if (graphSettings.showImages) {
+      node.each(function(d) {
+        if (d.img) {
+          d3.select(this).append("image")
+            .attr("xlink:href", d.img)
+            .attr("x", -graphSettings.nodeSize).attr("y", -graphSettings.nodeSize)
+            .attr("width", graphSettings.nodeSize * 2).attr("height", graphSettings.nodeSize * 2)
+            .attr("clip-path", `circle(${graphSettings.nodeSize}px)`);
+        }
+      });
+    }
+
+    if (graphSettings.showLabels) {
+      node.append("text").text(d => d.name.slice(0, 12))
+        .attr("dy", graphSettings.nodeSize + 14).attr("text-anchor", "middle")
+        .attr("fill", "#e0e0e0").attr("font-size", "10px");
+    }
+
+    node.on("click", (e, d) => { e.stopPropagation(); Events.emit('detail:show', d.id); });
+
+    this.simulation.on("tick", () => {
+      link.attr("x1", d => d.source.x).attr("y1", d => d.source.y).attr("x2", d => d.target.x).attr("y2", d => d.target.y);
+      node.attr("transform", d => `translate(${d.x},${d.y})`);
+    });
+  },
+
+  createDrag() {
+    const sim = this.simulation;
+    return d3.drag()
+      .on("start", (e, d) => { if (!e.active) sim.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; })
+      .on("drag", (e, d) => { d.fx = e.x; d.fy = e.y; })
+      .on("end", (e, d) => { if (!e.active) sim.alphaTarget(0); d.fx = null; d.fy = null; });
+  },
+
+  renderSidebar(container, nodeCount, edgeCount) {
+    const { graphFilters, graphSettings } = State.get();
+    const sidebar = document.createElement("div");
+    sidebar.className = "graph-sidebar";
+    sidebar.innerHTML = `
+      <div class="graph-section">
+        <div class="graph-section__title">Stats</div>
+        <div class="graph-stat"><span>Nodos</span><span class="graph-stat__value">${nodeCount}</span></div>
+        <div class="graph-stat"><span>Edges</span><span class="graph-stat__value">${edgeCount}</span></div>
+      </div>
+      <div class="graph-section">
+        <div class="graph-section__title">Categorías</div>
+        ${Object.entries(CONFIG.CATEGORIES).map(([key, val]) => `<label class="graph-checkbox"><input type="checkbox" data-category="${key}" ${graphFilters.categories.has(key) ? "checked" : ""}><span class="color-dot" style="background:${val.color}"></span>${Utils.escapeHtml(val.name)}</label>`).join("")}
+      </div>
+      <div class="graph-section">
+        <div class="graph-section__title">Relaciones</div>
+        ${Object.entries(CONFIG.EDGE_TYPES).map(([key, color]) => `<label class="graph-checkbox"><input type="checkbox" data-edge="${key}" ${graphFilters.edgeTypes.has(key) ? "checked" : ""}><span class="color-dot" style="background:${color}"></span>${Utils.escapeHtml(key)}</label>`).join("")}
+      </div>
+      <div class="graph-section">
+        <div class="graph-section__title">Visual</div>
+        <label class="graph-checkbox"><input type="checkbox" id="gs-images" ${graphSettings.showImages ? "checked" : ""}>Imágenes</label>
+        <label class="graph-checkbox"><input type="checkbox" id="gs-labels" ${graphSettings.showLabels ? "checked" : ""}>Etiquetas</label>
+        <div class="graph-slider">
+          <div class="graph-slider__label"><span>Nodo</span><span class="graph-slider__value" id="gs-size-val">${graphSettings.nodeSize}px</span></div>
+          <input type="range" id="gs-size" min="10" max="60" value="${graphSettings.nodeSize}" aria-label="Tamaño de nodo">
+        </div>
+        <div class="graph-slider">
+          <div class="graph-slider__label"><span>Distancia</span><span class="graph-slider__value" id="gs-dist-val">${graphSettings.linkDist}px</span></div>
+          <input type="range" id="gs-dist" min="30" max="200" value="${graphSettings.linkDist}" aria-label="Distancia entre nodos">
+        </div>
+      </div>
+    `;
+    container.appendChild(sidebar);
+    this.bindSidebarEvents(sidebar);
+  },
+
+  bindSidebarEvents(sidebar) {
+    const { graphFilters, graphSettings } = State.get();
+
+    sidebar.querySelectorAll("[data-category]").forEach(cb => {
+      cb.onchange = () => {
+        const cats = new Set(graphFilters.categories);
+        cb.checked ? cats.add(cb.dataset.category) : cats.delete(cb.dataset.category);
+        State.set({ graphFilters: { ...graphFilters, categories: cats } });
+        Events.emit('render');
+      };
+    });
+
+    sidebar.querySelectorAll("[data-edge]").forEach(cb => {
+      cb.onchange = () => {
+        const edges = new Set(graphFilters.edgeTypes);
+        cb.checked ? edges.add(cb.dataset.edge) : edges.delete(cb.dataset.edge);
+        State.set({ graphFilters: { ...graphFilters, edgeTypes: edges } });
+        Events.emit('render');
+      };
+    });
+
+    sidebar.querySelector("#gs-images").onchange = (e) => { State.set({ graphSettings: { ...graphSettings, showImages: e.target.checked } }); Events.emit('render'); };
+    sidebar.querySelector("#gs-labels").onchange = (e) => { State.set({ graphSettings: { ...graphSettings, showLabels: e.target.checked } }); Events.emit('render'); };
+
+    const sizeSlider = sidebar.querySelector("#gs-size");
+    sizeSlider.oninput = (e) => { sidebar.querySelector("#gs-size-val").textContent = e.target.value + "px"; };
+    sizeSlider.onchange = (e) => { State.set({ graphSettings: { ...graphSettings, nodeSize: parseInt(e.target.value) } }); Events.emit('render'); };
+
+    const distSlider = sidebar.querySelector("#gs-dist");
+    distSlider.oninput = (e) => { sidebar.querySelector("#gs-dist-val").textContent = e.target.value + "px"; };
+    distSlider.onchange = (e) => { State.set({ graphSettings: { ...graphSettings, linkDist: parseInt(e.target.value) } }); Events.emit('render'); };
+  },
+
+  renderControls(container) {
+    const controls = document.createElement("div");
+    controls.className = "graph-controls";
+    controls.innerHTML = `<button class="btn btn--sm" id="graph-fit" aria-label="Ajustar vista">Ajustar</button><button class="btn btn--sm" id="graph-zin" aria-label="Acercar">+</button><button class="btn btn--sm" id="graph-zout" aria-label="Alejar">−</button>`;
+    container.appendChild(controls);
+
+    controls.querySelector("#graph-fit").onclick = () => { this.svg.transition().duration(500).call(this.zoom.transform, d3.zoomIdentity); };
+    controls.querySelector("#graph-zin").onclick = () => { this.svg.transition().duration(300).call(this.zoom.scaleBy, 1.5); };
+    controls.querySelector("#graph-zout").onclick = () => { this.svg.transition().duration(300).call(this.zoom.scaleBy, 0.67); };
+  },
+
+  renderLegend(container) {
+    const { graphFilters } = State.get();
+    const legend = document.createElement("div");
+    legend.className = "graph-legend";
+    legend.setAttribute("role", "legend");
+    legend.innerHTML = Array.from(graphFilters.categories).map(cat => `<div class="legend-item"><span class="color-dot" style="background:${CONFIG.CATEGORIES[cat]?.color || "#7c8aff"}"></span><span>${Utils.escapeHtml(CONFIG.CATEGORIES[cat]?.name || cat)}</span></div>`).join("");
+    container.appendChild(legend);
+  },
+
+  unmount() {
+    if (this.simulation) { this.simulation.stop(); this.simulation = null; }
+    if (this.svg) { this.svg.remove(); this.svg = null; }
+    this.zoom = null;
+  }
+};
+
+// =============================================================================
+// 9. APP
+// =============================================================================
+const App = {
+  async init() {
+    const hashState = Utils.parseHash();
+    if (hashState.base) State.set({ base: hashState.base });
+    if (hashState.view) State.set({ view: hashState.view });
+
+    // Event subscriptions (desacoplamiento)
+    Events.on('render', () => this.renderView());
+    Events.on('detail:show', (mrf) => DetailPanel.show(mrf));
+
+    GroupsBar.init();
+    LibrariesPanel.init();
+    DetailPanel.init();
+    this.bindEvents();
+
+    await this.loadData(State.get("base"));
+    this.renderView();
+    this.updateBaseButtons();
+    this.updateViewTabs();
+  },
+
+  bindEvents() {
+    Utils.$$(".base-btn").forEach(btn => { btn.onclick = () => this.changeBase(btn.dataset.base); });
+    Utils.$$(".view-tab").forEach(tab => { tab.onclick = () => this.changeView(tab.dataset.view); });
+
+    Utils.$("#lang-select").onchange = (e) => {
+      State.set({ lang: e.target.value });
+      this.renderView();
+      const selectedTag = State.get("selectedTag");
+      if (selectedTag) DetailPanel.show(selectedTag.mrf);
+    };
+
+    const searchInput = Utils.$("#search");
+    searchInput.oninput = Utils.debounce(() => { State.set({ search: searchInput.value }); this.renderView(); }, 200);
+
+    Utils.$("#btn-sel").onclick = () => {
+      const currentMode = State.get("selectionMode");
+      State.set({ selectionMode: !currentMode });
+      if (!State.get("selectionMode")) State.set({ selected: new Set() });
+      const btn = Utils.$("#btn-sel");
+      btn.classList.toggle("btn--active", State.get("selectionMode"));
+      btn.setAttribute("aria-pressed", State.get("selectionMode"));
+      this.updateSelectionCount();
+      this.renderView();
+    };
+
+    Utils.$("#btn-get").onclick = async () => {
+      const selected = State.get("selected");
+      if (!selected.size) { Utils.toast("No hay seleccionados"); return; }
+      await Utils.copyToClipboard([...selected].join("\n"));
+      Utils.toast(`Copiados ${selected.size} MRFs`);
+    };
+
+    Utils.$("#btn-api").onclick = () => { Utils.$("#api-modal").classList.add("modal--open"); };
+    Utils.$(".modal-close").onclick = () => { Utils.$("#api-modal").classList.remove("modal--open"); };
+    Utils.$("#api-modal").onclick = (e) => { if (e.target.id === "api-modal") Utils.$("#api-modal").classList.remove("modal--open"); };
+
+    Utils.$("#content-area").onclick = (e) => {
+      const item = e.target.closest(".card, .tree-item");
+      if (!item) return;
+      const mrf = item.dataset.mrf;
+      if (!mrf) return;
+
+      const { selectionMode, selected } = State.get();
+      if (selectionMode) {
+        const newSelected = new Set(selected);
+        newSelected.has(mrf) ? newSelected.delete(mrf) : newSelected.add(mrf);
+        State.set({ selected: newSelected });
+        this.updateSelectionCount();
+        this.renderView();
+      } else {
+        DetailPanel.show(mrf);
+      }
+    };
+
+    document.onkeydown = (e) => {
+      if (e.key === "Escape") {
+        DetailPanel.close();
+        Utils.$("#api-modal").classList.remove("modal--open");
+        if (State.get("selectionMode")) {
+          State.set({ selectionMode: false, selected: new Set() });
+          Utils.$("#btn-sel").classList.remove("btn--active");
+          Utils.$("#btn-sel").setAttribute("aria-pressed", "false");
+          this.updateSelectionCount();
+          this.renderView();
+        }
+      }
+      if (e.key === "/" && e.target.tagName !== "INPUT") { e.preventDefault(); Utils.$("#search").focus(); }
+    };
+
+    window.onhashchange = () => {
+      const hashState = Utils.parseHash();
+      if (hashState.base && hashState.base !== State.get("base")) this.changeBase(hashState.base);
+      if (hashState.view && hashState.view !== State.get("view")) this.changeView(hashState.view);
+    };
+  },
+
+  async loadData(base) {
+    Utils.$("#content-area").innerHTML = '<div class="loading">Cargando...</div>';
+    try {
+      const [tags, hstTags, groups, libraries, edges, treeData] = await Promise.all([
+        API.getTags(base), API.getHstTags(), API.getGroups(), API.getLibraries(base), API.getEdges(base), API.getTree(base)
+      ]);
+      State.set({ tags, hstTags, groups, libraries, edges, treeData });
+      GroupsBar.render();
+      LibrariesPanel.render();
+    } catch (error) {
+      console.error("Failed to load data:", error);
+      Utils.$("#content-area").innerHTML = '<div class="empty">Error cargando datos</div>';
+    }
+  },
+
+  async changeBase(base) {
+    State.set({ base });
+    State.resetFilters();
+    State.set({ edges: [] });
+    Utils.$("#search").value = "";
+    this.updateBaseButtons();
+    DetailPanel.close();
+    GraphView.unmount();
+    Utils.updateHash();
+    await this.loadData(base);
+    this.renderView();
+  },
+
+  changeView(view) {
+    GraphView.unmount();
+    State.set({ view });
+    this.updateViewTabs();
+    DetailPanel.close();
+    Utils.updateHash();
+    this.renderView();
+  },
+
+  renderView() {
+    const { view, tags } = State.get();
+    const filtered = Filter.apply(tags);
+    switch (view) {
+      case "grid": GridView.render(filtered); break;
+      case "tree": TreeView.render(filtered); break;
+      case "graph": GraphView.render(filtered); break;
+    }
+  },
+
+  updateBaseButtons() {
+    const base = State.get("base");
+    Utils.$$(".base-btn").forEach(btn => {
+      const isActive = btn.dataset.base === base;
+      btn.classList.toggle("base-btn--active", isActive);
+      btn.setAttribute("aria-pressed", isActive);
+    });
+  },
+
+  updateViewTabs() {
+    const view = State.get("view");
+    Utils.$$(".view-tab").forEach(tab => {
+      const isActive = tab.dataset.view === view;
+      tab.classList.toggle("view-tab--active", isActive);
+      tab.setAttribute("aria-pressed", isActive);
+    });
+  },
+
+  updateSelectionCount() {
+    const count = State.get("selected").size;
+    const el = Utils.$("#sel-count");
+    if (count > 0) { el.textContent = `(${count})`; el.classList.remove("hidden"); }
+    else { el.classList.add("hidden"); }
+  }
+};
+
+document.addEventListener("DOMContentLoaded", () => App.init());
+</script>
+</body>
+</html>
