@almadar/ui 5.59.0 → 5.60.0

package/dist/avl/index.cjs

@@ -40169,6 +40169,12 @@ function getGroupColor(group, groups) {
   const idx = groups.indexOf(group);
   return GROUP_COLORS2[idx % GROUP_COLORS2.length];
 }
+function resolveColor2(color, el) {
+  const m = /^var\((--[^,)]+)(?:,\s*([^)]+))?\)$/.exec(color.trim());
+  if (!m) return color;
+  const resolved = getComputedStyle(el).getPropertyValue(m[1]).trim();
+  return resolved || (m[2]?.trim() ?? "#888888");
+}
 var GROUP_COLORS2, GraphCanvas;
 var init_GraphCanvas = __esm({
   "components/core/molecules/GraphCanvas.tsx"() {
@@ -40229,8 +40235,10 @@ var init_GraphCanvas = __esm({
           const canvas = canvasRef.current;
           if (!canvas) return null;
           const rect = canvas.getBoundingClientRect();
-          const screenX = e.clientX - rect.left;
-          const screenY = e.clientY - rect.top;
+          const scaleX = rect.width > 0 ? canvas.width / rect.width : 1;
+          const scaleY = rect.height > 0 ? canvas.height / rect.height : 1;
+          const screenX = (e.clientX - rect.left) * scaleX;
+          const screenY = (e.clientY - rect.top) * scaleY;
           return {
             screenX,
             screenY,
@@ -40370,6 +40378,7 @@ var init_GraphCanvas = __esm({
         const w = canvas.width;
         const h = canvas.height;
         const nodes = nodesRef.current;
+        const accentColor = resolveColor2("var(--color-accent)", canvas);
         ctx.clearRect(0, 0, w, h);
         ctx.save();
         ctx.translate(offset.x, offset.y);
@@ -40395,7 +40404,7 @@ var init_GraphCanvas = __esm({
         }
         for (const node of nodes) {
           const size = node.size || 8;
-          const color = node.color || getGroupColor(node.group, groups);
+          const color = resolveColor2(node.color || getGroupColor(node.group, groups), canvas);
           const isHovered = hoveredNode === node.id;
           const isSelected = selectedNodeId !== void 0 && node.id === selectedNodeId;
           const radius = isSelected ? size + 4 : isHovered ? size + 2 : size;
@@ -40404,7 +40413,7 @@ var init_GraphCanvas = __esm({
           ctx.fillStyle = color;
           ctx.fill();
           if (isSelected) {
-            ctx.strokeStyle = "var(--color-accent)";
+            ctx.strokeStyle = accentColor;
             ctx.lineWidth = 3;
           } else {
             ctx.strokeStyle = isHovered ? "#ffffff" : "#00000020";

package/dist/avl/index.js

@@ -40122,6 +40122,12 @@ function getGroupColor(group, groups) {
   const idx = groups.indexOf(group);
   return GROUP_COLORS2[idx % GROUP_COLORS2.length];
 }
+function resolveColor2(color, el) {
+  const m = /^var\((--[^,)]+)(?:,\s*([^)]+))?\)$/.exec(color.trim());
+  if (!m) return color;
+  const resolved = getComputedStyle(el).getPropertyValue(m[1]).trim();
+  return resolved || (m[2]?.trim() ?? "#888888");
+}
 var GROUP_COLORS2, GraphCanvas;
 var init_GraphCanvas = __esm({
   "components/core/molecules/GraphCanvas.tsx"() {
@@ -40182,8 +40188,10 @@ var init_GraphCanvas = __esm({
           const canvas = canvasRef.current;
           if (!canvas) return null;
           const rect = canvas.getBoundingClientRect();
-          const screenX = e.clientX - rect.left;
-          const screenY = e.clientY - rect.top;
+          const scaleX = rect.width > 0 ? canvas.width / rect.width : 1;
+          const scaleY = rect.height > 0 ? canvas.height / rect.height : 1;
+          const screenX = (e.clientX - rect.left) * scaleX;
+          const screenY = (e.clientY - rect.top) * scaleY;
           return {
             screenX,
             screenY,
@@ -40323,6 +40331,7 @@ var init_GraphCanvas = __esm({
         const w = canvas.width;
         const h = canvas.height;
         const nodes = nodesRef.current;
+        const accentColor = resolveColor2("var(--color-accent)", canvas);
         ctx.clearRect(0, 0, w, h);
         ctx.save();
         ctx.translate(offset.x, offset.y);
@@ -40348,7 +40357,7 @@ var init_GraphCanvas = __esm({
         }
         for (const node of nodes) {
           const size = node.size || 8;
-          const color = node.color || getGroupColor(node.group, groups);
+          const color = resolveColor2(node.color || getGroupColor(node.group, groups), canvas);
           const isHovered = hoveredNode === node.id;
           const isSelected = selectedNodeId !== void 0 && node.id === selectedNodeId;
           const radius = isSelected ? size + 4 : isHovered ? size + 2 : size;
@@ -40357,7 +40366,7 @@ var init_GraphCanvas = __esm({
           ctx.fillStyle = color;
           ctx.fill();
           if (isSelected) {
-            ctx.strokeStyle = "var(--color-accent)";
+            ctx.strokeStyle = accentColor;
             ctx.lineWidth = 3;
           } else {
             ctx.strokeStyle = isHovered ? "#ffffff" : "#00000020";

package/dist/components/index.cjs

@@ -38389,6 +38389,12 @@ function getGroupColor(group, groups) {
   const idx = groups.indexOf(group);
   return GROUP_COLORS2[idx % GROUP_COLORS2.length];
 }
+function resolveColor2(color, el) {
+  const m = /^var\((--[^,)]+)(?:,\s*([^)]+))?\)$/.exec(color.trim());
+  if (!m) return color;
+  const resolved = getComputedStyle(el).getPropertyValue(m[1]).trim();
+  return resolved || (m[2]?.trim() ?? "#888888");
+}
 var GROUP_COLORS2; exports.GraphCanvas = void 0;
 var init_GraphCanvas = __esm({
   "components/core/molecules/GraphCanvas.tsx"() {
@@ -38449,8 +38455,10 @@ var init_GraphCanvas = __esm({
           const canvas = canvasRef.current;
           if (!canvas) return null;
           const rect = canvas.getBoundingClientRect();
-          const screenX = e.clientX - rect.left;
-          const screenY = e.clientY - rect.top;
+          const scaleX = rect.width > 0 ? canvas.width / rect.width : 1;
+          const scaleY = rect.height > 0 ? canvas.height / rect.height : 1;
+          const screenX = (e.clientX - rect.left) * scaleX;
+          const screenY = (e.clientY - rect.top) * scaleY;
           return {
             screenX,
             screenY,
@@ -38590,6 +38598,7 @@ var init_GraphCanvas = __esm({
         const w = canvas.width;
         const h = canvas.height;
         const nodes = nodesRef.current;
+        const accentColor = resolveColor2("var(--color-accent)", canvas);
         ctx.clearRect(0, 0, w, h);
         ctx.save();
         ctx.translate(offset.x, offset.y);
@@ -38615,7 +38624,7 @@ var init_GraphCanvas = __esm({
         }
         for (const node of nodes) {
           const size = node.size || 8;
-          const color = node.color || getGroupColor(node.group, groups);
+          const color = resolveColor2(node.color || getGroupColor(node.group, groups), canvas);
           const isHovered = hoveredNode === node.id;
           const isSelected = selectedNodeId !== void 0 && node.id === selectedNodeId;
           const radius = isSelected ? size + 4 : isHovered ? size + 2 : size;
@@ -38624,7 +38633,7 @@ var init_GraphCanvas = __esm({
           ctx.fillStyle = color;
           ctx.fill();
           if (isSelected) {
-            ctx.strokeStyle = "var(--color-accent)";
+            ctx.strokeStyle = accentColor;
             ctx.lineWidth = 3;
           } else {
             ctx.strokeStyle = isHovered ? "#ffffff" : "#00000020";

package/dist/components/index.js

@@ -38343,6 +38343,12 @@ function getGroupColor(group, groups) {
   const idx = groups.indexOf(group);
   return GROUP_COLORS2[idx % GROUP_COLORS2.length];
 }
+function resolveColor2(color, el) {
+  const m = /^var\((--[^,)]+)(?:,\s*([^)]+))?\)$/.exec(color.trim());
+  if (!m) return color;
+  const resolved = getComputedStyle(el).getPropertyValue(m[1]).trim();
+  return resolved || (m[2]?.trim() ?? "#888888");
+}
 var GROUP_COLORS2, GraphCanvas;
 var init_GraphCanvas = __esm({
   "components/core/molecules/GraphCanvas.tsx"() {
@@ -38403,8 +38409,10 @@ var init_GraphCanvas = __esm({
           const canvas = canvasRef.current;
           if (!canvas) return null;
           const rect = canvas.getBoundingClientRect();
-          const screenX = e.clientX - rect.left;
-          const screenY = e.clientY - rect.top;
+          const scaleX = rect.width > 0 ? canvas.width / rect.width : 1;
+          const scaleY = rect.height > 0 ? canvas.height / rect.height : 1;
+          const screenX = (e.clientX - rect.left) * scaleX;
+          const screenY = (e.clientY - rect.top) * scaleY;
           return {
             screenX,
             screenY,
@@ -38544,6 +38552,7 @@ var init_GraphCanvas = __esm({
         const w = canvas.width;
         const h = canvas.height;
         const nodes = nodesRef.current;
+        const accentColor = resolveColor2("var(--color-accent)", canvas);
         ctx.clearRect(0, 0, w, h);
         ctx.save();
         ctx.translate(offset.x, offset.y);
@@ -38569,7 +38578,7 @@ var init_GraphCanvas = __esm({
         }
         for (const node of nodes) {
           const size = node.size || 8;
-          const color = node.color || getGroupColor(node.group, groups);
+          const color = resolveColor2(node.color || getGroupColor(node.group, groups), canvas);
           const isHovered = hoveredNode === node.id;
           const isSelected = selectedNodeId !== void 0 && node.id === selectedNodeId;
           const radius = isSelected ? size + 4 : isHovered ? size + 2 : size;
@@ -38578,7 +38587,7 @@ var init_GraphCanvas = __esm({
           ctx.fillStyle = color;
           ctx.fill();
           if (isSelected) {
-            ctx.strokeStyle = "var(--color-accent)";
+            ctx.strokeStyle = accentColor;
             ctx.lineWidth = 3;
           } else {
             ctx.strokeStyle = isHovered ? "#ffffff" : "#00000020";

package/dist/providers/index.cjs

@@ -37970,6 +37970,12 @@ function getGroupColor(group, groups) {
   const idx = groups.indexOf(group);
   return GROUP_COLORS2[idx % GROUP_COLORS2.length];
 }
+function resolveColor2(color, el) {
+  const m = /^var\((--[^,)]+)(?:,\s*([^)]+))?\)$/.exec(color.trim());
+  if (!m) return color;
+  const resolved = getComputedStyle(el).getPropertyValue(m[1]).trim();
+  return resolved || (m[2]?.trim() ?? "#888888");
+}
 var GROUP_COLORS2, GraphCanvas;
 var init_GraphCanvas = __esm({
   "components/core/molecules/GraphCanvas.tsx"() {
@@ -38030,8 +38036,10 @@ var init_GraphCanvas = __esm({
           const canvas = canvasRef.current;
           if (!canvas) return null;
           const rect = canvas.getBoundingClientRect();
-          const screenX = e.clientX - rect.left;
-          const screenY = e.clientY - rect.top;
+          const scaleX = rect.width > 0 ? canvas.width / rect.width : 1;
+          const scaleY = rect.height > 0 ? canvas.height / rect.height : 1;
+          const screenX = (e.clientX - rect.left) * scaleX;
+          const screenY = (e.clientY - rect.top) * scaleY;
           return {
             screenX,
             screenY,
@@ -38171,6 +38179,7 @@ var init_GraphCanvas = __esm({
         const w = canvas.width;
         const h = canvas.height;
         const nodes = nodesRef.current;
+        const accentColor = resolveColor2("var(--color-accent)", canvas);
         ctx.clearRect(0, 0, w, h);
         ctx.save();
         ctx.translate(offset.x, offset.y);
@@ -38196,7 +38205,7 @@ var init_GraphCanvas = __esm({
         }
         for (const node of nodes) {
           const size = node.size || 8;
-          const color = node.color || getGroupColor(node.group, groups);
+          const color = resolveColor2(node.color || getGroupColor(node.group, groups), canvas);
           const isHovered = hoveredNode === node.id;
           const isSelected = selectedNodeId !== void 0 && node.id === selectedNodeId;
           const radius = isSelected ? size + 4 : isHovered ? size + 2 : size;
@@ -38205,7 +38214,7 @@ var init_GraphCanvas = __esm({
           ctx.fillStyle = color;
           ctx.fill();
           if (isSelected) {
-            ctx.strokeStyle = "var(--color-accent)";
+            ctx.strokeStyle = accentColor;
             ctx.lineWidth = 3;
           } else {
             ctx.strokeStyle = isHovered ? "#ffffff" : "#00000020";

package/dist/providers/index.js

@@ -37923,6 +37923,12 @@ function getGroupColor(group, groups) {
   const idx = groups.indexOf(group);
   return GROUP_COLORS2[idx % GROUP_COLORS2.length];
 }
+function resolveColor2(color, el) {
+  const m = /^var\((--[^,)]+)(?:,\s*([^)]+))?\)$/.exec(color.trim());
+  if (!m) return color;
+  const resolved = getComputedStyle(el).getPropertyValue(m[1]).trim();
+  return resolved || (m[2]?.trim() ?? "#888888");
+}
 var GROUP_COLORS2, GraphCanvas;
 var init_GraphCanvas = __esm({
   "components/core/molecules/GraphCanvas.tsx"() {
@@ -37983,8 +37989,10 @@ var init_GraphCanvas = __esm({
           const canvas = canvasRef.current;
           if (!canvas) return null;
           const rect = canvas.getBoundingClientRect();
-          const screenX = e.clientX - rect.left;
-          const screenY = e.clientY - rect.top;
+          const scaleX = rect.width > 0 ? canvas.width / rect.width : 1;
+          const scaleY = rect.height > 0 ? canvas.height / rect.height : 1;
+          const screenX = (e.clientX - rect.left) * scaleX;
+          const screenY = (e.clientY - rect.top) * scaleY;
           return {
             screenX,
             screenY,
@@ -38124,6 +38132,7 @@ var init_GraphCanvas = __esm({
         const w = canvas.width;
         const h = canvas.height;
         const nodes = nodesRef.current;
+        const accentColor = resolveColor2("var(--color-accent)", canvas);
         ctx.clearRect(0, 0, w, h);
         ctx.save();
         ctx.translate(offset.x, offset.y);
@@ -38149,7 +38158,7 @@ var init_GraphCanvas = __esm({
         }
         for (const node of nodes) {
           const size = node.size || 8;
-          const color = node.color || getGroupColor(node.group, groups);
+          const color = resolveColor2(node.color || getGroupColor(node.group, groups), canvas);
           const isHovered = hoveredNode === node.id;
           const isSelected = selectedNodeId !== void 0 && node.id === selectedNodeId;
           const radius = isSelected ? size + 4 : isHovered ? size + 2 : size;
@@ -38158,7 +38167,7 @@ var init_GraphCanvas = __esm({
           ctx.fillStyle = color;
           ctx.fill();
           if (isSelected) {
-            ctx.strokeStyle = "var(--color-accent)";
+            ctx.strokeStyle = accentColor;
             ctx.lineWidth = 3;
           } else {
             ctx.strokeStyle = isHovered ? "#ffffff" : "#00000020";

package/dist/runtime/index.cjs

@@ -37668,6 +37668,12 @@ function getGroupColor(group, groups) {
   const idx = groups.indexOf(group);
   return GROUP_COLORS2[idx % GROUP_COLORS2.length];
 }
+function resolveColor2(color, el) {
+  const m = /^var\((--[^,)]+)(?:,\s*([^)]+))?\)$/.exec(color.trim());
+  if (!m) return color;
+  const resolved = getComputedStyle(el).getPropertyValue(m[1]).trim();
+  return resolved || (m[2]?.trim() ?? "#888888");
+}
 var GROUP_COLORS2, GraphCanvas;
 var init_GraphCanvas = __esm({
   "components/core/molecules/GraphCanvas.tsx"() {
@@ -37728,8 +37734,10 @@ var init_GraphCanvas = __esm({
           const canvas = canvasRef.current;
           if (!canvas) return null;
           const rect = canvas.getBoundingClientRect();
-          const screenX = e.clientX - rect.left;
-          const screenY = e.clientY - rect.top;
+          const scaleX = rect.width > 0 ? canvas.width / rect.width : 1;
+          const scaleY = rect.height > 0 ? canvas.height / rect.height : 1;
+          const screenX = (e.clientX - rect.left) * scaleX;
+          const screenY = (e.clientY - rect.top) * scaleY;
           return {
             screenX,
             screenY,
@@ -37869,6 +37877,7 @@ var init_GraphCanvas = __esm({
         const w = canvas.width;
         const h = canvas.height;
         const nodes = nodesRef.current;
+        const accentColor = resolveColor2("var(--color-accent)", canvas);
         ctx.clearRect(0, 0, w, h);
         ctx.save();
         ctx.translate(offset.x, offset.y);
@@ -37894,7 +37903,7 @@ var init_GraphCanvas = __esm({
         }
         for (const node of nodes) {
           const size = node.size || 8;
-          const color = node.color || getGroupColor(node.group, groups);
+          const color = resolveColor2(node.color || getGroupColor(node.group, groups), canvas);
           const isHovered = hoveredNode === node.id;
           const isSelected = selectedNodeId !== void 0 && node.id === selectedNodeId;
           const radius = isSelected ? size + 4 : isHovered ? size + 2 : size;
@@ -37903,7 +37912,7 @@ var init_GraphCanvas = __esm({
           ctx.fillStyle = color;
           ctx.fill();
           if (isSelected) {
-            ctx.strokeStyle = "var(--color-accent)";
+            ctx.strokeStyle = accentColor;
             ctx.lineWidth = 3;
           } else {
             ctx.strokeStyle = isHovered ? "#ffffff" : "#00000020";

package/dist/runtime/index.js

@@ -37621,6 +37621,12 @@ function getGroupColor(group, groups) {
   const idx = groups.indexOf(group);
   return GROUP_COLORS2[idx % GROUP_COLORS2.length];
 }
+function resolveColor2(color, el) {
+  const m = /^var\((--[^,)]+)(?:,\s*([^)]+))?\)$/.exec(color.trim());
+  if (!m) return color;
+  const resolved = getComputedStyle(el).getPropertyValue(m[1]).trim();
+  return resolved || (m[2]?.trim() ?? "#888888");
+}
 var GROUP_COLORS2, GraphCanvas;
 var init_GraphCanvas = __esm({
   "components/core/molecules/GraphCanvas.tsx"() {
@@ -37681,8 +37687,10 @@ var init_GraphCanvas = __esm({
           const canvas = canvasRef.current;
           if (!canvas) return null;
           const rect = canvas.getBoundingClientRect();
-          const screenX = e.clientX - rect.left;
-          const screenY = e.clientY - rect.top;
+          const scaleX = rect.width > 0 ? canvas.width / rect.width : 1;
+          const scaleY = rect.height > 0 ? canvas.height / rect.height : 1;
+          const screenX = (e.clientX - rect.left) * scaleX;
+          const screenY = (e.clientY - rect.top) * scaleY;
           return {
             screenX,
             screenY,
@@ -37822,6 +37830,7 @@ var init_GraphCanvas = __esm({
         const w = canvas.width;
         const h = canvas.height;
         const nodes = nodesRef.current;
+        const accentColor = resolveColor2("var(--color-accent)", canvas);
         ctx.clearRect(0, 0, w, h);
         ctx.save();
         ctx.translate(offset.x, offset.y);
@@ -37847,7 +37856,7 @@ var init_GraphCanvas = __esm({
         }
         for (const node of nodes) {
           const size = node.size || 8;
-          const color = node.color || getGroupColor(node.group, groups);
+          const color = resolveColor2(node.color || getGroupColor(node.group, groups), canvas);
           const isHovered = hoveredNode === node.id;
           const isSelected = selectedNodeId !== void 0 && node.id === selectedNodeId;
           const radius = isSelected ? size + 4 : isHovered ? size + 2 : size;
@@ -37856,7 +37865,7 @@ var init_GraphCanvas = __esm({
           ctx.fillStyle = color;
           ctx.fill();
           if (isSelected) {
-            ctx.strokeStyle = "var(--color-accent)";
+            ctx.strokeStyle = accentColor;
             ctx.lineWidth = 3;
           } else {
             ctx.strokeStyle = isHovered ? "#ffffff" : "#00000020";

package/package.json

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