Optimized Hunk Separators + New Variant

[amadeus]

Mark discovered some new cool CSS tricks to enable us to reduce the usage of sticky positioning using container queries.

On top of this, I'm also adding a new basic variant for hunk separators that is hopefully more inline with general needs.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
pierrejs-diff-demo	Ready	Preview	Feb 7, 2026 3:24am
pierrejs-docs	Ready	Preview	Feb 7, 2026 3:24am

[Copilot]

Pull request overview

This PR updates the diffs package’s hunk separator system by introducing a new line-info-basic separator variant and reworking separator styling to rely more on container queries (reducing sticky-position usage).

Changes:

• Add new line-info-basic hunk separator variant across types, separator creation, and metrics.
• Adjust virtualization sizing/gap behavior for the new separator variant.
• Refactor separator CSS to use container queries and updated layout rules; update docs comments and improve a couple of internal error messages.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/diffs/src/utils/resolveVirtualFileMetrics.ts	Treat line-info-basic as a 32px separator in metrics.
packages/diffs/src/utils/createSeparator.ts	Render line-info-basic using the same structure as line-info.
packages/diffs/src/types.ts	Extend HunkSeparators union to include line-info-basic.
packages/diffs/src/style.css	Major separator layout/styling changes + enable container queries on [data-code].
packages/diffs/src/components/VirtualizedFileDiff.ts	Update separator gap logic to account for line-info-basic.
packages/diffs/src/components/FileDiff.ts	Enable expand-click handling for line-info-basic; replace unprofessional error messages.
apps/docs/app/docs/VanillaAPI/constants.ts	Document line-info-basic in Vanilla API docs snippet.
apps/docs/app/docs/ReactAPI/constants.ts	Document line-info-basic in React API docs snippet.

Comments suppressed due to low confidence (1)

packages/diffs/src/components/VirtualizedFileDiff.ts:250

• In computeApproximateSize, when disableFileHeader is true, the initial top padding still adds fileGap for line-info-basic because the condition only excludes simple and metadata. This makes line-info-basic inconsistent with the new separatorGap logic (where it’s treated as a no-gap separator) and can cause incorrect height calculations for virtualization. Include line-info-basic in this condition (or reuse the separatorGap computation) so the header-disabled padding matches the separator gap rules.

    const separatorGap =
      hunkSeparators !== 'simple' &&
      hunkSeparators !== 'metadata' &&
      hunkSeparators !== 'line-info-basic'
        ? fileGap
        : 0;

    // Header or initial padding
    if (!disableFileHeader) {
      this.height += diffHeaderHeight;
    } else if (hunkSeparators !== 'simple' && hunkSeparators !== 'metadata') {
      this.height += fileGap;
    }

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.