generate-ui-cli 2.2.0 → 2.3.0

package/dist/generators/angular/feature.generator.js

@@ -4,16 +4,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateFeature = generateFeature;
+exports.generateAdminFeature = generateAdminFeature;
 const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
-function generateFeature(schema, root, schemasRoot) {
+function generateFeature(schema, featuresRoot, generatedRoot, schemasRoot) {
     const rawName = schema.api.operationId;
     const name = toPascalCase(rawName);
     const folder = toFolderName(name);
     const fileBase = toFileBase(name);
-    const featureDir = path_1.default.join(root, folder);
+    const featureDir = path_1.default.join(generatedRoot, folder);
     fs_1.default.mkdirSync(featureDir, { recursive: true });
-    const appRoot = path_1.default.resolve(root, '..');
+    const appRoot = path_1.default.resolve(featuresRoot, '..');
     ensureUiComponents(appRoot, schemasRoot);
     const method = String(schema.api.method || '').toLowerCase();
     const endpoint = String(schema.api.endpoint || '');
@@ -35,6 +36,7 @@ function generateFeature(schema, root, schemasRoot) {
     }));
     const includeBody = ['post', 'put', 'patch'].includes(method);
     const includeParams = pathParams.length > 0 || queryParams.length > 0;
+    const shouldAutoRefresh = method === 'get' && !includeParams && !includeBody;
     const formFields = [
         ...(includeParams
             ? [...paramFields, ...normalizedQueryFields]
@@ -47,24 +49,32 @@ function generateFeature(schema, root, schemasRoot) {
         ? String(schema.entity).trim()
         : rawName;
     const subtitle = `${method.toUpperCase()} ${endpoint}`;
+    const responseFormat = resolveResponseFormat(schema);
     const schemaImportPath = buildSchemaImportPath(featureDir, schemasRoot, rawName);
     /**
      * 1️⃣ Component (sempre sobrescreve)
      */
     const componentPath = path_1.default.join(featureDir, `${fileBase}.component.ts`);
-    fs_1.default.writeFileSync(componentPath, `
-import { Component } from '@angular/core'
+    const uiCardImport = buildRelativeImportPath(featureDir, path_1.default.join(appRoot, 'ui', 'ui-card', 'ui-card.component'));
+    const uiButtonImport = buildRelativeImportPath(featureDir, path_1.default.join(appRoot, 'ui', 'ui-button', 'ui-button.component'));
+    const uiSelectImport = buildRelativeImportPath(featureDir, path_1.default.join(appRoot, 'ui', 'ui-select', 'ui-select.component'));
+    const uiCheckboxImport = buildRelativeImportPath(featureDir, path_1.default.join(appRoot, 'ui', 'ui-checkbox', 'ui-checkbox.component'));
+    const uiInputImport = buildRelativeImportPath(featureDir, path_1.default.join(appRoot, 'ui', 'ui-input', 'ui-input.component'));
+    const uiTextareaImport = buildRelativeImportPath(featureDir, path_1.default.join(appRoot, 'ui', 'ui-textarea', 'ui-textarea.component'));
+    const generatedComponentSource = `
+import { Component, OnDestroy, OnInit, AfterViewInit } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { FormBuilder, ReactiveFormsModule } from '@angular/forms'
-import { UiCardComponent } from '../../ui/ui-card/ui-card.component'
-import { UiButtonComponent } from '../../ui/ui-button/ui-button.component'
-import { UiSelectComponent } from '../../ui/ui-select/ui-select.component'
-import { UiCheckboxComponent } from '../../ui/ui-checkbox/ui-checkbox.component'
-import { UiInputComponent } from '../../ui/ui-input/ui-input.component'
-import { UiTextareaComponent } from '../../ui/ui-textarea/ui-textarea.component'
+import { UiCardComponent } from '${uiCardImport}'
+import { UiButtonComponent } from '${uiButtonImport}'
+import { UiSelectComponent } from '${uiSelectImport}'
+import { UiCheckboxComponent } from '${uiCheckboxImport}'
+import { UiInputComponent } from '${uiInputImport}'
+import { UiTextareaComponent } from '${uiTextareaImport}'
 import { ${name}Service } from './${fileBase}.service.gen'
 import { ${name}Gen } from './${fileBase}.gen'
 import screenSchema from '${schemaImportPath}'
+import { BehaviorSubject } from 'rxjs'
 
 @Component({
   selector: 'app-${toKebab(name)}',
@@ -82,13 +92,77 @@ import screenSchema from '${schemaImportPath}'
   templateUrl: './${fileBase}.component.html',
   styleUrls: ['./${fileBase}.component.scss']
 })
-export class ${name}Component extends ${name}Gen {
+export class ${name}Component extends ${name}Gen implements OnInit, AfterViewInit, OnDestroy {
+  private readonly autoRefresh = ${shouldAutoRefresh}
+  private readonly allowDeepArraySearch = ${method === 'get' && includeParams && !includeBody ? 'false' : 'true'}
+  private readonly onFocus = () => {
+    if (this.autoRefresh && !this.loading) {
+      this.submit()
+    }
+  }
+  private readonly onVisibility = () => {
+    if (
+      this.autoRefresh &&
+      typeof document !== 'undefined' &&
+      document.visibilityState === 'visible'
+    ) {
+      this.submit()
+    }
+  }
+
   constructor(
     protected override fb: FormBuilder,
     protected override service: ${name}Service
   ) {
     super(fb, service)
     this.setSchema(screenSchema as any)
+    this.applyPrefill()
+  }
+
+  ngOnInit() {
+    this.ensureInitialLoad()
+    this.setupAutoRefreshListeners()
+  }
+
+  ngAfterViewInit() {
+    this.ensureInitialLoad()
+  }
+
+  ngOnDestroy() {
+    if (!this.autoRefresh) return
+    if (typeof window !== 'undefined') {
+      window.removeEventListener('focus', this.onFocus)
+    }
+    if (typeof document !== 'undefined') {
+      document.removeEventListener('visibilitychange', this.onVisibility)
+    }
+  }
+
+  private setupAutoRefreshListeners() {
+    if (!this.autoRefresh) return
+    if (typeof window !== 'undefined') {
+      window.addEventListener('focus', this.onFocus)
+    }
+    if (typeof document !== 'undefined') {
+      document.addEventListener('visibilitychange', this.onVisibility)
+    }
+  }
+
+  private ensureInitialLoad() {
+    if (!this.autoRefresh) return
+    if (this.loading || this.result$.value !== null) return
+    this.submit()
+  }
+
+  private applyPrefill() {
+    const state = (history as any)?.state
+    const prefill = state?.prefill
+    if (prefill) {
+      this.form.patchValue(prefill)
+      if (state?.autoSubmit) {
+        this.submit()
+      }
+    }
   }
 
   submit() {
@@ -98,32 +172,32 @@ export class ${name}Component extends ${name}Gen {
     const body = this.pick(value, this.bodyFieldNames)
 
     this.loading = true
-    this.error = null
+    this.error$.next(null)
 
     this.service
       .execute(pathParams, queryParams, body)
       .subscribe({
-        next: result => {
+        next: (result: any) => {
           const normalized =
             result && typeof result === 'object' && 'body' in result
               ? (result as any).body
               : result
-          this.result = normalized
+          this.result$.next(normalized)
           this.loading = false
         },
-        error: error => {
-          this.error = error
+        error: (error: any) => {
+          this.error$.next(error)
           this.loading = false
         }
       })
   }
 
-  isArrayResult() {
-    return this.getRows().length > 0
+  isArrayResult(raw?: any) {
+    return this.getRows(raw).length > 0
   }
 
-  getRows() {
-    const value = this.unwrapResult(this.result)
+  getRows(raw?: any) {
+    const value = this.unwrapResult(raw ?? this.result$.value)
     if (Array.isArray(value)) return value
     if (!value || typeof value !== 'object') return []
 
@@ -132,20 +206,57 @@ export class ${name}Component extends ${name}Gen {
       if (Array.isArray(value[key])) return value[key]
     }
 
+    if (!this.allowDeepArraySearch) return []
     const found = this.findFirstArray(value, 0, 5)
     return found ?? []
   }
 
-  getColumns() {
-    const raw = this.form.get('fields')?.value
-    if (typeof raw === 'string' && raw.trim().length > 0) {
-      return raw
+  private getConfiguredColumns() {
+    const columns = this.schema?.data?.table?.columns
+    if (!Array.isArray(columns)) return []
+    return columns
+      .map((entry: any) => {
+        if (typeof entry === 'string') {
+          return { key: entry, label: '', visible: true }
+        }
+        if (entry && typeof entry === 'object') {
+          const key = String(
+            entry.key ?? entry.id ?? entry.column ?? ''
+          ).trim()
+          if (!key) return null
+          const label =
+            typeof entry.label === 'string' ? entry.label : ''
+          const visible = entry.visible !== false
+          return { key, label, visible }
+        }
+        return null
+      })
+      .filter(Boolean) as Array<{ key: string; label: string; visible: boolean }>
+  }
+
+  private getColumnLabel(value: string) {
+    const configured = this.getConfiguredColumns()
+    const match = configured.find(column => column.key === value)
+    return match?.label ?? ''
+  }
+
+  getColumns(value?: any) {
+    const configured = this.getConfiguredColumns()
+    if (configured.length) {
+      return configured
+        .filter(column => column.visible)
+        .map(column => column.key)
+    }
+
+    const fieldsRaw = this.form.get('fields')?.value
+    if (typeof fieldsRaw === 'string' && fieldsRaw.trim().length > 0) {
+      return fieldsRaw
         .split(',')
         .map((value: string) => value.trim())
         .filter(Boolean)
     }
 
-    const rows = this.getRows()
+    const rows = this.getRows(value)
     if (rows.length > 0 && rows[0] && typeof rows[0] === 'object') {
       return Object.keys(rows[0])
     }
@@ -154,6 +265,8 @@ export class ${name}Component extends ${name}Gen {
   }
 
   formatHeader(value: string) {
+    const configured = this.getColumnLabel(value)
+    if (configured) return configured
     return value
       .replace(/[_-]/g, ' ')
       .replace(/([a-z])([A-Z])/g, '$1 $2')
@@ -205,20 +318,64 @@ export class ${name}Component extends ${name}Gen {
     return String(value)
   }
 
-  getObjectRows() {
-    const value = this.unwrapResult(this.result)
+  getCardImage(row: any) {
+    if (!row || typeof row !== 'object') return ''
+    const directKeys = ['thumbnail', 'image', 'avatar', 'photo', 'picture']
+    for (const key of directKeys) {
+      if (typeof row[key] === 'string') return row[key]
+    }
+    if (Array.isArray(row.images) && row.images.length) {
+      return row.images[0]
+    }
+    return ''
+  }
+
+  getCardTitle(row: any) {
+    if (!row || typeof row !== 'object') return 'Item'
+    return (
+      row.title ??
+      row.name ??
+      row.label ??
+      row.id ??
+      'Item'
+    )
+  }
+
+  getCardSubtitle(row: any) {
+    if (!row || typeof row !== 'object') return ''
+    return (
+      row.description ??
+      row.category ??
+      row.brand ??
+      ''
+    )
+  }
+
+  formatError(error: any) {
+    if (!error) return ''
+    if (typeof error === 'string') return error
+    if (typeof error?.message === 'string') return error.message
+    try {
+      return JSON.stringify(error)
+    } catch {
+      return String(error)
+    }
+  }
+
+  getObjectRows(raw?: any) {
+    const value = this.unwrapResult(raw ?? this.result$.value)
     if (!value || typeof value !== 'object' || Array.isArray(value)) {
       return []
     }
     return this.flattenObject(value)
   }
 
-  hasObjectRows() {
-    return this.getObjectRows().length > 0
+  hasObjectRows(raw?: any) {
+    return this.getObjectRows(raw).length > 0
   }
 
-  isSingleValue() {
-    const value = this.unwrapResult(this.result)
+  isSingleValue(raw?: any) {
+    const value = this.unwrapResult(raw ?? this.result$.value)
     return (
       value !== null &&
       value !== undefined &&
@@ -275,7 +432,8 @@ export class ${name}Component extends ${name}Gen {
   }
 
 }
-`);
+`;
+    fs_1.default.writeFileSync(componentPath, generatedComponentSource);
     /**
      * 2️⃣ Arquivo gerado (sempre sobrescreve)
      */
@@ -283,6 +441,7 @@ export class ${name}Component extends ${name}Gen {
     fs_1.default.writeFileSync(genTsPath, `
 import { FormBuilder, FormGroup, Validators } from '@angular/forms'
 import { Injectable } from '@angular/core'
+import { BehaviorSubject } from 'rxjs'
 import { ${name}Service } from './${fileBase}.service.gen'
 
 @Injectable()
@@ -295,8 +454,8 @@ export class ${name}Gen {
   schema: any
 
   loading = false
-  result: any = null
-  error: any = null
+  readonly result$ = new BehaviorSubject<any>(null)
+  readonly error$ = new BehaviorSubject<any>(null)
 
   constructor(
     protected fb: FormBuilder,
@@ -506,163 +665,1695 @@ export class ${name}Service {
         formFields,
         actionLabel,
         method,
-        hasForm: formFields.length > 0
+        hasForm: formFields.length > 0,
+        responseFormat
     }));
     /**
      * 5️⃣ SCSS base
      */
     const scssPath = path_1.default.join(featureDir, `${fileBase}.component.scss`);
-    fs_1.default.writeFileSync(scssPath, `
-:host {
-  display: block;
-  padding: 24px;
-  min-height: 100vh;
+    fs_1.default.writeFileSync(scssPath, buildBaseScss());
+    return {
+        path: toRouteSegment(name),
+        component: `${name}Component`,
+        folder,
+        fileBase
+    };
 }
+function generateAdminFeature(schema, schemaByOpId, featuresRoot, generatedRoot, schemasRoot) {
+    const smart = schema?.meta?.intelligent ?? {};
+    const adminOpId = String(schema?.api?.operationId || '');
+    const name = toPascalCase(adminOpId);
+    const folder = toFolderName(name);
+    const fileBase = toFileBase(name);
+    const featureDir = path_1.default.join(generatedRoot, folder);
+    fs_1.default.mkdirSync(featureDir, { recursive: true });
+    const appRoot = path_1.default.resolve(featuresRoot, '..');
+    ensureUiComponents(appRoot, schemasRoot);
+    const listOpId = smart.listOperationId;
+    const detailOpId = smart.detailOperationId;
+    const updateOpId = smart.updateOperationId;
+    const deleteOpId = smart.deleteOperationId;
+    const listSchema = listOpId ? schemaByOpId.get(listOpId) : null;
+    const detailSchema = detailOpId ? schemaByOpId.get(detailOpId) : null;
+    const updateSchema = updateOpId ? schemaByOpId.get(updateOpId) : null;
+    const deleteSchema = deleteOpId ? schemaByOpId.get(deleteOpId) : null;
+    const listName = listOpId ? toPascalCase(listOpId) : '';
+    const detailName = detailOpId ? toPascalCase(detailOpId) : '';
+    const updateName = updateOpId ? toPascalCase(updateOpId) : '';
+    const deleteName = deleteOpId ? toPascalCase(deleteOpId) : '';
+    const listFileBase = listOpId ? toFileBase(listName) : '';
+    const detailFileBase = detailOpId ? toFileBase(detailName) : '';
+    const updateFileBase = updateOpId ? toFileBase(updateName) : '';
+    const deleteFileBase = deleteOpId ? toFileBase(deleteName) : '';
+    const listFolder = listOpId ? toFolderName(listName) : '';
+    const detailFolder = detailOpId ? toFolderName(detailName) : '';
+    const updateFolder = updateOpId ? toFolderName(updateName) : '';
+    const deleteFolder = deleteOpId ? toFolderName(deleteName) : '';
+    const listServicePath = listOpId
+        ? buildRelativeImportPath(featureDir, path_1.default.join(generatedRoot, listFolder, `${listFileBase}.service.gen`))
+        : '';
+    const deleteServicePath = deleteOpId
+        ? buildRelativeImportPath(featureDir, path_1.default.join(generatedRoot, deleteFolder, `${deleteFileBase}.service.gen`))
+        : '';
+    const title = smart.label || `${schema.entity || 'Admin'}`;
+    const subtitle = listSchema?.api?.endpoint
+        ? `GET ${listSchema.api.endpoint}`
+        : 'Admin list';
+    const idParam = detailSchema?.api?.pathParams?.[0]?.name ??
+        smart.idParam ??
+        'id';
+    const detailRoute = detailOpId
+        ? normalizeRoutePath(detailOpId)
+        : '';
+    const updateRoute = updateOpId
+        ? normalizeRoutePath(updateOpId)
+        : '';
+    const componentPath = path_1.default.join(featureDir, `${fileBase}.component.ts`);
+    const hasDelete = Boolean(deleteOpId);
+    const hasEdit = Boolean(updateOpId);
+    const hasDetail = Boolean(detailOpId);
+    const uiCardImport = buildRelativeImportPath(featureDir, path_1.default.join(appRoot, 'ui', 'ui-card', 'ui-card.component'));
+    const uiButtonImport = buildRelativeImportPath(featureDir, path_1.default.join(appRoot, 'ui', 'ui-button', 'ui-button.component'));
+    const uiCheckboxImport = buildRelativeImportPath(featureDir, path_1.default.join(appRoot, 'ui', 'ui-checkbox', 'ui-checkbox.component'));
+    const uiInputImport = buildRelativeImportPath(featureDir, path_1.default.join(appRoot, 'ui', 'ui-input', 'ui-input.component'));
+    const uiTextareaImport = buildRelativeImportPath(featureDir, path_1.default.join(appRoot, 'ui', 'ui-textarea', 'ui-textarea.component'));
+    const uiSelectImport = buildRelativeImportPath(featureDir, path_1.default.join(appRoot, 'ui', 'ui-select', 'ui-select.component'));
+    const uiSearchImport = buildRelativeImportPath(featureDir, path_1.default.join(appRoot, 'ui', 'ui-search', 'ui-search.component'));
+    const uiBadgeImport = buildRelativeImportPath(featureDir, path_1.default.join(appRoot, 'ui', 'ui-badge', 'ui-badge.component'));
+    const uiStatCardImport = buildRelativeImportPath(featureDir, path_1.default.join(appRoot, 'ui', 'ui-stat-card', 'ui-stat-card.component'));
+    const schemaImportPath = buildSchemaImportPath(featureDir, schemasRoot, toSafeFileName(adminOpId));
+    const generatedAdminComponentSource = `
+import { Component, OnDestroy, OnInit, AfterViewInit } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { Router } from '@angular/router'
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms'
+import { UiCardComponent } from '${uiCardImport}'
+import { UiButtonComponent } from '${uiButtonImport}'
+import { UiCheckboxComponent } from '${uiCheckboxImport}'
+import { UiInputComponent } from '${uiInputImport}'
+import { UiTextareaComponent } from '${uiTextareaImport}'
+import { UiSelectComponent } from '${uiSelectImport}'
+import { UiSearchComponent } from '${uiSearchImport}'
+import { UiBadgeComponent } from '${uiBadgeImport}'
+import { UiStatCardComponent } from '${uiStatCardImport}'
+import { ${listName}Service } from '${listServicePath}'
+${hasDelete ? `import { ${deleteName}Service } from '${deleteServicePath}'` : ''}
+import { BehaviorSubject, forkJoin } from 'rxjs'
+import screenSchema from '${schemaImportPath}'
 
-.page {
-  display: grid;
-  gap: 16px;
-  min-height: calc(100vh - 48px);
-}
+@Component({
+  selector: 'app-${toKebab(name)}',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    UiCardComponent,
+    UiButtonComponent,
+    UiSelectComponent,
+    UiCheckboxComponent,
+    UiInputComponent,
+    UiTextareaComponent,
+    UiSearchComponent,
+    UiBadgeComponent,
+    UiStatCardComponent
+  ],
+  templateUrl: './${fileBase}.component.html',
+  styleUrls: ['./${fileBase}.component.scss']
+})
+export class ${name}Component implements OnInit, AfterViewInit, OnDestroy {
+  private readonly onFocus = () => {
+    if (!this.loading) {
+      this.refresh()
+    }
+  }
+  private readonly onVisibility = () => {
+    if (
+      typeof document !== 'undefined' &&
+      document.visibilityState === 'visible'
+    ) {
+      this.refresh()
+    }
+  }
 
-.screen-description {
-  margin: 0 0 18px;
-  color: #6b7280;
-  font-size: 14px;
-  line-height: 1.5;
-}
+  loading = false
+  readonly result$ = new BehaviorSubject<any>(null)
+  readonly error$ = new BehaviorSubject<any>(null)
+  schema = screenSchema as any
+  selected = new Set<any>()
+  confirmIds: any[] = []
+  searchTerm = ''
+  private hasInitialLoad = false
 
-.form-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: 16px;
-  width: 100%;
-  max-width: 960px;
-  margin: 0 auto;
-}
+  constructor(
+    private router: Router,
+    private listService: ${listName}Service
+    ${hasDelete ? `, private deleteService: ${deleteName}Service` : ''}
+  ) {
+  }
 
-.form-field {
-  display: grid;
-  gap: 8px;
-}
+  ngOnInit() {
+    this.setupAutoRefresh()
+    this.ensureInitialLoad()
+    this.setupAutoRefreshListeners()
+  }
 
-.field-error {
-  color: #ef4444;
-  font-size: 12px;
-  margin-top: -4px;
-}
+  ngAfterViewInit() {
+    this.ensureInitialLoad()
+  }
 
-.actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 14px;
-  margin-top: 20px;
-  flex-wrap: wrap;
-}
+  ngOnDestroy() {
+    if (typeof window !== 'undefined') {
+      window.removeEventListener('focus', this.onFocus)
+    }
+    if (typeof document !== 'undefined') {
+      document.removeEventListener('visibilitychange', this.onVisibility)
+    }
+  }
 
-.result {
-  margin-top: 20px;
-  padding: 16px;
-  border-radius: 12px;
-  background: #0f172a;
-  color: #e2e8f0;
-  font-size: 12px;
-  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.25);
-  overflow: auto;
-}
+  private setupAutoRefresh() {
+    this.load()
+  }
 
-.result-table {
-  margin-top: 20px;
-  max-width: 100%;
-  overflow: auto;
-  border-radius: 16px;
-  border: 1px solid #e2e8f0;
-  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
-  -webkit-overflow-scrolling: touch;
-}
+  private setupAutoRefreshListeners() {
+    if (typeof window !== 'undefined') {
+      window.addEventListener('focus', this.onFocus)
+    }
+    if (typeof document !== 'undefined') {
+      document.addEventListener('visibilitychange', this.onVisibility)
+    }
+  }
 
-.result-card {
-  margin-top: 20px;
-  border-radius: 16px;
-  border: 1px solid #e2e8f0;
-  background: #ffffff;
-  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
-  padding: 18px;
-}
+  private ensureInitialLoad() {
+    if (this.hasInitialLoad) return
+    this.hasInitialLoad = true
+    this.load()
+  }
 
-.result-card__grid {
-  display: grid;
-  gap: 12px;
-}
+  load() {
+    if (this.loading) return
+    this.loading = true
+    this.error$.next(null)
+    this.listService
+      .execute({}, {}, {})
+      .subscribe({
+        next: (result: any) => {
+          const normalized =
+            result && typeof result === 'object' && 'body' in result
+              ? (result as any).body
+              : result
+          this.result$.next(normalized)
+          this.loading = false
+        },
+        error: (error: any) => {
+          this.error$.next(error)
+          this.loading = false
+        }
+      })
+  }
 
-.result-card__row {
-  display: flex;
-  justify-content: space-between;
-  gap: 16px;
-  border-bottom: 1px solid #e2e8f0;
-  padding-bottom: 10px;
-}
+  refresh() {
+    this.load()
+  }
 
-.result-card__row:last-child {
-  border-bottom: none;
-  padding-bottom: 0;
-}
+  onSearch(value: string) {
+    this.searchTerm = value
+  }
 
-.result-card__label {
-  font-weight: 600;
-  color: #475569;
-  font-size: 12px;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
+  isArrayResult(raw?: any) {
+    return this.getVisibleRows(raw).length > 0
+  }
 
-.result-card__value {
-  color: #0f172a;
-  font-weight: 600;
-  text-align: right;
-}
+  getRows(raw?: any) {
+    const value = this.unwrapResult(raw ?? this.result$.value)
+    if (Array.isArray(value)) return value
+    if (!value || typeof value !== 'object') return []
 
-.result-error {
-  margin-top: 24px;
-  padding: 16px 18px;
-  border-radius: 16px;
-  border: 1px solid rgba(239, 68, 68, 0.3);
-  background: #fff1f2;
-  color: #881337;
-  box-shadow: 0 10px 24px rgba(239, 68, 68, 0.15);
-  display: grid;
-  gap: 8px;
-}
+    const commonKeys = ['data', 'items', 'results', 'list', 'records', 'products']
+    for (const key of commonKeys) {
+      if (Array.isArray(value[key])) return value[key]
+    }
 
-.result-error__body {
-  font-size: 13px;
-  color: #7f1d1d;
-  word-break: break-word;
-}
+    const found = this.findFirstArray(value, 0, 5)
+    return found ?? []
+  }
 
-.result-raw {
-  margin-top: 24px;
-  padding: 16px 18px;
-  border-radius: 16px;
-  border: 1px dashed rgba(15, 23, 42, 0.18);
-  background: #f8fafc;
-  color: #0f172a;
-  display: grid;
-  gap: 10px;
-}
+  getVisibleRows(raw?: any) {
+    const rows = this.getRows(raw)
+    const term = this.searchTerm.trim().toLowerCase()
+    if (!term) return rows
+    return rows.filter(row => this.matchesSearch(row, term))
+  }
 
-.result-raw summary {
-  cursor: pointer;
-  font-weight: 600;
-  color: #334155;
-}
+  private getConfiguredColumns() {
+    const columns = this.schema?.data?.table?.columns
+    if (!Array.isArray(columns)) return []
+    return columns
+      .map((entry: any) => {
+        if (typeof entry === 'string') {
+          return { key: entry, label: '', visible: true }
+        }
+        if (entry && typeof entry === 'object') {
+          const key = String(
+            entry.key ?? entry.id ?? entry.column ?? ''
+          ).trim()
+          if (!key) return null
+          const label =
+            typeof entry.label === 'string' ? entry.label : ''
+          const visible = entry.visible !== false
+          return { key, label, visible }
+        }
+        return null
+      })
+      .filter(Boolean) as Array<{ key: string; label: string; visible: boolean }>
+  }
 
-.result-raw pre {
-  margin: 0;
-  padding: 12px;
-  border-radius: 12px;
-  background: #ffffff;
-  border: 1px solid rgba(15, 23, 42, 0.08);
+  private getColumnLabel(value: string) {
+    const configured = this.getConfiguredColumns()
+    const match = configured.find(column => column.key === value)
+    return match?.label ?? ''
+  }
+
+  getColumns(raw?: any) {
+    const configured = this.getConfiguredColumns()
+    if (configured.length) {
+      return configured
+        .filter(column => column.visible)
+        .map(column => column.key)
+    }
+
+    const rows = this.getRows(raw)
+    if (rows.length > 0 && rows[0] && typeof rows[0] === 'object') {
+      return Object.keys(rows[0])
+    }
+    return []
+  }
+
+  formatHeader(value: string) {
+    const configured = this.getColumnLabel(value)
+    if (configured) return configured
+    return value
+      .replace(/[_-]/g, ' ')
+      .replace(/([a-z])([A-Z])/g, '$1 $2')
+      .replace(/\\b\\w/g, char => char.toUpperCase())
+  }
+
+  getCellValue(row: any, column: string) {
+    if (!row || !column) return ''
+
+    if (column.includes('.')) {
+      return column
+        .split('.')
+        .reduce((acc, key) => (acc ? acc[key] : undefined), row) ?? ''
+    }
+
+    const value = row[column]
+    return this.formatValue(value)
+  }
+
+  isImageCell(row: any, column: string) {
+    const value = this.getCellValue(row, column)
+    return (
+      typeof value === 'string' &&
+      /^https?:\\/\\//.test(value) &&
+      /(\\.png|\\.jpg|\\.jpeg|\\.svg)/i.test(value)
+    )
+  }
+
+  formatValue(value: any): string {
+    if (value === null || value === undefined) return ''
+    if (typeof value === 'string' || typeof value === 'number') {
+      return String(value)
+    }
+    if (typeof value === 'boolean') {
+      return value ? 'Yes' : 'No'
+    }
+    if (Array.isArray(value)) {
+      return value
+        .map((item: any) => this.formatValue(item))
+        .join(', ')
+    }
+    if (typeof value === 'object') {
+      if (typeof value.common === 'string') return value.common
+      if (typeof value.official === 'string') return value.official
+      if (typeof value.name === 'string') return value.name
+      if (typeof value.label === 'string') return value.label
+      return JSON.stringify(value)
+    }
+    return String(value)
+  }
+
+  getCardImage(row: any) {
+    if (!row || typeof row !== 'object') return ''
+    const directKeys = ['thumbnail', 'image', 'avatar', 'photo', 'picture']
+    for (const key of directKeys) {
+      if (typeof row[key] === 'string') return row[key]
+    }
+    if (Array.isArray(row.images) && row.images.length) {
+      return row.images[0]
+    }
+    return ''
+  }
+
+  getCardTitle(row: any) {
+    if (!row || typeof row !== 'object') return 'Item'
+    return (
+      row.title ??
+      row.name ??
+      row.label ??
+      row.id ??
+      'Item'
+    )
+  }
+
+  getCardSubtitle(row: any) {
+    if (!row || typeof row !== 'object') return ''
+    return (
+      row.description ??
+      row.category ??
+      row.brand ??
+      ''
+    )
+  }
+
+  formatError(error: any) {
+    if (!error) return ''
+    if (typeof error === 'string') return error
+    if (typeof error?.message === 'string') return error.message
+    try {
+      return JSON.stringify(error)
+    } catch {
+      return String(error)
+    }
+  }
+
+  toggleAll(checked: boolean) {
+    this.selected.clear()
+    if (!checked) return
+    for (const row of this.getVisibleRows()) {
+      const id = this.getRowId(row)
+      if (id !== null && id !== undefined) {
+        this.selected.add(id)
+      }
+    }
+  }
+
+  toggleRow(row: any, checked: boolean) {
+    const id = this.getRowId(row)
+    if (id === null || id === undefined) return
+    if (checked) {
+      this.selected.add(id)
+    } else {
+      this.selected.delete(id)
+    }
+  }
+
+  isSelected(row: any) {
+    const id = this.getRowId(row)
+    if (id === null || id === undefined) return false
+    return this.selected.has(id)
+  }
+
+  openDetail(row: any) {
+    ${hasDetail ? '' : 'return'}
+    const id = this.getRowId(row)
+    if (id === null || id === undefined) return
+    this.router.navigate(['${detailRoute}'], {
+      state: { prefill: { ${idParam}: id }, autoSubmit: true }
+    })
+  }
+
+  openEdit(row: any) {
+    ${hasEdit ? '' : 'return'}
+    this.router.navigate(['${updateRoute}'], {
+      state: { prefill: row }
+    })
+  }
+
+  confirmBulkDelete() {
+    this.confirmDelete([...this.selected])
+  }
+
+  confirmDelete(ids: any[]) {
+    this.confirmIds = ids.filter(
+      id => id !== null && id !== undefined
+    )
+  }
+
+  cancelDelete() {
+    this.confirmIds = []
+  }
+
+  deleteConfirmed() {
+    const ids = [...this.confirmIds]
+    this.confirmIds = []
+    if (!ids.length) return
+    ${hasDelete ? `const calls = ids.map(id => this.deleteService.execute({ ${idParam}: id }, {}, {}))` : 'const calls: any[] = []'}
+    if (!calls.length) return
+    forkJoin(calls).subscribe({
+      next: () => {
+        this.removeFromResult(ids)
+        ids.forEach(id => this.selected.delete(id))
+      },
+      error: error => {
+        this.error$.next(error)
+      }
+    })
+  }
+
+  getRowId(row: any) {
+    if (!row || typeof row !== 'object') return null
+    if (row['${idParam}'] !== undefined) return row['${idParam}']
+    if (row['id'] !== undefined) return row['id']
+    return null
+  }
+
+  getStatusVariant(row: any): 'success' | 'warning' | 'danger' | 'neutral' {
+    const raw = this.getStatusValue(row)
+    const value = String(raw ?? '').toLowerCase()
+    if (/active|ok|success|instock|available/.test(value)) return 'success'
+    if (/warning|low|pending|draft/.test(value)) return 'warning'
+    if (/error|inactive|disabled|out|blocked|archived/.test(value)) return 'danger'
+    return 'neutral'
+  }
+
+  getStatusLabel(row: any) {
+    const raw = this.getStatusValue(row)
+    if (raw === null || raw === undefined || raw === '') return 'Unknown'
+    return this.formatValue(raw)
+  }
+
+  getStatusValue(row: any, key?: string) {
+    if (key && row && typeof row === 'object') {
+      return row[key]
+    }
+    return (
+      row?.status ??
+      row?.paymentStatus ??
+      row?.availabilityStatus ??
+      row?.state ??
+      row?.stockStatus ??
+      row?.result
+    )
+  }
+
+  isStatusColumn(column: string) {
+    return /status|state|availability/i.test(column)
+  }
+
+  isIdColumn(column: string) {
+    return /(^id$)|(_id$)|(Id$)/.test(column)
+  }
+
+  isMethodColumn(column: string) {
+    return /method|paymentMethod/i.test(column)
+  }
+
+  isDateColumn(column: string) {
+    return /date|createdAt|updatedAt|timestamp/i.test(column)
+  }
+
+  formatMethod(value: any) {
+    const raw = String(value ?? '')
+    if (!raw) return ''
+    const labels: Record<string, string> = {
+      credit_card: 'Cartão de Crédito',
+      bank_transfer: 'Transferência Bancária',
+      pix: 'PIX'
+    }
+    return labels[raw] ?? this.formatValue(raw)
+  }
+
+  formatDateValue(value: any) {
+    if (!value) return ''
+    const date = new Date(String(value))
+    if (Number.isNaN(date.getTime())) return this.formatValue(value)
+    return date.toLocaleDateString('pt-BR', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    })
+  }
+
+  formatCurrency(value: number) {
+    try {
+      return new Intl.NumberFormat('pt-BR', {
+        style: 'currency',
+        currency: 'BRL'
+      }).format(value)
+    } catch {
+      return 'R$ ' + value.toFixed(2)
+    }
+  }
+
+  getStatusKey(raw?: any) {
+    const configured = this.getConfiguredColumns().map(column => column.key)
+    const candidates = configured.length
+      ? configured
+      : this.getColumns(raw)
+    const match = candidates.find(column => this.isStatusColumn(column))
+    return match ?? ''
+  }
+
+  getStatusLabelValue(value: string) {
+    const normalized = value.toLowerCase()
+    const labels: Record<string, string> = {
+      completed: 'Concluído',
+      pending: 'Pendente',
+      failed: 'Falhou',
+      active: 'Ativo',
+      inactive: 'Inativo'
+    }
+    if (labels[normalized]) return labels[normalized]
+    return value
+      .replace(/[_-]/g, ' ')
+      .replace(/\\b\\w/g, char => char.toUpperCase())
+  }
+
+  getStatusSummary(raw?: any) {
+    const rows = this.getVisibleRows(raw)
+    if (!rows.length) return []
+    const key = this.getStatusKey(raw)
+    if (!key) return []
+
+    const buckets = new Map<
+      string,
+      { key: string; label: string; variant: 'success' | 'warning' | 'danger' | 'neutral'; count: number; total: number }
+    >()
+
+    for (const row of rows) {
+      const rawValue = this.getStatusValue(row, key)
+      if (rawValue === null || rawValue === undefined || rawValue === '') {
+        continue
+      }
+      const value = String(rawValue)
+      const normalized = value.toLowerCase()
+      const current = buckets.get(normalized) ?? {
+        key: normalized,
+        label: this.getStatusLabelValue(value),
+        variant: this.getStatusVariant({ [key]: normalized }),
+        count: 0,
+        total: 0
+      }
+      current.count += 1
+      current.total += this.getAmountValue(row)
+      buckets.set(normalized, current)
+    }
+
+    return Array.from(buckets.values()).sort(
+      (a, b) => b.count - a.count
+    )
+  }
+
+  getAmountValue(row: any) {
+    const candidates = ['amount', 'total', 'price', 'value', 'paidAmount']
+    for (const key of candidates) {
+      const raw = row?.[key]
+      const num = Number(raw)
+      if (Number.isFinite(num)) return num
+    }
+    return 0
+  }
+
+
+  private unwrapResult(value: any) {
+    if (!value || typeof value !== 'object') return value
+    if (Object.prototype.hasOwnProperty.call(value, 'data')) {
+      return value.data
+    }
+    if (Object.prototype.hasOwnProperty.call(value, 'result')) {
+      return value.result
+    }
+    if (Object.prototype.hasOwnProperty.call(value, 'body')) {
+      return value.body
+    }
+    return value
+  }
+
+  private removeFromResult(ids: any[]) {
+    const value = this.unwrapResult(this.result$.value)
+    if (Array.isArray(value)) {
+      this.result$.next(value.filter(item => !ids.includes(this.getRowId(item))))
+      return
+    }
+
+    if (!value || typeof value !== 'object') return
+    const key = this.findArrayKey(value)
+    if (!key) return
+    const nextArray = (value[key] as any[]).filter(
+      item => !ids.includes(this.getRowId(item))
+    )
+    this.result$.next({ ...value, [key]: nextArray })
+  }
+
+  private findArrayKey(value: Record<string, any>) {
+    const commonKeys = ['data', 'items', 'results', 'list', 'records', 'products']
+    for (const key of commonKeys) {
+      if (Array.isArray(value[key])) return key
+    }
+    for (const key of Object.keys(value)) {
+      if (Array.isArray(value[key])) return key
+    }
+    return null
+  }
+
+  private matchesSearch(row: any, term: string) {
+    if (!row || typeof row !== 'object') return false
+    const values = Object.values(row)
+    for (const value of values) {
+      const normalized = this.formatValue(value).toLowerCase()
+      if (normalized.includes(term)) return true
+    }
+    return false
+  }
+
+  private findFirstArray(
+    value: any,
+    depth: number,
+    maxDepth: number
+  ): any[] | null {
+    if (!value || depth > maxDepth) return null
+    if (Array.isArray(value)) return value
+    if (typeof value !== 'object') return null
+
+    for (const key of Object.keys(value)) {
+      const found = this.findFirstArray(value[key], depth + 1, maxDepth)
+      if (found) return found
+    }
+    return null
+  }
+}
+`;
+    fs_1.default.writeFileSync(componentPath, generatedAdminComponentSource);
+    const htmlPath = path_1.default.join(featureDir, `${fileBase}.component.html`);
+    const responseFormat = resolveResponseFormat(schema);
+    const useCards = responseFormat === 'cards';
+    const useRaw = responseFormat === 'raw';
+    fs_1.default.writeFileSync(htmlPath, `
+<div class="page">
+  <div class="admin-header">
+    <div>
+      <div class="admin-title">
+        <span class="admin-icon"></span>
+        <span>${escapeAttr(title)}</span>
+      </div>
+      <div class="admin-subtitle">${escapeAttr(subtitle)}</div>
+    </div>
+    <div class="admin-actions">
+      <ui-button variant="ghost" (click)="refresh()">Atualizar</ui-button>
+      ${hasDelete ? '<ui-button variant="danger" [disabled]="!selected.size" (click)="confirmBulkDelete()">Excluir selecionados</ui-button>' : ''}
+    </div>
+  </div>
+
+  <div class="admin-summary" *ngIf="getStatusSummary(result$ | async).length">
+    <ui-stat-card
+      *ngFor="let item of getStatusSummary(result$ | async)"
+      [title]="item.label"
+      [value]="item.total > 0 ? formatCurrency(item.total) : (item.count + '')"
+      [meta]="item.count + ' registros'"
+    >
+      <span class="stat-icon" [class.success]="item.variant === 'success'" [class.warning]="item.variant === 'warning'" [class.danger]="item.variant === 'danger'"></span>
+    </ui-stat-card>
+  </div>
+
+  <ui-card>
+    <div class="admin-toolbar">
+      <ui-search
+        [value]="searchTerm"
+        [placeholder]="'Buscar...'"
+        (valueChange)="onSearch($event)"
+      ></ui-search>
+      <div class="admin-toolbar__meta">
+        <ui-badge variant="neutral">
+          {{ getVisibleRows(result$ | async).length }} registros
+        </ui-badge>
+      </div>
+    </div>
+
+  <ng-container *ngIf="error$ | async as error">
+    <div class="result-error" *ngIf="error">
+      <strong>Request failed.</strong>
+      <div class="result-error__body">
+        {{ formatError(error) }}
+      </div>
+    </div>
+  </ng-container>
+
+  <ng-container *ngIf="result$ | async as result">
+    ${useRaw ? `
+    <details class="result-raw" *ngIf="result">
+      <summary>Raw response</summary>
+      <pre>{{ result | json }}</pre>
+    </details>
+    ` : useCards ? `
+    <div class="result-cards" *ngIf="isArrayResult(result)">
+      <article class="card-tile" *ngFor="let row of getVisibleRows(result)">
+        <div class="card-media" *ngIf="getCardImage(row)">
+          <img [src]="getCardImage(row)" [alt]="getCardTitle(row)" />
+        </div>
+        <div class="card-body">
+          <div class="card-header">
+            ${hasDelete ? '<input type="checkbox" [checked]="isSelected(row)" (click)="$event.stopPropagation()" (change)="toggleRow(row, $event.target.checked)" />' : ''}
+            <h3 class="card-title">{{ getCardTitle(row) }}</h3>
+            <ui-badge [variant]="getStatusVariant(row)">
+              {{ getStatusLabel(row) }}
+            </ui-badge>
+          </div>
+          <p class="card-subtitle" *ngIf="getCardSubtitle(row)">
+            {{ getCardSubtitle(row) }}
+          </p>
+          <div class="card-actions" (click)="$event.stopPropagation()">
+            ${hasDetail ? '<button class="link" type="button" (click)="openDetail(row)">Details</button>' : ''}
+            ${hasEdit ? '<button class="link" type="button" (click)="openEdit(row)">Edit</button>' : ''}
+            ${hasDelete ? '<button class="link danger" type="button" (click)="confirmDelete([getRowId(row)])">Delete</button>' : ''}
+          </div>
+        </div>
+      </article>
+    </div>
+    ` : `
+    <div class="result-table" *ngIf="isArrayResult(result)">
+      <table class="data-table">
+        <thead>
+          <tr>
+            ${hasDelete ? '<th class="select-cell"><input type="checkbox" (change)="toggleAll($event.target.checked)" /></th>' : ''}
+            <th *ngFor="let column of getColumns(result)">
+              {{ formatHeader(column) }}
+            </th>
+            ${hasDetail || hasEdit || hasDelete ? '<th class="actions-cell">Actions</th>' : ''}
+          </tr>
+        </thead>
+        <tbody>
+          <tr *ngFor="let row of getVisibleRows(result)" (click)="openDetail(row)">
+            ${hasDelete ? '<td class="select-cell"><input type="checkbox" [checked]="isSelected(row)" (click)="$event.stopPropagation()" (change)="toggleRow(row, $event.target.checked)" /></td>' : ''}
+            <td *ngFor="let column of getColumns(result)">
+              <img
+                *ngIf="isImageCell(row, column)"
+                [src]="getCellValue(row, column)"
+                [alt]="formatHeader(column)"
+                class="cell-image"
+              />
+              <ng-container *ngIf="!isImageCell(row, column)">
+                <span *ngIf="isStatusColumn(column)" class="cell-status">
+                  <ui-badge [variant]="getStatusVariant(row)">
+                    {{ getStatusLabel(row) }}
+                  </ui-badge>
+                </span>
+                <span *ngIf="isIdColumn(column) && !isStatusColumn(column)" class="code-pill">
+                  {{ getCellValue(row, column) }}
+                </span>
+                <span *ngIf="isMethodColumn(column) && !isStatusColumn(column) && !isIdColumn(column)">
+                  {{ formatMethod(getCellValue(row, column)) }}
+                </span>
+                <span *ngIf="isDateColumn(column) && !isStatusColumn(column) && !isIdColumn(column) && !isMethodColumn(column)">
+                  {{ formatDateValue(getCellValue(row, column)) }}
+                </span>
+                <span *ngIf="!isStatusColumn(column) && !isIdColumn(column) && !isMethodColumn(column) && !isDateColumn(column)">
+                  {{ getCellValue(row, column) }}
+                </span>
+              </ng-container>
+            </td>
+            ${hasDetail || hasEdit || hasDelete ? `<td class="actions-cell">
+              <div class="row-actions" (click)="$event.stopPropagation()">
+                ${hasDetail ? '<button class="link" type="button" (click)="openDetail(row)">Details</button>' : ''}
+                ${hasEdit ? '<button class="link" type="button" (click)="openEdit(row)">Edit</button>' : ''}
+                ${hasDelete ? '<button class="link danger" type="button" (click)="confirmDelete([getRowId(row)])">Delete</button>' : ''}
+              </div>
+            </td>` : ''}
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    `}
+
+    ${!useRaw ? `
+    <details class="result-raw" *ngIf="result">
+      <summary>Raw response</summary>
+      <pre>{{ result | json }}</pre>
+    </details>
+    ` : ''}
+  </ng-container>
+
+  </ui-card>
+
+  <div class="confirm-backdrop" *ngIf="confirmIds.length">
+    <div class="confirm-modal">
+      <h3>Confirm delete</h3>
+      <p>Are you sure you want to delete the selected item(s)? This action cannot be undone.</p>
+      <div class="actions">
+        <ui-button variant="ghost" (click)="cancelDelete()">Cancel</ui-button>
+        <ui-button variant="danger" (click)="deleteConfirmed()">Delete</ui-button>
+      </div>
+    </div>
+  </div>
+</div>
+`);
+    const scssPath = path_1.default.join(featureDir, `${fileBase}.component.scss`);
+    fs_1.default.writeFileSync(scssPath, `${buildBaseScss()}
+
+.admin-toolbar {
+  display: grid;
+  gap: 12px;
+  margin-bottom: 14px;
+}
+
+.admin-toolbar__meta {
+  display: inline-flex;
+  justify-content: flex-end;
+}
+
+.admin-actions {
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 0;
+}
+
+.admin-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.admin-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--bg-ink);
+}
+
+.admin-icon {
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
+  box-shadow: 0 8px 20px rgba(114, 157, 191, 0.2);
+  display: inline-block;
+}
+
+.admin-subtitle {
+  margin-top: 6px;
+  font-size: 13px;
+  color: var(--color-muted);
+}
+
+.admin-summary {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 12px;
+}
+
+.stat-icon {
+  width: 14px;
+  height: 14px;
+  border-radius: 999px;
+  display: inline-block;
+}
+
+.stat-icon.success {
+  background: #34d399;
+}
+
+.stat-icon.warning {
+  background: #fbbf24;
+}
+
+.stat-icon.danger {
+  background: #f87171;
+}
+
+.code-pill {
+  font-family: "DM Sans", "Segoe UI", sans-serif;
+  font-size: 11px;
+  background: #eef2f7;
+  color: #334155;
+  padding: 4px 8px;
+  border-radius: 6px;
+  display: inline-block;
+}
+
+.cell-status {
+  display: inline-flex;
+  align-items: center;
+}
+
+.row-actions {
+  display: inline-flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.row-actions .link {
+  background: none;
+  border: none;
+  color: #2563eb;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 0;
+}
+
+.row-actions .link.danger {
+  color: #dc2626;
+}
+
+.select-cell {
+  width: 48px;
+}
+
+.actions-cell {
+  white-space: nowrap;
+}
+
+.confirm-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.45);
+  display: grid;
+  place-items: center;
+  z-index: 50;
+}
+
+.confirm-modal {
+  background: #ffffff;
+  border-radius: 18px;
+  padding: 20px 22px;
+  width: min(380px, 92vw);
+  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
+  display: grid;
+  gap: 12px;
+}
+
+.confirm-modal h3 {
+  margin: 0;
+  font-size: 18px;
+}
+
+.confirm-modal p {
+  margin: 0;
+  color: #475569;
+  font-size: 14px;
+}
+`);
+    return {
+        path: toRouteSegment(adminOpId),
+        component: `${name}Component`,
+        folder,
+        fileBase
+    };
+}
+function normalizeFields(fields) {
+    return fields.map(field => ({
+        name: field.name,
+        type: field.type || 'string',
+        required: Boolean(field.required),
+        label: field.label || toLabel(field.name),
+        placeholder: field.placeholder || toPlaceholder(field.name),
+        hint: field.hint || undefined,
+        info: field.info || undefined,
+        options: field.options || null,
+        defaultValue: field.defaultValue ?? null,
+        source: 'body'
+    }));
+}
+function normalizeQueryParams(params) {
+    return params.map(param => {
+        const labelText = param.label || param.name;
+        const hintText = param.hint ||
+            (typeof labelText === 'string' && labelText.length > 60
+                ? labelText
+                : '');
+        const help = resolveFieldHelp(hintText, labelText);
+        return {
+            name: param.name,
+            type: param.type || 'string',
+            required: Boolean(param.required),
+            label: toLabel(param.name),
+            placeholder: param.placeholder || toPlaceholder(param.name),
+            hint: help.hint,
+            info: help.info,
+            options: param.options || null,
+            defaultValue: param.defaultValue ?? null,
+            source: 'query'
+        };
+    });
+}
+function extractPathParams(endpoint) {
+    const params = [];
+    const regex = /{([^}]+)}/g;
+    let match = regex.exec(endpoint);
+    while (match) {
+        params.push(match[1]);
+        match = regex.exec(endpoint);
+    }
+    return params;
+}
+function buildFormControls(fields) {
+    if (fields.length === 0)
+        return '';
+    return fields
+        .map(field => {
+        const value = field.defaultValue !== null && field.defaultValue !== undefined
+            ? JSON.stringify(field.defaultValue)
+            : defaultValueFor(field.type);
+        const validators = field.required ? ', Validators.required' : '';
+        return `    ${field.name}: [${value}${validators}]`;
+    })
+        .join(',\n');
+}
+function defaultValueFor(type) {
+    switch (type) {
+        case 'array':
+            return '[]';
+        case 'boolean':
+            return 'false';
+        case 'number':
+        case 'integer':
+            return 'null';
+        default:
+            return "''";
+    }
+}
+function toLabel(value) {
+    return stripDiacritics(String(value))
+        .replace(/[_-]/g, ' ')
+        .replace(/([a-z])([A-Z])/g, '$1 $2')
+        .replace(/\b\w/g, char => char.toUpperCase());
+}
+function toPlaceholder(value) {
+    return toLabel(value);
+}
+function stripDiacritics(value) {
+    return value
+        .normalize('NFD')
+        .replace(/[\u0300-\u036f]/g, '');
+}
+function normalizeWhitespace(value) {
+    return String(value).replace(/\s+/g, ' ').trim();
+}
+function resolveFieldHelp(rawHint, label) {
+    const hint = normalizeWhitespace(rawHint || '');
+    if (!hint)
+        return { hint: undefined, info: undefined };
+    if (hint.length > 120) {
+        return { hint: undefined, info: hint };
+    }
+    return { hint, info: undefined };
+}
+function escapeAttr(value) {
+    return String(value).replace(/"/g, '&quot;');
+}
+function defaultActionLabel(method, hasParams) {
+    switch (method) {
+        case 'get':
+            return hasParams ? 'Search' : 'Load';
+        case 'post':
+            return 'Criar';
+        case 'put':
+        case 'patch':
+            return 'Salvar';
+        case 'delete':
+            return 'Excluir';
+        default:
+            return 'Executar';
+    }
+}
+function resolveResponseFormat(schema) {
+    const candidate = String(schema?.meta?.responseFormat ??
+        schema?.response?.format ??
+        schema?.meta?.view ??
+        'table')
+        .trim()
+        .toLowerCase();
+    if (candidate === 'cards')
+        return 'cards';
+    if (candidate === 'raw')
+        return 'raw';
+    return 'table';
+}
+function buildComponentHtml(options) {
+    const buttonVariant = options.method === 'delete' ? 'danger' : 'primary';
+    const useCards = options.responseFormat === 'cards';
+    const useRaw = options.responseFormat === 'raw';
+    if (!options.hasForm) {
+        return `
+<div class="page">
+  <ui-card title="${options.title}" subtitle="${options.subtitle}">
+    <div class="actions">
+      <ui-button
+        variant="${buttonVariant}"
+        [disabled]="form.invalid"
+        (click)="submit()"
+      >
+        ${options.actionLabel}
+      </ui-button>
+    </div>
+  </ui-card>
+
+  ${useRaw ? `
+  <ng-container *ngIf="error$ | async as error">
+    <div class="result-error" *ngIf="error">
+      <strong>Request failed.</strong>
+      <div class="result-error__body">
+        {{ formatError(error) }}
+      </div>
+    </div>
+  </ng-container>
+
+  <ng-container *ngIf="result$ | async as result">
+    <details class="result-raw" *ngIf="result">
+      <summary>Raw response</summary>
+      <pre>{{ result | json }}</pre>
+    </details>
+  </ng-container>
+  ` : useCards ? `
+  <ng-container *ngIf="error$ | async as error">
+    <div class="result-error" *ngIf="error">
+      <strong>Request failed.</strong>
+      <div class="result-error__body">
+        {{ formatError(error) }}
+      </div>
+    </div>
+  </ng-container>
+
+  <ng-container *ngIf="result$ | async as result">
+    <div class="result-cards" *ngIf="isArrayResult(result)">
+      <article class="card-tile" *ngFor="let row of getRows(result)">
+        <div class="card-media" *ngIf="getCardImage(row)">
+          <img [src]="getCardImage(row)" [alt]="getCardTitle(row)" />
+        </div>
+        <div class="card-body">
+          <h3 class="card-title">{{ getCardTitle(row) }}</h3>
+          <p class="card-subtitle" *ngIf="getCardSubtitle(row)">
+            {{ getCardSubtitle(row) }}
+          </p>
+        </div>
+      </article>
+    </div>
+
+    <details class="result-raw" *ngIf="result">
+      <summary>Raw response</summary>
+      <pre>{{ result | json }}</pre>
+    </details>
+  </ng-container>
+  ` : `
+  <ng-container *ngIf="error$ | async as error">
+    <div class="result-error" *ngIf="error">
+      <strong>Request failed.</strong>
+      <div class="result-error__body">
+        {{ formatError(error) }}
+      </div>
+    </div>
+  </ng-container>
+
+  <ng-container *ngIf="result$ | async as result">
+    <div class="result-table" *ngIf="isArrayResult(result)">
+      <table class="data-table">
+        <thead>
+          <tr>
+            <th *ngFor="let column of getColumns(result)">
+              {{ formatHeader(column) }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr *ngFor="let row of getRows(result)">
+            <td *ngFor="let column of getColumns(result)">
+              <img
+                *ngIf="isImageCell(row, column)"
+                [src]="getCellValue(row, column)"
+                [alt]="formatHeader(column)"
+                class="cell-image"
+              />
+              <span *ngIf="!isImageCell(row, column)">
+                {{ getCellValue(row, column) }}
+              </span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div class="result-card" *ngIf="!isArrayResult(result) && hasObjectRows(result)">
+      <div class="result-card__grid">
+        <div class="result-card__row" *ngFor="let row of getObjectRows(result)">
+          <span class="result-card__label">
+            {{ formatHeader(row.key) }}
+          </span>
+          <span class="result-card__value">
+            {{ row.value }}
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <div class="result-single" *ngIf="!isArrayResult(result) && isSingleValue(result)">
+      <strong>Result</strong>
+      <div class="result-single__value">
+        {{ formatValue(result) }}
+      </div>
+    </div>
+
+    <details class="result-raw" *ngIf="result">
+      <summary>Raw response</summary>
+      <pre>{{ result | json }}</pre>
+    </details>
+  </ng-container>
+  `}
+</div>
+`;
+    }
+    return `
+<div class="page">
+  <ui-card [title]="schema.entity || schema.api.operationId" [subtitle]="schema.api.method.toUpperCase() + ' ' + schema.api.endpoint">
+    <p class="screen-description" *ngIf="schema.description">
+      {{ schema.description }}
+    </p>
+    <form [formGroup]="form" (ngSubmit)="submit()">
+      <div class="form-grid">
+        <div class="form-field" *ngFor="let field of formFields">
+          <ui-select
+            *ngIf="isSelect(field)"
+            [label]="field.label || field.name"
+            [hint]="field.hint"
+            [info]="field.info"
+            [controlName]="field.name"
+            [options]="getSelectOptions(field)"
+            [invalid]="isInvalid(field)"
+          ></ui-select>
+
+          <ui-textarea
+            *ngIf="isTextarea(field)"
+            [label]="field.label || field.name"
+            [hint]="field.hint"
+            [info]="field.info"
+            [controlName]="field.name"
+            [rows]="3"
+            [placeholder]="field.placeholder || field.label || field.name"
+            [invalid]="isInvalid(field)"
+          ></ui-textarea>
+
+          <ui-checkbox
+            *ngIf="isCheckbox(field)"
+            [label]="field.label || field.name"
+            [hint]="field.hint"
+            [info]="field.info"
+            [controlName]="field.name"
+            [invalid]="isInvalid(field)"
+          ></ui-checkbox>
+
+          <ui-input
+            *ngIf="!isSelect(field) && !isTextarea(field) && !isCheckbox(field)"
+            [label]="field.label || field.name"
+            [hint]="field.hint"
+            [info]="field.info"
+            [type]="inputType(field)"
+            [controlName]="field.name"
+            [placeholder]="field.placeholder || field.label || field.name"
+            [invalid]="isInvalid(field)"
+          ></ui-input>
+
+          <span class="field-error" *ngIf="isInvalid(field)">
+            Required field
+          </span>
+        </div>
+      </div>
+      <div class="actions">
+        <ui-button
+          type="submit"
+          variant="${buttonVariant}"
+          [disabled]="form.invalid"
+        >
+          ${options.actionLabel}
+        </ui-button>
+      </div>
+    </form>
+  </ui-card>
+
+  ${useRaw ? `
+  <ng-container *ngIf="error$ | async as error">
+    <div class="result-error" *ngIf="error">
+      <strong>Request failed.</strong>
+      <div class="result-error__body">
+        {{ formatError(error) }}
+      </div>
+    </div>
+  </ng-container>
+
+  <ng-container *ngIf="result$ | async as result">
+    <details class="result-raw" *ngIf="result">
+      <summary>Raw response</summary>
+      <pre>{{ result | json }}</pre>
+    </details>
+  </ng-container>
+  ` : useCards ? `
+  <ng-container *ngIf="error$ | async as error">
+    <div class="result-error" *ngIf="error">
+      <strong>Request failed.</strong>
+      <div class="result-error__body">
+        {{ formatError(error) }}
+      </div>
+    </div>
+  </ng-container>
+
+  <ng-container *ngIf="result$ | async as result">
+    <div class="result-cards" *ngIf="isArrayResult(result)">
+      <article class="card-tile" *ngFor="let row of getRows(result)">
+        <div class="card-media" *ngIf="getCardImage(row)">
+          <img [src]="getCardImage(row)" [alt]="getCardTitle(row)" />
+        </div>
+        <div class="card-body">
+          <h3 class="card-title">{{ getCardTitle(row) }}</h3>
+          <p class="card-subtitle" *ngIf="getCardSubtitle(row)">
+            {{ getCardSubtitle(row) }}
+          </p>
+        </div>
+      </article>
+    </div>
+
+    <details class="result-raw" *ngIf="result">
+      <summary>Raw response</summary>
+      <pre>{{ result | json }}</pre>
+    </details>
+  </ng-container>
+  ` : `
+  <ng-container *ngIf="error$ | async as error">
+    <div class="result-error" *ngIf="error">
+      <strong>Request failed.</strong>
+      <div class="result-error__body">
+        {{ formatError(error) }}
+      </div>
+    </div>
+  </ng-container>
+
+  <ng-container *ngIf="result$ | async as result">
+    <div class="result-table" *ngIf="isArrayResult(result)">
+      <table class="data-table">
+        <thead>
+          <tr>
+            <th *ngFor="let column of getColumns(result)">
+              {{ formatHeader(column) }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr *ngFor="let row of getRows(result)">
+            <td *ngFor="let column of getColumns(result)">
+              <img
+                *ngIf="isImageCell(row, column)"
+                [src]="getCellValue(row, column)"
+                [alt]="formatHeader(column)"
+                class="cell-image"
+              />
+              <span *ngIf="!isImageCell(row, column)">
+                {{ getCellValue(row, column) }}
+              </span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div class="result-card" *ngIf="!isArrayResult(result) && hasObjectRows(result)">
+      <div class="result-card__grid">
+        <div class="result-card__row" *ngFor="let row of getObjectRows(result)">
+          <span class="result-card__label">
+            {{ formatHeader(row.key) }}
+          </span>
+          <span class="result-card__value">
+            {{ row.value }}
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <div class="result-single" *ngIf="!isArrayResult(result) && isSingleValue(result)">
+      <strong>Result</strong>
+      <div class="result-single__value">
+        {{ formatValue(result) }}
+      </div>
+    </div>
+
+    <details class="result-raw" *ngIf="result">
+      <summary>Raw response</summary>
+      <pre>{{ result | json }}</pre>
+    </details>
+  </ng-container>
+  `}
+</div>
+`;
+}
+function buildBaseScss() {
+    return `
+:host {
+  display: block;
+  padding: 24px;
+  min-height: 100vh;
+}
+
+.page {
+  display: grid;
+  gap: 16px;
+  min-height: calc(100vh - 48px);
+  min-width: 0;
+}
+
+.screen-description {
+  margin: 0 0 18px;
+  color: #6b7280;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px;
+  width: 100%;
+  max-width: 960px;
+  margin: 0 auto;
+  min-width: 0;
+}
+
+.form-field {
+  display: grid;
+  gap: 8px;
+  min-width: 0;
+}
+
+.field-error {
+  color: #ef4444;
+  font-size: 12px;
+  margin-top: -4px;
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 14px;
+  margin-top: 20px;
+  flex-wrap: wrap;
+}
+
+.result {
+  margin-top: 20px;
+  padding: 16px;
+  border-radius: 12px;
+  background: #0f172a;
+  color: #e2e8f0;
+  font-size: 12px;
+  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.25);
+  overflow: auto;
+}
+
+.result-table {
+  margin-top: 20px;
+  max-width: 100%;
+  overflow: auto;
+  border-radius: 16px;
+  border: 1px solid #e2e8f0;
+  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
+  -webkit-overflow-scrolling: touch;
+}
+
+.result-card {
+  margin-top: 20px;
+  border-radius: 16px;
+  border: 1px solid #e2e8f0;
+  background: #ffffff;
+  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
+  padding: 18px;
+}
+
+.result-card__grid {
+  display: grid;
+  gap: 12px;
+}
+
+.result-card__row {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  border-bottom: 1px solid #e2e8f0;
+  padding-bottom: 10px;
+}
+
+.result-card__row:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.result-card__label {
+  font-weight: 600;
+  color: #475569;
+  font-size: 12px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.result-card__value {
+  color: #0f172a;
+  font-weight: 600;
+  text-align: right;
+}
+
+.result-cards {
+  margin-top: 20px;
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+}
+
+.card-tile {
+  background: #ffffff;
+  border-radius: 18px;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  box-shadow: 0 18px 32px rgba(15, 23, 42, 0.08);
+  overflow: hidden;
+  display: grid;
+  gap: 12px;
+}
+
+.card-media img {
+  width: 100%;
+  height: 160px;
+  object-fit: cover;
+  display: block;
+}
+
+.card-body {
+  padding: 14px 16px 16px;
+  display: grid;
+  gap: 8px;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.card-header input[type='checkbox'] {
+  width: 22px;
+  height: 22px;
+  border-radius: 8px;
+  border: 2px solid var(--color-border);
+  background: #ffffff;
+  box-shadow: 0 8px 18px rgba(99, 102, 241, 0.12);
+  accent-color: var(--color-primary-strong);
+  cursor: pointer;
+}
+
+.card-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.card-subtitle {
+  margin: 0;
+  font-size: 13px;
+  color: #64748b;
+}
+
+.card-actions {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.card-actions .link {
+  border: 1px solid rgba(15, 23, 42, 0.12);
+  background: #ffffff;
+  color: #0f172a;
+  font-weight: 600;
+  font-size: 12px;
+  padding: 6px 12px;
+  border-radius: 999px;
+  cursor: pointer;
+  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
+}
+
+.card-actions .link:hover {
+  background: #f8fafc;
+  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
+  transform: translateY(-1px);
+}
+
+.card-actions .link.danger {
+  border-color: rgba(239, 68, 68, 0.35);
+  color: #b91c1c;
+  background: #fff1f2;
+}
+
+.card-actions .link.danger:hover {
+  background: #ffe4e6;
+}
+
+.result-error {
+  margin-top: 24px;
+  padding: 16px 18px;
+  border-radius: 16px;
+  border: 1px solid rgba(239, 68, 68, 0.3);
+  background: #fff1f2;
+  color: #881337;
+  box-shadow: 0 10px 24px rgba(239, 68, 68, 0.15);
+  display: grid;
+  gap: 8px;
+}
+
+.result-error__body {
+  font-size: 13px;
+  color: #7f1d1d;
+  word-break: break-word;
+}
+
+.result-raw {
+  margin-top: 24px;
+  padding: 16px 18px;
+  border-radius: 16px;
+  border: 1px dashed rgba(15, 23, 42, 0.18);
+  background: #f8fafc;
+  color: #0f172a;
+  display: grid;
+  gap: 10px;
+}
+
+.result-raw summary {
+  cursor: pointer;
+  font-weight: 600;
+  color: #334155;
+}
+
+.result-raw pre {
+  margin: 0;
+  padding: 12px;
+  border-radius: 12px;
+  background: #ffffff;
+  border: 1px solid rgba(15, 23, 42, 0.08);
   font-size: 12px;
   line-height: 1.4;
   white-space: pre-wrap;
@@ -739,343 +2430,27 @@ export class ${name}Service {
   min-height: 0;
 }
 
-@media (max-width: 720px) {
-  :host {
-    padding: 18px;
-  }
-
+@media (max-width: 1024px) {
   .form-grid {
-    grid-template-columns: 1fr;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
     max-width: 100%;
   }
-
-  .actions {
-    justify-content: stretch;
-  }
-}
-`);
-    return {
-        path: toRouteSegment(name),
-        component: `${name}Component`,
-        folder,
-        fileBase
-    };
-}
-function normalizeFields(fields) {
-    return fields.map(field => ({
-        name: field.name,
-        type: field.type || 'string',
-        required: Boolean(field.required),
-        label: field.label || toLabel(field.name),
-        placeholder: field.placeholder || toPlaceholder(field.name),
-        hint: field.hint || undefined,
-        info: field.info || undefined,
-        options: field.options || null,
-        defaultValue: field.defaultValue ?? null,
-        source: 'body'
-    }));
-}
-function normalizeQueryParams(params) {
-    return params.map(param => {
-        const labelText = param.label || param.name;
-        const hintText = param.hint ||
-            (typeof labelText === 'string' && labelText.length > 60
-                ? labelText
-                : '');
-        const help = resolveFieldHelp(hintText, labelText);
-        return {
-            name: param.name,
-            type: param.type || 'string',
-            required: Boolean(param.required),
-            label: toLabel(param.name),
-            placeholder: param.placeholder || toPlaceholder(param.name),
-            hint: help.hint,
-            info: help.info,
-            options: param.options || null,
-            defaultValue: param.defaultValue ?? null,
-            source: 'query'
-        };
-    });
-}
-function extractPathParams(endpoint) {
-    const params = [];
-    const regex = /{([^}]+)}/g;
-    let match = regex.exec(endpoint);
-    while (match) {
-        params.push(match[1]);
-        match = regex.exec(endpoint);
-    }
-    return params;
-}
-function buildFormControls(fields) {
-    if (fields.length === 0)
-        return '';
-    return fields
-        .map(field => {
-        const value = field.defaultValue !== null && field.defaultValue !== undefined
-            ? JSON.stringify(field.defaultValue)
-            : defaultValueFor(field.type);
-        const validators = field.required ? ', Validators.required' : '';
-        return `    ${field.name}: [${value}${validators}]`;
-    })
-        .join(',\n');
-}
-function defaultValueFor(type) {
-    switch (type) {
-        case 'array':
-            return '[]';
-        case 'boolean':
-            return 'false';
-        case 'number':
-        case 'integer':
-            return 'null';
-        default:
-            return "''";
-    }
-}
-function toLabel(value) {
-    return String(value)
-        .replace(/[_-]/g, ' ')
-        .replace(/([a-z])([A-Z])/g, '$1 $2')
-        .replace(/\b\w/g, char => char.toUpperCase());
-}
-function toPlaceholder(value) {
-    return toLabel(value);
-}
-function normalizeWhitespace(value) {
-    return String(value).replace(/\s+/g, ' ').trim();
-}
-function resolveFieldHelp(rawHint, label) {
-    const hint = normalizeWhitespace(rawHint || '');
-    if (!hint)
-        return { hint: undefined, info: undefined };
-    if (hint.length > 120) {
-        return { hint: undefined, info: hint };
-    }
-    return { hint, info: undefined };
-}
-function escapeAttr(value) {
-    return String(value).replace(/"/g, '&quot;');
-}
-function defaultActionLabel(method, hasParams) {
-    switch (method) {
-        case 'get':
-            return hasParams ? 'Buscar' : 'Carregar';
-        case 'post':
-            return 'Criar';
-        case 'put':
-        case 'patch':
-            return 'Salvar';
-        case 'delete':
-            return 'Excluir';
-        default:
-            return 'Executar';
-    }
 }
-function buildComponentHtml(options) {
-    const buttonVariant = options.method === 'delete' ? 'danger' : 'primary';
-    if (!options.hasForm) {
-        return `
-<div class="page">
-  <ui-card title="${options.title}" subtitle="${options.subtitle}">
-    <div class="actions">
-      <ui-button
-        variant="${buttonVariant}"
-        [disabled]="form.invalid"
-        (click)="submit()"
-      >
-        ${options.actionLabel}
-      </ui-button>
-    </div>
-  </ui-card>
-
-  <div class="result-table" *ngIf="isArrayResult()">
-    <table class="data-table">
-      <thead>
-        <tr>
-          <th *ngFor="let column of getColumns()">
-            {{ formatHeader(column) }}
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr *ngFor="let row of getRows()">
-          <td *ngFor="let column of getColumns()">
-            <img
-              *ngIf="isImageCell(row, column)"
-              [src]="getCellValue(row, column)"
-              [alt]="formatHeader(column)"
-              class="cell-image"
-            />
-            <span *ngIf="!isImageCell(row, column)">
-              {{ getCellValue(row, column) }}
-            </span>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-
-  <div class="result-error" *ngIf="error">
-    <strong>Request failed.</strong>
-    <div class="result-error__body">
-      {{ error?.message || (error | json) }}
-    </div>
-  </div>
-
-  <div class="result-card" *ngIf="!isArrayResult() && hasObjectRows()">
-    <div class="result-card__grid">
-      <div class="result-card__row" *ngFor="let row of getObjectRows()">
-        <span class="result-card__label">
-          {{ formatHeader(row.key) }}
-        </span>
-        <span class="result-card__value">
-          {{ row.value }}
-        </span>
-      </div>
-    </div>
-  </div>
-
-  <div class="result-single" *ngIf="!isArrayResult() && isSingleValue()">
-    <strong>Result</strong>
-    <div class="result-single__value">
-      {{ formatValue(result) }}
-    </div>
-  </div>
-
-  <details class="result-raw" *ngIf="result">
-    <summary>Raw response</summary>
-    <pre>{{ result | json }}</pre>
-  </details>
-</div>
-`;
-    }
-    return `
-<div class="page">
-  <ui-card [title]="schema.entity || schema.api.operationId" [subtitle]="schema.api.method.toUpperCase() + ' ' + schema.api.endpoint">
-    <p class="screen-description" *ngIf="schema.description">
-      {{ schema.description }}
-    </p>
-    <form [formGroup]="form" (ngSubmit)="submit()">
-      <div class="form-grid">
-        <div class="form-field" *ngFor="let field of formFields">
-          <ui-select
-            *ngIf="isSelect(field)"
-            [label]="field.label || field.name"
-            [hint]="field.hint"
-            [info]="field.info"
-            [controlName]="field.name"
-            [options]="getSelectOptions(field)"
-            [invalid]="isInvalid(field)"
-          ></ui-select>
-
-          <ui-textarea
-            *ngIf="isTextarea(field)"
-            [label]="field.label || field.name"
-            [hint]="field.hint"
-            [info]="field.info"
-            [controlName]="field.name"
-            [rows]="3"
-            [placeholder]="field.placeholder || field.label || field.name"
-            [invalid]="isInvalid(field)"
-          ></ui-textarea>
-
-          <ui-checkbox
-            *ngIf="isCheckbox(field)"
-            [label]="field.label || field.name"
-            [hint]="field.hint"
-            [info]="field.info"
-            [controlName]="field.name"
-            [invalid]="isInvalid(field)"
-          ></ui-checkbox>
-
-          <ui-input
-            *ngIf="!isSelect(field) && !isTextarea(field) && !isCheckbox(field)"
-            [label]="field.label || field.name"
-            [hint]="field.hint"
-            [info]="field.info"
-            [type]="inputType(field)"
-            [controlName]="field.name"
-            [placeholder]="field.placeholder || field.label || field.name"
-            [invalid]="isInvalid(field)"
-          ></ui-input>
-
-          <span class="field-error" *ngIf="isInvalid(field)">
-            Campo obrigatório
-          </span>
-        </div>
-      </div>
-      <div class="actions">
-        <ui-button
-          type="submit"
-          variant="${buttonVariant}"
-          [disabled]="form.invalid"
-        >
-          ${options.actionLabel}
-        </ui-button>
-      </div>
-    </form>
-  </ui-card>
-
-  <div class="result-table" *ngIf="isArrayResult()">
-    <table class="data-table">
-      <thead>
-        <tr>
-          <th *ngFor="let column of getColumns()">
-            {{ formatHeader(column) }}
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr *ngFor="let row of getRows()">
-          <td *ngFor="let column of getColumns()">
-            <img
-              *ngIf="isImageCell(row, column)"
-              [src]="getCellValue(row, column)"
-              [alt]="formatHeader(column)"
-              class="cell-image"
-            />
-            <span *ngIf="!isImageCell(row, column)">
-              {{ getCellValue(row, column) }}
-            </span>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-
-  <div class="result-error" *ngIf="error">
-    <strong>Request failed.</strong>
-    <div class="result-error__body">
-      {{ error?.message || (error | json) }}
-    </div>
-  </div>
 
-  <div class="result-card" *ngIf="!isArrayResult() && hasObjectRows()">
-    <div class="result-card__grid">
-      <div class="result-card__row" *ngFor="let row of getObjectRows()">
-        <span class="result-card__label">
-          {{ formatHeader(row.key) }}
-        </span>
-        <span class="result-card__value">
-          {{ row.value }}
-        </span>
-      </div>
-    </div>
-  </div>
+@media (max-width: 820px) {
+  :host {
+    padding: 18px;
+  }
 
-  <div class="result-single" *ngIf="!isArrayResult() && isSingleValue()">
-    <strong>Result</strong>
-    <div class="result-single__value">
-      {{ formatValue(result) }}
-    </div>
-  </div>
+  .form-grid {
+    grid-template-columns: 1fr;
+    max-width: 100%;
+  }
 
-  <details class="result-raw" *ngIf="result">
-    <summary>Raw response</summary>
-    <pre>{{ result | json }}</pre>
-  </details>
-</div>
+  .actions {
+    justify-content: stretch;
+  }
+}
 `;
 }
 function buildFieldHtml(field) {
@@ -1146,11 +2521,11 @@ export class UiCardComponent {
 }
 
 .ui-card {
-  border-radius: 22px;
-  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
-  border: 1px solid rgba(15, 23, 42, 0.08);
-  box-shadow: var(--shadow-card);
-  padding: 30px;
+  border-radius: 12px;
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
+  padding: 24px;
   position: relative;
   overflow: hidden;
 }
@@ -1159,9 +2534,9 @@ export class UiCardComponent {
   content: "";
   position: absolute;
   inset: 0 0 auto 0;
-  height: 6px;
-  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-strong), var(--color-accent));
-  opacity: 0.65;
+  height: 3px;
+  background: linear-gradient(90deg, #1d4ed8, #2563eb);
+  opacity: 0.85;
 }
 
 .ui-card__header {
@@ -1170,19 +2545,20 @@ export class UiCardComponent {
 
 .ui-card__title {
   margin: 0;
-  font-size: 26px;
-  font-weight: 700;
-  color: var(--bg-ink);
+  font-size: 24px;
+  font-weight: 600;
+  color: #0f172a;
   letter-spacing: -0.02em;
+  font-family: "Instrument Serif", Georgia, serif;
 }
 
 .ui-card__subtitle {
   margin: 8px 0 0;
-  font-size: 13px;
-  color: var(--color-muted);
-  letter-spacing: 0.16em;
+  font-size: 11px;
+  color: #64748b;
+  letter-spacing: 0.14em;
   text-transform: uppercase;
-  font-family: "Space Mono", "Courier New", monospace;
+  font-family: "DM Sans", "Segoe UI", sans-serif;
 }
 `
         },
@@ -1218,7 +2594,7 @@ export class UiCardComponent {
     class="ui-menu__group"
     *ngIf="menu.ungrouped.length"
   >
-    <h3 class="ui-menu__group-title">Outros</h3>
+    <h3 class="ui-menu__group-title">Other</h3>
     <a
       class="ui-menu__item"
       *ngFor="let item of menu.ungrouped"
@@ -1241,10 +2617,10 @@ export class UiCardComponent {
   position: sticky;
   top: 24px;
   align-self: flex-start;
-  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
-  border: 1px solid rgba(15, 23, 42, 0.08);
-  box-shadow: var(--shadow-card);
-  border-radius: 22px;
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
+  border-radius: 12px;
   padding: 22px;
   min-width: 220px;
   display: grid;
@@ -1256,7 +2632,7 @@ export class UiCardComponent {
   align-items: center;
   gap: 10px;
   font-weight: 700;
-  color: var(--bg-ink);
+  color: #0f172a;
   font-size: 15px;
 }
 
@@ -1264,8 +2640,8 @@ export class UiCardComponent {
   width: 14px;
   height: 14px;
   border-radius: 999px;
-  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-strong));
-  box-shadow: 0 6px 16px rgba(8, 145, 178, 0.35);
+  background: linear-gradient(135deg, #1d4ed8, #2563eb);
+  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.24);
 }
 
 .ui-menu__group {
@@ -1276,10 +2652,10 @@ export class UiCardComponent {
 .ui-menu__group-title {
   margin: 0;
   font-size: 11px;
-  letter-spacing: 0.3em;
+  letter-spacing: 0.16em;
   text-transform: uppercase;
-  color: var(--color-muted);
-  font-family: "Space Mono", "Courier New", monospace;
+  color: #94a3b8;
+  font-family: "DM Sans", "Segoe UI", sans-serif;
 }
 
 .ui-menu__item {
@@ -1289,8 +2665,8 @@ export class UiCardComponent {
   font-weight: 600;
   color: #1f2937;
   padding: 10px 14px;
-  border-radius: 14px;
-  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+  border-radius: 8px;
+  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
   border: 1px solid transparent;
   white-space: nowrap;
   overflow: hidden;
@@ -1298,14 +2674,15 @@ export class UiCardComponent {
 }
 
 .ui-menu__item:hover {
-  background: #f1f5f9;
+  background: #eff6ff;
   transform: translateX(2px);
+  color: #1d4ed8;
 }
 
 .ui-menu__item.active {
-  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-strong));
+  background: #1e293b;
   color: #ffffff;
-  box-shadow: 0 12px 24px rgba(8, 145, 178, 0.3);
+  box-shadow: 0 10px 24px rgba(30, 41, 59, 0.24);
 }
 
 .ui-menu__item.hidden {
@@ -1378,6 +2755,7 @@ export class UiFieldComponent {
   gap: 10px;
   font-size: 13px;
   color: #1f2937;
+  min-width: 0;
 }
 
 .ui-field__label {
@@ -1393,14 +2771,14 @@ export class UiFieldComponent {
 }
 
 .ui-field__info {
-  margin-left: 8px;
-  width: 18px;
-  height: 18px;
+  margin-left: 6px;
+  width: 16px;
+  height: 16px;
   border-radius: 999px;
-  border: 1px solid rgba(15, 23, 42, 0.2);
+  border: 1px solid var(--color-border);
   background: #ffffff;
-  color: #475569;
-  font-size: 11px;
+  color: var(--color-primary-strong);
+  font-size: 10px;
   line-height: 1;
   display: inline-flex;
   align-items: center;
@@ -1409,30 +2787,34 @@ export class UiFieldComponent {
 }
 
 .ui-field__info:hover {
-  background: #f8fafc;
+  background: #ffffff;
 }
 
 .ui-field__info-panel {
   margin-top: 8px;
   padding: 10px 12px;
-  border-radius: 10px;
-  background: #f8fafc;
-  border: 1px solid #e2e8f0;
+  border-radius: 14px;
+  background: #ffffff;
+  border: 1px solid var(--color-border);
   color: #475569;
   font-size: 12px;
   line-height: 1.4;
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
 }
 
 :host ::ng-deep input,
 :host ::ng-deep textarea {
   width: 100%;
-  min-height: 3.4rem;
-  border-radius: 10px;
-  border: 1px solid rgba(15, 23, 42, 0.12);
+  max-width: 100%;
+  min-width: 0;
+  min-height: 2.9rem;
+  border-radius: 16px;
+  border: 1px solid var(--color-border);
   background: #ffffff;
-  padding: 0.9rem 1.1rem;
-  font-size: 15px;
+  padding: 0.7rem 0.95rem;
+  font-size: 14px;
   font-weight: 500;
+  box-sizing: border-box;
   box-shadow: none;
   outline: none;
   transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
@@ -1440,15 +2822,15 @@ export class UiFieldComponent {
 
 :host ::ng-deep input:focus,
 :host ::ng-deep textarea:focus {
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.2);
+  border-color: var(--color-primary-strong);
+  box-shadow: 0 0 0 4px var(--color-primary-soft);
   transform: translateY(-1px);
 }
 
 :host ::ng-deep input.invalid,
 :host ::ng-deep textarea.invalid {
-  border-color: #ef4444;
-  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.18);
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px var(--color-accent-soft);
 }
 
 :host ::ng-deep input::placeholder,
@@ -1457,12 +2839,15 @@ export class UiFieldComponent {
 }
 
 :host ::ng-deep input[type='checkbox'] {
-  width: 20px;
-  height: 20px;
+  width: 22px;
+  height: 22px;
   padding: 0;
-  border-radius: 6px;
-  box-shadow: none;
-  accent-color: var(--color-primary);
+  border-radius: 8px;
+  border: 2px solid var(--color-border);
+  background: #ffffff;
+  box-shadow: 0 8px 18px rgba(99, 102, 241, 0.12);
+  accent-color: var(--color-primary-strong);
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
 }
 
 .field-error {
@@ -1503,31 +2888,32 @@ export class UiButtonComponent {
 `,
             scss: `
 .ui-button {
-  border: none;
-  border-radius: 999px;
-  padding: 12px 24px;
-  font-weight: 700;
-  font-size: 14px;
-  letter-spacing: 0.02em;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 10px 16px;
+  font-weight: 600;
+  font-size: 13px;
+  letter-spacing: 0.01em;
   cursor: pointer;
   transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
 }
 
 .ui-button.primary {
-  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-strong));
+  background: #2563eb;
   color: #ffffff;
-  box-shadow: 0 12px 24px rgba(8, 145, 178, 0.3);
+  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.24);
 }
 
 .ui-button.ghost {
-  background: #f9fafb;
-  color: #111827;
+  background: #ffffff;
+  color: #334155;
+  border-color: #cbd5e1;
 }
 
 .ui-button.danger {
-  background: linear-gradient(135deg, #ef4444, #f97316);
+  background: #dc2626;
   color: #fff;
-  box-shadow: 0 10px 22px rgba(239, 68, 68, 0.25);
+  box-shadow: 0 8px 20px rgba(220, 38, 38, 0.22);
 }
 
 .ui-button:hover:not(:disabled) {
@@ -1540,6 +2926,211 @@ export class UiButtonComponent {
   cursor: not-allowed;
   box-shadow: none;
 }
+`
+        },
+        {
+            name: 'ui-search',
+            template: `
+import { Component, EventEmitter, Input, Output } from '@angular/core'
+
+@Component({
+  selector: 'ui-search',
+  standalone: true,
+  templateUrl: './ui-search.component.html',
+  styleUrls: ['./ui-search.component.scss']
+})
+export class UiSearchComponent {
+  @Input() value = ''
+  @Input() placeholder = 'Search'
+  @Output() valueChange = new EventEmitter<string>()
+
+  onInput(event: Event) {
+    const target = event.target as HTMLInputElement | null
+    this.valueChange.emit(target?.value ?? '')
+  }
+}
+`,
+            html: `
+<label class="ui-search">
+  <span class="ui-search__icon" aria-hidden="true">⌕</span>
+  <input
+    class="ui-search__input"
+    type="search"
+    [value]="value"
+    [placeholder]="placeholder"
+    (input)="onInput($event)"
+  />
+</label>
+`,
+            scss: `
+:host {
+  display: block;
+  width: 100%;
+}
+
+.ui-search {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 40px;
+  border-radius: 10px;
+  border: 1px solid #d1d5db;
+  background: #ffffff;
+  padding: 0 10px;
+}
+
+.ui-search:focus-within {
+  border-color: #2563eb;
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
+}
+
+.ui-search__icon {
+  color: #64748b;
+  font-size: 13px;
+}
+
+.ui-search__input {
+  border: none;
+  outline: none;
+  width: 100%;
+  font-size: 13px;
+  color: #0f172a;
+  background: transparent;
+}
+
+.ui-search__input::placeholder {
+  color: #94a3b8;
+}
+`
+        },
+        {
+            name: 'ui-stat-card',
+            template: `
+import { Component, Input } from '@angular/core'
+import { NgIf } from '@angular/common'
+
+@Component({
+  selector: 'ui-stat-card',
+  standalone: true,
+  imports: [NgIf],
+  templateUrl: './ui-stat-card.component.html',
+  styleUrls: ['./ui-stat-card.component.scss']
+})
+export class UiStatCardComponent {
+  @Input() title = ''
+  @Input() value = ''
+  @Input() meta = ''
+}
+`,
+            html: `
+<section class="ui-stat-card">
+  <div class="ui-stat-card__top">
+    <div class="ui-stat-card__title">{{ title }}</div>
+    <div class="ui-stat-card__icon">
+      <ng-content></ng-content>
+    </div>
+  </div>
+  <div class="ui-stat-card__value">{{ value }}</div>
+  <div class="ui-stat-card__meta" *ngIf="meta">{{ meta }}</div>
+</section>
+`,
+            scss: `
+:host {
+  display: block;
+}
+
+.ui-stat-card {
+  border-radius: 12px;
+  background: var(--bg-surface);
+  border: 1px solid var(--color-border);
+  padding: 16px;
+  box-shadow: var(--shadow-card);
+  display: grid;
+  gap: 8px;
+}
+
+.ui-stat-card__top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.ui-stat-card__title {
+  font-size: 12px;
+  color: var(--color-muted);
+}
+
+.ui-stat-card__value {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--bg-ink);
+}
+
+.ui-stat-card__meta {
+  font-size: 11px;
+  color: var(--color-muted);
+}
+`
+        },
+        {
+            name: 'ui-badge',
+            template: `
+import { Component, Input } from '@angular/core'
+import { NgClass } from '@angular/common'
+
+@Component({
+  selector: 'ui-badge',
+  standalone: true,
+  imports: [NgClass],
+  templateUrl: './ui-badge.component.html',
+  styleUrls: ['./ui-badge.component.scss']
+})
+export class UiBadgeComponent {
+  @Input() variant: 'success' | 'warning' | 'danger' | 'neutral' = 'neutral'
+}
+`,
+            html: `
+<span class="ui-badge" [ngClass]="variant">
+  <ng-content></ng-content>
+</span>
+`,
+            scss: `
+:host {
+  display: inline-flex;
+}
+
+.ui-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  padding: 4px 10px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+.ui-badge.neutral {
+  color: #334155;
+  background: #eef2ff;
+}
+
+.ui-badge.success {
+  color: #047857;
+  background: #d1fae5;
+}
+
+.ui-badge.warning {
+  color: #92400e;
+  background: #fef3c7;
+}
+
+.ui-badge.danger {
+  color: #991b1b;
+  background: #fee2e2;
+}
 `
         },
         {
@@ -1617,6 +3208,7 @@ export class UiInputComponent {
   gap: 10px;
   font-size: 13px;
   color: #1f2937;
+  min-width: 0;
 }
 
 .ui-control__label {
@@ -1632,14 +3224,14 @@ export class UiInputComponent {
 }
 
 .ui-control__info {
-  margin-left: 8px;
-  width: 18px;
-  height: 18px;
+  margin-left: 6px;
+  width: 16px;
+  height: 16px;
   border-radius: 999px;
-  border: 1px solid rgba(15, 23, 42, 0.2);
+  border: 1px solid var(--color-border);
   background: #ffffff;
-  color: #475569;
-  font-size: 11px;
+  color: var(--color-primary-strong);
+  font-size: 10px;
   line-height: 1;
   display: inline-flex;
   align-items: center;
@@ -1648,43 +3240,47 @@ export class UiInputComponent {
 }
 
 .ui-control__info:hover {
-  background: #f8fafc;
+  background: #ffffff;
 }
 
 .ui-control__info-panel {
   margin-top: 8px;
   padding: 10px 12px;
-  border-radius: 10px;
-  background: #f8fafc;
-  border: 1px solid #e2e8f0;
+  border-radius: 14px;
+  background: #ffffff;
+  border: 1px solid var(--color-border);
   color: #475569;
   font-size: 12px;
   line-height: 1.4;
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
 }
 
 .ui-control__input {
   width: 100%;
-  min-height: 3.4rem;
-  border-radius: 10px;
-  border: 1px solid rgba(15, 23, 42, 0.12);
+  max-width: 100%;
+  min-width: 0;
+  min-height: 2.9rem;
+  border-radius: 14px;
+  border: 1px solid var(--color-border);
   background: #ffffff;
-  padding: 0.9rem 1.1rem;
-  font-size: 15px;
+  padding: 0.7rem 0.95rem;
+  font-size: 14px;
   font-weight: 500;
+  box-sizing: border-box;
   box-shadow: none;
   outline: none;
   transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
 }
 
 .ui-control__input:focus {
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.2);
+  border-color: var(--color-primary-strong);
+  box-shadow: 0 0 0 4px var(--color-primary-soft);
   transform: translateY(-1px);
 }
 
 .ui-control__input.invalid {
-  border-color: #ef4444;
-  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.18);
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px var(--color-accent-soft);
 }
 
 .ui-control__input::placeholder {
@@ -1767,6 +3363,7 @@ export class UiTextareaComponent {
   gap: 10px;
   font-size: 13px;
   color: #1f2937;
+  min-width: 0;
 }
 
 .ui-control__label {
@@ -1782,14 +3379,14 @@ export class UiTextareaComponent {
 }
 
 .ui-control__info {
-  margin-left: 8px;
-  width: 18px;
-  height: 18px;
+  margin-left: 6px;
+  width: 16px;
+  height: 16px;
   border-radius: 999px;
-  border: 1px solid rgba(15, 23, 42, 0.2);
+  border: 1px solid var(--color-border);
   background: #ffffff;
-  color: #475569;
-  font-size: 11px;
+  color: var(--color-primary-strong);
+  font-size: 10px;
   line-height: 1;
   display: inline-flex;
   align-items: center;
@@ -1798,43 +3395,47 @@ export class UiTextareaComponent {
 }
 
 .ui-control__info:hover {
-  background: #f8fafc;
+  background: #ffffff;
 }
 
 .ui-control__info-panel {
   margin-top: 8px;
   padding: 10px 12px;
-  border-radius: 10px;
-  background: #f8fafc;
-  border: 1px solid #e2e8f0;
+  border-radius: 14px;
+  background: #ffffff;
+  border: 1px solid var(--color-border);
   color: #475569;
   font-size: 12px;
   line-height: 1.4;
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
 }
 
 .ui-control__input {
   width: 100%;
-  min-height: 3.4rem;
-  border-radius: 10px;
-  border: 1px solid rgba(15, 23, 42, 0.12);
+  max-width: 100%;
+  min-width: 0;
+  min-height: 2.9rem;
+  border-radius: 14px;
+  border: 1px solid var(--color-border);
   background: #ffffff;
-  padding: 0.9rem 1.1rem;
-  font-size: 15px;
+  padding: 0.7rem 0.95rem;
+  font-size: 14px;
   font-weight: 500;
+  box-sizing: border-box;
   box-shadow: none;
   outline: none;
   transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
 }
 
 .ui-control__input:focus {
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.2);
+  border-color: var(--color-primary-strong);
+  box-shadow: 0 0 0 4px var(--color-primary-soft);
   transform: translateY(-1px);
 }
 
 .ui-control__input.invalid {
-  border-color: #ef4444;
-  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.18);
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px var(--color-accent-soft);
 }
 
 .ui-control__input::placeholder {
@@ -1918,6 +3519,7 @@ export class UiSelectComponent {
   gap: 10px;
   font-size: 13px;
   color: #1f2937;
+  min-width: 0;
 }
 
 .ui-control__label {
@@ -1933,14 +3535,14 @@ export class UiSelectComponent {
 }
 
 .ui-control__info {
-  margin-left: 8px;
-  width: 18px;
-  height: 18px;
+  margin-left: 6px;
+  width: 16px;
+  height: 16px;
   border-radius: 999px;
-  border: 1px solid rgba(15, 23, 42, 0.2);
+  border: 1px solid var(--color-border);
   background: #ffffff;
-  color: #475569;
-  font-size: 11px;
+  color: var(--color-primary-strong);
+  font-size: 10px;
   line-height: 1;
   display: inline-flex;
   align-items: center;
@@ -1949,29 +3551,33 @@ export class UiSelectComponent {
 }
 
 .ui-control__info:hover {
-  background: #f8fafc;
+  background: #ffffff;
 }
 
 .ui-control__info-panel {
   margin-top: 8px;
   padding: 10px 12px;
-  border-radius: 10px;
-  background: #f8fafc;
-  border: 1px solid #e2e8f0;
+  border-radius: 14px;
+  background: #ffffff;
+  border: 1px solid var(--color-border);
   color: #475569;
   font-size: 12px;
   line-height: 1.4;
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
 }
 
 .ui-control__select {
   width: 100%;
-  min-height: 3.4rem;
-  border-radius: 10px;
-  border: 1px solid rgba(15, 23, 42, 0.12);
+  max-width: 100%;
+  min-width: 0;
+  min-height: 2.9rem;
+  border-radius: 14px;
+  border: 1px solid var(--color-border);
   background: #ffffff;
-  padding: 0.9rem 2.6rem 0.9rem 1.1rem;
-  font-size: 15px;
+  padding: 0.7rem 2.3rem 0.7rem 0.95rem;
+  font-size: 14px;
   font-weight: 500;
+  box-sizing: border-box;
   box-shadow: none;
   outline: none;
   transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
@@ -1983,14 +3589,14 @@ export class UiSelectComponent {
 }
 
 .ui-control__select:focus {
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.2);
+  border-color: var(--color-primary-strong);
+  box-shadow: 0 0 0 4px var(--color-primary-soft);
   transform: translateY(-1px);
 }
 
 .ui-control__select.invalid {
-  border-color: #ef4444;
-  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.18);
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px var(--color-accent-soft);
 }
 `
         },
@@ -2066,6 +3672,7 @@ export class UiCheckboxComponent {
   gap: 10px;
   font-size: 13px;
   color: #1f2937;
+  min-width: 0;
 }
 
 .ui-control__label {
@@ -2081,14 +3688,14 @@ export class UiCheckboxComponent {
 }
 
 .ui-control__info {
-  margin-left: 8px;
-  width: 18px;
-  height: 18px;
+  margin-left: 6px;
+  width: 16px;
+  height: 16px;
   border-radius: 999px;
-  border: 1px solid rgba(15, 23, 42, 0.2);
+  border: 1px solid var(--color-border);
   background: #ffffff;
-  color: #475569;
-  font-size: 11px;
+  color: var(--color-primary-strong);
+  font-size: 10px;
   line-height: 1;
   display: inline-flex;
   align-items: center;
@@ -2097,27 +3704,31 @@ export class UiCheckboxComponent {
 }
 
 .ui-control__info:hover {
-  background: #f8fafc;
+  background: #ffffff;
 }
 
 .ui-control__info-panel {
   margin-top: 8px;
   padding: 10px 12px;
-  border-radius: 10px;
-  background: #f8fafc;
-  border: 1px solid #e2e8f0;
+  border-radius: 14px;
+  background: #ffffff;
+  border: 1px solid var(--color-border);
   color: #475569;
   font-size: 12px;
   line-height: 1.4;
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
 }
 
 .ui-control__checkbox {
-  width: 20px;
-  height: 20px;
+  width: 22px;
+  height: 22px;
   padding: 0;
-  border-radius: 6px;
-  box-shadow: none;
-  accent-color: var(--color-primary);
+  border-radius: 8px;
+  border: 2px solid var(--color-border);
+  background: #ffffff;
+  box-shadow: 0 8px 18px rgba(99, 102, 241, 0.12);
+  accent-color: var(--color-primary-strong);
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
 }
 `
         }
@@ -2184,7 +3795,12 @@ function toFolderName(operationId) {
     return toFileBase(operationId);
 }
 function toFileBase(operationId) {
-    return operationId;
+    return String(operationId).replace(/[\\/]/g, '');
+}
+function toSafeFileName(value) {
+    return String(value)
+        .replace(/[\\/]/g, '-')
+        .replace(/\s+/g, '-');
 }
 function toKebab(value) {
     return value
@@ -2201,6 +3817,15 @@ function toPascalCase(value) {
         .map(part => part[0].toUpperCase() + part.slice(1))
         .join('');
 }
+function normalizeRoutePath(value) {
+    const trimmed = String(value ?? '').trim();
+    if (!trimmed)
+        return trimmed;
+    if (trimmed.includes('/'))
+        return trimmed.replace(/^\//, '');
+    const pascal = toPascalCase(trimmed);
+    return toRouteSegment(pascal);
+}
 function buildSchemaImportPath(featureDir, schemasRoot, rawName) {
     const schemaFile = path_1.default.join(schemasRoot, 'overlays', `${rawName}.screen.json`);
     let relativePath = path_1.default.relative(featureDir, schemaFile);