@xsmusices/ui 1.41.0 → 1.42.0

package/fesm2022/xsmusices-ui-xs-formly.xsstory-Bjne7mpZ.mjs

@@ -0,0 +1,3453 @@
+import { of } from 'rxjs';
+import { XSFormlyComponent } from './xsmusices-ui.mjs';
+
+const story = {
+    id: 'formly',
+    name: 'Formly',
+    type: 'component',
+    subtype: 'Base',
+    status: 'active',
+    usage: ['app', 'admin'],
+    updated: '2026-04-25T12:00:00.000Z',
+    created: '2026-04-23T00:00:00.000Z',
+    description: 'Wrapper base para usar Formly con componentes XS en la librería de UI.',
+    component: XSFormlyComponent,
+    notes: [
+        {
+            type: 'info',
+            date: '2026-04-25T12:00:00.000Z',
+            text: 'Los ejemplos de este story están basados en archivos reales de Formly de la app, no en demos ficticios.',
+        },
+    ],
+    selector: 'xs-formly',
+    multilanguage: true,
+    inputs: [
+        {
+            key: 'layout',
+            label: 'Layout del formulario',
+            type: 'text',
+            default: 'grid',
+        },
+        {
+            key: 'gridClass',
+            label: 'Clases de grid',
+            type: 'text',
+            default: 'grid w-full gap-4 grid-cols-1 lg:grid-cols-12',
+        },
+        {
+            key: 'fields',
+            label: 'Configuración de campos',
+            type: 'json',
+            default: [
+                {
+                    key: 'name',
+                    type: 'input',
+                    props: {
+                        label: 'Nombre',
+                        placeholder: 'Introduce tu nombre',
+                        required: true,
+                    },
+                },
+            ],
+        },
+        {
+            key: 'model',
+            label: 'Modelo del formulario',
+            type: 'json',
+            default: {},
+        },
+        {
+            key: 'size',
+            label: 'Tamaño del formulario',
+            type: 'text',
+            default: 'normal',
+        },
+    ],
+    examples: [
+        {
+            name: '[APP] Onboarding',
+            description: 'Formulario de bienvenida usado para que los nuevos usuarios elijan su perfil y estilos.',
+            inputs: {
+                model: {
+                    name: '',
+                    type: '',
+                    country: '',
+                    region: '',
+                    favoriteStyles: [],
+                },
+                fields: [
+                    {
+                        key: 'name',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Nombre',
+                            placeholder: 'Introduce tu nombre',
+                            required: true,
+                        },
+                    },
+                    {
+                        key: 'type',
+                        type: 'select-button',
+                        className: 'col-span-12',
+                        props: {
+                            card: true,
+                            required: true,
+                            label: 'Tipo de usuario',
+                            placeholder: 'Selecciona tu perfil',
+                            options: [
+                                {
+                                    label: 'Normal',
+                                    value: 'NORMAL',
+                                    image: '/assets/images/onboarding/user-normal.webp',
+                                },
+                                {
+                                    label: 'Artista',
+                                    value: 'ARTIST',
+                                    image: '/assets/images/onboarding/user-artist.webp',
+                                },
+                                {
+                                    label: 'Promotor',
+                                    value: 'PROMOTER',
+                                    image: '/assets/images/onboarding/user-promoter.webp',
+                                },
+                                {
+                                    label: 'Record Label',
+                                    value: 'RECORD_LABEL',
+                                    image: '/assets/images/onboarding/user-label.webp',
+                                },
+                                {
+                                    label: 'Site Manager',
+                                    value: 'SITE_MANAGER',
+                                    image: '/assets/images/onboarding/user-site.webp',
+                                },
+                                {
+                                    label: 'Manager',
+                                    value: 'MANAGER',
+                                    image: '/assets/images/onboarding/user-manager.webp',
+                                },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'country',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-4',
+                        props: {
+                            label: 'País',
+                            placeholder: 'Selecciona país',
+                            country: true,
+                            hasSearch: true,
+                            options: [
+                                { code: 'ES', name: 'España', nameEn: 'Spain' },
+                                {
+                                    code: 'DE',
+                                    name: 'Alemania',
+                                    nameEn: 'Germany',
+                                },
+                                {
+                                    code: 'FR',
+                                    name: 'Francia',
+                                    nameEn: 'France',
+                                },
+                                { code: 'IT', name: 'Italia', nameEn: 'Italy' },
+                                {
+                                    code: 'UK',
+                                    name: 'Reino Unido',
+                                    nameEn: 'United Kingdom',
+                                },
+                                {
+                                    code: 'NL',
+                                    name: 'Países Bajos',
+                                    nameEn: 'Netherlands',
+                                },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'region',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-4',
+                        props: {
+                            label: 'Región',
+                            placeholder: 'Selecciona región',
+                            options: [
+                                {
+                                    _id: 'berlin',
+                                    name: 'Berlín',
+                                    nameEn: 'Berlin',
+                                },
+                                {
+                                    _id: 'barcelona',
+                                    name: 'Barcelona',
+                                    nameEn: 'Barcelona',
+                                },
+                                {
+                                    _id: 'amsterdam',
+                                    name: 'Ámsterdam',
+                                    nameEn: 'Amsterdam',
+                                },
+                                {
+                                    _id: 'london',
+                                    name: 'Londres',
+                                    nameEn: 'London',
+                                },
+                            ],
+                        },
+                        hideExpression: '!model.country',
+                    },
+                    {
+                        key: 'favoriteStyles',
+                        type: 'select-button',
+                        className: 'col-span-12',
+                        props: {
+                            required: false,
+                            multi: true,
+                            maxSelections: 5,
+                            size: 'sm',
+                            showMoreLimit: 12,
+                            label: 'Estilos favoritos',
+                            placeholder: 'Elige hasta 5 estilos para personalizar tu perfil',
+                            options: [
+                                { label: 'Techno', value: 'techno' },
+                                { label: 'House', value: 'house' },
+                                { label: 'Tech House', value: 'tech-house' },
+                                { label: 'Minimal', value: 'minimal' },
+                                { label: 'Hard Techno', value: 'hard-techno' },
+                                { label: 'Deep House', value: 'deep-house' },
+                                {
+                                    label: 'Melodic Techno',
+                                    value: 'melodic-techno',
+                                },
+                                { label: 'Acid', value: 'acid' },
+                                { label: 'Disco', value: 'disco' },
+                                { label: 'Trance', value: 'trance' },
+                                { label: 'Indie Dance', value: 'indie-dance' },
+                                { label: 'Hardstyle', value: 'hardstyle' },
+                                { label: 'Ambient', value: 'ambient' },
+                                { label: 'Progressive', value: 'progressive' },
+                                {
+                                    label: 'Tech House Classics',
+                                    value: 'tech-house-classics',
+                                },
+                                {
+                                    label: 'Melodic House',
+                                    value: 'melodic-house',
+                                },
+                            ],
+                        },
+                    },
+                ],
+            },
+        },
+        {
+            name: '[APP] Login',
+            description: 'Formulario real de login usando el mismo layout y campos que se emplea en la app.',
+            inputs: {
+                fields: [
+                    {
+                        key: 'email',
+                        type: 'input',
+                        className: 'col-span-12',
+                        props: {
+                            label: 'Email',
+                            placeholder: 'Introduce tu email',
+                            type: 'email',
+                            required: true,
+                        },
+                    },
+                    {
+                        key: 'password',
+                        type: 'input',
+                        className: 'col-span-12',
+                        props: {
+                            label: 'Contraseña',
+                            placeholder: 'Introduce tu contraseña',
+                            type: 'password',
+                            required: true,
+                            infoText: 'La contraseña debe tener al menos 8 caracteres, incluyendo mayúsculas, minúsculas y números.',
+                        },
+                    },
+                ],
+            },
+        },
+        {
+            name: '[APP] Registro',
+            description: 'Formulario real de registro con los campos usados en la app.',
+            inputs: {
+                fields: [
+                    {
+                        key: 'name',
+                        type: 'input',
+                        className: 'col-span-12',
+                        props: {
+                            label: 'Nombre',
+                            placeholder: 'Introduce tu nombre',
+                            required: true,
+                        },
+                    },
+                    {
+                        key: 'email',
+                        type: 'input',
+                        className: 'col-span-12',
+                        props: {
+                            label: 'Email',
+                            placeholder: 'Introduce tu email',
+                            type: 'email',
+                            required: true,
+                        },
+                    },
+                    {
+                        key: 'password',
+                        type: 'input',
+                        className: 'col-span-12',
+                        props: {
+                            label: 'Contraseña',
+                            placeholder: 'Introduce tu contraseña',
+                            type: 'password',
+                            required: true,
+                        },
+                    },
+                    {
+                        key: 'confirmPassword',
+                        type: 'input',
+                        className: 'col-span-12',
+                        props: {
+                            label: 'Confirmar contraseña',
+                            placeholder: 'Repite tu contraseña',
+                            type: 'password',
+                            required: true,
+                        },
+                        validators: {
+                            fieldMatch: {
+                                expression: (control) => !control.value ||
+                                    control.value ===
+                                        control.parent?.get('password')?.value,
+                                message: 'Las contraseñas no coinciden',
+                            },
+                        },
+                    },
+                    {
+                        key: 'legal',
+                        type: 'checkbox',
+                        className: 'col-span-12',
+                        props: {
+                            required: true,
+                            label: 'Acepto los Términos y Condiciones',
+                        },
+                    },
+                ],
+            },
+        },
+        {
+            name: '[APP] Recuperar contraseña',
+            description: 'Formulario real de recuperación con el campo de email usado en la app.',
+            inputs: {
+                fields: [
+                    {
+                        key: 'email',
+                        type: 'input',
+                        className: 'col-span-12',
+                        props: {
+                            label: 'Email',
+                            placeholder: 'Introduce tu email',
+                            type: 'email',
+                            required: true,
+                        },
+                    },
+                ],
+            },
+        },
+        {
+            name: '[APP] Álbum (real)',
+            description: 'Formulario de creación de álbum con nombre, tipo, año, estilos y selector de tracks.',
+            inputs: {
+                layout: 'stack',
+                model: {
+                    name: '',
+                    type: 'album',
+                    year: '',
+                    styles: [],
+                    items: [],
+                    info: '',
+                },
+                fields: [
+                    {
+                        key: 'name',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Nombre del álbum',
+                            placeholder: 'Introduce nombre',
+                            required: true,
+                        },
+                    },
+                    {
+                        key: 'type',
+                        type: 'select',
+                        defaultValue: 'album',
+                        className: 'col-span-12 lg:col-span-3',
+                        props: {
+                            label: 'Tipo',
+                            options: [
+                                { label: 'Álbum', value: 'album' },
+                                { label: 'LP', value: 'lp' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'year',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-3',
+                        props: {
+                            label: 'Año',
+                            type: 'number',
+                            placeholder: '2024',
+                        },
+                    },
+                    {
+                        key: 'styles',
+                        type: 'select-button',
+                        className: 'col-span-12',
+                        props: {
+                            options: [
+                                { value: 'techno', label: 'Techno' },
+                                { value: 'house', label: 'House' },
+                                { value: 'deep-house', label: 'Deep House' },
+                                { value: 'minimal', label: 'Minimal' },
+                                { value: 'hard-techno', label: 'Hard Techno' },
+                            ],
+                            multi: true,
+                            maxSelections: 5,
+                            size: 'sm',
+                            showMoreLimit: 12,
+                            label: 'Estilos',
+                            placeholder: 'Selecciona estilos',
+                        },
+                    },
+                    {
+                        key: 'items',
+                        type: 'entity-picker',
+                        className: 'col-span-12',
+                        props: {
+                            label: 'Tracks del álbum',
+                            typeItem: 'media',
+                            iconFallback: 'music',
+                            formatSecondary: (item) => {
+                                const artists = item['artists'];
+                                if (!artists?.length)
+                                    return '';
+                                const first = String(artists[0]['name'] ?? '');
+                                const rest = artists.length - 1;
+                                return rest > 0 ? `${first} +${rest}` : first;
+                            },
+                            onSearch: async (query) => {
+                                const allTracks = [
+                                    {
+                                        _id: '1',
+                                        name: 'Track Uno',
+                                        image: true,
+                                        artists: [{ name: 'Artista A' }],
+                                    },
+                                    {
+                                        _id: '2',
+                                        name: 'Track Dos',
+                                        image: true,
+                                        artists: [{ name: 'Artista B' }],
+                                    },
+                                    {
+                                        _id: '3',
+                                        name: 'Track Tres',
+                                        artists: [
+                                            { name: 'Artista A' },
+                                            { name: 'Artista C' },
+                                        ],
+                                    },
+                                    {
+                                        _id: '4',
+                                        name: 'Otro Track',
+                                        artists: [{ name: 'Artista D' }],
+                                    },
+                                ];
+                                return allTracks.filter((t) => t.name
+                                    .toLowerCase()
+                                    .includes(query.toLowerCase()));
+                            },
+                        },
+                    },
+                    {
+                        key: 'info',
+                        type: 'html-editor',
+                        className: 'col-span-12',
+                        props: {
+                            label: 'Información',
+                            placeholder: 'Describe el álbum',
+                        },
+                    },
+                ],
+            },
+        },
+        {
+            name: '[APP] Enviar artista',
+            description: 'Formulario de envío de artista con nombre, país, residencia, estilos, imagen, redes e info.',
+            inputs: {
+                layout: 'stack',
+                model: {
+                    name: '',
+                    country: '',
+                    countryResidence: '',
+                    styles: [],
+                    imageUpload: '',
+                    social: {
+                        soundcloud: '',
+                        instagram: '',
+                        twitter: '',
+                        web: '',
+                    },
+                    info: '',
+                },
+                fields: [
+                    {
+                        key: 'name',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Nombre',
+                            placeholder: 'Introduce nombre',
+                            required: true,
+                        },
+                    },
+                    {
+                        key: 'country',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-4',
+                        props: {
+                            label: 'País',
+                            placeholder: 'Selecciona país',
+                            country: true,
+                            hasSearch: true,
+                            options: [
+                                {
+                                    _id: 'es',
+                                    name: 'España',
+                                    nameEn: 'Spain',
+                                    code: 'ES',
+                                },
+                                {
+                                    _id: 'de',
+                                    name: 'Alemania',
+                                    nameEn: 'Germany',
+                                    code: 'DE',
+                                },
+                                {
+                                    _id: 'fr',
+                                    name: 'Francia',
+                                    nameEn: 'France',
+                                    code: 'FR',
+                                },
+                                {
+                                    _id: 'it',
+                                    name: 'Italia',
+                                    nameEn: 'Italy',
+                                    code: 'IT',
+                                },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'countryResidence',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-4',
+                        props: {
+                            label: 'País de residencia',
+                            placeholder: 'Selecciona país',
+                            country: true,
+                            hasSearch: true,
+                            options: [
+                                {
+                                    _id: 'es',
+                                    name: 'España',
+                                    nameEn: 'Spain',
+                                    code: 'ES',
+                                },
+                                {
+                                    _id: 'de',
+                                    name: 'Alemania',
+                                    nameEn: 'Germany',
+                                    code: 'DE',
+                                },
+                                {
+                                    _id: 'fr',
+                                    name: 'Francia',
+                                    nameEn: 'France',
+                                    code: 'FR',
+                                },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'styles',
+                        type: 'select-button',
+                        className: 'col-span-12',
+                        props: {
+                            options: [
+                                { value: 'techno', label: 'Techno' },
+                                { value: 'house', label: 'House' },
+                                { value: 'deep-house', label: 'Deep House' },
+                                { value: 'minimal', label: 'Minimal' },
+                            ],
+                            multi: true,
+                            maxSelections: 5,
+                            size: 'sm',
+                            showMoreLimit: 12,
+                            label: 'Estilos',
+                            placeholder: 'Selecciona estilos',
+                        },
+                    },
+                    {
+                        key: 'imageUpload',
+                        type: 'upload-image',
+                        className: 'col-span-12',
+                        props: { label: 'Imagen', required: true },
+                    },
+                    {
+                        key: 'social',
+                        type: 'social',
+                        className: 'col-span-12',
+                        props: { label: 'Redes sociales' },
+                    },
+                    {
+                        key: 'info',
+                        type: 'html-editor',
+                        className: 'col-span-12',
+                        props: {
+                            label: 'Información',
+                            placeholder: 'Introduce información',
+                        },
+                    },
+                ],
+            },
+        },
+        {
+            name: '[APP] Enviar evento',
+            description: 'Formulario de envío de evento con nombre, estilos, fechas, imagen, sitio, artistas e info.',
+            inputs: {
+                layout: 'stack',
+                model: {
+                    name: '',
+                    styles: [],
+                    date: '',
+                    dateEnd: '',
+                    imageUpload: '',
+                    site: '',
+                    artists: [],
+                    info: '',
+                },
+                fields: [
+                    {
+                        key: 'name',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Nombre',
+                            placeholder: 'Introduce nombre',
+                            required: true,
+                        },
+                    },
+                    {
+                        key: 'styles',
+                        type: 'select-button',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            options: [
+                                { value: 'techno', label: 'Techno' },
+                                { value: 'house', label: 'House' },
+                            ],
+                            multi: true,
+                            maxSelections: 5,
+                            size: 'sm',
+                            showMoreLimit: 12,
+                            label: 'Estilos',
+                            placeholder: 'Selecciona estilos',
+                        },
+                    },
+                    {
+                        key: 'date',
+                        type: 'datetime',
+                        className: 'col-span-12 lg:col-span-4',
+                        props: {
+                            label: 'Fecha inicio',
+                            placeholder: 'Selecciona fecha',
+                            required: true,
+                        },
+                    },
+                    {
+                        key: 'dateEnd',
+                        type: 'datetime',
+                        className: 'col-span-12 lg:col-span-4',
+                        props: {
+                            label: 'Fecha fin',
+                            placeholder: 'Selecciona fecha',
+                        },
+                    },
+                    {
+                        key: 'imageUpload',
+                        type: 'upload-image',
+                        className: 'col-span-12',
+                        props: { label: 'Imagen', required: true },
+                    },
+                    {
+                        key: 'site',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Sitio',
+                            placeholder: 'Selecciona sitio',
+                            subtype: 'site',
+                            remoteSearch: true,
+                            hasSearch: true,
+                            onSearch: async (query) => {
+                                const allSites = [
+                                    {
+                                        _id: 'site-1',
+                                        name: 'Club Alpha',
+                                        label: 'Club Alpha',
+                                    },
+                                    {
+                                        _id: 'site-2',
+                                        name: 'Festival Beta',
+                                        label: 'Festival Beta',
+                                    },
+                                ];
+                                return allSites.filter((s) => s.name
+                                    .toLowerCase()
+                                    .includes(query.toLowerCase()));
+                            },
+                            options: [
+                                { _id: 'site-1', name: 'Club Alpha' },
+                                { _id: 'site-2', name: 'Festival Beta' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'artists',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Artistas',
+                            placeholder: 'Selecciona artistas',
+                            subtype: 'artist',
+                            remoteSearch: true,
+                            multi: true,
+                            hasSearch: true,
+                            onSearch: async (query) => {
+                                const allArtists = [
+                                    {
+                                        _id: 'artist-1',
+                                        name: 'Anna Melodia',
+                                        label: 'Anna Melodia',
+                                    },
+                                    {
+                                        _id: 'artist-2',
+                                        name: 'Duo Beats',
+                                        label: 'Duo Beats',
+                                    },
+                                    {
+                                        _id: 'artist-3',
+                                        name: 'Luna Nova',
+                                        label: 'Luna Nova',
+                                    },
+                                ];
+                                return allArtists.filter((a) => a.name
+                                    .toLowerCase()
+                                    .includes(query.toLowerCase()));
+                            },
+                            options: [
+                                { _id: 'artist-1', name: 'Anna Melodia' },
+                                { _id: 'artist-2', name: 'Duo Beats' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'info',
+                        type: 'html-editor',
+                        className: 'col-span-12',
+                        props: {
+                            label: 'Información',
+                            placeholder: 'Introduce información',
+                        },
+                    },
+                ],
+            },
+        },
+        {
+            name: '[APP] Enviar música',
+            description: 'Formulario de envío de música con nombre, tipo, artistas, sitio, año, estilos, enlaces e info.',
+            inputs: {
+                layout: 'stack',
+                model: {
+                    name: '',
+                    type: '',
+                    artists: [],
+                    site: '',
+                    year: '',
+                    styles: [],
+                    sourceUrl: '',
+                    freeDownloadLink: '',
+                    buyLink: '',
+                    info: '',
+                },
+                fields: [
+                    {
+                        key: 'name',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Nombre',
+                            placeholder: 'Introduce nombre',
+                            required: true,
+                        },
+                    },
+                    {
+                        key: 'type',
+                        type: 'select',
+                        defaultValue: 'track',
+                        className: 'col-span-12 lg:col-span-3',
+                        props: {
+                            label: 'Tipo',
+                            options: [
+                                { value: 'track', label: 'Track' },
+                                { value: 'set', label: 'Set' },
+                                { value: 'podcast', label: 'Podcast' },
+                                { value: 'radioshow', label: 'Radioshow' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'artists',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-3',
+                        props: {
+                            label: 'Artistas',
+                            subtype: 'artist',
+                            remoteSearch: true,
+                            multi: true,
+                            hasSearch: true,
+                            onSearch: async (query) => {
+                                const allArtists = [
+                                    {
+                                        _id: 'artist-1',
+                                        name: 'Anna Melodia',
+                                        label: 'Anna Melodia',
+                                    },
+                                    {
+                                        _id: 'artist-2',
+                                        name: 'Duo Beats',
+                                        label: 'Duo Beats',
+                                    },
+                                ];
+                                return allArtists.filter((a) => a.name
+                                    .toLowerCase()
+                                    .includes(query.toLowerCase()));
+                            },
+                            options: [
+                                { _id: 'artist-1', name: 'Anna Melodia' },
+                                { _id: 'artist-2', name: 'Duo Beats' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'site',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Sitio',
+                            subtype: 'site',
+                            remoteSearch: true,
+                            hasSearch: true,
+                            onSearch: async (query) => {
+                                const allSites = [
+                                    {
+                                        _id: 'site-1',
+                                        name: 'Club Alpha',
+                                        label: 'Club Alpha',
+                                    },
+                                    {
+                                        _id: 'site-2',
+                                        name: 'Festival Beta',
+                                        label: 'Festival Beta',
+                                    },
+                                ];
+                                return allSites.filter((s) => s.name
+                                    .toLowerCase()
+                                    .includes(query.toLowerCase()));
+                            },
+                            options: [
+                                { _id: 'site-1', name: 'Club Alpha' },
+                                { _id: 'site-2', name: 'Festival Beta' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'year',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Año',
+                            type: 'number',
+                            placeholder: '2024',
+                        },
+                    },
+                    {
+                        key: 'styles',
+                        type: 'select-button',
+                        className: 'col-span-12',
+                        props: {
+                            options: [
+                                { value: 'techno', label: 'Techno' },
+                                { value: 'house', label: 'House' },
+                            ],
+                            multi: true,
+                            maxSelections: 5,
+                            size: 'sm',
+                            showMoreLimit: 12,
+                            label: 'Estilos',
+                            placeholder: 'Selecciona estilos',
+                        },
+                    },
+                    {
+                        key: 'sourceUrl',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-4',
+                        props: {
+                            label: 'URL',
+                            placeholder: 'URL de SoundCloud',
+                        },
+                    },
+                    {
+                        key: 'freeDownloadLink',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-4',
+                        props: {
+                            label: 'Descarga gratuita',
+                            placeholder: 'URL de descarga',
+                        },
+                    },
+                    {
+                        key: 'buyLink',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-4',
+                        props: {
+                            label: 'Comprar',
+                            placeholder: 'URL de compra',
+                        },
+                    },
+                    {
+                        key: 'info',
+                        type: 'html-editor',
+                        className: 'col-span-12',
+                        props: {
+                            label: 'Información',
+                            placeholder: 'Introduce información',
+                        },
+                    },
+                ],
+            },
+        },
+        {
+            name: '[APP] Enviar organización',
+            description: 'Formulario de envío de organización con nombre, tipo, país, estilos, fundadores, artistas e info.',
+            inputs: {
+                layout: 'stack',
+                model: {
+                    name: '',
+                    type: '',
+                    country: '',
+                    styles: [],
+                    founders: [],
+                    artists: [],
+                    info: '',
+                },
+                fields: [
+                    {
+                        key: 'name',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Nombre',
+                            placeholder: 'Introduce nombre',
+                            required: true,
+                        },
+                    },
+                    {
+                        key: 'type',
+                        type: 'select',
+                        defaultValue: 'label',
+                        className: 'col-span-12 lg:col-span-3',
+                        props: {
+                            label: 'Tipo',
+                            hasImage: false,
+                            options: [
+                                { value: 'label', label: 'Label' },
+                                { value: 'promoter', label: 'Promotor' },
+                                { value: 'collective', label: 'Colectivo' },
+                                { value: 'radioshow', label: 'Radioshow' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'country',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-4',
+                        props: {
+                            label: 'País',
+                            placeholder: 'Selecciona país',
+                            country: true,
+                            hasSearch: true,
+                            options: [
+                                {
+                                    _id: 'es',
+                                    name: 'España',
+                                    nameEn: 'Spain',
+                                    code: 'ES',
+                                },
+                                {
+                                    _id: 'de',
+                                    name: 'Alemania',
+                                    nameEn: 'Germany',
+                                    code: 'DE',
+                                },
+                                {
+                                    _id: 'fr',
+                                    name: 'Francia',
+                                    nameEn: 'France',
+                                    code: 'FR',
+                                },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'styles',
+                        type: 'select-button',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            options: [
+                                { value: 'techno', label: 'Techno' },
+                                { value: 'house', label: 'House' },
+                            ],
+                            multi: true,
+                            maxSelections: 5,
+                            size: 'sm',
+                            showMoreLimit: 12,
+                            label: 'Estilos',
+                            placeholder: 'Selecciona estilos',
+                        },
+                    },
+                    {
+                        key: 'founders',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Fundadores',
+                            subtype: 'artist',
+                            remoteSearch: true,
+                            multi: true,
+                            hasSearch: true,
+                            placeholder: 'Selecciona fundadores',
+                            onSearch: async (query) => {
+                                const allArtists = [
+                                    {
+                                        _id: 'artist-1',
+                                        name: 'Anna Melodia',
+                                        label: 'Anna Melodia',
+                                    },
+                                    {
+                                        _id: 'artist-2',
+                                        name: 'Duo Beats',
+                                        label: 'Duo Beats',
+                                    },
+                                ];
+                                return allArtists.filter((a) => a.name
+                                    .toLowerCase()
+                                    .includes(query.toLowerCase()));
+                            },
+                            options: [
+                                { _id: 'artist-1', name: 'Anna Melodia' },
+                                { _id: 'artist-2', name: 'Duo Beats' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'artists',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Artistas',
+                            subtype: 'artist',
+                            remoteSearch: true,
+                            multi: true,
+                            hasSearch: true,
+                            placeholder: 'Selecciona artistas',
+                            onSearch: async (query) => {
+                                const allArtists = [
+                                    {
+                                        _id: 'artist-1',
+                                        name: 'Anna Melodia',
+                                        label: 'Anna Melodia',
+                                    },
+                                    {
+                                        _id: 'artist-2',
+                                        name: 'Duo Beats',
+                                        label: 'Duo Beats',
+                                    },
+                                    {
+                                        _id: 'artist-3',
+                                        name: 'Luna Nova',
+                                        label: 'Luna Nova',
+                                    },
+                                ];
+                                return allArtists.filter((a) => a.name
+                                    .toLowerCase()
+                                    .includes(query.toLowerCase()));
+                            },
+                            options: [
+                                { _id: 'artist-1', name: 'Anna Melodia' },
+                                { _id: 'artist-2', name: 'Duo Beats' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'info',
+                        type: 'html-editor',
+                        className: 'col-span-12',
+                        props: {
+                            label: 'Información',
+                            placeholder: 'Introduce información',
+                        },
+                    },
+                ],
+            },
+        },
+        {
+            name: '[APP] Enviar sitio',
+            description: 'Formulario de envío de sitio con nombre, tipo, dirección, coordenadas, estilos, capacidad, redes e info.',
+            inputs: {
+                layout: 'stack',
+                model: {
+                    name: '',
+                    type: '',
+                    address: {
+                        street: '',
+                        town: '',
+                        country: '',
+                        region: '',
+                        coordinates: [],
+                    },
+                    styles: [],
+                    capacity: '',
+                    social: {
+                        soundcloud: '',
+                        instagram: '',
+                        twitter: '',
+                        website: '',
+                    },
+                    info: '',
+                },
+                fields: [
+                    {
+                        key: 'name',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Nombre',
+                            placeholder: 'Introduce nombre',
+                            required: true,
+                        },
+                    },
+                    {
+                        key: 'type',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Tipo de sitio',
+                            options: [
+                                { value: 'club', label: 'Club' },
+                                { value: 'festival', label: 'Festival' },
+                                { value: 'bar', label: 'Bar' },
+                            ],
+                            required: true,
+                        },
+                    },
+                    {
+                        key: 'address',
+                        type: 'address-search',
+                        className: 'col-span-12',
+                        props: {
+                            label: 'Dirección',
+                            placeholder: 'Buscar dirección...',
+                            required: true,
+                            countries: [
+                                { _id: 'es', name: 'España', code: 'ES' },
+                                { _id: 'de', name: 'Alemania', code: 'DE' },
+                                { _id: 'fr', name: 'Francia', code: 'FR' },
+                                { _id: 'it', name: 'Italia', code: 'IT' },
+                            ],
+                            searchFn: (q) => {
+                                const all = [
+                                    {
+                                        label: 'Calle Gran Vía 1, Madrid, España',
+                                        street: 'Calle Gran Vía 1',
+                                        town: 'Madrid',
+                                        countryCode: 'es',
+                                        lat: 40.4168,
+                                        lng: -3.7038,
+                                    },
+                                    {
+                                        label: 'Calle Serrano 10, Madrid, España',
+                                        street: 'Calle Serrano 10',
+                                        town: 'Madrid',
+                                        countryCode: 'es',
+                                        lat: 40.4278,
+                                        lng: -3.6863,
+                                    },
+                                    {
+                                        label: 'Paseo de Gracia 20, Barcelona, España',
+                                        street: 'Paseo de Gracia 20',
+                                        town: 'Barcelona',
+                                        countryCode: 'es',
+                                        lat: 41.3874,
+                                        lng: 2.1686,
+                                    },
+                                    {
+                                        label: 'Alexanderplatz 1, Berlín, Alemania',
+                                        street: 'Alexanderplatz 1',
+                                        town: 'Berlín',
+                                        countryCode: 'de',
+                                        lat: 52.52,
+                                        lng: 13.405,
+                                    },
+                                ];
+                                return of(all.filter((s) => s.label
+                                    .toLowerCase()
+                                    .includes(q.toLowerCase())));
+                            },
+                            geocodeFn: (addr) => of({
+                                street: addr.split(',')[0] || '',
+                                town: 'Madrid',
+                                region: {
+                                    _id: 'region-1',
+                                    name: 'Comunidad de Madrid',
+                                    country: 'es',
+                                },
+                                country: {
+                                    _id: 'es',
+                                    name: 'España',
+                                    code: 'ES',
+                                },
+                                coordinates: [-3.7038, 40.4168],
+                            }),
+                        },
+                    },
+                    {
+                        key: 'styles',
+                        type: 'select-button',
+                        className: 'col-span-12',
+                        props: {
+                            options: [
+                                { value: 'techno', label: 'Techno' },
+                                { value: 'house', label: 'House' },
+                            ],
+                            multi: true,
+                            maxSelections: 5,
+                            size: 'sm',
+                            showMoreLimit: 12,
+                            label: 'Estilos musicales',
+                            placeholder: 'Selecciona estilos',
+                        },
+                    },
+                    {
+                        key: 'capacity',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Capacidad',
+                            type: 'number',
+                            placeholder: 'Introduce capacidad',
+                        },
+                    },
+                    {
+                        key: 'social.soundcloud',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'SoundCloud',
+                            placeholder: 'URL de SoundCloud',
+                        },
+                    },
+                    {
+                        key: 'social.instagram',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Instagram',
+                            placeholder: 'Usuario de Instagram',
+                        },
+                    },
+                    {
+                        key: 'social.twitter',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Twitter/X',
+                            placeholder: 'Usuario de Twitter/X',
+                        },
+                    },
+                    {
+                        key: 'social.website',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Website',
+                            placeholder: 'URL del sitio web',
+                        },
+                    },
+                    {
+                        key: 'info',
+                        type: 'html-editor',
+                        className: 'col-span-12',
+                        props: {
+                            label: 'Información',
+                            placeholder: 'Introduce información',
+                        },
+                    },
+                ],
+            },
+        },
+        {
+            name: '[APP] Enviar playlist',
+            description: 'Formulario de envío de playlist con nombre, estilos, artistas, sitio, año, URL, selector de tracks e info.',
+            inputs: {
+                layout: 'stack',
+                model: {
+                    name: '',
+                    styles: [],
+                    artists: [],
+                    site: '',
+                    year: '',
+                    sourceUrl: '',
+                    items: [],
+                    info: '',
+                },
+                fields: [
+                    {
+                        key: 'name',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Nombre',
+                            placeholder: 'Introduce nombre',
+                            required: true,
+                        },
+                    },
+                    {
+                        key: 'styles',
+                        type: 'select-button',
+                        className: 'col-span-12',
+                        props: {
+                            options: [
+                                { value: 'techno', label: 'Techno' },
+                                { value: 'house', label: 'House' },
+                            ],
+                            multi: true,
+                            maxSelections: 5,
+                            size: 'sm',
+                            showMoreLimit: 12,
+                            label: 'Estilos musicales',
+                            placeholder: 'Selecciona estilos',
+                        },
+                    },
+                    {
+                        key: 'artists',
+                        type: 'select',
+                        className: 'col-span-12',
+                        props: {
+                            label: 'Artistas',
+                            multiple: true,
+                            options: [
+                                { _id: 'artist-1', name: 'Anna Melodia' },
+                                { _id: 'artist-2', name: 'Duo Beats' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'site',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Sitio',
+                            options: [
+                                { _id: 'site-1', name: 'Club Alpha' },
+                                { _id: 'site-2', name: 'Festival Beta' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'year',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Año',
+                            type: 'number',
+                            placeholder: 'Año de creación',
+                        },
+                    },
+                    {
+                        key: 'sourceUrl',
+                        type: 'input',
+                        className: 'col-span-12',
+                        props: {
+                            label: 'URL de la playlist',
+                            placeholder: 'Introduce URL',
+                        },
+                    },
+                    {
+                        key: 'items',
+                        type: 'entity-picker',
+                        className: 'col-span-12',
+                        props: {
+                            label: 'Tracks de la playlist',
+                            typeItem: 'media',
+                            iconFallback: 'music',
+                            formatSecondary: (item) => {
+                                const artists = item['artists'];
+                                if (!artists?.length)
+                                    return '';
+                                const first = String(artists[0]['name'] ?? '');
+                                const rest = artists.length - 1;
+                                return rest > 0 ? `${first} +${rest}` : first;
+                            },
+                            onSearch: async (query) => {
+                                const tracks = [
+                                    {
+                                        _id: '1',
+                                        name: 'Track Uno',
+                                        image: true,
+                                        artists: [{ name: 'Artista A' }],
+                                    },
+                                    {
+                                        _id: '2',
+                                        name: 'Track Dos',
+                                        image: true,
+                                        artists: [{ name: 'Artista B' }],
+                                    },
+                                    {
+                                        _id: '3',
+                                        name: 'Track Tres',
+                                        artists: [
+                                            { name: 'Artista A' },
+                                            { name: 'Artista C' },
+                                        ],
+                                    },
+                                    {
+                                        _id: '4',
+                                        name: 'Otro Track',
+                                        artists: [{ name: 'Artista D' }],
+                                    },
+                                    {
+                                        _id: '5',
+                                        name: 'Melodic Track',
+                                        image: true,
+                                        artists: [{ name: 'Artista B' }],
+                                    },
+                                    {
+                                        _id: '6',
+                                        name: 'Deep Cut',
+                                        artists: [{ name: 'Artista A' }],
+                                    },
+                                ];
+                                return tracks.filter((t) => t.name
+                                    .toLowerCase()
+                                    .includes(query.toLowerCase()));
+                            },
+                        },
+                    },
+                    {
+                        key: 'info',
+                        type: 'html-editor',
+                        className: 'col-span-12',
+                        props: {
+                            label: 'Información',
+                            placeholder: 'Introduce información',
+                        },
+                    },
+                ],
+            },
+        },
+        {
+            name: '[ADMIN] Playlist',
+            description: 'Formulario de edición de playlist del panel de admin. Incluye campos ocultos, nombre, usuario, visibilidad, estado, selector de tracks, slug y slug anterior.',
+            inputs: {
+                layout: 'stack',
+                model: {
+                    _id: '67ef1234abcd5678ef90abcd',
+                    name: 'Techno Selection 2026',
+                    user: { _id: 'user-1', name: 'annamelodia' },
+                    private: false,
+                    state: 'active',
+                    items: [
+                        {
+                            media: {
+                                _id: '1',
+                                name: 'Track Uno',
+                                image: true,
+                                artists: [{ name: 'Artista A' }],
+                            },
+                            position: 1,
+                        },
+                        {
+                            media: {
+                                _id: '3',
+                                name: 'Track Tres',
+                                artists: [
+                                    { name: 'Artista A' },
+                                    { name: 'Artista C' },
+                                ],
+                            },
+                            position: 2,
+                        },
+                    ],
+                    slug: 'techno-selection-2026',
+                    slugOld: 'techno-selection',
+                },
+                fields: [
+                    { key: '_id', type: 'hidden' },
+                    {
+                        key: 'name',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Nombre',
+                            placeholder: 'Introduce nombre',
+                            required: true,
+                        },
+                    },
+                    {
+                        key: 'user',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Usuario',
+                            placeholder: 'Introduce usuario',
+                            subtype: 'user',
+                            remoteSearch: true,
+                            options: [{ _id: 'user-1', name: 'annamelodia' }],
+                        },
+                    },
+                    {
+                        key: 'private',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Lista privada',
+                            hasSearch: false,
+                            options: [
+                                { _id: true, name: 'Sí' },
+                                { _id: false, name: 'No' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'state',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Estado',
+                            placeholder: 'Selecciona estado',
+                            required: true,
+                            options: [
+                                { _id: 'active', name: 'Activo' },
+                                { _id: 'inactive', name: 'Inactivo' },
+                                { _id: 'deleted', name: 'Eliminado' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'items',
+                        type: 'entity-picker',
+                        className: 'col-span-12',
+                        props: {
+                            label: 'Tracks de la playlist',
+                            typeItem: 'media',
+                            iconFallback: 'music',
+                            formatSecondary: (item) => {
+                                const artists = item['artists'];
+                                if (!artists?.length)
+                                    return '';
+                                const first = String(artists[0]['name'] ?? '');
+                                const rest = artists.length - 1;
+                                return rest > 0 ? `${first} +${rest}` : first;
+                            },
+                            onSearch: async (query) => {
+                                const tracks = [
+                                    {
+                                        _id: '1',
+                                        name: 'Track Uno',
+                                        image: true,
+                                        artists: [{ name: 'Artista A' }],
+                                    },
+                                    {
+                                        _id: '2',
+                                        name: 'Track Dos',
+                                        image: true,
+                                        artists: [{ name: 'Artista B' }],
+                                    },
+                                    {
+                                        _id: '3',
+                                        name: 'Track Tres',
+                                        artists: [
+                                            { name: 'Artista A' },
+                                            { name: 'Artista C' },
+                                        ],
+                                    },
+                                    {
+                                        _id: '4',
+                                        name: 'Otro Track',
+                                        artists: [{ name: 'Artista D' }],
+                                    },
+                                    {
+                                        _id: '5',
+                                        name: 'Melodic Track',
+                                        image: true,
+                                        artists: [{ name: 'Artista B' }],
+                                    },
+                                    {
+                                        _id: '6',
+                                        name: 'Deep Cut',
+                                        artists: [{ name: 'Artista A' }],
+                                    },
+                                ];
+                                return tracks.filter((t) => t.name
+                                    .toLowerCase()
+                                    .includes(query.toLowerCase()));
+                            },
+                        },
+                    },
+                    {
+                        key: 'slug',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Slug',
+                            placeholder: 'techno-selection-2026',
+                            readonly: true,
+                        },
+                    },
+                    {
+                        key: 'slugOld',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Slug anterior',
+                            placeholder: 'techno-selection',
+                            readonly: true,
+                        },
+                    },
+                ],
+            },
+        },
+        {
+            name: '[ADMIN] Artista',
+            description: 'Formulario real de edición de artista del panel de admin. Incluye inputs, selects (país, estilos, estado), upload de imagen, redes sociales, textarea y datos simulados.',
+            inputs: {
+                layout: 'stack',
+                fields: [
+                    { key: '_id', type: 'hidden' },
+                    {
+                        key: 'name',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Nombre',
+                            placeholder: 'Introduce nombre',
+                            required: true,
+                        },
+                    },
+                    {
+                        key: 'country',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'País de nacimiento',
+                            placeholder: 'Selecciona un país',
+                            country: true,
+                            options: [
+                                { id: 'es', label: 'España', name: 'España' },
+                                {
+                                    id: 'de',
+                                    label: 'Alemania',
+                                    name: 'Alemania',
+                                },
+                                { id: 'fr', label: 'Francia', name: 'Francia' },
+                                { id: 'it', label: 'Italia', name: 'Italia' },
+                                {
+                                    id: 'nl',
+                                    label: 'Países Bajos',
+                                    name: 'Países Bajos',
+                                },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'countryResidence',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'País de residencia',
+                            placeholder: 'Selecciona un país',
+                            country: true,
+                            options: [
+                                { id: 'es', label: 'España', name: 'España' },
+                                {
+                                    id: 'de',
+                                    label: 'Alemania',
+                                    name: 'Alemania',
+                                },
+                                { id: 'fr', label: 'Francia', name: 'Francia' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'styles',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Estilos',
+                            placeholder: 'Selecciona estilo/s',
+                            multi: true,
+                            maxSelections: 5,
+                            hasSearch: true,
+                            options: [
+                                {
+                                    id: 'techno',
+                                    label: 'Techno',
+                                    name: 'Techno',
+                                },
+                                { id: 'house', label: 'House', name: 'House' },
+                                {
+                                    id: 'deep-house',
+                                    label: 'Deep House',
+                                    name: 'Deep House',
+                                },
+                                {
+                                    id: 'minimal',
+                                    label: 'Minimal',
+                                    name: 'Minimal',
+                                },
+                                {
+                                    id: 'hard-techno',
+                                    label: 'Hard Techno',
+                                    name: 'Hard Techno',
+                                },
+                                { id: 'acid', label: 'Acid', name: 'Acid' },
+                                {
+                                    id: 'trance',
+                                    label: 'Trance',
+                                    name: 'Trance',
+                                },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'imageUpload',
+                        type: 'upload-image',
+                        className: 'col-span-12',
+                        props: {
+                            label: 'Imagen',
+                            placeholder: 'Selecciona una imagen',
+                            currentImageUrl: 'https://via.placeholder.com/400x400.png?text=Artista',
+                        },
+                    },
+                    {
+                        key: 'social',
+                        type: 'social',
+                        className: 'col-span-12',
+                        props: { label: 'Redes sociales', admin: true },
+                    },
+                    {
+                        key: 'user',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Usuario',
+                            placeholder: 'Introduce usuario',
+                            subtype: 'user',
+                            remoteSearch: true,
+                            options: [
+                                {
+                                    id: 'user-1',
+                                    label: 'annamelodia',
+                                    name: 'annamelodia',
+                                },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'state',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Estado',
+                            placeholder: 'Selecciona estado',
+                            required: true,
+                            options: [
+                                { _id: 'active', name: 'Activo' },
+                                { _id: 'inactive', name: 'Inactivo' },
+                                { _id: 'deleted', name: 'Eliminado' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'exclusive',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Exclusivo',
+                            hasSearch: false,
+                            options: [
+                                { _id: true, name: 'Sí' },
+                                { _id: false, name: 'No' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'bannedTop',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Baneado del top',
+                            hasSearch: false,
+                            options: [
+                                { _id: true, name: 'Sí' },
+                                { _id: false, name: 'No' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'bannedVisits',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Baneado de visitas',
+                            hasSearch: false,
+                            options: [
+                                { _id: true, name: 'Sí' },
+                                { _id: false, name: 'No' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'slug',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Slug',
+                            placeholder: 'anna-melodia',
+                            readonly: true,
+                        },
+                    },
+                    {
+                        key: 'slugOld',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Slug anterior',
+                            placeholder: 'anna-melodia-old',
+                            readonly: true,
+                        },
+                    },
+                    {
+                        key: 'info',
+                        type: 'html-editor',
+                        className: 'col-span-12',
+                        props: {
+                            label: 'Información',
+                            placeholder: 'Describe al artista',
+                        },
+                    },
+                    {
+                        key: 'leadStatus',
+                        type: 'select',
+                        className: 'col-span-12',
+                        props: {
+                            label: 'Estado del lead',
+                            placeholder: 'Selecciona estado del lead',
+                            options: [
+                                { _id: 'new', name: 'Nuevo' },
+                                { _id: 'contacted', name: 'Contactado' },
+                                { _id: 'qualified', name: 'Calificado' },
+                                { _id: 'lost', name: 'Perdido' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'internalNotes',
+                        type: 'textarea',
+                        className: 'col-span-12',
+                        props: {
+                            label: 'Notas internas',
+                            placeholder: 'Introduce tus notas internas',
+                            rows: 4,
+                        },
+                    },
+                ],
+                model: {
+                    name: 'Anna Melodia',
+                    country: { id: 'es', name: 'España' },
+                    countryResidence: { id: 'de', name: 'Alemania' },
+                    styles: [
+                        { id: 'techno', name: 'Techno' },
+                        { id: 'house', name: 'House' },
+                    ],
+                    slug: 'anna-melodia',
+                    slugOld: 'anna-melodia-old',
+                    state: { _id: 'active', name: 'Activo' },
+                    exclusive: { _id: false, name: 'No' },
+                    bannedTop: { _id: false, name: 'No' },
+                    bannedVisits: { _id: false, name: 'No' },
+                    leadStatus: { _id: 'new', name: 'Nuevo' },
+                    info: 'DJ y productora de techno melódico afincada en Berlín. Ha publicado en labels como Afterlife, Innervisions y Diynamic.',
+                },
+            },
+        },
+        {
+            name: '[ADMIN] Evento',
+            description: 'Formulario real de edición de evento del panel de admin. Fechas, sitio remoto, artistas y más.',
+            inputs: {
+                layout: 'stack',
+                fields: [
+                    { key: '_id', type: 'hidden' },
+                    {
+                        key: 'name',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Nombre',
+                            placeholder: 'Introduce el nombre del evento',
+                            required: true,
+                        },
+                    },
+                    {
+                        key: 'styles',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Estilos',
+                            placeholder: 'Selecciona los estilos',
+                            multi: true,
+                            maxSelections: 5,
+                            hasSearch: true,
+                            options: [
+                                {
+                                    id: 'techno',
+                                    label: 'Techno',
+                                    name: 'Techno',
+                                },
+                                { id: 'house', label: 'House', name: 'House' },
+                                {
+                                    id: 'hard-techno',
+                                    label: 'Hard Techno',
+                                    name: 'Hard Techno',
+                                },
+                                {
+                                    id: 'melodic-techno',
+                                    label: 'Melodic Techno',
+                                    name: 'Melodic Techno',
+                                },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'date',
+                        type: 'datetime',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: { label: 'Fecha de inicio', required: true },
+                    },
+                    {
+                        key: 'dateEnd',
+                        type: 'datetime',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: { label: 'Fecha de fin', required: true },
+                    },
+                    {
+                        key: 'site',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Sitio',
+                            placeholder: 'Selecciona un sitio',
+                            subtype: 'site',
+                            remoteSearch: true,
+                            options: [
+                                {
+                                    id: 'site-1',
+                                    label: 'Club Alpha',
+                                    name: 'Club Alpha',
+                                },
+                                {
+                                    id: 'site-2',
+                                    label: 'Festival Beta',
+                                    name: 'Festival Beta',
+                                },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'artists',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Artistas',
+                            placeholder: 'Selecciona artistas',
+                            subtype: 'artist',
+                            remoteSearch: true,
+                            multi: true,
+                            options: [
+                                {
+                                    id: 'artist-1',
+                                    label: 'Anna Melodia',
+                                    name: 'Anna Melodia',
+                                },
+                                {
+                                    id: 'artist-2',
+                                    label: 'Duo Beats',
+                                    name: 'Duo Beats',
+                                },
+                                {
+                                    id: 'artist-3',
+                                    label: 'Luna Nova',
+                                    name: 'Luna Nova',
+                                },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'imageUpload',
+                        type: 'upload-image',
+                        className: 'col-span-12',
+                        props: {
+                            label: 'Imagen',
+                            placeholder: 'Selecciona una imagen',
+                            currentImageUrl: 'https://via.placeholder.com/800x400.png?text=Evento',
+                        },
+                    },
+                    {
+                        key: 'country',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'País',
+                            placeholder: 'Selecciona un país',
+                            country: true,
+                            options: [
+                                { id: 'es', label: 'España', name: 'España' },
+                                {
+                                    id: 'de',
+                                    label: 'Alemania',
+                                    name: 'Alemania',
+                                },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'region',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Región',
+                            subtype: 'region',
+                            options: [
+                                { _id: 'berlin', name: 'Berlín' },
+                                { _id: 'barcelona', name: 'Barcelona' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'ra',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Resident Advisor',
+                            placeholder: 'URL de RA',
+                            type: 'url',
+                        },
+                    },
+                    {
+                        key: 'user',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Usuario',
+                            placeholder: 'Introduce usuario',
+                            subtype: 'user',
+                            remoteSearch: true,
+                            options: [
+                                {
+                                    id: 'user-1',
+                                    label: 'annamelodia',
+                                    name: 'annamelodia',
+                                },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'exclusive',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Exclusivo',
+                            hasSearch: false,
+                            options: [
+                                { _id: true, name: 'Sí' },
+                                { _id: false, name: 'No' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'bannedTop',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Baneado del top',
+                            hasSearch: false,
+                            options: [
+                                { _id: true, name: 'Sí' },
+                                { _id: false, name: 'No' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'bannedVisits',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Baneado de visitas',
+                            hasSearch: false,
+                            options: [
+                                { _id: true, name: 'Sí' },
+                                { _id: false, name: 'No' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'state',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Estado',
+                            placeholder: 'Selecciona estado',
+                            required: true,
+                            options: [
+                                { _id: 'active', name: 'Activo' },
+                                { _id: 'inactive', name: 'Inactivo' },
+                                { _id: 'deleted', name: 'Eliminado' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'slug',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Slug',
+                            placeholder: 'berlin-techno-night',
+                            readonly: true,
+                        },
+                    },
+                    {
+                        key: 'slugOld',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Slug anterior',
+                            placeholder: 'berlin-techno-night-old',
+                            readonly: true,
+                        },
+                    },
+                    {
+                        key: 'info',
+                        type: 'html-editor',
+                        className: 'col-span-12',
+                        props: {
+                            label: 'Información',
+                            placeholder: 'Describe el evento',
+                        },
+                    },
+                ],
+                model: {
+                    name: 'Berlin Techno Night',
+                    styles: [
+                        { id: 'techno', name: 'Techno' },
+                        { id: 'hard-techno', name: 'Hard Techno' },
+                    ],
+                    date: new Date('2026-06-15T23:00:00'),
+                    dateEnd: new Date('2026-06-16T06:00:00'),
+                    site: { id: 'site-1', name: 'Club Alpha' },
+                    artists: [
+                        { id: 'artist-1', name: 'Anna Melodia' },
+                        { id: 'artist-3', name: 'Luna Nova' },
+                    ],
+                    country: { id: 'de', name: 'Alemania' },
+                    region: { _id: 'berlin', name: 'Berlín' },
+                    state: { _id: 'active', name: 'Activo' },
+                    exclusive: { _id: false, name: 'No' },
+                    slug: 'berlin-techno-night',
+                    info: 'Evento semanal de techno en Club Alpha. Lineup: Anna Melodia, Luna Nova y más.',
+                },
+            },
+        },
+        {
+            name: '[ADMIN] Media',
+            description: 'Formulario real de edición de media (sets/tracks) del admin. Tipo, artistas, fuente, enlaces y año.',
+            inputs: {
+                layout: 'stack',
+                fields: [
+                    { key: '_id', type: 'hidden' },
+                    {
+                        key: 'name',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Nombre',
+                            placeholder: 'Introduce el nombre',
+                            required: true,
+                        },
+                    },
+                    {
+                        key: 'type',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Tipo',
+                            placeholder: 'Selecciona el tipo',
+                            required: true,
+                            options: [
+                                { id: 'set', label: 'Set', name: 'Set' },
+                                { id: 'track', label: 'Track', name: 'Track' },
+                                {
+                                    id: 'podcast',
+                                    label: 'Podcast',
+                                    name: 'Podcast',
+                                },
+                                {
+                                    id: 'radioshow',
+                                    label: 'Radioshow',
+                                    name: 'Radioshow',
+                                },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'artists',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Artistas',
+                            placeholder: 'Selecciona artistas',
+                            subtype: 'artist',
+                            remoteSearch: true,
+                            multi: true,
+                            options: [
+                                {
+                                    id: 'artist-1',
+                                    label: 'Anna Melodia',
+                                    name: 'Anna Melodia',
+                                },
+                                {
+                                    id: 'artist-2',
+                                    label: 'Duo Beats',
+                                    name: 'Duo Beats',
+                                },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'year',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Año',
+                            placeholder: 'Introduce el año',
+                            type: 'number',
+                        },
+                    },
+                    {
+                        key: 'source',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Fuente',
+                            placeholder: 'Selecciona fuente',
+                            options: [
+                                { _id: 'soundcloud', name: 'Soundcloud' },
+                                { _id: 'youtube', name: 'Youtube' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'sourceUrl',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'URL',
+                            placeholder: 'https://soundcloud.com/...',
+                            type: 'url',
+                        },
+                    },
+                    {
+                        key: 'sourceId',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'ID Media',
+                            placeholder: '123456789',
+                        },
+                    },
+                    {
+                        key: 'duration',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Duración (segundos)',
+                            placeholder: '3600',
+                            type: 'number',
+                        },
+                    },
+                    {
+                        key: 'imageUpload',
+                        type: 'upload-image',
+                        className: 'col-span-12',
+                        props: {
+                            label: 'Imagen',
+                            placeholder: 'Selecciona una imagen',
+                            currentImageUrl: 'https://via.placeholder.com/400x400.png?text=Media',
+                        },
+                    },
+                    {
+                        key: 'site',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Sitio',
+                            placeholder: 'Introduce sitio',
+                            subtype: 'site',
+                            remoteSearch: true,
+                            options: [
+                                {
+                                    id: 'site-1',
+                                    label: 'Club Alpha',
+                                    name: 'Club Alpha',
+                                },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'styles',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Estilos',
+                            placeholder: 'Selecciona estilo/s',
+                            multi: true,
+                            maxSelections: 5,
+                            hasSearch: true,
+                            options: [
+                                {
+                                    id: 'techno',
+                                    label: 'Techno',
+                                    name: 'Techno',
+                                },
+                                { id: 'house', label: 'House', name: 'House' },
+                                {
+                                    id: 'deep-house',
+                                    label: 'Deep House',
+                                    name: 'Deep House',
+                                },
+                                {
+                                    id: 'melodic-techno',
+                                    label: 'Melodic Techno',
+                                    name: 'Melodic Techno',
+                                },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'freeDownloadLink',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Descarga gratuita',
+                            placeholder: 'https://...',
+                            type: 'url',
+                        },
+                    },
+                    {
+                        key: 'buyLink',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Compra',
+                            placeholder: 'https://...',
+                            type: 'url',
+                        },
+                    },
+                    {
+                        key: 'user',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Usuario',
+                            placeholder: 'Introduce usuario',
+                            subtype: 'user',
+                            remoteSearch: true,
+                            options: [
+                                {
+                                    id: 'user-1',
+                                    label: 'annamelodia',
+                                    name: 'annamelodia',
+                                },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'promoted',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Promocionado',
+                            hasSearch: false,
+                            options: [
+                                { _id: true, name: 'Sí' },
+                                { _id: false, name: 'No' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'exclusive',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Exclusivo',
+                            hasSearch: false,
+                            options: [
+                                { _id: true, name: 'Sí' },
+                                { _id: false, name: 'No' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'bannedTop',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Baneado del top',
+                            hasSearch: false,
+                            options: [
+                                { _id: true, name: 'Sí' },
+                                { _id: false, name: 'No' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'bannedVisits',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Baneado de visitas',
+                            hasSearch: false,
+                            options: [
+                                { _id: true, name: 'Sí' },
+                                { _id: false, name: 'No' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'state',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Estado',
+                            placeholder: 'Selecciona estado',
+                            required: true,
+                            options: [
+                                { _id: 'active', name: 'Activo' },
+                                { _id: 'inactive', name: 'Inactivo' },
+                                { _id: 'deleted', name: 'Eliminado' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'slug',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Slug',
+                            placeholder: 'melodic-session-001',
+                            readonly: true,
+                        },
+                    },
+                    {
+                        key: 'slugOld',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Slug anterior',
+                            placeholder: 'melodic-session-001-old',
+                            readonly: true,
+                        },
+                    },
+                    {
+                        key: 'info',
+                        type: 'html-editor',
+                        className: 'col-span-12',
+                        props: {
+                            label: 'Información',
+                            placeholder: 'Describe la media',
+                        },
+                    },
+                ],
+                model: {
+                    name: 'Melodic Session 001',
+                    type: { id: 'set', name: 'Set' },
+                    artists: [{ id: 'artist-1', name: 'Anna Melodia' }],
+                    year: 2026,
+                    styles: [
+                        { id: 'melodic-techno', name: 'Melodic Techno' },
+                    ],
+                    source: { _id: 'soundcloud', name: 'Soundcloud' },
+                    sourceUrl: 'https://soundcloud.com/annamelodia/melodic-session-001',
+                    sourceId: '123456789',
+                    duration: 3600,
+                    site: { id: 'site-1', name: 'Club Alpha' },
+                    freeDownloadLink: 'https://freelink.com/annamelodia/melodic-session-001',
+                    state: { _id: 'active', name: 'Activo' },
+                    promoted: { _id: false, name: 'No' },
+                    exclusive: { _id: false, name: 'No' },
+                    slug: 'melodic-session-001',
+                    info: 'Set grabado en directo en Club Alpha durante la Berlin Techno Night.',
+                },
+            },
+        },
+        {
+            name: '[ADMIN] Sitio',
+            description: 'Formulario real de edición de sitio en el admin. Tipo, dirección, coordenadas, estilos y datos simulados.',
+            inputs: {
+                layout: 'stack',
+                fields: [
+                    { key: '_id', type: 'hidden' },
+                    {
+                        key: 'name',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Nombre',
+                            placeholder: 'Introduce el nombre',
+                            required: true,
+                        },
+                    },
+                    {
+                        key: 'type',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Tipo',
+                            placeholder: 'Selecciona el tipo',
+                            required: true,
+                            options: [
+                                { id: 'club', label: 'Club', name: 'Club' },
+                                {
+                                    id: 'festival',
+                                    label: 'Festival',
+                                    name: 'Festival',
+                                },
+                                { id: 'bar', label: 'Bar', name: 'Bar' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'street',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Dirección',
+                            placeholder: 'Calle, número',
+                            required: true,
+                        },
+                    },
+                    {
+                        key: 'town',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Ciudad',
+                            placeholder: 'Introduce la población',
+                            required: true,
+                        },
+                    },
+                    {
+                        key: 'country',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'País',
+                            placeholder: 'Selecciona un país',
+                            country: true,
+                            options: [
+                                { id: 'es', label: 'España', name: 'España' },
+                                {
+                                    id: 'de',
+                                    label: 'Alemania',
+                                    name: 'Alemania',
+                                },
+                                { id: 'fr', label: 'Francia', name: 'Francia' },
+                                { id: 'it', label: 'Italia', name: 'Italia' },
+                            ],
+                            required: true,
+                        },
+                    },
+                    {
+                        key: 'region',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Región',
+                            subtype: 'region',
+                            options: [
+                                { _id: 'berlin', name: 'Berlín' },
+                                { _id: 'barcelona', name: 'Barcelona' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'lat',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Latitud',
+                            placeholder: '52.5200',
+                            type: 'number',
+                        },
+                    },
+                    {
+                        key: 'lng',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Longitud',
+                            placeholder: '13.4050',
+                            type: 'number',
+                        },
+                    },
+                    {
+                        key: 'capacity',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Aforo',
+                            placeholder: '1500',
+                            type: 'number',
+                        },
+                    },
+                    {
+                        key: 'styles',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Estilos',
+                            placeholder: 'Selecciona estilo/s',
+                            multi: true,
+                            maxSelections: 5,
+                            hasSearch: true,
+                            options: [
+                                {
+                                    id: 'techno',
+                                    label: 'Techno',
+                                    name: 'Techno',
+                                },
+                                { id: 'house', label: 'House', name: 'House' },
+                                {
+                                    id: 'deep-house',
+                                    label: 'Deep House',
+                                    name: 'Deep House',
+                                },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'imageUpload',
+                        type: 'upload-image',
+                        className: 'col-span-12',
+                        props: {
+                            label: 'Imagen',
+                            placeholder: 'Selecciona una imagen',
+                            currentImageUrl: 'https://via.placeholder.com/800x400.png?text=Club+Alpha',
+                        },
+                    },
+                    {
+                        key: 'social',
+                        type: 'social',
+                        className: 'col-span-12',
+                        props: { label: 'Redes sociales', admin: true },
+                    },
+                    {
+                        key: 'user',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Usuario',
+                            placeholder: 'Introduce usuario',
+                            subtype: 'user',
+                            remoteSearch: true,
+                            options: [
+                                {
+                                    id: 'user-1',
+                                    label: 'annamelodia',
+                                    name: 'annamelodia',
+                                },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'promoted',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Promocionado',
+                            hasSearch: false,
+                            options: [
+                                { _id: true, name: 'Sí' },
+                                { _id: false, name: 'No' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'exclusive',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Exclusivo',
+                            hasSearch: false,
+                            options: [
+                                { _id: true, name: 'Sí' },
+                                { _id: false, name: 'No' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'bannedTop',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Baneado del top',
+                            hasSearch: false,
+                            options: [
+                                { _id: true, name: 'Sí' },
+                                { _id: false, name: 'No' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'bannedVisits',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Baneado de visitas',
+                            hasSearch: false,
+                            options: [
+                                { _id: true, name: 'Sí' },
+                                { _id: false, name: 'No' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'state',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Estado',
+                            placeholder: 'Selecciona estado',
+                            required: true,
+                            options: [
+                                { _id: 'active', name: 'Activo' },
+                                { _id: 'inactive', name: 'Inactivo' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'slug',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Slug',
+                            placeholder: 'club-alpha',
+                            readonly: true,
+                        },
+                    },
+                    {
+                        key: 'slugOld',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Slug anterior',
+                            placeholder: 'club-alpha-old',
+                            readonly: true,
+                        },
+                    },
+                    {
+                        key: 'info',
+                        type: 'html-editor',
+                        className: 'col-span-12',
+                        props: {
+                            label: 'Información',
+                            placeholder: 'Describe el sitio',
+                        },
+                    },
+                ],
+                model: {
+                    name: 'Club Alpha',
+                    type: { id: 'club', name: 'Club' },
+                    street: 'Rüdersdorfer Str. 1',
+                    town: 'Berlín',
+                    country: { id: 'de', name: 'Alemania' },
+                    region: { _id: 'berlin', name: 'Berlín' },
+                    lat: 52.52,
+                    lng: 13.405,
+                    capacity: 1500,
+                    styles: [{ id: 'techno', name: 'Techno' }],
+                    state: { _id: 'active', name: 'Activo' },
+                    promoted: { _id: true, name: 'Sí' },
+                    exclusive: { _id: false, name: 'No' },
+                    slug: 'club-alpha',
+                    info: 'Club de techno en Berlín Friedrichshain. Reconocido por su sistema de sonido Funktion-One.',
+                },
+            },
+        },
+        {
+            name: '[ADMIN] Usuario',
+            description: 'Formulario real de edición de usuario del admin. Email, rol, país, idioma, tipo y datos simulados.',
+            inputs: {
+                layout: 'stack',
+                fields: [
+                    { key: '_id', type: 'hidden' },
+                    {
+                        key: 'name',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Nombre',
+                            placeholder: 'Introduce nombre',
+                            required: true,
+                        },
+                    },
+                    {
+                        key: 'email',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Email',
+                            placeholder: 'user@email.com',
+                            type: 'email',
+                            required: true,
+                        },
+                    },
+                    {
+                        key: 'country',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'País',
+                            placeholder: 'Selecciona un país',
+                            country: true,
+                            options: [
+                                { id: 'es', label: 'España', name: 'España' },
+                                {
+                                    id: 'de',
+                                    label: 'Alemania',
+                                    name: 'Alemania',
+                                },
+                                { id: 'fr', label: 'Francia', name: 'Francia' },
+                                {
+                                    id: 'uk',
+                                    label: 'Reino Unido',
+                                    name: 'Reino Unido',
+                                },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'region',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Región',
+                            subtype: 'region',
+                            options: [
+                                { _id: 'madrid', name: 'Madrid' },
+                                { _id: 'barcelona', name: 'Barcelona' },
+                                { _id: 'berlin', name: 'Berlín' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'favoriteStyles',
+                        type: 'select',
+                        className: 'col-span-12',
+                        props: {
+                            label: 'Estilos favoritos',
+                            placeholder: 'Selecciona estilo/s',
+                            multi: true,
+                            maxSelections: 5,
+                            hasSearch: true,
+                            options: [
+                                {
+                                    id: 'techno',
+                                    label: 'Techno',
+                                    name: 'Techno',
+                                },
+                                { id: 'house', label: 'House', name: 'House' },
+                                {
+                                    id: 'deep-house',
+                                    label: 'Deep House',
+                                    name: 'Deep House',
+                                },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'language',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Idioma',
+                            placeholder: 'Selecciona un idioma',
+                            required: true,
+                            options: [
+                                { id: 'es', label: 'Español', name: 'Español' },
+                                { id: 'en', label: 'Inglés', name: 'Inglés' },
+                                { id: 'de', label: 'Alemán', name: 'Alemán' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'role',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Rol',
+                            placeholder: 'Selecciona rol',
+                            required: true,
+                            options: [
+                                { _id: 'ADMIN', name: 'Administrador' },
+                                { _id: 'USER', name: 'Usuario' },
+                                { _id: 'MODERATOR', name: 'Moderador' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'type',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Tipo',
+                            placeholder: 'Selecciona tipo',
+                            required: true,
+                            options: [
+                                { _id: 'NORMAL', name: 'Normal' },
+                                { _id: 'ARTIST', name: 'Artista' },
+                                { _id: 'PROMOTER', name: 'Promotor' },
+                                { _id: 'RECORD_LABEL', name: 'Record Label' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'imageUpload',
+                        type: 'upload-image',
+                        className: 'col-span-12',
+                        props: {
+                            label: 'Avatar',
+                            placeholder: 'Selecciona una imagen',
+                            currentImageUrl: 'https://via.placeholder.com/200x200.png?text=User',
+                        },
+                    },
+                    {
+                        key: 'subscriptionTier',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Suscripción',
+                            placeholder: 'Selecciona suscripción',
+                            options: [
+                                { _id: 'FREE', name: 'Free' },
+                                { _id: 'PREMIUM', name: 'Premium' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'bannedVisits',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Baneado de visitas',
+                            hasSearch: false,
+                            options: [
+                                { _id: true, name: 'Sí' },
+                                { _id: false, name: 'No' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'bannedFromChat',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Chats baneados',
+                            hasSearch: false,
+                            options: [
+                                { _id: true, name: 'Sí' },
+                                { _id: false, name: 'No' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'cookiesAccepted',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Cookies Aceptadas',
+                            hasSearch: false,
+                            options: [
+                                { _id: true, name: 'Sí' },
+                                { _id: false, name: 'No' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'state',
+                        type: 'select',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Estado',
+                            placeholder: 'Selecciona estado',
+                            required: true,
+                            options: [
+                                { _id: 'active', name: 'Activo' },
+                                { _id: 'inactive', name: 'Inactivo' },
+                                { _id: 'banned', name: 'Baneado' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'info',
+                        type: 'html-editor',
+                        className: 'col-span-12',
+                        props: {
+                            label: 'Información',
+                            placeholder: 'Introduce info',
+                        },
+                    },
+                ],
+                model: {
+                    name: 'María García',
+                    email: 'maria@example.com',
+                    country: { id: 'es', name: 'España' },
+                    region: { _id: 'madrid', name: 'Madrid' },
+                    favoriteStyles: [
+                        { id: 'techno', name: 'Techno' },
+                        { id: 'house', name: 'House' },
+                    ],
+                    language: { id: 'es', name: 'Español' },
+                    role: { _id: 'ADMIN', name: 'Administrador' },
+                    type: { _id: 'NORMAL', name: 'Normal' },
+                    subscriptionTier: { _id: 'FREE', name: 'Free' },
+                    state: { _id: 'active', name: 'Activo' },
+                    bannedVisits: { _id: false, name: 'No' },
+                    bannedFromChat: { _id: false, name: 'No' },
+                    cookiesAccepted: { _id: true, name: 'Sí' },
+                    info: 'Administradora de la plataforma.',
+                },
+            },
+        },
+        {
+            name: 'Compact (para headers)',
+            description: 'Formulario real de cambio de contraseña con los tres inputs usados en la app.',
+            inputs: {
+                layout: 'stack',
+                fields: [
+                    {
+                        key: 'passwordCurrent',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-12',
+                        props: {
+                            label: 'Contraseña actual',
+                            placeholder: 'Introduce tu contraseña actual',
+                            type: 'password',
+                            required: true,
+                        },
+                    },
+                    {
+                        key: 'passwordNew',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Nueva contraseña',
+                            placeholder: 'Introduce tu nueva contraseña',
+                            type: 'password',
+                            required: true,
+                        },
+                    },
+                    {
+                        key: 'passwordNewConfirm',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Confirmar contraseña',
+                            placeholder: 'Repite tu nueva contraseña',
+                            type: 'password',
+                            required: true,
+                        },
+                    },
+                ],
+            },
+        },
+        {
+            name: 'Compact (para headers)',
+            description: 'Versión compacta para usar en cabeceras y títulos. Inputs más pequeños, sin espaciado vertical.',
+            inputs: {
+                size: 'compact',
+                layout: 'stack',
+                fields: [
+                    {
+                        key: 'period',
+                        type: 'select',
+                        className: 'col-span-12',
+                        props: {
+                            placeholder: 'Selecciona periodo',
+                            options: [
+                                {
+                                    id: '7d',
+                                    label: 'Ultimos 7 dias',
+                                    name: 'Ultimos 7 dias',
+                                },
+                                {
+                                    id: '15d',
+                                    label: 'Ultimos 15 dias',
+                                    name: 'Ultimos 15 dias',
+                                },
+                                {
+                                    id: '30d',
+                                    label: 'Ultimo mes',
+                                    name: 'Ultimo mes',
+                                },
+                            ],
+                        },
+                    },
+                ],
+            },
+        },
+        {
+            name: '[APP] Crear setup',
+            description: 'Formulario de creación de equipment setup con nombre, componentes del setup e información.',
+            inputs: {
+                layout: 'stack',
+                model: {
+                    name: '',
+                    components: [
+                        {
+                            id: 'eq-1',
+                            name: 'CDJ-3000',
+                            manufacturer: 'Pioneer DJ',
+                            image: true,
+                            position: 0,
+                        },
+                        {
+                            id: 'eq-2',
+                            name: 'DJM-A9',
+                            manufacturer: 'Pioneer DJ',
+                            image: true,
+                            position: 1,
+                        },
+                    ],
+                    info: '',
+                },
+                fields: [
+                    {
+                        key: 'name',
+                        type: 'input',
+                        className: 'col-span-12 lg:col-span-6',
+                        props: {
+                            label: 'Nombre del setup',
+                            placeholder: 'Ej: Cabina DJ principal',
+                            required: true,
+                        },
+                    },
+                    {
+                        key: 'components',
+                        type: 'entity-picker',
+                        className: 'col-span-12',
+                        props: {
+                            typeItem: 'equipment',
+                            iconFallback: 'microchip',
+                            onSearch: async (query) => {
+                                const mockEquipments = [
+                                    {
+                                        _id: 'eq-1',
+                                        name: 'CDJ-3000',
+                                        manufacturer: 'Pioneer DJ',
+                                        image: true,
+                                    },
+                                    {
+                                        _id: 'eq-2',
+                                        name: 'DJM-A9',
+                                        manufacturer: 'Pioneer DJ',
+                                        image: true,
+                                    },
+                                    {
+                                        _id: 'eq-3',
+                                        name: 'XDJ-RX3',
+                                        manufacturer: 'Pioneer DJ',
+                                        image: true,
+                                    },
+                                    {
+                                        _id: 'eq-4',
+                                        name: 'Technics SL-1210MK7',
+                                        manufacturer: 'Technics',
+                                        image: true,
+                                    },
+                                    {
+                                        _id: 'eq-5',
+                                        name: 'HDJ-X10',
+                                        manufacturer: 'Pioneer DJ',
+                                        image: false,
+                                    },
+                                    {
+                                        _id: 'eq-6',
+                                        name: 'RMX-1000',
+                                        manufacturer: 'Pioneer DJ',
+                                        image: false,
+                                    },
+                                    {
+                                        _id: 'eq-7',
+                                        name: 'DJS-1000',
+                                        manufacturer: 'Pioneer DJ',
+                                        image: false,
+                                    },
+                                    {
+                                        _id: 'eq-8',
+                                        name: 'V10',
+                                        manufacturer: 'Allen & Heath',
+                                        image: true,
+                                    },
+                                    {
+                                        _id: 'eq-9',
+                                        name: 'Xone:96',
+                                        manufacturer: 'Allen & Heath',
+                                        image: true,
+                                    },
+                                    {
+                                        _id: 'eq-10',
+                                        name: 'Model 1.4',
+                                        manufacturer: 'Richie Hawtin',
+                                        image: false,
+                                    },
+                                ];
+                                if (!query.trim())
+                                    return [];
+                                const q = query.toLowerCase();
+                                return mockEquipments.filter((e) => e.name.toLowerCase().includes(q) ||
+                                    e.manufacturer.toLowerCase().includes(q));
+                            },
+                            onCreate: async () => {
+                                return {
+                                    _id: 'eq-new-' + Date.now(),
+                                    name: 'Nuevo equipo',
+                                    manufacturer: 'Fabricante',
+                                    image: false,
+                                };
+                            },
+                            getImageUrl: (item) => item['image'] ? item._id : '',
+                        },
+                    },
+                    {
+                        key: 'info',
+                        type: 'html-editor',
+                        className: 'col-span-12',
+                        props: {
+                            label: 'Información',
+                            placeholder: 'Describe tu setup...',
+                        },
+                    },
+                ],
+            },
+        },
+        {
+            name: '[ADMIN] Import Media — inline edit',
+            description: 'Simula la edición inline de import-media con selects multi remotos para artistas y marcas. Valida ancho del dropdown, scroll en contenedor y ordenación selected-first.',
+            inputs: {
+                size: 'compact',
+                layout: 'stack',
+                model: {
+                    name: 'Melodic Session 001',
+                    type: { id: 'track', name: 'Track' },
+                    artists: [
+                        { id: 'artist-1', name: 'Anna Melodia' },
+                        { id: 'artist-3', name: 'Luna Nova' },
+                    ],
+                    organization: [
+                        { id: 'org-1', name: 'Afterlife Records' },
+                    ],
+                },
+                fields: [
+                    {
+                        key: 'name',
+                        type: 'input',
+                        className: 'col-span-12',
+                        props: {
+                            label: 'Título',
+                            placeholder: 'Nombre del track/set',
+                            required: true,
+                        },
+                    },
+                    {
+                        key: 'type',
+                        type: 'select',
+                        className: 'col-span-12 sm:col-span-6',
+                        props: {
+                            label: 'Tipo',
+                            placeholder: 'Selecciona tipo',
+                            options: [
+                                { id: 'track', name: 'Track' },
+                                { id: 'set', name: 'Set' },
+                                { id: 'podcast', name: 'Podcast' },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'artists',
+                        type: 'select',
+                        className: 'col-span-12 sm:col-span-6',
+                        props: {
+                            label: 'Artist',
+                            placeholder: 'Busca y selecciona artistas...',
+                            subtype: 'artist',
+                            multi: true,
+                            hasSearch: true,
+                            remoteSearch: true,
+                            onSearch: async (query) => {
+                                const all = [
+                                    {
+                                        _id: 'artist-1',
+                                        name: 'Anna Melodia',
+                                        subline: 'Melodic Techno',
+                                    },
+                                    {
+                                        _id: 'artist-2',
+                                        name: 'Duo Beats',
+                                        subline: 'House / Tech House',
+                                    },
+                                    {
+                                        _id: 'artist-3',
+                                        name: 'Luna Nova',
+                                        subline: 'Progressive',
+                                    },
+                                    {
+                                        _id: 'artist-4',
+                                        name: 'Solar Drift',
+                                        subline: 'Ambient / Downtempo',
+                                    },
+                                    {
+                                        _id: 'artist-5',
+                                        name: 'Kai Zenith',
+                                        subline: 'Hard Techno',
+                                    },
+                                    {
+                                        _id: 'artist-6',
+                                        name: 'Nova Wave',
+                                        subline: 'Indie Dance',
+                                    },
+                                    {
+                                        _id: 'artist-7',
+                                        name: 'Echo Protocol',
+                                        subline: 'Deep House',
+                                    },
+                                    {
+                                        _id: 'artist-8',
+                                        name: 'Phase Terminal',
+                                        subline: 'Techno',
+                                    },
+                                ];
+                                return query
+                                    ? all.filter((a) => a.name
+                                        .toLowerCase()
+                                        .includes(query.toLowerCase()))
+                                    : all;
+                            },
+                            options: [
+                                {
+                                    _id: 'artist-1',
+                                    name: 'Anna Melodia',
+                                    subline: 'Melodic Techno',
+                                },
+                                {
+                                    _id: 'artist-2',
+                                    name: 'Duo Beats',
+                                    subline: 'House / Tech House',
+                                },
+                                {
+                                    _id: 'artist-3',
+                                    name: 'Luna Nova',
+                                    subline: 'Progressive',
+                                },
+                            ],
+                        },
+                    },
+                    {
+                        key: 'organization',
+                        type: 'select',
+                        className: 'col-span-12 sm:col-span-6',
+                        props: {
+                            label: 'Brand',
+                            placeholder: 'Busca marca...',
+                            multi: true,
+                            hasSearch: true,
+                            remoteSearch: true,
+                            onSearch: async (query) => {
+                                const all = [
+                                    { _id: 'org-1', name: 'Afterlife Records' },
+                                    { _id: 'org-2', name: 'Innervisions' },
+                                    { _id: 'org-3', name: 'Drumcode' },
+                                    { _id: 'org-4', name: 'Diynamic' },
+                                    { _id: 'org-5', name: 'Hotflush Recordings' },
+                                    { _id: 'org-6', name: 'Cocoon Recordings' },
+                                    { _id: 'org-7', name: 'Soma Records' },
+                                    { _id: 'org-8', name: 'BPitch Control' },
+                                ];
+                                return query
+                                    ? all.filter((o) => o.name
+                                        .toLowerCase()
+                                        .includes(query.toLowerCase()))
+                                    : all;
+                            },
+                            options: [
+                                { _id: 'org-1', name: 'Afterlife Records' },
+                                { _id: 'org-2', name: 'Innervisions' },
+                                { _id: 'org-3', name: 'Drumcode' },
+                            ],
+                        },
+                    },
+                ],
+            },
+        },
+    ],
+};
+
+export { story };
+//# sourceMappingURL=xsmusices-ui-xs-formly.xsstory-Bjne7mpZ.mjs.map