@bensitu/image-editor 1.5.2 → 2.0.0

package/dist/types/mask/mask-style.d.ts

@@ -0,0 +1,338 @@
+/**
+ * Hover, selection, and "original style restore" helpers for
+ * mask visual state. Owns the legacy `_getMaskNormalStyle`,
+ * `_withNormalizedMaskStyles`, `_rebindMaskEvents`, and the
+ * selected/unselected stroke logic from `_handleSelectionChanged`
+ * that were inlined on the editor in legacy and are now extracted
+ * into pure(ish) helpers that take a {@link MaskStyleContext}.
+ *
+ * Two callers consume the same backup shape:
+ *
+ * - Export bake-in (`export/export-service.ts`) — temporarily forces every
+ *   mask to `opacity: 1, fill: '#000', strokeWidth: 0, stroke: null,
+ *   selectable: false` so the rendered raster has solid black masks, and
+ *   restores the live values inside a `finally` block whether the export
+ *   succeeded or threw.
+ *
+ * - Crop session (`crop/crop-controller.ts`) — backs up the same fields plus
+ *   `lockRotation` when entering crop mode and restores them on
+ *   `cancelCrop`.
+ *
+ * Centralizing the backup shape, the hover style literals (`#ff5500`,
+ * `strokeWidth: 2`, `opacity = originalAlpha + 0.2`), and the
+ * selected/unselected stroke literals (`#ff0000`, `mask.originalStroke ||
+ * '#ccc'`) here means the legacy visuals stay pixel-identical and any future
+ * tweak happens in one place.
+ *
+ * ## Owned contracts
+ *
+ * - {@link captureMaskStyleBackup} captures the prior
+ *   live values for `opacity`, `fill`, `stroke`, `strokeWidth`, `selectable`,
+ *   `evented`, and `lockRotation` BEFORE any export-only mutation runs. The backup
+ *   shape matches {@link MaskBackup} in `core/public-types.ts`.
+ *
+ * - {@link withMaskStyleBackup} runs the supplied
+ *   mutator → callback inside a `try/finally` so {@link restoreMaskStyleBackup}
+ *   is called regardless of whether the callback resolved or threw.
+ *
+ * - Each restored field is the exact value captured
+ *   at the start of the operation; the restore performs no defaulting and
+ *   no clamping, so an export-only style is never observable on any mask
+ *   after the operation returns.
+ *
+ * - {@link applyCropHideMaskStyle} sets `opacity: 0`
+ *   and `evented: false` on a mask so the user cannot interact with it
+ *   while the crop rectangle is the only interactive object. The caller is
+ *   expected to have captured a backup via {@link captureMaskStyleBackup}
+ *   first.
+ *
+ * - {@link restoreMaskStyleBackup} restores
+ *   `opacity`, `fill`, `strokeWidth`, `stroke`, `selectable`, `evented`,
+ *   and `lockRotation` from the captured {@link MaskBackup}, matching the current
+ *   documented `MaskBackup` interface.
+ *
+ * - **Mirrors legacy hover behavior** — {@link attachMaskHoverHandlers} and
+ *   {@link reattachMaskHoverHandlers} bind the same `mouseover`/`mouseout`
+ *   handlers legacy's `_rebindMaskEvents` used. The handlers read
+ *   `mask.originalAlpha` / `mask.originalStroke` / `mask.originalStrokeWidth`
+ *   on each invocation so they always reflect the current "live" state
+ *   (e.g. after a stroke change from a selection event).
+ *
+ * - **Mirrors legacy selection styling** — {@link applyMaskSelectedStyle} sets
+ *   the selection-highlight stroke (`#ff0000`, `strokeWidth: 1`) and
+ *   {@link applyMaskUnselectedStyle} restores the normal stroke from the
+ *   per-mask `originalStroke` / `originalStrokeWidth`. Both literals match
+ *   legacy's `_handleSelectionChanged`.
+ *
+ * ## Out of scope (handled by sibling modules)
+ *
+ * - Mask creation, falsy-style preservation, polygon placement — see
+ *   `mask/mask-factory.ts`.
+ * - Mask label overlay — see `mask/mask-label-manager.ts`.
+ * - Mask list DOM — see `mask/mask-list.ts`.
+ *
+ * ## Implementation notes
+ *
+ * - The orchestrator (`src/image-editor.ts`) owns the canvas reference and
+ *   the resolved options. The helpers in this module receive those slots
+ *   through a {@link MaskStyleContext} so the module is independent of the
+ *   `ImageEditor` class shape and can be unit tested in isolation against
+ *   a stub Fabric environment.
+ * - Hover handlers do NOT cache the normal/hover style at attach time. They
+ *   read `mask.originalAlpha` / `mask.originalStroke` / `mask.originalStrokeWidth`
+ *   on every event so the visual matches the live "original" values even
+ *   after a stroke or opacity change (matching legacy).
+ * - The handlers are tagged on `mask.imageEditorMaskHandlers` exactly as
+ *   legacy did so {@link reattachMaskHoverHandlers} can drop the old pair before
+ *   binding fresh ones, avoiding duplicate listeners after `loadFromJSON`.
+ *
+ * @module
+ */
+import type * as FabricNS from 'fabric';
+import type { MaskBackup, MaskObject, ResolvedOptions } from '../core/public-types.js';
+/**
+ * State the mask-style helpers read from the `ImageEditor` orchestrator.
+ *
+ * The module does NOT own any of these slots — it only reads them so
+ * ownership of the canvas and resolved options stays on the orchestrator
+ * (where legacy left them).
+ */
+export interface MaskStyleContext {
+    /**
+     * The live Fabric canvas. May be `null` after `dispose` or before
+     * `init` has run; the helpers no-op in that case.
+     */
+    canvas: FabricNS.Canvas | null;
+    /**
+     * Fully resolved editor options. Only consulted by helpers that need
+     * the export-bake-in fill (`#000` matches legacy) or the crop visibility
+     * defaults; most helpers operate on the per-mask `original*` fields
+     * and do not need this slot.
+     */
+    options?: ResolvedOptions;
+}
+/**
+ * The "normal" (non-hover, non-selected) style of a mask, computed from
+ * its persisted `original*` fields. Matches the shape returned by legacy's
+ * `_getMaskNormalStyle`.
+ */
+export interface MaskNormalStyle {
+    stroke: FabricNS.TFiller | string | null;
+    strokeWidth: number;
+    opacity: number;
+}
+/**
+ * Compute the "normal" (non-hover, non-selected) style of `mask` from its
+ * persisted `original*` fields, with legacy-identical fallbacks.
+ *
+ * - `stroke` → `mask.originalStroke`, falling back to `'#ccc'` (legacy).
+ * - `strokeWidth` → `Number(mask.originalStrokeWidth)` if finite, else `1`.
+ * - `opacity` → `Number(mask.originalAlpha)` if finite, else `0.5`.
+ *
+ * The result is used by:
+ * - {@link applyMaskNormalStyle} to restore on `mouseout`,
+ * - {@link applyMaskUnselectedStyle} to restore the un-highlighted stroke,
+ * - export bake-in callers that want a pre-mutation snapshot of the live
+ *   visual when no `MaskBackup` is being captured.
+ *
+ * @param mask - The mask to inspect.
+ * @returns A {@link MaskNormalStyle} ready to pass to `mask.set(...)`.
+ */
+export declare function getMaskNormalStyle(mask: MaskObject): MaskNormalStyle;
+/**
+ * Compute the "hover" style for `mask`, derived from its normal style.
+ *
+ * - `stroke` → `'#ff5500'` (legacy).
+ * - `strokeWidth` → `2` (legacy).
+ * - `opacity` → `min(originalAlpha + 0.2, 1)` (legacy).
+ *
+ * @param mask - The mask to inspect.
+ * @returns A style patch ready to pass to `mask.set(...)`.
+ */
+export declare function getMaskHoverStyle(mask: MaskObject): MaskNormalStyle;
+/**
+ * Apply the selected-mask highlight stroke. Matches legacy's literal
+ * (`stroke: '#ff0000'`, `strokeWidth: 1`).
+ *
+ * Does NOT change opacity — the selection highlight only modifies the
+ * outline so the user can still see the mask's tinted fill.
+ *
+ * @param mask - The mask becoming selected.
+ */
+export declare function applyMaskSelectedStyle(mask: MaskObject): void;
+/**
+ * Restore the un-highlighted stroke on `mask` after selection moves to a
+ * different object. Reads the per-mask `originalStroke`/`originalStrokeWidth`
+ * (matching legacy's `_handleSelectionChanged`) so the value is the one the
+ * mask carried before any selection-time mutation.
+ *
+ * Does NOT touch `opacity` — the un-highlighted state retains the live
+ * opacity (which may differ from `originalAlpha` while a hover is in
+ * progress, etc.).
+ *
+ * @param mask - The mask becoming un-selected.
+ */
+export declare function applyMaskUnselectedStyle(mask: MaskObject): void;
+/**
+ * Bind `mouseover`/`mouseout` handlers on `mask` that toggle the legacy hover
+ * highlight. The handlers re-read `mask.originalAlpha` /
+ * `mask.originalStroke` / `mask.originalStrokeWidth` on each event so they
+ * track any post-attach mutation (matching legacy's `_rebindMaskEvents`).
+ *
+ * Handlers are tagged on `mask.imageEditorMaskHandlers` so
+ * {@link reattachMaskHoverHandlers} can drop them before binding a new
+ * pair, avoiding duplicates after a `loadFromJSON` restore.
+ *
+ * Idempotent — calling twice on the same mask without an intervening
+ * detach simply produces two pairs of listeners. Use
+ * {@link reattachMaskHoverHandlers} to refresh listeners safely.
+ *
+ * @param mask - The mask to bind handlers on.
+ */
+export declare function attachMaskHoverHandlers(mask: MaskObject): void;
+/**
+ * Drop any previously-attached hover handler pair (best-effort) and bind a
+ * fresh pair via {@link attachMaskHoverHandlers}.
+ *
+ * Used after `canvas.loadFromJSON` in `core/state-serializer.ts`'s
+ * `loadFromState` flow, because Fabric never serializes event listeners,
+ * so masks restored from history have lost their hover styling. The
+ * orchestrator re-runs this helper for every restored mask.
+ *
+ * Also re-asserts the persisted `original*` metadata when missing — legacy's
+ * `_rebindMaskEvents` did the same so a snapshot from an older format that
+ * happens to lack `originalStroke`/`originalStrokeWidth` still hovers
+ * correctly. The current Pretty_Printer always serializes
+ * `originalAlpha`, but we defend against partial payloads here too.
+ *
+ * @param mask - The mask to refresh handlers on.
+ */
+export declare function reattachMaskHoverHandlers(mask: MaskObject): void;
+/**
+ * Detach the hover handler pair previously bound by
+ * {@link attachMaskHoverHandlers} (or {@link reattachMaskHoverHandlers}).
+ *
+ * Best-effort — wraps each `off(...)` in `try/catch` so a stale Fabric
+ * reference does not break callers that iterate every mask (e.g. the
+ * `dispose` path or `removeAllMasks`).
+ *
+ * @param mask - The mask to detach handlers from.
+ */
+export declare function detachMaskHoverHandlers(mask: MaskObject): void;
+/**
+ * Snapshot the current live values of the fields that both the export
+ * bake-in path and the crop session need to restore later.
+ *
+ * Captured fields:
+ *
+ * - `opacity` — restored when the export ends or the crop is canceled.
+ * - `fill` — export bake-in temporarily forces `'#000'`; crop never
+ *   changes fill but captures it so a single restore call works for both.
+ * - `strokeWidth` — export bake-in forces `0`.
+ * - `stroke` — export bake-in forces `null`.
+ * - `selectable` — both paths force `false` so the mask is not draggable
+ *   while the operation is in progress.
+ * - `evented` — the crop session forces `false` while the crop rectangle is
+ *   the only interactive object.
+ * - `lockRotation` — the crop session captures this because some integrators
+ *   set `maskRotatable: true` and the rotation lock is part of the
+ *   per-mask state.
+ *
+ * Defaults match legacy: missing `opacity` → `1`, missing `selectable` →
+ * `true`, missing `lockRotation` → `false`. They never override a
+ * caller-supplied value because the snapshot reads from the live mask.
+ *
+ * @param mask - The mask whose live style should be captured.
+ * @returns A {@link MaskBackup} suitable for passing to
+ *          {@link restoreMaskStyleBackup}.
+ */
+export declare function captureMaskStyleBackup(mask: MaskObject): MaskBackup;
+/**
+ * Restore every backed-up field from a {@link MaskBackup} onto the mask
+ * referenced by `backup.object`.
+ *
+ * Wraps the `set(...)` call in `try/catch` so a stale Fabric reference (a
+ * mask removed after the backup was captured but before the restore
+ * finally block ran) does not break callers iterating multiple backups.
+ * After a successful restore, `setCoords` is called to keep Fabric's
+ * cached bounding rect in sync (matching legacy's mergeMasks restore).
+ *
+ * @param backup - The backup produced by {@link captureMaskStyleBackup}.
+ *
+ */
+export declare function restoreMaskStyleBackup(backup: MaskBackup): void;
+/**
+ * Run `callback` with every mask's stroke/strokeWidth/opacity reset to the
+ * persisted "normal" style ({@link getMaskNormalStyle}), then restore each
+ * mutated field inside a `finally` block.
+ *
+ * Mirrors legacy's `_withNormalizedMaskStyles`. The two callers are:
+ *
+ * - The pre-snapshot pass in some history paths that wants the snapshot
+ *   to capture a "clean" un-hovered, un-selected canvas regardless of the
+ *   live UI state.
+ * - The crop-cancel restore path that wants to clear any selection
+ *   highlight before re-rendering.
+ *
+ * Only fields that ACTUALLY changed are captured and restored — if a mask
+ * is already at its normal style, no patch is recorded for it.
+ *
+ * The `finally` block runs whether `callback` returned, threw, or
+ * rejected. The function returns whatever `callback` returns (sync or
+ * Promise), preserving the caller's control flow.
+ *
+ * @param context - Orchestration context — see {@link MaskStyleContext}.
+ * @param callback - Body to execute with normalized mask styles.
+ * @returns        The value returned by `callback` (or the promise it returned).
+ */
+export declare function withNormalizedMaskStyles<T>(context: MaskStyleContext, callback: () => T): T;
+/**
+ * Captures every mask's live style via {@link captureMaskStyleBackup},
+ * runs the supplied async `callback` (which is allowed to mutate masks
+ * freely — typically by forcing the export bake-in style of
+ * `opacity: 1, fill: '#000', strokeWidth: 0, stroke: null,
+ * selectable: false`), then restores every mask's pre-callback state in a
+ * `finally` block — even if `callback` rejected.
+ *
+ * This is the canonical owner of the "export-only style restoration"
+ * contract. Callers in
+ * `export/export-service.ts` use this so they never need to write their
+ * own `try/finally` block — and so a future refactor cannot accidentally
+ * forget the restore step on an early return path.
+ *
+ * The function returns whatever `callback` resolves to.
+ *
+ * @typeParam T - The return type of `callback`.
+ * @param context - Orchestration context — see {@link MaskStyleContext}.
+ * @param mutator - Synchronous function applied to each captured mask
+ *                   BEFORE `callback` runs. Typically applies the export
+ *                   bake-in style. Called once per mask in canvas object
+ *                   order with `(mask, index)`. Backups are captured BEFORE
+ *                   the mutator runs so an exception in the mutator still
+ *                   triggers the `finally` restore for already-mutated
+ *                   masks.
+ * @param callback - The export body to run after every mutator pass
+ *                   completed. Typically `canvas.toDataURL` plus any
+ *                   post-processing.
+ * @returns          The value `callback` resolved to.
+ *
+ */
+export declare function withMaskStyleBackup<T>(context: MaskStyleContext, mutator: (mask: MaskObject, index: number) => void, callback: () => Promise<T> | T): Promise<T>;
+/**
+ * Apply the crop-mode hide style on `mask`: opacity 0 + non-interactive.
+ *
+ * Used by `crop/crop-controller.ts` when entering crop mode with
+ * `options.crop.hideMasksDuringCrop === true`. Callers MUST capture a
+ * {@link MaskBackup} via {@link captureMaskStyleBackup} BEFORE calling
+ * this helper so {@link restoreMaskStyleBackup} can revert the change on
+ * `cancelCrop`.
+ *
+ * Sets `evented: false` and `selectable: false` so the user cannot
+ * interact with the mask while only the crop rectangle should respond to
+ * pointer events. Wraps the `set(...)` in `try/catch` so a removed mask
+ * does not break the loop in the controller.
+ *
+ * @param mask - The mask to hide.
+ */
+export declare function applyCropHideMaskStyle(mask: MaskObject): void;
+//# sourceMappingURL=mask-style.d.ts.map

package/dist/types/mask/mask-style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mask-style.d.ts","sourceRoot":"","sources":["../../../src/mask/mask-style.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyFG;AAEH,OAAO,KAAK,KAAK,QAAQ,MAAM,QAAQ,CAAC;AACxC,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAwBvF;;;;;;GAMG;AACH,MAAM,WAAW,gBAAgB;IAC7B;;;OAGG;IACH,MAAM,EAAE,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC;IAC/B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;CAC7B;AAED;;;;GAIG;AACH,MAAM,WAAW,eAAe;IAC5B,MAAM,EAAE,QAAQ,CAAC,OAAO,GAAG,MAAM,GAAG,IAAI,CAAC;IACzC,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;CACnB;AAoBD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,UAAU,GAAG,eAAe,CAQpE;AAED;;;;;;;;;GASG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,UAAU,GAAG,eAAe,CAQnE;AAID;;;;;;;;GAQG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,CAE7D;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,CAM/D;AAID;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,CAe9D;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,CAwChE;AAED;;;;;;;;;GASG;AACH,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,CAU9D;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,UAAU,GAAG,UAAU,CAWnE;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI,CAiB/D;AAeD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,wBAAwB,CAAC,CAAC,EAAE,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,CAAC,GAAG,CAAC,CAiC3F;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAsB,mBAAmB,CAAC,CAAC,EACvC,OAAO,EAAE,gBAAgB,EACzB,OAAO,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,EAClD,QAAQ,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,GAC/B,OAAO,CAAC,CAAC,CAAC,CAiBZ;AAID;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,CAM7D"}

package/dist/types/ui/dom-bindings.d.ts

@@ -0,0 +1,103 @@
+/**
+ * Managed registry of DOM event listeners owned by the
+ * {@link ImageEditor} facade. Records every listener it adds so
+ * `dispose` can detach them all idempotently.
+ *
+ * ## Owned contracts
+ *
+ * - `bindIfExists(key, event, handler)` records the
+ *   `{ elementKey, eventType, handler}` triple in an internal registry as
+ *   the listener is attached.
+ * - `removeAll` iterates the registry, calls
+ *   `removeEventListener` for every recorded entry, and clears the registry
+ *   afterwards.
+ * - Every `removeEventListener` call is wrapped in
+ *   `try/catch` so a second `dispose` (or a listener that has already been
+ *   detached by other means) never throws. `removeAll` is idempotent.
+ * - Every bound handler is wrapped so it consults the
+ *   editor's `isDisposed` flag (via the `isDisposed` callback supplied to the
+ *   constructor) and exits early without touching the canvas while disposed.
+ *
+ * ## Why this lives in its own module
+ *
+ * The orchestrator's `dispose` path needs to detach DOM listeners without
+ * caring about which logical key originally owned each one. Co-locating the
+ * registry here keeps the orchestrator free of bookkeeping and lets unit
+ * tests exercise the bindings registry without instantiating a full editor.
+ * This module is imported by `image-editor.ts` only and is intentionally not
+ * re-exported from `src/index.ts`.
+ *
+ * @module
+ */
+import type { ElementIdMap } from '../core/public-types.js';
+/**
+ * Logical element-name keys understood by the editor's `idMap`. Mirrors the
+ * `ElementKey` alias used internally by `image-editor.ts` so callers can
+ * speak the same vocabulary without crossing the public-types boundary.
+ */
+export type ElementKey = keyof Required<ElementIdMap>;
+/**
+ * Lightweight registry of DOM event listeners owned by an editor instance.
+ *
+ * The class is intentionally small: it does not know about Fabric, the
+ * animation queue, or the operation guard — it only knows how to look up an
+ * element ID for a key and how to add/remove a listener. Disposed-state
+ * awareness comes in via the `isDisposed` callback so the guard can stay the
+ * single source of truth for the `isDisposed` flag (see
+ * `core/operation-guard.ts`).
+ *
+ * Usage:
+ *
+ * ```ts
+ * const bindings = new DomBindings(
+ *   (key) => this.elements[key],
+ *   () => this.guard.isDisposed(),
+ * );
+ * bindings.bindIfExists('zoomInButton', 'click', () =>
+ *   this.scaleImage(s + step),
+ * );
+ * // ...
+ * bindings.removeAll(); // called from dispose
+ * ```
+ */
+export declare class DomBindings {
+    private registry;
+    private readonly resolveElementId;
+    private readonly isDisposed;
+    /**
+     * @param resolveElementId - Returns the resolved DOM element ID for a given logical key, or a
+     *   falsy value when the integrator omitted that key from the `idMap`.
+     *   The orchestrator's `elements` table fills this role.
+     * @param isDisposed - Returns the editor's current `isDisposed` flag. Bound handlers
+     *   consult this on every dispatch and exit early when it returns
+     *   `true`.
+     */
+    constructor(resolveElementId: (key: ElementKey) => string | null | undefined, isDisposed: () => boolean);
+    /**
+     * Look up the element registered under `key`. If it exists, attach
+     * `handler` for `eventType` and record the binding so `removeAll` can
+     * detach it later. The handler is wrapped to short-circuit when the
+     * editor has been disposed.
+     *
+     * Missing keys and missing elements are silently ignored — the editor
+     * tolerates partial DOM as documented under {@link ElementIdMap}.
+     *
+     * @returns `true` if the listener was attached, `false` if the element
+     *          could not be resolved.
+     */
+    bindIfExists(key: ElementKey, eventType: string, handler: EventListener): boolean;
+    /**
+     * Detach every recorded listener and clear the registry. Each
+     * `removeEventListener` call is wrapped in `try/catch` so an
+     * already-detached listener (for example because the host page swapped
+     * out the DOM node) does not abort the cleanup loop. Calling `removeAll`
+     * a second time is a no-op.
+     */
+    removeAll(): void;
+    /**
+     * Number of currently-registered listeners. Exposed for diagnostics and
+     * for the unit tests under `tests/units/dom-bindings.test.mjs`.
+     */
+    size(): number;
+}
+//# sourceMappingURL=dom-bindings.d.ts.map

package/dist/types/ui/dom-bindings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom-bindings.d.ts","sourceRoot":"","sources":["../../../src/ui/dom-bindings.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE5D;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,QAAQ,CAAC,YAAY,CAAC,CAAC;AActD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBAAa,WAAW;IACpB,OAAO,CAAC,QAAQ,CAAsB;IACtC,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAiD;IAClF,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAgB;IAE3C;;;;;;;OAOG;gBAEC,gBAAgB,EAAE,CAAC,GAAG,EAAE,UAAU,KAAK,MAAM,GAAG,IAAI,GAAG,SAAS,EAChE,UAAU,EAAE,MAAM,OAAO;IAM7B;;;;;;;;;;;OAWG;IACH,YAAY,CAAC,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,GAAG,OAAO;IAmBjF;;;;;;OAMG;IACH,SAAS,IAAI,IAAI;IAgBjB;;;OAGG;IACH,IAAI,IAAI,MAAM;CAGjB"}

package/dist/types/ui/ui-state.d.ts

@@ -0,0 +1,112 @@
+/**
+ * Disabled-state, aria-state, and toolbar-state helpers used by
+ * {@link ImageEditor}'s `init` and operation handlers. These
+ * helpers share the same `idMap`-driven element-resolution
+ * vocabulary as `dom-bindings.ts` so the orchestrator can speak
+ * one language when wiring or refreshing UI state.
+ *
+ * ## Owned contracts
+ *
+ * - Bound DOM controls live in the orchestrator's
+ *   bindings registry and are addressed by logical {@link ElementKey}.
+ *   These helpers consume the same key vocabulary so toolbar-state updates
+ *   stay aligned with what `dom-bindings.ts` originally bound.
+ * - Toolbar-state mutation must remain a no-op when
+ *   the editor is disposed or when a logical key is unmapped. Each helper
+ *   short-circuits on a missing element ID or missing DOM node so
+ *   post-`dispose` `updateUi`-style calls cannot throw or surprise the
+ *   host page.
+ *
+ * ## Why this lives in its own module
+ *
+ * Splitting low-level DOM state out keeps `image-editor.ts` focused on
+ * toolbar policy while helpers here own native DOM writes such as setting
+ * `disabled` by logical key.
+ *
+ * Like `dom-bindings.ts` and `visibility-state.ts`, this module is imported
+ * by `image-editor.ts` only and is intentionally NOT re-exported from
+ * `src/index.ts`.
+ *
+ * @module
+ */
+import type { ElementIdMap } from '../core/public-types.js';
+/**
+ * Logical element-name keys understood by the editor's `idMap`. Matches the
+ * `ElementKey` alias exported from `dom-bindings.ts` so the orchestrator's
+ * registry and the toolbar-state helpers can be driven from the same
+ * lookup function without crossing the public-types boundary.
+ */
+export type ElementKey = keyof Required<ElementIdMap>;
+/**
+ * Callback used by every helper in this module to translate a logical
+ * {@link ElementKey} to the resolved DOM element ID supplied by the host
+ * page through `idMap`. Returning a falsy value (`null`, `undefined`, or
+ * empty string) means the host omitted that key — helpers MUST treat that
+ * as a no-op rather than a bug.
+ */
+export type ElementIdResolver = (key: ElementKey) => string | null | undefined;
+/**
+ * Set the native `disabled` IDL property on a button-like control resolved
+ * from `key`. Used by the orchestrator's `updateUi` policy: each toolbar
+ * button maps to one logical key, and the policy decides whether the
+ * button is currently usable.
+ *
+ * Behaviour:
+ *
+ * - If `resolveElementId(key)` returns a falsy value, the helper returns
+ *   without touching the DOM (the integrator chose not to wire that
+ *   control).
+ * - If `document.getElementById(id)` returns `null`, the helper returns
+ *   without throwing. A missing node is a partial-DOM scenario, not a
+ *   fatal error.
+ * - Otherwise the resolved element's `disabled` property is set to the
+ *   requested boolean. Using the IDL property (not `setAttribute`)
+ *   keeps the keyboard/click behaviour the
+ *   browser provides "for free" on real `<button>` elements.
+ *
+ * The element is typed as `HTMLButtonElement` because every key in the
+ * documented toolbar set (`zoomInButton`, `applyCropButton`, …) resolves to a
+ * `<button>`. A non-button host element will still receive the `disabled`
+ * assignment via the IDL slot but will not visually reflect it; that is
+ * the integrator's responsibility per the public `idMap` contract.
+ *
+ * @param resolveElementId - Resolver from logical key to DOM element ID.
+ * @param key - Logical toolbar element key.
+ * @param disabled - Target `disabled` value.
+ */
+export declare function setDisabled(resolveElementId: ElementIdResolver, key: ElementKey, disabled: boolean): void;
+/**
+ * Set the `aria-disabled` attribute on the element resolved from `key`.
+ * Useful for non-button toolbar controls (links, custom widgets) that do
+ * not honour the native `disabled` IDL property but still need to expose
+ * disabled state to assistive technology.
+ *
+ * Behaviour mirrors {@link setDisabled}: missing key or missing element
+ * results in a silent no-op. The attribute value is
+ * always the canonical string `'true'` or `'false'` as required by the
+ * ARIA spec — never the empty string and never removed entirely, so a
+ * subsequent toggle is a single `setAttribute` away.
+ *
+ * @param resolveElementId - Resolver from logical key to DOM element ID.
+ * @param key - Logical toolbar element key.
+ * @param disabled - Target `aria-disabled` value.
+ */
+export declare function setAriaDisabled(resolveElementId: ElementIdResolver, key: ElementKey, disabled: boolean): void;
+/**
+ * Toggle a CSS class on the element resolved from `key`. Used for toolbar
+ * state that does not correspond to `disabled` / `aria-disabled` — for
+ * example, marking the active mask in the mask list or flipping a button
+ * into a "pressed" visual style during crop mode.
+ *
+ * The helper delegates to `Element.classList.toggle(className, force)`, so
+ * the caller's `enabled` flag deterministically adds or removes the class
+ * regardless of its current presence. Missing key or missing element is a
+ * silent no-op.
+ *
+ * @param resolveElementId - Resolver from logical key to DOM element ID.
+ * @param key - Logical toolbar element key.
+ * @param className - CSS class name to toggle.
+ * @param enabled - `true` to add the class, `false` to remove it.
+ */
+export declare function setClass(resolveElementId: ElementIdResolver, key: ElementKey, className: string, enabled: boolean): void;
+//# sourceMappingURL=ui-state.d.ts.map

package/dist/types/ui/ui-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-state.d.ts","sourceRoot":"","sources":["../../../src/ui/ui-state.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE5D;;;;;GAKG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,QAAQ,CAAC,YAAY,CAAC,CAAC;AAEtD;;;;;;GAMG;AACH,MAAM,MAAM,iBAAiB,GAAG,CAAC,GAAG,EAAE,UAAU,KAAK,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;AAE/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,WAAW,CACvB,gBAAgB,EAAE,iBAAiB,EACnC,GAAG,EAAE,UAAU,EACf,QAAQ,EAAE,OAAO,GAClB,IAAI,CAKN;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,eAAe,CAC3B,gBAAgB,EAAE,iBAAiB,EACnC,GAAG,EAAE,UAAU,EACf,QAAQ,EAAE,OAAO,GAClB,IAAI,CAKN;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,QAAQ,CACpB,gBAAgB,EAAE,iBAAiB,EACnC,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,OAAO,GACjB,IAAI,CAKN"}

package/dist/types/ui/visibility-state.d.ts

@@ -0,0 +1,77 @@
+/**
+ * Placeholder/canvas-container visibility helper. Owns the
+ * standard-DOM-state transition that the orchestrator's
+ * private `_setPlaceholderVisible` method delegates to.
+ *
+ * ## Owned contracts
+ *
+ * - `setPlaceholderVisible(..., true)` SHALL set the
+ *   placeholder's `hidden` to `false` and `aria-hidden` to `'false'`, and
+ *   SHALL set the canvas container's `hidden` to `true` and `aria-hidden`
+ *   to `'true'`.
+ * - `setPlaceholderVisible(..., false)` SHALL set the
+ *   placeholder's `hidden` to `true` and `aria-hidden` to `'true'`, and
+ *   SHALL set the canvas container's `hidden` to `false` and `aria-hidden`
+ *   to `'false'`.
+ * - This module SHALL NOT add or remove the
+ *   Bootstrap `d-none` class on either element. The host page is free to
+ *   style `[hidden]` however it likes; the editor stays out of utility-class
+ *   territory so it works with or without Bootstrap.
+ * - When `containerElement` is `null`, the
+ *   placeholder's `hidden` and `aria-hidden` SHALL still be updated
+ *   correctly. A missing container is a partial-DOM scenario, not a fatal
+ *   error.
+ *
+ * ## Why this lives in its own module
+ *
+ * The helper uses standard DOM state instead of Bootstrap utility classes so
+ * the editor works with or without a host stylesheet. Keeping the transition
+ * here makes the orchestrator's private method a one-line delegate and keeps
+ * the behavior unit-testable in isolation. This module is imported by
+ * `image-editor.ts` only and is intentionally not re-exported from
+ * `src/index.ts`.
+ *
+ * @module
+ */
+/**
+ * Toggle placeholder/canvas-container visibility using only standard DOM
+ * state. The function is total: it never throws on null inputs and never
+ * touches utility classes.
+ *
+ * Visibility semantics:
+ *
+ * - `show === true` means **show the placeholder** (and therefore hide the
+ *   canvas container). The placeholder is the "no image yet" affordance, so
+ *   showing it implies the live canvas is not the right thing to render.
+ * - `show === false` means **hide the placeholder** (and therefore show the
+ *   canvas container). This is the post-`loadImage` steady state.
+ *
+ * In both branches the function:
+ *
+ * 1. Sets the DOM `hidden` property. Using the
+ *    property — not the attribute — keeps the IDL flag and the reflected
+ *    attribute in sync without an extra `setAttribute` call.
+ * 2. Sets `aria-hidden` to the matching string so assistive technology
+ *    tracks the visual state.
+ * 3. Leaves every other class and inline style untouched. In particular,
+ *    Bootstrap's `d-none` is never added or removed,
+ *    which lets the editor coexist with host pages that use `d-none` for
+ *    their own purposes.
+ *
+ * When `containerElement` is `null` (partial DOM, or a host page that does
+ * not wrap the canvas in a dedicated container), the placeholder side of
+ * the transition still runs to completion. When
+ * `placeholderElement` is `null` the function is a no-op for that side; the
+ * orchestrator's `updatePlaceholderStatus` already early-returns in that
+ * case, but defending here keeps the helper safe to call from any future
+ * code path.
+ *
+ * @param placeholderElement - The placeholder DOM element shown when no image is loaded, or `null`
+ *   when the host page omitted the placeholder slot from the `idMap`.
+ * @param containerElement - The canvas container DOM element wrapping the live `<canvas>`, or
+ *   `null` when no container is available.
+ * @param show - `true` to make the placeholder visible (and hide the canvas container);
+ *   `false` to hide the placeholder (and show the canvas container).
+ */
+export declare function setPlaceholderVisible(placeholderElement: HTMLElement | null, containerElement: HTMLElement | null, show: boolean): void;
+//# sourceMappingURL=visibility-state.d.ts.map

package/dist/types/ui/visibility-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"visibility-state.d.ts","sourceRoot":"","sources":["../../../src/ui/visibility-state.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,wBAAgB,qBAAqB,CACjC,kBAAkB,EAAE,WAAW,GAAG,IAAI,EACtC,gBAAgB,EAAE,WAAW,GAAG,IAAI,EACpC,IAAI,EAAE,OAAO,GACd,IAAI,CAgBN"}