UI Core

Framework-agnostic headless state for the MDK App Toolkit — Zustand stores and a TanStack QueryClient factory

@tetherto/mdk-ui-core

If you are building a React app with the MDK kit, start with the React adapter instead. <MdkProvider> and adapter hooks such as useAuth and useDevices wrap this package so most React code never imports @tetherto/mdk-ui-core directly.

Use this reference when you need headless store access outside React (logging, websocket setup, test helpers) or when authoring a future framework adapter.

@tetherto/mdk-ui-core is the framework-agnostic headless layer of the MDK App Toolkit. It ships Zustand vanilla stores and a TanStack Query Core QueryClient factory. There are no React imports in this package.

Subpath exports

Subpath	Purpose
`.`	Top-level barrel
`./store`	Zustand vanilla stores
`./query`	`QueryClient` factory, query keys, and query/mutation factories
`./types`	Shared type contracts
`./stores.json`	Machine-readable store manifest (generated at build time)

Stores

Each store is a Zustand vanilla singleton. In a React app, read and update state through the matching adapter hook instead of importing stores directly.

Store	Summary	Adapter hook
`authStore`	Session token and permission payload	`useAuth`
`devicesStore`	Fleet device list and current selection	`useDevices`
`timezoneStore`	Active operator timezone	`useTimezone`
`notificationStore`	Unread notification counter (`count`, `increment`, `decrement`, `reset`)	`useNotifications`
`actionsStore`	Pending device and pool action submissions	`useActions`

Import from @tetherto/mdk-ui-core/store (or the top-level barrel).

QueryClient factory

createMdkQueryClient builds a TanStack Query Core client with environment-aware App Node base URL resolution:

Explicit override (typically from <MdkProvider>)
Build-time env: VITE_MDK_API_URL (Vite) or MDK_API_URL (Node)
Default: http://localhost:3000

The ./query subpath also exports query key helpers and factories (authQuery, devicesQuery, deviceQuery, telemetryQuery). See TanStack Query for general usage.

Headless read outside React

Utility code can subscribe to a store without React:

import { authStore } from '@tetherto/mdk-ui-core/store'

const token = authStore.getState().token

const unsubscribe = authStore.subscribe((state) => {
  console.log('token changed', state.token)
})

// later: unsubscribe()

<MdkProvider> wires these singleton stores into React and creates the shared QueryClient for adapter hooks.

What's not here yet

Headless primitives will include throttled telemetry subscriptions, stale detection, history ring buffers, and an optimistic command state machine. They ship alongside the consuming code that needs them.

Next steps

React get started: three-package install and <MdkProvider>
Wire a React app: full adapter wiring walkthrough
MDK App Toolkit architecture: where UI Core fits in the frontend stack