@myoc/excalidraw 0.19.518 → 0.19.520

package/dist/types/excalidraw/actions/types.d.ts

@@ -14,7 +14,7 @@ export type ActionResult = {
 type ActionFn<TData = any> = (elements: readonly OrderedExcalidrawElement[], appState: Readonly<AppState>, formData: TData | undefined, app: AppClassProperties) => ActionResult | Promise<ActionResult>;
 export type UpdaterFn = (res: ActionResult) => void;
 export type ActionFilterFn = (action: Action) => void;
-export type ActionName = "copy" | "cut" | "paste" | "copyAsPng" | "copyAsSvg" | "copyText" | "sendBackward" | "bringForward" | "sendToBack" | "bringToFront" | "copyStyles" | "selectAll" | "pasteStyles" | "gridMode" | "zenMode" | "objectsSnapMode" | "arrowBinding" | "midpointSnapping" | "stats" | "changeStrokeColor" | "changeBackgroundColor" | "changeFillStyle" | "changeStrokeWidth" | "changeStrokeShape" | "changeSloppiness" | "changeStrokeStyle" | "changeArrowhead" | "changeArrowType" | "changeArrowProperties" | "changeOpacity" | "changeFontSize" | "undo" | "redo" | "finalize" | "changeProjectName" | "changeExportBackground" | "changeExportEmbedScene" | "changeExportScale" | "saveToActiveFile" | "saveFileToDisk" | "loadScene" | "duplicateSelection" | "deleteSelectedElements" | "changeViewBackgroundColor" | "zoomIn" | "zoomOut" | "resetZoom" | "zoomToFit" | "zoomToFitSelection" | "zoomToFitSelectionInViewport" | "changeFontFamily" | "changeTextAlign" | "changeVerticalAlign" | "toggleFullScreen" | "toggleShortcuts" | "group" | "ungroup" | "goToCollaborator" | "changeRoundness" | "alignTop" | "alignBottom" | "alignLeft" | "alignRight" | "alignVerticallyCentered" | "alignHorizontallyCentered" | "distributeHorizontally" | "distributeVertically" | "arrangeElements" | "normaliseElements" | "flipHorizontal" | "flipVertical" | "deselect" | "viewMode" | "exportWithDarkMode" | "toggleTheme" | "increaseFontSize" | "decreaseFontSize" | "unbindText" | "hyperlink" | "bindText" | "unlockAllElements" | "toggleElementLock" | "toggleLinearEditor" | "toggleEraserTool" | "toggleHandTool" | "selectAllElementsInFrame" | "removeAllElementsFromFrame" | "updateFrameRendering" | "setFrameAsActiveTool" | "setEmbeddableAsActiveTool" | "createContainerFromText" | "wrapTextInContainer" | "autoResize" | "elementStats" | "searchMenu" | "copyElementLink" | "linkToElement" | "cropEditor" | "wrapSelectionInFrame" | "smartZoom" | "toggleLassoTool" | "toggleShapeSwitch" | "togglePolygon";
+export type ActionName = "copy" | "cut" | "paste" | "copyAsPng" | "copyAsSvg" | "copyText" | "sendBackward" | "bringForward" | "sendToBack" | "bringToFront" | "copyStyles" | "selectAll" | "pasteStyles" | "gridMode" | "zenMode" | "objectsSnapMode" | "arrowBinding" | "midpointSnapping" | "stats" | "changeStrokeColor" | "changeBackgroundColor" | "changeFillStyle" | "changeStrokeWidth" | "changeStrokeShape" | "changeSloppiness" | "changeFreedrawMode" | "changeStrokeStyle" | "changeArrowhead" | "changeArrowType" | "changeArrowProperties" | "changeOpacity" | "changeFontSize" | "undo" | "redo" | "finalize" | "changeProjectName" | "changeExportBackground" | "changeExportEmbedScene" | "changeExportScale" | "saveToActiveFile" | "saveFileToDisk" | "loadScene" | "duplicateSelection" | "deleteSelectedElements" | "changeViewBackgroundColor" | "zoomIn" | "zoomOut" | "resetZoom" | "zoomToFit" | "zoomToFitSelection" | "zoomToFitSelectionInViewport" | "changeFontFamily" | "changeTextAlign" | "changeVerticalAlign" | "toggleFullScreen" | "toggleShortcuts" | "group" | "ungroup" | "goToCollaborator" | "changeRoundness" | "alignTop" | "alignBottom" | "alignLeft" | "alignRight" | "alignVerticallyCentered" | "alignHorizontallyCentered" | "distributeHorizontally" | "distributeVertically" | "arrangeElements" | "normaliseElements" | "flipHorizontal" | "flipVertical" | "deselect" | "viewMode" | "exportWithDarkMode" | "toggleTheme" | "increaseFontSize" | "decreaseFontSize" | "unbindText" | "hyperlink" | "bindText" | "unlockAllElements" | "toggleElementLock" | "toggleLinearEditor" | "toggleEraserTool" | "toggleHandTool" | "selectAllElementsInFrame" | "removeAllElementsFromFrame" | "updateFrameRendering" | "setFrameAsActiveTool" | "setEmbeddableAsActiveTool" | "createContainerFromText" | "wrapTextInContainer" | "autoResize" | "elementStats" | "searchMenu" | "copyElementLink" | "linkToElement" | "cropEditor" | "wrapSelectionInFrame" | "smartZoom" | "toggleLassoTool" | "toggleShapeSwitch" | "togglePolygon";
 export type PanelComponentProps = {
     elements: readonly ExcalidrawElement[];
     appState: AppState;

package/dist/types/excalidraw/appState.d.ts

@@ -60,9 +60,10 @@ export declare const clearAppStateForLocalStorage: (appState: Partial<AppState>)
     currentItemStrokeColor?: string | undefined;
     currentItemBackgroundColor?: string | undefined;
     currentItemFillStyle?: import("@excalidraw/element/types").FillStyle | undefined;
-    currentItemStrokeWidth?: number | undefined;
+    currentItemStrokeWidthKey?: import("@excalidraw/common").StrokeWidthKey | undefined;
     currentItemStrokeStyle?: import("@excalidraw/element/types").StrokeStyle | undefined;
     currentItemRoughness?: number | undefined;
+    currentItemStrokeVariability?: import("@excalidraw/element/types").StrokeVariability | undefined;
     currentItemOpacity?: number | undefined;
     currentItemFontFamily?: number | undefined;
     currentItemFontSize?: number | undefined;

package/dist/types/excalidraw/components/App.d.ts

@@ -2,13 +2,14 @@ import React from "react";
 import { AppEventBus, type EXPORT_IMAGE_TYPES, Emitter, type EditorInterface, type StylesPanelMode } from "@excalidraw/common";
 import { FlowChartCreator, Scene, Store, type ElementUpdate, StoreDelta, type ApplyToOptions } from "@excalidraw/element";
 import { LinearElementEditor } from "@excalidraw/element/linearElementEditor";
-import type { ExcalidrawElement, NonDeleted, NonDeletedExcalidrawElement, ExcalidrawFrameLikeElement, ExcalidrawIframeElement, ExcalidrawEmbeddableElement, Ordered, SceneElementsMap } from "@excalidraw/element/types";
+import type { ExcalidrawElement, NonDeleted, FileId, NonDeletedExcalidrawElement, ExcalidrawFrameLikeElement, ExcalidrawIframeElement, ExcalidrawEmbeddableElement, Ordered, SceneElementsMap } from "@excalidraw/element/types";
 import type { Mutable } from "@excalidraw/common/utility-types";
 import { ActionManager } from "../actions/manager";
 import { History } from "../history";
 import { Fonts } from "../fonts";
 import { type WritableAtom } from "../editor-jotai";
 import { Renderer } from "../scene/Renderer";
+import { type ScrollToContentOptions } from "../scroll";
 import { LaserTrails } from "../laserTrails";
 import { isOverScrollBars } from "../scene/scrollbars";
 import { LassoTrail } from "../lasso";
@@ -88,6 +89,10 @@ declare class App extends React.Component<AppProps, AppState> {
     };
     files: BinaryFiles;
     imageCache: AppClassProperties["imageCache"];
+    imageLoadingProgress: Map<FileId, number>;
+    imageLoadingProgressEmitter: Emitter<[]>;
+    imagePlaceholderUpdateEmitter: Emitter<[]>;
+    private imageTransitionPlaceholders;
     private iFrameRefs;
     /**
      * Indicates whether the embeddable's url has been validated for rendering.
@@ -387,33 +392,7 @@ declare class App extends React.Component<AppProps, AppState> {
         animate?: boolean;
         duration?: number;
     }) => void;
-    scrollToContent: (
-    /**
-     * target to scroll to
-     *
-     * - string - id of element or group, or url containing elementLink
-     * - ExcalidrawElement | ExcalidrawElement[] - element(s) objects
-     */
-    target?: string | ExcalidrawElement | readonly ExcalidrawElement[], opts?: ({
-        fitToContent?: boolean;
-        fitToViewport?: never;
-        viewportZoomFactor?: number;
-        animate?: boolean;
-        duration?: number;
-    } | {
-        fitToContent?: never;
-        fitToViewport?: boolean;
-        /** when fitToViewport=true, how much screen should the content cover,
-         * between 0.1 (10%) and 1 (100%)
-         */
-        viewportZoomFactor?: number;
-        animate?: boolean;
-        duration?: number;
-    }) & {
-        minZoom?: number;
-        maxZoom?: number;
-        canvasOffsets?: Offsets;
-    }) => void;
+    scrollToContent: (target?: string | ExcalidrawElement | readonly NonDeletedExcalidrawElement[], opts?: ScrollToContentOptions) => void;
     private maybeUnfollowRemoteUser;
     /** use when changing scrollX/scrollY/zoom based on user interaction */
     private translateCanvas;
@@ -425,6 +404,10 @@ declare class App extends React.Component<AppProps, AppState> {
      * NOTE if file already exists in editor state, the file data is not updated
      * */
     addFiles: ExcalidrawImperativeAPI["addFiles"];
+    addImagePlaceholder: ExcalidrawImperativeAPI["addImagePlaceholder"];
+    setImageLoadingProgress: ExcalidrawImperativeAPI["setImageLoadingProgress"];
+    private clearImageLoadingProgress;
+    private clearImageShapeCacheForFileId;
     private addMissingFiles;
     updateScene: <K extends keyof AppState>(sceneData: {
         elements?: SceneData["elements"];
@@ -502,6 +485,7 @@ declare class App extends React.Component<AppProps, AppState> {
     private handleCanvasClick;
     private getElementLinkAtPosition;
     private handleElementLinkClick;
+    private openElementLink;
     /**
      * finds candidate frame under cursor (when dragging frame children/elements
      * inside frames)
@@ -554,6 +538,7 @@ declare class App extends React.Component<AppProps, AppState> {
     private newImagePlaceholder;
     private handleLinearElementOnPointerDown;
     private getCurrentItemRoundness;
+    private getCurrentItemStrokeWidth;
     private createGenericElementOnPointerDown;
     private createFrameElementOnPointerDown;
     private maybeCacheReferenceSnapPoints;

package/dist/types/excalidraw/components/ColorPicker/colorPickerUtils.d.ts

@@ -14,7 +14,7 @@ export declare const isCustomColor: ({ color, palette, }: {
 }) => boolean;
 export declare const getMostUsedCustomColors: (elements: readonly ExcalidrawElement[], type: "elementBackground" | "elementStroke", palette: ColorPaletteCustom) => string[];
 export type ActiveColorPickerSectionAtomType = "custom" | "baseColors" | "shades" | "hex" | null;
-export declare const activeColorPickerSectionAtom: import("jotai/vanilla/atom").PrimitiveAtom<ActiveColorPickerSectionAtomType> & {
+export declare const activeColorPickerSectionAtom: import("jotai").PrimitiveAtom<ActiveColorPickerSectionAtomType> & {
     init: ActiveColorPickerSectionAtomType;
 };
 export type ColorPickerType = "canvasBackground" | "elementBackground" | "elementStroke";

package/dist/types/excalidraw/components/ConvertElementTypePopup.d.ts

@@ -2,7 +2,7 @@ import type { ConvertibleTypes, ExcalidrawElement, ExcalidrawTextContainer, Exca
 import type { Scene } from "@excalidraw/element";
 import "./ConvertElementTypePopup.scss";
 import type App from "./App";
-export declare const convertElementTypePopupAtom: import("jotai/vanilla/atom").PrimitiveAtom<{
+export declare const convertElementTypePopupAtom: import("jotai").PrimitiveAtom<{
     type: "panel";
 } | null> & {
     init: {

package/dist/types/excalidraw/components/EyeDropper.d.ts

@@ -13,7 +13,7 @@ export type EyeDropperProperties = {
      **/
     colorPickerType: ColorPickerType;
 };
-export declare const activeEyeDropperAtom: import("jotai/vanilla/atom").PrimitiveAtom<EyeDropperProperties | null> & {
+export declare const activeEyeDropperAtom: import("jotai").PrimitiveAtom<EyeDropperProperties | null> & {
     init: EyeDropperProperties | null;
 };
 export declare const EyeDropper: React.FC<{

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

@@ -11,7 +11,7 @@ export type OverwriteConfirmState = {
 } | {
     active: false;
 };
-export declare const overwriteConfirmStateAtom: import("jotai/vanilla/atom").PrimitiveAtom<OverwriteConfirmState> & {
+export declare const overwriteConfirmStateAtom: import("jotai").PrimitiveAtom<OverwriteConfirmState> & {
     init: OverwriteConfirmState;
 };
 export declare function openConfirmModal({ title, description, actionLabel, color, }: {

package/dist/types/excalidraw/components/SearchMenu.d.ts

@@ -1,5 +1,5 @@
 import "./SearchMenu.scss";
-export declare const searchItemInFocusAtom: import("jotai/vanilla/atom").PrimitiveAtom<number | null> & {
+export declare const searchItemInFocusAtom: import("jotai").PrimitiveAtom<number | null> & {
     init: number | null;
 };
 export declare const SearchMenu: () => import("react/jsx-runtime").JSX.Element;

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

@@ -8,7 +8,7 @@ import "./Sidebar.scss";
  *
  * Since we can only render one Sidebar at a time, we can use a simple flag.
  */
-export declare const isSidebarDockedAtom: import("jotai/vanilla/atom").PrimitiveAtom<boolean> & {
+export declare const isSidebarDockedAtom: import("jotai").PrimitiveAtom<boolean> & {
     init: boolean;
 };
 export declare const SidebarInner: React.ForwardRefExoticComponent<Omit<{

package/dist/types/excalidraw/components/canvases/StaticCanvas.d.ts

@@ -1,9 +1,10 @@
 import React from "react";
 import type { NonDeletedExcalidrawElement, NonDeletedSceneElementsMap } from "@excalidraw/element/types";
 import type { RenderableElementsMap, StaticCanvasRenderConfig } from "../../scene/types";
-import type { StaticCanvasAppState } from "../../types";
+import type { AppClassProperties, StaticCanvasAppState } from "../../types";
 import type { RoughCanvas } from "roughjs/bin/canvas";
 type StaticCanvasProps = {
+    app: AppClassProperties;
     canvas: HTMLCanvasElement;
     rc: RoughCanvas;
     elementsMap: RenderableElementsMap;

package/dist/types/excalidraw/components/icons.d.ts

@@ -113,6 +113,8 @@ export declare const StrokeStyleDottedIcon: import("react/jsx-runtime").JSX.Elem
 export declare const SloppinessArchitectIcon: import("react/jsx-runtime").JSX.Element;
 export declare const SloppinessArtistIcon: import("react/jsx-runtime").JSX.Element;
 export declare const SloppinessCartoonistIcon: import("react/jsx-runtime").JSX.Element;
+export declare const strokeVariabilityConstantIcon: import("react/jsx-runtime").JSX.Element;
+export declare const strokeVariabilityVariableIcon: import("react/jsx-runtime").JSX.Element;
 export declare const EdgeSharpIcon: import("react/jsx-runtime").JSX.Element;
 export declare const EdgeRoundIcon: import("react/jsx-runtime").JSX.Element;
 export declare const ArrowheadNoneIcon: React.MemoExoticComponent<({ flip }: {

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

@@ -25,11 +25,14 @@ export declare const Help: {
 export declare const ToggleTheme: {
     (props: {
         allowSystemTheme: true;
+        /**
+         * Controls the theme of this UI component only.
+         * You should subscribe to `props.onThemeChange` and control the theme
+         * upstream.
+         */
         theme: Theme | "system";
-        onSelect: (theme: Theme | "system") => void;
     } | {
-        allowSystemTheme?: false;
-        onSelect?: (theme: Theme) => void;
+        allowSystemTheme: false;
     }): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };
@@ -66,7 +69,7 @@ export declare const Preferences: {
     ToggleMidpointSnapping: () => import("react/jsx-runtime").JSX.Element;
     ToggleGridMode: () => import("react/jsx-runtime").JSX.Element;
     ToggleZenMode: () => import("react/jsx-runtime").JSX.Element;
-    ToggleViewMode: () => import("react/jsx-runtime").JSX.Element;
+    ToggleViewMode: () => import("react/jsx-runtime").JSX.Element | null;
     ToggleElementProperties: () => import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

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

@@ -90,6 +90,7 @@ fileHandle?: FileSystemFileHandle | null) => Promise<{
         currentItemArrowType: "sharp" | "round" | "elbow";
         bindMode: import("@excalidraw/element/types").BindMode;
         gridSize: number;
+        viewModeOnly: boolean;
         gridModeEnabled: boolean;
         objectsSnapModeEnabled: boolean;
         wheelZoomsOnDefault?: boolean | undefined;
@@ -131,9 +132,10 @@ fileHandle?: FileSystemFileHandle | null) => Promise<{
         currentItemStrokeColor: string;
         currentItemBackgroundColor: string;
         currentItemFillStyle: ExcalidrawElement["fillStyle"];
-        currentItemStrokeWidth: number;
+        currentItemStrokeWidthKey: import("@excalidraw/common").StrokeWidthKey;
         currentItemStrokeStyle: ExcalidrawElement["strokeStyle"];
         currentItemRoughness: number;
+        currentItemStrokeVariability: import("@excalidraw/element/types").StrokeVariability;
         currentItemOpacity: number;
         currentItemFontFamily: import("@excalidraw/element/types").FontFamilyValues;
         currentItemFontSize: number;

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

@@ -91,6 +91,7 @@ export declare const loadFromJSON: (localAppState: AppState, localElements: read
         currentItemArrowType: "sharp" | "round" | "elbow";
         bindMode: import("@excalidraw/element/types").BindMode;
         gridSize: number;
+        viewModeOnly: boolean;
         gridModeEnabled: boolean;
         objectsSnapModeEnabled: boolean;
         wheelZoomsOnDefault?: boolean | undefined;
@@ -132,9 +133,10 @@ export declare const loadFromJSON: (localAppState: AppState, localElements: read
         currentItemStrokeColor: string;
         currentItemBackgroundColor: string;
         currentItemFillStyle: ExcalidrawElement["fillStyle"];
-        currentItemStrokeWidth: number;
+        currentItemStrokeWidthKey: import("@excalidraw/common").StrokeWidthKey;
         currentItemStrokeStyle: ExcalidrawElement["strokeStyle"];
         currentItemRoughness: number;
+        currentItemStrokeVariability: import("@excalidraw/element/types").StrokeVariability;
         currentItemOpacity: number;
         currentItemFontFamily: import("@excalidraw/element/types").FontFamilyValues;
         currentItemFontSize: number;

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { applyDarkModeFilter, getStrokeWidthByKey } from "@excalidraw/common";
 import Footer from "./components/footer/FooterCenter";
 import LiveCollaborationTrigger from "./components/live-collaboration/LiveCollaborationTrigger";
 import MainMenu from "./components/main-menu/MainMenu";
@@ -42,7 +43,7 @@ export { Stats } from "./components/Stats";
 export { DefaultSidebar } from "./components/DefaultSidebar";
 export { zoomToFitBounds } from "./actions/actionCanvas";
 export { getCommonBounds, getVisibleSceneBounds, convertToExcalidrawElements, } from "@excalidraw/element";
-export { elementsOverlappingBBox, isElementInsideBBox, elementPartiallyOverlapsWithOrContainsBBox, } from "@excalidraw/utils/withinBounds";
+export { elementsOverlappingBBox } from "@excalidraw/element";
 export { DiagramToCodePlugin } from "./components/DiagramToCodePlugin/DiagramToCodePlugin";
 export { getDataURL } from "./data/blob";
 export { isElementLink } from "@excalidraw/element";
@@ -60,3 +61,4 @@ export declare function useExcalidrawStateValue<K extends keyof AppState>(prop:
 export declare function useExcalidrawStateValue<T extends keyof AppState>(props: T[]): AppState | undefined;
 export declare function useExcalidrawStateValue<T>(selector: (appState: AppState) => T): T | undefined;
 export { _useOnAppStateChange as useOnExcalidrawStateChange };
+export { applyDarkModeFilter, getStrokeWidthByKey };

package/dist/types/excalidraw/renderer/animation.d.ts

@@ -12,4 +12,5 @@ export declare class AnimationController {
     private static tick;
     static running(key: string): boolean;
     static cancel(key: string): void;
+    static reset(): void;
 }

package/dist/types/excalidraw/scene/Renderer.d.ts

@@ -272,6 +272,7 @@ export declare class Renderer {
             type: "image";
             fileId: import("@excalidraw/element/types").FileId | null;
             fileName: string | null;
+            thumbHash: string | null;
             status: "pending" | "saved" | "error";
             scale: [number, number];
             crop: import("@excalidraw/element/types").ImageCrop | null;
@@ -427,6 +428,7 @@ export declare class Renderer {
             points: readonly import("@excalidraw/math").LocalPoint[];
             pressures: readonly number[];
             simulatePressure: boolean;
+            strokeOptions: import("@excalidraw/element/types").StrokeOptions;
         }> & {
             isDeleted: boolean;
         }) | null;

package/dist/types/excalidraw/scene/index.d.ts

@@ -1,4 +1,4 @@
 export { isSomeElementSelected, getElementsWithinSelection, getSelectedElements, getTargetElements, } from "@excalidraw/element";
 export { calculateScrollCenter } from "./scroll";
-export { hasBackground, hasStrokeWidth, hasStrokeStyle, canHaveArrowheads, canChangeRoundness, } from "@excalidraw/element";
+export { hasBackground, hasStrokeWidth, hasStrokeStyle, hasFreedrawMode, canHaveArrowheads, canChangeRoundness, } from "@excalidraw/element";
 export { getNormalizedZoom, getNormalizedGridSize, getNormalizedGridStep, } from "./normalize";

package/dist/types/excalidraw/scene/types.d.ts

@@ -8,6 +8,7 @@ export type RenderableElementsMap = NonDeletedElementsMap & MakeBrand<"Renderabl
 export type StaticCanvasRenderConfig = {
     canvasBackgroundColor: AppState["viewBackgroundColor"];
     imageCache: AppClassProperties["imageCache"];
+    imageTransitionDuration?: number;
     renderGrid: boolean;
     /** when exporting the behavior is slightly different (e.g. we can't use
      CSS filters), and we disable render optimizations for best output */

package/dist/types/excalidraw/scroll.d.ts

@@ -0,0 +1,46 @@
+import type { ExcalidrawElement } from "@excalidraw/element/types";
+import type { AppState, Offsets } from "./types";
+export declare const SCROLL_TO_CONTENT_ANIMATION_KEY = "animateScrollToContent";
+export type ScrollToContentOptions = ({
+    fitToContent?: boolean;
+    fitToViewport?: never;
+    viewportZoomFactor?: number;
+    animate?: boolean;
+    duration?: number;
+} | {
+    fitToContent?: never;
+    fitToViewport?: boolean;
+    /** when fitToViewport=true, how much screen should the content cover,
+     * between 0.1 (10%) and 1 (100%) */
+    viewportZoomFactor?: number;
+    animate?: boolean;
+    duration?: number;
+}) & {
+    minZoom?: number;
+    maxZoom?: number;
+    canvasOffsets?: Offsets;
+};
+type Viewport = Pick<AppState, "scrollX" | "scrollY" | "zoom">;
+/**
+ * Scrolls (and optionally zooms) the viewport so that the given target is in
+ * view, optionally animating the transition.
+ */
+export declare const scrollToElements: (state: AppState, target: readonly ExcalidrawElement[], onFrame: (state: Pick<AppState, "scrollX" | "scrollY" | "zoom" | "shouldCacheIgnoreZoom">) => void, opts?: ScrollToContentOptions) => void;
+/**
+ * Interpolates the viewport from `from` to `target` at the (already-eased)
+ * blend amount `factor` (0 = `from`, 1 = `target`).
+ *
+ * Zoom is interpolated geometrically (so it feels uniform), and rather than
+ * tweening scrollX/scrollY directly we tween the *focal point* — the scene
+ * point under the viewport center — and derive scroll from it. Mixing a linear
+ * scroll with a geometric zoom makes the focal point swoop sideways
+ * mid-animation (most visible when zooming out); gliding the focal point keeps
+ * it steady. `width/2/zoom - scroll` is the inverse of `centerScrollOn` without
+ * offsets, so factor 0/1 land exactly on `from`/`target`.
+ */
+export declare const interpolateViewport: ({ from, target, factor, }: {
+    from: Pick<AppState, "scrollX" | "scrollY" | "zoom" | "width" | "height">;
+    target: Viewport;
+    factor: number;
+}) => Viewport;
+export {};

package/dist/types/excalidraw/types.d.ts

@@ -1,7 +1,7 @@
-import type { IMAGE_MIME_TYPES, UserIdleState, throttleRAF, MIME_TYPES, ColorTuple, EditorInterface } from "@excalidraw/common";
+import type { IMAGE_MIME_TYPES, UserIdleState, throttleRAF, MIME_TYPES, ColorTuple, EditorInterface, StrokeWidthKey } from "@excalidraw/common";
 import type { LinearElementEditor } from "@excalidraw/element";
 import type { MaybeTransformHandleType } from "@excalidraw/element";
-import type { PointerType, ExcalidrawLinearElement, NonDeletedExcalidrawElement, NonDeleted, TextAlign, ExcalidrawElement, GroupId, ExcalidrawBindableElement, Arrowhead, FontFamilyValues, FileId, Theme, StrokeRoundness, ExcalidrawEmbeddableElement, ExcalidrawMagicFrameElement, ExcalidrawFrameLikeElement, ExcalidrawElementType, ExcalidrawIframeLikeElement, OrderedExcalidrawElement, ExcalidrawNonSelectionElement, ArrangeAlgorithms, BindMode, ExcalidrawTextElement } from "@excalidraw/element/types";
+import type { PointerType, ExcalidrawLinearElement, NonDeletedExcalidrawElement, NonDeleted, TextAlign, ExcalidrawElement, GroupId, ExcalidrawBindableElement, Arrowhead, FontFamilyValues, FileId, Theme, StrokeRoundness, ExcalidrawEmbeddableElement, ExcalidrawMagicFrameElement, ExcalidrawFrameLikeElement, ExcalidrawElementType, ExcalidrawIframeLikeElement, OrderedExcalidrawElement, ExcalidrawNonSelectionElement, ArrangeAlgorithms, BindMode, ExcalidrawTextElement, StrokeVariability } from "@excalidraw/element/types";
 import type { Merge, MaybePromise, ValueOf, MakeBrand } from "@excalidraw/common/utility-types";
 import type { CaptureUpdateActionType, DurableIncrement, EphemeralIncrement } from "@excalidraw/element";
 import type { GlobalPoint } from "@excalidraw/math";
@@ -64,6 +64,8 @@ export type BinaryFileData = {
     id: FileId;
     fileName: string;
     dataURL: DataURL;
+    /** compact image placeholder, also stored on the corresponding image element */
+    thumbHash?: string;
     /**
      * Epoch timestamp in milliseconds
      */
@@ -294,9 +296,10 @@ export interface AppState {
     currentItemStrokeColor: string;
     currentItemBackgroundColor: string;
     currentItemFillStyle: ExcalidrawElement["fillStyle"];
-    currentItemStrokeWidth: number;
+    currentItemStrokeWidthKey: StrokeWidthKey;
     currentItemStrokeStyle: ExcalidrawElement["strokeStyle"];
     currentItemRoughness: number;
+    currentItemStrokeVariability: StrokeVariability;
     currentItemOpacity: number;
     currentItemFontFamily: FontFamilyValues;
     currentItemFontSize: number;
@@ -365,6 +368,7 @@ export interface AppState {
     gridStep: number;
     gridModeEnabled: boolean;
     viewModeEnabled: boolean;
+    viewModeOnly: boolean;
     /** top-most selected groups (i.e. does not include nested groups) */
     selectedGroupIds: {
         [groupId: string]: boolean;
@@ -464,6 +468,7 @@ export type CompressImageFileOpts = {
 export type CompressImageFile = (file: File, opts: CompressImageFileOpts) => Promise<File>;
 export interface ExcalidrawProps {
     onChange?: (elements: readonly OrderedExcalidrawElement[], appState: AppState, files: BinaryFiles) => void;
+    onThemeChange?: (theme: Theme | "system") => void;
     /**
      * note: only subscribes if the props.onIncrement is defined on initial render
      */
@@ -514,6 +519,7 @@ export interface ExcalidrawProps {
     renderTopRightUI?: (isMobile: boolean, appState: UIAppState) => JSX.Element | null;
     langCode?: Language["code"];
     viewModeEnabled?: boolean;
+    viewModeOnly?: boolean;
     zenModeEnabled?: boolean;
     gridModeEnabled?: boolean;
     objectsSnapModeEnabled?: boolean;
@@ -587,12 +593,19 @@ export type ExportOpts = {
 export type ImageOptions = Partial<{
     maxWidthOrHeight: number;
     maxFileSizeBytes: number;
+    /** duration of the placeholder-to-full-image crossfade in milliseconds */
+    placeholderTransitionDuration: number;
 }>;
 export type CanvasActions = Partial<{
     changeViewBackgroundColor: boolean;
     export: false | ExportOpts;
     loadScene: boolean;
     saveToActiveFile: boolean;
+    /**
+     * defaults to true if `props.theme` is omitted or `props.onThemeChange`
+     * is supplied (at which point the theme is considered as host-app controlled),
+     * else default to false
+     * */
     toggleTheme: boolean | null;
     saveAsImage: boolean;
 }>;
@@ -637,7 +650,13 @@ export type AppClassProperties = {
     imageCache: Map<FileId, {
         image: HTMLImageElement | Promise<HTMLImageElement>;
         mimeType: ValueOf<typeof IMAGE_MIME_TYPES>;
+        isPlaceholder?: boolean;
+        placeholderImage?: HTMLImageElement;
+        transitionStart?: number;
     }>;
+    imageLoadingProgress: App["imageLoadingProgress"];
+    imageLoadingProgressEmitter: App["imageLoadingProgressEmitter"];
+    imagePlaceholderUpdateEmitter: App["imagePlaceholderUpdateEmitter"];
     files: BinaryFiles;
     editorInterface: App["editorInterface"];
     scene: App["scene"];
@@ -766,6 +785,8 @@ export interface ExcalidrawImperativeAPI {
     refresh: InstanceType<typeof App>["refresh"];
     setToast: InstanceType<typeof App>["setToast"];
     addFiles: (data: BinaryFileData[]) => void;
+    addImagePlaceholder: (fileId: FileId, file: File) => Promise<void>;
+    setImageLoadingProgress: (fileId: FileId, progress: number | null) => void;
     addImageElementsToScene: (imageFiles: {
         file: File;
         customData: Record<string, any>;

package/dist/types/laser-pointer/src/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./state";
+export type { Point } from "./math";

package/dist/types/laser-pointer/src/math.d.ts

@@ -0,0 +1,16 @@
+export type Point = [x: number, y: number, r: number];
+export declare function add([ax, ay, ar]: Point, [bx, by, br]: Point): Point;
+export declare function sub([ax, ay, ar]: Point, [bx, by, br]: Point): Point;
+export declare function smul([x, y, r]: Point, s: number): Point;
+export declare function norm([x, y, r]: Point): Point;
+export declare function rot([x, y, r]: Point, rad: number): Point;
+export declare function plerp(a: Point, b: Point, t: number): Point;
+export declare function lerp(a: number, b: number, t: number): number;
+export declare function angle(p: Point, p1: Point, p2: Point): number;
+export declare function normAngle(a: number): number;
+export declare function mag([x, y]: Point): number;
+export declare function dist([ax, ay]: Point, [bx, by]: Point): number;
+export declare function getCircleAndPerpendicularLineIntersectionsAtPoint(point: Point, direction: Point, radius: number): [Point, Point];
+export declare function runLength(ps: Point[]): number;
+export declare const clamp: (v: number, min: number, max: number) => number;
+export declare function distancePointToSegment(p3: Point, p1: Point, p2: Point): number;

package/dist/types/laser-pointer/src/simplify.d.ts

@@ -0,0 +1,2 @@
+import { type Point } from "./math";
+export declare function douglasPeucker(points: Point[], epsilon: number): Point[];

package/dist/types/laser-pointer/src/state.d.ts

@@ -0,0 +1,35 @@
+import type { Point } from "./math";
+export type SizeMappingDetails = {
+    pressure: number;
+    runningLength: number;
+    currentIndex: number;
+    totalLength: number;
+};
+export type LaserPointerOptions = {
+    size: number;
+    streamline: number;
+    simplify: number;
+    simplifyPhase: "tail" | "output" | "input";
+    keepHead: boolean;
+    sizeMapping: (details: SizeMappingDetails) => number;
+};
+export declare class LaserPointer {
+    static defaults: LaserPointerOptions;
+    static constants: {
+        cornerDetectionMaxAngle: number;
+        cornerDetectionVariance: (s: number) => 1 | 0.5;
+        maxTailLength: number;
+    };
+    options: LaserPointerOptions;
+    constructor(options: Partial<LaserPointerOptions>);
+    originalPoints: Point[];
+    private stablePoints;
+    private tailPoints;
+    private isFresh;
+    private get lastPoint();
+    addPoint(point: Point): void;
+    close(): void;
+    stabilizeTail(): void;
+    private getSize;
+    getStrokeOutline(sizeOverride?: number | undefined): Point[];
+}

package/dist/types/utils/src/index.d.ts

@@ -1,4 +1,3 @@
 export * from "./export";
-export * from "./withinBounds";
-export * from "./bbox";
+export { elementsOverlappingBBox } from "@excalidraw/element";
 export { getCommonBounds } from "@excalidraw/element";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myoc/excalidraw",
-  "version": "0.19.518",
+  "version": "0.19.520",
   "type": "module",
   "types": "./dist/types/excalidraw/index.d.ts",
   "main": "./dist/prod/index.js",
@@ -108,9 +108,9 @@
     "roughjs": "4.6.4",
     "sass": "1.51.0",
     "tunnel-rat": "0.1.2",
-    "@excalidraw/common": "npm:@myoc/common@0.19.518",
-    "@excalidraw/math": "npm:@myoc/math@0.19.518",
-    "@excalidraw/element": "npm:@myoc/element@0.19.518"
+    "@excalidraw/common": "npm:@myoc/common@0.19.520",
+    "@excalidraw/math": "npm:@myoc/math@0.19.520",
+    "@excalidraw/element": "npm:@myoc/element@0.19.520"
   },
   "devDependencies": {
     "@size-limit/preset-big-lib": "9.0.0",