@servantcdh/ez-planet-cosmos 0.1.0 → 0.2.0

package/dist/index.d.ts

@@ -19,6 +19,10 @@ export declare interface CosmosCanvasProps {
     onPlanetEnter?: (planet: PlanetConfig) => void;
     onPlanetExit?: () => void;
     onSatelliteClick?: (event: CosmosNavigateEvent) => void;
+    onPlanetDrag?: (planetId: string, position: {
+        x: number;
+        y: number;
+    }) => void;
     tutorialSteps?: TutorialStep[];
     showTutorial?: boolean;
     onTutorialComplete?: () => void;

package/dist/index.js

@@ -1,22 +1,22 @@
-import { jsxs as p, jsx as t, Fragment as Pt } from "react/jsx-runtime";
-import { memo as Q, useRef as E, useMemo as L, useState as R, useCallback as P, useEffect as Ct } from "react";
-import { Handle as q, Position as V, getBezierPath as St, BaseEdge as Z, ReactFlowProvider as It, useReactFlow as wt, useNodesState as kt, useEdgesState as xt, ReactFlow as Bt, Background as Tt, BackgroundVariant as $t, Controls as zt, MiniMap as Ft } from "@xyflow/react";
-import { motion as v, AnimatePresence as M } from "framer-motion";
-import { Canvas as Dt, useFrame as Y } from "@react-three/fiber";
+import { jsxs as p, jsx as t, Fragment as St } from "react/jsx-runtime";
+import { memo as Q, useRef as E, useMemo as D, useState as R, useCallback as v, useEffect as It } from "react";
+import { Handle as q, Position as V, getBezierPath as wt, BaseEdge as Z, ReactFlowProvider as xt, useReactFlow as kt, useNodesState as Bt, useEdgesState as Tt, ReactFlow as $t, Background as zt, BackgroundVariant as Ft, Controls as Lt, MiniMap as Dt } from "@xyflow/react";
+import { motion as N, AnimatePresence as M } from "framer-motion";
+import { Canvas as Mt, useFrame as Y } from "@react-three/fiber";
 import { Points as tt, PointMaterial as et } from "@react-three/drei";
-function Lt({ data: e }) {
-  const { label: m, subtitle: d, color: r, status: o, isSelected: s } = e, l = s ? 35 : o === "running" ? 30 : o === "error" ? 20 : 15, a = o === "running" ? [1, 1.08, 1] : [1, 1.02, 1], f = s ? 110 : 100;
+function Wt({ data: e }) {
+  const { label: m, subtitle: d, color: l, status: n, isSelected: s } = e, u = s ? 35 : n === "running" ? 30 : n === "error" ? 20 : 15, o = n === "running" ? [1, 1.08, 1] : [1, 1.02, 1], P = s ? 110 : 100;
   return /* @__PURE__ */ p("div", { style: { position: "relative", cursor: "pointer" }, children: [
     /* @__PURE__ */ t(
       q,
       {
         type: "target",
         position: V.Left,
-        style: { background: r, border: "none", width: 8, height: 8, opacity: 0.6 }
+        style: { background: l, border: "none", width: 8, height: 8, opacity: 0.6 }
       }
     ),
     s && /* @__PURE__ */ t(
-      v.div,
+      N.div,
       {
         initial: { scale: 0.8, opacity: 0 },
         animate: { scale: 1, opacity: 1, rotate: 360 },
@@ -28,33 +28,33 @@ function Lt({ data: e }) {
           position: "absolute",
           top: -12,
           left: -12,
-          width: f + 24,
-          height: f + 24,
+          width: P + 24,
+          height: P + 24,
           borderRadius: "50%",
-          border: `1.5px dashed ${r}88`,
+          border: `1.5px dashed ${l}88`,
           pointerEvents: "none"
         }
       }
     ),
     /* @__PURE__ */ p(
-      v.div,
+      N.div,
       {
-        animate: { scale: a },
+        animate: { scale: o },
         transition: { duration: 3, repeat: 1 / 0, ease: "easeInOut" },
         whileHover: {
-          boxShadow: `0 0 ${l + 15}px ${r}aa, inset 0 0 25px rgba(255,255,255,0.15)`
+          boxShadow: `0 0 ${u + 15}px ${l}aa, inset 0 0 25px rgba(255,255,255,0.15)`
         },
         style: {
-          width: f,
-          height: f,
+          width: P,
+          height: P,
           borderRadius: "50%",
-          background: `radial-gradient(circle at 35% 35%, ${r}cc, ${r}44)`,
-          boxShadow: `0 0 ${l}px ${r}88, inset 0 0 20px rgba(255,255,255,0.1)`,
+          background: `radial-gradient(circle at 35% 35%, ${l}cc, ${l}44)`,
+          boxShadow: `0 0 ${u}px ${l}88, inset 0 0 20px rgba(255,255,255,0.1)`,
           display: "flex",
           flexDirection: "column",
           alignItems: "center",
           justifyContent: "center",
-          border: `2px solid ${s ? `${r}aa` : `${r}66`}`,
+          border: `2px solid ${s ? `${l}aa` : `${l}66`}`,
           transition: "width 0.3s, height 0.3s, border-color 0.3s"
         },
         children: [
@@ -75,8 +75,8 @@ function Lt({ data: e }) {
         ]
       }
     ),
-    o !== "idle" && o !== "disabled" && /* @__PURE__ */ t(
-      v.div,
+    n !== "idle" && n !== "disabled" && /* @__PURE__ */ t(
+      N.div,
       {
         animate: { opacity: [0.5, 1, 0.5] },
         transition: { duration: 1.5, repeat: 1 / 0 },
@@ -87,13 +87,13 @@ function Lt({ data: e }) {
           width: 14,
           height: 14,
           borderRadius: "50%",
-          background: o === "running" ? "#2ecc71" : o === "error" ? "#e74c3c" : "#27ae60",
+          background: n === "running" ? "#2ecc71" : n === "error" ? "#e74c3c" : "#27ae60",
           border: "2px solid rgba(0,0,0,0.4)"
         }
       }
     ),
     s && /* @__PURE__ */ t(
-      v.div,
+      N.div,
       {
         initial: { opacity: 0, y: 8 },
         animate: { opacity: 0.5, y: 0 },
@@ -116,43 +116,43 @@ function Lt({ data: e }) {
       {
         type: "source",
         position: V.Right,
-        style: { background: r, border: "none", width: 8, height: 8, opacity: 0.6 }
+        style: { background: l, border: "none", width: 8, height: 8, opacity: 0.6 }
       }
     )
   ] });
 }
-const Mt = Q(Lt);
-function Wt({
+const At = Q(Wt);
+function Rt({
   id: e,
   sourceX: m,
   sourceY: d,
-  targetX: r,
-  targetY: o,
+  targetX: l,
+  targetY: n,
   sourcePosition: s,
-  targetPosition: l,
-  data: a,
-  style: f = {}
+  targetPosition: u,
+  data: o,
+  style: P = {}
 }) {
-  const [c] = St({
+  const [r] = wt({
     sourceX: m,
     sourceY: d,
     sourcePosition: s,
-    targetX: r,
-    targetY: o,
-    targetPosition: l
-  }), b = (a == null ? void 0 : a.isActive) ?? !1, C = (a == null ? void 0 : a.isDimmed) ?? !1, k = b ? "rgba(46, 204, 113, 0.25)" : "rgba(100, 149, 237, 0.15)", n = b ? "rgba(46, 204, 113, 0.7)" : C ? "rgba(100, 149, 237, 0.12)" : "rgba(100, 149, 237, 0.4)", h = b ? 3 : 2, D = b ? "12 4" : "8 4";
-  return /* @__PURE__ */ p(Pt, { children: [
+    targetX: l,
+    targetY: n,
+    targetPosition: u
+  }), h = (o == null ? void 0 : o.isActive) ?? !1, f = (o == null ? void 0 : o.isDimmed) ?? !1, k = h ? "rgba(46, 204, 113, 0.25)" : "rgba(100, 149, 237, 0.15)", w = h ? "rgba(46, 204, 113, 0.7)" : f ? "rgba(100, 149, 237, 0.12)" : "rgba(100, 149, 237, 0.4)", a = h ? 3 : 2, $ = h ? "12 4" : "8 4";
+  return /* @__PURE__ */ p(St, { children: [
     /* @__PURE__ */ t(
       Z,
       {
         id: `${e}-glow`,
-        path: c,
+        path: r,
         style: {
           stroke: k,
-          strokeWidth: b ? 10 : 6,
-          filter: `blur(${b ? 5 : 3}px)`,
+          strokeWidth: h ? 10 : 6,
+          filter: `blur(${h ? 5 : 3}px)`,
           transition: "stroke 0.6s, stroke-width 0.6s",
-          ...f
+          ...P
         }
       }
     ),
@@ -160,17 +160,17 @@ function Wt({
       Z,
       {
         id: e,
-        path: c,
+        path: r,
         style: {
-          stroke: n,
-          strokeWidth: h,
-          strokeDasharray: D,
+          stroke: w,
+          strokeWidth: a,
+          strokeDasharray: $,
           transition: "stroke 0.6s, stroke-width 0.6s",
-          ...f
+          ...P
         }
       }
     ),
-    (a == null ? void 0 : a.label) && /* @__PURE__ */ t("text", { children: /* @__PURE__ */ t(
+    (o == null ? void 0 : o.label) && /* @__PURE__ */ t("text", { children: /* @__PURE__ */ t(
       "textPath",
       {
         href: `#${e}`,
@@ -181,22 +181,22 @@ function Wt({
           fill: "rgba(255, 255, 255, 0.4)",
           fontFamily: "monospace"
         },
-        children: a.label
+        children: o.label
       }
     ) })
   ] });
 }
-const At = Q(Wt);
-function Rt({ config: e }) {
-  const m = E(null), d = e.starCount ?? 2e3, r = e.rotationSpeed ?? 0.02, o = L(() => {
+const Ot = Q(Rt);
+function Et({ config: e }) {
+  const m = E(null), d = e.starCount ?? 2e3, l = e.rotationSpeed ?? 0.02, n = D(() => {
     const s = new Float32Array(d * 3);
-    for (let l = 0; l < d; l++)
-      s[l * 3] = (Math.random() - 0.5) * 50, s[l * 3 + 1] = (Math.random() - 0.5) * 50, s[l * 3 + 2] = (Math.random() - 0.5) * 50;
+    for (let u = 0; u < d; u++)
+      s[u * 3] = (Math.random() - 0.5) * 50, s[u * 3 + 1] = (Math.random() - 0.5) * 50, s[u * 3 + 2] = (Math.random() - 0.5) * 50;
     return s;
   }, [d]);
-  return Y((s, l) => {
-    m.current && (m.current.rotation.x -= l * r, m.current.rotation.y -= l * (r * 0.5));
-  }), /* @__PURE__ */ t(tt, { ref: m, positions: o, stride: 3, frustumCulled: !1, children: /* @__PURE__ */ t(
+  return Y((s, u) => {
+    m.current && (m.current.rotation.x -= u * l, m.current.rotation.y -= u * (l * 0.5));
+  }), /* @__PURE__ */ t(tt, { ref: m, positions: n, stride: 3, frustumCulled: !1, children: /* @__PURE__ */ t(
     et,
     {
       transparent: !0,
@@ -208,18 +208,18 @@ function Rt({ config: e }) {
     }
   ) });
 }
-function Ot({ config: e }) {
-  const m = E(null), d = e.nebulaCount ?? 500, r = L(() => {
-    const o = new Float32Array(d * 3);
+function Gt({ config: e }) {
+  const m = E(null), d = e.nebulaCount ?? 500, l = D(() => {
+    const n = new Float32Array(d * 3);
     for (let s = 0; s < d; s++) {
-      const l = Math.random() * Math.PI * 2, a = Math.random() * 8 + 5;
-      o[s * 3] = Math.cos(l) * a + (Math.random() - 0.5) * 3, o[s * 3 + 1] = (Math.random() - 0.5) * 4, o[s * 3 + 2] = Math.sin(l) * a + (Math.random() - 0.5) * 3 - 15;
+      const u = Math.random() * Math.PI * 2, o = Math.random() * 8 + 5;
+      n[s * 3] = Math.cos(u) * o + (Math.random() - 0.5) * 3, n[s * 3 + 1] = (Math.random() - 0.5) * 4, n[s * 3 + 2] = Math.sin(u) * o + (Math.random() - 0.5) * 3 - 15;
     }
-    return o;
+    return n;
   }, [d]);
-  return Y((o, s) => {
+  return Y((n, s) => {
     m.current && (m.current.rotation.y += s * 5e-3);
-  }), /* @__PURE__ */ t(tt, { ref: m, positions: r, stride: 3, frustumCulled: !1, children: /* @__PURE__ */ t(
+  }), /* @__PURE__ */ t(tt, { ref: m, positions: l, stride: 3, frustumCulled: !1, children: /* @__PURE__ */ t(
     et,
     {
       transparent: !0,
@@ -231,79 +231,81 @@ function Ot({ config: e }) {
     }
   ) });
 }
-function Et({ config: e = {}, background: m }) {
+function Jt({ config: e = {}, background: m }) {
   return /* @__PURE__ */ p(
-    Dt,
+    Mt,
     {
       camera: { position: [0, 0, 15], fov: 60 },
-      style: { background: m ?? "radial-gradient(ellipse at center, #0a0a2e 0%, #000008 100%)" },
+      style: { background: m ?? "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(Rt, { config: e }),
-        /* @__PURE__ */ t(Ot, { config: e })
+        /* @__PURE__ */ t(Et, { config: e }),
+        /* @__PURE__ */ t(Gt, { config: e })
       ]
     }
   );
 }
-const Gt = "cc-root-eSR-1", Jt = "cc-layerStarField-jOb4M", Ut = "cc-layerReactFlow-CeHI9", jt = "cc-sidePanel-PzU72", Ht = "cc-sidePanelHeader-cWPCq", Xt = "cc-sidePanelTitle-Yfh5N", Kt = "cc-sidePanelPlanetIcon-aRuLt", _t = "cc-sidePanelName-TFFeE", qt = "cc-sidePanelSubtitle-8fp2Y", Vt = "cc-sidePanelClose-Sdg-J", Zt = "cc-sidePanelContent-QIEEQ", Qt = "cc-sidePanelFooter-DVOHi", Yt = "cc-satelliteList--vkXn", te = "cc-satelliteItem-JGdmG", ee = "cc-satelliteIcon-arUe3", ie = "cc-satelliteInfo-NaKLd", oe = "cc-satelliteName-zfOPN", ae = "cc-satelliteSummary-XARVm", ne = "cc-enterButton-5Vnri", re = "cc-zoomTransition-Wcju8", le = "cc-zoomPlanetLabel-3SJT2", se = "cc-planetInterior-GlnW1", ce = "cc-interiorBackButton-qJAiZ", de = "cc-interiorCenter-xdKsX", ue = "cc-interiorPlanet--XIzf", me = "cc-interiorPlanetLabel-e7yxq", pe = "cc-interiorPlanetSubtitle-e2vON", ye = "cc-orbitRing-hbvmD", be = "cc-satelliteNode-01STS", he = "cc-satelliteNodeIcon-Xq45f", ge = "cc-satelliteNodeLabel-LLOJ5", fe = "cc-satelliteNodeBadge-HsUFp", ve = "cc-tutorialOverlay-3GHo7", Ne = "cc-tutorialWelcome-21KDP", Pe = "cc-tutorialWelcomeTitle-7GwS9", Ce = "cc-tutorialWelcomeDesc--pznv", Se = "cc-tutorialActions-szJ0-", Ie = "cc-tutorialButton-wL9-p", we = "cc-tutorialCard-LGIkK", ke = "cc-tutorialChip-bUoEb", xe = "cc-tutorialCardTitle-r2Y1I", Be = "cc-tutorialCardDesc-nOS-M", Te = "cc-tutorialProgress-wIAT9", $e = "cc-tutorialProgressBar-PFBdE", ze = "cc-tutorialCardFooter-bSdyM", Fe = "cc-tutorialStepCounter-i7c5G", De = "cc-tutorialDots-8M0QU", Le = "cc-tutorialDot-518t4", Me = "cc-topBarSlot-EJGvM", i = {
-  root: Gt,
-  layerStarField: Jt,
-  layerReactFlow: Ut,
-  sidePanel: jt,
-  sidePanelHeader: Ht,
-  sidePanelTitle: Xt,
-  sidePanelPlanetIcon: Kt,
-  sidePanelName: _t,
-  sidePanelSubtitle: qt,
-  sidePanelClose: Vt,
-  sidePanelContent: Zt,
-  sidePanelFooter: Qt,
-  satelliteList: Yt,
-  satelliteItem: te,
-  satelliteIcon: ee,
-  satelliteInfo: ie,
-  satelliteName: oe,
-  satelliteSummary: ae,
-  enterButton: ne,
-  zoomTransition: re,
-  zoomPlanetLabel: le,
-  planetInterior: se,
-  interiorBackButton: ce,
-  interiorCenter: de,
-  interiorPlanet: ue,
-  interiorPlanetLabel: me,
-  interiorPlanetSubtitle: pe,
-  orbitRing: ye,
-  satelliteNode: be,
-  satelliteNodeIcon: he,
-  satelliteNodeLabel: ge,
-  satelliteNodeBadge: fe,
-  tutorialOverlay: ve,
-  tutorialWelcome: Ne,
-  tutorialWelcomeTitle: Pe,
-  tutorialWelcomeDesc: Ce,
-  tutorialActions: Se,
-  tutorialButton: Ie,
-  tutorialCard: we,
-  tutorialChip: ke,
-  tutorialCardTitle: xe,
-  tutorialCardDesc: Be,
-  tutorialProgress: Te,
-  tutorialProgressBar: $e,
-  tutorialCardFooter: ze,
-  tutorialStepCounter: Fe,
-  tutorialDots: De,
-  tutorialDot: Le,
-  topBarSlot: Me
+const Ut = "cc-root-eSR-1", jt = "cc-layerStarField-jOb4M", Ht = "cc-layerReactFlow-CeHI9", Xt = "cc-sidePanel-PzU72", _t = "cc-sidePanelHeader-cWPCq", Kt = "cc-sidePanelTitle-Yfh5N", qt = "cc-sidePanelPlanetIcon-aRuLt", Vt = "cc-sidePanelName-TFFeE", Zt = "cc-sidePanelSubtitle-8fp2Y", Qt = "cc-sidePanelClose-Sdg-J", Yt = "cc-sidePanelContent-QIEEQ", te = "cc-sidePanelFooter-DVOHi", ee = "cc-satelliteList--vkXn", ie = "cc-satelliteItem-JGdmG", oe = "cc-satelliteIcon-arUe3", ae = "cc-satelliteInfo-NaKLd", ne = "cc-satelliteName-zfOPN", re = "cc-satelliteSummary-XARVm", le = "cc-enterButton-5Vnri", se = "cc-zoomTransition-Wcju8", ce = "cc-zoomPlanetLabel-3SJT2", de = "cc-planetInterior-GlnW1", ue = "cc-interiorBackButton-qJAiZ", me = "cc-interiorCenter-xdKsX", pe = "cc-interiorPlanet--XIzf", ye = "cc-interiorPlanetLabel-e7yxq", be = "cc-interiorPlanetSubtitle-e2vON", he = "cc-orbitRing-hbvmD", fe = "cc-satelliteNode-01STS", ge = "cc-satelliteNodeIcon-Xq45f", ve = "cc-satelliteNodeLabel-LLOJ5", Ne = "cc-satelliteNodeBadge-HsUFp", Pe = "cc-tutorialOverlay-3GHo7", Ce = "cc-tutorialWelcome-21KDP", Se = "cc-tutorialWelcomeTitle-7GwS9", Ie = "cc-tutorialWelcomeDesc--pznv", we = "cc-tutorialActions-szJ0-", xe = "cc-tutorialButton-wL9-p", ke = "cc-tutorialCard-LGIkK", Be = "cc-tutorialChip-bUoEb", Te = "cc-tutorialCardTitle-r2Y1I", $e = "cc-tutorialCardDesc-nOS-M", ze = "cc-tutorialProgress-wIAT9", Fe = "cc-tutorialProgressBar-PFBdE", Le = "cc-tutorialCardFooter-bSdyM", De = "cc-tutorialStepCounter-i7c5G", Me = "cc-tutorialDots-8M0QU", We = "cc-tutorialDot-518t4", Ae = "cc-topBarSlot-EJGvM", i = {
+  root: Ut,
+  layerStarField: jt,
+  layerReactFlow: Ht,
+  sidePanel: Xt,
+  sidePanelHeader: _t,
+  sidePanelTitle: Kt,
+  sidePanelPlanetIcon: qt,
+  sidePanelName: Vt,
+  sidePanelSubtitle: Zt,
+  sidePanelClose: Qt,
+  sidePanelContent: Yt,
+  sidePanelFooter: te,
+  satelliteList: ee,
+  satelliteItem: ie,
+  satelliteIcon: oe,
+  satelliteInfo: ae,
+  satelliteName: ne,
+  satelliteSummary: re,
+  enterButton: le,
+  zoomTransition: se,
+  zoomPlanetLabel: ce,
+  planetInterior: de,
+  interiorBackButton: ue,
+  interiorCenter: me,
+  interiorPlanet: pe,
+  interiorPlanetLabel: ye,
+  interiorPlanetSubtitle: be,
+  orbitRing: he,
+  satelliteNode: fe,
+  satelliteNodeIcon: ge,
+  satelliteNodeLabel: ve,
+  satelliteNodeBadge: Ne,
+  tutorialOverlay: Pe,
+  tutorialWelcome: Ce,
+  tutorialWelcomeTitle: Se,
+  tutorialWelcomeDesc: Ie,
+  tutorialActions: we,
+  tutorialButton: xe,
+  tutorialCard: ke,
+  tutorialChip: Be,
+  tutorialCardTitle: Te,
+  tutorialCardDesc: $e,
+  tutorialProgress: ze,
+  tutorialProgressBar: Fe,
+  tutorialCardFooter: Le,
+  tutorialStepCounter: De,
+  tutorialDots: Me,
+  tutorialDot: We,
+  topBarSlot: Ae
 };
-function We({
+function Re({
   planet: e,
   onClose: m,
   onEnterPlanet: d,
-  onSatelliteClick: r
+  onSatelliteClick: l
 }) {
   return /* @__PURE__ */ p(
-    v.div,
+    N.div,
     {
       className: i.sidePanel,
       initial: { x: 340 },
@@ -334,28 +336,28 @@ function We({
           ] }),
           /* @__PURE__ */ t("button", { className: i.sidePanelClose, onClick: m, 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((n) => /* @__PURE__ */ p(
           "div",
           {
             className: i.satelliteItem,
-            onClick: () => r == null ? void 0 : r({
+            onClick: () => l == null ? void 0 : l({
               planetId: e.id,
-              satelliteId: o.id,
-              satellite: o
+              satelliteId: n.id,
+              satellite: n
             }),
             children: [
-              /* @__PURE__ */ t("div", { className: i.satelliteIcon, children: o.icon ?? "●" }),
+              /* @__PURE__ */ t("div", { className: i.satelliteIcon, children: n.icon ?? "●" }),
               /* @__PURE__ */ p("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.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`
+                /* @__PURE__ */ t("div", { className: i.satelliteName, children: n.label }),
+                n.summary && /* @__PURE__ */ p("div", { className: i.satelliteSummary, children: [
+                  n.summary.total != null && `${n.summary.total} total`,
+                  n.summary.running != null && ` · ${n.summary.running} running`,
+                  n.summary.failed != null && n.summary.failed > 0 && ` · ${n.summary.failed} failed`
                 ] })
               ] })
             ]
           },
-          o.id
+          n.id
         )) }) }),
         /* @__PURE__ */ t("div", { className: i.sidePanelFooter, children: /* @__PURE__ */ p(
           "button",
@@ -373,39 +375,39 @@ function We({
     }
   );
 }
-function Ae({
+function Oe({
   planet: e,
   onExit: m,
   onSatelliteClick: d,
-  renderCustom: r
+  renderCustom: l
 }) {
-  const [o, s] = R(null);
-  if (r)
+  const [n, s] = R(null);
+  if (l)
     return /* @__PURE__ */ t(
-      v.div,
+      N.div,
       {
         className: i.planetInterior,
         initial: { opacity: 0 },
         animate: { opacity: 1 },
         exit: { opacity: 0 },
         transition: { duration: 0.4 },
-        children: r(e, m)
+        children: l(e, m)
       }
     );
-  const l = e.satellites, a = Math.max(180, l.length * 35), f = P(
-    (c) => {
-      s(c);
-      const b = l.find((C) => C.id === c);
+  const u = e.satellites, o = Math.max(180, u.length * 35), P = v(
+    (r) => {
+      s(r);
+      const h = u.find((f) => f.id === r);
       d == null || d({
         planetId: e.id,
-        satelliteId: c,
-        satellite: b
+        satelliteId: r,
+        satellite: h
       });
     },
-    [e.id, l, d]
+    [e.id, u, d]
   );
   return /* @__PURE__ */ p(
-    v.div,
+    N.div,
     {
       className: i.planetInterior,
       initial: { opacity: 0 },
@@ -415,18 +417,18 @@ function Ae({
       children: [
         /* @__PURE__ */ t("button", { className: i.interiorBackButton, onClick: m, children: "← Back to Universe" }),
         /* @__PURE__ */ p("div", { className: i.interiorCenter, children: [
-          [1, 2, 3].map((c) => /* @__PURE__ */ t(
+          [1, 2, 3].map((r) => /* @__PURE__ */ t(
             "div",
             {
               className: i.orbitRing,
               style: {
-                width: a * c * 0.7,
-                height: a * c * 0.7,
-                top: `calc(50% - ${a * c * 0.7 / 2}px)`,
-                left: `calc(50% - ${a * c * 0.7 / 2}px)`
+                width: o * r * 0.7,
+                height: o * r * 0.7,
+                top: `calc(50% - ${o * r * 0.7 / 2}px)`,
+                left: `calc(50% - ${o * r * 0.7 / 2}px)`
               }
             },
-            c
+            r
           )),
           /* @__PURE__ */ p(
             "div",
@@ -442,11 +444,11 @@ function Ae({
               ]
             }
           ),
-          /* @__PURE__ */ t(M, { children: l.map((c, b) => {
-            var h;
-            const C = b / l.length * Math.PI * 2 - Math.PI / 2, k = Math.cos(C) * a, n = Math.sin(C) * a;
+          /* @__PURE__ */ t(M, { children: u.map((r, h) => {
+            var a;
+            const f = h / u.length * Math.PI * 2 - Math.PI / 2, k = Math.cos(f) * o, w = Math.sin(f) * o;
             return /* @__PURE__ */ p(
-              v.div,
+              N.div,
               {
                 className: i.satelliteNode,
                 initial: { scale: 0, opacity: 0 },
@@ -455,32 +457,32 @@ function Ae({
                   type: "spring",
                   damping: 15,
                   stiffness: 200,
-                  delay: b * 0.08
+                  delay: h * 0.08
                 },
                 style: {
                   left: `calc(50% + ${k}px - 32px)`,
-                  top: `calc(50% + ${n}px - 40px)`
+                  top: `calc(50% + ${w}px - 40px)`
                 },
-                onClick: () => f(c.id),
+                onClick: () => P(r.id),
                 children: [
                   /* @__PURE__ */ p(
                     "div",
                     {
                       className: i.satelliteNodeIcon,
                       style: {
-                        borderColor: o === c.id ? `${e.color}88` : "rgba(255,255,255,0.15)",
-                        boxShadow: o === c.id ? `0 0 20px ${e.color}44` : "none"
+                        borderColor: n === r.id ? `${e.color}88` : "rgba(255,255,255,0.15)",
+                        boxShadow: n === r.id ? `0 0 20px ${e.color}44` : "none"
                       },
                       children: [
-                        c.icon ?? "●",
-                        ((h = c.summary) == null ? void 0 : h.running) != null && c.summary.running > 0 && /* @__PURE__ */ t("span", { className: i.satelliteNodeBadge, children: c.summary.running })
+                        r.icon ?? "●",
+                        ((a = r.summary) == null ? void 0 : a.running) != null && r.summary.running > 0 && /* @__PURE__ */ t("span", { className: i.satelliteNodeBadge, children: r.summary.running })
                       ]
                     }
                   ),
-                  /* @__PURE__ */ t("span", { className: i.satelliteNodeLabel, children: c.label })
+                  /* @__PURE__ */ t("span", { className: i.satelliteNodeLabel, children: r.label })
                 ]
               },
-              c.id
+              r.id
             );
           }) })
         ] })
@@ -488,9 +490,9 @@ function Ae({
     }
   );
 }
-function Re({ planet: e }) {
+function Ee({ planet: e }) {
   return /* @__PURE__ */ t(
-    v.div,
+    N.div,
     {
       className: i.zoomTransition,
       initial: { opacity: 0 },
@@ -498,7 +500,7 @@ function Re({ planet: e }) {
       exit: { opacity: 0 },
       transition: { duration: 0.9, ease: "easeInOut" },
       children: /* @__PURE__ */ t(
-        v.span,
+        N.span,
         {
           className: i.zoomPlanetLabel,
           initial: { scale: 0.5, opacity: 0 },
@@ -515,41 +517,41 @@ function Re({ planet: e }) {
     }
   );
 }
-function Oe({
+function Ge({
   steps: e,
   onHighlightPlanet: m,
   onStepChange: d,
-  onFinish: r,
-  flyTo: o
+  onFinish: l,
+  flyTo: n
 }) {
-  const [s, l] = R("welcome"), [a, f] = R(0), c = P(
-    (S) => {
-      if (S < 0 || S >= e.length) return;
-      f(S), d(S);
-      const N = e[S];
-      N.planetId && m(N.planetId);
+  const [s, u] = R("welcome"), [o, P] = R(0), r = v(
+    (C) => {
+      if (C < 0 || C >= e.length) return;
+      P(C), d(C);
+      const g = e[C];
+      g.planetId && m(g.planetId);
     },
     [e, d, m]
-  ), b = P(() => {
-    l("stepping"), c(0);
-  }, [c]), C = P(() => {
-    a < e.length - 1 ? c(a + 1) : (l("complete"), d(-1), m(null), setTimeout(() => r(), 1500));
-  }, [a, e.length, c, d, m, r]), k = P(() => {
-    a > 0 && c(a - 1);
-  }, [a, c]), n = P(() => {
-    d(-1), m(null), r();
-  }, [d, m, r]);
-  Ct(() => {
+  ), h = v(() => {
+    u("stepping"), r(0);
+  }, [r]), f = v(() => {
+    o < e.length - 1 ? r(o + 1) : (u("complete"), d(-1), m(null), setTimeout(() => l(), 1500));
+  }, [o, e.length, r, d, m, l]), k = v(() => {
+    o > 0 && r(o - 1);
+  }, [o, r]), w = v(() => {
+    d(-1), m(null), l();
+  }, [d, m, l]);
+  It(() => {
     if (s !== "stepping") return;
-    const S = (N) => {
-      N.key === "ArrowRight" || N.key === "Enter" ? C() : N.key === "ArrowLeft" ? k() : N.key === "Escape" && n();
+    const C = (g) => {
+      g.key === "ArrowRight" || g.key === "Enter" ? f() : g.key === "ArrowLeft" ? k() : g.key === "Escape" && w();
     };
-    return window.addEventListener("keydown", S), () => window.removeEventListener("keydown", S);
-  }, [s, C, k, n]);
-  const h = e[a], D = e.length > 0 ? (a + 1) / e.length * 100 : 0;
+    return window.addEventListener("keydown", C), () => window.removeEventListener("keydown", C);
+  }, [s, f, k, w]);
+  const a = e[o], $ = e.length > 0 ? (o + 1) / e.length * 100 : 0;
   return /* @__PURE__ */ p(M, { mode: "wait", children: [
     s === "welcome" && /* @__PURE__ */ t(
-      v.div,
+      N.div,
       {
         className: i.tutorialOverlay,
         initial: { opacity: 0 },
@@ -557,7 +559,7 @@ function Oe({
         exit: { opacity: 0 },
         children: /* @__PURE__ */ p("div", { className: i.tutorialWelcome, children: [
           /* @__PURE__ */ t(
-            v.div,
+            N.div,
             {
               initial: { scale: 0.8 },
               animate: { scale: 1 },
@@ -574,7 +576,7 @@ function Oe({
               {
                 className: i.tutorialButton,
                 "data-variant": "ghost",
-                onClick: n,
+                onClick: w,
                 children: "SKIP"
               }
             ),
@@ -583,7 +585,7 @@ function Oe({
               {
                 className: i.tutorialButton,
                 "data-variant": "primary",
-                onClick: b,
+                onClick: h,
                 children: "LET'S GO"
               }
             )
@@ -592,8 +594,8 @@ function Oe({
       },
       "welcome"
     ),
-    s === "stepping" && h && /* @__PURE__ */ p(
-      v.div,
+    s === "stepping" && a && /* @__PURE__ */ p(
+      N.div,
       {
         className: i.tutorialCard,
         initial: { opacity: 0, y: 20 },
@@ -601,44 +603,44 @@ function Oe({
         exit: { opacity: 0, y: -10 },
         transition: { duration: 0.25 },
         children: [
-          h.chipText && /* @__PURE__ */ t(
+          a.chipText && /* @__PURE__ */ t(
             "span",
             {
               className: i.tutorialChip,
               style: {
-                background: `${h.chipColor ?? "#3b82f6"}22`,
-                color: h.chipColor ?? "#3b82f6"
+                background: `${a.chipColor ?? "#3b82f6"}22`,
+                color: a.chipColor ?? "#3b82f6"
               },
-              children: h.chipText
+              children: a.chipText
             }
           ),
-          /* @__PURE__ */ t("h3", { className: i.tutorialCardTitle, children: h.title }),
-          /* @__PURE__ */ t("p", { className: i.tutorialCardDesc, children: h.description }),
+          /* @__PURE__ */ t("h3", { className: i.tutorialCardTitle, children: a.title }),
+          /* @__PURE__ */ t("p", { className: i.tutorialCardDesc, children: a.description }),
           /* @__PURE__ */ t("div", { className: i.tutorialProgress, children: /* @__PURE__ */ t(
             "div",
             {
               className: i.tutorialProgressBar,
-              style: { width: `${D}%` }
+              style: { width: `${$}%` }
             }
           ) }),
           /* @__PURE__ */ p("div", { className: i.tutorialCardFooter, children: [
             /* @__PURE__ */ p("span", { className: i.tutorialStepCounter, children: [
-              a + 1,
+              o + 1,
               " / ",
               e.length
             ] }),
-            /* @__PURE__ */ t("div", { className: i.tutorialDots, children: e.map((S, N) => /* @__PURE__ */ t(
+            /* @__PURE__ */ t("div", { className: i.tutorialDots, children: e.map((C, g) => /* @__PURE__ */ t(
               "div",
               {
                 className: i.tutorialDot,
-                "data-active": N === a || void 0,
-                "data-done": N < a || void 0,
-                onClick: () => c(N)
+                "data-active": g === o || void 0,
+                "data-done": g < o || void 0,
+                onClick: () => r(g)
               },
-              N
+              g
             )) }),
             /* @__PURE__ */ p("div", { style: { display: "flex", gap: "0.5rem" }, children: [
-              a > 0 && /* @__PURE__ */ t(
+              o > 0 && /* @__PURE__ */ t(
                 "button",
                 {
                   className: i.tutorialButton,
@@ -654,18 +656,18 @@ function Oe({
                   className: i.tutorialButton,
                   "data-variant": "primary",
                   style: { padding: "0.375rem 0.75rem", fontSize: "0.75rem" },
-                  onClick: C,
-                  children: a === e.length - 1 ? "Finish" : "→"
+                  onClick: f,
+                  children: o === e.length - 1 ? "Finish" : "→"
                 }
               )
             ] })
           ] })
         ]
       },
-      `step-${a}`
+      `step-${o}`
     ),
     s === "complete" && /* @__PURE__ */ t(
-      v.div,
+      N.div,
       {
         className: i.tutorialOverlay,
         initial: { opacity: 0 },
@@ -673,7 +675,7 @@ function Oe({
         exit: { opacity: 0 },
         transition: { duration: 1 },
         children: /* @__PURE__ */ t(
-          v.h1,
+          N.h1,
           {
             className: i.tutorialWelcomeTitle,
             initial: { scale: 0.8 },
@@ -687,169 +689,178 @@ function Oe({
     )
   ] });
 }
-const Ee = { planet: Mt }, Ge = { orbit: At };
-function Je({
+const Je = { planet: At }, Ue = { orbit: Ot };
+function je({
   planets: e,
   orbits: m,
   onPlanetClick: d,
-  onPlanetEnter: r,
-  onPlanetExit: o,
+  onPlanetEnter: l,
+  onPlanetExit: n,
   onSatelliteClick: s,
-  tutorialSteps: l,
-  showTutorial: a,
-  onTutorialComplete: f,
-  initialView: c,
-  onViewChange: b,
-  renderPlanetInterior: C,
-  topBar: k,
-  theme: n,
-  starField: h = !0,
-  nodeTypes: D,
-  edgeTypes: S,
-  className: N,
-  style: it
+  onPlanetDrag: u,
+  tutorialSteps: o,
+  showTutorial: P,
+  onTutorialComplete: r,
+  initialView: h,
+  onViewChange: f,
+  renderPlanetInterior: k,
+  topBar: w,
+  theme: a,
+  starField: $ = !0,
+  nodeTypes: C,
+  edgeTypes: g,
+  className: it,
+  style: ot
 }) {
-  const [I, ot] = R(c ?? { mode: "universe" }), [H, at] = R(a ?? !1), X = E(0), K = E(""), { setCenter: O } = wt(), w = P(
-    (u) => {
-      ot(u), b == null || b(u);
+  const [S, at] = R(h ?? { mode: "universe" }), [H, nt] = R(P ?? !1), X = E(0), _ = E(""), { setCenter: O } = kt(), I = v(
+    (c) => {
+      at(c), f == null || f(c);
     },
-    [b]
-  ), G = P(
-    (u) => e.find((y) => y.id === u),
+    [f]
+  ), G = v(
+    (c) => e.find((y) => y.id === c),
     [e]
-  ), nt = L(
-    () => e.map((u) => ({
-      id: u.id,
+  ), rt = D(
+    () => e.map((c) => ({
+      id: c.id,
       type: "planet",
-      position: { x: u.x, y: u.y },
+      position: { x: c.x, y: c.y },
       data: {
-        label: u.label,
-        subtitle: u.subtitle,
-        color: u.color,
-        status: u.status ?? "idle",
+        label: c.label,
+        subtitle: c.subtitle,
+        color: c.color,
+        status: c.status ?? "idle",
         isSelected: !1
       }
     })),
     [e]
-  ), rt = L(
-    () => m.map((u, y) => ({
+  ), lt = D(
+    () => m.map((c, y) => ({
       id: `orbit-${y}`,
-      source: u.source,
-      target: u.target,
+      source: c.source,
+      target: c.target,
       type: "orbit",
-      data: { label: u.label },
+      data: { label: c.label },
       animated: !0
     })),
     [m]
-  ), [lt, W, st] = kt(nt), [ct, J, dt] = xt(rt), B = P(
-    (u) => {
+  ), [st, W, ct] = Bt(rt), [dt, J, ut] = Tt(lt), B = v(
+    (c) => {
       W(
         (y) => y.map((x) => ({
           ...x,
-          data: { ...x.data, isSelected: x.id === u }
+          data: { ...x.data, isSelected: x.id === c }
         }))
       );
     },
     [W]
-  ), ut = P(
-    (u) => {
-      var F;
-      if (!l) return;
-      if (u < 0) {
+  ), mt = v(
+    (c) => {
+      var L;
+      if (!o) return;
+      if (c < 0) {
         W(
-          (T) => T.map((g) => ({
-            ...g,
-            data: { ...g.data, status: "idle", isSelected: !1 }
+          (T) => T.map((b) => ({
+            ...b,
+            data: { ...b.data, status: "idle", isSelected: !1 }
           }))
         ), J(
-          (T) => T.map((g) => ({
-            ...g,
+          (T) => T.map((b) => ({
+            ...b,
             animated: !0,
-            data: { ...g.data, isActive: !1, isDimmed: !1 }
+            data: { ...b.data, isActive: !1, isDimmed: !1 }
           }))
         );
         return;
       }
-      const y = new Set(l.slice(0, u).map((T) => T.planetId)), x = (F = l[u]) == null ? void 0 : F.planetId;
+      const y = new Set(o.slice(0, c).map((T) => T.planetId)), x = (L = o[c]) == null ? void 0 : L.planetId;
       W(
-        (T) => T.map((g) => {
+        (T) => T.map((b) => {
           let A = "idle";
-          return g.id === x ? A = "running" : y.has(g.id) && (A = "success"), {
-            ...g,
-            data: { ...g.data, status: A, isSelected: g.id === x }
+          return b.id === x ? A = "running" : y.has(b.id) && (A = "success"), {
+            ...b,
+            data: { ...b.data, status: A, isSelected: b.id === x }
           };
         })
       );
       const U = /* @__PURE__ */ new Set([...y, x]);
       J(
-        (T) => T.map((g) => {
-          const A = y.has(g.source), Nt = U.has(g.target), j = A && Nt;
+        (T) => T.map((b) => {
+          const A = y.has(b.source), Ct = U.has(b.target), j = A && Ct;
           return {
-            ...g,
+            ...b,
             animated: j,
-            data: { ...g.data, isActive: j, isDimmed: !j }
+            data: { ...b.data, isActive: j, isDimmed: !j }
           };
         })
       );
     },
-    [l, W, J]
-  ), mt = P(
-    (u, y) => {
-      const x = Date.now(), U = x - X.current < 300 && K.current === y.id;
-      X.current = x, K.current = y.id;
-      const F = G(y.id);
-      U && F ? _(F) : I.mode === "inspecting" && I.planetId === y.id ? (w({ mode: "universe" }), B(null)) : (w({ mode: "inspecting", planetId: y.id }), B(y.id), F && (d == null || d(F)));
+    [o, W, J]
+  ), pt = v(
+    (c, y) => {
+      const x = Date.now(), U = x - X.current < 300 && _.current === y.id;
+      X.current = x, _.current = y.id;
+      const L = G(y.id);
+      U && L ? K(L) : S.mode === "inspecting" && S.planetId === y.id ? (I({ mode: "universe" }), B(null)) : (I({ mode: "inspecting", planetId: y.id }), B(y.id), L && (d == null || d(L)));
     },
-    [I, B, G, w, d]
-  ), _ = P(
-    (u) => {
-      w({ mode: "entering", planetId: u.id }), B(null), r == null || r(u), O(u.x + 50, u.y + 50, { zoom: 6, duration: 800 }), setTimeout(() => {
-        w({ mode: "planet", planetId: u.id });
+    [S, B, G, I, d]
+  ), K = v(
+    (c) => {
+      I({ mode: "entering", planetId: c.id }), B(null), l == null || l(c), O(c.x + 50, c.y + 50, { zoom: 6, duration: 800 }), setTimeout(() => {
+        I({ mode: "planet", planetId: c.id });
       }, 900);
     },
-    [O, B, w, r]
-  ), pt = P(() => {
-    w({ mode: "universe" }), o == null || o(), setTimeout(() => {
+    [O, B, I, l]
+  ), yt = v(() => {
+    I({ mode: "universe" }), n == null || n(), setTimeout(() => {
       O(800, 400, { zoom: 0.8, duration: 600 });
     }, 100);
-  }, [O, w, o]), yt = P(() => {
-    I.mode === "inspecting" && (w({ mode: "universe" }), B(null));
-  }, [I, B, w]), $ = I.mode !== "universe" ? G(I.planetId) : void 0, bt = I.mode !== "planet", ht = L(
-    () => ({ ...Ee, ...D }),
-    [D]
-  ), gt = L(
-    () => ({ ...Ge, ...S }),
-    [S]
-  ), ft = h !== !1, vt = typeof h == "object" ? h : {}, z = {};
-  return n != null && n.background && (z["--cc-bg"] = n.background), n != null && n.textColor && (z["--cc-text"] = n.textColor), n != null && n.panelBackground && (z["--cc-panel-bg"] = n.panelBackground), n != null && n.panelBorder && (z["--cc-panel-border"] = n.panelBorder), n != null && n.controlsBackground && (z["--cc-controls-bg"] = n.controlsBackground), n != null && n.fontFamily && (z["--cc-font-family"] = n.fontFamily), /* @__PURE__ */ p(
+  }, [O, I, n]), bt = v(
+    (c, y) => {
+      u == null || u(y.id, { x: y.position.x, y: y.position.y });
+    },
+    [u]
+  ), ht = v(() => {
+    S.mode === "inspecting" && (I({ mode: "universe" }), B(null));
+  }, [S, B, I]), z = S.mode !== "universe" ? G(S.planetId) : void 0, ft = S.mode !== "planet", gt = D(
+    () => ({ ...Je, ...C }),
+    [C]
+  ), vt = D(
+    () => ({ ...Ue, ...g }),
+    [g]
+  ), Nt = $ !== !1, Pt = typeof $ == "object" ? $ : {}, F = {};
+  return a != null && a.background && (F["--cc-bg"] = a.background), a != null && a.textColor && (F["--cc-text"] = a.textColor), a != null && a.panelBackground && (F["--cc-panel-bg"] = a.panelBackground), a != null && a.panelBorder && (F["--cc-panel-border"] = a.panelBorder), a != null && a.controlsBackground && (F["--cc-controls-bg"] = a.controlsBackground), a != null && a.fontFamily && (F["--cc-font-family"] = a.fontFamily), /* @__PURE__ */ p(
     "div",
     {
-      className: `${i.root} ${N ?? ""}`,
-      style: { ...z, ...it },
+      className: `${i.root} ${it ?? ""}`,
+      style: { ...F, ...ot },
       children: [
-        ft && /* @__PURE__ */ t("div", { className: i.layerStarField, children: /* @__PURE__ */ t(
-          Et,
+        Nt && /* @__PURE__ */ t("div", { className: i.layerStarField, children: /* @__PURE__ */ t(
+          Jt,
           {
-            config: vt,
-            background: n == null ? void 0 : n.background
+            config: Pt,
+            background: a == null ? void 0 : a.background
           }
         ) }),
         /* @__PURE__ */ t(
           "div",
           {
             className: i.layerReactFlow,
-            "data-hidden": !bt || void 0,
+            "data-hidden": !ft || void 0,
             children: /* @__PURE__ */ p(
-              Bt,
+              $t,
               {
-                nodes: lt,
-                edges: ct,
-                onNodesChange: st,
-                onEdgesChange: dt,
-                onNodeClick: mt,
-                onPaneClick: yt,
-                nodeTypes: ht,
-                edgeTypes: gt,
+                nodes: st,
+                edges: dt,
+                onNodesChange: ct,
+                onEdgesChange: ut,
+                onNodeClick: pt,
+                onNodeDragStop: bt,
+                onPaneClick: ht,
+                nodeTypes: gt,
+                edgeTypes: vt,
+                nodesDraggable: !0,
+                nodeDragThreshold: 5,
                 fitView: !0,
                 proOptions: { hideAttribution: !0 },
                 style: { background: "transparent" },
@@ -857,34 +868,34 @@ function Je({
                 maxZoom: 8,
                 children: [
                   /* @__PURE__ */ t(
-                    Tt,
+                    zt,
                     {
-                      variant: $t.Dots,
+                      variant: Ft.Dots,
                       gap: 50,
                       size: 1,
                       color: "rgba(255, 255, 255, 0.05)"
                     }
                   ),
                   /* @__PURE__ */ t(
-                    zt,
+                    Lt,
                     {
                       style: {
                         top: 60,
-                        background: (n == null ? void 0 : n.controlsBackground) ?? "rgba(20, 20, 40, 0.8)",
+                        background: (a == null ? void 0 : a.controlsBackground) ?? "rgba(20, 20, 40, 0.8)",
                         borderColor: "rgba(255, 255, 255, 0.1)"
                       }
                     }
                   ),
                   /* @__PURE__ */ t(
-                    Ft,
+                    Dt,
                     {
                       style: {
                         background: "rgba(10, 10, 26, 0.9)",
                         border: "1px solid rgba(255, 255, 255, 0.1)"
                       },
-                      nodeColor: (u) => {
+                      nodeColor: (c) => {
                         var y;
-                        return ((y = u.data) == null ? void 0 : y.color) || "#666";
+                        return ((y = c.data) == null ? void 0 : y.color) || "#666";
                       },
                       maskColor: "rgba(10, 10, 26, 0.7)"
                     }
@@ -894,36 +905,36 @@ function Je({
             )
           }
         ),
-        /* @__PURE__ */ t(M, { children: I.mode === "entering" && $ && /* @__PURE__ */ t(Re, { planet: $ }) }),
-        /* @__PURE__ */ t(M, { children: I.mode === "planet" && $ && /* @__PURE__ */ t(
-          Ae,
+        /* @__PURE__ */ t(M, { children: S.mode === "entering" && z && /* @__PURE__ */ t(Ee, { planet: z }) }),
+        /* @__PURE__ */ t(M, { children: S.mode === "planet" && z && /* @__PURE__ */ t(
+          Oe,
           {
-            planet: $,
-            onExit: pt,
+            planet: z,
+            onExit: yt,
             onSatelliteClick: s,
-            renderCustom: C
+            renderCustom: k
           }
         ) }),
-        /* @__PURE__ */ t(M, { children: I.mode === "inspecting" && $ && /* @__PURE__ */ t(
-          We,
+        /* @__PURE__ */ t(M, { children: S.mode === "inspecting" && z && /* @__PURE__ */ t(
+          Re,
           {
-            planet: $,
+            planet: z,
             onClose: () => {
-              w({ mode: "universe" }), B(null);
+              I({ mode: "universe" }), B(null);
             },
-            onEnterPlanet: () => _($),
+            onEnterPlanet: () => K(z),
             onSatelliteClick: s
           }
         ) }),
-        k && !H && /* @__PURE__ */ t("div", { className: i.topBarSlot, children: k }),
-        /* @__PURE__ */ t(M, { children: H && l && l.length > 0 && /* @__PURE__ */ t(
-          Oe,
+        w && !H && /* @__PURE__ */ t("div", { className: i.topBarSlot, children: w }),
+        /* @__PURE__ */ t(M, { children: H && o && o.length > 0 && /* @__PURE__ */ t(
+          Ge,
           {
-            steps: l,
+            steps: o,
             onHighlightPlanet: B,
-            onStepChange: ut,
+            onStepChange: mt,
             onFinish: () => {
-              at(!1), f == null || f();
+              nt(!1), r == null || r();
             }
           }
         ) })
@@ -931,16 +942,16 @@ function Je({
     }
   );
 }
-function qe(e) {
-  return /* @__PURE__ */ t(It, { children: /* @__PURE__ */ t(Je, { ...e }) });
+function Ze(e) {
+  return /* @__PURE__ */ t(xt, { children: /* @__PURE__ */ t(je, { ...e }) });
 }
 export {
-  qe as CosmosCanvas,
-  Oe as CosmosTutorial,
-  At as OrbitEdge,
-  Ae as PlanetInterior,
-  Mt as PlanetNode,
-  We as SidePanel,
-  Et as StarField,
-  Re as ZoomTransition
+  Ze as CosmosCanvas,
+  Ge as CosmosTutorial,
+  Ot as OrbitEdge,
+  Oe as PlanetInterior,
+  At as PlanetNode,
+  Re as SidePanel,
+  Jt as StarField,
+  Ee as ZoomTransition
 };

package/dist/style.css

@@ -1 +1 @@
-.cc-root-eSR-1{position:relative;width:100%;height:100%;overflow:hidden;font-family:var(--cc-font-family, system-ui, -apple-system, sans-serif);color:var(--cc-text, #fff)}.cc-layerStarField-jOb4M{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0}.cc-layerReactFlow-CeHI9{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;transition:opacity .4s ease}.cc-layerReactFlow-CeHI9[data-hidden=true]{opacity:0;pointer-events:none}.cc-sidePanel-PzU72{position:absolute;right:0;top:0;bottom:0;width:340px;z-index:15;background:var(--cc-panel-bg, rgba(10, 10, 30, .92));border-left:1px solid var(--cc-panel-border, rgba(255, 255, 255, .08));backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;flex-direction:column;overflow-y:auto}.cc-sidePanelHeader-cWPCq{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1rem;border-bottom:1px solid rgba(255,255,255,.06)}.cc-sidePanelTitle-Yfh5N{display:flex;align-items:center;gap:.75rem}.cc-sidePanelPlanetIcon-aRuLt{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.25rem}.cc-sidePanelName-TFFeE{font-size:1.125rem;font-weight:700;letter-spacing:.5px}.cc-sidePanelSubtitle-8fp2Y{font-size:.75rem;color:#ffffff80;margin-top:.125rem}.cc-sidePanelClose-Sdg-J{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;background:#ffffff0f;color:#ffffff80;border-radius:.375rem;cursor:pointer;font-size:1rem;transition:background .15s}.cc-sidePanelClose-Sdg-J:hover{background:#ffffff1f;color:#fff}.cc-sidePanelContent-QIEEQ{padding:1rem;flex:1}.cc-sidePanelFooter-DVOHi{padding:1rem;border-top:1px solid rgba(255,255,255,.06)}.cc-satelliteList--vkXn{display:flex;flex-direction:column;gap:.5rem}.cc-satelliteItem-JGdmG{display:flex;align-items:center;gap:.75rem;padding:.75rem;border-radius:.5rem;background:#ffffff0a;border:1px solid rgba(255,255,255,.06);cursor:pointer;transition:background .15s,border-color .15s}.cc-satelliteItem-JGdmG:hover{background:#ffffff14;border-color:#ffffff1f}.cc-satelliteIcon-arUe3{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.125rem;background:#ffffff0f;flex-shrink:0}.cc-satelliteInfo-NaKLd{flex:1;min-width:0}.cc-satelliteName-zfOPN{font-size:.875rem;font-weight:500}.cc-satelliteSummary-XARVm{font-size:.6875rem;color:#fff6;margin-top:.125rem}.cc-enterButton-5Vnri{width:100%;padding:.625rem;border:1px solid rgba(255,255,255,.15);border-radius:.5rem;background:#ffffff0f;color:#fff;font-size:.875rem;font-weight:600;letter-spacing:.5px;cursor:pointer;transition:background .15s,border-color .2s}.cc-enterButton-5Vnri:hover{background:#ffffff1f;border-color:#ffffff40}.cc-zoomTransition-Wcju8{position:absolute;top:0;right:0;bottom:0;left:0;z-index:30;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,transparent 0%,rgba(0,0,10,.8) 100%);pointer-events:none}.cc-zoomPlanetLabel-3SJT2{font-size:3rem;font-weight:800;letter-spacing:6px;text-transform:uppercase;text-shadow:0 0 40px var(--planet-color, #fff)}.cc-planetInterior-GlnW1{position:absolute;top:0;right:0;bottom:0;left:0;z-index:25;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#0a0a28f2,#000008fa)}.cc-interiorBackButton-qJAiZ{position:absolute;top:1rem;left:1rem;padding:.5rem 1rem;border:1px solid rgba(255,255,255,.2);border-radius:.5rem;background:#ffffff0f;color:#fff;font-size:.8125rem;cursor:pointer;z-index:10;transition:background .15s}.cc-interiorBackButton-qJAiZ:hover{background:#ffffff1f}.cc-interiorCenter-xdKsX{position:relative;display:flex;align-items:center;justify-content:center}.cc-interiorPlanet--XIzf{width:120px;height:120px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2}.cc-interiorPlanetLabel-e7yxq{font-size:1rem;font-weight:700;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.8)}.cc-interiorPlanetSubtitle-e2vON{font-size:.6875rem;color:#fff9;margin-top:.125rem}.cc-orbitRing-hbvmD{position:absolute;border-radius:50%;border:1px dashed rgba(255,255,255,.08);pointer-events:none}.cc-satelliteNode-01STS{position:absolute;display:flex;flex-direction:column;align-items:center;gap:.375rem;cursor:pointer;transition:transform .2s}.cc-satelliteNode-01STS:hover{transform:scale(1.12)}.cc-satelliteNodeIcon-Xq45f{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;border:2px solid rgba(255,255,255,.15);background:#ffffff0f;transition:border-color .2s,box-shadow .2s}.cc-satelliteNode-01STS:hover .cc-satelliteNodeIcon-Xq45f{border-color:#ffffff4d}.cc-satelliteNodeLabel-LLOJ5{font-size:.6875rem;color:#ffffffb3;white-space:nowrap;max-width:80px;overflow:hidden;text-overflow:ellipsis;text-align:center}.cc-satelliteNodeBadge-HsUFp{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#2ecc71;color:#fff;font-size:.625rem;font-weight:700;display:flex;align-items:center;justify-content:center}.cc-tutorialOverlay-3GHo7{position:absolute;top:0;right:0;bottom:0;left:0;z-index:50;display:flex;align-items:center;justify-content:center;background:#00000ab3;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.cc-tutorialWelcome-21KDP{text-align:center;max-width:480px}.cc-tutorialWelcomeTitle-7GwS9{font-size:2rem;font-weight:800;letter-spacing:2px;margin-bottom:1rem}.cc-tutorialWelcomeDesc--pznv{font-size:1rem;color:#fff9;line-height:1.6;margin-bottom:2rem}.cc-tutorialActions-szJ0-{display:flex;align-items:center;justify-content:center;gap:1rem}.cc-tutorialButton-wL9-p{padding:.625rem 1.5rem;border-radius:.5rem;font-size:.875rem;font-weight:600;cursor:pointer;transition:background .15s,transform .1s}.cc-tutorialButton-wL9-p:active{transform:scale(.97)}.cc-tutorialButton-wL9-p[data-variant=primary]{background:#fff;color:#0a0a2e;border:none}.cc-tutorialButton-wL9-p[data-variant=primary]:hover{background:#e2e8f0}.cc-tutorialButton-wL9-p[data-variant=ghost]{background:transparent;color:#ffffff80;border:1px solid rgba(255,255,255,.15)}.cc-tutorialButton-wL9-p[data-variant=ghost]:hover{background:#ffffff0f}.cc-tutorialCard-LGIkK{position:absolute;bottom:2rem;left:50%;transform:translate(-50%);z-index:50;width:420px;padding:1.5rem;background:#0a0a1ef2;border:1px solid rgba(255,255,255,.1);border-radius:.75rem;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.cc-tutorialChip-bUoEb{display:inline-block;padding:.25rem .625rem;border-radius:9999px;font-size:.6875rem;font-weight:600;letter-spacing:.5px;margin-bottom:.75rem}.cc-tutorialCardTitle-r2Y1I{font-size:1.125rem;font-weight:700;margin-bottom:.5rem}.cc-tutorialCardDesc-nOS-M{font-size:.8125rem;color:#fff9;line-height:1.5;margin-bottom:1.25rem}.cc-tutorialProgress-wIAT9{width:100%;height:3px;background:#ffffff1a;border-radius:2px;margin-bottom:1rem}.cc-tutorialProgressBar-PFBdE{height:100%;border-radius:2px;background:#fff;transition:width .3s ease}.cc-tutorialCardFooter-bSdyM{display:flex;align-items:center;justify-content:space-between}.cc-tutorialStepCounter-i7c5G{font-size:.75rem;color:#fff6;font-family:monospace}.cc-tutorialDots-8M0QU{display:flex;gap:.375rem}.cc-tutorialDot-518t4{width:6px;height:6px;border-radius:50%;background:#fff3;cursor:pointer;transition:background .15s}.cc-tutorialDot-518t4[data-active=true]{background:#fff}.cc-tutorialDot-518t4[data-done=true]{background:#ffffff80}.cc-topBarSlot-EJGvM{position:absolute;top:0;left:0;right:0;z-index:50}
+.cc-root-eSR-1{position:relative;width:100%;height:100%;overflow:hidden;font-family:var(--cc-font-family, system-ui, -apple-system, sans-serif);color:var(--cc-text, #fff)}.cc-layerStarField-jOb4M{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none}.cc-layerReactFlow-CeHI9{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;transition:opacity .4s ease}.cc-layerReactFlow-CeHI9[data-hidden=true]{opacity:0;pointer-events:none}.cc-sidePanel-PzU72{position:absolute;right:0;top:0;bottom:0;width:340px;z-index:15;background:var(--cc-panel-bg, rgba(10, 10, 30, .92));border-left:1px solid var(--cc-panel-border, rgba(255, 255, 255, .08));backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;flex-direction:column;overflow-y:auto}.cc-sidePanelHeader-cWPCq{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1rem;border-bottom:1px solid rgba(255,255,255,.06)}.cc-sidePanelTitle-Yfh5N{display:flex;align-items:center;gap:.75rem}.cc-sidePanelPlanetIcon-aRuLt{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.25rem}.cc-sidePanelName-TFFeE{font-size:1.125rem;font-weight:700;letter-spacing:.5px}.cc-sidePanelSubtitle-8fp2Y{font-size:.75rem;color:#ffffff80;margin-top:.125rem}.cc-sidePanelClose-Sdg-J{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;background:#ffffff0f;color:#ffffff80;border-radius:.375rem;cursor:pointer;font-size:1rem;transition:background .15s}.cc-sidePanelClose-Sdg-J:hover{background:#ffffff1f;color:#fff}.cc-sidePanelContent-QIEEQ{padding:1rem;flex:1}.cc-sidePanelFooter-DVOHi{padding:1rem;border-top:1px solid rgba(255,255,255,.06)}.cc-satelliteList--vkXn{display:flex;flex-direction:column;gap:.5rem}.cc-satelliteItem-JGdmG{display:flex;align-items:center;gap:.75rem;padding:.75rem;border-radius:.5rem;background:#ffffff0a;border:1px solid rgba(255,255,255,.06);cursor:pointer;transition:background .15s,border-color .15s}.cc-satelliteItem-JGdmG:hover{background:#ffffff14;border-color:#ffffff1f}.cc-satelliteIcon-arUe3{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.125rem;background:#ffffff0f;flex-shrink:0}.cc-satelliteInfo-NaKLd{flex:1;min-width:0}.cc-satelliteName-zfOPN{font-size:.875rem;font-weight:500}.cc-satelliteSummary-XARVm{font-size:.6875rem;color:#fff6;margin-top:.125rem}.cc-enterButton-5Vnri{width:100%;padding:.625rem;border:1px solid rgba(255,255,255,.15);border-radius:.5rem;background:#ffffff0f;color:#fff;font-size:.875rem;font-weight:600;letter-spacing:.5px;cursor:pointer;transition:background .15s,border-color .2s}.cc-enterButton-5Vnri:hover{background:#ffffff1f;border-color:#ffffff40}.cc-zoomTransition-Wcju8{position:absolute;top:0;right:0;bottom:0;left:0;z-index:30;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,transparent 0%,rgba(0,0,10,.8) 100%);pointer-events:none}.cc-zoomPlanetLabel-3SJT2{font-size:3rem;font-weight:800;letter-spacing:6px;text-transform:uppercase;text-shadow:0 0 40px var(--planet-color, #fff)}.cc-planetInterior-GlnW1{position:absolute;top:0;right:0;bottom:0;left:0;z-index:25;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#0a0a28f2,#000008fa)}.cc-interiorBackButton-qJAiZ{position:absolute;top:1rem;left:1rem;padding:.5rem 1rem;border:1px solid rgba(255,255,255,.2);border-radius:.5rem;background:#ffffff0f;color:#fff;font-size:.8125rem;cursor:pointer;z-index:10;transition:background .15s}.cc-interiorBackButton-qJAiZ:hover{background:#ffffff1f}.cc-interiorCenter-xdKsX{position:relative;display:flex;align-items:center;justify-content:center}.cc-interiorPlanet--XIzf{width:120px;height:120px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2}.cc-interiorPlanetLabel-e7yxq{font-size:1rem;font-weight:700;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.8)}.cc-interiorPlanetSubtitle-e2vON{font-size:.6875rem;color:#fff9;margin-top:.125rem}.cc-orbitRing-hbvmD{position:absolute;border-radius:50%;border:1px dashed rgba(255,255,255,.08);pointer-events:none}.cc-satelliteNode-01STS{position:absolute;display:flex;flex-direction:column;align-items:center;gap:.375rem;cursor:pointer;transition:transform .2s}.cc-satelliteNode-01STS:hover{transform:scale(1.12)}.cc-satelliteNodeIcon-Xq45f{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;border:2px solid rgba(255,255,255,.15);background:#ffffff0f;transition:border-color .2s,box-shadow .2s}.cc-satelliteNode-01STS:hover .cc-satelliteNodeIcon-Xq45f{border-color:#ffffff4d}.cc-satelliteNodeLabel-LLOJ5{font-size:.6875rem;color:#ffffffb3;white-space:nowrap;max-width:80px;overflow:hidden;text-overflow:ellipsis;text-align:center}.cc-satelliteNodeBadge-HsUFp{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#2ecc71;color:#fff;font-size:.625rem;font-weight:700;display:flex;align-items:center;justify-content:center}.cc-tutorialOverlay-3GHo7{position:absolute;top:0;right:0;bottom:0;left:0;z-index:50;display:flex;align-items:center;justify-content:center;background:#00000ab3;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.cc-tutorialWelcome-21KDP{text-align:center;max-width:480px}.cc-tutorialWelcomeTitle-7GwS9{font-size:2rem;font-weight:800;letter-spacing:2px;margin-bottom:1rem}.cc-tutorialWelcomeDesc--pznv{font-size:1rem;color:#fff9;line-height:1.6;margin-bottom:2rem}.cc-tutorialActions-szJ0-{display:flex;align-items:center;justify-content:center;gap:1rem}.cc-tutorialButton-wL9-p{padding:.625rem 1.5rem;border-radius:.5rem;font-size:.875rem;font-weight:600;cursor:pointer;transition:background .15s,transform .1s}.cc-tutorialButton-wL9-p:active{transform:scale(.97)}.cc-tutorialButton-wL9-p[data-variant=primary]{background:#fff;color:#0a0a2e;border:none}.cc-tutorialButton-wL9-p[data-variant=primary]:hover{background:#e2e8f0}.cc-tutorialButton-wL9-p[data-variant=ghost]{background:transparent;color:#ffffff80;border:1px solid rgba(255,255,255,.15)}.cc-tutorialButton-wL9-p[data-variant=ghost]:hover{background:#ffffff0f}.cc-tutorialCard-LGIkK{position:absolute;bottom:2rem;left:50%;transform:translate(-50%);z-index:50;width:420px;padding:1.5rem;background:#0a0a1ef2;border:1px solid rgba(255,255,255,.1);border-radius:.75rem;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.cc-tutorialChip-bUoEb{display:inline-block;padding:.25rem .625rem;border-radius:9999px;font-size:.6875rem;font-weight:600;letter-spacing:.5px;margin-bottom:.75rem}.cc-tutorialCardTitle-r2Y1I{font-size:1.125rem;font-weight:700;margin-bottom:.5rem}.cc-tutorialCardDesc-nOS-M{font-size:.8125rem;color:#fff9;line-height:1.5;margin-bottom:1.25rem}.cc-tutorialProgress-wIAT9{width:100%;height:3px;background:#ffffff1a;border-radius:2px;margin-bottom:1rem}.cc-tutorialProgressBar-PFBdE{height:100%;border-radius:2px;background:#fff;transition:width .3s ease}.cc-tutorialCardFooter-bSdyM{display:flex;align-items:center;justify-content:space-between}.cc-tutorialStepCounter-i7c5G{font-size:.75rem;color:#fff6;font-family:monospace}.cc-tutorialDots-8M0QU{display:flex;gap:.375rem}.cc-tutorialDot-518t4{width:6px;height:6px;border-radius:50%;background:#fff3;cursor:pointer;transition:background .15s}.cc-tutorialDot-518t4[data-active=true]{background:#fff}.cc-tutorialDot-518t4[data-done=true]{background:#ffffff80}.cc-topBarSlot-EJGvM{position:absolute;top:0;left:0;right:0;z-index:50}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@servantcdh/ez-planet-cosmos",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -11,7 +11,8 @@
     ".": {
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
-    }
+    },
+    "./dist/style.css": "./dist/style.css"
   },
   "repository": {
     "type": "git",