@liquidcars/atlas 0.1.23 → 0.1.25

package/README.md

@@ -96,7 +96,7 @@ 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-model-change`,
+Eventos disponibles: `lc-ready`, `lc-error`, `lc-warning`, `lc-select`, `lc-model-change`,
 `lc-relation-mode` y `lc-disconnect`. `lc-select` usa un detalle discriminado:
 las entidades incluyen `{ kind: 'entity', id, entity, source }` y las relaciones
 `{ kind: 'relation', id, index, relation, source }`. Los campos históricos `id`
@@ -127,6 +127,68 @@ como `setClickBehavior()`).
 
 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.
 
+## Geometry packs
+
+Las geometrías pueden distribuirse en paquetes independientes. El componente
+expone `registerGeometryPack()`, `unregisterGeometryPack()` y
+`getGeometryCatalog()`; los mismos métodos están disponibles como estáticos en
+`LiquidCarsAtlas`. Los identificadores usan un namespace (`infra.server`,
+`architecture.application`, etc.) y las primitivas integradas también se
+publican como `geo.box`, `geo.sphere`, etc. Los nombres históricos sin
+namespace siguen siendo compatibles.
+
+```js
+import { registerGeometryPack } from "@liquidcars/atlas";
+
+registerGeometryPack({
+  namespace: "infra",
+  name: "Infrastructure",
+  version: "0.1.0",
+  palette: { chassis: "#587386", accent: "#72dbc9" },
+  geometries: [{
+    id: "server",
+    name: "Server",
+    canonicalSize: [2.7, 1.8, 2.2],
+    parameters: {
+      units: { type: "number", min: 1, max: 8, default: 3 },
+      icon: { type: "icon", default: "⚙" },
+      image: { type: "image", default: "" }
+    },
+    anchors: { input: [-1, 0, 0], output: [1, 0, 0], network: [0, 0, 1] },
+    create({ parameters }) {
+      return { parts: [
+        { shape: "box", size: [1, 1, 1], color: "chassis" },
+        { shape: "plane", size: [.42, .42, 1], position: [0, 0, .51],
+          color: "accent", icon: parameters.icon, image: parameters.image,
+          edges: false, doubleSided: true }
+      ] };
+    }
+  }]
+});
+```
+
+El modelo configura cada instancia sin conocer la implementación del paquete:
+
+```json
+{
+  "geometry": "infra.server",
+  "geometryOptions": { "units": 4, "icon": "DB" },
+  "geometryPalette": { "accent": "#ffd166" }
+}
+```
+
+Cada definición puede declarar parámetros tipados, una paleta local,
+proporciones canónicas y anchors. Las piezas declarativas admiten primitivas,
+posición, rotación, escala, materiales, iconos de texto o emoji e imágenes por
+URL/data URI. El renderer mantiene Three.js encapsulado para evitar que los
+packs dependan de su versión interna. Las relaciones pueden seleccionar anchors
+con `fromAnchor` y `toAnchor`.
+
+Si un namespace no está registrado, Atlas conserva el modelo renderizable con
+una caja roja de fallback y emite `lc-warning` con el código
+`GEOMETRY_NOT_REGISTERED`. Si la factoría del pack falla se usa el código
+`GEOMETRY_BUILD_FAILED`.
+
 La paleta puede cambiarse después de cargar el modelo mediante `atlas.setPalette({ nombre: color })` o asignando `atlas.palette = { ... }`. El cambio actualiza las piezas, aristas y relaciones sin reconstruir el modelo.
 
 Las acciones de navegación y exploración también están disponibles para la página anfitriona: `zoomIn()`, `zoomOut()`, `panBy()`, `panTo()`, `fit()`, `frontView()`, `setShellLabels()`, `toggleShellLabels()`, `openAllContainers()` y `closeAllContainers()`. El usuario puede desplazar la vista con el botón derecho, con `Shift` + arrastre o mediante dos dedos en una pantalla táctil. Así se puede construir una barra de controles propia sin depender de la toolbar interna.
@@ -151,12 +213,17 @@ 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.22.tgz
+npm install ./liquidcars-atlas-0.1.25.tgz
 ```
 
 ## Estado
 
-`0.1.23` añade desplazamiento lateral de cámara mediante ratón, teclado
+`0.1.25` mantiene el centro como anclaje implícito de toda relación y utiliza
+los puertos de geometrías externas únicamente cuando el modelo los solicita.
+También evita recorrer los materiales de geometrías compuestas en cada frame.
+`0.1.24` incorporó geometry packs independientes, namespaces, parámetros
+personalizados, paletas locales, anchors e imágenes/iconos declarativos. La
+versión `0.1.23` añadió desplazamiento lateral de cámara mediante ratón, teclado
 modificador y gestos táctiles, además de la API pública `panBy()` y `panTo()`.
 Se conserva la selección contextual de relaciones introducida en `0.1.22`: el usuario puede
 seleccionar un tubo directamente, el componente lo realza, muestra sus extremos

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.21"></script>
+  <script type="module" src="../dist/liquidcars-atlas.js?v=0.1.25"></script>
 </head>
 <body>
   <header>
     <h1>LiquidCars Atlas</h1>
-    <p>Prueba de distribución del componente <code>&lt;liquidcars-atlas&gt;</code> · v0.1.21</p>
+    <p>Prueba de distribución del componente <code>&lt;liquidcars-atlas&gt;</code> · v0.1.25</p>
   </header>
   <main>
     <liquidcars-atlas id="atlas" height="720" relation-mode="selected" shell-labels="on"></liquidcars-atlas>

package/dist/liquidcars-atlas.js

@@ -1,4 +1,4 @@
-/*! LiquidCars Atlas 0.1.22 | MIT */
+/*! LiquidCars Atlas 0.1.25 | MIT */
 
 // src/three.core.js
 /**
@@ -29344,6 +29344,86 @@ var DEFAULT_PALETTE = {
   component: "#8ae4d0",
   connection: "#f4edba"
 };
+var GEOMETRY_DEFINITIONS = /* @__PURE__ */ new Map();
+var GEOMETRY_ALIASES = /* @__PURE__ */ new Map();
+function publicGeometryDefinition(definition) {
+  const { create, ...metadata } = definition;
+  return {
+    ...metadata,
+    canonicalSize: [...definition.canonicalSize],
+    parameters: { ...definition.parameters },
+    palette: { ...definition.palette },
+    anchors: { ...definition.anchors }
+  };
+}
+function registerGeometryPack(pack) {
+  if (!pack || typeof pack !== "object") throw new TypeError("A geometry pack must be an object.");
+  const namespace = String(pack.namespace || "").trim();
+  if (!/^[a-z][a-z0-9-]*$/i.test(namespace)) throw new TypeError("A geometry pack requires a valid namespace.");
+  if (!Array.isArray(pack.geometries) || !pack.geometries.length) throw new TypeError("A geometry pack requires at least one geometry.");
+  const registered = [];
+  for (const source of pack.geometries) {
+    if (!source || typeof source !== "object" || !source.id) throw new TypeError(`Geometry pack '${namespace}' contains an invalid geometry.`);
+    const localId = String(source.id).includes(".") ? String(source.id).split(".").pop() : String(source.id);
+    const id = String(source.id).includes(".") ? String(source.id) : `${namespace}.${localId}`;
+    const definition = {
+      ...source,
+      id,
+      localId,
+      namespace,
+      pack: pack.name || namespace,
+      packVersion: pack.version || "0.0.0",
+      category: source.category || pack.category || pack.name || namespace,
+      canonicalSize: Array.isArray(source.canonicalSize) && source.canonicalSize.length === 3 ? source.canonicalSize.map(Number) : [2.5, 1.5, 2.5],
+      parameters: source.parameters && typeof source.parameters === "object" ? source.parameters : {},
+      palette: { ...pack.palette || {}, ...source.palette || {} },
+      anchors: { ...pack.anchors || {}, ...source.anchors || {} }
+    };
+    GEOMETRY_DEFINITIONS.set(id, definition);
+    GEOMETRY_ALIASES.set(id, id);
+    for (const alias of source.aliases || []) GEOMETRY_ALIASES.set(String(alias), id);
+    registered.push(id);
+  }
+  if (typeof globalThis.dispatchEvent === "function" && typeof CustomEvent === "function") {
+    globalThis.dispatchEvent(new CustomEvent("lc-geometry-registry-change", { detail: { namespace, geometries: registered } }));
+  }
+  return { namespace, geometries: registered };
+}
+function unregisterGeometryPack(namespace) {
+  const removed = [];
+  for (const [id, definition] of GEOMETRY_DEFINITIONS) {
+    if (definition.namespace !== namespace) continue;
+    GEOMETRY_DEFINITIONS.delete(id);
+    removed.push(id);
+  }
+  for (const [alias, id] of GEOMETRY_ALIASES) if (removed.includes(id)) GEOMETRY_ALIASES.delete(alias);
+  return removed;
+}
+function getGeometryCatalog() {
+  return [...GEOMETRY_DEFINITIONS.values()].map(publicGeometryDefinition);
+}
+function geometryDefinition(kind) {
+  const id = GEOMETRY_ALIASES.get(String(kind || "box")) || String(kind || "box");
+  return GEOMETRY_DEFINITIONS.get(id) || null;
+}
+var CORE_GEOMETRIES = [
+  "box", "cylinder", "sphere", "cone", "frustum-cone", "frustum-pyramid", "frustum-triangle",
+  "prism", "pyramid-square", "pyramid-triangle", "octahedron", "dodecahedron", "icosahedron"
+];
+registerGeometryPack({
+  namespace: "geo",
+  name: "Geometric primitives",
+  version: "1",
+  category: "Geometric primitives",
+  geometries: CORE_GEOMETRIES.map((id) => ({
+    id,
+    primitive: id,
+    aliases: [id],
+    name: id.split("-").map((word) => word[0].toUpperCase() + word.slice(1)).join(" "),
+    canonicalSize: id === "sphere" || ["octahedron", "dodecahedron", "icosahedron"].includes(id) ? [2.2, 2.2, 2.2] : [2.5, 1.5, 2.5],
+    parameters: id === "box" ? { radius: { type: "number", label: "Radius", min: 0, max: 0.72, step: 0.01, default: 0 } } : {}
+  }))
+});
 var DEFAULT_THEME = {
   background: { color: "#0a111a", glow: "#1c2b39", fade: "#0a111a" },
   panel: { background: "linear-gradient(140deg,#182633,#0e1925 65%)", border: "#2a3a48", text: "#b5c6d2", title: "#e9f0f5" },
@@ -29500,6 +29580,112 @@ function normalizeGeometry(geometry) {
   geometry.computeBoundingBox();
   return geometry;
 }
+function resolveGeometryParameters(entity, definition) {
+  const supplied = entity.geometryOptions || entity.geometry_options || entity.parameters || {};
+  const resolved = {};
+  for (const [name, schema] of Object.entries(definition?.parameters || {})) {
+    if (schema && Object.hasOwn(schema, "default")) resolved[name] = schema.default;
+  }
+  return { ...resolved, ...supplied && typeof supplied === "object" ? supplied : {} };
+}
+function resolveGeometryColor(value, palette, fallback) {
+  if (typeof value !== "string" || !value) return fallback;
+  return palette[value] || value;
+}
+function iconTexture(value, foreground = "#ffffff", background = "transparent") {
+  const bitmap = document.createElement("canvas");
+  bitmap.width = 256;
+  bitmap.height = 256;
+  const context = bitmap.getContext("2d");
+  context.clearRect(0, 0, 256, 256);
+  if (background !== "transparent") {
+    context.fillStyle = background;
+    context.fillRect(0, 0, 256, 256);
+  }
+  context.fillStyle = foreground;
+  context.font = "600 150px system-ui, sans-serif";
+  context.textAlign = "center";
+  context.textBaseline = "middle";
+  context.fillText(String(value || ""), 128, 137, 220);
+  const texture = new CanvasTexture(bitmap);
+  texture.colorSpace = SRGBColorSpace;
+  return texture;
+}
+function partGeometry(part) {
+  if (part.shape === "plane") return new PlaneGeometry(1, 1);
+  return makeGeometry(part.shape || part.geometry || "box", part.radius, part.segments, part.size);
+}
+function createGeometryContent(definition, entity, modelPalette, invalidate) {
+  const parameters = resolveGeometryParameters(entity, definition);
+  const localPalette = {
+    ...modelPalette,
+    ...definition.palette || {},
+    ...entity.geometryPalette || entity.geometry_palette || {}
+  };
+  let descriptor = typeof definition.create === "function" ? definition.create({ parameters: { ...parameters }, colors: { ...localPalette }, entity: { ...entity } }) : { parts: definition.parts || [] };
+  if (Array.isArray(descriptor)) descriptor = { parts: descriptor };
+  const parts = Array.isArray(descriptor?.parts) ? descriptor.parts : [];
+  if (!parts.length) throw new Error(`Geometry '${definition.id}' did not produce any parts.`);
+  const root = new Group();
+  const colorBindings = [];
+  const meshes = [];
+  for (const part of parts) {
+    const geometry = partGeometry(part);
+    normalizeGeometry(geometry);
+    const colorValue = part.color || "component";
+    const color = resolveGeometryColor(colorValue, localPalette, modelPalette.component || DEFAULT_PALETTE.component);
+    const material = new MeshStandardMaterial({
+      color,
+      roughness: Number.isFinite(Number(part.roughness)) ? Number(part.roughness) : 0.72,
+      metalness: Number.isFinite(Number(part.metalness)) ? Number(part.metalness) : 0.06,
+      transparent: part.transparent === true || Number(part.opacity) < 1,
+      opacity: Number.isFinite(Number(part.opacity)) ? Number(part.opacity) : 1,
+      side: part.doubleSided ? DoubleSide : FrontSide
+    });
+    const icon = part.icon;
+    const image = part.image;
+    if (typeof image === "string" && image) {
+      const bitmap = new Image();
+      bitmap.crossOrigin = "anonymous";
+      material.map = new Texture(bitmap);
+      bitmap.addEventListener("load", () => {
+        material.map.needsUpdate = true;
+        invalidate?.();
+      });
+      bitmap.addEventListener("error", () => invalidate?.());
+      bitmap.src = image;
+      material.map.colorSpace = SRGBColorSpace;
+      material.needsUpdate = true;
+    } else if (icon != null && icon !== "") {
+      material.map = iconTexture(icon, resolveGeometryColor(part.iconColor || "#ffffff", localPalette, "#ffffff"), resolveGeometryColor(part.iconBackground || "transparent", localPalette, "transparent"));
+      material.transparent = true;
+      material.needsUpdate = true;
+    }
+    const mesh = new Mesh(geometry, material);
+    mesh.position.fromArray(Array.isArray(part.position) ? part.position : [0, 0, 0]);
+    mesh.scale.fromArray(Array.isArray(part.size) ? part.size : [1, 1, 1]);
+    if (Array.isArray(part.rotation)) mesh.rotation.set(...part.rotation.map(Number));
+    root.add(mesh);
+    meshes.push(mesh);
+    colorBindings.push({ material, value: colorValue, palette: localPalette });
+    if (part.edges !== false && part.shape !== "plane") {
+      const edgeMaterial = new LineBasicMaterial({ color, transparent: true, opacity: Number.isFinite(Number(part.edgeOpacity)) ? Number(part.edgeOpacity) : 0.55 });
+      const edge = new LineSegments(new EdgesGeometry(geometry, 22), edgeMaterial);
+      edge.position.copy(mesh.position);
+      edge.rotation.copy(mesh.rotation);
+      edge.scale.copy(mesh.scale);
+      root.add(edge);
+      colorBindings.push({ material: edgeMaterial, value: part.edgeColor || colorValue, palette: localPalette });
+    }
+  }
+  root.updateMatrixWorld(true);
+  const bounds = new Box3().setFromObject(root);
+  const contentSize = bounds.getSize(new Vector3());
+  const center = bounds.getCenter(new Vector3());
+  root.children.forEach((child) => child.position.sub(center));
+  root.scale.set(1 / Math.max(contentSize.x, 1e-4), 1 / Math.max(contentSize.y, 1e-4), 1 / Math.max(contentSize.z, 1e-4));
+  return { root, meshes, colorBindings, parameters, descriptor };
+}
 function makeLabel(text, color, dimensions, type = "") {
   const bitmap = document.createElement("canvas");
   const context = bitmap.getContext("2d");
@@ -29580,6 +29766,15 @@ var LiquidCarsAtlas = class extends HTMLElement {
   static get observedAttributes() {
     return ["height", "relation-mode", "shell-labels", "toolbar", "selection-mode"];
   }
+  static registerGeometryPack(pack) {
+    return registerGeometryPack(pack);
+  }
+  static unregisterGeometryPack(namespace) {
+    return unregisterGeometryPack(namespace);
+  }
+  static getGeometryCatalog() {
+    return getGeometryCatalog();
+  }
   constructor() {
     super();
     this.attachShadow({ mode: "open" });
@@ -29616,15 +29811,20 @@ var LiquidCarsAtlas = class extends HTMLElement {
     this.ready = false;
     this._toolbarVisible = this.getAttribute("toolbar") !== "off";
     this.toolbar = this.shadowRoot.querySelector(".toolbar");
+    this._geometryRegistryListener = () => {
+      if (this.ready && this.modelData) this._build({ preserveSelection: this.selected?.id, preserveRelation: this.selectedRelationIndex });
+    };
     this._bindControls();
     this.resizeObserver = new ResizeObserver(() => this.resize());
     this.resizeObserver.observe(this.canvas);
   }
   connectedCallback() {
+    globalThis.addEventListener?.("lc-geometry-registry-change", this._geometryRegistryListener);
     if (this.hasAttribute("height")) this.style.setProperty("--lc-height", this.getAttribute("height"));
     this._loadInitial();
   }
   disconnectedCallback() {
+    globalThis.removeEventListener?.("lc-geometry-registry-change", this._geometryRegistryListener);
     this.resizeObserver.disconnect();
     if (this.animationFrame) cancelAnimationFrame(this.animationFrame);
     if (this.renderer) this.renderer.dispose();
@@ -30042,10 +30242,16 @@ var LiquidCarsAtlas = class extends HTMLElement {
   _clearObjects() {
     for (const node of this.nodes.values()) {
       node.group?.traverse((object) => {
-        if (!object.isMesh && !object.isSprite) return;
+        if (!object.isMesh && !object.isSprite && !object.isLineSegments) return;
         object.geometry?.dispose();
-        if (Array.isArray(object.material)) object.material.forEach((material) => material.dispose());
-        else object.material?.dispose();
+        if (Array.isArray(object.material)) object.material.forEach((material) => {
+          material.map?.dispose();
+          material.dispose();
+        });
+        else {
+          object.material?.map?.dispose();
+          object.material?.dispose();
+        }
       });
       this.scene.remove(node.group);
     }
@@ -30066,6 +30272,10 @@ var LiquidCarsAtlas = class extends HTMLElement {
       const color = this.modelData.palette[node.c] || node.c || this.modelData.palette.component;
       if (node.material) node.material.color.set(color);
       if (node.edge?.material) node.edge.material.color.set(color);
+      for (const binding of node.colorBindings || []) {
+        const palette = { ...this.modelData.palette, ...node.geometryPalette || {}, ...node.geometryPaletteOverrides || {} };
+        binding.material.color.set(resolveGeometryColor(binding.value, palette, color));
+      }
     }
   }
   _build(options = {}) {
@@ -30080,24 +30290,61 @@ var LiquidCarsAtlas = class extends HTMLElement {
       node.group = new Group();
       node.group.position.copy(this._worldPosition(node));
       const geometryKind = entity.geometry || "box";
-      const baked = geometryKind === "box" && Number(entity.radius) > 0;
-      const geometry = makeGeometry(geometryKind, entity.radius, entity.segments, entity.s);
-      if (!baked) normalizeGeometry(geometry);
-      const color = this.modelData.palette[entity.c] || entity.c || this.modelData.palette.component;
-      node.material = new MeshStandardMaterial({ color, roughness: 0.72, metalness: 0.06, transparent: true, opacity: entity.type === "shell" ? 0.96 : 1 });
-      node.mesh = new Mesh(geometry, node.material);
-      node.mesh.scale.fromArray(baked ? [1, 1, 1] : entity.s);
-      if (baked) {
-        geometry.computeBoundingBox();
-        node.labelSize = geometry.boundingBox.getSize(new Vector3());
-      } else {
+      const definition = geometryDefinition(geometryKind);
+      const missingGeometry = !definition && geometryKind.includes(".");
+      const color = missingGeometry ? "#ed8f98" : this.modelData.palette[entity.c] || entity.c || this.modelData.palette.component;
+      if (missingGeometry) this.dispatchEvent(new CustomEvent("lc-warning", { detail: { code: "GEOMETRY_NOT_REGISTERED", geometry: geometryKind, entityId: entity.id } }));
+      const primitiveKind = definition?.primitive || geometryKind;
+      const isCustom = definition && !definition.primitive && entity.type !== "shell";
+      node.geometryDefinition = definition || null;
+      node.geometryMissing = missingGeometry;
+      node.geometryPalette = definition?.palette || {};
+      node.geometryPaletteOverrides = entity.geometryPalette || entity.geometry_palette || {};
+      node.ports = { ...definition?.anchors || {}, ...entity.ports || {} };
+      if (isCustom) {
+        try {
+          const content = createGeometryContent(definition, entity, this.modelData.palette, () => this.invalidate());
+          content.root.scale.multiply(new Vector3().fromArray(entity.s));
+          node.appearanceMaterials = [];
+          content.root.traverse((object) => {
+            if (!object.isMesh) return;
+            object.userData.node = node;
+            const materials = Array.isArray(object.material) ? object.material : [object.material];
+            node.appearanceMaterials.push(...materials.filter(Boolean));
+          });
+          node.mesh = content.root;
+          node.colorBindings = content.colorBindings;
+          node.geometryOptions = content.parameters;
+          node.group.add(content.root);
+        } catch (error) {
+          this.dispatchEvent(new CustomEvent("lc-warning", { detail: { code: "GEOMETRY_BUILD_FAILED", geometry: geometryKind, entityId: entity.id, error } }));
+          const fallback = normalizeGeometry(makeGeometry("box"));
+          node.material = new MeshStandardMaterial({ color: "#ed8f98", roughness: 0.72, metalness: 0.06 });
+          node.mesh = new Mesh(fallback, node.material);
+          node.mesh.scale.fromArray(entity.s);
+          node.mesh.userData.node = node;
+          node.group.add(node.mesh);
+        }
         node.labelSize = new Vector3().fromArray(entity.s);
+      } else {
+        const baked = primitiveKind === "box" && Number(entity.radius) > 0;
+        const geometry = makeGeometry(primitiveKind, entity.radius, entity.segments, entity.s);
+        if (!baked) normalizeGeometry(geometry);
+        node.material = new MeshStandardMaterial({ color, roughness: 0.72, metalness: 0.06, transparent: true, opacity: entity.type === "shell" ? 0.96 : 1 });
+        node.mesh = new Mesh(geometry, node.material);
+        node.mesh.scale.fromArray(baked ? [1, 1, 1] : entity.s);
+        if (baked) {
+          geometry.computeBoundingBox();
+          node.labelSize = geometry.boundingBox.getSize(new Vector3());
+        } else {
+          node.labelSize = new Vector3().fromArray(entity.s);
+        }
+        node.mesh.userData.node = node;
+        node.group.add(node.mesh);
+        node.edge = new LineSegments(new EdgesGeometry(geometry, 22), new LineBasicMaterial({ color, transparent: true, opacity: 0.7 }));
+        node.edge.scale.fromArray(baked ? [1, 1, 1] : entity.s);
+        node.group.add(node.edge);
       }
-      node.mesh.userData.node = node;
-      node.group.add(node.mesh);
-      node.edge = new LineSegments(new EdgesGeometry(geometry, 22), new LineBasicMaterial({ color, transparent: true, opacity: 0.7 }));
-      node.edge.scale.fromArray(baked ? [1, 1, 1] : entity.s);
-      node.group.add(node.edge);
       node.label = makeLabel(entity.name, color, node.labelSize, entity.type);
       node.label.userData.node = node;
       node.label.traverse((labelFace) => {
@@ -30123,18 +30370,22 @@ var LiquidCarsAtlas = class extends HTMLElement {
     }
     return true;
   }
-  _endpoint(node, other, isSource = false) {
+  _endpoint(node, other, isSource = false, relation = null) {
     const center = this._worldPosition(node);
     const mode = node.anchor || "center";
-    if (mode === "center") return center;
-    if (mode === "port") {
+    const requestedAnchor = relation?.[isSource ? "fromAnchor" : "toAnchor"] || relation?.[isSource ? "from_anchor" : "to_anchor"];
+    // Geometry packs may advertise available ports, but their mere presence
+    // must not alter the model. The centre remains the default endpoint;
+    // ports are used only when the entity or relation explicitly requests one.
+    if (mode === "port" || requestedAnchor) {
       const ports = node.ports || {};
-      const port = ports[isSource ? "output" : "input"] || ports.default;
+      const port = ports[requestedAnchor] || ports[isSource ? "output" : "input"] || ports.default;
       if (Array.isArray(port) && port.length >= 3) {
         const half2 = new Vector3(node.s[0] / 2, node.s[1] / 2, node.s[2] / 2);
         return center.add(new Vector3(port[0] * half2.x, port[1] * half2.y, port[2] * half2.z));
       }
     }
+    if (mode === "center") return center;
     const direction = this._worldPosition(other).sub(center);
     if (direction.lengthSq() < 1e-8) return center;
     const half = new Vector3(node.s[0] / 2, node.s[1] / 2, node.s[2] / 2);
@@ -30158,8 +30409,8 @@ var LiquidCarsAtlas = class extends HTMLElement {
       const from = this.nodes.get(relation.from);
       const to = this.nodes.get(relation.to);
       if (!from || !to) continue;
-      const start = this._endpoint(from, to, true);
-      const end = this._endpoint(to, from, false);
+      const start = this._endpoint(from, to, true, relation);
+      const end = this._endpoint(to, from, false, relation);
       const delta = end.clone().sub(start);
       if (delta.lengthSq() < 0.01) continue;
       const visualMode = relationVisualMode(relation);
@@ -30380,13 +30631,21 @@ var LiquidCarsAtlas = class extends HTMLElement {
       const visible = this._isVisible(node);
       node.group.visible = visible;
       const alpha = node.type === "shell" ? this.open.has(node.id) ? 0.12 : 1 : 1;
-      node.material.opacity = alpha;
       const transparent = alpha < 0.999;
-      node.material.depthWrite = !transparent;
       node.mesh.renderOrder = transparent ? 10 - (node.parent ? 1 : 0) : 0;
-      node.material.emissive?.set(node === this.selected ? node.material.color : 0);
-      node.material.emissiveIntensity = node === this.selected ? 0.15 : 0;
-      node.edge.material.opacity = node === this.selected ? 1 : 0.65;
+      if (node.material) {
+        node.material.opacity = alpha;
+        node.material.depthWrite = !transparent;
+        node.material.emissive?.set(node === this.selected ? node.material.color : 0);
+        node.material.emissiveIntensity = node === this.selected ? 0.15 : 0;
+      } else if (node._appearanceSelected !== (node === this.selected)) {
+        for (const material of node.appearanceMaterials || []) {
+          material.emissive?.set(node === this.selected ? material.color : 0);
+          material.emissiveIntensity = node === this.selected ? 0.15 : 0;
+        }
+        node._appearanceSelected = node === this.selected;
+      }
+      if (node.edge?.material) node.edge.material.opacity = node === this.selected ? 1 : 0.65;
       const opened = node.type === "shell" && this.open.has(node.id);
       const transparentLabel = node.type === "shell" && (opened || alpha < 0.65);
       const displayTransparentLabel = transparentLabel && this.showShellLabels;
@@ -30465,7 +30724,7 @@ var LiquidCarsAtlas = class extends HTMLElement {
       if (!(node.type === "shell" && this.open.has(node.id))) meshes.push(node.mesh);
       if (node.label?.visible) meshes.push(...node.label.children.filter((face) => face.visible));
     }
-    const nodeHit = this.raycaster.intersectObjects(meshes, false)[0] || null;
+    const nodeHit = this.raycaster.intersectObjects(meshes, true)[0] || null;
     const relationTargets = this.relationGroup.children.filter((object) => object.userData.relationPick);
     const relationHit = this.raycaster.intersectObjects(relationTargets, false)[0] || null;
     if (nodeHit && (!relationHit || nodeHit.distance <= relationHit.distance + 0.12)) return { kind: "entity", node: nodeHit.object.userData.node };
@@ -30571,5 +30830,8 @@ var LiquidCarsAtlas = class extends HTMLElement {
 if (!customElements.get("liquidcars-atlas")) customElements.define("liquidcars-atlas", LiquidCarsAtlas);
 export {
   LiquidCarsAtlas,
+  getGeometryCatalog,
+  registerGeometryPack,
+  unregisterGeometryPack,
   normalizeModel
 };

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.21"></script>
+  <script type="module" src="./dist/liquidcars-atlas.js?v=0.1.25"></script>
 </head>
 <body>
   <header>
     <h1>LiquidCars Atlas</h1>
-    <p>Prueba de distribución del componente <code>&lt;liquidcars-atlas&gt;</code> · v0.1.21</p>
+    <p>Prueba de distribución del componente <code>&lt;liquidcars-atlas&gt;</code> · v0.1.25</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.23",
+  "version": "0.1.25",
   "description": "Reusable 3D conceptual atlas Web Component for LiquidCars-style models",
   "type": "module",
   "main": "./dist/liquidcars-atlas.js",