diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 86dc7f239a..dd3f152921 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -62,7 +62,8 @@
 </template>
 
 <script>
-import { mapActions, mapGetters, mapState } from 'vuex'
+import { mapState } from 'pinia'
+import { mapActions, mapState as mapVuexState } from 'vuex'
 
 import Loading from './components/Loading.vue'
 import Offline from './components/Offline.vue'
@@ -77,6 +78,8 @@ import PasswordExpired from './pages/PasswordExpired.vue'
 import TermsAndConditions from './pages/TermsAndConditions.vue'
 import UnverifiedEmail from './pages/UnverifiedEmail.vue'
 
+import { useUxDrawersStore } from '@/stores/ux-drawers.js'
+
 export default {
     name: 'App',
     components: {
@@ -94,9 +97,8 @@ export default {
         'ff-layout-plain': FFLayoutPlain
     },
     computed: {
-        ...mapState('account', ['pending', 'user', 'team', 'offline', 'settings']),
-        ...mapState('ux/drawers', ['leftDrawer']),
-        ...mapGetters('ux/drawers', ['hiddenLeftDrawer']),
+        ...mapState(useUxDrawersStore, ['hiddenLeftDrawer']),
+        ...mapVuexState('account', ['pending', 'user', 'team', 'offline', 'settings']),
         loginRequired () {
             return this.$route.meta.requiresLogin !== false
         },
diff --git a/frontend/src/components/ExpertButton.vue b/frontend/src/components/ExpertButton.vue
index 90a4485f46..52dca479db 100644
--- a/frontend/src/components/ExpertButton.vue
+++ b/frontend/src/components/ExpertButton.vue
@@ -13,19 +13,21 @@
 </template>
 
 <script>
-import { mapActions, mapState } from 'vuex'
+import { mapState } from 'pinia'
+import { mapActions } from 'vuex'
+
+import { useUxDrawersStore } from '@/stores/ux-drawers.js'
 
 export default {
     name: 'ExpertButton',
     components: {},
     computed: {
-        ...mapState('ux/drawers', ['rightDrawer']),
+        ...mapState(useUxDrawersStore, ['rightDrawer']),
         isExpertDrawerOpen () {
             return this.rightDrawer.state && this.rightDrawer.component?.name === 'ExpertDrawer'
         }
     },
     methods: {
-        ...mapActions('ux/drawers', ['closeRightDrawer']),
         ...mapActions('product/expert', ['openAssistantDrawer']),
         onClick () {
             this.openAssistantDrawer()
diff --git a/frontend/src/components/NotificationsButton.vue b/frontend/src/components/NotificationsButton.vue
index d3fbdf39b5..fdc457111e 100644
--- a/frontend/src/components/NotificationsButton.vue
+++ b/frontend/src/components/NotificationsButton.vue
@@ -9,16 +9,19 @@
 
 <script>
 import { MailIcon } from '@heroicons/vue/outline'
+import { mapActions, mapState } from 'pinia'
 import { markRaw } from 'vue'
-import { mapActions, mapGetters, mapState } from 'vuex'
+import { mapGetters } from 'vuex'
 
 import NotificationsDrawer from './drawers/notifications/NotificationsDrawer.vue'
 
+import { useUxDrawersStore } from '@/stores/ux-drawers.js'
+
 export default {
     name: 'NotificationsButton',
     components: { MailIcon },
     computed: {
-        ...mapState('ux/drawers', ['rightDrawer']),
+        ...mapState(useUxDrawersStore, ['rightDrawer']),
         ...mapGetters('account', ['hasNotifications']),
         ...mapGetters('account', ['unreadNotificationsCount']),
         notificationsCount: function () {
@@ -30,7 +33,7 @@ export default {
         }
     },
     methods: {
-        ...mapActions('ux/drawers', ['openRightDrawer', 'closeRightDrawer']),
+        ...mapActions(useUxDrawersStore, ['openRightDrawer', 'closeRightDrawer']),
         onClick () {
             this.openRightDrawer({ component: markRaw(NotificationsDrawer) })
         }
diff --git a/frontend/src/components/PageHeader.vue b/frontend/src/components/PageHeader.vue
index 26b4c9208d..5d1097de87 100644
--- a/frontend/src/components/PageHeader.vue
+++ b/frontend/src/components/PageHeader.vue
@@ -102,9 +102,9 @@
 </template>
 <script>
 import { AcademicCapIcon, AdjustmentsIcon, CogIcon, CursorClickIcon, LogoutIcon, MenuIcon, PlusIcon, QuestionMarkCircleIcon, XIcon } from '@heroicons/vue/solid'
-import { mapActions } from 'pinia'
+import { mapActions, mapState } from 'pinia'
 import { ref } from 'vue'
-import { mapGetters, mapState, mapActions as mapVuexActions } from 'vuex'
+import { mapGetters, mapState as mapVuexState } from 'vuex'
 
 import usePermissions from '../composables/Permissions.js'
 
@@ -119,6 +119,7 @@ import NotificationsButton from './NotificationsButton.vue'
 import TeamSelection from './TeamSelection.vue'
 import GlobalSearch from './global-search/GlobalSearch.vue'
 
+import { useUxDrawersStore } from '@/stores/ux-drawers.js'
 import { useUxToursStore } from '@/stores/ux-tours.js'
 
 export default {
@@ -128,10 +129,9 @@ export default {
         Roles () {
             return Roles
         },
-        ...mapState('account', ['user', 'team', 'teams']),
-        ...mapState('ux/drawers', ['leftDrawer']),
+        ...mapState(useUxDrawersStore, ['leftDrawer', 'hiddenLeftDrawer']),
+        ...mapVuexState('account', ['user', 'team', 'teams']),
         ...mapGetters('account', ['notifications', 'hasAvailableTeams', 'defaultUserTeam', 'canCreateTeam', 'isTrialAccount', 'featuresCheck']),
-        ...mapGetters('ux/drawers', ['hiddenLeftDrawer']),
         navigationOptions () {
             return [
                 {
@@ -205,7 +205,6 @@ export default {
     setup () {
         const open = ref(false)
         const { hasPermission, hasAMinimumTeamRoleOf } = usePermissions()
-
         return {
             open,
             plusIcon: PlusIcon,
@@ -214,7 +213,7 @@ export default {
         }
     },
     methods: {
-        ...mapVuexActions('ux/drawers', ['toggleLeftDrawer']),
+        ...mapActions(useUxDrawersStore, ['toggleLeftDrawer']),
         ...mapActions(useUxToursStore, ['openModal', 'resetTours', 'presentTour']),
         openEducationModal () {
             this.openModal('education')
diff --git a/frontend/src/components/drawers/LeftDrawer.vue b/frontend/src/components/drawers/LeftDrawer.vue
index 7098085de7..1f684c8fa9 100644
--- a/frontend/src/components/drawers/LeftDrawer.vue
+++ b/frontend/src/components/drawers/LeftDrawer.vue
@@ -12,21 +12,23 @@
 </template>
 
 <script>
+import { mapActions, mapState } from 'pinia'
 import { markRaw } from 'vue'
-import { mapActions, mapState } from 'vuex'
 
 import MainNav from './navigation/MainNav.vue'
 
+import { useUxDrawersStore } from '@/stores/ux-drawers.js'
+
 export default {
     name: 'LeftDrawer',
     computed: {
-        ...mapState('ux/drawers', ['leftDrawer', 'mainNav'])
+        ...mapState(useUxDrawersStore, ['leftDrawer'])
     },
     mounted () {
         this.setLeftDrawer(markRaw(MainNav))
     },
     methods: {
-        ...mapActions('ux/drawers', ['setLeftDrawer', 'closeLeftDrawer']),
+        ...mapActions(useUxDrawersStore, ['setLeftDrawer', 'closeLeftDrawer']),
         handleClickOutside () {
             this.$nextTick(() => this.closeLeftDrawer)
         }
diff --git a/frontend/src/components/drawers/RightDrawer.vue b/frontend/src/components/drawers/RightDrawer.vue
index 7657f5de61..7a592200c9 100644
--- a/frontend/src/components/drawers/RightDrawer.vue
+++ b/frontend/src/components/drawers/RightDrawer.vue
@@ -42,7 +42,9 @@
 </template>
 
 <script>
-import { mapActions, mapState } from 'vuex'
+import { mapActions, mapState } from 'pinia'
+
+import { useUxDrawersStore } from '@/stores/ux-drawers.js'
 
 const DRAWER_MIN_WIDTH = 310
 const DRAWER_DEFAULT_WIDTH = 400
@@ -74,7 +76,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('ux/drawers', ['rightDrawer']),
+        ...mapState(useUxDrawersStore, ['rightDrawer']),
         shouldAllowPinning () {
             return this.viewportWidth >= VIEWPORT_PIN_THRESHOLD
         },
@@ -175,7 +177,7 @@ export default {
         }
     },
     methods: {
-        ...mapActions('ux/drawers', ['closeRightDrawer', 'togglePinDrawer']),
+        ...mapActions(useUxDrawersStore, ['closeRightDrawer', 'togglePinDrawer']),
         closeDrawer () {
             if (this.rightDrawer.state && this.rightDrawer.closeOnClickOutside) {
                 this.closeRightDrawer()
diff --git a/frontend/src/components/drawers/expert/ExpertDrawer.vue b/frontend/src/components/drawers/expert/ExpertDrawer.vue
index 0b6377ca4b..f59cc04155 100644
--- a/frontend/src/components/drawers/expert/ExpertDrawer.vue
+++ b/frontend/src/components/drawers/expert/ExpertDrawer.vue
@@ -41,12 +41,15 @@
 
 <script>
 import { LockClosedIcon, LockOpenIcon, XIcon } from '@heroicons/vue/solid'
-import { mapActions, mapState } from 'vuex'
+import { mapActions, mapState } from 'pinia'
+import { mapActions as mapVuexActions, mapState as mapVuexState } from 'vuex'
 
 import ToggleButtonGroup from '../../elements/ToggleButtonGroup.vue'
 
 import ExpertPanel from '../../expert/Expert.vue'
 
+import { useUxDrawersStore } from '@/stores/ux-drawers.js'
+
 export default {
     name: 'ExpertDrawer',
     components: {
@@ -58,8 +61,8 @@ export default {
     },
     inject: ['togglePinWithWidth', 'shouldAllowPinning'],
     computed: {
-        ...mapState('ux/drawers', ['rightDrawer']),
-        ...mapState('product/expert', ['agentMode']),
+        ...mapState(useUxDrawersStore, ['rightDrawer']),
+        ...mapVuexState('product/expert', ['agentMode']),
         agentModeButtons () {
             return [
                 { title: 'Support', value: 'ff-agent' },
@@ -85,8 +88,8 @@ export default {
         }, 350)
     },
     methods: {
-        ...mapActions('ux/drawers', ['closeRightDrawer']),
-        ...mapActions('product/expert', ['setAgentMode']),
+        ...mapActions(useUxDrawersStore, ['closeRightDrawer']),
+        ...mapVuexActions('product/expert', ['setAgentMode']),
         closeDrawer () {
             this.closeRightDrawer()
         },
diff --git a/frontend/src/components/drawers/navigation/MainNav.vue b/frontend/src/components/drawers/navigation/MainNav.vue
index 87778d2033..e1a80c8f6b 100644
--- a/frontend/src/components/drawers/navigation/MainNav.vue
+++ b/frontend/src/components/drawers/navigation/MainNav.vue
@@ -34,6 +34,7 @@ import { mapGetters, mapState as mapVuexState } from 'vuex'
 
 import NavItem from '../../NavItem.vue'
 
+import { useUxDrawersStore } from '@/stores/ux-drawers.js'
 import { useUxNavigationStore } from '@/stores/ux-navigation.js'
 
 export default {
@@ -126,9 +127,10 @@ export default {
         team: 'setBackButton'
     },
     methods: {
+        ...mapActions(useUxDrawersStore, ['closeLeftDrawer']),
         ...mapActions(useUxNavigationStore, ['setMainNavContext', 'setMainNavBackButton']),
         onMenuItemClick () {
-            this.$store.dispatch('ux/drawers/closeLeftDrawer')
+            this.closeLeftDrawer()
         },
         setBackButton () {
             if (this.team) {
diff --git a/frontend/src/components/drawers/notifications/NotificationsDrawer.vue b/frontend/src/components/drawers/notifications/NotificationsDrawer.vue
index 8220b22093..7db85853ca 100644
--- a/frontend/src/components/drawers/notifications/NotificationsDrawer.vue
+++ b/frontend/src/components/drawers/notifications/NotificationsDrawer.vue
@@ -74,16 +74,20 @@
 
 <script>
 import { XIcon } from '@heroicons/vue/solid'
+import { mapActions } from 'pinia'
 import { markRaw } from 'vue'
-import { mapActions, mapGetters } from 'vuex'
+import { mapGetters, mapActions as mapVuexActions } from 'vuex'
 
 import userAPI from '../../../api/user.js'
 
 import alerts from '../../../services/alerts.js'
 import GenericNotification from '../../notifications/Generic.vue'
+
 import TeamInvitationAcceptedNotification from '../../notifications/invitations/Accepted.vue'
 import TeamInvitationReceivedNotification from '../../notifications/invitations/Received.vue'
 
+import { useUxDrawersStore } from '@/stores/ux-drawers.js'
+
 export default {
     name: 'NotificationsDrawer',
     components: {
@@ -121,8 +125,8 @@ export default {
         this.selections = []
     },
     methods: {
-        ...mapActions('account', ['setNotifications']),
-        ...mapActions('ux/drawers', ['closeRightDrawer']),
+        ...mapActions(useUxDrawersStore, ['closeRightDrawer']),
+        ...mapVuexActions('account', ['setNotifications']),
         closeDrawer () {
             this.closeRightDrawer()
         },
diff --git a/frontend/src/components/drawers/snapshots/SnapshotDetailsDrawer.vue b/frontend/src/components/drawers/snapshots/SnapshotDetailsDrawer.vue
index f9c585d182..0b6e4ace7e 100644
--- a/frontend/src/components/drawers/snapshots/SnapshotDetailsDrawer.vue
+++ b/frontend/src/components/drawers/snapshots/SnapshotDetailsDrawer.vue
@@ -155,8 +155,8 @@ import {
     SaveAsIcon,
     TrashIcon
 } from '@heroicons/vue/outline'
+import { mapActions } from 'pinia'
 import { defineComponent } from 'vue'
-import { mapActions } from 'vuex'
 
 import DeviceApi from '../../../api/devices.js'
 
@@ -171,6 +171,8 @@ import AssetCompareDialog from '../../dialogs/AssetCompareDialog.vue'
 import FlowViewer from '../../flow-viewer/FlowViewer.vue'
 import InformationWell from '../../wells/InformationWell.vue'
 
+import { useUxDrawersStore } from '@/stores/ux-drawers.js'
+
 export default defineComponent({
     name: 'SnapshotDetailsDrawer',
     components: {
@@ -231,6 +233,7 @@ export default defineComponent({
 
         return {
             hasPermission
+
         }
     },
     data () {
@@ -283,7 +286,7 @@ export default defineComponent({
             })
     },
     methods: {
-        ...mapActions('ux/drawers', ['setRightDrawerHeader']),
+        ...mapActions(useUxDrawersStore, ['setRightDrawerHeader']),
         deployDeviceSnapshot () {
             const snapshot = this.snapshot
             const currentTargetSnapshot = this.instance.targetSnapshot?.id
diff --git a/frontend/src/components/expert/Expert.vue b/frontend/src/components/expert/Expert.vue
index 14eda78678..530167ba2f 100644
--- a/frontend/src/components/expert/Expert.vue
+++ b/frontend/src/components/expert/Expert.vue
@@ -113,8 +113,9 @@
 </template>
 
 <script>
+import { mapState } from 'pinia'
 import { markRaw } from 'vue'
-import { mapActions, mapGetters, mapState } from 'vuex'
+import { mapActions, mapGetters, mapState as mapVuexState } from 'vuex'
 
 import ToggleButtonGroup from '../elements/ToggleButtonGroup.vue'
 
@@ -126,6 +127,8 @@ import ExpertRichResources from './ExpertRichResources.vue'
 import ExpertToolCall from './ExpertToolCall.vue'
 import UpdateBanner from './components/UpdateBanner.vue'
 
+import { useUxDrawersStore } from '@/stores/ux-drawers.js'
+
 export default {
     name: 'ExpertPanel',
     components: {
@@ -167,7 +170,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('product/expert', [
+        ...mapVuexState('product/expert', [
             'isGenerating',
             'autoScrollEnabled',
             'abortController',
@@ -185,9 +188,9 @@ export default {
             'isOperatorAgent',
             'hasSelectedCapabilities'
         ]),
-        isPinned () {
-            return this.$store.state.ux.drawers.rightDrawer.fixed
-        },
+        ...mapState(useUxDrawersStore, {
+            isPinned: state => state.rightDrawer.fixed
+        }),
         isEditorContext () {
             // In editor context, the route name includes 'editor'
             return this.$route?.name?.includes('editor') || false
diff --git a/frontend/src/components/notifications/Notification.vue b/frontend/src/components/notifications/Notification.vue
index 323eddfb92..e8db84bb2e 100644
--- a/frontend/src/components/notifications/Notification.vue
+++ b/frontend/src/components/notifications/Notification.vue
@@ -28,12 +28,14 @@
 </template>
 
 <script>
-import { mapActions } from 'vuex'
+import { mapActions } from 'pinia'
 
 import userApi from '../../api/user.js'
 
 import NotificationMessageMixin from '../../mixins/NotificationMessage.js'
 
+import { useUxDrawersStore } from '@/stores/ux-drawers.js'
+
 export default {
     name: 'NotificationBase',
     mixins: [NotificationMessageMixin],
@@ -69,7 +71,7 @@ export default {
         }
     },
     methods: {
-        ...mapActions('ux/drawers', ['closeRightDrawer']),
+        ...mapActions(useUxDrawersStore, ['closeRightDrawer']),
         go (to) {
             this.closeRightDrawer()
             this.markAsRead()
diff --git a/frontend/src/layouts/Platform.vue b/frontend/src/layouts/Platform.vue
index 3d868c3f6e..66c81e287a 100644
--- a/frontend/src/layouts/Platform.vue
+++ b/frontend/src/layouts/Platform.vue
@@ -91,7 +91,6 @@ export default {
         ...mapState(useUxDialogStore, ['dialog']),
         ...mapState(useUxStore, ['overlay']),
         ...mapVuexState('product', ['interview']),
-        ...mapVuexState('ux/drawers', ['leftDrawer']),
         ...mapGetters('account', ['hasAvailableTeams'])
     },
     watch: {
diff --git a/frontend/src/pages/device/VersionHistory/Snapshots/index.vue b/frontend/src/pages/device/VersionHistory/Snapshots/index.vue
index 8d1b084990..26c5e18b27 100644
--- a/frontend/src/pages/device/VersionHistory/Snapshots/index.vue
+++ b/frontend/src/pages/device/VersionHistory/Snapshots/index.vue
@@ -105,9 +105,10 @@
 
 <script>
 import { FilterIcon, PlusSmIcon, UploadIcon } from '@heroicons/vue/outline'
+import { mapActions } from 'pinia'
 import SemVer from 'semver'
 import { markRaw } from 'vue'
-import { mapActions, mapState } from 'vuex'
+import { mapState } from 'vuex'
 
 import ApplicationApi from '../../../../api/application.js'
 import DropdownMenu from '../../../../components/DropdownMenu.vue'
@@ -122,6 +123,8 @@ import DaysSince from '../../../application/Snapshots/components/cells/DaysSince
 import SnapshotName from '../../../application/Snapshots/components/cells/SnapshotName.vue'
 import SnapshotSource from '../../../application/Snapshots/components/cells/SnapshotSource.vue'
 
+import { useUxDrawersStore } from '@/stores/ux-drawers.js'
+
 export default {
     name: 'DeviceSnapshots',
     components: {
@@ -299,7 +302,7 @@ export default {
         this.fetchData()
     },
     methods: {
-        ...mapActions('ux/drawers', ['openRightDrawer', 'closeRightDrawer']),
+        ...mapActions(useUxDrawersStore, ['openRightDrawer', 'closeRightDrawer']),
         fetchData: async function () {
             if (!this.features.deviceEditor || this.isOwnedByAnInstance || this.isUnassigned) {
                 return
diff --git a/frontend/src/pages/instance/VersionHistory/Snapshots/index.vue b/frontend/src/pages/instance/VersionHistory/Snapshots/index.vue
index 35fb52d6cf..72d0f02460 100644
--- a/frontend/src/pages/instance/VersionHistory/Snapshots/index.vue
+++ b/frontend/src/pages/instance/VersionHistory/Snapshots/index.vue
@@ -49,8 +49,9 @@
 
 <script>
 import { FilterIcon } from '@heroicons/vue/outline'
+import { mapActions } from 'pinia'
 import { markRaw } from 'vue'
-import { mapActions, mapState } from 'vuex'
+import { mapState } from 'vuex'
 
 import InstanceApi from '../../../../api/instances.js'
 import SnapshotApi from '../../../../api/projectSnapshots.js'
@@ -68,6 +69,8 @@ import DaysSince from '../../../application/Snapshots/components/cells/DaysSince
 import DeviceCount from '../../../application/Snapshots/components/cells/DeviceCount.vue'
 import SnapshotName from '../../../application/Snapshots/components/cells/SnapshotName.vue'
 
+import { useUxDrawersStore } from '@/stores/ux-drawers.js'
+
 export default {
     name: 'InstanceSnapshots',
     components: {
@@ -86,7 +89,6 @@ export default {
     emits: ['instance-updated', 'show-import-snapshot-dialog', 'show-create-snapshot-dialog'],
     setup () {
         const { hasPermission } = usePermissions()
-
         return { hasPermission }
     },
     data () {
@@ -209,7 +211,7 @@ export default {
         this.fetchData()
     },
     methods: {
-        ...mapActions('ux/drawers', ['openRightDrawer', 'closeRightDrawer']),
+        ...mapActions(useUxDrawersStore, ['openRightDrawer', 'closeRightDrawer']),
         fetchData: async function (withoutAnimation = false) {
             if (this.instance.id) {
                 if (!withoutAnimation) this.loading = true
diff --git a/frontend/src/pages/team/Tables/Table/TableExplorer/components/TablesList.vue b/frontend/src/pages/team/Tables/Table/TableExplorer/components/TablesList.vue
index 237db668fc..f190def6d5 100644
--- a/frontend/src/pages/team/Tables/Table/TableExplorer/components/TablesList.vue
+++ b/frontend/src/pages/team/Tables/Table/TableExplorer/components/TablesList.vue
@@ -45,12 +45,15 @@
 
 <script>
 import { PencilAltIcon, PlusIcon, SearchIcon, TableIcon } from '@heroicons/vue/outline'
+import { mapActions, mapState } from 'pinia'
 import { defineComponent, markRaw } from 'vue'
-import { mapActions, mapGetters, mapState } from 'vuex'
+import { mapGetters, mapActions as mapVuexActions, mapState as mapVuexState } from 'vuex'
 
 import CreateTable from '../drawers/CreateTable.vue'
 import TableSchema from '../drawers/TableSchema.vue'
 
+import { useUxDrawersStore } from '@/stores/ux-drawers.js'
+
 export default defineComponent({
     name: 'TablesList',
     components: { SearchIcon, TableIcon, PlusIcon, PencilAltIcon },
@@ -62,9 +65,9 @@ export default defineComponent({
         }
     },
     computed: {
+        ...mapState(useUxDrawersStore, ['rightDrawer']),
         ...mapGetters('product/tables', { getTables: 'tables' }),
-        ...mapState('product/tables', { tablesState: 'tables', tableSelection: 'tableSelection' }),
-        ...mapState('ux/drawers', ['rightDrawer']),
+        ...mapVuexState('product/tables', { tablesState: 'tables', tableSelection: 'tableSelection' }),
         filteredTables () {
             return this.tables.filter(t => (t.name ?? '').toLowerCase().includes(this.filterTerm.toLowerCase()))
         }
@@ -78,8 +81,8 @@ export default defineComponent({
         }
     },
     methods: {
-        ...mapActions('product/tables', ['updateTableSelection']),
-        ...mapActions('ux/drawers', ['openRightDrawer', 'closeRightDrawer']),
+        ...mapActions(useUxDrawersStore, ['openRightDrawer', 'closeRightDrawer']),
+        ...mapVuexActions('product/tables', ['updateTableSelection']),
 
         onCreateTable () {
             this.openRightDrawer({
diff --git a/frontend/src/pages/team/Tables/Table/TableExplorer/drawers/CreateTable.vue b/frontend/src/pages/team/Tables/Table/TableExplorer/drawers/CreateTable.vue
index d7a9e6d3d4..7b2949743e 100644
--- a/frontend/src/pages/team/Tables/Table/TableExplorer/drawers/CreateTable.vue
+++ b/frontend/src/pages/team/Tables/Table/TableExplorer/drawers/CreateTable.vue
@@ -39,10 +39,14 @@
 </template>
 
 <script>
+import { mapActions } from 'pinia'
 import { defineComponent } from 'vue'
-import { mapActions, mapGetters, mapState } from 'vuex'
+import { mapGetters, mapState, mapActions as mapVuexActions } from 'vuex'
 
 import TableColumn from './components/TableColumn.vue'
+
+import { useUxDrawersStore } from '@/stores/ux-drawers.js'
+
 export default defineComponent({
     name: 'CreateTable',
     components: { TableColumn },
@@ -72,8 +76,8 @@ export default defineComponent({
         this.setHeader()
     },
     methods: {
-        ...mapActions('ux/drawers', ['closeRightDrawer', 'setRightDrawerHeader']),
-        ...mapActions('product/tables', ['createTable', 'getTables', 'addNewTableColumn', 'removeNewTableColumn']),
+        ...mapActions(useUxDrawersStore, ['closeRightDrawer', 'setRightDrawerHeader']),
+        ...mapVuexActions('product/tables', ['createTable', 'getTables', 'addNewTableColumn', 'removeNewTableColumn']),
         validateForm () {
             const columnsHaveDuplicateNames = new Set(this.newTable.columns.map(col => col.name)).size !== this.newTable.columns.length
             const allColumnDoesntHaveATypeAssigned = this.newTable.columns.some(col => !col.type)
diff --git a/frontend/src/pages/team/Tables/Table/TableExplorer/drawers/TableSchema.vue b/frontend/src/pages/team/Tables/Table/TableExplorer/drawers/TableSchema.vue
index 95311d6b7e..de74e383d9 100644
--- a/frontend/src/pages/team/Tables/Table/TableExplorer/drawers/TableSchema.vue
+++ b/frontend/src/pages/team/Tables/Table/TableExplorer/drawers/TableSchema.vue
@@ -25,12 +25,15 @@
 </template>
 
 <script>
+import { mapActions } from 'pinia'
 import { defineComponent } from 'vue'
-import { mapActions, mapState } from 'vuex'
+import { mapState, mapActions as mapVuexActions } from 'vuex'
 
 import Alerts from '../../../../../../services/alerts.js'
 import Dialog from '../../../../../../services/dialog.js'
 
+import { useUxDrawersStore } from '@/stores/ux-drawers.js'
+
 export default defineComponent({
     name: 'TableSchema',
     props: {
@@ -46,8 +49,8 @@ export default defineComponent({
         this.setHeader()
     },
     methods: {
-        ...mapActions('ux/drawers', ['closeRightDrawer', 'setRightDrawerHeader']),
-        ...mapActions('product/tables', ['deleteTable', 'getTables']),
+        ...mapActions(useUxDrawersStore, ['closeRightDrawer', 'setRightDrawerHeader']),
+        ...mapVuexActions('product/tables', ['deleteTable', 'getTables']),
         submit () {
             Dialog.show({
                 header: 'Delete Table',
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index bccedca732..f8ea7913b4 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -5,15 +5,13 @@ import commonMutations from './common/mutations.js'
 import account from './modules/account/index.js'
 import context from './modules/context/index.js'
 import product from './modules/product/index.js'
-import ux from './modules/ux/index.js'
 import storagePlugin from './plugins/storage.plugin.js'
 
 export default createStore({
     modules: {
         account,
         context,
-        product,
-        ux
+        product
     },
     actions: {
         ...commonActions
diff --git a/frontend/src/store/modules/account/index.js b/frontend/src/store/modules/account/index.js
index 05febcceee..0e0c3983ea 100644
--- a/frontend/src/store/modules/account/index.js
+++ b/frontend/src/store/modules/account/index.js
@@ -11,6 +11,7 @@ import router from '../../../routes.js'
 import product from '../../../services/product.js'
 
 import { useUxDialogStore } from '@/stores/ux-dialog.js'
+import { useUxDrawersStore } from '@/stores/ux-drawers.js'
 import { useUxNavigationStore } from '@/stores/ux-navigation.js'
 import { useUxToursStore } from '@/stores/ux-tours.js'
 import { useUxStore } from '@/stores/ux.js'
@@ -517,11 +518,11 @@ const actions = {
                 // Reset migrated Pinia stores — uncomment each line as its store is migrated
                 const pinia = getActivePinia()
                 if (pinia) {
-                    useUxNavigationStore().$reset()
-                    useUxStore().$reset()
                     useUxDialogStore().$reset()
                     useUxToursStore().$reset()
-                    // Task 4:  useUxDrawersStore().$reset()
+                    useUxNavigationStore().$reset()
+                    useUxDrawersStore().$reset()
+                    useUxStore().$reset()
                     // Task 5:  useContextStore().$reset()
                     // Task 6:  useProductTablesStore().$reset()
                     // Task 7:  useProductBrokersStore().$reset()
diff --git a/frontend/src/store/modules/product/expert/index.js b/frontend/src/store/modules/product/expert/index.js
index c5057fa2ed..c690132df7 100644
--- a/frontend/src/store/modules/product/expert/index.js
+++ b/frontend/src/store/modules/product/expert/index.js
@@ -4,6 +4,7 @@ import { markRaw } from 'vue'
 import expertApi from '../../../../api/expert.js'
 import ExpertDrawer from '../../../../components/drawers/expert/ExpertDrawer.vue'
 import useTimerHelper from '../../../../composables/TimersHelper.js'
+import { useUxDrawersStore } from '../../../../stores/ux-drawers.js'
 
 import { FF_AGENT, OPERATOR_AGENT } from './agents.js'
 
@@ -473,7 +474,7 @@ const actions = {
 
             // Auto-widen drawer if flows detected
             if (hasFlows) {
-                await dispatch('ux/drawers/setRightDrawerWider', true, { root: true })
+                useUxDrawersStore().setRightDrawerWider(true)
             }
         } else if (
             response.success &&
@@ -565,11 +566,7 @@ const actions = {
 
         dispatch(`product/expert/${OPERATOR_AGENT}/getCapabilities`, null, { root: true })
 
-        return dispatch(
-            'ux/drawers/openRightDrawer',
-            { component: markRaw(ExpertDrawer) },
-            { root: true }
-        )
+        return useUxDrawersStore().openRightDrawer({ component: markRaw(ExpertDrawer) })
     },
 
     addWelcomeMessageIfNeeded ({ dispatch, state }) {
diff --git a/frontend/src/store/modules/ux/drawers/index.js b/frontend/src/store/modules/ux/drawers/index.js
deleted file mode 100644
index ce8b6cf016..0000000000
--- a/frontend/src/store/modules/ux/drawers/index.js
+++ /dev/null
@@ -1,282 +0,0 @@
-/**
- * @typedef {Object} DrawerAction
- * @property {string} label - Action label.
- * @property {string|'primary'|'secondary'|'tertiary'|'danger'} kind - Button kind
- * @property {Function} handler - Callback to execute when clicked.
- * @property {boolean} disabled - Disabled state
- * @property {Component} iconLeft - A heroicon to display on the left side of the button.
- */
-
-import { useUxStore } from '@/stores/ux.js'
-
-const initialState = () => ({
-    leftDrawer: {
-        state: false,
-        component: null
-    },
-    rightDrawer: {
-        state: false,
-        component: null,
-        header: null,
-        wider: false,
-        fixed: false,
-        closeOnClickOutside: true,
-        pinned: false,
-        closing: false,
-        props: {},
-        on: {},
-        bind: {}
-    }
-})
-
-const meta = {
-    persistence: { }
-}
-
-const state = initialState
-
-const getters = {
-    hiddenLeftDrawer: (state) => {
-        const navStore = useUxStore()
-        return state.leftDrawer.component?.name === 'MainNav' && navStore.mainNavContext?.length === 0
-    }
-}
-
-const mutations = {
-    openRightDrawer (state, { component, header, wider, fixed, closeOnClickOutside, props, on, bind }) {
-        state.rightDrawer.state = true
-        state.rightDrawer.wider = wider
-        state.rightDrawer.fixed = fixed
-        state.rightDrawer.closeOnClickOutside = closeOnClickOutside
-        state.rightDrawer.component = component
-        state.rightDrawer.header = header
-        state.rightDrawer.props = props
-        state.rightDrawer.on = on
-        state.rightDrawer.bind = bind
-    },
-    closeRightDrawerImmediate (state) {
-        // Set state, fixed, and pinned to false immediately to prevent
-        // mid-transition class changes that cause width to expand
-        state.rightDrawer.state = false
-        state.rightDrawer.fixed = false
-        state.rightDrawer.pinned = false
-    },
-    closeRightDrawer (state) {
-        state.rightDrawer.state = false
-        state.rightDrawer.wider = false
-        state.rightDrawer.fixed = false
-        state.rightDrawer.component = null
-        state.rightDrawer.header = null
-        state.rightDrawer.pinned = false
-        state.rightDrawer.props = {}
-        state.rightDrawer.on = {}
-        state.rightDrawer.bind = {}
-    },
-    setRightDrawerActions (state, actions) {
-        if (state.rightDrawer.header) {
-            state.rightDrawer.header.actions = actions
-        } else {
-            state.rightDrawer.header = {
-                actions
-            }
-        }
-    },
-    setRightDrawerTitle (state, title) {
-        if (state.rightDrawer.header) {
-            state.rightDrawer.header.title = title
-        } else {
-            state.rightDrawer.header = {
-                title
-            }
-        }
-    },
-    setPinnedDrawer (state, fixed) {
-        state.rightDrawer.fixed = fixed
-        state.rightDrawer.pinned = fixed
-        // When fixed, prevent close on click outside
-        state.rightDrawer.closeOnClickOutside = !fixed
-    },
-    setRightDrawerWider (state, wider) {
-        state.rightDrawer.wider = wider
-    },
-    openLeftDrawer (state) {
-        state.leftDrawer.state = true
-    },
-    closeLeftDrawer (state) {
-        state.leftDrawer.state = false
-    },
-    toggleLeftDrawer (state) {
-        state.leftDrawer.state = !state.leftDrawer.state
-    },
-    setLeftDrawer (state, component) {
-        state.leftDrawer.component = component
-    }
-}
-
-const actions = {
-    openRightDrawer ({ state, commit }, {
-        component,
-        header = null,
-        wider = false,
-        fixed = false,
-        closeOnClickOutside = true,
-        props = {},
-        on = {},
-        bind = {},
-        overlay = false
-    }) {
-        // Don't allow opening while drawer is currently closing
-        if (state.rightDrawer.closing) return
-
-        if (state.rightDrawer.state && component.name === state.rightDrawer.component.name) return
-
-        const openDrawer = () => {
-            commit('openRightDrawer', {
-                component,
-                header,
-                wider,
-                fixed,
-                closeOnClickOutside,
-                props,
-                on,
-                bind
-            })
-            // Only show overlay if requested and drawer is not pinned
-            if (overlay && !state.rightDrawer.pinned) {
-                useUxStore().openOverlay()
-            }
-        }
-
-        if (state.rightDrawer.state) {
-            commit('closeRightDrawer')
-            setTimeout(openDrawer, 300)
-        } else {
-            openDrawer()
-        }
-    },
-    closeRightDrawer ({ commit, state }) {
-        // Set closing flag to prevent reopens during transition
-        state.rightDrawer.closing = true
-
-        // Immediately hide drawer by removing .open class
-        commit('closeRightDrawerImmediate')
-
-        // Close overlay if present
-        if (useUxStore().overlay) {
-            useUxStore().closeOverlay()
-        }
-
-        // Wait for CSS transition (300ms) before full cleanup
-        setTimeout(() => {
-            // Only do full cleanup if drawer is still closed
-            if (!state.rightDrawer.state) {
-                commit('closeRightDrawer')
-            }
-            // Clear closing flag
-            state.rightDrawer.closing = false
-        }, 300)
-    },
-
-    /**
-     * Updates the right drawer header by committing title and actions to the store if they exist.
-     *
-     * @param {Object} context - The Vuex action context object, typically used to access commit.
-     * @param {Function} context.commit - The Vuex commit function to mutate state.
-     * @param {Object} header - The header object containing properties for the right drawer.
-     * @param {string} [header.title] - The title to set for the right drawer header.
-     * @param {DrawerAction[]} [header.actions] - An array of actions to set for the right drawer header.
-     *
-     * @return {void}
-     */
-    setRightDrawerHeader ({ commit }, header) {
-        if (header.title) {
-            commit('setRightDrawerTitle', header.title)
-        }
-        if (header.actions) {
-            commit('setRightDrawerActions', header.actions)
-        }
-    },
-
-    /**
-     * Sets the title for the right drawer by committing a mutation.
-     *
-     * @param {Object} context - The Vuex action context object, containing commit function.
-     * @param {Function} context.commit - The commit function to invoke the mutation.
-     * @param {string} title - The title to set for the right drawer.
-     *
-     * @return {void}
-     */
-    setRightDrawerTitle ({ commit }, title) {
-        commit('setRightDrawerTitle', title)
-    },
-
-    /**
-     * Sets the actions for the right drawer in the application.
-     *
-     * @param {Object} context - The Vuex action context object.
-     * @param {Function} context.commit - The commit function to call mutations.
-     * @param {DrawerAction[]} actions - Drawer actions.
-     *
-     * @return {void}
-     */
-    setRightDrawerActions ({ commit }, actions) {
-        commit('setRightDrawerActions', actions)
-    },
-
-    /**
-     * Sets the wider state for the right drawer.
-     *
-     * @param {Object} context - The Vuex action context object.
-     * @param {Function} context.commit - The commit function to call mutations.
-     * @param {boolean} wider - Whether the drawer should be wider.
-     *
-     * @return {void}
-     */
-    setRightDrawerWider ({ commit }, wider) {
-        commit('setRightDrawerWider', wider)
-    },
-
-    /**
-     * Toggles the fixed state of the right drawer.
-     * When fixed, the drawer becomes part of the page layout (position: initial) and stays open.
-     *
-     * @param {Object} context - The Vuex action context object.
-     * @param {Function} context.commit - The commit function to call mutations.
-     * @param {Object} context.state - The current state.
-     * @param {Object} context.rootState - The root state.
-     *
-     * @return {void}
-     */
-    togglePinDrawer ({ commit, state }) {
-        const newFixedState = !state.rightDrawer.fixed
-        commit('setPinnedDrawer', newFixedState)
-
-        // Always close overlay when toggling (whether fixing or unfixing)
-        if (useUxStore().overlay) {
-            useUxStore().closeOverlay()
-        }
-    },
-
-    openLeftDrawer ({ commit }) {
-        commit('openLeftDrawer')
-    },
-    closeLeftDrawer ({ commit }) {
-        commit('closeLeftDrawer')
-    },
-    toggleLeftDrawer ({ commit }) {
-        commit('toggleLeftDrawer')
-    },
-    setLeftDrawer ({ commit }, component) {
-        commit('setLeftDrawer', component)
-    }
-}
-
-export default {
-    namespaced: true,
-    state,
-    initialState: initialState(),
-    getters,
-    mutations,
-    actions,
-    meta
-}
diff --git a/frontend/src/store/modules/ux/index.js b/frontend/src/store/modules/ux/index.js
deleted file mode 100644
index 586c94f35a..0000000000
--- a/frontend/src/store/modules/ux/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import drawers from './drawers/index.js'
-
-export default {
-    namespaced: true,
-    modules: { drawers }
-}
diff --git a/frontend/src/stores/_account-bridge.js b/frontend/src/stores/_account-bridge.js
index 608b66f4d0..b790a04362 100644
--- a/frontend/src/stores/_account-bridge.js
+++ b/frontend/src/stores/_account-bridge.js
@@ -1,8 +1,12 @@
 // Temporary bridge — reads account data from Vuex during migration.
 // Delete this file after the account stores are migrated to Pinia.
-import store from '../store/index.js'
 
 export function useAccountBridge () {
+    // Use require() instead of a top-level import to avoid a circular module dependency.
+    // Static imports of store/index.js here would create a cycle:
+    // ux-drawers.js → ux-navigation.js → _account-bridge.js → store/index.js → account/index.js → ux-navigation.js
+    // By requiring lazily inside the function body, the Vuex store is fully initialized before this runs.
+    const store = require('../store/index.js').default
     return {
         team: store.state.account.team,
         features: store.state.account.features,
diff --git a/frontend/src/stores/index.js b/frontend/src/stores/index.js
index d03619ec2b..609ca4485f 100644
--- a/frontend/src/stores/index.js
+++ b/frontend/src/stores/index.js
@@ -1,4 +1,5 @@
 // Barrel export — add store exports here as each task is merged
+export { useUxDrawersStore } from './ux-drawers.js'
 export { useUxNavigationStore } from './ux-navigation.js'
 export { useUxStore } from './ux.js'
 export { useUxDialogStore } from './ux-dialog.js'
diff --git a/frontend/src/stores/ux-drawers.js b/frontend/src/stores/ux-drawers.js
new file mode 100644
index 0000000000..b3325a8ce1
--- /dev/null
+++ b/frontend/src/stores/ux-drawers.js
@@ -0,0 +1,196 @@
+/**
+ * @typedef {Object} DrawerAction
+ * @property {string} label - Action label.
+ * @property {string|'primary'|'secondary'|'tertiary'|'danger'} kind - Button kind
+ * @property {Function} handler - Callback to execute when clicked.
+ * @property {boolean} disabled - Disabled state
+ * @property {Component} iconLeft - A heroicon to display on the left side of the button.
+ */
+
+import { defineStore } from 'pinia'
+import { markRaw } from 'vue'
+
+import { useUxNavigationStore } from './ux-navigation.js'
+import { useUxStore } from './ux.js'
+
+export const useUxDrawersStore = defineStore('ux-drawers', {
+    state: () => ({
+        leftDrawer: {
+            state: false,
+            component: null
+        },
+        rightDrawer: {
+            state: false,
+            component: null,
+            header: null,
+            wider: false,
+            fixed: false,
+            closeOnClickOutside: true,
+            pinned: false,
+            closing: false,
+            props: {},
+            on: {},
+            bind: {}
+        }
+    }),
+
+    getters: {
+        hiddenLeftDrawer (state) {
+            const navStore = useUxNavigationStore()
+            return state.leftDrawer.component?.name === 'MainNav' && navStore.mainNavContext.length === 0
+        }
+    },
+
+    actions: {
+        openRightDrawer ({
+            component,
+            header = null,
+            wider = false,
+            fixed = false,
+            closeOnClickOutside = true,
+            props = {},
+            on = {},
+            bind = {},
+            overlay = false
+        }) {
+            // Don't allow opening while drawer is currently closing
+            if (this.rightDrawer.closing) return
+
+            if (this.rightDrawer.state && component.name === this.rightDrawer.component?.name) return
+
+            const openDrawer = () => {
+                this.rightDrawer.state = true
+                this.rightDrawer.wider = wider
+                this.rightDrawer.fixed = fixed
+                this.rightDrawer.closeOnClickOutside = closeOnClickOutside
+                this.rightDrawer.component = markRaw(component)
+                this.rightDrawer.header = header
+                this.rightDrawer.props = props
+                this.rightDrawer.on = on
+                this.rightDrawer.bind = bind
+
+                // Only show overlay if requested and drawer is not pinned
+                if (overlay && !this.rightDrawer.pinned) {
+                    useUxStore().openOverlay()
+                }
+            }
+
+            if (this.rightDrawer.state) {
+                this._closeRightDrawerImmediate()
+                setTimeout(openDrawer, 300)
+            } else {
+                openDrawer()
+            }
+        },
+
+        closeRightDrawer () {
+            // Set closing flag to prevent reopens during transition
+            this.rightDrawer.closing = true
+
+            // Immediately hide drawer by removing .open class
+            this._closeRightDrawerImmediate()
+
+            // Close overlay if present
+            const uxStore = useUxStore()
+            if (uxStore.overlay) {
+                uxStore.closeOverlay()
+            }
+
+            // Wait for CSS transition (300ms) before full cleanup
+            setTimeout(() => {
+                // Only do full cleanup if drawer is still closed
+                if (!this.rightDrawer.state) {
+                    this.rightDrawer.wider = false
+                    this.rightDrawer.fixed = false
+                    this.rightDrawer.component = null
+                    this.rightDrawer.header = null
+                    this.rightDrawer.pinned = false
+                    this.rightDrawer.props = {}
+                    this.rightDrawer.on = {}
+                    this.rightDrawer.bind = {}
+                }
+                // Clear closing flag
+                this.rightDrawer.closing = false
+            }, 300)
+        },
+
+        /** @private */
+        _closeRightDrawerImmediate () {
+            // Set state, fixed, and pinned to false immediately to prevent
+            // mid-transition class changes that cause width to expand
+            this.rightDrawer.state = false
+            this.rightDrawer.fixed = false
+            this.rightDrawer.pinned = false
+        },
+
+        /**
+         * Updates the right drawer header.
+         *
+         * @param {Object} header - The header object containing properties for the right drawer.
+         * @param {string} [header.title] - The title to set for the right drawer header.
+         * @param {DrawerAction[]} [header.actions] - An array of actions to set for the right drawer header.
+         */
+        setRightDrawerHeader (header) {
+            if (header.title) {
+                this.setRightDrawerTitle(header.title)
+            }
+            if (header.actions) {
+                this.setRightDrawerActions(header.actions)
+            }
+        },
+
+        setRightDrawerTitle (title) {
+            if (this.rightDrawer.header) {
+                this.rightDrawer.header.title = title
+            } else {
+                this.rightDrawer.header = { title }
+            }
+        },
+
+        setRightDrawerActions (actions) {
+            if (this.rightDrawer.header) {
+                this.rightDrawer.header.actions = actions
+            } else {
+                this.rightDrawer.header = { actions }
+            }
+        },
+
+        setRightDrawerWider (wider) {
+            this.rightDrawer.wider = wider
+        },
+
+        /**
+         * Toggles the fixed/pinned state of the right drawer.
+         * When fixed, the drawer becomes part of the page layout and stays open.
+         */
+        togglePinDrawer () {
+            const newFixedState = !this.rightDrawer.fixed
+            this.rightDrawer.fixed = newFixedState
+            this.rightDrawer.pinned = newFixedState
+            // When fixed, prevent close on click outside
+            this.rightDrawer.closeOnClickOutside = !newFixedState
+
+            // Always close overlay when toggling (whether fixing or unfixing)
+            const uxStore = useUxStore()
+            if (uxStore.overlay) {
+                uxStore.closeOverlay()
+            }
+        },
+
+        openLeftDrawer () {
+            this.leftDrawer.state = true
+        },
+
+        closeLeftDrawer () {
+            this.leftDrawer.state = false
+        },
+
+        toggleLeftDrawer () {
+            this.leftDrawer.state = !this.leftDrawer.state
+        },
+
+        setLeftDrawer (component) {
+            this.leftDrawer.component = component ? markRaw(component) : null
+        }
+    }
+})
diff --git a/test/unit/frontend/stores/ux-drawers.spec.js b/test/unit/frontend/stores/ux-drawers.spec.js
new file mode 100644
index 0000000000..518052426b
--- /dev/null
+++ b/test/unit/frontend/stores/ux-drawers.spec.js
@@ -0,0 +1,410 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useUxDrawersStore } from '@/stores/ux-drawers.js'
+
+// --- ux-navigation mock (mainNavContext only) ---
+const mockNavStore = {
+    mainNavContext: []
+}
+
+vi.mock('@/stores/ux-navigation.js', () => ({
+    useUxNavigationStore: vi.fn(() => mockNavStore)
+}))
+
+// --- ux mock (overlay) ---
+const mockUxStore = {
+    overlay: false,
+    openOverlay: vi.fn(),
+    closeOverlay: vi.fn()
+}
+
+vi.mock('@/stores/ux.js', () => ({
+    useUxStore: vi.fn(() => mockUxStore)
+}))
+
+// Stub components for testing
+const FakeComponent = { name: 'FakeComponent' }
+const AnotherComponent = { name: 'AnotherComponent' }
+const MainNavComponent = { name: 'MainNav' }
+
+describe('ux-drawers store', () => {
+    beforeEach(() => {
+        setActivePinia(createPinia())
+        vi.clearAllMocks()
+        // Reset mock state to defaults
+        mockNavStore.mainNavContext = []
+        mockUxStore.overlay = false
+    })
+
+    afterEach(() => {
+        vi.useRealTimers()
+    })
+
+    // -------------------------------------------------------------------------
+    // Initial state
+    // -------------------------------------------------------------------------
+
+    it('initializes with both drawers closed', () => {
+        const store = useUxDrawersStore()
+        expect(store.leftDrawer.state).toBe(false)
+        expect(store.leftDrawer.component).toBeNull()
+        expect(store.rightDrawer.state).toBe(false)
+        expect(store.rightDrawer.component).toBeNull()
+        expect(store.rightDrawer.wider).toBe(false)
+        expect(store.rightDrawer.fixed).toBe(false)
+        expect(store.rightDrawer.pinned).toBe(false)
+        expect(store.rightDrawer.closeOnClickOutside).toBe(true)
+        expect(store.rightDrawer.closing).toBe(false)
+    })
+
+    // -------------------------------------------------------------------------
+    // Right drawer — open
+    // -------------------------------------------------------------------------
+
+    describe('openRightDrawer', () => {
+        it('opens the drawer with component and defaults', () => {
+            const store = useUxDrawersStore()
+            store.openRightDrawer({ component: FakeComponent })
+            expect(store.rightDrawer.state).toBe(true)
+            expect(store.rightDrawer.component.name).toBe('FakeComponent')
+            expect(store.rightDrawer.wider).toBe(false)
+            expect(store.rightDrawer.fixed).toBe(false)
+            expect(store.rightDrawer.closeOnClickOutside).toBe(true)
+            expect(store.rightDrawer.props).toEqual({})
+            expect(store.rightDrawer.on).toEqual({})
+            expect(store.rightDrawer.bind).toEqual({})
+        })
+
+        it('passes through all options', () => {
+            const store = useUxDrawersStore()
+            const props = { foo: 'bar' }
+            store.openRightDrawer({
+                component: FakeComponent,
+                header: { title: 'Test' },
+                wider: true,
+                fixed: true,
+                closeOnClickOutside: false,
+                props,
+                on: { close: vi.fn() },
+                bind: { class: 'test' }
+            })
+            expect(store.rightDrawer.header).toEqual({ title: 'Test' })
+            expect(store.rightDrawer.wider).toBe(true)
+            expect(store.rightDrawer.fixed).toBe(true)
+            expect(store.rightDrawer.closeOnClickOutside).toBe(false)
+            expect(store.rightDrawer.props).toStrictEqual(props)
+        })
+
+        it('does not open while drawer is closing', () => {
+            const store = useUxDrawersStore()
+            store.rightDrawer.closing = true
+            store.openRightDrawer({ component: FakeComponent })
+            expect(store.rightDrawer.state).toBe(false)
+        })
+
+        it('does not reopen if same component is already open', () => {
+            const store = useUxDrawersStore()
+            store.openRightDrawer({ component: FakeComponent })
+            store.rightDrawer.header = { title: 'original' }
+            // Try to open the same component again
+            store.openRightDrawer({ component: FakeComponent, header: { title: 'new' } })
+            // Header should not have changed
+            expect(store.rightDrawer.header).toEqual({ title: 'original' })
+        })
+
+        it('calls openOverlay when overlay=true and drawer is not pinned', () => {
+            const store = useUxDrawersStore()
+            store.openRightDrawer({ component: FakeComponent, overlay: true })
+            expect(mockUxStore.openOverlay).toHaveBeenCalledOnce()
+        })
+
+        it('does not call openOverlay when drawer is pinned', () => {
+            const store = useUxDrawersStore()
+            store.rightDrawer.pinned = true
+            store.openRightDrawer({ component: FakeComponent, overlay: true })
+            expect(mockUxStore.openOverlay).not.toHaveBeenCalled()
+        })
+
+        it('does not call openOverlay when overlay=false (default)', () => {
+            const store = useUxDrawersStore()
+            store.openRightDrawer({ component: FakeComponent })
+            expect(mockUxStore.openOverlay).not.toHaveBeenCalled()
+        })
+
+        it('closes then reopens with new component after 300ms delay when already open', () => {
+            vi.useFakeTimers()
+            const store = useUxDrawersStore()
+            store.openRightDrawer({ component: FakeComponent })
+            expect(store.rightDrawer.state).toBe(true)
+
+            // Open a different component while drawer is open
+            store.openRightDrawer({ component: AnotherComponent })
+
+            // Immediately after: drawer is closed (immediate close triggered)
+            expect(store.rightDrawer.state).toBe(false)
+            expect(store.rightDrawer.component.name).toBe('FakeComponent') // Not yet swapped
+
+            // After 300ms timeout fires
+            vi.advanceTimersByTime(300)
+            expect(store.rightDrawer.state).toBe(true)
+            expect(store.rightDrawer.component.name).toBe('AnotherComponent')
+        })
+    })
+
+    // -------------------------------------------------------------------------
+    // Right drawer — close
+    // -------------------------------------------------------------------------
+
+    describe('closeRightDrawer', () => {
+        it('sets closing flag and immediately hides the drawer', () => {
+            const store = useUxDrawersStore()
+            store.openRightDrawer({ component: FakeComponent })
+
+            store.closeRightDrawer()
+
+            expect(store.rightDrawer.closing).toBe(true)
+            expect(store.rightDrawer.state).toBe(false)
+            expect(store.rightDrawer.fixed).toBe(false)
+            expect(store.rightDrawer.pinned).toBe(false)
+        })
+
+        it('closes the overlay if it is open', () => {
+            const store = useUxDrawersStore()
+            mockUxStore.overlay = true
+            store.openRightDrawer({ component: FakeComponent })
+
+            store.closeRightDrawer()
+
+            expect(mockUxStore.closeOverlay).toHaveBeenCalledOnce()
+        })
+
+        it('does not call closeOverlay when overlay is not open', () => {
+            const store = useUxDrawersStore()
+            mockUxStore.overlay = false
+            store.openRightDrawer({ component: FakeComponent })
+
+            store.closeRightDrawer()
+
+            expect(mockUxStore.closeOverlay).not.toHaveBeenCalled()
+        })
+
+        it('cleans up drawer state after 300ms', () => {
+            vi.useFakeTimers()
+            const store = useUxDrawersStore()
+            store.openRightDrawer({ component: FakeComponent, header: { title: 'Test' }, wider: true })
+
+            store.closeRightDrawer()
+            vi.advanceTimersByTime(300)
+
+            expect(store.rightDrawer.component).toBeNull()
+            expect(store.rightDrawer.header).toBeNull()
+            expect(store.rightDrawer.wider).toBe(false)
+            expect(store.rightDrawer.props).toEqual({})
+            expect(store.rightDrawer.on).toEqual({})
+            expect(store.rightDrawer.bind).toEqual({})
+            expect(store.rightDrawer.closing).toBe(false)
+        })
+
+        it('closing guard prevents reopen during close transition', () => {
+            vi.useFakeTimers()
+            const store = useUxDrawersStore()
+            store.openRightDrawer({ component: FakeComponent })
+            store.closeRightDrawer()
+
+            // Attempt to open a new component while closing flag is set
+            store.openRightDrawer({ component: AnotherComponent })
+
+            // Guard should have blocked the reopen — state stays false
+            expect(store.rightDrawer.state).toBe(false)
+
+            // After 300ms cleanup runs — component is nulled out
+            vi.advanceTimersByTime(300)
+            expect(store.rightDrawer.component).toBeNull()
+            expect(store.rightDrawer.closing).toBe(false)
+        })
+    })
+
+    // -------------------------------------------------------------------------
+    // Right drawer header
+    // -------------------------------------------------------------------------
+
+    describe('setRightDrawerTitle', () => {
+        it('creates a header with title if none exists', () => {
+            const store = useUxDrawersStore()
+            store.setRightDrawerTitle('My Title')
+            expect(store.rightDrawer.header).toEqual({ title: 'My Title' })
+        })
+
+        it('updates title on existing header', () => {
+            const store = useUxDrawersStore()
+            store.rightDrawer.header = { title: 'Old', actions: [] }
+            store.setRightDrawerTitle('New Title')
+            expect(store.rightDrawer.header.title).toBe('New Title')
+            expect(store.rightDrawer.header.actions).toEqual([])
+        })
+    })
+
+    describe('setRightDrawerActions', () => {
+        it('creates a header with actions if none exists', () => {
+            const store = useUxDrawersStore()
+            const actions = [{ label: 'Save', handler: vi.fn() }]
+            store.setRightDrawerActions(actions)
+            expect(store.rightDrawer.header).toEqual({ actions })
+        })
+
+        it('updates actions on existing header', () => {
+            const store = useUxDrawersStore()
+            store.rightDrawer.header = { title: 'Drawer', actions: [] }
+            const actions = [{ label: 'Delete', handler: vi.fn() }]
+            store.setRightDrawerActions(actions)
+            expect(store.rightDrawer.header.title).toBe('Drawer')
+            expect(store.rightDrawer.header.actions).toStrictEqual(actions)
+        })
+    })
+
+    describe('setRightDrawerHeader', () => {
+        it('sets both title and actions when both are provided', () => {
+            const store = useUxDrawersStore()
+            const actions = [{ label: 'OK' }]
+            store.setRightDrawerHeader({ title: 'Header', actions })
+            expect(store.rightDrawer.header.title).toBe('Header')
+            expect(store.rightDrawer.header.actions).toStrictEqual(actions)
+        })
+
+        it('sets only title when actions are absent', () => {
+            const store = useUxDrawersStore()
+            store.setRightDrawerHeader({ title: 'Title Only' })
+            expect(store.rightDrawer.header.title).toBe('Title Only')
+            expect(store.rightDrawer.header.actions).toBeUndefined()
+        })
+
+        it('sets only actions when title is absent', () => {
+            const store = useUxDrawersStore()
+            const actions = [{ label: 'Go' }]
+            store.setRightDrawerHeader({ actions })
+            expect(store.rightDrawer.header.actions).toStrictEqual(actions)
+            expect(store.rightDrawer.header.title).toBeUndefined()
+        })
+    })
+
+    // -------------------------------------------------------------------------
+    // Right drawer — wider / pin
+    // -------------------------------------------------------------------------
+
+    it('setRightDrawerWider updates the wider flag', () => {
+        const store = useUxDrawersStore()
+        store.setRightDrawerWider(true)
+        expect(store.rightDrawer.wider).toBe(true)
+        store.setRightDrawerWider(false)
+        expect(store.rightDrawer.wider).toBe(false)
+    })
+
+    describe('togglePinDrawer', () => {
+        it('pins the drawer and disables closeOnClickOutside', () => {
+            const store = useUxDrawersStore()
+            store.togglePinDrawer()
+            expect(store.rightDrawer.fixed).toBe(true)
+            expect(store.rightDrawer.pinned).toBe(true)
+            expect(store.rightDrawer.closeOnClickOutside).toBe(false)
+        })
+
+        it('unpins the drawer and re-enables closeOnClickOutside', () => {
+            const store = useUxDrawersStore()
+            store.rightDrawer.fixed = true
+            store.rightDrawer.pinned = true
+            store.rightDrawer.closeOnClickOutside = false
+            store.togglePinDrawer()
+            expect(store.rightDrawer.fixed).toBe(false)
+            expect(store.rightDrawer.pinned).toBe(false)
+            expect(store.rightDrawer.closeOnClickOutside).toBe(true)
+        })
+
+        it('closes overlay when toggling if overlay is open', () => {
+            const store = useUxDrawersStore()
+            mockUxStore.overlay = true
+            store.togglePinDrawer()
+            expect(mockUxStore.closeOverlay).toHaveBeenCalledOnce()
+        })
+
+        it('does not call closeOverlay when overlay is already closed', () => {
+            const store = useUxDrawersStore()
+            mockUxStore.overlay = false
+            store.togglePinDrawer()
+            expect(mockUxStore.closeOverlay).not.toHaveBeenCalled()
+        })
+    })
+
+    // -------------------------------------------------------------------------
+    // Left drawer
+    // -------------------------------------------------------------------------
+
+    describe('left drawer actions', () => {
+        it('openLeftDrawer sets state to true', () => {
+            const store = useUxDrawersStore()
+            store.openLeftDrawer()
+            expect(store.leftDrawer.state).toBe(true)
+        })
+
+        it('closeLeftDrawer sets state to false', () => {
+            const store = useUxDrawersStore()
+            store.leftDrawer.state = true
+            store.closeLeftDrawer()
+            expect(store.leftDrawer.state).toBe(false)
+        })
+
+        it('toggleLeftDrawer flips state', () => {
+            const store = useUxDrawersStore()
+            store.toggleLeftDrawer()
+            expect(store.leftDrawer.state).toBe(true)
+            store.toggleLeftDrawer()
+            expect(store.leftDrawer.state).toBe(false)
+        })
+
+        it('setLeftDrawer assigns the component', () => {
+            const store = useUxDrawersStore()
+            store.setLeftDrawer(FakeComponent)
+            expect(store.leftDrawer.component.name).toBe('FakeComponent')
+        })
+
+        it('setLeftDrawer with null clears the component', () => {
+            const store = useUxDrawersStore()
+            store.setLeftDrawer(FakeComponent)
+            store.setLeftDrawer(null)
+            expect(store.leftDrawer.component).toBeNull()
+        })
+    })
+
+    // -------------------------------------------------------------------------
+    // hiddenLeftDrawer getter
+    // -------------------------------------------------------------------------
+
+    describe('hiddenLeftDrawer getter', () => {
+        it('returns false when component is not MainNav', () => {
+            const store = useUxDrawersStore()
+            store.setLeftDrawer(FakeComponent)
+            mockNavStore.mainNavContext = []
+            expect(store.hiddenLeftDrawer).toBe(false)
+        })
+
+        it('returns false when component is MainNav but context is non-empty', () => {
+            const store = useUxDrawersStore()
+            store.setLeftDrawer(MainNavComponent)
+            mockNavStore.mainNavContext = [{ entries: [] }]
+            expect(store.hiddenLeftDrawer).toBe(false)
+        })
+
+        it('returns false when component is null', () => {
+            const store = useUxDrawersStore()
+            mockNavStore.mainNavContext = []
+            expect(store.hiddenLeftDrawer).toBe(false)
+        })
+
+        it('returns true when component is MainNav and context is empty', () => {
+            const store = useUxDrawersStore()
+            store.setLeftDrawer(MainNavComponent)
+            mockNavStore.mainNavContext = []
+            expect(store.hiddenLeftDrawer).toBe(true)
+        })
+    })
+})