@liquidcars/atlas 0.1.22 → 0.1.24

package/README.md

@@ -55,6 +55,8 @@ atlas.setRelationMode('all'); // 'all' | 'selected' | 'none'
 atlas.setToolbarVisible(true); // también se puede usar toolbar="on" | "off"
 atlas.zoomIn();
 atlas.zoomOut();
+atlas.panBy(-1.5, 0); // desplazamiento horizontal/vertical en el plano de cámara
+atlas.panTo(0, 0, 0); // centra la cámara en un punto del mundo
 atlas.fit();
 atlas.frontView();
 atlas.setShellLabels(true);
@@ -94,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`
@@ -125,9 +127,71 @@ 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 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.
+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.
 
 La escena también se puede editar en caliente. `updateModel(patch)` reemplaza
 las secciones indicadas; `addEntity`, `updateEntity` y `removeEntity` gestionan
@@ -149,12 +213,16 @@ 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.24.tgz
 ```
 
 ## Estado
 
-`0.1.22` amplía la selección contextual a las relaciones. El usuario puede
+`0.1.24` incorpora 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
 y modo en el panel y emite el mismo evento `lc-select` con `kind: 'relation'`.
 La API pública añade `selectRelation()`, `selectedRelation` y `selection`, y la

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.24"></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.24</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.24 | 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" },
@@ -29371,7 +29451,7 @@ 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;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>';
+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">Gira: arrastra \xB7 Pan: \u21E7+arrastra / 2 dedos \xB7 Zoom: rueda o pellizco \xB7 Selecciona: clic</div></section><aside class="panel" aria-live="polite"></aside></div>';
 function escapeHtml(value) {
   return String(value ?? "").replace(/[&<>"']/g, (char) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[char]);
 }
@@ -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" });
@@ -29608,6 +29803,7 @@ var LiquidCarsAtlas = class extends HTMLElement {
     this.focus = new Vector3();
     this.targetFocus = new Vector3();
     this.drag = null;
+    this.pointers = /* @__PURE__ */ new Map();
     this.relationGroup = new Group();
     this.scene.add(this.relationGroup);
     this.relations = [];
@@ -29615,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();
@@ -29830,6 +30031,27 @@ var LiquidCarsAtlas = class extends HTMLElement {
     this.invalidate();
     return this;
   }
+  panBy(horizontal = 0, vertical = 0) {
+    const direction = this.camera.getWorldDirection(new Vector3());
+    const right = new Vector3().crossVectors(direction, this.camera.up).normalize();
+    const up = new Vector3().crossVectors(right, direction).normalize();
+    this.targetFocus.addScaledVector(right, Number(horizontal) || 0);
+    this.targetFocus.addScaledVector(up, Number(vertical) || 0);
+    this.invalidate();
+    return this;
+  }
+  panTo(x = 0, y = 0, z = 0) {
+    const value = Array.isArray(x) ? x : x && typeof x === "object" ? [x.x, x.y, x.z] : [x, y, z];
+    this.targetFocus.set(Number(value[0]) || 0, Number(value[1]) || 0, Number(value[2]) || 0);
+    this.invalidate();
+    return this;
+  }
+  _panByPixels(dx, dy) {
+    const rect = this.canvas.getBoundingClientRect();
+    const distance = Math.max(1, this.camera.position.distanceTo(this.focus));
+    const worldPerPixel = 2 * distance * Math.tan(MathUtils.degToRad(this.camera.fov) / 2) / Math.max(1, rect.height);
+    return this.panBy(-dx * worldPerPixel, dy * worldPerPixel);
+  }
   fit() {
     const bounds = new Box3();
     for (const node of this.nodes.values()) {
@@ -30020,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);
     }
@@ -30044,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 = {}) {
@@ -30058,24 +30290,57 @@ 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));
+          content.root.traverse((object) => {
+            if (object.isMesh) object.userData.node = node;
+          });
+          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) => {
@@ -30101,18 +30366,19 @@ 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"];
+    if (mode === "port" || requestedAnchor || node.geometryDefinition?.anchors) {
       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);
@@ -30136,8 +30402,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);
@@ -30358,13 +30624,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 {
+        node.mesh.traverse((object) => {
+          if (!object.isMesh || !object.material) return;
+          object.material.emissive?.set(node === this.selected ? object.material.color : 0);
+          object.material.emissiveIntensity = node === this.selected ? 0.15 : 0;
+        });
+      }
+      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;
@@ -30443,7 +30717,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 };
@@ -30463,28 +30737,60 @@ var LiquidCarsAtlas = class extends HTMLElement {
       if (action === "relations-none") this.setRelationMode("none");
       if (action) this.invalidate();
     });
+    this.canvas.addEventListener("contextmenu", (event) => event.preventDefault());
     this.canvas.addEventListener("pointerdown", (event) => {
-      if (event.button !== 0) return;
-      this.drag = { x: event.clientX, y: event.clientY, moved: false };
+      if (event.pointerType !== "touch" && ![0, 1, 2].includes(event.button)) return;
+      this.pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+      const mode = event.pointerType === "touch" ? "rotate" : event.shiftKey || event.button !== 0 ? "pan" : "rotate";
+      this.drag = { pointerId: event.pointerId, pointerType: event.pointerType, button: event.button, mode, x: event.clientX, y: event.clientY, moved: false };
+      if (event.pointerType === "touch" && this.pointers.size === 2) {
+        const [a, b] = [...this.pointers.values()];
+        this.drag = { mode: "touch-pan", x: (a.x + b.x) / 2, y: (a.y + b.y) / 2, distance: Math.hypot(a.x - b.x, a.y - b.y), moved: true };
+      }
       this.canvas.setPointerCapture(event.pointerId);
       this.canvas.style.cursor = "grabbing";
     });
     this.canvas.addEventListener("pointermove", (event) => {
-      if (!this.drag) return;
+      if (!this.drag || !this.pointers.has(event.pointerId)) return;
+      this.pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+      if (event.pointerType === "touch" && this.pointers.size >= 2) {
+        const [a, b] = [...this.pointers.values()];
+        const x = (a.x + b.x) / 2;
+        const y = (a.y + b.y) / 2;
+        const distance = Math.max(1, Math.hypot(a.x - b.x, a.y - b.y));
+        if (this.drag.mode !== "touch-pan") this.drag = { mode: "touch-pan", x, y, distance, moved: true };
+        else {
+          this._panByPixels(x - this.drag.x, y - this.drag.y);
+          this.targetZoom = Math.min(2.8, Math.max(0.55, this.targetZoom * distance / Math.max(1, this.drag.distance)));
+          Object.assign(this.drag, { x, y, distance, moved: true });
+        }
+        this.invalidate();
+        return;
+      }
+      if (this.drag.pointerId !== event.pointerId) return;
       const dx = event.clientX - this.drag.x;
       const dy = event.clientY - this.drag.y;
       if (Math.abs(dx) + Math.abs(dy) > 3) this.drag.moved = true;
       this.drag.x = event.clientX;
       this.drag.y = event.clientY;
-      this.yaw -= dx * 5e-3;
-      this.pitch = Math.max(-1.56, Math.min(1.56, this.pitch + dy * 5e-3));
+      if (this.drag.mode === "pan" || event.shiftKey) this._panByPixels(dx, dy);
+      else {
+        this.yaw -= dx * 5e-3;
+        this.pitch = Math.max(-1.56, Math.min(1.56, this.pitch + dy * 5e-3));
+      }
       this.invalidate();
     });
-    this.canvas.addEventListener("pointerup", (event) => {
+    const endPointer = (event, cancelled = false) => {
       const drag = this.drag;
+      this.pointers.delete(event.pointerId);
+      if (this.pointers.size) {
+        const [pointerId, point] = this.pointers.entries().next().value;
+        this.drag = { pointerId, pointerType: "touch", button: 0, mode: "rotate", x: point.x, y: point.y, moved: true };
+        return;
+      }
       this.drag = null;
       this.canvas.style.cursor = "grab";
-      if (drag && !drag.moved) {
+      if (!cancelled && drag && !drag.moved && drag.button === 0) {
         const picked = this._pick(event);
         if (picked?.kind === "entity") {
           const node = picked.node;
@@ -30498,7 +30804,9 @@ var LiquidCarsAtlas = class extends HTMLElement {
         }
       }
       this.invalidate();
-    });
+    };
+    this.canvas.addEventListener("pointerup", (event) => endPointer(event));
+    this.canvas.addEventListener("pointercancel", (event) => endPointer(event, true));
     this.canvas.addEventListener("wheel", (event) => {
       event.preventDefault();
       this.targetZoom = Math.min(2.8, Math.max(0.55, this.targetZoom * Math.exp(-event.deltaY * 1e-3)));
@@ -30515,5 +30823,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.24"></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.24</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.22",
+  "version": "0.1.24",
   "description": "Reusable 3D conceptual atlas Web Component for LiquidCars-style models",
   "type": "module",
   "main": "./dist/liquidcars-atlas.js",