@ydesign/react-editor 0.0.2 → 0.0.4

package/dist/toolbar/figure-toolbar.js

@@ -0,0 +1 @@
+import{a,b,c,d,e}from"../chunk-XPAHGJGK.js";import"../chunk-4HEMGHOQ.js";import"../chunk-YRJUN267.js";import"../chunk-RVXI723F.js";import"../chunk-WCHGSVUC.js";import"../chunk-O2XFH626.js";export{b as FigureFill,c as FigureSettings,d as FigureStroke,e as FigureToolbar,a as getFillKey};

package/dist/toolbar/filters-picker.d.ts

@@ -1,7 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { StoreType } from '../model/store.js';
 import { FabricObject } from '@ydesign/core';
+import 'fabric';
+import 'mobx-state-tree/dist/internal';
 import 'mobx-state-tree';
+import '../utils/fonts.js';
+import 'mobx';
 
 declare const FiltersPicker: (({ element, store, elements }: {
     elements?: Array<FabricObject>;

package/dist/toolbar/filters-picker.js

@@ -1 +1 @@
-import{a}from"../chunk-V5RJX32O.js";import"../chunk-E7ZSWHPU.js";import"../chunk-O2XFH626.js";export{a as FiltersPicker};
+import{a}from"../chunk-4HEMGHOQ.js";import"../chunk-RVXI723F.js";import"../chunk-O2XFH626.js";export{a as FiltersPicker};

package/dist/toolbar/flip-button.d.ts

@@ -1,7 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { FabricObject } from '@ydesign/core';
 import { StoreType } from '../model/store.js';
+import 'fabric';
+import 'mobx-state-tree/dist/internal';
 import 'mobx-state-tree';
+import '../utils/fonts.js';
+import 'mobx';
 
 declare const FlipButton: ({ element, store }: {
     elements?: Array<FabricObject>;

package/dist/toolbar/flip-button.js

@@ -1 +1 @@
-import{a}from"../chunk-GMISU6MD.js";import"../chunk-O2XFH626.js";export{a as FlipButton};
+import{a}from"../chunk-CS6Z4TQU.js";import"../chunk-O2XFH626.js";export{a as FlipButton};

package/dist/toolbar/group-button.d.ts

@@ -1,7 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { StoreType } from '../model/store.js';
+import 'fabric';
+import 'mobx-state-tree/dist/internal';
 import 'mobx-state-tree';
 import '@ydesign/core';
+import '../utils/fonts.js';
+import 'mobx';
 
 declare const GroupButton: (({ store }: {
     store: StoreType;

package/dist/toolbar/group-button.js

@@ -1 +1 @@
-import{a}from"../chunk-V6ZZKUTN.js";import"../chunk-O2XFH626.js";export{a as GroupButton};
+import{a}from"../chunk-4FFLRF6N.js";import"../chunk-O2XFH626.js";export{a as GroupButton};

package/dist/toolbar/history-buttons.d.ts

@@ -1,7 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { StoreType } from '../model/store.js';
+import 'fabric';
+import 'mobx-state-tree/dist/internal';
 import 'mobx-state-tree';
 import '@ydesign/core';
+import '../utils/fonts.js';
+import 'mobx';
 
 declare const HistoryButtons: (({ store }: {
     store: StoreType;

package/dist/toolbar/history-buttons.js

@@ -1 +1 @@
-import{e as a}from"../chunk-7LU5UGIG.js";import"../chunk-R6Z6F447.js";import"../chunk-TE6HYOIP.js";import"../chunk-FIAIYSJ7.js";import"../chunk-5MWZMSER.js";import"../chunk-2AWYWIIK.js";import"../chunk-U7HIFGXC.js";import"../chunk-GYDTKPW5.js";import"../chunk-XRRO2RT7.js";import"../chunk-JW76IC3E.js";import"../chunk-MNACXCF5.js";import"../chunk-XZAP76LL.js";import"../chunk-B35ZYWID.js";import"../chunk-H67HTXU4.js";import"../chunk-3HQUN5MA.js";import"../chunk-V5RJX32O.js";import"../chunk-GMISU6MD.js";import"../chunk-V6ZZKUTN.js";import"../chunk-OQ6HU62L.js";import"../chunk-EMAFC3HG.js";import"../chunk-E7ZSWHPU.js";import"../chunk-IUFYYEGO.js";import"../chunk-JWQ2DUXA.js";import"../chunk-WJT6VPDR.js";import"../chunk-JMIN2XMC.js";import"../chunk-75WC3GVB.js";import"../chunk-O2XFH626.js";export{a as HistoryButtons};
+import{e as a}from"../chunk-53KFBGJB.js";import"../chunk-MNACXCF5.js";import"../chunk-R6Z6F447.js";import"../chunk-COQ4GO5N.js";import"../chunk-PSXS4WMN.js";import"../chunk-4FFLRF6N.js";import"../chunk-LCE6Z46D.js";import"../chunk-CB23VFSC.js";import"../chunk-3TO57JPN.js";import"../chunk-M4S26KQG.js";import"../chunk-EOBIVNFF.js";import"../chunk-GYDTKPW5.js";import"../chunk-XRRO2RT7.js";import"../chunk-3TTTJUTT.js";import"../chunk-B35ZYWID.js";import"../chunk-H67HTXU4.js";import"../chunk-XPAHGJGK.js";import"../chunk-4HEMGHOQ.js";import"../chunk-CS6Z4TQU.js";import"../chunk-IUFYYEGO.js";import"../chunk-MXZ6RXT3.js";import"../chunk-APQPKBER.js";import"../chunk-OQ6HU62L.js";import"../chunk-YRJUN267.js";import"../chunk-RVXI723F.js";import"../chunk-WCHGSVUC.js";import"../chunk-MQZE5LZU.js";import"../chunk-7NNOHYKX.js";import"../chunk-WJT6VPDR.js";import"../chunk-JMIN2XMC.js";import"../chunk-75WC3GVB.js";import"../chunk-O2XFH626.js";export{a as HistoryButtons};

package/dist/toolbar/image-eraser-pen.d.ts

@@ -1,5 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { FabricImage } from '@ydesign/core';
 
-declare const ImageEraserPen: () => react_jsx_runtime.JSX.Element;
+declare const ImageEraserPen: ({ element }: {
+    element: FabricImage;
+}) => react_jsx_runtime.JSX.Element;
 
 export { ImageEraserPen };

package/dist/toolbar/image-eraser-pen.js

@@ -1 +1 @@
-import{a}from"../chunk-2AWYWIIK.js";import"../chunk-O2XFH626.js";export{a as ImageEraserPen};
+import{a}from"../chunk-M4S26KQG.js";import"../chunk-O2XFH626.js";export{a as ImageEraserPen};

package/dist/toolbar/image-remove-background.d.ts

@@ -1,5 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { FabricImage } from '@ydesign/core';
 
-declare const ImageRemoveBackground: () => react_jsx_runtime.JSX.Element;
+declare const ImageRemoveBackground: ({ element }: {
+    element: FabricImage;
+}) => react_jsx_runtime.JSX.Element;
 
 export { ImageRemoveBackground };

package/dist/toolbar/image-remove-background.js

@@ -1 +1 @@
-import{a}from"../chunk-U7HIFGXC.js";import"../chunk-O2XFH626.js";export{a as ImageRemoveBackground};
+import{a}from"../chunk-EOBIVNFF.js";import"../chunk-O2XFH626.js";export{a as ImageRemoveBackground};

package/dist/toolbar/image-toolbar.d.ts

@@ -1,7 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { FabricImage } from '@ydesign/core';
 import { StoreType } from '../model/store.js';
+import 'fabric';
+import 'mobx-state-tree/dist/internal';
 import 'mobx-state-tree';
+import '../utils/fonts.js';
+import 'mobx';
 
 type Props = {
     store: StoreType;
@@ -11,10 +15,16 @@ declare const ImageFitToBackground: ({ element, store }: {
     element: FabricImage;
     store: StoreType;
 }) => react_jsx_runtime.JSX.Element;
-declare const ImageCrop: (() => react_jsx_runtime.JSX.Element) & {
+declare const ImageCrop: (({ element, store }: {
+    element: FabricImage;
+    store: StoreType;
+}) => react_jsx_runtime.JSX.Element) & {
     displayName: string;
 };
-declare const ImageClip: (() => react_jsx_runtime.JSX.Element) & {
+declare const ImageClip: (({ element, store }: {
+    element: FabricImage;
+    store: StoreType;
+}) => react_jsx_runtime.JSX.Element) & {
     displayName: string;
 };
 declare const ImageToolbar: (({ store, components }: Props) => react_jsx_runtime.JSX.Element) & {

package/dist/toolbar/image-toolbar.js

@@ -1 +1 @@
-import{a,b,c,d,e}from"../chunk-5MWZMSER.js";import"../chunk-2AWYWIIK.js";import"../chunk-U7HIFGXC.js";import"../chunk-3HQUN5MA.js";import"../chunk-V5RJX32O.js";import"../chunk-GMISU6MD.js";import"../chunk-EMAFC3HG.js";import"../chunk-E7ZSWHPU.js";import"../chunk-JWQ2DUXA.js";import"../chunk-O2XFH626.js";export{c as ImageClip,b as ImageCrop,a as ImageFitToBackground,d as ImageToolbar,e as default};
+import{a,b,c,d,e}from"../chunk-LCE6Z46D.js";import"../chunk-CB23VFSC.js";import"../chunk-3TO57JPN.js";import"../chunk-M4S26KQG.js";import"../chunk-EOBIVNFF.js";import"../chunk-4HEMGHOQ.js";import"../chunk-CS6Z4TQU.js";import"../chunk-MXZ6RXT3.js";import"../chunk-YRJUN267.js";import"../chunk-RVXI723F.js";import"../chunk-WCHGSVUC.js";import"../chunk-MQZE5LZU.js";import"../chunk-7NNOHYKX.js";import"../chunk-O2XFH626.js";export{c as ImageClip,b as ImageCrop,a as ImageFitToBackground,d as ImageToolbar,e as default};

package/dist/toolbar/lock-button.d.ts

@@ -1,7 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { StoreType } from '../model/store.js';
+import 'fabric';
+import 'mobx-state-tree/dist/internal';
 import 'mobx-state-tree';
 import '@ydesign/core';
+import '../utils/fonts.js';
+import 'mobx';
 
 declare const LockButton: (({ store }: {
     store: StoreType;

package/dist/toolbar/opacity-picker.d.ts

@@ -1,7 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { StoreType } from '../model/store.js';
+import 'fabric';
+import 'mobx-state-tree/dist/internal';
 import 'mobx-state-tree';
 import '@ydesign/core';
+import '../utils/fonts.js';
+import 'mobx';
 
 declare const OpacityPicker: (({ store }: {
     store: StoreType;

package/dist/toolbar/opacity-picker.js

@@ -1 +1 @@
-import{a}from"../chunk-JW76IC3E.js";import"../chunk-O2XFH626.js";export{a as OpacityPicker};
+import{a}from"../chunk-3TTTJUTT.js";import"../chunk-O2XFH626.js";export{a as OpacityPicker};

package/dist/toolbar/position-picker.d.ts

@@ -1,7 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { StoreType } from '../model/store.js';
+import 'fabric';
+import 'mobx-state-tree/dist/internal';
 import 'mobx-state-tree';
 import '@ydesign/core';
+import '../utils/fonts.js';
+import 'mobx';
 
 declare const PositionPicker: (({ store }: {
     store: StoreType;

package/dist/toolbar/remove-button.d.ts

@@ -1,7 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { StoreType } from '../model/store.js';
+import 'fabric';
+import 'mobx-state-tree/dist/internal';
 import 'mobx-state-tree';
 import '@ydesign/core';
+import '../utils/fonts.js';
+import 'mobx';
 
 declare const RemoveButton: (({ store }: {
     store: StoreType;

package/dist/toolbar/text-ai-write.js

@@ -1 +1 @@
-import{a}from"../chunk-FIAIYSJ7.js";import"../chunk-O2XFH626.js";export{a as TextAiWrite};
+import{a}from"../chunk-PSXS4WMN.js";import"../chunk-O2XFH626.js";export{a as TextAiWrite};

package/dist/toolbar/text-toolbar.d.ts

@@ -1,7 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { StoreType } from '../model/store.js';
+import 'fabric';
+import 'mobx-state-tree/dist/internal';
 import 'mobx-state-tree';
 import '@ydesign/core';
+import '../utils/fonts.js';
+import 'mobx';
 
 type PageProps = {
     store: StoreType;

package/dist/toolbar/text-toolbar.js

@@ -1 +1 @@
-import{a,b,c}from"../chunk-TE6HYOIP.js";import"../chunk-FIAIYSJ7.js";import"../chunk-3HQUN5MA.js";import"../chunk-V5RJX32O.js";import"../chunk-E7ZSWHPU.js";import"../chunk-JWQ2DUXA.js";import"../chunk-WJT6VPDR.js";import"../chunk-O2XFH626.js";export{a as ALIGN_OPTIONS,b as TextToolbar,c as default};
+import{a,b,c}from"../chunk-COQ4GO5N.js";import"../chunk-PSXS4WMN.js";import"../chunk-4HEMGHOQ.js";import"../chunk-YRJUN267.js";import"../chunk-RVXI723F.js";import"../chunk-WCHGSVUC.js";import"../chunk-WJT6VPDR.js";import"../chunk-O2XFH626.js";export{a as ALIGN_OPTIONS,b as TextToolbar,c as default};

package/dist/toolbar/toolbar.d.ts

@@ -1,12 +1,16 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as node_modules_styled_components_dist_types from 'node_modules/styled-components/dist/types';
+import * as styled_components_dist_types from 'styled-components/dist/types';
 import * as styled_components from 'styled-components';
 import * as react from 'react';
 import { StoreType } from '../model/store.js';
+import 'fabric';
+import 'mobx-state-tree/dist/internal';
 import 'mobx-state-tree';
 import '@ydesign/core';
+import '../utils/fonts.js';
+import 'mobx';
 
-declare const NavBarGroup: node_modules_styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const NavBarGroup: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 declare function registerToolbarComponent(type: string, reactComponent: any): void;
 type ToolbarProps = {
     store: StoreType;

package/dist/toolbar/toolbar.js

@@ -1 +1 @@
-import{a,b,c,d}from"../chunk-7LU5UGIG.js";import"../chunk-R6Z6F447.js";import"../chunk-TE6HYOIP.js";import"../chunk-FIAIYSJ7.js";import"../chunk-5MWZMSER.js";import"../chunk-2AWYWIIK.js";import"../chunk-U7HIFGXC.js";import"../chunk-GYDTKPW5.js";import"../chunk-XRRO2RT7.js";import"../chunk-JW76IC3E.js";import"../chunk-MNACXCF5.js";import"../chunk-XZAP76LL.js";import"../chunk-B35ZYWID.js";import"../chunk-H67HTXU4.js";import"../chunk-3HQUN5MA.js";import"../chunk-V5RJX32O.js";import"../chunk-GMISU6MD.js";import"../chunk-V6ZZKUTN.js";import"../chunk-OQ6HU62L.js";import"../chunk-EMAFC3HG.js";import"../chunk-E7ZSWHPU.js";import"../chunk-IUFYYEGO.js";import"../chunk-JWQ2DUXA.js";import"../chunk-WJT6VPDR.js";import"../chunk-JMIN2XMC.js";import"../chunk-75WC3GVB.js";import"../chunk-O2XFH626.js";export{a as NavBarGroup,c as Toolbar,d as default,b as registerToolbarComponent};
+import{a,b,c,d}from"../chunk-53KFBGJB.js";import"../chunk-MNACXCF5.js";import"../chunk-R6Z6F447.js";import"../chunk-COQ4GO5N.js";import"../chunk-PSXS4WMN.js";import"../chunk-4FFLRF6N.js";import"../chunk-LCE6Z46D.js";import"../chunk-CB23VFSC.js";import"../chunk-3TO57JPN.js";import"../chunk-M4S26KQG.js";import"../chunk-EOBIVNFF.js";import"../chunk-GYDTKPW5.js";import"../chunk-XRRO2RT7.js";import"../chunk-3TTTJUTT.js";import"../chunk-B35ZYWID.js";import"../chunk-H67HTXU4.js";import"../chunk-XPAHGJGK.js";import"../chunk-4HEMGHOQ.js";import"../chunk-CS6Z4TQU.js";import"../chunk-IUFYYEGO.js";import"../chunk-MXZ6RXT3.js";import"../chunk-APQPKBER.js";import"../chunk-OQ6HU62L.js";import"../chunk-YRJUN267.js";import"../chunk-RVXI723F.js";import"../chunk-WCHGSVUC.js";import"../chunk-MQZE5LZU.js";import"../chunk-7NNOHYKX.js";import"../chunk-WJT6VPDR.js";import"../chunk-JMIN2XMC.js";import"../chunk-75WC3GVB.js";import"../chunk-O2XFH626.js";export{a as NavBarGroup,c as Toolbar,d as default,b as registerToolbarComponent};

package/dist/toolbar/zoom-buttons.d.ts

@@ -1,7 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { StoreType } from '../model/store.js';
+import 'fabric';
+import 'mobx-state-tree/dist/internal';
 import 'mobx-state-tree';
 import '@ydesign/core';
+import '../utils/fonts.js';
+import 'mobx';
 
 declare const ZoomGroup: (({ store }: {
     store: StoreType;

package/dist/toolbar/zoom-buttons.js

@@ -3,10 +3,10 @@ import"../chunk-O2XFH626.js";import{observer as S}from"mobx-react-lite";import m
   height: 0px;
 `,k=m.div`
   position: absolute;
-  bottom: 10px;
+  bottom: 20px;
   width: auto;
   left: 50%;
   transform: translateX(-50%);
   border-radius: 5px;
   overflow: hidden;
-`,i=[.1,.25,.5,.75,1,1.5,2,3],y=i[i.length-1],b=i[0],v=S(({store:t})=>{let p=Math.max(y,t.scaleToFit),s=Math.min(b,t.scaleToFit),d=t.scale<p,c=t.scale>s,u=i.map((r,C)=>({key:C,label:o("div",{style:{minWidth:80,textAlign:"center"},onClick:()=>{t.editor?.zoomHandler.zoomToRatio(r)},children:`${Math.round(100*r)}%`})}));return n(B,{children:[n(a.Compact,{children:[o(e,{disabled:!c,onClick:()=>t.editor?.zoomHandler.zoomOut(),children:o(f,{size:16})}),o(M,{menu:{items:u},placement:"top",children:n(e,{children:[Math.round(100*t.scale),"%"]})}),o(e,{disabled:!d,onClick:()=>t.editor?.zoomHandler.zoomIn(),children:o(h,{size:16})})]}),n(a.Compact,{style:{marginLeft:10},children:[o(l,{title:"\u9002\u5408\u5C4F\u5E55",children:o(e,{onClick:()=>t.editor?.workareaHandler.auto(),children:o(x,{size:16})})}),o(l,{title:"\u586B\u6EE1\u5C4F\u5E55",children:o(e,{onClick:()=>t.editor?.workareaHandler.one(),children:o(z,{size:16})})})]})]})}),A=({store:t})=>o(T,{children:o(k,{children:o(v,{store:t})})}),E=A;export{A as ZoomButtons,v as ZoomGroup,E as default};
+`,i=[.1,.25,.5,.75,1,1.5,2,3],y=i[i.length-1],b=i[0],v=S(({store:t})=>{let p=Math.max(y,t.scaleToFit),s=Math.min(b,t.scaleToFit),d=t.scale<p,c=t.scale>s,u=i.map((r,C)=>({key:C,label:o("div",{style:{minWidth:80,textAlign:"center"},onClick:()=>{t.editor?.zoomHandler.zoomToRatio(r)},children:`${Math.round(100*r)}%`})}));return n(B,{children:[n(a.Compact,{children:[o(e,{disabled:!c,onClick:()=>t.editor?.zoomHandler.zoomIn(),children:o(f,{size:16})}),o(M,{menu:{items:u},placement:"top",children:n(e,{children:[Math.round(100*t.scale),"%"]})}),o(e,{disabled:!d,onClick:()=>t.editor?.zoomHandler.zoomOut(),children:o(h,{size:16})})]}),n(a.Compact,{style:{marginLeft:10},children:[o(l,{title:"\u9002\u5408\u5C4F\u5E55",children:o(e,{onClick:()=>t.editor?.workareaHandler.auto(),children:o(x,{size:16})})}),o(l,{title:"\u586B\u6EE1\u5C4F\u5E55",children:o(e,{onClick:()=>t.editor?.workareaHandler.one(),children:o(z,{size:16})})})]})]})}),A=({store:t})=>o(T,{children:o(k,{children:o(v,{store:t})})}),E=A;export{A as ZoomButtons,v as ZoomGroup,E as default};

package/dist/topbar/file-menu.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { StoreType } from '../model/store.js';
+import 'fabric';
+import 'mobx-state-tree/dist/internal';
+import 'mobx-state-tree';
+import '@ydesign/core';
+import '../utils/fonts.js';
+import 'mobx';
+
+declare const FileMenu: ({ store }: {
+    store: StoreType;
+}) => react_jsx_runtime.JSX.Element;
+
+export { FileMenu };

package/dist/topbar/file-menu.js

@@ -0,0 +1 @@
+import{a}from"../chunk-FXO52BV7.js";import"../chunk-O2XFH626.js";export{a as FileMenu};

package/dist/topbar/topbar.d.ts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { StoreType } from '../model/store.js';
+import 'fabric';
+import 'mobx-state-tree/dist/internal';
+import 'mobx-state-tree';
+import '@ydesign/core';
+import '../utils/fonts.js';
+import 'mobx';
+
+declare const Topbar: (({ store }: {
+    store: StoreType;
+}) => react_jsx_runtime.JSX.Element) & {
+    displayName: string;
+};
+
+export { Topbar };

package/dist/topbar/topbar.js

@@ -0,0 +1,28 @@
+import{a as n}from"../chunk-B35ZYWID.js";import{a}from"../chunk-FXO52BV7.js";import{b as r}from"../chunk-KLZXBPXI.js";import"../chunk-WJT6VPDR.js";import"../chunk-O2XFH626.js";import i from"styled-components";import{observer as p}from"mobx-react-lite";import{Input as l,Tooltip as s,Button as g}from"antd";import{CloudUpload as h}from"lucide-react";import{jsx as t,jsxs as o}from"react/jsx-runtime";var m=i("div")`
+  white-space: nowrap;
+  height: 50px;
+  padding: 0 15px;
+  position: relative;
+  width: 100%;
+  z-index: 10;
+
+  @media screen and (max-width: 500px) {
+    overflow-x: auto;
+    overflow-y: hidden;
+    max-width: 100vw;
+  }
+`,f=i("div")`
+  @media screen and (max-width: 500px) {
+    display: flex;
+  }
+`,c=i("div")`
+  float: left;
+  display: flex;
+  align-items: center;
+  height: 50px;
+`,v=i("div")`
+  float: right;
+  display: flex;
+  align-items: center;
+  height: 50px;
+`,x=p(({project:e})=>(console.log(e.status),t(s,{title:"\u4FDD\u5B58\u4F5C\u56FE\u8BB0\u5F55",children:t(g,{type:"text",style:{marginLeft:16},icon:t(h,{size:16,style:{display:"flex"}}),children:"Save"})}))),j=p(({store:e})=>{let d=r();return t(m,{className:"topbar border-b-1 border-b-gray-200",children:o(f,{children:[o(c,{children:[o("div",{style:{display:"flex",alignItems:"center",gap:10,paddingRight:16,paddingLeft:16,userSelect:"none"},children:[t("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("rect",{width:"20",height:"20",fill:"rgb(22, 119, 255)"})}),t("span",{style:{fontWeight:500,fontSize:20,lineHeight:"100%",letterSpacing:.25},children:"Ydesign"})]}),t(a,{store:e}),t("div",{style:{paddingLeft:10,maxWidth:200},children:t(l,{placeholder:"Design name"})}),o("div",{style:{paddingLeft:16},className:"text-gray-600",children:[Math.round(e.width)," x ",Math.round(e.height)," px"]}),t(x,{project:d})]}),t(v,{children:t(n,{store:e})})]})})});export{j as Topbar};

package/dist/utils/figure-to-svg.d.ts

@@ -0,0 +1,36 @@
+interface SizeParams {
+    width: number;
+    height: number;
+}
+interface RectParams extends SizeParams {
+    cornerRadius?: number;
+}
+interface FigureParams extends SizeParams {
+    id?: string;
+    fill: string;
+    stroke: string;
+    strokeWidth: number;
+    dash?: number[];
+    subType: string;
+    cornerRadius?: number;
+}
+type PathResult = string | {
+    path: string;
+    scaleX: number;
+    scaleY: number;
+};
+type PathDataFunc = (params: FigureParams) => PathResult;
+declare const rectData: ({ width, height, cornerRadius }: RectParams) => string;
+declare const circleData: ({ width, height }: SizeParams) => string;
+declare function starPath({ width: t, height: h }: SizeParams): string;
+declare const triangleData: ({ width: t, height: h }: SizeParams) => string;
+declare const rightTriangleData: ({ width: t, height: h }: SizeParams) => string;
+declare function diamondPath({ width: t, height: h }: SizeParams): string;
+declare function pentagonPath({ width: t, height: h }: SizeParams): string;
+declare function hexagonPath({ width: t, height: h }: SizeParams): string;
+declare function speechBubblePath({ width: t, height: h }: SizeParams): string;
+declare function crossPath({ width: t, height: h }: SizeParams): string;
+declare const TYPES: Record<string, PathDataFunc>;
+declare function figureToSvg(params: FigureParams): string;
+
+export { TYPES, circleData, crossPath, diamondPath, figureToSvg, hexagonPath, pentagonPath, rectData, rightTriangleData, speechBubblePath, starPath, triangleData };

package/dist/utils/figure-to-svg.js

@@ -0,0 +1 @@
+import{a,b,c,d,e,f,g,h,i,j,k,l}from"../chunk-7NNOHYKX.js";import"../chunk-O2XFH626.js";export{k as TYPES,b as circleData,j as crossPath,f as diamondPath,l as figureToSvg,h as hexagonPath,g as pentagonPath,a as rectData,e as rightTriangleData,i as speechBubblePath,c as starPath,d as triangleData};

package/dist/utils/image.d.ts

@@ -3,11 +3,17 @@ type Size = {
     width: number;
     height: number;
 };
-declare function getCrop(elementSize: Size, originalImageSize: Size): {
+/**
+ * 计算图片适配到目标尺寸的裁剪参数（Cover 模式，居中裁剪）
+ * @param targetSize 目标尺寸（画布/workarea）
+ * @param imageSize 原始图片尺寸
+ * @returns Fabric.js v6 裁剪参数（像素值）
+ */
+declare function getCrop(targetSize: Size, imageSize: Size): {
     cropX: number;
     cropY: number;
-    cropWidth: number;
-    cropHeight: number;
+    width: number;
+    height: number;
 };
 
 export { getCrop, getImageSize };

package/dist/utils/image.js

@@ -1 +1 @@
-import{a,b}from"../chunk-EMAFC3HG.js";import"../chunk-O2XFH626.js";export{b as getCrop,a as getImageSize};
+import{a,b}from"../chunk-3TO57JPN.js";import"../chunk-O2XFH626.js";export{b as getCrop,a as getImageSize};

package/dist/utils/index.js

@@ -1 +1 @@
-import{a,b,c,d}from"../chunk-E7ZSWHPU.js";import"../chunk-O2XFH626.js";export{a as convertFillToPickerValue,c as getJSONFontFamily,b as getRandomColor,d as isVectorShape};
+import{a,b,c,d}from"../chunk-RVXI723F.js";import"../chunk-O2XFH626.js";export{a as convertFillToPickerValue,c as getJSONFontFamily,b as getRandomColor,d as isVectorShape};

package/dist/utils/screen.js

@@ -1 +1 @@
-import{a,b,c,d}from"../chunk-JWQ2DUXA.js";import"../chunk-O2XFH626.js";export{a as MOBILE_BREAKPOINT,b as isMobile,c as mobileStyle,d as useMobile};
+import{a,b,c,d}from"../chunk-WCHGSVUC.js";import"../chunk-O2XFH626.js";export{a as MOBILE_BREAKPOINT,b as isMobile,c as mobileStyle,d as useMobile};

package/dist/utils/svg.d.ts

@@ -0,0 +1,3 @@
+declare function svgToURL(svg: string): string;
+
+export { svgToURL };

package/dist/utils/svg.js

@@ -0,0 +1 @@
+import{a}from"../chunk-CB23VFSC.js";import"../chunk-O2XFH626.js";export{a as svgToURL};

package/dist/utils/text.d.ts

@@ -0,0 +1,3 @@
+declare function removeTags(e?: string): string;
+
+export { removeTags };

package/dist/utils/text.js

@@ -0,0 +1 @@
+import{a}from"../chunk-4LUZF4CB.js";import"../chunk-O2XFH626.js";export{a as removeTags};

package/dist/utils/unit.d.ts

@@ -0,0 +1,18 @@
+type UnitType = 'pt' | 'mm' | 'cm' | 'in' | 'px';
+type fromPx = {
+    px: number;
+    unit: UnitType;
+    dpi: number;
+};
+declare function pxToUnit({ px, unit, dpi }: fromPx): number;
+declare function pxToUnitRounded({ px, precious, dpi, unit, }: fromPx & {
+    precious?: number;
+}): number;
+declare function unitToPx({ unitVal, dpi, unit }: {
+    unitVal: any;
+    dpi: any;
+    unit: any;
+}): number;
+declare function pxToUnitString(params: fromPx): string;
+
+export { type UnitType, pxToUnit, pxToUnitRounded, pxToUnitString, unitToPx };

package/dist/utils/unit.js

@@ -0,0 +1 @@
+import{a,b,c,d}from"../chunk-5C2MNUBC.js";import"../chunk-O2XFH626.js";export{a as pxToUnit,b as pxToUnitRounded,d as pxToUnitString,c as unitToPx};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ydesign/react-editor",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "设计编辑器UI组件库，基于react版本",
   "main": "dist/app.js",
   "module": "dist/app.js",
@@ -71,6 +71,14 @@
     "./project": {
       "import": "./dist/project.js",
       "types": "./dist/project.d.ts"
+    },
+    "./topbar/*": {
+      "import": "./dist/topbar/*.js",
+      "types": "./dist/topbar/*.d.ts"
+    },
+    "./topbar": {
+      "import": "./dist/topbar/topbar.js",
+      "types": "./dist/topbar/topbar.d.ts"
     }
   },
   "author": "junhaoliao",
@@ -92,27 +100,21 @@
   },
   "license": "SEE LICENSE IN LICENSE.md",
   "dependencies": {
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-separator": "^1.1.8",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-tooltip": "^1.2.8",
     "antd": "^6.0.0",
-    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lodash-es": "^4.17.21",
+    "es-toolkit": "^1.44.0",
     "lucide-react": "^0.553.0",
     "mobx": "^6.15.0",
     "mobx-react-lite": "^4.1.1",
     "mobx-state-tree": "^6.0.1",
     "react-overflow-list": "^0.5.0",
+    "react-sortablejs": "^6.1.4",
     "react-window": "^1.8.11",
     "styled-components": "^6.1.19",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.17",
     "tw-animate-css": "^1.4.0",
-    "@ydesign/core": "^0.0.1"
+    "@ydesign/core": "^0.0.4"
   },
   "browserslist": [
     "> 0.5%",

package/dist/chunk-2AWYWIIK.js

@@ -1 +0,0 @@
-import{Button as e}from"antd";import{Eraser as r}from"lucide-react";import{jsx as t}from"react/jsx-runtime";var s=()=>t(e,{type:"text",icon:t(r,{size:16,style:{display:"flex"}}),styles:{root:{padding:"0 10px"}},children:"Eraser pen"});export{s as a};

package/dist/chunk-55FJG4FK.js

@@ -1 +0,0 @@
-import{jsx as o}from"react/jsx-runtime";var p=({store:e})=>(console.log("ShapesPanel",e),o("div",{children:"\u5F62\u72B6"}));export{p as a};

package/dist/chunk-5MWZMSER.js

@@ -1 +0,0 @@
-import{a as f}from"./chunk-2AWYWIIK.js";import{a as u}from"./chunk-U7HIFGXC.js";import{a as c,b as y}from"./chunk-3HQUN5MA.js";import{a as d}from"./chunk-V5RJX32O.js";import{a as I}from"./chunk-GMISU6MD.js";import{a as g,b as l}from"./chunk-EMAFC3HG.js";import{observer as s}from"mobx-react-lite";import{Button as i,Tooltip as k}from"antd";import{Crop as C}from"lucide-react";import{jsx as t}from"react/jsx-runtime";var x={root:{padding:"0 6px"}},F=({element:n,store:e})=>t(i,{type:"text",styles:x,onClick:async()=>{let o=e.width+2*e.bleed,m=e.height+2*e.bleed;console.log("w, h ---> ",o,m);let p=await g(n.getSrc()),r=l({width:o,height:m},p);console.log("cropImg",r)},children:"Fit to page"}),T=s(()=>t(k,{title:"Crop",children:t(i,{type:"text",styles:{root:{padding:"0 7px"}},children:t(C,{size:16})})})),B=s(()=>t(i,{type:"text",styles:x,children:"Apply mask"})),b={ImageFlip:I,ImageFilters:d,ImageFitToBackground:F,ImageCrop:T,ImageClip:B,ImageRemoveBackground:u,ImageEraserPen:f},h=s(({store:n,components:e})=>{let o=n.selectedElements,p=c({type:"text",usedItems:["ImageFlip","ImageFilters","ImageFitToBackground","ImageClip","ImageCrop","ImageRemoveBackground","ImageEraserPen"],components:e});return t(y,{items:p,itemRender:r=>{let a=e[r]||b[r];return a&&t(a,{elements:o,element:o[0],store:n},r)}})}),O=h;export{F as a,T as b,B as c,h as d,O as e};

package/dist/chunk-6LFGFFHI.js

@@ -1 +0,0 @@
-import{jsx as o}from"react/jsx-runtime";var t=({store:e})=>(console.log("TextPanel",e),o("div",{children:"\u6587\u672C\u9762\u677F"}));export{t as a};

package/dist/chunk-7LU5UGIG.js

@@ -1,16 +0,0 @@
-import{a as k}from"./chunk-R6Z6F447.js";import{c as h}from"./chunk-TE6HYOIP.js";import{d as E}from"./chunk-5MWZMSER.js";import{a as C}from"./chunk-GYDTKPW5.js";import{a as H}from"./chunk-XRRO2RT7.js";import{a as B}from"./chunk-JW76IC3E.js";import{a as x}from"./chunk-MNACXCF5.js";import{a as v}from"./chunk-XZAP76LL.js";import{b}from"./chunk-B35ZYWID.js";import{a as g}from"./chunk-H67HTXU4.js";import{a as T}from"./chunk-V6ZZKUTN.js";import u from"styled-components";import{useRef as q}from"react";import{Tooltip as N,Button as R}from"antd";import{Undo2 as A,Redo2 as U}from"lucide-react";import{observer as F}from"mobx-react-lite";import{useEffect as M}from"react";import{jsx as n,jsxs as _}from"react/jsx-runtime";var w=F(({store:o})=>(M(()=>{},[o._updateHistory]),_(c,{style:{float:"left",paddingRight:10},children:[n(N,{title:"\u64A4\u9500",placement:"bottom",children:n(R,{type:"text",disabled:!o.editor?.historyHandler.canUndo(),styles:{root:{padding:"0 7px"}},onClick:()=>{o.editor?.historyHandler.undo()},children:n(A,{size:16})})}),n(N,{title:"\u91CD\u505A",placement:"bottom",children:n(R,{type:"text",disabled:!o.editor?.historyHandler.canRedo(),styles:{root:{padding:"0 7px"}},onClick:()=>{o.editor?.historyHandler.redo()},children:n(U,{size:16})})})]})));import{observer as J}from"mobx-react-lite";import{Divider as K}from"antd";import{Fragment as X,jsx as e,jsxs as d}from"react/jsx-runtime";var Q=u.div`
-  white-space: nowrap;
-
-  height: 50px;
-  padding: 0 15px;
-  position: relative;
-  width: 100%;
-  z-index: 10;
-`,V=u.div`
-  width: 100%;
-  height: 100%;
-`,c=u.div`
-  align-items: center;
-  display: flex;
-  height: 50px;
-`,s={textbox:h,image:E,many:H};function xo(o,a){s[o]=a}var W=J(({store:o,downloadButtonEnabled:a,components:i={}})=>{let G=new Set(o.selectedElements.map(r=>r?.type)).size===1,P=o.selectedElements.length===1,m=o.selectedElements[0],y=o.selectedElements.length&&o.selectedElements.every(r=>r?.locked),l=P&&s[m?.type];G?l=s[m?.type]:o.selectedElements.length>1&&(l=s.many);let p=q(i);(Object.keys(i).some(r=>i[r]!==p.current[r])||Object.keys(p.current).some(r=>!(r in i)))&&(p.current=Object.assign({},i));let t=p.current,f=t?.ActionControls||(a?b:null),D=t?.Position||x,O=t?.Opacity||B,S=t?.Lock||C,z=t?.Duplicate||g,L=t?.Remove||k,I=t?.History||w,j=t?.Group||T;return e(Q,{className:"bp5-navbar design-toolbar",children:d(V,{children:[e(I,{store:o}),!m&&e(v,{store:o,components:t}),l&&!y&&e(l,{store:o,components:t}),d(c,{style:{float:"right"},children:[e(j,{store:o}),e(D,{store:o}),!y&&e(O,{store:o}),e(S,{store:o}),e(z,{store:o}),e(L,{store:o}),f&&d(X,{children:[e(K,{orientation:"vertical",style:{margin:"0 15px"}}),e(f,{store:o})]})]})]})})}),Bo=W;export{c as a,xo as b,W as c,Bo as d,w as e};

package/dist/chunk-E7ZSWHPU.js

@@ -1 +0,0 @@
-var s=t=>{if(t){if(typeof t=="string")return t;if(typeof t=="object"&&"colorStops"in t&&Array.isArray(t.colorStops))return t.colorStops.map(o=>({color:o.color,percent:o.offset*100}))}},i=()=>{let t="0123456789ABCDEF",o="#";for(let r=0;r<6;r++)o+=t[Math.floor(Math.random()*16)];return o},n=t=>{let o=[];for(let r of t){if(r.type==="group"){let e=n(r.objects);o.push(...e)}r.type==="textbox"&&(o.some(e=>e===r.fontFamily)||o.push(r.fontFamily))}return o},c=new Set(["ellipse","polygon","triangle","rect","line","circle","polyline","path"]);function p(t){return!!t&&c.has(t.type)}export{s as a,i as b,n as c,p as d};

package/dist/chunk-EMAFC3HG.js

@@ -1 +0,0 @@
-function p(o){return new Promise((t,s)=>{let h=new Image;h.onload=()=>{t({width:h.width,height:h.height})},h.onerror=()=>{s(new Error("\u56FE\u7247\u52A0\u8F7D\u5931\u8D25"))},h.src=o,h.crossOrigin="anonymous"})}function e(o,t){console.log(o),console.log(t);let{width:s,height:h}=o,w=s/h,c,r;w>=t.width/t.height?(c=t.width,r=t.width/w):(c=t.height*w,r=t.height);let d=(t.width-c)/2,n=(t.height-r)/2;return{cropX:d/t.width,cropY:n/t.height,cropWidth:c/t.width,cropHeight:r/t.height}}export{p as a,e as b};

package/dist/chunk-JW76IC3E.js

@@ -1 +0,0 @@
-import{Blend as s}from"lucide-react";import{Popover as d,Tooltip as m,Button as c,InputNumber as v,Slider as u}from"antd";import{observer as y}from"mobx-react-lite";import{jsx as t,jsxs as r}from"react/jsx-runtime";var x=y(({store:e})=>{let a=e.selectedShapes.length>0,o=e.selectedShapes[0],i=Math.round(100*o?.opacity),n=p=>{let l=Math.max(0,Math.min(p,100));e.editor?.objectsHandler.update({opacity:l/100})};return t(m,{title:"Opacity",placement:"bottom",children:t(d,{content:r("div",{children:[t("div",{style:{textAlign:"center",marginBottom:10},children:"Transparency"}),r("div",{style:{display:"flex"},children:[t("div",{style:{width:170,paddingRight:20},children:t(u,{min:0,max:100,onChange:n,value:i})}),t(v,{min:0,max:100,value:i,onChange:n,size:"small",styles:{root:{width:65}}})]})]}),trigger:"click",children:t(c,{type:"text",disabled:!a,styles:{root:{padding:"0 7px"}},children:t(s,{size:16})})})})});export{x as a};

package/dist/chunk-M33EDDXB.js

@@ -1 +0,0 @@
-import{jsx as o}from"react/jsx-runtime";var r=({store:e})=>(console.log("LayersPanel",e),o("div",{children:"\u56FE\u5C42"}));export{r as a};

package/dist/chunk-QJBRJELT.js

@@ -1 +0,0 @@
-import{Button as o}from"antd";import{jsx as l,jsxs as i}from"react/jsx-runtime";var a=({store:t})=>i("div",{onClick:()=>{console.log("TemplatesPanel",t)},style:{display:"flex",flexDirection:"column",gap:10},children:["\u6A21\u677F\u4E2D\u5FC3",l(o,{onClick:()=>{},children:"\u6DFB\u52A0\u6587\u5B57"}),l(o,{onClick:()=>{let e=t.editor?.customCanvas.canvas.getActiveObject();if(e){let{selectionStart:n,selectionEnd:c}=e;n!==c?(console.log("\u6709\u5C40\u90E8\u6587\u5B57\u9009\u4E2D"),e.setSelectionStyles({fill:"red"},n,c)):e.set({fill:"red"}),t.editor?.customCanvas.canvas.requestRenderAll()}},children:"\u8BBE\u7F6E\u5C40\u90E8\u6587\u5B57\u4E3A\u7EA2\u8272"}),l(o,{children:"\u6DFB\u52A0\u56FE\u7247"})]});export{a};

package/dist/chunk-TE6HYOIP.js

@@ -1,7 +0,0 @@
-import{a as j}from"./chunk-FIAIYSJ7.js";import{a as I,b as H}from"./chunk-3HQUN5MA.js";import{a as B}from"./chunk-V5RJX32O.js";import{a as w,c as z}from"./chunk-E7ZSWHPU.js";import{a as v}from"./chunk-WJT6VPDR.js";import{observer as f}from"mobx-react-lite";import{useEffect as u,useState as y,useCallback as N}from"react";import{ColorPicker as M,Popover as L,Button as m,Input as W,InputNumber as b,Space as G,Slider as A,Tooltip as x}from"antd";import{cssGradient2FabricGradient as O}from"@ydesign/core";import{ChevronDown as E,TextAlignStart as V,TextAlignCenter as _,TextAlignEnd as R,TextAlignJustify as U,Bold as D,Italic as J,Underline as K,Strikethrough as $,ListChevronsUpDown as q,TextWrap as Q}from"lucide-react";import{FixedSizeList as X}from"react-window";import Y from"styled-components";import{jsx as t,jsxs as h}from"react/jsx-runtime";var Z=Y.img`
-  height: 20px;
-
-  .bp5-dark & {
-    filter: invert(1);
-  }
-`,{Search:tt}=W,et=({fontFamily:i,handleClick:n,modifiers:e,store:s,isCustom:c})=>{let[o,d]=y(!c);if(console.log(d,Z),u(()=>{o||s.loadFont(i)},[i,o]),i==="_divider")return t("div",{style:{width:"100%",height:1,background:"#e8e8e8"}});let l=i;return t(m,{type:e.active?"primary":"text",block:!0,style:{justifyContent:"start"},onClick:()=>n(i),disabled:e.disabled,styles:{root:{fontFamily:'"'+i+'"'},content:{textOverflow:"ellipsis",overflow:"hidden",whiteSpace:"nowrap"}},children:l})},nt=({onChange:i,defaultValue:n})=>t(tt,{placeholder:n,allowClear:!0,onChange:e=>{i(e.target.value)},style:{width:210}}),ot=({store:i,fonts:n,activeFont:e,activeFontLabel:s,onFontSelect:c})=>{let[o,d]=y(""),l=n.filter(r=>r.toLowerCase().includes(o.toLowerCase()));return t(L,{content:h("div",{children:[t(nt,{defaultValue:"\u641C\u7D22\u5B57\u4F53",onChange:r=>d(r??"")}),t("div",{style:{paddingTop:5},children:t(X,{itemCount:l.length,itemSize:28,width:210,height:Math.min(400,28*l.length)+10,children:({index:r,style:p})=>{let a=l[r];return t("div",{style:{...p,display:"flex",alignItems:"center",justifyContent:"center"},children:t(et,{fontFamily:a,modifiers:{active:e===a},handleClick:()=>c(a),store:i,isCustom:i.fonts.find(g=>g.fontFamily===a)||v.find(g=>g.fontFamily===a)},a)})}})})]}),trigger:"click",children:t(m,{type:"text",style:{marginRight:5,fontFamily:'"'+e+'"',overflow:"hidden",whiteSpace:"nowrap",maxHeight:30,padding:"0 10px"},icon:t(E,{size:16,style:{display:"flex"}}),iconPlacement:"end",children:s})})},S=["left","center","right","justify"],it=f(({elements:i,store:n})=>{let e=n.fonts.concat(v).map(d=>d.fontFamily),s=i[0].fontFamily;s.length>15&&(s=s.slice(0,15)+"...");let c=z(n.objects),o=[...new Set(c.concat("_divider").concat(e))];return t(ot,{fonts:o,activeFont:i[0].fontFamily,activeFontLabel:s,store:n,onFontSelect:d=>{n.editor?.objectsHandler.setTextStyle({fontFamily:d})}})}),lt=f(({elements:i,store:n})=>{let e=i[0],[s,c]=y(e.fill),o=N(()=>{let{selectionStart:l,selectionEnd:r}=e;if(l!==r&&l!==void 0){let p=e.getSelectionStyles(l,l+1);if(p.length>0&&p[0].fill!==void 0)return p[0].fill}return e.fill},[e]);u(()=>{let l=n.editor?.customCanvas?.canvas;if(!l)return;let r=()=>{c(o())};return l.on("text:selection:changed",r),l.on("text:editing:entered",r),l.on("text:editing:exited",r),c(o()),()=>{l.off("text:selection:changed",r),l.off("text:editing:entered",r),l.off("text:editing:exited",r)}},[n.editor?.customCanvas?.canvas,o]),u(()=>{c(o())},[e,o]);let d=w(s);return t(M,{value:d,allowClear:!0,mode:["single","gradient"],onChangeComplete:l=>{let r=l.toCssString();if(r.includes("gradient")){let p=O(r);n.editor?.objectsHandler.setTextStyle({fill:p})}else n.editor?.objectsHandler.setTextStyle({fill:r});c(o())}})}),rt=f(({elements:i,store:n})=>{let[e,s]=y(i[0].fontSize);u(()=>{s(i[0].fontSize)},[i[0]?.fontSize,n._updateFontSize]);let c=o=>{Number.isNaN(o)||(n.editor?.objectsHandler.setTextStyle({fontSize:Number(o)}),s(Number(o)))};return t(b,{min:5,max:4*n.height,value:Math.round(e),onChange:c,style:{width:70}})}),st=f(({elements:i,store:n})=>{let e=i[0],[s,c]=y(e.textAlign),[o,d]=y(e.fontWeight),[l,r]=y(e.fontStyle),[p,a]=y(e.underline),[g,C]=y(e.linethrough),[T,P]=y(e.splitByGrapheme);return u(()=>{c(e.textAlign),d(e.fontWeight),r(e.fontStyle),a(e.underline),C(e.linethrough),P(e.splitByGrapheme)},[e]),h(G.Compact,{children:[t(x,{placement:"bottom",title:`Text align ${s}`,children:t(m,{type:"text",icon:s==="left"?t(V,{size:16,style:{display:"flex"}}):s==="center"?t(_,{size:16,style:{display:"flex"}}):s==="right"?t(R,{size:16,style:{display:"flex"}}):t(U,{size:16,style:{display:"flex"}}),onClick:()=>{let F=(S.indexOf(s)+1+S.length)%S.length,k=S[F];n.editor?.objectsHandler.setTextStyle({textAlign:k}),c(k)}})}),t(x,{placement:"bottom",title:"Bold",children:t(m,{type:o==="bold"||o==="700"?"primary":"text",icon:t(D,{size:16,style:{display:"flex"}}),onClick:()=>{o==="bold"||o==="700"?(n.editor?.objectsHandler.setTextStyle({fontWeight:"normal"}),d("normal")):(n.editor?.objectsHandler.setTextStyle({fontWeight:"bold"}),d("bold"))}})}),t(x,{placement:"bottom",title:"Italic",children:t(m,{type:l==="italic"?"primary":"text",icon:t(J,{size:16,style:{display:"flex"}}),onClick:()=>{l==="italic"?(n.editor?.objectsHandler.setTextStyle({fontStyle:"normal"}),r("normal")):(n.editor?.objectsHandler.setTextStyle({fontStyle:"italic"}),r("italic"))}})}),t(x,{placement:"bottom",title:"Underline",children:t(m,{type:p?"primary":"text",icon:t(K,{size:16,style:{display:"flex"}}),onClick:()=>{n.editor?.objectsHandler.setTextStyle({underline:!p}),a(!p)}})}),t(x,{placement:"bottom",title:"Strikethrough",children:t(m,{type:g?"primary":"text",icon:t($,{size:16,style:{display:"flex"}}),onClick:()=>{n.editor?.objectsHandler.setTextStyle({linethrough:!g}),C(!g)}})}),t(x,{placement:"bottom",title:"Split by grapheme",children:t(m,{type:T?"primary":"text",icon:t(Q,{size:16,style:{display:"flex"}}),onClick:()=>{n.editor?.objectsHandler.setTextStyle({splitByGrapheme:!T}),P(!T)}})})]})}),at=f(({elements:i,store:n})=>{let e=i[0],s={display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"},c=typeof e.lineHeight=="number"?100*e.lineHeight:120,[o,d]=y(c),[l,r]=y(e.charSpacing),p=a=>{n.editor?.objectsHandler.setTextStyle(a)};return t(L,{trigger:"click",content:h("div",{style:{padding:"0 6px",width:"230px"},children:[h("div",{style:s,children:[t("div",{children:"Line height"}),t("div",{children:t(b,{min:50,max:250,value:Math.round(o),style:{width:80},onChange:a=>{p({lineHeight:a/100}),d(a)}})})]}),t(A,{value:Math.round(o),min:50,max:250,step:1,onChange:a=>{p({lineHeight:a/100}),d(a)}}),h("div",{style:s,children:[t("div",{children:"Letter spacing"}),t("div",{children:t(b,{min:-50,max:250,value:Math.round(l/10),style:{width:80},onChange:a=>{p({charSpacing:(a??0)*10}),r((a??0)*10)}})})]}),t(A,{value:Math.round(l/10),min:-50,max:250,step:1,onChange:a=>{p({charSpacing:(a??0)*10}),r((a??0)*10)}})]}),children:t(m,{type:"text",icon:t(q,{size:16,style:{display:"flex"}})})})}),ct={TextFill:lt,TextFontFamily:it,TextFontSize:rt,TextFontVariant:st,TextSpacing:at,TextFilters:B,TextAiWrite:j},dt=f(({store:i,components:n})=>{let e=i.selectedElements,c=I({type:"text",usedItems:["TextFill","TextFontFamily","TextFontSize","TextFontVariant","TextSpacing","TextFilters","TextAiWrite"],components:n});return t(H,{items:c,itemRender:o=>{let d=n[o]||ct[o];return d&&t(d,{elements:e,element:e[0],store:i},o)}})}),Ct=dt;export{S as a,dt as b,Ct as c};