@nous-excalidraw/math 0.18.4 → 0.18.5-beta.5

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

@@ -36,6 +36,8 @@ export declare const actionSelectAllElementsInFrame: {
                 midPoint?: import("@nous-excalidraw/math").GlobalPoint;
             } | null;
             frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
+            hoverOutlineElementId: string | null;
+            hoveredFrameId: string | null;
             frameRendering: {
                 enabled: boolean;
                 name: boolean;
@@ -212,6 +214,8 @@ export declare const actionRemoveAllElementsFromFrame: {
                 midPoint?: import("@nous-excalidraw/math").GlobalPoint;
             } | null;
             frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
+            hoverOutlineElementId: string | null;
+            hoveredFrameId: string | null;
             frameRendering: {
                 enabled: boolean;
                 name: boolean;
@@ -392,6 +396,8 @@ export declare const actionupdateFrameRendering: {
                 midPoint?: import("@nous-excalidraw/math").GlobalPoint;
             } | null;
             frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
+            hoverOutlineElementId: string | null;
+            hoveredFrameId: string | null;
             editingFrame: string | null;
             elementsToHighlight: import("@nous-excalidraw/element/types").NonDeleted<ExcalidrawElement>[] | null;
             editingTextElement: import("@nous-excalidraw/element/types").ExcalidrawTextElement | null;
@@ -565,6 +571,8 @@ export declare const actionSetFrameAsActiveTool: {
                 midPoint?: import("@nous-excalidraw/math").GlobalPoint;
             } | null;
             frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
+            hoverOutlineElementId: string | null;
+            hoveredFrameId: string | null;
             frameRendering: {
                 enabled: boolean;
                 name: boolean;
@@ -876,6 +884,40 @@ export declare const actionWrapSelectionInFrame: {
             link: string | null;
             locked: boolean;
             customData?: Record<string, any>;
+        }> & {
+            type: "triangle";
+        } & {
+            index: import("@nous-excalidraw/element/types").FractionalIndex;
+        }) | (Readonly<{
+            id: string;
+            x: number;
+            y: number;
+            strokeColor: string;
+            backgroundColor: string;
+            fillStyle: import("@nous-excalidraw/element/types").FillStyle;
+            strokeWidth: number;
+            strokeStyle: import("@nous-excalidraw/element/types").StrokeStyle;
+            roundness: null | {
+                type: import("@nous-excalidraw/element/types").RoundnessType;
+                value?: number;
+            };
+            roughness: number;
+            opacity: number;
+            width: number;
+            height: number;
+            angle: import("@nous-excalidraw/math").Radians;
+            seed: number;
+            version: number;
+            versionNonce: number;
+            index: import("@nous-excalidraw/element/types").FractionalIndex | null;
+            isDeleted: boolean;
+            groupIds: readonly import("@nous-excalidraw/element/types").GroupId[];
+            frameId: string | null;
+            boundElements: readonly import("@nous-excalidraw/element/types").BoundElement[] | null;
+            updated: number;
+            link: string | null;
+            locked: boolean;
+            customData?: Record<string, any>;
         }> & {
             type: "ellipse";
         } & {

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

@@ -42,6 +42,8 @@ export declare const actionGroup: {
                 midPoint?: import("@nous-excalidraw/math").GlobalPoint;
             } | null;
             frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
+            hoverOutlineElementId: string | null;
+            hoveredFrameId: string | null;
             frameRendering: {
                 enabled: boolean;
                 name: boolean;
@@ -217,6 +219,8 @@ export declare const actionUngroup: {
                 midPoint?: import("@nous-excalidraw/math").GlobalPoint;
             } | null;
             frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
+            hoverOutlineElementId: string | null;
+            hoveredFrameId: string | null;
             frameRendering: {
                 enabled: boolean;
                 name: boolean;

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

@@ -69,6 +69,8 @@ export declare const actionToggleLinearEditor: {
                 midPoint?: import("@nous-excalidraw/math").GlobalPoint;
             } | null;
             frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
+            hoverOutlineElementId: string | null;
+            hoveredFrameId: string | null;
             frameRendering: {
                 enabled: boolean;
                 name: boolean;
@@ -387,6 +389,40 @@ export declare const actionTogglePolygon: {
             link: string | null;
             locked: boolean;
             customData?: Record<string, any>;
+        }> & {
+            type: "triangle";
+        } & {
+            index: import("@nous-excalidraw/element/types").FractionalIndex;
+        }) | (Readonly<{
+            id: string;
+            x: number;
+            y: number;
+            strokeColor: string;
+            backgroundColor: string;
+            fillStyle: import("@nous-excalidraw/element/types").FillStyle;
+            strokeWidth: number;
+            strokeStyle: import("@nous-excalidraw/element/types").StrokeStyle;
+            roundness: null | {
+                type: import("@nous-excalidraw/element/types").RoundnessType;
+                value?: number;
+            };
+            roughness: number;
+            opacity: number;
+            width: number;
+            height: number;
+            angle: import("@nous-excalidraw/math").Radians;
+            seed: number;
+            version: number;
+            versionNonce: number;
+            index: import("@nous-excalidraw/element/types").FractionalIndex | null;
+            isDeleted: boolean;
+            groupIds: readonly import("@nous-excalidraw/element/types").GroupId[];
+            frameId: string | null;
+            boundElements: readonly import("@nous-excalidraw/element/types").BoundElement[] | null;
+            updated: number;
+            link: string | null;
+            locked: boolean;
+            customData?: Record<string, any>;
         }> & {
             type: "ellipse";
         } & {

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

@@ -33,6 +33,8 @@ export declare const actionLink: {
                 midPoint?: import("@nous-excalidraw/math").GlobalPoint;
             } | null;
             frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
+            hoverOutlineElementId: string | null;
+            hoveredFrameId: string | null;
             frameRendering: {
                 enabled: boolean;
                 name: boolean;

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

@@ -40,6 +40,8 @@ export declare const actionShortcuts: {
                 midPoint?: import("@nous-excalidraw/math").GlobalPoint;
             } | null;
             frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
+            hoverOutlineElementId: string | null;
+            hoveredFrameId: string | null;
             frameRendering: {
                 enabled: boolean;
                 name: boolean;

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

@@ -62,6 +62,8 @@ export declare const actionDecreaseFontSize: {
                 midPoint?: import("@nous-excalidraw/math").GlobalPoint;
             } | null;
             frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
+            hoverOutlineElementId: string | null;
+            hoveredFrameId: string | null;
             frameRendering: {
                 enabled: boolean;
                 name: boolean;
@@ -233,6 +235,8 @@ export declare const actionIncreaseFontSize: {
                 midPoint?: import("@nous-excalidraw/math").GlobalPoint;
             } | null;
             frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
+            hoverOutlineElementId: string | null;
+            hoveredFrameId: string | null;
             frameRendering: {
                 enabled: boolean;
                 name: boolean;

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

@@ -40,6 +40,8 @@ export declare const actionSelectAll: {
                 midPoint?: import("@nous-excalidraw/math").GlobalPoint;
             } | null;
             frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
+            hoverOutlineElementId: string | null;
+            hoveredFrameId: string | null;
             frameRendering: {
                 enabled: boolean;
                 name: boolean;

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

@@ -38,6 +38,8 @@ export declare const actionCopyStyles: {
                 midPoint?: import("@nous-excalidraw/math").GlobalPoint;
             } | null;
             frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
+            hoverOutlineElementId: string | null;
+            hoveredFrameId: string | null;
             frameRendering: {
                 enabled: boolean;
                 name: boolean;

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

@@ -34,6 +34,8 @@ export declare const actionToggleArrowBinding: {
                 midPoint?: import("@nous-excalidraw/math").GlobalPoint;
             } | null;
             frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
+            hoverOutlineElementId: string | null;
+            hoveredFrameId: string | null;
             frameRendering: {
                 enabled: boolean;
                 name: boolean;

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

@@ -39,6 +39,8 @@ export declare const actionToggleGridMode: {
                 midPoint?: import("@nous-excalidraw/math").GlobalPoint;
             } | null;
             frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
+            hoverOutlineElementId: string | null;
+            hoveredFrameId: string | null;
             frameRendering: {
                 enabled: boolean;
                 name: boolean;

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

@@ -34,6 +34,8 @@ export declare const actionToggleMidpointSnapping: {
                 midPoint?: import("@nous-excalidraw/math").GlobalPoint;
             } | null;
             frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
+            hoverOutlineElementId: string | null;
+            hoveredFrameId: string | null;
             frameRendering: {
                 enabled: boolean;
                 name: boolean;

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

@@ -37,6 +37,8 @@ export declare const actionToggleObjectsSnapMode: {
                 midPoint?: import("@nous-excalidraw/math").GlobalPoint;
             } | null;
             frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
+            hoverOutlineElementId: string | null;
+            hoveredFrameId: string | null;
             frameRendering: {
                 enabled: boolean;
                 name: boolean;

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

@@ -43,6 +43,8 @@ export declare const actionToggleSearchMenu: {
                 midPoint?: import("@nous-excalidraw/math").GlobalPoint;
             } | null;
             frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
+            hoverOutlineElementId: string | null;
+            hoveredFrameId: string | null;
             frameRendering: {
                 enabled: boolean;
                 name: boolean;

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

@@ -39,6 +39,8 @@ export declare const actionToggleStats: {
                 midPoint?: import("@nous-excalidraw/math").GlobalPoint;
             } | null;
             frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
+            hoverOutlineElementId: string | null;
+            hoveredFrameId: string | null;
             frameRendering: {
                 enabled: boolean;
                 name: boolean;

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

@@ -36,6 +36,8 @@ export declare const actionToggleViewMode: {
                 midPoint?: import("@nous-excalidraw/math").GlobalPoint;
             } | null;
             frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
+            hoverOutlineElementId: string | null;
+            hoveredFrameId: string | null;
             frameRendering: {
                 enabled: boolean;
                 name: boolean;

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

@@ -36,6 +36,8 @@ export declare const actionToggleZenMode: {
                 midPoint?: import("@nous-excalidraw/math").GlobalPoint;
             } | null;
             frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
+            hoverOutlineElementId: string | null;
+            hoveredFrameId: string | null;
             frameRendering: {
                 enabled: boolean;
                 name: boolean;

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

@@ -67,6 +67,7 @@ export declare const useExcalidrawAPI: () => ExcalidrawImperativeAPI | null;
 declare class App extends React.Component<AppProps, AppState> {
     canvas: AppClassProperties["canvas"];
     interactiveCanvas: AppClassProperties["interactiveCanvas"];
+    outlineOverlayCanvas: AppClassProperties["outlineOverlayCanvas"];
     sessionExportThemeOverride: AppState["theme"] | undefined;
     rc: RoughCanvas;
     unmounted: boolean;
@@ -481,6 +482,12 @@ declare class App extends React.Component<AppProps, AppState> {
     private getTextElementAtPosition;
     private isHittingTextAutoResizeHandle;
     private handleTextAutoResizeHandlePointerDown;
+    /**
+     * When a frame wins z-order at a point, its full interior still hits — so
+     * images/embeds below it in the stack never surface. Prefer the topmost
+     * descendant in the same hit stack that passes a real geometry hit.
+     */
+    private getTopFrameDescendantHitUnderPoint;
     private getElementAtPosition;
     private getElementsAtPosition;
     getElementHitThreshold(element: ExcalidrawElement): number;
@@ -495,6 +502,11 @@ declare class App extends React.Component<AppProps, AppState> {
     private getElementLinkAtPosition;
     private handleElementLinkClick;
     private getTopLayerFrameAtSceneCoords;
+    private clearHoverOutlineIfNeeded;
+    /** Unified frame hover: title band, frame interior, or any element inside the frame. */
+    private computeHoveredFrameId;
+    private updateFrameHoverAndOutline;
+    private updateFrameHoverStateFromSceneCoords;
     private handleCanvasPointerMove;
     private handleEraser;
     private handleTouchMove;
@@ -565,6 +577,7 @@ declare class App extends React.Component<AppProps, AppState> {
      *  to render new images. This is just a failsafe  */
     private scheduleImageRefresh;
     private clearSelection;
+    private handleOutlineOverlayCanvasRef;
     private handleInteractiveCanvasRef;
     private insertImages;
     private handleAppOnDrop;

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

@@ -0,0 +1,8 @@
+import type { ElementsMap, NonDeletedExcalidrawElement } from "@nous-excalidraw/element/types";
+import type { AppState } from "../types";
+import "./FrameResizeDimensionLabel.scss";
+export declare const FrameResizeDimensionLabel: ({ element, elementsMap, appState, }: {
+    element: NonDeletedExcalidrawElement;
+    elementsMap: ElementsMap;
+    appState: AppState;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -7,6 +7,7 @@ import type { DOMAttributes } from "react";
 type InteractiveCanvasProps = {
     containerRef: React.RefObject<HTMLDivElement | null>;
     canvas: HTMLCanvasElement | null;
+    outlineOverlayCanvas: HTMLCanvasElement | null;
     elementsMap: RenderableElementsMap;
     visibleElements: readonly NonDeletedExcalidrawElement[];
     selectedElements: readonly NonDeletedExcalidrawElement[];

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

@@ -25,6 +25,7 @@ export declare const SelectionIcon: import("react/jsx-runtime").JSX.Element;
 export declare const LassoIcon: import("react/jsx-runtime").JSX.Element;
 export declare const RectangleIcon: import("react/jsx-runtime").JSX.Element;
 export declare const DiamondIcon: import("react/jsx-runtime").JSX.Element;
+export declare const TriangleIcon: import("react/jsx-runtime").JSX.Element;
 export declare const EllipseIcon: import("react/jsx-runtime").JSX.Element;
 export declare const ArrowIcon: import("react/jsx-runtime").JSX.Element;
 export declare const LineIcon: import("react/jsx-runtime").JSX.Element;

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

@@ -27,6 +27,13 @@ export declare const SHAPES: readonly [{
     readonly numericKey: "3";
     readonly fillable: true;
     readonly toolbar: true;
+}, {
+    readonly icon: import("react/jsx-runtime").JSX.Element;
+    readonly value: "triangle";
+    readonly key: "g";
+    readonly numericKey: null;
+    readonly fillable: true;
+    readonly toolbar: true;
 }, {
     readonly icon: import("react/jsx-runtime").JSX.Element;
     readonly value: "ellipse";
@@ -112,6 +119,13 @@ export declare const getToolbarTools: (app: AppClassProperties) => readonly [{
     readonly numericKey: "3";
     readonly fillable: true;
     readonly toolbar: true;
+}, {
+    readonly icon: import("react/jsx-runtime").JSX.Element;
+    readonly value: "triangle";
+    readonly key: "g";
+    readonly numericKey: null;
+    readonly fillable: true;
+    readonly toolbar: true;
 }, {
     readonly icon: import("react/jsx-runtime").JSX.Element;
     readonly value: "ellipse";
@@ -203,6 +217,13 @@ export declare const getToolbarTools: (app: AppClassProperties) => readonly [{
     readonly numericKey: "3";
     readonly fillable: true;
     readonly toolbar: true;
+} | {
+    readonly icon: import("react/jsx-runtime").JSX.Element;
+    readonly value: "triangle";
+    readonly key: "g";
+    readonly numericKey: null;
+    readonly fillable: true;
+    readonly toolbar: true;
 } | {
     readonly icon: import("react/jsx-runtime").JSX.Element;
     readonly value: "ellipse";
@@ -260,4 +281,4 @@ export declare const getToolbarTools: (app: AppClassProperties) => readonly [{
     readonly fillable: false;
     readonly toolbar: false;
 })[]];
-export declare const findShapeByKey: (key: string, app: AppClassProperties) => "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "freedraw" | "lasso" | "eraser" | "hand" | "laser" | null;
+export declare const findShapeByKey: (key: string, app: AppClassProperties) => "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "triangle" | "ellipse" | "image" | "freedraw" | "lasso" | "eraser" | "hand" | "laser" | null;

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

@@ -55,6 +55,7 @@ fileHandle?: FileSystemFileHandle | null) => Promise<{
                 [id: string]: true;
             }>;
             frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
+            hoverOutlineElementId: string | null;
             activeTool: {
                 lastActiveTool: import("../types").ActiveTool | null;
                 locked: boolean;
@@ -96,6 +97,7 @@ fileHandle?: FileSystemFileHandle | null) => Promise<{
             shouldCacheIgnoreZoom: boolean;
             exportScale: number;
             currentItemArrowType: "sharp" | "round" | "elbow";
+            selectedElementsAreBeingDragged: boolean;
             bindMode: import("@nous-excalidraw/element/types").BindMode;
             gridSize: number;
             contextMenu: {
@@ -110,6 +112,7 @@ fileHandle?: FileSystemFileHandle | null) => Promise<{
             boxSelectionMode: import("../types").BoxSelectionMode;
             bindingPreference: "enabled" | "disabled";
             startBoundElement: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawBindableElement> | null;
+            hoveredFrameId: string | null;
             editingFrame: string | null;
             preferredSelectionTool: {
                 type: "selection" | "lasso";
@@ -148,7 +151,6 @@ fileHandle?: FileSystemFileHandle | null) => Promise<{
             previousSelectedElementIds: {
                 [id: string]: true;
             };
-            selectedElementsAreBeingDragged: boolean;
             toast: {
                 message: React.ReactNode;
                 closable?: boolean;
@@ -221,6 +223,7 @@ fileHandle?: FileSystemFileHandle | null) => Promise<{
             [id: string]: true;
         }>;
         frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
+        hoverOutlineElementId: string | null;
         activeTool: {
             lastActiveTool: import("../types").ActiveTool | null;
             locked: boolean;
@@ -262,6 +265,7 @@ fileHandle?: FileSystemFileHandle | null) => Promise<{
         shouldCacheIgnoreZoom: boolean;
         exportScale: number;
         currentItemArrowType: "sharp" | "round" | "elbow";
+        selectedElementsAreBeingDragged: boolean;
         bindMode: import("@nous-excalidraw/element/types").BindMode;
         gridSize: number;
         contextMenu: {
@@ -276,6 +280,7 @@ fileHandle?: FileSystemFileHandle | null) => Promise<{
         boxSelectionMode: import("../types").BoxSelectionMode;
         bindingPreference: "enabled" | "disabled";
         startBoundElement: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawBindableElement> | null;
+        hoveredFrameId: string | null;
         editingFrame: string | null;
         preferredSelectionTool: {
             type: "selection" | "lasso";
@@ -314,7 +319,6 @@ fileHandle?: FileSystemFileHandle | null) => Promise<{
         previousSelectedElementIds: {
             [id: string]: true;
         };
-        selectedElementsAreBeingDragged: boolean;
         toast: {
             message: React.ReactNode;
             closable?: boolean;

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

@@ -53,6 +53,7 @@ export declare const loadFromJSON: (localAppState: AppState, localElements: read
             [id: string]: true;
         }>;
         frameToHighlight: NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
+        hoverOutlineElementId: string | null;
         activeTool: {
             lastActiveTool: import("../types").ActiveTool | null;
             locked: boolean;
@@ -94,6 +95,7 @@ export declare const loadFromJSON: (localAppState: AppState, localElements: read
         shouldCacheIgnoreZoom: boolean;
         exportScale: number;
         currentItemArrowType: "sharp" | "round" | "elbow";
+        selectedElementsAreBeingDragged: boolean;
         bindMode: import("@nous-excalidraw/element/types").BindMode;
         gridSize: number;
         contextMenu: {
@@ -108,6 +110,7 @@ export declare const loadFromJSON: (localAppState: AppState, localElements: read
         boxSelectionMode: import("../types").BoxSelectionMode;
         bindingPreference: "enabled" | "disabled";
         startBoundElement: NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawBindableElement> | null;
+        hoveredFrameId: string | null;
         editingFrame: string | null;
         preferredSelectionTool: {
             type: "selection" | "lasso";
@@ -146,7 +149,6 @@ export declare const loadFromJSON: (localAppState: AppState, localElements: read
         previousSelectedElementIds: {
             [id: string]: true;
         };
-        selectedElementsAreBeingDragged: boolean;
         toast: {
             message: React.ReactNode;
             closable?: boolean;

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

@@ -1,6 +1,6 @@
 import { getScrollBars } from "../scene/scrollbars";
 import type { InteractiveSceneRenderConfig, RenderableElementsMap } from "../scene/types";
-declare const _renderInteractiveScene: ({ app, canvas, elementsMap, visibleElements, selectedElements, allElementsMap, scale, appState, renderConfig, editorInterface, animationState, deltaTime, }: InteractiveSceneRenderConfig) => {
+declare const _renderInteractiveScene: ({ app, canvas, outlineOverlayCanvas, elementsMap, visibleElements, selectedElements, allElementsMap, scale, appState, renderConfig, editorInterface, animationState, deltaTime, }: InteractiveSceneRenderConfig) => {
     scrollBars?: ReturnType<typeof getScrollBars>;
     atLeastOneVisibleElement: boolean;
     elementsMap: RenderableElementsMap;

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

@@ -74,6 +74,8 @@ export type InteractiveSceneRenderAnimationState = {
 export type InteractiveSceneRenderConfig = {
     app: AppClassProperties;
     canvas: HTMLCanvasElement | null;
+    /** When set, hover outline + selection borders render here so they paint above DOM embeds (iframes). */
+    outlineOverlayCanvas?: HTMLCanvasElement | null;
     elementsMap: RenderableElementsMap;
     visibleElements: readonly NonDeletedExcalidrawElement[];
     selectedElements: readonly NonDeletedExcalidrawElement[];
@@ -125,6 +127,7 @@ export type ElementShapes = {
     rectangle: Drawable;
     ellipse: Drawable;
     diamond: Drawable;
+    triangle: Drawable;
     iframe: Drawable;
     embeddable: Drawable;
     freedraw: (Drawable | SVGPathString)[];

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

@@ -9,4 +9,6 @@ export declare const getStateForZoom: ({ viewportX, viewportY, nextZoom, }: {
     zoom: {
         value: NormalizedZoomValue;
     };
+    currentItemStrokeWidth: number;
+    currentItemFontSize: number;
 };

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

@@ -107,5 +107,5 @@ export declare const getSnapLinesAtPointer: (elements: readonly ExcalidrawElemen
     };
     snapLines: PointerSnapLine[];
 };
-export declare const isActiveToolNonLinearSnappable: (activeToolType: AppState["activeTool"]["type"]) => activeToolType is "text" | "rectangle" | "diamond" | "ellipse" | "image" | "frame" | "magicframe";
+export declare const isActiveToolNonLinearSnappable: (activeToolType: AppState["activeTool"]["type"]) => activeToolType is "text" | "rectangle" | "diamond" | "triangle" | "ellipse" | "image" | "frame" | "magicframe";
 export {};

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

@@ -84,7 +84,7 @@ export type BinaryFileData = {
 };
 export type BinaryFileMetadata = Omit<BinaryFileData, "dataURL">;
 export type BinaryFiles = Record<ExcalidrawElement["id"], BinaryFileData>;
-export type ToolType = "selection" | "lasso" | "rectangle" | "diamond" | "ellipse" | "arrow" | "line" | "freedraw" | "text" | "image" | "eraser" | "hand" | "frame" | "magicframe" | "embeddable" | "laser";
+export type ToolType = "selection" | "lasso" | "rectangle" | "diamond" | "triangle" | "ellipse" | "arrow" | "line" | "freedraw" | "text" | "image" | "eraser" | "hand" | "frame" | "magicframe" | "embeddable" | "laser";
 export type ElementOrToolType = ExcalidrawElementType | ToolType | "custom";
 export type ActiveTool = {
     type: ToolType;
@@ -129,6 +129,7 @@ export type StaticCanvasAppState = Readonly<_CommonCanvasAppState & {
     croppingElementId: AppState["croppingElementId"];
 }>;
 export type InteractiveCanvasAppState = Readonly<_CommonCanvasAppState & {
+    hoverOutlineElementId: AppState["hoverOutlineElementId"];
     activeTool: AppState["activeTool"];
     activeEmbeddable: AppState["activeEmbeddable"];
     selectionElement: AppState["selectionElement"];
@@ -154,6 +155,7 @@ export type InteractiveCanvasAppState = Readonly<_CommonCanvasAppState & {
     shouldCacheIgnoreZoom: AppState["shouldCacheIgnoreZoom"];
     exportScale: AppState["exportScale"];
     currentItemArrowType: AppState["currentItemArrowType"];
+    selectedElementsAreBeingDragged: AppState["selectedElementsAreBeingDragged"];
 }>;
 export type ObservedAppState = ObservedStandaloneAppState & ObservedElementsAppState;
 export type ObservedStandaloneAppState = {
@@ -223,6 +225,13 @@ export interface AppState {
         midPoint?: GlobalPoint;
     } | null;
     frameToHighlight: NonDeleted<ExcalidrawFrameLikeElement> | null;
+    /** Interactive canvas: 2px screen hover outline for frame / image / embeddable */
+    hoverOutlineElementId: string | null;
+    /**
+     * Frame under cursor for unified hover (title + outline): frame rect, label,
+     * or any child inside the frame.
+     */
+    hoveredFrameId: string | null;
     frameRendering: {
         enabled: boolean;
         name: boolean;
@@ -601,6 +610,8 @@ export type AppClassProperties = {
     api: App["api"];
     sessionExportThemeOverride: App["sessionExportThemeOverride"];
     interactiveCanvas: HTMLCanvasElement | null;
+    /** Renders selection/hover outlines above embed layer; pointer-events none */
+    outlineOverlayCanvas: HTMLCanvasElement | null;
     /** static canvas */
     canvas: HTMLCanvasElement;
     focusContainer(): void;

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

@@ -1,5 +1,5 @@
 import { type GlobalPoint, type LocalPoint } from "@nous-excalidraw/math";
-import type { ElementsMap, ExcalidrawBindableElement, ExcalidrawDiamondElement, ExcalidrawElement, ExcalidrawEllipseElement, ExcalidrawEmbeddableElement, ExcalidrawFrameLikeElement, ExcalidrawFreeDrawElement, ExcalidrawIframeElement, ExcalidrawImageElement, ExcalidrawLinearElement, ExcalidrawRectangleElement, ExcalidrawSelectionElement, ExcalidrawTextElement } from "@nous-excalidraw/element/types";
+import type { ElementsMap, ExcalidrawBindableElement, ExcalidrawDiamondElement, ExcalidrawTriangleElement, ExcalidrawElement, ExcalidrawEllipseElement, ExcalidrawEmbeddableElement, ExcalidrawFrameLikeElement, ExcalidrawFreeDrawElement, ExcalidrawIframeElement, ExcalidrawImageElement, ExcalidrawLinearElement, ExcalidrawRectangleElement, ExcalidrawSelectionElement, ExcalidrawTextElement } from "@nous-excalidraw/element/types";
 import type { Curve, LineSegment, Polygon, Radians } from "@nous-excalidraw/math";
 import type { Drawable, Op } from "roughjs/bin/core";
 export type Polyline<Point extends GlobalPoint | LocalPoint> = LineSegment<Point>[];
@@ -29,7 +29,7 @@ export type GeometricShape<Point extends GlobalPoint | LocalPoint> = {
     type: "polycurve";
     data: Polycurve<Point>;
 };
-type RectangularElement = ExcalidrawRectangleElement | ExcalidrawDiamondElement | ExcalidrawFrameLikeElement | ExcalidrawEmbeddableElement | ExcalidrawImageElement | ExcalidrawIframeElement | ExcalidrawTextElement | ExcalidrawSelectionElement;
+type RectangularElement = ExcalidrawRectangleElement | ExcalidrawDiamondElement | ExcalidrawTriangleElement | ExcalidrawFrameLikeElement | ExcalidrawEmbeddableElement | ExcalidrawImageElement | ExcalidrawIframeElement | ExcalidrawTextElement | ExcalidrawSelectionElement;
 export declare const getPolygonShape: <Point extends GlobalPoint | LocalPoint>(element: RectangularElement) => GeometricShape<Point>;
 export declare const getSelectionBoxShape: <Point extends GlobalPoint | LocalPoint>(element: ExcalidrawElement, elementsMap: ElementsMap, padding?: number) => GeometricShape<Point>;
 export declare const getEllipseShape: <Point extends GlobalPoint | LocalPoint>(element: ExcalidrawEllipseElement) => GeometricShape<Point>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nous-excalidraw/math",
-  "version": "0.18.4",
+  "version": "0.18.5-beta.5",
   "type": "module",
   "types": "./dist/types/math/src/index.d.ts",
   "main": "./dist/prod/index.js",
@@ -61,6 +61,6 @@
     "build:esm": "rimraf dist && node ../../scripts/buildBase.js && yarn gen:types"
   },
   "dependencies": {
-    "@nous-excalidraw/common": "0.18.4"
+    "@nous-excalidraw/common": "0.18.5-beta.5"
   }
 }

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

@@ -1,5 +0,0 @@
-import type { Theme } from "@nous-excalidraw/element/types";
-export declare const LoadingMessage: React.FC<{
-    delay?: number;
-    theme?: Theme;
-}>;