@embedpdf/angular 3.0.0-next.0

package/dist/fesm2022/embedpdf-angular-stage.mjs

@@ -0,0 +1,580 @@
+import { StageToken, wheelZoomFactor, settingsEqual } from '@embedpdf/plugin-stage';
+export * from '@embedpdf/plugin-stage';
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, input, computed, viewChild, Injector, ChangeDetectionStrategy, Component, contentChild, PLATFORM_ID, ElementRef, NgZone, effect } from '@angular/core';
+import { NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
+import { createPageContext, EPDF_PAGE, injectKernelHost, injectOptionalCapabilityFor, injectOptionalCapability, injectDocumentId, injectOptionalSelectorFor, injectCapability, injectSelector, shallowArray } from '@embedpdf/angular/runtime';
+import { InteractionToken } from '@embedpdf/plugin-interaction';
+
+/**
+ * The render-prop translation: React's `children: (page) => ReactNode` becomes
+ * marker directives on `<ng-template>`, typed so `let-page` infers
+ * `EpdfPageContext` in the template.
+ *
+ *   <epdf-stage>
+ *     <ng-template epdfPage>            page-space content (rotates)
+ *     <ng-template epdfPageChrome>      box-space chrome (never rotates)
+ *
+ * The `$implicit` context is the SAME stable object the per-page injector
+ * provides as `EPDF_PAGE` — `let-page` is sugar for inline chrome; components
+ * inside the template just call `injectPage()`.
+ */
+/** PAGE-SPACE content for each visible page (RenderLayer, annotations,
+ *  markers). Rendered inside the page's content frame, so it ROTATES with the
+ *  page's display rotation — coordinates are plain PDF points. */
+class EpdfPageTemplate {
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfPageTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: EpdfPageTemplate, isStandalone: true, selector: "ng-template[epdfPage]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfPageTemplate, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[epdfPage]', standalone: true }]
+        }] });
+/** BOX-SPACE chrome for each visible page (page-number label, selection
+ *  border, per-page buttons). Rendered into the OUTER box (content + reserved
+ *  `pageFrame`), so it does NOT rotate and the reserved bands are plain
+ *  regions (`bottom: 0; height: page.frame().bottom`). */
+class EpdfPageChrome {
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfPageChrome, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: EpdfPageChrome, isStandalone: true, selector: "ng-template[epdfPageChrome]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfPageChrome, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[epdfPageChrome]', standalone: true }]
+        }] });
+
+/**
+ * INTERNAL page shell — one per visible page, tracked by `pon` so the instance
+ * (and everything below) survives camera motion and page reorders.
+ *
+ * THE STABILITY INVARIANT (see page-context.ts): `page` (the context) and
+ * `pageInjector` are created ONCE per surface. Camera frames arrive as new
+ * `vp` input values; only the signals inside the context change. Changing the
+ * injector or context object identity would make `NgTemplateOutlet` recreate
+ * the embedded views — destroying layers at 120Hz. Don't.
+ *
+ * Geometry mirrors React's PageSurface: the outer box = content footprint +
+ * reserved chrome bands; the shadow is axis-aligned and stays put under
+ * rotation; the content wrapper is the ONLY thing rotation turns, and carries
+ * no transform at rotation 0 so it pixel-snaps like the shadow behind it.
+ * All numbers come from the transform — never re-derive `* zoom` / `* dpr`.
+ */
+class EpdfPageSurface {
+    vp = input.required(...(ngDevMode ? [{ debugName: "vp" }] : []));
+    frame = input.required(...(ngDevMode ? [{ debugName: "frame" }] : []));
+    documentId = input.required(...(ngDevMode ? [{ debugName: "documentId" }] : []));
+    pageTpl = input.required(...(ngDevMode ? [{ debugName: "pageTpl" }] : []));
+    chromeTpl = input(null, ...(ngDevMode ? [{ debugName: "chromeTpl" }] : []));
+    t = computed(() => this.vp().transform, ...(ngDevMode ? [{ debugName: "t" }] : []));
+    // Outer box = display footprint + reserved chrome bands; screenX/screenY are
+    // the device-snapped footprint top-left, so the box sits one frame further out.
+    left = computed(() => this.vp().screenX - this.frame().left, ...(ngDevMode ? [{ debugName: "left" }] : []));
+    top = computed(() => this.vp().screenY - this.frame().top, ...(ngDevMode ? [{ debugName: "top" }] : []));
+    outerWidth = computed(() => this.t().viewWidth + this.frame().left + this.frame().right, ...(ngDevMode ? [{ debugName: "outerWidth" }] : []));
+    outerHeight = computed(() => this.t().viewHeight + this.frame().top + this.frame().bottom, ...(ngDevMode ? [{ debugName: "outerHeight" }] : []));
+    // Center the (possibly rotated) content box on the display box and rotate
+    // about its center — NO translate(), so rotation 0 carries no transform.
+    contentLeft = computed(() => this.frame().left + (this.t().viewWidth - this.t().contentWidth) / 2, ...(ngDevMode ? [{ debugName: "contentLeft" }] : []));
+    contentTop = computed(() => this.frame().top + (this.t().viewHeight - this.t().contentHeight) / 2, ...(ngDevMode ? [{ debugName: "contentTop" }] : []));
+    rotate = computed(() => {
+        const rotation = this.vp().rotation;
+        return rotation ? `rotate(${rotation}deg)` : null;
+    }, ...(ngDevMode ? [{ debugName: "rotate" }] : []));
+    contentEl = viewChild.required('content');
+    /** ONE stable context per surface — volatile parts are signals inside it. */
+    page = createPageContext({
+        documentId: () => this.documentId(),
+        pon: () => this.vp().pon,
+        pageIndex: computed(() => this.vp().pageIndex),
+        frame: this.frame,
+        transform: this.t,
+        getRect: () => this.contentEl().nativeElement.getBoundingClientRect(),
+    });
+    /** ONE stable injector per surface (see the invariant above), parented to
+     *  this surface's node injector so layers also reach the kernel host. */
+    pageInjector = Injector.create({
+        providers: [{ provide: EPDF_PAGE, useValue: this.page }],
+        parent: inject(Injector),
+    });
+    templateContext = { $implicit: this.page };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfPageSurface, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: EpdfPageSurface, isStandalone: true, selector: "epdf-page-surface", inputs: { vp: { classPropertyName: "vp", publicName: "vp", isSignal: true, isRequired: true, transformFunction: null }, frame: { classPropertyName: "frame", publicName: "frame", isSignal: true, isRequired: true, transformFunction: null }, documentId: { classPropertyName: "documentId", publicName: "documentId", isSignal: true, isRequired: true, transformFunction: null }, pageTpl: { classPropertyName: "pageTpl", publicName: "pageTpl", isSignal: true, isRequired: true, transformFunction: null }, chromeTpl: { classPropertyName: "chromeTpl", publicName: "chromeTpl", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.left.px": "left()", "style.top.px": "top()", "style.width.px": "outerWidth()", "style.height.px": "outerHeight()" }, styleAttribute: "position: absolute; display: block;" }, viewQueries: [{ propertyName: "contentEl", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <!-- drop shadow ONLY — axis-aligned at the content box (inset by the frame),
+         transparent fill so it can never peek out behind the bitmap, and it
+         stays put under rotation. -->
+    <div
+      style="position: absolute; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);"
+      [style.left.px]="frame().left"
+      [style.top.px]="frame().top"
+      [style.width.px]="t().viewWidth"
+      [style.height.px]="t().viewHeight"
+    ></div>
+    <!-- the page: white backing + content as ONE box — the only thing rotation
+         turns. We render our own selection highlights, so native selection is
+         suppressed on the whole page subtree. -->
+    <div
+      #content
+      style="position: absolute; background: #fff; user-select: none; -webkit-user-select: none;"
+      [style.left.px]="contentLeft()"
+      [style.top.px]="contentTop()"
+      [style.width.px]="t().contentWidth"
+      [style.height.px]="t().contentHeight"
+      [style.transform]="rotate()"
+    >
+      <ng-container
+        [ngTemplateOutlet]="pageTpl()"
+        [ngTemplateOutletContext]="templateContext"
+        [ngTemplateOutletInjector]="pageInjector"
+      />
+    </div>
+    <!-- box-space chrome — fills the outer box, NEVER rotates. Bands are plain
+         regions: a label is bottom: 0; height: frame().bottom. -->
+    @if (chromeTpl(); as chrome) {
+      <ng-container
+        [ngTemplateOutlet]="chrome"
+        [ngTemplateOutletContext]="templateContext"
+        [ngTemplateOutletInjector]="pageInjector"
+      />
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfPageSurface, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'epdf-page-surface',
+                    standalone: true,
+                    imports: [NgTemplateOutlet],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        style: 'position: absolute; display: block;',
+                        '[style.left.px]': 'left()',
+                        '[style.top.px]': 'top()',
+                        '[style.width.px]': 'outerWidth()',
+                        '[style.height.px]': 'outerHeight()',
+                    },
+                    template: `
+    <!-- drop shadow ONLY — axis-aligned at the content box (inset by the frame),
+         transparent fill so it can never peek out behind the bitmap, and it
+         stays put under rotation. -->
+    <div
+      style="position: absolute; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);"
+      [style.left.px]="frame().left"
+      [style.top.px]="frame().top"
+      [style.width.px]="t().viewWidth"
+      [style.height.px]="t().viewHeight"
+    ></div>
+    <!-- the page: white backing + content as ONE box — the only thing rotation
+         turns. We render our own selection highlights, so native selection is
+         suppressed on the whole page subtree. -->
+    <div
+      #content
+      style="position: absolute; background: #fff; user-select: none; -webkit-user-select: none;"
+      [style.left.px]="contentLeft()"
+      [style.top.px]="contentTop()"
+      [style.width.px]="t().contentWidth"
+      [style.height.px]="t().contentHeight"
+      [style.transform]="rotate()"
+    >
+      <ng-container
+        [ngTemplateOutlet]="pageTpl()"
+        [ngTemplateOutletContext]="templateContext"
+        [ngTemplateOutletInjector]="pageInjector"
+      />
+    </div>
+    <!-- box-space chrome — fills the outer box, NEVER rotates. Bands are plain
+         regions: a label is bottom: 0; height: frame().bottom. -->
+    @if (chromeTpl(); as chrome) {
+      <ng-container
+        [ngTemplateOutlet]="chrome"
+        [ngTemplateOutletContext]="templateContext"
+        [ngTemplateOutletInjector]="pageInjector"
+      />
+    }
+  `,
+                }]
+        }] });
+
+/**
+ * Robust multi-click counter. `pointerdown.detail` is 0/1 in several browsers,
+ * so we count clicks ourselves from timing + proximity — the standard
+ * double/triple detection. Input normalization belongs in the adapter; the
+ * hub/handlers stay pure.
+ *
+ * INTERNAL for now — moves to the `/interaction` entry point (its React home)
+ * when that vertical lands.
+ */
+function createClickCounter(maxGapMs = 400, maxDistPx = 6) {
+    let last = 0;
+    let lastX = 0;
+    let lastY = 0;
+    let count = 0;
+    return (now, x, y) => {
+        count = now - last <= maxGapMs && Math.hypot(x - lastX, y - lastY) <= maxDistPx ? count + 1 : 1;
+        last = now;
+        lastX = x;
+        lastY = y;
+        return count;
+    };
+}
+
+/**
+ * `<epdf-stage>` — virtualizes and positions page surfaces by the camera, and
+ * stamps each one with YOUR `<ng-template epdfPage>` — you bring the layers.
+ *
+ * NULL-SAFE BY DESIGN (a deliberate deviation from React's strict Stage):
+ * Angular instantiates projected content eagerly, so a stage constructed
+ * before any document exists must not crash — it renders zero pages and its
+ * listeners no-op until the document arrives. Teach the document gate anyway:
+ * document CHROME (toolbars, panels) still belongs behind `*epdfDocumentGate`.
+ *
+ * ZONE RULE: every DOM listener here attaches OUTSIDE Angular's zone — a
+ * 120Hz pointermove stream must never trigger app-wide change detection.
+ * State flows kernel → tick signal → computeds → bindings, so the adapter is
+ * zone-agnostic (zoneless recommended, zone.js tolerated).
+ */
+const EMPTY_PAGES = [];
+const NO_FRAME = { top: 0, right: 0, bottom: 0, left: 0 };
+const frameEqual = (a, b) => a.top === b.top && a.right === b.right && a.bottom === b.bottom && a.left === b.left;
+class EpdfStage {
+    /**
+     * Route this Stage's pointer events to the interaction hub (page-resolved via
+     * `pageAt`) instead of the built-in drag-to-pan. Pan then becomes the `pan`
+     * tool's job and dragging in `pointer` mode selects text (incl. across pages).
+     * Pair with `stagePlugin({ interaction: true })`. Default false (built-in pan).
+     */
+    interaction = input(false, ...(ngDevMode ? [{ debugName: "interaction" }] : []));
+    /**
+     * Ambient ZOOM gestures on this stage: ctrl/cmd+wheel and trackpad pinch
+     * (Safari gesture events included). Default true. Turn OFF for follower
+     * lenses with a fixed magnification (a thumbnail rail should scroll under
+     * cmd+wheel, not zoom); pinches are still swallowed either way.
+     */
+    zoomGestures = input(true, ...(ngDevMode ? [{ debugName: "zoomGestures" }] : []));
+    /** The stage lens to drive (default: the main StageToken). */
+    token = input(StageToken, ...(ngDevMode ? [{ debugName: "token" }] : []));
+    host = injectKernelHost();
+    stage = injectOptionalCapabilityFor(() => this.token());
+    ix = injectOptionalCapability(InteractionToken);
+    useHub = computed(() => this.interaction() && this.ix() !== null, ...(ngDevMode ? [{ debugName: "useHub" }] : []));
+    // The hub's resolved cursor (text/grab/…), applied to the viewport when driving.
+    hubCursor = this.host.value(() => this.ix()?.cursor() ?? 'default');
+    cursor = computed(() => (this.useHub() ? this.hubCursor() : null), ...(ngDevMode ? [{ debugName: "cursor" }] : []));
+    documentId = injectDocumentId();
+    // visiblePages already folds in the camera (each page carries its
+    // device-snapped screenX/screenY + transform), so panning re-emits the list —
+    // no separate camera subscription needed for positioning. The capability
+    // memoizes, so Object.is equality suffices.
+    pages = injectOptionalSelectorFor(() => this.token(), (c) => c.visiblePages(), EMPTY_PAGES);
+    // Reserved chrome bands (screen px), uniform across pages — the frame the
+    // outer box reserves and the chrome template paints into.
+    frame = injectOptionalSelectorFor(() => this.token(), (c) => c.pageFrame(), NO_FRAME, frameEqual);
+    pageTemplateDir = contentChild(EpdfPageTemplate, ...(ngDevMode ? [{ debugName: "pageTemplateDir" }] : []));
+    chromeTemplateDir = contentChild(EpdfPageChrome, ...(ngDevMode ? [{ debugName: "chromeTemplateDir" }] : []));
+    pageTemplate = computed(() => this.pageTemplateDir()?.template ?? null, ...(ngDevMode ? [{ debugName: "pageTemplate" }] : []));
+    chromeTemplate = computed(() => this.chromeTemplateDir()?.template ?? null, ...(ngDevMode ? [{ debugName: "chromeTemplate" }] : []));
+    constructor() {
+        if (!isPlatformBrowser(inject(PLATFORM_ID)))
+            return;
+        const el = inject(ElementRef).nativeElement;
+        const zone = inject(NgZone);
+        // Rebinds when the stage capability (document open/close/switch, token
+        // change), hub, or gesture flags change — the Angular spelling of the React
+        // Stage effect and its dependency array.
+        effect((onCleanup) => {
+            const stage = this.stage();
+            const ix = this.ix();
+            const useHub = this.interaction() && !!ix;
+            const zoomGestures = this.zoomGestures();
+            if (!stage)
+                return; // no document yet — nothing to drive
+            const cleanups = [];
+            zone.runOutsideAngular(() => {
+                // Only report the viewport size. Initial placement (home) is the Stage
+                // plugin's job — the shell stays dumb.
+                const setViewport = () => stage.setViewport({ width: el.clientWidth, height: el.clientHeight });
+                const resizeObserver = new ResizeObserver(setViewport);
+                resizeObserver.observe(el);
+                setViewport();
+                cleanups.push(() => resizeObserver.disconnect());
+                // Report the device pixel ratio so page transforms render crisp. dppx
+                // changes (zoom, dragging between monitors) fire the media query;
+                // re-subscribe each time since the query value itself moves.
+                let mq = null;
+                const reportDpr = () => {
+                    stage.setDevicePixelRatio(window.devicePixelRatio || 1);
+                    mq?.removeEventListener('change', reportDpr);
+                    mq = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+                    mq.addEventListener('change', reportDpr);
+                };
+                reportDpr();
+                cleanups.push(() => mq?.removeEventListener('change', reportDpr));
+                // Wheel is ambient navigation in BOTH modes: ctrl/meta zooms (classified
+                // per input by wheelZoomFactor), else scrolls. With zoom gestures off, a
+                // zoom-wheel falls through to ordinary pan.
+                const onWheel = (e) => {
+                    e.preventDefault();
+                    const r = el.getBoundingClientRect();
+                    if (zoomGestures && (e.ctrlKey || e.metaKey)) {
+                        stage.zoomAround({ x: e.clientX - r.left, y: e.clientY - r.top }, wheelZoomFactor(e));
+                    }
+                    else {
+                        const dx = e.shiftKey ? e.deltaY : e.deltaX;
+                        const dy = e.shiftKey ? e.deltaX : e.deltaY;
+                        stage.panBy(-dx, -dy);
+                    }
+                };
+                el.addEventListener('wheel', onWheel, { passive: false });
+                cleanups.push(() => el.removeEventListener('wheel', onWheel));
+                // Safari never synthesizes ctrl+wheel for trackpad pinch — it fires
+                // proprietary gesture events carrying an ABSOLUTE scale; convert to the
+                // per-event ratio the camera physics wants. Feature-detected, so Chrome
+                // and Firefox pay nothing. preventDefault runs even with zoom gestures
+                // off — a pinch over the stage must never zoom the page itself.
+                let lastScale = 1;
+                const onGestureStart = (e) => {
+                    e.preventDefault();
+                    lastScale = e.scale ?? 1;
+                };
+                const onGestureChange = (e) => {
+                    e.preventDefault();
+                    const g = e;
+                    const scale = g.scale ?? 1;
+                    if (zoomGestures && scale > 0) {
+                        const r = el.getBoundingClientRect();
+                        stage.zoomAround({ x: g.clientX - r.left, y: g.clientY - r.top }, scale / lastScale);
+                    }
+                    lastScale = scale;
+                };
+                if ('GestureEvent' in window) {
+                    el.addEventListener('gesturestart', onGestureStart);
+                    el.addEventListener('gesturechange', onGestureChange);
+                    el.addEventListener('gestureend', onGestureStart); // reset the base
+                    cleanups.push(() => {
+                        el.removeEventListener('gesturestart', onGestureStart);
+                        el.removeEventListener('gesturechange', onGestureChange);
+                        el.removeEventListener('gestureend', onGestureStart);
+                    });
+                }
+                if (useHub && ix) {
+                    // Forward to the hub: pan/select/etc. become tool-gated handlers.
+                    // `pageAt` resolves the page per event, so a drag can cross pages.
+                    const clicks = createClickCounter();
+                    const forward = (phase, e, clickCount = 1) => {
+                        const r = el.getBoundingClientRect();
+                        const viewport = { x: e.clientX - r.left, y: e.clientY - r.top };
+                        ix.dispatch({
+                            phase,
+                            viewport,
+                            page: stage.pageAt(viewport) ?? undefined,
+                            // Page-anchored gestures (annotation move/resize) track the origin
+                            // page's frame through this even when the cursor is off that page.
+                            project: (pon) => stage.pointOnPage(pon, viewport),
+                            modifiers: { shift: e.shiftKey, alt: e.altKey, ctrl: e.ctrlKey, meta: e.metaKey },
+                            clickCount,
+                        });
+                    };
+                    let dragging = false;
+                    const down = (e) => {
+                        if (e.button !== 0)
+                            return;
+                        dragging = true;
+                        forward('down', e, clicks(Date.now(), e.clientX, e.clientY));
+                    };
+                    const hover = (e) => {
+                        if (!dragging)
+                            forward('move', e); // cursor feedback, no gesture
+                    };
+                    const windowMove = (e) => {
+                        if (dragging)
+                            forward('move', e);
+                    };
+                    const up = (e) => {
+                        if (!dragging)
+                            return;
+                        dragging = false;
+                        forward('up', e);
+                    };
+                    el.addEventListener('pointerdown', down);
+                    el.addEventListener('pointermove', hover);
+                    window.addEventListener('pointermove', windowMove);
+                    window.addEventListener('pointerup', up);
+                    cleanups.push(() => {
+                        el.removeEventListener('pointerdown', down);
+                        el.removeEventListener('pointermove', hover);
+                        window.removeEventListener('pointermove', windowMove);
+                        window.removeEventListener('pointerup', up);
+                    });
+                }
+                else {
+                    // Built-in drag-to-pan (no interaction hub).
+                    let dragging = false;
+                    let lastX = 0;
+                    let lastY = 0;
+                    const down = (e) => {
+                        if (e.button !== 0)
+                            return;
+                        dragging = true;
+                        lastX = e.clientX;
+                        lastY = e.clientY;
+                    };
+                    const move = (e) => {
+                        if (!dragging)
+                            return;
+                        stage.panBy(e.clientX - lastX, e.clientY - lastY);
+                        lastX = e.clientX;
+                        lastY = e.clientY;
+                    };
+                    const up = () => {
+                        dragging = false;
+                    };
+                    el.addEventListener('pointerdown', down);
+                    window.addEventListener('pointermove', move);
+                    window.addEventListener('pointerup', up);
+                    cleanups.push(() => {
+                        el.removeEventListener('pointerdown', down);
+                        window.removeEventListener('pointermove', move);
+                        window.removeEventListener('pointerup', up);
+                    });
+                }
+            });
+            onCleanup(() => cleanups.forEach((fn) => fn()));
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfStage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: EpdfStage, isStandalone: true, selector: "epdf-stage", inputs: { interaction: { classPropertyName: "interaction", publicName: "interaction", isSignal: true, isRequired: false, transformFunction: null }, zoomGestures: { classPropertyName: "zoomGestures", publicName: "zoomGestures", isSignal: true, isRequired: false, transformFunction: null }, token: { classPropertyName: "token", publicName: "token", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.cursor": "cursor()" }, styleAttribute: "position: relative; overflow: hidden; touch-action: none; display: block;" }, queries: [{ propertyName: "pageTemplateDir", first: true, predicate: EpdfPageTemplate, descendants: true, isSignal: true }, { propertyName: "chromeTemplateDir", first: true, predicate: EpdfPageChrome, descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (pageTemplate(); as tpl) {
+      @for (p of pages(); track p.pon) {
+        <epdf-page-surface
+          [vp]="p"
+          [frame]="frame()"
+          [documentId]="documentId() ?? ''"
+          [pageTpl]="tpl"
+          [chromeTpl]="chromeTemplate()"
+        />
+      }
+    }
+    <!-- viewport-space overlay UI: anything projected into <epdf-stage>
+         renders above the pages (menus, controls, scrollbars). -->
+    <ng-content />
+  `, isInline: true, dependencies: [{ kind: "component", type: EpdfPageSurface, selector: "epdf-page-surface", inputs: ["vp", "frame", "documentId", "pageTpl", "chromeTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfStage, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'epdf-stage',
+                    standalone: true,
+                    imports: [EpdfPageSurface],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        style: 'position: relative; overflow: hidden; touch-action: none; display: block;',
+                        '[style.cursor]': 'cursor()',
+                    },
+                    template: `
+    @if (pageTemplate(); as tpl) {
+      @for (p of pages(); track p.pon) {
+        <epdf-page-surface
+          [vp]="p"
+          [frame]="frame()"
+          [documentId]="documentId() ?? ''"
+          [pageTpl]="tpl"
+          [chromeTpl]="chromeTemplate()"
+        />
+      }
+    }
+    <!-- viewport-space overlay UI: anything projected into <epdf-stage>
+         renders above the pages (menus, controls, scrollbars). -->
+    <ng-content />
+  `,
+                }]
+        }], ctorParameters: () => [] });
+
+/** Late-binding method passthrough: exact capability signature, current doc. */
+const lazy = (cap, key) => ((...args) => cap()[key](...args));
+function injectStage(token = StageToken) {
+    return injectCapability(token);
+}
+function injectZoom(token = StageToken) {
+    const s = injectCapability(token);
+    return {
+        zoom: injectSelector(token, (c) => c.zoomLevel()),
+        /** Active zoom intent: 'automatic' | 'fit-page' | 'fit-width' | 'fit-all' | 'custom'. */
+        mode: injectSelector(token, (c) => c.zoomMode()),
+        zoomIn: lazy(s, 'zoomIn'),
+        zoomOut: lazy(s, 'zoomOut'),
+        fitWidth: lazy(s, 'fitWidth'),
+        fitPage: lazy(s, 'fitPage'),
+        fitAll: lazy(s, 'fitAll'),
+        automatic: lazy(s, 'automatic'),
+        zoomTo: lazy(s, 'zoomTo'),
+    };
+}
+function injectPages(token = StageToken) {
+    const s = injectCapability(token);
+    return {
+        currentPage: injectSelector(token, (c) => c.currentPage()),
+        pageCount: injectSelector(token, (c) => c.pageCount()),
+        goToPage: lazy(s, 'goToPage'),
+        next: lazy(s, 'next'),
+        prev: lazy(s, 'prev'),
+        reveal: lazy(s, 'reveal'),
+    };
+}
+function injectLayout(token = StageToken) {
+    const s = injectCapability(token);
+    return {
+        flow: injectSelector(token, (c) => c.flow()),
+        layout: injectSelector(token, (c) => c.layout()),
+        spread: injectSelector(token, (c) => c.spread()),
+        sizing: injectSelector(token, (c) => c.sizing()),
+        bounded: injectSelector(token, (c) => c.bounded()),
+        setFlow: lazy(s, 'setFlow'),
+        setLayout: lazy(s, 'setLayout'),
+        setSpread: lazy(s, 'setSpread'),
+        setSizing: lazy(s, 'setSizing'),
+        setBounded: lazy(s, 'setBounded'),
+    };
+}
+/** The document's page list (with PDF labels) + the current item's pages — the
+ *  data for page thumbnails / worksheet-style page tabs. */
+function injectPageList(token = StageToken) {
+    return {
+        pages: injectSelector(token, (c) => c.pages(), (a, b) => a.length === b.length && a.every((p, i) => p.pon === b[i].pon && p.label === b[i].label)),
+        currentItemPages: injectSelector(token, (c) => c.currentItemPages(), shallowArray),
+    };
+}
+/**
+ * All Stage settings + the batch `update`. The seam for "presets are a customer
+ * concern": keep your own `Partial<StageSettings>` objects and apply them with
+ * `update(preset)` (one anchor-preserving change).
+ */
+function injectStageSettings(token = StageToken) {
+    const s = injectCapability(token);
+    return {
+        // settingsEqual derives from the plugin's settings registry — a new setting
+        // is covered automatically, without this package spelling out the shape.
+        settings: injectSelector(token, (c) => c.settings(), settingsEqual),
+        update: lazy(s, 'update'),
+        reset: lazy(s, 'resetView'),
+    };
+}
+
+/**
+ * @embedpdf/angular/stage — the viewport trunk: `<epdf-stage>` + page
+ * templates + the stage facade inject functions.
+ */
+// One-line-per-feature: registration travels with the UI.
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { EpdfPageChrome, EpdfPageSurface, EpdfPageTemplate, EpdfStage, injectLayout, injectPageList, injectPages, injectStage, injectStageSettings, injectZoom };
+//# sourceMappingURL=embedpdf-angular-stage.mjs.map