From d1fbf455cf623ab183fc0693431a22dcf1c1b235 Mon Sep 17 00:00:00 2001
From: dev <info@activething.com>
Date: Sat, 14 Mar 2026 11:52:16 +0100
Subject: [PATCH] .

---
 src/mtas/lib/guards.ts                        |  2 +-
 .../svelte/components/AddFieldDrawer.svelte   |  6 +-
 src/mtas/svelte/components/FieldRow.svelte    |  3 -
 .../svelte/components/MetadataEditor.svelte   |  7 +-
 src/mtas/svelte/demo/App.svelte               | 83 +------------------
 5 files changed, 11 insertions(+), 90 deletions(-)

diff --git a/src/mtas/lib/guards.ts b/src/mtas/lib/guards.ts
index 6e766a4..acc8ab0 100644
--- a/src/mtas/lib/guards.ts
+++ b/src/mtas/lib/guards.ts
@@ -24,7 +24,7 @@ export function isValidUrl(value: string): boolean {
 
 const KNOWN_TYPES: MetadataFieldType[] = [
     'string','number','boolean','ling','date','datetime',
-    'url','currency','image','video','audio','pdf','file','group',
+    'url','currency','image','video','audio','pdf','file','html','group',
 ];
 
 
diff --git a/src/mtas/svelte/components/AddFieldDrawer.svelte b/src/mtas/svelte/components/AddFieldDrawer.svelte
index 07311ae..45124a6 100644
--- a/src/mtas/svelte/components/AddFieldDrawer.svelte
+++ b/src/mtas/svelte/components/AddFieldDrawer.svelte
@@ -29,14 +29,14 @@
     let fieldValue = $state<MetadataField>(defaultForType(selectedType));
     let keyError   = $state('');
 
-    let wasOpen = $state(false);
+    let prevOpen = false;
     $effect(() => {
-        if (open && !wasOpen) {
+        if (open && !prevOpen) {
             fieldKey   = suggestKey(selectedType);
             fieldValue = defaultForType(selectedType);
             keyError   = '';
         }
-        wasOpen = open;
+        prevOpen = open;
     });
 
     function suggestKey(type: MetadataFieldType): string {
diff --git a/src/mtas/svelte/components/FieldRow.svelte b/src/mtas/svelte/components/FieldRow.svelte
index efb34c2..77c8a18 100644
--- a/src/mtas/svelte/components/FieldRow.svelte
+++ b/src/mtas/svelte/components/FieldRow.svelte
@@ -148,8 +148,6 @@
 
 <div
         id="field-row-{fieldKey}"
-        role="listitem"
-        aria-label={fieldKey}
         class={[
         'card bg-base-100 border transition-all duration-150 flex-row focus-within:border-base-content w-full',
         depth > 0 ? 'ml-5' : '',
@@ -187,7 +185,6 @@
         <div
                 role="button"
                 tabindex="0"
-                
                 onkeydown={handleExpandKey}
                 class={[
             'flex cursor-pointer items-center gap-3 px-4 focus-visible:outline-none',
diff --git a/src/mtas/svelte/components/MetadataEditor.svelte b/src/mtas/svelte/components/MetadataEditor.svelte
index 5517a21..a94916e 100644
--- a/src/mtas/svelte/components/MetadataEditor.svelte
+++ b/src/mtas/svelte/components/MetadataEditor.svelte
@@ -104,8 +104,6 @@
         const newOrder = [...keyOrder, key];
         value = { ...value, [key]: field, order: newOrder };
         emit();
-        // Ir a la última página donde aparece el nuevo campo
-        if (pageSize > 0) page = Math.ceil(newOrder.length / pageSize);
     }
 
     function updateFieldKey(oldKey: string, newKey: string): void {
@@ -152,7 +150,8 @@
     }
 </script>
 
-<div data-theme={dark ? 'dark' : 'light'} class="card bg-base-100 border border-base-200 shadow-sm w-full">
+<div data-theme={dark ? 'dark' : 'light'}>
+    <div class="card bg-base-100 border border-base-200 shadow-sm w-full">
 
         <!-- ── Header ──────────────────────────────────────────────────── -->
         <div class="card-body gap-4 pb-3 border-b border-base-200">
@@ -292,7 +291,7 @@
             </div>
         {/if}
 
-
+    </div>
 </div>
 
 <AddFieldDrawer
diff --git a/src/mtas/svelte/demo/App.svelte b/src/mtas/svelte/demo/App.svelte
index 87db8b7..a7c77b5 100644
--- a/src/mtas/svelte/demo/App.svelte
+++ b/src/mtas/svelte/demo/App.svelte
@@ -49,9 +49,8 @@
      style="font-family: 'Poppins', sans-serif;">
 
     <!-- ── Background grid ────────────────────────────────────────── -->
-    <div class="pointer-events-none fixed inset-0 opacity-[0.03] dark:opacity-[0.06]"
-         style="background-image: linear-gradient(#000 1px, transparent 1px), linear-gradient(90deg, #000 1px, transparent 1px); background-size: 32px 32px;">
-    </div>
+
+    
 
     <!-- ── Header ─────────────────────────────────────────────────── -->
     <header class="relative border-b border-zinc-200 bg-white/80 backdrop-blur dark:border-zinc-800 dark:bg-zinc-950/80">
@@ -173,50 +172,7 @@
                             <div class="h-px flex-1 bg-zinc-100 dark:bg-zinc-800"></div>
                         </div>
 
-                        <div class="flex flex-col gap-4 rounded-xl border border-zinc-200 bg-white p-4
-                                    dark:border-zinc-800 dark:bg-zinc-900">
-
-                            <!-- textarea mode -->
-                            <LingInput
-                                    value={lingValue}
-                                    {locales}
-                                    {defaultLocale}
-                                    label="Descripción"
-                                    placeholder="Escribe aquí…"
-                                    required={true}
-                                    invalid={lingInvalid}
-                                    as="textarea"
-                                    rows={3}
-                                    onUpdate={(v) => lingValue = v}
-                            />
-
-                            <!-- input mode -->
-                            <LingInput
-                                    value={lingValue}
-                                    {locales}
-                                    {defaultLocale}
-                                    label="Título"
-                                    as="input"
-                                    onUpdate={(v) => lingValue = v}
-                            />
-
-                            <!-- Invalid toggle -->
-                            <div class="flex items-center gap-2 border-t border-zinc-100 pt-3 dark:border-zinc-800">
-                                <span class="font-mono text-[10px] text-zinc-400">Simular inválido</span>
-                                <button
-                                        onclick={() => lingInvalid = !lingInvalid}
-                                        class={[
-                                        'relative h-5 w-9 rounded-full transition-colors duration-200',
-                                        lingInvalid ? 'bg-red-400' : 'bg-zinc-200 dark:bg-zinc-700',
-                                    ].join(' ')}
-                                >
-                                    <span class={[
-                                        'absolute top-0.5 h-4 w-4 rounded-full bg-white shadow transition-transform duration-200',
-                                        lingInvalid ? 'translate-x-4' : 'translate-x-0.5',
-                                    ].join(' ')}></span>
-                                </button>
-                            </div>
-                        </div>
+                        
                     </div>
 
                     <!-- Stats card -->
@@ -238,38 +194,7 @@
                         </div>
                     </div>
 
-                    <!-- Type legend -->
-                    <div class="rounded-xl border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900">
-                        <p class="mb-3 font-mono text-[10px] font-bold uppercase tracking-[0.16em] text-zinc-400 dark:text-zinc-600">
-                            Tipos disponibles
-                        </p>
-                        <div class="flex flex-wrap gap-1.5">
-                            {#each ['string','number','boolean','ling','date','datetime','url','currency','image','video','audio','pdf','file','group'] as type}
-                                {@const colors: Record<string, string> = {
-                                    string:     'bg-sky-50 text-sky-500 border-sky-200 dark:bg-sky-900/20 dark:text-sky-400 dark:border-sky-800',
-                                    number:     'bg-violet-50 text-violet-500 border-violet-200 dark:bg-violet-900/20 dark:text-violet-400 dark:border-violet-800',
-                                    boolean:    'bg-amber-50 text-amber-500 border-amber-200 dark:bg-amber-900/20 dark:text-amber-400 dark:border-amber-800',
-                                    ling: 'bg-emerald-50 text-emerald-500 border-emerald-200 dark:bg-emerald-900/20 dark:text-emerald-400 dark:border-emerald-800',
-                                    date:       'bg-orange-50 text-orange-500 border-orange-200 dark:bg-orange-900/20 dark:text-orange-400 dark:border-orange-800',
-                                    datetime:   'bg-rose-50 text-rose-500 border-rose-200 dark:bg-rose-900/20 dark:text-rose-400 dark:border-rose-800',
-                                    url:        'bg-cyan-50 text-cyan-500 border-cyan-200 dark:bg-cyan-900/20 dark:text-cyan-400 dark:border-cyan-800',
-                                    currency:   'bg-lime-50 text-lime-500 border-lime-200 dark:bg-lime-900/20 dark:text-lime-400 dark:border-lime-800',
-                                    image:      'bg-pink-50 text-pink-500 border-pink-200 dark:bg-pink-900/20 dark:text-pink-400 dark:border-pink-800',
-                                    video:      'bg-red-50 text-red-500 border-red-200 dark:bg-red-900/20 dark:text-red-400 dark:border-red-800',
-                                    audio:      'bg-purple-50 text-purple-500 border-purple-200 dark:bg-purple-900/20 dark:text-purple-400 dark:border-purple-800',
-                                    pdf:        'bg-zinc-100 text-zinc-500 border-zinc-200 dark:bg-zinc-800 dark:text-zinc-400 dark:border-zinc-700',
-                                    file:       'bg-teal-50 text-teal-500 border-teal-200 dark:bg-teal-900/20 dark:text-teal-400 dark:border-teal-800',
-                                    group:      'bg-indigo-50 text-indigo-500 border-indigo-200 dark:bg-indigo-900/20 dark:text-indigo-400 dark:border-indigo-800',
-                                }}
-                                <span class={[
-                                    'rounded border px-1.5 py-0.5 font-mono text-[9px] font-bold uppercase tracking-widest',
-                                    colors[type] ?? '',
-                                ].join(' ')}>
-                                    {type}
-                                </span>
-                            {/each}
-                        </div>
-                    </div>
+
 
                 </div>
             </div>