@xpufx/paseo-top 0.4.3 → 0.4.4

package/client/vendor/paseo-plugin-helper/surface.tsx

@@ -1,4 +1,5 @@
 import React, { type ComponentType } from "react";
+import { View } from "react-native";
 import type { HostSurfaceProps as PluginSurfaceProps } from "./host";
 import { PluginThemeProvider } from "./theme/provider";
 import { ModalBodyScrollOwnerContext } from "./layout/ModalBody";
@@ -19,8 +20,54 @@ export interface RegisterSidebarSurfaceOptions {
   icon: string;
   Component: ComponentType<PluginSurfaceProps>;
   flair?: VisualFlair;
+  /**
+   * Upper bound (px) on the surface's content column, for readability on very
+   * wide viewports. `false` opts out entirely, for surfaces that are genuinely
+   * canvas-shaped — graph visualisers, wide tables, timeline views — where a
+   * centred column would fight the content rather than help it.
+   *
+   * Defaults to {@link DEFAULT_SIDEBAR_MAX_CONTENT_WIDTH} rather than being
+   * per-call opt-in. Ten call sites already pass a `maxContentWidth` to
+   * `ModalBody` and ignore it in ten others, so making the cap opt-in would
+   * reproduce exactly the inconsistency it is meant to remove — a guard that
+   * only fires where someone remembered it.
+   */
+  maxContentWidth?: number | false;
 }
 
+/**
+ * Default ceiling for a sidebar surface's content column.
+ *
+ * A sidebar surface is a full host page, so on a wide monitor it stretches
+ * edge to edge and line lengths become unreadable. This is a ceiling, not a
+ * target: the column stays fluid below it and is centred above it, exactly as
+ * `ModalBody`'s own `maxContentWidth` behaves. 1280 is a common wide-viewport
+ * breakpoint rather than a number derived from any plugin's content.
+ */
+export const DEFAULT_SIDEBAR_MAX_CONTENT_WIDTH = 1280;
+
+/**
+ * Caps a surface's content column without dictating its width.
+ *
+ * `width: "100%"` keeps the column fluid *below* the cap, so a narrow window
+ * behaves exactly as it did before this existed. `alignSelf: "center"` only
+ * has an effect once the column is capped, and it is the same mechanism
+ * `ModalBody` uses — see the comment at ModalBody.tsx:173 for why auto side
+ * margins are preferred there and why this is safe here: outside a ScrollView
+ * content container there is nothing to stop the column stretching.
+ */
+const SurfaceContentColumn = ({
+  maxContentWidth,
+  children,
+}: {
+  maxContentWidth: number;
+  children: React.ReactNode;
+}) => (
+  <View style={{ width: "100%", maxWidth: maxContentWidth, alignSelf: "center", flex: 1 }}>
+    {children}
+  </View>
+);
+
 /**
  * Registers a sidebar icon and corresponding full-page surface in a single call,
  * automatically injecting `<PluginThemeProvider>` with custom visual flair.
@@ -44,12 +91,25 @@ export function registerSidebarSurface(
   plugin: SidebarSurfaceRegistrar,
   options: RegisterSidebarSurfaceOptions,
 ): () => void {
-  const { id, title, icon, Component, flair } = options;
+  const {
+    id,
+    title,
+    icon,
+    Component,
+    flair,
+    maxContentWidth = DEFAULT_SIDEBAR_MAX_CONTENT_WIDTH,
+  } = options;
 
   const WrappedComponent: ComponentType<PluginSurfaceProps> = (props) => (
     <PluginThemeProvider theme={props.theme} layout={props.layout} flair={flair}>
       <ModalBodyScrollOwnerContext.Provider value="required">
-        <Component {...props} />
+        {maxContentWidth === false ? (
+          <Component {...props} />
+        ) : (
+          <SurfaceContentColumn maxContentWidth={maxContentWidth}>
+            <Component {...props} />
+          </SurfaceContentColumn>
+        )}
       </ModalBodyScrollOwnerContext.Provider>
     </PluginThemeProvider>
   );