@opengeni/react 0.11.0 → 0.13.0

package/src/components/pierre-diff.tsx

@@ -37,6 +37,14 @@ export type PierreDiffProps = {
   loading?: ReactNode | undefined;
   /** Rendered if `@pierre/diffs/react` is not installed / fails to import. */
   fallback?: ReactNode | undefined;
+  /** Skip the Shiki renderer entirely and show the plain-text degrade (the old
+   *  `usePierre={false}` path — one renderer, opted out of highlighting). */
+  plain?: boolean | undefined;
+  /** Long-line handling: `"wrap"` soft-wraps (the default — a diff in a narrow
+   *  dock pane should be readable without a horizontal-scroll tax), `"scroll"`
+   *  keeps lines on one row behind a horizontal scrollbar (better for a wide
+   *  viewport or pathological minified lines). */
+  overflow?: "wrap" | "scroll" | undefined;
   className?: string | undefined;
 };
 
@@ -54,8 +62,8 @@ const LazyPatchDiff = lazy(async () => {
 /**
  * The Pierre-backed diff: Shiki-highlighted, virtualized, unified/split. Renders
  * one `PatchDiff` per changed file (a reconstructed unified patch from the
- * `GitFileDiff` hunks). This sits behind `DiffView`'s `fallback` seam so a host
- * that lacks `@pierre/diffs` keeps the hand-rolled renderer.
+ * `GitFileDiff` hunks). The ONE workbench diff renderer; a host without
+ * `@pierre/diffs` gets the built-in plain-text degrade (`PlainPatch`).
  */
 export function PierreDiff({
   diff,
@@ -65,13 +73,16 @@ export function PierreDiff({
   disableWorkerPool,
   loading,
   fallback,
+  plain,
+  overflow = "wrap",
   className,
 }: PierreDiffProps) {
   const [failed, setFailed] = useState(false);
 
   // Probe the import once so a hard failure (peer missing) shows `fallback`
-  // rather than a Suspense boundary that never resolves.
+  // rather than a Suspense boundary that never resolves. Skipped when `plain`.
   useEffect(() => {
+    if (plain) return;
     let cancelled = false;
     void import("@pierre/diffs/react").catch(() => {
       if (!cancelled) setFailed(true);
@@ -79,10 +90,13 @@ export function PierreDiff({
     return () => {
       cancelled = true;
     };
-  }, []);
+  }, [plain]);
 
-  if (failed && fallback !== undefined) {
-    return <div className={className}>{fallback}</div>;
+  if (plain || failed) {
+    // `plain` opts out of highlighting; `failed` = `@pierre/diffs` not installed.
+    // Render the caller's fallback, or a plain (unhighlighted) patch dump — NOT a
+    // second hunk renderer. One highlighted renderer (Pierre) + a text degrade.
+    return <div className={className}>{fallback ?? <PlainPatch diff={diff} />}</div>;
   }
 
   // Default to the dark theme: the host UI is dark-first, and Pierre's own
@@ -90,9 +104,16 @@ export function PierreDiff({
   // inside a dark dock). Callers pass `themeType="light"` to opt into light.
   const options = {
     diffStyle: layout,
-    overflow: "scroll" as const,
+    overflow,
     stickyHeader: true,
-    ...(theme ? { theme } : { theme: { dark: "github-dark", light: "github-light" } }),
+    ...(theme
+      ? { theme }
+      : {
+          theme: {
+            dark: "github-dark-high-contrast",
+            light: "github-light-high-contrast",
+          },
+        }),
     themeType: themeType ?? "dark",
   };
 
@@ -105,16 +126,24 @@ export function PierreDiff({
     "--diffs-light-bg": "var(--og-color-bg)",
     "--diffs-bg-buffer-override": "var(--og-color-surface-1)",
     "--diffs-bg-separator-override": "var(--og-color-surface-1)",
+    "--diffs-addition-color-override": "var(--og-color-status-idle)",
+    "--diffs-deletion-color-override": "var(--og-color-status-failed)",
+    "--diffs-fg-number-addition-override": "var(--og-color-status-idle)",
+    "--diffs-fg-number-deletion-override": "var(--og-color-status-failed)",
+    "--diffs-bg-addition-override":
+      "color-mix(in oklch, var(--og-color-status-idle) 12%, var(--og-color-bg))",
+    "--diffs-bg-deletion-override":
+      "color-mix(in oklch, var(--og-color-status-failed) 12%, var(--og-color-bg))",
+    "--diffs-bg-addition-emphasis-override":
+      "color-mix(in oklch, var(--og-color-status-idle) 22%, var(--og-color-bg))",
+    "--diffs-bg-deletion-emphasis-override":
+      "color-mix(in oklch, var(--og-color-status-failed) 22%, var(--og-color-bg))",
     "--diffs-font-size": "var(--og-code-font-size)",
     "--diffs-line-height": "var(--og-code-line-height)",
   } as CSSProperties;
 
   return (
-    <div
-      className={cn("min-w-0", className)}
-      data-opengeni-pierre-diff
-      style={pierreVars}
-    >
+    <div className={cn("min-w-0", className)} data-opengeni-pierre-diff style={pierreVars}>
       <Suspense fallback={loading ?? <DiffSkeleton />}>
         {diff.map((file) => (
           <div key={file.path} className="mb-2">
@@ -131,9 +160,48 @@ export function PierreDiff({
 }
 
 function DiffSkeleton() {
+  return <div className="p-3 text-og-sm text-og-fg-subtle">Loading diff…</div>;
+}
+
+/**
+ * The unhighlighted degrade for a host without `@pierre/diffs`: the reconstructed
+ * unified patch as monospace text with +/−/@@ tinting. Deliberately NOT a
+ * structured hunk renderer — the workbench keeps exactly one of those (Pierre).
+ */
+function PlainPatch({ diff }: { diff: GitFileDiff[] }) {
+  if (diff.length === 0) {
+    return <div className="p-3 text-og-sm text-og-fg-subtle">No changes</div>;
+  }
   return (
-    <div className="p-3 text-og-sm text-og-fg-subtle">
-      Loading diff…
+    <div className="min-w-0">
+      {diff.map((file) => (
+        <pre
+          key={file.path}
+          className="mb-2 overflow-auto whitespace-pre rounded-og-sm border border-og-border bg-og-bg/60 p-2.5 font-og-mono text-og-xs leading-5"
+        >
+          {gitFileDiffToPatch(file)
+            .split("\n")
+            .map((line, index) => (
+              <span
+                // Patch line position is the stable identity in this immutable plain-text fallback.
+                // oxlint-disable-next-line react/no-array-index-key
+                key={index}
+                className={cn(
+                  "block",
+                  line.startsWith("@@")
+                    ? "text-og-accent"
+                    : line.startsWith("+")
+                      ? "text-og-status-idle"
+                      : line.startsWith("-")
+                        ? "text-og-status-failed"
+                        : "text-og-fg-muted",
+                )}
+              >
+                {line || " "}
+              </span>
+            ))}
+        </pre>
+      ))}
     </div>
   );
 }

package/src/components/pierre-file.tsx

@@ -82,9 +82,7 @@ export function PierreFile({
 
   if (failed) {
     return (
-      <div className={className}>
-        {fallback ?? <PlainFile name={name} contents={contents} />}
-      </div>
+      <div className={className}>{fallback ?? <PlainFile name={name} contents={contents} />}</div>
     );
   }
 
@@ -92,7 +90,14 @@ export function PierreFile({
     overflow: "scroll" as const,
     stickyHeader: true,
     showLineNumbers: true,
-    ...(theme ? { theme } : { theme: { dark: "github-dark", light: "github-light" } }),
+    ...(theme
+      ? { theme }
+      : {
+          theme: {
+            dark: "github-dark-high-contrast",
+            light: "github-light-high-contrast",
+          },
+        }),
     themeType: themeType ?? "dark",
   };
 
@@ -134,9 +139,5 @@ function PlainFile({ name, contents }: { name: string; contents: string }) {
 }
 
 function FileSkeleton() {
-  return (
-    <div className="p-3 text-og-sm text-og-fg-subtle">
-      Loading file…
-    </div>
-  );
+  return <div className="p-3 text-og-sm text-og-fg-subtle">Loading file…</div>;
 }