@tinya-code/gas-admin-ui 0.2.0-alpha.15 → 0.2.0-alpha.17

package/src/lib/fields/rich-select/rich-select.ts

@@ -1,175 +0,0 @@
-import { Component, computed, inject, input } from '@angular/core';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-import { FormField } from '@angular/forms/signals';
-
-import type { RichSelectField } from '../../core/models/schema.model';
-import { FieldAria } from '../field-aria';
-import { childTree, type RootTree } from '../field-node';
-
-/**
- * Selector visual enriquecido (`rich-select`).
- *
- * Cada opción se renderiza como tarjeta con su `preview` HTML en vez de un
- * `<select>` nativo. El `preview` se declara en el schema y el motor lo pinta
- * tras sanitizarlo con Angular (sólo HTML inseguro se descarta).
- *
- * El valor se guarda como string (el `value` de la opción elegida).
- *
- * Layout responsive:
- * - `cardWidth` (1–12): ancho de cada tarjeta como fracción de la grilla de 12.
- *   `cardWidth: 4` ⇒ 3 tarjetas por fila en escritorio; `cardWidth: 6` ⇒ 2;
- *   `cardWidth: 3` ⇒ 4.
- * - `cardCols` (1–6): sobrescribe el cálculo y obliga a esa cantidad de
- *   columnas en el punto de ruptura `lg`.
- * - En pantallas chicas las tarjetas se apilan (1 columna).
- */
-@Component({
-  selector: 'app-field-rich-select',
-  imports: [FieldAria, FormField],
-  template: `
-    <div
-      class="rich-select"
-      role="radiogroup"
-      [attr.aria-label]="field().label"
-      [attr.aria-required]="field().required ? 'true' : null"
-      [class]="gridColsClass()"
-    >
-      @for (option of options(); track option.value) {
-        <label
-          class="rich-option"
-          [class.selected]="isSelected(option.value)"
-          [class.disabled]="option.disabled"
-        >
-          <input
-            type="radio"
-            class="sr-only"
-            [id]="state().name() + '-' + option.value"
-            [value]="option.value"
-            [formField]="node()"
-          />
-          <div class="rich-option-preview" [innerHTML]="sanitize(option.preview ?? '')"></div>
-          <span class="rich-option-label">{{ option.label }}</span>
-        </label>
-      }
-    </div>
-  `,
-  styles: [
-    `
-      .rich-select {
-        display: grid;
-        gap: 0.75rem;
-        margin-top: 0.5rem;
-      }
-
-      /* Por defecto: 1 columna en móvil (apilado). */
-      .rich-select {
-        grid-template-columns: repeat(1, minmax(0, 1fr));
-      }
-
-      /* Escritorio: se aplica la clase generada desde cardWidth / cardCols. */
-      .rich-select.cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
-      .rich-select.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-      .rich-select.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-      .rich-select.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
-      .rich-select.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
-      .rich-select.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
-
-      .rich-option {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 0.375rem;
-        padding: 0.625rem 0.5rem;
-        border: 1px solid #e5e7eb;
-        border-radius: 0.75rem;
-        background: #ffffff;
-        cursor: pointer;
-        transition: border-color 0.15s, box-shadow 0.15s;
-        min-width: 0;
-      }
-
-      .rich-option:not(.disabled):hover {
-        border-color: #2563eb;
-        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
-      }
-
-      .rich-option.selected {
-        border-color: #2563eb;
-        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
-        background: #eff6ff;
-      }
-
-      .rich-option.disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-        border-color: #e5e7eb;
-        background: #f9fafb;
-      }
-
-      .rich-option-preview {
-        width: 48px;
-        height: 48px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        overflow: hidden;
-      }
-
-      .rich-option-label {
-        font-size: 0.875rem;
-        font-weight: 500;
-        text-align: center;
-        color: #111827;
-        line-height: 1.25;
-      }
-
-      .rich-option.disabled .rich-option-label {
-        color: #9ca3af;
-      }
-
-      .sr-only {
-        position: absolute;
-        width: 1px;
-        height: 1px;
-        padding: 0;
-        margin: -1px;
-        overflow: hidden;
-        clip: rect(0, 0, 0, 0);
-        border: 0;
-        white-space: nowrap;
-      }
-    `,
-  ],
-})
-export class FieldRichSelect {
-  readonly field = input.required<RichSelectField>();
-  readonly tree = input.required<RootTree>();
-
-  private readonly sanitizer = inject(DomSanitizer);
-
-  protected readonly node = computed(() => childTree<string>(this.tree(), this.field().key));
-  protected readonly state = computed(() => this.node()());
-
-  protected readonly options = computed(() => this.field().options);
-
-  /** Cuántas columnas de tarjetas en escritorio (lg+). */
-  protected readonly gridCols = computed(() => {
-    const field = this.field();
-    if (field.cardCols) {
-      return field.cardCols;
-    }
-    const cardWidth = field.cardWidth ?? 4;
-    // 12 columnas de grilla ÷ ancho de cada tarjeta = cuántas caben por fila.
-    return Math.max(1, Math.min(6, Math.floor(12 / cardWidth)));
-  });
-
-  protected readonly gridColsClass = computed(() => `cols-${this.gridCols()}`);
-
-  protected isSelected(value: string): boolean {
-    return this.state().value() === value;
-  }
-
-  protected sanitize(html: string): SafeHtml {
-    return this.sanitizer.bypassSecurityTrustHtml(html);
-  }
-}

package/src/lib/fields/select/radio-mode.ts

@@ -1,25 +0,0 @@
-import type { SelectField } from '../../core/models/schema.model';
-
-/**
- * Guía de control (standards §Control selection): 2–4 opciones → radio
- * buttons; 5–7 → dropdown simple; más de 7 → dropdown con búsqueda.
- *
- * Dos limitaciones deliberadas:
- *  - **Sólo opciones estáticas** (`source` excluido): una fuente se carga
- *    después y su cantidad de filas puede cambiar; el control no debe mutar
- *    de `<select>` a radios en mitad de una edición.
- *  - **Mínimo 2**: con una sola opción el dropdown (o un único radio) no
- *    aporta nada y el caso real (`users.role`) ya existe así.
- *
- * La comparten el campo (`select.ts`, para ramificar su plantilla) y el
- * rótulo del host (`render-host.ts`): sin este mismo cálculo el host
- * dibujaría un `label[for]` apuntando a un id que un grupo de radios no
- * tiene (el ancla la reemplaza `role="radiogroup"` + `aria-label`).
- */
-export function esGrupoRadio(field: SelectField): boolean {
-  if (field.source !== undefined) {
-    return false;
-  }
-  const total = field.options?.length ?? 0;
-  return total >= 2 && total <= 4;
-}

package/src/lib/fields/select/select.descriptor.ts

@@ -1,12 +0,0 @@
-import type { RenderDescriptor } from '../../core/registry/render-registry';
-
-/** Descriptor del campo `select` (R3.3). */
-export const descriptor: RenderDescriptor = {
-  kind: 'field',
-  type: 'select',
-  since: '1.0',
-  load: () => import('./select').then((module) => module.FieldSelect),
-  // Nace como cadena: los textos, fechas, urls, selects y relacionales.
-  seed: 'string',
-  surfaces: ['form', 'display'],
-};

package/src/lib/fields/select/select.spec.ts

@@ -1,162 +0,0 @@
-import { setSchemaCatalog } from '../../core/registry/schema-catalog';
-import { testCatalog } from '../../core/testing/test-catalog';
-
-setSchemaCatalog(testCatalog);
-
-import { TestBed } from '@angular/core/testing';
-import { EnvironmentInjector, signal } from '@angular/core';
-import { form } from '@angular/forms/signals';
-import { of, throwError } from 'rxjs';
-import { vi } from 'vitest';
-
-import type { SelectField } from '../../core/models/schema.model';
-import { ApiService } from '../../core/services/api.service';
-import type { RootTree } from '../field-node';
-import { FieldSelect } from './select';
-
-/** Filas mínimas de `categories` (keyField `slug`, titleField `name`). */
-const FILAS = [
-  { slug: 'bebidas', name: 'Bebidas' },
-  { slug: 'pan', name: 'Pan' },
-];
-
-describe('Campo select', () => {
-  const listSpy = vi.fn();
-
-  beforeEach(async () => {
-    listSpy.mockReset();
-    listSpy.mockImplementation(() => of(FILAS.map((fila) => ({ ...fila }))));
-    await TestBed.configureTestingModule({
-      imports: [FieldSelect],
-      providers: [{ provide: ApiService, useValue: { list: listSpy } }],
-    }).compileComponents();
-  });
-
-  async function create(field: SelectField) {
-    const fixture = TestBed.createComponent(FieldSelect);
-    // La semilla lleva la clave del campo: `childTree` exige que exista en
-    // el árbol (igual que en el formulario real, donde está en el schema).
-    const model = signal<Record<string, unknown>>({ [field.key]: '' });
-    // `form()` inyecta en el arranque: fuera de un contexto hay que pasarle
-    // el injector, igual que hace form-view.
-    const tree = form(model, () => {}, {
-      injector: TestBed.inject(EnvironmentInjector),
-    }) as unknown as RootTree;
-    fixture.componentRef.setInput('field', field);
-    fixture.componentRef.setInput('tree', tree);
-    fixture.detectChanges();
-    return { fixture };
-  }
-
-  const labels = (fixture: { nativeElement: HTMLElement }): string[] =>
-    Array.from(fixture.nativeElement.querySelectorAll('option')).map(
-      (option) => option.textContent?.trim() ?? '',
-    );
-
-  /** Texto visible de cada opción: `<option>` en dropdown, `<label>` en radio. */
-  const radioLabels = (fixture: { nativeElement: HTMLElement }): string[] =>
-    Array.from(fixture.nativeElement.querySelectorAll('[data-testid="select-radios"] > label')).map(
-      (label) => label.textContent?.trim() ?? '',
-    );
-
-  const radios = (fixture: { nativeElement: HTMLElement }): HTMLInputElement[] =>
-    Array.from(fixture.nativeElement.querySelectorAll('input[type="radio"]'));
-
-  const CON_SOURCE: SelectField = {
-    type: 'select',
-    key: 'category_slug',
-    label: 'Categoría',
-    source: { resource: 'categories', valueField: 'slug', labelField: 'name' },
-  };
-
-  it('2–4 opciones estáticas se pintan como radios (guía §1) sin tocar la red', async () => {
-    const { fixture } = await create({
-      type: 'select',
-      key: 'estado',
-      label: 'Estado',
-      options: [
-        { value: 'pendiente', label: 'Pendiente' },
-        { value: 'ok', label: 'OK' },
-      ],
-    });
-    await fixture.whenStable();
-    fixture.detectChanges();
-
-    expect(radioLabels(fixture)).toEqual(['— Seleccionar —', 'Pendiente', 'OK']);
-    // Opcional ⇒ opción vacía para poder deseleccionar (como el `''` del
-    // `<select>` anterior); todos comparten el `name` que setea FormField.
-    expect(radios(fixture)).toHaveLength(3);
-    const group = fixture.nativeElement.querySelector('[role="radiogroup"]');
-    expect(group?.getAttribute('aria-label')).toBe('Estado');
-    // Sin `source` el resource queda idle: no hay vuelta que esperar (D62).
-    expect(listSpy).not.toHaveBeenCalled();
-    expect(fixture.nativeElement.querySelector('[role="status"]')).toBeNull();
-    expect(fixture.nativeElement.querySelector('[role="alert"]')).toBeNull();
-  });
-
-  it('un select requerido en modo radio no ofrece la opción vacía', async () => {
-    const { fixture } = await create({
-      type: 'select',
-      key: 'estado',
-      label: 'Estado',
-      required: true,
-      options: [
-        { value: 'pendiente', label: 'Pendiente' },
-        { value: 'ok', label: 'OK' },
-      ],
-    });
-    await fixture.whenStable();
-    fixture.detectChanges();
-
-    expect(radioLabels(fixture)).toEqual(['Pendiente', 'OK']);
-    expect(radios(fixture)).toHaveLength(2);
-  });
-
-  it('con más de 4 opciones sigue siendo dropdown, no radio', async () => {
-    const { fixture } = await create({
-      type: 'select',
-      key: 'estado',
-      label: 'Estado',
-      options: [
-        { value: 'a', label: 'A' },
-        { value: 'b', label: 'B' },
-        { value: 'c', label: 'C' },
-        { value: 'd', label: 'D' },
-        { value: 'e', label: 'E' },
-      ],
-    });
-    await fixture.whenStable();
-    fixture.detectChanges();
-
-    expect(fixture.nativeElement.querySelector('[data-testid="select-radios"]')).toBeNull();
-    expect(labels(fixture).length).toBe(6); // vacío + 5
-  });
-
-  it('con source pide las filas y las mapea con la regla de la relación', async () => {
-    const { fixture } = await create(CON_SOURCE);
-    await fixture.whenStable();
-    fixture.detectChanges();
-
-    expect(listSpy).toHaveBeenCalledTimes(1);
-    expect(labels(fixture)).toEqual(['— Seleccionar —', 'Bebidas', 'Pan']);
-  });
-
-  it('mientras la vuelta no llega se anuncia la carga (no un dropdown vacío)', async () => {
-    const { fixture } = await create(CON_SOURCE);
-    const aviso = fixture.nativeElement.querySelector('[role="status"]');
-    expect(aviso).not.toBeNull();
-    expect(aviso.textContent).toContain('Cargando opciones…');
-  });
-
-  it('un fallo de carga se anuncia con role=alert y no inventa opciones', async () => {
-    listSpy.mockImplementation(() => throwError(() => new Error('503')));
-    const { fixture } = await create(CON_SOURCE);
-    await fixture.whenStable();
-    fixture.detectChanges();
-
-    const aviso = fixture.nativeElement.querySelector('[role="alert"]');
-    expect(aviso).not.toBeNull();
-    expect(aviso.textContent).toContain('No se pudieron cargar las opciones.');
-    expect(labels(fixture)).toEqual(['— Seleccionar —']);
-  });
-});

package/src/lib/fields/select/select.ts

@@ -1,210 +0,0 @@
-import { Component, computed, inject, input, resource, signal } from '@angular/core';
-import { FormField } from '@angular/forms/signals';
-
-import type { SelectField, SelectOption } from '../../core/models/schema.model';
-import { DataSourceService, dataSourceKey } from '../../core/services/data-source.service';
-import { optionsFromRows } from '../../core/utils/source-options';
-import { getSchema } from '../../core/registry/schema-catalog';
-import { FieldAria } from '../field-aria';
-import { childTree, type RootTree } from '../field-node';
-import { esGrupoRadio } from './radio-mode';
-
-/**
- * Desplegable de un solo valor (base.md §5.1).
- *
- * Sus opciones se declaran de dos formas y **exactamente una** (XOR, D62):
- * `options` estáticas en el schema o `source` — una fuente declarada que
- * pide `DataSourceService` con la misma caché que usan las relaciones y los
- * widgets (F8 · R6.5). Mientras la vuelta no llega se anuncia; sin anuncio
- * un desplegable vacío se confundiría con «esto no tiene opciones».
- */
-@Component({
-  selector: 'app-field-select',
-  imports: [FieldAria, FormField],
-  template: `
-    @if (fallo()) {
-      <p class="mb-1 text-xs text-danger" role="alert">No se pudieron cargar las opciones.</p>
-    } @else if (cargando()) {
-      <p class="mb-1 text-xs text-neutral" role="status">Cargando opciones…</p>
-    }
-    @if (useRadio()) {
-      <!-- Guía de control: 2–4 opciones estáticas → radio buttons, no un
-           desplegable. Cada opción es un label implícito (texto y control
-           juntos) y el grupo se nombra con aria-label: el rótulo del host
-           se dibuja como texto porque un grupo no es un único control con
-           el que emparejar un for. formField va en CADA input: Signal
-           Forms soporta radio (checked = value === element.value) y setea
-           name/disabled del grupo por estado de campo. -->
-      <div
-        class="mt-1 flex flex-col gap-1"
-        role="radiogroup"
-        [attr.aria-label]="field().label"
-        data-testid="select-radios"
-      >
-        @if (!field().required) {
-          <label class="flex w-fit items-center gap-2 text-sm">
-            <input
-              type="radio"
-              class="accent-primary"
-              [id]="state().name() + '-__vacio'"
-              value=""
-              [formField]="node()"
-            />
-            <span class="text-neutral">{{ field().placeholder ?? '— Seleccionar —' }}</span>
-          </label>
-        }
-        @for (option of options(); track option.value) {
-          <label class="flex w-fit items-center gap-2 text-sm">
-            <input
-              type="radio"
-              class="accent-primary"
-              [id]="state().name() + '-' + option.value"
-              [value]="option.value"
-              [formField]="node()"
-            />
-            <span>{{ option.label }}</span>
-          </label>
-        }
-      </div>
-    } @else {
-      @if (useSearch()) {
-        <!-- Guía §1: más de 7 opciones → dropdown con búsqueda. Se filtra el
-             select nativo en vez de construir un combobox: el teclado, el
-             anuncio de la opción activa y el valor elegido siguen siendo los
-             del navegador. -->
-        <input
-          type="search"
-          class="mb-1 w-full rounded-lg border border-neutral/30 bg-surface px-2 py-1 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
-          placeholder="Buscar…"
-          aria-label="Buscar entre las opciones"
-          [attr.aria-controls]="state().name()"
-          [value]="query()"
-          (input)="onQuery($event)"
-        />
-      }
-      <select class="field-input" [id]="state().name()" [formField]="node()">
-        @if (!field().required) {
-          <option value="">{{ field().placeholder ?? '— Seleccionar —' }}</option>
-        }
-        @for (option of visibleOptions(); track option.value) {
-          <option [value]="option.value" [disabled]="option.disabled ?? false">
-            {{ option.label }}
-          </option>
-        }
-      </select>
-      @if (noMatches()) {
-        <p class="mt-1 text-xs text-neutral" role="status">Sin resultados para «{{ query() }}».</p>
-      }
-    }
-  `,
-})
-export class FieldSelect {
-  readonly field = input.required<SelectField>();
-  readonly tree = input.required<RootTree>();
-
-  private readonly ds = inject(DataSourceService);
-
-  protected readonly node = computed(() => childTree<string>(this.tree(), this.field().key));
-  protected readonly state = computed(() => this.node()());
-
-  /** Texto escrito en el buscador (sólo se usa si supera el umbral). */
-  protected readonly query = signal('');
-
-  /**
-   * Registro del formulario, sólo para resolver `{campo}` en `source.params`.
-   * Sin parámetros declarados no se lee: el campo no depende del formulario.
-   */
-  private readonly registro = computed<Record<string, unknown> | undefined>(() => {
-    const source = this.field().source;
-    if (source === undefined || source.params === undefined) return undefined;
-    return this.tree()().value();
-  });
-
-  /** `undefined` sin fuente ⇒ `resource` queda idle y jamás llama al loader. */
-  private readonly claveFuente = computed(() => {
-    const source = this.field().source;
-    return source === undefined ? undefined : dataSourceKey(source, this.registro());
-  });
-
-  private readonly fuenteResource = resource({
-    params: () => this.claveFuente(),
-    loader: async () => {
-      const source = this.field().source;
-      if (source === undefined) return [];
-      return this.ds.rows(source, this.registro());
-    },
-  });
-
-  /**
-   * Opciones efectivas: las estáticas del schema o las filas de la fuente
-   * declarada, mapeadas con la misma regla que una relación (F8 · R6.5).
-   */
-  protected readonly options = computed<SelectOption[]>(() => {
-    const field = this.field();
-    if (field.source === undefined) return field.options ?? [];
-    // `value()` del resource TIRA en estado error (contract de Angular):
-    // se mira el estado antes de leerlo, o el propio render rompe en vez
-    // de pintar el aviso de fallo.
-    if (this.fuenteResource.status() === 'error') return [];
-    return optionsFromRows(this.fuenteResource.value() ?? [], {
-      source: field.source,
-      target: getSchema(field.source.resource),
-    });
-  });
-
-  /** Sólo aplica con `source`: una lista estática no tiene vuelta que esperar. */
-  protected readonly cargando = computed(
-    () => this.claveFuente() !== undefined && this.fuenteResource.status() === 'loading',
-  );
-
-  protected readonly fallo = computed(
-    () => this.claveFuente() !== undefined && this.fuenteResource.status() === 'error',
-  );
-
-  /** Umbral de la guía §1: 5–7 opciones dropdown simple, más de 7 con búsqueda. */
-  protected readonly useSearch = computed(() => this.options().length > 7);
-
-  /** Guía §1: 2–4 opciones estáticas → radio buttons (ver `radio-mode.ts`). */
-  protected readonly useRadio = computed(() => esGrupoRadio(this.field()));
-
-  protected onQuery(event: Event): void {
-    this.query.set((event.target as HTMLInputElement).value);
-  }
-
-  /**
-   * Opciones que coinciden con el término, SIN conservar la elegida: es la
-   * base del mensaje «Sin resultados».
-   */
-  protected readonly matches = computed<SelectOption[]>(() => {
-    const all = this.options();
-    const term = this.query().trim().toLowerCase();
-    if (term === '') {
-      return all;
-    }
-    return all.filter((option) => option.label.toLowerCase().includes(term));
-  });
-
-  /** El buscador está activo y no encontró nada nuevo (el elegido no cuenta). */
-  protected readonly noMatches = computed(
-    () => this.useSearch() && this.query().trim() !== '' && this.matches().length === 0,
-  );
-
-  /**
-   * Opciones que se dibujan. Con búsqueda activa se acotan por etiqueta, pero
-   * la opción elegida se conserva siempre aunque no coincida con el término:
-   * si desapareciera del DOM, el select dejaría de mostrar el valor actual
-   * (guía §1: «valor seleccionado siempre visible»).
-   */
-  protected readonly visibleOptions = computed<SelectOption[]>(() => {
-    const filtered = this.matches();
-    if (this.query().trim() === '') {
-      return filtered;
-    }
-    const selected = String(this.state().value() ?? '');
-    if (filtered.some((option) => option.value === selected)) {
-      return filtered;
-    }
-    const kept = this.options().find((option) => option.value === selected);
-    return kept === undefined ? filtered : [...filtered, kept];
-  });
-}

package/src/lib/fields/slug/slug.descriptor.ts

@@ -1,19 +0,0 @@
-import type { RenderDescriptor } from '../../core/registry/render-registry';
-
-/** Descriptor del campo `slug` (R3.3). */
-export const descriptor: RenderDescriptor = {
-  kind: 'field',
-  type: 'slug',
-  since: '1.0',
-  load: () => import('./slug').then((module) => module.FieldSlug),
-  // Nace como cadena: los textos, fechas, urls, selects y relacionales.
-  seed: 'string',
-  surfaces: ['form', 'display'],
-  // Se aparta de la forma estándar sólo por `exists`: con el registro ya
-  // creado el campo queda bloqueado (`lockAfterCreate`, R3.6).
-  inputs: (config, extras) => ({
-    field: config,
-    tree: extras.ctx.tree,
-    exists: extras.ctx.exists,
-  }),
-};

package/src/lib/fields/slug/slug.ts

@@ -1,67 +0,0 @@
-import { Component, computed, effect, input, signal } from '@angular/core';
-import { FormField } from '@angular/forms/signals';
-
-import type { SlugField } from '../../core/models/schema.model';
-import { slugify } from '../../shared/utils/slugify';
-import { FieldAria } from '../field-aria';
-import { childTree, type RootTree } from '../field-node';
-
-/**
- * Slug autogenerado desde otro campo (base.md §5.1). Se regenera mientras el
- * usuario no lo edite a mano; queda bloqueado tras crear el registro si
- * `lockAfterCreate` no es `false`. La rama bloqueada no usa `formField`
- * (atributo `readonly` estático y sin sincronización).
- */
-@Component({
-  selector: 'app-field-slug',
-  imports: [FieldAria, FormField],
-  template: `
-    @if (locked()) {
-      <input
-        type="text"
-        class="field-input"
-        [id]="state().name()"
-        [value]="state().value()"
-        readonly
-      />
-    } @else {
-      <input
-        type="text"
-        class="field-input"
-        [id]="state().name()"
-        [formField]="node()"
-        [placeholder]="field().placeholder ?? ''"
-        (input)="manual.set(true)"
-      />
-    }
-  `,
-})
-export class FieldSlug {
-  readonly field = input.required<SlugField>();
-  readonly tree = input.required<RootTree>();
-  /** Si el registro ya existe (lo informa form-view, Fase 10). */
-  readonly exists = input(false);
-
-  /** Edición manual del usuario: corta la autogeneración. */
-  protected readonly manual = signal(false);
-
-  protected readonly node = computed(() => childTree<string>(this.tree(), this.field().key));
-  protected readonly state = computed(() => this.node()());
-
-  protected readonly locked = computed(
-    () => this.field().lockAfterCreate !== false && this.exists(),
-  );
-
-  private readonly sourceValue = computed(() =>
-    childTree<unknown>(this.tree(), this.field().from)().value(),
-  );
-
-  constructor() {
-    effect(() => {
-      if (this.locked() || this.manual()) {
-        return;
-      }
-      this.state().value.set(slugify(String(this.sourceValue() ?? '')));
-    });
-  }
-}

package/src/lib/fields/string-list/string-list.descriptor.ts

@@ -1,11 +0,0 @@
-import type { RenderDescriptor } from '../../core/registry/render-registry';
-
-/** Descriptor del campo `string-list` (R3.3). */
-export const descriptor: RenderDescriptor = {
-  kind: 'field',
-  type: 'string-list',
-  since: '1.0',
-  load: () => import('./string-list').then((module) => module.FieldStringList),
-  seed: 'array',
-  surfaces: ['form', 'display'],
-};