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

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

@@ -1,222 +0,0 @@
-import { Component, computed, inject, input } from '@angular/core';
-import { FormField } from '@angular/forms/signals';
-import {
-  CdkDrag,
-  CdkDragDrop,
-  CdkDragHandle,
-  CdkDropList,
-  moveItemInArray,
-} from '@angular/cdk/drag-drop';
-
-import { LucideArrowDown, LucideArrowUp, LucideGripVertical, LucideTrash2 } from '@lucide/angular';
-import type { StringListField } from '../../core/models/schema.model';
-import { NotificationService } from '../../core/services/notification.service';
-import { Button } from '../../shared/components/button/button';
-import { FieldAria } from '../field-aria';
-import { childTree, stringItemTree, type RootTree } from '../field-node';
-
-/**
- * Lista de cadenas (base.md §9: `text`, `url` o `email` por ítem).
- *
- * Hoja: renderiza sus propios `<input [formField]>` (el nodo de cada ítem es
- * `FieldTree<string>`) y no toca FieldHost. Los ítems escalares no pueden
- * llevar `position`: si el schema la declara, el orden viaja como orden del
- * arreglo y el backend renumera (api.md R3).
- */
-@Component({
-  selector: 'app-field-string-list',
-  imports: [
-    FieldAria,
-    Button,
-    CdkDrag,
-    CdkDragHandle,
-    CdkDropList,
-    FormField,
-    LucideArrowDown,
-    LucideArrowUp,
-    LucideGripVertical,
-    LucideTrash2,
-  ],
-  template: `
-    @if (items().length === 0) {
-      <p
-        class="rounded-lg border border-dashed border-neutral/30 px-4 py-6 text-center text-sm text-neutral"
-      >
-        {{ field().emptyText ?? 'Sin elementos.' }}
-      </p>
-    } @else {
-      <div
-        cdkDropList
-        class="space-y-2"
-        [cdkDropListData]="items()"
-        [cdkDropListDisabled]="!sortable()"
-        (cdkDropListDropped)="onDrop($event)"
-      >
-        @for (item of items(); track $index; let i = $index) {
-          <div class="flex items-center gap-2" cdkDrag [cdkDragDisabled]="!sortable()">
-            @if (sortable()) {
-              <button
-                type="button"
-                app-button
-                variant="ghost"
-                size="icon"
-                class="cursor-grab"
-                cdkDragHandle
-                [attr.aria-label]="'Reordenar elemento ' + (i + 1)"
-                title="Arrastrar para reordenar"
-              >
-                <svg lucideGripVertical size="16" />
-              </button>
-            }
-            <input
-              class="field-input min-w-0 grow"
-              [type]="inputType()"
-              [placeholder]="field().placeholder ?? placeholderFor()"
-              [attr.aria-label]="field().label + ', elemento ' + (i + 1)"
-              [id]="idPrefix() + '-' + i"
-              [formField]="itemNode(i)"
-            />
-            <span class="flex shrink-0 items-center gap-2 lg:gap-1">
-              <button
-                type="button"
-                app-button
-                variant="ghost"
-                size="icon"
-                [disabled]="i === 0"
-                [attr.aria-label]="'Subir elemento ' + (i + 1)"
-                (click)="move(i, -1)"
-              >
-                <svg lucideArrowUp size="16" />
-              </button>
-              <button
-                type="button"
-                app-button
-                variant="ghost"
-                size="icon"
-                [disabled]="i === items().length - 1"
-                [attr.aria-label]="'Bajar elemento ' + (i + 1)"
-                (click)="move(i, 1)"
-              >
-                <svg lucideArrowDown size="16" />
-              </button>
-              <button
-                type="button"
-                app-button
-                variant="ghost"
-                size="icon"
-                [disabled]="!canRemove()"
-                [attr.aria-label]="'Eliminar elemento ' + (i + 1)"
-                (click)="remove(i)"
-              >
-                <svg lucideTrash2 size="16" />
-              </button>
-            </span>
-          </div>
-        }
-      </div>
-    }
-
-    <div class="mt-3">
-      <button app-button variant="outline" type="button" [disabled]="!canAdd()" (click)="add()">
-        + {{ field().addLabel ?? 'Agregar elemento' }}
-      </button>
-    </div>
-  `,
-})
-export class FieldStringList {
-  readonly field = input.required<StringListField>();
-  readonly tree = input.required<RootTree>();
-
-  private readonly notifications = inject(NotificationService);
-
-  private readonly itemsNode = computed(() => childTree<string[]>(this.tree(), this.field().key));
-  private readonly state = computed(() => this.itemsNode()());
-  /** Prefijo estable del campo para los id de cada ítem (§8). */
-  protected readonly idPrefix = computed(() => this.state().name());
-  protected readonly items = computed(() => this.state().value() ?? []);
-
-  protected readonly sortable = computed(() => this.field().sortable ?? true);
-  protected readonly inputType = computed(() => this.field().itemType ?? 'text');
-
-  protected itemNode(index: number): ReturnType<typeof stringItemTree> {
-    return stringItemTree(this.itemsNode(), index);
-  }
-
-  protected canAdd(): boolean {
-    const max = this.field().max;
-    return max === undefined || this.items().length < max;
-  }
-
-  protected canRemove(): boolean {
-    return this.items().length > (this.field().min ?? 0);
-  }
-
-  protected add(): void {
-    if (!this.canAdd()) {
-      return;
-    }
-    this.updateItems((next) => {
-      next.push('');
-    });
-  }
-
-  protected move(index: number, direction: -1 | 1): void {
-    const target = index + direction;
-    if (target < 0 || target >= this.items().length) {
-      return;
-    }
-    this.updateItems((next) => {
-      moveItemInArray(next, index, target);
-    });
-  }
-
-  protected onDrop(event: CdkDragDrop<string[]>): void {
-    if (event.previousIndex === event.currentIndex) {
-      return;
-    }
-    this.updateItems((next) => {
-      moveItemInArray(next, event.previousIndex, event.currentIndex);
-    });
-  }
-
-  protected async remove(index: number): Promise<void> {
-    if (!this.canRemove()) {
-      return;
-    }
-    const value = this.items()[index] ?? '';
-    if (value.trim() !== '') {
-      const accepted = await this.notifications.confirm({
-        title: `Eliminar elemento ${index + 1}`,
-        message: 'Esta acción no se puede deshacer.',
-        confirmLabel: 'Eliminar',
-        cancelLabel: 'Cancelar',
-      });
-      if (!accepted) {
-        return;
-      }
-    }
-    this.updateItems((next) => {
-      next.splice(index, 1);
-    });
-  }
-
-  private updateItems(mutator: (next: string[]) => void): void {
-    this.state().controlValue.update((current) => {
-      const next = [...current];
-      mutator(next);
-      return next;
-    });
-  }
-
-  private placeholderFor(): string {
-    switch (this.field().itemType) {
-      case 'url':
-        return 'https://…';
-      case 'email':
-        return 'nombre@ejemplo.com';
-      default:
-        // §2: placeholder siempre ejemplo, nunca instrucción.
-        return 'Ej. Opción 1';
-    }
-  }
-}

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

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

package/src/lib/fields/text/text.ts

@@ -1,35 +0,0 @@
-import { Component, computed, input } from '@angular/core';
-import { FormField } from '@angular/forms/signals';
-
-import type { TextField } from '../../core/models/schema.model';
-import { FieldAria } from '../field-aria';
-import { childTree, type RootTree } from '../field-node';
-
-/**
- * Input de una línea (base.md §5.1 `text`).
- *
- * `readonly`, `maxLength` y `pattern` NO se bindean como atributos: el
- * directive `FormField` los gestiona desde el estado del campo y el compilador
- * lo exige (NG8022). La Fase 10 los traduce a reglas (`readonly()`,
- * `maxLength()`, `pattern()`) en el schema del formulario.
- */
-@Component({
-  selector: 'app-field-text',
-  imports: [FieldAria, FormField],
-  template: `
-    <input
-      type="text"
-      class="field-input"
-      [id]="state().name()"
-      [formField]="node()"
-      [placeholder]="field().placeholder ?? ''"
-    />
-  `,
-})
-export class FieldText {
-  readonly field = input.required<TextField>();
-  readonly tree = input.required<RootTree>();
-
-  protected readonly node = computed(() => childTree<string>(this.tree(), this.field().key));
-  protected readonly state = computed(() => this.node()());
-}

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

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

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

@@ -1,117 +0,0 @@
-import { Component, EnvironmentInjector, signal } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
-import { form } from '@angular/forms/signals';
-
-import type { TextareaField } from '../../core/models/schema.model';
-import { type RootTree } from '../field-node';
-import { FieldTextarea } from './textarea';
-
-/**
- * El anfitrión NO lleva `[formField]`: `FieldTextarea` delega en el
- * `<textarea>` nativo de su propio template y ahí es donde vive la directiva
- * `FormField`. Pasarla en el host revienta con NG01914 («host must be a
- * native form control»). El host sólo monta el campo y le da el `tree`
- * (mismo criterio que `multiselect.spec.ts`, salvo que ese campo sí es
- * control propio con `model()`).
- */
-@Component({
-  template: `<app-field-textarea [field]="field" [tree]="tree" />`,
-  imports: [FieldTextarea],
-})
-class Host {
-  field!: TextareaField;
-  tree!: RootTree;
-}
-
-describe('Campo textarea', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({ imports: [Host] }).compileComponents();
-  });
-
-  async function create(field: TextareaField, initial = '') {
-    const fixture = TestBed.createComponent(Host);
-    const model = signal<Record<string, unknown>>({ [field.key]: initial });
-    const tree = form(model, () => {}, {
-      injector: TestBed.inject(EnvironmentInjector),
-    }) as unknown as RootTree;
-    fixture.componentInstance.field = field;
-    fixture.componentInstance.tree = tree;
-    fixture.detectChanges();
-    return { fixture, model };
-  }
-
-  const area = (fixture: { nativeElement: HTMLElement }) =>
-    fixture.nativeElement.querySelector('textarea') as HTMLTextAreaElement;
-
-  const chips = (fixture: { nativeElement: HTMLElement }): HTMLButtonElement[] =>
-    Array.from(fixture.nativeElement.querySelectorAll('[data-testid="textarea-tokens"] button'));
-
-  const PLANTILLA: TextareaField = {
-    type: 'textarea',
-    key: 'share_message_template',
-    label: 'Plantilla',
-    tokens: [
-      { key: 'ref', label: 'Código del pedido' },
-      { key: 'pin', label: 'PIN' },
-    ],
-  };
-
-  it('sin tokens no pinta la fila de chips', async () => {
-    const { fixture } = await create({ type: 'textarea', key: 'msg', label: 'Msg' });
-    expect(chips(fixture)).toHaveLength(0);
-  });
-
-  it('con tokens pinta un chip por token, con el rótulo humano', async () => {
-    const { fixture } = await create(PLANTILLA);
-    const labels = chips(fixture).map((b) => b.textContent?.trim());
-    expect(labels).toEqual(['Código del pedido', 'PIN']);
-  });
-
-  it('inserta {key} al final cuando el textarea está vacío', async () => {
-    const { fixture, model } = await create(PLANTILLA);
-    chips(fixture)[0].click();
-    fixture.detectChanges();
-    expect(model()[PLANTILLA.key]).toBe('{ref}');
-  });
-
-  it('inserta el token en la posición del cursor, no al final', async () => {
-    const { fixture, model } = await create(PLANTILLA, 'Hola ');
-    const a = area(fixture);
-    // Cursor justo después de "Hola ".
-    a.setSelectionRange(6, 6);
-    chips(fixture)[1].click();
-    fixture.detectChanges();
-    expect(model()[PLANTILLA.key]).toBe('Hola {pin}');
-  });
-
-  it('reemplaza la selección con el token', async () => {
-    const { fixture, model } = await create(PLANTILLA, 'borrar-esto');
-    const a = area(fixture);
-    a.setSelectionRange(0, 11);
-    chips(fixture)[0].click();
-    fixture.detectChanges();
-    expect(model()[PLANTILLA.key]).toBe('{ref}');
-  });
-
-  it('devuelve el foco al textarea tras insertar', async () => {
-    const { fixture } = await create(PLANTILLA);
-    chips(fixture)[0].click();
-    fixture.detectChanges();
-    expect(fixture.nativeElement.ownerDocument.activeElement).toBe(area(fixture));
-  });
-
-  it('acumula varios tokens escribiendo entre clics', async () => {
-    const { fixture, model } = await create({ ...PLANTILLA, key: 'm' });
-    chips(fixture)[0].click();
-    fixture.detectChanges();
-    // Escribir " con PIN " después del primer token.
-    const a = area(fixture);
-    a.setSelectionRange((model()['m'] as string).length, (model()['m'] as string).length);
-    a.value = `${model()['m']} con PIN `;
-    a.dispatchEvent(new Event('input'));
-    fixture.detectChanges();
-    chips(fixture)[1].click();
-    fixture.detectChanges();
-    expect(model()['m']).toBe('{ref} con PIN {pin}');
-  });
-});

package/src/lib/fields/textarea/textarea.ts

@@ -1,126 +0,0 @@
-import { Component, computed, ElementRef, input, viewChild } from '@angular/core';
-import { FormField } from '@angular/forms/signals';
-
-import type { TextareaField } from '../../core/models/schema.model';
-import { FieldAria } from '../field-aria';
-import { childTree, type RootTree } from '../field-node';
-import { Button } from '../../shared/components/button/button';
-
-/**
- * Área multilínea con contador de caracteres/palabras (base.md §5.1).
- * Los límites salen de `validators.*`, con `minWords`/`maxWords` del tipo
- * como respaldo, y coinciden con las reglas de `form-view/form-schema.ts`.
- *
- * Cuando el campo declara `tokens`, se pinta una fila de chips debajo: cada
- * chip escribe `{key}` **en la posición del cursor** (no al final) y devuelve
- * el foco, así el operador escribe → apreta → sigue escribiendo. Es la UI de
- * la plantilla de compartir; el motor back no se entera.
- */
-@Component({
-  selector: 'app-field-textarea',
-  imports: [FieldAria, FormField, Button],
-  template: `
-    <div>
-      <textarea
-        class="field-input"
-        [id]="state().name()"
-        [formField]="node()"
-        [placeholder]="field().placeholder ?? ''"
-        [attr.rows]="field().rows ?? 4"
-        #area
-      ></textarea>
-      @if (field().tokens?.length) {
-        <div class="mt-1.5 flex flex-wrap gap-2 lg:gap-1.5" data-testid="textarea-tokens">
-          @for (token of field().tokens; track token.key) {
-            <button
-              app-button
-              type="button"
-              variant="outline"
-              size="sm"
-              [attr.title]="'Inserta {' + token.key + '} en el texto'"
-              (click)="insertToken(token.key)"
-            >
-              {{ token.label }}
-            </button>
-          }
-        </div>
-      }
-      @if (counter(); as counter) {
-        <div class="mt-1 flex justify-right text-xs text-neutral" data-testid="textarea-counter">
-          {{ counter }}
-        </div>
-      }
-    </div>
-  `,
-})
-export class FieldTextarea {
-  readonly field = input.required<TextareaField>();
-  readonly tree = input.required<RootTree>();
-
-  private readonly area = viewChild<ElementRef<HTMLTextAreaElement>>('area');
-
-  protected readonly node = computed(() => childTree<string>(this.tree(), this.field().key));
-  protected readonly state = computed(() => this.node()());
-
-  /**
-   * Escribe `{key}` donde está el cursor (o reemplaza la selección) y
-   * reposiciona el cursor DESPUÉS del token insertado, para seguir escribiendo.
-   *
-   * Si el textarea aún no está montado (o no hay cursor válido) cae al
-   * final del texto: nunca revienta por un click temprano.
-   */
-  protected insertToken(key: string): void {
-    const area = this.area()?.nativeElement;
-    const token = `{${key}}`;
-    const current =
-      typeof this.state().value() === 'string' ? (this.state().value() as string) : '';
-
-    let next: string;
-    let caret: number;
-    if (area) {
-      const start = area.selectionStart ?? current.length;
-      const end = area.selectionEnd ?? start;
-      next = current.slice(0, start) + token + current.slice(end);
-      caret = start + token.length;
-    } else {
-      next = current + token;
-      caret = next.length;
-    }
-
-    this.state().value.set(next);
-
-    if (area) {
-      area.focus();
-      area.setSelectionRange(caret, caret);
-    }
-  }
-
-  /** Contador `n/m …`; `null` cuando el campo no declara límites. */
-  protected readonly counter = computed<string | null>(() => {
-    const field = this.field();
-    const value = this.state().value();
-    const text = typeof value === 'string' ? value : '';
-    const chars = text.length;
-    const words = text.trim() === '' ? 0 : text.trim().split(/\s+/).length;
-
-    const parts: string[] = [];
-    const maxChars = field.validators?.maxLength;
-    if (maxChars !== undefined) {
-      parts.push(`${chars}/${maxChars} caracteres`);
-    }
-    // `validators` tiene prioridad sobre las opciones propias del tipo
-    // (mismo criterio que las reglas de `form-schema.ts`).
-    const maxWords = field.validators?.maxWords ?? field.maxWords;
-    const minWords = field.validators?.minWords ?? field.minWords;
-    if (maxWords !== undefined) {
-      parts.push(
-        minWords !== undefined
-          ? `${words}/${maxWords} palabras (mín. ${minWords})`
-          : `${words}/${maxWords} palabras`,
-      );
-    } else if (minWords !== undefined) {
-      parts.push(`${words} palabras (mín. ${minWords})`);
-    }
-    return parts.length > 0 ? parts.join(' · ') : null;
-  });
-}

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

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

package/src/lib/fields/time/time.ts

@@ -1,28 +0,0 @@
-import { Component, computed, input } from '@angular/core';
-import { FormField } from '@angular/forms/signals';
-
-import type { TimeField } from '../../core/models/schema.model';
-import { FieldAria } from '../field-aria';
-import { childTree, type RootTree } from '../field-node';
-
-/** Selector de hora `HH:mm` (base.md §5.1). */
-@Component({
-  selector: 'app-field-time',
-  imports: [FieldAria, FormField],
-  template: `
-    <input
-      type="time"
-      class="field-input"
-      [id]="state().name()"
-      [formField]="node()"
-      [placeholder]="field().placeholder ?? ''"
-    />
-  `,
-})
-export class FieldTime {
-  readonly field = input.required<TimeField>();
-  readonly tree = input.required<RootTree>();
-
-  protected readonly node = computed(() => childTree<string>(this.tree(), this.field().key));
-  protected readonly state = computed(() => this.node()());
-}

package/src/lib/fields/unknown-render/unknown-render.ts

@@ -1,49 +0,0 @@
-import { Component, input } from '@angular/core';
-
-import { LucideInfo } from '@lucide/angular';
-
-/**
- * Degradación controlada de un tipo de campo sin renderizador (R1.10).
- *
- * El `@switch` de `field-host` NO tiene `@default`: un `type` fuera de
- * `SUPPORTED_FIELD_TYPE_LIST` no revienta el template, simplemente no pinta
- * nada. Eso cumple «nunca pantalla rota», pero deja el formulario con un
- * hueco mudo donde el operador no sabe si le falta un campo o si lo escribió
- * mal.
- *
- * Este componente es el aviso de **desarrollo**: se renderiza sólo con
- * `isDevMode()`, nombra el tipo y el campo, y deja claro que el VALOR existe
- * en el schema y se conserva — no se pierde, sólo no se pinta. En producción
- * `field-host` lo omite y deja un `console.warn`.
- *
- * No dibuja control ni etiqueta asociada: no hay `id` al que apuntar un
- * `<label for>` (mismo criterio que el bloque de `composite()` en el host).
- */
-@Component({
-  selector: 'app-unknown-render',
-  imports: [LucideInfo],
-  template: `
-    <div
-      class="mb-4 rounded-lg border border-amber-400/50 bg-amber-500/10 px-3 py-2"
-      data-field-unknown
-    >
-      <p class="flex items-center gap-1.5 text-xs font-medium text-amber-600">
-        <svg lucideInfo size="14" class="shrink-0" aria-hidden="true" />
-        Campo sin renderizador en esta versión
-      </p>
-      <p class="mt-1 text-help text-neutral">
-        Tipo <code class="rounded bg-amber-500/20 px-1 font-mono">{{ type() }}</code>
-        @if (label()) {
-          del campo «{{ label() }}»
-        }
-        — el valor existe en el schema y se conserva; sólo no se dibuja.
-      </p>
-    </div>
-  `,
-})
-export class UnknownRender {
-  /** `type` declarado en el schema y fuera de `SUPPORTED_FIELD_TYPE_LIST`. */
-  readonly type = input.required<string>();
-  /** Rótulo del campo, para que el aviso sea ubicable en el formulario. */
-  readonly label = input('');
-}

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

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

package/src/lib/fields/url/url.ts

@@ -1,53 +0,0 @@
-import { Component, computed, input } from '@angular/core';
-import { FormField } from '@angular/forms/signals';
-
-import type { UrlField } from '../../core/models/schema.model';
-import { FieldAria } from '../field-aria';
-import { childTree, type RootTree } from '../field-node';
-
-/**
- * Input con validación de URL y botón «abrir» (base.md §5.1). La validación
- * de formato la aporta Fase 10 (`pattern`/`validate`); acá solo se enlaza el
- * valor cuando es http(s).
- */
-@Component({
-  selector: 'app-field-url',
-  imports: [FieldAria, FormField],
-  template: `
-    <div class="flex items-start gap-2">
-      <input
-        type="url"
-        class="field-input"
-        [id]="state().name()"
-        [formField]="node()"
-        [placeholder]="field().placeholder ?? 'https://…'"
-      />
-      @if (href(); as href) {
-        <!-- Mismo lenguaje que la variante outline de app-button (el
-             selector del componente es button[app-button], un ancla no
-             puede usarlo): borde /40, hover con fondo, 44 px en mobile. -->
-        <a
-          class="min-h-11 shrink-0 rounded-lg border border-neutral/40 bg-surface px-3 py-2 text-sm text-neutral hover:bg-neutral/10 lg:min-h-0"
-          [href]="href"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Abrir
-        </a>
-      }
-    </div>
-  `,
-})
-export class FieldUrl {
-  readonly field = input.required<UrlField>();
-  readonly tree = input.required<RootTree>();
-
-  protected readonly node = computed(() => childTree<string>(this.tree(), this.field().key));
-  protected readonly state = computed(() => this.node()());
-
-  /** Solo http(s): evita enlazar `javascript:` u otros esquemas. */
-  protected readonly href = computed(() => {
-    const value = this.state().value();
-    return typeof value === 'string' && /^https?:\/\//i.test(value) ? value : null;
-  });
-}