Add on-page editor for the go-graph-cms

Injectable React editor that is side-loaded onto the statically rendered
page and edits through the CMS HTTP API (POST /api/edit).

- Shadow-root UI over server HTML; patches morphed in, undo/redo from
  server inverses (reuses @k6n/cms-editor EditClient/morph/markdown editor)
- Sign-in via go-auth device grant as the CMS client (aud matches), token
  refresh + 401 retry; live preview swapped in on load and on tab focus
- Schema-driven property form (arrays, maps, variants, $ref, validation)
- Every string property editable where it is rendered (value-bound inline
  fields and attribute chips), markdown WYSIWYG for marked fields
- Block palette + drag & drop with ghost drop targets, insertion slots,
  sort snapping between siblings (Alt to nest)
- x-style annotations: on-page padding/margin/gap handles, Style panel,
  wrap-in-layout; x-graph label/group for titles and grouping
- Dev workflow: Vite proxy to the live site (token injected server-side)
  or an offline in-memory mock CMS; jsdom test suite

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

test/harness.ts

@@ -0,0 +1,58 @@
+// Test harness: boots the real editor against the mock CMS inside jsdom.
+import { act } from 'react'
+import { Api } from '../src/api'
+import { AuthManager } from '../src/auth'
+import { boot } from '../src/boot'
+import type { EditorHandle } from '../src/boot'
+import { createMockCms } from '../mock/server'
+import { renderPage } from '../mock/fixtures'
+
+export interface Harness {
+  cms: ReturnType<typeof createMockCms>
+  auth: AuthManager
+  editor: EditorHandle
+  /** Wait for async work (fetches, patch application, React). */
+  settle(): Promise<void>
+  shadow: ShadowRoot
+  /** Click something inside the editor UI by accessible label. */
+  press(label: string): Promise<void>
+  cleanup(): void
+}
+
+/** `stale`: the DOM is the *published* page, and the store has moved on since (the base-page problem). */
+export async function setup(opts: { token?: string; auth?: boolean; stale?: boolean; noPreviewApi?: boolean } = {}): Promise<Harness> {
+  const cms = createMockCms({ token: opts.token, auth: opts.auth })
+  document.head.innerHTML = ''
+  window.open = () => null
+  document.body.innerHTML = renderPage(cms.graph).match(/<body>([\s\S]*)<\/body>/)![1]
+  if (opts.stale) cms.graph.edit([{ op: 'set', id: 'h1', data: { text: 'Latest from the store' } }])
+  if (opts.noPreviewApi) cms.disablePreviewApi()
+  const auth = new AuthManager({ fetch: cms.fetch, persistent: null, session: null, sleep: (ms) => new Promise((r) => setTimeout(r, Math.min(ms, 5))) })
+  const api = new Api({ fetch: cms.fetch, auth })
+  let editor!: EditorHandle
+  await act(async () => {
+    editor = boot({ api })
+  })
+  const settle = () => act(async () => void (await new Promise((r) => setTimeout(r, 25))))
+  const shadow = document.getElementById('cms-onpage-editor')!.shadowRoot!
+  return {
+    cms,
+    auth,
+    editor,
+    settle,
+    shadow,
+    async press(label) {
+      const el = shadow.querySelector<HTMLElement>(`[aria-label="${label}"], [title="${label}"]`)
+      if (!el) throw new Error(`no control "${label}" in editor UI`)
+      await act(async () => el.click())
+      await settle()
+    },
+    cleanup() {
+      editor.destroy()
+      document.body.innerHTML = ''
+    },
+  }
+}
+
+export const click = (el: Element) => el.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, composed: true }))
+export const byId = (id: string) => document.querySelector<HTMLElement>(`[data-cms="${id}"]`)!