@excalidraw/excalidraw 0.17.0-a528769 → 0.17.0-c7ee46e

package/types/data/transform.d.ts

@@ -1,5 +1,5 @@
 import { ElementConstructorOpts } from "../element/newElement";
-import { ExcalidrawBindableElement, ExcalidrawElement, ExcalidrawEmbeddableElement, ExcalidrawFrameElement, ExcalidrawFreeDrawElement, ExcalidrawGenericElement, ExcalidrawImageElement, ExcalidrawLinearElement, ExcalidrawSelectionElement, ExcalidrawTextElement, FileId, FontFamilyValues, TextAlign, VerticalAlign } from "../element/types";
+import { ExcalidrawBindableElement, ExcalidrawElement, ExcalidrawFrameElement, ExcalidrawFreeDrawElement, ExcalidrawGenericElement, ExcalidrawIframeLikeElement, ExcalidrawImageElement, ExcalidrawLinearElement, ExcalidrawMagicFrameElement, ExcalidrawSelectionElement, ExcalidrawTextElement, FileId, FontFamilyValues, TextAlign, VerticalAlign } from "../element/types";
 import { MarkOptional } from "../utility-types";
 export type ValidLinearElement = {
     type: "arrow" | "line";
@@ -13,11 +13,11 @@ export type ValidLinearElement = {
         verticalAlign?: VerticalAlign;
     } & MarkOptional<ElementConstructorOpts, "x" | "y">;
     end?: (({
-        type: Exclude<ExcalidrawBindableElement["type"], "image" | "text" | "frame" | "embeddable">;
+        type: Exclude<ExcalidrawBindableElement["type"], "image" | "text" | "frame" | "magicframe" | "embeddable" | "iframe">;
         id?: ExcalidrawGenericElement["id"];
     } | {
         id: ExcalidrawGenericElement["id"];
-        type?: Exclude<ExcalidrawBindableElement["type"], "image" | "text" | "frame" | "embeddable">;
+        type?: Exclude<ExcalidrawBindableElement["type"], "image" | "text" | "frame" | "magicframe" | "embeddable" | "iframe">;
     }) | (({
         type: "text";
         text: string;
@@ -27,11 +27,11 @@ export type ValidLinearElement = {
         text: string;
     }) & Partial<ExcalidrawTextElement>)) & MarkOptional<ElementConstructorOpts, "x" | "y">;
     start?: (({
-        type: Exclude<ExcalidrawBindableElement["type"], "image" | "text" | "frame" | "embeddable">;
+        type: Exclude<ExcalidrawBindableElement["type"], "image" | "text" | "frame" | "magicframe" | "embeddable" | "iframe">;
         id?: ExcalidrawGenericElement["id"];
     } | {
         id: ExcalidrawGenericElement["id"];
-        type?: Exclude<ExcalidrawBindableElement["type"], "image" | "text" | "frame" | "embeddable">;
+        type?: Exclude<ExcalidrawBindableElement["type"], "image" | "text" | "frame" | "magicframe" | "embeddable" | "iframe">;
     }) | (({
         type: "text";
         text: string;
@@ -52,7 +52,7 @@ export type ValidContainer = {
         verticalAlign?: VerticalAlign;
     } & MarkOptional<ElementConstructorOpts, "x" | "y">;
 } & ElementConstructorOpts;
-export type ExcalidrawElementSkeleton = Extract<Exclude<ExcalidrawElement, ExcalidrawSelectionElement>, ExcalidrawEmbeddableElement | ExcalidrawFreeDrawElement> | ({
+export type ExcalidrawElementSkeleton = Extract<Exclude<ExcalidrawElement, ExcalidrawSelectionElement>, ExcalidrawIframeLikeElement | ExcalidrawFreeDrawElement> | ({
     type: Extract<ExcalidrawLinearElement["type"], "line">;
     x: number;
     y: number;
@@ -71,7 +71,11 @@ export type ExcalidrawElementSkeleton = Extract<Exclude<ExcalidrawElement, Excal
     type: "frame";
     children: readonly ExcalidrawElement["id"][];
     name?: string;
-} & Partial<ExcalidrawFrameElement>);
+} & Partial<ExcalidrawFrameElement>) | ({
+    type: "magicframe";
+    children: readonly ExcalidrawElement["id"][];
+    name?: string;
+} & Partial<ExcalidrawMagicFrameElement>);
 export declare const convertToExcalidrawElements: (elementsSkeleton: ExcalidrawElementSkeleton[] | null, opts?: {
     regenerateIds: boolean;
 }) => ExcalidrawElement[];

package/types/element/ElementCanvasButtons.d.ts

@@ -0,0 +1,6 @@
+import { NonDeletedExcalidrawElement } from "./types";
+import "./ElementCanvasButtons.scss";
+export declare const ElementCanvasButtons: ({ children, element, }: {
+    children: React.ReactNode;
+    element: NonDeletedExcalidrawElement;
+}) => JSX.Element | null;

package/types/element/Hyperlink.d.ts

@@ -39,7 +39,7 @@ export declare const actionLink: {
             isBindingEnabled: boolean;
             startBoundElement: import("./types").NonDeleted<import("./types").ExcalidrawBindableElement> | null;
             suggestedBindings: import("./binding").SuggestedBinding[];
-            frameToHighlight: import("./types").NonDeleted<import("./types").ExcalidrawFrameElement> | null;
+            frameToHighlight: import("./types").NonDeleted<import("./types").ExcalidrawFrameLikeElement> | null;
             frameRendering: {
                 enabled: boolean;
                 name: boolean;
@@ -89,7 +89,7 @@ export declare const actionLink: {
                 name: string;
                 tab?: string | undefined;
             } | null;
-            openDialog: "mermaid" | "imageExport" | "help" | "jsonExport" | null;
+            openDialog: "mermaid" | "magicSettings" | "imageExport" | "help" | "jsonExport" | null;
             defaultSidebarDockedPreference: boolean;
             lastPointerDownWith: import("./types").PointerType;
             selectedElementIds: Readonly<{

package/types/element/collision.d.ts

@@ -1,5 +1,5 @@
 import * as GA from "../ga";
-import { NonDeletedExcalidrawElement, ExcalidrawBindableElement, ExcalidrawElement, ExcalidrawRectangleElement, ExcalidrawEmbeddableElement, ExcalidrawDiamondElement, ExcalidrawTextElement, ExcalidrawEllipseElement, NonDeleted, ExcalidrawImageElement, ExcalidrawFrameElement } from "./types";
+import { NonDeletedExcalidrawElement, ExcalidrawBindableElement, ExcalidrawElement, ExcalidrawRectangleElement, ExcalidrawDiamondElement, ExcalidrawTextElement, ExcalidrawEllipseElement, NonDeleted, ExcalidrawImageElement, ExcalidrawFrameLikeElement, ExcalidrawIframeLikeElement } from "./types";
 import { FrameNameBoundsCache, Point } from "../types";
 import { AppState } from "../types";
 export declare const hitTest: (element: NonDeletedExcalidrawElement, appState: AppState, frameNameBoundsCache: FrameNameBoundsCache, x: number, y: number) => boolean;
@@ -18,4 +18,4 @@ export declare const determineFocusPoint: (element: ExcalidrawBindableElement, f
 export declare const intersectElementWithLine: (element: ExcalidrawBindableElement, a: readonly [number, number], b: readonly [number, number], gap?: number) => Point[];
 export declare const getCircleIntersections: (center: readonly [number, number, number, number, number, number, number, number], radius: number, line: readonly [number, number, number, number, number, number, number, number]) => GA.Point[];
 export declare const findFocusPointForEllipse: (ellipse: ExcalidrawEllipseElement, relativeDistance: number, point: readonly [number, number, number, number, number, number, number, number]) => readonly [number, number, number, number, number, number, number, number];
-export declare const findFocusPointForRectangulars: (element: ExcalidrawRectangleElement | ExcalidrawImageElement | ExcalidrawDiamondElement | ExcalidrawTextElement | ExcalidrawEmbeddableElement | ExcalidrawFrameElement, relativeDistance: number, point: readonly [number, number, number, number, number, number, number, number]) => readonly [number, number, number, number, number, number, number, number];
+export declare const findFocusPointForRectangulars: (element: ExcalidrawRectangleElement | ExcalidrawImageElement | ExcalidrawDiamondElement | ExcalidrawTextElement | ExcalidrawIframeLikeElement | ExcalidrawFrameLikeElement, relativeDistance: number, point: readonly [number, number, number, number, number, number, number, number]) => readonly [number, number, number, number, number, number, number, number];

package/types/element/embeddable.d.ts

@@ -1,21 +1,9 @@
 import { ExcalidrawProps } from "../types";
-import { ExcalidrawElement, ExcalidrawEmbeddableElement, NonDeletedExcalidrawElement, Theme } from "./types";
-type EmbeddedLink = ({
-    aspectRatio: {
-        w: number;
-        h: number;
-    };
-    warning?: string;
-} & ({
-    type: "video" | "generic";
-    link: string;
-} | {
-    type: "document";
-    srcdoc: (theme: Theme) => string;
-})) | null;
-export declare const getEmbedLink: (link: string | null | undefined) => EmbeddedLink;
-export declare const isEmbeddableOrLabel: (element: NonDeletedExcalidrawElement) => Boolean;
-export declare const createPlaceholderEmbeddableLabel: (element: ExcalidrawEmbeddableElement) => ExcalidrawElement;
+import { ExcalidrawElement, ExcalidrawIframeLikeElement, IframeData, NonDeletedExcalidrawElement } from "./types";
+export declare const createSrcDoc: (body: string) => string;
+export declare const getEmbedLink: (link: string | null | undefined) => IframeData | null;
+export declare const isIframeLikeOrItsLabel: (element: NonDeletedExcalidrawElement) => Boolean;
+export declare const createPlaceholderEmbeddableLabel: (element: ExcalidrawIframeLikeElement) => ExcalidrawElement;
 export declare const actionSetEmbeddableAsActiveTool: {
     name: "setEmbeddableAsActiveTool";
     trackEvent: {
@@ -47,7 +35,7 @@ export declare const actionSetEmbeddableAsActiveTool: {
             isBindingEnabled: boolean;
             startBoundElement: import("./types").NonDeleted<import("./types").ExcalidrawBindableElement> | null;
             suggestedBindings: import("./binding").SuggestedBinding[];
-            frameToHighlight: import("./types").NonDeleted<import("./types").ExcalidrawFrameElement> | null;
+            frameToHighlight: import("./types").NonDeleted<import("./types").ExcalidrawFrameLikeElement> | null;
             frameRendering: {
                 enabled: boolean;
                 name: boolean;
@@ -94,7 +82,7 @@ export declare const actionSetEmbeddableAsActiveTool: {
                 name: string;
                 tab?: string | undefined;
             } | null;
-            openDialog: "mermaid" | "imageExport" | "help" | "jsonExport" | null;
+            openDialog: "mermaid" | "magicSettings" | "imageExport" | "help" | "jsonExport" | null;
             defaultSidebarDockedPreference: boolean;
             lastPointerDownWith: import("./types").PointerType;
             selectedElementIds: Readonly<{
@@ -111,7 +99,7 @@ export declare const actionSetEmbeddableAsActiveTool: {
                 duration?: number | undefined;
             } | null;
             zenModeEnabled: boolean;
-            theme: Theme;
+            theme: import("./types").Theme;
             gridSize: number | null;
             viewModeEnabled: boolean;
             selectedGroupIds: {
@@ -150,4 +138,3 @@ export declare const actionSetEmbeddableAsActiveTool: {
 };
 export declare const extractSrc: (htmlString: string) => string;
 export declare const embeddableURLValidator: (url: string | null | undefined, validateEmbeddable: ExcalidrawProps["validateEmbeddable"]) => boolean;
-export {};

package/types/element/index.d.ts

@@ -1,4 +1,4 @@
-import { ExcalidrawElement, NonDeletedExcalidrawElement, NonDeleted, ExcalidrawFrameElement } from "./types";
+import { ExcalidrawElement, NonDeletedExcalidrawElement, NonDeleted } from "./types";
 export { newElement, newTextElement, updateTextElement, refreshTextDimensions, newLinearElement, newImageElement, duplicateElement, } from "./newElement";
 export { getElementAbsoluteCoords, getElementBounds, getCommonBounds, getDiamondPoints, getArrowheadPoints, getClosestElementBounds, } from "./bounds";
 export { OMIT_SIDES_FOR_MULTIPLE_ELEMENTS, getTransformHandlesFromCoords, getTransformHandles, } from "./transformHandles";
@@ -6,15 +6,14 @@ export { hitTest, isHittingElementBoundingBoxWithoutHittingElement, } from "./co
 export { resizeTest, getCursorForResizingElement, getElementWithTransformHandleType, getTransformHandleTypeFromCoords, } from "./resizeTest";
 export { transformElements, getResizeOffsetXY, getResizeArrowDirection, } from "./resizeElements";
 export { dragSelectedElements, getDragOffsetXY, dragNewElement, } from "./dragElements";
-export { isTextElement, isExcalidrawElement, isFrameElement, } from "./typeChecks";
+export { isTextElement, isExcalidrawElement } from "./typeChecks";
 export { textWysiwyg } from "./textWysiwyg";
 export { redrawTextBoundingBox } from "./textElement";
 export { getPerfectElementSize, getLockedLinearCursorAlignSize, isInvisiblySmallElement, resizePerfectLineForNWHandler, getNormalizedDimensions, } from "./sizeHelpers";
 export { showSelectedShapeActions } from "./showSelectedShapeActions";
 export declare const getSceneVersion: (elements: readonly ExcalidrawElement[]) => number;
 export declare const getVisibleElements: (elements: readonly ExcalidrawElement[]) => readonly NonDeletedExcalidrawElement[];
-export declare const getNonDeletedElements: (elements: readonly ExcalidrawElement[]) => readonly NonDeletedExcalidrawElement[];
-export declare const getNonDeletedFrames: (frames: readonly ExcalidrawFrameElement[]) => readonly NonDeleted<ExcalidrawFrameElement>[];
+export declare const getNonDeletedElements: <T extends ExcalidrawElement>(elements: readonly T[]) => readonly NonDeleted<T>[];
 export declare const isNonDeletedElement: <T extends ExcalidrawElement>(element: T) => element is NonDeleted<T>;
 export declare const clearElementsForDatabase: (elements: readonly ExcalidrawElement[]) => ExcalidrawElement[];
 export declare const clearElementsForExport: (elements: readonly ExcalidrawElement[]) => ExcalidrawElement[];

package/types/element/linearElementEditor.d.ts

@@ -126,7 +126,7 @@ export declare class LinearElementEditor {
             contextMenu: {
                 items: import("../components/ContextMenu").ContextMenuItems;
                 top: number;
-                left: number;
+                left: number; /** @returns whether point was dragged */
             } | null;
             showWelcomeScreen: boolean;
             isLoading: boolean;
@@ -142,7 +142,7 @@ export declare class LinearElementEditor {
             isBindingEnabled: boolean;
             startBoundElement: NonDeleted<ExcalidrawBindableElement> | null;
             suggestedBindings: import("./binding").SuggestedBinding[];
-            frameToHighlight: NonDeleted<import("./types").ExcalidrawFrameElement> | null;
+            frameToHighlight: NonDeleted<import("./types").ExcalidrawFrameLikeElement> | null;
             frameRendering: {
                 enabled: boolean;
                 name: boolean;
@@ -192,7 +192,7 @@ export declare class LinearElementEditor {
                 name: string;
                 tab?: string | undefined;
             } | null;
-            openDialog: "mermaid" | "imageExport" | "help" | "jsonExport" | null;
+            openDialog: "mermaid" | "magicSettings" | "imageExport" | "help" | "jsonExport" | null;
             defaultSidebarDockedPreference: boolean;
             lastPointerDownWith: import("./types").PointerType;
             selectedElementIds: Readonly<{

package/types/element/newElement.d.ts

@@ -1,4 +1,4 @@
-import { ExcalidrawElement, ExcalidrawImageElement, ExcalidrawTextElement, ExcalidrawLinearElement, ExcalidrawGenericElement, NonDeleted, TextAlign, GroupId, VerticalAlign, Arrowhead, ExcalidrawFreeDrawElement, FontFamilyValues, ExcalidrawTextContainer, ExcalidrawFrameElement, ExcalidrawEmbeddableElement } from "../element/types";
+import { ExcalidrawElement, ExcalidrawImageElement, ExcalidrawTextElement, ExcalidrawLinearElement, ExcalidrawGenericElement, NonDeleted, TextAlign, GroupId, VerticalAlign, Arrowhead, ExcalidrawFreeDrawElement, FontFamilyValues, ExcalidrawTextContainer, ExcalidrawFrameElement, ExcalidrawEmbeddableElement, ExcalidrawMagicFrameElement, ExcalidrawIframeElement } from "../element/types";
 import { AppState } from "../types";
 import { MarkOptional, Mutable } from "../utility-types";
 export type ElementConstructorOpts = MarkOptional<Omit<ExcalidrawGenericElement, "id" | "type" | "isDeleted" | "updated">, "width" | "height" | "angle" | "groupIds" | "frameId" | "boundElements" | "seed" | "version" | "versionNonce" | "link" | "strokeStyle" | "fillStyle" | "strokeColor" | "backgroundColor" | "roughness" | "strokeWidth" | "roundness" | "locked" | "opacity">;
@@ -9,9 +9,15 @@ export declare const newEmbeddableElement: (opts: {
     type: "embeddable";
     validated: ExcalidrawEmbeddableElement["validated"];
 } & ElementConstructorOpts) => NonDeleted<ExcalidrawEmbeddableElement>;
+export declare const newIframeElement: (opts: {
+    type: "iframe";
+} & ElementConstructorOpts) => NonDeleted<ExcalidrawIframeElement>;
 export declare const newFrameElement: (opts: {
     name?: string;
 } & ElementConstructorOpts) => NonDeleted<ExcalidrawFrameElement>;
+export declare const newMagicFrameElement: (opts: {
+    name?: string;
+} & ElementConstructorOpts) => NonDeleted<ExcalidrawMagicFrameElement>;
 export declare const newTextElement: (opts: {
     text: string;
     fontSize?: number;

package/types/element/textElement.d.ts

@@ -1,4 +1,4 @@
-import { ExcalidrawElement, ExcalidrawTextContainer, ExcalidrawTextElement, ExcalidrawTextElementWithContainer, FontFamilyValues, FontString, NonDeletedExcalidrawElement } from "./types";
+import { ExcalidrawElement, ExcalidrawElementType, ExcalidrawTextContainer, ExcalidrawTextElement, ExcalidrawTextElementWithContainer, FontFamilyValues, FontString, NonDeletedExcalidrawElement } from "./types";
 import { MaybeTransformHandleType } from "./transformHandles";
 import { AppState } from "../types";
 import { ExtractSetType } from "../utility-types";
@@ -66,7 +66,7 @@ export declare const suppportsHorizontalAlign: (selectedElements: NonDeletedExca
 export declare const getTextBindableContainerAtPosition: (elements: readonly ExcalidrawElement[], appState: AppState, x: number, y: number) => ExcalidrawTextContainer | null;
 declare const VALID_CONTAINER_TYPES: Set<string>;
 export declare const isValidTextContainer: (element: {
-    type: ExcalidrawElement["type"];
+    type: ExcalidrawElementType;
 }) => boolean;
 export declare const computeContainerDimensionForBoundText: (dimension: number, containerType: ExtractSetType<typeof VALID_CONTAINER_TYPES>) => number;
 export declare const getBoundTextMaxWidth: (container: ExcalidrawElement, boundTextElement?: ExcalidrawTextElement | null) => number;

package/types/element/typeChecks.d.ts

@@ -1,19 +1,22 @@
-import { AppState } from "../types";
+import { ElementOrToolType } from "../types";
 import { MarkNonNullable } from "../utility-types";
-import { ExcalidrawElement, ExcalidrawTextElement, ExcalidrawEmbeddableElement, ExcalidrawLinearElement, ExcalidrawBindableElement, ExcalidrawGenericElement, ExcalidrawFreeDrawElement, InitializedExcalidrawImageElement, ExcalidrawImageElement, ExcalidrawTextElementWithContainer, ExcalidrawTextContainer, ExcalidrawFrameElement, RoundnessType } from "./types";
-export declare const isGenericElement: (element: ExcalidrawElement | null) => element is ExcalidrawGenericElement;
+import { ExcalidrawElement, ExcalidrawTextElement, ExcalidrawEmbeddableElement, ExcalidrawLinearElement, ExcalidrawBindableElement, ExcalidrawFreeDrawElement, InitializedExcalidrawImageElement, ExcalidrawImageElement, ExcalidrawTextElementWithContainer, ExcalidrawTextContainer, ExcalidrawFrameElement, RoundnessType, ExcalidrawFrameLikeElement, ExcalidrawElementType, ExcalidrawIframeElement, ExcalidrawIframeLikeElement, ExcalidrawMagicFrameElement } from "./types";
 export declare const isInitializedImageElement: (element: ExcalidrawElement | null) => element is InitializedExcalidrawImageElement;
 export declare const isImageElement: (element: ExcalidrawElement | null) => element is ExcalidrawImageElement;
 export declare const isEmbeddableElement: (element: ExcalidrawElement | null | undefined) => element is ExcalidrawEmbeddableElement;
+export declare const isIframeElement: (element: ExcalidrawElement | null) => element is ExcalidrawIframeElement;
+export declare const isIframeLikeElement: (element: ExcalidrawElement | null) => element is ExcalidrawIframeLikeElement;
 export declare const isTextElement: (element: ExcalidrawElement | null) => element is ExcalidrawTextElement;
 export declare const isFrameElement: (element: ExcalidrawElement | null) => element is ExcalidrawFrameElement;
+export declare const isMagicFrameElement: (element: ExcalidrawElement | null) => element is ExcalidrawMagicFrameElement;
+export declare const isFrameLikeElement: (element: ExcalidrawElement | null) => element is ExcalidrawFrameLikeElement;
 export declare const isFreeDrawElement: (element?: ExcalidrawElement | null) => element is ExcalidrawFreeDrawElement;
-export declare const isFreeDrawElementType: (elementType: ExcalidrawElement["type"]) => boolean;
+export declare const isFreeDrawElementType: (elementType: ExcalidrawElementType) => boolean;
 export declare const isLinearElement: (element?: ExcalidrawElement | null) => element is ExcalidrawLinearElement;
 export declare const isArrowElement: (element?: ExcalidrawElement | null) => element is ExcalidrawLinearElement;
-export declare const isLinearElementType: (elementType: AppState["activeTool"]["type"]) => boolean;
+export declare const isLinearElementType: (elementType: ElementOrToolType) => boolean;
 export declare const isBindingElement: (element?: ExcalidrawElement | null, includeLocked?: boolean) => element is ExcalidrawLinearElement;
-export declare const isBindingElementType: (elementType: AppState["activeTool"]["type"]) => boolean;
+export declare const isBindingElementType: (elementType: ElementOrToolType) => boolean;
 export declare const isBindableElement: (element: ExcalidrawElement | null, includeLocked?: boolean) => element is ExcalidrawBindableElement;
 export declare const isTextBindableContainer: (element: ExcalidrawElement | null, includeLocked?: boolean) => element is ExcalidrawTextContainer;
 export declare const isExcalidrawElement: (element: any) => element is ExcalidrawElement;

package/types/element/types.d.ts

@@ -1,6 +1,7 @@
 import { Point } from "../types";
 import { FONT_FAMILY, ROUNDNESS, TEXT_ALIGN, THEME, VERTICAL_ALIGN } from "../constants";
 import { MarkNonNullable, ValueOf } from "../utility-types";
+import { MagicCacheData } from "../data/magic";
 export type ChartType = "bar" | "line";
 export type FillStyle = "hachure" | "cross-hatch" | "solid" | "zigzag";
 export type FontFamilyKeys = keyof typeof FONT_FAMILY;
@@ -84,6 +85,26 @@ export type ExcalidrawEmbeddableElement = _ExcalidrawElementBase & Readonly<{
      */
     validated: boolean | null;
 }>;
+export type ExcalidrawIframeElement = _ExcalidrawElementBase & Readonly<{
+    type: "iframe";
+    customData?: {
+        generationData?: MagicCacheData;
+    };
+}>;
+export type ExcalidrawIframeLikeElement = ExcalidrawIframeElement | ExcalidrawEmbeddableElement;
+export type IframeData = ({
+    intrinsicSize: {
+        w: number;
+        h: number;
+    };
+    warning?: string;
+} & ({
+    type: "video" | "generic";
+    link: string;
+} | {
+    type: "document";
+    srcdoc: (theme: Theme) => string;
+}));
 export type ExcalidrawImageElement = _ExcalidrawElementBase & Readonly<{
     type: "image";
     fileId: FileId | null;
@@ -97,6 +118,11 @@ export type ExcalidrawFrameElement = _ExcalidrawElementBase & {
     type: "frame";
     name: string | null;
 };
+export type ExcalidrawMagicFrameElement = _ExcalidrawElementBase & {
+    type: "magicframe";
+    name: string | null;
+};
+export type ExcalidrawFrameLikeElement = ExcalidrawFrameElement | ExcalidrawMagicFrameElement;
 /**
  * These are elements that don't have any additional properties.
  */
@@ -106,7 +132,7 @@ export type ExcalidrawGenericElement = ExcalidrawSelectionElement | ExcalidrawRe
  * no computed data. The list of all ExcalidrawElements should be shareable
  * between peers and contain no state local to the peer.
  */
-export type ExcalidrawElement = ExcalidrawGenericElement | ExcalidrawTextElement | ExcalidrawLinearElement | ExcalidrawFreeDrawElement | ExcalidrawImageElement | ExcalidrawFrameElement | ExcalidrawEmbeddableElement;
+export type ExcalidrawElement = ExcalidrawGenericElement | ExcalidrawTextElement | ExcalidrawLinearElement | ExcalidrawFreeDrawElement | ExcalidrawImageElement | ExcalidrawFrameElement | ExcalidrawMagicFrameElement | ExcalidrawIframeElement | ExcalidrawEmbeddableElement;
 export type NonDeleted<TElement extends ExcalidrawElement> = TElement & {
     isDeleted: boolean;
 };
@@ -129,7 +155,7 @@ export type ExcalidrawTextElement = _ExcalidrawElementBase & Readonly<{
         _brand: "unitlessLineHeight";
     };
 }>;
-export type ExcalidrawBindableElement = ExcalidrawRectangleElement | ExcalidrawDiamondElement | ExcalidrawEllipseElement | ExcalidrawTextElement | ExcalidrawImageElement | ExcalidrawEmbeddableElement | ExcalidrawFrameElement;
+export type ExcalidrawBindableElement = ExcalidrawRectangleElement | ExcalidrawDiamondElement | ExcalidrawEllipseElement | ExcalidrawTextElement | ExcalidrawImageElement | ExcalidrawIframeElement | ExcalidrawEmbeddableElement | ExcalidrawFrameElement | ExcalidrawMagicFrameElement;
 export type ExcalidrawTextContainer = ExcalidrawRectangleElement | ExcalidrawDiamondElement | ExcalidrawEllipseElement | ExcalidrawArrowElement;
 export type ExcalidrawTextElementWithContainer = {
     containerId: ExcalidrawTextContainer["id"];
@@ -162,4 +188,5 @@ export type ExcalidrawFreeDrawElement = _ExcalidrawElementBase & Readonly<{
 export type FileId = string & {
     _brand: "FileId";
 };
+export type ExcalidrawElementType = ExcalidrawElement["type"];
 export {};

package/types/frame.d.ts

@@ -1,25 +1,25 @@
-import { ExcalidrawElement, ExcalidrawFrameElement, NonDeleted, NonDeletedExcalidrawElement } from "./element/types";
+import { ExcalidrawElement, ExcalidrawFrameLikeElement, NonDeleted, NonDeletedExcalidrawElement } from "./element/types";
 import { AppClassProperties, AppState, StaticCanvasAppState } from "./types";
 import { ExcalidrawElementsIncludingDeleted } from "./scene/Scene";
 export declare const bindElementsToFramesAfterDuplication: (nextElements: ExcalidrawElement[], oldElements: readonly ExcalidrawElement[], oldIdToDuplicatedId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>) => void;
-export declare function isElementIntersectingFrame(element: ExcalidrawElement, frame: ExcalidrawFrameElement): boolean;
-export declare const getElementsCompletelyInFrame: (elements: readonly ExcalidrawElement[], frame: ExcalidrawFrameElement) => ExcalidrawElement[];
-export declare const isElementContainingFrame: (elements: readonly ExcalidrawElement[], element: ExcalidrawElement, frame: ExcalidrawFrameElement) => boolean;
-export declare const getElementsIntersectingFrame: (elements: readonly ExcalidrawElement[], frame: ExcalidrawFrameElement) => ExcalidrawElement[];
-export declare const elementsAreInFrameBounds: (elements: readonly ExcalidrawElement[], frame: ExcalidrawFrameElement) => boolean;
-export declare const elementOverlapsWithFrame: (element: ExcalidrawElement, frame: ExcalidrawFrameElement) => boolean;
+export declare function isElementIntersectingFrame(element: ExcalidrawElement, frame: ExcalidrawFrameLikeElement): boolean;
+export declare const getElementsCompletelyInFrame: (elements: readonly ExcalidrawElement[], frame: ExcalidrawFrameLikeElement) => ExcalidrawElement[];
+export declare const isElementContainingFrame: (elements: readonly ExcalidrawElement[], element: ExcalidrawElement, frame: ExcalidrawFrameLikeElement) => boolean;
+export declare const getElementsIntersectingFrame: (elements: readonly ExcalidrawElement[], frame: ExcalidrawFrameLikeElement) => ExcalidrawElement[];
+export declare const elementsAreInFrameBounds: (elements: readonly ExcalidrawElement[], frame: ExcalidrawFrameLikeElement) => boolean;
+export declare const elementOverlapsWithFrame: (element: ExcalidrawElement, frame: ExcalidrawFrameLikeElement) => boolean;
 export declare const isCursorInFrame: (cursorCoords: {
     x: number;
     y: number;
-}, frame: NonDeleted<ExcalidrawFrameElement>) => boolean;
-export declare const groupsAreAtLeastIntersectingTheFrame: (elements: readonly NonDeletedExcalidrawElement[], groupIds: readonly string[], frame: ExcalidrawFrameElement) => boolean;
-export declare const groupsAreCompletelyOutOfFrame: (elements: readonly NonDeletedExcalidrawElement[], groupIds: readonly string[], frame: ExcalidrawFrameElement) => boolean;
+}, frame: NonDeleted<ExcalidrawFrameLikeElement>) => boolean;
+export declare const groupsAreAtLeastIntersectingTheFrame: (elements: readonly NonDeletedExcalidrawElement[], groupIds: readonly string[], frame: ExcalidrawFrameLikeElement) => boolean;
+export declare const groupsAreCompletelyOutOfFrame: (elements: readonly NonDeletedExcalidrawElement[], groupIds: readonly string[], frame: ExcalidrawFrameLikeElement) => boolean;
 /**
  * Returns a map of frameId to frame elements. Includes empty frames.
  */
-export declare const groupByFrames: (elements: readonly ExcalidrawElement[]) => Map<string, ExcalidrawElement[]>;
+export declare const groupByFrameLikes: (elements: readonly ExcalidrawElement[]) => Map<string, ExcalidrawElement[]>;
 export declare const getFrameChildren: (allElements: ExcalidrawElementsIncludingDeleted, frameId: string) => ExcalidrawElement[];
-export declare const getFrameElements: (allElements: ExcalidrawElementsIncludingDeleted) => ExcalidrawFrameElement[];
+export declare const getFrameLikeElements: (allElements: ExcalidrawElementsIncludingDeleted) => ExcalidrawFrameLikeElement[];
 /**
  * Returns ExcalidrawFrameElements and non-frame-children elements.
  *
@@ -29,28 +29,29 @@ export declare const getFrameElements: (allElements: ExcalidrawElementsIncluding
  * Considers non-frame bound elements (container or arrow labels) as root.
  */
 export declare const getRootElements: (allElements: ExcalidrawElementsIncludingDeleted) => ExcalidrawElement[];
-export declare const getElementsInResizingFrame: (allElements: ExcalidrawElementsIncludingDeleted, frame: ExcalidrawFrameElement, appState: AppState) => ExcalidrawElement[];
-export declare const getElementsInNewFrame: (allElements: ExcalidrawElementsIncludingDeleted, frame: ExcalidrawFrameElement) => ExcalidrawElement[];
-export declare const getContainingFrame: (element: ExcalidrawElement, elementsMap?: Map<string, ExcalidrawElement>) => ExcalidrawFrameElement | null;
+export declare const getElementsInResizingFrame: (allElements: ExcalidrawElementsIncludingDeleted, frame: ExcalidrawFrameLikeElement, appState: AppState) => ExcalidrawElement[];
+export declare const getElementsInNewFrame: (allElements: ExcalidrawElementsIncludingDeleted, frame: ExcalidrawFrameLikeElement) => ExcalidrawElement[];
+export declare const getContainingFrame: (element: ExcalidrawElement, elementsMap?: Map<string, ExcalidrawElement>) => ExcalidrawFrameLikeElement | null;
 /**
  * Retains (or repairs for target frame) the ordering invriant where children
  * elements come right before the parent frame:
  * [el, el, child, child, frame, el]
  */
-export declare const addElementsToFrame: (allElements: ExcalidrawElementsIncludingDeleted, elementsToAdd: NonDeletedExcalidrawElement[], frame: ExcalidrawFrameElement) => ExcalidrawElement[];
+export declare const addElementsToFrame: (allElements: ExcalidrawElementsIncludingDeleted, elementsToAdd: NonDeletedExcalidrawElement[], frame: ExcalidrawFrameLikeElement) => ExcalidrawElement[];
 export declare const removeElementsFromFrame: (allElements: ExcalidrawElementsIncludingDeleted, elementsToRemove: NonDeletedExcalidrawElement[], appState: AppState) => ExcalidrawElement[];
-export declare const removeAllElementsFromFrame: (allElements: ExcalidrawElementsIncludingDeleted, frame: ExcalidrawFrameElement, appState: AppState) => ExcalidrawElement[];
-export declare const replaceAllElementsInFrame: (allElements: ExcalidrawElementsIncludingDeleted, nextElementsInFrame: ExcalidrawElement[], frame: ExcalidrawFrameElement, appState: AppState) => ExcalidrawElement[];
+export declare const removeAllElementsFromFrame: (allElements: ExcalidrawElementsIncludingDeleted, frame: ExcalidrawFrameLikeElement, appState: AppState) => ExcalidrawElement[];
+export declare const replaceAllElementsInFrame: (allElements: ExcalidrawElementsIncludingDeleted, nextElementsInFrame: ExcalidrawElement[], frame: ExcalidrawFrameLikeElement, appState: AppState) => ExcalidrawElement[];
 /** does not mutate elements, but returns new ones */
 export declare const updateFrameMembershipOfSelectedElements: (allElements: ExcalidrawElementsIncludingDeleted, appState: AppState, app: AppClassProperties) => ExcalidrawElementsIncludingDeleted;
 /**
  * filters out elements that are inside groups that contain a frame element
  * anywhere in the group tree
  */
-export declare const omitGroupsContainingFrames: (allElements: ExcalidrawElementsIncludingDeleted, selectedElements?: readonly ExcalidrawElement[]) => ExcalidrawElement[];
+export declare const omitGroupsContainingFrameLikes: (allElements: ExcalidrawElementsIncludingDeleted, selectedElements?: readonly ExcalidrawElement[]) => ExcalidrawElement[];
 /**
  * depending on the appState, return target frame, which is the frame the given element
  * is going to be added to or remove from
  */
-export declare const getTargetFrame: (element: ExcalidrawElement, appState: StaticCanvasAppState) => ExcalidrawFrameElement | null;
+export declare const getTargetFrame: (element: ExcalidrawElement, appState: StaticCanvasAppState) => import("./element/types").ExcalidrawFrameElement | import("./element/types").ExcalidrawMagicFrameElement | null;
 export declare const isElementInFrame: (element: ExcalidrawElement, allElements: ExcalidrawElementsIncludingDeleted, appState: StaticCanvasAppState) => boolean;
+export declare const getFrameLikeTitle: (element: ExcalidrawFrameLikeElement, frameIdx: number) => string;

package/types/packages/utils.d.ts

@@ -1,5 +1,5 @@
 import { AppState, BinaryFiles } from "../types";
-import { ExcalidrawElement, ExcalidrawFrameElement, NonDeleted } from "../element/types";
+import { ExcalidrawElement, ExcalidrawFrameLikeElement, NonDeleted } from "../element/types";
 import { MIME_TYPES } from "../constants";
 export { MIME_TYPES };
 type ExportOpts = {
@@ -7,7 +7,7 @@ type ExportOpts = {
     appState?: Partial<Omit<AppState, "offsetTop" | "offsetLeft">>;
     files: BinaryFiles | null;
     maxWidthOrHeight?: number;
-    exportingFrame?: ExcalidrawFrameElement | null;
+    exportingFrame?: ExcalidrawFrameLikeElement | null;
     getDimensions?: (width: number, height: number) => {
         width: number;
         height: number;

package/types/scene/Scene.d.ts

@@ -1,4 +1,4 @@
-import { ExcalidrawElement, NonDeletedExcalidrawElement, NonDeleted, ExcalidrawFrameElement } from "../element/types";
+import { ExcalidrawElement, NonDeletedExcalidrawElement, NonDeleted, ExcalidrawFrameLikeElement } from "../element/types";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { AppState } from "../types";
 type ElementIdKey = InstanceType<typeof LinearElementEditor>["elementId"];
@@ -19,14 +19,14 @@ declare class Scene {
     private callbacks;
     private nonDeletedElements;
     private elements;
-    private nonDeletedFrames;
+    private nonDeletedFramesLikes;
     private frames;
     private elementsMap;
     private selectedElementsCache;
     private versionNonce;
     getElementsIncludingDeleted(): readonly ExcalidrawElement[];
     getNonDeletedElements(): readonly NonDeletedExcalidrawElement[];
-    getFramesIncludingDeleted(): readonly ExcalidrawFrameElement[];
+    getFramesIncludingDeleted(): readonly ExcalidrawFrameLikeElement[];
     getSelectedElements(opts: {
         selectedElementIds: AppState["selectedElementIds"];
         /**
@@ -38,7 +38,7 @@ declare class Scene {
         includeBoundTextElement?: boolean;
         includeElementsInFrames?: boolean;
     }): NonDeleted<ExcalidrawElement>[];
-    getNonDeletedFrames(): readonly NonDeleted<ExcalidrawFrameElement>[];
+    getNonDeletedFramesLikes(): readonly NonDeleted<ExcalidrawFrameLikeElement>[];
     getElement<T extends ExcalidrawElement>(id: T["id"]): T | null;
     getVersionNonce(): number | undefined;
     getNonDeletedElement(id: ExcalidrawElement["id"]): NonDeleted<ExcalidrawElement> | null;

package/types/scene/ShapeCache.d.ts

@@ -16,5 +16,5 @@ export declare class ShapeCache {
      * Generates & caches shape for element if not already cached, otherwise
      * returns cached shape.
      */
-    static generateElementShape: <T extends import("../element/types").ExcalidrawLinearElement | import("../element/types").ExcalidrawRectangleElement | import("../element/types").ExcalidrawDiamondElement | import("../element/types").ExcalidrawEllipseElement | import("../element/types").ExcalidrawEmbeddableElement | import("../element/types").ExcalidrawImageElement | import("../element/types").ExcalidrawFrameElement | import("../element/types").ExcalidrawTextElement | import("../element/types").ExcalidrawFreeDrawElement>(element: T, isExporting?: boolean) => ((T["type"] extends keyof ElementShapes ? ElementShapes[T["type"]] | undefined : ElementShape | undefined) & ({} | null)) | (T["type"] extends keyof ElementShapes ? ElementShapes[T["type"]] : Drawable | null);
+    static generateElementShape: <T extends import("../element/types").ExcalidrawLinearElement | import("../element/types").ExcalidrawRectangleElement | import("../element/types").ExcalidrawDiamondElement | import("../element/types").ExcalidrawEllipseElement | import("../element/types").ExcalidrawEmbeddableElement | import("../element/types").ExcalidrawIframeElement | import("../element/types").ExcalidrawImageElement | import("../element/types").ExcalidrawFrameElement | import("../element/types").ExcalidrawMagicFrameElement | import("../element/types").ExcalidrawTextElement | import("../element/types").ExcalidrawFreeDrawElement>(element: T, isExporting?: boolean) => ((T["type"] extends keyof ElementShapes ? ElementShapes[T["type"]] | undefined : ElementShape | undefined) & ({} | null)) | (T["type"] extends keyof ElementShapes ? ElementShapes[T["type"]] : Drawable | null);
 }

package/types/scene/comparisons.d.ts

@@ -1,9 +1,10 @@
 import { NonDeletedExcalidrawElement } from "../element/types";
-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 canChangeRoundness: (type: string) => boolean;
-export declare const canHaveArrowheads: (type: string) => boolean;
+import { ElementOrToolType } from "../types";
+export declare const hasBackground: (type: ElementOrToolType) => boolean;
+export declare const hasStrokeColor: (type: ElementOrToolType) => boolean;
+export declare const hasStrokeWidth: (type: ElementOrToolType) => boolean;
+export declare const hasStrokeStyle: (type: ElementOrToolType) => boolean;
+export declare const canChangeRoundness: (type: ElementOrToolType) => boolean;
+export declare const canHaveArrowheads: (type: ElementOrToolType) => boolean;
 export declare const getElementAtPosition: (elements: readonly NonDeletedExcalidrawElement[], isAtPositionFn: (element: NonDeletedExcalidrawElement) => boolean) => NonDeletedExcalidrawElement | null;
 export declare const getElementsAtPosition: (elements: readonly NonDeletedExcalidrawElement[], isAtPositionFn: (element: NonDeletedExcalidrawElement) => boolean) => NonDeletedExcalidrawElement[];

package/types/scene/export.d.ts

@@ -1,10 +1,10 @@
-import { ExcalidrawFrameElement, NonDeletedExcalidrawElement } from "../element/types";
+import { ExcalidrawFrameLikeElement, NonDeletedExcalidrawElement } from "../element/types";
 import { AppState, BinaryFiles } from "../types";
 export declare const exportToCanvas: (elements: readonly NonDeletedExcalidrawElement[], appState: AppState, files: BinaryFiles, { exportBackground, exportPadding, viewBackgroundColor, exportingFrame, }: {
     exportBackground: boolean;
     exportPadding?: number | undefined;
     viewBackgroundColor: string;
-    exportingFrame?: ExcalidrawFrameElement | null | undefined;
+    exportingFrame?: ExcalidrawFrameLikeElement | null | undefined;
 }, createCanvas?: (width: number, height: number) => {
     canvas: HTMLCanvasElement;
     scale: number;
@@ -19,6 +19,6 @@ export declare const exportToSvg: (elements: readonly NonDeletedExcalidrawElemen
     frameRendering?: AppState["frameRendering"];
 }, files: BinaryFiles | null, opts?: {
     renderEmbeddables?: boolean;
-    exportingFrame?: ExcalidrawFrameElement | null;
+    exportingFrame?: ExcalidrawFrameLikeElement | null;
 }) => Promise<SVGSVGElement>;
 export declare const getExportSize: (elements: readonly NonDeletedExcalidrawElement[], exportPadding: number, scale: number) => [number, number];

package/types/scene/types.d.ts

@@ -82,6 +82,7 @@ export type ElementShapes = {
     rectangle: Drawable;
     ellipse: Drawable;
     diamond: Drawable;
+    iframe: Drawable;
     embeddable: Drawable;
     freedraw: Drawable | null;
     arrow: Drawable[];
@@ -89,4 +90,5 @@ export type ElementShapes = {
     text: null;
     image: null;
     frame: null;
+    magicframe: null;
 };

package/types/shapes.d.ts

@@ -59,4 +59,4 @@ export declare const SHAPES: readonly [{
     readonly numericKey: "0";
     readonly fillable: false;
 }];
-export declare const findShapeByKey: (key: string) => "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "freedraw" | "eraser" | null;
+export declare const findShapeByKey: (key: string) => "text" | "image" | "line" | "arrow" | "selection" | "rectangle" | "diamond" | "ellipse" | "freedraw" | "eraser" | null;