@rubin-epo/epo-widget-lib 0.6.6 → 0.6.9

package/dist/widgets/ColorTool/CompositeRender/styles.d.ts

@@ -0,0 +1,274 @@
+export declare const Image: import("styled-components").IStyledComponent<"web", {
+    ref?: import("react").LegacyRef<HTMLCanvasElement> | undefined;
+    key?: import("react").Key | null | undefined;
+    height?: string | number | undefined;
+    width?: string | number | undefined;
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    autoFocus?: boolean | undefined;
+    className?: string | undefined;
+    contentEditable?: "inherit" | (boolean | "false" | "true") | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "false" | "true") | undefined;
+    hidden?: boolean | undefined;
+    id?: string | undefined;
+    lang?: string | undefined;
+    nonce?: string | undefined;
+    placeholder?: string | undefined;
+    slot?: string | undefined;
+    spellCheck?: (boolean | "false" | "true") | undefined;
+    style?: import("react").CSSProperties | undefined;
+    tabIndex?: number | undefined;
+    title?: string | undefined;
+    translate?: "yes" | "no" | undefined;
+    radioGroup?: string | undefined;
+    role?: import("react").AriaRole | undefined;
+    about?: string | undefined;
+    content?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    rel?: string | undefined;
+    resource?: string | undefined;
+    rev?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCapitalize?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    color?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "on" | "off" | undefined;
+    inputMode?: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    is?: string | undefined;
+    children?: import("react").ReactNode;
+    "aria-activedescendant"?: string | undefined;
+    "aria-atomic"?: (boolean | "false" | "true") | undefined;
+    "aria-autocomplete"?: "none" | "both" | "inline" | "list" | undefined;
+    "aria-braillelabel"?: string | undefined;
+    "aria-brailleroledescription"?: string | undefined;
+    "aria-busy"?: (boolean | "false" | "true") | undefined;
+    "aria-checked"?: boolean | "mixed" | "false" | "true" | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colindextext"?: string | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "page" | "false" | "true" | "time" | "step" | "location" | "date" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-description"?: string | undefined;
+    "aria-details"?: string | undefined;
+    "aria-disabled"?: (boolean | "false" | "true") | undefined;
+    "aria-dropeffect"?: "none" | "copy" | "move" | "link" | "execute" | "popup" | undefined;
+    "aria-errormessage"?: string | undefined;
+    "aria-expanded"?: (boolean | "false" | "true") | undefined;
+    "aria-flowto"?: string | undefined;
+    "aria-grabbed"?: (boolean | "false" | "true") | undefined;
+    "aria-haspopup"?: boolean | "listbox" | "grid" | "menu" | "false" | "true" | "dialog" | "tree" | undefined;
+    "aria-hidden"?: (boolean | "false" | "true") | undefined;
+    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined;
+    "aria-modal"?: (boolean | "false" | "true") | undefined;
+    "aria-multiline"?: (boolean | "false" | "true") | undefined;
+    "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | "mixed" | "false" | "true" | undefined;
+    "aria-readonly"?: (boolean | "false" | "true") | undefined;
+    "aria-relevant"?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    "aria-required"?: (boolean | "false" | "true") | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowindextext"?: string | undefined;
+    "aria-rowspan"?: number | undefined;
+    "aria-selected"?: (boolean | "false" | "true") | undefined;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+    "aria-valuemax"?: number | undefined;
+    "aria-valuemin"?: number | undefined;
+    "aria-valuenow"?: number | undefined;
+    "aria-valuetext"?: string | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined;
+    onCopy?: import("react").ClipboardEventHandler<HTMLCanvasElement> | undefined;
+    onCopyCapture?: import("react").ClipboardEventHandler<HTMLCanvasElement> | undefined;
+    onCut?: import("react").ClipboardEventHandler<HTMLCanvasElement> | undefined;
+    onCutCapture?: import("react").ClipboardEventHandler<HTMLCanvasElement> | undefined;
+    onPaste?: import("react").ClipboardEventHandler<HTMLCanvasElement> | undefined;
+    onPasteCapture?: import("react").ClipboardEventHandler<HTMLCanvasElement> | undefined;
+    onCompositionEnd?: import("react").CompositionEventHandler<HTMLCanvasElement> | undefined;
+    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLCanvasElement> | undefined;
+    onCompositionStart?: import("react").CompositionEventHandler<HTMLCanvasElement> | undefined;
+    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLCanvasElement> | undefined;
+    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLCanvasElement> | undefined;
+    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLCanvasElement> | undefined;
+    onFocus?: import("react").FocusEventHandler<HTMLCanvasElement> | undefined;
+    onFocusCapture?: import("react").FocusEventHandler<HTMLCanvasElement> | undefined;
+    onBlur?: import("react").FocusEventHandler<HTMLCanvasElement> | undefined;
+    onBlurCapture?: import("react").FocusEventHandler<HTMLCanvasElement> | undefined;
+    onChange?: import("react").FormEventHandler<HTMLCanvasElement> | undefined;
+    onChangeCapture?: import("react").FormEventHandler<HTMLCanvasElement> | undefined;
+    onBeforeInput?: import("react").FormEventHandler<HTMLCanvasElement> | undefined;
+    onBeforeInputCapture?: import("react").FormEventHandler<HTMLCanvasElement> | undefined;
+    onInput?: import("react").FormEventHandler<HTMLCanvasElement> | undefined;
+    onInputCapture?: import("react").FormEventHandler<HTMLCanvasElement> | undefined;
+    onReset?: import("react").FormEventHandler<HTMLCanvasElement> | undefined;
+    onResetCapture?: import("react").FormEventHandler<HTMLCanvasElement> | undefined;
+    onSubmit?: import("react").FormEventHandler<HTMLCanvasElement> | undefined;
+    onSubmitCapture?: import("react").FormEventHandler<HTMLCanvasElement> | undefined;
+    onInvalid?: import("react").FormEventHandler<HTMLCanvasElement> | undefined;
+    onInvalidCapture?: import("react").FormEventHandler<HTMLCanvasElement> | undefined;
+    onLoad?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onLoadCapture?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onError?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onErrorCapture?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLCanvasElement> | undefined;
+    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLCanvasElement> | undefined;
+    onKeyPress?: import("react").KeyboardEventHandler<HTMLCanvasElement> | undefined;
+    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLCanvasElement> | undefined;
+    onKeyUp?: import("react").KeyboardEventHandler<HTMLCanvasElement> | undefined;
+    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLCanvasElement> | undefined;
+    onAbort?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onAbortCapture?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onCanPlay?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onCanPlayCapture?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onCanPlayThrough?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onDurationChange?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onEmptied?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onEmptiedCapture?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onEncrypted?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onEncryptedCapture?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onEnded?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onEndedCapture?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onLoadedData?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onLoadedMetadata?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onLoadStart?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onLoadStartCapture?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onPause?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onPauseCapture?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onPlay?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onPlayCapture?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onPlaying?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onPlayingCapture?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onProgress?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onProgressCapture?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onRateChange?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onRateChangeCapture?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onResize?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onResizeCapture?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onSeeked?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onSeekedCapture?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onSeeking?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onSeekingCapture?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onStalled?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onStalledCapture?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onSuspend?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onSuspendCapture?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onTimeUpdate?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onVolumeChange?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onWaiting?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onWaitingCapture?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onAuxClick?: import("react").MouseEventHandler<HTMLCanvasElement> | undefined;
+    onAuxClickCapture?: import("react").MouseEventHandler<HTMLCanvasElement> | undefined;
+    onClick?: import("react").MouseEventHandler<HTMLCanvasElement> | undefined;
+    onClickCapture?: import("react").MouseEventHandler<HTMLCanvasElement> | undefined;
+    onContextMenu?: import("react").MouseEventHandler<HTMLCanvasElement> | undefined;
+    onContextMenuCapture?: import("react").MouseEventHandler<HTMLCanvasElement> | undefined;
+    onDoubleClick?: import("react").MouseEventHandler<HTMLCanvasElement> | undefined;
+    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLCanvasElement> | undefined;
+    onDrag?: import("react").DragEventHandler<HTMLCanvasElement> | undefined;
+    onDragCapture?: import("react").DragEventHandler<HTMLCanvasElement> | undefined;
+    onDragEnd?: import("react").DragEventHandler<HTMLCanvasElement> | undefined;
+    onDragEndCapture?: import("react").DragEventHandler<HTMLCanvasElement> | undefined;
+    onDragEnter?: import("react").DragEventHandler<HTMLCanvasElement> | undefined;
+    onDragEnterCapture?: import("react").DragEventHandler<HTMLCanvasElement> | undefined;
+    onDragExit?: import("react").DragEventHandler<HTMLCanvasElement> | undefined;
+    onDragExitCapture?: import("react").DragEventHandler<HTMLCanvasElement> | undefined;
+    onDragLeave?: import("react").DragEventHandler<HTMLCanvasElement> | undefined;
+    onDragLeaveCapture?: import("react").DragEventHandler<HTMLCanvasElement> | undefined;
+    onDragOver?: import("react").DragEventHandler<HTMLCanvasElement> | undefined;
+    onDragOverCapture?: import("react").DragEventHandler<HTMLCanvasElement> | undefined;
+    onDragStart?: import("react").DragEventHandler<HTMLCanvasElement> | undefined;
+    onDragStartCapture?: import("react").DragEventHandler<HTMLCanvasElement> | undefined;
+    onDrop?: import("react").DragEventHandler<HTMLCanvasElement> | undefined;
+    onDropCapture?: import("react").DragEventHandler<HTMLCanvasElement> | undefined;
+    onMouseDown?: import("react").MouseEventHandler<HTMLCanvasElement> | undefined;
+    onMouseDownCapture?: import("react").MouseEventHandler<HTMLCanvasElement> | undefined;
+    onMouseEnter?: import("react").MouseEventHandler<HTMLCanvasElement> | undefined;
+    onMouseLeave?: import("react").MouseEventHandler<HTMLCanvasElement> | undefined;
+    onMouseMove?: import("react").MouseEventHandler<HTMLCanvasElement> | undefined;
+    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLCanvasElement> | undefined;
+    onMouseOut?: import("react").MouseEventHandler<HTMLCanvasElement> | undefined;
+    onMouseOutCapture?: import("react").MouseEventHandler<HTMLCanvasElement> | undefined;
+    onMouseOver?: import("react").MouseEventHandler<HTMLCanvasElement> | undefined;
+    onMouseOverCapture?: import("react").MouseEventHandler<HTMLCanvasElement> | undefined;
+    onMouseUp?: import("react").MouseEventHandler<HTMLCanvasElement> | undefined;
+    onMouseUpCapture?: import("react").MouseEventHandler<HTMLCanvasElement> | undefined;
+    onSelect?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onSelectCapture?: import("react").ReactEventHandler<HTMLCanvasElement> | undefined;
+    onTouchCancel?: import("react").TouchEventHandler<HTMLCanvasElement> | undefined;
+    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLCanvasElement> | undefined;
+    onTouchEnd?: import("react").TouchEventHandler<HTMLCanvasElement> | undefined;
+    onTouchEndCapture?: import("react").TouchEventHandler<HTMLCanvasElement> | undefined;
+    onTouchMove?: import("react").TouchEventHandler<HTMLCanvasElement> | undefined;
+    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLCanvasElement> | undefined;
+    onTouchStart?: import("react").TouchEventHandler<HTMLCanvasElement> | undefined;
+    onTouchStartCapture?: import("react").TouchEventHandler<HTMLCanvasElement> | undefined;
+    onPointerDown?: import("react").PointerEventHandler<HTMLCanvasElement> | undefined;
+    onPointerDownCapture?: import("react").PointerEventHandler<HTMLCanvasElement> | undefined;
+    onPointerMove?: import("react").PointerEventHandler<HTMLCanvasElement> | undefined;
+    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLCanvasElement> | undefined;
+    onPointerUp?: import("react").PointerEventHandler<HTMLCanvasElement> | undefined;
+    onPointerUpCapture?: import("react").PointerEventHandler<HTMLCanvasElement> | undefined;
+    onPointerCancel?: import("react").PointerEventHandler<HTMLCanvasElement> | undefined;
+    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLCanvasElement> | undefined;
+    onPointerEnter?: import("react").PointerEventHandler<HTMLCanvasElement> | undefined;
+    onPointerEnterCapture?: import("react").PointerEventHandler<HTMLCanvasElement> | undefined;
+    onPointerLeave?: import("react").PointerEventHandler<HTMLCanvasElement> | undefined;
+    onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLCanvasElement> | undefined;
+    onPointerOver?: import("react").PointerEventHandler<HTMLCanvasElement> | undefined;
+    onPointerOverCapture?: import("react").PointerEventHandler<HTMLCanvasElement> | undefined;
+    onPointerOut?: import("react").PointerEventHandler<HTMLCanvasElement> | undefined;
+    onPointerOutCapture?: import("react").PointerEventHandler<HTMLCanvasElement> | undefined;
+    onGotPointerCapture?: import("react").PointerEventHandler<HTMLCanvasElement> | undefined;
+    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLCanvasElement> | undefined;
+    onLostPointerCapture?: import("react").PointerEventHandler<HTMLCanvasElement> | undefined;
+    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLCanvasElement> | undefined;
+    onScroll?: import("react").UIEventHandler<HTMLCanvasElement> | undefined;
+    onScrollCapture?: import("react").UIEventHandler<HTMLCanvasElement> | undefined;
+    onWheel?: import("react").WheelEventHandler<HTMLCanvasElement> | undefined;
+    onWheelCapture?: import("react").WheelEventHandler<HTMLCanvasElement> | undefined;
+    onAnimationStart?: import("react").AnimationEventHandler<HTMLCanvasElement> | undefined;
+    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLCanvasElement> | undefined;
+    onAnimationEnd?: import("react").AnimationEventHandler<HTMLCanvasElement> | undefined;
+    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLCanvasElement> | undefined;
+    onAnimationIteration?: import("react").AnimationEventHandler<HTMLCanvasElement> | undefined;
+    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLCanvasElement> | undefined;
+    onTransitionEnd?: import("react").TransitionEventHandler<HTMLCanvasElement> | undefined;
+    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLCanvasElement> | undefined;
+}>;

package/dist/widgets/ColorTool/CompositeRender/styles.js

@@ -0,0 +1,7 @@
+import t from "styled-components";
+const a = t.canvas`
+  width: 100%;
+`;
+export {
+  a as Image
+};

package/dist/widgets/ColorTool/ImageComposite/ImageComposite.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),i=require("react"),x=require("@rubin-epo/epo-react-lib/CircularLoader"),c=require("./styles.cjs"),h=require("../utilities.cjs"),S=require("../FilterImage/FilterImage.cjs"),A=e=>e&&e.__esModule?e:{default:e},F=A(x),u=i.forwardRef(({filters:e,width:d,height:g,selectedObjectName:a,className:m,children:p},C)=>{const[b,f]=i.useState(a),[o,r]=i.useState(0),n=h.isFilterActive(e),y=e.filter(t=>!t.isDisabled).length,l=o!==y;a!==b&&(f(a),r(0));const v=i.useCallback(()=>r(t=>t+1),[o,e]);return s.jsxs(c.ImageContainer,{className:m,ref:C,style:{"--image-container-opacity":o&&n?1:.1},children:[!o&&n&&s.jsx(F.default,{isVisible:l}),s.jsx(c.LoadingContainer,{style:{"--loading-opacity":l?0:1},children:e&&e.map(t=>{const{label:L,image:_,color:j,brightness:q,active:I}=t;return s.jsx(S.default,{url:_,color:j,active:I,width:d,height:g,filters:{brightness:q,contrast:1.3},onLoadCallback:v},`filter-${L}`)})}),p]})});u.displayName="Widgets.ColorTool.ImageComposite";const M=u;exports.default=M;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),o=require("react"),k=require("@rubin-epo/epo-react-lib/CircularLoader"),A=require("../OffscreenFilter/index.cjs"),m=require("./styles.cjs"),F=require("../utilities.cjs"),M=require("../CompositeRender/index.cjs"),R=e=>e&&e.__esModule?e:{default:e},D=R(k),C=o.forwardRef(({filters:e,width:i=600,height:l=600,selectedObjectName:r,className:p,children:y},b)=>{const c=o.useRef([]),[f,x]=o.useState(r),[a,u]=o.useState(0),d=F.isFilterActive(e),L=e.filter(t=>!t.isDisabled).length,g=a<L;r!==f&&(x(r),u(0));const j=o.useCallback(()=>u(t=>t+1),[a,e]),q=(t,n)=>{c.current[t]=n};return s.jsxs(m.ImageContainer,{className:p,style:{"--image-container-opacity":a&&d?1:.1},children:[!a&&d&&s.jsx(D.default,{isVisible:g}),s.jsxs(m.LoadingContainer,{style:{"--loading-opacity":g?0:1},children:[e&&e.map((t,n)=>{const{label:_,image:v,color:I,brightness:h}=t;return s.jsx(A.default,{onChangeCallback:S=>q(n,S),url:v,color:I,width:i,height:l,filters:{brightness:h,contrast:1.3},onLoadCallback:j},_)}),s.jsx(M.default,{layers:c.current,renderLayers:e.map(({active:t})=>t),width:i,height:l,ref:b})]}),y]})});C.displayName="Widgets.ColorTool.ImageComposite";const P=C;exports.default=P;

package/dist/widgets/ColorTool/ImageComposite/ImageComposite.d.ts

@@ -9,5 +9,5 @@ interface ImageCompositeProps {
 }
 declare const ImageComposite: import("react").ForwardRefExoticComponent<ImageCompositeProps & {
     children?: import("react").ReactNode;
-} & import("react").RefAttributes<HTMLDivElement>>;
+} & import("react").RefAttributes<HTMLCanvasElement>>;
 export default ImageComposite;

package/dist/widgets/ColorTool/ImageComposite/ImageComposite.js

@@ -1,60 +1,81 @@
-import { jsxs as A, jsx as a } from "react/jsx-runtime";
-import { forwardRef as F, useState as m, useCallback as j } from "react";
-import k from "@rubin-epo/epo-react-lib/CircularLoader";
-import { ImageContainer as $, LoadingContainer as w } from "./styles.js";
-import { isFilterActive as D } from "../utilities.js";
-import P from "../FilterImage/FilterImage.js";
-const l = F(
-  ({ filters: o, width: c, height: d, selectedObjectName: i, className: g, children: p }, f) => {
-    const [C, b] = m(i), [e, r] = m(0), s = D(o), u = o.filter((t) => !t.isDisabled).length, n = e !== u;
-    i !== C && (b(i), r(0));
-    const y = j(
-      () => r((t) => t + 1),
-      [e, o]
-    );
-    return /* @__PURE__ */ A(
-      $,
+import { jsxs as d, jsx as n } from "react/jsx-runtime";
+import { forwardRef as j, useRef as D, useState as g, useCallback as O } from "react";
+import P from "@rubin-epo/epo-react-lib/CircularLoader";
+import S from "../OffscreenFilter/index.js";
+import { ImageContainer as T, LoadingContainer as V } from "./styles.js";
+import { isFilterActive as W } from "../utilities.js";
+import $ from "../CompositeRender/index.js";
+const C = j(
+  ({
+    filters: e,
+    width: s = 600,
+    height: i = 600,
+    selectedObjectName: a,
+    className: f,
+    children: u
+  }, y) => {
+    const m = D([]), [b, L] = g(a), [r, l] = g(0), c = W(e), I = e.filter((o) => !o.isDisabled).length, p = r < I;
+    a !== b && (L(a), l(0));
+    const h = O(
+      () => l((o) => o + 1),
+      [r, e]
+    ), v = (o, t) => {
+      m.current[o] = t;
+    };
+    return /* @__PURE__ */ d(
+      T,
       {
-        className: g,
-        ref: f,
+        className: f,
         style: {
-          "--image-container-opacity": e && s ? 1 : 0.1
+          "--image-container-opacity": r && c ? 1 : 0.1
         },
         children: [
-          !e && s && /* @__PURE__ */ a(k, { isVisible: n }),
-          /* @__PURE__ */ a(
-            w,
+          !r && c && /* @__PURE__ */ n(P, { isVisible: p }),
+          /* @__PURE__ */ d(
+            V,
             {
-              style: { "--loading-opacity": n ? 0 : 1 },
-              children: o && o.map((t) => {
-                const { label: I, image: L, color: v, brightness: h, active: x } = t;
-                return /* @__PURE__ */ a(
-                  P,
-                  {
-                    url: L,
-                    color: v,
-                    active: x,
-                    width: c,
-                    height: d,
-                    filters: {
-                      brightness: h,
-                      contrast: 1.3
+              style: { "--loading-opacity": p ? 0 : 1 },
+              children: [
+                e && e.map((o, t) => {
+                  const { label: F, image: k, color: x, brightness: A } = o;
+                  return /* @__PURE__ */ n(
+                    S,
+                    {
+                      onChangeCallback: (R) => v(t, R),
+                      url: k,
+                      color: x,
+                      width: s,
+                      height: i,
+                      filters: {
+                        brightness: A,
+                        contrast: 1.3
+                      },
+                      onLoadCallback: h
                     },
-                    onLoadCallback: y
-                  },
-                  `filter-${I}`
-                );
-              })
+                    F
+                  );
+                }),
+                /* @__PURE__ */ n(
+                  $,
+                  {
+                    layers: m.current,
+                    renderLayers: e.map(({ active: o }) => o),
+                    width: s,
+                    height: i,
+                    ref: y
+                  }
+                )
+              ]
             }
           ),
-          p
+          u
         ]
       }
     );
   }
 );
-l.displayName = "Widgets.ColorTool.ImageComposite";
-const z = l;
+C.displayName = "Widgets.ColorTool.ImageComposite";
+const J = C;
 export {
-  z as default
+  J as default
 };

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("react/jsx-runtime");require("context-filter-polyfill");const p=require("../../../hooks/useImage.cjs"),n=require("../utilities.cjs"),l=({width:t=600,height:s=600,url:i,color:c="transparent",filters:u={brightness:1},onLoadCallback:f,onChangeCallback:a,debug:m=!1})=>{const[o,d]=p.default({url:i,crossOrigin:"anonymous",onLoadCallback:f}),r=document.createElement("canvas"),e=r.getContext("2d");return e&&o&&d==="loaded"&&(e.canvas.width=t,e.canvas.height=s,e.clearRect(0,0,t,s),e.globalCompositeOperation="multiply",e.filter=n.getFilters(u),e.drawImage(o,0,0,t,s),n.updateColor(e,c,t,s),a&&a(r)),m?g.jsx("img",{src:r.toDataURL()}):null};l.displayName="Widgets.ColorTool.OffscreenFilter";const v=l;exports.default=v;

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

@@ -0,0 +1,15 @@
+import { FunctionComponent } from "react";
+export interface OffscreenFilterProps {
+    height?: number;
+    width?: number;
+    url: string;
+    color?: string;
+    filters?: {
+        [key: string]: number | undefined;
+    };
+    onLoadCallback?: () => void;
+    onChangeCallback?: (canvas: HTMLCanvasElement) => void;
+    debug?: boolean;
+}
+declare const OffscreenFilter: FunctionComponent<OffscreenFilterProps>;
+export default OffscreenFilter;

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

@@ -0,0 +1,28 @@
+import { jsx as u } from "react/jsx-runtime";
+import "context-filter-polyfill";
+import d from "../../../hooks/useImage.js";
+import { getFilters as g, updateColor as O } from "../utilities.js";
+const n = ({
+  width: t = 600,
+  height: r = 600,
+  url: c,
+  color: l = "transparent",
+  filters: m = {
+    brightness: 1
+  },
+  onLoadCallback: i,
+  onChangeCallback: s,
+  debug: f = !1
+}) => {
+  const [a, p] = d({
+    url: c,
+    crossOrigin: "anonymous",
+    onLoadCallback: i
+  }), o = document.createElement("canvas"), e = o.getContext("2d");
+  return e && a && p === "loaded" && (e.canvas.width = t, e.canvas.height = r, e.clearRect(0, 0, t, r), e.globalCompositeOperation = "multiply", e.filter = g(m), e.drawImage(a, 0, 0, t, r), O(e, l, t, r), s && s(o)), f ? /* @__PURE__ */ u("img", { src: o.toDataURL() }) : null;
+};
+n.displayName = "Widgets.ColorTool.OffscreenFilter";
+const C = n;
+export {
+  C as default
+};

package/dist/widgets/ColorTool/server.d.ts

@@ -0,0 +1,5 @@
+import { ExportFormat } from "skia-canvas";
+import { ImageFilter } from "./ColorTool";
+/** server safe renderer */
+declare const getFilteredImageBase64: (filters?: Array<ImageFilter>, format?: ExportFormat, width?: number, height?: number) => Promise<string>;
+export default getFilteredImageBase64;

package/dist/widgets/ColorTool/styles.cjs

@@ -1,14 +1,14 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("styled-components"),i=e=>e&&e.__esModule?e:{default:e},t=i(o),a=t.default.section`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),a=o=>o&&o.__esModule?o:{default:o},t=a(e),i=t.default.section`
   color: var(--neutral80, #404040);
   container: colorTool / inline-size;
-`,n="900px",r=t.default.div`
+`,r="900px",n=t.default.div`
   --widget-areas: "image" "title" "controls" "actions";
   display: grid;
   gap: var(--color-tool-padding, var(--PADDING_SMALL, 20px));
   grid-template-areas: var(--widget-areas);
   grid-template-columns: 1fr;
 
-  @container colorTool (min-width: ${n}) {
+  @container colorTool (min-width: ${r}) {
     --widget-areas: "controls image" "actions actions" "title title";
     grid-template-columns: 1fr var(--image-width, 1fr);
   }
@@ -44,23 +44,11 @@
   grid-area: controls;
   gap: var(--color-tool-padding, var(--PADDING_SMALL, 20px));
   align-items: center;
-`,s=t.default.canvas`
-  user-select: none;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  mix-blend-mode: screen;
-  opacity: var(--image-opacity, 0);
-  visibility: var(--image-visibility, hidden);
-`,c=t.default.div`
+`,s=t.default.div`
   position: absolute;
   top: var(--color-tool-padding, var(--PADDING_SMALL, 20px));
   left: var(--color-tool-padding, var(--PADDING_SMALL, 20px));
   width: calc(100% - var(--color-tool-padding, var(--PADDING_SMALL, 20px)) * 2);
-`,g=t.default.div`
+`,c=t.default.div`
   font-weight: var(--FONT_WEIGHT_BOLD, 600);
-`;exports.ControlsContainer=d;exports.Image=s;exports.SelectionContainer=c;exports.Title=l;exports.ToolsHeader=g;exports.WidgetContainer=a;exports.WidgetLayout=r;
+`;exports.ControlsContainer=d;exports.SelectionContainer=s;exports.Title=l;exports.ToolsHeader=c;exports.WidgetContainer=i;exports.WidgetLayout=n;