polotno 3.0.0-beta.49 → 3.0.0

package/toolbar/position-picker.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import{observer as o}from"mobx-react-lite";import{PolotnoIcon as i}from"../icons/registry.js";import{Button as l}from"../primitives/button.js";import{Popover as a,PopoverContent as s,PopoverTrigger as r}from"../primitives/popover.js";import{getClientRect as c}from"../utils/math.js";import{t as d}from"../utils/l10n.js";import{alignBottom as p,alignCenter as m,alignLeft as h,alignMiddle as x,alignRight as v,alignTop as g}from"../utils/alignment.js";const b=e=>{if("group"!==e.type){return c(e)}let t=1/0,n=1/0,o=-1/0,i=-1/0;return e.children.forEach(e=>{const l=b(e);t=Math.min(t,l.x),n=Math.min(n,l.y),o=Math.max(o,l.x+l.width),i=Math.max(i,l.y+l.height)}),{x:t,y:n,width:o-t,height:i-n}},u=(e,t,n)=>{if("group"!==e.type){const o=c(e),i=t-o.x,l=n-o.y;e.set({x:e.x+i,y:e.y+l})}else{const o=t-b(e).x,i=n-b(e).y;e.children.forEach(e=>{const t=b(e);u(e,t.x+o,t.y+i)})}},f=({icon:n,text:o,disabled:i,onClick:l})=>t("button",{type:"button",disabled:i,onClick:l,className:"pn:flex pn:w-full pn:appearance-none pn:cursor-pointer pn:items-center pn:gap-2 pn:rounded-none pn:border-0 pn:bg-transparent pn:px-[7px] pn:py-[5px] pn:text-left pn:text-sm pn:outline-hidden pn:hover:bg-accent pn:hover:text-accent-foreground pn:disabled:pointer-events-none pn:disabled:cursor-default pn:disabled:opacity-50 pn:[&_svg]:size-4 pn:[&_svg]:shrink-0",children:[n,e("span",{children:o})]}),E=({title:t})=>e("div",{className:"pn:-mx-1 pn:mt-1 pn:border-t pn:border-border pn:pt-2 pn:pb-1 pn:px-2 pn:text-xs pn:font-semibold pn:text-foreground pn:first:mt-0 pn:first:border-t-0 pn:first:pt-1",children:t});export const PositionPicker=o(({store:o})=>{const c=o.selectedElements.length>0,y=o.selectedElements.every(e=>e.draggable),w=y&&o.selectedElements.length>1;return t(a,{children:[e(r,{asChild:!0,disabled:!c,children:t(l,{variant:"ghost",size:"sm",className:"polotno-position",disabled:!c,"aria-label":d("toolbar.position"),children:[e(i,{name:"layering.menu",className:"pn:size-4"}),d("toolbar.position")]})}),t(s,{className:"pn:w-[280px] pn:p-1 pn:gap-0",align:"start",children:[e(E,{title:d("toolbar.layering")}),t("div",{className:"pn:flex",children:[t("div",{className:"pn:w-1/2",children:[e(f,{icon:e(i,{name:"layering.up"}),text:d("toolbar.up"),disabled:!o.selectedElements.some(e=>{var t;return null===(t=e.parent)||void 0===t?void 0:t.canMoveElementsUp([e.id])}),onClick:()=>{o.selectedElements.forEach(e=>e.moveUp())}}),e(f,{icon:e(i,{name:"layering.top"}),text:d("toolbar.toForward"),disabled:!o.selectedElements.some(e=>{var t;return null===(t=e.parent)||void 0===t?void 0:t.canMoveElementsTop([e.id])}),onClick:()=>{o.selectedElements.forEach(e=>e.moveTop())}})]}),t("div",{className:"pn:w-1/2",children:[e(f,{icon:e(i,{name:"layering.down"}),text:d("toolbar.down"),disabled:!o.selectedElements.some(e=>{var t;return null===(t=e.parent)||void 0===t?void 0:t.canMoveElementsDown([e.id])}),onClick:()=>{o.selectedElements.forEach(e=>e.moveDown())}}),e(f,{icon:e(i,{name:"layering.bottom"}),text:d("toolbar.toBottom"),disabled:!o.selectedElements.some(e=>{var t;return null===(t=e.parent)||void 0===t?void 0:t.canMoveElementsBottom([e.id])}),onClick:()=>{o.selectedElements.forEach(e=>e.moveBottom())}})]})]}),y&&t(n,{children:[e(E,{title:d("toolbar.position")}),t("div",{className:"pn:flex",children:[t("div",{className:"pn:w-1/2",children:[e(f,{icon:e(i,{name:"position.alignLeft"}),text:d("toolbar.alignLeft"),onClick:()=>{h(o)}}),e(f,{icon:e(i,{name:"position.alignCenter"}),text:d("toolbar.alignCenter"),onClick:()=>{m(o)}}),e(f,{icon:e(i,{name:"position.alignRight"}),text:d("toolbar.alignRight"),onClick:()=>{v(o)}})]}),t("div",{className:"pn:w-1/2",children:[e(f,{icon:e(i,{name:"position.alignTop"}),text:d("toolbar.alignTop"),onClick:()=>{g(o)}}),e(f,{icon:e(i,{name:"position.alignMiddle"}),text:d("toolbar.alignMiddle"),onClick:()=>{x(o)}}),e(f,{icon:e(i,{name:"position.alignBottom"}),text:d("toolbar.alignBottom"),onClick:()=>{p(o)}})]})]})]}),w&&t(n,{children:[e(E,{title:d("toolbar.spaceEvenly")}),t("div",{className:"pn:flex",children:[e("div",{className:"pn:w-1/2",children:e(f,{icon:e(i,{name:"position.distributeVertical"}),text:d("toolbar.verticalDistribution"),onClick:()=>{var e;let t=null===(e=o.activePage)||void 0===e?void 0:e.computedHeight,n=0,i=0;o.selectedElements.forEach(e=>{const o=b(e);t=Math.min(t,o.y),n=Math.max(n,o.y+o.height),i+=o.height});const l=(n-t-i)/(o.selectedElements.length-1),a=o.selectedElements.slice().sort((e,t)=>{const n=b(e),o=b(t);return n.y-o.y});let s=0;a.forEach(e=>{const n=b(e);u(e,n.x,t+s),s+=n.height+l})}})}),e("div",{className:"pn:w-1/2",children:e(f,{icon:e(i,{name:"position.distributeHorizontal"}),text:d("toolbar.horizontalDistribution"),onClick:()=>{var e;let t=null===(e=o.activePage)||void 0===e?void 0:e.computedWidth,n=0,i=0;o.selectedElements.forEach(e=>{const o=b(e);t=Math.min(t,o.x),n=Math.max(n,o.x+o.width),i+=o.width});const l=(n-t-i)/(o.selectedElements.length-1),a=o.selectedElements.slice().sort((e,t)=>{const n=b(e),o=b(t);return n.x-o.x});let s=0;a.forEach(e=>{const n=b(e);u(e,t+s,n.y),s+=n.width+l})}})})]})]})]})]})});
+import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import{observer as o}from"mobx-react-lite";import{PolotnoIcon as i}from"../icons/registry.js";import{Button as l}from"../primitives/button.js";import{Popover as a,PopoverContent as r,PopoverTrigger as s}from"../primitives/popover.js";import{getClientRect as c}from"../utils/math.js";import{t as d}from"../utils/l10n.js";import{alignBottom as p,alignCenter as m,alignLeft as h,alignMiddle as x,alignRight as v,alignTop as g}from"../utils/alignment.js";const b=e=>{if("group"!==e.type){return c(e)}let t=1/0,n=1/0,o=-1/0,i=-1/0;return e.children.forEach(e=>{const l=b(e);t=Math.min(t,l.x),n=Math.min(n,l.y),o=Math.max(o,l.x+l.width),i=Math.max(i,l.y+l.height)}),{x:t,y:n,width:o-t,height:i-n}},u=(e,t,n)=>{if("group"!==e.type){const o=c(e),i=t-o.x,l=n-o.y;e.set({x:e.x+i,y:e.y+l})}else{const o=t-b(e).x,i=n-b(e).y;e.children.forEach(e=>{const t=b(e);u(e,t.x+o,t.y+i)})}},f=({icon:n,text:o,disabled:i,onClick:l})=>t("button",{type:"button",disabled:i,onClick:l,className:"pn:flex pn:w-full pn:appearance-none pn:cursor-pointer pn:items-center pn:gap-2 pn:rounded-none pn:border-0 pn:bg-transparent pn:px-[7px] pn:py-[5px] pn:text-left pn:text-sm pn:outline-hidden pn:hover:bg-accent pn:hover:text-accent-foreground pn:disabled:pointer-events-none pn:disabled:cursor-default pn:disabled:opacity-50 pn:[&_svg]:size-4 pn:[&_svg]:shrink-0",children:[n,e("span",{children:o})]}),E=({title:t})=>e("div",{className:"pn:-mx-1 pn:mt-1 pn:border-t pn:border-border pn:pt-2 pn:pb-1 pn:px-2 pn:text-xs pn:font-semibold pn:text-foreground pn:first:mt-0 pn:first:border-t-0 pn:first:pt-1",children:t});export const PositionPicker=o(({store:o})=>{const c=o.selectedElements.length>0,y=o.selectedElements.every(e=>e.draggable),w=y&&o.selectedElements.length>1;return t(a,{children:[e(s,{disabled:!c,render:t(l,{variant:"ghost",size:"sm",className:"polotno-position",disabled:!c,"aria-label":d("toolbar.position"),children:[e(i,{name:"layering.menu",className:"pn:size-4"}),d("toolbar.position")]})}),t(r,{className:"pn:w-[280px] pn:p-1 pn:gap-0",align:"start",children:[e(E,{title:d("toolbar.layering")}),t("div",{className:"pn:flex",children:[t("div",{className:"pn:w-1/2",children:[e(f,{icon:e(i,{name:"layering.up"}),text:d("toolbar.up"),disabled:!o.selectedElements.some(e=>{var t;return null===(t=e.parent)||void 0===t?void 0:t.canMoveElementsUp([e.id])}),onClick:()=>{o.selectedElements.forEach(e=>e.moveUp())}}),e(f,{icon:e(i,{name:"layering.top"}),text:d("toolbar.toForward"),disabled:!o.selectedElements.some(e=>{var t;return null===(t=e.parent)||void 0===t?void 0:t.canMoveElementsTop([e.id])}),onClick:()=>{o.selectedElements.forEach(e=>e.moveTop())}})]}),t("div",{className:"pn:w-1/2",children:[e(f,{icon:e(i,{name:"layering.down"}),text:d("toolbar.down"),disabled:!o.selectedElements.some(e=>{var t;return null===(t=e.parent)||void 0===t?void 0:t.canMoveElementsDown([e.id])}),onClick:()=>{o.selectedElements.forEach(e=>e.moveDown())}}),e(f,{icon:e(i,{name:"layering.bottom"}),text:d("toolbar.toBottom"),disabled:!o.selectedElements.some(e=>{var t;return null===(t=e.parent)||void 0===t?void 0:t.canMoveElementsBottom([e.id])}),onClick:()=>{o.selectedElements.forEach(e=>e.moveBottom())}})]})]}),y&&t(n,{children:[e(E,{title:d("toolbar.position")}),t("div",{className:"pn:flex",children:[t("div",{className:"pn:w-1/2",children:[e(f,{icon:e(i,{name:"position.alignLeft"}),text:d("toolbar.alignLeft"),onClick:()=>{h(o)}}),e(f,{icon:e(i,{name:"position.alignCenter"}),text:d("toolbar.alignCenter"),onClick:()=>{m(o)}}),e(f,{icon:e(i,{name:"position.alignRight"}),text:d("toolbar.alignRight"),onClick:()=>{v(o)}})]}),t("div",{className:"pn:w-1/2",children:[e(f,{icon:e(i,{name:"position.alignTop"}),text:d("toolbar.alignTop"),onClick:()=>{g(o)}}),e(f,{icon:e(i,{name:"position.alignMiddle"}),text:d("toolbar.alignMiddle"),onClick:()=>{x(o)}}),e(f,{icon:e(i,{name:"position.alignBottom"}),text:d("toolbar.alignBottom"),onClick:()=>{p(o)}})]})]})]}),w&&t(n,{children:[e(E,{title:d("toolbar.spaceEvenly")}),t("div",{className:"pn:flex",children:[e("div",{className:"pn:w-1/2",children:e(f,{icon:e(i,{name:"position.distributeVertical"}),text:d("toolbar.verticalDistribution"),onClick:()=>{var e;let t=null===(e=o.activePage)||void 0===e?void 0:e.computedHeight,n=0,i=0;o.selectedElements.forEach(e=>{const o=b(e);t=Math.min(t,o.y),n=Math.max(n,o.y+o.height),i+=o.height});const l=(n-t-i)/(o.selectedElements.length-1),a=o.selectedElements.slice().sort((e,t)=>{const n=b(e),o=b(t);return n.y-o.y});let r=0;a.forEach(e=>{const n=b(e);u(e,n.x,t+r),r+=n.height+l})}})}),e("div",{className:"pn:w-1/2",children:e(f,{icon:e(i,{name:"position.distributeHorizontal"}),text:d("toolbar.horizontalDistribution"),onClick:()=>{var e;let t=null===(e=o.activePage)||void 0===e?void 0:e.computedWidth,n=0,i=0;o.selectedElements.forEach(e=>{const o=b(e);t=Math.min(t,o.x),n=Math.max(n,o.x+o.width),i+=o.width});const l=(n-t-i)/(o.selectedElements.length-1),a=o.selectedElements.slice().sort((e,t)=>{const n=b(e),o=b(t);return n.x-o.x});let r=0;a.forEach(e=>{const n=b(e);u(e,t+r,n.y),r+=n.width+l})}})})]})]})]})]})});

package/toolbar/sketch.js

@@ -1 +1 @@
-import{jsx as e,jsxs as n}from"react/jsx-runtime";import t from"react";import{PolotnoIcon as r}from"../icons/registry.js";import o from"konva";import{Button as s}from"../primitives/button.js";import{Input as a}from"../primitives/input.js";import{NumericInput as i}from"../primitives/numeric-input.js";import{cn as l}from"../lib/utils.js";import{useEvent as p}from"../hooks/use-event.js";import*as c from"../utils/react-color/helpers/color.js";import*as u from"../utils/react-color/helpers/saturation.js";import*as d from"../utils/react-color/helpers/hue.js";import*as g from"../utils/react-color/helpers/alpha.js";import{get as h}from"../utils/react-color/helpers/checkboard.js";const m=h("transparent","rgba(0,0,0,.08)",8)||void 0,f=m?`url(${m})`:void 0;function v({hsl:r,hsv:o,onChange:s}){const a=t.useRef(null),i=p(e=>{a.current&&s(u.calculateChange(e,r,a.current))}),l=p(()=>{window.removeEventListener("mousemove",i),window.removeEventListener("mouseup",l)});return t.useEffect(()=>()=>{window.removeEventListener("mousemove",i),window.removeEventListener("mouseup",l)},[i,l]),n("div",{ref:a,className:"pn:relative pn:aspect-[5/3] pn:w-full pn:cursor-crosshair pn:touch-none pn:overflow-hidden pn:rounded-sm pn:ring-1 pn:ring-inset pn:ring-black/15 pn:dark:ring-white/15",style:{background:`hsl(${r.h}, 100%, 50%)`},onMouseDown:e=>{i(e),window.addEventListener("mousemove",i),window.addEventListener("mouseup",l)},onTouchStart:e=>i(e),onTouchMove:e=>i(e),children:[e("div",{className:"pn:absolute pn:inset-0",style:{background:"linear-gradient(to right, #fff, rgba(255,255,255,0))"},children:e("div",{className:"pn:absolute pn:inset-0",style:{background:"linear-gradient(to top, #000, rgba(0,0,0,0))"}})}),e("div",{className:"pn:pointer-events-none pn:absolute pn:size-3 pn:-translate-x-1/2 pn:-translate-y-1/2 pn:rounded-full pn:border-2 pn:border-white pn:shadow-[0_0_0_1px_rgba(0,0,0,0.3)]",style:{left:100*o.s+"%",top:-100*o.v+100+"%"}})]})}function b({ariaLabel:r,style:o,pointerLeft:s,calc:a,onChange:i,children:l}){const c=t.useRef(null),u=p(e=>{if(c.current){const n=a(e,c.current);n&&i(n)}}),d=p(()=>{window.removeEventListener("mousemove",u),window.removeEventListener("mouseup",d)});return t.useEffect(()=>()=>{window.removeEventListener("mousemove",u),window.removeEventListener("mouseup",d)},[u,d]),n("div",{ref:c,role:"slider","aria-label":r,className:"pn:relative pn:h-2.5 pn:w-full pn:cursor-pointer pn:touch-none pn:rounded-full pn:ring-1 pn:ring-inset pn:ring-black/15 pn:dark:ring-white/15",style:o,onMouseDown:e=>{u(e),window.addEventListener("mousemove",u),window.addEventListener("mouseup",d)},onTouchStart:e=>u(e),onTouchMove:e=>u(e),children:[l,e("div",{className:"pn:pointer-events-none pn:absolute pn:top-1/2 pn:size-3.5 pn:-translate-x-1/2 pn:-translate-y-1/2 pn:rounded-full pn:border-2 pn:border-white pn:bg-transparent pn:shadow-[0_0_0_1px_rgba(0,0,0,0.4)]",style:{left:100*Math.min(1,Math.max(0,s))+"%"}})]})}function w({hsl:n,onChange:t}){return e(b,{ariaLabel:"Hue",style:{background:"linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)"},pointerLeft:n.h/360,calc:(e,t)=>{const r=d.calculateChange(e,"horizontal",n,t);return r&&r.h>=360&&(r.h=359),r},onChange:t})}function x({hsl:n,rgb:t,onChange:r}){const o=`linear-gradient(to right, rgba(${t.r},${t.g},${t.b},0), rgba(${t.r},${t.g},${t.b},1))`;return e(b,{ariaLabel:"Alpha",style:{background:f},pointerLeft:t.a,calc:(e,r)=>g.calculateChange(e,n,"horizontal",t.a,r),onChange:r,children:e("div",{className:"pn:absolute pn:inset-0 pn:rounded-full",style:{background:o}})})}function C({hex:n,onChange:r}){const[o,s]=t.useState(n.replace("#",""));return t.useEffect(()=>{s(n.replace("#",""))},[n]),e(a,{value:o,spellCheck:!1,onChange:e=>{const n=e.target.value.replace("#","");s(n),c.isValidHex("#"+n)&&r({hex:"#"+n,source:"hex"})},className:"pn:h-7 pn:w-full pn:text-center pn:uppercase",style:{fontSize:11,paddingLeft:4,paddingRight:4}})}function k({children:n}){return e("span",{className:"pn:text-[11px] pn:text-muted-foreground",children:n})}function y({rgb:t,hsl:r,hex:o,disableAlpha:s,onChange:a}){const l={stepper:!1,style:{fontSize:11,paddingLeft:3,paddingRight:3}};return n("div",{className:"pn:grid pn:items-end pn:gap-1.5 pn:pt-3",style:{gridTemplateColumns:"2fr "+(s?"1fr 1fr 1fr":"1fr 1fr 1fr 1fr")},children:[n("div",{className:"pn:flex pn:min-w-0 pn:flex-col pn:items-center pn:gap-1",children:[e(C,{hex:o,onChange:a}),e(k,{children:"Hex"})]}),["r","g","b"].map(r=>n("div",{className:"pn:flex pn:min-w-0 pn:flex-col pn:items-center pn:gap-1",children:[e(i,Object.assign({value:t[r],min:0,max:255,onValueChange:e=>a(Object.assign(Object.assign({},t),{[r]:e,source:"rgb"})),className:"pn:h-7 pn:w-full pn:text-center"},l)),e(k,{children:r.toUpperCase()})]},r)),!s&&n("div",{className:"pn:flex pn:min-w-0 pn:flex-col pn:items-center pn:gap-1",children:[e(i,Object.assign({value:Math.round(100*t.a),min:0,max:100,onValueChange:e=>a({h:r.h,s:r.s,l:r.l,a:Math.min(100,Math.max(0,e))/100,source:"rgb"}),className:"pn:h-7 pn:w-full pn:text-center"},l)),e(k,{children:"A"})]})]})}function E({colors:n,onChange:t}){return n&&n.length?e("div",{className:"pn:mt-3 pn:grid pn:grid-cols-8 pn:gap-1.5 pn:border-t pn:border-border pn:pt-3",children:n.map(n=>{const r="string"==typeof n?{color:n}:n;return e("button",{type:"button",title:r.title||r.color,"aria-label":r.title||r.color,onMouseDown:e=>e.preventDefault(),onClick:()=>t({hex:r.color,source:"hex"}),className:"pn:aspect-square pn:w-full pn:cursor-pointer pn:rounded-sm pn:ring-1 pn:ring-inset pn:ring-black/15 pn:dark:ring-white/15",style:{background:r.color}},r.color+(r.title||""))})}):null}function L({rgb:n}){return e("div",{className:"pn:relative pn:size-7 pn:shrink-0 pn:self-center pn:overflow-hidden pn:rounded-sm",style:{background:f},children:e("div",{className:"pn:absolute pn:inset-0 pn:rounded-sm pn:ring-1 pn:ring-inset pn:ring-black/20 pn:dark:ring-white/20",style:{background:`rgba(${n.r},${n.g},${n.b},${n.a})`}})})}export const Sketch=({color:a,onChange:i,presetColors:u=[],disableAlpha:d=!1,className:g=""})=>{const[h,m]=t.useState(()=>c.toState(a,0)),f=t.useRef(h.oldHue);t.useEffect(()=>{const e=c.toState(a,f.current);f.current=e.oldHue,m(n=>n.rgb.r===e.rgb.r&&n.rgb.g===e.rgb.g&&n.rgb.b===e.rgb.b&&Math.round(255*n.rgb.a)===Math.round(255*e.rgb.a)?n:e)},[a]);const{rgb:b,hsl:C,hsv:k,hex:N}=h,j=p((e,n)=>{var t;if(!c.simpleCheckForValidColor(e)){return}const r=c.toState(e,null!==(t=e.h)&&void 0!==t?t:f.current);f.current=r.oldHue,m(r),i(r,n)}),[M,S]=t.useState(!1),$=t.useRef(null),R=p(()=>{$.current&&($.current.destroy(),$.current=null)}),z=p(e=>{var n;if(M){const t=null===(n=$.current)||void 0===n?void 0:n.fill();t&&j(o.Util.colorToRGBA(t)),R(),function(e){var n;let t=e.target;for(;t;){if(null===(n=t.classList)||void 0===n?void 0:n.contains("color-picker-button")){return!0}t=t.parentElement}return!1}(e)||S(!1),e.stopPropagation(),e.stopImmediatePropagation()}}),D=p(e=>{if(!M){return}const n=o.stages.find(n=>{var t;const r=null===(t=n.getContent().parentElement)||void 0===t?void 0:t.parentElement;if(!r){return!1}const o=r.getBoundingClientRect();return o.left<e.clientX&&o.left+o.width>e.clientX&&o.top<e.clientY&&o.top+o.height>e.clientY});if(!n){return void R()}const t=n.getContent().getBoundingClientRect(),r=e.clientX-t.left,s=e.clientY-t.top,a=n.children[0],i=a.getNativeCanvasElement(),l=a.getCanvas().getPixelRatio(),{data:p}=i.getContext("2d").getImageData(r*l,s*l,1,1),c=n.findOne(".line-guides");c.findOne(".picker")||($.current&&$.current.destroy(),$.current=new o.Circle({name:"picker",radius:14,stroke:"black",strokeWidth:1}),c.add($.current)),$.current.setAbsolutePosition({x:r-15,y:s-15}),$.current.fill("rgb("+p[0]+","+p[1]+","+p[2]+")")});return t.useEffect(()=>(window.addEventListener("mousemove",D),window.addEventListener("mousedown",z,!0),window.addEventListener("touchstart",z,!0),()=>{window.removeEventListener("mousemove",D),window.removeEventListener("mousedown",z,!0),window.removeEventListener("touchstart",z,!0),R()}),[D,z,R]),t.useEffect(()=>{M||R()},[M,R]),t.useEffect(()=>(M&&(document.body.style.cursor="crosshair"),()=>{document.body.style.cursor="default"}),[M]),n("div",{className:l("polotno-color-picker pn:flex pn:w-full pn:flex-col",g),onMouseDown:e=>{"INPUT"!==e.target.tagName&&e.preventDefault()},children:[e(v,{hsl:C,hsv:k,onChange:j}),n("div",{className:"pn:flex pn:items-stretch pn:gap-2 pn:pt-3",children:[n("div",{className:"pn:flex pn:flex-1 pn:flex-col pn:justify-center pn:gap-2",style:{paddingLeft:8,paddingRight:8},children:[e(w,{hsl:C,onChange:j}),!d&&e(x,{hsl:C,rgb:b,onChange:j})]}),e(L,{rgb:b}),e(s,{variant:"ghost",size:"icon-sm",className:l("color-picker-button pn:size-7 pn:self-center",M&&"pn:bg-muted"),onClickCapture:e=>{S(e=>!e),e.stopPropagation()},children:e(r,{name:"action.eyeDropper",className:"pn:size-4"})})]}),e(y,{rgb:b,hsl:C,hex:N,disableAlpha:d,onChange:j}),e(E,{colors:u,onChange:j})]})};export default Sketch;
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import t from"react";import{PolotnoIcon as r}from"../icons/registry.js";import o from"konva";import{Button as s}from"../primitives/button.js";import{Input as a}from"../primitives/input.js";import{NumericInput as i}from"../primitives/numeric-input.js";import{cn as l}from"../lib/utils.js";import{useEvent as p}from"../hooks/use-event.js";import*as c from"../utils/react-color/helpers/color.js";import*as u from"../utils/react-color/helpers/saturation.js";import*as d from"../utils/react-color/helpers/hue.js";import*as g from"../utils/react-color/helpers/alpha.js";import{get as h}from"../utils/react-color/helpers/checkboard.js";const m=h("transparent","rgba(0,0,0,.08)",8)||void 0,f=m?`url(${m})`:void 0;function v({hsl:r,hsv:o,onChange:s}){const a=t.useRef(null),i=p(e=>{a.current&&s(u.calculateChange(e,r,a.current))}),l=p(()=>{window.removeEventListener("mousemove",i),window.removeEventListener("mouseup",l)});return t.useEffect(()=>()=>{window.removeEventListener("mousemove",i),window.removeEventListener("mouseup",l)},[i,l]),n("div",{ref:a,className:"pn:relative pn:aspect-[5/3] pn:w-full pn:cursor-crosshair pn:touch-none pn:overflow-hidden pn:rounded-sm pn:ring-1 pn:ring-inset pn:ring-black/15 pn:dark:ring-white/15",style:{background:`hsl(${r.h}, 100%, 50%)`},onMouseDown:e=>{i(e),window.addEventListener("mousemove",i),window.addEventListener("mouseup",l)},onTouchStart:e=>i(e),onTouchMove:e=>i(e),children:[e("div",{className:"pn:absolute pn:inset-0",style:{background:"linear-gradient(to right, #fff, rgba(255,255,255,0))"},children:e("div",{className:"pn:absolute pn:inset-0",style:{background:"linear-gradient(to top, #000, rgba(0,0,0,0))"}})}),e("div",{className:"pn:pointer-events-none pn:absolute pn:size-3 pn:-translate-x-1/2 pn:-translate-y-1/2 pn:rounded-full pn:border-2 pn:border-white pn:shadow-[0_0_0_1px_rgba(0,0,0,0.3)]",style:{left:100*o.s+"%",top:-100*o.v+100+"%"}})]})}function b({ariaLabel:r,style:o,pointerLeft:s,calc:a,onChange:i,children:l}){const c=t.useRef(null),u=p(e=>{if(c.current){const n=a(e,c.current);n&&i(n)}}),d=p(()=>{window.removeEventListener("mousemove",u),window.removeEventListener("mouseup",d)});return t.useEffect(()=>()=>{window.removeEventListener("mousemove",u),window.removeEventListener("mouseup",d)},[u,d]),n("div",{ref:c,role:"slider","aria-label":r,className:"pn:relative pn:h-2.5 pn:w-full pn:cursor-pointer pn:touch-none pn:rounded-full pn:ring-1 pn:ring-inset pn:ring-black/15 pn:dark:ring-white/15",style:o,onMouseDown:e=>{u(e),window.addEventListener("mousemove",u),window.addEventListener("mouseup",d)},onTouchStart:e=>u(e),onTouchMove:e=>u(e),children:[l,e("div",{className:"pn:pointer-events-none pn:absolute pn:top-1/2 pn:size-3.5 pn:-translate-x-1/2 pn:-translate-y-1/2 pn:rounded-full pn:border-2 pn:border-white pn:bg-transparent pn:shadow-[0_0_0_1px_rgba(0,0,0,0.4)]",style:{left:100*Math.min(1,Math.max(0,s))+"%"}})]})}function w({hsl:n,onChange:t}){return e(b,{ariaLabel:"Hue",style:{background:"linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)"},pointerLeft:n.h/360,calc:(e,t)=>{const r=d.calculateChange(e,"horizontal",n,t);return r&&r.h>=360&&(r.h=359),r},onChange:t})}function x({hsl:n,rgb:t,onChange:r}){const o=`linear-gradient(to right, rgba(${t.r},${t.g},${t.b},0), rgba(${t.r},${t.g},${t.b},1))`;return e(b,{ariaLabel:"Alpha",style:{background:f},pointerLeft:t.a,calc:(e,r)=>g.calculateChange(e,n,"horizontal",t.a,r),onChange:r,children:e("div",{className:"pn:absolute pn:inset-0 pn:rounded-full",style:{background:o}})})}function C({hex:n,onChange:r}){const[o,s]=t.useState(n.replace("#",""));return t.useEffect(()=>{s(n.replace("#",""))},[n]),e(a,{value:o,spellCheck:!1,onChange:e=>{const n=e.target.value.replace("#","");s(n),c.isValidHex("#"+n)&&r({hex:"#"+n,source:"hex"})},className:"pn:h-7 pn:w-full pn:text-center pn:uppercase",style:{fontSize:11,paddingLeft:4,paddingRight:4}})}function k({children:n}){return e("span",{className:"pn:text-[11px] pn:text-muted-foreground",children:n})}function y({rgb:t,hsl:r,hex:o,disableAlpha:s,onChange:a}){const l={stepper:!1,style:{fontSize:11,paddingLeft:3,paddingRight:3}};return n("div",{className:"pn:grid pn:items-end pn:gap-1.5 pn:pt-3",style:{gridTemplateColumns:"2fr "+(s?"1fr 1fr 1fr":"1fr 1fr 1fr 1fr")},children:[n("div",{className:"pn:flex pn:min-w-0 pn:flex-col pn:items-center pn:gap-1",children:[e(C,{hex:o,onChange:a}),e(k,{children:"Hex"})]}),["r","g","b"].map(r=>n("div",{className:"pn:flex pn:min-w-0 pn:flex-col pn:items-center pn:gap-1",children:[e(i,Object.assign({value:t[r],min:0,max:255,onValueChange:e=>a(Object.assign(Object.assign({},t),{[r]:e,source:"rgb"})),className:"pn:h-7 pn:w-full pn:text-center"},l)),e(k,{children:r.toUpperCase()})]},r)),!s&&n("div",{className:"pn:flex pn:min-w-0 pn:flex-col pn:items-center pn:gap-1",children:[e(i,Object.assign({value:Math.round(100*t.a),min:0,max:100,onValueChange:e=>a({h:r.h,s:r.s,l:r.l,a:Math.min(100,Math.max(0,e))/100,source:"rgb"}),className:"pn:h-7 pn:w-full pn:text-center"},l)),e(k,{children:"A"})]})]})}function E({colors:n,onChange:t}){return n&&n.length?e("div",{className:"pn:mt-3 pn:grid pn:grid-cols-8 pn:gap-1.5 pn:border-t pn:border-border pn:pt-3",children:n.map(n=>{const r="string"==typeof n?{color:n}:n;return e("button",{type:"button",title:r.title||r.color,"aria-label":r.title||r.color,onMouseDown:e=>e.preventDefault(),onClick:()=>t({hex:r.color,source:"hex"}),className:"pn:aspect-square pn:w-full pn:cursor-pointer pn:rounded-sm pn:ring-1 pn:ring-inset pn:ring-black/15 pn:dark:ring-white/15",style:{background:r.color}},r.color+(r.title||""))})}):null}function L({rgb:n}){return e("div",{className:"pn:relative pn:size-7 pn:shrink-0 pn:self-center pn:overflow-hidden pn:rounded-sm",style:{background:f},children:e("div",{className:"pn:absolute pn:inset-0 pn:rounded-sm pn:ring-1 pn:ring-inset pn:ring-black/20 pn:dark:ring-white/20",style:{background:`rgba(${n.r},${n.g},${n.b},${n.a})`}})})}export const Sketch=({color:a,onChange:i,presetColors:u=[],disableAlpha:d=!1,className:g=""})=>{const[h,m]=t.useState(()=>c.toState(a,0)),f=t.useRef(h.oldHue);t.useEffect(()=>{const e=c.toState(a,f.current);f.current=e.oldHue,m(n=>n.rgb.r===e.rgb.r&&n.rgb.g===e.rgb.g&&n.rgb.b===e.rgb.b&&Math.round(255*n.rgb.a)===Math.round(255*e.rgb.a)?n:e)},[a]);const{rgb:b,hsl:C,hsv:k,hex:N}=h,j=p((e,n)=>{var t;if(!c.simpleCheckForValidColor(e)){return}const r=c.toState(e,null!==(t=e.h)&&void 0!==t?t:f.current);f.current=r.oldHue,m(r),i(r,n)}),M=p((e,n)=>{j(0===b.a?Object.assign(Object.assign({},e),{a:1}):e,n)}),[S,$]=t.useState(!1),R=t.useRef(null),z=p(()=>{R.current&&(R.current.destroy(),R.current=null)}),D=p(e=>{var n;if(S){const t=null===(n=R.current)||void 0===n?void 0:n.fill();t&&j(o.Util.colorToRGBA(t)),z(),function(e){var n;let t=e.target;for(;t;){if(null===(n=t.classList)||void 0===n?void 0:n.contains("color-picker-button")){return!0}t=t.parentElement}return!1}(e)||$(!1),e.stopPropagation(),e.stopImmediatePropagation()}}),O=p(e=>{if(!S){return}const n=o.stages.find(n=>{var t;const r=null===(t=n.getContent().parentElement)||void 0===t?void 0:t.parentElement;if(!r){return!1}const o=r.getBoundingClientRect();return o.left<e.clientX&&o.left+o.width>e.clientX&&o.top<e.clientY&&o.top+o.height>e.clientY});if(!n){return void z()}const t=n.getContent().getBoundingClientRect(),r=e.clientX-t.left,s=e.clientY-t.top,a=n.children[0],i=a.getNativeCanvasElement(),l=a.getCanvas().getPixelRatio(),{data:p}=i.getContext("2d").getImageData(r*l,s*l,1,1),c=n.findOne(".line-guides");c.findOne(".picker")||(R.current&&R.current.destroy(),R.current=new o.Circle({name:"picker",radius:14,stroke:"black",strokeWidth:1}),c.add(R.current)),R.current.setAbsolutePosition({x:r-15,y:s-15}),R.current.fill("rgb("+p[0]+","+p[1]+","+p[2]+")")});return t.useEffect(()=>(window.addEventListener("mousemove",O),window.addEventListener("mousedown",D,!0),window.addEventListener("touchstart",D,!0),()=>{window.removeEventListener("mousemove",O),window.removeEventListener("mousedown",D,!0),window.removeEventListener("touchstart",D,!0),z()}),[O,D,z]),t.useEffect(()=>{S||z()},[S,z]),t.useEffect(()=>(S&&(document.body.style.cursor="crosshair"),()=>{document.body.style.cursor="default"}),[S]),n("div",{className:l("polotno-color-picker pn:flex pn:w-full pn:flex-col",g),onMouseDown:e=>{"INPUT"!==e.target.tagName&&e.preventDefault()},children:[e(v,{hsl:C,hsv:k,onChange:M}),n("div",{className:"pn:flex pn:items-stretch pn:gap-2 pn:pt-3",children:[n("div",{className:"pn:flex pn:flex-1 pn:flex-col pn:justify-center pn:gap-2",style:{paddingLeft:8,paddingRight:8},children:[e(w,{hsl:C,onChange:M}),!d&&e(x,{hsl:C,rgb:b,onChange:j})]}),e(L,{rgb:b}),e(s,{variant:"ghost",size:"icon-sm",className:l("color-picker-button pn:size-7 pn:self-center",S&&"pn:bg-muted"),onClickCapture:e=>{$(e=>!e),e.stopPropagation()},children:e(r,{name:"action.eyeDropper",className:"pn:size-4"})})]}),e(y,{rgb:b,hsl:C,hex:N,disableAlpha:d,onChange:j}),e(E,{colors:u,onChange:j})]})};export default Sketch;

package/toolbar/svg-toolbar.js

@@ -1 +1 @@
-import{jsx as e,Fragment as o}from"react/jsx-runtime";import{observer as r}from"mobx-react-lite";import*as t from"../utils/svg.js";import{ElementContainer as s,extendToolbar as n}from"./element-container.js";import i from"./filters-picker.js";import m from"./color-picker.js";import l from"./flip-button.js";import{AnimationsPicker as a}from"./animations-picker.js";import{flags as c}from"../utils/flags.js";const p=(e,o)=>Array.from(e.keys()).find(e=>t.sameColors(e,o)),g=(e,o)=>{const r=p(e,o);return e.get(r||"")||o},f={SvgFlip:l,SvgFilters:i,SvgColors:r(({element:r,store:s})=>{const n=t.useSvgColors(r.src);return e(o,{children:!r.maskSrc&&n.slice(0,5).map(o=>e(m,{value:g(r.colorsReplace,o),style:{marginLeft:"5px"},onChange:e=>{const t=p(r.colorsReplace,o)||o;r.replaceColor(t,e)},store:s,gradientEnabled:!0},o))})}),SvgAnimations:a};export const SvgToolbar=r(({store:o,hideSvgEffects:r,components:t})=>{const i=o.selectedElements,m=["SvgFlip",!r&&"SvgFilters","SvgColors",c.animationsEnabled&&"SvgAnimations"].filter(e=>!!e),l=n({type:"svg",usedItems:m,components:t});return e(s,{items:l,itemRender:r=>{const s=t[r]||f[r];return e(s,{elements:i,element:i[0],store:o},r)}})});export default SvgToolbar;
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{observer as o}from"mobx-react-lite";import*as t from"../utils/svg.js";import{t as n}from"../utils/l10n.js";import{isGradient as s,parseColor as l}from"../utils/gradient.js";import{ElementContainer as i,extendToolbar as a}from"./element-container.js";import{Popover as p,PopoverContent as c,PopoverTrigger as m}from"../primitives/popover.js";import{Button as d}from"../primitives/button.js";import g from"./filters-picker.js";import f,{ColoredBox as u}from"./color-picker.js";import v from"./flip-button.js";import{AnimationsPicker as x}from"./animations-picker.js";import{flags as b}from"../utils/flags.js";const h=(e,r)=>Array.from(e.keys()).find(e=>t.sameColors(e,r)),j=(e,r)=>{const o=h(e,r);return e.get(o||"")||r},S=e=>e.colorsReplace,k=(e,r,o)=>{const t=h(S(e),r)||r;e.replaceColor(t,o)},C=o(({element:o,color:t,store:l})=>{const i=j(S(o),t);return r("div",{className:"pn-svg-color-row pn:flex pn:items-center pn:gap-2",children:[e(f,{value:i,onChange:e=>k(o,t,e),store:l,gradientEnabled:!0}),e("span",{className:"pn:truncate pn:text-xs pn:text-muted-foreground",children:s(i)?n("toolbar.colorPicker.linear"):i})]})}),N={SvgFlip:v,SvgFilters:g,SvgColors:o(({element:o,store:i})=>{const a=t.useSvgColors(o.src),g=S(o);if(o.maskSrc||0===a.length){return null}if(1===a.length){const r=a[0];return e(f,{value:j(g,r),style:{marginLeft:"5px"},onChange:e=>k(o,r,e),store:i,gradientEnabled:!0})}const v=(e=>{const r=e.slice(0,8),o=r.length||1;return`linear-gradient(90deg, ${r.map((e,r)=>`${e} ${r/o*100}% ${(r+1)/o*100}%`).join(", ")})`})(a.map(e=>(e=>{var r;if(s(e)){const{stops:o}=l(e);return(null===(r=o[0])||void 0===r?void 0:r.color)||e}return e})(j(g,e)))),x=g.size>0;return r(p,{children:[e(m,{nativeButton:!1,render:e(u,{background:v,"aria-label":n("toolbar.colorPicker.colors"),style:{marginLeft:"5px"}})}),r(c,{className:"pn:w-[220px] pn:p-2",align:"start",children:[r("div",{className:"pn:mb-2 pn:flex pn:items-center pn:justify-between",children:[e("span",{className:"pn:text-xs pn:font-medium",children:n("toolbar.colorPicker.colors")}),x&&e(d,{variant:"ghost",size:"sm","data-pn-reset-colors":"",onClick:()=>o.resetColors(),children:n("toolbar.colorPicker.resetColors")})]}),r("div",{className:"pn:mb-2 pn:flex pn:items-center pn:gap-2 pn:border-b pn:pb-2",children:[e(f,{value:j(g,a[0]),onChange:e=>a.forEach(r=>k(o,r,e)),store:i,gradientEnabled:!0}),e("span",{className:"pn:text-xs",children:n("toolbar.colorPicker.recolorAll")})]}),e("div",{className:"pn:flex pn:max-h-[280px] pn:flex-col pn:gap-2 pn:overflow-y-auto",children:a.map(r=>e(C,{element:o,color:r,store:i},r))})]})]})}),SvgAnimations:x};export const SvgToolbar=o(({store:r,hideSvgEffects:o,components:t})=>{const n=r.selectedElements,s=["SvgFlip",!o&&"SvgFilters","SvgColors",b.animationsEnabled&&"SvgAnimations"].filter(e=>!!e),l=a({type:"svg",usedItems:s,components:t});return e(i,{items:l,itemRender:o=>{const s=t[o]||N[o];return e(s,{elements:n,element:n[0],store:r},o)}})});export default SvgToolbar;

package/toolbar/table-toolbar.js

@@ -1 +1 @@
-import{jsx as e,Fragment as t,jsxs as n}from"react/jsx-runtime";import l from"react";import{observer as o}from"mobx-react-lite";import{PolotnoIcon as r}from"../icons/registry.js";import{Button as i}from"../primitives/button.js";import{SliderField as s}from"../primitives/slider-field.js";import{Popover as a,PopoverContent as c,PopoverTrigger as d}from"../primitives/popover.js";import{Tooltip as p,TooltipContent as m,TooltipTrigger as h}from"../primitives/tooltip.js";import{cn as b}from"../lib/utils.js";import{ColorPicker as u}from"./color-picker.js";import{NumberInput as y}from"./filters-picker.js";import{ElementContainer as x,extendToolbar as g}from"./element-container.js";import{cycleNext as f,StrokeWidthIcon as v}from"./toolbar-shared.js";import{TextFontFamily as C,TextFontSize as k,TextFill as w,TextFontVariant as j,TextSpacing as O,VERTICAL_ALIGN_OPTIONS as B,VERTICAL_ALIGN_ICONS as T}from"./text-toolbar.js";import{AnimationsPicker as N}from"./animations-picker.js";import{flags as S}from"../utils/flags.js";import{t as z}from"../utils/l10n.js";const E={stroke:"currentColor",strokeWidth:1,strokeOpacity:.25},R={stroke:"currentColor",strokeWidth:2},A=()=>n(t,{children:[e("rect",Object.assign({x:"2",y:"2",width:"16",height:"16",fill:"none"},E)),e("line",Object.assign({x1:"10",y1:"2",x2:"10",y2:"18"},E)),e("line",Object.assign({x1:"2",y1:"10",x2:"18",y2:"10"},E))]}),W=({children:t})=>n("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:[e(A,{}),t]}),F=[{key:"all",labelKey:"toolbar.borderModeAll",icon:()=>n("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:[e("rect",Object.assign({x:"2",y:"2",width:"16",height:"16",fill:"none"},R)),e("line",Object.assign({x1:"10",y1:"2",x2:"10",y2:"18"},R)),e("line",Object.assign({x1:"2",y1:"10",x2:"18",y2:"10"},R))]})},{key:"outer",labelKey:"toolbar.borderModeOuter",icon:()=>e(W,{children:e("rect",Object.assign({x:"2",y:"2",width:"16",height:"16",fill:"none"},R))})},{key:"inner",labelKey:"toolbar.borderModeInner",icon:()=>n(W,{children:[e("line",Object.assign({x1:"10",y1:"2",x2:"10",y2:"18"},R)),e("line",Object.assign({x1:"2",y1:"10",x2:"18",y2:"10"},R))]})},{key:"topOnly",labelKey:"toolbar.borderModeTopOnly",icon:()=>e(W,{children:e("line",Object.assign({x1:"2",y1:"2",x2:"18",y2:"2"},R))})},{key:"innerHorizontal",labelKey:"toolbar.borderModeInnerHorizontal",icon:()=>e(W,{children:e("line",Object.assign({x1:"2",y1:"10",x2:"18",y2:"10"},R))})},{key:"bottomOnly",labelKey:"toolbar.borderModeBottomOnly",icon:()=>e(W,{children:e("line",Object.assign({x1:"2",y1:"18",x2:"18",y2:"18"},R))})},{key:"leftOnly",labelKey:"toolbar.borderModeLeftOnly",icon:()=>e(W,{children:e("line",Object.assign({x1:"2",y1:"2",x2:"2",y2:"18"},R))})},{key:"innerVertical",labelKey:"toolbar.borderModeInnerVertical",icon:()=>e(W,{children:e("line",Object.assign({x1:"10",y1:"2",x2:"10",y2:"18"},R))})},{key:"rightOnly",labelKey:"toolbar.borderModeRightOnly",icon:()=>e(W,{children:e("line",Object.assign({x1:"18",y1:"2",x2:"18",y2:"18"},R))})}];export const TableBorderSettings=o(({elements:t,store:o})=>{const y=t[0],x="tablecell"===y.type,g=x?o.selectedElements[0]:y,[f,C]=l.useState("all");let k,w;if(x){const e=g.getFocusedCellRange();k=e?e.maxRow-e.minRow+1:1,w=e?e.maxCol-e.minCol+1:1}else{k=g.rows,w=g.cols}const j=k>1,O=w>1,B=e=>"innerHorizontal"===e?!j:("innerVertical"===e||"inner"===e&&!j)&&!O;l.useEffect(()=>{B(f)&&C("all")},[f,j,O]);const T={all:"top",outer:"top",topOnly:"top",topBottom:"top",bottomOnly:"bottom",innerHorizontal:"bottom",inner:"bottom",leftOnly:"left",rightOnly:"right",innerVertical:"right"}[f],N=x?y:"bottomOnly"===f?g.getCell(g.rows-1,0):"rightOnly"===f?g.getCell(0,g.cols-1):g.getCell(0,0),S=(null==N?void 0:N.getEffectiveBorder)?N.getEffectiveBorder(T):{color:g.borderColor,width:g.borderWidth,style:g.borderStyle},E=S.color,R=S.width,A=S.style,W=(e,n={})=>{var l,r;const i=R<=0||"none"===A,s=null!==(l=n.style)&&void 0!==l?l:i?"solid":A,a=void 0!==n.width?n.width:i?1:R,c={color:null!==(r=n.color)&&void 0!==r?r:E,width:a,style:s};o.history.transaction(()=>{g.applyBorderMode(e,c),"all"!==e||x||t.forEach(e=>e.set({borderColor:c.color,borderWidth:c.width,borderStyle:c.style}))})},M=e=>{W(f,{style:e})};return n(a,{children:[n(p,{children:[e(h,{asChild:!0,children:e(d,{asChild:!0,children:e(i,{variant:"ghost",size:"icon-sm","aria-label":z("toolbar.tableBorderSettings"),children:e(v,{})})})}),e(m,{children:z("toolbar.tableBorderSettings")})]}),e(c,{className:"pn:w-auto pn:p-3",align:"start",children:n("div",{className:"pn:flex pn:gap-3",children:[e("div",{className:"pn:grid pn:grid-cols-[repeat(3,32px)] pn:auto-rows-[32px] pn:gap-1",children:F.map(({key:t,labelKey:l,icon:o})=>{const r=B(t);return n(p,{children:[e(h,{asChild:!0,children:e(i,{variant:"outline",size:"sm",disabled:r,className:b("pn:size-8 pn:p-0",!r&&f===t&&"pn:bg-muted"),onClick:()=>{C(t)},"aria-label":z(l),children:e(o,{})})}),e(m,{children:z(l)})]},t)})}),e("div",{className:"pn:w-px pn:bg-border"}),n("div",{className:"pn:flex pn:w-[170px] pn:flex-col pn:gap-2",children:[n("div",{className:"pn:flex pn:items-center pn:justify-between",children:[e("span",{className:"pn:text-xs",children:z("toolbar.tableBorderColor")}),e(u,{value:E,onChange:e=>{W(f,{color:e})},store:o})]}),e(s,{label:z("toolbar.tableBorderWidth"),value:R,onChange:e=>{W(f,{width:e})},min:0,max:20}),n("div",{className:"pn:flex pn:justify-between pn:gap-1",children:[e(i,{variant:"outline",size:"sm",onClick:()=>M("none"),className:b("pn:flex-1","none"===A&&"pn:bg-muted"),children:e(r,{name:"action.none",className:"pn:size-4"})}),e(i,{variant:"outline",size:"sm",onClick:()=>M("solid"),className:b("pn:flex-1","solid"===A&&"pn:bg-muted"),children:e("svg",{width:"20",height:"14",viewBox:"0 0 20 14",children:e("line",{x2:"20",y1:"7",y2:"7",stroke:"currentColor",strokeWidth:"2"})})}),e(i,{variant:"outline",size:"sm",onClick:()=>M("dashed"),className:b("pn:flex-1","dashed"===A&&"pn:bg-muted"),children:e("svg",{width:"20",height:"14",viewBox:"0 0 20 14",children:e("line",{x2:"20",y1:"7",y2:"7",stroke:"currentColor",strokeDasharray:"4 2",strokeWidth:"2"})})}),e(i,{variant:"outline",size:"sm",onClick:()=>M("dotted"),className:b("pn:flex-1","dotted"===A&&"pn:bg-muted"),children:e("svg",{width:"20",height:"14",viewBox:"0 0 20 14",children:e("line",{x2:"20",y1:"7",y2:"7",stroke:"currentColor",strokeDasharray:"2 2",strokeWidth:"2"})})})]})]})]})})]})});const M=()=>n("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:[e("rect",{x:"1",y:"1",width:"14",height:"14",rx:"1",stroke:"currentColor",strokeWidth:"1.5",fill:"none"}),e("line",{x1:"5.5",y1:"1",x2:"5.5",y2:"15",stroke:"currentColor",strokeWidth:"1"}),e("line",{x1:"10.5",y1:"1",x2:"10.5",y2:"15",stroke:"currentColor",strokeWidth:"1"}),e("line",{x1:"1",y1:"5.5",x2:"15",y2:"5.5",stroke:"currentColor",strokeWidth:"1"}),e("line",{x1:"1",y1:"10.5",x2:"15",y2:"10.5",stroke:"currentColor",strokeWidth:"1"})]});export const TableStructureMenu=o(({element:l,store:o})=>{const r=l.focusedCells[0],i=null==r?void 0:r.row,s=null==r?void 0:r.col;return n("div",{className:"pn:p-1",children:[null!=r&&n(t,{children:[e("div",{className:"pn:px-2 pn:py-1 pn:text-xs pn:font-semibold pn:text-muted-foreground",children:z("toolbar.tableRows")}),e("button",{type:"button",className:"pn:flex pn:w-full pn:items-center pn:rounded-sm pn:px-2 pn:py-1.5 pn:text-sm pn:hover:bg-muted",onClick:()=>{o.history.transaction(()=>{l.addRow(i)})},children:z("toolbar.insertRowAbove")}),e("button",{type:"button",className:"pn:flex pn:w-full pn:items-center pn:rounded-sm pn:px-2 pn:py-1.5 pn:text-sm pn:hover:bg-muted",onClick:()=>{o.history.transaction(()=>{l.addRow(i+1)})},children:z("toolbar.insertRowBelow")}),e("button",{type:"button",disabled:l.rows<=1,className:b("pn:flex pn:w-full pn:items-center pn:rounded-sm pn:px-2 pn:py-1.5 pn:text-sm pn:hover:bg-muted",l.rows<=1&&"pn:pointer-events-none pn:opacity-50"),onClick:()=>{o.history.transaction(()=>{l.removeRow(i)})},children:z("toolbar.deleteRow")}),e("div",{className:"pn:my-1 pn:border-t pn:border-border"}),e("div",{className:"pn:px-2 pn:py-1 pn:text-xs pn:font-semibold pn:text-muted-foreground",children:z("toolbar.tableColumns")}),e("button",{type:"button",className:"pn:flex pn:w-full pn:items-center pn:rounded-sm pn:px-2 pn:py-1.5 pn:text-sm pn:hover:bg-muted",onClick:()=>{o.history.transaction(()=>{l.addColumn(s)})},children:z("toolbar.insertColumnLeft")}),e("button",{type:"button",className:"pn:flex pn:w-full pn:items-center pn:rounded-sm pn:px-2 pn:py-1.5 pn:text-sm pn:hover:bg-muted",onClick:()=>{o.history.transaction(()=>{l.addColumn(s+1)})},children:z("toolbar.insertColumnRight")}),e("button",{type:"button",disabled:l.cols<=1,className:b("pn:flex pn:w-full pn:items-center pn:rounded-sm pn:px-2 pn:py-1.5 pn:text-sm pn:hover:bg-muted",l.cols<=1&&"pn:pointer-events-none pn:opacity-50"),onClick:()=>{o.history.transaction(()=>{l.removeColumn(s)})},children:z("toolbar.deleteColumn")}),e("div",{className:"pn:my-1 pn:border-t pn:border-border"})]}),e("button",{type:"button",className:"pn:flex pn:w-full pn:items-center pn:rounded-sm pn:px-2 pn:py-1.5 pn:text-sm pn:hover:bg-muted",onClick:()=>{o.history.transaction(()=>{l.distributeRowsEvenly()})},children:z("toolbar.distributeRowsEvenly")}),e("button",{type:"button",className:"pn:flex pn:w-full pn:items-center pn:rounded-sm pn:px-2 pn:py-1.5 pn:text-sm pn:hover:bg-muted",onClick:()=>{o.history.transaction(()=>{l.distributeColumnsEvenly()})},children:z("toolbar.distributeColumnsEvenly")})]})});export const TableStructure=o(({elements:t,store:l})=>{const o=t[0];return n(a,{children:[n(p,{children:[e(h,{asChild:!0,children:e(d,{asChild:!0,children:e(i,{variant:"ghost",size:"icon-sm","aria-label":z("toolbar.tableStructure"),children:e(M,{})})})}),e(m,{children:z("toolbar.tableStructure")})]}),e(c,{className:"pn:w-auto pn:p-0",align:"start",children:e(TableStructureMenu,{element:o,store:l})})]})});export const CellPadding=o(({elements:t,store:l})=>n(p,{children:[e(h,{asChild:!0,children:e(y,{value:t[0].cellPadding,onValueChange:e=>l.history.transaction(()=>{t.forEach(t=>t.set({cellPadding:e}))}),style:{width:"64px"},min:0,max:50})}),e(m,{children:z("toolbar.cellPadding")})]}));export const CellBackground=o(({elements:t,store:l})=>n(p,{children:[e(h,{asChild:!0,children:e(u,{value:t[0].cellBackground,style:{marginRight:"5px"},onChange:e=>l.history.transaction(()=>{t.forEach(t=>t.set({cellBackground:e}))}),store:l})}),e(m,{children:z("toolbar.cellBackground")})]}));export const CellVerticalAlign=o(({elements:t,store:l})=>{const o=t[0];return n(p,{children:[e(h,{asChild:!0,children:e(i,{variant:"ghost",size:"icon-sm",onClick:()=>{const e=f(B,o.verticalAlign);l.history.transaction(()=>{t.forEach(t=>t.set({verticalAlign:e}))})},"aria-label":z("toolbar.verticalAlign"),children:T[o.verticalAlign]})}),e(m,{children:z("toolbar.verticalAlign")})]})});const V={TableStructure,TableAnimations:N},K={TableBorderSettings,TextFontFamily:C,TextFontSize:k,TextFill:w,CellBackground,TextFontVariant:j,CellVerticalAlign,TextSpacing:O},H=Object.assign(Object.assign({},V),K);export const TableToolbar=o(({store:t,components:n})=>{const l=t.selectedElements[0],o=l.focusedCells,r=o.length>0,i=["TableBorderSettings","CellBackground","TableStructure",...r?["TextFontFamily","TextFontSize","TextFill","TextFontVariant","CellVerticalAlign","TextSpacing"]:[],S.animationsEnabled&&"TableAnimations"],s=g({type:"table",usedItems:i,components:n});return e(x,{items:s,itemRender:i=>{const s=(null==n?void 0:n[i])||H[i],a=!!K[i];if(a&&!r&&"TableBorderSettings"!==i&&"CellBackground"!==i){return null}let c;return c=a?r?o:"TableBorderSettings"===i?t.selectedElements:l.cells.slice():t.selectedElements,e(s,{element:l,store:t,elements:c},i)}})});export default TableToolbar;
+import{jsx as e,Fragment as t,jsxs as n}from"react/jsx-runtime";import o from"react";import{observer as r}from"mobx-react-lite";import{PolotnoIcon as l}from"../icons/registry.js";import{Button as i}from"../primitives/button.js";import{SliderField as s}from"../primitives/slider-field.js";import{Popover as a,PopoverContent as c,PopoverTrigger as d}from"../primitives/popover.js";import{Tooltip as p,TooltipContent as m,TooltipTrigger as b}from"../primitives/tooltip.js";import{cn as h}from"../lib/utils.js";import{ColorPicker as u}from"./color-picker.js";import{NumberInput as y}from"./filters-picker.js";import{ElementContainer as x,extendToolbar as g}from"./element-container.js";import{cycleNext as f,StrokeWidthIcon as v}from"./toolbar-shared.js";import{TextFontFamily as k,TextFontSize as C,TextFill as w,TextFontVariant as j,TextSpacing as O,VERTICAL_ALIGN_OPTIONS as B,VERTICAL_ALIGN_ICONS as T}from"./text-toolbar.js";import{AnimationsPicker as N}from"./animations-picker.js";import{flags as S}from"../utils/flags.js";import{t as z}from"../utils/l10n.js";const E={stroke:"currentColor",strokeWidth:1,strokeOpacity:.25},R={stroke:"currentColor",strokeWidth:2},A=()=>n(t,{children:[e("rect",Object.assign({x:"2",y:"2",width:"16",height:"16",fill:"none"},E)),e("line",Object.assign({x1:"10",y1:"2",x2:"10",y2:"18"},E)),e("line",Object.assign({x1:"2",y1:"10",x2:"18",y2:"10"},E))]}),W=({children:t})=>n("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:[e(A,{}),t]}),F=[{key:"all",labelKey:"toolbar.borderModeAll",icon:()=>n("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:[e("rect",Object.assign({x:"2",y:"2",width:"16",height:"16",fill:"none"},R)),e("line",Object.assign({x1:"10",y1:"2",x2:"10",y2:"18"},R)),e("line",Object.assign({x1:"2",y1:"10",x2:"18",y2:"10"},R))]})},{key:"outer",labelKey:"toolbar.borderModeOuter",icon:()=>e(W,{children:e("rect",Object.assign({x:"2",y:"2",width:"16",height:"16",fill:"none"},R))})},{key:"inner",labelKey:"toolbar.borderModeInner",icon:()=>n(W,{children:[e("line",Object.assign({x1:"10",y1:"2",x2:"10",y2:"18"},R)),e("line",Object.assign({x1:"2",y1:"10",x2:"18",y2:"10"},R))]})},{key:"topOnly",labelKey:"toolbar.borderModeTopOnly",icon:()=>e(W,{children:e("line",Object.assign({x1:"2",y1:"2",x2:"18",y2:"2"},R))})},{key:"innerHorizontal",labelKey:"toolbar.borderModeInnerHorizontal",icon:()=>e(W,{children:e("line",Object.assign({x1:"2",y1:"10",x2:"18",y2:"10"},R))})},{key:"bottomOnly",labelKey:"toolbar.borderModeBottomOnly",icon:()=>e(W,{children:e("line",Object.assign({x1:"2",y1:"18",x2:"18",y2:"18"},R))})},{key:"leftOnly",labelKey:"toolbar.borderModeLeftOnly",icon:()=>e(W,{children:e("line",Object.assign({x1:"2",y1:"2",x2:"2",y2:"18"},R))})},{key:"innerVertical",labelKey:"toolbar.borderModeInnerVertical",icon:()=>e(W,{children:e("line",Object.assign({x1:"10",y1:"2",x2:"10",y2:"18"},R))})},{key:"rightOnly",labelKey:"toolbar.borderModeRightOnly",icon:()=>e(W,{children:e("line",Object.assign({x1:"18",y1:"2",x2:"18",y2:"18"},R))})}];export const TableBorderSettings=r(({elements:t,store:r})=>{const y=t[0],x="tablecell"===y.type,g=x?r.selectedElements[0]:y,[f,k]=o.useState("all");let C,w;if(x){const e=g.getFocusedCellRange();C=e?e.maxRow-e.minRow+1:1,w=e?e.maxCol-e.minCol+1:1}else{C=g.rows,w=g.cols}const j=C>1,O=w>1,B=e=>"innerHorizontal"===e?!j:("innerVertical"===e||"inner"===e&&!j)&&!O;o.useEffect(()=>{B(f)&&k("all")},[f,j,O]);const T={all:"top",outer:"top",topOnly:"top",topBottom:"top",bottomOnly:"bottom",innerHorizontal:"bottom",inner:"bottom",leftOnly:"left",rightOnly:"right",innerVertical:"right"}[f],N=x?y:"bottomOnly"===f?g.getCell(g.rows-1,0):"rightOnly"===f?g.getCell(0,g.cols-1):g.getCell(0,0),S=(null==N?void 0:N.getEffectiveBorder)?N.getEffectiveBorder(T):{color:g.borderColor,width:g.borderWidth,style:g.borderStyle},E=S.color,R=S.width,A=S.style,W=(e,n={})=>{var o,l;const i=R<=0||"none"===A,s=null!==(o=n.style)&&void 0!==o?o:i?"solid":A,a=void 0!==n.width?n.width:i?1:R,c={color:null!==(l=n.color)&&void 0!==l?l:E,width:a,style:s};r.history.transaction(()=>{g.applyBorderMode(e,c),"all"!==e||x||t.forEach(e=>e.set({borderColor:c.color,borderWidth:c.width,borderStyle:c.style}))})},M=e=>{W(f,{style:e})};return n(a,{children:[n(p,{children:[e(b,{render:e(d,{render:e(i,{variant:"ghost",size:"icon-sm","aria-label":z("toolbar.tableBorderSettings"),children:e(v,{})})})}),e(m,{children:z("toolbar.tableBorderSettings")})]}),e(c,{className:"pn:w-auto pn:p-3",align:"start",children:n("div",{className:"pn:flex pn:gap-3",children:[e("div",{className:"pn:grid pn:grid-cols-[repeat(3,32px)] pn:auto-rows-[32px] pn:gap-1",children:F.map(({key:t,labelKey:o,icon:r})=>{const l=B(t);return n(p,{children:[e(b,{render:e(i,{variant:"outline",size:"sm",disabled:l,className:h("pn:size-8 pn:p-0",!l&&f===t&&"pn:bg-muted"),onClick:()=>{k(t)},"aria-label":z(o),children:e(r,{})})}),e(m,{children:z(o)})]},t)})}),e("div",{className:"pn:w-px pn:bg-border"}),n("div",{className:"pn:flex pn:w-[170px] pn:flex-col pn:gap-2",children:[n("div",{className:"pn:flex pn:items-center pn:justify-between",children:[e("span",{className:"pn:text-xs",children:z("toolbar.tableBorderColor")}),e(u,{value:E,onChange:e=>{W(f,{color:e})},store:r})]}),e(s,{label:z("toolbar.tableBorderWidth"),value:R,onChange:e=>{W(f,{width:e})},min:0,max:20}),n("div",{className:"pn:flex pn:justify-between pn:gap-1",children:[e(i,{variant:"outline",size:"sm",onClick:()=>M("none"),className:h("pn:flex-1","none"===A&&"pn:bg-muted"),children:e(l,{name:"action.none",className:"pn:size-4"})}),e(i,{variant:"outline",size:"sm",onClick:()=>M("solid"),className:h("pn:flex-1","solid"===A&&"pn:bg-muted"),children:e("svg",{width:"20",height:"14",viewBox:"0 0 20 14",children:e("line",{x2:"20",y1:"7",y2:"7",stroke:"currentColor",strokeWidth:"2"})})}),e(i,{variant:"outline",size:"sm",onClick:()=>M("dashed"),className:h("pn:flex-1","dashed"===A&&"pn:bg-muted"),children:e("svg",{width:"20",height:"14",viewBox:"0 0 20 14",children:e("line",{x2:"20",y1:"7",y2:"7",stroke:"currentColor",strokeDasharray:"4 2",strokeWidth:"2"})})}),e(i,{variant:"outline",size:"sm",onClick:()=>M("dotted"),className:h("pn:flex-1","dotted"===A&&"pn:bg-muted"),children:e("svg",{width:"20",height:"14",viewBox:"0 0 20 14",children:e("line",{x2:"20",y1:"7",y2:"7",stroke:"currentColor",strokeDasharray:"2 2",strokeWidth:"2"})})})]})]})]})})]})});const M=()=>n("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:[e("rect",{x:"1",y:"1",width:"14",height:"14",rx:"1",stroke:"currentColor",strokeWidth:"1.5",fill:"none"}),e("line",{x1:"5.5",y1:"1",x2:"5.5",y2:"15",stroke:"currentColor",strokeWidth:"1"}),e("line",{x1:"10.5",y1:"1",x2:"10.5",y2:"15",stroke:"currentColor",strokeWidth:"1"}),e("line",{x1:"1",y1:"5.5",x2:"15",y2:"5.5",stroke:"currentColor",strokeWidth:"1"}),e("line",{x1:"1",y1:"10.5",x2:"15",y2:"10.5",stroke:"currentColor",strokeWidth:"1"})]});export const TableStructureMenu=r(({element:o,store:r})=>{const l=o.focusedCells[0],i=null==l?void 0:l.row,s=null==l?void 0:l.col;return n("div",{className:"pn:p-1",children:[null!=l&&n(t,{children:[e("div",{className:"pn:px-2 pn:py-1 pn:text-xs pn:font-semibold pn:text-muted-foreground",children:z("toolbar.tableRows")}),e("button",{type:"button",className:"pn:flex pn:w-full pn:items-center pn:rounded-sm pn:px-2 pn:py-1.5 pn:text-sm pn:hover:bg-muted",onClick:()=>{r.history.transaction(()=>{o.addRow(i)})},children:z("toolbar.insertRowAbove")}),e("button",{type:"button",className:"pn:flex pn:w-full pn:items-center pn:rounded-sm pn:px-2 pn:py-1.5 pn:text-sm pn:hover:bg-muted",onClick:()=>{r.history.transaction(()=>{o.addRow(i+1)})},children:z("toolbar.insertRowBelow")}),e("button",{type:"button",disabled:o.rows<=1,className:h("pn:flex pn:w-full pn:items-center pn:rounded-sm pn:px-2 pn:py-1.5 pn:text-sm pn:hover:bg-muted",o.rows<=1&&"pn:pointer-events-none pn:opacity-50"),onClick:()=>{r.history.transaction(()=>{o.removeRow(i)})},children:z("toolbar.deleteRow")}),e("div",{className:"pn:my-1 pn:border-t pn:border-border"}),e("div",{className:"pn:px-2 pn:py-1 pn:text-xs pn:font-semibold pn:text-muted-foreground",children:z("toolbar.tableColumns")}),e("button",{type:"button",className:"pn:flex pn:w-full pn:items-center pn:rounded-sm pn:px-2 pn:py-1.5 pn:text-sm pn:hover:bg-muted",onClick:()=>{r.history.transaction(()=>{o.addColumn(s)})},children:z("toolbar.insertColumnLeft")}),e("button",{type:"button",className:"pn:flex pn:w-full pn:items-center pn:rounded-sm pn:px-2 pn:py-1.5 pn:text-sm pn:hover:bg-muted",onClick:()=>{r.history.transaction(()=>{o.addColumn(s+1)})},children:z("toolbar.insertColumnRight")}),e("button",{type:"button",disabled:o.cols<=1,className:h("pn:flex pn:w-full pn:items-center pn:rounded-sm pn:px-2 pn:py-1.5 pn:text-sm pn:hover:bg-muted",o.cols<=1&&"pn:pointer-events-none pn:opacity-50"),onClick:()=>{r.history.transaction(()=>{o.removeColumn(s)})},children:z("toolbar.deleteColumn")}),e("div",{className:"pn:my-1 pn:border-t pn:border-border"})]}),e("button",{type:"button",className:"pn:flex pn:w-full pn:items-center pn:rounded-sm pn:px-2 pn:py-1.5 pn:text-sm pn:hover:bg-muted",onClick:()=>{r.history.transaction(()=>{o.distributeRowsEvenly()})},children:z("toolbar.distributeRowsEvenly")}),e("button",{type:"button",className:"pn:flex pn:w-full pn:items-center pn:rounded-sm pn:px-2 pn:py-1.5 pn:text-sm pn:hover:bg-muted",onClick:()=>{r.history.transaction(()=>{o.distributeColumnsEvenly()})},children:z("toolbar.distributeColumnsEvenly")})]})});export const TableStructure=r(({elements:t,store:o})=>{const r=t[0];return n(a,{children:[n(p,{children:[e(b,{render:e(d,{render:e(i,{variant:"ghost",size:"icon-sm","aria-label":z("toolbar.tableStructure"),children:e(M,{})})})}),e(m,{children:z("toolbar.tableStructure")})]}),e(c,{className:"pn:w-auto pn:p-0",align:"start",children:e(TableStructureMenu,{element:r,store:o})})]})});export const CellPadding=r(({elements:t,store:o})=>n(p,{children:[e(b,{render:e(y,{value:t[0].cellPadding,onValueChange:e=>o.history.transaction(()=>{t.forEach(t=>t.set({cellPadding:e}))}),style:{width:"64px"},min:0,max:50})}),e(m,{children:z("toolbar.cellPadding")})]}));export const CellBackground=r(({elements:t,store:o})=>n(p,{children:[e(b,{render:e(u,{value:t[0].cellBackground,style:{marginRight:"5px"},onChange:e=>o.history.transaction(()=>{t.forEach(t=>t.set({cellBackground:e}))}),store:o})}),e(m,{children:z("toolbar.cellBackground")})]}));export const CellVerticalAlign=r(({elements:t,store:o})=>{const r=t[0];return n(p,{children:[e(b,{render:e(i,{variant:"ghost",size:"icon-sm",onClick:()=>{const e=f(B,r.verticalAlign);o.history.transaction(()=>{t.forEach(t=>t.set({verticalAlign:e}))})},"aria-label":z("toolbar.verticalAlign"),children:T[r.verticalAlign]})}),e(m,{children:z("toolbar.verticalAlign")})]})});const V={TableStructure,TableAnimations:N},K={TableBorderSettings,TextFontFamily:k,TextFontSize:C,TextFill:w,CellBackground,TextFontVariant:j,CellVerticalAlign,TextSpacing:O},H=Object.assign(Object.assign({},V),K);export const TableToolbar=r(({store:t,components:n})=>{const o=t.selectedElements[0],r=o.focusedCells,l=r.length>0,i=["TableBorderSettings","CellBackground","TableStructure",...l?["TextFontFamily","TextFontSize","TextFill","TextFontVariant","CellVerticalAlign","TextSpacing"]:[],S.animationsEnabled&&"TableAnimations"],s=g({type:"table",usedItems:i,components:n});return e(x,{items:s,itemRender:i=>{const s=(null==n?void 0:n[i])||H[i],a=!!K[i];if(a&&!l&&"TableBorderSettings"!==i&&"CellBackground"!==i){return null}let c;return c=a?l?r:"TableBorderSettings"===i?t.selectedElements:o.cells.slice():t.selectedElements,e(s,{element:o,store:t,elements:c},i)}})});export default TableToolbar;

package/toolbar/text-ai-write.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import o from"react";import{observer as r}from"mobx-react-lite";import{PolotnoIcon as i}from"../icons/registry.js";import{Button as a}from"../primitives/button.js";import{Spinner as l}from"../primitives/spinner.js";import{Textarea as s}from"../primitives/textarea.js";import{Popover as c,PopoverContent as d,PopoverTrigger as p}from"../primitives/popover.js";import{Dialog as m,DialogContent as u,DialogFooter as x,DialogHeader as b,DialogTitle as h}from"../primitives/dialog.js";import{cn as f}from"../lib/utils.js";import{t as g}from"../utils/l10n.js";import{URLS as v}from"../utils/api.js";const y=async({text:e="",command:t,tone:n})=>{try{const o=await fetch(v.aiText(),{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({text:e,command:t,tone:n})});if(!o.ok){const e=await o.text();throw console.error(e),new Error("Failed to rewrite text")}return(await o.json()).response}catch(o){return console.error(o),e}},T=[{text:"friendly"},{text:"professional"},{text:"humorous"},{text:"formal"}];export const TextAiWrite=r(({store:r})=>{const v=r.selectedElements.length>0,[C,j]=o.useState(!1),[k,w]=o.useState(!1),[E,N]=o.useState(1),[S,P]=o.useState(""),[z,A]=o.useState(""),[I,O]=o.useState(!1),W=o.useRef(null),B=r.selectedElements.some(e=>!e.contentEditable);o.useEffect(()=>{k&&1===E&&setTimeout(()=>{var e;null===(e=W.current)||void 0===e||e.focus()},100)},[k,E]);const F=async(e,t)=>{j(!0);const n=r.selectedElements[0].id,o=r.selectedElements[0].text,i=await y({text:o,command:e,tone:t}),a=r.getElementById(n);a&&(a.set({text:i}),j(!1))},H=async()=>{O(!0);const e=await y({command:"custom",text:r.selectedElements[0].text,tone:S});A(e),O(!1),N(2)};if(B){return null}if(C){return t(a,{variant:"ghost",size:"sm",disabled:!0,children:[e(l,{}),"AI write"]})}const R=f("pn:flex pn:w-full pn:cursor-default pn:items-center pn:rounded-none pn:px-2 pn:py-1.5 pn:text-left pn:text-xs pn:outline-hidden pn:hover:bg-accent pn:hover:text-accent-foreground pn:disabled:pointer-events-none pn:disabled:opacity-50");return t(n,{children:[t(c,{children:[e(p,{asChild:!0,disabled:!v,children:t(a,{variant:"ghost",size:"sm",disabled:!v,children:[e(i,{name:"toolbar.aiWrite",className:"pn:size-4"}),g("toolbar.aiText.aiWrite")]})}),t(d,{className:"pn:w-48 pn:p-1",align:"start",children:[e("button",{type:"button",className:R,onClick:()=>{F("rewrite")},children:g("toolbar.aiText.rewrite")}),e("button",{type:"button",className:R,onClick:()=>{F("shorten")},children:g("toolbar.aiText.shorten")}),e("button",{type:"button",className:R,onClick:()=>{F("continue")},children:g("toolbar.aiText.continue")}),e("button",{type:"button",className:R,onClick:()=>{F("proofread")},children:g("toolbar.aiText.proofread")}),e("div",{className:"pn:px-2 pn:pt-2 pn:pb-1 pn:text-xs pn:font-medium pn:text-muted-foreground",children:g("toolbar.aiText.tones")}),T.map(t=>e("button",{type:"button",className:R,onClick:()=>{F("tone",t.text)},children:g(`toolbar.aiText.${t.text}`)},t.text)),e("div",{className:"pn:my-1 pn:h-px pn:bg-border"}),e("button",{type:"button",className:R,onClick:e=>{e.preventDefault(),e.stopPropagation(),w(!0)},children:g("toolbar.aiText.customPrompt")})]})]}),e(m,{open:k,onOpenChange:e=>{e||I||(w(!1),N(1),P(""),A(""))},children:t(u,{children:[e(b,{children:e(h,{children:g(1===E?"toolbar.aiText.customPrompt":"toolbar.aiText.generatedResult")})}),t(n,1===E?{children:[e(s,{ref:W,value:S,onChange:e=>P(e.target.value),placeholder:g("toolbar.aiText.promptPlaceholder"),disabled:I,style:{minHeight:100}}),t(x,{children:[e(a,{variant:"outline",onClick:()=>w(!1),disabled:I,children:g("toolbar.aiText.cancel")}),t(a,{onClick:H,disabled:!S||I,children:[I&&e(l,{}),g("toolbar.aiText.generate")]})]})]}:{children:[e(s,{value:z,onChange:e=>A(e.target.value),style:{minHeight:100}}),t(x,{children:[e(a,{variant:"outline",onClick:()=>N(1),disabled:I,children:g("toolbar.aiText.back")}),t(a,{variant:"outline",onClick:H,disabled:I,children:[I&&e(l,{}),g("toolbar.aiText.tryAgain")]}),e(a,{onClick:()=>{const e=r.selectedElements[0].id,t=r.getElementById(e);t&&t.set({text:z}),w(!1),N(1),P(""),A("")},disabled:I,children:g("toolbar.aiText.insert")})]})]})]})})]})});
+import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import o from"react";import{observer as r}from"mobx-react-lite";import{PolotnoIcon as i}from"../icons/registry.js";import{Button as a}from"../primitives/button.js";import{Spinner as l}from"../primitives/spinner.js";import{Textarea as s}from"../primitives/textarea.js";import{Popover as c,PopoverContent as d,PopoverTrigger as p}from"../primitives/popover.js";import{Dialog as m,DialogContent as u,DialogFooter as x,DialogHeader as b,DialogTitle as h}from"../primitives/dialog.js";import{cn as f}from"../lib/utils.js";import{t as g}from"../utils/l10n.js";import{URLS as v}from"../utils/api.js";const y=async({text:e="",command:t,tone:n})=>{try{const o=await fetch(v.aiText(),{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({text:e,command:t,tone:n})});if(!o.ok){const e=await o.text();throw console.error(e),new Error("Failed to rewrite text")}return(await o.json()).response}catch(o){return console.error(o),e}},T=[{text:"friendly"},{text:"professional"},{text:"humorous"},{text:"formal"}];export const TextAiWrite=r(({store:r})=>{const v=r.selectedElements.length>0,[C,j]=o.useState(!1),[k,w]=o.useState(!1),[E,N]=o.useState(1),[S,P]=o.useState(""),[z,A]=o.useState(""),[I,O]=o.useState(!1),W=o.useRef(null),B=r.selectedElements.some(e=>!e.contentEditable);o.useEffect(()=>{k&&1===E&&setTimeout(()=>{var e;null===(e=W.current)||void 0===e||e.focus()},100)},[k,E]);const F=async(e,t)=>{j(!0);const n=r.selectedElements[0].id,o=r.selectedElements[0].text,i=await y({text:o,command:e,tone:t}),a=r.getElementById(n);a&&(a.set({text:i}),j(!1))},H=async()=>{O(!0);const e=await y({command:"custom",text:r.selectedElements[0].text,tone:S});A(e),O(!1),N(2)};if(B){return null}if(C){return t(a,{variant:"ghost",size:"sm",disabled:!0,children:[e(l,{}),"AI write"]})}const R=f("pn:flex pn:w-full pn:cursor-default pn:items-center pn:rounded-none pn:px-2 pn:py-1.5 pn:text-left pn:text-xs pn:outline-hidden pn:hover:bg-accent pn:hover:text-accent-foreground pn:disabled:pointer-events-none pn:disabled:opacity-50");return t(n,{children:[t(c,{children:[e(p,{disabled:!v,render:t(a,{variant:"ghost",size:"sm",disabled:!v,children:[e(i,{name:"toolbar.aiWrite",className:"pn:size-4"}),g("toolbar.aiText.aiWrite")]})}),t(d,{className:"pn:w-48 pn:p-1",align:"start",children:[e("button",{type:"button",className:R,onClick:()=>{F("rewrite")},children:g("toolbar.aiText.rewrite")}),e("button",{type:"button",className:R,onClick:()=>{F("shorten")},children:g("toolbar.aiText.shorten")}),e("button",{type:"button",className:R,onClick:()=>{F("continue")},children:g("toolbar.aiText.continue")}),e("button",{type:"button",className:R,onClick:()=>{F("proofread")},children:g("toolbar.aiText.proofread")}),e("div",{className:"pn:px-2 pn:pt-2 pn:pb-1 pn:text-xs pn:font-medium pn:text-muted-foreground",children:g("toolbar.aiText.tones")}),T.map(t=>e("button",{type:"button",className:R,onClick:()=>{F("tone",t.text)},children:g(`toolbar.aiText.${t.text}`)},t.text)),e("div",{className:"pn:my-1 pn:h-px pn:bg-border"}),e("button",{type:"button",className:R,onClick:e=>{e.preventDefault(),e.stopPropagation(),w(!0)},children:g("toolbar.aiText.customPrompt")})]})]}),e(m,{open:k,onOpenChange:e=>{e||I||(w(!1),N(1),P(""),A(""))},children:t(u,{children:[e(b,{children:e(h,{children:g(1===E?"toolbar.aiText.customPrompt":"toolbar.aiText.generatedResult")})}),t(n,1===E?{children:[e(s,{ref:W,value:S,onChange:e=>P(e.target.value),placeholder:g("toolbar.aiText.promptPlaceholder"),disabled:I,style:{minHeight:100}}),t(x,{children:[e(a,{variant:"outline",onClick:()=>w(!1),disabled:I,children:g("toolbar.aiText.cancel")}),t(a,{onClick:H,disabled:!S||I,children:[I&&e(l,{}),g("toolbar.aiText.generate")]})]})]}:{children:[e(s,{value:z,onChange:e=>A(e.target.value),style:{minHeight:100}}),t(x,{children:[e(a,{variant:"outline",onClick:()=>N(1),disabled:I,children:g("toolbar.aiText.back")}),t(a,{variant:"outline",onClick:H,disabled:I,children:[I&&e(l,{}),g("toolbar.aiText.tryAgain")]}),e(a,{onClick:()=>{const e=r.selectedElements[0].id,t=r.getElementById(e);t&&t.set({text:z}),w(!1),N(1),P(""),A("")},disabled:I,children:g("toolbar.aiText.insert")})]})]})]})})]})});

package/toolbar/text-toolbar.d.ts

@@ -9,7 +9,7 @@ type InputProps = {
     elements: Array<TextElementType>;
     store: StoreType;
 };
-export declare const FontMenu: ({ store, fonts, activeFont, activeFontLabel, onFontSelect, mixed, mixedFonts, }: {
+export declare const FontMenu: ({ store, fonts, activeFont, activeFontLabel, onFontSelect, mixed, mixedFonts, open, onOpenChange, }: {
     store: StoreType;
     fonts: string[];
     activeFont: string;
@@ -17,6 +17,8 @@ export declare const FontMenu: ({ store, fonts, activeFont, activeFontLabel, onF
     onFontSelect: (fontFamily: string) => void;
     mixed?: boolean;
     mixedFonts?: string[];
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
 }) => React.JSX.Element;
 export declare const fetcher: (url: string) => Promise<any>;
 export declare const TextFontFamily: (({ elements, store }: InputProps) => React.JSX.Element) & {

package/toolbar/text-toolbar.js

@@ -1 +1 @@
-import{jsx as t,jsxs as e}from"react/jsx-runtime";import n from"react";import{observer as o}from"mobx-react-lite";import{FixedSizeList as i}from"react-window";import r from"swr";import{PolotnoIcon as a}from"../icons/registry.js";import{getFontsList as l,globalFonts as s,isGoogleFontChanged as c}from"../utils/fonts.js";import{getGoogleFontImage as m,getGoogleFontsListAPI as p}from"../utils/api.js";import{t as d}from"../utils/l10n.js";import{flags as h}from"../utils/flags.js";import{Button as f}from"../primitives/button.js";import{NumberInput as u}from"../primitives/numeric-input.js";export{NumberInput}from"../primitives/numeric-input.js";import{InputGroup as x}from"../primitives/input-group.js";import{SliderField as g}from"../primitives/slider-field.js";import{Popover as b,PopoverContent as v,PopoverTrigger as T}from"../primitives/popover.js";import{Tooltip as y,TooltipContent as F,TooltipTrigger as N}from"../primitives/tooltip.js";import{TooltipIconButton as C}from"../primitives/tooltip-icon-button.js";import{Separator as S}from"../primitives/separator.js";import{cn as j}from"../lib/utils.js";import{cycleNext as z}from"./toolbar-shared.js";import{ColorPicker as w}from"./color-picker.js";import E from"./filters-picker.js";import{AnimationsPicker as A}from"./animations-picker.js";import{ElementContainer as D,extendToolbar as k}from"./element-container.js";import{TextAiWrite as I}from"./text-ai-write.js";const M=l(),O=({fontFamily:e,handleClick:o,modifiers:i,store:r,isCustom:a})=>{const[l,s]=n.useState(!a);if(n.useEffect(()=>{l||r.loadFont(e)},[e,l]),"_divider"===e){return t("div",{style:{paddingTop:"10px"},children:t(S,{})})}const c=l?t("img",{src:m(e),alt:e,onError:()=>{s(!1)},className:"pn:h-5 pn:dark:invert"}):e;return t("button",{type:"button",onClick:o,disabled:i.disabled,"data-active":i.active||void 0,className:j("pn:flex pn:w-full pn:items-center pn:rounded-sm pn:px-2 pn:py-1.5 pn:text-left pn:text-sm pn:hover:bg-muted",i.active&&"pn:bg-muted"),style:{fontFamily:'"'+e+'"'},children:c})},L=({onChange:o,defaultValue:i})=>{const r=n.useRef(null);return n.useEffect(()=>{r.current&&r.current.focus()},[]),e(x,{children:[t("span",{className:"pn:flex pn:items-center pn:pl-2 pn:pr-1 pn:text-muted-foreground",children:t(a,{name:"action.search",className:"pn:size-3.5 pn:shrink-0 pn:opacity-50"})}),t("input",{ref:r,"data-slot":"input-group-control",defaultValue:i,onChange:t=>o(t.target.value),className:"pn:h-full pn:w-full pn:flex-1 pn:border-0 pn:bg-transparent pn:px-2 pn:text-xs pn:outline-none pn:placeholder:text-muted-foreground"})]})};export const FontMenu=({store:o,fonts:r,activeFont:l,activeFontLabel:c,onFontSelect:m,mixed:p,mixedFonts:h})=>{const[u,x]=n.useState(""),g=r.filter(t=>(null==t?void 0:t.toLowerCase().indexOf(u.toLowerCase()))>=0);return e(b,{children:[e(y,{children:[t(N,{asChild:!0,children:t(T,{asChild:!0,children:e(f,{variant:"ghost",size:"sm",className:"pn:mr-[5px] pn:gap-1 pn:overflow-hidden pn:whitespace-nowrap",style:{fontFamily:p?void 0:'"'+l+'"',fontStyle:p?"italic":void 0,color:p?"#5c7080":void 0},"aria-label":d("toolbar.fontFamily"),children:[t("span",{className:"pn:truncate",children:p?d("toolbar.fontFamilyMixed"):c}),t(a,{name:"ui.chevronDown",className:"pn:size-3 pn:shrink-0 pn:opacity-50"})]})})}),t(F,{side:"bottom",children:p&&h&&h.length>0?`${d("toolbar.fontsInSelection")}: ${h.join(", ")}`:d("toolbar.fontFamily")})]}),t(v,{className:"pn:w-[230px] pn:p-2",align:"start",children:e("div",{children:[t(L,{onChange:t=>x(t),defaultValue:u}),t("div",{style:{paddingTop:"5px"},children:t(i,{height:Math.min(400,30*g.length)+10,width:210,itemCount:g.length,itemSize:30,children:({index:e,style:n})=>{const i=g[e];return t("div",{style:n,children:t(O,{fontFamily:i,modifiers:{active:l===i},handleClick:()=>m(i),store:o,isCustom:o.fonts.find(t=>t.fontFamily===i)||s.find(t=>t.fontFamily===i)},i)})}})})]})})]})};const V={};export const fetcher=t=>V[t]?Promise.resolve(V[t]):fetch(t).then(t=>t.json()).then(e=>(V[t]=e,e));export const TextFontFamily=o(({elements:e,store:o})=>{const{data:i,mutate:a}=r(p(),fetcher,{isPaused:()=>c(),fallbackData:[]});n.useEffect(()=>{a()},[c()]);const l=o.fonts.concat(s).map(t=>t.fontFamily).concat((null==i?void 0:i.length)&&!c()?i:M);let m=e[0].fontFamily;m.length>15&&(m=m.slice(0,15)+"...");const d=[];o.find(t=>("text"===t.type&&d.push(t.fontFamily),!1));const h=[...new Set(d.concat("_divider").concat(l))];return t(FontMenu,{fonts:h,activeFont:e[0].fontFamily,activeFontLabel:m,store:o,onFontSelect:t=>{o.history.transaction(()=>{e.forEach(e=>{e.set({fontFamily:t})})})}})});export const TextFontSize=o(({elements:o,store:i})=>{const[r,a]=n.useState(!1),[l,s]=n.useState(!1);return e(y,{open:!l&&r,onOpenChange:t=>{l||a(t)},children:[t(N,{asChild:!0,children:t(u,{"aria-label":d("toolbar.fontSize"),onFocus:()=>s(!0),onBlur:()=>s(!1),onValueChange:t=>{i.history.transaction(()=>{o.forEach(e=>{e.set({fontSize:t,width:Math.max(t,e.width)})})})},value:Math.round(o[0].fontSize),style:{width:"50px"},min:5,max:4*i.height})}),t(F,{side:"bottom",children:d("toolbar.fontSize")})]})});export const ALIGN_OPTIONS=["left","center","right","justify"];export const VERTICAL_ALIGN_OPTIONS=["top","middle","bottom"];export const VERTICAL_ALIGN_ICONS={top:t(a,{name:"text.valignTop",className:"pn:size-4"}),middle:t(a,{name:"text.valignMiddle",className:"pn:size-4"}),bottom:t(a,{name:"text.valignBottom",className:"pn:size-4"})};export const TextFontVariant=o(({elements:n,store:o})=>{const i=n[0],r="bold"===i.fontWeight||"700"===i.fontWeight,l="italic"===i.fontStyle,s=i.textDecoration.indexOf("underline")>=0,c=i.textDecoration.indexOf("line-through")>=0;return e("div",{className:"pn:flex pn:items-center pn:gap-0.5",children:[e(y,{children:[t(N,{asChild:!0,children:t(f,{variant:"ghost",size:"icon-sm",onMouseDown:t=>{t.preventDefault()},onClick:()=>{const t=z(ALIGN_OPTIONS,i.align);o.history.transaction(()=>{n.forEach(e=>{e.set({align:t})})})},"aria-label":d("toolbar.textAlign"),children:"left"===i.align?t(a,{name:"text.alignLeft",className:"pn:size-4"}):"center"===i.align?t(a,{name:"text.alignCenter",className:"pn:size-4"}):"right"===i.align?t(a,{name:"text.alignRight",className:"pn:size-4"}):t(a,{name:"text.alignJustify",className:"pn:size-4"})})}),t(F,{side:"bottom",children:d("toolbar.textAlign")})]}),h.textVerticalResizeEnabled&&e(y,{children:[t(N,{asChild:!0,children:t(f,{variant:"ghost",size:"icon-sm",onMouseDown:t=>{t.preventDefault()},onClick:()=>{const t=z(VERTICAL_ALIGN_OPTIONS,i.verticalAlign);o.history.transaction(()=>{n.forEach(e=>{e.set({verticalAlign:t})})})},"aria-label":d("toolbar.verticalAlign"),children:VERTICAL_ALIGN_ICONS[i.verticalAlign]})}),t(F,{side:"bottom",children:d("toolbar.verticalAlign")})]}),t(C,{label:d("toolbar.bold"),side:"bottom",active:r,onMouseDown:t=>{t.preventDefault()},onClick:()=>{const t="bold"===i.fontWeight||"700"===i.fontWeight;o.history.transaction(()=>{n.forEach(e=>{t?e.set({fontWeight:"normal"}):e.set({fontWeight:"bold"})})})},children:t(a,{name:"text.bold",className:"pn:size-4"})}),t(C,{label:d("toolbar.italic"),side:"bottom",active:l,onMouseDown:t=>{t.preventDefault()},onClick:()=>{const t="italic"===i.fontStyle;o.history.transaction(()=>{n.forEach(e=>{t?e.set({fontStyle:"normal"}):e.set({fontStyle:"italic"})})})},children:t(a,{name:"text.italic",className:"pn:size-4"})}),t(C,{label:d("toolbar.underline"),side:"bottom",active:s,onMouseDown:t=>{t.preventDefault()},onClick:()=>{let t=i.textDecoration.split(" ");t.indexOf("underline")>=0?t=t.filter(t=>"underline"!==t):t.push("underline"),o.history.transaction(()=>{n.forEach(e=>{e.set({textDecoration:t.join(" ")})})})},children:t(a,{name:"text.underline",className:"pn:size-4"})}),t(C,{label:d("toolbar.strikethrough"),side:"bottom",active:c,onMouseDown:t=>{t.preventDefault()},onClick:()=>{let t=i.textDecoration.split(" ");t.indexOf("line-through")>=0?t=t.filter(t=>"line-through"!==t):t.push("line-through"),o.history.transaction(()=>{n.forEach(e=>{e.set({textDecoration:t.join(" ")})})})},children:t(a,{name:"text.strikethrough",className:"pn:size-4"})})]})});export const TextTransform=o(({elements:e,store:n})=>{const o="uppercase"==e[0].textTransform;return t("div",{className:"pn:flex pn:items-center pn:gap-0.5",children:t(C,{label:d("toolbar.uppercase"),active:o,onMouseDown:t=>{t.preventDefault()},onClick:()=>{n.history.transaction(()=>{e.forEach(t=>{t.set({textTransform:"uppercase"===t.textTransform?"none":"uppercase"})})})},children:t(a,{name:"text.uppercase",className:"pn:size-4"})})})});export const TextFill=o(({elements:e,store:n})=>t(w,{value:e[0].fill,style:{marginRight:"5px"},gradientEnabled:!0,onChange:t=>n.history.transaction(()=>{e.forEach(e=>{e.set({fill:t})})}),store:n}));export const TextSpacing=o(({elements:n,store:o})=>{const i=n[0],r=t=>{o.history.transaction(()=>{n.forEach(e=>{e.set(t)})})},l="number"==typeof i.lineHeight?100*i.lineHeight:120;return e(b,{children:[e(y,{children:[t(N,{asChild:!0,children:t(T,{asChild:!0,children:t(f,{variant:"ghost",size:"icon-sm","aria-label":d("toolbar.spacing"),children:t(a,{name:"text.spacing",className:"pn:size-5"})})})}),t(F,{side:"bottom",children:d("toolbar.spacing")})]}),e(v,{align:"start",className:"pn:w-[230px] pn:p-[15px]",children:[t(g,{label:d("toolbar.lineHeight"),value:Math.round(l),onChange:t=>r({lineHeight:t/100}),min:50,max:250}),t(g,{label:d("toolbar.letterSpacing"),value:Math.round(100*i.letterSpacing),onChange:t=>r({letterSpacing:t/100}),min:-50,max:250})]})]})});export const TextFilters=E;export const TextAnimations=A;const _={TextFontFamily,TextFontSize,TextFontVariant,TextTransform,TextFill,TextSpacing,TextAiWrite:I,TextFilters:E,TextAnimations:A};export const TextToolbar=o(({store:e,components:n})=>{const o=e.selectedElements,i=["TextFill","TextFontFamily","TextFontSize","TextFontVariant","TextSpacing","TextTransform","TextFilters",h.animationsEnabled&&"TextAnimations",h.aiTextEnabled&&"TextAiWrite"],r=k({type:"text",usedItems:i,components:n});return t(D,{items:r,itemRender:i=>{const r=(null==n?void 0:n[i])||_[i];return r?t(r,{elements:o,element:o[0],store:e},i):null}})});export default TextToolbar;
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import n from"react";import{observer as o}from"mobx-react-lite";import{FixedSizeList as i}from"react-window";import r from"swr";import{PolotnoIcon as a}from"../icons/registry.js";import{getFontsList as l,globalFonts as s,isGoogleFontChanged as c}from"../utils/fonts.js";import{getGoogleFontImage as p,getGoogleFontsListAPI as m}from"../utils/api.js";import{t as d}from"../utils/l10n.js";import{flags as f}from"../utils/flags.js";import{Button as h}from"../primitives/button.js";import{NumberInput as u}from"../primitives/numeric-input.js";export{NumberInput}from"../primitives/numeric-input.js";import{InputGroup as x}from"../primitives/input-group.js";import{SliderField as g}from"../primitives/slider-field.js";import{Popover as b,PopoverContent as v,PopoverTrigger as T}from"../primitives/popover.js";import{Tooltip as y,TooltipContent as F,TooltipTrigger as N}from"../primitives/tooltip.js";import{TooltipIconButton as S}from"../primitives/tooltip-icon-button.js";import{Separator as C}from"../primitives/separator.js";import{cn as j}from"../lib/utils.js";import{cycleNext as z}from"./toolbar-shared.js";import{ColorPicker as w}from"./color-picker.js";import E from"./filters-picker.js";import{AnimationsPicker as A}from"./animations-picker.js";import{ElementContainer as D,extendToolbar as k}from"./element-container.js";import{TextAiWrite as I}from"./text-ai-write.js";const O=l(),M=({fontFamily:e,handleClick:o,modifiers:i,store:r,isCustom:a})=>{const[l,s]=n.useState(!a);if(n.useEffect(()=>{l||r.loadFont(e)},[e,l]),"_divider"===e){return t("div",{style:{paddingTop:"10px"},children:t(C,{})})}const c=l?t("img",{src:p(e),alt:e,onError:()=>{s(!1)},className:"pn:h-5 pn:dark:invert"}):e;return t("button",{type:"button",onClick:o,disabled:i.disabled,"data-active":i.active||void 0,className:j("pn:flex pn:w-full pn:items-center pn:rounded-sm pn:px-2 pn:py-1.5 pn:text-left pn:text-sm pn:hover:bg-muted",i.active&&"pn:bg-muted"),style:{fontFamily:'"'+e+'"'},children:c})},L=({onChange:o,defaultValue:i})=>{const r=n.useRef(null);return n.useEffect(()=>{r.current&&r.current.focus()},[]),e(x,{children:[t("span",{className:"pn:flex pn:items-center pn:pl-2 pn:pr-1 pn:text-muted-foreground",children:t(a,{name:"action.search",className:"pn:size-3.5 pn:shrink-0 pn:opacity-50"})}),t("input",{ref:r,"data-slot":"input-group-control",defaultValue:i,onChange:t=>o(t.target.value),className:"pn:h-full pn:w-full pn:flex-1 pn:border-0 pn:bg-transparent pn:px-2 pn:text-xs pn:outline-none pn:placeholder:text-muted-foreground"})]})};export const FontMenu=({store:o,fonts:r,activeFont:l,activeFontLabel:c,onFontSelect:p,mixed:m,mixedFonts:f,open:u,onOpenChange:x})=>{const[g,S]=n.useState(""),C=r.filter(t=>(null==t?void 0:t.toLowerCase().indexOf(g.toLowerCase()))>=0);return e(b,{open:u,onOpenChange:x,children:[e(y,{children:[t(N,{render:t(T,{render:e(h,{variant:"ghost",size:"sm",className:"pn:mr-[5px] pn:gap-1 pn:overflow-hidden pn:whitespace-nowrap",style:{fontFamily:m?void 0:'"'+l+'"',fontStyle:m?"italic":void 0,color:m?"#5c7080":void 0},"aria-label":d("toolbar.fontFamily"),children:[t("span",{className:"pn:truncate",children:m?d("toolbar.fontFamilyMixed"):c}),t(a,{name:"ui.chevronDown",className:"pn:size-3 pn:shrink-0 pn:opacity-50"})]})})}),t(F,{side:"bottom",children:m&&f&&f.length>0?`${d("toolbar.fontsInSelection")}: ${f.join(", ")}`:d("toolbar.fontFamily")})]}),t(v,{className:"pn:w-[230px] pn:p-2",align:"start",children:e("div",{children:[t(L,{onChange:t=>S(t),defaultValue:g}),t("div",{style:{paddingTop:"5px"},children:t(i,{height:Math.min(400,30*C.length)+10,width:210,itemCount:C.length,itemSize:30,children:({index:e,style:n})=>{const i=C[e];return t("div",{style:n,children:t(M,{fontFamily:i,modifiers:{active:l===i},handleClick:()=>p(i),store:o,isCustom:o.fonts.find(t=>t.fontFamily===i)||s.find(t=>t.fontFamily===i)},i)})}})})]})})]})};const V={};export const fetcher=t=>V[t]?Promise.resolve(V[t]):fetch(t).then(t=>t.json()).then(e=>(V[t]=e,e));export const TextFontFamily=o(({elements:e,store:o})=>{const[i,a]=n.useState(!1),{data:l,mutate:p}=r(i?m():null,fetcher,{isPaused:()=>c(),fallbackData:[]});n.useEffect(()=>{p()},[c()]);const d=o.fonts.concat(s).map(t=>t.fontFamily).concat((null==l?void 0:l.length)&&!c()?l:O);let f=e[0].fontFamily;f.length>15&&(f=f.slice(0,15)+"...");const h=[];o.find(t=>("text"===t.type&&h.push(t.fontFamily),!1));const u=[...new Set(h.concat("_divider").concat(d))];return t(FontMenu,{fonts:u,activeFont:e[0].fontFamily,activeFontLabel:f,store:o,open:i,onOpenChange:a,onFontSelect:t=>{o.history.transaction(()=>{e.forEach(e=>{e.set({fontFamily:t})})})}})});export const TextFontSize=o(({elements:o,store:i})=>{const[r,a]=n.useState(!1),[l,s]=n.useState(!1);return e(y,{open:!l&&r,onOpenChange:t=>{l||a(t)},children:[t(N,{render:t(u,{"aria-label":d("toolbar.fontSize"),onFocus:()=>s(!0),onBlur:()=>s(!1),onValueChange:t=>{i.history.transaction(()=>{o.forEach(e=>{e.set({fontSize:t,width:Math.max(t,e.width)})})})},value:Math.round(o[0].fontSize),style:{width:"50px"},min:5,max:4*i.height})}),t(F,{side:"bottom",children:d("toolbar.fontSize")})]})});export const ALIGN_OPTIONS=["left","center","right","justify"];export const VERTICAL_ALIGN_OPTIONS=["top","middle","bottom"];export const VERTICAL_ALIGN_ICONS={top:t(a,{name:"text.valignTop",className:"pn:size-4"}),middle:t(a,{name:"text.valignMiddle",className:"pn:size-4"}),bottom:t(a,{name:"text.valignBottom",className:"pn:size-4"})};export const TextFontVariant=o(({elements:n,store:o})=>{const i=n[0],r="bold"===i.fontWeight||"700"===i.fontWeight,l="italic"===i.fontStyle,s=i.textDecoration.indexOf("underline")>=0,c=i.textDecoration.indexOf("line-through")>=0;return e("div",{className:"pn:flex pn:items-center pn:gap-0.5",children:[e(y,{children:[t(N,{render:t(h,{variant:"ghost",size:"icon-sm",onMouseDown:t=>{t.preventDefault()},onClick:()=>{const t=z(ALIGN_OPTIONS,i.align);o.history.transaction(()=>{n.forEach(e=>{e.set({align:t})})})},"aria-label":d("toolbar.textAlign"),children:"left"===i.align?t(a,{name:"text.alignLeft",className:"pn:size-4"}):"center"===i.align?t(a,{name:"text.alignCenter",className:"pn:size-4"}):"right"===i.align?t(a,{name:"text.alignRight",className:"pn:size-4"}):t(a,{name:"text.alignJustify",className:"pn:size-4"})})}),t(F,{side:"bottom",children:d("toolbar.textAlign")})]}),f.textVerticalResizeEnabled&&e(y,{children:[t(N,{render:t(h,{variant:"ghost",size:"icon-sm",onMouseDown:t=>{t.preventDefault()},onClick:()=>{const t=z(VERTICAL_ALIGN_OPTIONS,i.verticalAlign);o.history.transaction(()=>{n.forEach(e=>{e.set({verticalAlign:t})})})},"aria-label":d("toolbar.verticalAlign"),children:VERTICAL_ALIGN_ICONS[i.verticalAlign]})}),t(F,{side:"bottom",children:d("toolbar.verticalAlign")})]}),t(S,{label:d("toolbar.bold"),side:"bottom",active:r,onMouseDown:t=>{t.preventDefault()},onClick:()=>{const t="bold"===i.fontWeight||"700"===i.fontWeight;o.history.transaction(()=>{n.forEach(e=>{t?e.set({fontWeight:"normal"}):e.set({fontWeight:"bold"})})})},children:t(a,{name:"text.bold",className:"pn:size-4"})}),t(S,{label:d("toolbar.italic"),side:"bottom",active:l,onMouseDown:t=>{t.preventDefault()},onClick:()=>{const t="italic"===i.fontStyle;o.history.transaction(()=>{n.forEach(e=>{t?e.set({fontStyle:"normal"}):e.set({fontStyle:"italic"})})})},children:t(a,{name:"text.italic",className:"pn:size-4"})}),t(S,{label:d("toolbar.underline"),side:"bottom",active:s,onMouseDown:t=>{t.preventDefault()},onClick:()=>{let t=i.textDecoration.split(" ");t.indexOf("underline")>=0?t=t.filter(t=>"underline"!==t):t.push("underline"),o.history.transaction(()=>{n.forEach(e=>{e.set({textDecoration:t.join(" ")})})})},children:t(a,{name:"text.underline",className:"pn:size-4"})}),t(S,{label:d("toolbar.strikethrough"),side:"bottom",active:c,onMouseDown:t=>{t.preventDefault()},onClick:()=>{let t=i.textDecoration.split(" ");t.indexOf("line-through")>=0?t=t.filter(t=>"line-through"!==t):t.push("line-through"),o.history.transaction(()=>{n.forEach(e=>{e.set({textDecoration:t.join(" ")})})})},children:t(a,{name:"text.strikethrough",className:"pn:size-4"})})]})});export const TextTransform=o(({elements:e,store:n})=>{const o="uppercase"==e[0].textTransform;return t("div",{className:"pn:flex pn:items-center pn:gap-0.5",children:t(S,{label:d("toolbar.uppercase"),active:o,onMouseDown:t=>{t.preventDefault()},onClick:()=>{n.history.transaction(()=>{e.forEach(t=>{t.set({textTransform:"uppercase"===t.textTransform?"none":"uppercase"})})})},children:t(a,{name:"text.uppercase",className:"pn:size-4"})})})});export const TextFill=o(({elements:e,store:n})=>t(w,{value:e[0].fill,style:{marginRight:"5px"},gradientEnabled:!0,onChange:t=>n.history.transaction(()=>{e.forEach(e=>{e.set({fill:t})})}),store:n}));export const TextSpacing=o(({elements:n,store:o})=>{const i=n[0],r=t=>{o.history.transaction(()=>{n.forEach(e=>{e.set(t)})})},l="number"==typeof i.lineHeight?100*i.lineHeight:120;return e(b,{children:[e(y,{children:[t(N,{render:t(T,{render:t(h,{variant:"ghost",size:"icon-sm","aria-label":d("toolbar.spacing"),children:t(a,{name:"text.spacing",className:"pn:size-5"})})})}),t(F,{side:"bottom",children:d("toolbar.spacing")})]}),e(v,{align:"start",className:"pn:w-[230px] pn:p-[15px]",children:[t(g,{label:d("toolbar.lineHeight"),value:Math.round(l),onChange:t=>r({lineHeight:t/100}),min:50,max:250}),t(g,{label:d("toolbar.letterSpacing"),value:Math.round(100*i.letterSpacing),onChange:t=>r({letterSpacing:t/100}),min:-50,max:250})]})]})});export const TextFilters=E;export const TextAnimations=A;const _={TextFontFamily,TextFontSize,TextFontVariant,TextTransform,TextFill,TextSpacing,TextAiWrite:I,TextFilters:E,TextAnimations:A};export const TextToolbar=o(({store:e,components:n})=>{const o=e.selectedElements,i=["TextFill","TextFontFamily","TextFontSize","TextFontVariant","TextSpacing","TextTransform","TextFilters",f.animationsEnabled&&"TextAnimations",f.aiTextEnabled&&"TextAiWrite"],r=k({type:"text",usedItems:i,components:n});return t(D,{items:r,itemRender:i=>{const r=(null==n?void 0:n[i])||_[i];return r?t(r,{elements:o,element:o[0],store:e},i):null}})});export default TextToolbar;

package/toolbar/toolbar.js

@@ -1 +1 @@
-import{jsx as o,jsxs as t}from"react/jsx-runtime";import*as e from"react";import{observer as r}from"mobx-react-lite";import{flags as l}from"../utils/flags.js";import{Navbar as n}from"../primitives/navbar.js";import{TooltipProvider as i}from"../primitives/tooltip.js";import{PolotnoScope as s}from"../primitives/portal-scope.js";import{cn as m}from"../lib/utils.js";import{useToolbarCondensed as p}from"../hooks/use-toolbar-condensed.js";import{HistoryButtons as a}from"./history-buttons.js";import{TextToolbar as d}from"./text-toolbar.js";import{HtmlToolbar as c}from"./html-toolbar.js";import{ImageToolbar as f}from"./image-toolbar.js";import{SvgToolbar as u}from"./svg-toolbar.js";import{LineToolbar as b}from"./line-toolbar.js";import{VideoToolbar as j}from"./video-toolbar.js";import{FigureToolbar as g}from"./figure-toolbar.js";import{GifToolbar as v}from"./gif-toolbar.js";import{ManyToolbar as y}from"./many-toolbar.js";import{TableToolbar as h}from"./table-toolbar.js";import{PageToolbar as x}from"./page-toolbar.js";import{GroupToolbar as E}from"./group-toolbar.js";import{DownloadButton as w}from"./download-button.js";import{DuplicateButton as k}from"./duplicate-button.js";import{RemoveButton as R}from"./remove-button.js";import{LockButton as T}from"./lock-button.js";import{PositionPicker as O}from"./position-picker.js";import{OpacityPicker as C}from"./opacity-picker.js";import{AdminButton as D}from"./admin-button.js";import{GroupButton as N}from"./group-button.js";import{CopyStyleButton as A}from"./copy-style.js";const B={text:d,image:f,svg:u,many:y,line:b,video:j,figure:g,gif:v,table:h,page:x,group:E};export function registerToolbarComponent(o,t){B[o]=t}export{p as useToolbarCondensed};export const Toolbar=r(({store:r,downloadButtonEnabled:f,components:u={}})=>{const b=1===new Set(r.selectedElements.map(o=>o.type)).size,j=1===r.selectedElements.length,g=r.selectedElements[0],v=r.selectedElements.every(o=>o.styleEditable);let y=v&&j&&g?B[g.type]:void 0;b&&g?y=B[g.type]:r.selectedElements.length>1&&(y=B.many),0===r.selectedElements.length&&1===r._selectedPagesIds.length&&(y=B.page),b&&g&&"text"===g.type&&(l.htmlRenderEnabled||l.renderTagTextEnabled)&&B.text===d&&(y=c);const h=j&&Boolean(null==g?void 0:g._cropModeEnabled),x=e.useRef(u);(Object.keys(u).some(o=>u[o]!==x.current[o])||Object.keys(x.current).some(o=>!(o in u)))&&(x.current=Object.assign({},u));const E=x.current,{containerRef:G,condensed:P}=p(480),S=(null==E?void 0:E.ActionControls)||(f?w:null),_=(null==E?void 0:E.Position)||O,z=(null==E?void 0:E.Opacity)||C,F=(null==E?void 0:E.Lock)||T,H=(null==E?void 0:E.Duplicate)||k,I=(null==E?void 0:E.Remove)||R,L=(null==E?void 0:E.Group)||N,M=(null==E?void 0:E.History)||a,q=(null==E?void 0:E.Admin)||D,J=(null==E?void 0:E.CopyStyle)||A;return o(s,{elementRef:G,children:o(i,{delayDuration:300,children:o(n,{ref:G,attached:"bottom",className:m("pn-toolbar polotno-toolbar pn:min-w-0 pn:max-w-full pn:overflow-x-auto pn:overflow-y-hidden",P&&"pn-toolbar--condensed condensed"),children:t("div",{className:"pn-toolbar-inner pn:flex pn:h-full pn:w-full pn:min-w-0 pn:items-center pn:max-md:flex",children:[!h&&o(M,{store:r}),y&&v&&o(y,{store:r,components:E}),!h&&t(n.Group,{align:"right",className:"pn:gap-0.5",children:["admin"===r.role&&o(q,{store:r}),o(L,{store:r}),o(_,{store:r}),v&&o(z,{store:r}),o(F,{store:r}),o(H,{store:r}),o(I,{store:r}),o(J,{store:r}),S&&t(e.Fragment,{children:[o(n.Divider,{}),o(S,{store:r})]})]})]})})})})});export default Toolbar;
+import{jsx as o,jsxs as t}from"react/jsx-runtime";import*as e from"react";import{observer as r}from"mobx-react-lite";import{flags as l}from"../utils/flags.js";import{Navbar as n}from"../primitives/navbar.js";import{TooltipProvider as s}from"../primitives/tooltip.js";import{PolotnoScope as i}from"../primitives/portal-scope.js";import{cn as m}from"../lib/utils.js";import{useToolbarCondensed as p}from"../hooks/use-toolbar-condensed.js";import{HistoryButtons as a}from"./history-buttons.js";import{TextToolbar as d}from"./text-toolbar.js";import{HtmlToolbar as c}from"./html-toolbar.js";import{ImageToolbar as f}from"./image-toolbar.js";import{SvgToolbar as u}from"./svg-toolbar.js";import{LineToolbar as b}from"./line-toolbar.js";import{VideoToolbar as j}from"./video-toolbar.js";import{FigureToolbar as g}from"./figure-toolbar.js";import{GifToolbar as v}from"./gif-toolbar.js";import{ManyToolbar as y}from"./many-toolbar.js";import{TableToolbar as h}from"./table-toolbar.js";import{PageToolbar as x}from"./page-toolbar.js";import{GroupToolbar as E}from"./group-toolbar.js";import{DownloadButton as w}from"./download-button.js";import{DuplicateButton as k}from"./duplicate-button.js";import{RemoveButton as R}from"./remove-button.js";import{LockButton as T}from"./lock-button.js";import{PositionPicker as O}from"./position-picker.js";import{OpacityPicker as C}from"./opacity-picker.js";import{AdminButton as N}from"./admin-button.js";import{GroupButton as A}from"./group-button.js";import{CopyStyleButton as B}from"./copy-style.js";const D={text:d,image:f,svg:u,many:y,line:b,video:j,figure:g,gif:v,table:h,page:x,group:E};export function registerToolbarComponent(o,t){D[o]=t}export{p as useToolbarCondensed};export const Toolbar=r(({store:r,downloadButtonEnabled:f,components:u={}})=>{const b=1===new Set(r.selectedElements.map(o=>o.type)).size,j=1===r.selectedElements.length,g=r.selectedElements[0],v=r.selectedElements.every(o=>o.styleEditable);let y=v&&j&&g?D[g.type]:void 0;b&&g?y=D[g.type]:r.selectedElements.length>1&&(y=D.many),0===r.selectedElements.length&&1===r._selectedPagesIds.length&&(y=D.page),b&&g&&"text"===g.type&&(l.htmlRenderEnabled||l.renderTagTextEnabled)&&D.text===d&&(y=c);const h=j&&Boolean(null==g?void 0:g._cropModeEnabled),x=e.useRef(u);(Object.keys(u).some(o=>u[o]!==x.current[o])||Object.keys(x.current).some(o=>!(o in u)))&&(x.current=Object.assign({},u));const E=x.current,{containerRef:G,condensed:P}=p(480),S=(null==E?void 0:E.ActionControls)||(f?w:null),_=(null==E?void 0:E.Position)||O,z=(null==E?void 0:E.Opacity)||C,F=(null==E?void 0:E.Lock)||T,H=(null==E?void 0:E.Duplicate)||k,I=(null==E?void 0:E.Remove)||R,L=(null==E?void 0:E.Group)||A,M=(null==E?void 0:E.History)||a,q=(null==E?void 0:E.Admin)||N,J=(null==E?void 0:E.CopyStyle)||B;return o(i,{elementRef:G,children:o(s,{delay:300,children:o(n,{ref:G,attached:"bottom",className:m("pn-toolbar polotno-toolbar pn:min-w-0 pn:max-w-full pn:overflow-x-auto pn:overflow-y-hidden",P&&"pn-toolbar--condensed condensed"),children:t("div",{className:"pn-toolbar-inner pn:flex pn:h-full pn:w-full pn:min-w-0 pn:items-center pn:max-md:flex",children:[!h&&o(M,{store:r}),y&&v&&o(y,{store:r,components:E}),!h&&t(n.Group,{align:"right",className:"pn:gap-0.5",children:["admin"===r.role&&o(q,{store:r}),o(L,{store:r}),o(_,{store:r}),v&&o(z,{store:r}),o(F,{store:r}),o(H,{store:r}),o(I,{store:r}),o(J,{store:r}),S&&t(e.Fragment,{children:[o(n.Divider,{}),o(S,{store:r})]})]})]})})})})});export default Toolbar;

package/toolbar/video-toolbar.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import i from"react";import{observer as o}from"mobx-react-lite";import{ElementContainer as r,extendToolbar as n}from"./element-container.js";import{Button as s}from"../primitives/button.js";import{clamp as a}from"../lib/utils.js";import{Input as l}from"../primitives/input.js";import{NumericInput as d}from"../primitives/numeric-input.js";import{Slider as m}from"../primitives/slider.js";import{Popover as p,PopoverContent as c,PopoverTrigger as h}from"../primitives/popover.js";import{Tooltip as u,TooltipContent as v,TooltipTrigger as g}from"../primitives/tooltip.js";import{AnimationsPicker as f}from"./animations-picker.js";import{flags as x}from"../utils/flags.js";import{getVideoDuration as w,getVideoObjectPreview as b,getVideoSize as y}from"../utils/video.js";import{t as C}from"../utils/l10n.js";import{PolotnoIcon as T}from"../icons/registry.js";export const VideoTrim=o(({element:o})=>{const r=i.useRef(null),[n,a]=i.useState([]);i.useEffect(()=>{a([])},[o.src]);const d=async()=>{if(!o.src){return}if(n.length){return}const{width:e,height:t}=await y(o.src),i=e/t,{src:s}=o,l=r.current.offsetHeight,d=r.current.offsetWidth,m=l*i,p=Math.ceil(d/m),c=await w(s),h=document.createElement("video");h.crossOrigin="anonymous",h.src=s;const u=document.createElement("canvas");u.width=480;try{await new Promise((e,t)=>{h.addEventListener("loadeddata",()=>{const t=h.videoWidth/h.videoHeight;u.height=480/t,e()}),h.addEventListener("error",t)}),a([]);for(let e=0;e<p;e++){const t=e*c/p,i=await b(h,u,t);a(e=>e.concat(i))}}catch(v){console.error("Error generating previews:",v)}},m=(e,t)=>{e.preventDefault();const i=e=>{e.preventDefault();const{clientX:i}=e,{left:n,width:s}=r.current.getBoundingClientRect(),a=(i-n)/s;"start"===t?o.set({startTime:Math.min(o.endTime,Math.max(0,a))}):"end"===t&&o.set({endTime:Math.min(1,Math.max(o.startTime,a))})};window.addEventListener("mousemove",i),window.addEventListener("mouseup",()=>{window.removeEventListener("mousemove",i)})};return t(p,{onOpenChange:e=>{e&&setTimeout(d,0)},children:[e(h,{asChild:!0,children:t(s,{variant:"ghost",size:"sm",children:[e(T,{name:"toolbar.trim",className:"pn:size-4"}),"Trim"]})}),e(c,{align:"start",className:"pn:p-2",style:{boxShadow:"none",backgroundColor:"transparent",width:"calc(100vw - 300px)"},children:t("div",{className:"pn:flex pn:items-center",children:[e(l,{type:"number",style:{width:"80px"},value:parseFloat((o.duration*(o.endTime-o.startTime)/1e3).toFixed(2)),step:.1,readOnly:!0}),t("div",{style:{width:"calc(100vw - 420px)",height:"30px",display:"flex",position:"relative",overflow:"hidden",marginLeft:"10px"},ref:r,children:[n.map((t,i)=>e("img",{src:t,style:{width:"auto",height:"100%",objectFit:"cover"}},i)),e("div",{style:{position:"absolute",top:"0",left:0,width:100*o.startTime+"%",height:"30px",backgroundColor:"rgb(0, 0, 0, 0.5)"}}),e("div",{style:{position:"absolute",top:"0",right:"0%",width:100-100*o.endTime+"%",height:"30px",backgroundColor:"rgb(0, 0, 0, 0.5)"}}),e("div",{style:{position:"absolute",top:"0",left:100*o.startTime+"%",width:"10px",height:"30px",borderRadius:"0px",backgroundColor:"rgb(0, 161, 255, 0.9)",cursor:"ew-resize"},onMouseDown:e=>{m(e,"start")}}),e("div",{style:{position:"absolute",top:"0",right:100-100*o.endTime+"%",width:"10px",height:"30px",borderRadius:"0px",backgroundColor:"rgb(0, 161, 255, 0.9)",cursor:"ew-resize"},onMouseDown:e=>{m(e,"end")}})]})]})})]})});const j=o(({element:i})=>{const o=Math.round(100*i.volume),r=e=>{i.set({volume:e/100})};return t(p,{children:[t(u,{children:[e(g,{asChild:!0,children:e(h,{asChild:!0,children:e(s,{variant:"ghost",size:"icon-sm","aria-label":C("toolbar.volume"),children:e(T,{name:"action.unmuted",className:"pn:size-4"})})})}),e(v,{children:C("toolbar.volume")})]}),e(c,{style:{padding:"10px",width:"250px"},align:"start",children:t("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"},children:[e("div",{style:{paddingTop:"7px",paddingLeft:"10px",width:"calc(100% - 80px)"},children:e(m,{value:[o],onValueChange:e=>{r(e[0])},min:0,max:100,step:1})}),e(d,{value:o,onValueChange:e=>{r(a(e,0,100))},style:{width:"50px",padding:"0 5px",marginLeft:"10px"},min:0,max:100})]})})]})});export const VideoClip=o(({element:t,store:i})=>t.contentEditable?t.clipSrc?e(s,{variant:"ghost",size:"sm",onClickCapture:()=>{t.set({clipSrc:""})},children:C("toolbar.removeClip")}):e(s,{variant:"ghost",size:"sm",onClickCapture:e=>{e.stopPropagation(),i.openSidePanel("image-clip")},children:C("toolbar.clip")}):null);const V={VideoTrim,VideoAnimations:f,VideoVolume:j,VideoClip};export const VideoToolbar=o(({store:t,components:i})=>{const o=t.selectedElements,s=["VideoTrim","VideoVolume","VideoClip",x.animationsEnabled&&"VideoAnimations"],a=n({type:"video",usedItems:s,components:i});return e(r,{items:a,itemRender:r=>{const n=i[r]||V[r];return e(n,{elements:o,element:o[0],store:t},r)}})});export default VideoToolbar;
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import i from"react";import{observer as o}from"mobx-react-lite";import{ElementContainer as r,extendToolbar as n}from"./element-container.js";import{Button as s}from"../primitives/button.js";import{clamp as a,firstSliderValue as l}from"../lib/utils.js";import{Input as d}from"../primitives/input.js";import{NumericInput as m}from"../primitives/numeric-input.js";import{Slider as p}from"../primitives/slider.js";import{Popover as c,PopoverContent as u,PopoverTrigger as h}from"../primitives/popover.js";import{Tooltip as v,TooltipContent as g,TooltipTrigger as f}from"../primitives/tooltip.js";import{AnimationsPicker as x}from"./animations-picker.js";import{flags as w}from"../utils/flags.js";import{getVideoDuration as b,getVideoObjectPreview as y,getVideoSize as C}from"../utils/video.js";import{t as T}from"../utils/l10n.js";import{PolotnoIcon as j}from"../icons/registry.js";export const VideoTrim=o(({element:o})=>{const r=i.useRef(null),[n,a]=i.useState([]);i.useEffect(()=>{a([])},[o.src]);const l=async()=>{if(!o.src){return}if(n.length){return}const{width:e,height:t}=await C(o.src),i=e/t,{src:s}=o,l=r.current.offsetHeight,d=r.current.offsetWidth,m=l*i,p=Math.ceil(d/m),c=await b(s),u=document.createElement("video");u.crossOrigin="anonymous",u.src=s;const h=document.createElement("canvas");h.width=480;try{await new Promise((e,t)=>{u.addEventListener("loadeddata",()=>{const t=u.videoWidth/u.videoHeight;h.height=480/t,e()}),u.addEventListener("error",t)}),a([]);for(let e=0;e<p;e++){const t=e*c/p,i=await y(u,h,t);a(e=>e.concat(i))}}catch(v){console.error("Error generating previews:",v)}},m=(e,t)=>{e.preventDefault();const i=e=>{e.preventDefault();const{clientX:i}=e,{left:n,width:s}=r.current.getBoundingClientRect(),a=(i-n)/s;"start"===t?o.set({startTime:Math.min(o.endTime,Math.max(0,a))}):"end"===t&&o.set({endTime:Math.min(1,Math.max(o.startTime,a))})};window.addEventListener("mousemove",i),window.addEventListener("mouseup",()=>{window.removeEventListener("mousemove",i)})};return t(c,{onOpenChange:e=>{e&&setTimeout(l,0)},children:[e(h,{render:t(s,{variant:"ghost",size:"sm",children:[e(j,{name:"toolbar.trim",className:"pn:size-4"}),"Trim"]})}),e(u,{align:"start",className:"pn:p-2",style:{boxShadow:"none",backgroundColor:"transparent",width:"calc(100vw - 300px)"},children:t("div",{className:"pn:flex pn:items-center",children:[e(d,{type:"number",style:{width:"80px"},value:parseFloat((o.duration*(o.endTime-o.startTime)/1e3).toFixed(2)),step:.1,readOnly:!0}),t("div",{style:{width:"calc(100vw - 420px)",height:"30px",display:"flex",position:"relative",overflow:"hidden",marginLeft:"10px"},ref:r,children:[n.map((t,i)=>e("img",{src:t,style:{width:"auto",height:"100%",objectFit:"cover"}},i)),e("div",{style:{position:"absolute",top:"0",left:0,width:100*o.startTime+"%",height:"30px",backgroundColor:"rgb(0, 0, 0, 0.5)"}}),e("div",{style:{position:"absolute",top:"0",right:"0%",width:100-100*o.endTime+"%",height:"30px",backgroundColor:"rgb(0, 0, 0, 0.5)"}}),e("div",{style:{position:"absolute",top:"0",left:100*o.startTime+"%",width:"10px",height:"30px",borderRadius:"0px",backgroundColor:"rgb(0, 161, 255, 0.9)",cursor:"ew-resize"},onMouseDown:e=>{m(e,"start")}}),e("div",{style:{position:"absolute",top:"0",right:100-100*o.endTime+"%",width:"10px",height:"30px",borderRadius:"0px",backgroundColor:"rgb(0, 161, 255, 0.9)",cursor:"ew-resize"},onMouseDown:e=>{m(e,"end")}})]})]})})]})});const V=o(({element:i})=>{const o=Math.round(100*i.volume),r=e=>{i.set({volume:e/100})};return t(c,{children:[t(v,{children:[e(f,{render:e(h,{render:e(s,{variant:"ghost",size:"icon-sm","aria-label":T("toolbar.volume"),children:e(j,{name:"action.unmuted",className:"pn:size-4"})})})}),e(g,{children:T("toolbar.volume")})]}),e(u,{style:{padding:"10px",width:"250px"},align:"start",children:t("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"},children:[e("div",{style:{paddingTop:"7px",paddingLeft:"10px",width:"calc(100% - 80px)"},children:e(p,{value:[o],onValueChange:e=>{r(l(e))},min:0,max:100,step:1})}),e(m,{value:o,onValueChange:e=>{r(a(e,0,100))},style:{width:"50px",padding:"0 5px",marginLeft:"10px"},min:0,max:100})]})})]})});export const VideoClip=o(({element:t,store:i})=>t.contentEditable?t.clipSrc?e(s,{variant:"ghost",size:"sm",onClickCapture:()=>{t.set({clipSrc:""})},children:T("toolbar.removeClip")}):e(s,{variant:"ghost",size:"sm",onClickCapture:e=>{e.stopPropagation(),i.openSidePanel("image-clip")},children:T("toolbar.clip")}):null);const E={VideoTrim,VideoAnimations:x,VideoVolume:V,VideoClip};export const VideoToolbar=o(({store:t,components:i})=>{const o=t.selectedElements,s=["VideoTrim","VideoVolume","VideoClip",w.animationsEnabled&&"VideoAnimations"],a=n({type:"video",usedItems:s,components:i});return e(r,{items:a,itemRender:r=>{const n=i[r]||E[r];return e(n,{elements:o,element:o[0],store:t},r)}})});export default VideoToolbar;

package/toolbar/zoom-buttons.js

@@ -1 +1 @@
-import{jsx as e,jsxs as s}from"react/jsx-runtime";import{observer as a}from"mobx-react-lite";import{PolotnoIcon as n}from"../icons/registry.js";import{Button as o}from"../primitives/button.js";import{Popover as t,PopoverContent as i,PopoverTrigger as l}from"../primitives/popover.js";import{t as r}from"../utils/l10n.js";const c=[.1,.25,.5,.75,1,1.5,2,3,5],p=c[c.length-1],m=c[0];export const ZoomGroup=a(({store:a})=>{const d=Math.max(p,a.scaleToFit),h=Math.min(m,a.scaleToFit),x=a.scale<d,u=a.scale>h;return s("div",{className:"pn:flex pn:h-[35px] pn:items-center",children:[e(o,{variant:"ghost",size:"icon-sm",onClick:()=>{a.setScale(a.scale/1.2)},disabled:!u,"aria-label":"Zoom out",children:e(n,{name:"toolbar.zoomOut",className:"pn:size-4"})}),s(t,{children:[e(l,{asChild:!0,children:e(o,{variant:"ghost",size:"sm","aria-label":"Zoom level",children:Math.round(100*a.scale)+"%"})}),e(i,{className:"pn:w-auto pn:min-w-[80px] pn:p-1",children:s("div",{className:"pn:flex pn:flex-col",children:[c.map(s=>e(o,{variant:"ghost",size:"sm",className:"pn:justify-start",onClick:async()=>{a.setScale(s)},children:Math.round(100*s)+"%"},s)),e(o,{variant:"ghost",size:"sm",className:"pn:justify-start",onClick:async()=>{a.setScale(a.scaleToFit)},children:r("scale.reset")})]})})]}),e(o,{variant:"ghost",size:"icon-sm",onClick:()=>{a.setScale(1.2*a.scale)},disabled:!x,"aria-label":"Zoom in",children:e(n,{name:"toolbar.zoomIn",className:"pn:size-4"})})]})});export const ZoomButtons=a(({store:s})=>e("div",{className:"pn:relative pn:h-0",children:e("div",{className:"pn:absolute pn:bottom-[5px] pn:left-1/2 pn:-translate-x-1/2 pn:overflow-hidden pn:rounded-md pn:shadow-[0_0_4px_rgba(17,20,24,0.25)] pn:dark:shadow-[0_0_4px_rgba(0,0,0,0.5)] pn:max-md:hidden",children:e("div",{className:"pn:flex pn:h-[35px] pn:items-center pn:bg-background pn:px-[5px]",children:e(ZoomGroup,{store:s})})})}));export default ZoomButtons;
+import{jsx as e,jsxs as s}from"react/jsx-runtime";import{observer as a}from"mobx-react-lite";import{PolotnoIcon as n}from"../icons/registry.js";import{Button as o}from"../primitives/button.js";import{Popover as t,PopoverContent as i,PopoverTrigger as r}from"../primitives/popover.js";import{t as l}from"../utils/l10n.js";const c=[.1,.25,.5,.75,1,1.5,2,3,5],p=c[c.length-1],m=c[0];export const ZoomGroup=a(({store:a})=>{const d=Math.max(p,a.scaleToFit),h=Math.min(m,a.scaleToFit),x=a.scale<d,u=a.scale>h;return s("div",{className:"pn:flex pn:h-[35px] pn:items-center",children:[e(o,{variant:"ghost",size:"icon-sm",onClick:()=>{a.setScale(a.scale/1.2)},disabled:!u,"aria-label":"Zoom out",children:e(n,{name:"toolbar.zoomOut",className:"pn:size-4"})}),s(t,{children:[e(r,{render:e(o,{variant:"ghost",size:"sm","aria-label":"Zoom level",children:Math.round(100*a.scale)+"%"})}),e(i,{className:"pn:w-auto pn:min-w-[80px] pn:p-1",children:s("div",{className:"pn:flex pn:flex-col",children:[c.map(s=>e(o,{variant:"ghost",size:"sm",className:"pn:justify-start",onClick:async()=>{a.setScale(s)},children:Math.round(100*s)+"%"},s)),e(o,{variant:"ghost",size:"sm",className:"pn:justify-start",onClick:async()=>{a.setScale(a.scaleToFit)},children:l("scale.reset")})]})})]}),e(o,{variant:"ghost",size:"icon-sm",onClick:()=>{a.setScale(1.2*a.scale)},disabled:!x,"aria-label":"Zoom in",children:e(n,{name:"toolbar.zoomIn",className:"pn:size-4"})})]})});export const ZoomButtons=a(({store:s})=>e("div",{className:"pn:relative pn:h-0",children:e("div",{className:"pn:absolute pn:bottom-[5px] pn:left-1/2 pn:-translate-x-1/2 pn:overflow-hidden pn:rounded-md pn:shadow-[0_0_4px_rgba(17,20,24,0.25)] pn:dark:shadow-[0_0_4px_rgba(0,0,0,0.5)] pn:max-md:hidden",children:e("div",{className:"pn:flex pn:h-[35px] pn:items-center pn:bg-background pn:px-[5px]",children:e(ZoomGroup,{store:s})})})}));export default ZoomButtons;