@power-maverick/tool-erd-generator 0.0.7

package/webview/styles.css

@@ -0,0 +1,288 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: var(--vscode-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
+    background: var(--vscode-editor-background, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
+    color: var(--vscode-editor-foreground, #333);
+    padding: 20px;
+    min-height: 100vh;
+    line-height: 1.6;
+}
+
+.container {
+    max-width: 1400px;
+    margin: 0 auto;
+}
+
+.header {
+    text-align: center;
+    margin-bottom: 30px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid var(--vscode-panel-border, rgba(255, 255, 255, 0.2));
+    color: var(--vscode-foreground, white);
+}
+
+.header h1 {
+    font-size: 2rem;
+    margin-bottom: 10px;
+}
+
+.header p {
+    font-size: 1rem;
+    opacity: 0.8;
+}
+
+.card {
+    background: var(--vscode-editor-background, white);
+    border: 1px solid var(--vscode-panel-border, #e5e7eb);
+    border-radius: 8px;
+    padding: 24px;
+    margin-bottom: 20px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.info-message {
+    background: var(--vscode-inputValidation-infoBackground, #063b49);
+    border: 1px solid var(--vscode-inputValidation-infoBorder, #007acc);
+    color: var(--vscode-inputValidation-infoForeground, #ffffff);
+    padding: 15px;
+    border-radius: 6px;
+    margin-bottom: 20px;
+}
+
+.error {
+    background: var(--vscode-inputValidation-errorBackground, #5a1d1d);
+    border: 1px solid var(--vscode-inputValidation-errorBorder, #be1100);
+    color: var(--vscode-inputValidation-errorForeground, #ffffff);
+    padding: 15px;
+    border-radius: 6px;
+    margin-bottom: 20px;
+}
+
+.loading {
+    text-align: center;
+    padding: 40px;
+    color: var(--vscode-foreground, white);
+    font-size: 1.5rem;
+}
+
+.form-group {
+    margin-bottom: 20px;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: 500;
+    font-size: 14px;
+    color: var(--vscode-foreground, #333);
+}
+
+select {
+    width: 100%;
+    padding: 10px 12px;
+    background: var(--vscode-input-background, #f3f4f6);
+    color: var(--vscode-input-foreground, #333);
+    border: 1px solid var(--vscode-input-border, #d1d5db);
+    border-radius: 4px;
+    font-size: 14px;
+    font-family: inherit;
+    cursor: pointer;
+    appearance: none;
+    background-image: url('data:image/svg+xml;utf8,<svg fill="%23666" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4 6l4 4 4-4z"/></svg>');
+    background-repeat: no-repeat;
+    background-position: right 10px center;
+    background-size: 12px;
+    padding-right: 35px;
+}
+
+select:focus {
+    outline: none;
+    border-color: var(--vscode-focusBorder, #007acc);
+}
+
+select:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.generate-section {
+    margin-top: 20px;
+}
+
+h2 {
+    margin-bottom: 20px;
+    font-size: 1.3rem;
+    color: var(--vscode-foreground, #333);
+}
+
+h3 {
+    margin-bottom: 15px;
+    font-size: 1.1rem;
+    color: var(--vscode-foreground, #333);
+}
+
+.format-selector {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 20px;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.format-btn {
+    padding: 8px 16px;
+    border: 1px solid var(--vscode-panel-border, #d1d5db);
+    background: var(--vscode-button-secondaryBackground, #f3f4f6);
+    color: var(--vscode-button-secondaryForeground, #333);
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-size: 14px;
+    font-weight: 500;
+}
+
+.format-btn:hover {
+    background: var(--vscode-button-secondaryHoverBackground, #e5e7eb);
+}
+
+.format-btn.active {
+    border-color: var(--vscode-focusBorder, #007acc);
+    background: var(--vscode-button-background, #0e639c);
+    color: var(--vscode-button-foreground, #ffffff);
+}
+
+.config-section {
+    margin-top: 20px;
+    padding-top: 20px;
+    border-top: 1px solid var(--vscode-panel-border, #e5e7eb);
+}
+
+.config-group {
+    margin-bottom: 15px;
+}
+
+.config-group label {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    cursor: pointer;
+    font-size: 14px;
+}
+
+.config-group input[type="checkbox"] {
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+}
+
+.config-group input[type="number"] {
+    width: 100px;
+    padding: 6px 10px;
+    background: var(--vscode-input-background, #f3f4f6);
+    color: var(--vscode-input-foreground, #333);
+    border: 1px solid var(--vscode-input-border, #d1d5db);
+    border-radius: 4px;
+    font-size: 14px;
+}
+
+.config-group input[type="number"]:focus {
+    outline: none;
+    border-color: var(--vscode-focusBorder, #007acc);
+}
+
+.config-label-group {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 8px;
+}
+
+.config-label-group label {
+    font-weight: 500;
+    min-width: 200px;
+}
+
+.config-help {
+    font-size: 12px;
+    opacity: 0.7;
+    margin-left: 28px;
+    margin-top: -8px;
+    margin-bottom: 8px;
+}
+
+.btn {
+    padding: 10px 20px;
+    border: none;
+    border-radius: 4px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-family: inherit;
+}
+
+.btn-primary {
+    background: var(--vscode-button-background, #667eea);
+    color: var(--vscode-button-foreground, #ffffff);
+    margin-top: 20px;
+}
+
+.btn-primary:hover {
+    background: var(--vscode-button-hoverBackground, #5568d3);
+}
+
+.btn-primary:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.btn-secondary {
+    background: var(--vscode-button-secondaryBackground, #f3f4f6);
+    color: var(--vscode-button-secondaryForeground, #333);
+    margin-right: 10px;
+}
+
+.btn-secondary:hover {
+    background: var(--vscode-button-secondaryHoverBackground, #e5e7eb);
+}
+
+.diagram-controls {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 20px;
+    flex-wrap: wrap;
+}
+
+.diagram-container {
+    margin-top: 20px;
+    border: 1px solid var(--vscode-panel-border, #e5e7eb);
+    border-radius: 8px;
+    padding: 20px;
+    background: var(--vscode-editor-background, #f9fafb);
+    overflow: auto;
+    max-height: 600px;
+}
+
+.diagram-text {
+    background: var(--vscode-textCodeBlock-background, #1e1e1e);
+    color: var(--vscode-textCodeBlock-foreground, #d4d4d4);
+    padding: 20px;
+    border-radius: 6px;
+    overflow-x: auto;
+    font-family: var(--vscode-editor-font-family, 'Courier New', monospace);
+    font-size: 13px;
+    border: 1px solid var(--vscode-panel-border, #3c3c3c);
+}
+
+.mermaid-container {
+    text-align: center;
+    background: var(--vscode-editor-background, #ffffff);
+    padding: 1rem;
+    border-radius: 4px;
+    overflow-x: auto;
+}

package/webview/tsconfig.json

@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+    
+    /* Path mapping */
+    "baseUrl": "..",
+    "paths": {
+      "*": ["*", "src/*"]
+    }
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "../src/**/*.ts"
+  ],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/webview/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/webview/vite.config.ts

@@ -0,0 +1,17 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    outDir: '../dist/webview',
+    rollupOptions: {
+      output: {
+        entryFileNames: '[name].js',
+        chunkFileNames: '[name].js',
+        assetFileNames: '[name].[ext]'
+      }
+    }
+  }
+});