polotno 4.0.2 → 4.1.0

package/primitives/dropdown-menu.d.ts

@@ -9,6 +9,7 @@ declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<Omit<imp
     sideOffset?: PositionerProps["sideOffset"];
     align?: PositionerProps["align"];
     alignOffset?: PositionerProps["alignOffset"];
+    anchor?: PositionerProps["anchor"];
 }, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof MenuPrimitive.Group>): React.JSX.Element;
 declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ContextMenuItemProps, "ref"> & React.RefAttributes<HTMLElement> & {

package/primitives/dropdown-menu.js

@@ -1 +1 @@
-var e=this&&this.__rest||function(e,n){var t={};for(var a in e){Object.prototype.hasOwnProperty.call(e,a)&&n.indexOf(a)<0&&(t[a]=e[a])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(a=Object.getOwnPropertySymbols(e);s<a.length;s++){n.indexOf(a[s])<0&&Object.prototype.propertyIsEnumerable.call(e,a[s])&&(t[a[s]]=e[a[s]])}}return t};import{jsx as n,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{CheckIcon as s,ChevronRightIcon as o,CircleIcon as r}from"lucide-react";import{Menu as i}from"@base-ui/react/menu";import{cn as p}from"../lib/utils.js";import{usePortalScope as d}from"./portal-scope.js";function l(t){var a=e(t,[]);return n(i.Root,Object.assign({"data-slot":"dropdown-menu"},a))}function c(t){var a=e(t,[]);return n(i.Portal,Object.assign({"data-slot":"dropdown-menu-portal"},a))}function m(t){var a=e(t,[]);return n(i.Trigger,Object.assign({"data-slot":"dropdown-menu-trigger"},a))}const u=a.forwardRef((t,a)=>{var{className:s,side:o,align:r="start",sideOffset:l=4,alignOffset:c}=t,m=e(t,["className","side","align","sideOffset","alignOffset"]);const u=d(),{container:f,className:g}=u,h=e(u,["container","className"]);return n(i.Portal,{container:f,children:n(i.Positioner,{side:o,align:r,sideOffset:l,alignOffset:c,positionMethod:"fixed",className:"pn:z-50",children:n(i.Popup,Object.assign({ref:a,"data-slot":"dropdown-menu-content"},h,{className:p(g,"pn:z-50 max-h-(--available-height) pn:min-w-[8rem] origin-(--transform-origin) pn:overflow-x-hidden pn:overflow-y-auto pn:rounded-md pn:border pn:bg-popover pn:p-1 pn:text-popover-foreground pn:shadow-md pn:data-[side=bottom]:slide-in-from-top-2 pn:data-[side=left]:slide-in-from-right-2 pn:data-[side=right]:slide-in-from-left-2 pn:data-[side=top]:slide-in-from-bottom-2 pn:data-[closed]:animate-out pn:data-[closed]:fade-out-0 pn:data-[closed]:zoom-out-95 pn:data-[open]:animate-in pn:data-[open]:fade-in-0 pn:data-[open]:zoom-in-95",s)},m))})})});function f(t){var a=e(t,[]);return n(i.Group,Object.assign({"data-slot":"dropdown-menu-group"},a))}u.displayName="DropdownMenuContent";const g=a.forwardRef((t,a)=>{var{className:s,inset:o,variant:r="default",onSelect:d,onClick:l}=t,c=e(t,["className","inset","variant","onSelect","onClick"]);return n(i.Item,Object.assign({ref:a,"data-slot":"dropdown-menu-item","data-inset":o,"data-variant":r,className:p("pn:relative pn:flex pn:cursor-default pn:items-center pn:gap-2 pn:rounded-sm pn:px-2 pn:py-1.5 pn:text-sm pn:outline-hidden pn:select-none pn:data-highlighted:bg-accent pn:data-highlighted:text-accent-foreground pn:data-[disabled]:pointer-events-none pn:data-[disabled]:opacity-50 pn:data-[inset]:pl-8 pn:data-[variant=destructive]:text-destructive pn:data-[variant=destructive]:data-highlighted:bg-destructive/10 pn:data-[variant=destructive]:data-highlighted:text-destructive pn:dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 pn:[&_svg]:pointer-events-none pn:[&_svg]:shrink-0 pn:[&_svg:not([class*='size-'])]:size-4 pn:[&_svg:not([class*='text-'])]:text-muted-foreground pn:data-[variant=destructive]:*:[svg]:text-destructive!",s),onClick:e=>{null==l||l(e),null==d||d(e)}},c))});g.displayName="DropdownMenuItem";const h=a.forwardRef((a,o)=>{var{className:r,children:d,checked:l}=a,c=e(a,["className","children","checked"]);return t(i.CheckboxItem,Object.assign({ref:o,"data-slot":"dropdown-menu-checkbox-item",className:p("pn:relative pn:flex pn:cursor-default pn:items-center pn:gap-2 pn:rounded-sm pn:py-1.5 pn:pr-2 pn:pl-8 pn:text-sm pn:outline-hidden pn:select-none pn:data-highlighted:bg-accent pn:data-highlighted:text-accent-foreground pn:data-[disabled]:pointer-events-none pn:data-[disabled]:opacity-50 pn:[&_svg]:pointer-events-none pn:[&_svg]:shrink-0 pn:[&_svg:not([class*='size-'])]:size-4",r),checked:l},c,{children:[n("span",{className:"pn:pointer-events-none pn:absolute pn:left-2 pn:flex pn:size-3.5 pn:items-center pn:justify-center",children:n(i.CheckboxItemIndicator,{children:n(s,{className:"pn:size-4"})})}),d]}))});function v(t){var a=e(t,[]);return n(i.RadioGroup,Object.assign({"data-slot":"dropdown-menu-radio-group"},a))}h.displayName="DropdownMenuCheckboxItem";const b=a.forwardRef((a,s)=>{var{className:o,children:d}=a,l=e(a,["className","children"]);return t(i.RadioItem,Object.assign({ref:s,"data-slot":"dropdown-menu-radio-item",className:p("pn:relative pn:flex pn:cursor-default pn:items-center pn:gap-2 pn:rounded-sm pn:py-1.5 pn:pr-2 pn:pl-8 pn:text-sm pn:outline-hidden pn:select-none pn:data-highlighted:bg-accent pn:data-highlighted:text-accent-foreground pn:data-[disabled]:pointer-events-none pn:data-[disabled]:opacity-50 pn:[&_svg]:pointer-events-none pn:[&_svg]:shrink-0 pn:[&_svg:not([class*='size-'])]:size-4",o)},l,{children:[n("span",{className:"pn:pointer-events-none pn:absolute pn:left-2 pn:flex pn:size-3.5 pn:items-center pn:justify-center",children:n(i.RadioItemIndicator,{children:n(r,{className:"pn:size-2 pn:fill-current"})})}),d]}))});b.displayName="DropdownMenuRadioItem";const x=a.forwardRef((t,a)=>{var{className:s,inset:o}=t,r=e(t,["className","inset"]);return n(i.GroupLabel,Object.assign({ref:a,"data-slot":"dropdown-menu-label","data-inset":o,className:p("pn:px-2 pn:py-1.5 pn:text-sm pn:font-medium pn:data-[inset]:pl-8",s)},r))});x.displayName="DropdownMenuLabel";const N=a.forwardRef((t,a)=>{var{className:s}=t,o=e(t,["className"]);return n(i.Separator,Object.assign({ref:a,"data-slot":"dropdown-menu-separator",className:p("pn:-mx-1 pn:my-1 pn:h-px pn:bg-border",s)},o))});N.displayName="DropdownMenuSeparator";const w=a.forwardRef((t,a)=>{var{className:s}=t,o=e(t,["className"]);return n("span",Object.assign({ref:a,"data-slot":"dropdown-menu-shortcut",className:p("pn:ml-auto pn:text-xs pn:tracking-widest pn:text-muted-foreground",s)},o))});function O(t){var a=e(t,[]);return n(i.SubmenuRoot,Object.assign({"data-slot":"dropdown-menu-sub"},a))}w.displayName="DropdownMenuShortcut";const y=a.forwardRef((a,s)=>{var{className:r,inset:d,children:l}=a,c=e(a,["className","inset","children"]);return t(i.SubmenuTrigger,Object.assign({ref:s,"data-slot":"dropdown-menu-sub-trigger","data-inset":d,className:p("pn:flex pn:cursor-default pn:items-center pn:gap-2 pn:rounded-sm pn:px-2 pn:py-1.5 pn:text-sm pn:outline-hidden pn:select-none pn:data-highlighted:bg-accent pn:data-highlighted:text-accent-foreground pn:data-[inset]:pl-8 pn:data-[popup-open]:bg-accent pn:data-[popup-open]:text-accent-foreground pn:[&_svg]:pointer-events-none pn:[&_svg]:shrink-0 pn:[&_svg:not([class*='size-'])]:size-4 pn:[&_svg:not([class*='text-'])]:text-muted-foreground",r)},c,{children:[l,n(o,{className:"pn:ml-auto pn:size-4"})]}))});y.displayName="DropdownMenuSubTrigger";const j=a.forwardRef((t,a)=>{var{className:s,side:o="right",align:r="start",sideOffset:l=0,alignOffset:c=-3}=t,m=e(t,["className","side","align","sideOffset","alignOffset"]);const u=d(),{container:f,className:g}=u,h=e(u,["container","className"]);return n(i.Portal,{container:f,children:n(i.Positioner,{side:o,align:r,sideOffset:l,alignOffset:c,positionMethod:"fixed",className:"pn:z-50",children:n(i.Popup,Object.assign({ref:a,"data-slot":"dropdown-menu-sub-content"},h,{className:p(g,"pn:z-50 pn:min-w-[8rem] origin-(--transform-origin) pn:overflow-hidden pn:rounded-md pn:border pn:bg-popover pn:p-1 pn:text-popover-foreground pn:shadow-lg pn:data-[side=bottom]:slide-in-from-top-2 pn:data-[side=left]:slide-in-from-right-2 pn:data-[side=right]:slide-in-from-left-2 pn:data-[side=top]:slide-in-from-bottom-2 pn:data-[closed]:animate-out pn:data-[closed]:fade-out-0 pn:data-[closed]:zoom-out-95 pn:data-[open]:animate-in pn:data-[open]:fade-in-0 pn:data-[open]:zoom-in-95",s)},m))})})});j.displayName="DropdownMenuSubContent";export{l as DropdownMenu,c as DropdownMenuPortal,m as DropdownMenuTrigger,u as DropdownMenuContent,f as DropdownMenuGroup,x as DropdownMenuLabel,g as DropdownMenuItem,h as DropdownMenuCheckboxItem,v as DropdownMenuRadioGroup,b as DropdownMenuRadioItem,N as DropdownMenuSeparator,w as DropdownMenuShortcut,O as DropdownMenuSub,y as DropdownMenuSubTrigger,j as DropdownMenuSubContent};
+var e=this&&this.__rest||function(e,n){var t={};for(var a in e){Object.prototype.hasOwnProperty.call(e,a)&&n.indexOf(a)<0&&(t[a]=e[a])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(a=Object.getOwnPropertySymbols(e);s<a.length;s++){n.indexOf(a[s])<0&&Object.prototype.propertyIsEnumerable.call(e,a[s])&&(t[a[s]]=e[a[s]])}}return t};import{jsx as n,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{CheckIcon as s,ChevronRightIcon as o,CircleIcon as r}from"lucide-react";import{Menu as i}from"@base-ui/react/menu";import{cn as p}from"../lib/utils.js";import{usePortalScope as d}from"./portal-scope.js";function l(t){var a=e(t,[]);return n(i.Root,Object.assign({"data-slot":"dropdown-menu"},a))}function c(t){var a=e(t,[]);return n(i.Portal,Object.assign({"data-slot":"dropdown-menu-portal"},a))}function m(t){var a=e(t,[]);return n(i.Trigger,Object.assign({"data-slot":"dropdown-menu-trigger"},a))}const u=a.forwardRef((t,a)=>{var{className:s,side:o,align:r="start",sideOffset:l=4,alignOffset:c,anchor:m}=t,u=e(t,["className","side","align","sideOffset","alignOffset","anchor"]);const f=d(),{container:g,className:h}=f,v=e(f,["container","className"]);return n(i.Portal,{container:g,children:n(i.Positioner,{side:o,align:r,sideOffset:l,alignOffset:c,anchor:m,positionMethod:"fixed",className:"pn:z-50",children:n(i.Popup,Object.assign({ref:a,"data-slot":"dropdown-menu-content"},v,{className:p(h,"pn:z-50 max-h-(--available-height) pn:min-w-[8rem] origin-(--transform-origin) pn:overflow-x-hidden pn:overflow-y-auto pn:rounded-md pn:border pn:bg-popover pn:p-1 pn:text-popover-foreground pn:shadow-md pn:data-[side=bottom]:slide-in-from-top-2 pn:data-[side=left]:slide-in-from-right-2 pn:data-[side=right]:slide-in-from-left-2 pn:data-[side=top]:slide-in-from-bottom-2 pn:data-[closed]:animate-out pn:data-[closed]:fade-out-0 pn:data-[closed]:zoom-out-95 pn:data-[open]:animate-in pn:data-[open]:fade-in-0 pn:data-[open]:zoom-in-95",s)},u))})})});function f(t){var a=e(t,[]);return n(i.Group,Object.assign({"data-slot":"dropdown-menu-group"},a))}u.displayName="DropdownMenuContent";const g=a.forwardRef((t,a)=>{var{className:s,inset:o,variant:r="default",onSelect:d,onClick:l}=t,c=e(t,["className","inset","variant","onSelect","onClick"]);return n(i.Item,Object.assign({ref:a,"data-slot":"dropdown-menu-item","data-inset":o,"data-variant":r,className:p("pn:relative pn:flex pn:cursor-default pn:items-center pn:gap-2 pn:rounded-sm pn:px-2 pn:py-1.5 pn:text-sm pn:outline-hidden pn:select-none pn:data-highlighted:bg-accent pn:data-highlighted:text-accent-foreground pn:data-[disabled]:pointer-events-none pn:data-[disabled]:opacity-50 pn:data-[inset]:pl-8 pn:data-[variant=destructive]:text-destructive pn:data-[variant=destructive]:data-highlighted:bg-destructive/10 pn:data-[variant=destructive]:data-highlighted:text-destructive pn:dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 pn:[&_svg]:pointer-events-none pn:[&_svg]:shrink-0 pn:[&_svg:not([class*='size-'])]:size-4 pn:[&_svg:not([class*='text-'])]:text-muted-foreground pn:data-[variant=destructive]:*:[svg]:text-destructive!",s),onClick:e=>{null==l||l(e),null==d||d(e)}},c))});g.displayName="DropdownMenuItem";const h=a.forwardRef((a,o)=>{var{className:r,children:d,checked:l}=a,c=e(a,["className","children","checked"]);return t(i.CheckboxItem,Object.assign({ref:o,"data-slot":"dropdown-menu-checkbox-item",className:p("pn:relative pn:flex pn:cursor-default pn:items-center pn:gap-2 pn:rounded-sm pn:py-1.5 pn:pr-2 pn:pl-8 pn:text-sm pn:outline-hidden pn:select-none pn:data-highlighted:bg-accent pn:data-highlighted:text-accent-foreground pn:data-[disabled]:pointer-events-none pn:data-[disabled]:opacity-50 pn:[&_svg]:pointer-events-none pn:[&_svg]:shrink-0 pn:[&_svg:not([class*='size-'])]:size-4",r),checked:l},c,{children:[n("span",{className:"pn:pointer-events-none pn:absolute pn:left-2 pn:flex pn:size-3.5 pn:items-center pn:justify-center",children:n(i.CheckboxItemIndicator,{children:n(s,{className:"pn:size-4"})})}),d]}))});function v(t){var a=e(t,[]);return n(i.RadioGroup,Object.assign({"data-slot":"dropdown-menu-radio-group"},a))}h.displayName="DropdownMenuCheckboxItem";const b=a.forwardRef((a,s)=>{var{className:o,children:d}=a,l=e(a,["className","children"]);return t(i.RadioItem,Object.assign({ref:s,"data-slot":"dropdown-menu-radio-item",className:p("pn:relative pn:flex pn:cursor-default pn:items-center pn:gap-2 pn:rounded-sm pn:py-1.5 pn:pr-2 pn:pl-8 pn:text-sm pn:outline-hidden pn:select-none pn:data-highlighted:bg-accent pn:data-highlighted:text-accent-foreground pn:data-[disabled]:pointer-events-none pn:data-[disabled]:opacity-50 pn:[&_svg]:pointer-events-none pn:[&_svg]:shrink-0 pn:[&_svg:not([class*='size-'])]:size-4",o)},l,{children:[n("span",{className:"pn:pointer-events-none pn:absolute pn:left-2 pn:flex pn:size-3.5 pn:items-center pn:justify-center",children:n(i.RadioItemIndicator,{children:n(r,{className:"pn:size-2 pn:fill-current"})})}),d]}))});b.displayName="DropdownMenuRadioItem";const x=a.forwardRef((t,a)=>{var{className:s,inset:o}=t,r=e(t,["className","inset"]);return n(i.GroupLabel,Object.assign({ref:a,"data-slot":"dropdown-menu-label","data-inset":o,className:p("pn:px-2 pn:py-1.5 pn:text-sm pn:font-medium pn:data-[inset]:pl-8",s)},r))});x.displayName="DropdownMenuLabel";const N=a.forwardRef((t,a)=>{var{className:s}=t,o=e(t,["className"]);return n(i.Separator,Object.assign({ref:a,"data-slot":"dropdown-menu-separator",className:p("pn:-mx-1 pn:my-1 pn:h-px pn:bg-border",s)},o))});N.displayName="DropdownMenuSeparator";const w=a.forwardRef((t,a)=>{var{className:s}=t,o=e(t,["className"]);return n("span",Object.assign({ref:a,"data-slot":"dropdown-menu-shortcut",className:p("pn:ml-auto pn:text-xs pn:tracking-widest pn:text-muted-foreground",s)},o))});function O(t){var a=e(t,[]);return n(i.SubmenuRoot,Object.assign({"data-slot":"dropdown-menu-sub"},a))}w.displayName="DropdownMenuShortcut";const y=a.forwardRef((a,s)=>{var{className:r,inset:d,children:l}=a,c=e(a,["className","inset","children"]);return t(i.SubmenuTrigger,Object.assign({ref:s,"data-slot":"dropdown-menu-sub-trigger","data-inset":d,className:p("pn:flex pn:cursor-default pn:items-center pn:gap-2 pn:rounded-sm pn:px-2 pn:py-1.5 pn:text-sm pn:outline-hidden pn:select-none pn:data-highlighted:bg-accent pn:data-highlighted:text-accent-foreground pn:data-[inset]:pl-8 pn:data-[popup-open]:bg-accent pn:data-[popup-open]:text-accent-foreground pn:[&_svg]:pointer-events-none pn:[&_svg]:shrink-0 pn:[&_svg:not([class*='size-'])]:size-4 pn:[&_svg:not([class*='text-'])]:text-muted-foreground",r)},c,{children:[l,n(o,{className:"pn:ml-auto pn:size-4"})]}))});y.displayName="DropdownMenuSubTrigger";const j=a.forwardRef((t,a)=>{var{className:s,side:o="right",align:r="start",sideOffset:l=0,alignOffset:c=-3}=t,m=e(t,["className","side","align","sideOffset","alignOffset"]);const u=d(),{container:f,className:g}=u,h=e(u,["container","className"]);return n(i.Portal,{container:f,children:n(i.Positioner,{side:o,align:r,sideOffset:l,alignOffset:c,positionMethod:"fixed",className:"pn:z-50",children:n(i.Popup,Object.assign({ref:a,"data-slot":"dropdown-menu-sub-content"},h,{className:p(g,"pn:z-50 pn:min-w-[8rem] origin-(--transform-origin) pn:overflow-hidden pn:rounded-md pn:border pn:bg-popover pn:p-1 pn:text-popover-foreground pn:shadow-lg pn:data-[side=bottom]:slide-in-from-top-2 pn:data-[side=left]:slide-in-from-right-2 pn:data-[side=right]:slide-in-from-left-2 pn:data-[side=top]:slide-in-from-bottom-2 pn:data-[closed]:animate-out pn:data-[closed]:fade-out-0 pn:data-[closed]:zoom-out-95 pn:data-[open]:animate-in pn:data-[open]:fade-in-0 pn:data-[open]:zoom-in-95",s)},m))})})});j.displayName="DropdownMenuSubContent";export{l as DropdownMenu,c as DropdownMenuPortal,m as DropdownMenuTrigger,u as DropdownMenuContent,f as DropdownMenuGroup,x as DropdownMenuLabel,g as DropdownMenuItem,h as DropdownMenuCheckboxItem,v as DropdownMenuRadioGroup,b as DropdownMenuRadioItem,N as DropdownMenuSeparator,w as DropdownMenuShortcut,O as DropdownMenuSub,y as DropdownMenuSubTrigger,j as DropdownMenuSubContent};

package/primitives/floating-control.d.ts

@@ -0,0 +1 @@
+export declare const floatingControl: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/primitives/floating-control.js

@@ -0,0 +1,2 @@
+import { cva } from "class-variance-authority";
+export const floatingControl = cva("pn:h-[35px] pn:rounded-md pn:bg-background pn:shadow-md");

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/separator.js

@@ -1 +1 @@
-var t=this&&this.__rest||function(t,r){var a={};for(var o in t){Object.prototype.hasOwnProperty.call(t,o)&&r.indexOf(o)<0&&(a[o]=t[o])}if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var e=0;for(o=Object.getOwnPropertySymbols(t);e<o.length;e++){r.indexOf(o[e])<0&&Object.prototype.propertyIsEnumerable.call(t,o[e])&&(a[o[e]]=t[o[e]])}}return a};import{jsx as r}from"react/jsx-runtime";import*as a from"react";import{Separator as o}from"@base-ui/react/separator";import{cn as e}from"../lib/utils.js";const n=a.forwardRef((a,n)=>{var{className:i,orientation:s="horizontal"}=a,p=t(a,["className","orientation"]);return r(o,Object.assign({ref:n,"data-slot":"separator",orientation:s,className:e("pn:shrink-0 pn:bg-border pn:data-[orientation=horizontal]:h-px pn:data-[orientation=horizontal]:w-full pn:data-[orientation=vertical]:w-px pn:data-[orientation=vertical]:self-stretch",i)},p))});n.displayName="Separator";export{n as Separator};
+var t=this&&this.__rest||function(t,r){var a={};for(var o in t){Object.prototype.hasOwnProperty.call(t,o)&&r.indexOf(o)<0&&(a[o]=t[o])}if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var e=0;for(o=Object.getOwnPropertySymbols(t);e<o.length;e++){r.indexOf(o[e])<0&&Object.prototype.propertyIsEnumerable.call(t,o[e])&&(a[o[e]]=t[o[e]])}}return a};import{jsx as r}from"react/jsx-runtime";import*as a from"react";import{Separator as o}from"@base-ui/react/separator";import{cn as e}from"../lib/utils.js";const n=a.forwardRef((a,n)=>{var{className:i,orientation:s="horizontal"}=a,p=t(a,["className","orientation"]);return r(o,Object.assign({ref:n,"data-slot":"separator",orientation:s,className:e("pn:shrink-0 pn:bg-border pn:data-[orientation=horizontal]:h-px pn:data-[orientation=horizontal]:w-full pn:data-[orientation=vertical]:h-full pn:data-[orientation=vertical]:w-px",i)},p))});n.displayName="Separator";export{n as Separator};

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/side-panel/side-panel.js

@@ -1 +1 @@
-import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as o from"react";import{observer as a}from"mobx-react-lite";import{flags as t}from"../utils/flags.js";import{useMobile as i}from"../utils/screen.js";import{t as l}from"../utils/l10n.js";import{cn as s}from"../lib/utils.js";import{PolotnoScope as p}from"../primitives/portal-scope.js";import{SectionTab as r}from"./tab-button.js";import{TemplatesPanel as m}from"./templates-panel.js";import{TextPanel as d}from"./text-panel.js";import{PhotosPanel as c}from"./photos-panel.js";import{ElementsPanel as b}from"./elements-panel.js";import{UploadPanel as f}from"./upload-panel.js";import{BackgroundPanel as u}from"./background-panel.js";import{PagesPanel as x}from"./pages-panel.js";import{LayersPanel as P}from"./layers-panel.js";import{SizePanel as h}from"./size-panel.js";import{DrawPanel as S}from"./draw-panel.js";import{VideosPanel as g}from"./videos-panel.js";import{ImageClipPanel as j}from"./image-clip-panel.js";import{AnimationsPanel as w}from"./animations-panel.js";import{EffectsPanel as v}from"./effects-panel.js";import{PolotnoIcon as T}from"../icons/registry.js";export{SectionTab}from"./tab-button.js";export{ImagesGrid}from"./images-grid.js";export const TemplatesSection={name:"templates",Tab:a(n=>e(r,Object.assign({name:l("sidePanel.templates")},n,{children:e(T,{name:"sidePanel.templates"})}))),Panel:({store:n})=>e(m,{store:n})};export const TextSection={name:"text",Tab:a(n=>e(r,Object.assign({name:l("sidePanel.text")},n,{children:e(T,{name:"sidePanel.text"})}))),Panel:({store:n})=>e(d,{store:n})};export const PhotosSection={name:"photos",Tab:a(n=>e(r,Object.assign({name:l("sidePanel.photos")},n,{children:e(T,{name:"sidePanel.photos"})}))),Panel:({store:n})=>e(c,{store:n})};export const ElementsSection={name:"elements",Tab:a(n=>e(r,Object.assign({name:l("sidePanel.elements"),iconSize:16},n,{children:e(T,{name:"sidePanel.elements"})}))),Panel:({store:n})=>e(b,{store:n})};export const UploadSection={name:"upload",Tab:a(n=>e(r,Object.assign({name:l("sidePanel.upload")},n,{children:e(T,{name:"sidePanel.upload"})}))),Panel:({store:n})=>e(f,{store:n})};export const BackgroundSection={name:"background",Tab:a(n=>e(r,Object.assign({name:l("sidePanel.background")},n,{children:e(T,{name:"sidePanel.background"})}))),Panel:({store:n})=>e(u,{store:n})};export const PagesSection={name:"pages",Tab:a(n=>e(r,Object.assign({name:l("sidePanel.pages")},n,{children:e(T,{name:"sidePanel.pages"})}))),Panel:({store:n})=>e(x,{store:n}),visibleInList:!1};export const LayersSection={name:"layers",Tab:a(n=>e(r,Object.assign({name:l("sidePanel.layers")},n,{children:e(T,{name:"sidePanel.layers"})}))),Panel:({store:n})=>e(P,{store:n})};export const SizeSection={name:"size",Tab:a(n=>e(r,Object.assign({name:l("sidePanel.resize")},n,{children:e(T,{name:"sidePanel.resize"})}))),Panel:({store:n})=>e(h,{store:n})};export const DrawSection={name:"draw",Tab:a(n=>e(r,Object.assign({name:l("sidePanel.draw")},n,{children:e(T,{name:"sidePanel.draw"})}))),Panel:({store:n})=>e(S,{store:n})};export const VideosSection={name:"videos",Tab:n=>e(r,Object.assign({name:l("sidePanel.videos")},n,{children:e(T,{name:"sidePanel.videos"})})),Panel:g};export const DEFAULT_SECTIONS=[TemplatesSection,TextSection,PhotosSection,ElementsSection,DrawSection,UploadSection,BackgroundSection,LayersSection,SizeSection];const k={name:"image-clip",Tab:()=>null,Panel:j},C={name:"effects",Tab:()=>null,Panel:v},N={name:"animation",Tab:()=>null,Panel:w};export const INTERNAL_SECTIONS=[k,C];const O=({onClick:o})=>n("div",{className:"pn-side-panel-hide-button pn:absolute pn:right-[-14px] pn:top-1/2 pn:z-10 pn:h-24 pn:w-[15px] pn:cursor-pointer pn:max-md:hidden pn:pn-mobile:hidden",onClick:o,children:[e("svg",{width:"15",height:"96",viewBox:"0 0 16 96",xmlns:"http://www.w3.org/2000/svg",children:e("path",{className:"pn:stroke-border pn:fill-background",d:"M 1 7 C 2 9 4 10 7.2 13.28 C 7.45 13.4625 7.6 13.6 7.7 13.8048 L 7.8 13.8 C 9.8 15.8 11.6 17.6 12.9 19.7 C 14 21.6 14.7 23.9 14.9 27 H 15 V 68 C 15 71.7 14.3 74.3 13 76.6 C 11.7 78.8 9.9 80.5 7.8 82.6344 L 7.79 82.6 C 7.6 82.8 7.4507 83 7.2729 83.2127 C 3.9102 86.5228 2 87 1 90"})}),e("div",{className:"pn:absolute pn:left-1/2 pn:top-1/2 pn:text-[0.5rem] pn:text-muted-foreground pn:hover:text-foreground",style:{transform:"translate(-50%, -50%) scaleY(2)"},children:"<"})]});export const SidePanel=a(({store:a,sections:l,defaultSection:r="photos"})=>{(()=>{const e=o.useRef(!0);e.current&&(e.current=!1,a.openSidePanel(r))})();const m=i();o.useLayoutEffect(()=>{m?a.openSidePanel(""):a.openSidePanel(r)},[m]);const d=[...l||DEFAULT_SECTIONS];if(INTERNAL_SECTIONS.forEach(e=>{d.find(n=>n.name===e.name)||d.push(e)}),t.animationsEnabled){if(!d.find(e=>"videos"===e.name)){const e=Math.floor(d.length/2);d.splice(e,0,VideosSection)}if(!d.find(e=>"animations"===e.name)){const e=Math.floor(d.length/2);d.splice(e,0,N)}}const c=d.filter(e=>{var n;return null===(n=e.visibleInList)||void 0===n||n}),b=e=>{const n=e.target,o=n.closest(".polotno-close-panel"),t=n.closest(".polotno-mobile");o&&(m||t)&&a.openSidePanel("")},f=o.useRef(null),u=o.useRef(null),x=o.useRef(new Set);return a.openedSidePanel&&x.current.add(a.openedSidePanel),e(p,{elementRef:u,children:n("div",{ref:u,className:s("polotno-side-panel pn-side-panel pn:relative pn:flex pn:h-full pn:p-0","pn:md:border-r pn:md:border-border","pn:max-md:h-auto pn:max-md:w-full pn:pn-mobile:h-auto pn:pn-mobile:w-full",!a.openedSidePanel&&"collapsed"),children:[e("div",{ref:f,className:"polotno-side-tabs-container pn:max-md:w-full pn:max-md:overflow-auto pn:max-md:bg-background pn:pn-mobile:w-full pn:pn-mobile:overflow-auto pn:pn-mobile:bg-background pn:md:overflow-y-auto pn:md:overflow-x-hidden pn:md:min-w-[72px] pn:md:border-r pn:md:border-border",children:e("div",{className:"polotno-side-tabs-inner pn:flex pn:flex-col pn:max-md:flex-row pn:max-md:min-w-min pn:pn-mobile:flex-row pn:pn-mobile:min-w-min",children:c.map(({name:n,Tab:o})=>e(o,{active:n===a.openedSidePanel,onClick:()=>{n===a.openedSidePanel&&m?a.openSidePanel(""):a.openSidePanel(n)}},n))})}),d.map(({name:n,Panel:o})=>x.current.has(n)&&e("div",{className:s("polotno-panel-container pn-side-panel-content pn:h-full pn:px-2.5 pn:pt-2.5","pn:w-[var(--pn-sidebar-width,350px)]",!a.openedSidePanel&&"pn:w-0",n!==a.openedSidePanel&&"pn:hidden","pn:max-md:absolute pn:max-md:bottom-[54px] pn:max-md:z-[100] pn:max-md:!h-[50vh] pn:max-md:w-full pn:max-md:bg-background","pn:pn-mobile:absolute pn:pn-mobile:bottom-[54px] pn:pn-mobile:z-[100] pn:pn-mobile:!h-[50vh] pn:pn-mobile:w-full pn:pn-mobile:bg-background"),onClick:b,children:e(o,{store:a})},n)),a.openedSidePanel&&m&&e("div",{className:"polotno-close-panel",style:{position:"absolute",left:0,bottom:"72px",width:"100vw",height:"100vh",zIndex:99,backgroundColor:"rgba(0,0,0,0.05)"},onClick:()=>a.openSidePanel("")}),a.openedSidePanel&&e(O,{onClick:()=>a.openSidePanel("")})]})})});SidePanel.displayName="SidePanel";export default SidePanel;
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as o from"react";import{observer as a}from"mobx-react-lite";import{flags as t}from"../utils/flags.js";import{useMobile as i}from"../utils/screen.js";import{t as l}from"../utils/l10n.js";import{cn as s}from"../lib/utils.js";import{PolotnoScope as p}from"../primitives/portal-scope.js";import{SectionTab as r}from"./tab-button.js";import{TemplatesPanel as m}from"./templates-panel.js";import{TextPanel as d}from"./text-panel.js";import{PhotosPanel as c}from"./photos-panel.js";import{ElementsPanel as b}from"./elements-panel.js";import{UploadPanel as f}from"./upload-panel.js";import{BackgroundPanel as u}from"./background-panel.js";import{PagesPanel as P}from"./pages-panel.js";import{LayersPanel as x}from"./layers-panel.js";import{SizePanel as h}from"./size-panel.js";import{DrawPanel as S}from"./draw-panel.js";import{VideosPanel as g}from"./videos-panel.js";import{ImageClipPanel as j}from"./image-clip-panel.js";import{AnimationsPanel as w}from"./animations-panel.js";import{EffectsPanel as v}from"./effects-panel.js";import{PolotnoIcon as T}from"../icons/registry.js";export{SectionTab}from"./tab-button.js";export{ImagesGrid}from"./images-grid.js";export const TemplatesSection={name:"templates",Tab:a(n=>e(r,Object.assign({name:l("sidePanel.templates")},n,{children:e(T,{name:"sidePanel.templates"})}))),Panel:({store:n})=>e(m,{store:n})};export const TextSection={name:"text",Tab:a(n=>e(r,Object.assign({name:l("sidePanel.text")},n,{children:e(T,{name:"sidePanel.text"})}))),Panel:({store:n})=>e(d,{store:n})};export const PhotosSection={name:"photos",Tab:a(n=>e(r,Object.assign({name:l("sidePanel.photos")},n,{children:e(T,{name:"sidePanel.photos"})}))),Panel:({store:n})=>e(c,{store:n})};export const ElementsSection={name:"elements",Tab:a(n=>e(r,Object.assign({name:l("sidePanel.elements"),iconSize:16},n,{children:e(T,{name:"sidePanel.elements"})}))),Panel:({store:n})=>e(b,{store:n})};export const UploadSection={name:"upload",Tab:a(n=>e(r,Object.assign({name:l("sidePanel.upload")},n,{children:e(T,{name:"sidePanel.upload"})}))),Panel:({store:n})=>e(f,{store:n})};export const BackgroundSection={name:"background",Tab:a(n=>e(r,Object.assign({name:l("sidePanel.background")},n,{children:e(T,{name:"sidePanel.background"})}))),Panel:({store:n})=>e(u,{store:n})};export const PagesSection={name:"pages",Tab:a(n=>e(r,Object.assign({name:l("sidePanel.pages")},n,{children:e(T,{name:"sidePanel.pages"})}))),Panel:({store:n})=>e(P,{store:n}),visibleInList:!1};export const LayersSection={name:"layers",Tab:a(n=>e(r,Object.assign({name:l("sidePanel.layers")},n,{children:e(T,{name:"sidePanel.layers"})}))),Panel:({store:n})=>e(x,{store:n})};export const SizeSection={name:"size",Tab:a(n=>e(r,Object.assign({name:l("sidePanel.resize")},n,{children:e(T,{name:"sidePanel.resize"})}))),Panel:({store:n})=>e(h,{store:n})};export const DrawSection={name:"draw",Tab:a(n=>e(r,Object.assign({name:l("sidePanel.draw")},n,{children:e(T,{name:"sidePanel.draw"})}))),Panel:({store:n})=>e(S,{store:n})};export const VideosSection={name:"videos",Tab:n=>e(r,Object.assign({name:l("sidePanel.videos")},n,{children:e(T,{name:"sidePanel.videos"})})),Panel:g};export const DEFAULT_SECTIONS=[TemplatesSection,TextSection,PhotosSection,ElementsSection,DrawSection,UploadSection,BackgroundSection,LayersSection,SizeSection];const k={name:"image-clip",Tab:()=>null,Panel:j},C={name:"effects",Tab:()=>null,Panel:v},N={name:"animation",Tab:()=>null,Panel:w};export const INTERNAL_SECTIONS=[k,C];const O=({onClick:o})=>n("div",{className:"pn-side-panel-hide-button pn:absolute pn:right-[-14px] pn:top-1/2 pn:z-10 pn:h-24 pn:w-[15px] pn:cursor-pointer pn:max-md:hidden pn:pn-mobile:hidden",onClick:o,children:[e("svg",{width:"15",height:"96",viewBox:"0 0 16 96",xmlns:"http://www.w3.org/2000/svg",children:e("path",{className:"pn:stroke-border pn:fill-background",d:"M 1 7 C 2 9 4 10 7.2 13.28 C 7.45 13.4625 7.6 13.6 7.7 13.8048 L 7.8 13.8 C 9.8 15.8 11.6 17.6 12.9 19.7 C 14 21.6 14.7 23.9 14.9 27 H 15 V 68 C 15 71.7 14.3 74.3 13 76.6 C 11.7 78.8 9.9 80.5 7.8 82.6344 L 7.79 82.6 C 7.6 82.8 7.4507 83 7.2729 83.2127 C 3.9102 86.5228 2 87 1 90"})}),e("div",{className:"pn:absolute pn:left-1/2 pn:top-1/2 pn:text-[0.5rem] pn:text-muted-foreground pn:hover:text-foreground",style:{transform:"translate(-50%, -50%) scaleY(2)"},children:"<"})]});export const SidePanel=a(({store:a,sections:l,defaultSection:r="photos"})=>{(()=>{const e=o.useRef(!0);e.current&&(e.current=!1,a.openSidePanel(r))})();const m=i();o.useLayoutEffect(()=>{m?a.openSidePanel(""):a.openSidePanel(r)},[m]);const d=[...l||DEFAULT_SECTIONS];if(INTERNAL_SECTIONS.forEach(e=>{d.find(n=>n.name===e.name)||d.push(e)}),t.animationsEnabled){if(!d.find(e=>"videos"===e.name)){const e=Math.floor(d.length/2);d.splice(e,0,VideosSection)}if(!d.find(e=>"animations"===e.name)){const e=Math.floor(d.length/2);d.splice(e,0,N)}}const c=d.filter(e=>{var n;return null===(n=e.visibleInList)||void 0===n||n}),b=e=>{const n=e.target,o=n.closest(".polotno-close-panel"),t=n.closest(".polotno-mobile");o&&(m||t)&&a.openSidePanel("")},f=o.useRef(null),u=o.useRef(null),P=o.useRef(new Set);return a.openedSidePanel&&P.current.add(a.openedSidePanel),e(p,{elementRef:u,children:n("div",{ref:u,className:s("polotno-side-panel pn-side-panel pn:relative pn:flex pn:h-full pn:bg-background pn:p-0 pn:text-foreground","pn:md:border-r pn:md:border-border","pn:max-md:h-auto pn:max-md:w-full pn:pn-mobile:h-auto pn:pn-mobile:w-full",!a.openedSidePanel&&"collapsed"),children:[e("div",{ref:f,className:s("polotno-side-tabs-container pn:bg-background pn:max-md:w-full pn:max-md:overflow-auto pn:pn-mobile:w-full pn:pn-mobile:overflow-auto pn:md:overflow-y-auto pn:md:overflow-x-hidden pn:md:min-w-[72px]",a.openedSidePanel&&"pn:md:border-r pn:md:border-border"),children:e("div",{className:"polotno-side-tabs-inner pn:flex pn:flex-col pn:max-md:flex-row pn:max-md:min-w-min pn:pn-mobile:flex-row pn:pn-mobile:min-w-min",children:c.map(({name:n,Tab:o})=>e(o,{active:n===a.openedSidePanel,onClick:()=>{n===a.openedSidePanel&&m?a.openSidePanel(""):a.openSidePanel(n)}},n))})}),d.map(({name:n,Panel:o})=>P.current.has(n)&&e("div",{className:s("polotno-panel-container pn-side-panel-content pn:h-full pn:px-2.5 pn:pt-2.5","pn:w-[var(--pn-sidebar-width,350px)]",!a.openedSidePanel&&"pn:w-0",n!==a.openedSidePanel&&"pn:hidden","pn:max-md:absolute pn:max-md:bottom-[54px] pn:max-md:z-[100] pn:max-md:!h-[50vh] pn:max-md:w-full pn:max-md:bg-background","pn:pn-mobile:absolute pn:pn-mobile:bottom-[54px] pn:pn-mobile:z-[100] pn:pn-mobile:!h-[50vh] pn:pn-mobile:w-full pn:pn-mobile:bg-background"),onClick:b,children:e(o,{store:a})},n)),a.openedSidePanel&&m&&e("div",{className:"polotno-close-panel",style:{position:"absolute",left:0,bottom:"72px",width:"100vw",height:"100vh",zIndex:99,backgroundColor:"rgba(0,0,0,0.05)"},onClick:()=>a.openSidePanel("")}),a.openedSidePanel&&e(O,{onClick:()=>a.openSidePanel("")})]})})});SidePanel.displayName="SidePanel";export default SidePanel;

package/side-panel/size-panel.js

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

package/side-panel/tab-button.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
-export const SectionTab = ({ children, name, onClick, active, iconSize, }) => (_jsxs("div", { role: "button", onClick: onClick, className: cn("polotno-side-panel-tab pn-section-tab pn:w-full pn:cursor-pointer pn:whitespace-pre pn:text-center pn:text-[12px]", "pn:pt-[15px] pn:pl-[5px] pn:pr-[5px] pn:h-[72px]", "pn:max-md:h-[54px] pn:max-md:pt-[9px] pn:max-md:min-w-[72px] pn:max-md:w-min", "pn:pn-mobile:h-[54px] pn:pn-mobile:pt-[9px] pn:pn-mobile:min-w-[72px] pn:pn-mobile:w-min", "pn:hover:bg-[rgba(19,124,189,0.2)]", active && "active pn:bg-[rgba(19,124,189,0.2)]"), children: [_jsx("div", { style: { fontSize: (iconSize || 14) + "px" }, children: children }), _jsx("div", { style: { paddingTop: "5px" }, children: name })] }));
+export const SectionTab = ({ children, name, onClick, active, iconSize, }) => (_jsxs("div", { role: "button", onClick: onClick, className: cn("polotno-side-panel-tab pn-section-tab pn:w-full pn:cursor-pointer pn:whitespace-pre pn:text-center pn:text-[12px]", "pn:pt-[15px] pn:pl-[5px] pn:pr-[5px] pn:h-[72px]", "pn:max-md:h-[54px] pn:max-md:pt-[9px] pn:max-md:min-w-[72px] pn:max-md:w-min", "pn:pn-mobile:h-[54px] pn:pn-mobile:pt-[9px] pn:pn-mobile:min-w-[72px] pn:pn-mobile:w-min", "pn:hover:bg-sidebar-accent pn:hover:text-sidebar-accent-foreground", active && "active pn:bg-sidebar-accent pn:text-sidebar-accent-foreground"), children: [_jsx("div", { style: { fontSize: (iconSize || 14) + "px" }, children: children }), _jsx("div", { style: { paddingTop: "5px" }, children: name })] }));

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/html-toolbar.js

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

package/toolbar/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/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=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;
+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=""}),[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,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;