{"version":3,"file":"Mask.js","names":[],"sources":["esm/platform/effects/Mask.js"],"sourcesContent":["import { isValidElement, useEffect, useRef, useState } from \"react\";\nimport { DomView } from \"../web/DomView\";\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nlet warnedInvalidMask = false;\nfunction image(node, width, height) {\n  const clone = node.cloneNode(true);\n  const sources = [node, ...node.querySelectorAll(\"*\")];\n  const copies = [clone, ...clone.querySelectorAll(\"*\")];\n  sources.forEach((source, index) => {\n    const style = getComputedStyle(source);\n    const copy = copies[index];\n    for (const property of Array.from(style))\n      copy.style.setProperty(property, style.getPropertyValue(property));\n  });\n  clone.style.opacity = \"1\";\n  const content = new XMLSerializer().serializeToString(clone);\n  return `url(\"data:image/svg+xml,${encodeURIComponent(`<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"${width}\" height=\"${height}\"><foreignObject width=\"100%\" height=\"100%\">${content}</foreignObject></svg>`)}\")`;\n}\nfunction Mask({ maskElement, children, ...props }) {\n  const ref = useRef(null);\n  const [mask, setMask] = useState();\n  const valid = isValidElement(maskElement);\n  useEffect(() => {\n    if (!valid) {\n      if (!warnedInvalidMask) {\n        warnedInvalidMask = true;\n        console.warn(\n          \"Mask: invalid `maskElement` prop was passed to Mask. expected a React element. no mask will render.\"\n        );\n      }\n      return;\n    }\n    const node = ref.current;\n    if (!node) return;\n    const update = () => {\n      const width = node.clientWidth, height = node.clientHeight;\n      if (width && height) setMask(image(node, width, height));\n    };\n    const resize = new ResizeObserver(update);\n    const mutations = new MutationObserver(update);\n    resize.observe(node);\n    mutations.observe(node, {\n      subtree: true,\n      attributes: true,\n      characterData: true,\n      childList: true\n    });\n    node.addEventListener(\"load\", update, true);\n    update();\n    return () => {\n      resize.disconnect();\n      mutations.disconnect();\n      node.removeEventListener(\"load\", update, true);\n    };\n  }, [valid, maskElement]);\n  return /* @__PURE__ */ jsxs(DomView, { ...props, children: [\n    valid && /* @__PURE__ */ jsx(\n      \"div\",\n      {\n        ref,\n        \"aria-hidden\": true,\n        style: {\n          position: \"absolute\",\n          inset: 0,\n          pointerEvents: \"none\",\n          opacity: 0,\n          overflow: \"hidden\"\n        },\n        children: maskElement\n      }\n    ),\n    /* @__PURE__ */ jsx(\n      \"div\",\n      {\n        style: {\n          display: \"flex\",\n          flexDirection: \"column\",\n          flex: 1,\n          minWidth: 0,\n          minHeight: 0,\n          ...valid && {\n            maskImage: mask ?? \"linear-gradient(transparent,transparent)\",\n            WebkitMaskImage: mask ?? \"linear-gradient(transparent,transparent)\",\n            maskMode: \"alpha\",\n            maskSize: \"100% 100%\",\n            maskRepeat: \"no-repeat\"\n          }\n        },\n        children\n      }\n    )\n  ] });\n}\nexport {\n  Mask\n};\n//# sourceMappingURL=Mask.js.map\n"],"mappings":";;;;;AAGA,IAAI,oBAAoB;AACxB,SAAS,MAAM,MAAM,OAAO,QAAQ;CAClC,MAAM,QAAQ,KAAK,UAAU,IAAI;CACjC,MAAM,UAAU,CAAC,MAAM,GAAG,KAAK,iBAAiB,GAAG,CAAC;CACpD,MAAM,SAAS,CAAC,OAAO,GAAG,MAAM,iBAAiB,GAAG,CAAC;CACrD,QAAQ,SAAS,QAAQ,UAAU;EACjC,MAAM,QAAQ,iBAAiB,MAAM;EACrC,MAAM,OAAO,OAAO;EACpB,KAAK,MAAM,YAAY,MAAM,KAAK,KAAK,GACrC,KAAK,MAAM,YAAY,UAAU,MAAM,iBAAiB,QAAQ,CAAC;CACrE,CAAC;CACD,MAAM,MAAM,UAAU;CACtB,MAAM,UAAU,IAAI,cAAc,CAAC,CAAC,kBAAkB,KAAK;CAC3D,OAAO,2BAA2B,mBAAmB,kDAAkD,MAAM,YAAY,OAAO,8CAA8C,QAAQ,uBAAuB,EAAE;AACjN;AACA,SAAS,KAAK,EAAE,aAAa,UAAU,GAAG,SAAS;CACjD,MAAM,MAAM,OAAO,IAAI;CACvB,MAAM,CAAC,MAAM,WAAW,SAAS;CACjC,MAAM,QAAQ,eAAe,WAAW;CACxC,gBAAgB;EACd,IAAI,CAAC,OAAO;GACV,IAAI,CAAC,mBAAmB;IACtB,oBAAoB;IACpB,QAAQ,KACN,qGACF;GACF;GACA;EACF;EACA,MAAM,OAAO,IAAI;EACjB,IAAI,CAAC,MAAM;EACX,MAAM,eAAe;GACnB,MAAM,QAAQ,KAAK,aAAa,SAAS,KAAK;GAC9C,IAAI,SAAS,QAAQ,QAAQ,MAAM,MAAM,OAAO,MAAM,CAAC;EACzD;EACA,MAAM,SAAS,IAAI,eAAe,MAAM;EACxC,MAAM,YAAY,IAAI,iBAAiB,MAAM;EAC7C,OAAO,QAAQ,IAAI;EACnB,UAAU,QAAQ,MAAM;GACtB,SAAS;GACT,YAAY;GACZ,eAAe;GACf,WAAW;EACb,CAAC;EACD,KAAK,iBAAiB,QAAQ,QAAQ,IAAI;EAC1C,OAAO;EACP,aAAa;GACX,OAAO,WAAW;GAClB,UAAU,WAAW;GACrB,KAAK,oBAAoB,QAAQ,QAAQ,IAAI;EAC/C;CACF,GAAG,CAAC,OAAO,WAAW,CAAC;CACvB,OAAuB,qBAAK,SAAS;EAAE,GAAG;EAAO,UAAU,CACzD,SAAyB,oBACvB,OACA;GACE;GACA,eAAe;GACf,OAAO;IACL,UAAU;IACV,OAAO;IACP,eAAe;IACf,SAAS;IACT,UAAU;GACZ;GACA,UAAU;EACZ,CACF,GACgB,oBACd,OACA;GACE,OAAO;IACL,SAAS;IACT,eAAe;IACf,MAAM;IACN,UAAU;IACV,WAAW;IACX,GAAG,SAAS;KACV,WAAW,QAAQ;KACnB,iBAAiB,QAAQ;KACzB,UAAU;KACV,UAAU;KACV,YAAY;IACd;GACF;GACA;EACF,CACF,CACF;CAAE,CAAC;AACL"}