@overtone-art/canvas-editor-core 0.6.2 → 0.6.4

package/dist/index.js

@@ -71,6 +71,7 @@ __export(index_exports, {
   exportPNG: () => exportPNG,
   exportPrintArea: () => exportPrintArea,
   exportSVG: () => exportSVG,
+  fitTextWidth: () => fitTextWidth,
   fitToBox: () => fitToBox,
   generateId: () => generateId,
   isCssColor: () => isCssColor,
@@ -96,7 +97,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/editor.ts
-var import_fabric19 = require("fabric");
+var import_fabric20 = require("fabric");
 
 // src/events.ts
 var EventEmitter = class {
@@ -1225,10 +1226,63 @@ var CropController = class {
 var STROKE2 = "#22c55e";
 
 // src/pattern/pattern-manager.ts
-var import_fabric5 = require("fabric");
+var import_fabric6 = require("fabric");
 
 // src/pattern/tiled-pattern-object.ts
+var import_fabric5 = require("fabric");
+
+// src/text-fit.ts
 var import_fabric4 = require("fabric");
+var TEXT_FIT_SLACK = 0.5;
+var MEASURE_WIDTH = 1e5;
+function unwrappedWidth(text) {
+  const authored = text.width;
+  try {
+    text.set({ width: MEASURE_WIDTH });
+    text.initDimensions?.();
+    const measured = text.calcTextWidth?.() ?? authored;
+    return Number.isFinite(measured) && measured > 0 ? measured : authored;
+  } finally {
+    text.set({ width: authored });
+    text.initDimensions?.();
+  }
+}
+function asText(object) {
+  if (!object) return null;
+  const text = object;
+  return typeof text.text === "string" && typeof text.calcTextWidth === "function" ? text : null;
+}
+function textInk(text) {
+  const boxWidth = Math.max(0, text.width ?? 0);
+  const measured = text.calcTextWidth?.() ?? boxWidth;
+  const width = Math.max(1, Math.min(boxWidth, Number.isFinite(measured) ? measured : boxWidth));
+  const slack = (boxWidth - width) / 2;
+  const align = text.textAlign ?? "left";
+  if (align.includes("center")) return { width, dx: 0 };
+  const flip = text.flipX ? -1 : 1;
+  return { width, dx: flip * (align.includes("right") ? slack : -slack) };
+}
+function fitTextWidth(object) {
+  const text = asText(object);
+  if (!text || text.path) return false;
+  const before = textInk(text);
+  const fitted = unwrappedWidth(text) + TEXT_FIT_SLACK;
+  if (Math.abs(fitted - text.width) < TEXT_FIT_SLACK) return false;
+  const centre = text.getCenterPoint();
+  text.set({ width: fitted });
+  text.initDimensions?.();
+  const after = textInk(text);
+  const shift = (before.dx - after.dx) * (text.scaleX ?? 1);
+  const radians = (text.angle ?? 0) * Math.PI / 180;
+  const moved = new import_fabric4.Point(
+    centre.x + shift * Math.cos(radians),
+    centre.y + shift * Math.sin(radians)
+  );
+  text.setPositionByOrigin(moved, "center", "center");
+  text.setCoords();
+  text.dirty = true;
+  return true;
+}
 
 // src/pattern/tile-geometry.ts
 var MAX_TILES_PER_AXIS = 200;
@@ -1241,13 +1295,13 @@ function computeTilePositions(config, targetW, targetH, baseW, baseH, origin) {
   const tileH = Math.max(minTile, baseH * (1 + config.verticalSpacing / 100));
   const cols = Math.ceil(span / tileW) + 2;
   const rows = Math.ceil(span / tileH) + 2;
-  const halfCols = Math.ceil(cols / 2);
-  const halfRows = Math.ceil(rows / 2);
+  const [colFrom, colTo] = axisRange(config.horizontalLimit, Math.ceil(cols / 2));
+  const [rowFrom, rowTo] = axisRange(config.verticalLimit, Math.ceil(rows / 2));
   const shiftX = tileW * (clampOffset(config.offsetX) / 100);
   const shiftY = tileH * (clampOffset(config.offsetY) / 100);
   const placements = [];
-  for (let j = -halfRows; j <= halfRows; j++) {
-    for (let i = -halfCols; i <= halfCols; i++) {
+  for (let j = rowFrom; j <= rowTo; j++) {
+    for (let i = colFrom; i <= colTo; i++) {
       let x = i * tileW + shiftX;
       let y = j * tileH + shiftY;
       if (config.mode === "brick-horizontal" && mod2(j) === 1) {
@@ -1277,6 +1331,12 @@ function drawTiles(ctx, img, config, targetW, targetH, baseW, baseH, origin, dra
   }
   ctx.restore();
 }
+function axisRange(limit, half) {
+  const count = Number.isFinite(limit) ? Math.floor(limit) : 0;
+  if (!count || count <= 0) return [-half, half];
+  const from = -Math.floor((count - 1) / 2);
+  return [from, from + count - 1];
+}
 function cornerRadius(origin, w, h) {
   const dx = Math.max(Math.abs(origin.x), Math.abs(w - origin.x));
   const dy = Math.max(Math.abs(origin.y), Math.abs(h - origin.y));
@@ -1295,7 +1355,7 @@ var MAX_SNAPSHOT_PIXELS = 16e6;
 var MAX_SNAPSHOT_SCALE = 8;
 var SNAPSHOT_SHRINK_FACTOR = 2;
 var TILE_BLEED_DEVICE_PX = 2;
-var TiledPatternObject = class _TiledPatternObject extends import_fabric4.FabricObject {
+var TiledPatternObject = class _TiledPatternObject extends import_fabric5.FabricObject {
   static type = "TiledPattern";
   /** The layer's real object. Never rendered directly (it is kept at opacity 0). */
   source;
@@ -1348,7 +1408,7 @@ var TiledPatternObject = class _TiledPatternObject extends import_fabric4.Fabric
    */
   syncBox() {
     const { tileW, tileH } = this.baseTile();
-    const origin = this.source.getCenterPoint();
+    const origin = this.source.getCenterPoint().add(this.inkOffset());
     const anchor = this.anchorFromOrigin(origin, tileW, tileH, this.config.angle);
     this.set({
       left: anchor.x,
@@ -1378,7 +1438,8 @@ var TiledPatternObject = class _TiledPatternObject extends import_fabric4.Fabric
     const { tileW, tileH } = this.liveTile();
     const centre = this.getCenterPoint();
     const shift = this.shiftVector(tileW, tileH, this.liveAngle());
-    return new import_fabric4.Point(centre.x - shift.x, centre.y - shift.y);
+    const ink = this.inkOffset();
+    return new import_fabric5.Point(centre.x - shift.x - ink.x, centre.y - shift.y - ink.y);
   }
   _render(ctx) {
     const { width, height } = this.area;
@@ -1393,8 +1454,7 @@ var TiledPatternObject = class _TiledPatternObject extends import_fabric4.Fabric
     ctx.scale(1 / (this.scaleX || 1), 1 / (this.scaleY || 1));
     ctx.rotate(-angle * Math.PI / 180);
     ctx.translate(-centre.x, -centre.y);
-    const shift = this.shiftVector(tileW, tileH, angle);
-    const origin = { x: centre.x - shift.x, y: centre.y - shift.y };
+    const origin = { x: centre.x, y: centre.y };
     const config = { ...this.config, angle, offsetX: 0, offsetY: 0 };
     drawTiles(
       ctx,
@@ -1423,7 +1483,6 @@ var TiledPatternObject = class _TiledPatternObject extends import_fabric4.Fabric
     if (!snapshot) return [];
     const centre = this.getCenterPoint();
     const angle = this.liveAngle();
-    const shift = this.shiftVector(tileW, tileH, angle);
     drawTiles(
       ctx,
       snapshot,
@@ -1432,7 +1491,7 @@ var TiledPatternObject = class _TiledPatternObject extends import_fabric4.Fabric
       height,
       tileW,
       tileH,
-      { x: centre.x - shift.x, y: centre.y - shift.y },
+      { x: centre.x, y: centre.y },
       // The fallback raster is built at 1:1, so a device pixel is a canvas unit.
       this.drawSize(tileW, tileH, TILE_BLEED_DEVICE_PX)
     );
@@ -1475,7 +1534,7 @@ var TiledPatternObject = class _TiledPatternObject extends import_fabric4.Fabric
     return Promise.resolve(copy);
   }
   /**
-   * The source's tile footprint: its bounding box, minus a stroke it reserves
+   * The source's tile footprint: the art it paints, minus a stroke it reserves
    * room for but never paints.
    *
    * fabric keeps `strokeWidth` inside an object's box whether or not a `stroke`
@@ -1483,11 +1542,18 @@ var TiledPatternObject = class _TiledPatternObject extends import_fabric4.Fabric
    * stroke. Stepping the grid by that box puts a transparent seam between every
    * pair of neighbours at zero spacing: the artwork is a pixel narrower than the
    * box it is stepped by.
+   *
+   * Text is the same problem an order of magnitude larger — see {@link textInk}.
    */
   sourceBox() {
+    const text = asText(this.source);
+    const paints = paintsStroke(this.source);
     const rect = this.source.getBoundingRect();
-    if (paintsStroke(this.source)) return { width: rect.width, height: rect.height };
-    const dims = this.source._getTransformedDimensions({ strokeWidth: 0 });
+    if (paints && !text) return { width: rect.width, height: rect.height };
+    const options = {};
+    if (!paints) options.strokeWidth = 0;
+    if (text) options.width = textInk(text).width;
+    const dims = this.source._getTransformedDimensions(options);
     const radians = (this.source.angle ?? 0) * Math.PI / 180;
     const cos = Math.abs(Math.cos(radians));
     const sin = Math.abs(Math.sin(radians));
@@ -1496,6 +1562,22 @@ var TiledPatternObject = class _TiledPatternObject extends import_fabric4.Fabric
       height: dims.x * sin + dims.y * cos
     };
   }
+  /**
+   * Vector from the source's centre to the centre of the art it paints.
+   *
+   * Zero for everything except text that does not fill its box: the tile has to
+   * sit on the glyphs, or the frame the user drags frames empty space and the
+   * grid registers off the run by half the padding.
+   */
+  inkOffset() {
+    const text = asText(this.source);
+    if (!text) return new import_fabric5.Point(0, 0);
+    const { dx } = textInk(text);
+    if (!dx) return new import_fabric5.Point(0, 0);
+    const scaled = dx * (this.source.scaleX ?? 1);
+    const radians = (this.source.angle ?? 0) * Math.PI / 180;
+    return new import_fabric5.Point(scaled * Math.cos(radians), scaled * Math.sin(radians));
+  }
   /** The source's on-canvas width, before the tile scale. */
   baseW() {
     return Math.max(1, this.sourceBox().width);
@@ -1555,11 +1637,11 @@ var TiledPatternObject = class _TiledPatternObject extends import_fabric4.Fabric
     const radians = angle * Math.PI / 180;
     const cos = Math.cos(radians);
     const sin = Math.sin(radians);
-    return new import_fabric4.Point(dx * cos - dy * sin, dx * sin + dy * cos);
+    return new import_fabric5.Point(dx * cos - dy * sin, dx * sin + dy * cos);
   }
   anchorFromOrigin(origin, tileW, tileH, angle) {
     const shift = this.shiftVector(tileW, tileH, angle);
-    return new import_fabric4.Point(origin.x + shift.x, origin.y + shift.y);
+    return new import_fabric5.Point(origin.x + shift.x, origin.y + shift.y);
   }
   /**
    * Snapshot the source at (at least) `scale`, reusing the cached one while it
@@ -1572,7 +1654,15 @@ var TiledPatternObject = class _TiledPatternObject extends import_fabric4.Fabric
     const source = this.source;
     const opacity = source.opacity;
     source.opacity = 1;
+    const text = asText(source);
+    const authoredWidth = text?.width;
+    const fitted = text ? textInk(text).width + TEXT_FIT_SLACK : 0;
+    const hug = text !== null && authoredWidth !== void 0 && fitted < authoredWidth;
     try {
+      if (hug && text) {
+        text.set({ width: fitted });
+        text.initDimensions?.();
+      }
       const el = source.toCanvasElement({ multiplier: wanted, enableRetinaScaling: false });
       if (!el.width || !el.height) return null;
       this.snapshotEl = el;
@@ -1581,6 +1671,10 @@ var TiledPatternObject = class _TiledPatternObject extends import_fabric4.Fabric
       return this.snapshotEl;
     } finally {
       source.opacity = opacity;
+      if (hug && text && authoredWidth !== void 0) {
+        text.set({ width: authoredWidth });
+        text.initDimensions?.();
+      }
       source.dirty = false;
     }
     return this.snapshotEl;
@@ -1819,7 +1913,7 @@ async function unbakeLegacyLayer(layer, state) {
     cropY: state.original.cropY,
     angle: state.original.angle
   });
-  image.clipPath = state.originalClip ? (await import_fabric5.util.enlivenObjects([state.originalClip]))[0] : void 0;
+  image.clipPath = state.originalClip ? (await import_fabric6.util.enlivenObjects([state.originalClip]))[0] : void 0;
   restoreLocks(image, state.originalLocks);
   image.setCoords();
 }
@@ -1837,7 +1931,7 @@ function restoreLocks(obj, locks) {
 }
 
 // src/text-curve.ts
-var import_fabric6 = require("fabric");
+var import_fabric7 = require("fabric");
 
 // src/text-curve-geometry.ts
 var DEFAULT_TEXT_CURVE = {
@@ -1867,7 +1961,11 @@ function normalizeTextCurve(config) {
     shape: config.shape ?? inferred,
     arc,
     wave,
-    waveLength: clamp(config.waveLength ?? DEFAULT_TEXT_CURVE.waveLength, MIN_WAVE_LENGTH, MAX_WAVE_LENGTH),
+    waveLength: clamp(
+      config.waveLength ?? DEFAULT_TEXT_CURVE.waveLength,
+      MIN_WAVE_LENGTH,
+      MAX_WAVE_LENGTH
+    ),
     offset: clamp(config.offset ?? 0, -100, 100),
     centerOffset: clamp(config.centerOffset ?? 0, -100, 100)
   };
@@ -1957,18 +2055,55 @@ function buildCurvePathData(config, width, fontSize) {
 }
 
 // src/text-curve.ts
-var MEASURE_WIDTH = 1e5;
+var MEASURE_WIDTH2 = 1e5;
 var PATH_SLACK = 0.06;
 var FALLBACK_LINE_HEIGHT = 1.16;
 var patches = /* @__PURE__ */ new WeakMap();
+var dimensionPatches = /* @__PURE__ */ new WeakMap();
 var authoredCaching = /* @__PURE__ */ new WeakMap();
+var GLYPH_HALF_HEIGHT = 0.7;
+function curvedInkSize(text) {
+  const lineCount = text._textLines?.length ?? 0;
+  for (let index = 0; index < lineCount; index += 1) text.getLineWidth?.(index);
+  const lines = text.__charBounds;
+  if (!lines?.length) return null;
+  let halfWidth = 0;
+  let halfHeight = 0;
+  for (const line of lines) {
+    for (const box of line ?? []) {
+      const { renderLeft, renderTop } = box;
+      if (typeof renderLeft !== "number" || typeof renderTop !== "number") continue;
+      const halfGlyphWidth = (box.kernedWidth ?? box.width ?? 0) / 2;
+      const halfGlyphHeight = (box.height ?? text.fontSize) * GLYPH_HALF_HEIGHT;
+      const angle = box.angle ?? 0;
+      const cos = Math.abs(Math.cos(angle));
+      const sin = Math.abs(Math.sin(angle));
+      halfWidth = Math.max(
+        halfWidth,
+        Math.abs(renderLeft) + halfGlyphWidth * cos + halfGlyphHeight * sin
+      );
+      halfHeight = Math.max(
+        halfHeight,
+        Math.abs(renderTop) + halfGlyphWidth * sin + halfGlyphHeight * cos
+      );
+    }
+  }
+  if (halfWidth === 0 && halfHeight === 0) return null;
+  return { width: halfWidth * 2, height: halfHeight * 2 };
+}
+function growBoxToInk(text) {
+  const ink = curvedInkSize(text);
+  if (!ink) return;
+  if (ink.width > (text.width ?? 0)) text.width = ink.width;
+  if (ink.height > (text.height ?? 0)) text.height = ink.height;
+}
 function isCurvable(object) {
   return !!object && typeof object.text === "string";
 }
 function measureText(text) {
   const authored = text.width;
   try {
-    text.set({ width: MEASURE_WIDTH });
+    text.set({ width: MEASURE_WIDTH2 });
     text.initDimensions?.();
     return Math.max(1, text.calcTextWidth?.() ?? text.width ?? 1);
   } finally {
@@ -1985,7 +2120,7 @@ function lineHeightOf(text) {
   return text.fontSize * (text.lineHeight ?? 1) * FALLBACK_LINE_HEIGHT;
 }
 function toFabricPath(curve) {
-  return new import_fabric6.Path(curve.data, { visible: false, objectCaching: false });
+  return new import_fabric7.Path(curve.data, { visible: false, objectCaching: false });
 }
 var TextCurveManager = class {
   constructor(canvas, layers, history, events) {
@@ -2113,6 +2248,35 @@ var TextCurveManager = class {
       pathStartOffset: 0
     });
     this.patchLineMeasure(text, paths, union);
+    this.patchDimensions(text);
+  }
+  /**
+   * Re-apply {@link growBoxToInk} after every one of fabric's own dimension
+   * passes. Typing, a font change, a style edit and a state restore all call
+   * `initDimensions`, and each one puts the box back to the path's bounding box
+   * — so growing it once, here, would hold only until the next keystroke.
+   */
+  patchDimensions(text) {
+    if (dimensionPatches.has(text)) return;
+    const original = text.initDimensions;
+    if (typeof original !== "function") return;
+    const installed = function() {
+      original.call(this);
+      growBoxToInk(this);
+    };
+    const ownedOriginal = Object.prototype.hasOwnProperty.call(text, "initDimensions");
+    text.initDimensions = installed;
+    dimensionPatches.set(text, { original, installed, ownedOriginal });
+  }
+  /** Restore fabric's own dimension pass, if this manager replaced it. */
+  unpatchDimensions(text) {
+    const patch = dimensionPatches.get(text);
+    if (!patch) return;
+    if (text.initDimensions === patch.installed) {
+      if (patch.ownedOriginal) text.initDimensions = patch.original;
+      else delete text.initDimensions;
+    }
+    dimensionPatches.delete(text);
   }
   /**
    * Fabric lays every line of a text object along `this.path`, from one
@@ -2164,6 +2328,7 @@ var TextCurveManager = class {
   }
   detach(text, authoredWidth) {
     this.unpatchLineMeasure(text);
+    this.unpatchDimensions(text);
     const caching = authoredCaching.get(text);
     if (caching !== void 0) {
       text.set({ objectCaching: caching });
@@ -2175,7 +2340,7 @@ var TextCurveManager = class {
 };
 
 // src/mask-presets/manager.ts
-var import_fabric7 = require("fabric");
+var import_fabric8 = require("fabric");
 
 // src/mask-presets/shapes.ts
 var SHAPE_MASK_IDS = [
@@ -2442,13 +2607,13 @@ var MaskPresetManager = class {
       objectCaching: false
     };
     if (isShapeMaskId(id)) {
-      return new import_fabric7.Path(shapeMaskPathData(id), {
+      return new import_fabric8.Path(shapeMaskPathData(id), {
         ...shared,
         scaleX: width / SHAPE_MASK_BOX,
         scaleY: height / SHAPE_MASK_BOX
       });
     }
-    return new import_fabric7.FabricImage(renderTextureMask(id), {
+    return new import_fabric8.FabricImage(renderTextureMask(id), {
       ...shared,
       scaleX: width / TEXTURE_MASK_SIZE,
       scaleY: height / TEXTURE_MASK_SIZE
@@ -2457,7 +2622,7 @@ var MaskPresetManager = class {
 };
 
 // src/shadow.ts
-var import_fabric8 = require("fabric");
+var import_fabric9 = require("fabric");
 
 // src/utils/color.ts
 var CSS_COLOR = /^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\([\d.%+\-\s,/]+\)|[a-z]+)$/i;
@@ -2495,7 +2660,7 @@ function applyLayerShadow(object, config) {
   }
   const color = isCssColor(next.color) ? next.color : DEFAULT_LAYER_SHADOW.color;
   object.set({
-    shadow: new import_fabric8.Shadow({
+    shadow: new import_fabric9.Shadow({
       color,
       blur: Math.max(0, next.blur),
       offsetX: next.offsetX,
@@ -2609,7 +2774,7 @@ var UnitConverter = class {
 };
 
 // src/serialization.ts
-var import_fabric9 = require("fabric");
+var import_fabric10 = require("fabric");
 var VERSION = "2.0.0";
 function serializeEditor(editor) {
   return {
@@ -2645,7 +2810,7 @@ async function deserializeEditor(editor, state) {
   }
   const staged = await Promise.all(
     state.layers.map(async (serialized) => {
-      const fabricObject = (await import_fabric9.util.enlivenObjects([serialized.fabricObject]))[0];
+      const fabricObject = (await import_fabric10.util.enlivenObjects([serialized.fabricObject]))[0];
       if (!fabricObject) {
         const source = serialized.fabricObject.src;
         if (typeof source === "string" && source.startsWith("blob:")) {
@@ -2656,7 +2821,7 @@ async function deserializeEditor(editor, state) {
       return { serialized, fabricObject };
     })
   );
-  const stagedBackground = state.backgroundImage ? (await import_fabric9.util.enlivenObjects([state.backgroundImage]))[0] : null;
+  const stagedBackground = state.backgroundImage ? (await import_fabric10.util.enlivenObjects([state.backgroundImage]))[0] : null;
   if (state.backgroundImage && !stagedBackground) {
     const source = state.backgroundImage.src;
     if (typeof source === "string" && source.startsWith("blob:")) {
@@ -2708,7 +2873,7 @@ function restoreLayer(editor, serialized, fabricObject) {
 }
 
 // src/export.ts
-var import_fabric10 = require("fabric");
+var import_fabric11 = require("fabric");
 
 // src/displacement.ts
 var CHANNEL_INDEX = {
@@ -2802,7 +2967,7 @@ async function exportPNG(canvas, options = {}) {
 }
 async function exportIsolatedPNG(source, objects, options = {}) {
   const element = source.lowerCanvasEl.ownerDocument.createElement("canvas");
-  const canvas = new import_fabric10.StaticCanvas(element, {
+  const canvas = new import_fabric11.StaticCanvas(element, {
     width: options.width ?? source.getWidth(),
     height: options.height ?? source.getHeight(),
     backgroundColor: options.backgroundColor || void 0
@@ -2832,7 +2997,7 @@ async function exportPrintArea(source, area, options = {}) {
     throw new Error("Print area does not overlap the canvas");
   }
   const element = source.lowerCanvasEl.ownerDocument.createElement("canvas");
-  const canvas = new import_fabric10.StaticCanvas(element, { width, height });
+  const canvas = new import_fabric11.StaticCanvas(element, { width, height });
   try {
     const clones = await Promise.all(source.getObjects().map((object) => object.clone()));
     if (clones.length) canvas.add(...clones);
@@ -3272,7 +3437,7 @@ var ProjectManager = class {
 };
 
 // src/mask.ts
-var import_fabric11 = require("fabric");
+var import_fabric12 = require("fabric");
 var MaskRefinementError = class extends Error {
   constructor(code, message, cause) {
     super(message);
@@ -3304,7 +3469,7 @@ var MaskController = class {
       throw new Error("Mask dimensions must be positive integers");
     }
     const backing = this.makeCanvas(width, height);
-    const image = new import_fabric11.FabricImage(backing, {
+    const image = new import_fabric12.FabricImage(backing, {
       left: 0,
       top: 0,
       originX: "left",
@@ -3530,10 +3695,10 @@ var MaskController = class {
 };
 
 // src/masks/manager.ts
-var import_fabric18 = require("fabric");
+var import_fabric19 = require("fabric");
 
 // src/masks/compose.ts
-var import_fabric12 = require("fabric");
+var import_fabric13 = require("fabric");
 var MODE_OPERATION = {
   add: "source-over",
   subtract: "destination-out",
@@ -3543,7 +3708,7 @@ function neutralize(child) {
   child.set({ opacity: 0, globalCompositeOperation: "source-over" });
 }
 function baseRect(box) {
-  return new import_fabric12.Rect({
+  return new import_fabric13.Rect({
     left: box.left,
     top: box.top,
     width: Math.max(1, box.width),
@@ -3570,7 +3735,7 @@ function composeMaskGroup(children, entries, options) {
   });
   const first = entries.find((entry) => entry.visible);
   const withBase = first && first.mode !== "add" ? [baseRect(options.box), ...children] : [...children];
-  return new import_fabric12.Group(withBase, {
+  return new import_fabric13.Group(withBase, {
     absolutePositioned: options.absolute,
     // Cached, so the children's compositing operations resolve against each
     // other instead of against the page underneath the mask.
@@ -3584,15 +3749,15 @@ function needsAbsoluteSpace(entries) {
 }
 
 // src/masks/edit.ts
-var import_fabric14 = require("fabric");
+var import_fabric15 = require("fabric");
 
 // src/masks/space.ts
-var import_fabric13 = require("fabric");
+var import_fabric14 = require("fabric");
 function matrixOf(object) {
   return object.calcTransformMatrix();
 }
 function applyMatrix(object, matrix) {
-  const decomposed = import_fabric13.util.qrDecompose(matrix);
+  const decomposed = import_fabric14.util.qrDecompose(matrix);
   object.set({
     flipX: false,
     flipY: false,
@@ -3609,19 +3774,19 @@ function applyMatrix(object, matrix) {
   object.setCoords();
 }
 function toCanvasSpace(object, host) {
-  applyMatrix(object, import_fabric13.util.multiplyTransformMatrices(matrixOf(host), matrixOf(object)));
+  applyMatrix(object, import_fabric14.util.multiplyTransformMatrices(matrixOf(host), matrixOf(object)));
 }
 function toHostSpace(object, host) {
   applyMatrix(
     object,
-    import_fabric13.util.multiplyTransformMatrices(import_fabric13.util.invertTransform(matrixOf(host)), matrixOf(object))
+    import_fabric14.util.multiplyTransformMatrices(import_fabric14.util.invertTransform(matrixOf(host)), matrixOf(object))
   );
 }
 function relativeMatrix(object, host) {
-  return import_fabric13.util.multiplyTransformMatrices(import_fabric13.util.invertTransform(matrixOf(host)), matrixOf(object));
+  return import_fabric14.util.multiplyTransformMatrices(import_fabric14.util.invertTransform(matrixOf(host)), matrixOf(object));
 }
 function applyRelativeMatrix(object, host, rel) {
-  applyMatrix(object, import_fabric13.util.multiplyTransformMatrices(matrixOf(host), rel));
+  applyMatrix(object, import_fabric14.util.multiplyTransformMatrices(matrixOf(host), rel));
 }
 function asObject(clip) {
   return clip;
@@ -3734,8 +3899,8 @@ var MaskEditController = class {
     if (!this.handle || !this.child || !this.group) return;
     applyMatrix(
       this.child,
-      import_fabric14.util.multiplyTransformMatrices(
-        import_fabric14.util.invertTransform(matrixOf(this.group)),
+      import_fabric15.util.multiplyTransformMatrices(
+        import_fabric15.util.invertTransform(matrixOf(this.group)),
         matrixOf(this.handle)
       )
     );
@@ -3746,15 +3911,15 @@ var MaskEditController = class {
 };
 
 // src/masks/store.ts
-var import_fabric17 = require("fabric");
+var import_fabric18 = require("fabric");
 
 // src/masks/host.ts
-var import_fabric15 = require("fabric");
+var import_fabric16 = require("fabric");
 function findCanvasHost(layers) {
   return layers.getAll().find((layer) => layer.meta.canvasMask);
 }
 function createCanvasHost(canvas, layers) {
-  const rect = new import_fabric15.Rect({
+  const rect = new import_fabric16.Rect({
     left: 0,
     top: 0,
     width: canvas.getWidth(),
@@ -3803,9 +3968,9 @@ function hostBoxOf(canvas, host, absolute) {
 }
 
 // src/masks/install.ts
-var import_fabric16 = require("fabric");
+var import_fabric17 = require("fabric");
 function convertSpace(host, sources, absolute) {
-  const wasAbsolute = host.clipPath instanceof import_fabric16.Group ? host.clipPath.absolutePositioned : absolute;
+  const wasAbsolute = host.clipPath instanceof import_fabric17.Group ? host.clipPath.absolutePositioned : absolute;
   if (absolute === wasAbsolute) return;
   for (const source of sources) {
     if (absolute) toCanvasSpace(source, host);
@@ -3897,7 +4062,7 @@ var MaskStackStore = class {
     const clip = host.clipPath;
     if (!clip) return [];
     const entries = this.list(target);
-    if (entries.length === 0 || !(clip instanceof import_fabric17.Group)) return [asObject(clip)];
+    if (entries.length === 0 || !(clip instanceof import_fabric18.Group)) return [asObject(clip)];
     const children = unwrapGroup(clip);
     const extra = children.length - entries.length;
     return extra > 0 ? children.slice(extra) : children;
@@ -3956,8 +4121,8 @@ var LayerMaskManager = class extends MaskStackStore {
   onLayersChanged = () => this.pin();
   // Selecting a layer means the user has moved on from the mask they had open;
   // leaving both selected would show mask controls for an unrelated layer.
-  onLayerSelected = () => {
-    if (this.selected) this.select(null, null);
+  onLayerSelected = ({ layerId }) => {
+    if (layerId && this.selected) this.select(null, null);
   };
   onObjectModified = (event) => {
     const object = event.target;
@@ -3997,7 +4162,7 @@ var LayerMaskManager = class extends MaskStackStore {
     if (index === -1) return false;
     this.endEdit(false);
     this.commit(target, host, [...entries], this.unwrap(target, host), false, true);
-    const group = host.clipPath instanceof import_fabric18.Group ? host.clipPath : null;
+    const group = host.clipPath instanceof import_fabric19.Group ? host.clipPath : null;
     if (!group) return false;
     const children = group.getObjects();
     const child = children[children.length - entries.length + index];
@@ -4017,6 +4182,7 @@ var LayerMaskManager = class extends MaskStackStore {
   }
   select(target, maskId) {
     this.selected = target && maskId ? { target, maskId } : null;
+    if (this.selected) this.layers.select(null);
     this.events.emit("mask:selected", { target, maskId: this.selected ? maskId : null });
   }
   // ─── Mutations ───────────────────────────────────────
@@ -4177,6 +4343,9 @@ var LayerMaskManager = class extends MaskStackStore {
     if (resolved === layerId) return null;
     const object = layer.fabricObject;
     if (!object.fill && object.type !== "image") object.set({ fill: "#000000" });
+    const stackHost = this.host(resolved);
+    const absolute = resolved === CANVAS_MASK_TARGET || needsAbsoluteSpace(this.list(resolved));
+    if (!absolute && stackHost) toHostSpace(object, stackHost);
     this.history.beginTransaction();
     try {
       if (this.canvas.getActiveObject() === object) this.canvas.discardActiveObject();
@@ -4303,7 +4472,7 @@ var CanvasEditor = class {
     const widthPx = this.units.toPixels(config.width);
     const heightPx = this.units.toPixels(config.height);
     this.designBackground = config.backgroundColor ?? "#ffffff";
-    this.canvas = new import_fabric19.Canvas(canvasElement, {
+    this.canvas = new import_fabric20.Canvas(canvasElement, {
       width: widthPx,
       height: heightPx,
       backgroundColor: this.designBackground,
@@ -4337,7 +4506,7 @@ var CanvasEditor = class {
   // ─── Layer Operations ────────────────────────────────
   async addImage(url, options) {
     try {
-      const img = await import_fabric19.FabricImage.fromURL(
+      const img = await import_fabric20.FabricImage.fromURL(
         url,
         {},
         { originX: "left", originY: "top", ...options }
@@ -4363,7 +4532,7 @@ var CanvasEditor = class {
     if (this.crop.activeLayerId() === layerId) this.crop.cancel();
     const previous = layer.fabricObject;
     try {
-      const replacement = await import_fabric19.FabricImage.fromURL(url, {}, { originX: "left", originY: "top" });
+      const replacement = await import_fabric20.FabricImage.fromURL(url, {}, { originX: "left", originY: "top" });
       replacement.set({
         left: previous.left,
         top: previous.top,
@@ -4392,7 +4561,7 @@ var CanvasEditor = class {
     }
   }
   addText(text, options) {
-    const textbox = new import_fabric19.Textbox(text, {
+    const textbox = new import_fabric20.Textbox(text, {
       fontSize: 32,
       fontFamily: "Arial",
       fill: "#000000",
@@ -4523,10 +4692,10 @@ var CanvasEditor = class {
     const next = { ...previous, ...adjustments };
     const clampAdjustment = (value, min = -1) => clamp(value ?? 0, min, 1);
     image.filters = [
-      new import_fabric19.filters.Brightness({ brightness: clampAdjustment(next.brightness) }),
-      new import_fabric19.filters.Contrast({ contrast: clampAdjustment(next.contrast) }),
-      new import_fabric19.filters.Saturation({ saturation: clampAdjustment(next.saturation) }),
-      new import_fabric19.filters.Blur({ blur: clampAdjustment(next.blur, 0) })
+      new import_fabric20.filters.Brightness({ brightness: clampAdjustment(next.brightness) }),
+      new import_fabric20.filters.Contrast({ contrast: clampAdjustment(next.contrast) }),
+      new import_fabric20.filters.Saturation({ saturation: clampAdjustment(next.saturation) }),
+      new import_fabric20.filters.Blur({ blur: clampAdjustment(next.blur, 0) })
     ];
     layer.meta.imageAdjustments = next;
     image.applyFilters();
@@ -4567,7 +4736,7 @@ var CanvasEditor = class {
           this.layers.detach(layer.id);
         }
       }
-      const group = new import_fabric19.Group(objects);
+      const group = new import_fabric20.Group(objects);
       const grouped = this.layers.add("group", group, name);
       this.layers.adoptChildren(grouped, children);
       this.layers.reorder(grouped.id, insertIndex);
@@ -4629,7 +4798,7 @@ var CanvasEditor = class {
     const layer = this.layers.get(id);
     if (!layer) throw new Error(`Layer not found: ${id}`);
     try {
-      if (options.resolution === "source" && layer.fabricObject instanceof import_fabric19.FabricImage) {
+      if (options.resolution === "source" && layer.fabricObject instanceof import_fabric20.FabricImage) {
         const image = await layer.fabricObject.clone();
         image.set({
           left: 0,
@@ -4905,7 +5074,7 @@ var CanvasEditor = class {
       return;
     }
     try {
-      const image = await import_fabric19.FabricImage.fromURL(
+      const image = await import_fabric20.FabricImage.fromURL(
         url,
         { crossOrigin: options.crossOrigin ?? null, signal: options.signal },
         { originX: "left", originY: "top" }
@@ -5238,11 +5407,15 @@ var DEFAULT_PATTERN_CONFIG = {
   horizontalSpacing: 0,
   verticalSpacing: 0,
   angle: 0,
-  horizontalOffset: 0,
+  // Half a tile: the offset only bites in the brick modes, and a brick course
+  // that is not half-shifted is just a grid with extra steps.
+  horizontalOffset: 50,
   offsetX: 0,
   offsetY: 0,
   rotationStepH: 0,
-  rotationStepV: 0
+  rotationStepV: 0,
+  horizontalLimit: 0,
+  verticalLimit: 0
 };
 
 // src/presets.ts
@@ -5348,6 +5521,7 @@ var AnnotationOverlay = class {
   exportPNG,
   exportPrintArea,
   exportSVG,
+  fitTextWidth,
   fitToBox,
   generateId,
   isCssColor,