@excalidraw/excalidraw 0.17.1-890ed9f → 0.17.1-96eeec5

package/dist/excalidraw/components/MobileMenu.js

@@ -11,8 +11,6 @@ import { Section } from "./Section";
 import { SCROLLBAR_WIDTH, SCROLLBAR_MARGIN } from "../scene/scrollbars";
 import { LockButton } from "./LockButton";
 import { PenModeButton } from "./PenModeButton";
-import { Stats } from "./Stats";
-import { actionToggleStats } from "../actions";
 import { HandButton } from "./HandButton";
 import { isHandToolActive } from "../appState";
 import { useTunnels } from "../context/tunnels";
@@ -27,9 +25,7 @@ export const MobileMenu = ({ appState, elements, actionManager, setAppState, onL
         }
         return (_jsxs("div", { className: "App-toolbar-content", children: [_jsx(MainMenuTunnel.Out, {}), actionManager.renderAction("toggleEditMenu"), actionManager.renderAction("undo"), actionManager.renderAction("redo"), actionManager.renderAction(appState.multiElement ? "finalize" : "duplicateSelection"), actionManager.renderAction("deleteSelectedElements")] }));
     };
-    return (_jsxs(_Fragment, { children: [renderSidebars(), !appState.viewModeEnabled && renderToolbar(), !appState.openMenu && appState.showStats && (_jsx(Stats, { appState: appState, setAppState: setAppState, elements: elements, onClose: () => {
-                    actionManager.executeAction(actionToggleStats);
-                }, renderCustomStats: renderCustomStats })), _jsx("div", { className: "App-bottom-bar", style: {
+    return (_jsxs(_Fragment, { children: [renderSidebars(), !appState.viewModeEnabled && renderToolbar(), _jsx("div", { className: "App-bottom-bar", style: {
                     marginBottom: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
                     marginLeft: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
                     marginRight: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
@@ -37,7 +33,7 @@ export const MobileMenu = ({ appState, elements, actionManager, setAppState, onL
                             !appState.viewModeEnabled &&
                             showSelectedShapeActions(appState, elements) ? (_jsx(Section, { className: "App-mobile-menu", heading: "selectedShapeActions", children: _jsx(SelectedShapeActions, { appState: appState, elementsMap: app.scene.getNonDeletedElementsMap(), renderAction: actionManager.renderAction }) })) : null, _jsxs("footer", { className: "App-toolbar", children: [renderAppToolbar(), appState.scrolledOutside &&
                                     !appState.openMenu &&
-                                    !appState.openSidebar && (_jsx("button", { className: "scroll-back-to-content", onClick: () => {
+                                    !appState.openSidebar && (_jsx("button", { type: "button", className: "scroll-back-to-content", onClick: () => {
                                         setAppState((appState) => ({
                                             ...calculateScrollCenter(elements, appState),
                                         }));

package/dist/excalidraw/components/Modal.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import "./Modal.scss";
-import { AppState } from "../types";
+import type { AppState } from "../types";
 export declare const Modal: React.FC<{
     className?: string;
     children: React.ReactNode;

package/dist/excalidraw/components/OverwriteConfirm/OverwriteConfirmState.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import type React from "react";
 export type OverwriteConfirmState = {
     active: true;
     title: string;

package/dist/excalidraw/components/PasteChartDialog.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { UIAppState } from "../types";
+import type { UIAppState } from "../types";
 import "./PasteChartDialog.scss";
 export declare const PasteChartDialog: ({ setAppState, appState, onClose, }: {
     appState: UIAppState;

package/dist/excalidraw/components/PasteChartDialog.js

@@ -35,7 +35,7 @@ const ChartPreviewBtn = (props) => {
             previewNode.replaceChildren();
         };
     }, [props.spreadsheet, props.chartType, props.selected]);
-    return (_jsx("button", { className: "ChartPreview", onClick: () => {
+    return (_jsx("button", { type: "button", className: "ChartPreview", onClick: () => {
             if (chartElements) {
                 props.onClick(props.chartType, chartElements);
             }

package/dist/excalidraw/components/PublishLibrary.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { LibraryItems, UIAppState } from "../types";
+import type { LibraryItems, UIAppState } from "../types";
 import "./PublishLibrary.scss";
 declare const PublishLibrary: ({ onClose, libraryItems, appState, onSuccess, onError, updateItemsInStorage, onRemove, }: {
     onClose: () => void;

package/dist/excalidraw/components/SVGLayer.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Trail } from "../animated-trail";
+import type { Trail } from "../animated-trail";
 import "./SVGLayer.scss";
 type SVGLayerProps = {
     trails: Trail[];

package/dist/excalidraw/components/Sidebar/Sidebar.d.ts

@@ -11,7 +11,7 @@ import "./Sidebar.scss";
 export declare const isSidebarDockedAtom: import("jotai").PrimitiveAtom<boolean> & {
     init: boolean;
 };
-export declare const SidebarInner: React.ForwardRefExoticComponent<Pick<{
+export declare const SidebarInner: React.ForwardRefExoticComponent<Omit<{
     name: string;
     children: React.ReactNode;
     onStateChange?: ((state: {
@@ -22,7 +22,7 @@ export declare const SidebarInner: React.ForwardRefExoticComponent<Pick<{
     docked?: boolean | undefined;
     className?: string | undefined;
     __fallback?: boolean | undefined;
-} & Omit<React.RefAttributes<HTMLDivElement>, "onSelect">, "name" | "children" | "key" | "className" | "onDock" | "docked" | "onStateChange" | "__fallback"> & React.RefAttributes<HTMLDivElement>>;
+} & Omit<React.RefAttributes<HTMLDivElement>, "onSelect">, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const Sidebar: React.ForwardRefExoticComponent<{
     name: string;
     children: React.ReactNode;

package/dist/excalidraw/components/Sidebar/Sidebar.js

@@ -4,7 +4,7 @@ import { useEffect, useLayoutEffect, useRef, useState, forwardRef, useImperative
 import { Island } from "../Island";
 import { atom, useSetAtom } from "jotai";
 import { jotaiScope } from "../../jotai";
-import { SidebarPropsContext, } from "./common";
+import { SidebarPropsContext } from "./common";
 import { SidebarHeader } from "./SidebarHeader";
 import clsx from "clsx";
 import { useDevice, useExcalidrawSetAppState } from "../App";

package/dist/excalidraw/components/Sidebar/SidebarTab.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SidebarTabName } from "../../types";
+import type { SidebarTabName } from "../../types";
 export declare const SidebarTab: {
     ({ tab, children, ...rest }: {
         tab: SidebarTabName;

package/dist/excalidraw/components/Sidebar/SidebarTabTrigger.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SidebarTabName } from "../../types";
+import type { SidebarTabName } from "../../types";
 export declare const SidebarTabTrigger: {
     ({ children, tab, onSelect, ...rest }: {
         children: React.ReactNode;

package/dist/excalidraw/components/Sidebar/SidebarTrigger.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SidebarTriggerProps } from "./common";
+import type { SidebarTriggerProps } from "./common";
 import "./SidebarTrigger.scss";
 export declare const SidebarTrigger: {
     ({ name, tab, icon, title, children, onToggle, className, style, }: SidebarTriggerProps): JSX.Element;

package/dist/excalidraw/components/Sidebar/common.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { AppState, SidebarName, SidebarTabName } from "../../types";
+import type { AppState, SidebarName, SidebarTabName } from "../../types";
 export type SidebarTriggerProps = {
     name: SidebarName;
     tab?: SidebarTabName;

package/dist/excalidraw/components/Stack.d.ts

@@ -10,7 +10,7 @@ type StackProps = {
     ref: React.RefObject<HTMLDivElement>;
 };
 declare const _default: {
-    Row: React.ForwardRefExoticComponent<Pick<StackProps, "children" | "style" | "gap" | "className" | "align" | "justifyContent"> & React.RefAttributes<HTMLDivElement>>;
-    Col: React.ForwardRefExoticComponent<Pick<StackProps, "children" | "style" | "gap" | "className" | "align" | "justifyContent"> & React.RefAttributes<HTMLDivElement>>;
+    Row: React.ForwardRefExoticComponent<Omit<StackProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Col: React.ForwardRefExoticComponent<Omit<StackProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 };
 export default _default;

package/dist/excalidraw/components/Stats/Angle.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { ExcalidrawElement } from "../../element/types";
+import type Scene from "../../scene/Scene";
+import type { AppState } from "../../types";
+interface AngleProps {
+    element: ExcalidrawElement;
+    scene: Scene;
+    appState: AppState;
+    property: "angle";
+}
+declare const Angle: ({ element, scene, appState, property }: AngleProps) => JSX.Element;
+export default Angle;

package/dist/excalidraw/components/Stats/Angle.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { mutateElement } from "../../element/mutateElement";
+import { getBoundTextElement } from "../../element/textElement";
+import { isArrowElement } from "../../element/typeChecks";
+import { degreeToRadian, radianToDegree } from "../../math";
+import { angleIcon } from "../icons";
+import DragInput from "./DragInput";
+import { getStepSizedValue, isPropertyEditable, updateBindings } from "./utils";
+const STEP_SIZE = 15;
+const handleDegreeChange = ({ accumulatedChange, originalElements, shouldChangeByStepSize, nextValue, scene, }) => {
+    const elementsMap = scene.getNonDeletedElementsMap();
+    const origElement = originalElements[0];
+    if (origElement) {
+        const latestElement = elementsMap.get(origElement.id);
+        if (!latestElement) {
+            return;
+        }
+        if (nextValue !== undefined) {
+            const nextAngle = degreeToRadian(nextValue);
+            mutateElement(latestElement, {
+                angle: nextAngle,
+            });
+            updateBindings(latestElement, elementsMap);
+            const boundTextElement = getBoundTextElement(latestElement, elementsMap);
+            if (boundTextElement && !isArrowElement(latestElement)) {
+                mutateElement(boundTextElement, { angle: nextAngle });
+            }
+            return;
+        }
+        const originalAngleInDegrees = Math.round(radianToDegree(origElement.angle) * 100) / 100;
+        const changeInDegrees = Math.round(accumulatedChange);
+        let nextAngleInDegrees = (originalAngleInDegrees + changeInDegrees) % 360;
+        if (shouldChangeByStepSize) {
+            nextAngleInDegrees = getStepSizedValue(nextAngleInDegrees, STEP_SIZE);
+        }
+        nextAngleInDegrees =
+            nextAngleInDegrees < 0 ? nextAngleInDegrees + 360 : nextAngleInDegrees;
+        const nextAngle = degreeToRadian(nextAngleInDegrees);
+        mutateElement(latestElement, {
+            angle: nextAngle,
+        });
+        updateBindings(latestElement, elementsMap);
+        const boundTextElement = getBoundTextElement(latestElement, elementsMap);
+        if (boundTextElement && !isArrowElement(latestElement)) {
+            mutateElement(boundTextElement, { angle: nextAngle });
+        }
+    }
+};
+const Angle = ({ element, scene, appState, property }) => {
+    return (_jsx(DragInput, { label: "A", icon: angleIcon, value: Math.round((radianToDegree(element.angle) % 360) * 100) / 100, elements: [element], dragInputCallback: handleDegreeChange, editable: isPropertyEditable(element, "angle"), scene: scene, appState: appState, property: property }));
+};
+export default Angle;

package/dist/excalidraw/components/Stats/Collapsible.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface CollapsibleProps {
+    label: React.ReactNode;
+    open: boolean;
+    openTrigger: () => void;
+    children: React.ReactNode;
+}
+declare const Collapsible: ({ label, open, openTrigger, children, }: CollapsibleProps) => JSX.Element;
+export default Collapsible;

package/dist/excalidraw/components/Stats/Collapsible.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { InlineIcon } from "../InlineIcon";
+import { collapseDownIcon, collapseUpIcon } from "../icons";
+const Collapsible = ({ label, open, openTrigger, children, }) => {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
+                    cursor: "pointer",
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                }, onClick: openTrigger, children: [label, _jsx(InlineIcon, { icon: open ? collapseUpIcon : collapseDownIcon })] }), open && _jsx(_Fragment, { children: children })] }));
+};
+export default Collapsible;

package/dist/excalidraw/components/Stats/Dimension.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { ExcalidrawElement } from "../../element/types";
+import type Scene from "../../scene/Scene";
+import type { AppState } from "../../types";
+interface DimensionDragInputProps {
+    property: "width" | "height";
+    element: ExcalidrawElement;
+    scene: Scene;
+    appState: AppState;
+}
+declare const DimensionDragInput: ({ property, element, scene, appState, }: DimensionDragInputProps) => JSX.Element;
+export default DimensionDragInput;

package/dist/excalidraw/components/Stats/Dimension.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import DragInput from "./DragInput";
+import { getStepSizedValue, isPropertyEditable, resizeElement } from "./utils";
+import { MIN_WIDTH_OR_HEIGHT } from "../../constants";
+const STEP_SIZE = 10;
+const _shouldKeepAspectRatio = (element) => {
+    return element.type === "image";
+};
+const handleDimensionChange = ({ accumulatedChange, originalElements, originalElementsMap, shouldKeepAspectRatio, shouldChangeByStepSize, nextValue, property, scene, }) => {
+    const elementsMap = scene.getNonDeletedElementsMap();
+    const origElement = originalElements[0];
+    if (origElement) {
+        const keepAspectRatio = shouldKeepAspectRatio || _shouldKeepAspectRatio(origElement);
+        const aspectRatio = origElement.width / origElement.height;
+        if (nextValue !== undefined) {
+            const nextWidth = Math.max(property === "width"
+                ? nextValue
+                : keepAspectRatio
+                    ? nextValue * aspectRatio
+                    : origElement.width, MIN_WIDTH_OR_HEIGHT);
+            const nextHeight = Math.max(property === "height"
+                ? nextValue
+                : keepAspectRatio
+                    ? nextValue / aspectRatio
+                    : origElement.height, MIN_WIDTH_OR_HEIGHT);
+            resizeElement(nextWidth, nextHeight, keepAspectRatio, origElement, elementsMap);
+            return;
+        }
+        const changeInWidth = property === "width" ? accumulatedChange : 0;
+        const changeInHeight = property === "height" ? accumulatedChange : 0;
+        let nextWidth = Math.max(0, origElement.width + changeInWidth);
+        if (property === "width") {
+            if (shouldChangeByStepSize) {
+                nextWidth = getStepSizedValue(nextWidth, STEP_SIZE);
+            }
+            else {
+                nextWidth = Math.round(nextWidth);
+            }
+        }
+        let nextHeight = Math.max(0, origElement.height + changeInHeight);
+        if (property === "height") {
+            if (shouldChangeByStepSize) {
+                nextHeight = getStepSizedValue(nextHeight, STEP_SIZE);
+            }
+            else {
+                nextHeight = Math.round(nextHeight);
+            }
+        }
+        if (keepAspectRatio) {
+            if (property === "width") {
+                nextHeight = Math.round((nextWidth / aspectRatio) * 100) / 100;
+            }
+            else {
+                nextWidth = Math.round(nextHeight * aspectRatio * 100) / 100;
+            }
+        }
+        nextHeight = Math.max(MIN_WIDTH_OR_HEIGHT, nextHeight);
+        nextWidth = Math.max(MIN_WIDTH_OR_HEIGHT, nextWidth);
+        resizeElement(nextWidth, nextHeight, keepAspectRatio, origElement, elementsMap);
+    }
+};
+const DimensionDragInput = ({ property, element, scene, appState, }) => {
+    const value = Math.round((property === "width" ? element.width : element.height) * 100) /
+        100;
+    return (_jsx(DragInput, { label: property === "width" ? "W" : "H", elements: [element], dragInputCallback: handleDimensionChange, value: value, editable: isPropertyEditable(element, property), scene: scene, appState: appState, property: property }));
+};
+export default DimensionDragInput;

package/dist/excalidraw/components/Stats/DragInput.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import type { ElementsMap, ExcalidrawElement } from "../../element/types";
+import type { StatsInputProperty } from "./utils";
+import type Scene from "../../scene/Scene";
+import "./DragInput.scss";
+import type { AppState } from "../../types";
+export type DragInputCallbackType<P extends StatsInputProperty, E = ExcalidrawElement> = (props: {
+    accumulatedChange: number;
+    instantChange: number;
+    originalElements: readonly E[];
+    originalElementsMap: ElementsMap;
+    shouldKeepAspectRatio: boolean;
+    shouldChangeByStepSize: boolean;
+    nextValue?: number;
+    property: P;
+    scene: Scene;
+    originalAppState: AppState;
+}) => void;
+interface StatsDragInputProps<T extends StatsInputProperty, E = ExcalidrawElement> {
+    label: string | React.ReactNode;
+    icon?: React.ReactNode;
+    value: number | "Mixed";
+    elements: readonly E[];
+    editable?: boolean;
+    shouldKeepAspectRatio?: boolean;
+    dragInputCallback: DragInputCallbackType<T, E>;
+    property: T;
+    scene: Scene;
+    appState: AppState;
+}
+declare const StatsDragInput: <T extends StatsInputProperty, E extends ExcalidrawElement = ExcalidrawElement>({ label, icon, dragInputCallback, value, elements, editable, shouldKeepAspectRatio, property, scene, appState, }: StatsDragInputProps<T, E>) => JSX.Element | null;
+export default StatsDragInput;

package/dist/excalidraw/components/Stats/DragInput.js

@@ -0,0 +1,174 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { EVENT } from "../../constants";
+import { KEYS } from "../../keys";
+import { deepCopyElement } from "../../element/newElement";
+import clsx from "clsx";
+import { useApp } from "../App";
+import { InlineIcon } from "../InlineIcon";
+import { SMALLEST_DELTA } from "./utils";
+import { StoreAction } from "../../store";
+import "./DragInput.scss";
+import { cloneJSON } from "../../utils";
+const StatsDragInput = ({ label, icon, dragInputCallback, value, elements, editable = true, shouldKeepAspectRatio, property, scene, appState, }) => {
+    const app = useApp();
+    const inputRef = useRef(null);
+    const labelRef = useRef(null);
+    const [inputValue, setInputValue] = useState(value.toString());
+    const stateRef = useRef(null);
+    if (!stateRef.current) {
+        stateRef.current = {
+            originalAppState: cloneJSON(appState),
+            originalElements: elements,
+            lastUpdatedValue: inputValue,
+            updatePending: false,
+        };
+    }
+    useEffect(() => {
+        const inputValue = value.toString();
+        setInputValue(inputValue);
+        stateRef.current.lastUpdatedValue = inputValue;
+    }, [value]);
+    const handleInputValue = (updatedValue, elements, appState) => {
+        if (!stateRef.current.updatePending) {
+            return false;
+        }
+        stateRef.current.updatePending = false;
+        const parsed = Number(updatedValue);
+        if (isNaN(parsed)) {
+            setInputValue(value.toString());
+            return;
+        }
+        const rounded = Number(parsed.toFixed(2));
+        const original = Number(value);
+        // only update when
+        // 1. original was "Mixed" and we have a new value
+        // 2. original was not "Mixed" and the difference between a new value and previous value is greater
+        //    than the smallest delta allowed, which is 0.01
+        // reason: idempotent to avoid unnecessary
+        if (isNaN(original) || Math.abs(rounded - original) >= SMALLEST_DELTA) {
+            stateRef.current.lastUpdatedValue = updatedValue;
+            dragInputCallback({
+                accumulatedChange: 0,
+                instantChange: 0,
+                originalElements: elements,
+                originalElementsMap: app.scene.getNonDeletedElementsMap(),
+                shouldKeepAspectRatio: shouldKeepAspectRatio,
+                shouldChangeByStepSize: false,
+                nextValue: rounded,
+                property,
+                scene,
+                originalAppState: appState,
+            });
+            app.syncActionResult({ storeAction: StoreAction.CAPTURE });
+        }
+    };
+    const handleInputValueRef = useRef(handleInputValue);
+    handleInputValueRef.current = handleInputValue;
+    // make sure that clicking on canvas (which umounts the component)
+    // updates current input value (blur isn't triggered)
+    useEffect(() => {
+        const input = inputRef.current;
+        return () => {
+            const nextValue = input?.value;
+            if (nextValue) {
+                handleInputValueRef.current(nextValue, stateRef.current.originalElements, stateRef.current.originalAppState);
+            }
+        };
+    }, [
+        // we need to track change of `editable` state as mount/unmount
+        // because react doesn't trigger `blur` when a an input is blurred due
+        // to being disabled (https://github.com/facebook/react/issues/9142).
+        // As such, if we keep rendering disabled inputs, then change in selection
+        // to an element that has a given property as non-editable would not trigger
+        // blur/unmount and wouldn't update the value.
+        editable,
+    ]);
+    if (!editable) {
+        return null;
+    }
+    return (_jsxs("div", { className: clsx("drag-input-container", !editable && "disabled"), "data-testid": label, children: [_jsx("div", { className: "drag-input-label", ref: labelRef, onPointerDown: (event) => {
+                    if (inputRef.current && editable) {
+                        let startValue = Number(inputRef.current.value);
+                        if (isNaN(startValue)) {
+                            startValue = 0;
+                        }
+                        let lastPointer = null;
+                        let originalElementsMap = app.scene
+                            .getNonDeletedElements()
+                            .reduce((acc, element) => {
+                            acc.set(element.id, deepCopyElement(element));
+                            return acc;
+                        }, new Map());
+                        let originalElements = elements.map((element) => originalElementsMap.get(element.id));
+                        const originalAppState = cloneJSON(appState);
+                        let accumulatedChange = null;
+                        document.body.classList.add("excalidraw-cursor-resize");
+                        const onPointerMove = (event) => {
+                            if (!accumulatedChange) {
+                                accumulatedChange = 0;
+                            }
+                            if (lastPointer &&
+                                originalElementsMap !== null &&
+                                originalElements !== null &&
+                                accumulatedChange !== null) {
+                                const instantChange = event.clientX - lastPointer.x;
+                                accumulatedChange += instantChange;
+                                dragInputCallback({
+                                    accumulatedChange,
+                                    instantChange,
+                                    originalElements,
+                                    originalElementsMap,
+                                    shouldKeepAspectRatio: shouldKeepAspectRatio,
+                                    shouldChangeByStepSize: event.shiftKey,
+                                    property,
+                                    scene,
+                                    originalAppState,
+                                });
+                            }
+                            lastPointer = {
+                                x: event.clientX,
+                                y: event.clientY,
+                            };
+                        };
+                        window.addEventListener(EVENT.POINTER_MOVE, onPointerMove, false);
+                        window.addEventListener(EVENT.POINTER_UP, () => {
+                            window.removeEventListener(EVENT.POINTER_MOVE, onPointerMove, false);
+                            app.syncActionResult({ storeAction: StoreAction.CAPTURE });
+                            lastPointer = null;
+                            accumulatedChange = null;
+                            originalElements = null;
+                            originalElementsMap = null;
+                            document.body.classList.remove("excalidraw-cursor-resize");
+                        }, false);
+                    }
+                }, onPointerEnter: () => {
+                    if (labelRef.current) {
+                        labelRef.current.style.cursor = "ew-resize";
+                    }
+                }, children: icon ? _jsx(InlineIcon, { icon: icon }) : label }), _jsx("input", { className: "drag-input", autoComplete: "off", spellCheck: "false", onKeyDown: (event) => {
+                    if (editable) {
+                        const eventTarget = event.target;
+                        if (eventTarget instanceof HTMLInputElement &&
+                            event.key === KEYS.ENTER) {
+                            handleInputValue(eventTarget.value, elements, appState);
+                            app.focusContainer();
+                        }
+                    }
+                }, ref: inputRef, value: inputValue, onChange: (event) => {
+                    stateRef.current.updatePending = true;
+                    setInputValue(event.target.value);
+                }, onFocus: (event) => {
+                    event.target.select();
+                    stateRef.current.originalElements = elements;
+                    stateRef.current.originalAppState = cloneJSON(appState);
+                }, onBlur: (event) => {
+                    if (!inputValue) {
+                        setInputValue(value.toString());
+                    }
+                    else if (editable) {
+                        handleInputValue(event.target.value, stateRef.current.originalElements, stateRef.current.originalAppState);
+                    }
+                }, disabled: !editable })] }));
+};
+export default StatsDragInput;

package/dist/excalidraw/components/Stats/FontSize.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { ExcalidrawElement } from "../../element/types";
+import type Scene from "../../scene/Scene";
+import type { AppState } from "../../types";
+interface FontSizeProps {
+    element: ExcalidrawElement;
+    scene: Scene;
+    appState: AppState;
+    property: "fontSize";
+}
+declare const FontSize: ({ element, scene, appState, property }: FontSizeProps) => JSX.Element | null;
+export default FontSize;

package/dist/excalidraw/components/Stats/FontSize.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import StatsDragInput from "./DragInput";
+import { mutateElement } from "../../element/mutateElement";
+import { getStepSizedValue } from "./utils";
+import { fontSizeIcon } from "../icons";
+import { isTextElement, redrawTextBoundingBox } from "../../element";
+import { hasBoundTextElement } from "../../element/typeChecks";
+import { getBoundTextElement } from "../../element/textElement";
+const MIN_FONT_SIZE = 4;
+const STEP_SIZE = 4;
+const handleFontSizeChange = ({ accumulatedChange, originalElements, shouldChangeByStepSize, nextValue, scene, }) => {
+    const elementsMap = scene.getNonDeletedElementsMap();
+    const origElement = originalElements[0];
+    if (origElement) {
+        const latestElement = elementsMap.get(origElement.id);
+        if (!latestElement || !isTextElement(latestElement)) {
+            return;
+        }
+        let nextFontSize;
+        if (nextValue !== undefined) {
+            nextFontSize = Math.max(Math.round(nextValue), MIN_FONT_SIZE);
+        }
+        else if (origElement.type === "text") {
+            const originalFontSize = Math.round(origElement.fontSize);
+            const changeInFontSize = Math.round(accumulatedChange);
+            nextFontSize = Math.max(originalFontSize + changeInFontSize, MIN_FONT_SIZE);
+            if (shouldChangeByStepSize) {
+                nextFontSize = getStepSizedValue(nextFontSize, STEP_SIZE);
+            }
+        }
+        if (nextFontSize) {
+            mutateElement(latestElement, {
+                fontSize: nextFontSize,
+            });
+            redrawTextBoundingBox(latestElement, scene.getContainerElement(latestElement), scene.getNonDeletedElementsMap());
+        }
+    }
+};
+const FontSize = ({ element, scene, appState, property }) => {
+    const _element = isTextElement(element)
+        ? element
+        : hasBoundTextElement(element)
+            ? getBoundTextElement(element, scene.getNonDeletedElementsMap())
+            : null;
+    if (!_element) {
+        return null;
+    }
+    return (_jsx(StatsDragInput, { label: "F", value: Math.round(_element.fontSize * 10) / 10, elements: [_element], dragInputCallback: handleFontSizeChange, icon: fontSizeIcon, appState: appState, scene: scene, property: property }));
+};
+export default FontSize;

package/dist/excalidraw/components/Stats/MultiAngle.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { ExcalidrawElement } from "../../element/types";
+import type Scene from "../../scene/Scene";
+import type { AppState } from "../../types";
+interface MultiAngleProps {
+    elements: readonly ExcalidrawElement[];
+    scene: Scene;
+    appState: AppState;
+    property: "angle";
+}
+declare const MultiAngle: ({ elements, scene, appState, property, }: MultiAngleProps) => JSX.Element;
+export default MultiAngle;