@fatagnus/dink-ui

Batteries-included Dink UI framework. Combines all layers (semantic, plugins, theme) into a single provider and re-exports everything for convenience. Also ships scaffold templates for dink init --frontend.

Install

npm install @fatagnus/dink-ui

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

Quick Start

import { DinkAppProvider, Sem, useSemTree } from '@fatagnus/dink-ui';

function App() {
  return (
    <DinkAppProvider app="my-app" version="1.0.0">
      <Sem semId="main" role="main" label="Main Content">
        <MyContent />
      </Sem>
    </DinkAppProvider>
  );
}

DinkAppProvider wraps Mantine's MantineProvider + SemRoot + plugin host in one component.

Key Exports

Layer 3 (own)

| Export | Description | |---|---| | DinkAppProvider | Combined provider: Mantine theme + SemRoot + plugin host | | dinkTheme | Pre-built Mantine theme object | | dinkDarkColors / dinkLightColors | Color palettes | | getTemplate(name) | Retrieve a scaffold template for dink init --frontend | | applyTemplateVars(template, vars) | Fill template variables | | TEMPLATE_NAMES | Available template identifiers |

Re-exports from @fatagnus/dink-semantic

SemRoot, Sem, SemZone, useSem, useSemTree, useSemActions, SemanticTreeManager, and all core types (SemNode, SemAction, SemTreeSnapshot, SemTreeDelta, AriaState, etc.).

Re-exports from @fatagnus/dink-ui-plugins

PluginSlot, PluginHost, PluginLoader, PluginRegistry, createPluginBridge, validateManifest, handleElevationRequest, and types (PluginManifest, PluginBridge, TrustClass, etc.).

Subpath Exports

• . -- Everything (re-exports + own APIs)
• ./theme -- Theme only
• ./templates -- Scaffold templates only

Design Spec

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