ckeditor-math-chem-editor 1.0.3 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/Ckeditor.jsx +1855 -623
  3. package/src/CustomMathEditor.css +554 -68
package/src/Ckeditor.jsx CHANGED
@@ -250,14 +250,15 @@ const MATH_GROUPS = [
250
250
  {
251
251
  label: '□/□', isTemplate: true, items: [
252
252
  { label: 'a/b', insert: '\\frac{#0}{#?}', title: 'Fraction', icon: 'fraction-template-image' },
253
- { label: '□/□', insert: '{#0}/{#?}', title: 'Bevelled Fraction', cls: 'green-template' },
253
+ { label: '□/□', insert: '{#0}/{#?}', title: 'Bevelled Fraction', cls: 'green-template black-glyph-template' },
254
254
  { label: 'a/b', insert: '{\\scriptstyle \\frac{#0}{#?}}', title: 'Small Fraction', icon: 'fraction-template-image', cls: 'small-template' },
255
- { label: '□/□', insert: '{\\scriptstyle {#0}/{#?}}', title: 'Small Bevelled Fraction', cls: 'green-template small-template' },
255
+ { label: '□/□', insert: '{\\scriptstyle {#0}/{#?}}', title: 'Small Bevelled Fraction', cls: 'green-template small-template black-placeholder-glyph' },
256
256
  { type: 'sep', cols: 4 },
257
257
  { label: '√x', insert: '\\sqrt{#0}', title: 'Square Root', icon: 'sqrt-template-image' },
258
258
  { label: 'ⁿ√x', insert: '\\sqrt[#?]{#0}', title: 'Nth Root', icon: 'nth-root-template-image' },
259
+ {type: 'sep', cols: 2 },
259
260
  { label: 'xⁿ', insert: '#0^{#?}', title: 'Superscript', icon: 'superscript-template-image' },
260
- { label: 'ˡ□', insert: '{}^{#?}#?', cls: 'template', directInsert: true, title: 'Left Superscript', icon: 'left-sup-template-image' },
261
+ { label: 'ˡ□', insert: '{}^{#?}#?', cls: 'template', directInsert: true, title: 'Left Superscript', icon: 'left-sup-template-image' },
261
262
 
262
263
  { label: '□^□_□', insert: '#?^{#?}_{#?}', cls: 'template', directInsert: true, title: 'Right Superscript and Subscript', icon: 'right-sup-sub-template-image' },
263
264
  { label: 'ˡₗ□', insert: '{}^{#?}_{#?}#?', cls: 'template', directInsert: true, title: 'Left Superscript and Subscript', icon: 'left-sup-sub-template-image' },
@@ -277,8 +278,8 @@ const MATH_GROUPS = [
277
278
  { label: '▯_□', insert: '\\displaystyle{\\htmlStyle{font-size:1.45em;line-height:1.1}{#0}_{\\htmlStyle{font-size:1.1em;display:inline-block;padding-top:0.26em;line-height:1.15}{#?}}}', cls: 'template', directInsert: true, title: 'Operator With Right Subscript', icon: 'operator-right-sub-template-image' },
278
279
  { type: 'sep', cols: 3 },
279
280
  { label: 'hphantom', insert: '\\hphantom{0}', cls: 'template', directInsert: true, title: 'Horizontal Phantom Space', icon: 'hphantom-space-template-image' },
281
+ { label: 'negative-space', insert: '\\!', cls: 'template', directInsert: true, title: 'Negative Thin Space', icon: 'negative-thin-space-template-image' },
280
282
  { label: 'thin-space', insert: '\\,', cls: 'template', directInsert: true, title: 'Thin Space', icon: 'thin-space-template-image' },
281
- { label: 'negative-space', insert: '\\!', cls: 'template', directInsert: true, title: 'Negative Thin Space', icon: 'negative-thin-space-template-image' },
282
283
  ]
283
284
  },
284
285
  {
@@ -443,41 +444,37 @@ const MATH_GROUPS = [
443
444
  ),
444
445
  isMatrix: true,
445
446
  items: [
446
- { label: '□', insert: 'matrix', cls: 'template' },
447
- { label: '[]', insert: 'bmatrix', cls: 'template' },
448
- { label: '||', insert: 'vmatrix', cls: 'template' },
449
- { label: '()', insert: 'pmatrix', cls: 'template' },
447
+ { label: '□', insert: 'matrix', cls: 'template matrix-roomy-template matrix-tall-template', icon: 'matrix-grid-template-image' },
448
+ { label: '[]', insert: 'bmatrix', cls: 'template matrix-roomy-template matrix-tall-template', icon: 'matrix-brackets-template-image' },
449
+ { label: '||', insert: 'vmatrix', cls: 'template matrix-roomy-template matrix-tall-template', icon: 'matrix-bars-template-image' },
450
+ { label: '()', insert: 'pmatrix', cls: 'template matrix-roomy-template matrix-tall-template', icon: 'matrix-parens-template-image' },
450
451
  { type: 'sep', cols: 2 },
451
- { label: '□ \\ □ \\ □', insert: '\\begin{matrix} #? \\\\ #? \\\\ #? \\end{matrix}', cls: 'template', directInsert: true },
452
- { label: '□ □ □', insert: '\\begin{matrix} #? & #? & #? \\end{matrix}', cls: 'template', directInsert: true },
453
- { label: '□ \\ □', insert: '\\begin{bmatrix} #? \\\\ #? \\end{bmatrix}', cls: 'template', directInsert: true },
454
- { label: '□ & □', insert: '\\begin{bmatrix} #? & #? \\end{bmatrix}', cls: 'template', directInsert: true },
452
+ { label: '□ \\ □ \\ □', insert: '\\begin{matrix} #? \\\\ #? \\\\ #? \\end{matrix}', cls: 'template matrix-roomy-template matrix-tall-template', directInsert: true },
453
+ { label: '□ □ □', insert: '\\begin{matrix} #? & #? & #? \\end{matrix}', cls: 'template matrix-roomy-template matrix-tall-template', directInsert: true },
454
+ { label: '□ \\ □', insert: '\\begin{bmatrix} #? \\\\ #? \\end{bmatrix}', cls: 'template matrix-roomy-template matrix-tall-template', directInsert: true },
455
+ { label: '□ & □', insert: '\\begin{bmatrix} #? & #? \\end{bmatrix}', cls: 'template matrix-roomy-template matrix-tall-template', directInsert: true },
455
456
 
456
457
  { type: 'sep', cols: 2 },
457
- { label: '□ \\ □', insert: '\\begin{pmatrix} #? \\\\ #? \\end{pmatrix}', cls: 'template', directInsert: true },
458
- { label: '□ & □', insert: '\\begin{pmatrix} #? & #? \\end{pmatrix}', cls: 'template', directInsert: true },
458
+ { label: '□ \\ □', insert: '\\begin{pmatrix} #? \\\\ #? \\end{pmatrix}', cls: 'template matrix-roomy-template matrix-extra-tall-template', directInsert: true },
459
+ { label: '□ & □', insert: '\\begin{pmatrix} #? & #? \\end{pmatrix}', cls: 'template matrix-roomy-template matrix-extra-tall-template', directInsert: true },
459
460
  // { label: '□ \\ □ \\ □', insert: '\\begin{bmatrix} #? \\\\ #? \\\\ #? \\end{bmatrix}', cls: 'template', directInsert: true },
460
461
  // { label: '□ \\ □ \\ □', insert: '\\begin{pmatrix} #? \\\\ #? \\\\ #? \\end{pmatrix}', cls: 'template', directInsert: true },
461
462
 
462
463
 
463
464
  { type: 'sep', cols: 2 },
464
- { label: 'cases', insert: '\\begin{cases} #? \\\\ #? \\end{cases}', cls: 'template', directInsert: true, icon: 'cases-template-image', title: 'Cases' },
465
- { label: 'rcases', insert: '\\begin{rcases} #? \\\\ #? \\end{rcases}', cls: 'template', directInsert: true, icon: 'rcases-template-image', title: 'Right Cases' },
466
- { label: 'cases-2x2', insert: '\\begin{cases} #? & #? \\\\ #? & #? \\end{cases}', cls: 'template', directInsert: true, icon: 'cases-two-by-two-template-image', title: 'Cases 2x2' },
467
- { label: 'aligned', insert: '\\begin{aligned} #? &= #? \\\\ #? &= #? \\end{aligned}', cls: 'template', directInsert: true, icon: 'aligned-equals-template-image', title: 'Aligned Equations' },
465
+ { label: 'cases', insert: '\\begin{cases} #? \\\\ #? \\end{cases}', cls: 'template matrix-roomy-template matrix-tall-template', directInsert: true, icon: 'cases-template-image', title: 'Cases' },
466
+ { label: 'rcases', insert: '\\begin{rcases} #? \\\\ #? \\end{rcases}', cls: 'template matrix-roomy-template matrix-tall-template', directInsert: true, icon: 'rcases-template-image', title: 'Right Cases' },
467
+ { label: 'cases-2x2', insert: '\\begin{cases} #? & #? \\\\ #? & #? \\end{cases}', cls: 'template matrix-roomy-template matrix-tall-template', directInsert: true, icon: 'cases-two-by-two-template-image', title: 'Cases 2x2' },
468
+ { label: 'aligned', insert: '\\begin{aligned} #? &= #? \\\\ #? &= #? \\end{aligned}', cls: 'template matrix-roomy-template matrix-tall-template', directInsert: true, icon: 'aligned-equals-template-image', title: 'Aligned Equations' },
468
469
  { type: 'sep', cols: 2 },
469
- { label: '⋮', insert: '\\vdots', title: 'Vertical ellipsis', icon: 'vertical-ellipsis-template-image', directInsert: true },
470
- { label: '⋯', insert: '\\cdots', title: 'Midline ellipsis', icon: 'midline-ellipsis-template-image', directInsert: true },
471
- { label: '⋰', insert: '⋰', title: 'Up-right diagonal ellipsis', icon: 'upright-ellipsis-template-image', directInsert: true },
472
- { label: '⋱', insert: '\\ddots', title: 'Down-right diagonal ellipsis', icon: 'downright-ellipsis-template-image', directInsert: true },
470
+ { label: '⋮', insert: '\\vdots', title: 'Vertical ellipsis', icon: 'vertical-ellipsis-template-image', cls: 'matrix-roomy-template matrix-tall-template', directInsert: true },
471
+ { label: '⋯', insert: '\\cdots', title: 'Midline ellipsis', icon: 'midline-ellipsis-template-image', cls: 'matrix-roomy-template matrix-tall-template', directInsert: true },
472
+ { label: '⋰', insert: '⋰', title: 'Up-right diagonal ellipsis', icon: 'upright-ellipsis-template-image', cls: 'matrix-roomy-template matrix-tall-template', directInsert: true },
473
+ { label: '⋱', insert: '\\ddots', title: 'Down-right diagonal ellipsis', icon: 'downright-ellipsis-template-image', cls: 'matrix-roomy-template matrix-tall-template', directInsert: true },
473
474
  { type: 'sep', cols: 2 },
474
- {label: 'sum-array',insert: '\\frac{\\begin{array}{r}#?\\\\+\\,#?\\end{array}}{\\quad#?}',cls: 'template',directInsert: true,icon: 'sum-array-template-image',title: 'Column Addition'}, { label: 'diff-array', insert: '\\frac{\\begin{array}{r}#?\\\\-\\,#?\\end{array}}{\\quad#?}', directInsert: true, icon: 'difference-array-template-image', title: 'Column Subtraction' },
475
- { label: 'stack-line', insert: '\\frac{\\begin{array}{c}#?\\\\#?\\end{array}}{#?}', cls: 'template', directInsert: true, icon: 'stack-line-template-image', title: 'Stacked Line Layout' },
476
- { label: 'division', insert: '\\overset{#?}{\\overline{#?\\big)#?}}', cls: 'template', directInsert: true, icon: 'division-layout-template-image', title: 'Division Layout' },
477
- { label: 'product-array', insert: '\\frac{\\begin{array}{r}#?\\\\\\times\\,#?\\end{array}}{\\quad#?}', cls: 'template', directInsert: true, icon: 'product-array-template-image', title: 'Column Multiplication' },
478
- { label: 'mixed-fraction', insert: '\\left[\\begin{array}{c|c}#? & #?\\\\#? & #?\\end{array}\\right.', cls: 'template', directInsert: true, icon: 'mixed-fraction-template-image', title: 'Mixed Fraction' },
479
- { label: 'array-cc', insert: '\\left.\\begin{array}{c}#?\\\\#?\\end{array}\\right|\\begin{array}{c}#?\\\\#?\\end{array}', cls: 'template', directInsert: true, icon: 'array-cc-template-image', title: 'Split Column With Fraction' },
480
- { label: 'division-remainder', insert: '\\begin{array}{r} \\overset{#?}{\\overline{#?\\big)#?}} \\\\ #? \\end{array}', cls: 'template', directInsert: true, icon: 'division-remainder-template-image', title: 'Division With Remainder' },
475
+ {label: 'sum-array',insert: '\\frac{\\begin{array}{r}#?\\\\+\\,#?\\end{array}}{\\quad#?}',cls: 'template matrix-roomy-template matrix-tall-template',directInsert: true,icon: 'sum-array-template-image',title: 'Column Addition'},
476
+ { label: 'division', insert: '\\overset{#?}{\\overline{#?\\big)#?}}', cls: 'template matrix-roomy-template matrix-tall-template', directInsert: true, icon: 'division-layout-template-image', title: 'Division Layout' },
477
+ makeRelationMorePicker('arithmeticLayoutExtras', 'More Arithmetic Layouts'),
481
478
  ]
482
479
  },
483
480
  ];
@@ -542,95 +539,129 @@ const RELATION_MORE_PICKERS = {
542
539
  { label: '⊘', insert: '⨸', title: 'Circled Divide', icon: 'circled-divide-template-image' },
543
540
  { label: '•', insert: '^{\\bullet}', title: 'Raised Bullet', icon: 'raised-bullet-template-image' },
544
541
  ],
542
+ tripleIntegralExtras: [
543
+ { label: '∭', insert: '\\iiint', title: 'Triple Integral', icon: 'triple-integral-template-image' },
544
+ { label: '∰', insert: '\\oiiint', title: 'Triple Contour Integral', icon: 'triple-contour-integral-template-image' },
545
+ ],
546
+ trigFunctionExtras: [
547
+ { label: 'sin⁻¹(□)', insert: '\\sin^{-1}\\left(#0\\right)', cls: 'green-placeholder-glyph' },
548
+ { label: 'csc(□)', insert: '\\csc\\left(#0\\right)', cls: 'green-placeholder-glyph' },
549
+ { label: 'cos⁻¹(□)', insert: '\\cos^{-1}\\left(#0\\right)', cls: 'green-placeholder-glyph' },
550
+ { label: 'sec(□)', insert: '\\sec\\left(#0\\right)', cls: 'green-placeholder-glyph' },
551
+ { label: 'tan⁻¹(□)', insert: '\\tan^{-1}\\left(#0\\right)', cls: 'green-placeholder-glyph' },
552
+ { label: 'cot(□)', insert: '\\cot\\left(#0\\right)', cls: 'green-placeholder-glyph' },
553
+ ],
554
+ bracketDelimiterExtras: [
555
+ { label: '⌊□⌋', insert: '\\left\\lfloor #0 \\right\\rfloor', cls: 'green-placeholder-glyph' },
556
+ { label: '⌈□⌉', insert: '\\left\\lceil #0 \\right\\rceil', cls: 'green-placeholder-glyph' },
557
+ { label: '⟨□|□⟩', insert: '\\left\\langle #0 \\middle| #? \\right\\rangle', cls: 'green-placeholder-glyph' },
558
+ ],
559
+ enclosureFrameExtras: [
560
+ { label: '¯\n▯|', insert: '\\overline{\\left.#?\\right|}', cls: 'template', directInsert: true, title: 'Overline with Right Bar', icon: 'overline-right-bar-template-image' },
561
+ { label: '▢\n▯', insert: '\\enclose{roundedbox}{#?}', cls: 'template', directInsert: true, title: 'Rounded Boxed', icon: 'boxed-rounded-template-image' },
562
+ ],
563
+ strikeDecorationExtras: [
564
+ { label: '│\n▯', insert: '\\enclose{verticalstrike}{#?}', cls: 'template', directInsert: true, title: 'Vertical Strike', icon: 'vertical-strike-template-image' },
565
+ { label: ')\n¯', insert: '\\overline{\\left)#?\\right.}', cls: 'template', directInsert: true, title: 'Overline with Curved Left Boundary', icon: 'overline-left-curve-template-image' },
566
+ { label: '┼\n▯', insert: '\\enclose{verticalstrike horizontalstrike}{#?}', cls: 'template', directInsert: true, title: 'Vertical and Horizontal Strike', icon: 'crosshair-strike-template-image' },
567
+ ],
568
+ arithmeticLayoutExtras: [
569
+ { label: 'diff-array', insert: '\\frac{\\begin{array}{r}#?\\\\-\\,#?\\end{array}}{\\quad#?}', directInsert: true, icon: 'difference-array-template-image', title: 'Column Subtraction' },
570
+ { label: 'stack-line', insert: '\\frac{\\begin{array}{c}#?\\\\#?\\end{array}}{#?}', cls: 'template', directInsert: true, icon: 'stack-line-template-image', title: 'Stacked Line Layout' },
571
+ { label: 'product-array', insert: '\\frac{\\begin{array}{r}#?\\\\\\times\\,#?\\end{array}}{\\quad#?}', cls: 'template', directInsert: true, icon: 'product-array-template-image', title: 'Column Multiplication' },
572
+ { label: 'mixed-fraction', insert: '\\left[\\begin{array}{c|c}#? & #?\\\\#? & #?\\end{array}\\right.', cls: 'template', directInsert: true, icon: 'mixed-fraction-template-image', title: 'Mixed Fraction' },
573
+ { label: 'array-cc', insert: '\\left.\\begin{array}{c}#?\\\\#?\\end{array}\\right|\\begin{array}{c}#?\\\\#?\\end{array}', cls: 'template', directInsert: true, icon: 'array-cc-template-image', title: 'Split Column With Fraction' },
574
+ { label: 'division-remainder', insert: '\\begin{array}{r} \\overset{#?}{\\overline{#?\\big)#?}} \\\\ #? \\end{array}', cls: 'template', directInsert: true, icon: 'division-remainder-template-image', title: 'Division With Remainder' },
575
+ ],
545
576
  };
546
577
 
547
- const makeRelationMorePicker = (picker, title = 'More Symbols') => ({
548
- label: '|',
549
- action: 'RELATION_MORE_PICKER',
550
- picker,
551
- title,
552
- icon: 'vertical-line-picker-template-image',
553
- cls: 'arrow-picker-tool relation-more-picker-tool',
554
- });
578
+ function makeRelationMorePicker(picker, title = 'More Symbols') {
579
+ return {
580
+ label: '|',
581
+ action: 'RELATION_MORE_PICKER',
582
+ picker,
583
+ title,
584
+ icon: 'vertical-line-picker-template-image',
585
+ cls: 'arrow-picker-tool relation-more-picker-tool',
586
+ };
587
+ }
555
588
 
556
589
  const RELATIONS_TAB_ITEMS = [
557
590
  { label: 'cancel', insert: '\\cancel{#0}', title: 'Negate / Cross Out', icon: 'negate-template-image' },
558
591
  { type: 'sep', cols: 1 },
559
592
  { label: '+', insert: '+' },
560
- { label: '·', insert: '\\cdot' },
561
- { label: '−', insert: '-' },
562
- { label: '/', insert: '/' },
563
- { label: '×', insert: '\\times' },
564
- { label: '±', insert: '\\pm' },
565
- { label: '÷', insert: '\\div' },
593
+ { label: '\u2212', insert: '-' },
594
+ { label: '\u00B1', insert: '\\pm' },
595
+ { label: '\u00D7', insert: '\\times' },
596
+ { label: '\u00F7', insert: '\\div' },
566
597
  { label: '*', insert: '\\ast' },
567
- { label: '∘', insert: '∘' },
598
+ { label: '\u00B7', insert: '\\cdot' },
599
+ { label: '/', insert: '/' },
600
+ { label: '\u2218', insert: '\u2218' },
568
601
  makeRelationMorePicker('operatorExtras', 'More Operators'),
569
602
 
570
603
  { type: 'sep', cols: 5 },
571
- { label: 'π', insert: '\\pi' },
572
- { label: '∞', insert: '\\infty' },
573
- { label: '∂', insert: '\\partial' },
574
- { label: 'Δ', insert: '\\Delta' },
575
- { label: '°', insert: '\\degree' },
576
- { label: '′', insert: "'", cls: 'prime-symbol-tool' },
577
- { label: '∅', insert: '\\emptyset' },
578
- { label: '∇', insert: '\\nabla' },
579
- { label: '″', insert: "''", cls: 'prime-symbol-tool' },
604
+ { label: '\u03C0', insert: '\\pi' },
605
+ { label: '\u221E', insert: '\\infty' },
606
+ { label: '\u2205', insert: '\\emptyset' },
607
+ { label: '\u2202', insert: '\\partial' },
608
+ { label: '\u0394', insert: '\\Delta' },
609
+ { label: '\u2207', insert: '\\nabla' },
610
+ { label: '\u00B0', insert: '\\degree' },
611
+ { label: '\u2032', insert: "'", cls: 'prime-symbol-tool' },
612
+ { label: '\u2033', insert: "''", cls: 'prime-symbol-tool' },
580
613
  makeRelationMorePicker('primeExtras', 'More Prime Symbols'),
581
-
582
614
 
583
615
  { type: 'sep', cols: 3 },
584
- { label: '=', insert: '=' },
585
- { label: '≡', insert: '\\equiv' },
586
616
  { label: '~', insert: '\\sim' },
587
- { label: '≈', insert: '\\approx' },
588
- { label: '≃', insert: '\\simeq' },
589
- { label: '≅', insert: '\\cong' },
617
+ { label: '\u2243', insert: '\\simeq' },
618
+ { label: '\u2261', insert: '\\equiv' },
619
+ { label: '\u2248', insert: '\\approx' },
620
+ { label: '\u2245', insert: '\\cong' },
590
621
  makeRelationMorePicker('notEqualExtras', 'More Not Equal Relations'),
591
622
 
592
623
  { type: 'sep', cols: 3 },
593
624
  { label: '>', insert: '>' },
625
+ { label: '\u2265', insert: '\\geq' },
626
+ { label: '\u2A7E', insert: '\\geqslant', title: 'Greater Than or Slanted Equal To' },
594
627
  { label: '<', insert: '<' },
595
- { label: '≥', insert: '\\geq' },
596
- { label: '≤', insert: '\\leq' },
597
- { label: '⩾', insert: '\\geqslant', title: 'Greater Than or Slanted Equal To' },
598
- { label: '⩽', insert: '\\leqslant', title: 'Less Than or Slanted Equal To' },
628
+ { label: '\u2264', insert: '\\leq' },
629
+ { label: '\u2A7D', insert: '\\leqslant', title: 'Less Than or Slanted Equal To' },
599
630
  makeRelationMorePicker('comparisonExtras', 'More Comparison Symbols'),
600
631
 
601
632
  { type: 'sep', cols: 3 },
602
- { label: '∈', insert: '\\in' },
603
- { label: '∋', insert: '\\ni' },
604
- { label: '∪', insert: '\\cup' },
605
- { label: '∩', insert: '\\cap' },
606
- { label: '⊂', insert: '\\subset' },
607
- { label: '⊃', insert: '\\supset' },
633
+ { label: '\u2208', insert: '\\in' },
634
+ { label: '\u222A', insert: '\\cup' },
635
+ { label: '\u2282', insert: '\\subset' },
636
+ { label: '\u220B', insert: '\\ni' },
637
+ { label: '\u2229', insert: '\\cap' },
638
+ { label: '\u2283', insert: '\\supset' },
608
639
  makeRelationMorePicker('setExtras', 'More Set Symbols'),
609
640
 
610
641
  { type: 'sep', cols: 3 },
611
- { label: '∧', insert: '\\land' },
612
- { label: '∨', insert: '\\lor' },
613
- { label: '¬', insert: '\\neg' },
614
- { label: '∀', insert: '\\forall' },
615
- { label: '∃', insert: '\\exists' },
616
- { label: '∄', insert: '\\nexists' },
642
+ { label: '\u2227', insert: '\\land' },
643
+ { label: '\u00AC', insert: '\\neg' },
644
+ { label: '\u2203', insert: '\\exists' },
645
+ { label: '\u2228', insert: '\\lor' },
646
+ { label: '\u2200', insert: '\\forall' },
647
+ { label: '\u2204', insert: '\\nexists' },
617
648
  makeRelationMorePicker('logicExtras', 'More Logic Symbols'),
618
649
 
619
650
  { type: 'sep', cols: 2 },
620
- { label: '∠', insert: '\\angle' },
621
- { label: '∥', insert: '\\parallel' },
622
- { label: '⊥', insert: '\\perp' },
651
+ { label: '\u2220', insert: '\\angle' },
652
+ { label: '\u2225', insert: '\\parallel' },
653
+ { label: '\u22A5', insert: '\\perp' },
623
654
  makeRelationMorePicker('geometryExtras', 'More Geometry Symbols'),
624
655
 
625
656
  { type: 'sep', cols: 3 },
626
- { label: '□', insert: '\\square' },
627
- { label: '△', insert: '\\triangle' },
628
- { label: '○', insert: '\\bigcirc' },
657
+ { label: '\u25A1', insert: '\\square' },
658
+ { label: '\u25B3', insert: '\\triangle' },
659
+ { label: '\u25CB', insert: '\\bigcirc' },
629
660
  makeRelationMorePicker('shapeExtras', 'More Shape Symbols'),
630
661
  { type: 'sep', cols: 3 },
631
- { label: '⊕', insert: '\\oplus' },
632
- { label: '⊗', insert: '\\otimes' },
633
- { label: '⊙', insert: '\\odot' },
662
+ { label: '\u2295', insert: '\\oplus' },
663
+ { label: '\u2297', insert: '\\otimes' },
664
+ { label: '\u2299', insert: '\\odot' },
634
665
  makeRelationMorePicker('circledExtras', 'More Circled Operators'),
635
666
  ];
636
667
 
@@ -1173,41 +1204,68 @@ const FONT_SIZE_OPTIONS = [
1173
1204
  ];
1174
1205
 
1175
1206
  const MOVE_TEXT_TEMPLATE_MAP = {
1176
- up: {
1177
- selection: '\\htmlStyle{display:inline-block;position:relative;top:-0.65em;}{#@}',
1178
- },
1179
- right: {
1180
- selection: '\\htmlStyle{display:inline-block;position:relative;left:0.65em;}{#@}',
1181
- },
1182
- left: {
1183
- selection: '\\htmlStyle{display:inline-block;position:relative;left:-0.65em;}{#@}',
1184
- },
1185
- down: {
1186
- selection: '\\htmlStyle{display:inline-block;position:relative;top:0.65em;}{#@}',
1187
- },
1207
+ up: { x: 0, y: -1 },
1208
+ right: { x: 1, y: 0 },
1209
+ left: { x: -1, y: 0 },
1210
+ down: { x: 0, y: 1 },
1188
1211
  };
1189
1212
 
1213
+ function unwrapMoveTextLatex(latex = '') {
1214
+ let currentLatex = String(latex || '');
1215
+ let offsetX = 0;
1216
+ let offsetY = 0;
1217
+ const moveWrapperPattern = /^\\htmlStyle\{([^}]*)\}\{([\s\S]*)\}$/;
1218
+
1219
+ while (true) {
1220
+ const match = currentLatex.match(moveWrapperPattern);
1221
+ if (!match) break;
1222
+
1223
+ const styleText = match[1] || '';
1224
+ if (!styleText.includes('display:inline-block') || !styleText.includes('position:relative')) {
1225
+ break;
1226
+ }
1227
+
1228
+ const leftMatch = styleText.match(/left:\s*(-?\d+)px/i);
1229
+ const topMatch = styleText.match(/top:\s*(-?\d+)px/i);
1230
+ offsetX += leftMatch ? parseInt(leftMatch[1], 10) : 0;
1231
+ offsetY += topMatch ? parseInt(topMatch[1], 10) : 0;
1232
+ currentLatex = match[2] || '';
1233
+ }
1234
+
1235
+ return {
1236
+ baseLatex: currentLatex,
1237
+ offsetX,
1238
+ offsetY,
1239
+ };
1240
+ }
1241
+
1242
+ function wrapMoveTextLatex(baseLatex, offsetX, offsetY) {
1243
+ const styles = ['display:inline-block', 'position:relative'];
1244
+ if (offsetX !== 0) styles.push(`left:${offsetX}px`);
1245
+ if (offsetY !== 0) styles.push(`top:${offsetY}px`);
1246
+ return `\\htmlStyle{${styles.join(';')};}{${baseLatex}}`;
1247
+ }
1190
1248
  const ORDERED_MATH_GROUPS = [
1191
1249
  {
1192
1250
  id: 'roots-main',
1193
1251
  label: <RootFractionTabIcon />,
1194
1252
  items: [
1195
1253
  // GROUP 1 - Fractions & Roots (cols: 2)
1196
- { label: '□/□', insert: '\\frac{#0}{#?}', title: 'Fraction', cls: 'green-template', icon: 'stacked-fraction' },
1197
- { label: '□/□', insert: '{#0}/{#?}', title: 'Bevelled Fraction', cls: 'green-template' },
1198
- { label: '√□', insert: '\\sqrt{#0}', title: 'Square Root', cls: 'green-template', icon: 'square-root-template' },
1199
- { label: '□√□', insert: '\\sqrt[#?]{#0}', title: 'Root', cls: 'green-template', icon: 'nth-root-template' },
1254
+ { label: '□/□', insert: '\\frac{#0}{#?}', title: 'Fraction', cls: 'green-template black-glyph-template', icon: 'stacked-fraction' },
1255
+ { label: '□/□', insert: '{#0}/{#?}', title: 'Bevelled Fraction', cls: 'green-template black-glyph-template' },
1256
+ { label: '√□', insert: '\\sqrt{#0}', title: 'Square Root', cls: 'green-template black-glyph-template', icon: 'square-root-template' },
1257
+ { label: '□√□', insert: '\\sqrt[#?]{#0}', title: 'Root', cls: 'green-template black-glyph-template', icon: 'nth-root-template' },
1200
1258
  { type: 'sep', cols: 2 },
1201
1259
  // GROUP 2a - Brackets (cols: 2)
1202
- { label: '□^□', insert: '#0^{#?}', title: 'Superscript', cls: 'green-template', icon: 'superscript-template' },
1203
- { label: '□_□', insert: '#0_{#?}', title: 'Subscript', cls: 'green-template', icon: 'subscript-template' },
1260
+ { label: '□^□', insert: '#0^{#?}', title: 'Superscript', cls: 'green-template black-glyph-template', icon: 'superscript-template' },
1261
+ { label: '□_□', insert: '#0_{#?}', title: 'Subscript', cls: 'green-template black-glyph-template', icon: 'subscript-template' },
1204
1262
 
1205
1263
  { type: 'sep', cols: 1 },
1206
1264
  // GROUP 2b - Super/Subscript (cols: 1)
1207
- { label: '(□)', insert: '\\left(#0\\right)', title: 'Parentheses', cls: 'green-template' },
1208
- { label: '|□|', insert: '\\left|#0\\right|', title: 'Absolute Value', cls: 'green-template' },
1209
- { label: '[□]', insert: '\\left[#0\\right]', title: 'Square Brackets', cls: 'green-template' },
1210
- { label: '{□}', insert: '\\left\\{#0\\right\\}', title: 'Curly Braces', cls: 'green-template' },
1265
+ { label: '(□)', insert: '\\left(#0\\right)', title: 'Parentheses', cls: 'green-template green-placeholder-glyph' },
1266
+ { label: '|□|', insert: '\\left|#0\\right|', title: 'Absolute Value', cls: 'green-template green-placeholder-glyph' },
1267
+ { label: '[□]', insert: '\\left[#0\\right]', title: 'Square Brackets', cls: 'green-template green-placeholder-glyph' },
1268
+ { label: '{□}', insert: '\\left\\{#0\\right\\}', title: 'Curly Braces', cls: 'green-template green-placeholder-glyph' },
1211
1269
  { type: 'sep', cols: 3 },
1212
1270
  // GROUP 3 - Operators (cols: 3)
1213
1271
  { label: '+', insert: '+' },
@@ -1218,20 +1276,17 @@ const ORDERED_MATH_GROUPS = [
1218
1276
  { label: '±', insert: '\\pm' },
1219
1277
  { type: 'sep', cols: 3 },
1220
1278
  // GROUP 4 - Relations (cols: 4)
1221
- { label: '≥', insert: '\\geq' },
1222
- { label: '≤', insert: '\\leq' },
1223
- { label: '∩', insert: '\\cap' },
1224
- { label: '∪', insert: '\\cup' },
1225
- { label: '=', insert: '=' },
1226
- { label: '≠', insert: '\\neq' },
1227
- { label: '⊂', insert: '\\subset' },
1228
- { label: '∈', insert: '\\in' },
1279
+ { label: '\u2265', insert: '\\geq' },
1280
+ { label: '\u2264', insert: '\\leq' },
1281
+ { label: '\u2229', insert: '\\cap' },
1282
+ { label: '\u222A', insert: '\\cup' },
1283
+ { label: '\u2282', insert: '\\subset' },
1284
+ { label: '\u2208', insert: '\\in' },
1229
1285
  { type: 'sep', cols: 4 },
1230
1286
  // GROUP 5 - Symbols (cols: 2)
1231
1287
  { label: '∅', insert: '\\emptyset' },
1232
1288
  { label: '∞', insert: '\\infty' },
1233
1289
  { label: 'π', insert: '\\pi' },
1234
- { label: 'ℕ', insert: '\\mathbb{N}' },
1235
1290
  { type: 'sep', cols: 2 },
1236
1291
  // GROUP 6 - Clipboard (cols: 3)
1237
1292
  { label: '✂', action: 'CUT', title: 'Cut Formula', cls: 'soft-tool' },
@@ -1259,7 +1314,7 @@ const ORDERED_MATH_GROUPS = [
1259
1314
  id: 'relations',
1260
1315
  ...MATH_GROUPS[1],
1261
1316
  items: RELATIONS_TAB_ITEMS,
1262
- label: <TabIcon top="∈∞" compact />,
1317
+ label: <RelationsTabIcon />,
1263
1318
  },
1264
1319
  {
1265
1320
  id: 'arrows',
@@ -1268,69 +1323,69 @@ const ORDERED_MATH_GROUPS = [
1268
1323
  },
1269
1324
  {
1270
1325
  id: 'greek',
1271
- label: <TabIcon top="α Ω" compact />,
1326
+ label: <GreekTabIcon />,
1272
1327
  items: [
1273
- { category: 'Lowercase Greek Letters', label: 'α', insert: '\\alpha' },
1274
- { category: 'Lowercase Greek Letters', label: 'β', insert: '\\beta' },
1275
- { category: 'Lowercase Greek Letters', label: 'γ', insert: '\\gamma' },
1276
- { category: 'Lowercase Greek Letters', label: 'δ', insert: '\\delta' },
1277
- { category: 'Lowercase Greek Letters', label: 'ε', insert: '\\epsilon' },
1278
- { category: 'Lowercase Greek Letters', label: 'ζ', insert: '\\zeta' },
1279
- { category: 'Lowercase Greek Letters', label: 'η', insert: '\\eta' },
1280
- { category: 'Lowercase Greek Letters', label: 'θ', insert: '\\theta' },
1281
- { category: 'Lowercase Greek Letters', label: 'ϑ', insert: '\\vartheta' },
1282
- { category: 'Lowercase Greek Letters', label: 'ι', insert: '\\iota' },
1283
- { category: 'Lowercase Greek Letters', label: 'κ', insert: '\\kappa' },
1284
- { category: 'Lowercase Greek Letters', label: 'λ', insert: '\\lambda' },
1285
- { category: 'Lowercase Greek Letters', label: 'μ', insert: '\\mu' },
1286
- { category: 'Lowercase Greek Letters', label: 'ν', insert: '\\nu' },
1287
- { category: 'Lowercase Greek Letters', label: 'ξ', insert: '\\xi' },
1288
- { category: 'Lowercase Greek Letters', label: 'ο', insert: 'ο' },
1289
- { category: 'Lowercase Greek Letters', label: 'π', insert: '\\pi' },
1290
- { category: 'Lowercase Greek Letters', label: 'ϖ', insert: '\\varpi' },
1291
- { category: 'Lowercase Greek Letters', label: 'ρ', insert: '\\rho' },
1292
- { category: 'Lowercase Greek Letters', label: 'ς', insert: '\\varsigma' },
1293
- { category: 'Lowercase Greek Letters', label: 'σ', insert: '\\sigma' },
1294
- { category: 'Lowercase Greek Letters', label: 'τ', insert: '\\tau' },
1295
- { category: 'Lowercase Greek Letters', label: 'υ', insert: '\\upsilon' },
1296
- { category: 'Lowercase Greek Letters', label: 'φ', insert: '\\phi' },
1297
- { category: 'Lowercase Greek Letters', label: 'ϕ', insert: '\\varphi' },
1298
- { category: 'Lowercase Greek Letters', label: 'χ', insert: '\\chi' },
1299
- { category: 'Lowercase Greek Letters', label: 'ψ', insert: '\\psi' },
1300
- { category: 'Lowercase Greek Letters', label: 'ω', insert: '\\omega' },
1301
- { category: 'Lowercase Greek Letters', label: '|', action: 'GREEK_ITALIC_PICKER', title: 'Italic Uppercase Greek', icon: 'vertical-line-picker-template-image', cls: 'arrow-picker-tool greek-italic-picker-tool' },
1302
-
1303
- { category: 'Uppercase Greek Letters', label: 'ℕ', insert: '\\mathbb{N}' },
1304
- { category: 'Uppercase Greek Letters', label: 'ℤ', insert: '\\mathbb{Z}' },
1305
- { category: 'Uppercase Greek Letters', label: 'ℚ', insert: '\\mathbb{Q}' },
1306
- { category: 'Uppercase Greek Letters', label: 'ℂ', insert: '\\mathbb{C}' },
1307
- { category: 'Uppercase Greek Letters', label: 'ℝ', insert: '\\mathbb{R}' },
1308
- { category: 'Uppercase Greek Letters', label: 'ℙ', insert: '\\mathbb{P}' },
1309
- { category: 'Uppercase Greek Letters', label: '|', action: 'BLACKBOARD_BOLD_PICKER', title: 'More Blackboard Bold Letters', icon: 'vertical-line-picker-template-image', cls: 'arrow-picker-tool blackboard-bold-picker-tool' },
1310
-
1311
- { category: 'Fraktur / Gothic Symbols', label: '𝔄', insert: '\\mathfrak{A}' },
1312
- { category: 'Fraktur / Gothic Symbols', label: '𝒜', insert: '\\mathscr{A}' },
1313
- { category: 'Fraktur / Gothic Symbols', label: '𝔅', insert: '\\mathfrak{B}' },
1314
- { category: 'Fraktur / Gothic Symbols', label: 'ℬ', insert: '\\mathscr{B}' },
1315
- { category: 'Fraktur / Gothic Symbols', label: 'ℭ', insert: '\\mathfrak{C}' },
1316
- { category: 'Fraktur / Gothic Symbols', label: '𝒞', insert: '\\mathscr{C}' },
1317
- { category: 'Fraktur / Gothic Symbols', label: '|', action: 'FRAKTUR_SCRIPT_PICKER', title: 'More Fraktur and Script Letters', icon: 'vertical-line-picker-template-image', cls: 'arrow-picker-tool fraktur-script-picker-tool' },
1318
-
1319
- { category: 'Hebrew Mathematical Symbols', label: 'ℑ', insert: '\\Im' },
1320
- { category: 'Hebrew Mathematical Symbols', label: 'ℜ', insert: '\\Re' },
1321
- { category: 'Hebrew Mathematical Symbols', label: '𝓁', insert: '\\ell' },
1322
- { category: 'Hebrew Mathematical Symbols', label: '|', action: 'HEBREW_SYMBOL_PICKER', title: 'More Hebrew Mathematical Symbols', icon: 'vertical-line-picker-template-image', cls: 'arrow-picker-tool hebrew-symbol-picker-tool' },
1323
-
1324
- { category: 'Arabic-Indic Numeral Systems', label: '٤٦', action: 'ARABIC_INDIC_NUMERALS', title: 'Arabic-Indic Numerals', icon: 'arabic-indic-numerals-template-image', cls: 'numeral-mode-tool' },
1325
- { category: 'Arabic-Indic Numeral Systems', label: '۴۶', action: 'EASTERN_ARABIC_INDIC_NUMERALS', title: 'Eastern Arabic-Indic Numerals (Persian/Urdu)', icon: 'eastern-arabic-indic-numerals-template-image', cls: 'numeral-mode-tool' },
1326
-
1327
- { category: 'Blackboard Bold / Number Sets', label: 'H', insert: 'H' },
1328
- { category: 'Blackboard Bold / Number Sets', label: 'C', insert: 'C' },
1329
- { category: 'Blackboard Bold / Number Sets', label: 'N', insert: 'N' },
1330
- { category: 'Blackboard Bold / Number Sets', label: 'O', insert: 'O' },
1331
- { category: 'Blackboard Bold / Number Sets', label: 'F', insert: 'F' },
1332
- { category: 'Blackboard Bold / Number Sets', label: 'S', insert: 'S' },
1333
- { category: 'Blackboard Bold / Number Sets', label: '|', action: 'PERIODIC_TABLE_PICKER', title: 'Periodic Table', icon: 'vertical-line-picker-template-image', cls: 'arrow-picker-tool periodic-table-picker-tool' },
1328
+ { category: 'Lowercase Greek Letters', label: '\u03B1', insert: '\\alpha' },
1329
+ { category: 'Lowercase Greek Letters', label: '\u03B2', insert: '\\beta' },
1330
+ { category: 'Lowercase Greek Letters', label: '\u03B3', insert: '\\gamma' },
1331
+ { category: 'Lowercase Greek Letters', label: '\u03B4', insert: '\\delta' },
1332
+ { category: 'Lowercase Greek Letters', label: '\u03B5', insert: '\\epsilon' },
1333
+ { category: 'Lowercase Greek Letters', label: '\u03B6', insert: '\\zeta' },
1334
+ { category: 'Lowercase Greek Letters', label: '\u03B7', insert: '\\eta' },
1335
+ { category: 'Lowercase Greek Letters', label: '\u03B8', insert: '\\theta' },
1336
+ { category: 'Lowercase Greek Letters', label: '\u03D1', insert: '\\vartheta' },
1337
+ { category: 'Lowercase Greek Letters', label: '\u03B9', insert: '\\iota' },
1338
+ { category: 'Lowercase Greek Letters', label: '\u03BA', insert: '\\kappa' },
1339
+ { category: 'Lowercase Greek Letters', label: '\u03BB', insert: '\\lambda' },
1340
+ { category: 'Lowercase Greek Letters', label: '\u03BC', insert: '\\mu' },
1341
+ { category: 'Lowercase Greek Letters', label: '\u03BD', insert: '\\nu' },
1342
+ { category: 'Lowercase Greek Letters', label: '\u03BE', insert: '\\xi' },
1343
+ { category: 'Lowercase Greek Letters', label: '\u03BF', insert: '\u03BF' },
1344
+ { category: 'Lowercase Greek Letters', label: '\u03C0', insert: '\\pi' },
1345
+ { category: 'Lowercase Greek Letters', label: '\u03D6', insert: '\\varpi' },
1346
+ { category: 'Lowercase Greek Letters', label: '\u03C1', insert: '\\rho' },
1347
+ { category: 'Lowercase Greek Letters', label: '\u03C2', insert: '\\varsigma' },
1348
+ { category: 'Lowercase Greek Letters', label: '\u03C3', insert: '\\sigma' },
1349
+ { category: 'Lowercase Greek Letters', label: '\u03C4', insert: '\\tau' },
1350
+ { category: 'Lowercase Greek Letters', label: '\u03C5', insert: '\\upsilon' },
1351
+ { category: 'Lowercase Greek Letters', label: '\u03C6', insert: '\\phi' },
1352
+ { category: 'Lowercase Greek Letters', label: '\u03D5', insert: '\\varphi' },
1353
+ { category: 'Lowercase Greek Letters', label: '\u03C7', insert: '\\chi' },
1354
+ { category: 'Lowercase Greek Letters', label: '\u03C8', insert: '\\psi' },
1355
+ { category: 'Lowercase Greek Letters', label: '\u03C9', insert: '\\omega' },
1356
+ { category: 'Greek Letter Picker', label: '|', action: 'GREEK_ITALIC_PICKER', title: 'Italic Uppercase Greek', icon: 'vertical-line-picker-template-image', cls: 'arrow-picker-tool greek-italic-picker-tool' },
1357
+
1358
+ { category: 'Blackboard Bold / Number Sets', label: '\u2115', insert: '\\mathbb{N}' },
1359
+ { category: 'Blackboard Bold / Number Sets', label: '\u2124', insert: '\\mathbb{Z}' },
1360
+ { category: 'Blackboard Bold / Number Sets', label: '\u211A', insert: '\\mathbb{Q}' },
1361
+ { category: 'Blackboard Bold / Number Sets', label: '\u2102', insert: '\\mathbb{C}' },
1362
+ { category: 'Blackboard Bold / Number Sets', label: '\u211D', insert: '\\mathbb{R}' },
1363
+ { category: 'Blackboard Bold / Number Sets', label: '\u2119', insert: '\\mathbb{P}' },
1364
+ { category: 'Blackboard Bold Picker', label: '|', action: 'BLACKBOARD_BOLD_PICKER', title: 'More Blackboard Bold Letters', icon: 'vertical-line-picker-template-image', cls: 'arrow-picker-tool blackboard-bold-picker-tool' },
1365
+
1366
+ { category: 'Fraktur Symbols', label: '\u{1D504}', insert: '\\mathfrak{A}' },
1367
+ { category: 'Fraktur Symbols', label: '\u{1D505}', insert: '\\mathfrak{B}' },
1368
+ { category: 'Fraktur Symbols', label: '\u{1D50A}', insert: '\\mathfrak{G}' },
1369
+ { category: 'Script Symbols', label: '\u{1D49C}', insert: '\\mathscr{A}' },
1370
+ { category: 'Script Symbols', label: '\u212C', insert: '\\mathscr{B}' },
1371
+ { category: 'Script Symbols', label: '\u{1D49E}', insert: '\\mathscr{C}' },
1372
+ { category: 'Fraktur / Script Picker', label: '|', action: 'FRAKTUR_SCRIPT_PICKER', title: 'More Fraktur and Script Letters', icon: 'vertical-line-picker-template-image', cls: 'arrow-picker-tool fraktur-script-picker-tool' },
1373
+
1374
+ { category: 'Hebrew Mathematical Symbols', label: '\u2111', insert: '\\Im' },
1375
+ { category: 'Hebrew Mathematical Symbols', label: '\u211C', insert: '\\Re' },
1376
+ { category: 'Hebrew Mathematical Symbols', label: '\u2113', insert: '\\ell' },
1377
+ { category: 'Hebrew Symbol Picker', label: '|', action: 'HEBREW_SYMBOL_PICKER', title: 'More Hebrew Mathematical Symbols', icon: 'vertical-line-picker-template-image', cls: 'arrow-picker-tool hebrew-symbol-picker-tool' },
1378
+
1379
+ { category: 'Arabic-Indic Numeral Systems', label: '\u0664\u0666', action: 'ARABIC_INDIC_NUMERALS', title: 'Arabic-Indic Numerals', icon: 'arabic-indic-numerals-template-image', cls: 'numeral-mode-tool' },
1380
+ { category: 'Arabic-Indic Numeral Systems', label: '\u06F4\u06F6', action: 'EASTERN_ARABIC_INDIC_NUMERALS', title: 'Eastern Arabic-Indic Numerals (Persian/Urdu)', icon: 'eastern-arabic-indic-numerals-template-image', cls: 'numeral-mode-tool' },
1381
+
1382
+ { category: 'Periodic Table Symbols', label: 'H', insert: 'H' },
1383
+ { category: 'Periodic Table Symbols', label: 'C', insert: 'C' },
1384
+ { category: 'Periodic Table Symbols', label: 'N', insert: 'N' },
1385
+ { category: 'Periodic Table Symbols', label: 'O', insert: 'O' },
1386
+ { category: 'Periodic Table Symbols', label: 'F', insert: 'F' },
1387
+ { category: 'Periodic Table Symbols', label: 'S', insert: 'S' },
1388
+ { category: 'Periodic Table Picker', label: '|', action: 'PERIODIC_TABLE_PICKER', title: 'Periodic Table', icon: 'vertical-line-picker-template-image', cls: 'arrow-picker-tool periodic-table-picker-tool' },
1334
1389
  ],
1335
1390
  },
1336
1391
  {
@@ -1347,15 +1402,13 @@ const ORDERED_MATH_GROUPS = [
1347
1402
  id: 'brackets',
1348
1403
  label: <BracketsTabIcon />,
1349
1404
  items: [
1350
- { label: '(□)', insert: '\\left(#0\\right)' },
1351
- { label: '[□]', insert: '\\left[#0\\right]' },
1352
- { label: '|□|', insert: '\\left|#0\\right|' },
1353
- { label: '‖□‖', insert: '\\left\\| #0 \\right\\|' },
1354
- { label: '⟨□⟩', insert: '\\left\\langle #0 \\right\\rangle' },
1355
- { label: '{□}', insert: '\\left\\{#0\\right\\}' },
1356
- { label: '⌊□⌋', insert: '\\left\\lfloor #0 \\right\\rfloor' },
1357
- { label: '⌈□⌉', insert: '\\left\\lceil #0 \\right\\rceil' },
1358
- { label: '⟨□|□⟩', insert: '\\left\\langle #0 \\middle| #? \\right\\rangle' },
1405
+ { label: '(□)', insert: '\\left(#0\\right)', cls: 'green-placeholder-glyph' },
1406
+ { label: '[□]', insert: '\\left[#0\\right]', cls: 'green-placeholder-glyph' },
1407
+ { label: '|□|', insert: '\\left|#0\\right|', cls: 'green-placeholder-glyph' },
1408
+ { label: '‖□‖', insert: '\\left\\| #0 \\right\\|', cls: 'green-placeholder-glyph' },
1409
+ { label: '⟨□⟩', insert: '\\left\\langle #0 \\right\\rangle', cls: 'green-placeholder-glyph' },
1410
+ { label: '{□}', insert: '\\left\\{#0\\right\\}', cls: 'green-placeholder-glyph' },
1411
+ makeRelationMorePicker('bracketDelimiterExtras', 'More Delimiters'),
1359
1412
  { type: 'sep', cols: 2 },
1360
1413
  { label: 'overbrace', insert: '\\overbrace{#0}', cls: 'template', directInsert: true, title: 'Overbrace', icon: 'overbrace-arc-template-image' },
1361
1414
  { label: 'underbrace', insert: '\\underbrace{#0}', cls: 'template', directInsert: true, title: 'Underbrace', icon: 'underbrace-arc-template-image' },
@@ -1377,16 +1430,13 @@ const ORDERED_MATH_GROUPS = [
1377
1430
  { label: '▯\n|', insert: '\\left.#?\\right|', cls: 'template', directInsert: true, title: 'Right Bar', icon: 'right-bar-template-image' },
1378
1431
  { label: '□\n▯', insert: '\\boxed{#?}', cls: 'template', directInsert: true, title: 'Boxed', icon: 'boxed-square-template-image' },
1379
1432
  { label: '(\n▯\n)', insert: '\\enclose{circle}{#?}', cls: 'template', directInsert: true, title: 'Rounded Enclosure', icon: 'paren-frame-template-image' },
1380
- { label: '¯\n▯|', insert: '\\overline{\\left.#?\\right|}', cls: 'template', directInsert: true, title: 'Overline with Right Bar', icon: 'overline-right-bar-template-image' },
1381
- { label: '▢\n▯', insert: '\\enclose{roundedbox}{#?}', cls: 'template', directInsert: true, title: 'Rounded Boxed', icon: 'boxed-rounded-template-image' },
1433
+ makeRelationMorePicker('enclosureFrameExtras', 'More Enclosures'),
1382
1434
  { type: 'sep', cols: 2 },
1383
1435
  { label: '╱\n▯', insert: '\\cancel{#?}', cls: 'template', directInsert: true, title: 'Cancel', icon: 'cancel-diagonal-template-image' },
1384
1436
  { label: '╲\n▯', insert: '\\bcancel{#?}', cls: 'template', directInsert: true, title: 'Backward Cancel', icon: 'bcancel-template-image' },
1385
1437
  { label: '─\n▯', insert: '\\enclose{horizontalstrike}{#?}', cls: 'template', directInsert: true, title: 'Strikeout Text', icon: 'sout-template-image' },
1386
1438
  { label: '╳\n▯', insert: '\\xcancel{#?}', cls: 'template', directInsert: true, title: 'Cross Cancel', icon: 'xcancel-template-image' },
1387
- { label: '│\n▯', insert: '\\enclose{verticalstrike}{#?}', cls: 'template', directInsert: true, title: 'Vertical Strike', icon: 'vertical-strike-template-image' },
1388
- { label: ')\n¯', insert: '\\overline{\\left)#?\\right.}', cls: 'template', directInsert: true, title: 'Overline with Curved Left Boundary', icon: 'overline-left-curve-template-image' },
1389
- { label: '┼\n▯', insert: '\\enclose{verticalstrike horizontalstrike}{#?}', cls: 'template', directInsert: true, title: 'Vertical and Horizontal Strike', icon: 'crosshair-strike-template-image' },
1439
+ makeRelationMorePicker('strikeDecorationExtras', 'More Strike Decorations'),
1390
1440
  ],
1391
1441
  },
1392
1442
  {
@@ -1410,7 +1460,7 @@ const ORDERED_MATH_GROUPS = [
1410
1460
  { label: '∏', insert: '\\prod' },
1411
1461
  { label: '∐', insert: '\\coprod' },
1412
1462
  { label: '⨅', insert: '\\sqcap' },
1413
- { label: '⨆', insert: '\\sqcup' },
1463
+ { label: '⨆', insert: '\\bigsqcup' },
1414
1464
  { label: '∑', insert: '\\sum' },
1415
1465
  ],
1416
1466
  },
@@ -1428,34 +1478,29 @@ const ORDERED_MATH_GROUPS = [
1428
1478
  {label: '∂', insert: '∂', cls: 'template', directInsert: true, title: 'Partial Differential'},
1429
1479
  { label: 'first-derivative', insert: '\\frac{d#?}{d#?}', cls: 'template', directInsert: true, title: 'First Derivative', icon: 'first-derivative-template-image' },
1430
1480
  { label: 'partial-derivative', insert: '\\frac{\\partial#?}{\\partial#?}', cls: 'template', directInsert: true, title: 'Partial Derivative', icon: 'partial-derivative-template-image' },
1481
+ { type: 'sep', cols: 2 },
1431
1482
  { label: 'limit-infinity', insert: '\\lim_{#?\\to\\infty}', cls: 'template', directInsert: true, title: 'Limit to Infinity', icon: 'limit-infinity-template-image' },
1432
1483
  { label: 'limit-generic', insert: '\\lim_{#?}', cls: 'template', directInsert: true, title: 'Limit', icon: 'limit-generic-template-image' },
1433
- { type: 'sep', cols: 2 },
1434
- { label: '∇×\n▯', insert: '\\nabla \\times #?', cls: 'template', directInsert: true, title: 'Curl' },
1435
- { label: '∇·\n▯', insert: '\\nabla \\cdot #?', cls: 'template', directInsert: true, title: 'Divergence' },
1436
- { label: '∇\n▯', insert: '\\nabla #?', cls: 'template', directInsert: true, title: 'Gradient' },
1437
- { label: 'Δ\n▯', insert: '\\Delta #?', cls: 'template', directInsert: true, title: 'Delta Expression' },
1484
+ { type: 'sep', cols: 2 },
1485
+ { label: '∇×□', insert: '\\nabla \\times #?', cls: 'template green-placeholder-glyph', directInsert: true, title: 'Curl' },
1486
+ { label: '∇·□', insert: '\\nabla \\cdot #?', cls: 'template green-placeholder-glyph', directInsert: true, title: 'Divergence' },
1487
+ { label: '∇□', insert: '\\nabla #?', cls: 'template green-placeholder-glyph', directInsert: true, title: 'Gradient' },
1488
+ { label: 'Δ□', insert: '\\Delta #?', cls: 'template green-placeholder-glyph', directInsert: true, title: 'Delta Expression' },
1438
1489
  { type: 'sep', cols: 3 },
1439
- { label: '∫', insert: '\\int' },
1440
- { label: '∮', insert: '\\oint' },
1441
- { label: '∬', insert: '\\iint' },
1442
- { label: '∯', insert: '\\oiint' },
1443
- { label: '∭', insert: '\\iiint' },
1444
- { label: '∰', insert: '\\oiiint' },
1490
+ { label: '∫', insert: '\\int', icon: 'single-integral-template-image' },
1491
+ { label: '∮', insert: '\\oint', icon: 'contour-integral-template-image' },
1492
+ { label: '∬', insert: '\\iint', icon: 'double-integral-template-image' },
1493
+ { label: '∯', insert: '\\oiint', icon: 'double-contour-integral-template-image' },
1494
+ makeRelationMorePicker('tripleIntegralExtras', 'More Triple Integrals'),
1445
1495
  { type: 'sep', cols: 2 },
1446
- { label: 'log(□)', insert: '\\log\\left(#0\\right)' },
1496
+ { label: 'log(□)', insert: '\\log\\left(#0\\right)', cls: 'green-placeholder-glyph' },
1447
1497
  { label: 'log₍□₎(□)', insert: '\\log_{#?}\\left(#?\\right)', cls: 'template', directInsert: true, title: 'Logarithm With Base', icon: 'log-base-template-image' },
1448
1498
  { type: 'sep', cols: 4 },
1449
- { label: 'sin(□)', insert: '\\sin\\left(#0\\right)' },
1450
- { label: 'cos(□)', insert: '\\cos\\left(#0\\right)' },
1451
- { label: 'tan(□)', insert: '\\tan\\left(#0\\right)' },
1452
- { label: 'ln(□)', insert: '\\ln\\left(#0\\right)' },
1453
- { label: 'sin⁻¹(□)', insert: '\\sin^{-1}\\left(#0\\right)' },
1454
- { label: 'csc(□)', insert: '\\csc\\left(#0\\right)' },
1455
- { label: 'cos⁻¹(□)', insert: '\\cos^{-1}\\left(#0\\right)' },
1456
- { label: 'sec(□)', insert: '\\sec\\left(#0\\right)' },
1457
- { label: 'tan⁻¹(□)', insert: '\\tan^{-1}\\left(#0\\right)' },
1458
- { label: 'cot(□)', insert: '\\cot\\left(#0\\right)' },
1499
+ { label: 'sin(□)', insert: '\\sin\\left(#0\\right)', cls: 'green-placeholder-glyph' },
1500
+ { label: 'tan(□)', insert: '\\tan\\left(#0\\right)', cls: 'green-placeholder-glyph' },
1501
+ { label: 'cos(□)', insert: '\\cos\\left(#0\\right)', cls: 'green-placeholder-glyph' },
1502
+ { label: 'ln(□)', insert: '\\ln\\left(#0\\right)', cls: 'green-placeholder-glyph' },
1503
+ makeRelationMorePicker('trigFunctionExtras', 'More Trig Functions'),
1459
1504
  ],
1460
1505
  },
1461
1506
  {
@@ -1565,10 +1610,10 @@ function RootFractionTabIcon() {
1565
1610
  strokeLinecap="round"
1566
1611
  strokeLinejoin="round"
1567
1612
  />
1568
- <rect x="13" y="7" width="8" height="8" fill="none" stroke="currentColor" strokeWidth="1.2" />
1569
- <rect x="31" y="3" width="6" height="6" fill="none" stroke="currentColor" strokeWidth="1.2" />
1570
- <line x1="29" y1="12" x2="39" y2="12" stroke="currentColor" strokeWidth="1.2" />
1571
- <rect x="31" y="15" width="6" height="6" fill="none" stroke="currentColor" strokeWidth="1.2" />
1613
+ <rect x="13" y="7" width="8" height="8" fill="none" stroke="currentColor" strokeWidth="1.7" />
1614
+ <rect x="31" y="3" width="6" height="6" fill="none" stroke="currentColor" strokeWidth="1.7" />
1615
+ <line x1="29" y1="12" x2="39" y2="12" stroke="currentColor" strokeWidth="1.7" />
1616
+ <rect x="31" y="15" width="6" height="6" fill="none" stroke="currentColor" strokeWidth="1.7" />
1572
1617
  </svg>
1573
1618
  </span>
1574
1619
  );
@@ -1578,20 +1623,20 @@ function MatrixTabIcon() {
1578
1623
  return (
1579
1624
  <span className="cme-tab-icon cme-tab-icon--svg" aria-hidden="true">
1580
1625
  <svg className="cme-tab-svg-icon" viewBox="0 0 210 110" focusable="false">
1581
- <path d="M12 8 H4 V102 H12" fill="none" stroke="currentColor" strokeWidth="3" />
1582
- <path d="M96 8 H104 V102 H96" fill="none" stroke="currentColor" strokeWidth="3" />
1583
- <rect x="28" y="15" width="14" height="24" fill="none" stroke="#ffffff" strokeWidth="2.5" />
1584
- <rect x="64" y="15" width="14" height="24" fill="none" stroke="#ffffff" strokeWidth="2.5" />
1585
- <rect x="28" y="63" width="14" height="24" fill="none" stroke="#ffffff" strokeWidth="2.5" />
1586
- <rect x="64" y="63" width="14" height="24" fill="none" stroke="#ffffff" strokeWidth="2.5" />
1626
+ <path d="M12 8 H4 V102 H12" fill="none" stroke="currentColor" strokeWidth="7" />
1627
+ <path d="M96 8 H104 V102 H96" fill="none" stroke="currentColor" strokeWidth="7" />
1628
+ <rect x="24" y="15" width="22" height="32" fill="none" stroke="#ffffff" strokeWidth="7.5" />
1629
+ <rect x="64" y="15" width="22" height="32" fill="none" stroke="#ffffff" strokeWidth="7.5" />
1630
+ <rect x="24" y="63" width="22" height="32" fill="none" stroke="#ffffff" strokeWidth="7.5" />
1631
+ <rect x="64" y="63" width="22" height="32" fill="none" stroke="#ffffff" strokeWidth="7.5" />
1587
1632
  <path
1588
1633
  d="M142 8 C132 8 132 18 132 28 C132 38 128 45 124 49 C128 53 132 60 132 70 C132 80 132 90 142 102"
1589
1634
  fill="none"
1590
1635
  stroke="currentColor"
1591
- strokeWidth="3"
1636
+ strokeWidth="7"
1592
1637
  />
1593
- <rect x="154" y="15" width="14" height="24" fill="none" stroke="#ffffff" strokeWidth="2.5" />
1594
- <rect x="154" y="63" width="14" height="24" fill="none" stroke="#ffffff" strokeWidth="2.5" />
1638
+ <rect x="154" y="15" width="22" height="32" fill="none" stroke="#ffffff" strokeWidth="7.5" />
1639
+ <rect x="154" y="63" width="22" height="32" fill="none" stroke="#ffffff" strokeWidth="7.5" />
1595
1640
  </svg>
1596
1641
  </span>
1597
1642
  );
@@ -1600,95 +1645,261 @@ function MatrixTabIcon() {
1600
1645
  function PowerFracTabIcon() {
1601
1646
  return (
1602
1647
  <span className="cme-tab-icon cme-tab-icon--svg" aria-hidden="true">
1603
- <svg className="cme-tab-svg-icon" viewBox="0 0 70 50" focusable="false">
1604
- <rect x="8" y="18" width="14" height="14" fill="none" stroke="#ffffff" strokeWidth="2.5" />
1605
- <rect x="20" y="6" width="14" height="14" fill="none" stroke="#ffffff" strokeWidth="2.5" />
1606
- <rect x="50" y="6" width="8" height="8" fill="none" stroke="#ffffff" strokeWidth="2.5" />
1607
- <rect x="48" y="22" width="12" height="12" fill="none" stroke="#ffffff" strokeWidth="2.5" />
1608
- </svg>
1648
+ <svg className="cme-tab-svg-icon" viewBox="0 0 70 50" focusable="false">
1649
+ <rect
1650
+ x="4"
1651
+ y="20"
1652
+ width="20"
1653
+ height="28"
1654
+ fill="none"
1655
+ stroke="#ffffff"
1656
+ strokeWidth="4"
1657
+ />
1658
+
1659
+ <rect
1660
+ x="24"
1661
+ y="6"
1662
+ width="12"
1663
+ height="22"
1664
+ fill="none"
1665
+ stroke="#ffffff"
1666
+ strokeWidth="4"
1667
+ />
1668
+
1669
+ <rect
1670
+ x="51"
1671
+ y="10"
1672
+ width="8"
1673
+ height="10"
1674
+ fill="none"
1675
+ stroke="#ffffff"
1676
+ strokeWidth="4"
1677
+ />
1678
+
1679
+ <rect
1680
+ x="48"
1681
+ y="30"
1682
+ width="14"
1683
+ height="18"
1684
+ fill="none"
1685
+ stroke="#ffffff"
1686
+ strokeWidth="4"
1687
+ />
1688
+ </svg>
1609
1689
  </span>
1610
1690
  );
1611
1691
  }
1612
1692
 
1613
- function BracketsTabIcon() {
1693
+ function RelationsTabIcon() {
1614
1694
  return (
1615
1695
  <span className="cme-tab-icon cme-tab-icon--svg" aria-hidden="true">
1616
- <svg className="cme-tab-svg-icon" viewBox="0 0 120 90" focusable="false">
1617
- <g
1696
+ <svg className="cme-tab-svg-icon" viewBox="0 0 56 28" focusable="false">
1697
+ <path
1698
+ d="M18 4 C10 4 6 9 6 14 C6 19 10 24 18 24"
1618
1699
  fill="none"
1619
1700
  stroke="#ffffff"
1620
- strokeWidth="4"
1701
+ strokeWidth="2.5"
1621
1702
  strokeLinecap="round"
1622
1703
  strokeLinejoin="round"
1704
+ />
1705
+ <line
1706
+ x1="8"
1707
+ y1="14"
1708
+ x2="18"
1709
+ y2="14"
1710
+ stroke="#ffffff"
1711
+ strokeWidth="2.5"
1712
+ strokeLinecap="round"
1713
+ />
1714
+ <text
1715
+ x="26"
1716
+ y="24"
1717
+ fill="#ffffff"
1718
+ fontFamily="Cambria Math, serif"
1719
+ fontSize="35"
1623
1720
  >
1624
- <path d="M22 15 C8 28 8 62 22 75" />
1625
- <path d="M58 15 C72 28 72 62 58 75" />
1626
- <rect x="30" y="22" width="20" height="36" />
1627
- <rect x="82" y="22" width="20" height="36" />
1628
- <path d="M80 12 Q92 2 104 12" />
1629
- </g>
1721
+ ∞
1722
+ </text>
1630
1723
  </svg>
1631
1724
  </span>
1632
1725
  );
1633
1726
  }
1634
1727
 
1635
- function CalcTabIcon() {
1728
+ function GreekTabIcon() {
1636
1729
  return (
1637
1730
  <span className="cme-tab-icon cme-tab-icon--svg" aria-hidden="true">
1638
- <svg className="cme-tab-svg-icon" viewBox="0 0 120 80" focusable="false">
1639
- <g fill="none" stroke="#ffffff" strokeWidth="2.5">
1640
- <path d="M18 68 C30 68 30 56 30 42 L30 24 C30 12 34 8 42 8" />
1641
- <rect x="48" y="8" width="14" height="14" />
1642
- <rect x="48" y="54" width="14" height="14" />
1643
- </g>
1731
+ <svg className="cme-tab-svg-icon" viewBox="0 0 40 24" focusable="false" >
1644
1732
  <text
1645
- x="78"
1646
- y="48"
1647
- fontFamily="Times New Roman, serif"
1648
- fontSize="28"
1733
+ x="2"
1734
+ y="20"
1649
1735
  fill="#ffffff"
1736
+ fontFamily="Segoe UI Symbol, Arial Unicode MS, sans-serif"
1737
+ fontSize="25"
1650
1738
  >
1651
- lim
1739
+ α Ω
1652
1740
  </text>
1653
1741
  </svg>
1654
1742
  </span>
1655
1743
  );
1656
1744
  }
1657
1745
 
1746
+ function BracketsTabIcon() {
1747
+ return (
1748
+ <span className="cme-tab-icon cme-tab-icon--svg" aria-hidden="true">
1749
+ <svg className="cme-tab-svg-icon" viewBox="0 0 90 50" focusable="false">
1750
+
1751
+ {/* Left icon: (□) */}
1752
+ <path
1753
+ d="M12 8 C4 14,4 36,12 42"
1754
+ fill="none"
1755
+ stroke="#ffffff"
1756
+ strokeWidth="4"
1757
+ strokeLinecap="round"
1758
+ />
1759
+
1760
+ <rect
1761
+ x="20"
1762
+ y="10"
1763
+ width="18"
1764
+ height="30"
1765
+ fill="none"
1766
+ stroke="#ffffff"
1767
+ strokeWidth="4"
1768
+ />
1769
+
1770
+ <path
1771
+ d="M46 8 C54 14,54 36,46 42"
1772
+ fill="none"
1773
+ stroke="#ffffff"
1774
+ strokeWidth="4"
1775
+ strokeLinecap="round"
1776
+ />
1777
+
1778
+ {/* Right icon: overparen + □ */}
1779
+ <path
1780
+ d="M65 10 Q75 2 85 10"
1781
+ fill="none"
1782
+ stroke="#ffffff"
1783
+ strokeWidth="4"
1784
+ strokeLinecap="round"
1785
+ />
1786
+
1787
+ <rect
1788
+ x="68"
1789
+ y="18"
1790
+ width="14"
1791
+ height="22"
1792
+ fill="none"
1793
+ stroke="#ffffff"
1794
+ strokeWidth="4"
1795
+ />
1796
+
1797
+ </svg>
1798
+ </span>
1799
+ );
1800
+ }
1801
+
1802
+ function CalcTabIcon() {
1803
+ return (
1804
+ <span className="cme-tab-icon cme-tab-icon--svg" aria-hidden="true">
1805
+ <svg className="cme-tab-svg-icon" viewBox="0 0 80 50" focusable="false">
1806
+
1807
+ {/* Integral */}
1808
+ <text
1809
+ x="2"
1810
+ y="40"
1811
+ fill="#ffffff"
1812
+ fontSize="42"
1813
+ fontFamily="Cambria Math, Times New Roman, serif"
1814
+ fontWeight="500"
1815
+ >
1816
+ ∫
1817
+ </text>
1818
+
1819
+ {/* Upper limit */}
1820
+ <rect
1821
+ x="30"
1822
+ y="1"
1823
+ width="10"
1824
+ height="10"
1825
+ fill="none"
1826
+ stroke="#ffffff"
1827
+ strokeWidth="2.5"
1828
+ />
1829
+
1830
+ {/* Lower limit */}
1831
+ <rect
1832
+ x="24"
1833
+ y="40"
1834
+ width="10"
1835
+ height="10"
1836
+ fill="none"
1837
+ stroke="#ffffff"
1838
+ strokeWidth="2.5"
1839
+ />
1840
+
1841
+ {/* lim */}
1842
+ <text
1843
+ x="45"
1844
+ y="36"
1845
+ fill="#ffffff"
1846
+ fontSize="32"
1847
+ fontWeight="500"
1848
+ fontFamily="Cambria Math, Times New Roman, serif"
1849
+ >
1850
+ lim
1851
+ </text>
1852
+
1853
+ </svg>
1854
+ </span>
1855
+ );
1856
+ }
1857
+
1658
1858
  function MoveTextTabIcon() {
1659
1859
  return (
1660
1860
  <span className="cme-tab-icon cme-tab-icon--svg" aria-hidden="true">
1661
- <svg className="cme-tab-svg-icon" viewBox="0 0 24 24" focusable="false">
1662
- <path
1663
- d="M12 4V11"
1664
- fill="none"
1665
- stroke="currentColor"
1666
- strokeWidth="1.6"
1667
- strokeLinecap="round"
1668
- />
1669
- <path
1670
- d="M9.5 8.5L12 11L14.5 8.5"
1671
- fill="none"
1672
- stroke="currentColor"
1673
- strokeWidth="1.6"
1674
- strokeLinecap="round"
1675
- strokeLinejoin="round"
1676
- />
1677
- <path
1678
- d="M5 14 C5 18 8 20 12 20 C16 20 19 18 19 14"
1679
- fill="none"
1680
- stroke="currentColor"
1681
- strokeWidth="1.6"
1682
- strokeLinecap="round"
1683
- />
1684
- <path
1685
- d="M8 14 C8 16.5 9.5 18 12 18 C14.5 18 16 16.5 16 14"
1686
- fill="none"
1687
- stroke="currentColor"
1688
- strokeWidth="1.2"
1689
- strokeLinecap="round"
1690
- />
1691
- </svg>
1861
+ <svg xmlns="http://www.w3.org/2000/svg"
1862
+ width="24"
1863
+ height="24"
1864
+ viewBox="0 0 24 24"
1865
+ fill="none">
1866
+
1867
+ {/* <!-- Arrow shaft --> */}
1868
+ <path
1869
+ d="M12 3V12"
1870
+ stroke="currentColor"
1871
+ stroke-width="2"
1872
+ stroke-linecap="round"
1873
+ />
1874
+
1875
+ {/* <!-- Arrow head --> */}
1876
+ <path
1877
+ d="M8.5 8.5L12 12L15.5 8.5"
1878
+ stroke="currentColor"
1879
+ stroke-width="2"
1880
+ stroke-linecap="round"
1881
+ stroke-linejoin="round"
1882
+ fill="none"
1883
+ />
1884
+
1885
+ {/* <!-- Outer curved arc --> */}
1886
+ <path
1887
+ d="M4 15C4 19 7.5 22 12 22C16.5 22 20 19 20 15"
1888
+ stroke="currentColor"
1889
+ stroke-width="2"
1890
+ stroke-linecap="round"
1891
+ fill="none"
1892
+ />
1893
+
1894
+ {/* <!-- Inner curved arc --> */}
1895
+ <path
1896
+ d="M7 15C7 17.5 9 19 12 19C15 19 17 17.5 17 15"
1897
+ stroke="currentColor"
1898
+ stroke-width="2"
1899
+ stroke-linecap="round"
1900
+ fill="none"
1901
+ />
1902
+ </svg>
1692
1903
  </span>
1693
1904
  );
1694
1905
  }
@@ -1798,7 +2009,7 @@ class MathInlinePlugin extends Plugin {
1798
2009
  mf.style.direction = dir;
1799
2010
  mf.style.textAlign = dir === 'rtl' ? 'right' : 'left';
1800
2011
  mf.style.unicodeBidi = dir === 'rtl' ? 'plaintext' : 'normal';
1801
- mf.style.color = '#000000';
2012
+ mf.style.color = '#ffffff';
1802
2013
 
1803
2014
  const setLatex = () => {
1804
2015
  if (mf.setValue) mf.setValue(latex, { silenceNotifications: true });
@@ -1960,10 +2171,10 @@ function makeArrowLabelToolbarIcon(content) {
1960
2171
 
1961
2172
  const TOOLBAR_ICON_IMAGES = {
1962
2173
  'fraction-template-image': makeToolbarIconImage(`
1963
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
1964
- <rect x="5.1" y="1.8" width="7.8" height="4.8" rx="0.6" fill="none" stroke="#2c8a43" stroke-width="1.5"/>
1965
- <line x1="3.2" y1="9" x2="14.8" y2="9" stroke="#2c8a43" stroke-width="1.6" stroke-linecap="square"/>
1966
- <rect x="5.1" y="11.4" width="7.8" height="4.8" rx="0.6" fill="none" stroke="#2c8a43" stroke-width="1.5"/>
2174
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
2175
+ <rect x="6.1" y="1.8" width="6" height="4.8" rx="0" fill="none" stroke="#2c8a43" stroke-width="1.6"/>
2176
+ <line x1="3.2" y1="9" x2="14.8" y2="9" stroke="#000000" stroke-width="1.6" stroke-linecap="square"/>
2177
+ <rect x="6.1" y="11.4" width="6" height="4.8" rx="0" fill="none" stroke="#2c8a43" stroke-width="1.6"/>
1967
2178
  </svg>
1968
2179
  `),
1969
2180
  'superscript-template-image': makeToolbarIconImage(`
@@ -1973,10 +2184,25 @@ const TOOLBAR_ICON_IMAGES = {
1973
2184
  </svg>
1974
2185
  `),
1975
2186
  'sqrt-template-image': makeToolbarIconImage(`
1976
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
1977
- <path d="M1.9 10.3H3.9L5.6 14.1L8.1 4.3H15.4" fill="none" stroke="#2c8a43" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
1978
- <rect x="9.7" y="5.1" width="4.4" height="6.6" rx="0.55" fill="none" stroke="#2c8a43" stroke-width="1.4"/>
1979
- </svg>
2187
+ <svg width="48" height="32" viewBox="-7 0 48 32" xmlns="http://www.w3.org/2000/svg">
2188
+ <path
2189
+ d="M4 18 L11 25 L18 4 L38 4"
2190
+ fill="none"
2191
+ stroke="#222"
2192
+ stroke-width="2.5"
2193
+ stroke-linecap="round"
2194
+ stroke-linejoin="round"
2195
+ />
2196
+ <rect
2197
+ x="23"
2198
+ y="9"
2199
+ width="10"
2200
+ height="13"
2201
+ fill="none"
2202
+ stroke="#43A047"
2203
+ stroke-width="2"
2204
+ />
2205
+ </svg>
1980
2206
  `),
1981
2207
  'subscript-template-image': makeToolbarIconImage(`
1982
2208
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
@@ -1985,11 +2211,39 @@ const TOOLBAR_ICON_IMAGES = {
1985
2211
  </svg>
1986
2212
  `),
1987
2213
  'nth-root-template-image': makeToolbarIconImage(`
1988
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
1989
- <rect x="1.8" y="2.1" width="2.7" height="3.3" rx="0.35" fill="none" stroke="#2c8a43" stroke-width="1.15"/>
1990
- <path d="M2 10.3H4L5.7 14.1L8.2 4.3H15.5" fill="none" stroke="#2c8a43" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
1991
- <rect x="9.8" y="5.1" width="4.3" height="6.6" rx="0.55" fill="none" stroke="#2c8a43" stroke-width="1.4"/>
1992
- </svg>
2214
+ <svg width="48" height="32" viewBox="0 0 48 32" xmlns="http://www.w3.org/2000/svg">
2215
+ <!-- index placeholder -->
2216
+ <rect
2217
+ x="11"
2218
+ y="6"
2219
+ width="6"
2220
+ height="8"
2221
+ fill="none"
2222
+ stroke="#43A047"
2223
+ stroke-width="2"
2224
+ />
2225
+
2226
+ <!-- radical sign -->
2227
+ <path
2228
+ d="M10 18 L17 25 L24 4 L44 4"
2229
+ fill="none"
2230
+ stroke="#222"
2231
+ stroke-width="2.5"
2232
+ stroke-linecap="round"
2233
+ stroke-linejoin="round"
2234
+ />
2235
+
2236
+ <!-- radicand placeholder -->
2237
+ <rect
2238
+ x="30"
2239
+ y="9"
2240
+ width="10"
2241
+ height="13"
2242
+ fill="none"
2243
+ stroke="#43A047"
2244
+ stroke-width="2"
2245
+ />
2246
+ </svg>
1993
2247
  `),
1994
2248
  'slash-fraction-template-image': makeToolbarIconImage(`
1995
2249
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 32" fill="none">
@@ -2000,259 +2254,305 @@ const TOOLBAR_ICON_IMAGES = {
2000
2254
  `),
2001
2255
  'right-sup-sub-template-image': makeToolbarIconImage(`
2002
2256
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
2003
- <rect x="8" y="10" width="10" height="14" stroke="#008000" stroke-width="1.5"/>
2004
- <rect x="20" y="2" width="8" height="10" stroke="#008000" stroke-width="1.5" opacity="0.5"/>
2005
- <rect x="20" y="20" width="8" height="10" stroke="#008000" stroke-width="1.5" opacity="0.5"/>
2257
+ <rect x="8" y="10" width="10" height="14" stroke="#008000" stroke-width="2.5"/>
2258
+ <rect x="20" y="2" width="8" height="10" stroke="#008000" stroke-width="2.5" opacity="1"/>
2259
+ <rect x="20" y="20" width="8" height="10" stroke="#008000" stroke-width="2.5" opacity="1"/>
2006
2260
  </svg>
2007
2261
  `),
2008
2262
  'left-sup-template-image': makeToolbarIconImage(`
2009
2263
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
2010
- <rect x="4" y="2" width="8" height="10" stroke="#008000" stroke-width="1.5" opacity="0.5"/>
2011
- <rect x="16" y="10" width="10" height="14" stroke="#008000" stroke-width="1.5"/>
2264
+ <rect x="4" y="2" width="8" height="10" stroke="#008000" stroke-width="2.5" opacity="1"/>
2265
+ <rect x="16" y="10" width="10" height="14" stroke="#008000" stroke-width="2.5"/>
2012
2266
  </svg>
2013
2267
  `),
2014
2268
  'left-sub-template-image': makeToolbarIconImage(`
2015
2269
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
2016
- <rect x="16" y="6" width="10" height="14" stroke="#008000" stroke-width="1.5"/>
2017
- <rect x="4" y="18" width="8" height="10" stroke="#008000" stroke-width="1.5" opacity="0.5"/>
2270
+ <rect x="16" y="6" width="10" height="14" stroke="#008000" stroke-width="2.5"/>
2271
+ <rect x="4" y="18" width="8" height="10" stroke="#008000" stroke-width="2.5" opacity="1"/>
2018
2272
  </svg>
2019
2273
  `),
2020
2274
  'left-sup-sub-template-image': makeToolbarIconImage(`
2021
2275
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 36" fill="none">
2022
- <rect x="4" y="2" width="8" height="10" stroke="#008000" stroke-width="1.5" opacity="0.5"/>
2023
- <rect x="4" y="22" width="8" height="10" stroke="#008000" stroke-width="1.5" opacity="0.5"/>
2024
- <rect x="16" y="10" width="10" height="14" stroke="#008000" stroke-width="1.5"/>
2276
+ <rect x="4" y="2" width="8" height="10" stroke="#008000" stroke-width="2.5" opacity="1"/>
2277
+ <rect x="4" y="22" width="8" height="10" stroke="#008000" stroke-width="2.5" opacity="1"/>
2278
+ <rect x="16" y="10" width="10" height="14" stroke="#008000" stroke-width="2.5"/>
2025
2279
  </svg>
2026
2280
  `),
2027
2281
  'overset-template-image': makeToolbarIconImage(`
2028
2282
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 40" fill="none">
2029
- <rect x="10" y="2" width="10" height="10" stroke="#008000" stroke-width="1.5" opacity="0.5"/>
2030
- <rect x="8" y="18" width="14" height="14" stroke="#008000" stroke-width="1.5"/>
2283
+ <rect x="10" y="2" width="10" height="10" stroke="#008000" stroke-width="2.5" opacity="1"/>
2284
+ <rect x="8" y="18" width="14" height="14" stroke="#008000" stroke-width="2.5"/>
2031
2285
  </svg>
2032
2286
  `),
2033
2287
  'underset-template-image': makeToolbarIconImage(`
2034
2288
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 40" fill="none">
2035
- <rect x="8" y="6" width="14" height="14" stroke="#008000" stroke-width="1.5"/>
2036
- <rect x="10" y="28" width="10" height="10" stroke="#008000" stroke-width="1.5" opacity="0.5"/>
2289
+ <rect x="8" y="6" width="14" height="14" stroke="#008000" stroke-width="2.5"/>
2290
+ <rect x="10" y="28" width="10" height="10" stroke="#008000" stroke-width="2.5" opacity="1"/>
2037
2291
  </svg>
2038
2292
  `),
2039
2293
  'over-under-template-image': makeToolbarIconImage(`
2040
2294
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 52" fill="none">
2041
- <rect x="10" y="2" width="10" height="10" stroke="#008000" stroke-width="1.5" opacity="0.5"/>
2042
- <rect x="8" y="18" width="14" height="14" stroke="#008000" stroke-width="1.5"/>
2043
- <rect x="10" y="40" width="10" height="10" stroke="#008000" stroke-width="1.5" opacity="0.5"/>
2295
+ <rect x="10" y="2" width="10" height="10" stroke="#008000" stroke-width="2.5" opacity="1"/>
2296
+ <rect x="8" y="18" width="14" height="14" stroke="#008000" stroke-width="2.5"/>
2297
+ <rect x="10" y="40" width="10" height="10" stroke="#008000" stroke-width="2.5" opacity="1"/>
2044
2298
  </svg>
2045
2299
  `),
2046
2300
  'underbrace-template-image': makeToolbarIconImage(`
2047
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 64" fill="none">
2048
- <rect x="10" y="2" width="12" height="18" stroke="#008000" stroke-width="1.5"/>
2049
- <path d="M4 30 C8 38,14 38,16 34 C18 38,24 38,28 30" stroke="#000" stroke-width="2" fill="none"/>
2050
- <rect x="10" y="44" width="12" height="18" stroke="#008000" stroke-width="1.5" opacity="0.6"/>
2051
- </svg>
2301
+ <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" viewBox="0 0 40 32">
2302
+ <!-- Base -->
2303
+ <rect x="14" y="1" width="11" height="10"
2304
+ fill="none" stroke="#2ca02c" stroke-width="2"/>
2305
+
2306
+ <!-- Underbrace -->
2307
+ <path d="M6 18
2308
+ C10 18,10 14,14 14
2309
+ C18 14,18 18,20 18
2310
+ C22 18,22 14,26 14
2311
+ C30 14,30 18,34 18"
2312
+ fill="none"
2313
+ stroke="#111"
2314
+ stroke-width="1.5"
2315
+ stroke-linecap="round"/>
2316
+
2317
+ <!-- Underscript -->
2318
+ <rect x="16" y="24" width="8" height="7"
2319
+ fill="none" stroke="#2ca02c" stroke-width="1.5"/>
2320
+ </svg>
2052
2321
  `),
2053
2322
  'overbrace-template-image': makeToolbarIconImage(`
2054
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 64" fill="none">
2055
- <rect x="10" y="2" width="12" height="18" stroke="#008000" stroke-width="1.5" opacity="0.6"/>
2056
- <path d="M4 34 C8 26,14 26,16 30 C18 26,24 26,28 34" stroke="#000" stroke-width="2" fill="none"/>
2057
- <rect x="10" y="44" width="12" height="18" stroke="#008000" stroke-width="1.5"/>
2058
- </svg>
2323
+ <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" viewBox="0 0 40 32">
2324
+ <!-- Overscript -->
2325
+ <rect x="16" y="1" width="8" height="7"
2326
+ fill="none" stroke="#2ca02c" stroke-width="1.5"/>
2327
+
2328
+ <!-- Overbrace -->
2329
+ <path d="M6 14
2330
+ C10 14,10 18,14 18
2331
+ C18 18,18 14,20 14
2332
+ C22 14,22 18,26 18
2333
+ C30 18,30 14,34 14"
2334
+ fill="none"
2335
+ stroke="#111"
2336
+ stroke-width="1.5"
2337
+ stroke-linecap="round"/>
2338
+
2339
+ <!-- Base -->
2340
+ <rect x="15" y="21" width="11" height="10"
2341
+ fill="none" stroke="#2ca02c" stroke-width="2"/>
2342
+ </svg>
2059
2343
  `),
2060
2344
  'overbrace-arc-template-image': makeToolbarIconImage(`
2061
2345
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="none">
2062
- <path d="M8 10 C8 6,12 6,16 6 C20 6,20 2,20 2 C20 2,20 6,24 6 C28 6,32 6,32 10" stroke="#666" stroke-width="2"/>
2063
- <rect x="15" y="16" width="10" height="16" stroke="#1b8f3a" stroke-width="2"/>
2346
+ <path d="M8 10 C8 6,12 6,16 6 C20 6,20 2,20 2 C20 2,20 6,24 6 C28 6,32 6,32 10" stroke="#000000" stroke-width="2"/>
2347
+ <rect x="15" y="16" width="10" height="16" stroke="#1b8f3a" stroke-width="3"/>
2064
2348
  </svg>
2065
2349
  `),
2066
2350
  'overparen-template-image': makeToolbarIconImage(`
2067
2351
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="none">
2068
- <path d="M8 10 Q20 2 32 10" stroke="#666" stroke-width="2"/>
2069
- <rect x="15" y="16" width="10" height="16" stroke="#1b8f3a" stroke-width="2"/>
2352
+ <path d="M8 10 Q20 2 32 10" stroke="#000000" stroke-width="2"/>
2353
+ <rect x="15" y="16" width="10" height="16" stroke="#1b8f3a" stroke-width="3"/>
2070
2354
  </svg>
2071
2355
  `),
2072
2356
  'underbrace-arc-template-image': makeToolbarIconImage(`
2073
2357
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="none">
2074
- <rect x="15" y="6" width="10" height="16" stroke="#1b8f3a" stroke-width="2"/>
2075
- <path d="M8 30 C8 34,12 34,16 34 C20 34,20 38,20 38 C20 38,20 34,24 34 C28 34,32 34,32 30" stroke="#666" stroke-width="2"/>
2076
- </svg>
2358
+ <rect x="15" y="6" width="10" height="16" stroke="#1b8f3a" stroke-width="3"/>
2359
+ <path d="M8 30 C8 34,12 34,16 34 C20 34,20 38,20 38 C20 38,20 34,24 34 C28 34,32 34,32 30" stroke="#000000" stroke-width="2"/>
2360
+ </svg>
2077
2361
  `),
2078
2362
  'underparen-template-image': makeToolbarIconImage(`
2079
2363
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="none">
2080
- <rect x="15" y="6" width="10" height="16" stroke="#1b8f3a" stroke-width="2"/>
2081
- <path d="M8 30 Q20 38 32 30" stroke="#666" stroke-width="2"/>
2364
+ <rect x="15" y="6" width="10" height="16" stroke="#1b8f3a" stroke-width="3"/>
2365
+ <path d="M8 30 Q20 38 32 30" stroke="#000000" stroke-width="2"/>
2082
2366
  </svg>
2083
2367
  `),
2084
2368
  'vec-accent-template-image': makeToolbarIconImage(`
2085
2369
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="none">
2086
- <path d="M10 10 H26" stroke="#666" stroke-width="2"/>
2087
- <path d="M22 6 L30 10 L22 14" stroke="#666" stroke-width="2" fill="none"/>
2088
- <rect x="15" y="18" width="10" height="16" stroke="#1b8f3a" stroke-width="2"/>
2370
+ <path d="M10 10 H26" stroke="#000000" stroke-width="2"/>
2371
+ <path d="M22 6 L30 10 L22 14" stroke="#000000" stroke-width="2" fill="none"/>
2372
+ <rect x="15" y="18" width="10" height="16" stroke="#1b8f3a" stroke-width="3"/>
2089
2373
  </svg>
2090
2374
  `),
2091
2375
  'overrightarrow-accent-template-image': makeToolbarIconImage(`
2092
2376
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="none">
2093
- <path d="M8 10 H30" stroke="#666" stroke-width="2"/>
2094
- <path d="M26 6 L34 10 L26 14" stroke="#666" stroke-width="2" fill="none"/>
2095
- <rect x="15" y="18" width="10" height="16" stroke="#1b8f3a" stroke-width="2"/>
2377
+ <path d="M8 10 H30" stroke="#000000" stroke-width="2"/>
2378
+ <path d="M26 6 L34 10 L26 14" stroke="#000000" stroke-width="2" fill="none"/>
2379
+ <rect x="15" y="18" width="10" height="16" stroke="#1b8f3a" stroke-width="3"/>
2096
2380
  </svg>
2097
2381
  `),
2098
2382
  'overleftrightarrow-accent-template-image': makeToolbarIconImage(`
2099
2383
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="none">
2100
- <path d="M8 10 H32" stroke="#666" stroke-width="2"/>
2101
- <path d="M12 6 L4 10 L12 14" stroke="#666" stroke-width="2" fill="none"/>
2102
- <path d="M28 6 L36 10 L28 14" stroke="#666" stroke-width="2" fill="none"/>
2103
- <rect x="15" y="18" width="10" height="16" stroke="#1b8f3a" stroke-width="2"/>
2384
+ <path d="M8 10 H32" stroke="#000000" stroke-width="2"/>
2385
+ <path d="M12 6 L4 10 L12 14" stroke="#000000" stroke-width="2" fill="none"/>
2386
+ <path d="M28 6 L36 10 L28 14" stroke="#000000" stroke-width="2" fill="none"/>
2387
+ <rect x="15" y="18" width="10" height="16" stroke="#1b8f3a" stroke-width="3"/>
2104
2388
  </svg>
2105
2389
  `),
2106
2390
  'overline-accent-template-image': makeToolbarIconImage(`
2107
2391
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="none">
2108
- <line x1="10" y1="10" x2="30" y2="10" stroke="#666" stroke-width="2"/>
2109
- <rect x="15" y="18" width="10" height="16" stroke="#1b8f3a" stroke-width="2"/>
2392
+ <line x1="10" y1="10" x2="30" y2="10" stroke="#000000" stroke-width="2"/>
2393
+ <rect x="15" y="18" width="10" height="16" stroke="#1b8f3a" stroke-width="3"/>
2110
2394
  </svg>
2111
2395
  `),
2112
2396
  'hat-accent-template-image': makeToolbarIconImage(`
2113
2397
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="none">
2114
- <path d="M12 12 L20 6 L28 12" stroke="#666" stroke-width="2" fill="none"/>
2115
- <rect x="15" y="18" width="10" height="16" stroke="#1b8f3a" stroke-width="2"/>
2398
+ <path d="M12 12 L20 6 L28 12" stroke="#000000" stroke-width="2" fill="none"/>
2399
+ <rect x="15" y="18" width="10" height="16" stroke="#1b8f3a" stroke-width="3"/>
2116
2400
  </svg>
2117
2401
  `),
2118
2402
  'tilde-accent-template-image': makeToolbarIconImage(`
2119
2403
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="none">
2120
- <path d="M10 11 C14 6,18 16,22 11 C26 6,30 16,34 11" stroke="#666" stroke-width="2" fill="none"/>
2121
- <rect x="15" y="18" width="10" height="16" stroke="#1b8f3a" stroke-width="2"/>
2404
+ <path d="M10 11 C14 6,18 16,22 11 C26 6,30 16,34 11" stroke="#000000" stroke-width="2" fill="none"/>
2405
+ <rect x="15" y="18" width="10" height="16" stroke="#1b8f3a" stroke-width="3"/>
2122
2406
  </svg>
2123
2407
  `),
2124
2408
  'ddot-accent-template-image': makeToolbarIconImage(`
2125
2409
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="none">
2126
- <circle cx="16" cy="10" r="2" fill="#666"/>
2127
- <circle cx="24" cy="10" r="2" fill="#666"/>
2128
- <rect x="15" y="18" width="10" height="16" stroke="#1b8f3a" stroke-width="2"/>
2410
+ <circle cx="16" cy="10" r="2" fill="#000000"/>
2411
+ <circle cx="24" cy="10" r="2" fill="#000000"/>
2412
+ <rect x="15" y="18" width="10" height="16" stroke="#1b8f3a" stroke-width="3"/>
2129
2413
  </svg>
2130
2414
  `),
2131
2415
  'dot-accent-template-image': makeToolbarIconImage(`
2132
2416
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="none">
2133
- <circle cx="20" cy="10" r="2" fill="#666"/>
2134
- <rect x="15" y="18" width="10" height="16" stroke="#1b8f3a" stroke-width="2"/>
2417
+ <circle cx="20" cy="10" r="2" fill="#000000"/>
2418
+ <rect x="15" y="18" width="10" height="16" stroke="#1b8f3a" stroke-width="3"/>
2135
2419
  </svg>
2136
2420
  `),
2137
2421
  'overline-frame-template-image': makeToolbarIconImage(`
2138
2422
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 40" fill="none">
2139
- <line x1="8" y1="8" x2="40" y2="8" stroke="#666" stroke-width="2"/>
2140
- <rect x="18" y="14" width="12" height="16" stroke="#1b8f3a" stroke-width="2"/>
2423
+ <line x1="8" y1="8" x2="40" y2="8" stroke="#000000" stroke-width="2"/>
2424
+ <rect x="18" y="14" width="12" height="16" stroke="#1b8f3a" stroke-width="3"/>
2141
2425
  </svg>
2142
2426
  `),
2143
2427
  'left-bar-template-image': makeToolbarIconImage(`
2144
2428
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 40" fill="none">
2145
- <line x1="12" y1="6" x2="12" y2="34" stroke="#666" stroke-width="2"/>
2146
- <rect x="18" y="12" width="12" height="16" stroke="#1b8f3a" stroke-width="2"/>
2429
+ <line x1="12" y1="6" x2="12" y2="34" stroke="#000000" stroke-width="2"/>
2430
+ <rect x="18" y="12" width="12" height="16" stroke="#1b8f3a" stroke-width="3"/>
2147
2431
  </svg>
2148
2432
  `),
2149
2433
  'boxed-square-template-image': makeToolbarIconImage(`
2150
2434
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 40" fill="none">
2151
- <rect x="10" y="6" width="28" height="28" stroke="#666" stroke-width="2"/>
2152
- <rect x="18" y="12" width="12" height="16" stroke="#1b8f3a" stroke-width="2"/>
2435
+ <rect x="10" y="6" width="28" height="28" stroke="#000000" stroke-width="2"/>
2436
+ <rect x="18" y="12" width="12" height="16" stroke="#1b8f3a" stroke-width="3"/>
2153
2437
  </svg>
2154
2438
  `),
2155
2439
  'underline-frame-template-image': makeToolbarIconImage(`
2156
2440
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 40" fill="none">
2157
- <rect x="18" y="8" width="12" height="16" stroke="#1b8f3a" stroke-width="2"/>
2158
- <line x1="8" y1="30" x2="40" y2="30" stroke="#666" stroke-width="2"/>
2441
+ <rect x="18" y="8" width="12" height="16" stroke="#1b8f3a" stroke-width="3"/>
2442
+ <line x1="8" y1="30" x2="40" y2="30" stroke="#000000" stroke-width="2"/>
2159
2443
  </svg>
2160
2444
  `),
2161
2445
  'right-bar-template-image': makeToolbarIconImage(`
2162
2446
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 40" fill="none">
2163
- <rect x="18" y="12" width="12" height="16" stroke="#1b8f3a" stroke-width="2"/>
2164
- <line x1="36" y1="6" x2="36" y2="34" stroke="#666" stroke-width="2"/>
2447
+ <rect x="18" y="12" width="12" height="16" stroke="#1b8f3a" stroke-width="3"/>
2448
+ <line x1="36" y1="6" x2="36" y2="34" stroke="#000000" stroke-width="2"/>
2165
2449
  </svg>
2166
2450
  `),
2167
2451
  'paren-frame-template-image': makeToolbarIconImage(`
2168
2452
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 40" fill="none">
2169
- <ellipse cx="24" cy="20" rx="16" ry="14" stroke="#666" stroke-width="2"/>
2170
- <rect x="18" y="12" width="12" height="16" stroke="#1b8f3a" stroke-width="2"/>
2453
+ <ellipse cx="24" cy="20" rx="16" ry="14" stroke="#000000" stroke-width="2"/>
2454
+ <rect x="18" y="12" width="12" height="16" stroke="#1b8f3a" stroke-width="3"/>
2171
2455
  </svg>
2172
2456
  `),
2173
2457
  'overline-right-bar-template-image': makeToolbarIconImage(`
2174
2458
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 40" fill="none">
2175
- <line x1="10" y1="8" x2="36" y2="8" stroke="#666" stroke-width="2"/>
2176
- <line x1="36" y1="8" x2="36" y2="32" stroke="#666" stroke-width="2"/>
2177
- <rect x="18" y="12" width="12" height="16" stroke="#1b8f3a" stroke-width="2"/>
2459
+ <line x1="10" y1="8" x2="36" y2="8" stroke="#000000" stroke-width="2"/>
2460
+ <line x1="36" y1="8" x2="36" y2="32" stroke="#000000" stroke-width="2"/>
2461
+ <rect x="18" y="12" width="12" height="16" stroke="#1b8f3a" stroke-width="3"/>
2178
2462
  </svg>
2179
2463
  `),
2180
2464
  'boxed-rounded-template-image': makeToolbarIconImage(`
2181
2465
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 40" fill="none">
2182
- <rect x="10" y="6" width="28" height="28" rx="6" ry="6" stroke="#666" stroke-width="2"/>
2183
- <rect x="18" y="12" width="12" height="16" stroke="#1b8f3a" stroke-width="2"/>
2466
+ <rect x="10" y="6" width="28" height="28" rx="6" ry="6" stroke="#000000" stroke-width="2"/>
2467
+ <rect x="18" y="12" width="12" height="16" stroke="#1b8f3a" stroke-width="3"/>
2184
2468
  </svg>
2185
2469
  `),
2186
2470
  'cancel-diagonal-template-image': makeToolbarIconImage(`
2187
2471
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 40" fill="none">
2188
- <line x1="10" y1="30" x2="50" y2="10" stroke="#666" stroke-width="2"/>
2189
- <rect x="22" y="12" width="16" height="16" stroke="#1b8f3a" stroke-width="2"/>
2472
+ <line x1="10" y1="30" x2="50" y2="10" stroke="#000000" stroke-width="2"/>
2473
+ <rect x="22" y="12" width="16" height="16" stroke="#1b8f3a" stroke-width="3"/>
2190
2474
  </svg>
2191
2475
  `),
2192
2476
  'sout-template-image': makeToolbarIconImage(`
2193
2477
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 40" fill="none">
2194
- <line x1="8" y1="20" x2="52" y2="20" stroke="#666" stroke-width="2"/>
2195
- <rect x="22" y="12" width="16" height="16" stroke="#1b8f3a" stroke-width="2"/>
2478
+ <line x1="8" y1="20" x2="52" y2="20" stroke="#000000" stroke-width="2"/>
2479
+ <rect x="22" y="12" width="16" height="16" stroke="#1b8f3a" stroke-width="3"/>
2196
2480
  </svg>
2197
2481
  `),
2198
2482
  'bcancel-template-image': makeToolbarIconImage(`
2199
2483
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 40" fill="none">
2200
- <line x1="10" y1="10" x2="50" y2="30" stroke="#666" stroke-width="2"/>
2201
- <rect x="22" y="12" width="16" height="16" stroke="#1b8f3a" stroke-width="2"/>
2484
+ <line x1="10" y1="10" x2="50" y2="30" stroke="#000000" stroke-width="2"/>
2485
+ <rect x="22" y="12" width="16" height="16" stroke="#1b8f3a" stroke-width="3"/>
2202
2486
  </svg>
2203
2487
  `),
2204
2488
  'xcancel-template-image': makeToolbarIconImage(`
2205
2489
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 40" fill="none">
2206
- <line x1="10" y1="10" x2="50" y2="30" stroke="#666" stroke-width="2"/>
2207
- <line x1="10" y1="30" x2="50" y2="10" stroke="#666" stroke-width="2"/>
2208
- <rect x="22" y="12" width="16" height="16" stroke="#1b8f3a" stroke-width="2"/>
2490
+ <line x1="10" y1="10" x2="50" y2="30" stroke="#000000" stroke-width="2"/>
2491
+ <line x1="10" y1="30" x2="50" y2="10" stroke="#000000" stroke-width="2"/>
2492
+ <rect x="22" y="12" width="16" height="16" stroke="#1b8f3a" stroke-width="3"/>
2209
2493
  </svg>
2210
2494
  `),
2211
2495
  'vertical-strike-template-image': makeToolbarIconImage(`
2212
2496
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 40" fill="none">
2213
- <line x1="30" y1="6" x2="30" y2="34" stroke="#666" stroke-width="2"/>
2214
- <rect x="22" y="12" width="16" height="16" stroke="#1b8f3a" stroke-width="2"/>
2497
+ <line x1="30" y1="6" x2="30" y2="34" stroke="#000000" stroke-width="2"/>
2498
+ <rect x="22" y="12" width="16" height="16" stroke="#1b8f3a" stroke-width="3"/>
2215
2499
  </svg>
2216
2500
  `),
2217
2501
  'overline-left-curve-template-image': makeToolbarIconImage(`
2218
2502
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 40" fill="none">
2219
- <path d="M16 8 Q8 14 8 20 Q8 26 16 32" stroke="#666" stroke-width="2" fill="none"/>
2220
- <line x1="16" y1="8" x2="52" y2="8" stroke="#666" stroke-width="2"/>
2221
- <rect x="24" y="12" width="16" height="16" stroke="#1b8f3a" stroke-width="2"/>
2503
+ <path d="M16 8 Q8 14 8 20 Q8 26 16 32" stroke="#000000" stroke-width="2" fill="none"/>
2504
+ <line x1="16" y1="8" x2="52" y2="8" stroke="#000000" stroke-width="2"/>
2505
+ <rect x="24" y="12" width="16" height="16" stroke="#1b8f3a" stroke-width="3"/>
2222
2506
  </svg>
2223
2507
  `),
2224
2508
  'crosshair-strike-template-image': makeToolbarIconImage(`
2225
2509
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 40" fill="none">
2226
- <line x1="8" y1="20" x2="52" y2="20" stroke="#666" stroke-width="2"/>
2227
- <line x1="30" y1="6" x2="30" y2="34" stroke="#666" stroke-width="2"/>
2228
- <rect x="22" y="12" width="16" height="16" stroke="#1b8f3a" stroke-width="2"/>
2510
+ <line x1="8" y1="20" x2="52" y2="20" stroke="#000000" stroke-width="2"/>
2511
+ <line x1="30" y1="6" x2="30" y2="34" stroke="#000000" stroke-width="2"/>
2512
+ <rect x="22" y="12" width="16" height="16" stroke="#1b8f3a" stroke-width="3"/>
2229
2513
  </svg>
2230
2514
  `),
2231
2515
  'operator-limits-both-template-image': makeToolbarIconImage(`
2232
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 90" fill="none">
2233
- <rect x="24" y="2" width="12" height="20" stroke="#5f9f5f" stroke-width="2"/>
2234
- <rect x="10" y="30" width="40" height="40" stroke="#000" stroke-width="3"/>
2235
- <rect x="24" y="78" width="12" height="20" stroke="#5f9f5f" stroke-width="2"/>
2236
- </svg>
2516
+ <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" viewBox="0 0 40 32">
2517
+ <rect x="14" y="8" width="12" height="16"
2518
+ fill="none" stroke="#111" stroke-width="2"/>
2519
+
2520
+ <rect x="17" y="1" width="5" height="6"
2521
+ fill="none" stroke="#2ca02c" stroke-width="1.5"/>
2522
+
2523
+ <rect x="17" y="25" width="5" height="6"
2524
+ fill="none" stroke="#2ca02c" stroke-width="1.5"/>
2525
+ </svg>
2237
2526
  `),
2238
2527
  'operator-lower-limit-template-image': makeToolbarIconImage(`
2239
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 90" fill="none">
2240
- <rect x="10" y="30" width="40" height="40" stroke="#000" stroke-width="3"/>
2241
- <rect x="24" y="78" width="12" height="20" stroke="#5f9f5f" stroke-width="2"/>
2242
- </svg>
2528
+ <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" viewBox="0 0 40 32">
2529
+ <rect x="14" y="6" width="12" height="15"
2530
+ fill="none" stroke="#111" stroke-width="2"/>
2531
+
2532
+ <rect x="17" y="26" width="5" height="5"
2533
+ fill="none" stroke="#2ca02c" stroke-width="1.5"/>
2534
+ </svg>
2243
2535
  `),
2244
2536
  'operator-right-sup-sub-template-image': makeToolbarIconImage(`
2245
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 90" fill="none">
2246
- <rect x="10" y="30" width="40" height="40" stroke="#000" stroke-width="3"/>
2247
- <rect x="55" y="8" width="12" height="20" stroke="#5f9f5f" stroke-width="2"/>
2248
- <rect x="55" y="62" width="12" height="20" stroke="#5f9f5f" stroke-width="2"/>
2249
- </svg>
2537
+ <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" viewBox="0 0 40 32">
2538
+ <rect x="12" y="4" width="16" height="24"
2539
+ fill="none" stroke="#111" stroke-width="2"/>
2540
+
2541
+ <rect x="30" y="1" width="6" height="8"
2542
+ fill="none" stroke="#2ca02c" stroke-width="1.5"/>
2543
+
2544
+ <rect x="30" y="21" width="6" height="8"
2545
+ fill="none" stroke="#2ca02c" stroke-width="1.5"/>
2546
+ </svg>
2250
2547
  `),
2251
2548
  'operator-right-sub-template-image': makeToolbarIconImage(`
2252
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 90" fill="none">
2253
- <rect x="10" y="30" width="40" height="40" stroke="#000" stroke-width="3"/>
2254
- <rect x="55" y="62" width="12" height="20" stroke="#5f9f5f" stroke-width="2"/>
2255
- </svg>
2549
+ <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" viewBox="0 0 40 32">
2550
+ <rect x="12" y="4" width="16" height="24"
2551
+ fill="none" stroke="#111" stroke-width="2"/>
2552
+
2553
+ <rect x="30" y="22" width="6" height="8"
2554
+ fill="none" stroke="#2ca02c" stroke-width="1.5"/>
2555
+ </svg>
2256
2556
  `),
2257
2557
  'hphantom-space-template-image': makeToolbarIconImage(`
2258
2558
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 32" fill="none">
@@ -2306,56 +2606,114 @@ const TOOLBAR_ICON_IMAGES = {
2306
2606
  </svg>
2307
2607
  `),
2308
2608
  'sum-limits-both-template-image': makeToolbarIconImage(`
2309
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 90" fill="none">
2310
- <rect x="24" y="2" width="12" height="20" stroke="#6aa56a" stroke-width="2"/>
2311
- <text x="30" y="58" font-size="64" text-anchor="middle" fill="#000">∑</text>
2312
- <rect x="24" y="72" width="12" height="20" stroke="#6aa56a" stroke-width="2"/>
2313
- </svg>
2609
+ <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" viewBox="0 0 40 32">
2610
+ <!-- Upper box -->
2611
+ <rect x="17" y="1" width="6" height="4"
2612
+ fill="none" stroke="#2ca02c" stroke-width="1.5"/>
2613
+
2614
+ <!-- Small summation -->
2615
+ <text x="14" y="20"
2616
+ font-family="Cambria Math, Times New Roman, serif"
2617
+ font-size="16"
2618
+ fill="#111">∑</text>
2619
+
2620
+ <!-- Lower box -->
2621
+ <rect x="17" y="25" width="6" height="4"
2622
+ fill="none" stroke="#2ca02c" stroke-width="1.5"/>
2623
+ </svg>
2314
2624
  `),
2315
2625
  'sum-right-both-template-image': makeToolbarIconImage(`
2316
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 72" fill="none">
2317
- <text x="20" y="52" font-size="54" fill="#000">∑</text>
2318
- <rect x="50" y="6" width="10" height="18" stroke="#6aa56a" stroke-width="2"/>
2319
- <rect x="50" y="46" width="10" height="18" stroke="#6aa56a" stroke-width="2"/>
2320
- </svg>
2626
+ <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" viewBox="0 0 40 32">
2627
+ <text x="6" y="22"
2628
+ font-family="Cambria Math, Times New Roman, serif"
2629
+ font-size="24"
2630
+ fill="#111">∑</text>
2631
+
2632
+ <rect x="28" y="4" width="8" height="8"
2633
+ fill="none" stroke="#2ca02c" stroke-width="1.5"/>
2634
+
2635
+ <rect x="28" y="20" width="8" height="8"
2636
+ fill="none" stroke="#2ca02c" stroke-width="1.5"/>
2637
+ </svg>
2321
2638
  `),
2322
2639
  'sum-limits-lower-template-image': makeToolbarIconImage(`
2323
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 90" fill="none">
2324
- <text x="30" y="58" font-size="64" text-anchor="middle" fill="#000">∑</text>
2325
- <rect x="24" y="72" width="12" height="20" stroke="#6aa56a" stroke-width="2"/>
2326
- </svg>
2640
+ <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" viewBox="0 0 40 32">
2641
+ <!-- Small summation -->
2642
+ <text x="15" y="16"
2643
+ font-family="Cambria Math, Times New Roman, serif"
2644
+ font-size="16"
2645
+ fill="#111">∑</text>
2646
+
2647
+ <!-- Lower box -->
2648
+ <rect x="18" y="24"
2649
+ width="6" height="4"
2650
+ fill="none"
2651
+ stroke="#2ca02c"
2652
+ stroke-width="1.5"/>
2653
+ </svg>
2327
2654
  `),
2328
2655
  'sum-right-lower-template-image': makeToolbarIconImage(`
2329
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 90" fill="none">
2330
- <text x="26" y="58" font-size="64" text-anchor="middle" fill="#000">∑</text>
2331
- <rect x="50" y="58" width="12" height="20" stroke="#6aa56a" stroke-width="2"/>
2332
- </svg>
2656
+ <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" viewBox="0 0 40 32">
2657
+ <text x="6" y="22"
2658
+ font-family="Cambria Math, Times New Roman, serif"
2659
+ font-size="24"
2660
+ fill="#111">∑</text>
2661
+
2662
+ <rect x="28" y="20" width="8" height="8"
2663
+ fill="none" stroke="#2ca02c" stroke-width="1.5"/>
2664
+ </svg>
2333
2665
  `),
2334
2666
  'prod-limits-both-template-image': makeToolbarIconImage(`
2335
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 96" fill="none">
2336
- <rect x="27" y="2" width="10" height="18" stroke="#6aa56a" stroke-width="2"/>
2337
- <text x="12" y="62" font-size="58" font-family="Times New Roman" fill="#000">∏</text>
2338
- <rect x="27" y="74" width="10" height="18" stroke="#6aa56a" stroke-width="2"/>
2339
- </svg>
2667
+ <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" viewBox="0 0 40 32">
2668
+ <rect x="18" y="1" width="6" height="4"
2669
+ fill="none" stroke="#2ca02c" stroke-width="1.5"/>
2670
+
2671
+ <text x="14" y="20"
2672
+ font-family="Cambria Math, Times New Roman, serif"
2673
+ font-size="16"
2674
+ fill="#111">∏</text>
2675
+
2676
+ <rect x="18" y="25" width="6" height="4"
2677
+ fill="none" stroke="#2ca02c" stroke-width="1.5"/>
2678
+ </svg>
2340
2679
  `),
2341
2680
  'prod-limits-lower-template-image': makeToolbarIconImage(`
2342
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 96" fill="none">
2343
- <text x="12" y="62" font-size="58" font-family="Times New Roman" fill="#000">∏</text>
2344
- <rect x="27" y="74" width="10" height="18" stroke="#6aa56a" stroke-width="2"/>
2345
- </svg>
2681
+ <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" viewBox="0 0 40 32">
2682
+ <text x="14" y="16"
2683
+ font-family="Cambria Math, Times New Roman, serif"
2684
+ font-size="18"
2685
+ fill="#111">∏</text>
2686
+
2687
+ <rect x="18" y="25" width="6" height="4"
2688
+ fill="none" stroke="#2ca02c" stroke-width="1.5"/>
2689
+ </svg>
2346
2690
  `),
2347
2691
  'prod-right-lower-template-image': makeToolbarIconImage(`
2348
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" fill="none">
2349
- <text x="12" y="54" font-size="58" font-family="Times New Roman" fill="#000">∏</text>
2350
- <rect x="52" y="44" width="10" height="18" stroke="#6aa56a" stroke-width="2"/>
2351
- </svg>
2692
+ <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" viewBox="0 0 40 32">
2693
+ <text x="6" y="22"
2694
+ font-family="Cambria Math, Times New Roman, serif"
2695
+ font-size="22"
2696
+ fill="#111">∏</text>
2697
+
2698
+ <rect x="28" y="20" width="8" height="8"
2699
+ fill="none"
2700
+ stroke="#2ca02c"
2701
+ stroke-width="1.5"/>
2702
+ </svg>
2352
2703
  `),
2353
2704
  'prod-right-both-template-image': makeToolbarIconImage(`
2354
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" fill="none">
2355
- <text x="10" y="54" font-size="58" fill="#000">∏</text>
2356
- <rect x="52" y="6" width="10" height="18" stroke="#6aa56a" stroke-width="2"/>
2357
- <rect x="52" y="44" width="10" height="18" stroke="#6aa56a" stroke-width="2"/>
2358
- </svg>
2705
+ <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" viewBox="0 0 40 32">
2706
+ <text x="6" y="22"
2707
+ font-family="Cambria Math, Times New Roman, serif"
2708
+ font-size="22"
2709
+ fill="#111">∏</text>
2710
+
2711
+ <rect x="28" y="4" width="8" height="8"
2712
+ fill="none" stroke="#2ca02c" stroke-width="1.5"/>
2713
+
2714
+ <rect x="28" y="20" width="8" height="8"
2715
+ fill="none" stroke="#2ca02c" stroke-width="1.5"/>
2716
+ </svg>
2359
2717
  `),
2360
2718
  'overline-template-image': makeToolbarIconImage(`
2361
2719
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
@@ -2376,13 +2734,52 @@ const TOOLBAR_ICON_IMAGES = {
2376
2734
  </svg>
2377
2735
  `),
2378
2736
  'integral-template-image': makeToolbarIconImage(`
2379
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 28">
2380
- <path d="M10 2C6 2 6 6 6 14C6 22 6 26 2 26" fill="none" stroke="#37474f" stroke-width="1.5" stroke-linecap="round"/>
2381
- <rect x="2" y="20" width="5" height="5" fill="none" stroke="#4a5559" stroke-width="1"/>
2382
- <rect x="16" y="8" width="6" height="6" fill="none" stroke="#4a5559" stroke-width="1"/>
2383
- <text x="25" y="14" font-size="8" font-family="serif" fill="#37474f">d</text>
2384
- <rect x="31" y="8" width="6" height="6" fill="none" stroke="#4a5559" stroke-width="1"/>
2385
- </svg>
2737
+ <svg xmlns="http://www.w3.org/2000/svg" width="90" height="60" viewBox="0 0 90 60">
2738
+ <!-- Integral -->
2739
+ <text x="8"
2740
+ y="42"
2741
+ font-family="Times New Roman, Cambria Math, serif"
2742
+ font-size="40"
2743
+ fill="#111">
2744
+ ∫
2745
+ </text>
2746
+
2747
+ <!-- Integrand box -->
2748
+ <rect x="38"
2749
+ y="16"
2750
+ width="14"
2751
+ height="18"
2752
+ fill="none"
2753
+ stroke="#2ca02c"
2754
+ stroke-width="2"/>
2755
+
2756
+ <!-- d -->
2757
+ <text x="54"
2758
+ y="31"
2759
+ font-family="Times New Roman, Cambria Math, serif"
2760
+ font-size="20"
2761
+ fill="#111">
2762
+ d
2763
+ </text>
2764
+
2765
+ <!-- Variable box -->
2766
+ <rect x="64"
2767
+ y="16"
2768
+ width="14"
2769
+ height="18"
2770
+ fill="none"
2771
+ stroke="#2ca02c"
2772
+ stroke-width="2"/>
2773
+
2774
+ <!-- Lower limit box -->
2775
+ <rect x="26"
2776
+ y="42"
2777
+ width="8"
2778
+ height="12"
2779
+ fill="none"
2780
+ stroke="#2ca02c"
2781
+ stroke-width="2"/>
2782
+ </svg>
2386
2783
  `),
2387
2784
  'definite-integral-template-image': makeToolbarIconImage(`
2388
2785
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
@@ -2401,12 +2798,76 @@ const TOOLBAR_ICON_IMAGES = {
2401
2798
  </svg>
2402
2799
  `),
2403
2800
  'integral-box-differential-template-image': makeToolbarIconImage(`
2404
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
2405
- <path d="M5.8 1.8C3.7 1.8 3.7 5 3.7 9C3.7 13 3.7 16.2 1.6 16.2" fill="none" stroke="#37474f" stroke-width="1.15"/>
2406
- <rect x="2.3" y="13.4" width="2.3" height="2.3" rx="0.35" fill="none" stroke="#4a5559" stroke-width="0.9"/>
2407
- <rect x="7.2" y="6.2" width="2.8" height="4.6" rx="0.4" fill="none" stroke="#4a5559" stroke-width="0.9"/>
2408
- <text x="10.8" y="10.4" font-size="4.7" fill="#37474f" font-family="Arial, Helvetica, sans-serif" font-weight="700">d</text>
2409
- <rect x="14" y="6.2" width="2.8" height="4.6" rx="0.4" fill="none" stroke="#4a5559" stroke-width="0.9"/>
2801
+ <svg xmlns="http://www.w3.org/2000/svg" width="90" height="64" viewBox="0 0 90 64">
2802
+ <!-- Integral -->
2803
+ <text x="8" y="48"
2804
+ font-family="Times New Roman, serif"
2805
+ font-size="42"
2806
+ fill="#222">∫</text>
2807
+
2808
+ <!-- Upper limit -->
2809
+ <rect x="28" y="6"
2810
+ width="10" height="12"
2811
+ fill="none"
2812
+ stroke="#1f9d2f"
2813
+ stroke-width="2"/>
2814
+
2815
+ <!-- Lower limit -->
2816
+ <rect x="20" y="48"
2817
+ width="10" height="12"
2818
+ fill="none"
2819
+ stroke="#1f9d2f"
2820
+ stroke-width="2"/>
2821
+
2822
+ <!-- Integrand -->
2823
+ <rect x="40" y="24"
2824
+ width="16" height="16"
2825
+ fill="none"
2826
+ stroke="#1f9d2f"
2827
+ stroke-width="2"/>
2828
+
2829
+ <!-- d -->
2830
+ <text x="57" y="38"
2831
+ font-family="Times New Roman, serif"
2832
+ font-size="20"
2833
+ fill="#222">d</text>
2834
+
2835
+ <!-- Variable -->
2836
+ <rect x="67" y="24"
2837
+ width="16" height="16"
2838
+ fill="none"
2839
+ stroke="#1f9d2f"
2840
+ stroke-width="2"/>
2841
+ </svg>
2842
+ `),
2843
+ 'single-integral-template-image': makeToolbarIconImage(`
2844
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32">
2845
+ <text x="2" y="25" font-family="Cambria Math, Times New Roman, serif" font-size="28" fill="#111">&#8747;</text>
2846
+ </svg>
2847
+ `),
2848
+ 'contour-integral-template-image': makeToolbarIconImage(`
2849
+ <svg xmlns="http://www.w3.org/2000/svg" width="28" height="32" viewBox="0 0 28 32">
2850
+ <text x="1" y="25" font-family="Cambria Math, Times New Roman, serif" font-size="28" fill="#111">&#8750;</text>
2851
+ </svg>
2852
+ `),
2853
+ 'double-integral-template-image': makeToolbarIconImage(`
2854
+ <svg xmlns="http://www.w3.org/2000/svg" width="30" height="32" viewBox="0 0 30 32">
2855
+ <text x="1" y="25" font-family="Cambria Math, Times New Roman, serif" font-size="28" fill="#111">&#8748;</text>
2856
+ </svg>
2857
+ `),
2858
+ 'double-contour-integral-template-image': makeToolbarIconImage(`
2859
+ <svg xmlns="http://www.w3.org/2000/svg" width="36" height="32" viewBox="0 0 36 32">
2860
+ <text x="1" y="25" font-family="Cambria Math, Times New Roman, serif" font-size="28" fill="#111">&#8751;</text>
2861
+ </svg>
2862
+ `),
2863
+ 'triple-integral-template-image': makeToolbarIconImage(`
2864
+ <svg xmlns="http://www.w3.org/2000/svg" width="38" height="32" viewBox="0 0 38 32">
2865
+ <text x="1" y="25" font-family="Cambria Math, Times New Roman, serif" font-size="28" fill="#111">&#8749;</text>
2866
+ </svg>
2867
+ `),
2868
+ 'triple-contour-integral-template-image': makeToolbarIconImage(`
2869
+ <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" viewBox="0 0 40 32">
2870
+ <text x="1" y="25" font-family="Cambria Math, Times New Roman, serif" font-size="28" fill="#111">&#8752;</text>
2410
2871
  </svg>
2411
2872
  `),
2412
2873
  'integral-with-differential': makeToolbarIconImage(`
@@ -2441,7 +2902,7 @@ const TOOLBAR_ICON_IMAGES = {
2441
2902
  </svg>
2442
2903
  `),
2443
2904
  'first-derivative-template-image': makeToolbarIconImage(`
2444
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
2905
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 0 50 50">
2445
2906
  <text x="5" y="18" font-size="18">d</text>
2446
2907
  <rect x="18" y="4" width="8" height="16" fill="none" stroke="#2e8b57" stroke-width="2"/>
2447
2908
  <line x1="2" y1="25" x2="32" y2="25" stroke="#000" stroke-width="2"/>
@@ -2450,7 +2911,7 @@ const TOOLBAR_ICON_IMAGES = {
2450
2911
  </svg>
2451
2912
  `),
2452
2913
  'partial-derivative-template-image': makeToolbarIconImage(`
2453
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 50">
2914
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 0 55 50">
2454
2915
  <text x="4" y="18" font-size="18">∂</text>
2455
2916
  <rect x="20" y="4" width="8" height="16" fill="none" stroke="#2e8b57" stroke-width="2"/>
2456
2917
  <line x1="2" y1="25" x2="34" y2="25" stroke="#000" stroke-width="2"/>
@@ -2459,26 +2920,71 @@ const TOOLBAR_ICON_IMAGES = {
2459
2920
  </svg>
2460
2921
  `),
2461
2922
  'limit-infinity-template-image': makeToolbarIconImage(`
2462
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 40">
2923
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 0 70 40">
2463
2924
  <text x="18" y="15" font-size="18">lim</text>
2464
2925
  <rect x="4" y="22" width="8" height="14" fill="none" stroke="#2e8b57" stroke-width="2"/>
2465
2926
  <text x="16" y="33" font-size="16">→∞</text>
2466
2927
  </svg>
2467
2928
  `),
2468
2929
  'limit-generic-template-image': makeToolbarIconImage(`
2469
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 40">
2930
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 0 55 40">
2470
2931
  <text x="14" y="15" font-size="18">lim</text>
2471
2932
  <rect x="20" y="22" width="8" height="14" fill="none" stroke="#2e8b57" stroke-width="2"/>
2472
2933
  </svg>
2473
2934
  `),
2474
2935
  'log-base-template-image': makeToolbarIconImage(`
2475
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 40">
2476
- <text x="2" y="22" font-size="16" font-family="Arial, sans-serif" fill="#000">log</text>
2477
- <rect x="36" y="24" width="8" height="10" fill="none" stroke="#2e8b57" stroke-width="2"/>
2478
- <path d="M52 6 Q45 20 52 34" fill="none" stroke="#000" stroke-width="2"/>
2479
- <rect x="56" y="10" width="10" height="16" fill="none" stroke="#2e8b57" stroke-width="2"/>
2480
- <path d="M72 6 Q79 20 72 34" fill="none" stroke="#000" stroke-width="2"/>
2481
- </svg>
2936
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 28" preserveAspectRatio="xMidYMid meet">
2937
+ <text
2938
+ x="1"
2939
+ y="19"
2940
+ font-family="Arial, sans-serif"
2941
+ font-size="18"
2942
+ font-weight="500"
2943
+ fill="#111"
2944
+ >
2945
+ log
2946
+ </text>
2947
+
2948
+ <rect
2949
+ x="27"
2950
+ y="16"
2951
+ width="5"
2952
+ height="7"
2953
+ fill="none"
2954
+ stroke="#2ca02c"
2955
+ stroke-width="1.6"
2956
+ />
2957
+
2958
+ <text
2959
+ x="33"
2960
+ y="20"
2961
+ font-family="Cambria Math, Times New Roman, serif"
2962
+ font-size="22"
2963
+ fill="#111"
2964
+ >
2965
+ (
2966
+ </text>
2967
+
2968
+ <rect
2969
+ x="43"
2970
+ y="8"
2971
+ width="10"
2972
+ height="13"
2973
+ fill="none"
2974
+ stroke="#2ca02c"
2975
+ stroke-width="1.6"
2976
+ />
2977
+
2978
+ <text
2979
+ x="54"
2980
+ y="20"
2981
+ font-family="Cambria Math, Times New Roman, serif"
2982
+ font-size="22"
2983
+ fill="#111"
2984
+ >
2985
+ )
2986
+ </text>
2987
+ </svg>
2482
2988
  `),
2483
2989
  'integral-limits-template-image': makeToolbarIconImage(`
2484
2990
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
@@ -2572,11 +3078,31 @@ const TOOLBAR_ICON_IMAGES = {
2572
3078
  </svg>
2573
3079
  `),
2574
3080
  'rtl-input-template-image': makeToolbarIconImage(`
2575
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
2576
- <text x="10.9" y="8.6" text-anchor="middle" fill="#2f3b43" font-size="6.9" font-weight="700" font-family="Tahoma, Arial, sans-serif">س</text>
2577
- <rect x="11.85" y="3.1" width="3.2" height="3.2" rx="0.45" fill="none" stroke="#2c8a43" stroke-width="1.1"/>
2578
- <path d="M13.9 13.1H4.55M6.2 11.45L4.55 13.1L6.2 14.75" fill="none" stroke="#2c8a43" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
2579
- </svg>
3081
+ <svg xmlns="http://www.w3.org/2000/svg" width="70" height="40" viewBox="0 0 70 40">
3082
+ <!-- Arabic text -->
3083
+ <text x="22"
3084
+ y="31"
3085
+ text-anchor="middle"
3086
+ direction="rtl"
3087
+ font-family="Amiri, Noto Naskh Arabic, serif"
3088
+ font-size="26"
3089
+ font-weight="600"
3090
+ fill="#111">
3091
+ س
3092
+ </text>
3093
+
3094
+ <!-- Complete radical -->
3095
+ <path d="M6 10
3096
+ H40
3097
+ L44 10
3098
+ L54 35
3099
+ L66 15"
3100
+ fill="none"
3101
+ stroke="#111"
3102
+ stroke-width="2"
3103
+ stroke-linecap="round"
3104
+ stroke-linejoin="round"/>
3105
+ </svg>
2580
3106
  `),
2581
3107
  'negate-template-image': makeToolbarIconImage(`
2582
3108
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
@@ -2816,27 +3342,76 @@ const TOOLBAR_ICON_IMAGES = {
2816
3342
  <circle cx="12" cy="8" r="3" fill="currentColor" />
2817
3343
  </svg>
2818
3344
  `),
3345
+ 'matrix-grid-template-image': makeToolbarIconImage(`
3346
+ <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" viewBox="0 0 40 32" fill="none">
3347
+ <rect x="6" y="3" width="5" height="6" stroke="#2ca02c" stroke-width="2"/>
3348
+ <rect x="17" y="3" width="5" height="6" stroke="#2ca02c" stroke-width="2"/>
3349
+ <rect x="28" y="3" width="5" height="6" stroke="#2ca02c" stroke-width="2"/>
3350
+ <rect x="6" y="13" width="5" height="6" stroke="#2ca02c" stroke-width="2"/>
3351
+ <rect x="17" y="13" width="5" height="6" stroke="#2ca02c" stroke-width="2"/>
3352
+ <rect x="28" y="13" width="5" height="6" stroke="#2ca02c" stroke-width="2"/>
3353
+ <rect x="6" y="23" width="5" height="6" stroke="#2ca02c" stroke-width="2"/>
3354
+ <rect x="17" y="23" width="5" height="6" stroke="#2ca02c" stroke-width="2"/>
3355
+ <rect x="28" y="23" width="5" height="6" stroke="#2ca02c" stroke-width="2"/>
3356
+ </svg>
3357
+ `),
3358
+ 'matrix-brackets-template-image': makeToolbarIconImage(`
3359
+ <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" viewBox="0 0 40 32" fill="none">
3360
+ <path d="M8 2 H4 V30 H8" stroke="#111" stroke-width="2" fill="none"/>
3361
+ <path d="M32 2 H36 V30 H32" stroke="#111" stroke-width="2" fill="none"/>
3362
+ <rect x="11" y="3" width="5" height="6" stroke="#2ca02c" stroke-width="2"/>
3363
+ <rect x="24" y="3" width="5" height="6" stroke="#2ca02c" stroke-width="2"/>
3364
+ <rect x="11" y="13" width="5" height="6" stroke="#2ca02c" stroke-width="2"/>
3365
+ <rect x="24" y="13" width="5" height="6" stroke="#2ca02c" stroke-width="2"/>
3366
+ <rect x="11" y="23" width="5" height="6" stroke="#2ca02c" stroke-width="2"/>
3367
+ <rect x="24" y="23" width="5" height="6" stroke="#2ca02c" stroke-width="2"/>
3368
+ </svg>
3369
+ `),
3370
+ 'matrix-bars-template-image': makeToolbarIconImage(`
3371
+ <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" viewBox="0 0 40 32" fill="none">
3372
+ <line x1="4" y1="2" x2="4" y2="30" stroke="#111" stroke-width="2"/>
3373
+ <line x1="36" y1="2" x2="36" y2="30" stroke="#111" stroke-width="2"/>
3374
+ <rect x="10" y="3" width="5" height="6" stroke="#2ca02c" stroke-width="2"/>
3375
+ <rect x="24" y="3" width="5" height="6" stroke="#2ca02c" stroke-width="2"/>
3376
+ <rect x="10" y="13" width="5" height="6" stroke="#2ca02c" stroke-width="2"/>
3377
+ <rect x="24" y="13" width="5" height="6" stroke="#2ca02c" stroke-width="2"/>
3378
+ <rect x="10" y="23" width="5" height="6" stroke="#2ca02c" stroke-width="2"/>
3379
+ <rect x="24" y="23" width="5" height="6" stroke="#2ca02c" stroke-width="2"/>
3380
+ </svg>
3381
+ `),
3382
+ 'matrix-parens-template-image': makeToolbarIconImage(`
3383
+ <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" viewBox="0 0 40 32" fill="none">
3384
+ <path d="M6 2 C2 8,2 24,6 30" stroke="#111" stroke-width="2" stroke-linecap="round"/>
3385
+ <path d="M34 2 C38 8,38 24,34 30" stroke="#111" stroke-width="2" stroke-linecap="round"/>
3386
+ <rect x="11" y="3" width="5" height="6" stroke="#2ca02c" stroke-width="2"/>
3387
+ <rect x="24" y="3" width="5" height="6" stroke="#2ca02c" stroke-width="2"/>
3388
+ <rect x="11" y="13" width="5" height="6" stroke="#2ca02c" stroke-width="2"/>
3389
+ <rect x="24" y="13" width="5" height="6" stroke="#2ca02c" stroke-width="2"/>
3390
+ <rect x="11" y="23" width="5" height="6" stroke="#2ca02c" stroke-width="2"/>
3391
+ <rect x="24" y="23" width="5" height="6" stroke="#2ca02c" stroke-width="2"/>
3392
+ </svg>
3393
+ `),
2819
3394
  'cases-template-image': makeToolbarIconImage(`
2820
3395
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 48" fill="none">
2821
3396
  <path
2822
3397
  d="M9 2 C4 2 4 5 4 8 L4 16 C4 19 3 21 1 24 C3 27 4 29 4 32 L4 40 C4 43 4 46 9 46"
2823
- stroke="#7e8d98"
2824
- stroke-width="1.5"
3398
+ stroke="#000000"
3399
+ stroke-width="2.5"
2825
3400
  stroke-linecap="round"
2826
3401
  stroke-linejoin="round"
2827
3402
  />
2828
- <rect x="15" y="7" width="8" height="13" stroke="#008000" stroke-width="1.5"/>
2829
- <rect x="15" y="28" width="8" height="13" stroke="#008000" stroke-width="1.5"/>
3403
+ <rect x="15" y="7" width="8" height="13" stroke="#008000" stroke-width="2.5"/>
3404
+ <rect x="15" y="28" width="8" height="13" stroke="#008000" stroke-width="2.5"/>
2830
3405
  </svg>
2831
3406
  `),
2832
3407
  'rcases-template-image': makeToolbarIconImage(`
2833
3408
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 72" fill="none">
2834
- <rect x="10" y="8" width="9" height="22" stroke="#0a7a18" stroke-width="2"/>
2835
- <rect x="10" y="42" width="9" height="22" stroke="#0a7a18" stroke-width="2"/>
3409
+ <rect x="10" y="8" width="9" height="22" stroke="#0a7a18" stroke-width="4"/>
3410
+ <rect x="10" y="42" width="9" height="22" stroke="#0a7a18" stroke-width="4"/>
2836
3411
  <path
2837
3412
  d="M30 2 C36 2,36 8,36 14 L36 28 C36 32,38 34,40 36 C38 38,36 40,36 44 L36 58 C36 64,36 70,30 70"
2838
3413
  stroke="currentColor"
2839
- stroke-width="2"
3414
+ stroke-width="4"
2840
3415
  stroke-linecap="round"
2841
3416
  stroke-linejoin="round"
2842
3417
  />
@@ -2847,24 +3422,24 @@ const TOOLBAR_ICON_IMAGES = {
2847
3422
  <path
2848
3423
  d="M8 2 C4 2 4 5 4 8 L4 16 C4 18 3 20 1 24 C3 28 4 30 4 32 L4 40 C4 43 4 46 8 46"
2849
3424
  stroke="#000"
2850
- stroke-width="1.5"
3425
+ stroke-width="2.5"
2851
3426
  stroke-linecap="round"
2852
3427
  stroke-linejoin="round"
2853
3428
  />
2854
- <rect x="14" y="8" width="6" height="12" stroke="#008000" stroke-width="1.5"/>
2855
- <rect x="28" y="8" width="6" height="12" stroke="#008000" stroke-width="1.5"/>
2856
- <rect x="14" y="28" width="6" height="12" stroke="#008000" stroke-width="1.5"/>
2857
- <rect x="28" y="28" width="6" height="12" stroke="#008000" stroke-width="1.5"/>
3429
+ <rect x="14" y="8" width="6" height="12" stroke="#008000" stroke-width="2.5"/>
3430
+ <rect x="28" y="8" width="6" height="12" stroke="#008000" stroke-width="2.5"/>
3431
+ <rect x="14" y="28" width="6" height="12" stroke="#008000" stroke-width="2.5"/>
3432
+ <rect x="28" y="28" width="6" height="12" stroke="#008000" stroke-width="2.5"/>
2858
3433
  </svg>
2859
3434
  `),
2860
3435
  'aligned-equals-template-image': makeToolbarIconImage(`
2861
3436
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 48" fill="none">
2862
- <rect x="6" y="6" width="8" height="12" stroke="#008000" stroke-width="1.5"/>
2863
- <text x="21" y="16" font-size="12" text-anchor="middle" fill="#000">=</text>
2864
- <rect x="28" y="6" width="8" height="12" stroke="#008000" stroke-width="1.5"/>
2865
- <rect x="6" y="28" width="8" height="12" stroke="#008000" stroke-width="1.5"/>
2866
- <text x="21" y="38" font-size="12" text-anchor="middle" fill="#000">=</text>
2867
- <rect x="28" y="28" width="8" height="12" stroke="#008000" stroke-width="1.5"/>
3437
+ <rect x="6" y="6" width="8" height="12" stroke="#008000" stroke-width="2.5"/>
3438
+ <text x="21" y="16" font-size="15" text-anchor="middle" fill="#000">=</text>
3439
+ <rect x="28" y="6" width="8" height="12" stroke="#008000" stroke-width="2.5"/>
3440
+ <rect x="6" y="28" width="8" height="12" stroke="#008000" stroke-width="2.5"/>
3441
+ <text x="21" y="38" font-size="15" text-anchor="middle" fill="#000">=</text>
3442
+ <rect x="28" y="28" width="8" height="12" stroke="#008000" stroke-width="2.5"/>
2868
3443
  </svg>
2869
3444
  `),
2870
3445
  'vertical-ellipsis-template-image': makeToolbarIconImage(`
@@ -2896,77 +3471,287 @@ const TOOLBAR_ICON_IMAGES = {
2896
3471
  </svg>
2897
3472
  `),
2898
3473
  'sum-array-template-image': makeToolbarIconImage(`
2899
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 72" fill="none">
2900
- <rect x="28" y="6" width="10" height="16" stroke="#008000" stroke-width="1.5"/>
2901
- <text x="14" y="40" font-size="18" text-anchor="middle" fill="#000">+</text>
2902
- <rect x="28" y="28" width="10" height="16" stroke="#008000" stroke-width="1.5"/>
2903
- <line x1="6" y1="52" x2="42" y2="52" stroke="#000" stroke-width="1.5"/>
2904
- <rect x="28" y="58" width="10" height="16" stroke="#008000" stroke-width="1.5"/>
2905
- </svg>
3474
+ <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" viewBox="0 0 40 32">
3475
+ <!-- Upper placeholder -->
3476
+ <rect x="24" y="1"
3477
+ width="8" height="8"
3478
+ fill="none"
3479
+ stroke="#2ca02c"
3480
+ stroke-width="1.5"/>
3481
+
3482
+ <!-- Plus sign -->
3483
+ <text x="6" y="20"
3484
+ font-family="Cambria Math, Arial, sans-serif"
3485
+ font-size="18"
3486
+ fill="#111">+</text>
3487
+
3488
+ <!-- Main placeholder -->
3489
+ <rect x="24" y="11"
3490
+ width="8" height="8"
3491
+ fill="none"
3492
+ stroke="#2ca02c"
3493
+ stroke-width="1.5"/>
3494
+
3495
+ <!-- Fraction bar -->
3496
+ <line x1="2" y1="22"
3497
+ x2="34" y2="22"
3498
+ stroke="#111"
3499
+ stroke-width="2"/>
3500
+
3501
+ <!-- Lower placeholder -->
3502
+ <rect x="24" y="24"
3503
+ width="8" height="8"
3504
+ fill="none"
3505
+ stroke="#2ca02c"
3506
+ stroke-width="1.5"/>
3507
+ </svg>
2906
3508
  `),
2907
3509
  'difference-array-template-image': makeToolbarIconImage(`
2908
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 72" fill="none">
2909
- <rect x="28" y="6" width="10" height="16" stroke="#008000" stroke-width="1.5"/>
2910
- <line x1="8" y1="36" x2="18" y2="36" stroke="#000" stroke-width="2"/>
2911
- <rect x="28" y="28" width="10" height="16" stroke="#008000" stroke-width="1.5"/>
2912
- <line x1="6" y1="52" x2="42" y2="52" stroke="#000" stroke-width="1.5"/>
2913
- <rect x="28" y="58" width="10" height="16" stroke="#008000" stroke-width="1.5"/>
2914
- </svg>
3510
+ <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" viewBox="0 0 40 32">
3511
+ <!-- Upper placeholder -->
3512
+ <rect x="24" y="1"
3513
+ width="8" height="8"
3514
+ fill="none"
3515
+ stroke="#2ca02c"
3516
+ stroke-width="1.5"/>
3517
+
3518
+ <!-- Minus sign -->
3519
+ <text x="8" y="19"
3520
+ font-family="Cambria Math, Arial, sans-serif"
3521
+ font-size="18"
3522
+ fill="#111">−</text>
3523
+
3524
+ <!-- Main placeholder -->
3525
+ <rect x="24" y="11"
3526
+ width="8" height="8"
3527
+ fill="none"
3528
+ stroke="#2ca02c"
3529
+ stroke-width="1.5"/>
3530
+
3531
+ <!-- Fraction bar -->
3532
+ <line x1="2" y1="22"
3533
+ x2="34" y2="22"
3534
+ stroke="#111"
3535
+ stroke-width="2"/>
3536
+
3537
+ <!-- Lower placeholder -->
3538
+ <rect x="24" y="24"
3539
+ width="8" height="8"
3540
+ fill="none"
3541
+ stroke="#2ca02c"
3542
+ stroke-width="1.5"/>
3543
+ </svg>
2915
3544
  `),
2916
3545
  'stack-line-template-image': makeToolbarIconImage(`
2917
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 64" fill="none">
2918
- <rect x="7" y="4" width="10" height="12" stroke="#008000" stroke-width="1.5"/>
2919
- <rect x="7" y="22" width="10" height="12" stroke="#008000" stroke-width="1.5"/>
2920
- <line x1="4" y1="42" x2="20" y2="42" stroke="#000" stroke-width="1.5"/>
2921
- <rect x="7" y="48" width="10" height="12" stroke="#008000" stroke-width="1.5"/>
2922
- </svg>
3546
+ <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" viewBox="0 0 40 32">
3547
+ <!-- Top placeholder -->
3548
+ <rect x="24" y="1"
3549
+ width="8" height="8"
3550
+ fill="none"
3551
+ stroke="#2ca02c"
3552
+ stroke-width="1.5"/>
3553
+
3554
+ <!-- Middle placeholder -->
3555
+ <rect x="24" y="11"
3556
+ width="8" height="8"
3557
+ fill="none"
3558
+ stroke="#2ca02c"
3559
+ stroke-width="1.5"/>
3560
+
3561
+ <!-- Fraction bar -->
3562
+ <line x1="2" y1="22"
3563
+ x2="34" y2="22"
3564
+ stroke="#111"
3565
+ stroke-width="2"/>
3566
+
3567
+ <!-- Bottom placeholder -->
3568
+ <rect x="24" y="24"
3569
+ width="8" height="8"
3570
+ fill="none"
3571
+ stroke="#2ca02c"
3572
+ stroke-width="1.5"/>
3573
+ </svg>
2923
3574
  `),
2924
3575
  'division-layout-template-image': makeToolbarIconImage(`
2925
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 80" fill="none">
2926
- <rect x="38" y="6" width="10" height="14" stroke="#008000" stroke-width="1.5"/>
2927
- <line x1="28" y1="28" x2="56" y2="28" stroke="#000" stroke-width="2"/>
2928
- <path d="M22 28 C30 35,30 45,22 54" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
2929
- <rect x="6" y="34" width="10" height="14" stroke="#008000" stroke-width="1.5"/>
2930
- <rect x="40" y="34" width="10" height="14" stroke="#008000" stroke-width="1.5"/>
2931
- </svg>
3576
+ <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" viewBox="0 0 40 32">
3577
+ <!-- Top placeholder -->
3578
+ <rect x="24" y="1"
3579
+ width="8" height="8"
3580
+ fill="none"
3581
+ stroke="#2ca02c"
3582
+ stroke-width="1.5"/>
3583
+
3584
+ <!-- Left placeholder -->
3585
+ <rect x="2" y="14"
3586
+ width="8" height="8"
3587
+ fill="none"
3588
+ stroke="#2ca02c"
3589
+ stroke-width="1.5"/>
3590
+
3591
+ <!-- Delimiter -->
3592
+ <text x="13" y="21"
3593
+ font-family="Cambria Math, Times New Roman, serif"
3594
+ font-size="22"
3595
+ fill="#111">)</text>
3596
+
3597
+ <!-- Horizontal bar -->
3598
+ <line x1="24" y1="12"
3599
+ x2="38" y2="12"
3600
+ stroke="#111"
3601
+ stroke-width="2"/>
3602
+
3603
+ <!-- Bottom placeholder -->
3604
+ <rect x="24" y="16"
3605
+ width="8" height="8"
3606
+ fill="none"
3607
+ stroke="#2ca02c"
3608
+ stroke-width="1.5"/>
3609
+ </svg>
2932
3610
  `),
2933
3611
  'product-array-template-image': makeToolbarIconImage(`
2934
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 88" fill="none">
2935
- <rect x="34" y="6" width="10" height="16" stroke="#008000" stroke-width="1.5"/>
2936
- <text x="14" y="46" font-size="18" text-anchor="middle" fill="#000">×</text>
2937
- <rect x="34" y="38" width="10" height="16" stroke="#008000" stroke-width="1.5"/>
2938
- <line x1="4" y1="66" x2="46" y2="66" stroke="#000" stroke-width="1.5"/>
2939
- <rect x="34" y="74" width="10" height="16" stroke="#008000" stroke-width="1.5"/>
2940
- </svg>
3612
+ <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" viewBox="0 0 40 32">
3613
+ <!-- Upper placeholder -->
3614
+ <rect x="24" y="1"
3615
+ width="8" height="8"
3616
+ fill="none"
3617
+ stroke="#2ca02c"
3618
+ stroke-width="1.5"/>
3619
+
3620
+ <!-- Multiplication sign -->
3621
+ <text x="7" y="19"
3622
+ font-family="Cambria Math, Arial, sans-serif"
3623
+ font-size="18"
3624
+ fill="#111">×</text>
3625
+
3626
+ <!-- Main placeholder -->
3627
+ <rect x="24" y="11"
3628
+ width="8" height="8"
3629
+ fill="none"
3630
+ stroke="#2ca02c"
3631
+ stroke-width="1.5"/>
3632
+
3633
+ <!-- Fraction bar -->
3634
+ <line x1="2" y1="22"
3635
+ x2="34" y2="22"
3636
+ stroke="#111"
3637
+ stroke-width="2"/>
3638
+
3639
+ <!-- Lower placeholder -->
3640
+ <rect x="24" y="24"
3641
+ width="8" height="8"
3642
+ fill="none"
3643
+ stroke="#2ca02c"
3644
+ stroke-width="1.5"/>
3645
+ </svg>
2941
3646
  `),
2942
3647
  'mixed-fraction-template-image': makeToolbarIconImage(`
2943
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 70" fill="none">
2944
- <rect x="6" y="18" width="12" height="18" stroke="#008000" stroke-width="1.5"/>
2945
- <line x1="28" y1="4" x2="28" y2="36" stroke="#000" stroke-width="2"/>
2946
- <rect x="40" y="10" width="12" height="18" stroke="#008000" stroke-width="1.5"/>
2947
- <line x1="28" y1="36" x2="58" y2="36" stroke="#000" stroke-width="2"/>
2948
- <rect x="40" y="46" width="12" height="18" stroke="#008000" stroke-width="1.5"/>
2949
- </svg>
3648
+ <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" viewBox="0 0 40 32">
3649
+ <!-- Left top box -->
3650
+ <rect x="3" y="6"
3651
+ width="8" height="10"
3652
+ fill="none"
3653
+ stroke="#2ca02c"
3654
+ stroke-width="1.5"/>
3655
+
3656
+ <!-- Right top box -->
3657
+ <rect x="26" y="6"
3658
+ width="8" height="10"
3659
+ fill="none"
3660
+ stroke="#2ca02c"
3661
+ stroke-width="1.5"/>
3662
+
3663
+ <!-- L-shaped separator -->
3664
+ <line x1="20" y1="1"
3665
+ x2="20" y2="21"
3666
+ stroke="#111"
3667
+ stroke-width="2"/>
3668
+
3669
+ <line x1="20" y1="21"
3670
+ x2="38" y2="21"
3671
+ stroke="#111"
3672
+ stroke-width="2"/>
3673
+
3674
+ <!-- Bottom box -->
3675
+ <rect x="26" y="24"
3676
+ width="8" height="8"
3677
+ fill="none"
3678
+ stroke="#2ca02c"
3679
+ stroke-width="1.5"/>
3680
+ </svg>
2950
3681
  `),
2951
3682
  'array-cc-template-image': makeToolbarIconImage(`
2952
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 70" fill="none">
2953
- <rect x="8" y="12" width="12" height="18" stroke="#008000" stroke-width="1.5"/>
2954
- <rect x="8" y="46" width="12" height="18" stroke="#008000" stroke-width="1.5"/>
2955
- <rect x="40" y="12" width="12" height="18" stroke="#008000" stroke-width="1.5"/>
2956
- <line x1="34" y1="36" x2="58" y2="36" stroke="#000" stroke-width="2"/>
2957
- <rect x="40" y="46" width="12" height="18" stroke="#008000" stroke-width="1.5"/>
2958
- <line x1="30" y1="2" x2="30" y2="36" stroke="#000" stroke-width="2"/>
2959
- </svg>
3683
+ <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" viewBox="0 0 40 32">
3684
+ <!-- Top left -->
3685
+ <rect x="3" y="4"
3686
+ width="8" height="10"
3687
+ fill="none"
3688
+ stroke="#2ca02c"
3689
+ stroke-width="1.5"/>
3690
+
3691
+ <!-- Bottom left -->
3692
+ <rect x="3" y="22"
3693
+ width="8" height="10"
3694
+ fill="none"
3695
+ stroke="#2ca02c"
3696
+ stroke-width="1.5"/>
3697
+
3698
+ <!-- Top right -->
3699
+ <rect x="26" y="4"
3700
+ width="8" height="10"
3701
+ fill="none"
3702
+ stroke="#2ca02c"
3703
+ stroke-width="1.5"/>
3704
+
3705
+ <!-- Bottom right -->
3706
+ <rect x="26" y="22"
3707
+ width="8" height="10"
3708
+ fill="none"
3709
+ stroke="#2ca02c"
3710
+ stroke-width="1.5"/>
3711
+
3712
+ <!-- L shape -->
3713
+ <line x1="20" y1="1"
3714
+ x2="20" y2="18"
3715
+ stroke="#111"
3716
+ stroke-width="2"/>
3717
+
3718
+ <line x1="20" y1="18"
3719
+ x2="38" y2="18"
3720
+ stroke="#111"
3721
+ stroke-width="2"/>
3722
+ </svg>
2960
3723
  `),
2961
3724
  'division-remainder-template-image': makeToolbarIconImage(`
2962
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 90" fill="none">
2963
- <rect x="40" y="6" width="12" height="18" stroke="#008000" stroke-width="1.5"/>
2964
- <line x1="28" y1="32" x2="56" y2="32" stroke="#000" stroke-width="2"/>
2965
- <path d="M22 32 C30 40,30 52,22 60" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
2966
- <rect x="6" y="40" width="12" height="18" stroke="#008000" stroke-width="1.5"/>
2967
- <rect x="40" y="40" width="12" height="18" stroke="#008000" stroke-width="1.5"/>
2968
- <rect x="40" y="70" width="12" height="18" stroke="#008000" stroke-width="1.5"/>
2969
- </svg>
3725
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 80" fill="none">
3726
+ <!-- Top placeholder -->
3727
+ <rect x="32" y="2" width="14" height="18"
3728
+ stroke="#008000" stroke-width="2.5"/>
3729
+
3730
+ <!-- Left placeholder -->
3731
+ <rect x="2" y="30" width="14" height="18"
3732
+ stroke="#008000" stroke-width="2.5"/>
3733
+
3734
+ <!-- Middle placeholder -->
3735
+ <rect x="32" y="30" width="14" height="18"
3736
+ stroke="#008000" stroke-width="2.5"/>
3737
+
3738
+ <!-- Bottom placeholder -->
3739
+ <rect x="32" y="58" width="14" height="18"
3740
+ stroke="#008000" stroke-width="2.5"/>
3741
+
3742
+ <!-- Large bold parenthesis -->
3743
+ <path d="M18 16 C32 28,32 52,18 64"
3744
+ stroke="#000"
3745
+ stroke-width="4"
3746
+ stroke-linecap="round"
3747
+ stroke-linejoin="round"/>
3748
+
3749
+ <!-- Large bold horizontal bar -->
3750
+ <line x1="28" y1="24"
3751
+ x2="54" y2="24"
3752
+ stroke="#000"
3753
+ stroke-width="4"/>
3754
+ </svg>
2970
3755
  `),
2971
3756
  'vertical-line-picker-template-image': makeToolbarIconImage(`
2972
3757
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
@@ -3151,9 +3936,12 @@ function renderToolbarItemLabel(item, context = {}) {
3151
3936
 
3152
3937
  if (item.icon && TOOLBAR_ICON_IMAGES[item.icon]) {
3153
3938
  return (
3154
- <span className="cme-toolbar-icon-image-wrapper" aria-hidden="true">
3939
+ <span
3940
+ className={`cme-toolbar-icon-image-wrapper cme-toolbar-icon-image-wrapper--${item.icon}`}
3941
+ aria-hidden="true"
3942
+ >
3155
3943
  <img
3156
- className="cme-toolbar-icon-image"
3944
+ className={`cme-toolbar-icon-image cme-toolbar-icon-image--${item.icon}`}
3157
3945
  src={TOOLBAR_ICON_IMAGES[item.icon]}
3158
3946
  alt=""
3159
3947
  />
@@ -3163,16 +3951,16 @@ function renderToolbarItemLabel(item, context = {}) {
3163
3951
 
3164
3952
  if (item.icon === 'stacked-fraction') {
3165
3953
  return (
3166
- <span className="cme-fraction-icon cme-fraction-stack" aria-hidden="true">
3954
+ <span className={`cme-fraction-icon cme-fraction-stack${item.cls?.includes('black-glyph-template') ? ' cme-fraction-stack--black-glyph-template' : ''}`} aria-hidden="true">
3167
3955
  <svg
3168
3956
  className="cme-fraction-svg"
3169
3957
  viewBox="0 0 24 24"
3170
3958
  focusable="false"
3171
3959
  aria-hidden="true"
3172
3960
  >
3173
- <rect x="7.5" y="2.5" width="9" height="6" rx="0.5" />
3961
+ <rect x="7.5" y="-0.2" width="9" height="9"/>
3174
3962
  <line x1="5.5" y1="12" x2="18.5" y2="12" />
3175
- <rect x="7.5" y="15.5" width="9" height="6" rx="0.5" />
3963
+ <rect x="7.5" y="15.3" width="9" height="9"/>
3176
3964
  </svg>
3177
3965
  </span>
3178
3966
  );
@@ -3382,9 +4170,9 @@ function renderToolbarItemLabel(item, context = {}) {
3382
4170
  focusable="false"
3383
4171
  aria-hidden="true"
3384
4172
  >
3385
- {topBox ? <rect {...topBox} rx="0.45" /> : null}
4173
+ {topBox ? <rect {...topBox} rx="0.45" className="cme-arrow-label-placeholder-box" /> : null}
3386
4174
  {arrowGraphic}
3387
- {bottomBox ? <rect {...bottomBox} rx="0.45" /> : null}
4175
+ {bottomBox ? <rect {...bottomBox} rx="0.45" className="cme-arrow-label-placeholder-box" /> : null}
3388
4176
  </svg>
3389
4177
  </span>
3390
4178
  );
@@ -3556,27 +4344,27 @@ function renderToolbarItemLabel(item, context = {}) {
3556
4344
  <span className="cme-root-icon" aria-hidden="true">
3557
4345
  <svg
3558
4346
  className="cme-root-svg"
3559
- viewBox="0 0 18 16"
4347
+ width="48"
4348
+ height="32"
4349
+ viewBox="0 0 46 32"
3560
4350
  focusable="false"
3561
4351
  aria-hidden="true"
3562
4352
  >
3563
4353
  {isNthRoot ? (
3564
4354
  <rect
3565
- x="2.1"
3566
- y="1.8"
3567
- width="2.6"
3568
- height="3.4"
3569
- rx="0.35"
4355
+ x="8"
4356
+ y="4"
4357
+ width="8"
4358
+ height="10"
3570
4359
  className="cme-root-svg-box cme-root-svg-box--small"
3571
4360
  />
3572
4361
  ) : null}
3573
- <path d="M1.8 9.6H3.8L5.5 13.8L8 3.4H15.5" />
4362
+ <path d={isNthRoot ? 'M10 18 L17 25 L24 4 L46 4' : 'M4 18 L11 25 L18 4 L42 4'} />
3574
4363
  <rect
3575
- x="9.6"
3576
- y="4.3"
3577
- width="4.2"
3578
- height="7"
3579
- rx="0.4"
4364
+ x={isNthRoot ? '30' : '24'}
4365
+ y="9"
4366
+ width="11"
4367
+ height="15"
3580
4368
  className="cme-root-svg-box"
3581
4369
  />
3582
4370
  </svg>
@@ -3624,7 +4412,8 @@ function renderToolbarItemLabel(item, context = {}) {
3624
4412
  const isRelations = context.groupId === 'relations';
3625
4413
  const isGreek = context.groupId === 'greek';
3626
4414
  const isChemMode = Boolean(context.isChemMode);
3627
- const labelLength = String(item.label || '').length;
4415
+ const labelText = String(item.label || '');
4416
+ const labelLength = labelText.length;
3628
4417
 
3629
4418
  if (isChemMode) {
3630
4419
  const isChemScriptLabel = /^(?:[⁰¹²³⁴⁵⁶⁷⁸⁹⁺⁻⁼⁽⁾ⁿⁱ₀₁₂₃₄₅₆₇₈₉₊₋₌₍₎ₐₑₒₓᵢⱼₙ])+$/u.test(String(item.label || ''));
@@ -3678,7 +4467,13 @@ function renderToolbarItemLabel(item, context = {}) {
3678
4467
 
3679
4468
  return (
3680
4469
  <span className={classNames.join(' ')} aria-hidden="true">
3681
- {item.label}
4470
+ {(itemClassName.includes('green-placeholder-glyph') || itemClassName.includes('black-glyph-template') || itemClassName.includes('black-placeholder-glyph'))
4471
+ ? Array.from(labelText).map((char, index) => (
4472
+ char === '□'
4473
+ ? <span key={`placeholder-${index}`} className={itemClassName.includes('black-placeholder-glyph') ? 'cme-toolbar-placeholder-box-black' : 'cme-toolbar-placeholder-box-green'}>{char}</span>
4474
+ : <span key={`glyph-${index}`}>{char}</span>
4475
+ ))
4476
+ : item.label}
3682
4477
  </span>
3683
4478
  );
3684
4479
  }
@@ -3952,13 +4747,41 @@ function ArrowPickerPopover({ position, onInsert }) {
3952
4747
  );
3953
4748
  }
3954
4749
 
3955
- function RelationMorePickerPopover({ position, items = [], onInsert }) {
3956
- const columns = Math.max(1, Math.min(items.length, 5));
4750
+ function RelationMorePickerPopover({ position, items = [], onInsert, popupBounds = null, picker = '' }) {
4751
+ const isWideLayout = picker === 'trigFunctionExtras' || picker === 'bracketDelimiterExtras' || picker === 'enclosureFrameExtras' || picker === 'strikeDecorationExtras' || picker === 'arithmeticLayoutExtras';
4752
+ const columns = isWideLayout ? 2 : Math.max(1, Math.min(items.length, 5));
4753
+ const buttonWidth = isWideLayout ? 88 : 30;
4754
+ const buttonHeight = isWideLayout ? 34 : 30;
4755
+ const gapX = isWideLayout ? 10 : 8;
4756
+ const gapY = isWideLayout ? 8 : 6;
4757
+ const paddingX = isWideLayout ? 18 : 20;
4758
+ const paddingY = isWideLayout ? 18 : 16;
3957
4759
  const rows = Math.max(1, Math.ceil(items.length / columns));
3958
- const width = (columns * 30) + ((columns - 1) * 8) + 20;
3959
- const height = (rows * 30) + ((rows - 1) * 6) + 16;
3960
- const left = Math.min(Math.max(position.x - 6, 8), window.innerWidth - width - 8);
3961
- const top = Math.min(position.y + 2, window.innerHeight - height - 8);
4760
+ const width = (columns * buttonWidth) + ((columns - 1) * gapX) + paddingX;
4761
+ const height = (rows * buttonHeight) + ((rows - 1) * gapY) + paddingY;
4762
+ const bounds = popupBounds
4763
+ ? {
4764
+ left: popupBounds.left,
4765
+ top: popupBounds.top,
4766
+ right: popupBounds.right,
4767
+ bottom: popupBounds.bottom,
4768
+ }
4769
+ : {
4770
+ left: 8,
4771
+ top: 8,
4772
+ right: window.innerWidth - 8,
4773
+ bottom: window.innerHeight - 8,
4774
+ };
4775
+ const minLeft = bounds.left + 8;
4776
+ const maxLeft = Math.max(minLeft, bounds.right - width - 8);
4777
+ const minTop = bounds.top + 8;
4778
+ const maxTop = Math.max(minTop, bounds.bottom - height - 8);
4779
+ const left = Math.min(Math.max(position.x - 6, minLeft), maxLeft);
4780
+ const preferredTop = position.y + 2;
4781
+ const fallbackTop = position.y - height - 6;
4782
+ const top = preferredTop <= maxTop
4783
+ ? preferredTop
4784
+ : Math.max(minTop, Math.min(fallbackTop, maxTop));
3962
4785
 
3963
4786
  return (
3964
4787
  <div
@@ -3973,7 +4796,11 @@ function RelationMorePickerPopover({ position, items = [], onInsert }) {
3973
4796
  >
3974
4797
  <div
3975
4798
  className="cme-arrow-picker-grid"
3976
- style={{ gridTemplateColumns: `repeat(${columns}, 30px)` }}
4799
+ style={{
4800
+ gridTemplateColumns: `repeat(${columns}, ${buttonWidth}px)`,
4801
+ gridAutoRows: `${buttonHeight}px`,
4802
+ gap: `${gapY}px ${gapX}px`,
4803
+ }}
3977
4804
  >
3978
4805
  {items.map((item) => (
3979
4806
  <button
@@ -3981,6 +4808,11 @@ function RelationMorePickerPopover({ position, items = [], onInsert }) {
3981
4808
  type="button"
3982
4809
  className={`cme-arrow-picker-btn${item.cls ? ` ${item.cls}` : ''}`}
3983
4810
  title={item.title || item.label}
4811
+ style={{
4812
+ width: `${buttonWidth}px`,
4813
+ height: `${buttonHeight}px`,
4814
+ padding: isWideLayout ? '0 8px' : 0,
4815
+ }}
3984
4816
  onMouseDown={(e) => {
3985
4817
  e.preventDefault();
3986
4818
  onInsert(item.insert);
@@ -4439,6 +5271,7 @@ function MathChemPopup({ mode, onInsert, onClose, initialLatex, initialDirection
4439
5271
  const popupPositionRef = useRef(null);
4440
5272
  const dragStateRef = useRef(null);
4441
5273
  const removeDragListenersRef = useRef(() => {});
5274
+ const moveTextStateRef = useRef(null);
4442
5275
  const [activeGroup, setActiveGroup] = useState(0);
4443
5276
  const [activeMatrix, setActiveMatrix] = useState(null); // { type, x, y }
4444
5277
  const [showSpecialChars, setShowSpecialChars] = useState(null); // { x, y } or null
@@ -4454,12 +5287,16 @@ function MathChemPopup({ mode, onInsert, onClose, initialLatex, initialDirection
4454
5287
  const [showStyleDropdown, setShowStyleDropdown] = useState(null); // { x, y, type, buttonKey } or null
4455
5288
  const [windowMode, setWindowMode] = useState('normal');
4456
5289
  const [popupPosition, setPopupPosition] = useState(null);
5290
+ const [isDragging, setIsDragging] = useState(false);
4457
5291
  const [isRtlInput, setIsRtlInput] = useState(initialDirection === 'rtl');
4458
5292
  const [customColorInput, setCustomColorInput] = useState('');
4459
5293
  const [customColorError, setCustomColorError] = useState('');
4460
5294
  const groups = mode === 'math' ? ORDERED_MATH_GROUPS : CHEM_GROUPS;
4461
5295
  const isMathMode = mode === 'math';
4462
5296
  const activeGroupConfig = groups[activeGroup] || {};
5297
+ const activeMathSubgroupClassName = isMathMode && activeGroupConfig.id
5298
+ ? ` cme-symbol-subgroup--tab-${activeGroupConfig.id}`
5299
+ : '';
4463
5300
  const colorSwatches = useMemo(
4464
5301
  () => COLOR_SWATCHES.map((swatch) => ({
4465
5302
  ...swatch,
@@ -4496,6 +5333,7 @@ function MathChemPopup({ mode, onInsert, onClose, initialLatex, initialDirection
4496
5333
  removeDragListenersRef.current();
4497
5334
  removeDragListenersRef.current = () => {};
4498
5335
  dragStateRef.current = null;
5336
+ setIsDragging(false);
4499
5337
  }, []);
4500
5338
 
4501
5339
  useEffect(() => () => stopDragging(), [stopDragging]);
@@ -4504,6 +5342,23 @@ function MathChemPopup({ mode, onInsert, onClose, initialLatex, initialDirection
4504
5342
  popupPositionRef.current = popupPosition;
4505
5343
  }, [popupPosition]);
4506
5344
 
5345
+ useEffect(() => {
5346
+ if (windowMode !== 'minimized') return;
5347
+
5348
+ setActiveMatrix(null);
5349
+ setShowSpecialChars(null);
5350
+ setShowArrowPicker(null);
5351
+ setShowRelationMorePicker(null);
5352
+ setShowArrowLabelPicker(null);
5353
+ setShowGreekItalicPicker(null);
5354
+ setShowBlackboardBoldPicker(null);
5355
+ setShowFrakturScriptPicker(null);
5356
+ setShowHebrewSymbolPicker(null);
5357
+ setShowPeriodicTablePicker(null);
5358
+ setShowColorPicker(null);
5359
+ setShowStyleDropdown(null);
5360
+ }, [windowMode]);
5361
+
4507
5362
  useEffect(() => {
4508
5363
  if (windowMode === 'maximized') return;
4509
5364
 
@@ -4529,7 +5384,18 @@ function MathChemPopup({ mode, onInsert, onClose, initialLatex, initialDirection
4529
5384
  };
4530
5385
 
4531
5386
  const frameId = requestAnimationFrame(syncPopupPosition);
4532
- return () => cancelAnimationFrame(frameId);
5387
+ const popupEl = popupRef.current;
5388
+ const handleSizeTransitionEnd = (event) => {
5389
+ if (event.target !== popupEl) return;
5390
+ if (event.propertyName !== 'width' && event.propertyName !== 'height') return;
5391
+ syncPopupPosition();
5392
+ };
5393
+
5394
+ popupEl?.addEventListener('transitionend', handleSizeTransitionEnd);
5395
+ return () => {
5396
+ cancelAnimationFrame(frameId);
5397
+ popupEl?.removeEventListener('transitionend', handleSizeTransitionEnd);
5398
+ };
4533
5399
  }, [clampPopupPosition, windowMode]);
4534
5400
 
4535
5401
  useEffect(() => {
@@ -4556,6 +5422,7 @@ function MathChemPopup({ mode, onInsert, onClose, initialLatex, initialDirection
4556
5422
  if (!popupEl) return;
4557
5423
 
4558
5424
  event.preventDefault();
5425
+ setIsDragging(true);
4559
5426
 
4560
5427
  const rect = popupEl.getBoundingClientRect();
4561
5428
  const startPosition = popupPositionRef.current || { x: rect.left, y: rect.top };
@@ -4972,10 +5839,22 @@ function MathChemPopup({ mode, onInsert, onClose, initialLatex, initialDirection
4972
5839
  const insertAtCursor = useCallback((sym) => {
4973
5840
  const mf = popupMfRef.current;
4974
5841
  if (!mf) return;
5842
+
5843
+ const hasPlaceholders = /#(?:0|\?)/.test(sym);
5844
+
4975
5845
  mf.focus();
4976
- mf.executeCommand(['insert', sym]);
4977
- }, []);
5846
+ if (typeof mf.insert === 'function') {
5847
+ mf.insert(sym, {
5848
+ format: 'latex',
5849
+ insertionMode: 'replaceSelection',
5850
+ selectionMode: hasPlaceholders ? 'placeholder' : 'after',
5851
+ });
5852
+ } else {
5853
+ mf.executeCommand(['insert', sym]);
5854
+ }
4978
5855
 
5856
+ requestAnimationFrame(() => mf.focus?.());
5857
+ }, []);
4979
5858
  const insertSpacingToolAtCursor = useCallback((sym) => {
4980
5859
  const mf = popupMfRef.current;
4981
5860
  if (!mf) return;
@@ -5001,24 +5880,62 @@ function MathChemPopup({ mode, onInsert, onClose, initialLatex, initialDirection
5001
5880
 
5002
5881
  const applyMoveTextAction = useCallback((direction) => {
5003
5882
  const mf = popupMfRef.current;
5004
- const template = MOVE_TEXT_TEMPLATE_MAP[direction];
5005
- if (!mf || !template) return;
5883
+ const delta = MOVE_TEXT_TEMPLATE_MAP[direction];
5884
+ if (!mf || !delta) return;
5885
+
5886
+ const currentSelection = mf.selection || mf.model?.selection;
5887
+ const hasSelection = Boolean(
5888
+ currentSelection &&
5889
+ Array.isArray(currentSelection.ranges) &&
5890
+ currentSelection.ranges.length > 0 &&
5891
+ currentSelection.ranges.some(([start, end]) => start !== end)
5892
+ );
5893
+ if (!hasSelection) {
5894
+ moveTextStateRef.current = null;
5895
+ return;
5896
+ }
5006
5897
 
5007
5898
  mf.focus();
5899
+ if ('selection' in mf) {
5900
+ try {
5901
+ mf.selection = currentSelection;
5902
+ } catch {}
5903
+ }
5008
5904
 
5009
- if (mf.selectionIsCollapsed) {
5905
+ const selectedLatex = typeof mf.getValue === 'function'
5906
+ ? (mf.getValue(currentSelection, 'latex') || '')
5907
+ : (mf.model?.getValue?.(currentSelection, 'latex') || '');
5908
+ if (!selectedLatex) {
5909
+ moveTextStateRef.current = null;
5010
5910
  return;
5011
5911
  }
5012
5912
 
5913
+ const unwrappedSelection = unwrapMoveTextLatex(selectedLatex);
5914
+ const previousMoveState = moveTextStateRef.current;
5915
+ const baseLatex = unwrappedSelection.baseLatex;
5916
+ const isContinuingSameSelection = previousMoveState?.baseLatex === baseLatex;
5917
+ const currentOffsetX = isContinuingSameSelection ? previousMoveState.offsetX : unwrappedSelection.offsetX;
5918
+ const currentOffsetY = isContinuingSameSelection ? previousMoveState.offsetY : unwrappedSelection.offsetY;
5919
+ const nextOffsetX = currentOffsetX + delta.x;
5920
+ const nextOffsetY = currentOffsetY + delta.y;
5921
+ const movedLatex = wrapMoveTextLatex(baseLatex, nextOffsetX, nextOffsetY);
5922
+
5923
+ moveTextStateRef.current = {
5924
+ baseLatex,
5925
+ offsetX: nextOffsetX,
5926
+ offsetY: nextOffsetY,
5927
+ };
5928
+
5013
5929
  if (typeof mf.insert === 'function') {
5014
- mf.insert(template.selection, {
5930
+ mf.insert(movedLatex, {
5931
+ format: 'latex',
5015
5932
  insertionMode: 'replaceSelection',
5016
- selectionMode: 'after',
5933
+ selectionMode: 'item',
5017
5934
  });
5018
5935
  return;
5019
5936
  }
5020
5937
 
5021
- mf.executeCommand(['insert', template.selection]);
5938
+ mf.executeCommand(['insert', movedLatex]);
5022
5939
  }, []);
5023
5940
 
5024
5941
  const handleMatrixInsert = useCallback((type, rows, cols) => {
@@ -5059,7 +5976,7 @@ function MathChemPopup({ mode, onInsert, onClose, initialLatex, initialDirection
5059
5976
  : undefined;
5060
5977
 
5061
5978
  return (
5062
- <div ref={popupRef} className={`cme-editor-popup ${windowMode}`} style={popupStyle} onMouseDown={(e) => e.stopPropagation()}>
5979
+ <div ref={popupRef} className={`cme-editor-popup ${windowMode}${isDragging ? ' dragging' : ''}`} style={popupStyle} onMouseDown={(e) => e.stopPropagation()}>
5063
5980
  <div className="cme-popup-header" onPointerDown={handlePopupDragStart}>
5064
5981
  <span>{mode === 'math' ? 'MathType' : 'ChemType'}</span>
5065
5982
  <div className="cme-popup-actions" onPointerDown={(e) => e.stopPropagation()}>
@@ -5077,7 +5994,7 @@ function MathChemPopup({ mode, onInsert, onClose, initialLatex, initialDirection
5077
5994
  aria-label={windowMode === 'maximized' ? 'Restore window' : 'Maximize window'}
5078
5995
  onClick={() => setWindowMode((current) => (current === 'maximized' ? 'normal' : 'maximized'))}
5079
5996
  >
5080
- {windowMode === 'maximized' ? 'o' : '[]'}
5997
+ {windowMode === 'maximized' ? 'o' : '⤢ '}
5081
5998
  </button>
5082
5999
  <button
5083
6000
  type="button"
@@ -5097,19 +6014,19 @@ function MathChemPopup({ mode, onInsert, onClose, initialLatex, initialDirection
5097
6014
  {groups.map((group, index) => (
5098
6015
  <button
5099
6016
  key={group.id || index}
5100
- className={`cme-group-tab${activeGroup === index ? ' active' : ''}`}
6017
+ className={`cme-group-tab${isMathMode ? ' cme-group-tab--math' : ''}${activeGroup === index ? ' active' : ''}`}
5101
6018
  type="button"
5102
6019
  onClick={() => {
5103
6020
  setActiveGroup(index);
5104
6021
  setActiveMatrix(null);
5105
6022
  }}
5106
6023
  >
5107
- {group.label}
6024
+ <span className="cme-group-tab-label">{group.label}</span>
5108
6025
  </button>
5109
6026
  ))}
5110
6027
  </div>
5111
6028
 
5112
- <div className={`cme-toolbar-items${activeGroup === 0 && isMathMode ? ' cme-toolbar-items--first-tab' : ''}${activeGroupConfig.id === 'greek' ? ' cme-toolbar-items--greek' : ''}${activeGroupConfig.id === 'relations' ? ' cme-toolbar-items--relations' : ''}${isMathMode ? ' cme-toolbar-items--math-compact' : ''}`}>
6029
+ <div className={`cme-toolbar-items${activeGroup === 0 && isMathMode ? ' cme-toolbar-items--first-tab' : ''}${activeGroupConfig.id === 'greek' ? ' cme-toolbar-items--greek' : ''}${activeGroupConfig.id === 'relations' ? ' cme-toolbar-items--relations' : ''}${activeGroupConfig.id === 'arrows' ? ' cme-toolbar-items--arrows' : ''}${activeGroupConfig.id === 'brackets' ? ' cme-toolbar-items--brackets' : ''}${activeGroupConfig.id === 'matrix' ? ' cme-toolbar-items--matrix' : ''}${isMathMode ? ' cme-toolbar-items--math-compact' : ''}`}>
5113
6030
  {(() => {
5114
6031
  const activeItems = activeGroupConfig.items || [];
5115
6032
 
@@ -5121,27 +6038,40 @@ function MathChemPopup({ mode, onInsert, onClose, initialLatex, initialDirection
5121
6038
  return acc;
5122
6039
  }, {});
5123
6040
  const greekLayouts = {
5124
- 'Lowercase Greek Letters': 10,
5125
- 'Uppercase Greek Letters': 2,
5126
- 'Fraktur / Gothic Symbols': 2,
5127
- 'Hebrew Mathematical Symbols': 1,
5128
- 'Arabic-Indic Numerals': 1,
5129
- 'Eastern Arabic-Indic Numerals': 1,
5130
- 'Blackboard Bold / Number Sets': 2,
6041
+ 'Lowercase Greek Letters': { cols: 10, rows: 3 },
6042
+ 'Greek Letter Picker': { cols: 1, rows: 3 },
6043
+ 'Blackboard Bold / Number Sets': { cols: 2, rows: 3 },
6044
+ 'Blackboard Bold Picker': { cols: 1, rows: 3 },
6045
+ 'Fraktur Symbols': { cols: 1, rows: 3 },
6046
+ 'Script Symbols': { cols: 1, rows: 3 },
6047
+ 'Fraktur / Script Picker': { cols: 1, rows: 3 },
6048
+ 'Hebrew Mathematical Symbols': { cols: 1, rows: 3 },
6049
+ 'Hebrew Symbol Picker': { cols: 1, rows: 3 },
6050
+ 'Arabic-Indic Numeral Systems': { cols: 1, rows: 3 },
6051
+ 'Periodic Table Symbols': { cols: 2, rows: 3 },
6052
+ 'Periodic Table Picker': { cols: 1, rows: 3 },
5131
6053
  };
5132
6054
 
6055
+ const greekEntries = Object.entries(groupedGreekItems);
6056
+
5133
6057
  return (
5134
6058
  <div className="cme-greek-panel">
5135
- {Object.entries(groupedGreekItems).map(([category, items]) => {
5136
- const cols = greekLayouts[category] || 2;
6059
+ {greekEntries.map(([category, items], index) => {
6060
+ const layout = greekLayouts[category] || { cols: 2, rows: Math.max(1, Math.ceil(items.length / 2)) };
6061
+ const cols = layout.cols;
6062
+ const rows = layout.rows;
6063
+ const isGreekPickerColumn = items.every((entry) => entry.cls?.includes('arrow-picker-tool'));
6064
+ const nextItems = greekEntries[index + 1]?.[1] || [];
6065
+ const isBeforeGreekPickerColumn = nextItems.length > 0 && nextItems.every((entry) => entry.cls?.includes('arrow-picker-tool'));
5137
6066
 
5138
6067
  return (
5139
6068
  <section
5140
6069
  key={category}
5141
- className={`cme-symbol-subgroup cme-greek-subgroup${isMathMode ? ' cme-symbol-subgroup--compact' : ''}`}
6070
+ className={`cme-symbol-subgroup cme-greek-subgroup${category === 'Fraktur Symbols' ? ' cme-greek-subgroup--no-right-border' : ''}${isGreekPickerColumn ? ' cme-greek-subgroup--picker' : ''}${isBeforeGreekPickerColumn ? ' cme-greek-subgroup--before-picker' : ''}${isMathMode ? ' cme-symbol-subgroup--compact' : ''}${activeMathSubgroupClassName}`}
5142
6071
  style={{
5143
6072
  gridTemplateColumns: `repeat(${cols}, auto)`,
5144
- gridTemplateRows: `repeat(${Math.ceil(items.length / cols)}, auto)`,
6073
+ gridTemplateRows: `repeat(${rows}, auto)`,
6074
+ '--cme-greek-rows': `repeat(${rows}, auto)`,
5145
6075
  }}
5146
6076
  >
5147
6077
  {items.map((item, i) => {
@@ -5319,9 +6249,288 @@ function MathChemPopup({ mode, onInsert, onClose, initialLatex, initialDirection
5319
6249
  if (activeGroupConfig.id === 'relations') {
5320
6250
  subgroups = subgroups.map((subgroup) => ({
5321
6251
  ...subgroup,
5322
- cols: Math.max(1, Math.ceil(subgroup.items.length / 2)),
6252
+ cols: Math.max(1, Math.ceil(subgroup.items.length / 3)),
5323
6253
  }));
5324
6254
  }
6255
+
6256
+ if (activeGroupConfig.id === 'roots-main') {
6257
+ const groupedItems = subgroups.map((subgroup) => subgroup.items || []);
6258
+ const [
6259
+ fractions = [],
6260
+ scripts = [],
6261
+ brackets = [],
6262
+ operators = [],
6263
+ relations = [],
6264
+ symbols = [],
6265
+ clipboard = [],
6266
+ formatting = [],
6267
+ rtl = [],
6268
+ dropdowns = [],
6269
+ ] = groupedItems;
6270
+ const pick = (items, order) => order.map((index) => items[index]).filter(Boolean);
6271
+
6272
+ subgroups = [
6273
+ {
6274
+ cols: 2,
6275
+ rows: 2,
6276
+ flow: 'row',
6277
+ equalColumns: true,
6278
+ className: ' cme-roots-main-subgroup',
6279
+ items: pick(fractions, [0, 2, 1, 3]),
6280
+ },
6281
+ {
6282
+ cols: 1,
6283
+ rows: 2,
6284
+ flow: 'row',
6285
+ equalColumns: true,
6286
+ className: ' cme-roots-main-subgroup cme-roots-main-subgroup--stack',
6287
+ items: pick(scripts, [0, 1]),
6288
+ },
6289
+ {
6290
+ cols: 2,
6291
+ rows: 2,
6292
+ flow: 'row',
6293
+ equalColumns: true,
6294
+ className: ' cme-roots-main-subgroup',
6295
+ items: pick(brackets, [0, 2, 1, 3]),
6296
+ },
6297
+ {
6298
+ cols: 2,
6299
+ rows: 3,
6300
+ flow: 'row',
6301
+ equalColumns: true,
6302
+ className: ' cme-roots-main-subgroup',
6303
+ items: pick(operators, [0, 4, 2, 5, 1, 3]),
6304
+ },
6305
+ {
6306
+ cols: 2,
6307
+ rows: 3,
6308
+ flow: 'row',
6309
+ equalColumns: true,
6310
+ className: ' cme-roots-main-subgroup',
6311
+ items: pick(relations, [0, 1, 5, 4, 3, 2]),
6312
+ },
6313
+ {
6314
+ cols: 1,
6315
+ rows: 2,
6316
+ flow: 'row',
6317
+ equalColumns: true,
6318
+ className: ' cme-roots-main-subgroup cme-roots-main-subgroup--stack',
6319
+ items: [],
6320
+ },
6321
+ {
6322
+ cols: 1,
6323
+ rows: 3,
6324
+ flow: 'row',
6325
+ equalColumns: true,
6326
+ className: ' cme-roots-main-subgroup cme-roots-main-subgroup--stack',
6327
+ items: pick(symbols, [0, 1, 2]),
6328
+ },
6329
+ {
6330
+ cols: 2,
6331
+ rows: 3,
6332
+ flow: 'row',
6333
+ equalColumns: true,
6334
+ className: ' cme-roots-main-subgroup',
6335
+ items: pick(clipboard, [1, 3, 0, 4, 2, 5]),
6336
+ },
6337
+ {
6338
+ cols: 2,
6339
+ rows: 3,
6340
+ flow: 'row',
6341
+ equalColumns: true,
6342
+ className: ' cme-roots-main-subgroup cme-roots-main-subgroup--format',
6343
+ items: pick(formatting, [0, 5, 1, 3, 2, 4]),
6344
+ },
6345
+ {
6346
+ cols: 1,
6347
+ rows: 1,
6348
+ flow: 'row',
6349
+ equalColumns: true,
6350
+ className: ' cme-roots-main-subgroup cme-roots-main-subgroup--stack',
6351
+ items: pick(rtl, [0]),
6352
+ },
6353
+ {
6354
+ cols: 1,
6355
+ rows: 2,
6356
+ flow: 'row',
6357
+ equalColumns: true,
6358
+ className: ' cme-roots-main-subgroup cme-roots-main-subgroup--dropdown',
6359
+ items: pick(dropdowns, [0, 1]),
6360
+ },
6361
+ ].filter((subgroup) => subgroup.items.length > 0);
6362
+ }
6363
+
6364
+ if (activeGroupConfig.id === 'arrows') {
6365
+ const groupedItems = subgroups.map((subgroup) => subgroup.items || []);
6366
+ const [
6367
+ arrowBasics = [],
6368
+ ellipsis = [],
6369
+ dashes = [],
6370
+ arrowLabels = [],
6371
+ accents = [],
6372
+ ] = groupedItems;
6373
+ const pick = (items, order) => order.map((index) => items[index]).filter(Boolean);
6374
+ const splitPicker = (items) => ({
6375
+ regular: items.filter((item) => item?.action !== 'ARROW_PICKER' && item?.action !== 'ARROW_LABEL_PICKER'),
6376
+ picker: items.find((item) => item?.action === 'ARROW_PICKER' || item?.action === 'ARROW_LABEL_PICKER') || null,
6377
+ });
6378
+ const basicSplit = splitPicker(arrowBasics);
6379
+ const labelSplit = splitPicker(arrowLabels);
6380
+
6381
+ subgroups = [
6382
+ {
6383
+ cols: 3,
6384
+ trackCols: 6,
6385
+ rows: 3,
6386
+ flow: 'row',
6387
+ equalColumns: true,
6388
+ className: ' cme-arrows-subgroup cme-arrows-subgroup--before-picker',
6389
+ items: pick(basicSplit.regular, [1, 0, 2, 4, 3, 5, 6, 7]),
6390
+ },
6391
+ basicSplit.picker ? {
6392
+ cols: 1,
6393
+ rows: 3,
6394
+ flow: 'row',
6395
+ equalColumns: true,
6396
+ className: ' cme-arrows-subgroup cme-arrows-subgroup--picker',
6397
+ items: [basicSplit.picker],
6398
+ } : null,
6399
+ {
6400
+ cols: 2,
6401
+ trackCols: 2,
6402
+ rows: 3,
6403
+ flow: 'row',
6404
+ equalColumns: true,
6405
+ className: ' cme-arrows-subgroup',
6406
+ items: pick(ellipsis, [0, 1, 2, 3, 4]),
6407
+ },
6408
+ {
6409
+ cols: 1,
6410
+ rows: 3,
6411
+ flow: 'row',
6412
+ equalColumns: true,
6413
+ className: ' cme-arrows-subgroup cme-arrows-subgroup--stack',
6414
+ items: pick(dashes, [0, 1, 2]),
6415
+ },
6416
+ {
6417
+ cols: 3,
6418
+ rows: 2,
6419
+ flow: 'row',
6420
+ equalColumns: true,
6421
+ className: ' cme-arrows-subgroup cme-arrows-subgroup--before-picker',
6422
+ items: pick(labelSplit.regular, [0, 2, 4, 1, 3, 5]),
6423
+ },
6424
+ labelSplit.picker ? {
6425
+ cols: 1,
6426
+ rows: 2,
6427
+ flow: 'row',
6428
+ equalColumns: true,
6429
+ className: ' cme-arrows-subgroup cme-arrows-subgroup--picker',
6430
+ items: [labelSplit.picker],
6431
+ } : null,
6432
+ {
6433
+ cols: 2,
6434
+ trackCols: 2,
6435
+ rows: 2,
6436
+ flow: 'row',
6437
+ equalColumns: true,
6438
+ stretchLastRow: true,
6439
+ className: ' cme-arrows-subgroup',
6440
+ items: pick(accents, [0, 1, 2, 3]),
6441
+ },
6442
+ ].filter((subgroup) => subgroup && subgroup.items.length > 0);
6443
+ }
6444
+
6445
+ if (activeGroupConfig.id === 'brackets') {
6446
+ const groupedItems = subgroups.map((subgroup) => subgroup.items || []);
6447
+ const [
6448
+ bracketBasics = [],
6449
+ braceFrames = [],
6450
+ accents = [],
6451
+ enclosureFrames = [],
6452
+ strikeDecorations = [],
6453
+ ] = groupedItems;
6454
+ const pick = (items, order) => order.map((index) => items[index]).filter(Boolean);
6455
+ const splitRelationPicker = (items) => ({
6456
+ regular: items.filter((item) => item?.action !== 'RELATION_MORE_PICKER'),
6457
+ picker: items.find((item) => item?.action === 'RELATION_MORE_PICKER') || null,
6458
+ });
6459
+ const bracketSplit = splitRelationPicker(bracketBasics);
6460
+ const enclosureSplit = splitRelationPicker(enclosureFrames);
6461
+ const strikeSplit = splitRelationPicker(strikeDecorations);
6462
+ const accentItems = pick(accents, [0, 1, 2, 3, 4, 5, 6, 7]);
6463
+ if (accentItems[6]) {
6464
+ accentItems[6] = { ...accentItems[6], gridColumn: '2' };
6465
+ }
6466
+
6467
+ subgroups = [
6468
+ {
6469
+ cols: 3,
6470
+ rows: 2,
6471
+ flow: 'row',
6472
+ equalColumns: true,
6473
+ className: ' cme-brackets-subgroup cme-brackets-subgroup--before-picker',
6474
+ items: pick(bracketSplit.regular, [0, 2, 4, 1, 3, 5]),
6475
+ },
6476
+ bracketSplit.picker ? {
6477
+ cols: 1,
6478
+ rows: 2,
6479
+ flow: 'row',
6480
+ equalColumns: true,
6481
+ className: ' cme-brackets-subgroup cme-brackets-subgroup--picker',
6482
+ items: [bracketSplit.picker],
6483
+ } : null,
6484
+ {
6485
+ cols: 2,
6486
+ rows: 2,
6487
+ flow: 'row',
6488
+ equalColumns: true,
6489
+ className: ' cme-brackets-subgroup',
6490
+ items: pick(braceFrames, [0, 2, 1, 3]),
6491
+ },
6492
+ {
6493
+ cols: 3,
6494
+ rows: 3,
6495
+ flow: 'row',
6496
+ equalColumns: true,
6497
+ className: ' cme-brackets-subgroup',
6498
+ items: accentItems,
6499
+ },
6500
+ {
6501
+ cols: 3,
6502
+ rows: 2,
6503
+ flow: 'row',
6504
+ equalColumns: true,
6505
+ className: ' cme-brackets-subgroup cme-brackets-subgroup--before-picker',
6506
+ items: pick(enclosureSplit.regular, [0, 2, 4, 1, 3, 5]),
6507
+ },
6508
+ enclosureSplit.picker ? {
6509
+ cols: 1,
6510
+ rows: 2,
6511
+ flow: 'row',
6512
+ equalColumns: true,
6513
+ className: ' cme-brackets-subgroup cme-brackets-subgroup--picker',
6514
+ items: [enclosureSplit.picker],
6515
+ } : null,
6516
+ {
6517
+ cols: 2,
6518
+ rows: 2,
6519
+ flow: 'row',
6520
+ equalColumns: true,
6521
+ className: ' cme-brackets-subgroup cme-brackets-subgroup--before-picker',
6522
+ items: pick(strikeSplit.regular, [0, 2, 1, 3]),
6523
+ },
6524
+ strikeSplit.picker ? {
6525
+ cols: 1,
6526
+ rows: 2,
6527
+ flow: 'row',
6528
+ equalColumns: true,
6529
+ className: ' cme-brackets-subgroup cme-brackets-subgroup--picker',
6530
+ items: [strikeSplit.picker],
6531
+ } : null,
6532
+ ].filter((subgroup) => subgroup && subgroup.items.length > 0);
6533
+ }
5325
6534
  } else {
5326
6535
  // Legacy grouping for tabs without explicit separators (chunk by 4 items = 2x2 grid)
5327
6536
  const size = 4;
@@ -5333,16 +6542,31 @@ function MathChemPopup({ mode, onInsert, onClose, initialLatex, initialDirection
5333
6542
  }
5334
6543
  }
5335
6544
 
5336
- return subgroups.map((subgroup, chunkIndex) => (
6545
+ return subgroups.map((subgroup, chunkIndex) => {
6546
+ const baseCols = subgroup.cols || 1;
6547
+ const actualCols = subgroup.trackCols || baseCols;
6548
+ const totalItems = subgroup.items.length;
6549
+ const remainder = baseCols > 0 ? (totalItems % baseCols) : 0;
6550
+ const lastRowCount = remainder === 0 ? baseCols : remainder;
6551
+ const lastRowStartIndex = totalItems - lastRowCount;
6552
+ const defaultSpan = Math.max(1, Math.floor(actualCols / baseCols));
6553
+
6554
+ return (
5337
6555
  <div
5338
6556
  key={chunkIndex}
5339
- className={`cme-symbol-subgroup${isMathMode ? ' cme-symbol-subgroup--compact' : ''}`}
6557
+ className={`cme-symbol-subgroup${subgroup.className || ''}${isMathMode ? ' cme-symbol-subgroup--compact' : ''}${activeMathSubgroupClassName}`}
5340
6558
  style={{
5341
- gridTemplateColumns: `repeat(${subgroup.cols}, auto)`,
5342
- gridTemplateRows: `repeat(${Math.ceil(subgroup.items.length / subgroup.cols)}, auto)`
6559
+ gridTemplateColumns: `repeat(${actualCols}, ${subgroup.equalColumns ? 'minmax(0, 1fr)' : 'auto'})`,
6560
+ gridTemplateRows: `repeat(${subgroup.rows || Math.ceil(subgroup.items.length / baseCols)}, auto)`,
6561
+ gridAutoFlow: subgroup.flow || 'column',
6562
+ ...(subgroup.rows ? { '--cme-subgroup-rows': `repeat(${subgroup.rows}, minmax(0, 1fr))` } : {}),
5343
6563
  }}
5344
6564
  >
5345
6565
  {subgroup.items.map((item, i) => {
6566
+ const isLastRowStretchItem = Boolean(subgroup.stretchLastRow) && totalItems > 0 && i >= lastRowStartIndex && lastRowCount < baseCols;
6567
+ const itemGridColumn = isLastRowStretchItem
6568
+ ? `span ${Math.max(1, Math.floor(actualCols / lastRowCount))}`
6569
+ : (defaultSpan > 1 ? `span ${defaultSpan}` : undefined);
5346
6570
  const currentGroup = activeGroupConfig;
5347
6571
  const groupKey = currentGroup.id || currentGroup.label || activeGroup;
5348
6572
  const buttonKey = `${groupKey}-${chunkIndex * 4 + i}-${item.insert || item.action || item.label}`;
@@ -5373,7 +6597,8 @@ function MathChemPopup({ mode, onInsert, onClose, initialLatex, initialDirection
5373
6597
  width: item.width || '60px',
5374
6598
  boxSizing: 'border-box',
5375
6599
  margin: '2px 0',
5376
- gridColumn: (subgroup.cols === 3) ? 'span 1' : ((subgroup.cols === 1) ? 'span 1' : 'span 2')
6600
+ gridColumn: item.gridColumn || itemGridColumn || ((subgroup.cols === 3) ? 'span 1' : ((subgroup.cols === 1) ? 'span 1' : 'span 2')),
6601
+ gridRow: item.gridRow,
5377
6602
  }}
5378
6603
  onMouseDown={(e) => {
5379
6604
  e.preventDefault();
@@ -5396,7 +6621,7 @@ function MathChemPopup({ mode, onInsert, onClose, initialLatex, initialDirection
5396
6621
  );
5397
6622
  }
5398
6623
 
5399
- if (currentGroup.isMatrix && !item.directInsert) {
6624
+ if (currentGroup.isMatrix && !item.directInsert && !item.action) {
5400
6625
  return (
5401
6626
  <div
5402
6627
  key={i}
@@ -5459,6 +6684,7 @@ function MathChemPopup({ mode, onInsert, onClose, initialLatex, initialDirection
5459
6684
  type="button"
5460
6685
  className={`cme-btn${currentGroup.isTemplate ? ' template' : ''}${isMathMode ? ' cme-btn--compact' : ''}${item.cls ? ` ${item.cls}` : ''}${isBtnActive ? ' active' : ''}`}
5461
6686
  title={item.title || item.insert}
6687
+ style={item.gridColumn || item.gridRow || itemGridColumn ? { gridColumn: item.gridColumn || itemGridColumn, gridRow: item.gridRow } : undefined}
5462
6688
  onMouseDown={(e) => {
5463
6689
  e.preventDefault();
5464
6690
  const mf = popupMfRef.current;
@@ -5672,7 +6898,8 @@ function MathChemPopup({ mode, onInsert, onClose, initialLatex, initialDirection
5672
6898
  );
5673
6899
  })}
5674
6900
  </div>
5675
- ));
6901
+ );
6902
+ });
5676
6903
  })()}
5677
6904
  </div>
5678
6905
  </div>
@@ -5747,6 +6974,8 @@ function MathChemPopup({ mode, onInsert, onClose, initialLatex, initialDirection
5747
6974
  {showRelationMorePicker && createPortal(
5748
6975
  <RelationMorePickerPopover
5749
6976
  position={showRelationMorePicker}
6977
+ picker={showRelationMorePicker.picker}
6978
+ popupBounds={popupRef.current?.getBoundingClientRect?.() || null}
5750
6979
  items={RELATION_MORE_PICKERS[showRelationMorePicker.picker] || []}
5751
6980
  onInsert={(latex) => {
5752
6981
  insertAtCursor(latex);
@@ -6310,7 +7539,7 @@ function CkEditor({ value, onChange, className = '' }) {
6310
7539
  width: auto !important;
6311
7540
  max-width: 100% !important;
6312
7541
  pointer-events: none !important;
6313
- color: #000000 !important;
7542
+ color: #ffffff !important;
6314
7543
  }
6315
7544
  .ck-math-widget[data-dir="rtl"] {
6316
7545
  direction: rtl !important;
@@ -6326,17 +7555,17 @@ function CkEditor({ value, onChange, className = '' }) {
6326
7555
  `}</style>
6327
7556
 
6328
7557
  {/* Insert Options Bar */}
6329
- <div className="ck-editor-meta">
6330
- <label className="ck-editor-mode-toggle">
6331
- <input
6332
- className="ck-editor-mode-checkbox"
6333
- type="checkbox"
6334
- checked={insertAsUnicode}
6335
- onChange={(e) => setInsertAsUnicode(e.target.checked)}
6336
- />
6337
- <span>Insert as plain text instead of LaTeX formatting</span>
6338
- </label>
6339
- </div>
7558
+ {/* <div className="ck-editor-meta">
7559
+ <label className="ck-editor-mode-toggle">
7560
+ <input
7561
+ className="ck-editor-mode-checkbox"
7562
+ type="checkbox"
7563
+ checked={insertAsUnicode}
7564
+ onChange={(e) => setInsertAsUnicode(e.target.checked)}
7565
+ />
7566
+ <span>Insert as plain text instead of LaTeX formatting</span>
7567
+ </label>
7568
+ </div> */}
6340
7569
 
6341
7570
  <CKEditor
6342
7571
  editor={ClassicEditor}
@@ -6390,3 +7619,6 @@ function CkEditor({ value, onChange, className = '' }) {
6390
7619
 
6391
7620
  export default CkEditor;
6392
7621
 
7622
+
7623
+
7624
+