@excalidraw/element 0.18.0-4872083 → 0.18.0-4ce38fb

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

@@ -0,0 +1,146 @@
+import { type Bounds, type StylesPanelMode } from "@excalidraw/common";
+import type { ArrowEndpoint } from "@excalidraw/element";
+import type { ExcalidrawElement, ExcalidrawTextContainer, ExcalidrawTextElement, NonDeleted, NonDeletedExcalidrawElement } from "@excalidraw/element/types";
+import { textWysiwyg } from "../wysiwyg/textWysiwyg";
+import type App from "./App";
+import type { AppState, Offsets, ViewportUIName } from "../types";
+type AppTextDependencies = {
+    getContainer: () => HTMLDivElement | null;
+    getStylesPanelMode: () => StylesPanelMode;
+};
+/**
+ * Texts, but for the text tool's pointer interaction (`AppTextTool`):
+ *
+ * - the editing session: what text to edit, or create, and where
+ *   (`startTextEditing`), and the editor's lifecycle (`handleTextWysiwyg`)
+ * - the part of the canvas a typed or pasted text is kept within
+ *   (`getTextViewportOffsets`, `getMaxTextWidth`)
+ * - the queries that find the text or container to edit at a position
+ * - the handle that turns a fixed-width text back into a growing one
+ *
+ * Every way into editing ends up here: Enter, double-click, pointerup on a
+ * selected text or container, the text tool, a drag-created text or sticky
+ * note, and a sticky note dropped from the toolbar.
+ */
+export declare class AppText {
+    private app;
+    private dependencies;
+    constructor(app: App, dependencies: AppTextDependencies);
+    textWysiwygSubmitHandler: ReturnType<typeof textWysiwyg> | null;
+    private getTextCreationGridPoint;
+    /**
+     * The side panels, besides the sidebar, that a typed or pasted text is
+     * kept clear of: the stats panel, and the full styles panel (desktop),
+     * which shows next to a text while it's edited, and once it's pasted and
+     * selected.
+     */
+    getTextSidePanels: () => ViewportUIName[];
+    /**
+     * The part of the canvas a typed or pasted text is kept within, as offsets
+     * from its edges (screen px): all of it but the sidebar and the side
+     * panels (see getTextSidePanels), less some room at each side. The stats
+     * panel covers the top of a side only, and counts only for a text beside
+     * it: one (given by its scene bounds) with rows within that room of it.
+     */
+    getTextViewportOffsets: (textBounds?: Bounds) => Required<Offsets>;
+    /**
+     * The widest a text may grow to as it's typed or pasted, in scene units:
+     * TEXT_MAX_WRAP_WIDTH, or less, so that a text never outgrows the part of
+     * the canvas it's kept within.
+     */
+    getMaxTextWidth: (offsets: Required<Offsets>) => number;
+    handleTextWysiwyg(element: NonDeleted<ExcalidrawTextElement>, { isExistingElement, initialCaretSceneCoords, initialSelection, }: {
+        isExistingElement?: boolean;
+        /**
+         * supply null if no caret positioning is desired, and instead
+         * text should be auto-selected
+         */
+        initialCaretSceneCoords?: {
+            x: number;
+            y: number;
+        } | null;
+        /** range of the text to select (takes precedence over the caret) */
+        initialSelection?: {
+            start: number;
+            end: number;
+        } | null;
+    }): void;
+    private getSelectedTextElement;
+    getSelectedTextEditingContainerAtPosition(hitElement: NonDeletedExcalidrawElement | null, sceneCoords: {
+        x: number;
+        y: number;
+    }): ExcalidrawTextContainer | null | undefined;
+    getTextElementAtPosition(x: number, y: number): NonDeleted<ExcalidrawTextElement> | null;
+    isHittingTextAutoResizeHandle: (selectedElements: NonDeleted<ExcalidrawElement>[], point: Readonly<{
+        x: number;
+        y: number;
+    }>) => boolean;
+    handleTextAutoResizeHandlePointerDown: (selectedElements: NonDeleted<ExcalidrawElement>[], point: Readonly<{
+        x: number;
+        y: number;
+    }>) => boolean;
+    /**
+     * The text container at a position — an arrow hit on its path, any other
+     * container hit anywhere in its bounds (frames are skipped so a container
+     * inside one can be hit, and a frame's children are only hit inside it,
+     * where they are drawn). Purely positional: the selection plays no part.
+     *
+     * Only what hides the rest ends the search — a filled element or an image
+     * (as for arrow binding), or an arrow — so containers below a transparent
+     * one stay in reach whatever their z-order. Of the containers found, the
+     * innermost one centered on the position wins, since that is where its
+     * label would go (an arrow counting as innermost: it is pointed at, not just
+     * enclosing); failing that, the top-most.
+     */
+    getTextBindableContainerAtPosition(x: number, y: number): NonDeleted<ExcalidrawTextContainer>;
+    /**
+     * Whether a text element's content is still being authored.
+     *
+     * Creating a text reverts the tool to selection during pointerdown, so the
+     * pointerup that follows looks like an ordinary canvas click and would
+     * capture the still-empty element as a history entry of its own. Undo would
+     * then rewind only the typing, restoring an invisible, zero-content element
+     * (and, for an endpoint label, leaving the arrow bound to it) rather than
+     * removing it. The editor's own submit captures the finished text instead,
+     * so the whole create-and-type lands in a single entry.
+     */
+    isEditingTextContent(): boolean;
+    startTextEditing: ({ sceneX, sceneY, insertAtParentCenter, container, autoEdit, initialCaretSceneCoords, initialSelection, arrowEndpoint, textElement, }: {
+        /** X position to insert text at */
+        sceneX: number;
+        /** Y position to insert text at */
+        sceneY: number;
+        /** whether to attempt to insert at element center if applicable */
+        insertAtParentCenter?: boolean;
+        container?: ExcalidrawTextContainer | null;
+        autoEdit?: boolean;
+        initialCaretSceneCoords?: {
+            x: number;
+            y: number;
+        };
+        /** range of an existing text to select (takes precedence over the caret) */
+        initialSelection?: {
+            start: number;
+            end: number;
+        };
+        /**
+         * creates the text as a label for this arrow endpoint: the binding then
+         * dictates the text's position and alignment, overriding (sceneX, sceneY)
+         */
+        arrowEndpoint?: ArrowEndpoint | null;
+        /**
+         * the text to edit: an element to edit exactly that one; `null` to always
+         * create, never adopting a selected text or one under the pointer;
+         * `undefined` to resolve it here — a single selected text, the label of a
+         * selected or passed arrow container, else the text at (sceneX, sceneY)
+         */
+        textElement?: NonDeleted<ExcalidrawTextElement> | null;
+    }) => void;
+    getTextWysiwygSnappedToCenterPosition(x: number, y: number, appState: AppState, container?: ExcalidrawTextContainer | null): {
+        viewportX: number;
+        viewportY: number;
+        elementCenterX: number;
+        elementCenterY: number;
+    } | undefined;
+}
+export {};

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

@@ -0,0 +1,140 @@
+import type { ArrowEndpoint } from "@excalidraw/element";
+import type { ExcalidrawTextContainer, ExcalidrawTextElement, NonDeleted } from "@excalidraw/element/types";
+import type React from "react";
+import type App from "./App";
+import type { PointerDownState } from "../types";
+type ScenePoint = {
+    x: number;
+    y: number;
+};
+/** the modifier state a target depends on — off a pointer or keyboard event */
+export type Modifiers = Pick<KeyboardEvent, "ctrlKey" | "metaKey">;
+/** What a text-tool click at a position does. */
+export type TextToolTarget = 
+/** binds a new text to a free arrow endpoint */
+{
+    type: "endpoint";
+    endpoint: ArrowEndpoint;
+}
+/** edits this text (a label included, at its derived position) */
+ | {
+    type: "text";
+    element: NonDeleted<ExcalidrawTextElement>;
+}
+/** binds a new label to this empty container (an arrow included) */
+ | {
+    type: "container";
+    element: NonDeleted<ExcalidrawTextContainer>;
+}
+/** creates free text at the pointer */
+ | {
+    type: "free";
+};
+/**
+ * The text tool's pointer interaction.
+ *
+ * Everything hangs off one question — what would a click at this position
+ * do (`getTargetAt`)? — answered once and used for the hover affordance
+ * (`appState.textToolHover`), the cursor and the pointerdown itself, so the
+ * affordance can never promise something the click won't deliver.
+ *
+ * A click on an empty container's center is armed on pointerdown and
+ * committed on pointerup as a bound label; dragging past the autowrap
+ * threshold first turns it into a free fixed-width text at the origin
+ * instead.
+ *
+ * Text editing itself (`app.text.startTextEditing`, see `AppText`) is
+ * shared with Enter, double-click and the other entry points.
+ */
+export declare class AppTextTool {
+    private app;
+    constructor(app: App);
+    /**
+     * A click on an empty container's center, armed on pointerdown and decided
+     * on the pointer's way out: a click binds a label, a drag creates free
+     * text instead. Deferring is what keeps the drag from first binding to
+     * (and provisionally enlarging) the container.
+     */
+    private pending;
+    /**
+     * The modifiers the hover was last resolved with — what a refresh without
+     * an event of its own (the viewport moving under a still pointer) uses.
+     */
+    private lastModifiers;
+    /**
+     * What a click at this position would do, in the order the click resolves
+     * it: a free arrow endpoint (the smaller, more deliberate target; z-aware,
+     * and off while ctrl/cmd disables binding) → the text under the pointer,
+     * which the click edits → an empty container near its center, which gets
+     * a label unless ctrl/cmd opts out → free text at the pointer.
+     *
+     * Ctrl/cmd is "no binding" throughout the tool, as elsewhere in the
+     * editor. For the container it is read off the event rather than the
+     * arrow-binding preference: a label is not an arrow binding.
+     */
+    getTargetAt: (scenePointer: ScenePoint, modifiers: Modifiers) => TextToolTarget;
+    /**
+     * Keeps `appState.textToolHover` — the affordance for what a click would
+     * do — in sync with the pointer, and returns the target (for the cursor).
+     * Suppressed while something else owns the interaction: a text being
+     * edited or drag-sized, a multi-point element, a box selection, a drag of
+     * the selection, or the pointer over a scrollbar.
+     */
+    updateHover: (scenePointer: ScenePoint, modifiers: Modifiers, isOverScrollBar?: boolean) => TextToolTarget | null;
+    /**
+     * Re-resolves the hover — and the cursor that goes with it — where the
+     * pointer last was, for what changes a click's outcome without the pointer
+     * moving: the ctrl/cmd toggle (pass its event), or the viewport scrolling
+     * or zooming under the pointer (no event; the last modifiers stand). The
+     * scene position is re-derived from the pointer's viewport position, so a
+     * moved viewport resolves what is under the pointer now.
+     *
+     * Nothing to refresh with another tool or without a hovering pointer — a
+     * finger never hovers (its last move is where it lifted), and the
+     * affordance a press armed is cleared when the press resolves or is
+     * canceled. The cursor is left to viewport navigation (space/wheel
+     * panning, a scrollbar drag, the hand tool), as on pointermove.
+     */
+    refresh: (modifiers?: Modifiers) => void;
+    /**
+     * Drops a pending center click without acting on it — the tool was left,
+     * the browser took the pointer (pointercancel), or a second finger turned
+     * the press into a pinch/pan — so no pointerup of ours will decide it. The
+     * outline it armed goes with it: while pending, the hover is that click's.
+     */
+    cancel: () => void;
+    clearHover: () => void;
+    private setHover;
+    /**
+     * The cursor for what a click would do: a pointer over the arrow anchors
+     * text would attach to, a text cursor over text the click would edit, the
+     * tool's crosshair otherwise — also while the affordance is suppressed
+     * (editing, drag-sizing), where a click has nothing to point at.
+     */
+    cursorFor: (target: TextToolTarget | null) => string;
+    handlePointerDown: (event: React.PointerEvent<HTMLElement>, pointerDownState: PointerDownState) => void;
+    /**
+     * The pointer-move half of a pending center click. Once the pointer has
+     * moved past the autowrap threshold the click is a drag: free text is
+     * created at the origin and sized by the drag from here on. Horizontal
+     * only (a text is only ever sized that way) and in screen space, and
+     * deliberately wider than the generic drag threshold so a jittery click
+     * still binds. Returns whether a pending click owned the move.
+     */
+    handlePointerMove: (event: PointerEvent, pointerDownState: PointerDownState) => boolean;
+    /**
+     * The pointer-up half: a genuine pointerup binds the label. The
+     * missing-pointerup cleanup replays this with the pointerdown event (a
+     * second finger landing mid-press), and a tool switch orphans the click —
+     * both discard it instead.
+     */
+    handlePointerUp: (event: PointerEvent, pointerDownState: PointerDownState) => void;
+    private isDrag;
+    private resolvePending;
+    /**
+     * The click has been acted on: drop the affordance, revert the tool unless
+     * it is locked, restore the cursor.
+     */
+    private finish;
+}
+export {};

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

@@ -0,0 +1,63 @@
+import type { ExcalidrawNonSelectionElement, NonDeleted } from "@excalidraw/element/types";
+import type App from "./App";
+import type { ToolType } from "../types";
+type ScenePoint = {
+    x: number;
+    y: number;
+};
+/** what a drag places: any element the new-element canvas can preview */
+type DraggedElement = NonDeleted<ExcalidrawNonSelectionElement>;
+/**
+ * A tool the user can drag out of the toolbar to drop a default-sized element
+ * where the pointer is released.
+ */
+type DraggableTool = {
+    /** the element the drop creates, centered on the pointer */
+    createElement: (app: App, center: ScenePoint) => DraggedElement;
+    /** what the tool does once its element is on the canvas (e.g. start editing) */
+    onDrop?: (app: App, element: DraggedElement) => void;
+};
+/**
+ * The tools that can be dragged out of the toolbar. Add an entry to make a
+ * tool's button draggable — the gesture, preview and drop are shared.
+ */
+export declare const DRAGGABLE_TOOLS: Partial<Record<ToolType, DraggableTool>>;
+/** CSS opacity of the preview canvas while dragging */
+export declare const TOOL_DRAG_PREVIEW_OPACITY = 0.5;
+/**
+ * Dragging a tool out of the toolbar. The preview element exists only here
+ * until the drop — it is not in the scene, the store or the history, so
+ * collaborators never see it and an aborted drag leaves nothing behind. It
+ * is painted by the `NewElementCanvas`, drawn exactly as it will land, with
+ * the canvas itself made translucent.
+ *
+ * The button arms on pointerdown; the drag starts once the pointer has
+ * moved `DRAGGING_THRESHOLD`, so a plain click still selects the tool. The
+ * gesture lives on the owner window (the pointer leaves the button at once),
+ * like the other pointer gestures in `App`.
+ */
+export declare class AppToolDrag {
+    private app;
+    constructor(app: App);
+    /** the element under the pointer while dragging, `null` otherwise */
+    preview: DraggedElement | null;
+    private armed;
+    private tool;
+    private type;
+    static isDraggable: (type: ToolType) => boolean;
+    isDragging: () => boolean;
+    /**
+     * Arm a drag from a tool button's pointerdown. Returns whether the tool is
+     * draggable (the caller lets a non-draggable press fall through).
+     */
+    handleButtonPointerDown: (type: ToolType, event: PointerEvent) => boolean;
+    private onPointerMove;
+    private onPointerUp;
+    private onKeyDown;
+    /** drop the gesture without a trace */
+    cancel: () => void;
+    private isOverCanvas;
+    private addListeners;
+    private removeListeners;
+}
+export {};

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

@@ -40,6 +40,43 @@ export declare class AppViewport {
      * user pan/zoom input. */
     get isLockedTransitionPending(): boolean;
     invalidateUIOffset: (name: ViewportUIName) => void;
+    /**
+     * The side a rendered side UI (`data-viewport-ui="side"`) docks to, and
+     * how far it reaches into the canvas from it, in screen px.
+     */
+    private measureSide;
+    /**
+     * The side a named surface docks to while it's hidden, and how far it
+     * reaches into the canvas from it: as last measured, else approximately.
+     */
+    private getReservedSide;
+    private querySideUI;
+    /**
+     * Where a rendered side UI is, relative to the editor's container, in
+     * screen px; null when it isn't rendered.
+     */
+    getSideUIRect: (name: ViewportUIName) => {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+    } | null;
+    /**
+     * How far the named side UIs reach into the canvas, in screen px, from
+     * the left and the right: the part of the canvas they cover. Zero at a
+     * side none of them is rendered at — e.g. with the sidebar closed, or on
+     * phones, where it's an overlay that doesn't count as viewport UI — unless
+     * a hidden one is reserved (see `ViewportOffsetsOptions.reserve`).
+     */
+    getSideInsets: (names: readonly ViewportUIName[], opts?: Pick<ViewportOffsetsOptions, "reserve">) => {
+        left: number;
+        right: number;
+    };
+    /** How far the sidebar reaches into the canvas (see `getSideInsets`). */
+    getSidebarInsets: () => {
+        left: number;
+        right: number;
+    };
     /**
      * Resolves user-supplied viewport offsets into concrete per-side pixel
      * values. Static sides take precedence over UI-derived sides.
@@ -54,7 +91,10 @@ export declare class AppViewport {
     resolveInitialViewport: (opts: Omit<SetViewportOptions, "animation">, elementsMap: NonDeletedSceneElementsMap, appState: AppState) => (Viewport & {
         scrollConstraints: ScrollConstraints | null;
     }) | null;
-    /** Navigates to a target and optionally installs scroll/zoom constraints. */
+    /**
+     * Navigates to a target and optionally installs scroll/zoom constraints.
+     * Navigating stops following a collaborator, as a user's pan does.
+     */
     setViewport: (opts: SetViewportOptions | null) => void;
     /** Use when changing scrollX/scrollY/zoom based on user interaction. */
     translate: <K extends keyof AppState>(state: AppState | Pick<AppState, K> | null | ((prevState: Readonly<AppState>, props: Readonly<AppProps>) => AppState | Pick<AppState, K> | null), opts?: {

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

@@ -0,0 +1,26 @@
+import type App from "./App";
+/**
+ * Wheel input over the editor: pans the canvas, or zooms it around the
+ * pointer (`viewport.lastPosition`) — on ctrl/cmd+wheel (which is also how
+ * a trackpad pinch is delivered), while the wheel button itself is held
+ * down, or on a plain wheel when the input device is a mouse
+ * (`appState.inputDevice`). Shift+wheel pans horizontally;
+ * ctrl/cmd+shift+wheel pans vertically.
+ */
+export declare class AppWheel {
+    private app;
+    constructor(app: App);
+    /** the editor surfaces whose wheel input the editor consumes; everywhere
+     * else (menus, sidebars, …) the DOM keeps scrolling. The frame-name labels
+     * are DOM, but sit inside the container this listener is attached to */
+    private isOverEditorSurface;
+    handle: (event: WheelEvent) => void;
+    /**
+     * Prevents the browser's own zoom over the non-interactive editor while
+     * letting regular scroll through (trackpad pinch is delivered as
+     * ctrl+wheel).
+     */
+    preventBrowserZoom: (event: WheelEvent) => void;
+    /** zooms around the pointer by a wheel delta (positive = zoom out) */
+    private zoomBy;
+}

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

@@ -2,7 +2,7 @@ import type { ColorTuple, ColorPaletteCustom } from "@excalidraw/common";
 import type { ExcalidrawElement } from "@excalidraw/element/types";
 import "./ColorPicker.scss";
 import type { ColorPickerType } from "./colorPickerUtils";
-import type { UIAppState } from "../../types";
+import type { AppState, UIAppState } from "../../types";
 interface ColorPickerProps {
     type: ColorPickerType;
     /**
@@ -19,6 +19,10 @@ interface ColorPickerProps {
     updateData: (formData?: any) => void;
     /** palette colors to hide from the popup, keeping hotkey positions */
     excludedColors?: readonly string[];
+    /** allow users to customize the top picks strip by drag & dropping colors
+     * from the picker popup onto it. The value names the
+     * `appState.colorTopPicks` slot the customization is stored in */
+    customizableTopPicks?: keyof AppState["colorTopPicks"];
 }
-export declare const ColorPicker: ({ type, color, onChange, label, elements, palette, topPicks, updateData, appState, excludedColors, }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ColorPicker: import("react").MemoExoticComponent<({ type, color, onChange, label, elements, palette, topPicks, updateData, appState, excludedColors, customizableTopPicks, }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element>;
 export {};

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

@@ -1,8 +1,10 @@
+import type { Theme } from "@excalidraw/element/types";
 interface CustomColorListProps {
+    theme: Theme;
     colors: string[];
     color: string | null;
     onChange: (color: string) => void;
     label: string;
 }
-export declare const CustomColorList: ({ colors, color, onChange, label, }: CustomColorListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CustomColorList: ({ theme, colors, color, onChange, label, }: CustomColorListProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,8 +1,9 @@
 import React from "react";
-import type { ExcalidrawElement } from "@excalidraw/element/types";
+import type { ExcalidrawElement, Theme } from "@excalidraw/element/types";
 import type { ColorPaletteCustom } from "@excalidraw/common";
 import type { ColorPickerType } from "./colorPickerUtils";
 interface PickerProps {
+    theme: Theme;
     color: string | null;
     onChange: (color: string) => void;
     type: ColorPickerType;
@@ -15,6 +16,8 @@ interface PickerProps {
     onEscape: (event: React.KeyboardEvent | KeyboardEvent) => void;
     showHotKey?: boolean;
     excludedColors?: readonly string[];
+    /** present only while the top picks are customized */
+    onResetTopPicks?: () => void;
 }
 export declare const Picker: React.ForwardRefExoticComponent<PickerProps & React.RefAttributes<unknown>>;
 export {};

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

@@ -1,5 +1,7 @@
-import type { ColorPaletteCustom } from "@excalidraw/common";
+import { type ColorPaletteCustom } from "@excalidraw/common";
+import type { Theme } from "@excalidraw/element/types";
 interface PickerColorListProps {
+    theme: Theme;
     palette: ColorPaletteCustom;
     color: string | null;
     onChange: (color: string) => void;
@@ -11,5 +13,5 @@ interface PickerColorListProps {
      */
     excludedColors?: readonly string[];
 }
-declare const PickerColorList: ({ palette, color, onChange, activeShade, showHotKey, excludedColors, }: PickerColorListProps) => import("react/jsx-runtime").JSX.Element;
+declare const PickerColorList: ({ theme, palette, color, onChange, activeShade, showHotKey, excludedColors, }: PickerColorListProps) => import("react/jsx-runtime").JSX.Element;
 export default PickerColorList;

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

@@ -1,9 +1,11 @@
-import type { ColorPaletteCustom } from "@excalidraw/common";
+import { type ColorPaletteCustom } from "@excalidraw/common";
+import type { Theme } from "@excalidraw/element/types";
 interface ShadeListProps {
+    theme: Theme;
     color: string | null;
     onChange: (color: string) => void;
     palette: ColorPaletteCustom;
     showHotKey?: boolean;
 }
-export declare const ShadeList: ({ color, onChange, palette, showHotKey, }: ShadeListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ShadeList: ({ theme, color, onChange, palette, showHotKey, }: ShadeListProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,9 +1,16 @@
+import type { Theme } from "@excalidraw/element/types";
 import type { ColorPickerType } from "./colorPickerUtils";
 interface TopPicksProps {
+    theme: Theme;
     onChange: (color: string) => void;
     type: ColorPickerType;
     activeColor: string | null;
     topPicks?: readonly string[];
+    /** present when the strip is user-customizable — enables the right-click
+     * context menu resetting the strip to its default picks */
+    onReset?: () => void;
+    /** whether custom picks are currently applied (enables the reset item) */
+    isCustomized?: boolean;
 }
-export declare const TopPicks: ({ onChange, type, activeColor, topPicks, }: TopPicksProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const TopPicks: ({ theme, onChange, type, activeColor, topPicks, onReset, isCustomized, }: TopPicksProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

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

@@ -0,0 +1,11 @@
+import type { TopPicksDnD } from "../TopPicksDnD/topPicksDnD";
+export type ColorPickerDnD = TopPicksDnD<string>;
+export declare const ColorPickerDnDContext: import("react").Context<ColorPickerDnD | null>;
+export declare const useColorPickerDnD: () => ColorPickerDnD | null;
+/** pinning colors from the picker popup (palette/shades/custom) or the
+ * active-color trigger to the top-picks strip, and reordering the strip */
+export declare const useColorTopPicksDnD: ({ enabled, picks, onPicksChange, }: {
+    enabled: boolean;
+    picks: readonly string[];
+    onPicksChange: (picks: string[]) => void;
+}) => ColorPickerDnD;

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

@@ -0,0 +1,2 @@
+import "./FileDropOverlay.scss";
+export declare const FileDropOverlay: () => import("react/jsx-runtime").JSX.Element | null;

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

@@ -12,11 +12,14 @@ interface FontPickerProps {
     isOpened: boolean;
     selectedFontFamily: FontFamilyValues | null;
     hoveredFontFamily: FontFamilyValues | null;
+    /** user-customized top picks (`appState.fontTopPicks`) */
+    topPicks: readonly FontFamilyValues[] | null;
     onSelect: (fontFamily: FontFamilyValues) => void;
+    onTopPicksChange: (fontTopPicks: FontFamilyValues[] | null) => void;
     onHover: (fontFamily: FontFamilyValues) => void;
     onLeave: () => void;
     onPopupChange: (open: boolean) => void;
     compactMode?: boolean;
 }
-export declare const FontPicker: React.MemoExoticComponent<({ isOpened, selectedFontFamily, hoveredFontFamily, onSelect, onHover, onLeave, onPopupChange, compactMode, }: FontPickerProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const FontPicker: React.MemoExoticComponent<({ isOpened, selectedFontFamily, hoveredFontFamily, topPicks, onSelect, onTopPicksChange, onHover, onLeave, onPopupChange, compactMode, }: FontPickerProps) => import("react/jsx-runtime").JSX.Element>;
 export {};

package/dist/types/excalidraw/components/FontPicker/FontPickerList.d.ts

@@ -3,6 +3,7 @@ import { type FontFamilyValues } from "@excalidraw/element/types";
 import type { ValueOf } from "@excalidraw/common/utility-types";
 import { DropDownMenuItemBadgeType } from "../dropdownMenu/DropdownMenuItem";
 import type { JSX } from "react";
+import type { ExcalidrawFontFace } from "../../fonts/ExcalidrawFontFace";
 export interface FontDescriptor {
     value: number;
     icon: JSX.Element;
@@ -21,6 +22,10 @@ interface FontPickerListProps {
     onLeave: () => void;
     onOpen: () => void;
     onClose: () => void;
+    /** present only while the top picks are customized */
+    onResetTopPicks?: () => void;
 }
-export declare const FontPickerList: React.MemoExoticComponent<({ selectedFontFamily, hoveredFontFamily, onSelect, onHover, onLeave, onOpen, onClose, }: FontPickerListProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const getFontFamilyIcon: (fontFamily: FontFamilyValues) => JSX.Element;
+export declare const getFontFamilyLabel: (fontFamily: FontFamilyValues, fontFaces: ExcalidrawFontFace[]) => string;
+export declare const FontPickerList: React.MemoExoticComponent<({ selectedFontFamily, hoveredFontFamily, onSelect, onHover, onLeave, onOpen, onClose, onResetTopPicks, }: FontPickerListProps) => import("react/jsx-runtime").JSX.Element>;
 export {};

package/dist/types/excalidraw/components/FontPicker/fontTopPicksDnD.d.ts

@@ -0,0 +1,12 @@
+import type { FontFamilyValues } from "@excalidraw/element/types";
+import type { TopPicksDnD } from "../TopPicksDnD/topPicksDnD";
+export type FontPickerDnD = TopPicksDnD<FontFamilyValues>;
+export declare const FontPickerDnDContext: import("react").Context<FontPickerDnD | null>;
+export declare const useFontPickerDnD: () => FontPickerDnD | null;
+/** pinning fonts from the font picker list to the top-picks strip, and
+ * reordering the strip */
+export declare const useFontTopPicksDnD: ({ enabled, picks, onPicksChange, }: {
+    enabled: boolean;
+    picks: readonly FontFamilyValues[];
+    onPicksChange: (picks: FontFamilyValues[]) => void;
+}) => FontPickerDnD;

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

@@ -41,6 +41,8 @@ type IconButtonProps = (IconButtonBaseProps & {
     onSelect?(data: {
         pointerType: PointerType | null;
     }): void;
+    /** the press that may become a click — e.g. to arm a drag out of the toolbar */
+    onPointerDown?(event: React.PointerEvent<HTMLButtonElement>): void;
 });
 export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<unknown>>;
 export {};

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

@@ -15,9 +15,13 @@ interface Props {
     isItemSelected: (id: LibraryItem["id"] | null) => boolean;
     svgCache: SvgCache;
     itemsRenderedPerBatch: number;
+    /** larger items with their name below */
+    showNames?: boolean;
 }
-export declare const LibraryMenuSectionGrid: ({ children, }: {
+export declare const LibraryMenuSectionGrid: ({ children, showNames, }: {
     children: ReactNode;
+    /** fewer columns, for items rendered with `showNames` */
+    showNames?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const LibraryMenuSection: React.MemoExoticComponent<({ items, onItemSelectToggle, onItemDrag, isItemSelected, onClick, svgCache, itemsRenderedPerBatch, }: Props) => import("react/jsx-runtime").JSX.Element>;
+export declare const LibraryMenuSection: React.MemoExoticComponent<({ items, onItemSelectToggle, onItemDrag, isItemSelected, onClick, svgCache, itemsRenderedPerBatch, showNames, }: Props) => import("react/jsx-runtime").JSX.Element>;
 export {};

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

@@ -1,8 +1,11 @@
 import "./LibraryUnit.scss";
 import type { LibraryItem } from "../types";
 import type { SvgCache } from "../hooks/useLibraryItemSvg";
-export declare const LibraryUnit: import("react").MemoExoticComponent<({ id, elements, isPending, onClick, selected, onToggle, onDrag, svgCache, }: {
+export declare const LibraryUnit: import("react").MemoExoticComponent<({ id, name, showName, elements, isPending, onClick, selected, onToggle, onDrag, svgCache, }: {
     id: LibraryItem["id"] | /** for pending item */ null;
+    name?: LibraryItem["name"];
+    /** render larger, with the name below the item */
+    showName?: boolean;
     elements?: LibraryItem["elements"];
     isPending?: boolean;
     onClick: (id: LibraryItem["id"] | null) => void;
@@ -11,4 +14,6 @@ export declare const LibraryUnit: import("react").MemoExoticComponent<({ id, ele
     onDrag: (id: string, event: React.DragEvent) => void;
     svgCache: SvgCache;
 }) => import("react/jsx-runtime").JSX.Element>;
-export declare const EmptyLibraryUnit: () => import("react/jsx-runtime").JSX.Element;
+export declare const EmptyLibraryUnit: ({ showName }: {
+    showName?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;