@embedpdf/angular 3.0.0-next.13 → 3.0.0-next.15

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

@@ -0,0 +1,1960 @@
+import { AnnotationToken, annotationState, annotationPlugin, ANNOTATION_DEFAULTS } from '@embedpdf/plugin-annotation';
+export * from '@embedpdf/plugin-annotation';
+import * as i0 from '@angular/core';
+import { computed, Injectable, inject, DestroyRef, input, ChangeDetectionStrategy, Component, Directive, booleanAttribute, TemplateRef, InjectionToken, effect, untracked, ElementRef, Injector, contentChildren, contentChild, signal, PLATFORM_ID } from '@angular/core';
+import { EpdfPluginService, injectDocumentScope, pluginService, CapabilityBinding, injectKernelHost, devWarn, injectPage, EpdfSvgShapes, paintsPagePart, outsideStageError } from '@embedpdf/angular/runtime';
+import { AnnotationToken as AnnotationToken$1, previewBucket } from '@embedpdf/plugin-annotation/contract/host';
+import { enrichCommentThreads, sameAnnotationAnchor, pickRequestedFile, annotationChromePaint, chromeInPixels, sceneViewBox, svgShapesOf, ghostOpacity, rasterInFrame, createTextBoxEditorFollower, textPlateInPixels, textBoxStyleOf, textBoxEditorScaleOf, createShownUrls, editingTextKeyOf, frameInPixels, bakedAppearanceOf, pictureOrPainting, shownAppearance, annotationDrawingOf, lookFrameOf, layerTextBoxesOf, rectInPixels, registerRendererBehaviors, loadAppearanceUrls, loadObjectUrl, sameSelectionAnchor, sameCreationDraftAnchor, sameRotationAnchor, paintDefault, paint } from '@embedpdf/web';
+import { annotationKey } from '@embedpdf/core';
+import { NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
+import { scene, MITER_LIMIT, hasLiveDrawing } from '@embedpdf/core-annotation';
+import { InteractionToken } from '@embedpdf/plugin-interaction/contract';
+import { RenderToken } from '@embedpdf/plugin-render/contract/host';
+import { samePagePlacement } from '@embedpdf/core-geometry';
+import { EPDF_PROJECTOR, EpdfAnchored } from '@embedpdf/angular/anchored';
+
+/**
+ * Comments and replies, as their own service: `inject(EpdfComments)`. A comments sidebar needs
+ * the threads and the verbs on them, not the rest of the annotation API, so they get a service
+ * of their own (React's `useComments()` and `useCommentThreads()`). `withAnnotation()` provides
+ * it.
+ *
+ * The threads come with where their page is shown (`pageIndex`, `pageLabel`): the join of the
+ * plugin's threads and the document's page list is `@embedpdf/web`'s, the same for every
+ * framework.
+ */
+const NO_THREADS = Object.freeze([]);
+const NO_PAGES = Object.freeze([]);
+/**
+ * The comments of the document in scope (`[epdfDocumentScope]`), else the active one: every
+ * thread as `threads()`, one as `threadOf(ref)`, the verbs (`reply()`, `setText()`,
+ * `setStatus()`, `setMarked()`, `delete()`, `deleteThread()`), the checks (`canReply(ref)`, …),
+ * which follow the document and its permissions in a template, and `threadChanged$`. Without a
+ * document the threads are empty and the verbs refuse with `not-ready`.
+ */
+class EpdfComments extends EpdfPluginService {
+    constructor() {
+        super({ name: 'EpdfComments', feature: 'withAnnotation()', token: AnnotationToken });
+    }
+    /** Every thread, in reading order, read once. In a template, use `threads()`. */
+    listThreads = this.binding.namespaceMethod('comments', 'listThreads');
+    /** The thread a comment is in (its first comment, a reply or a review state), read once, or null. */
+    getThread = this.binding.namespaceMethod('comments', 'getThread');
+    /** Reply to the thread's first comment, whichever comment you pass. Resolves `{ annotation }`. */
+    reply = this.binding.namespaceMethod('comments', 'reply');
+    /** Change a comment's text. */
+    setText = this.binding.namespaceMethod('comments', 'setText');
+    /** Set the user's review state on a thread, such as `'accepted'`. */
+    setStatus = this.binding.namespaceMethod('comments', 'setStatus');
+    /** Check a thread off for the user, or clear the check mark. */
+    setMarked = this.binding.namespaceMethod('comments', 'setMarked');
+    /** Delete a comment with its replies; the first comment of a thread deletes the thread. */
+    delete = this.binding.namespaceMethod('comments', 'delete');
+    /** Delete a whole thread, all of it or none. Resolves `{ deleted, failed }`. */
+    deleteThread = this.binding.namespaceMethod('comments', 'deleteThread');
+    /** Whether the user may reply to this thread. */
+    canReply = this.binding.namespaceMethod('comments', 'canReply');
+    /** Whether the user may change this comment's text. */
+    canSetText = this.binding.namespaceMethod('comments', 'canSetText');
+    /** Whether the user may set a review state on this thread. */
+    canSetStatus = this.binding.namespaceMethod('comments', 'canSetStatus');
+    /** Whether the user may check this thread off. */
+    canSetMarked = this.binding.namespaceMethod('comments', 'canSetMarked');
+    /** Whether the user may delete this comment. */
+    canDelete = this.binding.namespaceMethod('comments', 'canDelete');
+    /** Whether the user may delete every comment in this thread. */
+    canDeleteThread = this.binding.namespaceMethod('comments', 'canDeleteThread');
+    /** A thread changed through this viewer: a reply, a text, a review state, a check mark or a delete. */
+    threadChanged$ = this.binding.stream((annotation) => annotation.comments.onThreadChanged);
+    scope = injectDocumentScope();
+    rawThreads = this.binding.select((annotation) => annotation.comments.listThreads(), NO_THREADS);
+    /** The pages of this service's document: a page moved or deleted moves its threads' labels. */
+    pages = this.binding.host.read((kernel) => {
+        const id = this.scope() ?? kernel.documents.getActiveId();
+        return id ? kernel.documents.listPages(id) : NO_PAGES;
+    }, () => NO_PAGES);
+    /**
+     * Every thread in the document, in reading order (by page, then from the top), each with its
+     * page's `pageIndex` and `pageLabel`. Own, remote and reloaded changes all show. The same
+     * array until a thread or a page changes; empty without a document.
+     */
+    threads = computed(() => enrichCommentThreads(this.rawThreads(), this.pages()), ...(ngDevMode ? [{ debugName: "threads" }] : []));
+    /**
+     * The thread a comment is in, whether you pass its first comment, a reply or a review state,
+     * with its page's label; null for null, or a comment in no thread. Pass the ref, or a function
+     * that reads it (`() => this.note().ref`).
+     */
+    threadOf(ref) {
+        const refOf = typeof ref === 'function' ? ref : () => ref;
+        const thread = this.binding.select((annotation) => {
+            const member = refOf();
+            return member ? annotation.comments.getThread(member) : null;
+        }, null, Object.is);
+        return computed(() => {
+            const found = thread();
+            if (!found)
+                return null;
+            const root = annotationKey(found.root.ref);
+            return this.threads().find((view) => annotationKey(view.root.ref) === root) ?? null;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfComments, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfComments, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfComments, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+/**
+ * The annotation plugin's service and feature:
+ *
+ *   withAnnotation(options)       the plugin, for provideEmbedPdf() (it needs withInteraction())
+ *   inject(EpdfAnnotation)        create, change and delete annotations; the State table as
+ *                                 signals (`status()`, `selected()`, `hovered()`, `editing()`);
+ *                                 the parts (`selection`, `draft`, `text`, `tools`, `stamps`,
+ *                                 `links`); the events as streams (`created$`, …); the settings;
+ *                                 and the reads a template follows (`watch(filter)`,
+ *                                 `anchorOf(ref)`, `tools.defaultsOf(id)`)
+ *
+ * The service is both the plugin's API and its state, so the React hooks around it become
+ * members: `useAnnotationList(filter)` is `annotation.watch(filter)`, `useAnnotationAnchor(ref)`
+ * is `annotation.anchorOf(ref)`, `useAnnotationDefaults(id)` is `annotation.tools.defaultsOf(id)`
+ * and `useAnnotationProperties()` is `annotation.selection.properties()`. Each of them takes a
+ * value or a function that reads signals (`() => this.stamp().ref`), and follows it.
+ */
+const NO_ANNOTATIONS = Object.freeze([]);
+const NO_DEFAULTS = Object.freeze({});
+const NO_PROPERTIES = Object.freeze({
+    properties: [],
+    values: {},
+    mixed: [],
+});
+/**
+ * Annotations: `create()`, `update()`, `delete()` and the rest of the Methods tables, the
+ * selecting page's State table as signals (`annotation.selected()`), the parts the capability
+ * has (`annotation.selection.set(refs)`, `annotation.tools.updateDefaults(id, changes)`), its
+ * events as streams (`annotation.created$`), and its settings (`annotation.settings()`,
+ * `annotation.updateSettings({ chrome })`). Comments have their own service, `EpdfComments`.
+ *
+ * Without a document the signals read empty and the methods refuse with `not-ready`. The checks
+ * (`canCreate()`, `canDelete(ref)`, `selection.canGroup()`, `stamps.isArmed()`) are state:
+ * read in a template, they follow the document, its permissions and the selection.
+ */
+class EpdfAnnotation extends pluginService({
+    name: 'EpdfAnnotation',
+    feature: 'withAnnotation()',
+    token: AnnotationToken,
+    state: annotationState,
+    methods: [
+        'get',
+        'list',
+        'getAt',
+        'isPending',
+        'getStatus',
+        'getHovered',
+        'refresh',
+        'create',
+        'createFromSelection',
+        'update',
+        'delete',
+        'reorder',
+        'export',
+        'import',
+        'downloadResource',
+        'setFilePickerProvider',
+        'canRead',
+        'canCreate',
+        'canUpdate',
+        'canDelete',
+        'cancel',
+    ],
+    events: [
+        'onCreated',
+        'onUpdated',
+        'onDeleted',
+        'onReordered',
+        'onResynced',
+        'onWriteFailed',
+        'onSelectionChanged',
+        'onDraftChanged',
+        'onEditingChanged',
+        'onHoverChanged',
+    ],
+}) {
+    /** The same capability, typed with the reads only framework code has (an annotation's anchor). */
+    host = new CapabilityBinding(this.binding.host, () => AnnotationToken$1, injectDocumentScope());
+    /** The selection: `set(refs)`, `update(changes)`, `delete()`, … and `properties()`. */
+    selection = {
+        set: this.binding.namespaceMethod('selection', 'set'),
+        add: this.binding.namespaceMethod('selection', 'add'),
+        selectAll: this.binding.namespaceMethod('selection', 'selectAll'),
+        selectInRect: this.binding.namespaceMethod('selection', 'selectInRect'),
+        clear: this.binding.namespaceMethod('selection', 'clear'),
+        list: this.binding.namespaceMethod('selection', 'list'),
+        update: this.binding.namespaceMethod('selection', 'update'),
+        updateLink: this.binding.namespaceMethod('selection', 'updateLink'),
+        getProperties: this.binding.namespaceMethod('selection', 'getProperties'),
+        delete: this.binding.namespaceMethod('selection', 'delete'),
+        rotateBy: this.binding.namespaceMethod('selection', 'rotateBy'),
+        resetRotation: this.binding.namespaceMethod('selection', 'resetRotation'),
+        group: this.binding.namespaceMethod('selection', 'group'),
+        ungroup: this.binding.namespaceMethod('selection', 'ungroup'),
+        canGroup: this.binding.namespaceMethod('selection', 'canGroup'),
+        canUngroup: this.binding.namespaceMethod('selection', 'canUngroup'),
+        getAnchor: this.binding.namespaceMethod('selection', 'getAnchor'),
+        getRotationAnchor: this.binding.namespaceMethod('selection', 'getRotationAnchor'),
+        // The plugin hands out the same object while nothing changes.
+        properties: this.binding.select((annotation) => annotation.selection.getProperties(), NO_PROPERTIES, Object.is),
+    };
+    /** A polygon or polyline being drawn: `get()`, `finish()`, `cancel()`. */
+    draft = {
+        get: this.binding.namespaceMethod('draft', 'get'),
+        finish: this.binding.namespaceMethod('draft', 'finish'),
+        cancel: this.binding.namespaceMethod('draft', 'cancel'),
+    };
+    /** Typing in a text box: `begin(ref)`, `end()`, `getEditing()`, `toggleFormat(format)`. */
+    text = {
+        begin: this.binding.namespaceMethod('text', 'begin'),
+        end: this.binding.namespaceMethod('text', 'end'),
+        getEditing: this.binding.namespaceMethod('text', 'getEditing'),
+        toggleFormat: this.binding.namespaceMethod('text', 'toggleFormat'),
+    };
+    /** The tools: `list()`, `register(tool)`, `updateDefaults(id, changes)`, `defaultsOf(id)`, … */
+    tools = {
+        list: this.binding.namespaceMethod('tools', 'list'),
+        get: this.binding.namespaceMethod('tools', 'get'),
+        register: this.binding.namespaceMethod('tools', 'register'),
+        getDefaults: this.binding.namespaceMethod('tools', 'getDefaults'),
+        updateDefaults: this.binding.namespaceMethod('tools', 'updateDefaults'),
+        getProperties: this.binding.namespaceMethod('tools', 'getProperties'),
+        // The plugin hands out the same object until the tool's defaults change.
+        defaultsOf: (id) => {
+            const idOf = typeof id === 'function' ? id : () => id;
+            return this.binding.select((annotation) => annotation.tools.getDefaults(idOf()), NO_DEFAULTS, Object.is);
+        },
+        propertiesOf: (id) => {
+            const idOf = typeof id === 'function' ? id : () => id;
+            return this.binding.select((annotation) => annotation.tools.getProperties(idOf()), NO_PROPERTIES);
+        },
+        defaultsChanged$: this.binding.stream((annotation) => annotation.tools.onDefaultsChanged),
+    };
+    /** Stamps from bytes: `arm(stamp)`, `disarm()`, `isArmed()`, `place(stamp, placement)`. */
+    stamps = {
+        arm: this.binding.namespaceMethod('stamps', 'arm'),
+        disarm: this.binding.namespaceMethod('stamps', 'disarm'),
+        isArmed: this.binding.namespaceMethod('stamps', 'isArmed'),
+        place: this.binding.namespaceMethod('stamps', 'place'),
+    };
+    /** An annotation's link: `get(ref)`, `set(ref, target)`, `clear(ref)`. */
+    links = {
+        get: this.binding.namespaceMethod('links', 'get'),
+        set: this.binding.namespaceMethod('links', 'set'),
+        clear: this.binding.namespaceMethod('links', 'clear'),
+    };
+    /**
+     * The annotations matching `filter` (some pages, one kind), in drawing order, as the user sees
+     * them: a signal that keeps the same array while they stay the same. Pass the filter, or a
+     * function that reads it (`() => ({ pages: [this.page()] })`). Empty without a document.
+     * Call it once, in a field or the constructor, and read the signal in your template.
+     */
+    watch(filter) {
+        const filterOf = typeof filter === 'function' ? filter : () => filter;
+        return this.binding.select((annotation) => annotation.list(filterOf() ?? undefined), NO_ANNOTATIONS);
+    }
+    /**
+     * An anchor for `<epdf-anchored>` that keeps a card or a badge on one annotation: its page and
+     * the box around what it shows, following a move as it happens. Pass the ref, or a function
+     * that reads it (`() => this.hovered()?.ref ?? null`). Null for null, or an annotation that
+     * isn't here. It changes when the annotation moves, not while people scroll or zoom.
+     */
+    anchorOf(ref) {
+        const refOf = typeof ref === 'function' ? ref : () => ref;
+        return this.host.select((annotation) => {
+            const target = refOf();
+            return target ? annotation.getAnnotationAnchor(target) : null;
+        }, null, sameAnnotationAnchor);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfAnnotation, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfAnnotation, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfAnnotation, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+/**
+ * The annotation plugin: drawing, selecting, changing and saving annotations, and comments. It
+ * works with the interaction plugin, so give `withInteraction()` too, and an
+ * `<epdf-annotation-layer>` in each page:
+ * `provideEmbedPdf({ engine }, withStage(), withRender(), withInteraction(), withAnnotation())`.
+ */
+function withAnnotation(options) {
+    return { plugins: [annotationPlugin(options)], services: [EpdfAnnotation, EpdfComments] };
+}
+
+/**
+ * `withFilePicker(provider?)`: where the `stamp` and `attachment` tools get their file after a
+ * click. The plugin has no DOM, so it asks a provider, and this feature gives it one: the
+ * browser's file dialog by default, or your own function (a stamp library, a cloud drive).
+ *
+ *   provideEmbedPdf({ engine }, withStage(), withInteraction(), withAnnotation(), withFilePicker())
+ *
+ * React installs it with a hook in an always-mounted component; in Angular it is app-wide setup,
+ * so it is a feature of `provideEmbedPdf()`.
+ */
+/**
+ * The browser's file dialog, filtered by the tool's `accept`: what `withFilePicker()` installs
+ * when you give it nothing. A picked `File` carries its own name and type.
+ */
+const filePickerProvider = pickRequestedFile;
+/**
+ * The file dialog behind every click-then-pick tool, for every document the viewer opens.
+ * Without an argument it is the browser's dialog ({@link filePickerProvider}); pass your own
+ * function to pick from your library (it gets the tool, the page and the point, and returns the
+ * file or `null` to cancel), or `null` to make those tools do nothing.
+ */
+function withFilePicker(provider = filePickerProvider) {
+    return { plugins: [], setup: () => installFilePicker(provider) };
+}
+/** Give every open document's annotation plugin the provider, for as long as the viewer lives. */
+function installFilePicker(provider) {
+    const host = injectKernelHost('withFilePicker()');
+    if (!host.provides(AnnotationToken)) {
+        devWarn('file-picker-without-annotation', 'withFilePicker() has no annotation plugin to give its file dialog to. Add withAnnotation() to provideEmbedPdf().');
+        return;
+    }
+    // One install per document's plugin, removed when the document closes.
+    const installed = new Map();
+    // On every change of the kernel, not in an effect: a document is given the provider in the
+    // same change that makes it ready, before anyone can click with a stamp tool.
+    const follow = () => {
+        const kernel = host.kernel();
+        if (!kernel)
+            return;
+        const open = new Set();
+        for (const document of kernel.documents.list()) {
+            const annotation = kernel.tryCapability(AnnotationToken, document.id);
+            if (!annotation)
+                continue;
+            open.add(annotation);
+            if (!installed.has(annotation)) {
+                installed.set(annotation, annotation.setFilePickerProvider(provider));
+            }
+        }
+        for (const [annotation, remove] of installed) {
+            if (open.has(annotation))
+                continue;
+            remove();
+            installed.delete(annotation);
+        }
+    };
+    const stop = host.subscribe(follow);
+    follow();
+    inject(DestroyRef).onDestroy(() => {
+        stop();
+        for (const remove of installed.values())
+            remove();
+        installed.clear();
+    });
+}
+
+/**
+ * What the annotation layer's parts read about their page: the plugin's host side for the page's
+ * own document, and the page's view as signals that change only when what they hold does. A
+ * Stage hands every page a new transform on every frame, also during a plain scroll, which moves
+ * the page but changes nothing inside it; these keep a scroll from redrawing the annotations.
+ */
+/**
+ * The annotation plugin's host side (the reads only framework code has: items, chrome, text
+ * boxes), for the document the page belongs to. Call it in an injection context.
+ */
+function annotationHostOf(page, what) {
+    return new CapabilityBinding(injectKernelHost(what), () => AnnotationToken$1, () => page.documentId);
+}
+/**
+ * The page's zoom and turn, for the plugin's reads: it projects what keeps its size or stays
+ * upright on screen (`noZoom`, `noRotate`). `zoom`, not `viewScale`: 1 is the page's 100%.
+ */
+function pageViewOf(page) {
+    return computed(() => {
+        const transform = page.transform();
+        return { zoom: transform.zoom, rotation: transform.rotation };
+    }, { equal: (left, right) => left.zoom === right.zoom && left.rotation === right.rotation });
+}
+/** The page's transform for placing things in its pixels: the same while only a scroll moves it. */
+function pagePixelsOf(page) {
+    return computed(() => page.transform(), { equal: samePagePlacement });
+}
+
+/**
+ * The selection chrome's settings, for the parts that paint it: the plugin's `chrome` settings
+ * and the viewer's accent, which a chrome color left `null` follows. Settings belong to the
+ * plugin, not to a document, so they read before any document opens.
+ */
+/** The chrome settings and the accent, as signals. Call it in an injection context. */
+function injectChromeSettings() {
+    const host = injectKernelHost('<epdf-annotation-layer>');
+    // Without the plugin there is nothing to paint; the defaults keep the reads simple.
+    const settings = host.provides(AnnotationToken)
+        ? host.settingsOf(AnnotationToken).current
+        : computed(() => ANNOTATION_DEFAULTS);
+    return {
+        chrome: computed(() => settings().chrome),
+        accent: computed(() => host.viewerSettings().accent),
+    };
+}
+
+/**
+ * The selection's chrome on one page: its outline, handles and rotation handle, the guides of a
+ * snapped move or a turn, and the box dragged to select. The plugin lists the chrome in page
+ * points, already sized for the page's zoom; `@embedpdf/web` puts it in the layer's pixels and
+ * paints it from the `chrome` settings, each color, width and dash behind its
+ * `--epdf-annotation-*` variable. This component only draws: the viewer decides where a handle
+ * can be grabbed, so handles drawn by the app's templates can't break dragging.
+ *
+ * Paint goes in `style`: an SVG attribute doesn't read `var()`.
+ */
+const NO_NODES = Object.freeze([]);
+class EpdfAnnotationChrome {
+    /** The app's handle template, drawn in place of the layer's handles. */
+    handle = input(null, ...(ngDevMode ? [{ debugName: "handle" }] : []));
+    /** The app's rotation handle template, drawn in place of the layer's. */
+    rotationHandle = input(null, ...(ngDevMode ? [{ debugName: "rotationHandle" }] : []));
+    page = injectPage('<epdf-annotation-layer>');
+    annotation = annotationHostOf(this.page, '<epdf-annotation-layer>');
+    pixels = pagePixelsOf(this.page);
+    settings = injectChromeSettings();
+    chrome = computed(() => this.settings.chrome(), ...(ngDevMode ? [{ debugName: "chrome" }] : []));
+    paint = computed(() => annotationChromePaint(this.settings.chrome(), this.settings.accent()), ...(ngDevMode ? [{ debugName: "paint" }] : []));
+    // The page's view scale turns the screen-pixel chrome settings into page units inside the
+    // plugin (the rotation handle's offset, the grab zones): the same size on screen at every
+    // zoom. What it lists comes back in page points; `chromeInPixels` places it.
+    listed = this.annotation.select((annotation) => {
+        const transform = this.pixels();
+        return annotation.listChromeNodes(this.page.ref, transform.viewScale, transform.rotation, transform.zoom);
+    }, NO_NODES);
+    nodes = computed(() => {
+        const handle = this.handle();
+        const rotationHandle = this.rotationHandle();
+        const chrome = this.settings.chrome();
+        return chromeInPixels(this.listed(), this.pixels()).map((node) => {
+            if (node.kind === 'handle' && handle) {
+                const custom = {
+                    at: node.at,
+                    size: chrome.handles.size,
+                    rotation: node.rotation,
+                    kind: node.role,
+                    active: node.active,
+                };
+                return { ...node, custom };
+            }
+            if (node.kind === 'rotation-handle' && rotationHandle) {
+                // A drawn rotation handle doesn't turn, and isn't told when it's dragged.
+                const custom = {
+                    at: node.at,
+                    from: node.from,
+                    size: chrome.rotationHandle.size,
+                    rotation: 0,
+                    active: false,
+                };
+                return { ...node, custom };
+            }
+            return node;
+        });
+    }, ...(ngDevMode ? [{ debugName: "nodes" }] : []));
+    hasCustom = computed(() => this.nodes().some((node) => node.custom), ...(ngDevMode ? [{ debugName: "hasCustom" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfAnnotationChrome, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: EpdfAnnotationChrome, isStandalone: true, selector: "epdf-annotation-chrome", inputs: { handle: { classPropertyName: "handle", publicName: "handle", isSignal: true, isRequired: false, transformFunction: null }, rotationHandle: { classPropertyName: "rotationHandle", publicName: "rotationHandle", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: contents" }, ngImport: i0, template: `
+    <svg style="position: absolute; inset: 0; overflow: visible; pointer-events: none">
+      @for (node of nodes(); track $index) {
+        @switch (node.kind) {
+          @case ('handle') {
+            @if (node.kind === 'handle' && !node.custom) {
+              @if (chrome().handles.shape === 'circle') {
+                <svg:circle
+                  [attr.cx]="node.at.x"
+                  [attr.cy]="node.at.y"
+                  [attr.r]="chrome().handles.size / 2"
+                  stroke-width="1.5"
+                  [style.fill]="paint().handle.fill"
+                  [style.stroke]="paint().handle.stroke"
+                ></svg:circle>
+              } @else {
+                <!-- The square rides a turned box: it spins about itself. -->
+                <svg:rect
+                  [attr.x]="node.at.x - chrome().handles.size / 2"
+                  [attr.y]="node.at.y - chrome().handles.size / 2"
+                  [attr.width]="chrome().handles.size"
+                  [attr.height]="chrome().handles.size"
+                  [attr.transform]="
+                    node.rotation ? 'rotate(' + node.rotation + ' ' + node.at.x + ' ' + node.at.y + ')' : null
+                  "
+                  stroke-width="1.5"
+                  [style.fill]="paint().handle.fill"
+                  [style.stroke]="paint().handle.stroke"
+                ></svg:rect>
+              }
+            }
+          }
+          @case ('guide') {
+            @if (node.kind === 'guide') {
+              <svg:line
+                [attr.x1]="node.from.x"
+                [attr.y1]="node.from.y"
+                [attr.x2]="node.to.x"
+                [attr.y2]="node.to.y"
+                shape-rendering="crispEdges"
+                [style.stroke]="paint().guide.stroke"
+                [style.stroke-width]="paint().guide.strokeWidth"
+                [style.stroke-dasharray]="paint().guide.strokeDasharray"
+              ></svg:line>
+            }
+          }
+          @case ('turned-outline') {
+            @if (node.kind === 'turned-outline') {
+              <svg:polygon
+                [attr.points]="node.points"
+                fill="none"
+                [style.stroke]="paint().outline.stroke"
+                [style.stroke-width]="paint().outline.strokeWidth"
+                [style.stroke-dasharray]="paint().outline.strokeDasharray"
+              ></svg:polygon>
+            }
+          }
+          @case ('rotation-guides') {
+            @if (node.kind === 'rotation-guides') {
+              <svg:g>
+                @for (line of node.lines; track $index) {
+                  <svg:line
+                    [attr.x1]="line.from.x"
+                    [attr.y1]="line.from.y"
+                    [attr.x2]="line.to.x"
+                    [attr.y2]="line.to.y"
+                    [attr.opacity]="line.opacity"
+                    [style.stroke]="paint().rotationGuide.stroke"
+                    [style.stroke-width]="paint().rotationGuide.strokeWidth"
+                    [style.stroke-dasharray]="paint().rotationGuide.strokeDasharray"
+                  ></svg:line>
+                }
+              </svg:g>
+            }
+          }
+          @case ('rotation-handle') {
+            @if (node.kind === 'rotation-handle' && !node.custom) {
+              <svg:g>
+                @if (chrome().rotationHandle.stalk) {
+                  <svg:line
+                    [attr.x1]="node.from.x"
+                    [attr.y1]="node.from.y"
+                    [attr.x2]="node.at.x"
+                    [attr.y2]="node.at.y"
+                    stroke-width="1"
+                    [style.stroke]="paint().rotationHandle.stroke"
+                  ></svg:line>
+                }
+                <svg:circle
+                  [attr.cx]="node.at.x"
+                  [attr.cy]="node.at.y"
+                  [attr.r]="chrome().rotationHandle.size / 2"
+                  stroke-width="1.5"
+                  [style.fill]="paint().rotationHandle.fill"
+                  [style.stroke]="paint().rotationHandle.stroke"
+                ></svg:circle>
+              </svg:g>
+            }
+          }
+          <!-- The box dragged to select keeps its own look (a see-through accent fill, always
+               dashed); the selection outline follows the settings. -->
+          @case ('marquee') {
+            @if (node.kind === 'marquee') {
+              <svg:rect
+                [attr.x]="node.box.left"
+                [attr.y]="node.box.top"
+                [attr.width]="node.box.width"
+                [attr.height]="node.box.height"
+                stroke-width="1"
+                stroke-dasharray="4 3"
+                [style.fill]="paint().marquee.fill"
+                [style.stroke]="paint().marquee.stroke"
+              ></svg:rect>
+            }
+          }
+          @case ('outline') {
+            @if (node.kind === 'outline') {
+              <svg:rect
+                [attr.x]="node.box.left"
+                [attr.y]="node.box.top"
+                [attr.width]="node.box.width"
+                [attr.height]="node.box.height"
+                fill="none"
+                [style.stroke]="paint().outline.stroke"
+                [style.stroke-width]="paint().outline.strokeWidth"
+                [style.stroke-dasharray]="paint().outline.strokeDasharray"
+              ></svg:rect>
+            }
+          }
+        }
+      }
+    </svg>
+    <!-- The app's own handles draw as HTML over the page; the layer's as SVG. -->
+    @if (hasCustom()) {
+      <div style="position: absolute; inset: 0; pointer-events: none">
+        @for (node of nodes(); track $index) {
+          @if (node.custom; as props) {
+            @if (node.kind === 'handle') {
+              <ng-container
+                [ngTemplateOutlet]="handle()"
+                [ngTemplateOutletContext]="{ $implicit: props }"
+              />
+            } @else {
+              <ng-container
+                [ngTemplateOutlet]="rotationHandle()"
+                [ngTemplateOutletContext]="{ $implicit: props }"
+              />
+            }
+          }
+        }
+      </div>
+    }
+  `, 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: EpdfAnnotationChrome, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'epdf-annotation-chrome',
+                    imports: [NgTemplateOutlet],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { style: 'display: contents' },
+                    template: `
+    <svg style="position: absolute; inset: 0; overflow: visible; pointer-events: none">
+      @for (node of nodes(); track $index) {
+        @switch (node.kind) {
+          @case ('handle') {
+            @if (node.kind === 'handle' && !node.custom) {
+              @if (chrome().handles.shape === 'circle') {
+                <svg:circle
+                  [attr.cx]="node.at.x"
+                  [attr.cy]="node.at.y"
+                  [attr.r]="chrome().handles.size / 2"
+                  stroke-width="1.5"
+                  [style.fill]="paint().handle.fill"
+                  [style.stroke]="paint().handle.stroke"
+                ></svg:circle>
+              } @else {
+                <!-- The square rides a turned box: it spins about itself. -->
+                <svg:rect
+                  [attr.x]="node.at.x - chrome().handles.size / 2"
+                  [attr.y]="node.at.y - chrome().handles.size / 2"
+                  [attr.width]="chrome().handles.size"
+                  [attr.height]="chrome().handles.size"
+                  [attr.transform]="
+                    node.rotation ? 'rotate(' + node.rotation + ' ' + node.at.x + ' ' + node.at.y + ')' : null
+                  "
+                  stroke-width="1.5"
+                  [style.fill]="paint().handle.fill"
+                  [style.stroke]="paint().handle.stroke"
+                ></svg:rect>
+              }
+            }
+          }
+          @case ('guide') {
+            @if (node.kind === 'guide') {
+              <svg:line
+                [attr.x1]="node.from.x"
+                [attr.y1]="node.from.y"
+                [attr.x2]="node.to.x"
+                [attr.y2]="node.to.y"
+                shape-rendering="crispEdges"
+                [style.stroke]="paint().guide.stroke"
+                [style.stroke-width]="paint().guide.strokeWidth"
+                [style.stroke-dasharray]="paint().guide.strokeDasharray"
+              ></svg:line>
+            }
+          }
+          @case ('turned-outline') {
+            @if (node.kind === 'turned-outline') {
+              <svg:polygon
+                [attr.points]="node.points"
+                fill="none"
+                [style.stroke]="paint().outline.stroke"
+                [style.stroke-width]="paint().outline.strokeWidth"
+                [style.stroke-dasharray]="paint().outline.strokeDasharray"
+              ></svg:polygon>
+            }
+          }
+          @case ('rotation-guides') {
+            @if (node.kind === 'rotation-guides') {
+              <svg:g>
+                @for (line of node.lines; track $index) {
+                  <svg:line
+                    [attr.x1]="line.from.x"
+                    [attr.y1]="line.from.y"
+                    [attr.x2]="line.to.x"
+                    [attr.y2]="line.to.y"
+                    [attr.opacity]="line.opacity"
+                    [style.stroke]="paint().rotationGuide.stroke"
+                    [style.stroke-width]="paint().rotationGuide.strokeWidth"
+                    [style.stroke-dasharray]="paint().rotationGuide.strokeDasharray"
+                  ></svg:line>
+                }
+              </svg:g>
+            }
+          }
+          @case ('rotation-handle') {
+            @if (node.kind === 'rotation-handle' && !node.custom) {
+              <svg:g>
+                @if (chrome().rotationHandle.stalk) {
+                  <svg:line
+                    [attr.x1]="node.from.x"
+                    [attr.y1]="node.from.y"
+                    [attr.x2]="node.at.x"
+                    [attr.y2]="node.at.y"
+                    stroke-width="1"
+                    [style.stroke]="paint().rotationHandle.stroke"
+                  ></svg:line>
+                }
+                <svg:circle
+                  [attr.cx]="node.at.x"
+                  [attr.cy]="node.at.y"
+                  [attr.r]="chrome().rotationHandle.size / 2"
+                  stroke-width="1.5"
+                  [style.fill]="paint().rotationHandle.fill"
+                  [style.stroke]="paint().rotationHandle.stroke"
+                ></svg:circle>
+              </svg:g>
+            }
+          }
+          <!-- The box dragged to select keeps its own look (a see-through accent fill, always
+               dashed); the selection outline follows the settings. -->
+          @case ('marquee') {
+            @if (node.kind === 'marquee') {
+              <svg:rect
+                [attr.x]="node.box.left"
+                [attr.y]="node.box.top"
+                [attr.width]="node.box.width"
+                [attr.height]="node.box.height"
+                stroke-width="1"
+                stroke-dasharray="4 3"
+                [style.fill]="paint().marquee.fill"
+                [style.stroke]="paint().marquee.stroke"
+              ></svg:rect>
+            }
+          }
+          @case ('outline') {
+            @if (node.kind === 'outline') {
+              <svg:rect
+                [attr.x]="node.box.left"
+                [attr.y]="node.box.top"
+                [attr.width]="node.box.width"
+                [attr.height]="node.box.height"
+                fill="none"
+                [style.stroke]="paint().outline.stroke"
+                [style.stroke-width]="paint().outline.strokeWidth"
+                [style.stroke-dasharray]="paint().outline.strokeDasharray"
+              ></svg:rect>
+            }
+          }
+        }
+      }
+    </svg>
+    <!-- The app's own handles draw as HTML over the page; the layer's as SVG. -->
+    @if (hasCustom()) {
+      <div style="position: absolute; inset: 0; pointer-events: none">
+        @for (node of nodes(); track $index) {
+          @if (node.custom; as props) {
+            @if (node.kind === 'handle') {
+              <ng-container
+                [ngTemplateOutlet]="handle()"
+                [ngTemplateOutletContext]="{ $implicit: props }"
+              />
+            } @else {
+              <ng-container
+                [ngTemplateOutlet]="rotationHandle()"
+                [ngTemplateOutletContext]="{ $implicit: props }"
+              />
+            }
+          }
+        }
+      </div>
+    }
+  `,
+                }]
+        }] });
+
+/**
+ * How the layer draws one annotation, the parts its template is built from:
+ *
+ *   [epdfAnnotationFrame]      the box an annotation draws into, placed and turned like it
+ *   <epdf-annotation-native>   its own drawing in that box: the engine's picture or its scene
+ *
+ * No bounds math and no per-kind logic: the core computes each item's frame, box and scene,
+ * and `@embedpdf/web` turns them into pixels and SVG elements, the same for every framework.
+ */
+/**
+ * The box an annotation draws into, in the page layer: placed, sized and turned like the
+ * annotation (`item.frame`), inside the page layer that the page itself turns. Its blend is on
+ * the box: a turned box groups what is in it, so blending an element inside would stop
+ * blending with the page. It takes the pointer only for a look that does (`interactive`), and
+ * `inert` keeps the pointer and the focus out of a look that only draws.
+ */
+class EpdfAnnotationFrame {
+    frame = input.required(...(ngDevMode ? [{ debugName: "frame", alias: 'epdfAnnotationFrame' }] : [{ alias: 'epdfAnnotationFrame' }]));
+    blend = input(undefined, ...(ngDevMode ? [{ debugName: "blend", alias: 'frameBlend' }] : [{ alias: 'frameBlend' }]));
+    interactive = input(false, ...(ngDevMode ? [{ debugName: "interactive", alias: 'frameInteractive' }] : [{ alias: 'frameInteractive' }]));
+    inert = input(false, ...(ngDevMode ? [{ debugName: "inert", alias: 'frameInert' }] : [{ alias: 'frameInert' }]));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfAnnotationFrame, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.4", type: EpdfAnnotationFrame, isStandalone: true, selector: "[epdfAnnotationFrame]", inputs: { frame: { classPropertyName: "frame", publicName: "epdfAnnotationFrame", isSignal: true, isRequired: true, transformFunction: null }, blend: { classPropertyName: "blend", publicName: "frameBlend", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "frameInteractive", isSignal: true, isRequired: false, transformFunction: null }, inert: { classPropertyName: "inert", publicName: "frameInert", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.left.px": "frame().left", "style.top.px": "frame().top", "style.width.px": "frame().width", "style.height.px": "frame().height", "style.transform": "frame().transform ?? null", "style.mix-blend-mode": "blend() ?? null", "style.pointer-events": "interactive() ? 'auto' : 'none'", "attr.inert": "inert() ? '' : null" }, styleAttribute: "position: absolute; transform-origin: center" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfAnnotationFrame, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[epdfAnnotationFrame]',
+                    host: {
+                        style: 'position: absolute; transform-origin: center',
+                        '[style.left.px]': 'frame().left',
+                        '[style.top.px]': 'frame().top',
+                        '[style.width.px]': 'frame().width',
+                        '[style.height.px]': 'frame().height',
+                        '[style.transform]': 'frame().transform ?? null',
+                        '[style.mix-blend-mode]': 'blend() ?? null',
+                        // An interactive look takes the pointer: the layer's own `none` ends here.
+                        '[style.pointer-events]': "interactive() ? 'auto' : 'none'",
+                        '[attr.inert]': "inert() ? '' : null",
+                    },
+                }]
+        }] });
+/**
+ * The scene, filling the item's frame: drawn upright in it, the frame turns it. Nothing until
+ * the item has area (the 0×0 drawing at a press). The SVG and its viewBox stay proportional:
+ * never clamp either one.
+ */
+class EpdfAnnotationScene {
+    item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
+    viewBox = computed(() => sceneViewBox(this.item().box), ...(ngDevMode ? [{ debugName: "viewBox" }] : []));
+    shapes = computed(() => svgShapesOf(scene(this.item()), { miterLimit: MITER_LIMIT }), ...(ngDevMode ? [{ debugName: "shapes" }] : []));
+    /** A ghost is see-through as a whole, so its fill and stroke don't stack. */
+    opacity = computed(() => {
+        const item = this.item();
+        return item.source === 'ghost' ? ghostOpacity(item.ghostOpacity ?? 0.5) : null;
+    }, ...(ngDevMode ? [{ debugName: "opacity" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfAnnotationScene, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: EpdfAnnotationScene, isStandalone: true, selector: "epdf-annotation-scene", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, host: { styleAttribute: "display: contents" }, ngImport: i0, template: `
+    @if (viewBox(); as viewBox) {
+      <svg
+        style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none"
+        [attr.viewBox]="viewBox"
+        [style.opacity]="opacity()"
+      >
+        <svg:g [epdfSvgShapes]="shapes()"></svg:g>
+      </svg>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: EpdfSvgShapes, selector: "g[epdfSvgShapes]", inputs: ["epdfSvgShapes"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfAnnotationScene, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'epdf-annotation-scene',
+                    imports: [EpdfSvgShapes],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { style: 'display: contents' },
+                    template: `
+    @if (viewBox(); as viewBox) {
+      <svg
+        style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none"
+        [attr.viewBox]="viewBox"
+        [style.opacity]="opacity()"
+      >
+        <svg:g [epdfSvgShapes]="shapes()"></svg:g>
+      </svg>
+    }
+  `,
+                }]
+        }] });
+/**
+ * An annotation's own drawing, filling its frame: the engine's picture where the core places it
+ * (following a move as it happens), or its scene, as the layer's one rule picks (`shows`,
+ * `pictureOrPainting`).
+ */
+class EpdfAnnotationNative {
+    item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
+    /** What it shows: the engine's picture, its scene, or nothing yet. */
+    shows = input(null, ...(ngDevMode ? [{ debugName: "shows" }] : []));
+    picture = computed(() => {
+        const shows = this.shows();
+        return shows?.kind === 'picture' ? shows.picture.url : null;
+    }, ...(ngDevMode ? [{ debugName: "picture" }] : []));
+    raster = computed(() => {
+        const item = this.item();
+        return item.raster ? rasterInFrame(item.raster, item.frame) : null;
+    }, ...(ngDevMode ? [{ debugName: "raster" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfAnnotationNative, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: EpdfAnnotationNative, isStandalone: true, selector: "epdf-annotation-native", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, shows: { classPropertyName: "shows", publicName: "shows", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: contents" }, ngImport: i0, template: `
+    @if (shows()?.kind === 'painting') {
+      <epdf-annotation-scene [item]="item()" />
+    } @else if (picture() && raster(); as box) {
+      <!-- An explicit size, never clamped by a global img reset (a landscape stamp on a
+           turned page is wider than its containing block); the turn the engine took out
+           of the picture goes back on about its middle. -->
+      <img
+        alt=""
+        draggable="false"
+        style="position: absolute; max-width: none; max-height: none; pointer-events: none; transform-origin: center"
+        [attr.src]="picture()"
+        [style.left]="box.left"
+        [style.top]="box.top"
+        [style.width]="box.width"
+        [style.height]="box.height"
+        [style.transform]="box.transform ?? null"
+      />
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: EpdfAnnotationScene, selector: "epdf-annotation-scene", inputs: ["item"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfAnnotationNative, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'epdf-annotation-native',
+                    imports: [EpdfAnnotationScene],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { style: 'display: contents' },
+                    template: `
+    @if (shows()?.kind === 'painting') {
+      <epdf-annotation-scene [item]="item()" />
+    } @else if (picture() && raster(); as box) {
+      <!-- An explicit size, never clamped by a global img reset (a landscape stamp on a
+           turned page is wider than its containing block); the turn the engine took out
+           of the picture goes back on about its middle. -->
+      <img
+        alt=""
+        draggable="false"
+        style="position: absolute; max-width: none; max-height: none; pointer-events: none; transform-origin: center"
+        [attr.src]="picture()"
+        [style.left]="box.left"
+        [style.top]="box.top"
+        [style.width]="box.width"
+        [style.height]="box.height"
+        [style.transform]="box.transform ?? null"
+      />
+    }
+  `,
+                }]
+        }] });
+
+/**
+ * The templates `<epdf-annotation-layer>` draws with, in place of React's `renderers` and
+ * `components` props:
+ *
+ *   <epdf-annotation-layer>
+ *     <ng-template [epdfAnnotation]="isNote" let-annotation let-frame="frame">…   your look
+ *     <ng-template epdfHandle let-handle>…                                         your handles
+ *     <ng-template epdfRotationHandle let-handle>…                                 your rotation handle
+ *   </epdf-annotation-layer>
+ *
+ * A look (`epdfAnnotation`) is a renderer: which annotations it draws (a function of the
+ * annotation, or a subtype such as `'stamp'`), whether it takes the pointer
+ * (`epdfAnnotationInteractive`) and whether the layer scales it with the page
+ * (`epdfAnnotationScale`). The first look that matches an annotation draws it.
+ *
+ * Which drawing each annotation gets, and the behaviors an interactive look registers, are
+ * `@embedpdf/web`'s, keyed by the identity of each renderer entry. The page template, and with it
+ * every template inside it, is made once per page on screen, so the entries here are interned:
+ * the same rule (the same function or subtype, the same options) is the same entry on every
+ * page, registered once.
+ */
+const subtypeMatchers = new Map();
+const ALWAYS = {};
+const NEVER = {};
+const SCALED = {};
+const UNSCALED = {};
+const looks = new WeakMap();
+const behaviors = new Map();
+/** A table under `key` in `table`, made on first use. */
+function tableIn(table, key, make) {
+    let found = table.get(key);
+    if (!found)
+        table.set(key, (found = make()));
+    return found;
+}
+/** The one entry for a look's rule: the same match, interactivity and scaling give the same object. */
+function lookRendererOf(match, interactive, scale) {
+    let matcher;
+    if (typeof match === 'function') {
+        matcher = match;
+    }
+    else {
+        matcher = subtypeMatchers.get(match) ?? ((annotation) => annotation.subtype === match);
+        subtypeMatchers.set(match, matcher);
+    }
+    const interactiveKey = typeof interactive === 'function' ? interactive : interactive ? ALWAYS : NEVER;
+    const byInteractive = tableIn(looks, matcher, () => new WeakMap());
+    const byScale = tableIn(byInteractive, interactiveKey, () => new WeakMap());
+    return tableIn(byScale, scale ? SCALED : UNSCALED, () => Object.freeze({ for: matcher, interactive, scale }));
+}
+/** `epdfAnnotationInteractive` with no value (`<ng-template … epdfAnnotationInteractive>`) is `true`. */
+function interactiveAttribute(value) {
+    if (typeof value === 'function')
+        return value;
+    return value === '' || value === true || value === 'true';
+}
+// ── the marker directives ────────────────────────────────────────────────────
+/**
+ * Your own look for some annotations: `<ng-template [epdfAnnotation]="isNote" let-annotation>`.
+ * Give it a function that picks annotations by any field, or a subtype
+ * (`epdfAnnotation="stamp"`). Without `epdfAnnotationInteractive` it only draws: the layer keeps
+ * handling the pointer (select, move, resize). With it (or a function the layer asks whenever it
+ * matters) your template takes the pointer, and the annotation can't be selected or moved while
+ * it does. `[epdfAnnotationScale]="false"` draws at the size on screen instead of the
+ * annotation's 100% size.
+ */
+class EpdfAnnotationTemplate {
+    /**
+     * Which annotations it draws: a function of the annotation, or a subtype. (Not a required
+     * input: a template inside `@if` is in the layer's query a moment before its inputs are set.)
+     */
+    match = input(undefined, ...(ngDevMode ? [{ debugName: "match", alias: 'epdfAnnotation' }] : [{ alias: 'epdfAnnotation' }]));
+    /** Whether it takes the pointer: present (or `true`), or a function of `{ annotation, toolId }`. */
+    interactive = input(false, ...(ngDevMode ? [{ debugName: "interactive", alias: 'epdfAnnotationInteractive', transform: interactiveAttribute }] : [{ alias: 'epdfAnnotationInteractive', transform: interactiveAttribute }]));
+    /** Scale what you draw with the page (the default), or draw at the size on screen (`false`). */
+    scale = input(true, ...(ngDevMode ? [{ debugName: "scale", alias: 'epdfAnnotationScale', transform: booleanAttribute }] : [{ alias: 'epdfAnnotationScale', transform: booleanAttribute }]));
+    template = inject(TemplateRef);
+    /** Its renderer entry, the same object on every page for the same rule; null until it has one. */
+    renderer = computed(() => {
+        const match = this.match();
+        return match ? lookRendererOf(match, this.interactive(), this.scale()) : null;
+    }, ...(ngDevMode ? [{ debugName: "renderer" }] : []));
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfAnnotationTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.4", type: EpdfAnnotationTemplate, isStandalone: true, selector: "ng-template[epdfAnnotation]", inputs: { match: { classPropertyName: "match", publicName: "epdfAnnotation", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "epdfAnnotationInteractive", isSignal: true, isRequired: false, transformFunction: null }, scale: { classPropertyName: "scale", publicName: "epdfAnnotationScale", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfAnnotationTemplate, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[epdfAnnotation]' }]
+        }] });
+/**
+ * What a sibling plugin's behavior owns, drawn by your template while the behavior is engaged:
+ * `<ng-template epdfAnnotationBehavior="form-fill" let-annotation let-item="item">`. The
+ * template places its own controls and takes the input.
+ */
+class EpdfAnnotationBehaviorTemplate {
+    /** The behavior's id, as its plugin registers it. */
+    behavior = input(undefined, ...(ngDevMode ? [{ debugName: "behavior", alias: 'epdfAnnotationBehavior' }] : [{ alias: 'epdfAnnotationBehavior' }]));
+    template = inject(TemplateRef);
+    /** Its renderer entry, the same object for the same behavior; null until it has one. */
+    renderer = computed(() => {
+        const behavior = this.behavior();
+        if (!behavior)
+            return null;
+        let entry = behaviors.get(behavior);
+        if (!entry)
+            behaviors.set(behavior, (entry = Object.freeze({ behavior })));
+        return entry;
+    }, ...(ngDevMode ? [{ debugName: "renderer" }] : []));
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfAnnotationBehaviorTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.4", type: EpdfAnnotationBehaviorTemplate, isStandalone: true, selector: "ng-template[epdfAnnotationBehavior]", inputs: { behavior: { classPropertyName: "behavior", publicName: "epdfAnnotationBehavior", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfAnnotationBehaviorTemplate, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[epdfAnnotationBehavior]' }]
+        }] });
+/**
+ * Each handle, drawn your way in place of the layer's: `<ng-template epdfHandle let-handle>`.
+ * The viewer still decides where a handle can be grabbed, so what you draw can't break dragging.
+ */
+class EpdfHandleTemplate {
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfHandleTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: EpdfHandleTemplate, isStandalone: true, selector: "ng-template[epdfHandle]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfHandleTemplate, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[epdfHandle]' }]
+        }] });
+/** The rotation handle, drawn your way: `<ng-template epdfRotationHandle let-handle>`. */
+class EpdfRotationHandleTemplate {
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfRotationHandleTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: EpdfRotationHandleTemplate, isStandalone: true, selector: "ng-template[epdfRotationHandle]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfRotationHandleTemplate, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[epdfRotationHandle]' }]
+        }] });
+/**
+ * The rotation badge's content, drawn your way: inside `<epdf-annotation-rotation-badge>`,
+ * `<ng-template epdfRotationBadge let-rotation>{{ rotation.angle }}°</ng-template>`.
+ */
+class EpdfRotationBadgeTemplate {
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfRotationBadgeTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: EpdfRotationBadgeTemplate, isStandalone: true, selector: "ng-template[epdfRotationBadge]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfRotationBadgeTemplate, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[epdfRotationBadge]' }]
+        }] });
+
+/**
+ * Free text boxes: the element someone types in. `@embedpdf/web`'s text box editor makes an
+ * element the editor of a text box (rich text, focus and `contentEditable` following the
+ * plugin's `editing`, presses kept inside), and its follower attaches again for another document
+ * and takes the box and the scale; this file binds the follower to signals.
+ *
+ *   [epdfFreeTextBox]       the layer's own text box, one per free text on the page (internal)
+ *   [epdfRichTextEditor]    your own element in a look you draw: it becomes the box's editor
+ *
+ * The editor owns the element's children: Angular puts none in it, and the element is never
+ * made again while someone types (the caret would jump).
+ */
+/**
+ * How much the layer scales the look around an element: 1 outside a look, or in one drawn at its
+ * size on screen. The layer provides it to each scaled look, so a rich text editor inside draws
+ * its text at the annotation's 100% size and lets the look's scale do the rest.
+ */
+const EPDF_LOOK_SCALE = new InjectionToken('EPDF_LOOK_SCALE');
+/**
+ * Make `element` the editor of the text box `item()` reads, at `scale()` pixels per point: the
+ * binding attaches when the plugin is there (again for another document), and redraws only
+ * when the text differs. Call it in an injection context; it lets go when the caller goes.
+ */
+function bindTextBoxEditor(element, annotation, item, scale) {
+    const follower = createTextBoxEditorFollower();
+    effect(() => {
+        const host = annotation();
+        const next = item();
+        const at = scale();
+        untracked(() => follower.follow(element, host, next, at));
+    });
+    inject(DestroyRef).onDestroy(() => follower.detach());
+}
+/**
+ * The layer's own text box for one free text: the engine's text plate (the box inset by its
+ * padding), styled like the box's body, with no padding of its own so its edge is the plate's.
+ * The box's fill and border are the vector scene's, under it. It takes the pointer only while
+ * someone types in it; otherwise clicks fall through to the shapes (select, move, resize).
+ */
+class EpdfFreeTextBox {
+    /** The text box, as the plugin lists it for the page. */
+    item = input.required(...(ngDevMode ? [{ debugName: "item", alias: 'epdfFreeTextBox' }] : [{ alias: 'epdfFreeTextBox' }]));
+    /** The outline color while someone types: the chrome's `textOutline`, painted. */
+    outline = input.required(...(ngDevMode ? [{ debugName: "outline" }] : []));
+    page = injectPage('[epdfFreeTextBox]');
+    pixels = pagePixelsOf(this.page);
+    plate = computed(() => textPlateInPixels(this.item(), this.pixels()), ...(ngDevMode ? [{ debugName: "plate" }] : []));
+    look = computed(() => textBoxStyleOf(this.item().css, this.plate().scale), ...(ngDevMode ? [{ debugName: "look" }] : []));
+    constructor() {
+        const annotation = annotationHostOf(this.page, '[epdfFreeTextBox]').capability;
+        bindTextBoxEditor(inject(ElementRef).nativeElement, annotation, this.item, computed(() => this.plate().scale));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfFreeTextBox, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.4", type: EpdfFreeTextBox, isStandalone: true, selector: "[epdfFreeTextBox]", inputs: { item: { classPropertyName: "item", publicName: "epdfFreeTextBox", isSignal: true, isRequired: true, transformFunction: null }, outline: { classPropertyName: "outline", publicName: "outline", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style.left.px": "plate().left", "style.top.px": "plate().top", "style.width.px": "plate().width", "style.height.px": "plate().height", "style.font-family": "look().fontFamily", "style.font-size": "look().fontSize", "style.color": "look().color", "style.font-weight": "look().fontWeight", "style.font-style": "look().fontStyle", "style.text-decoration": "look().textDecoration", "style.text-align": "look().textAlign", "style.overflow-y": "item().editing ? 'auto' : 'hidden'", "style.outline": "item().editing ? '1px solid ' + outline() : 'none'", "style.cursor": "item().editing ? 'text' : 'default'", "style.transform": "item().rot ? 'rotate(' + item().rot + 'deg)' : null", "style.pointer-events": "item().editing ? 'auto' : 'none'" }, styleAttribute: "position: absolute; box-sizing: border-box; background: transparent; white-space: pre-wrap; overflow-wrap: break-word; overflow-x: hidden; transform-origin: center" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfFreeTextBox, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[epdfFreeTextBox]',
+                    host: {
+                        style: 'position: absolute; box-sizing: border-box; background: transparent; ' +
+                            'white-space: pre-wrap; overflow-wrap: break-word; overflow-x: hidden; transform-origin: center',
+                        '[style.left.px]': 'plate().left',
+                        '[style.top.px]': 'plate().top',
+                        '[style.width.px]': 'plate().width',
+                        // Fixed to the plate: the box never grows with its text; it scrolls while typing and clips
+                        // otherwise, where the baked appearance clips.
+                        '[style.height.px]': 'plate().height',
+                        '[style.font-family]': 'look().fontFamily',
+                        '[style.font-size]': 'look().fontSize',
+                        '[style.color]': 'look().color',
+                        '[style.font-weight]': 'look().fontWeight',
+                        '[style.font-style]': 'look().fontStyle',
+                        '[style.text-decoration]': 'look().textDecoration',
+                        '[style.text-align]': 'look().textAlign',
+                        '[style.overflow-y]': "item().editing ? 'auto' : 'hidden'",
+                        '[style.outline]': "item().editing ? '1px solid ' + outline() : 'none'",
+                        '[style.cursor]': "item().editing ? 'text' : 'default'",
+                        // A plain text box turns about its centre, as the baked appearance does.
+                        '[style.transform]': "item().rot ? 'rotate(' + item().rot + 'deg)' : null",
+                        '[style.pointer-events]': "item().editing ? 'auto' : 'none'",
+                    },
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * Your own element as the editor of a text box you draw yourself, in a look
+ * (`<ng-template [epdfAnnotation]="isTextBox" let-annotation>`):
+ *
+ *   <div [epdfRichTextEditor]="annotation" #editor="epdfRichTextEditor"
+ *        class="text-box" [class.editing]="editor.editing()"></div>
+ *
+ * It draws the runs, turns typing back into runs, keeps the caret when the style changes, and
+ * handles pasting, input methods and the format shortcuts; `text.toggleFormat()` and
+ * `selection.update()` work on it as on the layer's own box. It gives the element the box's
+ * body style (font, size, color and alignment), and while someone types it takes the pointer.
+ * Leave the element empty: the editor fills it.
+ */
+class EpdfRichTextEditor {
+    /** The free text annotation this element edits: the template's `let-annotation`. */
+    annotation = input.required(...(ngDevMode ? [{ debugName: "annotation", alias: 'epdfRichTextEditor' }] : [{ alias: 'epdfRichTextEditor' }]));
+    page = injectPage('[epdfRichTextEditor]');
+    host = annotationHostOf(this.page, '[epdfRichTextEditor]');
+    lookScale = inject(EPDF_LOOK_SCALE, { optional: true });
+    view = pageViewOf(this.page);
+    pixels = pagePixelsOf(this.page);
+    /** The annotation's text box on the page, or null while there is none. */
+    item = this.host.select((annotation) => {
+        const key = annotationKey(this.annotation().ref);
+        return (annotation
+            .listTextItems(this.page.ref, this.view())
+            .find((text) => text.ref !== null && annotationKey(text.ref) === key) ?? null);
+    }, null);
+    /** Pixels per point where the element is: in a scaled look, at the annotation's 100% size. */
+    scale = computed(() => textBoxEditorScaleOf(this.item(), this.pixels(), this.lookScale?.() ?? 1), ...(ngDevMode ? [{ debugName: "scale" }] : []));
+    /** The box's body style: font, size, color and alignment, or null while there is no box. */
+    look = computed(() => {
+        const item = this.item();
+        return item ? textBoxStyleOf(item.css, this.scale()) : null;
+    }, ...(ngDevMode ? [{ debugName: "look" }] : []));
+    /** True while someone types in the box. */
+    editing = computed(() => this.item()?.editing ?? false, ...(ngDevMode ? [{ debugName: "editing" }] : []));
+    constructor() {
+        bindTextBoxEditor(inject(ElementRef).nativeElement, this.host.capability, this.item, this.scale);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfRichTextEditor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.4", type: EpdfRichTextEditor, isStandalone: true, selector: "[epdfRichTextEditor]", inputs: { annotation: { classPropertyName: "annotation", publicName: "epdfRichTextEditor", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style.font-family": "look()?.fontFamily ?? null", "style.font-size": "look()?.fontSize ?? null", "style.color": "look()?.color ?? null", "style.font-weight": "look()?.fontWeight ?? null", "style.font-style": "look()?.fontStyle ?? null", "style.text-decoration": "look()?.textDecoration ?? null", "style.text-align": "look()?.textAlign ?? null", "style.pointer-events": "editing() ? 'auto' : null" } }, exportAs: ["epdfRichTextEditor"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfRichTextEditor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[epdfRichTextEditor]',
+                    exportAs: 'epdfRichTextEditor',
+                    host: {
+                        '[style.font-family]': 'look()?.fontFamily ?? null',
+                        '[style.font-size]': 'look()?.fontSize ?? null',
+                        '[style.color]': 'look()?.color ?? null',
+                        '[style.font-weight]': 'look()?.fontWeight ?? null',
+                        '[style.font-style]': 'look()?.fontStyle ?? null',
+                        '[style.text-decoration]': 'look()?.textDecoration ?? null',
+                        '[style.text-align]': 'look()?.textAlign ?? null',
+                        // While typing, the element takes the pointer (the caret, a drag over words).
+                        '[style.pointer-events]': "editing() ? 'auto' : null",
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * `<epdf-annotation-layer>`: a page's annotations, the selection's outline and handles, the
+ * tool's preview, and the text boxes being typed in. Put it in each page, above the rendered
+ * page; while it's there, the render layer leaves the annotations out of the page's picture:
+ *
+ *   <ng-template epdfPage>
+ *     <epdf-render-layer />
+ *     <epdf-annotation-layer />
+ *   </ng-template>
+ *
+ * Pure paint: it reads the plugin's items and chrome for the page and draws them. The pointer
+ * reaches the plugin through the interaction hub (the Stage forwards it), and so does the
+ * cursor. Each annotation is one drawing: its vector scene, the engine's baked picture, or a
+ * look of yours from an `<ng-template [epdfAnnotation]>` inside the layer, which may keep the
+ * layer's own drawing (`native`) and add to it. `<ng-template epdfHandle>` and
+ * `<ng-template epdfRotationHandle>` draw the handles your way.
+ *
+ * What isn't Angular is `@embedpdf/web`'s, the same for every framework: which drawing each
+ * annotation gets and the behaviors interactive looks register, the frames and chrome in
+ * pixels, the scene as SVG elements, the text box editor, and the object URLs of baked pictures
+ * and the stamp ghost.
+ */
+const NO_ITEMS = Object.freeze([]);
+const NO_TEXTS = Object.freeze([]);
+class EpdfAnnotationLayer {
+    page = injectPage('<epdf-annotation-layer>');
+    injector = inject(Injector);
+    annotation = annotationHostOf(this.page, '<epdf-annotation-layer>');
+    interaction = new CapabilityBinding(injectKernelHost('<epdf-annotation-layer>'), () => InteractionToken, () => this.page.documentId);
+    render = new CapabilityBinding(injectKernelHost('<epdf-annotation-layer>'), () => RenderToken, () => this.page.documentId);
+    chrome = injectChromeSettings();
+    // ── your templates ───────────────────────────────────────────────────────────
+    looks = contentChildren(EpdfAnnotationTemplate, ...(ngDevMode ? [{ debugName: "looks", descendants: true }] : [{ descendants: true }]));
+    behaviors = contentChildren(EpdfAnnotationBehaviorTemplate, ...(ngDevMode ? [{ debugName: "behaviors", descendants: true }] : [{
+            descendants: true,
+        }]));
+    handleTemplate = contentChild(EpdfHandleTemplate, ...(ngDevMode ? [{ debugName: "handleTemplate", descendants: true }] : [{ descendants: true }]));
+    rotationHandleTemplate = contentChild(EpdfRotationHandleTemplate, ...(ngDevMode ? [{ debugName: "rotationHandleTemplate", descendants: true }] : [{
+            descendants: true,
+        }]));
+    /**
+     * The renderer entries, in the order the templates are written: the first look that matches
+     * wins. The same array while every entry stays the same.
+     */
+    renderers = computed(() => [
+        ...this.behaviors().map((template) => template.renderer()),
+        ...this.looks().map((template) => template.renderer()),
+    ].filter((entry) => entry !== null), ...(ngDevMode ? [{ debugName: "renderers", equal: (left, right) => left.length === right.length && left.every((entry, index) => entry === right[index]) }] : [{
+            equal: (left, right) => left.length === right.length && left.every((entry, index) => entry === right[index]),
+        }]));
+    /** Goes up when the behaviors register again, so each drawing is decided again. */
+    registrations = signal(0, ...(ngDevMode ? [{ debugName: "registrations" }] : []));
+    // ── what the page shows ──────────────────────────────────────────────────────
+    view = pageViewOf(this.page);
+    pixels = pagePixelsOf(this.page);
+    items = this.annotation.select((annotation) => annotation.listPageItems(this.page.ref, this.view()), NO_ITEMS);
+    allTexts = this.annotation.select((annotation) => annotation.listTextItems(this.page.ref, this.view()), NO_TEXTS);
+    /** The active tool: an interactive look's function is asked about it, so a tool change redraws. */
+    activeToolId = this.interaction.select((interaction) => interaction.getActiveToolId() ?? '', '');
+    /** The pictures' URLs, by annotation and state; `null` until the page's first ones arrive. */
+    urls = signal(null, ...(ngDevMode ? [{ debugName: "urls" }] : []));
+    /** The pictures shown stay valid until the next ones are shown. */
+    shown = createShownUrls();
+    // A move or a turn leaves the epoch as it is (the same pixels, placed elsewhere), and live
+    // gestures don't touch it: nothing loads mid-drag.
+    appearanceEpoch = this.annotation.select((annotation) => annotation.getAppearanceEpoch(this.page.ref), '');
+    // Zoom steps inside one rung of the document's appearance lattice bake nothing again.
+    // Without the render plugin, only this session's pictures load.
+    appearanceScale = this.render.select((render) => render.getAppearanceScale(this.page.transform().renderScale), 0);
+    bakeScale = computed(() => this.render.capability() ? this.appearanceScale() : this.page.transform().renderScale, ...(ngDevMode ? [{ debugName: "bakeScale" }] : []));
+    /** The text box being typed in, by key: while it is, a look's editor takes the keys. */
+    editingKey = computed(() => editingTextKeyOf(this.allTexts(), annotationKey), ...(ngDevMode ? [{ debugName: "editingKey" }] : []));
+    /** One injector per look, by item: kept while the item is drawn, so the look is never made again. */
+    lookInjectors = new Map();
+    drawings = computed(() => {
+        this.activeToolId();
+        this.registrations();
+        const annotation = this.annotation.capability();
+        const renderers = this.renderers();
+        const looks = this.looks();
+        const behaviors = this.behaviors();
+        const pixels = this.pixels();
+        const urls = this.urls();
+        const editingKey = this.editingKey();
+        const drawings = this.items().map((item) => {
+            const frame = frameInPixels(item.frame, pixels);
+            const state = item.annotation?.appearanceState ?? null;
+            const drawn = {
+                item,
+                frame,
+                shows: pictureOrPainting({
+                    pending: item.source !== 'baked',
+                    picture: urls && shownAppearance(urls, item.id, state),
+                    version: item.pictureVersion ?? 0,
+                    loaded: urls !== null,
+                    paint: () => (hasLiveDrawing(item) ? item : null),
+                }),
+                appearance: urls && bakedAppearanceOf(urls, item.id, state),
+                look: null,
+                owner: null,
+                interactive: false,
+                inert: false,
+            };
+            const record = item.annotation;
+            if (!record || !annotation)
+                return drawn;
+            // Ownership beats looks: an engaged behavior's template is authoritative (a form
+            // plugin's controls own their DOM); looks apply only to what the layer owns, and draw
+            // without the pointer. While its text box is typed in, a look's editor takes the keys.
+            const typing = editingKey !== null && annotationKey(record.ref) === editingKey;
+            const drawing = annotationDrawingOf(record, annotation, renderers, typing);
+            switch (drawing.kind) {
+                case 'native':
+                    return { ...drawn, inert: drawing.inert };
+                case 'owned': {
+                    const template = behaviors.find((behavior) => behavior.renderer() === drawing.entry);
+                    return template ? { ...drawn, owner: { template, annotation: record } } : drawn;
+                }
+                case 'look': {
+                    const template = looks.find((look) => look.renderer() === drawing.entry);
+                    if (!template)
+                        return drawn;
+                    const scaled = drawing.entry.scale !== false;
+                    return {
+                        ...drawn,
+                        look: {
+                            template,
+                            annotation: record,
+                            frame: lookFrameOf(frame, scaled),
+                            scaled,
+                            injector: this.lookInjectorOf(item.id),
+                        },
+                        interactive: drawing.interactive,
+                        inert: drawing.inert,
+                    };
+                }
+            }
+        });
+        // Forget the injectors of looks no longer drawn: a look drawn again starts afresh.
+        const drawnLooks = new Set(drawings.flatMap((drawn) => (drawn.look ? [drawn.item.id] : [])));
+        for (const id of this.lookInjectors.keys()) {
+            if (!drawnLooks.has(id))
+                this.lookInjectors.delete(id);
+        }
+        return drawings;
+    }, ...(ngDevMode ? [{ debugName: "drawings" }] : []));
+    /** How much the layer scales each look, by item: 1 for a look drawn at its size on screen. */
+    lookScales = computed(() => {
+        const scales = new Map();
+        for (const drawn of this.drawings()) {
+            if (drawn.look)
+                scales.set(drawn.item.id, drawn.look.scaled ? drawn.frame.scale : 1);
+        }
+        return scales;
+    }, ...(ngDevMode ? [{ debugName: "lookScales" }] : []));
+    /** The text boxes the layer draws: not the ones a look of yours draws, which edits them there. */
+    texts = computed(() => layerTextBoxesOf(this.allTexts(), this.items(), this.renderers(), annotationKey), ...(ngDevMode ? [{ debugName: "texts" }] : []));
+    textOutline = computed(() => annotationChromePaint(this.chrome.chrome(), this.chrome.accent()).textOutline, ...(ngDevMode ? [{ debugName: "textOutline" }] : []));
+    // ── the armed stamp's ghost ──────────────────────────────────────────────────
+    imageGhost = this.annotation.select((annotation) => annotation.getImageGhost(this.page.ref), null);
+    armedStamp = this.annotation.select((annotation) => annotation.getArmedStamp(), null, Object.is);
+    /**
+     * The ghost is a picture of vector artwork, sharp at one size: the size class that covers the
+     * box's device width. The plugin keeps one picture per class, so a zoom never renders per frame.
+     */
+    ghostBucket = computed(() => {
+        const ghost = this.imageGhost();
+        return ghost ? previewBucket(ghost.box.width * this.page.transform().renderScale) : 0;
+    }, ...(ngDevMode ? [{ debugName: "ghostBucket" }] : []));
+    ghostUrl = signal(null, ...(ngDevMode ? [{ debugName: "ghostUrl" }] : []));
+    ghost = computed(() => {
+        const ghost = this.imageGhost();
+        const url = this.ghostUrl();
+        if (!ghost || !url)
+            return null;
+        return {
+            url,
+            box: rectInPixels(ghost.box, this.pixels()),
+            opacity: ghostOpacity(ghost.opacity),
+            rotation: ghost.rot,
+        };
+    }, ...(ngDevMode ? [{ debugName: "ghost" }] : []));
+    constructor() {
+        // While it's here, the page's picture leaves the annotations to it.
+        paintsPagePart(() => this.page.ref, 'annotations');
+        this.registerBehaviors();
+        if (!isPlatformBrowser(inject(PLATFORM_ID)))
+            return;
+        inject(DestroyRef).onDestroy(() => this.shown.release());
+        this.loadAppearances();
+        this.loadGhost();
+    }
+    /** The injector a look's template gets for one item: the look's scale, followed live. */
+    lookInjectorOf(id) {
+        let injector = this.lookInjectors.get(id);
+        if (!injector) {
+            const scale = computed(() => this.lookScales().get(id) ?? 1, ...(ngDevMode ? [{ debugName: "scale" }] : []));
+            injector = Injector.create({
+                providers: [{ provide: EPDF_LOOK_SCALE, useValue: scale }],
+                parent: this.injector,
+            });
+            this.lookInjectors.set(id, injector);
+        }
+        return injector;
+    }
+    /**
+     * An interactive look takes the pointer through a behavior the plugin knows, registered once
+     * per document and look however many pages show the layer (`@embedpdf/web` counts them). The
+     * looks are the same entries on every page, so keep the functions you give `epdfAnnotation`
+     * and `epdfAnnotationInteractive` in fields: a function made anew registers again.
+     */
+    registerBehaviors() {
+        effect((onCleanup) => {
+            const annotation = this.annotation.capability();
+            const renderers = this.renderers();
+            if (annotation && renderers.length > 0) {
+                onCleanup(untracked(() => registerRendererBehaviors(annotation, renderers, () => untracked(this.activeToolId))));
+            }
+            this.registrations.update((count) => count + 1);
+        });
+    }
+    /**
+     * The baked pictures, loaded again when the page's appearance epoch or the bake scale changes;
+     * the ones shown stay valid until the next are shown.
+     */
+    loadAppearances() {
+        effect((onCleanup) => {
+            const annotation = this.annotation.capability();
+            const scale = this.bakeScale();
+            this.appearanceEpoch();
+            if (!annotation || !scale)
+                return;
+            const page = this.page.ref;
+            onCleanup(untracked(() => loadAppearanceUrls(this.shown, (abort) => annotation.renderAppearances(page, scale, abort), annotationKey, (urls) => this.urls.set(urls))));
+        });
+    }
+    /**
+     * The armed stamp's ghost picture, for its size class. The previous class's picture stays up
+     * until this one is there, so a zoom across a class boundary never flickers; a disarm drops it.
+     */
+    loadGhost() {
+        effect((onCleanup) => {
+            const annotation = this.annotation.capability();
+            const bucket = this.ghostBucket();
+            this.armedStamp();
+            if (!annotation || !bucket) {
+                this.ghostUrl.set(null);
+                return;
+            }
+            onCleanup(untracked(() => loadObjectUrl(() => annotation.renderArmedStampPreview(bucket), (url) => this.ghostUrl.set(url))));
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfAnnotationLayer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: EpdfAnnotationLayer, isStandalone: true, selector: "epdf-annotation-layer", host: { styleAttribute: "position: absolute; inset: 0; display: block; pointer-events: none" }, queries: [{ propertyName: "looks", predicate: EpdfAnnotationTemplate, descendants: true, isSignal: true }, { propertyName: "behaviors", predicate: EpdfAnnotationBehaviorTemplate, descendants: true, isSignal: true }, { propertyName: "handleTemplate", first: true, predicate: EpdfHandleTemplate, descendants: true, isSignal: true }, { propertyName: "rotationHandleTemplate", first: true, predicate: EpdfRotationHandleTemplate, descendants: true, isSignal: true }], ngImport: i0, template: `
+    @for (drawn of drawings(); track drawn.item.id) {
+      <!-- The layer's own drawing of it, which a look may keep: its \`native\`. -->
+      <ng-template #native>
+        <epdf-annotation-native [item]="drawn.item" [shows]="drawn.shows" />
+      </ng-template>
+      @if (drawn.owner; as owner) {
+        <!-- A sibling plugin's controls place themselves in the layer and take the input;
+             the annotation's own drawing keeps its frame. -->
+        <ng-template #framedNative>
+          <div [epdfAnnotationFrame]="drawn.frame" [frameBlend]="drawn.item.blend">
+            <ng-container [ngTemplateOutlet]="native" />
+          </div>
+        </ng-template>
+        <ng-container
+          [ngTemplateOutlet]="owner.template.template"
+          [ngTemplateOutletContext]="{
+            $implicit: owner.annotation,
+            annotation: owner.annotation,
+            item: drawn.item,
+            page: page,
+            native: framedNative,
+            hovered: drawn.item.hovered ?? false,
+            selected: drawn.item.selected,
+            interactive: true
+          }"
+        />
+      } @else {
+        @if (drawn.look; as look) {
+          <div
+            [epdfAnnotationFrame]="drawn.frame"
+            [frameBlend]="drawn.item.blend"
+            [frameInteractive]="drawn.interactive"
+            [frameInert]="drawn.inert"
+          >
+            <ng-template #lookTemplate>
+              <ng-container
+                [ngTemplateOutlet]="look.template.template"
+                [ngTemplateOutletInjector]="look.injector"
+                [ngTemplateOutletContext]="{
+                  $implicit: look.annotation,
+                  annotation: look.annotation,
+                  frame: look.frame,
+                  native: native,
+                  appearance: drawn.appearance,
+                  hovered: drawn.item.hovered ?? false,
+                  selected: drawn.item.selected,
+                  interactive: drawn.interactive
+                }"
+              />
+            </ng-template>
+            @if (look.scaled) {
+              <!-- Drawn at the annotation's 100% size, scaled with the page as a whole. -->
+              <div
+                style="position: absolute; left: 0; top: 0; transform-origin: 0 0"
+                [style.width.px]="drawn.frame.design.width"
+                [style.height.px]="drawn.frame.design.height"
+                [style.transform]="'scale(' + drawn.frame.scale + ')'"
+              >
+                <ng-container [ngTemplateOutlet]="lookTemplate" />
+              </div>
+            } @else {
+              <ng-container [ngTemplateOutlet]="lookTemplate" />
+            }
+          </div>
+        } @else {
+          <!-- Inert when an engaged behavior has no template of yours: its plugin owns the
+               input (a link's anchor takes the click), and the annotation keeps its own look. -->
+          <div
+            [epdfAnnotationFrame]="drawn.frame"
+            [frameBlend]="drawn.item.blend"
+            [frameInert]="drawn.inert"
+          >
+            <ng-container [ngTemplateOutlet]="native" />
+          </div>
+        }
+      }
+    }
+    @for (text of texts(); track text.id) {
+      <div [epdfFreeTextBox]="text" [outline]="textOutline()"></div>
+    }
+    @if (ghost(); as ghost) {
+      <!-- The armed stamp, see-through, in the box a click would place it in. -->
+      <img
+        alt=""
+        draggable="false"
+        style="position: absolute; max-width: none; max-height: none; pointer-events: none; transform-origin: center"
+        [attr.src]="ghost.url"
+        [style.left.px]="ghost.box.left"
+        [style.top.px]="ghost.box.top"
+        [style.width.px]="ghost.box.width"
+        [style.height.px]="ghost.box.height"
+        [style.opacity]="ghost.opacity"
+        [style.transform]="ghost.rotation ? 'rotate(' + ghost.rotation + 'deg)' : null"
+      />
+    }
+    <epdf-annotation-chrome
+      [handle]="handleTemplate()?.template ?? null"
+      [rotationHandle]="rotationHandleTemplate()?.template ?? null"
+    />
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: EpdfAnnotationFrame, selector: "[epdfAnnotationFrame]", inputs: ["epdfAnnotationFrame", "frameBlend", "frameInteractive", "frameInert"] }, { kind: "component", type: EpdfAnnotationNative, selector: "epdf-annotation-native", inputs: ["item", "shows"] }, { kind: "component", type: EpdfAnnotationChrome, selector: "epdf-annotation-chrome", inputs: ["handle", "rotationHandle"] }, { kind: "directive", type: EpdfFreeTextBox, selector: "[epdfFreeTextBox]", inputs: ["epdfFreeTextBox", "outline"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfAnnotationLayer, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'epdf-annotation-layer',
+                    imports: [
+                        NgTemplateOutlet,
+                        EpdfAnnotationFrame,
+                        EpdfAnnotationNative,
+                        EpdfAnnotationChrome,
+                        EpdfFreeTextBox,
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { style: 'position: absolute; inset: 0; display: block; pointer-events: none' },
+                    template: `
+    @for (drawn of drawings(); track drawn.item.id) {
+      <!-- The layer's own drawing of it, which a look may keep: its \`native\`. -->
+      <ng-template #native>
+        <epdf-annotation-native [item]="drawn.item" [shows]="drawn.shows" />
+      </ng-template>
+      @if (drawn.owner; as owner) {
+        <!-- A sibling plugin's controls place themselves in the layer and take the input;
+             the annotation's own drawing keeps its frame. -->
+        <ng-template #framedNative>
+          <div [epdfAnnotationFrame]="drawn.frame" [frameBlend]="drawn.item.blend">
+            <ng-container [ngTemplateOutlet]="native" />
+          </div>
+        </ng-template>
+        <ng-container
+          [ngTemplateOutlet]="owner.template.template"
+          [ngTemplateOutletContext]="{
+            $implicit: owner.annotation,
+            annotation: owner.annotation,
+            item: drawn.item,
+            page: page,
+            native: framedNative,
+            hovered: drawn.item.hovered ?? false,
+            selected: drawn.item.selected,
+            interactive: true
+          }"
+        />
+      } @else {
+        @if (drawn.look; as look) {
+          <div
+            [epdfAnnotationFrame]="drawn.frame"
+            [frameBlend]="drawn.item.blend"
+            [frameInteractive]="drawn.interactive"
+            [frameInert]="drawn.inert"
+          >
+            <ng-template #lookTemplate>
+              <ng-container
+                [ngTemplateOutlet]="look.template.template"
+                [ngTemplateOutletInjector]="look.injector"
+                [ngTemplateOutletContext]="{
+                  $implicit: look.annotation,
+                  annotation: look.annotation,
+                  frame: look.frame,
+                  native: native,
+                  appearance: drawn.appearance,
+                  hovered: drawn.item.hovered ?? false,
+                  selected: drawn.item.selected,
+                  interactive: drawn.interactive
+                }"
+              />
+            </ng-template>
+            @if (look.scaled) {
+              <!-- Drawn at the annotation's 100% size, scaled with the page as a whole. -->
+              <div
+                style="position: absolute; left: 0; top: 0; transform-origin: 0 0"
+                [style.width.px]="drawn.frame.design.width"
+                [style.height.px]="drawn.frame.design.height"
+                [style.transform]="'scale(' + drawn.frame.scale + ')'"
+              >
+                <ng-container [ngTemplateOutlet]="lookTemplate" />
+              </div>
+            } @else {
+              <ng-container [ngTemplateOutlet]="lookTemplate" />
+            }
+          </div>
+        } @else {
+          <!-- Inert when an engaged behavior has no template of yours: its plugin owns the
+               input (a link's anchor takes the click), and the annotation keeps its own look. -->
+          <div
+            [epdfAnnotationFrame]="drawn.frame"
+            [frameBlend]="drawn.item.blend"
+            [frameInert]="drawn.inert"
+          >
+            <ng-container [ngTemplateOutlet]="native" />
+          </div>
+        }
+      }
+    }
+    @for (text of texts(); track text.id) {
+      <div [epdfFreeTextBox]="text" [outline]="textOutline()"></div>
+    }
+    @if (ghost(); as ghost) {
+      <!-- The armed stamp, see-through, in the box a click would place it in. -->
+      <img
+        alt=""
+        draggable="false"
+        style="position: absolute; max-width: none; max-height: none; pointer-events: none; transform-origin: center"
+        [attr.src]="ghost.url"
+        [style.left.px]="ghost.box.left"
+        [style.top.px]="ghost.box.top"
+        [style.width.px]="ghost.box.width"
+        [style.height.px]="ghost.box.height"
+        [style.opacity]="ghost.opacity"
+        [style.transform]="ghost.rotation ? 'rotate(' + ghost.rotation + 'deg)' : null"
+      />
+    }
+    <epdf-annotation-chrome
+      [handle]="handleTemplate()?.template ?? null"
+      [rotationHandle]="rotationHandleTemplate()?.template ?? null"
+    />
+  `,
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Your UI next to annotations, inside `<epdf-stage>`, each on `<epdf-anchored>`, so it moves
+ * with the pages in the same frame and a click in it never reaches the page:
+ *
+ *   <epdf-annotation-menu>                   your menu next to the selection
+ *   <epdf-annotation-draft-menu #menu>       buttons over a polygon being drawn (`menu.draft()`)
+ *   <epdf-annotation-rotation-badge>         the angle next to the pointer while turning
+ *
+ * They only place things: what's in them is yours, built from `inject(EpdfAnnotation)`.
+ */
+/** The annotation plugin of the document this part of the template talks to. */
+function annotationInScope(what) {
+    return new CapabilityBinding(injectKernelHost(what), () => AnnotationToken$1, injectDocumentScope());
+}
+/**
+ * Your menu next to the selection: one menu, also for a selection over several pages, clear of
+ * the rotation handle. It hides while the selection is dragged, resized or turned. Put it inside
+ * `<epdf-stage>`, next to the page template, with what the menu holds between its tags:
+ *
+ *   <epdf-annotation-menu placement="bottom">
+ *     <button (click)="annotation.selection.delete()">Delete</button>
+ *   </epdf-annotation-menu>
+ */
+class EpdfAnnotationMenu {
+    /** Which side of the selection: `'top'` (the default), `'bottom'`, `'left'` or `'right'`, or a corner. */
+    placement = input('top', ...(ngDevMode ? [{ debugName: "placement" }] : []));
+    /** Screen pixels between the selection and the menu. */
+    gap = input(15, ...(ngDevMode ? [{ debugName: "gap" }] : []));
+    annotation = annotationInScope('<epdf-annotation-menu>');
+    projection = inject(EPDF_PROJECTOR, { optional: true });
+    /**
+     * The selection's anchor as its page is shown: the rotation handle sits a fixed number of
+     * pixels off the box, so where it is on the page depends on the zoom. Read again with the
+     * projection, in the same pass as the pages.
+     */
+    selection = this.annotation.select((annotation) => {
+        const anchor = annotation.selection.getAnchor();
+        if (!anchor)
+            return null;
+        this.projection?.revision();
+        const view = this.projection?.projector()?.viewEnv(anchor.page);
+        return view ? annotation.getSelectionAnchorIn(view) : anchor;
+    }, null, sameSelectionAnchor);
+    anchor = computed(() => {
+        const anchor = this.selection();
+        if (!anchor)
+            return null;
+        return {
+            page: anchor.page,
+            bounds: anchor.bounds,
+            ...(anchor.rotationHandle ? { avoid: [anchor.rotationHandle] } : {}),
+        };
+    }, ...(ngDevMode ? [{ debugName: "anchor" }] : []));
+    constructor() {
+        if (!this.projection)
+            throw outsideStageError('<epdf-annotation-menu>');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfAnnotationMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.4", type: EpdfAnnotationMenu, isStandalone: true, selector: "epdf-annotation-menu", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <epdf-anchored [anchor]="anchor()" [placement]="placement()" [gap]="gap()">
+      <ng-content />
+    </epdf-anchored>
+  `, isInline: true, dependencies: [{ kind: "component", type: EpdfAnchored, selector: "epdf-anchored", inputs: ["anchor", "placement", "gap", "pinned"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfAnnotationMenu, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'epdf-annotation-menu',
+                    imports: [EpdfAnchored],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <epdf-anchored [anchor]="anchor()" [placement]="placement()" [gap]="gap()">
+      <ng-content />
+    </epdf-anchored>
+  `,
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * Buttons over a polygon or polyline being drawn, which helps on touch screens. `draft()` is the
+ * shape being drawn (`pointCount`, `minPoints`, `canFinish`, …), or null; the verbs are the
+ * annotation service's `draft.finish()` and `draft.cancel()`:
+ *
+ *   <epdf-annotation-draft-menu #menu="epdfAnnotationDraftMenu">
+ *     <button [disabled]="!menu.draft()?.canFinish" (click)="annotation.draft.finish()">Done</button>
+ *   </epdf-annotation-draft-menu>
+ */
+class EpdfAnnotationDraftMenu {
+    /** Which side of the shape being drawn. */
+    placement = input('top', ...(ngDevMode ? [{ debugName: "placement" }] : []));
+    /** Screen pixels between the shape and the menu. */
+    gap = input(8, ...(ngDevMode ? [{ debugName: "gap" }] : []));
+    annotation = annotationInScope('<epdf-annotation-draft-menu>');
+    /** The shape being drawn: where it is, its points so far and whether it can end; or null. */
+    draft = this.annotation.select((annotation) => annotation.draft.get(), null, sameCreationDraftAnchor);
+    constructor() {
+        if (!inject(EPDF_PROJECTOR, { optional: true })) {
+            throw outsideStageError('<epdf-annotation-draft-menu>');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfAnnotationDraftMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.4", type: EpdfAnnotationDraftMenu, isStandalone: true, selector: "epdf-annotation-draft-menu", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["epdfAnnotationDraftMenu"], ngImport: i0, template: `
+    <epdf-anchored [anchor]="draft()" [placement]="placement()" [gap]="gap()">
+      <ng-content />
+    </epdf-anchored>
+  `, isInline: true, dependencies: [{ kind: "component", type: EpdfAnchored, selector: "epdf-anchored", inputs: ["anchor", "placement", "gap", "pinned"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfAnnotationDraftMenu, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'epdf-annotation-draft-menu',
+                    exportAs: 'epdfAnnotationDraftMenu',
+                    imports: [EpdfAnchored],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <epdf-anchored [anchor]="draft()" [placement]="placement()" [gap]="gap()">
+      <ng-content />
+    </epdf-anchored>
+  `,
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * The angle next to the pointer while a selection is turned, upright however the page is shown.
+ * It shows the angle in the `chrome.readout` colors when `chrome.readout.enabled`; give it an
+ * `<ng-template epdfRotationBadge let-rotation>` to draw it your way. `rotation()` is the turn
+ * in progress (`page`, `at`, `angle`), or null.
+ */
+class EpdfAnnotationRotationBadge {
+    /** Which side of the pointer. */
+    placement = input('right', ...(ngDevMode ? [{ debugName: "placement" }] : []));
+    /** Screen pixels between the pointer and the badge. */
+    gap = input(16, ...(ngDevMode ? [{ debugName: "gap" }] : []));
+    annotation = annotationInScope('<epdf-annotation-rotation-badge>');
+    settings = injectChromeSettings();
+    custom = contentChild(EpdfRotationBadgeTemplate, ...(ngDevMode ? [{ debugName: "custom" }] : []));
+    /** The turn in progress: its page, the pointer's point and the angle so far; or null. */
+    rotation = this.annotation.select((annotation) => annotation.selection.getRotationAnchor(), null, sameRotationAnchor);
+    /** Shown while turning, with a template of yours or with the readout on. */
+    shown = computed(() => {
+        const rotation = this.rotation();
+        return rotation && (this.custom() || this.settings.chrome().readout.enabled) ? rotation : null;
+    }, ...(ngDevMode ? [{ debugName: "shown" }] : []));
+    /** A box of no size at the pointer. */
+    anchor = computed(() => {
+        const rotation = this.rotation();
+        return rotation
+            ? { page: rotation.page, bounds: { ...rotation.at, width: 0, height: 0 } }
+            : null;
+    }, ...(ngDevMode ? [{ debugName: "anchor" }] : []));
+    fontFamily = paintDefault('font-mono');
+    background = computed(() => paint('readout-background', this.settings.chrome().readout.background), ...(ngDevMode ? [{ debugName: "background" }] : []));
+    color = computed(() => paint('readout-color', this.settings.chrome().readout.color), ...(ngDevMode ? [{ debugName: "color" }] : []));
+    constructor() {
+        if (!inject(EPDF_PROJECTOR, { optional: true })) {
+            throw outsideStageError('<epdf-annotation-rotation-badge>');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: EpdfAnnotationRotationBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: EpdfAnnotationRotationBadge, isStandalone: true, selector: "epdf-annotation-rotation-badge", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "custom", first: true, predicate: EpdfRotationBadgeTemplate, descendants: true, isSignal: true }], exportAs: ["epdfAnnotationRotationBadge"], ngImport: i0, template: `
+    @if (shown(); as rotation) {
+      <epdf-anchored [anchor]="anchor()" [placement]="placement()" [gap]="gap()">
+        @if (custom(); as custom) {
+          <ng-container
+            [ngTemplateOutlet]="custom.template"
+            [ngTemplateOutletContext]="{ $implicit: rotation }"
+          />
+        } @else {
+          <div
+            style="pointer-events: none; white-space: nowrap; border-radius: 4px; padding: 2px 6px; font-size: 12px"
+            [style.font-family]="fontFamily"
+            [style.background]="background()"
+            [style.color]="color()"
+          >
+            {{ rotation.angle }}°
+          </div>
+        }
+      </epdf-anchored>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: EpdfAnchored, selector: "epdf-anchored", inputs: ["anchor", "placement", "gap", "pinned"] }, { 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: EpdfAnnotationRotationBadge, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'epdf-annotation-rotation-badge',
+                    exportAs: 'epdfAnnotationRotationBadge',
+                    imports: [EpdfAnchored, NgTemplateOutlet],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    @if (shown(); as rotation) {
+      <epdf-anchored [anchor]="anchor()" [placement]="placement()" [gap]="gap()">
+        @if (custom(); as custom) {
+          <ng-container
+            [ngTemplateOutlet]="custom.template"
+            [ngTemplateOutletContext]="{ $implicit: rotation }"
+          />
+        } @else {
+          <div
+            style="pointer-events: none; white-space: nowrap; border-radius: 4px; padding: 2px 6px; font-size: 12px"
+            [style.font-family]="fontFamily"
+            [style.background]="background()"
+            [style.color]="color()"
+          >
+            {{ rotation.angle }}°
+          </div>
+        }
+      </epdf-anchored>
+    }
+  `,
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * @embedpdf/angular/annotation: drawing, selecting, changing and saving annotations.
+ *
+ *   withAnnotation(options)                     the plugin, for provideEmbedPdf() (with withInteraction())
+ *   withFilePicker(provider?)                   the file dialog behind the stamp and attachment tools
+ *   inject(EpdfAnnotation)                      the API, the State table as signals, the events as
+ *                                               streams, and `watch()`, `anchorOf()`, `tools.defaultsOf()`
+ *   inject(EpdfComments)                        threads and replies: `threads()`, `threadOf(ref)`, `reply()`, …
+ *   <epdf-annotation-layer>                     the annotations, the selection and the text boxes, in each page
+ *     <ng-template [epdfAnnotation]>              your own look for some annotations
+ *     <ng-template epdfHandle>, epdfRotationHandle    your own handles
+ *   [epdfRichTextEditor]                        your element as a text box's editor, in a look
+ *   <epdf-annotation-menu>                      your menu next to the selection, inside <epdf-stage>
+ *   <epdf-annotation-draft-menu>                buttons over a polygon being drawn
+ *   <epdf-annotation-rotation-badge>            the angle while a selection is turned
+ */
+// The plugin's types and helpers, so app code has one import for the feature.
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { EpdfAnnotation, EpdfAnnotationBehaviorTemplate, EpdfAnnotationDraftMenu, EpdfAnnotationLayer, EpdfAnnotationMenu, EpdfAnnotationRotationBadge, EpdfAnnotationTemplate, EpdfComments, EpdfHandleTemplate, EpdfRichTextEditor, EpdfRotationBadgeTemplate, EpdfRotationHandleTemplate, filePickerProvider, withAnnotation, withFilePicker };
+//# sourceMappingURL=embedpdf-angular-annotation.mjs.map