polotno 4.2.1 → 4.2.2

package/side-panel/upload-panel.d.ts

@@ -1,11 +1,9 @@
 import * as React from "react";
 import type { StoreType } from "../ui-types.js";
-declare let uploadFunc: (file: File) => Promise<string>;
-export declare function setUploadFunc(func: typeof uploadFunc): void;
+export { setUploadFunc } from "../utils/file.js";
 export declare const UploadPanel: ({ store }: {
     store: StoreType;
 }) => React.JSX.Element;
 export type UploadPanelProps = {
     store: StoreType;
 };
-export {};

package/side-panel/upload-panel.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as i from"react";import{PolotnoIcon as o}from"../icons/registry.js";import{getVideoPreview as r}from"../utils/video.js";import{localFileToURL as s}from"../utils/file.js";import{ImagesGrid as n}from"./images-grid.js";import{t as l}from"../utils/l10n.js";import{selectImage as a}from"./select-image.js";import{selectVideo as d}from"./select-video.js";import{selectSvg as c}from"./select-svg.js";import{selectGif as p}from"./select-gif.js";import{Button as m}from"../primitives/button.js";let f=async e=>s(e);export function setUploadFunc(e){f=e}let u=[];function g(e){const{type:t}=e;return t.indexOf("svg")>=0?"svg":t.indexOf("gif")>=0?"gif":t.indexOf("image")>=0?"image":t.indexOf("video")>=0?"video":t.indexOf("audio")>=0?"audio":"image"}function v(){const e=new Blob(['\n    <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">\n      <circle cx="50" cy="50" r="45" fill="#f0f0f0" stroke="#ccc" stroke-width="2"/>\n      <path d="M40,35 L40,65 L55,50 L70,50 M70,35 Q80,50 70,65" fill="none" stroke="#666" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>\n    </svg>\n  '],{type:"image/svg+xml"});return URL.createObjectURL(e)}export const UploadPanel=({store:s})=>{const[h,x]=i.useState(u),[y,j]=i.useState(!1),w=i.useRef(null);return i.useEffect(()=>{u=h},[h]),t("div",{className:"pn:flex pn:h-full pn:flex-col",children:[e("div",{style:{height:"45px",paddingTop:"5px"},children:l("sidePanel.uploadTip")}),e("div",{style:{marginBottom:"20px"},children:t("label",{htmlFor:"input-file",children:[t(m,{variant:"outline",style:{width:"100%"},onClick:()=>{var e;null===(e=w.current)||void 0===e||e.click()},children:[e(o,{name:"action.add"}),l("sidePanel.uploadImage")]}),e("input",{type:"file",ref:w,style:{display:"none"},onChange:async e=>{var t;const{target:i}=e;j(!0);try{for(const e of Array.from(null!==(t=i.files)&&void 0!==t?t:[])){const t=await f(e),i=g(e);let o=t;"video"===i?o=await r(t):"audio"===i&&(o=v()),x(e=>e.concat([{url:t,type:i,preview:o}]))}}catch(e){console.error(e)}j(!1),i.value=""},multiple:!0})]})}),e(n,{images:h,isLoading:y,getPreview:e=>e.preview,hideNoResults:!0,onSelect:async(e,t,i)=>{const o=e.url,r=e.type;"image"===r?a({src:o,store:s,droppedPos:t,targetElement:i}):"video"===r?d({src:o,store:s,droppedPos:t,targetElement:i}):"gif"===r?p({src:o,store:s,droppedPos:t,targetElement:i}):"svg"===r?c({src:o,store:s,droppedPos:t,targetElement:i}):"audio"===r&&s.addAudio({src:o})}})]})};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as i from"react";import{PolotnoIcon as r}from"../icons/registry.js";import{getVideoPreview as o}from"../utils/video.js";import{getType as l,getUploadFunc as s}from"../utils/file.js";import{insertMediaIntoPage as n}from"../utils/insert-file.js";import{ImagesGrid as a}from"./images-grid.js";import{t as c}from"../utils/l10n.js";import{Button as p}from"../primitives/button.js";export{setUploadFunc}from"../utils/file.js";let d=[];function m(){const e=new Blob(['\n    <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">\n      <circle cx="50" cy="50" r="45" fill="#f0f0f0" stroke="#ccc" stroke-width="2"/>\n      <path d="M40,35 L40,65 L55,50 L70,50 M70,35 Q80,50 70,65" fill="none" stroke="#666" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>\n    </svg>\n  '],{type:"image/svg+xml"});return URL.createObjectURL(e)}export const UploadPanel=({store:u})=>{const[f,g]=i.useState(d),[h,v]=i.useState(!1),y=i.useRef(null);return i.useEffect(()=>{d=f},[f]),t("div",{className:"pn:flex pn:h-full pn:flex-col",children:[e("div",{style:{height:"45px",paddingTop:"5px"},children:c("sidePanel.uploadTip")}),e("div",{style:{marginBottom:"20px"},children:t("label",{htmlFor:"input-file",children:[t(p,{variant:"outline",style:{width:"100%"},onClick:()=>{var e;null===(e=y.current)||void 0===e||e.click()},children:[e(r,{name:"action.add"}),c("sidePanel.uploadImage")]}),e("input",{type:"file",ref:y,style:{display:"none"},onChange:async e=>{var t;const{target:i}=e;v(!0);try{for(const e of Array.from(null!==(t=i.files)&&void 0!==t?t:[])){const t=await s()(e),i=l(e);let r=t;"video"===i?r=await o(t):"audio"===i&&(r=m()),g(e=>e.concat([{url:t,type:i,preview:r}]))}}catch(e){console.error(e)}v(!1),i.value=""},multiple:!0})]})}),e(a,{images:f,isLoading:h,getPreview:e=>e.preview,hideNoResults:!0,onSelect:async(e,t,i)=>{n({url:e.url,type:e.type,store:u,droppedPos:t,targetElement:i})}})]})};

package/toolbar/html-toolbar.js

@@ -1,4 +1,4 @@
-import{jsx as t,jsxs as e}from"react/jsx-runtime";import o from"react";import{observer as n}from"mobx-react-lite";import{PolotnoIcon as i}from"../icons/registry.js";import{Button as l}from"../primitives/button.js";import{Tooltip as r,TooltipContent as s,TooltipTrigger as a}from"../primitives/tooltip.js";import{TooltipIconButton as c}from"../primitives/tooltip-icon-button.js";import{ColorPicker as m}from"./color-picker.js";import p from"./filters-picker.js";import{ElementContainer as u,extendToolbar as d}from"./element-container.js";import f from"../utils/styled.js";import{AnimationsPicker as x}from"./animations-picker.js";import{flags as g}from"../utils/flags.js";import{TextAiWrite as v}from"./text-ai-write.js";import{t as h}from"../utils/l10n.js";import{quillRef as b,createQuill as T,setQuillContent as y}from"../canvas/html-element.js";import{FontMenu as F,fetcher as S,TextSpacing as z,TextFontSize as j,TextTransform as C,ALIGN_OPTIONS as w,VERTICAL_ALIGN_OPTIONS as A,VERTICAL_ALIGN_ICONS as D}from"./text-toolbar.js";import{cycleNext as N}from"./toolbar-shared.js";import E from"swr";import{getFontsList as k,globalFonts as I,isGoogleFontChanged as L}from"../utils/fonts.js";import{getGoogleFontsListAPI as M}from"../utils/api.js";import{normalizeRichTextHtml as B,listEffectiveFontFamilies as R,isBoldWeight as W}from"../utils/rich-text-html.js";import{patchTextFormat as _}from"../utils/text-format.js";import{useTextFormat as O,getActiveTextEditor as P,resolveSelectionScope as V,applyToLiveEditor as G}from"../utils/text-format-state.js";const H=f("div")`
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import o from"react";import{observer as n}from"mobx-react-lite";import{PolotnoIcon as i}from"../icons/registry.js";import{Button as l}from"../primitives/button.js";import{Tooltip as r,TooltipContent as s,TooltipTrigger as a}from"../primitives/tooltip.js";import{TooltipIconButton as c}from"../primitives/tooltip-icon-button.js";import{ColorPicker as m}from"./color-picker.js";import p from"./filters-picker.js";import{ElementContainer as u,extendToolbar as d}from"./element-container.js";import f from"../utils/styled.js";import{AnimationsPicker as x}from"./animations-picker.js";import{flags as g}from"../utils/flags.js";import{TextAiWrite as v}from"./text-ai-write.js";import{t as h}from"../utils/l10n.js";import{quillRef as b,createQuill as T,setQuillContent as y}from"../canvas/html-element.js";import{FontMenu as F,fetcher as S,TextSpacing as z,TextFontSize as j,TextTransform as C,ALIGN_OPTIONS as A,VERTICAL_ALIGN_OPTIONS as D,VERTICAL_ALIGN_ICONS as N}from"./text-toolbar.js";import{cycleNext as w}from"./toolbar-shared.js";import E from"swr";import{getFontsList as k,globalFonts as L,isGoogleFontChanged as I}from"../utils/fonts.js";import{getGoogleFontsListAPI as M}from"../utils/api.js";import{normalizeRichTextHtml as B,listEffectiveFontFamilies as R,isBoldWeight as W}from"../utils/rich-text-html.js";import{patchTextFormat as O}from"../utils/text-format.js";import{useTextFormat as P,getActiveTextEditor as V,resolveSelectionScope as _,applyToLiveEditor as G}from"../utils/text-format-state.js";const H=f("div")`
   position: relative;
   display: inline-block;
 
@@ -8,7 +8,7 @@ import{jsx as t,jsxs as e}from"react/jsx-runtime";import o from"react";import{ob
   &.polotno-mixed:focus-within input {
     color: inherit !important;
   }
-`,Q=f("span")`
+`,J=f("span")`
   position: absolute;
   left: 11px;
   top: 0;
@@ -22,4 +22,4 @@ import{jsx as t,jsxs as e}from"react/jsx-runtime";import o from"react";import{ob
   ${H}:focus-within & {
     display: none;
   }
-`,J=t=>{const e=P();return!!e&&e.store===t&&!!e.instance};let U=null;const X=()=>{b.pendingToolbarInteraction=!0,U&&clearTimeout(U),U=setTimeout(()=>{b.pendingToolbarInteraction=!1,U=null},100)},$=t=>{var e;(!(e=t.target)||"INPUT"!==e.tagName&&"TEXTAREA"!==e.tagName&&"SELECT"!==e.tagName&&!e.isContentEditable)&&t.preventDefault(),X()},q=n(({store:e,isActive:o,toggle:n,icon:i,ariaLabel:l,tooltipContent:r})=>{const{format:s,applyTextFormat:a}=O(e);return t(c,{label:r||l||"",side:"bottom",active:o(s),onMouseDown:t=>{t.preventDefault()},onClick:()=>n(s,a),children:i})});function K(t,e){const o=t.textDecoration.value||"",n="underline"===e?"line-through":"underline";return[!o.split(/\s+/).includes(e)&&e,o.split(/\s+/).includes(n)&&n].filter(Boolean).join(" ")}export const TextBold=n(({store:e})=>t(q,{store:e,isActive:t=>W(t.fontWeight.value),toggle:(t,e)=>e({fontWeight:W(t.fontWeight.value)?400:700}),icon:t(i,{name:"text.bold",className:"pn:size-4"}),tooltipContent:h("toolbar.bold")}));export const FontStyleGroup=n(({element:o,store:n,elements:m,components:p})=>{const u=(null==p?void 0:p.TextBold)||TextBold;return e("div",{className:"pn:flex pn:items-center pn:gap-0.5",children:[t(u,{element:o,store:n}),t(q,{store:n,isActive:t=>"italic"===t.fontStyle.value,toggle:(t,e)=>e({fontStyle:"italic"===t.fontStyle.value?"normal":"italic"}),icon:t(i,{name:"text.italic",className:"pn:size-4"}),tooltipContent:h("toolbar.italic")}),t(q,{store:n,isActive:t=>{var e;return!!(null===(e=t.textDecoration.value)||void 0===e?void 0:e.split(/\s+/).includes("underline"))},toggle:(t,e)=>e({textDecoration:K(t,"underline")}),icon:t(i,{name:"text.underline",className:"pn:size-4"}),tooltipContent:h("toolbar.underline")}),t(q,{store:n,isActive:t=>{var e;return!!(null===(e=t.textDecoration.value)||void 0===e?void 0:e.split(/\s+/).includes("line-through"))},toggle:(t,e)=>e({textDecoration:K(t,"line-through")}),icon:t(i,{name:"text.strikethrough",className:"pn:size-4"}),tooltipContent:h("toolbar.strikethrough")}),t(c,{label:h("toolbar.textAlign"),side:"bottom",onClick:()=>{const t=N(w,o.align);n.history.transaction(()=>{m.forEach(e=>{e.set({align:t})})})},children:"left"===o.align?t(i,{name:"text.alignLeft",className:"pn:size-4"}):"center"===o.align?t(i,{name:"text.alignCenter",className:"pn:size-4"}):"right"===o.align?t(i,{name:"text.alignRight",className:"pn:size-4"}):t(i,{name:"text.alignJustify",className:"pn:size-4"})}),g.textVerticalResizeEnabled&&e(r,{children:[t(a,{render:t(l,{variant:"ghost",size:"icon-sm",onClick:()=>{const t=N(A,o.verticalAlign);n.history.transaction(()=>{o.set({verticalAlign:t})})},"aria-label":h("toolbar.verticalAlign"),children:D[o.verticalAlign]})}),t(s,{side:"bottom",children:h("toolbar.verticalAlign")})]}),t(c,{label:h("toolbar.listFormat"),side:"bottom",onMouseDown:t=>{t.preventDefault()},onClick:()=>{let t=window.__polotnoQuill;const e=!t;t=t||(({html:t})=>{const e=document.createElement("div");document.body.appendChild(e),e.style.display="none",e.style.whiteSpace="pre-wrap";const o=T(e);return y(o,t),o})({html:o.text}),e&&t.setSelection(0,t.getLength(),"api");const n=t.getFormat();n.list?"bullet"===n.list?t.format("list","ordered"):t.format("list",!1):t.format("list","bullet"),e&&(o.set({text:B(t.root.innerHTML,{fontSize:o.fontSize,fontFamily:o.fontFamily})}),(t=>{t.root.parentElement.remove()})(t))},children:(()=>{const e=window.__polotnoQuill;return"bullet"===(e?e.getFormat(e.getSelection()):{}).list?t(i,{name:"text.numberedList",className:"pn:size-5"}):t(i,{name:"text.bulletList",className:"pn:size-5"})})()})]})});export const FontColorInput=n(({element:e,store:o})=>{var n;const{format:i,applyTextFormat:l}=O(o);return t("div",{"data-polotno-keep-focus":!0,onMouseDown:$,children:t(m,{value:null!==(n=i.fill.value)&&void 0!==n?n:e.fill,gradientEnabled:!0,onClose:()=>{const t=P();(null==t?void 0:t.instance)&&t.lastSelection&&t.instance.setSelection(t.lastSelection)},onChange:t=>l({fill:t}),store:o})})});export const DirectionInput=n(({element:e})=>{const o="rtl"===e.dir,n=h("toolbar.textDirection");return t(c,{label:n,side:"bottom",onClick:()=>{e.set({dir:o?"ltr":"rtl"})},children:t(i,o?{name:"text.paragraph",className:"pn:size-5 pn:-scale-x-100"}:{name:"text.richText",className:"pn:size-5"})})});const Y=k(),Z={TextFontFamily:n(({elements:e,store:n})=>{var i;const{format:l,applyTextFormat:r}=O(n),s=J(n),a=l.fontFamily.mixed,c=a?Array.from(new Set(e.flatMap(t=>R(t.text,t.fontFamily)))).sort((t,e)=>t.localeCompare(e,void 0,{sensitivity:"base"})):void 0,[m,p]=o.useState(!1),{data:u,mutate:d}=E(m?M():null,S,{isPaused:()=>L(),fallbackData:[]});o.useEffect(()=>{d()},[L()]);const f=n.fonts.concat(I).map(t=>t.fontFamily).concat((null==u?void 0:u.length)&&!L()?u:Y),x=[];n.find(t=>("text"===t.type&&x.push(t.fontFamily),!1));const g=[...new Set(x.concat("_divider").concat(f))],v=null!==(i=l.fontFamily.value)&&void 0!==i?i:e[0].fontFamily;let h=v;h.length>15&&(h=h.slice(0,15)+"...");const b=t(F,{fonts:g,activeFont:v,activeFontLabel:h,store:n,mixed:a,mixedFonts:c,open:m,onOpenChange:p,onFontSelect:t=>r({fontFamily:t})});return s?t("div",{"data-polotno-keep-focus":!0,onMouseDown:$,children:b}):b}),TextFontSize:n(({elements:o,store:n})=>{const{format:i}=O(n),l=J(n),r=i.fontSize.mixed,s=i.fontSize.value,a=o.map(t=>new Proxy(t,{get:(t,e)=>"fontSize"===e?null!=s?s:t.fontSize:"set"===e?e=>((t,e)=>{if(!e.fontSize){return void t.set(e)}const o=P();if(o&&o.store===n&&o.instance){const{scope:t,isEmpty:n}=V(o.instance,o.lastSelection);if("partial"===t||"collapsed"===t&&n){return void G(o.instance,{fontSize:e.fontSize},o.lastSelection)}}const{attrsToSet:i}=_(t,{fontSize:e.fontSize});t.set(Object.assign(Object.assign({},e),i))})(t,e):Reflect.get(t,e)})),c=e(H,{className:r?"polotno-mixed":"",children:[t(j,{elements:a,store:n}),r&&t(Q,{"aria-hidden":!0,children:"—"})]});return l?t("div",{"data-polotno-keep-focus":!0,onMouseDown:X,children:c}):c}),TextFontVariant:FontStyleGroup,TextTransform:C,TextFilters:p,TextFill:FontColorInput,TextSpacing:z,TextDirection:DirectionInput,TextAnimations:x,TextAiWrite:v};export const HtmlToolbar=n(({store:e,components:o})=>{const n=e.selectedElements,i=e.selectedElements[0],l=["TextFill","TextFontFamily","TextFontSize","TextFontVariant","TextSpacing","TextTransform","TextFilters",g.animationsEnabled&&"TextAnimations",g.aiTextEnabled&&"TextAiWrite"],r=d({type:"text",usedItems:l,components:o});return t(u,{items:r,itemRender:l=>{if("TextBold"===l){return null}const r=(null==o?void 0:o[l])||Z[l];return t(r,{element:i,elements:n,store:e,components:o},l)}})});
+`,Q=t=>{const e=V();return!!e&&e.store===t&&!!e.instance};let U=null;const X=()=>{b.pendingToolbarInteraction=!0,U&&clearTimeout(U),U=setTimeout(()=>{b.pendingToolbarInteraction=!1,U=null},100)},$=t=>{var e;(!(e=t.target)||"INPUT"!==e.tagName&&"TEXTAREA"!==e.tagName&&"SELECT"!==e.tagName&&!e.isContentEditable)&&t.preventDefault(),X()},q=n(({store:e,isActive:o,toggle:n,icon:i,ariaLabel:l,tooltipContent:r})=>{const{format:s,applyTextFormat:a}=P(e);return t(c,{label:r||l||"",side:"bottom",active:o(s),onMouseDown:t=>{t.preventDefault()},onClick:()=>n(s,a),children:i})});function K(t,e){const o=t.textDecoration.value||"",n="underline"===e?"line-through":"underline";return[!o.split(/\s+/).includes(e)&&e,o.split(/\s+/).includes(n)&&n].filter(Boolean).join(" ")}export const TextBold=n(({store:e})=>t(q,{store:e,isActive:t=>W(t.fontWeight.value),toggle:(t,e)=>e({fontWeight:W(t.fontWeight.value)?400:700}),icon:t(i,{name:"text.bold",className:"pn:size-4"}),tooltipContent:h("toolbar.bold")}));export const FontStyleGroup=n(({element:o,store:n,elements:m,components:p})=>{const u=(null==p?void 0:p.TextBold)||TextBold;return e("div",{className:"pn:flex pn:items-center pn:gap-0.5",children:[t(u,{element:o,store:n}),t(q,{store:n,isActive:t=>"italic"===t.fontStyle.value,toggle:(t,e)=>e({fontStyle:"italic"===t.fontStyle.value?"normal":"italic"}),icon:t(i,{name:"text.italic",className:"pn:size-4"}),tooltipContent:h("toolbar.italic")}),t(q,{store:n,isActive:t=>{var e;return!!(null===(e=t.textDecoration.value)||void 0===e?void 0:e.split(/\s+/).includes("underline"))},toggle:(t,e)=>e({textDecoration:K(t,"underline")}),icon:t(i,{name:"text.underline",className:"pn:size-4"}),tooltipContent:h("toolbar.underline")}),t(q,{store:n,isActive:t=>{var e;return!!(null===(e=t.textDecoration.value)||void 0===e?void 0:e.split(/\s+/).includes("line-through"))},toggle:(t,e)=>e({textDecoration:K(t,"line-through")}),icon:t(i,{name:"text.strikethrough",className:"pn:size-4"}),tooltipContent:h("toolbar.strikethrough")}),t(c,{label:h("toolbar.textAlign"),side:"bottom",onClick:()=>{const t=w(A,o.align);n.history.transaction(()=>{m.forEach(e=>{e.set({align:t})})})},children:"left"===o.align?t(i,{name:"text.alignLeft",className:"pn:size-4"}):"center"===o.align?t(i,{name:"text.alignCenter",className:"pn:size-4"}):"right"===o.align?t(i,{name:"text.alignRight",className:"pn:size-4"}):t(i,{name:"text.alignJustify",className:"pn:size-4"})}),g.textVerticalResizeEnabled&&e(r,{children:[t(a,{render:t(l,{variant:"ghost",size:"icon-sm",onClick:()=>{const t=w(D,o.verticalAlign);n.history.transaction(()=>{o.set({verticalAlign:t})})},"aria-label":h("toolbar.verticalAlign"),children:N[o.verticalAlign]})}),t(s,{side:"bottom",children:h("toolbar.verticalAlign")})]}),t(c,{label:h("toolbar.listFormat"),side:"bottom",onMouseDown:t=>{t.preventDefault()},onClick:()=>{var t;let e=window.__polotnoQuill;const n=!e;e=e||(({html:t})=>{const e=document.createElement("div");document.body.appendChild(e),e.style.display="none",e.style.whiteSpace="pre-wrap";const o=T(e);return y(o,t),o})({html:o.text}),n&&e.setSelection(0,e.getLength(),"api");const i=e.getSelection(!0)||(null===(t=V())||void 0===t?void 0:t.lastSelection)||{index:0,length:e.getLength()},l=e.getFormat(i);l.list?"bullet"===l.list?e.format("list","ordered"):e.format("list",!1):e.format("list","bullet"),n&&(o.set({text:B(e.root.innerHTML,{fontSize:o.fontSize,fontFamily:o.fontFamily})}),(t=>{t.root.parentElement.remove()})(e))},children:(()=>{const e=V();return"bullet"===(e&&e.store===n?e.currentFormat:{}).list?t(i,{name:"text.numberedList",className:"pn:size-5"}):t(i,{name:"text.bulletList",className:"pn:size-5"})})()})]})});export const FontColorInput=n(({element:e,store:o})=>{var n;const{format:i,applyTextFormat:l}=P(o);return t("div",{"data-polotno-keep-focus":!0,onMouseDown:$,children:t(m,{value:null!==(n=i.fill.value)&&void 0!==n?n:e.fill,gradientEnabled:!0,onClose:()=>{const t=V();(null==t?void 0:t.instance)&&t.lastSelection&&t.instance.setSelection(t.lastSelection)},onChange:t=>l({fill:t}),store:o})})});export const DirectionInput=n(({element:e})=>{const o="rtl"===e.dir,n=h("toolbar.textDirection");return t(c,{label:n,side:"bottom",onClick:()=>{e.set({dir:o?"ltr":"rtl"})},children:t(i,o?{name:"text.paragraph",className:"pn:size-5 pn:-scale-x-100"}:{name:"text.richText",className:"pn:size-5"})})});const Y=k(),Z={TextFontFamily:n(({elements:e,store:n})=>{var i;const{format:l,applyTextFormat:r}=P(n),s=Q(n),a=l.fontFamily.mixed,c=a?Array.from(new Set(e.flatMap(t=>R(t.text,t.fontFamily)))).sort((t,e)=>t.localeCompare(e,void 0,{sensitivity:"base"})):void 0,[m,p]=o.useState(!1),{data:u,mutate:d}=E(m?M():null,S,{isPaused:()=>I(),fallbackData:[]});o.useEffect(()=>{d()},[I()]);const f=n.fonts.concat(L).map(t=>t.fontFamily).concat((null==u?void 0:u.length)&&!I()?u:Y),x=[];n.find(t=>("text"===t.type&&x.push(t.fontFamily),!1));const g=[...new Set(x.concat("_divider").concat(f))],v=null!==(i=l.fontFamily.value)&&void 0!==i?i:e[0].fontFamily;let h=v;h.length>15&&(h=h.slice(0,15)+"...");const b=t(F,{fonts:g,activeFont:v,activeFontLabel:h,store:n,mixed:a,mixedFonts:c,open:m,onOpenChange:p,onFontSelect:t=>r({fontFamily:t})});return s?t("div",{"data-polotno-keep-focus":!0,onMouseDown:$,children:b}):b}),TextFontSize:n(({elements:o,store:n})=>{const{format:i}=P(n),l=Q(n),r=i.fontSize.mixed,s=i.fontSize.value,a=o.map(t=>new Proxy(t,{get:(t,e)=>"fontSize"===e?null!=s?s:t.fontSize:"set"===e?e=>((t,e)=>{if(!e.fontSize){return void t.set(e)}const o=V();if(o&&o.store===n&&o.instance){const{scope:t,isEmpty:n}=_(o.instance,o.lastSelection);if("partial"===t||"collapsed"===t&&n){return void G(o.instance,{fontSize:e.fontSize},o.lastSelection)}}const{attrsToSet:i}=O(t,{fontSize:e.fontSize});t.set(Object.assign(Object.assign({},e),i))})(t,e):Reflect.get(t,e)})),c=e(H,{className:r?"polotno-mixed":"",children:[t(j,{elements:a,store:n}),r&&t(J,{"aria-hidden":!0,children:"—"})]});return l?t("div",{"data-polotno-keep-focus":!0,onMouseDown:X,children:c}):c}),TextFontVariant:FontStyleGroup,TextTransform:C,TextFilters:p,TextFill:FontColorInput,TextSpacing:z,TextDirection:DirectionInput,TextAnimations:x,TextAiWrite:v};export const HtmlToolbar=n(({store:e,components:o})=>{const n=e.selectedElements,i=e.selectedElements[0],l=["TextFill","TextFontFamily","TextFontSize","TextFontVariant","TextSpacing","TextTransform","TextFilters",g.animationsEnabled&&"TextAnimations",g.aiTextEnabled&&"TextAiWrite"],r=d({type:"text",usedItems:l,components:o});return t(u,{items:r,itemRender:l=>{if("TextBold"===l){return null}const r=(null==o?void 0:o[l])||Z[l];return t(r,{element:i,elements:n,store:e,components:o},l)}})});

package/utils/base64.d.ts

@@ -0,0 +1,2 @@
+export declare const decodeBase64: (value: string) => Uint8Array;
+export declare const encodeBase64: (bytes: Uint8Array) => string;

package/utils/base64.js

@@ -0,0 +1 @@
+const e=()=>"undefined"!=typeof globalThis?globalThis.Buffer:void 0;export const decodeBase64=o=>{if("function"==typeof atob){const e=atob(o),t=new Uint8Array(e.length);for(let o=0;o<e.length;o++){t[o]=e.charCodeAt(o)}return t}const t=e();if(t){return new Uint8Array(t.from(o,"base64"))}throw new Error("No base64 decoder available")};export const encodeBase64=o=>{if("function"==typeof btoa){let e="";for(let t=0;t<o.length;t++){e+=String.fromCharCode(o[t])}return btoa(e)}const t=e();if(t){return t.from(o).toString("base64")}throw new Error("No base64 encoder available")};

package/utils/clipboard.d.ts

@@ -4,3 +4,362 @@ export declare const cut: (store: StoreType) => void;
 export declare const paste: (store: StoreType) => void;
 export declare const isClipboardEmpty: () => boolean;
 export declare const resetClipboard: () => void;
+export declare const copyToEvent: (store: StoreType, e: ClipboardEvent) => boolean;
+export declare const cutToEvent: (store: StoreType, e: ClipboardEvent) => boolean;
+export declare const insertTextElement: (store: StoreType, text: string, extra?: Record<string, any>) => (import("mobx-state-tree").ModelInstanceTypeProps<{
+    id: import("mobx-state-tree").ISimpleType<string>;
+    type: import("mobx-state-tree").IType<string | undefined, string, string>;
+    name: import("mobx-state-tree").IType<string | undefined, string, string>;
+    opacity: import("mobx-state-tree").IType<number | undefined, number, number>;
+    custom: import("mobx-state-tree").IType<any, any, any>;
+    visible: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    selectable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    removable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    alwaysOnTop: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    showInExport: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+} & {
+    x: import("mobx-state-tree").IType<number | undefined, number, number>;
+    y: import("mobx-state-tree").IType<number | undefined, number, number>;
+    width: import("mobx-state-tree").IType<number | undefined, number, number>;
+    height: import("mobx-state-tree").IType<number | undefined, number, number>;
+    rotation: import("mobx-state-tree").IType<number | undefined, number, number>;
+    opacity: import("mobx-state-tree").IType<number | undefined, number, number>;
+    animations: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
+        delay: import("mobx-state-tree").IType<number | undefined, number, number>;
+        duration: import("mobx-state-tree").IType<number | undefined, number, number>;
+        enabled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        type: import("mobx-state-tree").ISimpleType<"exit" | "enter" | "loop">;
+        name: import("mobx-state-tree").IType<string | undefined, string, string>;
+        data: import("mobx-state-tree").IType<{} | null | undefined, {}, {}>;
+    }, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+    blurEnabled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    blurRadius: import("mobx-state-tree").IType<number | undefined, number, number>;
+    brightnessEnabled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    brightness: import("mobx-state-tree").IType<number | undefined, number, number>;
+    sepiaEnabled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    grayscaleEnabled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    filters: import("mobx-state-tree").IMapType<import("mobx-state-tree").IModelType<{
+        intensity: import("mobx-state-tree").IType<number | undefined, number, number>;
+    }, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+    shadowEnabled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    shadowBlur: import("mobx-state-tree").IType<number | undefined, number, number>;
+    shadowOffsetX: import("mobx-state-tree").IType<number | undefined, number, number>;
+    shadowOffsetY: import("mobx-state-tree").IType<number | undefined, number, number>;
+    shadowColor: import("mobx-state-tree").IType<string | undefined, string, string>;
+    shadowOpacity: import("mobx-state-tree").IType<number | undefined, number, number>;
+    visible: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    draggable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    resizable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    selectable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    contentEditable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    styleEditable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    alwaysOnTop: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    showInExport: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+} & {
+    type: import("mobx-state-tree").IType<string | undefined, string, string>;
+    text: import("mobx-state-tree").IType<string | undefined, string, string>;
+    placeholder: import("mobx-state-tree").IType<string | undefined, string, string>;
+    fontSize: import("mobx-state-tree").IType<number | undefined, number, number>;
+    fontFamily: import("mobx-state-tree").IType<string | undefined, string, string>;
+    fontStyle: import("mobx-state-tree").IType<string | undefined, string, string>;
+    fontWeight: import("mobx-state-tree").IType<string | undefined, string, string>;
+    textDecoration: import("mobx-state-tree").IType<string | undefined, string, string>;
+    textTransform: import("mobx-state-tree").IType<string | undefined, string, string>;
+    fill: import("mobx-state-tree").IType<string | undefined, string, string>;
+    align: import("mobx-state-tree").IType<string | undefined, string, string>;
+    width: import("mobx-state-tree").IType<number | undefined, number, number>;
+    height: import("mobx-state-tree").IType<number | undefined, number, number>;
+    verticalAlign: import("mobx-state-tree").IType<string | undefined, string, string>;
+    strokeWidth: import("mobx-state-tree").IType<number | undefined, number, number>;
+    stroke: import("mobx-state-tree").IType<string | undefined, string, string>;
+    lineHeight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree/dist/internal").IUnionType<[import("mobx-state-tree").ISimpleType<number>, import("mobx-state-tree").ISimpleType<string>]>, [undefined]>;
+    letterSpacing: import("mobx-state-tree").IType<number | undefined, number, number>;
+    _editModeEnabled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    backgroundEnabled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    backgroundColor: import("mobx-state-tree").IType<string | undefined, string, string>;
+    backgroundOpacity: import("mobx-state-tree").IType<number | undefined, number, number>;
+    backgroundCornerRadius: import("mobx-state-tree").IType<number | undefined, number, number>;
+    backgroundPadding: import("mobx-state-tree").IType<number | undefined, number, number>;
+    legacyBackground: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<boolean>>;
+    curveEnabled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    curvePower: import("mobx-state-tree").IType<number | undefined, number, number>;
+}> & {
+    readonly page: any;
+    readonly store: any;
+    readonly top: import("mobx-state-tree").ModelInstanceTypeProps<{
+        id: import("mobx-state-tree").ISimpleType<string>;
+        type: import("mobx-state-tree").IType<string | undefined, string, string>;
+        name: import("mobx-state-tree").IType<string | undefined, string, string>;
+        opacity: import("mobx-state-tree").IType<number | undefined, number, number>;
+        custom: import("mobx-state-tree").IType<any, any, any>;
+        visible: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        selectable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        removable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        alwaysOnTop: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        showInExport: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    }> & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
+        id: import("mobx-state-tree").ISimpleType<string>;
+        type: import("mobx-state-tree").IType<string | undefined, string, string>;
+        name: import("mobx-state-tree").IType<string | undefined, string, string>;
+        opacity: import("mobx-state-tree").IType<number | undefined, number, number>;
+        custom: import("mobx-state-tree").IType<any, any, any>;
+        visible: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        selectable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        removable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        alwaysOnTop: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        showInExport: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    }, {}, import("mobx-state-tree").ModelCreationType<{
+        id: string;
+        type: string | undefined;
+        name: string | undefined;
+        opacity: number | undefined;
+        custom: any;
+        visible: boolean | undefined;
+        selectable: boolean | undefined;
+        removable: boolean | undefined;
+        alwaysOnTop: boolean | undefined;
+        showInExport: boolean | undefined;
+    }>, import("mobx-state-tree").ModelSnapshotType<{
+        id: import("mobx-state-tree").ISimpleType<string>;
+        type: import("mobx-state-tree").IType<string | undefined, string, string>;
+        name: import("mobx-state-tree").IType<string | undefined, string, string>;
+        opacity: import("mobx-state-tree").IType<number | undefined, number, number>;
+        custom: import("mobx-state-tree").IType<any, any, any>;
+        visible: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        selectable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        removable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        alwaysOnTop: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        showInExport: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    }>>>;
+    readonly parent: any;
+    readonly zIndex: any;
+} & {
+    toJSON(): {
+        id: string;
+        type: string;
+        name: string;
+        opacity: number;
+        custom: any;
+        visible: boolean;
+        selectable: boolean;
+        removable: boolean;
+        alwaysOnTop: boolean;
+        showInExport: boolean;
+    };
+} & {
+    clone(attrs?: any, { skipSelect }?: {
+        skipSelect?: boolean | undefined;
+    }): import("../model/node-model.js").NodeType;
+    set(attrs: any): void;
+    moveUp(): void;
+    moveTop(): void;
+    moveDown(): void;
+    moveBottom(): void;
+    setZIndex(zIndex: number): void;
+    beforeDestroy(): void;
+} & {
+    readonly locked: boolean;
+    readonly a: import("../model/shape-model.js").AnimatedAttrs;
+    animated(attr: any): any;
+    readonly timeRange: {
+        start: number;
+        end: number;
+    };
+    readonly active: boolean;
+    readonly isSelected: boolean;
+    readonly isSelectedDirectly: boolean;
+} & {
+    setAnimation(type: any, attrs: any): void;
+    setFilter(type: any, value: any): void;
+} & {
+    set(attrs: any): void;
+    afterCreate(): void;
+    toggleEditMode(editing?: boolean): void;
+    beforeDestroy(): void;
+} & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
+    id: import("mobx-state-tree").ISimpleType<string>;
+    type: import("mobx-state-tree").IType<string | undefined, string, string>;
+    name: import("mobx-state-tree").IType<string | undefined, string, string>;
+    opacity: import("mobx-state-tree").IType<number | undefined, number, number>;
+    custom: import("mobx-state-tree").IType<any, any, any>;
+    visible: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    selectable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    removable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    alwaysOnTop: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    showInExport: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+} & {
+    x: import("mobx-state-tree").IType<number | undefined, number, number>;
+    y: import("mobx-state-tree").IType<number | undefined, number, number>;
+    width: import("mobx-state-tree").IType<number | undefined, number, number>;
+    height: import("mobx-state-tree").IType<number | undefined, number, number>;
+    rotation: import("mobx-state-tree").IType<number | undefined, number, number>;
+    opacity: import("mobx-state-tree").IType<number | undefined, number, number>;
+    animations: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
+        delay: import("mobx-state-tree").IType<number | undefined, number, number>;
+        duration: import("mobx-state-tree").IType<number | undefined, number, number>;
+        enabled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        type: import("mobx-state-tree").ISimpleType<"exit" | "enter" | "loop">;
+        name: import("mobx-state-tree").IType<string | undefined, string, string>;
+        data: import("mobx-state-tree").IType<{} | null | undefined, {}, {}>;
+    }, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+    blurEnabled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    blurRadius: import("mobx-state-tree").IType<number | undefined, number, number>;
+    brightnessEnabled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    brightness: import("mobx-state-tree").IType<number | undefined, number, number>;
+    sepiaEnabled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    grayscaleEnabled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    filters: import("mobx-state-tree").IMapType<import("mobx-state-tree").IModelType<{
+        intensity: import("mobx-state-tree").IType<number | undefined, number, number>;
+    }, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+    shadowEnabled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    shadowBlur: import("mobx-state-tree").IType<number | undefined, number, number>;
+    shadowOffsetX: import("mobx-state-tree").IType<number | undefined, number, number>;
+    shadowOffsetY: import("mobx-state-tree").IType<number | undefined, number, number>;
+    shadowColor: import("mobx-state-tree").IType<string | undefined, string, string>;
+    shadowOpacity: import("mobx-state-tree").IType<number | undefined, number, number>;
+    visible: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    draggable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    resizable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    selectable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    contentEditable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    styleEditable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    alwaysOnTop: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    showInExport: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+} & {
+    type: import("mobx-state-tree").IType<string | undefined, string, string>;
+    text: import("mobx-state-tree").IType<string | undefined, string, string>;
+    placeholder: import("mobx-state-tree").IType<string | undefined, string, string>;
+    fontSize: import("mobx-state-tree").IType<number | undefined, number, number>;
+    fontFamily: import("mobx-state-tree").IType<string | undefined, string, string>;
+    fontStyle: import("mobx-state-tree").IType<string | undefined, string, string>;
+    fontWeight: import("mobx-state-tree").IType<string | undefined, string, string>;
+    textDecoration: import("mobx-state-tree").IType<string | undefined, string, string>;
+    textTransform: import("mobx-state-tree").IType<string | undefined, string, string>;
+    fill: import("mobx-state-tree").IType<string | undefined, string, string>;
+    align: import("mobx-state-tree").IType<string | undefined, string, string>;
+    width: import("mobx-state-tree").IType<number | undefined, number, number>;
+    height: import("mobx-state-tree").IType<number | undefined, number, number>;
+    verticalAlign: import("mobx-state-tree").IType<string | undefined, string, string>;
+    strokeWidth: import("mobx-state-tree").IType<number | undefined, number, number>;
+    stroke: import("mobx-state-tree").IType<string | undefined, string, string>;
+    lineHeight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree/dist/internal").IUnionType<[import("mobx-state-tree").ISimpleType<number>, import("mobx-state-tree").ISimpleType<string>]>, [undefined]>;
+    letterSpacing: import("mobx-state-tree").IType<number | undefined, number, number>;
+    _editModeEnabled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    backgroundEnabled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    backgroundColor: import("mobx-state-tree").IType<string | undefined, string, string>;
+    backgroundOpacity: import("mobx-state-tree").IType<number | undefined, number, number>;
+    backgroundCornerRadius: import("mobx-state-tree").IType<number | undefined, number, number>;
+    backgroundPadding: import("mobx-state-tree").IType<number | undefined, number, number>;
+    legacyBackground: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<boolean>>;
+    curveEnabled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    curvePower: import("mobx-state-tree").IType<number | undefined, number, number>;
+}, {
+    readonly page: any;
+    readonly store: any;
+    readonly top: import("mobx-state-tree").ModelInstanceTypeProps<{
+        id: import("mobx-state-tree").ISimpleType<string>;
+        type: import("mobx-state-tree").IType<string | undefined, string, string>;
+        name: import("mobx-state-tree").IType<string | undefined, string, string>;
+        opacity: import("mobx-state-tree").IType<number | undefined, number, number>;
+        custom: import("mobx-state-tree").IType<any, any, any>;
+        visible: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        selectable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        removable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        alwaysOnTop: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        showInExport: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    }> & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
+        id: import("mobx-state-tree").ISimpleType<string>;
+        type: import("mobx-state-tree").IType<string | undefined, string, string>;
+        name: import("mobx-state-tree").IType<string | undefined, string, string>;
+        opacity: import("mobx-state-tree").IType<number | undefined, number, number>;
+        custom: import("mobx-state-tree").IType<any, any, any>;
+        visible: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        selectable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        removable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        alwaysOnTop: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        showInExport: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    }, {}, import("mobx-state-tree").ModelCreationType<{
+        id: string;
+        type: string | undefined;
+        name: string | undefined;
+        opacity: number | undefined;
+        custom: any;
+        visible: boolean | undefined;
+        selectable: boolean | undefined;
+        removable: boolean | undefined;
+        alwaysOnTop: boolean | undefined;
+        showInExport: boolean | undefined;
+    }>, import("mobx-state-tree").ModelSnapshotType<{
+        id: import("mobx-state-tree").ISimpleType<string>;
+        type: import("mobx-state-tree").IType<string | undefined, string, string>;
+        name: import("mobx-state-tree").IType<string | undefined, string, string>;
+        opacity: import("mobx-state-tree").IType<number | undefined, number, number>;
+        custom: import("mobx-state-tree").IType<any, any, any>;
+        visible: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        selectable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        removable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        alwaysOnTop: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        showInExport: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    }>>>;
+    readonly parent: any;
+    readonly zIndex: any;
+} & {
+    toJSON(): {
+        id: string;
+        type: string;
+        name: string;
+        opacity: number;
+        custom: any;
+        visible: boolean;
+        selectable: boolean;
+        removable: boolean;
+        alwaysOnTop: boolean;
+        showInExport: boolean;
+    };
+} & {
+    clone(attrs?: any, { skipSelect }?: {
+        skipSelect?: boolean | undefined;
+    }): import("../model/node-model.js").NodeType;
+    set(attrs: any): void;
+    moveUp(): void;
+    moveTop(): void;
+    moveDown(): void;
+    moveBottom(): void;
+    setZIndex(zIndex: number): void;
+    beforeDestroy(): void;
+} & {
+    readonly locked: boolean;
+    readonly a: import("../model/shape-model.js").AnimatedAttrs;
+    animated(attr: any): any;
+    readonly timeRange: {
+        start: number;
+        end: number;
+    };
+    readonly active: boolean;
+    readonly isSelected: boolean;
+    readonly isSelectedDirectly: boolean;
+} & {
+    setAnimation(type: any, attrs: any): void;
+    setFilter(type: any, value: any): void;
+} & {
+    set(attrs: any): void;
+    afterCreate(): void;
+    toggleEditMode(editing?: boolean): void;
+    beforeDestroy(): void;
+}, any, import("mobx-state-tree").ModelSnapshotType<{
+    id: import("mobx-state-tree").ISimpleType<string>;
+    type: import("mobx-state-tree").IType<string | undefined, string, string>;
+    name: import("mobx-state-tree").IType<string | undefined, string, string>;
+    opacity: import("mobx-state-tree").IType<number | undefined, number, number>;
+    custom: import("mobx-state-tree").IType<any, any, any>;
+    visible: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    selectable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    removable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    alwaysOnTop: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    showInExport: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+}>>> & {
+    type: "text";
+}) | undefined;
+export declare const pasteFromEvent: (store: StoreType, e: ClipboardEvent, opts?: {
+    onText?: (text: string) => void;
+}) => boolean;

package/utils/clipboard.js

@@ -1 +1 @@
-import{forEveryChild as e}from"../model/group-model.js";import{getTotalClientRect as t}from"./math.js";let a={data:[],pageId:""};const o="polotno_clipboard",l=(e,t)=>{a={data:JSON.parse(JSON.stringify(e)),pageId:t||""};try{localStorage.setItem(o,JSON.stringify(e)),localStorage.setItem(o+"_page",t||"")}catch(l){}},r=()=>{try{const e=localStorage.getItem(o),t=localStorage.getItem(o+"_page");if(e){return{data:JSON.parse(e),pageId:t}}}catch(e){}return a};export const copy=e=>{var t;0!==e.selectedElements.length&&l(e.selectedElements.map(e=>e.toJSON()),null===(t=e.activePage)||void 0===t?void 0:t.id)};export const cut=e=>{var t;l(e.selectedElements.map(e=>e.toJSON()),null===(t=e.activePage)||void 0===t?void 0:t.id);let a=e.selectedElements.filter(e=>e.removable).map(e=>e.id);e.deleteElements(a)};export const paste=a=>{a.history.transaction(()=>{var o,d;let i=0,c=0;const{data:s,pageId:n}=r();if(n===(null===(o=a.activePage)||void 0===o?void 0:o.id)){i=a.width/20,c=a.height/20}else{const o=[];e({children:s},e=>{"group"!==e.type&&o.push(e)});const l=t(o);l.maxX>a.width&&(i=-l.minX),l.maxY>a.height&&(c=-l.minY)}const p=[];e({children:s},e=>{delete e.id,"group"!==e.type&&(e.x+=i,e.y+=c)}),s.forEach(e=>{var t;const o=null===(t=a.activePage)||void 0===t?void 0:t.addElement(e);o&&p.push(o.id)}),l(s,null===(d=a.activePage)||void 0===d?void 0:d.id),a.selectElements(p)})};export const isClipboardEmpty=()=>0===r().data.length;export const resetClipboard=()=>{a={data:[],pageId:""};try{localStorage.removeItem(o),localStorage.removeItem(o+"_page")}catch(e){}};
+import{forEveryChild as e}from"../model/group-model.js";import{nanoid as t}from"nanoid";import{getTotalClientRect as a}from"./math.js";import{removeTags as o}from"./text.js";import{insertFileIntoPage as r}from"./insert-file.js";import{decodeBase64 as l,encodeBase64 as n}from"./base64.js";let i={data:[],pageId:"",payloadId:""};const d="polotno_clipboard",s=(e,t,a)=>{i={data:JSON.parse(JSON.stringify(e)),pageId:t||"",payloadId:a||""};try{localStorage.setItem(d,JSON.stringify(e)),localStorage.setItem(d+"_page",t||""),localStorage.setItem(d+"_payload",a||"")}catch(o){}},c=()=>{try{const e=localStorage.getItem(d),t=localStorage.getItem(d+"_page"),a=localStorage.getItem(d+"_payload");if(e){return{data:JSON.parse(e),pageId:t,payloadId:a}}}catch(e){}return i},p="data-polotno-clipboard";export const copy=e=>{var t;0!==e.selectedElements.length&&s(e.selectedElements.map(e=>e.toJSON()),null===(t=e.activePage)||void 0===t?void 0:t.id)};export const cut=e=>{if(0===e.selectedElements.length){return}copy(e);const t=e.selectedElements.filter(e=>e.removable).map(e=>e.id);e.deleteElements(t)};const m=(t,o)=>{t.history.transaction(()=>{var r,l;let n=0,i=0;const{data:d,pageId:c,payloadId:p}=o;if(c===(null===(r=t.activePage)||void 0===r?void 0:r.id)){n=t.width/20,i=t.height/20}else{const o=[];e({children:d},e=>{"group"!==e.type&&o.push(e)});const r=a(o);r.maxX>t.width&&(n=-r.minX),r.maxY>t.height&&(i=-r.minY)}const m=[];e({children:d},e=>{delete e.id,"group"!==e.type&&(e.x+=n,e.y+=i)}),d.forEach(e=>{var a;const o=null===(a=t.activePage)||void 0===a?void 0:a.addElement(e);o&&m.push(o.id)}),s(d,null===(l=t.activePage)||void 0===l?void 0:l.id,p),t.selectElements(m)})};export const paste=e=>{m(e,c())};export const isClipboardEmpty=()=>0===c().data.length;export const resetClipboard=()=>{i={data:[],pageId:"",payloadId:""};try{localStorage.removeItem(d),localStorage.removeItem(d+"_page"),localStorage.removeItem(d+"_payload")}catch(e){}};export const copyToEvent=(a,r)=>{var l,i;if(!r.clipboardData||0===a.selectedElements.length){return!1}const d=a.selectedElements.map(e=>e.toJSON()),c=t(),m={v:1,id:c,pageId:(null===(l=a.activePage)||void 0===l?void 0:l.id)||"",elements:d};r.clipboardData.setData("text/html",`<div ${p}="${(e=>n((new TextEncoder).encode(JSON.stringify(e))))(m)}"></div>`);const g=[];return e({children:d},e=>{"text"===e.type&&g.push(o(e.text))}),r.clipboardData.setData("text/plain",g.join("\n")||" "),r.preventDefault(),s(d,null===(i=a.activePage)||void 0===i?void 0:i.id,c),!0};export const cutToEvent=(e,t)=>{const a=copyToEvent(e,t);if(a){const t=e.selectedElements.filter(e=>e.removable).map(e=>e.id);e.deleteElements(t)}return a};export const insertTextElement=(e,t,a={})=>{var o;const r=e.width/2,l=(e.width+e.height)/2160;return null===(o=e.activePage)||void 0===o?void 0:o.addElement(Object.assign({type:"text",x:e.width/2-r/2,y:e.height/2-15,width:r,fontSize:30*l,text:t},a))};export const pasteFromEvent=(e,t,a={})=>{const o=t.clipboardData;if(!o){return!1}const n=o.getData("text/html");if(n&&n.includes(p)){const a=(e=>{var a;try{const t=null===(a=(new DOMParser).parseFromString(e,"text/html").querySelector(`[${p}]`))||void 0===a?void 0:a.getAttribute(p);if(!t){return null}const o=JSON.parse((new TextDecoder).decode(l(t)));return Array.isArray(o.elements)?o:null}catch(t){return null}})(n);if(a){t.preventDefault();const o=c();return a.id&&a.id===o.payloadId?m(e,o):m(e,{data:a.elements,pageId:a.pageId,payloadId:a.id}),!0}}const i=o.files?Array.from(o.files):[];if(i.length>0){return t.preventDefault(),(async()=>{for(const a of i){try{await r({file:a,store:e})}catch(t){console.error("polotno: failed to insert pasted file",t)}}})(),!0}const d=o.getData("text/plain");if(d&&d.trim()){if(t.preventDefault(),a.onText){a.onText(d)}else{const t=insertTextElement(e,(e=>e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;"))(d));t&&e.selectElements([t.id])}return!0}return 0===o.types.length&&0!==c().data.length&&(t.preventDefault(),paste(e),!0)};

package/utils/file.d.ts

@@ -1 +1,7 @@
 export declare function localFileToURL(file: File): Promise<string>;
+export type MediaType = 'image' | 'svg' | 'video' | 'audio' | 'gif';
+export declare function getType(file: File): MediaType;
+declare let uploadFunc: (file: File) => Promise<string>;
+export declare function setUploadFunc(func: typeof uploadFunc): void;
+export declare function getUploadFunc(): (file: File) => Promise<string>;
+export {};

package/utils/file.js

@@ -1 +1 @@
-export async function localFileToURL(e){return new Promise((o,r)=>{const n=new FileReader;n.readAsDataURL(e),n.onload=()=>o(n.result),n.onerror=e=>r(e)})}
+export async function localFileToURL(o){return new Promise((e,n)=>{const i=new FileReader;i.readAsDataURL(o),i.onload=()=>e(i.result),i.onerror=o=>n(o)})}export function getType(o){const{type:e}=o;return e.indexOf("svg")>=0?"svg":e.indexOf("gif")>=0?"gif":e.indexOf("image")>=0?"image":e.indexOf("video")>=0?"video":e.indexOf("audio")>=0?"audio":"image"}let o=async o=>(console.warn("Polotno: using data URL for file embeding. This is not recommended for production. Set upload function https://polotno.com/docs/editor-configuration#how-to-change-image-upload-behavior"),localFileToURL(o));export function setUploadFunc(e){o=e}export function getUploadFunc(){return o}

package/utils/image-dpi.js

@@ -1 +1 @@
-const t=[112,72,89,115],e=(()=>{const t=new Uint32Array(256);for(let e=0;e<256;e++){let n=e;for(let t=0;t<8;t++){n=1&n?3988292384^n>>>1:n>>>1}t[e]=n>>>0}return t})(),n=()=>"undefined"!=typeof globalThis?globalThis.Buffer:void 0,r=(t,e,n)=>{t[e]=n>>>24&255,t[e+1]=n>>>16&255,t[e+2]=n>>>8&255,t[e+3]=255&n};export const addDpiMetadataToImage=(o,s,a)=>{const l=o.indexOf(","),i=(t=>{if("function"==typeof atob){const e=atob(t),n=new Uint8Array(e.length);for(let t=0;t<e.length;t++){n[t]=e.charCodeAt(t)}return n}const e=n();if(e){return new Uint8Array(e.from(t,"base64"))}throw new Error("No base64 decoder available")})(l>=0?o.slice(l+1):o),f="image/png"===s?((n,o)=>{const s=(n=>{const o=new Uint8Array(9),s=new DataView(o.buffer);s.setUint32(0,n,!1),s.setUint32(4,n,!1),o[8]=1;const a=new Uint8Array(8+o.length+4);r(a,0,o.length),a.set(t,4),a.set(o,8);const l=new Uint8Array(4+o.length);return l.set(t,0),l.set(o,4),r(a,8+o.length,(t=>{let n=4294967295;for(let r=0;r<t.length;r++){n=e[255&(n^t[r])]^n>>>8}return(4294967295^n)>>>0})(l)),a})(Math.round(o/.0254)),a=((t,e)=>{let n=8;for(;n+8<=t.length;){const r=t[n]<<24|t[n+1]<<16|t[n+2]<<8|t[n+3],o=n+4,s=t.subarray(o,o+4),a=8+r+4;if(e.every((t,e)=>s[e]===t)){return{offset:n,totalLength:a}}n+=a}return null})(n,t);if(a){const t=new Uint8Array(n.length-a.totalLength+s.length);return t.set(n.slice(0,a.offset),0),t.set(s,a.offset),t.set(n.slice(a.offset+a.totalLength),a.offset+s.length),t}const l=16+(n[8]<<24|n[9]<<16|n[10]<<8|n[11])+4;if(l>n.length){return n}const i=new Uint8Array(n.length+s.length);return i.set(n.slice(0,l),0),i.set(s,l),i.set(n.slice(l),l+s.length),i})(i,a):((t,e)=>{const n=(t=>{let e=2;for(;e+4<t.length;){if(255!==t[e]){return-1}const n=t[e+1];if(216===n||217===n){e+=2;continue}const r=t[e+2]<<8|t[e+3];if(r<2){return-1}if(224===n&&74===t[e+4]&&70===t[e+5]&&73===t[e+6]&&70===t[e+7]&&0===t[e+8]){return e}const o=e+2+r;if(o<=e||o>t.length){return-1}e=o}return-1})(t);if(n>=0){const r=new Uint8Array(t),o=n+11;return r[o]=1,r[o+1]=e>>8&255,r[o+2]=255&e,r[o+3]=e>>8&255,r[o+4]=255&e,r}const r=(t=>{const e=new Uint8Array(18);return e[0]=255,e[1]=224,e[2]=0,e[3]=16,e[4]=74,e[5]=70,e[6]=73,e[7]=70,e[8]=0,e[9]=1,e[10]=1,e[11]=1,e[12]=t>>8&255,e[13]=255&t,e[14]=t>>8&255,e[15]=255&t,e})(e),o=new Uint8Array(t.length+r.length);return o.set(t.subarray(0,2),0),o.set(r,2),o.set(t.subarray(2),2+r.length),o})(i,a);return`data:${s};base64,${(t=>{if("function"==typeof btoa){let e="";for(let n=0;n<t.length;n++){e+=String.fromCharCode(t[n])}return btoa(e)}const e=n();if(e){return e.from(t).toString("base64")}throw new Error("No base64 encoder available")})(f)}`};
+import{decodeBase64 as t,encodeBase64 as e}from"./base64.js";const n=[112,72,89,115],r=(()=>{const t=new Uint32Array(256);for(let e=0;e<256;e++){let n=e;for(let t=0;t<8;t++){n=1&n?3988292384^n>>>1:n>>>1}t[e]=n>>>0}return t})(),s=(t,e,n)=>{t[e]=n>>>24&255,t[e+1]=n>>>16&255,t[e+2]=n>>>8&255,t[e+3]=255&n};export const addDpiMetadataToImage=(o,l,a)=>{const i=o.indexOf(","),f=i>=0?o.slice(i+1):o,c=t(f),g="image/png"===l?((t,e)=>{const o=(t=>{const e=new Uint8Array(9),o=new DataView(e.buffer);o.setUint32(0,t,!1),o.setUint32(4,t,!1),e[8]=1;const l=new Uint8Array(8+e.length+4);s(l,0,e.length),l.set(n,4),l.set(e,8);const a=new Uint8Array(4+e.length);return a.set(n,0),a.set(e,4),s(l,8+e.length,(t=>{let e=4294967295;for(let n=0;n<t.length;n++){e=r[255&(e^t[n])]^e>>>8}return(4294967295^e)>>>0})(a)),l})(Math.round(e/.0254)),l=((t,e)=>{let n=8;for(;n+8<=t.length;){const r=t[n]<<24|t[n+1]<<16|t[n+2]<<8|t[n+3],s=n+4,o=t.subarray(s,s+4),l=8+r+4;if(e.every((t,e)=>o[e]===t)){return{offset:n,totalLength:l}}n+=l}return null})(t,n);if(l){const e=new Uint8Array(t.length-l.totalLength+o.length);return e.set(t.slice(0,l.offset),0),e.set(o,l.offset),e.set(t.slice(l.offset+l.totalLength),l.offset+o.length),e}const a=16+(t[8]<<24|t[9]<<16|t[10]<<8|t[11])+4;if(a>t.length){return t}const i=new Uint8Array(t.length+o.length);return i.set(t.slice(0,a),0),i.set(o,a),i.set(t.slice(a),a+o.length),i})(c,a):((t,e)=>{const n=(t=>{let e=2;for(;e+4<t.length;){if(255!==t[e]){return-1}const n=t[e+1];if(216===n||217===n){e+=2;continue}const r=t[e+2]<<8|t[e+3];if(r<2){return-1}if(224===n&&74===t[e+4]&&70===t[e+5]&&73===t[e+6]&&70===t[e+7]&&0===t[e+8]){return e}const s=e+2+r;if(s<=e||s>t.length){return-1}e=s}return-1})(t);if(n>=0){const r=new Uint8Array(t),s=n+11;return r[s]=1,r[s+1]=e>>8&255,r[s+2]=255&e,r[s+3]=e>>8&255,r[s+4]=255&e,r}const r=(t=>{const e=new Uint8Array(18);return e[0]=255,e[1]=224,e[2]=0,e[3]=16,e[4]=74,e[5]=70,e[6]=73,e[7]=70,e[8]=0,e[9]=1,e[10]=1,e[11]=1,e[12]=t>>8&255,e[13]=255&t,e[14]=t>>8&255,e[15]=255&t,e})(e),s=new Uint8Array(t.length+r.length);return s.set(t.subarray(0,2),0),s.set(r,2),s.set(t.subarray(2),2+r.length),s})(c,a);return`data:${l};base64,${e(g)}`};

package/utils/insert-file.d.ts

@@ -0,0 +1,23 @@
+import type { StoreType, ShapeType } from '../ui-types.js';
+import { MediaType } from './file.js';
+type MediaProps = {
+    url: string;
+    type: MediaType;
+    store: StoreType;
+    droppedPos?: {
+        x: number;
+        y: number;
+    };
+    targetElement?: ShapeType;
+};
+export declare const insertMediaIntoPage: ({ url, type, store, droppedPos, targetElement, }: MediaProps) => Promise<void>;
+type FileProps = {
+    file: File;
+    store: StoreType;
+    droppedPos?: {
+        x: number;
+        y: number;
+    };
+};
+export declare const insertFileIntoPage: ({ file, store, droppedPos }: FileProps) => Promise<void>;
+export {};

package/utils/insert-file.js

@@ -0,0 +1 @@
+import{getType as e,getUploadFunc as t}from"./file.js";import{selectImage as o}from"../side-panel/select-image.js";import{selectVideo as s}from"../side-panel/select-video.js";import{selectSvg as r}from"../side-panel/select-svg.js";import{selectGif as a}from"../side-panel/select-gif.js";export const insertMediaIntoPage=async({url:e,type:t,store:i,droppedPos:p,targetElement:d})=>{const n=e;"image"===t?await o({src:n,store:i,droppedPos:p,targetElement:d}):"svg"===t?await r({src:n,store:i,droppedPos:p,targetElement:d}):"gif"===t?await a({src:n,store:i,droppedPos:p,targetElement:d}):"video"===t?await s({src:n,store:i,droppedPos:p,targetElement:d}):"audio"===t&&i.addAudio({src:n})};export const insertFileIntoPage=async({file:o,store:s,droppedPos:r})=>{const a=await t()(o);await insertMediaIntoPage({url:a,type:e(o),store:s,droppedPos:r})};

package/utils/mobx.d.ts

@@ -0,0 +1,4 @@
+import { IAutorunOptions, IReactionOptions, IReactionDisposer } from 'mobx';
+import { IAnyStateTreeNode } from 'mobx-state-tree';
+export declare function nodeAutorun(node: IAnyStateTreeNode, view: () => void, opts?: IAutorunOptions): IReactionDisposer;
+export declare function nodeReaction<T>(node: IAnyStateTreeNode, expression: () => T, effect: (value: T | undefined, prev: T | undefined) => void, opts?: IReactionOptions<T | undefined, boolean>): IReactionDisposer;

package/utils/mobx.js

@@ -0,0 +1 @@
+import{autorun as o,reaction as t}from"mobx";import{isAlive as r}from"mobx-state-tree";export function nodeAutorun(t,e,n){return o(()=>{r(t)&&e()},n)}export function nodeReaction(o,e,n,i){return t(()=>r(o)?e():void 0,(t,e)=>{r(o)&&n(t,e)},i)}

package/utils/validate-key.js

@@ -1 +1 @@
-import*as e from"mobx";import{getAPI as o}from"./api.js";import{setRemoveBackgroundEnabled as t}from"./flags.js";const n=e.observable({value:!1}),a=e.observable({value:"v1"});export const ___=()=>a.value;const i=e.observable({value:0});export const ____=()=>i.value;export const isCreditVisible=()=>n.value;const r=e.action(()=>{n.value=!0});let s="";export const getKey=()=>s||"";export const setKey=e=>{s=e||""};let l="undefined"!=typeof window?window.location.origin:"";const c="undefined"!=typeof navigator&&navigator.userAgent.indexOf("Headless")>-1,d="undefined"!=typeof navigator&&navigator.userAgent.indexOf("Electron")>-1;"file://"===l&&c&&(l="headless"),"file://"===l&&d&&(l="electron");const p=`%cPolotno error! Current domain is not allowed. It may lead to unexpected behavior and stop working. Please add "${l}" here: https://polotno.com/cabinet`;let u=fetch;export const __=e=>{u=e};export async function isKeyPaid(n){for(let s=0;s<5;s++){try{const r=await u(o()+"/validate-key",{method:"POST",body:JSON.stringify({key:n,site:location.host,skdVersion:"4.2.1"})});if(e.runInAction(()=>{a.value=r.headers.get("x-api-version")||""}),!n){return console.error("Polotno API is initialized without API key. It may lead to unexpected behavior and stop working. Please create API key here: https://polotno.com/cabinet"),e.runInAction(()=>{i.value=1}),!1}if(200!==r.status){await new Promise(e=>setTimeout(e,3e3));continue}const s=await r.json();return s.is_valid||(console.error("Polotno API key is not valid. Please get new API key here: https://polotno.com/cabinet"),e.runInAction(()=>{i.value=1})),s.is_paid||(console.log("%cPolotno Free Version. For development usage only. https://polotno.com/","background: rgb(0, 161, 255); color: white; padding: 5px; margin: 5px;"),e.runInAction(()=>{0===i.value&&(i.value=2)})),s.is_domain_valid||console.log(p,"background: rgba(247, 101, 68, 1); color: white; padding: 5px; margin: 5px;"),t(s.remove_background_enabled),s.is_paid||!1}catch(r){await new Promise(e=>setTimeout(e,3e3))}}return console.error("Can not validate Polotno API key. Please report to anton@polotno.com immediately."),!0}export async function validateKey(e){await isKeyPaid(s)&&!e||r()}
+import*as e from"mobx";import{getAPI as o}from"./api.js";import{setRemoveBackgroundEnabled as t}from"./flags.js";const n=e.observable({value:!1}),a=e.observable({value:"v1"});export const ___=()=>a.value;const i=e.observable({value:0});export const ____=()=>i.value;export const isCreditVisible=()=>n.value;const r=e.action(()=>{n.value=!0});let s="";export const getKey=()=>s||"";export const setKey=e=>{s=e||""};let l="undefined"!=typeof window?window.location.origin:"";const c="undefined"!=typeof navigator&&navigator.userAgent.indexOf("Headless")>-1,d="undefined"!=typeof navigator&&navigator.userAgent.indexOf("Electron")>-1;"file://"===l&&c&&(l="headless"),"file://"===l&&d&&(l="electron");const p=`%cPolotno error! Current domain is not allowed. It may lead to unexpected behavior and stop working. Please add "${l}" here: https://polotno.com/cabinet`;let u=fetch;export const __=e=>{u=e};export async function isKeyPaid(n){for(let s=0;s<5;s++){try{const r=await u(o()+"/validate-key",{method:"POST",body:JSON.stringify({key:n,site:location.host,skdVersion:"4.2.2"})});if(e.runInAction(()=>{a.value=r.headers.get("x-api-version")||""}),!n){return console.error("Polotno API is initialized without API key. It may lead to unexpected behavior and stop working. Please create API key here: https://polotno.com/cabinet"),e.runInAction(()=>{i.value=1}),!1}if(200!==r.status){await new Promise(e=>setTimeout(e,3e3));continue}const s=await r.json();return s.is_valid||(console.error("Polotno API key is not valid. Please get new API key here: https://polotno.com/cabinet"),e.runInAction(()=>{i.value=1})),s.is_paid||(console.log("%cPolotno Free Version. For development usage only. https://polotno.com/","background: rgb(0, 161, 255); color: white; padding: 5px; margin: 5px;"),e.runInAction(()=>{0===i.value&&(i.value=2)})),s.is_domain_valid||console.log(p,"background: rgba(247, 101, 68, 1); color: white; padding: 5px; margin: 5px;"),t(s.remove_background_enabled),s.is_paid||!1}catch(r){await new Promise(e=>setTimeout(e,3e3))}}return console.error("Can not validate Polotno API key. Please report to anton@polotno.com immediately."),!0}export async function validateKey(e){await isKeyPaid(s)&&!e||r()}