clone/opencode
1
0
Fork 0
mirror of https://github.com/anomalyco/opencode.git synced 2026-04-24 14:55:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

wip(ui): update pierre diffs

Browse Source
This commit is contained in:
Adam
2026-02-06 11:09:29 -06:00
parent ed5253e618
commit 186e46d184
3 changed files with 23 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/ui/src/components/diff-ssr.tsx
View File

@@ -70,10 +70,10 @@ export function Diff<T>(props: SSRDiffProps<T>) {
const root = getRoot()
if (!root) return
const diffs = root.querySelector("[data-diffs]")
const diffs = root.querySelector("[data-diff]")
if (!(diffs instanceof HTMLElement)) return
const split = diffs.dataset.type === "split"
const split = diffs.dataset.diffType === "split"
const start = rowIndex(root, split, range.start, range.side)
const end = rowIndex(root, split, range.end, range.endSide ?? range.side)
@@ -132,10 +132,10 @@ export function Diff<T>(props: SSRDiffProps<T>) {
node.removeAttribute("data-comment-selected")
}
const diffs = root.querySelector("[data-diffs]")
const diffs = root.querySelector("[data-diff]")
if (!(diffs instanceof HTMLElement)) return
const split = diffs.dataset.type === "split"
const split = diffs.dataset.diffType === "split"
const rows = Array.from(diffs.querySelectorAll("[data-line-index]")).filter(
(node): node is HTMLElement => node instanceof HTMLElement,

8
packages/ui/src/components/diff.tsx
View File

@@ -147,10 +147,10 @@ export function Diff<T>(props: DiffProps<T>) {
const root = getRoot()
if (!root) return
const diffs = root.querySelector("[data-diffs]")
const diffs = root.querySelector("[data-diff]")
if (!(diffs instanceof HTMLElement)) return
const split = diffs.dataset.type === "split"
const split = diffs.dataset.diffType === "split"
const start = rowIndex(root, split, range.start, range.side)
const end = rowIndex(root, split, range.end, range.endSide ?? range.side)
@@ -261,10 +261,10 @@ export function Diff<T>(props: DiffProps<T>) {
node.removeAttribute("data-comment-selected")
}
const diffs = root.querySelector("[data-diffs]")
const diffs = root.querySelector("[data-diff]")
if (!(diffs instanceof HTMLElement)) return
const split = diffs.dataset.type === "split"
const split = diffs.dataset.diffType === "split"
const rows = Array.from(diffs.querySelectorAll("[data-line-index]")).filter(
(node): node is HTMLElement => node instanceof HTMLElement,

30
packages/ui/src/pierre/index.ts
View File

@@ -13,7 +13,7 @@ export type DiffProps<T = {}> = FileDiffOptions<T> & {
}
const unsafeCSS = `
[data-diffs] {
[data-diff] {
--diffs-bg: light-dark(var(--diffs-light-bg), var(--diffs-dark-bg));
--diffs-bg-buffer: var(--diffs-bg-buffer-override, light-dark( color-mix(in lab, var(--diffs-bg) 92%, var(--diffs-mixer)), color-mix(in lab, var(--diffs-bg) 92%, var(--diffs-mixer))));
--diffs-bg-hover: var(--diffs-bg-hover-override, light-dark( color-mix(in lab, var(--diffs-bg) 97%, var(--diffs-mixer)), color-mix(in lab, var(--diffs-bg) 91%, var(--diffs-mixer))));
@@ -44,7 +44,7 @@ const unsafeCSS = `
--diffs-bg-selection-text: rgb(from var(--surface-warning-strong) r g b / 0.2);
}
:host([data-color-scheme='dark']) [data-diffs] {
:host([data-color-scheme='dark']) [data-diff] {
--diffs-selection-number-fg: #fdfbfb;
--diffs-bg-selection: var(--diffs-bg-selection-override, rgb(from var(--solaris-dark-6) r g b / 0.65));
--diffs-bg-selection-number: var(
@@ -53,7 +53,7 @@ const unsafeCSS = `
);
}
[data-diffs] ::selection {
[data-diff] ::selection {
background-color: var(--diffs-bg-selection-text);
}
@@ -65,46 +65,46 @@ const unsafeCSS = `
background-color: rgb(from var(--surface-warning-strong) r g b / 0.55);
}
[data-diffs] [data-line][data-comment-selected]:not([data-selected-line]) {
[data-diff] [data-line][data-comment-selected]:not([data-selected-line]) {
box-shadow: inset 0 0 0 9999px var(--diffs-bg-selection);
}
[data-diffs] [data-column-number][data-comment-selected]:not([data-selected-line]) {
[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-diffs] [data-line-annotation][data-comment-selected]:not([data-selected-line]) [data-annotation-content] {
[data-diff] [data-line-annotation][data-comment-selected]:not([data-selected-line]) [data-annotation-content] {
box-shadow: inset 0 0 0 9999px var(--diffs-bg-selection);
}
[data-diffs] [data-line][data-selected-line] {
[data-diff] [data-line][data-selected-line] {
background-color: var(--diffs-bg-selection);
box-shadow: inset 2px 0 0 var(--diffs-selection-border);
}
[data-diffs] [data-column-number][data-selected-line] {
[data-diff] [data-column-number][data-selected-line] {
background-color: var(--diffs-bg-selection-number);
color: var(--diffs-selection-number-fg);
}
[data-diffs] [data-column-number][data-line-type='context'][data-selected-line],
[data-diffs] [data-column-number][data-line-type='context-expanded'][data-selected-line],
[data-diffs] [data-column-number][data-line-type='change-addition'][data-selected-line],
[data-diffs] [data-column-number][data-line-type='change-deletion'][data-selected-line] {
[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);
}
/* The deletion word-diff emphasis is stronger than additions; soften it while selected so the selection highlight reads consistently. */
[data-diffs] [data-line][data-line-type='change-deletion'][data-selected-line] {
[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-diffs-header],
[data-diffs] {
[data-diff-header],
[data-diff] {
[data-separator-wrapper] {
margin: 0 !important;
border-radius: 0 !important;