@rubin-epo/epo-widget-lib 0.5.1-alpha.1 → 0.6.0

package/dist/CameraFilter.d.ts

@@ -0,0 +1,3 @@
+export * from './widgets/CameraFilter/CameraFilter'
+import _default from './widgets/CameraFilter/CameraFilter'
+export default _default

package/dist/ColorTool.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),v=require("react-i18next"),h=require("./widgets/ColorTool/utilities.cjs"),t=require("./widgets/ColorTool/styles.cjs"),B=require("@rubin-epo/epo-react-lib/Select"),I=require("./widgets/ColorTool/FilterControls/FilterControls.cjs"),N=require("./widgets/ColorTool/ImageComposite/ImageComposite.cjs"),R=l=>l&&l.__esModule?l:{default:l},M=R(B),g=({data:l,objectOptions:m=[],selectedData:s,colorOptions:T=[],selectionCallback:n,isDisabled:j=!1,isDisplayOnly:a=!1,hideImage:C=!1,hideSubtitle:L=!1})=>{const _=r=>{const{label:i}=r,{filters:b}=s,q=b.map(x=>x.label===i?r:x);return n&&n({...s,filters:q})},y=r=>{const{value:i}=r.target;return n&&n({name:i,filters:h.getDataFiltersByName(l,i)})},p=()=>n&&n({...s,filters:h.resetFilters(s.filters)}),d=l.length>1,{t:o}=v.useTranslation(),F=o("colorTool.actions.select_an_object"),{filters:u,name:c,caption:f}=s,S=h.getCategoryName(l,c);return e.jsx(t.WidgetContainer,{children:e.jsxs(t.WidgetLayout,{style:{"--controls-row":a?"'image image'":void 0},children:[c&&(a||d)&&e.jsxs(t.Subtitle,{children:[d&&e.jsxs(e.Fragment,{children:[e.jsx("dt",{children:o("colorTool.labels.object_type")}),e.jsx("dd",{children:S})]}),!L&&e.jsxs(e.Fragment,{children:[e.jsx("dt",{children:o("colorTool.labels.object",{context:d?"selected":!1})}),e.jsx("dd",{children:c})]})]}),!a&&e.jsxs(t.ControlsContainer,{children:[d&&e.jsx(t.SelectionContainer,{children:e.jsx(M.default,{id:"astroObjectSelector",placeholder:F,options:m,onChange:y,value:c,disabled:j})}),u&&e.jsxs(e.Fragment,{children:[e.jsx(t.ToolsHeader,{id:"filterLabel",children:o("colorTool.labels.filter")}),e.jsx(t.ToolsHeader,{id:"colorLabel",children:o("colorTool.labels.color")}),e.jsx(t.ToolsHeader,{id:"intensityLabel",children:o("colorTool.labels.color_intensity")})]}),u&&u.map(r=>{const{label:i,isDisabled:b}=r;return e.jsx(I.default,{filter:r,isDisabled:j||b,colorOptions:T,onChangeFilterCallback:_,buttonLabelledById:"filterLabel",selectLabelledById:"colorLabel",sliderLabelledById:"intensityLabel"},`filter-${i}`)})]}),!C&&e.jsx(N.default,{filters:u}),c&&!a&&e.jsx(t.ResetButton,{disabled:j||!h.isResetButtonActive(s),onClick:p,icon:"RotateLeftWithCenter",children:o("colorTool.actions.reset")}),f&&e.jsx(t.Caption,{children:f})]})})};g.displayName="Widgets.ColorTool";exports.default=g;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),x=require("react"),N=require("react-i18next"),O=require("./widgets/ColorTool/utilities.cjs"),o=require("./widgets/ColorTool/styles.cjs"),W=require("@rubin-epo/epo-react-lib/SelectListbox"),H=require("./widgets/ColorTool/Actions/index.cjs"),y=require("./widgets/ColorTool/ImageComposite/ImageComposite.cjs"),R=require("./widgets/ColorTool/FilterControls/FilterControls.cjs"),$=l=>l&&l.__esModule?l:{default:l},v=$(W),T=({data:l,objectOptions:p=[],selectedData:n,colorOptions:L=[],selectionCallback:r,isDisabled:u=!1,isDisplayOnly:C=!1,config:S={actions:["reset"],width:600,height:600,hideSubtitle:!1}})=>{var g;const _={actions:["reset"],width:600,height:600,hideSubtitle:!1},h=x.useRef(null),{t:a}=N.useTranslation(),q=x.useCallback(t=>{const{label:f}=t,{filters:b}=n,M=b.map(m=>m.label===f?t:m);return r&&r({...n,filters:M})},[n,r]),F=x.useCallback(t=>{if(t!==null)return r&&r({name:t,filters:O.getDataFiltersByName(l,t)})},[r,l]),{filters:c,name:d}=n,{actions:w,width:s,height:i,hideSubtitle:B}={..._,...S};if(C)return e.jsx(y.default,{ref:h,filters:c,width:s,height:i,selectedObjectName:d});const j=l.length>1,I=a("colorTool.actions.select_an_object");return e.jsx(o.WidgetContainer,{children:e.jsxs(o.WidgetLayout,{style:{"--image-width":typeof s=="number"?`${s}px`:s,"--image-height":typeof i=="number"?`${i}px`:i},children:[d&&j&&e.jsx(o.Title,{children:!B&&e.jsxs(e.Fragment,{children:[e.jsx("dt",{children:a("colorTool.labels.object")}),e.jsx("dd",{children:d})]})}),e.jsxs(o.ControlsContainer,{children:[c&&e.jsxs(e.Fragment,{children:[e.jsx(o.ToolsHeader,{id:"filterLabel",children:a("colorTool.labels.filter")}),e.jsx(o.ToolsHeader,{id:"colorLabel",children:a("colorTool.labels.color")}),e.jsx(o.ToolsHeader,{id:"intensityLabel",children:a("colorTool.labels.color_intensity")})]}),c&&c.map(t=>{const{label:f,isDisabled:b}=t;return e.jsx(R.default,{filter:t,isDisabled:u||b,colorOptions:L,onChangeFilterCallback:q,buttonLabelledById:"filterLabel",selectLabelledById:"colorLabel",sliderLabelledById:"intensityLabel"},`filter-${f}`)})]}),e.jsx(y.default,{ref:h,filters:c,width:s,height:i,selectedObjectName:d,children:j&&e.jsx(o.SelectionContainer,{children:e.jsx(v.default,{id:"astroObjectSelector",placeholder:I,options:p,onChangeCallback:F,value:d,isDisabled:u,width:"100%",maxWidth:"100%"})})}),e.jsx(H.default,{actions:w,images:(g=h.current)==null?void 0:g.getElementsByTagName("canvas"),selectedData:n,width:s,height:i,isDisabled:u,selectionCallback:r})]})})};T.displayName="Widgets.ColorTool";exports.default=T;

package/dist/ColorTool.d.ts

@@ -0,0 +1,3 @@
+export * from './widgets/ColorTool/ColorTool'
+import _default from './widgets/ColorTool/ColorTool'
+export default _default

package/dist/ColorTool.js

@@ -1,103 +1,139 @@
-import { jsx as e, jsxs as i, Fragment as b } from "react/jsx-runtime";
-import { useTranslation as x } from "react-i18next";
-import { getCategoryName as I, isResetButtonActive as R, getDataFiltersByName as W, resetFilters as _ } from "./widgets/ColorTool/utilities.js";
-import { WidgetContainer as w, WidgetLayout as A, Subtitle as H, ControlsContainer as M, SelectionContainer as P, ToolsHeader as g, ResetButton as $, Caption as q } from "./widgets/ColorTool/styles.js";
-import z from "@rubin-epo/epo-react-lib/Select";
-import E from "./widgets/ColorTool/FilterControls/FilterControls.js";
-import G from "./widgets/ColorTool/ImageComposite/ImageComposite.js";
+import { jsx as e, jsxs as c, Fragment as L } from "react/jsx-runtime";
+import { useRef as $, useCallback as T } from "react";
+import { useTranslation as R } from "react-i18next";
+import { getDataFiltersByName as A } from "./widgets/ColorTool/utilities.js";
+import { WidgetContainer as E, WidgetLayout as H, Title as M, ControlsContainer as P, ToolsHeader as p, SelectionContainer as q } from "./widgets/ColorTool/styles.js";
+import v from "@rubin-epo/epo-react-lib/SelectListbox";
+import z from "./widgets/ColorTool/Actions/index.js";
+import C from "./widgets/ColorTool/ImageComposite/ImageComposite.js";
+import G from "./widgets/ColorTool/FilterControls/FilterControls.js";
 const J = ({
-  data: h,
-  objectOptions: C = [],
-  selectedData: l,
-  colorOptions: L = [],
-  selectionCallback: r,
-  isDisabled: m = !1,
-  isDisplayOnly: c = !1,
-  hideImage: T = !1,
-  hideSubtitle: y = !1
+  data: d,
+  objectOptions: j = [],
+  selectedData: i,
+  colorOptions: x = [],
+  selectionCallback: o,
+  isDisabled: h = !1,
+  isDisplayOnly: S = !1,
+  config: w = {
+    actions: ["reset"],
+    width: 600,
+    height: 600,
+    hideSubtitle: !1
+  }
 }) => {
-  const j = (t) => {
-    const { label: n } = t, { filters: f } = l, v = f.map(
-      (u) => u.label === n ? t : u
+  var g;
+  const B = {
+    actions: ["reset"],
+    width: 600,
+    height: 600,
+    hideSubtitle: !1
+  }, m = $(null), { t: n } = R(), F = T(
+    (t) => {
+      const { label: f } = t, { filters: b } = i, _ = b.map(
+        (y) => y.label === f ? t : y
+      );
+      return o && o({
+        ...i,
+        filters: _
+      });
+    },
+    [i, o]
+  ), I = T(
+    (t) => {
+      if (t !== null)
+        return o && o({
+          name: t,
+          filters: A(d, t)
+        });
+    },
+    [o, d]
+  ), { filters: s, name: a } = i, { actions: N, width: l, height: r, hideSubtitle: W } = {
+    ...B,
+    ...w
+  };
+  if (S)
+    return /* @__PURE__ */ e(
+      C,
+      {
+        ref: m,
+        filters: s,
+        width: l,
+        height: r,
+        selectedObjectName: a
+      }
     );
-    return r && r({
-      ...l,
-      filters: v
-    });
-  }, B = (t) => {
-    const { value: n } = t.target;
-    return r && r({
-      name: n,
-      filters: W(h, n)
-    });
-  }, F = () => r && r({
-    ...l,
-    filters: _(l.filters)
-  }), a = h.length > 1, { t: o } = x(), N = o("colorTool.actions.select_an_object"), { filters: d, name: s, caption: p } = l, S = I(h, s);
-  return /* @__PURE__ */ e(w, { children: /* @__PURE__ */ i(
-    A,
+  const u = d.length > 1, O = n("colorTool.actions.select_an_object");
+  return /* @__PURE__ */ e(E, { children: /* @__PURE__ */ c(
+    H,
     {
       style: {
-        "--controls-row": c ? "'image image'" : void 0
+        "--image-width": typeof l == "number" ? `${l}px` : l,
+        "--image-height": typeof r == "number" ? `${r}px` : r
       },
       children: [
-        s && (c || a) && /* @__PURE__ */ i(H, { children: [
-          a && /* @__PURE__ */ i(b, { children: [
-            /* @__PURE__ */ e("dt", { children: o("colorTool.labels.object_type") }),
-            /* @__PURE__ */ e("dd", { children: S })
+        a && u && /* @__PURE__ */ e(M, { children: !W && /* @__PURE__ */ c(L, { children: [
+          /* @__PURE__ */ e("dt", { children: n("colorTool.labels.object") }),
+          /* @__PURE__ */ e("dd", { children: a })
+        ] }) }),
+        /* @__PURE__ */ c(P, { children: [
+          s && /* @__PURE__ */ c(L, { children: [
+            /* @__PURE__ */ e(p, { id: "filterLabel", children: n("colorTool.labels.filter") }),
+            /* @__PURE__ */ e(p, { id: "colorLabel", children: n("colorTool.labels.color") }),
+            /* @__PURE__ */ e(p, { id: "intensityLabel", children: n("colorTool.labels.color_intensity") })
           ] }),
-          !y && /* @__PURE__ */ i(b, { children: [
-            /* @__PURE__ */ e("dt", { children: o("colorTool.labels.object", {
-              context: a ? "selected" : !1
-            }) }),
-            /* @__PURE__ */ e("dd", { children: s })
-          ] })
-        ] }),
-        !c && /* @__PURE__ */ i(M, { children: [
-          a && /* @__PURE__ */ e(P, { children: /* @__PURE__ */ e(
-            z,
-            {
-              id: "astroObjectSelector",
-              placeholder: N,
-              options: C,
-              onChange: B,
-              value: s,
-              disabled: m
-            }
-          ) }),
-          d && /* @__PURE__ */ i(b, { children: [
-            /* @__PURE__ */ e(g, { id: "filterLabel", children: o("colorTool.labels.filter") }),
-            /* @__PURE__ */ e(g, { id: "colorLabel", children: o("colorTool.labels.color") }),
-            /* @__PURE__ */ e(g, { id: "intensityLabel", children: o("colorTool.labels.color_intensity") })
-          ] }),
-          d && d.map((t) => {
-            const { label: n, isDisabled: f } = t;
+          s && s.map((t) => {
+            const { label: f, isDisabled: b } = t;
             return /* @__PURE__ */ e(
-              E,
+              G,
               {
                 filter: t,
-                isDisabled: m || f,
-                colorOptions: L,
-                onChangeFilterCallback: j,
+                isDisabled: h || b,
+                colorOptions: x,
+                onChangeFilterCallback: F,
                 buttonLabelledById: "filterLabel",
                 selectLabelledById: "colorLabel",
                 sliderLabelledById: "intensityLabel"
               },
-              `filter-${n}`
+              `filter-${f}`
             );
           })
         ] }),
-        !T && /* @__PURE__ */ e(G, { filters: d }),
-        s && !c && /* @__PURE__ */ e(
-          $,
+        /* @__PURE__ */ e(
+          C,
           {
-            disabled: m || !R(l),
-            onClick: F,
-            icon: "RotateLeftWithCenter",
-            children: o("colorTool.actions.reset")
+            ref: m,
+            filters: s,
+            width: l,
+            height: r,
+            selectedObjectName: a,
+            children: u && /* @__PURE__ */ e(q, { children: /* @__PURE__ */ e(
+              v,
+              {
+                id: "astroObjectSelector",
+                placeholder: O,
+                options: j,
+                onChangeCallback: I,
+                value: a,
+                isDisabled: h,
+                width: "100%",
+                maxWidth: "100%"
+              }
+            ) })
           }
         ),
-        p && /* @__PURE__ */ e(q, { children: p })
+        /* @__PURE__ */ e(
+          z,
+          {
+            actions: N,
+            images: (g = m.current) == null ? void 0 : g.getElementsByTagName("canvas"),
+            selectedData: i,
+            width: l,
+            height: r,
+            isDisabled: h,
+            selectionCallback: o
+          }
+        )
       ]
     }
   ) });

package/dist/FilterTool.d.ts

@@ -0,0 +1,3 @@
+export * from './widgets/FilterTool/FilterTool'
+import _default from './widgets/FilterTool/FilterTool'
+export default _default

package/dist/SourceSelector.d.ts

@@ -0,0 +1,3 @@
+export * from './widgets/SourceSelector/SourceSelector'
+import _default from './widgets/SourceSelector/SourceSelector'
+export default _default

package/dist/{types/cjs/atomic/PlaybackControl/styles.d.cts → atomic/PlaybackControl/styles.d.ts}

@@ -281,7 +281,7 @@ export declare const PlaybackButton: import("styled-components").IStyledComponen
     formNoValidate?: boolean | undefined;
     formTarget?: string | undefined;
     name?: string | undefined;
-    type?: "button" | "submit" | "reset" | undefined;
+    type?: "button" | "reset" | "submit" | undefined;
     value?: string | number | readonly string[] | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;

package/dist/hooks/useImage.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react");function R({url:n,crossOrigin:r,referrerpolicy:u,onLoadCallback:d,onErrorCallback:s}){const o=t.useRef("loading"),c=t.useRef(),[g,a]=t.useState(0),i=t.useRef(),f=t.useRef(),m=t.useRef();return(i.current!==n||f.current!==r||m.current!==u)&&(o.current="loading",c.current=void 0,i.current=n,f.current=r,m.current=u),t.useLayoutEffect(function(){if(!n)return;var e=document.createElement("img");function v(){o.current="loaded",c.current=e,d&&d(),a(Math.random())}function l(){o.current="failed",c.current=void 0,s&&s(),a(Math.random())}return e.addEventListener("load",v),e.addEventListener("error",l),r&&(e.crossOrigin=r),u&&(e.referrerPolicy=u),e.src=n,function(){e.removeEventListener("load",v),e.removeEventListener("error",l)}},[n,r,u]),[c.current,o.current]}exports.default=R;

package/dist/hooks/useImage.d.ts

@@ -0,0 +1,10 @@
+type ImageStatus = "loading" | "loaded" | "failed";
+interface useImageProps {
+    url: string;
+    crossOrigin?: "anonymous" | "use-credentials";
+    referrerpolicy?: "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url";
+    onLoadCallback?: () => void;
+    onErrorCallback?: () => void;
+}
+declare function useImage({ url, crossOrigin, referrerpolicy, onLoadCallback, onErrorCallback, }: useImageProps): [undefined | HTMLImageElement, ImageStatus];
+export default useImage;

package/dist/hooks/useImage.js

@@ -0,0 +1,30 @@
+import { useRef as o, useState as g, useLayoutEffect as l } from "react";
+function M({
+  url: t,
+  crossOrigin: n,
+  referrerpolicy: r,
+  onLoadCallback: d,
+  onErrorCallback: a
+}) {
+  const u = o("loading"), c = o(), [L, s] = g(0), i = o(), f = o(), m = o();
+  return (i.current !== t || f.current !== n || m.current !== r) && (u.current = "loading", c.current = void 0, i.current = t, f.current = n, m.current = r), l(
+    function() {
+      if (!t)
+        return;
+      var e = document.createElement("img");
+      function v() {
+        u.current = "loaded", c.current = e, d && d(), s(Math.random());
+      }
+      function E() {
+        u.current = "failed", c.current = void 0, a && a(), s(Math.random());
+      }
+      return e.addEventListener("load", v), e.addEventListener("error", E), n && (e.crossOrigin = n), r && (e.referrerPolicy = r), e.src = t, function() {
+        e.removeEventListener("load", v), e.removeEventListener("error", E);
+      };
+    },
+    [t, n, r]
+  ), [c.current, u.current];
+}
+export {
+  M as default
+};

package/dist/lib/reimg.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function g(r,e){const c=function(){return r.indexOf("data:image/png")===0},i=function(t,o){var n=document.createElement("a");n.href=t,n.download=o,document.body.appendChild(n),n.click()};return{toBase64:function(){return r},toImg:function(){const t=document.createElement("img");return t.src=r,t},toCanvas:function(t){const o=document.createElement("canvas"),n=e==null?void 0:e.getBoundingClientRect();o.width=(n==null?void 0:n.width)||0,o.height=(n==null?void 0:n.height)||0;const a=o.getContext("2d");var u=this.toImg();u.onload=function(){a==null||a.drawImage(u,0,0),t(o)}},toPng:function(){if(c()){var t=document.createElement("img");return t.src=r,t}this.toCanvas(function(o){var n=document.createElement("img");return n.src=o.toDataURL(),n})},toJpeg:function(t){t=t||1,(o=>{this.toCanvas(function(n){var a=document.createElement("img");return a.src=n.toDataURL("image/jpeg",o),a})})(t)},downloadPng:function(t){if(t=t||"image.png",c()){i(r,t);return}this.toCanvas(function(o){i(o.toDataURL(),t)})}}}function m(r){const e=r.toDataURL();return g(e)}exports.fromCanvas=m;

package/dist/lib/reimg.d.ts

@@ -0,0 +1,7 @@
+declare function fromSvg(svgElement: SVGElement): {
+    [key: string]: Function;
+};
+declare function fromCanvas(canvasElement: HTMLCanvasElement): {
+    [key: string]: Function;
+};
+export { fromSvg, fromCanvas };

package/dist/lib/reimg.js

@@ -0,0 +1,60 @@
+function g(r, c) {
+  const i = function() {
+    return r.indexOf("data:image/png") === 0;
+  }, e = function(t, o) {
+    var n = document.createElement("a");
+    n.href = t, n.download = o, document.body.appendChild(n), n.click();
+  };
+  return {
+    toBase64: function() {
+      return r;
+    },
+    toImg: function() {
+      const t = document.createElement("img");
+      return t.src = r, t;
+    },
+    toCanvas: function(t) {
+      const o = document.createElement("canvas"), n = c == null ? void 0 : c.getBoundingClientRect();
+      o.width = (n == null ? void 0 : n.width) || 0, o.height = (n == null ? void 0 : n.height) || 0;
+      const a = o.getContext("2d");
+      var u = this.toImg();
+      u.onload = function() {
+        a == null || a.drawImage(u, 0, 0), t(o);
+      };
+    },
+    toPng: function() {
+      if (i()) {
+        var t = document.createElement("img");
+        return t.src = r, t;
+      }
+      this.toCanvas(function(o) {
+        var n = document.createElement("img");
+        return n.src = o.toDataURL(), n;
+      });
+    },
+    toJpeg: function(t) {
+      t = t || 1, ((o) => {
+        this.toCanvas(function(n) {
+          var a = document.createElement("img");
+          return a.src = n.toDataURL("image/jpeg", o), a;
+        });
+      })(t);
+    },
+    downloadPng: function(t) {
+      if (t = t || "image.png", i()) {
+        e(r, t);
+        return;
+      }
+      this.toCanvas(function(o) {
+        e(o.toDataURL(), t);
+      });
+    }
+  };
+}
+function m(r) {
+  const c = r.toDataURL();
+  return g(c);
+}
+export {
+  m as fromCanvas
+};

package/dist/widgets/ColorTool/Actions/Export/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("react/jsx-runtime"),p=require("react"),x=require("@rubin-epo/epo-react-lib/Button"),g=require("../../../../lib/reimg.cjs"),v=t=>t&&t.__esModule?t:{default:t},_=v(x),c=({images:t,filters:o,filename:s,width:r,height:n,children:l,isDisabled:u})=>{const i=p.useCallback(()=>{const a=document.createElement("canvas"),e=a.getContext("2d");t&&e&&(e.canvas.width=r,e.canvas.height=n,e.globalCompositeOperation="screen",Array.from(t).forEach((d,f)=>{o[f].active&&e.drawImage(d,0,0,r,n)})),g.fromCanvas(a).downloadPng(s)},[t,o]);return m.jsx(_.default,{disabled:u,style:{"--button-text-align":"left"},icon:"ArrowUpFromBracket",onClick:i,isBlock:!0,children:l})};c.displayName="Widgets.ColorTool.Reset";const b=c;exports.default=b;

package/dist/widgets/ColorTool/Actions/Export/index.d.ts

@@ -0,0 +1,12 @@
+import { FunctionComponent, PropsWithChildren } from "react";
+import { ImageFilter } from "../../ColorTool";
+interface ExportProps {
+    images?: HTMLCollection;
+    filename: string;
+    filters: ImageFilter[];
+    width: number;
+    height: number;
+    isDisabled: boolean;
+}
+declare const Export: FunctionComponent<PropsWithChildren<ExportProps>>;
+export default Export;

package/dist/widgets/ColorTool/Actions/Export/index.js

@@ -0,0 +1,36 @@
+import { jsx as f } from "react/jsx-runtime";
+import { useCallback as x } from "react";
+import u from "@rubin-epo/epo-react-lib/Button";
+import { fromCanvas as C } from "../../../../lib/reimg.js";
+const c = ({
+  images: t,
+  filters: r,
+  filename: s,
+  width: e,
+  height: a,
+  children: l,
+  isDisabled: m
+}) => {
+  const i = x(() => {
+    const n = document.createElement("canvas"), o = n.getContext("2d");
+    t && o && (o.canvas.width = e, o.canvas.height = a, o.globalCompositeOperation = "screen", Array.from(t).forEach((p, d) => {
+      r[d].active && o.drawImage(p, 0, 0, e, a);
+    })), C(n).downloadPng(s);
+  }, [t, r]);
+  return /* @__PURE__ */ f(
+    u,
+    {
+      disabled: m,
+      style: { "--button-text-align": "left" },
+      icon: "ArrowUpFromBracket",
+      onClick: i,
+      isBlock: !0,
+      children: l
+    }
+  );
+};
+c.displayName = "Widgets.ColorTool.Reset";
+const k = c;
+export {
+  k as default
+};

package/dist/widgets/ColorTool/Actions/Reset/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),r=require("@rubin-epo/epo-react-lib/Button"),a=require("../../utilities.cjs"),c=t=>t&&t.__esModule?t:{default:t},d=c(r),f=t=>t.map(e=>{const{defaultValue:s,min:o,max:u}=e,i=s||1;return{...e,active:!1,color:"",brightness:a.getBrightnessValue(o,u,i),value:i}}),l=({isDisabled:t,selectedData:e,onResetCallback:s,children:o})=>{const{filters:u}=e;return n.jsx(d.default,{style:{"--button-text-align":"left"},disabled:t,icon:"RotateLeftWithCenter",onClick:()=>s&&s({...e,filters:f(u)}),isBlock:!0,children:o})};l.displayName="Widgets.ColorTool.Reset";const g=l;exports.default=g;

package/dist/widgets/ColorTool/Actions/Reset/index.d.ts

@@ -0,0 +1,9 @@
+import { FunctionComponent, PropsWithChildren } from "react";
+import { AstroObject } from "../../ColorTool";
+interface ResetProps {
+    isDisabled: boolean;
+    selectedData: AstroObject;
+    onResetCallback: (data: AstroObject) => void;
+}
+declare const Reset: FunctionComponent<PropsWithChildren<ResetProps>>;
+export default Reset;

package/dist/widgets/ColorTool/Actions/Reset/index.js

@@ -0,0 +1,39 @@
+import { jsx as l } from "react/jsx-runtime";
+import a from "@rubin-epo/epo-react-lib/Button";
+import { getBrightnessValue as m } from "../../utilities.js";
+const u = (o) => o.map((t) => {
+  const { defaultValue: e, min: s, max: r } = t, i = e || 1;
+  return {
+    ...t,
+    active: !1,
+    color: "",
+    brightness: m(s, r, i),
+    value: i
+  };
+}), n = ({
+  isDisabled: o,
+  selectedData: t,
+  onResetCallback: e,
+  children: s
+}) => {
+  const { filters: r } = t;
+  return /* @__PURE__ */ l(
+    a,
+    {
+      style: { "--button-text-align": "left" },
+      disabled: o,
+      icon: "RotateLeftWithCenter",
+      onClick: () => e && e({
+        ...t,
+        filters: u(r)
+      }),
+      isBlock: !0,
+      children: s
+    }
+  );
+};
+n.displayName = "Widgets.ColorTool.Reset";
+const d = n;
+export {
+  d as default
+};

package/dist/widgets/ColorTool/Actions/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),A=require("./Reset/index.cjs"),b=require("./Export/index.cjs"),j=require("./styles.cjs"),p=require("react-i18next"),h=require("../utilities.cjs"),i=({actions:o,isDisabled:c,width:l,height:u,selectedData:e,selectionCallback:s,images:a})=>{const{t:d}=p.useTranslation(),{filters:x,name:f}=e,r=c||!h.areActionsActive(e);return t.jsx(j.Actions,{children:o.map((m,n)=>{switch(m){case"reset":return t.jsx(A.default,{isDisabled:r,selectedData:e,onResetCallback:q=>s&&s(q),children:d("colorTool.actions.reset")},n);case"export":return t.jsx(b.default,{isDisabled:r,filters:x,width:l,height:u,images:a,filename:f,children:"Export"},n);case"save":return null;default:return null}})})};i.displayName="Widgets.ColorTool.Actions";const v=i;exports.default=v;

package/dist/widgets/ColorTool/Actions/index.d.ts

@@ -0,0 +1,13 @@
+import { FunctionComponent } from "react";
+import { AstroObject, ColorToolAction } from "../ColorTool";
+interface ActionsProps {
+    actions: Array<ColorToolAction>;
+    isDisabled: boolean;
+    selectedData: AstroObject;
+    images: HTMLCollection | undefined;
+    width: number;
+    height: number;
+    selectionCallback: (data: AstroObject) => void;
+}
+declare const Actions: FunctionComponent<ActionsProps>;
+export default Actions;

package/dist/widgets/ColorTool/Actions/index.js

@@ -0,0 +1,55 @@
+import { jsx as r } from "react/jsx-runtime";
+import x from "./Reset/index.js";
+import h from "./Export/index.js";
+import { Actions as b } from "./styles.js";
+import { useTranslation as T } from "react-i18next";
+import { areActionsActive as v } from "../utilities.js";
+const i = ({
+  actions: n,
+  isDisabled: c,
+  width: a,
+  height: l,
+  selectedData: o,
+  selectionCallback: t,
+  images: m
+}) => {
+  const { t: p } = T(), { filters: f, name: u } = o, s = c || !v(o);
+  return /* @__PURE__ */ r(b, { children: n.map((d, e) => {
+    switch (d) {
+      case "reset":
+        return /* @__PURE__ */ r(
+          x,
+          {
+            isDisabled: s,
+            selectedData: o,
+            onResetCallback: (A) => t && t(A),
+            children: p("colorTool.actions.reset")
+          },
+          e
+        );
+      case "export":
+        return /* @__PURE__ */ r(
+          h,
+          {
+            isDisabled: s,
+            filters: f,
+            width: a,
+            height: l,
+            images: m,
+            filename: u,
+            children: "Export"
+          },
+          e
+        );
+      case "save":
+        return null;
+      default:
+        return null;
+    }
+  }) });
+};
+i.displayName = "Widgets.ColorTool.Actions";
+const y = i;
+export {
+  y as default
+};

package/dist/widgets/ColorTool/Actions/styles.cjs

@@ -0,0 +1,5 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),o=t=>t&&t.__esModule?t:{default:t},a=o(e),l=a.default.div`
+  display: flex;
+  gap: var(--color-tool-padding, var(--PADDING_SMALL, 20px));
+  grid-area: actions;
+`;exports.Actions=l;