@scaleflex/crop 2.0.1

package/dist/elements/base.d.ts

@@ -0,0 +1,17 @@
+import { LitElement } from 'lit';
+/**
+ * Shared base class for all @scaleflex/crop Lit elements.
+ *
+ * Provides:
+ * - Safe guard for double custom-element registration (StrictMode-safe).
+ * - A hook point for future cross-cutting concerns (telemetry, theme, etc.).
+ *
+ * Scaleflex convention — every public element extends this.
+ */
+export declare class SfxCropBaseElement extends LitElement {
+}
+/**
+ * Idempotent custom-element registration — safe under React StrictMode
+ * double-mount and repeated `import '.../define.js'` calls.
+ */
+export declare function safeDefine(tagName: string, ctor: CustomElementConstructor): void;

package/dist/elements/icons.d.ts

@@ -0,0 +1,21 @@
+import { CropIconOverrides } from '../core/types';
+export declare const ICON_ROTATE_LEFT = "<svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 9V7a2 2 0 0 0-2-2h-6\"/><path d=\"m15 8-3-3 3-3\"/><path d=\"M4 14a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h13a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2Z\"/></svg>";
+export declare const ICON_FLIP_H = "<svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3\"/><path d=\"M16 3h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-3\"/><path d=\"M12 20v2\"/><path d=\"M12 15v2\"/><path d=\"M12 10v2\"/><path d=\"M12 5v2\"/></svg>";
+export declare const ICON_CROP_CUSTOM = "<svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 2v14a2 2 0 0 0 2 2h14\"/><path d=\"M18 22V8a2 2 0 0 0-2-2H2\"/></svg>";
+export declare const ICON_ORIENT_LANDSCAPE = "<svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"20\" height=\"14\" x=\"2\" y=\"3\" rx=\"2\"/><line x1=\"8\" x2=\"16\" y1=\"21\" y2=\"21\"/><line x1=\"12\" x2=\"12\" y1=\"17\" y2=\"21\"/></svg>";
+export declare const ICON_ORIENT_PORTRAIT = "<svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"14\" height=\"20\" x=\"5\" y=\"2\" rx=\"2\" ry=\"2\"/><path d=\"M12 18h.01\"/></svg>";
+export declare const ICON_CROP_CIRCLE = "<svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"/></svg>";
+export declare const ICON_CROP_ROUNDED_RECT = "<svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"5\"/></svg>";
+export declare const ICON_CROP_ASPECT = "<svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"12\" height=\"20\" x=\"6\" y=\"2\" rx=\"2\"/><rect width=\"20\" height=\"12\" x=\"2\" y=\"6\" rx=\"2\"/></svg>";
+export declare const ICON_CHEVRON_DOWN = "<svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg>";
+export declare const ICON_TILT = "<svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 22h20\"/><rect x=\"3\" y=\"6\" width=\"18\" height=\"14\" rx=\"2\" transform=\"rotate(-10 12 13)\"/></svg>";
+export declare const ICON_ZOOM_IN = "<svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" x2=\"16.65\" y1=\"21\" y2=\"16.65\"/><line x1=\"11\" x2=\"11\" y1=\"8\" y2=\"14\"/><line x1=\"8\" x2=\"14\" y1=\"11\" y2=\"11\"/></svg>";
+export declare const ICON_ZOOM_OUT = "<svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" x2=\"16.65\" y1=\"21\" y2=\"16.65\"/><line x1=\"8\" x2=\"14\" y1=\"11\" y2=\"11\"/></svg>";
+export declare const ICON_LOUPE = "<svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" x2=\"16.65\" y1=\"21\" y2=\"16.65\"/><line x1=\"11\" x2=\"11\" y1=\"8\" y2=\"14\"/><line x1=\"8\" x2=\"14\" y1=\"11\" y2=\"11\"/></svg>";
+export declare const ICON_RESET = "<svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 12a9 9 0 1 0 3-6.7L3 8\"/><path d=\"M3 3v5h5\"/></svg>";
+/**
+ * Resolve an icon slot. Returns the consumer's override when present, else
+ * the library's default SVG. `overrides` is typically the `icons` property
+ * prop passed down from `<sfx-crop>` to each toolbar / popover sub-element.
+ */
+export declare function resolveIcon(key: keyof CropIconOverrides, overrides?: CropIconOverrides): string;

package/dist/elements/parse-shapes.d.ts

@@ -0,0 +1,13 @@
+import { CropShapeName } from '../core/types';
+declare const DEFAULT_SHAPES: CropShapeName[];
+/**
+ * Normalize the `availableShapes` / `available-shapes` input across the three
+ * shapes an attribute/property can take: a live `CropShapeName[]` assigned via
+ * property binding, a JSON array (`'["free","circle"]'`), or a CSV/whitespace
+ * string (`'free, circle'`).
+ *
+ * Returns `undefined` when the caller didn't specify anything and wants the
+ * default list — element/toolbar consumers fall back to {@link DEFAULT_SHAPES}.
+ */
+export declare function parseAvailableShapes(v: CropShapeName[] | string | null | undefined): CropShapeName[] | undefined;
+export { DEFAULT_SHAPES };

package/dist/elements/popover-anchor.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Position a slider popover (`.sfx-cr-*-popover`) at the bottom of the
+ * `<sfx-crop>` canvas rect, regardless of where its trigger sits in the
+ * toolbar. The popover uses `position: fixed` with CSS variables
+ * `--sfx-cr-popover-left` / `--sfx-cr-popover-top` that this helper writes
+ * on the popover element.
+ *
+ * The `<sfx-crop>` host's bounding rect matches the rendered canvas area
+ * (see `SfxCropElement.fitHostToImage`), so anchoring to its bottom edge
+ * places the ruler over the lower strip of the photo.
+ */
+export interface PopoverAnchor {
+    /** Keep the popover in sync with the canvas rect while it's open. */
+    start(): void;
+    /** Stop observing + detach listeners. Idempotent. */
+    stop(): void;
+    /** Recompute the popover's top/left from the current canvas rect. */
+    update(): void;
+}
+export declare function createPopoverAnchor(element: HTMLElement, popoverSelector: string): PopoverAnchor;

package/dist/elements/sfx-crop-canvas.d.ts

@@ -0,0 +1,24 @@
+import { SfxCropBaseElement } from './base';
+/**
+ * `<sfx-crop-canvas>` — minimal host for the editor's `<canvas>`.
+ *
+ * Owns its own shadow root so the canvas styling + `touch-action: none` live
+ * encapsulated alongside the `<canvas>` node. The parent `<sfx-crop>`'s host-
+ * level `--sfx-cr-*` tokens cascade in via CSS custom-property inheritance.
+ *
+ * The `<canvas>` is rendered once and never re-created, so `setPointerCapture`,
+ * non-passive `wheel` listeners, and the ResizeObserver bound by the
+ * controller stay stable across Lit updates.
+ *
+ * Theme a consumer via `::part(canvas)` from the parent host.
+ */
+export declare class SfxCropCanvasElement extends SfxCropBaseElement {
+    static styles: import('lit').CSSResult[];
+    canvasEl: HTMLCanvasElement;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sfx-crop-canvas': SfxCropCanvasElement;
+    }
+}

package/dist/elements/sfx-crop-canvas.styles.d.ts

@@ -0,0 +1 @@
+export declare const sfxCropCanvasStyles: import('lit').CSSResult;

package/dist/elements/sfx-crop-rotate.d.ts

@@ -0,0 +1,42 @@
+import { PropertyValues } from 'lit';
+import { SfxCropBaseElement } from './base';
+import { CropIconOverrides } from '../core/types';
+/**
+ * `<sfx-crop-rotate>` — always-visible fine-rotation ruler.
+ *
+ * Ticks scroll under a fixed center marker; the current degrees label sits
+ * below. Drag the ruler left/right to tilt; double-click to reset.
+ *
+ * Event:
+ *   `sfx-crop-rotate-change` — `{ detail: { degrees: number } }`,
+ *   bubbles + composed.
+ */
+export declare class SfxCropRotateElement extends SfxCropBaseElement {
+    static styles: import('lit').CSSResult[];
+    value: number;
+    min: number;
+    max: number;
+    icons: CropIconOverrides;
+    private dragging;
+    private activePointer;
+    private pointerStartX;
+    private pointerStartValue;
+    private popoverAnchor;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: PropertyValues): void;
+    render(): unknown;
+    /** Sync value without emitting — used by host to reflect controller state. */
+    setValue(degrees: number): void;
+    private onKeyDown;
+    private onPointerDown;
+    private onPointerMove;
+    private onPointerUp;
+    private emit;
+    private onReset;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sfx-crop-rotate': SfxCropRotateElement;
+    }
+}

package/dist/elements/sfx-crop-rotate.styles.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Fine-rotation ruler — always visible inline in the toolbar. Dotted tick
+ * marks scroll under a centered indicator with the degree readout below.
+ */
+export declare const sfxCropRotateStyles: import('lit').CSSResult;

package/dist/elements/sfx-crop-shapes.d.ts

@@ -0,0 +1,67 @@
+import { PropertyValues } from 'lit';
+import { SfxCropBaseElement } from './base';
+import { CropShapeName, CropIconOverrides } from '../core/types';
+/**
+ * `<sfx-crop-shapes>` — trigger + dropdown with aspect-ratio / shape presets.
+ * Split into an orientation toggle (landscape / portrait) at the top, then a
+ * list of shapes that pass both the `shapes` allow-list and the selected
+ * orientation filter. Non-ratio shapes (Custom, Circle, Rounded, 1:1) sit in
+ * both orientation tabs so they're never hidden by a toggle click.
+ *
+ * Keyboard: Enter/Space toggles the dropdown; Arrow keys navigate options;
+ * Enter/Space commits; Escape closes.
+ *
+ * Event:
+ *   `sfx-crop-shape-change` — `{ detail: { shape: CropShapeName } }`,
+ *   bubbles + composed.
+ */
+export declare class SfxCropShapesElement extends SfxCropBaseElement {
+    static styles: import('lit').CSSResult[];
+    value: CropShapeName;
+    /** Supported shape names. Default covers the canonical ratio pairs +
+     *  Free + Square. `Circle` / `rounded-rect` are built-in geometry
+     *  shapes but must be opted into explicitly. Any `"W:H"` string is
+     *  accepted — the dropdown generates a proportional icon for it. */
+    shapes: CropShapeName[];
+    open: boolean;
+    /** Reflected so the trigger can pick up a translucent pill in the fixed variant. */
+    variant: 'classic' | 'fixed';
+    icons: CropIconOverrides;
+    private orientation;
+    private focusedIndex;
+    private focusRafId;
+    private docClickHandler;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: PropertyValues): void;
+    render(): unknown;
+    /**
+     * Pick the icon for a dropdown option, consulting consumer overrides
+     * for the three non-ratio geometry shapes. Aspect-ratio options stay
+     * on their proportional rectangle — not overridable, and that's
+     * intentional since each one is generated from the ratio itself.
+     */
+    private optionIcon;
+    /** Sync value without emitting — used by host. */
+    setValue(shape: CropShapeName): void;
+    private setOrientation;
+    /**
+     * Options visible under the current orientation tab, respecting the
+     * `shapes` allow-list. Each allowed name is resolved via `resolveShape`
+     * so consumer-supplied `"W:H"` strings (not in SHAPE_MAP) get a dynamic
+     * option with a proportional icon. Sorted: named shapes first in a
+     * fixed order, then ratios by numeric value.
+     */
+    private getVisibleOptions;
+    private emit;
+    private close;
+    private onTriggerClick;
+    private onOptionClick;
+    private onKeyDown;
+    private focusOption;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sfx-crop-shapes': SfxCropShapesElement;
+    }
+}

package/dist/elements/sfx-crop-shapes.styles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Capsule shape-selector. Trigger + dropdown follow uploader's source-pill
+ * language: glassy trigger, primary tint on hover, 12px dropdown radius
+ * with a soft shadow, primary-blue accent on the active option.
+ */
+export declare const sfxCropShapesStyles: import('lit').CSSResult;

package/dist/elements/sfx-crop-toolbar.d.ts

@@ -0,0 +1,64 @@
+import { SfxCropBaseElement } from './base';
+import { CropShapeName, CropIconOverrides } from '../core/types';
+/**
+ * Unified descriptor dispatched on `sfx-crop-toolbar-command` so the host
+ * `<sfx-crop>` routes interactions through a single handler.
+ */
+export type SfxCropToolbarCommand = {
+    type: 'reset';
+} | {
+    type: 'rotate-left';
+} | {
+    type: 'flip-h';
+} | {
+    type: 'rotation';
+    value: number;
+} | {
+    type: 'scale';
+    value: number;
+} | {
+    type: 'shape';
+    value: CropShapeName;
+} | {
+    type: 'save';
+};
+/**
+ * `<sfx-crop-toolbar>` — composes rotate/flip buttons + the always-visible
+ * `<sfx-crop-rotate>` fine-rotation ruler + `<sfx-crop-shapes>` into the
+ * editor's action bar. Zoom is wheel-only and has no toolbar control.
+ */
+export declare class SfxCropToolbarElement extends SfxCropBaseElement {
+    static styles: import('lit').CSSResult[];
+    shape: CropShapeName;
+    rotation: number;
+    showRotateButton: boolean;
+    showFlipButton: boolean;
+    showRotateSlider: boolean;
+    showShapeSelector: boolean;
+    toolbarPosition: 'top' | 'bottom';
+    /** Reflected so the stylesheet can center the bar over the fixed frame. */
+    variant: 'classic' | 'fixed';
+    /** JSON-serialized or CSV string on the attribute; `CropShapeName[]` via property. */
+    availableShapes: CropShapeName[] | string | null;
+    /** Consumer icon overrides propagated from `<sfx-crop>`. */
+    icons: CropIconOverrides;
+    private rotateEl?;
+    private shapesEl?;
+    render(): unknown;
+    /**
+     * Mutual exclusion for collapsible popovers. The rotate ruler is now
+     * inline (always visible), so only the shapes popover participates —
+     * keeping the handler future-proof if more popovers are added.
+     */
+    private onPopoverOpen;
+    /** Sync the rotation slider without firing an event. */
+    setRotationValue(degrees: number): void;
+    /** Sync the shape selector without firing an event. */
+    setShapeValue(shape: CropShapeName): void;
+    private emit;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sfx-crop-toolbar': SfxCropToolbarElement;
+    }
+}

package/dist/elements/sfx-crop-toolbar.styles.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Floating pill toolbar — mirrors the glassy source-pill row in
+ * `@scaleflex/uploader`. The bar is centered horizontally above or below
+ * the canvas with a translucent white background, backdrop blur, and a
+ * soft shadow ring.
+ */
+export declare const sfxCropToolbarStyles: import('lit').CSSResult;

package/dist/elements/sfx-crop-zoom.d.ts

@@ -0,0 +1,66 @@
+import { PropertyValues } from 'lit';
+import { SfxCropBaseElement } from './base';
+import { CropIconOverrides } from '../core/types';
+/**
+ * `<sfx-crop-zoom>` — loupe trigger + ruler scrubber popover.
+ *
+ * The trigger matches the toolbar's other icon buttons. Click opens a
+ * transparent ruler of dotted ticks under a fixed center indicator; drag
+ * left/right to scrub zoom. Ruler operates in logarithmic slider-space
+ * (so 1× is exactly at one end of the range proportional to `min/max`),
+ * and the center label shows the current percentage of the scale.
+ *
+ * Event:
+ *   `sfx-crop-zoom-change` — `{ detail: { scale: number } }`, bubbles + composed.
+ */
+export declare class SfxCropZoomElement extends SfxCropBaseElement {
+    static styles: import('lit').CSSResult[];
+    min: number;
+    max: number;
+    value: number;
+    open: boolean;
+    icons: CropIconOverrides;
+    private dragging;
+    private activePointer;
+    private pointerStartX;
+    private pointerStartSlider;
+    /**
+     * Timer id for {@link showTemporarily}'s auto-close. Non-null only while
+     * the popover was opened by wheel-zoom activity and is awaiting an idle
+     * window before collapsing again. Any manual interaction (trigger click,
+     * ruler drag) clears it so the popover stays open under the user's hand.
+     */
+    private autoCloseTimer;
+    private docClickHandler;
+    private popoverAnchor;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: PropertyValues): void;
+    render(): unknown;
+    /** Sync value without emitting — used by host to reflect controller state. */
+    setValue(scale: number): void;
+    /**
+     * Open the popover and auto-close after `duration` ms of inactivity.
+     * Subsequent calls debounce the close (so a stream of wheel events keeps
+     * the slider visible). Manual interaction (trigger click, ruler drag)
+     * cancels the pending close.
+     *
+     * If the popover is already open via manual click (no timer armed) this
+     * is a no-op: a wheel burst must never hijack a user-opened popover into
+     * auto-closing.
+     */
+    showTemporarily(duration?: number): void;
+    private clearAutoClose;
+    private onTriggerClick;
+    private onKeyDown;
+    private onPointerDown;
+    private onPointerMove;
+    private onPointerUp;
+    private emit;
+    private onReset;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sfx-crop-zoom': SfxCropZoomElement;
+    }
+}

package/dist/elements/sfx-crop-zoom.styles.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Zoom popover: ruler-style scrubber with dotted tick marks and a
+ * centered indicator + percentage readout. No pill around the ruler —
+ * ticks float transparently over the photo; only the percent value gets
+ * a small glassy plate for readability.
+ */
+export declare const sfxCropZoomStyles: import('lit').CSSResult;

package/dist/elements/sfx-crop.d.ts

@@ -0,0 +1,134 @@
+import { PropertyValues } from 'lit';
+import { CropShapeName, CropRect, TransformState, TransformParams, CropIconOverrides } from '../core/types';
+import { SfxCropBaseElement } from './base';
+/**
+ * `<sfx-crop>` — Scaleflex interactive image-crop editor web component.
+ *
+ * Renders `<sfx-crop-canvas>` plus an optional `<sfx-crop-toolbar>` and a zoom
+ * slider inside an open shadow root. A {@link createCropController} instance
+ * drives the canvas / pointer / keyboard pipeline against the pre-created
+ * `<canvas>` ref — the canvas node is never re-created, so pointer capture and
+ * non-passive `wheel` listeners stay stable across Lit updates.
+ *
+ * Events (all `bubbles: true, composed: true`):
+ *   - `sfx-crop-ready`        `{ element }`
+ *   - `sfx-crop-image-load`   `{ image }`
+ *   - `sfx-crop-change`       `TransformState`
+ *   - `sfx-crop-crop-change`  `CropRect` (image-pixel coords)
+ *   - `sfx-crop-save`         `{ blob, dataURL, params }` (from imperative `.save()`)
+ *   - `sfx-crop-cancel`       (from imperative `.cancel()`)
+ *   - `sfx-crop-error`        `{ error }`
+ *
+ * Theme via `--sfx-cr-*` custom properties set on the host, or via
+ * `::part(container|canvas-host|toolbar|loading|error)` from light DOM.
+ */
+export declare class SfxCropElement extends SfxCropBaseElement {
+    static styles: import('lit').CSSResult[];
+    src: string;
+    cropShape: CropShapeName;
+    theme: 'light' | 'dark';
+    initialRotation: number;
+    initialScale: number;
+    minScale: number;
+    maxScale: number;
+    minCropSize: number;
+    handleSize: number;
+    borderRadius: number;
+    outputQuality: number;
+    maxOutputWidth: number;
+    maxOutputHeight: number;
+    bleedMarginSize: number;
+    animationSpeed: number;
+    handleColor: string;
+    overlayColor: string;
+    bleedMarginColor: string;
+    outputType: string;
+    toolbarPosition: 'bottom' | 'top';
+    /**
+     * Display variant. `'classic'` (default) = movable/resizable frame over a
+     * photo-aspect canvas. `'fixed'` = the editor box IS the crop frame (sized to
+     * `cropShape`), with the photo cover-fit and panned underneath; toolbar
+     * overlays the frame.
+     */
+    variant: 'classic' | 'fixed';
+    /** `true | false | 'interaction'` (default). Attribute accepts all three as strings. */
+    showGrid: boolean | 'interaction';
+    showToolbar: boolean;
+    showRotateSlider: boolean;
+    showZoomSlider: boolean;
+    showShapeSelector: boolean;
+    showRotateButton: boolean;
+    showFlipButton: boolean;
+    showBleedMargin: boolean;
+    enableAnimations: boolean;
+    keyboard: boolean;
+    pinchZoom: boolean;
+    wheelZoom: boolean;
+    availableShapes: CropShapeName[] | string;
+    initialCrop: CropRect | string | null;
+    /**
+     * Per-slot icon overrides. Values are raw SVG strings injected via
+     * `unsafeHTML` — same trust model as the library's built-in icons
+     * (static, author-trusted). Omit any slot to keep the default.
+     * Not an HTML attribute; set via DOM property only.
+     */
+    icons: CropIconOverrides;
+    private loading;
+    private errorMessage;
+    private canvasHost;
+    private toolbarHost?;
+    private containerEl;
+    private controller;
+    private currentImage;
+    private parentResizeObserver;
+    firstUpdated(): Promise<void>;
+    /** @see LIVE_CONFIG_KEYS for the exact set forwarded to `controller.update()`. */
+    updated(changed: PropertyValues): void;
+    disconnectedCallback(): void;
+    render(): unknown;
+    private onToolbarCommand;
+    loadImage(src: string): Promise<void>;
+    getTransformState(): TransformState;
+    setCropShape(shape: CropShapeName): void;
+    setCropRect(rect: CropRect): void;
+    getCropRect(): CropRect;
+    rotateLeft(): void;
+    flipHorizontal(): void;
+    setRotation(deg: number): void;
+    setScale(scale: number): void;
+    reset(): void;
+    toCanvas(): HTMLCanvasElement;
+    toBlob(type?: string, quality?: number): Promise<Blob>;
+    toDataURL(type?: string, quality?: number): string;
+    toTransformParams(): TransformParams;
+    save(type?: string, quality?: number): Promise<void>;
+    cancel(): void;
+    private ensure;
+    /**
+     * Size both the canvas host (to the image's display rect, no letterbox)
+     * and the outer `<sfx-crop>` host (photo rect + measured toolbar stack).
+     *
+     * Bound order for `max-width` / `max-height`:
+     *   1. Consumer-provided values on the host's own CSS / inline style.
+     *   2. Parent's client rect as a fallback.
+     *   3. Viewport size as a last resort.
+     *
+     * Called on image-load, on state changes (90° rotation swaps aspect),
+     * and whenever the parent resizes.
+     */
+    private fitHostToImage;
+    /**
+     * Aspect ratio (W/H) of the fixed-variant editor box for the current shape.
+     * `free` fills the host (uses the available-area aspect); `square` / `circle`
+     * / `rounded-rect` are square; ratio shapes use their parsed ratio.
+     */
+    private fixedFrameAspect;
+    private dispatch;
+    private parseInitialCrop;
+    private buildConfig;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sfx-crop': SfxCropElement;
+    }
+}

package/dist/elements/sfx-crop.styles.d.ts

@@ -0,0 +1,9 @@
+/**
+ * `<sfx-crop>` host + container + loading/error overlay.
+ *
+ * Visual language tracks `@scaleflex/uploader`: Inter typography, 16px outer
+ * radius, deep soft shadow, primary-blue accents for spinners and focus.
+ * Works embedded on any page surface (light or dark); `--sfx-cr-*` tokens
+ * swap automatically when the host carries `theme="dark"`.
+ */
+export declare const sfxCropStyles: import('lit').CSSResult;

package/dist/export/exporter.d.ts

@@ -0,0 +1,19 @@
+import { TransformState, TransformParams } from '../core/types';
+/** Calculate transform params in original image pixel coordinates. */
+export declare function getTransformParams(state: TransformState, imageWidth: number, imageHeight: number): TransformParams;
+/** Render the cropped/transformed image to a new canvas. */
+export declare function renderToCanvas(image: HTMLImageElement, state: TransformState, maxWidth: number, maxHeight: number, cropShape?: string, borderRadius?: number, 
+/**
+ * Width (CSS px) of the editor's layout container at the moment of export.
+ * The renderer stores `state.panX/panY` in container CSS pixels; we draw
+ * at iw×ih image pixels, so pan must be rescaled by iw/containerWidth or
+ * the exported framing drifts under any non-zero pan (e.g. after zoom).
+ * Falls back to iw (no rescaling) when callers don't have the dim.
+ */
+containerWidth?: number, 
+/** Editor box height (CSS px) — required for the fixed variant's cover math. */
+containerHeight?: number, 
+/** Display variant — `'fixed'` switches to frame-box + cover export. */
+variant?: 'classic' | 'fixed'): HTMLCanvasElement;
+/** Export canvas as Blob. */
+export declare function canvasToBlob(canvas: HTMLCanvasElement, type: string, quality: number): Promise<Blob>;

package/dist/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./chunks/sfx-crop-1LGASewd.cjs");function g(){return[1,0,0,1,0,0]}function a(t,n){return[t[0]*n[0]+t[2]*n[1],t[1]*n[0]+t[3]*n[1],t[0]*n[2]+t[2]*n[3],t[1]*n[2]+t[3]*n[3],t[0]*n[4]+t[2]*n[5]+t[4],t[1]*n[4]+t[3]*n[5]+t[5]]}function x(t,n){return[1,0,0,1,t,n]}function m(t,n){return[t,0,0,n,0,0]}function C(t){const n=s.degreesToRadians(t),e=Math.cos(n),i=Math.sin(n);return[e,i,-i,e,0,0]}function y(t,n,e,i,c,o,u,f){let r=g();r=a(r,x(t,n)),o!==1&&(r=a(r,m(o,o))),(u!==0||f!==0)&&(r=a(r,x(u,f)));const l=e+i;return l!==0&&(r=a(r,C(l))),c<0&&(r=a(r,m(-1,1))),r}function M(t,n,e){const i=n.width/2,c=n.height/2,o=y(i,c,t.quarterTurns,t.rotation,t.flipH?-1:1,t.scale,t.panX,t.panY);return new DOMMatrix([o[0],o[1],o[2],o[3],o[4],o[5]])}function T(t,n){const e=n.transformPoint({x:t.x,y:t.y});return{x:e.x,y:e.y}}function R(t,n){const i=n.inverse().transformPoint({x:t.x,y:t.y});return{x:i.x,y:i.y}}exports.DEFAULT_CONFIG=s.DEFAULT_CONFIG;exports.SfxCropElement=s.SfxCropElement;exports.TOOLBAR_RESERVE_PX=s.TOOLBAR_RESERVE_PX;exports.createCropController=s.createCropController;exports.getAspectRatio=s.getAspectRatio;exports.mergeConfig=s.mergeConfig;exports.parseRatio=s.parseRatio;exports.buildTransformMatrix=M;exports.canvasToImage=R;exports.imageToCanvas=T;
+//# sourceMappingURL=index.cjs.map

package/dist/index.d.ts

@@ -0,0 +1,22 @@
+/**
+ * `@scaleflex/crop` — public, side-effect-free entry.
+ *
+ * Three tiers of adoption live here:
+ *   1. Ready component — `<sfx-crop>` via `@scaleflex/crop/define`.
+ *   2. (reserved for future sub-element assembly.)
+ *   3. Headless controller — `createCropController({ canvas, host, config })`
+ *      drives pointer, keyboard, render, and export against a consumer-owned
+ *      `<canvas>` with zero built-in UI. The custom element below is thin
+ *      sugar on top of this same factory.
+ *
+ * No side effects — importing this module does not register any custom
+ * element. Import `@scaleflex/crop/define` for that. React consumers can
+ * import from `@scaleflex/crop/react` for a `<SfxCrop>` component + hooks.
+ */
+export { SfxCropElement } from './elements/sfx-crop';
+export { createCropController } from './core/crop-controller';
+export type { CropController, CropControllerOptions, CropControllerCallbacks, } from './core/crop-controller';
+export { mergeConfig, DEFAULT_CONFIG, TOOLBAR_RESERVE_PX } from './core/config';
+export type { SfxCropConfig, TransformState, TransformParams, CropShapeName, CropShapeBuiltin, CropShape, CropShapeConfig, CropRect, NormalizedRect, DisplayState, HitTarget, HandlePosition, Point, Size, SpringConfig, LerpConfig, CropIconOverrides, } from './core/types';
+export { parseRatio, getAspectRatio } from './transforms/constrain';
+export { imageToCanvas, canvasToImage, buildTransformMatrix } from './transforms/matrix';

package/dist/index.js

@@ -0,0 +1,65 @@
+import { d as l } from "./chunks/sfx-crop-CEe6OfTZ.js";
+import { D as h, S as E, T as D, c as O, g as _, m as A, p as P } from "./chunks/sfx-crop-CEe6OfTZ.js";
+function y() {
+  return [1, 0, 0, 1, 0, 0];
+}
+function s(t, n) {
+  return [
+    t[0] * n[0] + t[2] * n[1],
+    t[1] * n[0] + t[3] * n[1],
+    t[0] * n[2] + t[2] * n[3],
+    t[1] * n[2] + t[3] * n[3],
+    t[0] * n[4] + t[2] * n[5] + t[4],
+    t[1] * n[4] + t[3] * n[5] + t[5]
+  ];
+}
+function x(t, n) {
+  return [1, 0, 0, 1, t, n];
+}
+function m(t, n) {
+  return [t, 0, 0, n, 0, 0];
+}
+function M(t) {
+  const n = l(t), i = Math.cos(n), e = Math.sin(n);
+  return [i, e, -e, i, 0, 0];
+}
+function g(t, n, i, e, c, o, a, u) {
+  let r = y();
+  r = s(r, x(t, n)), o !== 1 && (r = s(r, m(o, o))), (a !== 0 || u !== 0) && (r = s(r, x(a, u)));
+  const f = i + e;
+  return f !== 0 && (r = s(r, M(f))), c < 0 && (r = s(r, m(-1, 1))), r;
+}
+function p(t, n, i) {
+  const e = n.width / 2, c = n.height / 2, o = g(
+    e,
+    c,
+    t.quarterTurns,
+    t.rotation,
+    t.flipH ? -1 : 1,
+    t.scale,
+    t.panX,
+    t.panY
+  );
+  return new DOMMatrix([o[0], o[1], o[2], o[3], o[4], o[5]]);
+}
+function C(t, n) {
+  const i = n.transformPoint({ x: t.x, y: t.y });
+  return { x: i.x, y: i.y };
+}
+function T(t, n) {
+  const e = n.inverse().transformPoint({ x: t.x, y: t.y });
+  return { x: e.x, y: e.y };
+}
+export {
+  h as DEFAULT_CONFIG,
+  E as SfxCropElement,
+  D as TOOLBAR_RESERVE_PX,
+  p as buildTransformMatrix,
+  T as canvasToImage,
+  O as createCropController,
+  _ as getAspectRatio,
+  C as imageToCanvas,
+  A as mergeConfig,
+  P as parseRatio
+};
+//# sourceMappingURL=index.js.map

package/dist/interactions/drag-crop.d.ts

@@ -0,0 +1,10 @@
+import { CropRect } from '../core/types';
+export interface DragCropState {
+    startCrop: CropRect;
+    startX: number;
+    startY: number;
+}
+/** Start dragging the crop area. */
+export declare function startDragCrop(crop: CropRect, pointerX: number, pointerY: number): DragCropState;
+/** Update crop position during drag. Returns new normalized crop rect. */
+export declare function updateDragCrop(drag: DragCropState, pointerX: number, pointerY: number, imageWidth: number, imageHeight: number): CropRect;