@industry-theme/file-city-panel 0.2.44 → 0.2.46

package/dist/panels.bundle.js

@@ -106,7 +106,7 @@ const createLucideIcon = (iconName, iconNode) => {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$i = [
+const __iconNode$p = [
   [
     "path",
     {
@@ -115,14 +115,32 @@ const __iconNode$i = [
     }
   ]
 ];
-const Activity = createLucideIcon("activity", __iconNode$i);
+const Activity = createLucideIcon("activity", __iconNode$p);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$h = [
+const __iconNode$o = [
+  [
+    "path",
+    {
+      d: "M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z",
+      key: "hh9hay"
+    }
+  ],
+  ["path", { d: "m3.3 7 8.7 5 8.7-5", key: "g66t2b" }],
+  ["path", { d: "M12 22V12", key: "d0xqtd" }]
+];
+const Box = createLucideIcon("box", __iconNode$o);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$n = [
   ["path", { d: "M10 12h4", key: "a56b0p" }],
   ["path", { d: "M10 8h4", key: "1sr2af" }],
   ["path", { d: "M14 21v-3a2 2 0 0 0-4 0v3", key: "1rgiei" }],
@@ -135,55 +153,67 @@ const __iconNode$h = [
   ],
   ["path", { d: "M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16", key: "16ra0t" }]
 ];
-const Building2 = createLucideIcon("building-2", __iconNode$h);
+const Building2 = createLucideIcon("building-2", __iconNode$n);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$g = [
+const __iconNode$m = [
   ["path", { d: "M3 3v16a2 2 0 0 0 2 2h16", key: "c24i48" }],
   ["path", { d: "M18 17V9", key: "2bz60n" }],
   ["path", { d: "M13 17V5", key: "1frdt8" }],
   ["path", { d: "M8 17v-3", key: "17ska0" }]
 ];
-const ChartColumn = createLucideIcon("chart-column", __iconNode$g);
+const ChartColumn = createLucideIcon("chart-column", __iconNode$m);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$f = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$f);
+const __iconNode$l = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$l);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$e = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$e);
+const __iconNode$k = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$k);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$d = [
+const __iconNode$j = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
   ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
 ];
-const CircleAlert = createLucideIcon("circle-alert", __iconNode$d);
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$j);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$c = [
+const __iconNode$i = [
+  ["path", { d: "M15 3h6v6", key: "1q9fwt" }],
+  ["path", { d: "M10 14 21 3", key: "gplh6r" }],
+  ["path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6", key: "a6xqqp" }]
+];
+const ExternalLink = createLucideIcon("external-link", __iconNode$i);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$h = [
   [
     "path",
     {
@@ -201,14 +231,14 @@ const __iconNode$c = [
   ],
   ["path", { d: "m2 2 20 20", key: "1ooewy" }]
 ];
-const EyeOff = createLucideIcon("eye-off", __iconNode$c);
+const EyeOff = createLucideIcon("eye-off", __iconNode$h);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$b = [
+const __iconNode$g = [
   [
     "path",
     {
@@ -218,14 +248,14 @@ const __iconNode$b = [
   ],
   ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
 ];
-const Eye = createLucideIcon("eye", __iconNode$b);
+const Eye = createLucideIcon("eye", __iconNode$g);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$a = [
+const __iconNode$f = [
   [
     "path",
     {
@@ -236,14 +266,14 @@ const __iconNode$a = [
   ["path", { d: "M12 17h.01", key: "p32p05" }],
   ["path", { d: "M9.1 9a3 3 0 0 1 5.82 1c0 2-3 3-3 3", key: "mhlwft" }]
 ];
-const FileQuestionMark = createLucideIcon("file-question-mark", __iconNode$a);
+const FileQuestionMark = createLucideIcon("file-question-mark", __iconNode$f);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$9 = [
+const __iconNode$e = [
   [
     "path",
     {
@@ -256,14 +286,14 @@ const __iconNode$9 = [
   ["path", { d: "M16 13H8", key: "t4e002" }],
   ["path", { d: "M16 17H8", key: "z1uh3a" }]
 ];
-const FileText = createLucideIcon("file-text", __iconNode$9);
+const FileText = createLucideIcon("file-text", __iconNode$e);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$8 = [
+const __iconNode$d = [
   [
     "path",
     {
@@ -273,14 +303,14 @@ const __iconNode$8 = [
   ],
   ["path", { d: "M14 2v5a1 1 0 0 0 1 1h5", key: "wfsgrz" }]
 ];
-const File = createLucideIcon("file", __iconNode$8);
+const File = createLucideIcon("file", __iconNode$d);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$7 = [
+const __iconNode$c = [
   [
     "path",
     {
@@ -289,71 +319,118 @@ const __iconNode$7 = [
     }
   ]
 ];
-const Folder = createLucideIcon("folder", __iconNode$7);
+const Folder = createLucideIcon("folder", __iconNode$c);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$6 = [
+const __iconNode$b = [
   ["line", { x1: "6", x2: "6", y1: "3", y2: "15", key: "17qcm7" }],
   ["circle", { cx: "18", cy: "6", r: "3", key: "1h7g24" }],
   ["circle", { cx: "6", cy: "18", r: "3", key: "fqmcym" }],
   ["path", { d: "M18 9a9 9 0 0 1-9 9", key: "n2h4wq" }]
 ];
-const GitBranch = createLucideIcon("git-branch", __iconNode$6);
+const GitBranch = createLucideIcon("git-branch", __iconNode$b);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$5 = [
+const __iconNode$a = [
   ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }],
   ["line", { x1: "3", x2: "9", y1: "12", y2: "12", key: "1dyftd" }],
   ["line", { x1: "15", x2: "21", y1: "12", y2: "12", key: "oup4p8" }]
 ];
-const GitCommitHorizontal = createLucideIcon("git-commit-horizontal", __iconNode$5);
+const GitCommitHorizontal = createLucideIcon("git-commit-horizontal", __iconNode$a);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$4 = [
+const __iconNode$9 = [
+  ["circle", { cx: "12", cy: "18", r: "3", key: "1mpf1b" }],
+  ["circle", { cx: "6", cy: "6", r: "3", key: "1lh9wr" }],
+  ["circle", { cx: "18", cy: "6", r: "3", key: "1h7g24" }],
+  ["path", { d: "M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9", key: "1uq4wg" }],
+  ["path", { d: "M12 12v3", key: "158kv8" }]
+];
+const GitFork = createLucideIcon("git-fork", __iconNode$9);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$8 = [
   ["circle", { cx: "18", cy: "18", r: "3", key: "1xkwt0" }],
   ["circle", { cx: "6", cy: "6", r: "3", key: "1lh9wr" }],
   ["path", { d: "M13 6h3a2 2 0 0 1 2 2v7", key: "1yeb86" }],
   ["line", { x1: "6", x2: "6", y1: "9", y2: "21", key: "rroup" }]
 ];
-const GitPullRequest = createLucideIcon("git-pull-request", __iconNode$4);
+const GitPullRequest = createLucideIcon("git-pull-request", __iconNode$8);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$3 = [["path", { d: "M5 12h14", key: "1ays0h" }]];
-const Minus = createLucideIcon("minus", __iconNode$3);
+const __iconNode$7 = [["path", { d: "M5 12h14", key: "1ays0h" }]];
+const Minus = createLucideIcon("minus", __iconNode$7);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$2 = [
+const __iconNode$6 = [
+  [
+    "path",
+    {
+      d: "M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z",
+      key: "1a0edw"
+    }
+  ],
+  ["path", { d: "M12 22V12", key: "d0xqtd" }],
+  ["polyline", { points: "3.29 7 12 12 20.71 7", key: "ousv84" }],
+  ["path", { d: "m7.5 4.27 9 5.15", key: "1c824w" }]
+];
+const Package = createLucideIcon("package", __iconNode$6);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$5 = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "M12 5v14", key: "s699le" }]
 ];
-const Plus = createLucideIcon("plus", __iconNode$2);
+const Plus = createLucideIcon("plus", __iconNode$5);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$1 = [
+const __iconNode$4 = [
+  ["path", { d: "m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z", key: "7g6ntu" }],
+  ["path", { d: "m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z", key: "ijws7r" }],
+  ["path", { d: "M7 21h10", key: "1b0cd5" }],
+  ["path", { d: "M12 3v18", key: "108xh3" }],
+  ["path", { d: "M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2", key: "3gwbw2" }]
+];
+const Scale = createLucideIcon("scale", __iconNode$4);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$3 = [
   ["path", { d: "M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7", key: "1m0v6g" }],
   [
     "path",
@@ -363,7 +440,34 @@ const __iconNode$1 = [
     }
   ]
 ];
-const SquarePen = createLucideIcon("square-pen", __iconNode$1);
+const SquarePen = createLucideIcon("square-pen", __iconNode$3);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$2 = [
+  [
+    "path",
+    {
+      d: "M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z",
+      key: "r04s7s"
+    }
+  ]
+];
+const Star = createLucideIcon("star", __iconNode$2);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$1 = [
+  ["path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2", key: "975kel" }],
+  ["circle", { cx: "12", cy: "7", r: "4", key: "17ys0d" }]
+];
+const User = createLucideIcon("user", __iconNode$1);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
@@ -26183,133 +26287,1205 @@ const CodeCityPanelContent = ({
 const CodeCityPanel = (props) => {
   return /* @__PURE__ */ jsx(CodeCityPanelContent, { ...props });
 };
-const focusBuildingTool = {
-  name: "focus_building",
-  description: "Focuses the camera on a specific file (building) in the file city visualization",
-  inputs: {
-    type: "object",
-    properties: {
-      filePath: {
-        type: "string",
-        description: "Path to the file to focus on"
-      },
-      animate: {
-        type: "boolean",
-        description: "Whether to animate the camera transition"
-      }
-    },
-    required: ["filePath"]
-  },
-  outputs: {
-    type: "object",
-    properties: {
-      success: { type: "boolean" },
-      message: { type: "string" }
-    }
-  },
-  tags: ["navigation", "camera", "focus"],
-  tool_call_template: {
-    call_template_type: "panel_event",
-    event_type: "industry-theme.file-city-panel:focus-building"
+const NpmIcon$1 = ({ size: size2 }) => /* @__PURE__ */ jsx("svg", { width: size2, height: size2, viewBox: "0 0 24 24", fill: "#CB3837", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z" }) });
+const YarnIcon$1 = ({ size: size2 }) => /* @__PURE__ */ jsx("svg", { width: size2, height: size2, viewBox: "0 0 24 24", fill: "#2C8EBB", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M12 0C5.375 0 0 5.375 0 12s5.375 12 12 12 12-5.375 12-12S18.625 0 12 0zm.768 4.105c.183 0 .363.053.525.157.125.083.287.185.755 1.154.31-.088.468-.042.551-.019.204.056.366.19.463.375.477.917.542 2.553.334 3.605-.241 1.232-.755 2.029-1.131 2.576.324.329.778.899 1.117 1.825.278.774.31 1.478.273 2.015a5.51 5.51 0 0 0 .602-.329c.593-.366 1.487-.917 2.553-.931.714-.009 1.269.445 1.353 1.103a1.23 1.23 0 0 1-.945 1.362c-.649.158-.95.278-1.821.843-1.232.797-2.539 1.242-3.012 1.39a1.686 1.686 0 0 1-.704.343c-.737.181-3.266.315-3.466.315h-.046c-.783 0-1.214-.241-1.45-.491-.658.329-1.51.19-2.122-.134a1.078 1.078 0 0 1-.58-1.153 1.243 1.243 0 0 1-.153-.195c-.162-.25-.528-.936-.454-1.946.056-.723.556-1.367.88-1.71a5.522 5.522 0 0 1 .408-2.256c.306-.727.885-1.348 1.32-1.737-.32-.537-.644-1.367-.329-2.21.227-.602.412-.936.82-1.08h-.005c.199-.074.389-.153.486-.259a3.418 3.418 0 0 1 2.298-1.103c.037-.093.079-.185.125-.283.31-.658.639-1.029 1.024-1.168a.94.94 0 0 1 .328-.06z" }) });
+const PnpmIcon$1 = ({ size: size2 }) => /* @__PURE__ */ jsx("svg", { width: size2, height: size2, viewBox: "0 0 24 24", fill: "#F69220", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M0 0v7.5h7.5V0zm8.25 0v7.5h7.498V0zm8.25 0v7.5H24V0zM8.25 8.25v7.5h7.498v-7.5zm8.25 0v7.5H24v-7.5zM0 16.5V24h7.5v-7.5zm8.25 0V24h7.498v-7.5zm8.25 0V24H24v-7.5z" }) });
+const BunIcon$1 = ({ size: size2 }) => /* @__PURE__ */ jsx("svg", { width: size2, height: size2, viewBox: "0 0 24 24", fill: "#FBF0DF", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M12 22.596c6.628 0 12-4.338 12-9.688 0-3.318-2.057-6.248-5.219-7.986-1.286-.715-2.297-1.357-3.139-1.89C14.058 2.025 13.08 1.404 12 1.404c-1.097 0-2.334.785-3.966 1.821a49.92 49.92 0 0 1-2.816 1.697C2.057 6.66 0 9.59 0 12.908c0 5.35 5.372 9.687 12 9.687v.001Z" }) });
+const PackageManagerIcon$1 = ({
+  packageManager,
+  size: size2 = 14,
+  color: color2
+}) => {
+  switch (packageManager) {
+    case "npm":
+      return /* @__PURE__ */ jsx(NpmIcon$1, { size: size2 });
+    case "yarn":
+      return /* @__PURE__ */ jsx(YarnIcon$1, { size: size2 });
+    case "pnpm":
+      return /* @__PURE__ */ jsx(PnpmIcon$1, { size: size2 });
+    case "bun":
+      return /* @__PURE__ */ jsx(BunIcon$1, { size: size2 });
+    default:
+      return /* @__PURE__ */ jsx(Package, { size: size2, color: color2 });
   }
 };
-const selectDistrictTool = {
-  name: "select_district",
-  description: "Selects and highlights a directory (district) in the file city visualization",
-  inputs: {
-    type: "object",
-    properties: {
-      directoryPath: {
-        type: "string",
-        description: "Path to the directory to select"
-      },
-      expandChildren: {
-        type: "boolean",
-        description: "Whether to expand and show child buildings"
-      }
-    },
-    required: ["directoryPath"]
-  },
-  outputs: {
-    type: "object",
-    properties: {
-      success: { type: "boolean" },
-      selectedDistrict: { type: "string" }
+const shimmerKeyframes = `
+@keyframes feed-header-shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+`;
+let shimmerStyleInjected = false;
+function injectShimmerStyles() {
+  if (shimmerStyleInjected || typeof document === "undefined") return;
+  const style2 = document.createElement("style");
+  style2.textContent = shimmerKeyframes;
+  document.head.appendChild(style2);
+  shimmerStyleInjected = true;
+}
+const ShimmerBox = ({ width, height, borderRadius = 4, backgroundColor }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    style: {
+      width,
+      height,
+      borderRadius,
+      background: `linear-gradient(90deg, ${backgroundColor} 25%, ${adjustBrightness(backgroundColor, 15)} 50%, ${backgroundColor} 75%)`,
+      backgroundSize: "200% 100%",
+      animation: "feed-header-shimmer 1.5s ease-in-out infinite"
     }
-  },
-  tags: ["selection", "district", "directory"],
-  tool_call_template: {
-    call_template_type: "panel_event",
-    event_type: "industry-theme.file-city-panel:select-district"
   }
-};
-const resetViewTool = {
-  name: "reset_view",
-  description: "Resets the file city view to the default camera position",
-  inputs: {
-    type: "object",
-    properties: {
-      animate: {
-        type: "boolean",
-        description: "Whether to animate the camera reset"
-      }
-    }
-  },
-  outputs: {
-    type: "object",
-    properties: {
-      success: { type: "boolean" }
-    }
-  },
-  tags: ["navigation", "camera", "reset"],
-  tool_call_template: {
-    call_template_type: "panel_event",
-    event_type: "industry-theme.file-city-panel:reset-view"
+);
+function adjustBrightness(color2, percent) {
+  if (color2.startsWith("#")) {
+    const num = parseInt(color2.slice(1), 16);
+    const r = Math.min(255, (num >> 16 & 255) + percent);
+    const g = Math.min(255, (num >> 8 & 255) + percent);
+    const b = Math.min(255, (num & 255) + percent);
+    return `#${(r << 16 | g << 8 | b).toString(16).padStart(6, "0")}`;
   }
+  return color2;
+}
+const FeedProjectHeaderSkeleton = ({ compact = false }) => {
+  const { theme: theme2 } = useTheme();
+  React.useEffect(() => {
+    injectShimmerStyles();
+  }, []);
+  const shimmerBg = theme2.colors.backgroundLight || "#2a2a2a";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: compact ? 8 : 12,
+        padding: compact ? "10px 12px" : "14px 16px",
+        backgroundColor: theme2.colors.background,
+        borderBottom: `1px solid ${theme2.colors.border}`
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
+            /* @__PURE__ */ jsx(ShimmerBox, { width: compact ? 24 : 28, height: compact ? 24 : 28, borderRadius: "50%", backgroundColor: shimmerBg }),
+            /* @__PURE__ */ jsx(ShimmerBox, { width: 120, height: compact ? 16 : 18, backgroundColor: shimmerBg })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
+            /* @__PURE__ */ jsx(ShimmerBox, { width: 50, height: 14, backgroundColor: shimmerBg }),
+            /* @__PURE__ */ jsx(ShimmerBox, { width: 70, height: 28, borderRadius: 4, backgroundColor: shimmerBg })
+          ] })
+        ] }),
+        !compact && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
+          /* @__PURE__ */ jsx(ShimmerBox, { width: "100%", height: 12, backgroundColor: shimmerBg }),
+          /* @__PURE__ */ jsx(ShimmerBox, { width: "75%", height: 12, backgroundColor: shimmerBg })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: compact ? 12 : 16 }, children: [
+          /* @__PURE__ */ jsx(ShimmerBox, { width: 45, height: 14, backgroundColor: shimmerBg }),
+          /* @__PURE__ */ jsx(ShimmerBox, { width: 45, height: 14, backgroundColor: shimmerBg }),
+          /* @__PURE__ */ jsx(ShimmerBox, { width: 45, height: 14, backgroundColor: shimmerBg }),
+          /* @__PURE__ */ jsx(ShimmerBox, { width: 55, height: 14, backgroundColor: shimmerBg })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: compact ? 12 : 16,
+              paddingTop: compact ? 4 : 8,
+              borderTop: `1px solid ${theme2.colors.border}`
+            },
+            children: [
+              /* @__PURE__ */ jsx(ShimmerBox, { width: 80, height: 14, backgroundColor: shimmerBg }),
+              /* @__PURE__ */ jsx(ShimmerBox, { width: 60, height: 18, borderRadius: 4, backgroundColor: shimmerBg }),
+              /* @__PURE__ */ jsx(ShimmerBox, { width: 90, height: 14, backgroundColor: shimmerBg })
+            ]
+          }
+        )
+      ]
+    }
+  );
 };
-const codeCityPanelTools = [
-  focusBuildingTool,
-  selectDistrictTool,
-  resetViewTool
-];
-const codeCityPanelToolsMetadata = {
-  id: "industry-theme.file-city-panel",
-  name: "File City Panel",
-  description: "Tools provided by the file city visualization panel extension",
-  tools: codeCityPanelTools
-};
-const panels = [
-  {
-    metadata: {
-      id: "principal-ade.file-city-panel",
-      name: "File City Map",
-      icon: "🏙️",
-      version: "0.2.0",
-      author: "Principal AI",
-      description: "3D visualization of repository structure using the File City metaphor",
-      // Data slices this panel depends on
-      // - fileTree: Required - repository file structure
-      // - fileCityColorModes: Optional - controls which color modes are available
-      //   (if not provided, only fileTypes and git modes are shown)
-      slices: ["fileTree", "fileCityColorModes"],
-      // UTCP-compatible tools this panel exposes
-      tools: codeCityPanelTools
-    },
-    component: CodeCityPanel,
-    // Optional: Called when this specific panel is mounted
-    onMount: async (context) => {
-      var _a;
-      console.log(
-        "File City Panel mounted",
-        (_a = context.currentScope.repository) == null ? void 0 : _a.path
-      );
-      if (context.hasSlice("fileTree") && !context.isSliceLoading("fileTree")) {
-        await context.refresh("repository", "fileTree");
-      }
-    },
-    // Optional: Called when this specific panel is unmounted
-    onUnmount: async (_context) => {
-      console.log("File City Panel unmounting");
+function formatCount(count2) {
+  if (count2 >= 1e6) {
+    return `${(count2 / 1e6).toFixed(1)}m`;
+  }
+  if (count2 >= 1e3) {
+    return `${(count2 / 1e3).toFixed(1)}k`;
+  }
+  return count2.toString();
+}
+const FeedProjectHeader = ({
+  repo,
+  rootPackage,
+  onOpen,
+  compact = false
+}) => {
+  const { theme: theme2 } = useTheme();
+  const fontSizeSmall = theme2.fontSizes[0];
+  const fontSizeMedium = theme2.fontSizes[1];
+  const fontSizeLarge = theme2.fontSizes[2] || theme2.fontSizes[1];
+  const totalDeps = rootPackage ? (rootPackage.dependencyCount || 0) + (rootPackage.devDependencyCount || 0) : 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: compact ? 8 : 12,
+        padding: compact ? "10px 12px" : "14px 16px",
+        backgroundColor: theme2.colors.background,
+        borderBottom: `1px solid ${theme2.colors.border}`,
+        fontFamily: theme2.fonts.body
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: 12
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, flex: 1, minWidth: 0 }, children: [
+                repo.avatarUrl ? /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: repo.avatarUrl,
+                    alt: repo.owner,
+                    style: {
+                      width: compact ? 24 : 28,
+                      height: compact ? 24 : 28,
+                      borderRadius: repo.isOrganization ? "6px" : "50%",
+                      flexShrink: 0
+                    }
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      width: compact ? 24 : 28,
+                      height: compact ? 24 : 28,
+                      borderRadius: repo.isOrganization ? "6px" : "50%",
+                      backgroundColor: theme2.colors.backgroundLight,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      flexShrink: 0
+                    },
+                    children: repo.isOrganization ? /* @__PURE__ */ jsx(Building2, { size: 14, color: theme2.colors.textSecondary }) : /* @__PURE__ */ jsx(User, { size: 14, color: theme2.colors.textSecondary })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      fontSize: compact ? fontSizeMedium : fontSizeLarge,
+                      fontWeight: 600,
+                      color: theme2.colors.text,
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap"
+                    },
+                    title: repo.fullName,
+                    children: repo.name
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, flexShrink: 0 }, children: [
+                repo.license && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 4,
+                      fontSize: fontSizeSmall,
+                      color: theme2.colors.textSecondary
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(Scale, { size: 12 }),
+                      /* @__PURE__ */ jsx("span", { children: repo.license })
+                    ]
+                  }
+                ),
+                onOpen && /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: onOpen,
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 4,
+                      padding: "5px 12px",
+                      fontSize: fontSizeSmall,
+                      fontWeight: 500,
+                      fontFamily: theme2.fonts.body,
+                      color: "#ffffff",
+                      backgroundColor: theme2.colors.primary,
+                      border: "none",
+                      borderRadius: "4px",
+                      cursor: "pointer",
+                      flexShrink: 0,
+                      transition: "opacity 0.15s ease"
+                    },
+                    onMouseEnter: (e) => {
+                      e.currentTarget.style.opacity = "0.9";
+                    },
+                    onMouseLeave: (e) => {
+                      e.currentTarget.style.opacity = "1";
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(ExternalLink, { size: 14 }),
+                      "Open"
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        repo.description && !compact && /* @__PURE__ */ jsx(
+          "p",
+          {
+            style: {
+              margin: 0,
+              fontSize: fontSizeSmall,
+              color: theme2.colors.textSecondary,
+              lineHeight: 1.4,
+              display: "-webkit-box",
+              WebkitLineClamp: 2,
+              WebkitBoxOrient: "vertical",
+              overflow: "hidden"
+            },
+            title: repo.description,
+            children: repo.description
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: compact ? 12 : 16,
+              flexWrap: "wrap"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 4,
+                    fontSize: fontSizeSmall,
+                    color: theme2.colors.textSecondary
+                  },
+                  title: `${repo.stars.toLocaleString()} stars`,
+                  children: [
+                    /* @__PURE__ */ jsx(Star, { size: 13 }),
+                    /* @__PURE__ */ jsx("span", { children: formatCount(repo.stars) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 4,
+                    fontSize: fontSizeSmall,
+                    color: theme2.colors.textSecondary
+                  },
+                  title: `${repo.forks.toLocaleString()} forks`,
+                  children: [
+                    /* @__PURE__ */ jsx(GitFork, { size: 13 }),
+                    /* @__PURE__ */ jsx("span", { children: formatCount(repo.forks) })
+                  ]
+                }
+              ),
+              repo.watchers !== void 0 && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 4,
+                    fontSize: fontSizeSmall,
+                    color: theme2.colors.textSecondary
+                  },
+                  title: `${repo.watchers.toLocaleString()} watching`,
+                  children: [
+                    /* @__PURE__ */ jsx(Eye, { size: 13 }),
+                    /* @__PURE__ */ jsx("span", { children: formatCount(repo.watchers) })
+                  ]
+                }
+              ),
+              repo.openIssues !== void 0 && repo.openIssues > 0 && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 4,
+                    fontSize: fontSizeSmall,
+                    color: theme2.colors.textSecondary
+                  },
+                  title: `${repo.openIssues.toLocaleString()} open issues`,
+                  children: [
+                    /* @__PURE__ */ jsx(CircleAlert, { size: 13 }),
+                    /* @__PURE__ */ jsx("span", { children: formatCount(repo.openIssues) })
+                  ]
+                }
+              ),
+              repo.htmlUrl && /* @__PURE__ */ jsxs(
+                "a",
+                {
+                  href: repo.htmlUrl,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 4,
+                    fontSize: fontSizeSmall,
+                    color: theme2.colors.textSecondary,
+                    textDecoration: "none"
+                  },
+                  title: repo.htmlUrl,
+                  children: [
+                    /* @__PURE__ */ jsx(ExternalLink, { size: 12 }),
+                    /* @__PURE__ */ jsx("span", { children: "GitHub" })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        rootPackage && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: compact ? 12 : 16,
+              flexWrap: "wrap",
+              paddingTop: compact ? 4 : 8,
+              borderTop: `1px solid ${theme2.colors.border}`
+            },
+            children: [
+              rootPackage.packageManager && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 6
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      PackageManagerIcon$1,
+                      {
+                        packageManager: rootPackage.packageManager,
+                        size: 14,
+                        color: theme2.colors.textSecondary
+                      }
+                    ),
+                    rootPackage.name && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          fontSize: fontSizeSmall,
+                          color: theme2.colors.text,
+                          fontWeight: 500
+                        },
+                        children: rootPackage.name
+                      }
+                    ),
+                    rootPackage.version && /* @__PURE__ */ jsxs(
+                      "span",
+                      {
+                        style: {
+                          fontSize: fontSizeSmall,
+                          color: theme2.colors.textSecondary,
+                          backgroundColor: theme2.colors.backgroundLight,
+                          padding: "1px 5px",
+                          borderRadius: "3px"
+                        },
+                        children: [
+                          "v",
+                          rootPackage.version
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              rootPackage.isMonorepo && /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 4,
+                    fontSize: fontSizeSmall,
+                    color: "#8b5cf6",
+                    backgroundColor: "rgba(139, 92, 246, 0.15)",
+                    padding: "2px 6px",
+                    borderRadius: "4px"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(GitBranch, { size: 12 }),
+                    rootPackage.packageCount ? `${rootPackage.packageCount} packages` : "monorepo"
+                  ]
+                }
+              ),
+              totalDeps > 0 && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 4,
+                    fontSize: fontSizeSmall,
+                    color: theme2.colors.textSecondary
+                  },
+                  title: `${rootPackage.dependencyCount || 0} prod, ${rootPackage.devDependencyCount || 0} dev dependencies`,
+                  children: [
+                    /* @__PURE__ */ jsx(Box, { size: 12 }),
+                    /* @__PURE__ */ jsxs("span", { children: [
+                      rootPackage.dependencyCount || 0,
+                      " deps",
+                      rootPackage.devDependencyCount ? ` + ${rootPackage.devDependencyCount} dev` : ""
+                    ] })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+const FeedCodeCityPanelContent = ({
+  context,
+  actions: actions2,
+  events
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const { theme: theme2 } = useTheme();
+  const [cityData, setCityData] = useState(null);
+  const [hoverInfo, setHoverInfo] = useState(null);
+  const [highlightLayers, setHighlightLayers] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [containerSize, setContainerSize] = useState(null);
+  const contentContainerRef = useRef(null);
+  const feedProjectSlice = context.getSlice("feedProject");
+  const LEGEND_MIN_SIZE = 200;
+  const HOVER_BAR_HEIGHT = 48;
+  useEffect(() => {
+    const container = contentContainerRef.current;
+    if (!container) return;
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { width, height } = entry.contentRect;
+        setContainerSize({ width, height });
+      }
+    });
+    resizeObserver.observe(container);
+    return () => resizeObserver.disconnect();
+  }, []);
+  const layout = useMemo(() => {
+    if (!containerSize) {
+      return { mapSize: 0, legendPosition: "bottom" };
+    }
+    const { width, height } = containerSize;
+    const isLandscape = width > height;
+    if (isLandscape) {
+      const idealMapSize = height;
+      const availableForLegend = width - idealMapSize;
+      const legendNeedsMoreSpace = availableForLegend < LEGEND_MIN_SIZE;
+      const mapSize = legendNeedsMoreSpace ? width - LEGEND_MIN_SIZE : idealMapSize;
+      return { mapSize, legendPosition: "right" };
+    } else {
+      const idealMapHeight = width + HOVER_BAR_HEIGHT;
+      const availableForLegend = height - idealMapHeight;
+      const legendNeedsMoreSpace = availableForLegend < LEGEND_MIN_SIZE;
+      const mapSize = legendNeedsMoreSpace ? height - LEGEND_MIN_SIZE : idealMapHeight;
+      return { mapSize, legendPosition: "bottom" };
+    }
+  }, [containerSize]);
+  const fileTreeSlice = context.getSlice("fileTree");
+  useEffect(() => {
+    if (!(fileTreeSlice == null ? void 0 : fileTreeSlice.data) || fileTreeSlice.loading) {
+      return;
+    }
+    setLoading(true);
+    try {
+      const fileInfoList = fileTreeSlice.data.allFiles.map((file) => {
+        const pathParts = file.path.split("/");
+        const fileName = file.name || pathParts[pathParts.length - 1];
+        const extension = fileName.includes(".") ? fileName.split(".").pop() || "" : "";
+        return {
+          path: file.path,
+          name: fileName,
+          extension,
+          size: file.size || 1e3,
+          lastModified: /* @__PURE__ */ new Date(),
+          isDirectory: false,
+          relativePath: file.path
+        };
+      });
+      const fileSystemTree = buildFileSystemTreeFromFileInfoList(
+        fileInfoList,
+        fileTreeSlice.data.sha || "unknown"
+      );
+      const builder = new CodeCityBuilderWithGrid();
+      const data = builder.buildCityFromFileSystem(fileSystemTree, "");
+      setCityData(data);
+      if (data.buildings) {
+        const fileTypeLayers = distExports.createFileColorHighlightLayers(data.buildings);
+        setHighlightLayers(fileTypeLayers);
+      }
+    } catch (error) {
+      console.error("Error building city:", error);
+    } finally {
+      setLoading(false);
+    }
+  }, [fileTreeSlice == null ? void 0 : fileTreeSlice.data, fileTreeSlice == null ? void 0 : fileTreeSlice.loading]);
+  const legendFileTypes = useMemo(() => {
+    return highlightLayers.filter((layer) => layer.id.endsWith("-primary")).map((layer) => ({
+      id: layer.id,
+      name: layer.name,
+      fillColor: layer.color,
+      count: layer.items.length,
+      enabled: layer.enabled
+    }));
+  }, [highlightLayers]);
+  const toggleFileType = useCallback((id2) => {
+    setHighlightLayers(
+      (prev) => prev.map((layer) => {
+        if (layer.id === id2 || layer.id === id2.replace("-primary", "-secondary")) {
+          return { ...layer, enabled: !layer.enabled };
+        }
+        return layer;
+      })
+    );
+  }, []);
+  const handleHover = useCallback((info) => {
+    setHoverInfo(info);
+  }, []);
+  const handleFileClick = useCallback(
+    (filePath) => {
+      if (actions2.openFile) {
+        actions2.openFile(filePath);
+      }
+    },
+    [actions2]
+  );
+  const handleOpen = useCallback(() => {
+    var _a2;
+    if (((_a2 = feedProjectSlice == null ? void 0 : feedProjectSlice.data) == null ? void 0 : _a2.repo) && events) {
+      events.emit({
+        type: "project:open",
+        source: "feed-code-city-panel",
+        timestamp: Date.now(),
+        payload: {
+          repo: feedProjectSlice.data.repo,
+          rootPackage: feedProjectSlice.data.rootPackage
+        }
+      });
+    }
+  }, [events, feedProjectSlice == null ? void 0 : feedProjectSlice.data]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        width: "100%",
+        backgroundColor: theme2.colors.background
+      },
+      children: [
+        (feedProjectSlice == null ? void 0 : feedProjectSlice.loading) ? /* @__PURE__ */ jsx(FeedProjectHeaderSkeleton, {}) : ((_a = feedProjectSlice == null ? void 0 : feedProjectSlice.data) == null ? void 0 : _a.repo) ? /* @__PURE__ */ jsx(
+          FeedProjectHeader,
+          {
+            repo: feedProjectSlice.data.repo,
+            rootPackage: feedProjectSlice.data.rootPackage,
+            onOpen: handleOpen
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: contentContainerRef,
+            style: {
+              flex: 1,
+              width: "100%",
+              position: "relative",
+              overflow: "hidden",
+              display: "flex",
+              flexDirection: layout.legendPosition === "right" ? "row" : "column"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    width: layout.legendPosition === "right" ? layout.mapSize : "100%",
+                    height: layout.legendPosition === "bottom" ? layout.mapSize : "100%",
+                    flexShrink: 0,
+                    position: "relative",
+                    display: "flex",
+                    flexDirection: "column"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("div", { style: { flex: 1, position: "relative", minHeight: 0 }, children: loading ? /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          height: "100%",
+                          color: theme2.colors.textSecondary
+                        },
+                        children: "Loading repository structure..."
+                      }
+                    ) : !cityData ? /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          flexDirection: "column",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          height: "100%",
+                          color: theme2.colors.textSecondary,
+                          gap: "12px"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(Building2, { size: 32, style: { opacity: 0.5 } }),
+                          /* @__PURE__ */ jsx("div", { children: context.currentScope.repository ? "Building File City..." : "No repository loaded" })
+                        ]
+                      }
+                    ) : /* @__PURE__ */ jsx(
+                      distExports.ArchitectureMapHighlightLayers,
+                      {
+                        cityData,
+                        highlightLayers,
+                        showLayerControls: false,
+                        onLayerToggle: () => {
+                        },
+                        defaultDirectoryColor: "#111827",
+                        onFileClick: handleFileClick,
+                        showFileTypeIcons: true,
+                        className: "w-full h-full",
+                        showDirectoryLabels: true,
+                        onHover: handleHover,
+                        enableZoom: false,
+                        allowZoomToPath: true,
+                        zoomAnimationSpeed: 0.12
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          height: "48px",
+                          borderTop: `1px solid ${theme2.colors.border}`,
+                          backgroundColor: theme2.colors.background,
+                          display: "flex",
+                          alignItems: "center",
+                          padding: "0 12px",
+                          fontSize: theme2.fontSizes[0],
+                          fontFamily: theme2.fonts.body,
+                          color: theme2.colors.text,
+                          flexShrink: 0
+                        },
+                        children: hoverInfo && (hoverInfo.hoveredBuilding || hoverInfo.hoveredDistrict) ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsxs(
+                            "div",
+                            {
+                              style: {
+                                flex: "1 1 auto",
+                                display: "flex",
+                                flexDirection: "column",
+                                gap: "1px",
+                                minWidth: 0
+                              },
+                              children: [
+                                /* @__PURE__ */ jsx(
+                                  "div",
+                                  {
+                                    style: {
+                                      fontWeight: 600,
+                                      fontFamily: theme2.fonts.monospace,
+                                      color: theme2.colors.primary,
+                                      fontSize: theme2.fontSizes[1],
+                                      overflow: "hidden",
+                                      textOverflow: "ellipsis",
+                                      whiteSpace: "nowrap"
+                                    },
+                                    children: ((_b = hoverInfo.fileTooltip) == null ? void 0 : _b.text) || ((_d = (_c = hoverInfo.hoveredDistrict) == null ? void 0 : _c.path) == null ? void 0 : _d.split("/").pop()) || ((_e = hoverInfo.hoveredDistrict) == null ? void 0 : _e.path) || "Unknown"
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx(
+                                  "div",
+                                  {
+                                    style: {
+                                      fontFamily: theme2.fonts.monospace,
+                                      color: theme2.colors.textSecondary,
+                                      fontSize: theme2.fontSizes[0],
+                                      overflow: "hidden",
+                                      textOverflow: "ellipsis",
+                                      whiteSpace: "nowrap"
+                                    },
+                                    children: ((_f = hoverInfo.hoveredBuilding) == null ? void 0 : _f.path) || ((_g = hoverInfo.hoveredDistrict) == null ? void 0 : _g.path) || "/"
+                                  }
+                                )
+                              ]
+                            }
+                          ),
+                          hoverInfo.hoveredDistrict && hoverInfo.fileCount !== null && /* @__PURE__ */ jsxs(
+                            "div",
+                            {
+                              style: {
+                                fontSize: theme2.fontSizes[0],
+                                color: theme2.colors.textSecondary,
+                                whiteSpace: "nowrap"
+                              },
+                              children: [
+                                hoverInfo.fileCount,
+                                " ",
+                                hoverInfo.fileCount === 1 ? "file" : "files"
+                              ]
+                            }
+                          )
+                        ] }) : /* @__PURE__ */ jsx("div", { style: { color: theme2.colors.textSecondary, fontStyle: "italic" }, children: "Hover over the map to see file details" })
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Legend,
+                {
+                  fileTypes: legendFileTypes,
+                  onItemClick: toggleFileType,
+                  position: layout.legendPosition
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+const FeedCodeCityPanel = (props) => {
+  return /* @__PURE__ */ jsx(FeedCodeCityPanelContent, { ...props });
+};
+const focusBuildingTool = {
+  name: "focus_building",
+  description: "Focuses the camera on a specific file (building) in the file city visualization",
+  inputs: {
+    type: "object",
+    properties: {
+      filePath: {
+        type: "string",
+        description: "Path to the file to focus on"
+      },
+      animate: {
+        type: "boolean",
+        description: "Whether to animate the camera transition"
+      }
+    },
+    required: ["filePath"]
+  },
+  outputs: {
+    type: "object",
+    properties: {
+      success: { type: "boolean" },
+      message: { type: "string" }
+    }
+  },
+  tags: ["navigation", "camera", "focus"],
+  tool_call_template: {
+    call_template_type: "panel_event",
+    event_type: "industry-theme.file-city-panel:focus-building"
+  }
+};
+const selectDistrictTool = {
+  name: "select_district",
+  description: "Selects and highlights a directory (district) in the file city visualization",
+  inputs: {
+    type: "object",
+    properties: {
+      directoryPath: {
+        type: "string",
+        description: "Path to the directory to select"
+      },
+      expandChildren: {
+        type: "boolean",
+        description: "Whether to expand and show child buildings"
+      }
+    },
+    required: ["directoryPath"]
+  },
+  outputs: {
+    type: "object",
+    properties: {
+      success: { type: "boolean" },
+      selectedDistrict: { type: "string" }
+    }
+  },
+  tags: ["selection", "district", "directory"],
+  tool_call_template: {
+    call_template_type: "panel_event",
+    event_type: "industry-theme.file-city-panel:select-district"
+  }
+};
+const resetViewTool = {
+  name: "reset_view",
+  description: "Resets the file city view to the default camera position",
+  inputs: {
+    type: "object",
+    properties: {
+      animate: {
+        type: "boolean",
+        description: "Whether to animate the camera reset"
+      }
+    }
+  },
+  outputs: {
+    type: "object",
+    properties: {
+      success: { type: "boolean" }
+    }
+  },
+  tags: ["navigation", "camera", "reset"],
+  tool_call_template: {
+    call_template_type: "panel_event",
+    event_type: "industry-theme.file-city-panel:reset-view"
+  }
+};
+const codeCityPanelTools = [
+  focusBuildingTool,
+  selectDistrictTool,
+  resetViewTool
+];
+const codeCityPanelToolsMetadata = {
+  id: "industry-theme.file-city-panel",
+  name: "File City Panel",
+  description: "Tools provided by the file city visualization panel extension",
+  tools: codeCityPanelTools
+};
+const NpmIcon = ({ size: size2 }) => /* @__PURE__ */ jsx("svg", { width: size2, height: size2, viewBox: "0 0 24 24", fill: "#CB3837", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z" }) });
+const YarnIcon = ({ size: size2 }) => /* @__PURE__ */ jsx("svg", { width: size2, height: size2, viewBox: "0 0 24 24", fill: "#2C8EBB", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M12 0C5.375 0 0 5.375 0 12s5.375 12 12 12 12-5.375 12-12S18.625 0 12 0zm.768 4.105c.183 0 .363.053.525.157.125.083.287.185.755 1.154.31-.088.468-.042.551-.019.204.056.366.19.463.375.477.917.542 2.553.334 3.605-.241 1.232-.755 2.029-1.131 2.576.324.329.778.899 1.117 1.825.278.774.31 1.478.273 2.015a5.51 5.51 0 0 0 .602-.329c.593-.366 1.487-.917 2.553-.931.714-.009 1.269.445 1.353 1.103a1.23 1.23 0 0 1-.945 1.362c-.649.158-.95.278-1.821.843-1.232.797-2.539 1.242-3.012 1.39a1.686 1.686 0 0 1-.704.343c-.737.181-3.266.315-3.466.315h-.046c-.783 0-1.214-.241-1.45-.491-.658.329-1.51.19-2.122-.134a1.078 1.078 0 0 1-.58-1.153 1.243 1.243 0 0 1-.153-.195c-.162-.25-.528-.936-.454-1.946.056-.723.556-1.367.88-1.71a5.522 5.522 0 0 1 .408-2.256c.306-.727.885-1.348 1.32-1.737-.32-.537-.644-1.367-.329-2.21.227-.602.412-.936.82-1.08h-.005c.199-.074.389-.153.486-.259a3.418 3.418 0 0 1 2.298-1.103c.037-.093.079-.185.125-.283.31-.658.639-1.029 1.024-1.168a.94.94 0 0 1 .328-.06z" }) });
+const PnpmIcon = ({ size: size2 }) => /* @__PURE__ */ jsx("svg", { width: size2, height: size2, viewBox: "0 0 24 24", fill: "#F69220", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M0 0v7.5h7.5V0zm8.25 0v7.5h7.498V0zm8.25 0v7.5H24V0zM8.25 8.25v7.5h7.498v-7.5zm8.25 0v7.5H24v-7.5zM0 16.5V24h7.5v-7.5zm8.25 0V24h7.498v-7.5zm8.25 0V24H24v-7.5z" }) });
+const BunIcon = ({ size: size2 }) => /* @__PURE__ */ jsx("svg", { width: size2, height: size2, viewBox: "0 0 24 24", fill: "#FBF0DF", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M12 22.596c6.628 0 12-4.338 12-9.688 0-3.318-2.057-6.248-5.219-7.986-1.286-.715-2.297-1.357-3.139-1.89C14.058 2.025 13.08 1.404 12 1.404c-1.097 0-2.334.785-3.966 1.821a49.92 49.92 0 0 1-2.816 1.697C2.057 6.66 0 9.59 0 12.908c0 5.35 5.372 9.687 12 9.687v.001Z" }) });
+const PackageManagerIcon = ({
+  packageManager,
+  size: size2 = 16,
+  color: color2
+}) => {
+  switch (packageManager) {
+    case "npm":
+      return /* @__PURE__ */ jsx(NpmIcon, { size: size2 });
+    case "yarn":
+      return /* @__PURE__ */ jsx(YarnIcon, { size: size2 });
+    case "pnpm":
+      return /* @__PURE__ */ jsx(PnpmIcon, { size: size2 });
+    case "bun":
+      return /* @__PURE__ */ jsx(BunIcon, { size: size2 });
+    default:
+      return /* @__PURE__ */ jsx(Package, { size: size2, color: color2 });
+  }
+};
+const ProjectInfoHeader = ({
+  project,
+  onOpen,
+  compact = false
+}) => {
+  const { theme: theme2 } = useTheme();
+  const totalDeps = (project.dependencyCount || 0) + (project.devDependencyCount || 0);
+  const fontSizeSmall = theme2.fontSizes[0];
+  const fontSizeMedium = theme2.fontSizes[1];
+  const fontSizeLarge = theme2.fontSizes[2] || theme2.fontSizes[1];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: compact ? 4 : 8,
+        padding: compact ? "8px 12px" : "12px 16px",
+        backgroundColor: theme2.colors.background,
+        borderBottom: `1px solid ${theme2.colors.border}`,
+        fontFamily: theme2.fonts.body,
+        minHeight: compact ? 48 : "auto"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: 12
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, flex: 1, minWidth: 0 }, children: [
+                project.packageManager && /* @__PURE__ */ jsx("div", { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(
+                  PackageManagerIcon,
+                  {
+                    packageManager: project.packageManager,
+                    size: compact ? 18 : 20,
+                    color: theme2.colors.textSecondary
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      fontSize: compact ? fontSizeMedium : fontSizeLarge,
+                      fontWeight: 600,
+                      color: theme2.colors.text,
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap"
+                    },
+                    title: project.name,
+                    children: project.name
+                  }
+                ),
+                project.version && /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    style: {
+                      fontSize: fontSizeSmall,
+                      color: theme2.colors.textSecondary,
+                      backgroundColor: theme2.colors.backgroundLight,
+                      padding: "2px 6px",
+                      borderRadius: "4px",
+                      flexShrink: 0
+                    },
+                    children: [
+                      "v",
+                      project.version
+                    ]
+                  }
+                ),
+                project.isMonorepo && /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 4,
+                      fontSize: fontSizeSmall,
+                      color: "#8b5cf6",
+                      backgroundColor: "rgba(139, 92, 246, 0.15)",
+                      padding: "2px 6px",
+                      borderRadius: "4px",
+                      flexShrink: 0
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(GitBranch, { size: 12 }),
+                      project.packageCount ? `${project.packageCount} packages` : "monorepo"
+                    ]
+                  }
+                )
+              ] }),
+              onOpen && /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: onOpen,
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 4,
+                    padding: "4px 10px",
+                    fontSize: fontSizeSmall,
+                    fontWeight: 500,
+                    fontFamily: theme2.fonts.body,
+                    color: "#ffffff",
+                    backgroundColor: theme2.colors.primary,
+                    border: "none",
+                    borderRadius: "4px",
+                    cursor: "pointer",
+                    flexShrink: 0,
+                    transition: "opacity 0.15s ease"
+                  },
+                  onMouseEnter: (e) => {
+                    e.currentTarget.style.opacity = "0.9";
+                  },
+                  onMouseLeave: (e) => {
+                    e.currentTarget.style.opacity = "1";
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(ExternalLink, { size: 14 }),
+                    "Open"
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        !compact && project.description && /* @__PURE__ */ jsx(
+          "p",
+          {
+            style: {
+              margin: 0,
+              fontSize: fontSizeSmall,
+              color: theme2.colors.textSecondary,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap"
+            },
+            title: project.description,
+            children: project.description
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: compact ? 12 : 16,
+              flexWrap: "wrap"
+            },
+            children: [
+              project.license && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 4,
+                    fontSize: fontSizeSmall,
+                    color: theme2.colors.textSecondary
+                  },
+                  title: `License: ${project.license}`,
+                  children: [
+                    /* @__PURE__ */ jsx(Scale, { size: 12 }),
+                    /* @__PURE__ */ jsx("span", { children: project.license })
+                  ]
+                }
+              ),
+              totalDeps > 0 && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 4,
+                    fontSize: fontSizeSmall,
+                    color: theme2.colors.textSecondary
+                  },
+                  title: `${project.dependencyCount || 0} prod, ${project.devDependencyCount || 0} dev dependencies`,
+                  children: [
+                    /* @__PURE__ */ jsx(Box, { size: 12 }),
+                    /* @__PURE__ */ jsxs("span", { children: [
+                      project.dependencyCount || 0,
+                      " deps",
+                      project.devDependencyCount ? ` + ${project.devDependencyCount} dev` : ""
+                    ] })
+                  ]
+                }
+              ),
+              project.author && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 4,
+                    fontSize: fontSizeSmall,
+                    color: theme2.colors.textSecondary
+                  },
+                  title: `Author: ${project.author}`,
+                  children: [
+                    /* @__PURE__ */ jsx(FileText, { size: 12 }),
+                    /* @__PURE__ */ jsx("span", { children: project.author })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+const panels = [
+  {
+    metadata: {
+      id: "principal-ade.file-city-panel",
+      name: "File City Map",
+      icon: "🏙️",
+      version: "0.2.0",
+      author: "Principal AI",
+      description: "3D visualization of repository structure using the File City metaphor",
+      // Data slices this panel depends on
+      // - fileTree: Required - repository file structure
+      // - fileCityColorModes: Optional - controls which color modes are available
+      //   (if not provided, only fileTypes and git modes are shown)
+      slices: ["fileTree", "fileCityColorModes"],
+      // UTCP-compatible tools this panel exposes
+      tools: codeCityPanelTools
+    },
+    component: CodeCityPanel,
+    // Optional: Called when this specific panel is mounted
+    onMount: async (context) => {
+      var _a;
+      console.log(
+        "File City Panel mounted",
+        (_a = context.currentScope.repository) == null ? void 0 : _a.path
+      );
+      if (context.hasSlice("fileTree") && !context.isSliceLoading("fileTree")) {
+        await context.refresh("repository", "fileTree");
+      }
+    },
+    // Optional: Called when this specific panel is unmounted
+    onUnmount: async (_context) => {
+      console.log("File City Panel unmounting");
+    }
+  },
+  {
+    metadata: {
+      id: "principal-ade.feed-file-city-panel",
+      name: "Feed Project View",
+      icon: "📦",
+      version: "0.1.0",
+      author: "Principal AI",
+      description: "File City visualization with project header for feed view context",
+      // Data slices this panel depends on
+      // - fileTree: Required - repository file structure
+      // - feedProject: Required - GitHub repo info and package details
+      slices: ["fileTree", "feedProject"]
+    },
+    component: FeedCodeCityPanel,
+    onMount: async (context) => {
+      var _a;
+      console.log(
+        "Feed File City Panel mounted",
+        (_a = context.currentScope.repository) == null ? void 0 : _a.path
+      );
+      if (context.hasSlice("fileTree") && !context.isSliceLoading("fileTree")) {
+        await context.refresh("repository", "fileTree");
+      }
+    },
+    onUnmount: async (_context) => {
+      console.log("Feed File City Panel unmounting");
     }
   }
 ];
@@ -26322,6 +27498,10 @@ const onPackageUnload = async () => {
 export {
   COLOR_MODES,
   DEFAULT_COLOR_MODES,
+  FeedCodeCityPanel,
+  FeedProjectHeader,
+  FeedProjectHeaderSkeleton,
+  ProjectInfoHeader,
   QUALITY_COLOR_MODES,
   codeCityPanelTools,
   codeCityPanelToolsMetadata,