@radix-ng/primitives 1.0.0-beta.0 → 1.0.0-beta.2

package/fesm2022/radix-ng-primitives-cropper.mjs

@@ -1,25 +1,23 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Directive, input, computed, Component, ElementRef, numberAttribute, output, signal, afterNextRender, effect, NgModule } from '@angular/core';
-import { clamp, provideToken } from '@radix-ng/primitives/core';
+import { Directive, input, Component, inject, ElementRef, Injector, PLATFORM_ID, numberAttribute, booleanAttribute, output, signal, computed, afterNextRender, effect, untracked, NgModule } from '@angular/core';
+import { createContext, clamp, injectId, resizeEffect } from '@radix-ng/primitives/core';
+import { isPlatformBrowser } from '@angular/common';
 
-const CROPPER_ROOT_CONTEXT = new InjectionToken('CROPPER_ROOT_CONTEXT');
-function injectCropperRootContext() {
-    return inject(CROPPER_ROOT_CONTEXT);
-}
+const [injectCropperRootContext, provideCropperRootContext] = createContext('CropperRoot', 'components/cropper');
 
 class RdxCropperCropAreaDirective {
     constructor() {
         this.rootContext = injectCropperRootContext();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCropperCropAreaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxCropperCropAreaDirective, isStandalone: true, selector: "[rdxCropperCropArea]", host: { properties: { "style": "rootContext.getCropAreaStyle()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxCropperCropAreaDirective, isStandalone: true, selector: "[rdxCropperCropArea]", host: { properties: { "style": "rootContext.cropAreaStyle()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCropperCropAreaDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxCropperCropArea]',
                     host: {
-                        '[style]': 'rootContext.getCropAreaStyle()'
+                        '[style]': 'rootContext.cropAreaStyle()'
                     }
                 }]
         }] });
@@ -29,14 +27,14 @@ class RdxCropperDescriptionDirective {
         this.rootContext = injectCropperRootContext();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCropperDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxCropperDescriptionDirective, isStandalone: true, selector: "[rdxCropperDescription]", host: { properties: { "attr.id": "rootContext.descriptionId()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxCropperDescriptionDirective, isStandalone: true, selector: "[rdxCropperDescription]", host: { properties: { "attr.id": "rootContext.descriptionId" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCropperDescriptionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxCropperDescription]',
                     host: {
-                        '[attr.id]': 'rootContext.descriptionId()'
+                        '[attr.id]': 'rootContext.descriptionId'
                     }
                 }]
         }] });
@@ -46,18 +44,21 @@ class RdxCropperImageComponent {
         this.rootContext = injectCropperRootContext();
         this.imgClass = input(...(ngDevMode ? [undefined, { debugName: "imgClass" }] : /* istanbul ignore next */ []));
         this.imgStyles = input(...(ngDevMode ? [undefined, { debugName: "imgStyles" }] : /* istanbul ignore next */ []));
-        this.imgClasses = computed(() => this.imgClass(), ...(ngDevMode ? [{ debugName: "imgClasses" }] : /* istanbul ignore next */ []));
-        this.imgStyless = computed(() => this.imgStyles(), ...(ngDevMode ? [{ debugName: "imgStyless" }] : /* istanbul ignore next */ []));
+        /**
+         * `alt` text for the rendered image. Defaults to `''` (decorative — screen readers skip it, since
+         * the cropper widget describes itself via the root's label/description). Set a non-empty value to
+         * give the image a meaningful accessible name.
+         */
+        this.imgAlt = input('', ...(ngDevMode ? [{ debugName: "imgAlt" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCropperImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: RdxCropperImageComponent, isStandalone: true, selector: "[rdxCropperImage]", inputs: { imgClass: { classPropertyName: "imgClass", publicName: "imgClass", isSignal: true, isRequired: false, transformFunction: null }, imgStyles: { classPropertyName: "imgStyles", publicName: "imgStyles", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style": "rootContext.getImageWrapperStyle()" } }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: RdxCropperImageComponent, isStandalone: true, selector: "[rdxCropperImage]", inputs: { imgClass: { classPropertyName: "imgClass", publicName: "imgClass", isSignal: true, isRequired: false, transformFunction: null }, imgStyles: { classPropertyName: "imgStyles", publicName: "imgStyles", isSignal: true, isRequired: false, transformFunction: null }, imgAlt: { classPropertyName: "imgAlt", publicName: "imgAlt", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style": "rootContext.imageWrapperStyle()" } }, ngImport: i0, template: `
         <img
-            [class]="imgClasses()"
-            [src]="rootContext.getImageProps()['src']"
-            [alt]="rootContext.getImageProps()['alt']"
-            [draggable]="rootContext.getImageProps()['draggable']"
-            [style]="imgStyless()"
-            aria-hidden="true"
+            [class]="imgClass()"
+            [src]="rootContext.image()"
+            [style]="imgStyles()"
+            [draggable]="false"
+            [alt]="imgAlt()"
         />
     `, isInline: true }); }
 }
@@ -66,25 +67,97 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             args: [{
                     selector: '[rdxCropperImage]',
                     host: {
-                        '[style]': 'rootContext.getImageWrapperStyle()'
+                        '[style]': 'rootContext.imageWrapperStyle()'
                     },
                     template: `
         <img
-            [class]="imgClasses()"
-            [src]="rootContext.getImageProps()['src']"
-            [alt]="rootContext.getImageProps()['alt']"
-            [draggable]="rootContext.getImageProps()['draggable']"
-            [style]="imgStyless()"
-            aria-hidden="true"
+            [class]="imgClass()"
+            [src]="rootContext.image()"
+            [style]="imgStyles()"
+            [draggable]="false"
+            [alt]="imgAlt()"
         />
     `
                 }]
-        }], propDecorators: { imgClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "imgClass", required: false }] }], imgStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "imgStyles", required: false }] }] } });
+        }], propDecorators: { imgClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "imgClass", required: false }] }], imgStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "imgStyles", required: false }] }], imgAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "imgAlt", required: false }] }] } });
+
+/**
+ * Clamp a pan offset so the zoomed image always fully covers the crop window — the user can never
+ * drag an image edge inside the crop frame. The offset is measured from the centered position, so the
+ * allowed travel on each axis is half the overflow of the scaled wrapper past the crop window.
+ *
+ * Returns `{ x: 0, y: 0 }` when the geometry is not ready yet (any dimension `<= 0`).
+ */
+function restrictOffset(offsetX, offsetY, zoom, geometry) {
+    const { wrapperWidth, wrapperHeight, cropWidth, cropHeight } = geometry;
+    if (wrapperWidth <= 0 || wrapperHeight <= 0 || cropWidth <= 0 || cropHeight <= 0) {
+        return { x: 0, y: 0 };
+    }
+    const maxDragX = Math.max(0, (wrapperWidth * zoom - cropWidth) / 2);
+    const maxDragY = Math.max(0, (wrapperHeight * zoom - cropHeight) / 2);
+    return {
+        x: clamp(offsetX, -maxDragX, maxDragX),
+        y: clamp(offsetY, -maxDragY, maxDragY)
+    };
+}
+/**
+ * Project the current pan/zoom into a crop rectangle in the source image's natural pixels.
+ *
+ * The wrapper is centered in the crop window and scaled by `zoom`; `baseScale` converts rendered px
+ * back to natural px. The result is rounded and clamped to the image bounds.
+ *
+ * Returns `null` when the geometry/image is not ready (any dimension `<= 0` or no image), or when the
+ * computed crop collapses to zero area.
+ */
+function calculateCropData(offsetX, offsetY, zoom, geometry, image) {
+    const { wrapperWidth, wrapperHeight, cropWidth, cropHeight } = geometry;
+    const imgW = image.width;
+    const imgH = image.height;
+    if (!imgW || !imgH || wrapperWidth <= 0 || wrapperHeight <= 0 || cropWidth <= 0 || cropHeight <= 0) {
+        return null;
+    }
+    const scaledWrapperWidth = wrapperWidth * zoom;
+    const scaledWrapperHeight = wrapperHeight * zoom;
+    const topLeftOffsetX = offsetX + (cropWidth - scaledWrapperWidth) / 2;
+    const topLeftOffsetY = offsetY + (cropHeight - scaledWrapperHeight) / 2;
+    const baseScale = imgW / wrapperWidth;
+    if (isNaN(baseScale) || baseScale === 0) {
+        return null;
+    }
+    const sx = (-topLeftOffsetX * baseScale) / zoom;
+    const sy = (-topLeftOffsetY * baseScale) / zoom;
+    const sWidth = (cropWidth * baseScale) / zoom;
+    const sHeight = (cropHeight * baseScale) / zoom;
+    const finalX = clamp(Math.round(sx), 0, imgW);
+    const finalY = clamp(Math.round(sy), 0, imgH);
+    const finalWidth = clamp(Math.round(sWidth), 0, imgW - finalX);
+    const finalHeight = clamp(Math.round(sHeight), 0, imgH - finalY);
+    if (finalWidth <= 0 || finalHeight <= 0) {
+        return null;
+    }
+    return { x: finalX, y: finalY, width: finalWidth, height: finalHeight };
+}
 
 // Based on https://github.com/origin-space/image-cropper/blob/main/src/Cropper.tsx
+/** Value equality for an `Area` so the crop `computed` only notifies when the rectangle changes. */
+const areaEqual = (a, b) => a === b || (!!a && !!b && a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height);
+/** Value equality for an `{x,y}` point so the clamped-offset `computed` only notifies on real moves. */
+const pointEqual = (a, b) => a.x === b.x && a.y === b.y;
+/** Exposes the root's public state to the child parts (image, crop-area, description). */
+const rootContext = () => {
+    const instance = inject(RdxCropperRootDirective);
+    return {
+        image: instance.image,
+        imageWrapperStyle: instance.imageWrapperStyle,
+        cropAreaStyle: instance.cropAreaStyle,
+        descriptionId: instance.descriptionId
+    };
+};
 class RdxCropperRootDirective {
     constructor() {
         this.elementRef = inject((ElementRef));
+        this.injector = inject(Injector);
+        this.isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
         this.CROPPER_DESC_WARN_MESSAGE = `Warning: \`Cropper\` requires a description element for accessibility.`;
         this.image = input.required(...(ngDevMode ? [{ debugName: "image" }] : /* istanbul ignore next */ []));
         this.cropPadding = input(25, { ...(ngDevMode ? { debugName: "cropPadding" } : /* istanbul ignore next */ {}), transform: numberAttribute });
@@ -92,49 +165,119 @@ class RdxCropperRootDirective {
         this.minZoom = input(1, { ...(ngDevMode ? { debugName: "minZoom" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         this.maxZoom = input(3, { ...(ngDevMode ? { debugName: "maxZoom" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         this.zoomSensitivity = input(0.005, { ...(ngDevMode ? { debugName: "zoomSensitivity" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /** Pan distance (px) per arrow-key press. */
         this.keyboardStep = input(10, { ...(ngDevMode ? { debugName: "keyboardStep" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /** Zoom delta per `+` / `-` / `PageUp` / `PageDown` press. */
+        this.zoomKeyboardStep = input(0.1, { ...(ngDevMode ? { debugName: "zoomKeyboardStep" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         this.zoom = input(undefined, { ...(ngDevMode ? { debugName: "zoom" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /** Accessible name for the cropper widget. */
+        this.ariaLabel = input('Interactive image cropper', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /** Disables all interaction (drag, wheel/pinch zoom, keyboard); exposed as `data-disabled`. */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.onCropChange = output();
         this.onZoomChange = output();
         // State signals
         this.imgWidth = signal(null, ...(ngDevMode ? [{ debugName: "imgWidth" }] : /* istanbul ignore next */ []));
         this.imgHeight = signal(null, ...(ngDevMode ? [{ debugName: "imgHeight" }] : /* istanbul ignore next */ []));
-        this.cropAreaWidth = signal(0, ...(ngDevMode ? [{ debugName: "cropAreaWidth" }] : /* istanbul ignore next */ []));
-        this.cropAreaHeight = signal(0, ...(ngDevMode ? [{ debugName: "cropAreaHeight" }] : /* istanbul ignore next */ []));
+        /** Raw content-box size (px) of the root, fed by the ResizeObserver / initial measure. */
+        this.containerSize = signal({ width: 0, height: 0 }, ...(ngDevMode ? [{ debugName: "containerSize" }] : /* istanbul ignore next */ []));
+        /**
+         * Crop-area size derived from the container minus padding, fitted to `aspectRatio`. A `computed`
+         * (not a written signal) so it stays reactive to `aspectRatio` / `cropPadding` changes, not only
+         * to container resizes — previously these inputs were read inside the ResizeObserver closure and
+         * never recomputed until the next resize.
+         */
+        this.cropAreaSize = computed(() => {
+            const { width, height } = this.containerSize();
+            if (width <= 0 || height <= 0) {
+                return { width: 0, height: 0 };
+            }
+            const maxPossibleWidth = Math.max(0, width - this.cropPadding() * 2);
+            const maxPossibleHeight = Math.max(0, height - this.cropPadding() * 2);
+            const aspectRatio = this.aspectRatio();
+            if (maxPossibleWidth / aspectRatio >= maxPossibleHeight) {
+                return { width: maxPossibleHeight * aspectRatio, height: maxPossibleHeight };
+            }
+            return { width: maxPossibleWidth, height: maxPossibleWidth / aspectRatio };
+        }, ...(ngDevMode ? [{ debugName: "cropAreaSize" }] : /* istanbul ignore next */ []));
+        this.cropAreaWidth = computed(() => this.cropAreaSize().width, ...(ngDevMode ? [{ debugName: "cropAreaWidth" }] : /* istanbul ignore next */ []));
+        this.cropAreaHeight = computed(() => this.cropAreaSize().height, ...(ngDevMode ? [{ debugName: "cropAreaHeight" }] : /* istanbul ignore next */ []));
         this.imageWrapperWidth = signal(0, ...(ngDevMode ? [{ debugName: "imageWrapperWidth" }] : /* istanbul ignore next */ []));
         this.imageWrapperHeight = signal(0, ...(ngDevMode ? [{ debugName: "imageWrapperHeight" }] : /* istanbul ignore next */ []));
-        this.offsetX = signal(0, ...(ngDevMode ? [{ debugName: "offsetX" }] : /* istanbul ignore next */ []));
-        this.offsetY = signal(0, ...(ngDevMode ? [{ debugName: "offsetY" }] : /* istanbul ignore next */ []));
+        /** Raw (unclamped) pan-offset intent (px) written by gestures; clamping lives in `clampedOffset`. */
+        this.offset = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
         this.internalZoom = signal(this.minZoom(), ...(ngDevMode ? [{ debugName: "internalZoom" }] : /* istanbul ignore next */ []));
         this.isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
-        this.descriptionId = signal(`cropper-${Math.random().toString(36).substring(2, 9)}`, ...(ngDevMode ? [{ debugName: "descriptionId" }] : /* istanbul ignore next */ []));
+        // SSR-stable, deterministic id (the project's CDK-free `_IdGenerator` replacement) so the
+        // `aria-describedby` reference matches between server and client renders.
+        this.descriptionId = injectId('rdx-cropper-description-');
         this.isZoomControlled = computed(() => this.zoom() !== undefined, ...(ngDevMode ? [{ debugName: "isZoomControlled" }] : /* istanbul ignore next */ []));
         this.effectiveZoom = computed(() => (this.isZoomControlled() ? this.zoom() : this.internalZoom()), ...(ngDevMode ? [{ debugName: "effectiveZoom" }] : /* istanbul ignore next */ []));
-        this.zoomValueText = computed(() => {
-            const zoomPercent = this.effectiveZoom() * 100;
-            return `Zoom: ${zoomPercent.toFixed(0)}%`;
-        }, ...(ngDevMode ? [{ debugName: "zoomValueText" }] : /* istanbul ignore next */ []));
+        /**
+         * The applied pan offset (px): the raw intent clamped to keep the image covering the crop window
+         * at the current geometry/zoom. Derived (not an effect) so it self-corrects when the container
+         * resizes or the zoom/aspect-ratio changes — no write-back, no `untracked` re-entrancy. This is the
+         * value the view renders and the crop math reads.
+         */
+        this.clampedOffset = computed(() => this.restrictOffset(this.offset().x, this.offset().y, this.effectiveZoom()), { ...(ngDevMode ? { debugName: "clampedOffset" } : /* istanbul ignore next */ {}), equal: pointEqual });
+        /**
+         * Crop rectangle derived from the rendered pan/zoom — the single source of truth for emission.
+         * `onCropChange` fires from one effect watching this, so interactions/handlers never emit directly
+         * (which previously double-emitted). Value equality keeps it from notifying on equal results.
+         */
+        this.cropData = computed(() => calculateCropData(this.clampedOffset().x, this.clampedOffset().y, this.effectiveZoom(), this.geometry(), {
+            width: this.imgWidth(),
+            height: this.imgHeight()
+        }), { ...(ngDevMode ? { debugName: "cropData" } : /* istanbul ignore next */ {}), equal: areaEqual });
         // Refs
         this.dragStartPoint = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "dragStartPoint" }] : /* istanbul ignore next */ []));
         this.dragStartOffset = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "dragStartOffset" }] : /* istanbul ignore next */ []));
-        this.latestRestrictedOffset = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "latestRestrictedOffset" }] : /* istanbul ignore next */ []));
         this.latestZoom = signal(this.minZoom(), ...(ngDevMode ? [{ debugName: "latestZoom" }] : /* istanbul ignore next */ []));
-        this.isInitialSetupDone = signal(false, ...(ngDevMode ? [{ debugName: "isInitialSetupDone" }] : /* istanbul ignore next */ []));
         this.initialPinchDistance = signal(0, ...(ngDevMode ? [{ debugName: "initialPinchDistance" }] : /* istanbul ignore next */ []));
         this.initialPinchZoom = signal(1, ...(ngDevMode ? [{ debugName: "initialPinchZoom" }] : /* istanbul ignore next */ []));
         this.isPinching = signal(false, ...(ngDevMode ? [{ debugName: "isPinching" }] : /* istanbul ignore next */ []));
         this.hasWarned = signal(false, ...(ngDevMode ? [{ debugName: "hasWarned" }] : /* istanbul ignore next */ []));
+        /**
+         * Inline style for the image wrapper: measured size, centered in the root, then translated and
+         * scaled by the current pan offset and zoom. A `computed` (not a method) so the `[style]` binding
+         * only re-applies when an input actually changes — a per-change-detection method call would
+         * allocate a new object every tick and force a constant re-bind.
+         */
+        this.imageWrapperStyle = computed(() => {
+            const wrapperW = this.imageWrapperWidth();
+            const wrapperH = this.imageWrapperHeight();
+            const { x: offsetX, y: offsetY } = this.clampedOffset();
+            const zoom = this.effectiveZoom();
+            return {
+                width: `${wrapperW}px`,
+                height: `${wrapperH}px`,
+                transform: `translate3d(${offsetX}px, ${offsetY}px, 0px) scale(${zoom})`,
+                position: 'absolute',
+                left: `calc(50% - ${wrapperW / 2}px)`,
+                top: `calc(50% - ${wrapperH / 2}px)`,
+                willChange: 'transform'
+            };
+        }, ...(ngDevMode ? [{ debugName: "imageWrapperStyle" }] : /* istanbul ignore next */ []));
+        /** Inline style for the crop-area overlay (its measured width/height). */
+        this.cropAreaStyle = computed(() => ({
+            width: `${this.cropAreaWidth()}px`,
+            height: `${this.cropAreaHeight()}px`
+        }), ...(ngDevMode ? [{ debugName: "cropAreaStyle" }] : /* istanbul ignore next */ []));
         afterNextRender(() => {
             this.initializeContainerDimensions();
         });
         this.setupImageLoadEffect();
         this.setupDimensionsEffects();
-        this.setupCropCalculationEffect();
         this.setupAccessibilityWarningEffect();
         this.setupEventListenersEffect();
         effect(() => {
             this.latestZoom.set(this.effectiveZoom());
         });
+        // Single source of crop emission: emit whenever the derived crop rectangle changes.
+        effect(() => {
+            const data = this.cropData();
+            untracked(() => this.onCropChange.emit(data));
+        });
     }
     updateZoom(newZoomValue) {
         const clampedZoom = clamp(newZoomValue, this.minZoom(), this.maxZoom());
@@ -147,20 +290,18 @@ class RdxCropperRootDirective {
     initializeContainerDimensions() {
         const element = this.elementRef.nativeElement;
         if (element && element.clientWidth > 0 && element.clientHeight > 0) {
-            this.cropAreaWidth.set(Math.max(0, element.clientWidth - this.cropPadding() * 2));
-            this.cropAreaHeight.set(Math.max(0, element.clientHeight - this.cropPadding() * 2));
+            // Seed the size for the first paint; the ResizeObserver keeps it in sync afterwards.
+            this.containerSize.set({ width: element.clientWidth, height: element.clientHeight });
         }
     }
     setupImageLoadEffect() {
         effect(() => {
             const image = this.image();
-            this.offsetX.set(0);
-            this.offsetY.set(0);
+            this.offset.set({ x: 0, y: 0 });
             if (!this.isZoomControlled()) {
                 this.internalZoom.set(this.minZoom());
             }
-            this.isInitialSetupDone.set(false);
-            if (!image) {
+            if (!image || !this.isBrowser) {
                 this.imgWidth.set(null);
                 this.imgHeight.set(null);
                 return;
@@ -186,44 +327,20 @@ class RdxCropperRootDirective {
         });
     }
     setupDimensionsEffects() {
-        effect(() => {
-            const element = this.elementRef.nativeElement;
-            if (!element)
-                return;
-            const updateDimensions = (width, height) => {
-                if (width <= 0 || height <= 0) {
-                    this.cropAreaWidth.set(0);
-                    this.cropAreaHeight.set(0);
-                    return;
-                }
-                const maxPossibleWidth = Math.max(0, width - this.cropPadding() * 2);
-                const maxPossibleHeight = Math.max(0, height - this.cropPadding() * 2);
-                let targetCropW, targetCropH;
-                if (maxPossibleWidth / this.aspectRatio() >= maxPossibleHeight) {
-                    targetCropH = maxPossibleHeight;
-                    targetCropW = targetCropH * this.aspectRatio();
-                }
-                else {
-                    targetCropW = maxPossibleWidth;
-                    targetCropH = targetCropW / this.aspectRatio();
-                }
-                this.cropAreaWidth.set(targetCropW);
-                this.cropAreaHeight.set(targetCropH);
-            };
-            const observer = new ResizeObserver((entries) => {
+        // Track the container's content-box size via the shared resize-observer effect; `cropAreaSize`
+        // derives crop dimensions from it reactively (so changing `aspectRatio` / `cropPadding`
+        // recomputes without waiting for a resize). `element` is null on the server, so no observer is
+        // constructed (SSR-safe).
+        resizeEffect({
+            injector: this.injector,
+            element: computed(() => (this.isBrowser ? this.elementRef.nativeElement : null)),
+            onResize: (entries) => {
                 for (const entry of entries) {
                     const { width, height } = entry.contentRect;
                     if (width > 0 && height > 0)
-                        updateDimensions(width, height);
+                        this.containerSize.set({ width, height });
                 }
-            });
-            observer.observe(element);
-            const initialWidth = element.clientWidth;
-            const initialHeight = element.clientHeight;
-            if (initialWidth > 0 && initialHeight > 0) {
-                updateDimensions(initialWidth, initialHeight);
             }
-            return () => observer.disconnect();
         });
         // Update image wrapper dimensions when crop area or image dimensions change
         effect(() => {
@@ -251,110 +368,25 @@ class RdxCropperRootDirective {
             this.imageWrapperHeight.set(targetWrapperHeight);
         });
     }
-    restrictOffset(dragOffsetX, dragOffsetY, currentZoom) {
-        const wrapperW = this.imageWrapperWidth();
-        const wrapperH = this.imageWrapperHeight();
-        const cropW = this.cropAreaWidth();
-        const cropH = this.cropAreaHeight();
-        if (wrapperW <= 0 || wrapperH <= 0 || cropW <= 0 || cropH <= 0) {
-            return { x: 0, y: 0 };
-        }
-        const effectiveWrapperWidth = wrapperW * currentZoom;
-        const effectiveWrapperHeight = wrapperH * currentZoom;
-        const maxDragX = Math.max(0, (effectiveWrapperWidth - cropW) / 2);
-        const maxDragY = Math.max(0, (effectiveWrapperHeight - cropH) / 2);
+    /** Current rendered geometry the crop math operates on, read from the state signals. */
+    geometry() {
         return {
-            x: clamp(dragOffsetX, -maxDragX, maxDragX),
-            y: clamp(dragOffsetY, -maxDragY, maxDragY)
+            wrapperWidth: this.imageWrapperWidth(),
+            wrapperHeight: this.imageWrapperHeight(),
+            cropWidth: this.cropAreaWidth(),
+            cropHeight: this.cropAreaHeight()
         };
     }
-    calculateCropData(finalOffsetX, finalOffsetY, finalZoom) {
-        const currentOffsetX = finalOffsetX ?? this.latestRestrictedOffset().x;
-        const currentOffsetY = finalOffsetY ?? this.latestRestrictedOffset().y;
-        const currentZoom = finalZoom ?? this.effectiveZoom();
-        const imgW = this.imgWidth();
-        const imgH = this.imgHeight();
-        const wrapperW = this.imageWrapperWidth();
-        const wrapperH = this.imageWrapperHeight();
-        const cropW = this.cropAreaWidth();
-        const cropH = this.cropAreaHeight();
-        if (!imgW || !imgH || wrapperW <= 0 || wrapperH <= 0 || cropW <= 0 || cropH <= 0) {
-            return null;
-        }
-        const scaledWrapperWidth = wrapperW * currentZoom;
-        const scaledWrapperHeight = wrapperH * currentZoom;
-        const topLeftOffsetX = currentOffsetX + (cropW - scaledWrapperWidth) / 2;
-        const topLeftOffsetY = currentOffsetY + (cropH - scaledWrapperHeight) / 2;
-        const baseScale = imgW / wrapperW;
-        if (isNaN(baseScale) || baseScale === 0) {
-            return null;
-        }
-        const sx = (-topLeftOffsetX * baseScale) / currentZoom;
-        const sy = (-topLeftOffsetY * baseScale) / currentZoom;
-        const sWidth = (cropW * baseScale) / currentZoom;
-        const sHeight = (cropH * baseScale) / currentZoom;
-        const finalX = clamp(Math.round(sx), 0, imgW);
-        const finalY = clamp(Math.round(sy), 0, imgH);
-        const finalWidth = clamp(Math.round(sWidth), 0, imgW - finalX);
-        const finalHeight = clamp(Math.round(sHeight), 0, imgH - finalY);
-        if (finalWidth <= 0 || finalHeight <= 0) {
-            return null;
-        }
-        return { x: finalX, y: finalY, width: finalWidth, height: finalHeight };
-    }
-    setupCropCalculationEffect() {
-        effect(() => {
-            const wrapperW = this.imageWrapperWidth();
-            const wrapperH = this.imageWrapperHeight();
-            const cropW = this.cropAreaWidth();
-            const cropH = this.cropAreaHeight();
-            const currentZoom = this.effectiveZoom();
-            if (wrapperW > 0 && wrapperH > 0 && cropW > 0 && cropH > 0) {
-                if (!this.isInitialSetupDone()) {
-                    const restrictedInitial = this.restrictOffset(0, 0, currentZoom);
-                    this.offsetX.set(restrictedInitial.x);
-                    this.offsetY.set(restrictedInitial.y);
-                    if (!this.isZoomControlled()) {
-                        this.internalZoom.set(currentZoom);
-                    }
-                    this.dragStartOffset.set(restrictedInitial);
-                    this.latestRestrictedOffset.set(restrictedInitial);
-                    this.latestZoom.set(currentZoom);
-                    this.onCropChange.emit(this.calculateCropData(restrictedInitial.x, restrictedInitial.y, currentZoom));
-                    this.isInitialSetupDone.set(true);
-                }
-                else {
-                    const currentX = this.latestRestrictedOffset().x;
-                    const currentY = this.latestRestrictedOffset().y;
-                    const restrictedCurrent = this.restrictOffset(currentX, currentY, currentZoom);
-                    if (restrictedCurrent.x !== currentX || restrictedCurrent.y !== currentY) {
-                        this.offsetX.set(restrictedCurrent.x);
-                        this.offsetY.set(restrictedCurrent.y);
-                        this.latestRestrictedOffset.set(restrictedCurrent);
-                        this.dragStartOffset.set(restrictedCurrent);
-                    }
-                    this.onCropChange.emit(this.calculateCropData(restrictedCurrent.x, restrictedCurrent.y, currentZoom));
-                }
-            }
-            else {
-                this.isInitialSetupDone.set(false);
-                this.offsetX.set(0);
-                this.offsetY.set(0);
-                if (!this.isZoomControlled()) {
-                    this.internalZoom.set(this.minZoom());
-                }
-                this.dragStartOffset.set({ x: 0, y: 0 });
-                this.latestRestrictedOffset.set({ x: 0, y: 0 });
-                this.latestZoom.set(currentZoom);
-                this.onCropChange.emit(null);
-            }
-        });
+    restrictOffset(dragOffsetX, dragOffsetY, currentZoom) {
+        return restrictOffset(dragOffsetX, dragOffsetY, currentZoom, this.geometry());
     }
     setupAccessibilityWarningEffect() {
+        if (!this.isBrowser)
+            return;
         effect(() => {
             const checkTimeout = setTimeout(() => {
                 if (this.elementRef.nativeElement && !this.hasWarned()) {
-                    const hasDescription = document.getElementById(this.descriptionId());
+                    const hasDescription = document.getElementById(this.descriptionId);
                     if (!hasDescription) {
                         console.warn(this.CROPPER_DESC_WARN_MESSAGE);
                         this.hasWarned.set(true);
@@ -364,22 +396,36 @@ class RdxCropperRootDirective {
             return () => clearTimeout(checkTimeout);
         });
     }
+    /**
+     * Single attachment point for every interaction listener. Re-runs on `disabled()`, so a disabled
+     * cropper has NO interaction listeners bound at all — there is no per-handler `disabled` check to
+     * forget, and a new gesture path can't accidentally bypass the gate. Uses `{ passive: false }` so
+     * the handlers can `preventDefault()` (wheel/touch scrolling, arrow-key page scroll).
+     */
     setupEventListenersEffect() {
+        if (!this.isBrowser)
+            return;
         effect((onCleanup) => {
             const node = this.elementRef.nativeElement;
-            if (!node)
+            if (!node || this.disabled())
                 return;
             const options = { passive: false };
+            const mouseDownHandler = (e) => this.onMouseDown(e);
+            const keyDownHandler = (e) => this.onKeyDown(e);
             const wheelHandler = (e) => this.handleWheel(e);
             const touchStartHandler = (e) => this.handleTouchStart(e);
             const touchMoveHandler = (e) => this.handleTouchMove(e);
             const touchEndHandler = (e) => this.handleTouchEnd(e);
+            node.addEventListener('mousedown', mouseDownHandler, options);
+            node.addEventListener('keydown', keyDownHandler, options);
             node.addEventListener('wheel', wheelHandler, options);
             node.addEventListener('touchstart', touchStartHandler, options);
             node.addEventListener('touchmove', touchMoveHandler, options);
             node.addEventListener('touchend', touchEndHandler, options);
             node.addEventListener('touchcancel', touchEndHandler, options);
             onCleanup(() => {
+                node.removeEventListener('mousedown', mouseDownHandler, options);
+                node.removeEventListener('keydown', keyDownHandler, options);
                 node.removeEventListener('wheel', wheelHandler, options);
                 node.removeEventListener('touchstart', touchStartHandler, options);
                 node.removeEventListener('touchmove', touchMoveHandler, options);
@@ -388,13 +434,6 @@ class RdxCropperRootDirective {
             });
         });
     }
-    handleInteractionEnd() {
-        const finalData = this.calculateCropData(this.latestRestrictedOffset().x, this.latestRestrictedOffset().y, this.effectiveZoom());
-        this.onCropChange.emit(finalData);
-    }
-    /**
-     * @ignore
-     */
     onMouseDown(e) {
         if (e.button !== 0)
             return;
@@ -402,52 +441,49 @@ class RdxCropperRootDirective {
         this.isDragging.set(true);
         this.isPinching.set(false);
         this.dragStartPoint.set({ x: e.clientX, y: e.clientY });
-        this.dragStartOffset.set(this.latestRestrictedOffset());
+        this.dragStartOffset.set(this.clampedOffset());
         const handleMouseMove = (ev) => {
             const deltaX = ev.clientX - this.dragStartPoint().x;
             const deltaY = ev.clientY - this.dragStartPoint().y;
-            const targetOffsetX = this.dragStartOffset().x + deltaX;
-            const targetOffsetY = this.dragStartOffset().y + deltaY;
-            const restricted = this.restrictOffset(targetOffsetX, targetOffsetY, this.effectiveZoom());
-            this.latestRestrictedOffset.set(restricted);
-            this.offsetX.set(restricted.x);
-            this.offsetY.set(restricted.y);
+            this.offset.set({ x: this.dragStartOffset().x + deltaX, y: this.dragStartOffset().y + deltaY });
         };
         const handleMouseUp = () => {
             this.isDragging.set(false);
             window.removeEventListener('mousemove', handleMouseMove);
             window.removeEventListener('mouseup', handleMouseUp);
-            this.handleInteractionEnd();
         };
         window.addEventListener('mousemove', handleMouseMove);
         window.addEventListener('mouseup', handleMouseUp);
     }
+    /**
+     * Zoom toward an anchor point (coordinates relative to the root's center). `fromZoom`/`fromOffset`
+     * are the zoom/offset the anchor is measured against — the live state for wheel/keyboard, the
+     * gesture-start baseline for pinch. Emits the zoom request via {@link updateZoom}, then re-anchors
+     * the pan offset **only when the zoom is uncontrolled**: in controlled mode the rendered zoom does
+     * not change until the parent writes `zoom` back, so writing an offset for a not-yet-applied zoom
+     * would pan the image without rescaling it (`clampedOffset` re-derives once the new zoom applies).
+     */
+    zoomToPoint(pointerX, pointerY, targetZoom, fromZoom, fromOffset) {
+        const clampedZoom = clamp(targetZoom, this.minZoom(), this.maxZoom());
+        if (clampedZoom === this.effectiveZoom())
+            return;
+        const imagePointX = (pointerX - fromOffset.x) / fromZoom;
+        const imagePointY = (pointerY - fromOffset.y) / fromZoom;
+        const finalNewZoom = this.updateZoom(clampedZoom);
+        if (this.isZoomControlled())
+            return;
+        this.offset.set({ x: pointerX - imagePointX * finalNewZoom, y: pointerY - imagePointY * finalNewZoom });
+    }
     handleWheel(e) {
         e.preventDefault();
         e.stopPropagation();
         if (!this.elementRef.nativeElement || this.imageWrapperWidth() <= 0 || this.imageWrapperHeight() <= 0)
             return;
-        const currentZoom = this.latestZoom();
-        const currentOffsetX = this.latestRestrictedOffset().x;
-        const currentOffsetY = this.latestRestrictedOffset().y;
         const delta = e.deltaY * -this.zoomSensitivity();
-        const targetZoom = currentZoom + delta;
-        if (clamp(targetZoom, this.minZoom(), this.maxZoom()) === currentZoom)
-            return;
         const rect = this.elementRef.nativeElement.getBoundingClientRect();
         const pointerX = e.clientX - rect.left - rect.width / 2;
         const pointerY = e.clientY - rect.top - rect.height / 2;
-        const imagePointX = (pointerX - currentOffsetX) / currentZoom;
-        const imagePointY = (pointerY - currentOffsetY) / currentZoom;
-        const finalNewZoom = this.updateZoom(targetZoom);
-        const newOffsetX = pointerX - imagePointX * finalNewZoom;
-        const newOffsetY = pointerY - imagePointY * finalNewZoom;
-        const restrictedNewOffset = this.restrictOffset(newOffsetX, newOffsetY, finalNewZoom);
-        this.offsetX.set(restrictedNewOffset.x);
-        this.offsetY.set(restrictedNewOffset.y);
-        this.latestRestrictedOffset.set(restrictedNewOffset);
-        const finalData = this.calculateCropData(restrictedNewOffset.x, restrictedNewOffset.y, finalNewZoom);
-        this.onCropChange.emit(finalData);
+        this.zoomToPoint(pointerX, pointerY, this.effectiveZoom() + delta, this.effectiveZoom(), this.clampedOffset());
     }
     getPinchDistance(touches) {
         return Math.sqrt(Math.pow(touches[1].clientX - touches[0].clientX, 2) + Math.pow(touches[1].clientY - touches[0].clientY, 2));
@@ -467,14 +503,14 @@ class RdxCropperRootDirective {
             this.isDragging.set(true);
             this.isPinching.set(false);
             this.dragStartPoint.set({ x: touches[0].clientX, y: touches[0].clientY });
-            this.dragStartOffset.set(this.latestRestrictedOffset());
+            this.dragStartOffset.set(this.clampedOffset());
         }
         else if (touches.length === 2) {
             this.isDragging.set(false);
             this.isPinching.set(true);
             this.initialPinchDistance.set(this.getPinchDistance(touches));
             this.initialPinchZoom.set(this.latestZoom());
-            this.dragStartOffset.set(this.latestRestrictedOffset());
+            this.dragStartOffset.set(this.clampedOffset());
         }
     }
     handleTouchMove(e) {
@@ -485,37 +521,16 @@ class RdxCropperRootDirective {
         if (touches.length === 1 && this.isDragging() && !this.isPinching()) {
             const deltaX = touches[0].clientX - this.dragStartPoint().x;
             const deltaY = touches[0].clientY - this.dragStartPoint().y;
-            const targetOffsetX = this.dragStartOffset().x + deltaX;
-            const targetOffsetY = this.dragStartOffset().y + deltaY;
-            const restricted = this.restrictOffset(targetOffsetX, targetOffsetY, this.effectiveZoom());
-            this.latestRestrictedOffset.set(restricted);
-            this.offsetX.set(restricted.x);
-            this.offsetY.set(restricted.y);
+            this.offset.set({ x: this.dragStartOffset().x + deltaX, y: this.dragStartOffset().y + deltaY });
         }
         else if (touches.length === 2 && this.isPinching()) {
-            const currentPinchDistance = this.getPinchDistance(touches);
-            const scale = currentPinchDistance / this.initialPinchDistance();
-            const currentZoom = this.initialPinchZoom();
-            const targetZoom = currentZoom * scale;
-            if (clamp(targetZoom, this.minZoom(), this.maxZoom()) === this.latestZoom())
-                return;
+            const scale = this.getPinchDistance(touches) / this.initialPinchDistance();
             const pinchCenter = this.getPinchCenter(touches);
             const rect = this.elementRef.nativeElement.getBoundingClientRect();
             const pinchCenterX = pinchCenter.x - rect.left - rect.width / 2;
             const pinchCenterY = pinchCenter.y - rect.top - rect.height / 2;
-            const currentOffsetX = this.dragStartOffset().x;
-            const currentOffsetY = this.dragStartOffset().y;
-            const imagePointX = (pinchCenterX - currentOffsetX) / currentZoom;
-            const imagePointY = (pinchCenterY - currentOffsetY) / currentZoom;
-            const finalNewZoom = this.updateZoom(targetZoom);
-            const newOffsetX = pinchCenterX - imagePointX * finalNewZoom;
-            const newOffsetY = pinchCenterY - imagePointY * finalNewZoom;
-            const restrictedNewOffset = this.restrictOffset(newOffsetX, newOffsetY, finalNewZoom);
-            this.offsetX.set(restrictedNewOffset.x);
-            this.offsetY.set(restrictedNewOffset.y);
-            this.latestRestrictedOffset.set(restrictedNewOffset);
-            const finalData = this.calculateCropData(restrictedNewOffset.x, restrictedNewOffset.y, finalNewZoom);
-            this.onCropChange.emit(finalData);
+            // Pinch is baseline-relative: anchor against the zoom/offset captured at gesture start.
+            this.zoomToPoint(pinchCenterX, pinchCenterY, this.initialPinchZoom() * scale, this.initialPinchZoom(), this.dragStartOffset());
         }
     }
     handleTouchEnd(e) {
@@ -526,26 +541,22 @@ class RdxCropperRootDirective {
             if (touches.length === 1) {
                 this.isDragging.set(true);
                 this.dragStartPoint.set({ x: touches[0].clientX, y: touches[0].clientY });
-                this.dragStartOffset.set(this.latestRestrictedOffset());
+                this.dragStartOffset.set(this.clampedOffset());
             }
             else {
                 this.isDragging.set(false);
-                this.handleInteractionEnd();
             }
         }
         else if (this.isDragging() && touches.length === 0) {
             this.isDragging.set(false);
-            this.handleInteractionEnd();
         }
     }
-    /**
-     * @ignore
-     */
     onKeyDown(e) {
         if (this.imageWrapperWidth() <= 0)
             return;
-        let targetOffsetX = this.latestRestrictedOffset().x;
-        let targetOffsetY = this.latestRestrictedOffset().y;
+        const base = this.clampedOffset();
+        let targetOffsetX = base.x;
+        let targetOffsetY = base.y;
         // eslint-disable-next-line no-useless-assignment
         let moved = false;
         switch (e.key) {
@@ -565,89 +576,57 @@ class RdxCropperRootDirective {
                 targetOffsetX -= this.keyboardStep();
                 moved = true;
                 break;
+            case '+':
+            case '=':
+            case 'PageUp':
+                e.preventDefault();
+                this.zoomFromCenter(this.zoomKeyboardStep());
+                return;
+            case '-':
+            case '_':
+            case 'PageDown':
+                e.preventDefault();
+                this.zoomFromCenter(-this.zoomKeyboardStep());
+                return;
             default:
                 return;
         }
         if (moved) {
             e.preventDefault();
-            const restricted = this.restrictOffset(targetOffsetX, targetOffsetY, this.effectiveZoom());
-            if (restricted.x !== this.latestRestrictedOffset().x || restricted.y !== this.latestRestrictedOffset().y) {
-                this.latestRestrictedOffset.set(restricted);
-                this.offsetX.set(restricted.x);
-                this.offsetY.set(restricted.y);
-            }
+            // Write the raw target; `clampedOffset` clamps it (and dedups a no-op at the boundary).
+            this.offset.set({ x: targetOffsetX, y: targetOffsetY });
         }
     }
-    /**
-     * @ignore
-     */
-    onKeyUp(e) {
-        if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
-            this.handleInteractionEnd();
-        }
-    }
-    /**
-     * @ignore
-     */
-    getImageProps() {
-        return {
-            src: this.image(),
-            alt: 'Image being cropped',
-            draggable: false,
-            'aria-hidden': true
-        };
-    }
-    /**
-     * @ignore
-     */
-    getImageWrapperStyle() {
-        const wrapperW = this.imageWrapperWidth();
-        const wrapperH = this.imageWrapperHeight();
-        const offsetX = this.offsetX();
-        const offsetY = this.offsetY();
-        const zoom = this.effectiveZoom();
-        return {
-            width: `${wrapperW}px`,
-            height: `${wrapperH}px`,
-            transform: `translate3d(${offsetX}px, ${offsetY}px, 0px) scale(${zoom})`,
-            position: 'absolute',
-            left: `calc(50% - ${wrapperW / 2}px)`,
-            top: `calc(50% - ${wrapperH / 2}px)`,
-            willChange: 'transform'
-        };
-    }
-    /**
-     * @ignore
-     */
-    getCropAreaStyle() {
-        return {
-            width: `${this.cropAreaWidth()}px`,
-            height: `${this.cropAreaHeight()}px`
-        };
+    /** Zoom by `delta` keeping the crop center fixed (the keyboard counterpart of wheel/pinch zoom). */
+    zoomFromCenter(delta) {
+        if (this.imageWrapperWidth() <= 0 || this.imageWrapperHeight() <= 0)
+            return;
+        // Anchor at the crop center (pointer 0,0 relative to center) against the live zoom/offset.
+        this.zoomToPoint(0, 0, this.effectiveZoom() + delta, this.effectiveZoom(), this.clampedOffset());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCropperRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxCropperRootDirective, isStandalone: true, selector: "[rdxCropperRoot]", inputs: { image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: true, transformFunction: null }, cropPadding: { classPropertyName: "cropPadding", publicName: "cropPadding", isSignal: true, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: true, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: true, isRequired: false, transformFunction: null }, zoomSensitivity: { classPropertyName: "zoomSensitivity", publicName: "zoomSensitivity", isSignal: true, isRequired: false, transformFunction: null }, keyboardStep: { classPropertyName: "keyboardStep", publicName: "keyboardStep", isSignal: true, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCropChange: "onCropChange", onZoomChange: "onZoomChange" }, host: { attributes: { "tabindex": "0", "role": "application" }, listeners: { "mousedown": "onMouseDown($event)", "keydown": "onKeyDown($event)", "keyup": "onKeyUp($event)" }, properties: { "attr.aria-label": "\"Interactive image cropper\"", "attr.aria-describedby": "descriptionId()", "attr.aria-valuemin": "minZoom()", "attr.aria-valuemax": "maxZoom()", "attr.aria-valuenow": "effectiveZoom()", "attr.aria-valuetext": "zoomValueText()" } }, providers: [provideToken(CROPPER_ROOT_CONTEXT, RdxCropperRootDirective)], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxCropperRootDirective, isStandalone: true, selector: "[rdxCropperRoot]", inputs: { image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: true, transformFunction: null }, cropPadding: { classPropertyName: "cropPadding", publicName: "cropPadding", isSignal: true, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: true, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: true, isRequired: false, transformFunction: null }, zoomSensitivity: { classPropertyName: "zoomSensitivity", publicName: "zoomSensitivity", isSignal: true, isRequired: false, transformFunction: null }, keyboardStep: { classPropertyName: "keyboardStep", publicName: "keyboardStep", isSignal: true, isRequired: false, transformFunction: null }, zoomKeyboardStep: { classPropertyName: "zoomKeyboardStep", publicName: "zoomKeyboardStep", isSignal: true, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCropChange: "onCropChange", onZoomChange: "onZoomChange" }, host: { attributes: { "role": "application" }, properties: { "attr.tabindex": "disabled() ? -1 : 0", "attr.aria-label": "ariaLabel()", "attr.aria-describedby": "descriptionId", "attr.aria-disabled": "disabled() ? \"true\" : undefined", "attr.data-disabled": "disabled() ? \"\" : undefined", "attr.data-dragging": "isDragging() ? \"\" : undefined" } }, providers: [provideCropperRootContext(rootContext)], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCropperRootDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxCropperRoot]',
-                    providers: [provideToken(CROPPER_ROOT_CONTEXT, RdxCropperRootDirective)],
+                    providers: [provideCropperRootContext(rootContext)],
                     host: {
-                        '[attr.aria-label]': '"Interactive image cropper"',
-                        '[attr.aria-describedby]': 'descriptionId()',
-                        '[attr.aria-valuemin]': 'minZoom()',
-                        '[attr.aria-valuemax]': 'maxZoom()',
-                        '[attr.aria-valuenow]': 'effectiveZoom()',
-                        '[attr.aria-valuetext]': 'zoomValueText()',
-                        tabindex: '0',
+                        // `application` so a screen reader passes arrow/+/- keys straight to our handlers (pan + zoom)
+                        // instead of intercepting them for browse-mode navigation; instructions come via the
+                        // description element referenced by `aria-describedby`. The slider-style `aria-value*`
+                        // attributes were removed — they are only honored on range roles, so they were dead here.
                         role: 'application',
-                        '(mousedown)': 'onMouseDown($event)',
-                        '(keydown)': 'onKeyDown($event)',
-                        '(keyup)': 'onKeyUp($event)'
+                        '[attr.tabindex]': 'disabled() ? -1 : 0',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[attr.aria-describedby]': 'descriptionId',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : undefined',
+                        '[attr.data-disabled]': 'disabled() ? "" : undefined',
+                        '[attr.data-dragging]': 'isDragging() ? "" : undefined'
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: true }] }], cropPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "cropPadding", required: false }] }], aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }], minZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "minZoom", required: false }] }], maxZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxZoom", required: false }] }], zoomSensitivity: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomSensitivity", required: false }] }], keyboardStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardStep", required: false }] }], zoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoom", required: false }] }], onCropChange: [{ type: i0.Output, args: ["onCropChange"] }], onZoomChange: [{ type: i0.Output, args: ["onZoomChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: true }] }], cropPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "cropPadding", required: false }] }], aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }], minZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "minZoom", required: false }] }], maxZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxZoom", required: false }] }], zoomSensitivity: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomSensitivity", required: false }] }], keyboardStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardStep", required: false }] }], zoomKeyboardStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomKeyboardStep", required: false }] }], zoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoom", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], onCropChange: [{ type: i0.Output, args: ["onCropChange"] }], onZoomChange: [{ type: i0.Output, args: ["onZoomChange"] }] } });
 
 const _imports = [
     RdxCropperRootDirective,
@@ -678,5 +657,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CROPPER_ROOT_CONTEXT, RdxCropperCropAreaDirective, RdxCropperDescriptionDirective, RdxCropperImageComponent, RdxCropperModule, RdxCropperRootDirective, injectCropperRootContext };
+export { RdxCropperCropAreaDirective, RdxCropperDescriptionDirective, RdxCropperImageComponent, RdxCropperModule, RdxCropperRootDirective, injectCropperRootContext, provideCropperRootContext };
 //# sourceMappingURL=radix-ng-primitives-cropper.mjs.map