diff --git a/packages/tui-components-svelte/README.md b/packages/tui-components-svelte/README.md
index 6e1a564..c1222b5 100644
--- a/packages/tui-components-svelte/README.md
+++ b/packages/tui-components-svelte/README.md
@@ -2,3 +2,15 @@
 
 This is a component and module library for building user interfaces and features.
 It exports many base ui elements like buttons, switches, etc. But also exports modules like media or call that allow you to easily build such features into your Svelte app.
+
+## Todos
+
+### `modals`
+
+- [ ] Darken+Blur background transition
+- [ ] `onClose` handler with if check possibility and modal to confirm possibility
+- [ ] remove `data`, it should not be handled by this library
+
+### `tabs`
+
+- [ ] Handle support for Components+Props
diff --git a/packages/tui-components-svelte/package.json b/packages/tui-components-svelte/package.json
index 2f5327e..75de64d 100644
--- a/packages/tui-components-svelte/package.json
+++ b/packages/tui-components-svelte/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@timephy/tui-components-svelte",
-    "version": "0.0.26",
+    "version": "0.0.27",
     "description": "",
     "homepage": "https://github.com/timephy/tui/tree/main/tui-components-svelte#readme",
     "scripts": {
@@ -109,6 +109,7 @@
             "types": "./dist/ui/Icon.svelte.d.ts",
             "svelte": "./dist/ui/Icon.svelte"
         },
+        "./tabs": "./dist/tabs/index.js",
         "./tabs/TabViewController.svelte": {
             "types": "./dist/tabs/TabViewController.svelte.d.ts",
             "svelte": "./dist/tabs/TabViewController.svelte"
@@ -116,6 +117,15 @@
         "./tabs/TabView.svelte": {
             "types": "./dist/tabs/TabView.svelte.d.ts",
             "svelte": "./dist/tabs/TabView.svelte"
+        },
+        "./modals": "./dist/modals/index.js",
+        "./modals/ModalViewController.svelte": {
+            "types": "./dist/modals/ModalViewController.svelte.d.ts",
+            "svelte": "./dist/modals/ModalViewController.svelte"
+        },
+        "./modals/ModalView.svelte": {
+            "types": "./dist/modals/ModalView.svelte.d.ts",
+            "svelte": "./dist/modals/ModalView.svelte"
         }
     },
     "author": "",
diff --git a/packages/tui-components-svelte/src/lib/modal/ModalView.svelte b/packages/tui-components-svelte/src/lib/modal/ModalView.svelte
deleted file mode 100644
index 5a42849..0000000
--- a/packages/tui-components-svelte/src/lib/modal/ModalView.svelte
+++ /dev/null
@@ -1,105 +0,0 @@
-<script lang="ts" module>
-    import { getContext, setContext, type Snippet } from "svelte"
-
-    export type ModalViewOptions = {
-        /** Whether the modal is fullscreen. */
-        fullscreen: boolean
-        /** Whether the modal should close when the escape key is pressed. */
-        escClose: boolean
-    }
-
-    const MODAL_CONTEXT = "tui.modal"
-    export type ModalContext<D extends Record<string, unknown>> = {
-        /** The identifier of the modal. */
-        readonly id: string
-        /** If the modal is currently the top modal and therefore visible. */
-        readonly topMost: boolean
-        /** if the modal is the bottom most modal. */
-        readonly bottomMost: boolean
-        /** Close the modal. */
-        close(): void
-        viewOptions: ModalViewOptions
-        dict: D
-    }
-
-    /**
-     * Call this function from a child of `ModalView` to get the ModalContext.
-     */
-    export function getModalContext<D extends Record<string, unknown>>() {
-        const context = getContext(MODAL_CONTEXT)
-        if (context === undefined) throw new Error("No ModalContext found")
-        return context as ModalContext<D>
-    }
-</script>
-
-<script lang="ts">
-    const {
-        id,
-        topMost,
-        bottomMost,
-        close,
-        children,
-    }: {
-        id: string
-        topMost: boolean
-        bottomMost: boolean
-        close: () => void
-        children: Snippet
-    } = $props()
-
-    /* ============================================================================================================== */
-
-    let _viewOptions: ModalViewOptions = $state({
-        fullscreen: false,
-        escClose: true,
-    })
-    let _dict: Record<string, unknown> = $state({})
-
-    /* ============================================================================================================== */
-
-    const context: ModalContext<Record<string, unknown>> = {
-        get id() {
-            return id
-        },
-        get topMost() {
-            return topMost
-        },
-        get bottomMost() {
-            return bottomMost
-        },
-        close,
-        get viewOptions() {
-            return _viewOptions
-        },
-        set viewOptions(viewOptions) {
-            _viewOptions = viewOptions
-        },
-        get dict() {
-            return _dict
-        },
-        set dict(dict) {
-            _dict = dict
-        },
-    }
-    setContext(MODAL_CONTEXT, context)
-
-    /* ============================================================================================================== */
-
-    const onkeydown = (e: KeyboardEvent) => {
-        if (topMost && _viewOptions.escClose && e.key === "Escape") {
-            context.close()
-        }
-    }
-</script>
-
-<svelte:window {onkeydown} />
-
-<div
-    id="ModalView"
-    class="absolute inset-0 z-40 flex flex-col items-center justify-center
-        bg-black/75 backdrop-blur-sm transition-opacity duration-300"
-    style:display={topMost || _viewOptions.fullscreen ? "" : "none"}
-    ontouchmove={(e) => e.stopPropagation()}
->
-    {@render children()}
-</div>
diff --git a/packages/tui-components-svelte/src/lib/modal/ModalViewController.svelte b/packages/tui-components-svelte/src/lib/modal/ModalViewController.svelte
deleted file mode 100644
index e552d55..0000000
--- a/packages/tui-components-svelte/src/lib/modal/ModalViewController.svelte
+++ /dev/null
@@ -1,98 +0,0 @@
-<script lang="ts" module>
-    const MODAL_VIEW_CONTROLLER_CONTEXT = "tui.modalViewController"
-    export type ComponentWithProps<Props extends Record<string, unknown>> = {
-        component: Component<Props>
-        props: Props
-    }
-    export type ModalViewControllerContext = {
-        push<Props extends Record<string, unknown>>(
-            view: Snippet | ComponentWithProps<Props>,
-            options?: ModalOptions,
-        ): void
-        pop(): void
-        popToRoot(): void
-        remove(id: string): void
-    }
-
-    /**
-     * Call this function from a child of `ModalViewController` to get the ModalViewControllerContext.
-     */
-    export function getModalViewControllerContext() {
-        const context = getContext(MODAL_VIEW_CONTROLLER_CONTEXT)
-        if (context === undefined) throw new Error("No ModalViewControllerContext found")
-        return context as ModalViewControllerContext
-    }
-
-    /* ============================================================================================================== */
-
-    export type ModalOptions = {
-        id?: string
-    }
-    type Modal = {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        view: Snippet | ComponentWithProps<any>
-        id: string
-    }
-</script>
-
-<script lang="ts">
-    import { getContext, setContext, type Component, type Snippet } from "svelte"
-    import ModalView from "./ModalView.svelte"
-
-    const {
-        children,
-    }: {
-        children: Snippet
-    } = $props()
-
-    let modals: Modal[] = $state([])
-
-    // on desktop this hides the scrollbar, disabling scrolling alltogether
-    $effect(() => {
-        if (modals.length > 0) {
-            document.body.classList.add("overflow-hidden")
-        } else {
-            document.body.classList.remove("overflow-hidden")
-        }
-    })
-
-    /* ============================================================================================================== */
-
-    const MODALVC: ModalViewControllerContext = {
-        push(view, options) {
-            const id = options?.id ?? Math.random().toString(36).substring(7)
-            modals.push({ view, id })
-        },
-        pop() {
-            modals.pop()
-        },
-        popToRoot() {
-            modals = []
-        },
-        remove(id) {
-            modals = modals.filter((modal) => modal.id !== id)
-        },
-    }
-    setContext(MODAL_VIEW_CONTROLLER_CONTEXT, MODALVC)
-</script>
-
-<div id="ModalViewController" class="relative h-full w-full">
-    <!-- NOTE: Key `modal.id` to reuse components -->
-    {#each modals as modal, i (modal.id)}
-        <ModalView
-            id={modal.id}
-            topMost={i === modals.length - 1}
-            bottomMost={i === 0}
-            close={() => MODALVC.remove(modal.id)}
-        >
-            {#if modal.view instanceof Function}
-                {@render modal.view()}
-            {:else}
-                <modal.view.component {...modal.view.props} />
-            {/if}
-        </ModalView>
-    {/each}
-
-    <!-- NOTE: Render normal children here -->
-    {@render children()}
-</div>
diff --git a/packages/tui-components-svelte/src/lib/modals/ModalView.svelte b/packages/tui-components-svelte/src/lib/modals/ModalView.svelte
new file mode 100644
index 0000000..9906eba
--- /dev/null
+++ b/packages/tui-components-svelte/src/lib/modals/ModalView.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+    import { setContext, type Snippet } from "svelte"
+    import type { Modal } from "."
+    import { MODAL_KEY } from "./internal"
+
+    const {
+        id,
+        topMost,
+        bottomMost,
+        close,
+        children,
+    }: {
+        id: string
+        topMost: boolean
+        bottomMost: boolean
+        close: () => void
+        children: Snippet
+    } = $props()
+
+    /* ============================================================================================================== */
+
+    let _fullscreen = $state(false)
+    let _escClose = $state(true)
+
+    /* ============================================================================================================== */
+
+    const MODAL: Modal = {
+        get id() {
+            return id
+        },
+        get topMost() {
+            return topMost
+        },
+        get bottomMost() {
+            return bottomMost
+        },
+        close,
+        get fullscreen() {
+            return _fullscreen
+        },
+        set fullscreen(fullscreen) {
+            _fullscreen = fullscreen
+        },
+        get escClose() {
+            return _escClose
+        },
+        set escClose(escClose) {
+            _escClose = escClose
+        },
+    }
+    setContext(MODAL_KEY, MODAL)
+
+    /* ============================================================================================================== */
+
+    const onkeydown = (e: KeyboardEvent) => {
+        if (topMost && _escClose && e.key === "Escape") {
+            MODAL.close()
+        }
+    }
+</script>
+
+<svelte:window {onkeydown} />
+
+<div
+    id="ModalView"
+    class="absolute inset-0 z-40 flex flex-col items-center justify-center
+        bg-black/75 backdrop-blur-sm transition-opacity duration-300"
+    style:display={topMost || _fullscreen ? "" : "none"}
+    ontouchmove={(e) => e.stopPropagation()}
+>
+    {@render children()}
+</div>
diff --git a/packages/tui-components-svelte/src/lib/modals/ModalViewController.svelte b/packages/tui-components-svelte/src/lib/modals/ModalViewController.svelte
new file mode 100644
index 0000000..8340c96
--- /dev/null
+++ b/packages/tui-components-svelte/src/lib/modals/ModalViewController.svelte
@@ -0,0 +1,149 @@
+<!--
+    @component
+    A controller for managing modals.
+
+    Wrap your app in this component in your root `+page.svelte` to enable modals.
+
+    @example
+    ```svelte
+    <script lang="ts">
+        import ModalViewController from "@timui/modals"
+        import type { Snippet } from "svelte"
+
+        const {
+            children,
+        }: {
+            children: Snippet
+        } = $props()
+    </script>
+
+    <ModalViewController>
+        {@render children()}
+    </ModalViewController>
+    ```
+
+    And then inside your app, you can use access the ModalController:
+
+    ```svelte
+    <script lang="ts">
+        import { getModalController } from "@timui/modals"
+
+        const MODAL_C = getModalController()
+
+        // push a new modal using a snippet
+        MODAL_C.push(snippet)
+        // push a new modal using a component with props
+        MODAL_C.push({
+            component: MyModal,
+            props: { title: "Hello" },
+        })
+
+        // pop the top most modal
+        MODAL_C.pop()
+        // pop all modals
+        MODAL_C.popAll()
+
+        // remove a specific modal
+        MODAL_C.remove("modal-id")
+
+        // get the number of modals
+        console.log(MODAL_C.count)
+    </script>
+    ```
+
+    And to access the current modal:
+
+    ```svelte
+    <script lang="ts">
+        import { getModal } from "@timui/modals"
+
+        const MODAL = getModal()
+
+        // configure the modal
+        MODAL.fullscreen = true
+        MODAL.escClose = false
+        MODAL.data = { key: "value" } // { title: "Hello" }
+
+        // close the modal
+        MODAL.close()
+    </script>
+    ```
+-->
+
+<script lang="ts">
+    import { setContext, type Snippet } from "svelte"
+    import { MODAL_CONTROLLER_KEY, type ComponentWithProps } from "./internal"
+    import ModalView from "./ModalView.svelte"
+    import type { ModalController } from "."
+
+    /* ==================================================== Props =================================================== */
+
+    const {
+        children,
+    }: {
+        children: Snippet
+    } = $props()
+
+    /* ==================================================== State =================================================== */
+
+    type Modal = {
+        id: string
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        view: Snippet | ComponentWithProps<any>
+    }
+    let modals: Modal[] = $state([])
+
+    /* =================================================== Context ================================================== */
+
+    const MODAL_C: ModalController = {
+        push(view, options) {
+            const id = options?.id ?? Math.random().toString(36).substring(7)
+            modals.push({ view, id })
+        },
+        pop() {
+            modals.pop()
+        },
+        popAll() {
+            modals = []
+        },
+        remove(id) {
+            modals = modals.filter((modal) => modal.id !== id)
+        },
+        get count() {
+            return modals.length
+        },
+    }
+    setContext(MODAL_CONTROLLER_KEY, MODAL_C)
+
+    /* =================================================== Effects ================================================== */
+
+    // on desktop this hides the scrollbar, disabling scrolling alltogether
+    $effect(() => {
+        if (modals.length > 0) {
+            document.body.classList.add("overflow-hidden")
+        } else {
+            document.body.classList.remove("overflow-hidden")
+        }
+    })
+</script>
+
+<div id="ModalViewController" class="relative h-full w-full">
+    <!-- NOTE: Key `modal.id` to reuse components -->
+    {#each modals as modal, i (modal.id)}
+        <ModalView
+            id={modal.id}
+            topMost={i === modals.length - 1}
+            bottomMost={i === 0}
+            close={() => MODAL_C.remove(modal.id)}
+        >
+            {#if modal.view instanceof Function}
+                {@render modal.view()}
+            {:else}
+                <modal.view.component {...modal.view.props} />
+            {/if}
+        </ModalView>
+    {/each}
+
+    <!-- NOTE: Render normal children here -->
+    {@render children()}
+</div>
diff --git a/packages/tui-components-svelte/src/lib/modals/index.ts b/packages/tui-components-svelte/src/lib/modals/index.ts
new file mode 100644
index 0000000..451c497
--- /dev/null
+++ b/packages/tui-components-svelte/src/lib/modals/index.ts
@@ -0,0 +1,51 @@
+import { getContext, type Snippet } from "svelte"
+import { MODAL_KEY, MODAL_CONTROLLER_KEY, type ComponentWithProps } from "./internal"
+
+export type ModalOptions = {
+    id?: string
+}
+
+/** The context object available through `getModalController()` to add/remove modals. */
+export type ModalController = {
+    push<Props extends Record<string, unknown>>(view: Snippet | ComponentWithProps<Props>, options?: ModalOptions): void
+    pop(): void
+    popAll(): void
+    remove(id: string): void
+    readonly count: number
+}
+
+/**
+ * Call this function from a child of `ModalController` to get the ModalControllerContext.
+ */
+export function getModalController() {
+    const context = getContext(MODAL_CONTROLLER_KEY)
+    if (context === undefined) throw new Error("No ModalViewControllerContext found")
+    return context as ModalController
+}
+
+/* ================================================================================================================== */
+
+/** The context object available through `getModal()` to control the current modal. */
+export type Modal = {
+    /** The identifier of the modal. */
+    readonly id: string
+    /** If the modal is currently the top modal and therefore visible. */
+    readonly topMost: boolean
+    /** if the modal is the bottom most modal. */
+    readonly bottomMost: boolean
+    /** Close the modal. */
+    close(): void
+    /** Whether the modal is fullscreen. */
+    fullscreen: boolean
+    /** Whether the modal should close when the escape key is pressed. */
+    escClose: boolean
+}
+
+/**
+ * Call this function from a child of `Modal` to get the ModalContext.
+ */
+export function getModal() {
+    const context = getContext(MODAL_KEY)
+    if (context === undefined) throw new Error("No ModalContext found")
+    return context as Modal
+}
diff --git a/packages/tui-components-svelte/src/lib/modals/internal.ts b/packages/tui-components-svelte/src/lib/modals/internal.ts
new file mode 100644
index 0000000..fea3296
--- /dev/null
+++ b/packages/tui-components-svelte/src/lib/modals/internal.ts
@@ -0,0 +1,9 @@
+import type { Component } from "svelte"
+
+export const MODAL_CONTROLLER_KEY = "timui.ModalController"
+export const MODAL_KEY = "timui.Modal"
+
+export type ComponentWithProps<Props extends Record<string, unknown>> = {
+    component: Component<Props>
+    props: Props
+}
diff --git a/packages/tui-components-svelte/src/lib/tabs/TabView.svelte b/packages/tui-components-svelte/src/lib/tabs/TabView.svelte
index 3fd5270..1bcd693 100644
--- a/packages/tui-components-svelte/src/lib/tabs/TabView.svelte
+++ b/packages/tui-components-svelte/src/lib/tabs/TabView.svelte
@@ -6,34 +6,10 @@
     - It provides a context to its children to allow them to interact with the tab.
 -->
 
-<script lang="ts" module>
-    export type OnSelectTab = () => void
-
-    const TAB_CONTEXT = "tui.tab"
-    export type TabContext = {
-        /** Whether the tab is selected. */
-        selected: boolean
-        /**
-         * Register a callback to run when this tab is selected.
-         *
-         * - Will always run after `onSelected` inside `TabViewController`.
-         * - Will not run on the server.
-         */
-        onSelected(cb: OnSelectTab): void
-    }
-
-    /**
-     * Call this function from a child of `TabView` to get the TabContext.
-     */
-    export function getTabContext() {
-        const context = getContext(TAB_CONTEXT)
-        if (context === undefined) throw new Error("No TabContext found")
-        return context as TabContext
-    }
-</script>
-
 <script lang="ts">
-    import { getContext, setContext, untrack, type Snippet } from "svelte"
+    import { setContext, untrack, type Snippet } from "svelte"
+    import type { Tab } from "."
+    import { TAB_KEY, type Fn } from "./internal"
 
     /* ============================================================================================================== */
 
@@ -47,11 +23,11 @@
 
     /* ============================================================================================================== */
 
-    const context: TabContext = {
+    const TAB: Tab = {
         get selected() {
             return selected
         },
-        onSelected(cb: OnSelectTab) {
+        onSelected(cb: Fn) {
             $effect.pre(() => {
                 if (selected) {
                     untrack(cb)
@@ -59,7 +35,7 @@
             })
         },
     }
-    setContext(TAB_CONTEXT, context)
+    setContext(TAB_KEY, TAB)
 </script>
 
 <div id="TabView" class="h-full w-full overflow-auto overscroll-contain" style:display={selected ? "" : "none"}>
diff --git a/packages/tui-components-svelte/src/lib/tabs/TabViewController.svelte b/packages/tui-components-svelte/src/lib/tabs/TabViewController.svelte
index 52b4fff..990efb1 100644
--- a/packages/tui-components-svelte/src/lib/tabs/TabViewController.svelte
+++ b/packages/tui-components-svelte/src/lib/tabs/TabViewController.svelte
@@ -2,28 +2,60 @@
     @component
     A TabViewController is a component that manages multiple tabs and their views.
 
-    - It displays the views of the tabs based on the selected tab.
-    - It makes the view scrollable, so that the tab bar is always visible.
-    - It provides a tab bar to switch between tabs.
 
-    ## Layout
+    @example
+    ```svelte
+    <script lang="ts">
+        import { TabViewController } from "@timui/tabs"
+        import type { TabDef } from "@timui/tabs"
+        import Tab1 from "./Tab1.svelte"
+        import Tab2 from "./Tab2.svelte"
+        import Tab3 from "./Tab3.svelte"
 
-    - The TabViewController is `h-full w-full` and `flex-col`.
-    - The TabContent is `grow overflow-auto overscroll-contain`.
-    - The TabBar is `flex items-center justify-center` and has `bg` and `border-t`.
-        - You should apply `barClass="px- py- gap-"` yourself.
+        const tabs: Record<string, TabDef> = { // this could be `$derived({ ... })`
+            tab1: {
+                item: tab1Item,
+                view: tab1View,
+            },
+            tab2: {
+                item: tab2Item,
+                view: tab2View,
+            },
+        }
+        let selected: keyof typeof tabs = $state("tab1")
+
+        function onSelected(tabId: string) {
+            console.log(`Selected tab: ${tabId}`)
+        }
+    </script>
+
+    <TabViewController {tabs} {selected} {onSelected} />
+    ```
+
+    And then inside a tab view:
+
+    ```svelte
+    <script lang="ts">
+        import { getTab } from "@timui/tabs"
+
+        const TAB = getTab()
+
+        let i = $state(0)
+
+        tab.onSelected(() => {
+            console.log("onSelect")
+            i++
+        })
+    </script>
+    ```
 -->
 
 <script lang="ts" module>
-    import { untrack, type Snippet } from "svelte"
+    import { untrack } from "svelte"
+    import type { TabDef } from "."
     import TabView from "./TabView.svelte"
 
     export type SelectTab = () => void
-
-    export type TabDef = {
-        item: Snippet<[boolean, SelectTab]>
-        view: Snippet
-    }
 </script>
 
 <script lang="ts" generics="Tabs extends Record<string, TabDef>">
diff --git a/packages/tui-components-svelte/src/lib/tabs/index.ts b/packages/tui-components-svelte/src/lib/tabs/index.ts
new file mode 100644
index 0000000..fab3cc0
--- /dev/null
+++ b/packages/tui-components-svelte/src/lib/tabs/index.ts
@@ -0,0 +1,28 @@
+import { getContext, type Snippet } from "svelte"
+import { TAB_KEY, type Fn } from "./internal"
+
+export type TabDef = {
+    item: Snippet<[boolean, Fn]>
+    view: Snippet
+}
+
+export type Tab = {
+    /** Whether the tab is selected. */
+    selected: boolean
+    /**
+     * Register a callback to run when this tab is selected.
+     *
+     * - Will always run after `onSelected` inside `TabViewController`.
+     * - Will not run on the server.
+     */
+    onSelected(cb: Fn): void
+}
+
+/**
+ * Call this function from a child of `TabView` to get the TabContext.
+ */
+export function getTab() {
+    const context = getContext(TAB_KEY)
+    if (context === undefined) throw new Error("No TabContext found")
+    return context as Tab
+}
diff --git a/packages/tui-components-svelte/src/lib/tabs/internal.ts b/packages/tui-components-svelte/src/lib/tabs/internal.ts
new file mode 100644
index 0000000..ea01ac8
--- /dev/null
+++ b/packages/tui-components-svelte/src/lib/tabs/internal.ts
@@ -0,0 +1,3 @@
+export type Fn = () => void
+
+export const TAB_KEY = "timui.tab"
diff --git a/packages/tui-components-svelte/src/routes/modalVC/Header.svelte b/packages/tui-components-svelte/src/routes/modalVC/Header.svelte
deleted file mode 100644
index b0102e8..0000000
--- a/packages/tui-components-svelte/src/routes/modalVC/Header.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script lang="ts">
-    import { getModalContext } from "$lib/modal/ModalView.svelte"
-
-    const MODAL = getModalContext<{ title: string }>()
-</script>
-
-<button class="btn btn-p btn-tall btn-red" onclick={() => MODAL.close()}>close</button>
-
-<div class="item item-p flex flex-col gap-2">
-    <p>Header</p>
-    <p>id: {MODAL.id}</p>
-    <p>showing: {MODAL.topMost}</p>
-    <p>fullscreen: {MODAL.viewOptions.fullscreen}</p>
-    <p>escClose: {MODAL.viewOptions.escClose}</p>
-    <p>title: {MODAL.dict.title}</p>
-</div>
diff --git a/packages/tui-components-svelte/src/routes/modalVC/+layout.svelte b/packages/tui-components-svelte/src/routes/modals/+layout.svelte
similarity index 74%
rename from packages/tui-components-svelte/src/routes/modalVC/+layout.svelte
rename to packages/tui-components-svelte/src/routes/modals/+layout.svelte
index 4b7a544..c14781a 100644
--- a/packages/tui-components-svelte/src/routes/modalVC/+layout.svelte
+++ b/packages/tui-components-svelte/src/routes/modals/+layout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import ModalViewController from "$lib/modal/ModalViewController.svelte"
+    import ModalViewController from "$lib/modals/ModalViewController.svelte"
     import type { Snippet } from "svelte"
 
     const {
diff --git a/packages/tui-components-svelte/src/routes/modalVC/+page.svelte b/packages/tui-components-svelte/src/routes/modals/+page.svelte
similarity index 100%
rename from packages/tui-components-svelte/src/routes/modalVC/+page.svelte
rename to packages/tui-components-svelte/src/routes/modals/+page.svelte
diff --git a/packages/tui-components-svelte/src/routes/modalVC/Actions.svelte b/packages/tui-components-svelte/src/routes/modals/Actions.svelte
similarity index 85%
rename from packages/tui-components-svelte/src/routes/modalVC/Actions.svelte
rename to packages/tui-components-svelte/src/routes/modals/Actions.svelte
index e9e0bb1..1a1c69f 100644
--- a/packages/tui-components-svelte/src/routes/modalVC/Actions.svelte
+++ b/packages/tui-components-svelte/src/routes/modals/Actions.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-    import { getModalViewControllerContext } from "$lib/modal/ModalViewController.svelte"
+    import { getModalController } from "$lib/modals"
     import ModalFullscreen from "./ModalFullscreen.svelte"
     import ModalSmall from "./ModalSmall.svelte"
 
-    const MODALVC = getModalViewControllerContext()
+    const MODALVC = getModalController()
 </script>
 
 {#snippet A()}
diff --git a/packages/tui-components-svelte/src/routes/modals/Header.svelte b/packages/tui-components-svelte/src/routes/modals/Header.svelte
new file mode 100644
index 0000000..3957b1a
--- /dev/null
+++ b/packages/tui-components-svelte/src/routes/modals/Header.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+    import { getModal } from "$lib/modals"
+
+    const MODAL = getModal()
+</script>
+
+<button class="btn btn-p btn-tall btn-red" onclick={() => MODAL.close()}>close</button>
+
+<div class="item item-p flex flex-col gap-2">
+    <p>Header</p>
+    <p>id: {MODAL.id}</p>
+    <p>showing: {MODAL.topMost}</p>
+    <p>fullscreen: {MODAL.fullscreen}</p>
+    <p>escClose: {MODAL.escClose}</p>
+</div>
diff --git a/packages/tui-components-svelte/src/routes/modalVC/ModalFullscreen.svelte b/packages/tui-components-svelte/src/routes/modals/ModalFullscreen.svelte
similarity index 61%
rename from packages/tui-components-svelte/src/routes/modalVC/ModalFullscreen.svelte
rename to packages/tui-components-svelte/src/routes/modals/ModalFullscreen.svelte
index c0c8f0d..1834017 100644
--- a/packages/tui-components-svelte/src/routes/modalVC/ModalFullscreen.svelte
+++ b/packages/tui-components-svelte/src/routes/modals/ModalFullscreen.svelte
@@ -2,7 +2,7 @@
     import type { Snippet } from "svelte"
     import Header from "./Header.svelte"
     import Actions from "./Actions.svelte"
-    import { getModalContext } from "$lib/modal/ModalView.svelte"
+    import { getModal } from "$lib/modals"
 
     const {
         children,
@@ -10,11 +10,9 @@
         children: Snippet
     } = $props()
 
-    const MODAL = getModalContext()
-    MODAL.viewOptions.fullscreen = true
-    MODAL.viewOptions.escClose = false
-
-    MODAL.dict.title = "Fullscreen"
+    const MODAL = getModal()
+    MODAL.fullscreen = true
+    MODAL.escClose = false
 </script>
 
 <div class="h-full w-full bg-red/50">
diff --git a/packages/tui-components-svelte/src/routes/modalVC/ModalSmall.svelte b/packages/tui-components-svelte/src/routes/modals/ModalSmall.svelte
similarity index 63%
rename from packages/tui-components-svelte/src/routes/modalVC/ModalSmall.svelte
rename to packages/tui-components-svelte/src/routes/modals/ModalSmall.svelte
index a0daed2..85daa02 100644
--- a/packages/tui-components-svelte/src/routes/modalVC/ModalSmall.svelte
+++ b/packages/tui-components-svelte/src/routes/modals/ModalSmall.svelte
@@ -2,7 +2,7 @@
     import type { Snippet } from "svelte"
     import Header from "./Header.svelte"
     import Actions from "./Actions.svelte"
-    import { getModalContext } from "$lib/modal/ModalView.svelte"
+    import { getModal } from "$lib/modals"
 
     const {
         children,
@@ -12,7 +12,7 @@
         a: number
     } = $props()
 
-    const MODAL = getModalContext<{ title: string }>()
+    const MODAL = getModal()
 </script>
 
 <div class="card card-p">
@@ -21,9 +21,8 @@
     <Actions />
     <button
         onclick={() => {
-            MODAL.dict.title = "ASD"
-            MODAL.viewOptions.fullscreen = true
-            MODAL.viewOptions.escClose = false
+            MODAL.fullscreen = true
+            MODAL.escClose = false
         }}
     >
         ASD</button
diff --git a/packages/tui-components-svelte/src/routes/tabVC/+page.svelte b/packages/tui-components-svelte/src/routes/tabs/+page.svelte
similarity index 100%
rename from packages/tui-components-svelte/src/routes/tabVC/+page.svelte
rename to packages/tui-components-svelte/src/routes/tabs/+page.svelte
diff --git a/packages/tui-components-svelte/src/routes/tabVC/Home.svelte b/packages/tui-components-svelte/src/routes/tabs/Home.svelte
similarity index 100%
rename from packages/tui-components-svelte/src/routes/tabVC/Home.svelte
rename to packages/tui-components-svelte/src/routes/tabs/Home.svelte
diff --git a/packages/tui-components-svelte/src/routes/tabVC/Settings.svelte b/packages/tui-components-svelte/src/routes/tabs/Settings.svelte
similarity index 71%
rename from packages/tui-components-svelte/src/routes/tabVC/Settings.svelte
rename to packages/tui-components-svelte/src/routes/tabs/Settings.svelte
index d177a17..7928e41 100644
--- a/packages/tui-components-svelte/src/routes/tabVC/Settings.svelte
+++ b/packages/tui-components-svelte/src/routes/tabs/Settings.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-    import { getTabContext } from "$lib/tabs/TabView.svelte"
+    import { getTab } from "$lib/tabs"
 
-    const tab = getTabContext()
+    const tab = getTab()
 
     let i = $state(0)