@barocss/math-editor 0.5.0 → 0.6.1

package/dist/vertical-navigation.d.ts

@@ -12,4 +12,9 @@ export type MathCaretGeometry = (point: VerticalPoint) => {
  * Native text selections and literal text retain their own arrow-key behavior.
  */
 export declare function moveVertical(state: MathState, direction: -1 | 1, geometry?: MathCaretGeometry): MathState;
+/** View-local preferred column. It is not formula data and must reset after horizontal input. */
+export declare function createVerticalNavigation(): {
+    reset(): void;
+    move(state: MathState, direction: -1 | 1, geometry?: MathCaretGeometry): MathState;
+};
 export {};

package/dist/vertical-navigation.js

@@ -143,3 +143,36 @@ export function moveVertical(state, direction, geometry) {
     const target = lines[line + direction];
     return target ? focusRows(state, [target], direction, geometry) : state;
 }
+/** View-local preferred column. It is not formula data and must reset after horizontal input. */
+export function createVerticalNavigation() {
+    let preferredX;
+    let last;
+    return {
+        reset() {
+            preferredX = undefined;
+            last = undefined;
+        },
+        move(state, direction, geometry) {
+            const caret = state.caret;
+            if (!last || last.id !== caret.id || last.start !== caret.start || last.end !== caret.end)
+                preferredX = undefined;
+            const origin = geometry?.({ id: caret.id, offset: caret.start, affinity: caret.affinity });
+            if (preferredX === undefined && origin && Number.isFinite(origin.x))
+                preferredX = origin.x;
+            // Keep the current row's Y, but measure target positions against the original X.
+            const projected = geometry &&
+                ((point) => {
+                    const position = geometry(point);
+                    return position &&
+                        point.id === caret.id &&
+                        point.offset === caret.start &&
+                        preferredX !== undefined
+                        ? { ...position, x: preferredX }
+                        : position;
+                });
+            const next = moveVertical(state, direction, projected);
+            last = { ...next.caret };
+            return next;
+        },
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barocss/math-editor",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/style.css

@@ -20,6 +20,8 @@
   font-style: normal;
   font-display: swap;
 }
+/* Editing glyphs have a readable floor. Set --me-min-font-size: 0px for
+   unmodified TeX size ratios. This does not change serialized math. */
 .me-editor {
   color: var(--me-text, #202c27);
   font-family: var(--me-ui-font-family, system-ui, sans-serif);
@@ -48,7 +50,10 @@
   font: 12px var(--me-ui-font-family, system-ui, sans-serif);
 }
 .me-tools button span {
-  font: 20px 'Barocss Math Glyphs', Georgia, serif;
+  font:
+    20px 'Barocss Math Glyphs',
+    Georgia,
+    serif;
 }
 .me-tools button:hover {
   background: var(--me-hover-background, #edf3ef);
@@ -86,7 +91,11 @@
 }
 .me-input,
 .me-measure {
-  font: italic var(--me-font-size, 22px) 'Barocss Math Glyphs', Georgia, 'Times New Roman', serif;
+  font:
+    italic max(var(--me-min-font-size, 14px), var(--me-font-size, 22px)) 'Barocss Math Glyphs',
+    Georgia,
+    'Times New Roman',
+    serif;
   line-height: 1.35;
   min-width: 1ch;
   border: 0;
@@ -125,7 +134,10 @@
   margin-top: 4px;
 }
 .me-radical {
-  font: 33px 'Barocss Math Glyphs', Georgia, serif;
+  font:
+    33px 'Barocss Math Glyphs',
+    Georgia,
+    serif;
 }
 .me-superscript > .me-slot:last-child {
   align-self: flex-start;
@@ -145,7 +157,7 @@
 .me-subscript > .me-slot:last-child .me-input,
 .me-superscript > .me-slot:last-child .me-measure,
 .me-subscript > .me-slot:last-child .me-measure {
-  font-size: calc(var(--me-font-size, 22px) * 0.7);
+  font-size: max(var(--me-min-font-size, 14px), calc(var(--me-font-size, 22px) * 0.7));
 }
 .me-suggestions {
   position: absolute;
@@ -276,7 +288,10 @@
   min-height: 54px;
 }
 .me-candidate-glyph {
-  font: 26px 'Barocss Math Glyphs', Georgia, serif;
+  font:
+    26px 'Barocss Math Glyphs',
+    Georgia,
+    serif;
   min-width: 42px;
   flex-shrink: 0;
   text-align: center;
@@ -302,16 +317,22 @@
 }
 .me-limit .me-input,
 .me-limit .me-measure {
-  font-size: calc(var(--me-font-size, 22px) * 0.7);
+  font-size: max(var(--me-min-font-size, 14px), calc(var(--me-font-size, 22px) * 0.7));
 }
 .me-operator-glyph {
-  font: calc(var(--me-font-size, 22px) * 1.59) / 1 'Barocss Math Glyphs', Georgia, serif;
+  font:
+    calc(var(--me-font-size, 22px) * 1.59) / 1 'Barocss Math Glyphs',
+    Georgia,
+    serif;
 }
 .me-large-operator {
   gap: 8px;
 }
 .me-delimiter {
-  font: 28px/1 'Barocss Math Glyphs', Georgia, serif;
+  font:
+    28px/1 'Barocss Math Glyphs',
+    Georgia,
+    serif;
 }
 
 /* Slot roles are presentation metadata, not a claim that text is a variable or constant. */
@@ -609,7 +630,11 @@
   align-items: center;
   justify-content: center;
   white-space: pre;
-  font: italic var(--me-font-size, 22px) / 1.35 'Barocss Math Glyphs', Georgia, 'Times New Roman',
+  font:
+    italic max(var(--me-min-font-size, 14px), var(--me-font-size, 22px)) / 1.35
+      'Barocss Math Glyphs',
+    Georgia,
+    'Times New Roman',
     serif;
   color: var(--me-ink);
   border-radius: 4px;
@@ -632,10 +657,10 @@
 }
 .me-superscript > .me-slot:last-child .me-preview-token,
 .me-subscript > .me-slot:last-child .me-preview-token {
-  font-size: calc(var(--me-font-size, 22px) * 0.7);
+  font-size: max(var(--me-min-font-size, 14px), calc(var(--me-font-size, 22px) * 0.7));
 }
 .me-limit .me-preview-token {
-  font-size: calc(var(--me-font-size, 22px) * 0.7);
+  font-size: max(var(--me-min-font-size, 14px), calc(var(--me-font-size, 22px) * 0.7));
 }
 .me-range-highlight,
 .me-empty[data-range-selected='true'] {
@@ -735,7 +760,11 @@
   border-color: var(--me-accent, #9cbbac);
 }
 .me-symbol-glyph {
-  font: 25px/1.2 'Barocss Math Glyphs', Georgia, 'Times New Roman', serif;
+  font:
+    25px/1.2 'Barocss Math Glyphs',
+    Georgia,
+    'Times New Roman',
+    serif;
 }
 .me-symbol-browser button:focus-visible,
 .me-symbol-search input:focus-visible {
@@ -783,11 +812,15 @@
 }
 .me-dom-editor[data-mode='inline'] {
   display: inline-block;
+  max-width: 100%;
+  box-sizing: border-box;
   vertical-align: middle;
   border: 0;
 }
 .me-dom-editor[data-mode='inline'] .me-surface {
   display: inline-block;
+  max-width: 100%;
+  box-sizing: border-box;
   padding: var(--me-inline-padding, 2px 4px);
   min-height: 0;
 }
@@ -820,7 +853,7 @@
   grid-row: 1;
 }
 .me-scripts > .me-slot:not(:first-child) :is(.me-input, .me-measure, .me-preview-token) {
-  font-size: calc(var(--me-font-size, 22px) * 0.7);
+  font-size: max(var(--me-min-font-size, 14px), calc(var(--me-font-size, 22px) * 0.7));
 }
 
 .me-textGroup,
@@ -866,7 +899,7 @@
   margin-top: 4px;
 }
 .me-indexedRoot > .me-slot:nth-last-child(2) :is(.me-input, .me-measure, .me-preview-token) {
-  font-size: calc(var(--me-font-size, 22px) * 0.5);
+  font-size: max(var(--me-min-font-size, 14px), calc(var(--me-font-size, 22px) * 0.5));
 }
 
 /* Accents follow the editable body's width, including nested structures. */
@@ -959,13 +992,16 @@
   gap: 4px;
 }
 .me-limit-glyph {
-  font: normal var(--me-font-size, 22px) / 1.1 'Barocss Math Glyphs', Georgia, serif;
+  font:
+    normal max(var(--me-min-font-size, 14px), var(--me-font-size, 22px)) / 1.1 'Barocss Math Glyphs',
+    Georgia,
+    serif;
 }
 .me-limit-operator > .me-limits {
   align-self: baseline;
 }
 .me-limit-operator .me-limit :is(.me-input, .me-measure, .me-preview-token) {
-  font-size: calc(var(--me-font-size, 22px) * 0.7);
+  font-size: max(var(--me-min-font-size, 14px), calc(var(--me-font-size, 22px) * 0.7));
   line-height: 1.1;
   padding-block: 1px;
 }
@@ -1011,18 +1047,34 @@
 .me-superscript > .me-slot:last-child :is(.me-quad, .me-qquad),
 .me-subscript > .me-slot:last-child :is(.me-quad, .me-qquad),
 .me-scripts > .me-slot:not(:first-child) :is(.me-quad, .me-qquad) {
-  font-size: calc(var(--me-font-size, 22px) * 16 / 22);
+  font-size: max(var(--me-min-font-size, 14px), calc(var(--me-font-size, 22px) * 16 / 22));
 }
 .me-limit :is(.me-quad, .me-qquad) {
-  font-size: calc(var(--me-font-size, 22px) * 0.7);
+  font-size: max(var(--me-min-font-size, 14px), calc(var(--me-font-size, 22px) * 0.7));
 }
 
 /* Structured delimiters export as \left/\right and stretch with their body. */
+/* Fence bodies must not add an inline line box below their nested flex row. */
+:is(
+    .me-parentheses,
+    .me-brackets,
+    .me-absolute,
+    .me-braces,
+    .me-angle,
+    .me-openClosed,
+    .me-closedOpen,
+    .me-fenced,
+    .me-norm
+  )
+  > .me-slot {
+  display: inline-flex;
+  align-items: center;
+}
 :is(.me-parentheses, .me-brackets, .me-absolute) > .me-delimiter {
   align-self: stretch;
   flex: 0 0 7px;
   box-sizing: border-box;
-  min-height: 26px;
+  min-height: calc(var(--me-font-size, 22px) * 1.2);
   font-size: 0;
 }
 :is(.me-parentheses, .me-brackets, .me-absolute) > .me-delimiter:first-child {
@@ -1040,7 +1092,10 @@
 .me-parentheses > .me-delimiter:last-child {
   transform: scaleX(-1);
 }
-.me-parentheses:has(> .me-slot .me-structure) > .me-delimiter {
+.me-parentheses:has(
+    > .me-slot :is(.me-fraction, .me-root, .me-indexedRoot, .me-matrix, .me-cases, .me-superscript)
+  )
+  > .me-delimiter {
   flex-basis: 14px;
 }
 .me-brackets > .me-delimiter {
@@ -1058,7 +1113,7 @@
 :is(.me-braces, .me-angle, .me-openClosed, .me-closedOpen, .me-fenced) > .me-delimiter {
   align-self: stretch;
   flex: 0 0 12px;
-  min-height: 26px;
+  min-height: calc(var(--me-font-size, 22px) * 1.2);
   box-sizing: border-box;
   font-size: 0;
 }
@@ -1117,7 +1172,7 @@
 :is(.me-overset, .me-underset)
   > .me-slot:first-child
   :is(.me-input, .me-preview-token, .me-measure) {
-  font-size: calc(var(--me-font-size, 22px) * 0.7);
+  font-size: max(var(--me-min-font-size, 14px), calc(var(--me-font-size, 22px) * 0.7));
 }
 /* Square and indexed roots share a radical joined to the radicand's overbar. */
 .me-root > .me-radical,
@@ -1171,7 +1226,7 @@
   > .me-operator-glyph {
   grid-column: 1;
   grid-row: 1 / 3;
-  font-size: calc(var(--me-font-size, 22px) * 2);
+  font-size: max(var(--me-min-font-size, 14px), calc(var(--me-font-size, 22px) * 2));
 }
 :is(
     [data-structure='integral'],
@@ -1231,12 +1286,12 @@
 /* Keep nested fractions readable while avoiding full-size recursive stacks.
    Apply the same size to the input, passive glyph and measuring twin. */
 .me-fraction .me-fraction :is(.me-input, .me-measure, .me-preview-token) {
-  font-size: calc(var(--me-font-size, 22px) * 0.7);
+  font-size: max(var(--me-min-font-size, 14px), calc(var(--me-font-size, 22px) * 0.7));
   line-height: 1;
   padding-block: 0;
 }
 .me-fraction .me-fraction .me-fraction :is(.me-input, .me-measure, .me-preview-token) {
-  font-size: calc(var(--me-font-size, 22px) * 0.5);
+  font-size: max(var(--me-min-font-size, 14px), calc(var(--me-font-size, 22px) * 0.5));
 }
 .me-fraction .me-fraction .me-row {
   min-height: 0;
@@ -1245,6 +1300,38 @@
   padding: 0 3px;
 }
 
+/* Resolve every fraction descendant from its own row style. Transparent
+   structures (norms, fences, roots) must not reset their body's term size.
+   The input, measuring twin and passive glyph share the same rule. */
+.me-editor .me-fraction .me-row[data-layout-style] {
+  min-height: 0;
+}
+.me-editor
+  .me-fraction
+  .me-row[data-layout-style]
+  > .me-run
+  :is(.me-input, .me-measure, .me-preview-token) {
+  padding-block: 0;
+  line-height: 1.25;
+  font-size: max(var(--me-min-font-size, 14px), var(--me-font-size, 22px));
+}
+.me-editor
+  .me-fraction
+  .me-row[data-layout-style='script']
+  > .me-run
+  :is(.me-input, .me-measure, .me-preview-token) {
+  line-height: 1.1;
+  font-size: max(var(--me-min-font-size, 14px), calc(var(--me-font-size, 22px) * 0.7));
+}
+.me-editor
+  .me-fraction
+  .me-row[data-layout-style='scriptscript']
+  > .me-run
+  :is(.me-input, .me-measure, .me-preview-token) {
+  line-height: 1.1;
+  font-size: max(var(--me-min-font-size, 14px), calc(var(--me-font-size, 22px) * 0.5));
+}
+
 .me-vec,
 .me-hat,
 .me-overline {
@@ -1274,7 +1361,7 @@
 .me-fenced > .me-delimiter[data-fence='‖'] {
   align-self: stretch;
   flex: 0 0 9px;
-  min-height: 26px;
+  min-height: calc(var(--me-font-size, 22px) * 1.2);
   box-sizing: border-box;
   font-size: 0;
   border-left: 4px double currentColor;
@@ -1291,7 +1378,9 @@
   unicode-range: U+222E;
 }
 [data-structure='contourIntegral'][data-limit-placement] > .me-limits > .me-operator-glyph {
-  font: normal var(--me-font-size, 22px) / 2.3 'Barocss Contour', serif;
+  font:
+    normal max(var(--me-min-font-size, 14px), var(--me-font-size, 22px)) / 2.3 'Barocss Contour',
+    serif;
   width: calc(var(--me-font-size, 22px) * 25 / 22);
   height: calc(var(--me-font-size, 22px) * 2.3);
   transform: none;
@@ -1317,7 +1406,7 @@
 :is(.me-overbrace, .me-underbrace)
   > .me-slot:first-child
   :is(.me-input, .me-measure, .me-preview-token) {
-  font-size: calc(var(--me-font-size, 22px) * 0.7);
+  font-size: max(var(--me-min-font-size, 14px), calc(var(--me-font-size, 22px) * 0.7));
   line-height: 1.1;
 }
 :is(.me-overbrace, .me-underbrace) > .me-slot:last-child {
@@ -1500,7 +1589,7 @@
   )[data-limit-placement='nolimits']
   > .me-limits
   > .me-operator-glyph {
-  font-size: calc(var(--me-font-size, 22px) * 2);
+  font-size: max(var(--me-min-font-size, 14px), calc(var(--me-font-size, 22px) * 2));
 }
 
 /* TeX math units: 18mu = 1em. Negative spacing has no painted hit box. */
@@ -1541,7 +1630,7 @@
   --me-explicit-size: calc(var(--me-font-size, 22px) * 0.7);
 }
 .me-structure[data-math-style] > .me-slot :is(.me-input, .me-measure, .me-preview-token) {
-  font-size: var(--me-explicit-size);
+  font-size: max(var(--me-min-font-size, 14px), var(--me-explicit-size));
 }
 .me-structure[data-math-style='text'] > .me-slot > .me-row {
   min-height: 0;
@@ -1553,7 +1642,7 @@
   :is(.me-superscript, .me-subscript, .me-scripts)
   > .me-slot:not(:first-child)
   :is(.me-input, .me-measure, .me-preview-token) {
-  font-size: calc(var(--me-explicit-size) * 0.7273);
+  font-size: max(var(--me-min-font-size, 14px), calc(var(--me-explicit-size) * 0.7273));
 }
 
 /* Alphabet fonts are scoped to editable runs, never delimiter/operator glyphs.
@@ -1662,7 +1751,9 @@
 .me-utility-panel {
   padding: 12px;
   border-top: 1px solid var(--me-line, #dcdfe2);
-  font: 13px/1.5 system-ui, sans-serif;
+  font:
+    13px/1.5 system-ui,
+    sans-serif;
   color: var(--me-text, #253b33);
 }
 .me-utility-panel label {
@@ -1740,7 +1831,7 @@
   > .me-slot:not(:first-child)
   .me-fraction:not([data-math-style='display'])
   :is(.me-input, .me-measure, .me-preview-token) {
-  font-size: calc(var(--me-font-size, 22px) * 0.5);
+  font-size: max(var(--me-min-font-size, 14px), calc(var(--me-font-size, 22px) * 0.5));
   line-height: 1.1;
   padding-block: 0;
 }
@@ -1875,7 +1966,7 @@
   )
   > .me-limits
   > .me-operator-glyph {
-  font-size: calc(var(--me-font-size, 22px) * 2);
+  font-size: max(var(--me-min-font-size, 14px), calc(var(--me-font-size, 22px) * 2));
 }
 :is(
     [data-structure='integral'],
@@ -1941,10 +2032,14 @@
   line-height: 1.2;
   padding-block: 0;
 }
-.me-matrix[data-structure='matrix']
+.me-editor
+  .me-matrix[data-structure='matrix']
   .me-fraction:not([data-math-style='display'])
+  > .me-slot
+  > .me-row
+  > .me-run
   :is(.me-input, .me-measure, .me-preview-token) {
-  font-size: calc(var(--me-font-size, 22px) * 0.7);
+  font-size: max(var(--me-min-font-size, 14px), calc(var(--me-font-size, 22px) * 0.7));
   line-height: 0.85;
   padding-block: 0;
 }
@@ -1972,7 +2067,10 @@
 /* Use the display operator glyphs themselves, including their italic correction,
    rather than enlarging/skewing a text-font integral or sum. */
 .me-large-operator[data-structure][data-limit-placement] > .me-limits > .me-operator-glyph {
-  font: normal var(--me-font-size, 22px) / 1.6 'Barocss Large Operators', serif;
+  font:
+    normal max(var(--me-min-font-size, 14px), var(--me-font-size, 22px)) / 1.6
+      'Barocss Large Operators',
+    serif;
   transform: none;
   width: auto;
   height: calc(var(--me-font-size, 22px) * 1.6);
@@ -1993,8 +2091,13 @@
 :is(.me-openClosed, .me-closedOpen, .me-fenced) > :is([data-fence='('], [data-fence=')']) {
   flex-basis: calc(var(--me-font-size, 22px) * 0.389);
 }
-.me-parentheses:has(> .me-slot .me-structure) > .me-delimiter,
-:is(.me-openClosed, .me-closedOpen, .me-fenced):has(> .me-slot .me-structure)
+.me-parentheses:has(
+    > .me-slot :is(.me-fraction, .me-root, .me-indexedRoot, .me-matrix, .me-cases, .me-superscript)
+  )
+  > .me-delimiter,
+:is(.me-openClosed, .me-closedOpen, .me-fenced):has(
+    > .me-slot :is(.me-fraction, .me-root, .me-indexedRoot, .me-matrix, .me-cases, .me-superscript)
+  )
   > :is([data-fence='('], [data-fence=')']) {
   flex-basis: calc(var(--me-font-size, 22px) * 0.55);
 }
@@ -2096,9 +2199,20 @@
 }
 /* A radical encloses math ink rather than the taller UI text line box.
    Tall nested structures continue to determine their own row height. */
+:is(.me-root, .me-indexedRoot) > .me-slot:last-child {
+  display: inline-flex;
+  align-items: center;
+}
 :is(.me-root, .me-indexedRoot) > .me-slot:last-child > .me-row {
   min-height: 0;
 }
+:is(.me-root, .me-indexedRoot)
+  > .me-slot:last-child
+  > .me-row
+  > .me-empty-boundary:not(:focus-within)
+  > .me-measure {
+  min-height: 0;
+}
 :is(.me-root, .me-indexedRoot)
   > .me-slot:last-child
   > .me-row
@@ -2122,7 +2236,7 @@
   :is(.me-superscript, .me-subscript, .me-scripts)
   > .me-slot:not(:first-child)
   :is(.me-input, .me-measure, .me-preview-token) {
-  font-size: calc(var(--me-font-size, 22px) * 0.5);
+  font-size: max(var(--me-min-font-size, 14px), calc(var(--me-font-size, 22px) * 0.5));
   line-height: 1.1;
   padding-block: 0;
 }
@@ -2133,13 +2247,6 @@
   > .me-row {
   min-height: 0;
 }
-:is(.me-superscript, .me-subscript, .me-scripts)
-  > .me-slot:not(:first-child)
-  :is(.me-root, .me-indexedRoot)
-  > .me-radical {
-  width: calc(var(--me-font-size, 22px) * 0.595);
-  min-height: calc(var(--me-font-size, 22px) * 0.7);
-}
 .me-superscript > .me-slot:last-child:has(> .me-row > :is(.me-root, .me-indexedRoot)) {
   transform: translateY(-15%);
 }
@@ -2158,12 +2265,18 @@
 :is(.me-openClosed, .me-closedOpen, .me-fenced) > :is([data-fence='('], [data-fence=')']) {
   mask: url('./shapes/parenthesis.svg') center / 61.44% var(--me-font-size, 22px) no-repeat;
 }
-.me-parentheses:has(> .me-slot .me-structure) > .me-delimiter,
-:is(.me-openClosed, .me-closedOpen, .me-fenced):has(> .me-slot .me-structure)
+.me-parentheses:has(
+    > .me-slot :is(.me-fraction, .me-root, .me-indexedRoot, .me-matrix, .me-cases, .me-superscript)
+  )
+  > .me-delimiter,
+:is(.me-openClosed, .me-closedOpen, .me-fenced):has(
+    > .me-slot :is(.me-fraction, .me-root, .me-indexedRoot, .me-matrix, .me-cases, .me-superscript)
+  )
   > :is([data-fence='('], [data-fence=')']),
 .me-matrix[data-environment='pmatrix'] > .me-matrix-delimiter {
   --me-fence-cap: min(50%, calc(var(--me-font-size, 22px) * 1.809));
-  mask: url('./shapes/parenthesis-top.svg') left top / 100% var(--me-fence-cap) no-repeat,
+  mask:
+    url('./shapes/parenthesis-top.svg') left top / 100% var(--me-fence-cap) no-repeat,
     url('./shapes/parenthesis-bottom.svg') left bottom / 100% var(--me-fence-cap) no-repeat,
     linear-gradient(currentColor, currentColor) left center / 22.826%
       calc(100% - var(--me-fence-cap) - var(--me-fence-cap) + 1px) no-repeat;
@@ -2176,11 +2289,31 @@
   mask: url('./shapes/radical.svg') center / 100% 100% no-repeat;
 }
 
+/* Radical geometry follows the containing math style, including the editing
+   minimum. The radicand's flex slot supplies extra height for tall contents. */
+.me-row {
+  --me-radical-size: max(var(--me-min-font-size, 14px), var(--me-font-size, 22px));
+}
+.me-row[data-layout-style='script'] {
+  --me-radical-size: max(var(--me-min-font-size, 14px), calc(var(--me-font-size, 22px) * 0.7));
+}
+.me-row[data-layout-style='scriptscript'] {
+  --me-radical-size: max(var(--me-min-font-size, 14px), calc(var(--me-font-size, 22px) * 0.5));
+}
+.me-editor .me-row > :is(.me-root, .me-indexedRoot) > .me-radical {
+  width: calc(var(--me-radical-size) * 0.85);
+  min-height: var(--me-radical-size);
+  margin-top: calc(var(--me-radical-size) * 0.1);
+}
+.me-editor :is(.me-root, .me-indexedRoot) > .me-slot:last-child {
+  margin-top: calc(var(--me-radical-size) * 0.1);
+}
+
 /* A nested radical needs clearance above its own rule. Without this space,
    successive rules collapse together even when the operand metrics agree. */
 :is(.me-root, .me-indexedRoot)
   > .me-slot:last-child:has(> .me-row > :is(.me-root, .me-indexedRoot)) {
-  padding-top: calc(var(--me-font-size, 22px) * 0.25);
+  padding-top: calc(var(--me-radical-size) * 0.25);
 }
 
 /* Resolve reduced operator styles from model slots. Display operators retain
@@ -2202,7 +2335,9 @@
   .me-large-operator[data-operator-style]:not([data-operator-style='display'])
   > .me-limits
   > .me-operator-glyph {
-  font: normal var(--me-operator-size) / 1.1 'Barocss Small Operators', serif;
+  font:
+    normal var(--me-operator-size) / 1.1 'Barocss Small Operators',
+    serif;
   height: calc(var(--me-operator-size) * 1.1);
   transform: none;
 }
@@ -2318,7 +2453,7 @@
   .me-row[data-layout-style]
   > .me-run
   :is(.me-input, .me-measure, .me-preview-token) {
-  font-size: var(--me-font-size, 22px);
+  font-size: max(var(--me-min-font-size, 14px), var(--me-font-size, 22px));
   line-height: 1.1;
   padding-block: 0;
 }
@@ -2327,14 +2462,14 @@
   .me-row[data-layout-style='script']
   > .me-run
   :is(.me-input, .me-measure, .me-preview-token) {
-  font-size: calc(var(--me-font-size, 22px) * 0.7);
+  font-size: max(var(--me-min-font-size, 14px), calc(var(--me-font-size, 22px) * 0.7));
 }
 .me-editor
   [data-operator-style]:not([data-operator-style='display'])
   .me-row[data-layout-style='scriptscript']
   > .me-run
   :is(.me-input, .me-measure, .me-preview-token) {
-  font-size: calc(var(--me-font-size, 22px) * 0.5);
+  font-size: max(var(--me-min-font-size, 14px), calc(var(--me-font-size, 22px) * 0.5));
 }
 
 /* Glyph width and mathematical spacing are separate from the caret hit area.
@@ -2368,13 +2503,48 @@
   padding-inline: 0;
 }
 .me-row[data-layout-style='script'] {
-  --me-tight-unit: calc(var(--me-font-size, 22px) * 0.7 / 18);
+  --me-tight-unit: calc(max(var(--me-min-font-size, 14px), var(--me-font-size, 22px) * 0.7) / 18);
 }
 .me-row[data-layout-style='scriptscript'] {
-  --me-tight-unit: calc(var(--me-font-size, 22px) * 0.5 / 18);
+  --me-tight-unit: calc(max(var(--me-min-font-size, 14px), var(--me-font-size, 22px) * 0.5) / 18);
 }
 .me-row:is([data-layout-style='script'], [data-layout-style='scriptscript'])
   > [data-math-spacing='true'] {
   margin-left: calc(var(--me-tight-before, 0) * var(--me-tight-unit));
   margin-right: calc(var(--me-tight-after, 0) * var(--me-tight-unit));
 }
+
+/* Help uses the top layer to avoid clipping inside narrow or embedded fields. */
+.me-help {
+  width: min(560px, calc(100vw - 40px));
+  max-height: calc(100vh - 48px);
+  box-sizing: border-box;
+  overflow: auto;
+  padding: 24px;
+  border: 1px solid var(--me-line, #dcdfe2);
+  border-radius: 12px;
+  background: var(--me-control-bg, #fff);
+  color: var(--me-text, #253b33);
+  text-align: start;
+}
+.me-help::backdrop {
+  background: rgb(0 0 0 / 25%);
+}
+.me-help h2 {
+  margin: 0 0 8px;
+  font:
+    600 20px/1.4 system-ui,
+    sans-serif;
+}
+.me-help dl {
+  display: grid;
+  gap: 8px 16px;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+}
+.me-help dt {
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+.me-help dd {
+  margin: 0;
+}