@pooder/kit 5.0.3 → 5.0.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @pooder/kit
 
+## 5.0.4
+
+### Patch Changes
+
+- bugfix
+
 ## 5.0.3
 
 ### Patch Changes

package/dist/index.d.mts

@@ -260,7 +260,6 @@ declare class ImageTool implements Extension {
     private isToolActive;
     private isImageSelectionActive;
     private focusedImageId;
-    private suppressSelectionClearUntil;
     private renderSeq;
     private dirtyTrackerDisposable?;
     activate(context: ExtensionContext): void;
@@ -296,8 +295,8 @@ declare class ImageTool implements Extension {
     private cloneItems;
     private emitWorkingChange;
     private generateId;
-    private getImageIdFromActiveObject;
-    private resolveReplaceTargetId;
+    private hasImageItem;
+    private setImageFocus;
     private addImageEntry;
     private upsertImageEntry;
     private addItemToWorkingSessionIfNeeded;
@@ -330,7 +329,6 @@ declare class ImageTool implements Extension {
     private updateImageInConfig;
     private waitImageLoaded;
     private refitImageToFrame;
-    private focusImageSelection;
     private fitImageToArea;
     private commitWorkingImagesAsCropped;
     private exportCroppedImageByIds;

package/dist/index.d.ts

@@ -260,7 +260,6 @@ declare class ImageTool implements Extension {
     private isToolActive;
     private isImageSelectionActive;
     private focusedImageId;
-    private suppressSelectionClearUntil;
     private renderSeq;
     private dirtyTrackerDisposable?;
     activate(context: ExtensionContext): void;
@@ -296,8 +295,8 @@ declare class ImageTool implements Extension {
     private cloneItems;
     private emitWorkingChange;
     private generateId;
-    private getImageIdFromActiveObject;
-    private resolveReplaceTargetId;
+    private hasImageItem;
+    private setImageFocus;
     private addImageEntry;
     private upsertImageEntry;
     private addItemToWorkingSessionIfNeeded;
@@ -330,7 +329,6 @@ declare class ImageTool implements Extension {
     private updateImageInConfig;
     private waitImageLoaded;
     private refitImageToFrame;
-    private focusImageSelection;
     private fitImageToArea;
     private commitWorkingImagesAsCropped;
     private exportCroppedImageByIds;

package/dist/index.js

@@ -3790,7 +3790,6 @@ var import_core5 = require("@pooder/core");
 var import_fabric5 = require("fabric");
 var IMAGE_OBJECT_LAYER_ID2 = "image.user";
 var IMAGE_OVERLAY_LAYER_ID = "image-overlay";
-var IMAGE_REPLACE_GUARD_MS = 2500;
 var ImageTool = class {
   constructor() {
     this.id = "pooder.kit.image";
@@ -3806,18 +3805,15 @@ var ImageTool = class {
     this.isToolActive = false;
     this.isImageSelectionActive = false;
     this.focusedImageId = null;
-    this.suppressSelectionClearUntil = 0;
     this.renderSeq = 0;
     this.onToolActivated = (event) => {
       const before = this.isToolActive;
       this.syncToolActiveFromWorkbench(event.id);
       if (!this.isToolActive) {
-        const now = Date.now();
-        const inGuardWindow = now <= this.suppressSelectionClearUntil && !!this.focusedImageId;
-        if (!inGuardWindow) {
-          this.isImageSelectionActive = false;
-          this.focusedImageId = null;
-        }
+        this.setImageFocus(null, {
+          syncCanvasSelection: true,
+          skipRender: true
+        });
       }
       this.debug("tool:activated", {
         id: event.id,
@@ -3825,8 +3821,7 @@ var ImageTool = class {
         reason: event.reason,
         before,
         isToolActive: this.isToolActive,
-        focusedImageId: this.focusedImageId,
-        suppressSelectionClearUntil: this.suppressSelectionClearUntil
+        focusedImageId: this.focusedImageId
       });
       if (!this.isToolActive && this.isDebugEnabled()) {
         console.trace("[ImageTool] tool deactivated trace");
@@ -3865,16 +3860,10 @@ var ImageTool = class {
       this.updateImages();
     };
     this.onSelectionCleared = () => {
-      const now = Date.now();
-      if (now <= this.suppressSelectionClearUntil && this.focusedImageId) {
-        this.debug("selection:cleared ignored", {
-          suppressUntil: this.suppressSelectionClearUntil,
-          focusedImageId: this.focusedImageId
-        });
-        return;
-      }
-      this.isImageSelectionActive = false;
-      this.focusedImageId = null;
+      this.setImageFocus(null, {
+        syncCanvasSelection: false,
+        skipRender: true
+      });
       this.debug("selection:cleared applied");
       this.updateImages();
     };
@@ -4030,7 +4019,7 @@ var ImageTool = class {
           id: "image.frame.strokeColor",
           type: "color",
           label: "Image Frame Stroke Color",
-          default: "#FF0000"
+          default: "#808080"
         },
         {
           id: "image.frame.strokeWidth",
@@ -4046,7 +4035,7 @@ var ImageTool = class {
           type: "select",
           label: "Image Frame Stroke Style",
           options: ["solid", "dashed", "hidden"],
-          default: "solid"
+          default: "dashed"
         },
         {
           id: "image.frame.dashLength",
@@ -4141,6 +4130,13 @@ var ImageTool = class {
             await this.fitImageToDefaultArea(id);
           }
         },
+        {
+          command: "focusImage",
+          title: "Focus Image",
+          handler: (id, options = {}) => {
+            return this.setImageFocus(id, options);
+          }
+        },
         {
           command: "removeImage",
           title: "Remove Image",
@@ -4150,8 +4146,10 @@ var ImageTool = class {
             if (next.length !== this.items.length) {
               this.purgeSourceSizeCacheForItem(removed);
               if (this.focusedImageId === id) {
-                this.focusedImageId = null;
-                this.isImageSelectionActive = false;
+                this.setImageFocus(null, {
+                  syncCanvasSelection: true,
+                  skipRender: true
+                });
               }
               this.updateConfig(next);
             }
@@ -4169,8 +4167,10 @@ var ImageTool = class {
           title: "Clear Images",
           handler: () => {
             this.sourceSizeBySrc.clear();
-            this.focusedImageId = null;
-            this.isImageSelectionActive = false;
+            this.setImageFocus(null, {
+              syncCanvasSelection: true,
+              skipRender: true
+            });
             this.updateConfig([]);
           }
         },
@@ -4235,22 +4235,38 @@ var ImageTool = class {
   generateId() {
     return Math.random().toString(36).substring(2, 9);
   }
-  getImageIdFromActiveObject() {
-    var _a, _b, _c;
-    const active = (_a = this.canvasService) == null ? void 0 : _a.canvas.getActiveObject();
-    if (((_b = active == null ? void 0 : active.data) == null ? void 0 : _b.layerId) === IMAGE_OBJECT_LAYER_ID2 && typeof ((_c = active == null ? void 0 : active.data) == null ? void 0 : _c.id) === "string") {
-      return active.data.id;
-    }
-    return null;
+  hasImageItem(id) {
+    return this.items.some((item) => item.id === id) || this.workingItems.some((item) => item.id === id);
   }
-  resolveReplaceTargetId(explicitId) {
-    const has = (id) => !!id && this.items.some((item) => item.id === id);
-    if (has(explicitId)) return explicitId;
-    if (has(this.focusedImageId)) return this.focusedImageId;
-    const activeId = this.getImageIdFromActiveObject();
-    if (has(activeId)) return activeId;
-    if (this.items.length === 1) return this.items[0].id;
-    return null;
+  setImageFocus(id, options = {}) {
+    const syncCanvasSelection = options.syncCanvasSelection !== false;
+    if (id && !this.hasImageItem(id)) {
+      return { ok: false, reason: "image-not-found" };
+    }
+    this.focusedImageId = id;
+    this.isImageSelectionActive = !!id;
+    if (syncCanvasSelection && this.canvasService) {
+      const canvas = this.canvasService.canvas;
+      if (!id) {
+        canvas.discardActiveObject();
+      } else {
+        const obj = this.getImageObject(id);
+        if (obj) {
+          obj.set({
+            selectable: true,
+            evented: true,
+            hasControls: true,
+            hasBorders: true
+          });
+          canvas.setActiveObject(obj);
+        }
+      }
+      this.canvasService.requestRenderAll();
+    }
+    if (!options.skipRender) {
+      this.updateImages();
+    }
+    return { ok: true, id };
   }
   async addImageEntry(url, options, fitOnAdd = true) {
     const id = this.generateId();
@@ -4260,9 +4276,6 @@ var ImageTool = class {
       opacity: 1,
       ...options
     });
-    this.focusedImageId = id;
-    this.isImageSelectionActive = true;
-    this.suppressSelectionClearUntil = Date.now() + IMAGE_REPLACE_GUARD_MS;
     const sessionDirtyBeforeAdd = this.isToolActive && this.hasWorkingChanges;
     const waitLoaded = this.waitImageLoaded(id, true);
     this.updateConfig([...this.items, newItem]);
@@ -4272,26 +4285,24 @@ var ImageTool = class {
       await this.fitImageToDefaultArea(id);
     }
     if (loaded) {
-      this.focusImageSelection(id);
+      this.setImageFocus(id);
     }
     return id;
   }
   async upsertImageEntry(url, options = {}) {
-    var _a;
-    const mode = options.mode || "auto";
+    const mode = options.mode || (options.id ? "replace" : "add");
     const fitOnAdd = options.fitOnAdd !== false;
-    if (mode === "add") {
-      const id2 = await this.addImageEntry(url, options.addOptions, fitOnAdd);
-      return { id: id2, mode: "add" };
-    }
-    const targetId = this.resolveReplaceTargetId((_a = options.id) != null ? _a : null);
-    if (targetId) {
+    if (mode === "replace") {
+      if (!options.id) {
+        throw new Error("replace-target-id-required");
+      }
+      const targetId = options.id;
+      if (!this.hasImageItem(targetId)) {
+        throw new Error("replace-target-not-found");
+      }
       await this.updateImageInConfig(targetId, { url });
       return { id: targetId, mode: "replace" };
     }
-    if (mode === "replace" || options.createIfMissing === false) {
-      throw new Error("replace-target-not-found");
-    }
     const id = await this.addImageEntry(url, options.addOptions, fitOnAdd);
     return { id, mode: "add" };
   }
@@ -4466,9 +4477,9 @@ var ImageTool = class {
     var _a, _b;
     const strokeStyleRaw = this.getConfig(
       "image.frame.strokeStyle",
-      "solid"
-    ) || "solid";
-    const strokeStyle = strokeStyleRaw === "dashed" || strokeStyleRaw === "hidden" ? strokeStyleRaw : "solid";
+      "dashed"
+    ) || "dashed";
+    const strokeStyle = strokeStyleRaw === "dashed" || strokeStyleRaw === "hidden" ? strokeStyleRaw : "dashed";
     const strokeWidth = Number(
       (_a = this.getConfig("image.frame.strokeWidth", 2)) != null ? _a : 2
     );
@@ -4476,7 +4487,7 @@ var ImageTool = class {
       (_b = this.getConfig("image.frame.dashLength", 8)) != null ? _b : 8
     );
     return {
-      strokeColor: this.getConfig("image.frame.strokeColor", "#FF0000") || "#FF0000",
+      strokeColor: this.getConfig("image.frame.strokeColor", "#808080") || "#808080",
       strokeWidth: Number.isFinite(strokeWidth) ? Math.max(0, strokeWidth) : 2,
       strokeStyle,
       dashLength: Number.isFinite(dashLength) ? Math.max(1, dashLength) : 8,
@@ -4741,8 +4752,10 @@ var ImageTool = class {
     const frame = this.getFrameRect();
     const desiredIds = new Set(renderItems.map((item) => item.id));
     if (this.focusedImageId && !desiredIds.has(this.focusedImageId)) {
-      this.focusedImageId = null;
-      this.isImageSelectionActive = false;
+      this.setImageFocus(null, {
+        syncCanvasSelection: false,
+        skipRender: true
+      });
     }
     this.getImageObjects().forEach((obj) => {
       var _a, _b;
@@ -4785,8 +4798,10 @@ var ImageTool = class {
     next[index] = this.normalizeItem({ ...next[index], ...updates });
     this.workingItems = next;
     this.hasWorkingChanges = true;
-    this.isImageSelectionActive = true;
-    this.focusedImageId = id;
+    this.setImageFocus(id, {
+      syncCanvasSelection: false,
+      skipRender: true
+    });
     if (this.isToolActive) {
       this.updateImages();
     }
@@ -4815,16 +4830,13 @@ var ImageTool = class {
     });
     this.updateConfig(next);
     if (replacingSource) {
-      this.focusedImageId = id;
-      this.isImageSelectionActive = true;
-      this.suppressSelectionClearUntil = Date.now() + IMAGE_REPLACE_GUARD_MS;
       this.debug("replace:image:begin", { id, replacingUrl });
       this.purgeSourceSizeCacheForItem(base);
       const loaded = await this.waitImageLoaded(id, true);
       this.debug("replace:image:loaded", { id, loaded });
       if (loaded) {
         await this.refitImageToFrame(id);
-        this.focusImageSelection(id);
+        this.setImageFocus(id);
       }
     }
   }
@@ -4868,29 +4880,9 @@ var ImageTool = class {
     this.updateConfig(next);
     this.workingItems = this.cloneItems(next);
     this.hasWorkingChanges = false;
-    this.isImageSelectionActive = true;
-    this.focusedImageId = id;
     this.updateImages();
     this.emitWorkingChange(id);
   }
-  focusImageSelection(id) {
-    if (!this.canvasService) return;
-    const obj = this.getImageObject(id);
-    if (!obj) return;
-    this.isImageSelectionActive = true;
-    this.focusedImageId = id;
-    this.suppressSelectionClearUntil = Date.now() + 700;
-    obj.set({
-      selectable: true,
-      evented: true,
-      hasControls: true,
-      hasBorders: true
-    });
-    this.canvasService.canvas.setActiveObject(obj);
-    this.debug("focus:image", { id });
-    this.canvasService.requestRenderAll();
-    this.updateImages();
-  }
   async fitImageToArea(id, area) {
     var _a, _b;
     if (!this.canvasService) return;
@@ -4940,7 +4932,6 @@ var ImageTool = class {
     if (!frame.width || !frame.height) {
       return { ok: false, reason: "frame-not-ready" };
     }
-    const focusId = this.resolveReplaceTargetId(this.focusedImageId) || (this.workingItems.length === 1 ? this.workingItems[0].id : null);
     const next = [];
     for (const item of this.workingItems) {
       const url = await this.exportCroppedImageByIds([item.id], {
@@ -4964,13 +4955,7 @@ var ImageTool = class {
     this.hasWorkingChanges = false;
     this.workingItems = this.cloneItems(next);
     this.updateConfig(next);
-    this.emitWorkingChange(focusId);
-    if (focusId) {
-      this.focusedImageId = focusId;
-      this.isImageSelectionActive = true;
-      this.suppressSelectionClearUntil = Date.now() + IMAGE_REPLACE_GUARD_MS;
-      this.focusImageSelection(focusId);
-    }
+    this.emitWorkingChange(this.focusedImageId);
     return { ok: true };
   }
   async exportCroppedImageByIds(imageIds, options) {

package/dist/index.mjs

@@ -3741,7 +3741,6 @@ import {
 import { Canvas as FabricCanvas2, Image as FabricImage, Point as Point2 } from "fabric";
 var IMAGE_OBJECT_LAYER_ID2 = "image.user";
 var IMAGE_OVERLAY_LAYER_ID = "image-overlay";
-var IMAGE_REPLACE_GUARD_MS = 2500;
 var ImageTool = class {
   constructor() {
     this.id = "pooder.kit.image";
@@ -3757,18 +3756,15 @@ var ImageTool = class {
     this.isToolActive = false;
     this.isImageSelectionActive = false;
     this.focusedImageId = null;
-    this.suppressSelectionClearUntil = 0;
     this.renderSeq = 0;
     this.onToolActivated = (event) => {
       const before = this.isToolActive;
       this.syncToolActiveFromWorkbench(event.id);
       if (!this.isToolActive) {
-        const now = Date.now();
-        const inGuardWindow = now <= this.suppressSelectionClearUntil && !!this.focusedImageId;
-        if (!inGuardWindow) {
-          this.isImageSelectionActive = false;
-          this.focusedImageId = null;
-        }
+        this.setImageFocus(null, {
+          syncCanvasSelection: true,
+          skipRender: true
+        });
       }
       this.debug("tool:activated", {
         id: event.id,
@@ -3776,8 +3772,7 @@ var ImageTool = class {
         reason: event.reason,
         before,
         isToolActive: this.isToolActive,
-        focusedImageId: this.focusedImageId,
-        suppressSelectionClearUntil: this.suppressSelectionClearUntil
+        focusedImageId: this.focusedImageId
       });
       if (!this.isToolActive && this.isDebugEnabled()) {
         console.trace("[ImageTool] tool deactivated trace");
@@ -3816,16 +3811,10 @@ var ImageTool = class {
       this.updateImages();
     };
     this.onSelectionCleared = () => {
-      const now = Date.now();
-      if (now <= this.suppressSelectionClearUntil && this.focusedImageId) {
-        this.debug("selection:cleared ignored", {
-          suppressUntil: this.suppressSelectionClearUntil,
-          focusedImageId: this.focusedImageId
-        });
-        return;
-      }
-      this.isImageSelectionActive = false;
-      this.focusedImageId = null;
+      this.setImageFocus(null, {
+        syncCanvasSelection: false,
+        skipRender: true
+      });
       this.debug("selection:cleared applied");
       this.updateImages();
     };
@@ -3981,7 +3970,7 @@ var ImageTool = class {
           id: "image.frame.strokeColor",
           type: "color",
           label: "Image Frame Stroke Color",
-          default: "#FF0000"
+          default: "#808080"
         },
         {
           id: "image.frame.strokeWidth",
@@ -3997,7 +3986,7 @@ var ImageTool = class {
           type: "select",
           label: "Image Frame Stroke Style",
           options: ["solid", "dashed", "hidden"],
-          default: "solid"
+          default: "dashed"
         },
         {
           id: "image.frame.dashLength",
@@ -4092,6 +4081,13 @@ var ImageTool = class {
             await this.fitImageToDefaultArea(id);
           }
         },
+        {
+          command: "focusImage",
+          title: "Focus Image",
+          handler: (id, options = {}) => {
+            return this.setImageFocus(id, options);
+          }
+        },
         {
           command: "removeImage",
           title: "Remove Image",
@@ -4101,8 +4097,10 @@ var ImageTool = class {
             if (next.length !== this.items.length) {
               this.purgeSourceSizeCacheForItem(removed);
               if (this.focusedImageId === id) {
-                this.focusedImageId = null;
-                this.isImageSelectionActive = false;
+                this.setImageFocus(null, {
+                  syncCanvasSelection: true,
+                  skipRender: true
+                });
               }
               this.updateConfig(next);
             }
@@ -4120,8 +4118,10 @@ var ImageTool = class {
           title: "Clear Images",
           handler: () => {
             this.sourceSizeBySrc.clear();
-            this.focusedImageId = null;
-            this.isImageSelectionActive = false;
+            this.setImageFocus(null, {
+              syncCanvasSelection: true,
+              skipRender: true
+            });
             this.updateConfig([]);
           }
         },
@@ -4186,22 +4186,38 @@ var ImageTool = class {
   generateId() {
     return Math.random().toString(36).substring(2, 9);
   }
-  getImageIdFromActiveObject() {
-    var _a, _b, _c;
-    const active = (_a = this.canvasService) == null ? void 0 : _a.canvas.getActiveObject();
-    if (((_b = active == null ? void 0 : active.data) == null ? void 0 : _b.layerId) === IMAGE_OBJECT_LAYER_ID2 && typeof ((_c = active == null ? void 0 : active.data) == null ? void 0 : _c.id) === "string") {
-      return active.data.id;
-    }
-    return null;
+  hasImageItem(id) {
+    return this.items.some((item) => item.id === id) || this.workingItems.some((item) => item.id === id);
   }
-  resolveReplaceTargetId(explicitId) {
-    const has = (id) => !!id && this.items.some((item) => item.id === id);
-    if (has(explicitId)) return explicitId;
-    if (has(this.focusedImageId)) return this.focusedImageId;
-    const activeId = this.getImageIdFromActiveObject();
-    if (has(activeId)) return activeId;
-    if (this.items.length === 1) return this.items[0].id;
-    return null;
+  setImageFocus(id, options = {}) {
+    const syncCanvasSelection = options.syncCanvasSelection !== false;
+    if (id && !this.hasImageItem(id)) {
+      return { ok: false, reason: "image-not-found" };
+    }
+    this.focusedImageId = id;
+    this.isImageSelectionActive = !!id;
+    if (syncCanvasSelection && this.canvasService) {
+      const canvas = this.canvasService.canvas;
+      if (!id) {
+        canvas.discardActiveObject();
+      } else {
+        const obj = this.getImageObject(id);
+        if (obj) {
+          obj.set({
+            selectable: true,
+            evented: true,
+            hasControls: true,
+            hasBorders: true
+          });
+          canvas.setActiveObject(obj);
+        }
+      }
+      this.canvasService.requestRenderAll();
+    }
+    if (!options.skipRender) {
+      this.updateImages();
+    }
+    return { ok: true, id };
   }
   async addImageEntry(url, options, fitOnAdd = true) {
     const id = this.generateId();
@@ -4211,9 +4227,6 @@ var ImageTool = class {
       opacity: 1,
       ...options
     });
-    this.focusedImageId = id;
-    this.isImageSelectionActive = true;
-    this.suppressSelectionClearUntil = Date.now() + IMAGE_REPLACE_GUARD_MS;
     const sessionDirtyBeforeAdd = this.isToolActive && this.hasWorkingChanges;
     const waitLoaded = this.waitImageLoaded(id, true);
     this.updateConfig([...this.items, newItem]);
@@ -4223,26 +4236,24 @@ var ImageTool = class {
       await this.fitImageToDefaultArea(id);
     }
     if (loaded) {
-      this.focusImageSelection(id);
+      this.setImageFocus(id);
     }
     return id;
   }
   async upsertImageEntry(url, options = {}) {
-    var _a;
-    const mode = options.mode || "auto";
+    const mode = options.mode || (options.id ? "replace" : "add");
     const fitOnAdd = options.fitOnAdd !== false;
-    if (mode === "add") {
-      const id2 = await this.addImageEntry(url, options.addOptions, fitOnAdd);
-      return { id: id2, mode: "add" };
-    }
-    const targetId = this.resolveReplaceTargetId((_a = options.id) != null ? _a : null);
-    if (targetId) {
+    if (mode === "replace") {
+      if (!options.id) {
+        throw new Error("replace-target-id-required");
+      }
+      const targetId = options.id;
+      if (!this.hasImageItem(targetId)) {
+        throw new Error("replace-target-not-found");
+      }
       await this.updateImageInConfig(targetId, { url });
       return { id: targetId, mode: "replace" };
     }
-    if (mode === "replace" || options.createIfMissing === false) {
-      throw new Error("replace-target-not-found");
-    }
     const id = await this.addImageEntry(url, options.addOptions, fitOnAdd);
     return { id, mode: "add" };
   }
@@ -4417,9 +4428,9 @@ var ImageTool = class {
     var _a, _b;
     const strokeStyleRaw = this.getConfig(
       "image.frame.strokeStyle",
-      "solid"
-    ) || "solid";
-    const strokeStyle = strokeStyleRaw === "dashed" || strokeStyleRaw === "hidden" ? strokeStyleRaw : "solid";
+      "dashed"
+    ) || "dashed";
+    const strokeStyle = strokeStyleRaw === "dashed" || strokeStyleRaw === "hidden" ? strokeStyleRaw : "dashed";
     const strokeWidth = Number(
       (_a = this.getConfig("image.frame.strokeWidth", 2)) != null ? _a : 2
     );
@@ -4427,7 +4438,7 @@ var ImageTool = class {
       (_b = this.getConfig("image.frame.dashLength", 8)) != null ? _b : 8
     );
     return {
-      strokeColor: this.getConfig("image.frame.strokeColor", "#FF0000") || "#FF0000",
+      strokeColor: this.getConfig("image.frame.strokeColor", "#808080") || "#808080",
       strokeWidth: Number.isFinite(strokeWidth) ? Math.max(0, strokeWidth) : 2,
       strokeStyle,
       dashLength: Number.isFinite(dashLength) ? Math.max(1, dashLength) : 8,
@@ -4692,8 +4703,10 @@ var ImageTool = class {
     const frame = this.getFrameRect();
     const desiredIds = new Set(renderItems.map((item) => item.id));
     if (this.focusedImageId && !desiredIds.has(this.focusedImageId)) {
-      this.focusedImageId = null;
-      this.isImageSelectionActive = false;
+      this.setImageFocus(null, {
+        syncCanvasSelection: false,
+        skipRender: true
+      });
     }
     this.getImageObjects().forEach((obj) => {
       var _a, _b;
@@ -4736,8 +4749,10 @@ var ImageTool = class {
     next[index] = this.normalizeItem({ ...next[index], ...updates });
     this.workingItems = next;
     this.hasWorkingChanges = true;
-    this.isImageSelectionActive = true;
-    this.focusedImageId = id;
+    this.setImageFocus(id, {
+      syncCanvasSelection: false,
+      skipRender: true
+    });
     if (this.isToolActive) {
       this.updateImages();
     }
@@ -4766,16 +4781,13 @@ var ImageTool = class {
     });
     this.updateConfig(next);
     if (replacingSource) {
-      this.focusedImageId = id;
-      this.isImageSelectionActive = true;
-      this.suppressSelectionClearUntil = Date.now() + IMAGE_REPLACE_GUARD_MS;
       this.debug("replace:image:begin", { id, replacingUrl });
       this.purgeSourceSizeCacheForItem(base);
       const loaded = await this.waitImageLoaded(id, true);
       this.debug("replace:image:loaded", { id, loaded });
       if (loaded) {
         await this.refitImageToFrame(id);
-        this.focusImageSelection(id);
+        this.setImageFocus(id);
       }
     }
   }
@@ -4819,29 +4831,9 @@ var ImageTool = class {
     this.updateConfig(next);
     this.workingItems = this.cloneItems(next);
     this.hasWorkingChanges = false;
-    this.isImageSelectionActive = true;
-    this.focusedImageId = id;
     this.updateImages();
     this.emitWorkingChange(id);
   }
-  focusImageSelection(id) {
-    if (!this.canvasService) return;
-    const obj = this.getImageObject(id);
-    if (!obj) return;
-    this.isImageSelectionActive = true;
-    this.focusedImageId = id;
-    this.suppressSelectionClearUntil = Date.now() + 700;
-    obj.set({
-      selectable: true,
-      evented: true,
-      hasControls: true,
-      hasBorders: true
-    });
-    this.canvasService.canvas.setActiveObject(obj);
-    this.debug("focus:image", { id });
-    this.canvasService.requestRenderAll();
-    this.updateImages();
-  }
   async fitImageToArea(id, area) {
     var _a, _b;
     if (!this.canvasService) return;
@@ -4891,7 +4883,6 @@ var ImageTool = class {
     if (!frame.width || !frame.height) {
       return { ok: false, reason: "frame-not-ready" };
     }
-    const focusId = this.resolveReplaceTargetId(this.focusedImageId) || (this.workingItems.length === 1 ? this.workingItems[0].id : null);
     const next = [];
     for (const item of this.workingItems) {
       const url = await this.exportCroppedImageByIds([item.id], {
@@ -4915,13 +4906,7 @@ var ImageTool = class {
     this.hasWorkingChanges = false;
     this.workingItems = this.cloneItems(next);
     this.updateConfig(next);
-    this.emitWorkingChange(focusId);
-    if (focusId) {
-      this.focusedImageId = focusId;
-      this.isImageSelectionActive = true;
-      this.suppressSelectionClearUntil = Date.now() + IMAGE_REPLACE_GUARD_MS;
-      this.focusImageSelection(focusId);
-    }
+    this.emitWorkingChange(this.focusedImageId);
     return { ok: true };
   }
   async exportCroppedImageByIds(imageIds, options) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pooder/kit",
-  "version": "5.0.3",
+  "version": "5.0.4",
   "description": "Standard plugins for Pooder editor",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/image.ts

@@ -57,8 +57,7 @@ interface FrameVisualConfig {
 
 interface UpsertImageOptions {
   id?: string;
-  mode?: "auto" | "replace" | "add";
-  createIfMissing?: boolean;
+  mode?: "replace" | "add";
   addOptions?: Partial<ImageItem>;
   fitOnAdd?: boolean;
 }
@@ -108,7 +107,6 @@ interface DetectFromFrameOptions {
 
 const IMAGE_OBJECT_LAYER_ID = "image.user";
 const IMAGE_OVERLAY_LAYER_ID = "image-overlay";
-const IMAGE_REPLACE_GUARD_MS = 2500;
 const IMAGE_DETECT_EXPAND_DEFAULT = 30;
 const IMAGE_DETECT_SIMPLIFY_TOLERANCE_DEFAULT = 2;
 const IMAGE_DETECT_MULTIPLIER_DEFAULT = 2;
@@ -131,7 +129,6 @@ export class ImageTool implements Extension {
   private isToolActive = false;
   private isImageSelectionActive = false;
   private focusedImageId: string | null = null;
-  private suppressSelectionClearUntil = 0;
   private renderSeq = 0;
   private dirtyTrackerDisposable?: { dispose(): void };
 
@@ -218,13 +215,10 @@ export class ImageTool implements Extension {
     const before = this.isToolActive;
     this.syncToolActiveFromWorkbench(event.id);
     if (!this.isToolActive) {
-      const now = Date.now();
-      const inGuardWindow =
-        now <= this.suppressSelectionClearUntil && !!this.focusedImageId;
-      if (!inGuardWindow) {
-        this.isImageSelectionActive = false;
-        this.focusedImageId = null;
-      }
+      this.setImageFocus(null, {
+        syncCanvasSelection: true,
+        skipRender: true,
+      });
     }
     this.debug("tool:activated", {
       id: event.id,
@@ -233,7 +227,6 @@ export class ImageTool implements Extension {
       before,
       isToolActive: this.isToolActive,
       focusedImageId: this.focusedImageId,
-      suppressSelectionClearUntil: this.suppressSelectionClearUntil,
     });
     if (!this.isToolActive && this.isDebugEnabled()) {
       console.trace("[ImageTool] tool deactivated trace");
@@ -271,16 +264,10 @@ export class ImageTool implements Extension {
   };
 
   private onSelectionCleared = () => {
-    const now = Date.now();
-    if (now <= this.suppressSelectionClearUntil && this.focusedImageId) {
-      this.debug("selection:cleared ignored", {
-        suppressUntil: this.suppressSelectionClearUntil,
-        focusedImageId: this.focusedImageId,
-      });
-      return;
-    }
-    this.isImageSelectionActive = false;
-    this.focusedImageId = null;
+    this.setImageFocus(null, {
+      syncCanvasSelection: false,
+      skipRender: true,
+    });
     this.debug("selection:cleared applied");
     this.updateImages();
   };
@@ -353,7 +340,7 @@ export class ImageTool implements Extension {
           id: "image.frame.strokeColor",
           type: "color",
           label: "Image Frame Stroke Color",
-          default: "#FF0000",
+          default: "#808080",
         },
         {
           id: "image.frame.strokeWidth",
@@ -369,7 +356,7 @@ export class ImageTool implements Extension {
           type: "select",
           label: "Image Frame Stroke Style",
           options: ["solid", "dashed", "hidden"],
-          default: "solid",
+          default: "dashed",
         },
         {
           id: "image.frame.dashLength",
@@ -474,6 +461,16 @@ export class ImageTool implements Extension {
             await this.fitImageToDefaultArea(id);
           },
         },
+        {
+          command: "focusImage",
+          title: "Focus Image",
+          handler: (
+            id: string | null,
+            options: { syncCanvasSelection?: boolean } = {},
+          ) => {
+            return this.setImageFocus(id, options);
+          },
+        },
         {
           command: "removeImage",
           title: "Remove Image",
@@ -483,8 +480,10 @@ export class ImageTool implements Extension {
             if (next.length !== this.items.length) {
               this.purgeSourceSizeCacheForItem(removed);
               if (this.focusedImageId === id) {
-                this.focusedImageId = null;
-                this.isImageSelectionActive = false;
+                this.setImageFocus(null, {
+                  syncCanvasSelection: true,
+                  skipRender: true,
+                });
               }
               this.updateConfig(next);
             }
@@ -506,8 +505,10 @@ export class ImageTool implements Extension {
           title: "Clear Images",
           handler: () => {
             this.sourceSizeBySrc.clear();
-            this.focusedImageId = null;
-            this.isImageSelectionActive = false;
+            this.setImageFocus(null, {
+              syncCanvasSelection: true,
+              skipRender: true,
+            });
             this.updateConfig([]);
           },
         },
@@ -584,29 +585,50 @@ export class ImageTool implements Extension {
     return Math.random().toString(36).substring(2, 9);
   }
 
-  private getImageIdFromActiveObject(): string | null {
-    const active = this.canvasService?.canvas.getActiveObject() as any;
-    if (
-      active?.data?.layerId === IMAGE_OBJECT_LAYER_ID &&
-      typeof active?.data?.id === "string"
-    ) {
-      return active.data.id;
-    }
-    return null;
+  private hasImageItem(id: string): boolean {
+    return (
+      this.items.some((item) => item.id === id) ||
+      this.workingItems.some((item) => item.id === id)
+    );
   }
 
-  private resolveReplaceTargetId(explicitId?: string | null): string | null {
-    const has = (id: string | null | undefined) =>
-      !!id && this.items.some((item) => item.id === id);
+  private setImageFocus(
+    id: string | null,
+    options: { syncCanvasSelection?: boolean; skipRender?: boolean } = {},
+  ) {
+    const syncCanvasSelection = options.syncCanvasSelection !== false;
 
-    if (has(explicitId)) return explicitId as string;
-    if (has(this.focusedImageId)) return this.focusedImageId as string;
+    if (id && !this.hasImageItem(id)) {
+      return { ok: false, reason: "image-not-found" as const };
+    }
 
-    const activeId = this.getImageIdFromActiveObject();
-    if (has(activeId)) return activeId;
+    this.focusedImageId = id;
+    this.isImageSelectionActive = !!id;
+
+    if (syncCanvasSelection && this.canvasService) {
+      const canvas = this.canvasService.canvas;
+      if (!id) {
+        canvas.discardActiveObject();
+      } else {
+        const obj = this.getImageObject(id);
+        if (obj) {
+          obj.set({
+            selectable: true,
+            evented: true,
+            hasControls: true,
+            hasBorders: true,
+          });
+          canvas.setActiveObject(obj);
+        }
+      }
+      this.canvasService.requestRenderAll();
+    }
+
+    if (!options.skipRender) {
+      this.updateImages();
+    }
 
-    if (this.items.length === 1) return this.items[0].id;
-    return null;
+    return { ok: true, id };
   }
 
   private async addImageEntry(
@@ -622,9 +644,6 @@ export class ImageTool implements Extension {
       ...options,
     } as ImageItem);
 
-    this.focusedImageId = id;
-    this.isImageSelectionActive = true;
-    this.suppressSelectionClearUntil = Date.now() + IMAGE_REPLACE_GUARD_MS;
     const sessionDirtyBeforeAdd = this.isToolActive && this.hasWorkingChanges;
     const waitLoaded = this.waitImageLoaded(id, true);
     this.updateConfig([...this.items, newItem]);
@@ -634,7 +653,7 @@ export class ImageTool implements Extension {
       await this.fitImageToDefaultArea(id);
     }
     if (loaded) {
-      this.focusImageSelection(id);
+      this.setImageFocus(id);
     }
     return id;
   }
@@ -643,23 +662,20 @@ export class ImageTool implements Extension {
     url: string,
     options: UpsertImageOptions = {},
   ): Promise<{ id: string; mode: "replace" | "add" }> {
-    const mode = options.mode || "auto";
+    const mode = options.mode || (options.id ? "replace" : "add");
     const fitOnAdd = options.fitOnAdd !== false;
-    if (mode === "add") {
-      const id = await this.addImageEntry(url, options.addOptions, fitOnAdd);
-      return { id, mode: "add" };
-    }
-
-    const targetId = this.resolveReplaceTargetId(options.id ?? null);
-    if (targetId) {
+    if (mode === "replace") {
+      if (!options.id) {
+        throw new Error("replace-target-id-required");
+      }
+      const targetId = options.id;
+      if (!this.hasImageItem(targetId)) {
+        throw new Error("replace-target-not-found");
+      }
       await this.updateImageInConfig(targetId, { url });
       return { id: targetId, mode: "replace" };
     }
 
-    if (mode === "replace" || options.createIfMissing === false) {
-      throw new Error("replace-target-not-found");
-    }
-
     const id = await this.addImageEntry(url, options.addOptions, fitOnAdd);
     return { id, mode: "add" };
   }
@@ -870,12 +886,12 @@ export class ImageTool implements Extension {
   private getFrameVisualConfig(): FrameVisualConfig {
     const strokeStyleRaw = (this.getConfig<string>(
       "image.frame.strokeStyle",
-      "solid",
-    ) || "solid") as string;
+      "dashed",
+    ) || "dashed") as string;
     const strokeStyle: "solid" | "dashed" | "hidden" =
       strokeStyleRaw === "dashed" || strokeStyleRaw === "hidden"
         ? strokeStyleRaw
-        : "solid";
+        : "dashed";
 
     const strokeWidth = Number(
       this.getConfig<number>("image.frame.strokeWidth", 2) ?? 2,
@@ -886,8 +902,8 @@ export class ImageTool implements Extension {
 
     return {
       strokeColor:
-        this.getConfig<string>("image.frame.strokeColor", "#FF0000") ||
-        "#FF0000",
+        this.getConfig<string>("image.frame.strokeColor", "#808080") ||
+        "#808080",
       strokeWidth: Number.isFinite(strokeWidth) ? Math.max(0, strokeWidth) : 2,
       strokeStyle,
       dashLength: Number.isFinite(dashLength) ? Math.max(1, dashLength) : 8,
@@ -1199,8 +1215,10 @@ export class ImageTool implements Extension {
     const frame = this.getFrameRect();
     const desiredIds = new Set(renderItems.map((item) => item.id));
     if (this.focusedImageId && !desiredIds.has(this.focusedImageId)) {
-      this.focusedImageId = null;
-      this.isImageSelectionActive = false;
+      this.setImageFocus(null, {
+        syncCanvasSelection: false,
+        skipRender: true,
+      });
     }
 
     this.getImageObjects().forEach((obj: any) => {
@@ -1281,8 +1299,10 @@ export class ImageTool implements Extension {
     next[index] = this.normalizeItem({ ...next[index], ...updates });
     this.workingItems = next;
     this.hasWorkingChanges = true;
-    this.isImageSelectionActive = true;
-    this.focusedImageId = id;
+    this.setImageFocus(id, {
+      syncCanvasSelection: false,
+      skipRender: true,
+    });
     if (this.isToolActive) {
       this.updateImages();
     }
@@ -1318,16 +1338,13 @@ export class ImageTool implements Extension {
     this.updateConfig(next);
 
     if (replacingSource) {
-      this.focusedImageId = id;
-      this.isImageSelectionActive = true;
-      this.suppressSelectionClearUntil = Date.now() + IMAGE_REPLACE_GUARD_MS;
       this.debug("replace:image:begin", { id, replacingUrl });
       this.purgeSourceSizeCacheForItem(base);
       const loaded = await this.waitImageLoaded(id, true);
       this.debug("replace:image:loaded", { id, loaded });
       if (loaded) {
         await this.refitImageToFrame(id);
-        this.focusImageSelection(id);
+        this.setImageFocus(id);
       }
     }
   }
@@ -1380,32 +1397,10 @@ export class ImageTool implements Extension {
     this.updateConfig(next);
     this.workingItems = this.cloneItems(next);
     this.hasWorkingChanges = false;
-    this.isImageSelectionActive = true;
-    this.focusedImageId = id;
     this.updateImages();
     this.emitWorkingChange(id);
   }
 
-  private focusImageSelection(id: string) {
-    if (!this.canvasService) return;
-    const obj = this.getImageObject(id);
-    if (!obj) return;
-
-    this.isImageSelectionActive = true;
-    this.focusedImageId = id;
-    this.suppressSelectionClearUntil = Date.now() + 700;
-    obj.set({
-      selectable: true,
-      evented: true,
-      hasControls: true,
-      hasBorders: true,
-    });
-    this.canvasService.canvas.setActiveObject(obj);
-    this.debug("focus:image", { id });
-    this.canvasService.requestRenderAll();
-    this.updateImages();
-  }
-
   private async fitImageToArea(
     id: string,
     area: { width: number; height: number; left?: number; top?: number },
@@ -1473,10 +1468,6 @@ export class ImageTool implements Extension {
       return { ok: false, reason: "frame-not-ready" };
     }
 
-    const focusId =
-      this.resolveReplaceTargetId(this.focusedImageId) ||
-      (this.workingItems.length === 1 ? this.workingItems[0].id : null);
-
     const next: ImageItem[] = [];
     for (const item of this.workingItems) {
       const url = await this.exportCroppedImageByIds([item.id], {
@@ -1502,13 +1493,7 @@ export class ImageTool implements Extension {
     this.hasWorkingChanges = false;
     this.workingItems = this.cloneItems(next);
     this.updateConfig(next);
-    this.emitWorkingChange(focusId);
-    if (focusId) {
-      this.focusedImageId = focusId;
-      this.isImageSelectionActive = true;
-      this.suppressSelectionClearUntil = Date.now() + IMAGE_REPLACE_GUARD_MS;
-      this.focusImageSelection(focusId);
-    }
+    this.emitWorkingChange(this.focusedImageId);
     return { ok: true };
   }