triiiceratops 0.5.0 → 0.7.0

package/dist/src/lib/paraglide/messages/de.d.ts

@@ -43,3 +43,54 @@ export function iiif_manifest_label(): string;
 export function manifest_placeholder(): string;
 export function load(): string;
 export function github(): string;
+export function viewer_variant_core(): string;
+export function viewer_variant_full(): string;
+export function viewer_variant_custom_theme(): string;
+export function viewer_variant_tooltip_core(): string;
+export function viewer_variant_tooltip_full(): string;
+export function viewer_variant_tooltip_custom_theme(): string;
+export function plugins_tooltip(): string;
+export function demo_header_external_controls(): string;
+export function demo_header_active_canvas(): string;
+export function image_adjustments(): string;
+export function close_menu(): string;
+export function gallery(): string;
+export function close_gallery(): string;
+export function close_search(): string;
+export function settings_label(): string;
+export function settings_category_general(): string;
+export function settings_toggle_left_menu(): string;
+export function settings_toggle_right_menu(): string;
+export function settings_toggle_canvas_nav(): string;
+export function settings_category_configuration(): string;
+export function settings_submenu_right_menu_items(): string;
+export function settings_toggle_show_search(): string;
+export function settings_toggle_show_gallery(): string;
+export function settings_toggle_show_annotations(): string;
+export function settings_toggle_show_fullscreen(): string;
+export function settings_toggle_show_info(): string;
+export function settings_submenu_gallery(): string;
+export function settings_toggle_open(): string;
+export function settings_toggle_draggable(): string;
+export function settings_toggle_close_button(): string;
+export function settings_select_dock_position(): string;
+export function settings_position_bottom(): string;
+export function settings_position_top(): string;
+export function settings_position_left(): string;
+export function settings_position_right(): string;
+export function settings_position_floating(): string;
+export function settings_submenu_search(): string;
+export function settings_submenu_annotations(): string;
+export function settings_toggle_panel_open(): string;
+export function settings_toggle_visible_by_default(): string;
+export function copy_config(): string;
+export function copied(): string;
+export function viewer_variant_svelte_component_tooltip(): string;
+export function viewer_variant_svelte(): string;
+export function language_select_label(): string;
+export function no_canvases_loaded(): string;
+export function try_your_own(): string;
+export function change_theme_label(): string;
+export function theme_menu_title(): string;
+export function error_prefix(): string;
+export function no_image_found(): string;

package/dist/src/lib/paraglide/messages/en.d.ts

@@ -43,3 +43,54 @@ export function iiif_manifest_label(): string;
 export function manifest_placeholder(): string;
 export function load(): string;
 export function github(): string;
+export function viewer_variant_core(): string;
+export function viewer_variant_full(): string;
+export function viewer_variant_custom_theme(): string;
+export function viewer_variant_tooltip_core(): string;
+export function viewer_variant_tooltip_full(): string;
+export function viewer_variant_tooltip_custom_theme(): string;
+export function plugins_tooltip(): string;
+export function demo_header_external_controls(): string;
+export function demo_header_active_canvas(): string;
+export function image_adjustments(): string;
+export function close_menu(): string;
+export function gallery(): string;
+export function close_gallery(): string;
+export function close_search(): string;
+export function settings_label(): string;
+export function settings_category_general(): string;
+export function settings_toggle_left_menu(): string;
+export function settings_toggle_right_menu(): string;
+export function settings_toggle_canvas_nav(): string;
+export function settings_category_configuration(): string;
+export function settings_submenu_right_menu_items(): string;
+export function settings_toggle_show_search(): string;
+export function settings_toggle_show_gallery(): string;
+export function settings_toggle_show_annotations(): string;
+export function settings_toggle_show_fullscreen(): string;
+export function settings_toggle_show_info(): string;
+export function settings_submenu_gallery(): string;
+export function settings_toggle_open(): string;
+export function settings_toggle_draggable(): string;
+export function settings_toggle_close_button(): string;
+export function settings_select_dock_position(): string;
+export function settings_position_bottom(): string;
+export function settings_position_top(): string;
+export function settings_position_left(): string;
+export function settings_position_right(): string;
+export function settings_position_floating(): string;
+export function settings_submenu_search(): string;
+export function settings_submenu_annotations(): string;
+export function settings_toggle_panel_open(): string;
+export function settings_toggle_visible_by_default(): string;
+export function copy_config(): string;
+export function copied(): string;
+export function viewer_variant_svelte_component_tooltip(): string;
+export function viewer_variant_svelte(): string;
+export function language_select_label(): string;
+export function no_canvases_loaded(): string;
+export function try_your_own(): string;
+export function change_theme_label(): string;
+export function theme_menu_title(): string;
+export function error_prefix(): string;
+export function no_image_found(): string;

package/dist/src/lib/paraglide/messages.d.ts

@@ -117,3 +117,156 @@ export function load(params?: {}, options?: {
 export function github(params?: {}, options?: {
     languageTag?: "en" | "de";
 }): string;
+export function viewer_variant_core(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function viewer_variant_full(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function viewer_variant_custom_theme(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function viewer_variant_tooltip_core(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function viewer_variant_tooltip_full(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function viewer_variant_tooltip_custom_theme(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function plugins_tooltip(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function demo_header_external_controls(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function demo_header_active_canvas(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function image_adjustments(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function close_menu(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function gallery(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function close_gallery(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function close_search(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function settings_label(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function settings_category_general(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function settings_toggle_left_menu(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function settings_toggle_right_menu(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function settings_toggle_canvas_nav(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function settings_category_configuration(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function settings_submenu_right_menu_items(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function settings_toggle_show_search(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function settings_toggle_show_gallery(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function settings_toggle_show_annotations(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function settings_toggle_show_fullscreen(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function settings_toggle_show_info(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function settings_submenu_gallery(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function settings_toggle_open(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function settings_toggle_draggable(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function settings_toggle_close_button(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function settings_select_dock_position(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function settings_position_bottom(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function settings_position_top(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function settings_position_left(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function settings_position_right(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function settings_position_floating(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function settings_submenu_search(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function settings_submenu_annotations(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function settings_toggle_panel_open(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function settings_toggle_visible_by_default(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function copy_config(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function copied(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function viewer_variant_svelte_component_tooltip(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function viewer_variant_svelte(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function language_select_label(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function no_canvases_loaded(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function try_your_own(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function change_theme_label(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function theme_menu_title(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function error_prefix(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;
+export function no_image_found(params?: {}, options?: {
+    languageTag?: "en" | "de";
+}): string;

package/dist/src/lib/plugins/image-manipulation/filters.d.ts

@@ -1,6 +1,6 @@
 import { ImageFilters } from './types';
 type OSDViewer = {
-    drawer: {
+    drawer?: {
         canvas?: HTMLCanvasElement;
     };
 };

package/dist/src/lib/state/viewer.svelte.d.ts

@@ -1,4 +1,19 @@
+import { ViewerConfig } from '../types/config';
 import { TriiiceratopsPlugin, PluginMenuButton, PluginPanel } from '../types/plugin';
+/**
+ * Snapshot of viewer state for external consumers.
+ * Used by web component events to expose state without Svelte reactivity.
+ */
+export interface ViewerStateSnapshot {
+    manifestId: string | null;
+    canvasId: string | null;
+    currentCanvasIndex: number;
+    showAnnotations: boolean;
+    showThumbnailGallery: boolean;
+    showSearchPanel: boolean;
+    isFullScreen: boolean;
+    dockSide: string;
+}
 export declare class ViewerState {
     manifestId: string | null;
     canvasId: string | null;
@@ -10,6 +25,10 @@ export declare class ViewerState {
     showMetadataDialog: boolean;
     dockSide: string;
     visibleAnnotationIds: Set<string>;
+    config: ViewerConfig;
+    get showRightMenu(): boolean;
+    get showLeftMenu(): boolean;
+    get showCanvasNav(): boolean;
     galleryPosition: {
         x: number;
         y: number;
@@ -23,7 +42,34 @@ export declare class ViewerState {
         x: number;
         y: number;
     };
-    dragOverSide: "left" | "right" | "bottom" | "top" | null;
+    dragOverSide: "left" | "right" | "top" | "bottom" | null;
+    galleryCenterPanelRect: DOMRect | null;
+    /**
+     * Event target for dispatching CustomEvents.
+     * Only set by TriiiceratopsViewerElement (web component build).
+     * Remains null for Svelte component usage → no events dispatched.
+     */
+    private eventTarget;
+    /**
+     * Set the event target for dispatching state change events.
+     * Called by TriiiceratopsViewerElement to enable event-driven API.
+     */
+    setEventTarget(target: EventTarget): void;
+    /**
+     * Get current state as a plain object snapshot.
+     * Safe to use outside Svelte's reactive system.
+     * NOTE: We calculate currentCanvasIndex inline to avoid triggering the canvases getter
+     * which can cause infinite loops when it auto-sets canvasId.
+     */
+    getSnapshot(): ViewerStateSnapshot;
+    /**
+     * Dispatch a state change event to the web component.
+     * No-op if eventTarget is null (Svelte component usage).
+     *
+     * Uses queueMicrotask to dispatch asynchronously AFTER the current
+     * reactive cycle completes, preventing infinite update loops.
+     */
+    private dispatchStateChange;
     constructor(initialManifestId?: string | null, initialCanvasId?: string | null, initialPlugins?: TriiiceratopsPlugin[]);
     get manifest(): any;
     get canvases(): any;
@@ -34,6 +80,7 @@ export declare class ViewerState {
     previousCanvas(): void;
     setManifest(manifestId: string): void;
     setCanvas(canvasId: string): void;
+    updateConfig(newConfig: ViewerConfig): void;
     toggleAnnotations(): void;
     toggleThumbnailGallery(): void;
     toggleFullScreen(): void;

package/dist/src/lib/theme/colorUtils.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Color conversion utilities for DaisyUI theming.
+ * DaisyUI v5 uses oklch color format for all theme colors.
+ * The conversion functions were largely generated by Opus 4.5
+ */
+/**
+ * Check if a string is already in oklch format
+ */
+export declare function isOklch(value: string): boolean;
+/**
+ * Check if a string is a hex color
+ */
+export declare function isHex(value: string): boolean;
+/**
+ * Check if a string is an rgb() or rgba() color
+ */
+export declare function isRgb(value: string): boolean;
+/**
+ * Convert hex color to oklch format for DaisyUI
+ * @param hex - Color in hex format (#rgb, #rrggbb, or #rrggbbaa)
+ * @returns oklch string like "oklch(65.00% 0.2000 250.00)"
+ */
+export declare function hexToOklch(hex: string): string;
+/**
+ * Convert rgb() color to oklch format for DaisyUI
+ * @param rgb - Color in rgb(r, g, b) or rgba(r, g, b, a) format
+ * @returns oklch string like "oklch(65.00% 0.2000 250.00)"
+ */
+export declare function rgbToOklchString(rgb: string): string;
+/**
+ * Normalize color input - accepts hex, rgb(), or oklch()
+ * Converts hex and rgb to oklch format for DaisyUI compatibility.
+ * @param color - Color in any supported format
+ * @returns oklch string or original value if already oklch
+ */
+export declare function normalizeColor(color: string): string;

package/dist/src/lib/theme/index.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Theme customization for Triiiceratops viewer.
+ *
+ * This module provides utilities for customizing DaisyUI themes.
+ *
+ * @example Setting a built-in theme
+ * ```html
+ * <triiiceratops-viewer manifest-id="..." theme="dark"></triiiceratops-viewer>
+ * ```
+ *
+ * @example Custom theme configuration (web component)
+ * ```html
+ * <triiiceratops-viewer
+ *   manifest-id="..."
+ *   theme="light"
+ *   theme-config='{"primary":"#3b82f6","radiusBox":"0.5rem"}'
+ * ></triiiceratops-viewer>
+ * ```
+ *
+ * @example Custom theme configuration (JavaScript)
+ * ```javascript
+ * const viewer = document.querySelector('triiiceratops-viewer');
+ * viewer.theme = 'dark';
+ * viewer.themeConfig = {
+ *   primary: '#3b82f6',
+ *   secondary: '#8b5cf6',
+ *   radiusBox: '0.75rem',
+ *   border: '2px',
+ * };
+ * ```
+ *
+ * @example Svelte component
+ * ```svelte
+ * <script>
+ *   import { TriiiceratopsViewer } from 'triiiceratops';
+ *   import { MediaQuery } from 'svelte/reactivity';
+ *
+ *   const prefersDark = new MediaQuery('(prefers-color-scheme: dark)');
+ * </script>
+ *
+ * <TriiiceratopsViewer
+ *   manifestId="..."
+ *   theme={prefersDark.current ? 'dark' : 'light'}
+ *   themeConfig={{ primary: '#0ea5e9' }}
+ * />
+ * ```
+ */
+export type { ThemeConfig, DaisyUITheme } from './types';
+export { DAISYUI_THEMES } from './types';
+export { applyTheme, applyBuiltInTheme, applyThemeConfig, clearThemeConfig, isBuiltInTheme, parseThemeConfig, getThemeCssVariables, getThemePropertyNames, } from './themeManager';
+export { hexToOklch, normalizeColor, isOklch, isHex, isRgb, } from './colorUtils';

package/dist/src/lib/theme/themeManager.d.ts

@@ -0,0 +1,39 @@
+import { ThemeConfig, DaisyUITheme } from './types';
+/**
+ * Check if a string is a valid built-in DaisyUI theme name
+ */
+export declare function isBuiltInTheme(theme: string): theme is DaisyUITheme;
+/**
+ * Apply a built-in theme to an element by setting data-theme attribute
+ */
+export declare function applyBuiltInTheme(element: HTMLElement, theme: DaisyUITheme): void;
+/**
+ * Apply custom theme configuration as CSS custom properties on an element.
+ * These override the base theme's values.
+ */
+export declare function applyThemeConfig(element: HTMLElement, config: ThemeConfig): void;
+/**
+ * Clear all custom theme CSS variables from an element
+ */
+export declare function clearThemeConfig(element: HTMLElement): void;
+/**
+ * Parse a theme config from a JSON string (for HTML attribute usage)
+ */
+export declare function parseThemeConfig(json: string): ThemeConfig | null;
+/**
+ * Apply theme to an element.
+ *
+ * @param element - The HTML element to apply the theme to
+ * @param theme - Built-in theme name (defaults to light/dark based on prefers-color-scheme)
+ * @param config - Optional custom theme configuration to override the base theme
+ * @param prefersDark - Whether the user prefers dark mode (from media query)
+ */
+export declare function applyTheme(element: HTMLElement, theme: DaisyUITheme | undefined, config: ThemeConfig | undefined): void;
+/**
+ * Get all CSS variable names that can be customized
+ */
+export declare function getThemeCssVariables(): string[];
+/**
+ * Get all customizable theme property names
+ */
+export declare function getThemePropertyNames(): (keyof ThemeConfig)[];

package/dist/src/lib/theme/types.d.ts

@@ -0,0 +1,73 @@
+/**
+ * Built-in DaisyUI theme names
+ */
+export type DaisyUITheme = 'light' | 'dark' | 'cupcake' | 'bumblebee' | 'emerald' | 'corporate' | 'synthwave' | 'retro' | 'cyberpunk' | 'valentine' | 'halloween' | 'garden' | 'forest' | 'aqua' | 'lofi' | 'pastel' | 'fantasy' | 'wireframe' | 'black' | 'luxury' | 'dracula' | 'cmyk' | 'autumn' | 'business' | 'acid' | 'lemonade' | 'night' | 'coffee' | 'winter' | 'dim' | 'nord' | 'sunset' | 'caramellatte' | 'abyss' | 'silk';
+/**
+ * List of all built-in DaisyUI themes for runtime validation
+ */
+export declare const DAISYUI_THEMES: DaisyUITheme[];
+/**
+ * Custom theme configuration with friendly property names.
+ * All color values accept hex (#rrggbb), rgb(r,g,b), or oklch() strings.
+ * This is used to override the base theme's values.
+ */
+export interface ThemeConfig {
+    /** Primary brand color (hex, rgb, or oklch) */
+    primary?: string;
+    /** Text color for content on primary background */
+    primaryContent?: string;
+    /** Secondary brand color (hex, rgb, or oklch) */
+    secondary?: string;
+    /** Text color for content on secondary background */
+    secondaryContent?: string;
+    /** Accent brand color (hex, rgb, or oklch) */
+    accent?: string;
+    /** Text color for content on accent background */
+    accentContent?: string;
+    /** Neutral dark color (hex, rgb, or oklch) */
+    neutral?: string;
+    /** Text color for content on neutral background */
+    neutralContent?: string;
+    /** Main background color (base-100) */
+    base100?: string;
+    /** Slightly darker background (base-200) */
+    base200?: string;
+    /** Even darker background (base-300) */
+    base300?: string;
+    /** Default text color on base backgrounds */
+    baseContent?: string;
+    /** Info state color */
+    info?: string;
+    /** Text color for content on info background */
+    infoContent?: string;
+    /** Success state color */
+    success?: string;
+    /** Text color for content on success background */
+    successContent?: string;
+    /** Warning state color */
+    warning?: string;
+    /** Text color for content on warning background */
+    warningContent?: string;
+    /** Error state color */
+    error?: string;
+    /** Text color for content on error background */
+    errorContent?: string;
+    /** Border radius for large components like cards, modals (e.g., '1rem') */
+    radiusBox?: string;
+    /** Border radius for medium components like inputs, buttons (e.g., '0.5rem') */
+    radiusField?: string;
+    /** Border radius for small components like checkboxes, toggles (e.g., '0.25rem') */
+    radiusSelector?: string;
+    /** Base size for small components like checkboxes (e.g., '0.25rem') */
+    sizeSelector?: string;
+    /** Base size for form fields (e.g., '0.25rem') */
+    sizeField?: string;
+    /** Border width for components (e.g., '1px') */
+    border?: string;
+    /** Enable depth effect for components (0 or 1) */
+    depth?: 0 | 1;
+    /** Enable noise background effect for components (0 or 1) */
+    noise?: 0 | 1;
+    /** Color scheme hint for browser-provided UI elements */
+    colorScheme?: 'light' | 'dark';
+}

package/dist/src/lib/types/config.d.ts

@@ -0,0 +1,129 @@
+export interface RequestConfig {
+    /**
+     * Extra headers to send with the IIIF manifest request
+     */
+    headers?: Record<string, string>;
+    /**
+     * Whether to use credentials (cookies) for the request
+     */
+    withCredentials?: boolean;
+}
+export interface GalleryConfig {
+    /**
+     * Where the gallery should be docked by default if shown.
+     * @default 'bottom'
+     */
+    dockPosition?: 'left' | 'right' | 'top' | 'bottom' | 'none';
+    /**
+     * Whether the gallery can be dragged/moved by the user.
+     * @default true
+     */
+    draggable?: boolean;
+    /**
+     * Whether the gallery is currently open/visible.
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Whether to show the close button on the gallery.
+     * @default true
+     */
+    showCloseButton?: boolean;
+}
+export interface SearchConfig {
+    /**
+     * Where the search panel should appear.
+     * @default 'right'
+     */
+    position?: 'left' | 'right';
+    /**
+     * Whether the search panel is currently open.
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Whether to show the close button.
+     * @default true
+     */
+    showCloseButton?: boolean;
+}
+export interface AnnotationsConfig {
+    /**
+     * Whether the annotations panel/list is open.
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Whether annotations are currently visible on the canvas.
+     * @default false
+     */
+    visible?: boolean;
+}
+export interface MenuConfig {
+    /**
+     * Whether the Search button is shown in this menu.
+     * @default true
+     */
+    showSearch?: boolean;
+    /**
+     * Whether the Gallery toggle button is shown in this menu.
+     * @default true
+     */
+    showGallery?: boolean;
+    /**
+     * Whether the Annotations toggle button is shown in this menu.
+     * @default true
+     */
+    showAnnotations?: boolean;
+    /**
+     * Whether the Info/Metadata button is shown in this menu.
+     * @default true
+     */
+    showInfo?: boolean;
+    /**
+     * Whether the Fullscreen button is shown in this menu.
+     * @default true
+     */
+    showFullscreen?: boolean;
+}
+export interface ViewerConfig {
+    /**
+     * Whether the right floating menu is visible.
+     * @default true
+     */
+    showRightMenu?: boolean;
+    /**
+     * Configuration for the right menu items.
+     */
+    rightMenu?: MenuConfig;
+    /**
+     * Whether the left FAB (plugins menu) is visible.
+     * @default true
+     */
+    showLeftMenu?: boolean;
+    /**
+     * Configuration for the left menu items.
+     */
+    leftMenu?: MenuConfig;
+    /**
+     * Whether to show the canvas navigation arrows/controls.
+     * @default true
+     */
+    showCanvasNav?: boolean;
+    /**
+     * Configuration for the thumbnail gallery pane.
+     */
+    gallery?: GalleryConfig;
+    /**
+     * Configuration for the search pane.
+     */
+    search?: SearchConfig;
+    /**
+     * Configuration for annotations.
+     */
+    annotations?: AnnotationsConfig;
+    /**
+     * Configuration for network requests (manifests, etc)
+     */
+    requests?: RequestConfig;
+}