@reviewflow/ui 6.24.0 → 6.25.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reviewflow/ui",
-  "version": "6.24.0",
+  "version": "6.25.0",
   "description": "react-native pull request screen components. Consumed as SOURCES (no build): exports resolve `default` to ./src/index.ts, which metro transforms like the app's own files; the consuming app's css must @source this package's src so tailwind keeps its classes.",
   "keywords": [
     "alouette",
@@ -46,6 +46,10 @@
       "types": "./src/components/branch-diff/diff-worker-pool.tsx",
       "browser": "./src/components/branch-diff/diff-worker-pool.web.tsx",
       "default": "./src/components/branch-diff/diff-worker-pool.tsx"
+    },
+    "./palette": {
+      "types": "./src/palette.ts",
+      "default": "./src/palette.ts"
     }
   },
   "publishConfig": {
@@ -68,18 +72,22 @@
     "@lezer/highlight": "1.2.3",
     "@lezer/markdown": "1.7.2",
     "@pierre/diffs": "1.5.2",
-    "@reviewflow/sdk": "6.24.0",
+    "@pierre/trees": "1.0.0-beta.6",
+    "@reviewflow/sdk": "6.25.0",
     "@tanstack/markdown": "0.0.13",
     "alouette-icons": "12.0.0",
     "gemoji": "8.1.0",
     "htmlparser2": "12.0.0"
   },
   "devDependencies": {
+    "@pierre/theme": "2.0.0",
     "@storybook/react-native": "10.6.0",
     "@types/react": "19.2.18",
     "@typescript/native": "npm:typescript@7.0.2",
     "alouette": "25.0.1",
+    "colorjs.io": "0.6.0-alpha.1",
     "react": "19.2.8",
+    "react-dom": "19.2.8",
     "react-native": "0.86.2",
     "react-native-safe-area-context": "5.8.0",
     "react-native-svg": "15.15.5",
@@ -89,13 +97,20 @@
   "peerDependencies": {
     "alouette": "^25.0.0",
     "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "react-native": "*",
     "react-native-svg": "*"
   },
+  "peerDependenciesMeta": {
+    "react-dom": {
+      "optional": true
+    }
+  },
   "engines": {
     "node": ">=22.18.0"
   },
   "scripts": {
+    "build:code-theme": "node build-code-theme.ts",
     "lint": "pnpm run lint:oxlint && pnpm run lint:eslint",
     "lint:eslint": "pnpm --dir '../..' exec eslint --quiet 'packages/ui'",
     "lint:oxlint": "pnpm --dir '../..' exec oxlint --quiet 'packages/ui'",

package/src/components/branch-diff/diff-font.ts

@@ -0,0 +1,26 @@
+import type { DiffFont } from "@reviewflow/sdk";
+
+const alouetteMono = "var(--font-mono)";
+
+/** What would end the declaration, the rule or the style, or open a comment. */
+const outsideAFontFamily = /[\n\r*/;<>\\{}]/g;
+
+/**
+ * The CSS `font-family` of the diff's code; null keeps pierre's own. A custom
+ * one falls back to alouette's mono, for a font this machine does not have.
+ * alouette's `--font-mono` is declared on the document root, which pierre's
+ * shadow root inherits.
+ */
+export const diffFontFamily = (
+  font: DiffFont,
+  customFont: string,
+): string | null => {
+  if (font === "pierre") return null;
+  const custom = customFont.replaceAll(outsideAFontFamily, "").trim();
+  if (font === "custom" && custom !== "") return `${custom}, ${alouetteMono}`;
+  return alouetteMono;
+};
+
+/** For a pierre file's `unsafeCSS`: its code in `fontFamily`. */
+export const diffFontCSS = (fontFamily: string | null): string =>
+  fontFamily === null ? "" : `:host { --diffs-font-family: ${fontFamily}; }`;

package/src/components/branch-diff/diff-themes.ts

@@ -1,6 +1,58 @@
+import { registerCustomTheme } from "@pierre/diffs";
+import type { DiffTheme } from "@reviewflow/sdk";
+import { diffThemeNames as sdkDiffThemeNames } from "@reviewflow/sdk";
+
 /**
  * The theme list lives in `@reviewflow/sdk`, which a server can import to
  * validate a stored setting; re-exported here so the ui's imports stay put.
  */
 export type { DiffTheme } from "@reviewflow/sdk";
-export { diffThemeNames, diffThemeOptions, diffThemes } from "@reviewflow/sdk";
+export { diffThemeOptions, diffThemes } from "@reviewflow/sdk";
+
+/**
+ * How much of its git color an added or deleted line of the reviewflow theme
+ * mixes into the code's background: less than pierre's 12% and 20%, which its
+ * saturated palette greens and reds read too dark at.
+ */
+const reviewflowChangeMix = { light: 6, dark: 15 };
+
+/**
+ * For a pierre file's `unsafeCSS`: its added and deleted lines' background.
+ * Through the percentages pierre mixes a line with (`--mix-light`,
+ * `--mix-dark`), not `--diffs-bg-addition-override`: pierre mixes that one
+ * with the background again, as the color it mixes towards.
+ */
+export const changeBackgroundCSS = (theme: DiffTheme): string =>
+  theme === "reviewflow"
+    ? `:host [data-line], :host [data-no-newline] { --mix-light: ${String(100 - reviewflowChangeMix.light)}%; --mix-dark: ${String(100 - reviewflowChangeMix.dark)}%; }`
+    : "";
+
+let reviewflowThemesRegistered = false;
+
+const registerReviewflowThemes = (): void => {
+  if (reviewflowThemesRegistered) return;
+  reviewflowThemesRegistered = true;
+  registerCustomTheme("reviewflow-light", () =>
+    import("./reviewflow-diff-themes.ts").then(
+      ({ reviewflowLightTheme }) => reviewflowLightTheme,
+    ),
+  );
+  registerCustomTheme("reviewflow-dark", () =>
+    import("./reviewflow-diff-themes.ts").then(
+      ({ reviewflowDarkTheme }) => reviewflowDarkTheme,
+    ),
+  );
+};
+
+/**
+ * The shiki theme names of `theme`, for `@pierre/diffs`. Registers the
+ * reviewflow themes first, which pierre resolves from its own registry: a
+ * module import with that side effect could be dropped by a bundler, since
+ * this package declares itself free of side effects.
+ */
+export const diffThemeNames = (
+  theme: DiffTheme,
+): { light: string; dark: string } => {
+  registerReviewflowThemes();
+  return sdkDiffThemeNames(theme);
+};

package/src/components/branch-diff/reviewflow-diff-selection.ts

@@ -0,0 +1,11 @@
+/* Generated by build-code-theme.ts from the palette in src/palette.ts. DO NOT EDIT. */
+
+/**
+ * The background the reviewflow diff theme's selected lines mix with, apart
+ * from its modified color, which is darker (`build-code-theme.ts`). Its own
+ * module: the themes it comes with are loaded lazily.
+ */
+export const reviewflowSelectionColors: Record<"dark" | "light", string> = {
+  light: "#228adf",
+  dark: "#47a5f4",
+};