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

package/dist/anchored/PlacedAnchored.svelte

@@ -0,0 +1,97 @@
+<!--
+  Anchored content on a page that is shown: it follows the camera. The position is computed from
+  the surface's projection (the shared, framework-free `projectAnchoredTarget`) whenever the
+  projection, the anchor or the measured size changes. A click inside never reaches the
+  surface's own pointer listener, which would read it as a click outside.
+-->
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import {
+    isolatePointerDown,
+    observeAnchoredFit,
+    projectAnchoredTarget,
+    sameAnchoredFit,
+    type AnchoredFit,
+  } from '@embedpdf/web';
+  import { useProjectorBinding } from './context.js';
+  import type { AnchoredProps } from './props.js';
+
+  let { anchor, placement = 'top', gap = 8, pinned = false, children }: AnchoredProps = $props();
+
+  const binding = useProjectorBinding();
+  let element: HTMLDivElement | undefined = $state();
+  // The content's size and the view's: measured once it's in the DOM, and again when either
+  // resizes. A camera move changes neither.
+  let fit = $state.raw<AnchoredFit | null>(null);
+  // Changes no state announces: a `<PageView>` that moved because the document scrolled, and the
+  // first pass of a client-space surface, which can only measure once it's in the DOM.
+  let browserMoves = $state(0);
+
+  $effect(() => {
+    const subscribe = binding().subscribe;
+    if (!subscribe) return;
+    return subscribe(() => untrack(() => browserMoves++));
+  });
+  $effect(() => {
+    if (binding().projector.space !== 'client') return;
+    void anchor;
+    untrack(() => browserMoves++);
+  });
+
+  $effect(() => {
+    const target = element;
+    const space = binding().projector.space;
+    if (!target) return;
+    return observeAnchoredFit(target, space, (next) => {
+      if (
+        !sameAnchoredFit(
+          untrack(() => fit),
+          next,
+        )
+      )
+        fit = next;
+    });
+  });
+
+  // A native listener: Svelte delegates `onpointerdown` to the root, which the press reaches
+  // only after the surface's own listener saw it.
+  $effect(() => {
+    if (!element) return;
+    return isolatePointerDown(element);
+  });
+
+  const projector = $derived(binding().projector);
+  const position = $derived.by(() => {
+    void binding().revision;
+    void browserMoves;
+    if (!anchor?.bounds) return null;
+    return projectAnchoredTarget(
+      projector,
+      { ...anchor, bounds: anchor.bounds },
+      { placement, gap, pinned },
+      fit,
+    );
+  });
+
+  /** Client-space content lives on the body, where no ancestor's overflow clips it. */
+  function portal(node: HTMLElement) {
+    if (projector.space !== 'client') return;
+    node.ownerDocument.body.appendChild(node);
+    return () => node.remove();
+  }
+</script>
+
+{#if position}
+  <div
+    bind:this={element}
+    {@attach portal}
+    style:position={projector.space === 'client' ? 'fixed' : 'absolute'}
+    style:left="{position.left}px"
+    style:top="{position.top}px"
+    style:width="max-content"
+    style:transform={position.transform}
+    style:pointer-events="auto"
+  >
+    {@render children?.()}
+  </div>
+{/if}

package/dist/anchored/PlacedAnchored.svelte.d.ts

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

package/dist/anchored/context.d.ts

@@ -0,0 +1,31 @@
+import type { ViewProjector } from '@embedpdf/web';
+export interface ProjectorBinding {
+    projector: ViewProjector;
+    /**
+     * Changes whenever projection may have changed for a state reason; the Stage uses its visible
+     * pages (a value that already folds camera, viewport, scene and pixel ratio). Readers read it
+     * so they compute again; nothing looks inside it.
+     */
+    revision: unknown;
+    /**
+     * For changes no state announces, such as a `<PageView>` moving because the document
+     * scrolled (see `observeClientGeometry`). The Stage provides none.
+     */
+    subscribe?: (callback: () => void) => () => void;
+}
+/**
+ * The pages a surface shows right now, by object number. A value of its own, next to the
+ * projection, because it changes only when a page comes on screen or leaves it: anchored UI on
+ * the other pages reads only this, so it sits out every camera frame.
+ */
+export type ShownPages = ReadonlySet<number>;
+/** For page surfaces: provide the projection to the anchored UI inside. */
+export declare function setProjectorBinding(binding: () => ProjectorBinding): void;
+/** For page surfaces: provide the pages shown. */
+export declare function setShownPages(shown: () => ShownPages): void;
+/** The surface's projection, or null outside any page surface, for chrome that degrades instead of throwing. */
+export declare function useOptionalProjectorBinding(): (() => ProjectorBinding) | null;
+/** The surface's projection. Throws outside a page surface. */
+export declare function useProjectorBinding(): () => ProjectorBinding;
+/** The pages the surface shows, or null outside one (then every page counts as shown). */
+export declare function useShownPages(): (() => ShownPages) | null;

package/dist/anchored/context.js

@@ -0,0 +1,36 @@
+/**
+ * What a page surface (`<Stage>`, `<PageView>`) gives the anchored UI inside it: the projection,
+ * and the pages it shows. The projection snapshot and the placement math are framework-free, in
+ * `@embedpdf/web` ({@link ViewProjector}, `projectAnchoredTarget`).
+ *
+ * Both are provided as functions that return the current value. A Stage's projection changes on
+ * every camera frame (its binding is a `$derived` of the visible pages), so the surface and its
+ * overlay update in the same flush and never paint a frame apart.
+ */
+import { getContext, hasContext, setContext } from 'svelte';
+const PROJECTOR = Symbol('embedpdf.projector');
+const SHOWN_PAGES = Symbol('embedpdf.shown-pages');
+/** For page surfaces: provide the projection to the anchored UI inside. */
+export function setProjectorBinding(binding) {
+    setContext(PROJECTOR, binding);
+}
+/** For page surfaces: provide the pages shown. */
+export function setShownPages(shown) {
+    setContext(SHOWN_PAGES, shown);
+}
+/** The surface's projection, or null outside any page surface, for chrome that degrades instead of throwing. */
+export function useOptionalProjectorBinding() {
+    return hasContext(PROJECTOR) ? getContext(PROJECTOR) : null;
+}
+/** The surface's projection. Throws outside a page surface. */
+export function useProjectorBinding() {
+    const binding = useOptionalProjectorBinding();
+    if (!binding) {
+        throw new Error('[embedpdf] No ViewProjector in scope: put anchored UI in a <Stage> (its overlay snippet) or a <PageView>.');
+    }
+    return binding;
+}
+/** The pages the surface shows, or null outside one (then every page counts as shown). */
+export function useShownPages() {
+    return hasContext(SHOWN_PAGES) ? getContext(SHOWN_PAGES) : null;
+}

package/dist/anchored/props.d.ts

@@ -0,0 +1,29 @@
+/** The props of `<Anchored>`. */
+import type { Snippet } from 'svelte';
+import type { AnchoredPlacement, AnchoredRect, AnchorTarget } from '@embedpdf/web';
+export interface AnchoredProps {
+    /**
+     * The box on a page to sit next to, in page coordinates: `{ page, bounds }`, with `avoid`
+     * points to keep clear of. `null`, or a target without `bounds` (a search match with no
+     * geometry), hides it.
+     */
+    anchor: (Omit<AnchorTarget, 'bounds'> & {
+        bounds?: AnchoredRect;
+    }) | null;
+    /**
+     * Where to sit: a side of the box, centred, or lined up with the side's start or end
+     * (`'top-end'`). Default `'top'`.
+     */
+    placement?: AnchoredPlacement;
+    /**
+     * The gap in screen pixels between the box and the content, and between the content and the
+     * view's edge. Negative overlaps the box. Default 8.
+     */
+    gap?: number;
+    /**
+     * Stay where `placement` puts it: never flip to the other side, never move to stay in view,
+     * and scroll away with the box. For badges and status; menus leave it off. Default false.
+     */
+    pinned?: boolean;
+    children?: Snippet;
+}

package/dist/anchored/props.js

@@ -0,0 +1 @@
+export {};

package/dist/anchored.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @embedpdf/svelte/anchored — UI that floats over page content.
+ *
+ * Plugins give anchors (a page-space box on a page, and points to keep clear of); `<Anchored>`
+ * places content next to one, on whichever page surface it's in: a `<Stage>`'s overlay, or a
+ * `<PageView>`. The placement math is framework-free, in `@embedpdf/web`.
+ */
+export type { AnchoredPlacement, AnchoredSide, AnchorTarget, PageViewEnv, ViewProjector, } from '@embedpdf/web';
+export { default as Anchored } from './anchored/Anchored.svelte';
+export type { AnchoredProps } from './anchored/props.js';
+export { setProjectorBinding, setShownPages, useOptionalProjectorBinding, useProjectorBinding, useShownPages, } from './anchored/context.js';
+export type { ProjectorBinding, ShownPages } from './anchored/context.js';

package/dist/anchored.js

@@ -0,0 +1,2 @@
+export { default as Anchored } from './anchored/Anchored.svelte';
+export { setProjectorBinding, setShownPages, useOptionalProjectorBinding, useProjectorBinding, useShownPages, } from './anchored/context.js';

package/dist/annotation/AnnotationChrome.svelte

@@ -0,0 +1,173 @@
+<!--
+  The selection's chrome on one page: its outline (turned with a turned selection), the resize
+  and point handles, the rotation handle, a snapped move's guides, a turn's guides and the box
+  dragged to select. The plugin lists the parts in page points; `@embedpdf/web` puts them in
+  pixels and paints them, so their `--epdf-annotation-*` CSS variables win. The layer's handles
+  are SVG; your `handle` and `rotationHandle` snippets draw as HTML over the page instead.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { ChromeNode } from '@embedpdf/core-annotation';
+  // The chrome is a host read (the same runtime token, typed wider).
+  import { AnnotationToken as AnnotationHostToken } from '@embedpdf/plugin-annotation/contract/host';
+  import { chromeInPixels } from '@embedpdf/web';
+  import type { PageContextValue } from '../runtime/page.js';
+  import { shallowArray, useOptionalSelector } from '../runtime/readers.svelte.js';
+  import { useChromePaint } from './chrome-paint.svelte.js';
+  import type { HandleProps, RotationHandleProps } from './props.js';
+
+  let {
+    page,
+    handle,
+    rotationHandle,
+  }: {
+    page: PageContextValue;
+    handle?: Snippet<[handle: HandleProps]>;
+    rotationHandle?: Snippet<[handle: RotationHandleProps]>;
+  } = $props();
+
+  const NO_NODES: readonly ChromeNode[] = Object.freeze([]);
+
+  // 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): constant on screen at every zoom.
+  // What this draws is in screen pixels already.
+  const nodes = useOptionalSelector(
+    AnnotationHostToken,
+    (annotation) =>
+      annotation.listChromeNodes(
+        page.ref,
+        page.transform.viewScale,
+        page.transform.rotation,
+        page.transform.zoom,
+      ),
+    NO_NODES,
+    shallowArray,
+  );
+  const paint = useChromePaint();
+  const parts = $derived(chromeInPixels(nodes.current, page.transform));
+  const yours = $derived(
+    parts.filter(
+      (part) =>
+        (part.kind === 'handle' && handle) || (part.kind === 'rotation-handle' && rotationHandle),
+    ),
+  );
+</script>
+
+<svg style="position: absolute; inset: 0; overflow: visible; pointer-events: none">
+  {#each parts as part, index (index)}
+    {#if part.kind === 'handle' && !handle}
+      {@const size = paint.chrome.handles.size}
+      {#if paint.chrome.handles.shape === 'circle'}
+        <circle
+          cx={part.at.x}
+          cy={part.at.y}
+          r={size / 2}
+          stroke-width="1.5"
+          style={paint.css.handle}
+        />
+      {:else}
+        <!-- The square rides a turned box's orientation (it spins about itself). -->
+        <rect
+          x={part.at.x - size / 2}
+          y={part.at.y - size / 2}
+          width={size}
+          height={size}
+          stroke-width="1.5"
+          style={paint.css.handle}
+          transform={part.rotation
+            ? `rotate(${part.rotation} ${part.at.x} ${part.at.y})`
+            : undefined}
+        />
+      {/if}
+    {:else if part.kind === 'guide'}
+      <line
+        x1={part.from.x}
+        y1={part.from.y}
+        x2={part.to.x}
+        y2={part.to.y}
+        shape-rendering="crispEdges"
+        style={paint.css.guide}
+      />
+    {:else if part.kind === 'turned-outline'}
+      <polygon points={part.points} fill="none" style={paint.css.outline} />
+    {:else if part.kind === 'rotation-guides'}
+      <g>
+        {#each part.lines as line, lineIndex (lineIndex)}
+          <line
+            x1={line.from.x}
+            y1={line.from.y}
+            x2={line.to.x}
+            y2={line.to.y}
+            opacity={line.opacity}
+            style={paint.css.rotationGuide}
+          />
+        {/each}
+      </g>
+    {:else if part.kind === 'rotation-handle' && !rotationHandle}
+      <g>
+        {#if paint.chrome.rotationHandle.stalk}
+          <line
+            x1={part.from.x}
+            y1={part.from.y}
+            x2={part.at.x}
+            y2={part.at.y}
+            stroke-width="1"
+            style={paint.css.rotationStalk}
+          />
+        {/if}
+        <circle
+          cx={part.at.x}
+          cy={part.at.y}
+          r={paint.chrome.rotationHandle.size / 2}
+          stroke-width="1.5"
+          style={paint.css.rotationHandle}
+        />
+      </g>
+    {:else if part.kind === 'marquee'}
+      <!-- The box dragged to select keeps its own look (a see-through accent fill, always
+           dashed); the selection outline follows the settings. -->
+      <rect
+        x={part.box.left}
+        y={part.box.top}
+        width={part.box.width}
+        height={part.box.height}
+        stroke-width="1"
+        stroke-dasharray="4 3"
+        style={paint.css.marquee}
+      />
+    {:else if part.kind === 'outline'}
+      <rect
+        x={part.box.left}
+        y={part.box.top}
+        width={part.box.width}
+        height={part.box.height}
+        fill="none"
+        style={paint.css.outline}
+      />
+    {/if}
+  {/each}
+</svg>
+{#if yours.length > 0}
+  <div style="position: absolute; inset: 0; pointer-events: none">
+    {#each yours as part, index (index)}
+      {#if part.kind === 'handle'}
+        {@render handle?.({
+          at: part.at,
+          size: paint.chrome.handles.size,
+          rotation: part.rotation,
+          kind: part.role,
+          active: part.active,
+        })}
+      {:else if part.kind === 'rotation-handle'}
+        <!-- Your rotation handle stands still while it's dragged: the badge shows the angle. -->
+        {@render rotationHandle?.({
+          at: part.at,
+          from: part.from,
+          size: paint.chrome.rotationHandle.size,
+          rotation: 0,
+          active: false,
+        })}
+      {/if}
+    {/each}
+  </div>
+{/if}

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { PageContextValue } from '../runtime/page.js';
+import type { HandleProps, RotationHandleProps } from './props.js';
+type $$ComponentProps = {
+    page: PageContextValue;
+    handle?: Snippet<[handle: HandleProps]>;
+    rotationHandle?: Snippet<[handle: RotationHandleProps]>;
+};
+declare const AnnotationChrome: import("svelte").Component<$$ComponentProps, {}, "">;
+type AnnotationChrome = ReturnType<typeof AnnotationChrome>;
+export default AnnotationChrome;

package/dist/annotation/AnnotationDraftMenu.svelte

@@ -0,0 +1,27 @@
+<!--
+  A menu over a shape being drawn click by click (a polygon, a polyline): the `children` snippet
+  gets the shape (`canFinish`, `pointCount`, …). The verbs are the API's:
+  `useAnnotation().draft.finish()` and `.draft.cancel()`.
+-->
+<script lang="ts">
+  import { AnnotationToken } from '@embedpdf/plugin-annotation';
+  import { sameCreationDraftAnchor } from '@embedpdf/web';
+  import Anchored from '../anchored/Anchored.svelte';
+  import { useOptionalSelector } from '../runtime/readers.svelte.js';
+  import type { AnnotationDraftMenuProps } from './props.js';
+
+  let { children, gap = 8, placement = 'top' }: AnnotationDraftMenuProps = $props();
+
+  const draft = useOptionalSelector(
+    AnnotationToken,
+    (annotation) => annotation.draft.get(),
+    null,
+    sameCreationDraftAnchor,
+  );
+</script>
+
+{#if draft.current}
+  <Anchored anchor={draft.current} {placement} {gap}>
+    {@render children(draft.current)}
+  </Anchored>
+{/if}

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

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

package/dist/annotation/AnnotationFrame.svelte

@@ -0,0 +1,46 @@
+<!--
+  The box an annotation draws into, placed, sized and turned like the annotation (`item.frame`)
+  inside the page layer, which the page itself turns. The annotation's own drawing and any look
+  of yours draw inside it.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { RenderItem } from '@embedpdf/core-annotation';
+  import { frameInPixels } from '@embedpdf/web';
+  import type { PageContextValue } from '../runtime/page.js';
+
+  let {
+    item,
+    page,
+    interactive = false,
+    inert = false,
+    children,
+  }: {
+    item: RenderItem;
+    page: PageContextValue;
+    /** An interactive renderer takes the pointer: the layer's own `none` ends here. */
+    interactive?: boolean;
+    /** No pointer and no focus for anything inside: a look that only draws. */
+    inert?: boolean;
+    children: Snippet;
+  } = $props();
+
+  const box = $derived(frameInPixels(item.frame, page.transform));
+</script>
+
+<!-- The blend is on the frame: a turned frame groups what is inside it, so blending on an inner
+     element would stop blending with the page. -->
+<div
+  {inert}
+  style:position="absolute"
+  style:left="{box.left}px"
+  style:top="{box.top}px"
+  style:width="{box.width}px"
+  style:height="{box.height}px"
+  style:transform={box.transform}
+  style:transform-origin="center"
+  style:mix-blend-mode={item.blend}
+  style:pointer-events={interactive ? 'auto' : 'none'}
+>
+  {@render children()}
+</div>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { RenderItem } from '@embedpdf/core-annotation';
+import type { PageContextValue } from '../runtime/page.js';
+type $$ComponentProps = {
+    item: RenderItem;
+    page: PageContextValue;
+    /** An interactive renderer takes the pointer: the layer's own `none` ends here. */
+    interactive?: boolean;
+    /** No pointer and no focus for anything inside: a look that only draws. */
+    inert?: boolean;
+    children: Snippet;
+};
+declare const AnnotationFrame: import("svelte").Component<$$ComponentProps, {}, "">;
+type AnnotationFrame = ReturnType<typeof AnnotationFrame>;
+export default AnnotationFrame;