feat(integration): Marque live-editing UI kit — Web Components core + React adapter

[bashandbone]

Summary

Drop-in components for embedding Marque in web apps, Electron apps, internal tools, and the M1/M5 surfaces themselves. Frameworkless core (Web Components / Lit) + thin React adapter. TypeScript reference implementation. Published to npm. License: Marque License 1.0.

Stack

• Core: Web Components (Lit-based). Works in vanilla JS, Vue, Svelte, Electron, any framework that consumes custom elements.
• React adapter: thin wrappers over each Web Component, sibling npm package.
• TypeScript reference implementation. Strong types over the diagnostic / suggestion / audit-record surface.

Initial component set

• <marque-diagnostic-marker> — inline squiggly underline (info / warn / error).
• <marque-diagnostic-tooltip> — hover/click tooltip with rule ID, citation, message, suggested fix.
• <marque-suggestion-menu> — apply / ignore-once / ignore-rule / explain dropdown.
• <marque-reference-popover> — primary-source excerpt viewer (consumes per-token help text, feat(docs): per-token authoritative help text (hover-on-token, API consumable) #255).
• <marque-info-banner> — top/bottom dynamic banner (classification rollup, marking count, status).
• <marque-editor> — composed full editor (textarea + overlay + diagnostic panel) for one-line integrations.

Companion: web-editor-in-a-box

Pre-composed app shell — <marque-editor> plus document load / save / share controls. The fastest path from "I want Marque in my web app" to a working integration.

Accessibility + i18n

• WCAG AA conformance from day one.
• Reduced-motion respected (no required motion for diagnostics).
• Reference popover text localizable; severity labels translatable.
• Storybook + CodeSandbox examples in launch.

Acceptance criteria

• All initial components published to npm under a Marque scope.
• Storybook live with every component documented.
• CodeSandbox examples for vanilla, React, and one alt framework.
• WCAG AA verified (axe-core in CI).
• Reduced-motion compliance verified.
• Web-editor-in-a-box renders against a test corpus.
• Grammar-agnostic check: works against a fixture scheme without kit changes.

Dependencies

• marque-wasm (existing).
• feat(api): vocabulary lookup surface for editor/API integrations #254 (vocabulary lookup API surface) — reference popover content.
• feat(docs): per-token authoritative help text (hover-on-token, API consumable) #255 (per-token authoritative help text) — reference popover content.
• Audit-record shape stability (post-PR-3c.2).

Sub-issues to file once this lands

• M4.1 Diagnostic marker + tooltip
• M4.2 Suggestion menu
• M4.3 Reference popover
• M4.4 Info banner
• M4.5 Composed <marque-editor>
• M4.6 React adapter package
• M4.7 Web-editor-in-a-box shell
• M4.8 Storybook + accessibility CI

References

• docs/plans/2026-05-19-distribution-and-adoption.md §5
• feat(api): vocabulary lookup surface for editor/API integrations #254, feat(docs): per-token authoritative help text (hover-on-token, API consumable) #255, enhancement: suggest-while-you-type / predictive marking completion #189