@embedpdf/svelte 0.0.0-stage → 3.0.0-next.16

package/dist/annotation/AnnotationLayer.svelte

@@ -0,0 +1,241 @@
+<!--
+  A page's annotations, the selection's outline and handles, the tool's preview and the text boxes
+  being typed in. Put it in the Stage's page content above the rendered page: while it's there,
+  the render layer leaves the annotations out of the page's picture.
+
+  Pure paint: it reads the plugin's per-page render items and chrome and draws them. Presses reach
+  the plugin through the interaction hub (the Stage forwards them), and so does the cursor. Each
+  annotation is one drawing: its vector scene, the engine's baked appearance, or a look of yours
+  from `renderers`, which may keep the layer's own drawing (`{@render native()}`) and add to it.
+  The `handle` and `rotationHandle` snippets draw the handles your way.
+-->
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import { annotationKey } from '@embedpdf/core';
+  import type { RenderItem } from '@embedpdf/core-annotation';
+  import type { TextItem } from '@embedpdf/plugin-annotation';
+  // The layer is framework code, so it resolves the full host lens (page items, chrome,
+  // appearances…): the same runtime token as the public one, typed wider.
+  import { AnnotationToken as AnnotationHostToken } from '@embedpdf/plugin-annotation/contract/host';
+  import { InteractionToken } from '@embedpdf/plugin-interaction/contract';
+  import { RenderToken } from '@embedpdf/plugin-render/contract/host';
+  import {
+    annotationDrawingOf,
+    bakedAppearanceOf,
+    createShownUrls,
+    editingTextKeyOf,
+    layerTextBoxesOf,
+    loadAppearanceUrls,
+    registerRendererBehaviors,
+    type AnnotationDrawing,
+    type AppearanceUrl,
+  } from '@embedpdf/web';
+  import { devWarn } from '../runtime/dev.js';
+  import { usePage } from '../runtime/page.js';
+  import { usePaintsPagePart } from '../runtime/page-layers.svelte.js';
+  import {
+    shallowArray,
+    useOptionalCapability,
+    useOptionalSelector,
+  } from '../runtime/readers.svelte.js';
+  import AnnotationChrome from './AnnotationChrome.svelte';
+  import AnnotationFrame from './AnnotationFrame.svelte';
+  import AnnotationLook from './AnnotationLook.svelte';
+  import FreeTextBox from './FreeTextBox.svelte';
+  import NativeDrawing from './NativeDrawing.svelte';
+  import type { AnnotationLayerProps, AnnotationRenderer } from './props.js';
+  import StampGhost from './StampGhost.svelte';
+
+  type Drawing = AnnotationDrawing<AnnotationRenderer>;
+
+  const NO_ITEMS: readonly RenderItem[] = Object.freeze([]);
+  const NO_TEXTS: readonly TextItem[] = Object.freeze([]);
+  const NATIVE: Drawing = { kind: 'native', inert: false };
+
+  let { renderers, handle, rotationHandle }: AnnotationLayerProps = $props();
+
+  const page = usePage();
+  // While it's here, the page's picture leaves the annotations to it.
+  usePaintsPagePart(() => page.ref, 'annotations');
+  const annotation = useOptionalCapability(AnnotationHostToken);
+  const interaction = useOptionalCapability(InteractionToken);
+  // The active tool decides which interactive renderers take the pointer, so a tool change draws
+  // the layer again (`interactive` functions read it live).
+  const activeToolId = useOptionalSelector(
+    InteractionToken,
+    (hub) => String(hub.getActiveToolId()),
+    '',
+  );
+
+  // The page's view (its zoom and turn) projects annotations that keep their size or stay
+  // upright on screen (`noZoom`, `noRotate`) inside the plugin: no flag logic lives here.
+  // `zoom`, not `viewScale`: 1 is the page's 100%.
+  const items = useOptionalSelector(
+    AnnotationHostToken,
+    (host) =>
+      host.listPageItems(page.ref, {
+        zoom: page.transform.zoom,
+        rotation: page.transform.rotation,
+      }),
+    NO_ITEMS,
+    shallowArray,
+  );
+  const texts = useOptionalSelector(
+    AnnotationHostToken,
+    (host) =>
+      host.listTextItems(page.ref, {
+        zoom: page.transform.zoom,
+        rotation: page.transform.rotation,
+      }),
+    NO_TEXTS,
+    shallowArray,
+  );
+
+  // ── your renderers ─────────────────────────────────────────────────────────
+
+  /** Bumped when the renderers' behaviors register again, so the drawings are read again. */
+  let registrations = $state(0);
+  let previousRenderers: AnnotationRenderer[] | undefined;
+  // An `interactive` renderer takes the pointer through a behavior the plugin knows, registered
+  // once per capability and entry however many pages mount the layer. Entry identity is the key,
+  // so a list written inline in the markup registers again each time it's made: say so.
+  $effect(() => {
+    const host = annotation.current;
+    const list = renderers;
+    return untrack(() => {
+      const before = previousRenderers;
+      previousRenderers = list;
+      if (list && before && list !== before && shallowArray(list, before)) {
+        devWarn(
+          'annotation-renderers-inline',
+          '<AnnotationLayer renderers> was given a new array with the same entries — define it ' +
+            'once in <script>, because entry identity keys the behavior registration.',
+        );
+      }
+      if (!host || !list) return;
+      const release = registerRendererBehaviors(host, list, () =>
+        untrack(() => String(interaction.current?.getActiveToolId() ?? '')),
+      );
+      registrations++;
+      return release;
+    });
+  });
+
+  // ── baked appearances ──────────────────────────────────────────────────────
+
+  // `null` until the page's first pictures arrive.
+  let urls = $state.raw<Record<string, AppearanceUrl> | null>(null);
+  // The pictures shown stay valid until the next ones are shown.
+  const shown = createShownUrls();
+  $effect(() => () => shown.release());
+  // Baked annotations draw from engine rasters: load them again when the page's baked set or an
+  // appearance version changes (a stamp just placed, a resize whose new appearance arrived), and
+  // when the bake scale does. 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.
+  const bakedKey = useOptionalSelector(
+    AnnotationHostToken,
+    (host) => host.getAppearanceEpoch(page.ref),
+    null,
+  );
+  // The appearance scale follows the document's render policy: zoom steps inside one rung of the
+  // appearance lattice bake nothing again. Without the render plugin, only this session's
+  // pictures load.
+  const bakeScale = useOptionalSelector(
+    RenderToken,
+    (render) => render.getAppearanceScale(page.transform.renderScale),
+    page.transform.renderScale,
+  );
+  $effect(() => {
+    const host = annotation.current;
+    const ref = page.ref;
+    const scale = bakeScale.current;
+    void bakedKey.current;
+    if (!host || !scale) return;
+    return untrack(() =>
+      loadAppearanceUrls(
+        shown,
+        (signal) => host.renderAppearances(ref, scale, signal),
+        annotationKey,
+        (loaded) => (urls = loaded),
+      ),
+    );
+  });
+
+  // ── what each annotation draws ─────────────────────────────────────────────
+
+  /** The text box being typed in, by key: while it is, a look's editor takes the keys. */
+  const editingKey = $derived(editingTextKeyOf(texts.current, annotationKey));
+
+  /**
+   * Ownership beats looks: an engaged behavior's renderer is authoritative (the form plugin's
+   * controls own their DOM); `for` rules apply only to what the layer owns, and draw without the
+   * pointer. Read again when the item, the active tool or the registrations change: the
+   * `interactive` functions and the plugin's behaviors are asked here.
+   */
+  function drawingOf(item: RenderItem): Drawing {
+    void activeToolId.current;
+    void registrations;
+    const host = annotation.current;
+    const record = item.annotation;
+    if (!record || !host) return NATIVE;
+    const typing = editingKey !== null && annotationKey(record.ref) === editingKey;
+    return annotationDrawingOf(record, host, renderers, typing);
+  }
+
+  /** The text boxes the layer types in: one your renderer draws is edited there (`useRichTextEditor()`). */
+  const ownTexts = $derived(
+    layerTextBoxesOf(texts.current, items.current, renderers, annotationKey),
+  );
+</script>
+
+<div style="position: absolute; inset: 0; pointer-events: none">
+  {#each items.current as item (item.id)}
+    {@const drawing = drawingOf(item)}
+    <!-- The layer's own drawing, for a renderer to keep: `{@render native()}`. -->
+    {#snippet native()}
+      <NativeDrawing {item} {urls} />
+    {/snippet}
+    <!-- The same in its frame, where the layer draws it: what a sibling plugin's renderer keeps. -->
+    {#snippet framedNative()}
+      <AnnotationFrame {item} {page}>
+        <NativeDrawing {item} {urls} />
+      </AnnotationFrame>
+    {/snippet}
+    {#if drawing.kind === 'owned' && item.annotation}
+      {@const Owner = drawing.entry.component}
+      <Owner
+        annotation={item.annotation}
+        {item}
+        {page}
+        native={framedNative}
+        hovered={item.hovered ?? false}
+        selected={item.selected}
+        interactive={true}
+      />
+    {:else if drawing.kind === 'look' && item.annotation}
+      <AnnotationFrame {item} {page} interactive={drawing.interactive} inert={drawing.inert}>
+        <AnnotationLook
+          entry={drawing.entry}
+          annotation={item.annotation}
+          {item}
+          {page}
+          {native}
+          appearance={urls &&
+            bakedAppearanceOf(urls, item.id, item.annotation?.appearanceState ?? null)}
+          interactive={drawing.interactive}
+        />
+      </AnnotationFrame>
+    {:else}
+      <!-- Inert when an engaged behavior has no renderer of yours: its plugin owns the input (a
+           link's anchor takes the click), and the annotation keeps its own look. -->
+      <AnnotationFrame {item} {page} inert={drawing.kind === 'native' && drawing.inert}>
+        <NativeDrawing {item} {urls} />
+      </AnnotationFrame>
+    {/if}
+  {/each}
+  {#each ownTexts as text (text.id)}
+    <FreeTextBox item={text} {page} />
+  {/each}
+  <StampGhost {page} />
+  <AnnotationChrome {page} {handle} {rotationHandle} />
+</div>

package/dist/annotation/AnnotationLayer.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { AnnotationLayerProps } from './props.js';
+declare const AnnotationLayer: import("svelte").Component<AnnotationLayerProps, {}, "">;
+type AnnotationLayer = ReturnType<typeof AnnotationLayer>;
+export default AnnotationLayer;

package/dist/annotation/AnnotationLook.svelte

@@ -0,0 +1,67 @@
+<!--
+  Your look for one annotation, inside its frame. A scaled look (the default) draws at the
+  annotation's 100% size in a box of that size, which this scales with the page from its top-left
+  corner, so text and borders scale too; `useRichTextEditor()` inside reads that scale. A look
+  with `scale: false` draws at its size on screen.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { RenderItem } from '@embedpdf/core-annotation';
+  import type { Annotation } from '@embedpdf/plugin-annotation';
+  import { frameInPixels, lookFrameOf } from '@embedpdf/web';
+  import type { PageContextValue } from '../runtime/page.js';
+  import type { AnnotationRenderer } from './props.js';
+  import { setLookScale } from './text-box.svelte.js';
+
+  let {
+    entry,
+    annotation,
+    item,
+    page,
+    native,
+    appearance,
+    interactive,
+  }: {
+    entry: Extract<AnnotationRenderer, { for: unknown }>;
+    annotation: Annotation;
+    item: RenderItem;
+    page: PageContextValue;
+    native: Snippet;
+    appearance: { url: string } | null;
+    interactive: boolean;
+  } = $props();
+
+  const pixels = $derived(frameInPixels(item.frame, page.transform));
+  const scaled = $derived(entry.scale !== false);
+  const frame = $derived(lookFrameOf(pixels, scaled));
+  const Look = $derived(entry.component);
+  setLookScale(() => (scaled ? pixels.scale : 1));
+</script>
+
+{#snippet look()}
+  <Look
+    {annotation}
+    {frame}
+    {native}
+    {appearance}
+    hovered={item.hovered ?? false}
+    selected={item.selected}
+    {interactive}
+  />
+{/snippet}
+
+{#if scaled}
+  <div
+    style:position="absolute"
+    style:left="0"
+    style:top="0"
+    style:width="{pixels.design.width}px"
+    style:height="{pixels.design.height}px"
+    style:transform="scale({pixels.scale})"
+    style:transform-origin="0 0"
+  >
+    {@render look()}
+  </div>
+{:else}
+  {@render look()}
+{/if}

package/dist/annotation/AnnotationLook.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+import type { RenderItem } from '@embedpdf/core-annotation';
+import type { Annotation } from '@embedpdf/plugin-annotation';
+import type { PageContextValue } from '../runtime/page.js';
+import type { AnnotationRenderer } from './props.js';
+type $$ComponentProps = {
+    entry: Extract<AnnotationRenderer, {
+        for: unknown;
+    }>;
+    annotation: Annotation;
+    item: RenderItem;
+    page: PageContextValue;
+    native: Snippet;
+    appearance: {
+        url: string;
+    } | null;
+    interactive: boolean;
+};
+declare const AnnotationLook: import("svelte").Component<$$ComponentProps, {}, "">;
+type AnnotationLook = ReturnType<typeof AnnotationLook>;
+export default AnnotationLook;

package/dist/annotation/AnnotationMenu.svelte

@@ -0,0 +1,47 @@
+<!--
+  Your own menu next to the selection: one anchor, also for a selection over several pages, clear
+  of the rotation handle. It hides while the selection is dragged, resized or turned. What's in it
+  is yours: build it from `useAnnotation()` and `useAnnotationState()`. It works in a `<Stage>`'s
+  overlay and in a `<PageView>` alike: the surface gives the projection.
+-->
+<script lang="ts">
+  import { AnnotationToken as AnnotationHostToken } from '@embedpdf/plugin-annotation/contract/host';
+  import { sameSelectionAnchor } from '@embedpdf/web';
+  import Anchored from '../anchored/Anchored.svelte';
+  import { useProjectorBinding } from '../anchored/context.js';
+  import { useOptionalSelector } from '../runtime/readers.svelte.js';
+  import type { AnnotationMenuProps } from './props.js';
+
+  let { children, gap = 15, placement = 'top' }: AnnotationMenuProps = $props();
+
+  const binding = useProjectorBinding();
+  // The rotation handle's offset is constant on screen, so where it is on the page depends on the
+  // page's live view scale: the anchor is read again whenever the projection changes, in the same
+  // update as the surface.
+  const anchor = useOptionalSelector(
+    AnnotationHostToken,
+    (annotation) => {
+      const { projector } = binding();
+      const selectionAnchor = annotation.selection.getAnchor();
+      if (!selectionAnchor) return null;
+      const env = projector.viewEnv(selectionAnchor.page);
+      return env ? annotation.getSelectionAnchorIn(env) : selectionAnchor;
+    },
+    null,
+    sameSelectionAnchor,
+  );
+</script>
+
+{#if anchor.current}
+  <Anchored
+    anchor={{
+      page: anchor.current.page,
+      bounds: anchor.current.bounds,
+      ...(anchor.current.rotationHandle ? { avoid: [anchor.current.rotationHandle] } : {}),
+    }}
+    {placement}
+    {gap}
+  >
+    {@render children()}
+  </Anchored>
+{/if}

package/dist/annotation/AnnotationMenu.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { AnnotationMenuProps } from './props.js';
+declare const AnnotationMenu: import("svelte").Component<AnnotationMenuProps, {}, "">;
+type AnnotationMenu = ReturnType<typeof AnnotationMenu>;
+export default AnnotationMenu;

package/dist/annotation/AnnotationRotationBadge.svelte

@@ -0,0 +1,52 @@
+<!--
+  Follows the pointer while a selection is being turned, upright however the page is shown: it
+  floats over the page like the menus, not in it. Shows nothing when no turn is in progress.
+  Without a `children` snippet it shows the angle in the `chrome.readout` colors, when
+  `chrome.readout.enabled`.
+-->
+<script lang="ts">
+  import { AnnotationToken } from '@embedpdf/plugin-annotation';
+  import { paint, paintDefault, sameRotationAnchor } from '@embedpdf/web';
+  import Anchored from '../anchored/Anchored.svelte';
+  import { useOptionalSelector } from '../runtime/readers.svelte.js';
+  import type { AnnotationRotationBadgeProps } from './props.js';
+  import { useAnnotationSettings } from './state.js';
+
+  let { children, gap = 16, placement = 'right' }: AnnotationRotationBadgeProps = $props();
+
+  const rotation = useOptionalSelector(
+    AnnotationToken,
+    (annotation) => annotation.selection.getRotationAnchor(),
+    null,
+    sameRotationAnchor,
+  );
+  const readout = useAnnotationSettings((settings) => settings.chrome.readout);
+</script>
+
+{#if rotation.current && (children || readout.current.enabled)}
+  <Anchored
+    anchor={{
+      page: rotation.current.page,
+      bounds: { ...rotation.current.at, width: 0, height: 0 },
+    }}
+    {placement}
+    {gap}
+  >
+    {#if children}
+      {@render children(rotation.current)}
+    {:else}
+      <div
+        style:pointer-events="none"
+        style:white-space="nowrap"
+        style:border-radius="4px"
+        style:padding="2px 6px"
+        style:font-family={paintDefault('font-mono')}
+        style:font-size="12px"
+        style:background={paint('readout-background', readout.current.background)}
+        style:color={paint('readout-color', readout.current.color)}
+      >
+        {rotation.current.angle}°
+      </div>
+    {/if}
+  </Anchored>
+{/if}

package/dist/annotation/AnnotationRotationBadge.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { AnnotationRotationBadgeProps } from './props.js';
+declare const AnnotationRotationBadge: import("svelte").Component<AnnotationRotationBadgeProps, {}, "">;
+type AnnotationRotationBadge = ReturnType<typeof AnnotationRotationBadge>;
+export default AnnotationRotationBadge;

package/dist/annotation/AnnotationScene.svelte

@@ -0,0 +1,27 @@
+<!--
+  An annotation's vector drawing, filling its frame: drawn upright in it, the frame turns it. The
+  core computes the box and the painted scene; `@embedpdf/web` describes each scene node as one
+  SVG element, so there is no per-kind logic and no bounds math here.
+-->
+<script lang="ts">
+  import { MITER_LIMIT, scene, type RenderItem } from '@embedpdf/core-annotation';
+  import { ghostOpacity, sceneViewBox, svgShapesOf } from '@embedpdf/web';
+  import SvgShapes from '../runtime/SvgShapes.svelte';
+
+  let { item }: { item: RenderItem } = $props();
+
+  // Nothing to draw until the annotation has area (the 0×0 drawing at the first press).
+  const viewBox = $derived(sceneViewBox(item.box));
+  const shapes = $derived(viewBox ? svgShapesOf(scene(item), { miterLimit: MITER_LIMIT }) : []);
+</script>
+
+{#if viewBox}
+  <!-- A ghost is see-through as a whole, so its fill and stroke don't stack. -->
+  <svg
+    {viewBox}
+    style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none"
+    style:opacity={item.source === 'ghost' ? ghostOpacity(item.ghostOpacity ?? 0.5) : undefined}
+  >
+    <SvgShapes {shapes} />
+  </svg>
+{/if}

package/dist/annotation/AnnotationScene.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type RenderItem } from '@embedpdf/core-annotation';
+type $$ComponentProps = {
+    item: RenderItem;
+};
+declare const AnnotationScene: import("svelte").Component<$$ComponentProps, {}, "">;
+type AnnotationScene = ReturnType<typeof AnnotationScene>;
+export default AnnotationScene;

package/dist/annotation/FreeTextBox.svelte

@@ -0,0 +1,51 @@
+<!--
+  A free text annotation's text: the same styled element for reading and typing, placed on the
+  engine's text plate (the box inset by its padding). The editor owns what's inside the element,
+  so the markup leaves it empty, and the element is never made again while someone types (the
+  caret would jump). Every style is its own `style:` directive, so the editor's own line height
+  on the element stays.
+-->
+<script lang="ts">
+  import type { TextItem } from '@embedpdf/plugin-annotation';
+  import { freeTextBoxOf } from '@embedpdf/web';
+  import type { PageContextValue } from '../runtime/page.js';
+  import { useChromePaint } from './chrome-paint.svelte.js';
+  import { textBoxEditor } from './text-box.svelte.js';
+
+  let { item, page }: { item: TextItem; page: PageContextValue } = $props();
+
+  const paint = useChromePaint();
+  // On the engine's text plate (the box inset by its padding), laid out at a legible size.
+  const box = $derived(freeTextBoxOf(item, page.transform, paint.css.textOutline));
+  const editor = textBoxEditor(
+    () => item,
+    () => box.scale,
+  );
+</script>
+
+<div
+  {@attach editor}
+  style:position={box.style.position}
+  style:left={box.style.left}
+  style:top={box.style.top}
+  style:width={box.style.width}
+  style:height={box.style.height}
+  style:font-family={box.style.fontFamily}
+  style:font-size={box.style.fontSize}
+  style:color={box.style.color}
+  style:font-weight={box.style.fontWeight}
+  style:font-style={box.style.fontStyle}
+  style:text-decoration={box.style.textDecoration}
+  style:text-align={box.style.textAlign}
+  style:box-sizing={box.style.boxSizing}
+  style:background={box.style.background}
+  style:white-space={box.style.whiteSpace}
+  style:overflow-wrap={box.style.overflowWrap}
+  style:overflow-x={box.style.overflowX}
+  style:overflow-y={box.style.overflowY}
+  style:outline={box.style.outline}
+  style:cursor={box.style.cursor}
+  style:transform={box.style.transform}
+  style:transform-origin={box.style.transformOrigin}
+  style:pointer-events={box.style.pointerEvents}
+></div>

package/dist/annotation/FreeTextBox.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { TextItem } from '@embedpdf/plugin-annotation';
+import type { PageContextValue } from '../runtime/page.js';
+type $$ComponentProps = {
+    item: TextItem;
+    page: PageContextValue;
+};
+declare const FreeTextBox: import("svelte").Component<$$ComponentProps, {}, "">;
+type FreeTextBox = ReturnType<typeof FreeTextBox>;
+export default FreeTextBox;

package/dist/annotation/NativeDrawing.svelte

@@ -0,0 +1,61 @@
+<!--
+  The layer's own drawing of one annotation, inside its frame: the engine's raster where the core
+  places it (following a move as it happens), or the vector scene for everything drawn live (a
+  picture older than the annotation too). One rule picks (`pictureOrPainting`). A renderer gets it
+  as `native`.
+-->
+<script lang="ts">
+  import { hasLiveDrawing, type RenderItem } from '@embedpdf/core-annotation';
+  import {
+    pictureOrPainting,
+    rasterInFrame,
+    shownAppearance,
+    type AppearanceUrl,
+  } from '@embedpdf/web';
+  import AnnotationScene from './AnnotationScene.svelte';
+
+  let {
+    item,
+    urls,
+  }: {
+    item: RenderItem;
+    /** The page's loaded pictures, by item and state; `null` until the first ones arrive. */
+    urls: Readonly<Record<string, AppearanceUrl>> | null;
+  } = $props();
+
+  const shows = $derived(
+    pictureOrPainting({
+      pending: item.source !== 'baked',
+      picture: urls && shownAppearance(urls, item.id, item.annotation?.appearanceState ?? null),
+      version: item.pictureVersion ?? 0,
+      loaded: urls !== null,
+      paint: () => (hasLiveDrawing(item) ? item : null),
+    }),
+  );
+  const raster = $derived(item.raster ? rasterInFrame(item.raster, item.frame) : null);
+</script>
+
+{#if shows?.kind === 'painting'}
+  <!-- Shapes, clouds, markup: all painted from the scene. -->
+  <AnnotationScene {item} />
+{:else if shows?.kind === 'picture' && raster}
+  <!-- The raster at any frame size. Explicit `max-width`/`max-height`: a global
+       `img { max-width: 100% }` reset would clamp a box wider than its containing block (a
+       landscape stamp on a turned portrait page) and distort it. The turn the engine took out of
+       the raster is put back about its middle. -->
+  <img
+    src={shows.picture.url}
+    alt=""
+    draggable="false"
+    style:position="absolute"
+    style:left={raster.left}
+    style:top={raster.top}
+    style:width={raster.width}
+    style:height={raster.height}
+    style:max-width="none"
+    style:max-height="none"
+    style:pointer-events="none"
+    style:transform={raster.transform}
+    style:transform-origin="center"
+  />
+{/if}

package/dist/annotation/NativeDrawing.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type RenderItem } from '@embedpdf/core-annotation';
+import { type AppearanceUrl } from '@embedpdf/web';
+type $$ComponentProps = {
+    item: RenderItem;
+    /** The page's loaded pictures, by item and state; `null` until the first ones arrive. */
+    urls: Readonly<Record<string, AppearanceUrl>> | null;
+};
+declare const NativeDrawing: import("svelte").Component<$$ComponentProps, {}, "">;
+type NativeDrawing = ReturnType<typeof NativeDrawing>;
+export default NativeDrawing;