@almadar/ui 5.59.0 → 5.61.0

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

@@ -2718,24 +2718,28 @@ var GameCanvas3D = React11.forwardRef(
     const cameraConfig = React11.useMemo(() => {
       const size = Math.max(
         gridBounds.maxX - gridBounds.minX,
-        gridBounds.maxZ - gridBounds.minZ
+        gridBounds.maxZ - gridBounds.minZ,
+        4
+        // minimum framing distance so a tiny board isn't zoomed in
       );
-      const distance = size * 1.5;
+      const cx = (gridBounds.minX + gridBounds.maxX) / 2;
+      const cz = (gridBounds.minZ + gridBounds.maxZ) / 2;
+      const d = size * 1.5;
       switch (cameraMode) {
         case "isometric":
           return {
-            position: [distance, distance * 0.8, distance],
+            position: [cx + d, d * 0.8, cz + d],
             fov: 45
           };
         case "top-down":
           return {
-            position: [0, distance * 2, 0],
+            position: [cx, d * 2, cz],
             fov: 45
           };
         case "perspective":
         default:
           return {
-            position: [distance, distance, distance],
+            position: [cx + d, d, cz + d],
             fov: 45
           };
       }
@@ -2974,7 +2978,8 @@ var GameCanvas3D = React11.forwardRef(
           "div",
           {
             ref: containerRef,
-            className: cn("game-canvas-3d relative w-full h-full min-h-[85vh] overflow-hidden", className),
+            className: cn("game-canvas-3d relative w-full overflow-hidden", className),
+            style: { minHeight: "85vh" },
             "data-orientation": orientation,
             "data-camera-mode": cameraMode,
             "data-overlay": overlay,
@@ -2989,7 +2994,7 @@ var GameCanvas3D = React11.forwardRef(
                     near: 0.1,
                     far: 1e3
                   },
-                  style: { background: backgroundColor },
+                  style: { background: backgroundColor, height: "85vh", width: "100%" },
                   onClick: (e) => {
                     if (e.target === e.currentTarget) {
                       eventHandlers.handleCanvasClick(e);

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

@@ -2694,24 +2694,28 @@ var GameCanvas3D = forwardRef(
     const cameraConfig = useMemo(() => {
       const size = Math.max(
         gridBounds.maxX - gridBounds.minX,
-        gridBounds.maxZ - gridBounds.minZ
+        gridBounds.maxZ - gridBounds.minZ,
+        4
+        // minimum framing distance so a tiny board isn't zoomed in
       );
-      const distance = size * 1.5;
+      const cx = (gridBounds.minX + gridBounds.maxX) / 2;
+      const cz = (gridBounds.minZ + gridBounds.maxZ) / 2;
+      const d = size * 1.5;
       switch (cameraMode) {
         case "isometric":
           return {
-            position: [distance, distance * 0.8, distance],
+            position: [cx + d, d * 0.8, cz + d],
             fov: 45
           };
         case "top-down":
           return {
-            position: [0, distance * 2, 0],
+            position: [cx, d * 2, cz],
             fov: 45
           };
         case "perspective":
         default:
           return {
-            position: [distance, distance, distance],
+            position: [cx + d, d, cz + d],
             fov: 45
           };
       }
@@ -2950,7 +2954,8 @@ var GameCanvas3D = forwardRef(
           "div",
           {
             ref: containerRef,
-            className: cn("game-canvas-3d relative w-full h-full min-h-[85vh] overflow-hidden", className),
+            className: cn("game-canvas-3d relative w-full overflow-hidden", className),
+            style: { minHeight: "85vh" },
             "data-orientation": orientation,
             "data-camera-mode": cameraMode,
             "data-overlay": overlay,
@@ -2965,7 +2970,7 @@ var GameCanvas3D = forwardRef(
                     near: 0.1,
                     far: 1e3
                   },
-                  style: { background: backgroundColor },
+                  style: { background: backgroundColor, height: "85vh", width: "100%" },
                   onClick: (e) => {
                     if (e.target === e.currentTarget) {
                       eventHandlers.handleCanvasClick(e);

package/dist/components/index.cjs

@@ -7186,9 +7186,6 @@ var init_Skeleton = __esm({
     Skeleton.displayName = "Skeleton";
   }
 });
-function isKnownPattern(type) {
-  return type in componentMapping;
-}
 function getKnownPatterns() {
   return Object.keys(componentMapping);
 }
@@ -7284,7 +7281,6 @@ var init_slot_definitions = __esm({
 // renderer/index.ts
 var init_renderer = __esm({
   "renderer/index.ts"() {
-    init_pattern_resolver();
     init_slot_definitions();
   }
 });
@@ -38389,6 +38385,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"() {
@@ -38418,6 +38420,7 @@ var init_GraphCanvas = __esm({
       draggable = true,
       actions,
       onNodeClick,
+      onNodeDoubleClick,
       nodeClickEvent,
       selectedNodeId,
       repulsion = 800,
@@ -38437,6 +38440,19 @@ var init_GraphCanvas = __esm({
       const [hoveredNode, setHoveredNode] = React76.useState(null);
       const nodesRef = React76.useRef([]);
       const [, forceUpdate] = React76.useState(0);
+      const [logicalW, setLogicalW] = React76.useState(800);
+      React76.useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas || typeof ResizeObserver === "undefined") return;
+        const measure = () => {
+          const width = Math.round(canvas.clientWidth);
+          if (width > 0) setLogicalW(width);
+        };
+        measure();
+        const ro = new ResizeObserver(measure);
+        ro.observe(canvas);
+        return () => ro.disconnect();
+      }, []);
       const interactionRef = React76.useRef({
         mode: "none",
         dragNodeId: null,
@@ -38490,8 +38506,8 @@ var init_GraphCanvas = __esm({
       React76.useEffect(() => {
         const canvas = canvasRef.current;
         if (!canvas || propNodes.length === 0) return;
-        const w = canvas.width;
-        const h = canvas.height;
+        const w = logicalW;
+        const h = height;
         const simNodes = propNodes.map((n, idx) => {
           let x = n.x ?? 0;
           let y = n.y ?? 0;
@@ -38581,28 +38597,41 @@ var init_GraphCanvas = __esm({
         return () => {
           cancelAnimationFrame(animRef.current);
         };
-      }, [propNodes, propEdges, layout, repulsion, linkDistance]);
+      }, [propNodes, propEdges, layout, repulsion, linkDistance, logicalW, height]);
       React76.useEffect(() => {
         const canvas = canvasRef.current;
         if (!canvas) return;
         const ctx = canvas.getContext("2d");
         if (!ctx) return;
-        const w = canvas.width;
-        const h = canvas.height;
+        const w = logicalW;
+        const h = height;
         const nodes = nodesRef.current;
+        const accentColor = resolveColor2("var(--color-accent)", canvas);
+        const dpr = typeof window !== "undefined" && window.devicePixelRatio || 1;
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
         ctx.clearRect(0, 0, w, h);
         ctx.save();
         ctx.translate(offset.x, offset.y);
         ctx.scale(zoom, zoom);
+        const neighbors = /* @__PURE__ */ new Set();
+        if (hoveredNode) {
+          neighbors.add(hoveredNode);
+          for (const edge of propEdges) {
+            if (edge.source === hoveredNode) neighbors.add(String(edge.target));
+            else if (edge.target === hoveredNode) neighbors.add(String(edge.source));
+          }
+        }
         for (const edge of propEdges) {
           const source = nodes.find((n) => n.id === edge.source);
           const target = nodes.find((n) => n.id === edge.target);
           if (!source || !target) continue;
+          const incident = !!hoveredNode && (edge.source === hoveredNode || edge.target === hoveredNode);
+          ctx.globalAlpha = hoveredNode ? incident ? 1 : 0.12 : 1;
           ctx.beginPath();
           ctx.moveTo(source.x, source.y);
           ctx.lineTo(target.x, target.y);
-          ctx.strokeStyle = edge.color || "#88888866";
-          ctx.lineWidth = edge.weight ? Math.max(1, edge.weight) : 1;
+          ctx.strokeStyle = incident ? accentColor : edge.color || "#88888866";
+          ctx.lineWidth = incident ? 2 : edge.weight ? Math.max(1, edge.weight) : 1;
           ctx.stroke();
           if (edge.label && showLabels) {
             const mx = (source.x + target.x) / 2;
@@ -38613,18 +38642,20 @@ var init_GraphCanvas = __esm({
             ctx.fillText(edge.label, mx, my - 4);
           }
         }
+        ctx.globalAlpha = 1;
         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;
+          ctx.globalAlpha = hoveredNode && !neighbors.has(node.id) ? 0.2 : 1;
           const radius = isSelected ? size + 4 : isHovered ? size + 2 : size;
           ctx.beginPath();
           ctx.arc(node.x, node.y, radius, 0, Math.PI * 2);
           ctx.fillStyle = color;
           ctx.fill();
           if (isSelected) {
-            ctx.strokeStyle = "var(--color-accent)";
+            ctx.strokeStyle = accentColor;
             ctx.lineWidth = 3;
           } else {
             ctx.strokeStyle = isHovered ? "#ffffff" : "#00000020";
@@ -38737,6 +38768,15 @@ var init_GraphCanvas = __esm({
         interactionRef.current.dragNodeId = null;
         setHoveredNode(null);
       }, []);
+      const handleDoubleClick = React76.useCallback(
+        (e) => {
+          const coords = toCoords(e);
+          if (!coords) return;
+          const node = nodeAt(coords.graphX, coords.graphY);
+          if (node) onNodeDoubleClick?.(node);
+        },
+        [toCoords, nodeAt, onNodeDoubleClick]
+      );
       if (isLoading) {
         return /* @__PURE__ */ jsxRuntime.jsx(exports.LoadingState, { message: t("common.loading"), className });
       }
@@ -38794,15 +38834,16 @@ var init_GraphCanvas = __esm({
           "canvas",
           {
             ref: canvasRef,
-            width: 800,
-            height,
+            width: Math.round(logicalW * (typeof window !== "undefined" && window.devicePixelRatio || 1)),
+            height: Math.round(height * (typeof window !== "undefined" && window.devicePixelRatio || 1)),
             className: "w-full cursor-grab active:cursor-grabbing",
             style: { height },
             onWheel: handleWheel,
             onMouseDown: handleMouseDown,
             onMouseMove: handleMouseMove,
             onMouseUp: handleMouseUp,
-            onMouseLeave: handleMouseLeave
+            onMouseLeave: handleMouseLeave,
+            onDoubleClick: handleDoubleClick
           }
         ) }),
         groups.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(exports.HStack, { gap: "md", className: "px-4 py-2 border-t border-border", wrap: true, children: groups.map((group, idx) => /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { gap: "xs", align: "center", children: [
@@ -43217,24 +43258,28 @@ var init_GameCanvas3D2 = __esm({
         const cameraConfig = React76.useMemo(() => {
           const size = Math.max(
             gridBounds.maxX - gridBounds.minX,
-            gridBounds.maxZ - gridBounds.minZ
+            gridBounds.maxZ - gridBounds.minZ,
+            4
+            // minimum framing distance so a tiny board isn't zoomed in
           );
-          const distance = size * 1.5;
+          const cx = (gridBounds.minX + gridBounds.maxX) / 2;
+          const cz = (gridBounds.minZ + gridBounds.maxZ) / 2;
+          const d = size * 1.5;
           switch (cameraMode) {
             case "isometric":
               return {
-                position: [distance, distance * 0.8, distance],
+                position: [cx + d, d * 0.8, cz + d],
                 fov: 45
               };
             case "top-down":
               return {
-                position: [0, distance * 2, 0],
+                position: [cx, d * 2, cz],
                 fov: 45
               };
             case "perspective":
             default:
               return {
-                position: [distance, distance, distance],
+                position: [cx + d, d, cz + d],
                 fov: 45
               };
           }
@@ -43473,7 +43518,8 @@ var init_GameCanvas3D2 = __esm({
               "div",
               {
                 ref: containerRef,
-                className: cn("game-canvas-3d relative w-full h-full min-h-[85vh] overflow-hidden", className),
+                className: cn("game-canvas-3d relative w-full overflow-hidden", className),
+                style: { minHeight: "85vh" },
                 "data-orientation": orientation,
                 "data-camera-mode": cameraMode,
                 "data-overlay": overlay,
@@ -43488,7 +43534,7 @@ var init_GameCanvas3D2 = __esm({
                         near: 0.1,
                         far: 1e3
                       },
-                      style: { background: backgroundColor },
+                      style: { background: backgroundColor, height: "85vh", width: "100%" },
                       onClick: (e) => {
                         if (e.target === e.currentTarget) {
                           eventHandlers.handleCanvasClick(e);
@@ -52851,7 +52897,7 @@ function isPatternConfig(value) {
   if (value instanceof Date) return false;
   if (typeof value === "function") return false;
   const record = value;
-  return "type" in record && typeof record.type === "string" && isKnownPattern(record.type);
+  return "type" in record && typeof record.type === "string" && patterns.getComponentForPattern(record.type) !== null;
 }
 function isPlainConfigObject(value) {
   if (React76__namespace.default.isValidElement(value)) return false;

package/dist/components/index.js

@@ -7140,9 +7140,6 @@ var init_Skeleton = __esm({
     Skeleton.displayName = "Skeleton";
   }
 });
-function isKnownPattern(type) {
-  return type in componentMapping;
-}
 function getKnownPatterns() {
   return Object.keys(componentMapping);
 }
@@ -7238,7 +7235,6 @@ var init_slot_definitions = __esm({
 // renderer/index.ts
 var init_renderer = __esm({
   "renderer/index.ts"() {
-    init_pattern_resolver();
     init_slot_definitions();
   }
 });
@@ -38343,6 +38339,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"() {
@@ -38372,6 +38374,7 @@ var init_GraphCanvas = __esm({
       draggable = true,
       actions,
       onNodeClick,
+      onNodeDoubleClick,
       nodeClickEvent,
       selectedNodeId,
       repulsion = 800,
@@ -38391,6 +38394,19 @@ var init_GraphCanvas = __esm({
       const [hoveredNode, setHoveredNode] = useState(null);
       const nodesRef = useRef([]);
       const [, forceUpdate] = useState(0);
+      const [logicalW, setLogicalW] = useState(800);
+      useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas || typeof ResizeObserver === "undefined") return;
+        const measure = () => {
+          const width = Math.round(canvas.clientWidth);
+          if (width > 0) setLogicalW(width);
+        };
+        measure();
+        const ro = new ResizeObserver(measure);
+        ro.observe(canvas);
+        return () => ro.disconnect();
+      }, []);
       const interactionRef = useRef({
         mode: "none",
         dragNodeId: null,
@@ -38444,8 +38460,8 @@ var init_GraphCanvas = __esm({
       useEffect(() => {
         const canvas = canvasRef.current;
         if (!canvas || propNodes.length === 0) return;
-        const w = canvas.width;
-        const h = canvas.height;
+        const w = logicalW;
+        const h = height;
         const simNodes = propNodes.map((n, idx) => {
           let x = n.x ?? 0;
           let y = n.y ?? 0;
@@ -38535,28 +38551,41 @@ var init_GraphCanvas = __esm({
         return () => {
           cancelAnimationFrame(animRef.current);
         };
-      }, [propNodes, propEdges, layout, repulsion, linkDistance]);
+      }, [propNodes, propEdges, layout, repulsion, linkDistance, logicalW, height]);
       useEffect(() => {
         const canvas = canvasRef.current;
         if (!canvas) return;
         const ctx = canvas.getContext("2d");
         if (!ctx) return;
-        const w = canvas.width;
-        const h = canvas.height;
+        const w = logicalW;
+        const h = height;
         const nodes = nodesRef.current;
+        const accentColor = resolveColor2("var(--color-accent)", canvas);
+        const dpr = typeof window !== "undefined" && window.devicePixelRatio || 1;
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
         ctx.clearRect(0, 0, w, h);
         ctx.save();
         ctx.translate(offset.x, offset.y);
         ctx.scale(zoom, zoom);
+        const neighbors = /* @__PURE__ */ new Set();
+        if (hoveredNode) {
+          neighbors.add(hoveredNode);
+          for (const edge of propEdges) {
+            if (edge.source === hoveredNode) neighbors.add(String(edge.target));
+            else if (edge.target === hoveredNode) neighbors.add(String(edge.source));
+          }
+        }
         for (const edge of propEdges) {
           const source = nodes.find((n) => n.id === edge.source);
           const target = nodes.find((n) => n.id === edge.target);
           if (!source || !target) continue;
+          const incident = !!hoveredNode && (edge.source === hoveredNode || edge.target === hoveredNode);
+          ctx.globalAlpha = hoveredNode ? incident ? 1 : 0.12 : 1;
           ctx.beginPath();
           ctx.moveTo(source.x, source.y);
           ctx.lineTo(target.x, target.y);
-          ctx.strokeStyle = edge.color || "#88888866";
-          ctx.lineWidth = edge.weight ? Math.max(1, edge.weight) : 1;
+          ctx.strokeStyle = incident ? accentColor : edge.color || "#88888866";
+          ctx.lineWidth = incident ? 2 : edge.weight ? Math.max(1, edge.weight) : 1;
           ctx.stroke();
           if (edge.label && showLabels) {
             const mx = (source.x + target.x) / 2;
@@ -38567,18 +38596,20 @@ var init_GraphCanvas = __esm({
             ctx.fillText(edge.label, mx, my - 4);
           }
         }
+        ctx.globalAlpha = 1;
         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;
+          ctx.globalAlpha = hoveredNode && !neighbors.has(node.id) ? 0.2 : 1;
           const radius = isSelected ? size + 4 : isHovered ? size + 2 : size;
           ctx.beginPath();
           ctx.arc(node.x, node.y, radius, 0, Math.PI * 2);
           ctx.fillStyle = color;
           ctx.fill();
           if (isSelected) {
-            ctx.strokeStyle = "var(--color-accent)";
+            ctx.strokeStyle = accentColor;
             ctx.lineWidth = 3;
           } else {
             ctx.strokeStyle = isHovered ? "#ffffff" : "#00000020";
@@ -38691,6 +38722,15 @@ var init_GraphCanvas = __esm({
         interactionRef.current.dragNodeId = null;
         setHoveredNode(null);
       }, []);
+      const handleDoubleClick = useCallback(
+        (e) => {
+          const coords = toCoords(e);
+          if (!coords) return;
+          const node = nodeAt(coords.graphX, coords.graphY);
+          if (node) onNodeDoubleClick?.(node);
+        },
+        [toCoords, nodeAt, onNodeDoubleClick]
+      );
       if (isLoading) {
         return /* @__PURE__ */ jsx(LoadingState, { message: t("common.loading"), className });
       }
@@ -38748,15 +38788,16 @@ var init_GraphCanvas = __esm({
           "canvas",
           {
             ref: canvasRef,
-            width: 800,
-            height,
+            width: Math.round(logicalW * (typeof window !== "undefined" && window.devicePixelRatio || 1)),
+            height: Math.round(height * (typeof window !== "undefined" && window.devicePixelRatio || 1)),
             className: "w-full cursor-grab active:cursor-grabbing",
             style: { height },
             onWheel: handleWheel,
             onMouseDown: handleMouseDown,
             onMouseMove: handleMouseMove,
             onMouseUp: handleMouseUp,
-            onMouseLeave: handleMouseLeave
+            onMouseLeave: handleMouseLeave,
+            onDoubleClick: handleDoubleClick
           }
         ) }),
         groups.length > 1 && /* @__PURE__ */ jsx(HStack, { gap: "md", className: "px-4 py-2 border-t border-border", wrap: true, children: groups.map((group, idx) => /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", children: [
@@ -43171,24 +43212,28 @@ var init_GameCanvas3D2 = __esm({
         const cameraConfig = useMemo(() => {
           const size = Math.max(
             gridBounds.maxX - gridBounds.minX,
-            gridBounds.maxZ - gridBounds.minZ
+            gridBounds.maxZ - gridBounds.minZ,
+            4
+            // minimum framing distance so a tiny board isn't zoomed in
           );
-          const distance = size * 1.5;
+          const cx = (gridBounds.minX + gridBounds.maxX) / 2;
+          const cz = (gridBounds.minZ + gridBounds.maxZ) / 2;
+          const d = size * 1.5;
           switch (cameraMode) {
             case "isometric":
               return {
-                position: [distance, distance * 0.8, distance],
+                position: [cx + d, d * 0.8, cz + d],
                 fov: 45
               };
             case "top-down":
               return {
-                position: [0, distance * 2, 0],
+                position: [cx, d * 2, cz],
                 fov: 45
               };
             case "perspective":
             default:
               return {
-                position: [distance, distance, distance],
+                position: [cx + d, d, cz + d],
                 fov: 45
               };
           }
@@ -43427,7 +43472,8 @@ var init_GameCanvas3D2 = __esm({
               "div",
               {
                 ref: containerRef,
-                className: cn("game-canvas-3d relative w-full h-full min-h-[85vh] overflow-hidden", className),
+                className: cn("game-canvas-3d relative w-full overflow-hidden", className),
+                style: { minHeight: "85vh" },
                 "data-orientation": orientation,
                 "data-camera-mode": cameraMode,
                 "data-overlay": overlay,
@@ -43442,7 +43488,7 @@ var init_GameCanvas3D2 = __esm({
                         near: 0.1,
                         far: 1e3
                       },
-                      style: { background: backgroundColor },
+                      style: { background: backgroundColor, height: "85vh", width: "100%" },
                       onClick: (e) => {
                         if (e.target === e.currentTarget) {
                           eventHandlers.handleCanvasClick(e);
@@ -52805,7 +52851,7 @@ function isPatternConfig(value) {
   if (value instanceof Date) return false;
   if (typeof value === "function") return false;
   const record = value;
-  return "type" in record && typeof record.type === "string" && isKnownPattern(record.type);
+  return "type" in record && typeof record.type === "string" && getComponentForPattern$1(record.type) !== null;
 }
 function isPlainConfigObject(value) {
   if (React76__default.isValidElement(value)) return false;