@barocss/math-editor 0.2.1 → 0.4.0

package/STYLING.md

@@ -0,0 +1,157 @@
+# Styling and themes
+
+The editor exposes CSS custom properties for presentation. Set them on a wrapper around an editor, or on a shared ancestor for multiple editors. This works with React, native JavaScript, the light-DOM Web Component, Vue, Svelte and Solid. No theme provider or additional runtime is required. Styling does not change the JSON model, exported LaTeX or undo history.
+
+Import the package stylesheet once, then add your application stylesheet:
+
+```js
+import '@barocss/math-editor/style.css';
+import './math-theme.css';
+```
+
+```css
+.product-math {
+  --me-font-size: 18px;
+  --me-accent: #6b4bb3;
+  --me-variable: #385ea1;
+  --me-number: #a65316;
+  --me-symbol: #8056ad;
+  --me-function: #147d77;
+  --me-surface-padding: 24px 16px;
+  --me-surface-min-height: 100px;
+  --me-toolbar-padding: 6px;
+  --me-control-radius: 4px;
+}
+```
+
+```tsx
+// Rich React editor. Native framework adapters use the same wrapper pattern.
+<div className="product-math">
+  <MathEditor onChange={(document, latex) => save(document, latex)} />
+</div>
+```
+
+```js
+// Native JavaScript. The wrapper may already carry application theme variables.
+const host = document.querySelector('.product-math');
+const editor = mountMathEditor(host, { onChange: save });
+host.style.setProperty('--me-font-size', '20px');
+// On unmount:
+editor.destroy();
+```
+
+```html
+<!-- Register with defineMathEditor() first. This component uses light DOM. -->
+<barocss-math-editor class="product-math" locale="en"></barocss-math-editor>
+```
+
+Try the website's **Theme**, **Math size** and **Compact spacing** controls in the [playground](https://math-editor.barocss.com/#playground). These are application examples, not required library presets.
+
+## Public CSS variables
+
+Unset variables preserve the existing default appearance. Some controls intentionally have slightly different default shades/radii; a supplied token unifies them. Set lengths such as the base font size in `px` or `rem` when the editor and its portal have different parents.
+
+| Variable | Controls | Default behavior |
+| --- | --- | --- |
+| `--me-font-size` | Base formula text and relative script sizes | `22px` in standalone editors |
+| `--me-ui-font-family` | Toolbars, menus and helper text | `system-ui, sans-serif` |
+| `--me-text` | UI text and neutral math glyphs | Dark green/gray |
+| `--me-muted` | Help text, line numbers, menu details | Muted gray/green |
+| `--me-accent` | Buttons, active borders, matrix selection | Green |
+| `--me-line` | Toolbar separators and control/menu borders | Pale gray/green |
+| `--me-background` | Editor root | Transparent |
+| `--me-panel-background` | Suggestion menus, symbol cards, inputs/selects in toolbars | White |
+| `--me-toolbar-background` | Main toolbar | Transparent |
+| `--me-subtle-background` | Symbol browser and grid tools | Pale neutral |
+| `--me-hover-background` | Toolbar hover | Pale green |
+| `--me-active-background` | Selected suggestion and active controls | Pale green |
+| `--me-variable` | Variable tokens, including focused inputs | Blue |
+| `--me-number` | Numeric tokens (`constant` token kind) | Brown/orange |
+| `--me-symbol` | Symbol tokens | Purple |
+| `--me-function` | Function/operator names and their legend | Teal |
+| `--me-input-background` | Editing slot background | Context-specific slot tint |
+| `--me-input-focus-background` | Focused/hovered slot background | Stronger context-specific tint |
+| `--me-selection-background` | Text and structural range selection | Blue |
+| `--me-selection-color` | Native selected input text | White |
+| `--me-focus-color` | Keyboard focus indicator | Blue |
+| `--me-radius` | Suggestion panel corners | `10px` |
+| `--me-control-radius` | Buttons and toolbar fields | `4px`–`7px` depending on control |
+| `--me-surface-padding` | Block editing area padding | `48px 32px` |
+| `--me-inline-padding` | Native inline area padding | `2px 4px`; plugin compact fields `0 2px` |
+| `--me-surface-min-height` | Block area minimum height | Standalone `190px`; plugin panels `60px` |
+| `--me-toolbar-padding` | Main toolbar padding | `12px` |
+| `--me-toolbar-gap` | Gap between main toolbar controls | `4px` |
+| `--me-line-gap` | Gap between top-level equation rows | `18px` |
+| `--me-menu-shadow` | Floating menu shadow | Soft dark shadow |
+| `--me-menu-z-index` | Suggestion menu stacking level | `1000` |
+
+Inline mode retains its content-driven minimum height. Explicit LaTeX sizing commands and specialty mathematical fonts retain their own metrics; the base-size token is not an image scaling API. Formula export/KaTeX rendering is owned by the consumer and does not inherit semantic editing colors automatically.
+
+## Dark and monochrome themes
+
+Define a theme in your own stylesheet. Supply foregrounds and backgrounds together so active inputs, selection and menus remain readable.
+
+```css
+.product-math[data-theme='dark'] {
+  color-scheme: dark;
+  --me-background: #18232c;
+  --me-text: #e5edf3;
+  --me-muted: #a4b5c2;
+  --me-line: #435565;
+  --me-panel-background: #202f3b;
+  --me-subtle-background: #243441;
+  --me-hover-background: #334857;
+  --me-active-background: #354e61;
+  --me-accent: #83d5bc;
+  --me-variable: #9ac7ff;
+  --me-number: #ffc28b;
+  --me-symbol: #d0b7ff;
+  --me-function: #7bddd5;
+  --me-input-background: #223444;
+  --me-input-focus-background: #334d63;
+  --me-selection-background: #436483;
+  --me-selection-color: #fff;
+  --me-focus-color: #9ac7ff;
+}
+
+.product-math[data-theme='mono'] {
+  --me-variable: #303740;
+  --me-number: #303740;
+  --me-symbol: #303740;
+  --me-function: #303740;
+  --me-input-background: #f1f2f4;
+  --me-input-focus-background: #e0e4e9;
+}
+```
+
+Change `data-theme`, an ancestor class, or inline custom properties without remounting. The semantic model remains intact even when all token colors match.
+
+## Suggestions, separate toolbars and iframes
+
+Suggestion and selection-wrapping menus usually mount under `document.body` or the nearest dialog. Both renderers copy the owning editor's resolved presentation tokens to these menus. Two editors can use different themes without applying a global `.me-suggestion-panel` rule. Ancestor attribute changes, window resizing and preferred color-scheme changes refresh the menu theme. Dynamic stylesheet replacement without those events is picked up on the next menu render/open; prefer changing a scoped class or custom property.
+
+Host integrations keep menus inside the math node's event boundary. They use the same glyphs, labels and details as the main React editor. Pointer movement highlights candidates; a stationary pointer does not replace keyboard choices when the list scrolls or redraws. Menu text does not inherit paragraph alignment or letter spacing. Ordinary scrolling text areas do not reduce the fixed menu's height; dialogs and clipping containers that establish a local containing block still constrain it. In a short dialog, the native menu hides its guidance before reducing the space for selectable rows.
+
+An independently mounted toolbar inherits from **its own host**. Put it under the same themed ancestor or apply the same theme class to the editor and toolbar containers. A toolbar shared between different themes does not automatically switch to the selected editor's theme.
+
+CSS does not cross document boundaries. For a TinyMCE classic iframe, load both core and plugin stylesheets using `content_css` and load your theme CSS into that iframe too. Apply the theme to its body or a wrapper within that document. Style a shared toolbar outside the iframe separately. The menu bridge uses the editor's owner document; it does not copy parent-page CSS into an iframe. See [TinyMCE integration](../math-editor-integrations/docs/TINYMCE.md).
+
+## Editor plugin chrome
+
+Import the chosen plugin's `style.css` alongside the core CSS. Shared plugin panels, Apply/Cancel buttons, size controls and hover states use the same `--me-*` palette. Additional host chrome variables are:
+
+| Variable | Controls |
+| --- | --- |
+| `--bme-inline-background` | Background behind an in-place math draft |
+| `--bme-action-color` | Text on the primary Apply button (default white) |
+| `--bme-error-color` | Draft validation messages |
+
+Formula size in host integrations is a **document attribute**: the plugin measures surrounding prose and combines it with the formula's saved percentage. Use the plugin's `fontSize` attribute/size controls for persisted math size. The internal `--bme-font-size` is computed from that value; setting a standalone `--me-font-size` on a wrapper does not override persisted host sizing.
+
+For dark plugin fields, also set `--bme-inline-background: #223444` and choose a readable `--bme-action-color` for your accent. Themes style editor UI, not the surrounding host editor's own menu bar or rendered formula HTML.
+
+## Custom toolbar and layout
+
+Use `toolbar: false` for editor-only embedding, a list of structure kinds to limit commands, or `toolbarMaxItems` for overflow. A completely custom toolbar can call `session.execute(...)`. See [embedding](EMBEDDING.md) and the [session API](API-SESSION.md).
+
+Treat internal `.me-*` and `.bme-*` layout selectors as implementation details. Prefer these variables over overriding fractions, scripts, radical paths, integral glyphs, or input positioning: those metrics are coordinated for editing and KaTeX comparison. Theme changes should be checked with keyboard focus, selections, suggestions and tall nested formulas, as well as at rest.

package/SUPPORT.md

@@ -46,7 +46,7 @@ See the [LaTeX editing guide](LATEX-GUIDE.md) for input examples and prioritized
 | Product | Lower limit, upper limit, body | `\prod_{i=1}^{n}x` | No evaluation |
 | Triple / contour integrals | Three editable slots; side bounds or explicit limits | `\iiint`, `\oint` | No computation; `\nolimits` supported in workspace |
 | Integral | Lower limit, upper limit, integrand | `\int_{a}^{b}x` | Differential entered as text; no integration engine |
-| Matrices / vectors | Editable nested cells; row/column changes | `matrix`, `pmatrix`, `bmatrix`, `Bmatrix`, `vmatrix`, `Vmatrix` | 1–20 rows and columns; no rectangular cell clipboard |
+| Matrices / vectors | Editable nested cells; row/column changes | `matrix`, `pmatrix`, `bmatrix`, `Bmatrix`, `vmatrix`, `Vmatrix` | 1–20 rows and columns; workspace rectangular clipboard and full-matrix transpose |
 | Aligned equations | Two columns, left side right-aligned and right side left-aligned | `aligned` | 1–20 rows, one alignment point; type the relation explicitly |
 | Cases | Expression and condition columns, left brace | `cases` | 1–20 rows; conditions accept math and literal text nodes |
 | Multiple document lines | Split/join top-level rows | `gathered` | No wrapping several document lines into one structure |
@@ -56,17 +56,19 @@ See the [LaTeX editing guide](LATEX-GUIDE.md) for input examples and prioritized
 | Area | Supported | Remaining boundary |
 |---|---|---|
 | Languages | Korean and English UI, demo, accessible names, hints and suggestions | Custom host labels require host translation |
+| Recent / favorites | Shared UI preference store for known symbols/templates, up to 12 recent and 100 favorites | Optional host persistence; no effect on formula JSON or Undo |
+| Presentation changes | Fence type, fraction/binomial size and operator limits from the contextual toolbar | Existing notation only; no arbitrary fonts or dimensions |
 | Discovery | All-symbol grid with English/Korean/glyph/LaTeX search, click to insert | Scroll through the complete 117-symbol catalog |
 | Line numbers | UI gutter for multiple top-level rows, optional prop | Excluded from math output and clipboard |
 | Aliases | English and Korean in both locales; longest symbolic trigger first | Substring matching with exact matches first; no natural-language parsing |
 | Native input | Active token only; composition draft held stable | Real OS IME validation deferred |
 | Roles | Variables, numeric literals, symbols, spaces | Lexical colors are not semantic declarations |
-| Selection | Partial text, drag across tokens/structures, whole document in preview | No keyboard Shift-arrow model expansion or rectangular cell selection |
+| Selection | Partial text, drag across tokens/structures, whole document in preview | Shift+arrow model ranges and workspace rectangular cell selection; touch/OS clipboard validation remains |
 | Wrapping | Fraction, root, power, subscript, parentheses, brackets, absolute value | One balanced row; cross-slot range expands to common structure |
-| Clipboard | Structured internal fragment plus LaTeX text; cut/paste replacement | External LaTeX is literal text; nested multiline paste rejected |
-| History | Undo/redo of model changes and caret, up to 100 prior states | No shared host undo adapter yet |
+| Clipboard | Structured internal fragment plus LaTeX text; cut/paste replacement | Ordinary paste is literal; explicit LaTeX insertion parses at the caret/range; nested multiline paste rejected |
+| History | Undo/redo of model changes and caret, up to 100 prior states | Shared host adapters commit one formula edit; per-host history support varies |
 | Deletion | Text boundaries, line join, structure unwrap, two-step filled-grid deletion | General structural deletion rules are still limited |
-| Serialization | Version-1 JSON document and change callback | No persistence service, saved-document validator or migrations |
+| Serialization | Version-1 JSON document and change callback | `parseMathDocument` validates shape and IDs; persistence and future version migrations remain host work |
 | Preview | Demo-only KaTeX view | Library renders its own editable presentation |
 | Accessibility | Localized labels, combobox suggestions, keyboard slot navigation | Not a complete mathematical screen-reader implementation |
 | Computation | None | No solving, simplification, units engine or collaboration |
@@ -75,9 +77,9 @@ See the [LaTeX editing guide](LATEX-GUIDE.md) for input examples and prioritized
 
 | Template / preset | Sizes | Discovery | Behavior |
 |---|---|---|---|
-| Empty matrix | 2×2, 3×3, 4×4 | `matrix`, `행`, `행렬`; matrix menu | Editable empty cells |
-| Identity matrix | 2×2, 3×3, 4×4 | `identity`, `단위`, `단위행렬`; matrix menu | Diagonal 1, other entries 0 |
-| Zero matrix | 2×2, 3×3, 4×4 | `zero`, `영행렬`; template menu | All entries 0, editable |
+| Empty matrix | 1–20 rows × 1–20 columns via size shortcuts; 2×2/3×3/4×4 menu presets | `matrix`, `행`, `행렬`; matrix menu | Editable empty cells |
+| Identity matrix | Square sizes 1–20 via size shortcuts; 2×2/3×3/4×4 menu presets | `identity`, `단위`, `단위행렬`; matrix menu | Diagonal 1, other entries 0 |
+| Zero matrix | 1–20 rows × 1–20 columns via size shortcuts; 2×2/3×3/4×4 templates | `zero`, `영행렬`; template menu | All entries 0, editable |
 | Column vector | 2×1, 3×1 | `vector`, `column`, `벡터`, `열벡터`; template menu | Empty editable column; existing generic matrix candidates may also match |
 | Quadratic formula | One expression | `quadratic`, `근의공식`; template menu | `x=(-b±√(b²−4ac))/(2a)` using fraction/root/power nodes; assumes a≠0 mathematically, does not enforce it |
 | Pythagorean theorem | One expression | `pythagorean`, `피타고라스`; template menu | `a²+b²=c²` using editable power nodes |
@@ -212,7 +214,7 @@ Catalog size: **117 symbols**.
 
 ## Renderer availability
 
-This formula catalog describes the shared model and the existing rich React editor. New native DOM/framework surfaces share the notation model but have a smaller interaction UI. See the [renderer parity table](ADAPTERS.md#current-renderer-parity) before choosing an adapter.
+This formula catalog describes the shared model and the existing rich React editor. Native DOM/framework surfaces share the notation model, token editing, discovery and presentation utilities; host integration policies remain separate. See the [renderer parity table](ADAPTERS.md#current-renderer-parity) before choosing an adapter.
 
 ### Combined scripts (workspace)
 
@@ -253,12 +255,12 @@ Type `quad` / `qquad` (or `간격` / `큰간격`) for an explicit gap. The caret
 
 Select an expression and choose a fence or annotation in the regular suggestion menu. Fences wrap the expression and resume after it. Annotations keep the selected expression in the body and focus the empty annotation slot. Nested fractions, scripts and other editable structures are allowed in both annotation slots. Backspace after a structure removes its wrapper while preserving its content; Undo restores it.
 
-All structured fences scale with their contents. Short angle notation normalizes to scalable `\left\langle…\right\rangle` on export. Supported physical ends are `(`, `)`, `[`, `]`, `{`, `}`, `⟨`, `⟩`, `|` and `.`. Plain punctuation stays literal unless imported with a structural command. Double norm bars, `\big`/`\Big`, `\overbrace` and `\underbrace` remain unsupported.
+All structured fences scale with their contents. Short angle notation normalizes to scalable `\left\langle…\right\rangle` on export. Supported physical ends are `(`, `)`, `[`, `]`, `{`, `}`, `⟨`, `⟩`, `|` and `.`. Plain punctuation stays literal unless imported with a structural command. Double norm bars and brace annotations are supported. Explicit `\big`/`\Big` sizing remains unsupported.
 
 
 ### Double integrals (workspace)
 
-`\iint_R f(x,y)` imports as `doubleIntegral` with exactly three slots: `[lower/domain, upper, body]`, matching integral navigation. Missing bounds remain editable empty slots. `\iint\limits` preserves the explicit placement directive. Export uses `\iint_{lower}^{upper}{body}`. Search `iint`, `이중적분` or `∬` to insert; Tab visits the domain, upper bound and body in order. The reported expression with `\rm dx \rm dy`, `\xi`, `\eta` and `\text{Area}` is covered by import/round-trip and browser editing fixtures. This is notation support, not numerical integration. Triple and contour integrals remain outside this addition.
+`\iint_R f(x,y)` imports as `doubleIntegral` with exactly three slots: `[lower/domain, upper, body]`, matching integral navigation. Missing bounds remain editable empty slots. `\iint\limits` preserves the explicit placement directive. Export uses `\iint_{lower}^{upper}{body}`. Search `iint`, `이중적분` or `∬` to insert; Tab visits the domain, upper bound and body in order. The reported expression with `\rm dx \rm dy`, `\xi`, `\eta` and `\text{Area}` is covered by import/round-trip and browser editing fixtures. This is notation support, not numerical integration. Triple and contour integrals are also supported.
 
 Fine spacing: `\,`, `\:`, `\;`, `\!` are preserved as zero-slot structures. Positive spacing expands and negative thin spacing contracts the next boundary; these are not editable text spaces.
 
@@ -276,6 +278,16 @@ Fine spacing: `\,`, `\:`, `\;`, `\!` are preserved as zero-slot structures. Posi
 
 ## Keyboard ranges and brace discovery (0.2.1)
 
-Shift+Left/Right extends or shrinks the same model range used by dragging. Structures are crossed as balanced units; copied and deleted ranges use existing model normalization. Shift+Up/Down extends to an adjacent top-level document line, using a logical text offset rather than pixel-based column matching; grid-cell rectangular selection is not added. Copy, cut, wrapping, deletion and Undo use the existing range behavior. IME composition and modifier shortcuts retain their existing handling.
+Shift+Left/Right extends or shrinks the same model range used by dragging. Structures are crossed as balanced units; copied and deleted ranges use existing model normalization. Shift+Up/Down extends to an adjacent top-level document line, using a logical text offset rather than pixel-based column matching; an active matrix-cell selection instead uses Shift+arrows to move its rectangular focus corner. Copy, cut, wrapping, deletion and Undo use the existing range behavior. IME composition and modifier shortcuts retain their existing handling.
+
+After a model selection, plain Left/Up restores the caret at its document-ordered
+start; Right/Down restores it at the end. The same rule applies to reverse drags
+and Shift+arrow selections, without consuming another character or changing the
+formula. Alt+Up/Down browses the wrapping suggestions while retaining the range;
+Enter applies a candidate. Ordinary input suggestions still use Up/Down.
 
 Typing `{` offers both paired braces and cases. Paired braces remain the first candidate; choose Cases explicitly to insert its editable grid.
+
+## Presentation customization
+
+CSS variables support scoped palettes, token colors, slot focus/selection, toolbar density and menu chrome in both renderers and all framework adapters. Portaled suggestions follow their owning editor. See [Styling & themes](STYLING.md); host integrations retain their own persisted formula-size attributes.

package/VALIDATION.md

@@ -1,6 +1,43 @@
 # Validation report
 
-## Current release status — 0.2.0
+## Styling and themes — workspace, 2026-09-09
+
+Release browser regression: all 385 existing Chromium cases passed across the
+full run and a focused rerun. Three stale expectations were updated for locale
+query parameters, the explicit toolbar overflow button and Alt+arrow wrapping
+navigation; all 26 cases in those three files passed on rerun. Shared integration
+unit tests: 52 passing. No notation/model changes were needed for theming.
+
+`apps/math-integrations/tests/style-customization-check.js` passed in Chromium:
+independent light/dark instances, resolved host `var()` aliases, isolation from
+unrelated portal-container variables, external toolbar styling, native iframe
+menus, rich React suggestions/selection menus, and live theme switches preserving
+input focus, document state and history. The site controls and styling reader
+were also checked in Korean; English controls are covered by the fixture.
+
+`tinymce-inline-check.js` additionally passed palette/action styling and the
+existing typing, Apply/Cancel, serialization, history and cleanup cases in both
+inline and classic iframe TinyMCE. The Apply control now has an explicit class,
+so prepended size controls cannot prevent its primary style. These checks do not
+certify arbitrary customer CSS palettes or browser/assistive-technology contrast.
+
+
+## Selection collapse — workspace, 2026-09-09
+
+Core unit regression: 503 tests in 31 files. The added cases cover ordered edges
+for forward/reversed structural ranges, partial-text and collapsed ranges,
+absent ranges/non-arrow keys and unchanged source. Plain arrows now restore
+a caret from model selection in both renderers; Alt+Up/Down retains a range for
+wrapping-suggestion navigation.
+
+Real Chromium checks in `apps/math-integrations/tests/selection-collapse-check.js`
+passed for rich React, including subsequent typing and fraction-boundary collapse.
+`tinymce-inline-check.js` passed all four plain arrows and subsequent typing in
+both inline TinyMCE and its classic iframe. Native selection/toolbar, shared iframe
+and all nine matrix host regressions also passed. Wider browser and OS IME checks
+remain open. This is workspace evidence, not a new published package version.
+
+## Current release status — 0.2.1
 
 The dated entries below are historical verification records, not current release availability claims. Note inline editing is resolved according to the user; this release does not change or deploy Note. Math-editor release checks and site validation are recorded separately at the end of this document.
 
@@ -43,14 +80,68 @@ The in-app browser also verified the complete English demo/editor UI, quadratic-
 - Real OS Korean IME testing is deferred at the user's request. Synthetic composition events verify guarding and draft handling only.
 - Automated browser coverage is Chromium on macOS. Narrow viewport checks are not mobile-browser or touch validation.
 - Full screen-reader math navigation, high contrast, and every theme are not certified.
-- There is no saved-document validator, persistence/restart-recovery test, migration path or host-wide undo integration.
-- Rectangular matrix selections, keyboard model range extension, general LaTeX import and symbolic computation are not implemented.
+- Saved-document validation, bounded LaTeX import and keyboard model ranges are implemented; model-version migration and recovery remain open. Host persistence/Undo evidence is recorded separately in the integration validation guide.
+- Matrix rectangles and transpose are implemented in the workspace; full TeX interpretation and symbolic computation are not implemented.
 - Deep nesting and very large expressions have no agreed performance budget yet.
 
 ## Integration gates
 
 Before shipping inside a host product, test actual input methods and target browsers, establish a single undo owner, validate saved documents, verify focus across host/math boundaries, and define recoverable clipboard/import failures. Every new structure must have localized labels, deterministic transformations, one-step structural undo, browser interaction coverage and supported LaTeX output.
 
+## Matrix cell ranges and transpose — 2026-09-09 workspace
+
+- 498 core tests pass, including 16 cell-rectangle/model/history cases and a grid
+  hit-test regression for tall fractions. Selection snapshots stay isolated;
+  invalid shapes and oversized pastes preserve the entire document/history.
+- `apps/math-integrations/tests/matrix-range-check.js` passes in both rich React
+  and the native renderer with zero page errors. It covers active-input drag,
+  reversed corners, keyboard extension/shrinking, Shift+click, exact nested-cell
+  clipboard payloads, mismatched paste rejection, paste/cut/clear/typing Undo,
+  anchored TSV growth, full transpose and resumed nested-denominator editing.
+- The same exported transposed matrix was inspected in both editors and KaTeX.
+  Screenshots: `output/playwright/matrix-range-native-katex.png` and
+  `output/playwright/matrix-range-react-katex.png`. Cell order and nested structure
+  match; editing retains its existing spacing and caret targets.
+- Pointer hit testing uses row and column tracks independently once a cell range
+  starts. A tall fraction no longer attracts the pointer away from a neighboring
+  cell during edge scrolling. Pointer focus uses `preventScroll`, and the React
+  selection hint is below the expression to avoid moving it mid-drag.
+- Clipboard checks dispatch ClipboardEvent with DataTransfer; they do not certify
+  system clipboard transfer to other applications. OS IME, touch, Safari/Firefox
+  and screen-reader coverage remain open. No new LaTeX syntax or model version was
+  introduced; neither npm publication nor site deployment is part of this run.
+
+## Native controls and precise selection — 2026-09-09 workspace
+
+The native surface now exposes symbol search, templates and matrix presets behind
+More tools, plus contextual row/column/delimiter controls. Selected passive text
+is highlighted at its exact endpoints. Pointer drags can start in the live input
+and extend through structures while ordinary within-input selection stays native.
+
+- The core suite passes 481 tests, including toolbar catalog restrictions,
+  partial-text intersections, Shift-drag anchors, selection-menu dismissal and
+  suggestion placement around reserved host controls.
+- `apps/math-integrations/tests/native-parity-check.js` passes in Chromium with
+  zero page errors: exact partial highlights, native within-input replacement,
+  cross-fraction selection in both directions, Shift-drag forward/backward anchors,
+  shrinking the range back, replacement and Undo, symbol insertion into selected
+  text, editable templates, matrix edits, filtered/hidden toolbars and teardown.
+- Selection Escape checks preserve the model/native range on the first Escape,
+  reopen suggestions for a changed selection, and notify host Cancel on the second.
+- The browser clipboard check dispatches a ClipboardEvent with DataTransfer and
+  verifies both exact LaTeX endpoints and the structured MIME payload. This is
+  handler validation, not an OS clipboard compatibility claim.
+- Synthetic formula composition disables toolbar mutations and restores them on
+  composition end. Real OS IME testing remains deferred.
+- The existing fraction fixture is shown alongside its KaTeX output in
+  `output/playwright/native-parity-editor-katex.png`; this addition changes
+  controls and selection presentation, not supported notation or glyph geometry.
+
+These are workspace changes awaiting release. Whole logical-run active inputs,
+one active-run role color, additional
+complete locale packs and broader browser/accessibility certification remain open.
+Host-specific browser findings are recorded in the integration validation guide.
+
 ## Line numbers and symbol discovery
 
 Three browser tests verify the UI-only line gutter through split/join/undo, its exclusion from LaTeX and model clipboard, the complete 90-symbol grid, bilingual search, insertion before typing, range replacement, undo, Escape and clipboard isolation in the search field. A native Home key did not move the caret in the macOS test environment; the test uses the supported Left arrow to reach the line start. The in-app browser visually confirmed the full symbol grid with names and search focus.
@@ -63,7 +154,12 @@ Three browser tests verify the UI-only line gutter through split/join/undo, its
 - A packed tarball was extracted into a temporary directory. Five entry points (`core`, `dom`, `web-component`, `vue`, `svelte`) imported without framework peers or browser globals; main/React/Solid entries imported after installing links to only their relevant local peers. All eight JS export paths and declared CSS/type targets exist. This is a local packaging smoke test, not publication or an exhaustive downstream TypeScript/bundler matrix.
 - The in-app browser visually verified the adapter lab and actual pure-JS `x/ → ↓ → Enter → 2` input, producing `\frac{x}{2}`. Inline mode displays without the block editor's large surface and toolbar.
 
-Remaining adapter gates: exact range highlighting, active-input cross-structure dragging, token-level edit colors, composition preview parity, native all-symbol/context toolbars, reactive-option/version matrix and accessibility/browser coverage. Native `MathEditorSurface` is not advertised as complete rich React parity. OS IME testing remains deferred.
+Updated 2026-09-09: exact range highlighting, active-input cross-structure dragging
+and native symbol/template/grid controls are implemented in the workspace.
+Remaining adapter gates include token-level active input/colors, composition
+preview parity, framework/version coverage and accessibility/browser coverage.
+Native `MathEditorSurface` is not advertised as complete rich React parity.
+OS IME testing remains deferred.
 
 ## Composition, source readability and JSON locales — 2026-09-08
 
@@ -258,3 +354,16 @@ Package build and 388 unit tests passed. Built-in locale tests reject misplaced
 ## 0.2.1 release verification
 
 Formatting, types, 390 unit tests and all eight packed entry points passed. Thirty-nine related Chromium cases passed for keyboard and drag selection, clipboard, wrapping, tokens, brace/cases discovery, preview and bundled locales. Website PNG download/copy checks validate dimensions and nonblank raster pixels. Long-formula fitting and transparent alpha were checked separately. Image generation is a demo dependency, not a library API.
+
+## Editing utilities — workspace, 2026-09-09
+
+Core unit regression: **548 tests**. Shared integrations: **52 tests**. Core, integration package and both demo applications pass TypeScript checks. The main demo documentation/site build and the integration demo production build pass. The integration demo retains its existing large host-SDK chunk warnings.
+
+- `token-paste-check.js`: Vue and rich React pass continuous token typing, middle insertion, boundary deletion, range replacement through explicit LaTeX paste, atomic diagnostics, continued typing and Undo.
+- `quick-presentation-check.js`: Vue, rich React and Quill pass symbol/template favorites, recent items, insertion focus, bracket/size/limit changes and Undo. Editor views and the live KaTeX output were visually compared.
+- `host-composition-check.js`: 16 supported inline/block combinations across nine host demos preserve browser preedit, commit/cancel and subsequent typing without per-key refocusing.
+- `latex-paste-host-check.js`: the same 16 combinations keep Ctrl/Cmd+Enter inside the paste form. Inserted fractions remain local drafts, typing resumes, and Cancel preserves host serialization.
+- `native-parity-check.js`: exact text and cross-structure selection, Shift-drag, shrinkback, structured copy, discovery, grid controls, restrictions and teardown pass. Its coordinate helper now maps logical text across token spans.
+- Quill composition and typing regression fixtures pass, including read-only recovery, host history and matrix-cell entry.
+
+This is local Chromium evidence. OS IME, Safari/Firefox, installed WordPress and cross-application system clipboard checks were not repeated. No new mathematical grammar or numerical behavior is introduced. Release artifacts prepared before these changes require regeneration; nothing was published by this work.

package/dist/core.d.ts

@@ -1,6 +1,8 @@
 export * from './model.js';
 export * from './matrix.js';
+export * from './matrix-range.js';
 export * from './lines.js';
+export * from './vertical-navigation.js';
 export * from './range.js';
 export * from './tokens.js';
 export * from './symbols.js';
@@ -10,4 +12,6 @@ export * from './session.js';
 export * from './i18n.js';
 export * from './latex.js';
 export * from './document-codec.js';
-//# sourceMappingURL=core.d.ts.map
+export * from './latex-insertion.js';
+export * from './preferences.js';
+export * from './presentation.js';

package/dist/core.js

@@ -1,6 +1,8 @@
 export * from './model.js';
 export * from './matrix.js';
+export * from './matrix-range.js';
 export * from './lines.js';
+export * from './vertical-navigation.js';
 export * from './range.js';
 export * from './tokens.js';
 export * from './symbols.js';
@@ -10,4 +12,6 @@ export * from './session.js';
 export * from './i18n.js';
 export * from './latex.js';
 export * from './document-codec.js';
-//# sourceMappingURL=core.js.map
+export * from './latex-insertion.js';
+export * from './preferences.js';
+export * from './presentation.js';

package/dist/document-codec.d.ts

@@ -1,4 +1,3 @@
 import { type MathDocument } from './model.js';
 /** Validate persisted JSON before passing it to a renderer. Reject duplicate caret addresses. */
 export declare function parseMathDocument(source: string): MathDocument | undefined;
-//# sourceMappingURL=document-codec.d.ts.map

package/dist/document-codec.js

@@ -34,4 +34,3 @@ export function parseMathDocument(source) {
         return;
     }
 }
-//# sourceMappingURL=document-codec.js.map

package/dist/dom/caret-geometry.d.ts

@@ -0,0 +1,3 @@
+import type { MathCaretGeometry } from '../vertical-navigation.js';
+/** Measure existing mirrors, including React and native DOM token spans. */
+export declare function renderedCaretGeometry(surface: HTMLElement): MathCaretGeometry;

package/dist/dom/caret-geometry.js

@@ -0,0 +1,41 @@
+/** Measure existing mirrors, including React and native DOM token spans. */
+export function renderedCaretGeometry(surface) {
+    const runs = new Map();
+    for (const run of surface.querySelectorAll('.me-run[data-run-id]')) {
+        const id = run.dataset.runId;
+        const group = runs.get(id) ?? [];
+        group.push(run);
+        runs.set(id, group);
+    }
+    return ({ id, offset, affinity }) => {
+        const group = runs.get(id);
+        if (!group)
+            return;
+        const contains = (run) => {
+            const start = Number(run.dataset.tokenStart ?? 0);
+            return offset >= start && offset <= start + (run.dataset.value?.length ?? 0);
+        };
+        const candidates = group.filter(contains);
+        // An explicit side must win over active-input state when measuring target candidates.
+        const run = affinity
+            ? affinity === 'forward'
+                ? candidates.at(-1)
+                : candidates[0]
+            : candidates.find((item) => item.querySelector('.me-input')) ?? candidates[0];
+        const mirror = run?.querySelector('.me-measure');
+        if (!run || !mirror)
+            return;
+        const value = run.dataset.value ?? '';
+        if (value && mirror.firstChild?.nodeType === 3) {
+            const range = surface.ownerDocument.createRange();
+            range.setStart(mirror.firstChild, offset - Number(run.dataset.tokenStart ?? 0));
+            range.collapse(true);
+            const rect = range.getBoundingClientRect();
+            if (rect.height)
+                return { x: rect.left, y: rect.top + rect.height / 2 };
+        }
+        const rect = mirror.getBoundingClientRect();
+        if (!value && rect.height)
+            return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
+    };
+}

package/dist/dom/elements.d.ts

@@ -1,3 +1,2 @@
 /** Shared native element factory. Text is assigned with textContent, never parsed as HTML. */
-export declare const element: <K extends keyof HTMLElementTagNameMap>(tag: K, className?: string, text?: string) => HTMLElementTagNameMap[K];
-//# sourceMappingURL=elements.d.ts.map
+export declare const elementFactory: (doc: Document) => <K extends keyof HTMLElementTagNameMap>(tag: K, className?: string, text?: string) => HTMLElementTagNameMap[K];

package/dist/dom/elements.js

@@ -1,9 +1,8 @@
 /** Shared native element factory. Text is assigned with textContent, never parsed as HTML. */
-export const element = (tag, className = '', text) => {
-    const node = document.createElement(tag);
+export const elementFactory = (doc) => (tag, className = '', text) => {
+    const node = doc.createElement(tag);
     node.className = className;
     if (text !== undefined)
         node.textContent = text;
     return node;
 };
-//# sourceMappingURL=elements.js.map

package/dist/dom/latex-panel.d.ts

@@ -0,0 +1,10 @@
+import { type MathLocale } from '../i18n.js';
+import type { LatexParseResult } from '../latex.js';
+/** Explicit, nonmodal paste UI. It never reads the OS clipboard without a user paste. */
+export declare function mountLatexPanel(host: HTMLElement, options: {
+    locale: MathLocale;
+    onInsert(source: string): LatexParseResult;
+    onClose(): void;
+}): {
+    destroy(): void;
+};

package/dist/dom/latex-panel.js

@@ -0,0 +1,59 @@
+import { elementFactory } from './elements.js';
+import { translate } from '../i18n.js';
+/** Explicit, nonmodal paste UI. It never reads the OS clipboard without a user paste. */
+export function mountLatexPanel(host, options) {
+    const el = elementFactory(host.ownerDocument);
+    const t = (key) => translate(options.locale, key);
+    const panel = el('section', 'me-utility-panel');
+    panel.setAttribute('aria-label', t('clipboard.latexTitle'));
+    const label = el('label', '', t('clipboard.latexTitle'));
+    const source = el('textarea');
+    source.rows = 3;
+    source.placeholder = String.raw `\frac{a}{b} + x^2`;
+    source.spellcheck = false;
+    label.append(source);
+    const hint = el('p', '', t('clipboard.latexHint'));
+    const error = el('p', 'me-utility-error');
+    error.setAttribute('role', 'alert');
+    const actions = el('div', 'me-utility-actions');
+    const insert = el('button', '', t('clipboard.latexInsert'));
+    insert.type = 'button';
+    insert.onclick = () => {
+        const result = options.onInsert(source.value);
+        if (result.ok)
+            options.onClose();
+        else {
+            const diagnostic = result.diagnostics[0];
+            error.textContent = `${t('clipboard.latexError')} (${diagnostic.start + 1}): ${diagnostic.message}`;
+            source.focus();
+            source.setSelectionRange(diagnostic.start, diagnostic.end);
+        }
+    };
+    const close = el('button', '', t('common.close'));
+    close.type = 'button';
+    close.onclick = options.onClose;
+    actions.append(insert, close);
+    panel.append(label, hint, error, actions);
+    host.append(panel);
+    panel.addEventListener('keydown', (event) => {
+        event.stopPropagation();
+        if (event.isComposing)
+            return;
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            options.onClose();
+        }
+        else if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
+            event.preventDefault();
+            insert.click();
+        }
+    });
+    for (const type of ['copy', 'cut', 'paste', 'input', 'beforeinput', 'keyup'])
+        panel.addEventListener(type, (event) => event.stopPropagation());
+    source.focus();
+    return {
+        destroy() {
+            panel.remove();
+        },
+    };
+}

package/dist/dom/matrix-selection.d.ts

@@ -0,0 +1,11 @@
+import type { MathMatrixRange } from '../matrix-range.js';
+type CellRect = {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+};
+/** Grid tracks, rather than nearest glyphs, keep tall fractions from stealing adjacent cells. */
+export declare function matrixCellAtPoint(columns: number, cells: CellRect[], x: number, y: number): number;
+export declare function matrixPointerRange(surface: HTMLElement, range: MathMatrixRange, columns: number, x: number, y: number): MathMatrixRange;
+export {};

package/dist/dom/matrix-selection.js

@@ -0,0 +1,30 @@
+/** Grid tracks, rather than nearest glyphs, keep tall fractions from stealing adjacent cells. */
+export function matrixCellAtPoint(columns, cells, x, y) {
+    const nearest = (axis) => {
+        const count = axis === 'row' ? cells.length / columns : columns;
+        let chosen = 0, distance = Infinity;
+        for (let track = 0; track < count; track++) {
+            const group = cells.filter((_, i) => (axis === 'row' ? Math.floor(i / columns) : i % columns) === track);
+            const start = Math.min(...group.map((cell) => (axis === 'row' ? cell.top : cell.left)));
+            const end = Math.max(...group.map((cell) => (axis === 'row' ? cell.bottom : cell.right)));
+            const point = axis === 'row' ? y : x;
+            const next = Math.max(start - point, 0, point - end);
+            if (next < distance) {
+                chosen = track;
+                distance = next;
+            }
+        }
+        return chosen;
+    };
+    return nearest('row') * columns + nearest('column');
+}
+export function matrixPointerRange(surface, range, columns, x, y) {
+    const grid = [...surface.querySelectorAll('.me-matrix')].find((node) => node.dataset.matrixId === range.matrixId);
+    const cells = grid?.querySelectorAll(':scope > .me-matrix-grid > .me-matrix-cell');
+    if (!cells?.length)
+        return range;
+    return {
+        ...range,
+        focus: matrixCellAtPoint(columns, [...cells].map((cell) => cell.getBoundingClientRect()), x, y),
+    };
+}