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

package/dist/stamp/readers.svelte.js

@@ -0,0 +1,76 @@
+import { StampToken, stampState } from '@embedpdf/plugin-stamp';
+import { objectUrlOf } from '@embedpdf/web';
+import { shallowArray, useCapability, useCapabilityEvent, useOptionalSelector, useSelector, } from '../runtime/readers.svelte.js';
+import { settingsReader, stateReader } from '../runtime/state.svelte.js';
+import { valueOf } from '../runtime/values.svelte.js';
+/**
+ * The stamp API. Libraries are shared by every document; the placing verbs (`armAsset`,
+ * `placeAsset`, …) act on the nearest `<DocumentScope>`'s document, else the active one. A handle:
+ * keep it whole and call through it, `stamp.armAsset(id)`.
+ */
+export function useStamp() {
+    return useCapability(StampToken);
+}
+/** Subscribe to one stamp event while the component lives: `useStampEvent((stamp) => stamp.onLibraryChanged, handler)`. */
+export function useStampEvent(select, handler) {
+    useCapabilityEvent(StampToken, select, handler);
+}
+/**
+ * The stamps' state for this component's document: the armed stamp (the page's State table,
+ * declared once in `stampState`), as a reactive object (`stampState.armedAsset`). With a
+ * selector, the value it picks as `{ current }`.
+ */
+export const useStampState = stateReader(stampState);
+/** The stamp settings (`assetEngine`, `previewWidth`, `dynamic`), with or without a document. */
+export const useStampSettings = settingsReader(StampToken);
+/**
+ * The libraries as `{ current }`, optionally of one kind or several (`{ kind: 'stamps' }`,
+ * `{ kind: ['stamps', 'legal-seals'] }`; a function to follow a prop). Every read is a new array,
+ * compared item by item, so the value changes only when a library is added, renamed or removed.
+ */
+export function useStampLibraries(filter) {
+    return useSelector(StampToken, (stamp) => stamp.listLibraries(valueOf(filter)), shallowArray);
+}
+/**
+ * The stamps as `{ current }`: one library's (`{ libraryId }`), one kind's or category's, or every
+ * stamp, in the order a picker shows them. A filter that changes is a function:
+ * `useStampAssets(() => ({ libraryId }))`.
+ */
+export function useStampAssets(filter) {
+    return useSelector(StampToken, (stamp) => stamp.listAssets(valueOf(filter)), shallowArray);
+}
+/**
+ * An image URL for a stamp's cached preview (a gallery thumbnail) as `{ current }`, or null while
+ * there is none. An id that changes is a function: `useStampAssetPreviewUrl(() => assetId)`.
+ *
+ * The plugin holds the preview's bytes; the URL is a DOM resource, so it is made here and revoked
+ * when the preview changes or the component goes away, the rule `<AnnotationLayer>` follows for
+ * the pictures it shows.
+ */
+export function useStampAssetPreviewUrl(assetId) {
+    // The preview itself, read on every change: it follows the id, and a preview that arrives
+    // after the stamp does.
+    const preview = useOptionalSelector(StampToken, (stamp) => {
+        const id = valueOf(assetId);
+        return id ? stamp.getAssetPreview(id) : null;
+    }, null);
+    let url = $state(null);
+    $effect(() => {
+        const current = preview.current;
+        if (!current) {
+            url = null;
+            return;
+        }
+        const objectUrl = objectUrlOf(current);
+        url = objectUrl.url;
+        return () => {
+            objectUrl.revoke();
+            url = null;
+        };
+    });
+    return {
+        get current() {
+            return url;
+        },
+    };
+}

package/dist/stamp.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @embedpdf/svelte/stamp — stamps: libraries of marks you pick from and place.
+ *
+ * Thin by design: the plugin owns the libraries, their stamps and the cached previews. Placing
+ * needs no component here: an armed stamp rides the annotation plugin, whose `<AnnotationLayer>`
+ * draws the ghost under the pointer.
+ *
+ *   const stamp = useStamp();
+ *   const assets = useStampAssets(() => ({ libraryId })); // assets.current
+ *   const stampState = useStampState(); // stampState.armedAsset
+ *   await stamp.armAsset(assetId); // the next click places it
+ */
+export * from '@embedpdf/plugin-stamp';
+export { indexedDbByteStore } from '@embedpdf/web';
+export type { ByteStore } from '@embedpdf/web';
+export { useStamp, useStampAssetPreviewUrl, useStampAssets, useStampEvent, useStampLibraries, useStampSettings, useStampState, } from './stamp/readers.svelte.js';

package/dist/stamp.js

@@ -0,0 +1,18 @@
+/**
+ * @embedpdf/svelte/stamp — stamps: libraries of marks you pick from and place.
+ *
+ * Thin by design: the plugin owns the libraries, their stamps and the cached previews. Placing
+ * needs no component here: an armed stamp rides the annotation plugin, whose `<AnnotationLayer>`
+ * draws the ghost under the pointer.
+ *
+ *   const stamp = useStamp();
+ *   const assets = useStampAssets(() => ({ libraryId })); // assets.current
+ *   const stampState = useStampState(); // stampState.armedAsset
+ *   await stamp.armAsset(assetId); // the next click places it
+ */
+// Registration travels with the UI.
+export * from '@embedpdf/plugin-stamp';
+// The browser store for `persistStampLibraries` / `restoreStampLibraries` (structurally the
+// plugin's `StampLibraryStore`), written once in `@embedpdf/web`.
+export { indexedDbByteStore } from '@embedpdf/web';
+export { useStamp, useStampAssetPreviewUrl, useStampAssets, useStampEvent, useStampLibraries, useStampSettings, useStampState, } from './stamp/readers.svelte.js';

package/dist/toolbar/DefaultCollapsed.svelte

@@ -0,0 +1,39 @@
+<!--
+  The default folded group: a <select> for `collapse: 'select'`, else a "More"-style button with a
+  menu of the group's commands.
+-->
+<script lang="ts">
+  import DefaultOverflowMenu from './DefaultOverflowMenu.svelte';
+  import DefaultOverflowTrigger from './DefaultOverflowTrigger.svelte';
+  import { groupMenuView } from '@embedpdf/core-ui';
+  import type { Orientation } from '@embedpdf/web';
+  import type { CollapsedGroupView } from './views.js';
+  import { BORDER, SURFACE } from './paint.js';
+
+  let { view, orientation }: { view: CollapsedGroupView; orientation: Orientation } = $props();
+
+  let isOpen = $state(false);
+  const active = $derived(view.commands.find((command) => command.active)?.id ?? '');
+  const menu = $derived(groupMenuView(view, isOpen, () => (isOpen = false)));
+</script>
+
+{#if view.collapse === 'select'}
+  <select
+    value={active}
+    onchange={(event) => view.execute(event.currentTarget.value)}
+    style:padding="4px 6px"
+    style:font="inherit"
+    style:border-radius="4px"
+    style:border="1px solid {BORDER}"
+    style:background={SURFACE}
+  >
+    {#each view.commands as command (command.id)}
+      <option value={command.id} disabled={!command.enabled}>{command.label}</option>
+    {/each}
+  </select>
+{:else}
+  <span style="position: relative; display: inline-flex">
+    <DefaultOverflowTrigger {isOpen} toggle={() => (isOpen = !isOpen)} />
+    <DefaultOverflowMenu view={menu} {orientation} />
+  </span>
+{/if}

package/dist/toolbar/DefaultCollapsed.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Orientation } from '@embedpdf/web';
+import type { CollapsedGroupView } from './views.js';
+type $$ComponentProps = {
+    view: CollapsedGroupView;
+    orientation: Orientation;
+};
+declare const DefaultCollapsed: import("svelte").Component<$$ComponentProps, {}, "">;
+type DefaultCollapsed = ReturnType<typeof DefaultCollapsed>;
+export default DefaultCollapsed;

package/dist/toolbar/DefaultCommand.svelte

@@ -0,0 +1,33 @@
+<!--
+  The default command button: the command's label in every variant (icons are the app's), pressed
+  when the command is active.
+-->
+<script lang="ts">
+  import type { ResolvedCommand } from '@embedpdf/plugin-commands/contract';
+  import { ACTIVE, BORDER } from './paint.js';
+
+  let { command, run }: { command: ResolvedCommand; run: () => void } = $props();
+</script>
+
+<button
+  type="button"
+  onclick={run}
+  disabled={!command.enabled}
+  aria-pressed={command.active || undefined}
+  aria-haspopup={command.menu ? 'menu' : undefined}
+  title={command.label}
+  style:display="inline-flex"
+  style:align-items="center"
+  style:gap="4px"
+  style:padding="4px 8px"
+  style:white-space="nowrap"
+  style:color="inherit"
+  style:font="inherit"
+  style:background={command.active ? ACTIVE : 'transparent'}
+  style:border="1px solid {BORDER}"
+  style:border-radius="4px"
+  style:cursor={command.enabled ? 'pointer' : 'default'}
+  style:opacity={command.enabled ? 1 : 0.4}
+>
+  {command.label}
+</button>

package/dist/toolbar/DefaultCommand.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ResolvedCommand } from '@embedpdf/plugin-commands/contract';
+type $$ComponentProps = {
+    command: ResolvedCommand;
+    run: () => void;
+};
+declare const DefaultCommand: import("svelte").Component<$$ComponentProps, {}, "">;
+type DefaultCommand = ReturnType<typeof DefaultCommand>;
+export default DefaultCommand;

package/dist/toolbar/DefaultGroupTrigger.svelte

@@ -0,0 +1,39 @@
+<!--
+  The default button of a group that shed items: a chevron opening a menu of what it shed, lit
+  while the active item is in there.
+-->
+<script lang="ts">
+  import DefaultOverflowMenu from './DefaultOverflowMenu.svelte';
+  import { groupMenuView } from '@embedpdf/core-ui';
+  import type { Orientation } from '@embedpdf/web';
+  import type { GroupDisclosureView } from './views.js';
+  import { ACTIVE, BORDER } from './paint.js';
+
+  let { view, orientation }: { view: GroupDisclosureView; orientation: Orientation } = $props();
+
+  let isOpen = $state(false);
+  const someActive = $derived(view.commands.some((command) => command.active));
+  const menu = $derived(groupMenuView(view, isOpen, () => (isOpen = false)));
+</script>
+
+<span style="position: relative; display: inline-flex">
+  <button
+    type="button"
+    onclick={() => (isOpen = !isOpen)}
+    aria-haspopup="menu"
+    aria-expanded={isOpen}
+    title="More"
+    style:display="inline-flex"
+    style:align-items="center"
+    style:padding="4px 6px"
+    style:color="inherit"
+    style:font="inherit"
+    style:border="1px solid {BORDER}"
+    style:border-radius="4px"
+    style:background={isOpen || someActive ? ACTIVE : 'transparent'}
+    style:cursor="pointer"
+  >
+    ▾
+  </button>
+  <DefaultOverflowMenu view={menu} {orientation} />
+</span>

package/dist/toolbar/DefaultGroupTrigger.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Orientation } from '@embedpdf/web';
+import type { GroupDisclosureView } from './views.js';
+type $$ComponentProps = {
+    view: GroupDisclosureView;
+    orientation: Orientation;
+};
+declare const DefaultGroupTrigger: import("svelte").Component<$$ComponentProps, {}, "">;
+type DefaultGroupTrigger = ReturnType<typeof DefaultGroupTrigger>;
+export default DefaultGroupTrigger;

package/dist/toolbar/DefaultOverflowMenu.svelte

@@ -0,0 +1,106 @@
+<!--
+  The default "More" menu: a minimal popover under its button in a horizontal toolbar and beside
+  it in a vertical one, one section after another. A press anywhere outside it closes it, and
+  while it's open it takes the menu keys (`attachMenuKeys`): focus on its first row, the arrows,
+  typeahead, Enter, and Escape back to its button. A row that opens a submenu keeps the menu
+  open; every other row closes it after running.
+-->
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import type { OverflowRow } from '@embedpdf/core-ui';
+  import {
+    attachMenuKeys,
+    focusablesIn,
+    observeOutsidePress,
+    type Orientation,
+  } from '@embedpdf/web';
+  import type { OverflowMenuView } from './views.js';
+  import { BORDER, SURFACE } from './paint.js';
+
+  let { view, orientation }: { view: OverflowMenuView; orientation: Orientation } = $props();
+  let menu = $state<HTMLElement | null>(null);
+
+  // Whether it's open, apart from the view: the toolbar hands a new view on every change, and
+  // attaching again would put focus back on the first row.
+  const isOpen = $derived(view.isOpen);
+
+  $effect(() => {
+    const element = menu;
+    if (!isOpen || !element) return;
+    return untrack(() => {
+      // The menu's parent holds its button too: a press on it is the button's own toggle.
+      const container = element.parentElement ?? element;
+      const trigger =
+        focusablesIn(container).find((candidate) => !element.contains(candidate)) ?? null;
+      const close = () => view.close();
+      const stopOutside = observeOutsidePress(container, close);
+      const detachKeys = attachMenuKeys(element, { trigger, close });
+      return () => {
+        stopOutside();
+        detachKeys();
+      };
+    });
+  });
+
+  /** Under a horizontal toolbar's button, beside a vertical one's. */
+  const placement = $derived(
+    orientation === 'vertical'
+      ? 'top: 0; inset-inline-start: 100%;'
+      : 'top: 100%; inset-inline-end: 0;',
+  );
+
+  function choose(row: OverflowRow) {
+    view.execute(row.command);
+    if (row.type !== 'submenu') view.close();
+  }
+</script>
+
+{#if isOpen}
+  <div
+    bind:this={menu}
+    role="menu"
+    style="position: absolute; {placement}"
+    style:z-index="41"
+    style:min-width="200px"
+    style:padding="4px"
+    style:background={SURFACE}
+    style:border="1px solid {BORDER}"
+    style:border-radius="6px"
+    style:box-shadow="0 4px 16px rgba(0,0,0,0.15)"
+  >
+    {#each view.sections as section, index (index)}
+      {#if index > 0}
+        <div style:height="1px" style:background={BORDER} style:margin="4px 0"></div>
+      {/if}
+      {#each section.rows as row (row.command)}
+        {@const command = view.resolve(row.command)}
+        {#if command}
+          <button
+            type="button"
+            role={section.role === 'radio' ? 'menuitemradio' : 'menuitem'}
+            aria-checked={section.role === 'radio' ? command.active : undefined}
+            disabled={!command.enabled}
+            tabindex="-1"
+            onclick={() => choose(row)}
+            style:display="flex"
+            style:width="100%"
+            style:align-items="center"
+            style:justify-content="space-between"
+            style:gap="16px"
+            style:padding="6px 8px"
+            style:border="none"
+            style:color="inherit"
+            style:font="inherit"
+            style:background="transparent"
+            style:cursor={command.enabled ? 'pointer' : 'default'}
+            style:opacity={command.enabled ? 1 : 0.4}
+            style:white-space="nowrap"
+          >
+            <span>{command.active && section.role === 'radio' ? '• ' : ''}{command.label}</span>
+            {#if row.type === 'submenu'}<span>▸</span>{/if}
+          </button>
+        {/if}
+      {/each}
+    {/each}
+  </div>
+{/if}

package/dist/toolbar/DefaultOverflowMenu.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type Orientation } from '@embedpdf/web';
+import type { OverflowMenuView } from './views.js';
+type $$ComponentProps = {
+    view: OverflowMenuView;
+    orientation: Orientation;
+};
+declare const DefaultOverflowMenu: import("svelte").Component<$$ComponentProps, {}, "">;
+type DefaultOverflowMenu = ReturnType<typeof DefaultOverflowMenu>;
+export default DefaultOverflowMenu;

package/dist/toolbar/DefaultOverflowTrigger.svelte

@@ -0,0 +1,25 @@
+<!-- The default "More" button: a plain ⋯ that shows whether its menu is open. -->
+<script lang="ts">
+  import { ACTIVE, BORDER } from './paint.js';
+
+  let { isOpen, toggle }: { isOpen: boolean; toggle: () => void } = $props();
+</script>
+
+<button
+  type="button"
+  onclick={toggle}
+  aria-haspopup="menu"
+  aria-expanded={isOpen}
+  title="More"
+  style:display="inline-flex"
+  style:align-items="center"
+  style:padding="4px 8px"
+  style:color="inherit"
+  style:font="inherit"
+  style:border="1px solid {BORDER}"
+  style:border-radius="4px"
+  style:background={isOpen ? ACTIVE : 'transparent'}
+  style:cursor="pointer"
+>
+  ⋯
+</button>

package/dist/toolbar/DefaultOverflowTrigger.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    isOpen: boolean;
+    toggle: () => void;
+};
+declare const DefaultOverflowTrigger: import("svelte").Component<$$ComponentProps, {}, "">;
+type DefaultOverflowTrigger = ReturnType<typeof DefaultOverflowTrigger>;
+export default DefaultOverflowTrigger;

package/dist/toolbar/Measured.svelte

@@ -0,0 +1,46 @@
+<!--
+  One element of the toolbar's measurement layer: reports its length along the toolbar (its width,
+  or its height in a vertical one) now and whenever it resizes (a new language, a font loading,
+  your CSS). With `onlyWhenDrawn` it reports only while it holds something: a custom item that
+  draws nothing here is measured where it renders, by the `ctx.measure` it reports to.
+-->
+<script lang="ts">
+  import { untrack, type Snippet } from 'svelte';
+  import { observeLength, type Orientation } from '@embedpdf/web';
+
+  let {
+    orientation,
+    onLength,
+    onlyWhenDrawn = false,
+    children,
+  }: {
+    orientation: Orientation;
+    onLength: (length: number) => void;
+    onlyWhenDrawn?: boolean;
+    children?: Snippet;
+  } = $props();
+
+  let element: HTMLSpanElement | undefined = $state();
+
+  /** Whether `element` holds an element or text: a snippet that drew nothing leaves only anchors. */
+  const drewSomething = (measured: Element): boolean =>
+    [...measured.childNodes].some(
+      (node) =>
+        node.nodeType === Node.ELEMENT_NODE ||
+        (node.nodeType === Node.TEXT_NODE && (node.textContent ?? '').trim() !== ''),
+    );
+
+  $effect(() => {
+    const measured = element;
+    const along = orientation;
+    if (!measured) return;
+    // The report writes the toolbar's lengths, which this effect must not depend on.
+    return untrack(() =>
+      observeLength(measured, along, (length) => {
+        if (!onlyWhenDrawn || drewSomething(measured)) onLength(length);
+      }),
+    );
+  });
+</script>
+
+<span bind:this={element} style="display: inline-flex; flex-shrink: 0">{@render children?.()}</span>

package/dist/toolbar/Measured.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type Snippet } from 'svelte';
+import { type Orientation } from '@embedpdf/web';
+type $$ComponentProps = {
+    orientation: Orientation;
+    onLength: (length: number) => void;
+    onlyWhenDrawn?: boolean;
+    children?: Snippet;
+};
+declare const Measured: import("svelte").Component<$$ComponentProps, {}, "">;
+type Measured = ReturnType<typeof Measured>;
+export default Measured;

package/dist/toolbar/NativeSlotSocket.svelte

@@ -0,0 +1,43 @@
+<!--
+  The socket for a custom item when no `custom` snippet draws it: a real, native <slot> element.
+  Inside a shadow root (a custom element that renders the toolbar) the browser projects the
+  host's same-named children into it; anywhere else it shows its own content, the item's
+  command. It is measured where it renders, never in the measurement layer: only the first
+  <slot> of a name gets the projected children.
+-->
+<script lang="ts">
+  import { untrack, type Snippet } from 'svelte';
+  import { observeLength, type Orientation } from '@embedpdf/web';
+
+  let {
+    name,
+    orientation,
+    onLength,
+    children,
+  }: {
+    name: string;
+    orientation: Orientation;
+    onLength: (length: number) => void;
+    children?: Snippet;
+  } = $props();
+
+  let socket: HTMLElement | undefined = $state();
+
+  // A child slotted in or out resizes the socket's box, so one observer covers both.
+  $effect(() => {
+    const element = socket;
+    const along = orientation;
+    if (!element) return;
+    return untrack(() => observeLength(element, along, (length) => onLength(length)));
+  });
+</script>
+
+<!-- `svelte:element` makes the element itself: Svelte reads a <slot> tag as its own syntax. -->
+<svelte:element
+  this={'slot'}
+  bind:this={socket}
+  {name}
+  style="display: inline-flex; align-items: center; flex-shrink: 0"
+>
+  {@render children?.()}
+</svelte:element>

package/dist/toolbar/NativeSlotSocket.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type Snippet } from 'svelte';
+import { type Orientation } from '@embedpdf/web';
+type $$ComponentProps = {
+    name: string;
+    orientation: Orientation;
+    onLength: (length: number) => void;
+    children?: Snippet;
+};
+declare const NativeSlotSocket: import("svelte").Component<$$ComponentProps, {}, "">;
+type NativeSlotSocket = ReturnType<typeof NativeSlotSocket>;
+export default NativeSlotSocket;