feat(canvas): add inline-edit typography mirroring helpers

scaleCssLength + mirrorInlineEditTypography — computed styles read through iframe.contentWindow, px lengths scaled by the iframe zoom factor so the parent-doc field matches the text it floats over at every zoom level. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
CoreBunch · DavidBabinec · Jun 11, 2026 · Jun 10, 2026 · Jun 10, 2026 · Jun 10, 2026
commit 20edb1d4693f979fcba7a92201f72be4856e4a2e
diff --git a/src/__tests__/canvas/canvasOverlayGeometry.test.ts b/src/__tests__/canvas/canvasOverlayGeometry.test.ts
@@ -0,0 +1,27 @@
+/**
+ * canvasOverlayGeometry — pure-function tests for the inline-edit typography
+ * scaling. (measureCanvasElementRect is exercised indirectly by the existing
+ * overlay integration paths; the scaler is the new, directly-testable logic.)
+ */
+import { describe, it, expect } from 'bun:test'
+import { scaleCssLength } from '@site/canvas/canvasOverlayGeometry'
+
+describe('scaleCssLength', () => {
+  it('scales px lengths by the iframe scale factor', () => {
+    expect(scaleCssLength('32px', 0.5)).toBe('16px')
+  })
+
+  it('passes keywords through untouched', () => {
+    expect(scaleCssLength('normal', 0.5)).toBe('normal')
+  })
+
+  it('handles fractional and negative px values', () => {
+    expect(scaleCssLength('1.5px', 2)).toBe('3px')
+    expect(scaleCssLength('-0.5px', 2)).toBe('-1px')
+  })
+
+  it('leaves non-px values untouched (unitless line-height, em)', () => {
+    expect(scaleCssLength('1.4', 0.5)).toBe('1.4')
+    expect(scaleCssLength('0.02em', 0.5)).toBe('0.02em')
+  })
+})
diff --git a/src/admin/pages/site/canvas/canvasOverlayGeometry.ts b/src/admin/pages/site/canvas/canvasOverlayGeometry.ts
@@ -40,3 +40,57 @@ export function measureCanvasElementRect(
     height: editorDocRect.height,
   }
 }
+
+/** Typography lengths that must shrink/grow with the canvas zoom. */
+const SCALED_TYPOGRAPHY_PROPS = ['font-size', 'line-height', 'letter-spacing'] as const
+
+/** Typography that transfers verbatim from the measured element. */
+const COPIED_TYPOGRAPHY_PROPS = [
+  'font-family',
+  'font-weight',
+  'font-style',
+  'color',
+  'text-align',
+  'text-transform',
+] as const
+
+/**
+ * Scale a computed CSS px length by the iframe zoom factor. Keywords
+ * (`normal`), unitless values, and non-px units pass through untouched —
+ * getComputedStyle resolves lengths to px in browsers, so anything else is
+ * already zoom-independent for our purposes.
+ */
+export function scaleCssLength(value: string, scale: number): string {
+  const match = /^(-?\d*\.?\d+)px$/.exec(value.trim())
+  if (!match) return value
+  return `${Number.parseFloat(match[1]) * scale}px`
+}
+
+/**
+ * Mirror the edited element's live typography onto the parent-document
+ * inline-edit field, so the floating <textarea>/<input> reads as the text
+ * it replaces. Reads through `iframe.contentWindow.getComputedStyle` (the
+ * frames are same-origin `srcdoc` iframes) and scales px lengths by the
+ * iframe zoom factor — the field lives in UNSCALED parent coordinates.
+ *
+ * NOTE: this is why the hide-doubled-text rule uses
+ * `-webkit-text-fill-color: transparent` and not `color: transparent` —
+ * the computed `color` read here must stay the authored color.
+ */
+export function mirrorInlineEditTypography(
+  field: HTMLElement,
+  target: HTMLElement,
+  iframe: HTMLIFrameElement,
+): void {
+  const view = iframe.contentWindow
+  if (!view) return
+  const computed = view.getComputedStyle(target)
+  const iframeScale =
+    iframe.offsetWidth > 0 ? iframe.getBoundingClientRect().width / iframe.offsetWidth : 1
+  for (const prop of SCALED_TYPOGRAPHY_PROPS) {
+    field.style.setProperty(prop, scaleCssLength(computed.getPropertyValue(prop), iframeScale))
+  }
+  for (const prop of COPIED_TYPOGRAPHY_PROPS) {
+    field.style.setProperty(prop, computed.getPropertyValue(prop))
+  }
+}