@excalidraw/excalidraw 0.18.0-abeeaeb → 0.18.0-afa3a65

package/CHANGELOG.md

@@ -13,6 +13,17 @@ Please add the latest change on the top under the correct section.
 
 ## Unreleased
 
+### Sticky notes (2026-09-06) [#XXXX](https://github.com/excalidraw/excalidraw/pull/XXXX)
+
+- New `stickynote` element type and toolbar tool (`N`): an always-filled, flat-rendered note whose label auto-fits — the font shrinks from the user's size down to a minimum, and only then does the note grow in height (it never shrinks below the height the user gave it). Click to place a 250×250 note, drag to size it (previewed at the dragged size, snapped to a font-aware minimum on release); text editing starts right away.
+- Element model: the note carries `baseHeight` (the user's height; `height ≥ baseHeight`), its label carries `baseFontSize` (the user's font ceiling, `null`/absent on any other text) while `fontSize` holds the fitted size. Read a text element's user-facing size through `getBaseFontSize(text, elementsMap)`.
+- Sticky notes are their own color domain: new `appState.currentItemStickynoteStrokeColor` (the note's text color) and `appState.currentItemStickynoteBackgroundColor` defaults, and new customizable top-pick slots `appState.colorTopPicks.stickyNoteStroke` / `stickyNoteBackground`. The stroke and background pickers, both eyedroppers and paste-styles resolve their target (regular / sticky / mixed) at execution time. A note and its label share one ink (the stroke picker reads "Text color" for notes): coloring the label while editing colors the note too, binding a colored text gives the note its color, and the creation-date footer always paints in that ink.
+- Skeleton API: `convertToExcalidrawElements([{ type: "stickynote", x, y, label?: { text, fontSize? } }])` creates a note (and fitted label); see the element-skeleton docs.
+- Tools can be dragged out of the toolbar: drag the sticky note button onto the canvas to drop a default-sized note where you release it, previewed translucently while dragging (nothing reaches the scene, history or collaborators until the drop; Escape cancels). The mechanism is generic — other tools can opt in.
+- Toolbar: on desktop and tablet the image tool moved into the "More tools" menu (still `9`; `UIOptions.tools.image` keeps hiding it; the mobile toolbar keeps its image slot), and tool badges now show the letter shortcuts (`R`, `T`, `N`, …) instead of the numbers, which are no longer contiguous. The number keys keep working.
+- Each note shows its creation date (`element.created`) in a footer band — "7 Sep", or "7 Sep 2025" once the year differs — on canvas and in SVG/PNG exports. The band is reserved in the note's layout, so the label never overlaps it; notes without a timestamp keep the band empty.
+- Resize semantics: a note's corners resize proportionally by default and scale the label's font ceiling with the note (Shift frees them); its edges resize freely by default (Shift constrains them). Drag-creation is proportional by default too (Shift frees it) and never touches the font ceiling. Width-only gestures keep the base height, height gestures set it, aspect-locked multi-select and Stats group edits scale the ceiling; flips preserve everything. Arrows bound to a note follow it as it grows.
+
 ## Excalidraw API
 
 ### Host-controlled active tool (2026-07-14) [#11665](https://github.com/excalidraw/excalidraw/pull/11665)

package/dist/dev/{chunk-6WU4HLK7.js → chunk-N7DCBD6G.js}

@@ -34,7 +34,8 @@ import {
   STATS_PANELS,
   THEME,
   DEFAULT_GRID_STEP,
-  isTestEnv
+  isTestEnv,
+  DEFAULT_STICKY_NOTE_BG
 } from "@excalidraw/common";
 var defaultExportScale = EXPORT_SCALES.includes(devicePixelRatio) ? devicePixelRatio : 1;
 var getDefaultAppState = () => {
@@ -52,6 +53,8 @@ var getDefaultAppState = () => {
     currentItemStrokeVariability: "constant",
     currentItemStartArrowhead: null,
     currentItemStrokeColor: DEFAULT_ELEMENT_PROPS.strokeColor,
+    currentItemStickynoteStrokeColor: DEFAULT_ELEMENT_PROPS.strokeColor,
+    currentItemStickynoteBackgroundColor: DEFAULT_STICKY_NOTE_BG,
     currentItemRoundness: isTestEnv() ? "sharp" : "round",
     currentItemArrowType: ARROW_TYPE.round,
     currentItemStrokeStyle: DEFAULT_ELEMENT_PROPS.strokeStyle,
@@ -147,7 +150,9 @@ var getDefaultAppState = () => {
     colorTopPicks: {
       elementStroke: null,
       elementBackground: null,
-      bucketFill: null
+      bucketFill: null,
+      stickyNoteStroke: null,
+      stickyNoteBackground: null
     }
   };
 };
@@ -179,6 +184,16 @@ var APP_STATE_STORAGE_CONF = /* @__PURE__ */ ((config) => config)({
   },
   currentItemStartArrowhead: { browser: true, export: false, server: false },
   currentItemStrokeColor: { browser: true, export: false, server: false },
+  currentItemStickynoteStrokeColor: {
+    browser: true,
+    export: false,
+    server: false
+  },
+  currentItemStickynoteBackgroundColor: {
+    browser: true,
+    export: false,
+    server: false
+  },
   currentItemStrokeStyle: { browser: true, export: false, server: false },
   currentItemStrokeWidthKey: { browser: true, export: false, server: false },
   currentItemTextAlign: { browser: true, export: false, server: false },
@@ -607,6 +622,8 @@ var getScrollToContentState = (elements, appState) => {
 // scene/index.ts
 import {
   hasBackground,
+  hasFillStyle,
+  hasRoughness,
   hasStrokeWidth,
   hasStrokeStyle,
   hasFreedrawMode,
@@ -2984,8 +3001,9 @@ var XiaolaiFontFaces = [
 
 // fonts/Fonts.ts
 var _Fonts = class _Fonts {
-  constructor(scene) {
+  constructor(scene, ownerDocument = document) {
     __publicField(this, "scene");
+    __publicField(this, "ownerDocument");
     /**
      * Get all the font families for the given scene.
      */
@@ -3037,9 +3055,14 @@ var _Fonts = class _Fonts {
       const charsPerFamily = _Fonts.getCharsPerFamily(
         this.scene.getNonDeletedElements()
       );
-      return _Fonts.loadFontFaces(sceneFamilies, charsPerFamily);
+      return _Fonts.loadFontFaces(
+        sceneFamilies,
+        charsPerFamily,
+        this.ownerDocument
+      );
     });
     this.scene = scene;
+    this.ownerDocument = ownerDocument;
   }
   static get registered() {
     if (!_Fonts._registered) {
@@ -3077,33 +3100,37 @@ var _Fonts = class _Fonts {
     const fontFaces = await new PromisePool(iterator, concurrency).all();
     return Array.from(new Set(fontFaces));
   }
-  static async loadFontFaces(fontFamilies, charsPerFamily) {
+  static async loadFontFaces(fontFamilies, charsPerFamily, ownerDocument) {
     for (const { fontFaces: fontFaces2, metadata } of _Fonts.registered.values()) {
       if (metadata.local) {
         continue;
       }
       for (const { fontFace } of fontFaces2) {
-        if (!window.document.fonts.has(fontFace)) {
-          window.document.fonts.add(fontFace);
+        if (!ownerDocument.fonts.has(fontFace)) {
+          ownerDocument.fonts.add(fontFace);
         }
       }
     }
-    const iterator = _Fonts.fontFacesLoader(fontFamilies, charsPerFamily);
+    const iterator = _Fonts.fontFacesLoader(
+      fontFamilies,
+      charsPerFamily,
+      ownerDocument
+    );
     const concurrency = 10;
     const fontFaces = await new PromisePool(iterator, concurrency).all();
     return fontFaces.flat().filter(Boolean);
   }
-  static *fontFacesLoader(fontFamilies, charsPerFamily) {
+  static *fontFacesLoader(fontFamilies, charsPerFamily, ownerDocument) {
     for (const [index, fontFamily] of fontFamilies.entries()) {
       const font = getFontString({
         fontFamily,
         fontSize: FONT_SIZES.sm
       });
       const text = _Fonts.getCharacters(charsPerFamily, fontFamily);
-      if (!window.document.fonts.check(font, text)) {
+      if (!ownerDocument.fonts.check(font, text)) {
         yield promiseTry3(async () => {
           try {
-            const fontFaces = await window.document.fonts.load(font, text);
+            const fontFaces = await ownerDocument.fonts.load(font, text);
             return [index, fontFaces];
           } catch (e) {
             console.error(
@@ -3246,10 +3273,10 @@ __publicField(_Fonts, "_initialized", false);
 /**
  * Load font faces for passed elements - use when the scene is unavailable (i.e. export).
  */
-__publicField(_Fonts, "loadElementsFonts", async (elements) => {
+__publicField(_Fonts, "loadElementsFonts", async (elements, ownerDocument = document) => {
   const fontFamilies = _Fonts.getUniqueFamilies(elements);
   const charsPerFamily = _Fonts.getCharsPerFamily(elements);
-  return _Fonts.loadFontFaces(fontFamilies, charsPerFamily);
+  return _Fonts.loadFontFaces(fontFamilies, charsPerFamily, ownerDocument);
 });
 var Fonts = _Fonts;
 
@@ -3343,6 +3370,8 @@ var isPointHittingLink = (element, elementsMap, appState, [x, y], isMobile) => {
 
 // renderer/helpers.ts
 import { COLOR_WHITE, THEME as THEME2, applyDarkModeFilter } from "@excalidraw/common";
+var DEFAULT_SELECTION_COLOR = "#6965db";
+var getSelectionColor = (element) => element && getComputedStyle(element).getPropertyValue("--color-selection").trim() || DEFAULT_SELECTION_COLOR;
 var fillCircle = (context, cx, cy, radius, stroke, fill = true) => {
   context.beginPath();
   context.arc(cx, cy, radius, 0, Math.PI * 2);
@@ -3353,6 +3382,15 @@ var fillCircle = (context, cx, cy, radius, stroke, fill = true) => {
     context.stroke();
   }
 };
+var snapScrollToDevicePixels = (appState, scale) => {
+  const devicePixels = appState.zoom.value * scale;
+  if (!(devicePixels > 0)) {
+    return appState;
+  }
+  const scrollX = Math.round(appState.scrollX * devicePixels) / devicePixels;
+  const scrollY = Math.round(appState.scrollY * devicePixels) / devicePixels;
+  return scrollX === appState.scrollX && scrollY === appState.scrollY ? appState : { ...appState, scrollX, scrollY };
+};
 var getNormalizedCanvasDimensions = (canvas, scale) => {
   return [canvas.width / scale, canvas.height / scale];
 };
@@ -3417,28 +3455,41 @@ var GridLineColor = {
     regular: applyDarkModeFilter2("#e5e5e5")
   }
 };
-var strokeGrid = (context, gridSize, gridStep, scrollX, scrollY, zoom, theme, width, height) => {
+var strokeGrid = (context, gridSize, gridStep, scrollX, scrollY, zoom, theme, width, height, scale) => {
   const offsetX = scrollX % gridSize - gridSize;
   const offsetY = scrollY % gridSize - gridSize;
   const actualGridSize = gridSize * zoom.value;
   const spaceWidth = 1 / zoom.value;
+  const devicePixels = zoom.value * scale;
+  const snap = (position, maxWidthInCssPixels) => {
+    const widthInDevicePixels = Math.min(
+      scale,
+      maxWidthInCssPixels * devicePixels
+    );
+    if (widthInDevicePixels < 1) {
+      return { position, lineWidth: widthInDevicePixels / devicePixels };
+    }
+    const wholeWidth = Math.round(widthInDevicePixels);
+    const center = wholeWidth % 2 ? 0.5 : 0;
+    return {
+      position: (Math.round(position * devicePixels - center) + center) / devicePixels,
+      lineWidth: wholeWidth / devicePixels
+    };
+  };
   context.save();
-  if (zoom.value === 1) {
-    context.translate(offsetX % 1 ? 0 : 0.5, offsetY % 1 ? 0 : 0.5);
-  }
   for (let x = offsetX; x < offsetX + width + gridSize * 2; x += gridSize) {
     const isBold = gridStep > 1 && Math.round(x - scrollX) % (gridStep * gridSize) === 0;
     if (!isBold && actualGridSize < 10) {
       continue;
     }
-    const lineWidth = Math.min(1 / zoom.value, isBold ? 4 : 1);
+    const { position, lineWidth } = snap(x, isBold ? 4 : 1);
     context.lineWidth = lineWidth;
     const lineDash = [lineWidth * 3, spaceWidth + (lineWidth + spaceWidth)];
     context.beginPath();
     context.setLineDash(isBold ? [] : lineDash);
     context.strokeStyle = isBold ? GridLineColor[theme].bold : GridLineColor[theme].regular;
-    context.moveTo(x, offsetY - gridSize);
-    context.lineTo(x, Math.ceil(offsetY + height + gridSize * 2));
+    context.moveTo(position, offsetY - gridSize);
+    context.lineTo(position, Math.ceil(offsetY + height + gridSize * 2));
     context.stroke();
   }
   for (let y = offsetY; y < offsetY + height + gridSize * 2; y += gridSize) {
@@ -3446,14 +3497,14 @@ var strokeGrid = (context, gridSize, gridStep, scrollX, scrollY, zoom, theme, wi
     if (!isBold && actualGridSize < 10) {
       continue;
     }
-    const lineWidth = Math.min(1 / zoom.value, isBold ? 4 : 1);
+    const { position, lineWidth } = snap(y, isBold ? 4 : 1);
     context.lineWidth = lineWidth;
     const lineDash = [lineWidth * 3, spaceWidth + (lineWidth + spaceWidth)];
     context.beginPath();
     context.setLineDash(isBold ? [] : lineDash);
     context.strokeStyle = isBold ? GridLineColor[theme].bold : GridLineColor[theme].regular;
-    context.moveTo(offsetX - gridSize, y);
-    context.lineTo(Math.ceil(offsetX + width + gridSize * 2), y);
+    context.moveTo(offsetX - gridSize, position);
+    context.lineTo(Math.ceil(offsetX + width + gridSize * 2), position);
     context.stroke();
   }
   context.restore();
@@ -3537,13 +3588,14 @@ var _renderStaticScene = ({
   allElementsMap,
   visibleElements,
   scale,
-  appState,
+  appState: unsnappedAppState,
   renderConfig
 }) => {
   if (canvas === null) {
     return;
   }
   const { renderGrid = true, isExporting } = renderConfig;
+  const appState = isExporting ? unsnappedAppState : snapScrollToDevicePixels(unsnappedAppState, scale);
   const [normalizedWidth, normalizedHeight] = getNormalizedCanvasDimensions(
     canvas,
     scale
@@ -3568,7 +3620,8 @@ var _renderStaticScene = ({
       appState.zoom,
       renderConfig.theme,
       normalizedWidth / appState.zoom.value,
-      normalizedHeight / appState.zoom.value
+      normalizedHeight / appState.zoom.value,
+      scale
     );
   }
   const groupsToBeAddedToFrame = /* @__PURE__ */ new Set();
@@ -3730,6 +3783,7 @@ var renderStaticScene = (renderConfig, throttle) => {
 
 // renderer/staticSvgScene.ts
 import {
+  BOUND_TEXT_PADDING,
   FRAME_STYLE as FRAME_STYLE2,
   MAX_DECIMALS_FOR_SVG_EXPORT,
   SVG_NS,
@@ -3740,7 +3794,11 @@ import {
   isTestEnv as isTestEnv2,
   getVerticalOffset,
   applyDarkModeFilter as applyDarkModeFilter3,
-  MIME_TYPES as MIME_TYPES4
+  MIME_TYPES as MIME_TYPES4,
+  STICKY_NOTE_EDGE_SHADOW_OPACITY,
+  STICKY_NOTE_EDGE_SHADOW_WIDTH,
+  STICKY_NOTE_FOOTER,
+  STICKY_NOTE_SHADOW_OPACITY
 } from "@excalidraw/common";
 import { normalizeLink, toValidURL } from "@excalidraw/common";
 import { hashString } from "@excalidraw/element";
@@ -3761,6 +3819,10 @@ import {
 import { getContainingFrame } from "@excalidraw/element";
 import { getCornerRadius, isPathALoop } from "@excalidraw/element";
 import { ShapeCache as ShapeCache2 } from "@excalidraw/element";
+import {
+  getStickyNoteFooter,
+  getStickyNotePathCommands
+} from "@excalidraw/element";
 import { getElementAbsoluteCoords as getElementAbsoluteCoords3 } from "@excalidraw/element";
 var roughSVGDrawWithPrecision = (rsvg, drawable, precision) => {
   if (typeof precision === "undefined") {
@@ -3825,6 +3887,99 @@ var renderElementToSvg = (element, elementsMap, rsvg, svgRoot, files, offsetX, o
     case "selection": {
       throw new Error("Selection rendering is not supported for SVG");
     }
+    case "stickynote": {
+      const getPathData = (commands2) => commands2.map((command) => {
+        if (command.type === "move") {
+          return `M ${command.point.x} ${command.point.y}`;
+        }
+        if (command.type === "line") {
+          return `L ${command.point.x} ${command.point.y}`;
+        }
+        return `Q ${command.control.x} ${command.control.y} ${command.point.x} ${command.point.y}`;
+      }).join(" ").concat(" Z");
+      const createPath = (commands2, fill, fillOpacity) => {
+        const path = svgRoot.ownerDocument.createElementNS(SVG_NS, "path");
+        path.setAttribute("d", getPathData(commands2));
+        path.setAttribute("fill", fill);
+        if (typeof fillOpacity !== "undefined") {
+          path.setAttribute("fill-opacity", `${fillOpacity}`);
+        }
+        path.setAttribute("stroke", "none");
+        return path;
+      };
+      const group = svgRoot.ownerDocument.createElementNS(SVG_NS, "g");
+      group.setAttribute(
+        "transform",
+        `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`
+      );
+      if (opacity !== 1) {
+        group.setAttribute("opacity", `${opacity}`);
+      }
+      const shadow = createPath(
+        getStickyNotePathCommands(element, { shadow: true }),
+        "#000",
+        STICKY_NOTE_SHADOW_OPACITY
+      );
+      const commands = getStickyNotePathCommands(element);
+      const rect = createPath(
+        commands,
+        applyDarkModeFilter3(
+          element.backgroundColor,
+          renderConfig.theme === THEME4.DARK
+        )
+      );
+      const clipPath = svgRoot.ownerDocument.createElementNS(
+        SVG_NS,
+        "clipPath"
+      );
+      clipPath.setAttribute("id", `sticky-note-clipPath-${element.id}`);
+      clipPath.setAttribute("clipPathUnits", "userSpaceOnUse");
+      clipPath.appendChild(createPath(commands, "#000"));
+      addToRoot(clipPath, element);
+      const edgeShadow = createPath(commands, "none");
+      edgeShadow.setAttribute("stroke", "#000");
+      edgeShadow.setAttribute(
+        "stroke-opacity",
+        `${STICKY_NOTE_EDGE_SHADOW_OPACITY}`
+      );
+      edgeShadow.setAttribute(
+        "stroke-width",
+        `${STICKY_NOTE_EDGE_SHADOW_WIDTH * 2}`
+      );
+      edgeShadow.setAttribute("clip-path", `url(#${clipPath.id})`);
+      group.appendChild(shadow);
+      group.appendChild(rect);
+      group.appendChild(edgeShadow);
+      const footer = getStickyNoteFooter(element);
+      if (footer) {
+        const dateText = svgRoot.ownerDocument.createElementNS(SVG_NS, "text");
+        dateText.setAttribute("x", `${footer.x}`);
+        dateText.setAttribute("y", `${footer.y}`);
+        dateText.setAttribute("font-family", STICKY_NOTE_FOOTER.fontFamily);
+        dateText.setAttribute("font-size", `${STICKY_NOTE_FOOTER.fontSize}px`);
+        dateText.setAttribute("text-anchor", "end");
+        dateText.setAttribute("direction", "ltr");
+        dateText.setAttribute(
+          "fill",
+          applyDarkModeFilter3(
+            element.strokeColor,
+            renderConfig.theme === THEME4.DARK
+          )
+        );
+        dateText.setAttribute("fill-opacity", `${STICKY_NOTE_FOOTER.opacity}`);
+        dateText.textContent = footer.text;
+        group.appendChild(dateText);
+      }
+      const g = maybeWrapNodesInFrameClipPath(
+        element,
+        root,
+        [group],
+        renderConfig.frameRendering,
+        elementsMap
+      );
+      addToRoot(g || group, element);
+      break;
+    }
     case "rectangle":
     case "diamond":
     case "ellipse": {
@@ -3974,13 +4129,19 @@ var renderElementToSvg = (element, elementsMap, rsvg, svgRoot, files, offsetX, o
           boundText,
           elementsMap
         );
-        const maskX = offsetX + boundTextCoords.x - element.x;
-        const maskY = offsetY + boundTextCoords.y - element.y;
+        const maskX = offsetX + boundTextCoords.x - element.x - BOUND_TEXT_PADDING;
+        const maskY = offsetY + boundTextCoords.y - element.y - BOUND_TEXT_PADDING;
         maskRectInvisible.setAttribute("x", maskX.toString());
         maskRectInvisible.setAttribute("y", maskY.toString());
         maskRectInvisible.setAttribute("fill", "#000");
-        maskRectInvisible.setAttribute("width", `${boundText.width}`);
-        maskRectInvisible.setAttribute("height", `${boundText.height}`);
+        maskRectInvisible.setAttribute(
+          "width",
+          `${boundText.width + BOUND_TEXT_PADDING * 2}`
+        );
+        maskRectInvisible.setAttribute(
+          "height",
+          `${boundText.height + BOUND_TEXT_PADDING * 2}`
+        );
         maskRectInvisible.setAttribute("opacity", "1");
         maskPath.appendChild(maskRectInvisible);
       }
@@ -4674,11 +4835,17 @@ var getCanvasSize = (elements, exportPadding) => {
 };
 
 // data/restore.ts
-import { isFiniteNumber, isValidPoint, pointFrom as pointFrom3 } from "@excalidraw/math";
+import {
+  clamp as clamp3,
+  isFiniteNumber,
+  isValidPoint,
+  pointFrom as pointFrom3
+} from "@excalidraw/math";
 import {
   colorToHex,
   COLOR_TOP_PICKS_SLOTS,
   DEFAULT_FONT_FAMILY as DEFAULT_FONT_FAMILY2,
+  DEFAULT_FONT_SIZE as DEFAULT_FONT_SIZE2,
   DEFAULT_STROKE_STREAMLINE,
   DEFAULT_TEXT_ALIGN as DEFAULT_TEXT_ALIGN2,
   DEFAULT_VERTICAL_ALIGN,
@@ -4696,7 +4863,8 @@ import {
   normalizeLink as normalizeLink2,
   getLineHeight,
   STROKE_WIDTH,
-  STROKE_WIDTH_KEYS
+  STROKE_WIDTH_KEYS,
+  isTransparent
 } from "@excalidraw/common";
 import {
   calculateFixedPointForNonElbowArrowBinding,
@@ -4713,8 +4881,17 @@ import {
   validateElbowPoints
 } from "@excalidraw/element";
 import { LinearElementEditor as LinearElementEditor2 } from "@excalidraw/element";
-import { bumpVersion } from "@excalidraw/element";
-import { getContainerElement as getContainerElement3 } from "@excalidraw/element";
+import {
+  bumpVersion,
+  getStickyNoteLayout,
+  isStickyNoteBoundText,
+  normalizeStickyNote,
+  normalizeStickyNoteBackgroundColor,
+  normalizeStickyNoteFontSize,
+  normalizeStickyNoteStrokeColor
+} from "@excalidraw/element";
+import { getBoundTextElement as getBoundTextElement3, getContainerElement as getContainerElement3 } from "@excalidraw/element";
+import { isStickyNoteElement } from "@excalidraw/element";
 import { detectLineHeight } from "@excalidraw/element";
 import {
   isArrowBoundToElement,
@@ -4802,6 +4979,7 @@ var AllowedExcalidrawActiveTools = {
   image: true,
   arrow: true,
   freedraw: true,
+  stickynote: true,
   eraser: false,
   custom: true,
   frame: true,
@@ -4945,6 +5123,7 @@ var restoreElementWithProperties = (element, extra) => {
     } : null,
     boundElements: element.boundElementIds ? element.boundElementIds.map((id) => ({ type: "arrow", id })) : element.boundElements ?? [],
     updated: element.updated ?? getUpdatedTimestamp(),
+    created: element.created ?? null,
     link: element.link ? normalizeLink2(element.link) : null,
     locked: element.locked ?? false
   };
@@ -4976,6 +5155,9 @@ var restoreElement = (element, targetElementsMap, existingElementsMap, opts) =>
         fontSize = parseFloat(fontPx);
         fontFamily = getFontFamilyByName(_fontFamily);
       }
+      if (!isFiniteNumber(fontSize)) {
+        fontSize = DEFAULT_FONT_SIZE2;
+      }
       const text = typeof element.text === "string" && element.text || "";
       const lineHeight = element.lineHeight || (element.height ? (
         // detect line-height from current element height and font-size
@@ -4994,7 +5176,11 @@ var restoreElement = (element, targetElementsMap, existingElementsMap, opts) =>
         containerId: element.containerId ?? null,
         originalText: element.originalText || text,
         autoResize: element.autoResize ?? true,
-        lineHeight
+        lineHeight,
+        labelPosition: isFiniteNumber(element.labelPosition) ? clamp3(element.labelPosition, 0, 1) : null,
+        // only meaningful for sticky note labels; reconciled against the
+        // container in `restoreStickyNotes` once bindings are repaired
+        baseFontSize: isFiniteNumber(element.baseFontSize) ? normalizeStickyNoteFontSize(element.baseFontSize) : null
       });
       if (opts?.deleteInvisibleElements && !text && !element.isDeleted) {
         element = { ...element, originalText: text, isDeleted: true };
@@ -5115,6 +5301,12 @@ var restoreElement = (element, targetElementsMap, existingElementsMap, opts) =>
     case "iframe":
     case "embeddable":
       return restoreElementWithProperties(element, {});
+    case "stickynote":
+      return normalizeStickyNote(
+        restoreElementWithProperties(element, {
+          baseHeight: element.baseHeight ?? element.maxHeight ?? element.height
+        })
+      );
     case "magicframe":
     case "frame":
       return restoreElementWithProperties(element, {
@@ -5185,6 +5377,43 @@ var repairFrameMembership = (element, elementsMap) => {
     }
   }
 };
+var restoreStickyNotes = (elements, elementsMap, opts) => {
+  for (const element of elements) {
+    if (!isTextElement4(element) || element.isDeleted) {
+      continue;
+    }
+    if (isStickyNoteBoundText(element, elementsMap)) {
+      const container = elementsMap.get(element.containerId);
+      const strokeColor = normalizeStickyNoteStrokeColor(
+        isTransparent(element.strokeColor) ? container?.strokeColor : element.strokeColor
+      );
+      Object.assign(element, {
+        baseFontSize: normalizeStickyNoteFontSize(
+          element.baseFontSize ?? element.fontSize
+        ),
+        strokeColor
+      });
+      if (container && container.strokeColor !== strokeColor) {
+        Object.assign(container, { strokeColor });
+      }
+    } else if (element.baseFontSize != null) {
+      Object.assign(element, { baseFontSize: null });
+    }
+  }
+  if (opts.refreshDimensions) {
+    for (const element of elements) {
+      if (!isStickyNoteElement(element) || element.isDeleted) {
+        continue;
+      }
+      const textElement = getBoundTextElement3(element, elementsMap);
+      const layout = getStickyNoteLayout(element, textElement);
+      Object.assign(element, layout.container);
+      if (textElement && layout.text) {
+        Object.assign(textElement, layout.text);
+      }
+    }
+  }
+};
 var restoreElements = (targetElements, existingElements, opts) => {
   const existingIds = /* @__PURE__ */ new Set();
   const targetElementsMap = arrayToMap3(targetElements || []);
@@ -5239,7 +5468,8 @@ var restoreElements = (targetElements, existingElements, opts) => {
     } else if (element.boundElements) {
       repairContainerElement(element, restoredElementsMap);
     }
-    if (opts.refreshDimensions && isTextElement4(element)) {
+    if (opts.refreshDimensions && isTextElement4(element) && // sticky labels are refitted together with their note below
+    !isStickyNoteBoundText(element, restoredElementsMap)) {
       Object.assign(
         element,
         refreshTextDimensions(
@@ -5258,6 +5488,9 @@ var restoreElements = (targetElements, existingElements, opts) => {
       }
     }
   }
+  restoreStickyNotes(restoredElements, restoredElementsMap, {
+    refreshDimensions: !!opts.refreshDimensions
+  });
   const repairedElements = repairBoundTextElementOrder(restoredElements);
   return repairedElements.map((element) => {
     if (isElbowArrow(element) && !isArrowBoundToElement(element) && !validateElbowPoints(element.points)) {
@@ -5378,6 +5611,12 @@ var restoreAppState = (appState, localAppState) => {
     ),
     bucketFill: restoreColorTopPicksList(
       nextAppState.colorTopPicks?.bucketFill
+    ),
+    stickyNoteStroke: restoreColorTopPicksList(
+      nextAppState.colorTopPicks?.stickyNoteStroke
+    ),
+    stickyNoteBackground: restoreColorTopPicksList(
+      nextAppState.colorTopPicks?.stickyNoteBackground
     )
   };
   if (appState.currentItemStrokeWidth !== void 0) {
@@ -5412,6 +5651,12 @@ var restoreAppState = (appState, localAppState) => {
     gridStep: getNormalizedGridStep(
       isFiniteNumber(appState.gridStep) ? appState.gridStep : DEFAULT_GRID_STEP2
     ),
+    currentItemStickynoteStrokeColor: normalizeStickyNoteStrokeColor(
+      nextAppState.currentItemStickynoteStrokeColor
+    ),
+    currentItemStickynoteBackgroundColor: normalizeStickyNoteBackgroundColor(
+      nextAppState.currentItemStickynoteBackgroundColor
+    ),
     editingFrame: null
   };
 };
@@ -5455,7 +5700,7 @@ var parseFileContents = async (blob) => {
   let contents;
   if (blob.type === MIME_TYPES6.png) {
     try {
-      return await (await import("./data/image-OPX5T4TO.js")).decodePngMetadata(blob);
+      return await (await import("./data/image-KWAGZKDR.js")).decodePngMetadata(blob);
     } catch (error) {
       if (error.message === "INVALID") {
         throw new ImageSceneDataError(
@@ -5535,19 +5780,20 @@ var loadSceneOrLibraryFromBlob = async (blob, localAppState, localElements, file
       throw error;
     }
     if (isValidExcalidrawData(data)) {
+      const elements = restoreElements(data.elements, localElements, {
+        repairBindings: true,
+        deleteInvisibleElements: true
+      });
       return {
         type: MIME_TYPES6.excalidraw,
         data: {
-          elements: restoreElements(data.elements, localElements, {
-            repairBindings: true,
-            deleteInvisibleElements: true
-          }),
+          elements,
           appState: restoreAppState(
             {
               theme: localAppState?.theme,
               fileHandle: fileHandle || blob.handle || null,
               ...cleanAppStateForExport(data.appState || {}),
-              ...localAppState ? getScrollToContentState(data.elements || [], localAppState) : {}
+              ...localAppState ? getScrollToContentState(elements, localAppState) : {}
             },
             localAppState
           ),
@@ -5871,6 +6117,8 @@ export {
   getSelectedElements,
   getTargetElements,
   hasBackground,
+  hasFillStyle,
+  hasRoughness,
   hasStrokeWidth,
   hasStrokeStyle,
   hasFreedrawMode,
@@ -5894,7 +6142,9 @@ export {
   saveLibraryAsJSON,
   getLinkHandleFromCoords,
   isPointHittingLink,
+  getSelectionColor,
   fillCircle,
+  snapScrollToDevicePixels,
   getNormalizedCanvasDimensions,
   bootstrapCanvas,
   strokeRectWithRotation_simple,
@@ -5931,4 +6181,4 @@ export {
   createFile,
   normalizeFile
 };
-//# sourceMappingURL=chunk-6WU4HLK7.js.map
+//# sourceMappingURL=chunk-N7DCBD6G.js.map