### Enable UI Features Examples

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/06-events-features-localization.md

Examples showing how to enable single or multiple UI features using the instance.

```javascript
instance.UI.enableFeatures([instance.UI.Feature.MultiTab]);
```

```javascript
instance.UI.enableFeatures([
  instance.UI.Feature.MultiTab,
  instance.UI.Feature.Redaction,
  instance.UI.Feature.MeasurementTools
]);
```

--------------------------------

### Enable Feature Flag Example

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/06-events-features-localization.md

Example showing how to enable a beta feature flag.

```javascript
instance.UI.enableFeatureFlag(instance.UI.FeatureFlags.SomeBetaFeature);
```

--------------------------------

### Run the project

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/README.md

Start the development server.

```bash
npm start
```

--------------------------------

### Install dependencies

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/README.md

Install the project dependencies using npm.

```bash
npm install
```

--------------------------------

### Get Fit Mode Example

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/05-tools-and-settings.md

Retrieves and logs the current fit mode.

```javascript
const fit = instance.UI.getFitMode();
console.log(`Current fit mode: ${fit}`);
```

--------------------------------

### Get Layout Mode Example

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/05-tools-and-settings.md

Retrieves the current layout mode and checks if it matches a specific constant.

```javascript
const mode = instance.UI.getLayoutMode();
if (mode === instance.UI.LayoutMode.Facing) {
  console.log('Viewing in two-page spread');
}
```

--------------------------------

### Set Zoom Level Examples

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/05-tools-and-settings.md

Demonstrates setting the zoom level to specific percentages.

```javascript
// Zoom to 150%
instance.UI.setZoomLevel(150);

// Zoom to 75%
instance.UI.setZoomLevel(75);
```

--------------------------------

### WebViewer UI Code Example Conventions

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/00-INDEX.md

Standard format for displaying method signatures and usage within the WebViewer instance.

```javascript
// Syntax: method signature
instance.UI.methodName(parameter);

// Usage in context
WebViewer(...).then(function(instance) {
  instance.UI.methodName(parameter);
});
```

--------------------------------

### Set Layout Mode Examples

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/05-tools-and-settings.md

Demonstrates setting various layout modes like single page, continuous scroll, and two-page spread.

```javascript
// Single page mode
instance.UI.setLayoutMode(instance.UI.LayoutMode.Single);

// Continuous scroll
instance.UI.setLayoutMode(instance.UI.LayoutMode.Continuous);

// Two-page spread
instance.UI.setLayoutMode(instance.UI.LayoutMode.Facing);
```

--------------------------------

### Set Fit Mode Examples

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/05-tools-and-settings.md

Demonstrates setting fit modes to page width or fitting the entire page.

```javascript
// Fit page width
instance.UI.setFitMode(instance.UI.FitMode.FitWidth);

// Fit entire page
instance.UI.setFitMode(instance.UI.FitMode.FitPage);
```

--------------------------------

### Disable Feature Flag Example

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/06-events-features-localization.md

Example showing how to disable a beta feature flag.

```javascript
instance.UI.disableFeatureFlag(instance.UI.FeatureFlags.SomeBetaFeature);
```

--------------------------------

### Get Zoom Level Example

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/05-tools-and-settings.md

Retrieves and logs the current zoom level.

```javascript
const zoom = instance.UI.getZoomLevel();
console.log(`Current zoom: ${zoom}%`);
```

--------------------------------

### Destroy UI Instance Usage

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/02-core-apis.md

Example of cleaning up a WebViewer instance and releasing references.

```javascript
WebViewer({
  path: '/lib'
}).then(function(instance) {
  // ... use WebViewer ...
  
  // Later: clean up
  instance.destroyUIInstance();
  
  // All references are released
});
```

--------------------------------

### Disable UI Features Example

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/06-events-features-localization.md

Example showing how to disable the signature feature.

```javascript
instance.UI.disableFeatures([instance.UI.Feature.Signature]);
```

--------------------------------

### Implement Custom Measurement Display

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/10-advanced-features.md

Example implementation of a custom measurement overlay handler returning formatted HTML.

```javascript
instance.UI.setCustomMeasurementOverlayInfo((measurement) => {
  return `
    ${measurement.value} ${measurement.unit}
    <br/>
    Scale: ${measurement.scale}
  `;
});
```

--------------------------------

### Get Configured Panels

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/04-ui-control.md

Retrieves an array of all currently configured panel objects.

```javascript
const panels = instance.UI.getPanels();
panels.forEach(panel => {
  console.log(`${panel.dataElement} at ${panel.location}`);
});
```

--------------------------------

### Start Text Comparison

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/04-ui-control.md

Enables text comparison mode to highlight differences between two loaded documents. Requires multi-viewer mode.

```javascript
async startTextComparison(): Promise<void>
```

```javascript
await instance.UI.enterMultiViewerMode();
await instance.UI.loadDocument('original.pdf', {}, 1);
await instance.UI.loadDocument('modified.pdf', {}, 2);
await instance.UI.startTextComparison();
```

--------------------------------

### getMeasurementScalePreset

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/10-advanced-features.md

Gets a measurement scale preset by name.

```APIDOC
## getMeasurementScalePreset(presetName)

### Description
Gets a measurement scale preset by name.

### Parameters
- **presetName** (string) - Required - The name of the preset to retrieve.

### Returns
- **object | null** - Preset configuration or null if not found.
```

--------------------------------

### Set Min Zoom Level Example

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/05-tools-and-settings.md

Sets the minimum zoom limit to 50%.

```javascript
// Min zoom 50%
instance.UI.setMinZoomLevel(50);
```

--------------------------------

### Initialize and configure WebViewer

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/README.md

Demonstrates initializing the WebViewer instance, loading a document with progress tracking, and applying UI configurations.

```javascript
WebViewer({
  path: '/lib',
  documentId: 'my-document'
}).then(function(instance) {
  const UI = instance.UI;
  
  // Load document
  UI.loadDocument('https://example.com/sample.pdf', {
    filename: 'Sample PDF',
    onLoadingProgress: (percent) => {
      console.log(`${percent}% loaded`);
    }
  });
  
  // Listen to events
  UI.addEventListener(UI.Events.VIEWER_LOADED, () => {
    console.log('Viewer ready!');
  });
  
  // Configure UI
  UI.setTheme(UI.Theme.Dark);
  UI.setLanguage('en');
  UI.setZoomLevel(150);
});
```

--------------------------------

### Build the project

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/README.md

Create a production build of the project.

```bash
npm run build
```

--------------------------------

### Initialize UI Instance Signature

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/02-core-apis.md

The primary entry point for initializing the UI, optionally accepting a shadow root for WebComponent mode.

```javascript
createUIInstance(instanceRootNode?: ShadowRoot): void
```

--------------------------------

### createUIInstance(instanceRootNode?)

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/01-overview.md

Creates and mounts a WebViewer UI instance. In iframe mode, it reads config from hash parameters; in WebComponent mode, it mounts into the provided shadow root.

```APIDOC
## createUIInstance(instanceRootNode?)

### Description
Creates and mounts a WebViewer UI instance. When called without arguments in iframe mode, reads config from hash parameters and mounts into the document. In WebComponent mode, the host calls this once per <apryse-webviewer> element, passing the shadow root.

### Parameters
- **instanceRootNode** (Node) - Optional - The root node for mounting the UI instance.
```

--------------------------------

### Set Page Labels

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/12-remaining-apis-summary.md

Configures custom page numbering labels using prefixes, starting indices, and specific numbering styles.

```javascript
setPageLabels(
  labels: Array<{
    prefix?: string,
    index?: number,
    style?: string
  }>
): void
```

```javascript
instance.UI.setPageLabels([
  { prefix: 'Cover-', style: 'D' },
  { prefix: 'Chapter 1-', index: 1, style: 'D' }
]);
```

--------------------------------

### TabManager.getAllTabs

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/03-document-management.md

Gets all open tabs.

```APIDOC
## TabManager.getAllTabs

### Description
Retrieves an array of all currently open tabs.

### Signature
`getAllTabs(): Array<{ id: number, options: object, src: string | Blob | File | ArrayBuffer }>`

### Returns
- **Array** - List of tab objects, each containing id, options, and src.

### Example
```javascript
const allTabs = instance.UI.TabManager.getAllTabs();
allTabs.forEach(tab => {
  console.log(`Tab ${tab.id}: ${tab.options.filename}`);
});
```
```

--------------------------------

### getAvailableLanguages()

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/06-events-features-localization.md

Gets a list of supported languages.

```APIDOC
## getAvailableLanguages()

### Description
Gets list of supported languages.

### Returns
- (Array<string>) - Array of language codes that can be loaded.

### Example
```javascript
const languages = instance.UI.getAvailableLanguages();
```
```

--------------------------------

### getActiveDocumentViewerKey

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/04-ui-control.md

Gets which viewer is currently active.

```APIDOC
## getActiveDocumentViewerKey()

### Description
Gets which viewer is currently active.

### Signature
`getActiveDocumentViewerKey(): number`

### Returns
1 if left viewer is active, 2 if right viewer is active.
```

--------------------------------

### getCurrentLanguage()

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/06-events-features-localization.md

Gets the current UI language code.

```APIDOC
## getCurrentLanguage()

### Description
Gets the current UI language code.

### Returns
- (string) - Language code (e.g., 'en', 'es', 'fr').

### Example
```javascript
const lang = instance.UI.getCurrentLanguage();
```
```

--------------------------------

### createUIInstance

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/02-core-apis.md

Creates and mounts a single WebViewer UI instance. This function is the primary entry point for initializing the UI.

```APIDOC
## createUIInstance

### Description
Creates and mounts a single WebViewer UI instance. This function is the primary entry point for initializing the UI.

### Signature
`createUIInstance(instanceRootNode?: ShadowRoot): void`

### Parameters
- **instanceRootNode** (ShadowRoot) - Optional - The shadow root to mount into. If omitted, falls back to legacy getRootNode() scan. Used in WebComponent multi-instance mode.

### Example
```javascript
// WebComponent mode (manual)
export function initializeViewer(shadowRoot) {
  window.createUIInstance(shadowRoot);
}
```
```

--------------------------------

### Define and Use UI Panels

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/11-constants-enums-types.md

Constants for predefined panels and how to add a panel using the UI.Panels enum.

```javascript
UI.Panels = {
  OUTLINE: 'Outline',
  ANNOTATION: 'Annotations',
  THUMBNAIL: 'Thumbnails',
  BOOKMARKS: 'Bookmarks',
  SEARCH: 'Search',
  LAYERS: 'Layers'
}
```

```javascript
instance.UI.addPanel({
  dataElement: 'myOutlines',
  location: 'left',
  render: instance.UI.Panels.OUTLINE
});
```

--------------------------------

### Configuring WebComponent Root Node

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/02-core-apis.md

Demonstrates setting the root node to a shadow DOM host before initializing the UI instance.

```javascript
// Inside shadow DOM host element
const shadowRoot = this.attachShadow({ mode: 'open' });
setRootNode(shadowRoot);
window.createUIInstance(shadowRoot);
```

--------------------------------

### TabManager.getActiveTab

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/03-document-management.md

Gets information about the currently active tab.

```APIDOC
## TabManager.getActiveTab

### Description
Retrieves information about the currently active tab, including its ID, loading options, and document source.

### Signature
`getActiveTab(): { id: number, options: object, src: string | Blob | File | ArrayBuffer }`

### Returns
- **id** (number) - Tab identifier
- **options** (object) - Tab loading options
- **src** (string | Blob | File | ArrayBuffer) - Document source

### Example
```javascript
const activeTab = instance.UI.TabManager.getActiveTab();
console.log(`Active tab: ${activeTab.id}, File: ${activeTab.options.filename}`);
```
```

--------------------------------

### getToolMode(): string

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/05-tools-and-settings.md

Gets the name of the currently active tool.

```APIDOC
## getToolMode(): string

### Description
Retrieves the name of the currently active tool.

### Returns
- (string) - The name of the current tool.

### Example
```javascript
const currentTool = instance.UI.getToolMode();
```
```

--------------------------------

### instance.UI.hotkeys

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/12-remaining-apis-summary.md

Methods for managing global keyboard shortcuts in the WebViewer UI.

```APIDOC
## instance.UI.hotkeys

### Description
Provides methods to enable, disable, register, and unregister global keyboard shortcuts.

### Methods
- **enable(keys: Array<string>)**: Enables the specified keyboard shortcuts.
- **disable(keys: Array<string>)**: Disables the specified keyboard shortcuts.
- **register(key: string, handler: Function)**: Registers a custom handler for a specific key.
- **unregister(key: string)**: Unregisters a previously registered key handler.
```

--------------------------------

### getTextSignatureQuality

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/10-advanced-features.md

Gets the current text signature rendering quality.

```APIDOC
## getTextSignatureQuality()

### Description
Gets the current text signature rendering quality.

### Returns
- **quality** (number) - Quality level (typically 0-100).
```

--------------------------------

### Get Available Languages

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/06-events-features-localization.md

Returns an array of all supported language codes.

```javascript
getAvailableLanguages(): Array<string>
```

```javascript
const languages = instance.UI.getAvailableLanguages();
console.log('Supported languages:', languages);
```

--------------------------------

### Initialize UI in WebComponent mode

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/02-core-apis.md

Manual initialization required when using WebComponent mode, called per shadow root.

```javascript
// WebViewer component calls this for each shadow root
export function initializeViewer(shadowRoot) {
  window.createUIInstance(shadowRoot);
}
```

--------------------------------

### Accessing Core API

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/02-core-apis.md

Demonstrates how to retrieve the Core namespace from the WebViewer instance to access tools and document viewer methods.

```javascript
WebViewer({...}).then(function(instance) {
  const { Core } = instance;
  const { documentViewer, annotationManager } = Core;
  
  // Use Core tools
  const tool = new Core.Tools.AnnotationCreateRubberStamp(documentViewer);
  documentViewer.setToolMode(tool);
  
  // Get current page
  const pageCount = documentViewer.getPageCount();
});
```

--------------------------------

### Get Tool Mode

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/05-tools-and-settings.md

Retrieves the name of the currently active tool.

```javascript
getToolMode(): string
```

```javascript
const currentTool = instance.UI.getToolMode();
console.log(`Current tool: ${currentTool}`);
```

--------------------------------

### Get annotation read state

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/08-annotations-notes-panel.md

Retrieves the current read status of an annotation.

```javascript
getAnnotationReadState(annotationId: string): boolean
```

```javascript
const isRead = instance.UI.getAnnotationReadState('annotation-123');
console.log(isRead ? 'Read' : 'Unread');
```

--------------------------------

### Project Directory Structure

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/01-overview.md

Overview of the primary directories and their roles within the WebViewer UI source code.

```text
src/
  apis/              - 230+ exported API functions, 18 major API namespaces
  components/        - 179 React components
  constants/         - Type definitions, enums, configuration constants
  core/              - Core PDF library wrapper functions
  event-listeners/   - Event handlers for Core library events
  helpers/           - Utility functions for document manipulation
  hooks/             - React hooks for state management
  redux/             - Redux actions, reducers, and selectors
  index.js           - Main entry point, module initialization
```

--------------------------------

### startTextComparison

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/04-ui-control.md

Enables text comparison mode highlighting differences between documents.

```APIDOC
## startTextComparison()

### Description
Enables text comparison mode highlighting differences between documents. Requires multi-viewer mode with two documents.

### Signature
`async startTextComparison(): Promise<void>`
```

--------------------------------

### Get Active Document Viewer

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/04-ui-control.md

Retrieves the ID of the currently active viewer.

```javascript
getActiveDocumentViewerKey(): number
```

```javascript
const active = instance.UI.getActiveDocumentViewerKey();
console.log(`Viewer ${active} is active`);
```

--------------------------------

### enableTools(toolNames: Array<string>): void

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/05-tools-and-settings.md

Enables multiple tools at once.

```APIDOC
## enableTools(toolNames: Array<string>): void

### Description
Enables a list of tools simultaneously.

### Parameters
- **toolNames** (Array<string>) - Required - An array of tool names to enable.

### Example
```javascript
instance.UI.enableTools(['AnnotationCreateRubberStamp', 'AnnotationCreateFreeText']);
```
```

--------------------------------

### instance.UI.print(options?: object)

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/09-printing-autosave-viewonly.md

Opens the native browser print dialog for the current document.

```APIDOC
## print(options?: object)

### Description
Opens the native browser print dialog for the current document, allowing the user to select printer settings.

### Parameters
- **options** (object) - Optional - Print options
```

--------------------------------

### Set Max Zoom Level Example

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/05-tools-and-settings.md

Sets the maximum zoom limit to 200%.

```javascript
// Max zoom 200%
instance.UI.setMaxZoomLevel(200);
```

--------------------------------

### Load a local file with options

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/03-document-management.md

Loads a local file object with progress tracking and error handling callbacks.

```javascript
const file = document.querySelector('input[type="file"]').files[0];

instance.UI.loadDocument(file, {
  filename: file.name,
  documentId: 'unique-id-123',
  onLoadingProgress: (progress) => {
    console.log(`${progress}% loaded`);
  },
  onError: (error) => {
    console.error('Failed to load:', error);
  }
});
```

--------------------------------

### Configure Outline Panel Defaults

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/12-remaining-apis-summary.md

Sets default configuration options for the outline panel.

```javascript
OutlinesPanel.setDefaultOptions(options: object): void
```

```javascript
{
  collapsible: boolean,    // Allow expand/collapse
  showPageLabels: boolean, // Display page numbers
  // ... more options
}
```

--------------------------------

### Get Watermark Modal Options

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/12-remaining-apis-summary.md

Retrieves the current configuration object for the watermark dialog.

```javascript
getWatermarkModalOptions(): object
```

--------------------------------

### getLocalizedText(key: string)

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/06-events-features-localization.md

Gets translated text for a given key in the current language.

```APIDOC
## getLocalizedText(key: string)

### Description
Gets translated text for a given key.

### Parameters
- **key** (string) - Required - Translation key

### Returns
- (string) - Translated text string for current language.

### Example
```javascript
const text = instance.UI.getLocalizedText('annotation.highlight');
```
```

--------------------------------

### Initialize Storybook Runtime Configuration

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/storybook-static/iframe.html

Sets global configuration variables for the Storybook environment, including feature flags, story file patterns, and documentation options.

```javascript
window['CONFIG_TYPE'] = "PRODUCTION"; window['LOGLEVEL'] = "info"; window['FRAMEWORK_OPTIONS'] = {}; window['FEATURES'] = {"argTypeTargetsV7":true,"legacyDecoratorFileOrder":false,"disallowImplicitActionsInRenderV8":true,"viewport":true,"highlight":true,"controls":true,"interactions":true,"actions":true,"backgrounds":true,"outline":true,"measure":true}; window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.mdx","importPathMatcher":"^\\.[\\/](?:src(?:\/(?!\.)(?:(?:(?!(?:^|\/)\.).)*?)\/|\/|$)(?!\.)(?=.)[^/]*?\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\/](?:src(?:\/(?!\.)(?:(?:(?!(?:^|\/)\.).)*?)\/|\/|$)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$"}]; window['DOCS_OPTIONS'] = {}; window['TAGS_OPTIONS'] = {"dev-only":{"excludeFromDocsStories":true},"docs-only":{"excludeFromSidebar":true},"test-only":{"excludeFromSidebar":true,"excludeFromDocsStories":true}};
```

--------------------------------

### Get Current UI Language

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/06-events-features-localization.md

Retrieves the currently active UI language code.

```javascript
getCurrentLanguage(): string
```

```javascript
const lang = instance.UI.getCurrentLanguage();
console.log(`Current language: ${lang}`);
```

--------------------------------

### enableBookmarkIconShortcutVisibility

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/12-remaining-apis-summary.md

Shows the bookmark creation shortcut in the toolbar.

```APIDOC
## enableBookmarkIconShortcutVisibility

### Description
Shows bookmark creation shortcut in toolbar.

### Signature
`enableBookmarkIconShortcutVisibility(): void`
```

--------------------------------

### Get Zoom Step Factors

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/05-tools-and-settings.md

Retrieves the current zoom step configuration object.

```javascript
getZoomStepFactors(): object
```

```javascript
{
  up: number,    // Zoom in factor
  down: number   // Zoom out factor
}
```

--------------------------------

### Initialize UI in iframe mode

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/02-core-apis.md

Automatic initialization behavior when the module loads in standard iframe mode.

```javascript
// Module loads and createUIInstance is called automatically
WebViewer({
  path: '/lib',
  documentId: 'document-1'
}).then(function(instance) {
  // UI is ready here
  instance.UI.loadDocument('https://example.com/sample.pdf');
});
```

--------------------------------

### Get Measurement Scale Preset

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/10-advanced-features.md

Retrieves a specific measurement scale preset by its name.

```javascript
getMeasurementScalePreset(presetName: string): object | null
```

```javascript
const preset = instance.UI.getMeasurementScalePreset('A4 Page');
if (preset) {
  console.log('Scale:', preset);
}
```

--------------------------------

### List All Modular Headers

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/07-components-modular-ui.md

Retrieves an array of all currently configured header components.

```javascript
getModularHeaderList(): Array<UI.Components.ModularHeader>
```

```javascript
const headers = instance.UI.getModularHeaderList();
console.log(`${headers.length} headers configured`);
```

--------------------------------

### instance.UI.useClientSidePrint()

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/09-printing-autosave-viewonly.md

Enables client-side rendering for printing.

```APIDOC
## useClientSidePrint()

### Description
Configures the system to render the document in the browser before sending it to the printer.
```

--------------------------------

### Get all open tabs

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/03-document-management.md

Retrieves an array containing information for all currently open tabs.

```javascript
getAllTabs(): Array<{
  id: number,
  options: object,
  src: string | Blob | File | ArrayBuffer
}>
```

```javascript
const allTabs = instance.UI.TabManager.getAllTabs();
allTabs.forEach(tab => {
  console.log(`Tab ${tab.id}: ${tab.options.filename}`);
});
```

--------------------------------

### Get Localized Text

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/06-events-features-localization.md

Retrieves the translated string for a specific key based on the current language.

```javascript
getLocalizedText(key: string): string
```

```javascript
const text = instance.UI.getLocalizedText('annotation.highlight');
console.log(text);  // e.g., "Highlight"
```

--------------------------------

### getPanels()

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/04-ui-control.md

Retrieves an array of all currently configured panels.

```APIDOC
## getPanels()

### Description
Gets all configured panels.

### Returns
- **Array<Panel>** - Array of Panel objects containing dataElement, location, and render properties.
```

--------------------------------

### Get Ribbon Group

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/07-components-modular-ui.md

Retrieves a specific ribbon group component by its data element identifier.

```javascript
getRibbonGroup(dataElement: string): object
```

```javascript
const ribbonGroup = instance.UI.getRibbonGroup('toolsGroup');
```

--------------------------------

### Get Text Signature Quality

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/10-advanced-features.md

Retrieves the current rendering quality level for text signatures.

```javascript
getTextSignatureQuality(): number
```

--------------------------------

### Initialize Flyout component

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/07-components-modular-ui.md

Creates a dropdown flyout menu with configurable items and optional drag functionality.

```javascript
UI.Components.Flyout(options: object)
```

```javascript
{
  label: string,           // Display text
  onClick: () => void,     // Click handler
  icon?: string,           // Icon class
  type?: string,           // 'checkbox', 'divider', etc
  checked?: boolean        // For checkboxes
}
```

```javascript
const flyout = new instance.UI.Components.Flyout({
  dataElement: 'viewOptions',
  label: 'View',
  items: [
    { label: 'Fit Page', onClick: () => { /* ... */ }, icon: 'icon-fit' },
    { label: 'Fit Width', onClick: () => { /* ... */ }, icon: 'icon-width' },
    { type: 'divider' },
    { label: 'Zoom In', onClick: () => { /* ... */ }, icon: 'icon-zoom-in' }
  ]
});

instance.UI.Flyouts.addFlyouts([flyout]);
```

--------------------------------

### createInstanceI18n()

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/02-core-apis.md

Creates a per-instance i18next context for language and translation isolation, ensuring that language changes in one viewer instance do not affect others.

```APIDOC
## createInstanceI18n()

### Description
Creates a per-instance i18next context for language/translation isolation. This allows for independent language management in multi-viewer environments.

### Signature
`createInstanceI18n(): i18next.i18n`

### Returns
- **i18next.i18n** - An i18next instance configured with translations from `/i18n/`, HTTP backend support, English fallback, and automatic language detection.

### Behavior
- Returns a singleton instance in iframe/legacy mode.
- Returns a new isolated instance per viewer in WebComponent mode.
- Language changes are scoped to the specific instance.

### Example
```javascript
const instanceI18n = createInstanceI18n();

// Set language for this instance only
instanceI18n.changeLanguage('es');

// Later instance won't be affected
instance2I18n.changeLanguage('fr');
```
```

--------------------------------

### Get active tab information

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/03-document-management.md

Retrieves the identifier, loading options, and source of the currently active tab.

```javascript
getActiveTab(): {
  id: number,
  options: object,
  src: string | Blob | File | ArrayBuffer
}
```

```javascript
const activeTab = instance.UI.TabManager.getActiveTab();
console.log(`Active tab: ${activeTab.id}, File: ${activeTab.options.filename}`);
```

--------------------------------

### Per-Instance Store Creation

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/01-overview.md

Each UI instance initializes its own Redux store and persistor to ensure state isolation in multi-instance environments.

```javascript
const { store, persistor, instanceId } = createInstanceStoreAndPersistor();
```

--------------------------------

### Get Selected Page Numbers

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/12-remaining-apis-summary.md

Retrieves an array of currently selected page numbers, using 1-based indexing.

```javascript
ThumbnailsPanel.getSelectedPageNumbers(): Array<number>
```

--------------------------------

### enableTool(toolName: string): void

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/05-tools-and-settings.md

Enables a tool and makes it available in the toolbar.

```APIDOC
## enableTool(toolName: string): void

### Description
Enables a tool, making it selectable in the toolbar and visible to the user.

### Parameters
- **toolName** (string) - Required - The name of the tool to enable.

### Example
```javascript
instance.UI.enableTool('AnnotationCreateRubberStamp');
```
```

--------------------------------

### Create a Label

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/07-components-modular-ui.md

Creates a simple text label element for the UI.

```javascript
UI.Components.Label(options: object)
```

```javascript
const label = new instance.UI.Components.Label({
  dataElement: 'statusLabel',
  label: 'Ready'
});
```

--------------------------------

### instance.UI.printInBackground(options?: object)

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/09-printing-autosave-viewonly.md

Prints the document directly to the default printer without showing a dialog.

```APIDOC
## printInBackground(options?: object)

### Description
Sends the document to the default printer without displaying the print dialog, useful for automation or batch printing.

### Parameters
- **options** (object) - Optional - Print options
```

--------------------------------

### Import Modular UI Components

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/12-remaining-apis-summary.md

Imports a previously exported modular UI configuration.

```javascript
importModularComponents(config: object): void
```

```javascript
const config = JSON.parse(savedConfigJson);
instance.UI.importModularComponents(config);
```

--------------------------------

### OutlinesPanel.setDefaultOptions

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/12-remaining-apis-summary.md

Configures default settings for the outline panel.

```APIDOC
## OutlinesPanel.setDefaultOptions

### Description
Configures outline panel defaults.

### Signature
`OutlinesPanel.setDefaultOptions(options: object): void`

### Parameters
- **options** (object) - Required - Configuration object containing:
  - **collapsible** (boolean) - Allow expand/collapse
  - **showPageLabels** (boolean) - Display page numbers
```

--------------------------------

### Enable Tool

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/05-tools-and-settings.md

Makes a tool available and visible in the toolbar.

```javascript
enableTool(toolName: string): void
```

```javascript
instance.UI.enableTool('AnnotationCreateRubberStamp');
```

--------------------------------

### Initialize UI Namespace

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/02-core-apis.md

The default export from the UI API module, which initializes the UI object with the provided store and instance dependencies.

```javascript
// Exported as default function from src/apis/index.js
export default (store, instanceDocViewerKey, instanceI18n, instanceRootNode) => {
  // Returns UI object with 100+ methods and namespaces
}
```

--------------------------------

### Project structure overview

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/README.md

Directory structure of the source code.

```text
src/
  apis/            - APIs exposed in myWebViewer.getInstance()
  components/      - React components
  constants/       - JavaScript or CSS constants
  core/            - APIs from the Core
  event-listeners/ - Listeners for the Core events
  helpers/         - Reused functions
  redux/           - Redux files for state managing
  lib/             - Lib folder created upon npm install, used for dev testing only
```

--------------------------------

### instance.UI.setPrintQuality(quality: number)

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/09-printing-autosave-viewonly.md

Sets the quality or resolution of the printed output.

```APIDOC
## setPrintQuality(quality: number)

### Description
Sets the quality/resolution of printed output in dpi.

### Parameters
- **quality** (number) - Required - Quality level (e.g., 100, 150, 200 dpi)
```

--------------------------------

### Import Bookmarks

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/12-remaining-apis-summary.md

Imports bookmark data into the document.

```javascript
importBookmarks(bookmarksData: string): Promise<void>
```

```javascript
await instance.UI.importBookmarks(bookmarkString);
```

--------------------------------

### Enable Multiple Tools

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/05-tools-and-settings.md

Enables an array of tools simultaneously.

```javascript
enableTools(toolNames: Array<string>): void
```

```javascript
instance.UI.enableTools([
  'AnnotationCreateRubberStamp',
  'AnnotationCreateFreeText',
  'AnnotationCreateInk'
]);
```

--------------------------------

### Create a CustomButton using the Factory Pattern

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/00-INDEX.md

Instantiate a custom UI component using the UI.Components factory. Ensure the dataElement is unique to avoid conflicts.

```javascript
const button = new instance.UI.Components.CustomButton({
  dataElement: 'my-button',
  label: 'Click me',
  onClick: () => { }
});
```

--------------------------------

### Initialize PresetButton component

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/07-components-modular-ui.md

Creates a button that triggers an action based on a selected preset value.

```javascript
UI.Components.PresetButton(options: object)
```

```javascript
const zoomPresets = new instance.UI.Components.PresetButton({
  dataElement: 'zoomPresets',
  label: 'Zoom',
  icon: 'icon-zoom',
  presets: [
    { label: '50%', value: 50 },
    { label: '100%', value: 100 },
    { label: '150%', value: 150 },
    { label: '200%', value: 200 }
  ],
  onClick: (preset) => {
    instance.UI.setZoomLevel(preset.value);
  }
});
```

--------------------------------

### UI.Components.ModularHeader

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/07-components-modular-ui.md

Creates a new modular header component instance with specified configuration.

```APIDOC
## UI.Components.ModularHeader

### Description
Creates a header bar that can contain grouped items and buttons.

### Signature
`UI.Components.ModularHeader(options: object)`

### Parameters
- **options** (object) - Required - Configuration object
  - **dataElement** (string) - Required - Header identifier
  - **position** (string) - Required - 'top', 'bottom', 'left', or 'right'
  - **items** (Array) - Required - Array of components to include
```

--------------------------------

### UI Namespace Structure

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/02-core-apis.md

Overview of the structure of the instance.UI object, including core namespaces and primary functions.

```javascript
instance.UI = {
  // Namespace objects
  Core: { ... },           // PDF viewer core
  Panels: { ... },         // Panel names
  Components: { ... },     // UI component factories
  Events: { ... },         // Event name constants
  Feature: { ... },        // Feature flags
  FeatureFlags: { ... },   // Experimental feature flags
  TabManager: { ... },     // Multi-tab API
  Flyouts: { ... },        // Flyout menu API
  NotesPanel: { ... },     // Annotation panel config
  ThumbnailsPanel: { ... },// Thumbnail panel config
  
  // Direct functions
  loadDocument: async (src, options?, docViewerKey?) => Promise<void>,
  downloadPdf: () => void,
  // ... 100+ more functions
}
```

--------------------------------

### setPanels(panels: Array<UI.PanelProperties>)

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/04-ui-control.md

Replaces all currently configured panels with a new set of panels.

```APIDOC
## setPanels(panels: Array<UI.PanelProperties>)

### Description
Replaces all panels at once. This action closes all currently open panels.

### Parameters
- **panels** (Array) - Required - Array of panel configurations

### Example
```javascript
instance.UI.setPanels([
  {
    dataElement: 'leftPanel',
    location: 'left',
    render: instance.UI.Panels.THUMBNAIL
  }
]);
```
```

--------------------------------

### openElement(dataElement: string): void

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/04-ui-control.md

Shows a single UI element by its data-element attribute.

```APIDOC
## openElement(dataElement: string): void

### Description
Shows a single UI element. This is a wrapper around openElements for single element use cases.

### Parameters
- **dataElement** (string) - Required - Element data attribute to show.

### Example
```javascript
instance.UI.openElement('notesPanel');
```
```

--------------------------------

### Configure Verification Options

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/12-remaining-apis-summary.md

Namespace for configuring signature verification settings.

```javascript
instance.UI.VerificationOptions = {
  addTrustedCertificates,
  loadTrustList,
  enableOnlineCRLRevocationChecking,
  setRevocationProxyPrefix
}
```

--------------------------------

### Import Storybook Runtime Bundles

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/storybook-static/iframe.html

Loads the required runtime scripts and application bundles for the Storybook iframe.

```javascript
import './sb-preview/runtime.js'; import './mocker-runtime-injected.js'; import './runtime~main.6c69ffa1.iframe.bundle.js'; import './16552.87573f55.iframe.bundle.js'; import './main.984f412a.iframe.bundle.js';
```

--------------------------------

### Initialize StatefulButton component

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/07-components-modular-ui.md

Creates a button that cycles through multiple states, each with its own icon and label.

```javascript
UI.Components.StatefulButton(options: object)
```

```javascript
{
  label: string,      // Display text for this state
  icon: string,       // Icon for this state
  onClick?: function  // Handler when state selected
}
```

```javascript
const modeToggle = new instance.UI.Components.StatefulButton({
  dataElement: 'viewMode',
  states: [
    { label: 'Single Page', icon: 'icon-page-single', onClick: () => { /* ... */ } },
    { label: 'Facing', icon: 'icon-page-facing', onClick: () => { /* ... */ } },
    { label: 'Continuous', icon: 'icon-page-continuous', onClick: () => { /* ... */ } }
  ]
});
```

--------------------------------

### Configure Global Hotkeys

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/12-remaining-apis-summary.md

Manages keyboard shortcuts through the UI instance. Requires an array of keys or specific key-handler pairs.

```javascript
instance.UI.hotkeys = {
  enable: (keys: Array<string>) => void,
  disable: (keys: Array<string>) => void,
  register: (key: string, handler: Function) => void,
  unregister: (key: string) => void,
  // ... more methods
}
```

--------------------------------

### Initialize Per-Instance i18n

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/02-core-apis.md

Defines the function signature for creating an isolated i18next instance.

```javascript
createInstanceI18n(): i18next.i18n
```

--------------------------------

### Import user settings from JSON

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/10-advanced-features.md

Restores settings from a previously exported object, immediately updating the UI.

```javascript
// Load settings from file
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = 'application/json';
fileInput.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  const text = await file.text();
  const settings = JSON.parse(text);
  
  await instance.UI.importUserSettings(settings);
});
fileInput.click();
```

--------------------------------

### Define and use UI.FeatureFlags

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/11-constants-enums-types.md

Defines experimental feature flags and demonstrates enabling a specific flag.

```javascript
UI.FeatureFlags = {
  // Various experimental features
  // Flags change between versions
}
```

```javascript
instance.UI.enableFeatureFlag(instance.UI.FeatureFlags.SomeNewFeature);
```

--------------------------------

### Enable Annotation Tool Style Syncing

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/08-annotations-notes-panel.md

Synchronizes style settings across all annotation tools.

```javascript
enableAnnotationToolStyleSyncing(): void
```

```javascript
instance.UI.enableAnnotationToolStyleSyncing();
```

--------------------------------

### Listen to Theme Change

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/06-events-features-localization.md

Registers a listener to track UI theme changes.

```javascript
instance.UI.addEventListener(instance.UI.Events.THEME_CHANGED, (theme) => {
  console.log(`Theme changed to: ${theme}`);
});
```

--------------------------------

### Enable client-side printing

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/09-printing-autosave-viewonly.md

Configures the system to render the document in the browser before printing.

```javascript
instance.UI.useClientSidePrint();
```

--------------------------------

### instance.UI.useEmbeddedPrint()

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/09-printing-autosave-viewonly.md

Enables the custom WebViewer print dialog.

```APIDOC
## useEmbeddedPrint()

### Description
Configures the system to use the custom WebViewer print dialog instead of the native browser print dialog.
```

--------------------------------

### Create Ribbon Item

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/07-components-modular-ui.md

Initializes a new ribbon toolbar item with specified icon, label, and click handler.

```javascript
UI.Components.RibbonItem(options: object)
```

```javascript
const ribbonItem = new instance.UI.Components.RibbonItem({
  dataElement: 'saveBtn',
  icon: 'icon-save',
  label: 'Save',
  onClick: () => { /* ... */ }
});
```

--------------------------------

### UI.Components.RibbonItem(options)

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/07-components-modular-ui.md

Creates a new ribbon toolbar item for the WebViewer UI.

```APIDOC
## UI.Components.RibbonItem(options)

### Description
Creates a ribbon toolbar item.

### Signature
`UI.Components.RibbonItem(options: object)`

### Parameters
- **options** (object) - Required - Configuration object.
- **options.dataElement** (string) - Required - Item identifier.
- **options.icon** (string) - Required - Icon class.
- **options.label** (string) - Required - Display label.
- **options.onClick** (function) - Required - Click handler.

### Example
```javascript
const ribbonItem = new instance.UI.Components.RibbonItem({
  dataElement: 'saveBtn',
  icon: 'icon-save',
  label: 'Save',
  onClick: () => { /* ... */ }
});
```
```

--------------------------------

### UI.Components.Flyout

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/07-components-modular-ui.md

Creates a dropdown flyout menu.

```APIDOC
## UI.Components.Flyout

### Description
Creates a dropdown flyout menu.

### Parameters
- **options** (object) - Required - Configuration object
- **options.dataElement** (string) - Required - Flyout identifier
- **options.label** (string) - Optional - Display label
- **options.items** (Array) - Optional - Array of menu items
- **options.draggable** (boolean) - Optional - Allow dragging (default: false)

### Example
const flyout = new instance.UI.Components.Flyout({
  dataElement: 'viewOptions',
  label: 'View',
  items: [
    { label: 'Fit Page', onClick: () => { /* ... */ }, icon: 'icon-fit' },
    { label: 'Fit Width', onClick: () => { /* ... */ }, icon: 'icon-width' },
    { type: 'divider' },
    { label: 'Zoom In', onClick: () => { /* ... */ }, icon: 'icon-zoom-in' }
  ]
});
instance.UI.Flyouts.addFlyouts([flyout]);
```

--------------------------------

### Define and use UI.JustifyContent

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/11-constants-enums-types.md

Defines flex alignment options and demonstrates applying them to a grouped item.

```javascript
UI.JustifyContent = {
  FlexStart: 'flex-start',
  Center: 'center',
  FlexEnd: 'flex-end',
  SpaceBetween: 'space-between',
  SpaceAround: 'space-around'
}
```

```javascript
instance.UI.setGroupedItemsJustifyContent(
  'myGroup',
  instance.UI.JustifyContent.Center
);
```

--------------------------------

### Define Load Document Options

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/11-constants-enums-types.md

Configuration object structure for loading documents.

```typescript
{
  extension?: string;                 // File type
  filename?: string;                  // Display name
  customHeaders?: object;             // HTTP headers
  documentId?: string;                // Unique ID
  loadAnnotations?: boolean;          // Load saved annotations
  onLoadingProgress?: (percent) => void; // Progress callback
  withCredentials?: boolean;          // CORS credentials
  password?: string;                  // Encrypted PDF password
  onError?: (error) => void;         // Error callback
  officeOptions?: object;             // Office doc options
  xodOptions?: object;                // XOD options
}
```

--------------------------------

### Manage Instance-Specific Languages

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/02-core-apis.md

Demonstrates how to change the language for a specific i18n instance without impacting other instances.

```javascript
const instanceI18n = createInstanceI18n();

// Set language for this instance only
instanceI18n.changeLanguage('es');

// Later instance won't be affected
instance2I18n.changeLanguage('fr');
```

--------------------------------

### Set UI Theme

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/05-tools-and-settings.md

Configures the UI theme to light, dark, or system-default. Changes are applied immediately and persisted to user storage.

```javascript
setTheme(theme: UI.Theme): void
```

```javascript
// Dark theme
instance.UI.setTheme(instance.UI.Theme.Dark);

// Light theme
instance.UI.setTheme(instance.UI.Theme.Light);
```

--------------------------------

### Open UI Elements

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/04-ui-control.md

Shows one or more UI elements by passing an array of data-element strings.

```javascript
openElements(dataElements: Array<string>): void
```

```javascript
instance.UI.openElements(['notesPanel', 'thumbnailsPanel']);
```

```javascript
instance.UI.openElements(['toolbarGroup-Annotate']);
```

--------------------------------

### Load a basic PDF

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/03-document-management.md

Loads a PDF document from a URL with a specified filename.

```javascript
instance.UI.loadDocument('https://example.com/sample.pdf', {
  filename: 'sample.pdf'
});
```

--------------------------------

### Set Page Replacement Modal File List

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/12-remaining-apis-summary.md

Sets a predefined list of files for the page replacement dialog.

```javascript
setPageReplacementModalFileList(
  files: Array<File | string>
): void
```

--------------------------------

### Search for functions using grep

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/README.md

Use this command to search for specific function names across the project directory.

```bash
grep -r "functionName" /workspace/home/output/
```

--------------------------------

### getCustomData(key: string)

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/10-advanced-features.md

Retrieves custom application data stored with the viewer based on a provided key.

```APIDOC
## getCustomData(key: string)

### Description
Retrieves custom application data stored with the viewer.

### Parameters
- **key** (string) - Required - Data key to retrieve

### Returns
- **any** - The custom data associated with the key, or undefined if not found.

### Example
```javascript
const userId = instance.UI.getCustomData('userId');
const userPreferences = instance.UI.getCustomData('preferences');
```
```

--------------------------------

### contextMenuPopup

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/12-remaining-apis-summary.md

Manages the custom context menu handler.

```APIDOC
## contextMenuPopup

### Description
Custom context menu handler.

### Methods
- `setItems(items)`: Sets the items displayed in the context menu.
- `show(x, y)`: Displays the context menu at the specified coordinates.
```

--------------------------------

### Listen to Download

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/06-events-features-localization.md

Registers a listener to trigger when a file download completes.

```javascript
instance.UI.addEventListener(instance.UI.Events.FILE_DOWNLOADED, () => {
  console.log('File download complete');
});
```

--------------------------------

### Define and use UI.AnnotationKeys

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/11-constants-enums-types.md

Defines constants for annotation property names and demonstrates their use in a custom note filter.

```javascript
UI.AnnotationKeys = {
  SUBJECT: 'Subject',
  CONTENTS: 'Contents',
  AUTHOR: 'Author',
  COLOR: 'Color',
  OPACITY: 'Opacity',
  STROKE_WIDTH: 'StrokeWidth',
  FONT_NAME: 'FontName',
  FONT_SIZE: 'FontSize',
  STATUS: 'Status'
}
```

```javascript
instance.UI.setCustomNoteFilter((annotation) => {
  return annotation[instance.UI.AnnotationKeys.STATUS] !== 'Rejected';
});
```

--------------------------------

### Create a CustomButton

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/07-components-modular-ui.md

Initializes a custom clickable button with a specific data element and click handler.

```javascript
UI.Components.CustomButton(options: object)
```

```javascript
const button = new instance.UI.Components.CustomButton({
  dataElement: 'myButton',
  label: 'Click Me',
  icon: 'icon-save',
  onClick: () => console.log('Button clicked'),
  title: 'Click to save'
});
```

--------------------------------

### Access Core Tools

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/11-constants-enums-types.md

Collection of available annotation tool classes.

```javascript
Core.Tools = {
  AnnotationCreateRubberStamp,
  AnnotationCreateFreeText,
  AnnotationCreateInk,
  AnnotationCreateRect,
  AnnotationCreateCircle,
  // ... more tools
}
```

--------------------------------

### Managing Instance State

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/02-core-apis.md

Shows how to interact with the isolated Redux store and persistor returned by the instance creation helper.

```javascript
const { store, persistor, instanceId } = createInstanceStoreAndPersistor();

// State is isolated per instanceId
store.dispatch(actions.setTheme('dark'));

// Persist state for later recovery
persistor.purge();  // Clear saved state if needed
```

--------------------------------

### Define and use UI.ToolbarGroup

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/11-constants-enums-types.md

Defines toolbar button grouping and demonstrates setting the active group.

```javascript
UI.ToolbarGroup = {
  Annotate: 'annotate',
  View: 'view',
  Edit: 'edit',
  Insert: 'insert',
  Forms: 'forms',
  Redact: 'redact'
}
```

```javascript
instance.UI.setToolbarGroup(instance.UI.ToolbarGroup.Annotate);
```

--------------------------------

### Configure Mentions System

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/12-remaining-apis-summary.md

Configures the tagging system for annotations.

```javascript
instance.UI.mentions = {
  setUserList: (users: Array<{name, id}>) => void,
  mentionTransform: (value: string) => string,
  // ... more methods
}
```

--------------------------------

### Add flyout menus with Flyouts.addFlyouts

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/07-components-modular-ui.md

Registers one or more flyout components to the UI. Requires an array of UI.Components.Flyout instances.

```javascript
Flyouts.addFlyouts(flyoutList: Array<UI.Components.Flyout>): void
```

```javascript
const viewFlyout = new instance.UI.Components.Flyout({
  dataElement: 'viewMenu',
  items: [
    { label: 'Zoom In', onClick: () => instance.UI.setZoomLevel(150) },
    { label: 'Zoom Out', onClick: () => instance.UI.setZoomLevel(50) }
  ]
});

instance.UI.Flyouts.addFlyouts([viewFlyout]);
```

--------------------------------

### Set UI Theme

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/11-constants-enums-types.md

Apply a specific color scheme to the UI instance.

```javascript
instance.UI.setTheme(instance.UI.Theme.Dark);
```

--------------------------------

### Initialize GroupedItems component

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/07-components-modular-ui.md

Creates a container for multiple buttons or items with specified layout options.

```javascript
UI.Components.GroupedItems(options: object)
```

```javascript
const group = new instance.UI.Components.GroupedItems({
  dataElement: 'annotationTools',
  items: [highlightBtn, freeTextBtn, drawBtn],
  gap: 8,
  justifyContent: 'flex-start'
});
```

--------------------------------

### UI.Components.PresetButton

Source: https://github.com/aprysesdk/webviewer-ui/blob/12.0/_autodocs/07-components-modular-ui.md

Creates a button with preset values or options.

```APIDOC
## UI.Components.PresetButton

### Description
Creates a button with preset values or options.

### Parameters
- **options** (object) - Required - Configuration object
- **options.dataElement** (string) - Required - Button identifier
- **options.presets** (Array) - Required - Array of preset options
- **options.onClick** (function) - Required - Handler when preset selected
- **options.icon** (string) - Optional - Icon class
- **options.label** (string) - Optional - Label

### Example
const zoomPresets = new instance.UI.Components.PresetButton({
  dataElement: 'zoomPresets',
  label: 'Zoom',
  icon: 'icon-zoom',
  presets: [
    { label: '50%', value: 50 },
    { label: '100%', value: 100 },
    { label: '150%', value: 150 },
    { label: '200%', value: 200 }
  ],
  onClick: (preset) => {
    instance.UI.setZoomLevel(preset.value);
  }
});
```