Decorations v3

.browserslistrc

@@ -1,5 +1,6 @@
 # Browser support targets for the entire monorepo
-# Targets browsers with native light-dark() support (May 2024+)
+# Bounded by native Intl.Segmenter support, which the diffs editor relies on:
+# Firefox 125+ (Chrome 87+, Edge 87+, Safari 14.1+ — already covered below).
 #
 # Used by:
 # - apps/docs (Next.js + Tailwind CSS v4)
@@ -8,4 +9,4 @@
 chrome >= 123
 edge >= 123
 safari >= 17.5
-firefox >= 120
+firefox >= 125

apps/demo/index.html

@@ -30,10 +30,28 @@
             <input id="wrap-lines" type="checkbox" />
             Wrap
           </label>
+          <label>
+            <input id="lag-radar" type="checkbox" />
+            Lag Radar
+          </label>
         </div>
       </div>
-      <div id="wrapper" class="wrapper" />
+      <div id="wrapper" class="wrapper"></div>
     </div>
+    <!-- lag radar -->
+    <div
+      id="radar"
+      style="
+        display: none;
+        position: fixed;
+        bottom: 4px;
+        right: 4px;
+        width: 100px;
+        height: 100px;
+        z-index: 100;
+        pointer-events: none;
+      "
+    ></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

apps/demo/package.json

@@ -6,6 +6,8 @@
   "type": "module",
   "dependencies": {
     "@pierre/diffs": "workspace:*",
+    "@pierre/icons": "catalog:",
+    "diff": "catalog:",
     "react": "catalog:",
     "react-dom": "catalog:",
     "shiki": "catalog:"

apps/demo/src/codeViewDemo.ts

@@ -6,6 +6,7 @@ import {
   type CodeViewOptions,
   type DiffLineAnnotation,
   type DiffsThemeNames,
+  type FileDiffContentsLoader,
   type LineAnnotation,
   type ParsedPatch,
   type SelectedLineRange,
@@ -14,6 +15,9 @@ import {
 import type { WorkerPoolManager } from '@pierre/diffs/worker';
 
 import { FAKE_DIFF_LINE_ANNOTATIONS, type LineCommentMetadata } from './mocks/';
+import { createHeaderFilenameSuffixBadge } from './utils/createHeaderFilenameSuffixBadge';
+
+const RENDER_FILENAME_SUFFIX = false;
 
 type CodeViewCommentMetadata =
   | CodeViewSavedCommentMetadata
@@ -36,28 +40,29 @@ interface CodeViewDraftCommentMetadata {
 
 interface CodeViewDemoInstance {
   instance: CodeView<CodeViewCommentMetadata>;
-  options: CodeViewOptions<CodeViewCommentMetadata>;
+  options: CodeViewOptions<CodeViewCommentMetadata, undefined>;
 }
 
 type CodeViewDemoAnnotation =
   | DiffLineAnnotation<CodeViewCommentMetadata>
   | LineAnnotation<CodeViewCommentMetadata>;
 
 type CodeViewDiffStyle = NonNullable<
-  CodeViewOptions<CodeViewCommentMetadata>['diffStyle']
+  CodeViewOptions<CodeViewCommentMetadata, undefined>['diffStyle']
 >;
 type CodeViewOverflow = NonNullable<
-  CodeViewOptions<CodeViewCommentMetadata>['overflow']
+  CodeViewOptions<CodeViewCommentMetadata, undefined>['overflow']
 >;
 type CodeViewThemeType = NonNullable<
-  CodeViewOptions<CodeViewCommentMetadata>['themeType']
+  CodeViewOptions<CodeViewCommentMetadata, undefined>['themeType']
 >;
 
 interface RenderDemoCodeViewOptions {
   diffStyle: CodeViewDiffStyle;
   overflow: CodeViewOverflow;
   theme: DiffsThemeNames | ThemesType;
   themeType: CodeViewThemeType;
+  loadDiffFiles?: FileDiffContentsLoader;
   workerManager?: WorkerPoolManager;
 }
 
@@ -81,25 +86,51 @@ export function renderDemoCodeView(
     overflow,
     theme,
     themeType,
+    loadDiffFiles,
     workerManager,
   }: RenderDemoCodeViewOptions
 ) {
   setupCodeViewWrapper(wrapper);
 
   const items = createCodeViewItems(parsedPatches);
-  const options: CodeViewOptions<CodeViewCommentMetadata> = {
+  const options: CodeViewOptions<CodeViewCommentMetadata, undefined> = {
+    // __devOnlyValidateItemHeights: true,
     theme,
     themeType,
     diffStyle,
     overflow,
+    loadDiffFiles,
     renderAnnotation(annotation) {
       return renderCodeViewAnnotation(annotation, viewer, items);
     },
+    ...(RENDER_FILENAME_SUFFIX
+      ? {
+          renderHeaderFilenameSuffix() {
+            return createHeaderFilenameSuffixBadge('CodeView slot');
+          },
+        }
+      : null),
     lineHoverHighlight: 'both',
     expansionLineCount: 10,
     enableLineSelection: true,
     enableGutterUtility: true,
     stickyHeaders: true,
+    // renderCodeViewHeader() {
+    //   const el = document.createElement('div');
+    //   el.textContent = 'CodeView header — scrolls with the content';
+    //   el.style.padding = '20px';
+    //   el.style.textAlign = 'center';
+    //   el.style.borderBottom =
+    //     '1px solid var(--color-border, rgba(128, 128, 128, 0.3))';
+    //   return el;
+    // },
+    // renderCodeViewFooter() {
+    //   const el = document.createElement('div');
+    //   el.textContent = 'CodeView footer 🫶';
+    //   el.style.padding = '40px';
+    //   el.style.textAlign = 'center';
+    //   return el;
+    // },
     layout: { paddingTop: 10, paddingBottom: 24, gap: 12 },
     onGutterUtilityClick(range, context) {
       if (context.item.type !== 'diff') {