@barocss/math-editor 0.4.0 → 0.5.0

package/dist/math-layout.d.ts

@@ -0,0 +1,12 @@
+import { type MathDocument } from './model.js';
+export type MathLayoutStyle = 'display' | 'text' | 'script' | 'scriptscript';
+/** Resolve mathematical style from model slots, independently of DOM ancestry.
+ * These values control operator presentation only; they are not saved in JSON.
+ */
+export declare function mathLayout(document: MathDocument, mode?: 'block' | 'inline'): {
+    rows: Map<string, MathLayoutStyle>;
+    operators: Map<string, {
+        style: MathLayoutStyle;
+        placement: "side" | "stacked";
+    }>;
+};

package/dist/math-layout.js

@@ -0,0 +1,59 @@
+import { documentRows, isGrid, } from './model.js';
+const scriptStyle = (style) => style === 'display' || style === 'text' ? 'script' : 'scriptscript';
+const large = new Set([
+    'sum',
+    'product',
+    'integral',
+    'doubleIntegral',
+    'tripleIntegral',
+    'contourIntegral',
+]);
+const limits = new Set(['limit', 'limsup', 'liminf']);
+/** Resolve mathematical style from model slots, independently of DOM ancestry.
+ * These values control operator presentation only; they are not saved in JSON.
+ */
+export function mathLayout(document, mode = 'block') {
+    const rows = new Map();
+    const operators = new Map();
+    const visit = (row, style) => {
+        rows.set(row.id, style);
+        for (const node of row.children) {
+            if (node.type === 'text')
+                continue;
+            const own = !isGrid(node) && node.mathStyle ? node.mathStyle : style;
+            if (large.has(node.type) || limits.has(node.type)) {
+                const integral = node.type.toLowerCase().includes('integral');
+                const explicit = !isGrid(node) ? node.limits : undefined;
+                operators.set(node.id, {
+                    style: own,
+                    placement: explicit === true || (explicit !== false && own === 'display' && !integral)
+                        ? 'stacked'
+                        : 'side',
+                });
+            }
+            node.slots.forEach((slot, index) => visit(slot, slotStyle(node, index, own)));
+        }
+    };
+    documentRows(document).forEach((row) => visit(row, mode === 'inline' ? 'text' : 'display'));
+    return { rows, operators };
+}
+function slotStyle(node, index, style) {
+    if (node.type === 'fraction' || node.type === 'binomial')
+        return style === 'display' ? 'text' : scriptStyle(style);
+    if (['superscript', 'subscript', 'scripts'].includes(node.type))
+        return index === 0 ? style : scriptStyle(style);
+    if (node.type === 'indexedRoot' && index === 0)
+        return 'scriptscript';
+    if (large.has(node.type))
+        return index < 2 ? scriptStyle(style) : style;
+    if (limits.has(node.type))
+        return index === 0 ? scriptStyle(style) : style;
+    if (['overset', 'underset', 'overbrace', 'underbrace', 'xrightarrow', 'xleftarrow'].includes(node.type))
+        return node.type.startsWith('x') || index === 0 ? scriptStyle(style) : style;
+    // AMS aligned cells explicitly enter display style, even inside a fraction.
+    if (node.type === 'aligned')
+        return 'display';
+    if (node.type === 'matrix' || node.type === 'cases')
+        return 'text';
+    return style;
+}

package/dist/math-spacing.d.ts

@@ -0,0 +1,13 @@
+import type { MathRow } from './model.js';
+export interface RunSpacing {
+    before: number;
+    after: number;
+    tightBefore?: number;
+    tightAfter?: number;
+}
+/** Text-run spacing in math units (18 mu = 1 em).
+ * Empty caret boundaries do not participate. Named functions and fractions
+ * share run spacing. Other structures still own their outer spacing.
+ * Literal text rows must not use these values.
+ */
+export declare function mathRunSpacing(row: MathRow): Map<string, RunSpacing>;

package/dist/math-spacing.js

@@ -0,0 +1,87 @@
+import { tokenizeMathText } from './tokens.js';
+const binary = new Set(Array.from('+−-±∓×·÷∗∪∩∖⊕⊗∧∨'));
+const relation = new Set(Array.from('=<>≤≥⩽⩾≠≈≃≅∼≡∝∈∉∋⊂⊃⊆⊇⊈⊥∥←→↔↑↓↕⇐⇒⇔⇑⇓⇕↦'));
+function atom(text) {
+    if (binary.has(text))
+        return 'binary';
+    if (relation.has(text) || /^[\u2190-\u21ff\u27f0-\u27ff\u2900-\u297f]$/u.test(text))
+        return 'relation';
+    if ('([{'.includes(text) && text.length === 1)
+        return 'open';
+    if (')]}'.includes(text) && text.length === 1)
+        return 'close';
+    if (text === ',' || text === ';')
+        return 'punctuation';
+    return 'ordinary';
+}
+/** Text-run spacing in math units (18 mu = 1 em).
+ * Empty caret boundaries do not participate. Named functions and fractions
+ * share run spacing. Other structures still own their outer spacing.
+ * Literal text rows must not use these values.
+ */
+export function mathRunSpacing(row) {
+    const entries = row.children.flatMap((node) => node.type === 'text'
+        ? tokenizeMathText(node.text)
+            .filter((token) => token.text && token.kind !== 'space')
+            .map((token) => ({ key: `${node.id}:${token.start}`, atom: atom(token.text) }))
+        : [
+            {
+                key: ['operatorName', 'fraction'].includes(node.type) ? node.id : '',
+                atom: (node.type === 'operatorName' ? 'operator' : 'ordinary'),
+            },
+        ]);
+    // A leading/trailing binary sign is unary. The same is true after an open
+    // fence, relation or operator, and before a closing fence or punctuation.
+    for (let index = 0; index < entries.length; index++) {
+        const entry = entries[index];
+        if (entry.atom !== 'binary')
+            continue;
+        const left = entries[index - 1]?.atom;
+        const right = entries[index + 1]?.atom;
+        if (!left ||
+            !right ||
+            ['binary', 'relation', 'open', 'punctuation', 'operator'].includes(left) ||
+            ['relation', 'close', 'punctuation'].includes(right))
+            entry.atom = 'ordinary';
+    }
+    const result = new Map();
+    entries.forEach((entry) => {
+        if (entry.key)
+            result.set(entry.key, { before: 0, after: 0 });
+    });
+    for (let index = 1; index < entries.length; index++) {
+        const left = entries[index - 1];
+        const right = entries[index];
+        let gap = 0;
+        if (left.atom !== 'open') {
+            if (right.atom === 'relation' &&
+                ['ordinary', 'close', 'punctuation', 'operator'].includes(left.atom))
+                gap = 5;
+            else if (left.atom === 'relation' && ['ordinary', 'open', 'operator'].includes(right.atom))
+                gap = 5;
+            else if (right.atom === 'binary' && ['ordinary', 'close'].includes(left.atom))
+                gap = 4;
+            else if (left.atom === 'binary' && ['ordinary', 'open', 'operator'].includes(right.atom))
+                gap = 4;
+            else if (left.atom === 'punctuation')
+                gap = 3;
+            else if ((right.atom === 'operator' && ['ordinary', 'close', 'operator'].includes(left.atom)) ||
+                (left.atom === 'operator' && right.atom === 'ordinary'))
+                gap = 3;
+        }
+        const tight = gap === 3 &&
+            (left.atom === 'operator' || right.atom === 'operator') &&
+            left.atom !== 'punctuation';
+        if (right.key) {
+            result.get(right.key).before = gap;
+            if (tight)
+                result.get(right.key).tightBefore = gap;
+        }
+        else if (left.key) {
+            result.get(left.key).after = gap;
+            if (tight)
+                result.get(left.key).tightAfter = gap;
+        }
+    }
+    return result;
+}

package/dist/model.d.ts

@@ -64,6 +64,10 @@ export declare const namedFunctions: readonly ["sin", "cos", "tan", "cot", "sec"
 /** Wrap the selection, or the preceding simple operand; never swallow a preceding + or =. */
 export declare function insertStructure(state: MathState, kind: StructureKind, consumeOperand?: boolean, mathStyle?: 'display' | 'text'): MathState;
 export declare function moveCaret(state: MathState, direction: -1 | 1): MathState;
+/** Remove the wrapper of an empty slot while retaining its other slots' content.
+ * Grid cells keep their shape; row/column deletion has its own explicit commands.
+ */
+export declare function unwrapEmptySlot(state: MathState): MathState;
 /** At the right edge of a structure, unwrap it instead of silently deleting its contents. */
 export declare function unwrapPrevious(state: MathState): MathState;
 export declare function toLatex(document: MathDocument): string;

package/dist/model.js

@@ -233,6 +233,47 @@ export function moveCaret(state, direction) {
     const offset = direction < 0 ? next.text.length : 0;
     return { ...state, caret: { id: next.id, start: offset, end: offset } };
 }
+/** Remove the wrapper of an empty slot while retaining its other slots' content.
+ * Grid cells keep their shape; row/column deletion has its own explicit commands.
+ */
+export function unwrapEmptySlot(state) {
+    if (state.caret.start !== 0 || state.caret.end !== 0)
+        return state;
+    const visit = (line) => {
+        for (let index = 0; index < line.children.length; index++) {
+            const node = line.children[index];
+            if (node.type === 'text')
+                continue;
+            const emptySlot = node.slots.findIndex((slot) => slot.children.length === 1 &&
+                slot.children[0].id === state.caret.id &&
+                slot.children[0].type === 'text' &&
+                slot.children[0].text === '');
+            if (emptySlot >= 0) {
+                if (isGrid(node))
+                    return state;
+                // Preserve the remaining script or radicand instead of flattening it.
+                if ((node.type === 'indexedRoot' && emptySlot === 0) ||
+                    (node.type === 'scripts' && emptySlot > 0))
+                    return unwrapPrevious(state);
+                const after = line.children[index + 1];
+                if (after?.type !== 'text')
+                    return state;
+                return unwrapPrevious({ ...state, caret: { id: after.id, start: 0, end: 0 } });
+            }
+            for (const slot of node.slots) {
+                const next = visit(slot);
+                if (next)
+                    return next;
+            }
+        }
+    };
+    for (const line of documentRows(state.document)) {
+        const next = visit(line);
+        if (next)
+            return next;
+    }
+    return state;
+}
 /** At the right edge of a structure, unwrap it instead of silently deleting its contents. */
 export function unwrapPrevious(state) {
     if (state.caret.start !== 0 || state.caret.end !== 0)
@@ -308,12 +349,12 @@ const escapeText = (text) => Array.from(text)
         '{': '\\{',
         '}': '\\}',
         _: '\\_',
-        '^': '\\textasciicircum{}',
+        '^': '\\char"005E{}',
         '%': '\\%',
         $: '\\$',
         '#': '\\#',
         '&': '\\&',
-        '~': '\\textasciitilde{}',
+        '~': '\\char"007E{}',
         ' ': '\\ ',
     }[c] ??
     c)
@@ -364,8 +405,12 @@ export function toLatex(document) {
                 return `\\${n.mathStyle === 'display' ? 'dbinom' : n.mathStyle === 'text' ? 'tbinom' : 'binom'}{${a}}{${b}}`;
             case 'fraction':
                 return `\\${n.mathStyle === 'display' ? 'dfrac' : n.mathStyle === 'text' ? 'tfrac' : 'frac'}{${a}}{${b}}`;
-            case 'indexedRoot':
-                return `\\sqrt[${a}]{${b}}`;
+            case 'indexedRoot': {
+                // Group complex optional arguments: nested brackets and leading
+                // script groups otherwise terminate KaTeX's root-index scan early.
+                const index = /[{}\[\]]/.test(a) ? `{${a}}` : a;
+                return `\\sqrt[${index}]{${b}}`;
+            }
             case 'vec':
             case 'hat':
             case 'tilde':

package/dist/root-transform.d.ts

@@ -0,0 +1,19 @@
+import { type MathState, type MathStructure } from './model.js';
+/** Use the nearest enclosing radical, including from one of its nested slots. */
+export declare function activeRoot(state: MathState): MathStructure | undefined;
+/** An explicit non-square index cannot be discarded by a presentation change. */
+export declare function canUseSquareRoot(root: MathStructure): boolean;
+/** Preserve the radicand's entire tree and IDs, and focus the newly editable index. */
+export declare function transformRoot(state: MathState, targetId: string, kind: 'root' | 'indexedRoot'): MathState;
+/** Footer context is independent of the typed query and suggestion dismissal. */
+export declare function rootEditingContext(state: MathState): {
+    id: string;
+    kind: "root" | "indexedRoot";
+    target: "root" | "indexedRoot";
+    canTransform: boolean;
+    indexCaret: {
+        id: string;
+        start: number;
+        end: number;
+    } | undefined;
+} | undefined;

package/dist/root-transform.js

@@ -0,0 +1,69 @@
+import { documentRows, isLiteralText, row, textNodes, } from './model.js';
+/** Use the nearest enclosing radical, including from one of its nested slots. */
+export function activeRoot(state) {
+    if (isLiteralText(state.document, state.caret.id))
+        return;
+    const visit = (line, parent) => {
+        for (const node of line.children) {
+            if (node.type === 'text') {
+                if (node.id === state.caret.id)
+                    return parent;
+            }
+            else {
+                for (const slot of node.slots) {
+                    const found = visit(slot, ['root', 'indexedRoot'].includes(node.type) ? node : parent);
+                    if (found)
+                        return found;
+                }
+            }
+        }
+    };
+    for (const line of documentRows(state.document)) {
+        const found = visit(line);
+        if (found)
+            return found;
+    }
+}
+/** An explicit non-square index cannot be discarded by a presentation change. */
+export function canUseSquareRoot(root) {
+    if (root.type !== 'indexedRoot')
+        return false;
+    const index = root.slots[0];
+    if (index.children.some((node) => node.type !== 'text'))
+        return false;
+    const value = index.children
+        .map((node) => (node.type === 'text' ? node.text : ''))
+        .join('')
+        .trim();
+    return value === '' || value === '2';
+}
+/** Preserve the radicand's entire tree and IDs, and focus the newly editable index. */
+export function transformRoot(state, targetId, kind) {
+    const current = activeRoot(state);
+    if (!current || current.id !== targetId || current.type === kind)
+        return state;
+    if (kind === 'root' && !canUseSquareRoot(current))
+        return state;
+    const next = { ...state, document: structuredClone(state.document) };
+    const root = activeRoot(next);
+    const radicand = root.slots[root.type === 'root' ? 0 : 1];
+    root.type = kind;
+    // Start at 2 to retain the formula's meaning; select it so typing n replaces it.
+    root.slots = kind === 'indexedRoot' ? [row('2'), radicand] : [radicand];
+    const first = textNodes({ version: 1, root: root.slots[0] })[0];
+    return { ...next, caret: { id: first.id, start: 0, end: kind === 'indexedRoot' ? 1 : 0 } };
+}
+/** Footer context is independent of the typed query and suggestion dismissal. */
+export function rootEditingContext(state) {
+    const root = activeRoot(state);
+    if (!root)
+        return;
+    const index = root.type === 'indexedRoot' ? textNodes({ version: 1, root: root.slots[0] })[0] : undefined;
+    return {
+        id: root.id,
+        kind: root.type,
+        target: root.type === 'root' ? 'indexedRoot' : 'root',
+        canTransform: root.type === 'root' || canUseSquareRoot(root),
+        indexCaret: index ? { id: index.id, start: 0, end: index.text.length } : undefined,
+    };
+}

package/dist/suggestions.d.ts

@@ -1,6 +1,10 @@
 import { type MathLocale, type MathMessageParameters } from './i18n.js';
 import { type MathState, type StructureKind } from './model.js';
 export interface MathSuggestion {
+    /** Convert this enclosing structure without consuming the typed query. */
+    transformRootId?: string;
+    /** Change the current fence without inserting a wrapper or consuming text. */
+    transformFenceId?: string;
     /** Preserve the query as an operand instead of replacing a command name. */
     wrapOperand?: boolean;
     operatorName?: string;
@@ -31,4 +35,9 @@ export declare function findSuggestions(text: string, caret: number, locale?: Ma
     query: string;
     candidates: MathSuggestion[];
 };
+/** Combine text search with changes available for the current formula structure. */
+export declare function findStateSuggestions(state: MathState, locale?: MathLocale, caret?: number): {
+    query: string;
+    candidates: MathSuggestion[];
+};
 export declare function acceptSuggestion(state: MathState, query: string, candidate: MathSuggestion): MathState;

package/dist/suggestions.js

@@ -1,3 +1,6 @@
+import { transformRoot } from './root-transform.js';
+import { structureEditingContext, changeContextFence } from './context-tools.js';
+import { fencePairs } from './fences.js';
 import { mathLocaleAliases, translate, } from './i18n.js';
 import { insertTemplate, mathTemplates } from './templates.js';
 import { activeMatrix, insertIdentityMatrix, insertMatrix, MATRIX_MAX_SIZE } from './matrix.js';
@@ -284,7 +287,57 @@ export function findSuggestions(text, caret, locale = 'ko') {
         })),
     };
 }
+/** Combine text search with changes available for the current formula structure. */
+export function findStateSuggestions(state, locale = 'ko', caret = state.caret.start) {
+    const text = textNodes(state.document).find((node) => node.id === state.caret.id)?.text ?? '';
+    const result = findSuggestions(text, caret, locale);
+    const context = structureEditingContext(state);
+    const root = context?.root;
+    const kind = root?.canTransform ? root.target : undefined;
+    if (root && kind) {
+        const item = mathStructures.find((entry) => entry.kind === kind);
+        result.candidates.push({
+            ...item,
+            id: `transform-${kind}`,
+            transformRootId: root.id,
+            label: translate(locale, 'suggestion.transform', {
+                kind: translate(locale, `context.${kind}`),
+            }),
+            detail: translate(locale, 'suggestion.transformRootDetail'),
+        });
+    }
+    if (context?.fence) {
+        const fence = context.fence;
+        const changes = Object.keys(fencePairs)
+            .filter((kind) => kind !== fence.type)
+            .map((kind) => {
+            const item = mathStructures.find((entry) => entry.kind === kind);
+            return {
+                ...item,
+                id: `transform-fence-${kind}`,
+                transformFenceId: fence.id,
+                label: translate(locale, 'suggestion.transformFence', {
+                    kind: translate(locale, item.label),
+                }),
+                detail: translate(locale, 'suggestion.transformFenceDetail'),
+            };
+        });
+        // Explicit symbol/command matches stay first. Changes precede new wrapping actions.
+        const wrapping = result.candidates.findIndex((item) => item.wrapOperand);
+        result.candidates.splice(wrapping < 0 ? result.candidates.length : wrapping, 0, ...changes);
+    }
+    return result;
+}
 export function acceptSuggestion(state, query, candidate) {
+    if (candidate.transformFenceId)
+        return candidate.kind
+            ? changeContextFence(state, candidate.transformFenceId, candidate.kind)
+            : state;
+    if (candidate.transformRootId) {
+        return candidate.kind === 'root' || candidate.kind === 'indexedRoot'
+            ? transformRoot(state, candidate.transformRootId, candidate.kind)
+            : state;
+    }
     const node = textNodes(state.document).find((n) => n.id === state.caret.id);
     const start = state.caret.start - query.length;
     if (!node || start < 0 || node.text.slice(start, state.caret.start) !== query)

package/dist/web-component.js

@@ -6,7 +6,14 @@ export function defineMathEditor(tagName = 'barocss-math-editor') {
     if (existing)
         return existing;
     class EditorElement extends HTMLElement {
-        static observedAttributes = ['locale', 'mode', 'toolbar', 'line-numbers', 'enter-behavior'];
+        static observedAttributes = [
+            'locale',
+            'mode',
+            'toolbar',
+            'line-numbers',
+            'enter-behavior',
+            'context-tools',
+        ];
         session = createMathSession();
         editor;
         get value() {
@@ -26,6 +33,7 @@ export function defineMathEditor(tagName = 'barocss-math-editor') {
                 onCancel: () => this.dispatchEvent(new CustomEvent('math-cancel', { bubbles: true, composed: true })),
                 onCommit: (snapshot) => this.dispatchEvent(new CustomEvent('math-commit', { detail: snapshot, bubbles: true, composed: true })),
                 showLineNumbers: this.getAttribute('line-numbers') !== 'false',
+                contextTools: this.getAttribute('context-tools') !== 'false',
                 onChange: (document, latex) => this.dispatchEvent(new CustomEvent('math-change', {
                     detail: { document, latex },
                     bubbles: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barocss/math-editor",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -46,7 +46,8 @@
     "src/style.css",
     "*.md",
     "LICENSE",
-    "src/fonts"
+    "src/fonts",
+    "src/shapes"
   ],
   "peerDependencies": {
     "react": ">=18",
@@ -120,6 +121,13 @@
     "test": "vitest run",
     "test:run": "vitest run",
     "format": "prettier --write src test \"examples/*.ts\" scripts",
-    "format:check": "prettier --check src test \"examples/*.ts\" scripts"
+    "format:check": "prettier --check src test \"examples/*.ts\" scripts",
+    "test:rendering": "node test/rendering/run.mjs",
+    "test:rendering:syntax": "node test/rendering/run.mjs --suite=syntax",
+    "test:rendering:combinations": "node test/rendering/run.mjs --suite=combinations",
+    "test:rendering:inventory": "vitest run test/rendering-coverage.test.ts",
+    "test:rendering:update": "node test/rendering/update.mjs",
+    "test:rendering:report": "node test/rendering/coverage-report.mjs",
+    "test:editing": "node test/editing/run.mjs"
   }
 }

package/src/fonts/README.md

@@ -0,0 +1,18 @@
+# Bundled mathematical glyphs
+
+The WOFF2 files in this directory come from KaTeX 0.16.28. Their MIT notice is
+preserved in [LICENSE-KaTeX.txt](LICENSE-KaTeX.txt).
+
+The editor uses Main Regular for upright mathematics, Math Italic for variables,
+Size1 Regular for inline operators, and Size2 Regular for display operators. Bold, calligraphic and blackboard faces
+support the corresponding alphabet structures. Unsupported characters retain
+system-font fallbacks.
+
+The over/underbrace masks in `../style.css` also derive from the `leftbrace`,
+`midbrace` and `rightbrace` paths in KaTeX 0.16.28 `src/svgGeometry.js`, under the
+same MIT license. Three clipped slices preserve the ends and center when the
+brace stretches. These assets do not add a KaTeX JavaScript runtime dependency.
+
+Root and parenthesis masks also use KaTeX contours. See
+[../shapes/README.md](../shapes/README.md) for the source glyphs, bounds and
+conversion details.

package/src/shapes/README.md

@@ -0,0 +1,21 @@
+# Mathematical outlines
+
+These static SVG masks are derived from KaTeX 0.16.28, under its MIT license.
+The copyright and license notice is preserved in
+[../fonts/LICENSE-KaTeX.txt](../fonts/LICENSE-KaTeX.txt).
+
+| Asset                    | Source                           | Conversion                                                                                                                                |
+| ------------------------ | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| `radical.svg`            | `src/svgGeometry.js`, `sqrtMain` | Set `extraVinculum` and top padding to zero; crop to the 850 × 1000 radical region. The editable radicand slot draws the horizontal rule. |
+| `parenthesis.svg`        | Main Regular, U+0028             | Extract the glyph outline, invert the font Y axis and crop to its ink bounds: (94, −250)–(333, 750).                                      |
+| `parenthesis-top.svg`    | Size4 Regular, U+239B            | Same conversion, bounds (291, −655)–(843, 1154).                                                                                          |
+| `parenthesis-bottom.svg` | Size4 Regular, U+239D            | Same conversion, bounds (291, −644)–(843, 1165).                                                                                          |
+
+Font contours were extracted from the distributed TTF files with fontTools
+`SVGPathPen` and `TransformPen`. The masks retain the existing editor layout
+boxes; they do not reproduce KaTeX's full delimiter-size selection algorithm.
+Tall parentheses use bounded end caps and a straight extender. Right parentheses
+mirror the corresponding left outline.
+
+These files are packaged with `style.css`. They do not require KaTeX JavaScript,
+fontTools, network requests to a CDN, or code generation in a consuming app.

package/src/shapes/parenthesis-bottom.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 552 1809" preserveAspectRatio="none"><path d="M5 1Q7 0 75 0Q118 0 120 1Q124 2 125.0 8.0Q126 14 126 46Q126 290 143 500Q174 908 272.0 1223.0Q370 1538 542 1782Q552 1796 552 1800Q552 1803 546 1809H529Q510 1809 509 1808Q501 1800 494 1791Q130 1349 36 629Q4 384 0 72Q0 21 0.5 12.0Q1 3 5 1Z"/></svg>

package/src/shapes/parenthesis-top.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 552 1809" preserveAspectRatio="none"><path d="M509 1Q510 0 528 0H546Q552 6 552 9Q552 13 542 27Q339 316 241.5 692.0Q144 1068 129 1574Q126 1730 126 1763Q126 1795 125.0 1801.0Q124 1807 120 1808Q118 1809 75 1809Q8 1809 6 1808Q1 1806 0.5 1797.0Q0 1788 0 1737Q3 1498 24 1283Q104 491 494 18Q501 9 509 1Z"/></svg>

package/src/shapes/parenthesis.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 239 1000" preserveAspectRatio="none"><path d="M239 991Q239 1000 221 1000H208Q201 994 180 976Q0 812 0 500Q0 378 29 277Q75 120 180 24Q187 18 196.0 10.5Q205 3 208 0H221Q233 0 236.0 3.0Q239 6 239 9Q239 13 228 24Q73 188 73.0 500.0Q73 812 228 976Q239 987 239 991Z"/></svg>

package/src/shapes/radical.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 850 1000" preserveAspectRatio="none"><path d="M95,622 c-2.7,0,-7.17,-2.7,-13.5,-8c-5.8,-5.3,-9.5,-10,-9.5,-14 c0,-2,0.3,-3.3,1,-4c1.3,-2.7,23.83,-20.7,67.5,-54 c44.2,-33.3,65.8,-50.3,66.5,-51c1.3,-1.3,3,-2,5,-2c4.7,0,8.7,3.3,12,10 s173,378,173,378c0.7,0,35.3,-71,104,-213c68.7,-142,137.5,-285,206.5,-429 c69,-144,104.5,-217.7,106.5,-221 l0.0 -0 c5.3,-9.3,12,-14,20,-14 H400000v40H845.2724 s-225.272,467,-225.272,467s-235,486,-235,486c-2.7,4.7,-9,7,-19,7 c-6,0,-10,-1,-12,-3s-194,-422,-194,-422s-65,47,-65,47z M834 0h400000v40h-400000z"/></svg>