@excalidraw/excalidraw 0.17.1-550a388 → 0.17.1-62228e0

package/dist/excalidraw/components/icons.js

@@ -83,7 +83,7 @@ export const TrashIcon = createIcon(_jsx("path", { strokeWidth: "1.25", d: "M3.3
 export const EmbedIcon = createIcon(_jsxs("g", { strokeWidth: "1.25", children: [_jsx("polyline", { points: "12 16 18 10 12 4" }), _jsx("polyline", { points: "8 4 2 10 8 16" })] }), modifiedTablerIconProps);
 export const DuplicateIcon = createIcon(_jsxs("g", { strokeWidth: "1.25", children: [_jsx("path", { d: "M14.375 6.458H8.958a2.5 2.5 0 0 0-2.5 2.5v5.417a2.5 2.5 0 0 0 2.5 2.5h5.417a2.5 2.5 0 0 0 2.5-2.5V8.958a2.5 2.5 0 0 0-2.5-2.5Z" }), _jsx("path", { clipRule: "evenodd", d: "M11.667 3.125c.517 0 .986.21 1.325.55.34.338.55.807.55 1.325v1.458H8.333c-.485 0-.927.185-1.26.487-.343.312-.57.75-.609 1.24l-.005 5.357H5a1.87 1.87 0 0 1-1.326-.55 1.87 1.87 0 0 1-.549-1.325V5c0-.518.21-.987.55-1.326.338-.34.807-.549 1.325-.549h6.667Z" })] }), modifiedTablerIconProps);
 export const MoonIcon = createIcon(_jsx("path", { clipRule: "evenodd", d: "M10 2.5h.328a6.25 6.25 0 0 0 6.6 10.372A7.5 7.5 0 1 1 10 2.493V2.5Z", stroke: "currentColor" }), modifiedTablerIconProps);
-export const SunIcon = createIcon(_jsx("g", { stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M10 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM10 4.167V2.5M14.167 5.833l1.166-1.166M15.833 10H17.5M14.167 14.167l1.166 1.166M10 15.833V17.5M5.833 14.167l-1.166 1.166M5 10H3.333M5.833 5.833 4.667 4.667" }) }), modifiedTablerIconProps);
+export const SunIcon = createIcon(_jsx("g", { stroke: "currentColor", strokeLinejoin: "round", children: _jsx("path", { d: "M10 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM10 4.167V2.5M14.167 5.833l1.166-1.166M15.833 10H17.5M14.167 14.167l1.166 1.166M10 15.833V17.5M5.833 14.167l-1.166 1.166M5 10H3.333M5.833 5.833 4.667 4.667" }) }), { ...modifiedTablerIconProps, strokeWidth: 1.5 });
 export const HamburgerMenuIcon = createIcon(_jsxs("g", { strokeWidth: "1.5", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("line", { x1: "4", y1: "6", x2: "20", y2: "6" }), _jsx("line", { x1: "4", y1: "12", x2: "20", y2: "12" }), _jsx("line", { x1: "4", y1: "18", x2: "20", y2: "18" })] }), tablerIconProps);
 export const ExportIcon = createIcon(_jsx("path", { strokeWidth: "1.25", d: "M3.333 14.167v1.666c0 .92.747 1.667 1.667 1.667h10c.92 0 1.667-.746 1.667-1.667v-1.666M5.833 9.167 10 13.333l4.167-4.166M10 3.333v10" }), modifiedTablerIconProps);
 export const HelpIcon = createIcon(_jsxs("g", { strokeWidth: "1.5", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("circle", { cx: "12", cy: "12", r: "9" }), _jsx("line", { x1: "12", y1: "17", x2: "12", y2: "17.01" }), _jsx("path", { d: "M12 13.5a1.5 1.5 0 0 1 1 -1.5a2.6 2.6 0 1 0 -3 -4" })] }), tablerIconProps);
@@ -121,10 +121,22 @@ export const shareWindows = createIcon(_jsxs(_Fragment, { children: [_jsx("path"
 // Icon imported form Storybook
 // Storybook is licensed under MIT https://github.com/storybookjs/storybook/blob/next/LICENSE
 export const resetZoom = createIcon(_jsx("path", { stroke: "currentColor", strokeWidth: "40", fill: "currentColor", d: "M148 560a318 318 0 0 0 522 110 316 316 0 0 0 0-450 316 316 0 0 0-450 0c-11 11-21 22-30 34v4h47c25 0 46 21 46 46s-21 45-46 45H90c-13 0-25-6-33-14-9-9-14-20-14-33V156c0-25 20-45 45-45s45 20 45 45v32l1 1a401 401 0 0 1 623 509l212 212a42 42 0 0 1-59 59L698 757A401 401 0 0 1 65 570a42 42 0 0 1 83-10z" }), { width: 1024 });
-export const BringForwardIcon = createIcon(_jsxs(_Fragment, { children: [_jsxs("g", { clipPath: "url(#a)", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M13.889 4.167H8.333c-.767 0-1.389.622-1.389 1.389v5.555c0 .767.622 1.389 1.39 1.389h5.555c.767 0 1.389-.622 1.389-1.389V5.556c0-.767-.622-1.39-1.39-1.39Z", fill: "currentColor" }), _jsx("path", { d: "M12.5 12.5v1.389a1.389 1.389 0 0 1-1.389 1.389H5.556a1.389 1.389 0 0 1-1.39-1.39V8.334a1.389 1.389 0 0 1 1.39-1.389h1.388" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
-export const SendBackwardIcon = createIcon(_jsxs(_Fragment, { children: [_jsxs("g", { clipPath: "url(#a)", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.944 12.5H12.5v1.389a1.389 1.389 0 0 1-1.389 1.389H5.556a1.389 1.389 0 0 1-1.39-1.39V8.334a1.389 1.389 0 0 1 1.39-1.389h1.388", fill: "currentColor" }), _jsx("path", { d: "M13.889 4.167H8.333c-.767 0-1.389.621-1.389 1.389v5.555c0 .767.622 1.389 1.39 1.389h5.555c.767 0 1.389-.622 1.389-1.389V5.556c0-.768-.622-1.39-1.39-1.39Z" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
-export const BringToFrontIcon = createIcon(_jsxs(_Fragment, { children: [_jsxs("g", { clipPath: "url(#a)", stroke: "currentColor", strokeWidth: "1.25", children: [_jsx("path", { d: "M8.775 6.458h2.45a2.316 2.316 0 0 1 2.317 2.316v2.452a2.316 2.316 0 0 1-2.316 2.316H8.774a2.316 2.316 0 0 1-2.317-2.316V8.774a2.316 2.316 0 0 1 2.317-2.316Z", fill: "currentColor" }), _jsx("path", { d: "M5.441 9.792h2.451a2.316 2.316 0 0 1 2.316 2.316v2.45a2.316 2.316 0 0 1-2.316 2.317h-2.45a2.316 2.316 0 0 1-2.317-2.316v-2.451a2.316 2.316 0 0 1 2.316-2.316ZM12.108 3.125h2.45a2.316 2.316 0 0 1 2.317 2.316v2.451a2.316 2.316 0 0 1-2.316 2.316h-2.451a2.316 2.316 0 0 1-2.316-2.316v-2.45a2.316 2.316 0 0 1 2.316-2.317Z" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
-export const SendToBackIcon = createIcon(_jsxs(_Fragment, { children: [_jsxs("g", { clipPath: "url(#a)", children: [_jsx("path", { d: "M5.441 9.792h2.451a2.316 2.316 0 0 1 2.316 2.316v2.45a2.316 2.316 0 0 1-2.316 2.317h-2.45a2.316 2.316 0 0 1-2.317-2.316v-2.451a2.316 2.316 0 0 1 2.316-2.316Z", stroke: "currentColor", strokeWidth: "1.25" }), _jsx("path", { d: "M5.441 9.792h2.451a2.316 2.316 0 0 1 2.316 2.316v2.45a2.316 2.316 0 0 1-2.316 2.317h-2.45a2.316 2.316 0 0 1-2.317-2.316v-2.451a2.316 2.316 0 0 1 2.316-2.316Z", stroke: "currentColor", strokeWidth: "1.25" }), _jsx("mask", { id: "SendToBackIcon", fill: "#fff", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.167 5.833v2.06a2.941 2.941 0 0 0 2.94 2.94h2.06v.393a2.941 2.941 0 0 1-2.941 2.94h-.393v-2.058a2.941 2.941 0 0 0-2.94-2.941h-2.06v-.393a2.941 2.941 0 0 1 2.942-2.94h.392Z" }) }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.167 5.833v2.06a2.941 2.941 0 0 0 2.94 2.94h2.06v.393a2.941 2.941 0 0 1-2.941 2.94h-.393v-2.058a2.941 2.941 0 0 0-2.94-2.941h-2.06v-.393a2.941 2.941 0 0 1 2.942-2.94h.392Z", fill: "currentColor" }), _jsx("path", { d: "M9.167 5.833h1.25v-1.25h-1.25v1.25Zm5 5h1.25v-1.25h-1.25v1.25Zm-3.334 3.334h-1.25v1.25h1.25v-1.25Zm-5-5h-1.25v1.25h1.25v-1.25Zm2.084-3.334v2.06h2.5v-2.06h-2.5Zm0 2.06a4.191 4.191 0 0 0 4.19 4.19v-2.5a1.691 1.691 0 0 1-1.69-1.69h-2.5Zm4.19 4.19h2.06v-2.5h-2.06v2.5Zm.81-1.25v.393h2.5v-.393h-2.5Zm0 .393c0 .933-.758 1.69-1.691 1.69v2.5a4.191 4.191 0 0 0 4.19-4.19h-2.5Zm-1.691 1.69h-.393v2.5h.393v-2.5Zm.857 1.25v-2.058h-2.5v2.059h2.5Zm0-2.058a4.191 4.191 0 0 0-4.19-4.191v2.5c.933 0 1.69.757 1.69 1.69h2.5Zm-4.19-4.191h-2.06v2.5h2.06v-2.5Zm-.81 1.25v-.393h-2.5v.393h2.5Zm0-.393c0-.934.758-1.69 1.692-1.69v-2.5a4.191 4.191 0 0 0-4.192 4.19h2.5Zm1.692-1.69h.392v-2.5h-.392v2.5Z", fill: "currentColor", mask: "url(#SendToBackIcon)" }), _jsx("path", { d: "M12.108 3.125h2.45a2.316 2.316 0 0 1 2.317 2.316v2.451a2.316 2.316 0 0 1-2.316 2.316h-2.451a2.316 2.316 0 0 1-2.316-2.316v-2.45a2.316 2.316 0 0 1 2.316-2.317Z", stroke: "currentColor", strokeWidth: "1.25" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
+const arrowBarToTopJSX = (_jsxs("g", { strokeWidth: 1.5, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M12 10l0 10" }), _jsx("path", { d: "M12 10l4 4" }), _jsx("path", { d: "M12 10l-4 4" }), _jsx("path", { d: "M4 4l16 0" })] }));
+const arrownNarrowUpJSX = (_jsxs("g", { strokeWidth: 1.5, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M12 5l0 14" }), _jsx("path", { d: "M16 9l-4 -4" }), _jsx("path", { d: "M8 9l4 -4" })] }));
+export const BringForwardIcon = createIcon(arrownNarrowUpJSX, tablerIconProps);
+export const SendBackwardIcon = createIcon(arrownNarrowUpJSX, {
+    ...tablerIconProps,
+    style: {
+        transform: "rotate(180deg)",
+    },
+});
+export const BringToFrontIcon = createIcon(arrowBarToTopJSX, tablerIconProps);
+export const SendToBackIcon = createIcon(arrowBarToTopJSX, {
+    ...tablerIconProps,
+    style: {
+        transform: "rotate(180deg)",
+    },
+});
 //
 // Align action icons created from scratch to match those of z-index actions
 // Note: vertical align icons are flipped so the larger item is always the
@@ -189,6 +201,7 @@ export const FontSizeMediumIcon = createIcon(_jsxs(_Fragment, { children: [_jsx(
 export const FontSizeLargeIcon = createIcon(_jsxs(_Fragment, { children: [_jsx("g", { clipPath: "url(#a)", children: _jsx("path", { d: "M5.833 3.333v13.334h8.334", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
 export const FontSizeExtraLargeIcon = createIcon(_jsx(_Fragment, { children: _jsx("path", { d: "m1.667 3.333 6.666 13.334M8.333 3.333 1.667 16.667M11.667 3.333v13.334h6.666", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }) }), modifiedTablerIconProps);
 export const fontSizeIcon = createIcon(_jsxs("g", { strokeWidth: 1.25, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M3 7v-2h13v2" }), _jsx("path", { d: "M10 5v14" }), _jsx("path", { d: "M12 19h-4" }), _jsx("path", { d: "M15 13v-1h6v1" }), _jsx("path", { d: "M18 12v7" }), _jsx("path", { d: "M17 19h2" })] }), tablerIconProps);
+export const FontFamilyHeadingIcon = createIcon(_jsx(_Fragment, { children: _jsxs("g", { stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M7 12h10" }), _jsx("path", { d: "M7 5v14" }), _jsx("path", { d: "M17 5v14" }), _jsx("path", { d: "M15 19h4" }), _jsx("path", { d: "M15 5h4" }), _jsx("path", { d: "M5 19h4" }), _jsx("path", { d: "M5 5h4" })] }) }), tablerIconProps);
 export const FontFamilyNormalIcon = createIcon(_jsx(_Fragment, { children: _jsx("g", { stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M5.833 16.667v-10a3.333 3.333 0 0 1 3.334-3.334h1.666a3.333 3.333 0 0 1 3.334 3.334v10M5.833 10.833h8.334" }) }) }), modifiedTablerIconProps);
 export const FontFamilyCodeIcon = createIcon(_jsxs(_Fragment, { children: [_jsx("g", { clipPath: "url(#a)", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M5.833 6.667 2.5 10l3.333 3.333M14.167 6.667 17.5 10l-3.333 3.333M11.667 3.333 8.333 16.667" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
 export const TextAlignLeftIcon = createIcon(_jsxs("g", { stroke: "currentColor", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("line", { x1: "4", y1: "8", x2: "20", y2: "8" }), _jsx("line", { x1: "4", y1: "12", x2: "12", y2: "12" }), _jsx("line", { x1: "4", y1: "16", x2: "16", y2: "16" })] }), tablerIconProps);
@@ -200,6 +213,7 @@ export const TextAlignTopIcon = React.memo(({ theme }) => createIcon(_jsxs("g",
 export const TextAlignBottomIcon = React.memo(({ theme }) => createIcon(_jsxs("g", { strokeWidth: "2", stroke: "currentColor", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("line", { x1: "4", y1: "20", x2: "20", y2: "20" }), _jsx("rect", { x: "9", y: "4", width: "6", height: "12", rx: "2" })] }), tablerIconProps));
 // tabler-icons: layout-align-middle
 export const TextAlignMiddleIcon = React.memo(({ theme }) => createIcon(_jsxs("g", { strokeWidth: "1.5", stroke: "currentColor", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("line", { x1: "4", y1: "12", x2: "9", y2: "12" }), _jsx("line", { x1: "15", y1: "12", x2: "20", y2: "12" }), _jsx("rect", { x: "9", y: "6", width: "6", height: "12", rx: "2" })] }), tablerIconProps));
+export const angleIcon = createIcon(_jsxs("g", { children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M21 19h-18l9 -15" }), _jsx("path", { d: "M20.615 15.171h.015" }), _jsx("path", { d: "M19.515 11.771h.015" }), _jsx("path", { d: "M17.715 8.671h.015" }), _jsx("path", { d: "M15.415 5.971h.015" })] }), tablerIconProps);
 export const publishIcon = createIcon(_jsx("path", { d: "M537.6 226.6c4.1-10.7 6.4-22.4 6.4-34.6 0-53-43-96-96-96-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32c-88.4 0-160 71.6-160 160 0 2.7.1 5.4.2 8.1C40.2 219.8 0 273.2 0 336c0 79.5 64.5 144 144 144h368c70.7 0 128-57.3 128-128 0-61.9-44-113.6-102.4-125.4zM393.4 288H328v112c0 8.8-7.2 16-16 16h-48c-8.8 0-16-7.2-16-16V288h-65.4c-14.3 0-21.4-17.2-11.3-27.3l105.4-105.4c6.2-6.2 16.4-6.2 22.6 0l105.4 105.4c10.1 10.1 2.9 27.3-11.3 27.3z", fill: "currentColor" }), { width: 640, height: 512 });
 export const eraser = createIcon(_jsx("path", { d: "M480 416C497.7 416 512 430.3 512 448C512 465.7 497.7 480 480 480H150.6C133.7 480 117.4 473.3 105.4 461.3L25.37 381.3C.3786 356.3 .3786 315.7 25.37 290.7L258.7 57.37C283.7 32.38 324.3 32.38 349.3 57.37L486.6 194.7C511.6 219.7 511.6 260.3 486.6 285.3L355.9 416H480zM265.4 416L332.7 348.7L195.3 211.3L70.63 336L150.6 416L265.4 416z" }));
 export const handIcon = createIcon(_jsxs("g", { strokeWidth: 1.25, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M8 13v-7.5a1.5 1.5 0 0 1 3 0v6.5" }), _jsx("path", { d: "M11 5.5v-2a1.5 1.5 0 1 1 3 0v8.5" }), _jsx("path", { d: "M14 5.5a1.5 1.5 0 0 1 3 0v6.5" }), _jsx("path", { d: "M17 7.5a1.5 1.5 0 0 1 3 0v8.5a6 6 0 0 1 -6 6h-2h.208a6 6 0 0 1 -5.012 -2.7a69.74 69.74 0 0 1 -.196 -.3c-.312 -.479 -1.407 -2.388 -3.286 -5.728a1.5 1.5 0 0 1 .536 -2.022a1.867 1.867 0 0 1 2.28 .28l1.47 1.47" })] }), tablerIconProps);
@@ -240,3 +254,11 @@ export const svgIcon = createIcon(_jsxs("g", { strokeWidth: 1.25, children: [_js
 export const pngIcon = createIcon(_jsxs("g", { strokeWidth: 1.25, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M14 3v4a1 1 0 0 0 1 1h4" }), _jsx("path", { d: "M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4" }), _jsx("path", { d: "M20 15h-1a2 2 0 0 0 -2 2v2a2 2 0 0 0 2 2h1v-3" }), _jsx("path", { d: "M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6" }), _jsx("path", { d: "M11 21v-6l3 6v-6" })] }), tablerIconProps);
 export const magnetIcon = createIcon(_jsxs("g", { strokeWidth: 1.25, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M4 13v-8a2 2 0 0 1 2 -2h1a2 2 0 0 1 2 2v8a2 2 0 0 0 6 0v-8a2 2 0 0 1 2 -2h1a2 2 0 0 1 2 2v8a8 8 0 0 1 -16 0" }), _jsx("path", { d: "M4 8l5 0" }), _jsx("path", { d: "M15 8l4 0" })] }), tablerIconProps);
 export const coffeeIcon = createIcon(_jsxs("g", { strokeWidth: 1.25, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M3 14c.83 .642 2.077 1.017 3.5 1c1.423 .017 2.67 -.358 3.5 -1c.83 -.642 2.077 -1.017 3.5 -1c1.423 -.017 2.67 .358 3.5 1" }), _jsx("path", { d: "M8 3a2.4 2.4 0 0 0 -1 2a2.4 2.4 0 0 0 1 2" }), _jsx("path", { d: "M12 3a2.4 2.4 0 0 0 -1 2a2.4 2.4 0 0 0 1 2" }), _jsx("path", { d: "M3 10h14v5a6 6 0 0 1 -6 6h-2a6 6 0 0 1 -6 -6v-5z" }), _jsx("path", { d: "M16.746 16.726a3 3 0 1 0 .252 -5.555" })] }), tablerIconProps);
+export const DeviceDesktopIcon = createIcon(_jsxs("g", { stroke: "currentColor", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M3 5a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-16a1 1 0 0 1-1-1v-10zM7 20h10M9 16v4M15 16v4" })] }), { ...tablerIconProps, strokeWidth: 1.5 });
+// login
+export const loginIcon = createIcon(_jsxs("g", { strokeWidth: 1.5, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M15 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2" }), _jsx("path", { d: "M21 12h-13l3 -3" }), _jsx("path", { d: "M11 15l-3 -3" })] }), tablerIconProps);
+export const youtubeIcon = createIcon(_jsxs("g", { children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M2 8a4 4 0 0 1 4 -4h12a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-12a4 4 0 0 1 -4 -4v-8z" }), _jsx("path", { d: "M10 9l5 3l-5 3z" })] }), tablerIconProps);
+export const gridIcon = createIcon(_jsxs("g", { strokeWidth: 1.5, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M3 6h18" }), _jsx("path", { d: "M3 12h18" }), _jsx("path", { d: "M3 18h18" }), _jsx("path", { d: "M6 3v18" }), _jsx("path", { d: "M12 3v18" }), _jsx("path", { d: "M18 3v18" })] }), tablerIconProps);
+export const lineEditorIcon = createIcon(_jsxs("g", { strokeWidth: 1.5, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M17 3m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z" }), _jsx("path", { d: "M3 17m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z" }), _jsx("path", { d: "M17 5c-6.627 0 -12 5.373 -12 12" })] }), tablerIconProps);
+export const collapseDownIcon = createIcon(_jsxs("g", { children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M6 9l6 6l6 -6" })] }), tablerIconProps);
+export const collapseUpIcon = createIcon(_jsxs("g", { children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M6 15l6 -6l6 6" })] }), tablerIconProps);

package/dist/excalidraw/components/main-menu/DefaultItems.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import type { Theme } from "../../element/types";
 import "./DefaultItems.scss";
 export declare const LoadScene: {
     (): JSX.Element | null;
@@ -13,7 +14,9 @@ export declare const SaveAsImage: {
     displayName: string;
 };
 export declare const CommandPalette: {
-    (): JSX.Element;
+    (opts?: {
+        className?: string;
+    }): JSX.Element;
     displayName: string;
 };
 export declare const Help: {
@@ -25,7 +28,14 @@ export declare const ClearCanvas: {
     displayName: string;
 };
 export declare const ToggleTheme: {
-    (): JSX.Element | null;
+    (props: {
+        allowSystemTheme: true;
+        theme: Theme | "system";
+        onSelect: (theme: Theme | "system") => void;
+    } | {
+        allowSystemTheme?: false | undefined;
+        onSelect?: ((theme: Theme) => void) | undefined;
+    }): JSX.Element | null;
     displayName: string;
 };
 export declare const ChangeCanvasBackground: {

package/dist/excalidraw/components/main-menu/DefaultItems.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { getShortcutFromShortcutName } from "../../actions/shortcuts";
 import { useI18n } from "../../i18n";
 import { useExcalidrawSetAppState, useExcalidrawActionManager, useExcalidrawElements, useAppProps, } from "../App";
-import { boltIcon, ExportIcon, ExportImageIcon, HelpIcon, LoadIcon, MoonIcon, save, SunIcon, TrashIcon, usersIcon, } from "../icons";
+import { boltIcon, DeviceDesktopIcon, ExportIcon, ExportImageIcon, HelpIcon, LoadIcon, MoonIcon, save, SunIcon, TrashIcon, usersIcon, } from "../icons";
 import { GithubIcon, DiscordIcon, XBrandIcon } from "../icons";
 import DropdownMenuItem from "../dropdownMenu/DropdownMenuItem";
 import DropdownMenuItemLink from "../dropdownMenu/DropdownMenuItemLink";
@@ -14,6 +14,9 @@ import { jotaiScope } from "../../jotai";
 import { useUIAppState } from "../../context/ui-appState";
 import { openConfirmModal } from "../OverwriteConfirm/OverwriteConfirmState";
 import Trans from "../Trans";
+import DropdownMenuItemContentRadio from "../dropdownMenu/DropdownMenuItemContentRadio";
+import { THEME } from "../../constants";
+import { trackEvent } from "../../analytics";
 import "./DefaultItems.scss";
 export const LoadScene = () => {
     const { t } = useI18n();
@@ -51,10 +54,13 @@ export const SaveAsImage = () => {
     return (_jsx(DropdownMenuItem, { icon: ExportImageIcon, "data-testid": "image-export-button", onSelect: () => setAppState({ openDialog: { name: "imageExport" } }), shortcut: getShortcutFromShortcutName("imageExport"), "aria-label": t("buttons.exportImage"), children: t("buttons.exportImage") }));
 };
 SaveAsImage.displayName = "SaveAsImage";
-export const CommandPalette = () => {
+export const CommandPalette = (opts) => {
     const setAppState = useExcalidrawSetAppState();
     const { t } = useI18n();
-    return (_jsx(DropdownMenuItem, { icon: boltIcon, "data-testid": "command-palette-button", onSelect: () => setAppState({ openDialog: { name: "commandPalette" } }), shortcut: getShortcutFromShortcutName("commandPalette"), "aria-label": t("commandPalette.title"), children: t("commandPalette.title") }));
+    return (_jsx(DropdownMenuItem, { icon: boltIcon, "data-testid": "command-palette-button", onSelect: () => {
+            trackEvent("command_palette", "open", "menu");
+            setAppState({ openDialog: { name: "commandPalette" } });
+        }, shortcut: getShortcutFromShortcutName("commandPalette"), "aria-label": t("commandPalette.title"), className: opts?.className, children: t("commandPalette.title") }));
 };
 CommandPalette.displayName = "CommandPalette";
 export const Help = () => {
@@ -73,20 +79,45 @@ export const ClearCanvas = () => {
     return (_jsx(DropdownMenuItem, { icon: TrashIcon, onSelect: () => setActiveConfirmDialog("clearCanvas"), "data-testid": "clear-canvas-button", "aria-label": t("buttons.clearReset"), children: t("buttons.clearReset") }));
 };
 ClearCanvas.displayName = "ClearCanvas";
-export const ToggleTheme = () => {
+export const ToggleTheme = (props) => {
     const { t } = useI18n();
     const appState = useUIAppState();
     const actionManager = useExcalidrawActionManager();
+    const shortcut = getShortcutFromShortcutName("toggleTheme");
     if (!actionManager.isActionEnabled(actionToggleTheme)) {
         return null;
     }
+    if (props?.allowSystemTheme) {
+        return (_jsx(DropdownMenuItemContentRadio, { name: "theme", value: props.theme, onChange: (value) => props.onSelect(value), choices: [
+                {
+                    value: THEME.LIGHT,
+                    label: SunIcon,
+                    ariaLabel: `${t("buttons.lightMode")} - ${shortcut}`,
+                },
+                {
+                    value: THEME.DARK,
+                    label: MoonIcon,
+                    ariaLabel: `${t("buttons.darkMode")} - ${shortcut}`,
+                },
+                {
+                    value: "system",
+                    label: DeviceDesktopIcon,
+                    ariaLabel: t("buttons.systemMode"),
+                },
+            ], children: t("labels.theme") }));
+    }
     return (_jsx(DropdownMenuItem, { onSelect: (event) => {
             // do not close the menu when changing theme
             event.preventDefault();
-            return actionManager.executeAction(actionToggleTheme);
-        }, icon: appState.theme === "dark" ? SunIcon : MoonIcon, "data-testid": "toggle-dark-mode", shortcut: getShortcutFromShortcutName("toggleTheme"), "aria-label": appState.theme === "dark"
+            if (props?.onSelect) {
+                props.onSelect(appState.theme === THEME.DARK ? THEME.LIGHT : THEME.DARK);
+            }
+            else {
+                return actionManager.executeAction(actionToggleTheme);
+            }
+        }, icon: appState.theme === THEME.DARK ? SunIcon : MoonIcon, "data-testid": "toggle-dark-mode", shortcut: shortcut, "aria-label": appState.theme === THEME.DARK
             ? t("buttons.lightMode")
-            : t("buttons.darkMode"), children: appState.theme === "dark"
+            : t("buttons.darkMode"), children: appState.theme === THEME.DARK
             ? t("buttons.lightMode")
             : t("buttons.darkMode") }));
 };

package/dist/excalidraw/components/main-menu/MainMenu.d.ts

@@ -19,17 +19,26 @@ declare const MainMenu: React.FC<{
         displayName: string;
     };
     Item: {
-        ({ icon, onSelect, children, shortcut, className, selected, ...rest }: {
+        ({ icon, value, order, children, shortcut, className, hovered, selected, textStyle, onSelect, onClick, ...rest }: {
             icon?: JSX.Element | undefined;
-            onSelect: (event: Event) => void;
+            value?: string | number | undefined;
+            order?: number | undefined;
+            onSelect?: ((event: Event) => void) | undefined;
             children: React.ReactNode;
             shortcut?: string | undefined;
+            hovered?: boolean | undefined;
             selected?: boolean | undefined;
+            textStyle?: React.CSSProperties | undefined;
             className?: string | undefined;
         } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onSelect">): JSX.Element;
         displayName: string;
         Badge: {
-            ({ children, }: {
+            ({ type, children, }: {
+                type?: import("../../utility-types").ValueOf<{
+                    readonly GREEN: "green";
+                    readonly RED: "red";
+                    readonly BLUE: "blue";
+                }> | undefined;
                 children: React.ReactNode;
             }): JSX.Element;
             displayName: string;

package/dist/excalidraw/components/welcome-screen/WelcomeScreen.Center.js

@@ -26,11 +26,11 @@ const Center = ({ children }) => {
 };
 Center.displayName = "Center";
 const Logo = ({ children }) => {
-    return (_jsx("div", { className: "welcome-screen-center__logo virgil welcome-screen-decor", children: children || _jsx(ExcalidrawLogo, { withText: true }) }));
+    return (_jsx("div", { className: "welcome-screen-center__logo excalifont welcome-screen-decor", children: children || _jsx(ExcalidrawLogo, { withText: true }) }));
 };
 Logo.displayName = "Logo";
 const Heading = ({ children }) => {
-    return (_jsx("div", { className: "welcome-screen-center__heading welcome-screen-decor virgil", children: children }));
+    return (_jsx("div", { className: "welcome-screen-center__heading welcome-screen-decor excalifont", children: children }));
 };
 Heading.displayName = "Heading";
 const Menu = ({ children }) => {

package/dist/excalidraw/components/welcome-screen/WelcomeScreen.Hints.js

@@ -4,17 +4,17 @@ import { useTunnels } from "../../context/tunnels";
 import { WelcomeScreenHelpArrow, WelcomeScreenMenuArrow, WelcomeScreenTopToolbarArrow, } from "../icons";
 const MenuHint = ({ children }) => {
     const { WelcomeScreenMenuHintTunnel } = useTunnels();
-    return (_jsx(WelcomeScreenMenuHintTunnel.In, { children: _jsxs("div", { className: "virgil welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--menu", children: [WelcomeScreenMenuArrow, _jsx("div", { className: "welcome-screen-decor-hint__label", children: children || t("welcomeScreen.defaults.menuHint") })] }) }));
+    return (_jsx(WelcomeScreenMenuHintTunnel.In, { children: _jsxs("div", { className: "excalifont welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--menu", children: [WelcomeScreenMenuArrow, _jsx("div", { className: "welcome-screen-decor-hint__label", children: children || t("welcomeScreen.defaults.menuHint") })] }) }));
 };
 MenuHint.displayName = "MenuHint";
 const ToolbarHint = ({ children }) => {
     const { WelcomeScreenToolbarHintTunnel } = useTunnels();
-    return (_jsx(WelcomeScreenToolbarHintTunnel.In, { children: _jsxs("div", { className: "virgil welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--toolbar", children: [_jsx("div", { className: "welcome-screen-decor-hint__label", children: children || t("welcomeScreen.defaults.toolbarHint") }), WelcomeScreenTopToolbarArrow] }) }));
+    return (_jsx(WelcomeScreenToolbarHintTunnel.In, { children: _jsxs("div", { className: "excalifont welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--toolbar", children: [_jsx("div", { className: "welcome-screen-decor-hint__label", children: children || t("welcomeScreen.defaults.toolbarHint") }), WelcomeScreenTopToolbarArrow] }) }));
 };
 ToolbarHint.displayName = "ToolbarHint";
 const HelpHint = ({ children }) => {
     const { WelcomeScreenHelpHintTunnel } = useTunnels();
-    return (_jsx(WelcomeScreenHelpHintTunnel.In, { children: _jsxs("div", { className: "virgil welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--help", children: [_jsx("div", { children: children || t("welcomeScreen.defaults.helpHint") }), WelcomeScreenHelpArrow] }) }));
+    return (_jsx(WelcomeScreenHelpHintTunnel.In, { children: _jsxs("div", { className: "excalifont welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--help", children: [_jsx("div", { children: children || t("welcomeScreen.defaults.helpHint") }), WelcomeScreenHelpArrow] }) }));
 };
 HelpHint.displayName = "HelpHint";
 export { HelpHint, MenuHint, ToolbarHint };

package/dist/excalidraw/constants.d.ts

@@ -1,5 +1,5 @@
-import { AppProps } from "./types";
-import { ExcalidrawElement, FontFamilyValues } from "./element/types";
+import type { AppProps } from "./types";
+import type { ExcalidrawElement, FontFamilyValues } from "./element/types";
 export declare const isDarwin: boolean;
 export declare const isWindows: boolean;
 export declare const isAndroid: boolean;
@@ -10,6 +10,7 @@ export declare const isIOS: boolean;
 export declare const isBrave: () => boolean;
 export declare const supportsResizeObserver: boolean;
 export declare const APP_NAME = "Excalidraw";
+export declare const TEXT_AUTOWRAP_THRESHOLD = 36;
 export declare const DRAGGING_THRESHOLD = 10;
 export declare const LINE_CONFIRM_THRESHOLD = 8;
 export declare const ELEMENT_SHIFT_TRANSLATE_AMOUNT = 5;
@@ -85,11 +86,23 @@ export declare const ENV: {
 export declare const CLASSES: {
     SHAPE_ACTIONS_MENU: string;
 };
+/**
+ * // TODO: shouldn't be really `const`, likely neither have integers as values, due to value for the custom fonts, which should likely be some hash.
+ *
+ * Let's think this through and consider:
+ * - https://developer.mozilla.org/en-US/docs/Web/CSS/generic-family
+ * - https://drafts.csswg.org/css-fonts-4/#font-family-prop
+ * - https://learn.microsoft.com/en-us/typography/opentype/spec/ibmfc
+ */
 export declare const FONT_FAMILY: {
     Virgil: number;
     Helvetica: number;
     Cascadia: number;
-    Assistant: number;
+    Excalifont: number;
+    Nunito: number;
+    "Lilita One": number;
+    "Comic Shanns": number;
+    "Liberation Sans": number;
 };
 export declare const THEME: {
     readonly LIGHT: "light";
@@ -121,6 +134,8 @@ export declare const DEFAULT_TEXT_ALIGN = "left";
 export declare const DEFAULT_VERTICAL_ALIGN = "top";
 export declare const DEFAULT_VERSION = "{version}";
 export declare const DEFAULT_TRANSFORM_HANDLE_SPACING = 2;
+export declare const SIDE_RESIZING_THRESHOLD: number;
+export declare const DEFAULT_COLLISION_THRESHOLD: number;
 export declare const COLOR_WHITE = "#ffffff";
 export declare const COLOR_CHARCOAL_BLACK = "#1e1e1e";
 export declare const COLOR_VOICE_CALL = "#a2f1a6";
@@ -175,6 +190,7 @@ export declare const VERSION_TIMEOUT = 30000;
 export declare const SCROLL_TIMEOUT = 100;
 export declare const ZOOM_STEP = 0.1;
 export declare const MIN_ZOOM = 0.1;
+export declare const MAX_ZOOM = 30;
 export declare const HYPERLINK_TOOLTIP_DELAY = 300;
 export declare const IDLE_THRESHOLD = 60000;
 export declare const ACTIVE_THRESHOLD = 3000;
@@ -223,9 +239,6 @@ export declare const ROUNDNESS: {
     readonly PROPORTIONAL_RADIUS: 2;
     readonly ADAPTIVE_RADIUS: 3;
 };
-/** key containt id of precedeing elemnt id we use in reconciliation during
- * collaboration */
-export declare const PRECEDING_ELEMENT_KEY = "__precedingElement__";
 export declare const ROUGHNESS: {
     readonly architect: 0;
     readonly artist: 1;
@@ -279,3 +292,8 @@ export declare const EDITOR_LS_KEYS: {
  * where filename is optional and we can't retrieve name from app state
  */
 export declare const DEFAULT_FILENAME = "Untitled";
+export declare const STATS_PANELS: {
+    readonly generalStats: 1;
+    readonly elementProperties: 2;
+};
+export declare const MIN_WIDTH_OR_HEIGHT = 1;

package/dist/excalidraw/constants.js

@@ -15,6 +15,11 @@ export const isIOS = /iPad|iPhone/.test(navigator.platform) ||
 export const isBrave = () => navigator.brave?.isBrave?.name === "isBrave";
 export const supportsResizeObserver = typeof window !== "undefined" && "ResizeObserver" in window;
 export const APP_NAME = "Excalidraw";
+// distance when creating text before it's considered `autoResize: false`
+// we're using higher threshold so that clicks that end up being drags
+// don't unintentionally create text elements that are wrapped to a few chars
+// (happens a lot with fast clicks with the text tool)
+export const TEXT_AUTOWRAP_THRESHOLD = 36; // px
 export const DRAGGING_THRESHOLD = 10; // px
 export const LINE_CONFIRM_THRESHOLD = 8; // px
 export const ELEMENT_SHIFT_TRANSLATE_AMOUNT = 5;
@@ -94,12 +99,24 @@ export const ENV = {
 export const CLASSES = {
     SHAPE_ACTIONS_MENU: "App-menu__left",
 };
-// 1-based in case we ever do `if(element.fontFamily)`
+/**
+ * // TODO: shouldn't be really `const`, likely neither have integers as values, due to value for the custom fonts, which should likely be some hash.
+ *
+ * Let's think this through and consider:
+ * - https://developer.mozilla.org/en-US/docs/Web/CSS/generic-family
+ * - https://drafts.csswg.org/css-fonts-4/#font-family-prop
+ * - https://learn.microsoft.com/en-us/typography/opentype/spec/ibmfc
+ */
 export const FONT_FAMILY = {
     Virgil: 1,
     Helvetica: 2,
     Cascadia: 3,
-    Assistant: 4,
+    // leave 4 unused as it was historically used for Assistant (which we don't use anymore) or custom font (Obsidian)
+    Excalifont: 5,
+    Nunito: 6,
+    "Lilita One": 7,
+    "Comic Shanns": 8,
+    "Liberation Sans": 9,
 };
 export const THEME = {
     LIGHT: "light",
@@ -123,11 +140,16 @@ export const FRAME_STYLE = {
 export const WINDOWS_EMOJI_FALLBACK_FONT = "Segoe UI Emoji";
 export const MIN_FONT_SIZE = 1;
 export const DEFAULT_FONT_SIZE = 20;
-export const DEFAULT_FONT_FAMILY = FONT_FAMILY.Virgil;
+export const DEFAULT_FONT_FAMILY = FONT_FAMILY.Excalifont;
 export const DEFAULT_TEXT_ALIGN = "left";
 export const DEFAULT_VERTICAL_ALIGN = "top";
 export const DEFAULT_VERSION = "{version}";
 export const DEFAULT_TRANSFORM_HANDLE_SPACING = 2;
+export const SIDE_RESIZING_THRESHOLD = 2 * DEFAULT_TRANSFORM_HANDLE_SPACING;
+// a small epsilon to make side resizing always take precedence
+// (avoids an increase in renders and changes to tests)
+const EPSILON = 0.00001;
+export const DEFAULT_COLLISION_THRESHOLD = 2 * SIDE_RESIZING_THRESHOLD - EPSILON;
 export const COLOR_WHITE = "#ffffff";
 export const COLOR_CHARCOAL_BLACK = "#1e1e1e";
 // keep this in sync with CSS
@@ -180,6 +202,7 @@ export const VERSION_TIMEOUT = 30000;
 export const SCROLL_TIMEOUT = 100;
 export const ZOOM_STEP = 0.1;
 export const MIN_ZOOM = 0.1;
+export const MAX_ZOOM = 30.0;
 export const HYPERLINK_TOOLTIP_DELAY = 300;
 // Report a user inactive after IDLE_THRESHOLD milliseconds
 export const IDLE_THRESHOLD = 60_000;
@@ -220,7 +243,7 @@ export const MAX_DECIMALS_FOR_SVG_EXPORT = 2;
 export const EXPORT_SCALES = [1, 2, 3];
 export const DEFAULT_EXPORT_PADDING = 10; // px
 export const DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT = 1440;
-export const MAX_ALLOWED_FILE_BYTES = 2 * 1024 * 1024;
+export const MAX_ALLOWED_FILE_BYTES = 4 * 1024 * 1024;
 export const SVG_NS = "http://www.w3.org/2000/svg";
 export const ENCRYPTION_KEY_BITS = 128;
 export const VERSIONS = {
@@ -264,9 +287,6 @@ export const ROUNDNESS = {
     // (see DEFAULT_ADAPTIVE_RADIUS constant)
     ADAPTIVE_RADIUS: 3,
 };
-/** key containt id of precedeing elemnt id we use in reconciliation during
- * collaboration */
-export const PRECEDING_ELEMENT_KEY = "__precedingElement__";
 export const ROUGHNESS = {
     architect: 0,
     artist: 1,
@@ -326,3 +346,5 @@ export const EDITOR_LS_KEYS = {
  * where filename is optional and we can't retrieve name from app state
  */
 export const DEFAULT_FILENAME = "Untitled";
+export const STATS_PANELS = { generalStats: 1, elementProperties: 2 };
+export const MIN_WIDTH_OR_HEIGHT = 1;

package/dist/excalidraw/context/ui-appState.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { UIAppState } from "../types";
+import type { UIAppState } from "../types";
 export declare const UIAppStateContext: React.Context<UIAppState>;
 export declare const useUIAppState: () => UIAppState;

package/dist/excalidraw/cursor.d.ts

@@ -1,4 +1,4 @@
-import { AppState } from "./types";
+import type { AppState } from "./types";
 export declare const resetCursor: (interactiveCanvas: HTMLCanvasElement | null) => void;
 export declare const setCursor: (interactiveCanvas: HTMLCanvasElement | null, cursor: string) => void;
 export declare const setEraserCursor: (interactiveCanvas: HTMLCanvasElement | null, theme: AppState["theme"]) => void;

package/dist/excalidraw/data/EditorLocalStorage.d.ts

@@ -1,5 +1,5 @@
-import { EDITOR_LS_KEYS } from "../constants";
-import { JSONValue } from "../types";
+import type { EDITOR_LS_KEYS } from "../constants";
+import type { JSONValue } from "../types";
 export declare class EditorLocalStorage {
     static has(key: typeof EDITOR_LS_KEYS[keyof typeof EDITOR_LS_KEYS]): boolean;
     static get<T extends JSONValue>(key: typeof EDITOR_LS_KEYS[keyof typeof EDITOR_LS_KEYS]): T | null;

package/dist/excalidraw/data/blob.d.ts

@@ -1,9 +1,9 @@
 import { IMAGE_MIME_TYPES, MIME_TYPES } from "../constants";
-import { ExcalidrawElement, FileId } from "../element/types";
-import { AppState, DataURL, LibraryItem } from "../types";
-import { ValueOf } from "../utility-types";
-import { FileSystemHandle } from "./filesystem";
-import { ImportedLibraryData } from "./types";
+import type { ExcalidrawElement, FileId } from "../element/types";
+import type { AppState, DataURL, LibraryItem } from "../types";
+import type { ValueOf } from "../utility-types";
+import type { FileSystemHandle } from "./filesystem";
+import type { ImportedLibraryData } from "./types";
 export declare const getMimeType: (blob: Blob | string) => string;
 export declare const getFileHandleType: (handle: FileSystemHandle | null) => string | null;
 export declare const isImageFileHandleType: (type: string | null) => type is "png" | "svg";

package/dist/excalidraw/data/filesystem.d.ts

@@ -1,4 +1,5 @@
-import { FileSystemHandle, supported as nativeFileSystemSupported } from "browser-fs-access";
+import type { FileSystemHandle } from "browser-fs-access";
+import { supported as nativeFileSystemSupported } from "browser-fs-access";
 import { MIME_TYPES } from "../constants";
 type FILE_EXTENSION = Exclude<keyof typeof MIME_TYPES, "binary">;
 export declare const fileOpen: <M extends boolean | undefined = false>(opts: {

package/dist/excalidraw/data/index.d.ts

@@ -1,7 +1,7 @@
-import { ExcalidrawElement, ExcalidrawFrameLikeElement, NonDeletedExcalidrawElement } from "../element/types";
-import { ExportType } from "../scene/types";
-import { AppState, BinaryFiles } from "../types";
-import { FileSystemHandle } from "./filesystem";
+import type { ExcalidrawElement, ExcalidrawFrameLikeElement, NonDeletedExcalidrawElement } from "../element/types";
+import type { ExportType } from "../scene/types";
+import type { AppState, BinaryFiles } from "../types";
+import type { FileSystemHandle } from "./filesystem";
 export { loadFromBlob } from "./blob";
 export { loadFromJSON, saveAsJSON } from "./json";
 export type ExportedElements = readonly NonDeletedExcalidrawElement[] & {

package/dist/excalidraw/data/json.d.ts

@@ -1,6 +1,6 @@
-import { ExcalidrawElement } from "../element/types";
-import { AppState, BinaryFiles, LibraryItems } from "../types";
-import { ImportedDataState, ImportedLibraryData } from "./types";
+import type { ExcalidrawElement } from "../element/types";
+import type { AppState, BinaryFiles, LibraryItems } from "../types";
+import type { ImportedDataState, ImportedLibraryData } from "./types";
 export declare const serializeAsJSON: (elements: readonly ExcalidrawElement[], appState: Partial<AppState>, files: BinaryFiles, type: "local" | "database") => string;
 export declare const saveAsJSON: (elements: readonly ExcalidrawElement[], appState: AppState, files: BinaryFiles, name?: string) => Promise<{
     fileHandle: import("browser-fs-access").FileSystemHandle | null;

package/dist/excalidraw/data/library.d.ts

@@ -1,7 +1,7 @@
-import { LibraryItems, ExcalidrawImperativeAPI, LibraryItemsSource, LibraryItems_anyVersion } from "../types";
+import type { LibraryItems, ExcalidrawImperativeAPI, LibraryItemsSource, LibraryItems_anyVersion } from "../types";
 import type App from "../components/App";
-import { ExcalidrawElement } from "../element/types";
-import { MaybePromise } from "../utility-types";
+import type { ExcalidrawElement } from "../element/types";
+import type { MaybePromise } from "../utility-types";
 export type LibraryPersistedData = {
     libraryItems: LibraryItems;
 };

package/dist/excalidraw/data/magic.d.ts

@@ -1,6 +1,6 @@
-import { Theme } from "../element/types";
-import { DataURL } from "../types";
-import { OpenAIOutput } from "./ai/types";
+import type { Theme } from "../element/types";
+import type { DataURL } from "../types";
+import type { OpenAIOutput } from "./ai/types";
 export type MagicCacheData = {
     status: "pending";
 } | {

package/dist/excalidraw/data/magic.js

@@ -1,3 +1,4 @@
+import { THEME } from "../constants";
 const SYSTEM_PROMPT = `You are a skilled front-end developer who builds interactive prototypes from wireframes, and is an expert at CSS Grid and Flex design.
 Your role is to transform low-fidelity wireframes into working front-end HTML code.
 
@@ -19,7 +20,7 @@ If the wireframes, diagrams, or text is unclear or unreadable, refer to provided
 Your goal is a production-ready prototype that brings the wireframes to life.
 
 Please output JUST THE HTML file containing your best attempt at implementing the provided wireframes.`;
-export async function diagramToHTML({ image, apiKey, text, theme = "light", }) {
+export async function diagramToHTML({ image, apiKey, text, theme = THEME.LIGHT, }) {
     const body = {
         model: "gpt-4-vision-preview",
         // 4096 are max output tokens allowed for `gpt-4-vision-preview` currently

package/dist/excalidraw/data/reconcile.d.ts

@@ -0,0 +1,6 @@
+import type { OrderedExcalidrawElement } from "../element/types";
+import type { AppState } from "../types";
+import type { MakeBrand } from "../utility-types";
+export type ReconciledExcalidrawElement = OrderedExcalidrawElement & MakeBrand<"ReconciledElement">;
+export type RemoteExcalidrawElement = OrderedExcalidrawElement & MakeBrand<"RemoteExcalidrawElement">;
+export declare const reconcileElements: (localElements: readonly OrderedExcalidrawElement[], remoteElements: readonly RemoteExcalidrawElement[], localAppState: AppState) => ReconciledExcalidrawElement[];

package/dist/excalidraw/data/reconcile.js

@@ -0,0 +1,49 @@
+import { orderByFractionalIndex, syncInvalidIndices } from "../fractionalIndex";
+import { arrayToMap } from "../utils";
+const shouldDiscardRemoteElement = (localAppState, local, remote) => {
+    if (local &&
+        // local element is being edited
+        (local.id === localAppState.editingElement?.id ||
+            local.id === localAppState.resizingElement?.id ||
+            local.id === localAppState.draggingElement?.id || // TODO: Is this still valid? As draggingElement is selection element, which is never part of the elements array
+            // local element is newer
+            local.version > remote.version ||
+            // resolve conflicting edits deterministically by taking the one with
+            // the lowest versionNonce
+            (local.version === remote.version &&
+                local.versionNonce < remote.versionNonce))) {
+        return true;
+    }
+    return false;
+};
+export const reconcileElements = (localElements, remoteElements, localAppState) => {
+    const localElementsMap = arrayToMap(localElements);
+    const reconciledElements = [];
+    const added = new Set();
+    // process remote elements
+    for (const remoteElement of remoteElements) {
+        if (!added.has(remoteElement.id)) {
+            const localElement = localElementsMap.get(remoteElement.id);
+            const discardRemoteElement = shouldDiscardRemoteElement(localAppState, localElement, remoteElement);
+            if (localElement && discardRemoteElement) {
+                reconciledElements.push(localElement);
+                added.add(localElement.id);
+            }
+            else {
+                reconciledElements.push(remoteElement);
+                added.add(remoteElement.id);
+            }
+        }
+    }
+    // process remaining local elements
+    for (const localElement of localElements) {
+        if (!added.has(localElement.id)) {
+            reconciledElements.push(localElement);
+            added.add(localElement.id);
+        }
+    }
+    const orderedElements = orderByFractionalIndex(reconciledElements);
+    // de-duplicate indices
+    syncInvalidIndices(orderedElements);
+    return orderedElements;
+};