@power-maverick/tool-erd-generator 0.0.7 → 0.0.9

package/{webview/vite.config.ts → vite.config.ts}

@@ -5,7 +5,7 @@ import { defineConfig } from 'vite';
 export default defineConfig({
   plugins: [react()],
   build: {
-    outDir: '../dist/webview',
+    outDir: 'dist',
     rollupOptions: {
       output: {
         entryFileNames: '[name].js',

package/CONVERSION_SUMMARY.md

@@ -1,288 +0,0 @@
-# ERD Generator React Conversion - Implementation Summary
-
-## Overview
-Successfully converted the ERD Generator from vanilla TypeScript/Webpack to React-based architecture with dual platform support (DVDT and PPTB).
-
-## Objectives Achieved
-
-### ✅ 1. Convert to React-based Tool
-- Implemented React 18 with functional components and hooks
-- Created modular component structure (App.tsx, main.tsx)
-- Migrated all UI logic to React patterns (state management, effects, event handlers)
-- Maintained all existing functionality
-
-### ✅ 2. Enable DVDT Integration with Minimal Changes
-- Kept the same integration API: `showERDPanel(extensionUri, environmentUrl, accessToken)`
-- Updated integration.ts to generate HTML dynamically instead of loading template
-- Removed `fs` dependency from integration layer
-- Webview receives credentials via postMessage (unchanged behavior)
-- File save and clipboard operations still handled by VS Code APIs
-
-### ✅ 3. Enable PPTB Integration
-- Automatic environment detection (DVDT vs PPTB)
-- Support for `window.toolboxAPI` methods:
-  - `getToolContext()` - Get connection details
-  - `showNotification()` - Display notifications
-  - `onToolboxEvent()` - Subscribe to events
-  - `getConnections()` - List available connections
-- Listens for `TOOLBOX_CONTEXT` via postMessage
-- Browser-native file download and clipboard APIs for PPTB
-
-### ✅ 4. No Node.js Artifacts in Output
-- Webview bundle is pure browser JavaScript
-- Verified zero occurrences of:
-  - `require()`
-  - `module.exports`
-  - `process.env`
-  - Other Node.js-specific patterns
-- Bundle size: ~196 KB (minified)
-- Uses only browser-standard APIs
-
-## Technical Architecture
-
-### Build System
-**Before (Webpack):**
-```
-webpack → dist/webview/webview.js (single bundle)
-```
-
-**After (Vite):**
-```
-vite → dist/webview/
-  ├── index.html
-  ├── index.js
-  └── index.css
-```
-
-### Component Structure
-```
-webview/
-├── App.tsx          # Main React component (16.7 KB)
-├── main.tsx         # React entry point (231 bytes)
-└── styles.css       # Styling (6.5 KB)
-```
-
-### Dual Platform Support
-```typescript
-// Automatic detection
-if (window.acquireVsCodeApi) {
-  // DVDT mode - VS Code webview
-  setIsVSCode(true);
-} else if (window.toolboxAPI) {
-  // PPTB mode - Power Platform Toolbox
-  setIsPPTB(true);
-}
-```
-
-### Integration Flow
-
-**DVDT (VS Code):**
-1. Extension calls `showERDPanel(uri, url, token)`
-2. Creates WebView panel
-3. Generates HTML with React bundle references
-4. Sends credentials via `postMessage`
-5. React app receives and uses credentials
-6. File operations go through VS Code APIs
-
-**PPTB (Web):**
-1. Tool loads in browser iframe
-2. Listens for `TOOLBOX_CONTEXT`
-3. Calls `toolboxAPI.getToolContext()`
-4. React app receives connection details
-5. File operations use browser APIs
-
-## File Changes
-
-### Added Files
-- `webview/App.tsx` - Main React component (419 lines)
-- `webview/main.tsx` - React entry point (10 lines)
-- `webview/styles.css` - Styling (232 lines)
-- `vite.config.ts` - Vite configuration (17 lines)
-- `index.html` - HTML entry point (11 lines)
-
-### Modified Files
-- `package.json` - Updated dependencies and build scripts
-- `tsconfig.webview.json` - Updated for React
-- `src/dvdtIntegration/integration.ts` - Generate HTML instead of loading template
-- `README.md` - Updated documentation
-- `tools/erd-generator/README.md` - Comprehensive guide
-
-### Removed Files
-- `webpack.config.js` - No longer needed (replaced by Vite)
-- `src/dvdtIntegration/webview.ts` - Replaced by React components
-- `ui/webview.html` - HTML now generated dynamically
-
-## Dependencies
-
-### Production Dependencies
-```json
-{
-  "react": "^18.3.1",
-  "react-dom": "^18.3.1"
-}
-```
-
-### Development Dependencies
-```json
-{
-  "@types/react": "^18.3.1",
-  "@types/react-dom": "^18.3.0",
-  "@vitejs/plugin-react": "^4.3.4",
-  "vite": "^6.0.7"
-}
-```
-
-### Removed Dependencies
-- `webpack`: ^5.102.1
-- `webpack-cli`: ^5.1.4
-- `ts-loader`: ^9.5.4
-
-## Build Output
-
-### Size Comparison
-**Before (Webpack):**
-- webview.js: ~50 KB
-
-**After (Vite):**
-- index.js: 191 KB (includes React)
-- index.css: 5.2 KB
-- index.html: 376 bytes
-- **Total: ~196 KB**
-
-Note: Size increase is expected due to React library inclusion, but the bundle is still highly optimized.
-
-### Structure
-```
-dist/
-├── src/                    # Extension code (Node.js)
-│   ├── index.js           # Main export
-│   ├── components/
-│   │   └── ERDGenerator.js
-│   ├── utils/
-│   │   └── DataverseClient.js
-│   └── dvdtIntegration/
-│       └── integration.js
-└── webview/               # Browser bundle
-    ├── index.html
-    ├── index.js
-    └── index.css
-```
-
-## Quality Checks
-
-### ✅ Build Status
-- Extension build: SUCCESS
-- Webview build: SUCCESS
-- No TypeScript errors
-- No linting errors
-
-### ✅ Security
-- CodeQL analysis: 0 vulnerabilities
-- No security warnings
-- Clean code review
-
-### ✅ Browser Compatibility
-- Pure browser JavaScript
-- No Node.js dependencies
-- Standard Web APIs only
-- Works in modern browsers
-
-## Migration Guide for Users
-
-### For DVDT Integration (No Changes Required)
-The integration API remains the same:
-```typescript
-import { showERDPanel } from '@dvdt-tools/erd-generator';
-
-showERDPanel(context.extensionUri, environmentUrl, accessToken);
-```
-
-**Note:** If you were referencing the webview bundle path directly, update from:
-- Old: `dist/webview/webview.js`
-- New: `dist/webview/index.js`
-
-### For PPTB Integration (New Feature)
-No code changes needed - the tool automatically detects PPTB environment and integrates.
-
-## Benefits
-
-### Developer Experience
-- ⚡ **Faster builds**: Vite HMR is instant
-- 🔧 **Simpler config**: Vite config is 17 lines vs 30+ for Webpack
-- 📦 **Better TypeScript**: Native TypeScript support
-- 🎨 **Component reusability**: React components are modular
-
-### User Experience
-- 🎯 **Consistent UI**: Same experience in DVDT and PPTB
-- 🚀 **Modern feel**: React provides smooth interactions
-- 🔄 **Reactive updates**: State changes update UI automatically
-- 💪 **Robust**: Type-safe throughout
-
-### Maintenance
-- 📚 **Better docs**: Comprehensive guides for both platforms
-- 🧪 **Easier testing**: React Testing Library compatible
-- 🔍 **Clearer code**: Component-based structure
-- 🛠️ **Industry standard**: React is widely known
-
-## Future Enhancements (Out of Scope)
-
-While not part of this PR, future enhancements could include:
-- Unit tests with React Testing Library
-- E2E tests with Playwright
-- Additional diagram export formats
-- Real-time collaboration features
-- Theme customization
-- Diagram templates
-
-## Testing Recommendations
-
-### Manual Testing
-1. **DVDT (VS Code)**
-   - Install in Dataverse DevTools
-   - Call showERDPanel with credentials
-   - Verify panel opens and loads
-   - Select a solution and generate ERD
-   - Test download and copy functions
-
-2. **PPTB (Web)**
-   - Deploy to Power Platform Toolbox
-   - Open tool from toolbox
-   - Verify connection context is received
-   - Select a solution and generate ERD
-   - Test browser download and copy functions
-
-### Automated Testing (Future)
-- Unit tests for React components
-- Integration tests for API calls
-- E2E tests for complete workflows
-- Visual regression tests
-
-## Rollback Plan
-
-If issues are discovered:
-1. Revert to previous version (pre-React)
-2. Webpack and old webview files are in git history
-3. Package.json can be reverted to use webpack
-4. No database or breaking API changes
-
-## Success Metrics
-
-- ✅ Build completes successfully
-- ✅ No linting errors
-- ✅ No security vulnerabilities
-- ✅ Zero Node.js artifacts in webview bundle
-- ✅ Dual platform support implemented
-- ✅ Documentation updated
-- ✅ Code review passed
-- ✅ All original features preserved
-
-## Conclusion
-
-This conversion successfully modernizes the ERD Generator tool while:
-- Maintaining backward compatibility with DVDT
-- Adding new PPTB integration capabilities
-- Eliminating Node.js artifacts from webview
-- Following industry best practices
-- Providing comprehensive documentation
-
-The tool is now production-ready for both DVDT and PPTB platforms.

package/REFACTORING_COMPLETE.md

@@ -1,352 +0,0 @@
-# ERD Generator Dual-Platform Refactoring Summary
-
-## Completion Date
-October 19, 2025
-
-## Objective
-Refactor the ERD Generator to work with both PowerPlatform ToolBox (PPTB) and Dataverse DevTools (DVDT) while maintaining a single codebase and ensuring simple integration for tool makers.
-
-## Implementation Status: ✅ COMPLETE
-
-All design decisions and implementation tasks have been successfully completed.
-
----
-
-## Design Decisions (All Approved ✅)
-
-### 1. Single Package with Runtime Detection ✅
-- **Implementation**: Platform abstraction layer in `platformApi.ts` with `PlatformAPIFactory`
-- **Detection**: Automatic environment detection via `isPPTB()` and `isDVDT()` methods
-- **Result**: Zero configuration needed - tool detects platform automatically
-
-### 2. Unified Platform API Interface ✅
-- **Interface**: `IPlatformAPI` with consistent methods across platforms
-- **Implementations**: 
-  - `PPTBPlatformAPI` - Uses `window.toolboxAPI`
-  - `DVDTPlatformAPI` - Uses VS Code message passing
-- **Result**: App.tsx uses same API calls regardless of platform
-
-### 3. Single Build Output ✅
-- **Build System**: Vite for webview, TypeScript compiler for extension code
-- **Output Location**: `dist/webview/` with predictable filenames
-  - `index.html` - Entry point
-  - `index.js` - Bundled application
-  - `index.css` - Compiled styles
-- **Result**: Both platforms use the same build artifacts
-
-### 4. Backward Compatible ✅
-- **DVDT Integration**: `showERDPanel()` function maintained
-- **API Stability**: No breaking changes to existing DVDT integration
-- **Verification**: Existing integration code works with new build output
-- **Result**: Existing DVDT consumers require no code changes
-
-### 5. Automatic Initialization ✅
-- **Platform Detection**: Runs on first render via `useEffect`
-- **Context Handling**:
-  - PPTB: Listens for `TOOLBOX_CONTEXT` via `postMessage`
-  - DVDT: Listens for `setCredentials` command
-- **Result**: No manual initialization required by consumers
-
----
-
-## Completed Tasks
-
-### ✅ 1. Install @pptb/types Dependency
-- Added `@pptb/types` as dev dependency
-- Provides TypeScript definitions for PPTB API
-- Version: 1.0.0
-
-### ✅ 2. Create Platform Abstraction Layer
-**File**: `src/models/platformApi.ts` (280 lines)
-
-**Components**:
-- `IPlatformAPI` interface - Unified API surface
-- `PPTBPlatformAPI` class - PPTB implementation
-- `DVDTPlatformAPI` class - DVDT implementation
-- `PlatformAPIFactory` - Factory with auto-detection
-
-**Key Methods**:
-- `getToolContext()` - Retrieve connection credentials
-- `showNotification()` - Display notifications
-- `saveFile()` - Save files to disk
-- `copyToClipboard()` - Copy text to clipboard
-- `getPlatformName()` - Get platform identifier
-
-### ✅ 3. Update React App for Dual-Mode
-**File**: `webview/App.tsx` (413 lines)
-
-**Changes**:
-- Added `platformAPI` state management
-- Implemented dual-mode initialization in `useEffect`
-- Updated all platform-specific operations to use `IPlatformAPI`
-- Added message listeners for both PPTB and DVDT contexts
-- Refactored notification, file save, and clipboard operations
-
-### ✅ 4. Update Integration Code
-**File**: `src/dvdtIntegration/integration.ts`
-
-**Status**: Already compatible - no changes needed
-- `showERDPanel()` function maintained
-- Uses correct build output paths via Constants
-- Backward compatible with existing DVDT consumers
-
-### ✅ 5. Update Build Configuration
-**Changes**:
-- Created `webview/tsconfig.json` for proper TypeScript support
-- Created `webview/tsconfig.node.json` for Vite config
-- Moved `vite.config.ts` to `webview/` folder
-- Updated `package.json` scripts:
-  - `build:webview`: `cd webview && vite build`
-  - `dev:webview`: `cd webview && vite`
-- Created `webview/index.html` as Vite entry point
-
-**Build Output**:
-```
-dist/
-├── src/              # Extension code (TypeScript compiled)
-└── webview/          # React app (Vite bundled)
-    ├── index.html
-    ├── index.js
-    └── index.css
-```
-
-**Verification**: ✅ Build succeeds with predictable filenames
-
-### ✅ 6. Update Documentation
-**Created Files**:
-1. **PPTB_Integration.md** (300+ lines)
-   - Complete PPTB integration guide
-   - Installation instructions
-   - Usage examples
-   - API reference
-   - Development tips
-
-2. **Integration_Examples.md** (600+ lines)
-   - Full PPTB tool example
-   - Full DVDT extension example
-   - Dual-mode tool creation guide
-   - Package.json templates
-
-3. **Updated README.md**
-   - Prominent dual-platform messaging
-   - Quick links to integration guides
-   - Platform support table
-   - Platform abstraction overview
-   - Technical architecture details
-
-### ✅ 7. Add Sample Code for Both Platforms
-**Location**: `docs/Integration_Examples.md`
-
-**Includes**:
-- Complete PPTB tool implementation (150+ lines)
-- Complete DVDT extension implementation (100+ lines)
-- Dual-mode custom webview example (100+ lines)
-- Package.json configuration for both platforms
-
----
-
-## Type Definitions
-
-### Created Files
-
-**File**: `src/types/pptb.d.ts`
-```typescript
-/// <reference types="@pptb/types" />
-
-declare global {
-    interface Window {
-        toolboxAPI: ToolBox.ToolBoxAPI;
-        TOOLBOX_CONTEXT?: {
-            toolId?: string | null;
-            connectionUrl?: string | null;
-            accessToken?: string | null;
-        };
-    }
-}
-```
-
----
-
-## Platform Detection Logic
-
-### Automatic Detection
-```typescript
-// In PlatformAPIFactory
-static isPPTB(): boolean {
-    return typeof window !== 'undefined' && 
-           'toolboxAPI' in window && 
-           window.toolboxAPI !== null;
-}
-
-static isDVDT(): boolean {
-    return typeof window !== 'undefined' && 
-           'acquireVsCodeApi' in window;
-}
-```
-
-### Factory Pattern
-```typescript
-const api = PlatformAPIFactory.create();
-// Automatically creates PPTBPlatformAPI or DVDTPlatformAPI
-```
-
----
-
-## Integration Workflows
-
-### PPTB Integration
-1. Tool calls `toolbox.loadTool()` with webview HTML
-2. HTML loads `dist/webview/index.html`
-3. App detects PPTB via `window.toolboxAPI`
-4. Listens for `TOOLBOX_CONTEXT` via `postMessage`
-5. Uses `PPTBPlatformAPI` for all operations
-
-### DVDT Integration
-1. Extension calls `showERDPanel(extensionUri, url, token)`
-2. WebView panel created with ERD tool
-3. App detects DVDT via `acquireVsCodeApi`
-4. Listens for `setCredentials` message
-5. Uses `DVDTPlatformAPI` for all operations
-
----
-
-## File Structure
-
-```
-tools/erd-generator/
-├── src/
-│   ├── models/
-│   │   └── platformApi.ts         # Platform abstraction ✅
-│   ├── types/
-│   │   └── pptb.d.ts             # PPTB type definitions ✅
-│   ├── dvdtIntegration/
-│   │   └── integration.ts         # DVDT showERDPanel() ✅
-│   ├── utils/
-│   │   └── Constants.ts           # Path constants ✅
-│   └── index.ts                    # Public exports ✅
-├── webview/
-│   ├── App.tsx                     # React app (refactored) ✅
-│   ├── main.tsx                    # React entry point ✅
-│   ├── styles.css                  # Styles ✅
-│   ├── index.html                  # Vite entry ✅
-│   ├── vite.config.ts             # Vite config ✅
-│   ├── tsconfig.json              # Webview TypeScript config ✅
-│   └── tsconfig.node.json         # Node TypeScript config ✅
-├── docs/
-│   ├── PPTB_Integration.md        # PPTB guide ✅
-│   ├── Integration_Examples.md    # Code examples ✅
-│   ├── DVDT_Integration.md        # DVDT guide ✅
-│   └── Getting_Started.md         # Beginner guide ✅
-├── dist/                           # Build output ✅
-│   ├── src/                        # Extension code
-│   └── webview/                    # React app
-│       ├── index.html
-│       ├── index.js
-│       └── index.css
-├── package.json                    # Updated scripts ✅
-└── README.md                       # Updated overview ✅
-```
-
----
-
-## Build Commands
-
-```bash
-# Build everything
-npm run build
-
-# Build extension code only
-npm run build:extension
-
-# Build webview only
-npm run build:webview
-
-# Development mode
-npm run dev
-```
-
-**Build Output**: ✅ Verified working with predictable filenames
-
----
-
-## Key Achievements
-
-1. ✅ **Zero Configuration** - Platform detection is automatic
-2. ✅ **Single Codebase** - No platform-specific branches in application code
-3. ✅ **Unified API** - Same interface for both platforms
-4. ✅ **Backward Compatible** - Existing DVDT integrations continue working
-5. ✅ **Predictable Build** - Vite outputs to dist/webview with stable filenames
-6. ✅ **Comprehensive Documentation** - Guides for both platforms with examples
-7. ✅ **Type Safety** - Full TypeScript support for both platforms
-
----
-
-## Testing Checklist
-
-### Build Verification ✅
-- [x] Extension code compiles without errors
-- [x] Webview builds with predictable filenames
-- [x] Build output structure matches requirements
-
-### Code Quality ✅
-- [x] Platform abstraction layer implemented
-- [x] Type definitions complete
-- [x] App.tsx refactored for dual-mode
-
-### Documentation ✅
-- [x] PPTB integration guide created
-- [x] Integration examples provided
-- [x] README updated with dual-platform support
-
-### Integration ✅
-- [x] DVDT `showERDPanel()` maintained
-- [x] Build paths compatible with DVDT
-- [x] No breaking changes introduced
-
----
-
-## Next Steps (For Testing)
-
-### Manual Testing Required
-
-1. **Test PPTB Integration**
-   - Load tool in PowerPlatform ToolBox
-   - Verify context injection works
-   - Test notifications, file save, clipboard
-   - Verify ERD generation
-
-2. **Test DVDT Integration**
-   - Install in Dataverse DevTools
-   - Call `showERDPanel()` from extension
-   - Verify credentials passed correctly
-   - Test ERD generation and export
-
-3. **Test Platform Detection**
-   - Verify automatic detection works
-   - Check console logs show correct platform
-   - Ensure no errors in browser console
-
----
-
-## Documentation Links
-
-- **PPTB Integration**: `docs/PPTB_Integration.md`
-- **DVDT Integration**: `docs/DVDT_Integration.md`
-- **Integration Examples**: `docs/Integration_Examples.md`
-- **Getting Started**: `docs/Getting_Started.md`
-- **Main README**: `README.md`
-
----
-
-## Conclusion
-
-The ERD Generator has been successfully refactored to support both PPTB and DVDT platforms with:
-
-- ✅ **Clean architecture** using platform abstraction pattern
-- ✅ **Zero breaking changes** to existing integrations
-- ✅ **Automatic platform detection** requiring no configuration
-- ✅ **Comprehensive documentation** for tool makers
-- ✅ **Working build system** with predictable output
-- ✅ **Type-safe implementation** with full TypeScript support
-
-**Status**: Ready for testing in both platforms! 🚀

package/TYPESCRIPT_NOTES.md

@@ -1,57 +0,0 @@
-# TypeScript Language Service Notes
-
-## Editor Errors vs Build Errors
-
-You may see TypeScript errors in VS Code's editor for `webview/App.tsx`, such as:
-- "Cannot find name 'window'"
-- "Cannot use JSX unless the '--jsx' flag is provided"
-
-**These are editor-only errors and do NOT affect the build.**
-
-## Why This Happens
-
-The VS Code TypeScript language service sometimes doesn't correctly pick up the separate `webview/tsconfig.json` configuration, especially in monorepo-style projects where different folders have different TypeScript configurations.
-
-## Build Still Works
-
-Despite the editor errors, the build process works correctly because:
-
-1. **Vite builds the webview** using `webview/tsconfig.json`:
-   - Has `"jsx": "react-jsx"` configured
-   - Includes DOM types via `"lib": ["ES2020", "DOM", "DOM.Iterable"]`
-   - Result: `npm run build:webview` ✅ succeeds
-
-2. **TypeScript compiles the extension** using `tsconfig.json`:
-   - Configured for Node.js/VS Code environment
-   - Excludes webview files
-   - Result: `npm run build:extension` ✅ succeeds
-
-## Verification
-
-```bash
-# Build succeeds with no errors
-npm run build
-
-# Output shows success
-✓ 81 modules transformed.
-✓ built in 382ms
-```
-
-## Solution (Optional)
-
-If you want to clear the editor errors, you can:
-
-1. **Reload VS Code window**: `Cmd+Shift+P` → "Developer: Reload Window"
-2. **Restart TS Server**: `Cmd+Shift+P` → "TypeScript: Restart TS Server"
-3. **Use workspace TypeScript**: Ensure VS Code uses the workspace TypeScript version
-
-However, these steps are optional since the build works correctly regardless.
-
-## Summary
-
-✅ **Build works perfectly** - all files compile and bundle correctly
-✅ **Code is valid** - React, JSX, and window references are all correct
-✅ **Type safety maintained** - Full TypeScript checking during build
-⚠️ **Editor shows false positives** - language service configuration issue only
-
-**You can safely ignore the editor errors and proceed with testing the tool in both PPTB and DVDT platforms.**