@ethisyscore/plugin-ui 1.59.0 → 1.62.0

package/dist/platform-react/index.d.cts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ComponentType, ReactElement, AnchorHTMLAttributes, ReactNode, MouseEvent } from 'react';
+import { ComponentType, ReactElement, ReactNode, AnchorHTMLAttributes, MouseEvent } from 'react';
 import * as _tanstack_react_query from '@tanstack/react-query';
 import { QueryClient, UseQueryResult, UseQueryOptions, QueryKey } from '@tanstack/react-query';
 import { PlatformReactPageProps } from '@ethisyscore/components-react';
@@ -177,6 +177,12 @@ declare function useAuthenticatedQueries<TQueryFnData = unknown, TError = Error>
  * the host would load, so the styles travel inside the bundle (typically via a
  * `*.css?inline` import) and are mounted at runtime. Scope the CSS to a plugin
  * root class (never `:root`) so it cannot override the host theme.
+ *
+ * Tailwind's generated layers (`utilities`, and the `@property` fallbacks in
+ * `properties`) are emitted UNSCOPED and used to break that rule — a plugin's bare
+ * `.text-sm` silently restyled host chrome. The build now scopes them:
+ * `scopePluginCssPlugin` in `@ethisyscore/vite-plugin`, applied by both page-build
+ * paths. Hand-written plugin CSS still has to scope itself.
  */
 declare function injectPluginStyles(id: string, css: string): void;
 /** Component form of {@link injectPluginStyles}; renders nothing. */
@@ -185,6 +191,37 @@ declare function PluginStyleScope({ id, css }: {
     css: string;
 }): null;
 
+/**
+ * Class on the portal container element rendered at the end of a plugin surface.
+ * `plugin-base.css` positions it; the class is exported so a plugin can target it
+ * (e.g. to raise the stacking order for one surface).
+ */
+declare const EHX_PLUGIN_PORTAL_CLASS = "ehx-plugin-portal-root";
+/**
+ * Marker attribute on any element acting as a plugin portal container. Scoped
+ * plugin CSS keys off `.ehx-plugin-root` OR this attribute, so a plugin that
+ * supplies its OWN container for a specific overlay (passing `container` on the
+ * component, which beats the default set here) can mark it and keep utilities.
+ */
+declare const EHX_PLUGIN_PORTAL_ATTR = "data-ehx-plugin-portal";
+/**
+ * Renders plugin content plus a portal container INSIDE the plugin's style root,
+ * and defaults MUI's portalling components to that container.
+ *
+ * Why: a plugin's compiled CSS is injected into the host document and is scoped
+ * to the plugin root, but MUI renders modals, menus, poppers and tooltips through
+ * a portal, landing wherever the host theme sends them — a sibling of the plugin
+ * root, not a descendant — so they fall outside every scoped rule. Containing
+ * them first is what lets plugin CSS be scoped at all.
+ *
+ * This is a nested `ThemeProvider` over the HOST theme (MUI is a host external,
+ * so `useTheme()` reads the host's provider through the same module instance).
+ * It adds the container defaults and changes nothing else.
+ */
+declare function PluginPortalScope({ children }: {
+    children: ReactNode;
+}): ReactElement;
+
 /**
  * Minimal `react-router-dom` compatibility shim for lifted monolith code.
  *
@@ -1170,4 +1207,4 @@ interface MenuConfigHostSidebarOptions {
  */
 declare function menuConfigToHostSidebarInput(config: HeaderMenuItem[], opts: MenuConfigHostSidebarOptions): HostSidebarHookInput;
 
-export { type AuthenticatedQueryResult, BaseMcpService, DEFAULT_MAX_UPLOAD_BYTES, type DefinePlatformReactPluginOverlayOptions, type DefinePlatformReactPluginPageOptions, EHX_PLUGIN_ROOT_CLASS, HostSidebarHookInput, HostSidebarInput, type InsetLease, type ManagedLifecycle, type MenuConfigHostSidebarOptions, MissingViewFallback, OVERLAY_HOST_CONTRACT_VERSION, type OverlayHostApi, type OverlayHostCapabilities, OverlayHostContext, type PlatformReactOverlayProps, type PluginOverlayDefinerConfig, type PluginPageDefinerConfig, PluginStyleScope, type ReactRouterShimOptions, SurfaceBaseContext, type SurfaceBaseValue, TemplateContext, type TemplateManifest, type ToHostSidebarInputOptions, type ToolInvoker, type UseMcpUploadOptions, type UseMcpUploadResult, type UseMcpUploadTarget, type ViewComponent, buildSurfaceUrl, createPluginOverlayDefiner, createPluginPageDefiner, createReactRouterShim, createUseView, definePlatformReactPluginOverlay, definePlatformReactPluginPage, deriveHostEntityToken, injectPluginStyles, isComponent, menuConfigToHostSidebarInput, normaliseSlug, notViaMcp, resolveSurfaceBase, surfacePathFor, toHostSidebarInput, useAuthenticatedQueries, useAuthenticatedQuery, useManagedLifecycle, useMcpUpload, useOverlayHost, usePluginRealtime, useSurfaceUrl, useToolInvoker, useToolInvokerMap, useView };
+export { type AuthenticatedQueryResult, BaseMcpService, DEFAULT_MAX_UPLOAD_BYTES, type DefinePlatformReactPluginOverlayOptions, type DefinePlatformReactPluginPageOptions, EHX_PLUGIN_PORTAL_ATTR, EHX_PLUGIN_PORTAL_CLASS, EHX_PLUGIN_ROOT_CLASS, HostSidebarHookInput, HostSidebarInput, type InsetLease, type ManagedLifecycle, type MenuConfigHostSidebarOptions, MissingViewFallback, OVERLAY_HOST_CONTRACT_VERSION, type OverlayHostApi, type OverlayHostCapabilities, OverlayHostContext, type PlatformReactOverlayProps, type PluginOverlayDefinerConfig, type PluginPageDefinerConfig, PluginPortalScope, PluginStyleScope, type ReactRouterShimOptions, SurfaceBaseContext, type SurfaceBaseValue, TemplateContext, type TemplateManifest, type ToHostSidebarInputOptions, type ToolInvoker, type UseMcpUploadOptions, type UseMcpUploadResult, type UseMcpUploadTarget, type ViewComponent, buildSurfaceUrl, createPluginOverlayDefiner, createPluginPageDefiner, createReactRouterShim, createUseView, definePlatformReactPluginOverlay, definePlatformReactPluginPage, deriveHostEntityToken, injectPluginStyles, isComponent, menuConfigToHostSidebarInput, normaliseSlug, notViaMcp, resolveSurfaceBase, surfacePathFor, toHostSidebarInput, useAuthenticatedQueries, useAuthenticatedQuery, useManagedLifecycle, useMcpUpload, useOverlayHost, usePluginRealtime, useSurfaceUrl, useToolInvoker, useToolInvokerMap, useView };

package/dist/platform-react/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ComponentType, ReactElement, AnchorHTMLAttributes, ReactNode, MouseEvent } from 'react';
+import { ComponentType, ReactElement, ReactNode, AnchorHTMLAttributes, MouseEvent } from 'react';
 import * as _tanstack_react_query from '@tanstack/react-query';
 import { QueryClient, UseQueryResult, UseQueryOptions, QueryKey } from '@tanstack/react-query';
 import { PlatformReactPageProps } from '@ethisyscore/components-react';
@@ -177,6 +177,12 @@ declare function useAuthenticatedQueries<TQueryFnData = unknown, TError = Error>
  * the host would load, so the styles travel inside the bundle (typically via a
  * `*.css?inline` import) and are mounted at runtime. Scope the CSS to a plugin
  * root class (never `:root`) so it cannot override the host theme.
+ *
+ * Tailwind's generated layers (`utilities`, and the `@property` fallbacks in
+ * `properties`) are emitted UNSCOPED and used to break that rule — a plugin's bare
+ * `.text-sm` silently restyled host chrome. The build now scopes them:
+ * `scopePluginCssPlugin` in `@ethisyscore/vite-plugin`, applied by both page-build
+ * paths. Hand-written plugin CSS still has to scope itself.
  */
 declare function injectPluginStyles(id: string, css: string): void;
 /** Component form of {@link injectPluginStyles}; renders nothing. */
@@ -185,6 +191,37 @@ declare function PluginStyleScope({ id, css }: {
     css: string;
 }): null;
 
+/**
+ * Class on the portal container element rendered at the end of a plugin surface.
+ * `plugin-base.css` positions it; the class is exported so a plugin can target it
+ * (e.g. to raise the stacking order for one surface).
+ */
+declare const EHX_PLUGIN_PORTAL_CLASS = "ehx-plugin-portal-root";
+/**
+ * Marker attribute on any element acting as a plugin portal container. Scoped
+ * plugin CSS keys off `.ehx-plugin-root` OR this attribute, so a plugin that
+ * supplies its OWN container for a specific overlay (passing `container` on the
+ * component, which beats the default set here) can mark it and keep utilities.
+ */
+declare const EHX_PLUGIN_PORTAL_ATTR = "data-ehx-plugin-portal";
+/**
+ * Renders plugin content plus a portal container INSIDE the plugin's style root,
+ * and defaults MUI's portalling components to that container.
+ *
+ * Why: a plugin's compiled CSS is injected into the host document and is scoped
+ * to the plugin root, but MUI renders modals, menus, poppers and tooltips through
+ * a portal, landing wherever the host theme sends them — a sibling of the plugin
+ * root, not a descendant — so they fall outside every scoped rule. Containing
+ * them first is what lets plugin CSS be scoped at all.
+ *
+ * This is a nested `ThemeProvider` over the HOST theme (MUI is a host external,
+ * so `useTheme()` reads the host's provider through the same module instance).
+ * It adds the container defaults and changes nothing else.
+ */
+declare function PluginPortalScope({ children }: {
+    children: ReactNode;
+}): ReactElement;
+
 /**
  * Minimal `react-router-dom` compatibility shim for lifted monolith code.
  *
@@ -1170,4 +1207,4 @@ interface MenuConfigHostSidebarOptions {
  */
 declare function menuConfigToHostSidebarInput(config: HeaderMenuItem[], opts: MenuConfigHostSidebarOptions): HostSidebarHookInput;
 
-export { type AuthenticatedQueryResult, BaseMcpService, DEFAULT_MAX_UPLOAD_BYTES, type DefinePlatformReactPluginOverlayOptions, type DefinePlatformReactPluginPageOptions, EHX_PLUGIN_ROOT_CLASS, HostSidebarHookInput, HostSidebarInput, type InsetLease, type ManagedLifecycle, type MenuConfigHostSidebarOptions, MissingViewFallback, OVERLAY_HOST_CONTRACT_VERSION, type OverlayHostApi, type OverlayHostCapabilities, OverlayHostContext, type PlatformReactOverlayProps, type PluginOverlayDefinerConfig, type PluginPageDefinerConfig, PluginStyleScope, type ReactRouterShimOptions, SurfaceBaseContext, type SurfaceBaseValue, TemplateContext, type TemplateManifest, type ToHostSidebarInputOptions, type ToolInvoker, type UseMcpUploadOptions, type UseMcpUploadResult, type UseMcpUploadTarget, type ViewComponent, buildSurfaceUrl, createPluginOverlayDefiner, createPluginPageDefiner, createReactRouterShim, createUseView, definePlatformReactPluginOverlay, definePlatformReactPluginPage, deriveHostEntityToken, injectPluginStyles, isComponent, menuConfigToHostSidebarInput, normaliseSlug, notViaMcp, resolveSurfaceBase, surfacePathFor, toHostSidebarInput, useAuthenticatedQueries, useAuthenticatedQuery, useManagedLifecycle, useMcpUpload, useOverlayHost, usePluginRealtime, useSurfaceUrl, useToolInvoker, useToolInvokerMap, useView };
+export { type AuthenticatedQueryResult, BaseMcpService, DEFAULT_MAX_UPLOAD_BYTES, type DefinePlatformReactPluginOverlayOptions, type DefinePlatformReactPluginPageOptions, EHX_PLUGIN_PORTAL_ATTR, EHX_PLUGIN_PORTAL_CLASS, EHX_PLUGIN_ROOT_CLASS, HostSidebarHookInput, HostSidebarInput, type InsetLease, type ManagedLifecycle, type MenuConfigHostSidebarOptions, MissingViewFallback, OVERLAY_HOST_CONTRACT_VERSION, type OverlayHostApi, type OverlayHostCapabilities, OverlayHostContext, type PlatformReactOverlayProps, type PluginOverlayDefinerConfig, type PluginPageDefinerConfig, PluginPortalScope, PluginStyleScope, type ReactRouterShimOptions, SurfaceBaseContext, type SurfaceBaseValue, TemplateContext, type TemplateManifest, type ToHostSidebarInputOptions, type ToolInvoker, type UseMcpUploadOptions, type UseMcpUploadResult, type UseMcpUploadTarget, type ViewComponent, buildSurfaceUrl, createPluginOverlayDefiner, createPluginPageDefiner, createReactRouterShim, createUseView, definePlatformReactPluginOverlay, definePlatformReactPluginPage, deriveHostEntityToken, injectPluginStyles, isComponent, menuConfigToHostSidebarInput, normaliseSlug, notViaMcp, resolveSurfaceBase, surfacePathFor, toHostSidebarInput, useAuthenticatedQueries, useAuthenticatedQuery, useManagedLifecycle, useMcpUpload, useOverlayHost, usePluginRealtime, useSurfaceUrl, useToolInvoker, useToolInvokerMap, useView };

package/dist/platform-react/index.js

@@ -1,7 +1,9 @@
-import { createContext, useEffect, useContext, createElement, useMemo, useRef, useState, useCallback, useSyncExternalStore } from 'react';
+import { createContext, useEffect, useContext, useState, useMemo, createElement, useRef, useCallback, useSyncExternalStore } from 'react';
 import { QueryClient, useQuery, useQueries, QueryClientProvider } from '@tanstack/react-query';
 import { definePlatformReactPage, emitNavigation } from '@ethisyscore/components-react';
 import { useHostIdentity, useMcpTool, usePluginRealtimeSource, useExtensionRuntimeTransport } from '@ethisyscore/extension-runtime/plugin';
+import { useTheme, ThemeProvider } from '@mui/material';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/platform-react/definePlatformReactPluginPage.tsx
 var TemplateContext = createContext(null);
@@ -109,6 +111,41 @@ function isHostChromeCompatible(hostVersion) {
   if (Number.isNaN(hostMajor) || Number.isNaN(sdkMajor)) return false;
   return hostMajor === sdkMajor;
 }
+var EHX_PLUGIN_PORTAL_CLASS = "ehx-plugin-portal-root";
+var EHX_PLUGIN_PORTAL_ATTR = "data-ehx-plugin-portal";
+function withPortalContainer(theme, container) {
+  const slots = theme.components ?? {};
+  const tooltip = slots.MuiTooltip;
+  return {
+    ...theme,
+    components: {
+      ...slots,
+      MuiModal: { ...slots.MuiModal, defaultProps: { ...slots.MuiModal?.defaultProps, container } },
+      MuiPopper: { ...slots.MuiPopper, defaultProps: { ...slots.MuiPopper?.defaultProps, container } },
+      MuiPopover: { ...slots.MuiPopover, defaultProps: { ...slots.MuiPopover?.defaultProps, container } },
+      MuiMenu: { ...slots.MuiMenu, defaultProps: { ...slots.MuiMenu?.defaultProps, container } },
+      MuiTooltip: {
+        ...tooltip,
+        defaultProps: {
+          ...tooltip?.defaultProps,
+          PopperProps: { ...tooltip?.defaultProps?.PopperProps, container }
+        }
+      }
+    }
+  };
+}
+function PluginPortalScope({ children }) {
+  const [container, setContainer] = useState(null);
+  const hostTheme = useTheme();
+  const theme = useMemo(
+    () => container ? withPortalContainer(hostTheme, container) : hostTheme,
+    [hostTheme, container]
+  );
+  return /* @__PURE__ */ jsxs(ThemeProvider, { theme, children: [
+    children,
+    /* @__PURE__ */ jsx("div", { ref: setContainer, className: EHX_PLUGIN_PORTAL_CLASS, ...{ [EHX_PLUGIN_PORTAL_ATTR]: "" } })
+  ] });
+}
 
 // src/platform-react/definePlatformReactPluginPage.tsx
 function makeDefaultQueryClient() {
@@ -149,7 +186,10 @@ function definePlatformReactPluginPage(Page, options) {
           createElement(
             "div",
             { className: `${EHX_PLUGIN_ROOT_CLASS} ${rootClassName}` },
-            body
+            // PluginPortalScope sits INSIDE the style root, so the portal container
+            // it renders is a descendant of it and MUI overlays (dialogs, menus,
+            // poppers, tooltips) open inside the plugin's scoped CSS.
+            createElement(PluginPortalScope, null, body)
           )
         )
       )
@@ -517,7 +557,9 @@ function definePlatformReactPluginOverlay(Overlay, options) {
         createElement(
           "div",
           { className: `${EHX_PLUGIN_ROOT_CLASS} ${rootClassName}` },
-          createElement(Overlay, props)
+          // Overlay surfaces open their own dialogs and menus, so they need the same
+          // portal containment as pages (see definePlatformReactPluginPage).
+          createElement(PluginPortalScope, null, createElement(Overlay, props))
         )
       )
     );
@@ -820,6 +862,6 @@ function menuConfigToHostSidebarInput(config, opts) {
   return { mode: "actions", actions };
 }
 
-export { BaseMcpService, DEFAULT_MAX_UPLOAD_BYTES, EHX_PLUGIN_ROOT_CLASS, HOST_CHROME_CONTRACT_VERSION, HostSidebarActionsContext, MissingViewFallback, OVERLAY_HOST_CONTRACT_VERSION, OverlayHostContext, PluginStyleScope, SIDEBAR_MODE, SurfaceBaseContext, TemplateContext, buildSurfaceUrl, createPluginOverlayDefiner, createPluginPageDefiner, createReactRouterShim, createUseView, definePlatformReactPluginOverlay, definePlatformReactPluginPage, deriveHostEntityToken, injectPluginStyles, isComponent, isHostChromeCompatible, menuConfigToHostSidebarInput, normaliseSlug, notViaMcp, reportHostChromeDiagnostic, resolveSurfaceBase, setHostChromeDiagnosticSink, surfacePathFor, toHostSidebarInput, useAuthenticatedQueries, useAuthenticatedQuery, useHostSidebarActions, useManagedLifecycle, useMcpUpload, useOverlayHost, usePluginRealtime, useSurfaceUrl, useToolInvoker, useToolInvokerMap, useView };
+export { BaseMcpService, DEFAULT_MAX_UPLOAD_BYTES, EHX_PLUGIN_PORTAL_ATTR, EHX_PLUGIN_PORTAL_CLASS, EHX_PLUGIN_ROOT_CLASS, HOST_CHROME_CONTRACT_VERSION, HostSidebarActionsContext, MissingViewFallback, OVERLAY_HOST_CONTRACT_VERSION, OverlayHostContext, PluginPortalScope, PluginStyleScope, SIDEBAR_MODE, SurfaceBaseContext, TemplateContext, buildSurfaceUrl, createPluginOverlayDefiner, createPluginPageDefiner, createReactRouterShim, createUseView, definePlatformReactPluginOverlay, definePlatformReactPluginPage, deriveHostEntityToken, injectPluginStyles, isComponent, isHostChromeCompatible, menuConfigToHostSidebarInput, normaliseSlug, notViaMcp, reportHostChromeDiagnostic, resolveSurfaceBase, setHostChromeDiagnosticSink, surfacePathFor, toHostSidebarInput, useAuthenticatedQueries, useAuthenticatedQuery, useHostSidebarActions, useManagedLifecycle, useMcpUpload, useOverlayHost, usePluginRealtime, useSurfaceUrl, useToolInvoker, useToolInvokerMap, useView };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map