import type{LyraEventDetailSnapshot}from'../../../internal/lyra-element.js';import{type PropertyValues,type TemplateResult}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';import type{LyraAnchor,LyraAnchorKind,HighlightActivateDetail,AnchorResultDetail}from'../../viewers/document-viewer/anchors.js';export type LyraImageFit='contain'|'width'|'actual';export type LyraImageRotation=0|90|180|270; /** Finite percentage coordinates. Negative widths/heights are rejected when rendered. */ export interface LyraImageRegionRect{x:number;y:number;width:number;height:number;} /** Maximum region buttons projected at once. An active region beyond the leading window replaces * the final entry so anchor identity remains reachable without making an unbounded tab/DOM list. */ export declare const IMAGE_VIEWER_HIGHLIGHT_LIMIT=200;export interface LyraImageViewerEventMap{'lr-load':CustomEvent<{naturalWidth:number;naturalHeight:number;}>;'lr-zoom-change':CustomEvent<{zoom:number;}>;'lr-rotation-change':CustomEvent<{rotation:LyraImageRotation;}>;'lr-fit-change':CustomEvent<{fit:LyraImageFit;}>;'lr-highlight-activate':CustomEvent;'lr-annotation-create':CustomEvent>;'lr-anchor-result':CustomEvent;'lr-render-error':CustomEvent<{error:unknown;}>;}declare class LyraImageViewerBase extends LyraElement{}declare const LyraImageViewer_base:Omit &(new(...args:ConstructorParameters)=>InstanceType &import("../../../lyra.js").LyraAnchorTarget&{renderAnchorLiveRegion():unknown;}); /** * `` — full pan/zoom raster-image viewer with labeled region highlights and * opt-in region annotation, the landing surface for `region`-anchored citations. Distinct from * `` (rendered SVG documents) and `` (before/after slotted * surfaces) — this component owns raster grounding/citation display, not comparison or vector * rendering. * * Adopts `DocumentAnchorTarget` with `anchorKinds: ['region']` only — no text selection is bound * (a raster image has no selectable text), so `lr-text-select` is never emitted by this viewer. * * Region rectangles are canonical finite, positive percentages wholly inside the 0–100 image * space; empty/blank IDs are omitted and duplicates use first-wins uniqueness. At most * `IMAGE_VIEWER_HIGHLIGHT_LIMIT` buttons are * projected at once with one roving tab stop. An active tail item remains reachable by replacing * the final item in the leading window. Anchor success means the canonical rendered target was * scrolled into and visibly intersects the embedded viewport. * * Fit, rotation, and annotation controls become operable only after the current image loads. At * 90°/270° the `rotation-frame` owns an axis-swapped layout footprint so transformed media stays * reachable in every fit mode rather than painting outside the pan/zoom scroll geometry. * * **RTL behavior:** the raster and annotation geometry use physical image coordinates. In * annotation mode, ArrowLeft/ArrowRight decrease/increase a draft's x coordinate and their Shift * variants decrease/increase its width in both text directions; the surrounding toolbar remains * logical. * * @customElement lr-image-viewer * @event lr-load - Image finished loading. `detail: { naturalWidth, naturalHeight }`. * @event lr-zoom-change - `detail: { zoom }`, bubbles from the embedded pan-zoom surface. * @event lr-rotation-change - `detail: { rotation }`. * @event lr-fit-change - `detail: { fit }`. * @event lr-highlight-activate - A highlight box was clicked/keyboard-activated. * `detail: { highlightId }`. * @event lr-annotation-create - A drawn/keyed region was committed. `detail: { anchor }` (kind * `'region'`). Never stored by the component — the host appends a `LyraHighlight`. * @event lr-anchor-result - Fired after `anchor` (or a `scrollToAnchor()` call) is applied. * `detail: { found }`. * @event lr-render-error - The image failed to load. `detail: { error }`. * @csspart base - The root wrapper. * @csspart toolbar - The fit/rotate/annotate controls row. * @csspart fit-control - The fit-mode select. * @csspart rotate-button - The rotate-90-clockwise button. * @csspart annotate-toggle - The annotation-mode toggle button. * @csspart frame - The embedded `lr-pan-zoom`. * @csspart frame-viewport - The embedded pan-zoom's scrollable viewport. * @csspart frame-content - The embedded pan-zoom's transformed content wrapper. * @csspart frame-controls - The embedded pan-zoom's zoom controls. * @csspart rotation-frame - Layout footprint that axis-swaps at 90/270 degrees. * @csspart image-wrapper - The rotated wrapper around the image and its overlays. * @csspart image - The `` element. * @csspart highlight-layer - The overlay hosting highlight boxes. * @csspart highlight - One highlight box (`data-tone`, `data-active`). * @csspart highlight-label - A highlight's visible label. * @csspart annotation-box - The in-progress draft rectangle. * @csspart error - Ordinary visible failure text. Fresh post-mount image/source failures append * the localized message to the shared light-DOM assertive announcement sink; an already-unsafe * initial `src` renders visibly without interrupting on mount. * @cssprop [--lr-image-viewer-annotate-active-bg=var(--lr-color-brand-quiet)] - Background of * `[part="annotate-toggle"]` while annotation mode is on. The toggle carries its own glyph in * `--lr-color-text`, so keep a 4.5:1 ratio against it. * @cssprop [--lr-image-viewer-annotate-active-border=var(--lr-color-brand)] - Border color of * `[part="annotate-toggle"]` while annotation mode is on. * @cssprop [--lr-image-viewer-highlight-active-color=var(--lr-color-brand)] - Outline color of the * `[part="highlight"]` matching `activeHighlightId`, independent of the per-tone border colors. * @cssprop [--lr-image-viewer-highlight-active-border-width=var(--lr-border-width-thick)] - Border * width of the `[part="highlight"]` matching `activeHighlightId`. * @cssprop [--lr-image-viewer-highlight-active-outline-width=var(--lr-focus-ring-width)] - Outline * width of the `[part="highlight"]` matching `activeHighlightId`. * @cssprop [--lr-image-viewer-highlight-active-outline-offset=var(--lr-focus-ring-offset)] - Outline * offset of the `[part="highlight"]` matching `activeHighlightId`. * @cssprop [--lr-image-viewer-annotation-box-border=var(--lr-color-brand)] - Border color of * `[part="annotation-box"]`, the in-progress draft rectangle drawn while annotating, independent * of the saved `[part="highlight"]` boxes' own tone colors. * @cssprop [--lr-image-viewer-annotation-box-bg=color-mix(in srgb, var(--lr-color-brand) 15%, transparent)] - * Fill of `[part="annotation-box"]`. * @cssprop [--lr-image-viewer-highlight-border=var(--lr-color-brand)] - Default highlight border. * @cssprop [--lr-image-viewer-highlight-bg=color-mix(in srgb, var(--lr-color-brand) 20%, transparent)] - Default highlight fill. * @cssprop --lr-image-viewer-highlight-success-border - Success-tone highlight border. * @cssprop --lr-image-viewer-highlight-success-bg - Success-tone highlight fill. * @cssprop --lr-image-viewer-highlight-warning-border - Warning-tone highlight border. * @cssprop --lr-image-viewer-highlight-warning-bg - Warning-tone highlight fill. * @cssprop --lr-image-viewer-highlight-danger-border - Danger-tone highlight border. * @cssprop --lr-image-viewer-highlight-danger-bg - Danger-tone highlight fill. * @cssprop --lr-image-viewer-highlight-neutral-border - Neutral-tone highlight border. * @cssprop --lr-image-viewer-highlight-neutral-bg - Neutral-tone highlight fill. * @cssprop --lr-image-viewer-highlight-fill - The resting fill a `[part="highlight"]` actually * renders, resolved per tone from the `--lr-image-viewer-highlight-*-bg` knobs above. Its hover * and pressed states are colour mixes taken from this value, so setting it directly retints all * three at once for one highlight; retint a whole tone through the `-bg` knob instead. * @status stable * @since 4.0.0 */ export declare class LyraImageViewer extends LyraImageViewer_base{static styles:import("lit").CSSResultGroup[];protected static readonly immutableEventDetails:readonly string[]; /** Image URL; validated with `safeMediaSrc` before it ever reaches the ``. */ src:string; /** Accessible name of `[part="base"]`; a host `aria-label` wins, then the localized * `imageViewerLabel` fallback. */ name:string; /** Image alt text. Unset falls back to `name`; explicitly `""` marks the image decorative. */ alt?:string; /** Base scale at `zoom = 1`: `contain` fits the whole image in the frame, `width` fills the * frame's inline size, `actual` shows the image at its natural pixel dimensions. */ private _fit;get fit():LyraImageFit;set fit(value:LyraImageFit); /** Multiplier over the fit-derived base scale, delegated to the embedded pan-zoom surface. */ zoom:number; /** Passed through to the embedded `` as `.minZoom`. Same default as * `` itself. Mirrors ``'s own `minZoom` (name, default, * pass-through shape) -- both wrap the exact same `` surface. */ minZoom:number; /** Passed through to the embedded `` as `.maxZoom`. Mirrors * ``'s own `maxZoom`. */ maxZoom:number; /** Passed through to the embedded `` as `.zoomStep`. Mirrors * ``'s own `zoomStep`. */ zoomStep:number; /** Clockwise rotation in 90-degree steps. */ private _rotation;get rotation():LyraImageRotation;set rotation(value:LyraImageRotation); /** Enables region drawing via pointer or keyboard. The focused image wrapper owns drawing * commands and shows the shared focus ring inside its clipped viewport; descendant highlights retain activation. */ annotatable:boolean; /** From `DocumentAnchorTarget` — only `region` anchors resolve here. */ readonly anchorKinds:readonly LyraAnchorKind[];private loadState;private draft;private revealTarget;private highlightFocusId;private mediaLayoutSize;private errorAnnouncementSink?;private geometryObserver?;private observedWrapper?;private geometryFrame?;private geometryFrameOwner?;private frameEl?;private liveRegion?;private wrapperEl?; /** `rotation` normalized to one of the four right-angle steps this component actually supports * (`0`/`90`/`180`/`270`) -- `rotate()`'s own `% 360` step only ever produces one of these four * values from an already-valid `rotation`, but a directly-assigned `rotation` (attribute or * property) isn't guaranteed to be: a non-finite/negative/non-multiple-of-90 value would * otherwise reach the CSS `rotate(${rotation}deg)` transform and * `screenPercentToImagePercent()`'s right-angle-only coordinate math unnormalized. Rounds to * the nearest right angle, then wraps into `[0, 360)`. */ private get safeRotation();private get hasOperableContent();protected willUpdate(changed:PropertyValues):void;protected updated(changed:PropertyValues):void; /** Increases the embedded pan/zoom scale by one configured step. */ zoomIn:()=>void; /** Decreases the embedded pan/zoom scale by one configured step. */ zoomOut:()=>void; /** Restores the embedded pan/zoom scale and translation. */ resetZoom:()=>void;rotate():void;protected applyAnchor(anchor:LyraAnchor):Promise;private onImgLoad;private onImgError;connectedCallback():void;adoptedCallback():void;private disconnectGeometryObserver;private updateMediaLayoutSize;private scheduleMediaLayoutSize;private syncGeometryObserver;private syncErrorAnnouncementSink;private releaseErrorAnnouncementSink;private announceLoadError;private onFrameZoomChange;private onHighlightActivate;private toggleAnnotatable;private onFitChange;private announceDraftPosition;private onWrapperKeyDown;private commitDraft;private pointerDraftId;private pointerOrigin;private cancelPointerDraft;private onWrapperPointerDown;private onWrapperPointerMove;private onWrapperPointerUp;private canonicalRegionHighlights;private boundedRegionHighlights;private onHighlightFocus;private onHighlightKeyDown;private renderHighlights;private renderDraft;private renderRevealTarget;private renderBody;render():TemplateResult;disconnectedCallback():void;}declare global{interface HTMLElementTagNameMap{'lr-image-viewer':LyraImageViewer;}}export{};