@twobitedd/console-network

A reusable holo-console framework for building blockchain-powered interactive apps and games. Games plug in as modules, the console supplies the shell, identity, and the 4-channel overlay language.

The goal is a shared design device: dozens of independent sites, each running their own backend and their own modules, all appearing to users as the same console. Learn the rig once, every channel you visit reuses the same chassis.

 ┌────────────────── holo rig ──────────────────┐
 │  [ plate: id · rev · leds ]                  │
 │                                              │
 │   α RAIL         ░░░░░░░░░░░░░       β RAIL  │
 │  (left list)     ░░ viewport ░░    (right)   │
 │   slides in      ░░  supreme ░░    slides    │
 │   from left      ░░░░░░░░░░░░░      in from  │
 │                    ╔═ MODAL ═╗       right   │
 │                    ║ center  ║               │
 │                    ╚═════════╝               │
 │  ══════════════ HUD (bottom) ══════════════  │
 │  [ footer · power · toggles · standby ]      │
 └──────────────────────────────────────────────┘

Install

npm install @twobitedd/console-network react react-dom

// once, at your app root
import "@twobitedd/console-network/styles.css";

60-second tour

import {
  defineGameModule,
  ConsoleHost,
  ConsoleSlots,
} from "@twobitedd/console-network";

function MyGame({ api }) {
  return (
    <>
      <ConsoleSlots.Viewport><MyCanvas /></ConsoleSlots.Viewport>
      <ConsoleSlots.Bottom><MyHud /></ConsoleSlots.Bottom>
    </>
  );
}

export const myGame = defineGameModule({
  id: "my-game",
  title: "My Game",
  version: "0.1.0",
  Component: MyGame,
});

// In your app:
<ConsoleHost module={myGame} />

That's the whole idea. Authors hand in a React component, the host supplies the rig.

Documentation

The full docs live in docs/:

| Topic | What's inside | |----------------------------------------------------------------|---------------------------------------------------| | Getting started | First module from scratch in one file | | Game modules | The GameModule contract + lifecycle | | Channels | The 5-slot design language (viewport + 4 channels)| | Theming | CSS custom properties, skinning, dark/light | | Identity & chain | Dynamic.xyz adapter, BYO wallet/session provider | | Federation | How many sites appear as one "unified console" | | Extending the host | Add channels, capability flags, custom plate data | | Design review | Proposed v0.2 → v1.0 improvements | | The registry | Public themes + projects, how the CDN works | | Publishing a theme or project | 5-minute PR path to appearing in every console | | Testing & performance | npm scripts, gzip budgets, jsdom tests, demo flow |

Host ergonomics (motion & churn)

• presentation — "default" | "immersive" (viewport-first chrome; channel/power deck peeks from the bottom edge). Modules receive the same value on api.presentation.
• visualTier — "potato" | "balanced" | "extra": scales CRT overlays + motion cost (potato wins over extra when you need predictably cheap frames).
• api.shell — immersiveDeckPinned / setImmersiveDeckPinned for pinning the immersive deck while presentation="immersive".
• effects="lite" — disables lens parallax and tightens chrome transitions (also stacks with OS reduced motion when effects="full").
• respectReducedMotion — defaults to true; set false only if you intentionally override accessibility prefs (the rig adds edd-holo-rig--effects-full so packaged CSS can restore motion durations).
• pickConsoleIdentityFields / DEFAULT_CONSOLE_IDENTITY — helpers for the identity shape; the host already normalizes handle / address / isAuthenticated so api stays stable across benign object churn (memoize callbacks / extra in your app).
• debug — development-only logs when the module reference or normalized identity changes; pair with why-did-you-render in your repo for deeper traces.

Testing & release

Automated checks (run from the repo root):

npm test              # build library + all Node tests (includes gzip budgets + jsdom mounts)
npm run lint
npm run perf:size     # print gzipped bundle + CSS sizes (needs package/dist)
npm run release:check # lint + build everything + tests + registry check — gate before tagging

See Testing & performance for what each test file covers and how to exercise tiers manually via examples/demo.

Connections panel

Opt-in full-screen modal that lists every project in the public registry. Turn it on by passing connections to ConsoleHost:

<ConsoleHost
  module={myGame}
  connections={{ currentProjectId: "xo3-games" }}
/>

You get a fixed "CONNECTIONS" pill in the top-right corner and a searchable, tag-filterable directory of every project anyone has registered. Your project should be in there too — publish it.

The pill uses z-index: var(--holo-connections-trigger-z, 90) on the edd-console-host wrapper. Lower it if your app’s menus sit beneath it:

.my-shell.edd-console-host {
  --holo-connections-trigger-z: 40;
}

Status

• v0.1 — usable today, but APIs may evolve before v1. The GameModule contract is the stable surface authors should rely on.
• License — MIT © 2026 twobitEDD

Pull requests welcome. If you're experimenting with your own console, open an issue so we can align on the spec — the whole point of the network is that your rig and mine should feel like the same device.