@liquidcars/atlas 0.1.52 → 0.2.0

package/src/liquidcars-atlas.js

@@ -1,10 +1,15 @@
 import { validateRuntimeModel, canonicalRelation } from "./model.js";
 import * as THREE from "./three.module.js";
 import atlasPackage from "../package.json" with { type: "json" };
-import { renderDiagramSvg, diagramSvgToPng } from "./diagram-svg.js";
+import { renderDiagramSvg, diagramSvgToPng, computeDiagramLayout } from "./diagram-svg.js";
 import { DiagramView, DIAGRAM_VIEW_CSS, DIAGRAM_TOOLBAR } from "./diagram-view.js";
 
-export { renderDiagramSvg, diagramSvgToPng };
+export { renderDiagramSvg, diagramSvgToPng, computeDiagramLayout };
+import {installPlanarAtlas} from './diagram-webgl.js';
+export {orthographicFit, diagramViewForModel} from './diagram-webgl.js';
+export {DiagramScene} from './diagram-scene.js';
+export const OrthographicCamera = THREE.OrthographicCamera;
+export const DiagramGraphics = Object.fromEntries(['Group','BoxGeometry','Vector3','Color','BufferGeometry','Float32BufferAttribute','Mesh','MeshBasicMaterial','LineSegments','LineBasicMaterial','PlaneGeometry','CanvasTexture'].map(name => [name, THREE[name]]));
 import { resolveAtlasReference, atlasReferenceTarget } from "./document-navigation.js";
 export { resolveAtlasReference, atlasReferenceTarget } from "./document-navigation.js";
 import { renderPanelContent } from "./panel-content.js";
@@ -355,7 +360,7 @@ const CSS = [
   "*{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 .external-link{display:inline-flex;align-items:center;gap:6px;margin:2px 0 12px;color:#6ad7c0;font-size:13px;font-weight:600;text-decoration:none}.panel .external-link:hover{text-decoration:underline}.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.selected{padding-left:9px;border-left:2px solid #6ad7c0;background:#18343f}.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("");
 
-const TOOLBAR_CSS = ".toolbar{max-width:calc(100% - 16px);overflow:visible}.toolbar-group{display:flex;align-items:center;gap:2px}.toolbar-group+.toolbar-group{padding-left:6px;border-left:1px solid #38515f}.toolbar .toolbar-icon{display:grid;width:30px;padding:0;place-items:center}.toolbar-icon svg,.toolbar-menu>summary svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.toolbar-menu{position:relative}.toolbar-menu>summary{display:flex;align-items:center;height:30px;padding:0 8px;gap:6px;border-radius:5px;color:var(--lc-toolbar-text,#dbe7ec);cursor:pointer;list-style:none;user-select:none}.toolbar-menu>summary::-webkit-details-marker{display:none}.toolbar-menu>summary:hover,.toolbar-menu[open]>summary{background:var(--lc-toolbar-active,#1f3d4b);color:var(--lc-toolbar-active-text,#c5f2e9)}.toolbar-menu-status{max-width:92px;overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.toolbar-menu-chevron{width:10px;height:10px!important;transition:transform .16s ease}.toolbar-menu[open] .toolbar-menu-chevron{transform:rotate(180deg)}.toolbar-popover{position:absolute;right:0;bottom:calc(100% + 8px);display:grid;min-width:218px;padding:6px;border:1px solid var(--lc-toolbar-border,#3a5062);border-radius:9px;background:var(--lc-toolbar-bg,#15232ff7);box-shadow:0 14px 36px #0009}.toolbar-popover-title{padding:7px 9px 5px;color:var(--lc-hint,#8da6b8);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.toolbar .toolbar-option{display:grid;grid-template-columns:minmax(0,1fr) 18px;align-items:center;width:100%;height:auto;min-height:34px;padding:7px 9px;text-align:left}.toolbar-option span:first-child{overflow:hidden;text-overflow:ellipsis}.toolbar-option-check{color:var(--lc-toolbar-active-text,#c5f2e9);font-weight:700;text-align:center;visibility:hidden}.toolbar-option.active .toolbar-option-check{visibility:visible}.toolbar-option-separator{height:1px;margin:5px 7px;background:#38515f}.toolbar button[disabled]{opacity:.42;cursor:not-allowed}@media(max-width:620px){.toolbar-menu-status{display:none}.toolbar-menu>summary{width:30px;padding:0;justify-content:center}.toolbar-menu-chevron{display:none}.toolbar-group+.toolbar-group{padding-left:3px}.toolbar-popover{right:-4px}}";
+const TOOLBAR_CSS = ".toolbar{max-width:calc(100% - 16px);overflow:visible}.toolbar-group{display:flex;align-items:center;gap:2px}.toolbar-group+.toolbar-group{padding-left:6px;border-left:1px solid #38515f}.toolbar .toolbar-icon{display:grid;width:30px;padding:0;place-items:center}.toolbar-icon svg,.toolbar-menu>summary svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.toolbar-menu{position:relative}.toolbar-menu>summary{display:flex;align-items:center;height:30px;padding:0 8px;gap:6px;border-radius:5px;color:var(--lc-toolbar-text,#dbe7ec);cursor:pointer;list-style:none;user-select:none}.toolbar-menu>summary::-webkit-details-marker{display:none}.toolbar-menu>summary:hover,.toolbar-menu[open]>summary{background:var(--lc-toolbar-active,#1f3d4b);color:var(--lc-toolbar-active-text,#c5f2e9)}.toolbar-menu-status{max-width:92px;overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.toolbar-menu-chevron{width:10px;height:10px!important;transition:transform .16s ease}.toolbar-menu[open] .toolbar-menu-chevron{transform:rotate(180deg)}.toolbar-popover{max-height:min(420px,calc(100dvh - 160px),var(--lc-menu-height,420px));overflow-y:auto;overscroll-behavior:contain;max-width:calc(100vw - 32px);position:absolute;right:0;bottom:calc(100% + 8px);display:grid;min-width:218px;padding:6px;border:1px solid var(--lc-toolbar-border,#3a5062);border-radius:9px;background:var(--lc-toolbar-bg,#15232ff7);box-shadow:0 14px 36px #0009}.toolbar-popover-title{padding:7px 9px 5px;color:var(--lc-hint,#8da6b8);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.toolbar .toolbar-option{display:grid;grid-template-columns:minmax(0,1fr) 18px;align-items:center;width:100%;height:auto;min-height:34px;padding:7px 9px;text-align:left}.toolbar-option span:first-child{overflow:hidden;text-overflow:ellipsis}.toolbar-option-check{color:var(--lc-toolbar-active-text,#c5f2e9);font-weight:700;text-align:center;visibility:hidden}.toolbar-option.active .toolbar-option-check{visibility:visible}.toolbar-option-separator{height:1px;margin:5px 7px;background:#38515f}.toolbar button[disabled]{opacity:.42;cursor:not-allowed}@media(max-width:620px){.toolbar-menu-status{display:none}.toolbar-menu>summary{width:30px;padding:0;justify-content:center}.toolbar-menu-chevron{display:none}.toolbar-group+.toolbar-group{padding-left:3px}.toolbar-popover{right:-4px}}";
 
 const NAVIGATION_CSS = ".toolbar-group[data-toolbar-group=navigation]{position:relative}.toolbar-group[hidden]{display:none}.atlas-history-popover{position:absolute;left:0;bottom:calc(100% + 8px);min-width:250px;max-width:min(360px,80vw);max-height:300px;overflow:auto;padding:6px;border:1px solid var(--lc-toolbar-border,#3a5062);border-radius:9px;background:var(--lc-toolbar-bg,#15232ff7);box-shadow:0 14px 36px #0009;z-index:12}.atlas-history-popover[hidden]{display:none}.atlas-history-popover .history-heading{padding:7px 9px 5px;color:var(--lc-hint,#8da6b8);font-size:10px;text-transform:uppercase;letter-spacing:.1em}.toolbar .atlas-history-popover button{display:block;width:100%;height:auto;padding:8px 9px;text-align:left;white-space:normal;overflow-wrap:anywhere}.atlas-history-popover small{display:block;opacity:.65;font-size:10px}.atlas-jump{position:absolute;z-index:9;display:grid;place-items:center;width:34px;height:34px;border:1px solid #73d9c7;border-radius:50%;background:#173e49;color:#c8fff2;box-shadow:0 4px 16px #0009;cursor:pointer}.atlas-jump[hidden]{display:none}.atlas-jump:hover,.atlas-jump:focus-visible{background:#286776;outline:2px solid #c8fff2}.atlas-jump svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.panel .rich-content{color:var(--lc-panel-text,#b5c6d2);font-size:14px;line-height:1.55}.panel .rich-content h1,.panel .rich-content h2,.panel .rich-content h3{color:var(--lc-panel-title,#e9f0f5);letter-spacing:normal;margin:14px 0 8px}.panel .rich-content a{color:#6ad7c0}.panel .rich-content pre{overflow:auto;padding:8px;background:#091622;border-radius:5px}.panel .rich-content code{font-size:.9em}.panel .rich-content ul,.panel .rich-content ol{padding-left:20px}";
 const DOCUMENT_NAV_CSS = ".document-navigation{position:absolute;top:12px;right:12px;z-index:10;display:flex;padding:5px;border:1px solid var(--lc-toolbar-border,#3a5062);border-radius:8px;background:var(--lc-toolbar-bg,#15232fe8)}.document-navigation[hidden],:host([navigation-controls=external]) .document-navigation{display:none!important}.document-navigation button{display:grid;width:30px;height:30px;place-items:center;padding:0;border:0;border-radius:5px;background:none;color:var(--lc-toolbar-text,#dbe7ec);cursor:pointer}.document-navigation button:hover{background:var(--lc-toolbar-active,#1f3d4b);color:var(--lc-toolbar-active-text,#c5f2e9)}.document-navigation button:disabled{opacity:.42;cursor:not-allowed}.document-navigation svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.document-navigation .atlas-history-popover{top:calc(100% + 8px);right:0;bottom:auto;left:auto}.document-navigation .atlas-history-popover button{display:block;width:100%;height:auto;padding:8px 9px;text-align:left;white-space:normal;overflow-wrap:anywhere}@media print{.document-navigation,.atlas-jump{display:none!important}}";
@@ -1458,7 +1463,7 @@ function makeLabel(text, color, dimensions, type = "", outlined = true) {
   const context = bitmap.getContext("2d");
   const width = dimensions.x * .88;
   const height = Math.min(.82, dimensions.y * .64);
-  const density = 320;
+  const density = Math.min(320, 4096 / Math.max(width, height));
   bitmap.width = Math.ceil(width * density);
   bitmap.height = Math.ceil(height * density);
   context.imageSmoothingEnabled = true;
@@ -1828,6 +1833,7 @@ class LiquidCarsAtlas extends HTMLElement {
     globalThis.removeEventListener?.("afterprint", this._afterPrintListener);
     if (typeof this._printMedia?.removeEventListener === "function") this._printMedia.removeEventListener("change", this._printMediaListener);
     else this._printMedia?.removeListener?.(this._printMediaListener);
+    this.dispatchEvent(new CustomEvent("lc-disconnect"));
     this.restoreAfterPrint();
     if (this._copyStatusTimer) globalThis.clearTimeout?.(this._copyStatusTimer);
     if (this._historyPressTimer) globalThis.clearTimeout?.(this._historyPressTimer);
@@ -2807,7 +2813,7 @@ class LiquidCarsAtlas extends HTMLElement {
   }
 
   zoomOut() {
-    this.targetZoom = Math.max(MIN_ZOOM, this.targetZoom / 1.18);
+    this.targetZoom = Math.max(this._webglPlanar ? .001 : MIN_ZOOM, this.targetZoom / 1.18);
     this.invalidate();
     return this;
   }
@@ -2824,7 +2830,7 @@ class LiquidCarsAtlas extends HTMLElement {
     let zoom = 1.22;
     if (this.selected) {
       target = this._worldPosition(this.selected);
-      zoom = this.selected.parent ? 1.35 : 1.1;
+      zoom = isContainerType(this.selected.type) ? 1.35 : 3.5;
     } else if (this.selectedRelationIndex !== null) {
       const relation = this.relations[this.selectedRelationIndex];
       const from = relation && this.nodes.get(relation.from);
@@ -3365,7 +3371,7 @@ class LiquidCarsAtlas extends HTMLElement {
         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, this.showShellLabels);
+      node.label = makeLabel(this._webglPlanar ? "" : entity.name, color, this._webglPlanar ? new THREE.Vector3(1, .1, 1) : node.labelSize, entity.type, this.showShellLabels);
       node.labelAnchor = resolveEntityLabelAnchor(entity, this.modelData.style);
       node.label.userData.node = node;
       node.label.traverse(labelFace => { labelFace.userData.node = node; });
@@ -3832,7 +3838,7 @@ class LiquidCarsAtlas extends HTMLElement {
   }
 
   invalidate() {
-    if (this.viewMode === "3d" && !this.animationFrame && this.renderer) this.animationFrame = requestAnimationFrame(time => this._renderFrame(time));
+    if ((this.viewMode === "3d" || this._webglPlanar) && !this.animationFrame && this.renderer) this.animationFrame = requestAnimationFrame(time => this._renderFrame(time));
   }
 
   _geometryContentUpdated() {
@@ -3844,7 +3850,7 @@ class LiquidCarsAtlas extends HTMLElement {
 
   _renderFrame(time) {
     this.animationFrame = 0;
-    if (!this.renderer || this.viewMode !== "3d") return;
+    if (!this.renderer || (this.viewMode !== "3d" && !this._webglPlanar)) return;
     const zoomGap = Math.abs(this.targetZoom - this.zoom);
     const focusGap = this.targetFocus.distanceTo(this.focus);
     this.zoom += (this.targetZoom - this.zoom) * .12;
@@ -3852,12 +3858,12 @@ class LiquidCarsAtlas extends HTMLElement {
     const distance = this._baseCameraDistance() / this.zoom;
     this.cameraTarget.set(this.focus.x, this.focus.y, this.focus.z);
     this.cameraPosition.set(Math.sin(this.yaw) * Math.cos(this.pitch), Math.sin(this.pitch), Math.cos(this.yaw) * Math.cos(this.pitch)).multiplyScalar(distance).add(this.cameraTarget);
-    this.camera.position.copy(this.cameraPosition);
-    this.camera.lookAt(this.cameraTarget);
+    if (this._webglPlanar) this._updatePlanarCamera();
+    else { this.camera.position.copy(this.cameraPosition); this.camera.lookAt(this.cameraTarget); }
     // Camera-facing is a presentation transform only. Positions, container
     // shells and relation routing remain in model space while leaf visuals
     // inherit the camera orientation around their unchanged centres.
-    this._applyItemFacing();
+    if (!this._webglPlanar) this._applyItemFacing();
     const focused = this._focusedEntityIds();
     for (const node of this.nodes.values()) {
       const focusAlpha = this._focusAlpha(node, focused);
@@ -4002,9 +4008,10 @@ class LiquidCarsAtlas extends HTMLElement {
         child.position.lerpVectors(child.userData.start, child.userData.end, factor);
       }
     }
+    if (this._webglPlanar) this._applyDiagramPresentation();
     this.renderer.render(this.scene, this.camera);
     this._positionJumpButton();
-    if (zoomGap > .001 || focusGap > .001 || this.relationGroup.children.length || this.drag) this.invalidate();
+    if (zoomGap > .001 || focusGap > .001 || (!this._webglPlanar && this.relationGroup.children.length) || this.drag) this.invalidate();
   }
 
   _pick(event) {
@@ -4124,7 +4131,7 @@ class LiquidCarsAtlas extends HTMLElement {
     });
     this.shadowRoot.addEventListener("click", event => {
       const actionControl = closestEventElement(event, "[data-action]");
-      const action = actionControl?.dataset.action;
+      const action = actionControl?.dataset?.action;
       if (this._historyLongPress === action) { this._historyLongPress = null; return; }
       if (!closestEventElement(event, ".atlas-history-popover")) this._closeHistoryPopover();
       if (!closestEventElement(event, ".toolbar-menu")) this._closeToolbarMenus();
@@ -4187,7 +4194,7 @@ class LiquidCarsAtlas extends HTMLElement {
         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(MAX_ZOOM, Math.max(MIN_ZOOM, this.targetZoom * distance / Math.max(1, this.drag.distance)));
+          this.targetZoom = Math.min(MAX_ZOOM, Math.max(this._webglPlanar ? .001 : MIN_ZOOM, this.targetZoom * distance / Math.max(1, this.drag.distance)));
           Object.assign(this.drag, { x, y, distance, moved: true });
         }
         this.invalidate();
@@ -4199,7 +4206,7 @@ class LiquidCarsAtlas extends HTMLElement {
       if (Math.abs(dx) + Math.abs(dy) > 3) this.drag.moved = true;
       this.drag.x = event.clientX;
       this.drag.y = event.clientY;
-      if (this.drag.mode === "pan" || event.shiftKey) this._panByPixels(dx, dy);
+      if (this._webglPlanar || this.drag.mode === "pan" || event.shiftKey) this._panByPixels(dx, dy);
       else {
         this.yaw -= dx * .005;
         this.pitch = Math.max(-1.56, Math.min(1.56, this.pitch + dy * .005));
@@ -4239,7 +4246,7 @@ class LiquidCarsAtlas extends HTMLElement {
       if (picked?.kind === "entity") this.select(picked.node.id, { source: "double-click", navigation: "fit" });
       if (picked?.kind === "relation") this.selectRelation(picked.index, { source: "double-click", navigation: "fit" });
     });
-    this.canvas.addEventListener("wheel", event => { event.preventDefault(); this.targetZoom = Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, this.targetZoom * Math.exp(-event.deltaY * .001))); this.invalidate(); }, { passive: false });
+    this.canvas.addEventListener("wheel", event => { event.preventDefault(); if (this._webglPlanar) this._diagramFitted = false; this.targetZoom = Math.min(MAX_ZOOM, Math.max(this._webglPlanar ? .001 : MIN_ZOOM, this.targetZoom * Math.exp(-event.deltaY * .001))); this.invalidate(); }, { passive: false });
   }
 
   _showError(message) {
@@ -4250,5 +4257,7 @@ class LiquidCarsAtlas extends HTMLElement {
   }
 }
 
+installPlanarAtlas(LiquidCarsAtlas, OrthographicCamera, computeDiagramLayout, DiagramGraphics);
+
 if (!customElements.get("liquidcars-atlas")) customElements.define("liquidcars-atlas", LiquidCarsAtlas);
 export { LiquidCarsAtlas, normalizeModel };

package/src/model.js

@@ -7,6 +7,120 @@ export const modelRepresentation = model => isRuntimeModel(model) ? "native" : "
 const object = value => value !== null && typeof value === "object" && !Array.isArray(value);
 const modes = new Set(["directed", "bidirectional", "broken"]);
 const aliases = { "two-way": "bidirectional", both: "bidirectional", interrupted: "broken" };
+export const CUSTOM_ATTRIBUTE_TYPES = Object.freeze(["number", "text", "long-text", "select", "multi-select"]);
+export const CUSTOM_ATTRIBUTE_SCOPES = Object.freeze(["container", "entity", "relation"]);
+export const MODEL_LIBRARY_SOURCE = "npm";
+const customAttributeTypes = new Set(CUSTOM_ATTRIBUTE_TYPES);
+const customAttributeScopes = new Set(CUSTOM_ATTRIBUTE_SCOPES);
+const npmPackagePattern = /^(?:@[a-z0-9][a-z0-9._-]*\/[a-z0-9][a-z0-9._-]*|[a-z0-9][a-z0-9._-]*)$/i;
+const exactVersionPattern = /^\d+\.\d+\.\d+(?:-[0-9A-Za-z.-]+)?(?:\+[0-9A-Za-z.-]+)?$/;
+const geometryNamespacePattern = /^[a-z][a-z0-9-]*(?:\.[a-z][a-z0-9-]*)*$/i;
+
+/** Validate author geometry packs loaded explicitly for this model. */
+export function validateModelLibraries(model) {
+  if (!object(model)) throw new Error("Atlas model must be an object.");
+  if (model.libraries === undefined) return model;
+  if (!Array.isArray(model.libraries)) throw new Error("Model libraries must be an array.");
+  const packages = new Set(), namespaces = new Set();
+  for (const library of model.libraries) {
+    if (!object(library)) throw new Error("Every model library needs a definition.");
+    const source = library.source || MODEL_LIBRARY_SOURCE;
+    if (source !== MODEL_LIBRARY_SOURCE) throw new Error(`Unsupported model library source: ${source}.`);
+    if (typeof library.package !== "string" || !npmPackagePattern.test(library.package)) {
+      throw new Error("Model libraries require a valid npm package name.");
+    }
+    if (packages.has(library.package)) throw new Error(`Duplicate model library package: ${library.package}.`);
+    packages.add(library.package);
+    if (typeof library.version !== "string" || !exactVersionPattern.test(library.version)) {
+      throw new Error(`Model library ${library.package} requires an exact semantic version.`);
+    }
+    if (library.namespace !== undefined) {
+      if (typeof library.namespace !== "string" || !geometryNamespacePattern.test(library.namespace)) {
+        throw new Error(`Model library ${library.package} has an invalid geometry namespace.`);
+      }
+      if (namespaces.has(library.namespace)) throw new Error(`Duplicate model library namespace: ${library.namespace}.`);
+      namespaces.add(library.namespace);
+    }
+  }
+  return model;
+}
+
+function customAttributeTargetScope(target, kind) {
+  if (kind === "relation") return "relation";
+  return ["container", "shell"].includes(target?.type) ? "container" : "entity";
+}
+
+/**
+ * Validates the optional model-level custom attribute schema and every value
+ * stored on containers, entities and relations. This is deliberately shared
+ * by native and declarative models so tools can rely on one public contract.
+ */
+export function validateCustomAttributes(model) {
+  if (!object(model)) throw new Error("Atlas model must be an object.");
+  if (model.customAttributes === undefined) return model;
+  if (!Array.isArray(model.customAttributes)) throw new Error("Custom attributes must be an array.");
+  const definitions = new Map();
+  for (const definition of model.customAttributes) {
+    if (!object(definition)) throw new Error("Every custom attribute needs a definition.");
+    if (typeof definition.id !== "string" || !/^[A-Za-z][A-Za-z0-9_-]*$/.test(definition.id)) {
+      throw new Error("Custom attribute IDs must start with a letter and use letters, numbers, _ or -.");
+    }
+    if (definitions.has(definition.id)) throw new Error(`Duplicate custom attribute ID: ${definition.id}.`);
+    if (typeof definition.label !== "string" || !definition.label.trim()) throw new Error(`Custom attribute ${definition.id} needs a label.`);
+    if (!customAttributeTypes.has(definition.type)) throw new Error(`Invalid custom attribute type: ${definition.id}.`);
+    if (!Array.isArray(definition.scope) || !definition.scope.length || definition.scope.some(scope => !customAttributeScopes.has(scope))) {
+      throw new Error(`Invalid custom attribute scope: ${definition.id}.`);
+    }
+    if (new Set(definition.scope).size !== definition.scope.length) throw new Error(`Duplicate custom attribute scope: ${definition.id}.`);
+    if (definition.type === "text" && (!Number.isInteger(definition.maxLength) || definition.maxLength < 1)) {
+      throw new Error(`Bounded text attribute ${definition.id} needs a positive maxLength.`);
+    }
+    if (["select", "multi-select"].includes(definition.type) && (
+      !Array.isArray(definition.options) || !definition.options.length ||
+      definition.options.some(option => typeof option !== "string" || !option.trim()) ||
+      new Set(definition.options).size !== definition.options.length
+    )) throw new Error(`Selection attribute ${definition.id} needs unique, non-empty options.`);
+    for (const key of ["min", "max", "step"]) if (definition[key] !== undefined && !Number.isFinite(definition[key])) {
+      throw new Error(`Invalid ${key} for custom attribute ${definition.id}.`);
+    }
+    if (definition.step !== undefined && definition.step <= 0) throw new Error(`Custom attribute ${definition.id} needs a positive step.`);
+    if (definition.min !== undefined && definition.max !== undefined && definition.min > definition.max) {
+      throw new Error(`Custom attribute ${definition.id} has min greater than max.`);
+    }
+    definitions.set(definition.id, definition);
+  }
+
+  const validateTarget = (target, kind, label) => {
+    if (target?.attributes === undefined) return;
+    if (!object(target.attributes)) throw new Error(`${label} custom attributes must be an object.`);
+    const targetScope = customAttributeTargetScope(target, kind);
+    for (const [id, value] of Object.entries(target.attributes)) {
+      const definition = definitions.get(id);
+      if (!definition) throw new Error(`${label} uses undefined custom attribute: ${id}.`);
+      if (!definition.scope.includes(targetScope)) throw new Error(`Custom attribute ${id} does not apply to ${label}.`);
+      if (definition.type === "number" && !Number.isFinite(value)) throw new Error(`Custom attribute ${id} on ${label} must be numeric.`);
+      if (["text", "long-text", "select"].includes(definition.type) && typeof value !== "string") throw new Error(`Custom attribute ${id} on ${label} must be text.`);
+      if (definition.type === "text" && value.length > definition.maxLength) throw new Error(`Custom attribute ${id} on ${label} exceeds maxLength.`);
+      if (definition.type === "select" && !definition.options.includes(value)) throw new Error(`Custom attribute ${id} on ${label} is not an allowed option.`);
+      if (definition.type === "multi-select" && (
+        !Array.isArray(value) || new Set(value).size !== value.length ||
+        value.some(option => typeof option !== "string" || !definition.options.includes(option))
+      )) throw new Error(`Custom attribute ${id} on ${label} must contain unique allowed options.`);
+      if (definition.type === "number" && definition.min !== undefined && value < definition.min) throw new Error(`Custom attribute ${id} on ${label} is below min.`);
+      if (definition.type === "number" && definition.max !== undefined && value > definition.max) throw new Error(`Custom attribute ${id} on ${label} is above max.`);
+    }
+  };
+  const visitEntities = items => {
+    for (const entity of Array.isArray(items) ? items : []) {
+      validateTarget(entity, "entity", `entity ${entity?.id || "<unknown>"}`);
+      for (const relation of entity?.relations || []) validateTarget(relation, "relation", `relation ${relation?.id || "<unknown>"}`);
+      visitEntities(entity?.children);
+    }
+  };
+  visitEntities(model.entities);
+  for (const relation of model.relations || []) validateTarget(relation, "relation", `relation ${relation?.id || "<unknown>"}`);
+  return model;
+}
 
 export function canonicalRelation(relation) {
   const value = Array.isArray(relation)
@@ -22,6 +136,8 @@ export function canonicalRelation(relation) {
 
 export function validateRuntimeModel(model) {
   if (!object(model) || !Array.isArray(model.entities)) throw new Error("Atlas JSON needs an entities array.");
+  validateModelLibraries(model);
+  validateCustomAttributes(model);
   if (model.relations !== undefined && !Array.isArray(model.relations)) throw new Error("Atlas JSON relations must be an array.");
   const ids = new Map();
   for (const entity of model.entities) {