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

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

@@ -0,0 +1,222 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,117 @@
+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

@@ -0,0 +1,126 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,53 @@
+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;
+  });
+}