@ethisyscore/plugin-ui

The PlatformReact frontend foundation for EthisysCore plugins. It gives a plugin everything it needs to lift a monolith React feature onto a plugin surface: page and overlay factories, a static useView adapter, an MCP-over-hooks service layer, react-query / react-router shims, scoped styles, the nexture icon set, and the shared MUI component surface externalised to the host's instances.

PlatformReact is the high-trust render tier (RFC 0003), restricted to first-party PlatformPlugin builds. See the top-level render-mode overview and the PlatformReact author guide.

Export surface

| Subpath | Key exports | Purpose | |---|---|---| | . | createPortBridgeClient, BridgeClientContext / useBridgeClient, useBridgeTheme / useBridgeLocale, ExtensionRuntimeProvider, useMcpResource / useMcpTool / useMcpQuery / unwrapItems, useHostIdentity / useCurrentUser, definePlatformReactPage / emitNavigation / PlatformReactPageProps | Bridge client + theme/locale context, brokered-MCP data hooks, host identity, and the base PlatformReact page contract | | ./platform-react | definePlatformReactPluginPage / createPluginPageDefiner, definePlatformReactPluginOverlay / useOverlayHost, useView / createUseView / ViewComponent / isComponent, BaseMcpService / useToolInvoker / useToolInvokerMap, useAuthenticatedQuery / useAuthenticatedQueries, injectPluginStyles / PluginStyleScope, createReactRouterShim, usePluginRealtime, useMcpUpload, useManagedLifecycle | The plugin authoring layer: page/overlay wrappers (react-query + manifest + style root), the static useView adapter pattern, the MCP service base + tool invokers, pre-authenticated react-query wrappers, scoped-style injection, router shim, realtime, and file upload | | ./icons | NextureIcons, IconMap, 470+ Ni* icon components, sizeHelper / strokeSizeHelper, IconName / IconSize / IconVariant | The gogo-ui "nexture" SVG icon set with props types and size/stroke helpers | | ./components/ui | Button, Card, Dialog, Table, TextField, Select, Tabs, Typography, Grid, Stack, Menu, … | MUI component re-exports plus a Dialog scroll-lock wrapper. These are host externals — never bundled; production builds bind them to the host's MUI instance | | ./components/layout | PageHeader / usePageHeader / withPageHeader / buildBreadcrumbs, FillGrid / FillGridItem / FillGap / FillSpan, sidebar-action context (SidebarActionProvider, useSidebarAction / useSidebarActions / useTriggerSidebarAction), RouteMeta / RouteMetaEntry | Layout primitives (flex-wrap grid), the page-header layer + breadcrumb builder, and the sidebar-action context/provider | | ./components/shared | ConfirmActionDialog, ConfirmDeleteDialog, useToast, showSuccessToast / showErrorToast / showWarningToast | Composite confirmation dialogs and toast notifications | | ./a11y | useA11yAnnounce | Accessible live-region announcement hook | | ./l10n | usePluginLocale / PluginLocale | Locale + direction/RTL helper | | ./token | useFrontendSessionToken, useAuth, decodeJwtPayload | Frontend session token + JWT auth utilities | | ./tailwind-preset | ehxTailwindPreset | Tailwind preset carrying the gogo-ui theme scales (screens, fonts, sizes, colours, shadows) | | ./types | Guid, Auditable, AuditableDetailed, HasRowVersion, PagedQuery, SearchQuery | Generic base DTO/query types (audit stamps, row version, branded GUID, paging) | | ./plugin-base.css | (CSS asset) | Static base stylesheet for plugin surfaces |

Typical usage

// A PlatformReact page module the host dynamic-imports at surface mount.
import { definePlatformReactPluginPage } from "@ethisyscore/plugin-ui/platform-react";
import { useView } from "@ethisyscore/plugin-ui/platform-react";

function MyFeaturePage() {
  const View = useView("my-feature/list");
  return <View />;
}

export default definePlatformReactPluginPage(MyFeaturePage);

Handlers do not call MCP tools directly — wrap each callee domain in a typed service extending BaseMcpService and consume it through useToolInvoker. See the top-level README §"services over MCP" and the FE migration playbook.

Build and test

npm ci && npm run build && npm test

Last Updated: 2026-07-10