@rubin-epo/epo-widget-lib 2.0.1 → 2.0.3

package/dist/localeStrings/en/epo-widget-lib.json

@@ -161,6 +161,7 @@
       }
     },
     "playback": {
+        "sec_with_count": "1 sec = {{count}} days",
         "time_equivalence": "1 sec is 1 year",
         "normal_time": "Normal Time",
         "time_step": "Time Step"

package/dist/widgets/OrbitalSim/Context/OrbitalSimContext.types.d.ts

@@ -0,0 +1,45 @@
+import { ReactNode } from 'react';
+
+export interface OrbitalSimProviderProps {
+    children: ReactNode;
+    orbitData: Orbits;
+}
+export type OrbitalSimContextValues = {
+    orbits: Orbits;
+    setOrbits: React.Dispatch<React.SetStateAction<Orbits>>;
+    observations: Observation[];
+    setObservations: React.Dispatch<React.SetStateAction<Observation[]>>;
+    updateActiveObservation: (activeId: string) => void;
+};
+export type Observation = {
+    id: string;
+    label: string;
+    interactable: boolean;
+    isActive: boolean;
+    position: number;
+    isAnswer?: boolean;
+};
+export type Neo = {
+    a: number;
+    e: number;
+    i: number;
+    Peri: number;
+    Node: number;
+};
+export type DetailsRow = {
+    rowTitle: string;
+    rowContent: string | TrustedHTML;
+};
+export type Orbits = {
+    neos: Neo[] | null;
+    activeNeo: Neo | null;
+    observations: Observation[];
+    paused: boolean;
+    pov: string | null;
+    defaultZoom: number | null;
+    potentialOrbits: boolean;
+    noDetails: boolean;
+    detailsRows: DetailsRow[] | null;
+    refObjs: string[] | null;
+    noControls: boolean;
+};

package/dist/widgets/OrbitalSim/Context/index.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const O=require("react/jsx-runtime"),e=require("react"),u=e.createContext(null);function d(){const n=e.useContext(u);if(!n)throw new Error("OrbitalSim components cannot be rendered outside the OrbitalSimContext.Provider component.");return n}function m({children:n,orbitData:l}){const[s,i]=e.useState({neos:null,activeNeo:null,observations:[],activeObs:null,selectionCallback:null,paused:null,pov:null,defaultZoom:null,potentialOrbits:null,noDetails:null,detailsSet:null,detailsRows:null,refObjs:null,noLabels:null,noControls:!1}),[t,o]=e.useState(()=>s.observations??[]);e.useEffect(()=>{i(l),o(l.observations)},[l]);const a=b=>{if(t&&t.length>0){let v=t.map(r=>r.id==b?{...r,isActive:!0}:{...r,isActive:!1});o(v)}},c=e.useMemo(()=>({orbits:s,setOrbits:i,observations:t,setObservations:o,updateActiveObservation:a}),[s,i,t,o,a]);return O.jsx(u.Provider,{value:c,children:n})}exports.OrbitalSimContext=u;exports.OrbitalSimProvider=m;exports.useOrbitalSimContext=d;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react/jsx-runtime"),e=require("react"),a=e.createContext(null);function O(){const o=e.useContext(a);if(!o)throw new Error("OrbitalSim components cannot be rendered outside the OrbitalSimContext.Provider component.");return o}function d({children:o,orbitData:s}){const[i,r]=e.useState({neos:null,activeNeo:null,observations:[],paused:!1,pov:null,defaultZoom:null,potentialOrbits:!1,noDetails:!1,detailsRows:null,refObjs:null,noControls:!1}),[t,n]=e.useState(()=>i.observations??[]);e.useEffect(()=>{r(s),n(s.observations)},[s]);const u=b=>{if(t&&t.length>0){let v=t.map(l=>l.id==b?{...l,isActive:!0}:{...l,isActive:!1});n(v)}},c=e.useMemo(()=>({orbits:i,setOrbits:r,observations:t,setObservations:n,updateActiveObservation:u}),[i,r,t,n,u]);return m.jsx(a.Provider,{value:c,children:o})}exports.OrbitalSimContext=a;exports.OrbitalSimProvider=d;exports.useOrbitalSimContext=O;

package/dist/widgets/OrbitalSim/Context/index.d.ts

@@ -1,41 +1,5 @@
-import { ReactNode } from 'react';
+import { OrbitalSimContextValues, OrbitalSimProviderProps } from './OrbitalSimContext.types.ts';
 
-interface OrbitalSimProviderProps {
-    children: ReactNode;
-    orbitData: Orbits;
-}
-type OrbitalSimContextValues = {
-    orbits: Orbits;
-    setOrbits: React.Dispatch<React.SetStateAction<Orbits>>;
-    observations: Observation[];
-    setObservations: React.Dispatch<React.SetStateAction<Observation[]>>;
-    updateActiveObservation: (activeId: string) => void;
-};
-type Observation = {
-    id: string;
-    label: string;
-    interactable: boolean;
-    isActive: boolean;
-    position: number;
-    isAnswer?: boolean;
-};
-type Orbits = {
-    neos: any;
-    activeNeo: any;
-    observations: Observation[];
-    activeObs: any;
-    selectionCallback: any;
-    paused: any;
-    pov: any;
-    defaultZoom: any;
-    potentialOrbits: any;
-    noDetails: any;
-    detailsSet: any;
-    detailsRows: any;
-    refObjs: any;
-    noLabels: any;
-    noControls: boolean;
-};
 export declare const OrbitalSimContext: import('react').Context<OrbitalSimContextValues | null>;
 export default OrbitalSimContext;
 /**

package/dist/widgets/OrbitalSim/Context/index.js

@@ -1,60 +1,56 @@
 "use client";
-import { jsx as m } from "react/jsx-runtime";
-import { createContext as d, useState as u, useEffect as f, useMemo as O, useContext as p } from "react";
-const a = d(null);
+import { jsx as f } from "react/jsx-runtime";
+import { createContext as m, useState as a, useEffect as d, useMemo as O, useContext as p } from "react";
+const u = m(null);
 function S() {
-  const t = p(a);
+  const t = p(u);
   if (!t)
     throw new Error(
       "OrbitalSim components cannot be rendered outside the OrbitalSimContext.Provider component."
     );
   return t;
 }
-function w({ children: t, orbitData: o }) {
-  const [l, s] = u({
+function w({ children: t, orbitData: n }) {
+  const [s, i] = a({
     neos: null,
     activeNeo: null,
     observations: [],
-    activeObs: null,
-    selectionCallback: null,
-    paused: null,
+    paused: !1,
     pov: null,
     defaultZoom: null,
-    potentialOrbits: null,
-    noDetails: null,
-    detailsSet: null,
+    potentialOrbits: !1,
+    noDetails: !1,
     detailsRows: null,
     refObjs: null,
-    noLabels: null,
     noControls: !1
-  }), [e, n] = u(
-    () => l.observations ?? []
+  }), [e, o] = a(
+    () => s.observations ?? []
   );
-  f(() => {
-    s(o), n(o.observations);
-  }, [o]);
-  const r = (b) => {
+  d(() => {
+    i(n), o(n.observations);
+  }, [n]);
+  const l = (v) => {
     if (e && e.length > 0) {
-      let v = e.map((i) => i.id == b ? { ...i, isActive: !0 } : { ...i, isActive: !1 });
-      n(v);
+      let b = e.map((r) => r.id == v ? { ...r, isActive: !0 } : { ...r, isActive: !1 });
+      o(b);
     }
   }, c = O(() => ({
-    orbits: l,
-    setOrbits: s,
+    orbits: s,
+    setOrbits: i,
     observations: e,
-    setObservations: n,
-    updateActiveObservation: r
+    setObservations: o,
+    updateActiveObservation: l
   }), [
-    l,
     s,
+    i,
     e,
-    n,
-    r
+    o,
+    l
   ]);
-  return /* @__PURE__ */ m(a.Provider, { value: c, children: t });
+  return /* @__PURE__ */ f(u.Provider, { value: c, children: t });
 }
 export {
-  a as OrbitalSimContext,
+  u as OrbitalSimContext,
   w as OrbitalSimProvider,
   S as useOrbitalSimContext
 };

package/dist/widgets/OrbitalSim/Controls/PlaybackSpeed.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),v=require("react"),u=require("../../../node_modules/prop-types/index.cjs"),k=require("react-i18next"),m=require("../orbitalUtilities.cjs"),S=require("@rubin-epo/epo-react-lib/HorizontalSlider"),t=require("./styles.cjs"),T=a=>a&&a.__esModule?a:{default:a},g=T(S);function h({dayPerVizSec:a,elapsedTime:p,sliderOnChangeCallback:j,speeds:b}){const{t:r}=k.useTranslation();function x(d){const o=d/365,l=Math.floor(o),s=365*(o-l);let i={},n={};return i={number:m.formatValue(l),string:r("elapsed_time.interval.year",{count:l})},n={number:m.formatValue(s),string:r("elapsed_time.interval.day",{count:s})},l>=1?`${i.number} ${i.string}`:s<1?r("orbit_viewer.playback.interval.secWithCount",{count:1}):`${n.number} ${n.string}`}function c(d,o){const l=p<0,s=Math.abs(p)/365.256,i=Math.floor(s),n=Math.floor(365.256*(s-i));let f={},y={};return f={number:m.formatValue(l?-i:i),string:r("elapsed_time.interval.year",{count:i})},y={number:m.formatValue(l?-n:n),string:r("elapsed_time.interval.day",{count:n})},d==="days"?y[o]:d==="years"?f[o]:null}const _=v.useMemo(()=>x(a),[a]);return e.jsxs(e.Fragment,{children:[e.jsxs(t.PlaybackSpeedSliderHeader,{children:[e.jsx(t.PlaybackSpeedTitle,{children:r("orbital_sim.playback.time_step")}),e.jsx(t.PlaybackSpeedSliderLabel,{children:r("orbital_sim.playback.time_equivalence",{firstTime:r("orbit_viewer.playback.interval.secWithCount",{count:1}),secondTime:_})})]}),e.jsx(t.PlaybackSpeedSliderLabelTop,{children:r("orbital_sim.playback.time_equivalence",{firstTime:r("orbit_viewer.playback.interval.secWithCount",{count:1}),secondTime:r("orbit_viewer.playback.interval.yearWithCount",{count:1}),context:"verbose"})}),e.jsx(t.PlaybackSpeedSliderLabelBottom,{children:r("orbital_sim.playback.normal_time")}),e.jsx(t.PlaybackSpeedSliderWrapper,{children:e.jsx(g.default,{isVertical:!0,min:b.min,invert:!0,max:b.max,step:b.step,value:a,onChangeCallback:j})}),e.jsxs(t.ElapsedTimeContainer,{children:[e.jsx(t.ElapsedTimeTitle,{children:r("elapsed_time.title")}),e.jsxs(t.ElapsedTimeInner,{children:[e.jsxs(t.ElapsedTimeBlock,{children:[e.jsx(t.ElapsedVal,{children:c("years","number")}),e.jsx("div",{children:c("years","string")})]}),e.jsx(t.ElapsedTimeDivider,{}),e.jsxs(t.ElapsedTimeBlock,{children:[e.jsx(t.ElapsedVal,{children:c("days","number")}),e.jsx(t.ElapsedLabel,{children:c("days","string")})]})]})]})]})}h.propTypes={dayPerVizSec:u.default.number,elapsedTime:u.default.number,speeds:u.default.object,sliderOnChangeCallback:u.default.func};exports.default=h;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime");require("react");const s=require("../../../node_modules/prop-types/index.cjs"),f=require("react-i18next"),h=require("../orbitalUtilities.cjs"),_=require("@rubin-epo/epo-react-lib/HorizontalSlider"),a=require("./styles.cjs"),k=r=>r&&r.__esModule?r:{default:r},S=k(_);function x({dayPerVizSec:r,elapsedTime:d,sliderOnChangeCallback:j,speeds:n}){const{t}=f.useTranslation();function l(o,u){const b=d<0,m=Math.abs(d)/365.256,i=Math.floor(m),c=Math.floor(365.256*(m-i));let p={},y={};return p={number:h.formatValue(b?-i:i),string:t("elapsed_time.interval.year",{count:i})},y={number:h.formatValue(b?-c:c),string:t("elapsed_time.interval.day",{count:c})},o==="days"?y[u]:o==="years"?p[u]:null}return e.jsx(e.Fragment,{children:e.jsxs(a.PlaybackContainer,{children:[e.jsxs(a.PlaybackSpeedSliderHeader,{children:[e.jsx(a.PlaybackSpeedTitle,{children:t("orbital_sim.playback.time_step")}),e.jsx(a.PlaybackSpeedSliderLabel,{children:t("orbital_sim.playback.sec_with_count",{count:Math.round(r)})})]}),e.jsx(a.PlaybackSpeedSliderLabelTop,{children:t("orbital_sim.playback.time_equivalence",{firstTime:t("orbit_viewer.playback.interval.secWithCount",{count:1}),secondTime:t("orbit_viewer.playback.interval.yearWithCount",{count:1}),context:"verbose"})}),e.jsx(a.PlaybackSpeedSliderLabelBottom,{children:t("orbital_sim.playback.normal_time")}),e.jsx(a.PlaybackSpeedSliderWrapper,{children:e.jsx(S.default,{isVertical:!0,min:n.min,invert:!0,max:n.max,step:n.step,value:r,onChangeCallback:j})}),e.jsxs(a.ElapsedTimeContainer,{children:[e.jsx(a.ElapsedTimeTitle,{children:t("elapsed_time.title")}),e.jsxs(a.ElapsedTimeInner,{children:[e.jsxs(a.ElapsedTimeBlock,{children:[e.jsx(a.ElapsedVal,{children:l("years","number")}),e.jsx("div",{children:l("years","string")})]}),e.jsx(a.ElapsedTimeDivider,{}),e.jsxs(a.ElapsedTimeBlock,{children:[e.jsx(a.ElapsedVal,{children:l("days","number")}),e.jsx(a.ElapsedLabel,{children:l("days","string")})]})]})]})]})})}x.propTypes={dayPerVizSec:s.default.number,elapsedTime:s.default.number,speeds:s.default.object,sliderOnChangeCallback:s.default.func};exports.default=x;

package/dist/widgets/OrbitalSim/Controls/PlaybackSpeed.js

@@ -1,94 +1,79 @@
 "use client";
-import { jsxs as l, Fragment as S, jsx as r } from "react/jsx-runtime";
-import { useMemo as g } from "react";
-import m from "../../../node_modules/prop-types/index.js";
-import { useTranslation as C } from "react-i18next";
-import { formatValue as d } from "../orbitalUtilities.js";
-import E from "@rubin-epo/epo-react-lib/HorizontalSlider";
-import { PlaybackSpeedSliderHeader as j, PlaybackSpeedTitle as P, PlaybackSpeedSliderLabel as x, PlaybackSpeedSliderLabelTop as D, PlaybackSpeedSliderLabelBottom as M, PlaybackSpeedSliderWrapper as W, ElapsedTimeContainer as w, ElapsedTimeTitle as L, ElapsedTimeInner as Y, ElapsedTimeBlock as h, ElapsedVal as v, ElapsedTimeDivider as $, ElapsedLabel as q } from "./styles.js";
+import { jsx as e, Fragment as S, jsxs as a } from "react/jsx-runtime";
+import "react";
+import l from "../../../node_modules/prop-types/index.js";
+import { useTranslation as T } from "react-i18next";
+import { formatValue as h } from "../orbitalUtilities.js";
+import v from "@rubin-epo/epo-react-lib/HorizontalSlider";
+import { PlaybackContainer as P, PlaybackSpeedSliderHeader as g, PlaybackSpeedTitle as C, PlaybackSpeedSliderLabel as E, PlaybackSpeedSliderLabelTop as x, PlaybackSpeedSliderLabelBottom as j, PlaybackSpeedSliderWrapper as L, ElapsedTimeContainer as M, ElapsedTimeTitle as w, ElapsedTimeInner as D, ElapsedTimeBlock as f, ElapsedVal as k, ElapsedTimeDivider as V, ElapsedLabel as W } from "./styles.js";
 function B({
-  dayPerVizSec: u,
-  elapsedTime: b,
-  sliderOnChangeCallback: k,
-  speeds: p
+  dayPerVizSec: c,
+  elapsedTime: s,
+  sliderOnChangeCallback: _,
+  speeds: n
 }) {
-  const { t: e } = C();
-  function _(c) {
-    const o = c / 365, a = Math.floor(o), n = 365 * (o - a);
-    let t = {}, i = {};
-    return t = {
-      number: d(a),
-      string: e("elapsed_time.interval.year", { count: a })
-    }, i = {
-      number: d(n),
-      string: e("elapsed_time.interval.day", { count: n })
-    }, a >= 1 ? `${t.number} ${t.string}` : n < 1 ? e("orbit_viewer.playback.interval.secWithCount", { count: 1 }) : `${i.number} ${i.string}`;
+  const { t: r } = T();
+  function i(d, m) {
+    const p = s < 0, b = Math.abs(s) / 365.256, t = Math.floor(b), o = Math.floor(365.256 * (b - t));
+    let u = {}, y = {};
+    return u = {
+      number: h(p ? -t : t),
+      string: r("elapsed_time.interval.year", { count: t })
+    }, y = {
+      number: h(p ? -o : o),
+      string: r("elapsed_time.interval.day", { count: o })
+    }, d === "days" ? y[m] : d === "years" ? u[m] : null;
   }
-  function s(c, o) {
-    const a = b < 0, n = Math.abs(b) / 365.256, t = Math.floor(n), i = Math.floor(365.256 * (n - t));
-    let y = {}, f = {};
-    return y = {
-      number: d(a ? -t : t),
-      string: e("elapsed_time.interval.year", { count: t })
-    }, f = {
-      number: d(a ? -i : i),
-      string: e("elapsed_time.interval.day", { count: i })
-    }, c === "days" ? f[o] : c === "years" ? y[o] : null;
-  }
-  const T = g(() => _(u), [u]);
-  return /* @__PURE__ */ l(S, { children: [
-    /* @__PURE__ */ l(j, { children: [
-      /* @__PURE__ */ r(P, { children: e("orbital_sim.playback.time_step") }),
-      /* @__PURE__ */ r(x, { children: e("orbital_sim.playback.time_equivalence", {
-        firstTime: e("orbit_viewer.playback.interval.secWithCount", {
-          count: 1
-        }),
-        secondTime: T
+  return /* @__PURE__ */ e(S, { children: /* @__PURE__ */ a(P, { children: [
+    /* @__PURE__ */ a(g, { children: [
+      /* @__PURE__ */ e(C, { children: r("orbital_sim.playback.time_step") }),
+      /* @__PURE__ */ e(E, { children: r("orbital_sim.playback.sec_with_count", {
+        count: Math.round(c)
       }) })
     ] }),
-    /* @__PURE__ */ r(D, { children: e("orbital_sim.playback.time_equivalence", {
-      firstTime: e("orbit_viewer.playback.interval.secWithCount", {
+    /* @__PURE__ */ e(x, { children: r("orbital_sim.playback.time_equivalence", {
+      firstTime: r("orbit_viewer.playback.interval.secWithCount", {
         count: 1
       }),
-      secondTime: e("orbit_viewer.playback.interval.yearWithCount", {
+      secondTime: r("orbit_viewer.playback.interval.yearWithCount", {
         count: 1
       }),
       context: "verbose"
     }) }),
-    /* @__PURE__ */ r(M, { children: e("orbital_sim.playback.normal_time") }),
-    /* @__PURE__ */ r(W, { children: /* @__PURE__ */ r(
-      E,
+    /* @__PURE__ */ e(j, { children: r("orbital_sim.playback.normal_time") }),
+    /* @__PURE__ */ e(L, { children: /* @__PURE__ */ e(
+      v,
       {
         isVertical: !0,
-        min: p.min,
+        min: n.min,
         invert: !0,
-        max: p.max,
-        step: p.step,
-        value: u,
-        onChangeCallback: k
+        max: n.max,
+        step: n.step,
+        value: c,
+        onChangeCallback: _
       }
     ) }),
-    /* @__PURE__ */ l(w, { children: [
-      /* @__PURE__ */ r(L, { children: e("elapsed_time.title") }),
-      /* @__PURE__ */ l(Y, { children: [
-        /* @__PURE__ */ l(h, { children: [
-          /* @__PURE__ */ r(v, { children: s("years", "number") }),
-          /* @__PURE__ */ r("div", { children: s("years", "string") })
+    /* @__PURE__ */ a(M, { children: [
+      /* @__PURE__ */ e(w, { children: r("elapsed_time.title") }),
+      /* @__PURE__ */ a(D, { children: [
+        /* @__PURE__ */ a(f, { children: [
+          /* @__PURE__ */ e(k, { children: i("years", "number") }),
+          /* @__PURE__ */ e("div", { children: i("years", "string") })
         ] }),
-        /* @__PURE__ */ r($, {}),
-        /* @__PURE__ */ l(h, { children: [
-          /* @__PURE__ */ r(v, { children: s("days", "number") }),
-          /* @__PURE__ */ r(q, { children: s("days", "string") })
+        /* @__PURE__ */ e(V, {}),
+        /* @__PURE__ */ a(f, { children: [
+          /* @__PURE__ */ e(k, { children: i("days", "number") }),
+          /* @__PURE__ */ e(W, { children: i("days", "string") })
         ] })
       ] })
     ] })
-  ] });
+  ] }) });
 }
 B.propTypes = {
-  dayPerVizSec: m.number,
-  elapsedTime: m.number,
-  speeds: m.object,
-  sliderOnChangeCallback: m.func
+  dayPerVizSec: l.number,
+  elapsedTime: l.number,
+  speeds: l.object,
+  sliderOnChangeCallback: l.func
 };
 export {
   B as default

package/dist/widgets/OrbitalSim/Controls/styles.cjs

@@ -1,4 +1,15 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("styled-components"),t=a=>a&&a.__esModule?a:{default:a},e=t(l),i=e.default.div`
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("styled-components"),l=a=>a&&a.__esModule?a:{default:a},e=l(t),r=e.default.div`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(5, 1fr);
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+  width: 110px;
+  position: absolute;
+  right: 20px;
+  top: 10px;
+  height: 95%;
+`,i=e.default.div`
     width: auto;
     display: flex;
     position: absolute;
@@ -8,35 +19,30 @@
     z-index: 2;
     font-size: 17px;
 `,o=e.default.div`
-  position: absolute;
-  top: 34px;
-  right: 10px;
   z-index: 2;
-  width: 110px;
   padding: 5px;
   text-align: center;
   background-color: rgba(255,255,255, 0.8);
   border: 1px solid --black;
   border-radius: 10px;
-`,r=e.default.h4`
+  grid-area: 1 / 1 / 2 / 3; 
+  height: fit-content;
+`,d=e.default.h4`
   font-size: 18px;
   font-weight: var(--regular);
   line-height: 1.5;
   color: var(--black);
   margin: 0;
-`,d=e.default.div`
+`,n=e.default.div`
   font-size: 13px;
   line-height: 1.333;
   color: var(--black);
   font-size: 12.5px;
-`,n=e.default.div`
-  right: 25px;
-  top: 100px;
+`,c=e.default.div`
+  grid-area: 2 / 2 / 3 / 3;   
   font-size: 13px;
   line-height: 1.333;
   color: var(--black);
-  position: absolute;
-  // right: var(--minPadding) / 2;
   z-index: 2;
   width: 70px;
   padding: 5px;
@@ -45,14 +51,12 @@
   background-color: rgb(from var(--basePrimary) r g b / 80%);
   border: 1px solid var(--black);
   border-radius: 10px;
+  height: fit-content;
 `,p=e.default.div`
-  right: 25px;
-  bottom: 200px;
+  grid-area: 4 / 2 / 5 / 3;
   font-size: 13px;
   line-height: 1.333;
   color: var(--black);
-  position: absolute;
-  // right: var(--minPadding) / 2;
   z-index: 2;
   width: 70px;
   padding: 5px;
@@ -61,54 +65,56 @@
   background-color: rgb(from var(--basePrimary) r g b / 80%);
   border: 1px solid var(--black);
   border-radius: 10px;
-`,c=e.default.span`
-  position: absolute;
+  height: fit-content;
+  align-self: center;
+`,s=e.default.span`
   z-index: 2;
-  height: 50px;
-  top: 25%;
-  right: 5rem;
   width: fit-content;
-`,s=e.default.div`
+  grid-area: 2 / 1 / 5 / 2;
+
+  & > div:first-of-type {
+    height: stretch;
+  }
+`,b=e.default.div`
+  grid-area: 5 / 1 / 6 / 3; 
   font-size: 13px;
   line-height: 1.333;
   color: var(--black);
-  position: absolute;
-  right: 10px;
-  bottom: 100px;
   z-index: 2;
   color: var(--black);
   text-align: center;
   background-color: rgb(from var(--white) r g b / 80%);
   border: 1px solid var(--black);
   border-radius: 10px;
-`,b=e.default.div`
+  height: fit-content;
+`,g=e.default.div`
   font-size: 13px;
   line-height: 1.333;
   color: var(--black);
   padding-top: 5px;
-`,x=e.default.div`
+`,f=e.default.div`
   display: flex;
   flex-flow: nowrap;
   align-items: center;
   justify-content: space-evenly;
   margin-top: 5px;
   border-top: 1px solid var(--black);
-`,g=e.default.div`
+`,x=e.default.div`
   width: 50px;
-`,u=e.default.div`
+`,h=e.default.div`
   font-size: 18px;
   font-weight: var(--regular);
   line-height: 1.5;
   color: var(--black);
   color: var(--black);
-`,f=e.default.div`
+`,k=e.default.div`
   display: block;
   width: 1px;
   height: 50px;
   background-color: var(--black);
-`,v=e.default.div`
+`,u=e.default.div`
   font-size: 13px;
   line-height: 1.333;
   color: var(--black);
   color: var(--black);
-`;exports.ElapsedLabel=v;exports.ElapsedTimeBlock=g;exports.ElapsedTimeContainer=s;exports.ElapsedTimeDivider=f;exports.ElapsedTimeInner=x;exports.ElapsedTimeTitle=b;exports.ElapsedVal=u;exports.PlaybackControlsContainer=i;exports.PlaybackSpeedSliderHeader=o;exports.PlaybackSpeedSliderLabel=d;exports.PlaybackSpeedSliderLabelBottom=p;exports.PlaybackSpeedSliderLabelTop=n;exports.PlaybackSpeedSliderWrapper=c;exports.PlaybackSpeedTitle=r;
+`;exports.ElapsedLabel=u;exports.ElapsedTimeBlock=x;exports.ElapsedTimeContainer=b;exports.ElapsedTimeDivider=k;exports.ElapsedTimeInner=f;exports.ElapsedTimeTitle=g;exports.ElapsedVal=h;exports.PlaybackContainer=r;exports.PlaybackControlsContainer=i;exports.PlaybackSpeedSliderHeader=o;exports.PlaybackSpeedSliderLabel=n;exports.PlaybackSpeedSliderLabelBottom=p;exports.PlaybackSpeedSliderLabelTop=c;exports.PlaybackSpeedSliderWrapper=s;exports.PlaybackSpeedTitle=d;

package/dist/widgets/OrbitalSim/Controls/styles.d.ts

@@ -1,3 +1,4 @@
+export declare const PlaybackContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const PlaybackControlsContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const PlaybackSpeedSliderHeader: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const PlaybackSpeedTitle: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;

package/dist/widgets/OrbitalSim/Controls/styles.js

@@ -1,6 +1,17 @@
 "use client";
-import o from "styled-components";
-const i = o.div`
+import e from "styled-components";
+const i = e.div`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(5, 1fr);
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+  width: 110px;
+  position: absolute;
+  right: 20px;
+  top: 10px;
+  height: 95%;
+`, a = e.div`
     width: auto;
     display: flex;
     position: absolute;
@@ -9,36 +20,31 @@ const i = o.div`
     transform: translateX(-50%);
     z-index: 2;
     font-size: 17px;
-`, r = o.div`
-  position: absolute;
-  top: 34px;
-  right: 10px;
+`, o = e.div`
   z-index: 2;
-  width: 110px;
   padding: 5px;
   text-align: center;
   background-color: rgba(255,255,255, 0.8);
   border: 1px solid --black;
   border-radius: 10px;
-`, a = o.h4`
+  grid-area: 1 / 1 / 2 / 3; 
+  height: fit-content;
+`, t = e.h4`
   font-size: 18px;
   font-weight: var(--regular);
   line-height: 1.5;
   color: var(--black);
   margin: 0;
-`, t = o.div`
+`, l = e.div`
   font-size: 13px;
   line-height: 1.333;
   color: var(--black);
   font-size: 12.5px;
-`, l = o.div`
-  right: 25px;
-  top: 100px;
+`, n = e.div`
+  grid-area: 2 / 2 / 3 / 3;   
   font-size: 13px;
   line-height: 1.333;
   color: var(--black);
-  position: absolute;
-  // right: var(--minPadding) / 2;
   z-index: 2;
   width: 70px;
   padding: 5px;
@@ -47,14 +53,12 @@ const i = o.div`
   background-color: rgb(from var(--basePrimary) r g b / 80%);
   border: 1px solid var(--black);
   border-radius: 10px;
-`, n = o.div`
-  right: 25px;
-  bottom: 200px;
+  height: fit-content;
+`, d = e.div`
+  grid-area: 4 / 2 / 5 / 3;
   font-size: 13px;
   line-height: 1.333;
   color: var(--black);
-  position: absolute;
-  // right: var(--minPadding) / 2;
   z-index: 2;
   width: 70px;
   padding: 5px;
@@ -63,70 +67,73 @@ const i = o.div`
   background-color: rgb(from var(--basePrimary) r g b / 80%);
   border: 1px solid var(--black);
   border-radius: 10px;
-`, d = o.span`
-  position: absolute;
+  height: fit-content;
+  align-self: center;
+`, c = e.span`
   z-index: 2;
-  height: 50px;
-  top: 25%;
-  right: 5rem;
   width: fit-content;
-`, p = o.div`
+  grid-area: 2 / 1 / 5 / 2;
+
+  & > div:first-of-type {
+    height: stretch;
+  }
+`, p = e.div`
+  grid-area: 5 / 1 / 6 / 3; 
   font-size: 13px;
   line-height: 1.333;
   color: var(--black);
-  position: absolute;
-  right: 10px;
-  bottom: 100px;
   z-index: 2;
   color: var(--black);
   text-align: center;
   background-color: rgb(from var(--white) r g b / 80%);
   border: 1px solid var(--black);
   border-radius: 10px;
-`, c = o.div`
+  height: fit-content;
+`, s = e.div`
   font-size: 13px;
   line-height: 1.333;
   color: var(--black);
   padding-top: 5px;
-`, s = o.div`
+`, b = e.div`
   display: flex;
   flex-flow: nowrap;
   align-items: center;
   justify-content: space-evenly;
   margin-top: 5px;
   border-top: 1px solid var(--black);
-`, b = o.div`
+`, g = e.div`
   width: 50px;
-`, x = o.div`
+`, x = e.div`
   font-size: 18px;
   font-weight: var(--regular);
   line-height: 1.5;
   color: var(--black);
   color: var(--black);
-`, g = o.div`
+`, h = e.div`
   display: block;
   width: 1px;
   height: 50px;
   background-color: var(--black);
-`, h = o.div`
+`, v = e.div`
   font-size: 13px;
   line-height: 1.333;
   color: var(--black);
   color: var(--black);
 `;
 export {
-  h as ElapsedLabel,
-  b as ElapsedTimeBlock,
+  v as ElapsedLabel,
+  g as ElapsedTimeBlock,
   p as ElapsedTimeContainer,
-  g as ElapsedTimeDivider,
-  s as ElapsedTimeInner,
-  c as ElapsedTimeTitle,
+  h as ElapsedTimeDivider,
+  b as ElapsedTimeInner,
+  s as ElapsedTimeTitle,
   x as ElapsedVal,
-  i as PlaybackControlsContainer,
-  r as PlaybackSpeedSliderHeader,
-  t as PlaybackSpeedSliderLabel,
-  n as PlaybackSpeedSliderLabelBottom,
-  l as PlaybackSpeedSliderLabelTop,
-  d as PlaybackSpeedSliderWrapper,
-  a as PlaybackSpeedTitle
+  i as PlaybackContainer,
+  a as PlaybackControlsContainer,
+  o as PlaybackSpeedSliderHeader,
+  l as PlaybackSpeedSliderLabel,
+  d as PlaybackSpeedSliderLabelBottom,
+  n as PlaybackSpeedSliderLabelTop,
+  c as PlaybackSpeedSliderWrapper,
+  t as PlaybackSpeedTitle
 };

package/dist/widgets/OrbitalSim/Observations/Observation.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),f=require("react"),n=require("../../../node_modules/prop-types/index.cjs"),v=require("../../../node_modules/classnames/index.cjs"),x=require("@react-three/drei"),o=require("../OrbitalSim.module.css.cjs"),h=require("../Context/index.cjs");function l({data:r,vector:a}){const{updateActiveObservation:u}=h.useOrbitalSimContext(),{label:c,interactable:t,isActive:s,isAnswer:d}=r,[b,i]=f.useState(!1);function m(){return s&&d?"green":s||b?"blue":"gray"}return e.jsxs("mesh",{className:o.default["obs-mesh"],position:a,onClick:t?()=>{u(r.id)}:null,onPointerOver:t?()=>i(!0):null,onPointerOut:t?()=>i(!1):null,children:[e.jsx(x.Html,{children:e.jsx("div",{className:v.default(o.default["obs-label"]),children:c})}),e.jsx("octahedronGeometry",{attach:"geometry",args:[20]}),e.jsx("meshBasicMaterial",{attach:"material",color:m()})]})}l.propTypes={data:n.default.object,vector:n.default.object};exports.default=l;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),f=require("react"),n=require("../../../node_modules/prop-types/index.cjs"),v=require("../../../node_modules/classnames/index.cjs"),x=require("@react-three/drei"),o=require("../OrbitalSim.module.css.cjs"),h=require("../Context/index.cjs"),j=require("./styles.cjs");function l({data:r,vector:a}){const{updateActiveObservation:u}=h.useOrbitalSimContext(),{label:c,interactable:t,isActive:s,isAnswer:d}=r,[b,i]=f.useState(!1);function m(){return s&&d?"green":s||b?"blue":"gray"}return e.jsxs("mesh",{className:o.default["obs-mesh"],position:a,onClick:t?()=>{u(r.id)}:null,onPointerOver:t?()=>i(!0):null,onPointerOut:t?()=>i(!1):null,children:[e.jsx(x.Html,{children:e.jsx(j.Label,{className:v.default(o.default["obs-label"]),children:c})}),e.jsx("octahedronGeometry",{attach:"geometry",args:[20]}),e.jsx("meshBasicMaterial",{attach:"material",color:m()})]})}l.propTypes={data:n.default.object,vector:n.default.object};exports.default=l;

package/dist/widgets/OrbitalSim/Observations/Observation.js

@@ -4,28 +4,29 @@ import { useState as b } from "react";
 import i from "../../../node_modules/prop-types/index.js";
 import h from "../../../node_modules/classnames/index.js";
 import { Html as v } from "@react-three/drei";
-import n from "../OrbitalSim.module.css.js";
+import a from "../OrbitalSim.module.css.js";
 import { useOrbitalSimContext as d } from "../Context/index.js";
-function y({ data: r, vector: a }) {
-  const { updateActiveObservation: l } = d(), { label: m, interactable: t, isActive: o, isAnswer: c } = r, [u, s] = b(!1);
+import { Label as y } from "./styles.js";
+function O({ data: r, vector: l }) {
+  const { updateActiveObservation: n } = d(), { label: m, interactable: t, isActive: o, isAnswer: c } = r, [u, s] = b(!1);
   function p() {
     return o && c ? "green" : o || u ? "blue" : "gray";
   }
   return /* @__PURE__ */ f(
     "mesh",
     {
-      className: n["obs-mesh"],
-      position: a,
+      className: a["obs-mesh"],
+      position: l,
       onClick: t ? () => {
-        l(r.id);
+        n(r.id);
       } : null,
       onPointerOver: t ? () => s(!0) : null,
       onPointerOut: t ? () => s(!1) : null,
       children: [
         /* @__PURE__ */ e(v, { children: /* @__PURE__ */ e(
-          "div",
+          y,
           {
-            className: h(n["obs-label"]),
+            className: h(a["obs-label"]),
             children: m
           }
         ) }),
@@ -41,10 +42,10 @@ function y({ data: r, vector: a }) {
     }
   );
 }
-y.propTypes = {
+O.propTypes = {
   data: i.object,
   vector: i.object
 };
 export {
-  y as default
+  O as default
 };

package/dist/widgets/OrbitalSim/Observations/styles.cjs

@@ -0,0 +1,11 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("styled-components"),o=e=>e&&e.__esModule?e:{default:e},r=o(t),d=r.default.div`
+    background-color: rgba(0, 0, 0, .75);
+    width: 20px;
+    text-align: center;
+    border-radius: 15px;
+    padding-top: -8px;
+    font-size: 16px;
+    color: var(--white);
+    cursor: pointer;
+    z-index: 0;
+`;exports.Label=d;

package/dist/widgets/OrbitalSim/Observations/styles.d.ts

@@ -0,0 +1 @@
+export declare const Label: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/widgets/OrbitalSim/Observations/styles.js

@@ -0,0 +1,16 @@
+"use client";
+import r from "styled-components";
+const e = r.div`
+    background-color: rgba(0, 0, 0, .75);
+    width: 20px;
+    text-align: center;
+    border-radius: 15px;
+    padding-top: -8px;
+    font-size: 16px;
+    color: var(--white);
+    cursor: pointer;
+    z-index: 0;
+`;
+export {
+  e as Label
+};

package/dist/widgets/OrbitalSim/OrbitalSim.module.css.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="_label_8ubzd_227",l={label:e,"obs-mesh":"_obs-mesh_8ubzd_238","obs-label":"_obs-label_8ubzd_242"};exports.default=l;exports.label=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"obs-mesh":"_obs-mesh_8ubzd_238","obs-label":"_obs-label_8ubzd_242"};exports.default=e;

package/dist/widgets/OrbitalSim/OrbitalSim.module.css.js

@@ -1,9 +1,7 @@
-const b = "_label_8ubzd_227", l = {
-  label: b,
+const s = {
   "obs-mesh": "_obs-mesh_8ubzd_238",
   "obs-label": "_obs-label_8ubzd_242"
 };
 export {
-  l as default,
-  b as label
+  s as default
 };

package/dist/widgets/OrbitalSim/Orbitals/OrbitalDetails.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),n=require("react"),c=require("@rubin-epo/epo-react-lib/Button"),u=require("../Context/index.cjs"),s=require("./styles.cjs"),d=t=>t&&t.__esModule?t:{default:t},a=d(c);function h(){const{orbits:t}=u.useOrbitalSimContext(),{detailsRows:i}=t,[l,r]=n.useState(!1);return n.useEffect(()=>{i&&r(!0)},[i]),e.jsxs(e.Fragment,{children:[e.jsx(s.ButtonWrapper,{styleAs:"secondary",isInactive:i,onClick:()=>r(!l),children:"Show Details"}),e.jsx(s.SlideoutWrapper,{slideFrom:"left",isOpen:!l,children:e.jsxs(s.SlideoutPanel,{children:[e.jsx("h3",{children:"Orbital Details"}),i&&i.map(o=>e.jsxs(s.SlideoutRow,{children:[e.jsx(s.SlideoutColLeft,{children:e.jsx("p",{children:o.rowTitle})}),e.jsx(s.SlideoutColRight,{children:e.jsx("p",{children:"e.rowContent"})})]})),e.jsx(a.default,{isBlock:!0,onClick:()=>r(!l),children:"Close"})]})})]})}exports.default=h;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),n=require("react"),c=require("@rubin-epo/epo-react-lib/Button"),u=require("../Context/index.cjs"),s=require("./styles.cjs"),d=require("../styles.cjs"),a=t=>t&&t.__esModule?t:{default:t},x=a(c);function h(){const{orbits:t}=u.useOrbitalSimContext(),{detailsRows:l}=t,[i,r]=n.useState(!1);return n.useEffect(()=>{l&&r(!0)},[l]),e.jsxs(e.Fragment,{children:[e.jsx(d.GlobalStyles,{}),e.jsx(s.ButtonWrapper,{styleAs:"secondary",isInactive:l,onClick:()=>{r(!i),console.error("click!")},children:"Show Details"}),e.jsx(s.SlideoutWrapper,{slideFrom:"left",isOpen:!i,children:e.jsxs(s.SlideoutPanel,{children:[e.jsx("h3",{children:"Orbital Details"}),l&&l.map(o=>e.jsxs(s.SlideoutRow,{children:[e.jsx(s.SlideoutColLeft,{children:e.jsx("p",{children:o.rowTitle})}),e.jsx(s.SlideoutColRight,{children:e.jsx("p",{children:o.rowContent})})]})),e.jsx(x.default,{isBlock:!0,onClick:()=>r(!i),children:"Close"})]})})]})}exports.default=h;

package/dist/widgets/OrbitalSim/Orbitals/OrbitalDetails.js

@@ -1,36 +1,40 @@
 "use client";
-import { jsxs as o, Fragment as s, jsx as e } from "react/jsx-runtime";
-import { useState as c, useEffect as d } from "react";
-import a from "@rubin-epo/epo-react-lib/Button";
-import { useOrbitalSimContext as u } from "../Context/index.js";
-import { ButtonWrapper as h, SlideoutWrapper as m, SlideoutPanel as p, SlideoutRow as f, SlideoutColLeft as S, SlideoutColRight as C } from "./styles.js";
-function v() {
-  const { orbits: l } = u(), {
+import { jsxs as r, Fragment as s, jsx as e } from "react/jsx-runtime";
+import { useState as c, useEffect as a } from "react";
+import d from "@rubin-epo/epo-react-lib/Button";
+import { useOrbitalSimContext as m } from "../Context/index.js";
+import { ButtonWrapper as u, SlideoutWrapper as p, SlideoutPanel as f, SlideoutRow as h, SlideoutColLeft as S, SlideoutColRight as C } from "./styles.js";
+import { GlobalStyles as w } from "../styles.js";
+function B() {
+  const { orbits: n } = m(), {
     detailsRows: t
-  } = l, [i, r] = c(!1);
-  return d(() => {
-    t && r(!0);
-  }, [t]), /* @__PURE__ */ o(s, { children: [
+  } = n, [i, o] = c(!1);
+  return a(() => {
+    t && o(!0);
+  }, [t]), /* @__PURE__ */ r(s, { children: [
+    /* @__PURE__ */ e(w, {}),
     /* @__PURE__ */ e(
-      h,
+      u,
       {
         styleAs: "secondary",
         isInactive: t,
-        onClick: () => r(!i),
+        onClick: () => {
+          o(!i), console.error("click!");
+        },
         children: "Show Details"
       }
     ),
-    /* @__PURE__ */ e(m, { slideFrom: "left", isOpen: !i, children: /* @__PURE__ */ o(p, { children: [
+    /* @__PURE__ */ e(p, { slideFrom: "left", isOpen: !i, children: /* @__PURE__ */ r(f, { children: [
       /* @__PURE__ */ e("h3", { children: "Orbital Details" }),
-      t && t.map((n) => /* @__PURE__ */ o(f, { children: [
-        /* @__PURE__ */ e(S, { children: /* @__PURE__ */ e("p", { children: n.rowTitle }) }),
-        /* @__PURE__ */ e(C, { children: /* @__PURE__ */ e("p", { children: "e.rowContent" }) })
+      t && t.map((l) => /* @__PURE__ */ r(h, { children: [
+        /* @__PURE__ */ e(S, { children: /* @__PURE__ */ e("p", { children: l.rowTitle }) }),
+        /* @__PURE__ */ e(C, { children: /* @__PURE__ */ e("p", { children: l.rowContent }) })
       ] })),
       /* @__PURE__ */ e(
-        a,
+        d,
         {
           isBlock: !0,
-          onClick: () => r(!i),
+          onClick: () => o(!i),
           children: "Close"
         }
       )
@@ -38,5 +42,5 @@ function v() {
   ] });
 }
 export {
-  v as default
+  B as default
 };

package/dist/widgets/OrbitalSim/Orbitals/styles.cjs

@@ -1,17 +1,19 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("styled-components"),l=require("@rubin-epo/epo-react-lib/Button"),d=require("@rubin-epo/epo-react-lib/Slideout"),e=o=>o&&o.__esModule?o:{default:o},t=e(r),i=e(l),a=e(d),n=t.default(a.default)`
-    display: none;
-    opacity: 0;
-    pointer-events: none;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("styled-components"),i=require("@rubin-epo/epo-react-lib/Button"),l=require("@rubin-epo/epo-react-lib/Slideout"),o=e=>e&&e.__esModule?e:{default:e},t=o(r),d=o(i),a=o(l),n=t.default(a.default)`
+    & > div:first-of-type {
+      display: none;
+    }
 `,c=t.default.div`
   padding: 2px 4px;
   margin-top: 4px;
   font-weight: var(--medium);
   color: var(--black);
-  background-color: color-mix(in srgb, var(--white) 40%, transparent);
-  border: 1px solid color-mix(in srgb, var(--white) 40%, transparent);;
+  background-color: color-mix(in srgb, var(--white) 75%, transparent);
+  border: 1px solid color-mix(in srgb, var(--white) 75%, transparent);;
   border-radius: 5px;
   color-adjust: exact;
-`,u=t.default(i.default)`
+  z-index: 10000;
+  height: fit-content;
+`,u=t.default(d.default)`
   position: absolute;
   top: 0;
   left: 0;
@@ -33,9 +35,14 @@
   & > * + * {
     margin-block-start: 1em;
   }
+  & > h3 {
+    margin: 0px;
+    text-align: center;
+  }
 `,s=t.default.div`
   display: flex;
-  gap: 20px;
+  gap: 10px;
+  margin: 0px;
 `,x=t.default.div`
   flex: 1;
   padding: 0px 15px 0px 15px;

package/dist/widgets/OrbitalSim/Orbitals/styles.js

@@ -3,18 +3,20 @@ import o from "styled-components";
 import r from "@rubin-epo/epo-react-lib/Button";
 import t from "@rubin-epo/epo-react-lib/Slideout";
 const a = o(t)`
-    display: none;
-    opacity: 0;
-    pointer-events: none;
+    & > div:first-of-type {
+      display: none;
+    }
 `, d = o.div`
   padding: 2px 4px;
   margin-top: 4px;
   font-weight: var(--medium);
   color: var(--black);
-  background-color: color-mix(in srgb, var(--white) 40%, transparent);
-  border: 1px solid color-mix(in srgb, var(--white) 40%, transparent);;
+  background-color: color-mix(in srgb, var(--white) 75%, transparent);
+  border: 1px solid color-mix(in srgb, var(--white) 75%, transparent);;
   border-radius: 5px;
   color-adjust: exact;
+  z-index: 10000;
+  height: fit-content;
 `, l = o(r)`
   position: absolute;
   top: 0;
@@ -37,17 +39,22 @@ const a = o(t)`
   & > * + * {
     margin-block-start: 1em;
   }
+  & > h3 {
+    margin: 0px;
+    text-align: center;
+  }
 `, c = o.div`
   display: flex;
-  gap: 20px;
-`, s = o.div`
+  gap: 10px;
+  margin: 0px;
+`, x = o.div`
   flex: 1;
   padding: 0px 15px 0px 15px;
   border: 1px solid #ccc;
   background-color: #ccc;
   border-radius: 15px;
   font-weight: bold;
-`, x = o.div`
+`, s = o.div`
   flex: 1;
   padding: 0px 15px 0px 15px;
   border: 1px solid #ccc;
@@ -58,8 +65,8 @@ const a = o(t)`
 export {
   l as ButtonWrapper,
   d as Label,
-  s as SlideoutColLeft,
-  x as SlideoutColRight,
+  x as SlideoutColLeft,
+  s as SlideoutColRight,
   p as SlideoutPanel,
   c as SlideoutRow,
   a as SlideoutWrapper

package/dist/widgets/OrbitalSim/Sun.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),o=require("@react-three/drei"),t=require("./orbitalUtilities.cjs"),l=require("react-i18next"),a=require("./OrbitalSim.module.css.cjs"),n=({defaultZoom:r,zoomLevel:s})=>{const{t:i}=l.useTranslation();return e.jsxs("mesh",{position:[0,0,0],children:[e.jsx("sphereGeometry",{attach:"geometry",args:[9,16,8]}),e.jsx("meshBasicMaterial",{attach:"material",color:t.ORBITAL_COLORS.sun.objectColor}),e.jsx(o.Html,{children:e.jsx("div",{className:a.default.label,style:{fontSize:t.getLabelSize(s,r)},children:i("orbital_sim.astronomy.orbital_bodies.sun")})})]})};exports.default=n;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),o=require("@react-three/drei"),t=require("./orbitalUtilities.cjs"),n=require("react-i18next"),l=require("./styles.cjs"),a=({defaultZoom:s,zoomLevel:r})=>{const{t:i}=n.useTranslation();return e.jsxs("mesh",{position:[0,0,0],children:[e.jsx("sphereGeometry",{attach:"geometry",args:[9,16,8]}),e.jsx("meshBasicMaterial",{attach:"material",color:t.ORBITAL_COLORS.sun.objectColor}),e.jsx(o.Html,{children:e.jsx(l.SunLabel,{children:e.jsx("span",{style:{fontSize:t.getLabelSize(r,s)},children:i("orbital_sim.astronomy.orbital_bodies.sun")})})})]})};exports.default=a;

package/dist/widgets/OrbitalSim/Sun.js

@@ -1,12 +1,12 @@
 "use client";
-import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import { Html as i } from "@react-three/drei";
-import { ORBITAL_COLORS as a, getLabelSize as l } from "./orbitalUtilities.js";
-import { useTranslation as m } from "react-i18next";
-import n from "./OrbitalSim.module.css.js";
-const b = ({ defaultZoom: e, zoomLevel: o }) => {
-  const { t: r } = m();
-  return /* @__PURE__ */ s("mesh", { position: [0, 0, 0], children: [
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { Html as s } from "@react-three/drei";
+import { ORBITAL_COLORS as a, getLabelSize as m } from "./orbitalUtilities.js";
+import { useTranslation as n } from "react-i18next";
+import { SunLabel as l } from "./styles.js";
+const b = ({ defaultZoom: o, zoomLevel: r }) => {
+  const { t: e } = n();
+  return /* @__PURE__ */ i("mesh", { position: [0, 0, 0], children: [
     /* @__PURE__ */ t("sphereGeometry", { attach: "geometry", args: [9, 16, 8] }),
     /* @__PURE__ */ t(
       "meshBasicMaterial",
@@ -15,16 +15,15 @@ const b = ({ defaultZoom: e, zoomLevel: o }) => {
         color: a.sun.objectColor
       }
     ),
-    /* @__PURE__ */ t(i, { children: /* @__PURE__ */ t(
-      "div",
+    /* @__PURE__ */ t(s, { children: /* @__PURE__ */ t(l, { children: /* @__PURE__ */ t(
+      "span",
       {
-        className: n.label,
         style: {
-          fontSize: l(o, e)
+          fontSize: m(r, o)
         },
-        children: r("orbital_sim.astronomy.orbital_bodies.sun")
+        children: e("orbital_sim.astronomy.orbital_bodies.sun")
       }
-    ) })
+    ) }) })
   ] });
 };
 export {

package/dist/widgets/OrbitalSim/styles.cjs

@@ -1,4 +1,4 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("styled-components"),i=require("@react-three/fiber"),r=e=>e&&e.__esModule?e:{default:e},t=r(a),l=a.createGlobalStyle`
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("styled-components"),r=require("@react-three/fiber"),i=e=>e&&e.__esModule?e:{default:e},a=i(t),o=t.createGlobalStyle`
   :root {
     --white: #ffffff;
     --black: #000000;
@@ -27,22 +27,29 @@
 
     --siteProgressHeight: 26px;
     --siteToolbarHeight: 64px;
-    --siteHeaderHeight: var(--siteProgressHeight) + var(--siteToolbarHeight);
+    --siteHeaderHeight: calc(var(--siteProgressHeight) + var(--siteToolbarHeight));
     --pageNavHeight: 64px;
     --headingWithSpaceHeight: 90px;
-    // --tallestSquareWidget: calc(100vh - var(--pageNavHeight) - var(--siteHeaderHeight) - var(--headingWithSpaceHeight) - var(--minPadding));
+    --tallestSquareWidget: calc(100vh - var(--pageNavHeight) - var(--siteHeaderHeight) - var(--headingWithSpaceHeight) - var(--minPadding));
   }
-`,o=t.default.div`
+`,l=a.default.div`
     position: relative;
-    // height: var(--tallestSquareWidget);
-    height: 750px; // revisit this close to MVP
-    // min-height: var(--break40);
+    height: var(--tallestSquareWidget);
     min-height: 500px;
-    background-color: var(--black);
+    background-color: #000000;
     color-adjust: exact;
-`,s=t.default(i.Canvas)`
-    display: inline;
+`,n=a.default(r.Canvas)`
     position: relative;
-    height: 100%;
     z-index: 1;
-`;exports.CanvasWrapper=s;exports.GlobalStyles=l;exports.OrbitalSimWrapper=o;
+`,s=a.default.div`
+  padding: 2px 4px;
+  margin-top: 4px;
+  font-weight: var(--medium);
+  color: var(--black);
+  background-color: color-mix(in srgb, var(--white) 75%, transparent);
+  border: 1px solid color-mix(in srgb, var(--white) 75%, transparent);;
+  border-radius: 5px;
+  color-adjust: exact;
+  z-index: 10000;
+  height: fit-content;
+`;exports.CanvasWrapper=n;exports.GlobalStyles=o;exports.OrbitalSimWrapper=l;exports.SunLabel=s;

package/dist/widgets/OrbitalSim/styles.d.ts

@@ -3,3 +3,4 @@ import { Canvas } from '@react-three/fiber';
 export declare const GlobalStyles: import('react').NamedExoticComponent<import('styled-components').ExecutionProps & object>;
 export declare const OrbitalSimWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const CanvasWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('@react-three/fiber').CanvasProps, never>> & string & Omit<typeof Canvas, keyof import('react').Component<any, {}, any>>;
+export declare const SunLabel: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/widgets/OrbitalSim/styles.js

@@ -1,6 +1,6 @@
 "use client";
 import e, { createGlobalStyle as a } from "styled-components";
-import { Canvas as i } from "@react-three/fiber";
+import { Canvas as r } from "@react-three/fiber";
 const o = a`
   :root {
     --white: #ffffff;
@@ -30,27 +30,35 @@ const o = a`
 
     --siteProgressHeight: 26px;
     --siteToolbarHeight: 64px;
-    --siteHeaderHeight: var(--siteProgressHeight) + var(--siteToolbarHeight);
+    --siteHeaderHeight: calc(var(--siteProgressHeight) + var(--siteToolbarHeight));
     --pageNavHeight: 64px;
     --headingWithSpaceHeight: 90px;
-    // --tallestSquareWidget: calc(100vh - var(--pageNavHeight) - var(--siteHeaderHeight) - var(--headingWithSpaceHeight) - var(--minPadding));
+    --tallestSquareWidget: calc(100vh - var(--pageNavHeight) - var(--siteHeaderHeight) - var(--headingWithSpaceHeight) - var(--minPadding));
   }
 `, l = e.div`
     position: relative;
-    // height: var(--tallestSquareWidget);
-    height: 750px; // revisit this close to MVP
-    // min-height: var(--break40);
+    height: var(--tallestSquareWidget);
     min-height: 500px;
-    background-color: var(--black);
+    background-color: #000000;
     color-adjust: exact;
-`, s = e(i)`
-    display: inline;
+`, n = e(r)`
     position: relative;
-    height: 100%;
     z-index: 1;
+`, s = e.div`
+  padding: 2px 4px;
+  margin-top: 4px;
+  font-weight: var(--medium);
+  color: var(--black);
+  background-color: color-mix(in srgb, var(--white) 75%, transparent);
+  border: 1px solid color-mix(in srgb, var(--white) 75%, transparent);;
+  border-radius: 5px;
+  color-adjust: exact;
+  z-index: 10000;
+  height: fit-content;
 `;
 export {
-  s as CanvasWrapper,
+  n as CanvasWrapper,
   o as GlobalStyles,
-  l as OrbitalSimWrapper
+  l as OrbitalSimWrapper,
+  s as SunLabel
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rubin-epo/epo-widget-lib",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "description": "Rubin Observatory Education & Public Outreach team React scientific and educational widgets.",
   "author": "Rubin EPO",
   "license": "MIT",
@@ -102,7 +102,8 @@
   "dependencies": {
     "@react-three/drei": "^10.7.6",
     "@react-three/fiber": "9",
-    "@rubin-epo/epo-react-lib": "3.0.1",
+    "@rubin-epo/epo-react-lib": "3.0.0",
+    "@rubin-epo/epo-widget-lib": "2.0.2",
     "context-filter-polyfill": "^0.3.6",
     "d3-array": "^3.2.4",
     "d3-geo": "^3.1.1",