@industry-theme/repository-composition-panels 0.6.13 → 0.6.14

package/dist/{index-BWinsP45.js → index-DtyaVT4V.js}

@@ -9409,135 +9409,152 @@ function getDefaultExportFromCjs(x2) {
   return x2 && x2.__esModule && Object.prototype.hasOwnProperty.call(x2, "default") ? x2["default"] : x2;
 }
 var withSelector = { exports: {} };
-var withSelector_production_min = {};
+var withSelector_production = {};
 var shim = { exports: {} };
-var useSyncExternalStoreShim_production_min = {};
+var useSyncExternalStoreShim_production = {};
 /**
  * @license React
- * use-sync-external-store-shim.production.min.js
+ * use-sync-external-store-shim.production.js
  *
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var hasRequiredUseSyncExternalStoreShim_production_min;
-function requireUseSyncExternalStoreShim_production_min() {
-  if (hasRequiredUseSyncExternalStoreShim_production_min) return useSyncExternalStoreShim_production_min;
-  hasRequiredUseSyncExternalStoreShim_production_min = 1;
-  var e2 = React2__default;
-  function h2(a2, b2) {
-    return a2 === b2 && (0 !== a2 || 1 / a2 === 1 / b2) || a2 !== a2 && b2 !== b2;
-  }
-  var k2 = "function" === typeof Object.is ? Object.is : h2, l2 = e2.useState, m2 = e2.useEffect, n2 = e2.useLayoutEffect, p2 = e2.useDebugValue;
-  function q2(a2, b2) {
-    var d2 = b2(), f2 = l2({ inst: { value: d2, getSnapshot: b2 } }), c2 = f2[0].inst, g2 = f2[1];
-    n2(function() {
-      c2.value = d2;
-      c2.getSnapshot = b2;
-      r2(c2) && g2({ inst: c2 });
-    }, [a2, d2, b2]);
-    m2(function() {
-      r2(c2) && g2({ inst: c2 });
-      return a2(function() {
-        r2(c2) && g2({ inst: c2 });
-      });
-    }, [a2]);
-    p2(d2);
-    return d2;
+var hasRequiredUseSyncExternalStoreShim_production;
+function requireUseSyncExternalStoreShim_production() {
+  if (hasRequiredUseSyncExternalStoreShim_production) return useSyncExternalStoreShim_production;
+  hasRequiredUseSyncExternalStoreShim_production = 1;
+  var React = React2__default;
+  function is(x2, y2) {
+    return x2 === y2 && (0 !== x2 || 1 / x2 === 1 / y2) || x2 !== x2 && y2 !== y2;
+  }
+  var objectIs = "function" === typeof Object.is ? Object.is : is, useState2 = React.useState, useEffect2 = React.useEffect, useLayoutEffect2 = React.useLayoutEffect, useDebugValue2 = React.useDebugValue;
+  function useSyncExternalStore$2(subscribe, getSnapshot) {
+    var value = getSnapshot(), _useState = useState2({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
+    useLayoutEffect2(
+      function() {
+        inst.value = value;
+        inst.getSnapshot = getSnapshot;
+        checkIfSnapshotChanged(inst) && forceUpdate({ inst });
+      },
+      [subscribe, value, getSnapshot]
+    );
+    useEffect2(
+      function() {
+        checkIfSnapshotChanged(inst) && forceUpdate({ inst });
+        return subscribe(function() {
+          checkIfSnapshotChanged(inst) && forceUpdate({ inst });
+        });
+      },
+      [subscribe]
+    );
+    useDebugValue2(value);
+    return value;
   }
-  function r2(a2) {
-    var b2 = a2.getSnapshot;
-    a2 = a2.value;
+  function checkIfSnapshotChanged(inst) {
+    var latestGetSnapshot = inst.getSnapshot;
+    inst = inst.value;
     try {
-      var d2 = b2();
-      return !k2(a2, d2);
-    } catch (f2) {
+      var nextValue = latestGetSnapshot();
+      return !objectIs(inst, nextValue);
+    } catch (error) {
       return true;
     }
   }
-  function t2(a2, b2) {
-    return b2();
+  function useSyncExternalStore$1(subscribe, getSnapshot) {
+    return getSnapshot();
   }
-  var u2 = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? t2 : q2;
-  useSyncExternalStoreShim_production_min.useSyncExternalStore = void 0 !== e2.useSyncExternalStore ? e2.useSyncExternalStore : u2;
-  return useSyncExternalStoreShim_production_min;
+  var shim2 = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
+  useSyncExternalStoreShim_production.useSyncExternalStore = void 0 !== React.useSyncExternalStore ? React.useSyncExternalStore : shim2;
+  return useSyncExternalStoreShim_production;
 }
 var hasRequiredShim;
 function requireShim() {
   if (hasRequiredShim) return shim.exports;
   hasRequiredShim = 1;
   {
-    shim.exports = requireUseSyncExternalStoreShim_production_min();
+    shim.exports = requireUseSyncExternalStoreShim_production();
   }
   return shim.exports;
 }
 /**
  * @license React
- * use-sync-external-store-shim/with-selector.production.min.js
+ * use-sync-external-store-shim/with-selector.production.js
  *
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var hasRequiredWithSelector_production_min;
-function requireWithSelector_production_min() {
-  if (hasRequiredWithSelector_production_min) return withSelector_production_min;
-  hasRequiredWithSelector_production_min = 1;
-  var h2 = React2__default, n2 = requireShim();
-  function p2(a2, b2) {
-    return a2 === b2 && (0 !== a2 || 1 / a2 === 1 / b2) || a2 !== a2 && b2 !== b2;
-  }
-  var q2 = "function" === typeof Object.is ? Object.is : p2, r2 = n2.useSyncExternalStore, t2 = h2.useRef, u2 = h2.useEffect, v2 = h2.useMemo, w2 = h2.useDebugValue;
-  withSelector_production_min.useSyncExternalStoreWithSelector = function(a2, b2, e2, l2, g2) {
-    var c2 = t2(null);
-    if (null === c2.current) {
-      var f2 = { hasValue: false, value: null };
-      c2.current = f2;
-    } else f2 = c2.current;
-    c2 = v2(function() {
-      function a3(a4) {
-        if (!c3) {
-          c3 = true;
-          d3 = a4;
-          a4 = l2(a4);
-          if (void 0 !== g2 && f2.hasValue) {
-            var b3 = f2.value;
-            if (g2(b3, a4)) return k2 = b3;
+var hasRequiredWithSelector_production;
+function requireWithSelector_production() {
+  if (hasRequiredWithSelector_production) return withSelector_production;
+  hasRequiredWithSelector_production = 1;
+  var React = React2__default, shim2 = requireShim();
+  function is(x2, y2) {
+    return x2 === y2 && (0 !== x2 || 1 / x2 === 1 / y2) || x2 !== x2 && y2 !== y2;
+  }
+  var objectIs = "function" === typeof Object.is ? Object.is : is, useSyncExternalStore = shim2.useSyncExternalStore, useRef2 = React.useRef, useEffect2 = React.useEffect, useMemo2 = React.useMemo, useDebugValue2 = React.useDebugValue;
+  withSelector_production.useSyncExternalStoreWithSelector = function(subscribe, getSnapshot, getServerSnapshot, selector2, isEqual) {
+    var instRef = useRef2(null);
+    if (null === instRef.current) {
+      var inst = { hasValue: false, value: null };
+      instRef.current = inst;
+    } else inst = instRef.current;
+    instRef = useMemo2(
+      function() {
+        function memoizedSelector(nextSnapshot) {
+          if (!hasMemo) {
+            hasMemo = true;
+            memoizedSnapshot = nextSnapshot;
+            nextSnapshot = selector2(nextSnapshot);
+            if (void 0 !== isEqual && inst.hasValue) {
+              var currentSelection = inst.value;
+              if (isEqual(currentSelection, nextSnapshot))
+                return memoizedSelection = currentSelection;
+            }
+            return memoizedSelection = nextSnapshot;
+          }
+          currentSelection = memoizedSelection;
+          if (objectIs(memoizedSnapshot, nextSnapshot)) return currentSelection;
+          var nextSelection = selector2(nextSnapshot);
+          if (void 0 !== isEqual && isEqual(currentSelection, nextSelection))
+            return memoizedSnapshot = nextSnapshot, currentSelection;
+          memoizedSnapshot = nextSnapshot;
+          return memoizedSelection = nextSelection;
+        }
+        var hasMemo = false, memoizedSnapshot, memoizedSelection, maybeGetServerSnapshot = void 0 === getServerSnapshot ? null : getServerSnapshot;
+        return [
+          function() {
+            return memoizedSelector(getSnapshot());
+          },
+          null === maybeGetServerSnapshot ? void 0 : function() {
+            return memoizedSelector(maybeGetServerSnapshot());
           }
-          return k2 = a4;
-        }
-        b3 = k2;
-        if (q2(d3, a4)) return b3;
-        var e3 = l2(a4);
-        if (void 0 !== g2 && g2(b3, e3)) return b3;
-        d3 = a4;
-        return k2 = e3;
-      }
-      var c3 = false, d3, k2, m2 = void 0 === e2 ? null : e2;
-      return [function() {
-        return a3(b2());
-      }, null === m2 ? void 0 : function() {
-        return a3(m2());
-      }];
-    }, [b2, e2, l2, g2]);
-    var d2 = r2(a2, c2[0], c2[1]);
-    u2(function() {
-      f2.hasValue = true;
-      f2.value = d2;
-    }, [d2]);
-    w2(d2);
-    return d2;
-  };
-  return withSelector_production_min;
+        ];
+      },
+      [getSnapshot, getServerSnapshot, selector2, isEqual]
+    );
+    var value = useSyncExternalStore(subscribe, instRef[0], instRef[1]);
+    useEffect2(
+      function() {
+        inst.hasValue = true;
+        inst.value = value;
+      },
+      [value]
+    );
+    useDebugValue2(value);
+    return value;
+  };
+  return withSelector_production;
 }
 var hasRequiredWithSelector;
 function requireWithSelector() {
   if (hasRequiredWithSelector) return withSelector.exports;
   hasRequiredWithSelector = 1;
   {
-    withSelector.exports = requireWithSelector_production_min();
+    withSelector.exports = requireWithSelector_production();
   }
   return withSelector.exports;
 }
@@ -9603,8 +9620,7 @@ function shallow$1(objA, objB) {
     return false;
   }
   if (objA instanceof Map && objB instanceof Map) {
-    if (objA.size !== objB.size)
-      return false;
+    if (objA.size !== objB.size) return false;
     for (const [key, value] of objA) {
       if (!Object.is(value, objB.get(key))) {
         return false;
@@ -9613,8 +9629,7 @@ function shallow$1(objA, objB) {
     return true;
   }
   if (objA instanceof Set && objB instanceof Set) {
-    if (objA.size !== objB.size)
-      return false;
+    if (objA.size !== objB.size) return false;
     for (const value of objA) {
       if (!objB.has(value)) {
         return false;
@@ -9626,8 +9641,8 @@ function shallow$1(objA, objB) {
   if (keysA.length !== Object.keys(objB).length) {
     return false;
   }
-  for (let i2 = 0; i2 < keysA.length; i2++) {
-    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i2]) || !Object.is(objA[keysA[i2]], objB[keysA[i2]])) {
+  for (const keyA of keysA) {
+    if (!Object.prototype.hasOwnProperty.call(objB, keyA) || !Object.is(objA[keyA], objB[keyA])) {
       return false;
     }
   }
@@ -12604,6 +12619,366 @@ function NodeResizer({ nodeId, isVisible = true, handleClassName, handleStyle, l
   }
   return jsxs(Fragment, { children: [XY_RESIZER_LINE_POSITIONS.map((position2) => jsx(NodeResizeControl, { className: lineClassName, style: lineStyle, nodeId, position: position2, variant: ResizeControlVariant.Line, color: color2, minWidth, minHeight, maxWidth, maxHeight, onResizeStart, keepAspectRatio, shouldResize, onResize, onResizeEnd }, position2)), XY_RESIZER_HANDLE_POSITIONS.map((position2) => jsx(NodeResizeControl, { className: handleClassName, style: handleStyle, nodeId, position: position2, color: color2, minWidth, minHeight, maxWidth, maxHeight, onResizeStart, keepAspectRatio, shouldResize, onResize, onResizeEnd }, position2))] });
 }
+const CANVAS_COLOR_PRESETS = {
+  1: "#ef4444",
+  2: "#f97316",
+  3: "#eab308",
+  4: "#22c55e",
+  5: "#06b6d4",
+  6: "#8b5cf6"
+  // purple
+};
+function resolveCanvasColor(color2) {
+  if (color2 === void 0)
+    return void 0;
+  if (typeof color2 === "number") {
+    return CANVAS_COLOR_PRESETS[color2];
+  }
+  const numericValue = parseInt(color2, 10);
+  if (!isNaN(numericValue) && numericValue >= 1 && numericValue <= 6) {
+    return CANVAS_COLOR_PRESETS[numericValue];
+  }
+  return color2;
+}
+function sideToHandle(side) {
+  if (!side)
+    return void 0;
+  return side;
+}
+function styleToStrokeDasharray(style2) {
+  switch (style2) {
+    case "dashed":
+      return "5,5";
+    case "dotted":
+      return "2,2";
+    default:
+      return void 0;
+  }
+}
+class CanvasConverter {
+  /**
+   * Convert Extended Canvas to React Flow nodes and edges
+   */
+  static canvasToReactFlow(canvas) {
+    const nodes = [];
+    const edges = [];
+    if (canvas.nodes) {
+      for (const node2 of canvas.nodes) {
+        nodes.push(this.convertNode(node2, canvas));
+      }
+    }
+    if (canvas.edges) {
+      for (const edge of canvas.edges) {
+        edges.push(this.convertEdge(edge, canvas));
+      }
+    }
+    return { nodes, edges };
+  }
+  /**
+   * Convert a single canvas node to React Flow node
+   */
+  static convertNode(node2, _canvas) {
+    var _a, _b, _c, _d;
+    const pv = node2.pv;
+    const color2 = resolveCanvasColor(node2.color);
+    let nodeName;
+    switch (node2.type) {
+      case "text":
+        nodeName = ((_a = node2.text) == null ? void 0 : _a.split("\n")[0].replace(/^#+ /, "").substring(0, 50)) || "Text";
+        break;
+      case "file":
+        nodeName = ((_b = node2.file) == null ? void 0 : _b.split("/").pop()) || node2.file || "File";
+        break;
+      case "link":
+        nodeName = node2.url || "Link";
+        break;
+      case "group":
+        nodeName = node2.label || "Group";
+        break;
+    }
+    const data = {
+      name: nodeName,
+      nodeType: (pv == null ? void 0 : pv.nodeType) || node2.id,
+      canvasType: node2.type,
+      shape: (pv == null ? void 0 : pv.shape) || "rectangle",
+      icon: pv == null ? void 0 : pv.icon,
+      color: ((_d = (_c = pv == null ? void 0 : pv.states) == null ? void 0 : _c.idle) == null ? void 0 : _d.color) || color2,
+      width: node2.width,
+      height: node2.height
+    };
+    if (node2.type === "text") {
+      data.text = node2.text;
+    } else if (node2.type === "file") {
+      data.file = node2.file;
+    } else if (node2.type === "link") {
+      data.url = node2.url;
+    }
+    if (pv) {
+      if (pv.states)
+        data.states = pv.states;
+      if (pv.sources)
+        data.sources = pv.sources;
+      if (pv.status)
+        data.status = pv.status;
+      if (pv.dataSchema)
+        data.dataSchema = pv.dataSchema;
+      if (pv.event)
+        data.event = pv.event;
+      if (pv.eventRef)
+        data.eventRef = pv.eventRef;
+    }
+    return {
+      id: node2.id,
+      type: (pv == null ? void 0 : pv.shape) || "default",
+      position: { x: node2.x, y: node2.y },
+      data,
+      style: {
+        width: node2.width,
+        height: node2.height
+      }
+    };
+  }
+  /**
+   * Convert a single canvas edge to React Flow edge
+   */
+  static convertEdge(edge, canvas) {
+    var _a, _b;
+    const pv = edge.pv;
+    const edgeTypeDef = (pv == null ? void 0 : pv.edgeType) ? (_b = (_a = canvas.pv) == null ? void 0 : _a.edgeTypes) == null ? void 0 : _b[pv.edgeType] : void 0;
+    const color2 = resolveCanvasColor(edge.color) || (edgeTypeDef == null ? void 0 : edgeTypeDef.color);
+    const rfEdge = {
+      id: edge.id,
+      source: edge.fromNode,
+      target: edge.toNode,
+      sourceHandle: sideToHandle(edge.fromSide),
+      targetHandle: sideToHandle(edge.toSide),
+      label: edge.label,
+      data: {
+        edgeType: (pv == null ? void 0 : pv.edgeType) || "default",
+        style: (pv == null ? void 0 : pv.style) || (edgeTypeDef == null ? void 0 : edgeTypeDef.style) || "solid",
+        color: color2,
+        width: (pv == null ? void 0 : pv.width) || (edgeTypeDef == null ? void 0 : edgeTypeDef.width) || 2,
+        animation: (pv == null ? void 0 : pv.animation) || (edgeTypeDef == null ? void 0 : edgeTypeDef.animation)
+        // activatedBy removed - legacy path-based
+      },
+      style: {
+        stroke: color2,
+        strokeWidth: (pv == null ? void 0 : pv.width) || (edgeTypeDef == null ? void 0 : edgeTypeDef.width) || 2,
+        strokeDasharray: styleToStrokeDasharray((pv == null ? void 0 : pv.style) || (edgeTypeDef == null ? void 0 : edgeTypeDef.style))
+      },
+      animated: (pv == null ? void 0 : pv.style) === "animated" || (edgeTypeDef == null ? void 0 : edgeTypeDef.style) === "animated"
+    };
+    if (edge.toEnd !== "none") {
+      rfEdge.markerEnd = {
+        type: "arrowclosed",
+        color: color2
+      };
+    }
+    return rfEdge;
+  }
+  /**
+   * Convert Extended Canvas to internal NodeState/EdgeState format
+   */
+  static canvasToGraph(canvas) {
+    var _a, _b, _c, _d, _e2;
+    const nodes = [];
+    const edges = [];
+    const now2 = Date.now();
+    if (canvas.nodes) {
+      for (const node2 of canvas.nodes) {
+        const pv = node2.pv;
+        let nodeName;
+        let nodeDescription;
+        switch (node2.type) {
+          case "text": {
+            const lines = ((_a = node2.text) == null ? void 0 : _a.split("\n")) || [];
+            nodeName = ((_b = lines[0]) == null ? void 0 : _b.replace(/^#+ /, "").substring(0, 50)) || "Text";
+            nodeDescription = lines.slice(1).join("\n").trim() || void 0;
+            break;
+          }
+          case "file":
+            nodeName = ((_c = node2.file) == null ? void 0 : _c.split("/").pop()) || node2.file || "File";
+            break;
+          case "link":
+            nodeName = node2.url || "Link";
+            break;
+          case "group":
+            nodeName = node2.label || "Group";
+            break;
+          default:
+            nodeName = (pv == null ? void 0 : pv.nodeType) || node2.id;
+            break;
+        }
+        const finalName = (pv == null ? void 0 : pv.name) || nodeName;
+        const finalDescription = (pv == null ? void 0 : pv.description) || nodeDescription;
+        const nodeData = {
+          description: finalDescription || "",
+          shape: (pv == null ? void 0 : pv.shape) || "rectangle",
+          color: (pv == null ? void 0 : pv.fill) || resolveCanvasColor(node2.color) || "",
+          width: node2.width,
+          height: node2.height,
+          sources: (pv == null ? void 0 : pv.sources) || [],
+          // actions removed - legacy path-based
+          canvasType: node2.type
+        };
+        if (pv == null ? void 0 : pv.icon)
+          nodeData.icon = pv.icon;
+        if (pv == null ? void 0 : pv.stroke)
+          nodeData.stroke = pv.stroke;
+        if (pv == null ? void 0 : pv.states)
+          nodeData.states = pv.states;
+        if (pv == null ? void 0 : pv.status)
+          nodeData.status = pv.status;
+        if (pv == null ? void 0 : pv.otel)
+          nodeData.otel = pv.otel;
+        if (pv == null ? void 0 : pv.resourceMatch)
+          nodeData.resourceMatch = pv.resourceMatch;
+        if (pv == null ? void 0 : pv.event)
+          nodeData.event = pv.event;
+        if (pv == null ? void 0 : pv.eventRef)
+          nodeData.eventRef = pv.eventRef;
+        if (node2.type === "text" && node2.text)
+          nodeData.text = node2.text;
+        if (node2.type === "file" && node2.file)
+          nodeData.file = node2.file;
+        if (node2.type === "link" && node2.url)
+          nodeData.url = node2.url;
+        nodes.push({
+          id: node2.id,
+          type: (pv == null ? void 0 : pv.nodeType) || node2.type,
+          name: finalName,
+          data: nodeData,
+          position: { x: node2.x, y: node2.y },
+          // Persist node dimensions at top level for xyflow
+          width: node2.width,
+          height: node2.height,
+          // Don't set a default state - only show state labels when explicitly set via events
+          state: void 0,
+          createdAt: now2,
+          updatedAt: now2
+        });
+      }
+    }
+    if (canvas.edges) {
+      for (const edge of canvas.edges) {
+        const pv = edge.pv;
+        const edgeTypeDef = (pv == null ? void 0 : pv.edgeType) ? (_e2 = (_d = canvas.pv) == null ? void 0 : _d.edgeTypes) == null ? void 0 : _e2[pv.edgeType] : void 0;
+        const edgeData = {
+          style: (pv == null ? void 0 : pv.style) || (edgeTypeDef == null ? void 0 : edgeTypeDef.style) || "solid"
+        };
+        if (edge.label)
+          edgeData.label = edge.label;
+        const color2 = resolveCanvasColor(edge.color) || (edgeTypeDef == null ? void 0 : edgeTypeDef.color);
+        if (color2)
+          edgeData.color = color2;
+        const width = (pv == null ? void 0 : pv.width) || (edgeTypeDef == null ? void 0 : edgeTypeDef.width);
+        if (width !== void 0)
+          edgeData.width = width;
+        const animation = (pv == null ? void 0 : pv.animation) || (edgeTypeDef == null ? void 0 : edgeTypeDef.animation);
+        if (animation)
+          edgeData.animation = animation;
+        if (edge.fromSide)
+          edgeData.fromSide = edge.fromSide;
+        if (edge.toSide)
+          edgeData.toSide = edge.toSide;
+        edges.push({
+          id: edge.id,
+          type: (pv == null ? void 0 : pv.edgeType) || "default",
+          from: edge.fromNode,
+          to: edge.toNode,
+          data: edgeData,
+          createdAt: now2,
+          updatedAt: now2
+        });
+      }
+    }
+    return { nodes, edges };
+  }
+  /**
+   * Convert React Flow nodes/edges back to Extended Canvas format
+   */
+  static reactFlowToCanvas(nodes, edges, metadata) {
+    var _a, _b, _c, _d, _e2;
+    const canvas = {
+      nodes: [],
+      edges: [],
+      pv: {
+        version: (metadata == null ? void 0 : metadata.version) || "1.0.0",
+        name: (metadata == null ? void 0 : metadata.name) || "Untitled",
+        description: metadata == null ? void 0 : metadata.description,
+        edgeTypes: {}
+      }
+    };
+    const edgeTypes2 = /* @__PURE__ */ new Map();
+    for (const node2 of nodes) {
+      const canvasNode = {
+        id: node2.id,
+        type: node2.data.canvasType || "text",
+        x: node2.position.x,
+        y: node2.position.y,
+        width: ((_a = node2.style) == null ? void 0 : _a.width) || node2.data.width || 150,
+        height: ((_b = node2.style) == null ? void 0 : _b.height) || node2.data.height || 80,
+        text: node2.data.text || ""
+      };
+      if (node2.data.color && typeof node2.data.color === "string") {
+        canvasNode.color = node2.data.color;
+      }
+      if (node2.data.nodeType || node2.data.shape || ((_c = node2.data.sources) == null ? void 0 : _c.length)) {
+        canvasNode.pv = {
+          nodeType: node2.data.nodeType || node2.id,
+          shape: node2.data.shape,
+          icon: node2.data.icon,
+          states: node2.data.states,
+          sources: node2.data.sources,
+          // actions removed - legacy path-based
+          dataSchema: node2.data.dataSchema
+        };
+      }
+      if (node2.data.canvasType === "text" || !node2.data.canvasType) {
+        const name2 = node2.data.name || node2.id;
+        const description = node2.data.description;
+        canvasNode.text = description ? `# ${name2}
+
+${description}` : `# ${name2}`;
+      }
+      canvas.nodes.push(canvasNode);
+    }
+    for (const edge of edges) {
+      const canvasEdge = {
+        id: edge.id,
+        fromNode: edge.source,
+        toNode: edge.target,
+        fromSide: edge.sourceHandle,
+        toSide: edge.targetHandle,
+        label: edge.label
+      };
+      if ((_d = edge.style) == null ? void 0 : _d.stroke) {
+        canvasEdge.color = edge.style.stroke;
+      }
+      if ((_e2 = edge.data) == null ? void 0 : _e2.edgeType) {
+        canvasEdge.pv = {
+          edgeType: edge.data.edgeType,
+          style: edge.data.style,
+          width: edge.data.width,
+          animation: edge.data.animation
+          // activatedBy removed - legacy path-based
+        };
+        if (!edgeTypes2.has(edge.data.edgeType)) {
+          edgeTypes2.set(edge.data.edgeType, {
+            style: edge.data.style,
+            color: edge.data.color,
+            width: edge.data.width,
+            animation: edge.data.animation
+            // activatedBy removed - legacy path-based
+          });
+        }
+      }
+      canvas.edges.push(canvasEdge);
+    }
+    canvas.pv.edgeTypes = Object.fromEntries(edgeTypes2);
+    return canvas;
+  }
+}
 /*! js-yaml 4.1.0 https://github.com/nodeca/js-yaml @license MIT */
 function isNothing(subject) {
   return typeof subject === "undefined" || subject === null;
@@ -13336,366 +13711,6 @@ for (var i$1 = 0; i$1 < 256; i$1++) {
   simpleEscapeCheck[i$1] = simpleEscapeSequence(i$1) ? 1 : 0;
   simpleEscapeMap[i$1] = simpleEscapeSequence(i$1);
 }
-const CANVAS_COLOR_PRESETS = {
-  1: "#ef4444",
-  2: "#f97316",
-  3: "#eab308",
-  4: "#22c55e",
-  5: "#06b6d4",
-  6: "#8b5cf6"
-  // purple
-};
-function resolveCanvasColor(color2) {
-  if (color2 === void 0)
-    return void 0;
-  if (typeof color2 === "number") {
-    return CANVAS_COLOR_PRESETS[color2];
-  }
-  const numericValue = parseInt(color2, 10);
-  if (!isNaN(numericValue) && numericValue >= 1 && numericValue <= 6) {
-    return CANVAS_COLOR_PRESETS[numericValue];
-  }
-  return color2;
-}
-function sideToHandle(side) {
-  if (!side)
-    return void 0;
-  return side;
-}
-function styleToStrokeDasharray(style2) {
-  switch (style2) {
-    case "dashed":
-      return "5,5";
-    case "dotted":
-      return "2,2";
-    default:
-      return void 0;
-  }
-}
-class CanvasConverter {
-  /**
-   * Convert Extended Canvas to React Flow nodes and edges
-   */
-  static canvasToReactFlow(canvas) {
-    const nodes = [];
-    const edges = [];
-    if (canvas.nodes) {
-      for (const node2 of canvas.nodes) {
-        nodes.push(this.convertNode(node2, canvas));
-      }
-    }
-    if (canvas.edges) {
-      for (const edge of canvas.edges) {
-        edges.push(this.convertEdge(edge, canvas));
-      }
-    }
-    return { nodes, edges };
-  }
-  /**
-   * Convert a single canvas node to React Flow node
-   */
-  static convertNode(node2, _canvas) {
-    var _a, _b, _c, _d;
-    const pv = node2.pv;
-    const color2 = resolveCanvasColor(node2.color);
-    let nodeName;
-    switch (node2.type) {
-      case "text":
-        nodeName = ((_a = node2.text) == null ? void 0 : _a.split("\n")[0].replace(/^#+ /, "").substring(0, 50)) || "Text";
-        break;
-      case "file":
-        nodeName = ((_b = node2.file) == null ? void 0 : _b.split("/").pop()) || node2.file || "File";
-        break;
-      case "link":
-        nodeName = node2.url || "Link";
-        break;
-      case "group":
-        nodeName = node2.label || "Group";
-        break;
-    }
-    const data = {
-      name: nodeName,
-      nodeType: (pv == null ? void 0 : pv.nodeType) || node2.id,
-      canvasType: node2.type,
-      shape: (pv == null ? void 0 : pv.shape) || "rectangle",
-      icon: pv == null ? void 0 : pv.icon,
-      color: ((_d = (_c = pv == null ? void 0 : pv.states) == null ? void 0 : _c.idle) == null ? void 0 : _d.color) || color2,
-      width: node2.width,
-      height: node2.height
-    };
-    if (node2.type === "text") {
-      data.text = node2.text;
-    } else if (node2.type === "file") {
-      data.file = node2.file;
-    } else if (node2.type === "link") {
-      data.url = node2.url;
-    }
-    if (pv) {
-      if (pv.states)
-        data.states = pv.states;
-      if (pv.sources)
-        data.sources = pv.sources;
-      if (pv.status)
-        data.status = pv.status;
-      if (pv.dataSchema)
-        data.dataSchema = pv.dataSchema;
-      if (pv.event)
-        data.event = pv.event;
-      if (pv.eventRef)
-        data.eventRef = pv.eventRef;
-    }
-    return {
-      id: node2.id,
-      type: (pv == null ? void 0 : pv.shape) || "default",
-      position: { x: node2.x, y: node2.y },
-      data,
-      style: {
-        width: node2.width,
-        height: node2.height
-      }
-    };
-  }
-  /**
-   * Convert a single canvas edge to React Flow edge
-   */
-  static convertEdge(edge, canvas) {
-    var _a, _b;
-    const pv = edge.pv;
-    const edgeTypeDef = (pv == null ? void 0 : pv.edgeType) ? (_b = (_a = canvas.pv) == null ? void 0 : _a.edgeTypes) == null ? void 0 : _b[pv.edgeType] : void 0;
-    const color2 = resolveCanvasColor(edge.color) || (edgeTypeDef == null ? void 0 : edgeTypeDef.color);
-    const rfEdge = {
-      id: edge.id,
-      source: edge.fromNode,
-      target: edge.toNode,
-      sourceHandle: sideToHandle(edge.fromSide),
-      targetHandle: sideToHandle(edge.toSide),
-      label: edge.label,
-      data: {
-        edgeType: (pv == null ? void 0 : pv.edgeType) || "default",
-        style: (pv == null ? void 0 : pv.style) || (edgeTypeDef == null ? void 0 : edgeTypeDef.style) || "solid",
-        color: color2,
-        width: (pv == null ? void 0 : pv.width) || (edgeTypeDef == null ? void 0 : edgeTypeDef.width) || 2,
-        animation: (pv == null ? void 0 : pv.animation) || (edgeTypeDef == null ? void 0 : edgeTypeDef.animation)
-        // activatedBy removed - legacy path-based
-      },
-      style: {
-        stroke: color2,
-        strokeWidth: (pv == null ? void 0 : pv.width) || (edgeTypeDef == null ? void 0 : edgeTypeDef.width) || 2,
-        strokeDasharray: styleToStrokeDasharray((pv == null ? void 0 : pv.style) || (edgeTypeDef == null ? void 0 : edgeTypeDef.style))
-      },
-      animated: (pv == null ? void 0 : pv.style) === "animated" || (edgeTypeDef == null ? void 0 : edgeTypeDef.style) === "animated"
-    };
-    if (edge.toEnd !== "none") {
-      rfEdge.markerEnd = {
-        type: "arrowclosed",
-        color: color2
-      };
-    }
-    return rfEdge;
-  }
-  /**
-   * Convert Extended Canvas to internal NodeState/EdgeState format
-   */
-  static canvasToGraph(canvas) {
-    var _a, _b, _c, _d, _e2;
-    const nodes = [];
-    const edges = [];
-    const now2 = Date.now();
-    if (canvas.nodes) {
-      for (const node2 of canvas.nodes) {
-        const pv = node2.pv;
-        let nodeName;
-        let nodeDescription;
-        switch (node2.type) {
-          case "text": {
-            const lines = ((_a = node2.text) == null ? void 0 : _a.split("\n")) || [];
-            nodeName = ((_b = lines[0]) == null ? void 0 : _b.replace(/^#+ /, "").substring(0, 50)) || "Text";
-            nodeDescription = lines.slice(1).join("\n").trim() || void 0;
-            break;
-          }
-          case "file":
-            nodeName = ((_c = node2.file) == null ? void 0 : _c.split("/").pop()) || node2.file || "File";
-            break;
-          case "link":
-            nodeName = node2.url || "Link";
-            break;
-          case "group":
-            nodeName = node2.label || "Group";
-            break;
-          default:
-            nodeName = (pv == null ? void 0 : pv.nodeType) || node2.id;
-            break;
-        }
-        const finalName = (pv == null ? void 0 : pv.name) || nodeName;
-        const finalDescription = (pv == null ? void 0 : pv.description) || nodeDescription;
-        const nodeData = {
-          description: finalDescription || "",
-          shape: (pv == null ? void 0 : pv.shape) || "rectangle",
-          color: (pv == null ? void 0 : pv.fill) || resolveCanvasColor(node2.color) || "",
-          width: node2.width,
-          height: node2.height,
-          sources: (pv == null ? void 0 : pv.sources) || [],
-          // actions removed - legacy path-based
-          canvasType: node2.type
-        };
-        if (pv == null ? void 0 : pv.icon)
-          nodeData.icon = pv.icon;
-        if (pv == null ? void 0 : pv.stroke)
-          nodeData.stroke = pv.stroke;
-        if (pv == null ? void 0 : pv.states)
-          nodeData.states = pv.states;
-        if (pv == null ? void 0 : pv.status)
-          nodeData.status = pv.status;
-        if (pv == null ? void 0 : pv.otel)
-          nodeData.otel = pv.otel;
-        if (pv == null ? void 0 : pv.resourceMatch)
-          nodeData.resourceMatch = pv.resourceMatch;
-        if (pv == null ? void 0 : pv.event)
-          nodeData.event = pv.event;
-        if (pv == null ? void 0 : pv.eventRef)
-          nodeData.eventRef = pv.eventRef;
-        if (node2.type === "text" && node2.text)
-          nodeData.text = node2.text;
-        if (node2.type === "file" && node2.file)
-          nodeData.file = node2.file;
-        if (node2.type === "link" && node2.url)
-          nodeData.url = node2.url;
-        nodes.push({
-          id: node2.id,
-          type: (pv == null ? void 0 : pv.nodeType) || node2.type,
-          name: finalName,
-          data: nodeData,
-          position: { x: node2.x, y: node2.y },
-          // Persist node dimensions at top level for xyflow
-          width: node2.width,
-          height: node2.height,
-          // Don't set a default state - only show state labels when explicitly set via events
-          state: void 0,
-          createdAt: now2,
-          updatedAt: now2
-        });
-      }
-    }
-    if (canvas.edges) {
-      for (const edge of canvas.edges) {
-        const pv = edge.pv;
-        const edgeTypeDef = (pv == null ? void 0 : pv.edgeType) ? (_e2 = (_d = canvas.pv) == null ? void 0 : _d.edgeTypes) == null ? void 0 : _e2[pv.edgeType] : void 0;
-        const edgeData = {
-          style: (pv == null ? void 0 : pv.style) || (edgeTypeDef == null ? void 0 : edgeTypeDef.style) || "solid"
-        };
-        if (edge.label)
-          edgeData.label = edge.label;
-        const color2 = resolveCanvasColor(edge.color) || (edgeTypeDef == null ? void 0 : edgeTypeDef.color);
-        if (color2)
-          edgeData.color = color2;
-        const width = (pv == null ? void 0 : pv.width) || (edgeTypeDef == null ? void 0 : edgeTypeDef.width);
-        if (width !== void 0)
-          edgeData.width = width;
-        const animation = (pv == null ? void 0 : pv.animation) || (edgeTypeDef == null ? void 0 : edgeTypeDef.animation);
-        if (animation)
-          edgeData.animation = animation;
-        if (edge.fromSide)
-          edgeData.fromSide = edge.fromSide;
-        if (edge.toSide)
-          edgeData.toSide = edge.toSide;
-        edges.push({
-          id: edge.id,
-          type: (pv == null ? void 0 : pv.edgeType) || "default",
-          from: edge.fromNode,
-          to: edge.toNode,
-          data: edgeData,
-          createdAt: now2,
-          updatedAt: now2
-        });
-      }
-    }
-    return { nodes, edges };
-  }
-  /**
-   * Convert React Flow nodes/edges back to Extended Canvas format
-   */
-  static reactFlowToCanvas(nodes, edges, metadata) {
-    var _a, _b, _c, _d, _e2;
-    const canvas = {
-      nodes: [],
-      edges: [],
-      pv: {
-        version: (metadata == null ? void 0 : metadata.version) || "1.0.0",
-        name: (metadata == null ? void 0 : metadata.name) || "Untitled",
-        description: metadata == null ? void 0 : metadata.description,
-        edgeTypes: {}
-      }
-    };
-    const edgeTypes2 = /* @__PURE__ */ new Map();
-    for (const node2 of nodes) {
-      const canvasNode = {
-        id: node2.id,
-        type: node2.data.canvasType || "text",
-        x: node2.position.x,
-        y: node2.position.y,
-        width: ((_a = node2.style) == null ? void 0 : _a.width) || node2.data.width || 150,
-        height: ((_b = node2.style) == null ? void 0 : _b.height) || node2.data.height || 80,
-        text: node2.data.text || ""
-      };
-      if (node2.data.color && typeof node2.data.color === "string") {
-        canvasNode.color = node2.data.color;
-      }
-      if (node2.data.nodeType || node2.data.shape || ((_c = node2.data.sources) == null ? void 0 : _c.length)) {
-        canvasNode.pv = {
-          nodeType: node2.data.nodeType || node2.id,
-          shape: node2.data.shape,
-          icon: node2.data.icon,
-          states: node2.data.states,
-          sources: node2.data.sources,
-          // actions removed - legacy path-based
-          dataSchema: node2.data.dataSchema
-        };
-      }
-      if (node2.data.canvasType === "text" || !node2.data.canvasType) {
-        const name2 = node2.data.name || node2.id;
-        const description = node2.data.description;
-        canvasNode.text = description ? `# ${name2}
-
-${description}` : `# ${name2}`;
-      }
-      canvas.nodes.push(canvasNode);
-    }
-    for (const edge of edges) {
-      const canvasEdge = {
-        id: edge.id,
-        fromNode: edge.source,
-        toNode: edge.target,
-        fromSide: edge.sourceHandle,
-        toSide: edge.targetHandle,
-        label: edge.label
-      };
-      if ((_d = edge.style) == null ? void 0 : _d.stroke) {
-        canvasEdge.color = edge.style.stroke;
-      }
-      if ((_e2 = edge.data) == null ? void 0 : _e2.edgeType) {
-        canvasEdge.pv = {
-          edgeType: edge.data.edgeType,
-          style: edge.data.style,
-          width: edge.data.width,
-          animation: edge.data.animation
-          // activatedBy removed - legacy path-based
-        };
-        if (!edgeTypes2.has(edge.data.edgeType)) {
-          edgeTypes2.set(edge.data.edgeType, {
-            style: edge.data.style,
-            color: edge.data.color,
-            width: edge.data.width,
-            animation: edge.data.animation
-            // activatedBy removed - legacy path-based
-          });
-        }
-      }
-      canvas.edges.push(canvasEdge);
-    }
-    canvas.pv.edgeTypes = Object.fromEntries(edgeTypes2);
-    return canvas;
-  }
-}
 var handlebars = { exports: {} };
 var handlebars_runtime = { exports: {} };
 var base$1 = {};
@@ -104904,7 +104919,7 @@ const browserExt = {
   },
   test: () => true,
   load: async () => {
-    await import("./browserAll-v89RKEz2.js");
+    await import("./browserAll-CjpUV6Zh.js");
   }
 };
 const webworkerExt = {
@@ -104915,7 +104930,7 @@ const webworkerExt = {
   },
   test: () => typeof self !== "undefined" && self.WorkerGlobalScope !== void 0,
   load: async () => {
-    await import("./webworkerAll-BMsTq_fc.js");
+    await import("./webworkerAll-Blmn9DEN.js");
   }
 };
 class ObservablePoint {
@@ -117158,19 +117173,19 @@ async function autoDetectRenderer(options) {
   for (let i2 = 0; i2 < preferredOrder.length; i2++) {
     const rendererType = preferredOrder[i2];
     if (rendererType === "webgpu" && await isWebGPUSupported()) {
-      const { WebGPURenderer } = await import("./WebGPURenderer-Cd7zwQIV.js");
+      const { WebGPURenderer } = await import("./WebGPURenderer-DY5uJ8HH.js");
       RendererClass = WebGPURenderer;
       finalOptions = { ...options, ...options.webgpu };
       break;
     } else if (rendererType === "webgl" && isWebGLSupported(
       options.failIfMajorPerformanceCaveat ?? AbstractRenderer.defaultOptions.failIfMajorPerformanceCaveat
     )) {
-      const { WebGLRenderer } = await import("./WebGLRenderer-DW3r21B_.js");
+      const { WebGLRenderer } = await import("./WebGLRenderer-0i8_RMNF.js");
       RendererClass = WebGLRenderer;
       finalOptions = { ...options, ...options.webgl };
       break;
     } else if (rendererType === "canvas") {
-      const { CanvasRenderer } = await import("./CanvasRenderer-DnPcUXMo.js");
+      const { CanvasRenderer } = await import("./CanvasRenderer-DLdkHlL4.js");
       RendererClass = CanvasRenderer;
       finalOptions = { ...options, ...options.canvasOptions };
       break;
@@ -131075,8 +131090,407 @@ class it extends Container {
     t2 < this.left ? (this.left = t2, h2 = true) : t2 + n2 > this.right && (this.right = t2 + n2, h2 = true), e2 < this.top ? (this.top = e2, h2 = true) : e2 + i2 > this.bottom && (this.bottom = e2 + i2, h2 = true), h2 && this.emit("moved", { viewport: this, type: "ensureVisible" });
   }
 }
+const STAR_TIERS = [
+  // Flags (basic tiers)
+  { min: 0, max: 100, name: "New", decorationType: "flag", color: 9741240 },
+  // Gray
+  {
+    min: 101,
+    max: 500,
+    name: "Growing",
+    decorationType: "flag",
+    color: 2278750
+  },
+  // Green
+  {
+    min: 501,
+    max: 1e3,
+    name: "Popular",
+    decorationType: "flag",
+    color: 440020
+  },
+  // Cyan
+  // Trophies (mid tiers)
+  {
+    min: 1001,
+    max: 5e3,
+    name: "Notable",
+    decorationType: "trophy",
+    color: 16096779
+  },
+  // Amber
+  {
+    min: 5001,
+    max: 1e4,
+    name: "Renowned",
+    decorationType: "trophy",
+    color: 16347926
+  },
+  // Orange
+  // Statues (high tiers)
+  {
+    min: 10001,
+    max: 25e3,
+    name: "Famous",
+    decorationType: "statue",
+    color: 15381256
+  },
+  // Yellow
+  {
+    min: 25001,
+    max: 5e4,
+    name: "Legendary",
+    decorationType: "statue",
+    color: 16498468
+  },
+  // Gold
+  {
+    min: 50001,
+    max: 1e5,
+    name: "Epic",
+    decorationType: "statue",
+    color: 11032055
+  },
+  // Purple
+  {
+    min: 100001,
+    max: 25e4,
+    name: "Mythic",
+    decorationType: "statue",
+    color: 9133302
+  },
+  // Deep Purple
+  {
+    min: 250001,
+    max: 5e5,
+    name: "Godlike",
+    decorationType: "statue",
+    color: 6514417
+  },
+  // Indigo
+  {
+    min: 500001,
+    max: Infinity,
+    name: "Celestial",
+    decorationType: "statue",
+    color: 15485081
+  }
+  // Pink
+];
+function getStarTier(stars) {
+  if (stars === 0) return null;
+  for (const tier of STAR_TIERS) {
+    if (stars >= tier.min && stars <= tier.max) {
+      return tier;
+    }
+  }
+  return STAR_TIERS[STAR_TIERS.length - 1];
+}
+function formatStarCount(stars) {
+  if (stars < 1e3) {
+    return stars.toString();
+  } else if (stars < 1e6) {
+    return `${(stars / 1e3).toFixed(1)}k`;
+  } else {
+    return `${(stars / 1e6).toFixed(1)}M`;
+  }
+}
+function getDecorationSizeBonus(stars) {
+  if (!stars || stars === 0) return 0;
+  const tier = getStarTier(stars);
+  if (!tier) return 0;
+  switch (tier.decorationType) {
+    case "flag":
+      return 0.2;
+    // Small flags need 20% extra space
+    case "trophy":
+      return 0.25;
+    // Medium trophies need 25% extra
+    case "statue":
+      return 0.35;
+    // Large statues need 35% extra
+    default:
+      return 0;
+  }
+}
+function generateFlagSprite(color2) {
+  const flag = new Graphics();
+  flag.rect(0, 0, 2, 12);
+  flag.fill(9127187);
+  flag.rect(2, 0, 6, 4);
+  flag.fill(color2);
+  flag.rect(2, 0, 6, 1);
+  flag.fill(multiplyColor(color2, 0.7));
+  flag.rect(2, 3, 6, 1);
+  flag.fill(multiplyColor(color2, 0.7));
+  return flag;
+}
+function generateTrophySprite(color2) {
+  const trophy = new Graphics();
+  trophy.rect(1, 2, 6, 6);
+  trophy.fill(color2);
+  trophy.rect(0, 3, 1, 3);
+  trophy.fill(color2);
+  trophy.rect(7, 3, 1, 3);
+  trophy.fill(color2);
+  trophy.rect(0, 8, 8, 2);
+  trophy.fill(multiplyColor(color2, 0.8));
+  trophy.rect(1, 2, 6, 1);
+  trophy.fill(multiplyColor(color2, 1.3));
+  return trophy;
+}
+function generateStatueSprite(color2) {
+  const statue = new Graphics();
+  statue.rect(0, 12, 10, 3);
+  statue.fill(8421504);
+  statue.rect(1, 10, 8, 2);
+  statue.fill(9474192);
+  statue.rect(2, 2, 6, 8);
+  statue.fill(color2);
+  statue.rect(3, 0, 4, 3);
+  statue.fill(color2);
+  statue.rect(1, 4, 1, 3);
+  statue.fill(color2);
+  statue.rect(8, 4, 1, 3);
+  statue.fill(color2);
+  statue.rect(3, 0, 4, 1);
+  statue.fill(multiplyColor(color2, 1.3));
+  return statue;
+}
+function multiplyColor(color2, factor) {
+  const r2 = Math.min(255, Math.floor((color2 >> 16 & 255) * factor));
+  const g2 = Math.min(255, Math.floor((color2 >> 8 & 255) * factor));
+  const b2 = Math.min(255, Math.floor((color2 & 255) * factor));
+  return r2 << 16 | g2 << 8 | b2;
+}
+const COLLABORATOR_TIERS = [
+  { min: 1, max: 3, name: "Solo", decorationType: "bench", color: 9139029 },
+  // Brown
+  {
+    min: 4,
+    max: 10,
+    name: "Small Team",
+    decorationType: "bench",
+    color: 10519149
+  },
+  // Light brown
+  {
+    min: 11,
+    max: 25,
+    name: "Active Team",
+    decorationType: "pavilion",
+    color: 9741240
+  },
+  // Silver
+  {
+    min: 26,
+    max: 50,
+    name: "Large Team",
+    decorationType: "pavilion",
+    color: 16498468
+  },
+  // Gold
+  {
+    min: 51,
+    max: 100,
+    name: "Community",
+    decorationType: "gazebo",
+    color: 11032055
+  },
+  // Purple
+  {
+    min: 101,
+    max: 250,
+    name: "Major Project",
+    decorationType: "gazebo",
+    color: 3900150
+  },
+  // Blue
+  {
+    min: 251,
+    max: Number.POSITIVE_INFINITY,
+    name: "Open Source Hub",
+    decorationType: "bandstand",
+    color: 1096065
+  }
+  // Green
+];
+function getCollaboratorTier(count2) {
+  if (count2 <= 0) return null;
+  return COLLABORATOR_TIERS.find((tier) => count2 >= tier.min && count2 <= tier.max) || null;
+}
+function getCollaboratorDecorationSizeBonus(count2) {
+  const tier = getCollaboratorTier(count2);
+  if (!tier) return 0;
+  switch (tier.decorationType) {
+    case "bench":
+      return 0.15;
+    // Small footprint
+    case "pavilion":
+      return 0.2;
+    // Medium footprint
+    case "gazebo":
+      return 0.25;
+    // Larger structure
+    case "bandstand":
+      return 0.3;
+    // Largest structure
+    default:
+      return 0.15;
+  }
+}
+function formatCollaboratorCount(count2) {
+  if (count2 < 1e3) {
+    return count2.toString();
+  } else if (count2 < 1e6) {
+    return `${(count2 / 1e3).toFixed(1)}k`;
+  } else {
+    return `${(count2 / 1e6).toFixed(1)}M`;
+  }
+}
+function generateBenchSprite(color2) {
+  const bench = new Graphics();
+  bench.rect(1, 6, 1, 3);
+  bench.fill(6636321);
+  bench.rect(6, 6, 1, 3);
+  bench.fill(6636321);
+  bench.rect(0, 5, 8, 2);
+  bench.fill(color2);
+  bench.rect(0, 2, 8, 1);
+  bench.fill(color2);
+  bench.rect(1, 3, 1, 2);
+  bench.fill(6636321);
+  bench.rect(6, 3, 1, 2);
+  bench.fill(6636321);
+  return bench;
+}
+function generatePavilionSprite(color2) {
+  const pavilion = new Graphics();
+  pavilion.rect(1, 6, 1, 6);
+  pavilion.fill(9127187);
+  pavilion.rect(10, 6, 1, 6);
+  pavilion.fill(9127187);
+  pavilion.rect(1, 10, 1, 2);
+  pavilion.fill(9127187);
+  pavilion.rect(10, 10, 1, 2);
+  pavilion.fill(9127187);
+  pavilion.beginPath();
+  pavilion.moveTo(0, 6);
+  pavilion.lineTo(6, 3);
+  pavilion.lineTo(12, 6);
+  pavilion.lineTo(6, 7);
+  pavilion.closePath();
+  pavilion.fill(adjustBrightness$1(color2, 0.7));
+  pavilion.beginPath();
+  pavilion.moveTo(1, 5);
+  pavilion.lineTo(6, 2);
+  pavilion.lineTo(11, 5);
+  pavilion.lineTo(6, 6);
+  pavilion.closePath();
+  pavilion.fill(color2);
+  pavilion.rect(2, 11, 8, 1);
+  pavilion.fill(6636321);
+  return pavilion;
+}
+function generateGazeboSprite(color2) {
+  const gazebo = new Graphics();
+  gazebo.beginPath();
+  gazebo.moveTo(5, 14);
+  gazebo.lineTo(9, 14);
+  gazebo.lineTo(11, 12);
+  gazebo.lineTo(11, 10);
+  gazebo.lineTo(9, 8);
+  gazebo.lineTo(5, 8);
+  gazebo.lineTo(3, 10);
+  gazebo.lineTo(3, 12);
+  gazebo.closePath();
+  gazebo.fill(9139029);
+  gazebo.rect(4, 8, 1, 6);
+  gazebo.fill(6636321);
+  gazebo.rect(9, 8, 1, 6);
+  gazebo.fill(6636321);
+  gazebo.beginPath();
+  gazebo.moveTo(2, 8);
+  gazebo.lineTo(7, 4);
+  gazebo.lineTo(12, 8);
+  gazebo.lineTo(7, 9);
+  gazebo.closePath();
+  gazebo.fill(adjustBrightness$1(color2, 0.6));
+  gazebo.beginPath();
+  gazebo.moveTo(3, 6);
+  gazebo.lineTo(7, 3);
+  gazebo.lineTo(11, 6);
+  gazebo.lineTo(7, 7);
+  gazebo.closePath();
+  gazebo.fill(adjustBrightness$1(color2, 0.8));
+  gazebo.beginPath();
+  gazebo.moveTo(4, 4);
+  gazebo.lineTo(7, 2);
+  gazebo.lineTo(10, 4);
+  gazebo.lineTo(7, 5);
+  gazebo.closePath();
+  gazebo.fill(color2);
+  gazebo.rect(6, 0, 2, 2);
+  gazebo.fill(16766720);
+  return gazebo;
+}
+function generateBandstandSprite(color2) {
+  const bandstand = new Graphics();
+  bandstand.beginPath();
+  bandstand.moveTo(2, 16);
+  bandstand.lineTo(14, 16);
+  bandstand.lineTo(16, 14);
+  bandstand.lineTo(16, 11);
+  bandstand.lineTo(14, 9);
+  bandstand.lineTo(2, 9);
+  bandstand.lineTo(0, 11);
+  bandstand.lineTo(0, 14);
+  bandstand.closePath();
+  bandstand.fill(9139029);
+  bandstand.rect(2, 15, 12, 1);
+  bandstand.fill(6636321);
+  bandstand.rect(3, 9, 2, 6);
+  bandstand.fill(9127187);
+  bandstand.rect(11, 9, 2, 6);
+  bandstand.fill(9127187);
+  bandstand.beginPath();
+  bandstand.moveTo(0, 9);
+  bandstand.lineTo(8, 3);
+  bandstand.lineTo(16, 9);
+  bandstand.lineTo(8, 11);
+  bandstand.closePath();
+  bandstand.fill(adjustBrightness$1(color2, 0.6));
+  bandstand.beginPath();
+  bandstand.moveTo(2, 7);
+  bandstand.lineTo(8, 2);
+  bandstand.lineTo(14, 7);
+  bandstand.lineTo(8, 9);
+  bandstand.closePath();
+  bandstand.fill(adjustBrightness$1(color2, 0.8));
+  bandstand.beginPath();
+  bandstand.moveTo(4, 5);
+  bandstand.lineTo(8, 1);
+  bandstand.lineTo(12, 5);
+  bandstand.lineTo(8, 7);
+  bandstand.closePath();
+  bandstand.fill(color2);
+  bandstand.circle(8, 0, 2);
+  bandstand.fill(16766720);
+  bandstand.rect(3, 9, 10, 1);
+  bandstand.fill(adjustBrightness$1(color2, 1.2));
+  return bandstand;
+}
+function adjustBrightness$1(color2, factor) {
+  const r2 = color2 >> 16 & 255;
+  const g2 = color2 >> 8 & 255;
+  const b2 = color2 & 255;
+  const newR = Math.min(255, Math.floor(r2 * factor));
+  const newG = Math.min(255, Math.floor(g2 * factor));
+  const newB = Math.min(255, Math.floor(b2 * factor));
+  return newR << 16 | newG << 8 | newB;
+}
 function generateBuildingSprite(config) {
-  const { size, color: color2 = 13789470 } = config;
+  const { size, color: color2 = 13789470, stars, collaborators } = config;
   const building = new Graphics();
   const baseWidth = 40 * size;
   const baseDepth = 40 * size;
@@ -131130,9 +131544,85 @@ function generateBuildingSprite(config) {
   building.lineTo(isoWidth / 2, -height);
   building.lineTo(isoWidth / 2, 0);
   building.stroke();
-  building.circle(0, 0, 4);
-  building.fillStyle = { color: 16711680 };
-  building.fill();
+  if (stars && stars > 0) {
+    const tier = getStarTier(stars);
+    if (tier) {
+      let decoration;
+      switch (tier.decorationType) {
+        case "flag":
+          decoration = generateFlagSprite(tier.color);
+          break;
+        case "trophy":
+          decoration = generateTrophySprite(tier.color);
+          break;
+        case "statue":
+          decoration = generateStatueSprite(tier.color);
+          break;
+      }
+      const decorationX = isoWidth * 0.4;
+      const decorationY = -10;
+      decoration.x = decorationX;
+      decoration.y = decorationY;
+      decoration.scale.set(2.5);
+      building.addChild(decoration);
+      const countText = new Text({
+        text: formatStarCount(stars),
+        style: {
+          fontSize: 11,
+          fill: 16777215,
+          fontFamily: "Arial",
+          fontWeight: "bold",
+          stroke: { color: 0, width: 3 }
+        },
+        resolution: 2
+      });
+      countText.x = decorationX;
+      countText.y = decorationY + 20;
+      countText.anchor.set(0.5, 0);
+      building.addChild(countText);
+    }
+  }
+  if (collaborators && collaborators > 0) {
+    const tier = getCollaboratorTier(collaborators);
+    if (tier) {
+      let decoration;
+      switch (tier.decorationType) {
+        case "bench":
+          decoration = generateBenchSprite(tier.color);
+          break;
+        case "pavilion":
+          decoration = generatePavilionSprite(tier.color);
+          break;
+        case "gazebo":
+          decoration = generateGazeboSprite(tier.color);
+          break;
+        case "bandstand":
+          decoration = generateBandstandSprite(tier.color);
+          break;
+      }
+      const decorationX = -isoWidth * 0.4;
+      const decorationY = -10;
+      decoration.x = decorationX;
+      decoration.y = decorationY;
+      decoration.scale.set(2.5);
+      building.addChild(decoration);
+      const countText = new Text({
+        text: formatCollaboratorCount(collaborators),
+        style: {
+          fontSize: 11,
+          fill: 16777215,
+          fontFamily: "Arial",
+          fontWeight: "bold",
+          stroke: { color: 0, width: 3 }
+        },
+        resolution: 2
+      });
+      countText.x = decorationX;
+      countText.y = decorationY + 20;
+      countText.anchor.set(0.5, 0);
+      building.addChild(countText);
+    }
+  }
   return building;
 }
 function adjustBrightness(color2, factor) {
@@ -131213,7 +131703,11 @@ class IsometricRenderer {
     const paths = new Container();
     const nodes = new Container();
     if (showGrid) {
-      const grid = this.renderGrid(mapData.width, mapData.height, mapData.regions);
+      const grid = this.renderGrid(
+        mapData.width,
+        mapData.height,
+        mapData.regions
+      );
       background.addChild(grid);
     }
     const terrainContainer = this.renderTerrain(mapData.tiles);
@@ -131286,9 +131780,15 @@ class IsometricRenderer {
         };
         grid.beginPath();
         grid.moveTo(screenX, screenY);
-        grid.lineTo(screenX + this.tileWidth / 2, screenY + this.tileHeight / 2);
+        grid.lineTo(
+          screenX + this.tileWidth / 2,
+          screenY + this.tileHeight / 2
+        );
         grid.lineTo(screenX, screenY + this.tileHeight);
-        grid.lineTo(screenX - this.tileWidth / 2, screenY + this.tileHeight / 2);
+        grid.lineTo(
+          screenX - this.tileWidth / 2,
+          screenY + this.tileHeight / 2
+        );
         grid.closePath();
         grid.stroke();
       }
@@ -131367,7 +131867,10 @@ class IsometricRenderer {
     const totalLength = Math.sqrt(
       Math.pow(to2.screenX - from.screenX, 2) + Math.pow(to2.screenY - from.screenY, 2)
     );
-    const angle = Math.atan2(to2.screenY - from.screenY, to2.screenX - from.screenX);
+    const angle = Math.atan2(
+      to2.screenY - from.screenY,
+      to2.screenX - from.screenX
+    );
     let currentLength = 0;
     while (currentLength < totalLength) {
       const startX = from.screenX + Math.cos(angle) * currentLength;
@@ -131379,6 +131882,252 @@ class IsometricRenderer {
       currentLength += dashLength + gapLength;
     }
   }
+  /**
+   * Render a node with multiple sub-packages as a grouped cluster
+   */
+  renderSubdividedNode(node2) {
+    const { screenX, screenY } = gridToScreen(node2.gridX, node2.gridY);
+    const sizeMultiplier = node2.size || 1;
+    const container = new Container();
+    container.x = screenX;
+    container.y = screenY;
+    const footprintTiles = 4 * sizeMultiplier;
+    const footprintWidth = footprintTiles * this.tileWidth / 2;
+    const footprintHeight = footprintTiles * this.tileHeight / 2;
+    const subCount = node2.subdivisions.length;
+    const positions = [];
+    const spacing = 0.35;
+    if (subCount === 2) {
+      positions.push(
+        { x: -footprintWidth * spacing, y: 0 },
+        { x: footprintWidth * spacing, y: 0 }
+      );
+    } else if (subCount === 3) {
+      positions.push(
+        {
+          x: -footprintWidth * spacing * 0.6,
+          y: -footprintHeight * spacing * 0.6
+        },
+        {
+          x: footprintWidth * spacing * 0.6,
+          y: -footprintHeight * spacing * 0.6
+        },
+        { x: 0, y: footprintHeight * spacing * 0.8 }
+      );
+    } else if (subCount === 4) {
+      positions.push(
+        { x: -footprintWidth * spacing, y: -footprintHeight * spacing },
+        { x: footprintWidth * spacing, y: -footprintHeight * spacing },
+        { x: -footprintWidth * spacing, y: footprintHeight * spacing },
+        { x: footprintWidth * spacing, y: footprintHeight * spacing }
+      );
+    } else {
+      const cols = Math.ceil(Math.sqrt(subCount));
+      const rows = Math.ceil(subCount / cols);
+      for (let i2 = 0; i2 < subCount; i2++) {
+        const row2 = Math.floor(i2 / cols);
+        const col = i2 % cols;
+        const offsetX = (col - (cols - 1) / 2) * (footprintWidth * 2 * spacing / cols);
+        const offsetY = (row2 - (rows - 1) / 2) * (footprintHeight * 2 * spacing / rows);
+        positions.push({ x: offsetX, y: offsetY });
+      }
+    }
+    for (let i2 = 0; i2 < node2.subdivisions.length; i2++) {
+      const sub = node2.subdivisions[i2];
+      const texture = this.atlas[sub.sprite];
+      if (!texture) continue;
+      const sprite = new Sprite(texture);
+      const offset = positions[i2] || { x: 0, y: 0 };
+      const padding = 0.7;
+      const boundarySize = 4 * sub.size;
+      const boundaryWidth = boundarySize * this.tileWidth;
+      const boundaryHeight = boundarySize * this.tileHeight;
+      const baseScale = Math.min(
+        boundaryWidth * padding / texture.width,
+        boundaryHeight * padding / texture.height
+      );
+      sprite.scale.set(baseScale * 0.5);
+      sprite.x = offset.x;
+      sprite.y = offset.y;
+      sprite.anchor.set(0.5, 0.85);
+      if (node2.aging && node2.aging.colorFade > 0) {
+        const fadeAmount = node2.aging.colorFade;
+        const grayValue = Math.floor((1 - fadeAmount + fadeAmount * 0.6) * 255);
+        sprite.tint = grayValue << 16 | grayValue << 8 | grayValue;
+      }
+      container.addChild(sprite);
+      const subLabel = new Text({
+        text: sub.name,
+        style: {
+          fontSize: 10,
+          fill: 16777215,
+          fontFamily: "Arial",
+          fontWeight: "400"
+        },
+        resolution: 2
+      });
+      subLabel.x = offset.x;
+      subLabel.y = offset.y + sprite.height * 0.15 + 4;
+      subLabel.anchor.set(0.5, 0);
+      container.addChild(subLabel);
+    }
+    if (node2.stars && node2.stars > 0) {
+      const tier = getStarTier(node2.stars);
+      if (tier) {
+        let decoration;
+        switch (tier.decorationType) {
+          case "flag":
+            decoration = generateFlagSprite(tier.color);
+            break;
+          case "trophy":
+            decoration = generateTrophySprite(tier.color);
+            break;
+          case "statue":
+            decoration = generateStatueSprite(tier.color);
+            break;
+        }
+        const decorationX = 0;
+        const decorationY = -footprintHeight * 0.35;
+        decoration.x = decorationX;
+        decoration.y = decorationY;
+        decoration.scale.set(2.5);
+        container.addChild(decoration);
+        const countText = new Text({
+          text: formatStarCount(node2.stars),
+          style: {
+            fontSize: 11,
+            fill: 16777215,
+            fontFamily: "Arial",
+            fontWeight: "bold",
+            stroke: { color: 0, width: 3 }
+          },
+          resolution: 2
+        });
+        countText.x = decorationX;
+        countText.y = decorationY + 20;
+        countText.anchor.set(0.5, 0);
+        container.addChild(countText);
+      }
+    }
+    if (node2.collaborators && node2.collaborators > 0) {
+      const tier = getCollaboratorTier(node2.collaborators);
+      if (tier) {
+        let decoration;
+        switch (tier.decorationType) {
+          case "bench":
+            decoration = generateBenchSprite(tier.color);
+            break;
+          case "pavilion":
+            decoration = generatePavilionSprite(tier.color);
+            break;
+          case "gazebo":
+            decoration = generateGazeboSprite(tier.color);
+            break;
+          case "bandstand":
+            decoration = generateBandstandSprite(tier.color);
+            break;
+        }
+        const decorationX = -footprintWidth * 0.4;
+        const decorationY = -footprintHeight * 0.35;
+        decoration.x = decorationX;
+        decoration.y = decorationY;
+        decoration.scale.set(2.5);
+        container.addChild(decoration);
+        const countText = new Text({
+          text: formatCollaboratorCount(node2.collaborators),
+          style: {
+            fontSize: 11,
+            fill: 16777215,
+            fontFamily: "Arial",
+            fontWeight: "bold",
+            stroke: { color: 0, width: 3 }
+          },
+          resolution: 2
+        });
+        countText.x = decorationX;
+        countText.y = decorationY + 20;
+        countText.anchor.set(0.5, 0);
+        container.addChild(countText);
+      }
+    }
+    const highlight = this.createHighlight(
+      node2.gridX,
+      node2.gridY,
+      sizeMultiplier
+    );
+    highlight.visible = false;
+    highlight.zIndex = getIsometricZIndex(node2.gridX, node2.gridY);
+    const label = new Text({
+      text: node2.label,
+      style: {
+        fontSize: 11,
+        fill: 11184810,
+        // Lighter gray to distinguish from package labels
+        fontFamily: "Arial",
+        fontWeight: "500",
+        fontStyle: "italic"
+      },
+      resolution: 2
+    });
+    label.x = screenX;
+    label.y = screenY + footprintHeight * 0.6 + 12;
+    label.anchor.set(0.5, 0);
+    label.zIndex = highlight.zIndex + 0.2;
+    container.zIndex = highlight.zIndex;
+    let weathering;
+    if (node2.aging && node2.aging.weatheringLevel > 0.3) {
+      weathering = this.createWeathering(
+        screenX,
+        screenY,
+        80,
+        80,
+        node2.aging.weatheringLevel
+      );
+      weathering.zIndex = container.zIndex + 0.1;
+    }
+    const instance = {
+      sprite: container,
+      // Container acts as the sprite
+      highlight,
+      label,
+      weathering,
+      gridPosition: { gridX: node2.gridX, gridY: node2.gridY },
+      size: sizeMultiplier,
+      update: (gridX, gridY) => {
+        const pos = gridToScreen(gridX, gridY);
+        container.x = pos.screenX;
+        container.y = pos.screenY;
+        label.x = pos.screenX;
+        label.y = pos.screenY + footprintHeight * 0.6 + 12;
+        highlight.clear();
+        const hoverSize = 4 * sizeMultiplier;
+        const tileWidth = hoverSize * this.tileWidth;
+        const tileHeight = hoverSize * this.tileHeight;
+        highlight.strokeStyle = { width: 3, color: 16776960 };
+        highlight.fillStyle = { color: 16776960, alpha: 0.1 };
+        highlight.beginPath();
+        highlight.moveTo(pos.screenX, pos.screenY - tileHeight / 2);
+        highlight.lineTo(pos.screenX + tileWidth / 2, pos.screenY);
+        highlight.lineTo(pos.screenX, pos.screenY + tileHeight / 2);
+        highlight.lineTo(pos.screenX - tileWidth / 2, pos.screenY);
+        highlight.closePath();
+        highlight.fill();
+        highlight.stroke();
+        if (weathering) {
+          weathering.x = pos.screenX;
+          weathering.y = pos.screenY;
+        }
+        instance.gridPosition = { gridX, gridY };
+      },
+      destroy: () => {
+        container.destroy({ children: true });
+        highlight.destroy();
+        label.destroy();
+        weathering == null ? void 0 : weathering.destroy();
+      }
+    };
+    return instance;
+  }
   /**
    * Render sprites with scaling, aging, and weathering effects
    * Extracted from OverworldMapPanel.tsx lines 457-507
@@ -131386,6 +132135,11 @@ class IsometricRenderer {
   renderSprites(nodes) {
     const spriteInstances = /* @__PURE__ */ new Map();
     for (const node2 of nodes) {
+      if (node2.subdivisions && node2.subdivisions.length > 1) {
+        const instance2 = this.renderSubdividedNode(node2);
+        spriteInstances.set(node2.id, instance2);
+        continue;
+      }
       const texture = this.atlas[node2.sprite];
       if (!texture) continue;
       const sprite = new Sprite(texture);
@@ -131410,7 +132164,11 @@ class IsometricRenderer {
         sprite.tint = grayValue << 16 | grayValue << 8 | grayValue;
       }
       sprite.zIndex = getIsometricZIndex(node2.gridX, node2.gridY);
-      const highlight = this.createHighlight(node2.gridX, node2.gridY, sizeMultiplier);
+      const highlight = this.createHighlight(
+        node2.gridX,
+        node2.gridY,
+        sizeMultiplier
+      );
       highlight.visible = false;
       highlight.zIndex = sprite.zIndex;
       let weathering;
@@ -132365,19 +133123,27 @@ function nodesToUnifiedOverworldMap(nodes, options = {}) {
         }
       }
       if (needsPositioning.length > 0) {
-        const result = layoutSpritesInRegion(needsPositioning, {
-          width: REGION_SIZE_TILES,
-          height: REGION_SIZE_TILES
-        }, { spacing: 0.5 });
-        placedNodes.push(...result.placed.map((node2) => ({
-          id: node2.id,
-          gridX: region.bounds.x + node2.gridX,
-          gridY: region.bounds.y + node2.gridY,
-          size: node2.size,
-          language: node2.language
-        })));
+        const result = layoutSpritesInRegion(
+          needsPositioning,
+          {
+            width: REGION_SIZE_TILES,
+            height: REGION_SIZE_TILES
+          },
+          { spacing: 0.5 }
+        );
+        placedNodes.push(
+          ...result.placed.map((node2) => ({
+            id: node2.id,
+            gridX: region.bounds.x + node2.gridX,
+            gridY: region.bounds.y + node2.gridY,
+            size: node2.size,
+            language: node2.language
+          }))
+        );
         if (result.overflow.length > 0) {
-          console.warn(`[nodesToUnifiedOverworldMap] ${result.overflow.length} nodes didn't fit in region ${region.name}`);
+          console.warn(
+            `[nodesToUnifiedOverworldMap] ${result.overflow.length} nodes didn't fit in region ${region.name}`
+          );
         }
       }
       region.nodes = placedNodes;
@@ -132390,10 +133156,20 @@ function nodesToUnifiedOverworldMap(nodes, options = {}) {
       });
       if (hasAgeData && layoutRegions.length >= 2) {
         const regionMapping = /* @__PURE__ */ new Map();
-        const ageBuckets = ["LAST_MONTH", "LAST_3_MONTHS", "LAST_YEAR", "OLDER"];
+        const ageBuckets = [
+          "LAST_MONTH",
+          "LAST_3_MONTHS",
+          "LAST_YEAR",
+          "OLDER"
+        ];
         ageBuckets.forEach((bucket, index2) => {
-          const regionIndex = Math.floor(index2 / ageBuckets.length * layoutRegions.length);
-          regionMapping.set(bucket, layoutRegions[Math.min(regionIndex, layoutRegions.length - 1)]);
+          const regionIndex = Math.floor(
+            index2 / ageBuckets.length * layoutRegions.length
+          );
+          regionMapping.set(
+            bucket,
+            layoutRegions[Math.min(regionIndex, layoutRegions.length - 1)]
+          );
         });
         const getAgeBucket2 = (lastEditedAt) => {
           if (!lastEditedAt) return "OLDER";
@@ -132416,35 +133192,51 @@ function nodesToUnifiedOverworldMap(nodes, options = {}) {
         }
         for (const [bucket, nodes2] of nodesByAge.entries()) {
           const targetRegion = regionMapping.get(bucket) || layoutRegions[0];
-          const result = layoutSpritesInRegion(nodes2, {
+          const result = layoutSpritesInRegion(
+            nodes2,
+            {
+              width: REGION_SIZE_TILES,
+              height: REGION_SIZE_TILES
+            },
+            { spacing: 0.5 }
+          );
+          targetRegion.nodes.push(
+            ...result.placed.map((node2) => ({
+              id: node2.id,
+              gridX: targetRegion.bounds.x + node2.gridX,
+              gridY: targetRegion.bounds.y + node2.gridY,
+              size: node2.size,
+              language: node2.language
+            }))
+          );
+        }
+      } else {
+        const firstRegion = layoutRegions[0];
+        const result = layoutSpritesInRegion(
+          unassignedNodes,
+          {
             width: REGION_SIZE_TILES,
             height: REGION_SIZE_TILES
-          }, { spacing: 0.5 });
-          targetRegion.nodes.push(...result.placed.map((node2) => ({
+          },
+          { spacing: 0.5 }
+        );
+        firstRegion.nodes.push(
+          ...result.placed.map((node2) => ({
             id: node2.id,
-            gridX: targetRegion.bounds.x + node2.gridX,
-            gridY: targetRegion.bounds.y + node2.gridY,
+            gridX: firstRegion.bounds.x + node2.gridX,
+            gridY: firstRegion.bounds.y + node2.gridY,
             size: node2.size,
             language: node2.language
-          })));
-        }
-      } else {
-        const firstRegion = layoutRegions[0];
-        const result = layoutSpritesInRegion(unassignedNodes, {
-          width: REGION_SIZE_TILES,
-          height: REGION_SIZE_TILES
-        }, { spacing: 0.5 });
-        firstRegion.nodes.push(...result.placed.map((node2) => ({
-          id: node2.id,
-          gridX: firstRegion.bounds.x + node2.gridX,
-          gridY: firstRegion.bounds.y + node2.gridY,
-          size: node2.size,
-          language: node2.language
-        })));
+          }))
+        );
       }
     }
   } else {
-    const autoLayoutRegions = layoutSpritesMultiRegion(layoutNodes, REGION_SIZE_TILES, { spacing: 0.5 });
+    const autoLayoutRegions = layoutSpritesMultiRegion(
+      layoutNodes,
+      REGION_SIZE_TILES,
+      { spacing: 0.5 }
+    );
     layoutRegions = autoLayoutRegions.map((region, index2) => ({
       regionId: region.regionId,
       name: region.name || `Region ${index2 + 1}`,
@@ -132457,7 +133249,12 @@ function nodesToUnifiedOverworldMap(nodes, options = {}) {
         regionId: "region-0-0",
         name: "Main",
         gridPosition: { row: 0, col: 0 },
-        bounds: { x: 0, y: 0, width: REGION_SIZE_TILES, height: REGION_SIZE_TILES },
+        bounds: {
+          x: 0,
+          y: 0,
+          width: REGION_SIZE_TILES,
+          height: REGION_SIZE_TILES
+        },
         nodes: []
       });
     }
@@ -132474,16 +133271,37 @@ function nodesToUnifiedOverworldMap(nodes, options = {}) {
     }
   }
   const locationNodes = nodeWithSizes.map((node2) => {
-    const pos = nodePositions.get(node2.id) || { gridX: 0, gridY: 0, size: node2.size };
+    var _a2;
+    const pos = nodePositions.get(node2.id) || {
+      gridX: 0,
+      gridY: 0,
+      size: node2.size
+    };
     const isRoot = node2.isRoot || false;
     const theme2 = getCategoryTheme(node2.category, options.getCategoryTheme);
     const nodeType = options.getNodeType ? options.getNodeType(node2) : determineNodeType(node2, isRoot);
     const size = node2.size;
     const color2 = options.getNodeColor ? options.getNodeColor(node2) : getCategoryColor(node2.category || node2.language, isRoot);
-    const spriteKey = `building-${size.toFixed(2)}-${color2}`;
-    const packageType = ["node", "python", "cargo", "go", "package"].includes(
+    const spriteKey = `building-${size.toFixed(2)}-${color2}-${node2.stars || 0}-${node2.collaborators || 0}`;
+    const validPackageTypes = [
+      "node",
+      "python",
+      "cargo",
+      "go",
+      "package"
+    ];
+    const packageType = validPackageTypes.includes(
       node2.category
     ) ? node2.category : "package";
+    const subdivisions = (_a2 = node2.packages) == null ? void 0 : _a2.map((pkg) => {
+      const pkgColor = getCategoryColor(pkg.language, false);
+      return {
+        name: pkg.name,
+        size: pkg.size,
+        sprite: `building-${pkg.size.toFixed(2)}-${pkgColor}-0-0`
+        // Subdivisions don't have individual decorations
+      };
+    });
     return {
       id: node2.id,
       gridX: pos.gridX,
@@ -132496,7 +133314,10 @@ function nodesToUnifiedOverworldMap(nodes, options = {}) {
       packageType,
       isRoot,
       color: color2,
-      aging: node2.aging
+      aging: node2.aging,
+      subdivisions,
+      stars: node2.stars,
+      collaborators: node2.collaborators
     };
   });
   const paths = [];
@@ -132617,13 +133438,18 @@ const OverworldMapPanelContent = ({
   const rendererRef = useRef(null);
   const [isRendering, setIsRendering] = useState(true);
   const [isResizing, setIsResizing] = useState(false);
+  const [initializationComplete, setInitializationComplete] = useState(0);
   const dimensionsRef = useRef({ width: width || 800, height: height || 600 });
   const placeholdersRef = useRef(null);
   const sceneContainersRef = useRef(null);
-  const offsetRef = useRef({ offsetX: 0, offsetY: 0 });
+  const offsetRef = useRef({
+    offsetX: 0,
+    offsetY: 0
+  });
   const renderPlaceholdersRef = useRef(null);
   const mapDataRef = useRef(null);
   const isEditingRegionsRef = useRef(isEditingRegions);
+  const isInitializedRef = useRef(false);
   const [currentRegionIndex, setCurrentRegionIndex] = useState(0);
   const [isAnimating, setIsAnimating] = useState(false);
   const animationRef = useRef(null);
@@ -132636,14 +133462,12 @@ const OverworldMapPanelContent = ({
     return nodes.map((n2) => n2.id).sort().join(",");
   }, [collectionKey, nodes]);
   const mapData = useMemo(() => {
-    console.log("[OverworldMapPanel] mapData memo recalculating", { nodeCount: nodes.length, customRegions: customRegions.length });
     const map2 = nodesToUnifiedOverworldMap(nodes, {
       includeDevDependencies,
       regionLayout,
       customRegions
       // Pass through custom regions for manual layout
     });
-    console.log("[OverworldMapPanel] mapData created:", { mapNodeCount: map2.nodes.length, mapRegions: map2.regions.length });
     mapDataRef.current = map2;
     return map2;
   }, [nodes, includeDevDependencies, regionLayout, customRegions]);
@@ -132653,6 +133477,9 @@ const OverworldMapPanelContent = ({
     const isCollectionChange = previousCollectionKeyRef.current !== stableCollectionKey;
     const isRegionOnlyUpdate = !isCollectionChange && previousCollectionKeyRef.current !== null;
     previousCollectionKeyRef.current = stableCollectionKey;
+    if (isCollectionChange) {
+      isInitializedRef.current = false;
+    }
     if (isRegionOnlyUpdate && viewportRef.current && rendererRef.current) {
       const renderer = rendererRef.current;
       const viewport = viewportRef.current;
@@ -132689,7 +133516,10 @@ const OverworldMapPanelContent = ({
       }
       const containerWidth = ((_a = canvasRef.current) == null ? void 0 : _a.clientWidth) || width || 800;
       const containerHeight = ((_b = canvasRef.current) == null ? void 0 : _b.clientHeight) || height || 600;
-      dimensionsRef.current = { width: containerWidth, height: containerHeight };
+      dimensionsRef.current = {
+        width: containerWidth,
+        height: containerHeight
+      };
       app = new Application();
       await app.init({
         width: containerWidth,
@@ -132760,19 +133590,27 @@ const OverworldMapPanelContent = ({
       const placeholdersContainer = new Container();
       viewport.addChild(placeholdersContainer);
       placeholdersRef.current = placeholdersContainer;
-      const pathConnections = Array.from(scene.pathGraphics.entries()).map(([id2, graphics]) => {
-        const pathData = mapData.paths.find((p2) => `${p2.from}-${p2.to}` === id2);
-        return {
-          id: id2,
-          fromNodeId: (pathData == null ? void 0 : pathData.from) || "",
-          toNodeId: (pathData == null ? void 0 : pathData.to) || "",
-          graphics
-        };
-      });
+      const pathConnections = Array.from(scene.pathGraphics.entries()).map(
+        ([id2, graphics]) => {
+          const pathData = mapData.paths.find(
+            (p2) => `${p2.from}-${p2.to}` === id2
+          );
+          return {
+            id: id2,
+            fromNodeId: (pathData == null ? void 0 : pathData.from) || "",
+            toNodeId: (pathData == null ? void 0 : pathData.to) || "",
+            graphics
+          };
+        }
+      );
       const nodePositions = new Map(
         mapData.nodes.map((n2) => [n2.id, { gridX: n2.gridX, gridY: n2.gridY }])
       );
-      const pathManager = new IsometricPathManager(pathConnections, nodePositions, renderer);
+      const pathManager = new IsometricPathManager(
+        pathConnections,
+        nodePositions,
+        renderer
+      );
       const interaction = new IsometricInteractionManager(
         {
           viewport,
@@ -132803,7 +133641,10 @@ const OverworldMapPanelContent = ({
       interactionRef.current = interaction;
       pathManagerRef.current = pathManager;
       if (savedCameraPosition.current) {
-        viewport.moveCenter(savedCameraPosition.current.x, savedCameraPosition.current.y);
+        viewport.moveCenter(
+          savedCameraPosition.current.x,
+          savedCameraPosition.current.y
+        );
         viewport.setZoom(savedCameraPosition.current.scale);
       } else if (mapData.regions.length > 0 && !hasInitializedCamera.current) {
         const firstRegion = mapData.regions[0];
@@ -132852,15 +133693,29 @@ const OverworldMapPanelContent = ({
         if (!placeholdersRef.current || !mapDataRef.current) return;
         placeholdersRef.current.removeChildren();
         if (!isEditingRegionsRef.current || !onAddRegion) return;
-        const adjacentPositions = findAdjacentEmptyPositions(mapDataRef.current.regions);
+        const adjacentPositions = findAdjacentEmptyPositions(
+          mapDataRef.current.regions
+        );
         const regionSize = ((_a2 = mapDataRef.current.regions[0]) == null ? void 0 : _a2.bounds.width) || 25;
         const placeholderColor = 2278750;
         adjacentPositions.forEach((pos) => {
           const placeholder = new Graphics();
-          const topLeft = gridToScreen(pos.col * regionSize, pos.row * regionSize);
-          const topRight = gridToScreen(pos.col * regionSize + regionSize, pos.row * regionSize);
-          const bottomLeft = gridToScreen(pos.col * regionSize, pos.row * regionSize + regionSize);
-          const bottomRight = gridToScreen(pos.col * regionSize + regionSize, pos.row * regionSize + regionSize);
+          const topLeft = gridToScreen(
+            pos.col * regionSize,
+            pos.row * regionSize
+          );
+          const topRight = gridToScreen(
+            pos.col * regionSize + regionSize,
+            pos.row * regionSize
+          );
+          const bottomLeft = gridToScreen(
+            pos.col * regionSize,
+            pos.row * regionSize + regionSize
+          );
+          const bottomRight = gridToScreen(
+            pos.col * regionSize + regionSize,
+            pos.row * regionSize + regionSize
+          );
           placeholder.setStrokeStyle({
             width: 2,
             color: placeholderColor,
@@ -132887,10 +133742,22 @@ const OverworldMapPanelContent = ({
             color: placeholderColor,
             alpha: 0.8
           });
-          placeholder.moveTo(centerScreen.screenX - iconSize / 2, centerScreen.screenY);
-          placeholder.lineTo(centerScreen.screenX + iconSize / 2, centerScreen.screenY);
-          placeholder.moveTo(centerScreen.screenX, centerScreen.screenY - iconSize / 2);
-          placeholder.lineTo(centerScreen.screenX, centerScreen.screenY + iconSize / 2);
+          placeholder.moveTo(
+            centerScreen.screenX - iconSize / 2,
+            centerScreen.screenY
+          );
+          placeholder.lineTo(
+            centerScreen.screenX + iconSize / 2,
+            centerScreen.screenY
+          );
+          placeholder.moveTo(
+            centerScreen.screenX,
+            centerScreen.screenY - iconSize / 2
+          );
+          placeholder.lineTo(
+            centerScreen.screenX,
+            centerScreen.screenY + iconSize / 2
+          );
           placeholder.stroke();
           placeholder.eventMode = "static";
           placeholder.cursor = "pointer";
@@ -132919,10 +133786,22 @@ const OverworldMapPanelContent = ({
               color: placeholderColor,
               alpha: 1
             });
-            placeholder.moveTo(centerScreen.screenX - iconSize2 / 2, centerScreen.screenY);
-            placeholder.lineTo(centerScreen.screenX + iconSize2 / 2, centerScreen.screenY);
-            placeholder.moveTo(centerScreen.screenX, centerScreen.screenY - iconSize2 / 2);
-            placeholder.lineTo(centerScreen.screenX, centerScreen.screenY + iconSize2 / 2);
+            placeholder.moveTo(
+              centerScreen.screenX - iconSize2 / 2,
+              centerScreen.screenY
+            );
+            placeholder.lineTo(
+              centerScreen.screenX + iconSize2 / 2,
+              centerScreen.screenY
+            );
+            placeholder.moveTo(
+              centerScreen.screenX,
+              centerScreen.screenY - iconSize2 / 2
+            );
+            placeholder.lineTo(
+              centerScreen.screenX,
+              centerScreen.screenY + iconSize2 / 2
+            );
             placeholder.stroke();
           });
           placeholder.on("pointerleave", () => {
@@ -132949,10 +133828,22 @@ const OverworldMapPanelContent = ({
               color: placeholderColor,
               alpha: 0.8
             });
-            placeholder.moveTo(centerScreen.screenX - iconSize2 / 2, centerScreen.screenY);
-            placeholder.lineTo(centerScreen.screenX + iconSize2 / 2, centerScreen.screenY);
-            placeholder.moveTo(centerScreen.screenX, centerScreen.screenY - iconSize2 / 2);
-            placeholder.lineTo(centerScreen.screenX, centerScreen.screenY + iconSize2 / 2);
+            placeholder.moveTo(
+              centerScreen.screenX - iconSize2 / 2,
+              centerScreen.screenY
+            );
+            placeholder.lineTo(
+              centerScreen.screenX + iconSize2 / 2,
+              centerScreen.screenY
+            );
+            placeholder.moveTo(
+              centerScreen.screenX,
+              centerScreen.screenY - iconSize2 / 2
+            );
+            placeholder.lineTo(
+              centerScreen.screenX,
+              centerScreen.screenY + iconSize2 / 2
+            );
             placeholder.stroke();
           });
           placeholder.on("pointerdown", () => {
@@ -132980,6 +133871,8 @@ const OverworldMapPanelContent = ({
         }
       });
       setIsRendering(false);
+      isInitializedRef.current = true;
+      setInitializationComplete((prev) => prev + 1);
     };
     let resizeObserver = null;
     let resizeTimeout = null;
@@ -133009,6 +133902,7 @@ const OverworldMapPanelContent = ({
     initAndSetupResize();
     return () => {
       cleanup = true;
+      isInitializedRef.current = false;
       if (resizeTimeout) {
         clearTimeout(resizeTimeout);
       }
@@ -133035,43 +133929,48 @@ const OverworldMapPanelContent = ({
   }, [stableCollectionKey, width, height]);
   useEffect(() => {
     var _a;
-    console.log("[OverworldMapPanel] Scene render effect triggered", { hasViewport: !!viewportRef.current, hasRenderer: !!rendererRef.current, hasMapData: !!mapData });
-    if (!viewportRef.current || !rendererRef.current || !mapData || !appRef.current) return;
+    if (!isInitializedRef.current) {
+      return;
+    }
+    if (!viewportRef.current || !rendererRef.current || !mapData || !appRef.current) {
+      return;
+    }
     if ((_a = interactionRef.current) == null ? void 0 : _a.isDragging()) {
-      console.log("[OverworldMapPanel] Skipping scene re-render - drag in progress");
       return;
     }
-    console.log("[OverworldMapPanel] Re-rendering scene with", { nodes: mapData.nodes.length, regions: mapData.regions.length });
     const renderer = rendererRef.current;
     const viewport = viewportRef.current;
     const app = appRef.current;
-    const existingKeys = new Set(renderer.getTextureKeys().filter((k2) => k2.startsWith("building-")));
     const neededCombos = /* @__PURE__ */ new Set();
     for (const node2 of mapData.nodes) {
-      const key = `building-${node2.size.toFixed(2)}-${node2.color}`;
-      neededCombos.add(key);
+      neededCombos.add(node2.sprite);
+      if (node2.subdivisions) {
+        for (const sub of node2.subdivisions) {
+          neededCombos.add(sub.sprite);
+        }
+      }
     }
-    console.log("[OverworldMapPanel] Checking sprites:", { existing: existingKeys.size, needed: neededCombos.size });
-    let generatedCount = 0;
     for (const key of neededCombos) {
       if (!renderer.hasTexture(key)) {
-        const [, sizeStr, colorHex] = key.split("-");
+        const [, sizeStr, colorHex, starsStr, collaboratorsStr] = key.split("-");
         const size = parseFloat(sizeStr);
         const color2 = parseInt(colorHex.replace("#", ""), 16);
-        console.log("[OverworldMapPanel] Generating missing sprite:", { key, size, color: color2 });
-        const buildingGraphics = generateBuildingSprite({ size, color: color2 });
+        const stars = parseInt(starsStr) || 0;
+        const collaborators = parseInt(collaboratorsStr) || 0;
+        const buildingGraphics = generateBuildingSprite({
+          size,
+          color: color2,
+          stars,
+          collaborators
+        });
         const texture = app.renderer.generateTexture({
           target: buildingGraphics,
           resolution: 2
         });
         renderer.addTexture(key, texture);
         buildingGraphics.destroy();
-        generatedCount++;
       }
     }
-    if (generatedCount > 0) {
-      console.log("[OverworldMapPanel] Generated", generatedCount, "new sprite textures");
-    }
     if (sceneContainersRef.current) {
       viewport.removeChild(sceneContainersRef.current.background);
       viewport.removeChild(sceneContainersRef.current.tiles);
@@ -133084,9 +133983,7 @@ const OverworldMapPanelContent = ({
       sceneContainersRef.current.paths.destroy({ children: true });
       sceneContainersRef.current.nodes.destroy({ children: true });
     }
-    console.log("[OverworldMapPanel] Calling renderer.renderScene...");
     const scene = renderer.renderScene(mapData, true);
-    console.log("[OverworldMapPanel] Scene rendered, sprite count:", scene.spriteInstances.size);
     viewport.addChild(scene.background);
     viewport.addChild(scene.tiles);
     viewport.addChild(scene.bridges);
@@ -133103,7 +134000,7 @@ const OverworldMapPanelContent = ({
     if (renderPlaceholdersRef.current) {
       renderPlaceholdersRef.current();
     }
-  }, [mapData]);
+  }, [mapData, initializationComplete]);
   useEffect(() => {
     if (!viewportRef.current || !mapData || isRendering) return;
     const region = mapData.regions[currentRegionIndex] || mapData.regions[0];
@@ -133136,176 +134033,223 @@ const OverworldMapPanelContent = ({
       renderPlaceholdersRef.current();
     }
   }, [isEditingRegions]);
-  return /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: "100%", height: "100%", overflow: "hidden" }, children: [
-    (isLoading || isRendering) && /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          top: 0,
-          left: 0,
-          width: "100%",
-          height: "100%",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          backgroundColor: "#87ceeb",
-          fontFamily: "monospace",
-          color: "#ffffff",
-          zIndex: 10
-        },
-        children: "Loading map..."
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: canvasRef,
-        style: {
-          width: "100%",
-          height: "100%",
-          imageRendering: "pixelated",
-          border: "2px solid #1f2937",
-          boxSizing: "border-box",
-          backgroundColor: "#1a1a1a",
-          // Match Pixi background to prevent flash
-          opacity: isResizing ? 0.95 : 1,
-          transition: "opacity 0.1s ease-out"
-        }
-      }
-    ),
-    mapData.regions.length > 1 && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          top: 8,
-          left: "50%",
-          transform: "translateX(-50%)",
-          display: "flex",
-          alignItems: "center",
-          gap: "12px",
-          padding: "8px 16px",
-          backgroundColor: "rgba(0, 0, 0, 0.85)",
-          color: "#ffffff",
-          fontFamily: "monospace",
-          fontSize: 14,
-          borderRadius: 6,
-          border: "2px solid #fbbf24",
-          boxShadow: "0 4px 8px rgba(0, 0, 0, 0.3)",
-          pointerEvents: "auto"
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: () => !isAnimating && setCurrentRegionIndex((prev) => Math.max(0, prev - 1)),
-              disabled: currentRegionIndex === 0 || isAnimating,
-              style: {
-                background: currentRegionIndex === 0 || isAnimating ? "rgba(100, 100, 100, 0.3)" : "rgba(251, 191, 36, 0.2)",
-                border: "1px solid #fbbf24",
-                borderRadius: 4,
-                padding: "4px 8px",
-                cursor: currentRegionIndex === 0 || isAnimating ? "not-allowed" : "pointer",
-                display: "flex",
-                alignItems: "center",
-                opacity: currentRegionIndex === 0 || isAnimating ? 0.5 : 1
-              },
-              children: /* @__PURE__ */ jsx(ChevronLeft$1, { size: 16, color: "#fbbf24" })
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "relative",
+        width: "100%",
+        height: "100%",
+        overflow: "hidden"
+      },
+      children: [
+        (isLoading || isRendering) && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: "100%",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: "#87ceeb",
+              fontFamily: "monospace",
+              color: "#ffffff",
+              zIndex: 10
+            },
+            children: "Loading map..."
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: canvasRef,
+            style: {
+              width: "100%",
+              height: "100%",
+              imageRendering: "pixelated",
+              border: "2px solid #1f2937",
+              boxSizing: "border-box",
+              backgroundColor: "#1a1a1a",
+              // Match Pixi background to prevent flash
+              opacity: isResizing ? 0.95 : 1,
+              transition: "opacity 0.1s ease-out"
             }
-          ),
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "2px" }, children: [
-            /* @__PURE__ */ jsxs("div", { style: { fontSize: 16, fontWeight: "bold", color: "#fbbf24", display: "flex", alignItems: "center", gap: "8px" }, children: [
-              currentRegion.name,
-              isEditingRegions && /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    onClick: () => {
-                      const newName = prompt("Rename region:", currentRegion.name);
-                      if (newName && newName.trim() && newName !== currentRegion.name) {
-                        const matchingRegion = customRegions.find((r2) => r2.name === currentRegion.name);
-                        if (matchingRegion && onRenameRegion) {
-                          onRenameRegion(matchingRegion.id, newName.trim());
-                        }
-                      }
-                    },
-                    style: {
-                      background: "rgba(59, 130, 246, 0.2)",
-                      border: "1px solid #3b82f6",
-                      borderRadius: 3,
-                      padding: "2px 6px",
-                      cursor: "pointer",
-                      fontSize: 10,
-                      color: "#3b82f6",
-                      fontWeight: "normal"
-                    },
-                    title: "Rename region",
-                    children: "Rename"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    onClick: () => {
-                      if (confirm(`Delete region "${currentRegion.name}"? Repositories will be unassigned.`)) {
-                        const matchingRegion = customRegions.find((r2) => r2.name === currentRegion.name);
-                        if (matchingRegion && onDeleteRegion) {
-                          onDeleteRegion(matchingRegion.id);
-                          if (currentRegionIndex > 0) {
-                            setCurrentRegionIndex((prev) => prev - 1);
-                          }
-                        }
+          }
+        ),
+        mapData.regions.length > 1 && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 8,
+              left: "50%",
+              transform: "translateX(-50%)",
+              display: "flex",
+              alignItems: "center",
+              gap: "12px",
+              padding: "8px 16px",
+              backgroundColor: "rgba(0, 0, 0, 0.85)",
+              color: "#ffffff",
+              fontFamily: "monospace",
+              fontSize: 14,
+              borderRadius: 6,
+              border: "2px solid #fbbf24",
+              boxShadow: "0 4px 8px rgba(0, 0, 0, 0.3)",
+              pointerEvents: "auto"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => !isAnimating && setCurrentRegionIndex((prev) => Math.max(0, prev - 1)),
+                  disabled: currentRegionIndex === 0 || isAnimating,
+                  style: {
+                    background: currentRegionIndex === 0 || isAnimating ? "rgba(100, 100, 100, 0.3)" : "rgba(251, 191, 36, 0.2)",
+                    border: "1px solid #fbbf24",
+                    borderRadius: 4,
+                    padding: "4px 8px",
+                    cursor: currentRegionIndex === 0 || isAnimating ? "not-allowed" : "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    opacity: currentRegionIndex === 0 || isAnimating ? 0.5 : 1
+                  },
+                  children: /* @__PURE__ */ jsx(ChevronLeft$1, { size: 16, color: "#fbbf24" })
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    gap: "2px"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          fontSize: 16,
+                          fontWeight: "bold",
+                          color: "#fbbf24",
+                          display: "flex",
+                          alignItems: "center",
+                          gap: "8px"
+                        },
+                        children: [
+                          currentRegion.name,
+                          isEditingRegions && /* @__PURE__ */ jsxs(Fragment, { children: [
+                            /* @__PURE__ */ jsx(
+                              "button",
+                              {
+                                onClick: () => {
+                                  const newName = prompt(
+                                    "Rename region:",
+                                    currentRegion.name
+                                  );
+                                  if (newName && newName.trim() && newName !== currentRegion.name) {
+                                    const matchingRegion = customRegions.find(
+                                      (r2) => r2.name === currentRegion.name
+                                    );
+                                    if (matchingRegion && onRenameRegion) {
+                                      onRenameRegion(matchingRegion.id, newName.trim());
+                                    }
+                                  }
+                                },
+                                style: {
+                                  background: "rgba(59, 130, 246, 0.2)",
+                                  border: "1px solid #3b82f6",
+                                  borderRadius: 3,
+                                  padding: "2px 6px",
+                                  cursor: "pointer",
+                                  fontSize: 10,
+                                  color: "#3b82f6",
+                                  fontWeight: "normal"
+                                },
+                                title: "Rename region",
+                                children: "Rename"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "button",
+                              {
+                                onClick: () => {
+                                  if (confirm(
+                                    `Delete region "${currentRegion.name}"? Repositories will be unassigned.`
+                                  )) {
+                                    const matchingRegion = customRegions.find(
+                                      (r2) => r2.name === currentRegion.name
+                                    );
+                                    if (matchingRegion && onDeleteRegion) {
+                                      onDeleteRegion(matchingRegion.id);
+                                      if (currentRegionIndex > 0) {
+                                        setCurrentRegionIndex((prev) => prev - 1);
+                                      }
+                                    }
+                                  }
+                                },
+                                style: {
+                                  background: "rgba(239, 68, 68, 0.2)",
+                                  border: "1px solid #ef4444",
+                                  borderRadius: 3,
+                                  padding: "2px 6px",
+                                  cursor: "pointer",
+                                  fontSize: 10,
+                                  color: "#ef4444",
+                                  fontWeight: "normal"
+                                },
+                                title: "Delete region",
+                                children: "Delete"
+                              }
+                            )
+                          ] })
+                        ]
                       }
-                    },
-                    style: {
-                      background: "rgba(239, 68, 68, 0.2)",
-                      border: "1px solid #ef4444",
-                      borderRadius: 3,
-                      padding: "2px 6px",
-                      cursor: "pointer",
-                      fontSize: 10,
-                      color: "#ef4444",
-                      fontWeight: "normal"
-                    },
-                    title: "Delete region",
-                    children: "Delete"
-                  }
-                )
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { style: { fontSize: 10, color: "#94a3b8" }, children: [
-              "Region ",
-              currentRegionIndex + 1,
-              " of ",
-              mapData.regions.length,
-              " | ",
-              currentRegion.nodeIds.length,
-              " packages"
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: () => !isAnimating && setCurrentRegionIndex((prev) => Math.min(mapData.regions.length - 1, prev + 1)),
-              disabled: currentRegionIndex === mapData.regions.length - 1 || isAnimating,
-              style: {
-                background: currentRegionIndex === mapData.regions.length - 1 || isAnimating ? "rgba(100, 100, 100, 0.3)" : "rgba(251, 191, 36, 0.2)",
-                border: "1px solid #fbbf24",
-                borderRadius: 4,
-                padding: "4px 8px",
-                cursor: currentRegionIndex === mapData.regions.length - 1 || isAnimating ? "not-allowed" : "pointer",
-                display: "flex",
-                alignItems: "center",
-                opacity: currentRegionIndex === mapData.regions.length - 1 || isAnimating ? 0.5 : 1
-              },
-              children: /* @__PURE__ */ jsx(ChevronRight$1, { size: 16, color: "#fbbf24" })
-            }
-          )
-        ]
-      }
-    )
-  ] });
+                    ),
+                    /* @__PURE__ */ jsxs("div", { style: { fontSize: 10, color: "#94a3b8" }, children: [
+                      "Region ",
+                      currentRegionIndex + 1,
+                      " of ",
+                      mapData.regions.length,
+                      " |",
+                      " ",
+                      currentRegion.nodeIds.length,
+                      " packages"
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => !isAnimating && setCurrentRegionIndex(
+                    (prev) => Math.min(mapData.regions.length - 1, prev + 1)
+                  ),
+                  disabled: currentRegionIndex === mapData.regions.length - 1 || isAnimating,
+                  style: {
+                    background: currentRegionIndex === mapData.regions.length - 1 || isAnimating ? "rgba(100, 100, 100, 0.3)" : "rgba(251, 191, 36, 0.2)",
+                    border: "1px solid #fbbf24",
+                    borderRadius: 4,
+                    padding: "4px 8px",
+                    cursor: currentRegionIndex === mapData.regions.length - 1 || isAnimating ? "not-allowed" : "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    opacity: currentRegionIndex === mapData.regions.length - 1 || isAnimating ? 0.5 : 1
+                  },
+                  children: /* @__PURE__ */ jsx(ChevronRight$1, { size: 16, color: "#fbbf24" })
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
 };
 const SIZE_TIERS = [1, 1.5, 2, 2.5, 3, 3.5, 4];
 function roundToNearestTier(size) {
@@ -133328,6 +134272,44 @@ function calculateRepositorySize(metrics) {
   }
   return 1;
 }
+function calculatePackageFileCount(fileSets) {
+  return fileSets.reduce((total, fileSet) => {
+    var _a;
+    if (fileSet.fileCount !== void 0) {
+      return total + fileSet.fileCount;
+    }
+    if ((_a = fileSet.matchedFiles) == null ? void 0 : _a.length) {
+      return total + fileSet.matchedFiles.length;
+    }
+    return total;
+  }, 0);
+}
+function extractPackageInfo(repository) {
+  if (!repository.packages || repository.packages.length <= 1) {
+    return void 0;
+  }
+  return repository.packages.map((pkg) => {
+    const fileCount = calculatePackageFileCount(pkg.derivedFrom.fileSets);
+    const size = calculateSizeFromFileCount(fileCount);
+    let language2;
+    if (pkg.type !== "package") {
+      const typeToLanguage = {
+        node: "typescript",
+        python: "python",
+        cargo: "rust",
+        go: "go"
+      };
+      language2 = typeToLanguage[pkg.type];
+    } else if (repository.github) {
+      language2 = repository.github.primaryLanguage;
+    }
+    return {
+      name: pkg.packageData.name,
+      size,
+      language: language2
+    };
+  });
+}
 function calculateAgingMetrics(lastEditedAt) {
   if (!lastEditedAt) {
     return {
@@ -133381,140 +134363,159 @@ const CollectionMapPanelContent = ({
   regionCallbacks
 }) => {
   var _a;
-  const customRegions = ((_a = collection.metadata) == null ? void 0 : _a.customRegions) || [];
+  const customRegions = React2__default.useMemo(
+    () => {
+      var _a2;
+      return ((_a2 = collection.metadata) == null ? void 0 : _a2.customRegions) || [];
+    },
+    [(_a = collection.metadata) == null ? void 0 : _a.customRegions]
+  );
   const [isEditingRegions, setIsEditingRegions] = React2__default.useState(false);
   const viewportRef = React2__default.useRef(null);
   const canvasRef = React2__default.useRef(null);
-  const handleRenameRegion = useCallback(async (regionId, name2) => {
-    await regionCallbacks.onRegionUpdated(collection.id, regionId, { name: name2 });
-  }, [regionCallbacks, collection.id]);
-  const handleDeleteRegion = useCallback(async (regionId) => {
-    if (customRegions.length <= 1) {
-      console.warn("Cannot delete the last region - at least one region must exist");
-      alert("Cannot delete the last region. At least one region must exist.");
-      return;
-    }
-    await regionCallbacks.onRegionDeleted(collection.id, regionId);
-  }, [regionCallbacks, collection.id, customRegions.length]);
-  const handleProjectMoved = useCallback(async (projectId, gridX, gridY, metadata) => {
-    var _a2, _b, _c, _d;
-    console.log("[handleProjectMoved] Moving project:", { projectId, gridX, gridY });
-    const isNewRepo = !!metadata;
-    const existingMembership = memberships.find((m2) => m2.repositoryId === projectId);
-    if (!isNewRepo && !existingMembership) {
-      const error = new Error(
-        `[handleProjectMoved] FATAL ERROR: Attempting to move repo "${projectId}" that doesn't exist in collection!
+  const handleRenameRegion = useCallback(
+    async (regionId, name2) => {
+      await regionCallbacks.onRegionUpdated(collection.id, regionId, { name: name2 });
+    },
+    [regionCallbacks, collection.id]
+  );
+  const handleDeleteRegion = useCallback(
+    async (regionId) => {
+      if (customRegions.length <= 1) {
+        console.warn(
+          "Cannot delete the last region - at least one region must exist"
+        );
+        alert("Cannot delete the last region. At least one region must exist.");
+        return;
+      }
+      await regionCallbacks.onRegionDeleted(collection.id, regionId);
+    },
+    [regionCallbacks, collection.id, customRegions.length]
+  );
+  const handleProjectMoved = useCallback(
+    async (projectId, gridX, gridY, metadata) => {
+      var _a2, _b;
+      const isNewRepo = !!metadata;
+      const existingMembership = memberships.find(
+        (m2) => m2.repositoryId === projectId
+      );
+      if (!isNewRepo && !existingMembership) {
+        const error = new Error(
+          `[handleProjectMoved] FATAL ERROR: Attempting to move repo "${projectId}" that doesn't exist in collection!
 Memberships (${memberships.length}): [${memberships.map((m2) => m2.repositoryId).join(", ")}]
 This indicates a sprite was rendered without valid backing data.`
-      );
-      console.error(error);
-      throw error;
-    }
-    const isFirstPlacement = isNewRepo || !!existingMembership && !((_a2 = existingMembership.metadata) == null ? void 0 : _a2.regionId);
-    console.log("[handleProjectMoved] Placement check:", {
-      isNewRepo,
-      existingMembership: existingMembership ? { id: existingMembership.repositoryId, hasMetadata: !!existingMembership.metadata, regionId: (_b = existingMembership.metadata) == null ? void 0 : _b.regionId } : null,
-      isExistingWithoutRegion: !!existingMembership && !((_c = existingMembership.metadata) == null ? void 0 : _c.regionId),
-      isFirstPlacement
-    });
-    const regionCol = Math.floor(gridX / REGION_SIZE_TILES);
-    const regionRow = Math.floor(gridY / REGION_SIZE_TILES);
-    const regionOrder = regionRow * 10 + regionCol;
-    const targetRegion = customRegions.find((r2) => r2.order === regionOrder);
-    const newRegionId = targetRegion == null ? void 0 : targetRegion.id;
-    console.log("[handleProjectMoved] Target region:", { regionOrder, newRegionId, targetRegion });
-    if (!newRegionId) {
-      console.warn("[CollectionMapPanel] ⚠️ Could not determine region for position:", { gridX, gridY, regionOrder });
-      return;
-    }
-    if (isFirstPlacement) {
-      console.log("[PLACEMENT] Starting placement for:", projectId);
-      console.log("[PLACEMENT] Target region:", newRegionId);
-      console.log("[PLACEMENT] Target position:", { gridX, gridY });
-      try {
-        if (isNewRepo) {
-          if (!onProjectAdded) {
-            throw new Error("onProjectAdded callback not available");
-          }
-          console.log("[PLACEMENT] Step 1: Calling onProjectAdded (repo not in collection yet)...");
-          await onProjectAdded(projectId, metadata);
-          console.log("[PLACEMENT] Step 1: onProjectAdded completed");
-        } else {
-          console.log("[PLACEMENT] Step 1: SKIPPED (repo already in collection as membership)");
-        }
-        const regionBoundsX2 = regionCol * REGION_SIZE_TILES;
-        const regionBoundsY2 = regionRow * REGION_SIZE_TILES;
-        const relativeGridX2 = gridX - regionBoundsX2;
-        const relativeGridY2 = gridY - regionBoundsY2;
-        const layout2 = {
-          gridX: relativeGridX2,
-          gridY: relativeGridY2
-        };
-        console.log("[PLACEMENT] Step 2: Setting position:", layout2);
-        await regionCallbacks.onRepositoryPositionUpdated(collection.id, projectId, layout2);
-        console.log("[PLACEMENT] Step 2: Position updated");
-        console.log("[PLACEMENT] Step 3: Assigning region:", newRegionId);
-        await regionCallbacks.onRepositoryAssigned(collection.id, projectId, newRegionId);
-        console.log("[PLACEMENT] Step 3: Region assigned");
-        console.log("[PLACEMENT] ✓ Placement completed successfully");
-      } catch (error) {
-        console.error("[PLACEMENT] ✗ ERROR during placement:", error);
+        );
+        console.error(error);
         throw error;
       }
-      return;
-    }
-    const regionBoundsX = regionCol * REGION_SIZE_TILES;
-    const regionBoundsY = regionRow * REGION_SIZE_TILES;
-    const relativeGridX = gridX - regionBoundsX;
-    const relativeGridY = gridY - regionBoundsY;
-    const layout = {
-      gridX: relativeGridX,
-      gridY: relativeGridY
-    };
-    console.log("[handleProjectMoved] Saving position:", { layout, newRegionId });
-    await regionCallbacks.onRepositoryPositionUpdated(collection.id, projectId, layout);
-    const membership = memberships.find((m2) => m2.repositoryId === projectId);
-    const oldRegionId = (_d = membership == null ? void 0 : membership.metadata) == null ? void 0 : _d.regionId;
-    if (oldRegionId !== newRegionId) {
-      console.log("[handleProjectMoved] Region changed, updating assignment:", { oldRegionId, newRegionId });
-      await regionCallbacks.onRepositoryAssigned(collection.id, projectId, newRegionId);
-    }
-  }, [collection.id, regionCallbacks, memberships, customRegions, onProjectAdded]);
-  const handleProjectDrop = useCallback(async (data, event) => {
-    console.log("[handleProjectDrop] Drop event:", { data, eventType: event.type });
-    const repositoryPath = data.primaryData;
-    const repositoryMetadata = data.metadata || {};
-    const repoId = (repositoryMetadata == null ? void 0 : repositoryMetadata.name) || repositoryPath;
-    console.log("[handleProjectDrop] Converting drop position to grid coords");
-    const gridCoords = domEventToGridCoords(
-      event.clientX,
-      event.clientY,
-      viewportRef.current,
-      canvasRef.current
-    );
-    console.log("[handleProjectDrop] Drop at grid position:", gridCoords);
-    const gridX = Math.round(gridCoords.gridX);
-    const gridY = Math.round(gridCoords.gridY);
-    console.log("[handleProjectDrop] Snapped to grid:", { gridX, gridY });
-    console.log("[handleProjectDrop] Placing repo at drop position");
-    await handleProjectMoved(repoId, gridX, gridY, repositoryMetadata);
-  }, [handleProjectMoved]);
-  const handleDrawerDrop = useCallback(async (event) => {
-    const unplacedNodeData = event.dataTransfer.getData("application/x-unplaced-node");
-    if (!unplacedNodeData) return;
-    event.preventDefault();
-    event.stopPropagation();
-    const { nodeId } = JSON.parse(unplacedNodeData);
-    const gridCoords = domEventToGridCoords(
-      event.clientX,
-      event.clientY,
-      viewportRef.current,
-      canvasRef.current
-    );
-    const gridX = Math.round(gridCoords.gridX);
-    const gridY = Math.round(gridCoords.gridY);
-    await handleProjectMoved(nodeId, gridX, gridY);
-  }, [handleProjectMoved]);
+      const isFirstPlacement = isNewRepo || !!existingMembership && !((_a2 = existingMembership.metadata) == null ? void 0 : _a2.regionId);
+      const regionCol = Math.floor(gridX / REGION_SIZE_TILES);
+      const regionRow = Math.floor(gridY / REGION_SIZE_TILES);
+      const regionOrder = regionRow * 10 + regionCol;
+      const targetRegion = customRegions.find((r2) => r2.order === regionOrder);
+      const newRegionId = targetRegion == null ? void 0 : targetRegion.id;
+      if (!newRegionId) {
+        console.warn(
+          "[CollectionMapPanel] ⚠️ Could not determine region for position:",
+          { gridX, gridY, regionOrder }
+        );
+        return;
+      }
+      if (isFirstPlacement) {
+        try {
+          if (isNewRepo) {
+            if (!onProjectAdded) {
+              throw new Error("onProjectAdded callback not available");
+            }
+            await onProjectAdded(projectId, metadata);
+          }
+          const regionBoundsX2 = regionCol * REGION_SIZE_TILES;
+          const regionBoundsY2 = regionRow * REGION_SIZE_TILES;
+          const relativeGridX2 = gridX - regionBoundsX2;
+          const relativeGridY2 = gridY - regionBoundsY2;
+          const layout2 = {
+            gridX: relativeGridX2,
+            gridY: relativeGridY2
+          };
+          await regionCallbacks.onRepositoryPositionUpdated(
+            collection.id,
+            projectId,
+            layout2
+          );
+          await regionCallbacks.onRepositoryAssigned(
+            collection.id,
+            projectId,
+            newRegionId
+          );
+        } catch (error) {
+          console.error("[PLACEMENT] ✗ ERROR during placement:", error);
+          throw error;
+        }
+        return;
+      }
+      const regionBoundsX = regionCol * REGION_SIZE_TILES;
+      const regionBoundsY = regionRow * REGION_SIZE_TILES;
+      const relativeGridX = gridX - regionBoundsX;
+      const relativeGridY = gridY - regionBoundsY;
+      const layout = {
+        gridX: relativeGridX,
+        gridY: relativeGridY
+      };
+      await regionCallbacks.onRepositoryPositionUpdated(
+        collection.id,
+        projectId,
+        layout
+      );
+      const membership = memberships.find((m2) => m2.repositoryId === projectId);
+      const oldRegionId = (_b = membership == null ? void 0 : membership.metadata) == null ? void 0 : _b.regionId;
+      if (oldRegionId !== newRegionId) {
+        await regionCallbacks.onRepositoryAssigned(
+          collection.id,
+          projectId,
+          newRegionId
+        );
+      }
+    },
+    [collection.id, regionCallbacks, memberships, customRegions, onProjectAdded]
+  );
+  const handleProjectDrop = useCallback(
+    async (data, event) => {
+      const repositoryPath = data.primaryData;
+      const repositoryMetadata = data.metadata || {};
+      const repoId = (repositoryMetadata == null ? void 0 : repositoryMetadata.name) || repositoryPath;
+      const gridCoords = domEventToGridCoords(
+        event.clientX,
+        event.clientY,
+        viewportRef.current,
+        canvasRef.current
+      );
+      const gridX = Math.round(gridCoords.gridX);
+      const gridY = Math.round(gridCoords.gridY);
+      await handleProjectMoved(repoId, gridX, gridY, repositoryMetadata);
+    },
+    [handleProjectMoved]
+  );
+  const handleDrawerDrop = useCallback(
+    async (event) => {
+      const unplacedNodeData = event.dataTransfer.getData(
+        "application/x-unplaced-node"
+      );
+      if (!unplacedNodeData) return;
+      event.preventDefault();
+      event.stopPropagation();
+      const { nodeId } = JSON.parse(unplacedNodeData);
+      const gridCoords = domEventToGridCoords(
+        event.clientX,
+        event.clientY,
+        viewportRef.current,
+        canvasRef.current
+      );
+      const gridX = Math.round(gridCoords.gridX);
+      const gridY = Math.round(gridCoords.gridY);
+      await handleProjectMoved(nodeId, gridX, gridY);
+    },
+    [handleProjectMoved]
+  );
   const { isDragOver, ...dropZoneProps } = useDropZone({
     handlers: [
       {
@@ -133536,15 +134537,9 @@ This indicates a sprite was rendered without valid backing data.`
         span.setAttribute("collection.id", collection.id);
         span.setAttribute("memberships.count", memberships.length);
         span.setAttribute("repositories.count", repositories.length);
-        console.log("[nodes memo] Converting memberships to nodes", {
-          collectionId: collection.id,
-          totalMemberships: memberships.length,
-          totalRepositories: repositories.length
-        });
         const collectionMemberships = memberships.filter(
           (m2) => m2.collectionId === collection.id
         );
-        console.log("[nodes memo] Filtered memberships for collection:", collectionMemberships);
         const memberNodes = collectionMemberships.map((membership) => {
           var _a2, _b, _c, _d, _e2, _f, _g;
           const repo = repositories.find((r2) => {
@@ -133553,10 +134548,12 @@ This indicates a sprite was rendered without valid backing data.`
             return repoId === membership.repositoryId;
           });
           if (!repo) {
-            console.warn("[nodes memo] No repository found for membership:", membership.repositoryId);
+            console.warn(
+              "[nodes memo] No repository found for membership:",
+              membership.repositoryId
+            );
             return null;
           }
-          console.log("[nodes memo] Creating node for:", membership.repositoryId);
           let category;
           if (repo.github) {
             category = "git-repo";
@@ -133565,11 +134562,22 @@ This indicates a sprite was rendered without valid backing data.`
           }
           let language2;
           if (repo.github) {
-            language2 = ((_a2 = repo.github) == null ? void 0 : _a2.language) || ((_b = repo.github) == null ? void 0 : _b.primaryLanguage);
+            language2 = repo.github.primaryLanguage;
+          }
+          const importance = ((_a2 = membership.metadata) == null ? void 0 : _a2.pinned) ? 95 : 75;
+          let size = calculateRepositorySize(repo.metrics);
+          const aging = calculateAgingMetrics((_b = repo.metrics) == null ? void 0 : _b.lastEditedAt);
+          const packages = extractPackageInfo(repo);
+          const stars = (_c = repo.github) == null ? void 0 : _c.stars;
+          if (stars && stars > 0) {
+            const decorationBonus = getDecorationSizeBonus(stars);
+            size = size + decorationBonus;
+          }
+          const collaborators = (_d = repo.metrics) == null ? void 0 : _d.contributors;
+          if (collaborators && collaborators > 0) {
+            const decorationBonus = getCollaboratorDecorationSizeBonus(collaborators);
+            size = size + decorationBonus;
           }
-          const importance = ((_c = membership.metadata) == null ? void 0 : _c.pinned) ? 95 : 75;
-          const size = calculateRepositorySize(repo.metrics);
-          const aging = calculateAgingMetrics((_d = repo.metrics) == null ? void 0 : _d.lastEditedAt);
           const node2 = {
             id: membership.repositoryId,
             name: repo.name,
@@ -133580,6 +134588,12 @@ This indicates a sprite was rendered without valid backing data.`
             size,
             aging,
             // Pass aging metrics for visual weathering
+            packages,
+            // Package subdivision data
+            stars,
+            // GitHub star count for decorations
+            collaborators,
+            // Contributor count for community space decorations
             dependencies: dependencies[membership.repositoryId] || [],
             isRoot: ((_e2 = membership.metadata) == null ? void 0 : _e2.pinned) || false,
             regionId: (_f = membership.metadata) == null ? void 0 : _f.regionId,
@@ -133589,7 +134603,6 @@ This indicates a sprite was rendered without valid backing data.`
           };
           return node2;
         }).filter((n2) => n2 !== null);
-        console.log("[nodes memo] Created nodes:", { total: memberNodes.length });
         span.setAttribute("nodes.created", memberNodes.length);
         span.end();
         return memberNodes;
@@ -133601,7 +134614,6 @@ This indicates a sprite was rendered without valid backing data.`
     });
   }, [collection.id, memberships, repositories, dependencies]);
   const { validNodes, unplacedNodes } = useMemo(() => {
-    console.log("[nodeValidation] Validating nodes:", nodes.length);
     const nodesWithPositions = nodes.filter(
       (n2) => {
         var _a2, _b;
@@ -133610,7 +134622,6 @@ This indicates a sprite was rendered without valid backing data.`
     );
     const isInitialLoad = nodesWithPositions.length === 0 && nodes.length > 0;
     if (isInitialLoad) {
-      console.log("[nodeValidation] Initial load detected, skipping validation (auto-layout will run)");
       return { validNodes: nodes, unplacedNodes: [] };
     }
     const valid2 = [];
@@ -133628,8 +134639,6 @@ This indicates a sprite was rendered without valid backing data.`
         `[nodeValidation] Found ${unplaced.length} unplaced nodes (no regionId):
 ` + unplaced.map((n2) => `  - ${n2.id}`).join("\n")
       );
-    } else {
-      console.log("[nodeValidation] ✓ All nodes have regionId");
     }
     return { validNodes: valid2, unplacedNodes: unplaced };
   }, [nodes]);
@@ -133728,7 +134737,6 @@ This indicates a sprite was rendered without valid backing data.`
     })();
   }, [collection.id, nodes, regionLayout, customRegions, regionCallbacks]);
   const handleViewportReady = useCallback((viewport) => {
-    console.log("[CollectionMapPanel] Viewport ready for coordinate conversion");
     viewportRef.current = viewport;
   }, []);
   const handleDragOver = useCallback((e2) => {
@@ -133737,15 +134745,18 @@ This indicates a sprite was rendered without valid backing data.`
       e2.stopPropagation();
     }
   }, []);
-  const handleDrop = useCallback((e2) => {
-    if (e2.dataTransfer.types.includes("application/x-unplaced-node")) {
-      e2.preventDefault();
-      e2.stopPropagation();
-      handleDrawerDrop(e2);
-    } else if (dropZoneProps.onDrop) {
-      dropZoneProps.onDrop(e2);
-    }
-  }, [handleDrawerDrop, dropZoneProps]);
+  const handleDrop = useCallback(
+    (e2) => {
+      if (e2.dataTransfer.types.includes("application/x-unplaced-node")) {
+        e2.preventDefault();
+        e2.stopPropagation();
+        handleDrawerDrop(e2);
+      } else if (dropZoneProps.onDrop) {
+        dropZoneProps.onDrop(e2);
+      }
+    },
+    [handleDrawerDrop, dropZoneProps]
+  );
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -133807,7 +134818,11 @@ This indicates a sprite was rendered without valid backing data.`
             onAddRegion: async (position2) => {
               const order2 = position2.row * 10 + position2.col;
               const name2 = `Region ${customRegions.length + 1}`;
-              await regionCallbacks.onRegionCreated(collection.id, { name: name2, order: order2, createdAt: 0 });
+              await regionCallbacks.onRegionCreated(collection.id, {
+                name: name2,
+                order: order2,
+                createdAt: 0
+              });
             },
             onRenameRegion: handleRenameRegion,
             onDeleteRegion: handleDeleteRegion
@@ -133870,10 +134885,13 @@ This indicates a sprite was rendered without valid backing data.`
                       draggable: true,
                       onDragStart: (e2) => {
                         e2.dataTransfer.setData("text/plain", node2.id);
-                        e2.dataTransfer.setData("application/x-unplaced-node", JSON.stringify({
-                          nodeId: node2.id,
-                          name: node2.name
-                        }));
+                        e2.dataTransfer.setData(
+                          "application/x-unplaced-node",
+                          JSON.stringify({
+                            nodeId: node2.id,
+                            name: node2.name
+                          })
+                        );
                       },
                       style: {
                         flexShrink: 0,
@@ -133921,27 +134939,37 @@ const CollectionMapPanel = ({ context: context2, actions }) => {
   const repositories = selectedCollectionView.data.repositories;
   const dependencies = selectedCollectionView.data.dependencies || {};
   const isLoading = selectedCollectionView.loading;
-  const handleProjectAdded = useCallback((repositoryPath, repositoryMetadata) => {
-    console.log("[handleProjectAdded] Called with:", { repositoryPath, repositoryMetadata, selectedCollection: selectedCollection == null ? void 0 : selectedCollection.id });
-    if (!selectedCollection) {
-      console.warn("[handleProjectAdded] No selected collection");
-      return;
-    }
-    if (actions.addRepositoryToCollection) {
-      console.log("[handleProjectAdded] Calling addRepositoryToCollection");
-      actions.addRepositoryToCollection(selectedCollection.id, repositoryPath, repositoryMetadata);
-    } else {
-      console.warn("Actions does not support addRepositoryToCollection - drag-drop feature requires context integration");
-    }
-  }, [actions, selectedCollection]);
-  const regionCallbacks = useMemo(() => ({
-    onRegionCreated: actions.onRegionCreated,
-    onRegionUpdated: actions.onRegionUpdated,
-    onRegionDeleted: actions.onRegionDeleted,
-    onRepositoryAssigned: actions.onRepositoryAssigned,
-    onRepositoryPositionUpdated: actions.onRepositoryPositionUpdated,
-    onBatchLayoutInitialized: actions.onBatchLayoutInitialized
-  }), [actions]);
+  const handleProjectAdded = useCallback(
+    (repositoryPath, repositoryMetadata) => {
+      if (!selectedCollection) {
+        console.warn("[handleProjectAdded] No selected collection");
+        return;
+      }
+      if (actions.addRepositoryToCollection) {
+        actions.addRepositoryToCollection(
+          selectedCollection.id,
+          repositoryPath,
+          repositoryMetadata
+        );
+      } else {
+        console.warn(
+          "Actions does not support addRepositoryToCollection - drag-drop feature requires context integration"
+        );
+      }
+    },
+    [actions, selectedCollection]
+  );
+  const regionCallbacks = useMemo(
+    () => ({
+      onRegionCreated: actions.onRegionCreated,
+      onRegionUpdated: actions.onRegionUpdated,
+      onRegionDeleted: actions.onRegionDeleted,
+      onRepositoryAssigned: actions.onRepositoryAssigned,
+      onRepositoryPositionUpdated: actions.onRepositoryPositionUpdated,
+      onBatchLayoutInitialized: actions.onBatchLayoutInitialized
+    }),
+    [actions]
+  );
   if (!selectedCollection) {
     return /* @__PURE__ */ jsxs(
       "div",
@@ -134020,7 +135048,15 @@ const PackageCoverageCard = ({
   const { theme: theme2 } = useTheme();
   const stats = useMemo(() => {
     if (!coverage || coverage.files.length === 0) {
-      return { percentage: 0, totalTraced: 0, totalTests: 0, testFiles: 0, coveredFiles: 0, partialFiles: 0, uncoveredFiles: 0 };
+      return {
+        percentage: 0,
+        totalTraced: 0,
+        totalTests: 0,
+        testFiles: 0,
+        coveredFiles: 0,
+        partialFiles: 0,
+        uncoveredFiles: 0
+      };
     }
     const result = calculateTelemetryCoverageStats(coverage.files);
     return result;
@@ -134184,7 +135220,9 @@ const TelemetryCoveragePanelContent = ({
   onViewTrace
 }) => {
   const { theme: theme2 } = useTheme();
-  const [selectedPackageId, setSelectedPackageId] = useState(null);
+  const [selectedPackageId, setSelectedPackageId] = useState(
+    null
+  );
   const coverageMap = useMemo(() => {
     const map2 = /* @__PURE__ */ new Map();
     coverageData.forEach((c2) => map2.set(c2.packageId, c2));
@@ -134210,7 +135248,15 @@ const TelemetryCoveragePanelContent = ({
   const overallStats = useMemo(() => {
     const allFiles = coverageData.flatMap((c2) => c2.files);
     if (allFiles.length === 0) {
-      return { percentage: 0, totalTraced: 0, totalTests: 0, testFiles: 0, coveredFiles: 0, partialFiles: 0, uncoveredFiles: 0 };
+      return {
+        percentage: 0,
+        totalTraced: 0,
+        totalTests: 0,
+        testFiles: 0,
+        coveredFiles: 0,
+        partialFiles: 0,
+        uncoveredFiles: 0
+      };
     }
     return calculateTelemetryCoverageStats(allFiles);
   }, [coverageData]);
@@ -134283,12 +135329,21 @@ const TelemetryCoveragePanelContent = ({
             /* @__PURE__ */ jsx(Activity$1, { size: 20, color: theme2.colors.primary }),
             /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
               /* @__PURE__ */ jsx("div", { style: { fontWeight: 600, color: theme2.colors.text }, children: pkg.packageData.name }),
-              /* @__PURE__ */ jsxs("div", { style: { fontSize: theme2.fontSizes[0], color: theme2.colors.textSecondary }, children: [
-                overallStats.totalTraced,
-                "/",
-                overallStats.totalTests,
-                " tests traced"
-              ] })
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    fontSize: theme2.fontSizes[0],
+                    color: theme2.colors.textSecondary
+                  },
+                  children: [
+                    overallStats.totalTraced,
+                    "/",
+                    overallStats.totalTests,
+                    " tests traced"
+                  ]
+                }
+              )
             ] }),
             /* @__PURE__ */ jsx(CoverageBar, { percentage: overallStats.percentage, width: 80 }),
             /* @__PURE__ */ jsxs(
@@ -134372,12 +135427,30 @@ const TelemetryCoveragePanelContent = ({
                       },
                       children: [
                         /* @__PURE__ */ jsx(Activity$1, { size: 16, color: theme2.colors.primary }),
-                        /* @__PURE__ */ jsxs("span", { style: { fontSize: theme2.fontSizes[1], color: theme2.colors.textSecondary }, children: [
-                          packages.length,
-                          " packages"
-                        ] }),
+                        /* @__PURE__ */ jsxs(
+                          "span",
+                          {
+                            style: {
+                              fontSize: theme2.fontSizes[1],
+                              color: theme2.colors.textSecondary
+                            },
+                            children: [
+                              packages.length,
+                              " packages"
+                            ]
+                          }
+                        ),
                         /* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
-                        /* @__PURE__ */ jsx("span", { style: { fontSize: theme2.fontSizes[0], color: theme2.colors.textSecondary }, children: "Overall:" }),
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            style: {
+                              fontSize: theme2.fontSizes[0],
+                              color: theme2.colors.textSecondary
+                            },
+                            children: "Overall:"
+                          }
+                        ),
                         /* @__PURE__ */ jsx(CoverageBar, { percentage: overallStats.percentage }),
                         /* @__PURE__ */ jsxs(
                           "span",
@@ -134524,7 +135597,16 @@ const TelemetryCoveragePanelContent = ({
                         /* @__PURE__ */ jsx(FolderOpen$1, { size: 16, color: theme2.colors.primary }),
                         /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
                           /* @__PURE__ */ jsx("div", { style: { fontWeight: 600, color: theme2.colors.text }, children: selectedPackage.packageData.name }),
-                          /* @__PURE__ */ jsx("div", { style: { fontSize: theme2.fontSizes[0], color: theme2.colors.textSecondary }, children: selectedPackage.packageData.path || "/" })
+                          /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              style: {
+                                fontSize: theme2.fontSizes[0],
+                                color: theme2.colors.textSecondary
+                              },
+                              children: selectedPackage.packageData.path || "/"
+                            }
+                          )
                         ] }),
                         selectedCoverage && /* @__PURE__ */ jsxs(Fragment, { children: [
                           /* @__PURE__ */ jsx(
@@ -134540,7 +135622,9 @@ const TelemetryCoveragePanelContent = ({
                               style: {
                                 padding: "2px 8px",
                                 backgroundColor: getCoverageColor(
-                                  calculateTelemetryCoverageStats(selectedCoverage.files).percentage
+                                  calculateTelemetryCoverageStats(
+                                    selectedCoverage.files
+                                  ).percentage
                                 ) + "20",
                                 color: getCoverageColor(
                                   calculateTelemetryCoverageStats(selectedCoverage.files).percentage
@@ -134601,56 +135685,74 @@ const TelemetryCoveragePanelPreview = () => {
           /* @__PURE__ */ jsx(Activity$1, { size: 14, color: theme2.colors.primary }),
           /* @__PURE__ */ jsx("span", { children: "Telemetry Coverage" })
         ] }),
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px", paddingLeft: "8px" }, children: [
-          /* @__PURE__ */ jsx(TestTube$1, { size: 12, color: theme2.colors.textSecondary }),
-          /* @__PURE__ */ jsx("span", { style: { color: theme2.colors.textSecondary }, children: "8/14 tests traced" })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px", paddingLeft: "8px" }, children: [
-          /* @__PURE__ */ jsx(CoverageBar, { percentage: 57, width: 40 }),
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              style: {
-                color: getCoverageColor(57),
-                fontWeight: "bold",
-                fontFamily: "monospace"
-              },
-              children: "57%"
-            }
-          )
-        ] })
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "6px",
+              paddingLeft: "8px"
+            },
+            children: [
+              /* @__PURE__ */ jsx(TestTube$1, { size: 12, color: theme2.colors.textSecondary }),
+              /* @__PURE__ */ jsx("span", { style: { color: theme2.colors.textSecondary }, children: "8/14 tests traced" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "6px",
+              paddingLeft: "8px"
+            },
+            children: [
+              /* @__PURE__ */ jsx(CoverageBar, { percentage: 57, width: 40 }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    color: getCoverageColor(57),
+                    fontWeight: "bold",
+                    fontFamily: "monospace"
+                  },
+                  children: "57%"
+                }
+              )
+            ]
+          }
+        )
       ]
     }
   );
 };
-const TelemetryCoveragePanel = ({ context: context2, events }) => {
+const TelemetryCoveragePanel = ({
+  context: context2,
+  events
+}) => {
   var _a;
   const packagesSlice = context2.getSlice("packages");
   const fileTreeSlice = context2.getSlice("fileTree");
-  const packages = ((_a = packagesSlice == null ? void 0 : packagesSlice.data) == null ? void 0 : _a.packages) ?? [];
+  const packages = useMemo(
+    () => {
+      var _a2;
+      return ((_a2 = packagesSlice == null ? void 0 : packagesSlice.data) == null ? void 0 : _a2.packages) ?? [];
+    },
+    [(_a = packagesSlice == null ? void 0 : packagesSlice.data) == null ? void 0 : _a.packages]
+  );
   const fileTree = (fileTreeSlice == null ? void 0 : fileTreeSlice.data) ?? void 0;
   const isLoading = (packagesSlice == null ? void 0 : packagesSlice.loading) || (fileTreeSlice == null ? void 0 : fileTreeSlice.loading) || false;
   const coverageData = useMemo(() => {
     const allFiles = (fileTree == null ? void 0 : fileTree.allFiles) ?? [];
-    if (allFiles.length > 0) {
-      const traceFiles = allFiles.filter(
-        (f2) => (f2.relativePath || f2.path || "").includes("__traces__")
-      );
-      console.log("[TelemetryCoveragePanel] Total files:", allFiles.length);
-      console.log("[TelemetryCoveragePanel] Trace files found:", traceFiles.length);
-      if (traceFiles.length > 0) {
-        console.log("[TelemetryCoveragePanel] Sample trace file:", {
-          path: traceFiles[0].path,
-          relativePath: traceFiles[0].relativePath,
-          name: traceFiles[0].name
-        });
-      }
-      console.log("[TelemetryCoveragePanel] Sample paths:", allFiles.slice(0, 3).map((f2) => f2.relativePath || f2.path));
-    }
     const traceFilesByPackage = /* @__PURE__ */ new Map();
     for (const file of allFiles) {
       const filePath = file.relativePath || file.path || "";
-      const packageMatch = filePath.match(/^packages\/([^/]+)(?:\/.*)?__traces__\/[^/]+\.canvas\.json$/);
+      const packageMatch = filePath.match(
+        /^packages\/([^/]+)(?:\/.*)?__traces__\/[^/]+\.canvas\.json$/
+      );
       const rootMatch = filePath.match(/^__traces__\/[^/]+\.canvas\.json$/);
       if (packageMatch) {
         const pkgName = packageMatch[1];
@@ -134664,8 +135766,6 @@ const TelemetryCoveragePanel = ({ context: context2, events }) => {
         }
       }
     }
-    console.log("[TelemetryCoveragePanel] Trace files by package:", Object.fromEntries(traceFilesByPackage));
-    console.log("[TelemetryCoveragePanel] Packages:", packages.map((p2) => ({ name: p2.packageData.name, path: p2.packageData.path })));
     return packages.map((pkg) => {
       const pkgPath = pkg.packageData.path.replace(/^\//, "");
       const traceFilePath = traceFilesByPackage.get(pkgPath);
@@ -134726,7 +135826,9 @@ const TelemetryCoveragePanel = ({ context: context2, events }) => {
       } : null
     });
     if (pkg) {
-      const pkgCoverage = coverageData.find((c2) => c2.packagePath === pkg.packageData.path);
+      const pkgCoverage = coverageData.find(
+        (c2) => c2.packagePath === pkg.packageData.path
+      );
       if (pkgCoverage == null ? void 0 : pkgCoverage.traceFilePath) {
         events == null ? void 0 : events.emit({
           type: "trace:load",
@@ -135009,4 +136111,4 @@ export {
   UPDATE_PRIORITY as y,
   removeItems as z
 };
-//# sourceMappingURL=index-BWinsP45.js.map
+//# sourceMappingURL=index-DtyaVT4V.js.map