@tinya-code/gas-admin-ui 0.0.0-stage → 0.1.0-alpha.1

package/fesm2022/tinya-code-gas-admin-ui.mjs

@@ -0,0 +1,4400 @@
+import { t as __exportAll } from "./tinya-code-gas-admin-ui-rolldown-runtime-DpJrqANO.mjs";
+import { a as SESSION_USER_KEY, c as renewedTokenOf, i as SESSION_TOKEN_KEY, n as AuthService, o as API_URL, r as LOGIN_PATH, s as ApiError, t as ApiService } from "./tinya-code-gas-admin-ui-api.service-CZrUeclM.mjs";
+import { a as provideGasAdmin, c as apiErrorInterceptor, i as getSchema, n as allSchemas, o as setSchemaCatalog, r as getAuth, s as ConfigService, t as GAS_SCHEMAS } from "./tinya-code-gas-admin-ui-schema-catalog-CDrz9pVN.mjs";
+import { a as register, c as unregister, d as SUPPORTED_FIELD_TYPE_LIST, f as fieldDescriptors, i as provideRenderDescriptors, l as viewDescriptors, m as columnFormatDescriptors, n as get, o as renderKinds, p as COLUMN_FORMAT_TYPES, r as isSupported, u as layoutDescriptors } from "./tinya-code-gas-admin-ui-render-registry-B_D5Jhp9.mjs";
+import { n as ViewNavigationService, t as evaluateCondition } from "./tinya-code-gas-admin-ui-condition-evaluator-BBzWUuHl.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 DataSourceService } from "./tinya-code-gas-admin-ui-data-source.service-LD8AM3Rn.mjs";
+import { t as ErrorMapperService } from "./tinya-code-gas-admin-ui-error-mapper.service-Ci0UpXtV.mjs";
+import { t as UploadService } from "./tinya-code-gas-admin-ui-upload.service-C1g545w5.mjs";
+import { t as EmptyState } from "./tinya-code-gas-admin-ui-empty-state-BMc0QtoT.mjs";
+import { a as stringItemTree, i as listTree, n as groupTree, r as itemTree, t as childTree } from "./tinya-code-gas-admin-ui-field-node-CIK6KNN_.mjs";
+import { _ as resolveShare, a as DrawerForm, c as buildFormSchema, d as actionTypes, f as actionsFor, g as isTriggerAction, h as isShareAction, i as CopyShare, l as FieldHost, m as registerAction, o as buildPayload, p as getAction, r as Modal, s as seedModel, t as FormView, u as actionType, v as RenderHost } from "./tinya-code-gas-admin-ui-form-view-BwGupSbi.mjs";
+import { t as Skeleton } from "./tinya-code-gas-admin-ui-skeleton-DnWK0tcZ.mjs";
+import { t as getValue } from "./tinya-code-gas-admin-ui-field-path-B4-FTBGZ.mjs";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, EnvironmentInjector, Injector, Service, ViewContainerRef, computed, effect, inject, input, model, output, resource, signal, viewChild } from "@angular/core";
+import { catchError, combineLatest, distinctUntilChanged, firstValueFrom, map, of, switchMap } from "rxjs";
+import { ActivatedRoute, Router, RouterLink, RouterLinkActive, RouterOutlet, convertToParamMap } from "@angular/router";
+import { LucideArrowLeft, LucideChevronDown, LucideChevronRight, LucideChevronUp, LucideCircleCheck, LucideCircleX, LucideDynamicIcon, LucideExternalLink, LucideEye, LucideGripVertical, LucideInfo, LucideMonitor, LucideMoon, LucidePencil, LucidePlus, LucideRotateCw, LucideSun, LucideTrash2, LucideX, LucideZap } from "@lucide/angular";
+import { takeUntilDestroyed, toObservable, toSignal } from "@angular/core/rxjs-interop";
+import { CdkDrag, CdkDragHandle, CdkDropList } from "@angular/cdk/drag-drop";
+const authGuard = () => {
+	if (inject(AuthService).isAuthenticated()) return true;
+	return inject(Router).createUrlTree([LOGIN_PATH]);
+};
+const roleGuard = (route) => {
+	const auth = inject(AuthService);
+	const router = inject(Router);
+	if (!auth.isAuthenticated()) return router.createUrlTree([LOGIN_PATH]);
+	const id = route.data?.["resourceId"] ?? route.paramMap.get("id");
+	if (id === null) return true;
+	const schema = getSchema(String(id));
+	if (schema === void 0) return true;
+	return auth.canAccess(schema.access);
+};
+const MAX_DEPTH = 3;
+var SchemaCompositionError = class extends Error {
+	constructor(message) {
+		super(message);
+		this.name = "SchemaCompositionError";
+	}
+};
+function configDe(vista) {
+	return "config" in vista ? vista.config : void 0;
+}
+function hijosDe(vista) {
+	const hijos = configDe(vista)?.children;
+	return Array.isArray(hijos) ? hijos : void 0;
+}
+function validateComposition(schema) {
+	const estado = {
+		esquema: schema,
+		nodos: 0,
+		contados: /* @__PURE__ */ new Set(),
+		camino: /* @__PURE__ */ new Set()
+	};
+	for (const [nombre, vista] of Object.entries(schema.uiViews ?? {})) {
+		estado.camino.add(nombre);
+		validarContenido(nombre, vista, 1, estado);
+		estado.camino.delete(nombre);
+	}
+}
+function validarContenido(nombre, vista, profundidadHijos, estado) {
+	const donde = `${estado.esquema.id}.${nombre}`;
+	validarSelect(donde, vista.select);
+	validarSource(donde, configDe(vista)?.source);
+	const hijos = hijosDe(vista);
+	if (!hijos) return;
+	validarHijos(nombre, hijos, profundidadHijos, estado);
+}
+function validarHijos(contenedor, hijos, profundidad, estado) {
+	const ids = /* @__PURE__ */ new Set();
+	for (const hijo of hijos) {
+		const id = hijo.id;
+		if (typeof id !== "string" || id === "") throw new SchemaCompositionError(`${estado.esquema.id}.${contenedor}: hijo sin id`);
+		if (ids.has(id)) throw new SchemaCompositionError(`${estado.esquema.id}.${contenedor}: id duplicado '${id}'`);
+		ids.add(id);
+		validarHijo(hijo, contenedor, id, profundidad, estado);
+	}
+}
+function validarHijo(hijo, contenedor, id, profundidad, estado) {
+	const donde = `${estado.esquema.id}.${contenedor} → child '${id}'`;
+	if (!estado.contados.has(hijo)) {
+		estado.contados.add(hijo);
+		estado.nodos += 1;
+		if (estado.nodos > 50) throw new SchemaCompositionError(`${estado.esquema.id}: la composición supera el límite de 50 nodos (observados ${estado.nodos})`);
+	}
+	if (profundidad > 3) throw new SchemaCompositionError(`${donde}: profundidad ${profundidad} supera el máximo 3`);
+	if ("ref" in hijo) {
+		validarRef(donde, hijo.ref, profundidad, estado);
+		return;
+	}
+	const tipo = hijo.type;
+	if (!get("view", tipo)) throw new SchemaCompositionError(`${donde}: tipo desconocido '${tipo}'`);
+	validarSelect(donde, hijo.select);
+	validarSource(donde, configDe(hijo)?.source);
+	const internos = hijosDe(hijo);
+	if (internos !== void 0) validarHijos(id, internos, profundidad + 1, estado);
+}
+function validarRef(donde, target, profundidad, estado) {
+	if (estado.camino.has(target)) throw new SchemaCompositionError(`${donde}: ciclo detectado — '${target}' ya está en el camino`);
+	const vista = estado.esquema.uiViews?.[target];
+	if (!vista) throw new SchemaCompositionError(`${donde}: ref '${target}' no existe en ${estado.esquema.id}.uiViews`);
+	estado.camino.add(target);
+	validarContenido(target, vista, profundidad + 1, estado);
+	estado.camino.delete(target);
+}
+function validarSelect(donde, select) {
+	if (select === void 0 || select.mode !== "route") return;
+	const target = select.target;
+	if (target === void 0 || target === null) throw new SchemaCompositionError(`${donde}: select mode 'route' sin target`);
+	if (typeof target === "string") throw new SchemaCompositionError(`${donde}: destino con URL cruda '${target}' — declará resource + view`);
+	validarTarget(donde, target);
+}
+function validarTarget(donde, target) {
+	const { resource, view, params } = target;
+	if (typeof resource !== "string" || resource === "" || typeof view !== "string" || view === "") throw new SchemaCompositionError(`${donde}: destino sin resource + view`);
+	const destino = getSchema(resource);
+	if (!destino) throw new SchemaCompositionError(`${donde}: destino '${resource}' no existe`);
+	const vista = destino.uiViews?.[view];
+	if (!vista) throw new SchemaCompositionError(`${donde}: destino ${resource}.${view} no tiene uiView declarada`);
+	const paramsRuta = (vista.path ?? "").split("/").filter((segmento) => segmento.startsWith(":")).map((segmento) => segmento.slice(1));
+	const declarados = params ?? [];
+	for (const param of declarados) if (!paramsRuta.includes(param)) throw new SchemaCompositionError(`${donde}: param '${param}' no existe en la ruta ${resource}.${view}`);
+	for (const param of paramsRuta) if (!declarados.includes(param)) throw new SchemaCompositionError(`${donde}: falta declarar el param '${param}' de la ruta ${resource}.${view}`);
+}
+function validarSource(donde, source) {
+	if (source === void 0) return;
+	if (typeof source.resource !== "string" || source.resource === "") throw new SchemaCompositionError(`${donde}: source sin resource`);
+	const origen = getSchema(source.resource);
+	if (!origen) throw new SchemaCompositionError(`${donde}: source '${source.resource}' no existe`);
+	if (source.view !== void 0 && origen.views?.[source.view] === void 0) throw new SchemaCompositionError(`${donde}: la vista '${source.view}' no existe en ${source.resource}.views`);
+}
+const unsavedChangesGuard = (component) => {
+	return component?.canDeactivate?.() ?? true;
+};
+function instanceIdFor(parentId, childId) {
+	return `${parentId}/${childId}`;
+}
+function virtualSchemaFor(schema, instanceId, view) {
+	return {
+		...schema,
+		uiViews: {
+			...schema.uiViews,
+			[instanceId]: view
+		}
+	};
+}
+function syntheticRoute(data) {
+	return {
+		data: of(data),
+		paramMap: of(convertToParamMap({}))
+	};
+}
+function createViewContext(base, emit) {
+	return emit === void 0 ? { ...base } : {
+		...base,
+		emit
+	};
+}
+const STORAGE_KEY = "admin-theme";
+const QUERY = "(prefers-color-scheme: dark)";
+const MODES = [
+	"system",
+	"light",
+	"dark"
+];
+function storedMode() {
+	try {
+		const raw = localStorage.getItem(STORAGE_KEY);
+		return raw !== null && MODES.includes(raw) ? raw : "system";
+	} catch {
+		return "system";
+	}
+}
+function prefersDark() {
+	return typeof window.matchMedia === "function" && window.matchMedia(QUERY).matches;
+}
+function resolve(mode) {
+	return mode === "system" ? prefersDark() ? "dark" : "light" : mode;
+}
+var ThemeService = class ThemeService {
+	mode = signal(storedMode(), ...ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []);
+	resolved = signal(resolve(this.mode()), ...ngDevMode ? [{ debugName: "resolved" }] : /* istanbul ignore next */ []);
+	constructor() {
+		this.apply();
+		(typeof window.matchMedia === "function" ? window.matchMedia(QUERY) : null)?.addEventListener("change", () => {
+			if (this.mode() === "system") this.apply();
+		});
+	}
+	set(mode) {
+		this.mode.set(mode);
+		try {
+			localStorage.setItem(STORAGE_KEY, mode);
+		} catch {}
+		this.apply();
+	}
+	apply() {
+		const resolved = resolve(this.mode());
+		this.resolved.set(resolved);
+		document.documentElement.dataset["theme"] = resolved;
+		document.documentElement.dataset["themeMode"] = this.mode();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: ThemeService,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Service
+	});
+	static ɵprov = i0.ɵɵngDeclareService({
+		minVersion: "22.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: ThemeService
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: ThemeService,
+	decorators: [{ type: Service }],
+	ctorParameters: () => []
+});
+const BASE = "rounded-md p-1.5 transition-colors min-h-11 min-w-11 lg:min-h-0 lg:min-w-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary";
+const ACTIVE = "bg-primary/10 text-primary";
+const IDLE = "text-neutral hover:bg-neutral/10";
+var ThemeToggle = class ThemeToggle {
+	theme = inject(ThemeService);
+	classes(mode) {
+		return `${BASE} ${this.theme.mode() === mode ? ACTIVE : IDLE}`;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: ThemeToggle,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.3",
+		type: ThemeToggle,
+		isStandalone: true,
+		selector: "app-theme-toggle",
+		ngImport: i0,
+		template: `
+    <div
+      role="group"
+      aria-label="Tema del panel"
+      class="inline-flex items-center gap-0.5 rounded-lg border border-neutral/20 bg-surface p-0.5"
+    >
+      <button
+        type="button"
+        [class]="classes('system')"
+        [attr.aria-pressed]="theme.mode() === 'system'"
+        aria-label="Tema: seguir al sistema"
+        title="Seguir al sistema"
+        (click)="theme.set('system')"
+      >
+        <svg lucideMonitor size="16" />
+      </button>
+      <button
+        type="button"
+        [class]="classes('light')"
+        [attr.aria-pressed]="theme.mode() === 'light'"
+        aria-label="Tema: claro"
+        title="Tema claro"
+        (click)="theme.set('light')"
+      >
+        <svg lucideSun size="16" />
+      </button>
+      <button
+        type="button"
+        [class]="classes('dark')"
+        [attr.aria-pressed]="theme.mode() === 'dark'"
+        aria-label="Tema: oscuro"
+        title="Tema oscuro"
+        (click)="theme.set('dark')"
+      >
+        <svg lucideMoon size="16" />
+      </button>
+    </div>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "component",
+				type: LucideMonitor,
+				selector: "svg[lucideMonitor]"
+			},
+			{
+				kind: "component",
+				type: LucideSun,
+				selector: "svg[lucideSun]"
+			},
+			{
+				kind: "component",
+				type: LucideMoon,
+				selector: "svg[lucideMoon]"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: ThemeToggle,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-theme-toggle",
+			imports: [
+				LucideMonitor,
+				LucideSun,
+				LucideMoon
+			],
+			template: `
+    <div
+      role="group"
+      aria-label="Tema del panel"
+      class="inline-flex items-center gap-0.5 rounded-lg border border-neutral/20 bg-surface p-0.5"
+    >
+      <button
+        type="button"
+        [class]="classes('system')"
+        [attr.aria-pressed]="theme.mode() === 'system'"
+        aria-label="Tema: seguir al sistema"
+        title="Seguir al sistema"
+        (click)="theme.set('system')"
+      >
+        <svg lucideMonitor size="16" />
+      </button>
+      <button
+        type="button"
+        [class]="classes('light')"
+        [attr.aria-pressed]="theme.mode() === 'light'"
+        aria-label="Tema: claro"
+        title="Tema claro"
+        (click)="theme.set('light')"
+      >
+        <svg lucideSun size="16" />
+      </button>
+      <button
+        type="button"
+        [class]="classes('dark')"
+        [attr.aria-pressed]="theme.mode() === 'dark'"
+        aria-label="Tema: oscuro"
+        title="Tema oscuro"
+        (click)="theme.set('dark')"
+      >
+        <svg lucideMoon size="16" />
+      </button>
+    </div>
+  `
+		}]
+	}]
+});
+var Sidebar = class Sidebar {
+	open = model(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+	auth = inject(AuthService);
+	notifications = inject(NotificationService);
+	isAuthenticated = this.auth.isAuthenticated;
+	closingAllSessions = signal(false, ...ngDevMode ? [{ debugName: "closingAllSessions" }] : /* istanbul ignore next */ []);
+	menuItems = computed(() => allSchemas().filter((schema) => isVisible(schema) && this.auth.canAccess(schema.access)).map((schema) => ({
+		id: schema.id,
+		label: schema.labelPlural
+	})), ...ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []);
+	async closeAllSessions() {
+		if (!await this.notifications.confirm({
+			title: "Cerrar todas las sesiones",
+			message: "Se cerrarán las sesiones abiertas en todos tus dispositivos. ¿Continuar?",
+			confirmLabel: "Cerrar sesiones"
+		})) return;
+		this.closingAllSessions.set(true);
+		this.auth.logoutAll().subscribe({
+			next: ({ effectiveWithinSeconds }) => {
+				this.notifications.success(`Sesiones revocadas. El cambio se aplica en un máximo de ${effectiveWithinSeconds} segundos.`);
+			},
+			error: () => {
+				this.closingAllSessions.set(false);
+				this.notifications.error("No se pudieron cerrar todas las sesiones. Inténtalo de nuevo.");
+			},
+			complete: () => this.closingAllSessions.set(false)
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: Sidebar,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: Sidebar,
+		isStandalone: true,
+		selector: "app-sidebar",
+		inputs: { open: {
+			classPropertyName: "open",
+			publicName: "open",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		outputs: { open: "openChange" },
+		ngImport: i0,
+		template: `
+    <!-- Offcanvas en mobile (transform); las clases lg: la dejan estática
+         y siempre visible en pantallas grandes. -->
+    <aside
+      class="fixed inset-y-0 left-0 z-40 w-60 shrink-0 h-[100svh] min-h-[80svh] lg:sticky  border-r border-neutral/20 bg-surface-raised transition-transform duration-200 lg:static lg:z-auto lg:translate-x-0"
+      [class.-translate-x-full]="!open()"
+    >
+      <div class="flex items-center justify-between gap-2 border-b border-neutral/20 px-4 py-4">
+        <!-- min-w-0+truncate: si el toggle exige su ancho, el rótulo se
+             trunca en vez de desbordar la sidebar de 240 px. -->
+        <span class="min-w-0 truncate font-display text-base font-semibold">Admin</span>
+        <app-theme-toggle />
+      </div>
+      <nav aria-label="Principal" class="p-3">
+        <ul class="space-y-2 lg:space-y-1">
+          @for (item of menuItems(); track item.id) {
+            <li>
+              <a
+                [routerLink]="['/', item.id]"
+                routerLinkActive="bg-primary/10 text-primary"
+                class="flex min-h-11 items-center rounded-lg px-3 py-2 text-sm font-medium text-neutral hover:bg-neutral/10"
+                (click)="open.set(false)"
+              >
+                {{ item.label }}
+              </a>
+            </li>
+          }
+        </ul>
+      </nav>
+      @if (isAuthenticated()) {
+        <div class="border-t border-neutral/20 p-3">
+          <button
+            type="button"
+            class="w-full rounded-lg px-3 py-2 text-left text-sm text-neutral hover:bg-neutral/10 disabled:opacity-50"
+            [disabled]="closingAllSessions()"
+            (click)="closeAllSessions()"
+          >
+            {{ closingAllSessions() ? 'Cerrando sesiones…' : 'Cerrar todas las sesiones' }}
+          </button>
+        </div>
+      }
+    </aside>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: RouterLink,
+				selector: "[routerLink]",
+				inputs: [
+					"target",
+					"queryParams",
+					"fragment",
+					"queryParamsHandling",
+					"state",
+					"info",
+					"relativeTo",
+					"preserveFragment",
+					"skipLocationChange",
+					"replaceUrl",
+					"browserUrl",
+					"routerLink"
+				]
+			},
+			{
+				kind: "directive",
+				type: RouterLinkActive,
+				selector: "[routerLinkActive]",
+				inputs: [
+					"routerLinkActiveOptions",
+					"ariaCurrentWhenActive",
+					"routerLinkActive"
+				],
+				outputs: ["isActiveChange"],
+				exportAs: ["routerLinkActive"]
+			},
+			{
+				kind: "component",
+				type: ThemeToggle,
+				selector: "app-theme-toggle"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: Sidebar,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-sidebar",
+			imports: [
+				RouterLink,
+				RouterLinkActive,
+				ThemeToggle
+			],
+			template: `
+    <!-- Offcanvas en mobile (transform); las clases lg: la dejan estática
+         y siempre visible en pantallas grandes. -->
+    <aside
+      class="fixed inset-y-0 left-0 z-40 w-60 shrink-0 h-[100svh] min-h-[80svh] lg:sticky  border-r border-neutral/20 bg-surface-raised transition-transform duration-200 lg:static lg:z-auto lg:translate-x-0"
+      [class.-translate-x-full]="!open()"
+    >
+      <div class="flex items-center justify-between gap-2 border-b border-neutral/20 px-4 py-4">
+        <!-- min-w-0+truncate: si el toggle exige su ancho, el rótulo se
+             trunca en vez de desbordar la sidebar de 240 px. -->
+        <span class="min-w-0 truncate font-display text-base font-semibold">Admin</span>
+        <app-theme-toggle />
+      </div>
+      <nav aria-label="Principal" class="p-3">
+        <ul class="space-y-2 lg:space-y-1">
+          @for (item of menuItems(); track item.id) {
+            <li>
+              <a
+                [routerLink]="['/', item.id]"
+                routerLinkActive="bg-primary/10 text-primary"
+                class="flex min-h-11 items-center rounded-lg px-3 py-2 text-sm font-medium text-neutral hover:bg-neutral/10"
+                (click)="open.set(false)"
+              >
+                {{ item.label }}
+              </a>
+            </li>
+          }
+        </ul>
+      </nav>
+      @if (isAuthenticated()) {
+        <div class="border-t border-neutral/20 p-3">
+          <button
+            type="button"
+            class="w-full rounded-lg px-3 py-2 text-left text-sm text-neutral hover:bg-neutral/10 disabled:opacity-50"
+            [disabled]="closingAllSessions()"
+            (click)="closeAllSessions()"
+          >
+            {{ closingAllSessions() ? 'Cerrando sesiones…' : 'Cerrar todas las sesiones' }}
+          </button>
+        </div>
+      }
+    </aside>
+  `
+		}]
+	}],
+	propDecorators: { open: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "open",
+			required: false
+		}]
+	}, {
+		type: i0.Output,
+		args: ["openChange"]
+	}] }
+});
+function isVisible(schema) {
+	if (schema.policies?.access) return true;
+	const permissions = schema.permissions;
+	if (!permissions) return true;
+	return permissions.create !== false || permissions.update !== false || permissions.remove !== false;
+}
+var Layout = class Layout {
+	sidebarOpen = signal(false, ...ngDevMode ? [{ debugName: "sidebarOpen" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: Layout,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: Layout,
+		isStandalone: true,
+		selector: "app-layout",
+		ngImport: i0,
+		template: `
+    <div class="flex min-h-screen bg-neutral/5">
+      <button
+        app-button
+        type="button"
+        variant="outline"
+        size="icon"
+        class="fixed top-[calc(env(safe-area-inset-top)+0.75rem)] left-3 z-40 shadow-md lg:hidden"
+        [attr.aria-expanded]="sidebarOpen()"
+        aria-controls="main-sidebar"
+        aria-label="Abrir menú"
+        (click)="sidebarOpen.set(true)"
+      >
+        <svg
+          aria-hidden="true"
+          class="size-5"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+        >
+          <path stroke-linecap="round" d="M4 6h16M4 12h16M4 18h16" />
+        </svg>
+      </button>
+      @if (sidebarOpen()) {
+        <div
+          class="fixed inset-0 z-30 bg-black/30 lg:hidden"
+          aria-hidden="true"
+          (click)="sidebarOpen.set(false)"
+        ></div>
+      }
+      <app-sidebar id="main-sidebar" [(open)]="sidebarOpen" />
+      <!-- pt reafirmado en sm: sin esto la variante sm:p-6 (va después en la
+           cascada) pisa el pt-16 base y el contenido choca con la hamburguesa.
+           base/sm dejan pasar el safe-area del notch; en lg no hay hamburguesa. -->
+      <main
+        class="min-w-0 flex-1 p-4 pt-[calc(4rem+env(safe-area-inset-top))] sm:p-6 sm:pt-[calc(4rem+env(safe-area-inset-top))] lg:p-8"
+      >
+        <router-outlet />
+      </main>
+    </div>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: RouterOutlet,
+				selector: "router-outlet",
+				inputs: ["name", "routerOutletData"],
+				outputs: [
+					"activate",
+					"deactivate",
+					"attach",
+					"detach"
+				],
+				exportAs: ["outlet"]
+			},
+			{
+				kind: "component",
+				type: Sidebar,
+				selector: "app-sidebar",
+				inputs: ["open"],
+				outputs: ["openChange"]
+			},
+			{
+				kind: "component",
+				type: Button,
+				selector: "button[app-button]",
+				inputs: [
+					"variant",
+					"size",
+					"type",
+					"disabled",
+					"loading"
+				]
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: Layout,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-layout",
+			imports: [
+				RouterOutlet,
+				Sidebar,
+				Button
+			],
+			template: `
+    <div class="flex min-h-screen bg-neutral/5">
+      <button
+        app-button
+        type="button"
+        variant="outline"
+        size="icon"
+        class="fixed top-[calc(env(safe-area-inset-top)+0.75rem)] left-3 z-40 shadow-md lg:hidden"
+        [attr.aria-expanded]="sidebarOpen()"
+        aria-controls="main-sidebar"
+        aria-label="Abrir menú"
+        (click)="sidebarOpen.set(true)"
+      >
+        <svg
+          aria-hidden="true"
+          class="size-5"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+        >
+          <path stroke-linecap="round" d="M4 6h16M4 12h16M4 18h16" />
+        </svg>
+      </button>
+      @if (sidebarOpen()) {
+        <div
+          class="fixed inset-0 z-30 bg-black/30 lg:hidden"
+          aria-hidden="true"
+          (click)="sidebarOpen.set(false)"
+        ></div>
+      }
+      <app-sidebar id="main-sidebar" [(open)]="sidebarOpen" />
+      <!-- pt reafirmado en sm: sin esto la variante sm:p-6 (va después en la
+           cascada) pisa el pt-16 base y el contenido choca con la hamburguesa.
+           base/sm dejan pasar el safe-area del notch; en lg no hay hamburguesa. -->
+      <main
+        class="min-w-0 flex-1 p-4 pt-[calc(4rem+env(safe-area-inset-top))] sm:p-6 sm:pt-[calc(4rem+env(safe-area-inset-top))] lg:p-8"
+      >
+        <router-outlet />
+      </main>
+    </div>
+  `
+		}]
+	}]
+});
+function pathRank(path) {
+	const segments = path.split("/");
+	return [segments.length, segments.filter((segment) => !segment.startsWith(":")).length];
+}
+function compareRoutes(a, b) {
+	const aRank = pathRank(a.path ?? "");
+	const bRank = pathRank(b.path ?? "");
+	return bRank[0] - aRank[0] || bRank[1] - aRank[1];
+}
+function resourceRoutes(catalog = allSchemas()) {
+	return catalog.flatMap((schema) => {
+		if (!schema.uiViews || Object.keys(schema.uiViews).length === 0) throw new Error(`El recurso '${schema.id}' no declara uiViews`);
+		validateComposition(schema);
+		return Object.entries(schema.uiViews).map(([name, view]) => {
+			const descriptor = get("view", view.type);
+			if (!descriptor) throw new Error(`No existe descriptor kind:view type '${view.type}' para ${schema.id}.${name}`);
+			const relativePath = view.path ?? "";
+			if (relativePath.startsWith("/") || relativePath.endsWith("/") || relativePath !== "" && relativePath.split("/").some((segment) => segment === "" || segment === "." || segment === "..")) throw new Error(`Ruta uiViews inválida en ${schema.id}.${name}: '${relativePath}'`);
+			const route = {
+				path: [schema.id, relativePath].filter(Boolean).join("/"),
+				loadComponent: descriptor.load,
+				canActivate: [roleGuard],
+				data: {
+					resourceId: schema.id,
+					uiView: name,
+					viewType: view.type
+				},
+				resolve: { viewContext: () => {
+					const base = {
+						resourceId: schema.id,
+						uiView: name,
+						viewType: view.type,
+						...view.select !== void 0 ? { select: view.select } : {}
+					};
+					const select = view.select;
+					if (select?.mode !== "route") return createViewContext(base);
+					const nav = inject(ViewNavigationService);
+					return createViewContext(base, (event) => {
+						nav.dispatch(select, event);
+					});
+				} }
+			};
+			if (view.type === "form") route.canDeactivate = [unsavedChangesGuard];
+			return route;
+		});
+	}).sort(compareRoutes);
+}
+const shellRoutes = [{
+	path: "",
+	component: Layout,
+	children: resourceRoutes()
+}];
+const LABELS = {
+	email: "Correo electrónico",
+	password: "Contraseña"
+};
+const FIELD_BASE = "mt-1 w-full rounded-lg border border-neutral/40 bg-surface px-3 py-2 text-sm text-neutral placeholder:text-neutral/50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary";
+var Login = class Login {
+	auth = inject(AuthService);
+	router = inject(Router);
+	schema = getAuth();
+	error = signal(null, ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
+	loading = signal(false, ...ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []);
+	values = signal({}, ...ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []);
+	label(key) {
+		return LABELS[key] ?? key;
+	}
+	value(key) {
+		return this.values()[key] ?? "";
+	}
+	setValue(key, next) {
+		this.values.update((current) => ({
+			...current,
+			[key]: next
+		}));
+	}
+	submit(event) {
+		event.preventDefault();
+		if (this.loading()) return;
+		const email = this.value("email").trim();
+		const password = this.value("password");
+		if (email === "" || password === "") {
+			this.error.set("Completa el correo y la contraseña.");
+			return;
+		}
+		this.loading.set(true);
+		this.error.set(null);
+		this.auth.login(email, password).subscribe({
+			next: () => {
+				this.loading.set(false);
+				this.goAfterLogin();
+			},
+			error: (err) => {
+				this.loading.set(false);
+				this.error.set(err instanceof ApiError && err.message !== "" ? err.message : "No se pudo iniciar sesión.");
+			}
+		});
+	}
+	goAfterLogin() {
+		const previous = this.auth.consumeReturnUrl();
+		const target = previous !== null && previous !== "" && !previous.startsWith("/login") ? previous : this.schema.redirectAfterLogin;
+		this.router.navigateByUrl(target).catch(() => void 0);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: Login,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: Login,
+		isStandalone: true,
+		selector: "app-login",
+		ngImport: i0,
+		template: "\n    <main class=\"flex min-h-[100svh] items-center justify-center bg-surface px-4\">\n      <div\n        class=\"w-full max-w-sm rounded-xl border border-neutral/20 bg-surface-raised p-8 shadow-sm\"\n      >\n        <h1 class=\"font-display text-lg font-semibold\">Admin</h1>\n        <p class=\"mt-1 text-sm text-neutral\">Inicia sesión para continuar</p>\n\n        <form class=\"mt-6 space-y-4\" (submit)=\"submit($event)\" novalidate>\n          @for (field of schema.loginFields; track field.key) {\n            <div>\n              <label [attr.for]=\"field.key\" class=\"block text-sm font-medium text-neutral\">\n                {{ label(field.key) }}\n              </label>\n\n              @switch (field.type) {\n                @case ('email') {\n                  <input\n                    [attr.id]=\"field.key\"\n                    [attr.name]=\"field.key\"\n                    type=\"email\"\n                    autocomplete=\"email\"\n                    inputmode=\"email\"\n                    [attr.required]=\"field.required ? '' : null\"\n                    [value]=\"value(field.key)\"\n                    (input)=\"setValue(field.key, $any($event.target).value)\"\n                    class=\"mt-1 w-full rounded-lg border border-neutral/40 bg-surface px-3 py-2 text-sm text-neutral placeholder:text-neutral/50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary\"\n                  />\n                }\n                @default {\n                  <input\n                    [attr.id]=\"field.key\"\n                    [attr.name]=\"field.key\"\n                    type=\"password\"\n                    autocomplete=\"current-password\"\n                    [attr.required]=\"field.required ? '' : null\"\n                    [value]=\"value(field.key)\"\n                    (input)=\"setValue(field.key, $any($event.target).value)\"\n                    class=\"mt-1 w-full rounded-lg border border-neutral/40 bg-surface px-3 py-2 text-sm text-neutral placeholder:text-neutral/50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary\"\n                  />\n                }\n              }\n            </div>\n          }\n\n          @if (error(); as message) {\n            <p role=\"alert\" class=\"rounded-lg bg-danger/10 px-3 py-2 text-sm text-danger\">\n              {{ message }}\n            </p>\n          }\n\n          <button app-button type=\"submit\" [loading]=\"loading()\" class=\"w-full\">\n            Iniciar sesión\n          </button>\n        </form>\n      </div>\n    </main>\n  ",
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: Button,
+			selector: "button[app-button]",
+			inputs: [
+				"variant",
+				"size",
+				"type",
+				"disabled",
+				"loading"
+			]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: Login,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-login",
+			imports: [Button],
+			template: `
+    <main class="flex min-h-[100svh] items-center justify-center bg-surface px-4">
+      <div
+        class="w-full max-w-sm rounded-xl border border-neutral/20 bg-surface-raised p-8 shadow-sm"
+      >
+        <h1 class="font-display text-lg font-semibold">Admin</h1>
+        <p class="mt-1 text-sm text-neutral">Inicia sesión para continuar</p>
+
+        <form class="mt-6 space-y-4" (submit)="submit($event)" novalidate>
+          @for (field of schema.loginFields; track field.key) {
+            <div>
+              <label [attr.for]="field.key" class="block text-sm font-medium text-neutral">
+                {{ label(field.key) }}
+              </label>
+
+              @switch (field.type) {
+                @case ('email') {
+                  <input
+                    [attr.id]="field.key"
+                    [attr.name]="field.key"
+                    type="email"
+                    autocomplete="email"
+                    inputmode="email"
+                    [attr.required]="field.required ? '' : null"
+                    [value]="value(field.key)"
+                    (input)="setValue(field.key, $any($event.target).value)"
+                    class="${FIELD_BASE}"
+                  />
+                }
+                @default {
+                  <input
+                    [attr.id]="field.key"
+                    [attr.name]="field.key"
+                    type="password"
+                    autocomplete="current-password"
+                    [attr.required]="field.required ? '' : null"
+                    [value]="value(field.key)"
+                    (input)="setValue(field.key, $any($event.target).value)"
+                    class="${FIELD_BASE}"
+                  />
+                }
+              }
+            </div>
+          }
+
+          @if (error(); as message) {
+            <p role="alert" class="rounded-lg bg-danger/10 px-3 py-2 text-sm text-danger">
+              {{ message }}
+            </p>
+          }
+
+          <button app-button type="submit" [loading]="loading()" class="w-full">
+            Iniciar sesión
+          </button>
+        </form>
+      </div>
+    </main>
+  `
+		}]
+	}]
+});
+var WidgetHost = class WidgetHost {
+	widget = input.required(...ngDevMode ? [{ debugName: "widget" }] : /* istanbul ignore next */ []);
+	data = input(null, ...ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []);
+	loading = input(false, ...ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []);
+	gridSpanClass = computed(() => {
+		switch (this.widget().width) {
+			case 12: return "col-span-12 block";
+			case 8: return "col-span-12 lg:col-span-8 block";
+			case 6: return "col-span-12 sm:col-span-6 block";
+			case 4: return "col-span-12 sm:col-span-6 lg:col-span-4 block";
+			case 3: return "col-span-12 sm:col-span-6 lg:col-span-3 block";
+			default: return "col-span-12 sm:col-span-6 lg:col-span-4 block";
+		}
+	}, ...ngDevMode ? [{ debugName: "gridSpanClass" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: WidgetHost,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: WidgetHost,
+		isStandalone: true,
+		selector: "app-widget-host",
+		inputs: {
+			widget: {
+				classPropertyName: "widget",
+				publicName: "widget",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			data: {
+				classPropertyName: "data",
+				publicName: "data",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			loading: {
+				classPropertyName: "loading",
+				publicName: "loading",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: { "class": "gridSpanClass()" } },
+		ngImport: i0,
+		template: `
+    @if (loading()) {
+      <!-- Reserva el espacio del widget mientras su dato viaja (la red
+           Apps Script tarda ~1s): sin esto el panel se veía "completo"
+           con valores vacíos que después aparecían solos (cargar ≠ vacío,
+           doc/ux-ui-mobile.md §estados de UI). La grilla mantiene su
+           span porque la clase la pone el host. -->
+      <div class="rounded-lg border border-neutral/20 bg-surface p-4">
+        <app-skeleton [lines]="1" [height]="14" width="40%" />
+        <div class="mt-3">
+          <app-skeleton [lines]="2" [height]="32" />
+        </div>
+      </div>
+    } @else {
+      <app-render-host kind="widget" [type]="widget().type" [config]="widget()" [data]="data()" />
+    }
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: RenderHost,
+			selector: "app-render-host",
+			inputs: [
+				"kind",
+				"type",
+				"config",
+				"ctx",
+				"data",
+				"mode",
+				"value",
+				"chip"
+			]
+		}, {
+			kind: "component",
+			type: Skeleton,
+			selector: "app-skeleton",
+			inputs: [
+				"lines",
+				"height",
+				"width"
+			]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: WidgetHost,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-widget-host",
+			imports: [RenderHost, Skeleton],
+			host: { "[class]": "gridSpanClass()" },
+			template: `
+    @if (loading()) {
+      <!-- Reserva el espacio del widget mientras su dato viaja (la red
+           Apps Script tarda ~1s): sin esto el panel se veía "completo"
+           con valores vacíos que después aparecían solos (cargar ≠ vacío,
+           doc/ux-ui-mobile.md §estados de UI). La grilla mantiene su
+           span porque la clase la pone el host. -->
+      <div class="rounded-lg border border-neutral/20 bg-surface p-4">
+        <app-skeleton [lines]="1" [height]="14" width="40%" />
+        <div class="mt-3">
+          <app-skeleton [lines]="2" [height]="32" />
+        </div>
+      </div>
+    } @else {
+      <app-render-host kind="widget" [type]="widget().type" [config]="widget()" [data]="data()" />
+    }
+  `
+		}]
+	}],
+	propDecorators: {
+		widget: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "widget",
+				required: true
+			}]
+		}],
+		data: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "data",
+				required: false
+			}]
+		}],
+		loading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loading",
+				required: false
+			}]
+		}]
+	}
+});
+var Dashboard = class Dashboard {
+	api = inject(ApiService, { optional: true });
+	ds = inject(DataSourceService);
+	schema = input.required(...ngDevMode ? [{ debugName: "schema" }] : /* istanbul ignore next */ []);
+	data = input(null, ...ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []);
+	fetchedData = toSignal(toObservable(this.schema).pipe(switchMap((schema) => {
+		const getEndpoint = schema.endpoint?.get;
+		if (!getEndpoint || !this.api) return of({});
+		return this.api.request("GET", getEndpoint).pipe(catchError(() => of({})));
+	})), { initialValue: null });
+	effectiveData = computed(() => {
+		const override = this.data();
+		if (override !== null && override !== void 0) return override;
+		return this.fetchedData() ?? {};
+	}, ...ngDevMode ? [{ debugName: "effectiveData" }] : /* istanbul ignore next */ []);
+	widgets = computed(() => this.schema().widgets ?? [], ...ngDevMode ? [{ debugName: "widgets" }] : /* istanbul ignore next */ []);
+	clavesFuente = computed(() => this.widgets().map((widget) => esFuente(widget.source) ? widget.key : "").filter((key) => key !== "").join("|"), ...ngDevMode ? [{ debugName: "clavesFuente" }] : /* istanbul ignore next */ []);
+	fuentes = resource({
+		...ngDevMode ? { debugName: "fuentes" } : /* istanbul ignore next */ {},
+		params: () => this.clavesFuente() === "" ? void 0 : this.clavesFuente(),
+		loader: async () => {
+			const filas = {};
+			for (const widget of this.widgets()) {
+				if (!esFuente(widget.source)) continue;
+				filas[widget.key] = await this.ds.rows(widget.source);
+			}
+			return filas;
+		}
+	});
+	falloFuentes = computed(() => this.fuentes.status() === "error", ...ngDevMode ? [{ debugName: "falloFuentes" }] : /* istanbul ignore next */ []);
+	cargando = computed(() => {
+		const payloadViaja = this.data() === null && this.fetchedData() === null;
+		const fuentesViajan = this.fuentes.status() === "loading";
+		return payloadViaja || fuentesViajan;
+	}, ...ngDevMode ? [{ debugName: "cargando" }] : /* istanbul ignore next */ []);
+	datum(widget) {
+		if (esFuente(widget.source)) return this.fuentes.status() === "error" ? null : this.fuentes.value()?.[widget.key] ?? null;
+		const allData = this.effectiveData();
+		return widget.source?.kind === "payload" ? allData : allData[widget.key] ?? null;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: Dashboard,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: Dashboard,
+		isStandalone: true,
+		selector: "app-dashboard",
+		inputs: {
+			schema: {
+				classPropertyName: "schema",
+				publicName: "schema",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			data: {
+				classPropertyName: "data",
+				publicName: "data",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: `
+    <header class="mb-6">
+      <h1 class="font-display text-2xl font-semibold">{{ schema().labelPlural }}</h1>
+      <p class="text-sm text-neutral">Dashboard · {{ widgets().length }} widgets</p>
+    </header>
+
+    @if (falloFuentes()) {
+      <!-- Degradación visible (F9): sin este aviso el fallo de una fuente
+           se confundiría con «el panel no tiene datos». -->
+      <p class="mb-4 text-sm text-danger" role="alert">
+        No se pudieron cargar los datos de algunos widgets.
+      </p>
+    }
+
+    @if (widgets().length === 0) {
+      <app-empty-state
+        title="Sin widgets declarados"
+        message="Los widgets se declaran en la propiedad widgets del schema del dashboard."
+      />
+    } @else {
+      <div class="grid grid-cols-12 gap-4">
+        @for (widget of widgets(); track widget.key) {
+          <app-widget-host [widget]="widget" [data]="datum(widget)" [loading]="cargando()" />
+        }
+      </div>
+    }
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: EmptyState,
+			selector: "app-empty-state",
+			inputs: ["title", "message"]
+		}, {
+			kind: "component",
+			type: WidgetHost,
+			selector: "app-widget-host",
+			inputs: [
+				"widget",
+				"data",
+				"loading"
+			]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: Dashboard,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-dashboard",
+			imports: [EmptyState, WidgetHost],
+			template: `
+    <header class="mb-6">
+      <h1 class="font-display text-2xl font-semibold">{{ schema().labelPlural }}</h1>
+      <p class="text-sm text-neutral">Dashboard · {{ widgets().length }} widgets</p>
+    </header>
+
+    @if (falloFuentes()) {
+      <!-- Degradación visible (F9): sin este aviso el fallo de una fuente
+           se confundiría con «el panel no tiene datos». -->
+      <p class="mb-4 text-sm text-danger" role="alert">
+        No se pudieron cargar los datos de algunos widgets.
+      </p>
+    }
+
+    @if (widgets().length === 0) {
+      <app-empty-state
+        title="Sin widgets declarados"
+        message="Los widgets se declaran en la propiedad widgets del schema del dashboard."
+      />
+    } @else {
+      <div class="grid grid-cols-12 gap-4">
+        @for (widget of widgets(); track widget.key) {
+          <app-widget-host [widget]="widget" [data]="datum(widget)" [loading]="cargando()" />
+        }
+      </div>
+    }
+  `
+		}]
+	}],
+	propDecorators: {
+		schema: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "schema",
+				required: true
+			}]
+		}],
+		data: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "data",
+				required: false
+			}]
+		}]
+	}
+});
+function esFuente(source) {
+	return source !== void 0 && source !== null && "resource" in source;
+}
+var ActionService = class ActionService {
+	config = inject(ConfigService);
+	errores = inject(ErrorMapperService);
+	async run(action, request) {
+		const type = actionType(action);
+		const descriptor = getAction(type);
+		if (!descriptor) throw new Error(`[actions] «${action.label}» no tiene descriptor registrado (type "${type}").`);
+		if (descriptor.confirm) {
+			if (!await request.toast.confirm({
+				title: action.label,
+				message: confirmMessage(action),
+				confirmLabel: "Confirmar",
+				cancelLabel: "Cancelar"
+			})) return { ok: false };
+		}
+		if (descriptor.type === "copy-share") await this.config.ensureLoaded();
+		const ctx = {
+			...request,
+			vars: this.vars(request.record)
+		};
+		try {
+			return await descriptor.run(ctx, action);
+		} catch (err) {
+			request.toast.error(this.errores.messageOf(err));
+			return { ok: false };
+		}
+	}
+	vars(record) {
+		return record ? this.config.buildInterpolationContext(record) : {};
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: ActionService,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Service
+	});
+	static ɵprov = i0.ɵɵngDeclareService({
+		minVersion: "22.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: ActionService
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: ActionService,
+	decorators: [{ type: Service }]
+});
+function confirmMessage(action) {
+	return "confirmMessage" in action && action.confirmMessage ? action.confirmMessage : action.label;
+}
+const FORMATO_POR_DEFECTO = {
+	text: "text",
+	textarea: "text",
+	slug: "text",
+	url: "text",
+	email: "text",
+	phone: "text",
+	"readonly-text": "text",
+	relation: "text",
+	group: "text",
+	"key-value": "text",
+	"string-list": "text",
+	multiselect: "text",
+	time: "text",
+	list: "text",
+	date: "date",
+	number: "number",
+	currency: "currency",
+	boolean: "boolean",
+	select: "badge",
+	image: "thumbnail",
+	file: "text"
+};
+function formatoPorTipo(type) {
+	return Object.prototype.hasOwnProperty.call(FORMATO_POR_DEFECTO, type) ? FORMATO_POR_DEFECTO[type] : void 0;
+}
+function formatoDeColumna(column, fields) {
+	if (column.format) return column.format;
+	const field = fields.find((candidate) => candidate.key === column.key);
+	return (field ? formatoPorTipo(field.type) : void 0) ?? "text";
+}
+const BOOLEAN_FILTER_OPTIONS = [
+	{
+		value: "",
+		label: "Todos"
+	},
+	{
+		value: "yes",
+		label: "Sí"
+	},
+	{
+		value: "no",
+		label: "No"
+	}
+];
+function errorMessage(err, fallback) {
+	return err instanceof ApiError ? err.message : fallback;
+}
+var ListView = class ListView {
+	schema = input.required(...ngDevMode ? [{ debugName: "schema" }] : /* istanbul ignore next */ []);
+	viewRecord = output();
+	api = inject(ApiService);
+	auth = inject(AuthService);
+	router = inject(Router);
+	notifications = inject(NotificationService);
+	actionService = inject(ActionService);
+	status = signal("loading", ...ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []);
+	rows = signal([], ...ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []);
+	query = signal("", ...ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []);
+	filterValues = signal({}, ...ngDevMode ? [{ debugName: "filterValues" }] : /* istanbul ignore next */ []);
+	savingKey = signal(null, ...ngDevMode ? [{ debugName: "savingKey" }] : /* istanbul ignore next */ []);
+	quickEditRow = signal(null, ...ngDevMode ? [{ debugName: "quickEditRow" }] : /* istanbul ignore next */ []);
+	loadEpoch = 0;
+	constructor() {
+		effect(() => {
+			const schema = this.schema();
+			this.query.set("");
+			this.filterValues.set({});
+			this.load(schema);
+		});
+	}
+	visibleRows = computed(() => {
+		const schema = this.schema();
+		let rows = this.rows();
+		const query = this.query().trim().toLowerCase();
+		if (query !== "" && schema.search?.length) rows = rows.filter((row) => schema.search.some((key) => String(getValue(row, key) ?? "").toLowerCase().includes(query)));
+		for (const filter of schema.filters ?? []) {
+			const value = this.filterValues()[filter.key] ?? "";
+			if (value === "") continue;
+			rows = rows.filter((row) => {
+				const cell = getValue(row, filter.key);
+				if (filter.type === "boolean") return (cell === true || cell === "true") === (value === "yes");
+				if (filter.type === "select") return String(cell ?? "") === value;
+				return String(cell ?? "").toLowerCase().includes(value.toLowerCase());
+			});
+		}
+		const positionField = schema.positionField;
+		if (positionField) {
+			const positionOf = (row) => {
+				const position = Number(getValue(row, positionField));
+				return Number.isFinite(position) ? position : Number.POSITIVE_INFINITY;
+			};
+			rows = [...rows].sort((a, b) => positionOf(a) - positionOf(b));
+		}
+		return rows;
+	}, ...ngDevMode ? [{ debugName: "visibleRows" }] : /* istanbul ignore next */ []);
+	currencyCode = computed(() => {
+		const field = getSchema("site")?.fields.find((f) => f.key === "currency");
+		return field?.type === "text" && field.default ? field.default : "USD";
+	}, ...ngDevMode ? [{ debugName: "currencyCode" }] : /* istanbul ignore next */ []);
+	permissions = computed(() => this.schema().permissions, ...ngDevMode ? [{ debugName: "permissions" }] : /* istanbul ignore next */ []);
+	canCreate = computed(() => this.auth.canDoOperation(this.schema(), "create"), ...ngDevMode ? [{ debugName: "canCreate" }] : /* istanbul ignore next */ []);
+	canUpdate = computed(() => this.auth.canDoOperation(this.schema(), "update"), ...ngDevMode ? [{ debugName: "canUpdate" }] : /* istanbul ignore next */ []);
+	canRemove = computed(() => this.auth.canDoOperation(this.schema(), "remove"), ...ngDevMode ? [{ debugName: "canRemove" }] : /* istanbul ignore next */ []);
+	canQuickEdit = computed(() => this.canUpdate() && (this.schema().quickEdit?.length ?? 0) > 0, ...ngDevMode ? [{ debugName: "canQuickEdit" }] : /* istanbul ignore next */ []);
+	quickEditFields = computed(() => {
+		const keys = this.schema().quickEdit ?? [];
+		const byKey = new Map(this.schema().fields.map((field) => [field.key, field]));
+		return keys.map((key) => byKey.get(key)).filter((field) => field !== void 0);
+	}, ...ngDevMode ? [{ debugName: "quickEditFields" }] : /* istanbul ignore next */ []);
+	hasRowActions = computed(() => this.canUpdate() || this.canRemove() || (this.schema().actions?.length ?? 0) > 0, ...ngDevMode ? [{ debugName: "hasRowActions" }] : /* istanbul ignore next */ []);
+	reordering = signal(false, ...ngDevMode ? [{ debugName: "reordering" }] : /* istanbul ignore next */ []);
+	hasActiveFilters = computed(() => {
+		if (this.query().trim() !== "") return true;
+		return Object.values(this.filterValues()).some((value) => value !== "");
+	}, ...ngDevMode ? [{ debugName: "hasActiveFilters" }] : /* istanbul ignore next */ []);
+	canReorder = computed(() => {
+		const schema = this.schema();
+		return schema.sortable === true && schema.positionField !== void 0 && schema.permissions?.reorder !== false && !this.hasActiveFilters();
+	}, ...ngDevMode ? [{ debugName: "canReorder" }] : /* istanbul ignore next */ []);
+	dropDisabled = computed(() => !this.canReorder() || this.reordering(), ...ngDevMode ? [{ debugName: "dropDisabled" }] : /* istanbul ignore next */ []);
+	setQuery(value) {
+		this.query.set(value);
+	}
+	setFilter(key, value) {
+		this.filterValues.update((values) => ({
+			...values,
+			[key]: value
+		}));
+	}
+	clearFilters() {
+		this.query.set("");
+		this.filterValues.set({});
+	}
+	retry() {
+		this.load(this.schema());
+	}
+	isRowClickable() {
+		return Boolean(this.schema().detail?.enabled || this.canUpdate());
+	}
+	goView(row) {
+		this.viewRecord.emit(row);
+	}
+	onRowClick(row) {
+		if (this.schema().detail?.enabled) this.goView(row);
+		else if (this.canUpdate()) this.goEdit(row);
+	}
+	goCreate() {
+		this.router.navigate([
+			"/",
+			this.schema().id,
+			"new"
+		]);
+	}
+	goEdit(row) {
+		if (this.schema().detail?.enabled === true) {
+			this.viewRecord.emit(row);
+			return;
+		}
+		this.router.navigate([
+			"/",
+			this.schema().id,
+			this.keyOf(row),
+			"edit"
+		]);
+	}
+	quickEditSaved() {
+		this.quickEditRow.set(null);
+		this.load(this.schema());
+	}
+	async toggleActive(row, checked) {
+		const schema = this.schema();
+		const key = this.keyOf(row);
+		this.savingKey.set(key);
+		try {
+			await firstValueFrom(this.api.update(schema.endpoint, key, {
+				...row,
+				active: checked
+			}));
+			this.rows.update((rows) => rows.map((candidate) => this.keyOf(candidate) === key ? {
+				...candidate,
+				active: checked
+			} : candidate));
+		} catch (err) {
+			this.notifications.error(errorMessage(err, "No se pudo actualizar el registro."));
+		} finally {
+			this.savingKey.set(null);
+		}
+	}
+	onDrop(event) {
+		if (event.previousContainer !== event.container || event.previousIndex === event.currentIndex) return;
+		const row = this.visibleRows()[event.previousIndex];
+		if (row !== void 0) this.moveRow(this.keyOf(row), event.currentIndex);
+	}
+	moveBy(key, delta) {
+		const index = this.visibleRows().findIndex((row) => this.keyOf(row) === key);
+		if (index < 0) return;
+		this.moveRow(key, index + delta);
+	}
+	async moveRow(key, targetIndex) {
+		const schema = this.schema();
+		const path = schema.endpoint.list;
+		if (!path || !schema.positionField || this.reordering()) return;
+		const rows = this.visibleRows();
+		const from = rows.findIndex((row) => this.keyOf(row) === key);
+		if (from < 0) return;
+		const without = rows.filter((row) => this.keyOf(row) !== key);
+		const target = Math.min(Math.max(targetIndex, 0), without.length);
+		if (target === from) return;
+		const reorder = target === 0 ? {
+			key,
+			toStart: true
+		} : target >= without.length ? {
+			key,
+			toEnd: true
+		} : {
+			key,
+			after: this.keyOf(without[target - 1])
+		};
+		this.reordering.set(true);
+		try {
+			const fresh = await firstValueFrom(this.api.request("PUT", path, { reorder }));
+			if (Array.isArray(fresh)) this.rows.set(fresh);
+			this.notifications.success("Orden actualizado.");
+		} catch (err) {
+			this.notifications.error(errorMessage(err, "No se pudo guardar el orden."));
+		} finally {
+			this.reordering.set(false);
+		}
+	}
+	async removeRow(row) {
+		const schema = this.schema();
+		const key = this.keyOf(row);
+		if (!await this.notifications.confirm({
+			title: `Eliminar «${this.titleOf(row)}»`,
+			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.rows.update((rows) => rows.filter((candidate) => this.keyOf(candidate) !== key));
+		} catch (err) {
+			this.notifications.error(errorMessage(err, "No se pudo eliminar el registro."));
+		}
+	}
+	async runAction(action, row) {
+		await this.actionService.run(action, {
+			record: row,
+			resource: this.schema().id,
+			api: this.api,
+			router: this.router,
+			toast: this.notifications,
+			user: this.auth.user(),
+			keyField: this.schema().keyField
+		});
+	}
+	iconOf(action) {
+		return getAction(actionType(action))?.icon;
+	}
+	keyOf(row) {
+		return String(row[this.schema().keyField] ?? "");
+	}
+	titleOf(row) {
+		return String(row[this.schema().titleField] ?? "");
+	}
+	formatOf(column) {
+		return formatoDeColumna(column, this.schema().fields);
+	}
+	cellOf(row, column) {
+		return {
+			row,
+			column,
+			fields: this.schema().fields,
+			title: this.titleOf(row),
+			canUpdate: this.canUpdate(),
+			saving: this.savingKey() === this.keyOf(row),
+			currency: this.currencyCode(),
+			toggle: (checked) => void this.toggleActive(row, checked)
+		};
+	}
+	filterOptions(filter) {
+		if (filter.type === "boolean") return BOOLEAN_FILTER_OPTIONS;
+		if (filter.type === "select") return [{
+			value: "",
+			label: "Todos"
+		}, ...filter.options ?? []];
+		return [];
+	}
+	inputValue(event) {
+		return event.target.value;
+	}
+	selectValue(event) {
+		return event.target.value;
+	}
+	async load(schema) {
+		const epoch = ++this.loadEpoch;
+		this.status.set("loading");
+		try {
+			const rows = await firstValueFrom(this.api.list(schema.endpoint));
+			if (epoch !== this.loadEpoch) return;
+			this.rows.set(Array.isArray(rows) ? rows : []);
+			this.status.set("ready");
+		} catch {
+			if (epoch !== this.loadEpoch) return;
+			this.status.set("error");
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: ListView,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: ListView,
+		isStandalone: true,
+		selector: "app-list-view",
+		inputs: { schema: {
+			classPropertyName: "schema",
+			publicName: "schema",
+			isSignal: true,
+			isRequired: true,
+			transformFunction: null
+		} },
+		outputs: { viewRecord: "viewRecord" },
+		ngImport: i0,
+		template: `
+    <section class="space-y-4" aria-label="Listado" [attr.aria-busy]="status() === 'loading'">
+      <div class="flex flex-wrap items-end justify-between gap-3">
+        <div class="flex flex-wrap items-end gap-3">
+          @if (schema().search?.length) {
+            <label class="flex flex-col gap-1 text-xs font-medium text-neutral">
+              Buscar
+              <input
+                type="search"
+                class="w-56 rounded-lg border border-neutral/30 bg-surface px-3 py-2 text-sm"
+                placeholder="Buscar…"
+                [value]="query()"
+                (input)="setQuery(inputValue($event))"
+              />
+            </label>
+          }
+          @for (filter of schema().filters ?? []; track filter.key) {
+            <label class="flex flex-col gap-1 text-xs font-medium text-neutral">
+              {{ filter.label }}
+              @if (filter.type === 'text') {
+                <input
+                  type="search"
+                  class="w-44 rounded-lg border border-neutral/30 bg-surface px-3 py-2 text-sm"
+                  [value]="filterValues()[filter.key] ?? ''"
+                  (input)="setFilter(filter.key, inputValue($event))"
+                />
+              } @else {
+                <select
+                  class="w-44 rounded-lg border border-neutral/30 bg-surface px-3 py-2 text-sm"
+                  [value]="filterValues()[filter.key] ?? ''"
+                  (change)="setFilter(filter.key, selectValue($event))"
+                >
+                  @for (option of filterOptions(filter); track option.value) {
+                    <option [value]="option.value">{{ option.label }}</option>
+                  }
+                </select>
+              }
+            </label>
+          }
+        </div>
+        @if (canCreate()) {
+          <button app-button type="button" (click)="goCreate()">
+            <svg lucidePlus size="16" />
+            Crear {{ schema().label }}
+          </button>
+        }
+      </div>
+
+      @switch (status()) {
+        @case ('loading') {
+          <app-skeleton [lines]="6" [height]="44" />
+        }
+        @case ('error') {
+          <app-empty-state
+            title="No se pudo cargar el listado"
+            message="Revisa tu conexión e intenta de nuevo."
+          >
+            <button app-button variant="outline" type="button" (click)="retry()">
+              <svg lucideRotateCw size="16" />
+              Reintentar
+            </button>
+          </app-empty-state>
+        }
+        @case ('ready') {
+          @if (visibleRows().length === 0) {
+            <app-empty-state
+              [title]="rows().length === 0 ? 'Sin registros' : 'Sin resultados'"
+              [message]="
+                rows().length === 0
+                  ? 'Todavía no hay registros en este recurso.'
+                  : 'Ningún registro coincide con la búsqueda o los filtros.'
+              "
+            >
+              @if (rows().length > 0) {
+                <button app-button variant="outline" type="button" (click)="clearFilters()">
+                  Limpiar filtros
+                </button>
+              } @else if (canCreate()) {
+                <button app-button type="button" (click)="goCreate()">
+                  <svg lucidePlus size="16" />
+                  Crear el primero
+                </button>
+              }
+            </app-empty-state>
+          } @else {
+            <!-- La tabla es la vista de escritorio: se oculta bajo lg para
+                 que la lista de tarjetas de abajo sea la ÚNICA vista en
+                 móvil (con las dos visibles, el listado se duplicaba). -->
+            <div
+              class="hidden overflow-x-auto rounded-xl border border-neutral/20 bg-surface lg:block"
+            >
+              <table class="w-full text-sm">
+                <thead>
+                  <tr class="border-b border-neutral/20 text-left text-xs uppercase text-neutral">
+                    @if (canReorder()) {
+                      <th scope="col" class="w-16 px-2 py-3 font-medium">
+                        <span class="sr-only">Orden</span>
+                      </th>
+                    }
+                    @for (column of schema().listColumns; track column.key) {
+                      <th scope="col" class="px-4 py-3 font-medium">
+                        {{ column.label }}
+                      </th>
+                    }
+                    @if (hasRowActions()) {
+                      <th scope="col" class="px-4 py-3 text-right font-medium">Acciones</th>
+                    }
+                  </tr>
+                </thead>
+                <tbody
+                  cdkDropList
+                  [cdkDropListData]="visibleRows()"
+                  [cdkDropListDisabled]="dropDisabled()"
+                  (cdkDropListDropped)="onDrop($event)"
+                >
+                  @for (row of visibleRows(); track keyOf(row); let i = $index) {
+                    <tr
+                      class="border-b border-neutral/10 last:border-0 hover:bg-neutral/5 transition-colors"
+                      [class.cursor-pointer]="isRowClickable()"
+                      cdkDrag
+                      [cdkDragDisabled]="dropDisabled()"
+                      (click)="onRowClick(row)"
+                    >
+                      @if (canReorder()) {
+                        <td class="px-2 py-2.5 align-middle" (click)="$event.stopPropagation()">
+                          <div class="flex items-center gap-1">
+                            <button
+                              type="button"
+                              class="cursor-grab text-neutral hover:text-primary"
+                              cdkDragHandle
+                              [attr.aria-label]="'Reordenar ' + titleOf(row)"
+                              title="Arrastrar para reordenar"
+                            >
+                              <svg lucideGripVertical size="16" />
+                            </button>
+                            <span class="flex flex-col leading-none">
+                              <button
+                                type="button"
+                                class="px-1 text-xs text-neutral hover:text-primary disabled:opacity-30"
+                                [disabled]="i === 0 || reordering()"
+                                [attr.aria-label]="'Subir ' + titleOf(row)"
+                                (click)="moveBy(keyOf(row), -1)"
+                              >
+                                <svg lucideChevronUp size="16" />
+                              </button>
+                              <button
+                                type="button"
+                                class="px-1 text-xs text-neutral hover:text-primary disabled:opacity-30"
+                                [disabled]="i === visibleRows().length - 1 || reordering()"
+                                [attr.aria-label]="'Bajar ' + titleOf(row)"
+                                (click)="moveBy(keyOf(row), 1)"
+                              >
+                                <svg lucideChevronDown size="16" />
+                              </button>
+                            </span>
+                          </div>
+                        </td>
+                      }
+                      @for (column of schema().listColumns; track column.key) {
+                        <td class="px-4 py-2.5 align-middle">
+                          <!-- Los 7 formatos salen del registro (R4.3):
+                               la vista sólo elige cuál y entrega la celda. -->
+                          <app-render-host
+                            kind="column-format"
+                            [type]="formatOf(column)"
+                            [config]="column"
+                            [data]="cellOf(row, column)"
+                          />
+                        </td>
+                      }
+                      @if (hasRowActions()) {
+                        <td class="px-4 py-2.5" (click)="$event.stopPropagation()">
+                          <div class="flex items-center justify-end gap-1">
+                            @if (schema().detail?.enabled) {
+                              <button
+                                app-button
+                                variant="ghost"
+                                type="button"
+                                (click)="goView(row)"
+                                title="Ver ficha de detalle"
+                                class="h-8 px-2.5 text-xs text-neutral-light hover:text-primary hover:bg-primary/10"
+                              >
+                                <svg lucideEye size="15" />
+                                <span>Ver</span>
+                              </button>
+                            }
+                            @for (action of schema().actions ?? []; track action.id) {
+                              <button
+                                app-button
+                                variant="ghost"
+                                type="button"
+                                [title]="action.label"
+                                [attr.aria-label]="action.label"
+                                (click)="runAction(action, row)"
+                                class="h-8 px-2 text-xs text-neutral hover:text-primary hover:bg-primary/10"
+                              >
+                                @let actionIcon = iconOf(action);
+                                @if (actionIcon) {
+                                  <svg [lucideIcon]="actionIcon" size="15" />
+                                } @else {
+                                  {{ action.label }}
+                                }
+                              </button>
+                            }
+                            @if (canQuickEdit()) {
+                              <button
+                                app-button
+                                variant="ghost"
+                                type="button"
+                                (click)="quickEditRow.set(row)"
+                                title="Edición rápida"
+                                class="h-8 px-2 text-xs text-neutral hover:text-primary hover:bg-neutral/10"
+                              >
+                                <svg lucideZap size="15" />
+                                <span>Edición rápida</span>
+                              </button>
+                            }
+                            @if (canUpdate()) {
+                              <button
+                                app-button
+                                variant="ghost"
+                                type="button"
+                                (click)="goEdit(row)"
+                                title="Editar registro"
+                                class="h-8 px-2.5 text-xs text-primary hover:bg-primary/10"
+                              >
+                                <svg lucidePencil size="15" />
+                                <span>Editar</span>
+                              </button>
+                            }
+                            @if (canRemove()) {
+                              <button
+                                app-button
+                                variant="ghost"
+                                type="button"
+                                (click)="removeRow(row)"
+                                title="Eliminar registro"
+                                class="h-8 px-2 text-xs text-danger hover:bg-danger/10"
+                              >
+                                <svg lucideTrash2 size="15" />
+                                <span>Eliminar</span>
+                              </button>
+                            }
+                          </div>
+                        </td>
+                      }
+                    </tr>
+                  }
+                </tbody>
+              </table>
+            </div>
+
+            <!-- Vista de tarjetas — mobile-first (guía mobile §6).
+                 La tabla de arriba necesita scroll horizontal con 5–7 columnas
+                 (el anti-patrón #2): en pantallas chicas se convierte en una
+                 lista de tarjetas de dos niveles (principal + secundario),
+                 donde cada fila completa es un objetivo táctil. lg:hidden la
+                 retira cuando la tabla vuelve a ser usable. -->
+            <ul class="space-y-2 lg:hidden">
+              @for (row of visibleRows(); track keyOf(row)) {
+                <li
+                  class="rounded-xl border border-neutral/20 bg-surface p-3"
+                  [class.cursor-pointer]="isRowClickable()"
+                  (click)="onRowClick(row)"
+                >
+                  <!-- Nivel principal: el título del registro, siempre visible
+                       (guía §6.2: el identificador nunca se esconde). -->
+                  <div class="flex items-start justify-between gap-2">
+                    <span class="text-sm font-medium">
+                      {{ titleOf(row) }}
+                    </span>
+                    @if (schema().detail?.enabled) {
+                      <svg
+                        lucideChevronRight
+                        size="16"
+                        class="mt-0.5 shrink-0 text-neutral"
+                        aria-hidden="true"
+                      />
+                    }
+                  </div>
+                  <!-- Nivel secundario: el resto de las columnas como pares
+                       etiqueta/valor. Sin hover: todo lo accionable va en el
+                       pie de la tarjeta, al alcance del pulgar. -->
+                  <dl class="mt-2 grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-xs">
+                    @for (column of schema().listColumns; track column.key) {
+                      <dt class="text-neutral">{{ column.label }}</dt>
+                      <dd>
+                        <app-render-host
+                          kind="column-format"
+                          [type]="formatOf(column)"
+                          [config]="column"
+                          [data]="cellOf(row, column)"
+                        />
+                      </dd>
+                    }
+                  </dl>
+                  @if (hasRowActions()) {
+                    <!-- Pie táctil: objetivos ≥44 px (guía §8.2), sin hover. -->
+                    <div class="mt-3 flex flex-wrap gap-2 border-t border-neutral/10 pt-2">
+                      @if (schema().detail?.enabled) {
+                        <button
+                          app-button
+                          variant="outline"
+                          type="button"
+                          size="sm"
+                          class="flex-1"
+                          (click)="$event.stopPropagation(); goView(row)"
+                        >
+                          <svg lucideEye size="15" aria-hidden="true" />
+                          <span>Ver</span>
+                        </button>
+                      }
+                      @for (action of schema().actions ?? []; track action.id) {
+                        <button
+                          app-button
+                          variant="outline"
+                          type="button"
+                          size="sm"
+                          class="flex-1"
+                          (click)="$event.stopPropagation(); runAction(action, row)"
+                        >
+                          @let actionIcon = iconOf(action);
+                          @if (actionIcon) {
+                            <svg [lucideIcon]="actionIcon" size="15" aria-hidden="true" />
+                          }
+                          <span>{{ action.label }}</span>
+                        </button>
+                      }
+                      <!-- Editar es O una vía u otra, como en la tabla: si el
+                           schema declara quickEdit va el atajo; si no, la
+                           pantalla completa. Apilados los dos sería ruido. -->
+                      @if (canQuickEdit()) {
+                        <button
+                          app-button
+                          variant="outline"
+                          type="button"
+                          size="sm"
+                          class="flex-1"
+                          (click)="$event.stopPropagation(); quickEditRow.set(row)"
+                        >
+                          <svg lucideZap size="15" aria-hidden="true" />
+                          <span>Editar</span>
+                        </button>
+                      } @else if (canUpdate()) {
+                        <button
+                          app-button
+                          variant="outline"
+                          type="button"
+                          size="sm"
+                          class="flex-1"
+                          (click)="$event.stopPropagation(); goEdit(row)"
+                        >
+                          <svg lucidePencil size="15" aria-hidden="true" />
+                          <span>Editar</span>
+                        </button>
+                      }
+                      @if (canRemove()) {
+                        <button
+                          app-button
+                          variant="danger"
+                          type="button"
+                          size="sm"
+                          class="flex-1"
+                          (click)="$event.stopPropagation(); removeRow(row)"
+                        >
+                          <svg lucideTrash2 size="15" aria-hidden="true" />
+                          <span>Eliminar</span>
+                        </button>
+                      }
+                    </div>
+                  }
+                </li>
+              }
+            </ul>
+          }
+        }
+      }
+
+      @if (quickEditRow(); as row) {
+        <app-drawer-form
+          [open]="true"
+          [schema]="schema()"
+          mode="edit"
+          [recordKey]="keyOf(row)"
+          [fields]="quickEditFields()"
+          title="Edición rápida"
+          size="sm"
+          (close)="quickEditRow.set(null)"
+          (saved)="quickEditSaved()"
+        />
+      }
+    </section>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "component",
+				type: Button,
+				selector: "button[app-button]",
+				inputs: [
+					"variant",
+					"size",
+					"type",
+					"disabled",
+					"loading"
+				]
+			},
+			{
+				kind: "directive",
+				type: CdkDrag,
+				selector: "[cdkDrag]",
+				inputs: [
+					"cdkDragData",
+					"cdkDragLockAxis",
+					"cdkDragRootElement",
+					"cdkDragBoundary",
+					"cdkDragStartDelay",
+					"cdkDragFreeDragPosition",
+					"cdkDragDisabled",
+					"cdkDragConstrainPosition",
+					"cdkDragPreviewClass",
+					"cdkDragPreviewContainer",
+					"cdkDragScale"
+				],
+				outputs: [
+					"cdkDragStarted",
+					"cdkDragReleased",
+					"cdkDragEnded",
+					"cdkDragEntered",
+					"cdkDragExited",
+					"cdkDragDropped",
+					"cdkDragMoved"
+				],
+				exportAs: ["cdkDrag"]
+			},
+			{
+				kind: "directive",
+				type: CdkDragHandle,
+				selector: "[cdkDragHandle]",
+				inputs: ["cdkDragHandleDisabled"]
+			},
+			{
+				kind: "directive",
+				type: CdkDropList,
+				selector: "[cdkDropList], cdk-drop-list",
+				inputs: [
+					"cdkDropListConnectedTo",
+					"cdkDropListData",
+					"cdkDropListOrientation",
+					"id",
+					"cdkDropListLockAxis",
+					"cdkDropListDisabled",
+					"cdkDropListSortingDisabled",
+					"cdkDropListEnterPredicate",
+					"cdkDropListSortPredicate",
+					"cdkDropListAutoScrollDisabled",
+					"cdkDropListAutoScrollStep",
+					"cdkDropListElementContainer",
+					"cdkDropListHasAnchor"
+				],
+				outputs: [
+					"cdkDropListDropped",
+					"cdkDropListEntered",
+					"cdkDropListExited",
+					"cdkDropListSorted"
+				],
+				exportAs: ["cdkDropList"]
+			},
+			{
+				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: LucideChevronDown,
+				selector: "svg[lucideChevronDown]"
+			},
+			{
+				kind: "component",
+				type: LucideChevronRight,
+				selector: "svg[lucideChevronRight]"
+			},
+			{
+				kind: "component",
+				type: LucideChevronUp,
+				selector: "svg[lucideChevronUp]"
+			},
+			{
+				kind: "component",
+				type: LucideEye,
+				selector: "svg[lucideEye]"
+			},
+			{
+				kind: "component",
+				type: LucideGripVertical,
+				selector: "svg[lucideGripVertical]"
+			},
+			{
+				kind: "component",
+				type: LucidePencil,
+				selector: "svg[lucidePencil]"
+			},
+			{
+				kind: "component",
+				type: LucidePlus,
+				selector: "svg[lucidePlus]"
+			},
+			{
+				kind: "component",
+				type: LucideRotateCw,
+				selector: "svg[lucideRotateCw]"
+			},
+			{
+				kind: "component",
+				type: LucideDynamicIcon,
+				selector: "svg[lucideIcon]",
+				inputs: ["lucideIcon"]
+			},
+			{
+				kind: "component",
+				type: LucideTrash2,
+				selector: "svg[lucideTrash], svg[lucideTrash2]"
+			},
+			{
+				kind: "component",
+				type: LucideZap,
+				selector: "svg[lucideZap]"
+			},
+			{
+				kind: "component",
+				type: RenderHost,
+				selector: "app-render-host",
+				inputs: [
+					"kind",
+					"type",
+					"config",
+					"ctx",
+					"data",
+					"mode",
+					"value",
+					"chip"
+				]
+			},
+			{
+				kind: "component",
+				type: Skeleton,
+				selector: "app-skeleton",
+				inputs: [
+					"lines",
+					"height",
+					"width"
+				]
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: ListView,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-list-view",
+			imports: [
+				Button,
+				CdkDrag,
+				CdkDragHandle,
+				CdkDropList,
+				DrawerForm,
+				EmptyState,
+				LucideChevronDown,
+				LucideChevronRight,
+				LucideChevronUp,
+				LucideEye,
+				LucideGripVertical,
+				LucidePencil,
+				LucidePlus,
+				LucideRotateCw,
+				LucideDynamicIcon,
+				LucideTrash2,
+				LucideZap,
+				RenderHost,
+				Skeleton
+			],
+			template: `
+    <section class="space-y-4" aria-label="Listado" [attr.aria-busy]="status() === 'loading'">
+      <div class="flex flex-wrap items-end justify-between gap-3">
+        <div class="flex flex-wrap items-end gap-3">
+          @if (schema().search?.length) {
+            <label class="flex flex-col gap-1 text-xs font-medium text-neutral">
+              Buscar
+              <input
+                type="search"
+                class="w-56 rounded-lg border border-neutral/30 bg-surface px-3 py-2 text-sm"
+                placeholder="Buscar…"
+                [value]="query()"
+                (input)="setQuery(inputValue($event))"
+              />
+            </label>
+          }
+          @for (filter of schema().filters ?? []; track filter.key) {
+            <label class="flex flex-col gap-1 text-xs font-medium text-neutral">
+              {{ filter.label }}
+              @if (filter.type === 'text') {
+                <input
+                  type="search"
+                  class="w-44 rounded-lg border border-neutral/30 bg-surface px-3 py-2 text-sm"
+                  [value]="filterValues()[filter.key] ?? ''"
+                  (input)="setFilter(filter.key, inputValue($event))"
+                />
+              } @else {
+                <select
+                  class="w-44 rounded-lg border border-neutral/30 bg-surface px-3 py-2 text-sm"
+                  [value]="filterValues()[filter.key] ?? ''"
+                  (change)="setFilter(filter.key, selectValue($event))"
+                >
+                  @for (option of filterOptions(filter); track option.value) {
+                    <option [value]="option.value">{{ option.label }}</option>
+                  }
+                </select>
+              }
+            </label>
+          }
+        </div>
+        @if (canCreate()) {
+          <button app-button type="button" (click)="goCreate()">
+            <svg lucidePlus size="16" />
+            Crear {{ schema().label }}
+          </button>
+        }
+      </div>
+
+      @switch (status()) {
+        @case ('loading') {
+          <app-skeleton [lines]="6" [height]="44" />
+        }
+        @case ('error') {
+          <app-empty-state
+            title="No se pudo cargar el listado"
+            message="Revisa tu conexión e intenta de nuevo."
+          >
+            <button app-button variant="outline" type="button" (click)="retry()">
+              <svg lucideRotateCw size="16" />
+              Reintentar
+            </button>
+          </app-empty-state>
+        }
+        @case ('ready') {
+          @if (visibleRows().length === 0) {
+            <app-empty-state
+              [title]="rows().length === 0 ? 'Sin registros' : 'Sin resultados'"
+              [message]="
+                rows().length === 0
+                  ? 'Todavía no hay registros en este recurso.'
+                  : 'Ningún registro coincide con la búsqueda o los filtros.'
+              "
+            >
+              @if (rows().length > 0) {
+                <button app-button variant="outline" type="button" (click)="clearFilters()">
+                  Limpiar filtros
+                </button>
+              } @else if (canCreate()) {
+                <button app-button type="button" (click)="goCreate()">
+                  <svg lucidePlus size="16" />
+                  Crear el primero
+                </button>
+              }
+            </app-empty-state>
+          } @else {
+            <!-- La tabla es la vista de escritorio: se oculta bajo lg para
+                 que la lista de tarjetas de abajo sea la ÚNICA vista en
+                 móvil (con las dos visibles, el listado se duplicaba). -->
+            <div
+              class="hidden overflow-x-auto rounded-xl border border-neutral/20 bg-surface lg:block"
+            >
+              <table class="w-full text-sm">
+                <thead>
+                  <tr class="border-b border-neutral/20 text-left text-xs uppercase text-neutral">
+                    @if (canReorder()) {
+                      <th scope="col" class="w-16 px-2 py-3 font-medium">
+                        <span class="sr-only">Orden</span>
+                      </th>
+                    }
+                    @for (column of schema().listColumns; track column.key) {
+                      <th scope="col" class="px-4 py-3 font-medium">
+                        {{ column.label }}
+                      </th>
+                    }
+                    @if (hasRowActions()) {
+                      <th scope="col" class="px-4 py-3 text-right font-medium">Acciones</th>
+                    }
+                  </tr>
+                </thead>
+                <tbody
+                  cdkDropList
+                  [cdkDropListData]="visibleRows()"
+                  [cdkDropListDisabled]="dropDisabled()"
+                  (cdkDropListDropped)="onDrop($event)"
+                >
+                  @for (row of visibleRows(); track keyOf(row); let i = $index) {
+                    <tr
+                      class="border-b border-neutral/10 last:border-0 hover:bg-neutral/5 transition-colors"
+                      [class.cursor-pointer]="isRowClickable()"
+                      cdkDrag
+                      [cdkDragDisabled]="dropDisabled()"
+                      (click)="onRowClick(row)"
+                    >
+                      @if (canReorder()) {
+                        <td class="px-2 py-2.5 align-middle" (click)="$event.stopPropagation()">
+                          <div class="flex items-center gap-1">
+                            <button
+                              type="button"
+                              class="cursor-grab text-neutral hover:text-primary"
+                              cdkDragHandle
+                              [attr.aria-label]="'Reordenar ' + titleOf(row)"
+                              title="Arrastrar para reordenar"
+                            >
+                              <svg lucideGripVertical size="16" />
+                            </button>
+                            <span class="flex flex-col leading-none">
+                              <button
+                                type="button"
+                                class="px-1 text-xs text-neutral hover:text-primary disabled:opacity-30"
+                                [disabled]="i === 0 || reordering()"
+                                [attr.aria-label]="'Subir ' + titleOf(row)"
+                                (click)="moveBy(keyOf(row), -1)"
+                              >
+                                <svg lucideChevronUp size="16" />
+                              </button>
+                              <button
+                                type="button"
+                                class="px-1 text-xs text-neutral hover:text-primary disabled:opacity-30"
+                                [disabled]="i === visibleRows().length - 1 || reordering()"
+                                [attr.aria-label]="'Bajar ' + titleOf(row)"
+                                (click)="moveBy(keyOf(row), 1)"
+                              >
+                                <svg lucideChevronDown size="16" />
+                              </button>
+                            </span>
+                          </div>
+                        </td>
+                      }
+                      @for (column of schema().listColumns; track column.key) {
+                        <td class="px-4 py-2.5 align-middle">
+                          <!-- Los 7 formatos salen del registro (R4.3):
+                               la vista sólo elige cuál y entrega la celda. -->
+                          <app-render-host
+                            kind="column-format"
+                            [type]="formatOf(column)"
+                            [config]="column"
+                            [data]="cellOf(row, column)"
+                          />
+                        </td>
+                      }
+                      @if (hasRowActions()) {
+                        <td class="px-4 py-2.5" (click)="$event.stopPropagation()">
+                          <div class="flex items-center justify-end gap-1">
+                            @if (schema().detail?.enabled) {
+                              <button
+                                app-button
+                                variant="ghost"
+                                type="button"
+                                (click)="goView(row)"
+                                title="Ver ficha de detalle"
+                                class="h-8 px-2.5 text-xs text-neutral-light hover:text-primary hover:bg-primary/10"
+                              >
+                                <svg lucideEye size="15" />
+                                <span>Ver</span>
+                              </button>
+                            }
+                            @for (action of schema().actions ?? []; track action.id) {
+                              <button
+                                app-button
+                                variant="ghost"
+                                type="button"
+                                [title]="action.label"
+                                [attr.aria-label]="action.label"
+                                (click)="runAction(action, row)"
+                                class="h-8 px-2 text-xs text-neutral hover:text-primary hover:bg-primary/10"
+                              >
+                                @let actionIcon = iconOf(action);
+                                @if (actionIcon) {
+                                  <svg [lucideIcon]="actionIcon" size="15" />
+                                } @else {
+                                  {{ action.label }}
+                                }
+                              </button>
+                            }
+                            @if (canQuickEdit()) {
+                              <button
+                                app-button
+                                variant="ghost"
+                                type="button"
+                                (click)="quickEditRow.set(row)"
+                                title="Edición rápida"
+                                class="h-8 px-2 text-xs text-neutral hover:text-primary hover:bg-neutral/10"
+                              >
+                                <svg lucideZap size="15" />
+                                <span>Edición rápida</span>
+                              </button>
+                            }
+                            @if (canUpdate()) {
+                              <button
+                                app-button
+                                variant="ghost"
+                                type="button"
+                                (click)="goEdit(row)"
+                                title="Editar registro"
+                                class="h-8 px-2.5 text-xs text-primary hover:bg-primary/10"
+                              >
+                                <svg lucidePencil size="15" />
+                                <span>Editar</span>
+                              </button>
+                            }
+                            @if (canRemove()) {
+                              <button
+                                app-button
+                                variant="ghost"
+                                type="button"
+                                (click)="removeRow(row)"
+                                title="Eliminar registro"
+                                class="h-8 px-2 text-xs text-danger hover:bg-danger/10"
+                              >
+                                <svg lucideTrash2 size="15" />
+                                <span>Eliminar</span>
+                              </button>
+                            }
+                          </div>
+                        </td>
+                      }
+                    </tr>
+                  }
+                </tbody>
+              </table>
+            </div>
+
+            <!-- Vista de tarjetas — mobile-first (guía mobile §6).
+                 La tabla de arriba necesita scroll horizontal con 5–7 columnas
+                 (el anti-patrón #2): en pantallas chicas se convierte en una
+                 lista de tarjetas de dos niveles (principal + secundario),
+                 donde cada fila completa es un objetivo táctil. lg:hidden la
+                 retira cuando la tabla vuelve a ser usable. -->
+            <ul class="space-y-2 lg:hidden">
+              @for (row of visibleRows(); track keyOf(row)) {
+                <li
+                  class="rounded-xl border border-neutral/20 bg-surface p-3"
+                  [class.cursor-pointer]="isRowClickable()"
+                  (click)="onRowClick(row)"
+                >
+                  <!-- Nivel principal: el título del registro, siempre visible
+                       (guía §6.2: el identificador nunca se esconde). -->
+                  <div class="flex items-start justify-between gap-2">
+                    <span class="text-sm font-medium">
+                      {{ titleOf(row) }}
+                    </span>
+                    @if (schema().detail?.enabled) {
+                      <svg
+                        lucideChevronRight
+                        size="16"
+                        class="mt-0.5 shrink-0 text-neutral"
+                        aria-hidden="true"
+                      />
+                    }
+                  </div>
+                  <!-- Nivel secundario: el resto de las columnas como pares
+                       etiqueta/valor. Sin hover: todo lo accionable va en el
+                       pie de la tarjeta, al alcance del pulgar. -->
+                  <dl class="mt-2 grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-xs">
+                    @for (column of schema().listColumns; track column.key) {
+                      <dt class="text-neutral">{{ column.label }}</dt>
+                      <dd>
+                        <app-render-host
+                          kind="column-format"
+                          [type]="formatOf(column)"
+                          [config]="column"
+                          [data]="cellOf(row, column)"
+                        />
+                      </dd>
+                    }
+                  </dl>
+                  @if (hasRowActions()) {
+                    <!-- Pie táctil: objetivos ≥44 px (guía §8.2), sin hover. -->
+                    <div class="mt-3 flex flex-wrap gap-2 border-t border-neutral/10 pt-2">
+                      @if (schema().detail?.enabled) {
+                        <button
+                          app-button
+                          variant="outline"
+                          type="button"
+                          size="sm"
+                          class="flex-1"
+                          (click)="$event.stopPropagation(); goView(row)"
+                        >
+                          <svg lucideEye size="15" aria-hidden="true" />
+                          <span>Ver</span>
+                        </button>
+                      }
+                      @for (action of schema().actions ?? []; track action.id) {
+                        <button
+                          app-button
+                          variant="outline"
+                          type="button"
+                          size="sm"
+                          class="flex-1"
+                          (click)="$event.stopPropagation(); runAction(action, row)"
+                        >
+                          @let actionIcon = iconOf(action);
+                          @if (actionIcon) {
+                            <svg [lucideIcon]="actionIcon" size="15" aria-hidden="true" />
+                          }
+                          <span>{{ action.label }}</span>
+                        </button>
+                      }
+                      <!-- Editar es O una vía u otra, como en la tabla: si el
+                           schema declara quickEdit va el atajo; si no, la
+                           pantalla completa. Apilados los dos sería ruido. -->
+                      @if (canQuickEdit()) {
+                        <button
+                          app-button
+                          variant="outline"
+                          type="button"
+                          size="sm"
+                          class="flex-1"
+                          (click)="$event.stopPropagation(); quickEditRow.set(row)"
+                        >
+                          <svg lucideZap size="15" aria-hidden="true" />
+                          <span>Editar</span>
+                        </button>
+                      } @else if (canUpdate()) {
+                        <button
+                          app-button
+                          variant="outline"
+                          type="button"
+                          size="sm"
+                          class="flex-1"
+                          (click)="$event.stopPropagation(); goEdit(row)"
+                        >
+                          <svg lucidePencil size="15" aria-hidden="true" />
+                          <span>Editar</span>
+                        </button>
+                      }
+                      @if (canRemove()) {
+                        <button
+                          app-button
+                          variant="danger"
+                          type="button"
+                          size="sm"
+                          class="flex-1"
+                          (click)="$event.stopPropagation(); removeRow(row)"
+                        >
+                          <svg lucideTrash2 size="15" aria-hidden="true" />
+                          <span>Eliminar</span>
+                        </button>
+                      }
+                    </div>
+                  }
+                </li>
+              }
+            </ul>
+          }
+        }
+      }
+
+      @if (quickEditRow(); as row) {
+        <app-drawer-form
+          [open]="true"
+          [schema]="schema()"
+          mode="edit"
+          [recordKey]="keyOf(row)"
+          [fields]="quickEditFields()"
+          title="Edición rápida"
+          size="sm"
+          (close)="quickEditRow.set(null)"
+          (saved)="quickEditSaved()"
+        />
+      }
+    </section>
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		schema: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "schema",
+				required: true
+			}]
+		}],
+		viewRecord: [{
+			type: i0.Output,
+			args: ["viewRecord"]
+		}]
+	}
+});
+var DetailView = class DetailView {
+	api = inject(ApiService, { optional: true });
+	actionService = inject(ActionService);
+	auth = inject(AuthService);
+	router = inject(Router);
+	nav = inject(ViewNavigationService);
+	notifications = inject(NotificationService);
+	configService = inject(ConfigService);
+	constructor() {
+		this.configService.ensureLoaded();
+	}
+	schema = input.required(...ngDevMode ? [{ debugName: "schema" }] : /* istanbul ignore next */ []);
+	record = input.required(...ngDevMode ? [{ debugName: "record" }] : /* istanbul ignore next */ []);
+	edit = output();
+	back = output();
+	delete = output();
+	refreshTick = signal(0, ...ngDevMode ? [{ debugName: "refreshTick" }] : /* istanbul ignore next */ []);
+	fetched = toSignal(combineLatest([toObservable(this.record), toObservable(this.refreshTick)]).pipe(switchMap(([rec]) => {
+		const schema = this.schema();
+		const key = rec ? String(rec[schema.keyField] ?? "") : "";
+		const getEndpoint = schema.endpoint?.get;
+		if (!key || !getEndpoint || typeof this.api?.get !== "function") return of({
+			phase: "done",
+			data: null
+		});
+		return this.api.get(schema.endpoint, key).pipe(map((data) => ({
+			phase: "done",
+			data
+		})), catchError((error) => of({
+			phase: "error",
+			error
+		})));
+	})), { initialValue: { phase: "pending" } });
+	status = computed(() => {
+		const fetched = this.fetched();
+		if (fetched.phase === "pending") return "loading";
+		if (fetched.phase === "error") return "error";
+		return "ready";
+	}, ...ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []);
+	retry() {
+		this.refreshTick.update((tick) => tick + 1);
+	}
+	errorDeCarga() {
+		const fetched = this.fetched();
+		return fetched.phase === "error" ? fetched.error : void 0;
+	}
+	volverDeError() {
+		this.back.emit();
+		this.nav.back();
+	}
+	effectiveRecord = computed(() => {
+		const initial = this.record();
+		const fetched = this.fetched();
+		if (fetched.phase === "done" && fetched.data && typeof fetched.data === "object" && Object.keys(fetched.data).length > 0) return {
+			...initial,
+			...fetched.data
+		};
+		return initial;
+	}, ...ngDevMode ? [{ debugName: "effectiveRecord" }] : /* istanbul ignore next */ []);
+	detail = computed(() => this.schema().detail ?? { enabled: true }, ...ngDevMode ? [{ debugName: "detail" }] : /* istanbul ignore next */ []);
+	title = computed(() => {
+		const rec = this.effectiveRecord();
+		const schema = this.schema();
+		const raw = rec[schema.titleField];
+		return raw !== void 0 && raw !== null && raw !== "" ? String(raw) : schema.label;
+	}, ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+	recordKey = computed(() => {
+		const rec = this.effectiveRecord();
+		const schema = this.schema();
+		return String(rec[schema.keyField] ?? "—");
+	}, ...ngDevMode ? [{ debugName: "recordKey" }] : /* istanbul ignore next */ []);
+	headerFields = computed(() => {
+		return (this.detail().headerFields ?? []).map((key) => this.resolveFieldValue(key)).filter((f) => f !== null);
+	}, ...ngDevMode ? [{ debugName: "headerFields" }] : /* istanbul ignore next */ []);
+	sections = computed(() => {
+		const schema = this.schema();
+		const detailConfig = this.detail();
+		if (detailConfig.sections && detailConfig.sections.length > 0) return detailConfig.sections.map((sec) => ({
+			id: sec.id,
+			label: sec.label,
+			fields: sec.fields.map((key) => this.resolveFieldValue(key)).filter((f) => f !== null)
+		})).filter((sec) => sec.fields.length > 0);
+		const layoutSections = schema.layout?.sections ?? [];
+		const sectionMap = /* @__PURE__ */ new Map();
+		for (const layoutSection of layoutSections) sectionMap.set(layoutSection.id, {
+			id: layoutSection.id,
+			label: layoutSection.label,
+			fields: []
+		});
+		const unsectioned = {
+			id: "_unsectioned",
+			label: schema.label,
+			fields: []
+		};
+		for (const field of schema.fields) {
+			const value = this.resolveFieldValue(field.key);
+			if (value === null) continue;
+			if (field.section && sectionMap.has(field.section)) sectionMap.get(field.section).fields.push(value);
+			else unsectioned.fields.push(value);
+		}
+		const result = [];
+		if (unsectioned.fields.length > 0) result.push(unsectioned);
+		for (const sec of sectionMap.values()) if (sec.fields.length > 0) result.push(sec);
+		return result;
+	}, ...ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []);
+	copyShareActions = computed(() => {
+		return (this.schema().actions ?? this.detail().actions ?? []).filter(isShareAction);
+	}, ...ngDevMode ? [{ debugName: "copyShareActions" }] : /* istanbul ignore next */ []);
+	triggerActions = computed(() => {
+		return (this.schema().actions ?? this.detail().actions ?? []).filter(isTriggerAction);
+	}, ...ngDevMode ? [{ debugName: "triggerActions" }] : /* istanbul ignore next */ []);
+	async runTrigger(action) {
+		if (!this.api) return;
+		const result = await this.actionService.run(action, {
+			record: this.effectiveRecord(),
+			resource: this.schema().id,
+			api: this.api,
+			router: this.router,
+			toast: this.notifications,
+			user: this.auth.user(),
+			keyField: this.schema().keyField
+		});
+		if (result.ok && result.reload) this.refreshTick.update((tick) => tick + 1);
+	}
+	resolveFieldValue(key) {
+		const schema = this.schema();
+		const rec = this.effectiveRecord();
+		const field = schema.fields.find((f) => f.key === key);
+		const raw = getValue(rec, key);
+		const declarado = field ?? {
+			key,
+			label: key.replace(/_/g, " "),
+			type: "text"
+		};
+		if (!this.auth.canReadField(declarado)) return null;
+		return {
+			key,
+			label: field?.label ?? declarado.label,
+			field: declarado,
+			raw
+		};
+	}
+	vacio(valor) {
+		return valor === null || valor === void 0 || valor === "";
+	}
+	esHistorial(campo) {
+		return campo.field.type === "list" && !this.vacio(campo.raw);
+	}
+	regularFields(section) {
+		return section.fields.filter((f) => !this.esHistorial(f));
+	}
+	listFields(section) {
+		return section.fields.filter((f) => this.esHistorial(f));
+	}
+	hasLargeContent(section) {
+		return section.fields.some((f) => this.esHistorial(f) || f.key === "description");
+	}
+	shareOf(action) {
+		return resolveShare(action, this.actionService.vars(this.effectiveRecord()));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: DetailView,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: DetailView,
+		isStandalone: true,
+		selector: "app-detail-view",
+		inputs: {
+			schema: {
+				classPropertyName: "schema",
+				publicName: "schema",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			record: {
+				classPropertyName: "record",
+				publicName: "record",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			edit: "edit",
+			back: "back",
+			delete: "delete"
+		},
+		ngImport: i0,
+		template: `
+    <div class="space-y-6">
+      <!-- ── Cabecera Principal ── -->
+      <header
+        class="flex flex-wrap items-start justify-between gap-4 rounded-2xl border border-neutral/15 bg-surface p-6 shadow-xs"
+      >
+        <div class="space-y-2">
+          <div class="flex flex-wrap items-center gap-2.5">
+            <h1 class="font-display text-2xl font-bold tracking-tight text-neutral-light">
+              {{ title() }}
+            </h1>
+            @for (campo of headerFields(); track campo.key) {
+              @if (!vacio(campo.raw)) {
+                <!-- La cabecera siempre mostró los headerFields como chips:
+                     el matiz viaja al host, no un @switch por tipo acá. -->
+                <app-render-host
+                  mode="display"
+                  [chip]="true"
+                  [type]="campo.field.type"
+                  [config]="campo.field"
+                  [value]="campo.raw"
+                />
+              }
+            }
+          </div>
+          <p class="text-sm text-neutral">
+            {{ schema().label }} · Identificador:
+            <span class="font-mono font-medium text-neutral-light">{{ recordKey() }}</span>
+          </p>
+        </div>
+
+        <div class="flex flex-wrap items-center gap-2.5">
+          <button app-button variant="outline" type="button" (click)="back.emit()">
+            <svg lucideArrowLeft size="16" />
+            Volver
+          </button>
+          @if (detail().allowEdit !== false && status() !== 'error') {
+            <button app-button variant="primary" type="button" (click)="edit.emit(record())">
+              <svg lucidePencil size="16" />
+              Editar
+            </button>
+          }
+          @if (detail().allowDelete !== false && status() !== 'error') {
+            <button app-button variant="danger" type="button" (click)="delete.emit(record())">
+              <svg lucideTrash2 size="16" />
+              Eliminar
+            </button>
+          }
+        </div>
+      </header>
+
+      <!-- ── Acciones Destacadas del Registro (si existen) ── -->
+      @if (copyShareActions().length > 0 || triggerActions().length > 0) {
+        <section
+          class="rounded-2xl border border-primary/25 bg-gradient-to-r from-primary/10 via-primary/5 to-transparent p-5 shadow-xs"
+        >
+          <div class="mb-3 flex items-center gap-2">
+            <svg lucideExternalLink size="16" class="text-primary" />
+            <h2 class="text-sm font-semibold text-primary">Acciones del Registro</h2>
+          </div>
+          <div class="flex flex-col gap-3 sm:flex-row sm:flex-wrap">
+            @for (action of copyShareActions(); track action.id) {
+              <div class="flex-1 min-w-[280px]">
+                @let share = shareOf(action);
+                <app-copy-share
+                  [url]="share.url"
+                  [shareText]="share.shareText"
+                  [label]="action.label"
+                />
+              </div>
+            }
+            @for (action of triggerActions(); track action.id) {
+              <button app-button variant="outline" type="button" (click)="runTrigger(action)">
+                {{ action.label }}
+              </button>
+            }
+          </div>
+        </section>
+      }
+
+      <!-- ── Secciones de Datos ── -->
+      @switch (status()) {
+        @case ('loading') {
+          <!-- Skeleton con la forma de las tarjetas de sección: reserva el
+               espacio (sin layout jump) y distingue «cargando» de «vacío».
+               La cabecera y las acciones de arriba sí se pintan ya: son la
+               fila de la lista, datos reales que no están en disputa. -->
+          <div aria-busy="true" class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+            @for (placeholder of [0, 1]; track placeholder) {
+              <section
+                class="rounded-2xl border border-neutral/15 bg-surface shadow-xs overflow-hidden"
+              >
+                <header class="border-b border-neutral/10 bg-neutral/5 px-5 py-3.5">
+                  <app-skeleton [lines]="1" [height]="14" width="30%" />
+                </header>
+                <div class="p-5">
+                  <app-skeleton [lines]="6" [height]="44" />
+                </div>
+              </section>
+            }
+          </div>
+        }
+        @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()">
+              <svg lucideRotateCw size="16" />
+              Reintentar
+            </button>
+            <button app-button variant="outline" type="button" (click)="volverDeError()">
+              <svg lucideArrowLeft size="16" />
+              Volver
+            </button>
+          </app-empty-state>
+        }
+        @case ('ready') {
+          <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+            @for (section of sections(); track section.id) {
+              <section
+                class="rounded-2xl border border-neutral/15 bg-surface shadow-xs overflow-hidden flex flex-col"
+                [class.lg:col-span-2]="hasLargeContent(section)"
+              >
+                <header class="border-b border-neutral/10 bg-neutral/5 px-5 py-3.5">
+                  <h2 class="text-sm font-semibold tracking-wide text-neutral-light uppercase">
+                    {{ section.label }}
+                  </h2>
+                </header>
+
+                <div class="p-5 flex-1 space-y-4">
+                  <!-- Grid para campos regulares -->
+                  @if (regularFields(section).length > 0) {
+                    <dl class="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2">
+                      @for (campo of regularFields(section); track campo.key) {
+                        <div class="space-y-1">
+                          <dt class="text-xs font-medium text-neutral">{{ campo.label }}</dt>
+                          <dd class="text-sm font-medium text-neutral-light break-words">
+                            <app-render-host
+                              mode="display"
+                              [type]="campo.field.type"
+                              [config]="campo.field"
+                              [value]="campo.raw"
+                            />
+                          </dd>
+                        </div>
+                      }
+                    </dl>
+                  }
+
+                  <!-- Renderizado de listas anidadas (Timeline de eventos / items) -->
+                  @for (campo of listFields(section); track campo.key) {
+                    <div class="pt-2">
+                      <h3 class="mb-3 text-xs font-semibold text-neutral uppercase">
+                        {{ campo.label }}
+                      </h3>
+                      <app-render-host
+                        mode="display"
+                        [type]="campo.field.type"
+                        [config]="campo.field"
+                        [value]="campo.raw"
+                      />
+                    </div>
+                  }
+                </div>
+              </section>
+            }
+          </div>
+        }
+      }
+    </div>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				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: EmptyState,
+				selector: "app-empty-state",
+				inputs: ["title", "message"]
+			},
+			{
+				kind: "component",
+				type: LucideArrowLeft,
+				selector: "svg[lucideArrowLeft]"
+			},
+			{
+				kind: "component",
+				type: LucideExternalLink,
+				selector: "svg[lucideExternalLink]"
+			},
+			{
+				kind: "component",
+				type: LucidePencil,
+				selector: "svg[lucidePencil]"
+			},
+			{
+				kind: "component",
+				type: LucideRotateCw,
+				selector: "svg[lucideRotateCw]"
+			},
+			{
+				kind: "component",
+				type: LucideTrash2,
+				selector: "svg[lucideTrash], svg[lucideTrash2]"
+			},
+			{
+				kind: "component",
+				type: RenderHost,
+				selector: "app-render-host",
+				inputs: [
+					"kind",
+					"type",
+					"config",
+					"ctx",
+					"data",
+					"mode",
+					"value",
+					"chip"
+				]
+			},
+			{
+				kind: "component",
+				type: Skeleton,
+				selector: "app-skeleton",
+				inputs: [
+					"lines",
+					"height",
+					"width"
+				]
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: DetailView,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-detail-view",
+			imports: [
+				Button,
+				CopyShare,
+				EmptyState,
+				LucideArrowLeft,
+				LucideExternalLink,
+				LucidePencil,
+				LucideRotateCw,
+				LucideTrash2,
+				RenderHost,
+				Skeleton
+			],
+			template: `
+    <div class="space-y-6">
+      <!-- ── Cabecera Principal ── -->
+      <header
+        class="flex flex-wrap items-start justify-between gap-4 rounded-2xl border border-neutral/15 bg-surface p-6 shadow-xs"
+      >
+        <div class="space-y-2">
+          <div class="flex flex-wrap items-center gap-2.5">
+            <h1 class="font-display text-2xl font-bold tracking-tight text-neutral-light">
+              {{ title() }}
+            </h1>
+            @for (campo of headerFields(); track campo.key) {
+              @if (!vacio(campo.raw)) {
+                <!-- La cabecera siempre mostró los headerFields como chips:
+                     el matiz viaja al host, no un @switch por tipo acá. -->
+                <app-render-host
+                  mode="display"
+                  [chip]="true"
+                  [type]="campo.field.type"
+                  [config]="campo.field"
+                  [value]="campo.raw"
+                />
+              }
+            }
+          </div>
+          <p class="text-sm text-neutral">
+            {{ schema().label }} · Identificador:
+            <span class="font-mono font-medium text-neutral-light">{{ recordKey() }}</span>
+          </p>
+        </div>
+
+        <div class="flex flex-wrap items-center gap-2.5">
+          <button app-button variant="outline" type="button" (click)="back.emit()">
+            <svg lucideArrowLeft size="16" />
+            Volver
+          </button>
+          @if (detail().allowEdit !== false && status() !== 'error') {
+            <button app-button variant="primary" type="button" (click)="edit.emit(record())">
+              <svg lucidePencil size="16" />
+              Editar
+            </button>
+          }
+          @if (detail().allowDelete !== false && status() !== 'error') {
+            <button app-button variant="danger" type="button" (click)="delete.emit(record())">
+              <svg lucideTrash2 size="16" />
+              Eliminar
+            </button>
+          }
+        </div>
+      </header>
+
+      <!-- ── Acciones Destacadas del Registro (si existen) ── -->
+      @if (copyShareActions().length > 0 || triggerActions().length > 0) {
+        <section
+          class="rounded-2xl border border-primary/25 bg-gradient-to-r from-primary/10 via-primary/5 to-transparent p-5 shadow-xs"
+        >
+          <div class="mb-3 flex items-center gap-2">
+            <svg lucideExternalLink size="16" class="text-primary" />
+            <h2 class="text-sm font-semibold text-primary">Acciones del Registro</h2>
+          </div>
+          <div class="flex flex-col gap-3 sm:flex-row sm:flex-wrap">
+            @for (action of copyShareActions(); track action.id) {
+              <div class="flex-1 min-w-[280px]">
+                @let share = shareOf(action);
+                <app-copy-share
+                  [url]="share.url"
+                  [shareText]="share.shareText"
+                  [label]="action.label"
+                />
+              </div>
+            }
+            @for (action of triggerActions(); track action.id) {
+              <button app-button variant="outline" type="button" (click)="runTrigger(action)">
+                {{ action.label }}
+              </button>
+            }
+          </div>
+        </section>
+      }
+
+      <!-- ── Secciones de Datos ── -->
+      @switch (status()) {
+        @case ('loading') {
+          <!-- Skeleton con la forma de las tarjetas de sección: reserva el
+               espacio (sin layout jump) y distingue «cargando» de «vacío».
+               La cabecera y las acciones de arriba sí se pintan ya: son la
+               fila de la lista, datos reales que no están en disputa. -->
+          <div aria-busy="true" class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+            @for (placeholder of [0, 1]; track placeholder) {
+              <section
+                class="rounded-2xl border border-neutral/15 bg-surface shadow-xs overflow-hidden"
+              >
+                <header class="border-b border-neutral/10 bg-neutral/5 px-5 py-3.5">
+                  <app-skeleton [lines]="1" [height]="14" width="30%" />
+                </header>
+                <div class="p-5">
+                  <app-skeleton [lines]="6" [height]="44" />
+                </div>
+              </section>
+            }
+          </div>
+        }
+        @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()">
+              <svg lucideRotateCw size="16" />
+              Reintentar
+            </button>
+            <button app-button variant="outline" type="button" (click)="volverDeError()">
+              <svg lucideArrowLeft size="16" />
+              Volver
+            </button>
+          </app-empty-state>
+        }
+        @case ('ready') {
+          <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+            @for (section of sections(); track section.id) {
+              <section
+                class="rounded-2xl border border-neutral/15 bg-surface shadow-xs overflow-hidden flex flex-col"
+                [class.lg:col-span-2]="hasLargeContent(section)"
+              >
+                <header class="border-b border-neutral/10 bg-neutral/5 px-5 py-3.5">
+                  <h2 class="text-sm font-semibold tracking-wide text-neutral-light uppercase">
+                    {{ section.label }}
+                  </h2>
+                </header>
+
+                <div class="p-5 flex-1 space-y-4">
+                  <!-- Grid para campos regulares -->
+                  @if (regularFields(section).length > 0) {
+                    <dl class="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2">
+                      @for (campo of regularFields(section); track campo.key) {
+                        <div class="space-y-1">
+                          <dt class="text-xs font-medium text-neutral">{{ campo.label }}</dt>
+                          <dd class="text-sm font-medium text-neutral-light break-words">
+                            <app-render-host
+                              mode="display"
+                              [type]="campo.field.type"
+                              [config]="campo.field"
+                              [value]="campo.raw"
+                            />
+                          </dd>
+                        </div>
+                      }
+                    </dl>
+                  }
+
+                  <!-- Renderizado de listas anidadas (Timeline de eventos / items) -->
+                  @for (campo of listFields(section); track campo.key) {
+                    <div class="pt-2">
+                      <h3 class="mb-3 text-xs font-semibold text-neutral uppercase">
+                        {{ campo.label }}
+                      </h3>
+                      <app-render-host
+                        mode="display"
+                        [type]="campo.field.type"
+                        [config]="campo.field"
+                        [value]="campo.raw"
+                      />
+                    </div>
+                  }
+                </div>
+              </section>
+            }
+          </div>
+        }
+      }
+    </div>
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		schema: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "schema",
+				required: true
+			}]
+		}],
+		record: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "record",
+				required: true
+			}]
+		}],
+		edit: [{
+			type: i0.Output,
+			args: ["edit"]
+		}],
+		back: [{
+			type: i0.Output,
+			args: ["back"]
+		}],
+		delete: [{
+			type: i0.Output,
+			args: ["delete"]
+		}]
+	}
+});
+var resource_page_exports = /* @__PURE__ */ __exportAll({ ResourcePage: () => ResourcePage });
+var ResourcePage = class ResourcePage {
+	route = inject(ActivatedRoute);
+	router = inject(Router);
+	auth = inject(AuthService);
+	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 */ []);
+	currentView = signal("list", ...ngDevMode ? [{ debugName: "currentView" }] : /* istanbul ignore next */ []);
+	selectedRecord = signal(null, ...ngDevMode ? [{ debugName: "selectedRecord" }] : /* istanbul ignore next */ []);
+	constructor() {
+		this.route.paramMap.pipe(map((params) => params.get("key")), distinctUntilChanged(), takeUntilDestroyed()).subscribe((key) => this.openFromRoute(key));
+		this.route.data?.pipe(takeUntilDestroyed()).subscribe(() => this.openFromRoute(this.params().get("key")));
+	}
+	openFromRoute(key) {
+		const schema = this.schema();
+		if (!schema || schema.kind !== "collection") return;
+		if ((this.routeData()["viewType"] === "detail" || key) && key && schema.detail?.enabled) {
+			const current = this.selectedRecord();
+			if (!current || String(current[schema.keyField]) !== key) this.selectedRecord.set({ [schema.keyField]: key });
+			this.currentView.set("detail");
+		} else if (this.currentView() === "detail") {
+			this.selectedRecord.set(null);
+			this.currentView.set("list");
+		}
+	}
+	switchToDetail(record) {
+		const schema = this.schema();
+		const data = this.routeData();
+		const binding = data["select"];
+		if (binding !== void 0) {
+			const key = schema && record[schema.keyField] !== void 0 && record[schema.keyField] !== null ? String(record[schema.keyField]) : "";
+			if (binding.mode === "route") {
+				const emit = data["emit"];
+				emit?.({
+					resource: schema?.id ?? String(data["resourceId"] ?? ""),
+					key,
+					action: binding.on
+				});
+				return;
+			}
+			if (binding.mode === "none") return;
+			this.selectedRecord.set(record);
+			this.currentView.set("detail");
+			return;
+		}
+		this.selectedRecord.set(record);
+		this.currentView.set("detail");
+		const k = schema ? record[schema.keyField] : void 0;
+		if (schema && k !== void 0 && k !== null && String(k) !== "") this.router.navigate([
+			"/",
+			schema.id,
+			String(k)
+		]);
+	}
+	switchToList() {
+		this.selectedRecord.set(null);
+		this.currentView.set("list");
+		const schema = this.schema();
+		if (schema && this.params().get("key")) this.router.navigate(["/", schema.id]);
+	}
+	goEdit(record) {
+		const schema = this.schema();
+		if (!schema) return;
+		const key = record[schema.keyField];
+		if (key) this.router.navigate([
+			"/",
+			schema.id,
+			key,
+			"edit"
+		]);
+	}
+	hasNoAccess(schema) {
+		if (schema.policies?.access) {
+			if (schema.kind === "singleton") return !this.auth.canDoOperation(schema, "update");
+			return !this.auth.canDoOperation(schema, "list") && !this.auth.canDoOperation(schema, "create") && !this.auth.canDoOperation(schema, "update") && !this.auth.canDoOperation(schema, "remove");
+		}
+		const permissions = schema.permissions;
+		if (!permissions || schema.kind === "dashboard") return false;
+		if (schema.kind === "singleton") return permissions.update === false;
+		return permissions.create === false && permissions.update === false && permissions.remove === false;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: ResourcePage,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: ResourcePage,
+		isStandalone: true,
+		selector: "app-resource-page",
+		ngImport: i0,
+		template: `
+    @if (schema(); as schema) {
+      @if (hasNoAccess(schema)) {
+        <app-empty-state
+          title="Sin permisos"
+          message="No tiene permisos para gestionar este recurso."
+        />
+      } @else {
+        @switch (schema.kind) {
+          @case ('collection') {
+            @switch (currentView()) {
+              @case ('detail') {
+                @if (selectedRecord(); as rec) {
+                  <app-detail-view
+                    [schema]="schema"
+                    [record]="rec"
+                    (back)="switchToList()"
+                    (edit)="goEdit($event)"
+                    (delete)="switchToList()"
+                  />
+                }
+              }
+              @default {
+                <header class="mb-6">
+                  <h1 class="font-display text-2xl font-semibold">
+                    {{ schema.labelPlural }}
+                  </h1>
+                  <p class="text-sm text-neutral">Colección · {{ schema.fields.length }} campos</p>
+                </header>
+                <app-list-view [schema]="schema" (viewRecord)="switchToDetail($event)" />
+              }
+            }
+          }
+          @case ('dashboard') {
+            <app-dashboard [schema]="schema" />
+          }
+          @default {
+            <!-- singleton: formulario directo -->
+            <app-form-view />
+          }
+        }
+      }
+    } @else {
+      <app-empty-state
+        title="Recurso no encontrado"
+        message="No existe un schema con ese id en el registry."
+      />
+    }
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "component",
+				type: Dashboard,
+				selector: "app-dashboard",
+				inputs: ["schema", "data"]
+			},
+			{
+				kind: "component",
+				type: DetailView,
+				selector: "app-detail-view",
+				inputs: ["schema", "record"],
+				outputs: [
+					"edit",
+					"back",
+					"delete"
+				]
+			},
+			{
+				kind: "component",
+				type: EmptyState,
+				selector: "app-empty-state",
+				inputs: ["title", "message"]
+			},
+			{
+				kind: "component",
+				type: FormView,
+				selector: "app-form-view"
+			},
+			{
+				kind: "component",
+				type: ListView,
+				selector: "app-list-view",
+				inputs: ["schema"],
+				outputs: ["viewRecord"]
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: ResourcePage,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-resource-page",
+			imports: [
+				Dashboard,
+				DetailView,
+				EmptyState,
+				FormView,
+				ListView
+			],
+			template: `
+    @if (schema(); as schema) {
+      @if (hasNoAccess(schema)) {
+        <app-empty-state
+          title="Sin permisos"
+          message="No tiene permisos para gestionar este recurso."
+        />
+      } @else {
+        @switch (schema.kind) {
+          @case ('collection') {
+            @switch (currentView()) {
+              @case ('detail') {
+                @if (selectedRecord(); as rec) {
+                  <app-detail-view
+                    [schema]="schema"
+                    [record]="rec"
+                    (back)="switchToList()"
+                    (edit)="goEdit($event)"
+                    (delete)="switchToList()"
+                  />
+                }
+              }
+              @default {
+                <header class="mb-6">
+                  <h1 class="font-display text-2xl font-semibold">
+                    {{ schema.labelPlural }}
+                  </h1>
+                  <p class="text-sm text-neutral">Colección · {{ schema.fields.length }} campos</p>
+                </header>
+                <app-list-view [schema]="schema" (viewRecord)="switchToDetail($event)" />
+              }
+            }
+          }
+          @case ('dashboard') {
+            <app-dashboard [schema]="schema" />
+          }
+          @default {
+            <!-- singleton: formulario directo -->
+            <app-form-view />
+          }
+        }
+      }
+    } @else {
+      <app-empty-state
+        title="Recurso no encontrado"
+        message="No existe un schema con ese id en el registry."
+      />
+    }
+  `
+		}]
+	}],
+	ctorParameters: () => []
+});
+var ViewSlot = class ViewSlot {
+	schema = input.required(...ngDevMode ? [{ debugName: "schema" }] : /* istanbul ignore next */ []);
+	node = input.required(...ngDevMode ? [{ debugName: "node" }] : /* istanbul ignore next */ []);
+	parentInstanceId = input.required(...ngDevMode ? [{ debugName: "parentInstanceId" }] : /* istanbul ignore next */ []);
+	depth = input(0, ...ngDevMode ? [{ debugName: "depth" }] : /* istanbul ignore next */ []);
+	status = signal("loading", ...ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []);
+	error = signal(null, ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
+	payload = signal(null, ...ngDevMode ? [{ debugName: "payload" }] : /* istanbul ignore next */ []);
+	nav = inject(ViewNavigationService);
+	envInjector = inject(EnvironmentInjector);
+	ancla = viewChild("host", {
+		...ngDevMode ? { debugName: "ancla" } : /* istanbul ignore next */ {},
+		read: ViewContainerRef
+	});
+	epoch = 0;
+	pendiente = null;
+	constructor() {
+		effect(() => this.monar());
+		effect(() => {
+			if (this.status() !== "ready") return;
+			const pend = this.pendiente;
+			let ancla;
+			try {
+				ancla = this.ancla();
+			} catch {
+				ancla = void 0;
+			}
+			if (!pend || !ancla) return;
+			this.pendiente = null;
+			ancla.clear();
+			ancla.createComponent(pend.tipo, { injector: pend.injector });
+		});
+	}
+	async monar() {
+		const esquema = this.schema();
+		const nodo = this.node();
+		if (!esquema || !nodo) return;
+		const turno = ++this.epoch;
+		this.pendiente = null;
+		if (this.depth() > 3) {
+			this.error.set(/* @__PURE__ */ new Error(`Límite de profundidad de composición excedido (3) en ${esquema.id}.${nodo.id}`));
+			this.status.set("error");
+			return;
+		}
+		const resuelto = "ref" in nodo ? esquema.uiViews?.[nodo.ref] : nodo;
+		if (resuelto === void 0) {
+			const ref = "ref" in nodo ? nodo.ref : nodo.id;
+			this.error.set(/* @__PURE__ */ new Error(`Referencia '${ref}' inexistente en ${esquema.id}`));
+			this.status.set("error");
+			return;
+		}
+		const descriptor = get("view", resuelto.type);
+		if (!descriptor) {
+			this.error.set(/* @__PURE__ */ new Error(`No existe descriptor kind:view type '${resuelto.type}' en ${esquema.id}`));
+			this.status.set("error");
+			return;
+		}
+		const instanceId = instanceIdFor(this.parentInstanceId(), nodo.id);
+		const select = "ref" in nodo ? resuelto.select : nodo.select;
+		const virtual = virtualSchemaFor(esquema, instanceId, resuelto);
+		const emit = select?.mode === "route" ? (event) => {
+			this.nav.dispatch(select, event);
+		} : void 0;
+		this.payload.set(createViewContext({
+			schema: virtual,
+			resourceId: esquema.id,
+			uiView: instanceId,
+			viewType: resuelto.type,
+			depth: this.depth(),
+			...select !== void 0 ? { select } : {}
+		}, emit));
+		this.error.set(null);
+		this.status.set("loading");
+		const injector = Injector.create({
+			providers: [{
+				provide: ActivatedRoute,
+				useValue: syntheticRoute(this.payload())
+			}],
+			parent: this.envInjector
+		});
+		try {
+			const tipo = await descriptor.load();
+			if (turno !== this.epoch) return;
+			this.pendiente = {
+				tipo,
+				injector
+			};
+			this.status.set("ready");
+		} catch (e) {
+			if (turno !== this.epoch) return;
+			this.error.set(e);
+			this.status.set("error");
+		}
+	}
+	mensaje() {
+		const e = this.error();
+		return e instanceof Error ? e.message : String(e);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: ViewSlot,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: ViewSlot,
+		isStandalone: true,
+		selector: "app-view-slot",
+		inputs: {
+			schema: {
+				classPropertyName: "schema",
+				publicName: "schema",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			node: {
+				classPropertyName: "node",
+				publicName: "node",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			parentInstanceId: {
+				classPropertyName: "parentInstanceId",
+				publicName: "parentInstanceId",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			depth: {
+				classPropertyName: "depth",
+				publicName: "depth",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		viewQueries: [{
+			propertyName: "ancla",
+			first: true,
+			predicate: ["host"],
+			descendants: true,
+			read: ViewContainerRef,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    @if (status() === 'loading') {
+      <div role="status" class="p-3 text-sm text-neutral">Cargando…</div>
+    } @else if (status() === 'error') {
+      <app-empty-state title="No se pudo mostrar esta vista" [message]="mensaje()" />
+    } @else {
+      <div #host></div>
+    }
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: EmptyState,
+			selector: "app-empty-state",
+			inputs: ["title", "message"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: ViewSlot,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-view-slot",
+			standalone: true,
+			imports: [EmptyState],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `
+    @if (status() === 'loading') {
+      <div role="status" class="p-3 text-sm text-neutral">Cargando…</div>
+    } @else if (status() === 'error') {
+      <app-empty-state title="No se pudo mostrar esta vista" [message]="mensaje()" />
+    } @else {
+      <div #host></div>
+    }
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		schema: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "schema",
+				required: true
+			}]
+		}],
+		node: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "node",
+				required: true
+			}]
+		}],
+		parentInstanceId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "parentInstanceId",
+				required: true
+			}]
+		}],
+		depth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "depth",
+				required: false
+			}]
+		}],
+		ancla: [{
+			type: i0.ViewChild,
+			args: ["host", {
+				read: ViewContainerRef,
+				isSignal: true
+			}]
+		}]
+	}
+});
+var composer_host_exports = /* @__PURE__ */ __exportAll({ ComposerHost: () => ComposerHost });
+var ComposerHost = class ComposerHost {
+	route = inject(ActivatedRoute);
+	routeData = toSignal(this.route.data, { requireSync: true });
+	schema = computed(() => {
+		const data = this.routeData();
+		const explicit = data["schema"];
+		if (explicit !== void 0) return explicit;
+		const resourceId = data["resourceId"];
+		return typeof resourceId === "string" ? getSchema(resourceId) : void 0;
+	}, ...ngDevMode ? [{ debugName: "schema" }] : /* istanbul ignore next */ []);
+	uiViewName = computed(() => {
+		const v = this.routeData()["uiView"];
+		return typeof v === "string" ? v : "";
+	}, ...ngDevMode ? [{ debugName: "uiViewName" }] : /* istanbul ignore next */ []);
+	profundidad = computed(() => {
+		const d = this.routeData()["depth"];
+		return typeof d === "number" ? d : 0;
+	}, ...ngDevMode ? [{ debugName: "profundidad" }] : /* istanbul ignore next */ []);
+	vista = computed(() => {
+		const schema = this.schema();
+		const nombre = this.uiViewName();
+		if (schema === void 0 || nombre === "") return void 0;
+		const vista = schema.uiViews?.[nombre];
+		return vista !== void 0 && "config" in vista && vista.type === "tabs" ? vista : void 0;
+	}, ...ngDevMode ? [{ debugName: "vista" }] : /* istanbul ignore next */ []);
+	errorConfig = computed(() => {
+		const data = this.routeData();
+		const schema = this.schema();
+		const nombre = this.uiViewName();
+		if (schema === void 0) return `Schema no encontrado para '${String(data["resourceId"] ?? "")}'`;
+		if (nombre === "") return "Ruta de composición sin uiView declarada";
+		const vista = schema.uiViews?.[nombre];
+		if (vista === void 0) return `Vista '${nombre}' no declarada en ${schema.id}`;
+		if (vista.type !== "tabs") return `Configuración inválida: ${schema.id}.${nombre} declara '${vista.type}', no es una vista tabs`;
+		return null;
+	}, ...ngDevMode ? [{ debugName: "errorConfig" }] : /* istanbul ignore next */ []);
+	errorValidacion = signal(null, ...ngDevMode ? [{ debugName: "errorValidacion" }] : /* istanbul ignore next */ []);
+	error = computed(() => this.errorValidacion() ?? this.errorConfig(), ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
+	hijos = computed(() => this.vista()?.config.children ?? [], ...ngDevMode ? [{ debugName: "hijos" }] : /* istanbul ignore next */ []);
+	visibles = computed(() => this.hijos().filter((h) => h.visibleWhen === void 0 || h.visibleWhen.every((cond) => evaluateCondition(cond, {}, {}))), ...ngDevMode ? [{ debugName: "visibles" }] : /* istanbul ignore next */ []);
+	seleccion = signal("", ...ngDevMode ? [{ debugName: "seleccion" }] : /* istanbul ignore next */ []);
+	activo = computed(() => {
+		const vis = this.visibles();
+		if (vis.length === 0) return "";
+		const sel = this.seleccion();
+		if (vis.some((h) => h.id === sel)) return sel;
+		const inicial = this.vista()?.config.initial;
+		return inicial !== void 0 && vis.some((h) => h.id === inicial) ? inicial : vis[0].id;
+	}, ...ngDevMode ? [{ debugName: "activo" }] : /* istanbul ignore next */ []);
+	visitados = signal(/* @__PURE__ */ new Set(), ...ngDevMode ? [{ debugName: "visitados" }] : /* istanbul ignore next */ []);
+	montados = computed(() => {
+		const visibles = new Set(this.visibles().map((h) => h.id));
+		const activo = this.activo();
+		const visitados = this.visitados();
+		return this.hijos().filter((h) => visibles.has(h.id) && (h.id === activo || h.retain === true && visitados.has(h.id)));
+	}, ...ngDevMode ? [{ debugName: "montados" }] : /* istanbul ignore next */ []);
+	constructor() {
+		const schema = this.schema();
+		if (schema !== void 0) try {
+			validateComposition(schema);
+		} catch (e) {
+			this.errorValidacion.set(e instanceof Error ? e.message : String(e));
+		}
+		const inicial = this.activo();
+		if (inicial !== "") this.visitados.set(/* @__PURE__ */ new Set([inicial]));
+	}
+	seleccionar(id, conFoco) {
+		this.seleccion.set(id);
+		this.visitados.update((v) => new Set(v).add(id));
+		if (conFoco) setTimeout(() => document.getElementById(`tab-${id}`)?.focus(), 0);
+	}
+	onKeydown(event) {
+		const vis = this.visibles();
+		if (vis.length === 0) return;
+		const i = vis.findIndex((h) => h.id === this.activo());
+		let next = -1;
+		if (event.key === "ArrowRight") next = (i + 1) % vis.length;
+		else if (event.key === "ArrowLeft") next = (i - 1 + vis.length) % vis.length;
+		else if (event.key === "Home") next = 0;
+		else if (event.key === "End") next = vis.length - 1;
+		if (next < 0) return;
+		event.preventDefault();
+		this.seleccionar(vis[next].id, true);
+	}
+	montado(id) {
+		return this.montados().some((h) => h.id === id);
+	}
+	claseTab(id) {
+		const base = "rounded-t-lg px-3 py-2 text-sm transition-colors focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary";
+		return id === this.activo() ? `${base} bg-primary/10 font-medium text-primary` : `${base} text-neutral hover:text-primary`;
+	}
+	etiqueta() {
+		return this.schema()?.labelPlural ?? "Secciones";
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: ComposerHost,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: ComposerHost,
+		isStandalone: true,
+		selector: "app-composer-host",
+		ngImport: i0,
+		template: `
+    @if (error() !== null) {
+      <app-empty-state title="Composición no disponible" [message]="error()!" />
+    } @else if (visibles().length === 0) {
+      <app-empty-state
+        title="Sin secciones disponibles"
+        message="La vista no declara secciones visibles."
+      />
+    } @else {
+      <div
+        role="tablist"
+        class="flex flex-wrap gap-1 border-b border-neutral/20 px-1"
+        [attr.aria-label]="etiqueta()"
+        (keydown)="onKeydown($event)"
+      >
+        @for (h of visibles(); track h.id) {
+          <button
+            type="button"
+            role="tab"
+            [id]="'tab-' + h.id"
+            [attr.aria-selected]="h.id === activo()"
+            [attr.aria-controls]="montado(h.id) ? 'panel-' + h.id : null"
+            [attr.tabindex]="h.id === activo() ? 0 : -1"
+            [class]="claseTab(h.id)"
+            (click)="seleccionar(h.id, true)"
+          >
+            {{ h.label }}
+          </button>
+        }
+      </div>
+
+      @for (h of montados(); track h.id) {
+        <div
+          role="tabpanel"
+          [id]="'panel-' + h.id"
+          [attr.aria-labelledby]="'tab-' + h.id"
+          [class.hidden]="h.id !== activo()"
+          class="py-3 focus:outline-none"
+          tabindex="0"
+        >
+          <app-view-slot
+            [schema]="schema()!"
+            [node]="h"
+            [parentInstanceId]="uiViewName()"
+            [depth]="profundidad() + 1"
+          />
+        </div>
+      }
+    }
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: ViewSlot,
+			selector: "app-view-slot",
+			inputs: [
+				"schema",
+				"node",
+				"parentInstanceId",
+				"depth"
+			]
+		}, {
+			kind: "component",
+			type: EmptyState,
+			selector: "app-empty-state",
+			inputs: ["title", "message"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: ComposerHost,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-composer-host",
+			standalone: true,
+			imports: [ViewSlot, EmptyState],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `
+    @if (error() !== null) {
+      <app-empty-state title="Composición no disponible" [message]="error()!" />
+    } @else if (visibles().length === 0) {
+      <app-empty-state
+        title="Sin secciones disponibles"
+        message="La vista no declara secciones visibles."
+      />
+    } @else {
+      <div
+        role="tablist"
+        class="flex flex-wrap gap-1 border-b border-neutral/20 px-1"
+        [attr.aria-label]="etiqueta()"
+        (keydown)="onKeydown($event)"
+      >
+        @for (h of visibles(); track h.id) {
+          <button
+            type="button"
+            role="tab"
+            [id]="'tab-' + h.id"
+            [attr.aria-selected]="h.id === activo()"
+            [attr.aria-controls]="montado(h.id) ? 'panel-' + h.id : null"
+            [attr.tabindex]="h.id === activo() ? 0 : -1"
+            [class]="claseTab(h.id)"
+            (click)="seleccionar(h.id, true)"
+          >
+            {{ h.label }}
+          </button>
+        }
+      </div>
+
+      @for (h of montados(); track h.id) {
+        <div
+          role="tabpanel"
+          [id]="'panel-' + h.id"
+          [attr.aria-labelledby]="'tab-' + h.id"
+          [class.hidden]="h.id !== activo()"
+          class="py-3 focus:outline-none"
+          tabindex="0"
+        >
+          <app-view-slot
+            [schema]="schema()!"
+            [node]="h"
+            [parentInstanceId]="uiViewName()"
+            [depth]="profundidad() + 1"
+          />
+        </div>
+      }
+    }
+  `
+		}]
+	}],
+	ctorParameters: () => []
+});
+var ConfirmDialog = class ConfirmDialog {
+	options = input(null, ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
+	danger = input(false, ...ngDevMode ? [{ debugName: "danger" }] : /* istanbul ignore next */ []);
+	confirmed = output();
+	cancelled = output();
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: ConfirmDialog,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: ConfirmDialog,
+		isStandalone: true,
+		selector: "app-confirm-dialog",
+		inputs: {
+			options: {
+				classPropertyName: "options",
+				publicName: "options",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			danger: {
+				classPropertyName: "danger",
+				publicName: "danger",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			confirmed: "confirmed",
+			cancelled: "cancelled"
+		},
+		ngImport: i0,
+		template: `
+    @if (options(); as opts) {
+      <app-modal [open]="true" [title]="opts.title" (close)="cancelled.emit()">
+        <p class="text-sm text-neutral">{{ opts.message }}</p>
+        <div class="mt-6 flex justify-end gap-3">
+          <button app-button variant="outline" type="button" (click)="cancelled.emit()">
+            {{ opts.cancelLabel ?? 'Cancel' }}
+          </button>
+          <button
+            app-button
+            type="button"
+            [variant]="danger() ? 'danger' : 'primary'"
+            (click)="confirmed.emit()"
+          >
+            {{ opts.confirmLabel ?? 'Confirm' }}
+          </button>
+        </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"
+			]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: ConfirmDialog,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-confirm-dialog",
+			imports: [Modal, Button],
+			template: `
+    @if (options(); as opts) {
+      <app-modal [open]="true" [title]="opts.title" (close)="cancelled.emit()">
+        <p class="text-sm text-neutral">{{ opts.message }}</p>
+        <div class="mt-6 flex justify-end gap-3">
+          <button app-button variant="outline" type="button" (click)="cancelled.emit()">
+            {{ opts.cancelLabel ?? 'Cancel' }}
+          </button>
+          <button
+            app-button
+            type="button"
+            [variant]="danger() ? 'danger' : 'primary'"
+            (click)="confirmed.emit()"
+          >
+            {{ opts.confirmLabel ?? 'Confirm' }}
+          </button>
+        </div>
+      </app-modal>
+    }
+  `
+		}]
+	}],
+	propDecorators: {
+		options: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "options",
+				required: false
+			}]
+		}],
+		danger: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "danger",
+				required: false
+			}]
+		}],
+		confirmed: [{
+			type: i0.Output,
+			args: ["confirmed"]
+		}],
+		cancelled: [{
+			type: i0.Output,
+			args: ["cancelled"]
+		}]
+	}
+});
+var Toast = class Toast {
+	toasts = input([], ...ngDevMode ? [{ debugName: "toasts" }] : /* istanbul ignore next */ []);
+	closeLabel = input("Cerrar", ...ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []);
+	dismissed = output();
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: Toast,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: Toast,
+		isStandalone: true,
+		selector: "app-toast",
+		inputs: {
+			toasts: {
+				classPropertyName: "toasts",
+				publicName: "toasts",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closeLabel: {
+				classPropertyName: "closeLabel",
+				publicName: "closeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { dismissed: "dismissed" },
+		host: {
+			attributes: {
+				"role": "status",
+				"aria-live": "polite"
+			},
+			classAttribute: "pointer-events-none fixed right-4 top-4 z-50 flex w-full max-w-sm flex-col gap-2"
+		},
+		ngImport: i0,
+		template: `
+    @for (toast of toasts(); track toast.id) {
+      <div
+        class="pointer-events-auto flex items-start gap-3 border-l-4 bg-surface-raised p-4 shadow-lg"
+        [class.border-l-success]="toast.kind === 'success'"
+        [class.border-l-danger]="toast.kind === 'error'"
+        [class.border-l-primary]="toast.kind === 'info'"
+      >
+        @if (toast.kind === 'success') {
+          <svg lucideCircleCheck size="18" class="mt-0.5 shrink-0 text-success" />
+        } @else if (toast.kind === 'error') {
+          <svg lucideCircleX size="18" class="mt-0.5 shrink-0 text-danger" />
+        } @else {
+          <svg lucideInfo size="18" class="mt-0.5 shrink-0 text-primary" />
+        }
+        <p class="flex-1 text-sm font-medium">{{ toast.message }}</p>
+        <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)="dismissed.emit(toast.id)"
+        >
+          <svg lucideX size="18" />
+        </button>
+      </div>
+    }
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "component",
+				type: LucideCircleCheck,
+				selector: "svg[lucideCircleCheck], svg[lucideCheckCircle2]"
+			},
+			{
+				kind: "component",
+				type: LucideCircleX,
+				selector: "svg[lucideCircleX], svg[lucideXCircle]"
+			},
+			{
+				kind: "component",
+				type: LucideInfo,
+				selector: "svg[lucideInfo]"
+			},
+			{
+				kind: "component",
+				type: LucideX,
+				selector: "svg[lucideX]"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: Toast,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-toast",
+			imports: [
+				LucideCircleCheck,
+				LucideCircleX,
+				LucideInfo,
+				LucideX
+			],
+			host: {
+				class: "pointer-events-none fixed right-4 top-4 z-50 flex w-full max-w-sm flex-col gap-2",
+				role: "status",
+				"aria-live": "polite"
+			},
+			template: `
+    @for (toast of toasts(); track toast.id) {
+      <div
+        class="pointer-events-auto flex items-start gap-3 border-l-4 bg-surface-raised p-4 shadow-lg"
+        [class.border-l-success]="toast.kind === 'success'"
+        [class.border-l-danger]="toast.kind === 'error'"
+        [class.border-l-primary]="toast.kind === 'info'"
+      >
+        @if (toast.kind === 'success') {
+          <svg lucideCircleCheck size="18" class="mt-0.5 shrink-0 text-success" />
+        } @else if (toast.kind === 'error') {
+          <svg lucideCircleX size="18" class="mt-0.5 shrink-0 text-danger" />
+        } @else {
+          <svg lucideInfo size="18" class="mt-0.5 shrink-0 text-primary" />
+        }
+        <p class="flex-1 text-sm font-medium">{{ toast.message }}</p>
+        <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)="dismissed.emit(toast.id)"
+        >
+          <svg lucideX size="18" />
+        </button>
+      </div>
+    }
+  `
+		}]
+	}],
+	propDecorators: {
+		toasts: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "toasts",
+				required: false
+			}]
+		}],
+		closeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeLabel",
+				required: false
+			}]
+		}],
+		dismissed: [{
+			type: i0.Output,
+			args: ["dismissed"]
+		}]
+	}
+});
+export { API_URL, ApiError, ApiService, AuthService, COLUMN_FORMAT_TYPES, ComposerHost, ConfirmDialog, Dashboard, DataSourceService, ErrorMapperService, FieldHost, FormView, GAS_SCHEMAS, ListView, Login, MAX_DEPTH, NotificationService, ResourcePage, SESSION_TOKEN_KEY, SESSION_USER_KEY, SUPPORTED_FIELD_TYPE_LIST, SchemaCompositionError, Sidebar, Toast, UploadService, actionType, actionTypes, actionsFor, allSchemas, apiErrorInterceptor, authGuard, buildFormSchema, buildPayload, childTree, columnFormatDescriptors, fieldDescriptors, getAction, getAuth, get as getRenderDescriptor, getSchema, groupTree, interpolateTemplate, isSupported as isRenderSupported, isSupported, isShareAction, isTriggerAction, itemTree, layoutDescriptors, listTree, resource_page_exports as n, provideGasAdmin, provideRenderDescriptors, registerAction, register as registerRenderDescriptor, renderKinds, renewedTokenOf, resolveShare, resourceRoutes, seedModel, setSchemaCatalog, shellRoutes, stringItemTree, composer_host_exports as t, unregister as unregisterRenderDescriptor, validateComposition, viewDescriptors };
+
+//# sourceMappingURL=tinya-code-gas-admin-ui.mjs.map