diff --git a/desktop/src/preview-agent/popover.test.ts b/desktop/src/preview-agent/popover.test.ts
new file mode 100644
index 00000000..f4557995
--- /dev/null
+++ b/desktop/src/preview-agent/popover.test.ts
@@ -0,0 +1,15 @@
+import { describe, expect, it, beforeEach } from 'vitest'
+import { applyEdit } from './popover'
+
+beforeEach(() => { document.body.innerHTML = `
Old
` })
+
+describe('applyEdit', () => {
+ it('applies text + color to the live DOM and returns a diff', () => {
+ const el = document.getElementById('t')!
+ const diff = applyEdit(el, { text: 'New', color: 'rgb(255,0,0)' })
+ expect(el.textContent).toBe('New')
+ expect(el.style.color).toBe('rgb(255, 0, 0)')
+ expect(diff.text).toEqual({ from: 'Old', to: 'New' })
+ expect(diff.color?.to).toBe('rgb(255,0,0)')
+ })
+})
diff --git a/desktop/src/preview-agent/popover.ts b/desktop/src/preview-agent/popover.ts
new file mode 100644
index 00000000..35c2fe7d
--- /dev/null
+++ b/desktop/src/preview-agent/popover.ts
@@ -0,0 +1,16 @@
+export type EditInput = { text?: string; color?: string; background?: string; opacity?: string; fontFamily?: string }
+export type EditDiff = {
+ text?: { from: string; to: string }; color?: { from: string; to: string }
+ background?: { from: string; to: string }; opacity?: { from: string; to: string }; fontFamily?: { from: string; to: string }
+}
+
+export function applyEdit(el: HTMLElement, input: EditInput): EditDiff {
+ const cs = window.getComputedStyle(el)
+ const diff: EditDiff = {}
+ if (input.text != null && input.text !== el.textContent) { diff.text = { from: el.textContent ?? '', to: input.text }; el.textContent = input.text }
+ if (input.color) { diff.color = { from: cs.color, to: input.color }; el.style.color = input.color }
+ if (input.background) { diff.background = { from: cs.backgroundColor, to: input.background }; el.style.background = input.background }
+ if (input.opacity) { diff.opacity = { from: cs.opacity, to: input.opacity }; el.style.opacity = input.opacity }
+ if (input.fontFamily) { diff.fontFamily = { from: cs.fontFamily, to: input.fontFamily }; el.style.fontFamily = input.fontFamily }
+ return diff
+}