File size: 7,228 Bytes

0dbc9de

import { DiffLineAnnotation, FileContents, FileDiffOptions, type SelectedLineRange } from "@pierre/diffs"
import { ComponentProps } from "solid-js"
import { lineCommentStyles } from "../components/line-comment-styles"

export type DiffProps<T = {}> = FileDiffOptions<T> & {
  before: FileContents
  after: FileContents
  annotations?: DiffLineAnnotation<T>[]
  selectedLines?: SelectedLineRange | null
  commentedLines?: SelectedLineRange[]
  onLineNumberSelectionEnd?: (selection: SelectedLineRange | null) => void
  onRendered?: () => void
  class?: string
  classList?: ComponentProps<"div">["classList"]
}

const unsafeCSS = `
:host {
  --diffs-bg: var(--opencode-diffs-bg, var(--color-background-stronger));
}

[data-diff],
[data-file] {
  /* Pierre 1.2 mixes these override targets at 12% in light mode and 20% in dark mode. */
  --diffs-bg-deletion-override: light-dark(
    color-mix(in lab, var(--diffs-bg) 33.333%, var(--diffs-deletion-base)),
    color-mix(in lab, var(--diffs-bg) 60%, var(--diffs-deletion-base))
  );
  --diffs-bg-deletion-number-override: var(--diffs-bg-deletion-override);
  --diffs-bg-addition-override: light-dark(
    color-mix(in lab, var(--diffs-bg) 33.333%, var(--diffs-addition-base)),
    color-mix(in lab, var(--diffs-bg) 60%, var(--diffs-addition-base))
  );
  --diffs-bg-addition-number-override: var(--diffs-bg-addition-override);
  --diffs-selection-base: var(--v2-background-bg-accent);
  --diffs-selection-number-fg: var(--v2-text-text-accent);
  --diffs-comment-bg: rgb(from var(--v2-background-bg-accent) r g b / 0.06);
  /* Use explicit alpha instead of color-mix(..., transparent) to avoid Safari's non-premultiplied interpolation bugs. */
  --diffs-bg-selection: var(--diffs-bg-selection-override, rgb(from var(--diffs-selection-base) r g b / 0.2));
  --diffs-bg-selection-number: var(--diffs-bg-selection-number-override, var(--diffs-bg-selection));
  --diffs-bg-selection-text: rgb(from var(--diffs-selection-base) r g b / 0.2);
}

[data-diff] ::selection,
[data-file] ::selection {
  background-color: var(--diffs-bg-selection-text);
}

[data-indicators='bars'] [data-column-number][data-line-type='change-addition']::before,
[data-indicators='bars'] [data-column-number][data-line-type='change-deletion']::before {
  width: 2px;
}

[data-indicators='bars'] [data-column-number][data-line-type='change-deletion']::before {
  background-image: none;
  background-color: var(--diffs-deletion-base);
}

[data-background] [data-column-number] {
  --mix-light: 88%;
  --mix-dark: 80%;
}

[data-diff-type='split'] [data-additions],
[data-diff-type='split'] [data-additions] [data-gutter],
[data-diff-type='split'] [data-deletions],
[data-diff-type='split'] [data-deletions] [data-content] {
  border-left: 0;
  border-right: 0;
}

[data-content-buffer] {
  background-image: none;
  background-color: var(--diffs-bg-context-gutter);
}

::highlight(opencode-find) {
  background-color: rgb(from var(--surface-warning-base) r g b / 0.35);
}

::highlight(opencode-find-current) {
  background-color: rgb(from var(--surface-warning-strong) r g b / 0.55);
}

[data-diff] [data-line][data-comment-selected]:not([data-selected-line]) {
  box-shadow: inset 0 0 0 9999px var(--diffs-bg-selection);
}

[data-file] [data-line][data-comment-selected]:not([data-selected-line]) {
  box-shadow: inset 0 0 0 9999px var(--diffs-bg-selection);
}

[data-diff] [data-column-number][data-comment-selected]:not([data-selected-line]) {
  box-shadow: inset 0 0 0 9999px var(--diffs-bg-selection-number);
  color: var(--diffs-selection-number-fg);
}

[data-file] [data-column-number][data-comment-selected]:not([data-selected-line]) {
  box-shadow: inset 0 0 0 9999px var(--diffs-bg-selection-number);
  color: var(--diffs-selection-number-fg);
}

[data-diff] [data-line-annotation],
[data-diff] [data-gutter-buffer='annotation'],
[data-file] [data-line-annotation],
[data-file] [data-gutter-buffer='annotation'] {
  --diffs-annotation-bg: var(--diffs-comment-bg);
  --diffs-computed-decoration-bg: var(--diffs-comment-bg);
  --diffs-computed-diff-line-bg: var(--diffs-comment-bg);
  --diffs-computed-selected-line-bg: var(--diffs-comment-bg);
  --diffs-line-bg: var(--diffs-comment-bg);
  background-color: var(--diffs-comment-bg);
}

[data-diff] [data-line][data-selected-line] {
  background-color: var(--diffs-bg-selection);
}

[data-file] [data-line][data-selected-line] {
  background-color: var(--diffs-bg-selection);
}

[data-diff] [data-column-number][data-selected-line] {
  background-color: var(--diffs-bg-selection-number);
  color: var(--diffs-selection-number-fg);
}

[data-file] [data-column-number][data-selected-line] {
  background-color: var(--diffs-bg-selection-number);
  color: var(--diffs-selection-number-fg);
}

[data-diff] [data-column-number][data-line-type='context'][data-selected-line],
[data-diff] [data-column-number][data-line-type='context-expanded'][data-selected-line],
[data-diff] [data-column-number][data-line-type='change-addition'][data-selected-line],
[data-diff] [data-column-number][data-line-type='change-deletion'][data-selected-line] {
  color: var(--diffs-selection-number-fg);
}

@media (pointer: fine) {
  [data-gutter-utility-slot] {
    opacity: 0;
    pointer-events: none;
  }

  [data-column-number][data-hovered] [data-gutter-utility-slot],
  [data-gutter-utility-slot]:focus-within {
    opacity: 1;
    pointer-events: auto;
  }
}

/* The deletion word-diff emphasis is stronger than additions; soften it while selected so the selection highlight reads consistently. */
[data-diff] [data-line][data-line-type='change-deletion'][data-selected-line] {
  --diffs-bg-deletion-emphasis: light-dark(
    rgb(from var(--diffs-deletion-base) r g b / 0.07),
    rgb(from var(--diffs-deletion-base) r g b / 0.1)
  );
}

[data-diff-header],
[data-diff],
[data-file] {
  [data-separator] {
    height: 24px;
  }
  [data-column-number] {
    cursor: default !important;
  }

  &[data-interactive-line-numbers] [data-column-number] {
    cursor: default !important;
  }

  &[data-interactive-lines] [data-line] {
    cursor: auto !important;
  }
  [data-code] {
    overflow-x: auto !important;
    overflow-y: clip !important;
  }
}

${lineCommentStyles}

`

export function createDefaultOptions<T>(style: FileDiffOptions<T>["diffStyle"]) {
  return {
    theme: "OpenCode",
    themeType: "system",
    disableLineNumbers: false,
    overflow: "wrap",
    diffStyle: style ?? "unified",
    diffIndicators: "bars",
    lineHoverHighlight: "both",
    disableBackground: false,
    expansionLineCount: 20,
    hunkSeparators: "line-info-basic",
    lineDiffType: style === "split" ? "word-alt" : "none",
    maxLineDiffLength: 1000,
    maxLineLengthForHighlighting: 1000,
    disableFileHeader: true,
    unsafeCSS,
  } as const
}

export const styleVariables = {
  "--diffs-font-family": "var(--font-family-mono)",
  "--diffs-font-size": "var(--font-size-small)",
  "--diffs-line-height": "24px",
  "--diffs-tab-size": 2,
  "--diffs-font-features": "var(--font-family-mono--font-feature-settings)",
  "--diffs-header-font-family": "var(--font-family-sans)",
  "--diffs-gap-block": 0,
  "--diffs-gap-style": 0,
  "--diffs-min-number-column-width": "3ch",
}