polotno 4.0.0-beta.49 → 4.0.0

package/primitives/tooltip.d.ts

@@ -1,7 +1,11 @@
 import * as React from "react";
-import { Tooltip as TooltipPrimitive } from "radix-ui";
-declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): React.JSX.Element;
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+declare function TooltipProvider({ delay, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): React.JSX.Element;
 declare function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>): React.JSX.Element;
-declare const TooltipTrigger: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>): React.JSX.Element;
+declare const TooltipContent: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").TooltipPopupProps, "ref"> & React.RefAttributes<HTMLDivElement> & {
+    side?: React.ComponentProps<typeof TooltipPrimitive.Positioner>["side"];
+    sideOffset?: React.ComponentProps<typeof TooltipPrimitive.Positioner>["sideOffset"];
+    align?: React.ComponentProps<typeof TooltipPrimitive.Positioner>["align"];
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/primitives/tooltip.js

@@ -1 +1 @@
-var t=this&&this.__rest||function(t,o){var e={};for(var r in t){Object.prototype.hasOwnProperty.call(t,r)&&o.indexOf(r)<0&&(e[r]=t[r])}if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(r=Object.getOwnPropertySymbols(t);n<r.length;n++){o.indexOf(r[n])<0&&Object.prototype.propertyIsEnumerable.call(t,r[n])&&(e[r[n]]=t[r[n]])}}return e};import{jsx as o,jsxs as e}from"react/jsx-runtime";import*as r from"react";import{Tooltip as n}from"radix-ui";import{cn as a}from"../lib/utils.js";import{usePortalScope as i}from"./portal-scope.js";const s=r.createContext(!1);function p(e){var{delayDuration:r=0}=e,a=t(e,["delayDuration"]);return o(s.Provider,{value:!0,children:o(n.Provider,Object.assign({"data-slot":"tooltip-provider",delayDuration:r},a))})}function l(e){var a=t(e,[]);const i=r.useContext(s),p=o(n.Root,Object.assign({"data-slot":"tooltip"},a));return i?p:o(n.Provider,{"data-slot":"tooltip-provider",delayDuration:0,children:p})}const d=r.forwardRef((e,r)=>{var a=t(e,[]);return o(n.Trigger,Object.assign({ref:r,"data-slot":"tooltip-trigger"},a))});d.displayName="TooltipTrigger";const c=r.forwardRef((r,s)=>{var{className:p,sideOffset:l=0,children:d}=r,c=t(r,["className","sideOffset","children"]);const f=i(),{container:m,className:u}=f,g=t(f,["container","className"]);return o(n.Portal,{container:m,children:e(n.Content,Object.assign({ref:s,"data-slot":"tooltip-content"},g,{sideOffset:l,className:a(u,"pn:z-50 pn:w-fit origin-(--radix-tooltip-content-transform-origin) pn:animate-in pn:rounded-md pn:bg-foreground pn:px-3 pn:py-1.5 pn:text-xs pn:text-balance pn:text-background pn:fade-in-0 pn:zoom-in-95 pn:data-[side=bottom]:slide-in-from-top-2 pn:data-[side=left]:slide-in-from-right-2 pn:data-[side=right]:slide-in-from-left-2 pn:data-[side=top]:slide-in-from-bottom-2 pn:data-[state=closed]:animate-out pn:data-[state=closed]:fade-out-0 pn:data-[state=closed]:zoom-out-95",p)},c,{children:[d,o(n.Arrow,{className:"pn:z-50 pn:size-2.5 pn:translate-y-[calc(-50%_-_2px)] pn:rotate-45 pn:rounded-[2px] pn:bg-foreground pn:fill-foreground"})]}))})});c.displayName="TooltipContent";export{l as Tooltip,c as TooltipContent,p as TooltipProvider,d as TooltipTrigger};
+var t=this&&this.__rest||function(t,e){var n={};for(var o in t){Object.prototype.hasOwnProperty.call(t,o)&&e.indexOf(o)<0&&(n[o]=t[o])}if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(o=Object.getOwnPropertySymbols(t);r<o.length;r++){e.indexOf(o[r])<0&&Object.prototype.propertyIsEnumerable.call(t,o[r])&&(n[o[r]]=t[o[r]])}}return n};import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as o from"react";import{Tooltip as r}from"@base-ui/react/tooltip";import{cn as a}from"../lib/utils.js";import{usePortalScope as i}from"./portal-scope.js";const s=o.createContext(!1);function l(n){var{delay:o=0}=n,a=t(n,["delay"]);return e(s.Provider,{value:!0,children:e(r.Provider,Object.assign({delay:o},a))})}function p(n){var a=t(n,[]);const i=o.useContext(s),l=e(r.Root,Object.assign({"data-slot":"tooltip"},a));return i?l:e(r.Provider,{delay:0,children:l})}function d(n){var o=t(n,[]);return e(r.Trigger,Object.assign({"data-slot":"tooltip-trigger"},o))}const c=o.forwardRef((o,s)=>{var{className:l,side:p,sideOffset:d=0,align:c="center",children:f}=o,m=t(o,["className","side","sideOffset","align","children"]);const u=i(),{container:g,className:b}=u,y=t(u,["container","className"]);return e(r.Portal,{container:g,children:e(r.Positioner,{side:p,sideOffset:d,align:c,className:"pn:z-50",children:n(r.Popup,Object.assign({ref:s,"data-slot":"tooltip-content"},y,{className:a(b,"pn:z-50 pn:w-fit origin-(--transform-origin) pn:animate-in pn:rounded-md pn:bg-foreground pn:px-3 pn:py-1.5 pn:text-xs pn:text-balance pn:text-background pn:fade-in-0 pn:zoom-in-95 pn:data-[side=bottom]:slide-in-from-top-2 pn:data-[side=left]:slide-in-from-right-2 pn:data-[side=right]:slide-in-from-left-2 pn:data-[side=top]:slide-in-from-bottom-2 pn:data-[closed]:animate-out pn:data-[closed]:fade-out-0 pn:data-[closed]:zoom-out-95",l)},m,{children:[f,e(r.Arrow,{className:"pn:z-50 pn:size-2.5 pn:translate-y-[calc(-50%_-_2px)] pn:rotate-45 pn:rounded-[2px] pn:bg-foreground pn:fill-foreground"})]}))})})});c.displayName="TooltipContent";export{p as Tooltip,c as TooltipContent,l as TooltipProvider,d as TooltipTrigger};

package/side-panel/animations-panel.js

@@ -1 +1 @@
-import{jsx as e,jsxs as n}from"react/jsx-runtime";import i from"react";import{Button as t}from"../primitives/button.js";import{SliderField as a}from"../primitives/slider-field.js";import{NumericInput as o}from"../primitives/numeric-input.js";import{Select as l,SelectContent as r,SelectItem as d,SelectTrigger as m,SelectValue as s}from"../primitives/select.js";import{observer as p}from"mobx-react-lite";import{PolotnoIcon as c}from"../icons/registry.js";import{t as u}from"../utils/l10n.js";import{cn as g}from"../lib/utils.js";import{PanelHeader as v}from"../primitives/panel-header.js";export{o as NumberInput};const h=p(({element:i,store:a,enabled:o})=>{const l=i.animations.find(e=>"enter"===e.type),r=i.animations.find(e=>"exit"===e.type);return o?n("div",{children:[e("div",{style:{padding:"10px 0px"},children:"Animate"}),n("div",{style:{display:"flex",gap:10},children:[e(t,{variant:"outline",className:g("pn:flex-1",(null==l?void 0:l.enabled)&&!(null==r?void 0:r.enabled)&&"pn:bg-muted"),onClick:()=>{a.history.transaction(()=>{i.setAnimation("enter",{enabled:!0}),i.setAnimation("exit",{enabled:!1})})},children:"Enter"}),e(t,{variant:"outline",className:g("pn:flex-1",(null==l?void 0:l.enabled)&&(null==r?void 0:r.enabled)&&"pn:bg-muted"),onClick:()=>{a.history.transaction(()=>{i.setAnimation("enter",{enabled:!0}),i.setAnimation("exit",{enabled:!0})})},children:"Both"}),e(t,{variant:"outline",className:g("pn:flex-1",(null==r?void 0:r.enabled)&&!(null==l?void 0:l.enabled)&&"pn:bg-muted"),onClick:()=>{a.history.transaction(()=>{i.setAnimation("enter",{enabled:!1}),i.setAnimation("exit",{enabled:!0})})},children:"Exit"})]})]}):null}),f=["right","left","up","down","bottom-right","bottom-left","top-right","top-left"],b={right:e(c,{name:"animation.directionRight"}),left:e(c,{name:"animation.directionLeft"}),up:e(c,{name:"animation.directionUp"}),down:e(c,{name:"animation.directionDown"}),"bottom-right":e(c,{name:"animation.directionBottomRight"}),"bottom-left":e(c,{name:"animation.directionBottomLeft"}),"top-right":e(c,{name:"animation.directionTopRight"}),"top-left":e(c,{name:"animation.directionTopLeft"})},x=p(({value:i,onChange:t})=>n("div",{style:{paddingTop:"10px"},children:[e("div",{style:{paddingBottom:"10px"},children:"Direction"}),n(l,{value:i,onValueChange:t,children:[e(m,{className:"pn:w-full",children:n("div",{className:"pn:flex pn:items-center pn:gap-2",children:[b[i],e(s,{})]})}),e(r,{children:f.map(i=>e(d,{value:i,children:n("div",{className:"pn:flex pn:items-center pn:gap-2",children:[b[i],i]})},i))})]})]})),y=p(({value:i,onChange:t})=>n("div",{style:{paddingTop:"10px"},children:[e("div",{style:{paddingBottom:"10px"},children:"Direction"}),n(l,{value:i,onValueChange:t,children:[e(m,{className:"pn:w-full",children:e(s,{children:"out"===i?"Zoom Out":"Zoom In"})}),n(r,{children:[e(d,{value:"in",children:"Zoom In"}),e(d,{value:"out",children:"Zoom Out"})]})]})]})),T=p(({element:n})=>{const i=n.animations.find(e=>"enter"===e.type);if(!i){return null}const t=n.page.duration;return e("div",{style:{padding:"10px"},children:e(a,{label:"Delay",value:parseFloat((i.delay/1e3).toFixed(2)),onChange:e=>{n.setAnimation("enter",{delay:1e3*e})},min:0,max:t/1e3,step:.01})})}),k=p(({element:n,store:i})=>{const t=n.animations.find(e=>"loop"===e.type&&e.enabled);if(!t){return null}const o=500/t.duration;return e("div",{style:{padding:"10px"},children:e(a,{label:"Speed",value:o,onChange:e=>{n.setAnimation("loop",{duration:500/e})},min:.1,max:3,step:.01,onCommit:()=>{const e=i.activePage;i.play({animatedElementsIds:[n.id],currentTime:n.page.startTime}),setTimeout(()=>{i.stop(),e&&i.selectPage(e.id)},1e3)}})})}),C=p(({element:n})=>{const i=n.animations.find(e=>"enter"===e.type);if(!i){return null}const t=n.page.duration;return e("div",{style:{padding:"10px"},children:e(a,{label:"Duration",value:parseFloat((i.duration/1e3).toFixed(2)),onChange:e=>{n.setAnimation("enter",{duration:1e3*e}),n.setAnimation("exit",{duration:1e3*e})},min:0,max:t/1e3,step:.01})})}),A=p(({element:n,store:i,animationName:t})=>{var o,l;const r=n.animations.find(e=>e.name===t&&e.enabled);if(!r){return null}const d=null!==(l=null===(o=r.data)||void 0===o?void 0:o.strength)&&void 0!==l?l:1,m=e=>{i.history.transaction(()=>{n.animations.forEach(i=>{if(i.name===t){const t=i.data||{};n.setAnimation(i.type,{data:Object.assign(Object.assign({},t),{strength:e})})}})});const a=i.activePage;(()=>{let e;return(...t)=>{e&&clearTimeout(e),e=setTimeout(()=>{(()=>{i.isPlaying||(i.play({animatedElementsIds:[n.id],currentTime:n.page.startTime}),setTimeout(()=>{i.stop(),a&&i.selectPage(a.id)},1e3))})(...t)},300)}})()()},s=Math.max(3,d);return e("div",{style:{padding:"10px"},children:e(a,{label:u("toolbar.strength"),value:parseFloat(d.toFixed(2)),onChange:e=>m(e),min:.1,sliderMax:s,step:.05})})}),j=p(({element:n})=>{const i=n.animations.find(e=>"exit"===e.type);if(!i){return null}const t=n.page.duration;return e("div",{style:{padding:"10px"},children:e(a,{label:"End Delay",value:parseFloat((i.delay/1e3).toFixed(2)),onChange:e=>{n.setAnimation("exit",{delay:1e3*e})},min:0,max:t/1e3,step:.01})})}),N=[{key:"move",icon:"animation.typeMove",label:"toolbar.move"},{key:"fade",icon:"animation.typeFade",label:"toolbar.fade"},{key:"zoom",icon:"animation.typeZoom",label:"toolbar.zoom"}],P=[{key:"rotate",icon:"animation.typeRotate",label:"toolbar.rotate"},{key:"blink",icon:"animation.typeBlink",label:"toolbar.blink"},{key:"bounce",icon:"animation.typeBounce",label:"toolbar.bounce"}];export const AnimationsPanel=p(({store:a})=>{var o,l,r,d;const m=a.selectedElements,s=m[0],p=s,f=m.map(e=>e.id).join(","),b="animation"===a.openedSidePanel;if(i.useEffect(()=>{b&&(s&&s.animations||a.restoreSidePanel())},[b,f]),!s||!s.animations){return null}const E=(e,n)=>{if(a.history.transaction(()=>{m.forEach(i=>{i.setAnimation("enter",Object.assign({name:e},n)),i.setAnimation("exit",Object.assign(Object.assign({name:e},n),{from:n.to,to:n.from}))})}),n.enabled){const e=a.activePage;a.play({animatedElementsIds:m.map(e=>e.id),currentTime:s.page.startTime}),setTimeout(()=>{a.stop(),e&&a.selectPage(e.id)},1e3)}},z=e=>{var n;return!!((e?null===(n=s.animations)||void 0===n?void 0:n.filter(n=>n.name===e||n.type===e):s.animations)||[]).find(e=>e.enabled)},w=z("move")||z("fade")||z("zoom"),B=z("rotate")||z("blink")||z("bounce");return n("div",{style:{height:"100%",display:"flex",flexDirection:"column",overflow:"auto",padding:"0 10px"},children:[e("div",{style:{paddingBottom:"10px"},children:e(v,{title:u("sidePanel.animate"),onClose:()=>a.restoreSidePanel()})}),n("div",{style:{paddingTop:"10px",lineHeight:"35px"},children:["Animations"," ",e(t,{variant:"outline",style:{marginLeft:"10px",display:w?"inline-flex":"none"},onClick:()=>{p.set({animations:[]})},children:"Remove All"})]}),n("div",{style:{paddingTop:"25px"},children:[e("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(100px, 1fr))",gap:"5px",paddingBottom:"10px"},children:N.map(({key:i,icon:a,label:o})=>e("div",{children:n(t,{variant:"outline",size:"lg",className:g("pn:flex pn:h-auto pn:w-full pn:flex-col pn:items-center pn:gap-2 pn:p-5",z(i)&&"pn:bg-muted"),onClick:()=>{E(i,{enabled:!z(i)})},children:[e(c,{name:a}),u(o)]})},i))}),n("div",{className:"pn:bg-black/5 pn:dark:bg-white/5",style:{display:w?"block":"none",padding:"10px"},children:[e(h,{element:s,store:a,enabled:z("enter")||z("exit")}),z("move")&&e(x,{value:(null===(l=null===(o=s.animations.find(e=>"move"===e.name))||void 0===o?void 0:o.data)||void 0===l?void 0:l.direction)||"right",onChange:e=>{E("move",{data:{direction:e},enabled:!0})}}),z("move")&&e(A,{store:a,element:p,animationName:"move"}),z("zoom")&&e(y,{value:(null===(d=null===(r=s.animations.find(e=>"zoom"===e.name))||void 0===r?void 0:r.data)||void 0===d?void 0:d.direction)||"in",onChange:e=>{E("zoom",{data:{direction:e},enabled:!0})}}),z("zoom")&&e(A,{store:a,element:p,animationName:"zoom"}),z("enter")&&e(T,{store:a,element:p}),z("enter")&&e(C,{store:a,element:p}),z("exit")&&e(j,{store:a,element:p})]}),n("div",{style:{paddingTop:"10px",lineHeight:"35px"},children:["Effects"," ",e(t,{variant:"outline",style:{marginLeft:"10px",display:B?"inline-flex":"none"},onClick:()=>{p.set({animations:[]})},children:"Remove All"})]}),e("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(100px, 1fr))",gap:"5px",paddingTop:"10px"},children:P.map(({key:i,icon:o,label:l})=>e("div",{children:n(t,{variant:"outline",size:"lg",className:g("pn:flex pn:h-auto pn:w-full pn:flex-col pn:items-center pn:gap-2 pn:p-5",z(i)&&"pn:bg-muted"),onClick:()=>{((e,n)=>{if(a.history.transaction(()=>{m.forEach(i=>{i.setAnimation("loop",Object.assign({name:e},n))})}),n.enabled){const e=a.activePage;a.play({animatedElementsIds:m.map(e=>e.id),currentTime:s.page.startTime}),setTimeout(()=>{a.stop(),e&&a.selectPage(e.id)},1e3)}})(i,{enabled:!z(i)})},children:[e(c,{name:o}),u(l)]})},i))}),B&&e(k,{store:a,element:p}),z("bounce")&&e(A,{store:a,element:p,animationName:"bounce"})]})]})});
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import i from"react";import{Button as t}from"../primitives/button.js";import{SliderField as a}from"../primitives/slider-field.js";import{NumericInput as o}from"../primitives/numeric-input.js";import{Select as l,SelectContent as r,SelectItem as d,SelectTrigger as m,SelectValue as s}from"../primitives/select.js";import{observer as p}from"mobx-react-lite";import{PolotnoIcon as c}from"../icons/registry.js";import{t as u}from"../utils/l10n.js";import{cn as g}from"../lib/utils.js";import{PanelHeader as v}from"../primitives/panel-header.js";export{o as NumberInput};const h=p(({element:i,store:a,enabled:o})=>{const l=i.animations.find(e=>"enter"===e.type),r=i.animations.find(e=>"exit"===e.type);return o?n("div",{children:[e("div",{style:{padding:"10px 0px"},children:"Animate"}),n("div",{style:{display:"flex",gap:10},children:[e(t,{variant:"outline",className:g("pn:flex-1",(null==l?void 0:l.enabled)&&!(null==r?void 0:r.enabled)&&"pn:bg-muted"),onClick:()=>{a.history.transaction(()=>{i.setAnimation("enter",{enabled:!0}),i.setAnimation("exit",{enabled:!1})})},children:"Enter"}),e(t,{variant:"outline",className:g("pn:flex-1",(null==l?void 0:l.enabled)&&(null==r?void 0:r.enabled)&&"pn:bg-muted"),onClick:()=>{a.history.transaction(()=>{i.setAnimation("enter",{enabled:!0}),i.setAnimation("exit",{enabled:!0})})},children:"Both"}),e(t,{variant:"outline",className:g("pn:flex-1",(null==r?void 0:r.enabled)&&!(null==l?void 0:l.enabled)&&"pn:bg-muted"),onClick:()=>{a.history.transaction(()=>{i.setAnimation("enter",{enabled:!1}),i.setAnimation("exit",{enabled:!0})})},children:"Exit"})]})]}):null}),f=["right","left","up","down","bottom-right","bottom-left","top-right","top-left"],b={right:e(c,{name:"animation.directionRight"}),left:e(c,{name:"animation.directionLeft"}),up:e(c,{name:"animation.directionUp"}),down:e(c,{name:"animation.directionDown"}),"bottom-right":e(c,{name:"animation.directionBottomRight"}),"bottom-left":e(c,{name:"animation.directionBottomLeft"}),"top-right":e(c,{name:"animation.directionTopRight"}),"top-left":e(c,{name:"animation.directionTopLeft"})},x=p(({value:i,onChange:t})=>n("div",{style:{paddingTop:"10px"},children:[e("div",{style:{paddingBottom:"10px"},children:"Direction"}),n(l,{value:i,onValueChange:e=>{null!==e&&t(e)},children:[e(m,{className:"pn:w-full",children:n("div",{className:"pn:flex pn:items-center pn:gap-2",children:[b[i],e(s,{})]})}),e(r,{children:f.map(i=>e(d,{value:i,children:n("div",{className:"pn:flex pn:items-center pn:gap-2",children:[b[i],i]})},i))})]})]})),y=p(({value:i,onChange:t})=>n("div",{style:{paddingTop:"10px"},children:[e("div",{style:{paddingBottom:"10px"},children:"Direction"}),n(l,{value:i,onValueChange:e=>{null!==e&&t(e)},children:[e(m,{className:"pn:w-full",children:e(s,{children:"out"===i?"Zoom Out":"Zoom In"})}),n(r,{children:[e(d,{value:"in",children:"Zoom In"}),e(d,{value:"out",children:"Zoom Out"})]})]})]})),T=p(({element:n})=>{const i=n.animations.find(e=>"enter"===e.type);if(!i){return null}const t=n.page.duration;return e("div",{style:{padding:"10px"},children:e(a,{label:"Delay",value:parseFloat((i.delay/1e3).toFixed(2)),onChange:e=>{n.setAnimation("enter",{delay:1e3*e})},min:0,max:t/1e3,step:.01})})}),k=p(({element:n,store:i})=>{const t=n.animations.find(e=>"loop"===e.type&&e.enabled);if(!t){return null}const o=500/t.duration;return e("div",{style:{padding:"10px"},children:e(a,{label:"Speed",value:o,onChange:e=>{n.setAnimation("loop",{duration:500/e})},min:.1,max:3,step:.01,onCommit:()=>{const e=i.activePage;i.play({animatedElementsIds:[n.id],currentTime:n.page.startTime}),setTimeout(()=>{i.stop(),e&&i.selectPage(e.id)},1e3)}})})}),C=p(({element:n})=>{const i=n.animations.find(e=>"enter"===e.type);if(!i){return null}const t=n.page.duration;return e("div",{style:{padding:"10px"},children:e(a,{label:"Duration",value:parseFloat((i.duration/1e3).toFixed(2)),onChange:e=>{n.setAnimation("enter",{duration:1e3*e}),n.setAnimation("exit",{duration:1e3*e})},min:0,max:t/1e3,step:.01})})}),A=p(({element:n,store:i,animationName:t})=>{var o,l;const r=n.animations.find(e=>e.name===t&&e.enabled);if(!r){return null}const d=null!==(l=null===(o=r.data)||void 0===o?void 0:o.strength)&&void 0!==l?l:1,m=e=>{i.history.transaction(()=>{n.animations.forEach(i=>{if(i.name===t){const t=i.data||{};n.setAnimation(i.type,{data:Object.assign(Object.assign({},t),{strength:e})})}})});const a=i.activePage;(()=>{let e;return(...t)=>{e&&clearTimeout(e),e=setTimeout(()=>{(()=>{i.isPlaying||(i.play({animatedElementsIds:[n.id],currentTime:n.page.startTime}),setTimeout(()=>{i.stop(),a&&i.selectPage(a.id)},1e3))})(...t)},300)}})()()},s=Math.max(3,d);return e("div",{style:{padding:"10px"},children:e(a,{label:u("toolbar.strength"),value:parseFloat(d.toFixed(2)),onChange:e=>m(e),min:.1,sliderMax:s,step:.05})})}),j=p(({element:n})=>{const i=n.animations.find(e=>"exit"===e.type);if(!i){return null}const t=n.page.duration;return e("div",{style:{padding:"10px"},children:e(a,{label:"End Delay",value:parseFloat((i.delay/1e3).toFixed(2)),onChange:e=>{n.setAnimation("exit",{delay:1e3*e})},min:0,max:t/1e3,step:.01})})}),N=[{key:"move",icon:"animation.typeMove",label:"toolbar.move"},{key:"fade",icon:"animation.typeFade",label:"toolbar.fade"},{key:"zoom",icon:"animation.typeZoom",label:"toolbar.zoom"}],P=[{key:"rotate",icon:"animation.typeRotate",label:"toolbar.rotate"},{key:"blink",icon:"animation.typeBlink",label:"toolbar.blink"},{key:"bounce",icon:"animation.typeBounce",label:"toolbar.bounce"}];export const AnimationsPanel=p(({store:a})=>{var o,l,r,d;const m=a.selectedElements,s=m[0],p=s,f=m.map(e=>e.id).join(","),b="animation"===a.openedSidePanel;if(i.useEffect(()=>{b&&(s&&s.animations||a.restoreSidePanel())},[b,f]),!s||!s.animations){return null}const E=(e,n)=>{if(a.history.transaction(()=>{m.forEach(i=>{i.setAnimation("enter",Object.assign({name:e},n)),i.setAnimation("exit",Object.assign(Object.assign({name:e},n),{from:n.to,to:n.from}))})}),n.enabled){const e=a.activePage;a.play({animatedElementsIds:m.map(e=>e.id),currentTime:s.page.startTime}),setTimeout(()=>{a.stop(),e&&a.selectPage(e.id)},1e3)}},z=e=>{var n;return!!((e?null===(n=s.animations)||void 0===n?void 0:n.filter(n=>n.name===e||n.type===e):s.animations)||[]).find(e=>e.enabled)},w=z("move")||z("fade")||z("zoom"),B=z("rotate")||z("blink")||z("bounce");return n("div",{style:{height:"100%",display:"flex",flexDirection:"column",overflow:"auto",padding:"0 10px"},children:[e("div",{style:{paddingBottom:"10px"},children:e(v,{title:u("sidePanel.animate"),onClose:()=>a.restoreSidePanel()})}),n("div",{style:{paddingTop:"10px",lineHeight:"35px"},children:["Animations"," ",e(t,{variant:"outline",style:{marginLeft:"10px",display:w?"inline-flex":"none"},onClick:()=>{p.set({animations:[]})},children:"Remove All"})]}),n("div",{style:{paddingTop:"25px"},children:[e("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(100px, 1fr))",gap:"5px",paddingBottom:"10px"},children:N.map(({key:i,icon:a,label:o})=>e("div",{children:n(t,{variant:"outline",size:"lg",className:g("pn:flex pn:h-auto pn:w-full pn:flex-col pn:items-center pn:gap-2 pn:p-5",z(i)&&"pn:bg-muted"),onClick:()=>{E(i,{enabled:!z(i)})},children:[e(c,{name:a}),u(o)]})},i))}),n("div",{className:"pn:bg-black/5 pn:dark:bg-white/5",style:{display:w?"block":"none",padding:"10px"},children:[e(h,{element:s,store:a,enabled:z("enter")||z("exit")}),z("move")&&e(x,{value:(null===(l=null===(o=s.animations.find(e=>"move"===e.name))||void 0===o?void 0:o.data)||void 0===l?void 0:l.direction)||"right",onChange:e=>{E("move",{data:{direction:e},enabled:!0})}}),z("move")&&e(A,{store:a,element:p,animationName:"move"}),z("zoom")&&e(y,{value:(null===(d=null===(r=s.animations.find(e=>"zoom"===e.name))||void 0===r?void 0:r.data)||void 0===d?void 0:d.direction)||"in",onChange:e=>{E("zoom",{data:{direction:e},enabled:!0})}}),z("zoom")&&e(A,{store:a,element:p,animationName:"zoom"}),z("enter")&&e(T,{store:a,element:p}),z("enter")&&e(C,{store:a,element:p}),z("exit")&&e(j,{store:a,element:p})]}),n("div",{style:{paddingTop:"10px",lineHeight:"35px"},children:["Effects"," ",e(t,{variant:"outline",style:{marginLeft:"10px",display:B?"inline-flex":"none"},onClick:()=>{p.set({animations:[]})},children:"Remove All"})]}),e("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(100px, 1fr))",gap:"5px",paddingTop:"10px"},children:P.map(({key:i,icon:o,label:l})=>e("div",{children:n(t,{variant:"outline",size:"lg",className:g("pn:flex pn:h-auto pn:w-full pn:flex-col pn:items-center pn:gap-2 pn:p-5",z(i)&&"pn:bg-muted"),onClick:()=>{((e,n)=>{if(a.history.transaction(()=>{m.forEach(i=>{i.setAnimation("loop",Object.assign({name:e},n))})}),n.enabled){const e=a.activePage;a.play({animatedElementsIds:m.map(e=>e.id),currentTime:s.page.startTime}),setTimeout(()=>{a.stop(),e&&a.selectPage(e.id)},1e3)}})(i,{enabled:!z(i)})},children:[e(c,{name:o}),u(l)]})},i))}),B&&e(k,{store:a,element:p}),z("bounce")&&e(A,{store:a,element:p,animationName:"bounce"})]})]})});

package/side-panel/draw-panel.js

@@ -1 +1 @@
-import{jsx as e,jsxs as o,Fragment as t}from"react/jsx-runtime";import*as l from"react";import{observer as i}from"mobx-react-lite";import{PolotnoIcon as r}from"../icons/registry.js";import s from"../toolbar/color-picker.js";import*as n from"../utils/svg.js";import{ToggleGroup as a,ToggleGroupItem as p}from"../primitives/toggle-group.js";import{SliderField as c}from"../primitives/slider-field.js";import{FieldRow as m}from"../primitives/field-row.js";const h=(e,o,t)=>Math.max(o,Math.min(t,e)),d=(e,o)=>Array.from(e.keys()).find(e=>n.sameColors(e,o)),g=(e,o)=>{const t=d(e,o);return e.get(t||"")||o};export const DrawPanel=i(({store:i})=>{const{brushType:u,strokeWidth:v,stroke:f,opacity:x}=i.toolOptions,y="selection"===i.tool,b=i.selectedElements,C=1===b.length&&"svg"===b[0].type,T=C?b[0]:null,j=n.useSvgColors((null==T?void 0:T.src)||""),k=j.length>0?j[0]:null;return l.useEffect(()=>()=>{i.setTool("selection")},[]),o("div",{className:"pn:flex pn:h-full pn:flex-col pn:overflow-auto pn:pr-1",children:[o("div",{style:{marginBottom:"30px"},children:[e("h3",{className:"pn:mb-[15px] pn:text-sm pn:font-semibold pn:uppercase pn:text-muted-foreground",children:"Tool"}),e("div",{style:{padding:"0 5px"},children:o(a,{type:"single",variant:"outline",value:y?"selection":u,onValueChange:e=>{var o;e&&("selection"===(o=e)?i.setTool("selection"):(i.selectElements([]),i.setTool("draw"),i.setToolOptions({brushType:o,opacity:"highlighter"===o?.5:1,strokeWidth:"highlighter"===o?30:v||5})))},className:"pn:w-full",children:[o(p,{value:"selection",className:"pn:flex-1",children:[e(r,{name:"draw.select"}),"Selection"]}),o(p,{value:"brush",className:"pn:flex-1",children:[e(r,{name:"draw.brush"}),"Brush"]}),o(p,{value:"highlighter",className:"pn:flex-1",children:[e(r,{name:"draw.highlighter"}),"Highlighter"]})]})})]}),!C&&o(t,{children:[e("div",{style:{marginBottom:"30px",opacity:y?.5:1},children:e(c,{label:"Stroke Width",value:v,onChange:e=>(e=>{i.setToolOptions({strokeWidth:e})})(h(e,1,50)),min:1,max:50,disabled:y})}),e("div",{style:{marginBottom:"30px",opacity:y?.5:1,pointerEvents:y?"none":"auto"},children:e(m,{label:"Color",className:"pn:py-[5px]",children:e(s,{value:f,size:30,onChange:e=>{i.setToolOptions({stroke:e})},store:i})})}),e("div",{style:{marginBottom:"30px",opacity:y?.5:1},children:e(c,{label:"Opacity",value:Math.round(100*x),onChange:e=>(e=>{i.setToolOptions({opacity:e})})(h(e,0,100)/100),min:0,max:100,disabled:y})})]}),C&&k&&o(t,{children:[e("div",{style:{marginBottom:"30px"},children:e(m,{label:"Color",className:"pn:py-[5px]",children:e(s,{value:g(T.colorsReplace,k),size:30,onChange:e=>{if(T&&k){const o=d(T.colorsReplace,k)||k;T.replaceColor(o,e)}},store:i,gradientEnabled:!0})})}),e("div",{style:{marginBottom:"30px"},children:e(c,{label:"Opacity",value:Math.round(100*T.opacity),onChange:e=>(e=>{T&&T.set({opacity:e})})(h(e,0,100)/100),min:0,max:100})})]})]})});
+import{jsx as e,jsxs as o,Fragment as t}from"react/jsx-runtime";import*as l from"react";import{observer as i}from"mobx-react-lite";import{PolotnoIcon as r}from"../icons/registry.js";import s from"../toolbar/color-picker.js";import*as n from"../utils/svg.js";import{ToggleGroup as a,ToggleGroupItem as p}from"../primitives/toggle-group.js";import{SliderField as c}from"../primitives/slider-field.js";import{FieldRow as m}from"../primitives/field-row.js";const h=(e,o,t)=>Math.max(o,Math.min(t,e)),d=(e,o)=>Array.from(e.keys()).find(e=>n.sameColors(e,o)),g=(e,o)=>{const t=d(e,o);return e.get(t||"")||o};export const DrawPanel=i(({store:i})=>{const{brushType:u,strokeWidth:v,stroke:f,opacity:x}=i.toolOptions,y="selection"===i.tool,b=i.selectedElements,C=1===b.length&&"svg"===b[0].type,T=C?b[0]:null,j=n.useSvgColors((null==T?void 0:T.src)||""),k=j.length>0?j[0]:null;return l.useEffect(()=>()=>{i.setTool("selection")},[]),o("div",{className:"pn:flex pn:h-full pn:flex-col pn:overflow-auto pn:pr-1",children:[o("div",{style:{marginBottom:"30px"},children:[e("h3",{className:"pn:mb-[15px] pn:text-sm pn:font-semibold pn:uppercase pn:text-muted-foreground",children:"Tool"}),e("div",{style:{padding:"0 5px"},children:o(a,{variant:"outline",value:[y?"selection":u],onValueChange:e=>{const o=e[0];var t;o&&("selection"===(t=o)?i.setTool("selection"):(i.selectElements([]),i.setTool("draw"),i.setToolOptions({brushType:t,opacity:"highlighter"===t?.5:1,strokeWidth:"highlighter"===t?30:v||5})))},className:"pn:w-full",children:[o(p,{value:"selection",className:"pn:flex-1",children:[e(r,{name:"draw.select"}),"Selection"]}),o(p,{value:"brush",className:"pn:flex-1",children:[e(r,{name:"draw.brush"}),"Brush"]}),o(p,{value:"highlighter",className:"pn:flex-1",children:[e(r,{name:"draw.highlighter"}),"Highlighter"]})]})})]}),!C&&o(t,{children:[e("div",{style:{marginBottom:"30px",opacity:y?.5:1},children:e(c,{label:"Stroke Width",value:v,onChange:e=>(e=>{i.setToolOptions({strokeWidth:e})})(h(e,1,50)),min:1,max:50,disabled:y})}),e("div",{style:{marginBottom:"30px",opacity:y?.5:1,pointerEvents:y?"none":"auto"},children:e(m,{label:"Color",className:"pn:py-[5px]",children:e(s,{value:f,size:30,onChange:e=>{i.setToolOptions({stroke:e})},store:i})})}),e("div",{style:{marginBottom:"30px",opacity:y?.5:1},children:e(c,{label:"Opacity",value:Math.round(100*x),onChange:e=>(e=>{i.setToolOptions({opacity:e})})(h(e,0,100)/100),min:0,max:100,disabled:y})})]}),C&&k&&o(t,{children:[e("div",{style:{marginBottom:"30px"},children:e(m,{label:"Color",className:"pn:py-[5px]",children:e(s,{value:g(T.colorsReplace,k),size:30,onChange:e=>{if(T&&k){const o=d(T.colorsReplace,k)||k;T.replaceColor(o,e)}},store:i,gradientEnabled:!0})})}),e("div",{style:{marginBottom:"30px"},children:e(c,{label:"Opacity",value:Math.round(100*T.opacity),onChange:e=>(e=>{T&&T.set({opacity:e})})(h(e,0,100)/100),min:0,max:100})})]})]})});

package/side-panel/effects-panel.js

@@ -1 +1 @@
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import r from"react";import{Slider as l}from"../primitives/slider.js";import{SliderField as o}from"../primitives/slider-field.js";import{FieldGroup as t}from"../primitives/field-group.js";import{observer as n}from"mobx-react-lite";import{INDEPENDENT_FILTERS as i}from"../model/shape-model.js";import{ColorPicker as s}from"../toolbar/color-picker.js";import{t as d}from"../utils/l10n.js";import{EffectCard as b}from"./effect-card.js";import{Effects as c}from"../utils/filters.js";import{CurvePowerSlider as h}from"../toolbar/filters-picker.js";import{NumericInput as u}from"../primitives/numeric-input.js";import{FieldRow as m}from"../primitives/field-row.js";import{PanelHeader as g}from"../primitives/panel-header.js";export{u as NumberInput};const p=(e,a,r)=>Math.max(a,Math.min(r,e)),f=[["temperature","toolbar.temperature"],["contrast","toolbar.contrast"],["shadows","toolbar.shadows"],["white","toolbar.white"],["black","toolbar.black"],["vibrance","toolbar.vibrance"],["saturation","toolbar.saturation"]],v=({store:r,color:o,onColorChange:t,value:n,onValueChange:i,min:d,max:b})=>a("div",{style:{display:"flex",alignItems:"center",padding:"8px 0"},children:[e(s,{value:o,size:30,gradientEnabled:!0,onChange:t,store:r}),e("div",{style:{flex:1,paddingLeft:"10px",paddingRight:"10px"},children:e(l,{value:[n],onValueChange:([e])=>i(p(e,d,b)),min:d,max:b,step:1})}),e(u,{value:n,onValueChange:e=>i(p(e,d,b)),min:d,max:b,style:{width:64}})]});export const EffectsPanel=n(({store:l})=>{const n=l.selectedElements,C=n[0],x=n.map(e=>e.id).join(","),w="effects"===l.openedSidePanel;if(r.useEffect(()=>{w&&(C&&C.filters||l.restoreSidePanel())},[w,x]),!C||!C.filters){return null}const y="text"===C.type,E="image"===C.type,k="svg"===C.type,M=E||k,j=e=>{l.history.transaction(()=>{n.forEach(a=>{a.set(e)})})},S=(e,a)=>{l.history.transaction(()=>{n.forEach(r=>{let l=Number(a);return 0==a||a||(l=r.filters.has(e)?null:1),i.includes(e)||r.set({grayscaleEnabled:"grayscale"===e&&!!a,sepiaEnabled:"sepia"===e&&!!a}),r.setFilter(e,l)})})};return a("div",{style:{height:"100%",display:"flex",flexDirection:"column",overflow:"auto",padding:"0 10px"},children:[e(g,{title:d("sidePanel.effects"),onClose:()=>l.restoreSidePanel()}),M&&e("div",{style:{display:"flex",flexDirection:"column",gap:"16px",marginTop:"16px"},children:a("div",{style:{display:"flex",gap:"16px",flexWrap:"wrap"},children:[e(b,{active:C.grayscaleEnabled,onClick:()=>{S("grayscale",!C.grayscaleEnabled)},title:d("toolbar.grayscale"),imageSrc:C.src,effect:c.grayscale}),e(b,{active:C.sepiaEnabled,onClick:()=>{S("sepia",!C.sepiaEnabled)},title:d("toolbar.sepia"),imageSrc:C.src,effect:c.sepia}),e(b,{active:C.filters.has("cold"),onClick:()=>{S("cold",C.filters.has("cold")?null:1)},title:d("toolbar.cold"),imageSrc:C.src,effect:c.cold}),e(b,{active:C.filters.has("natural"),onClick:()=>{S("natural",C.filters.has("natural")?null:1)},title:d("toolbar.natural"),imageSrc:C.src,effect:c.natural}),e(b,{active:C.filters.has("warm"),onClick:()=>{S("warm",C.filters.has("warm")?null:1)},title:d("toolbar.warm"),imageSrc:C.src,effect:c.warm})]})}),e(o,{label:d("toolbar.blur"),enabled:C.blurEnabled,visible:M||y,onEnabledChange:e=>{j({blurEnabled:e})},value:C.blurRadius,onChange:e=>{j({blurRadius:e})},min:0,max:100}),e(o,{label:d("toolbar.brightness"),visible:M,enabled:C.brightnessEnabled,onEnabledChange:e=>{j({brightnessEnabled:e})},value:Math.round(100*C.brightness),onChange:e=>{j({brightness:e/100})},min:-100,max:100}),f.map(([a,r])=>{var l,t;return e(o,{label:d(r),visible:M,enabled:C.filters.has(a),onEnabledChange:e=>{S(a,e?0:null)},value:Math.round(100*(null!==(t=null===(l=C.filters.get(a))||void 0===l?void 0:l.intensity)&&void 0!==t?t:0)),onChange:e=>{S(a,e/100)},min:-100,max:100},a)}),y&&a(t,{label:d("toolbar.curvedText")||"Curved text",enabled:!!C.curveEnabled,onEnabledChange:e=>j({curveEnabled:e}),children:[e(m,{label:d("toolbar.curvePower")||"Curve",className:"pn:py-2",children:e(u,{value:Math.round(100*C.curvePower),onValueChange:e=>{j({curvePower:p(e,-100,100)/100})},style:{width:64},min:-100,max:100})}),e(h,{textEl:C,eachSet:j})]}),y&&e(t,{label:d("toolbar.textStroke"),enabled:!!C.strokeWidth,onEnabledChange:e=>j({strokeWidth:e?2:0}),children:e(v,{store:l,color:C.stroke,onColorChange:e=>{j({stroke:e})},value:C.strokeWidth,onValueChange:e=>{j({strokeWidth:e})},min:1,max:Math.max(1,Math.round(C.fontSize/2))})}),y&&a(t,{label:d("toolbar.textBackground"),enabled:!!C.backgroundEnabled,onEnabledChange:e=>j({backgroundEnabled:e}),children:[e(o,{label:d("toolbar.backgroundCornerRadius"),value:Math.round(100*C.backgroundCornerRadius),onChange:e=>j({backgroundCornerRadius:e/100}),min:0,max:100}),e(o,{label:d("toolbar.backgroundPadding"),value:Math.round(100*C.backgroundPadding),onChange:e=>j({backgroundPadding:e/100}),min:0,max:100}),e(o,{label:d("toolbar.opacity"),value:Math.round(100*C.backgroundOpacity),onChange:e=>j({backgroundOpacity:e/100}),min:0,max:100}),e(m,{label:d("toolbar.color"),className:"pn:py-2",children:e(s,{value:C.backgroundColor,size:30,onChange:e=>{j({backgroundColor:e})},store:l})})]}),M&&e(t,{label:d("toolbar.border"),enabled:!!C.borderSize,onEnabledChange:e=>j({borderSize:e?2:0}),children:e(v,{store:l,color:C.borderColor,onColorChange:e=>{j({borderColor:e})},value:C.borderSize,onValueChange:e=>{j({borderSize:e})},min:1,max:Math.max(1,Math.round(Math.min(C.width,C.height)/2))})}),M&&e(o,{label:d("toolbar.cornerRadius"),visible:M,enabled:0!==C.cornerRadius,onEnabledChange:e=>{j({cornerRadius:e?Math.min(C.width/4,C.height/4):0})},value:Math.min(C.cornerRadius,Math.round(Math.min(C.width/2,C.height/2))),onChange:e=>{j({cornerRadius:e})},min:1,max:Math.round(Math.min(C.width/2,C.height/2))}),a(t,{label:d("toolbar.shadow"),enabled:C.shadowEnabled,onEnabledChange:e=>j({shadowEnabled:e}),children:[e(o,{label:d("toolbar.blur"),value:C.shadowBlur,onChange:e=>{j({shadowBlur:e})},min:0,max:50}),e(o,{label:d("toolbar.offsetX"),value:C.shadowOffsetX,onChange:e=>{j({shadowOffsetX:e})},min:-50,max:50}),e(o,{label:d("toolbar.offsetY"),value:C.shadowOffsetY,onChange:e=>{j({shadowOffsetY:e})},min:-50,max:50}),e(o,{label:d("toolbar.opacity"),value:Math.round(100*C.shadowOpacity),onChange:e=>{j({shadowOpacity:e/100})},min:0,max:100}),e(m,{label:d("toolbar.color"),className:"pn:py-2",children:e(s,{value:C.shadowColor,size:30,onChange:e=>{j({shadowColor:e})},store:l})})]})]})});
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import r from"react";import{Slider as l}from"../primitives/slider.js";import{firstSliderValue as o}from"../lib/utils.js";import{SliderField as t}from"../primitives/slider-field.js";import{FieldGroup as n}from"../primitives/field-group.js";import{observer as i}from"mobx-react-lite";import{INDEPENDENT_FILTERS as s}from"../model/shape-model.js";import{ColorPicker as d}from"../toolbar/color-picker.js";import{t as b}from"../utils/l10n.js";import{EffectCard as c}from"./effect-card.js";import{Effects as h}from"../utils/filters.js";import{CurvePowerSlider as u}from"../toolbar/filters-picker.js";import{NumericInput as m}from"../primitives/numeric-input.js";import{FieldRow as g}from"../primitives/field-row.js";import{PanelHeader as p}from"../primitives/panel-header.js";export{m as NumberInput};const f=(e,a,r)=>Math.max(a,Math.min(r,e)),v=[["temperature","toolbar.temperature"],["contrast","toolbar.contrast"],["shadows","toolbar.shadows"],["white","toolbar.white"],["black","toolbar.black"],["vibrance","toolbar.vibrance"],["saturation","toolbar.saturation"]],C=({store:r,color:t,onColorChange:n,value:i,onValueChange:s,min:b,max:c})=>a("div",{style:{display:"flex",alignItems:"center",padding:"8px 0"},children:[e(d,{value:t,size:30,gradientEnabled:!0,onChange:n,store:r}),e("div",{style:{flex:1,paddingLeft:"10px",paddingRight:"10px"},children:e(l,{value:[i],onValueChange:e=>s(f(o(e),b,c)),min:b,max:c,step:1})}),e(m,{value:i,onValueChange:e=>s(f(e,b,c)),min:b,max:c,style:{width:64}})]});export const EffectsPanel=i(({store:l})=>{const o=l.selectedElements,i=o[0],x=o.map(e=>e.id).join(","),w="effects"===l.openedSidePanel;if(r.useEffect(()=>{w&&(i&&i.filters||l.restoreSidePanel())},[w,x]),!i||!i.filters){return null}const y="text"===i.type,E="image"===i.type,k="svg"===i.type,M=E||k,j=e=>{l.history.transaction(()=>{o.forEach(a=>{a.set(e)})})},S=(e,a)=>{l.history.transaction(()=>{o.forEach(r=>{let l=Number(a);return 0==a||a||(l=r.filters.has(e)?null:1),s.includes(e)||r.set({grayscaleEnabled:"grayscale"===e&&!!a,sepiaEnabled:"sepia"===e&&!!a}),r.setFilter(e,l)})})};return a("div",{style:{height:"100%",display:"flex",flexDirection:"column",overflow:"auto",padding:"0 10px"},children:[e(p,{title:b("sidePanel.effects"),onClose:()=>l.restoreSidePanel()}),M&&e("div",{style:{display:"flex",flexDirection:"column",gap:"16px",marginTop:"16px"},children:a("div",{style:{display:"flex",gap:"16px",flexWrap:"wrap"},children:[e(c,{active:i.grayscaleEnabled,onClick:()=>{S("grayscale",!i.grayscaleEnabled)},title:b("toolbar.grayscale"),imageSrc:i.src,effect:h.grayscale}),e(c,{active:i.sepiaEnabled,onClick:()=>{S("sepia",!i.sepiaEnabled)},title:b("toolbar.sepia"),imageSrc:i.src,effect:h.sepia}),e(c,{active:i.filters.has("cold"),onClick:()=>{S("cold",i.filters.has("cold")?null:1)},title:b("toolbar.cold"),imageSrc:i.src,effect:h.cold}),e(c,{active:i.filters.has("natural"),onClick:()=>{S("natural",i.filters.has("natural")?null:1)},title:b("toolbar.natural"),imageSrc:i.src,effect:h.natural}),e(c,{active:i.filters.has("warm"),onClick:()=>{S("warm",i.filters.has("warm")?null:1)},title:b("toolbar.warm"),imageSrc:i.src,effect:h.warm})]})}),e(t,{label:b("toolbar.blur"),enabled:i.blurEnabled,visible:M||y,onEnabledChange:e=>{j({blurEnabled:e})},value:i.blurRadius,onChange:e=>{j({blurRadius:e})},min:0,max:100}),e(t,{label:b("toolbar.brightness"),visible:M,enabled:i.brightnessEnabled,onEnabledChange:e=>{j({brightnessEnabled:e})},value:Math.round(100*i.brightness),onChange:e=>{j({brightness:e/100})},min:-100,max:100}),v.map(([a,r])=>{var l,o;return e(t,{label:b(r),visible:M,enabled:i.filters.has(a),onEnabledChange:e=>{S(a,e?0:null)},value:Math.round(100*(null!==(o=null===(l=i.filters.get(a))||void 0===l?void 0:l.intensity)&&void 0!==o?o:0)),onChange:e=>{S(a,e/100)},min:-100,max:100},a)}),y&&a(n,{label:b("toolbar.curvedText")||"Curved text",enabled:!!i.curveEnabled,onEnabledChange:e=>j({curveEnabled:e}),children:[e(g,{label:b("toolbar.curvePower")||"Curve",className:"pn:py-2",children:e(m,{value:Math.round(100*i.curvePower),onValueChange:e=>{j({curvePower:f(e,-100,100)/100})},style:{width:64},min:-100,max:100})}),e(u,{textEl:i,eachSet:j})]}),y&&e(n,{label:b("toolbar.textStroke"),enabled:!!i.strokeWidth,onEnabledChange:e=>j({strokeWidth:e?2:0}),children:e(C,{store:l,color:i.stroke,onColorChange:e=>{j({stroke:e})},value:i.strokeWidth,onValueChange:e=>{j({strokeWidth:e})},min:1,max:Math.max(1,Math.round(i.fontSize/2))})}),y&&a(n,{label:b("toolbar.textBackground"),enabled:!!i.backgroundEnabled,onEnabledChange:e=>j({backgroundEnabled:e}),children:[e(t,{label:b("toolbar.backgroundCornerRadius"),value:Math.round(100*i.backgroundCornerRadius),onChange:e=>j({backgroundCornerRadius:e/100}),min:0,max:100}),e(t,{label:b("toolbar.backgroundPadding"),value:Math.round(100*i.backgroundPadding),onChange:e=>j({backgroundPadding:e/100}),min:0,max:100}),e(t,{label:b("toolbar.opacity"),value:Math.round(100*i.backgroundOpacity),onChange:e=>j({backgroundOpacity:e/100}),min:0,max:100}),e(g,{label:b("toolbar.color"),className:"pn:py-2",children:e(d,{value:i.backgroundColor,size:30,onChange:e=>{j({backgroundColor:e})},store:l})})]}),M&&e(n,{label:b("toolbar.border"),enabled:!!i.borderSize,onEnabledChange:e=>j({borderSize:e?2:0}),children:e(C,{store:l,color:i.borderColor,onColorChange:e=>{j({borderColor:e})},value:i.borderSize,onValueChange:e=>{j({borderSize:e})},min:1,max:Math.max(1,Math.round(Math.min(i.width,i.height)/2))})}),M&&e(t,{label:b("toolbar.cornerRadius"),visible:M,enabled:0!==i.cornerRadius,onEnabledChange:e=>{j({cornerRadius:e?Math.min(i.width/4,i.height/4):0})},value:Math.min(i.cornerRadius,Math.round(Math.min(i.width/2,i.height/2))),onChange:e=>{j({cornerRadius:e})},min:1,max:Math.round(Math.min(i.width/2,i.height/2))}),a(n,{label:b("toolbar.shadow"),enabled:i.shadowEnabled,onEnabledChange:e=>j({shadowEnabled:e}),children:[e(t,{label:b("toolbar.blur"),value:i.shadowBlur,onChange:e=>{j({shadowBlur:e})},min:0,max:50}),e(t,{label:b("toolbar.offsetX"),value:i.shadowOffsetX,onChange:e=>{j({shadowOffsetX:e})},min:-50,max:50}),e(t,{label:b("toolbar.offsetY"),value:i.shadowOffsetY,onChange:e=>{j({shadowOffsetY:e})},min:-50,max:50}),e(t,{label:b("toolbar.opacity"),value:Math.round(100*i.shadowOpacity),onChange:e=>{j({shadowOpacity:e/100})},min:0,max:100}),e(g,{label:b("toolbar.color"),className:"pn:py-2",children:e(d,{value:i.shadowColor,size:30,onChange:e=>{j({shadowColor:e})},store:l})})]})]})});

package/side-panel/size-panel.js

@@ -1 +1 @@
-var e=this&&this.__rest||function(e,n){var i={};for(var t in e){Object.prototype.hasOwnProperty.call(e,t)&&n.indexOf(t)<0&&(i[t]=e[t])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(t=Object.getOwnPropertySymbols(e);a<t.length;a++){n.indexOf(t[a])<0&&Object.prototype.propertyIsEnumerable.call(e,t[a])&&(i[t[a]]=e[t[a]])}}return i};import{jsx as n,jsxs as i}from"react/jsx-runtime";import*as t from"react";import{observer as a}from"mobx-react-lite";import{PolotnoIcon as s}from"../icons/registry.js";import{t as r}from"../utils/l10n.js";import{cn as p}from"../lib/utils.js";import{pxToUnit as o,pxToUnitRounded as l,unitToPx as m}from"../utils/unit.js";import{Button as c}from"../primitives/button.js";import{Input as d}from"../primitives/input.js";import{Switch as u}from"../primitives/switch.js";import{Select as h,SelectContent as x,SelectItem as v,SelectTrigger as g,SelectValue as b}from"../primitives/select.js";import{Tooltip as f,TooltipContent as z,TooltipTrigger as y}from"../primitives/tooltip.js";export const SIZE_CATEGORIES=[{name:"Instagram",icon:n(s,{name:"size.instagram"}),sizes:[["Post",1080,1080,"px",n(s,{name:"size.instagram"})],["Story",1080,1920,"px",n(s,{name:"size.instagram"})],["Ad",1080,1080,"px",n(s,{name:"size.instagram"})]]},{name:"Facebook",icon:n(s,{name:"size.facebook"}),sizes:[["Post (Landscape)",1200,630,"px",n(s,{name:"size.facebook"})],["Post (Square)",1080,1080,"px",n(s,{name:"size.facebook"})],["Cover",851,315,"px",n(s,{name:"size.facebook"})]]},{name:"Youtube",icon:n(s,{name:"size.youtube"}),sizes:[["Thumbnail",1280,720,"px",n(s,{name:"size.youtube"})],["Channel",2560,1440,"px",n(s,{name:"size.youtube"})],["Short",1080,1920,"px",n(s,{name:"size.youtube"})]]},{name:"LinkedIn",icon:n(s,{name:"size.linkedin"}),sizes:[["Post",1200,627,"px",n(s,{name:"size.linkedin"})],["Banner",1584,396,"px",n(s,{name:"size.linkedin"})],["Square",1080,1080,"px",n(s,{name:"size.linkedin"})]]},{name:"Twitter",icon:n(s,{name:"size.twitter"}),sizes:[["Post",1600,900,"px",n(s,{name:"size.twitter"})],["Header",1500,500,"px",n(s,{name:"size.twitter"})],["Square",1080,1080,"px",n(s,{name:"size.twitter"})]]},{name:"Video",icon:n(s,{name:"size.video"}),sizes:[["Full HD",1920,1080,"px",n(s,{name:"size.video"})],["4K UHD",3840,2160,"px",n(s,{name:"size.video"})],["Vertical HD",1080,1920,"px",n(s,{name:"size.video"})],["Square HD",1080,1080,"px",n(s,{name:"size.video"})]]},{name:"Print",icon:n(s,{name:"size.print"}),sizes:[["Invitation",14,14,"cm",n(s,{name:"size.print"})],["A4 Portrait",21,29.7,"cm",n(s,{name:"size.print"})],["A4 Landscape",29.7,21,"cm",n(s,{name:"size.print"})],["A3",29.7,42,"cm",n(s,{name:"size.print"})],["Letter Portrait",8.5,11,"in",n(s,{name:"size.print"})],["Letter Landscape",11,8.5,"in",n(s,{name:"size.print"})],["Business card",3.5,2,"in",n(s,{name:"size.businessCard"})],["Poster",18,24,"in",n(s,{name:"size.print"})]]}];const w=a=>{var{value:r,onChange:o}=a,l=e(a,["value","onChange"]);const[m,c]=t.useState(r.toString()),u=t.useRef(r);u.current=m;const h=()=>{o(Math.max(l.min||0,parseFloat(u.current)))};t.useEffect(()=>{c(String(r))},[r]);const x=Number(l.step)||1,v=e=>{const n=parseFloat(u.current);let i=(Number.isNaN(n)?Number(r)||0:n)+e*x;"number"==typeof l.min&&(i=Math.max(l.min,i)),"number"==typeof l.max&&(i=Math.min(l.max,i)),i=parseFloat(i.toFixed(4)),c(String(i)),o(i)},{className:g}=l,b=e(l,["className"]);return i("div",{className:"pn:relative",children:[n(d,Object.assign({},b,{type:"number",value:m.toString(),className:p("pn:pr-6 pn:[appearance:textfield] pn:[&::-webkit-inner-spin-button]:appearance-none pn:[&::-webkit-outer-spin-button]:appearance-none",g),onChange:e=>{const n=e.target.value;Number.isNaN(parseFloat(n))?""===n&&c(n):c(n)},onBlur:h,onFocus:e=>e.target.select(),onKeyDown:e=>{"Enter"===e.key&&h()}})),i("div",{className:"pn:absolute pn:inset-y-0 pn:right-0 pn:flex pn:w-5 pn:flex-col pn:border-l pn:border-input",children:[n("button",{type:"button",tabIndex:-1,"aria-label":"Increment",className:"pn:flex pn:flex-1 pn:appearance-none pn:cursor-pointer pn:items-center pn:justify-center pn:border-0 pn:bg-transparent pn:text-muted-foreground pn:hover:bg-muted pn:hover:text-foreground",onClick:()=>v(1),children:n(s,{name:"ui.chevronUp",className:"pn:size-3"})}),n("button",{type:"button",tabIndex:-1,"aria-label":"Decrement",className:"pn:flex pn:flex-1 pn:appearance-none pn:cursor-pointer pn:items-center pn:justify-center pn:border-0 pn:border-t pn:border-input pn:bg-transparent pn:text-muted-foreground pn:hover:bg-muted pn:hover:text-foreground",onClick:()=>v(-1),children:n(s,{name:"ui.chevronDown",className:"pn:size-3"})})]})]})};export const SizePanel=a(({store:e})=>{var a,p;const[d,N]=t.useState(!0),[k,P]=t.useState(e.width),[S,j]=t.useState(e.height),C=o({px:10,unit:e.unit,dpi:e.dpi}),B=(null===(a=e.activePage)||void 0===a?void 0:a.computedWidth)||e.width;t.useEffect(()=>{P(l({px:B,unit:e.unit,dpi:e.dpi}))},[B,e.unit,e.dpi]);const I=(null===(p=e.activePage)||void 0===p?void 0:p.computedHeight)||e.height;t.useEffect(()=>{j(l({px:I,unit:e.unit,dpi:e.dpi}))},[I,e.unit,e.dpi]);const O=(n,i,t)=>{var a,s,r,p;e.setSize(n,i,t),"auto"!==(null===(a=e.activePage)||void 0===a?void 0:a.width)&&(null===(s=e.activePage)||void 0===s||s.set({width:n})),"auto"!==(null===(r=e.activePage)||void 0===r?void 0:r.height)&&(null===(p=e.activePage)||void 0===p||p.set({height:i}))};return i("div",{style:{height:"100%",overflow:"auto",paddingRight:"3px"},children:[i("div",{style:{paddingBottom:"15px"},children:[i("label",{className:"pn:flex pn:items-center pn:justify-between",style:{marginTop:"8px",marginBottom:"25px"},children:[i("span",{className:"pn:flex pn:items-center pn:gap-1.5",children:[r("sidePanel.useMagicResize")," ",i(f,{children:[n(y,{asChild:!0,children:n("span",{className:"pn:inline-flex",children:n(s,{name:"action.help",className:"pn:size-4"})})}),n(z,{side:"bottom",children:r("sidePanel.magicResizeDescription")})]})]}),n(u,{checked:d,onCheckedChange:e=>{N(Boolean(e))}})]}),i("div",{className:"pn:inline-block pn:w-1/2",children:[r("sidePanel.width")," (",e.unit,")"]}),n("div",{className:"pn:inline-block pn:w-1/2",children:n(w,{value:k,onChange:e=>{e||(e=C),P(e)},min:C,max:1e4,step:"px"===e.unit?1:.1})})]}),i("div",{style:{paddingBottom:"15px"},children:[i("div",{className:"pn:inline-block pn:w-1/2",children:[r("sidePanel.height")," (",e.unit,")"]}),n("div",{className:"pn:inline-block pn:w-1/2",children:n(w,{value:S,onChange:e=>{e||(e=C),j(e)},min:C,max:1e4,step:"px"===e.unit?1:.1})})]}),i("div",{style:{paddingBottom:"15px"},children:[n("div",{className:"pn:inline-block pn:w-1/2",children:r("sidePanel.units")}),n("div",{className:"pn:inline-block pn:w-1/2",children:i(h,{value:e.unit,onValueChange:n=>{const i=n;e.setUnit({unit:i,dpi:e.dpi})},children:[n(g,{className:"pn:w-full",children:n(b,{})}),i(x,{children:[n(v,{value:"px",children:"px"}),n(v,{value:"cm",children:"cm"}),n(v,{value:"in",children:"in"})]})]})})]}),n("div",{style:{paddingBottom:"15px"},children:n(c,{className:"pn:w-full",variant:"default",onClick:()=>{const n=m({unitVal:k,dpi:e.dpi,unit:e.unit}),i=m({unitVal:S,dpi:e.dpi,unit:e.unit});O(n,i,d)},children:r("sidePanel.resize")})}),SIZE_CATEGORIES.map(({name:a,icon:s,sizes:r})=>i(t.Fragment,{children:[i("div",{style:{paddingBottom:"15px",paddingTop:"15px",fontWeight:600,display:"flex",alignItems:"center",gap:6},children:[s,a]}),n("div",{style:{display:"grid",gridTemplateColumns:"repeat(3, minmax(0, 1fr))",gap:"8px",marginBottom:"10px"},children:r.map(([t,a,s,r,p])=>i(c,{className:"pn:flex pn:h-[80px] pn:min-w-0 pn:flex-col pn:items-center pn:justify-center pn:whitespace-normal pn:text-center pn:text-[13px] pn:leading-tight",variant:"ghost",onClick:()=>{const n=m({unitVal:a,dpi:e.dpi,unit:r}),i=m({unitVal:s,dpi:e.dpi,unit:r});e.setUnit({unit:r,dpi:e.dpi}),O(n,i,d)},children:[n("div",{style:{fontSize:"22px",marginBottom:"4px"},children:p}),n("div",{children:t}),i("div",{style:{fontSize:"0.7rem",opacity:.7},children:[a,"×",s," ",r]})]},t))})]},a))]})});
+var e=this&&this.__rest||function(e,n){var i={};for(var t in e){Object.prototype.hasOwnProperty.call(e,t)&&n.indexOf(t)<0&&(i[t]=e[t])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(t=Object.getOwnPropertySymbols(e);a<t.length;a++){n.indexOf(t[a])<0&&Object.prototype.propertyIsEnumerable.call(e,t[a])&&(i[t[a]]=e[t[a]])}}return i};import{jsx as n,jsxs as i}from"react/jsx-runtime";import*as t from"react";import{observer as a}from"mobx-react-lite";import{PolotnoIcon as s}from"../icons/registry.js";import{t as r}from"../utils/l10n.js";import{cn as p}from"../lib/utils.js";import{pxToUnit as o,pxToUnitRounded as l,unitToPx as m}from"../utils/unit.js";import{Button as c}from"../primitives/button.js";import{Input as d}from"../primitives/input.js";import{Switch as u}from"../primitives/switch.js";import{Select as h,SelectContent as x,SelectItem as v,SelectTrigger as g,SelectValue as b}from"../primitives/select.js";import{Tooltip as f,TooltipContent as z,TooltipTrigger as y}from"../primitives/tooltip.js";export const SIZE_CATEGORIES=[{name:"Instagram",icon:n(s,{name:"size.instagram"}),sizes:[["Post",1080,1080,"px",n(s,{name:"size.instagram"})],["Story",1080,1920,"px",n(s,{name:"size.instagram"})],["Ad",1080,1080,"px",n(s,{name:"size.instagram"})]]},{name:"Facebook",icon:n(s,{name:"size.facebook"}),sizes:[["Post (Landscape)",1200,630,"px",n(s,{name:"size.facebook"})],["Post (Square)",1080,1080,"px",n(s,{name:"size.facebook"})],["Cover",851,315,"px",n(s,{name:"size.facebook"})]]},{name:"Youtube",icon:n(s,{name:"size.youtube"}),sizes:[["Thumbnail",1280,720,"px",n(s,{name:"size.youtube"})],["Channel",2560,1440,"px",n(s,{name:"size.youtube"})],["Short",1080,1920,"px",n(s,{name:"size.youtube"})]]},{name:"LinkedIn",icon:n(s,{name:"size.linkedin"}),sizes:[["Post",1200,627,"px",n(s,{name:"size.linkedin"})],["Banner",1584,396,"px",n(s,{name:"size.linkedin"})],["Square",1080,1080,"px",n(s,{name:"size.linkedin"})]]},{name:"Twitter",icon:n(s,{name:"size.twitter"}),sizes:[["Post",1600,900,"px",n(s,{name:"size.twitter"})],["Header",1500,500,"px",n(s,{name:"size.twitter"})],["Square",1080,1080,"px",n(s,{name:"size.twitter"})]]},{name:"Video",icon:n(s,{name:"size.video"}),sizes:[["Full HD",1920,1080,"px",n(s,{name:"size.video"})],["4K UHD",3840,2160,"px",n(s,{name:"size.video"})],["Vertical HD",1080,1920,"px",n(s,{name:"size.video"})],["Square HD",1080,1080,"px",n(s,{name:"size.video"})]]},{name:"Print",icon:n(s,{name:"size.print"}),sizes:[["Invitation",14,14,"cm",n(s,{name:"size.print"})],["A4 Portrait",21,29.7,"cm",n(s,{name:"size.print"})],["A4 Landscape",29.7,21,"cm",n(s,{name:"size.print"})],["A3",29.7,42,"cm",n(s,{name:"size.print"})],["Letter Portrait",8.5,11,"in",n(s,{name:"size.print"})],["Letter Landscape",11,8.5,"in",n(s,{name:"size.print"})],["Business card",3.5,2,"in",n(s,{name:"size.businessCard"})],["Poster",18,24,"in",n(s,{name:"size.print"})]]}];const w=a=>{var{value:r,onChange:o}=a,l=e(a,["value","onChange"]);const[m,c]=t.useState(r.toString()),u=t.useRef(r);u.current=m;const h=()=>{o(Math.max(l.min||0,parseFloat(u.current)))};t.useEffect(()=>{c(String(r))},[r]);const x=Number(l.step)||1,v=e=>{const n=parseFloat(u.current);let i=(Number.isNaN(n)?Number(r)||0:n)+e*x;"number"==typeof l.min&&(i=Math.max(l.min,i)),"number"==typeof l.max&&(i=Math.min(l.max,i)),i=parseFloat(i.toFixed(4)),c(String(i)),o(i)},{className:g}=l,b=e(l,["className"]);return i("div",{className:"pn:relative",children:[n(d,Object.assign({},b,{type:"number",value:m.toString(),className:p("pn:pr-6 pn:[appearance:textfield] pn:[&::-webkit-inner-spin-button]:appearance-none pn:[&::-webkit-outer-spin-button]:appearance-none",g),onChange:e=>{const n=e.target.value;Number.isNaN(parseFloat(n))?""===n&&c(n):c(n)},onBlur:h,onFocus:e=>e.target.select(),onKeyDown:e=>{"Enter"===e.key&&h()}})),i("div",{className:"pn:absolute pn:inset-y-0 pn:right-0 pn:flex pn:w-5 pn:flex-col pn:border-l pn:border-input",children:[n("button",{type:"button",tabIndex:-1,"aria-label":"Increment",className:"pn:flex pn:flex-1 pn:appearance-none pn:cursor-pointer pn:items-center pn:justify-center pn:border-0 pn:bg-transparent pn:text-muted-foreground pn:hover:bg-muted pn:hover:text-foreground",onClick:()=>v(1),children:n(s,{name:"ui.chevronUp",className:"pn:size-3"})}),n("button",{type:"button",tabIndex:-1,"aria-label":"Decrement",className:"pn:flex pn:flex-1 pn:appearance-none pn:cursor-pointer pn:items-center pn:justify-center pn:border-0 pn:border-t pn:border-input pn:bg-transparent pn:text-muted-foreground pn:hover:bg-muted pn:hover:text-foreground",onClick:()=>v(-1),children:n(s,{name:"ui.chevronDown",className:"pn:size-3"})})]})]})};export const SizePanel=a(({store:e})=>{var a,p;const[d,N]=t.useState(!0),[k,P]=t.useState(e.width),[S,j]=t.useState(e.height),C=o({px:10,unit:e.unit,dpi:e.dpi}),B=(null===(a=e.activePage)||void 0===a?void 0:a.computedWidth)||e.width;t.useEffect(()=>{P(l({px:B,unit:e.unit,dpi:e.dpi}))},[B,e.unit,e.dpi]);const I=(null===(p=e.activePage)||void 0===p?void 0:p.computedHeight)||e.height;t.useEffect(()=>{j(l({px:I,unit:e.unit,dpi:e.dpi}))},[I,e.unit,e.dpi]);const O=(n,i,t)=>{var a,s,r,p;e.setSize(n,i,t),"auto"!==(null===(a=e.activePage)||void 0===a?void 0:a.width)&&(null===(s=e.activePage)||void 0===s||s.set({width:n})),"auto"!==(null===(r=e.activePage)||void 0===r?void 0:r.height)&&(null===(p=e.activePage)||void 0===p||p.set({height:i}))};return i("div",{style:{height:"100%",overflow:"auto",paddingRight:"3px"},children:[i("div",{style:{paddingBottom:"15px"},children:[i("label",{className:"pn:flex pn:items-center pn:justify-between",style:{marginTop:"8px",marginBottom:"25px"},children:[i("span",{className:"pn:flex pn:items-center pn:gap-1.5",children:[r("sidePanel.useMagicResize")," ",i(f,{children:[n(y,{render:n("span",{className:"pn:inline-flex",children:n(s,{name:"action.help",className:"pn:size-4"})})}),n(z,{side:"bottom",children:r("sidePanel.magicResizeDescription")})]})]}),n(u,{checked:d,onCheckedChange:e=>{N(Boolean(e))}})]}),i("div",{className:"pn:inline-block pn:w-1/2",children:[r("sidePanel.width")," (",e.unit,")"]}),n("div",{className:"pn:inline-block pn:w-1/2",children:n(w,{value:k,onChange:e=>{e||(e=C),P(e)},min:C,max:1e4,step:"px"===e.unit?1:.1})})]}),i("div",{style:{paddingBottom:"15px"},children:[i("div",{className:"pn:inline-block pn:w-1/2",children:[r("sidePanel.height")," (",e.unit,")"]}),n("div",{className:"pn:inline-block pn:w-1/2",children:n(w,{value:S,onChange:e=>{e||(e=C),j(e)},min:C,max:1e4,step:"px"===e.unit?1:.1})})]}),i("div",{style:{paddingBottom:"15px"},children:[n("div",{className:"pn:inline-block pn:w-1/2",children:r("sidePanel.units")}),n("div",{className:"pn:inline-block pn:w-1/2",children:i(h,{value:e.unit,onValueChange:n=>{const i=n;e.setUnit({unit:i,dpi:e.dpi})},children:[n(g,{className:"pn:w-full",children:n(b,{})}),i(x,{children:[n(v,{value:"px",children:"px"}),n(v,{value:"cm",children:"cm"}),n(v,{value:"in",children:"in"})]})]})})]}),n("div",{style:{paddingBottom:"15px"},children:n(c,{className:"pn:w-full",variant:"default",onClick:()=>{const n=m({unitVal:k,dpi:e.dpi,unit:e.unit}),i=m({unitVal:S,dpi:e.dpi,unit:e.unit});O(n,i,d)},children:r("sidePanel.resize")})}),SIZE_CATEGORIES.map(({name:a,icon:s,sizes:r})=>i(t.Fragment,{children:[i("div",{style:{paddingBottom:"15px",paddingTop:"15px",fontWeight:600,display:"flex",alignItems:"center",gap:6},children:[s,a]}),n("div",{style:{display:"grid",gridTemplateColumns:"repeat(3, minmax(0, 1fr))",gap:"8px",marginBottom:"10px"},children:r.map(([t,a,s,r,p])=>i(c,{className:"pn:flex pn:h-[80px] pn:min-w-0 pn:flex-col pn:items-center pn:justify-center pn:whitespace-normal pn:text-center pn:text-[13px] pn:leading-tight",variant:"ghost",onClick:()=>{const n=m({unitVal:a,dpi:e.dpi,unit:r}),i=m({unitVal:s,dpi:e.dpi,unit:r});e.setUnit({unit:r,dpi:e.dpi}),O(n,i,d)},children:[n("div",{style:{fontSize:"22px",marginBottom:"4px"},children:p}),n("div",{children:t}),i("div",{style:{fontSize:"0.7rem",opacity:.7},children:[a,"×",s," ",r]})]},t))})]},a))]})});

package/toolbar/admin-button.js

@@ -1 +1 @@
-import{jsx as e,jsxs as l}from"react/jsx-runtime";import{observer as t}from"mobx-react-lite";import{Popover as a,PopoverContent as o,PopoverTrigger as r}from"../primitives/popover.js";import{Button as n}from"../primitives/button.js";import{Switch as i}from"../primitives/switch.js";import{FieldRow as s}from"../primitives/field-row.js";import{PolotnoIcon as c}from"../icons/registry.js";import{t as d}from"../utils/l10n.js";export const AdminButton=t(({store:t})=>{const h=t.selectedElements.length>0,b=t.selectedElements[0]||{},p=e=>{t.selectedElements.forEach(l=>{l.set(e)})};return l(a,{children:[e(r,{asChild:!0,children:e(n,{variant:"ghost",size:"icon-sm",disabled:!h,"aria-label":"Admin settings",children:e(c,{name:"action.settings",className:"pn:size-4"})})}),l(o,{align:"start",className:"pn:w-[220px] pn:px-[15px] pn:pt-[25px] pn:pb-[15px]",children:[e(s,{label:d("toolbar.selectable"),children:e(i,{checked:b.selectable,onCheckedChange:e=>{p({selectable:e})}})}),e(s,{label:d("toolbar.draggable"),children:e(i,{checked:b.draggable,onCheckedChange:e=>{p({draggable:e})}})}),e(s,{label:d("toolbar.removable"),children:e(i,{checked:b.removable,onCheckedChange:e=>{p({removable:e})}})}),e(s,{label:d("toolbar.resizable"),children:e(i,{checked:b.resizable,onCheckedChange:e=>{p({resizable:e})}})}),e(s,{label:d("toolbar.contentEditable"),children:e(i,{checked:b.contentEditable,onCheckedChange:e=>{p({contentEditable:e})}})}),e(s,{label:d("toolbar.styleEditable"),children:e(i,{checked:b.styleEditable,onCheckedChange:e=>{p({styleEditable:e})}})}),e(s,{label:d("toolbar.alwaysOnTop"),style:{marginTop:"20px"},children:e(i,{checked:b.alwaysOnTop,onCheckedChange:e=>{p({alwaysOnTop:e})}})}),e(s,{label:d("toolbar.showInExport"),style:{marginTop:"20px"},children:e(i,{checked:b.showInExport,onCheckedChange:e=>{p({showInExport:e})}})})]})]})});
+import{jsx as e,jsxs as l}from"react/jsx-runtime";import{observer as t}from"mobx-react-lite";import{Popover as a,PopoverContent as o,PopoverTrigger as r}from"../primitives/popover.js";import{Button as n}from"../primitives/button.js";import{Switch as s}from"../primitives/switch.js";import{FieldRow as i}from"../primitives/field-row.js";import{Separator as c}from"../primitives/separator.js";import{PolotnoIcon as d}from"../icons/registry.js";import{t as h}from"../utils/l10n.js";export const AdminButton=t(({store:t})=>{const p=t.selectedElements.length>0,b=t.selectedElements[0]||{},m=e=>{t.selectedElements.forEach(l=>{l.set(e)})};return l(a,{children:[e(r,{render:e(n,{variant:"ghost",size:"icon-sm",disabled:!p,"aria-label":"Admin settings",children:e(d,{name:"action.settings",className:"pn:size-4"})})}),l(o,{align:"start",className:"pn:flex pn:flex-col pn:gap-3 pn:w-[220px] pn:px-[15px] pn:pt-[25px] pn:pb-[15px]",children:[e(i,{label:h("toolbar.selectable"),children:e(s,{checked:b.selectable,onCheckedChange:e=>{m({selectable:e})}})}),e(i,{label:h("toolbar.draggable"),children:e(s,{checked:b.draggable,onCheckedChange:e=>{m({draggable:e})}})}),e(i,{label:h("toolbar.removable"),children:e(s,{checked:b.removable,onCheckedChange:e=>{m({removable:e})}})}),e(i,{label:h("toolbar.resizable"),children:e(s,{checked:b.resizable,onCheckedChange:e=>{m({resizable:e})}})}),e(i,{label:h("toolbar.contentEditable"),children:e(s,{checked:b.contentEditable,onCheckedChange:e=>{m({contentEditable:e})}})}),e(i,{label:h("toolbar.styleEditable"),children:e(s,{checked:b.styleEditable,onCheckedChange:e=>{m({styleEditable:e})}})}),e(c,{className:"pn:my-1"}),e(i,{label:h("toolbar.alwaysOnTop"),children:e(s,{checked:b.alwaysOnTop,onCheckedChange:e=>{m({alwaysOnTop:e})}})}),e(i,{label:h("toolbar.showInExport"),children:e(s,{checked:b.showInExport,onCheckedChange:e=>{m({showInExport:e})}})})]})]})});

package/toolbar/animations-picker.js

@@ -1 +1 @@
-import{jsx as e,jsxs as n}from"react/jsx-runtime";import{observer as t}from"mobx-react-lite";import{PolotnoIcon as i}from"../icons/registry.js";import{t as a}from"../utils/l10n.js";import{Button as o}from"../primitives/button.js";import{ButtonGroup as l}from"../primitives/button-group.js";import{NumberInput as r}from"../primitives/numeric-input.js";export{NumberInput}from"../primitives/numeric-input.js";import{Slider as s}from"../primitives/slider.js";import{Switch as m}from"../primitives/switch.js";import{Popover as d,PopoverContent as p,PopoverTrigger as c}from"../primitives/popover.js";import{Select as h,SelectContent as u,SelectItem as g,SelectTrigger as b,SelectValue as f}from"../primitives/select.js";import{cn as v}from"../lib/utils.js";const x=({checked:t,label:i,onChange:a})=>n("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",marginTop:"8px"},children:[e("label",{className:"pn:text-xs",children:i}),e(m,{checked:t,onCheckedChange:a})]}),y=t(({element:t,store:i,enabled:a})=>{const r=t.animations.find(e=>"enter"===e.type),s=t.animations.find(e=>"exit"===e.type);return a?n(l,{fill:!0,children:[e(o,{variant:"outline",size:"sm",className:v("pn:flex-1",(null==r?void 0:r.enabled)&&!(null==s?void 0:s.enabled)&&"pn:bg-accent pn:text-accent-foreground"),onClick:()=>{i.history.transaction(()=>{t.setAnimation("enter",{enabled:!0}),t.setAnimation("exit",{enabled:!1})})},children:"Enter"}),e(o,{variant:"outline",size:"sm",className:v("pn:flex-1",(null==r?void 0:r.enabled)&&(null==s?void 0:s.enabled)&&"pn:bg-accent pn:text-accent-foreground"),onClick:()=>{i.history.transaction(()=>{t.setAnimation("enter",{enabled:!0}),t.setAnimation("exit",{enabled:!0})})},children:"Both"}),e(o,{variant:"outline",size:"sm",className:v("pn:flex-1",(null==s?void 0:s.enabled)&&!(null==r?void 0:r.enabled)&&"pn:bg-accent pn:text-accent-foreground"),onClick:()=>{i.history.transaction(()=>{t.setAnimation("enter",{enabled:!1}),t.setAnimation("exit",{enabled:!0})})},children:"Exit"})]}):null}),C=["right","left","up","down","bottom-right","bottom-left","top-right","top-left"],j={right:e(i,{name:"animation.directionRight",className:"pn:size-4"}),left:e(i,{name:"animation.directionLeft",className:"pn:size-4"}),up:e(i,{name:"animation.directionUp",className:"pn:size-4"}),down:e(i,{name:"animation.directionDown",className:"pn:size-4"}),"bottom-right":e(i,{name:"animation.directionBottomRight",className:"pn:size-4"}),"bottom-left":e(i,{name:"animation.directionBottomLeft",className:"pn:size-4"}),"top-right":e(i,{name:"animation.directionTopRight",className:"pn:size-4"}),"top-left":e(i,{name:"animation.directionTopLeft",className:"pn:size-4"})},A=t(({value:t,onChange:i})=>e("div",{style:{paddingTop:"10px"},children:n(h,{value:t,onValueChange:i,children:[e(b,{className:"pn:w-full",children:e(f,{children:n("span",{className:"pn:flex pn:items-center pn:gap-2",children:[j[t],t]})})}),e(u,{children:C.map(t=>e(g,{value:t,children:n("span",{className:"pn:flex pn:items-center pn:gap-2",children:[j[t],t]})},t))})]})})),z=t(({element:t})=>{const i=t.animations.find(e=>"enter"===e.type);return i?n("div",{style:{padding:"10px"},children:[n("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"},children:[e("div",{children:"Delay"}),e("div",{children:e(r,{value:parseFloat((i.delay/1e3).toFixed(2)),onValueChange:e=>{t.setAnimation("enter",{delay:1e3*e})},style:{width:"50px"},step:.01,min:0,max:2.5})})]}),e(s,{min:0,max:1e3,step:1,value:[i.delay],onValueChange:([e])=>{t.setAnimation("enter",{delay:e})}})]}):null}),N=t(({element:t})=>{const i=t.animations.find(e=>"enter"===e.type);return i?n("div",{style:{padding:"10px"},children:[n("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"},children:[e("div",{children:"Duration"}),e("div",{children:e(r,{value:parseFloat((i.duration/1e3).toFixed(2)),onValueChange:e=>{t.setAnimation("enter",{duration:1e3*e}),t.setAnimation("exit",{duration:1e3*e})},style:{width:"50px"},step:.01,min:0,max:2.5})})]}),e(s,{min:0,max:2500,step:1,value:[i.duration],onValueChange:([e])=>{t.setAnimation("enter",{duration:e}),t.setAnimation("exit",{duration:e})}})]}):null});export const AnimationsPickerOld=t(({element:t,store:i,elements:l})=>{var r,s;const m=l||[t],h=m[0],u=(e,n)=>{i.history.transaction(()=>{m.forEach(t=>{t.setAnimation("enter",Object.assign({name:e},n)),t.setAnimation("exit",Object.assign(Object.assign({name:e},n),{from:n.to,to:n.from}))})}),n.enabled&&(i.play({animatedElementsIds:m.map(e=>e.id),currentTime:h.page.startTime}),setTimeout(()=>{i.stop()},1e3))},g=(e,n)=>{var t;return!!((e?null===(t=h.animations)||void 0===t?void 0:t.filter(n=>n.name===e):h.animations)||[]).find(e=>e.enabled)};return n(d,{children:[e(c,{asChild:!0,children:e(o,{variant:"ghost",size:"sm",children:a("toolbar.animate")})}),n(p,{align:"start",onOpenAutoFocus:e=>e.preventDefault(),style:{padding:"15px",paddingTop:"25px",width:"230px"},children:[e(x,{checked:g("fade"),label:a("toolbar.fade"),onChange:e=>{u("fade",{enabled:e})}}),e(x,{checked:g("move"),label:a("toolbar.move"),onChange:e=>{u("move",{enabled:e})}}),e(x,{checked:g("zoom"),label:a("toolbar.zoom"),onChange:e=>{u("zoom",{enabled:e})}}),e(y,{element:h,store:i,enabled:g()}),g("move")&&e(A,{value:(null===(s=null===(r=h.animations.find(e=>"move"===e.name))||void 0===r?void 0:r.data)||void 0===s?void 0:s.direction)||"right",onChange:e=>{u("move",{data:{direction:e},enabled:!0})}}),g()&&e(z,{store:i,element:h}),g()&&e(N,{store:i,element:h}),e(x,{checked:g("rotate"),label:a("toolbar.rotate"),onChange:e=>{var n;n={enabled:e},i.history.transaction(()=>{m.forEach(e=>{e.setAnimation("loop",Object.assign({name:"rotate"},n))})}),n.enabled&&(i.play({animatedElementsIds:m.map(e=>e.id),currentTime:h.page.startTime}),setTimeout(()=>{i.stop()},1e3))}})]})]})});export const AnimationsPicker=t(({element:n,store:t})=>n.contentEditable?e(o,{variant:"ghost",size:"sm",onClickCapture:e=>{e.stopPropagation(),t.openSidePanel("animation")},children:a("toolbar.animate")}):null);export default AnimationsPicker;
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import{observer as t}from"mobx-react-lite";import{PolotnoIcon as i}from"../icons/registry.js";import{t as a}from"../utils/l10n.js";import{Button as o}from"../primitives/button.js";import{ButtonGroup as l}from"../primitives/button-group.js";import{NumberInput as r}from"../primitives/numeric-input.js";export{NumberInput}from"../primitives/numeric-input.js";import{Slider as s}from"../primitives/slider.js";import{Switch as m}from"../primitives/switch.js";import{Popover as d,PopoverContent as p,PopoverTrigger as c}from"../primitives/popover.js";import{Select as h,SelectContent as u,SelectItem as g,SelectTrigger as b,SelectValue as f}from"../primitives/select.js";import{cn as v,firstSliderValue as x}from"../lib/utils.js";const y=({checked:t,label:i,onChange:a})=>n("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",marginTop:"8px"},children:[e("label",{className:"pn:text-xs",children:i}),e(m,{checked:t,onCheckedChange:a})]}),C=t(({element:t,store:i,enabled:a})=>{const r=t.animations.find(e=>"enter"===e.type),s=t.animations.find(e=>"exit"===e.type);return a?n(l,{fill:!0,children:[e(o,{variant:"outline",size:"sm",className:v("pn:flex-1",(null==r?void 0:r.enabled)&&!(null==s?void 0:s.enabled)&&"pn:bg-accent pn:text-accent-foreground"),onClick:()=>{i.history.transaction(()=>{t.setAnimation("enter",{enabled:!0}),t.setAnimation("exit",{enabled:!1})})},children:"Enter"}),e(o,{variant:"outline",size:"sm",className:v("pn:flex-1",(null==r?void 0:r.enabled)&&(null==s?void 0:s.enabled)&&"pn:bg-accent pn:text-accent-foreground"),onClick:()=>{i.history.transaction(()=>{t.setAnimation("enter",{enabled:!0}),t.setAnimation("exit",{enabled:!0})})},children:"Both"}),e(o,{variant:"outline",size:"sm",className:v("pn:flex-1",(null==s?void 0:s.enabled)&&!(null==r?void 0:r.enabled)&&"pn:bg-accent pn:text-accent-foreground"),onClick:()=>{i.history.transaction(()=>{t.setAnimation("enter",{enabled:!1}),t.setAnimation("exit",{enabled:!0})})},children:"Exit"})]}):null}),j=["right","left","up","down","bottom-right","bottom-left","top-right","top-left"],A={right:e(i,{name:"animation.directionRight",className:"pn:size-4"}),left:e(i,{name:"animation.directionLeft",className:"pn:size-4"}),up:e(i,{name:"animation.directionUp",className:"pn:size-4"}),down:e(i,{name:"animation.directionDown",className:"pn:size-4"}),"bottom-right":e(i,{name:"animation.directionBottomRight",className:"pn:size-4"}),"bottom-left":e(i,{name:"animation.directionBottomLeft",className:"pn:size-4"}),"top-right":e(i,{name:"animation.directionTopRight",className:"pn:size-4"}),"top-left":e(i,{name:"animation.directionTopLeft",className:"pn:size-4"})},z=t(({value:t,onChange:i})=>e("div",{style:{paddingTop:"10px"},children:n(h,{value:t,onValueChange:e=>{null!==e&&i(e)},children:[e(b,{className:"pn:w-full",children:e(f,{children:n("span",{className:"pn:flex pn:items-center pn:gap-2",children:[A[t],t]})})}),e(u,{children:j.map(t=>e(g,{value:t,children:n("span",{className:"pn:flex pn:items-center pn:gap-2",children:[A[t],t]})},t))})]})})),N=t(({element:t})=>{const i=t.animations.find(e=>"enter"===e.type);return i?n("div",{style:{padding:"10px"},children:[n("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"},children:[e("div",{children:"Delay"}),e("div",{children:e(r,{value:parseFloat((i.delay/1e3).toFixed(2)),onValueChange:e=>{t.setAnimation("enter",{delay:1e3*e})},style:{width:"50px"},step:.01,min:0,max:2.5})})]}),e(s,{min:0,max:1e3,step:1,value:[i.delay],onValueChange:e=>{const n=x(e);t.setAnimation("enter",{delay:n})}})]}):null}),k=t(({element:t})=>{const i=t.animations.find(e=>"enter"===e.type);return i?n("div",{style:{padding:"10px"},children:[n("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"},children:[e("div",{children:"Duration"}),e("div",{children:e(r,{value:parseFloat((i.duration/1e3).toFixed(2)),onValueChange:e=>{t.setAnimation("enter",{duration:1e3*e}),t.setAnimation("exit",{duration:1e3*e})},style:{width:"50px"},step:.01,min:0,max:2.5})})]}),e(s,{min:0,max:2500,step:1,value:[i.duration],onValueChange:e=>{const n=x(e);t.setAnimation("enter",{duration:n}),t.setAnimation("exit",{duration:n})}})]}):null});export const AnimationsPickerOld=t(({element:t,store:i,elements:l})=>{var r,s;const m=l||[t],h=m[0],u=(e,n)=>{i.history.transaction(()=>{m.forEach(t=>{t.setAnimation("enter",Object.assign({name:e},n)),t.setAnimation("exit",Object.assign(Object.assign({name:e},n),{from:n.to,to:n.from}))})}),n.enabled&&(i.play({animatedElementsIds:m.map(e=>e.id),currentTime:h.page.startTime}),setTimeout(()=>{i.stop()},1e3))},g=(e,n)=>{var t;return!!((e?null===(t=h.animations)||void 0===t?void 0:t.filter(n=>n.name===e):h.animations)||[]).find(e=>e.enabled)};return n(d,{children:[e(c,{render:e(o,{variant:"ghost",size:"sm",children:a("toolbar.animate")})}),n(p,{align:"start",initialFocus:!1,style:{padding:"15px",paddingTop:"25px",width:"230px"},children:[e(y,{checked:g("fade"),label:a("toolbar.fade"),onChange:e=>{u("fade",{enabled:e})}}),e(y,{checked:g("move"),label:a("toolbar.move"),onChange:e=>{u("move",{enabled:e})}}),e(y,{checked:g("zoom"),label:a("toolbar.zoom"),onChange:e=>{u("zoom",{enabled:e})}}),e(C,{element:h,store:i,enabled:g()}),g("move")&&e(z,{value:(null===(s=null===(r=h.animations.find(e=>"move"===e.name))||void 0===r?void 0:r.data)||void 0===s?void 0:s.direction)||"right",onChange:e=>{u("move",{data:{direction:e},enabled:!0})}}),g()&&e(N,{store:i,element:h}),g()&&e(k,{store:i,element:h}),e(y,{checked:g("rotate"),label:a("toolbar.rotate"),onChange:e=>{var n;n={enabled:e},i.history.transaction(()=>{m.forEach(e=>{e.setAnimation("loop",Object.assign({name:"rotate"},n))})}),n.enabled&&(i.play({animatedElementsIds:m.map(e=>e.id),currentTime:h.page.startTime}),setTimeout(()=>{i.stop()},1e3))}})]})]})});export const AnimationsPicker=t(({element:n,store:t})=>n.contentEditable?e(o,{variant:"ghost",size:"sm",onClickCapture:e=>{e.stopPropagation(),t.openSidePanel("animation")},children:a("toolbar.animate")}):null);export default AnimationsPicker;

package/toolbar/color-picker.js

@@ -1 +1 @@
-var e=this&&this.__rest||function(e,r){var t={};for(var n in e){Object.prototype.hasOwnProperty.call(e,n)&&r.indexOf(n)<0&&(t[n]=e[n])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++){r.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(t[n[o]]=e[n[o]])}}return t};import{jsx as r,jsxs as t}from"react/jsx-runtime";import n from"react";import{observer as o}from"mobx-react-lite";import{t as s}from"../utils/l10n.js";import{parseColor as l,isGradient as i}from"../utils/gradient.js";import{sameColors as a}from"../utils/svg.js";import c from"./sketch.js";import{cn as d}from"../lib/utils.js";import{SliderField as u}from"../primitives/slider-field.js";import{Popover as p,PopoverContent as g,PopoverTrigger as f}from"../primitives/popover.js";import{Tabs as h,TabsContent as m,TabsList as v,TabsTrigger as x}from"../primitives/tabs.js";export const DEFAULT_COLORS=["#D0021B","#F5A623","#F8E71C","#8B572A","#7ED321","#417505","#BD10E0","#9013FE","#4A90E2","#50E3C2","#B8E986","#000000","#4A4A4A","#9B9B9B","#FFFFFF"].reverse();export const getUsedColors=e=>{const r=[];e.pages.forEach(e=>{e.children.forEach(e=>{e.shadowEnabled&&r.push(e.shadowColor),"text"===e.type&&(r.push(e.fill),e.backgroundEnabled&&r.push(e.backgroundColor),e.strokeWidth&&r.push(e.stroke)),"svg"===e.type&&r.push(...e.colorsReplace.values()),"figure"===e.type&&(r.push(e.fill),e.strokeWidth&&r.push(e.stroke)),"line"===e.type&&r.push(e.color)})});const t=[];return r.forEach(e=>{if(i(e)){const{stops:r}=l(e);t.push(...r.map(e=>e.color))}else{t.push(e)}}),[...new Set(t)]};const b=t=>{var{style:o,color:s,onChange:l}=t,i=e(t,["style","color","onChange"]);const[a,d]=n.useState(s);n.useEffect(()=>{d(s)},[s]);const u=n.useRef(),p=n.useRef();return r("div",{className:"pn-color-picker-solid",style:o,onMouseDown:e=>{"INPUT"!==e.target.tagName&&e.preventDefault()},children:r(c,Object.assign({color:a},i,{onChange:e=>{const{r,g:t,b:n,a:o}=e.rgb,s=`rgba(${r},${t},${n},${o})`;d(s),p.current=s,u.current||(u.current=window.setTimeout(()=>{u.current=0,l(p.current||s)},50))}}))})},w=e=>e.map(e=>`${e.color} ${100*e.offset}%`).join(","),C=({value:e,onChange:o,preset:i})=>{const{rotation:a,stops:c}=l(e),d=n.useRef(c);d.current=c;const p=n.useRef(a);p.current=a;const[g,f]=n.useState(0),[h,m]=n.useState(-1),v=n.useRef(null),x=n.useRef(!1),C=e=>{x.current=!0};return n.useEffect(()=>{h>-1&&(d.current.splice(h,1),o(`linear-gradient(${p.current}deg, ${w(d.current)})`),m(-1))},[h]),n.useEffect(()=>{var e;null===(e=v.current)||void 0===e||e.focus()},[]),n.useEffect(()=>{const e=e=>{if(x.current){const r=v.current.getBoundingClientRect(),t=e.clientX-r.left,n=t/r.width,s=n<-.5||n>1.5;if(c.length>2&&s){return f(0),x.current=!1,void m(g)}const l=Math.min(1,Math.max(0,t/r.width)),i=[...d.current];i[g].offset=l,o(`linear-gradient(${p.current}deg, ${w(i)})`)}},r=()=>{x.current=!1};return window.addEventListener("mousemove",e),window.addEventListener("mouseup",r),()=>{window.removeEventListener("mousemove",e),window.removeEventListener("mouseup",r)}},[g,d]),t("div",{children:[t("div",{style:{width:"calc(100% - 35px)",height:"60px",position:"relative"},children:[r("div",{ref:v,tabIndex:0,style:{position:"absolute",top:0,left:0,width:"100%",marginLeft:"15px",height:"100%",zIndex:0,outline:"none"},onKeyDownCapture:e=>{if("Backspace"===e.key){if(e.preventDefault(),e.stopPropagation(),d.current.length<=2){return}d.current.splice(g,1),g>=d.current.length&&f(d.current.length-1),o(`linear-gradient(${p.current}deg, ${w(d.current)})`)}},onMouseDown:e=>{const r=e.currentTarget.getBoundingClientRect(),t=e.clientX-r.left,n=Math.min(1,Math.max(0,t/r.width)),s=c[0].color;c.push({color:s,offset:n}),c.sort((e,r)=>e.offset-r.offset);const l=c.findIndex(e=>e.offset===n);f(l),C(),o(`linear-gradient(${a}deg, ${w(c)})`)}}),c.map(({offset:e,color:t},n)=>r("div",{style:{position:"absolute",top:"10px",left:100*e+"%",border:n===g?"2px solid rgb(0, 161, 255)":"2px solid rgb(0, 0, 0, 0)",padding:"2px"},onMouseDown:e=>{e.stopPropagation(),f(n),C()},children:r(ColoredBox,{background:t,style:{margin:0}})},n))]}),r("div",{style:{width:"calc(100% - 30px)",height:"10px",marginLeft:"15px",background:`linear-gradient(90deg,${w(c)})`}}),r("div",{style:{padding:"10px"},children:r(u,{label:s("toolbar.colorPicker.angle"),value:a,min:0,max:360,onChange:e=>{o(`linear-gradient(${e}deg,${w(c)})`)}})}),r(b,{color:c[g].color,presetColors:i,onChange:e=>{const r=[...c];r[g].color=e,o(`linear-gradient(${a}deg, ${w(r)})`)}})]})},y=o(({value:e,onChange:o,preset:l,store:a})=>{const[c,d]=n.useState(i(e)?"gradient":"solid");return r("div",{style:{padding:"5px"},children:t(h,{value:c,onValueChange:e=>d(e),className:"pn:w-full",children:[t(v,{className:"pn:flex pn:w-full pn:flex-row",children:[r(x,{value:"solid",className:"pn:flex-1",children:s("toolbar.colorPicker.solid")}),r(x,{value:"gradient",className:"pn:flex-1",children:s("toolbar.colorPicker.linear")})]}),r(m,{value:"solid",className:"pn:w-full",children:r(b,{color:e,onChange:o,presetColors:l,style:{padding:"0"}})}),r(m,{value:"gradient",className:"ember-panel pn:w-full",children:r(C,{value:e,onChange:o,store:a,preset:l})})]})})});export const ColoredBox=n.forwardRef(function(t,n){var{size:o=30,background:s,style:l={},className:i,children:a=null}=t,c=e(t,["size","background","style","className","children"]);const u="string"==typeof s?s:"transparent",p=u.includes("gradient")?u:`linear-gradient(${u}, ${u}), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 8 8'%3E%3Cg fill='rgba(112, 112, 116, 1)' fill-opacity='1'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E")`;return r("div",Object.assign({ref:n,role:"button",tabIndex:0,"aria-label":"Pick color",onMouseDown:e=>e.preventDefault(),className:d("pn:flex pn:cursor-pointer pn:items-center pn:justify-center pn:overflow-hidden pn:rounded-md pn:border pn:border-foreground/30",i),style:Object.assign({width:o+"px",height:o+"px",backgroundImage:p},l)},c,{children:a}))});let E=e=>{const r=getUsedColors(e).slice(0,8).filter(e=>!DEFAULT_COLORS.find(r=>a(r,e)));return r.concat(DEFAULT_COLORS.slice(0,16-r.length).reverse())};export function setColorsPresetFunc(e){E=e}export const ColorPicker=({value:e,onChange:o,size:s,store:l,gradientEnabled:i,children:a,style:c,onOpen:d,onClose:u})=>{const h=E(l),[m,v]=n.useState(!1);return t(p,{open:m,onOpenChange:e=>{v(e),e?null==d||d():null==u||u()},children:[r(f,{asChild:!0,children:r(ColoredBox,{size:s,background:e,style:c,children:a})}),r(g,{className:"pn:w-[280px] pn:p-0",onOpenAutoFocus:e=>e.preventDefault(),children:i?r(y,{preset:h,value:e,onChange:o,store:l}):r("div",{style:{padding:"5px"},children:r(b,{color:e,onChange:o,presetColors:h})})})]})};export default ColorPicker;
+var e=this&&this.__rest||function(e,r){var t={};for(var n in e){Object.prototype.hasOwnProperty.call(e,n)&&r.indexOf(n)<0&&(t[n]=e[n])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++){r.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(t[n[o]]=e[n[o]])}}return t};import{jsx as r,jsxs as t}from"react/jsx-runtime";import n from"react";import{observer as o}from"mobx-react-lite";import{t as s}from"../utils/l10n.js";import{parseColor as l,isGradient as i}from"../utils/gradient.js";import{sameColors as a}from"../utils/svg.js";import c from"./sketch.js";import{cn as d}from"../lib/utils.js";import{SliderField as u}from"../primitives/slider-field.js";import{Popover as p,PopoverContent as g,PopoverTrigger as f}from"../primitives/popover.js";import{Tabs as h,TabsContent as m,TabsList as v,TabsTrigger as x}from"../primitives/tabs.js";export const DEFAULT_COLORS=["#D0021B","#F5A623","#F8E71C","#8B572A","#7ED321","#417505","#BD10E0","#9013FE","#4A90E2","#50E3C2","#B8E986","#000000","#4A4A4A","#9B9B9B","#FFFFFF"].reverse();export const getUsedColors=e=>{const r=[];e.pages.forEach(e=>{e.children.forEach(e=>{e.shadowEnabled&&r.push(e.shadowColor),"text"===e.type&&(r.push(e.fill),e.backgroundEnabled&&r.push(e.backgroundColor),e.strokeWidth&&r.push(e.stroke)),"svg"===e.type&&r.push(...e.colorsReplace.values()),"figure"===e.type&&(r.push(e.fill),e.strokeWidth&&r.push(e.stroke)),"line"===e.type&&r.push(e.color)})});const t=[];return r.forEach(e=>{if(i(e)){const{stops:r}=l(e);t.push(...r.map(e=>e.color))}else{t.push(e)}}),[...new Set(t)]};const b=t=>{var{style:o,color:s,onChange:l}=t,i=e(t,["style","color","onChange"]);const[a,d]=n.useState(s);n.useEffect(()=>{d(s)},[s]);const u=n.useRef(void 0),p=n.useRef(void 0);return r("div",{className:"pn-color-picker-solid",style:o,onMouseDown:e=>{"INPUT"!==e.target.tagName&&e.preventDefault()},children:r(c,Object.assign({color:a},i,{onChange:e=>{const{r,g:t,b:n,a:o}=e.rgb,s=`rgba(${r},${t},${n},${o})`;d(s),p.current=s,u.current||(u.current=window.setTimeout(()=>{u.current=0,l(p.current||s)},50))}}))})},w=e=>e.map(e=>`${e.color} ${100*e.offset}%`).join(","),C=({value:e,onChange:o,preset:i})=>{const{rotation:a,stops:c}=l(e),d=n.useRef(c);d.current=c;const p=n.useRef(a);p.current=a;const[g,f]=n.useState(0),[h,m]=n.useState(-1),v=n.useRef(null),x=n.useRef(!1),C=e=>{x.current=!0};return n.useEffect(()=>{h>-1&&(d.current.splice(h,1),o(`linear-gradient(${p.current}deg, ${w(d.current)})`),m(-1))},[h]),n.useEffect(()=>{var e;null===(e=v.current)||void 0===e||e.focus()},[]),n.useEffect(()=>{const e=e=>{if(x.current){const r=v.current.getBoundingClientRect(),t=e.clientX-r.left,n=t/r.width,s=n<-.5||n>1.5;if(c.length>2&&s){return f(0),x.current=!1,void m(g)}const l=Math.min(1,Math.max(0,t/r.width)),i=[...d.current];i[g].offset=l,o(`linear-gradient(${p.current}deg, ${w(i)})`)}},r=()=>{x.current=!1};return window.addEventListener("mousemove",e),window.addEventListener("mouseup",r),()=>{window.removeEventListener("mousemove",e),window.removeEventListener("mouseup",r)}},[g,d]),t("div",{children:[t("div",{style:{width:"calc(100% - 35px)",height:"60px",position:"relative"},children:[r("div",{ref:v,tabIndex:0,style:{position:"absolute",top:0,left:0,width:"100%",marginLeft:"15px",height:"100%",zIndex:0,outline:"none"},onKeyDownCapture:e=>{if("Backspace"===e.key){if(e.preventDefault(),e.stopPropagation(),d.current.length<=2){return}d.current.splice(g,1),g>=d.current.length&&f(d.current.length-1),o(`linear-gradient(${p.current}deg, ${w(d.current)})`)}},onMouseDown:e=>{const r=e.currentTarget.getBoundingClientRect(),t=e.clientX-r.left,n=Math.min(1,Math.max(0,t/r.width)),s=c[0].color;c.push({color:s,offset:n}),c.sort((e,r)=>e.offset-r.offset);const l=c.findIndex(e=>e.offset===n);f(l),C(),o(`linear-gradient(${a}deg, ${w(c)})`)}}),c.map(({offset:e,color:t},n)=>r("div",{style:{position:"absolute",top:"10px",left:100*e+"%",border:n===g?"2px solid rgb(0, 161, 255)":"2px solid rgb(0, 0, 0, 0)",padding:"2px"},onMouseDown:e=>{e.stopPropagation(),f(n),C()},children:r(ColoredBox,{background:t,style:{margin:0}})},n))]}),r("div",{style:{width:"calc(100% - 30px)",height:"10px",marginLeft:"15px",background:`linear-gradient(90deg,${w(c)})`}}),r("div",{style:{padding:"10px"},children:r(u,{label:s("toolbar.colorPicker.angle"),value:a,min:0,max:360,onChange:e=>{o(`linear-gradient(${e}deg,${w(c)})`)}})}),r(b,{color:c[g].color,presetColors:i,onChange:e=>{const r=[...c];r[g].color=e,o(`linear-gradient(${a}deg, ${w(r)})`)}})]})},y=o(({value:e,onChange:o,preset:l,store:a})=>{const[c,d]=n.useState(i(e)?"gradient":"solid");return r("div",{style:{padding:"5px"},children:t(h,{value:c,onValueChange:e=>d(e),className:"pn:w-full",children:[t(v,{className:"pn:flex pn:w-full pn:flex-row",children:[r(x,{value:"solid",className:"pn:flex-1",children:s("toolbar.colorPicker.solid")}),r(x,{value:"gradient",className:"pn:flex-1",children:s("toolbar.colorPicker.linear")})]}),r(m,{value:"solid",className:"pn:w-full",children:r(b,{color:e,onChange:o,presetColors:l,style:{padding:"0"}})}),r(m,{value:"gradient",className:"ember-panel pn:w-full",children:r(C,{value:e,onChange:o,store:a,preset:l})})]})})});export const ColoredBox=n.forwardRef(function(t,n){var{size:o=30,background:s,style:l={},className:i,children:a=null}=t,c=e(t,["size","background","style","className","children"]);const u="string"==typeof s?s:"transparent",p=u.includes("gradient")?u:`linear-gradient(${u}, ${u}), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 8 8'%3E%3Cg fill='rgba(112, 112, 116, 1)' fill-opacity='1'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E")`;return r("div",Object.assign({ref:n,role:"button",tabIndex:0,"aria-label":"Pick color",onMouseDown:e=>e.preventDefault(),className:d("pn:flex pn:cursor-pointer pn:items-center pn:justify-center pn:overflow-hidden pn:rounded-md pn:border pn:border-foreground/30",i),style:Object.assign({width:o+"px",height:o+"px",backgroundImage:p},l)},c,{children:a}))});let E=e=>{const r=getUsedColors(e).slice(0,8).filter(e=>!DEFAULT_COLORS.find(r=>a(r,e)));return r.concat(DEFAULT_COLORS.slice(0,16-r.length).reverse())};export function setColorsPresetFunc(e){E=e}export const ColorPicker=({value:e,onChange:o,size:s,store:l,gradientEnabled:i,children:a,style:c,onOpen:d,onClose:u})=>{const h=E(l),[m,v]=n.useState(!1);return t(p,{open:m,onOpenChange:e=>{v(e),e?null==d||d():null==u||u()},children:[r(f,{nativeButton:!1,render:r(ColoredBox,{size:s,background:e,style:c,children:a})}),r(g,{className:"pn:w-[280px] pn:p-0",initialFocus:!1,children:i?r(y,{preset:h,value:e,onChange:o,store:l}):r("div",{style:{padding:"5px"},children:r(b,{color:e,onChange:o,presetColors:h})})})]})};export default ColorPicker;

package/toolbar/copy-style.js

@@ -1 +1 @@
-import{jsx as t,jsxs as r}from"react/jsx-runtime";import{observer as e}from"mobx-react-lite";import{Button as o}from"../primitives/button.js";import{Tooltip as i,TooltipContent as s,TooltipTrigger as n}from"../primitives/tooltip.js";import{cn as l}from"../lib/utils.js";import{t as p}from"../utils/l10n.js";import{useCopyStyle as m}from"./use-copy-style.js";export const CopyStyleButton=e(({store:e})=>{const{disabled:a,elementToCopy:h,setElementToCopy:c}=m(e),d=t(o,{variant:"ghost",size:"icon-sm",className:l(h&&"pn:bg-primary pn:text-primary-foreground pn:hover:bg-primary/90 pn:hover:text-primary-foreground"),disabled:a,onClick:()=>{c(e.selectedElements[0])},"aria-label":p("toolbar.copyStyle"),children:PAINT_ICON});return a?d:r(i,{children:[t(n,{asChild:!0,children:d}),t(s,{children:p("toolbar.copyStyle")})]})});export const PAINT_ICON=r("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round",strokeLinejoin:"round",className:"pn:size-4",children:[t("rect",{width:"16",height:"6",x:"2",y:"2",rx:"2"}),t("path",{d:"M10 16v-2a2 2 0 0 1 2-2h8a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2"}),t("rect",{width:"4",height:"6",x:"8",y:"16",rx:"1"})]});
+import{jsx as r,jsxs as t}from"react/jsx-runtime";import{observer as e}from"mobx-react-lite";import{Button as o}from"../primitives/button.js";import{Tooltip as i,TooltipContent as s,TooltipTrigger as n}from"../primitives/tooltip.js";import{cn as l}from"../lib/utils.js";import{t as p}from"../utils/l10n.js";import{useCopyStyle as m}from"./use-copy-style.js";export const CopyStyleButton=e(({store:e})=>{const{disabled:a,elementToCopy:c,setElementToCopy:h}=m(e),d=r(o,{variant:"ghost",size:"icon-sm",className:l(c&&"pn:bg-primary pn:text-primary-foreground pn:hover:bg-primary/90 pn:hover:text-primary-foreground"),disabled:a,onClick:()=>{h(e.selectedElements[0])},"aria-label":p("toolbar.copyStyle"),children:PAINT_ICON});return a?d:t(i,{children:[r(n,{render:d}),r(s,{children:p("toolbar.copyStyle")})]})});export const PAINT_ICON=t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round",strokeLinejoin:"round",className:"pn:size-4",children:[r("rect",{width:"16",height:"6",x:"2",y:"2",rx:"2"}),r("path",{d:"M10 16v-2a2 2 0 0 1 2-2h8a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2"}),r("rect",{width:"4",height:"6",x:"8",y:"16",rx:"1"})]});

package/toolbar/download-button.js

@@ -1 +1 @@
-import{jsx as o,jsxs as e}from"react/jsx-runtime";import*as s from"react";import{observer as t}from"mobx-react-lite";import{PolotnoIcon as a}from"../icons/registry.js";import{Button as r}from"../primitives/button.js";import{Spinner as i}from"../primitives/spinner.js";import{DropdownMenu as n,DropdownMenuContent as l,DropdownMenuItem as m,DropdownMenuTrigger as d}from"../primitives/dropdown-menu.js";import{t as p}from"../utils/l10n.js";import{downloadFile as c}from"../utils/download.js";import{getAPI as f}from"../utils/api.js";import{getKey as u}from"../utils/validate-key.js";import{flags as h}from"../utils/flags.js";const w=o=>{const e=[];return o.pages.forEach(o=>{o.children.forEach(o=>{"text"===o.type&&e.push(o.text)})}),e.join(" ").split(" ").slice(0,6).join(" ").replace(/\s/g,"-").toLowerCase()||"polotno"};export const DownloadButton=t(({store:t})=>{const[g,j]=s.useState(!1);return e(n,{children:[o(d,{asChild:!0,children:e(r,{variant:"ghost",size:"sm",className:"polotno-download-button",disabled:g,children:[g?o(i,{className:"pn:mr-1.5"}):o(a,{name:"download.export",className:"pn:mr-1.5 pn:size-4"}),p("toolbar.download")]})}),e(l,{align:"end",children:[e(m,{onClick:async()=>{t.pages.forEach((o,e)=>{const s=t.pages.length>1?"-"+(e+1):"";t.saveAsImage({pageId:o.id,fileName:w(t)+s+".png"})})},children:[o(a,{name:"download.image",className:"pn:size-4"}),p("toolbar.saveAsImage")]}),e(m,{onClick:async()=>{j(!0),await t.saveAsPDF({fileName:w(t)+".pdf"}),j(!1)},children:[o(a,{name:"download.pdf",className:"pn:size-4"}),p("toolbar.saveAsPDF")]}),h.animationsEnabled&&e(m,{onClick:async()=>{j(!0);try{await(async({store:o,onProgress:e})=>{const s=o.toJSON(),t=await fetch(`${f()}/renders?KEY=${u()}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({design:s,pixelRatio:1,format:"mp4"})}),a=await t.json();for(;;){const s=await fetch(`${f()}/renders/${a.id}?KEY=${u()}`),t=await s.json();if("done"===t.status){c(t.output,w(o)+".mp4");break}if("error"===t.status){throw new Error("Failed to render video")}null==e||e(t.progress||0,t.status||"processing"),await new Promise(o=>setTimeout(o,5e3))}})({store:t})}catch(o){console.error("Video export failed:",o),alert("Failed to export video. Please try again.")}j(!1)},children:[o(a,{name:"download.video",className:"pn:size-4"}),"Save as Video"]})]})]})});export default DownloadButton;
+import{jsx as o,jsxs as e}from"react/jsx-runtime";import*as s from"react";import{observer as t}from"mobx-react-lite";import{PolotnoIcon as a}from"../icons/registry.js";import{Button as r}from"../primitives/button.js";import{Spinner as i}from"../primitives/spinner.js";import{DropdownMenu as n,DropdownMenuContent as l,DropdownMenuItem as m,DropdownMenuTrigger as d}from"../primitives/dropdown-menu.js";import{t as p}from"../utils/l10n.js";import{downloadFile as c}from"../utils/download.js";import{getAPI as f}from"../utils/api.js";import{getKey as u}from"../utils/validate-key.js";import{flags as w}from"../utils/flags.js";const g=o=>{const e=[];return o.pages.forEach(o=>{o.children.forEach(o=>{"text"===o.type&&e.push(o.text)})}),e.join(" ").split(" ").slice(0,6).join(" ").replace(/\s/g,"-").toLowerCase()||"polotno"};export const DownloadButton=t(({store:t})=>{const[h,j]=s.useState(!1);return e(n,{children:[o(d,{render:e(r,{variant:"ghost",size:"sm",className:"polotno-download-button",disabled:h,children:[h?o(i,{className:"pn:mr-1.5"}):o(a,{name:"download.export",className:"pn:mr-1.5 pn:size-4"}),p("toolbar.download")]})}),e(l,{align:"end",children:[e(m,{onClick:async()=>{t.pages.forEach((o,e)=>{const s=t.pages.length>1?"-"+(e+1):"";t.saveAsImage({pageId:o.id,fileName:g(t)+s+".png"})})},children:[o(a,{name:"download.image",className:"pn:size-4"}),p("toolbar.saveAsImage")]}),e(m,{onClick:async()=>{j(!0),await t.saveAsPDF({fileName:g(t)+".pdf"}),j(!1)},children:[o(a,{name:"download.pdf",className:"pn:size-4"}),p("toolbar.saveAsPDF")]}),w.animationsEnabled&&e(m,{onClick:async()=>{j(!0);try{await(async({store:o,onProgress:e})=>{const s=o.toJSON(),t=await fetch(`${f()}/renders?KEY=${u()}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({design:s,pixelRatio:1,format:"mp4"})}),a=await t.json();for(;;){const s=await fetch(`${f()}/renders/${a.id}?KEY=${u()}`),t=await s.json();if("done"===t.status){c(t.output,g(o)+".mp4");break}if("error"===t.status){throw new Error("Failed to render video")}null==e||e(t.progress||0,t.status||"processing"),await new Promise(o=>setTimeout(o,5e3))}})({store:t})}catch(o){console.error("Video export failed:",o),alert("Failed to export video. Please try again.")}j(!1)},children:[o(a,{name:"download.video",className:"pn:size-4"}),"Save as Video"]})]})]})});export default DownloadButton;

package/toolbar/figure-toolbar.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{observer as i}from"mobx-react-lite";import{PolotnoIcon as r}from"../icons/registry.js";import{Button as o}from"../primitives/button.js";import{SliderField as s}from"../primitives/slider-field.js";import{Popover as n,PopoverContent as a,PopoverTrigger as l}from"../primitives/popover.js";import{Tooltip as m,TooltipContent as c,TooltipTrigger as h}from"../primitives/tooltip.js";import{cn as d}from"../lib/utils.js";import{ColorPicker as p}from"./color-picker.js";import{AnimationsPicker as g}from"./animations-picker.js";import{EffectsPicker as u}from"./filters-picker.js";import{ElementContainer as f,extendToolbar as F}from"./element-container.js";import{StrokeWidthIcon as k,DASH_ICONS as b,DashStyleButton as v}from"./toolbar-shared.js";import{t as x}from"../utils/l10n.js";import{flags as j}from"../utils/flags.js";export const FigureFill=i(({elements:t,store:i})=>e(p,{value:t[0].fill,style:{marginRight:"5px"},gradientEnabled:!0,onChange:e=>i.history.transaction(()=>{t.forEach(t=>{t.set({fill:e})})}),store:i}));export const FigureSettings=i(({store:i,elements:p})=>{const g=e=>{i.history.transaction(()=>{p.forEach(t=>{t.set(e)})})};return t(n,{children:[t(m,{children:[e(h,{asChild:!0,children:e(l,{asChild:!0,children:e(o,{variant:"ghost",size:"icon-sm","aria-label":x("toolbar.strokeSettings"),children:e(k,{})})})}),e(c,{children:x("toolbar.strokeSettings")})]}),t(a,{className:"pn:w-[270px] pn:p-4",align:"start",children:[t("div",{className:"pn:flex pn:items-center pn:justify-between pn:pb-4",children:[e(o,{variant:"outline",size:"sm",onClick:()=>{g({strokeWidth:0})},className:d("pn:h-[34px] pn:w-[44px]",0===p[0].strokeWidth&&"pn:bg-muted"),children:e(r,{name:"action.none",className:"pn:size-5"})}),[{dash:[],active:0===p[0].dash.length,Icon:b.solid},{dash:[4,1],active:4===p[0].dash[0],Icon:b.large},{dash:[2,1],active:2===p[0].dash[0],Icon:b.medium},{dash:[1,1],active:1===p[0].dash[0],Icon:b.small}].map(({dash:t,active:i,Icon:r},o)=>e(v,{active:!!p[0].strokeWidth&&i,onClick:()=>{g({dash:t,strokeWidth:p[0].strokeWidth||10})},icon:e(r,{})},o))]}),e(s,{label:x("toolbar.strokeWidth"),value:p[0].strokeWidth,onChange:e=>{g({strokeWidth:e})},min:0,max:Math.round(Math.min(p[0].width,p[0].height)/2)}),"rect"===p[0].subType&&e(s,{label:x("toolbar.cornerRadius"),value:p[0].cornerRadius,onChange:e=>{g({cornerRadius:e})},min:0,max:Math.round(Math.max(p[0].width,p[0].height)/2)})]})]})});export const FigureStroke=i(({elements:t,store:i})=>t.find(e=>e.strokeWidth)?e(p,{value:t[0].stroke,style:{marginRight:"5px"},gradientEnabled:!0,onChange:e=>i.history.transaction(()=>{t.forEach(t=>{t.set({stroke:e})})}),store:i}):null);const S={FigureFill,FigureStroke,FigureSettings,FigureAnimations:g,FigureFilters:u};export const FigureToolbar=i(({store:t,components:i})=>{const r=t.selectedElements[0],o=["FigureFill","FigureStroke","FigureSettings","FigureFilters",j.animationsEnabled&&"FigureAnimations"].filter(e=>Boolean(e)),s=F({type:"figure",usedItems:o,components:i});return e(f,{items:s,itemRender:o=>{const s=i[o]||S[o];return e(s,{element:r,store:t,elements:t.selectedElements},o)}})});export default FigureToolbar;
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{observer as r}from"mobx-react-lite";import{PolotnoIcon as i}from"../icons/registry.js";import{Button as o}from"../primitives/button.js";import{SliderField as s}from"../primitives/slider-field.js";import{Popover as n,PopoverContent as a,PopoverTrigger as l}from"../primitives/popover.js";import{Tooltip as m,TooltipContent as c,TooltipTrigger as d}from"../primitives/tooltip.js";import{cn as h}from"../lib/utils.js";import{ColorPicker as p}from"./color-picker.js";import{AnimationsPicker as g}from"./animations-picker.js";import{EffectsPicker as u}from"./filters-picker.js";import{ElementContainer as f,extendToolbar as F}from"./element-container.js";import{StrokeWidthIcon as k,DASH_ICONS as b,DashStyleButton as v}from"./toolbar-shared.js";import{t as x}from"../utils/l10n.js";import{flags as j}from"../utils/flags.js";export const FigureFill=r(({elements:t,store:r})=>e(p,{value:t[0].fill,style:{marginRight:"5px"},gradientEnabled:!0,onChange:e=>r.history.transaction(()=>{t.forEach(t=>{t.set({fill:e})})}),store:r}));export const FigureSettings=r(({store:r,elements:p})=>{const g=e=>{r.history.transaction(()=>{p.forEach(t=>{t.set(e)})})};return t(n,{children:[t(m,{children:[e(d,{render:e(l,{render:e(o,{variant:"ghost",size:"icon-sm","aria-label":x("toolbar.strokeSettings"),children:e(k,{})})})}),e(c,{children:x("toolbar.strokeSettings")})]}),t(a,{className:"pn:w-[270px] pn:p-4",align:"start",children:[t("div",{className:"pn:flex pn:items-center pn:justify-between pn:pb-4",children:[e(o,{variant:"outline",size:"sm",onClick:()=>{g({strokeWidth:0})},className:h("pn:h-[34px] pn:w-[44px]",0===p[0].strokeWidth&&"pn:bg-muted"),children:e(i,{name:"action.none",className:"pn:size-5"})}),[{dash:[],active:0===p[0].dash.length,Icon:b.solid},{dash:[4,1],active:4===p[0].dash[0],Icon:b.large},{dash:[2,1],active:2===p[0].dash[0],Icon:b.medium},{dash:[1,1],active:1===p[0].dash[0],Icon:b.small}].map(({dash:t,active:r,Icon:i},o)=>e(v,{active:!!p[0].strokeWidth&&r,onClick:()=>{g({dash:t,strokeWidth:p[0].strokeWidth||10})},icon:e(i,{})},o))]}),e(s,{label:x("toolbar.strokeWidth"),value:p[0].strokeWidth,onChange:e=>{g({strokeWidth:e})},min:0,max:Math.round(Math.min(p[0].width,p[0].height)/2)}),"rect"===p[0].subType&&e(s,{label:x("toolbar.cornerRadius"),value:p[0].cornerRadius,onChange:e=>{g({cornerRadius:e})},min:0,max:Math.round(Math.max(p[0].width,p[0].height)/2)})]})]})});export const FigureStroke=r(({elements:t,store:r})=>t.find(e=>e.strokeWidth)?e(p,{value:t[0].stroke,style:{marginRight:"5px"},gradientEnabled:!0,onChange:e=>r.history.transaction(()=>{t.forEach(t=>{t.set({stroke:e})})}),store:r}):null);const S={FigureFill,FigureStroke,FigureSettings,FigureAnimations:g,FigureFilters:u};export const FigureToolbar=r(({store:t,components:r})=>{const i=t.selectedElements[0],o=["FigureFill","FigureStroke","FigureSettings","FigureFilters",j.animationsEnabled&&"FigureAnimations"].filter(e=>Boolean(e)),s=F({type:"figure",usedItems:o,components:r});return e(f,{items:s,itemRender:o=>{const s=r[o]||S[o];return e(s,{element:i,store:t,elements:t.selectedElements},o)}})});export default FigureToolbar;

package/toolbar/filters-picker.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import r from"react";import{observer as o}from"mobx-react-lite";import{PolotnoIcon as i}from"../icons/registry.js";import{t as n}from"../utils/l10n.js";import{flags as s}from"../utils/flags.js";import{Button as l}from"../primitives/button.js";import{clamp as u}from"../lib/utils.js";export{NumberInput}from"../primitives/numeric-input.js";import{Slider as c}from"../primitives/slider.js";export const CurvePowerSlider=o(({textEl:t,eachSet:o})=>{const[i,n]=r.useState(null),l=r.useRef(0),m=r.useRef(null),a=null!=i?i:100*t.curvePower,f=s.htmlRenderEnabled&&!s.renderTagTextEnabled?300:0,p=e=>{o({curvePower:e/100}),l.current=Date.now()};return e(c,{value:[a],onValueChange:([e])=>{const t=u(e,-100,100);if(n(t),m.current&&clearTimeout(m.current),0===f){return void p(t)}const r=Date.now()-l.current;r>=f?p(t):m.current=setTimeout(()=>{p(t)},f-r)},onValueCommit:([e])=>{m.current&&clearTimeout(m.current),n(null),p(u(e,-100,100))},min:-100,max:100,step:1})});export const FiltersPicker=o(e=>(console.error("[polotno] FiltersPicker was removed — effects live in the Effects side panel (use EffectsPicker / the default export). Rendering nothing."),null));export const EffectsPicker=o(({element:r,store:o})=>r.contentEditable?t(l,{variant:"ghost",size:"sm",onClickCapture:e=>{e.stopPropagation(),o.openSidePanel("effects")},children:[e(i,{name:"toolbar.filters"}),n("toolbar.effects")]}):null);export default EffectsPicker;
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import r from"react";import{observer as o}from"mobx-react-lite";import{PolotnoIcon as i}from"../icons/registry.js";import{t as n}from"../utils/l10n.js";import{flags as s}from"../utils/flags.js";import{Button as l}from"../primitives/button.js";import{clamp as c,firstSliderValue as u}from"../lib/utils.js";export{NumberInput}from"../primitives/numeric-input.js";import{Slider as m}from"../primitives/slider.js";export const CurvePowerSlider=o(({textEl:t,eachSet:o})=>{const[i,n]=r.useState(null),l=r.useRef(0),a=r.useRef(null),f=null!=i?i:100*t.curvePower,p=s.htmlRenderEnabled&&!s.renderTagTextEnabled?300:0,d=e=>{o({curvePower:e/100}),l.current=Date.now()};return e(m,{value:[f],onValueChange:e=>{const t=u(e),r=c(t,-100,100);if(n(r),a.current&&clearTimeout(a.current),0===p){return void d(r)}const o=Date.now()-l.current;o>=p?d(r):a.current=setTimeout(()=>{d(r)},p-o)},onValueCommitted:e=>{const t=u(e);a.current&&clearTimeout(a.current),n(null),d(c(t,-100,100))},min:-100,max:100,step:1})});export const FiltersPicker=o(e=>(console.error("[polotno] FiltersPicker was removed — effects live in the Effects side panel (use EffectsPicker / the default export). Rendering nothing."),null));export const EffectsPicker=o(({element:r,store:o})=>r.contentEditable?t(l,{variant:"ghost",size:"sm",onClickCapture:e=>{e.stopPropagation(),o.openSidePanel("effects")},children:[e(i,{name:"toolbar.filters"}),n("toolbar.effects")]}):null);export default EffectsPicker;

package/toolbar/flip-button.js

@@ -1 +1 @@
-import{jsx as t,jsxs as i}from"react/jsx-runtime";import{Button as l}from"../primitives/button.js";import{DropdownMenu as r,DropdownMenuContent as e,DropdownMenuItem as o,DropdownMenuTrigger as s}from"../primitives/dropdown-menu.js";import{PolotnoIcon as a}from"../icons/registry.js";import{t as n}from"../utils/l10n.js";export const FlipButton=({elements:p})=>i(r,{children:[t(s,{asChild:!0,children:t(l,{variant:"ghost",size:"sm",children:n("toolbar.flip")})}),i(e,{align:"start",children:[i(o,{onSelect:t=>{t.preventDefault(),p.forEach(t=>{t.set({flipX:!t.flipX})})},children:[t(a,{name:"toolbar.flipHorizontal",className:"pn:size-4"}),n("toolbar.flipHorizontally")]}),i(o,{onSelect:t=>{t.preventDefault(),p.forEach(t=>{t.set({flipY:!t.flipY})})},children:[t(a,{name:"toolbar.flipVertical",className:"pn:size-4"}),n("toolbar.flipVertically")]})]})]});export default FlipButton;
+import{jsx as t,jsxs as r}from"react/jsx-runtime";import{Button as e}from"../primitives/button.js";import{DropdownMenu as i,DropdownMenuContent as l,DropdownMenuItem as o,DropdownMenuTrigger as s}from"../primitives/dropdown-menu.js";import{PolotnoIcon as n}from"../icons/registry.js";import{t as a}from"../utils/l10n.js";export const FlipButton=({elements:p})=>r(i,{children:[t(s,{render:t(e,{variant:"ghost",size:"sm",children:a("toolbar.flip")})}),r(l,{align:"start",children:[r(o,{onSelect:t=>{t.preventDefault(),p.forEach(t=>{t.set({flipX:!t.flipX})})},children:[t(n,{name:"toolbar.flipHorizontal",className:"pn:size-4"}),a("toolbar.flipHorizontally")]}),r(o,{onSelect:t=>{t.preventDefault(),p.forEach(t=>{t.set({flipY:!t.flipY})})},children:[t(n,{name:"toolbar.flipVertical",className:"pn:size-4"}),a("toolbar.flipVertically")]})]})]});export default FlipButton;

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 k from"swr";import{getFontsList as E,globalFonts as I,isGoogleFontChanged as L}from"../utils/fonts.js";import{getGoogleFontsListAPI as M}from"../utils/api.js";import{normalizeRichTextHtml as W,listEffectiveFontFamilies as B}from"../utils/rich-text-html.js";import{patchTextFormat as R}from"../utils/text-format.js";import{useTextFormat as _,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 w,VERTICAL_ALIGN_OPTIONS as A,VERTICAL_ALIGN_ICONS as D}from"./text-toolbar.js";import{cycleNext as N}from"./toolbar-shared.js";import k from"swr";import{getFontsList as E,globalFonts as I,isGoogleFontChanged as L}from"../utils/fonts.js";import{getGoogleFontsListAPI as M}from"../utils/api.js";import{normalizeRichTextHtml as W,listEffectiveFontFamilies as B}from"../utils/rich-text-html.js";import{patchTextFormat as R}from"../utils/text-format.js";import{useTextFormat as _,getActiveTextEditor as O,resolveSelectionScope as P,applyToLiveEditor as V}from"../utils/text-format-state.js";const G=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;
   }
-`,O=f("span")`
+`,H=f("span")`
   position: absolute;
   left: 11px;
   top: 0;
@@ -19,7 +19,7 @@ import{jsx as t,jsxs as e}from"react/jsx-runtime";import o from"react";import{ob
   font-size: inherit;
   color: inherit;
 
-  ${H}:focus-within & {
+  ${G}:focus-within & {
     display: none;
   }
-`,Q=t=>{const e=P();return!!e&&e.store===t&&!!e.instance};let J=null;const U=()=>{b.pendingToolbarInteraction=!0,J&&clearTimeout(J),J=setTimeout(()=>{b.pendingToolbarInteraction=!1,J=null},100)},X=t=>{var e;(!(e=t.target)||"INPUT"!==e.tagName&&"TEXTAREA"!==e.tagName&&"SELECT"!==e.tagName&&!e.isContentEditable)&&t.preventDefault(),U()},$=n(({store:e,isActive:o,toggle:n,icon:i,ariaLabel:l,tooltipContent:r})=>{const{format:s,applyTextFormat:a}=_(e);return t(c,{label:r||l||"",side:"bottom",active:o(s),onMouseDown:t=>{t.preventDefault()},onClick:()=>n(s,a),children:i})});function q(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($,{store:e,isActive:t=>"bold"===t.fontWeight.value||"700"===t.fontWeight.value,toggle:(t,e)=>e({fontWeight:"bold"===t.fontWeight.value||"700"===t.fontWeight.value?"normal":"bold"}),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($,{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($,{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:q(t,"underline")}),icon:t(i,{name:"text.underline",className:"pn:size-4"}),tooltipContent:h("toolbar.underline")}),t($,{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:q(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,{asChild:!0,children: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:W(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);return t("div",{"data-polotno-keep-focus":!0,onMouseDown:X,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 K=E(),Y={TextFontFamily:n(({elements:e,store:n})=>{var i;const{format:l,applyTextFormat:r}=_(n),s=Q(n),a=l.fontFamily.mixed,c=a?Array.from(new Set(e.flatMap(t=>B(t.text,t.fontFamily)))).sort((t,e)=>t.localeCompare(e,void 0,{sensitivity:"base"})):void 0,{data:m,mutate:p}=k(M(),S,{isPaused:()=>L(),fallbackData:[]});o.useEffect(()=>{p()},[L()]);const u=n.fonts.concat(I).map(t=>t.fontFamily).concat((null==m?void 0:m.length)&&!L()?m:K),d=[];n.find(t=>("text"===t.type&&d.push(t.fontFamily),!1));const f=[...new Set(d.concat("_divider").concat(u))],x=null!==(i=l.fontFamily.value)&&void 0!==i?i:e[0].fontFamily;let g=x;g.length>15&&(g=g.slice(0,15)+"...");const v=t(F,{fonts:f,activeFont:x,activeFontLabel:g,store:n,mixed:a,mixedFonts:c,onFontSelect:t=>r({fontFamily:t})});return s?t("div",{"data-polotno-keep-focus":!0,onMouseDown:X,children:v}):v}),TextFontSize:n(({elements:o,store:n})=>{const{format:i}=_(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=P();if(o&&o.store===n&&o.instance){const{scope:t}=V(o.instance,o.lastSelection);if("full"!==t){return void G(o.instance,{fontSize:e.fontSize},o.lastSelection)}}const{attrsToSet:i}=R(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(O,{"aria-hidden":!0,children:"—"})]});return l?t("div",{"data-polotno-keep-focus":!0,onMouseDown:U,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])||Y[l];return t(r,{element:i,elements:n,store:e,components:o},l)}})});
+`,Q=t=>{const e=O();return!!e&&e.store===t&&!!e.instance};let J=null;const U=()=>{b.pendingToolbarInteraction=!0,J&&clearTimeout(J),J=setTimeout(()=>{b.pendingToolbarInteraction=!1,J=null},100)},X=t=>{var e;(!(e=t.target)||"INPUT"!==e.tagName&&"TEXTAREA"!==e.tagName&&"SELECT"!==e.tagName&&!e.isContentEditable)&&t.preventDefault(),U()},$=n(({store:e,isActive:o,toggle:n,icon:i,ariaLabel:l,tooltipContent:r})=>{const{format:s,applyTextFormat:a}=_(e);return t(c,{label:r||l||"",side:"bottom",active:o(s),onMouseDown:t=>{t.preventDefault()},onClick:()=>n(s,a),children:i})});function q(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($,{store:e,isActive:t=>"bold"===t.fontWeight.value||"700"===t.fontWeight.value,toggle:(t,e)=>e({fontWeight:"bold"===t.fontWeight.value||"700"===t.fontWeight.value?"normal":"bold"}),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($,{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($,{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:q(t,"underline")}),icon:t(i,{name:"text.underline",className:"pn:size-4"}),tooltipContent:h("toolbar.underline")}),t($,{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:q(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:W(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);return t("div",{"data-polotno-keep-focus":!0,onMouseDown:X,children:t(m,{value:null!==(n=i.fill.value)&&void 0!==n?n:e.fill,gradientEnabled:!0,onClose:()=>{const t=O();(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 K=E(),Y={TextFontFamily:n(({elements:e,store:n})=>{var i;const{format:l,applyTextFormat:r}=_(n),s=Q(n),a=l.fontFamily.mixed,c=a?Array.from(new Set(e.flatMap(t=>B(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}=k(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:K),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:X,children:b}):b}),TextFontSize:n(({elements:o,store:n})=>{const{format:i}=_(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=O();if(o&&o.store===n&&o.instance){const{scope:t}=P(o.instance,o.lastSelection);if("full"!==t){return void V(o.instance,{fontSize:e.fontSize},o.lastSelection)}}const{attrsToSet:i}=R(t,{fontSize:e.fontSize});t.set(Object.assign(Object.assign({},e),i))})(t,e):Reflect.get(t,e)})),c=e(G,{className:r?"polotno-mixed":"",children:[t(j,{elements:a,store:n}),r&&t(H,{"aria-hidden":!0,children:"—"})]});return l?t("div",{"data-polotno-keep-focus":!0,onMouseDown:U,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])||Y[l];return t(r,{element:i,elements:n,store:e,components:o},l)}})});

package/toolbar/image-toolbar.js

@@ -1 +1 @@
-import{jsx as e,jsxs as o,Fragment as t}from"react/jsx-runtime";import r from"react";import{observer as i}from"mobx-react-lite";import{Button as a}from"../primitives/button.js";import{Tooltip as n,TooltipContent as m,TooltipTrigger as s}from"../primitives/tooltip.js";import{ElementContainer as c,extendToolbar as l}from"./element-container.js";import{PolotnoIcon as p}from"../icons/registry.js";import g from"./filters-picker.js";import{AnimationsPicker as d}from"./animations-picker.js";import h from"./flip-button.js";import{flags as u}from"../utils/flags.js";import{ImageRemoveBackground as b}from"./image-remove-background-button.js";export{ImageRemoveBackground}from"./image-remove-background-button.js";import{getCrop as C,getImageSize as f}from"../utils/image.js";import{t as I}from"../utils/l10n.js";export const ImageFitToBackground=({element:o})=>e(a,{variant:"ghost",size:"sm",onClick:async()=>{const{page:e}=o,t=e.computedWidth+2*e.bleed,r=e.computedHeight+2*e.bleed,i=await f(o.src),a=o.stretchEnabled?{cropX:0,cropY:0,cropWidth:1,cropHeight:1}:C({width:t,height:r},i);o.set(Object.assign({x:-e.bleed,y:-e.bleed,width:t,height:r,rotation:0},a))},children:I("toolbar.fitToBackground")});export const ImageClip=i(({element:o,store:t,elements:r})=>o.contentEditable?o.clipSrc?e(a,{variant:"ghost",size:"sm",onClickCapture:()=>{r.forEach(e=>{e.set({clipSrc:""})})},children:I("toolbar.removeClip")}):e(a,{variant:"ghost",size:"sm",onClickCapture:e=>{e.stopPropagation(),t.openSidePanel("image-clip")},children:I("toolbar.clip")}):null);export const ImageCrop=i(({element:t})=>t.contentEditable?t.stretchEnabled?null:o(n,{children:[e(s,{asChild:!0,children:e(a,{variant:"ghost",size:"icon-sm",onClickCapture:e=>{e.stopPropagation(),t.toggleCropMode(!0)},"aria-label":I("toolbar.crop"),children:e(p,{name:"toolbar.crop",className:"pn:size-4"})})}),e(m,{children:I("toolbar.crop")})]}):null);export const ImageRemoveClip=i(({element:o})=>o.clipSrc?e(a,{variant:"ghost",size:"sm",onClickCapture:()=>{o.set({clipSrc:""})},children:I("toolbar.removeClip")}):null);const k={ImageFlip:h,ImageFilters:g,ImageFitToBackground,ImageCrop,ImageClip,ImageRemoveBackground:b,ImageAnimations:d};export const ImageToolbar=i(({store:i,components:n})=>{const m=i.selectedElements[0],s=m._cropModeEnabled,g=r.useRef({});r.useEffect(()=>{s&&(g.current={x:m.x,y:m.y,width:m.width,height:m.height,cropX:m.cropX,cropY:m.cropY,cropWidth:m.cropWidth,cropHeight:m.cropHeight})},[s]);const d=["ImageFlip","ImageFilters","ImageFitToBackground","ImageClip","ImageCrop",u.animationsEnabled&&"ImageAnimations",u.removeBackgroundEnabled&&"ImageRemoveBackground"],h=l({type:"image",usedItems:d,components:n});return o(t,{children:[!s&&e(c,{items:h,itemRender:o=>{const t=n[o]||k[o];return e(t,{element:m,store:i,elements:i.selectedElements},o)}}),s&&o("div",{className:"pn:flex pn:items-center",children:[o(a,{variant:"ghost",size:"sm",onClickCapture:()=>{m.toggleCropMode(!1)},children:[e(p,{name:"action.confirm",className:"pn:size-4"}),I("toolbar.cropDone")]}),o(a,{variant:"ghost",size:"sm",onClickCapture:()=>{m.set(Object.assign({},g.current)),m.toggleCropMode(!1)},children:[e(p,{name:"action.close",className:"pn:size-4"}),I("toolbar.cropCancel")]})]})]})});export default ImageToolbar;
+import{jsx as e,jsxs as o,Fragment as t}from"react/jsx-runtime";import r from"react";import{observer as i}from"mobx-react-lite";import{Button as a}from"../primitives/button.js";import{Tooltip as n,TooltipContent as m,TooltipTrigger as s}from"../primitives/tooltip.js";import{ElementContainer as c,extendToolbar as l}from"./element-container.js";import{PolotnoIcon as p}from"../icons/registry.js";import g from"./filters-picker.js";import{AnimationsPicker as d}from"./animations-picker.js";import h from"./flip-button.js";import{flags as u}from"../utils/flags.js";import{ImageRemoveBackground as b}from"./image-remove-background-button.js";export{ImageRemoveBackground}from"./image-remove-background-button.js";import{getCrop as C,getImageSize as f}from"../utils/image.js";import{t as I}from"../utils/l10n.js";export const ImageFitToBackground=({element:o})=>e(a,{variant:"ghost",size:"sm",onClick:async()=>{const{page:e}=o,t=e.computedWidth+2*e.bleed,r=e.computedHeight+2*e.bleed,i=await f(o.src),a=o.stretchEnabled?{cropX:0,cropY:0,cropWidth:1,cropHeight:1}:C({width:t,height:r},i);o.set(Object.assign({x:-e.bleed,y:-e.bleed,width:t,height:r,rotation:0},a))},children:I("toolbar.fitToBackground")});export const ImageClip=i(({element:o,store:t,elements:r})=>o.contentEditable?o.clipSrc?e(a,{variant:"ghost",size:"sm",onClickCapture:()=>{r.forEach(e=>{e.set({clipSrc:""})})},children:I("toolbar.removeClip")}):e(a,{variant:"ghost",size:"sm",onClickCapture:e=>{e.stopPropagation(),t.openSidePanel("image-clip")},children:I("toolbar.clip")}):null);export const ImageCrop=i(({element:t})=>t.contentEditable?t.stretchEnabled?null:o(n,{children:[e(s,{render:e(a,{variant:"ghost",size:"icon-sm",onClickCapture:e=>{e.stopPropagation(),t.toggleCropMode(!0)},"aria-label":I("toolbar.crop"),children:e(p,{name:"toolbar.crop",className:"pn:size-4"})})}),e(m,{children:I("toolbar.crop")})]}):null);export const ImageRemoveClip=i(({element:o})=>o.clipSrc?e(a,{variant:"ghost",size:"sm",onClickCapture:()=>{o.set({clipSrc:""})},children:I("toolbar.removeClip")}):null);const k={ImageFlip:h,ImageFilters:g,ImageFitToBackground,ImageCrop,ImageClip,ImageRemoveBackground:b,ImageAnimations:d};export const ImageToolbar=i(({store:i,components:n})=>{const m=i.selectedElements[0],s=m._cropModeEnabled,g=r.useRef({});r.useEffect(()=>{s&&(g.current={x:m.x,y:m.y,width:m.width,height:m.height,cropX:m.cropX,cropY:m.cropY,cropWidth:m.cropWidth,cropHeight:m.cropHeight})},[s]);const d=["ImageFlip","ImageFilters","ImageFitToBackground","ImageClip","ImageCrop",u.animationsEnabled&&"ImageAnimations",u.removeBackgroundEnabled&&"ImageRemoveBackground"],h=l({type:"image",usedItems:d,components:n});return o(t,{children:[!s&&e(c,{items:h,itemRender:o=>{const t=n[o]||k[o];return e(t,{element:m,store:i,elements:i.selectedElements},o)}}),s&&o("div",{className:"pn:flex pn:items-center",children:[o(a,{variant:"ghost",size:"sm",onClickCapture:()=>{m.toggleCropMode(!1)},children:[e(p,{name:"action.confirm",className:"pn:size-4"}),I("toolbar.cropDone")]}),o(a,{variant:"ghost",size:"sm",onClickCapture:()=>{m.set(Object.assign({},g.current)),m.toggleCropMode(!1)},children:[e(p,{name:"action.close",className:"pn:size-4"}),I("toolbar.cropCancel")]})]})]})});export default ImageToolbar;

package/toolbar/line-toolbar.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import{observer as n}from"mobx-react-lite";import{PolotnoIcon as i}from"../icons/registry.js";import{Button as o}from"../primitives/button.js";import{SliderField as s}from"../primitives/slider-field.js";import{Popover as a,PopoverContent as l,PopoverTrigger as d}from"../primitives/popover.js";import{Tooltip as c,TooltipContent as h,TooltipTrigger as p}from"../primitives/tooltip.js";import{cn as m}from"../lib/utils.js";import{ColorPicker as u}from"./color-picker.js";import{AnimationsPicker as g}from"./animations-picker.js";import{DashStyleButton as L,DASH_ICONS as k}from"./toolbar-shared.js";import{ElementContainer as f,extendToolbar as w}from"./element-container.js";import{getMiddlePoints as x,getLinePositionFromMiddlePoints as v}from"../canvas/line-element.js";import{t as C}from"../utils/l10n.js";import{flags as j}from"../utils/flags.js";export const LineSettings=n(({store:r,elements:n})=>{const m=e=>{r.history.transaction(()=>{n.forEach(t=>{t.set(e)})})};return t(a,{children:[t(c,{children:[e(p,{asChild:!0,children:e(d,{asChild:!0,children:e(o,{variant:"ghost",size:"icon-sm","aria-label":C("toolbar.lineStyle"),children:e(i,{name:"action.settings",className:"pn:size-4"})})})}),e(h,{children:C("toolbar.lineStyle")})]}),t(l,{className:"pn:w-[230px] pn:p-4",align:"start",children:[e(s,{label:C("toolbar.lineSize"),value:n[0].height,onChange:e=>{(e=>{r.history.transaction(()=>{n.forEach(t=>{const{middleLeft:r,middleRight:n}=x(t),{x:i,y:o,rotation:s}=v(r,n,e);t.set({x:i,y:o,rotation:s,height:e})})})})(e)},min:1,max:100}),t("div",{className:"pn:flex pn:items-center pn:justify-between pn:pt-4 pn:pb-1",children:[e(L,{active:0===n[0].dash.length,onClick:()=>{m({dash:[]})},icon:e(k.solid,{})}),e(L,{active:4===n[0].dash[0],onClick:()=>{m({dash:[4,1]})},icon:e(k.large,{})}),e(L,{active:2===n[0].dash[0],onClick:()=>{m({dash:[2,1]})},icon:e(k.medium,{})}),e(L,{active:1===n[0].dash[0],onClick:()=>{m({dash:[1,1]})},icon:e(k.small,{})})]})]})]})});export const LineColor=n(({elements:t,store:r})=>e(u,{value:t[0].color,style:{marginRight:"5px"},gradientEnabled:!1,onChange:e=>r.history.transaction(()=>{t.forEach(t=>{t.set({color:e})})}),store:r}));const y={"":e("span",{"aria-hidden":"true",className:"pn:inline-flex",children:e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",children:e("path",{stroke:"currentColor",strokeWidth:"2",d:"M 1 8 L 16 8"})})}),arrow:e("span",{"aria-hidden":"true",className:"pn:inline-flex",children:t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",children:[e("path",{stroke:"currentColor",strokeWidth:"2",d:"M 8 3 L 1 8 L 8 13",fill:"none",strokeLinejoin:"round",strokeLinecap:"round"}),e("path",{stroke:"currentColor",strokeWidth:"2",d:"M 1 8 L 15 8",strokeLinejoin:"round",strokeLinecap:"round"})]})}),triangle:e("span",{"aria-hidden":"true",className:"pn:inline-flex",children:t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",children:[e("path",{stroke:"currentColor",strokeWidth:"2",d:"M 8 3 L 1 8 L 8 13 Z",fill:"currentColor",strokeLinejoin:"round",strokeLinecap:"round"}),e("path",{stroke:"currentColor",strokeWidth:"2",d:"M 1 8 L 15 8",strokeLinejoin:"round",strokeLinecap:"round"})]})}),bar:e("span",{"aria-hidden":"true",className:"pn:inline-flex",children:t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",children:[e("path",{stroke:"currentColor",strokeWidth:"2",d:"M 1 3 L 1 13",strokeLinejoin:"round",strokeLinecap:"round"}),e("path",{stroke:"currentColor",strokeWidth:"2",d:"M 1 8 L 15 8",strokeLinejoin:"round",strokeLinecap:"round"})]})}),square:e("span",{"aria-hidden":"true",className:"pn:inline-flex",children:t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",children:[e("path",{stroke:"currentColor",strokeWidth:"2",d:"M 1 4 L 9 4 L 9 12 L 1 12 Z",fill:"currentColor",strokeLinejoin:"round",strokeLinecap:"round"}),e("path",{stroke:"currentColor",strokeWidth:"2",d:"M 1 8 L 15 8",strokeLinejoin:"round",strokeLinecap:"round"})]})}),circle:e("span",{"aria-hidden":"true",className:"pn:inline-flex",children:t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",children:[e("circle",{cx:"4",cy:"8",r:"4",fill:"currentColor"}),e("path",{stroke:"currentColor",strokeWidth:"2",d:"M 1 8 L 15 8",strokeLinejoin:"round",strokeLinecap:"round"})]})})},b=({type:t,active:r,onClick:n,flipped:i})=>{const s=y[t];return e(o,{variant:"ghost",size:"icon-sm",onClick:n,className:m(r&&"pn:bg-muted"),children:i?e("span",{style:{transform:"scaleX(-1)",display:"inline-flex"},children:s}):s})};export const BasicHead=n(({elements:r,store:n,property:i})=>{const s="endHead"===i,m=y[r[0][i]],u=s?e("span",{style:{transform:"scaleX(-1)",display:"inline-flex"},children:m}):m,g=e=>{n.history.transaction(()=>{r.forEach(t=>{t.set({[i]:e})})})},L=C("startHead"===i?"toolbar.lineStartHead":"toolbar.lineEndHead");return t(a,{children:[t(c,{children:[e(p,{asChild:!0,children:e(d,{asChild:!0,children:e(o,{variant:"ghost",size:"icon-sm","aria-label":L,children:u})})}),e(h,{children:L})]}),t(l,{className:"pn:w-[150px] pn:p-2.5",align:"start",children:[e("div",{className:"pn:flex pn:items-center pn:justify-between",children:["","arrow","triangle"].map(t=>e(b,{type:t,active:r[0][i]===t,onClick:()=>{g(t)},flipped:s},t))}),e("div",{className:"pn:flex pn:items-center pn:justify-between",children:["bar","square","circle"].map(t=>e(b,{type:t,active:r[0][i]===t,onClick:()=>{g(t)},flipped:s},t))})]})]})});export const LineHeads=n(({elements:n,store:i})=>t(r,{children:[e(BasicHead,{elements:n,store:i,property:"startHead"}),e(BasicHead,{elements:n,store:i,property:"endHead"})]}));const H={LineSettings,LineColor,LineHeads,LineAnimations:g};export const LineToolbar=n(({store:t,components:r})=>{const n=t.selectedElements[0],i=["LineColor","LineSettings","LineHeads",j.animationsEnabled&&"LineAnimations"].filter(e=>Boolean(e)),o=w({type:"line",usedItems:i,components:r});return e(f,{items:o,itemRender:i=>{const o=r[i]||H[i];return e(o,{element:n,store:t,elements:t.selectedElements},i)}})});export default LineToolbar;
+import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import{observer as n}from"mobx-react-lite";import{PolotnoIcon as i}from"../icons/registry.js";import{Button as o}from"../primitives/button.js";import{SliderField as s}from"../primitives/slider-field.js";import{Popover as a,PopoverContent as l,PopoverTrigger as d}from"../primitives/popover.js";import{Tooltip as c,TooltipContent as p,TooltipTrigger as h}from"../primitives/tooltip.js";import{cn as m}from"../lib/utils.js";import{ColorPicker as u}from"./color-picker.js";import{AnimationsPicker as g}from"./animations-picker.js";import{DashStyleButton as L,DASH_ICONS as k}from"./toolbar-shared.js";import{ElementContainer as f,extendToolbar as w}from"./element-container.js";import{getMiddlePoints as x,getLinePositionFromMiddlePoints as v}from"../canvas/line-element.js";import{t as j}from"../utils/l10n.js";import{flags as C}from"../utils/flags.js";export const LineSettings=n(({store:t,elements:n})=>{const m=e=>{t.history.transaction(()=>{n.forEach(r=>{r.set(e)})})};return r(a,{children:[r(c,{children:[e(h,{render:e(d,{render:e(o,{variant:"ghost",size:"icon-sm","aria-label":j("toolbar.lineStyle"),children:e(i,{name:"action.settings",className:"pn:size-4"})})})}),e(p,{children:j("toolbar.lineStyle")})]}),r(l,{className:"pn:w-[230px] pn:p-4",align:"start",children:[e(s,{label:j("toolbar.lineSize"),value:n[0].height,onChange:e=>{(e=>{t.history.transaction(()=>{n.forEach(r=>{const{middleLeft:t,middleRight:n}=x(r),{x:i,y:o,rotation:s}=v(t,n,e);r.set({x:i,y:o,rotation:s,height:e})})})})(e)},min:1,max:100}),r("div",{className:"pn:flex pn:items-center pn:justify-between pn:pt-4 pn:pb-1",children:[e(L,{active:0===n[0].dash.length,onClick:()=>{m({dash:[]})},icon:e(k.solid,{})}),e(L,{active:4===n[0].dash[0],onClick:()=>{m({dash:[4,1]})},icon:e(k.large,{})}),e(L,{active:2===n[0].dash[0],onClick:()=>{m({dash:[2,1]})},icon:e(k.medium,{})}),e(L,{active:1===n[0].dash[0],onClick:()=>{m({dash:[1,1]})},icon:e(k.small,{})})]})]})]})});export const LineColor=n(({elements:r,store:t})=>e(u,{value:r[0].color,style:{marginRight:"5px"},gradientEnabled:!1,onChange:e=>t.history.transaction(()=>{r.forEach(r=>{r.set({color:e})})}),store:t}));const y={"":e("span",{"aria-hidden":"true",className:"pn:inline-flex",children:e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",children:e("path",{stroke:"currentColor",strokeWidth:"2",d:"M 1 8 L 16 8"})})}),arrow:e("span",{"aria-hidden":"true",className:"pn:inline-flex",children:r("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",children:[e("path",{stroke:"currentColor",strokeWidth:"2",d:"M 8 3 L 1 8 L 8 13",fill:"none",strokeLinejoin:"round",strokeLinecap:"round"}),e("path",{stroke:"currentColor",strokeWidth:"2",d:"M 1 8 L 15 8",strokeLinejoin:"round",strokeLinecap:"round"})]})}),triangle:e("span",{"aria-hidden":"true",className:"pn:inline-flex",children:r("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",children:[e("path",{stroke:"currentColor",strokeWidth:"2",d:"M 8 3 L 1 8 L 8 13 Z",fill:"currentColor",strokeLinejoin:"round",strokeLinecap:"round"}),e("path",{stroke:"currentColor",strokeWidth:"2",d:"M 1 8 L 15 8",strokeLinejoin:"round",strokeLinecap:"round"})]})}),bar:e("span",{"aria-hidden":"true",className:"pn:inline-flex",children:r("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",children:[e("path",{stroke:"currentColor",strokeWidth:"2",d:"M 1 3 L 1 13",strokeLinejoin:"round",strokeLinecap:"round"}),e("path",{stroke:"currentColor",strokeWidth:"2",d:"M 1 8 L 15 8",strokeLinejoin:"round",strokeLinecap:"round"})]})}),square:e("span",{"aria-hidden":"true",className:"pn:inline-flex",children:r("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",children:[e("path",{stroke:"currentColor",strokeWidth:"2",d:"M 1 4 L 9 4 L 9 12 L 1 12 Z",fill:"currentColor",strokeLinejoin:"round",strokeLinecap:"round"}),e("path",{stroke:"currentColor",strokeWidth:"2",d:"M 1 8 L 15 8",strokeLinejoin:"round",strokeLinecap:"round"})]})}),circle:e("span",{"aria-hidden":"true",className:"pn:inline-flex",children:r("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",children:[e("circle",{cx:"4",cy:"8",r:"4",fill:"currentColor"}),e("path",{stroke:"currentColor",strokeWidth:"2",d:"M 1 8 L 15 8",strokeLinejoin:"round",strokeLinecap:"round"})]})})},b=({type:r,active:t,onClick:n,flipped:i})=>{const s=y[r];return e(o,{variant:"ghost",size:"icon-sm",onClick:n,className:m(t&&"pn:bg-muted"),children:i?e("span",{style:{transform:"scaleX(-1)",display:"inline-flex"},children:s}):s})};export const BasicHead=n(({elements:t,store:n,property:i})=>{const s="endHead"===i,m=y[t[0][i]],u=s?e("span",{style:{transform:"scaleX(-1)",display:"inline-flex"},children:m}):m,g=e=>{n.history.transaction(()=>{t.forEach(r=>{r.set({[i]:e})})})},L=j("startHead"===i?"toolbar.lineStartHead":"toolbar.lineEndHead");return r(a,{children:[r(c,{children:[e(h,{render:e(d,{render:e(o,{variant:"ghost",size:"icon-sm","aria-label":L,children:u})})}),e(p,{children:L})]}),r(l,{className:"pn:w-[150px] pn:p-2.5",align:"start",children:[e("div",{className:"pn:flex pn:items-center pn:justify-between",children:["","arrow","triangle"].map(r=>e(b,{type:r,active:t[0][i]===r,onClick:()=>{g(r)},flipped:s},r))}),e("div",{className:"pn:flex pn:items-center pn:justify-between",children:["bar","square","circle"].map(r=>e(b,{type:r,active:t[0][i]===r,onClick:()=>{g(r)},flipped:s},r))})]})]})});export const LineHeads=n(({elements:n,store:i})=>r(t,{children:[e(BasicHead,{elements:n,store:i,property:"startHead"}),e(BasicHead,{elements:n,store:i,property:"endHead"})]}));const H={LineSettings,LineColor,LineHeads,LineAnimations:g};export const LineToolbar=n(({store:r,components:t})=>{const n=r.selectedElements[0],i=["LineColor","LineSettings","LineHeads",C.animationsEnabled&&"LineAnimations"].filter(e=>Boolean(e)),o=w({type:"line",usedItems:i,components:t});return e(f,{items:o,itemRender:i=>{const o=t[i]||H[i];return e(o,{element:n,store:r,elements:r.selectedElements},i)}})});export default LineToolbar;

package/toolbar/opacity-picker.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{observer as i}from"mobx-react-lite";import{PolotnoIcon as r}from"../icons/registry.js";import{Button as s}from"../primitives/button.js";import{Slider as o}from"../primitives/slider.js";import{NumericInput as a}from"../primitives/numeric-input.js";import{Popover as n,PopoverContent as l,PopoverTrigger as p}from"../primitives/popover.js";import{Tooltip as m,TooltipContent as c,TooltipTrigger as d}from"../primitives/tooltip.js";import{t as h}from"../utils/l10n.js";export const OpacityPicker=i(({store:i})=>{var u,v;const x=i.selectedShapes.length>0,b=e=>{e=Math.max(0,Math.min(e,100)),i.selectedShapes.forEach(t=>{t.set({opacity:e/100})})},f=Math.round(100*(null!==(v=null===(u=i.selectedShapes[0])||void 0===u?void 0:u.opacity)&&void 0!==v?v:0));return t(n,{children:[t(m,{children:[e(d,{asChild:!0,children:e(p,{asChild:!0,children:e(s,{variant:"ghost",size:"icon-sm",disabled:!x,"aria-label":h("toolbar.transparency"),children:e(r,{name:"toolbar.opacity",className:"pn:size-4"})})})}),x&&e(c,{side:"bottom",children:h("toolbar.transparency")})]}),t(l,{side:"bottom",className:"pn:w-auto pn:px-5 pn:py-2.5",children:[e("div",{className:"pn:mb-2 pn:text-center",children:h("toolbar.transparency")}),t("div",{className:"pn:flex pn:items-center pn:gap-4",children:[e(o,{style:{width:150},value:[f],onValueChange:e=>b(e[0]),min:0,max:100,step:1}),e(a,{value:f,onValueChange:e=>b(e),min:0,max:100,style:{width:"64px"},onFocus:e=>e.currentTarget.select()})]})]})]})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{observer as r}from"mobx-react-lite";import{PolotnoIcon as i}from"../icons/registry.js";import{Button as o}from"../primitives/button.js";import{Slider as s}from"../primitives/slider.js";import{NumericInput as a}from"../primitives/numeric-input.js";import{firstSliderValue as n}from"../lib/utils.js";import{Popover as m,PopoverContent as p,PopoverTrigger as l}from"../primitives/popover.js";import{Tooltip as c,TooltipContent as d,TooltipTrigger as h}from"../primitives/tooltip.js";import{t as u}from"../utils/l10n.js";export const OpacityPicker=r(({store:r})=>{var v,b;const f=r.selectedShapes.length>0,x=e=>{e=Math.max(0,Math.min(e,100)),r.selectedShapes.forEach(t=>{t.set({opacity:e/100})})},j=Math.round(100*(null!==(b=null===(v=r.selectedShapes[0])||void 0===v?void 0:v.opacity)&&void 0!==b?b:0));return t(m,{children:[t(c,{children:[e(h,{render:e(l,{render:e(o,{variant:"ghost",size:"icon-sm",disabled:!f,"aria-label":u("toolbar.transparency"),children:e(i,{name:"toolbar.opacity",className:"pn:size-4"})})})}),f&&e(d,{side:"bottom",children:u("toolbar.transparency")})]}),t(p,{side:"bottom",className:"pn:w-auto pn:px-5 pn:py-2.5",children:[e("div",{className:"pn:mb-2 pn:text-center",children:u("toolbar.transparency")}),t("div",{className:"pn:flex pn:items-center pn:gap-4",children:[e(s,{style:{width:150},value:[j],onValueChange:e=>x(n(e)),min:0,max:100,step:1}),e(a,{value:j,onValueChange:e=>x(e),min:0,max:100,style:{width:"64px"},onFocus:e=>e.currentTarget.select()})]})]})]})});

package/toolbar/page-toolbar.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{observer as r}from"mobx-react-lite";import{PolotnoIcon as i}from"../icons/registry.js";import{Button as o}from"../primitives/button.js";import{NumberInput as a}from"../primitives/numeric-input.js";import{Slider as n}from"../primitives/slider.js";export{NumberInput}from"../primitives/numeric-input.js";import{Popover as s,PopoverContent as m,PopoverTrigger as p}from"../primitives/popover.js";import{FieldRow as l}from"../primitives/field-row.js";import{ColorPicker as c}from"./color-picker.js";import{ElementContainer as u,extendToolbar as d}from"./element-container.js";import{t as g}from"../utils/l10n.js";import{flags as v}from"../utils/flags.js";const f=r(({store:t})=>t.activePage?e(c,{value:t.activePage.background||"white",onChange:e=>{t.activePage.set({background:e})},store:t,gradientEnabled:!0}):null),h={PageDuration:r(({store:r})=>{if(!r.activePage){return null}const{duration:c}=r.activePage;return t(s,{children:[e(p,{asChild:!0,children:t(o,{variant:"ghost",size:"sm",children:[e(i,{name:"toolbar.duration",className:"pn:mr-1 pn:size-4"}),(r.activePage.duration/1e3).toFixed(1),"s"]})}),t(m,{side:"bottom",className:"pn:w-[230px] pn:p-[15px]",children:[e(l,{label:g("toolbar.duration"),className:"pn:py-[5px]",children:e("div",{children:e(a,{value:c/1e3,onValueChange:e=>{r.activePage.set({duration:1e3*e})},style:{width:"50px"},min:0})})}),e(n,{value:[Math.min(c/1e3,50)],onValueChange:e=>{r.activePage.set({duration:1e3*e[0]})},min:0,max:50,step:.1})]})]})}),PageBackground:f};export const PageToolbar=r(({store:t,components:r})=>{const i=["PageBackground",v.animationsEnabled&&"PageDuration"],o=d({type:"page",usedItems:i,components:r});return e(u,{items:o,itemRender:i=>{const o=r[i]||h[i];return e(o,{store:t},i)}})});export default PageToolbar;
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{observer as r}from"mobx-react-lite";import{PolotnoIcon as i}from"../icons/registry.js";import{Button as o}from"../primitives/button.js";import{NumberInput as a}from"../primitives/numeric-input.js";import{Slider as n}from"../primitives/slider.js";import{firstSliderValue as s}from"../lib/utils.js";export{NumberInput}from"../primitives/numeric-input.js";import{Popover as m,PopoverContent as p,PopoverTrigger as l}from"../primitives/popover.js";import{FieldRow as c}from"../primitives/field-row.js";import{ColorPicker as u}from"./color-picker.js";import{ElementContainer as d,extendToolbar as g}from"./element-container.js";import{t as v}from"../utils/l10n.js";import{flags as f}from"../utils/flags.js";const j=r(({store:t})=>t.activePage?e(u,{value:t.activePage.background||"white",onChange:e=>{t.activePage.set({background:e})},store:t,gradientEnabled:!0}):null),b={PageDuration:r(({store:r})=>{if(!r.activePage){return null}const{duration:u}=r.activePage;return t(m,{children:[e(l,{render:t(o,{variant:"ghost",size:"sm",children:[e(i,{name:"toolbar.duration",className:"pn:mr-1 pn:size-4"}),(r.activePage.duration/1e3).toFixed(1),"s"]})}),t(p,{side:"bottom",className:"pn:w-[230px] pn:p-[15px]",children:[e(c,{label:v("toolbar.duration"),className:"pn:py-[5px]",children:e("div",{children:e(a,{value:u/1e3,onValueChange:e=>{r.activePage.set({duration:1e3*e})},style:{width:"50px"},min:0})})}),e(n,{value:[Math.min(u/1e3,50)],onValueChange:e=>{const t=s(e);r.activePage.set({duration:1e3*t})},min:0,max:50,step:.1})]})]})}),PageBackground:j};export const PageToolbar=r(({store:t,components:r})=>{const i=["PageBackground",f.animationsEnabled&&"PageDuration"],o=g({type:"page",usedItems:i,components:r});return e(d,{items:o,itemRender:i=>{const o=r[i]||b[i];return e(o,{store:t},i)}})});export default PageToolbar;