@servantcdh/ez-planet-cosmos 0.2.1 → 0.2.6

package/dist/index.js

@@ -1,61 +1,100 @@
-import { jsxs as p, jsx as t, Fragment as Bt } from "react/jsx-runtime";
-import { memo as ot, useRef as K, useMemo as R, useState as _, useCallback as v, useEffect as at } from "react";
-import { Handle as tt, Position as et, getBezierPath as zt, BaseEdge as it, ReactFlowProvider as $t, useReactFlow as Lt, useNodesState as Mt, useEdgesState as Ft, ReactFlow as Dt, Background as Tt, BackgroundVariant as Wt, Controls as At, MiniMap as Rt } from "@xyflow/react";
-import { motion as w, AnimatePresence as E } from "framer-motion";
-import { Canvas as Et, useFrame as nt } from "@react-three/fiber";
-import { Points as rt, PointMaterial as lt } from "@react-three/drei";
-function Ot({ data: e }) {
-  const { label: h, subtitle: u, color: l, status: o, isSelected: n } = e, c = n ? 35 : o === "running" ? 30 : o === "error" ? 20 : 15, d = o === "running" ? [1, 1.08, 1] : [1, 1.02, 1], y = n ? 110 : 100;
-  return /* @__PURE__ */ p("div", { style: { position: "relative", cursor: "pointer" }, children: [
+import { jsxs as m, jsx as t, Fragment as kt } from "react/jsx-runtime";
+import { memo as tt, useRef as et, useMemo as W, useState as Z, useCallback as v, useEffect as it } from "react";
+import { Handle as X, Position as Q, getBezierPath as It, BaseEdge as Y, ReactFlowProvider as Lt, useReactFlow as zt, useNodesState as $t, useEdgesState as Dt, ReactFlow as Mt, Background as Ft, BackgroundVariant as Rt, Controls as Tt, MiniMap as Wt } from "@xyflow/react";
+import { motion as I, AnimatePresence as A } from "framer-motion";
+import { Canvas as At, useFrame as ot } from "@react-three/fiber";
+import { Points as at, PointMaterial as nt } from "@react-three/drei";
+const Ot = "cc-root-eSR-1", Et = "cc-layerStarField-jOb4M", Zt = "cc-layerReactFlow-CeHI9", Ht = "cc-sidePanel-PzU72", Vt = "cc-sidePanelHeader-cWPCq", _t = "cc-sidePanelTitle-Yfh5N", Gt = "cc-sidePanelPlanetIcon-aRuLt", Jt = "cc-sidePanelName-TFFeE", Ut = "cc-sidePanelSubtitle-8fp2Y", Kt = "cc-sidePanelClose-Sdg-J", jt = "cc-sidePanelContent-QIEEQ", qt = "cc-sidePanelFooter-DVOHi", Xt = "cc-satelliteList--vkXn", Qt = "cc-satelliteItem-JGdmG", Yt = "cc-satelliteIcon-arUe3", te = "cc-satelliteInfo-NaKLd", ee = "cc-satelliteName-zfOPN", ie = "cc-satelliteSummary-XARVm", oe = "cc-enterButton-5Vnri", ae = "cc-zoomTransition-Wcju8", ne = "cc-zoomPlanetLabel-3SJT2", le = "cc-planetInterior-GlnW1", re = "cc-interiorBackButton-qJAiZ", ce = "cc-interiorCenter-xdKsX", se = "cc-interiorPlanet--XIzf", de = "cc-interiorPlanetLabel-e7yxq", ue = "cc-interiorPlanetSubtitle-e2vON", me = "cc-orbitRing-hbvmD", pe = "cc-satelliteNode-01STS", he = "cc-satelliteNodeIcon-Xq45f", fe = "cc-satelliteNodeLabel-LLOJ5", ye = "cc-satelliteNodeBadge-HsUFp", ge = "cc-tutorialOverlay-3GHo7", ve = "cc-tutorialWelcome-21KDP", be = "cc-tutorialWelcomeTitle-7GwS9", Ne = "cc-tutorialWelcomeDesc--pznv", Pe = "cc-tutorialActions-szJ0-", we = "cc-tutorialButton-wL9-p", Ce = "cc-tutorialCard-LGIkK", Be = "cc-tutorialChip-bUoEb", xe = "cc-tutorialCardTitle-r2Y1I", Se = "cc-tutorialCardDesc-nOS-M", ke = "cc-tutorialProgress-wIAT9", Ie = "cc-tutorialProgressBar-PFBdE", Le = "cc-tutorialCardFooter-bSdyM", ze = "cc-tutorialDots-8M0QU", $e = "cc-tutorialDot-518t4", De = "cc-planetBody-kF0Jj", Me = "cc-planetBodyRunning-cmLi4", Fe = "cc-planetOrbitRing-v7fZR", Re = "cc-planetStatusDot--M-6s", Te = "cc-planetHint-QUWAw", We = "cc-topBarSlot-EJGvM", Ae = "cc-topBarLogo-1PRdl", Oe = "cc-topBarContent-8WDi6", i = {
+  root: Ot,
+  layerStarField: Et,
+  layerReactFlow: Zt,
+  sidePanel: Ht,
+  sidePanelHeader: Vt,
+  sidePanelTitle: _t,
+  sidePanelPlanetIcon: Gt,
+  sidePanelName: Jt,
+  sidePanelSubtitle: Ut,
+  sidePanelClose: Kt,
+  sidePanelContent: jt,
+  sidePanelFooter: qt,
+  satelliteList: Xt,
+  satelliteItem: Qt,
+  satelliteIcon: Yt,
+  satelliteInfo: te,
+  satelliteName: ee,
+  satelliteSummary: ie,
+  enterButton: oe,
+  zoomTransition: ae,
+  zoomPlanetLabel: ne,
+  planetInterior: le,
+  interiorBackButton: re,
+  interiorCenter: ce,
+  interiorPlanet: se,
+  interiorPlanetLabel: de,
+  interiorPlanetSubtitle: ue,
+  orbitRing: me,
+  satelliteNode: pe,
+  satelliteNodeIcon: he,
+  satelliteNodeLabel: fe,
+  satelliteNodeBadge: ye,
+  tutorialOverlay: ge,
+  tutorialWelcome: ve,
+  tutorialWelcomeTitle: be,
+  tutorialWelcomeDesc: Ne,
+  tutorialActions: Pe,
+  tutorialButton: we,
+  tutorialCard: Ce,
+  tutorialChip: Be,
+  tutorialCardTitle: xe,
+  tutorialCardDesc: Se,
+  tutorialProgress: ke,
+  tutorialProgressBar: Ie,
+  tutorialCardFooter: Le,
+  tutorialDots: ze,
+  tutorialDot: $e,
+  planetBody: De,
+  planetBodyRunning: Me,
+  planetOrbitRing: Fe,
+  planetStatusDot: Re,
+  planetHint: Te,
+  topBarSlot: We,
+  topBarLogo: Ae,
+  topBarContent: Oe
+};
+function Ee({ data: e }) {
+  const { label: h, subtitle: u, color: c, status: o, isSelected: n } = e, d = n ? 35 : o === "running" ? 30 : o === "error" ? 20 : 15, r = n ? 110 : 100;
+  return /* @__PURE__ */ m("div", { style: { position: "relative", cursor: "pointer" }, children: [
     /* @__PURE__ */ t(
-      tt,
+      X,
       {
         type: "target",
-        position: et.Left,
-        style: { background: l, border: "none", width: 8, height: 8, opacity: 0.6 }
+        position: Q.Left,
+        style: { background: c, border: "none", width: 8, height: 8, opacity: 0.6 }
       }
     ),
     n && /* @__PURE__ */ t(
-      w.div,
+      "div",
       {
-        initial: { scale: 0.8, opacity: 0 },
-        animate: { scale: 1, opacity: 1, rotate: 360 },
-        transition: {
-          rotate: { duration: 20, repeat: 1 / 0, ease: "linear" },
-          scale: { duration: 0.3 }
-        },
+        className: i.planetOrbitRing,
         style: {
-          position: "absolute",
           top: -12,
           left: -12,
-          width: y + 24,
-          height: y + 24,
-          borderRadius: "50%",
-          border: `1.5px dashed ${l}88`,
-          pointerEvents: "none"
+          width: r + 24,
+          height: r + 24,
+          border: `1.5px dashed ${c}88`
         }
       }
     ),
-    /* @__PURE__ */ p(
-      w.div,
+    /* @__PURE__ */ m(
+      "div",
       {
-        animate: { scale: d },
-        transition: { duration: 3, repeat: 1 / 0, ease: "easeInOut" },
-        whileHover: {
-          boxShadow: `0 0 ${c + 15}px ${l}aa, inset 0 0 25px rgba(255,255,255,0.15)`
-        },
+        className: o === "running" ? i.planetBodyRunning : i.planetBody,
         style: {
-          width: y,
-          height: y,
-          borderRadius: "50%",
-          background: `radial-gradient(circle at 35% 35%, ${l}cc, ${l}44)`,
-          boxShadow: `0 0 ${c}px ${l}88, inset 0 0 20px rgba(255,255,255,0.1)`,
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          border: `2px solid ${n ? `${l}aa` : `${l}66`}`,
-          transition: "width 0.3s, height 0.3s, border-color 0.3s"
+          width: r,
+          height: r,
+          background: `radial-gradient(circle at 35% 35%, ${c}cc, ${c}44)`,
+          boxShadow: `0 0 ${d}px ${c}88, inset 0 0 20px rgba(255,255,255,0.1)`,
+          border: `2px solid ${n ? `${c}aa` : `${c}66`}`
         },
         children: [
           /* @__PURE__ */ t(
@@ -76,101 +115,75 @@ function Ot({ data: e }) {
       }
     ),
     o !== "idle" && o !== "disabled" && /* @__PURE__ */ t(
-      w.div,
+      "div",
       {
-        animate: { opacity: [0.5, 1, 0.5] },
-        transition: { duration: 1.5, repeat: 1 / 0 },
+        className: i.planetStatusDot,
         style: {
-          position: "absolute",
-          top: -4,
-          right: -4,
-          width: 14,
-          height: 14,
-          borderRadius: "50%",
-          background: o === "running" ? "#2ecc71" : o === "error" ? "#e74c3c" : "#27ae60",
-          border: "2px solid rgba(0,0,0,0.4)"
+          background: o === "running" ? "#2ecc71" : o === "error" ? "#e74c3c" : "#27ae60"
         }
       }
     ),
-    n && /* @__PURE__ */ t(
-      w.div,
-      {
-        initial: { opacity: 0, y: 8 },
-        animate: { opacity: 0.5, y: 0 },
-        style: {
-          position: "absolute",
-          bottom: -22,
-          left: "50%",
-          transform: "translateX(-50%)",
-          fontSize: 9,
-          color: "#fff",
-          whiteSpace: "nowrap",
-          fontFamily: "monospace",
-          letterSpacing: 0.5
-        },
-        children: "double-click to enter"
-      }
-    ),
+    n && /* @__PURE__ */ t("div", { className: i.planetHint, children: "double-click to enter" }),
     /* @__PURE__ */ t(
-      tt,
+      X,
       {
         type: "source",
-        position: et.Right,
-        style: { background: l, border: "none", width: 8, height: 8, opacity: 0.6 }
+        position: Q.Right,
+        style: { background: c, border: "none", width: 8, height: 8, opacity: 0.6 }
       }
     )
   ] });
 }
-const _t = ot(Ot);
-function Gt({
+const Ze = tt(Ee);
+function He({
   id: e,
   sourceX: h,
   sourceY: u,
-  targetX: l,
+  targetX: c,
   targetY: o,
   sourcePosition: n,
-  targetPosition: c,
-  data: d,
-  style: y = {}
+  targetPosition: d,
+  data: r,
+  style: g = {}
 }) {
-  const [m] = zt({
+  const [p] = It({
     sourceX: h,
     sourceY: u,
     sourcePosition: n,
-    targetX: l,
+    targetX: c,
     targetY: o,
-    targetPosition: c
-  }), b = (d == null ? void 0 : d.isActive) ?? !1, C = (d == null ? void 0 : d.isDimmed) ?? !1, M = b ? "rgba(46, 204, 113, 0.25)" : "rgba(100, 149, 237, 0.15)", $ = b ? "rgba(46, 204, 113, 0.7)" : C ? "rgba(100, 149, 237, 0.12)" : "rgba(100, 149, 237, 0.4)", r = b ? 3 : 2, I = b ? "12 4" : "8 4";
-  return /* @__PURE__ */ p(Bt, { children: [
+    targetPosition: d
+  }), f = (r == null ? void 0 : r.isActive) ?? !1, w = (r == null ? void 0 : r.isDimmed) ?? !1, $ = f ? "rgba(46, 204, 113, 0.25)" : "rgba(100, 149, 237, 0.15)", L = f ? "rgba(46, 204, 113, 0.7)" : w ? "rgba(100, 149, 237, 0.12)" : "rgba(100, 149, 237, 0.4)", l = f ? 3 : 2, C = f ? "12 4" : "8 4";
+  return /* @__PURE__ */ m(kt, { children: [
     /* @__PURE__ */ t(
-      it,
+      Y,
       {
         id: `${e}-glow`,
-        path: m,
+        path: p,
         style: {
-          stroke: M,
-          strokeWidth: b ? 10 : 6,
-          filter: `blur(${b ? 5 : 3}px)`,
+          stroke: $,
+          strokeWidth: f ? 10 : 6,
+          filter: `blur(${f ? 5 : 3}px)`,
           transition: "stroke 0.6s, stroke-width 0.6s",
-          ...y
+          ...g
         }
       }
     ),
     /* @__PURE__ */ t(
-      it,
+      Y,
       {
         id: e,
-        path: m,
+        path: p,
         style: {
-          stroke: $,
-          strokeWidth: r,
-          strokeDasharray: I,
+          stroke: L,
+          strokeWidth: l,
+          strokeDasharray: C,
           transition: "stroke 0.6s, stroke-width 0.6s",
-          ...y
+          ...g
         }
       }
     ),
-    (d == null ? void 0 : d.label) && /* @__PURE__ */ t("text", { children: /* @__PURE__ */ t(
+    (r == null ? void 0 : r.label) && /* @__PURE__ */ t("text", { children: /* @__PURE__ */ t(
       "textPath",
       {
         href: `#${e}`,
@@ -181,23 +194,23 @@ function Gt({
           fill: "rgba(255, 255, 255, 0.4)",
           fontFamily: "monospace"
         },
-        children: d.label
+        children: r.label
       }
     ) })
   ] });
 }
-const Ht = ot(Gt);
-function Jt({ config: e }) {
-  const h = K(null), u = e.starCount ?? 2e3, l = e.rotationSpeed ?? 0.02, o = R(() => {
+const Ve = tt(He);
+function _e({ config: e }) {
+  const h = et(null), u = e.starCount ?? 2e3, c = e.rotationSpeed ?? 0.02, o = W(() => {
     const n = new Float32Array(u * 3);
-    for (let c = 0; c < u; c++)
-      n[c * 3] = (Math.random() - 0.5) * 50, n[c * 3 + 1] = (Math.random() - 0.5) * 50, n[c * 3 + 2] = (Math.random() - 0.5) * 50;
+    for (let d = 0; d < u; d++)
+      n[d * 3] = (Math.random() - 0.5) * 50, n[d * 3 + 1] = (Math.random() - 0.5) * 50, n[d * 3 + 2] = (Math.random() - 0.5) * 50;
     return n;
   }, [u]);
-  return nt((n, c) => {
-    h.current && (h.current.rotation.x -= c * l, h.current.rotation.y -= c * (l * 0.5));
-  }), /* @__PURE__ */ t(rt, { ref: h, positions: o, stride: 3, frustumCulled: !1, children: /* @__PURE__ */ t(
-    lt,
+  return ot((n, d) => {
+    h.current && (h.current.rotation.x -= d * c, h.current.rotation.y -= d * (c * 0.5));
+  }), /* @__PURE__ */ t(at, { ref: h, positions: o, stride: 3, frustumCulled: !1, children: /* @__PURE__ */ t(
+    nt,
     {
       transparent: !0,
       color: e.starColor ?? "#6495ed",
@@ -208,19 +221,19 @@ function Jt({ config: e }) {
     }
   ) });
 }
-function Kt({ config: e }) {
-  const h = K(null), u = e.nebulaCount ?? 500, l = R(() => {
+function Ge({ config: e }) {
+  const h = et(null), u = e.nebulaCount ?? 500, c = W(() => {
     const o = new Float32Array(u * 3);
     for (let n = 0; n < u; n++) {
-      const c = Math.random() * Math.PI * 2, d = Math.random() * 8 + 5;
-      o[n * 3] = Math.cos(c) * d + (Math.random() - 0.5) * 3, o[n * 3 + 1] = (Math.random() - 0.5) * 4, o[n * 3 + 2] = Math.sin(c) * d + (Math.random() - 0.5) * 3 - 15;
+      const d = Math.random() * Math.PI * 2, r = Math.random() * 8 + 5;
+      o[n * 3] = Math.cos(d) * r + (Math.random() - 0.5) * 3, o[n * 3 + 1] = (Math.random() - 0.5) * 4, o[n * 3 + 2] = Math.sin(d) * r + (Math.random() - 0.5) * 3 - 15;
     }
     return o;
   }, [u]);
-  return nt((o, n) => {
+  return ot((o, n) => {
     h.current && (h.current.rotation.y += n * 5e-3);
-  }), /* @__PURE__ */ t(rt, { ref: h, positions: l, stride: 3, frustumCulled: !1, children: /* @__PURE__ */ t(
-    lt,
+  }), /* @__PURE__ */ t(at, { ref: h, positions: c, stride: 3, frustumCulled: !1, children: /* @__PURE__ */ t(
+    nt,
     {
       transparent: !0,
       color: e.nebulaColor ?? "#9b59b6",
@@ -231,80 +244,32 @@ function Kt({ config: e }) {
     }
   ) });
 }
-function Ut({ config: e = {}, background: h }) {
-  return /* @__PURE__ */ p(
-    Et,
+function Je({ config: e = {}, background: h }) {
+  return /* @__PURE__ */ m(
+    At,
     {
       camera: { position: [0, 0, 15], fov: 60 },
+      dpr: [1, 1.5],
+      gl: { antialias: !1, powerPreference: "low-power" },
       style: { background: h ?? "radial-gradient(ellipse at center, #0a0a2e 0%, #000008 100%)", pointerEvents: "none" },
       events: () => ({ enabled: !1, priority: 0, compute: () => {
       } }),
       children: [
         /* @__PURE__ */ t("ambientLight", { intensity: 0.1 }),
-        /* @__PURE__ */ t(Jt, { config: e }),
-        /* @__PURE__ */ t(Kt, { config: e })
+        /* @__PURE__ */ t(_e, { config: e }),
+        /* @__PURE__ */ t(Ge, { config: e })
       ]
     }
   );
 }
-const Vt = "cc-root-eSR-1", jt = "cc-layerStarField-jOb4M", Xt = "cc-layerReactFlow-CeHI9", qt = "cc-sidePanel-PzU72", Zt = "cc-sidePanelHeader-cWPCq", Qt = "cc-sidePanelTitle-Yfh5N", Yt = "cc-sidePanelPlanetIcon-aRuLt", te = "cc-sidePanelName-TFFeE", ee = "cc-sidePanelSubtitle-8fp2Y", ie = "cc-sidePanelClose-Sdg-J", oe = "cc-sidePanelContent-QIEEQ", ae = "cc-sidePanelFooter-DVOHi", ne = "cc-satelliteList--vkXn", re = "cc-satelliteItem-JGdmG", le = "cc-satelliteIcon-arUe3", se = "cc-satelliteInfo-NaKLd", ce = "cc-satelliteName-zfOPN", de = "cc-satelliteSummary-XARVm", ue = "cc-enterButton-5Vnri", me = "cc-zoomTransition-Wcju8", pe = "cc-zoomPlanetLabel-3SJT2", he = "cc-planetInterior-GlnW1", ye = "cc-interiorBackButton-qJAiZ", be = "cc-interiorCenter-xdKsX", ge = "cc-interiorPlanet--XIzf", fe = "cc-interiorPlanetLabel-e7yxq", ve = "cc-interiorPlanetSubtitle-e2vON", Ne = "cc-orbitRing-hbvmD", Pe = "cc-satelliteNode-01STS", we = "cc-satelliteNodeIcon-Xq45f", xe = "cc-satelliteNodeLabel-LLOJ5", Ce = "cc-satelliteNodeBadge-HsUFp", Ie = "cc-tutorialOverlay-3GHo7", ke = "cc-tutorialWelcome-21KDP", Se = "cc-tutorialWelcomeTitle-7GwS9", Be = "cc-tutorialWelcomeDesc--pznv", ze = "cc-tutorialActions-szJ0-", $e = "cc-tutorialButton-wL9-p", Le = "cc-tutorialCard-LGIkK", Me = "cc-tutorialChip-bUoEb", Fe = "cc-tutorialCardTitle-r2Y1I", De = "cc-tutorialCardDesc-nOS-M", Te = "cc-tutorialProgress-wIAT9", We = "cc-tutorialProgressBar-PFBdE", Ae = "cc-tutorialCardFooter-bSdyM", Re = "cc-tutorialDots-8M0QU", Ee = "cc-tutorialDot-518t4", Oe = "cc-topBarSlot-EJGvM", i = {
-  root: Vt,
-  layerStarField: jt,
-  layerReactFlow: Xt,
-  sidePanel: qt,
-  sidePanelHeader: Zt,
-  sidePanelTitle: Qt,
-  sidePanelPlanetIcon: Yt,
-  sidePanelName: te,
-  sidePanelSubtitle: ee,
-  sidePanelClose: ie,
-  sidePanelContent: oe,
-  sidePanelFooter: ae,
-  satelliteList: ne,
-  satelliteItem: re,
-  satelliteIcon: le,
-  satelliteInfo: se,
-  satelliteName: ce,
-  satelliteSummary: de,
-  enterButton: ue,
-  zoomTransition: me,
-  zoomPlanetLabel: pe,
-  planetInterior: he,
-  interiorBackButton: ye,
-  interiorCenter: be,
-  interiorPlanet: ge,
-  interiorPlanetLabel: fe,
-  interiorPlanetSubtitle: ve,
-  orbitRing: Ne,
-  satelliteNode: Pe,
-  satelliteNodeIcon: we,
-  satelliteNodeLabel: xe,
-  satelliteNodeBadge: Ce,
-  tutorialOverlay: Ie,
-  tutorialWelcome: ke,
-  tutorialWelcomeTitle: Se,
-  tutorialWelcomeDesc: Be,
-  tutorialActions: ze,
-  tutorialButton: $e,
-  tutorialCard: Le,
-  tutorialChip: Me,
-  tutorialCardTitle: Fe,
-  tutorialCardDesc: De,
-  tutorialProgress: Te,
-  tutorialProgressBar: We,
-  tutorialCardFooter: Ae,
-  tutorialDots: Re,
-  tutorialDot: Ee,
-  topBarSlot: Oe
-};
-function _e({
+function Ue({
   planet: e,
   onClose: h,
   onEnterPlanet: u,
-  onSatelliteClick: l
+  onSatelliteClick: c
 }) {
-  return /* @__PURE__ */ p(
-    w.div,
+  return /* @__PURE__ */ m(
+    I.div,
     {
       className: i.sidePanel,
       initial: { x: 340 },
@@ -315,8 +280,8 @@ function _e({
         borderLeftColor: `${e.color}22`
       },
       children: [
-        /* @__PURE__ */ p("div", { className: i.sidePanelHeader, children: [
-          /* @__PURE__ */ p("div", { className: i.sidePanelTitle, children: [
+        /* @__PURE__ */ m("div", { className: i.sidePanelHeader, children: [
+          /* @__PURE__ */ m("div", { className: i.sidePanelTitle, children: [
             /* @__PURE__ */ t(
               "div",
               {
@@ -328,27 +293,27 @@ function _e({
                 children: e.icon ?? e.label[0]
               }
             ),
-            /* @__PURE__ */ p("div", { children: [
+            /* @__PURE__ */ m("div", { children: [
               /* @__PURE__ */ t("div", { className: i.sidePanelName, children: e.label }),
               /* @__PURE__ */ t("div", { className: i.sidePanelSubtitle, children: e.subtitle })
             ] })
           ] }),
           /* @__PURE__ */ t("button", { className: i.sidePanelClose, onClick: h, children: "✕" })
         ] }),
-        /* @__PURE__ */ t("div", { className: i.sidePanelContent, children: /* @__PURE__ */ t("div", { className: i.satelliteList, children: e.satellites.map((o) => /* @__PURE__ */ p(
+        /* @__PURE__ */ t("div", { className: i.sidePanelContent, children: /* @__PURE__ */ t("div", { className: i.satelliteList, children: e.satellites.map((o) => /* @__PURE__ */ m(
           "div",
           {
             className: i.satelliteItem,
-            onClick: () => l == null ? void 0 : l({
+            onClick: () => c == null ? void 0 : c({
               planetId: e.id,
               satelliteId: o.id,
               satellite: o
             }),
             children: [
               /* @__PURE__ */ t("div", { className: i.satelliteIcon, children: o.icon ?? "●" }),
-              /* @__PURE__ */ p("div", { className: i.satelliteInfo, children: [
+              /* @__PURE__ */ m("div", { className: i.satelliteInfo, children: [
                 /* @__PURE__ */ t("div", { className: i.satelliteName, children: o.label }),
-                o.summary && /* @__PURE__ */ p("div", { className: i.satelliteSummary, children: [
+                o.summary && /* @__PURE__ */ m("div", { className: i.satelliteSummary, children: [
                   o.summary.total != null && `${o.summary.total} total`,
                   o.summary.running != null && ` · ${o.summary.running} running`,
                   o.summary.failed != null && o.summary.failed > 0 && ` · ${o.summary.failed} failed`
@@ -358,7 +323,7 @@ function _e({
           },
           o.id
         )) }) }),
-        /* @__PURE__ */ t("div", { className: i.sidePanelFooter, children: /* @__PURE__ */ p(
+        /* @__PURE__ */ t("div", { className: i.sidePanelFooter, children: /* @__PURE__ */ m(
           "button",
           {
             className: i.enterButton,
@@ -374,39 +339,39 @@ function _e({
     }
   );
 }
-function Ge({
+function Ke({
   planet: e,
   onExit: h,
   onSatelliteClick: u,
-  renderCustom: l
+  renderCustom: c
 }) {
-  const [o, n] = _(null);
-  if (l)
+  const [o, n] = Z(null);
+  if (c)
     return /* @__PURE__ */ t(
-      w.div,
+      I.div,
       {
         className: i.planetInterior,
         initial: { opacity: 0 },
         animate: { opacity: 1 },
         exit: { opacity: 0 },
         transition: { duration: 0.4 },
-        children: l(e, h)
+        children: c(e, h)
       }
     );
-  const c = e.satellites, d = Math.max(180, c.length * 35), y = v(
-    (m) => {
-      n(m);
-      const b = c.find((C) => C.id === m);
+  const d = e.satellites, r = Math.max(180, d.length * 35), g = v(
+    (p) => {
+      n(p);
+      const f = d.find((w) => w.id === p);
       u == null || u({
         planetId: e.id,
-        satelliteId: m,
-        satellite: b
+        satelliteId: p,
+        satellite: f
       });
     },
-    [e.id, c, u]
+    [e.id, d, u]
   );
-  return /* @__PURE__ */ p(
-    w.div,
+  return /* @__PURE__ */ m(
+    I.div,
     {
       className: i.planetInterior,
       initial: { opacity: 0 },
@@ -415,21 +380,21 @@ function Ge({
       transition: { duration: 0.4 },
       children: [
         /* @__PURE__ */ t("button", { className: i.interiorBackButton, onClick: h, children: "← Back to Universe" }),
-        /* @__PURE__ */ p("div", { className: i.interiorCenter, children: [
-          [1, 2, 3].map((m) => /* @__PURE__ */ t(
+        /* @__PURE__ */ m("div", { className: i.interiorCenter, children: [
+          [1, 2, 3].map((p) => /* @__PURE__ */ t(
             "div",
             {
               className: i.orbitRing,
               style: {
-                width: d * m * 0.7,
-                height: d * m * 0.7,
-                top: `calc(50% - ${d * m * 0.7 / 2}px)`,
-                left: `calc(50% - ${d * m * 0.7 / 2}px)`
+                width: r * p * 0.7,
+                height: r * p * 0.7,
+                top: `calc(50% - ${r * p * 0.7 / 2}px)`,
+                left: `calc(50% - ${r * p * 0.7 / 2}px)`
               }
             },
-            m
+            p
           )),
-          /* @__PURE__ */ p(
+          /* @__PURE__ */ m(
             "div",
             {
               className: i.interiorPlanet,
@@ -443,11 +408,11 @@ function Ge({
               ]
             }
           ),
-          /* @__PURE__ */ t(E, { children: c.map((m, b) => {
-            var r;
-            const C = b / c.length * Math.PI * 2 - Math.PI / 2, M = Math.cos(C) * d, $ = Math.sin(C) * d;
-            return /* @__PURE__ */ p(
-              w.div,
+          /* @__PURE__ */ t(A, { children: d.map((p, f) => {
+            var l;
+            const w = f / d.length * Math.PI * 2 - Math.PI / 2, $ = Math.cos(w) * r, L = Math.sin(w) * r;
+            return /* @__PURE__ */ m(
+              I.div,
               {
                 className: i.satelliteNode,
                 initial: { scale: 0, opacity: 0 },
@@ -456,32 +421,32 @@ function Ge({
                   type: "spring",
                   damping: 15,
                   stiffness: 200,
-                  delay: b * 0.08
+                  delay: f * 0.08
                 },
                 style: {
-                  left: `calc(50% + ${M}px - 32px)`,
-                  top: `calc(50% + ${$}px - 40px)`
+                  left: `calc(50% + ${$}px - 32px)`,
+                  top: `calc(50% + ${L}px - 40px)`
                 },
-                onClick: () => y(m.id),
+                onClick: () => g(p.id),
                 children: [
-                  /* @__PURE__ */ p(
+                  /* @__PURE__ */ m(
                     "div",
                     {
                       className: i.satelliteNodeIcon,
                       style: {
-                        borderColor: o === m.id ? `${e.color}88` : "rgba(255,255,255,0.15)",
-                        boxShadow: o === m.id ? `0 0 20px ${e.color}44` : "none"
+                        borderColor: o === p.id ? `${e.color}88` : "rgba(255,255,255,0.15)",
+                        boxShadow: o === p.id ? `0 0 20px ${e.color}44` : "none"
                       },
                       children: [
-                        m.icon ?? "●",
-                        ((r = m.summary) == null ? void 0 : r.running) != null && m.summary.running > 0 && /* @__PURE__ */ t("span", { className: i.satelliteNodeBadge, children: m.summary.running })
+                        p.icon ?? "●",
+                        ((l = p.summary) == null ? void 0 : l.running) != null && p.summary.running > 0 && /* @__PURE__ */ t("span", { className: i.satelliteNodeBadge, children: p.summary.running })
                       ]
                     }
                   ),
-                  /* @__PURE__ */ t("span", { className: i.satelliteNodeLabel, children: m.label })
+                  /* @__PURE__ */ t("span", { className: i.satelliteNodeLabel, children: p.label })
                 ]
               },
-              m.id
+              p.id
             );
           }) })
         ] })
@@ -489,9 +454,9 @@ function Ge({
     }
   );
 }
-function He({ planet: e }) {
+function je({ planet: e }) {
   return /* @__PURE__ */ t(
-    w.div,
+    I.div,
     {
       className: i.zoomTransition,
       initial: { opacity: 0 },
@@ -499,7 +464,7 @@ function He({ planet: e }) {
       exit: { opacity: 0 },
       transition: { duration: 0.9, ease: "easeInOut" },
       children: /* @__PURE__ */ t(
-        w.span,
+        I.span,
         {
           className: i.zoomPlanetLabel,
           initial: { scale: 0.5, opacity: 0 },
@@ -516,54 +481,56 @@ function He({ planet: e }) {
     }
   );
 }
-function Je({
+function qe({
   steps: e,
   planets: h,
   onHighlightPlanet: u,
-  onStepChange: l,
+  onStepChange: c,
   onFinish: o,
   flyTo: n
 }) {
-  const [c, d] = _("welcome"), [y, m] = _(0), b = v(
-    (S) => {
-      if (S < 0 || S >= e.length) return;
-      m(S), l(S);
-      const P = e[S];
-      if (P.planetId) {
-        u(P.planetId);
-        const O = h.find((N) => N.id === P.planetId);
-        O && n && n(O.x + 50, O.y + 50, 1.5, 800);
+  const [d, r] = Z("welcome"), [g, p] = Z(0), f = v(
+    (x) => {
+      if (x < 0 || x >= e.length) return;
+      p(x), c(x);
+      const N = e[x];
+      if (N.planetId) {
+        u(N.planetId);
+        const O = h.find((P) => P.id === N.planetId);
+        O && n && requestAnimationFrame(() => {
+          n(O.x + 50, O.y + 50, 1.5, 800);
+        });
       }
     },
-    [e, h, l, u, n]
-  ), C = v(() => {
-    d("stepping"), b(0);
-  }, [b]), M = v(() => {
-    y < e.length - 1 ? b(y + 1) : (d("complete"), l(-1), u(null), n == null || n(800, 400, 0.8, 600), setTimeout(() => o(), 1500));
-  }, [y, e.length, b, l, u, o, n]), $ = v(() => {
-    y > 0 && b(y - 1);
-  }, [y, b]), r = v(() => {
-    l(-1), u(null), n == null || n(800, 400, 0.8, 600), o();
-  }, [l, u, o, n]);
-  at(() => {
-    if (c !== "stepping") return;
-    const S = (P) => {
-      P.key === "ArrowRight" || P.key === "Enter" ? M() : P.key === "ArrowLeft" ? $() : P.key === "Escape" && r();
+    [e, h, c, u, n]
+  ), w = v(() => {
+    r("stepping"), f(0);
+  }, [f]), $ = v(() => {
+    g < e.length - 1 ? f(g + 1) : (r("complete"), c(-1), u(null), n == null || n(800, 400, 0.8, 600), setTimeout(() => o(), 1500));
+  }, [g, e.length, f, c, u, o, n]), L = v(() => {
+    g > 0 && f(g - 1);
+  }, [g, f]), l = v(() => {
+    c(-1), u(null), n == null || n(800, 400, 0.8, 600), o();
+  }, [c, u, o, n]);
+  it(() => {
+    if (d !== "stepping") return;
+    const x = (N) => {
+      N.key === "ArrowRight" || N.key === "Enter" ? $() : N.key === "ArrowLeft" ? L() : N.key === "Escape" && l();
     };
-    return window.addEventListener("keydown", S), () => window.removeEventListener("keydown", S);
-  }, [c, M, $, r]);
-  const I = e[y], G = e.length > 0 ? (y + 1) / e.length * 100 : 0;
-  return /* @__PURE__ */ p(E, { mode: "wait", children: [
-    c === "welcome" && /* @__PURE__ */ t(
-      w.div,
+    return window.addEventListener("keydown", x), () => window.removeEventListener("keydown", x);
+  }, [d, $, L, l]);
+  const C = e[g], H = e.length > 0 ? (g + 1) / e.length * 100 : 0;
+  return /* @__PURE__ */ m(A, { mode: "wait", children: [
+    d === "welcome" && /* @__PURE__ */ t(
+      I.div,
       {
         className: i.tutorialOverlay,
         initial: { opacity: 0 },
         animate: { opacity: 1 },
         exit: { opacity: 0 },
-        children: /* @__PURE__ */ p("div", { className: i.tutorialWelcome, children: [
+        children: /* @__PURE__ */ m("div", { className: i.tutorialWelcome, children: [
           /* @__PURE__ */ t(
-            w.div,
+            I.div,
             {
               initial: { scale: 0.8 },
               animate: { scale: 1 },
@@ -574,13 +541,13 @@ function Je({
           ),
           /* @__PURE__ */ t("h1", { className: i.tutorialWelcomeTitle, children: "Welcome to the Cosmos" }),
           /* @__PURE__ */ t("p", { className: i.tutorialWelcomeDesc, children: "Explore the universe of your platform. Each planet represents a domain, and satellites are the features within." }),
-          /* @__PURE__ */ p("div", { className: i.tutorialActions, children: [
+          /* @__PURE__ */ m("div", { className: i.tutorialActions, children: [
             /* @__PURE__ */ t(
               "button",
               {
                 className: i.tutorialButton,
                 "data-variant": "ghost",
-                onClick: r,
+                onClick: l,
                 children: "SKIP"
               }
             ),
@@ -589,7 +556,7 @@ function Je({
               {
                 className: i.tutorialButton,
                 "data-variant": "primary",
-                onClick: C,
+                onClick: w,
                 children: "LET'S GO"
               }
             )
@@ -598,8 +565,8 @@ function Je({
       },
       "welcome"
     ),
-    c === "stepping" && I && /* @__PURE__ */ p(
-      w.div,
+    d === "stepping" && C && /* @__PURE__ */ m(
+      I.div,
       {
         className: i.tutorialCard,
         initial: { opacity: 0, y: 20 },
@@ -607,55 +574,55 @@ function Je({
         exit: { opacity: 0, y: -10 },
         transition: { duration: 0.25 },
         children: [
-          I.chipText && /* @__PURE__ */ t(
+          C.chipText && /* @__PURE__ */ t(
             "span",
             {
               className: i.tutorialChip,
               style: {
-                background: `${I.chipColor ?? "#3b82f6"}22`,
-                color: I.chipColor ?? "#3b82f6"
+                background: `${C.chipColor ?? "#3b82f6"}22`,
+                color: C.chipColor ?? "#3b82f6"
               },
-              children: I.chipText
+              children: C.chipText
             }
           ),
-          /* @__PURE__ */ t("h3", { className: i.tutorialCardTitle, children: I.title }),
-          /* @__PURE__ */ t("p", { className: i.tutorialCardDesc, children: I.description }),
+          /* @__PURE__ */ t("h3", { className: i.tutorialCardTitle, children: C.title }),
+          /* @__PURE__ */ t("p", { className: i.tutorialCardDesc, children: C.description }),
           /* @__PURE__ */ t("div", { className: i.tutorialProgress, children: /* @__PURE__ */ t(
             "div",
             {
               className: i.tutorialProgressBar,
-              style: { width: `${G}%` }
+              style: { width: `${H}%` }
             }
           ) }),
-          /* @__PURE__ */ p("div", { className: i.tutorialCardFooter, children: [
+          /* @__PURE__ */ m("div", { className: i.tutorialCardFooter, children: [
             /* @__PURE__ */ t(
               "button",
               {
                 className: i.tutorialButton,
                 "data-variant": "ghost",
                 style: { padding: "0.375rem 0.75rem", fontSize: "0.6875rem" },
-                onClick: r,
+                onClick: l,
                 children: "SKIP"
               }
             ),
-            /* @__PURE__ */ t("div", { className: i.tutorialDots, children: e.map((S, P) => /* @__PURE__ */ t(
+            /* @__PURE__ */ t("div", { className: i.tutorialDots, children: e.map((x, N) => /* @__PURE__ */ t(
               "div",
               {
                 className: i.tutorialDot,
-                "data-active": P === y || void 0,
-                "data-done": P < y || void 0,
-                onClick: () => b(P)
+                "data-active": N === g || void 0,
+                "data-done": N < g || void 0,
+                onClick: () => f(N)
               },
-              P
+              N
             )) }),
-            /* @__PURE__ */ p("div", { style: { display: "flex", gap: "0.5rem" }, children: [
-              y > 0 && /* @__PURE__ */ t(
+            /* @__PURE__ */ m("div", { style: { display: "flex", gap: "0.5rem" }, children: [
+              g > 0 && /* @__PURE__ */ t(
                 "button",
                 {
                   className: i.tutorialButton,
                   "data-variant": "ghost",
                   style: { padding: "0.375rem 0.75rem", fontSize: "0.75rem" },
-                  onClick: $,
+                  onClick: L,
                   children: "←"
                 }
               ),
@@ -665,18 +632,18 @@ function Je({
                   className: i.tutorialButton,
                   "data-variant": "primary",
                   style: { padding: "0.375rem 0.75rem", fontSize: "0.75rem" },
-                  onClick: M,
-                  children: y === e.length - 1 ? "Finish" : "→"
+                  onClick: $,
+                  children: g === e.length - 1 ? "Finish" : "→"
                 }
               )
             ] })
           ] })
         ]
       },
-      `step-${y}`
+      `step-${g}`
     ),
-    c === "complete" && /* @__PURE__ */ t(
-      w.div,
+    d === "complete" && /* @__PURE__ */ t(
+      I.div,
       {
         className: i.tutorialOverlay,
         initial: { opacity: 0 },
@@ -684,7 +651,7 @@ function Je({
         exit: { opacity: 0 },
         transition: { duration: 1 },
         children: /* @__PURE__ */ t(
-          w.h1,
+          I.h1,
           {
             className: i.tutorialWelcomeTitle,
             initial: { scale: 0.8 },
@@ -698,38 +665,38 @@ function Je({
     )
   ] });
 }
-const Ke = { planet: _t }, Ue = { orbit: Ht };
-function Ve({
+const Xe = { planet: Ze }, Qe = { orbit: Ve };
+function Ye({
   planets: e,
   orbits: h,
   onPlanetClick: u,
-  onPlanetEnter: l,
+  onPlanetEnter: c,
   onPlanetExit: o,
   onSatelliteClick: n,
-  onPlanetDrag: c,
-  tutorialSteps: d,
-  showTutorial: y,
-  onTutorialComplete: m,
-  initialView: b,
-  onViewChange: C,
-  renderPlanetInterior: M,
-  topBar: $,
-  theme: r,
-  starField: I = !0,
-  nodeTypes: G,
-  edgeTypes: S,
-  className: P,
+  onPlanetDrag: d,
+  tutorialSteps: r,
+  showTutorial: g,
+  onTutorialComplete: p,
+  initialView: f,
+  onViewChange: w,
+  renderPlanetInterior: $,
+  topBar: L,
+  theme: l,
+  starField: C = !0,
+  nodeTypes: H,
+  edgeTypes: x,
+  className: N,
   style: O
 }) {
-  const [N, st] = _(b ?? { mode: "universe" }), [H, ct] = _(y ?? !1), Z = K(0), Q = K(""), { setCenter: x, fitView: J } = Lt(), k = v(
+  const [P, lt] = Z(f ?? { mode: "universe" }), [V, rt] = Z(g ?? !1), { setCenter: B, fitView: _ } = zt(), S = v(
     (a) => {
-      st(a), C == null || C(a);
+      lt(a), w == null || w(a);
     },
-    [C]
-  ), U = v(
+    [w]
+  ), E = v(
     (a) => e.find((s) => s.id === a),
     [e]
-  ), dt = R(
+  ), ct = W(
     () => e.map((a) => ({
       id: a.id,
       type: "planet",
@@ -743,7 +710,7 @@ function Ve({
       }
     })),
     [e]
-  ), ut = R(
+  ), st = W(
     () => h.map((a, s) => ({
       id: `orbit-${s}`,
       source: a.source,
@@ -753,158 +720,165 @@ function Ve({
       animated: !0
     })),
     [h]
-  ), [V, F, mt] = Mt(dt), [pt, j, ht] = Ft(ut), B = v(
+  ), [J, D, dt] = $t(ct), [ut, U, mt] = Dt(st), z = v(
     (a) => {
-      F(
-        (s) => s.map((g) => ({
-          ...g,
-          data: { ...g.data, isSelected: g.id === a }
+      D(
+        (s) => s.map((y) => ({
+          ...y,
+          data: { ...y.data, isSelected: y.id === a }
         }))
       );
     },
-    [F]
-  ), yt = v(() => {
-    F(
+    [D]
+  ), pt = v(() => {
+    D(
       (a) => a.map((s) => {
-        const g = e.find((L) => L.id === s.id);
-        return g ? { ...s, position: { x: g.x, y: g.y } } : s;
+        const y = e.find((M) => M.id === s.id);
+        return y ? { ...s, position: { x: y.x, y: y.y } } : s;
       })
-    ), setTimeout(() => J({ duration: 600, padding: 0.2 }), 50);
-  }, [e, F, J]), bt = v(() => {
-    const a = V.length;
+    ), setTimeout(() => _({ duration: 600, padding: 0.2 }), 50);
+  }, [e, D, _]), ht = v(() => {
+    const a = J.length;
     if (a === 0) return;
-    const s = 800, g = 400, L = Math.max(200, a * 40);
-    F(
-      (D) => D.map((z, f) => {
-        const T = 2 * Math.PI * f / a - Math.PI / 2;
+    const s = 800, y = 400, M = Math.max(200, a * 40);
+    D(
+      (G) => G.map((k, b) => {
+        const F = 2 * Math.PI * b / a - Math.PI / 2;
         return {
-          ...z,
+          ...k,
           position: {
-            x: s + L * Math.cos(T),
-            y: g + L * Math.sin(T)
+            x: s + M * Math.cos(F),
+            y: y + M * Math.sin(F)
           }
         };
       })
-    ), setTimeout(() => J({ duration: 600, padding: 0.2 }), 50);
-  }, [V.length, F, J]), gt = v(
+    ), setTimeout(() => _({ duration: 600, padding: 0.2 }), 50);
+  }, [J.length, D, _]), ft = v(
     (a) => {
-      var D;
-      if (!d) return;
+      var G;
+      if (!r) return;
       if (a < 0) {
-        F(
-          (z) => z.map((f) => ({
-            ...f,
-            data: { ...f.data, status: "idle", isSelected: !1 }
+        D(
+          (k) => k.map((b) => ({
+            ...b,
+            data: { ...b.data, status: "idle", isSelected: !1 }
           }))
-        ), j(
-          (z) => z.map((f) => ({
-            ...f,
+        ), U(
+          (k) => k.map((b) => ({
+            ...b,
             animated: !0,
-            data: { ...f.data, isActive: !1, isDimmed: !1 }
+            data: { ...b.data, isActive: !1, isDimmed: !1 }
           }))
         );
         return;
       }
-      const s = new Set(d.slice(0, a).map((z) => z.planetId)), g = (D = d[a]) == null ? void 0 : D.planetId;
-      F(
-        (z) => z.map((f) => {
-          let T = "idle";
-          return f.id === g ? T = "running" : s.has(f.id) && (T = "success"), {
-            ...f,
-            data: { ...f.data, status: T, isSelected: f.id === g }
+      const s = new Set(r.slice(0, a).map((k) => k.planetId)), y = (G = r[a]) == null ? void 0 : G.planetId;
+      D(
+        (k) => k.map((b) => {
+          let F = "idle";
+          return b.id === y ? F = "running" : s.has(b.id) && (F = "success"), {
+            ...b,
+            data: { ...b.data, status: F, isSelected: b.id === y }
           };
         })
       );
-      const L = /* @__PURE__ */ new Set([...s, g]);
-      j(
-        (z) => z.map((f) => {
-          const T = s.has(f.source), St = L.has(f.target), q = T && St;
+      const M = /* @__PURE__ */ new Set([...s, y]);
+      U(
+        (k) => k.map((b) => {
+          const F = s.has(b.source), St = M.has(b.target), q = F && St;
           return {
-            ...f,
+            ...b,
             animated: q,
-            data: { ...f.data, isActive: q, isDimmed: !q }
+            data: { ...b.data, isActive: q, isDimmed: !q }
           };
         })
       );
     },
-    [d, F, j]
-  ), ft = v(
-    (a, s) => {
-      const g = Date.now(), L = g - Z.current < 300 && Q.current === s.id;
-      Z.current = g, Q.current = s.id;
-      const D = U(s.id);
-      L && D ? Y(D) : N.mode === "inspecting" && N.planetId === s.id ? (k({ mode: "universe" }), B(null), x(800, 400, { zoom: 0.8, duration: 600 })) : (k({ mode: "inspecting", planetId: s.id }), B(s.id), x(s.position.x + 50, s.position.y + 50, { zoom: 1.5, duration: 600 }), D && (u == null || u(D)));
-    },
-    [N, B, U, k, u, x]
-  ), Y = v(
+    [r, D, U]
+  ), K = v(
     (a) => {
-      k({ mode: "entering", planetId: a.id }), B(null), l == null || l(a), x(a.x + 50, a.y + 50, { zoom: 6, duration: 800 }), setTimeout(() => {
-        k({ mode: "planet", planetId: a.id });
+      S({ mode: "entering", planetId: a.id }), z(null), c == null || c(a), B(a.x + 50, a.y + 50, { zoom: 6, duration: 800 }), setTimeout(() => {
+        S({ mode: "planet", planetId: a.id });
       }, 900);
     },
-    [x, B, k, l]
-  ), X = v(() => {
-    k({ mode: "universe" }), o == null || o(), setTimeout(() => {
-      x(800, 400, { zoom: 0.8, duration: 600 });
+    [B, z, S, c]
+  ), yt = v(
+    (a, s) => {
+      S({ mode: "inspecting", planetId: s.id }), z(s.id), B(s.position.x + 50, s.position.y + 50, { zoom: 1.5, duration: 600 });
+      const y = E(s.id);
+      y && (u == null || u(y));
+    },
+    [z, E, S, u, B]
+  ), gt = v(
+    (a, s) => {
+      const y = E(s.id);
+      y && K(y);
+    },
+    [E, K]
+  ), j = v(() => {
+    S({ mode: "universe" }), o == null || o(), setTimeout(() => {
+      B(800, 400, { zoom: 0.8, duration: 600 });
     }, 100);
-  }, [x, k, o]), vt = v(
+  }, [B, S, o]), vt = v(
     (a, s) => {
-      c == null || c(s.id, { x: s.position.x, y: s.position.y });
+      d == null || d(s.id, { x: s.position.x, y: s.position.y });
     },
-    [c]
-  ), Nt = v(() => {
-    N.mode === "inspecting" && (k({ mode: "universe" }), B(null), x(800, 400, { zoom: 0.8, duration: 600 }));
-  }, [N, B, k, x]), Pt = v(
-    (a, s, g, L) => {
-      x(a, s, { zoom: g, duration: L });
+    [d]
+  ), bt = v(() => {
+    P.mode === "inspecting" && (S({ mode: "universe" }), z(null), B(800, 400, { zoom: 0.8, duration: 600 }));
+  }, [P, z, S, B]), Nt = v(
+    (a, s, y, M) => {
+      B(a, s, { zoom: y, duration: M });
     },
-    [x]
+    [B]
   );
-  at(() => {
+  it(() => {
     const a = (s) => {
-      s.key === "Escape" && (H || (N.mode === "inspecting" ? (k({ mode: "universe" }), B(null), x(800, 400, { zoom: 0.8, duration: 600 })) : N.mode === "planet" && X()));
+      s.key === "Escape" && (V || (P.mode === "inspecting" ? (S({ mode: "universe" }), z(null), B(800, 400, { zoom: 0.8, duration: 600 })) : P.mode === "planet" && j()));
     };
     return window.addEventListener("keydown", a), () => window.removeEventListener("keydown", a);
-  }, [N, H, k, B, x, X]);
-  const W = N.mode !== "universe" ? U(N.planetId) : void 0, wt = N.mode !== "planet", xt = R(
-    () => ({ ...Ke, ...G }),
-    [G]
-  ), Ct = R(
-    () => ({ ...Ue, ...S }),
-    [S]
-  ), It = I !== !1, kt = typeof I == "object" ? I : {}, A = {};
-  return r != null && r.background && (A["--cc-bg"] = r.background), r != null && r.textColor && (A["--cc-text"] = r.textColor), r != null && r.panelBackground && (A["--cc-panel-bg"] = r.panelBackground), r != null && r.panelBorder && (A["--cc-panel-border"] = r.panelBorder), r != null && r.controlsBackground && (A["--cc-controls-bg"] = r.controlsBackground), r != null && r.fontFamily && (A["--cc-font-family"] = r.fontFamily), /* @__PURE__ */ p(
+  }, [P, V, S, z, B, j]);
+  const R = P.mode !== "universe" ? E(P.planetId) : void 0, Pt = P.mode !== "planet", wt = W(
+    () => ({ ...Xe, ...H }),
+    [H]
+  ), Ct = W(
+    () => ({ ...Qe, ...x }),
+    [x]
+  ), Bt = C !== !1, xt = typeof C == "object" ? C : {}, T = {};
+  return l != null && l.background && (T["--cc-bg"] = l.background), l != null && l.textColor && (T["--cc-text"] = l.textColor), l != null && l.panelBackground && (T["--cc-panel-bg"] = l.panelBackground), l != null && l.panelBorder && (T["--cc-panel-border"] = l.panelBorder), l != null && l.controlsBackground && (T["--cc-controls-bg"] = l.controlsBackground), l != null && l.fontFamily && (T["--cc-font-family"] = l.fontFamily), /* @__PURE__ */ m(
     "div",
     {
-      className: `${i.root} ${P ?? ""}`,
-      style: { ...A, ...O },
+      className: `${i.root} ${N ?? ""}`,
+      style: { ...T, ...O },
       children: [
-        It && /* @__PURE__ */ t("div", { className: i.layerStarField, children: /* @__PURE__ */ t(
-          Ut,
+        Bt && /* @__PURE__ */ t("div", { className: i.layerStarField, children: /* @__PURE__ */ t(
+          Je,
           {
-            config: kt,
-            background: r == null ? void 0 : r.background
+            config: xt,
+            background: l == null ? void 0 : l.background
           }
         ) }),
         /* @__PURE__ */ t(
           "div",
           {
             className: i.layerReactFlow,
-            "data-hidden": !wt || void 0,
-            children: /* @__PURE__ */ p(
-              Dt,
+            "data-hidden": !Pt || void 0,
+            children: /* @__PURE__ */ m(
+              Mt,
               {
-                nodes: V,
-                edges: pt,
-                onNodesChange: mt,
-                onEdgesChange: ht,
-                onNodeClick: ft,
+                nodes: J,
+                edges: ut,
+                onNodesChange: dt,
+                onEdgesChange: mt,
+                onNodeClick: yt,
+                onNodeDoubleClick: gt,
                 onNodeDragStop: vt,
-                onPaneClick: Nt,
-                nodeTypes: xt,
+                onPaneClick: bt,
+                nodeTypes: wt,
                 edgeTypes: Ct,
                 nodesDraggable: !0,
-                nodeDragThreshold: 5,
+                selectNodesOnDrag: !1,
+                nodeDragThreshold: 10,
                 fitView: !0,
                 proOptions: { hideAttribution: !0 },
                 style: { background: "transparent" },
@@ -912,16 +886,16 @@ function Ve({
                 maxZoom: 8,
                 children: [
                   /* @__PURE__ */ t(
-                    Tt,
+                    Ft,
                     {
-                      variant: Wt.Dots,
+                      variant: Rt.Dots,
                       gap: 50,
                       size: 1,
                       color: "rgba(255, 255, 255, 0.05)"
                     }
                   ),
-                  /* @__PURE__ */ p(
-                    At,
+                  /* @__PURE__ */ m(
+                    Tt,
                     {
                       style: { top: 60 },
                       showInteractive: !1,
@@ -930,7 +904,7 @@ function Ve({
                           "button",
                           {
                             className: "react-flow__controls-button",
-                            onClick: yt,
+                            onClick: pt,
                             title: "Reset layout",
                             children: /* @__PURE__ */ t("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "currentColor", children: /* @__PURE__ */ t("path", { d: "M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z" }) })
                           }
@@ -939,9 +913,9 @@ function Ve({
                           "button",
                           {
                             className: "react-flow__controls-button",
-                            onClick: bt,
+                            onClick: ht,
                             title: "Auto layout",
-                            children: /* @__PURE__ */ p("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "currentColor", children: [
+                            children: /* @__PURE__ */ m("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "currentColor", children: [
                               /* @__PURE__ */ t("circle", { cx: "12", cy: "3", r: "2" }),
                               /* @__PURE__ */ t("circle", { cx: "19.8", cy: "8", r: "2" }),
                               /* @__PURE__ */ t("circle", { cx: "17.6", cy: "17", r: "2" }),
@@ -955,7 +929,7 @@ function Ve({
                     }
                   ),
                   /* @__PURE__ */ t(
-                    Rt,
+                    Wt,
                     {
                       nodeColor: (a) => {
                         var s;
@@ -972,55 +946,80 @@ function Ve({
             )
           }
         ),
-        /* @__PURE__ */ t(E, { children: N.mode === "entering" && W && /* @__PURE__ */ t(He, { planet: W }) }),
-        /* @__PURE__ */ t(E, { children: N.mode === "planet" && W && /* @__PURE__ */ t(
-          Ge,
+        /* @__PURE__ */ t(A, { children: P.mode === "entering" && R && /* @__PURE__ */ t(je, { planet: R }) }),
+        /* @__PURE__ */ t(A, { children: P.mode === "planet" && R && /* @__PURE__ */ t(
+          Ke,
           {
-            planet: W,
-            onExit: X,
+            planet: R,
+            onExit: j,
             onSatelliteClick: n,
-            renderCustom: M
+            renderCustom: $
           }
         ) }),
-        /* @__PURE__ */ t(E, { children: N.mode === "inspecting" && W && /* @__PURE__ */ t(
-          _e,
+        /* @__PURE__ */ t(A, { children: P.mode === "inspecting" && R && /* @__PURE__ */ t(
+          Ue,
           {
-            planet: W,
+            planet: R,
             onClose: () => {
-              k({ mode: "universe" }), B(null), x(800, 400, { zoom: 0.8, duration: 600 });
+              S({ mode: "universe" }), z(null), B(800, 400, { zoom: 0.8, duration: 600 });
             },
-            onEnterPlanet: () => Y(W),
+            onEnterPlanet: () => K(R),
             onSatelliteClick: n
           }
         ) }),
-        $ && !H && /* @__PURE__ */ t("div", { className: i.topBarSlot, children: $ }),
-        /* @__PURE__ */ t(E, { children: H && d && d.length > 0 && /* @__PURE__ */ t(
-          Je,
+        !V && P.mode !== "planet" && P.mode !== "entering" && /* @__PURE__ */ m("div", { className: i.topBarSlot, children: [
+          /* @__PURE__ */ m(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 4663.4 712.56",
+              className: i.topBarLogo,
+              "aria-label": "EZ PLANET",
+              children: [
+                /* @__PURE__ */ t("path", { fill: "#f4ca1c", d: "m321.4,57.26v132.63c-65.92,13.79-117.88,65.75-131.51,131.51H57.09c-21.33,0-38.65-17.32-38.65-38.65V57.26c0-21.49,17.32-38.81,38.65-38.81h225.49c21.49,0,38.81,17.32,38.81,38.81Z" }),
+                /* @__PURE__ */ t("path", { fill: "#6c9cf5", d: "m693.95,429.81v225.49c0,21.33-17.32,38.81-38.81,38.81h-225.33c-21.49,0-38.81-17.48-38.81-38.81v-132.79c65.92-13.63,117.88-65.59,131.35-131.51h132.79c21.49,0,38.81,17.48,38.81,38.81Z" }),
+                /* @__PURE__ */ t("path", { fill: "#ef3a65", d: "m712.4,170c0,93.82-76.02,169.84-169.84,169.84-5.93,0-11.71-.32-17.48-.8-.8-8.66-2.25-17.16-4.33-25.5,4.17-5.61,8.18-11.23,12.03-16.84,56.45-80.03,80.19-147.39,55.33-172.25-25.02-24.86-92.54-.96-172.57,55.17,9.46,3.21,18.6,7.22,27.26,11.71,25.66-8.98,46.03-8.82,56.93,2.08,9.94,9.94,10.91,27.42,4.33,49.56-1.6,5.93-3.85,12.19-6.74,18.76-18.28-27.26-44.1-48.92-74.74-61.91-7.54-3.21-15.4-5.93-23.58-8.02-8.34-2.08-16.84-3.69-25.66-4.49-.48-5.61-.8-11.55-.8-17.32C372.56,76.02,448.58,0,542.56,0s169.84,76.02,169.84,170Z" }),
+                /* @__PURE__ */ t("path", { fill: "#13c0a4", d: "m339.84,542.56c0,93.82-76.18,170-170,170S0,636.38,0,542.56s76.02-169.84,169.84-169.84c5.77,0,11.71.32,17.32.8.8,8.82,2.41,17.32,4.49,25.66,2.08,8.02,4.81,15.72,8.02,23.25v.16c12.99,30.47,34.64,56.45,61.91,74.9-6.42,2.89-12.67,4.97-18.6,6.74-22.29,6.58-39.77,5.61-49.72-4.33-10.91-10.91-11.07-31.27-2.08-56.93-4.49-8.66-8.34-17.64-11.55-27.1-56.45,80.03-80.19,147.39-55.33,172.25,24.86,25.02,92.38,1.12,172.41-55.17,5.45-3.85,11.07-7.86,16.68-12.19,8.34,2.08,16.84,3.69,25.66,4.49.48,5.61.8,11.39.8,17.32Z" }),
+                /* @__PURE__ */ t("path", { fill: "#fff", d: "m2302.63,147.09h-214.46v73.14h217.55c39.67,0,57.64,25.41,57.64,55.78s-16.73,57.64-58.26,57.64h-150.61c-45.87,0-65.7,19.21-65.7,66.32v165.49h73.14v-151.24c0-7.44,3.72-10.54,10.54-10.54h130.16c97.93,0,134.5-68.18,134.5-131.4,0-66.94-40.29-125.2-134.5-125.2Z" }),
+                /* @__PURE__ */ t("path", { fill: "#fff", d: "m2579.65,420.43V147.09h-73.14v273.96c0,83.67,43.39,144.42,154.33,144.42h166.73v-73.14h-162.39c-65.7,0-85.53-31.61-85.53-71.9Z" }),
+                /* @__PURE__ */ t("path", { fill: "#fff", d: "m3111.79,139.65c-44.01,0-72.52,14.88-88.01,53.92l-146.9,371.89h80.58l132.64-336.56c4.34-9.92,11.16-14.25,21.07-14.25s16.74,4.34,20.45,14.25l127.06,336.56h81.2l-141.32-371.89c-14.88-39.05-43.39-53.92-86.77-53.92Z" }),
+                /* @__PURE__ */ t("path", { fill: "#fff", d: "m3772.95,478.07c0,14.26-9.3,23.55-24.79,23.55-13.64,0-21.69-7.44-26.65-17.35l-122.1-267.14c-17.35-47.73-43.39-77.48-101.65-77.48-65.08,0-96.07,36.57-96.07,91.11v334.7h73.14V234.49c0-14.88,8.68-24.17,25.41-24.17,13.02,0,20.45,5.58,26.03,17.97l122.1,267.14c17.35,47.73,44.01,77.48,102.27,77.48,64.46,0,96.07-36.57,96.07-91.73V147.09h-73.76v330.98Z" }),
+                /* @__PURE__ */ t("polygon", { fill: "#fff", points: "4345.44 147.09 4345.44 220.23 4467.54 220.23 4467.54 565.47 4541.3 565.47 4541.3 220.23 4663.4 220.23 4663.4 147.09 4345.44 147.09" }),
+                /* @__PURE__ */ t("path", { fill: "#fff", d: "m1164.31,221.17h211.98v-73.14h-216.32c-110.95,0-154.33,60.74-154.33,144.42v128.61c0,83.67,43.39,144.41,154.33,144.41h216.32v-73.14h-211.98c-65.7,0-85.53-31.61-85.53-71.9v-32.98h247.92v-69.79h-247.92v-24.6c0-40.29,19.83-71.9,85.53-71.9Z" }),
+                /* @__PURE__ */ t("path", { fill: "#fff", d: "m4087.26,221.17h192.86v-73.14h-197.2c-110.95,0-154.33,60.74-154.33,144.42v128.61c0,83.67,43.39,144.41,154.33,144.41h197.2v-73.14h-192.86c-65.7,0-85.53-31.61-85.53-71.9v-32.98h247.92v-69.79h-247.92v-24.6c0-40.29,19.83-71.9,85.53-71.9Z" }),
+                /* @__PURE__ */ t("path", { fill: "#fff", d: "m1737.69,149.2c66.6,0,101.14,33.3,101.14,91.27,0,47.48-22.2,78.32-66.6,97.44l-226.94,96.82c-12.95,5.55-20.97,16.65-20.97,30.83,0,16.03,10.48,27.13,30.83,27.13h274.43v72.77h-279.36c-66.6,0-100.52-33.3-100.52-91.27,0-47.48,22.2-78.32,67.22-97.44l225.71-96.82c13.57-5.55,21.58-16.65,21.58-30.83,0-16.03-10.48-27.13-31.45-27.13h-268.26v-72.77h273.19Z" })
+              ]
+            }
+          ),
+          L && /* @__PURE__ */ t("div", { className: i.topBarContent, children: L })
+        ] }),
+        /* @__PURE__ */ t(A, { children: V && r && r.length > 0 && /* @__PURE__ */ t(
+          qe,
           {
-            steps: d,
+            steps: r,
             planets: e,
-            onHighlightPlanet: B,
-            onStepChange: gt,
+            onHighlightPlanet: z,
+            onStepChange: ft,
             onFinish: () => {
-              ct(!1), m == null || m();
+              rt(!1), p == null || p();
             },
-            flyTo: Pt
+            flyTo: Nt
           }
         ) })
       ]
     }
   );
 }
-function ti(e) {
-  return /* @__PURE__ */ t($t, { children: /* @__PURE__ */ t(Ve, { ...e }) });
+function li(e) {
+  return /* @__PURE__ */ t(Lt, { children: /* @__PURE__ */ t(Ye, { ...e }) });
 }
 export {
-  ti as CosmosCanvas,
-  Je as CosmosTutorial,
-  Ht as OrbitEdge,
-  Ge as PlanetInterior,
-  _t as PlanetNode,
-  _e as SidePanel,
-  Ut as StarField,
-  He as ZoomTransition
+  li as CosmosCanvas,
+  qe as CosmosTutorial,
+  Ve as OrbitEdge,
+  Ke as PlanetInterior,
+  Ze as PlanetNode,
+  Ue as SidePanel,
+  Je as StarField,
+  je as ZoomTransition
 };