@excalidraw/excalidraw 0.17.1-d9bbf1e → 0.17.1-e63dd02

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

@@ -0,0 +1,58 @@
+import type Scene from "../scene/Scene";
+import type { ExcalidrawElement, ExcalidrawTextElement, FontFamilyValues } from "../element/types";
+import { type FontMetadata } from "./metadata";
+import { type Font } from "./ExcalidrawFont";
+export declare class Fonts {
+    static readonly loadedFontsCache: Set<string>;
+    private static _registered;
+    private static _initialized;
+    static get registered(): Map<number, {
+        metadata: FontMetadata;
+        fonts: Font[];
+    }>;
+    get registered(): Map<number, {
+        metadata: FontMetadata;
+        fonts: Font[];
+    }>;
+    private readonly scene;
+    constructor({ scene }: {
+        scene: Scene;
+    });
+    /**
+     * if we load a (new) font, it's likely that text elements using it have
+     * already been rendered using a fallback font. Thus, we want invalidate
+     * their shapes and rerender. See #637.
+     *
+     * Invalidates text elements and rerenders scene, provided that at least one
+     * of the supplied fontFaces has not already been processed.
+     */
+    onLoaded: (fontFaces: readonly FontFace[]) => false | undefined;
+    /**
+     * Load font faces for a given scene and trigger scene update.
+     */
+    loadSceneFonts: () => Promise<FontFace[]>;
+    /**
+     * Gets all the font families for the given scene.
+     */
+    getSceneFontFamilies: () => number[];
+    /**
+     * Load font faces for passed elements - use when the scene is unavailable (i.e. export).
+     */
+    static loadFontsForElements: (elements: readonly ExcalidrawElement[]) => Promise<FontFace[]>;
+    private static loadFontFaces;
+    /**
+     * WARN: should be called just once on init, even across multiple instances.
+     */
+    private static init;
+    private static getFontFamilies;
+}
+/**
+ * Calculates vertical offset for a text with alphabetic baseline.
+ */
+export declare const getVerticalOffset: (fontFamily: ExcalidrawTextElement["fontFamily"], fontSize: ExcalidrawTextElement["fontSize"], lineHeightPx: number) => number;
+/**
+ * Gets line height forr a selected family.
+ */
+export declare const getLineHeight: (fontFamily: FontFamilyValues) => number & {
+    _brand: "unitlessLineHeight";
+};

package/dist/excalidraw/fonts/index.js

@@ -0,0 +1,240 @@
+import { ShapeCache } from "../scene/ShapeCache";
+import { isTextElement } from "../element";
+import { getFontString } from "../utils";
+import { FONT_FAMILY } from "../constants";
+import { LOCAL_FONT_PROTOCOL, FONT_METADATA, RANGES, } from "./metadata";
+import { ExcalidrawFont } from "./ExcalidrawFont";
+import { getContainerElement } from "../element/textElement";
+import Virgil from "./assets/Virgil-Regular.woff2";
+import Excalifont from "./assets/Excalifont-Regular.woff2";
+import Cascadia from "./assets/CascadiaCode-Regular.woff2";
+import ComicShanns from "./assets/ComicShanns-Regular.woff2";
+import LiberationSans from "./assets/LiberationSans-Regular.woff2";
+import LilitaLatin from "https://fonts.gstatic.com/s/lilitaone/v15/i7dPIFZ9Zz-WBtRtedDbYEF8RXi4EwQ.woff2";
+import LilitaLatinExt from "https://fonts.gstatic.com/s/lilitaone/v15/i7dPIFZ9Zz-WBtRtedDbYE98RXi4EwSsbg.woff2";
+import NunitoLatin from "https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTQ3j6zbXWjgeg.woff2";
+import NunitoLatinExt from "https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTo3j6zbXWjgevT5.woff2";
+import NunitoCyrilic from "https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTA3j6zbXWjgevT5.woff2";
+import NunitoCyrilicExt from "https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTk3j6zbXWjgevT5.woff2";
+import NunitoVietnamese from "https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTs3j6zbXWjgevT5.woff2";
+export class Fonts {
+    // it's ok to track fonts across multiple instances only once, so let's use
+    // a static member to reduce memory footprint
+    static loadedFontsCache = new Set();
+    static _registered;
+    static _initialized = false;
+    static get registered() {
+        // lazy load the font registration
+        if (!Fonts._registered) {
+            Fonts._registered = Fonts.init();
+        }
+        else if (!Fonts._initialized) {
+            // case when host app register fonts before they are lazy loaded
+            // don't override whatever has been previously registered
+            Fonts._registered = new Map([
+                ...Fonts.init().entries(),
+                ...Fonts._registered.entries(),
+            ]);
+        }
+        return Fonts._registered;
+    }
+    get registered() {
+        return Fonts.registered;
+    }
+    scene;
+    constructor({ scene }) {
+        this.scene = scene;
+    }
+    /**
+     * if we load a (new) font, it's likely that text elements using it have
+     * already been rendered using a fallback font. Thus, we want invalidate
+     * their shapes and rerender. See #637.
+     *
+     * Invalidates text elements and rerenders scene, provided that at least one
+     * of the supplied fontFaces has not already been processed.
+     */
+    onLoaded = (fontFaces) => {
+        if (
+        // bail if all fonts with have been processed. We're checking just a
+        // subset of the font properties (though it should be enough), so it
+        // can technically bail on a false positive.
+        fontFaces.every((fontFace) => {
+            const sig = `${fontFace.family}-${fontFace.style}-${fontFace.weight}-${fontFace.unicodeRange}`;
+            if (Fonts.loadedFontsCache.has(sig)) {
+                return true;
+            }
+            Fonts.loadedFontsCache.add(sig);
+            return false;
+        })) {
+            return false;
+        }
+        let didUpdate = false;
+        const elementsMap = this.scene.getNonDeletedElementsMap();
+        for (const element of this.scene.getNonDeletedElements()) {
+            if (isTextElement(element)) {
+                didUpdate = true;
+                ShapeCache.delete(element);
+                const container = getContainerElement(element, elementsMap);
+                if (container) {
+                    ShapeCache.delete(container);
+                }
+            }
+        }
+        if (didUpdate) {
+            this.scene.triggerUpdate();
+        }
+    };
+    /**
+     * Load font faces for a given scene and trigger scene update.
+     */
+    loadSceneFonts = async () => {
+        const sceneFamilies = this.getSceneFontFamilies();
+        const loaded = await Fonts.loadFontFaces(sceneFamilies);
+        this.onLoaded(loaded);
+        return loaded;
+    };
+    /**
+     * Gets all the font families for the given scene.
+     */
+    getSceneFontFamilies = () => {
+        return Fonts.getFontFamilies(this.scene.getNonDeletedElements());
+    };
+    /**
+     * Load font faces for passed elements - use when the scene is unavailable (i.e. export).
+     */
+    static loadFontsForElements = async (elements) => {
+        const fontFamilies = Fonts.getFontFamilies(elements);
+        return await Fonts.loadFontFaces(fontFamilies);
+    };
+    static async loadFontFaces(fontFamilies) {
+        // add all registered font faces into the `document.fonts` (if not added already)
+        for (const { fonts, metadata } of Fonts.registered.values()) {
+            // skip registering font faces for local fonts (i.e. Helvetica)
+            if (metadata.local) {
+                continue;
+            }
+            for (const { fontFace } of fonts) {
+                if (!window.document.fonts.has(fontFace)) {
+                    window.document.fonts.add(fontFace);
+                }
+            }
+        }
+        const loadedFontFaces = await Promise.all(fontFamilies.map(async (fontFamily) => {
+            const fontString = getFontString({
+                fontFamily,
+                fontSize: 16,
+            });
+            // WARN: without "text" param it does not have to mean that all font faces are loaded, instead it could be just one!
+            if (!window.document.fonts.check(fontString)) {
+                try {
+                    // WARN: browser prioritizes loading only font faces with unicode ranges for characters which are present in the document (html & canvas), other font faces could stay unloaded
+                    // we might want to retry here, i.e.  in case CDN is down, but so far I didn't experience any issues - maybe it handles retry-like logic under the hood
+                    return await window.document.fonts.load(fontString);
+                }
+                catch (e) {
+                    // don't let it all fail if just one font fails to load
+                    console.error(`Failed to load font "${fontString}" from urls "${Fonts.registered
+                        .get(fontFamily)
+                        ?.fonts.map((x) => x.urls)}"`, e);
+                }
+            }
+            return Promise.resolve();
+        }));
+        return loadedFontFaces.flat().filter(Boolean);
+    }
+    /**
+     * WARN: should be called just once on init, even across multiple instances.
+     */
+    static init() {
+        const fonts = {
+            registered: new Map(),
+        };
+        // TODO: let's tweak this once we know how `register` will be exposed as part of the custom fonts API
+        const _register = register.bind(fonts);
+        _register("Virgil", FONT_METADATA[FONT_FAMILY.Virgil], {
+            uri: Virgil,
+        });
+        _register("Excalifont", FONT_METADATA[FONT_FAMILY.Excalifont], {
+            uri: Excalifont,
+        });
+        // keeping for backwards compatibility reasons, uses system font (Helvetica on MacOS, Arial on Win)
+        _register("Helvetica", FONT_METADATA[FONT_FAMILY.Helvetica], {
+            uri: LOCAL_FONT_PROTOCOL,
+        });
+        // used for server-side pdf & png export instead of helvetica (technically does not need metrics, but kept in for consistency)
+        _register("Liberation Sans", FONT_METADATA[FONT_FAMILY["Liberation Sans"]], {
+            uri: LiberationSans,
+        });
+        _register("Cascadia", FONT_METADATA[FONT_FAMILY.Cascadia], {
+            uri: Cascadia,
+        });
+        _register("Comic Shanns", FONT_METADATA[FONT_FAMILY["Comic Shanns"]], {
+            uri: ComicShanns,
+        });
+        _register("Lilita One", FONT_METADATA[FONT_FAMILY["Lilita One"]], { uri: LilitaLatinExt, descriptors: { unicodeRange: RANGES.LATIN_EXT } }, { uri: LilitaLatin, descriptors: { unicodeRange: RANGES.LATIN } });
+        _register("Nunito", FONT_METADATA[FONT_FAMILY.Nunito], {
+            uri: NunitoCyrilicExt,
+            descriptors: { unicodeRange: RANGES.CYRILIC_EXT, weight: "500" },
+        }, {
+            uri: NunitoCyrilic,
+            descriptors: { unicodeRange: RANGES.CYRILIC, weight: "500" },
+        }, {
+            uri: NunitoVietnamese,
+            descriptors: { unicodeRange: RANGES.VIETNAMESE, weight: "500" },
+        }, {
+            uri: NunitoLatinExt,
+            descriptors: { unicodeRange: RANGES.LATIN_EXT, weight: "500" },
+        }, {
+            uri: NunitoLatin,
+            descriptors: { unicodeRange: RANGES.LATIN, weight: "500" },
+        });
+        Fonts._initialized = true;
+        return fonts.registered;
+    }
+    static getFontFamilies(elements) {
+        return Array.from(elements.reduce((families, element) => {
+            if (isTextElement(element)) {
+                families.add(element.fontFamily);
+            }
+            return families;
+        }, new Set()));
+    }
+}
+/**
+ * Register a new font.
+ *
+ * @param family font family
+ * @param metadata font metadata
+ * @param params array of the rest of the FontFace parameters [uri: string, descriptors: FontFaceDescriptors?] ,
+ */
+function register(family, metadata, ...params) {
+    // TODO: likely we will need to abandon number "id" in order to support custom fonts
+    const familyId = FONT_FAMILY[family];
+    const registeredFamily = this.registered.get(familyId);
+    if (!registeredFamily) {
+        this.registered.set(familyId, {
+            metadata,
+            fonts: params.map(({ uri, descriptors }) => new ExcalidrawFont(family, uri, descriptors)),
+        });
+    }
+    return this.registered;
+}
+/**
+ * Calculates vertical offset for a text with alphabetic baseline.
+ */
+export const getVerticalOffset = (fontFamily, fontSize, lineHeightPx) => {
+    const { unitsPerEm, ascender, descender } = Fonts.registered.get(fontFamily)?.metadata.metrics ||
+        FONT_METADATA[FONT_FAMILY.Virgil].metrics;
+    const fontSizeEm = fontSize / unitsPerEm;
+    const lineGap = (lineHeightPx - fontSizeEm * ascender + fontSizeEm * descender) / 2;
+    const verticalOffset = fontSizeEm * ascender + lineGap;
+    return verticalOffset;
+};
+/**
+ * Gets line height forr a selected family.
+ */
+export const getLineHeight = (fontFamily) => {
+    const { lineHeight } = Fonts.registered.get(fontFamily)?.metadata.metrics ||
+        FONT_METADATA[FONT_FAMILY.Excalifont].metrics;
+    return lineHeight;
+};

package/dist/excalidraw/fonts/metadata.d.ts

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+/**
+ * Encapsulates font metrics with additional font metadata.
+ * */
+export interface FontMetadata {
+    /** for head & hhea metrics read the woff2 with https://fontdrop.info/ */
+    metrics: {
+        /** head.unitsPerEm metric */
+        unitsPerEm: 1000 | 1024 | 2048;
+        /** hhea.ascender metric */
+        ascender: number;
+        /** hhea.descender metric */
+        descender: number;
+        /** harcoded unitless line-height, https://github.com/excalidraw/excalidraw/pull/6360#issuecomment-1477635971 */
+        lineHeight: number;
+    };
+    /** element to be displayed as an icon  */
+    icon: JSX.Element;
+    /** flag to indicate a deprecated font */
+    deprecated?: true;
+    /** flag to indicate a server-side only font */
+    serverSide?: true;
+    /** flag to indiccate a local-only font */
+    local?: true;
+}
+export declare const FONT_METADATA: Record<number, FontMetadata>;
+/** Unicode ranges */
+export declare const RANGES: {
+    LATIN: string;
+    LATIN_EXT: string;
+    CYRILIC_EXT: string;
+    CYRILIC: string;
+    VIETNAMESE: string;
+};
+/** local protocol to skip the local font from registering or inlining */
+export declare const LOCAL_FONT_PROTOCOL = "local:";

package/dist/excalidraw/fonts/metadata.js

@@ -0,0 +1,91 @@
+import { FontFamilyCodeIcon, FontFamilyHeadingIcon, FontFamilyNormalIcon, FreedrawIcon, } from "../components/icons";
+import { FONT_FAMILY } from "../constants";
+export const FONT_METADATA = {
+    [FONT_FAMILY.Excalifont]: {
+        metrics: {
+            unitsPerEm: 1000,
+            ascender: 886,
+            descender: -374,
+            lineHeight: 1.25,
+        },
+        icon: FreedrawIcon,
+    },
+    [FONT_FAMILY.Nunito]: {
+        metrics: {
+            unitsPerEm: 1000,
+            ascender: 1011,
+            descender: -353,
+            lineHeight: 1.35,
+        },
+        icon: FontFamilyNormalIcon,
+    },
+    [FONT_FAMILY["Lilita One"]]: {
+        metrics: {
+            unitsPerEm: 1000,
+            ascender: 923,
+            descender: -220,
+            lineHeight: 1.15,
+        },
+        icon: FontFamilyHeadingIcon,
+    },
+    [FONT_FAMILY["Comic Shanns"]]: {
+        metrics: {
+            unitsPerEm: 1000,
+            ascender: 750,
+            descender: -250,
+            lineHeight: 1.25,
+        },
+        icon: FontFamilyCodeIcon,
+    },
+    [FONT_FAMILY.Virgil]: {
+        metrics: {
+            unitsPerEm: 1000,
+            ascender: 886,
+            descender: -374,
+            lineHeight: 1.25,
+        },
+        icon: FreedrawIcon,
+        deprecated: true,
+    },
+    [FONT_FAMILY.Helvetica]: {
+        metrics: {
+            unitsPerEm: 2048,
+            ascender: 1577,
+            descender: -471,
+            lineHeight: 1.15,
+        },
+        icon: FontFamilyNormalIcon,
+        deprecated: true,
+        local: true,
+    },
+    [FONT_FAMILY.Cascadia]: {
+        metrics: {
+            unitsPerEm: 2048,
+            ascender: 1900,
+            descender: -480,
+            lineHeight: 1.2,
+        },
+        icon: FontFamilyCodeIcon,
+        deprecated: true,
+    },
+    [FONT_FAMILY["Liberation Sans"]]: {
+        metrics: {
+            unitsPerEm: 2048,
+            ascender: 1854,
+            descender: -434,
+            lineHeight: 1.15,
+        },
+        icon: FontFamilyNormalIcon,
+        serverSide: true,
+    },
+};
+/** Unicode ranges */
+export const RANGES = {
+    LATIN: "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",
+    LATIN_EXT: "U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF",
+    CYRILIC_EXT: "U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F",
+    CYRILIC: "U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116",
+    VIETNAMESE: "U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB",
+};
+/** local protocol to skip the local font from registering or inlining */
+export const LOCAL_FONT_PROTOCOL = "local:";

package/dist/excalidraw/fractionalIndex.d.ts

@@ -1,17 +1,17 @@
-import { ExcalidrawElement, OrderedExcalidrawElement } from "./element/types";
+import type { ExcalidrawElement, OrderedExcalidrawElement } from "./element/types";
 /**
  * Envisioned relation between array order and fractional indices:
  *
  * 1) Array (or array-like ordered data structure) should be used as a cache of elements order, hiding the internal fractional indices implementation.
- * - it's undesirable to to perform reorder for each related operation, thefeore it's necessary to cache the order defined by fractional indices into an ordered data structure
+ * - it's undesirable to perform reorder for each related operation, therefore it's necessary to cache the order defined by fractional indices into an ordered data structure
  * - it's easy enough to define the order of the elements from the outside (boundaries), without worrying about the underlying structure of fractional indices (especially for the host apps)
  * - it's necessary to always keep the array support for backwards compatibility (restore) - old scenes, old libraries, supporting multiple excalidraw versions etc.
  * - it's necessary to always keep the fractional indices in sync with the array order
  * - elements with invalid indices should be detected and synced, without altering the already valid indices
  *
  * 2) Fractional indices should be used to reorder the elements, whenever the cached order is expected to be invalidated.
- * - as the fractional indices are encoded as part of the elements, it opens up possibilties for incremental-like APIs
- * - re-order based on fractional indices should be part of (multiplayer) operations such as reconcillitation & undo/redo
+ * - as the fractional indices are encoded as part of the elements, it opens up possibilities for incremental-like APIs
+ * - re-order based on fractional indices should be part of (multiplayer) operations such as reconciliation & undo/redo
  * - technically all the z-index actions could perform also re-order based on fractional indices,but in current state it would not bring much benefits,
  *   as it's faster & more efficient to perform re-order based on array manipulation and later synchronisation of moved indices with the array order
  */
@@ -20,7 +20,14 @@ import { ExcalidrawElement, OrderedExcalidrawElement } from "./element/types";
  *
  * @throws `InvalidFractionalIndexError` if invalid index is detected.
  */
-export declare const validateFractionalIndices: (indices: (ExcalidrawElement["index"] | undefined)[]) => void;
+export declare const validateFractionalIndices: (elements: readonly ExcalidrawElement[], { shouldThrow, includeBoundTextValidation, reconciliationContext, }: {
+    shouldThrow: boolean;
+    includeBoundTextValidation: boolean;
+    reconciliationContext?: {
+        localElements: ReadonlyArray<ExcalidrawElement>;
+        remoteElements: ReadonlyArray<ExcalidrawElement>;
+    } | undefined;
+}) => void;
 /**
  * Order the elements based on the fractional indices.
  * - when fractional indices are identical, break the tie based on the element id

package/dist/excalidraw/fractionalIndex.js

@@ -1,19 +1,22 @@
 import { generateNKeysBetween } from "fractional-indexing";
 import { mutateElement } from "./element/mutateElement";
 import { InvalidFractionalIndexError } from "./errors";
+import { hasBoundTextElement } from "./element/typeChecks";
+import { getBoundTextElement } from "./element/textElement";
+import { arrayToMap } from "./utils";
 /**
  * Envisioned relation between array order and fractional indices:
  *
  * 1) Array (or array-like ordered data structure) should be used as a cache of elements order, hiding the internal fractional indices implementation.
- * - it's undesirable to to perform reorder for each related operation, thefeore it's necessary to cache the order defined by fractional indices into an ordered data structure
+ * - it's undesirable to perform reorder for each related operation, therefore it's necessary to cache the order defined by fractional indices into an ordered data structure
  * - it's easy enough to define the order of the elements from the outside (boundaries), without worrying about the underlying structure of fractional indices (especially for the host apps)
  * - it's necessary to always keep the array support for backwards compatibility (restore) - old scenes, old libraries, supporting multiple excalidraw versions etc.
  * - it's necessary to always keep the fractional indices in sync with the array order
  * - elements with invalid indices should be detected and synced, without altering the already valid indices
  *
  * 2) Fractional indices should be used to reorder the elements, whenever the cached order is expected to be invalidated.
- * - as the fractional indices are encoded as part of the elements, it opens up possibilties for incremental-like APIs
- * - re-order based on fractional indices should be part of (multiplayer) operations such as reconcillitation & undo/redo
+ * - as the fractional indices are encoded as part of the elements, it opens up possibilities for incremental-like APIs
+ * - re-order based on fractional indices should be part of (multiplayer) operations such as reconciliation & undo/redo
  * - technically all the z-index actions could perform also re-order based on fractional indices,but in current state it would not bring much benefits,
  *   as it's faster & more efficient to perform re-order based on array manipulation and later synchronisation of moved indices with the array order
  */
@@ -22,12 +25,38 @@ import { InvalidFractionalIndexError } from "./errors";
  *
  * @throws `InvalidFractionalIndexError` if invalid index is detected.
  */
-export const validateFractionalIndices = (indices) => {
+export const validateFractionalIndices = (elements, { shouldThrow = false, includeBoundTextValidation = false, reconciliationContext, }) => {
+    const errorMessages = [];
+    const stringifyElement = (element) => `${element?.index}:${element?.id}:${element?.type}:${element?.isDeleted}:${element?.version}:${element?.versionNonce}`;
+    const indices = elements.map((x) => x.index);
     for (const [i, index] of indices.entries()) {
         const predecessorIndex = indices[i - 1];
         const successorIndex = indices[i + 1];
         if (!isValidFractionalIndex(index, predecessorIndex, successorIndex)) {
-            throw new InvalidFractionalIndexError(`Fractional indices invariant for element has been compromised - ["${predecessorIndex}", "${index}", "${successorIndex}"] [predecessor, current, successor]`);
+            errorMessages.push(`Fractional indices invariant has been compromised: "${stringifyElement(elements[i - 1])}", "${stringifyElement(elements[i])}", "${stringifyElement(elements[i + 1])}"`);
+        }
+        // disabled by default, as we don't fix it
+        if (includeBoundTextValidation && hasBoundTextElement(elements[i])) {
+            const container = elements[i];
+            const text = getBoundTextElement(container, arrayToMap(elements));
+            if (text && text.index <= container.index) {
+                errorMessages.push(`Fractional indices invariant for bound elements has been compromised: "${stringifyElement(text)}", "${stringifyElement(container)}"`);
+            }
+        }
+    }
+    if (errorMessages.length) {
+        const error = new InvalidFractionalIndexError();
+        const additionalContext = [];
+        if (reconciliationContext) {
+            additionalContext.push("Additional reconciliation context:");
+            additionalContext.push(reconciliationContext.localElements.map((x) => stringifyElement(x)));
+            additionalContext.push(reconciliationContext.remoteElements.map((x) => stringifyElement(x)));
+        }
+        // report just once and with the stacktrace
+        console.error(errorMessages.join("\n\n"), error.stack, elements.map((x) => stringifyElement(x)), ...additionalContext);
+        if (shouldThrow) {
+            // if enabled, gather all the errors first, throw once
+            throw error;
         }
     }
 };
@@ -62,8 +91,11 @@ export const syncMovedIndices = (elements, movedElements) => {
         const indicesGroups = getMovedIndicesGroups(elements, movedElements);
         // try generatating indices, throws on invalid movedElements
         const elementsUpdates = generateIndices(elements, indicesGroups);
+        const elementsCandidates = elements.map((x) => elementsUpdates.has(x) ? { ...x, ...elementsUpdates.get(x) } : x);
         // ensure next indices are valid before mutation, throws on invalid ones
-        validateFractionalIndices(elements.map((x) => elementsUpdates.get(x)?.index || x.index));
+        validateFractionalIndices(elementsCandidates, 
+        // we don't autofix invalid bound text indices, hence don't include it in the validation
+        { includeBoundTextValidation: false, shouldThrow: true });
         // split mutation so we don't end up in an incosistent state
         for (const [element, update] of elementsUpdates) {
             mutateElement(element, update, false);
@@ -97,12 +129,10 @@ const getMovedIndicesGroups = (elements, movedElements) => {
     const indicesGroups = [];
     let i = 0;
     while (i < elements.length) {
-        if (movedElements.has(elements[i].id) &&
-            !isValidFractionalIndex(elements[i]?.index, elements[i - 1]?.index, elements[i + 1]?.index)) {
+        if (movedElements.has(elements[i].id)) {
             const indicesGroup = [i - 1, i]; // push the lower bound index as the first item
             while (++i < elements.length) {
-                if (!(movedElements.has(elements[i].id) &&
-                    !isValidFractionalIndex(elements[i]?.index, elements[i - 1]?.index, elements[i + 1]?.index))) {
+                if (!movedElements.has(elements[i].id)) {
                     break;
                 }
                 indicesGroup.push(i);

package/dist/excalidraw/frame.d.ts

@@ -1,7 +1,7 @@
-import { ElementsMap, ElementsMapOrArray, ExcalidrawElement, ExcalidrawFrameLikeElement, NonDeleted, NonDeletedExcalidrawElement } from "./element/types";
-import { AppClassProperties, AppState, StaticCanvasAppState } from "./types";
+import type { ElementsMap, ElementsMapOrArray, ExcalidrawElement, ExcalidrawFrameLikeElement, NonDeleted, NonDeletedExcalidrawElement } from "./element/types";
+import type { AppClassProperties, AppState, StaticCanvasAppState } from "./types";
 import type { ExcalidrawElementsIncludingDeleted } from "./scene/Scene";
-import { ReadonlySetLike } from "./utility-types";
+import type { ReadonlySetLike } from "./utility-types";
 export declare const bindElementsToFramesAfterDuplication: (nextElements: readonly ExcalidrawElement[], oldElements: readonly ExcalidrawElement[], oldIdToDuplicatedId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>) => void;
 export declare function isElementIntersectingFrame(element: ExcalidrawElement, frame: ExcalidrawFrameLikeElement, elementsMap: ElementsMap): boolean;
 export declare const getElementsCompletelyInFrame: (elements: readonly ExcalidrawElement[], frame: ExcalidrawFrameLikeElement, elementsMap: ElementsMap) => ExcalidrawElement[];
@@ -59,5 +59,5 @@ export declare const omitGroupsContainingFrameLikes: (allElements: ElementsMapOr
  */
 export declare const getTargetFrame: (element: ExcalidrawElement, elementsMap: ElementsMap, appState: StaticCanvasAppState) => import("./element/types").ExcalidrawFrameElement | import("./element/types").ExcalidrawMagicFrameElement | null;
 export declare const isElementInFrame: (element: ExcalidrawElement, allElementsMap: ElementsMap, appState: StaticCanvasAppState) => boolean;
-export declare const getFrameLikeTitle: (element: ExcalidrawFrameLikeElement, frameIdx: number) => string;
+export declare const getFrameLikeTitle: (element: ExcalidrawFrameLikeElement) => string;
 export declare const getElementsOverlappingFrame: (elements: readonly ExcalidrawElement[], frame: ExcalidrawFrameLikeElement) => NonDeletedExcalidrawElement[];

package/dist/excalidraw/frame.js

@@ -426,12 +426,12 @@ export const isElementInFrame = (element, allElementsMap, appState) => {
     }
     return false;
 };
-export const getFrameLikeTitle = (element, frameIdx) => {
+export const getFrameLikeTitle = (element) => {
     // TODO name frames "AI" only if specific to AI frames
     return element.name === null
         ? isFrameElement(element)
-            ? `Frame ${frameIdx}`
-            : `AI Frame $${frameIdx}`
+            ? "Frame"
+            : "AI Frame"
         : element.name;
 };
 export const getElementsOverlappingFrame = (elements, frame) => {

package/dist/excalidraw/gatransforms.d.ts

@@ -1,4 +1,4 @@
-import { Line, Direction, Point } from "./ga";
+import type { Line, Direction, Point } from "./ga";
 /**
  * TODO: docs
  */

package/dist/excalidraw/gesture.d.ts

@@ -1,4 +1,4 @@
-import { PointerCoords } from "./types";
+import type { PointerCoords } from "./types";
 export declare const getCenter: (pointers: Map<number, PointerCoords>) => {
     x: number;
     y: number;

package/dist/excalidraw/groups.d.ts

@@ -1,6 +1,6 @@
-import { GroupId, ExcalidrawElement, NonDeleted, NonDeletedExcalidrawElement, ElementsMapOrArray, ElementsMap } from "./element/types";
-import { AppClassProperties, AppState, InteractiveCanvasAppState } from "./types";
-import { Mutable } from "./utility-types";
+import type { GroupId, ExcalidrawElement, NonDeleted, NonDeletedExcalidrawElement, ElementsMapOrArray, ElementsMap } from "./element/types";
+import type { AppClassProperties, AppState, InteractiveCanvasAppState } from "./types";
+import type { Mutable } from "./utility-types";
 export declare const selectGroup: (groupId: GroupId, appState: InteractiveCanvasAppState, elements: readonly NonDeleted<ExcalidrawElement>[]) => Pick<InteractiveCanvasAppState, "selectedGroupIds" | "selectedElementIds" | "editingGroupId">;
 export declare const selectGroupsForSelectedElements: {
     (appState: Pick<AppState, "selectedElementIds" | "editingGroupId">, elements: readonly NonDeletedExcalidrawElement[], prevAppState: InteractiveCanvasAppState, app: AppClassProperties | null): Mutable<Pick<InteractiveCanvasAppState, "selectedGroupIds" | "editingGroupId" | "selectedElementIds">>;
@@ -29,5 +29,5 @@ export declare const removeFromSelectedGroups: (groupIds: ExcalidrawElement["gro
 }) => string[];
 export declare const getMaximumGroups: (elements: ExcalidrawElement[], elementsMap: ElementsMap) => ExcalidrawElement[][];
 export declare const getNonDeletedGroupIds: (elements: ElementsMap) => Set<string>;
-export declare const elementsAreInSameGroup: (elements: ExcalidrawElement[]) => boolean;
+export declare const elementsAreInSameGroup: (elements: readonly ExcalidrawElement[]) => boolean;
 export declare const isInGroup: (element: NonDeletedExcalidrawElement) => boolean;