Add scroll and navigation example to the snippet documentation

Author: bobsingor

.changeset/layout-ready-event-page-info.md

@@ -0,0 +1,5 @@
+---
+'@embedpdf/plugin-scroll': minor
+---
+
+Added `pageNumber` and `totalPages` properties to `LayoutReadyEvent`. This allows consumers to get the current page information immediately when the layout becomes ready, without needing to subscribe to a separate `onPageChange` event.

.changeset/snippet-capability-scope-type-exports.md

@@ -0,0 +1,59 @@
+---
+'@embedpdf/snippet': minor
+---
+
+Added comprehensive type exports for all plugin Capabilities and Scopes, enabling proper TypeScript support when using plugin APIs.
+
+### New Type Exports
+
+All plugins now export their `*Capability` and `*Scope` types, allowing developers to properly type variables when using `plugin.provides()` and `forDocument()`:
+
+- **Viewport**: `ViewportCapability`, `ViewportScope`, `ViewportMetrics`
+- **Scroll**: `ScrollCapability`, `ScrollScope`, `ScrollMetrics`, `PageChangeEvent`, `ScrollEvent`, `LayoutChangeEvent`
+- **Spread**: `SpreadCapability`, `SpreadScope`
+- **Zoom**: `ZoomCapability`, `ZoomScope`, `ZoomLevel`, `ZoomChangeEvent`
+- **Rotate**: `RotateCapability`, `RotateScope`
+- **Tiling**: `TilingCapability`, `TilingScope`
+- **Thumbnail**: `ThumbnailCapability`, `ThumbnailScope`
+- **Annotation**: `AnnotationCapability`, `AnnotationScope`, `AnnotationEvent`
+- **Search**: `SearchCapability`, `SearchScope`
+- **Selection**: `SelectionCapability`, `SelectionScope`
+- **Capture**: `CaptureCapability`, `CaptureScope`
+- **Redaction**: `RedactionCapability`, `RedactionScope`, `RedactionMode`, `RedactionItem`
+- **UI**: `UIScope` (UICapability was already exported)
+- **I18n**: `I18nCapability`, `I18nScope`, `Locale`, `LocaleChangeEvent`
+- **Commands**: `CommandScope` (CommandsCapability was already exported)
+- **DocumentManager**: `DocumentManagerCapability`, `DocumentChangeEvent`, `LoadDocumentUrlOptions`, `LoadDocumentBufferOptions`
+- **Print**: `PrintCapability`, `PrintScope`
+- **Fullscreen**: `FullscreenCapability`
+- **Bookmark**: `BookmarkCapability`, `BookmarkScope`
+- **Export**: `ExportCapability`, `ExportScope`
+- **Pan**: `PanCapability`, `PanScope`
+- **History**: `HistoryCapability`, `HistoryScope`
+- **Attachment**: `AttachmentCapability`, `AttachmentScope`
+- **Render**: `RenderCapability`, `RenderScope`
+- **InteractionManager**: `InteractionManagerCapability`, `InteractionManagerScope`
+
+### Usage Example
+
+```typescript
+import {
+  ScrollPlugin,
+  type ScrollCapability,
+  type ScrollScope,
+  type PageChangeEvent,
+} from '@embedpdf/snippet';
+
+// Type the capability returned by provides()
+const scroll: ScrollCapability = registry
+  .getPlugin<ScrollPlugin>('scroll')
+  ?.provides();
+
+// Type the scoped API for a specific document
+const doc: ScrollScope = scroll.forDocument('my-document');
+
+// Type event callbacks
+scroll.onPageChange((event: PageChangeEvent) => {
+  console.log(`Page ${event.pageNumber} of ${event.totalPages}`);
+});
+```

packages/plugin-scroll/src/lib/scroll-plugin.ts

@@ -255,7 +255,12 @@ export class ScrollPlugin extends BasePlugin<
     const viewport = this.viewport.forDocument(documentId);
     viewport.scrollTo({ ...docState.scrollOffset, behavior: 'instant' });
 
-    this.layoutReady$.emit({ documentId, isInitial });
+    this.layoutReady$.emit({
+      documentId,
+      isInitial,
+      pageNumber: docState.currentPage,
+      totalPages: docState.totalPages,
+    });
   }
 
   public clearLayoutReady(documentId: string): void {

packages/plugin-scroll/src/lib/types.ts

@@ -139,6 +139,8 @@ export interface LayoutReadyEvent {
   documentId: string;
   /** True only on the first layout ready after document load, false on subsequent (e.g., tab switches) */
   isInitial: boolean;
+  pageNumber: number;
+  totalPages: number;
 }
 
 // Scoped scroll capability

viewers/snippet/src/embedpdf.ts

@@ -11,25 +11,99 @@ import { PDFViewerConfig } from './components/app';
 export const version: string = '__EMBEDPDF_VERSION__';
 
 // ============================================================================
-// Plugin Classes - for use with registry.getPlugin<T>()
+// Plugin Classes, Capabilities & Scopes - for use with registry.getPlugin<T>()
 // ============================================================================
-export { ViewportPlugin, type ViewportPluginConfig } from '@embedpdf/plugin-viewport/preact';
+export {
+  ViewportPlugin,
+  type ViewportPluginConfig,
+  type ViewportCapability,
+  type ViewportScope,
+  type ViewportMetrics,
+} from '@embedpdf/plugin-viewport/preact';
 export {
   ScrollPlugin,
   ScrollStrategy,
   type ScrollPluginConfig,
+  type ScrollCapability,
+  type ScrollScope,
+  type ScrollMetrics,
+  type PageChangeEvent,
+  type ScrollEvent,
+  type LayoutChangeEvent,
 } from '@embedpdf/plugin-scroll/preact';
-export { SpreadPlugin, SpreadMode, type SpreadPluginConfig } from '@embedpdf/plugin-spread/preact';
-export { ZoomPlugin, ZoomMode, type ZoomPluginConfig } from '@embedpdf/plugin-zoom/preact';
-export { RotatePlugin, type RotatePluginConfig } from '@embedpdf/plugin-rotate/preact';
-export { TilingPlugin, type TilingPluginConfig } from '@embedpdf/plugin-tiling/preact';
-export { ThumbnailPlugin, type ThumbnailPluginConfig } from '@embedpdf/plugin-thumbnail/preact';
-export { AnnotationPlugin, type AnnotationPluginConfig } from '@embedpdf/plugin-annotation/preact';
-export { SearchPlugin, type SearchPluginConfig } from '@embedpdf/plugin-search/preact';
-export { SelectionPlugin, type SelectionPluginConfig } from '@embedpdf/plugin-selection/preact';
-export { CapturePlugin, type CapturePluginConfig } from '@embedpdf/plugin-capture/preact';
-export { RedactionPlugin, type RedactionPluginConfig } from '@embedpdf/plugin-redaction/preact';
-export { UIPlugin, type UIPluginConfig, type UICapability } from '@embedpdf/plugin-ui/preact';
+export {
+  SpreadPlugin,
+  SpreadMode,
+  type SpreadPluginConfig,
+  type SpreadCapability,
+  type SpreadScope,
+} from '@embedpdf/plugin-spread/preact';
+export {
+  ZoomPlugin,
+  ZoomMode,
+  type ZoomPluginConfig,
+  type ZoomCapability,
+  type ZoomScope,
+  type ZoomLevel,
+  type ZoomChangeEvent,
+} from '@embedpdf/plugin-zoom/preact';
+export {
+  RotatePlugin,
+  type RotatePluginConfig,
+  type RotateCapability,
+  type RotateScope,
+} from '@embedpdf/plugin-rotate/preact';
+export {
+  TilingPlugin,
+  type TilingPluginConfig,
+  type TilingCapability,
+  type TilingScope,
+} from '@embedpdf/plugin-tiling/preact';
+export {
+  ThumbnailPlugin,
+  type ThumbnailPluginConfig,
+  type ThumbnailCapability,
+  type ThumbnailScope,
+} from '@embedpdf/plugin-thumbnail/preact';
+export {
+  AnnotationPlugin,
+  type AnnotationPluginConfig,
+  type AnnotationCapability,
+  type AnnotationScope,
+  type AnnotationEvent,
+} from '@embedpdf/plugin-annotation/preact';
+export {
+  SearchPlugin,
+  type SearchPluginConfig,
+  type SearchCapability,
+  type SearchScope,
+} from '@embedpdf/plugin-search/preact';
+export {
+  SelectionPlugin,
+  type SelectionPluginConfig,
+  type SelectionCapability,
+  type SelectionScope,
+} from '@embedpdf/plugin-selection/preact';
+export {
+  CapturePlugin,
+  type CapturePluginConfig,
+  type CaptureCapability,
+  type CaptureScope,
+} from '@embedpdf/plugin-capture/preact';
+export {
+  RedactionPlugin,
+  RedactionMode,
+  type RedactionPluginConfig,
+  type RedactionCapability,
+  type RedactionScope,
+  type RedactionItem,
+} from '@embedpdf/plugin-redaction/preact';
+export {
+  UIPlugin,
+  type UIPluginConfig,
+  type UICapability,
+  type UIScope,
+} from '@embedpdf/plugin-ui/preact';
 
 // UI Schema Types - for customizing toolbars, menus, sidebars, etc.
 export type {
@@ -87,29 +161,82 @@ export type {
   // Utility types
   VisibilityDependency,
 } from '@embedpdf/plugin-ui/preact';
-export { I18nPlugin, type I18nPluginConfig } from '@embedpdf/plugin-i18n/preact';
+export {
+  I18nPlugin,
+  type I18nPluginConfig,
+  type I18nCapability,
+  type I18nScope,
+  type Locale,
+  type LocaleChangeEvent,
+} from '@embedpdf/plugin-i18n/preact';
 export {
   CommandsPlugin,
   type CommandsPluginConfig,
   type Command,
   type ResolvedCommand,
   type CommandsCapability,
+  type CommandScope,
 } from '@embedpdf/plugin-commands/preact';
 export {
   DocumentManagerPlugin,
   type DocumentManagerPluginConfig,
+  type DocumentManagerCapability,
+  type DocumentChangeEvent,
+  type LoadDocumentUrlOptions,
+  type LoadDocumentBufferOptions,
 } from '@embedpdf/plugin-document-manager/preact';
-export { PrintPlugin, type PrintPluginConfig } from '@embedpdf/plugin-print/preact';
-export { FullscreenPlugin, type FullscreenPluginConfig } from '@embedpdf/plugin-fullscreen/preact';
-export { BookmarkPlugin, type BookmarkPluginConfig } from '@embedpdf/plugin-bookmark/preact';
-export { ExportPlugin, type ExportPluginConfig } from '@embedpdf/plugin-export/preact';
-export { PanPlugin, type PanPluginConfig } from '@embedpdf/plugin-pan/preact';
-export { HistoryPlugin, type HistoryPluginConfig } from '@embedpdf/plugin-history/preact';
-export { AttachmentPlugin, type AttachmentPluginConfig } from '@embedpdf/plugin-attachment/preact';
-export { RenderPlugin, type RenderPluginConfig } from '@embedpdf/plugin-render/preact';
+export {
+  PrintPlugin,
+  type PrintPluginConfig,
+  type PrintCapability,
+  type PrintScope,
+} from '@embedpdf/plugin-print/preact';
+export {
+  FullscreenPlugin,
+  type FullscreenPluginConfig,
+  type FullscreenCapability,
+} from '@embedpdf/plugin-fullscreen/preact';
+export {
+  BookmarkPlugin,
+  type BookmarkPluginConfig,
+  type BookmarkCapability,
+  type BookmarkScope,
+} from '@embedpdf/plugin-bookmark/preact';
+export {
+  ExportPlugin,
+  type ExportPluginConfig,
+  type ExportCapability,
+  type ExportScope,
+} from '@embedpdf/plugin-export/preact';
+export {
+  PanPlugin,
+  type PanPluginConfig,
+  type PanCapability,
+  type PanScope,
+} from '@embedpdf/plugin-pan/preact';
+export {
+  HistoryPlugin,
+  type HistoryPluginConfig,
+  type HistoryCapability,
+  type HistoryScope,
+} from '@embedpdf/plugin-history/preact';
+export {
+  AttachmentPlugin,
+  type AttachmentPluginConfig,
+  type AttachmentCapability,
+  type AttachmentScope,
+} from '@embedpdf/plugin-attachment/preact';
+export {
+  RenderPlugin,
+  type RenderPluginConfig,
+  type RenderCapability,
+  type RenderScope,
+} from '@embedpdf/plugin-render/preact';
 export {
   InteractionManagerPlugin,
   type InteractionManagerPluginConfig,
+  type InteractionManagerCapability,
+  type InteractionManagerScope,
 } from '@embedpdf/plugin-interaction-manager/preact';
 
 // Re-export from models

website/src/components/navbar.tsx

@@ -18,6 +18,9 @@ export default function Navbar() {
       setScrolled(window.scrollY > 10)
     }
 
+    // Check initial scroll position on mount
+    handleScroll()
+
     window.addEventListener('scroll', handleScroll)
     return () => window.removeEventListener('scroll', handleScroll)
   }, [])