generate-ui-cli 2.1.7 → 2.2.0

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

@@ -14,7 +14,7 @@ function generateFeature(schema, root, schemasRoot) {
     const featureDir = path_1.default.join(root, folder);
     fs_1.default.mkdirSync(featureDir, { recursive: true });
     const appRoot = path_1.default.resolve(root, '..');
-    ensureUiComponents(appRoot);
+    ensureUiComponents(appRoot, schemasRoot);
     const method = String(schema.api.method || '').toLowerCase();
     const endpoint = String(schema.api.endpoint || '');
     const baseUrl = String(schema.api.baseUrl || 'https://api.realworld.io/api');
@@ -54,11 +54,14 @@ function generateFeature(schema, root, schemasRoot) {
     const componentPath = path_1.default.join(featureDir, `${fileBase}.component.ts`);
     fs_1.default.writeFileSync(componentPath, `
 import { Component } from '@angular/core'
-import { JsonPipe, NgFor, NgIf } from '@angular/common'
+import { CommonModule } from '@angular/common'
 import { FormBuilder, ReactiveFormsModule } from '@angular/forms'
 import { UiCardComponent } from '../../ui/ui-card/ui-card.component'
-import { UiFieldComponent } from '../../ui/ui-field/ui-field.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 { ${name}Service } from './${fileBase}.service.gen'
 import { ${name}Gen } from './${fileBase}.gen'
 import screenSchema from '${schemaImportPath}'
@@ -67,13 +70,14 @@ import screenSchema from '${schemaImportPath}'
   selector: 'app-${toKebab(name)}',
   standalone: true,
   imports: [
-    NgIf,
-    NgFor,
-    JsonPipe,
+    CommonModule,
     ReactiveFormsModule,
     UiCardComponent,
-    UiFieldComponent,
-    UiButtonComponent
+    UiButtonComponent,
+    UiSelectComponent,
+    UiCheckboxComponent,
+    UiInputComponent,
+    UiTextareaComponent
   ],
   templateUrl: './${fileBase}.component.html',
   styleUrls: ['./${fileBase}.component.scss']
@@ -100,7 +104,11 @@ export class ${name}Component extends ${name}Gen {
       .execute(pathParams, queryParams, body)
       .subscribe({
         next: result => {
-          this.result = result
+          const normalized =
+            result && typeof result === 'object' && 'body' in result
+              ? (result as any).body
+              : result
+          this.result = normalized
           this.loading = false
         },
         error: error => {
@@ -115,20 +123,17 @@ export class ${name}Component extends ${name}Gen {
   }
 
   getRows() {
-    const value = this.result
+    const value = this.unwrapResult(this.result)
     if (Array.isArray(value)) return value
     if (!value || typeof value !== 'object') return []
 
-    const commonKeys = ['data', 'items', 'results', 'list', 'records']
+    const commonKeys = ['data', 'items', 'results', 'list', 'records', 'products']
     for (const key of commonKeys) {
       if (Array.isArray(value[key])) return value[key]
     }
 
-    for (const key of Object.keys(value)) {
-      if (Array.isArray(value[key])) return value[key]
-    }
-
-    return []
+    const found = this.findFirstArray(value, 0, 5)
+    return found ?? []
   }
 
   getColumns() {
@@ -152,7 +157,7 @@ export class ${name}Component extends ${name}Gen {
     return value
       .replace(/[_-]/g, ' ')
       .replace(/([a-z])([A-Z])/g, '$1 $2')
-      .replace(/\b\w/g, char => char.toUpperCase())
+      .replace(/\\b\\w/g, char => char.toUpperCase())
   }
 
   getCellValue(row: any, column: string) {
@@ -177,7 +182,7 @@ export class ${name}Component extends ${name}Gen {
     )
   }
 
-  private formatValue(value: any): string {
+  formatValue(value: any): string {
     if (value === null || value === undefined) return ''
     if (typeof value === 'string' || typeof value === 'number') {
       return String(value)
@@ -201,13 +206,42 @@ export class ${name}Component extends ${name}Gen {
   }
 
   getObjectRows() {
-    const value = this.result
+    const value = this.unwrapResult(this.result)
     if (!value || typeof value !== 'object' || Array.isArray(value)) {
       return []
     }
     return this.flattenObject(value)
   }
 
+  hasObjectRows() {
+    return this.getObjectRows().length > 0
+  }
+
+  isSingleValue() {
+    const value = this.unwrapResult(this.result)
+    return (
+      value !== null &&
+      value !== undefined &&
+      (typeof value === 'string' ||
+        typeof value === 'number' ||
+        typeof value === 'boolean')
+    )
+  }
+
+  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 flattenObject(
     value: Record<string, any>,
     prefix = ''
@@ -224,6 +258,22 @@ export class ${name}Component extends ${name}Gen {
     return rows
   }
 
+  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
+  }
+
 }
 `);
     /**
@@ -280,10 +330,19 @@ export class ${name}Gen {
   }
 
   protected isSelect(field: any) {
+    if (field?.ui === 'select' || field?.ui === 'dropdown') return true
     return Array.isArray(field.options) && field.options.length > 0
   }
 
+  protected getSelectOptions(field: any) {
+    if (Array.isArray(field.options) && field.options.length > 0) {
+      return field.options
+    }
+    return []
+  }
+
   protected isCheckbox(field: any) {
+    if (field?.ui === 'select' || field?.ui === 'dropdown') return false
     return field.type === 'boolean'
   }
 
@@ -457,11 +516,13 @@ export class ${name}Service {
 :host {
   display: block;
   padding: 24px;
+  min-height: 100vh;
 }
 
 .page {
   display: grid;
   gap: 16px;
+  min-height: calc(100vh - 48px);
 }
 
 .screen-description {
@@ -480,6 +541,17 @@ export class ${name}Service {
   margin: 0 auto;
 }
 
+.form-field {
+  display: grid;
+  gap: 8px;
+}
+
+.field-error {
+  color: #ef4444;
+  font-size: 12px;
+  margin-top: -4px;
+}
+
 .actions {
   display: flex;
   justify-content: flex-end;
@@ -501,10 +573,12 @@ export class ${name}Service {
 
 .result-table {
   margin-top: 20px;
-  overflow: hidden;
+  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 {
@@ -548,8 +622,74 @@ export class ${name}Service {
   text-align: right;
 }
 
+.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;
+  word-break: break-word;
+}
+
+.result-single {
+  margin-top: 24px;
+  padding: 16px 18px;
+  border-radius: 16px;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  background: #ffffff;
+  color: #0f172a;
+  display: grid;
+  gap: 8px;
+  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
+}
+
+.result-single__value {
+  font-size: 18px;
+  font-weight: 700;
+  color: #0f172a;
+}
+
 .data-table {
-  width: 100%;
+  width: max-content;
+  min-width: 100%;
   border-collapse: collapse;
   background: #ffffff;
   font-size: 14px;
@@ -588,6 +728,17 @@ export class ${name}Service {
   box-shadow: 0 6px 12px rgba(15, 23, 42, 0.16);
 }
 
+:host ::ng-deep ui-card .ui-card {
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - 160px);
+}
+
+:host ::ng-deep ui-card .ui-card__body {
+  overflow: auto;
+  min-height: 0;
+}
+
 @media (max-width: 720px) {
   :host {
     padding: 18px;
@@ -737,6 +888,65 @@ function buildComponentHtml(options) {
       </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>
 `;
     }
@@ -748,51 +958,52 @@ function buildComponentHtml(options) {
     </p>
     <form [formGroup]="form" (ngSubmit)="submit()">
       <div class="form-grid">
-        <ui-field
-          *ngFor="let field of formFields"
-          [label]="field.label || field.name"
-          [hint]="field.hint"
-          [info]="field.info"
-        >
-          <select
+        <div class="form-field" *ngFor="let field of formFields">
+          <ui-select
             *ngIf="isSelect(field)"
-            [formControlName]="field.name"
-            [class.invalid]="isInvalid(field)"
-          >
-            <option
-              *ngFor="let option of field.options"
-              [value]="option"
-            >
-              {{ option }}
-            </option>
-          </select>
-
-          <textarea
+            [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)"
-            rows="3"
-            [formControlName]="field.name"
+            [label]="field.label || field.name"
+            [hint]="field.hint"
+            [info]="field.info"
+            [controlName]="field.name"
+            [rows]="3"
             [placeholder]="field.placeholder || field.label || field.name"
-            [class.invalid]="isInvalid(field)"
-          ></textarea>
+            [invalid]="isInvalid(field)"
+          ></ui-textarea>
 
-          <input
+          <ui-checkbox
             *ngIf="isCheckbox(field)"
-            type="checkbox"
-            [formControlName]="field.name"
-          />
-
-          <input
+            [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)"
-            [formControlName]="field.name"
+            [controlName]="field.name"
             [placeholder]="field.placeholder || field.label || field.name"
-            [class.invalid]="isInvalid(field)"
-          />
+            [invalid]="isInvalid(field)"
+          ></ui-input>
 
           <span class="field-error" *ngIf="isInvalid(field)">
             Campo obrigatório
           </span>
-        </ui-field>
+        </div>
       </div>
       <div class="actions">
         <ui-button
@@ -833,7 +1044,14 @@ function buildComponentHtml(options) {
     </table>
   </div>
 
-  <div class="result-card" *ngIf="!isArrayResult() && result">
+  <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">
@@ -845,6 +1063,18 @@ function buildComponentHtml(options) {
       </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>
 `;
 }
@@ -878,7 +1108,7 @@ function httpCallForMethod(method) {
             return 'return this.http.get(url)';
     }
 }
-function ensureUiComponents(appRoot) {
+function ensureUiComponents(appRoot, schemasRoot) {
     const uiRoot = path_1.default.join(appRoot, 'ui');
     const components = [
         {
@@ -916,11 +1146,22 @@ export class UiCardComponent {
 }
 
 .ui-card {
-  border-radius: 20px;
-  background: #ffffff;
-  border: 1px solid #e5e7eb;
-  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
-  padding: 28px;
+  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;
+  position: relative;
+  overflow: hidden;
+}
+
+.ui-card::before {
+  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;
 }
 
 .ui-card__header {
@@ -929,17 +1170,154 @@ export class UiCardComponent {
 
 .ui-card__title {
   margin: 0;
-  font-size: 22px;
+  font-size: 26px;
   font-weight: 700;
-  color: #0f172a;
+  color: var(--bg-ink);
+  letter-spacing: -0.02em;
 }
 
 .ui-card__subtitle {
   margin: 8px 0 0;
-  font-size: 12px;
-  color: #6b7280;
-  letter-spacing: 0.04em;
+  font-size: 13px;
+  color: var(--color-muted);
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  font-family: "Space Mono", "Courier New", monospace;
+}
+`
+        },
+        {
+            name: 'ui-menu',
+            template: '',
+            html: `
+<nav class="ui-menu">
+  <div class="ui-menu__brand">
+    <span class="ui-menu__brand-pill"></span>
+    <span class="ui-menu__brand-title">{{ title }}</span>
+  </div>
+
+  <ng-container *ngFor="let group of menu.groups">
+    <section
+      class="ui-menu__group"
+      *ngIf="!group.hidden && group.items.length"
+    >
+      <h3 class="ui-menu__group-title">{{ group.label }}</h3>
+      <a
+        class="ui-menu__item"
+        *ngFor="let item of group.items"
+        [routerLink]="item.route"
+        routerLinkActive="active"
+        [class.hidden]="item.hidden"
+      >
+        {{ item.label }}
+      </a>
+    </section>
+  </ng-container>
+
+  <section
+    class="ui-menu__group"
+    *ngIf="menu.ungrouped.length"
+  >
+    <h3 class="ui-menu__group-title">Outros</h3>
+    <a
+      class="ui-menu__item"
+      *ngFor="let item of menu.ungrouped"
+      [routerLink]="item.route"
+      routerLinkActive="active"
+      [class.hidden]="item.hidden"
+    >
+      {{ item.label }}
+    </a>
+  </section>
+</nav>
+`,
+            scss: `
+:host {
+  display: block;
+  height: 100%;
+}
+
+.ui-menu {
+  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;
+  padding: 22px;
+  min-width: 220px;
+  display: grid;
+  gap: 22px;
+}
+
+.ui-menu__brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-weight: 700;
+  color: var(--bg-ink);
+  font-size: 15px;
+}
+
+.ui-menu__brand-pill {
+  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);
+}
+
+.ui-menu__group {
+  display: grid;
+  gap: 10px;
+}
+
+.ui-menu__group-title {
+  margin: 0;
+  font-size: 11px;
+  letter-spacing: 0.3em;
   text-transform: uppercase;
+  color: var(--color-muted);
+  font-family: "Space Mono", "Courier New", monospace;
+}
+
+.ui-menu__item {
+  display: block;
+  text-decoration: none;
+  font-size: 14px;
+  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: 1px solid transparent;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ui-menu__item:hover {
+  background: #f1f5f9;
+  transform: translateX(2px);
+}
+
+.ui-menu__item.active {
+  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-strong));
+  color: #ffffff;
+  box-shadow: 0 12px 24px rgba(8, 145, 178, 0.3);
+}
+
+.ui-menu__item.hidden {
+  display: none;
+}
+
+@media (max-width: 900px) {
+  .ui-menu {
+    position: static;
+    width: 100%;
+    min-width: auto;
+  }
 }
 `
         },
@@ -997,15 +1375,16 @@ export class UiFieldComponent {
 
 .ui-field {
   display: grid;
-  gap: 6px;
-  font-size: 12px;
-  color: #374151;
+  gap: 10px;
+  font-size: 13px;
+  color: #1f2937;
 }
 
 .ui-field__label {
   font-weight: 700;
   line-height: 1.4;
   word-break: break-word;
+  letter-spacing: 0.01em;
 }
 
 .ui-field__hint {
@@ -1018,7 +1397,7 @@ export class UiFieldComponent {
   width: 18px;
   height: 18px;
   border-radius: 999px;
-  border: 1px solid #cbd5f5;
+  border: 1px solid rgba(15, 23, 42, 0.2);
   background: #ffffff;
   color: #475569;
   font-size: 11px;
@@ -1045,31 +1424,29 @@ export class UiFieldComponent {
 }
 
 :host ::ng-deep input,
-:host ::ng-deep textarea,
-:host ::ng-deep select {
+:host ::ng-deep textarea {
   width: 100%;
-  min-height: 2.6rem;
-  border-radius: 8px;
-  border: 1px solid #e5e7eb;
+  min-height: 3.4rem;
+  border-radius: 10px;
+  border: 1px solid rgba(15, 23, 42, 0.12);
   background: #ffffff;
-  padding: 0.6rem 0.8rem;
-  font-size: 14px;
+  padding: 0.9rem 1.1rem;
+  font-size: 15px;
   font-weight: 500;
   box-shadow: none;
   outline: none;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
 }
 
 :host ::ng-deep input:focus,
-:host ::ng-deep textarea:focus,
-:host ::ng-deep select:focus {
-  border-color: #6366f1;
-  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
+:host ::ng-deep textarea:focus {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.2);
+  transform: translateY(-1px);
 }
 
 :host ::ng-deep input.invalid,
-:host ::ng-deep textarea.invalid,
-:host ::ng-deep select.invalid {
+:host ::ng-deep textarea.invalid {
   border-color: #ef4444;
   box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.18);
 }
@@ -1079,27 +1456,13 @@ export class UiFieldComponent {
   color: #94a3b8;
 }
 
-:host ::ng-deep select {
-  padding-right: 2.2rem;
-  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'><path d='M1 1.5L7 6.5L13 1.5' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
-  background-repeat: no-repeat;
-  background-position: right 0.7rem center;
-  background-size: 14px 8px;
-  appearance: none;
-}
-
-:host ::ng-deep textarea {
-  min-height: 5.5rem;
-  resize: vertical;
-}
-
 :host ::ng-deep input[type='checkbox'] {
   width: 20px;
   height: 20px;
   padding: 0;
   border-radius: 6px;
   box-shadow: none;
-  accent-color: #6366f1;
+  accent-color: var(--color-primary);
 }
 
 .field-error {
@@ -1141,18 +1504,19 @@ export class UiButtonComponent {
             scss: `
 .ui-button {
   border: none;
-  border-radius: 10px;
-  padding: 12px 22px;
+  border-radius: 999px;
+  padding: 12px 24px;
   font-weight: 700;
   font-size: 14px;
+  letter-spacing: 0.02em;
   cursor: pointer;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
 }
 
 .ui-button.primary {
-  background: linear-gradient(135deg, #6366f1, #818cf8);
+  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-strong));
   color: #ffffff;
-  box-shadow: 0 8px 18px rgba(99, 102, 241, 0.22);
+  box-shadow: 0 12px 24px rgba(8, 145, 178, 0.3);
 }
 
 .ui-button.ghost {
@@ -1163,11 +1527,12 @@ export class UiButtonComponent {
 .ui-button.danger {
   background: linear-gradient(135deg, #ef4444, #f97316);
   color: #fff;
-  box-shadow: 0 8px 18px rgba(239, 68, 68, 0.25);
+  box-shadow: 0 10px 22px rgba(239, 68, 68, 0.25);
 }
 
 .ui-button:hover:not(:disabled) {
   transform: translateY(-1px);
+  filter: brightness(1.02);
 }
 
 .ui-button:disabled {
@@ -1176,39 +1541,641 @@ export class UiButtonComponent {
   box-shadow: none;
 }
 `
-        }
-    ];
-    fs_1.default.mkdirSync(uiRoot, { recursive: true });
-    for (const component of components) {
-        const componentDir = path_1.default.join(uiRoot, component.name);
-        fs_1.default.mkdirSync(componentDir, { recursive: true });
-        const base = component.name;
-        const tsPath = path_1.default.join(componentDir, `${base}.component.ts`);
-        const htmlPath = path_1.default.join(componentDir, `${base}.component.html`);
-        const scssPath = path_1.default.join(componentDir, `${base}.component.scss`);
-        const needsUiFieldUpdate = component.name === 'ui-field';
-        const shouldOverwrite = (filePath, marker) => {
-            if (!fs_1.default.existsSync(filePath))
-                return true;
-            if (needsUiFieldUpdate)
-                return true;
-            if (!marker)
-                return true;
-            const existing = fs_1.default.readFileSync(filePath, 'utf-8');
-            return !existing.includes(marker);
-        };
-        if (shouldOverwrite(tsPath, 'infoOpen')) {
-            fs_1.default.writeFileSync(tsPath, component.template.trimStart());
-        }
-        if (shouldOverwrite(htmlPath, 'ui-field__info-panel')) {
-            fs_1.default.writeFileSync(htmlPath, component.html.trimStart());
-        }
-        if (shouldOverwrite(scssPath, 'ui-field__info-panel')) {
-            fs_1.default.writeFileSync(scssPath, component.scss.trimStart());
-        }
-    }
+        },
+        {
+            name: 'ui-input',
+            template: `
+import { Component, Input } from '@angular/core'
+import { NgIf } from '@angular/common'
+import {
+  ControlContainer,
+  FormGroupDirective,
+  ReactiveFormsModule
+} from '@angular/forms'
+
+@Component({
+  selector: 'ui-input',
+  standalone: true,
+  imports: [NgIf, ReactiveFormsModule],
+  viewProviders: [
+    { provide: ControlContainer, useExisting: FormGroupDirective }
+  ],
+  templateUrl: './ui-input.component.html',
+  styleUrls: ['./ui-input.component.scss']
+})
+export class UiInputComponent {
+  @Input() label = ''
+  @Input() hint = ''
+  @Input() info = ''
+  @Input() controlName = ''
+  @Input() placeholder = ''
+  @Input() type: 'text' | 'number' | 'email' | 'password' | 'search' | 'tel' | 'url' = 'text'
+  @Input() invalid = false
+  infoOpen = false
+
+  toggleInfo(event: MouseEvent) {
+    event.preventDefault()
+    event.stopPropagation()
+    this.infoOpen = !this.infoOpen
+  }
 }
-function toRouteSegment(operationId) {
+`,
+            html: `
+<label class="ui-control">
+  <span class="ui-control__label" *ngIf="label">
+    {{ label }}
+    <button
+      class="ui-control__info"
+      type="button"
+      *ngIf="info"
+      (click)="toggleInfo($event)"
+      [attr.aria-expanded]="infoOpen"
+    >
+      i
+    </button>
+  </span>
+  <div class="ui-control__info-panel" *ngIf="info && infoOpen">
+    {{ info }}
+  </div>
+  <input
+    class="ui-control__input"
+    [type]="type"
+    [formControlName]="controlName"
+    [placeholder]="placeholder"
+    [class.invalid]="invalid"
+  />
+  <span class="ui-control__hint" *ngIf="hint && !info">{{ hint }}</span>
+</label>
+`,
+            scss: `
+:host {
+  display: block;
+}
+
+.ui-control {
+  display: grid;
+  gap: 10px;
+  font-size: 13px;
+  color: #1f2937;
+}
+
+.ui-control__label {
+  font-weight: 700;
+  line-height: 1.4;
+  word-break: break-word;
+  letter-spacing: 0.01em;
+}
+
+.ui-control__hint {
+  color: #94a3b8;
+  font-size: 12px;
+}
+
+.ui-control__info {
+  margin-left: 8px;
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  border: 1px solid rgba(15, 23, 42, 0.2);
+  background: #ffffff;
+  color: #475569;
+  font-size: 11px;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.ui-control__info:hover {
+  background: #f8fafc;
+}
+
+.ui-control__info-panel {
+  margin-top: 8px;
+  padding: 10px 12px;
+  border-radius: 10px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  color: #475569;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.ui-control__input {
+  width: 100%;
+  min-height: 3.4rem;
+  border-radius: 10px;
+  border: 1px solid rgba(15, 23, 42, 0.12);
+  background: #ffffff;
+  padding: 0.9rem 1.1rem;
+  font-size: 15px;
+  font-weight: 500;
+  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);
+  transform: translateY(-1px);
+}
+
+.ui-control__input.invalid {
+  border-color: #ef4444;
+  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.18);
+}
+
+.ui-control__input::placeholder {
+  color: #94a3b8;
+}
+`
+        },
+        {
+            name: 'ui-textarea',
+            template: `
+import { Component, Input } from '@angular/core'
+import { NgIf } from '@angular/common'
+import {
+  ControlContainer,
+  FormGroupDirective,
+  ReactiveFormsModule
+} from '@angular/forms'
+
+@Component({
+  selector: 'ui-textarea',
+  standalone: true,
+  imports: [NgIf, ReactiveFormsModule],
+  viewProviders: [
+    { provide: ControlContainer, useExisting: FormGroupDirective }
+  ],
+  templateUrl: './ui-textarea.component.html',
+  styleUrls: ['./ui-textarea.component.scss']
+})
+export class UiTextareaComponent {
+  @Input() label = ''
+  @Input() hint = ''
+  @Input() info = ''
+  @Input() controlName = ''
+  @Input() placeholder = ''
+  @Input() rows = 3
+  @Input() invalid = false
+  infoOpen = false
+
+  toggleInfo(event: MouseEvent) {
+    event.preventDefault()
+    event.stopPropagation()
+    this.infoOpen = !this.infoOpen
+  }
+}
+`,
+            html: `
+<label class="ui-control">
+  <span class="ui-control__label" *ngIf="label">
+    {{ label }}
+    <button
+      class="ui-control__info"
+      type="button"
+      *ngIf="info"
+      (click)="toggleInfo($event)"
+      [attr.aria-expanded]="infoOpen"
+    >
+      i
+    </button>
+  </span>
+  <div class="ui-control__info-panel" *ngIf="info && infoOpen">
+    {{ info }}
+  </div>
+  <textarea
+    class="ui-control__input"
+    [formControlName]="controlName"
+    [rows]="rows"
+    [placeholder]="placeholder"
+    [class.invalid]="invalid"
+  ></textarea>
+  <span class="ui-control__hint" *ngIf="hint && !info">{{ hint }}</span>
+</label>
+`,
+            scss: `
+:host {
+  display: block;
+}
+
+.ui-control {
+  display: grid;
+  gap: 10px;
+  font-size: 13px;
+  color: #1f2937;
+}
+
+.ui-control__label {
+  font-weight: 700;
+  line-height: 1.4;
+  word-break: break-word;
+  letter-spacing: 0.01em;
+}
+
+.ui-control__hint {
+  color: #94a3b8;
+  font-size: 12px;
+}
+
+.ui-control__info {
+  margin-left: 8px;
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  border: 1px solid rgba(15, 23, 42, 0.2);
+  background: #ffffff;
+  color: #475569;
+  font-size: 11px;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.ui-control__info:hover {
+  background: #f8fafc;
+}
+
+.ui-control__info-panel {
+  margin-top: 8px;
+  padding: 10px 12px;
+  border-radius: 10px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  color: #475569;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.ui-control__input {
+  width: 100%;
+  min-height: 3.4rem;
+  border-radius: 10px;
+  border: 1px solid rgba(15, 23, 42, 0.12);
+  background: #ffffff;
+  padding: 0.9rem 1.1rem;
+  font-size: 15px;
+  font-weight: 500;
+  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);
+  transform: translateY(-1px);
+}
+
+.ui-control__input.invalid {
+  border-color: #ef4444;
+  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.18);
+}
+
+.ui-control__input::placeholder {
+  color: #94a3b8;
+}
+`
+        },
+        {
+            name: 'ui-select',
+            template: `
+import { Component, Input } from '@angular/core'
+import { NgFor, NgIf } from '@angular/common'
+import {
+  ControlContainer,
+  FormGroupDirective,
+  ReactiveFormsModule
+} from '@angular/forms'
+
+@Component({
+  selector: 'ui-select',
+  standalone: true,
+  imports: [NgFor, NgIf, ReactiveFormsModule],
+  viewProviders: [
+    { provide: ControlContainer, useExisting: FormGroupDirective }
+  ],
+  templateUrl: './ui-select.component.html',
+  styleUrls: ['./ui-select.component.scss']
+})
+export class UiSelectComponent {
+  @Input() label = ''
+  @Input() hint = ''
+  @Input() info = ''
+  @Input() controlName = ''
+  @Input() options: any[] = []
+  @Input() invalid = false
+  infoOpen = false
+
+  toggleInfo(event: MouseEvent) {
+    event.preventDefault()
+    event.stopPropagation()
+    this.infoOpen = !this.infoOpen
+  }
+}
+`,
+            html: `
+<label class="ui-control">
+  <span class="ui-control__label" *ngIf="label">
+    {{ label }}
+    <button
+      class="ui-control__info"
+      type="button"
+      *ngIf="info"
+      (click)="toggleInfo($event)"
+      [attr.aria-expanded]="infoOpen"
+    >
+      i
+    </button>
+  </span>
+  <div class="ui-control__info-panel" *ngIf="info && infoOpen">
+    {{ info }}
+  </div>
+  <select
+    class="ui-control__select"
+    [formControlName]="controlName"
+    [class.invalid]="invalid"
+  >
+    <option *ngFor="let option of options" [value]="option">
+      {{ option }}
+    </option>
+  </select>
+  <span class="ui-control__hint" *ngIf="hint && !info">{{ hint }}</span>
+</label>
+`,
+            scss: `
+:host {
+  display: block;
+}
+
+.ui-control {
+  display: grid;
+  gap: 10px;
+  font-size: 13px;
+  color: #1f2937;
+}
+
+.ui-control__label {
+  font-weight: 700;
+  line-height: 1.4;
+  word-break: break-word;
+  letter-spacing: 0.01em;
+}
+
+.ui-control__hint {
+  color: #94a3b8;
+  font-size: 12px;
+}
+
+.ui-control__info {
+  margin-left: 8px;
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  border: 1px solid rgba(15, 23, 42, 0.2);
+  background: #ffffff;
+  color: #475569;
+  font-size: 11px;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.ui-control__info:hover {
+  background: #f8fafc;
+}
+
+.ui-control__info-panel {
+  margin-top: 8px;
+  padding: 10px 12px;
+  border-radius: 10px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  color: #475569;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.ui-control__select {
+  width: 100%;
+  min-height: 3.4rem;
+  border-radius: 10px;
+  border: 1px solid rgba(15, 23, 42, 0.12);
+  background: #ffffff;
+  padding: 0.9rem 2.6rem 0.9rem 1.1rem;
+  font-size: 15px;
+  font-weight: 500;
+  box-shadow: none;
+  outline: none;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'><path d='M1 1.5L7 6.5L13 1.5' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
+  background-repeat: no-repeat;
+  background-position: right 0.9rem center;
+  background-size: 14px 8px;
+  appearance: none;
+}
+
+.ui-control__select:focus {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.2);
+  transform: translateY(-1px);
+}
+
+.ui-control__select.invalid {
+  border-color: #ef4444;
+  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.18);
+}
+`
+        },
+        {
+            name: 'ui-checkbox',
+            template: `
+import { Component, Input } from '@angular/core'
+import { NgIf } from '@angular/common'
+import {
+  ControlContainer,
+  FormGroupDirective,
+  ReactiveFormsModule
+} from '@angular/forms'
+
+@Component({
+  selector: 'ui-checkbox',
+  standalone: true,
+  imports: [NgIf, ReactiveFormsModule],
+  viewProviders: [
+    { provide: ControlContainer, useExisting: FormGroupDirective }
+  ],
+  templateUrl: './ui-checkbox.component.html',
+  styleUrls: ['./ui-checkbox.component.scss']
+})
+export class UiCheckboxComponent {
+  @Input() label = ''
+  @Input() hint = ''
+  @Input() info = ''
+  @Input() controlName = ''
+  @Input() invalid = false
+  infoOpen = false
+
+  toggleInfo(event: MouseEvent) {
+    event.preventDefault()
+    event.stopPropagation()
+    this.infoOpen = !this.infoOpen
+  }
+}
+`,
+            html: `
+<label class="ui-control">
+  <span class="ui-control__label" *ngIf="label">
+    {{ label }}
+    <button
+      class="ui-control__info"
+      type="button"
+      *ngIf="info"
+      (click)="toggleInfo($event)"
+      [attr.aria-expanded]="infoOpen"
+    >
+      i
+    </button>
+  </span>
+  <div class="ui-control__info-panel" *ngIf="info && infoOpen">
+    {{ info }}
+  </div>
+  <input
+    class="ui-control__checkbox"
+    type="checkbox"
+    [formControlName]="controlName"
+    [class.invalid]="invalid"
+  />
+  <span class="ui-control__hint" *ngIf="hint && !info">{{ hint }}</span>
+</label>
+`,
+            scss: `
+:host {
+  display: block;
+}
+
+.ui-control {
+  display: grid;
+  gap: 10px;
+  font-size: 13px;
+  color: #1f2937;
+}
+
+.ui-control__label {
+  font-weight: 700;
+  line-height: 1.4;
+  word-break: break-word;
+  letter-spacing: 0.01em;
+}
+
+.ui-control__hint {
+  color: #94a3b8;
+  font-size: 12px;
+}
+
+.ui-control__info {
+  margin-left: 8px;
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  border: 1px solid rgba(15, 23, 42, 0.2);
+  background: #ffffff;
+  color: #475569;
+  font-size: 11px;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.ui-control__info:hover {
+  background: #f8fafc;
+}
+
+.ui-control__info-panel {
+  margin-top: 8px;
+  padding: 10px 12px;
+  border-radius: 10px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  color: #475569;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.ui-control__checkbox {
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border-radius: 6px;
+  box-shadow: none;
+  accent-color: var(--color-primary);
+}
+`
+        }
+    ];
+    fs_1.default.mkdirSync(uiRoot, { recursive: true });
+    for (const component of components) {
+        const componentDir = path_1.default.join(uiRoot, component.name);
+        fs_1.default.mkdirSync(componentDir, { recursive: true });
+        const base = component.name;
+        const tsPath = path_1.default.join(componentDir, `${base}.component.ts`);
+        const htmlPath = path_1.default.join(componentDir, `${base}.component.html`);
+        const scssPath = path_1.default.join(componentDir, `${base}.component.scss`);
+        const needsUiFieldUpdate = component.name === 'ui-field';
+        const shouldOverwrite = (filePath, marker) => {
+            if (!fs_1.default.existsSync(filePath))
+                return true;
+            if (needsUiFieldUpdate)
+                return true;
+            if (!marker)
+                return true;
+            const existing = fs_1.default.readFileSync(filePath, 'utf-8');
+            return !existing.includes(marker);
+        };
+        if (component.name === 'ui-menu') {
+            const menuImportPath = schemasRoot
+                ? buildRelativeImportPath(componentDir, path_1.default.join(schemasRoot, 'menu.gen'))
+                : './menu.gen';
+            component.template = `
+import { Component, Input } from '@angular/core'
+import { NgFor, NgIf } from '@angular/common'
+import { RouterLink, RouterLinkActive } from '@angular/router'
+import { GeneratedMenu, generatedMenu } from '${menuImportPath}'
+
+@Component({
+  selector: 'ui-menu',
+  standalone: true,
+  imports: [NgIf, NgFor, RouterLink, RouterLinkActive],
+  templateUrl: './ui-menu.component.html',
+  styleUrls: ['./ui-menu.component.scss']
+})
+export class UiMenuComponent {
+  @Input() menu: GeneratedMenu = generatedMenu
+  @Input() title = 'Generate UI'
+}
+`;
+        }
+        if (shouldOverwrite(tsPath, 'infoOpen')) {
+            fs_1.default.writeFileSync(tsPath, component.template.trimStart());
+        }
+        if (shouldOverwrite(htmlPath, 'ui-control__info-panel')) {
+            fs_1.default.writeFileSync(htmlPath, component.html.trimStart());
+        }
+        if (shouldOverwrite(scssPath, 'ui-control__info-panel')) {
+            fs_1.default.writeFileSync(scssPath, component.scss.trimStart());
+        }
+    }
+}
+function toRouteSegment(operationId) {
     if (!operationId)
         return operationId;
     return operationId[0].toLowerCase() + operationId.slice(1);
@@ -1243,6 +2210,14 @@ function buildSchemaImportPath(featureDir, schemasRoot, rawName) {
     }
     return relativePath;
 }
+function buildRelativeImportPath(fromDir, targetFile) {
+    let relativePath = path_1.default.relative(fromDir, targetFile);
+    relativePath = toPosixPath(relativePath);
+    if (!relativePath.startsWith('.')) {
+        relativePath = `./${relativePath}`;
+    }
+    return relativePath;
+}
 function toPosixPath(value) {
     return value.split(path_1.default.sep).join(path_1.default.posix.sep);
 }