@liquidcars/atlas 0.1.14 → 0.1.16

package/README.md

@@ -65,6 +65,21 @@ atlas.setTheme({
   ui: { breadcrumbs: true, panel: true, toolbar: true, hint: false }
 });
 atlas.setPalette({ channels: '#58b6ec', offers: '#48c8b0', connection: '#f4edba' });
+
+// El componente se puede modificar sin volver a crearlo.
+atlas.addEntity({ id: 'service', name: 'Service', geometry: 'cone', p: [4, 0, 0], s: [2, 2, 2] });
+atlas.updateEntity('service', { text: 'Servicio actualizado', c: '#ed8f98' });
+atlas.addRelation({ from: 'service', to: 'offers', label: 'publica', mode: 'bidirectional' });
+atlas.updateRelation(0, { mode: 'broken' });
+atlas.removeRelation(0);
+atlas.removeEntity('service');
+
+atlas.addEventListener('lc-select', event => {
+  console.log('Entidad seleccionada:', event.detail.id, event.detail.entity);
+});
+atlas.addEventListener('lc-model-change', event => {
+  console.log('Modelo actualizado:', event.detail.kind);
+});
 ```
 
 El mismo bloque `theme` puede formar parte del JSON del modelo. Los estilos
@@ -73,7 +88,12 @@ principales también están expuestos como variables CSS (`--lc-bg`,
 por lo que una aplicación puede adaptar la apariencia sin modificar el bundle.
 Las propiedades `atlas.theme` y `atlas.styles` son alias prácticos de esta configuración.
 
-Eventos disponibles: `lc-ready`, `lc-error`, `lc-select`, `lc-relation-mode` y `lc-disconnect`.
+Eventos disponibles: `lc-ready`, `lc-error`, `lc-select`, `lc-model-change`,
+`lc-relation-mode` y `lc-disconnect`. `lc-select` incluye `{ id, entity,
+source }` en `event.detail`; cuando se vuelve a la vista general emite `id:
+null`. Los eventos de selección y cambios de modelo son `bubbles` y
+`composed`, por lo que funcionan también al integrar el componente en otras
+capas de Web Components.
 
 ## Contrato de datos
 
@@ -83,6 +103,10 @@ Eventos disponibles: `lc-ready`, `lc-error`, `lc-select`, `lc-relation-mode` y `
 - `p` es la posición local respecto a `parent`; una entidad sin `parent` usa coordenadas de escena.
 - `s` son dimensiones absolutas locales `[x, y, z]`.
 - `relations` acepta objetos `{from, to, label}` o la forma corta `[from, to, label]`.
+  El campo visual opcional `mode` admite `directed` (por defecto),
+  `bidirectional` y `broken`. En modo bidireccional los indicadores animados
+  circulan en ambos sentidos por el mismo tubo; en modo broken el tubo aparece
+  interrumpido en su punto medio.
 
 Geometrías incluidas en esta primera versión: `box`, `cylinder`, `sphere`, `cone`, `frustum-cone`, `frustum-pyramid`, `frustum-triangle`, `prism`, `pyramid-square`, `pyramid-triangle`, `octahedron`, `dodecahedron` e `icosahedron`. Las variantes `frustum-*` son sólidos truncados con dos caras finitas paralelas; las dimensiones `s` se aplican sobre su caja final normalizada.
 
@@ -90,6 +114,13 @@ La paleta puede cambiarse después de cargar el modelo mediante `atlas.setPalett
 
 Las acciones de navegación y exploración de la toolbar también están disponibles para la página anfitriona: `zoomIn()`, `zoomOut()`, `fit()`, `frontView()`, `setShellLabels()`, `toggleShellLabels()`, `openAllContainers()` y `closeAllContainers()`. Así se puede construir una barra de controles propia sin depender de la toolbar interna.
 
+La escena también se puede editar en caliente. `updateModel(patch)` reemplaza
+las secciones indicadas; `addEntity`, `updateEntity` y `removeEntity` gestionan
+entidades, mientras `addRelation`, `updateRelation` y `removeRelation`
+gestionan relaciones. Cada operación reconstruye la geometría necesaria,
+conserva la cámara y la selección cuando sigue siendo válida, y emite
+`lc-model-change` con el tipo de operación y el modelo resultante.
+
 ## Distribución
 
 El archivo `dist/liquidcars-atlas.js` es un módulo ESM autocontenido: Three.js se incluye dentro del bundle, por lo que el consumidor no necesita instalar otra dependencia para probarlo. El bundle no contiene ningún modelo de negocio ni datos de LiquidCars Atlas; los modelos se suministran aparte mediante `model`, `src` o un `<script type="application/json">`. Para una distribución privada se puede servir ese archivo desde un CDN propio o desde el mismo sitio. Para publicar en npm, después de revisar el API estable:
@@ -103,9 +134,9 @@ Una vez publicado, los consumidores podrán instalarlo con `npm install @liquidc
 Para probar el paquete sin publicarlo, basta con instalar el tarball generado:
 
 ```bash
-npm install ./liquidcars-atlas-0.1.14.tgz
+npm install ./liquidcars-atlas-0.1.15.tgz
 ```
 
 ## Estado
 
-`0.1.14` mantiene la corrección del desplazamiento interno del texto y ancla las etiquetas a las dimensiones reales de las geometrías redondeadas. Además fija un margen superior absoluto para las etiquetas secundarias de contenedores abiertos, situado dentro del frontal del contenedor y sin depender de sus dimensiones. También corrige los sólidos truncados, normaliza sus dimensiones finales, refuerza la visibilidad de la toolbar con el atributo `toolbar="on"`/`"off"` y `setToolbarVisible()`, desacopla la paleta por defecto de nombres de dominio, añade actualización programática de la paleta con `setPalette` y expone las acciones de navegación para controles externos.
+`0.1.16` mantiene la corrección del desplazamiento interno del texto y ancla las etiquetas a las dimensiones reales de las geometrías redondeadas. Además fija un margen superior absoluto para las etiquetas secundarias de contenedores abiertos, situado dentro del frontal del contenedor y sin depender de sus dimensiones. También corrige los sólidos truncados, normaliza sus dimensiones finales, refuerza la visibilidad de la toolbar con el atributo `toolbar="on"`/`"off"` y `setToolbarVisible()`, desacopla la paleta por defecto de nombres de dominio, añade actualización programática de la paleta con `setPalette`, expone las acciones de navegación para controles externos y mantiene siempre visibles las ayudas de interacción dentro del viewport. Esta versión añade edición en caliente de entidades y relaciones, eventos compuestos de selección y los modos de relación `directed`, `bidirectional` y `broken`.

package/demo/index.html

@@ -14,12 +14,12 @@
     liquidcars-atlas { display: block; width: 100%; max-width: 1480px; margin: 0 auto; }
     code { color: #85e5d3; }
   </style>
-  <script type="module" src="../dist/liquidcars-atlas.js?v=0.1.14"></script>
+  <script type="module" src="../dist/liquidcars-atlas.js?v=0.1.15"></script>
 </head>
 <body>
   <header>
     <h1>LiquidCars Atlas</h1>
-    <p>Prueba de distribución del componente <code>&lt;liquidcars-atlas&gt;</code> · v0.1.14</p>
+    <p>Prueba de distribución del componente <code>&lt;liquidcars-atlas&gt;</code> · v0.1.15</p>
   </header>
   <main>
     <liquidcars-atlas id="atlas" height="720" relation-mode="selected" shell-labels="on"></liquidcars-atlas>

package/dist/liquidcars-atlas.js

@@ -1,6 +1,11 @@
-/*! LiquidCars Atlas 0.1.14 | MIT */
+/*! LiquidCars Atlas 0.1.16 | MIT */
 
 // src/three.core.js
+/**
+ * @license
+ * Copyright 2010-2025 Three.js Authors
+ * SPDX-License-Identifier: MIT
+ */
 var REVISION = "180";
 var CullFaceNone = 0;
 var CullFaceBack = 1;
@@ -221,6 +226,7 @@ var EventDispatcher = class {
   }
 };
 var _lut = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "0a", "0b", "0c", "0d", "0e", "0f", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "1a", "1b", "1c", "1d", "1e", "1f", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "2a", "2b", "2c", "2d", "2e", "2f", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "3a", "3b", "3c", "3d", "3e", "3f", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "4a", "4b", "4c", "4d", "4e", "4f", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59", "5a", "5b", "5c", "5d", "5e", "5f", "60", "61", "62", "63", "64", "65", "66", "67", "68", "69", "6a", "6b", "6c", "6d", "6e", "6f", "70", "71", "72", "73", "74", "75", "76", "77", "78", "79", "7a", "7b", "7c", "7d", "7e", "7f", "80", "81", "82", "83", "84", "85", "86", "87", "88", "89", "8a", "8b", "8c", "8d", "8e", "8f", "90", "91", "92", "93", "94", "95", "96", "97", "98", "99", "9a", "9b", "9c", "9d", "9e", "9f", "a0", "a1", "a2", "a3", "a4", "a5", "a6", "a7", "a8", "a9", "aa", "ab", "ac", "ad", "ae", "af", "b0", "b1", "b2", "b3", "b4", "b5", "b6", "b7", "b8", "b9", "ba", "bb", "bc", "bd", "be", "bf", "c0", "c1", "c2", "c3", "c4", "c5", "c6", "c7", "c8", "c9", "ca", "cb", "cc", "cd", "ce", "cf", "d0", "d1", "d2", "d3", "d4", "d5", "d6", "d7", "d8", "d9", "da", "db", "dc", "dd", "de", "df", "e0", "e1", "e2", "e3", "e4", "e5", "e6", "e7", "e8", "e9", "ea", "eb", "ec", "ed", "ee", "ef", "f0", "f1", "f2", "f3", "f4", "f5", "f6", "f7", "f8", "f9", "fa", "fb", "fc", "fd", "fe", "ff"];
+var _seed = 1234567;
 var DEG2RAD = Math.PI / 180;
 var RAD2DEG = 180 / Math.PI;
 function generateUUID() {
@@ -237,9 +243,102 @@ function clamp(value, min, max) {
 function euclideanModulo(n, m) {
   return (n % m + m) % m;
 }
+function mapLinear(x, a1, a2, b1, b2) {
+  return b1 + (x - a1) * (b2 - b1) / (a2 - a1);
+}
+function inverseLerp(x, y, value) {
+  if (x !== y) {
+    return (value - x) / (y - x);
+  } else {
+    return 0;
+  }
+}
 function lerp(x, y, t) {
   return (1 - t) * x + t * y;
 }
+function damp(x, y, lambda, dt) {
+  return lerp(x, y, 1 - Math.exp(-lambda * dt));
+}
+function pingpong(x, length = 1) {
+  return length - Math.abs(euclideanModulo(x, length * 2) - length);
+}
+function smoothstep(x, min, max) {
+  if (x <= min) return 0;
+  if (x >= max) return 1;
+  x = (x - min) / (max - min);
+  return x * x * (3 - 2 * x);
+}
+function smootherstep(x, min, max) {
+  if (x <= min) return 0;
+  if (x >= max) return 1;
+  x = (x - min) / (max - min);
+  return x * x * x * (x * (x * 6 - 15) + 10);
+}
+function randInt(low, high) {
+  return low + Math.floor(Math.random() * (high - low + 1));
+}
+function randFloat(low, high) {
+  return low + Math.random() * (high - low);
+}
+function randFloatSpread(range) {
+  return range * (0.5 - Math.random());
+}
+function seededRandom(s) {
+  if (s !== void 0) _seed = s;
+  let t = _seed += 1831565813;
+  t = Math.imul(t ^ t >>> 15, t | 1);
+  t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+  return ((t ^ t >>> 14) >>> 0) / 4294967296;
+}
+function degToRad(degrees) {
+  return degrees * DEG2RAD;
+}
+function radToDeg(radians) {
+  return radians * RAD2DEG;
+}
+function isPowerOfTwo(value) {
+  return (value & value - 1) === 0 && value !== 0;
+}
+function ceilPowerOfTwo(value) {
+  return Math.pow(2, Math.ceil(Math.log(value) / Math.LN2));
+}
+function floorPowerOfTwo(value) {
+  return Math.pow(2, Math.floor(Math.log(value) / Math.LN2));
+}
+function setQuaternionFromProperEuler(q, a, b, c, order) {
+  const cos = Math.cos;
+  const sin = Math.sin;
+  const c2 = cos(b / 2);
+  const s2 = sin(b / 2);
+  const c13 = cos((a + c) / 2);
+  const s13 = sin((a + c) / 2);
+  const c1_3 = cos((a - c) / 2);
+  const s1_3 = sin((a - c) / 2);
+  const c3_1 = cos((c - a) / 2);
+  const s3_1 = sin((c - a) / 2);
+  switch (order) {
+    case "XYX":
+      q.set(c2 * s13, s2 * c1_3, s2 * s1_3, c2 * c13);
+      break;
+    case "YZY":
+      q.set(s2 * s1_3, c2 * s13, s2 * c1_3, c2 * c13);
+      break;
+    case "ZXZ":
+      q.set(s2 * c1_3, s2 * s1_3, c2 * s13, c2 * c13);
+      break;
+    case "XZX":
+      q.set(c2 * s13, s2 * s3_1, s2 * c3_1, c2 * c13);
+      break;
+    case "YXY":
+      q.set(s2 * c3_1, c2 * s13, s2 * s3_1, c2 * c13);
+      break;
+    case "ZYZ":
+      q.set(s2 * s3_1, s2 * c3_1, c2 * s13, c2 * c13);
+      break;
+    default:
+      console.warn("THREE.MathUtils: .setQuaternionFromProperEuler() encountered an unknown order: " + order);
+  }
+}
 function denormalize(value, array) {
   switch (array.constructor) {
     case Float32Array:
@@ -280,6 +379,250 @@ function normalize(value, array) {
       throw new Error("Invalid component type.");
   }
 }
+var MathUtils = {
+  DEG2RAD,
+  RAD2DEG,
+  /**
+   * Generate a [UUID]{@link https://en.wikipedia.org/wiki/Universally_unique_identifier}
+   * (universally unique identifier).
+   *
+   * @static
+   * @method
+   * @return {string} The UUID.
+   */
+  generateUUID,
+  /**
+   * Clamps the given value between min and max.
+   *
+   * @static
+   * @method
+   * @param {number} value - The value to clamp.
+   * @param {number} min - The min value.
+   * @param {number} max - The max value.
+   * @return {number} The clamped value.
+   */
+  clamp,
+  /**
+   * Computes the Euclidean modulo of the given parameters that
+   * is `( ( n % m ) + m ) % m`.
+   *
+   * @static
+   * @method
+   * @param {number} n - The first parameter.
+   * @param {number} m - The second parameter.
+   * @return {number} The Euclidean modulo.
+   */
+  euclideanModulo,
+  /**
+   * Performs a linear mapping from range `<a1, a2>` to range `<b1, b2>`
+   * for the given value.
+   *
+   * @static
+   * @method
+   * @param {number} x - The value to be mapped.
+   * @param {number} a1 - Minimum value for range A.
+   * @param {number} a2 - Maximum value for range A.
+   * @param {number} b1 - Minimum value for range B.
+   * @param {number} b2 - Maximum value for range B.
+   * @return {number} The mapped value.
+   */
+  mapLinear,
+  /**
+   * Returns the percentage in the closed interval `[0, 1]` of the given value
+   * between the start and end point.
+   *
+   * @static
+   * @method
+   * @param {number} x - The start point
+   * @param {number} y - The end point.
+   * @param {number} value - A value between start and end.
+   * @return {number} The interpolation factor.
+   */
+  inverseLerp,
+  /**
+   * Returns a value linearly interpolated from two known points based on the given interval -
+   * `t = 0` will return `x` and `t = 1` will return `y`.
+   *
+   * @static
+   * @method
+   * @param {number} x - The start point
+   * @param {number} y - The end point.
+   * @param {number} t - The interpolation factor in the closed interval `[0, 1]`.
+   * @return {number} The interpolated value.
+   */
+  lerp,
+  /**
+   * Smoothly interpolate a number from `x` to `y` in  a spring-like manner using a delta
+   * time to maintain frame rate independent movement. For details, see
+   * [Frame rate independent damping using lerp]{@link http://www.rorydriscoll.com/2016/03/07/frame-rate-independent-damping-using-lerp/}.
+   *
+   * @static
+   * @method
+   * @param {number} x - The current point.
+   * @param {number} y - The target point.
+   * @param {number} lambda - A higher lambda value will make the movement more sudden,
+   * and a lower value will make the movement more gradual.
+   * @param {number} dt - Delta time in seconds.
+   * @return {number} The interpolated value.
+   */
+  damp,
+  /**
+   * Returns a value that alternates between `0` and the given `length` parameter.
+   *
+   * @static
+   * @method
+   * @param {number} x - The value to pingpong.
+   * @param {number} [length=1] - The positive value the function will pingpong to.
+   * @return {number} The alternated value.
+   */
+  pingpong,
+  /**
+   * Returns a value in the range `[0,1]` that represents the percentage that `x` has
+   * moved between `min` and `max`, but smoothed or slowed down the closer `x` is to
+   * the `min` and `max`.
+   *
+   * See [Smoothstep]{@link http://en.wikipedia.org/wiki/Smoothstep} for more details.
+   *
+   * @static
+   * @method
+   * @param {number} x - The value to evaluate based on its position between min and max.
+   * @param {number} min - The min value. Any x value below min will be `0`.
+   * @param {number} max - The max value. Any x value above max will be `1`.
+   * @return {number} The alternated value.
+   */
+  smoothstep,
+  /**
+   * A [variation on smoothstep]{@link https://en.wikipedia.org/wiki/Smoothstep#Variations}
+   * that has zero 1st and 2nd order derivatives at x=0 and x=1.
+   *
+   * @static
+   * @method
+   * @param {number} x - The value to evaluate based on its position between min and max.
+   * @param {number} min - The min value. Any x value below min will be `0`.
+   * @param {number} max - The max value. Any x value above max will be `1`.
+   * @return {number} The alternated value.
+   */
+  smootherstep,
+  /**
+   * Returns a random integer from `<low, high>` interval.
+   *
+   * @static
+   * @method
+   * @param {number} low - The lower value boundary.
+   * @param {number} high - The upper value boundary
+   * @return {number} A random integer.
+   */
+  randInt,
+  /**
+   * Returns a random float from `<low, high>` interval.
+   *
+   * @static
+   * @method
+   * @param {number} low - The lower value boundary.
+   * @param {number} high - The upper value boundary
+   * @return {number} A random float.
+   */
+  randFloat,
+  /**
+   * Returns a random integer from `<-range/2, range/2>` interval.
+   *
+   * @static
+   * @method
+   * @param {number} range - Defines the value range.
+   * @return {number} A random float.
+   */
+  randFloatSpread,
+  /**
+   * Returns a deterministic pseudo-random float in the interval `[0, 1]`.
+   *
+   * @static
+   * @method
+   * @param {number} [s] - The integer seed.
+   * @return {number} A random float.
+   */
+  seededRandom,
+  /**
+   * Converts degrees to radians.
+   *
+   * @static
+   * @method
+   * @param {number} degrees - A value in degrees.
+   * @return {number} The converted value in radians.
+   */
+  degToRad,
+  /**
+   * Converts radians to degrees.
+   *
+   * @static
+   * @method
+   * @param {number} radians - A value in radians.
+   * @return {number} The converted value in degrees.
+   */
+  radToDeg,
+  /**
+   * Returns `true` if the given number is a power of two.
+   *
+   * @static
+   * @method
+   * @param {number} value - The value to check.
+   * @return {boolean} Whether the given number is a power of two or not.
+   */
+  isPowerOfTwo,
+  /**
+   * Returns the smallest power of two that is greater than or equal to the given number.
+   *
+   * @static
+   * @method
+   * @param {number} value - The value to find a POT for.
+   * @return {number} The smallest power of two that is greater than or equal to the given number.
+   */
+  ceilPowerOfTwo,
+  /**
+   * Returns the largest power of two that is less than or equal to the given number.
+   *
+   * @static
+   * @method
+   * @param {number} value - The value to find a POT for.
+   * @return {number} The largest power of two that is less than or equal to the given number.
+   */
+  floorPowerOfTwo,
+  /**
+   * Sets the given quaternion from the [Intrinsic Proper Euler Angles]{@link https://en.wikipedia.org/wiki/Euler_angles}
+   * defined by the given angles and order.
+   *
+   * Rotations are applied to the axes in the order specified by order:
+   * rotation by angle `a` is applied first, then by angle `b`, then by angle `c`.
+   *
+   * @static
+   * @method
+   * @param {Quaternion} q - The quaternion to set.
+   * @param {number} a - The rotation applied to the first axis, in radians.
+   * @param {number} b - The rotation applied to the second axis, in radians.
+   * @param {number} c - The rotation applied to the third axis, in radians.
+   * @param {('XYX'|'XZX'|'YXY'|'YZY'|'ZXZ'|'ZYZ')} order - A string specifying the axes order.
+   */
+  setQuaternionFromProperEuler,
+  /**
+   * Normalizes the given value according to the given typed array.
+   *
+   * @static
+   * @method
+   * @param {number} value - The float value in the range `[0,1]` to normalize.
+   * @param {TypedArray} array - The typed array that defines the data type of the value.
+   * @return {number} The normalize value.
+   */
+  normalize,
+  /**
+   * Denormalizes the given value according to the given typed array.
+   *
+   * @static
+   * @method
+   * @param {number} value - The value to denormalize.
+   * @param {TypedArray} array - The typed array that defines the data type of the value.
+   * @return {number} The denormalize (float) value in the range `[0,1]`.
+   */
+  denormalize
+};
 var Vector2 = class _Vector2 {
   /**
    * Constructs a new 2D vector.
@@ -18886,6 +19229,11 @@ if (typeof window !== "undefined") {
 }
 
 // src/three.module.js
+/**
+ * @license
+ * Copyright 2010-2025 Three.js Authors
+ * SPDX-License-Identifier: MIT
+ */
 function WebGLAnimation() {
   let context = null;
   let isAnimating = false;
@@ -29021,7 +29369,7 @@ function normalizeTheme(value) {
 }
 var CSS = [
   ":host{display:block;position:relative;height:var(--lc-height,680px);min-height:420px;color:var(--lc-panel-title,#e9f0f5);font:14px Inter,system-ui,-apple-system,sans-serif;background:var(--lc-bg,#0a111a);border:1px solid #294252;border-radius:12px;overflow:hidden;contain:content}",
-  "*{box-sizing:border-box}.atlas{display:grid;grid-template-columns:minmax(0,1fr) 300px;height:100%}.atlas[data-panel=hidden]{grid-template-columns:1fr}.viewport{position:relative;min-width:0;background:radial-gradient(ellipse at 50% 45%,var(--lc-bg-glow,#1c2b39),var(--lc-bg-fade,#0a111a) 82%)}canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}.toolbar{position:absolute;z-index:10;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:3px;padding:6px;background:var(--lc-toolbar-bg,#15232fe8);border:1px solid var(--lc-toolbar-border,#3a5062);border-radius:8px;white-space:nowrap}.toolbar[data-hidden=true],.toolbar[hidden],.panel[data-hidden=true],.panel[hidden],.crumbs[data-hidden=true],.crumbs[hidden],.hint[data-hidden=true],.hint[hidden]{display:none!important}.toolbar button{height:30px;padding:0 9px;border:0;border-radius:5px;background:none;color:var(--lc-toolbar-text,#dbe7ec);cursor:pointer}.toolbar button:hover,.toolbar button.active{background:var(--lc-toolbar-active,#1f3d4b);color:var(--lc-toolbar-active-text,#c5f2e9)}.toolbar i{display:block;width:1px;margin:2px 3px;background:#38515f}.hint{position:absolute;bottom:5px;left:0;right:0;text-align:center;font-size:11px;color:var(--lc-hint,#8da6b8);pointer-events:none}.panel{overflow:auto;padding:24px 20px;background:var(--lc-panel-bg,linear-gradient(140deg,#182633,#0e1925 65%));border-left:1px solid var(--lc-panel-border,#2a3a48)}.panel h2{font-size:26px;line-height:1.12;font-weight:470;margin:12px 0;color:var(--lc-panel-title,#e9f0f5)}.panel h3{font-size:11px;letter-spacing:1.4px;color:#91aabd;margin:24px 0 10px}.panel p{font-size:14px;line-height:1.55;color:var(--lc-panel-text,#b5c6d2)}.panel .eyebrow{font-size:11px;letter-spacing:1.7px;color:#6ad7c0}.panel .sub{font-size:13px;color:#8fa8bd;margin-bottom:16px}.panel button{display:block;width:100%;padding:10px 0;text-align:left;background:none;border:0;border-bottom:1px solid var(--lc-panel-border,#2a3a48);color:#d9e7eb;cursor:pointer}.panel button:hover{color:#6ad7c0}.panel .relation{padding:10px 0;border-bottom:1px solid var(--lc-panel-border,#2a3a48)}.panel .relation strong{display:block;font-weight:550}.panel .relation small{display:block;color:#86a6b9;font-size:12px;margin-top:4px}.panel .back{color:#9db7c8;font-size:13px}.panel .crumbs{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin:0 0 12px}.panel .crumbs button{display:inline;width:auto;padding:3px 7px;border:0;border-radius:4px;background:var(--lc-crumb-bg,#142733);color:var(--lc-crumb-text,#91b6c7);font-size:12px}.panel .crumbs button.current{background:var(--lc-crumb-active,#1c4a4d);color:var(--lc-crumb-active-text,#c5f2e9)}.panel .note{border-top:1px solid var(--lc-panel-border,#2a3a48);padding-top:16px;margin-top:22px;font-size:12px;color:#7692a6}.error{position:absolute;inset:20%;padding:18px;background:#172b3b;border:1px solid #7896a9;line-height:1.5;z-index:4}@media(max-width:900px){.toolbar{gap:0}.toolbar button{padding:0 6px;font-size:12px}}@media(max-width:760px){:host{height:680px}.atlas{grid-template-columns:1fr;grid-template-rows:minmax(420px,1fr) auto}.panel{max-height:250px;border-left:0;border-top:1px solid var(--lc-panel-border,#2a3a48);padding:18px}.toolbar{bottom:10px}.hint{display:none}}"
+  "*{box-sizing:border-box}.atlas{display:grid;grid-template-columns:minmax(0,1fr) 300px;height:100%}.atlas[data-panel=hidden]{grid-template-columns:1fr}.viewport{position:relative;min-width:0;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,var(--lc-bg-glow,#1c2b39),var(--lc-bg-fade,#0a111a) 82%)}canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}.toolbar{position:absolute;z-index:10;bottom:28px;left:50%;transform:translateX(-50%);display:flex;gap:3px;padding:6px;background:var(--lc-toolbar-bg,#15232fe8);border:1px solid var(--lc-toolbar-border,#3a5062);border-radius:8px;white-space:nowrap}.toolbar[data-hidden=true],.toolbar[hidden],.panel[data-hidden=true],.panel[hidden],.crumbs[data-hidden=true],.crumbs[hidden],.hint[data-hidden=true],.hint[hidden]{display:none!important}.toolbar button{height:30px;padding:0 9px;border:0;border-radius:5px;background:none;color:var(--lc-toolbar-text,#dbe7ec);cursor:pointer}.toolbar button:hover,.toolbar button.active{background:var(--lc-toolbar-active,#1f3d4b);color:var(--lc-toolbar-active-text,#c5f2e9)}.toolbar i{display:block;width:1px;margin:2px 3px;background:#38515f}.hint{position:absolute;z-index:9;top:8px;bottom:auto;left:0;right:0;text-align:center;padding:2px 8px;font-size:11px;line-height:16px;color:var(--lc-hint,#8da6b8);pointer-events:none}.panel{overflow:auto;padding:24px 20px;background:var(--lc-panel-bg,linear-gradient(140deg,#182633,#0e1925 65%));border-left:1px solid var(--lc-panel-border,#2a3a48)}.panel h2{font-size:26px;line-height:1.12;font-weight:470;margin:12px 0;color:var(--lc-panel-title,#e9f0f5)}.panel h3{font-size:11px;letter-spacing:1.4px;color:#91aabd;margin:24px 0 10px}.panel p{font-size:14px;line-height:1.55;color:var(--lc-panel-text,#b5c6d2)}.panel .eyebrow{font-size:11px;letter-spacing:1.7px;color:#6ad7c0}.panel .sub{font-size:13px;color:#8fa8bd;margin-bottom:16px}.panel button{display:block;width:100%;padding:10px 0;text-align:left;background:none;border:0;border-bottom:1px solid var(--lc-panel-border,#2a3a48);color:#d9e7eb;cursor:pointer}.panel button:hover{color:#6ad7c0}.panel .relation{padding:10px 0;border-bottom:1px solid var(--lc-panel-border,#2a3a48)}.panel .relation strong{display:block;font-weight:550}.panel .relation small{display:block;color:#86a6b9;font-size:12px;margin-top:4px}.panel .back{color:#9db7c8;font-size:13px}.panel .crumbs{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin:0 0 12px}.panel .crumbs button{display:inline;width:auto;padding:3px 7px;border:0;border-radius:4px;background:var(--lc-crumb-bg,#142733);color:var(--lc-crumb-text,#91b6c7);font-size:12px}.panel .crumbs button.current{background:var(--lc-crumb-active,#1c4a4d);color:var(--lc-crumb-active-text,#c5f2e9)}.panel .note{border-top:1px solid var(--lc-panel-border,#2a3a48);padding-top:16px;margin-top:22px;font-size:12px;color:#7692a6}.error{position:absolute;inset:20%;padding:18px;background:#172b3b;border:1px solid #7896a9;line-height:1.5;z-index:4}@media(max-width:900px){.toolbar{gap:0}.toolbar button{padding:0 6px;font-size:12px}}@media(max-width:760px){:host{height:680px}.atlas{grid-template-columns:1fr;grid-template-rows:minmax(420px,1fr) auto}.panel{max-height:250px;border-left:0;border-top:1px solid var(--lc-panel-border,#2a3a48);padding:18px}.toolbar{bottom:24px}.hint{top:8px;bottom:auto;display:block}}"
 ].join("");
 var TEMPLATE = '<div class="atlas"><section class="viewport"><canvas tabindex="0" aria-label="Modelo 3D interactivo"></canvas><div class="toolbar"><button data-action="minus" aria-label="Alejar">\u2212</button><button data-action="plus" aria-label="Acercar">+</button><i></i><button data-action="fit">\u2316 Encuadrar</button><button data-action="front">\u25B1 Frontal</button><button data-action="labels" class="active" aria-pressed="true">\u25A7 Etiquetas</button><i></i><button data-action="relations-all" aria-pressed="false">Todas</button><button data-action="relations-selected" class="active" aria-pressed="true">Selecci\xF3n</button><button data-action="relations-none" aria-pressed="false">Ocultar</button></div><div class="hint">Arrastra para girar \xB7 rueda para zoom \xB7 clic para seleccionar</div></section><aside class="panel" aria-live="polite"></aside></div>';
 function escapeHtml(value) {
@@ -29033,6 +29381,13 @@ function normalizeModel(input) {
   const relations = Array.isArray(source.relations) ? source.relations.map((relation, index) => Array.isArray(relation) ? { from: relation[0], to: relation[1], label: relation[2] || "", index } : { ...relation, from: relation.from, to: relation.to, label: relation.label || "", index }) : [];
   return { ...source, palette: { ...DEFAULT_PALETTE, ...source.palette || {} }, theme: normalizeTheme(source.theme || source.styles), entities, relations };
 }
+function relationVisualMode(relation) {
+  if (!relation || typeof relation !== "object") return "directed";
+  const raw = String(relation.mode || relation.visual || relation.render || relation.type || relation.direction || "").toLowerCase();
+  if (relation.bidirectional === true || ["bidirectional", "both", "two-way", "two_way", "duplex"].includes(raw)) return "bidirectional";
+  if (relation.broken === true || ["broken", "interrupted", "\u65AD"].includes(raw)) return "broken";
+  return "directed";
+}
 function roundedBox(radius, segments, size = [1, 1, 1]) {
   const r = Math.min(Math.max(0, Number(radius) || 0), size[0] / 2, size[1] / 2, size[2] / 2);
   if (!r) return new BoxGeometry(1, 1, 1);
@@ -29291,6 +29646,119 @@ var LiquidCarsAtlas = class extends HTMLElement {
   set model(value) {
     this.load(value);
   }
+  get selectedId() {
+    return this.selected?.id || null;
+  }
+  _emit(type, detail = {}) {
+    this.dispatchEvent(new CustomEvent(type, { detail, bubbles: true, composed: true }));
+  }
+  _publicEntity(id) {
+    const entity = this.modelData?.entities?.find((item) => item.id === id);
+    return entity ? {
+      ...entity,
+      p: Array.isArray(entity.p) ? [...entity.p] : [0, 0, 0],
+      s: Array.isArray(entity.s) ? [...entity.s] : [1, 1, 1]
+    } : null;
+  }
+  _commitModelChange(kind, detail = {}, options = {}) {
+    const selectedId = options.preserveSelection === false ? null : this.selected?.id;
+    this.modelData = normalizeModel(this.modelData);
+    this._build({ preserveSelection: selectedId });
+    this._emit("lc-model-change", {
+      kind,
+      model: this.modelData,
+      ...detail
+    });
+    return this;
+  }
+  /** Replace selected parts of the model and rebuild the scene in place. */
+  updateModel(patch = {}, options = {}) {
+    if (!patch || typeof patch !== "object" || Array.isArray(patch)) throw new TypeError("El parche del modelo debe ser un objeto.");
+    const current = this.modelData || normalizeModel({});
+    const next = {
+      ...current,
+      ...patch,
+      palette: patch.palette ? { ...current.palette, ...patch.palette } : current.palette,
+      theme: patch.theme || patch.styles ? patch.theme || patch.styles : current.theme,
+      entities: Array.isArray(patch.entities) ? patch.entities : current.entities,
+      relations: Array.isArray(patch.relations) ? patch.relations : current.relations
+    };
+    this.modelData = normalizeModel(next);
+    this.theme = this.modelData.theme;
+    return this._commitModelChange("model-update", { patch }, options);
+  }
+  addEntity(entity, options = {}) {
+    if (!entity || typeof entity !== "object" || !entity.id) throw new TypeError("La entidad debe incluir un id.");
+    if (!this.modelData) this.modelData = normalizeModel({});
+    if (this.modelData.entities.some((item) => item.id === entity.id)) throw new Error(`Ya existe una entidad con id "${entity.id}".`);
+    if (entity.parent && !this.modelData.entities.some((item) => item.id === entity.parent)) throw new Error(`No existe el contenedor padre "${entity.parent}".`);
+    this.modelData.entities = [...this.modelData.entities, { ...entity }];
+    return this._commitModelChange("entity-add", { entity: this._publicEntity(entity.id) }, options);
+  }
+  updateEntity(id, patch = {}, options = {}) {
+    if (!this.modelData) throw new Error("No hay ning\xFAn modelo cargado.");
+    const index = this.modelData.entities.findIndex((item) => item.id === id);
+    if (index < 0) throw new Error(`No existe una entidad con id "${id}".`);
+    if (!patch || typeof patch !== "object" || Array.isArray(patch)) throw new TypeError("Los cambios de una entidad deben ser un objeto.");
+    if (patch.id && patch.id !== id) throw new Error("El id de una entidad no se puede modificar.");
+    if (patch.parent && patch.parent !== id && !this.modelData.entities.some((item) => item.id === patch.parent)) throw new Error(`No existe el contenedor padre "${patch.parent}".`);
+    this.modelData.entities = this.modelData.entities.map((item, itemIndex) => itemIndex === index ? { ...item, ...patch, id } : item);
+    return this._commitModelChange("entity-update", { id, patch, entity: this._publicEntity(id) }, options);
+  }
+  removeEntity(id, options = {}) {
+    if (!this.modelData) throw new Error("No hay ning\xFAn modelo cargado.");
+    const cascade = options.cascade !== false;
+    const removed = /* @__PURE__ */ new Set([id]);
+    if (cascade) {
+      let changed = true;
+      while (changed) {
+        changed = false;
+        for (const entity of this.modelData.entities) {
+          if (entity.parent && removed.has(entity.parent) && !removed.has(entity.id)) {
+            removed.add(entity.id);
+            changed = true;
+          }
+        }
+      }
+    }
+    if (!this.modelData.entities.some((item) => item.id === id)) throw new Error(`No existe una entidad con id "${id}".`);
+    this.modelData.entities = this.modelData.entities.filter((item) => !removed.has(item.id));
+    this.modelData.relations = this.modelData.relations.filter((relation) => !removed.has(relation.from) && !removed.has(relation.to));
+    for (const removedId of removed) this.open.delete(removedId);
+    if (this.selected && removed.has(this.selected.id)) this.selected = null;
+    return this._commitModelChange("entity-remove", { id, removed: [...removed] });
+  }
+  _relationIndex(reference) {
+    if (Number.isInteger(reference)) return reference;
+    if (typeof reference === "string") return this.modelData?.relations?.findIndex((relation) => relation.id === reference) ?? -1;
+    return -1;
+  }
+  addRelation(relation, options = {}) {
+    if (!relation || typeof relation !== "object" || !relation.from || !relation.to) throw new TypeError("La relaci\xF3n debe incluir from y to.");
+    if (!this.modelData) throw new Error("No hay ning\xFAn modelo cargado.");
+    const ids = new Set(this.modelData.entities.map((entity) => entity.id));
+    if (!ids.has(relation.from) || !ids.has(relation.to)) throw new Error("Los extremos de la relaci\xF3n deben existir en el modelo.");
+    this.modelData.relations = [...this.modelData.relations, { ...relation }];
+    return this._commitModelChange("relation-add", { relation: { ...relation } }, options);
+  }
+  updateRelation(reference, patch = {}, options = {}) {
+    if (!this.modelData) throw new Error("No hay ning\xFAn modelo cargado.");
+    const index = this._relationIndex(reference);
+    if (index < 0 || index >= this.modelData.relations.length) throw new Error("No existe la relaci\xF3n indicada.");
+    if (!patch || typeof patch !== "object" || Array.isArray(patch)) throw new TypeError("Los cambios de una relaci\xF3n deben ser un objeto.");
+    const next = { ...this.modelData.relations[index], ...patch };
+    const ids = new Set(this.modelData.entities.map((entity) => entity.id));
+    if (!ids.has(next.from) || !ids.has(next.to)) throw new Error("Los extremos de la relaci\xF3n deben existir en el modelo.");
+    this.modelData.relations = this.modelData.relations.map((item, itemIndex) => itemIndex === index ? next : item);
+    return this._commitModelChange("relation-update", { index, patch, relation: { ...next } }, options);
+  }
+  removeRelation(reference, options = {}) {
+    if (!this.modelData) throw new Error("No hay ning\xFAn modelo cargado.");
+    const index = this._relationIndex(reference);
+    if (index < 0 || index >= this.modelData.relations.length) throw new Error("No existe la relaci\xF3n indicada.");
+    const [relation] = this.modelData.relations.splice(index, 1);
+    return this._commitModelChange("relation-remove", { index, relation: { ...relation } }, options);
+  }
   get palette() {
     return this.modelData?.palette || { ...DEFAULT_PALETTE };
   }
@@ -29329,8 +29797,21 @@ var LiquidCarsAtlas = class extends HTMLElement {
     return this;
   }
   fit() {
-    this.targetZoom = 1;
-    this.targetFocus.set(0, 0, 0);
+    const bounds = new Box3();
+    for (const node of this.nodes.values()) {
+      const center2 = this._worldPosition(node);
+      const half = new Vector3(node.s[0] / 2, node.s[1] / 2, node.s[2] / 2);
+      bounds.expandByPoint(center2.clone().sub(half));
+      bounds.expandByPoint(center2.clone().add(half));
+    }
+    const center = bounds.isEmpty() ? new Vector3() : bounds.getCenter(new Vector3());
+    const size = bounds.isEmpty() ? new Vector3(1, 1, 1) : bounds.getSize(new Vector3());
+    const radius = Math.max(1, size.length() / 2);
+    const fov2 = MathUtils.degToRad(this.camera.fov);
+    const requiredDistance = radius / Math.sin(fov2 / 2) * 1.12;
+    const baseDistance = Math.max(29, 39.5 / Math.max(this.camera.aspect, 0.5));
+    this.targetZoom = Math.max(0.55, Math.min(2.8, baseDistance / requiredDistance));
+    this.targetFocus.copy(center);
     this.invalidate();
     return this;
   }
@@ -29451,6 +29932,8 @@ var LiquidCarsAtlas = class extends HTMLElement {
     try {
       const data = typeof source === "string" ? await fetch(source).then((response) => response.json()) : source;
       this.modelData = normalizeModel(data);
+      this.open.clear();
+      this.selected = null;
       if (this._pendingPalette) {
         this.modelData.palette = { ...this.modelData.palette, ...this._pendingPalette };
         this._pendingPalette = null;
@@ -29510,6 +29993,14 @@ var LiquidCarsAtlas = class extends HTMLElement {
       this.scene.remove(node.group);
     }
     this.nodes.clear();
+    this._clearRelationGroup();
+  }
+  _clearRelationGroup() {
+    for (const object of this.relationGroup.children) {
+      object.geometry?.dispose();
+      if (Array.isArray(object.material)) object.material.forEach((material) => material.dispose());
+      else object.material?.dispose();
+    }
     this.relationGroup.clear();
   }
   _recolorNodes() {
@@ -29520,10 +30011,12 @@ var LiquidCarsAtlas = class extends HTMLElement {
       if (node.edge?.material) node.edge.material.color.set(color);
     }
   }
-  _build() {
+  _build(options = {}) {
     if (!this._ensureRenderer()) return;
+    const selectedId = options.preserveSelection || null;
     this._clearObjects();
     for (const entity of this.modelData.entities) this.nodes.set(entity.id, { ...entity });
+    this.open = new Set([...this.open].filter((id) => this.nodes.has(id)));
     for (const entity of this.modelData.entities) {
       const node = this.nodes.get(entity.id);
       node.group = new Group();
@@ -29555,6 +30048,7 @@ var LiquidCarsAtlas = class extends HTMLElement {
       node.group.add(node.label);
       this.scene.add(node.group);
     }
+    this.selected = selectedId && this.nodes.has(selectedId) ? this.nodes.get(selectedId) : null;
     this.relations = this.modelData.relations;
     this._renderPanel();
     this._rebuildRelations();
@@ -29594,7 +30088,7 @@ var LiquidCarsAtlas = class extends HTMLElement {
     return this.relations.map((relation, index) => relation.from === this.selected.id || relation.to === this.selected.id ? index : -1).filter((index) => index >= 0);
   }
   _rebuildRelations() {
-    this.relationGroup.clear();
+    this._clearRelationGroup();
     const active = this._activeRelationIndexes();
     const color = new Color(this.modelData?.palette.connection || DEFAULT_PALETTE.connection);
     for (const index of active) {
@@ -29606,14 +30100,28 @@ var LiquidCarsAtlas = class extends HTMLElement {
       const end = this._endpoint(to, from, false);
       const delta = end.clone().sub(start);
       if (delta.lengthSq() < 0.01) continue;
-      const tube = new Mesh(new TubeGeometry(new LineCurve3(start, end), 10, 0.045, 6, false), new MeshBasicMaterial({ color, transparent: true, opacity: 0.82 }));
-      this.relationGroup.add(tube);
+      const visualMode = relationVisualMode(relation);
+      const makeTube = (from2, to2, opacity = 0.82) => {
+        const tube = new Mesh(new TubeGeometry(new LineCurve3(from2, to2), 10, 0.045, 6, false), new MeshBasicMaterial({ color, transparent: true, opacity }));
+        tube.userData.relationIndex = index;
+        this.relationGroup.add(tube);
+      };
+      if (visualMode === "broken") {
+        const direction = delta.clone().normalize();
+        const midpoint = start.clone().lerp(end, 0.5);
+        const gap = Math.min(delta.length() * 0.16, 0.72);
+        makeTube(start, midpoint.clone().sub(direction.clone().multiplyScalar(gap / 2)), 0.55);
+        makeTube(midpoint.clone().add(direction.clone().multiplyScalar(gap / 2)), end, 0.55);
+        continue;
+      }
+      makeTube(start, end);
       for (let ringIndex = 0; ringIndex < 4; ringIndex++) {
         const ring = new Mesh(new TorusGeometry(0.068, 0.018, 8, 20), new MeshBasicMaterial({ color, transparent: true, opacity: 0.9 }));
         ring.userData.phase = ringIndex / 4;
+        ring.userData.direction = visualMode === "bidirectional" && ringIndex % 2 ? -1 : 1;
         ring.userData.start = start.clone();
         ring.userData.end = end.clone();
-        ring.quaternion.setFromUnitVectors(new Vector3(0, 0, 1), delta.normalize());
+        ring.quaternion.setFromUnitVectors(new Vector3(0, 0, 1), delta.clone().normalize());
         this.relationGroup.add(ring);
       }
     }
@@ -29661,7 +30169,7 @@ var LiquidCarsAtlas = class extends HTMLElement {
     });
     this._applyTheme();
   }
-  select(id) {
+  select(id, options = {}) {
     const node = this.nodes.get(id);
     if (!node) return;
     let parent = node.parent ? this.nodes.get(node.parent) : null;
@@ -29676,7 +30184,7 @@ var LiquidCarsAtlas = class extends HTMLElement {
     this._renderPanel();
     this._rebuildRelations();
     this.invalidate();
-    this.dispatchEvent(new CustomEvent("lc-select", { detail: { id, entity: node } }));
+    this._emit("lc-select", { id, entity: this._publicEntity(id), source: options.source || "api" });
   }
   setRelationMode(mode) {
     this.relationMode = ["all", "selected", "none"].includes(mode) ? mode : "selected";
@@ -29694,6 +30202,7 @@ var LiquidCarsAtlas = class extends HTMLElement {
     this.dispatchEvent(new CustomEvent("lc-relation-mode", { detail: { mode: this.relationMode } }));
   }
   reset() {
+    const previousId = this.selected?.id || null;
     this.selected = null;
     this.open.clear();
     this.relationMode = "selected";
@@ -29712,9 +30221,11 @@ var LiquidCarsAtlas = class extends HTMLElement {
     this.targetZoom = 1;
     this.focus.set(0, 0, 0);
     this.targetFocus.set(0, 0, 0);
+    this.fit();
     this._renderPanel();
     this._rebuildRelations();
     this.invalidate();
+    if (previousId) this._emit("lc-select", { id: null, entity: null, previousId, source: "reset" });
   }
   resize() {
     if (!this.renderer) return;
@@ -29773,7 +30284,10 @@ var LiquidCarsAtlas = class extends HTMLElement {
         top.visible = displayTransparentLabel && cameraAbove;
         const scale = displayTransparentLabel ? 0.52 : 1;
         front.scale.setScalar(scale);
-        front.position.x = displayTransparentLabel ? -labelSize.x / 2 + 0.18 + labelWidth * scale / 2 - textOffsetX * scale : 0;
+        back.scale.setScalar(scale);
+        const openLabelX = displayTransparentLabel ? -labelSize.x / 2 + 0.18 + labelWidth * scale / 2 - textOffsetX * scale : 0;
+        front.position.x = openLabelX;
+        back.position.x = displayTransparentLabel ? -openLabelX : 0;
         const shellFrontTopMargin = 0.18;
         front.position.y = displayTransparentLabel ? labelSize.y / 2 - shellFrontTopMargin - labelHeight * scale / 2 : labelSize.y / 2 - 0.09 - labelHeight / 2;
         front.position.z = displayTransparentLabel ? labelSize.z / 2 + 0.025 : labelSize.z / 2 + 0.012;
@@ -29793,16 +30307,23 @@ var LiquidCarsAtlas = class extends HTMLElement {
         back.visible = !cameraOnFront && !opened;
         top.visible = false;
         front.scale.setScalar(1);
+        back.scale.setScalar(1);
         front.position.x = 0;
+        back.position.x = 0;
         front.position.y = labelSize.y / 2 - 0.09 - labelHeight / 2;
+        back.position.y = front.position.y;
+        back.position.z = -labelSize.z / 2 - 0.012;
         front.material.color.set(15923964);
         front.material.opacity = 1;
+        back.material.color.set(15923964);
+        back.material.opacity = 1;
       }
     }
     for (const child of this.relationGroup.children) {
       if (!child.userData.start) continue;
       const phase = child.userData.phase || 0;
-      const factor = (time * 22e-5 + phase) % 1;
+      const direction = child.userData.direction || 1;
+      const factor = ((time * 22e-5 * direction + phase) % 1 + 1) % 1;
       child.position.lerpVectors(child.userData.start, child.userData.end, factor);
     }
     this.renderer.render(this.scene, this.camera);
@@ -29856,7 +30377,7 @@ var LiquidCarsAtlas = class extends HTMLElement {
       this.canvas.style.cursor = "grab";
       if (drag && !drag.moved) {
         const node = this._pick(event);
-        if (node) this.select(node.id);
+        if (node) this.select(node.id, { source: "pointer" });
       }
       this.invalidate();
     });

package/index.html

@@ -14,12 +14,12 @@
     liquidcars-atlas { display: block; width: 100%; max-width: 1480px; margin: 0 auto; }
     code { color: #85e5d3; }
   </style>
-  <script type="module" src="./dist/liquidcars-atlas.js?v=0.1.14"></script>
+  <script type="module" src="./dist/liquidcars-atlas.js?v=0.1.15"></script>
 </head>
 <body>
   <header>
     <h1>LiquidCars Atlas</h1>
-    <p>Prueba de distribución del componente <code>&lt;liquidcars-atlas&gt;</code> · v0.1.14</p>
+    <p>Prueba de distribución del componente <code>&lt;liquidcars-atlas&gt;</code> · v0.1.15</p>
   </header>
   <main>
     <liquidcars-atlas id="atlas" height="720" relation-mode="selected" shell-labels="on"></liquidcars-atlas>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liquidcars/atlas",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "description": "Reusable 3D conceptual atlas Web Component for LiquidCars-style models",
   "type": "module",
   "main": "./dist/liquidcars-atlas.js",