@rubin-epo/epo-widget-lib 0.10.4 → 1.0.0-beta.2

package/dist/IsochronePlot.js

@@ -17,12 +17,12 @@ import at from "./widgets/IsochronePlot/Controls/index.js";
 import e from "./widgets/IsochronePlot/defaults.js";
 import mt from "./widgets/IsochronePlot/A11Y/CurveFit.js";
 import { PlotWrapper as lt } from "./atomic/PlotWrapper/styles.js";
-const pt = (r) => r ? r < parseFloat(W("BREAK_PHABLET_MIN")) ? e.pointRadius.md : r < parseFloat(W("BREAK_LARGE_TABLET")) ? e.pointRadius.sm : e.pointRadius.lg : e.pointRadius.lg, kt = ({
+const pt = (r) => r ? r < parseFloat(W("BREAK_PHABLET_MIN")) ? e.pointRadius.md : r < parseFloat(W("BREAK_LARGE_TABLET")) ? e.pointRadius.sm : e.pointRadius.lg : e.pointRadius.lg, Bt = ({
   data: r,
   value: y,
-  ageLibrary: B,
-  isDisplayOnly: I = !1,
-  isLoading: k,
+  ageLibrary: I,
+  isDisplayOnly: k = !1,
+  isLoading: B,
   xAxis: D,
   yAxis: T,
   name: E,
@@ -31,7 +31,7 @@ const pt = (r) => r ? r < parseFloat(W("BREAK_PHABLET_MIN")) ? e.pointRadius.md
   const { ref: K, width: M } = Y(), {
     t: p,
     i18n: { language: h }
-  } = X(), [j, w] = Q(!0), x = U(), s = !k && !j, C = { top: 0, right: 0, bottom: 20, left: 20 }, { width: c, height: d } = e, { ages: b = {} } = B, t = Object.keys(b).sort(
+  } = X(), [j, w] = Q(!0), x = U(), s = !B && !j, C = { top: 0, right: 0, bottom: 20, left: 20 }, { width: c, height: d } = e, { ages: b = {} } = I, t = Object.keys(b).sort(
     (i, m) => parseFloat(i) - parseFloat(m)
   ).map(parseFloat), H = f(D, {
     ...e.xAxis,
@@ -163,11 +163,11 @@ const pt = (r) => r ? r < parseFloat(W("BREAK_PHABLET_MIN")) ? e.pointRadius.md
         }
       ),
       isLoading: !s,
-      isDisplayOnly: I,
+      isDisplayOnly: k,
       controlsId: x
     }
   );
 };
 export {
-  kt as default
+  Bt as default
 };

package/dist/SupernovaThreeVector.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),B=require("react"),O=require("react-i18next"),l=require("d3-array"),z=require("@rubin-epo/epo-react-lib/HorizontalSlider"),d=require("./lib/utils.cjs"),E=require("./widgets/SupernovaThreeVector/LiveLabel/index.cjs"),r=require("./widgets/SupernovaThreeVector/styles.cjs"),N=t=>t&&t.__esModule?t:{default:t},P=N(z),k=({histogramData:t,userData:C,binnedImages:T,step:u=100})=>{const{t:x}=O.useTranslation(),i={top:30,bottom:30,left:50,right:0},m="skyMapDescription",o=600,p=o/1.6,q=[i.left,o-i.right],R=[p-i.bottom,i.top],b=6,h=7,v=0,L=l.max(t,e=>e.value)||Math.max(...t.map(({value:e})=>e)),a=l.min(t,e=>e.bin)||0,c=l.max(t,e=>e.bin)||Math.max(...t.map(({bin:e})=>e)),y=l.nice(a,c,b),g=l.nice(v,L||v,h),j=d.getLinearScale(y,q),I=d.getLinearScale(g,R),[s,S]=B.useState([a,c]),f=15,$=`calc(${i.left/o*100}% - ${f}px)`,V=`calc(${(1-j(c)/o)*100}% - ${f}px)`,_=t.map(({bin:e})=>d.between(e,s[0],s[1])),M=C.filter(({distance:e})=>d.between(e,s[0],s[1]+u)),A=t.reduce((e,{value:H},w)=>_[w]?e+H:e,0);return n.jsxs(r.ThreeVectorContainer,{ratio:"landscape",smallScreenRatio:"portrait",children:[n.jsxs(r.ThreeVectorLayout,{children:[n.jsxs(r.HistogramContainer,{children:[n.jsx(r.ChartTitle,{children:x("supernova_three_vector.histogram.title")}),n.jsx(r.Histogram,{data:t,activeRange:s,xDomain:y,yDomain:g,xScale:j,yScale:I,yTicks:h,xTicks:b,step:u,margin:i,width:o,height:p})]}),n.jsx(r.SliderContainer,{style:{paddingInlineStart:$,paddingInlineEnd:V},children:n.jsx(P.default,{min:a,max:c,step:u,value:s,ariaValuetext:({valueNow:e})=>x("supernova_three_vector.slider.valueLabel",{value:e}),color:"var(--turquoise85,#12726D)",minLabel:`${a} kpc`,maxLabel:`${c} kpc`,onChangeCallback:e=>Array.isArray(e)&&S(e)})}),n.jsxs(r.SkymapContainer,{children:[n.jsx(r.ChartTitle,{children:x("supernova_three_vector.skymap.title")}),n.jsx(r.Skymap,{objects:M,images:T,describedById:m,visibleImages:_})]}),n.jsx(r.ResetButton,{onResetCallback:()=>S([a,c])})]}),n.jsx(E.default,{id:m,objects:M,min:s[0],max:s[1]+u,supernovaCount:A})]})};k.displayName="Widgets.SupernovaThreeVector";exports.default=k;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),q=require("react"),D=require("react-i18next"),l=require("d3-array"),E=require("@rubin-epo/epo-react-lib/HorizontalSlider"),d=require("./lib/utils.cjs"),N=require("./widgets/SupernovaThreeVector/LiveLabel/index.cjs"),r=require("./widgets/SupernovaThreeVector/styles.cjs"),P=n=>n&&n.__esModule?n:{default:n},U=P(E),R=({histogramData:n,userData:k,binnedImages:I,step:u=100})=>{const{t:x}=D.useTranslation(),h=q.useId(),i={top:30,bottom:30,left:50,right:0},o=600,y=o/1.6,L=[i.left,o-i.right],V=[y-i.bottom,i.top],g=6,p=7,v=n.map(({value:e})=>e),b=0,$=l.max(v)||Math.max(...v),m=n.map(({bin:e})=>e),c=l.min(m)||0,a=l.max(m)||Math.max(...m),j=l.nice(c,a,g),S=l.nice(b,$||b,p),f=d.getLinearScale(j,L),A=d.getLinearScale(S,V),[s,M]=q.useState([c,a]),_=15,H=`calc(${i.left/o*100}% - ${_}px)`,w=`calc(${(1-f(a)/o)*100}% - ${_}px)`,C=n.map(({bin:e})=>d.between(e,s[0],s[1])),T=k.filter(({distance:e})=>d.between(e,s[0],s[1]+u)),B=n.reduce((e,{value:O},z)=>C[z]?e+O:e,0);return t.jsxs(r.ThreeVectorContainer,{ratio:"landscape",smallScreenRatio:"portrait",children:[t.jsxs(r.ThreeVectorLayout,{children:[t.jsxs(r.HistogramContainer,{children:[t.jsx(r.ChartTitle,{children:x("supernova_three_vector.histogram.title")}),t.jsx(r.Histogram,{data:n,activeRange:s,xDomain:j,yDomain:S,xScale:f,yScale:A,yTicks:p,xTicks:g,step:u,margin:i,width:o,height:y})]}),t.jsx(r.SliderContainer,{style:{paddingInlineStart:H,paddingInlineEnd:w},children:t.jsx(U.default,{min:c,max:a,step:u,value:s,ariaValuetext:({valueNow:e})=>x("supernova_three_vector.slider.valueLabel",{value:e}),color:"var(--turquoise85,#12726D)",minLabel:`${c} Mlyr`,maxLabel:`${a} Mlyr`,onChangeCallback:e=>Array.isArray(e)&&M(e)})}),t.jsxs(r.SkymapContainer,{children:[t.jsx(r.ChartTitle,{children:x("supernova_three_vector.skymap.title")}),t.jsx(r.Skymap,{objects:T,images:I,describedById:h,visibleImages:C})]}),t.jsx(r.ResetButton,{onResetCallback:()=>M([c,a])})]}),t.jsx(N.default,{id:h,objects:T,min:s[0],max:s[1]+u,supernovaCount:B})]})};R.displayName="Widgets.SupernovaThreeVector";exports.default=R;

package/dist/SupernovaThreeVector.js

@@ -1,105 +1,105 @@
 "use client";
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { useState as z } from "react";
-import { useTranslation as E } from "react-i18next";
-import { max as C, min as N, nice as M } from "d3-array";
-import U from "@rubin-epo/epo-react-lib/HorizontalSlider";
-import { getLinearScale as L, between as R } from "./lib/utils.js";
-import W from "./widgets/SupernovaThreeVector/LiveLabel/index.js";
-import { ThreeVectorContainer as F, ThreeVectorLayout as G, HistogramContainer as J, ChartTitle as T, Histogram as K, SliderContainer as P, SkymapContainer as Q, Skymap as X, ResetButton as Y } from "./widgets/SupernovaThreeVector/styles.js";
-const Z = ({
-  histogramData: t,
+import { jsxs as l, jsx as n } from "react/jsx-runtime";
+import { useId as N, useState as U } from "react";
+import { useTranslation as W } from "react-i18next";
+import { max as R, min as D, nice as T } from "d3-array";
+import F from "@rubin-epo/epo-react-lib/HorizontalSlider";
+import { getLinearScale as k, between as V } from "./lib/utils.js";
+import G from "./widgets/SupernovaThreeVector/LiveLabel/index.js";
+import { ThreeVectorContainer as J, ThreeVectorLayout as K, HistogramContainer as P, ChartTitle as I, Histogram as Q, SliderContainer as X, SkymapContainer as Y, Skymap as Z, ResetButton as ee } from "./widgets/SupernovaThreeVector/styles.js";
+const te = ({
+  histogramData: i,
   userData: _,
   binnedImages: $,
-  step: s = 100
+  step: c = 100
 }) => {
-  const { t: m } = E(), o = {
+  const { t: m } = W(), p = N(), r = {
     top: 30,
     bottom: 30,
     left: 50,
     right: 0
-  }, d = "skyMapDescription", c = 600, p = c / 1.6, j = [o.left, c - o.right], I = [p - o.bottom, o.top], u = 6, x = 7, h = 0, V = C(t, (e) => e.value) || Math.max(...t.map(({ value: e }) => e)), a = N(t, (e) => e.bin) || 0, i = C(t, (e) => e.bin) || Math.max(...t.map(({ bin: e }) => e)), v = M(a, i, u), b = M(h, V || h, x), f = L(v, j), A = L(b, I), [n, y] = z([a, i]), g = 15, B = `calc(${o.left / c * 100}% - ${g}px)`, H = `calc(${(1 - f(i) / c) * 100}% - ${g}px)`, S = t.map(
-    ({ bin: e }) => R(e, n[0], n[1])
-  ), k = _.filter(
-    ({ distance: e }) => R(e, n[0], n[1] + s)
-  ), w = t.reduce((e, { value: O }, q) => S[q] ? e + O : e, 0);
-  return /* @__PURE__ */ l(F, { ratio: "landscape", smallScreenRatio: "portrait", children: [
-    /* @__PURE__ */ l(G, { children: [
-      /* @__PURE__ */ l(J, { children: [
-        /* @__PURE__ */ r(T, { children: m("supernova_three_vector.histogram.title") }),
-        /* @__PURE__ */ r(
-          K,
+  }, a = 600, u = a / 1.6, j = [r.left, a - r.right], A = [u - r.bottom, r.top], h = 6, x = 7, y = i.map(({ value: e }) => e), f = 0, B = R(y) || Math.max(...y), d = i.map(({ bin: e }) => e), s = D(d) || 0, o = R(d) || Math.max(...d), g = T(s, o, h), v = T(f, B || f, x), b = k(g, j), H = k(v, A), [t, S] = U([s, o]), M = 15, w = `calc(${r.left / a * 100}% - ${M}px)`, O = `calc(${(1 - b(o) / a) * 100}% - ${M}px)`, C = i.map(
+    ({ bin: e }) => V(e, t[0], t[1])
+  ), L = _.filter(
+    ({ distance: e }) => V(e, t[0], t[1] + c)
+  ), q = i.reduce((e, { value: z }, E) => C[E] ? e + z : e, 0);
+  return /* @__PURE__ */ l(J, { ratio: "landscape", smallScreenRatio: "portrait", children: [
+    /* @__PURE__ */ l(K, { children: [
+      /* @__PURE__ */ l(P, { children: [
+        /* @__PURE__ */ n(I, { children: m("supernova_three_vector.histogram.title") }),
+        /* @__PURE__ */ n(
+          Q,
           {
-            data: t,
-            activeRange: n,
-            xDomain: v,
-            yDomain: b,
-            xScale: f,
-            yScale: A,
+            data: i,
+            activeRange: t,
+            xDomain: g,
+            yDomain: v,
+            xScale: b,
+            yScale: H,
             yTicks: x,
-            xTicks: u,
-            step: s,
-            margin: o,
-            width: c,
-            height: p
+            xTicks: h,
+            step: c,
+            margin: r,
+            width: a,
+            height: u
           }
         )
       ] }),
-      /* @__PURE__ */ r(
-        P,
+      /* @__PURE__ */ n(
+        X,
         {
           style: {
-            paddingInlineStart: B,
-            paddingInlineEnd: H
+            paddingInlineStart: w,
+            paddingInlineEnd: O
           },
-          children: /* @__PURE__ */ r(
-            U,
+          children: /* @__PURE__ */ n(
+            F,
             {
-              min: a,
-              max: i,
-              step: s,
-              value: n,
+              min: s,
+              max: o,
+              step: c,
+              value: t,
               ariaValuetext: ({ valueNow: e }) => m("supernova_three_vector.slider.valueLabel", { value: e }),
               color: "var(--turquoise85,#12726D)",
-              minLabel: `${a} kpc`,
-              maxLabel: `${i} kpc`,
-              onChangeCallback: (e) => Array.isArray(e) && y(e)
+              minLabel: `${s} Mlyr`,
+              maxLabel: `${o} Mlyr`,
+              onChangeCallback: (e) => Array.isArray(e) && S(e)
             }
           )
         }
       ),
-      /* @__PURE__ */ l(Q, { children: [
-        /* @__PURE__ */ r(T, { children: m("supernova_three_vector.skymap.title") }),
-        /* @__PURE__ */ r(
-          X,
+      /* @__PURE__ */ l(Y, { children: [
+        /* @__PURE__ */ n(I, { children: m("supernova_three_vector.skymap.title") }),
+        /* @__PURE__ */ n(
+          Z,
           {
-            objects: k,
+            objects: L,
             images: $,
-            describedById: d,
-            visibleImages: S
+            describedById: p,
+            visibleImages: C
           }
         )
       ] }),
-      /* @__PURE__ */ r(
-        Y,
+      /* @__PURE__ */ n(
+        ee,
         {
-          onResetCallback: () => y([a, i])
+          onResetCallback: () => S([s, o])
         }
       )
     ] }),
-    /* @__PURE__ */ r(
-      W,
+    /* @__PURE__ */ n(
+      G,
       {
-        id: d,
-        objects: k,
-        min: n[0],
-        max: n[1] + s,
-        supernovaCount: w
+        id: p,
+        objects: L,
+        min: t[0],
+        max: t[1] + c,
+        supernovaCount: q
       }
     )
   ] });
 };
-Z.displayName = "Widgets.SupernovaThreeVector";
+te.displayName = "Widgets.SupernovaThreeVector";
 export {
-  Z as default
+  te as default
 };

package/dist/atomic/Blinker/Blinker.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),B=require("react"),A=require("../../lib/utils.cjs"),C=require("../../hooks/useInterval.cjs"),M=require("../ImageStack/index.cjs"),l=require("./styles.cjs"),h=({images:t=[],activeIndex:i=0,autoplay:g=!0,loop:j=!0,interval:p=200,blinkCallback:n,loadedCallback:u,className:q,showControls:y=!0,children:S})=>{const[c,a]=B.useState(g),[d,v]=B.useState(!1),r=t.length>1,x=(e=0)=>{const m=t.length-1;return A.getClampedArrayIndex(i+e,m)},f=()=>{if(r){const e=x(1);j===!1&&e===t.length-1&&o(),n&&n(e)}},o=()=>{a(!1)},k=()=>{a(e=>!e)},I=()=>{o(),f()},P=()=>{o(),n&&n(x(-1))};return C.default(f,r&&d&&c?p:null),s.jsxs(l.BlinkerContainer,{className:q,children:[s.jsx(M.default,{loadCallback:()=>{v(!0),u&&u()},visible:i,images:t}),s.jsxs(l.ControlsContainer,{children:[r&&y&&s.jsx(l.BlinkerControls,{isDisabled:!d,playing:c,handleStartStop:k,handleNext:I,handlePrevious:P}),S]})]})};h.displayName="Atomic.Blinker";const N=h;exports.default=N;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),h=require("react"),C=require("../../lib/utils.cjs"),M=require("../../hooks/useInterval.cjs"),N=require("../ImageStack/index.cjs"),o=require("./styles.cjs"),B=({images:n=[],activeIndex:i=0,autoplay:g=!0,loop:j=!0,interval:p=200,blinkCallback:s,loadedCallback:u,className:q,showControls:y=!0,children:S,extraControls:v})=>{const[c,a]=h.useState(g),[d,k]=h.useState(!1),r=n.length>1,x=(e=0)=>{const A=n.length-1;return C.getClampedArrayIndex(i+e,A)},f=()=>{if(r){const e=x(1);j===!1&&e===n.length-1&&l(),s&&s(e)}},l=()=>{a(!1)},m=()=>{a(e=>!e)},I=()=>{l(),f()},P=()=>{l(),s&&s(x(-1))};return M.default(f,r&&d&&c?p:null),t.jsxs(o.BlinkerContainer,{className:q,children:[t.jsx(N.default,{loadCallback:()=>{k(!0),u&&u()},visible:i,images:n}),S,t.jsx(o.ControlsContainer,{children:r&&y&&t.jsxs(t.Fragment,{children:[t.jsx(o.BlinkerControls,{isDisabled:!d,playing:c,handleStartStop:m,handleNext:I,handlePrevious:P}),v]})})]})};B.displayName="Atomic.Blinker";const _=B;exports.default=_;

package/dist/atomic/Blinker/Blinker.d.ts

@@ -1,4 +1,4 @@
-import { FunctionComponent, PropsWithChildren } from 'react';
+import { FunctionComponent, PropsWithChildren, ReactNode } from 'react';
 import { ImageShape } from '@rubin-epo/epo-react-lib/Image';
 
 export interface BlinkerProps {
@@ -11,6 +11,7 @@ export interface BlinkerProps {
     loadedCallback?: () => void;
     className?: string;
     showControls?: boolean;
+    extraControls?: ReactNode;
 }
 declare const Blinker: FunctionComponent<PropsWithChildren<BlinkerProps>>;
 export default Blinker;

package/dist/atomic/Blinker/Blinker.js

@@ -1,67 +1,69 @@
 "use client";
-import { jsxs as f, jsx as p } from "react/jsx-runtime";
+import { jsxs as p, jsx as s, Fragment as P } from "react/jsx-runtime";
 import { useState as u } from "react";
-import { getClampedArrayIndex as N } from "../../lib/utils.js";
-import P from "../../hooks/useInterval.js";
-import D from "../ImageStack/index.js";
-import { BlinkerContainer as L, ControlsContainer as $, BlinkerControls as q } from "./styles.js";
-const B = ({
+import { getClampedArrayIndex as D } from "../../lib/utils.js";
+import F from "../../hooks/useInterval.js";
+import L from "../ImageStack/index.js";
+import { BlinkerContainer as $, ControlsContainer as q, BlinkerControls as w } from "./styles.js";
+const h = ({
   images: n = [],
-  activeIndex: s = 0,
-  autoplay: h = !0,
+  activeIndex: l = 0,
+  autoplay: B = !0,
   loop: x = !0,
   interval: g = 200,
   blinkCallback: e,
-  loadedCallback: l,
+  loadedCallback: i,
   className: k,
   showControls: y = !0,
-  children: I
+  children: I,
+  extraControls: S
 }) => {
-  const [i, a] = u(h), [c, S] = u(!1), o = n.length > 1, d = (t = 0) => {
-    const C = n.length - 1;
-    return N(s + t, C);
-  }, m = () => {
-    if (o) {
-      const t = d(1);
-      x === !1 && t === n.length - 1 && r(), e && e(t);
+  const [a, c] = u(B), [d, j] = u(!1), r = n.length > 1, m = (t = 0) => {
+    const N = n.length - 1;
+    return D(l + t, N);
+  }, f = () => {
+    if (r) {
+      const t = m(1);
+      x === !1 && t === n.length - 1 && o(), e && e(t);
     }
-  }, r = () => {
-    a(!1);
-  }, j = () => {
-    a((t) => !t);
+  }, o = () => {
+    c(!1);
   }, v = () => {
-    r(), m();
+    c((t) => !t);
   }, A = () => {
-    r(), e && e(d(-1));
+    o(), f();
+  }, C = () => {
+    o(), e && e(m(-1));
   };
-  return P(m, o && c && i ? g : null), /* @__PURE__ */ f(L, { className: k, children: [
-    /* @__PURE__ */ p(
-      D,
+  return F(f, r && d && a ? g : null), /* @__PURE__ */ p($, { className: k, children: [
+    /* @__PURE__ */ s(
+      L,
       {
         loadCallback: () => {
-          S(!0), l && l();
+          j(!0), i && i();
         },
-        visible: s,
+        visible: l,
         images: n
       }
     ),
-    /* @__PURE__ */ f($, { children: [
-      o && y && /* @__PURE__ */ p(
-        q,
+    I,
+    /* @__PURE__ */ s(q, { children: r && y && /* @__PURE__ */ p(P, { children: [
+      /* @__PURE__ */ s(
+        w,
         {
-          isDisabled: !c,
-          playing: i,
-          handleStartStop: j,
-          handleNext: v,
-          handlePrevious: A
+          isDisabled: !d,
+          playing: a,
+          handleStartStop: v,
+          handleNext: A,
+          handlePrevious: C
         }
       ),
-      I
-    ] })
+      S
+    ] }) })
   ] });
 };
-B.displayName = "Atomic.Blinker";
-const J = B;
+h.displayName = "Atomic.Blinker";
+const M = h;
 export {
-  J as default
+  M as default
 };

package/dist/charts/Base/styles.cjs

@@ -28,18 +28,20 @@
   grid-area: filler;
   width: var(--label-height);
 `,d=e.default.svg`
+  font-size: 1em;
   grid-area: chart;
   max-width: 100%;
   max-height: 100%;
   aspect-ratio: var(--aspect-ratio);
+  overflow: visible;
   z-index: 1;
-`,c=e.default.div`
+`,o=e.default.div`
   display: flex;
   align-items: center;
   grid-area: title;
   height: var(--label-height);
   padding-inline: var(--label-gutter);
-`,o=e.default.h3`
+`,c=e.default.h3`
   margin: 0;
 `,s=e.default.div`
   width: var(--label-height);
@@ -56,4 +58,4 @@
   height: 100%;
   width: 100%;
   font-size: 80%;
-`;exports.ChartContainer=r;exports.Filler=n;exports.HorizontalLabelWrapper=g;exports.Label=h;exports.SVG=d;exports.Title=o;exports.TitleWrapper=c;exports.VerticalLabelWrapper=s;
+`;exports.ChartContainer=r;exports.Filler=n;exports.HorizontalLabelWrapper=g;exports.Label=h;exports.SVG=d;exports.Title=c;exports.TitleWrapper=o;exports.VerticalLabelWrapper=s;

package/dist/charts/Base/styles.js

@@ -1,7 +1,7 @@
 "use client";
 import e from "styled-components";
 import { token as t } from "@rubin-epo/epo-react-lib/styles";
-const l = e.div`
+const a = e.div`
   --label-height: 2em;
   --label-gutter: calc(var(--label-height) / 2);
 
@@ -34,28 +34,30 @@ const r = e.div`
   grid-area: filler;
   width: var(--label-height);
 `, n = e.svg`
+  font-size: 1em;
   grid-area: chart;
   max-width: 100%;
   max-height: 100%;
   aspect-ratio: var(--aspect-ratio);
+  overflow: visible;
   z-index: 1;
-`, c = e.div`
+`, o = e.div`
   display: flex;
   align-items: center;
   grid-area: title;
   height: var(--label-height);
   padding-inline: var(--label-gutter);
-`, o = e.h3`
+`, c = e.h3`
   margin: 0;
 `, h = e.div`
   width: var(--label-height);
   writing-mode: vertical-rl;
   transform: rotate(180deg);
   grid-area: vertical-label;
-`, g = e.div`
+`, s = e.div`
   height: var(--label-height);
   grid-area: horizontal-label;
-`, d = e.span`
+`, g = e.span`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -64,12 +66,12 @@ const r = e.div`
   font-size: 80%;
 `;
 export {
-  l as ChartContainer,
+  a as ChartContainer,
   r as Filler,
-  g as HorizontalLabelWrapper,
-  d as Label,
+  s as HorizontalLabelWrapper,
+  g as Label,
   n as SVG,
-  o as Title,
-  c as TitleWrapper,
+  c as Title,
+  o as TitleWrapper,
   h as VerticalLabelWrapper
 };

package/dist/charts/Readout/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),u=require("@rubin-epo/epo-react-lib/styles"),d=require("../Viewport/index.cjs"),y=require("../ForeignObject/index.cjs"),o=require("./styles.cjs"),j=(n="")=>{const r=["top","right"],a=["center","center"],s=n?[...n.split(" "),...a].slice(0,2):r,e={justifyContent:null,alignItems:null};return s.forEach(i=>{switch(i){case"center":e.alignItems=e.alignItems??"center",e.justifyContent=e.justifyContent??"center";break;case"top":e.alignItems="start";break;case"right":e.justifyContent="end";break;case"bottom":e.alignItems="end";break;case"left":e.justifyContent="start";break}}),e},c=({className:n,children:r,position:a,viewport:s,forIds:e,forScreenreaders:i})=>{const l=t.jsx(y.default,{children:t.jsx(o.DisplayContainer,{style:j(a),children:t.jsxs(o.Display,{form:Array.isArray(e)?e.join(" "):e,className:n,children:[t.jsx("span",{"aria-hidden":!!i,children:r}),t.jsx(u.ScreenreaderText,{children:i})]})})});return s?t.jsx(d.default,{...s,children:l}):l};c.displayName="Charts.Readout";exports.default=c;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),u=require("@rubin-epo/epo-react-lib/styles"),d=require("../Viewport/index.cjs"),y=require("../ForeignObject/index.cjs");require("../ScatterPlot/index.cjs");const o=require("./styles.cjs"),j=(n="")=>{const r=["top","right"],a=["center","center"],s=n?[...n.split(" "),...a].slice(0,2):r,e={justifyContent:null,alignItems:null};return s.forEach(i=>{switch(i){case"center":e.alignItems=e.alignItems??"center",e.justifyContent=e.justifyContent??"center";break;case"top":e.alignItems="start";break;case"right":e.justifyContent="end";break;case"bottom":e.alignItems="end";break;case"left":e.justifyContent="start";break}}),e},c=({className:n,children:r,position:a,viewport:s,forIds:e,forScreenreaders:i})=>{const l=t.jsx(y.default,{children:t.jsx(o.DisplayContainer,{style:j(a),children:t.jsxs(o.Display,{form:Array.isArray(e)?e.join(" "):e,className:n,children:[t.jsx("span",{"aria-hidden":!!i,children:r}),t.jsx(u.ScreenreaderText,{children:i})]})})});return s?t.jsx(d.default,{...s,children:l}):l};c.displayName="Charts.Readout";exports.default=c;

package/dist/charts/Readout/index.js

@@ -2,9 +2,10 @@ import { jsx as e, jsxs as l } from "react/jsx-runtime";
 import { ScreenreaderText as c } from "@rubin-epo/epo-react-lib/styles";
 import m from "../Viewport/index.js";
 import f from "../ForeignObject/index.js";
+import "../ScatterPlot/index.js";
 import { DisplayContainer as u, Display as d } from "./styles.js";
 const p = (n = "") => {
-  const s = ["top", "right"], o = ["center", "center"], i = n ? [...n.split(" "), ...o].slice(0, 2) : s, t = {
+  const o = ["top", "right"], s = ["center", "center"], i = n ? [...n.split(" "), ...s].slice(0, 2) : o, t = {
     justifyContent: null,
     alignItems: null
   };
@@ -29,19 +30,19 @@ const p = (n = "") => {
   }), t;
 }, y = ({
   className: n,
-  children: s,
-  position: o,
+  children: o,
+  position: s,
   viewport: i,
   forIds: t,
   forScreenreaders: r
 }) => {
-  const a = /* @__PURE__ */ e(f, { children: /* @__PURE__ */ e(u, { style: p(o), children: /* @__PURE__ */ l(
+  const a = /* @__PURE__ */ e(f, { children: /* @__PURE__ */ e(u, { style: p(s), children: /* @__PURE__ */ l(
     d,
     {
       form: Array.isArray(t) ? t.join(" ") : t,
       className: n,
       children: [
-        /* @__PURE__ */ e("span", { "aria-hidden": !!r, children: s }),
+        /* @__PURE__ */ e("span", { "aria-hidden": !!r, children: o }),
         /* @__PURE__ */ e(c, { children: r })
       ]
     }

package/dist/charts/ScatterPlot/index.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),J=require("react"),K=require("../XAxis/index.cjs"),Q=require("../YAxis/index.cjs"),$=require("../Guidelines/index.cjs"),U=require("../Points/index.cjs"),V=require("../Tooltip/index.cjs"),X=require("../ClippingContainer/index.cjs"),R=require("../hooks/useAxis.cjs"),Y=require("./styles.cjs"),H=require("../defaults.cjs"),Z=require("../canvas/Points/index.cjs"),w={svg:U.default,canvas:Z.default},M=({data:B,className:C,xAxis:c,yAxis:l,width:d,height:u,title:D,activePointId:T,margins:p,tooltip:a,onLoadedCallback:z,renderer:E="svg",plotChildren:y})=>{const[q,h]=J.useState(),{label:O,points:x}=B,o={...H.default.margins,...p},e=typeof q<"u"?x[q]:x.find(({id:v})=>v===T),f=[0+o.left,d-o.right],b=[u-o.bottom,0+o.top],[r,j,t]=R.default({...c,range:f}),[i,S,s]=R.default({...l,range:b}),m=s(i[0]),g=t(r[0]),I=s(i[1]),_=t(r[1]),P="x-axis-label",k="y-axis-label",N=Math.abs(f[1]-f[0]),W=Math.abs(b[1]-b[0]),F=w[E],L=n.jsx(F,{data:x,onHoverCallback:a?v=>h(v):void 0,onHoverOutCallback:a?()=>h(void 0):void 0,width:d,height:u,xScale:t,yScale:s,label:O,onLoadedCallback:z}),G={Data:L,xScale:t,yScale:s,yStart:m,yEnd:I,xStart:g,xEnd:_,yDomain:i,xDomain:r};return n.jsxs(Y.Chart,{verticalLabel:l.label,verticalLabelId:k,horizontalLabel:c.label,horizontalLabelId:P,className:C,width:d,height:u,title:D,children:[n.jsx(Q.default,{ticks:S,x:g,labelledById:k,yDomain:i,yScale:s}),n.jsxs(X.default,{x:g,y:I,width:N,height:W,children:[c.guidelines&&n.jsx($.default,{guides:j.length,direction:"vertical",xDomain:r,yDomain:i,xScale:t,yScale:s}),l.guidelines&&n.jsx($.default,{guides:S.length,xDomain:r,yDomain:i,xScale:t,yScale:s}),y?y(G):L]}),n.jsx(K.default,{ticks:j,y:m,labelledById:P,xDomain:r,xScale:t}),a&&n.jsxs(V.default,{x:e?t(e.x):void 0,y:e?s(e.y):void 0,visible:!!e,offset:H.default.pointRadius,children:[e&&typeof a=="function"&&a(e),e&&typeof a=="string"&&a]})]})};M.displayName="Charts.ScatterPlot";const A=M;exports.default=A;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),J=require("react"),K=require("../XAxis/index.cjs"),Q=require("../YAxis/index.cjs"),$=require("../Guidelines/index.cjs"),U=require("../Points/index.cjs"),V=require("../Tooltip/index.cjs"),X=require("../ClippingContainer/index.cjs"),R=require("../hooks/useAxis.cjs"),Y=require("./styles.cjs"),H=require("../defaults.cjs"),Z=require("../canvas/Points/index.cjs"),w=require("../../lib/utils.cjs"),A={svg:U.default,canvas:Z.default},M=({data:C,className:D,xAxis:l,yAxis:c,width:d,height:u,title:T,activePointId:p,margins:z,tooltip:a,onLoadedCallback:B,renderer:E="svg",plotChildren:y})=>{const[q,h]=J.useState(),{label:O,points:x}=C,o={...H.default.margins,...z},e=typeof q<"u"?x[q]:x.find(({id:v})=>v===p),f=[0+o.left,d-o.right],b=[u-o.bottom,0+o.top],[i,j,t]=R.default({...l,range:f}),[r,S,s]=R.default({...c,range:b}),m=s(r[0]),g=t(i[0]),I=s(r[1]),_=t(i[1]),k="x-axis-label",L="y-axis-label",N=Math.abs(f[1]-f[0]),W=Math.abs(b[1]-b[0]),F=A[E],P=n.jsx(F,{data:x,onHoverCallback:a?v=>h(v):void 0,onHoverOutCallback:a?()=>h(void 0):void 0,width:d,height:u,xScale:t,yScale:s,label:O,onLoadedCallback:B}),G={Data:P,xScale:t,yScale:s,yStart:m,yEnd:I,xStart:g,xEnd:_,yDomain:r,xDomain:i};return n.jsxs(Y.Chart,{verticalLabel:c.label,verticalLabelId:L,horizontalLabel:l.label,horizontalLabelId:k,className:D,width:d,height:u,title:T,children:[n.jsx(Q.default,{ticks:S,x:g,labelledById:L,yDomain:r,yScale:s}),n.jsxs(X.default,{x:g,y:I,width:N,height:W,children:[l.guidelines&&n.jsx($.default,{guides:j.length,direction:"vertical",xDomain:i,yDomain:r,xScale:t,yScale:s}),c.guidelines&&n.jsx($.default,{guides:S.length,xDomain:i,yDomain:r,xScale:t,yScale:s}),y?y(G):P]}),n.jsx(K.default,{ticks:j,y:m,labelledById:k,xDomain:i,xScale:t}),a&&!w.isSafari()&&n.jsxs(V.default,{x:e?t(e.x):void 0,y:e?s(e.y):void 0,visible:!!e,offset:H.default.pointRadius,children:[e&&typeof a=="function"&&a(e),e&&typeof a=="string"&&a]})]})};M.displayName="Charts.ScatterPlot";exports.default=M;