open-index/open-npm huggingface dataset:
npm package: @fatagnus/dink
Description: CLI for the Dink edge mesh platform
Latest version: 2.32.0

# @fatagnus/dink

CLI for the Dink edge mesh platform.

## Usage

```sh
npx @fatagnus/dink --help
npx @fatagnus/dink codegen ./dink.yaml
npx @fatagnus/dink dev setup
```

### Install globally

```sh
npm i -g @fatagnus/dink
dink --help
```

### As a devDependency

```sh
npm i -D @fatagnus/dink
```

Then in `package.json` scripts:

```json
{
  "scripts": {
    "codegen": "dink codegen ./dink.yaml"
  }
}
```

## Supported platforms

| OS      | Architecture |
|---------|-------------|
| macOS   | arm64       |
| macOS   | x64         |
| Linux   | arm64       |
| Linux   | x64         |
| Windows | arm64       |
| Windows | x64         |

If your platform is not listed, install from source:

```sh
go install github.com/ozanturksever/dink/cmd/dink@latest
```

## Repository

https://github.com/ozanturksever/dink
npm package: @fatagnus/dink-semantic
Description: Framework-agnostic semantic tree engine for Dink UI
Author: Ozan Turksever
Latest version: 2.32.0

# @fatagnus/dink-semantic

Framework-agnostic semantic tree engine for Dink UI. Annotates your component tree with machine-readable roles, intents, state, and actions so copilots, devtools, and plugins can understand and interact with your app.

## Install

```bash
npm install @fatagnus/dink-semantic
```

## Quick Start

```tsx
import { SemRoot, Sem, useSemTree } from '@fatagnus/dink-semantic';

function App() {
  return (
    <SemRoot app="my-app" version="1.0.0">
      <Sem semId="dashboard" role="region" label="Dashboard" intent="Main dashboard view">
        <MyDashboard />
      </Sem>
    </SemRoot>
  );
}
```

### Core (no React)

```ts
import { SemanticTreeManager } from '@fatagnus/dink-semantic/core';

const manager = new SemanticTreeManager({ app: 'my-app', version: '1.0.0' });
manager.register({ semId: 'root', role: 'application', label: 'My App', parentId: null });
const snapshot = manager.snapshot();
```

## Key Exports

### Core (`@fatagnus/dink-semantic/core`)

| Export | Description |
|---|---|
| `SemanticTreeManager` | Headless tree engine -- register/update/unregister nodes, snapshot, act |
| `SemNode` | Node type with role, label, intent, state, actions, ARIA state |
| `SemTreeSnapshot` / `SemTreeDelta` | Full snapshot and incremental delta types |
| `SemConsumer` / `SemEnv` | Scoping: `'copilot' \| 'devtools' \| 'webmcp' \| 'plugin' \| '*'` |

### React Components

| Export | Description |
|---|---|
| `SemRoot` | Provider -- initializes `SemanticTreeManager`, sets app name/version |
| `Sem` | Annotates a DOM subtree with semantic metadata and actions |
| `SemZone` | Lightweight grouping node (no DOM output) |

### React Hooks

| Export | Description |
|---|---|
| `useSem` | Register a semantic node imperatively, returns update/unregister handles |
| `useSemTree` | Access the tree manager and reactive version counter |
| `useSemActions` | List and invoke actions on any node by semId |

### Testing (`@fatagnus/dink-semantic/testing`)

Mock `SemanticTreeManager` for unit tests.

### Vite Plugin (`@fatagnus/dink-semantic/vite`)

Strip `<Sem>` annotations from production builds.

## Subpath Exports

- `.` -- React components + hooks + core (default)
- `./core` -- Core engine only (no React dependency)
- `./testing` -- Test mocks
- `./vite` -- Vite plugin for production stripping

## Design Spec

[docs/superpowers/specs/2026-03-16-dink-frontend-framework-design.md](../../docs/superpowers/specs/2026-03-16-dink-frontend-framework-design.md)
npm package: @fatagnus/dink-test-utils
Description: Shared test utilities for Dink examples and integration testing
Author: Ozan Turksever
Latest version: 2.9.1

# @fatagnus/dink-test-utils

Shared test utilities for Dink integration testing.

This package provides helper functions for setting up and tearing down dinkd containers in integration tests, as well as utilities for creating API keys.

## Installation

```bash
npm install @fatagnus/dink-test-utils --save-dev
```

## Quick Start

```typescript
import { describe, beforeAll, afterAll } from 'vitest';
import {
  startDinkdContainer,
  stopDinkdContainer,
  createTestKeys,
  type DinkdTestContext,
} from '@fatagnus/dink-test-utils';

describe('My Integration Tests', () => {
  let testContext: DinkdTestContext;
  let edgeKeys: Map<string, string>;
  let centerKey: string;

  beforeAll(async () => {
    // Start a dinkd container
    testContext = await startDinkdContainer();
    
    // Create API keys for testing
    const keys = await createTestKeys(
      testContext.serverUrl,
      testContext.adminKey,
      ['edge-1', 'edge-2']
    );
    edgeKeys = keys.edgeKeys;
    centerKey = keys.centerKey;
  }, 180000); // Allow time for container startup

  afterAll(async () => {
    await stopDinkdContainer(testContext);
  });

  // Your tests here...
});
```

## API

### Container Management

- `startDinkdContainer(options?)` - Starts a dinkd Docker container
- `stopDinkdContainer(context)` - Stops and cleans up the container
- `extractAdminKey(container, timeout?)` - Extracts the admin key from container logs

### Key Creation

- `createEdgeKey(serverUrl, adminKey, name)` - Creates an edge API key (edge_id is auto-generated and embedded in the key)
- `createCenterKey(serverUrl, adminKey, name)` - Creates a center API key
- `createClientKey(serverUrl, adminKey, name)` - Creates a client API key
- `createKeyWithScopes(serverUrl, adminKey, name, type, options)` - Creates a key with custom scopes
- `createTestKeys(serverUrl, adminKey, edgeNames)` - Creates multiple edge keys + shared center key (edge_ids are embedded in keys)
- `createTestKeyPairs(serverUrl, adminKey, edgeNames)` - Creates edge/center key pairs

### App Management

- `createApp(serverUrl, adminKey, name, description?)` - Creates a new application

### Key Management

- `revokeKey(serverUrl, adminKey, keyId, reason?)` - Revokes an API key
- `getKeyInfo(serverUrl, adminKey, keyId)` - Gets information about a key
- `listKeys(serverUrl, adminKey)` - Lists all keys

## Requirements

- Node.js >= 18.0.0
- Docker (for running dinkd containers)
- The `dinkd:latest` Docker image

## License

MIT
npm package: @fatagnus/dink-ui
Description: Batteries-included Dink UI framework — re-exports all layers + scaffold templates
Author: Ozan Turksever
Latest version: 2.32.0

# @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

```bash
npm install @fatagnus/dink-ui
```

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

## Quick Start

```tsx
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](../../docs/superpowers/specs/2026-03-16-dink-frontend-framework-design.md)
npm package: @fatagnus/dink-ui-core
Description: Adaptive shell, workspace/room manager, and Mantine theme for Dink apps
Author: Ozan Turksever
Latest version: 2.32.0

# @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

```bash
npm install @fatagnus/dink-ui-core
```

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

## Quick Start

```tsx
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](../../docs/superpowers/specs/2026-03-16-dink-frontend-framework-design.md)
npm package: @fatagnus/dink-ui-devtools
Description: Dink UI semantic tree devtools — NATS transport, MCP server, discovery, impersonation, Vite plugin
Author: Ozan Turksever
Latest version: 2.32.0

# @fatagnus/dink-ui-devtools

NATS transport bridge for the Dink semantic tree. Publishes tree snapshots and batched deltas over NATS subjects, enabling CLI inspection and remote action invocation.

## Install

```bash
npm install @fatagnus/dink-ui-devtools
```

Peer dependency: `@fatagnus/dink-semantic`.

## Quick Start

```ts
import { SemanticTreeManager } from '@fatagnus/dink-semantic/core';
import { SemTreeNATSBridge } from '@fatagnus/dink-ui-devtools';

const manager = new SemanticTreeManager({ app: 'my-app', version: '1.0.0' });
const bridge = new SemTreeNATSBridge(manager, natsConnection, 'my-app');
bridge.start();

// When done:
bridge.destroy();
```

## How It Works

`SemTreeNATSBridge` subscribes to the `SemanticTreeManager`'s event stream and:

1. **Delta batching** -- Buffers register/update/unregister events and flushes them as a single `SemTreeDelta` message every 16ms (one frame).
2. **Snapshot requests** -- Responds to NATS request/reply on the snapshot subject with the full `SemTreeSnapshot`.
3. **Action invocation** -- Listens for `SemActRequest` messages, invokes the action on the tree manager, and replies with `SemActResponse`.

## NATS Subjects

Defined in `SEM_SUBJECTS`:
- `dink.ui.<appId>.snapshot` -- Request/reply for full tree snapshot
- `dink.ui.<appId>.deltas` -- Publish stream of batched deltas
- `dink.ui.<appId>.act` -- Request/reply for action invocation

## CLI Commands

```bash
dink ui tree <appId>       # Print current semantic tree snapshot
dink ui act <appId> <semId> <action> [args...]  # Invoke an action remotely
dink ui watch <appId>      # Stream tree deltas in real-time
```

## Key Exports

| Export | Description |
|---|---|
| `SemTreeNATSBridge` | NATS bridge -- start/destroy lifecycle, 16ms delta batching |
| `SEM_SUBJECTS` | NATS subject templates |
| `NATSConnection` | Minimal NATS connection interface (publish, subscribe, request) |
| `SemSnapshotMessage` | Wire type for snapshot responses |
| `SemDeltaMessage` | Wire type for delta publications |
| `SemActRequest` / `SemActResponse` | Wire types for action invocation |

## Design Spec

[docs/superpowers/specs/2026-03-16-dink-frontend-framework-design.md](../../docs/superpowers/specs/2026-03-16-dink-frontend-framework-design.md)