@dwelle/excalidraw 0.4.0-d8d86cf → 0.4.0-e3bee83

package/types/math.d.ts

@@ -1,5 +1,5 @@
 import { Point, Zoom } from "./types";
-import { ExcalidrawLinearElement, NonDeleted } from "./element/types";
+import { ExcalidrawElement, ExcalidrawLinearElement, NonDeleted } from "./element/types";
 export declare const rotate: (x1: number, y1: number, x2: number, y2: number, angle: number) => [number, number];
 export declare const rotatePoint: (point: readonly [number, number], center: readonly [number, number], angle: number) => [number, number];
 export declare const adjustXYWithRotation: (sides: {
@@ -18,6 +18,7 @@ export declare const centerPoint: (a: readonly [number, number], b: readonly [nu
 export declare const isPathALoop: (points: ExcalidrawLinearElement["points"], zoomValue?: Zoom["value"]) => boolean;
 export declare const isPointInPolygon: (points: Point[], x: number, y: number) => boolean;
 export declare const getGridPoint: (x: number, y: number, gridSize: number | null) => [number, number];
+export declare const getCornerRadius: (x: number, element: ExcalidrawElement) => number;
 export declare const getControlPointsForBezierCurve: (element: NonDeleted<ExcalidrawLinearElement>, endPoint: readonly [number, number]) => [number, number][] | null;
 export declare const getBezierXY: (p0: readonly [number, number], p1: readonly [number, number], p2: readonly [number, number], p3: readonly [number, number], t: number) => number[];
 export declare const getPointsInBezierCurve: (element: NonDeleted<ExcalidrawLinearElement>, endPoint: readonly [number, number]) => [number, number][];

package/types/packages/excalidraw/example/CustomFooter.d.ts

@@ -0,0 +1,5 @@
+import { ExcalidrawImperativeAPI } from "../../../types";
+declare const CustomFooter: ({ excalidrawAPI, }: {
+    excalidrawAPI: ExcalidrawImperativeAPI;
+}) => JSX.Element;
+export default CustomFooter;

package/types/packages/excalidraw/example/MobileFooter.d.ts

@@ -0,0 +1,5 @@
+import { ExcalidrawImperativeAPI } from "../../../types";
+declare const MobileFooter: ({ excalidrawAPI, }: {
+    excalidrawAPI: ExcalidrawImperativeAPI;
+}) => JSX.Element | null;
+export default MobileFooter;

package/types/packages/excalidraw/index.d.ts

@@ -2,18 +2,29 @@ import React from "react";
 import "../../css/app.scss";
 import "../../css/styles.scss";
 import { ExcalidrawAPIRefValue, ExcalidrawProps } from "../../types";
+import Footer from "../../components/footer/FooterCenter";
+import MainMenu from "../../components/main-menu/MainMenu";
+import WelcomeScreen from "../../components/welcome-screen/WelcomeScreen";
+import LiveCollaborationTrigger from "../../components/live-collaboration/LiveCollaborationTrigger";
 declare type PublicExcalidrawProps = Omit<ExcalidrawProps, "forwardedRef">;
 export declare const Excalidraw: React.MemoExoticComponent<React.ForwardRefExoticComponent<PublicExcalidrawProps & React.RefAttributes<ExcalidrawAPIRefValue>>>;
 export { getSceneVersion, isInvisiblySmallElement, getNonDeletedElements, } from "../../element";
 export { defaultLang, languages } from "../../i18n";
 export { restore, restoreAppState, restoreElements, restoreLibraryItems, } from "../../data/restore";
-export { exportToCanvas, exportToBlob, exportToSvg, serializeAsJSON, serializeLibraryAsJSON, loadLibraryFromBlob, loadFromBlob, loadSceneOrLibraryFromBlob, getFreeDrawSvgPath, exportToClipboard, mergeLibraryItems, } from "../../packages/utils";
+export { exportToBlob, exportToSvg, serializeAsJSON, serializeLibraryAsJSON, loadLibraryFromBlob, loadFromBlob, loadSceneOrLibraryFromBlob, getFreeDrawSvgPath, exportToClipboard, mergeLibraryItems, } from "../../packages/utils";
 export { isLinearElement } from "../../element/typeChecks";
 export { FONT_FAMILY, THEME, MIME_TYPES } from "../../constants";
 export { mutateElement, newElementWith, bumpVersion, } from "../../element/mutateElement";
 export { parseLibraryTokensFromUrl, useHandleLibrary, } from "../../data/library";
 export { sceneCoordsToViewportCoords, viewportCoordsToSceneCoords, } from "../../utils";
 export { Sidebar } from "../../components/Sidebar/Sidebar";
+export { Button } from "../../components/Button";
+export { Footer };
+export { MainMenu };
+export { useDevice } from "../../components/App";
+export { WelcomeScreen };
+export { LiveCollaborationTrigger };
 export { getDefaultAppState, cleanAppStateForExport, clearAppStateForLocalStorage, } from "../../appState";
 export { jotaiScope, jotaiStore } from "../../jotai";
 export { libraryItemsAtom } from "../../data/library";
+export { exportToCanvas } from "../../scene/export";

package/types/packages/utils.d.ts

@@ -1,34 +1,31 @@
-import { AppState, BinaryFiles } from "../types";
-import { ExcalidrawElement, NonDeleted } from "../element/types";
+import { ExportToCanvasConfig, ExportToCanvasData } from "../scene/export";
 import { MIME_TYPES } from "../constants";
 export { MIME_TYPES };
-declare type ExportOpts = {
-    elements: readonly NonDeleted<ExcalidrawElement>[];
-    appState?: Partial<Omit<AppState, "offsetTop" | "offsetLeft">>;
-    files: BinaryFiles | null;
-    maxWidthOrHeight?: number;
-    getDimensions?: (width: number, height: number) => {
-        width: number;
-        height: number;
-        scale?: number;
-    };
-};
-export declare const exportToCanvas: ({ elements, appState, files, maxWidthOrHeight, getDimensions, exportPadding, }: ExportOpts & {
-    exportPadding?: number | undefined;
-}) => Promise<HTMLCanvasElement>;
-export declare const exportToBlob: (opts: ExportOpts & {
+declare type ExportToBlobConfig = ExportToCanvasConfig & {
     mimeType?: string;
     quality?: number;
-    exportPadding?: number;
+};
+declare type ExportToSvgConfig = Pick<ExportToCanvasConfig, "canvasBackgroundColor" | "padding" | "theme">;
+export declare const exportToBlob: ({ data, config, }: {
+    data: ExportToCanvasData;
+    config?: ExportToBlobConfig | undefined;
 }) => Promise<Blob>;
-export declare const exportToSvg: ({ elements, appState, files, exportPadding, }: Omit<ExportOpts, "getDimensions"> & {
-    exportPadding?: number | undefined;
+export declare const exportToSvg: ({ data, config, }: {
+    data: ExportToCanvasData;
+    config?: ExportToSvgConfig | undefined;
 }) => Promise<SVGSVGElement>;
-export declare const exportToClipboard: (opts: ExportOpts & {
-    mimeType?: string;
-    quality?: number;
-    type: "png" | "svg" | "json";
-}) => Promise<void>;
+export declare const exportToClipboard: ({ type, data, config, }: {
+    data: ExportToCanvasData;
+} & ({
+    type: "png";
+    config?: ExportToBlobConfig | undefined;
+} | {
+    type: "svg";
+    config?: ExportToSvgConfig | undefined;
+} | {
+    type: "json";
+    config?: undefined;
+})) => Promise<void>;
 export { serializeAsJSON, serializeLibraryAsJSON } from "../data/json";
 export { loadFromBlob, loadSceneOrLibraryFromBlob, loadLibraryFromBlob, } from "../data/blob";
 export { getFreeDrawSvgPath } from "../renderer/renderElement";

package/types/renderer/renderScene.d.ts

@@ -4,10 +4,9 @@ import { AppState, BinaryFiles } from "../types";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { RenderConfig } from "../scene/types";
 export declare const DEFAULT_SPACING = 2;
-export declare const _renderScene: ({ elements, appState, scale, rc, canvas, renderConfig, }: {
+export declare const _renderScene: ({ elements, appState, rc, canvas, renderConfig, }: {
     elements: readonly NonDeletedExcalidrawElement[];
     appState: AppState;
-    scale: number;
     rc: RoughCanvas;
     canvas: HTMLCanvasElement;
     renderConfig: RenderConfig;
@@ -22,7 +21,6 @@ export declare const _renderScene: ({ elements, appState, scale, rc, canvas, ren
 export declare const renderScene: <T extends boolean = false>(config: {
     elements: readonly NonDeletedExcalidrawElement[];
     appState: AppState;
-    scale: number;
     rc: RoughCanvas;
     canvas: HTMLCanvasElement;
     renderConfig: RenderConfig;

package/types/scene/comparisons.d.ts

@@ -3,7 +3,7 @@ export declare const hasBackground: (type: string) => boolean;
 export declare const hasStrokeColor: (type: string) => boolean;
 export declare const hasStrokeWidth: (type: string) => boolean;
 export declare const hasStrokeStyle: (type: string) => boolean;
-export declare const canChangeSharpness: (type: string) => boolean;
+export declare const canChangeRoundness: (type: string) => boolean;
 export declare const hasText: (type: string) => boolean;
 export declare const canHaveArrowheads: (type: string) => boolean;
 export declare const getElementAtPosition: (elements: readonly NonDeletedExcalidrawElement[], isAtPositionFn: (element: NonDeletedExcalidrawElement) => boolean) => NonDeletedExcalidrawElement | null;

package/types/scene/export.d.ts

@@ -1,13 +1,147 @@
-import { NonDeletedExcalidrawElement } from "../element/types";
+import { NonDeletedExcalidrawElement, Theme } from "../element/types";
 import { AppState, BinaryFiles } from "../types";
 export declare const SVG_EXPORT_TAG = "<!-- svg-source:excalidraw -->";
-export declare const exportToCanvas: (elements: readonly NonDeletedExcalidrawElement[], appState: AppState, files: BinaryFiles, { exportBackground, exportPadding, viewBackgroundColor, }: {
-    exportBackground: boolean;
-    exportPadding?: number | undefined;
-    viewBackgroundColor: string;
-}, createCanvas?: (width: number, height: number) => {
-    canvas: HTMLCanvasElement;
-    scale: number;
+export declare type ExportToCanvasData = {
+    elements: readonly NonDeletedExcalidrawElement[];
+    appState?: Partial<Omit<AppState, "offsetTop" | "offsetLeft">>;
+    files: BinaryFiles | null;
+};
+export declare type ExportToCanvasConfig = {
+    theme?: Theme;
+    /**
+     * Canvas background. Valid values are:
+     *
+     * - `undefined` - the background of "appState.viewBackgroundColor" is used.
+     * - `false` - no background is used (set to "transparent").
+     * - `string` - should be a valid CSS color.
+     *
+     * @default undefined
+     */
+    canvasBackgroundColor?: string | false;
+    /**
+     * Canvas padding in pixels. Affected by scale. Ignored if `fit` is set to
+     * `cover`.
+     *
+     * @default 10
+     */
+    padding?: number;
+    /**
+     * Makes sure the canvas content fits into a frame of width/height no larger
+     * than this value, while maintaining the aspect ratio.
+     *
+     * Final dimensions can get smaller/larger if used in conjunction with
+     * `scale`.
+     */
+    maxWidthOrHeight?: number;
+    /**
+     * Width of the frame. Supply `x` or `y` if you want to ofsset the canvas
+     * content.
+     *
+     * If `width` omitted but `height` supplied, `width` is calculated from the
+     * the content's bounding box to preserve the aspect ratio.
+     *
+     * Defaults to the content bounding box width when both `width` and `height`
+     * are omitted.
+     */
+    width?: number;
+    /**
+     * Height of the frame.
+     *
+     * If `height` omitted but `width` supplied, `height` is calculated from the
+     * content's bounding box to preserve the aspect ratio.
+     *
+     * Defaults to the content bounding box height when both `width` and `height`
+     * are omitted.
+     */
+    height?: number;
+    /**
+     * Left canvas offset. By default the coordinate is relative to the canvas.
+     * You can switch to content coordinates by setting `origin` to `content`.
+     *
+     * Defaults to the `x` postion of the content bounding box.
+     */
+    x?: number;
+    /**
+     * Top canvas offset. By default the coordinate is relative to the canvas.
+     * You can switch to content coordinates by setting `origin` to `content`.
+     *
+     * Defaults to the `y` postion of the content bounding box.
+     */
+    y?: number;
+    /**
+     * Indicates the coordinate system of the `x` and `y` values.
+     *
+     * - `canvas` - `x` and `y` are relative to the canvas [0, 0] position.
+     * - `content` - `x` and `y` are relative to the content bounding box.
+     *
+     * @default "canvas"
+     */
+    origin?: "canvas" | "content";
+    /**
+     * If dimensions specified and `x` and `y` are not specified, this indicates
+     * how the canvas should be scaled.
+     *
+     * Behavior aligns with the `object-fit` CSS property.
+     *
+     * - `none`    - no scaling.
+     * - `contain` - scale to fit the frame.
+     * - `cover`   - scale to fill the frame while maintaining aspect ratio. If
+     *               content overflows, it will be cropped.
+     *
+     * @default "contain" unless `x` or `y` are specified, in which case "none"
+     * is used (forced).
+     */
+    fit?: "none" | "contain" | "cover";
+    /**
+     * When either `x` or `y` are not specified, indicates how the canvas should
+     * be aligned on the respective axis.
+     *
+     * - `none`   - canvas aligned to top left.
+     * - `center` - canvas is centered on the axis which is not specified
+     *              (or both).
+     *
+     * @default "center"
+     */
+    position?: "center" | "none";
+    /**
+     * A multiplier to increase/decrease the frame dimensions
+     * (content resolution).
+     *
+     * For example, if your canvas is 300x150 and you set scale to 2, the
+     * resulting size will be 600x300.
+     *
+     * @default 1
+     */
+    scale?: number;
+    /**
+     * If you need to suply your own canvas, e.g. in test environments or in
+     * Node.js.
+     *
+     * Do not set `canvas.width/height` or modify the canvas context as that's
+     * handled by Excalidraw.
+     *
+     * Defaults to `document.createElement("canvas")`.
+     */
+    createCanvas?: () => HTMLCanvasElement;
+    /**
+     * If you want to supply `width`/`height` dynamically (or derive from the
+     * content bounding box), you can use this function.
+     *
+     * Ignored if `maxWidthOrHeight`, `width`, or `height` is set.
+     */
+    getDimensions?: (width: number, height: number) => {
+        width: number;
+        height: number;
+        scale?: number;
+    };
+};
+/**
+ * This API is usually used as a precursor to searializing to Blob or PNG,
+ * but can also be used to create a canvas for other purposes.
+ */
+export declare const exportToCanvas: ({ data, config, }: {
+    data: ExportToCanvasData;
+    config?: ExportToCanvasConfig | undefined;
 }) => Promise<HTMLCanvasElement>;
 export declare const exportToSvg: (elements: readonly NonDeletedExcalidrawElement[], appState: {
     exportBackground: boolean;
@@ -17,4 +151,4 @@ export declare const exportToSvg: (elements: readonly NonDeletedExcalidrawElemen
     exportWithDarkMode?: boolean;
     exportEmbedScene?: boolean;
 }, files: BinaryFiles | null) => Promise<SVGSVGElement>;
-export declare const getExportSize: (elements: readonly NonDeletedExcalidrawElement[], exportPadding: number, scale: number) => [number, number];
+export declare const getExportSize: (elements: readonly NonDeletedExcalidrawElement[], padding: number, scale: number) => [number, number];

package/types/scene/index.d.ts

@@ -1,5 +1,5 @@
 export { isOverScrollBars } from "./scrollbars";
 export { isSomeElementSelected, getElementsWithinSelection, getCommonAttributeOfSelectedElements, getSelectedElements, getTargetElements, } from "./selection";
 export { calculateScrollCenter } from "./scroll";
-export { hasBackground, hasStrokeWidth, hasStrokeStyle, canHaveArrowheads, canChangeSharpness, getElementAtPosition, hasText, getElementsAtPosition, } from "./comparisons";
+export { hasBackground, hasStrokeWidth, hasStrokeStyle, canHaveArrowheads, canChangeRoundness, getElementAtPosition, hasText, getElementsAtPosition, } from "./comparisons";
 export { getNormalizedZoom } from "./zoom";

package/types/scene/types.d.ts

@@ -4,10 +4,18 @@ export declare type RenderConfig = {
     scrollX: AppState["scrollX"];
     scrollY: AppState["scrollY"];
     /** null indicates transparent bg */
-    viewBackgroundColor: AppState["viewBackgroundColor"] | null;
+    canvasBackgroundColor: AppState["viewBackgroundColor"] | null;
     zoom: AppState["zoom"];
     shouldCacheIgnoreZoom: AppState["shouldCacheIgnoreZoom"];
     theme: AppState["theme"];
+    /**
+     * canvas scale factor. Not related to zoom. In browsers, it's the
+     * devicePixelRatio. For export, it's the `appState.exportScale`
+     * (user setting) or whatever scale you want to use when exporting elsewhere.
+     *
+     * Bigger the scale, the more pixels (=quality).
+     */
+    canvasScale: number;
     remotePointerViewportCoords: {
         [id: string]: {
             x: number;

package/types/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { PointerType, ExcalidrawLinearElement, NonDeletedExcalidrawElement, NonDeleted, TextAlign, ExcalidrawElement, GroupId, ExcalidrawBindableElement, Arrowhead, ChartType, FontFamilyValues, FileId, ExcalidrawImageElement, Theme } from "./element/types";
+import { PointerType, ExcalidrawLinearElement, NonDeletedExcalidrawElement, NonDeleted, TextAlign, ExcalidrawElement, GroupId, ExcalidrawBindableElement, Arrowhead, ChartType, FontFamilyValues, FileId, ExcalidrawImageElement, Theme, StrokeRoundness } from "./element/types";
 import { SHAPES } from "./shapes";
 import { Point as RoughPoint } from "roughjs/bin/geometry";
 import { LinearElementEditor } from "./element/linearElementEditor";
@@ -15,6 +15,7 @@ import { MaybeTransformHandleType } from "./element/transformHandles";
 import Library from "./data/library";
 import type { FileSystemHandle } from "./data/filesystem";
 import type { ALLOWED_IMAGE_MIME_TYPES, MIME_TYPES } from "./constants";
+import { ContextMenuItems } from "./components/ContextMenu";
 export declare type Point = Readonly<RoughPoint>;
 export declare type Collaborator = {
     pointer?: {
@@ -62,6 +63,11 @@ export declare type LastActiveToolBeforeEraser = {
     customType: string;
 } | null;
 export declare type AppState = {
+    contextMenu: {
+        items: ContextMenuItems;
+        top: number;
+        left: number;
+    } | null;
     showWelcomeScreen: boolean;
     isLoading: boolean;
     errorMessage: string | null;
@@ -101,10 +107,9 @@ export declare type AppState = {
     currentItemFontFamily: FontFamilyValues;
     currentItemFontSize: number;
     currentItemTextAlign: TextAlign;
-    currentItemStrokeSharpness: ExcalidrawElement["strokeSharpness"];
     currentItemStartArrowhead: Arrowhead | null;
     currentItemEndArrowhead: Arrowhead | null;
-    currentItemLinearStrokeSharpness: ExcalidrawElement["strokeSharpness"];
+    currentItemRoundness: StrokeRoundness;
     viewBackgroundColor: string;
     scrollX: number;
     scrollY: number;
@@ -117,7 +122,7 @@ export declare type AppState = {
     openMenu: "canvas" | "shape" | null;
     openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
     openSidebar: "library" | "customSidebar" | null;
-    openDialog: "imageExport" | "help" | null;
+    openDialog: "imageExport" | "help" | "jsonExport" | null;
     isSidebarDocked: boolean;
     lastPointerDownWith: PointerType;
     selectedElementIds: {
@@ -216,13 +221,11 @@ export interface ExcalidrawProps {
     id?: string | null;
     onChange?: (elements: readonly ExcalidrawElement[], appState: AppState, files: BinaryFiles, id?: string | null) => void;
     initialData?: ExcalidrawInitialDataState | null | Promise<ExcalidrawInitialDataState | null>;
-    onHomeButtonClick: () => void;
-    onThemeToggle: (theme: Theme) => void;
+    onHomeButtonClick?: () => void;
     user?: {
         name?: string | null;
     };
     excalidrawRef?: ForwardRef<ExcalidrawAPIRefValue>;
-    onCollabButtonClick?: () => void;
     isCollaborating?: boolean;
     onPointerUpdate?: (payload: {
         pointer: {
@@ -234,7 +237,6 @@ export interface ExcalidrawProps {
     }) => void;
     onPaste?: (data: ClipboardData, event: ClipboardEvent | null) => Promise<boolean> | boolean;
     renderTopRightUI?: (isMobile: boolean, appState: AppState) => JSX.Element | null;
-    renderFooter?: (isMobile: boolean, appState: AppState) => JSX.Element | null;
     langCode?: Language["code"];
     viewModeEnabled?: boolean;
     zenModeEnabled?: boolean;
@@ -243,10 +245,7 @@ export interface ExcalidrawProps {
     theme?: Theme;
     name?: string;
     renderCustomStats?: (elements: readonly NonDeletedExcalidrawElement[], appState: AppState) => JSX.Element;
-    UIOptions?: {
-        dockedSidebarBreakpoint?: number;
-        canvasActions?: CanvasActions;
-    };
+    UIOptions?: Partial<UIOptions>;
     detectScroll?: boolean;
     handleKeyboardGlobally?: boolean;
     onLibraryChange?: (libraryItems: LibraryItems) => void | Promise<any>;
@@ -261,6 +260,7 @@ export interface ExcalidrawProps {
      * Render function that renders custom <Sidebar /> component.
      */
     renderSidebar?: () => JSX.Element | null;
+    children?: React.ReactNode;
 }
 export declare type SceneData = {
     elements?: ImportedDataState["elements"];
@@ -278,22 +278,26 @@ export declare type ExportOpts = {
     onExportToBackend?: (exportedElements: readonly NonDeletedExcalidrawElement[], appState: AppState, files: BinaryFiles, canvas: HTMLCanvasElement | null) => void;
     renderCustomUI?: (exportedElements: readonly NonDeletedExcalidrawElement[], appState: AppState, files: BinaryFiles, canvas: HTMLCanvasElement | null) => JSX.Element;
 };
-declare type CanvasActions = {
-    changeViewBackgroundColor?: boolean;
-    clearCanvas?: boolean;
-    export?: false | ExportOpts;
-    loadScene?: boolean;
-    saveToActiveFile?: boolean;
-    toggleTheme?: boolean | null;
-    saveAsImage?: boolean;
-};
+declare type CanvasActions = Partial<{
+    changeViewBackgroundColor: boolean;
+    clearCanvas: boolean;
+    export: false | ExportOpts;
+    loadScene: boolean;
+    saveToActiveFile: boolean;
+    toggleTheme: boolean | null;
+    saveAsImage: boolean;
+}>;
+declare type UIOptions = Partial<{
+    dockedSidebarBreakpoint: number;
+    welcomeScreen: boolean;
+    canvasActions: CanvasActions;
+}>;
 export declare type AppProps = Merge<ExcalidrawProps, {
-    UIOptions: {
+    UIOptions: Merge<MarkRequired<UIOptions, "welcomeScreen">, {
         canvasActions: Required<CanvasActions> & {
             export: ExportOpts;
         };
-        dockedSidebarBreakpoint?: number;
-    };
+    }>;
     detectScroll: boolean;
     handleKeyboardGlobally: boolean;
     isCollaborating: boolean;
@@ -313,6 +317,7 @@ export declare type AppClassProperties = {
     files: BinaryFiles;
     device: App["device"];
     scene: App["scene"];
+    pasteFromClipboard: App["pasteFromClipboard"];
 };
 export declare type PointerDownState = Readonly<{
     origin: Readonly<{
@@ -407,4 +412,19 @@ export declare type Device = Readonly<{
     isTouchScreen: boolean;
     canDeviceFitSidebar: boolean;
 }>;
+export declare type UIChildrenComponents = {
+    [k in "FooterCenter" | "Menu" | "WelcomeScreen"]?: React.ReactElement<{
+        children?: React.ReactNode;
+    }, React.JSXElementConstructor<any>>;
+};
+export declare type UIWelcomeScreenComponents = {
+    [k in "Center" | "MenuHint" | "ToolbarHint" | "HelpHint"]?: React.ReactElement<{
+        children?: React.ReactNode;
+    }, React.JSXElementConstructor<any>>;
+};
+export declare type UIWelcomeScreenCenterComponents = {
+    [k in "Logo" | "Heading" | "Menu" | "MenuItemLoadScene" | "MenuItemHelp"]?: React.ReactElement<{
+        children?: React.ReactNode;
+    }, React.JSXElementConstructor<any>>;
+};
 export {};

package/types/utils.d.ts

@@ -2,6 +2,7 @@ import { EVENT } from "./constants";
 import { FontFamilyValues, FontString } from "./element/types";
 import { AppState, LastActiveToolBeforeEraser, Zoom } from "./types";
 import { SHAPES } from "./shapes";
+import React from "react";
 export declare const setDateTimeForTests: (dateTime: string) => void;
 export declare const getDateTime: () => string;
 export declare const capitalizeString: (str: string) => string;
@@ -134,3 +135,19 @@ export declare const isPrimitive: (val: any) => boolean;
 export declare const getFrame: () => "top" | "iframe";
 export declare const isPromiseLike: (value: any) => value is Promise<any>;
 export declare const queryFocusableElements: (container: HTMLElement | null) => HTMLElement[];
+/**
+ * Partitions React children into named components and the rest of children.
+ *
+ * Returns known children as a dictionary of react children keyed by their
+ * displayName, and the rest children as an array.
+ *
+ * NOTE all named react components are included in the dictionary, irrespective
+ * of the supplied type parameter. This means you may be throwing away
+ * children that you aren't expecting, but should nonetheless be rendered.
+ * To guard against this (provided you care about the rest children at all),
+ * supply a second parameter with an object with keys of the expected children.
+ */
+export declare const getReactChildren: <KnownChildren extends {
+    [x: string]: React.ReactNode;
+}>(children: React.ReactNode, expectedComponents?: Record<keyof KnownChildren, any> | undefined) => readonly [Partial<KnownChildren>, React.ReactNode[]];
+export declare const isShallowEqual: <T extends Record<string, any>>(objA: T, objB: T) => boolean;

package/types/components/ActiveFile.d.ts

@@ -1,7 +0,0 @@
-import "./ActiveFile.scss";
-declare type ActiveFileProps = {
-    fileName?: string;
-    onSave: () => void;
-};
-export declare const ActiveFile: ({ fileName, onSave }: ActiveFileProps) => JSX.Element;
-export {};

package/types/components/ClearCanvas.d.ts

@@ -1,4 +0,0 @@
-declare const ClearCanvas: ({ onConfirm }: {
-    onConfirm: () => void;
-}) => JSX.Element;
-export default ClearCanvas;

package/types/components/CollabButton.d.ts

@@ -1,6 +0,0 @@
-import "./CollabButton.scss";
-declare const CollabButton: ({ onClick, isInHamburgerMenu, }: {
-    onClick: () => void;
-    isInHamburgerMenu?: boolean | undefined;
-}) => JSX.Element;
-export default CollabButton;

package/types/components/Footer.d.ts

@@ -1,10 +0,0 @@
-import { ActionManager } from "../actions/manager";
-import { AppState, ExcalidrawProps } from "../types";
-declare const Footer: ({ appState, actionManager, renderCustomFooter, showExitZenModeBtn, renderWelcomeScreen, }: {
-    appState: AppState;
-    actionManager: ActionManager;
-    renderCustomFooter?: ExcalidrawProps["renderFooter"];
-    showExitZenModeBtn: boolean;
-    renderWelcomeScreen: boolean;
-}) => JSX.Element;
-export default Footer;

package/types/components/MenuItem.d.ts

@@ -1,11 +0,0 @@
-import "./Menu.scss";
-interface MenuProps {
-    icon: JSX.Element;
-    onClick: () => void;
-    label: string;
-    dataTestId: string;
-    shortcut?: string;
-    isCollaborating?: boolean;
-}
-declare const MenuItem: ({ icon, onClick, label, dataTestId, shortcut, isCollaborating, }: MenuProps) => JSX.Element;
-export default MenuItem;

package/types/components/MenuUtils.d.ts

@@ -1 +0,0 @@
-export declare const Separator: () => JSX.Element;

package/types/components/WelcomeScreen.d.ts

@@ -1,10 +0,0 @@
-import { ActionManager } from "../actions/manager";
-import { AppState } from "../types";
-import { AppProps } from "../types";
-import "./WelcomeScreen.scss";
-declare const WelcomeScreen: ({ appState, actionManager, onCollabButtonClick, }: {
-    appState: AppState;
-    actionManager: ActionManager;
-    onCollabButtonClick: AppProps["onCollabButtonClick"];
-}) => JSX.Element;
-export default WelcomeScreen;

package/types/components/WelcomeScreenDecor.d.ts

@@ -1,6 +0,0 @@
-import { ReactNode } from "react";
-declare const WelcomeScreenDecor: ({ children, shouldRender, }: {
-    children: ReactNode;
-    shouldRender: boolean;
-}) => JSX.Element | null;
-export default WelcomeScreenDecor;