@liquidcars/atlas 0.1.10

package/README.md

@@ -0,0 +1,98 @@
+# `@liquidcars/atlas`
+
+Componente web reutilizable para explorar modelos conceptuales en 3D. El componente lee una isla de datos con `palette`, `entities` y `relations`, resuelve coordenadas relativas mediante `parent` y permite explorar geometrías, contenedores, relaciones animadas y selección contextual.
+
+## Prueba local
+
+Desde la carpeta del paquete:
+
+```bash
+python3 -m http.server 4173
+```
+
+Después abre <http://localhost:4173/> (o <http://localhost:4173/demo/>). La demo usa el mismo modelo LiquidCars que la página actual, pero carga el componente como módulo ESM independiente. Es importante servirlo por HTTP, no abrir el HTML directamente con `file://`.
+
+## Uso directo en una página
+
+```html
+<script type="module" src="./dist/liquidcars-atlas.js"></script>
+
+<liquidcars-atlas height="720" relation-mode="selected" shell-labels="on">
+  <script type="application/json">
+  {
+    "palette": {
+      "channels": "#58b6ec",
+      "offers": "#48c8b0"
+    },
+    "entities": [
+      {
+        "id": "offers",
+        "name": "OFFERS",
+        "sub": "Stock y servicios",
+        "p": [0, -3, 0],
+        "s": [11, 3.4, 5],
+        "c": "#48c8b0",
+        "type": "shell",
+        "text": "..."
+      }
+    ],
+    "relations": [
+      { "from": "dealer", "to": "base-offer", "label": "mantiene" }
+    ]
+  }
+  </script>
+</liquidcars-atlas>
+```
+
+También se puede cargar el modelo desde JavaScript:
+
+```js
+const atlas = document.querySelector('liquidcars-atlas');
+atlas.model = model;
+atlas.select('distribution-agreement');
+atlas.setRelationMode('all'); // 'all' | 'selected' | 'none'
+atlas.setTheme({
+  background: { color: '#07121e', glow: '#20394b' },
+  lighting: { ambient: 1.8, directional: 3.0 },
+  ui: { breadcrumbs: true, panel: true, toolbar: true, hint: false }
+});
+```
+
+El mismo bloque `theme` puede formar parte del JSON del modelo. Los estilos
+principales también están expuestos como variables CSS (`--lc-bg`,
+`--lc-bg-glow`, `--lc-panel-bg`, `--lc-toolbar-bg`, `--lc-crumb-bg`, etc.),
+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`.
+
+## Contrato de datos
+
+- `palette`: mapa de nombres de color a valores CSS/hex.
+- `theme` (opcional): configuración de `background`, `lighting`, `panel`, `toolbar`, `breadcrumbs`, `hint` y `ui`. `ui` permite mostrar u ocultar `panel`, `toolbar`, `breadcrumbs` y `hint`.
+- `entities`: objetos con `id`, `name`, `p`, `s`, `c`, `type`, `text` y opcionalmente `parent`, `geometry`, `radius`, `segments`, `frontLabel`, `anchor` y `ports`.
+- `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]`.
+
+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`.
+
+## 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. 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:
+
+```bash
+npm publish --access public
+```
+
+Una vez publicado, los consumidores podrán instalarlo con `npm install @liquidcars/atlas` o cargar el bundle desde un CDN compatible con npm.
+
+Para probar el paquete sin publicarlo, basta con instalar el tarball generado:
+
+```bash
+npm install ./liquidcars-atlas-0.1.10.tgz
+```
+
+## Estado
+
+`0.1.10` 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 incluye configuración programática de tema, iluminación y elementos de interfaz.

package/demo/index.html

@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="es">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>LiquidCars Atlas · Web Component demo</title>
+  <style>
+    :root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
+    body { margin: 0; min-height: 100vh; background: #07121e; color: #ecf4fb; }
+    header { padding: 22px 28px 10px; }
+    h1 { margin: 0 0 6px; font-size: clamp(24px, 4vw, 42px); }
+    p { margin: 0; color: #9bb0c4; }
+    main { padding: 12px 20px 28px; }
+    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.10"></script>
+</head>
+<body>
+  <header>
+    <h1>LiquidCars Atlas</h1>
+    <p>Prueba de distribución del componente <code>&lt;liquidcars-atlas&gt;</code> · v0.1.10</p>
+  </header>
+  <main>
+    <liquidcars-atlas id="atlas" height="720" relation-mode="selected" shell-labels="on"></liquidcars-atlas>
+  </main>
+  <script type="module">
+    const atlas = document.querySelector('#atlas');
+    const model = await fetch(new URL('./model.json', import.meta.url)).then((response) => {
+      if (!response.ok) throw new Error(`No se pudo cargar el modelo (${response.status})`);
+      return response.json();
+    });
+    atlas.model = model;
+    atlas.addEventListener('lc-select', (event) => {
+      document.title = `${event.detail.entity?.name || 'LiquidCars Atlas'} · Web Component demo`;
+    });
+  </script>
+</body>
+</html>