# PowerPoint Toolbox Project Structure UML

This UML diagram represents the file and directory structure of the PowerPoint toolbox add-in.

```mermaid
classDiagram
    %% Project Structure
    class Repository {
        <<Root>>
        Configuration Files
        Source Code
        Assets
        Documentation
    }

    %% Configuration Files
    class ConfigFiles {
        <<Config>>
        .eslintrc.json
        .gitignore
        .hintrc
        babel.config.json
        manifest.xml
        package.json
        tsconfig.json
        webpack.config.js
    }

    %% Source Code Structure
    class SourceCode {
        <<Source>>
        /src
    }

    class Commands {
        <<Module>>
        /src/commands
        commands.html
        commands.ts
    }

    class Taskpane {
        <<Module>>
        /src/taskpane
        index.tsx
        taskpane.html
    }

    class Components {
        <<Module>>
        /src/taskpane/components
        ActionButton.tsx
        AlignmentButtons.tsx
        App.tsx
        commonStyles.tsx
        ConfidentialButtons.tsx
        DraftButtons.tsx
        GridGuidelineManager.tsx
        Header.tsx
        InsertTitles.tsx
        MatchProperties.tsx
        MatchSizes.tsx
        ProgressBarButtons.tsx
        RoundImage.tsx
        Section.tsx
        SwapPositions.tsx
    }

    class Types {
        <<Module>>
        /src/taskpane/types
        office-types.ts
    }

    %% Assets
    class Assets {
        <<Resources>>
        /assets
        edison-16.png
        edison-32.png
        edison-64.png
        edison-80.png
        edison-128.png
        edison-filled.png
    }

    %% Documentation
    class Documentation {
        <<Docs>>
        /docs
        DEVELOPERS.md
        USER_GUIDE.md
    }

    %% Relationships
    Repository *-- ConfigFiles : contains
    Repository *-- SourceCode : contains
    Repository *-- Assets : contains
    Repository *-- Documentation : contains
    
    SourceCode *-- Commands : contains
    SourceCode *-- Taskpane : contains
    
    Taskpane *-- Components : contains
    Taskpane *-- Types : contains
    
    %% Dependency Relationships
    Components --> Types : imports
    Commands --> Components : may use
```

## Project Structure Explanation

This UML diagram illustrates the file and directory organization of the PowerPoint toolbox add-in:

1. **Repository Root**: Contains configuration files, source code, assets, and documentation.

2. **Configuration Files**: Various configuration files for the development environment, including:
   - manifest.xml: Office add-in manifest
   - package.json: NPM package configuration
   - webpack.config.js: Webpack bundler configuration
   - tsconfig.json: TypeScript configuration
   - babel.config.json: Babel configuration
   - .eslintrc.json: ESLint configuration
   - .gitignore: Git ignore rules
   - .hintrc: Hint configuration

3. **Source Code Structure**:
   - **/src/commands**: Command-related files for Office ribbon integration
   - **/src/taskpane**: Main taskpane UI implementation
     - **/components**: React components for the UI
     - **/types**: TypeScript type definitions

4. **Assets**: Icon files in various sizes for the add-in

5. **Documentation**: Developer and user documentation

## Build and Execution Flow

The PowerPoint toolbox add-in follows this general build and execution flow:

1. Source code is written in TypeScript and React
2. Webpack bundles the code according to webpack.config.js
3. The Office add-in manifest (manifest.xml) defines how the add-in appears in PowerPoint
4. When loaded in PowerPoint, the add-in renders the taskpane UI
5. The taskpane components interact with PowerPoint through the Office JS API

This structure follows Microsoft's recommended patterns for Office add-in development using React and TypeScript.