@powerhousedao/connect-core 6.2.3-dev.66 → 6.2.3-dev.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@powerhousedao/connect-core",
-  "version": "6.2.3-dev.66",
+  "version": "6.2.3-dev.67",
   "publishConfig": {
     "access": "public"
   },
@@ -66,17 +66,17 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@powerhousedao/host-core": "6.2.3-dev.66",
-    "@powerhousedao/reactor": "6.2.3-dev.66",
-    "@powerhousedao/reactor-browser": "6.2.3-dev.66",
-    "@powerhousedao/reactor-router": "6.2.3-dev.66",
-    "@powerhousedao/shared": "6.2.3-dev.66",
-    "document-model": "6.2.3-dev.66"
+    "@powerhousedao/host-core": "6.2.3-dev.67",
+    "@powerhousedao/reactor": "6.2.3-dev.67",
+    "@powerhousedao/reactor-browser": "6.2.3-dev.67",
+    "@powerhousedao/reactor-router": "6.2.3-dev.67",
+    "@powerhousedao/shared": "6.2.3-dev.67",
+    "document-model": "6.2.3-dev.67"
   },
   "devDependencies": {
     "@electric-sql/pglite": "0.3.15",
     "@playwright/test": "^1.60.0",
-    "@renown/sdk": "6.2.3-dev.66",
+    "@renown/sdk": "6.2.3-dev.67",
     "@tanstack/react-router": "^1.170.41",
     "@tanstack/router-cli": "1.167.40",
     "@tanstack/router-core": "1.171.34",

package/src/plugins/composition.ts

@@ -30,9 +30,3 @@ export function isPluginActive(module: string): boolean {
   const active = getActivePluginModules();
   return active === null ? true : active.has(module);
 }
-
-/** Hook form; the composition is fixed for the page's lifetime, so this is a
- * plain synchronous read (no subscription needed). */
-export function useIsPluginActive(module: string): boolean {
-  return isPluginActive(module);
-}

package/src/plugins/index.ts

@@ -1,14 +1,23 @@
-export { applyComposition, registerConnectPlugins } from "./plugin-host.js";
 export {
-  getActivePluginModules,
-  isPluginActive,
-  useIsPluginActive,
-} from "./composition.js";
-export { IfPlugin } from "./if-plugin.js";
+  applyComposition,
+  knownPlugins,
+  registerConnectPlugins,
+} from "./plugin-host.js";
+export { getActivePluginModules, isPluginActive } from "./composition.js";
+export {
+  applyConnectPluginUi,
+  getConnectPluginUi,
+  loadConnectPluginUi,
+  mergeConnectPluginUi,
+  resetConnectPluginUi,
+} from "./plugin-ui.js";
+export type { ConnectPluginUiSet } from "./plugin-ui.js";
 export type {
   ConnectConfigHooks,
   ConnectPlugin,
   ConnectPluginContext,
   ConnectPluginDefinition,
   ConnectPluginFactory,
+  ConnectPluginUi,
+  ConnectRouteUi,
 } from "./types.js";

package/src/plugins/plugin-host.ts

@@ -28,7 +28,8 @@ export function registerConnectPlugins(
   else Object.assign(registry.plugins, plugins);
 }
 
-async function knownPlugins(): Promise<PluginDefinitions> {
+/** Every plugin module made known, its loaders run. */
+export async function knownPlugins(): Promise<PluginDefinitions> {
   const registry = getConnectRegistry();
   const pending = registry.pluginLoaders;
   registry.pluginLoaders = [];

package/src/plugins/plugin-ui.ts

@@ -0,0 +1,153 @@
+import type { AnyRoute, ErrorRouteComponent } from "@tanstack/react-router";
+import type { ComponentType } from "react";
+import type { ConnectRouteRegistration } from "../registry.js";
+import { getConnectRegistry } from "../registry.js";
+import type { ConnectModals } from "../router/modals.js";
+import { isCoreView } from "../router/core-views.js";
+import {
+  addConnectRoutes,
+  removeConnectRoutes,
+  resolveConnectRoutes,
+} from "../router/route-tree.js";
+import { knownPlugins } from "./plugin-host.js";
+import type { ConnectPluginUi, ConnectRouteUi } from "./types.js";
+
+/** The active plugins' UI; a later plugin's routes and modals win. */
+export type ConnectPluginUiSet = {
+  routes: Record<string, ConnectRouteUi>;
+  addRoutes: ConnectRouteRegistration[];
+  modals: ConnectModals;
+  roots: ComponentType[];
+  errorComponent?: ErrorRouteComponent;
+  commonEditors: boolean;
+  consent: boolean;
+};
+
+const NO_UI: ConnectPluginUiSet = {
+  routes: {},
+  addRoutes: [],
+  modals: {},
+  roots: [],
+  commonEditors: false,
+  consent: false,
+};
+
+export function mergeConnectPluginUi(
+  uis: readonly ConnectPluginUi[],
+): ConnectPluginUiSet {
+  const set: ConnectPluginUiSet = {
+    routes: {},
+    addRoutes: [],
+    modals: {},
+    roots: [],
+    commonEditors: false,
+    consent: false,
+  };
+  for (const ui of uis) {
+    for (const [id, route] of Object.entries(ui.routes ?? {})) {
+      set.routes[id] = { ...set.routes[id], ...route };
+    }
+    if (ui.addRoutes) set.addRoutes.push(ui.addRoutes);
+    Object.assign(set.modals, ui.modals);
+    if (ui.Root) set.roots.push(ui.Root);
+    set.errorComponent = ui.errorComponent ?? set.errorComponent;
+    set.commonEditors ||= ui.commonEditors ?? false;
+    set.consent ||= ui.consent ?? false;
+  }
+  return set;
+}
+
+/** Loads the UI of the plugins `composition` names, or of every known plugin
+ * without one (classic Connect), and keeps it for `getConnectPluginUi`. */
+export async function loadConnectPluginUi(
+  composition: readonly { module: string }[] | undefined,
+): Promise<ConnectPluginUiSet> {
+  const definitions = await knownPlugins();
+  const modules = composition
+    ? composition.map((entry) => entry.module)
+    : Object.keys(definitions);
+  const uis = await Promise.all(
+    modules.map(
+      (module) => definitions[module]?.ui?.() ?? Promise.resolve(undefined),
+    ),
+  );
+  const set = mergeConnectPluginUi(
+    uis.filter((ui): ui is ConnectPluginUi => !!ui),
+  );
+  getConnectRegistry().ui = set;
+  return set;
+}
+
+/** The active plugins' UI; none until `loadRuntimeConfig` has loaded it. */
+export function getConnectPluginUi(): ConnectPluginUiSet {
+  return getConnectRegistry().ui ?? NO_UI;
+}
+
+type RouteOptions = Record<string, unknown> & { id?: string; path?: string };
+
+const ROOT_ID = "__root__";
+
+function forEachRoute(
+  route: AnyRoute,
+  visit: (route: AnyRoute, id: string) => void,
+  parentId?: string,
+) {
+  const options = route.options as unknown as RouteOptions;
+  const segment = options.id ?? options.path;
+  const own =
+    parentId === undefined || segment === undefined
+      ? ROOT_ID
+      : `${parentId === ROOT_ID ? "" : parentId}/${segment.replace(/^\//, "")}`;
+  visit(route, own);
+  for (const child of (route.children ?? []) as AnyRoute[]) {
+    forEachRoute(child, visit, own);
+  }
+}
+
+type Applied = { originals: Map<AnyRoute, RouteOptions>; added: AnyRoute[] };
+const appliedTo = new WeakMap<AnyRoute, Applied>();
+
+/** Sets `ui`'s route options on the tree's routes that still show core's view,
+ * and adds its routes; `resetConnectPluginUi` undoes both. */
+export function applyConnectPluginUi(
+  routeTree: AnyRoute,
+  ui: ConnectPluginUiSet = getConnectPluginUi(),
+) {
+  resetConnectPluginUi(routeTree);
+  const applied: Applied = { originals: new Map(), added: [] };
+  forEachRoute(routeTree, (route, id) => {
+    const routeUi = ui.routes[id];
+    const options = route.options as unknown as RouteOptions;
+    if (!routeUi || !isCoreView(options.component)) return;
+    const { staticData, ...views } = routeUi;
+    const keys = [...Object.keys(views), ...(staticData ? ["staticData"] : [])];
+    applied.originals.set(
+      route,
+      Object.fromEntries(keys.map((key) => [key, options[key]])),
+    );
+    Object.assign(options, views);
+    if (staticData) {
+      options.staticData = {
+        ...(options.staticData as object | undefined),
+        ...staticData,
+      };
+    }
+  });
+  for (const registration of ui.addRoutes) {
+    const routes = resolveConnectRoutes(registration, routeTree);
+    addConnectRoutes(routes);
+    applied.added.push(...routes);
+  }
+  appliedTo.set(routeTree, applied);
+}
+
+/** Restores the routes `applyConnectPluginUi` changed and removes the ones it added. */
+export function resetConnectPluginUi(routeTree: AnyRoute) {
+  const applied = appliedTo.get(routeTree);
+  if (!applied) return;
+  for (const [route, originals] of applied.originals) {
+    Object.assign(route.options, originals);
+  }
+  removeConnectRoutes(applied.added);
+  appliedTo.delete(routeTree);
+}

package/src/plugins/types.ts

@@ -1,5 +1,14 @@
 import type { HostPlugin } from "@powerhousedao/host-core/plugins";
 import type { PHConnectRuntimeConfig } from "@powerhousedao/shared/clis";
+import type {
+  ErrorRouteComponent,
+  NotFoundRouteComponent,
+  RouteComponent,
+  StaticDataRouteOption,
+} from "@tanstack/react-router";
+import type { ComponentType } from "react";
+import type { ConnectRouteRegistration } from "../registry.js";
+import type { ConnectModals } from "../router/modals.js";
 
 /**
  * The hook vocabulary ConnectCore exposes to its built-in plugins (rewire R3).
@@ -29,9 +38,41 @@ export type ConnectPluginFactory = (
   config: Record<string, unknown>,
 ) => ConnectPlugin;
 
+/** Options a plugin sets on one of the tree's routes; `staticData` merges over the route's. */
+export type ConnectRouteUi = {
+  component?: RouteComponent;
+  pendingComponent?: RouteComponent;
+  errorComponent?: ErrorRouteComponent;
+  notFoundComponent?: NotFoundRouteComponent;
+  staticData?: Partial<StaticDataRouteOption>;
+};
+
+/** What an active plugin shows. */
+export type ConnectPluginUi = {
+  /** By route id, e.g. `/_app/`; applied only while the route shows core's view,
+   * so a project's own route file wins. */
+  routes?: Record<string, ConnectRouteUi>;
+  /** Code routes the plugin adds, e.g. settings tabs. */
+  addRoutes?: ConnectRouteRegistration;
+  /** Modal views by type, over core's. */
+  modals?: ConnectModals;
+  /** Rendered once beside the app, e.g. a consent banner. */
+  Root?: ComponentType;
+  /** Any route's loader or render error. */
+  errorComponent?: ErrorRouteComponent;
+  /** Keeps common's editors (the drive explorer and model editors), which core leaves out. */
+  commonEditors?: boolean;
+  /** Needs the viewer's consent to analytics cookies, which the host asks for once. */
+  consent?: boolean;
+};
+
 /** A plugin module the host knows by specifier; `whenAbsent` zeroes the
  * config slice it owns when a composition leaves it out. */
 export type ConnectPluginDefinition = {
   create: ConnectPluginFactory;
   whenAbsent?: (config: PHConnectRuntimeConfig) => PHConnectRuntimeConfig;
+  /** The plugin's UI, loaded only while it is active. */
+  ui?: () => Promise<ConnectPluginUi>;
+  /** The prerendered loading shell that shows this plugin's UI. */
+  shell?: string;
 };

package/src/registry.ts

@@ -3,6 +3,7 @@
 import type { ConfigLoader } from "@powerhousedao/shared/connect/config-loader";
 import type { PHStore } from "@powerhousedao/reactor-browser";
 import type { AnyRoute } from "@tanstack/react-router";
+import type { ConnectPluginUiSet } from "./plugins/plugin-ui.js";
 import type { ConnectPluginDefinition } from "./plugins/types.js";
 import type { ConnectRouterBundle } from "./router/connect-router.js";
 import type { ConnectRoutes } from "./router/route-tree.js";
@@ -35,6 +36,8 @@ export type ConnectRegistry = {
   /** Route sources still loading, e.g. packages; unknown paths wait for them. */
   routeHolds?: { count: number; settled: Set<() => void> };
   app?: ConnectAppRouterBinding;
+  /** The active plugins' UI, loaded with the runtime config. */
+  ui?: ConnectPluginUiSet;
   runtimeConfig?: ConfigLoader;
 };
 

package/src/router/app-router.ts

@@ -1,5 +1,6 @@
 import type { PHStore } from "@powerhousedao/reactor-browser";
 import { createDriveArrivals } from "@powerhousedao/reactor-browser";
+import { getConnectPluginUi } from "../plugins/plugin-ui.js";
 import { getConnectRegistry } from "../registry.js";
 import type {
   ConnectRouterBundle,
@@ -31,6 +32,7 @@ export function getConnectAppRouter(
   const bundle = createConnectRouter({
     store,
     arrivals: createDriveArrivals(store),
+    pluginUi: getConnectPluginUi(),
     ...rest,
     routes: (tree) => [
       ...(routes ? resolveConnectRoutes(routes, tree.routeTree) : []),

package/src/router/connect-router.ts

@@ -14,16 +14,15 @@ import type {
 } from "@tanstack/react-router";
 import { createRouter } from "@tanstack/react-router";
 import type { ErrorInfo, PropsWithChildren, ReactElement } from "react";
+import type { ConnectPluginUiSet } from "../plugins/plugin-ui.js";
+import { applyConnectPluginUi } from "../plugins/plugin-ui.js";
 import { markRouterNavigations } from "./perf-marks.js";
 import { bindConnectScroll, connectScrollRestoration } from "./scroll.js";
 import type { DriveRouteData } from "./drive-route-loader.js";
 import type { ConnectRootRoute, ConnectRoutes } from "./route-tree.js";
 import { createConnectNavigation } from "./navigation.js";
-import {
-  CONTENT_VIEW_ID,
-  CoreNotFound,
-  CoreError,
-} from "./route-components.js";
+import { CoreError, CoreNotFound } from "./core-views.js";
+import { CONTENT_VIEW_ID } from "./route-components.js";
 import { addConnectRoutes, connectRoutes } from "./route-tree.js";
 import { setSettingsRoute } from "./settings.js";
 import { parseConnectSearch, stringifyConnectSearch } from "./search.js";
@@ -37,8 +36,10 @@ export type ConnectRouterOptions = {
   InnerWrap?: (props: PropsWithChildren) => ReactElement;
   /** Shown while a route's loader or chunks are pending, after the router's `pendingMs`. */
   pendingComponent?: RouteComponent;
-  /** Any route's loader or render error; core's error view by default. */
+  /** Any route's loader or render error; the plugins', else core's error view. */
   errorComponent?: ErrorRouteComponent;
+  /** The active plugins' UI, set on the routes that show core's views. */
+  pluginUi?: ConnectPluginUiSet;
   /** Loaders' notFound(), e.g. a missing drive's; core's page by default. */
   notFoundComponent?: NotFoundRouteComponent;
   /** The tree to route with: `@powerhousedao/connect/route-tree`, core's or a project's. */
@@ -80,6 +81,7 @@ export function createConnectRouter(
 ): ConnectRouterBundle {
   const { routeTree, homeRoute, driveRoute, nodeRoute, settingsRoute } =
     connectRoutes(options.routeTree);
+  if (options.pluginUi) applyConnectPluginUi(routeTree, options.pluginUi);
   if (options.routes) {
     addConnectRoutes(
       typeof options.routes === "function"
@@ -104,7 +106,8 @@ export function createConnectRouter(
     scrollToTopSelectors: [`#${CONTENT_VIEW_ID}`],
     InnerWrap: options.InnerWrap,
     defaultPendingComponent: options.pendingComponent,
-    defaultErrorComponent: options.errorComponent ?? CoreError,
+    defaultErrorComponent:
+      options.errorComponent ?? options.pluginUi?.errorComponent ?? CoreError,
     // Not per route: a route's notFoundComponent mounts a boundary that
     // re-renders on every navigation.
     defaultNotFoundComponent: options.notFoundComponent ?? CoreNotFound,
@@ -146,9 +149,11 @@ export function bindConnectRouter(
     }
   };
 
-  // A routed modal is the URL's: the store holds what the location names.
+  // A routed modal is the URL's: the store holds what the location names,
+  // unless a confirmation is open over it.
   const syncModal = () => {
     const routed = modalFromSearch(router.state.location.search);
+    if (store.modal && !isRoutedModal(store.modal)) return;
     if (routed) {
       if (JSON.stringify(store.modal) !== JSON.stringify(routed)) {
         store.modal = routed;

package/src/{views → router}/core-app.tsx

@@ -2,8 +2,8 @@ import type { PHStore } from "@powerhousedao/reactor-browser";
 import { PHStoreProvider } from "@powerhousedao/reactor-browser";
 import type { AnyRoute } from "@tanstack/react-router";
 import { RouterProvider } from "@tanstack/react-router";
-import type { ConnectAppRouterOptions } from "../router/app-router.js";
-import { getConnectAppRouter } from "../router/app-router.js";
+import type { ConnectAppRouterOptions } from "./app-router.js";
+import { getConnectAppRouter } from "./app-router.js";
 
 /** A core-only app: `routeTree`'s views over `store`. */
 export function ConnectCoreApp(props: {

package/src/router/core-views.tsx

@@ -0,0 +1,57 @@
+// The router's one edge to core's views: views never import this module, so
+// loading them lazily makes no import cycle.
+import type {
+  ErrorRouteComponent,
+  NotFoundRouteProps,
+  RouteComponent,
+} from "@tanstack/react-router";
+import { lazyRouteComponent } from "@tanstack/react-router";
+import type { ComponentType } from "react";
+import { isDriveNotFound } from "./drive-route-loader.js";
+import type { ConnectModals } from "./modals.js";
+import { CORE_MODAL_VIEWS } from "./modals.js";
+
+// Core's views load only when a page shows one.
+const views = () => import("@powerhousedao/connect-core/views");
+
+const CORE_VIEW = Symbol.for("@powerhousedao/connect-core/core-view");
+
+/** One of core's views, loaded with the route that shows it. */
+export function coreView(name: keyof Awaited<ReturnType<typeof views>>) {
+  return Object.assign(lazyRouteComponent(views, name), {
+    [CORE_VIEW]: true,
+  }) as RouteComponent;
+}
+
+/** Whether a route's component is one of core's views, which a plugin's UI replaces. */
+export function isCoreView(component: unknown) {
+  return (
+    typeof component === "function" &&
+    (component as { [CORE_VIEW]?: true })[CORE_VIEW] === true
+  );
+}
+
+const NotFoundPage = coreView("NotFoundPage");
+const DriveNotFoundPage = coreView("DriveNotFoundPage") as ComponentType<{
+  driveSlug: string;
+}>;
+
+/** Core's not-found page; a missing drive's names the drive. */
+export function CoreNotFound({ data }: Partial<NotFoundRouteProps>) {
+  return isDriveNotFound(data) ? (
+    <DriveNotFoundPage driveSlug={data.driveSlug} />
+  ) : (
+    <NotFoundPage />
+  );
+}
+
+/** Core's view of a route's loader or render error. */
+export const CoreError = coreView("CoreRouteError") as ErrorRouteComponent;
+
+/** Core's modals, loaded when one opens. */
+export const coreModals: ConnectModals = Object.fromEntries(
+  Object.entries(CORE_MODAL_VIEWS).map(([type, name]) => [
+    type,
+    coreView(name),
+  ]),
+);

package/src/router/index.ts

@@ -54,13 +54,18 @@ export type {
 export {
   CONTENT_VIEW_ID,
   ContentOutlet,
+  DrivePending,
+} from "./route-components.js";
+export {
   CoreNotFound,
   CoreError,
+  coreModals,
   coreView,
-  DrivePending,
-} from "./route-components.js";
+  isCoreView,
+} from "./core-views.js";
+export { ConnectCoreApp } from "./core-app.js";
 export type { DocumentViewProps, DriveViewProps } from "./route-components.js";
-export { coreModals, ModalOutlet } from "./modals.js";
+export { CORE_MODAL_VIEWS, ModalOutlet } from "./modals.js";
 export { ModalDialog, useModalFrame } from "./modal-frame.js";
 export type { ModalFrameProps } from "./modal-frame.js";
 export type { ConnectModals } from "./modals.js";

package/src/router/modals.tsx

@@ -3,9 +3,9 @@ import { usePHModal } from "@powerhousedao/reactor-browser";
 import { useMatches } from "@tanstack/react-router";
 import type { ComponentType, ErrorInfo, ReactNode } from "react";
 import { Component, createElement, Suspense } from "react";
+import type * as ModalViews from "../views/modals.js";
 import type { ModalFrameProps } from "./modal-frame.js";
 import { ModalFrameContext } from "./modal-frame.js";
-import { coreView } from "./route-components.js";
 
 /** Modal views by modal type. Each reads the open modal with `usePHModal()`. */
 export type ConnectModals = Partial<Record<PHModal["type"], ComponentType>>;
@@ -18,16 +18,16 @@ declare module "@tanstack/react-router" {
 }
 
 /** Core's modals: the ones editors, drive apps and the reactor open, so every
- * host has them. Loaded when one opens. */
-export const coreModals: ConnectModals = {
-  createDocument: coreView("CreateDocumentModal"),
-  login: coreView("LoginModal"),
-  deleteItem: coreView("DeleteItemModal"),
-  confirmDocumentUpgrade: coreView("ConfirmDocumentUpgradeModal"),
-  downloadDocumentWithErrors: coreView("DownloadDocumentWithErrorsModal"),
-  documentVersionUnsupported: coreView("DocumentVersionUnsupportedModal"),
-  driveAuthRequired: coreView("DriveAuthRequiredModal"),
-};
+ * host has them. Each names its view in `@powerhousedao/connect-core/views`. */
+export const CORE_MODAL_VIEWS = {
+  createDocument: "CreateDocumentModal",
+  login: "LoginModal",
+  deleteItem: "DeleteItemModal",
+  confirmDocumentUpgrade: "ConfirmDocumentUpgradeModal",
+  downloadDocumentWithErrors: "DownloadDocumentWithErrorsModal",
+  documentVersionUnsupported: "DocumentVersionUnsupportedModal",
+  driveAuthRequired: "DriveAuthRequiredModal",
+} as const satisfies Partial<Record<PHModal["type"], keyof typeof ModalViews>>;
 
 type BoundaryProps = { modal: string; children: ReactNode };
 

package/src/router/route-components.tsx

@@ -1,24 +1,16 @@
 import type {
   AnyRoute,
   AnyRouter,
-  ErrorRouteComponent,
-  NotFoundRouteProps,
   RouteComponent,
 } from "@tanstack/react-router";
-import {
-  lazyRouteComponent,
-  Outlet,
-  useMatch,
-  useRouter,
-} from "@tanstack/react-router";
-import type { ComponentType, ReactNode } from "react";
+import { Outlet, useMatch, useRouter } from "@tanstack/react-router";
+import type { ReactNode } from "react";
 import type {
   DocumentDriveDocument,
   FolderNode,
 } from "@powerhousedao/shared/document-drive";
 import type { PHDocument } from "@powerhousedao/shared/document-model";
 import { useIsColdStart } from "./cold-start.js";
-import { isDriveNotFound } from "./drive-route-loader.js";
 
 /** A drive view's props: drive apps and core's directory listing get the same. */
 export type DriveViewProps = {
@@ -72,28 +64,3 @@ export function DrivePending() {
     </p>
   );
 }
-
-// Core's views load only when a page shows one.
-const views = () => import("@powerhousedao/connect-core/views");
-
-/** One of core's views, loaded with the route that shows it. */
-export function coreView(name: keyof Awaited<ReturnType<typeof views>>) {
-  return lazyRouteComponent(views, name) as RouteComponent;
-}
-
-const NotFoundPage = coreView("NotFoundPage");
-const DriveNotFoundPage = coreView("DriveNotFoundPage") as ComponentType<{
-  driveSlug: string;
-}>;
-
-/** Core's not-found page; a missing drive's names the drive. */
-export function CoreNotFound({ data }: Partial<NotFoundRouteProps>) {
-  return isDriveNotFound(data) ? (
-    <DriveNotFoundPage driveSlug={data.driveSlug} />
-  ) : (
-    <NotFoundPage />
-  );
-}
-
-/** Core's view of a route's loader or render error. */
-export const CoreError = coreView("CoreRouteError") as ErrorRouteComponent;

package/src/router/search.ts

@@ -58,12 +58,11 @@ export function stringifyConnectSearch(search: Record<string, unknown>) {
 }
 
 /** The drive route's params: `?history` opens the document's revision history,
- * and `page` (a positive integer; 1 is dropped) pages it. */
+ * and `historyPage` (a positive integer; 1 is dropped) pages it. */
 export function validateDriveSearch(
   search: Record<string, unknown>,
 ): ConnectSearch {
   const result = { ...search } as ConnectSearch;
-  // Without `history`, a `page` is the document's own, e.g. a drive app's.
   if (result[REVISION_HISTORY_PARAM] === undefined) return result;
   result[REVISION_HISTORY_PARAM] = "";
   const page = parseRevisionHistoryPage(result[REVISION_HISTORY_PAGE_PARAM]);

package/src/routes/_app/d/$driveSlug/{-$nodeSlug}.tsx

@@ -17,7 +17,7 @@ import { createFileRoute } from "@tanstack/react-router";
 
 /** The node route's options: its loader, `?history` search and title. */
 export const options = {
-  // `?history` and its `page`; inline type, as in __root.tsx.
+  // `?history` and its `historyPage`; inline type, as in __root.tsx.
   validateSearch: (search: Record<string, unknown>) =>
     validateDriveSearch(search) as Record<string, string | undefined>,
   loader: {

package/src/runtime/runtime-config.ts

@@ -14,13 +14,29 @@ const loader = () =>
   ));
 
 export type LoadRuntimeConfigOptions = {
-  /** The host's plugin modules; loaded only when the config declares a composition. */
+  /** The host's plugin modules: the composition's transform the config, and
+   * the active ones' UI loads (every one's without a composition). */
   plugins?: () => Promise<Record<string, ConnectPluginDefinition>>;
 };
 
 export async function loadRuntimeConfig(
   options: LoadRuntimeConfigOptions = {},
 ): Promise<RuntimePowerhouseConfig> {
+  // Beside the config's fetch: the plugin modules and the UI loader don't
+  // depend on it; only which plugins' UI loads does.
+  const pluginHost = options.plugins
+    ? import("../plugins/plugin-host.js").then(async (host) => {
+        host.registerConnectPlugins(options.plugins!);
+        await host.knownPlugins();
+        return host;
+      })
+    : undefined;
+  const pluginUi = options.plugins
+    ? import("../plugins/plugin-ui.js")
+    : undefined;
+  // Handled here so a failed config read doesn't leave them unhandled.
+  void pluginHost?.catch(() => undefined);
+  void pluginUi?.catch(() => undefined);
   const config = (await loader().read()) as RuntimePowerhouseConfig;
   // R3: a served composition (projected from host.js runner.plugins by the
   // uniform-runners connect runner) runs the plugin pipeline over the config
@@ -36,13 +52,17 @@ export async function loadRuntimeConfig(
       readConfigFlag: () => true,
     });
     if (enabled) {
-      const { applyComposition, registerConnectPlugins } =
-        await import("../plugins/plugin-host.js");
-      if (options.plugins) registerConnectPlugins(options.plugins);
+      const { applyComposition } =
+        (await pluginHost) ?? (await import("../plugins/plugin-host.js"));
       config.connect = await applyComposition(config.connect);
       loader().prime(config);
     }
   }
+  if (pluginHost && pluginUi) {
+    await pluginHost;
+    const { loadConnectPluginUi } = await pluginUi;
+    await loadConnectPluginUi(config.connect.composition);
+  }
   return config;
 }
 

package/src/views/index.ts

@@ -1,5 +1,4 @@
 // Core's plain views; a host loads them only when it shows them.
-export { ConnectCoreApp } from "./core-app.js";
 export { DocumentView, DriveLayout, NodeView } from "./content.js";
 export { DirectoryListing } from "./directory-listing.js";
 export { DocumentHistory, HISTORY_PAGE_SIZE } from "./document-history.js";

package/src/views/layout.tsx

@@ -5,13 +5,23 @@ import {
 } from "@powerhousedao/reactor-browser";
 import { HeadContent, Link, Outlet, useRouter } from "@tanstack/react-router";
 import { Suspense } from "react";
-import { coreModals, ModalOutlet } from "../router/modals.js";
+import type { ConnectModals } from "../router/modals.js";
+import { CORE_MODAL_VIEWS, ModalOutlet } from "../router/modals.js";
 import { ContentOutlet } from "../router/route-components.js";
 import { useNavRoutes, useSidebarMode } from "../router/sidebar.js";
 import { appTitle } from "../router/titles.js";
 import { useIsEmbedded } from "../runtime/embedded.js";
 import { ThemeToggle } from "./theme-toggle.js";
 import { linkClass } from "./index-table.js";
+import * as modalViews from "./modals.js";
+
+// The layout shares the modals' chunk, so it renders them directly.
+const coreModals: ConnectModals = Object.fromEntries(
+  Object.entries(CORE_MODAL_VIEWS).map(([type, name]) => [
+    type,
+    modalViews[name],
+  ]),
+);
 
 /** Core's root: the page, in the theme. */
 export function CoreRoot() {

package/src/plugins/if-plugin.tsx

@@ -1,26 +0,0 @@
-import type { ReactNode } from "react";
-import { useIsPluginActive } from "./composition.js";
-
-/**
- * Renders its children only when a plugin is present in the served
- * composition — the runtime gate for generic-chrome deletability (rewire R3).
- *
- * This is the demonstration step ahead of extracting the generic components
- * into their own package: it makes "remove the generic plugin → the chrome is
- * gone" true at render time while the code still lives in the Connect app.
- * When those components move to `@powerhousedao/connect-generic`, this gate
- * becomes the seam where the package is dynamically imported (or not) instead
- * of merely not rendered.
- *
- * Presence is activation, classic-preserving: with no declared composition,
- * every plugin reads active, so the chrome renders unchanged.
- */
-export function IfPlugin(props: {
-  module: string;
-  children: ReactNode;
-  /** Rendered when the plugin is absent from a declared composition. */
-  fallback?: ReactNode;
-}): ReactNode {
-  const active = useIsPluginActive(props.module);
-  return active ? props.children : (props.fallback ?? null);
-}