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

package/fesm2022/tinya-code-gas-admin-ui-form-view-CEe7aZ4m.mjs

@@ -0,0 +1,4516 @@
+import { t as __exportAll } from "./tinya-code-gas-admin-ui-rolldown-runtime-DpJrqANO.mjs";
+import { c as ConfigService, d as AuthService, i as getSchema, l as ApiService } from "./tinya-code-gas-admin-ui-schema-catalog-D0Pk0wAN.mjs";
+import { n as get, r as isSupported, s as resolve, t as RENDER_CONTEXT_VACIO } from "./tinya-code-gas-admin-ui-render-registry-B88Pme-y.mjs";
+import { n as ViewNavigationService, t as evaluateCondition } from "./tinya-code-gas-admin-ui-condition-evaluator-DY2k1M3C.mjs";
+import { t as Button } from "./tinya-code-gas-admin-ui-button-BQjNW8KB.mjs";
+import { t as NotificationService } from "./tinya-code-gas-admin-ui-notification.service-LjSULER6.mjs";
+import { t as interpolateTemplate } from "./tinya-code-gas-admin-ui-template-interpolator-ewv7CkNX.mjs";
+import { t as ErrorMapperService } from "./tinya-code-gas-admin-ui-error-mapper.service-DY5y1FjE.mjs";
+import { t as EmptyState } from "./tinya-code-gas-admin-ui-empty-state-BMc0QtoT.mjs";
+import { t as FIELD_ARIA } from "./tinya-code-gas-admin-ui-field-aria-BD1Wiggc.mjs";
+import { i as listTree, n as groupTree, r as itemTree, t as childTree } from "./tinya-code-gas-admin-ui-field-node-CIK6KNN_.mjs";
+import { t as FieldFile } from "./tinya-code-gas-admin-ui-file-Dmxioog7.mjs";
+import { t as FieldImage } from "./tinya-code-gas-admin-ui-image-7UhJ7nqI.mjs";
+import { t as FieldMultiselect } from "./tinya-code-gas-admin-ui-multiselect-PB28e-jl.mjs";
+import { t as esGrupoRadio } from "./tinya-code-gas-admin-ui-radio-mode-DxvN07DY.mjs";
+import { t as Skeleton } from "./tinya-code-gas-admin-ui-skeleton-DnWK0tcZ.mjs";
+import { a as colSpanClass, i as seedFields, n as mergeRecord, r as seedFieldValue, t as isRecord } from "./tinya-code-gas-admin-ui-seed-DkVZbxPP.mjs";
+import { t as RelationDrawerService } from "./tinya-code-gas-admin-ui-relation-drawer.service-B0kT8EiW.mjs";
+import * as i0 from "@angular/core";
+import { ApplicationRef, Component, DestroyRef, InjectionToken, Injector, PendingTasks, afterRenderEffect, computed, effect, forwardRef, inject, input, isDevMode, output, resource, signal, viewChild } from "@angular/core";
+import { firstValueFrom, of } from "rxjs";
+import { ActivatedRoute, Router } from "@angular/router";
+import { LucideCheckCircle2, LucideCircleAlert, LucideCopy, LucideInfo, LucideShare, LucideShare2, LucideX } from "@lucide/angular";
+import { takeUntilDestroyed, toSignal } from "@angular/core/rxjs-interop";
+import { NgComponentOutlet } from "@angular/common";
+import { FormField, applyEach, disabled, email, form, hidden, max, maxLength, min, minLength, pattern, readonly, required, submit, validate, validateAsync } from "@angular/forms/signals";
+const TEXTO = () => import("./tinya-code-gas-admin-ui-display-text-B8CdVNpv.mjs").then((module) => module.FieldDisplayText);
+const FECHA = () => import("./tinya-code-gas-admin-ui-display-date-D7zLiDiG.mjs").then((module) => module.FieldDisplayDate);
+const NUMERO = () => import("./tinya-code-gas-admin-ui-display-number-DDMzr4Hn.mjs").then((module) => module.FieldDisplayNumber);
+const BADGE = () => import("./tinya-code-gas-admin-ui-display-badge-fwk6sDU7.mjs").then((n) => n.t).then((module) => module.FieldDisplayBadge);
+const IMAGEN = () => import("./tinya-code-gas-admin-ui-display-image-C1dhnZi1.mjs").then((module) => module.FieldDisplayImage);
+const ARCHIVO = () => import("./tinya-code-gas-admin-ui-display-file-BiIhqvQC.mjs").then((module) => module.FieldDisplayFile);
+const LISTA = () => import("./tinya-code-gas-admin-ui-display-list-DOEuUbGe.mjs").then((module) => module.FieldDisplayList);
+const DISPLAY_POR_DEFECTO = {
+	text: TEXTO,
+	textarea: TEXTO,
+	slug: TEXTO,
+	url: TEXTO,
+	email: TEXTO,
+	phone: TEXTO,
+	"readonly-text": TEXTO,
+	relation: TEXTO,
+	group: TEXTO,
+	"key-value": TEXTO,
+	"string-list": TEXTO,
+	multiselect: TEXTO,
+	time: TEXTO,
+	date: FECHA,
+	number: NUMERO,
+	currency: NUMERO,
+	boolean: BADGE,
+	select: BADGE,
+	image: IMAGEN,
+	file: ARCHIVO,
+	list: LISTA,
+	color: TEXTO,
+	"rich-select": TEXTO,
+	dropdown: TEXTO
+};
+function displayLoader(type) {
+	return Object.prototype.hasOwnProperty.call(DISPLAY_POR_DEFECTO, type) ? DISPLAY_POR_DEFECTO[type] : void 0;
+}
+var UnknownRender = class UnknownRender {
+	type = input.required(...ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []);
+	label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: UnknownRender,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: UnknownRender,
+		isStandalone: true,
+		selector: "app-unknown-render",
+		inputs: {
+			type: {
+				classPropertyName: "type",
+				publicName: "type",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		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>
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: LucideInfo,
+			selector: "svg[lucideInfo]"
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: UnknownRender,
+	decorators: [{
+		type: Component,
+		args: [{
+			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>
+  `
+		}]
+	}],
+	propDecorators: {
+		type: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "type",
+				required: true
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}]
+	}
+});
+const RENDER_CONTEXT = new InjectionToken("RENDER_CONTEXT");
+var RenderHost = class RenderHost {
+	kind = input("field", ...ngDevMode ? [{ debugName: "kind" }] : /* istanbul ignore next */ []);
+	type = input.required(...ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []);
+	config = input.required(...ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []);
+	ctx = input(RENDER_CONTEXT_VACIO, ...ngDevMode ? [{ debugName: "ctx" }] : /* istanbul ignore next */ []);
+	data = input(null, ...ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []);
+	mode = input("form", ...ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []);
+	value = input(null, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	chip = input(false, ...ngDevMode ? [{ debugName: "chip" }] : /* istanbul ignore next */ []);
+	dev = isDevMode();
+	pendientes = inject(PendingTasks);
+	esCampo = computed(() => this.kind() === "field", ...ngDevMode ? [{ debugName: "esCampo" }] : /* istanbul ignore next */ []);
+	esDisplay = computed(() => this.mode() === "display", ...ngDevMode ? [{ debugName: "esDisplay" }] : /* istanbul ignore next */ []);
+	declaraDisplay = computed(() => get(this.kind(), this.type())?.surfaces?.includes("display") ?? false, ...ngDevMode ? [{ debugName: "declaraDisplay" }] : /* istanbul ignore next */ []);
+	loaderDisplay = computed(() => this.declaraDisplay() ? displayLoader(this.type()) : void 0, ...ngDevMode ? [{ debugName: "loaderDisplay" }] : /* istanbul ignore next */ []);
+	soportaDisplay = computed(() => this.loaderDisplay() !== void 0, ...ngDevMode ? [{ debugName: "soportaDisplay" }] : /* istanbul ignore next */ []);
+	vacio = computed(() => {
+		const valor = this.value();
+		return valor === null || valor === void 0 || valor === "";
+	}, ...ngDevMode ? [{ debugName: "vacio" }] : /* istanbul ignore next */ []);
+	cfgCampo = computed(() => this.config(), ...ngDevMode ? [{ debugName: "cfgCampo" }] : /* istanbul ignore next */ []);
+	node = computed(() => childTree(this.ctx().tree, this.cfgCampo().key), ...ngDevMode ? [{ debugName: "node" }] : /* istanbul ignore next */ []);
+	state = computed(() => this.node()(), ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
+	name = computed(() => this.state().name(), ...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
+	supported = computed(() => {
+		if (!isSupported(this.kind(), this.type())) return false;
+		return this.esCampo() ? !this.state().hidden() : true;
+	}, ...ngDevMode ? [{ debugName: "supported" }] : /* istanbul ignore next */ []);
+	unsupported = computed(() => this.esDisplay() ? !this.soportaDisplay() : !isSupported(this.kind(), this.type()), ...ngDevMode ? [{ debugName: "unsupported" }] : /* istanbul ignore next */ []);
+	showUnknown = computed(() => this.unsupported() && this.dev, ...ngDevMode ? [{ debugName: "showUnknown" }] : /* istanbul ignore next */ []);
+	_trazaTipoDesconocido = effect(() => {
+		if (!this.unsupported() || this.dev) return;
+		const superficie = this.esDisplay() ? "display" : "form";
+		console.warn(`[render-host] tipo sin renderizador (${superficie}): "${this.type()}" — se omite el control.`);
+	}, ...ngDevMode ? [{ debugName: "_trazaTipoDesconocido" }] : /* istanbul ignore next */ []);
+	control = signal(null, ...ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []);
+	carga = 0;
+	_cargar = effect(() => {
+		const type = this.type();
+		const carga = ++this.carga;
+		this.control.set(null);
+		if (this.esDisplay()) {
+			const loader = this.loaderDisplay();
+			if (!loader) return;
+			this.pendientes.run(async () => {
+				const componente = await loader();
+				if (this.carga === carga) this.control.set(componente);
+			});
+			return;
+		}
+		if (!isSupported(this.kind(), type)) return;
+		this.pendientes.run(async () => {
+			const componente = await resolve(this.kind(), type, UnknownRender);
+			if (this.carga === carga) this.control.set(componente);
+		});
+	}, ...ngDevMode ? [{ debugName: "_cargar" }] : /* istanbul ignore next */ []);
+	displayInputs = computed(() => ({
+		field: this.config(),
+		value: this.value(),
+		chip: this.chip()
+	}), ...ngDevMode ? [{ debugName: "displayInputs" }] : /* istanbul ignore next */ []);
+	controlInputs = computed(() => {
+		const cfg = this.config();
+		const extras = {
+			ctx: this.ctx(),
+			data: this.data(),
+			groupContent: this.groupTpl(),
+			childTemplate: this.childTpl()
+		};
+		const descriptor = get(this.kind(), this.type());
+		if (descriptor?.inputs) return descriptor.inputs(cfg, extras);
+		return this.esCampo() ? {
+			field: cfg,
+			tree: this.ctx().tree
+		} : {
+			widget: cfg,
+			data: this.data()
+		};
+	}, ...ngDevMode ? [{ debugName: "controlInputs" }] : /* istanbul ignore next */ []);
+	group = computed(() => this.config(), ...ngDevMode ? [{ debugName: "group" }] : /* istanbul ignore next */ []);
+	list = computed(() => this.config(), ...ngDevMode ? [{ debugName: "list" }] : /* istanbul ignore next */ []);
+	groupTpl = viewChild("groupContent", ...ngDevMode ? [{ debugName: "groupTpl" }] : /* istanbul ignore next */ []);
+	childTpl = viewChild("childTpl", ...ngDevMode ? [{ debugName: "childTpl" }] : /* istanbul ignore next */ []);
+	groupChildCtx = computed(() => ({
+		...this.ctx(),
+		tree: groupTree(this.ctx().tree, this.config().key),
+		pathPrefix: `${this.ctx().pathPrefix}${this.config().key}.`
+	}), ...ngDevMode ? [{ debugName: "groupChildCtx" }] : /* istanbul ignore next */ []);
+	listChildCtx(child) {
+		return {
+			tree: child.tree,
+			serverErrors: child.errors,
+			pathPrefix: child.prefix,
+			exists: child.exists,
+			resource: this.ctx().resource
+		};
+	}
+	colSpan(width) {
+		return colSpanClass(width);
+	}
+	multiselectCfg = computed(() => this.config(), ...ngDevMode ? [{ debugName: "multiselectCfg" }] : /* istanbul ignore next */ []);
+	imageCfg = computed(() => this.config(), ...ngDevMode ? [{ debugName: "imageCfg" }] : /* istanbul ignore next */ []);
+	fileCfg = computed(() => this.config(), ...ngDevMode ? [{ debugName: "fileCfg" }] : /* istanbul ignore next */ []);
+	multiselectNode = computed(() => childTree(this.ctx().tree, this.config().key), ...ngDevMode ? [{ debugName: "multiselectNode" }] : /* istanbul ignore next */ []);
+	imageNode = computed(() => childTree(this.ctx().tree, this.config().key), ...ngDevMode ? [{ debugName: "imageNode" }] : /* istanbul ignore next */ []);
+	fileNode = computed(() => childTree(this.ctx().tree, this.config().key), ...ngDevMode ? [{ debugName: "fileNode" }] : /* istanbul ignore next */ []);
+	errorMessage = computed(() => {
+		const serverError = this.ctx().serverErrors[`${this.ctx().pathPrefix}${this.config().key}`];
+		if (serverError) return serverError;
+		const state = this.state();
+		if (!state.invalid() || !state.touched()) return null;
+		return state.errors()[0]?.message ?? "Revisa este campo.";
+	}, ...ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []);
+	composite = computed(() => {
+		const cfg = this.cfgCampo();
+		if ((/* @__PURE__ */ new Set([
+			"list",
+			"key-value",
+			"string-list",
+			"multiselect"
+		])).has(cfg.type)) return true;
+		return cfg.type === "select" && esGrupoRadio(cfg);
+	}, ...ngDevMode ? [{ debugName: "composite" }] : /* istanbul ignore next */ []);
+	helpId = computed(() => this.cfgCampo().help && !this.errorMessage() ? `${this.name()}-help` : null, ...ngDevMode ? [{ debugName: "helpId" }] : /* istanbul ignore next */ []);
+	errorId = computed(() => this.errorMessage() ? `${this.name()}-error` : null, ...ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []);
+	describedBy = computed(() => [this.helpId(), this.errorId()].filter(Boolean).join(" ") || null, ...ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []);
+	invalid = computed(() => this.errorMessage() !== null, ...ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []);
+	required = computed(() => this.cfgCampo().required ?? false, ...ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []);
+	schema = computed(() => getSchema(this.ctx().resource), ...ngDevMode ? [{ debugName: "schema" }] : /* istanbul ignore next */ []);
+	markOptionals = computed(() => {
+		const fields = this.schema()?.fields ?? [];
+		if (fields.length === 0) return false;
+		return fields.filter((field) => field.required).length / fields.length >= .75;
+	}, ...ngDevMode ? [{ debugName: "markOptionals" }] : /* istanbul ignore next */ []);
+	showRequiredMark = computed(() => !this.markOptionals() && this.cfgCampo().required, ...ngDevMode ? [{ debugName: "showRequiredMark" }] : /* istanbul ignore next */ []);
+	showOptionalMark = computed(() => this.markOptionals() && !this.cfgCampo().required, ...ngDevMode ? [{ debugName: "showOptionalMark" }] : /* istanbul ignore next */ []);
+	get tree() {
+		return this.ctx().tree;
+	}
+	get serverErrors() {
+		return this.ctx().serverErrors;
+	}
+	get pathPrefix() {
+		return this.ctx().pathPrefix;
+	}
+	get exists() {
+		return this.ctx().exists;
+	}
+	get resource() {
+		return this.ctx().resource;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: RenderHost,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: RenderHost,
+		isStandalone: true,
+		selector: "app-render-host",
+		inputs: {
+			kind: {
+				classPropertyName: "kind",
+				publicName: "kind",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			type: {
+				classPropertyName: "type",
+				publicName: "type",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			config: {
+				classPropertyName: "config",
+				publicName: "config",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			ctx: {
+				classPropertyName: "ctx",
+				publicName: "ctx",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			data: {
+				classPropertyName: "data",
+				publicName: "data",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			mode: {
+				classPropertyName: "mode",
+				publicName: "mode",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			chip: {
+				classPropertyName: "chip",
+				publicName: "chip",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		providers: [{
+			provide: FIELD_ARIA,
+			useExisting: forwardRef(() => RenderHost)
+		}, {
+			provide: RENDER_CONTEXT,
+			useExisting: forwardRef(() => RenderHost)
+		}],
+		viewQueries: [{
+			propertyName: "groupTpl",
+			first: true,
+			predicate: ["groupContent"],
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "childTpl",
+			first: true,
+			predicate: ["childTpl"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <ng-template #groupContent>
+      @for (child of group().fields; track child.key) {
+        <div [class]="colSpan(child.width)">
+          <app-render-host
+            [kind]="kind()"
+            [type]="child.type"
+            [config]="child"
+            [ctx]="groupChildCtx()"
+          />
+        </div>
+      }
+    </ng-template>
+
+    <ng-template #childTpl let-child>
+      @for (sub of child.fields; track sub.key) {
+        <div [class]="child.row ? 'min-w-0 grow' : colSpan(sub.width)">
+          <app-render-host
+            [kind]="kind()"
+            [type]="sub.type"
+            [config]="sub"
+            [ctx]="listChildCtx(child)"
+          />
+        </div>
+      }
+    </ng-template>
+
+    @if (esDisplay()) {
+      <!-- Rama de display (R4.1 · R4.2): sólo el valor crudo. El host no
+           lee el árbol, no dibuja etiqueta ni error y no conoce la
+           sección: detail-view agrupa y este bloque pinta. -->
+      @if (vacio()) {
+        <span aria-hidden="true">—</span>
+      } @else if (soportaDisplay()) {
+        @if (control()) {
+          <ng-container
+            [ngComponentOutlet]="control()"
+            [ngComponentOutletInputs]="displayInputs()"
+          />
+        } @else {
+          <app-skeleton [lines]="1" [height]="20" />
+        }
+      } @else if (showUnknown()) {
+        <app-unknown-render [type]="type()" [label]="config().label" />
+      }
+    } @else if (supported()) {
+      @if (esCampo()) {
+        <div class="mb-4" [class.field-enter]="cfgCampo().visibleWhen" [attr.data-field]="name()">
+          @if (type() !== 'group') {
+            @if (composite()) {
+              <!-- Sin control único no existe ancla para el atributo for del
+                   label: apuntaría a un id inexistente. Se dibuja como texto
+                   (en listas/key-value los hijos reciben su etiqueta por
+                   campo anidado; en un select en modo radio cada opción
+                   trae su label implícito y el grupo va con aria-label). -->
+              <div class="mb-1 text-label font-medium">
+                {{ config().label }}
+                @if (showRequiredMark()) {
+                  <span aria-hidden="true" class="text-danger">*</span>
+                }
+                @if (showOptionalMark()) {
+                  <span class="font-normal text-neutral">(opcional)</span>
+                }
+              </div>
+            } @else {
+              <label [for]="name()" class="mb-1 block text-label font-medium">
+                {{ config().label }}
+                @if (showRequiredMark()) {
+                  <span aria-hidden="true" class="text-danger">*</span>
+                }
+                @if (showOptionalMark()) {
+                  <span class="font-normal text-neutral">(opcional)</span>
+                }
+              </label>
+            }
+          }
+
+          @if (type() === 'multiselect') {
+            <!-- Tres de los veintiuno no pueden pasar por "NgComponentOutlet": su
+               sincronización con Signal Forms vive en ɵɵcontrol, una
+               instrucción que el compilador emite únicamente junto al binding
+               formField de la propia plantilla. Sin ese binding escrito en el
+               HTML el model() de value nunca se inicializa y el control lanza
+               NG0952. Se declaran a mano (D27) y el resto de tipos siguen
+               saliendo del registro. -->
+            <app-field-multiselect
+              [id]="name()"
+              [field]="multiselectCfg()"
+              [formField]="multiselectNode()"
+              [tree]="ctx().tree"
+            />
+          } @else if (type() === 'image') {
+            <app-field-image
+              [id]="name()"
+              [field]="imageCfg()"
+              [formField]="imageNode()"
+              [resource]="ctx().resource"
+            />
+          } @else if (type() === 'file') {
+            <app-field-file
+              [id]="name()"
+              [field]="fileCfg()"
+              [formField]="fileNode()"
+              [resource]="ctx().resource"
+            />
+          } @else {
+            @if (control()) {
+              <ng-container
+                [ngComponentOutlet]="control()"
+                [ngComponentOutletInputs]="controlInputs()"
+              />
+            } @else {
+              <app-skeleton [lines]="2" [height]="32" />
+            }
+          }
+
+          @if (errorMessage(); as message) {
+            <p
+              [id]="errorId()"
+              class="mt-1 flex items-center gap-1 text-help text-danger"
+              role="alert"
+            >
+              <svg lucideCircleAlert size="14" class="shrink-0" />
+              {{ message }}
+            </p>
+          } @else if (cfgCampo().help; as help) {
+            <p [id]="helpId()" class="mt-1 text-help text-neutral">{{ help }}</p>
+          }
+        </div>
+      } @else {
+        <!-- Rama de widget (R3.6): el mismo outlet y el mismo cableado que
+             un campo, pero sin el envoltorio — un widget no tiene etiqueta
+             asociada, ni marca required, ni error, ni ayuda. El ancho en la
+             grilla lo pone su host (app-widget-host), no el motor. -->
+        @if (control()) {
+          <ng-container
+            [ngComponentOutlet]="control()"
+            [ngComponentOutletInputs]="controlInputs()"
+          />
+        } @else {
+          <app-skeleton [lines]="2" [height]="32" />
+        }
+      }
+    } @else if (showUnknown()) {
+      <!-- R1.10: degradación controlada. Un tipo fuera del catálogo no
+           revienta; en dev se avisa y en producción sólo se omite. -->
+      <app-unknown-render [type]="type()" [label]="config().label" />
+    }
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "component",
+				type: RenderHost,
+				selector: "app-render-host",
+				inputs: [
+					"kind",
+					"type",
+					"config",
+					"ctx",
+					"data",
+					"mode",
+					"value",
+					"chip"
+				]
+			},
+			{
+				kind: "component",
+				type: FieldFile,
+				selector: "app-field-file",
+				inputs: [
+					"field",
+					"resource",
+					"value",
+					"disabled"
+				],
+				outputs: ["valueChange", "touch"]
+			},
+			{
+				kind: "component",
+				type: FieldImage,
+				selector: "app-field-image",
+				inputs: [
+					"field",
+					"resource",
+					"value",
+					"disabled"
+				],
+				outputs: ["valueChange", "touch"]
+			},
+			{
+				kind: "component",
+				type: FieldMultiselect,
+				selector: "app-field-multiselect",
+				inputs: [
+					"field",
+					"tree",
+					"value",
+					"disabled"
+				],
+				outputs: ["valueChange"]
+			},
+			{
+				kind: "directive",
+				type: FormField,
+				selector: "[formField]",
+				inputs: ["formField"],
+				exportAs: ["formField"]
+			},
+			{
+				kind: "component",
+				type: LucideCircleAlert,
+				selector: "svg[lucideCircleAlert], svg[lucideAlertCircle]"
+			},
+			{
+				kind: "directive",
+				type: NgComponentOutlet,
+				selector: "[ngComponentOutlet]",
+				inputs: [
+					"ngComponentOutlet",
+					"ngComponentOutletInputs",
+					"ngComponentOutletInjector",
+					"ngComponentOutletEnvironmentInjector",
+					"ngComponentOutletContent",
+					"ngComponentOutletNgModule"
+				],
+				exportAs: ["ngComponentOutlet"]
+			},
+			{
+				kind: "component",
+				type: Skeleton,
+				selector: "app-skeleton",
+				inputs: [
+					"lines",
+					"height",
+					"width"
+				]
+			},
+			{
+				kind: "component",
+				type: UnknownRender,
+				selector: "app-unknown-render",
+				inputs: ["type", "label"]
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: RenderHost,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-render-host",
+			imports: [
+				FieldFile,
+				FieldImage,
+				FieldMultiselect,
+				FormField,
+				LucideCircleAlert,
+				NgComponentOutlet,
+				RenderHost,
+				Skeleton,
+				UnknownRender
+			],
+			providers: [{
+				provide: FIELD_ARIA,
+				useExisting: forwardRef(() => RenderHost)
+			}, {
+				provide: RENDER_CONTEXT,
+				useExisting: forwardRef(() => RenderHost)
+			}],
+			template: `
+    <ng-template #groupContent>
+      @for (child of group().fields; track child.key) {
+        <div [class]="colSpan(child.width)">
+          <app-render-host
+            [kind]="kind()"
+            [type]="child.type"
+            [config]="child"
+            [ctx]="groupChildCtx()"
+          />
+        </div>
+      }
+    </ng-template>
+
+    <ng-template #childTpl let-child>
+      @for (sub of child.fields; track sub.key) {
+        <div [class]="child.row ? 'min-w-0 grow' : colSpan(sub.width)">
+          <app-render-host
+            [kind]="kind()"
+            [type]="sub.type"
+            [config]="sub"
+            [ctx]="listChildCtx(child)"
+          />
+        </div>
+      }
+    </ng-template>
+
+    @if (esDisplay()) {
+      <!-- Rama de display (R4.1 · R4.2): sólo el valor crudo. El host no
+           lee el árbol, no dibuja etiqueta ni error y no conoce la
+           sección: detail-view agrupa y este bloque pinta. -->
+      @if (vacio()) {
+        <span aria-hidden="true">—</span>
+      } @else if (soportaDisplay()) {
+        @if (control()) {
+          <ng-container
+            [ngComponentOutlet]="control()"
+            [ngComponentOutletInputs]="displayInputs()"
+          />
+        } @else {
+          <app-skeleton [lines]="1" [height]="20" />
+        }
+      } @else if (showUnknown()) {
+        <app-unknown-render [type]="type()" [label]="config().label" />
+      }
+    } @else if (supported()) {
+      @if (esCampo()) {
+        <div class="mb-4" [class.field-enter]="cfgCampo().visibleWhen" [attr.data-field]="name()">
+          @if (type() !== 'group') {
+            @if (composite()) {
+              <!-- Sin control único no existe ancla para el atributo for del
+                   label: apuntaría a un id inexistente. Se dibuja como texto
+                   (en listas/key-value los hijos reciben su etiqueta por
+                   campo anidado; en un select en modo radio cada opción
+                   trae su label implícito y el grupo va con aria-label). -->
+              <div class="mb-1 text-label font-medium">
+                {{ config().label }}
+                @if (showRequiredMark()) {
+                  <span aria-hidden="true" class="text-danger">*</span>
+                }
+                @if (showOptionalMark()) {
+                  <span class="font-normal text-neutral">(opcional)</span>
+                }
+              </div>
+            } @else {
+              <label [for]="name()" class="mb-1 block text-label font-medium">
+                {{ config().label }}
+                @if (showRequiredMark()) {
+                  <span aria-hidden="true" class="text-danger">*</span>
+                }
+                @if (showOptionalMark()) {
+                  <span class="font-normal text-neutral">(opcional)</span>
+                }
+              </label>
+            }
+          }
+
+          @if (type() === 'multiselect') {
+            <!-- Tres de los veintiuno no pueden pasar por "NgComponentOutlet": su
+               sincronización con Signal Forms vive en ɵɵcontrol, una
+               instrucción que el compilador emite únicamente junto al binding
+               formField de la propia plantilla. Sin ese binding escrito en el
+               HTML el model() de value nunca se inicializa y el control lanza
+               NG0952. Se declaran a mano (D27) y el resto de tipos siguen
+               saliendo del registro. -->
+            <app-field-multiselect
+              [id]="name()"
+              [field]="multiselectCfg()"
+              [formField]="multiselectNode()"
+              [tree]="ctx().tree"
+            />
+          } @else if (type() === 'image') {
+            <app-field-image
+              [id]="name()"
+              [field]="imageCfg()"
+              [formField]="imageNode()"
+              [resource]="ctx().resource"
+            />
+          } @else if (type() === 'file') {
+            <app-field-file
+              [id]="name()"
+              [field]="fileCfg()"
+              [formField]="fileNode()"
+              [resource]="ctx().resource"
+            />
+          } @else {
+            @if (control()) {
+              <ng-container
+                [ngComponentOutlet]="control()"
+                [ngComponentOutletInputs]="controlInputs()"
+              />
+            } @else {
+              <app-skeleton [lines]="2" [height]="32" />
+            }
+          }
+
+          @if (errorMessage(); as message) {
+            <p
+              [id]="errorId()"
+              class="mt-1 flex items-center gap-1 text-help text-danger"
+              role="alert"
+            >
+              <svg lucideCircleAlert size="14" class="shrink-0" />
+              {{ message }}
+            </p>
+          } @else if (cfgCampo().help; as help) {
+            <p [id]="helpId()" class="mt-1 text-help text-neutral">{{ help }}</p>
+          }
+        </div>
+      } @else {
+        <!-- Rama de widget (R3.6): el mismo outlet y el mismo cableado que
+             un campo, pero sin el envoltorio — un widget no tiene etiqueta
+             asociada, ni marca required, ni error, ni ayuda. El ancho en la
+             grilla lo pone su host (app-widget-host), no el motor. -->
+        @if (control()) {
+          <ng-container
+            [ngComponentOutlet]="control()"
+            [ngComponentOutletInputs]="controlInputs()"
+          />
+        } @else {
+          <app-skeleton [lines]="2" [height]="32" />
+        }
+      }
+    } @else if (showUnknown()) {
+      <!-- R1.10: degradación controlada. Un tipo fuera del catálogo no
+           revienta; en dev se avisa y en producción sólo se omite. -->
+      <app-unknown-render [type]="type()" [label]="config().label" />
+    }
+  `
+		}]
+	}],
+	propDecorators: {
+		kind: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "kind",
+				required: false
+			}]
+		}],
+		type: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "type",
+				required: true
+			}]
+		}],
+		config: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "config",
+				required: true
+			}]
+		}],
+		ctx: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ctx",
+				required: false
+			}]
+		}],
+		data: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "data",
+				required: false
+			}]
+		}],
+		mode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mode",
+				required: false
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		chip: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "chip",
+				required: false
+			}]
+		}],
+		groupTpl: [{
+			type: i0.ViewChild,
+			args: ["groupContent", { isSignal: true }]
+		}],
+		childTpl: [{
+			type: i0.ViewChild,
+			args: ["childTpl", { isSignal: true }]
+		}]
+	}
+});
+function buildShareMessage(url, shareText) {
+	const text = (shareText ?? "").trim();
+	if (!text) return url;
+	if (url && mentionsSite(text, url)) return text;
+	return url ? `${text} ${url}` : text;
+}
+function mentionsSite(text, url) {
+	if (text.includes(url)) return true;
+	try {
+		const { origin } = new URL(url);
+		return origin !== "null" && text.includes(origin);
+	} catch {
+		return false;
+	}
+}
+async function writeClipboard(text) {
+	const clipboard = typeof navigator !== "undefined" ? navigator.clipboard : void 0;
+	if (clipboard && typeof clipboard.writeText === "function") try {
+		await clipboard.writeText(text);
+		return true;
+	} catch {}
+	return legacyCopy(text);
+}
+function legacyCopy(text) {
+	if (typeof document === "undefined" || typeof document.execCommand !== "function") return false;
+	const area = document.createElement("textarea");
+	area.value = text;
+	area.setAttribute("readonly", "");
+	area.style.position = "fixed";
+	area.style.top = "0";
+	area.style.opacity = "0";
+	document.body.appendChild(area);
+	area.select();
+	let copied = false;
+	try {
+		copied = document.execCommand("copy");
+	} catch {
+		copied = false;
+	}
+	document.body.removeChild(area);
+	return copied;
+}
+function isShareAction(action) {
+	return action.type === "copy-share";
+}
+function isTriggerAction(action) {
+	return action.type === "trigger";
+}
+function resolveShare(action, vars) {
+	const template = action.shareTextTemplate || vars["share_message_template"];
+	return {
+		url: interpolateTemplate(action.urlTemplate, vars),
+		shareText: template ? interpolateTemplate(template, vars) : ""
+	};
+}
+const actionDescriptors = [
+	{
+		type: "copy-share",
+		surfaces: [
+			"row",
+			"detail",
+			"post-create"
+		],
+		icon: LucideShare2,
+		run: async (ctx, action) => {
+			const { url, shareText } = resolveShare(action, ctx.vars);
+			const message = buildShareMessage(url, shareText);
+			if (await writeClipboard(message)) ctx.toast.success("Mensaje copiado al portapapeles.");
+			else ctx.toast.info(`Copiar manualmente: ${message}`);
+			return { ok: true };
+		}
+	},
+	{
+		type: "navigate",
+		surfaces: ["row", "detail"],
+		run: async (ctx, action) => {
+			const url = interpolateTemplate(action.urlTemplate, ctx.vars);
+			if (/^https?:\/\//.test(url)) window.open(url, "_blank", "noopener");
+			else await ctx.router.navigateByUrl(url);
+			return { ok: true };
+		}
+	},
+	{
+		type: "trigger",
+		surfaces: ["row", "detail"],
+		confirm: true,
+		run: async (ctx, action) => {
+			const declared = action;
+			const rawKey = ctx.record?.[ctx.keyField];
+			if (rawKey === null || rawKey === void 0 || rawKey === "") throw new Error(`La acción «${declared.label}» necesita la clave ${ctx.keyField} del registro.`);
+			const name = declared.name ?? declared.id;
+			const route = `/admin/${ctx.resource}/${String(rawKey)}/actions/${name}`;
+			await firstValueFrom(ctx.api.request("POST", route));
+			return {
+				ok: true,
+				reload: true
+			};
+		}
+	}
+];
+const ACCIONES = /* @__PURE__ */ new Map();
+function registerAction(descriptor) {
+	ACCIONES.set(descriptor.type, descriptor);
+}
+function getAction(type) {
+	return ACCIONES.get(type);
+}
+function actionsFor(surface) {
+	return [...ACCIONES.values()].filter((descriptor) => descriptor.surfaces.includes(surface));
+}
+function actionType(action) {
+	return action.type ?? "navigate";
+}
+function actionTypes() {
+	return [...ACCIONES.keys()];
+}
+for (const descriptor of actionDescriptors) registerAction(descriptor);
+var FieldHost = class FieldHost {
+	field = input.required(...ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []);
+	tree = input.required(...ngDevMode ? [{ debugName: "tree" }] : /* istanbul ignore next */ []);
+	exists = input(false, ...ngDevMode ? [{ debugName: "exists" }] : /* istanbul ignore next */ []);
+	serverErrors = input({}, ...ngDevMode ? [{ debugName: "serverErrors" }] : /* istanbul ignore next */ []);
+	pathPrefix = input("", ...ngDevMode ? [{ debugName: "pathPrefix" }] : /* istanbul ignore next */ []);
+	resource = input("", ...ngDevMode ? [{ debugName: "resource" }] : /* istanbul ignore next */ []);
+	ctx = computed(() => ({
+		tree: this.tree(),
+		serverErrors: this.serverErrors(),
+		pathPrefix: this.pathPrefix(),
+		exists: this.exists(),
+		resource: this.resource()
+	}), ...ngDevMode ? [{ debugName: "ctx" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: FieldHost,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.3",
+		type: FieldHost,
+		isStandalone: true,
+		selector: "app-field-host",
+		inputs: {
+			field: {
+				classPropertyName: "field",
+				publicName: "field",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			tree: {
+				classPropertyName: "tree",
+				publicName: "tree",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			exists: {
+				classPropertyName: "exists",
+				publicName: "exists",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			serverErrors: {
+				classPropertyName: "serverErrors",
+				publicName: "serverErrors",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			pathPrefix: {
+				classPropertyName: "pathPrefix",
+				publicName: "pathPrefix",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			resource: {
+				classPropertyName: "resource",
+				publicName: "resource",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: `
+    <app-render-host kind="field" [type]="field().type" [config]="field()" [ctx]="ctx()" />
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: RenderHost,
+			selector: "app-render-host",
+			inputs: [
+				"kind",
+				"type",
+				"config",
+				"ctx",
+				"data",
+				"mode",
+				"value",
+				"chip"
+			]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: FieldHost,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-field-host",
+			imports: [RenderHost],
+			template: `
+    <app-render-host kind="field" [type]="field().type" [config]="field()" [ctx]="ctx()" />
+  `
+		}]
+	}],
+	propDecorators: {
+		field: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "field",
+				required: true
+			}]
+		}],
+		tree: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tree",
+				required: true
+			}]
+		}],
+		exists: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "exists",
+				required: false
+			}]
+		}],
+		serverErrors: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "serverErrors",
+				required: false
+			}]
+		}],
+		pathPrefix: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "pathPrefix",
+				required: false
+			}]
+		}],
+		resource: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "resource",
+				required: false
+			}]
+		}]
+	}
+});
+const FOCUSABLE = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
+function isVisibleNow(element) {
+	if (element.hasAttribute("hidden") || element.closest("[hidden]") !== null) return false;
+	const check = element.checkVisibility;
+	return typeof check !== "function" || check.call(element);
+}
+const WIDTHS = {
+	sm: "max-w-sm",
+	md: "max-w-lg",
+	lg: "max-w-2xl"
+};
+let titleCounter$1 = 0;
+var Drawer = class Drawer {
+	open = input(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+	title = input("Editar", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+	subtitle = input(null, ...ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	closeLabel = input("Cerrar", ...ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []);
+	close = output();
+	titleId = `drawer-title-${++titleCounter$1}`;
+	widthClass = computed(() => WIDTHS[this.size()], ...ngDevMode ? [{ debugName: "widthClass" }] : /* istanbul ignore next */ []);
+	dialogRef = viewChild("dialog", ...ngDevMode ? [{ debugName: "dialogRef" }] : /* istanbul ignore next */ []);
+	lastFocused = null;
+	focusEffect = afterRenderEffect(() => {
+		const open = this.open();
+		const dialog = this.dialogRef();
+		if (open && dialog) {
+			const active = document.activeElement;
+			if (active !== dialog.nativeElement && this.lastFocused === null) this.lastFocused = active instanceof HTMLElement ? active : null;
+			dialog.nativeElement.focus();
+		} else if (!open && this.lastFocused !== null) {
+			this.lastFocused.focus();
+			this.lastFocused = null;
+		}
+	}, ...ngDevMode ? [{ debugName: "focusEffect" }] : /* istanbul ignore next */ []);
+	ngOnDestroy() {
+		if (this.lastFocused?.isConnected) this.lastFocused.focus();
+		this.lastFocused = null;
+	}
+	onEscape() {
+		if (this.open()) this.close.emit();
+	}
+	onTab(rawEvent) {
+		const event = rawEvent;
+		const dialog = this.dialogRef()?.nativeElement;
+		if (!this.open() || !dialog) return;
+		const focusable = Array.from(dialog.querySelectorAll(FOCUSABLE)).filter((element) => isVisibleNow(element));
+		if (focusable.length === 0) {
+			event.preventDefault();
+			dialog.focus();
+			return;
+		}
+		const first = focusable[0];
+		const last = focusable[focusable.length - 1];
+		const active = document.activeElement;
+		if (event.shiftKey && (active === first || active === dialog)) {
+			event.preventDefault();
+			last.focus();
+		} else if (!event.shiftKey && active === last) {
+			event.preventDefault();
+			first.focus();
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: Drawer,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: Drawer,
+		isStandalone: true,
+		selector: "app-drawer",
+		inputs: {
+			open: {
+				classPropertyName: "open",
+				publicName: "open",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			title: {
+				classPropertyName: "title",
+				publicName: "title",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			subtitle: {
+				classPropertyName: "subtitle",
+				publicName: "subtitle",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closeLabel: {
+				classPropertyName: "closeLabel",
+				publicName: "closeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { close: "close" },
+		host: { listeners: {
+			"document:keydown.escape": "onEscape()",
+			"document:keydown.tab": "onTab($event)",
+			"document:keydown.shift.tab": "onTab($event)"
+		} },
+		viewQueries: [{
+			propertyName: "dialogRef",
+			first: true,
+			predicate: ["dialog"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    @if (open()) {
+      <div class="fixed inset-0 z-50">
+        <div class="absolute inset-0 bg-black/50" aria-hidden="true" (click)="close.emit()"></div>
+        <section
+          #dialog
+          role="dialog"
+          aria-modal="true"
+          [attr.aria-labelledby]="titleId"
+          tabindex="-1"
+          class="absolute inset-y-0 right-0 flex w-full flex-col bg-surface-raised shadow-2xl focus:outline-none"
+          [class]="widthClass()"
+        >
+          <header
+            class="flex items-start justify-between gap-4 border-b border-neutral/20 px-5 py-4"
+          >
+            <div>
+              <h2 [id]="titleId" class="font-display text-section font-semibold">{{ title() }}</h2>
+              @if (subtitle(); as subtitleText) {
+                <p class="mt-1 text-sm text-neutral/70">{{ subtitleText }}</p>
+              }
+            </div>
+            <button
+              type="button"
+              class="flex min-h-11 min-w-11 items-center justify-center rounded text-neutral hover:bg-neutral/10 focus-visible:outline-2 focus-visible:outline-primary lg:min-h-0 lg:min-w-0"
+              [attr.aria-label]="closeLabel()"
+              (click)="close.emit()"
+            >
+              <svg lucideX size="18" />
+            </button>
+          </header>
+
+          <div class="flex-1 overflow-y-auto px-5 py-4">
+            <ng-content />
+          </div>
+
+          <div class="border-t border-neutral/20 px-5 py-4">
+            <ng-content select="[drawer-actions]" />
+          </div>
+        </section>
+      </div>
+    }
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: LucideX,
+			selector: "svg[lucideX]"
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: Drawer,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-drawer",
+			imports: [LucideX],
+			host: {
+				"(document:keydown.escape)": "onEscape()",
+				"(document:keydown.tab)": "onTab($event)",
+				"(document:keydown.shift.tab)": "onTab($event)"
+			},
+			template: `
+    @if (open()) {
+      <div class="fixed inset-0 z-50">
+        <div class="absolute inset-0 bg-black/50" aria-hidden="true" (click)="close.emit()"></div>
+        <section
+          #dialog
+          role="dialog"
+          aria-modal="true"
+          [attr.aria-labelledby]="titleId"
+          tabindex="-1"
+          class="absolute inset-y-0 right-0 flex w-full flex-col bg-surface-raised shadow-2xl focus:outline-none"
+          [class]="widthClass()"
+        >
+          <header
+            class="flex items-start justify-between gap-4 border-b border-neutral/20 px-5 py-4"
+          >
+            <div>
+              <h2 [id]="titleId" class="font-display text-section font-semibold">{{ title() }}</h2>
+              @if (subtitle(); as subtitleText) {
+                <p class="mt-1 text-sm text-neutral/70">{{ subtitleText }}</p>
+              }
+            </div>
+            <button
+              type="button"
+              class="flex min-h-11 min-w-11 items-center justify-center rounded text-neutral hover:bg-neutral/10 focus-visible:outline-2 focus-visible:outline-primary lg:min-h-0 lg:min-w-0"
+              [attr.aria-label]="closeLabel()"
+              (click)="close.emit()"
+            >
+              <svg lucideX size="18" />
+            </button>
+          </header>
+
+          <div class="flex-1 overflow-y-auto px-5 py-4">
+            <ng-content />
+          </div>
+
+          <div class="border-t border-neutral/20 px-5 py-4">
+            <ng-content select="[drawer-actions]" />
+          </div>
+        </section>
+      </div>
+    }
+  `
+		}]
+	}],
+	propDecorators: {
+		open: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "open",
+				required: false
+			}]
+		}],
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: false
+			}]
+		}],
+		subtitle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "subtitle",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		closeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeLabel",
+				required: false
+			}]
+		}],
+		close: [{
+			type: i0.Output,
+			args: ["close"]
+		}],
+		dialogRef: [{
+			type: i0.ViewChild,
+			args: ["dialog", { isSignal: true }]
+		}]
+	}
+});
+function validateMinWords(value, min) {
+	const words = wordCount(value);
+	if (words === null) return null;
+	return words >= min ? null : `Debe tener al menos ${min} palabras.`;
+}
+function validateMaxWords(value, max) {
+	const words = wordCount(value);
+	if (words === null) return null;
+	return words <= max ? null : `Como máximo ${max} palabras.`;
+}
+function isEmpty(value) {
+	return value === void 0 || value === null || value === "";
+}
+function wordCount(value) {
+	if (isEmpty(value) || typeof value !== "string") return null;
+	return value.trim().split(/\s+/).filter(Boolean).length;
+}
+const TEXT_TYPES = /* @__PURE__ */ new Set([
+	"text",
+	"textarea",
+	"email",
+	"url",
+	"slug",
+	"phone",
+	"time",
+	"readonly-text",
+	"select",
+	"relation"
+]);
+const LIST_TYPES = /* @__PURE__ */ new Set([
+	"list",
+	"string-list",
+	"key-value"
+]);
+function minLengthOf(field) {
+	return TEXT_TYPES.has(field.type) ? field.validators?.minLength : void 0;
+}
+function maxLengthOf(field) {
+	if (!TEXT_TYPES.has(field.type)) return void 0;
+	if (field.type === "text") return field.validators?.maxLength ?? field.maxLength;
+	return field.validators?.maxLength;
+}
+function patternOf(field) {
+	if (!TEXT_TYPES.has(field.type)) return void 0;
+	if (field.type === "text") return field.validators?.pattern ?? field.pattern;
+	return field.validators?.pattern;
+}
+function minWordsOf(field) {
+	if (!TEXT_TYPES.has(field.type)) return void 0;
+	if (field.type === "textarea") return field.validators?.minWords ?? field.minWords;
+	return field.validators?.minWords;
+}
+function maxWordsOf(field) {
+	if (!TEXT_TYPES.has(field.type)) return void 0;
+	if (field.type === "textarea") return field.validators?.maxWords ?? field.maxWords;
+	return field.validators?.maxWords;
+}
+function numberBoundOf(field, bound) {
+	if (field.type === "number") return field.validators?.[bound] ?? (bound === "min" ? field.min : field.max);
+	if (field.type === "currency") return field.validators?.[bound];
+}
+function minItemsOf(field) {
+	if (!LIST_TYPES.has(field.type)) return void 0;
+	const list = field;
+	return list.required ? Math.max(list.min ?? 1, 1) : list.min;
+}
+function maxItemsOf(field) {
+	if (!LIST_TYPES.has(field.type)) return void 0;
+	return field.max;
+}
+function toError(kind, message) {
+	return message === null ? null : {
+		kind,
+		message
+	};
+}
+function patternMessageFor(field) {
+	const hint = field.help?.trim().replace(/[.。]+$/, "");
+	return hint ? `Formato esperado: ${hint}.` : "Revisa el formato de este campo.";
+}
+function validateUrl(value) {
+	if (value === void 0 || value === null || value === "") return null;
+	if (typeof value !== "string") return URL_MESSAGE;
+	return /^https?:\/\/\S+$/i.test(value) ? null : URL_MESSAGE;
+}
+const URL_MESSAGE = "Debe ser una URL válida (http o https).";
+function dateError(value, bound, iso) {
+	if (typeof value !== "string" || value === "") return null;
+	if (!(bound === "min" ? value < iso : value > iso)) return null;
+	return {
+		kind: `${bound}-date`,
+		message: bound === "min" ? `La fecha no puede ser anterior a ${iso}.` : `La fecha no puede ser posterior a ${iso}.`
+	};
+}
+function registerUrlRule(path) {
+	validate(path, (ctx) => toError("url", validateUrl(ctx.value())));
+}
+function registerEmailRule(path) {
+	email(path, { message: "Debe ser un correo electrónico válido." });
+}
+function registerUniqueRule(ctx) {
+	const { path, field, schema, api, excludeKey } = ctx;
+	const endpoint = schema.endpoint;
+	const keyField = schema.keyField;
+	const fieldName = field.key;
+	validateAsync(path, {
+		debounce: 300,
+		params: (c) => {
+			const value = c.value().trim();
+			return value === "" ? void 0 : {
+				value,
+				exclude: excludeKey
+			};
+		},
+		factory: (params) => resource({
+			params,
+			loader: async ({ params: request }) => {
+				const rows = await firstValueFrom(api.list(endpoint));
+				if (!Array.isArray(rows)) return [];
+				return rows.filter((row) => row[fieldName] === request.value && (request.exclude === void 0 || row[keyField] !== request.exclude));
+			}
+		}),
+		onError: () => null,
+		onSuccess: (rows, c) => {
+			if (c.value().trim() === "" || !Array.isArray(rows) || rows.length === 0) return null;
+			return {
+				kind: "unique",
+				message: "Este valor ya existe en el registro."
+			};
+		}
+	});
+}
+const FIELD_VALIDATORS = [
+	{
+		name: "required",
+		declares: ({ field }) => field.required === true && field.type !== "boolean" && field.type !== "group" && !LIST_TYPES.has(field.type),
+		register: ({ path }) => required(path, { message: "Campo obligatorio." })
+	},
+	{
+		name: "email",
+		declares: ({ field }) => field.type === "email",
+		register: ({ path }) => registerEmailRule(path)
+	},
+	{
+		name: "url",
+		declares: ({ field }) => field.type === "url",
+		register: ({ path }) => registerUrlRule(path)
+	},
+	{
+		name: "min-length",
+		declares: ({ field }) => minLengthOf(field) !== void 0,
+		register: ({ path, field }) => {
+			const min = minLengthOf(field);
+			if (min !== void 0) minLength(path, min, { message: `Debe tener al menos ${min} caracteres.` });
+		}
+	},
+	{
+		name: "max-length",
+		declares: ({ field }) => maxLengthOf(field) !== void 0,
+		register: ({ path, field }) => {
+			const max = maxLengthOf(field);
+			if (max !== void 0) maxLength(path, max, { message: `Como máximo ${max} caracteres.` });
+		}
+	},
+	{
+		name: "pattern",
+		declares: ({ field }) => patternOf(field) !== void 0,
+		register: ({ path, field }) => {
+			const pattern$1 = patternOf(field);
+			if (pattern$1 !== void 0) pattern(path, new RegExp(pattern$1), { message: patternMessageFor(field) });
+		}
+	},
+	{
+		name: "min-words",
+		declares: ({ field }) => minWordsOf(field) !== void 0,
+		register: ({ path, field }) => {
+			const min = minWordsOf(field);
+			if (min !== void 0) validate(path, (ctx) => toError("min-words", validateMinWords(ctx.value(), min)));
+		}
+	},
+	{
+		name: "max-words",
+		declares: ({ field }) => maxWordsOf(field) !== void 0,
+		register: ({ path, field }) => {
+			const max = maxWordsOf(field);
+			if (max !== void 0) validate(path, (ctx) => toError("max-words", validateMaxWords(ctx.value(), max)));
+		}
+	},
+	{
+		name: "min",
+		declares: ({ field }) => numberBoundOf(field, "min") !== void 0,
+		register: ({ path, field }) => {
+			const min$1 = numberBoundOf(field, "min");
+			if (min$1 !== void 0) min(path, min$1, { message: `Debe ser como mínimo ${min$1}.` });
+		}
+	},
+	{
+		name: "max",
+		declares: ({ field }) => numberBoundOf(field, "max") !== void 0,
+		register: ({ path, field }) => {
+			const max$1 = numberBoundOf(field, "max");
+			if (max$1 !== void 0) max(path, max$1, { message: `Debe ser como máximo ${max$1}.` });
+		}
+	},
+	{
+		name: "min-items",
+		declares: ({ field }) => minItemsOf(field) !== void 0,
+		register: ({ path, field }) => {
+			const min = minItemsOf(field);
+			if (min !== void 0) minLength(path, min, { message: min === 1 ? "Debe tener al menos 1 elemento." : `Debe tener al menos ${min} elementos.` });
+		}
+	},
+	{
+		name: "max-items",
+		declares: ({ field }) => maxItemsOf(field) !== void 0,
+		register: ({ path, field }) => {
+			const max = maxItemsOf(field);
+			if (max !== void 0) maxLength(path, max, { message: max === 1 ? "Como máximo 1 elemento." : `Como máximo ${max} elementos.` });
+		}
+	},
+	{
+		name: "date-min",
+		declares: ({ field }) => field.type === "date" && field.min !== void 0,
+		register: ({ path, field }) => {
+			const min = field.type === "date" ? field.min : void 0;
+			if (min !== void 0) validate(path, (ctx) => dateError(ctx.value(), "min", min));
+		}
+	},
+	{
+		name: "date-max",
+		declares: ({ field }) => field.type === "date" && field.max !== void 0,
+		register: ({ path, field }) => {
+			const max = field.type === "date" ? field.max : void 0;
+			if (max !== void 0) validate(path, (ctx) => dateError(ctx.value(), "max", max));
+		}
+	},
+	{
+		name: "unique",
+		declares: ({ field, schema }) => field.validators?.unique === true && TEXT_TYPES.has(field.type) && !!schema.endpoint.list,
+		register: (ctx) => registerUniqueRule(ctx)
+	}
+];
+FIELD_VALIDATORS.map((entry) => entry.name);
+function buildFormSchema(schema, api, excludeKey) {
+	return (root) => {
+		applyRulesToFields({
+			schema,
+			api,
+			excludeKey,
+			root,
+			container: root,
+			siblings: schema.fields
+		}, schema.fields);
+	};
+}
+function applyRulesToFields(scope, fields) {
+	for (const field of fields) {
+		if (!isSupported("field", field.type)) continue;
+		applyRulesToField(scope, field, pathAt(scope.container, field.key));
+	}
+}
+function applyRulesToField(scope, field, path) {
+	applyLifecycleRules(scope, field, path);
+	const ctx = {
+		path,
+		field,
+		schema: scope.schema,
+		api: scope.api,
+		excludeKey: scope.excludeKey
+	};
+	for (const entry of FIELD_VALIDATORS) if (entry.declares(ctx)) entry.register(ctx);
+	switch (field.type) {
+		case "group":
+			applyRulesToFields({
+				...scope,
+				container: path,
+				siblings: field.fields
+			}, field.fields);
+			break;
+		case "list":
+			applyEach(path, (item) => applyRulesToFields({
+				...scope,
+				container: item,
+				siblings: field.itemFields
+			}, field.itemFields));
+			break;
+		case "string-list": applyEach(path, (item) => applyStringItemRules(item, field.itemType));
+	}
+}
+function modeAppliesTo(mode, isEdit) {
+	return mode === "always" || mode === "update" && isEdit || mode === "create" && !isEdit;
+}
+function applyLifecycleRules(scope, field, path) {
+	if (field.visibleWhen) {
+		const condition = field.visibleWhen;
+		hidden(path, { when: (ctx) => !evaluateCondition(condition, ctx.valueOf(conditionPath(scope, condition.field))) });
+	}
+	if (field.dependsOn) {
+		const parentKey = field.dependsOn;
+		const parentPath = pathAt(scope.siblings.some((candidate) => candidate.key === parentKey) ? scope.container : scope.root, parentKey);
+		disabled(path, ({ valueOf }) => isEmptyValue(valueOf(parentPath)));
+	}
+	if (field.readonly) readonly(path, { when: () => true });
+	if (field.readonlyOn && modeAppliesTo(field.readonlyOn, scope.excludeKey !== void 0)) readonly(path, { when: () => true });
+	if (field.hiddenOn && modeAppliesTo(field.hiddenOn, scope.excludeKey !== void 0)) hidden(path, { when: () => true });
+	if (field.readonlyWhen) {
+		const condition = field.readonlyWhen;
+		readonly(path, { when: (ctx) => evaluateCondition(condition, ctx.valueOf(conditionPath(scope, condition.field))) });
+	}
+}
+function isEmptyValue(value) {
+	if (value === void 0 || value === null || value === "") return true;
+	return Array.isArray(value) && value.length === 0;
+}
+function conditionPath(scope, key) {
+	return scope.siblings.some((field) => field.key === key) ? scope.container : scope.root;
+}
+function applyStringItemRules(path, itemType) {
+	if (itemType === "email") registerEmailRule(path);
+	if (itemType === "url") registerUrlRule(path);
+}
+function pathAt(parent, key) {
+	const path = parent[key];
+	if (path === void 0) throw new Error(`El formulario no contiene la ruta "${key}".`);
+	return path;
+}
+function seedModel(schema) {
+	return seedFields(schema.fields);
+}
+function buildPayload(schema, root) {
+	const payload = {};
+	collectPayload(root, schema.fields, payload, schema.positionField);
+	return payload;
+}
+function collectPayload(tree, fields, payload, excludedKey) {
+	for (const field of fields) {
+		if (excludedKey !== void 0 && field.key === excludedKey) continue;
+		const state = childTree(tree, field.key)();
+		if (state.hidden()) continue;
+		if (field.type === "group") {
+			const nested = {};
+			collectPayload(childTree(tree, field.key), field.fields, nested, void 0);
+			payload[field.key] = nested;
+			continue;
+		}
+		if (field.type === "list") {
+			const items = listTree(tree, field.key);
+			const raw = state.value() ?? [];
+			const list = [];
+			for (let index = 0; index < raw.length; index++) {
+				const nested = {};
+				collectPayload(itemTree(items, index), field.itemFields, nested, void 0);
+				const positionKey = field.positionField;
+				const position = positionKey !== void 0 ? raw[index]?.[positionKey] : void 0;
+				if (positionKey !== void 0 && position !== void 0) nested[positionKey] = position;
+				list.push(nested);
+			}
+			payload[field.key] = list;
+			continue;
+		}
+		payload[field.key] = state.value();
+	}
+}
+var DrawerForm = class DrawerForm {
+	open = input(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+	schema = input.required(...ngDevMode ? [{ debugName: "schema" }] : /* istanbul ignore next */ []);
+	fields = input(void 0, ...ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []);
+	mode = input("create", ...ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []);
+	recordKey = input(null, ...ngDevMode ? [{ debugName: "recordKey" }] : /* istanbul ignore next */ []);
+	title = input(null, ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	saved = output();
+	close = output();
+	api = inject(ApiService);
+	notifications = inject(NotificationService);
+	errorMapper = inject(ErrorMapperService);
+	injector = inject(Injector);
+	destroyRef = inject(DestroyRef);
+	tree = signal(null, ...ngDevMode ? [{ debugName: "tree" }] : /* istanbul ignore next */ []);
+	status = signal("idle", ...ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []);
+	saving = signal(false, ...ngDevMode ? [{ debugName: "saving" }] : /* istanbul ignore next */ []);
+	generalError = signal("", ...ngDevMode ? [{ debugName: "generalError" }] : /* istanbul ignore next */ []);
+	fieldErrors = signal({}, ...ngDevMode ? [{ debugName: "fieldErrors" }] : /* istanbul ignore next */ []);
+	loadError = signal("", ...ngDevMode ? [{ debugName: "loadError" }] : /* istanbul ignore next */ []);
+	visibleFields = computed(() => this.fields() ?? this.schema().fields, ...ngDevMode ? [{ debugName: "visibleFields" }] : /* istanbul ignore next */ []);
+	drawerTitle = computed(() => {
+		if (this.title() !== null) return this.title();
+		const label = this.schema().label;
+		return this.mode() === "create" ? `Crear ${label}` : `Editar ${label}`;
+	}, ...ngDevMode ? [{ debugName: "drawerTitle" }] : /* istanbul ignore next */ []);
+	ngOnInit() {
+		this.build();
+	}
+	build() {
+		const schema = this.schema();
+		const recordKey = this.recordKey();
+		const schemaFn = buildFormSchema(schema, this.api, recordKey ?? void 0);
+		const tree = form(signal(seedModel(schema)), schemaFn, { injector: this.injector });
+		if (this.mode() === "create" || recordKey === null) {
+			this.tree.set(tree);
+			this.status.set("ready");
+			return;
+		}
+		this.status.set("loading");
+		this.api.get(schema.endpoint, recordKey).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+			next: (record) => {
+				tree().value.set({
+					...seedModel(schema),
+					...record
+				});
+				this.tree.set(tree);
+				this.status.set("ready");
+			},
+			error: (error) => {
+				this.loadError.set(this.errorMapper.messageOf(error));
+				this.status.set("error");
+			}
+		});
+	}
+	async save() {
+		const tree = this.tree();
+		const schema = this.schema();
+		if (tree === null || this.saving()) return;
+		this.saving.set(true);
+		this.generalError.set("");
+		this.fieldErrors.set({});
+		try {
+			if (!await submit(tree, {
+				action: async () => {
+					await this.persist(tree, schema);
+					return null;
+				},
+				onInvalid: () => this.markTouched(tree)
+			}) || Object.keys(this.fieldErrors()).length > 0 || this.generalError() !== "") this.markTouched(tree);
+		} finally {
+			this.saving.set(false);
+		}
+	}
+	markTouched(tree) {
+		for (const field of this.visibleFields()) childTree(tree, field.key)().markAsTouched();
+	}
+	async persist(tree, schema) {
+		const payload = buildPayload(schema, tree);
+		try {
+			if (this.mode() === "create") {
+				const created = await firstValueFrom(this.api.create(schema.endpoint, payload));
+				this.notifications.success("Registro creado.");
+				this.saved.emit(created ?? {});
+				this.close.emit();
+				return;
+			}
+			const updated = await firstValueFrom(this.api.update(schema.endpoint, this.recordKey() ?? void 0, payload));
+			this.notifications.success("Registro guardado.");
+			this.saved.emit(updated ?? {});
+			this.close.emit();
+		} catch (error) {
+			const mapped = this.errorMapper.map(error);
+			this.fieldErrors.set(mapped.fields);
+			const withoutFields = Object.keys(mapped.fields).length === 0;
+			this.generalError.set(mapped.general ?? (withoutFields ? this.errorMapper.messageOf(error) : ""));
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: DrawerForm,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: DrawerForm,
+		isStandalone: true,
+		selector: "app-drawer-form",
+		inputs: {
+			open: {
+				classPropertyName: "open",
+				publicName: "open",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			schema: {
+				classPropertyName: "schema",
+				publicName: "schema",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			fields: {
+				classPropertyName: "fields",
+				publicName: "fields",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			mode: {
+				classPropertyName: "mode",
+				publicName: "mode",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			recordKey: {
+				classPropertyName: "recordKey",
+				publicName: "recordKey",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			title: {
+				classPropertyName: "title",
+				publicName: "title",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			saved: "saved",
+			close: "close"
+		},
+		ngImport: i0,
+		template: `
+    <app-drawer [open]="open()" [title]="drawerTitle()" [size]="size()" (close)="close.emit()">
+      @if (status() === 'loading') {
+        <app-skeleton [lines]="4" />
+      } @else if (status() === 'error') {
+        <p role="alert" class="rounded-lg bg-danger/10 px-3 py-2 text-sm text-danger">
+          {{ loadError() }}
+        </p>
+      } @else if (tree(); as formTree) {
+        @if (generalError()) {
+          <p
+            role="alert"
+            class="mb-4 rounded-lg bg-danger/10 px-3 py-2 text-sm text-danger"
+            data-drawer-error
+          >
+            {{ generalError() }}
+          </p>
+        }
+        @for (field of visibleFields(); track field.key) {
+          <div class="mb-4">
+            <app-field-host
+              [field]="field"
+              [tree]="formTree"
+              [exists]="mode() === 'edit'"
+              [serverErrors]="fieldErrors()"
+              [resource]="schema().id"
+            />
+          </div>
+        }
+      }
+
+      <div drawer-actions class="flex justify-end gap-2">
+        <button app-button variant="outline" type="button" (click)="close.emit()">Cancelar</button>
+        <button app-button type="button" [loading]="saving()" (click)="save()">Guardar</button>
+      </div>
+    </app-drawer>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "component",
+				type: Button,
+				selector: "button[app-button]",
+				inputs: [
+					"variant",
+					"size",
+					"type",
+					"disabled",
+					"loading"
+				]
+			},
+			{
+				kind: "component",
+				type: Drawer,
+				selector: "app-drawer",
+				inputs: [
+					"open",
+					"title",
+					"subtitle",
+					"size",
+					"closeLabel"
+				],
+				outputs: ["close"]
+			},
+			{
+				kind: "component",
+				type: FieldHost,
+				selector: "app-field-host",
+				inputs: [
+					"field",
+					"tree",
+					"exists",
+					"serverErrors",
+					"pathPrefix",
+					"resource"
+				]
+			},
+			{
+				kind: "component",
+				type: Skeleton,
+				selector: "app-skeleton",
+				inputs: [
+					"lines",
+					"height",
+					"width"
+				]
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: DrawerForm,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-drawer-form",
+			imports: [
+				Button,
+				Drawer,
+				FieldHost,
+				Skeleton
+			],
+			template: `
+    <app-drawer [open]="open()" [title]="drawerTitle()" [size]="size()" (close)="close.emit()">
+      @if (status() === 'loading') {
+        <app-skeleton [lines]="4" />
+      } @else if (status() === 'error') {
+        <p role="alert" class="rounded-lg bg-danger/10 px-3 py-2 text-sm text-danger">
+          {{ loadError() }}
+        </p>
+      } @else if (tree(); as formTree) {
+        @if (generalError()) {
+          <p
+            role="alert"
+            class="mb-4 rounded-lg bg-danger/10 px-3 py-2 text-sm text-danger"
+            data-drawer-error
+          >
+            {{ generalError() }}
+          </p>
+        }
+        @for (field of visibleFields(); track field.key) {
+          <div class="mb-4">
+            <app-field-host
+              [field]="field"
+              [tree]="formTree"
+              [exists]="mode() === 'edit'"
+              [serverErrors]="fieldErrors()"
+              [resource]="schema().id"
+            />
+          </div>
+        }
+      }
+
+      <div drawer-actions class="flex justify-end gap-2">
+        <button app-button variant="outline" type="button" (click)="close.emit()">Cancelar</button>
+        <button app-button type="button" [loading]="saving()" (click)="save()">Guardar</button>
+      </div>
+    </app-drawer>
+  `
+		}]
+	}],
+	propDecorators: {
+		open: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "open",
+				required: false
+			}]
+		}],
+		schema: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "schema",
+				required: true
+			}]
+		}],
+		fields: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fields",
+				required: false
+			}]
+		}],
+		mode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mode",
+				required: false
+			}]
+		}],
+		recordKey: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "recordKey",
+				required: false
+			}]
+		}],
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		saved: [{
+			type: i0.Output,
+			args: ["saved"]
+		}],
+		close: [{
+			type: i0.Output,
+			args: ["close"]
+		}]
+	}
+});
+function collectDependsOn(fields, container = []) {
+	const links = [];
+	for (const field of fields) {
+		if (field.type === "group") {
+			links.push(...collectDependsOn(field.fields, [...container, field.key]));
+			continue;
+		}
+		if (field.dependsOn === void 0) continue;
+		links.push({
+			container,
+			childKey: field.key,
+			parentKey: field.dependsOn,
+			resetValue: seedFieldValue(field),
+			id: `${container.join(".")}.${field.key}<-${field.dependsOn}`
+		});
+	}
+	return links;
+}
+var CopyShare = class CopyShare {
+	url = input.required(...ngDevMode ? [{ debugName: "url" }] : /* istanbul ignore next */ []);
+	label = input("Copiar enlace", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	shareText = input("", ...ngDevMode ? [{ debugName: "shareText" }] : /* istanbul ignore next */ []);
+	notify = inject(NotificationService);
+	canShare = computed(() => typeof navigator !== "undefined" && typeof navigator.share === "function", ...ngDevMode ? [{ debugName: "canShare" }] : /* istanbul ignore next */ []);
+	waUrl = computed(() => {
+		const text = buildShareMessage(this.url(), this.shareText());
+		return `https://wa.me/?text=${encodeURIComponent(text)}`;
+	}, ...ngDevMode ? [{ debugName: "waUrl" }] : /* istanbul ignore next */ []);
+	async copy() {
+		if (await writeClipboard(buildShareMessage(this.url(), this.shareText()))) this.notify.success("Mensaje copiado.");
+		else this.notify.error("No se pudo copiar el mensaje.");
+	}
+	async share() {
+		if (!this.canShare()) {
+			this.shareWhatsApp();
+			return;
+		}
+		try {
+			await navigator.share({
+				url: this.url(),
+				text: this.shareText()
+			});
+		} catch {}
+	}
+	shareWhatsApp() {
+		window.open(this.waUrl(), "_blank", "noopener,noreferrer");
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: CopyShare,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: CopyShare,
+		isStandalone: true,
+		selector: "app-copy-share",
+		inputs: {
+			url: {
+				classPropertyName: "url",
+				publicName: "url",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			shareText: {
+				classPropertyName: "shareText",
+				publicName: "shareText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: `
+    <div class="flex flex-wrap items-center gap-2">
+      <button app-button type="button" variant="outline" (click)="copy()">
+        <svg lucideCopy size="16" />
+        {{ label() }}
+      </button>
+
+      @if (canShare()) {
+        <button app-button type="button" variant="ghost" (click)="share()">
+          <svg lucideShare size="16" />
+          Compartir
+        </button>
+      } @else {
+        <button app-button type="button" variant="ghost" (click)="shareWhatsApp()">
+          <svg lucideShare size="16" />
+          WhatsApp
+        </button>
+      }
+    </div>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "component",
+				type: Button,
+				selector: "button[app-button]",
+				inputs: [
+					"variant",
+					"size",
+					"type",
+					"disabled",
+					"loading"
+				]
+			},
+			{
+				kind: "component",
+				type: LucideCopy,
+				selector: "svg[lucideCopy]"
+			},
+			{
+				kind: "component",
+				type: LucideShare,
+				selector: "svg[lucideShare]"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: CopyShare,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-copy-share",
+			imports: [
+				Button,
+				LucideCopy,
+				LucideShare
+			],
+			template: `
+    <div class="flex flex-wrap items-center gap-2">
+      <button app-button type="button" variant="outline" (click)="copy()">
+        <svg lucideCopy size="16" />
+        {{ label() }}
+      </button>
+
+      @if (canShare()) {
+        <button app-button type="button" variant="ghost" (click)="share()">
+          <svg lucideShare size="16" />
+          Compartir
+        </button>
+      } @else {
+        <button app-button type="button" variant="ghost" (click)="shareWhatsApp()">
+          <svg lucideShare size="16" />
+          WhatsApp
+        </button>
+      }
+    </div>
+  `
+		}]
+	}],
+	propDecorators: {
+		url: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "url",
+				required: true
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		shareText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "shareText",
+				required: false
+			}]
+		}]
+	}
+});
+let titleCounter = 0;
+var Modal = class Modal {
+	open = input(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+	title = input.required(...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+	closeLabel = input("Cerrar", ...ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []);
+	close = output();
+	titleId = `modal-title-${++titleCounter}`;
+	dialogRef = viewChild("dialog", ...ngDevMode ? [{ debugName: "dialogRef" }] : /* istanbul ignore next */ []);
+	lastFocused = null;
+	focusEffect = afterRenderEffect(() => {
+		const open = this.open();
+		const dialog = this.dialogRef();
+		if (open && dialog) {
+			const active = document.activeElement;
+			if (active !== dialog.nativeElement && this.lastFocused === null) this.lastFocused = active instanceof HTMLElement ? active : null;
+			dialog.nativeElement.focus();
+		} else if (!open && this.lastFocused !== null) {
+			this.lastFocused.focus();
+			this.lastFocused = null;
+		}
+	}, ...ngDevMode ? [{ debugName: "focusEffect" }] : /* istanbul ignore next */ []);
+	ngOnDestroy() {
+		if (this.lastFocused?.isConnected) this.lastFocused.focus();
+		this.lastFocused = null;
+	}
+	onEscape() {
+		if (this.open()) this.close.emit();
+	}
+	onTab(rawEvent) {
+		const event = rawEvent;
+		const dialog = this.dialogRef()?.nativeElement;
+		if (!this.open() || !dialog) return;
+		const focusable = Array.from(dialog.querySelectorAll(FOCUSABLE)).filter((element) => isVisibleNow(element));
+		if (focusable.length === 0) {
+			event.preventDefault();
+			dialog.focus();
+			return;
+		}
+		const first = focusable[0];
+		const last = focusable[focusable.length - 1];
+		const active = document.activeElement;
+		if (event.shiftKey && (active === first || active === dialog)) {
+			event.preventDefault();
+			last.focus();
+		} else if (!event.shiftKey && active === last) {
+			event.preventDefault();
+			first.focus();
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: Modal,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: Modal,
+		isStandalone: true,
+		selector: "app-modal",
+		inputs: {
+			open: {
+				classPropertyName: "open",
+				publicName: "open",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			title: {
+				classPropertyName: "title",
+				publicName: "title",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			closeLabel: {
+				classPropertyName: "closeLabel",
+				publicName: "closeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { close: "close" },
+		host: { listeners: {
+			"document:keydown.escape": "onEscape()",
+			"document:keydown.tab": "onTab($event)",
+			"document:keydown.shift.tab": "onTab($event)"
+		} },
+		viewQueries: [{
+			propertyName: "dialogRef",
+			first: true,
+			predicate: ["dialog"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    @if (open()) {
+      <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
+        <div class="absolute inset-0 bg-black/50" aria-hidden="true" (click)="close.emit()"></div>
+        <div
+          #dialog
+          role="dialog"
+          aria-modal="true"
+          [attr.aria-labelledby]="titleId"
+          tabindex="-1"
+          class="relative w-full max-w-lg rounded-xl bg-surface-raised p-6 shadow-xl focus:outline-none"
+        >
+          <div class="mb-4 flex items-start justify-between gap-4">
+            <h2 [id]="titleId" class="font-display text-section font-semibold">
+              {{ title() }}
+            </h2>
+            <button
+              type="button"
+              class="flex min-h-11 min-w-11 items-center justify-center rounded text-neutral hover:bg-neutral/10 focus-visible:outline-2 focus-visible:outline-primary lg:min-h-0 lg:min-w-0"
+              [attr.aria-label]="closeLabel()"
+              (click)="close.emit()"
+            >
+              <svg lucideX size="18" />
+            </button>
+          </div>
+          <ng-content />
+        </div>
+      </div>
+    }
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: LucideX,
+			selector: "svg[lucideX]"
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: Modal,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-modal",
+			imports: [LucideX],
+			host: {
+				"(document:keydown.escape)": "onEscape()",
+				"(document:keydown.tab)": "onTab($event)",
+				"(document:keydown.shift.tab)": "onTab($event)"
+			},
+			template: `
+    @if (open()) {
+      <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
+        <div class="absolute inset-0 bg-black/50" aria-hidden="true" (click)="close.emit()"></div>
+        <div
+          #dialog
+          role="dialog"
+          aria-modal="true"
+          [attr.aria-labelledby]="titleId"
+          tabindex="-1"
+          class="relative w-full max-w-lg rounded-xl bg-surface-raised p-6 shadow-xl focus:outline-none"
+        >
+          <div class="mb-4 flex items-start justify-between gap-4">
+            <h2 [id]="titleId" class="font-display text-section font-semibold">
+              {{ title() }}
+            </h2>
+            <button
+              type="button"
+              class="flex min-h-11 min-w-11 items-center justify-center rounded text-neutral hover:bg-neutral/10 focus-visible:outline-2 focus-visible:outline-primary lg:min-h-0 lg:min-w-0"
+              [attr.aria-label]="closeLabel()"
+              (click)="close.emit()"
+            >
+              <svg lucideX size="18" />
+            </button>
+          </div>
+          <ng-content />
+        </div>
+      </div>
+    }
+  `
+		}]
+	}],
+	propDecorators: {
+		open: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "open",
+				required: false
+			}]
+		}],
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: true
+			}]
+		}],
+		closeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeLabel",
+				required: false
+			}]
+		}],
+		close: [{
+			type: i0.Output,
+			args: ["close"]
+		}],
+		dialogRef: [{
+			type: i0.ViewChild,
+			args: ["dialog", { isSignal: true }]
+		}]
+	}
+});
+var PostCreateModal = class PostCreateModal {
+	schema = input.required(...ngDevMode ? [{ debugName: "schema" }] : /* istanbul ignore next */ []);
+	config = input.required(...ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []);
+	record = input.required(...ngDevMode ? [{ debugName: "record" }] : /* istanbul ignore next */ []);
+	configValues = input({}, ...ngDevMode ? [{ debugName: "configValues" }] : /* istanbul ignore next */ []);
+	closed = output();
+	configService = inject(ConfigService);
+	constructor() {
+		this.configService.ensureLoaded();
+	}
+	context = computed(() => ({
+		...this.configService.buildInterpolationContext(this.record()),
+		...this.configValues()
+	}), ...ngDevMode ? [{ debugName: "context" }] : /* istanbul ignore next */ []);
+	title = computed(() => {
+		const raw = this.config().title || "¡Registro Creado con Éxito!";
+		return interpolateTemplate(raw, this.context());
+	}, ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+	description = computed(() => {
+		const raw = this.config().description || "El registro fue creado correctamente y ya se encuentra guardado en el sistema.";
+		return interpolateTemplate(raw, this.context());
+	}, ...ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []);
+	summaryItems = computed(() => {
+		const fields = this.config().summaryFields || [];
+		const rec = this.record();
+		const schemaFields = this.schema().fields || [];
+		return fields.map((key) => {
+			const label = schemaFields.find((f) => f.key === key)?.label || key.replace(/_/g, " ");
+			const rawVal = rec[key];
+			return {
+				key,
+				label,
+				value: rawVal === null || rawVal === void 0 || rawVal === "" ? "—" : String(rawVal)
+			};
+		});
+	}, ...ngDevMode ? [{ debugName: "summaryItems" }] : /* istanbul ignore next */ []);
+	copyShareAction = computed(() => (this.config().actions || []).find(isShareAction) ?? null, ...ngDevMode ? [{ debugName: "copyShareAction" }] : /* istanbul ignore next */ []);
+	shareOf(action) {
+		return resolveShare(action, this.context());
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: PostCreateModal,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: PostCreateModal,
+		isStandalone: true,
+		selector: "app-post-create-modal",
+		inputs: {
+			schema: {
+				classPropertyName: "schema",
+				publicName: "schema",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			config: {
+				classPropertyName: "config",
+				publicName: "config",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			record: {
+				classPropertyName: "record",
+				publicName: "record",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			configValues: {
+				classPropertyName: "configValues",
+				publicName: "configValues",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { closed: "closed" },
+		ngImport: i0,
+		template: `
+    <app-modal [open]="true" [title]="title()" (close)="closed.emit()">
+      <div class="flex flex-col gap-4">
+        <!-- Encabezado con icono de éxito -->
+        <div class="flex items-center gap-3">
+          <div
+            class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-emerald-500/10 text-emerald-500"
+          >
+            <svg lucideCheckCircle2 size="22" />
+          </div>
+          <div>
+            <p class="text-sm text-neutral-light">{{ description() }}</p>
+          </div>
+        </div>
+
+        <!-- Tarjeta de campos de resumen -->
+        @if (summaryItems().length > 0) {
+          <div class="rounded-lg border border-neutral/15 bg-surface p-3.5">
+            <dl class="grid grid-cols-1 gap-x-4 gap-y-2.5 sm:grid-cols-2">
+              @for (item of summaryItems(); track item.key) {
+                <div class="flex flex-col">
+                  <dt class="text-xs font-medium text-neutral">{{ item.label }}</dt>
+                  <dd class="text-sm font-semibold text-neutral-light truncate">
+                    {{ item.value }}
+                  </dd>
+                </div>
+              }
+            </dl>
+          </div>
+        }
+
+        <!-- Acciones declaradas (ej. CopyShare) -->
+        @if (copyShareAction(); as action) {
+          <div class="rounded-lg border border-primary/20 bg-primary/5 p-3.5">
+            <p class="mb-2 text-xs font-medium text-primary">Enlace de Seguimiento</p>
+            @let share = shareOf(action);
+            <app-copy-share
+              [url]="share.url"
+              [shareText]="share.shareText"
+              [label]="action.label"
+            />
+          </div>
+        }
+
+        <!-- Botón de cierre primario -->
+        <div class="mt-2 flex justify-end">
+          <button app-button type="button" variant="primary" (click)="closed.emit()">
+            Continuar
+          </button>
+        </div>
+      </div>
+    </app-modal>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "component",
+				type: Modal,
+				selector: "app-modal",
+				inputs: [
+					"open",
+					"title",
+					"closeLabel"
+				],
+				outputs: ["close"]
+			},
+			{
+				kind: "component",
+				type: Button,
+				selector: "button[app-button]",
+				inputs: [
+					"variant",
+					"size",
+					"type",
+					"disabled",
+					"loading"
+				]
+			},
+			{
+				kind: "component",
+				type: CopyShare,
+				selector: "app-copy-share",
+				inputs: [
+					"url",
+					"label",
+					"shareText"
+				]
+			},
+			{
+				kind: "component",
+				type: LucideCheckCircle2,
+				selector: "svg[lucideCircleCheck], svg[lucideCheckCircle2]"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: PostCreateModal,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-post-create-modal",
+			imports: [
+				Modal,
+				Button,
+				CopyShare,
+				LucideCheckCircle2
+			],
+			template: `
+    <app-modal [open]="true" [title]="title()" (close)="closed.emit()">
+      <div class="flex flex-col gap-4">
+        <!-- Encabezado con icono de éxito -->
+        <div class="flex items-center gap-3">
+          <div
+            class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-emerald-500/10 text-emerald-500"
+          >
+            <svg lucideCheckCircle2 size="22" />
+          </div>
+          <div>
+            <p class="text-sm text-neutral-light">{{ description() }}</p>
+          </div>
+        </div>
+
+        <!-- Tarjeta de campos de resumen -->
+        @if (summaryItems().length > 0) {
+          <div class="rounded-lg border border-neutral/15 bg-surface p-3.5">
+            <dl class="grid grid-cols-1 gap-x-4 gap-y-2.5 sm:grid-cols-2">
+              @for (item of summaryItems(); track item.key) {
+                <div class="flex flex-col">
+                  <dt class="text-xs font-medium text-neutral">{{ item.label }}</dt>
+                  <dd class="text-sm font-semibold text-neutral-light truncate">
+                    {{ item.value }}
+                  </dd>
+                </div>
+              }
+            </dl>
+          </div>
+        }
+
+        <!-- Acciones declaradas (ej. CopyShare) -->
+        @if (copyShareAction(); as action) {
+          <div class="rounded-lg border border-primary/20 bg-primary/5 p-3.5">
+            <p class="mb-2 text-xs font-medium text-primary">Enlace de Seguimiento</p>
+            @let share = shareOf(action);
+            <app-copy-share
+              [url]="share.url"
+              [shareText]="share.shareText"
+              [label]="action.label"
+            />
+          </div>
+        }
+
+        <!-- Botón de cierre primario -->
+        <div class="mt-2 flex justify-end">
+          <button app-button type="button" variant="primary" (click)="closed.emit()">
+            Continuar
+          </button>
+        </div>
+      </div>
+    </app-modal>
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		schema: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "schema",
+				required: true
+			}]
+		}],
+		config: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "config",
+				required: true
+			}]
+		}],
+		record: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "record",
+				required: true
+			}]
+		}],
+		configValues: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "configValues",
+				required: false
+			}]
+		}],
+		closed: [{
+			type: i0.Output,
+			args: ["closed"]
+		}]
+	}
+});
+var form_view_exports = /* @__PURE__ */ __exportAll({ FormView: () => FormView });
+const TAB_ACTIVE = "border-b-2 border-primary px-3 py-2 text-sm font-medium text-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary";
+const TAB_INACTIVE = "border-b-2 border-transparent px-3 py-2 text-sm text-neutral hover:text-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary";
+const DRAFT_DEBOUNCE_MS = 800;
+function readTimestamp(record) {
+	if (!record) return;
+	for (const key of [
+		"updated_at",
+		"updatedAt",
+		"updated"
+	]) {
+		const raw = record[key];
+		if (typeof raw === "number") return raw < 0xe8d4a51000 ? raw * 1e3 : raw;
+		if (typeof raw === "string") {
+			const parsed = Date.parse(raw);
+			if (!Number.isNaN(parsed)) return parsed;
+		}
+	}
+}
+var FormView = class FormView {
+	relationDrawer = inject(RelationDrawerService);
+	route = inject(ActivatedRoute);
+	router = inject(Router);
+	nav = inject(ViewNavigationService);
+	api = inject(ApiService);
+	auth = inject(AuthService);
+	notifications = inject(NotificationService);
+	errorMapper = inject(ErrorMapperService);
+	injector = inject(Injector);
+	appRef = inject(ApplicationRef);
+	params = toSignal(this.route.paramMap, { requireSync: true });
+	routeData = toSignal(this.route.data ?? of({}), { requireSync: true });
+	schema = computed(() => {
+		const resourceId = this.routeData()["resourceId"] ?? this.params().get("id");
+		return getSchema(typeof resourceId === "string" ? resourceId : "");
+	}, ...ngDevMode ? [{ debugName: "schema" }] : /* istanbul ignore next */ []);
+	resourceId = computed(() => this.schema()?.id ?? "", ...ngDevMode ? [{ debugName: "resourceId" }] : /* istanbul ignore next */ []);
+	createdWithSummary = signal(null, ...ngDevMode ? [{ debugName: "createdWithSummary" }] : /* istanbul ignore next */ []);
+	mode = computed(() => {
+		const schema = this.schema();
+		if (!schema) return "single";
+		if (this.params().get("key") !== null) return "edit";
+		return schema.kind === "singleton" ? "single" : "create";
+	}, ...ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []);
+	heading = computed(() => {
+		const schema = this.schema();
+		if (!schema) return "";
+		switch (this.mode()) {
+			case "create": return `Nueva ${schema.label}`;
+			case "edit": return `Editar ${schema.label}`;
+			case "single": return schema.labelPlural;
+		}
+	}, ...ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []);
+	status = signal("loading", ...ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []);
+	errorCarga = void 0;
+	errorDeCarga() {
+		return this.status() === "error" ? this.errorCarga : void 0;
+	}
+	saving = signal(false, ...ngDevMode ? [{ debugName: "saving" }] : /* istanbul ignore next */ []);
+	serverErrors = signal({ fields: {} }, ...ngDevMode ? [{ debugName: "serverErrors" }] : /* istanbul ignore next */ []);
+	activeSection = signal(null, ...ngDevMode ? [{ debugName: "activeSection" }] : /* istanbul ignore next */ []);
+	attemptedSteps = signal(/* @__PURE__ */ new Set(), ...ngDevMode ? [{ debugName: "attemptedSteps" }] : /* istanbul ignore next */ []);
+	openSections = signal({}, ...ngDevMode ? [{ debugName: "openSections" }] : /* istanbul ignore next */ []);
+	formTree = signal(null, ...ngDevMode ? [{ debugName: "formTree" }] : /* istanbul ignore next */ []);
+	loadEpoch = 0;
+	draftOffer = signal(null, ...ngDevMode ? [{ debugName: "draftOffer" }] : /* istanbul ignore next */ []);
+	loadedSnapshot = "";
+	loadedRecord = null;
+	dependsOnSnapshot = /* @__PURE__ */ new Map();
+	dependsOnTree = null;
+	submitted = signal(false, ...ngDevMode ? [{ debugName: "submitted" }] : /* istanbul ignore next */ []);
+	constructor() {
+		this.route.paramMap.subscribe(() => this.rebuild());
+		effect((onCleanup) => {
+			const tree = this.formTree();
+			if (!tree) return;
+			const value = tree().value();
+			if (this.status() !== "ready" || JSON.stringify(value) === this.loadedSnapshot) return;
+			const timer = setTimeout(() => this.saveDraft(value), DRAFT_DEBOUNCE_MS);
+			onCleanup(() => clearTimeout(timer));
+		});
+		effect(() => {
+			const tree = this.formTree();
+			const schema = this.schema();
+			if (tree === null || !schema) {
+				this.dependsOnSnapshot.clear();
+				this.dependsOnTree = null;
+				return;
+			}
+			if (this.dependsOnTree !== tree) {
+				this.dependsOnTree = tree;
+				this.dependsOnSnapshot.clear();
+			}
+			for (const link of collectDependsOn(schema.fields)) {
+				let container = tree;
+				for (const key of link.container) container = groupTree(container, key);
+				const parentValue = JSON.stringify(childTree(container, link.parentKey)().value() ?? null);
+				const previous = this.dependsOnSnapshot.get(link.id);
+				if (previous !== void 0 && previous !== parentValue) childTree(container, link.childKey)().value.set(link.resetValue);
+				this.dependsOnSnapshot.set(link.id, parentValue);
+			}
+		});
+	}
+	layoutMode = computed(() => {
+		const mode = this.schema()?.layout?.mode ?? "sections";
+		if (!isSupported("layout", mode)) throw new Error(`No existe un descriptor para el layout "${mode}".`);
+		return mode;
+	}, ...ngDevMode ? [{ debugName: "layoutMode" }] : /* istanbul ignore next */ []);
+	layoutColumns = computed(() => this.schema()?.layout?.columns ?? 2, ...ngDevMode ? [{ debugName: "layoutColumns" }] : /* istanbul ignore next */ []);
+	renderedFields = computed(() => (this.schema()?.fields ?? []).filter((field) => isSupported("field", field.type)), ...ngDevMode ? [{ debugName: "renderedFields" }] : /* istanbul ignore next */ []);
+	summaryErrors = computed(() => {
+		if (!this.submitted()) return [];
+		const errors = this.collectErrors();
+		if (this.layoutMode() !== "steps") return errors;
+		const attempted = this.attemptedSteps();
+		return errors.filter((entry) => !entry.section || attempted.has(entry.section));
+	}, ...ngDevMode ? [{ debugName: "summaryErrors" }] : /* istanbul ignore next */ []);
+	sectionViews = computed(() => {
+		const layout = this.schema()?.layout;
+		if (!layout) return [];
+		const rendered = this.renderedFields();
+		return (layout.sections ?? []).map((section) => ({
+			id: section.id,
+			label: section.label,
+			fields: rendered.filter((field) => field.section === section.id)
+		})).filter((view) => view.fields.length > 0);
+	}, ...ngDevMode ? [{ debugName: "sectionViews" }] : /* istanbul ignore next */ []);
+	unsectionedFields = computed(() => {
+		const ids = new Set(this.sectionViews().map((view) => view.id));
+		return this.renderedFields().filter((field) => field.section === void 0 || !ids.has(field.section));
+	}, ...ngDevMode ? [{ debugName: "unsectionedFields" }] : /* istanbul ignore next */ []);
+	visibleSections = computed(() => {
+		const sections = this.sectionViews();
+		if (this.layoutMode() !== "tabs" && this.layoutMode() !== "steps") return sections;
+		const active = sections.find((section) => section.id === this.activeSection()) ?? sections[0];
+		return active ? [active] : [];
+	}, ...ngDevMode ? [{ debugName: "visibleSections" }] : /* istanbul ignore next */ []);
+	dirty = computed(() => this.formTree()?.().dirty() ?? false, ...ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []);
+	exists = computed(() => this.mode() !== "create", ...ngDevMode ? [{ debugName: "exists" }] : /* istanbul ignore next */ []);
+	canSave = computed(() => {
+		const schema = this.schema();
+		if (!schema) return false;
+		if (this.layoutMode() === "steps" && !this.isLastStep()) return false;
+		const operation = this.mode() === "create" ? "create" : "update";
+		return this.auth.canDoOperation(schema, operation);
+	}, ...ngDevMode ? [{ debugName: "canSave" }] : /* istanbul ignore next */ []);
+	canDelete = computed(() => {
+		const schema = this.schema();
+		return this.mode() === "edit" && schema && this.auth.canDoOperation(schema, "remove");
+	}, ...ngDevMode ? [{ debugName: "canDelete" }] : /* istanbul ignore next */ []);
+	rebuild() {
+		const schema = this.schema();
+		this.serverErrors.set({ fields: {} });
+		this.openSections.set({});
+		this.activeSection.set(null);
+		this.attemptedSteps.set(/* @__PURE__ */ new Set());
+		this.submitted.set(false);
+		if (!schema) {
+			this.formTree.set(null);
+			this.status.set("error");
+			return;
+		}
+		const model = signal(seedModel(schema), ...ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []);
+		const schemaFn = buildFormSchema(schema, this.api, this.recordKey() ?? void 0);
+		this.formTree.set(form(model, schemaFn, { injector: this.injector }));
+		this.activeSection.set(this.sectionViews()[0]?.id ?? null);
+		const tree = this.formTree();
+		this.loadedSnapshot = JSON.stringify(tree ? tree().value() : {});
+		this.loadedRecord = null;
+		this.draftOffer.set(null);
+		if (this.mode() === "create") {
+			this.status.set("ready");
+			this.offerDraft(null);
+			return;
+		}
+		this.status.set("loading");
+		this.load();
+	}
+	async load() {
+		const schema = this.schema();
+		const tree = this.formTree();
+		if (!schema || !tree) return;
+		const epoch = ++this.loadEpoch;
+		try {
+			const record = await firstValueFrom(this.api.get(schema.endpoint, this.recordKey() ?? void 0));
+			if (epoch !== this.loadEpoch) return;
+			this.applyRecord(tree, schema, record ?? {});
+			this.loadedRecord = record ?? {};
+			this.errorCarga = void 0;
+			this.status.set("ready");
+			this.offerDraft(record ?? null);
+		} catch (error) {
+			if (epoch !== this.loadEpoch) return;
+			this.errorCarga = error;
+			this.status.set("error");
+		}
+	}
+	applyRecord(tree, schema, record) {
+		tree().value.set(mergeRecord(schema.fields, record));
+		this.loadedSnapshot = JSON.stringify(tree().value());
+	}
+	draftStorageKey() {
+		return `draft:${this.resourceId()}:${this.recordKey() ?? "nuevo"}`;
+	}
+	saveDraft(value) {
+		try {
+			localStorage.setItem(this.draftStorageKey(), JSON.stringify({
+				savedAt: Date.now(),
+				value
+			}));
+		} catch {}
+	}
+	offerDraft(serverRecord) {
+		let raw = null;
+		try {
+			raw = localStorage.getItem(this.draftStorageKey());
+		} catch {
+			return;
+		}
+		if (!raw) return;
+		let draft = null;
+		try {
+			draft = JSON.parse(raw);
+		} catch {
+			return;
+		}
+		if (!draft || typeof draft.savedAt !== "number" || !isRecord(draft.value)) {
+			this.clearDraft();
+			return;
+		}
+		const serverTs = readTimestamp(serverRecord);
+		if (serverTs !== void 0 && serverTs >= draft.savedAt) {
+			this.clearDraft();
+			return;
+		}
+		this.draftOffer.set({
+			savedAt: draft.savedAt,
+			value: draft.value
+		});
+	}
+	restoreDraft() {
+		const offer = this.draftOffer();
+		const tree = this.formTree();
+		const schema = this.schema();
+		if (!offer || !tree || !schema) return;
+		this.applyRecord(tree, schema, offer.value);
+		this.draftOffer.set(null);
+		this.notifications.info("Borrador restaurado.");
+	}
+	discardDraft() {
+		this.clearDraft();
+		this.draftOffer.set(null);
+	}
+	clearDraft() {
+		try {
+			localStorage.removeItem(this.draftStorageKey());
+		} catch {}
+	}
+	draftAge(savedAt) {
+		const minutes = Math.max(1, Math.round((Date.now() - savedAt) / 6e4));
+		if (minutes < 60) return `hace ${minutes} min`;
+		const hours = Math.round(minutes / 60);
+		return `hace ${hours} ${hours === 1 ? "hora" : "horas"}`;
+	}
+	restablecer() {
+		const tree = this.formTree();
+		const schema = this.schema();
+		if (!tree || !schema) return;
+		this.applyRecord(tree, schema, this.loadedRecord ?? seedModel(schema));
+		this.serverErrors.set({ fields: {} });
+		this.submitted.set(false);
+		this.attemptedSteps.set(/* @__PURE__ */ new Set());
+		this.draftOffer.set(null);
+		this.clearDraft();
+		this.notifications.info("Se restauraron los valores originales.");
+	}
+	retry() {
+		this.load();
+	}
+	volverDeError() {
+		this.nav.back();
+	}
+	async onSubmit(event) {
+		event.preventDefault();
+		const tree = this.formTree();
+		if (!tree || this.saving()) return;
+		this.serverErrors.set({ fields: {} });
+		this.saving.set(true);
+		try {
+			if (!await submit(tree, {
+				action: async () => {
+					await this.persist(tree);
+					return null;
+				},
+				onInvalid: () => this.revealErrors()
+			}) || this.hasServerErrors()) this.revealErrors();
+		} finally {
+			this.saving.set(false);
+		}
+	}
+	async persist(tree) {
+		const schema = this.schema();
+		if (!schema) return;
+		const payload = buildPayload(schema, tree);
+		try {
+			if (this.mode() === "create") {
+				const created = await firstValueFrom(this.api.create(schema.endpoint, payload));
+				tree().reset();
+				this.clearDraft();
+				this.draftOffer.set(null);
+				if (schema.postCreate?.mode === "modal") {
+					this.createdWithSummary.set(created ?? payload);
+					return;
+				}
+				this.notifications.success("Registro creado.");
+				this.router.navigate(["/", schema.id]);
+				return;
+			}
+			await firstValueFrom(this.api.update(schema.endpoint, this.mode() === "edit" ? this.recordKey() ?? void 0 : void 0, payload));
+			this.notifications.success("Registro guardado.");
+			tree().reset();
+			this.clearDraft();
+			this.draftOffer.set(null);
+			this.loadedSnapshot = JSON.stringify(tree().value());
+		} catch (err) {
+			this.applyServerErrors(this.errorMapper.map(err));
+			return;
+		}
+		try {
+			const record = await firstValueFrom(this.api.get(schema.endpoint, this.recordKey() ?? void 0));
+			this.applyRecord(tree, schema, record ?? {});
+			tree().reset();
+		} catch {
+			this.notifications.error("No se pudo recargar el registro.");
+		}
+	}
+	applyServerErrors(mapped) {
+		const rendered = new Set(this.renderedFields().map((field) => field.key));
+		const fields = {};
+		const loose = [];
+		if (mapped.general) loose.push(mapped.general);
+		for (const [path, message] of Object.entries(mapped.fields)) {
+			const root = path.split(/[.[]/)[0];
+			if (rendered.has(root)) fields[path] = message;
+			else loose.push(message);
+		}
+		this.serverErrors.set({
+			fields,
+			general: loose.length > 0 ? loose.join(" ") : void 0
+		});
+	}
+	hasServerErrors() {
+		const current = this.serverErrors();
+		return current.general !== void 0 || Object.keys(current.fields).length > 0;
+	}
+	revealErrors() {
+		this.submitted.set(true);
+		const sections = this.sectionViews();
+		if (this.layoutMode() === "sections") this.openSections.update((open) => {
+			const next = { ...open };
+			for (const section of sections) next[section.id] = true;
+			return next;
+		});
+		const withProblem = sections.find((section) => this.sectionHasProblem(section));
+		if (withProblem && this.layoutMode() === "tabs") this.activeSection.set(withProblem.id);
+		if (this.layoutMode() === "steps") {
+			const invalidSteps = sections.filter((section) => this.sectionHasProblem(section)).map((section) => section.id);
+			this.attemptedSteps.update((attempted) => /* @__PURE__ */ new Set([...attempted, ...invalidSteps]));
+			if (withProblem) this.activeSection.set(withProblem.id);
+		}
+		setTimeout(() => {
+			if (this.summaryErrors().length >= 2) this.focusSummary();
+			else this.scrollToFirstError();
+		});
+	}
+	scrollToFirstError() {
+		for (const wrap of document.querySelectorAll("[data-field]")) {
+			if (!wrap.querySelector("p[role=\"alert\"]")) continue;
+			wrap.scrollIntoView({
+				behavior: "smooth",
+				block: "center"
+			});
+			wrap.querySelector("input:not([type=\"hidden\"]), textarea, select, [contenteditable=\"true\"]")?.focus({ preventScroll: true });
+			return;
+		}
+	}
+	async remove() {
+		const schema = this.schema();
+		const key = this.recordKey();
+		if (!schema || this.mode() !== "edit" || !key) return;
+		const title = this.title();
+		if (!await this.notifications.confirm({
+			title: title ? `Eliminar «${title}»` : `Eliminar ${schema.label.toLowerCase()}`,
+			message: "Esta acción no se puede deshacer.",
+			confirmLabel: "Eliminar",
+			cancelLabel: "Cancelar"
+		})) return;
+		try {
+			await firstValueFrom(this.api.remove(schema.endpoint, key));
+			this.notifications.success("Registro eliminado.");
+			this.back();
+		} catch (err) {
+			this.notifications.error(this.errorMapper.messageOf(err));
+		}
+	}
+	async canDeactivate() {
+		if (!this.dirty()) return true;
+		return this.notifications.confirm({
+			title: "Cambios sin guardar",
+			message: "Si sales ahora, se perderán los cambios realizados.",
+			confirmLabel: "Salir sin guardar",
+			cancelLabel: "Seguir editando"
+		});
+	}
+	back() {
+		this.router.navigate(["/", this.schema()?.id]);
+	}
+	onPostCreateClosed() {
+		const schema = this.schema();
+		this.createdWithSummary.set(null);
+		if (schema) this.router.navigate(["/", schema.id]);
+	}
+	colSpan(field) {
+		return colSpanClass(field.width);
+	}
+	tabId(sectionId) {
+		return `section-tab-${sectionId}`;
+	}
+	onTablistKeydown(event) {
+		const tabs = this.sectionViews();
+		if (tabs.length < 2) return;
+		const current = Math.max(tabs.findIndex((section) => section.id === this.activeSection()), 0);
+		let next;
+		switch (event.key) {
+			case "ArrowRight":
+				next = (current + 1) % tabs.length;
+				break;
+			case "ArrowLeft":
+				next = (current - 1 + tabs.length) % tabs.length;
+				break;
+			case "Home":
+				next = 0;
+				break;
+			case "End":
+				next = tabs.length - 1;
+				break;
+			default: return;
+		}
+		event.preventDefault();
+		this.selectSection(tabs[next].id);
+		const active = this.activeSection() ?? tabs[current].id;
+		document.getElementById(this.tabId(active))?.focus();
+	}
+	tabClass(section) {
+		return section.id === this.activeSection() ? TAB_ACTIVE : TAB_INACTIVE;
+	}
+	isFirstStep() {
+		return this.sectionViews().findIndex((section) => section.id === this.activeSection()) <= 0;
+	}
+	isLastStep() {
+		const sections = this.sectionViews();
+		const index = sections.findIndex((section) => section.id === this.activeSection());
+		return sections.length === 0 || index >= sections.length - 1;
+	}
+	previousStep() {
+		const sections = this.sectionViews();
+		const current = sections.findIndex((section) => section.id === this.activeSection());
+		if (current > 0) {
+			this.activeSection.set(sections[current - 1].id);
+			this.scrollToStep();
+		}
+	}
+	nextStep() {
+		const sections = this.sectionViews();
+		const current = sections.findIndex((section) => section.id === this.activeSection());
+		if (current < 0 || current >= sections.length - 1) return;
+		if (current === 0 && this.unsectionedHasLocalErrors()) {
+			this.revealUnsectionedErrors();
+			return;
+		}
+		const section = sections[current];
+		if (this.sectionHasLocalErrors(section.id)) {
+			this.attemptedSteps.update((attempted) => /* @__PURE__ */ new Set([...attempted, section.id]));
+			this.revealSectionErrors(section.id);
+			return;
+		}
+		this.activeSection.set(sections[current + 1].id);
+		this.scrollToStep();
+	}
+	unsectionedHasLocalErrors() {
+		const tree = this.formTree();
+		return tree !== null && this.unsectionedFields().some((field) => childTree(tree, field.key)().invalid());
+	}
+	revealUnsectionedErrors() {
+		const tree = this.formTree();
+		if (!tree) return;
+		this.submitted.set(true);
+		for (const field of this.unsectionedFields()) childTree(tree, field.key)().markAsTouched();
+		setTimeout(() => this.scrollToFirstError());
+	}
+	scrollToStep() {
+		setTimeout(() => document.getElementById("step-panel")?.scrollIntoView({
+			behavior: "smooth",
+			block: "start"
+		}));
+	}
+	selectSection(id) {
+		const current = this.activeSection();
+		if (this.submitted() && current !== null && current !== id && this.sectionHasLocalErrors(current)) {
+			this.revealSectionErrors(current);
+			return;
+		}
+		this.activeSection.set(id);
+	}
+	sectionHasLocalErrors(sectionId) {
+		const tree = this.formTree();
+		const section = this.sectionViews().find((view) => view.id === sectionId);
+		if (!tree || !section) return false;
+		return section.fields.some((field) => childTree(tree, field.key)().invalid());
+	}
+	revealSectionErrors(sectionId) {
+		const tree = this.formTree();
+		const section = this.sectionViews().find((view) => view.id === sectionId);
+		if (!tree || !section) return;
+		this.submitted.set(true);
+		this.attemptedSteps.update((attempted) => /* @__PURE__ */ new Set([...attempted, sectionId]));
+		for (const field of section.fields) childTree(tree, field.key)().markAsTouched();
+		setTimeout(() => this.scrollToFirstError());
+	}
+	isSectionOpen(id) {
+		return this.openSections()[id] ?? true;
+	}
+	setSectionOpen(id, event) {
+		const open = event.target.open;
+		this.openSections.update((sections) => ({
+			...sections,
+			[id]: open
+		}));
+	}
+	goToSection(id) {
+		this.openSections.update((open) => ({
+			...open,
+			[id]: true
+		}));
+		setTimeout(() => {
+			const section = document.getElementById(`section-${id}`);
+			if (!section) return;
+			section.scrollIntoView({
+				behavior: "smooth",
+				block: "start"
+			});
+			section.querySelector("summary")?.focus({ preventScroll: true });
+		});
+	}
+	fieldHasProblem(field) {
+		const root = field.key;
+		if (Object.keys(this.serverErrors().fields).some((path) => path === root || path.startsWith(`${root}.`) || path.startsWith(`${root}[`))) return true;
+		const tree = this.formTree();
+		return tree !== null && childTree(tree, root)().invalid();
+	}
+	sectionHasProblem(section) {
+		return section.fields.some((field) => this.fieldHasProblem(field));
+	}
+	sectionProgress(section) {
+		if (!this.sectionHasProblem(section)) return "complete";
+		if (this.layoutMode() === "steps" && !this.attemptedSteps().has(section.id)) return "pending";
+		return this.submitted() ? "problem" : "pending";
+	}
+	collectErrors() {
+		const tree = this.formTree();
+		if (!tree) return [];
+		const server = this.serverErrors().fields;
+		const entries = [];
+		const seen = /* @__PURE__ */ new Set();
+		const walk = (fields, subtree, inheritedSection) => {
+			for (const field of fields) {
+				const section = field.section ?? inheritedSection;
+				const state = childTree(subtree, field.key)();
+				const serverMessage = this.serverMessageFor(field.key, server);
+				if (field.type === "group") {
+					const before = entries.length;
+					walk(field.fields, groupTree(subtree, field.key), section);
+					if (entries.length === before && (serverMessage || state.invalid())) {
+						seen.add(state.name());
+						entries.push({
+							id: state.name(),
+							label: field.label,
+							message: serverMessage ?? "Revisa este campo",
+							section
+						});
+					}
+					continue;
+				}
+				if (!state.invalid() && !serverMessage) continue;
+				const composite = field.type === "list" || field.type === "key-value" || field.type === "string-list";
+				const id = state.name();
+				if (seen.has(id)) continue;
+				seen.add(id);
+				entries.push({
+					id,
+					label: field.label,
+					message: serverMessage ?? state.errors()[0]?.message ?? (composite ? "Hay elementos con errores" : "Revisa este campo"),
+					section
+				});
+			}
+		};
+		walk(this.renderedFields(), tree);
+		return entries;
+	}
+	serverMessageFor(root, server) {
+		for (const [path, message] of Object.entries(server)) if (path === root || path.startsWith(`${root}.`) || path.startsWith(`${root}[`)) return message;
+	}
+	async goToError(entry, event) {
+		event.preventDefault();
+		if (entry.section) {
+			if (this.layoutMode() === "tabs" || this.layoutMode() === "steps") this.activeSection.set(entry.section);
+			else this.openSections.update((open) => ({
+				...open,
+				[entry.section]: true
+			}));
+		}
+		await this.appRef.whenStable();
+		this.focusField(entry.id);
+	}
+	focusField(id) {
+		const wrap = document.querySelector(`[data-field="${id}"]`);
+		if (!wrap) return;
+		wrap.scrollIntoView({
+			behavior: "smooth",
+			block: "center"
+		});
+		wrap.querySelector("input:not([type=\"hidden\"]), textarea, select, [contenteditable=\"true\"]")?.focus({ preventScroll: true });
+	}
+	focusSummary() {
+		const summary = document.querySelector("[data-error-summary]");
+		summary?.scrollIntoView({
+			behavior: "smooth",
+			block: "start"
+		});
+		summary?.focus({ preventScroll: true });
+	}
+	title() {
+		const tree = this.formTree();
+		const schema = this.schema();
+		if (!tree || !schema) return "";
+		const value = tree().value()[schema.titleField];
+		return typeof value === "string" ? value : "";
+	}
+	recordKey() {
+		return this.params().get("key");
+	}
+	drawerSchema(resource) {
+		return getSchema(resource);
+	}
+	relationCreated(record, request) {
+		const target = getSchema(request.resource);
+		const key = target === void 0 ? void 0 : record[target.keyField];
+		this.relationDrawer.clear();
+		if (key === void 0 || key === null || key === "") return;
+		request.onCreated(String(key));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: FormView,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: FormView,
+		isStandalone: true,
+		selector: "app-form-view",
+		ngImport: i0,
+		template: `
+    @if (schema()) {
+      <header class="mb-6 flex flex-wrap items-start justify-between gap-4">
+        <div>
+          <div class="flex flex-wrap items-center gap-3">
+            <h1 class="font-display text-2xl font-semibold">{{ heading() }}</h1>
+            @if (dirty()) {
+              <span
+                class="rounded-full bg-accent/15 px-2.5 py-0.5 text-xs font-medium text-accent-text"
+              >
+                Sin guardar
+              </span>
+            }
+          </div>
+          @if (mode() === 'single') {
+            <p class="text-sm text-neutral">Configuración única</p>
+          }
+        </div>
+        @if (mode() !== 'single') {
+          <button app-button variant="outline" type="button" (click)="back()">
+            Volver al listado
+          </button>
+        }
+      </header>
+
+      @switch (status()) {
+        @case ('loading') {
+          <app-skeleton [lines]="8" [height]="48" />
+        }
+        @case ('error') {
+          <app-empty-state
+            title="No se pudo cargar el registro"
+            message="Revisa tu conexión e intenta de nuevo."
+          >
+            <button app-button variant="outline" type="button" (click)="retry()">Reintentar</button>
+            <button app-button variant="outline" type="button" (click)="volverDeError()">
+              Volver
+            </button>
+          </app-empty-state>
+        }
+        @case ('ready') {
+          @if (formTree(); as tree) {
+            @if (serverErrors().general; as general) {
+              <p
+                class="mb-4 rounded-lg border border-danger/30 bg-danger/10 px-4 py-3 text-sm text-danger"
+                role="alert"
+              >
+                {{ general }}
+              </p>
+            }
+
+            <form novalidate [attr.aria-busy]="saving()" (submit)="onSubmit($event)">
+              @if (draftOffer(); as offer) {
+                <!-- §4.6: se OFRECE, nunca se restaura solo. role=status para
+                     anunciarlo sin arrebatarle el foco a quien está escribiendo. -->
+                <div
+                  class="mb-4 flex flex-wrap items-center gap-3 rounded-lg border border-neutral/20 bg-surface px-4 py-3 text-sm"
+                  role="status"
+                >
+                  <span class="text-neutral">
+                    Hay un borrador guardado {{ draftAge(offer.savedAt) }}.
+                  </span>
+                  <button app-button variant="outline" type="button" (click)="restoreDraft()">
+                    Restaurar
+                  </button>
+                  <button app-button variant="ghost" type="button" (click)="discardDraft()">
+                    Descartar
+                  </button>
+                </div>
+              }
+
+              @if (summaryErrors().length >= 2) {
+                <!-- Con uno solo no se pinta: el foco ya está en el campo y
+                     el resumen sólo restaría. Con 2+ es la única forma de
+                     ver que hay varios (§4.11). tabindex -1 para poder
+                     recibir el foco y que role=alert lo anuncie. -->
+                <div
+                  data-error-summary
+                  tabindex="-1"
+                  role="alert"
+                  aria-labelledby="error-summary-title"
+                  class="mb-4 rounded-lg border border-danger/30 bg-danger/10 px-4 py-3 focus:outline-2 focus:outline-danger"
+                >
+                  <p id="error-summary-title" class="text-sm font-semibold text-danger">
+                    Hay {{ summaryErrors().length }} errores que corregir
+                  </p>
+                  <ul class="mt-2 list-disc space-y-1 pl-5 text-sm">
+                    @for (entry of summaryErrors(); track entry.id) {
+                      <li>
+                        <a
+                          href="#"
+                          class="text-danger underline underline-offset-2 hover:text-danger/80"
+                          (click)="goToError(entry, $event)"
+                        >
+                          {{ entry.label }} — {{ entry.message }}
+                        </a>
+                      </li>
+                    }
+                  </ul>
+                </div>
+              }
+
+              @if (layoutMode() === 'grid') {
+                <div class="grid grid-cols-1 gap-x-4 sm:grid-cols-12">
+                  @for (field of renderedFields(); track field.key) {
+                    <div [class]="colSpan(field)">
+                      <app-field-host
+                        [field]="field"
+                        [tree]="tree"
+                        [exists]="exists()"
+                        [serverErrors]="serverErrors().fields"
+                        [resource]="resourceId()"
+                      />
+                    </div>
+                  }
+                </div>
+              } @else if (unsectionedFields().length > 0) {
+                <div class="grid grid-cols-1 gap-x-4 sm:grid-cols-12">
+                  @for (field of unsectionedFields(); track field.key) {
+                    <div [class]="colSpan(field)">
+                      <app-field-host
+                        [field]="field"
+                        [tree]="tree"
+                        [exists]="exists()"
+                        [serverErrors]="serverErrors().fields"
+                        [resource]="resourceId()"
+                      />
+                    </div>
+                  }
+                </div>
+              }
+
+              @if (layoutMode() === 'tabs') {
+                <div
+                  role="tablist"
+                  class="mb-4 flex flex-wrap gap-1 border-b border-neutral/20"
+                  (keydown)="onTablistKeydown($event)"
+                >
+                  @for (section of sectionViews(); track section.id) {
+                    <button
+                      type="button"
+                      role="tab"
+                      [id]="tabId(section.id)"
+                      [class]="tabClass(section)"
+                      [attr.aria-selected]="activeSection() === section.id"
+                      [attr.tabindex]="activeSection() === section.id ? 0 : -1"
+                      (click)="selectSection(section.id)"
+                    >
+                      {{ section.label }}
+                      <!-- Progreso (§4.3, decisión A): el ✓ siempre que esté
+                           completa; el ⚠ recién después del primer Guardar.
+                           El glifo va oculto para lectores y el estado se
+                           cuenta aparte en texto. -->
+                      @switch (sectionProgress(section)) {
+                        @case ('problem') {
+                          <span class="ml-1 text-danger" aria-hidden="true">⚠</span>
+                          <span class="sr-only"> — con errores</span>
+                        }
+                        @case ('complete') {
+                          <span class="ml-1 text-success" aria-hidden="true">✓</span>
+                          <span class="sr-only"> — completa</span>
+                        }
+                      }
+                    </button>
+                  }
+                </div>
+              }
+
+              @if (layoutMode() === 'steps') {
+                <ol aria-label="Progreso del formulario" class="mb-4 flex flex-wrap gap-2">
+                  @for (section of sectionViews(); track section.id; let index = $index) {
+                    <li
+                      class="rounded-full border px-3 py-1 text-sm"
+                      [class.border-primary]="activeSection() === section.id"
+                      [class.font-semibold]="activeSection() === section.id"
+                      [attr.aria-current]="activeSection() === section.id ? 'step' : null"
+                    >
+                      {{ index + 1 }}. {{ section.label }}
+                    </li>
+                  }
+                </ol>
+              }
+
+              @if (layoutMode() === 'tabs' || layoutMode() === 'steps') {
+                @for (section of visibleSections(); track section.id) {
+                  <div
+                    role="tabpanel"
+                    [attr.id]="layoutMode() === 'steps' ? 'step-panel' : null"
+                    class="grid grid-cols-1 gap-x-4 sm:grid-cols-12"
+                  >
+                    @for (field of section.fields; track field.key) {
+                      <div [class]="colSpan(field)">
+                        <app-field-host
+                          [field]="field"
+                          [tree]="tree"
+                          [exists]="exists()"
+                          [serverErrors]="serverErrors().fields"
+                          [resource]="resourceId()"
+                        />
+                      </div>
+                    }
+                  </div>
+                }
+                @if (layoutMode() === 'steps' && sectionViews().length > 1) {
+                  <div class="mt-4 flex justify-between gap-3">
+                    <button
+                      app-button
+                      variant="outline"
+                      type="button"
+                      [disabled]="isFirstStep()"
+                      (click)="previousStep()"
+                    >
+                      Anterior
+                    </button>
+                    @if (!isLastStep()) {
+                      <button app-button type="button" (click)="nextStep()">Continuar</button>
+                    }
+                  </div>
+                }
+              } @else if (layoutMode() === 'columns') {
+                <div
+                  [class]="
+                    layoutColumns() === 3
+                      ? 'grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3'
+                      : 'grid grid-cols-1 gap-4 md:grid-cols-2'
+                  "
+                >
+                  @for (section of sectionViews(); track section.id) {
+                    <section class="rounded-xl border border-neutral/20 bg-surface p-4">
+                      <h2 class="mb-3 text-section font-semibold">{{ section.label }}</h2>
+                      <div class="grid grid-cols-1 gap-x-4 sm:grid-cols-12">
+                        @for (field of section.fields; track field.key) {
+                          <div [class]="colSpan(field)">
+                            <app-field-host
+                              [field]="field"
+                              [tree]="tree"
+                              [exists]="exists()"
+                              [serverErrors]="serverErrors().fields"
+                              [resource]="resourceId()"
+                            />
+                          </div>
+                        }
+                      </div>
+                    </section>
+                  }
+                </div>
+              } @else if (layoutMode() === 'sections') {
+                <!-- Índice interno (§5.3): en escritorio, índice sticky a la
+                     izquierda; en móvil, chips horizontales. En tabs las
+                     pestañas ya hacen de índice, así que esto no se dibuja. -->
+                <div class="flex flex-col gap-4 lg:flex-row lg:gap-6">
+                  <nav
+                    aria-label="Secciones"
+                    class="sticky top-4 hidden shrink-0 self-start lg:block lg:w-44"
+                  >
+                    <p
+                      class="mb-2 text-xs font-semibold uppercase tracking-wide text-neutral"
+                      aria-hidden="true"
+                    >
+                      Secciones
+                    </p>
+                    <ul class="space-y-1 border-l border-neutral/20 pl-3">
+                      @for (section of visibleSections(); track section.id) {
+                        <li>
+                          <button
+                            type="button"
+                            class="w-full rounded px-2 py-1 text-left text-sm hover:bg-neutral/10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
+                            [class.font-medium]="sectionProgress(section) === 'problem'"
+                            (click)="goToSection(section.id)"
+                          >
+                            {{ section.label }}
+                            @switch (sectionProgress(section)) {
+                              @case ('problem') {
+                                <span class="ml-1 text-danger" aria-hidden="true">⚠</span>
+                                <span class="sr-only"> — con errores</span>
+                              }
+                              @case ('complete') {
+                                <span class="ml-1 text-success" aria-hidden="true">✓</span>
+                                <span class="sr-only"> — completa</span>
+                              }
+                            }
+                          </button>
+                        </li>
+                      }
+                    </ul>
+                  </nav>
+
+                  <div class="min-w-0 flex-1" [class.lg:grid]="layoutMode() === 'columns'">
+                    <nav
+                      aria-label="Secciones"
+                      class="-mx-1 mb-4 flex gap-2 overflow-x-auto px-1 pb-1 lg:hidden"
+                    >
+                      @for (section of visibleSections(); track section.id) {
+                        <button
+                          type="button"
+                          class="shrink-0 rounded-full border border-neutral/30 px-3 py-1 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
+                          [class.border-danger]="sectionProgress(section) === 'problem'"
+                          [class.text-danger]="sectionProgress(section) === 'problem'"
+                          [class.font-medium]="sectionProgress(section) === 'problem'"
+                          (click)="goToSection(section.id)"
+                        >
+                          {{ section.label }}
+                        </button>
+                      }
+                    </nav>
+
+                    @for (section of visibleSections(); track section.id) {
+                      <details
+                        id="section-{{ section.id }}"
+                        class="mb-4 rounded-xl border border-neutral/20 bg-surface scroll-mt-4"
+                        [open]="isSectionOpen(section.id)"
+                        (toggle)="setSectionOpen(section.id, $event)"
+                      >
+                        <summary
+                          tabindex="-1"
+                          class="flex cursor-pointer items-center justify-between gap-2 rounded-xl px-4 py-3 text-section font-semibold hover:bg-neutral/5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
+                        >
+                          <span>{{ section.label }}</span>
+                          @if (sectionProgress(section) === 'problem') {
+                            <span class="text-xs font-medium text-danger">Revisar</span>
+                          }
+                        </summary>
+                        <div class="grid grid-cols-1 gap-x-4 px-4 pb-4 sm:grid-cols-12">
+                          @for (field of section.fields; track field.key) {
+                            <div [class]="colSpan(field)">
+                              <app-field-host
+                                [field]="field"
+                                [tree]="tree"
+                                [exists]="exists()"
+                                [serverErrors]="serverErrors().fields"
+                                [resource]="resourceId()"
+                              />
+                            </div>
+                          }
+                        </div>
+                      </details>
+                    }
+                  </div>
+                </div>
+              }
+
+              <!-- Sticky (§5.1): en products son 19 campos y Cancelar/Guardar
+                     desaparecían al final del scroll. bg-surface es opaco: sin
+                     él el contenido vería pasar por detrás. -->
+              <div
+                class="sticky bottom-0 z-10 mt-6 flex flex-wrap items-center justify-end gap-3 border-t border-neutral/20 bg-surface pt-4 pb-[calc(1rem+env(safe-area-inset-bottom))]"
+              >
+                @if (canDelete()) {
+                  <div class="mr-auto">
+                    <button app-button variant="danger" type="button" (click)="remove()">
+                      Eliminar
+                    </button>
+                  </div>
+                }
+                @if (mode() !== 'create') {
+                  <!-- §5: descartar lo escrito y volver a lo del servidor. -->
+                  <button app-button variant="ghost" type="button" (click)="restablecer()">
+                    Restablecer
+                  </button>
+                }
+                <button app-button variant="outline" type="button" (click)="back()">
+                  Cancelar
+                </button>
+                <button app-button type="submit" [loading]="saving()" [disabled]="!canSave()">
+                  {{ saving() ? 'Guardando…' : 'Guardar' }}
+                </button>
+              </div>
+            </form>
+          }
+        }
+      }
+    } @else {
+      <app-empty-state
+        title="Recurso no encontrado"
+        message="No existe un schema con ese id en el registry."
+      />
+    }
+
+    <!-- «Crear nuevo» desde el dropdown de una relación (plan 6.4). Se monta
+         y desmonta con el pedido: el Drawer devuelve el foco al botón que lo
+         abrió al destruirse. -->
+    @if (relationDrawer.request(); as createRequest) {
+      @if (drawerSchema(createRequest.resource); as target) {
+        <app-drawer-form
+          [open]="true"
+          [schema]="target"
+          mode="create"
+          [title]="'Crear ' + target.label"
+          (close)="relationDrawer.clear()"
+          (saved)="relationCreated($event, createRequest)"
+        />
+      }
+    }
+
+    @if (createdWithSummary(); as createdRec) {
+      @if (schema()?.postCreate; as postCreateConfig) {
+        <app-post-create-modal
+          [schema]="schema()!"
+          [config]="postCreateConfig"
+          [record]="createdRec"
+          (closed)="onPostCreateClosed()"
+        />
+      }
+    }
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "component",
+				type: Button,
+				selector: "button[app-button]",
+				inputs: [
+					"variant",
+					"size",
+					"type",
+					"disabled",
+					"loading"
+				]
+			},
+			{
+				kind: "component",
+				type: DrawerForm,
+				selector: "app-drawer-form",
+				inputs: [
+					"open",
+					"schema",
+					"fields",
+					"mode",
+					"recordKey",
+					"title",
+					"size"
+				],
+				outputs: ["saved", "close"]
+			},
+			{
+				kind: "component",
+				type: EmptyState,
+				selector: "app-empty-state",
+				inputs: ["title", "message"]
+			},
+			{
+				kind: "component",
+				type: FieldHost,
+				selector: "app-field-host",
+				inputs: [
+					"field",
+					"tree",
+					"exists",
+					"serverErrors",
+					"pathPrefix",
+					"resource"
+				]
+			},
+			{
+				kind: "component",
+				type: PostCreateModal,
+				selector: "app-post-create-modal",
+				inputs: [
+					"schema",
+					"config",
+					"record",
+					"configValues"
+				],
+				outputs: ["closed"]
+			},
+			{
+				kind: "component",
+				type: Skeleton,
+				selector: "app-skeleton",
+				inputs: [
+					"lines",
+					"height",
+					"width"
+				]
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: FormView,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-form-view",
+			imports: [
+				Button,
+				DrawerForm,
+				EmptyState,
+				FieldHost,
+				PostCreateModal,
+				Skeleton
+			],
+			template: `
+    @if (schema()) {
+      <header class="mb-6 flex flex-wrap items-start justify-between gap-4">
+        <div>
+          <div class="flex flex-wrap items-center gap-3">
+            <h1 class="font-display text-2xl font-semibold">{{ heading() }}</h1>
+            @if (dirty()) {
+              <span
+                class="rounded-full bg-accent/15 px-2.5 py-0.5 text-xs font-medium text-accent-text"
+              >
+                Sin guardar
+              </span>
+            }
+          </div>
+          @if (mode() === 'single') {
+            <p class="text-sm text-neutral">Configuración única</p>
+          }
+        </div>
+        @if (mode() !== 'single') {
+          <button app-button variant="outline" type="button" (click)="back()">
+            Volver al listado
+          </button>
+        }
+      </header>
+
+      @switch (status()) {
+        @case ('loading') {
+          <app-skeleton [lines]="8" [height]="48" />
+        }
+        @case ('error') {
+          <app-empty-state
+            title="No se pudo cargar el registro"
+            message="Revisa tu conexión e intenta de nuevo."
+          >
+            <button app-button variant="outline" type="button" (click)="retry()">Reintentar</button>
+            <button app-button variant="outline" type="button" (click)="volverDeError()">
+              Volver
+            </button>
+          </app-empty-state>
+        }
+        @case ('ready') {
+          @if (formTree(); as tree) {
+            @if (serverErrors().general; as general) {
+              <p
+                class="mb-4 rounded-lg border border-danger/30 bg-danger/10 px-4 py-3 text-sm text-danger"
+                role="alert"
+              >
+                {{ general }}
+              </p>
+            }
+
+            <form novalidate [attr.aria-busy]="saving()" (submit)="onSubmit($event)">
+              @if (draftOffer(); as offer) {
+                <!-- §4.6: se OFRECE, nunca se restaura solo. role=status para
+                     anunciarlo sin arrebatarle el foco a quien está escribiendo. -->
+                <div
+                  class="mb-4 flex flex-wrap items-center gap-3 rounded-lg border border-neutral/20 bg-surface px-4 py-3 text-sm"
+                  role="status"
+                >
+                  <span class="text-neutral">
+                    Hay un borrador guardado {{ draftAge(offer.savedAt) }}.
+                  </span>
+                  <button app-button variant="outline" type="button" (click)="restoreDraft()">
+                    Restaurar
+                  </button>
+                  <button app-button variant="ghost" type="button" (click)="discardDraft()">
+                    Descartar
+                  </button>
+                </div>
+              }
+
+              @if (summaryErrors().length >= 2) {
+                <!-- Con uno solo no se pinta: el foco ya está en el campo y
+                     el resumen sólo restaría. Con 2+ es la única forma de
+                     ver que hay varios (§4.11). tabindex -1 para poder
+                     recibir el foco y que role=alert lo anuncie. -->
+                <div
+                  data-error-summary
+                  tabindex="-1"
+                  role="alert"
+                  aria-labelledby="error-summary-title"
+                  class="mb-4 rounded-lg border border-danger/30 bg-danger/10 px-4 py-3 focus:outline-2 focus:outline-danger"
+                >
+                  <p id="error-summary-title" class="text-sm font-semibold text-danger">
+                    Hay {{ summaryErrors().length }} errores que corregir
+                  </p>
+                  <ul class="mt-2 list-disc space-y-1 pl-5 text-sm">
+                    @for (entry of summaryErrors(); track entry.id) {
+                      <li>
+                        <a
+                          href="#"
+                          class="text-danger underline underline-offset-2 hover:text-danger/80"
+                          (click)="goToError(entry, $event)"
+                        >
+                          {{ entry.label }} — {{ entry.message }}
+                        </a>
+                      </li>
+                    }
+                  </ul>
+                </div>
+              }
+
+              @if (layoutMode() === 'grid') {
+                <div class="grid grid-cols-1 gap-x-4 sm:grid-cols-12">
+                  @for (field of renderedFields(); track field.key) {
+                    <div [class]="colSpan(field)">
+                      <app-field-host
+                        [field]="field"
+                        [tree]="tree"
+                        [exists]="exists()"
+                        [serverErrors]="serverErrors().fields"
+                        [resource]="resourceId()"
+                      />
+                    </div>
+                  }
+                </div>
+              } @else if (unsectionedFields().length > 0) {
+                <div class="grid grid-cols-1 gap-x-4 sm:grid-cols-12">
+                  @for (field of unsectionedFields(); track field.key) {
+                    <div [class]="colSpan(field)">
+                      <app-field-host
+                        [field]="field"
+                        [tree]="tree"
+                        [exists]="exists()"
+                        [serverErrors]="serverErrors().fields"
+                        [resource]="resourceId()"
+                      />
+                    </div>
+                  }
+                </div>
+              }
+
+              @if (layoutMode() === 'tabs') {
+                <div
+                  role="tablist"
+                  class="mb-4 flex flex-wrap gap-1 border-b border-neutral/20"
+                  (keydown)="onTablistKeydown($event)"
+                >
+                  @for (section of sectionViews(); track section.id) {
+                    <button
+                      type="button"
+                      role="tab"
+                      [id]="tabId(section.id)"
+                      [class]="tabClass(section)"
+                      [attr.aria-selected]="activeSection() === section.id"
+                      [attr.tabindex]="activeSection() === section.id ? 0 : -1"
+                      (click)="selectSection(section.id)"
+                    >
+                      {{ section.label }}
+                      <!-- Progreso (§4.3, decisión A): el ✓ siempre que esté
+                           completa; el ⚠ recién después del primer Guardar.
+                           El glifo va oculto para lectores y el estado se
+                           cuenta aparte en texto. -->
+                      @switch (sectionProgress(section)) {
+                        @case ('problem') {
+                          <span class="ml-1 text-danger" aria-hidden="true">⚠</span>
+                          <span class="sr-only"> — con errores</span>
+                        }
+                        @case ('complete') {
+                          <span class="ml-1 text-success" aria-hidden="true">✓</span>
+                          <span class="sr-only"> — completa</span>
+                        }
+                      }
+                    </button>
+                  }
+                </div>
+              }
+
+              @if (layoutMode() === 'steps') {
+                <ol aria-label="Progreso del formulario" class="mb-4 flex flex-wrap gap-2">
+                  @for (section of sectionViews(); track section.id; let index = $index) {
+                    <li
+                      class="rounded-full border px-3 py-1 text-sm"
+                      [class.border-primary]="activeSection() === section.id"
+                      [class.font-semibold]="activeSection() === section.id"
+                      [attr.aria-current]="activeSection() === section.id ? 'step' : null"
+                    >
+                      {{ index + 1 }}. {{ section.label }}
+                    </li>
+                  }
+                </ol>
+              }
+
+              @if (layoutMode() === 'tabs' || layoutMode() === 'steps') {
+                @for (section of visibleSections(); track section.id) {
+                  <div
+                    role="tabpanel"
+                    [attr.id]="layoutMode() === 'steps' ? 'step-panel' : null"
+                    class="grid grid-cols-1 gap-x-4 sm:grid-cols-12"
+                  >
+                    @for (field of section.fields; track field.key) {
+                      <div [class]="colSpan(field)">
+                        <app-field-host
+                          [field]="field"
+                          [tree]="tree"
+                          [exists]="exists()"
+                          [serverErrors]="serverErrors().fields"
+                          [resource]="resourceId()"
+                        />
+                      </div>
+                    }
+                  </div>
+                }
+                @if (layoutMode() === 'steps' && sectionViews().length > 1) {
+                  <div class="mt-4 flex justify-between gap-3">
+                    <button
+                      app-button
+                      variant="outline"
+                      type="button"
+                      [disabled]="isFirstStep()"
+                      (click)="previousStep()"
+                    >
+                      Anterior
+                    </button>
+                    @if (!isLastStep()) {
+                      <button app-button type="button" (click)="nextStep()">Continuar</button>
+                    }
+                  </div>
+                }
+              } @else if (layoutMode() === 'columns') {
+                <div
+                  [class]="
+                    layoutColumns() === 3
+                      ? 'grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3'
+                      : 'grid grid-cols-1 gap-4 md:grid-cols-2'
+                  "
+                >
+                  @for (section of sectionViews(); track section.id) {
+                    <section class="rounded-xl border border-neutral/20 bg-surface p-4">
+                      <h2 class="mb-3 text-section font-semibold">{{ section.label }}</h2>
+                      <div class="grid grid-cols-1 gap-x-4 sm:grid-cols-12">
+                        @for (field of section.fields; track field.key) {
+                          <div [class]="colSpan(field)">
+                            <app-field-host
+                              [field]="field"
+                              [tree]="tree"
+                              [exists]="exists()"
+                              [serverErrors]="serverErrors().fields"
+                              [resource]="resourceId()"
+                            />
+                          </div>
+                        }
+                      </div>
+                    </section>
+                  }
+                </div>
+              } @else if (layoutMode() === 'sections') {
+                <!-- Índice interno (§5.3): en escritorio, índice sticky a la
+                     izquierda; en móvil, chips horizontales. En tabs las
+                     pestañas ya hacen de índice, así que esto no se dibuja. -->
+                <div class="flex flex-col gap-4 lg:flex-row lg:gap-6">
+                  <nav
+                    aria-label="Secciones"
+                    class="sticky top-4 hidden shrink-0 self-start lg:block lg:w-44"
+                  >
+                    <p
+                      class="mb-2 text-xs font-semibold uppercase tracking-wide text-neutral"
+                      aria-hidden="true"
+                    >
+                      Secciones
+                    </p>
+                    <ul class="space-y-1 border-l border-neutral/20 pl-3">
+                      @for (section of visibleSections(); track section.id) {
+                        <li>
+                          <button
+                            type="button"
+                            class="w-full rounded px-2 py-1 text-left text-sm hover:bg-neutral/10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
+                            [class.font-medium]="sectionProgress(section) === 'problem'"
+                            (click)="goToSection(section.id)"
+                          >
+                            {{ section.label }}
+                            @switch (sectionProgress(section)) {
+                              @case ('problem') {
+                                <span class="ml-1 text-danger" aria-hidden="true">⚠</span>
+                                <span class="sr-only"> — con errores</span>
+                              }
+                              @case ('complete') {
+                                <span class="ml-1 text-success" aria-hidden="true">✓</span>
+                                <span class="sr-only"> — completa</span>
+                              }
+                            }
+                          </button>
+                        </li>
+                      }
+                    </ul>
+                  </nav>
+
+                  <div class="min-w-0 flex-1" [class.lg:grid]="layoutMode() === 'columns'">
+                    <nav
+                      aria-label="Secciones"
+                      class="-mx-1 mb-4 flex gap-2 overflow-x-auto px-1 pb-1 lg:hidden"
+                    >
+                      @for (section of visibleSections(); track section.id) {
+                        <button
+                          type="button"
+                          class="shrink-0 rounded-full border border-neutral/30 px-3 py-1 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
+                          [class.border-danger]="sectionProgress(section) === 'problem'"
+                          [class.text-danger]="sectionProgress(section) === 'problem'"
+                          [class.font-medium]="sectionProgress(section) === 'problem'"
+                          (click)="goToSection(section.id)"
+                        >
+                          {{ section.label }}
+                        </button>
+                      }
+                    </nav>
+
+                    @for (section of visibleSections(); track section.id) {
+                      <details
+                        id="section-{{ section.id }}"
+                        class="mb-4 rounded-xl border border-neutral/20 bg-surface scroll-mt-4"
+                        [open]="isSectionOpen(section.id)"
+                        (toggle)="setSectionOpen(section.id, $event)"
+                      >
+                        <summary
+                          tabindex="-1"
+                          class="flex cursor-pointer items-center justify-between gap-2 rounded-xl px-4 py-3 text-section font-semibold hover:bg-neutral/5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
+                        >
+                          <span>{{ section.label }}</span>
+                          @if (sectionProgress(section) === 'problem') {
+                            <span class="text-xs font-medium text-danger">Revisar</span>
+                          }
+                        </summary>
+                        <div class="grid grid-cols-1 gap-x-4 px-4 pb-4 sm:grid-cols-12">
+                          @for (field of section.fields; track field.key) {
+                            <div [class]="colSpan(field)">
+                              <app-field-host
+                                [field]="field"
+                                [tree]="tree"
+                                [exists]="exists()"
+                                [serverErrors]="serverErrors().fields"
+                                [resource]="resourceId()"
+                              />
+                            </div>
+                          }
+                        </div>
+                      </details>
+                    }
+                  </div>
+                </div>
+              }
+
+              <!-- Sticky (§5.1): en products son 19 campos y Cancelar/Guardar
+                     desaparecían al final del scroll. bg-surface es opaco: sin
+                     él el contenido vería pasar por detrás. -->
+              <div
+                class="sticky bottom-0 z-10 mt-6 flex flex-wrap items-center justify-end gap-3 border-t border-neutral/20 bg-surface pt-4 pb-[calc(1rem+env(safe-area-inset-bottom))]"
+              >
+                @if (canDelete()) {
+                  <div class="mr-auto">
+                    <button app-button variant="danger" type="button" (click)="remove()">
+                      Eliminar
+                    </button>
+                  </div>
+                }
+                @if (mode() !== 'create') {
+                  <!-- §5: descartar lo escrito y volver a lo del servidor. -->
+                  <button app-button variant="ghost" type="button" (click)="restablecer()">
+                    Restablecer
+                  </button>
+                }
+                <button app-button variant="outline" type="button" (click)="back()">
+                  Cancelar
+                </button>
+                <button app-button type="submit" [loading]="saving()" [disabled]="!canSave()">
+                  {{ saving() ? 'Guardando…' : 'Guardar' }}
+                </button>
+              </div>
+            </form>
+          }
+        }
+      }
+    } @else {
+      <app-empty-state
+        title="Recurso no encontrado"
+        message="No existe un schema con ese id en el registry."
+      />
+    }
+
+    <!-- «Crear nuevo» desde el dropdown de una relación (plan 6.4). Se monta
+         y desmonta con el pedido: el Drawer devuelve el foco al botón que lo
+         abrió al destruirse. -->
+    @if (relationDrawer.request(); as createRequest) {
+      @if (drawerSchema(createRequest.resource); as target) {
+        <app-drawer-form
+          [open]="true"
+          [schema]="target"
+          mode="create"
+          [title]="'Crear ' + target.label"
+          (close)="relationDrawer.clear()"
+          (saved)="relationCreated($event, createRequest)"
+        />
+      }
+    }
+
+    @if (createdWithSummary(); as createdRec) {
+      @if (schema()?.postCreate; as postCreateConfig) {
+        <app-post-create-modal
+          [schema]="schema()!"
+          [config]="postCreateConfig"
+          [record]="createdRec"
+          (closed)="onPostCreateClosed()"
+        />
+      }
+    }
+  `
+		}]
+	}],
+	ctorParameters: () => []
+});
+export { resolveShare as _, DrawerForm as a, buildFormSchema as c, actionTypes as d, actionsFor as f, isTriggerAction as g, isShareAction as h, CopyShare as i, FieldHost as l, registerAction as m, form_view_exports as n, buildPayload as o, getAction as p, Modal as r, seedModel as s, FormView as t, actionType as u, writeClipboard as v, RenderHost as y };
+
+//# sourceMappingURL=tinya-code-gas-admin-ui-form-view-CEe7aZ4m.mjs.map