v/src/mtas/svelte/demo/App.svelte

<script lang="ts">
    import './app.css';
    import MetadataEditor from '../components/MetadataEditor.svelte';
    import { ling as lingInstance } from '@/ling/lib'
    import LingInput from '@/ling/svelte/LingInput.svelte';
    import {type Metadata} from '../../lib';
    import {createLing, type LingNode, type LingRecord, p} from '@/ling/lib';
    import {createGlob, type CurrDefinition} from '@/glob/lib'
    import {unitData} from "@/glob/lib/unit_data.ts";
    import { nameSpace, translations} from "@/mtas/lib/translations.ts";
    import MetaTree from "@/mtas/svelte/components/MetaTree.svelte";

    // ── Demo metadata ────────────────────────────────────────────────
    let metadata = $state<Metadata>({
        order: ['nombre','año','disponible','descripcion','lanzamiento','ultima_mod','web','precio','foto','manual','specs'],
        nombre:      { type: 'string',     value: 'Toyota Corolla' },
        año:         { type: 'number',     value: 2024 },
        disponible:  { type: 'boolean',    value: true },
        descripcion: { type: 'ling',       value: { es: 'Sedán compacto fiable', en: 'Reliable compact sedan' } as LingRecord },
        lanzamiento: { type: 'date',       value: '2024-01-15' },
        ultima_mod:  { type: 'datetime',   value: '2024-03-09T10:00:00Z' },
        web:         { type: 'url',        value: 'https://toyota.es' },
        precio:      { type: 'currency',   value: { amount: 24990, currency: 'EUR' } },
        foto:        { type: 'image',      value: { url: 'https://images.unsplash.com/photo-1621007947382-bb3c3994e3fb?w=400&h=300&fit=crop', mimeType: 'image/jpeg' } },
        manual:      { type: 'pdf',        value: { url: 'https://example.com/manual.pdf', filename: 'manual.pdf' } },
        specs:       { type: 'group',      value: {
                motor:    { type: 'string', value: '1.8 VVT-i' },
                cv:       { type: 'number', value: 122 },
                traccion: { type: 'string', value: 'FWD' },
            }, order: ['cv', 'motor', 'traccion'] },
    });

    let showJson  = $state(false);
    let darkMode  = $state(false);
    let activeTab = $state<'editor' | 'tree'>('editor');

    const defaultLocale = 'es';

    const currDefinitions: Record<string, CurrDefinition> = {
        EUR: {
            symbol         : '€',
            code           : 'EUR',
            name           : p({
                es: { one: 'euro',   other: 'euros'   },
                en: { one: 'euro',   other: 'euros'   },
            }),
            conversionValue: 1,
        },
        USD: {
            symbol         : '$',
            code           : 'USD',
            name           : p({
                es: { one: 'dólar',  other: 'dólares' },
                en: { one: 'dollar', other: 'dollars' },
            }),
            conversionValue: 1.08,
        },
    };

    const glob = createGlob({
        locale : defaultLocale,
        locales: ['es', 'en'],
        ling   : lingInstance,
        numr   : { minDecimals: 0, maxDecimals: 2 },
        curr   : { definitions: currDefinitions, selectedCurrency: 'EUR' },
        dati   : { selectedTimeFormat: '24h' },
        unit   : { selectedSystem: 'metric', categories: unitData },
    });
    glob.ling.extend(nameSpace, translations);
</script>

<svelte:head>
    <title>meta-content · Demo</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet" />
</svelte:head>

<div class={['min-h-screen transition-colors duration-300', darkMode ? 'dark bg-zinc-950' : 'bg-zinc-50'].join(' ')}
     style="font-family: 'Poppins', sans-serif;">

    <!-- ── Header ─────────────────────────────────────────────────── -->
    <header class="relative border-b border-zinc-200 bg-white/80 backdrop-blur dark:border-zinc-800 dark:bg-zinc-950/80">
        <div class="mx-auto flex max-w-5xl items-center justify-between px-6 py-4">
            <div class="flex items-center gap-3">
                <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-zinc-900 dark:bg-white">
                    <svg class="h-4 w-4 text-white dark:text-zinc-900" viewBox="0 0 16 16" fill="currentColor">
                        <rect x="1" y="1" width="6" height="6" rx="1"/>
                        <rect x="9" y="1" width="6" height="6" rx="1"/>
                        <rect x="1" y="9" width="6" height="6" rx="1"/>
                        <rect x="9" y="9" width="6" height="6" rx="1" opacity="0.4"/>
                    </svg>
                </div>
                <div>
                    <span class="font-mono text-[11px] font-bold uppercase tracking-[0.2em] text-zinc-800 dark:text-zinc-200">
                        meta-content
                    </span>
                    <span class="ml-2 rounded border border-zinc-200 px-1.5 py-0.5 font-mono text-[9px] text-zinc-400 dark:border-zinc-700 dark:text-zinc-500">
                        v0.1.0
                    </span>
                </div>
            </div>

            <div class="flex items-center gap-3">
                <button
                        onclick={() => showJson = !showJson}
                        class={[
                        'rounded-lg border px-3 py-1.5 font-mono text-[11px] font-medium transition-all duration-150',
                        showJson
                            ? 'border-zinc-800 bg-zinc-900 text-white dark:border-zinc-200 dark:bg-white dark:text-zinc-900'
                            : 'border-zinc-200 text-zinc-500 hover:border-zinc-300 dark:border-zinc-700 dark:text-zinc-400',
                    ].join(' ')}
                >
                    {showJson ? '← editor' : 'JSON →'}
                </button>
                <button
                        onclick={() => darkMode = !darkMode}
                        class="flex h-8 w-8 items-center justify-center rounded-lg border border-zinc-200
                           text-zinc-400 transition-colors hover:border-zinc-300 hover:text-zinc-600
                           dark:border-zinc-700 dark:text-zinc-500 dark:hover:border-zinc-600 dark:hover:text-zinc-300"
                >
                    {#if darkMode}
                        <svg class="h-4 w-4" viewBox="0 0 16 16" fill="currentColor">
                            <path d="M8 1a.75.75 0 0 1 .75.75v1a.75.75 0 0 1-1.5 0v-1A.75.75 0 0 1 8 1zM8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm5.657-8.157a.75.75 0 0 1 0 1.06l-.707.708a.75.75 0 0 1-1.06-1.06l.707-.708a.75.75 0 0 1 1.06 0zM3.05 4.904a.75.75 0 0 1-1.06-1.06l.707-.708a.75.75 0 0 1 1.06 1.06l-.707.708zM15 8a.75.75 0 0 1-.75.75h-1a.75.75 0 0 1 0-1.5h1A.75.75 0 0 1 15 8zM2.75 8a.75.75 0 0 1-.75.75H.75a.75.75 0 0 1 0-1.5H2A.75.75 0 0 1 2.75 8zM12.95 11.096a.75.75 0 0 1 1.06 1.06l-.707.708a.75.75 0 0 1-1.06-1.06l.707-.708zm-9.9 0l.707.708a.75.75 0 0 1-1.06 1.06l-.707-.707a.75.75 0 0 1 1.06-1.061z"/>
                        </svg>
                    {:else}
                        <svg class="h-4 w-4" viewBox="0 0 16 16" fill="currentColor">
                            <path d="M6 .278a.75.75 0 0 1 .18.83A7 7 0 1 0 14.85 9.5a.75.75 0 0 1 .83.18A8.5 8.5 0 1 1 6 .278z"/>
                        </svg>
                    {/if}
                </button>
            </div>
        </div>
    </header>

    <!-- ── Main ───────────────────────────────────────────────────── -->
    <main class="mx-auto max-w-5xl px-6 py-10">

        <!-- Hero -->
        <div class="mb-10">
            <h1 class="text-[42px] font-extrabold leading-none tracking-tight text-zinc-900 dark:text-zinc-100">
                Metadata<br/>
                <span class="text-zinc-300 dark:text-zinc-700">Editor</span>
            </h1>
            <p class="mt-3 font-mono text-[12px] text-zinc-400 dark:text-zinc-500">
                Campos tipados · Validación en tiempo real · Dark mode
            </p>
        </div>

        {#if showJson}
            <!-- ── JSON view ─────────────────────────────────────── -->
            <div class="rounded-xl border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-900">
                <div class="flex items-center justify-between border-b border-zinc-100 px-4 py-3 dark:border-zinc-800">
                    <span class="font-mono text-[10px] font-bold uppercase tracking-widest text-zinc-400">
                        metadata · serializado
                    </span>
                    <button
                            onclick={() => navigator.clipboard.writeText(JSON.stringify(metadata, null, 2))}
                            class="rounded border border-zinc-200 px-2 py-1 font-mono text-[10px] text-zinc-400
                               hover:border-zinc-300 hover:text-zinc-600 dark:border-zinc-700 dark:hover:border-zinc-600"
                    >
                        copiar
                    </button>
                </div>
                <pre class="overflow-auto p-4 font-mono text-[11px] leading-relaxed text-zinc-600 dark:text-zinc-400"
                >{JSON.stringify(metadata, null, 2)}</pre>
            </div>

        {:else}
            <!-- ── Tabs ───────────────────────────────────────────── -->
            <div class="flex flex-col gap-4 h-[640px]">

                <!-- Tab bar -->
                <div class="flex items-center gap-1 border-b border-zinc-200 dark:border-zinc-800">
                    <button
                            type="button"
                            onclick={() => activeTab = 'editor'}
                            class={[
                            'px-4 py-2 font-mono text-[11px] font-medium border-b-2 -mb-px transition-colors',
                            activeTab === 'editor'
                                ? 'border-zinc-900 text-zinc-900 dark:border-zinc-100 dark:text-zinc-100'
                                : 'border-transparent text-zinc-400 hover:text-zinc-600 dark:text-zinc-600 dark:hover:text-zinc-400',
                        ].join(' ')}
                    >
                        MetadataEditor
                    </button>
                    <button
                            type="button"
                            onclick={() => activeTab = 'tree'}
                            class={[
                            'px-4 py-2 font-mono text-[11px] font-medium border-b-2 -mb-px transition-colors',
                            activeTab === 'tree'
                                ? 'border-zinc-900 text-zinc-900 dark:border-zinc-100 dark:text-zinc-100'
                                : 'border-transparent text-zinc-400 hover:text-zinc-600 dark:text-zinc-600 dark:hover:text-zinc-400',
                        ].join(' ')}
                    >
                        MetaTree
                    </button>
                </div>

                <!-- Tab content -->
                <div class="flex-1 min-h-0">
                    {#if activeTab === 'editor'}
                        <MetadataEditor
                                {glob}
                                bind:value={metadata}
                                attributes={['hidden', 'required']}
                                dark={darkMode}
                                onUpdate={(m) => metadata = m}
                        />
                    {:else}
                        <MetaTree
                                {glob}
                                bind:value={metadata}
                                attributes={['hidden', 'required']}
                                dark={darkMode}
                                onUpdate={(m) => metadata = m}
                        />
                    {/if}
                </div>

            </div>
        {/if}

    </main>

    <!-- ── Footer ─────────────────────────────────────────────────── -->
    <footer class="border-t border-zinc-100 py-6 dark:border-zinc-800">
        <p class="text-center font-mono text-[10px] text-zinc-300 dark:text-zinc-700">
            meta-content · TypeScript · Svelte 5 · Tailwind CSS
        </p>
    </footer>

</div>

<style>
    :global(*) { font-family: 'Poppins', sans-serif !important; }
    :global(code), :global(pre) { font-family: 'Poppins', sans-serif !important; }
</style>