polotno 4.0.3 → 4.1.1

package/primitives/overflow-list.d.ts

@@ -1,9 +1,10 @@
 import * as React from "react";
 type ItemRender = (item: string) => React.ReactNode;
-declare const OverflowList: ({ items, itemRender, overflowBtnWidth, }: {
+declare const OverflowList: ({ items, itemRender, overflowBtnWidth, gap, }: {
     items: Array<string>;
     itemRender: ItemRender;
     overflowBtnWidth?: number;
+    gap?: number;
 }) => React.JSX.Element;
 export { OverflowList };
 export type { ItemRender };

package/primitives/overflow-list.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{MoreHorizontal as n}from"lucide-react";import{Button as s}from"./button.js";import{Popover as i,PopoverContent as o,PopoverTrigger as a}from"./popover.js";const l=({items:l,itemRender:c,overflowBtnWidth:f=40})=>{const m=r.useRef(null),p=r.useRef(null),[d,u]=r.useState(l.length),h=r.useCallback(()=>{const e=m.current,t=p.current;if(!e||!t){return}const r=e.offsetWidth,n=Array.from(t.children).filter(e=>!e.dataset.overflow).map(e=>e.offsetWidth);if(n.reduce((e,t)=>e+t,0)<=r){return void u(l.length)}const s=Math.max(0,r-f);let i=0,o=0;for(const a of n){if(i+a>s){break}i+=a,o++}u(o)},[l.length,f]);r.useLayoutEffect(()=>{h()}),r.useLayoutEffect(()=>{const e=m.current;if(e&&window.ResizeObserver){const t=new ResizeObserver(h);return t.observe(e),()=>t.disconnect()}},[h]);const v=l.slice(0,d),g=l.slice(d);return t("div",{ref:m,className:"pn:flex pn:w-full pn:items-center",children:[v.map(t=>e(r.Fragment,{children:c(t)},t)),g.length>0&&t(i,{children:[e(a,{render:e(s,{variant:"ghost",size:"icon-sm","aria-label":"More",style:{marginLeft:"10px"},onMouseDownCapture:e=>{e.preventDefault()},children:e(n,{className:"pn:size-4"})})}),e(o,{side:"bottom",className:"pn:w-auto pn:p-2.5",initialFocus:!1,children:e("div",{style:{display:"flex"},children:g.map(t=>e(r.Fragment,{children:c(t)},t))})})]}),t("div",{ref:p,"aria-hidden":!0,className:"pn:pointer-events-none pn:absolute pn:-z-10 pn:flex pn:items-center pn:opacity-0",style:{left:0,top:0},children:[l.map(t=>e(r.Fragment,{children:c(t)},t)),e(s,{variant:"ghost",size:"icon-sm","data-overflow":"true",style:{marginLeft:"10px"},children:e(n,{className:"pn:size-4"})})]})]})};export{l as OverflowList};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{MoreHorizontal as r}from"lucide-react";import{Button as s}from"./button.js";import{Popover as a,PopoverContent as i,PopoverTrigger as o}from"./popover.js";const l=({items:l,itemRender:c,overflowBtnWidth:p=40,gap:f=0})=>{const m=n.useRef(null),d=n.useRef(null),[u,h]=n.useState(l.length),v=n.useCallback(()=>{const e=m.current,t=d.current;if(!e||!t){return}const n=e.offsetWidth,r=Array.from(t.children).filter(e=>!e.dataset.overflow).map(e=>e.offsetWidth);if(r.reduce((e,t)=>e+t,0)+f*Math.max(0,r.length-1)<=n){return void h(l.length)}const s=Math.max(0,n-p-f);let a=0,i=0;for(const o of r){const e=0===a?o:a+f+o;if(e>s){break}a=e,i++}h(i)},[l.length,p,f]);n.useLayoutEffect(()=>{v()}),n.useLayoutEffect(()=>{const e=m.current;if(e&&window.ResizeObserver){const t=new ResizeObserver(v);return t.observe(e),()=>t.disconnect()}},[v]);const g=l.slice(0,u),b=l.slice(u);return t("div",{ref:m,className:"pn:flex pn:w-full pn:items-center",style:{gap:f},children:[g.map(t=>e(n.Fragment,{children:c(t)},t)),b.length>0&&t(a,{children:[e(o,{render:e(s,{variant:"ghost",size:"icon-sm","aria-label":"More",onMouseDownCapture:e=>{e.preventDefault()},children:e(r,{className:"pn:size-4"})})}),e(i,{side:"bottom",className:"pn:w-auto pn:p-2.5",initialFocus:!1,children:e("div",{style:{display:"flex",gap:f},children:b.map(t=>e(n.Fragment,{children:c(t)},t))})})]}),t("div",{ref:d,"aria-hidden":!0,className:"pn:pointer-events-none pn:absolute pn:-z-10 pn:flex pn:items-center pn:opacity-0",style:{left:0,top:0,gap:f},children:[l.map(t=>e(n.Fragment,{children:c(t)},t)),e(s,{variant:"ghost",size:"icon-sm","data-overflow":"true",children:e(r,{className:"pn:size-4"})})]})]})};export{l as OverflowList};

package/primitives/speed-control.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export declare const SPEED_MIN = 0.25;
+export declare const SPEED_MAX = 2;
+export declare function SpeedControl({ value, onChange, }: {
+    value: number;
+    onChange: (speed: number) => void;
+}): React.JSX.Element;

package/primitives/speed-control.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Slider as n}from"./slider.js";import{NumericInput as i}from"./numeric-input.js";import{clamp as r,firstSliderValue as s}from"../lib/utils.js";export const SPEED_MIN=.25;export const SPEED_MAX=2;export function SpeedControl({value:o,onChange:l}){const a=e=>l(r(e,.25,2));return t("div",{style:{display:"flex",alignItems:"center",gap:"10px",width:"100%"},children:[e("div",{style:{flex:1},children:e(n,{value:[o],min:.25,max:2,step:.05,onValueChange:e=>a(s(e))})}),e(i,{value:o,onValueChange:a,style:{width:"64px"},min:.25,max:2,step:.05})]})}

package/side-panel/select-video.d.ts

@@ -81,6 +81,7 @@ export declare const selectVideo: ({ src, droppedPos, targetElement, store, attr
     startTime: import("mobx-state-tree").IType<number | undefined, number, number>;
     endTime: import("mobx-state-tree").IType<number | undefined, number, number>;
     volume: import("mobx-state-tree").IType<number | undefined, number, number>;
+    speed: import("mobx-state-tree").IType<number | undefined, number, number>;
 }> & {
     readonly page: any;
     readonly store: any;
@@ -241,6 +242,7 @@ export declare const selectVideo: ({ src, droppedPos, targetElement, store, attr
     startTime: import("mobx-state-tree").IType<number | undefined, number, number>;
     endTime: import("mobx-state-tree").IType<number | undefined, number, number>;
     volume: import("mobx-state-tree").IType<number | undefined, number, number>;
+    speed: import("mobx-state-tree").IType<number | undefined, number, number>;
 }, {
     readonly page: any;
     readonly store: any;

package/toolbar/element-container.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{OverflowList as r}from"../primitives/overflow-list.js";export const extendToolbar=({type:e,usedItems:t,components:r})=>{const n=[];return Object.keys(r||{}).forEach(o=>{0===o.toLowerCase().indexOf(e)&&o.toLowerCase()!==e&&(r[o]?t.includes(o)||n.push(o):console.error(`Polotno error: Toolbar has invalid React component "${o}"`))}),t.filter(e=>Boolean(e)).concat(n)};export const ElementContainer=({items:n,itemRender:o})=>{const[s,i]=t.useState(0),c=t.useRef(null),a=()=>{if(null===c.current){return}const e=c.current.parentElement;let t=0;e&&(Array.from(e.children).forEach(e=>{e!==c.current&&(t+=e.offsetWidth)}),i(Math.max(44,e.offsetWidth-t-10)))};return t.useLayoutEffect(()=>{a()}),t.useLayoutEffect(()=>{const e=c.current.parentElement,t=null==e?void 0:e.parentElement;if(window.ResizeObserver){const r=new ResizeObserver(a);e&&r.observe(e),t&&r.observe(t);const n=new MutationObserver(a);return e&&n.observe(e,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["style","class"]}),()=>{r.disconnect(),n.disconnect()}}{const e=setInterval(a,100);return()=>clearInterval(e)}},[]),e("div",{style:{width:s+"px"},ref:c,className:"pn-element-container pn:flex pn:items-center pn:max-md:!w-auto pn:pn-mobile:!w-auto",children:e(r,{items:n,itemRender:o})})};
+import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{OverflowList as r}from"../primitives/overflow-list.js";export const extendToolbar=({type:e,usedItems:t,components:r})=>{const n=[];return Object.keys(r||{}).forEach(o=>{0===o.toLowerCase().indexOf(e)&&o.toLowerCase()!==e&&(r[o]?t.includes(o)||n.push(o):console.error(`Polotno error: Toolbar has invalid React component "${o}"`))}),t.filter(e=>Boolean(e)).concat(n)};export const ElementContainer=({items:n,itemRender:o})=>{const[s,i]=t.useState(0),a=t.useRef(null),c=()=>{if(null===a.current){return}const e=a.current.parentElement;let t=0;e&&(Array.from(e.children).forEach(e=>{e!==a.current&&(t+=e.offsetWidth)}),i(Math.max(44,e.offsetWidth-t-10)))};return t.useLayoutEffect(()=>{c()}),t.useLayoutEffect(()=>{const e=a.current.parentElement,t=null==e?void 0:e.parentElement;if(window.ResizeObserver){const r=new ResizeObserver(c);e&&r.observe(e),t&&r.observe(t);const n=new MutationObserver(c);return e&&n.observe(e,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["style","class"]}),()=>{r.disconnect(),n.disconnect()}}{const e=setInterval(c,100);return()=>clearInterval(e)}},[]),e("div",{style:{width:s+"px"},ref:a,className:"pn-element-container pn:flex pn:items-center pn:max-md:!w-auto pn:pn-mobile:!w-auto",children:e(r,{items:n,itemRender:o,gap:6})})};

package/toolbar/figure-toolbar.js

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

package/toolbar/line-toolbar.js

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

package/toolbar/svg-toolbar.js

@@ -1 +1 @@
-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;
+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 c,PopoverContent as p,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 b}from"./animations-picker.js";import{flags as x}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),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)))),b=g.size>0;return r(c,{children:[e(m,{nativeButton:!1,render:e(u,{background:v,"aria-label":n("toolbar.colorPicker.colors")})}),r(p,{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")}),b&&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:b};export const SvgToolbar=o(({store:r,hideSvgEffects:o,components:t})=>{const n=r.selectedElements,s=["SvgFlip",!o&&"SvgFilters","SvgColors",x.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 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;
+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,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-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 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;
+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: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,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/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,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;
+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 d}from"../lib/utils.js";import{Input as l}from"../primitives/input.js";import{NumericInput as m}from"../primitives/numeric-input.js";import{SpeedControl as p}from"../primitives/speed-control.js";import{Slider as c}from"../primitives/slider.js";import{Popover as h,PopoverContent as u,PopoverTrigger as v}from"../primitives/popover.js";import{Tooltip as g,TooltipContent as f,TooltipTrigger as x}from"../primitives/tooltip.js";import{AnimationsPicker as b}from"./animations-picker.js";import{flags as w}from"../utils/flags.js";import{getVideoDuration as y,getVideoObjectPreview as C,getVideoSize as V}from"../utils/video.js";import{t as j}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 V(o.src),i=e/t,{src:s}=o,d=r.current.offsetHeight,l=r.current.offsetWidth,m=d*i,p=Math.ceil(l/m),c=await y(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 C(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(h,{onOpenChange:e=>{e&&setTimeout(d,0)},children:[e(v,{render:t(s,{variant:"ghost",size:"sm",children:[e(T,{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(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 E=o(({element:i})=>{const o=Math.round(100*i.volume),r=e=>{i.set({volume:e/100})};return t(h,{children:[t(g,{children:[e(x,{render:e(v,{render:e(s,{variant:"ghost",size:"icon-sm","aria-label":j("toolbar.volume"),children:e(T,{name:"action.unmuted",className:"pn:size-4"})})})}),e(f,{children:j("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(c,{value:[o],onValueChange:e=>{r(d(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})]})})]})}),z=o(({element:i})=>t(h,{children:[t(g,{children:[e(x,{render:e(v,{render:t(s,{variant:"ghost",size:"sm","aria-label":j("toolbar.speed"),children:[e(T,{name:"toolbar.duration",className:"pn:size-4"}),i.speed,"×"]})})}),e(f,{children:j("toolbar.speed")})]}),t(u,{style:{padding:"10px",width:"250px"},align:"start",children:[e("div",{style:{fontSize:"12px",marginBottom:"8px"},children:j("toolbar.speed")}),e(p,{value:i.speed,onChange:e=>i.set({speed:e})})]})]}));export const VideoClip=o(({element:t,store:i})=>t.contentEditable?t.clipSrc?e(s,{variant:"ghost",size:"sm",onClickCapture:()=>{t.set({clipSrc:""})},children:j("toolbar.removeClip")}):e(s,{variant:"ghost",size:"sm",onClickCapture:e=>{e.stopPropagation(),i.openSidePanel("image-clip")},children:j("toolbar.clip")}):null);const k={VideoTrim,VideoAnimations:b,VideoVolume:E,VideoSpeed:z,VideoClip};export const VideoToolbar=o(({store:t,components:i})=>{const o=t.selectedElements,s=["VideoTrim","VideoVolume","VideoSpeed","VideoClip",w.animationsEnabled&&"VideoAnimations"],a=n({type:"video",usedItems:s,components:i});return e(r,{items:a,itemRender:r=>{const n=i[r]||k[r];return e(n,{elements:o,element:o[0],store:t},r)}})});export default VideoToolbar;