@fatagnus/dink-ui-core

Adaptive shell, workspace/room manager, and Mantine theme for Dink apps. Provides the layout infrastructure that sits between the semantic layer and your application components.

Install

npm install @fatagnus/dink-ui-core

Peer dependencies: @fatagnus/dink-semantic, @fatagnus/dink-web, react, react-dom.

Quick Start

import { MantineProvider } from '@mantine/core';
import { SemRoot } from '@fatagnus/dink-semantic';
import { createDinkTheme, SurfaceProvider, WorkspaceProvider, WorkspaceShell, Room } from '@fatagnus/dink-ui-core';

const theme = createDinkTheme();

function App() {
  return (
    <MantineProvider theme={theme} defaultColorScheme="dark">
      <SemRoot app="my-app" version="1.0.0">
        <SurfaceProvider>
          <WorkspaceProvider>
            <WorkspaceShell>
              <Room id="alerts" label="Alerts">
                <AlertsPage />
              </Room>
            </WorkspaceShell>
          </WorkspaceProvider>
        </SurfaceProvider>
      </SemRoot>
    </MantineProvider>
  );
}

Key Exports

Theme (./theme)

| Export | Description | |---|---| | createDinkTheme() | Returns a Mantine v7 theme with Dink color palette and defaults | | dinkColors / dinkSurfaceColors | Raw color tokens |

Adaptive Surface

| Export | Description | |---|---| | SurfaceProvider | Detects current surface (desktop/tablet/mobile) and provides context | | useSurface() | Access current SurfaceInfo | | defineAdaptivePage(config) | Declare a page component with per-surface layouts | | AdaptivePage | Renders the correct layout for the current surface |

Workspace & Rooms

| Export | Description | |---|---| | WorkspaceProvider | MobX-backed workspace state (rooms, layout, navigation) | | WorkspaceShell | AppShell wrapper with sidebar, header, room tabs | | Room | Declares a navigable room within the workspace | | PluginSlot | Mounting point for third-party plugin content | | useWorkspace() / useRoom() | Access workspace and room state | | WorkspaceStore | MobX store class for direct access |

Auth (./auth)

| Export | Description | |---|---| | useAuth() | Current user identity and session from Dink backend | | useCan(permission) | Permission check hook |

Connection (./connection)

| Export | Description | |---|---| | useConnectionState() | NATS/WebSocket connection status | | ConnectionBanner | Auto-show banner on disconnect/reconnect |

Subpath Exports

• . -- Everything
• ./theme -- Theme only
• ./auth -- Auth hooks only
• ./connection -- Connection hooks and banner

Design Spec

docs/superpowers/specs/2026-03-16-dink-frontend-framework-design.md