kakidash 0.2.3 → 0.3.0

package/dist/index.d.ts

@@ -1,3 +1,145 @@
+declare class ClipboardService {
+    private mindMap;
+    private idGenerator;
+    private clipboard;
+    constructor(mindMap: MindMap, idGenerator: IdGenerator);
+    copyNodes(nodeIds: string[]): void;
+    getClipboardNodes(): Node_2[];
+    createPastedNodes(parentId: string): Node_2[];
+    private deepCloneNode;
+    private regenerateIds;
+}
+
+declare type Command = {
+    type: 'addNode';
+    parentId: string;
+} | {
+    type: 'addSibling';
+    nodeId: string;
+    position: 'before' | 'after';
+} | {
+    type: 'deleteNode';
+    nodeId: string;
+} | {
+    type: 'insertParent';
+    nodeId: string;
+} | {
+    type: 'dropNode';
+    draggedId: string;
+    targetId: string;
+    position: 'top' | 'bottom' | 'left' | 'right';
+} | {
+    type: 'updateNode';
+    nodeId: string;
+    topic: string;
+} | {
+    type: 'navigate';
+    nodeId: string | null;
+    direction: Direction_2;
+    extendSelection?: boolean;
+} | {
+    type: 'pan';
+    dx: number;
+    dy: number;
+} | {
+    type: 'copyNode';
+    nodeId: string;
+} | {
+    type: 'pasteNode';
+    parentId: string;
+} | {
+    type: 'cutNode';
+    nodeId: string;
+} | {
+    type: 'pasteImage';
+    parentId: string;
+    imageData: string;
+    width: number;
+    height: number;
+} | {
+    type: 'zoom';
+    delta: number;
+    x: number;
+    y: number;
+} | {
+    type: 'zoomReset';
+} | {
+    type: 'undo';
+} | {
+    type: 'redo';
+} | {
+    type: 'styleAction';
+    nodeId: string;
+    action: StyleAction;
+} | {
+    type: 'editNode';
+    nodeId: string;
+} | {
+    type: 'editEnd';
+    nodeId: string;
+} | {
+    type: 'setTheme';
+    theme: Theme;
+} | {
+    type: 'setLayoutMode';
+    mode: LayoutMode;
+} | {
+    type: 'toggleFold';
+    nodeId: string;
+} | {
+    type: 'toggleCommandPalette';
+} | {
+    type: 'updateNodeWidth';
+    nodeId: string;
+    increment: number;
+} | {
+    type: 'selectNode';
+    nodeId: string | null;
+    extendSelection?: boolean;
+};
+
+declare class CommandBus {
+    private handlers;
+    on<T extends Command['type']>(type: T, handler: CommandHandler<T>): void;
+    off<T extends Command['type']>(type: T, handler: CommandHandler<T>): void;
+    dispatch(command: Command): void;
+    destroy(): void;
+}
+
+declare type CommandHandler<T extends Command['type']> = (command: Extract<Command, {
+    type: T;
+}>) => void;
+
+declare interface ConnectionLayout {
+    fromX: number;
+    fromY: number;
+    toX: number;
+    toY: number;
+    toNodeId: string;
+}
+
+/**
+ * Dependencies required to construct a MindMapController.
+ * Consolidates constructor parameters for readability.
+ */
+declare interface ControllerDependencies {
+    mindMap: MindMap;
+    service: MindMapService;
+    renderer: Renderer;
+    styleEditor: StyleEditor;
+    eventBus: IMindMapEventBus;
+    historyService: HistoryService;
+    clipboardService: ClipboardService;
+    searchService: SearchService;
+    viewportService: ViewportService;
+    navigationService: NavigationService;
+    fileIOService: FileIOService;
+    themeService: ThemeService;
+    commandBus: CommandBus;
+    locale?: 'en' | 'ja';
+    commandPaletteFeatures?: ('search' | 'icon' | 'import' | 'export')[];
+}
+
 export declare interface CustomCommand {
     id: string;
     topic: string;
@@ -6,6 +148,8 @@ export declare interface CustomCommand {
 
 export declare type Direction = 'Up' | 'Down' | 'Left' | 'Right';
 
+declare type Direction_2 = 'Up' | 'Down' | 'Left' | 'Right';
+
 /**
  * Interface for handling file Import/Export operations.
  * Allows external systems (like VS Code Extension) to override default browser behaviors.
@@ -26,13 +170,122 @@ export declare interface FileHandler {
     onExportFile(data: Blob | string, filename: string, format: string): Promise<void>;
 }
 
+declare class FileIOService {
+    private mindMap;
+    private renderer;
+    private eventBus;
+    private fileHandler?;
+    constructor(deps: FileIOServiceDependencies);
+    exportPng(): Promise<void>;
+    exportSvg(): Promise<void>;
+    exportMarkdown(): Promise<void>;
+    importXMind(): Promise<MindMapData | null>;
+}
+
+declare interface FileIOServiceDependencies {
+    mindMap: MindMap;
+    renderer: Renderer;
+    eventBus: IMindMapEventBus;
+    fileHandler?: FileHandler;
+}
+
+declare class HistoryService {
+    private historyManager;
+    constructor(maxHistorySize?: number);
+    saveState(state: MindMapData): void;
+    undo(currentState: MindMapData): MindMapData | null;
+    redo(currentState: MindMapData): MindMapData | null;
+    get canUndo(): boolean;
+    get canRedo(): boolean;
+}
+
+declare interface IdGenerator {
+    generate(): string;
+}
+
+declare interface IMindMapEventBus {
+    emit<K extends keyof KakidashEventMap>(event: K, payload: KakidashEventMap[K]): void;
+    on<K extends keyof KakidashEventMap>(event: K, handler: (payload: KakidashEventMap[K]) => void): void;
+    off<K extends keyof KakidashEventMap>(event: K, handler: (payload: KakidashEventMap[K]) => void): void;
+}
+
+declare interface InteractionOptions {
+    onNodeClick: (nodeId: string, shiftKey?: boolean) => void;
+    onAddChild: (parentId: string) => void;
+    onAddSibling: (nodeId: string, position: 'before' | 'after') => void;
+    onInsertParent?: (nodeId: string) => void;
+    onDeleteNode: (nodeId: string) => void;
+    onDropNode: (draggedId: string, targetId: string, position: 'top' | 'bottom' | 'left' | 'right') => void;
+    onUpdateNode?: (nodeId: string, topic: string) => void;
+    onNavigate?: (nodeId: string | null, direction: Direction, extendSelection?: boolean) => void;
+    onPan?: (dx: number, dy: number) => void;
+    onCopyNode?: (nodeId: string) => void;
+    onPasteNode?: (parentId: string) => void;
+    onCutNode?: (nodeId: string) => void;
+    onPasteImage?: (parentId: string, imageData: string, width: number, height: number) => void;
+    onZoom?: (delta: number, x: number, y: number) => void;
+    onZoomReset?: () => void;
+    onUndo?: () => void;
+    onRedo?: () => void;
+    onStyleAction?: (nodeId: string, action: StyleAction) => void;
+    onEditEnd?: (nodeId: string) => void;
+    onToggleFold?: (nodeId: string) => void;
+    onToggleCommandPalette?: () => void;
+    onUpdateNodeWidth?: (nodeId: string, increment: number) => void;
+    shortcuts?: ShortcutConfig;
+    allowReadOnly?: boolean;
+}
+
+declare class InteractionOrchestrator {
+    private container;
+    private commandBus;
+    private mindMap;
+    readonly options: InteractionOptions;
+    private keyboardHandler;
+    private zoomPanHandler;
+    private dragDropHandler;
+    private nodeEditor;
+    private cleanupFns;
+    private isReadOnly;
+    private _maxWidth;
+    private _getNodeElement;
+    private _zoomNode;
+    private getSelectedNodeId;
+    constructor(deps: InteractionOrchestratorDeps);
+    get isReadOnlyState(): boolean;
+    getShortcuts(): ShortcutConfig_2;
+    setReadOnly(readOnly: boolean): void;
+    focus(): void;
+    set maxWidth(width: number);
+    get maxWidth(): number;
+    editNode(nodeId: string): void;
+    getNodeElement(nodeId: string): HTMLElement | undefined;
+    zoomNode(nodeId: string): void;
+    updateSelection(_nodeId: string | null): void;
+    destroy(): void;
+    private attachEvents;
+    private startEditing;
+}
+
+declare interface InteractionOrchestratorDeps {
+    container: HTMLElement;
+    options: InteractionOptions;
+    commandBus: CommandBus;
+    mindMap: MindMap;
+    getSelectedNodeId: () => string | null;
+    getNodeElement: (nodeId: string) => HTMLElement | undefined;
+    zoomNode: (nodeId: string) => void;
+}
+
 /**
  * The main class for the Kakidash mind map library.
  * It manages the mind map data, interaction, and rendering.
  */
 export declare class Kakidash extends TypedEventEmitter<KakidashEventMap> {
     private mindMap;
-    private controller;
+    controller: MindMapController;
+    interactionOrchestrator: InteractionOrchestrator;
+    commandBus: CommandBus;
     constructor(container: HTMLElement, options?: KakidashOptions);
     addNode(parentId: string, topic?: string, layoutSide?: 'left' | 'right', options?: {
         emitChange?: boolean;
@@ -170,8 +423,61 @@ export declare interface KeyBinding {
     altKey?: boolean;
 }
 
+declare interface KeyBinding_2 {
+    key: string;
+    ctrlKey?: boolean;
+    metaKey?: boolean;
+    shiftKey?: boolean;
+    altKey?: boolean;
+}
+
 export declare type LayoutMode = 'Right' | 'Left' | 'Both';
 
+declare interface LayoutResult {
+    nodes: NodeLayout[];
+    connections: ConnectionLayout[];
+}
+
+declare class LayoutSwitcher {
+    container: HTMLElement;
+    element: HTMLDivElement;
+    options: LayoutSwitcherOptions;
+    currentMode: LayoutMode;
+    currentTheme: Theme;
+    layoutButtons: Map<LayoutMode, HTMLButtonElement>;
+    themeButtons: Map<Theme, HTMLButtonElement>;
+    constructor(container: HTMLElement, options: LayoutSwitcherOptions);
+    private render;
+    private addSeparator;
+    private createLayoutButton;
+    private createThemeButton;
+    private createIconActionButton;
+    private styleButton;
+    private updateActiveButtons;
+    setMode(mode: LayoutMode): void;
+    setTheme(theme: Theme): void;
+    getIconDescriptions(locale: 'en' | 'ja'): Array<{
+        id: string;
+        desc: string;
+    }>;
+    getRightIcon(): string;
+    getLeftIcon(): string;
+    getBothIcon(): string;
+    getThemeDefaultIcon(): string;
+    getThemeSimpleIcon(): string;
+    getThemeColorfulIcon(): string;
+    getThemeCustomIcon(): string;
+    getZoomResetIcon(): string;
+    getHelpIcon(): string;
+}
+
+declare interface LayoutSwitcherOptions {
+    onLayoutChange: (mode: LayoutMode) => void;
+    onThemeChange: (theme: Theme) => void;
+    onZoomReset?: () => void;
+    onShowHelp?: () => void;
+}
+
 declare class MindMap {
     root: Node_2;
     theme: Theme;
@@ -201,6 +507,113 @@ declare class MindMap {
     private isDescendant;
 }
 
+declare class MindMapController {
+    private mindMap;
+    private service;
+    private renderer;
+    private eventBus;
+    private styleEditor;
+    private commandPalette;
+    private locale;
+    private interactionOrchestrator;
+    private layoutSwitcher;
+    private fileIOService;
+    private themeService;
+    private commandBus;
+    private historyService;
+    private clipboardService;
+    private searchService;
+    private viewportService;
+    private navigationService;
+    private anchorNodeId;
+    private selectedNodeId;
+    private selectedNodeIds;
+    private layoutMode;
+    private isBatching;
+    private maxWidth;
+    private pendingNodeCreation;
+    constructor(deps: ControllerDependencies);
+    private subscribeToModel;
+    private subscribeToCommands;
+    setInteractionOrchestrator(orchestrator: InteractionOrchestrator): void;
+    setLayoutSwitcher(switcher: LayoutSwitcher): void;
+    init(containerWidth: number, containerHeight: number): void;
+    destroy(): void;
+    getData(): MindMapData;
+    loadData(data: MindMapData): void;
+    batch(callback: () => void): void;
+    getSelectedNodeId(): string | null;
+    getSelectedNodeIds(): string[];
+    private getIdsToActOn;
+    private saveState;
+    addNode(parentId: string, topic?: string, layoutSide?: 'left' | 'right', options?: {
+        emitChange?: boolean;
+    }): Node_2 | null;
+    addSibling(referenceId: string, position?: 'before' | 'after', topic?: string, options?: {
+        emitChange?: boolean;
+    }): Node_2 | null;
+    insertParent(targetId: string, topic?: string, options?: {
+        emitChange?: boolean;
+    }): Node_2 | null;
+    deleteNode(nodeId: string): void;
+    updateNode(nodeId: string, updates: {
+        topic?: string;
+        style?: Partial<NodeStyle>;
+        icon?: string;
+    }): void;
+    updateNodeWidth(nodeId: string, increment: number): void;
+    addChildNode(parentId: string): void;
+    addSiblingNode(nodeId: string, position?: 'before' | 'after'): void;
+    insertParentNode(nodeId: string): void;
+    removeNode(nodeId: string): void;
+    selectNode(nodeId: string | null): void;
+    selectNodes(nodeIds: string[]): void;
+    private updateSelectionState;
+    private restoreSelection;
+    private findTargetIdAfterRemoval;
+    moveNode(nodeId: string, targetId: string, position: 'top' | 'bottom' | 'left' | 'right'): void;
+    updateNodeTopic(nodeId: string, topic: string): void;
+    render(): void;
+    /**
+     * Fast path: update selection styles without full DOM rebuild.
+     */
+    private renderSelection;
+    setLayoutMode(mode: LayoutMode): void;
+    getLayoutMode(): LayoutMode;
+    setMaxNodeWidth(width: number): void;
+    getMaxNodeWidth(): number;
+    updateGlobalStyles(styles: MindMapStyles): void;
+    setTheme(theme: Theme, options?: {
+        saveState?: boolean;
+        emitChange?: boolean;
+    }): void;
+    resetZoom(): void;
+    panBoard(dx: number, dy: number): void;
+    zoomBoard(delta: number, clientX: number, clientY: number): void;
+    setReadOnly(readOnly: boolean): void;
+    undo(): void;
+    redo(): void;
+    toggleFold(nodeId: string): void;
+    navigateNode(nodeId: string | null, direction: Direction, extendSelection?: boolean): void;
+    selectRangeTo(targetId: string): void;
+    private selectRange;
+    copyNode(nodeId: string): void;
+    pasteNode(parentId: string): void;
+    cutNode(nodeId: string): void;
+    pasteImage(parentId: string, imageData: string, width?: number, height?: number): void;
+    onEditEnd(): void;
+    onStyleAction(nodeId: string, action: StyleAction): void;
+    toggleCommandPalette(): void;
+    registerCommand(command: CustomCommand): void;
+    searchNodes(query: string): Node_2[];
+    private handleSearchInput;
+    private handleSearchResultSelect;
+    private handleIconSelect;
+    private handleCommandSelect;
+    private ensureNodeVisible;
+    showHelpModal(): void;
+}
+
 export declare interface MindMapData {
     nodeData: MindMapNodeData;
     linkData?: any;
@@ -233,6 +646,31 @@ export declare interface MindMapNodeData {
     customWidth?: number;
 }
 
+declare class MindMapService {
+    mindMap: MindMap;
+    private idGenerator;
+    constructor(mindMap: MindMap, idGenerator: IdGenerator);
+    addNode(parentId: string, topic?: string, layoutSide?: 'left' | 'right'): Node_2 | null;
+    addImageNode(parentId: string, imageData: string, width?: number, height?: number): Node_2 | null;
+    removeNode(id: string): boolean;
+    removeNodes(ids: string[]): boolean;
+    updateNodeTopic(id: string, topic: string): boolean;
+    updateNodeStyle(id: string, style: Partial<NodeStyle>): boolean;
+    updateNodesStyle(ids: string[], style: Partial<NodeStyle>): boolean;
+    toggleNodeFold(id: string): boolean;
+    setTheme(theme: Theme): void;
+    updateNodeCustomWidth(id: string, width: number | undefined): boolean;
+    moveNode(nodeId: string, newParentId: string, layoutSide?: 'left' | 'right'): boolean;
+    addSibling(referenceId: string, position: 'before' | 'after', topic?: string): Node_2 | null;
+    reorderNode(nodeId: string, targetId: string, position: 'before' | 'after'): boolean;
+    insertNodeAsParent(nodeId: string, targetId: string): boolean;
+    insertParent(targetId: string, topic?: string): Node_2 | null;
+    updateNodeIcon(id: string, icon: string): boolean;
+    addExistingNodes(parentId: string, nodes: Node_2[]): boolean;
+    exportData(): MindMapData;
+    importData(data: MindMapData): void;
+}
+
 export declare interface MindMapStyles {
     rootNode?: {
         border?: string;
@@ -253,6 +691,33 @@ export declare interface MindMapStyles {
     [key: string]: any;
 }
 
+/**
+ * Handles navigation logic (keyboard arrow navigation) within the mind map.
+ * Extracted from MindMapController to follow Single Responsibility Principle.
+ */
+declare class NavigationService {
+    private mindMap;
+    private layoutMode;
+    constructor(mindMap: MindMap);
+    /** Set current layout mode */
+    setLayoutMode(mode: LayoutMode): void;
+    /** Get current layout mode */
+    getLayoutMode(): LayoutMode;
+    /**
+     * Navigate from a node in the given direction.
+     * Returns the target node ID, or undefined if navigation is not possible.
+     */
+    navigate(nodeId: string, direction: Direction): string | undefined;
+    /** Get the directional side of a node (left or right) */
+    getNodeDirection(node: Node_2): 'left' | 'right';
+    /** Ensure all root children have explicit layout sides in Both mode */
+    ensureExplicitLayoutSides(parent: Node_2): void;
+    private navigateLeft;
+    private navigateRight;
+    private navigateUp;
+    private navigateDown;
+}
+
 declare class Node_2 {
     id: string;
     topic: string;
@@ -265,10 +730,8 @@ declare class Node_2 {
         width: number;
         height: number;
     };
-    layoutSide?: 'left' | 'right';
-    isFolded: boolean;
     icon?: string;
-    customWidth?: number;
+    presentation: NodePresentationData;
     constructor(id: string, topic: string, parentId?: string | null, isRoot?: boolean, image?: string, layoutSide?: 'left' | 'right', isFolded?: boolean, icon?: string, imageSize?: {
         width: number;
         height: number;
@@ -280,18 +743,126 @@ declare class Node_2 {
 }
 export { Node_2 as Node }
 
+declare interface NodeLayout {
+    nodeId: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    direction: 'left' | 'right';
+    isRoot: boolean;
+}
+
+declare interface NodePresentationData {
+    layoutSide?: 'left' | 'right';
+    isFolded: boolean;
+    customWidth?: number;
+}
+
 export declare interface NodeStyle {
     color?: string;
     background?: string;
     fontSize?: string;
     fontWeight?: string;
     fontStyle?: string;
+    textDecoration?: string;
+}
+
+declare interface Renderer {
+    container: HTMLElement;
+    maxWidth: number;
+    renderFromLayout(layout: LayoutResult, mindMap: MindMap, selectedNodeIds: Set<string>, layoutMode: LayoutMode): void;
+    updateTransform(x: number, y: number, scale: number): void;
+    measureNode(node: Node_2, mindMap?: MindMap): {
+        width: number;
+        height: number;
+    };
+    updateSelection(selectedNodeIds: Set<string>): void;
+    getNodeElement(nodeId: string): HTMLElement | undefined;
+}
+
+declare class SearchService {
+    private mindMap;
+    constructor(mindMap: MindMap);
+    searchNodes(query: string): Node_2[];
 }
 
-export declare type ShortcutAction = 'navUp' | 'navDown' | 'navLeft' | 'navRight' | 'addChild' | 'insertParent' | 'addSibling' | 'addSiblingBefore' | 'deleteNode' | 'beginEdit' | 'copy' | 'paste' | 'cut' | 'undo' | 'redo' | 'bold' | 'italic' | 'increaseFontSize' | 'decreaseFontSize' | 'zoomIn' | 'zoomOut' | 'resetZoom' | 'toggleFold' | 'centerMap' | 'selectColor1' | 'selectColor2' | 'selectColor3' | 'selectColor4' | 'selectColor5' | 'selectColor6' | 'selectColor7' | 'openCommandPalette' | 'increaseNodeWidth' | 'decreaseNodeWidth';
+export declare type ShortcutAction = 'navUp' | 'navDown' | 'navLeft' | 'navRight' | 'addChild' | 'insertParent' | 'addSibling' | 'addSiblingBefore' | 'deleteNode' | 'beginEdit' | 'copy' | 'paste' | 'cut' | 'undo' | 'redo' | 'bold' | 'italic' | 'increaseFontSize' | 'decreaseFontSize' | 'zoomIn' | 'zoomOut' | 'resetZoom' | 'toggleFold' | 'centerMap' | 'selectColor1' | 'selectColor2' | 'selectColor3' | 'selectColor4' | 'selectColor5' | 'selectColor6' | 'selectColor7' | 'openCommandPalette' | 'increaseNodeWidth' | 'decreaseNodeWidth' | 'strikethrough';
+
+declare type ShortcutAction_2 =
+| 'navUp'
+| 'navDown'
+| 'navLeft'
+| 'navRight'
+| 'addChild'
+| 'insertParent'
+| 'addSibling'
+| 'addSiblingBefore'
+| 'deleteNode'
+| 'beginEdit' // F2, etc
+| 'copy'
+| 'paste'
+| 'cut'
+| 'undo'
+| 'redo'
+| 'bold'
+| 'italic'
+| 'increaseFontSize'
+| 'decreaseFontSize'
+| 'zoomIn'
+| 'zoomOut'
+| 'resetZoom'
+| 'toggleFold'
+| 'centerMap'
+| 'selectColor1'
+| 'selectColor2'
+| 'selectColor3'
+| 'selectColor4'
+| 'selectColor5'
+| 'selectColor6'
+| 'selectColor7'
+| 'openCommandPalette'
+| 'increaseNodeWidth'
+| 'decreaseNodeWidth'
+| 'strikethrough';
 
 export declare type ShortcutConfig = Partial<Record<ShortcutAction, KeyBinding[]>>;
 
+declare type ShortcutConfig_2 = Partial<Record<ShortcutAction_2, KeyBinding_2[]>>;
+
+declare type StyleAction = {
+    type: 'bold';
+} | {
+    type: 'italic';
+} | {
+    type: 'increaseSize';
+} | {
+    type: 'decreaseSize';
+} | {
+    type: 'strikethrough';
+} | {
+    type: 'color';
+    index: number;
+};
+
+declare class StyleEditor {
+    container: HTMLElement;
+    editorEl: HTMLElement;
+    currentNodeId: string | null;
+    onUpdate?: (nodeId: string, style: Partial<NodeStyle>) => void;
+    static readonly FONT_SIZES: {
+        label: string;
+        value: string;
+    }[];
+    static readonly PALETTE: string[];
+    constructor(container: HTMLElement);
+    private createEditor;
+    private updateActivePaletteItem;
+    private updateButtonState;
+    show(nodeId: string, currentStyle: NodeStyle): void;
+    hide(): void;
+}
+
 export declare class SvgGenerator {
     /**
      * Generates an SVG string representation of the mind map content within the given container.
@@ -303,6 +874,58 @@ export declare class SvgGenerator {
 
 export declare type Theme = 'default' | 'simple' | 'colorful' | 'custom';
 
+/**
+ * Service for handling Theme and Style updates for the MindMap.
+ */
+declare class ThemeService {
+    private mindMap;
+    private service;
+    private renderer;
+    private eventBus;
+    private layoutSwitcher?;
+    private savedCustomStyles;
+    /**
+     * Initializes a new instance of the ThemeService.
+     * @param deps Dependencies required for Theme/Style operations
+     */
+    constructor(deps: ThemeServiceDependencies);
+    /**
+     * Sets the optional layoutSwitcher reference to propagate theme changes
+     * @param switcher LayoutSwitcher instance
+     */
+    setLayoutSwitcher(switcher: LayoutSwitcher): void;
+    /**
+     * Applies the mind map's initial theme upon loading.
+     */
+    applyInitialTheme(): void;
+    /**
+     * Updates global styles and persists them to savedCustomStyles.
+     * Emits a command and change events.
+     * @param styles MindMapStyles to update
+     */
+    updateGlobalStyles(styles: MindMapStyles): void;
+    /**
+     * Applies the given theme, updates underlying models and the layout.
+     * @param theme Theme to apply
+     * @param options Execution Options (saveState, emitChange)
+     */
+    setTheme(theme: Theme, options?: {
+        saveState?: boolean;
+        emitChange?: boolean;
+    }): void;
+    /**
+     * Getter for currently saved custom styles.
+     */
+    getSavedCustomStyles(): MindMapStyles;
+}
+
+declare interface ThemeServiceDependencies {
+    mindMap: MindMap;
+    service: MindMapService;
+    renderer: Renderer;
+    eventBus: IMindMapEventBus;
+}
+
 export declare class TypedEventEmitter<EventMap extends Record<string, any>> {
     private listeners;
     on<K extends keyof EventMap>(event: K, listener: (payload: EventMap[K]) => void): void;
@@ -312,6 +935,52 @@ export declare class TypedEventEmitter<EventMap extends Record<string, any>> {
     protected emit<K extends keyof EventMap>(event: K, payload: EventMap[K]): void;
 }
 
+/**
+ * Manages viewport state (pan, zoom, scale) and animation.
+ * Extracted from MindMapController to follow Single Responsibility Principle.
+ */
+declare class ViewportService {
+    private panX;
+    private panY;
+    private targetPanX;
+    private targetPanY;
+    private scale;
+    private animationFrameId;
+    private renderer;
+    constructor(renderer: Renderer);
+    /** Get current scale factor */
+    getScale(): number;
+    /** Get current pan position */
+    getPan(): {
+        x: number;
+        y: number;
+    };
+    /** Get target pan position (for animation destination) */
+    getTargetPan(): {
+        x: number;
+        y: number;
+    };
+    /** Set initial pan position (used during initialization) */
+    setInitialPan(x: number, y: number): void;
+    /** Pan the viewport by delta values */
+    pan(dx: number, dy: number): void;
+    /** Zoom centered on a specific screen coordinate */
+    zoom(delta: number, clientX: number, clientY: number): void;
+    /** Reset zoom to 1.0 scale */
+    resetZoom(): void;
+    /** Apply current transform to the renderer */
+    applyTransform(): void;
+    /**
+     * Ensure a node is visible in the viewport.
+     * Pans the viewport to make the node visible if it's offscreen.
+     */
+    ensureNodeVisible(nodeId: string, centerIfOffscreen?: boolean, immediate?: boolean): void;
+    /** Start the smooth animation loop for pan transitions */
+    startAnimationLoop(): void;
+    /** Stop animation loop and clean up */
+    destroy(): void;
+}
+
 export declare class XMindImporter {
     private idGenerator;
     constructor();