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

package/dist/toolbar/Toolbar.svelte

@@ -0,0 +1,314 @@
+<!--
+  <Toolbar>: measures what fits and makes room, and you draw every part.
+
+    1. A hidden measurement layer renders every unit in every variant (and the folded groups and
+       the "More" button), each watched with `observeLength` from @embedpdf/web along the toolbar
+       (widths, or heights when it is vertical), so a new language, a font loading, browser zoom
+       and your CSS all re-measure on their own (`createToolbarLengths`).
+    2. core-ui's `solve()` gives each unit a variant, a folded group or the "More" menu
+       (`layoutToolbar` turns that into parts).
+    3. The live row draws the parts; the "More" menu is derived from what didn't fit
+       (`projectOverflow`), never written by hand.
+
+  The toolbar is one tab stop with arrow keys along it (`attachToolbarFocus`), and its default
+  menus take the menu keys (`attachMenuKeys`). Every part is a snippet with a plain default:
+  `command`, `custom`, `collapsed`, `groupTrigger`, `separator`, `overflowTrigger` and
+  `overflowMenu`. The defaults' colors come from the `--epdf-toolbar-*` CSS variables only.
+-->
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import { layoutToolbar, normalizeBar, type LiveSection } from '@embedpdf/core-ui';
+  // The "More" menu asks which menu a command opens, a host fact, so the host lens is bound here.
+  import { CommandsToken } from '@embedpdf/plugin-commands/contract/host';
+  import { unregisteredCommand } from '@embedpdf/plugin-commands/contract';
+  import type { ResolvedCommand } from '@embedpdf/plugin-commands/contract';
+  import {
+    TOOLBAR_ITEM_ATTRIBUTE,
+    attachToolbarFocus,
+    createToolbarLengths,
+    observeContentLength,
+    toolbarMeasureKey,
+    type RovingFocus,
+  } from '@embedpdf/web';
+  import { useKernelBinding } from '../runtime/binding.svelte.js';
+  import { useCapability, useDocumentId } from '../runtime/readers.svelte.js';
+  import DefaultCollapsed from './DefaultCollapsed.svelte';
+  import DefaultCommand from './DefaultCommand.svelte';
+  import DefaultGroupTrigger from './DefaultGroupTrigger.svelte';
+  import DefaultOverflowMenu from './DefaultOverflowMenu.svelte';
+  import DefaultOverflowTrigger from './DefaultOverflowTrigger.svelte';
+  import Measured from './Measured.svelte';
+  import NativeSlotSocket from './NativeSlotSocket.svelte';
+  import type { ToolbarProps } from './props.js';
+  import type { OverflowMenuView, ToolbarPart } from './views.js';
+
+  let {
+    bar,
+    orientation = 'horizontal',
+    gap = 8,
+    separatorWidth = 1,
+    'aria-label': ariaLabel,
+    class: className,
+    style,
+    command,
+    custom,
+    collapsed,
+    groupTrigger,
+    separator,
+    overflowTrigger,
+    overflowMenu,
+  }: ToolbarProps = $props();
+
+  const binding = useKernelBinding();
+  const commands = useCapability(CommandsToken);
+  const documentId = useDocumentId();
+  const vertical = $derived(orientation === 'vertical');
+
+  // ── measuring ──────────────────────────────────────────────────────────────
+
+  let container: HTMLDivElement | undefined = $state();
+  let containerLength = $state(0);
+  $effect(() => {
+    const element = container;
+    const along = orientation;
+    if (!element) return;
+    return untrack(() =>
+      observeContentLength(element, along, (length) => (containerLength = length)),
+    );
+  });
+
+  // A length that changed by more than half a pixel fits (and draws) again. Untracked: a report
+  // can come from an effect, which must not run again because the count moved.
+  const lengths = createToolbarLengths();
+  let measured = $state(0);
+  function report(key: string, length: number) {
+    untrack(() => {
+      if (lengths.report(orientation, key, length)) measured += 1;
+    });
+  }
+
+  // ── the fit ────────────────────────────────────────────────────────────────
+
+  const normalized = $derived(normalizeBar(bar));
+
+  const resolve = (id: string): ResolvedCommand | null =>
+    commands.resolveCommand(id, documentId.current ?? undefined);
+  const execute = (id: string): void =>
+    void commands.execute(id, { documentId: documentId.current ?? undefined });
+
+  // Command state is derived on read, so this runs again on every kernel change: labels, `active`
+  // and `visible` (and with them the measurement layer) stay live. A toolbar is a few dozen
+  // items, so drawing it again on each change is the simple, correct baseline.
+  const layout = $derived.by(() => {
+    binding.track();
+    void measured;
+    return layoutToolbar({
+      bar: normalized,
+      resolve,
+      unregistered: unregisteredCommand,
+      execute,
+      menuTarget: (id) => commands.getMenuTarget(id),
+      metrics: lengths.metrics(orientation, gap, separatorWidth),
+      measureKey: toolbarMeasureKey,
+      containerLength,
+      orientation,
+    });
+  });
+
+  // ── the "More" menu ────────────────────────────────────────────────────────
+
+  let overflowOpen = $state(false);
+  const hasOverflow = $derived(layout.hasOverflow);
+  $effect(() => {
+    if (!hasOverflow) overflowOpen = false;
+  });
+  const toggleOverflow = () => (overflowOpen = !overflowOpen);
+  const noop = () => {};
+
+  const overflowView: OverflowMenuView = $derived({
+    sections: layout.overflow,
+    isOpen: overflowOpen,
+    close: () => (overflowOpen = false),
+    resolve,
+    execute,
+  });
+
+  // ── the keyboard ───────────────────────────────────────────────────────────
+
+  // One tab stop, and arrow keys along the toolbar. The handle is no state: nothing draws from it.
+  const keyboard: { focus: RovingFocus | null } = { focus: null };
+  $effect(() => {
+    const element = container;
+    const along = orientation;
+    if (!element) return;
+    return untrack(() => {
+      const focus = attachToolbarFocus(element, along);
+      keyboard.focus = focus;
+      return () => {
+        focus.detach();
+        keyboard.focus = null;
+      };
+    });
+  });
+  // Any draw can add, remove or disable an item, so the tab stop is checked after each one: a new
+  // fit, the "More" menu, or snippets of yours that draw the parts. An effect runs after the DOM
+  // it follows is updated.
+  $effect(() => {
+    void [layout, overflowOpen, command, custom, collapsed, groupTrigger, overflowTrigger];
+    untrack(() => keyboard.focus?.refresh());
+  });
+
+  // ── layout ─────────────────────────────────────────────────────────────────
+
+  /**
+   * The sections run along the toolbar. The center one carries auto margins: it centers in the
+   * space the other two leave, and gives way before anything overlaps. The toolbar itself has no
+   * gap, so what the fit says fits, fits. Sections never grow or shrink: fitting is the solver's
+   * job, not flexbox's.
+   */
+  const sectionStyle = (name: LiveSection['name']) =>
+    `display: flex; flex-direction: ${vertical ? 'column' : 'row'}; align-items: center; ` +
+    `gap: ${gap}px; flex: 0 0 auto;` +
+    (name !== 'center'
+      ? ''
+      : vertical
+        ? ' margin-top: auto; margin-bottom: auto;'
+        : ' margin-left: auto; margin-right: auto;');
+
+  /** The default separator: a 1px line across the toolbar, flat in a vertical one. */
+  const separatorStyle = $derived(
+    `${vertical ? 'height' : 'width'}: 1px; align-self: stretch; background: currentColor; ` +
+      'opacity: 0.2',
+  );
+
+  /** The toolbar runs along its orientation; a `style` of yours comes after. */
+  const rootStyle = $derived(
+    `position: relative; display: flex; flex-direction: ${vertical ? 'column' : 'row'}; ` +
+      `align-items: center; ${style ?? ''}`,
+  );
+
+  /** Marks the element around each item of the live row: its first focusable element is a stop. */
+  const TOOLBAR_ITEM = { [TOOLBAR_ITEM_ATTRIBUTE]: '' };
+
+  /**
+   * The hidden measurement layer: a row for a horizontal toolbar, a column for a vertical one, and
+   * no height either way, so it never adds to the page. A column keeps each item at its own
+   * width, so no text wraps and changes the heights it reports.
+   */
+  const measureLayerStyle = $derived(
+    'position: absolute; left: 0; top: 0; height: 0; overflow: hidden; visibility: hidden; ' +
+      'pointer-events: none; display: flex; white-space: nowrap;' +
+      (vertical ? ' flex-direction: column; align-items: flex-start;' : ''),
+  );
+</script>
+
+{#snippet commandButton(item: ResolvedCommand, variant: string, run: () => void)}
+  {#if command}
+    {@render command(item, variant, run)}
+  {:else}
+    <DefaultCommand command={item} {run} />
+  {/if}
+{/snippet}
+
+{#snippet part(item: ToolbarPart, layer: 'live' | 'measure')}
+  {#if item.kind === 'command'}
+    {@render commandButton(item.command, item.variant, item.run)}
+  {:else if item.kind === 'custom'}
+    {#if custom}
+      {@render custom(item.name, item.variant, {
+        layer,
+        measure: (length) => report(item.measureKey, length),
+      })}
+    {:else}
+      <NativeSlotSocket
+        name={item.name}
+        {orientation}
+        onLength={(length) => report(item.measureKey, length)}
+      >
+        {#if item.terminal}
+          {@render commandButton(item.terminal, 'icon', item.runTerminal)}
+        {/if}
+      </NativeSlotSocket>
+    {/if}
+  {:else if item.kind === 'collapsed'}
+    {#if collapsed}
+      {@render collapsed(item.view)}
+    {:else}
+      <DefaultCollapsed view={item.view} {orientation} />
+    {/if}
+  {:else if groupTrigger}
+    {@render groupTrigger(item.view)}
+  {:else}
+    <DefaultGroupTrigger view={item.view} {orientation} />
+  {/if}
+{/snippet}
+
+{#snippet moreButton(isOpen: boolean, toggle: () => void)}
+  {#if overflowTrigger}
+    {@render overflowTrigger(isOpen, toggle)}
+  {:else}
+    <DefaultOverflowTrigger {isOpen} {toggle} />
+  {/if}
+{/snippet}
+
+<div
+  bind:this={container}
+  role="toolbar"
+  aria-orientation={orientation}
+  aria-label={ariaLabel}
+  class={className}
+  style={rootStyle}
+>
+  {#each layout.sections as section (section.name)}
+    <div style={sectionStyle(section.name)}>
+      {#each section.groups as group, index (group.id)}
+        {#if index > 0}
+          {#if separator}
+            {@render separator()}
+          {:else}
+            <span style={separatorStyle}></span>
+          {/if}
+        {/if}
+        {#each group.parts as item (item.key)}
+          <!-- The element around an item adds no box: the item lays out as the section's child. -->
+          <span {...TOOLBAR_ITEM} style="display: contents">{@render part(item, 'live')}</span>
+        {/each}
+      {/each}
+      {#if section.name === 'end' && layout.hasOverflow}
+        <span {...TOOLBAR_ITEM} style="position: relative; display: inline-flex">
+          {@render moreButton(overflowOpen, toggleOverflow)}
+          {#if overflowMenu}
+            {@render overflowMenu(overflowView)}
+          {:else}
+            <DefaultOverflowMenu view={overflowView} {orientation} />
+          {/if}
+        </span>
+      {/if}
+    </div>
+  {/each}
+
+  <!-- The measurement layer: hidden, inert and observed. Text reflow (a language, a font,
+       browser zoom) fires the observers; no code handles it. -->
+  <div aria-hidden="true" inert style={measureLayerStyle}>
+    {#each layout.measured as measuredPart (measuredPart.measureKey)}
+      <!-- A custom item without a `custom` snippet is a socket, measured where it renders: a
+           second <slot> of its name here would take the projected children from the row. One
+           whose snippet draws nothing here is measured where it renders too, by `ctx.measure`. -->
+      {#if measuredPart.kind !== 'custom' || custom}
+        <Measured
+          {orientation}
+          onlyWhenDrawn={measuredPart.kind === 'custom'}
+          onLength={(length) => report(measuredPart.measureKey, length)}
+        >
+          {@render part(measuredPart, 'measure')}
+        </Measured>
+      {/if}
+    {/each}
+    <Measured
+      {orientation}
+      onLength={(length) => report(toolbarMeasureKey.overflowTrigger, length)}
+    >
+      {@render moreButton(false, noop)}
+    </Measured>
+  </div>
+</div>

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

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

package/dist/toolbar/paint.d.ts

@@ -0,0 +1,3 @@
+export declare const SURFACE: string;
+export declare const BORDER: string;
+export declare const ACTIVE: string;

package/dist/toolbar/paint.js

@@ -0,0 +1,9 @@
+/**
+ * The default parts' colors: CSS variables only, because the defaults are meant to be replaced.
+ * `--epdf-toolbar-surface` (the "More" menu and folded groups), `--epdf-toolbar-border` and
+ * `--epdf-toolbar-active` (a pressed or open button).
+ */
+import { paintDefault } from '@embedpdf/web';
+export const SURFACE = paintDefault('toolbar-surface');
+export const BORDER = paintDefault('toolbar-border');
+export const ACTIVE = paintDefault('toolbar-active');

package/dist/toolbar/props.d.ts

@@ -0,0 +1,48 @@
+/** The props of `<Toolbar>`: the bar and how it runs, and a snippet for every part you draw. */
+import type { Snippet } from 'svelte';
+import type { BarSchema, CustomSlotCtx } from '@embedpdf/core-ui';
+import type { ResolvedCommand } from '@embedpdf/plugin-commands/contract';
+import type { CollapsedGroupView, GroupDisclosureView, OverflowMenuView } from './views.js';
+export interface ToolbarProps {
+    /** What goes in the toolbar: its sections, groups and items. */
+    bar: BarSchema;
+    /**
+     * Which way the toolbar runs. A vertical toolbar fits the height it's given, so give it one; it
+     * stacks its sections top, middle and bottom, and draws every command at `'icon'`, with the
+     * label for a tooltip. Default `'horizontal'`.
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /** Px between adjacent items (the CSS flex gap; the fit budgets the same number). Default 8. */
+    gap?: number;
+    /**
+     * The thickness of the separator your `separator` snippet draws: its width across a horizontal
+     * toolbar, its height in a vertical one. Default 1.
+     */
+    separatorWidth?: number;
+    /** The toolbar's name for screen readers, for a page with more than one toolbar. */
+    'aria-label'?: string;
+    class?: string;
+    style?: string;
+    /** A command's button at a variant. Default: a plain `<button>` with the command's label. */
+    command?: Snippet<[command: ResolvedCommand, variant: string, run: () => void]>;
+    /**
+     * Your own items, by `name` (from `custom(name, command)`): it draws every custom item in the
+     * bar, in the live row and in the hidden measurement layer (`ctx.layer`). Without it, each item
+     * is a native `<slot name>` element with its command's button inside, for a custom element's
+     * children to fill. An item the snippet draws nothing for in the measurement layer
+     * (`ctx.layer === 'measure'`) is measured where it renders instead: report its length with
+     * `ctx.measure`. The first element of an item that takes focus is the item's stop in the
+     * toolbar's arrow-key order.
+     */
+    custom?: Snippet<[name: string, variant: string, ctx: CustomSlotCtx]>;
+    /** A folded group: its button and its menu. Default: a `<select>` for `'select'`, a menu button for `'menu'`. */
+    collapsed?: Snippet<[view: CollapsedGroupView]>;
+    /** The button of a group that shed items, and its menu. Default: a chevron opening a menu. */
+    groupTrigger?: Snippet<[view: GroupDisclosureView]>;
+    /** The line between groups. Default: a 1px line across the toolbar. */
+    separator?: Snippet;
+    /** The "More" button. Default: a plain ⋯ button. */
+    overflowTrigger?: Snippet<[isOpen: boolean, toggle: () => void]>;
+    /** The "More" menu, with its sections, rows and the call that runs each one. Default: a minimal popover. */
+    overflowMenu?: Snippet<[view: OverflowMenuView]>;
+}

package/dist/toolbar/props.js

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

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

@@ -0,0 +1,14 @@
+import type { BarSchema, StripView as StripViewOf, StripViewGroup as StripViewGroupOf } from '@embedpdf/core-ui';
+import type { ResolvedCommand } from '@embedpdf/plugin-commands/contract';
+import { type CurrentValue, type MaybeGetter } from '../runtime/values.svelte.js';
+/** A group of a strip: its visible commands, in bar order. Groups are separator boundaries. */
+export type StripViewGroup = StripViewGroupOf<ResolvedCommand>;
+/** A strip, resolved: only visible commands, only groups with one; `execute` runs one for this component's document. */
+export type StripView = StripViewOf<ResolvedCommand>;
+/**
+ * The strip a bar shows now, as `{ current }`: the schema says what could appear, each command's
+ * `visible` decides what does. `null` while nothing applies, so `{#if strip.current}` is all the
+ * show-and-hide logic a strip needs. `current` changes only when a command in it changes. Pass a
+ * function for a bar that changes.
+ */
+export declare function useStripView(bar: MaybeGetter<BarSchema | undefined>): CurrentValue<StripView | null>;

package/dist/toolbar/strip.svelte.js

@@ -0,0 +1,35 @@
+/**
+ * `useStripView(bar)`: a bar projected through the command registry, live and unmeasured.
+ * `<Toolbar>`'s sibling, for a contextual strip (a chrome schema's `strips`) that has no width to
+ * fit into.
+ */
+import { normalizeBar, sameStripGroups, stripGroupsOf } from '@embedpdf/core-ui';
+import { CommandsToken } from '@embedpdf/plugin-commands/contract/host';
+import { resolvedCommandsEqual } from '@embedpdf/plugin-commands/contract';
+import { useCapability, useDocumentId, useKernelValue } from '../runtime/readers.svelte.js';
+import { currentOf, derivedValue, valueOf, } from '../runtime/values.svelte.js';
+const sameGroups = (left, right) => sameStripGroups(left, right, resolvedCommandsEqual);
+const NO_GROUPS = Object.freeze([]);
+/**
+ * The strip a bar shows now, as `{ current }`: the schema says what could appear, each command's
+ * `visible` decides what does. `null` while nothing applies, so `{#if strip.current}` is all the
+ * show-and-hide logic a strip needs. `current` changes only when a command in it changes. Pass a
+ * function for a bar that changes.
+ */
+export function useStripView(bar) {
+    const commands = useCapability(CommandsToken);
+    const documentId = useDocumentId();
+    const normalized = $derived.by(() => {
+        const schema = valueOf(bar);
+        return schema ? normalizeBar(schema) : null;
+    });
+    const groups = useKernelValue(() => normalized
+        ? stripGroupsOf(normalized, (id) => commands.resolveCommand(id, documentId.current ?? undefined))
+        : NO_GROUPS, sameGroups);
+    return currentOf(derivedValue(() => groups.current.length === 0
+        ? null
+        : {
+            groups: groups.current,
+            execute: (id) => void commands.execute(id, { documentId: documentId.current ?? undefined }),
+        }));
+}

package/dist/toolbar/views.d.ts

@@ -0,0 +1,14 @@
+/**
+ * The views `<Toolbar>`'s snippets receive and the parts it draws: core-ui's (`layoutToolbar`,
+ * `groupMenuView`), over the commands plugin's resolved command.
+ */
+import type { CollapsedGroupView as CollapsedGroupViewOf, GroupDisclosureView as GroupDisclosureViewOf, OverflowMenuView as OverflowMenuViewOf, ToolbarPart as ToolbarPartOf } from '@embedpdf/core-ui';
+import type { ResolvedCommand } from '@embedpdf/plugin-commands/contract';
+/** What the `collapsed` snippet draws: a group folded into one control. */
+export type CollapsedGroupView = CollapsedGroupViewOf<ResolvedCommand>;
+/** What the `groupTrigger` snippet draws: the button inside a group that shed some of its items. */
+export type GroupDisclosureView = GroupDisclosureViewOf<ResolvedCommand>;
+/** What the `overflowMenu` snippet draws: the "More" menu. */
+export type OverflowMenuView = OverflowMenuViewOf<ResolvedCommand>;
+/** One thing in the toolbar, as `<Toolbar>` draws it. */
+export type ToolbarPart = ToolbarPartOf<ResolvedCommand>;

package/dist/toolbar/views.js

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

package/dist/toolbar.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @embedpdf/svelte/toolbar — a toolbar that fits the room it has.
+ *
+ * `<Toolbar>` fits a bar of commands into its width, or its height when it's vertical (labels
+ * become icons, groups fold, the rest goes into a "More" menu), is one tab stop with arrow keys
+ * along it, and lets you draw every part with snippets; `useStripView()` is a strip that doesn't
+ * fit itself; and the schema a bar is written in comes from here too.
+ */
+export { DEFAULT_IMPORTANCE, PINNED, custom, group, item } from '@embedpdf/core-ui';
+export type { BarChild, BarGroup, BarItem, BarSchema, BarSections, CustomItem, Importance, OverflowRow, OverflowSection, Variant, } from '@embedpdf/core-ui';
+export { default as Toolbar } from './toolbar/Toolbar.svelte';
+export type { ToolbarProps } from './toolbar/props.js';
+export type { CustomSlotCtx } from '@embedpdf/core-ui';
+export type { CollapsedGroupView, GroupDisclosureView, OverflowMenuView } from './toolbar/views.js';
+export { useStripView } from './toolbar/strip.svelte.js';
+export type { StripView, StripViewGroup } from './toolbar/strip.svelte.js';

package/dist/toolbar.js

@@ -0,0 +1,12 @@
+/**
+ * @embedpdf/svelte/toolbar — a toolbar that fits the room it has.
+ *
+ * `<Toolbar>` fits a bar of commands into its width, or its height when it's vertical (labels
+ * become icons, groups fold, the rest goes into a "More" menu), is one tab stop with arrow keys
+ * along it, and lets you draw every part with snippets; `useStripView()` is a strip that doesn't
+ * fit itself; and the schema a bar is written in comes from here too.
+ */
+// The toolbar's vocabulary: the schema a bar is written in.
+export { DEFAULT_IMPORTANCE, PINNED, custom, group, item } from '@embedpdf/core-ui';
+export { default as Toolbar } from './toolbar/Toolbar.svelte';
+export { useStripView } from './toolbar/strip.svelte.js';

package/dist/view-manager/readers.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The view manager's readers: the API, the panes as a reactive object, and its events. The view
+ * manager is a workspace plugin, so all three work before any document opens.
+ */
+import type { EventHook } from '@embedpdf/core';
+import type { ViewManagerCapability } from '@embedpdf/plugin-view-manager';
+/** The view manager's API (panes and their tabs), for app code. */
+export declare function useViewManager(): ViewManagerCapability;
+/**
+ * The panes, in order, and the focused one's id (the page's State table, declared once in
+ * `viewManagerState`), as a reactive object: `state.panes`. With a selector, the value it picks as
+ * `{ current }`, which changes only when that value does.
+ */
+export declare const useViewManagerState: import("../index.js").StateReader<{
+    panes: readonly import("@embedpdf/plugin-view-manager").PaneInfo[];
+    focusedPaneId: string | null;
+}>;
+/** Subscribe to one view-manager event while the component lives: `useViewManagerEvent((viewManager) => viewManager.onDocumentMoved, handler)`. */
+export declare function useViewManagerEvent<T>(select: (viewManager: ViewManagerCapability) => EventHook<T>, handler: (event: T) => void): void;

package/dist/view-manager/readers.js

@@ -0,0 +1,17 @@
+import { ViewManagerToken, viewManagerState } from '@embedpdf/plugin-view-manager';
+import { useCapability, useCapabilityEvent } from '../runtime/readers.svelte.js';
+import { stateReader } from '../runtime/state.svelte.js';
+/** The view manager's API (panes and their tabs), for app code. */
+export function useViewManager() {
+    return useCapability(ViewManagerToken);
+}
+/**
+ * The panes, in order, and the focused one's id (the page's State table, declared once in
+ * `viewManagerState`), as a reactive object: `state.panes`. With a selector, the value it picks as
+ * `{ current }`, which changes only when that value does.
+ */
+export const useViewManagerState = stateReader(viewManagerState);
+/** Subscribe to one view-manager event while the component lives: `useViewManagerEvent((viewManager) => viewManager.onDocumentMoved, handler)`. */
+export function useViewManagerEvent(select, handler) {
+    useCapabilityEvent(ViewManagerToken, select, handler);
+}

package/dist/view-manager.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @embedpdf/svelte/view-manager — panes, each with its own tabs.
+ *
+ * It stays headless: it gives you the panes, and you lay them out (split, grid, stacked), draw
+ * each pane's tab strip over `pane.documentIds`, and wrap its body in
+ * `<DocumentScope id={pane.activeDocumentId}>` so its Stage shows that pane's document. The
+ * readers are the plugin's: `useViewManager()` (the API), `useViewManagerState()` and
+ * `useViewManagerEvent()`.
+ */
+export * from '@embedpdf/plugin-view-manager';
+export { useViewManager, useViewManagerEvent, useViewManagerState, } from './view-manager/readers.js';

package/dist/view-manager.js

@@ -0,0 +1,12 @@
+/**
+ * @embedpdf/svelte/view-manager — panes, each with its own tabs.
+ *
+ * It stays headless: it gives you the panes, and you lay them out (split, grid, stacked), draw
+ * each pane's tab strip over `pane.documentIds`, and wrap its body in
+ * `<DocumentScope id={pane.activeDocumentId}>` so its Stage shows that pane's document. The
+ * readers are the plugin's: `useViewManager()` (the API), `useViewManagerState()` and
+ * `useViewManagerEvent()`.
+ */
+// Registration travels with the UI.
+export * from '@embedpdf/plugin-view-manager';
+export { useViewManager, useViewManagerEvent, useViewManagerState, } from './view-manager/readers.js';