@noobknotsdev/ayatsumugi-react

Public React UI for Ayatsumugi protocol envelopes. It renders React DOM, component, state, query, and mutation nodes with draggable side panes, selectable details, and a center-only maximized mode. English is the default; pass language="ja" for Japanese.

The package has no private core logic and does not bundle React. Call createAyatsumugiReact(React) and import @noobknotsdev/ayatsumugi-react/styles.css.

import React from 'react';
import { createAyatsumugiReact } from '@noobknotsdev/ayatsumugi-react';
import '@noobknotsdev/ayatsumugi-react/styles.css';

const { AyatsumugiExplorer } = createAyatsumugiReact(React);

export function RuntimeMap({ snapshots }) {
  return <AyatsumugiExplorer snapshots={snapshots} language="en" />;
}

Use language="ja" for Japanese. The two separators resize the left/right panes, and “Maximize center” hides both side panes until restored.

React Scan

The react-scan export uses the real react-scan/lite package and must be started before react-dom mounts:

import { startAyatsumugiReactScan } from '@noobknotsdev/ayatsumugi-react/react-scan';

startAyatsumugiReactScan({
  endpoint: 'http://127.0.0.1:54321/ingest/local',
  sessionId: 'local',
});

Start the matching collector with ayatsumugi audit react-scan --session local --output ayatsumugi-react-scan.json.