@almadar/ui 5.63.1 → 5.64.0

package/dist/avl/index.cjs

@@ -43,6 +43,7 @@ var THREE3 = require('three');
 var GLTFLoader_js = require('three/examples/jsm/loaders/GLTFLoader.js');
 var OBJLoader_js = require('three/examples/jsm/loaders/OBJLoader.js');
 var GLTFLoader = require('three/examples/jsm/loaders/GLTFLoader');
+var SkeletonUtils = require('three/examples/jsm/utils/SkeletonUtils');
 var fiber = require('@react-three/fiber');
 var drei = require('@react-three/drei');
 var patterns = require('@almadar/patterns');
@@ -41203,6 +41204,13 @@ var init_DocumentViewer = __esm({
     DocumentViewer.displayName = "DocumentViewer";
   }
 });
+function measureLabelWidth(text) {
+  if (typeof document === "undefined") return text.length * 6;
+  if (!labelMeasureCtx) labelMeasureCtx = document.createElement("canvas").getContext("2d");
+  if (!labelMeasureCtx) return text.length * 6;
+  labelMeasureCtx.font = "10px system-ui";
+  return labelMeasureCtx.measureText(text).width;
+}
 function getGroupColor(group, groups) {
   if (!group) return GROUP_COLORS2[0];
   const idx = groups.indexOf(group);
@@ -41214,7 +41222,7 @@ function resolveColor2(color, el) {
   const resolved = getComputedStyle(el).getPropertyValue(m[1]).trim();
   return resolved || (m[2]?.trim() ?? "#888888");
 }
-var GROUP_COLORS2, GraphCanvas;
+var GROUP_COLORS2, labelMeasureCtx, GraphCanvas;
 var init_GraphCanvas = __esm({
   "components/core/molecules/GraphCanvas.tsx"() {
     "use client";
@@ -41234,6 +41242,7 @@ var init_GraphCanvas = __esm({
       "var(--color-info)",
       "var(--color-accent)"
     ];
+    labelMeasureCtx = null;
     GraphCanvas = ({
       title,
       nodes: propNodes = [],
@@ -41414,22 +41423,36 @@ var init_GraphCanvas = __esm({
               node.x = Math.max(30, Math.min(w - 30, node.x));
               node.y = Math.max(30, Math.min(h - 30, node.y));
             }
+            const LABEL_GAP = 12;
+            const LABEL_H = 12;
+            const pad = nodeSpacing / 2;
             for (let i = 0; i < nodes.length; i++) {
               for (let j = i + 1; j < nodes.length; j++) {
                 const a = nodes[i];
                 const b = nodes[j];
-                const dx = b.x - a.x;
-                const dy = b.y - a.y;
-                const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-                const minDist = (a.size || 8) + (b.size || 8) + nodeSpacing;
-                if (dist < minDist) {
-                  const push2 = (minDist - dist) / 2;
-                  const ux = dx / dist;
-                  const uy = dy / dist;
-                  a.x = Math.max(30, Math.min(w - 30, a.x - ux * push2));
-                  a.y = Math.max(30, Math.min(h - 30, a.y - uy * push2));
-                  b.x = Math.max(30, Math.min(w - 30, b.x + ux * push2));
-                  b.y = Math.max(30, Math.min(h - 30, b.y + uy * push2));
+                const ar = a.size || 8;
+                const br = b.size || 8;
+                if (showLabels) {
+                  if (a.labelW === void 0) a.labelW = a.label ? measureLabelWidth(a.label) : 0;
+                  if (b.labelW === void 0) b.labelW = b.label ? measureLabelWidth(b.label) : 0;
+                }
+                const labelBelow = showLabels ? LABEL_GAP + LABEL_H : 0;
+                const aHalfW = Math.max(ar, (a.labelW ?? 0) / 2) + pad;
+                const bHalfW = Math.max(br, (b.labelW ?? 0) / 2) + pad;
+                const aTop = a.y - ar - pad, aBot = a.y + ar + labelBelow + pad;
+                const bTop = b.y - br - pad, bBot = b.y + br + labelBelow + pad;
+                const overlapX = Math.min(a.x + aHalfW, b.x + bHalfW) - Math.max(a.x - aHalfW, b.x - bHalfW);
+                const overlapY = Math.min(aBot, bBot) - Math.max(aTop, bTop);
+                if (overlapX > 0 && overlapY > 0) {
+                  if (overlapX <= overlapY) {
+                    const push2 = overlapX / 2 * (b.x >= a.x ? 1 : -1);
+                    a.x = Math.max(30, Math.min(w - 30, a.x - push2));
+                    b.x = Math.max(30, Math.min(w - 30, b.x + push2));
+                  } else {
+                    const push2 = overlapY / 2 * (bTop + bBot >= aTop + aBot ? 1 : -1);
+                    a.y = Math.max(30, Math.min(h - 30, a.y - push2));
+                    b.y = Math.max(30, Math.min(h - 30, b.y + push2));
+                  }
                 }
               }
             }
@@ -41446,7 +41469,7 @@ var init_GraphCanvas = __esm({
         return () => {
           cancelAnimationFrame(animRef.current);
         };
-      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, logicalW, height]);
+      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, showLabels, logicalW, height]);
       React93.useEffect(() => {
         const canvas = canvasRef.current;
         if (!canvas) return;
@@ -45438,7 +45461,8 @@ function ModelLoader({
   const { model: loadedModel, isLoading, error } = useGLTFModel(url, resourceBasePath);
   const model = React93.useMemo(() => {
     if (!loadedModel) return null;
-    const cloned = loadedModel.clone();
+    const cloned = SkeletonUtils.clone(loadedModel);
+    cloned.updateMatrixWorld(true);
     cloned.traverse((child) => {
       if (child instanceof THREE3__namespace.Mesh) {
         child.castShadow = castShadow;
@@ -45453,7 +45477,8 @@ function ModelLoader({
     const size = new THREE3__namespace.Vector3();
     box.getSize(size);
     const maxDim = Math.max(size.x, size.y, size.z);
-    return maxDim > 0 && Number.isFinite(maxDim) ? 1 / maxDim : 1;
+    if (!Number.isFinite(maxDim) || maxDim < 0.05) return 1;
+    return 1 / maxDim;
   }, [model]);
   const scaleArray = React93.useMemo(() => {
     const base = typeof scale === "number" ? [scale, scale, scale] : scale;

package/dist/avl/index.js

@@ -43,6 +43,7 @@ import * as THREE3 from 'three';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
 import { GLTFLoader as GLTFLoader$1 } from 'three/examples/jsm/loaders/GLTFLoader';
+import { clone } from 'three/examples/jsm/utils/SkeletonUtils';
 import { Canvas, useLoader, useFrame, useThree } from '@react-three/fiber';
 import { Billboard, Grid as Grid$1, OrbitControls } from '@react-three/drei';
 import { getPatternDefinition, getComponentForPattern as getComponentForPattern$1, isEntityAwarePattern } from '@almadar/patterns';
@@ -41156,6 +41157,13 @@ var init_DocumentViewer = __esm({
     DocumentViewer.displayName = "DocumentViewer";
   }
 });
+function measureLabelWidth(text) {
+  if (typeof document === "undefined") return text.length * 6;
+  if (!labelMeasureCtx) labelMeasureCtx = document.createElement("canvas").getContext("2d");
+  if (!labelMeasureCtx) return text.length * 6;
+  labelMeasureCtx.font = "10px system-ui";
+  return labelMeasureCtx.measureText(text).width;
+}
 function getGroupColor(group, groups) {
   if (!group) return GROUP_COLORS2[0];
   const idx = groups.indexOf(group);
@@ -41167,7 +41175,7 @@ function resolveColor2(color, el) {
   const resolved = getComputedStyle(el).getPropertyValue(m[1]).trim();
   return resolved || (m[2]?.trim() ?? "#888888");
 }
-var GROUP_COLORS2, GraphCanvas;
+var GROUP_COLORS2, labelMeasureCtx, GraphCanvas;
 var init_GraphCanvas = __esm({
   "components/core/molecules/GraphCanvas.tsx"() {
     "use client";
@@ -41187,6 +41195,7 @@ var init_GraphCanvas = __esm({
       "var(--color-info)",
       "var(--color-accent)"
     ];
+    labelMeasureCtx = null;
     GraphCanvas = ({
       title,
       nodes: propNodes = [],
@@ -41367,22 +41376,36 @@ var init_GraphCanvas = __esm({
               node.x = Math.max(30, Math.min(w - 30, node.x));
               node.y = Math.max(30, Math.min(h - 30, node.y));
             }
+            const LABEL_GAP = 12;
+            const LABEL_H = 12;
+            const pad = nodeSpacing / 2;
             for (let i = 0; i < nodes.length; i++) {
               for (let j = i + 1; j < nodes.length; j++) {
                 const a = nodes[i];
                 const b = nodes[j];
-                const dx = b.x - a.x;
-                const dy = b.y - a.y;
-                const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-                const minDist = (a.size || 8) + (b.size || 8) + nodeSpacing;
-                if (dist < minDist) {
-                  const push2 = (minDist - dist) / 2;
-                  const ux = dx / dist;
-                  const uy = dy / dist;
-                  a.x = Math.max(30, Math.min(w - 30, a.x - ux * push2));
-                  a.y = Math.max(30, Math.min(h - 30, a.y - uy * push2));
-                  b.x = Math.max(30, Math.min(w - 30, b.x + ux * push2));
-                  b.y = Math.max(30, Math.min(h - 30, b.y + uy * push2));
+                const ar = a.size || 8;
+                const br = b.size || 8;
+                if (showLabels) {
+                  if (a.labelW === void 0) a.labelW = a.label ? measureLabelWidth(a.label) : 0;
+                  if (b.labelW === void 0) b.labelW = b.label ? measureLabelWidth(b.label) : 0;
+                }
+                const labelBelow = showLabels ? LABEL_GAP + LABEL_H : 0;
+                const aHalfW = Math.max(ar, (a.labelW ?? 0) / 2) + pad;
+                const bHalfW = Math.max(br, (b.labelW ?? 0) / 2) + pad;
+                const aTop = a.y - ar - pad, aBot = a.y + ar + labelBelow + pad;
+                const bTop = b.y - br - pad, bBot = b.y + br + labelBelow + pad;
+                const overlapX = Math.min(a.x + aHalfW, b.x + bHalfW) - Math.max(a.x - aHalfW, b.x - bHalfW);
+                const overlapY = Math.min(aBot, bBot) - Math.max(aTop, bTop);
+                if (overlapX > 0 && overlapY > 0) {
+                  if (overlapX <= overlapY) {
+                    const push2 = overlapX / 2 * (b.x >= a.x ? 1 : -1);
+                    a.x = Math.max(30, Math.min(w - 30, a.x - push2));
+                    b.x = Math.max(30, Math.min(w - 30, b.x + push2));
+                  } else {
+                    const push2 = overlapY / 2 * (bTop + bBot >= aTop + aBot ? 1 : -1);
+                    a.y = Math.max(30, Math.min(h - 30, a.y - push2));
+                    b.y = Math.max(30, Math.min(h - 30, b.y + push2));
+                  }
                 }
               }
             }
@@ -41399,7 +41422,7 @@ var init_GraphCanvas = __esm({
         return () => {
           cancelAnimationFrame(animRef.current);
         };
-      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, logicalW, height]);
+      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, showLabels, logicalW, height]);
       useEffect(() => {
         const canvas = canvasRef.current;
         if (!canvas) return;
@@ -45391,7 +45414,8 @@ function ModelLoader({
   const { model: loadedModel, isLoading, error } = useGLTFModel(url, resourceBasePath);
   const model = useMemo(() => {
     if (!loadedModel) return null;
-    const cloned = loadedModel.clone();
+    const cloned = clone(loadedModel);
+    cloned.updateMatrixWorld(true);
     cloned.traverse((child) => {
       if (child instanceof THREE3.Mesh) {
         child.castShadow = castShadow;
@@ -45406,7 +45430,8 @@ function ModelLoader({
     const size = new THREE3.Vector3();
     box.getSize(size);
     const maxDim = Math.max(size.x, size.y, size.z);
-    return maxDim > 0 && Number.isFinite(maxDim) ? 1 / maxDim : 1;
+    if (!Number.isFinite(maxDim) || maxDim < 0.05) return 1;
+    return 1 / maxDim;
   }, [model]);
   const scaleArray = useMemo(() => {
     const base = typeof scale === "number" ? [scale, scale, scale] : scale;

package/dist/components/game/molecules/three/index.cjs

@@ -7,6 +7,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var drei = require('@react-three/drei');
 var logger = require('@almadar/logger');
 var GLTFLoader = require('three/examples/jsm/loaders/GLTFLoader');
+var SkeletonUtils = require('three/examples/jsm/utils/SkeletonUtils');
 var OrbitControls_js = require('three/examples/jsm/controls/OrbitControls.js');
 var GLTFLoader_js = require('three/examples/jsm/loaders/GLTFLoader.js');
 var OBJLoader_js = require('three/examples/jsm/loaders/OBJLoader.js');
@@ -392,7 +393,8 @@ function ModelLoader({
   const { model: loadedModel, isLoading, error } = useGLTFModel(url, resourceBasePath);
   const model = React11.useMemo(() => {
     if (!loadedModel) return null;
-    const cloned = loadedModel.clone();
+    const cloned = SkeletonUtils.clone(loadedModel);
+    cloned.updateMatrixWorld(true);
     cloned.traverse((child) => {
       if (child instanceof THREE6__namespace.Mesh) {
         child.castShadow = castShadow;
@@ -407,7 +409,8 @@ function ModelLoader({
     const size = new THREE6__namespace.Vector3();
     box.getSize(size);
     const maxDim = Math.max(size.x, size.y, size.z);
-    return maxDim > 0 && Number.isFinite(maxDim) ? 1 / maxDim : 1;
+    if (!Number.isFinite(maxDim) || maxDim < 0.05) return 1;
+    return 1 / maxDim;
   }, [model]);
   const scaleArray = React11.useMemo(() => {
     const base = typeof scale === "number" ? [scale, scale, scale] : scale;

package/dist/components/game/molecules/three/index.js

@@ -6,6 +6,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { OrbitControls, Billboard, Grid, Stars, Sparkles, Html, RoundedBox } from '@react-three/drei';
 import { createLogger } from '@almadar/logger';
 import { GLTFLoader as GLTFLoader$1 } from 'three/examples/jsm/loaders/GLTFLoader';
+import { clone } from 'three/examples/jsm/utils/SkeletonUtils';
 import { OrbitControls as OrbitControls$1 } from 'three/examples/jsm/controls/OrbitControls.js';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
@@ -368,7 +369,8 @@ function ModelLoader({
   const { model: loadedModel, isLoading, error } = useGLTFModel(url, resourceBasePath);
   const model = useMemo(() => {
     if (!loadedModel) return null;
-    const cloned = loadedModel.clone();
+    const cloned = clone(loadedModel);
+    cloned.updateMatrixWorld(true);
     cloned.traverse((child) => {
       if (child instanceof THREE6.Mesh) {
         child.castShadow = castShadow;
@@ -383,7 +385,8 @@ function ModelLoader({
     const size = new THREE6.Vector3();
     box.getSize(size);
     const maxDim = Math.max(size.x, size.y, size.z);
-    return maxDim > 0 && Number.isFinite(maxDim) ? 1 / maxDim : 1;
+    if (!Number.isFinite(maxDim) || maxDim < 0.05) return 1;
+    return 1 / maxDim;
   }, [model]);
   const scaleArray = useMemo(() => {
     const base = typeof scale === "number" ? [scale, scale, scale] : scale;

package/dist/components/index.cjs

@@ -45,6 +45,7 @@ var THREE3 = require('three');
 var GLTFLoader_js = require('three/examples/jsm/loaders/GLTFLoader.js');
 var OBJLoader_js = require('three/examples/jsm/loaders/OBJLoader.js');
 var GLTFLoader = require('three/examples/jsm/loaders/GLTFLoader');
+var SkeletonUtils = require('three/examples/jsm/utils/SkeletonUtils');
 var fiber = require('@react-three/fiber');
 var drei = require('@react-three/drei');
 var patterns = require('@almadar/patterns');
@@ -39430,6 +39431,13 @@ var init_DocumentViewer = __esm({
     exports.DocumentViewer.displayName = "DocumentViewer";
   }
 });
+function measureLabelWidth(text) {
+  if (typeof document === "undefined") return text.length * 6;
+  if (!labelMeasureCtx) labelMeasureCtx = document.createElement("canvas").getContext("2d");
+  if (!labelMeasureCtx) return text.length * 6;
+  labelMeasureCtx.font = "10px system-ui";
+  return labelMeasureCtx.measureText(text).width;
+}
 function getGroupColor(group, groups) {
   if (!group) return GROUP_COLORS2[0];
   const idx = groups.indexOf(group);
@@ -39441,7 +39449,7 @@ function resolveColor2(color, el) {
   const resolved = getComputedStyle(el).getPropertyValue(m[1]).trim();
   return resolved || (m[2]?.trim() ?? "#888888");
 }
-var GROUP_COLORS2; exports.GraphCanvas = void 0;
+var GROUP_COLORS2, labelMeasureCtx; exports.GraphCanvas = void 0;
 var init_GraphCanvas = __esm({
   "components/core/molecules/GraphCanvas.tsx"() {
     "use client";
@@ -39461,6 +39469,7 @@ var init_GraphCanvas = __esm({
       "var(--color-info)",
       "var(--color-accent)"
     ];
+    labelMeasureCtx = null;
     exports.GraphCanvas = ({
       title,
       nodes: propNodes = [],
@@ -39641,22 +39650,36 @@ var init_GraphCanvas = __esm({
               node.x = Math.max(30, Math.min(w - 30, node.x));
               node.y = Math.max(30, Math.min(h - 30, node.y));
             }
+            const LABEL_GAP = 12;
+            const LABEL_H = 12;
+            const pad = nodeSpacing / 2;
             for (let i = 0; i < nodes.length; i++) {
               for (let j = i + 1; j < nodes.length; j++) {
                 const a = nodes[i];
                 const b = nodes[j];
-                const dx = b.x - a.x;
-                const dy = b.y - a.y;
-                const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-                const minDist = (a.size || 8) + (b.size || 8) + nodeSpacing;
-                if (dist < minDist) {
-                  const push = (minDist - dist) / 2;
-                  const ux = dx / dist;
-                  const uy = dy / dist;
-                  a.x = Math.max(30, Math.min(w - 30, a.x - ux * push));
-                  a.y = Math.max(30, Math.min(h - 30, a.y - uy * push));
-                  b.x = Math.max(30, Math.min(w - 30, b.x + ux * push));
-                  b.y = Math.max(30, Math.min(h - 30, b.y + uy * push));
+                const ar = a.size || 8;
+                const br = b.size || 8;
+                if (showLabels) {
+                  if (a.labelW === void 0) a.labelW = a.label ? measureLabelWidth(a.label) : 0;
+                  if (b.labelW === void 0) b.labelW = b.label ? measureLabelWidth(b.label) : 0;
+                }
+                const labelBelow = showLabels ? LABEL_GAP + LABEL_H : 0;
+                const aHalfW = Math.max(ar, (a.labelW ?? 0) / 2) + pad;
+                const bHalfW = Math.max(br, (b.labelW ?? 0) / 2) + pad;
+                const aTop = a.y - ar - pad, aBot = a.y + ar + labelBelow + pad;
+                const bTop = b.y - br - pad, bBot = b.y + br + labelBelow + pad;
+                const overlapX = Math.min(a.x + aHalfW, b.x + bHalfW) - Math.max(a.x - aHalfW, b.x - bHalfW);
+                const overlapY = Math.min(aBot, bBot) - Math.max(aTop, bTop);
+                if (overlapX > 0 && overlapY > 0) {
+                  if (overlapX <= overlapY) {
+                    const push = overlapX / 2 * (b.x >= a.x ? 1 : -1);
+                    a.x = Math.max(30, Math.min(w - 30, a.x - push));
+                    b.x = Math.max(30, Math.min(w - 30, b.x + push));
+                  } else {
+                    const push = overlapY / 2 * (bTop + bBot >= aTop + aBot ? 1 : -1);
+                    a.y = Math.max(30, Math.min(h - 30, a.y - push));
+                    b.y = Math.max(30, Math.min(h - 30, b.y + push));
+                  }
                 }
               }
             }
@@ -39673,7 +39696,7 @@ var init_GraphCanvas = __esm({
         return () => {
           cancelAnimationFrame(animRef.current);
         };
-      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, logicalW, height]);
+      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, showLabels, logicalW, height]);
       React79.useEffect(() => {
         const canvas = canvasRef.current;
         if (!canvas) return;
@@ -43992,7 +44015,8 @@ function ModelLoader({
   const { model: loadedModel, isLoading, error } = useGLTFModel(url, resourceBasePath);
   const model = React79.useMemo(() => {
     if (!loadedModel) return null;
-    const cloned = loadedModel.clone();
+    const cloned = SkeletonUtils.clone(loadedModel);
+    cloned.updateMatrixWorld(true);
     cloned.traverse((child) => {
       if (child instanceof THREE3__namespace.Mesh) {
         child.castShadow = castShadow;
@@ -44007,7 +44031,8 @@ function ModelLoader({
     const size = new THREE3__namespace.Vector3();
     box.getSize(size);
     const maxDim = Math.max(size.x, size.y, size.z);
-    return maxDim > 0 && Number.isFinite(maxDim) ? 1 / maxDim : 1;
+    if (!Number.isFinite(maxDim) || maxDim < 0.05) return 1;
+    return 1 / maxDim;
   }, [model]);
   const scaleArray = React79.useMemo(() => {
     const base = typeof scale === "number" ? [scale, scale, scale] : scale;

package/dist/components/index.js

@@ -46,6 +46,7 @@ import * as THREE3 from 'three';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
 import { GLTFLoader as GLTFLoader$1 } from 'three/examples/jsm/loaders/GLTFLoader';
+import { clone } from 'three/examples/jsm/utils/SkeletonUtils';
 import { Canvas, useLoader, useFrame, useThree } from '@react-three/fiber';
 import { Billboard, Grid as Grid$1, OrbitControls } from '@react-three/drei';
 import { getPatternDefinition as getPatternDefinition$1, getComponentForPattern as getComponentForPattern$1 } from '@almadar/patterns';
@@ -39384,6 +39385,13 @@ var init_DocumentViewer = __esm({
     DocumentViewer.displayName = "DocumentViewer";
   }
 });
+function measureLabelWidth(text) {
+  if (typeof document === "undefined") return text.length * 6;
+  if (!labelMeasureCtx) labelMeasureCtx = document.createElement("canvas").getContext("2d");
+  if (!labelMeasureCtx) return text.length * 6;
+  labelMeasureCtx.font = "10px system-ui";
+  return labelMeasureCtx.measureText(text).width;
+}
 function getGroupColor(group, groups) {
   if (!group) return GROUP_COLORS2[0];
   const idx = groups.indexOf(group);
@@ -39395,7 +39403,7 @@ function resolveColor2(color, el) {
   const resolved = getComputedStyle(el).getPropertyValue(m[1]).trim();
   return resolved || (m[2]?.trim() ?? "#888888");
 }
-var GROUP_COLORS2, GraphCanvas;
+var GROUP_COLORS2, labelMeasureCtx, GraphCanvas;
 var init_GraphCanvas = __esm({
   "components/core/molecules/GraphCanvas.tsx"() {
     "use client";
@@ -39415,6 +39423,7 @@ var init_GraphCanvas = __esm({
       "var(--color-info)",
       "var(--color-accent)"
     ];
+    labelMeasureCtx = null;
     GraphCanvas = ({
       title,
       nodes: propNodes = [],
@@ -39595,22 +39604,36 @@ var init_GraphCanvas = __esm({
               node.x = Math.max(30, Math.min(w - 30, node.x));
               node.y = Math.max(30, Math.min(h - 30, node.y));
             }
+            const LABEL_GAP = 12;
+            const LABEL_H = 12;
+            const pad = nodeSpacing / 2;
             for (let i = 0; i < nodes.length; i++) {
               for (let j = i + 1; j < nodes.length; j++) {
                 const a = nodes[i];
                 const b = nodes[j];
-                const dx = b.x - a.x;
-                const dy = b.y - a.y;
-                const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-                const minDist = (a.size || 8) + (b.size || 8) + nodeSpacing;
-                if (dist < minDist) {
-                  const push = (minDist - dist) / 2;
-                  const ux = dx / dist;
-                  const uy = dy / dist;
-                  a.x = Math.max(30, Math.min(w - 30, a.x - ux * push));
-                  a.y = Math.max(30, Math.min(h - 30, a.y - uy * push));
-                  b.x = Math.max(30, Math.min(w - 30, b.x + ux * push));
-                  b.y = Math.max(30, Math.min(h - 30, b.y + uy * push));
+                const ar = a.size || 8;
+                const br = b.size || 8;
+                if (showLabels) {
+                  if (a.labelW === void 0) a.labelW = a.label ? measureLabelWidth(a.label) : 0;
+                  if (b.labelW === void 0) b.labelW = b.label ? measureLabelWidth(b.label) : 0;
+                }
+                const labelBelow = showLabels ? LABEL_GAP + LABEL_H : 0;
+                const aHalfW = Math.max(ar, (a.labelW ?? 0) / 2) + pad;
+                const bHalfW = Math.max(br, (b.labelW ?? 0) / 2) + pad;
+                const aTop = a.y - ar - pad, aBot = a.y + ar + labelBelow + pad;
+                const bTop = b.y - br - pad, bBot = b.y + br + labelBelow + pad;
+                const overlapX = Math.min(a.x + aHalfW, b.x + bHalfW) - Math.max(a.x - aHalfW, b.x - bHalfW);
+                const overlapY = Math.min(aBot, bBot) - Math.max(aTop, bTop);
+                if (overlapX > 0 && overlapY > 0) {
+                  if (overlapX <= overlapY) {
+                    const push = overlapX / 2 * (b.x >= a.x ? 1 : -1);
+                    a.x = Math.max(30, Math.min(w - 30, a.x - push));
+                    b.x = Math.max(30, Math.min(w - 30, b.x + push));
+                  } else {
+                    const push = overlapY / 2 * (bTop + bBot >= aTop + aBot ? 1 : -1);
+                    a.y = Math.max(30, Math.min(h - 30, a.y - push));
+                    b.y = Math.max(30, Math.min(h - 30, b.y + push));
+                  }
                 }
               }
             }
@@ -39627,7 +39650,7 @@ var init_GraphCanvas = __esm({
         return () => {
           cancelAnimationFrame(animRef.current);
         };
-      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, logicalW, height]);
+      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, showLabels, logicalW, height]);
       useEffect(() => {
         const canvas = canvasRef.current;
         if (!canvas) return;
@@ -43946,7 +43969,8 @@ function ModelLoader({
   const { model: loadedModel, isLoading, error } = useGLTFModel(url, resourceBasePath);
   const model = useMemo(() => {
     if (!loadedModel) return null;
-    const cloned = loadedModel.clone();
+    const cloned = clone(loadedModel);
+    cloned.updateMatrixWorld(true);
     cloned.traverse((child) => {
       if (child instanceof THREE3.Mesh) {
         child.castShadow = castShadow;
@@ -43961,7 +43985,8 @@ function ModelLoader({
     const size = new THREE3.Vector3();
     box.getSize(size);
     const maxDim = Math.max(size.x, size.y, size.z);
-    return maxDim > 0 && Number.isFinite(maxDim) ? 1 / maxDim : 1;
+    if (!Number.isFinite(maxDim) || maxDim < 0.05) return 1;
+    return 1 / maxDim;
   }, [model]);
   const scaleArray = useMemo(() => {
     const base = typeof scale === "number" ? [scale, scale, scale] : scale;

package/dist/components/marketing/organisms/HeroOrganism.d.ts

@@ -10,7 +10,7 @@
  * - Never listens to events
  */
 import React from 'react';
-import type { EntityWith } from '@almadar/core';
+import type { EntityWith, AssetUrl } from '@almadar/core';
 import type { DisplayStateProps } from '../../core/organisms/types';
 /** A hero CTA: a plain `{ label, href }` object (FieldValue-compatible — a `type`,
  *  not `interface`, so it's assignable to the entity-row `FieldValue` index sig). */
@@ -29,7 +29,7 @@ export interface HeroRow {
     secondaryAction?: HeroAction;
     installCommand?: string;
     image?: {
-        src?: string;
+        src?: AssetUrl;
         alt?: string;
     };
     imagePosition?: 'below' | 'right' | 'background';

package/dist/components/marketing/organisms/ShowcaseOrganism.d.ts

@@ -10,7 +10,7 @@
  * - Never listens to events
  */
 import React from 'react';
-import type { EntityWith } from '@almadar/core';
+import type { EntityWith, AssetUrl } from '@almadar/core';
 import type { DisplayStateProps } from '../../core/organisms/types';
 /** The per-showcase entity fields this organism reads (FieldValue-compatible; `image`
  *  is a plain `{ src, alt }` object, `accentColor` a string). */
@@ -18,7 +18,7 @@ export interface ShowcaseRow {
     title: string;
     description?: string;
     image?: {
-        src?: string;
+        src?: AssetUrl;
         alt?: string;
     };
     href?: string;

package/dist/components/marketing/organisms/TeamOrganism.d.ts

@@ -9,7 +9,7 @@
  * - No events (display-only)
  */
 import React from 'react';
-import type { EntityWith } from '@almadar/core';
+import type { EntityWith, AssetUrl } from '@almadar/core';
 import type { DisplayStateProps } from '../../core/organisms/types';
 /** The per-member entity fields this organism reads (FieldValue-compatible;
  *  `avatar` is a string url/initials). */
@@ -18,7 +18,7 @@ export interface TeamMemberRow {
     nameAr?: string;
     role?: string;
     bio?: string;
-    avatar?: string;
+    avatar?: AssetUrl;
 }
 export interface TeamOrganismProps extends DisplayStateProps {
     entity?: EntityWith<TeamMemberRow> | readonly EntityWith<TeamMemberRow>[];

package/dist/providers/index.cjs

@@ -45,6 +45,7 @@ var THREE3 = require('three');
 var GLTFLoader_js = require('three/examples/jsm/loaders/GLTFLoader.js');
 var OBJLoader_js = require('three/examples/jsm/loaders/OBJLoader.js');
 var GLTFLoader = require('three/examples/jsm/loaders/GLTFLoader');
+var SkeletonUtils = require('three/examples/jsm/utils/SkeletonUtils');
 var fiber = require('@react-three/fiber');
 var drei = require('@react-three/drei');
 var patterns = require('@almadar/patterns');
@@ -39004,6 +39005,13 @@ var init_DocumentViewer = __esm({
     DocumentViewer.displayName = "DocumentViewer";
   }
 });
+function measureLabelWidth(text) {
+  if (typeof document === "undefined") return text.length * 6;
+  if (!labelMeasureCtx) labelMeasureCtx = document.createElement("canvas").getContext("2d");
+  if (!labelMeasureCtx) return text.length * 6;
+  labelMeasureCtx.font = "10px system-ui";
+  return labelMeasureCtx.measureText(text).width;
+}
 function getGroupColor(group, groups) {
   if (!group) return GROUP_COLORS2[0];
   const idx = groups.indexOf(group);
@@ -39015,7 +39023,7 @@ function resolveColor2(color, el) {
   const resolved = getComputedStyle(el).getPropertyValue(m[1]).trim();
   return resolved || (m[2]?.trim() ?? "#888888");
 }
-var GROUP_COLORS2, GraphCanvas;
+var GROUP_COLORS2, labelMeasureCtx, GraphCanvas;
 var init_GraphCanvas = __esm({
   "components/core/molecules/GraphCanvas.tsx"() {
     "use client";
@@ -39035,6 +39043,7 @@ var init_GraphCanvas = __esm({
       "var(--color-info)",
       "var(--color-accent)"
     ];
+    labelMeasureCtx = null;
     GraphCanvas = ({
       title,
       nodes: propNodes = [],
@@ -39215,22 +39224,36 @@ var init_GraphCanvas = __esm({
               node.x = Math.max(30, Math.min(w - 30, node.x));
               node.y = Math.max(30, Math.min(h - 30, node.y));
             }
+            const LABEL_GAP = 12;
+            const LABEL_H = 12;
+            const pad = nodeSpacing / 2;
             for (let i = 0; i < nodes.length; i++) {
               for (let j = i + 1; j < nodes.length; j++) {
                 const a = nodes[i];
                 const b = nodes[j];
-                const dx = b.x - a.x;
-                const dy = b.y - a.y;
-                const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-                const minDist = (a.size || 8) + (b.size || 8) + nodeSpacing;
-                if (dist < minDist) {
-                  const push = (minDist - dist) / 2;
-                  const ux = dx / dist;
-                  const uy = dy / dist;
-                  a.x = Math.max(30, Math.min(w - 30, a.x - ux * push));
-                  a.y = Math.max(30, Math.min(h - 30, a.y - uy * push));
-                  b.x = Math.max(30, Math.min(w - 30, b.x + ux * push));
-                  b.y = Math.max(30, Math.min(h - 30, b.y + uy * push));
+                const ar = a.size || 8;
+                const br = b.size || 8;
+                if (showLabels) {
+                  if (a.labelW === void 0) a.labelW = a.label ? measureLabelWidth(a.label) : 0;
+                  if (b.labelW === void 0) b.labelW = b.label ? measureLabelWidth(b.label) : 0;
+                }
+                const labelBelow = showLabels ? LABEL_GAP + LABEL_H : 0;
+                const aHalfW = Math.max(ar, (a.labelW ?? 0) / 2) + pad;
+                const bHalfW = Math.max(br, (b.labelW ?? 0) / 2) + pad;
+                const aTop = a.y - ar - pad, aBot = a.y + ar + labelBelow + pad;
+                const bTop = b.y - br - pad, bBot = b.y + br + labelBelow + pad;
+                const overlapX = Math.min(a.x + aHalfW, b.x + bHalfW) - Math.max(a.x - aHalfW, b.x - bHalfW);
+                const overlapY = Math.min(aBot, bBot) - Math.max(aTop, bTop);
+                if (overlapX > 0 && overlapY > 0) {
+                  if (overlapX <= overlapY) {
+                    const push = overlapX / 2 * (b.x >= a.x ? 1 : -1);
+                    a.x = Math.max(30, Math.min(w - 30, a.x - push));
+                    b.x = Math.max(30, Math.min(w - 30, b.x + push));
+                  } else {
+                    const push = overlapY / 2 * (bTop + bBot >= aTop + aBot ? 1 : -1);
+                    a.y = Math.max(30, Math.min(h - 30, a.y - push));
+                    b.y = Math.max(30, Math.min(h - 30, b.y + push));
+                  }
                 }
               }
             }
@@ -39247,7 +39270,7 @@ var init_GraphCanvas = __esm({
         return () => {
           cancelAnimationFrame(animRef.current);
         };
-      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, logicalW, height]);
+      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, showLabels, logicalW, height]);
       React85.useEffect(() => {
         const canvas = canvasRef.current;
         if (!canvas) return;
@@ -43239,7 +43262,8 @@ function ModelLoader({
   const { model: loadedModel, isLoading, error } = useGLTFModel(url, resourceBasePath);
   const model = React85.useMemo(() => {
     if (!loadedModel) return null;
-    const cloned = loadedModel.clone();
+    const cloned = SkeletonUtils.clone(loadedModel);
+    cloned.updateMatrixWorld(true);
     cloned.traverse((child) => {
       if (child instanceof THREE3__namespace.Mesh) {
         child.castShadow = castShadow;
@@ -43254,7 +43278,8 @@ function ModelLoader({
     const size = new THREE3__namespace.Vector3();
     box.getSize(size);
     const maxDim = Math.max(size.x, size.y, size.z);
-    return maxDim > 0 && Number.isFinite(maxDim) ? 1 / maxDim : 1;
+    if (!Number.isFinite(maxDim) || maxDim < 0.05) return 1;
+    return 1 / maxDim;
   }, [model]);
   const scaleArray = React85.useMemo(() => {
     const base = typeof scale === "number" ? [scale, scale, scale] : scale;

package/dist/providers/index.js

@@ -45,6 +45,7 @@ import * as THREE3 from 'three';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
 import { GLTFLoader as GLTFLoader$1 } from 'three/examples/jsm/loaders/GLTFLoader';
+import { clone } from 'three/examples/jsm/utils/SkeletonUtils';
 import { Canvas, useLoader, useFrame, useThree } from '@react-three/fiber';
 import { Billboard, Grid as Grid$1, OrbitControls } from '@react-three/drei';
 import { getPatternDefinition, getComponentForPattern as getComponentForPattern$1 } from '@almadar/patterns';
@@ -38957,6 +38958,13 @@ var init_DocumentViewer = __esm({
     DocumentViewer.displayName = "DocumentViewer";
   }
 });
+function measureLabelWidth(text) {
+  if (typeof document === "undefined") return text.length * 6;
+  if (!labelMeasureCtx) labelMeasureCtx = document.createElement("canvas").getContext("2d");
+  if (!labelMeasureCtx) return text.length * 6;
+  labelMeasureCtx.font = "10px system-ui";
+  return labelMeasureCtx.measureText(text).width;
+}
 function getGroupColor(group, groups) {
   if (!group) return GROUP_COLORS2[0];
   const idx = groups.indexOf(group);
@@ -38968,7 +38976,7 @@ function resolveColor2(color, el) {
   const resolved = getComputedStyle(el).getPropertyValue(m[1]).trim();
   return resolved || (m[2]?.trim() ?? "#888888");
 }
-var GROUP_COLORS2, GraphCanvas;
+var GROUP_COLORS2, labelMeasureCtx, GraphCanvas;
 var init_GraphCanvas = __esm({
   "components/core/molecules/GraphCanvas.tsx"() {
     "use client";
@@ -38988,6 +38996,7 @@ var init_GraphCanvas = __esm({
       "var(--color-info)",
       "var(--color-accent)"
     ];
+    labelMeasureCtx = null;
     GraphCanvas = ({
       title,
       nodes: propNodes = [],
@@ -39168,22 +39177,36 @@ var init_GraphCanvas = __esm({
               node.x = Math.max(30, Math.min(w - 30, node.x));
               node.y = Math.max(30, Math.min(h - 30, node.y));
             }
+            const LABEL_GAP = 12;
+            const LABEL_H = 12;
+            const pad = nodeSpacing / 2;
             for (let i = 0; i < nodes.length; i++) {
               for (let j = i + 1; j < nodes.length; j++) {
                 const a = nodes[i];
                 const b = nodes[j];
-                const dx = b.x - a.x;
-                const dy = b.y - a.y;
-                const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-                const minDist = (a.size || 8) + (b.size || 8) + nodeSpacing;
-                if (dist < minDist) {
-                  const push = (minDist - dist) / 2;
-                  const ux = dx / dist;
-                  const uy = dy / dist;
-                  a.x = Math.max(30, Math.min(w - 30, a.x - ux * push));
-                  a.y = Math.max(30, Math.min(h - 30, a.y - uy * push));
-                  b.x = Math.max(30, Math.min(w - 30, b.x + ux * push));
-                  b.y = Math.max(30, Math.min(h - 30, b.y + uy * push));
+                const ar = a.size || 8;
+                const br = b.size || 8;
+                if (showLabels) {
+                  if (a.labelW === void 0) a.labelW = a.label ? measureLabelWidth(a.label) : 0;
+                  if (b.labelW === void 0) b.labelW = b.label ? measureLabelWidth(b.label) : 0;
+                }
+                const labelBelow = showLabels ? LABEL_GAP + LABEL_H : 0;
+                const aHalfW = Math.max(ar, (a.labelW ?? 0) / 2) + pad;
+                const bHalfW = Math.max(br, (b.labelW ?? 0) / 2) + pad;
+                const aTop = a.y - ar - pad, aBot = a.y + ar + labelBelow + pad;
+                const bTop = b.y - br - pad, bBot = b.y + br + labelBelow + pad;
+                const overlapX = Math.min(a.x + aHalfW, b.x + bHalfW) - Math.max(a.x - aHalfW, b.x - bHalfW);
+                const overlapY = Math.min(aBot, bBot) - Math.max(aTop, bTop);
+                if (overlapX > 0 && overlapY > 0) {
+                  if (overlapX <= overlapY) {
+                    const push = overlapX / 2 * (b.x >= a.x ? 1 : -1);
+                    a.x = Math.max(30, Math.min(w - 30, a.x - push));
+                    b.x = Math.max(30, Math.min(w - 30, b.x + push));
+                  } else {
+                    const push = overlapY / 2 * (bTop + bBot >= aTop + aBot ? 1 : -1);
+                    a.y = Math.max(30, Math.min(h - 30, a.y - push));
+                    b.y = Math.max(30, Math.min(h - 30, b.y + push));
+                  }
                 }
               }
             }
@@ -39200,7 +39223,7 @@ var init_GraphCanvas = __esm({
         return () => {
           cancelAnimationFrame(animRef.current);
         };
-      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, logicalW, height]);
+      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, showLabels, logicalW, height]);
       useEffect(() => {
         const canvas = canvasRef.current;
         if (!canvas) return;
@@ -43192,7 +43215,8 @@ function ModelLoader({
   const { model: loadedModel, isLoading, error } = useGLTFModel(url, resourceBasePath);
   const model = useMemo(() => {
     if (!loadedModel) return null;
-    const cloned = loadedModel.clone();
+    const cloned = clone(loadedModel);
+    cloned.updateMatrixWorld(true);
     cloned.traverse((child) => {
       if (child instanceof THREE3.Mesh) {
         child.castShadow = castShadow;
@@ -43207,7 +43231,8 @@ function ModelLoader({
     const size = new THREE3.Vector3();
     box.getSize(size);
     const maxDim = Math.max(size.x, size.y, size.z);
-    return maxDim > 0 && Number.isFinite(maxDim) ? 1 / maxDim : 1;
+    if (!Number.isFinite(maxDim) || maxDim < 0.05) return 1;
+    return 1 / maxDim;
   }, [model]);
   const scaleArray = useMemo(() => {
     const base = typeof scale === "number" ? [scale, scale, scale] : scale;

package/dist/runtime/index.cjs

@@ -45,6 +45,7 @@ var THREE3 = require('three');
 var GLTFLoader_js = require('three/examples/jsm/loaders/GLTFLoader.js');
 var OBJLoader_js = require('three/examples/jsm/loaders/OBJLoader.js');
 var GLTFLoader = require('three/examples/jsm/loaders/GLTFLoader');
+var SkeletonUtils = require('three/examples/jsm/utils/SkeletonUtils');
 var fiber = require('@react-three/fiber');
 var drei = require('@react-three/drei');
 var patterns = require('@almadar/patterns');
@@ -38702,6 +38703,13 @@ var init_DocumentViewer = __esm({
     DocumentViewer.displayName = "DocumentViewer";
   }
 });
+function measureLabelWidth(text) {
+  if (typeof document === "undefined") return text.length * 6;
+  if (!labelMeasureCtx) labelMeasureCtx = document.createElement("canvas").getContext("2d");
+  if (!labelMeasureCtx) return text.length * 6;
+  labelMeasureCtx.font = "10px system-ui";
+  return labelMeasureCtx.measureText(text).width;
+}
 function getGroupColor(group, groups) {
   if (!group) return GROUP_COLORS2[0];
   const idx = groups.indexOf(group);
@@ -38713,7 +38721,7 @@ function resolveColor2(color, el) {
   const resolved = getComputedStyle(el).getPropertyValue(m[1]).trim();
   return resolved || (m[2]?.trim() ?? "#888888");
 }
-var GROUP_COLORS2, GraphCanvas;
+var GROUP_COLORS2, labelMeasureCtx, GraphCanvas;
 var init_GraphCanvas = __esm({
   "components/core/molecules/GraphCanvas.tsx"() {
     "use client";
@@ -38733,6 +38741,7 @@ var init_GraphCanvas = __esm({
       "var(--color-info)",
       "var(--color-accent)"
     ];
+    labelMeasureCtx = null;
     GraphCanvas = ({
       title,
       nodes: propNodes = [],
@@ -38913,22 +38922,36 @@ var init_GraphCanvas = __esm({
               node.x = Math.max(30, Math.min(w - 30, node.x));
               node.y = Math.max(30, Math.min(h - 30, node.y));
             }
+            const LABEL_GAP = 12;
+            const LABEL_H = 12;
+            const pad = nodeSpacing / 2;
             for (let i = 0; i < nodes.length; i++) {
               for (let j = i + 1; j < nodes.length; j++) {
                 const a = nodes[i];
                 const b = nodes[j];
-                const dx = b.x - a.x;
-                const dy = b.y - a.y;
-                const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-                const minDist = (a.size || 8) + (b.size || 8) + nodeSpacing;
-                if (dist < minDist) {
-                  const push2 = (minDist - dist) / 2;
-                  const ux = dx / dist;
-                  const uy = dy / dist;
-                  a.x = Math.max(30, Math.min(w - 30, a.x - ux * push2));
-                  a.y = Math.max(30, Math.min(h - 30, a.y - uy * push2));
-                  b.x = Math.max(30, Math.min(w - 30, b.x + ux * push2));
-                  b.y = Math.max(30, Math.min(h - 30, b.y + uy * push2));
+                const ar = a.size || 8;
+                const br = b.size || 8;
+                if (showLabels) {
+                  if (a.labelW === void 0) a.labelW = a.label ? measureLabelWidth(a.label) : 0;
+                  if (b.labelW === void 0) b.labelW = b.label ? measureLabelWidth(b.label) : 0;
+                }
+                const labelBelow = showLabels ? LABEL_GAP + LABEL_H : 0;
+                const aHalfW = Math.max(ar, (a.labelW ?? 0) / 2) + pad;
+                const bHalfW = Math.max(br, (b.labelW ?? 0) / 2) + pad;
+                const aTop = a.y - ar - pad, aBot = a.y + ar + labelBelow + pad;
+                const bTop = b.y - br - pad, bBot = b.y + br + labelBelow + pad;
+                const overlapX = Math.min(a.x + aHalfW, b.x + bHalfW) - Math.max(a.x - aHalfW, b.x - bHalfW);
+                const overlapY = Math.min(aBot, bBot) - Math.max(aTop, bTop);
+                if (overlapX > 0 && overlapY > 0) {
+                  if (overlapX <= overlapY) {
+                    const push2 = overlapX / 2 * (b.x >= a.x ? 1 : -1);
+                    a.x = Math.max(30, Math.min(w - 30, a.x - push2));
+                    b.x = Math.max(30, Math.min(w - 30, b.x + push2));
+                  } else {
+                    const push2 = overlapY / 2 * (bTop + bBot >= aTop + aBot ? 1 : -1);
+                    a.y = Math.max(30, Math.min(h - 30, a.y - push2));
+                    b.y = Math.max(30, Math.min(h - 30, b.y + push2));
+                  }
                 }
               }
             }
@@ -38945,7 +38968,7 @@ var init_GraphCanvas = __esm({
         return () => {
           cancelAnimationFrame(animRef.current);
         };
-      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, logicalW, height]);
+      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, showLabels, logicalW, height]);
       React84.useEffect(() => {
         const canvas = canvasRef.current;
         if (!canvas) return;
@@ -42937,7 +42960,8 @@ function ModelLoader({
   const { model: loadedModel, isLoading, error } = useGLTFModel(url, resourceBasePath);
   const model = React84.useMemo(() => {
     if (!loadedModel) return null;
-    const cloned = loadedModel.clone();
+    const cloned = SkeletonUtils.clone(loadedModel);
+    cloned.updateMatrixWorld(true);
     cloned.traverse((child) => {
       if (child instanceof THREE3__namespace.Mesh) {
         child.castShadow = castShadow;
@@ -42952,7 +42976,8 @@ function ModelLoader({
     const size = new THREE3__namespace.Vector3();
     box.getSize(size);
     const maxDim = Math.max(size.x, size.y, size.z);
-    return maxDim > 0 && Number.isFinite(maxDim) ? 1 / maxDim : 1;
+    if (!Number.isFinite(maxDim) || maxDim < 0.05) return 1;
+    return 1 / maxDim;
   }, [model]);
   const scaleArray = React84.useMemo(() => {
     const base = typeof scale === "number" ? [scale, scale, scale] : scale;

package/dist/runtime/index.js

@@ -45,6 +45,7 @@ import * as THREE3 from 'three';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
 import { GLTFLoader as GLTFLoader$1 } from 'three/examples/jsm/loaders/GLTFLoader';
+import { clone } from 'three/examples/jsm/utils/SkeletonUtils';
 import { Canvas, useLoader, useFrame, useThree } from '@react-three/fiber';
 import { Billboard, Grid as Grid$1, OrbitControls } from '@react-three/drei';
 import { getPatternDefinition, getComponentForPattern as getComponentForPattern$1 } from '@almadar/patterns';
@@ -38655,6 +38656,13 @@ var init_DocumentViewer = __esm({
     DocumentViewer.displayName = "DocumentViewer";
   }
 });
+function measureLabelWidth(text) {
+  if (typeof document === "undefined") return text.length * 6;
+  if (!labelMeasureCtx) labelMeasureCtx = document.createElement("canvas").getContext("2d");
+  if (!labelMeasureCtx) return text.length * 6;
+  labelMeasureCtx.font = "10px system-ui";
+  return labelMeasureCtx.measureText(text).width;
+}
 function getGroupColor(group, groups) {
   if (!group) return GROUP_COLORS2[0];
   const idx = groups.indexOf(group);
@@ -38666,7 +38674,7 @@ function resolveColor2(color, el) {
   const resolved = getComputedStyle(el).getPropertyValue(m[1]).trim();
   return resolved || (m[2]?.trim() ?? "#888888");
 }
-var GROUP_COLORS2, GraphCanvas;
+var GROUP_COLORS2, labelMeasureCtx, GraphCanvas;
 var init_GraphCanvas = __esm({
   "components/core/molecules/GraphCanvas.tsx"() {
     "use client";
@@ -38686,6 +38694,7 @@ var init_GraphCanvas = __esm({
       "var(--color-info)",
       "var(--color-accent)"
     ];
+    labelMeasureCtx = null;
     GraphCanvas = ({
       title,
       nodes: propNodes = [],
@@ -38866,22 +38875,36 @@ var init_GraphCanvas = __esm({
               node.x = Math.max(30, Math.min(w - 30, node.x));
               node.y = Math.max(30, Math.min(h - 30, node.y));
             }
+            const LABEL_GAP = 12;
+            const LABEL_H = 12;
+            const pad = nodeSpacing / 2;
             for (let i = 0; i < nodes.length; i++) {
               for (let j = i + 1; j < nodes.length; j++) {
                 const a = nodes[i];
                 const b = nodes[j];
-                const dx = b.x - a.x;
-                const dy = b.y - a.y;
-                const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-                const minDist = (a.size || 8) + (b.size || 8) + nodeSpacing;
-                if (dist < minDist) {
-                  const push2 = (minDist - dist) / 2;
-                  const ux = dx / dist;
-                  const uy = dy / dist;
-                  a.x = Math.max(30, Math.min(w - 30, a.x - ux * push2));
-                  a.y = Math.max(30, Math.min(h - 30, a.y - uy * push2));
-                  b.x = Math.max(30, Math.min(w - 30, b.x + ux * push2));
-                  b.y = Math.max(30, Math.min(h - 30, b.y + uy * push2));
+                const ar = a.size || 8;
+                const br = b.size || 8;
+                if (showLabels) {
+                  if (a.labelW === void 0) a.labelW = a.label ? measureLabelWidth(a.label) : 0;
+                  if (b.labelW === void 0) b.labelW = b.label ? measureLabelWidth(b.label) : 0;
+                }
+                const labelBelow = showLabels ? LABEL_GAP + LABEL_H : 0;
+                const aHalfW = Math.max(ar, (a.labelW ?? 0) / 2) + pad;
+                const bHalfW = Math.max(br, (b.labelW ?? 0) / 2) + pad;
+                const aTop = a.y - ar - pad, aBot = a.y + ar + labelBelow + pad;
+                const bTop = b.y - br - pad, bBot = b.y + br + labelBelow + pad;
+                const overlapX = Math.min(a.x + aHalfW, b.x + bHalfW) - Math.max(a.x - aHalfW, b.x - bHalfW);
+                const overlapY = Math.min(aBot, bBot) - Math.max(aTop, bTop);
+                if (overlapX > 0 && overlapY > 0) {
+                  if (overlapX <= overlapY) {
+                    const push2 = overlapX / 2 * (b.x >= a.x ? 1 : -1);
+                    a.x = Math.max(30, Math.min(w - 30, a.x - push2));
+                    b.x = Math.max(30, Math.min(w - 30, b.x + push2));
+                  } else {
+                    const push2 = overlapY / 2 * (bTop + bBot >= aTop + aBot ? 1 : -1);
+                    a.y = Math.max(30, Math.min(h - 30, a.y - push2));
+                    b.y = Math.max(30, Math.min(h - 30, b.y + push2));
+                  }
                 }
               }
             }
@@ -38898,7 +38921,7 @@ var init_GraphCanvas = __esm({
         return () => {
           cancelAnimationFrame(animRef.current);
         };
-      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, logicalW, height]);
+      }, [propNodes, propEdges, layout, repulsion, linkDistance, nodeSpacing, showLabels, logicalW, height]);
       useEffect(() => {
         const canvas = canvasRef.current;
         if (!canvas) return;
@@ -42890,7 +42913,8 @@ function ModelLoader({
   const { model: loadedModel, isLoading, error } = useGLTFModel(url, resourceBasePath);
   const model = useMemo(() => {
     if (!loadedModel) return null;
-    const cloned = loadedModel.clone();
+    const cloned = clone(loadedModel);
+    cloned.updateMatrixWorld(true);
     cloned.traverse((child) => {
       if (child instanceof THREE3.Mesh) {
         child.castShadow = castShadow;
@@ -42905,7 +42929,8 @@ function ModelLoader({
     const size = new THREE3.Vector3();
     box.getSize(size);
     const maxDim = Math.max(size.x, size.y, size.z);
-    return maxDim > 0 && Number.isFinite(maxDim) ? 1 / maxDim : 1;
+    if (!Number.isFinite(maxDim) || maxDim < 0.05) return 1;
+    return 1 / maxDim;
   }, [model]);
   const scaleArray = useMemo(() => {
     const base = typeof scale === "number" ? [scale, scale, scale] : scale;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "5.63.1",
+  "version": "5.64.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [