v/src/vice/editor/layouts/EditorLayout.svelte

<script lang="ts">
import { getContext }       from 'svelte'
import type { EditorStore } from '../stores/editor.svelte.ts'
import TopBar               from '../comps/TopBar.svelte'
import Sidebar              from '../comps/Sidebar.svelte'
import CollectionPanel from "@/vice/editor/comps/CollectionPanel.svelte";
import OptionsPanel from "@/vice/editor/comps/OptionsPanel.svelte";
import EntitiesPanel from "@/vice/editor/comps/EntitiesPanel.svelte";

const editor = getContext<EditorStore>('editor')
</script>

<div class="flex flex-col h-screen bg-gray-950 text-gray-100 overflow-hidden">

  <TopBar />

  <div class="flex flex-1 overflow-hidden">

    <Sidebar />

    <main class="flex-1 overflow-auto">
      {#if editor.activePanel === 'catalog'}
        <CollectionPanel />
        <div class="p-8 text-gray-600 text-sm">CatalogPanel — en construcción</div>
      {:else if editor.activePanel === 'objects'}
        <EntitiesPanel />
        <div class="p-8 text-gray-600 text-sm">ObjectsPanel — en construcción</div>
      {:else if editor.activePanel === 'options'}
        <OptionsPanel />
        <div class="p-8 text-gray-600 text-sm">OptionsPanel — en construcción</div>
      {:else if editor.activePanel === 'rules'}
        <!-- <RulesPanel /> -->
        <div class="p-8 text-gray-600 text-sm">RulesPanel — en construcción</div>
      {:else if editor.activePanel === 'preview'}
        <!-- <PreviewPanel /> -->
        <div class="p-8 text-gray-600 text-sm">PreviewPanel — en construcción</div>
      {:else if editor.activePanel === 'export'}
        <!-- <ExportPanel /> -->
        <div class="p-8 text-gray-600 text-sm">ExportPanel — en construcción</div>
      {/if}
    </main>

  </div>
</div>