Merge pull request 'rewrite' (#5) from rewrite into main

Reviewed-on: #5
2026-02-19 23:48:41 +03:00
parent 271b530fa1 52232f6cde
commit bc796f2aa4
26 changed files with 3040 additions and 794 deletions
--- a/e2e/environment.spec.ts
+++ b/e2e/environment.spec.ts
@@ -4,29 +4,32 @@ import * as fs from 'fs';
 test.describe('Environment Management', () => {
  test('should not allow removing DEFAULT environment', async ({ page }) => {
    await page.goto('/');
-    await page.click('button:has-text("Create new")');
-    const removeButton = page.locator('button.btn-danger[title="Remove environment"]');
+    await page.click('button:has-text("New Config")');
+    await page.waitForTimeout(500);
+    const removeButton = page.locator('button[title="Remove environment"]');
    await expect(removeButton).toBeDisabled();
  });

  test('should remove non-DEFAULT environment', async ({ page }) => {
    await page.goto('/');
-    await page.click('button:has-text("Create new")');
+    await page.click('button:has-text("New Config")');
+    await page.waitForTimeout(500);
    page.once('dialog', async dialog => { await dialog.accept('toRemove'); });
-    await page.click('button.btn-success[title="Add environment"]');
+    await page.click('button[title="Add environment"]');
    await page.waitForTimeout(500);
    await expect(page.locator('#environments option')).toHaveCount(2);
    page.once('dialog', async dialog => { await dialog.accept(); });
-    await page.click('button.btn-danger[title="Remove environment"]');
+    await page.click('button[title="Remove environment"]');
    await page.waitForTimeout(300);
    await expect(page.locator('#environments option')).toHaveCount(1);
  });

  test('should create new environment and switch without errors', async ({ page }) => {
    await page.goto('/');
-    await page.click('button:has-text("Create new")');
+    await page.click('button:has-text("New Config")');
+    await page.waitForTimeout(500);
    page.once('dialog', async dialog => { await dialog.accept('env1'); });
-    await page.click('button.btn-success[title="Add environment"]');
+    await page.click('button[title="Add environment"]');
    await page.waitForTimeout(500);
    await expect(page.locator('#environments option')).toHaveCount(2);
    await page.locator('#environments').selectOption({ index: 0 });
@@ -38,12 +41,13 @@ test.describe('Environment Management', () => {

  test('should create multiple environments and switch between them', async ({ page }) => {
    await page.goto('/');
-    await page.click('button:has-text("Create new")');
+    await page.click('button:has-text("New Config")');
+    await page.waitForTimeout(500);
    page.once('dialog', async dialog => { await dialog.accept('env1'); });
-    await page.click('button.btn-success[title="Add environment"]');
+    await page.click('button[title="Add environment"]');
    await page.waitForTimeout(500);
    page.once('dialog', async dialog => { await dialog.accept('env2'); });
-    await page.click('button.btn-success[title="Add environment"]');
+    await page.click('button[title="Add environment"]');
    await page.waitForTimeout(500);
    await expect(page.locator('#environments option')).toHaveCount(3);
    await page.locator('#environments').selectOption({ index: 0 });
@@ -57,10 +61,11 @@ test.describe('Environment Management', () => {

  test('should add params and edit template manually', async ({ page }) => {
    await page.goto('/');
-    await page.click('button:has-text("Create new")');
-    const nameInput = page.locator('input[placeholder="name"]').first();
-    const valueInput = page.locator('input[placeholder="value"]').first();
-    const addButton = page.locator('button.btn-success').first();
+    await page.click('button:has-text("New Config")');
+    await page.waitForTimeout(500);
+    const nameInput = page.locator('input[placeholder="Parameter name"]').first();
+    const valueInput = page.locator('input[placeholder="Parameter value"]').first();
+    const addButton = page.locator('button[title="Add parameter"]').first();
    await nameInput.fill('host');
    await valueInput.fill('localhost:8080');
    await addButton.click();
@@ -69,48 +74,49 @@ test.describe('Environment Management', () => {
    await valueInput.fill('9090');
    await addButton.click();
    await page.waitForTimeout(500);
-    await page.click('a:has-text("Content Template")');
+    await page.click('button:has-text("Content Template")');
    await page.waitForTimeout(500);
-    await expect(page.locator('button:has-text("Edit")')).toBeVisible();
-    await page.click('button:has-text("Edit")');
+    await expect(page.locator('button:has-text("Edit Template")')).toBeVisible();
+    await page.click('button:has-text("Edit Template")');
    await page.waitForTimeout(500);
    const textarea = page.locator('textarea');
    await expect(textarea).toBeVisible();
    await textarea.fill('{\n    "!!! host": "@host@",\n    "!!! port": "@port@",\n    "!!! custom": "@custom@"\n}');
    await page.waitForTimeout(300);
-    await page.click('button:has-text("Save")');
+    await page.click('button:has-text("Save Changes")');
    await page.waitForTimeout(500);
-    await expect(page.locator('button:has-text("Edit")')).toBeVisible();
+    await expect(page.locator('button:has-text("Edit Template")')).toBeVisible();
    const pageContent = await page.content();
    expect(pageContent).toContain('!!! custom');
  });

  test('should not duplicate params when placeholder already exists', async ({ page }) => {
    await page.goto('/');
-    await page.click('button:has-text("Create new")');
-    const nameInput = page.locator('input[placeholder="name"]').first();
-    const valueInput = page.locator('input[placeholder="value"]').first();
-    const addButton = page.locator('button.btn-success').first();
+    await page.click('button:has-text("New Config")');
+    await page.waitForTimeout(500);
+    const nameInput = page.locator('input[placeholder="Parameter name"]').first();
+    const valueInput = page.locator('input[placeholder="Parameter value"]').first();
+    const addButton = page.locator('button[title="Add parameter"]').first();
    await nameInput.fill('host');
    await valueInput.fill('localhost:8080');
    await addButton.click();
    await page.waitForTimeout(500);
-    await page.click('a:has-text("Content Template")');
+    await page.click('button:has-text("Content Template")');
    await page.waitForTimeout(500);
-    await page.click('button:has-text("Edit")');
+    await page.click('button:has-text("Edit Template")');
    await page.waitForTimeout(300);
    const textarea = page.locator('textarea');
    await textarea.fill('{\n    "!!! host": "@host@",\n    "apiUrl": "http://@host@/api"\n}');
    await page.waitForTimeout(300);
-    await page.click('button:has-text("Save")');
+    await page.click('button:has-text("Save Changes")');
    await page.waitForTimeout(500);
-    await page.click('a:has-text("Env")');
+    await page.click('button:has-text("Env")');
    await page.waitForTimeout(300);
    await nameInput.fill('host');
    await valueInput.fill('updated-host:9090');
    await addButton.click();
    await page.waitForTimeout(500);
-    await page.click('a:has-text("Content Template")');
+    await page.click('button:has-text("Content Template")');
    await page.waitForTimeout(500);
    const templateContent = await page.locator('.config-template-editor').textContent();
    const hostKeyCount = (templateContent.match(/!!! host/g) || []).length;
@@ -121,49 +127,49 @@ test.describe('Environment Management', () => {

  test('should validate template with unquoted placeholders', async ({ page }) => {
    await page.goto('/');
-    await page.click('button:has-text("Create new")');
+    await page.click('button:has-text("New Config")');
    await page.waitForTimeout(500);
-    
-    // Add a parameter
-    await page.click('button:has-text("✚")');
+
+    // Add a parameter - use first() to get the new parameter inputs
+    await page.click('button[title="Add parameter"]');
    await page.waitForTimeout(300);
-    const nameInput = page.locator('input[placeholder="name"]');
-    const valueInput = page.locator('input[placeholder="value"]');
-    const addButton = page.locator('button:has-text("✓")');
+    const nameInput = page.locator('input[placeholder="Parameter name"]').last();
+    const valueInput = page.locator('input[placeholder="Parameter value"]').last();
+    const addButton = page.locator('button[title="Add parameter"]').last();
    await nameInput.fill('port');
    await valueInput.fill('8080');
    await addButton.click();
    await page.waitForTimeout(500);
-    
+
    // Go to Content Template and edit with unquoted placeholder
-    await page.click('a:has-text("Content Template")');
+    await page.click('button:has-text("Content Template")');
    await page.waitForTimeout(300);
-    await page.click('button:has-text("Edit")');
+    await page.click('button:has-text("Edit Template")');
    await page.waitForTimeout(300);
-    
+
    // Fill template with unquoted @port@ placeholder
    const textarea = page.locator('textarea');
    await textarea.fill('{\n    "Host": "@host@",\n    "Port": @port@,\n    "Url": "http://@host@:@port@/api"\n}');
    await page.waitForTimeout(300);
-    
+
    // Check that Save button is enabled (validation passed)
-    const saveButton = page.locator('button:has-text("Save")');
+    const saveButton = page.locator('button:has-text("Save Changes")');
    await expect(saveButton).toBeEnabled();
-    
+
    // Check that there's no JSON error
-    const errorAlert = page.locator('.alert-danger');
+    const errorAlert = page.locator('.bg-red-50');
    await expect(errorAlert).not.toBeVisible();
-    
+
    // Save the template
    await saveButton.click();
    await page.waitForTimeout(500);
-    
+
    // Verify it was saved - should be in view mode with Edit button visible
-    const editButton = page.locator('button:has-text("Edit")');
+    const editButton = page.locator('button:has-text("Edit Template")');
    await expect(editButton).toBeVisible();
-    
+
    // Verify the template content is displayed correctly
-    const codeContent = page.locator('code');
+    const codeContent = page.locator('.hljs');
    await expect(codeContent).toBeVisible();
    const content = await codeContent.textContent();
    expect(content).toContain('@port@');
@@ -171,7 +177,7 @@ test.describe('Environment Management', () => {

  test('should download config file with correct filename', async ({ page }) => {
    await page.goto('/');
-    await page.click('button:has-text("Create new")');
+    await page.click('button:has-text("New Config")');
    await page.waitForTimeout(500);
    const [download] = await Promise.all([
      page.waitForEvent('download'),
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
  },
  "dependencies": {
    "bootstrap": "^5.3.3",
+    "lucide-react": "^0.575.0",
    "react": "^19.2.0",
    "react-dom": "^19.2.0",
    "react-highlight": "^0.15.0"
@@ -24,11 +25,14 @@
    "@types/react-dom": "^18.3.5",
    "@types/react-highlight": "^0.12.8",
    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.24",
    "eslint": "^9.17.0",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.16",
    "globals": "^16.5.0",
    "jsdom": "^27.4.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.19",
    "typescript": "~5.9.3",
    "typescript-eslint": "^8.46.4",
    "vite": "^7.2.4",
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/src/App.css
+++ b/src/App.css
@@ -0,0 +1,75 @@
+/* App-specific styles - most styling is done with Tailwind */
+
+/* Smooth scrolling */
+html {
+  scroll-behavior: smooth;
+}
+
+/* Custom scrollbar for webkit browsers */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f5f9;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}
+
+/* Highlight.js override for better dark mode support */
+.hljs {
+  background: #fafafa !important;
+  padding: 1rem !important;
+  border-radius: 0.5rem;
+}
+
+/* Animation utilities */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateY(-10px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+.animate-slide-in {
+  animation: slideIn 0.3s ease-out;
+}
+
+/* Focus visible for better accessibility */
+:focus-visible {
+  outline: 2px solid #3b82f6;
+  outline-offset: 2px;
+}
+
+/* Transition utilities */
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+}
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,17 +1,15 @@
-import { useState } from 'react'
-import './App.css'
-import 'bootstrap/dist/css/bootstrap.css'
-import { Env } from './models/Env'
-import Environment from "./componets/env"
-import Content from './componets/content'
-import { FileChooser } from './componets/FileChooser'
-import { Config } from "./models/Config"
-import logo from './assets/cgg.png'
+import { useState } from 'react';
+import { File } from 'lucide-react';
+import { Env } from './models/Env';
+import { Environment } from './componets/env/Environment';
+import { Content } from './componets/content/Content';
+import { FileChooser } from './componets/FileChooser';
+import { Config } from './models/Config';

 class AppState {
  private constructor(
    public config: Config = new Config(),
-  ) { }
+  ) {}

  static readonly Instance = new AppState();

@@ -23,7 +21,7 @@ class AppState {
    // Simulate async save with 1 second delay
    return await new Promise<number>((resolve) => {
      setTimeout(() => {
-        console.log("Saved env:", env.name);
+        console.log('Saved env:', env.name);
        resolve(0);
      }, 1000);
    });
@@ -41,9 +39,9 @@ function App() {

  async function handleEnvChanged(env: Env) {
    // Optimistic update - update React state immediately
-    setEnvs(prevEnvs => {
+    setEnvs((prevEnvs) => {
      const newEnvs = [...prevEnvs];
-      const idx = newEnvs.findIndex(x => x.id === env.id);
+      const idx = newEnvs.findIndex((x) => x.id === env.id);
      if (idx > -1) {
        newEnvs[idx] = env;
      }
@@ -51,10 +49,9 @@ function App() {
    });

    // Also update config.envs and template to keep them in sync
-    setConfig(prevConfig => {
+    setConfig((prevConfig) => {
      const newConfig = new Config();
-      newConfig.envs = prevConfig.envs.map(e => e.id === env.id ? env : e);
-      // Update template JSON with params from this environment
+      newConfig.envs = prevConfig.envs.map((e) => (e.id === env.id ? env : e));
      newConfig.template = prevConfig.template;
      newConfig.updateTemplateFromEnv(env);
      return newConfig;
@@ -70,8 +67,8 @@ function App() {

  function handleEnvAdded(env: Env): number {
    const newIdx = envs.length;
-    setEnvs(prevEnvs => [...prevEnvs, env]);
-    setConfig(prevConfig => {
+    setEnvs((prevEnvs) => [...prevEnvs, env]);
+    setConfig((prevConfig) => {
      const newConfig = new Config();
      newConfig.envs = [...prevConfig.envs, env];
      newConfig.template = prevConfig.template;
@@ -81,63 +78,80 @@ function App() {
  }

  function handleEnvRemoved(envId: number) {
-    setEnvs(prevEnvs => prevEnvs.filter(e => e.id !== envId));
-    setConfig(prevConfig => {
+    setEnvs((prevEnvs) => prevEnvs.filter((e) => e.id !== envId));
+    setConfig((prevConfig) => {
      const newConfig = new Config();
-      newConfig.envs = prevConfig.envs.filter(e => e.id !== envId);
+      newConfig.envs = prevConfig.envs.filter((e) => e.id !== envId);
      newConfig.template = prevConfig.template;
      return newConfig;
    });
  }

  function handleTemplateSaved(newContent: string) {
-    setConfig(prevConfig => {
+    setConfig((prevConfig) => {
      const newConfig = new Config();
      newConfig.envs = prevConfig.envs;
-      newConfig.addTemplate(newContent);
+      newConfig.setTemplate(newContent);
      return newConfig;
    });
  }

  return (
-    <>
-      <main className="container-fluid m-2">
-        <div className="row mb-2">
-          <FileChooser onSelected={x => {
-            AppState.Instance.loadConfig(x);
-            setEnvs(x.envs);
-            setConfig(x);
-          }} config={config} />
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100">
+      <main className="container mx-auto px-4 py-6 max-w-7xl">
+        {/* Header */}
+        <div className="mb-6">
+          <FileChooser
+            onSelected={(x) => {
+              AppState.Instance.loadConfig(x);
+              setEnvs(x.envs);
+              setConfig(x);
+            }}
+            config={config}
+          />
        </div>
-        {envs.length > 0 ?
-          (<div className="row">
-            <section id="env" className='col-4 me-1'>
-              <Environment
-                envs={envs}
-                onChanged={async (e) => await handleEnvChanged(e)}
-                onSelected={handleEnvSelected}
-                onAdd={handleEnvAdded}
-                onRemove={handleEnvRemoved} />
-            </section>
-            <section id="content" className="col-8 col-xl-7 border-start ms-1">
-              <Content env={currentEnv} config={config} onTemplateSaved={handleTemplateSaved} />
-            </section>
-          </div>)
-          :
-          (
-            <div className="row justify-content-center pt-5" >
-              <div className="col-1 pt-5">
-                <img src={logo} alt="" style={{ opacity: 0.2, transform: 'scale(1.8)' }} />
-              </div>
-            </div>

-          )}
+        {envs.length > 0 ? (
+          <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
+            {/* Environment Panel */}
+            <section className="lg:col-span-5 xl:col-span-4">
+              <div className="sticky top-6">
+                <Environment
+                  envs={envs}
+                  onChanged={async (e) => await handleEnvChanged(e)}
+                  onSelected={handleEnvSelected}
+                  onAdd={handleEnvAdded}
+                  onRemove={handleEnvRemoved}
+                />
+              </div>
+            </section>
+
+            {/* Content Panel */}
+            <section className="lg:col-span-7 xl:col-span-8">
+              <Content
+                env={currentEnv}
+                config={config}
+                onTemplateSaved={handleTemplateSaved}
+              />
+            </section>
+          </div>
+        ) : (
+          /* Empty State */
+          <div className="flex flex-col items-center justify-center py-20">
+            <div className="w-24 h-24 bg-gradient-to-br from-blue-400 to-blue-600 rounded-2xl flex items-center justify-center mb-6 shadow-lg">
+              <File className="w-12 h-12 text-white opacity-80" />
+            </div>
+            <h2 className="text-2xl font-bold text-slate-700 mb-2">
+              No Configuration Loaded
+            </h2>
+            <p className="text-slate-500 text-center max-w-md">
+              Create a new configuration or upload an existing XML file to get started
+            </p>
+          </div>
+        )}
      </main>
-    </>
-  )
+    </div>
+  );
 }

-export default App
-
-
-
+export default App;
--- a/src/components/ui/Badge.tsx
+++ b/src/components/ui/Badge.tsx
@@ -0,0 +1,42 @@
+import { HTMLAttributes, forwardRef } from 'react';
+
+export type BadgeVariant = 'default' | 'success' | 'warning' | 'danger' | 'info';
+
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  variant?: BadgeVariant;
+  size?: 'sm' | 'md';
+}
+
+const variantStyles: Record<BadgeVariant, string> = {
+  default: 'bg-slate-100 text-slate-700',
+  success: 'bg-green-100 text-green-800',
+  warning: 'bg-yellow-100 text-yellow-800',
+  danger: 'bg-red-100 text-red-800',
+  info: 'bg-blue-100 text-blue-800',
+};
+
+const sizeStyles: Record<'sm' | 'md', string> = {
+  sm: 'px-1.5 py-0.5 text-xs',
+  md: 'px-2 py-1 text-sm',
+};
+
+export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
+  ({ className = '', variant = 'default', size = 'sm', children, ...props }, ref) => {
+    return (
+      <span
+        ref={ref}
+        className={`
+          inline-flex items-center font-medium rounded-full
+          ${variantStyles[variant]}
+          ${sizeStyles[size]}
+          ${className}
+        `}
+        {...props}
+      >
+        {children}
+      </span>
+    );
+  }
+);
+
+Badge.displayName = 'Badge';
--- a/src/components/ui/Button.tsx
+++ b/src/components/ui/Button.tsx
@@ -0,0 +1,71 @@
+import { LucideIcon } from 'lucide-react';
+import { ButtonHTMLAttributes, forwardRef } from 'react';
+
+export type ButtonVariant = 'primary' | 'success' | 'danger' | 'secondary' | 'ghost';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  icon?: LucideIcon;
+  iconPosition?: 'left' | 'right';
+  isLoading?: boolean;
+}
+
+const variantStyles: Record<ButtonVariant, string> = {
+  primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 shadow-md hover:shadow-lg',
+  success: 'bg-green-600 text-white hover:bg-green-700 focus:ring-green-500 shadow-md hover:shadow-lg',
+  danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500 shadow-md hover:shadow-lg',
+  secondary: 'bg-slate-200 text-slate-700 hover:bg-slate-300 focus:ring-slate-400',
+  ghost: 'bg-transparent text-slate-600 hover:bg-slate-100 focus:ring-slate-400',
+};
+
+const sizeStyles: Record<ButtonSize, string> = {
+  sm: 'px-3 py-1.5 text-sm',
+  md: 'px-4 py-2 text-base',
+  lg: 'px-6 py-3 text-lg',
+};
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className = '',
+      variant = 'primary',
+      size = 'md',
+      icon: Icon,
+      iconPosition = 'left',
+      isLoading = false,
+      disabled,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const baseStyles = `
+      inline-flex items-center justify-center gap-2
+      font-medium rounded-lg
+      transition-all duration-200
+      focus:outline-none focus:ring-2 focus:ring-offset-2
+      disabled:opacity-50 disabled:cursor-not-allowed
+      ${variantStyles[variant]}
+      ${sizeStyles[size]}
+      ${className}
+    `;
+
+    return (
+      <button ref={ref} className={baseStyles} disabled={disabled || isLoading} {...props}>
+        {isLoading ? (
+          <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+          </svg>
+        ) : Icon ? (
+          <Icon className="w-4 h-4" />
+        ) : null}
+        {children}
+      </button>
+    );
+  }
+);
+
+Button.displayName = 'Button';
--- a/src/components/ui/Card.tsx
+++ b/src/components/ui/Card.tsx
@@ -0,0 +1,85 @@
+import { HTMLAttributes, forwardRef } from 'react';
+
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: 'default' | 'bordered' | 'elevated';
+  padding?: 'none' | 'sm' | 'md' | 'lg';
+}
+
+const variantStyles: Record<string, string> = {
+  default: 'bg-white',
+  bordered: 'bg-white border-2 border-slate-200',
+  elevated: 'bg-white shadow-lg',
+};
+
+const paddingStyles: Record<string, string> = {
+  none: '',
+  sm: 'p-3',
+  md: 'p-4',
+  lg: 'p-6',
+};
+
+export const Card = forwardRef<HTMLDivElement, CardProps>(
+  ({ className = '', variant = 'default', padding = 'md', children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={`rounded-xl overflow-hidden transition-all duration-300 ${variantStyles[variant]} ${paddingStyles[padding]} ${className}`}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+Card.displayName = 'Card';
+
+interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(
+  ({ className = '', children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={`px-4 py-3 border-b border-slate-200 bg-slate-50 ${className}`}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+CardHeader.displayName = 'CardHeader';
+
+interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const CardBody = forwardRef<HTMLDivElement, CardBodyProps>(
+  ({ className = '', children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={`p-4 ${className}`} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+
+CardBody.displayName = 'CardBody';
+
+interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(
+  ({ className = '', children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={`px-4 py-3 border-t border-slate-200 bg-slate-50 ${className}`}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+CardFooter.displayName = 'CardFooter';
--- a/src/components/ui/CodeBlock.tsx
+++ b/src/components/ui/CodeBlock.tsx
@@ -0,0 +1,49 @@
+import { useState } from 'react';
+import Highlight from 'react-highlight';
+import 'highlight.js/styles/atom-one-light.css';
+
+interface CodeBlockProps {
+  code: string;
+  language?: 'json' | 'xml' | 'javascript' | 'typescript' | 'css' | 'html' | 'plaintext';
+  showLineNumbers?: boolean;
+  maxHeight?: string;
+  className?: string;
+}
+
+export function CodeBlock({
+  code,
+  language = 'plaintext',
+  showLineNumbers = false,
+  maxHeight = 'none',
+  className = '',
+}: CodeBlockProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className={`relative group ${className}`}>
+      <div className="absolute right-2 top-2 opacity-0 group-hover:opacity-100 transition-opacity">
+        <button
+          onClick={handleCopy}
+          className="px-2 py-1 text-xs bg-slate-800 text-white rounded hover:bg-slate-700 transition-colors"
+        >
+          {copied ? 'Copied!' : 'Copy'}
+        </button>
+      </div>
+      
+      <div
+        className="rounded-lg overflow-hidden border border-slate-200"
+        style={{ maxHeight, overflow: maxHeight !== 'none' ? 'auto' : 'visible' }}
+      >
+        <Highlight className={`language-${language} text-sm ${showLineNumbers ? 'line-numbers' : ''}`}>
+          {code || '// Empty'}
+        </Highlight>
+      </div>
+    </div>
+  );
+}
--- a/src/components/ui/Input.tsx
+++ b/src/components/ui/Input.tsx
@@ -0,0 +1,68 @@
+import { InputHTMLAttributes, forwardRef, useState } from 'react';
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+  hint?: string;
+  icon?: React.ReactNode;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ label, error, hint, icon, className = '', id, ...props }, ref) => {
+    const [isFocused, setIsFocused] = useState(false);
+
+    const inputId = id || label?.toLowerCase().replace(/\s+/g, '-');
+
+    const baseStyles = `
+      w-full px-3 py-2
+      border rounded-lg
+      transition-all duration-200
+      focus:outline-none focus:ring-2 focus:border-transparent
+      disabled:bg-slate-100 disabled:cursor-not-allowed
+      ${error 
+        ? 'border-red-300 focus:ring-red-500 focus:border-red-500' 
+        : 'border-slate-300 focus:ring-blue-500 focus:border-blue-500'
+      }
+      ${isFocused ? 'ring-2 ring-blue-500 border-transparent bg-blue-50' : 'bg-white'}
+      ${icon ? 'pl-10' : ''}
+      ${className}
+    `;
+
+    return (
+      <div className="w-full">
+        {label && (
+          <label htmlFor={inputId} className="block text-sm font-medium text-slate-700 mb-1">
+            {label}
+          </label>
+        )}
+        
+        <div className="relative">
+          {icon && (
+            <div className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">
+              {icon}
+            </div>
+          )}
+          
+          <input
+            ref={ref}
+            id={inputId}
+            className={baseStyles}
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+            {...props}
+          />
+        </div>
+
+        {error && (
+          <p className="mt-1 text-sm text-red-600">{error}</p>
+        )}
+
+        {hint && !error && (
+          <p className="mt-1 text-sm text-slate-500">{hint}</p>
+        )}
+      </div>
+    );
+  }
+);
+
+Input.displayName = 'Input';
--- a/src/components/ui/Select.tsx
+++ b/src/components/ui/Select.tsx
@@ -0,0 +1,55 @@
+import { SelectHTMLAttributes, forwardRef } from 'react';
+
+interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+  label?: string;
+  error?: string;
+  options: { value: string | number; label: string; disabled?: boolean }[];
+}
+
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(
+  ({ label, error, options, className = '', id, ...props }, ref) => {
+    const selectId = id || label?.toLowerCase().replace(/\s+/g, '-');
+
+    const baseStyles = `
+      w-full px-3 py-2
+      border rounded-lg
+      bg-white cursor-pointer
+      transition-all duration-200
+      focus:outline-none focus:ring-2 focus:border-transparent
+      disabled:bg-slate-100 disabled:cursor-not-allowed
+      ${error 
+        ? 'border-red-300 focus:ring-red-500' 
+        : 'border-slate-300 focus:ring-blue-500'
+      }
+      ${className}
+    `;
+
+    return (
+      <div className="w-full">
+        {label && (
+          <label htmlFor={selectId} className="block text-sm font-medium text-slate-700 mb-1">
+            {label}
+          </label>
+        )}
+        
+        <select ref={ref} id={selectId} className={baseStyles} {...props}>
+          {options.map((option) => (
+            <option
+              key={option.value}
+              value={option.value}
+              disabled={option.disabled}
+            >
+              {option.label}
+            </option>
+          ))}
+        </select>
+
+        {error && (
+          <p className="mt-1 text-sm text-red-600">{error}</p>
+        )}
+      </div>
+    );
+  }
+);
+
+Select.displayName = 'Select';
--- a/src/components/ui/Tabs.tsx
+++ b/src/components/ui/Tabs.tsx
@@ -0,0 +1,75 @@
+import { HTMLAttributes } from 'react';
+
+export interface Tab {
+  id: string;
+  label: string;
+  badge?: string | number;
+  badgeVariant?: 'default' | 'success' | 'warning' | 'danger';
+}
+
+export interface TabsProps {
+  tabs: Tab[];
+  activeTab: string;
+  onChange: (tabId: string) => void;
+  className?: string;
+}
+
+export function Tabs({ tabs, activeTab, onChange, className = '', ...props }: TabsProps) {
+  return (
+    <div className={`border-b border-slate-200 ${className}`} {...props}>
+      <nav className="-mb-px flex gap-2" aria-label="Tabs">
+        {tabs.map((tab) => {
+          const isActive = tab.id === activeTab;
+          
+          return (
+            <button
+              key={tab.id}
+              onClick={() => onChange(tab.id)}
+              className={`
+                flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-t-lg
+                border-b-2 transition-all duration-200
+                ${isActive
+                  ? 'border-blue-500 text-blue-600 bg-white'
+                  : 'border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300 hover:bg-slate-50'
+                }
+              `}
+              aria-current={isActive ? 'page' : undefined}
+            >
+              {tab.label}
+              {tab.badge !== undefined && (
+                <span
+                  className={`
+                    inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium
+                    ${tab.badgeVariant === 'danger' || tab.badgeVariant === 'warning'
+                      ? 'bg-red-100 text-red-800'
+                      : 'bg-slate-100 text-slate-600'
+                    }
+                  `}
+                >
+                  {tab.badge}
+                </span>
+              )}
+            </button>
+          );
+        })}
+      </nav>
+    </div>
+  );
+}
+
+interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {
+  isActive: boolean;
+}
+
+export function TabPanel({ isActive, children, className = '', ...props }: TabPanelProps) {
+  if (!isActive) return null;
+
+  return (
+    <div
+      className={`animate-fade-in ${className}`}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
--- a/src/components/ui/index.ts
+++ b/src/components/ui/index.ts
@@ -0,0 +1,16 @@
+export { Button } from './Button';
+export type { ButtonVariant, ButtonSize } from './Button';
+
+export { Input } from './Input';
+
+export { Card, CardHeader, CardBody, CardFooter } from './Card';
+
+export { Select } from './Select';
+
+export { Badge } from './Badge';
+export type { BadgeVariant } from './Badge';
+
+export { Tabs, TabPanel } from './Tabs';
+export type { Tab } from './Tabs';
+
+export { CodeBlock } from './CodeBlock';
--- a/src/componets/FileChooser.tsx
+++ b/src/componets/FileChooser.tsx
@@ -1,41 +1,57 @@
-import { Env } from "../models/Env";
-import { ConfigReader } from "../models/ConfigReader";
-import { Config } from "../models/Config";
-import { ConfigBuilder } from "../builders/ConfigBuilder";
+import { useRef } from 'react';
+import { Upload, Download, FilePlus, File } from 'lucide-react';
+import { Button } from '../components/ui';
+import { Config } from '../models/Config';
+import { ConfigReader } from '../models/ConfigReader';
+import { ConfigBuilder } from '../builders/ConfigBuilder';
+import { Env } from '../models/Env';

-export function FileChooser(props: { onSelected: (x: Config) => void, config?: Config }) {
-  async function handleFile(x: React.ChangeEvent<HTMLInputElement>) {
-    let file = x.target.files![0];
+interface FileChooserProps {
+  onSelected: (config: Config) => void;
+  config?: Config;
+}

-    console.log(file.name, file.type, file.size, "supported:", ConfigReader.isSupportedFormat(file));
-    let reader = new ConfigReader();
-    let cfg = await reader.parseFromFile(file);
+export function FileChooser({ onSelected, config }: FileChooserProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  async function handleFileChange(event: React.ChangeEvent<HTMLInputElement>) {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    console.log(file.name, file.type, file.size, 'supported:', ConfigReader.isSupportedFormat(file));
+    
+    const reader = new ConfigReader();
+    const cfg = await reader.parseFromFile(file);

    if (cfg !== null) {
-      props.onSelected(cfg);
+      onSelected(cfg);
+    }
+    
+    // Reset input
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
    }
  }

-  function handleNew(){
-    let cfg = new Config();
-    cfg.addEnvs([new Env(0, "DEFAULT", [])]);
-    cfg.addTemplate("{}");
-    props.onSelected(cfg);
+  function handleNew() {
+    const cfg = new Config();
+    cfg.setEnvs([new Env(0, 'DEFAULT', [])]);
+    cfg.setTemplate('{}');
+    onSelected(cfg);
  }

  function handleDownload() {
-    if (!props.config) {
-      alert("No configuration loaded");
+    if (!config) {
+      alert('No configuration loaded');
      return;
    }

-    const xmlContent = ConfigBuilder.buildFullXml(props.config);
+    const xmlContent = ConfigBuilder.buildFullXml(config);
    const filename = ConfigBuilder.generateFilename();
-    
-    // Create blob and download
-    const blob = new Blob([xmlContent], { type: "text/xml" });
+
+    const blob = new Blob([xmlContent], { type: 'text/xml' });
    const url = URL.createObjectURL(blob);
-    const link = document.createElement("a");
+    const link = document.createElement('a');
    link.href = url;
    link.download = filename;
    document.body.appendChild(link);
@@ -45,25 +61,60 @@ export function FileChooser(props: { onSelected: (x: Config) => void, config?: C
  }

  return (
-    <>
-      <div className="col-2">
-        <button className="btn btn-primary" onClick={handleNew} >Create new</button>
-      </div>
-      <div className="col-auto">
-        <button 
-          className="btn btn-success" 
-          onClick={handleDownload}
-          disabled={!props.config}
-          title="Download full config template"
-        >
-          ⬇ Download
-        </button>
-      </div>
-      <div className="col-1">or</div>
+    <div className="bg-white rounded-xl shadow-md p-4 border border-slate-200">
+      <div className="flex items-center gap-4 flex-wrap">
+        {/* Logo/Brand */}
+        <div className="flex items-center gap-2">
+          <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center">
+            <File className="w-6 h-6 text-white" />
+          </div>
+          <span className="font-bold text-xl text-slate-800">Configucci</span>
+        </div>

-      <div className="col">
-        <input className="form-control" type="file" id="formFile" onChange={handleFile} />
-      </div >
-    </>
+        <div className="h-8 w-px bg-slate-200" />
+
+        {/* Action Buttons */}
+        <div className="flex items-center gap-2 flex-1">
+          <Button
+            variant="primary"
+            onClick={handleNew}
+            icon={FilePlus}
+            size="sm"
+          >
+            New Config
+          </Button>
+
+          <Button
+            variant="success"
+            onClick={handleDownload}
+            icon={Download}
+            size="sm"
+            disabled={!config}
+            title="Download full config template"
+          >
+            Download
+          </Button>
+
+          <span className="text-slate-400 text-sm">or</span>
+
+          {/* File Upload */}
+          <div className="flex-1">
+            <label
+              className="flex items-center justify-center gap-2 px-4 py-2 border-2 border-dashed border-slate-300 rounded-lg cursor-pointer hover:border-blue-400 hover:bg-blue-50 transition-all duration-200"
+            >
+              <Upload className="w-4 h-4 text-slate-400" />
+              <span className="text-sm text-slate-600">Upload XML Config</span>
+              <input
+                ref={fileInputRef}
+                type="file"
+                className="hidden"
+                accept=".xml,text/xml"
+                onChange={handleFileChange}
+              />
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
  );
 }
--- a/src/componets/content/ConfigTemplate.tsx
+++ b/src/componets/content/ConfigTemplate.tsx
@@ -1,29 +1,29 @@
-import { useState, useEffect } from "react";
-import Highlight from 'react-highlight';
-import 'highlight.js/styles/far.css';
-import { Config } from "../../models/Config";
+import { useState, useEffect } from 'react';
+import { Pencil, Save, XCircle, CheckCircle } from 'lucide-react';
+import { Button, CodeBlock, Badge } from '../../components/ui';
+import { Config } from '../../models/Config';

-interface ConfigTemplateProps {
+interface ConfigTemplateEditorProps {
  config: Config;
  onSaved: (newContent: string) => void;
 }

-export function ConfigTemplate(props: ConfigTemplateProps) {
+export function ConfigTemplateEditor({ config, onSaved }: ConfigTemplateEditorProps) {
  const [mode, setMode] = useState<'view' | 'edit'>('view');
-  const [draftContent, setDraftContent] = useState(props.config.template.content);
-  const [originalContent, setOriginalContent] = useState(props.config.template.content);
+  const [draftContent, setDraftContent] = useState(config.template.content);
+  const [originalContent, setOriginalContent] = useState(config.template.content);
  const [jsonError, setJsonError] = useState<string | null>(null);

  // Sync draft when config changes (only in view mode)
  useEffect(() => {
    if (mode === 'view') {
-      setDraftContent(props.config.template.content);
+      setDraftContent(config.template.content);
    }
-  }, [props.config.template.content, mode]);
+  }, [config.template.content, mode]);

  function handleEdit() {
-    setOriginalContent(props.config.template.content);
-    setDraftContent(props.config.template.content);
+    setOriginalContent(config.template.content);
+    setDraftContent(config.template.content);
    setJsonError(null);
    setMode('edit');
  }
@@ -40,7 +40,7 @@ export function ConfigTemplate(props: ConfigTemplateProps) {
      const sanitizedValue = draftContent.replace(/@[^@]+@/g, '1');
      JSON.parse(sanitizedValue);
      setJsonError(null);
-      props.onSaved(draftContent);
+      onSaved(draftContent);
      setMode('view');
    } catch (e) {
      setJsonError((e as Error).message);
@@ -52,10 +52,7 @@ export function ConfigTemplate(props: ConfigTemplateProps) {
    // Validate JSON on every change
    try {
      if (value.trim()) {
-        // Replace @placeholders@ with valid JSON values for validation
-        // Strategy: Replace ALL @...@ patterns with "1" (valid for both string and numeric contexts)
        const sanitizedValue = value.replace(/@[^@]+@/g, '1');
-        
        JSON.parse(sanitizedValue);
        setJsonError(null);
      } else {
@@ -73,11 +70,11 @@ export function ConfigTemplate(props: ConfigTemplateProps) {
      const start = textarea.selectionStart;
      const end = textarea.selectionEnd;
      const value = textarea.value;
-      
+
      // Insert 2 spaces at cursor position
      const newValue = value.substring(0, start) + '  ' + value.substring(end);
      handleDraftChange(newValue);
-      
+
      // Move cursor after the inserted spaces
      setTimeout(() => {
        textarea.selectionStart = textarea.selectionEnd = start + 2;
@@ -88,57 +85,86 @@ export function ConfigTemplate(props: ConfigTemplateProps) {
  const isValidJson = jsonError === null;

  return (
-    <div className="config-template-editor">
+    <div className="config-template-editor animate-fade-in">
      {mode === 'view' ? (
-        <>
-          <div className="mb-2">
-            <button className="btn btn-primary btn-sm" onClick={handleEdit}>
-              ✎ Edit
-            </button>
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Badge variant="success">View Mode</Badge>
+            </div>
+            <Button
+              variant="primary"
+              size="sm"
+              onClick={handleEdit}
+              icon={Pencil}
+            >
+              Edit Template
+            </Button>
          </div>
-          <Highlight className="language-json">
-            {props.config.template.content || "{}"}
-          </Highlight>
-        </>
+          
+          <CodeBlock code={config.template.content || '{}'} language="json" maxHeight="500px" />
+        </div>
      ) : (
-        <>
-          <div className="mb-2 d-flex gap-2 align-items-center">
-            <button 
-              className="btn btn-success btn-sm" 
+        <div className="space-y-3">
+          <div className="flex items-center gap-2 flex-wrap">
+            <Button
+              variant="success"
+              size="sm"
              onClick={handleSave}
              disabled={!isValidJson}
+              icon={Save}
            >
-              ✓ Save
-            </button>
-            <button 
-              className="btn btn-secondary btn-sm" 
+              Save Changes
+            </Button>
+            
+            <Button
+              variant="secondary"
+              size="sm"
              onClick={handleRevert}
+              icon={XCircle}
            >
-              × Revert
-            </button>
-            <span className={`ms-2 ${isValidJson ? 'text-success' : 'text-danger'}`}>
-              {isValidJson ? 'Valid JSON' : 'Invalid JSON'}
-            </span>
+              Revert
+            </Button>
+
+            <Badge variant={isValidJson ? 'success' : 'danger'}>
+              {isValidJson ? (
+                <>
+                  <CheckCircle className="w-3 h-3 mr-1" />
+                  Valid JSON
+                </>
+              ) : (
+                <>
+                  <XCircle className="w-3 h-3 mr-1" />
+                  Invalid JSON
+                </>
+              )}
+            </Badge>
          </div>
+
          {jsonError && (
-            <div className="alert alert-danger py-1 px-2 mb-2" style={{ fontSize: '0.875rem' }}>
-              {jsonError}
+            <div className="bg-red-50 border border-red-200 rounded-lg p-3">
+              <p className="text-sm text-red-700 font-mono">{jsonError}</p>
            </div>
          )}
+
          <textarea
-            className={`form-control font-monospace ${isValidJson ? 'border-success' : 'border-danger'}`}
+            className={`
+              w-full p-3 font-mono text-sm rounded-lg border-2
+              focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
+              transition-all duration-200
+              ${isValidJson 
+                ? 'border-green-300 bg-green-50' 
+                : 'border-red-300 bg-red-50'
+              }
+            `}
            value={draftContent}
            onChange={(e) => handleDraftChange(e.target.value)}
            onKeyDown={handleKeyDown}
            rows={20}
-            style={{
-              fontFamily: 'monospace',
-              whiteSpace: 'pre',
-              overflowX: 'auto'
-            }}
+            style={{ whiteSpace: 'pre', overflowX: 'auto' }}
            spellCheck={false}
          />
-        </>
+        </div>
      )}
    </div>
  );
--- a/src/componets/content/Content.tsx
+++ b/src/componets/content/Content.tsx
@@ -1,157 +1,148 @@
-import { useState } from "react";
-import { Env } from "../../models/Env";
-import Highlight from 'react-highlight'
-import 'highlight.js/styles/far.css'
-import { Builder } from "../../builders";
-import { Config } from "../../models/Config";
-import { ConfigTemplate } from "./ConfigTemplate";
+import { useState } from 'react';
+import { Tabs, TabPanel, CodeBlock } from '../../components/ui';
+import { Env } from '../../models/Env';
+import { Config } from '../../models/Config';
+import { ConfigTemplateEditor } from './ConfigTemplate';
+import { Builder } from '../../builders';

-
-export function Content(props: { config: Config, env: Env, onTemplateSaved: (newContent: string) => void }) {
-    const [selectTab, setTab] = useState(ContentType.Env);
-
-    // Validate placeholders for warning badge
-    const missingPlaceholders = props.config.validatePlaceholders();
-    const hasValidationWarnings = missingPlaceholders.length > 0;
-
-    return (
-        <>
-            <ContentTabs onSelected={(id) => setTab(id)} selectedTab={selectTab} hasValidationWarnings={hasValidationWarnings} />
-            <div className="">
-                {selectTab == ContentType.Env ? (<ContentParams env={props.env} />) : ""}
-                {selectTab == ContentType.Json ? (<ConfigTemplate config={props.config} onSaved={props.onTemplateSaved} />) : ""}
-                {selectTab == ContentType.Raw ? (<ContentRaw config={props.config} env={props.env} />) : ""}
-                {selectTab == ContentType.Test ? (<ContentTest config={props.config} env={props.env} />) : ""}
-            </div>
-        </>
-    );
+interface ContentProps {
+  config: Config;
+  env: Env;
+  onTemplateSaved: (newContent: string) => void;
 }

-enum ContentType {
-    Env = 0,
-    Json = 1,
-    Raw = 2,
-    Test = 3
+export function Content({ config, env, onTemplateSaved }: ContentProps) {
+  const [activeTab, setActiveTab] = useState('env');
+
+  // Validate placeholders for warning badge
+  const missingPlaceholders = config.validatePlaceholders();
+  const hasValidationWarnings = missingPlaceholders.length > 0;
+
+  const tabs: Array<{ id: string; label: string; badge?: string | number; badgeVariant?: 'warning' | 'danger' }> = [
+    { id: 'env', label: 'Env' },
+    { 
+      id: 'template', 
+      label: 'Content Template',
+      badge: hasValidationWarnings ? '!' : undefined,
+      badgeVariant: hasValidationWarnings ? 'warning' : undefined,
+    },
+    { id: 'raw', label: 'Raw Template' },
+    { id: 'test', label: 'Test-filled' },
+  ];
+
+  return (
+    <div className="bg-white rounded-xl shadow-lg border border-slate-200 overflow-hidden">
+      <Tabs tabs={tabs} activeTab={activeTab} onChange={setActiveTab} />
+      
+      <div className="p-4">
+        <TabPanel isActive={activeTab === 'env'}>
+          <ContentParams env={env} />
+        </TabPanel>
+        
+        <TabPanel isActive={activeTab === 'template'}>
+          <ConfigTemplateEditor config={config} onSaved={onTemplateSaved} />
+        </TabPanel>
+        
+        <TabPanel isActive={activeTab === 'raw'}>
+          <ContentRaw config={config} env={env} />
+        </TabPanel>
+        
+        <TabPanel isActive={activeTab === 'test'}>
+          <ContentTest config={config} env={env} />
+        </TabPanel>
+      </div>
+    </div>
+  );
 }

-function ContentTabs(props: { onSelected: (id: ContentType) => void, selectedTab: ContentType, hasValidationWarnings: boolean }) {
-    function clickHandler(type: ContentType) {
-        props.onSelected(type);
-    }
-
-    function isActive(type: ContentType): string {
-        return type == props.selectedTab ? " active" : " ";
-    }
-
-    return (
-        <ul className="nav nav-pills nav-fill">
-            <li className="nav-item">
-                <a className={"nav-link" + isActive(ContentType.Env)} aria-current="page" href="#" onClick={() => clickHandler(ContentType.Env)}>Env</a>
-            </li>
-            <li className="nav-item">
-                <a className={"nav-link" + isActive(ContentType.Json)} href="#" onClick={() => clickHandler(ContentType.Json)} >
-                    Content Template
-                    {props.hasValidationWarnings && (
-                        <span className="badge bg-warning text-dark ms-1">!</span>
-                    )}
-                </a>
-            </li>
-            <li className="nav-item">
-                <a className={"nav-link" + isActive(ContentType.Raw)} href="#" onClick={() => clickHandler(ContentType.Raw)}>Raw template</a>
-            </li>
-            <li className="nav-item">
-                <a className={"nav-link" + isActive(ContentType.Test)} href="#" onClick={() => clickHandler(ContentType.Test)}>Test-filled template</a>
-            </li>
-        </ul>
-    )
+function ContentParams({ env }: { env: Env }) {
+  const xml = Builder.getEnv(env).build();
+  
+  return (
+    <div className="animate-fade-in">
+      <CodeBlock code={xml} language="xml" maxHeight="500px" />
+    </div>
+  );
 }

-function ContentRaw(props: { config: Config, env: Env }) {
-    const envsXml = Builder.getEnvs(props.config.envs);
-    const templateContent = props.config.template.content;
+function ContentRaw({ config }: { config: Config; env: Env }) {
+  const envsXml = Builder.getEnvs(config.envs);
+  const templateContent = config.template.content;

-    const xml = `<engine>
+  const xml = `<engine>
 ${envsXml}
    <template>
 ${templateContent}
    </template>
 </engine>`;

-    return (
-        <>
-            <Highlight className="language-xml">
-                {xml}
-            </Highlight>
-        </>
-    )
+  return (
+    <div className="animate-fade-in">
+      <CodeBlock code={xml} language="xml" maxHeight="500px" />
+    </div>
+  );
 }

-function ContentTest(props: { config: Config, env: Env }) {
-    const [selectedEnvId, setSelectedEnvId] = useState(props.env.id);
-    const selectedEnv = props.config.envs.find(e => e.id === selectedEnvId) ?? props.env;
+function ContentTest({ config, env }: { config: Config; env: Env }) {
+  const [selectedEnvId, setSelectedEnvId] = useState(env.id ?? 0);
+  const selectedEnv = config.envs.find(e => e.id === selectedEnvId) ?? env;

-    const filledTemplate = fillTemplate(props.config, selectedEnv);
+  const filledTemplate = fillTemplate(config, selectedEnv);

-    return (
-        <>
-            <div className="mb-2">
-                <label className="form-label">Select Environment:</label>
-                <select 
-                    className="form-select w-auto d-inline-block" 
-                    value={selectedEnvId}
-                    onChange={(e) => setSelectedEnvId(Number(e.target.value))}
-                >
-                    {props.config.envs.map(env => (
-                        <option key={env.id} value={env.id}>{env.name}</option>
-                    ))}
-                </select>
-            </div>
-            <Highlight className="language-json">
-                {filledTemplate}
-            </Highlight>
-        </>
-    )
+  const selectOptions = config.envs.map((e) => ({
+    value: e.id ?? 0,
+    label: e.name ?? 'Unknown',
+  }));
+
+  return (
+    <div className="animate-fade-in space-y-4">
+      <div className="flex items-center gap-2">
+        <label className="text-sm font-medium text-slate-700">Select Environment:</label>
+        <select
+          className="px-3 py-1.5 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+          value={selectedEnvId}
+          onChange={(e) => setSelectedEnvId(Number(e.target.value))}
+        >
+          {selectOptions.map((opt) => (
+            <option key={opt.value} value={opt.value}>{opt.label}</option>
+          ))}
+        </select>
+      </div>
+      
+      <CodeBlock code={filledTemplate} language="json" maxHeight="500px" />
+    </div>
+  );
 }

 function fillTemplate(config: Config, env: Env): string {
-    const defaultEnv = config.envs.find(e => e.name === "DEFAULT");
-    const paramMap = new Map<string, string>();
+  const defaultEnv = config.envs.find((e) => e.name === 'DEFAULT');
+  const paramMap = new Map<string, string>();

-    // First, load DEFAULT values as fallback
-    if (defaultEnv) {
-        for (const param of defaultEnv.params) {
-            if (param.name && param.value !== undefined) {
-                paramMap.set(param.name, param.value);
-            }
-        }
+  // Load DEFAULT values first
+  if (defaultEnv) {
+    for (const param of defaultEnv.params) {
+      if (param.name && param.value !== undefined) {
+        paramMap.set(param.name, param.value);
+      }
    }
+  }

-    // Then, override with selected environment values (precedence)
-    for (const param of env.params) {
-        if (param.name && param.value !== undefined) {
-            paramMap.set(param.name, param.value);
-        }
+  // Override with selected environment values
+  for (const param of env.params) {
+    if (param.name && param.value !== undefined) {
+      paramMap.set(param.name, param.value);
    }
+  }

-    let filledTemplate = config.template.content;
-    const placeholderRegex = /@(\w+)@/g;
+  let filledTemplate = config.template.content;
+  const placeholderRegex = /@(\w+)@/g;

-    filledTemplate = filledTemplate.replace(placeholderRegex, (_, paramName) => {
-        if (paramName === Config.ENV_NAME_PARAM) {
-            return env.name ?? "--NO-VALUE--";
-        }
-        return paramMap.get(paramName) ?? "--NO-VALUE--";
-    });
+  filledTemplate = filledTemplate.replace(placeholderRegex, (_, paramName) => {
+    if (paramName === Config.ENV_NAME_PARAM) {
+      return env.name ?? '--NO-VALUE--';
+    }
+    return paramMap.get(paramName) ?? '--NO-VALUE--';
+  });

-    return filledTemplate;
+  return filledTemplate;
 }
-
-function ContentParams(props: { env: Env }) {
-    const bldr = Builder.getEnv(props.env);
-
-    return (
-        <Highlight className="language-xml">
-            {bldr.build()}
-        </Highlight>
-    )
-}
--- a/src/componets/env/Environment.tsx
+++ b/src/componets/env/Environment.tsx
@@ -1,125 +1,157 @@
-import { useState, useEffect } from "react";
-import { AddEvent, AppEvent, DelEvent, Env, UpdateEvent } from "../../models/Env";
-import { EnvParam } from "../../models/EnvParam";
-import { EnvironmentParam } from "./EnvironmentParam";
+import { useState, useEffect } from 'react';
+import { Plus, Minus } from 'lucide-react';
+import { Button, Select, Card, CardBody } from '../../components/ui';
+import { Env, AddEvent, RemoveEvent, UpdateEvent } from '../../models/Env';
+import { EnvParam } from '../../models/EnvParam';
+import { EnvironmentParam } from './EnvironmentParam';

-export function Environment(props: { envs: Env[], onChanged: (env: Env) => void, onSelected: (envId: number) => void, onAdd: (env: Env) => number, onRemove: (envId: number) => void }) {
-    const [currEnvId, setCurrEnvId] = useState(props.envs[0]?.id);
-    
-    // Sync currEnvId when props.envs changes
-    useEffect(() => {
-        if (!props.envs.find(e => e.id === currEnvId)) {
-            setCurrEnvId(props.envs[0]?.id);
-        }
-    }, [props.envs, currEnvId]);
-    
-    const currEnv = props.envs.find(e => e.id === currEnvId) ?? props.envs[0];
-
-    function handleParamChanged(e: AppEvent<EnvParam>) {
-        let isChanged = false;
-        let env = currEnv;
-
-        if (e instanceof DelEvent) {
-            env = currEnv.delParam(e.payload);
-            isChanged = true;
-        }
-
-        if (e instanceof AddEvent) {
-            env = currEnv.addParams(e.payload);
-            isChanged = true;
-        }
-
-        if (e instanceof UpdateEvent) {
-            env = currEnv.updateParams(e.payload);
-            isChanged = true;
-        }
-
-        if (isChanged) {
-            props.onChanged(env);
-            setCurrEnvId(env.id);
-        }
-    }
-
-    function handleAddEnv() {
-        const name = prompt("Enter new environment name:");
-        if (!name || name.trim() === "") return;
-
-        // Calculate next integer ID based on max existing ID
-        const maxId = props.envs.reduce((max, e) => Math.max(max, e.id ?? 0), -1);
-        const newId = maxId + 1;
-
-        const newEnv = new Env(
-            newId,
-            name.trim(),
-            [...currEnv.params]
-        );
-        // Parent synchronously adds the env and returns the index
-        const newIdx = props.onAdd(newEnv);
-        setCurrEnvId(newEnv.id);
-        props.onSelected(newIdx);
-    }
-
-    function handleRemoveEnv() {
-        if (currEnv.isDefault()) {
-            alert("Cannot remove DEFAULT environment");
-            return;
-        }
-        if (!confirm(`Remove environment "${currEnv.name}"?`)) return;
-
-        const idx = props.envs.findIndex(x => x.id === currEnv.id);
-        if (idx > -1 && currEnv.id !== undefined) {
-            // Let parent handle the removal
-            props.onRemove(currEnv.id);
-            const newIdx = Math.max(0, idx - 1);
-            const newEnv = props.envs[newIdx];
-            if (newEnv?.id !== undefined) {
-                setCurrEnvId(newEnv.id);
-            }
-            props.onSelected(newIdx);
-        }
-    }
-
-    const selectOptions = props.envs.map((x) => <option key={x.id} value={x.id} >{x.name}</option>);
-    const paramCtrls = currEnv.params.map(x =>
-        <EnvironmentParam key={`${currEnv.id}-${x.id}`}
-            param={new EnvParam(x.id, x.name, x.value)}
-            onChanged={handleParamChanged}
-            isNew={false} />);
-
-    return (
-        <>
-            <div className="row g-0">
-                <div className="col">
-                    <select
-                        id="environments"
-                        name="environments"
-                        aria-label="Environments"
-                        className="form-select"
-                        value={currEnvId}
-                        onChange={x => {
-                            let id = Number.parseInt(x.target.value);
-                            setCurrEnvId(id);
-                            props.onSelected(id);
-                        }}>
-                        {selectOptions}
-                    </select>
-                </div>
-                <div className="col-auto ms-2">
-                    <button className="btn btn-success" onClick={handleAddEnv} title="Add environment">✚</button>
-                </div>
-                <div className="col-auto ms-2">
-                    <button className="btn btn-danger" onClick={handleRemoveEnv} title="Remove environment" disabled={currEnv.isDefault()}>−</button>
-                </div>
-            </div>
-            <div className="row">Params</div>
-            {paramCtrls}
-            <EnvironmentParam key={`${currEnv.id}-new`}
-                param={new EnvParam(-1, "", "")}
-                onChanged={handleParamChanged}
-                isNew={true}
-            />
-        </>
-    );
+interface EnvironmentProps {
+  envs: Env[];
+  onChanged: (env: Env) => void;
+  onSelected: (envId: number) => void;
+  onAdd: (env: Env) => number;
+  onRemove: (envId: number) => void;
 }

+export function Environment({ envs, onChanged, onSelected, onAdd, onRemove }: EnvironmentProps) {
+  const [currEnvId, setCurrEnvId] = useState<number>(envs[0]?.id ?? 0);

+  // Sync currEnvId when envs changes
+  useEffect(() => {
+    if (!envs.find(e => e.id === currEnvId)) {
+      setCurrEnvId(envs[0]?.id ?? 0);
+    }
+  }, [envs, currEnvId]);
+
+  const currEnv = envs.find(e => e.id === currEnvId) ?? envs[0];
+
+  function handleParamChanged(event: AddEvent<EnvParam> | RemoveEvent<EnvParam> | UpdateEvent<EnvParam>) {
+    let newEnv: Env = currEnv;
+    let isChanged = false;
+
+    if (event instanceof RemoveEvent) {
+      newEnv = currEnv.delParam(event.payload);
+      isChanged = true;
+    } else if (event instanceof AddEvent) {
+      newEnv = currEnv.addParams(event.payload);
+      isChanged = true;
+    } else if (event instanceof UpdateEvent) {
+      newEnv = currEnv.updateParams(event.payload);
+      isChanged = true;
+    }
+
+    if (isChanged) {
+      onChanged(newEnv);
+      setCurrEnvId(newEnv.id ?? 0);
+    }
+  }
+
+  function handleAddEnv() {
+    const name = prompt('Enter new environment name:');
+    if (!name || name.trim() === '') return;
+
+    // Calculate next integer ID based on max existing ID
+    const maxId = envs.reduce((max, e) => Math.max(max, e.id ?? 0), -1);
+    const newId = maxId + 1;
+
+    const newEnv = new Env(newId, name.trim(), [...currEnv.params]);
+    const newIdx = onAdd(newEnv);
+    setCurrEnvId(newEnv.id ?? 0);
+    onSelected(newIdx);
+  }
+
+  function handleRemoveEnv() {
+    if (currEnv.isDefault()) {
+      alert('Cannot remove DEFAULT environment');
+      return;
+    }
+    if (!confirm(`Remove environment "${currEnv.name}"?`)) return;
+
+    const idx = envs.findIndex(x => x.id === currEnv.id);
+    if (idx > -1 && currEnv.id !== undefined) {
+      onRemove(currEnv.id);
+      const newIdx = Math.max(0, idx - 1);
+      const newEnv = envs[newIdx];
+      if (newEnv?.id !== undefined) {
+        setCurrEnvId(newEnv.id);
+      }
+      onSelected(newIdx);
+    }
+  }
+
+  const selectOptions = envs.map((x) => ({
+    value: x.id ?? 0,
+    label: x.name ?? 'Unknown',
+  }));
+
+  const paramCtrls = currEnv.params.map((x) => (
+    <EnvironmentParam
+      key={`${currEnv.id}-${x.id}`}
+      param={new EnvParam(x.id, x.name, x.value)}
+      onChanged={handleParamChanged}
+      isNew={false}
+    />
+  ));
+
+  return (
+    <Card variant="bordered" padding="none" className="h-full">
+      <CardBody className="space-y-4">
+        {/* Environment Selector */}
+        <div className="flex gap-2">
+          <div className="flex-1">
+            <Select
+              label="Environment"
+              value={currEnvId}
+              options={selectOptions}
+              onChange={(e) => {
+                const id = Number.parseInt(e.target.value);
+                setCurrEnvId(id);
+                onSelected(id);
+              }}
+              id="environments"
+            />
+          </div>
+
+          <div className="flex flex-col justify-center gap-2 pt-6">
+            <div className="flex gap-2">
+              <Button
+                variant="success"
+                size="sm"
+                onClick={handleAddEnv}
+                title="Add environment"
+                icon={Plus}
+              />
+
+              <Button
+                variant="danger"
+                size="sm"
+                onClick={handleRemoveEnv}
+                title="Remove environment"
+                icon={Minus}
+                disabled={currEnv.isDefault()}
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Parameters Section */}
+        <div>
+          <h3 className="text-sm font-semibold text-slate-700 mb-3 uppercase tracking-wide">
+            Parameters
+          </h3>
+          
+          <div className="space-y-2">
+            {paramCtrls}
+            
+            <EnvironmentParam
+              key={`${currEnv.id}-new`}
+              param={new EnvParam(-1, '', '')}
+              onChanged={handleParamChanged}
+              isNew={true}
+            />
+          </div>
+        </div>
+      </CardBody>
+    </Card>
+  );
+}
--- a/src/componets/env/EnvironmentParam.tsx
+++ b/src/componets/env/EnvironmentParam.tsx
@@ -1,68 +1,104 @@
-import { useState } from "react";
-import { EnvParam } from "../../models/EnvParam";
-import { AppEvent } from "../../models/Env";
+import { useState } from 'react';
+import { Check, Minus } from 'lucide-react';
+import { Button, Input } from '../../components/ui';
+import { EnvParam } from '../../models/EnvParam';
+import { AddEvent, RemoveEvent, UpdateEvent } from '../../models/Env';

-
-export function EnvironmentParam(props: { param: EnvParam; onChanged: (e: AppEvent<EnvParam>) => void, isNew: boolean }) {
-    const [param, setParam] = useState(props.param);
-    const [isFocused, setIsFocused] = useState(false);
-
-    function doSet(x: string, act: (x: string) => void) {
-        act(x);
-        setParam(param.Changed(true));
-    }
-
-    function handleChange() {
-        if (!param.isChanged)
-            return;
-
-        let newParam = param.Changed(false);
-        if (!props.isNew) {
-            props.onChanged(AppEvent.update(newParam));
-        }
-
-        setParam(newParam);
-    }
-
-    function handleAdd() {
-        props.onChanged(AppEvent.add(param));
-        setParam(new EnvParam(0, "", ""));
-    }
-
-    function handleKeyUp(x: React.KeyboardEvent<HTMLInputElement>) {
-        if (x.key === "Enter") { handleChange(); }
-    }
-
-    return (
-        <div className={"row px-0" + (param.isChanged ? "border border-warning" : "")}
-            style={isFocused ? { backgroundColor: "lightskyblue", padding: "1px 0" } : { padding: "1px 0" }}>
-            <div className="col-4 mx-0 px-0">
-                <input type="text"
-                    className="form-control"
-                    style={{ backgroundColor: "rgba(170, 170, 247, 0.16)" }}
-                    value={param.name}
-                    onChange={x => doSet(x.target.value, (v) => param.name = v)}
-                    onBlur={() => { handleChange(); setIsFocused(false); }}
-                    onFocus={() => setIsFocused(true)}
-                    onKeyUp={handleKeyUp}
-                    placeholder="name"
-                    aria-label="name" />
-            </div>
-            <div className="col mx-0 px-0">
-                <input type="text"
-                    className="form-control"
-                    value={param.value}
-                    onChange={x => doSet(x.target.value, v => param.value = v)}
-                    onBlur={() => { handleChange(); setIsFocused(false); }}
-                    onFocus={() => setIsFocused(true)}
-                    onKeyUp={handleKeyUp}
-                    placeholder="value"
-                    aria-label="value" />
-            </div>
-            <div className="col-1 mx-0 px-0" >
-                <button className="btn btn-success" hidden={!props.isNew} onClick={handleAdd}>✓</button>
-                <button className="btn btn-warning" hidden={props.isNew} onClick={() => props.onChanged(AppEvent.del(param))} tabIndex={-1}>−</button>
-            </div>
-        </div>
-    );
+interface EnvironmentParamProps {
+  param: EnvParam;
+  onChanged: (event: AddEvent<EnvParam> | RemoveEvent<EnvParam> | UpdateEvent<EnvParam>) => void;
+  isNew: boolean;
+}
+
+export function EnvironmentParam({ param, onChanged, isNew }: EnvironmentParamProps) {
+  const [localParam, setLocalParam] = useState(param);
+  const [isFocused, setIsFocused] = useState(false);
+
+  function updateParam(updates: Partial<EnvParam>) {
+    const updated = localParam.update(updates).markChanged(true);
+    setLocalParam(updated);
+  }
+
+  function handleChange() {
+    if (!localParam.isChanged) return;
+
+    const savedParam = localParam.markChanged(false);
+    
+    if (!isNew) {
+      onChanged(UpdateEvent.update(savedParam));
+    }
+    
+    setLocalParam(savedParam);
+  }
+
+  function handleAdd() {
+    onChanged(AddEvent.add(localParam));
+    setLocalParam(new EnvParam(0, '', ''));
+  }
+
+  function handleKeyUp(event: React.KeyboardEvent<HTMLInputElement>) {
+    if (event.key === 'Enter') {
+      handleChange();
+    }
+  }
+
+  const isChangedClass = localParam.isChanged ? 'ring-2 ring-yellow-400 border-yellow-400' : '';
+  const focusedClass = isFocused ? 'bg-blue-50' : '';
+
+  return (
+    <div
+      className={`
+        grid grid-cols-12 gap-2 p-2 rounded-lg transition-all duration-200
+        ${isChangedClass}
+        ${focusedClass ? 'bg-blue-50' : 'bg-white'}
+        hover:bg-slate-50
+      `}
+    >
+      <div className="col-span-4">
+        <Input
+          value={localParam.name ?? ''}
+          onChange={(e) => updateParam({ name: e.target.value })}
+          onBlur={() => { handleChange(); setIsFocused(false); }}
+          onFocus={() => setIsFocused(true)}
+          onKeyUp={handleKeyUp}
+          placeholder="Parameter name"
+          className="text-sm"
+        />
+      </div>
+      
+      <div className="col-span-7">
+        <Input
+          value={localParam.value ?? ''}
+          onChange={(e) => updateParam({ value: e.target.value })}
+          onBlur={() => { handleChange(); setIsFocused(false); }}
+          onFocus={() => setIsFocused(true)}
+          onKeyUp={handleKeyUp}
+          placeholder="Parameter value"
+          className="text-sm"
+        />
+      </div>
+      
+      <div className="col-span-1 flex items-center justify-center">
+        {isNew ? (
+          <Button
+            variant="success"
+            size="sm"
+            onClick={handleAdd}
+            title="Add parameter"
+            icon={Check}
+            className="px-2"
+          />
+        ) : (
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={() => onChanged(new RemoveEvent(localParam))}
+            title="Remove parameter"
+            icon={Minus}
+            className="px-2 text-red-600 hover:text-red-700 hover:bg-red-50"
+          />
+        )}
+      </div>
+    </div>
+  );
 }
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,139 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    @apply bg-gradient-to-br from-slate-50 to-slate-100 min-h-screen;
+    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  }
+}
+
+@layer components {
+  .btn {
+    @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 
+           focus:outline-none focus:ring-2 focus:ring-offset-2
+           disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+  
+  .btn-primary {
+    @apply btn bg-primary-600 text-white hover:bg-primary-700 
+           focus:ring-primary-500 shadow-md hover:shadow-lg;
+  }
+  
+  .btn-success {
+    @apply btn bg-success-600 text-white hover:bg-success-700 
+           focus:ring-success-500 shadow-md hover:shadow-lg;
+  }
+  
+  .btn-danger {
+    @apply btn bg-danger-600 text-white hover:bg-danger-700 
+           focus:ring-danger-500 shadow-md hover:shadow-lg;
+  }
+  
+  .btn-secondary {
+    @apply btn bg-slate-200 text-slate-700 hover:bg-slate-300 
+           focus:ring-slate-400 shadow-sm;
+  }
+  
+  .btn-sm {
+    @apply px-3 py-1.5 text-sm;
+  }
+  
+  .btn-icon {
+    @apply p-2 rounded-lg transition-all duration-200
+           hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-primary-500;
+  }
+  
+  .input {
+    @apply w-full px-3 py-2 border border-slate-300 rounded-lg
+           focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent
+           transition-all duration-200
+           placeholder:text-slate-400;
+  }
+  
+  .input-focused {
+    @apply ring-2 ring-primary-500 border-transparent bg-primary-50;
+  }
+  
+  .card {
+    @apply bg-white rounded-xl shadow-lg border border-slate-200 
+           overflow-hidden transition-all duration-300;
+  }
+  
+  .card-header {
+    @apply px-4 py-3 border-b border-slate-200 bg-slate-50;
+  }
+  
+  .card-body {
+    @apply p-4;
+  }
+  
+  .select {
+    @apply w-full px-3 py-2 border border-slate-300 rounded-lg
+           focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent
+           bg-white cursor-pointer transition-all duration-200;
+  }
+  
+  .tab {
+    @apply px-4 py-2 text-sm font-medium rounded-t-lg
+           transition-all duration-200 border-b-2 border-transparent
+           hover:bg-slate-100 cursor-pointer;
+  }
+  
+  .tab-active {
+    @apply tab bg-white border-primary-500 text-primary-600;
+  }
+  
+  .tab-inactive {
+    @apply tab text-slate-600;
+  }
+  
+  .badge {
+    @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium;
+  }
+  
+  .badge-warning {
+    @apply badge bg-warning-100 text-warning-800;
+  }
+  
+  .badge-success {
+    @apply badge bg-success-100 text-success-800;
+  }
+  
+  .badge-danger {
+    @apply badge bg-danger-100 text-danger-800;
+  }
+  
+  .label {
+    @apply block text-sm font-medium text-slate-700 mb-1;
+  }
+}
+
+@layer utilities {
+  .animate-fade-in {
+    animation: fadeIn 0.3s ease-in-out;
+  }
+  
+  .animate-slide-in {
+    animation: slideIn 0.3s ease-out;
+  }
+  
+  .scrollbar-thin {
+    scrollbar-width: thin;
+    scrollbar-color: #cbd5e1 transparent;
+  }
+  
+  .scrollbar-thin::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  .scrollbar-thin::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  
+  .scrollbar-thin::-webkit-scrollbar-thumb {
+    background-color: #cbd5e1;
+    border-radius: 3px;
+  }
+}
--- a/src/models/Config.tsx
+++ b/src/models/Config.tsx
@@ -1,158 +1,174 @@
-import { Env } from "./Env";
-
+import { Env } from './Env';

+/**
+ * Configuration template with placeholder support
+ */
 export class ConfigTemplate {
-  public static Empty: ConfigTemplate = new ConfigTemplate();
+  public static readonly Empty: ConfigTemplate = new ConfigTemplate();

-  constructor(text: string = "") {
-    this._contentText = text;
-    this.extractParams();
+  private _contentText: string;
+  private _params: string[];
+
+  constructor(contentText: string = '') {
+    this._contentText = contentText;
+    this._params = this.extractParams();
  }

-  private _contentText: string = "";
-  private _params: string[] = [];
-
  public get content(): string {
    return this._contentText;
  }

+  /**
+   * Backward compatibility getter
+   */
  public get Params(): string[] {
+    return this.params;
+  }
+
+  public get params(): string[] {
    return [...this._params];
  }

-  private extractParams() {
-    let regex = /@(\w+)@/g;
-    let matches;
-    let paramsSet = new Set<string>();
+  /**
+   * Extracts @placeholder@ patterns from template content
+   */
+  private extractParams(): string[] {
+    const regex = /@(\w+)@/g;
+    const paramsSet = new Set<string>();
+    let match;

-    while ((matches = regex.exec(this._contentText)) !== null) {
-      if (matches.length > 1) {
-        paramsSet.add(matches[1]);
-      }
+    while ((match = regex.exec(this._contentText)) !== null) {
+      paramsSet.add(match[1]);
    }

-    this._params = Array.from(paramsSet);
+    return Array.from(paramsSet);
  }
-
 }

-
+/**
+ * Main configuration container
+ */
 export class Config {
-  public static get ENV_NAME_PARAM(): string { return "env_name" };
+  public static readonly ENV_NAME_PARAM = 'env_name';

  public envs: Env[] = [];
  public template: ConfigTemplate = ConfigTemplate.Empty;

-  addEnvs(envs: Env[]) {
+  /**
+   * Sets environments (backward compatibility)
+   */
+  public addEnvs(envs: Env[]): void {
    this.envs = envs;
  }

-  addTemplate(text: string) {
-    this.template = new ConfigTemplate(text);
+  /**
+   * Sets environments
+   */
+  public setEnvs(envs: Env[]): void {
+    this.envs = envs;
  }

-  getTemplateAsJson(): string {
+  /**
+   * Sets template content (backward compatibility)
+   */
+  public addTemplate(content: string): void {
+    this.setTemplate(content);
+  }
+
+  /**
+   * Sets template content
+   */
+  public setTemplate(content: string): void {
+    this.template = new ConfigTemplate(content);
+  }
+
+  /**
+   * Gets template as JSON string
+   */
+  public getTemplateAsJson(): string {
    try {
-      return this.template.content ;
-    } catch (error) {
-      console.error("Error converting template content to JSON:", error);
-      return "{}";
+      return this.template.content;
+    } catch {
+      return '{}';
    }
  }

  /**
-   * Updates the template JSON by adding/updating params from the given environment.
-   * Params are added as "!!! paramName": "@paramName@" placeholder pairs.
-   * If a param's @placeholder@ already exists in template, it won't be added.
-   * Existing template content is preserved.
+   * Updates template by adding placeholders for environment params
   */
-  updateTemplateFromEnv(env: Env) {
+  public updateTemplateFromEnv(env: Env): void {
    let templateObj: Record<string, any> = {};

-    // Try to parse existing template as JSON
+    // Try to parse existing template
    try {
      if (this.template.content.trim()) {
        templateObj = JSON.parse(this.template.content);
      }
-    } catch (e) {
-      // If parsing fails, start with empty object
-      console.warn("Template is not valid JSON, starting fresh");
+    } catch {
+      // Start fresh if invalid JSON
    }

-    // Add/update params from the environment as placeholders
+    // Add placeholders for params that don't exist yet
    for (const param of env.params) {
-      if (param.name && param.name.trim() !== "") {
-        const placeholderValue = `@${param.name}@`;
-        
-        // Check if this placeholder already exists anywhere in the template
-        const placeholderAlreadyExists = this.template.content.includes(placeholderValue);
-        
-        if (!placeholderAlreadyExists) {
-          const placeholderKey = `!!! ${param.name}`;
-          templateObj[placeholderKey] = placeholderValue;
+      if (param.name && param.name.trim()) {
+        const placeholder = `@${param.name}@`;
+
+        if (!this.template.content.includes(placeholder)) {
+          templateObj[`!!! ${param.name}`] = placeholder;
        }
      }
    }

-    // Convert back to formatted JSON string
-    const newTemplateContent = JSON.stringify(templateObj, null, 4);
-    this.template = new ConfigTemplate(newTemplateContent);
+    this.template = new ConfigTemplate(JSON.stringify(templateObj, null, 4));
  }

-  validateParams(): string[] {
-    const envKeys = this.envs.map(env => env.params.map(param => param.name)).flat();
-    const missingParams = this.template.Params.filter(param => param != Config.ENV_NAME_PARAM && !envKeys.includes(param));
+  /**
+   * Validates that all template placeholders have corresponding params (backward compatibility)
+   */
+  public validateParams(): string[] {
+    return this.validatePlaceholders();
+  }

-    if (missingParams.length > 0) {
-      console.error("Template: missing parameters in environments:", missingParams);
+  /**
+   * Validates that all template placeholders have corresponding params
+   */
+  public validatePlaceholders(): string[] {
+    const defaultEnv = this.envs.find(e => e.name === 'DEFAULT');
+    const customEnvs = this.envs.filter(e => e.name !== 'DEFAULT');
+
+    // Collect param names from DEFAULT
+    const defaultParamNames = new Set(
+      defaultEnv?.getParamNames() || []
+    );
+
+    // Collect param names from all custom envs
+    const customParamNames = new Set(
+      customEnvs.flatMap(e => e.getParamNames())
+    );
+
+    // Find missing placeholders
+    const missingParams: string[] = [];
+    for (const placeholder of this.template.params) {
+      if (placeholder === Config.ENV_NAME_PARAM) continue;
+
+      const inDefault = defaultParamNames.has(placeholder);
+      const inCustom = customParamNames.has(placeholder);
+
+      if (!inDefault && !inCustom) {
+        missingParams.push(placeholder);
+      }
    }

    return missingParams;
  }

  /**
-   * Validates that all @placeholders@ in template have corresponding params.
-   * Checks DEFAULT env first, then all custom envs.
-   * Returns array of placeholder names that are not defined.
+   * Creates a deep copy of the config
   */
-  validatePlaceholders(): string[] {
-    const defaultEnv = this.envs.find(e => e.name === "DEFAULT");
-    const customEnvs = this.envs.filter(e => e.name !== "DEFAULT");
-    
-    // Collect all param names from DEFAULT
-    const defaultParamNames = new Set(
-      defaultEnv?.params.map(p => p.name).filter(n => n && n.trim() !== "") || []
-    );
-    
-    // Collect all param names from all custom envs
-    const customParamNames = new Set(
-      customEnvs.flatMap(e => e.params.map(p => p.name).filter(n => n && n.trim() !== ""))
-    );
-    
-    // Extract all @placeholders@ from template
-    const placeholderRegex = /@(\w+)@/g;
-    const placeholdersInTemplate = new Set<string>();
-    let match;
-    while ((match = placeholderRegex.exec(this.template.content)) !== null) {
-      placeholdersInTemplate.add(match[1]);
-    }
-    
-    // Find placeholders that don't have matching params
-    const missingParams: string[] = [];
-    for (const placeholder of placeholdersInTemplate) {
-      if (placeholder === Config.ENV_NAME_PARAM) continue; // Skip built-in
-      
-      // Check if exists in DEFAULT or in ANY custom env
-      const inDefault = defaultParamNames.has(placeholder);
-      const inCustom = customParamNames.has(placeholder);
-      
-      // Valid if: in DEFAULT, or in at least one custom env
-      if (!inDefault && !inCustom) {
-        missingParams.push(placeholder);
-      }
-    }
-    
-    return missingParams;
+  public clone(): Config {
+    const cloned = new Config();
+    cloned.envs = [...this.envs];
+    cloned.template = this.template;
+    return cloned;
  }
 }
-
--- a/src/models/ConfigReader.tsx
+++ b/src/models/ConfigReader.tsx
@@ -1,135 +1,115 @@
-import { Env } from "./Env";
-import { EnvParam } from "./EnvParam";
-import { Config } from "./Config";
-
+import { Env } from './Env';
+import { EnvParam } from './EnvParam';
+import { Config } from './Config';

 /**
- * A utility class for parsing XML configuration files into a structured Config object.
- * 
- * Supports both string-based and file-based parsing, extracting environment definitions
- * and their associated parameters. The expected XML format includes:
- * - Root element with tag "engine"
- * - Child elements "environment" with a "name" attribute
- * - Nested "parameter" elements with "name" and "value" attributes
- * 
- * Provides validation and error handling for missing attributes.
- * Includes utility method to check if a file is in the supported XML format.
+ * XML Configuration Parser
+ * Parses XML files into Config objects
 */
 export class ConfigReader {
-  private readonly rootTag = "engine";
-
-  private readonly envTag = "environment";
-  private readonly envNameAttr = "name";
-
-  private readonly paramTag = "parameter";
-  private readonly paramNameAttr = "name";
-  private readonly paramValAttr = "value";
-
-  private readonly templateTag = "template";
+  private readonly rootTag = 'engine';
+  private readonly envTag = 'environment';
+  private readonly envNameAttr = 'name';
+  private readonly paramTag = 'parameter';
+  private readonly paramNameAttr = 'name';
+  private readonly paramValAttr = 'value';
+  private readonly templateTag = 'template';

  /**
-   * Parses an XML string into a Config object.
-   * 
-   * @param xmlString - The XML content as a string
-   * @param fileType - The MIME type of the XML (default: 'application/xml')
-   * @returns A Config object containing parsed environments and parameters, or null if parsing fails
+   * Parses XML string into Config
   */
  public parseFromString(xmlString: string, fileType: DOMParserSupportedType = 'application/xml'): Config | null {
-    let parser = new DOMParser();
-    let xml = parser.parseFromString(xmlString, fileType);
-    this.checkTemplate(xml);
-    let config = new Config();
+    const parser = new DOMParser();
+    const xml = parser.parseFromString(xmlString, fileType);
+    this.validateTemplate(xml);
+    
+    const config = new Config();
+    const envs = this.parseEnvs(xml.querySelectorAll(`${this.rootTag}>${this.envTag}`));
+    config.setEnvs(envs);

-    let envs = this.parseEnvs(xml.querySelectorAll(`${this.rootTag}>${this.envTag}`));
-    config.addEnvs(envs);
-
-    let tmplElement = xml.getElementsByTagName(this.templateTag)[0];
-    let tmplText = tmplElement?.textContent?.trim();
+    const tmplElement = xml.getElementsByTagName(this.templateTag)[0];
+    const tmplText = tmplElement?.textContent?.trim();
    if (!tmplText) {
-      throw new Error(`Template content is missing or empty in <${this.templateTag}> element.`);
+      throw new Error(`Template content is missing in <${this.templateTag}> element.`);
    }
+    config.setTemplate(tmplText);

-    config.addTemplate(tmplText);
-
-    console.log("parsed from string res:", config);
    return config;
  }

-    /**
-   * Parses an XML file into a Config object asynchronously.
-   * 
-   * @param file - The File object representing the XML file
-   * @returns A Promise resolving to a Config object or null if parsing fails
+  /**
+   * Parses XML file into Config
   */
  public async parseFromFile(file: File): Promise<Config | null> {
-    let srcText = await file.text();        
-    return this.parseFromString(srcText, file.type as DOMParserSupportedType);    
-  }
-
-  private parseEnvs(xmlEnvs: NodeListOf<Element>): Env[] {
-    let res: Env[] = [];
-    let i = 0;
-    for (let xml of xmlEnvs) {
-      res.push(this.xmlToEnv(xml, i++));
-    }
-
-    return res;
-  }
-
-  private throwError(text: string): string {
-    throw new Error(text);
-  }
-
-  private xmlToEnv(xml: Element, id: number): Env {
-    let name = xml.getAttribute(this.envNameAttr) ?? this.throwError(`no attr '${this.envNameAttr}' in '${xml.tagName}'`);
-    let params = this.parseParams(xml);
-
-    return new Env(id, name, params);
-  }
-
-  private parseParams(xml: Element): EnvParam[] {
-    let paramElements = xml.getElementsByTagName(this.paramTag);
-    let params: EnvParam[] = [];
-    let id = 0;
-    for (let p of paramElements) {
-      params.push(this.xmlToParam(p, id++));
-    }
-
-    return params;
-  }
-
-  private xmlToParam(xmlParam: Element, id: number): EnvParam {
-    let name = xmlParam.getAttribute(this.paramNameAttr) ?? this.throwError(`no attr '${this.paramNameAttr}' in '${this.paramTag}'`);
-    let val = xmlParam.getAttribute(this.paramValAttr) ?? this.throwError(`no attr '${this.paramValAttr}' in '${this.paramTag}'`);
-
-    return new EnvParam(id, name, val);
+    const srcText = await file.text();
+    return this.parseFromString(srcText, file.type as DOMParserSupportedType);
  }

  /**
-   * Checks if the given file is in a supported format (text/xml).
-   * 
-   * @param file - The File object to check
-   * @returns True if the file is of type 'text/xml', otherwise returns an error message string
+   * Checks if file format is supported
   */
-  public static isSupportedFormat(file: File): (boolean | string) {
-    if (file.type !== "text/xml") {
-      return `file format ${file.type} not supported (or extension is't .xml)`;
+  public static isSupportedFormat(file: File): boolean | string {
+    if (file.type !== 'text/xml') {
+      return `File format '${file.type}' not supported (expected text/xml)`;
    }
-
    return true;
  }

-  public checkTemplate(xml: Document) {
-    const templateElements = xml.getElementsByTagName(this.templateTag);
-  
-    if (templateElements.length === 0) {
-      this.throwError(`Missing required <${this.templateTag}> element in the XML.`);
+  /**
+   * Parses environment elements
+   */
+  private parseEnvs(xmlEnvs: NodeListOf<Element>): Env[] {
+    return Array.from(xmlEnvs).map((xml, index) => this.xmlToEnv(xml, index));
+  }
+
+  /**
+   * Converts XML element to Env
+   */
+  private xmlToEnv(xml: Element, id: number): Env {
+    const name = xml.getAttribute(this.envNameAttr);
+    if (!name) {
+      throw new Error(`Missing '${this.envNameAttr}' attribute in '${xml.tagName}'`);
    }
-  
-    if(templateElements.length > 1) {
-      this.throwError(`Multiple <${this.templateTag}> elements found. Only one is allowed.`);
+    const params = this.parseParams(xml);
+    return new Env(id, name, params);
+  }
+
+  /**
+   * Parses parameter elements
+   */
+  private parseParams(xml: Element): EnvParam[] {
+    return Array.from(xml.getElementsByTagName(this.paramTag))
+      .map((p, index) => this.xmlToParam(p, index));
+  }
+
+  /**
+   * Converts XML element to EnvParam
+   */
+  private xmlToParam(xmlParam: Element, id: number): EnvParam {
+    const name = xmlParam.getAttribute(this.paramNameAttr);
+    const value = xmlParam.getAttribute(this.paramValAttr);
+    
+    if (!name) {
+      throw new Error(`Missing '${this.paramNameAttr}' attribute in parameter`);
+    }
+    if (value === null) {
+      throw new Error(`Missing '${this.paramValAttr}' attribute in parameter`);
+    }
+    
+    return new EnvParam(id, name, value);
+  }
+
+  /**
+   * Validates template element exists
+   */
+  private validateTemplate(xml: Document): void {
+    const templates = xml.getElementsByTagName(this.templateTag);
+    
+    if (templates.length === 0) {
+      throw new Error(`Missing required <${this.templateTag}> element`);
+    }
+    if (templates.length > 1) {
+      throw new Error(`Multiple <${this.templateTag}> elements found. Only one allowed.`);
    }
  }
 }
-
-
--- a/src/models/Env.ts
+++ b/src/models/Env.ts
@@ -1,60 +1,151 @@
-import { EnvParam } from "./EnvParam";
-import { NamedId } from "./NamedId";
+import { EnvParam } from './EnvParam';
+import { NamedEntity } from './types';

+/**
+ * Environment configuration containing parameters
+ */
+export class Env implements NamedEntity {
+  constructor(
+    public id?: number,
+    public name?: string,
+    public params: EnvParam[] = []
+  ) {}

-export class Env implements NamedId {
-    constructor(
-        public id?: number,
-        public name?: string,
-        public params: EnvParam[] = []
-    ) { }
+  /**
+   * Checks if this is the DEFAULT environment
+   */
+  public isDefault(): boolean {
+    return this.name === 'DEFAULT';
+  }

-    public isDefault() {
-        return this.name === "DEFAULT";
+  /**
+   * Adds a new parameter to the environment (backward compatibility)
+   */
+  public addParams(param: EnvParam): Env {
+    return this.addParam(param);
+  }
+
+  /**
+   * Adds a new parameter to the environment
+   */
+  public addParam(param: EnvParam): Env {
+    const newParam = new EnvParam(
+      param.id ?? this.generateId(),
+      param.name,
+      param.value,
+      param.isChanged
+    );
+    return new Env(this.id, this.name, [...this.params, newParam]);
+  }
+
+  /**
+   * Removes a parameter by ID
+   */
+  public delParam(paramIdOrParam: number | EnvParam): Env {
+    const paramId = typeof paramIdOrParam === 'number' ? paramIdOrParam : paramIdOrParam.id;
+    return this.removeParam(paramId!);
+  }
+
+  /**
+   * Removes a parameter by ID
+   */
+  public removeParam(paramId: number): Env {
+    return new Env(
+      this.id,
+      this.name,
+      this.params.filter(p => p.id !== paramId)
+    );
+  }
+
+  /**
+   * Updates an existing parameter (backward compatibility)
+   */
+  public updateParams(updatedParam: EnvParam): Env {
+    return this.updateParam(updatedParam);
+  }
+
+  /**
+   * Updates an existing parameter
+   */
+  public updateParam(updatedParam: EnvParam): Env {
+    const index = this.params.findIndex(p => p.id === updatedParam.id);
+    if (index === -1) {
+      return this;
    }

-    addParams(payload: EnvParam): Env {
-        payload.id = Math.random() * 10000;
-        this.params.push(payload);
-        return new Env(this.id, this.name, [...this.params]);
-    }
+    const newParams = [...this.params];
+    newParams[index] = updatedParam;
+    return new Env(this.id, this.name, newParams);
+  }

-    delParam(param: EnvParam): Env {
-        let idx = this.params.findIndex(el => el.id === param.id);
-        if (idx > -1) {
-            const newP = this.params.filter(el => el.id !== param.id);
-            return new Env(this.id, this.name, newP);
-        }
+  /**
+   * Gets a parameter by name
+   */
+  public getParamByName(name: string): EnvParam | undefined {
+    return this.params.find(p => p.name === name);
+  }

-        return this;
-    }
+  /**
+   * Gets all parameter names
+   */
+  public getParamNames(): string[] {
+    return this.params.map(p => p.name).filter((n): n is string => !!n);
+  }

-    public updateParams(param: EnvParam): Env {
-        let idx = this.params.findIndex(el => el.id === param.id);
-        if (idx > -1) {
-            let newP = [...this.params];
-            newP[idx] = param;
-            return new Env(this.id, this.name, newP);
-        }
+  /**
+   * Creates a copy with updated values
+   */
+  public update(updates: Partial<Env>): Env {
+    return new Env(
+      updates.id ?? this.id,
+      updates.name ?? this.name,
+      updates.params ?? this.params
+    );
+  }

-        return this;
-    }
+  /**
+   * Generates a unique ID for new parameters
+   */
+  private generateId(): number {
+    return Date.now() % 100000 + Math.floor(Math.random() * 10000);
+  }
 }

+/**
+ * Base class for environment events (backward compatibility)
+ */
 export class AppEvent<T> {
-    protected constructor(public payload: T) { }
+  constructor(public payload: T) {}

-    public static add<T>(payload: T): AppEvent<T> {
-        return new AddEvent(payload);
-    }
-    public static del<T>(payload: T): AppEvent<T> {
-        return new DelEvent(payload);
-    }
-    public static update<T>(payload: T): AppEvent<T> {
-        return new UpdateEvent(payload);
-    }
+  public static add<T>(payload: T): AppEvent<T> {
+    return new AddEvent(payload);
+  }
+
+  public static del<T>(payload: T): AppEvent<T> {
+    return new RemoveEvent(payload);
+  }
+
+  public static update<T>(payload: T): AppEvent<T> {
+    return new UpdateEvent(payload);
+  }
 }

-export class AddEvent<T> extends AppEvent<T> { }
-export class UpdateEvent<T> extends AppEvent<T> { }
-export class DelEvent<T> extends AppEvent<T> { }
+/**
+ * Event for adding a parameter
+ */
+export class AddEvent<T> extends AppEvent<T> {}
+
+/**
+ * Event for updating a parameter
+ */
+export class UpdateEvent<T> extends AppEvent<T> {}
+
+/**
+ * Event for removing a parameter (backward compatibility)
+ */
+export class DelEvent<T> extends AppEvent<T> {}
+
+/**
+ * Event for removing a parameter
+ */
+export class RemoveEvent<T> extends AppEvent<T> {}
--- a/src/models/EnvParam.ts
+++ b/src/models/EnvParam.ts
@@ -1,32 +1,73 @@
-import { NamedId } from "./NamedId";
+import { NamedEntity } from './types';

-export class EnvParam implements NamedId {
-    constructor(
-        public id?: number,
-        public name?: string,
-        public value?: string,
-        public isChanged: boolean = false
-    ) { }
+/**
+ * Environment parameter representing a key-value configuration pair
+ */
+export class EnvParam implements NamedEntity {
+  constructor(
+    public id?: number,
+    public name?: string,
+    public value?: string,
+    public isChanged: boolean = false
+  ) {}

-    public Changed(v: boolean = true): EnvParam {
-        return new EnvParam(
-            this.id,
-            this.name,
-            this.value,
-            v);
-    }
+  /**
+   * Marks the parameter as changed (backward compatibility)
+   */
+  public Changed(changed: boolean = true): EnvParam {
+    return this.markChanged(changed);
+  }

-    public sanitize(v?: string): string {
-        return v?.replace(/&/g, "&amp")
-            .replace(/</g, '&lt;')
-            .replace(/>/g, '&gt;')
-            .replace(/"/g, '&quot;')
-            .replace(/'/g, '&apos;')            
-            ?? "";
-    }
+  /**
+   * Marks the parameter as changed
+   */
+  public markChanged(changed: boolean = true): EnvParam {
+    return new EnvParam(this.id, this.name, this.value, changed);
+  }

-    public humanize(v?: string): string {
-        return v ?? "";
-    }
+  /**
+   * Creates a copy of this parameter with updated values
+   */
+  public update(updates: Partial<EnvParam>): EnvParam {
+    return new EnvParam(
+      updates.id ?? this.id,
+      updates.name ?? this.name,
+      updates.value ?? this.value,
+      updates.isChanged ?? this.isChanged
+    );
+  }
+
+  /**
+   * Sanitizes HTML special characters (instance method for backward compatibility)
+   */
+  public sanitize(value?: string): string {
+    const v = value ?? this.value ?? '';
+    return EnvParam.sanitize(v);
+  }
+
+  /**
+   * Sanitizes HTML special characters (static method)
+   */
+  public static sanitize(value: string): string {
+    return value
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&apos;');
+  }
+
+  /**
+   * Humanizes the value (backward compatibility)
+   */
+  public humanize(value?: string): string {
+    return value ?? this.value ?? '';
+  }
+
+  /**
+   * Validates that the parameter has required fields
+   */
+  public isValid(): boolean {
+    return !!(this.name && this.name.trim() !== '');
+  }
 }
-
--- a/src/models/types.ts
+++ b/src/models/types.ts
@@ -0,0 +1,13 @@
+/**
+ * Base interface for entities with optional ID
+ */
+export interface Entity {
+  id?: number;
+}
+
+/**
+ * Named entity with optional ID
+ */
+export interface NamedEntity extends Entity {
+  name?: string;
+}
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -0,0 +1,77 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#eff6ff',
+          100: '#dbeafe',
+          200: '#bfdbfe',
+          300: '#93c5fd',
+          400: '#60a5fa',
+          500: '#3b82f6',
+          600: '#2563eb',
+          700: '#1d4ed8',
+          800: '#1e40af',
+          900: '#1e3a8a',
+        },
+        success: {
+          50: '#f0fdf4',
+          100: '#dcfce7',
+          200: '#bbf7d0',
+          300: '#86efac',
+          400: '#4ade80',
+          500: '#22c55e',
+          600: '#16a34a',
+          700: '#15803d',
+          800: '#166534',
+          900: '#14532d',
+        },
+        danger: {
+          50: '#fef2f2',
+          100: '#fee2e2',
+          200: '#fecaca',
+          300: '#fca5a5',
+          400: '#f87171',
+          500: '#ef4444',
+          600: '#dc2626',
+          700: '#b91c1c',
+          800: '#991b1b',
+          900: '#7f1d1d',
+        },
+        warning: {
+          50: '#fffbeb',
+          100: '#fef3c7',
+          200: '#fde68a',
+          300: '#fcd34d',
+          400: '#fbbf24',
+          500: '#f59e0b',
+          600: '#d97706',
+          700: '#b45309',
+          800: '#92400e',
+          900: '#78350f',
+        },
+      },
+      animation: {
+        'fade-in': 'fadeIn 0.3s ease-in-out',
+        'slide-in': 'slideIn 0.3s ease-out',
+        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        slideIn: {
+          '0%': { transform: 'translateY(-10px)', opacity: '0' },
+          '100%': { transform: 'translateY(0)', opacity: '1' },
+        },
+      },
+    },
+  },
+  plugins: [],
+}