@geenius/devtools

Studio-only developer tooling for Geenius applications. The package combines a framework-agnostic development helper API with optional visual surfaces for debugging feature flags, routes, render timing, provider activity, local seed data, and GitHub issue capture.

The root entrypoint is safe for framework-agnostic helper imports. Visual panels only load when an application imports a UI subpath such as @geenius/devtools/react or @geenius/devtools/react-native.

Install

pnpm add @geenius/devtools

Install the matching framework peer dependencies for the UI subpath you use, for example react and react-dom for web React or react and react-native for the native surface.

Usage

Framework-agnostic helpers come from the package root:

import {
  FeatureFlagManager,
  createSlowOpMonitor,
  devAssert,
  devMeasureRender,
  devLog,
  generateMocks,
} from '@geenius/devtools'

type StudioFlag = 'studio.devtools.panel' | 'providers.convex.spy'

const flags = new FeatureFlagManager<StudioFlag>()
flags.set('studio.devtools.panel', true, {
  description: 'Show Studio diagnostics',
})
flags.set('providers.convex.spy', false)

devAssert(flags.isEnabled('studio.devtools.panel'), 'Studio panel is disabled')
devLog('devtools enabled')

const stopRenderMeasure = devMeasureRender('DevToolbar')
stopRenderMeasure?.()

const monitor = createSlowOpMonitor(100)
const loadedFlags = await monitor.track('load flags', async () =>
  flags.getAllFlags(),
)
const mockUsers = generateMocks(2, (index) => ({
  id: `user-${index + 1}`,
  email: `user-${index + 1}@example.test`,
}))

Web UI variants are imported from their framework subpath:

import { DevModeProvider, DevToolbar } from '@geenius/devtools/react-css'
import '@geenius/devtools/react-css/styles.css'

export function StudioDevtools() {
  return (
    <DevModeProvider isDevAllowed initialVisible>
      <DevToolbar isAllowed />
    </DevModeProvider>
  )
}

React Native uses native primitives and stable testID selectors:

import { DevModeProvider, DevToolbar } from '@geenius/devtools/react-native'

export function NativeStudioDevtools() {
  return (
    <DevModeProvider initialVisible isDevAllowed>
      <DevToolbar flags={[]} routes={[]} testID="studio-native-devtools" />
    </DevModeProvider>
  )
}

API Reference

| Entrypoint | Key exports | | --- | --- | | @geenius/devtools | FeatureFlagManager, createTypedFlags, isDevelopment, isProduction, devLog, devWarn, devAssert, devAssertExists, generateMocks, devMeasureRender, createSlowOpMonitor, deepEqual, initGlobalDevtools, initDevtoolsFromEnv, shared panel helper contracts | | UI subpaths | DevToolbar, DevSidebar, DevModeProvider, dev-mode hooks or primitives, FeatureFlagsToggle, QuickRouteJump, PerformancePanel, PageLoadWaterfall, ConvexSpyPanel, DatabaseSeeder, GitHubIssueDialog | | CSS subpaths | @geenius/devtools/react-css/styles.css, @geenius/devtools/solidjs-css/styles.css |

There is no public /shared subpath for @geenius/devtools. Shared helper contracts are exported from the root package only; private workspace packages are build plumbing.

Variants

Published UI subpaths:

| Subpath | Runtime | Styling | | --- | --- | --- | | @geenius/devtools/react | React DOM | Reference Tailwind-style source | | @geenius/devtools/react-css | React DOM | Authored BEM CSS | | @geenius/devtools/solidjs | SolidJS DOM | Reference Tailwind-style source | | @geenius/devtools/solidjs-css | SolidJS DOM | Authored BEM CSS | | @geenius/devtools/react-native | React Native | Native primitives |

Library-themed variant folders are retained in the repository for future expansion, but they are outside the current launch build and test matrix and are not exported by the package.

The visual surface is Studio-tier-only. Pronto-safe imports must not import UI subpaths or load devtools panels.

Testing

Run checks from this package directory:

pnpm lint
pnpm type-check
pnpm test:unit
pnpm test:packed-smoke
pnpm build

Storybook harnesses live under apps/storybook-*. The React Native harness uses apps/storybook-react-native with a native verification script instead of the web static Storybook build.

Authority

• Public docs: ../../.docs/DOCS/PACKAGES/DEVTOOLS.md
• PRD: ../../.docs/PRDS/packages/PACKAGE_DEVTOOLS_PRD.md
• Features: ../../.docs/FEATURES/packages/devtools/FEATURES.md
• Scorecard: ../../.docs/FEATURES/packages/devtools/scorecard.yaml