@inkbrick/react 0.0.0-stage → 0.1.0-alpha.0

package/src/index.ts

@@ -0,0 +1,102 @@
+export * from './context/EditorContext';
+export * from './context/EditorProvider';
+export { definePresentation } from './ui/presentation';
+export type { EditorPresentation } from './ui/presentation';
+
+export * from './hooks/useEditor';
+export * from './hooks/useEditorView';
+export * from './hooks/useDocument';
+export * from './hooks/useBlock';
+export * from './hooks/useChildren';
+export * from './hooks/useHistory';
+export * from './hooks/useReadOnly';
+export * from './hooks/useBlockController';
+export { defineBlock } from './blocks/defineBlock';
+export type { ReactBlockDefinition, CustomBlockViewProps } from './blocks/defineBlock';
+export { htmlToFragment, embeddedFragment } from './clipboard/htmlToFragment';
+export type { ImageOptions } from './images/types';
+export { uploadImage, normalizeImageUrl } from './images/upload';
+
+export * from './blocks/BlockProps';
+export * from './blocks/BlockChildren';
+export * from './blocks/UnknownBlockView';
+export * from './blocks/Editable';
+export * from './blocks/PageBlock';
+export * from './blocks/NoteBlock';
+export * from './blocks/ParagraphBlock';
+export * from './blocks/HeadingBlock';
+export * from './blocks/ListBlock';
+export * from './blocks/QuoteBlock';
+export * from './blocks/CodeBlock';
+export * from './blocks/DividerBlock';
+export * from './blocks/CalloutBlock';
+export * from './blocks/ImageBlock';
+
+export * from './renderer/BlockRenderer';
+export * from './renderer/DocumentView';
+export { fullRenderer } from './renderer/DocumentRenderer';
+export type { DocumentRenderer, ChildListProps } from './renderer/DocumentRenderer';
+export { virtualRenderer } from './renderer/virtual/virtualRenderer';
+export type { VirtualRendererOptions } from './renderer/virtual/virtualRenderer';
+export { estimateBlockHeight } from './renderer/virtual/estimate';
+export type { BlockHeightEstimate } from './renderer/virtual/estimate';
+
+export { EditorView } from './editing/EditorView';
+
+export type {
+  BlockViewProps,
+  BlockComponent,
+  BlockComponentRegistry,
+  EditorSlots,
+  EditorUIConfig,
+  UnknownBlockViewProps,
+} from './ui/types';
+export { useEditorUI } from './ui/EditorUIContext';
+export { defaultBlockComponents } from './registry/defaultBlockComponents';
+export { resolveBlockComponent } from './registry/resolveBlockComponent';
+
+export { highlightCode, normalizeLanguage, HIGHLIGHT_LIMIT } from './code/highlight';
+export type { CodeHighlighter, HighlightToken, HighlightTokenType } from './code/types';
+
+export { temmlRenderer, mountFormula, ensureMathStyles } from './math/renderer';
+export type { FormulaRenderer, FormulaRenderOptions, FormulaState } from './math/renderer';
+export { FormulaView } from './math/FormulaView';
+
+export { useT, useLocale } from './hooks/useT';
+export { registerLocale, getLocales, resolveMessages, createTranslator } from './i18n/translate';
+export type { TFunction, MessageParams } from './i18n/translate';
+export { en } from './i18n/en';
+export type { MessageKey, Messages, PartialMessages } from './i18n/en';
+export { ru } from './i18n/ru';
+
+export { Icon } from './icons/Icon';
+export type { IconName, IconProps } from './icons/Icon';
+
+export type { KeyBinding, KeymapContext } from './keymap/types';
+export { defaultKeymap } from './keymap/defaultKeymap';
+export { resolveKeymap, unbind } from './keymap/keymap';
+export { matchesShortcut } from './keymap/shortcut';
+
+export type { SlashMenuItem, SlashMenuProps } from './slash/types';
+export { defaultSlashItems } from './slash/defaultSlashItems';
+export { filterSlashItems } from './slash/filter';
+export { DefaultSlashMenu } from './slash/DefaultSlashMenu';
+export type { ToolbarProps, InlineFormat } from './toolbar/types';
+export { DefaultToolbar } from './toolbar/DefaultToolbar';
+export type {
+  BlockHandleProps,
+  BlockMenuProps,
+  BlockMenuAction,
+  DropIndicatorProps,
+  GripProps,
+} from './block-handle/types';
+export { DefaultBlockHandle } from './block-handle/DefaultBlockHandle';
+export { DefaultDropIndicator } from './block-handle/DropIndicatorHost';
+export { useBlockDrag, useBlockDragState } from './block-handle/useBlockDrag';
+export type { BlockDragApi, BlockDropTarget, BlockRects } from './block-handle/blockDrag';
+export type {
+  DragState as BlockDragState,
+  DropIndicatorRect,
+  DropPosition,
+} from './block-handle/BlockHandleController';
+export { DefaultBlockMenu } from './block-handle/DefaultBlockMenu';

package/src/keymap/defaultKeymap.ts

@@ -0,0 +1,189 @@
+import type { CaretResult } from '@inkbrick/engine';
+import type { Alignment } from '@inkbrick/document';
+
+import { applySlashItem } from '../slash/applySlashItem';
+import { visibleSlashItems } from '../slash/items';
+import { isFormattable } from '../toolbar/formatting';
+import { syncToolbar } from '../toolbar/syncToolbar';
+import { selectAllText } from '../editing/selection';
+import { openInlineFormula } from '../formula/actions';
+import { setAlignInSelection } from '../toolbar/rich';
+import { deleteForwardAtEnd } from '../editing/deleteAtBoundary';
+import type { KeyBinding, KeymapContext } from './types';
+
+const caretAtEdge =
+  (edge: 'start' | 'end') =>
+  ({ editor, event, selection }: KeymapContext): boolean => {
+    const current = selection();
+
+    if (event.isComposing || !current?.collapsed) return false;
+    if (edge === 'start') return current.from.offset === 0;
+
+    const block = editor.store.getBlock(current.from.blockId);
+
+    return !!block && current.from.offset === editor.engine.inline.length(block.content);
+  };
+
+const slashOpen = ({ view }: KeymapContext) => {
+  const state = view.slash.getState();
+
+  return state.open && state.blockId !== null;
+};
+
+function visibleItems({ editor, view, slashItems }: KeymapContext) {
+  const state = view.slash.getState();
+
+  return visibleSlashItems(editor, slashItems, state.blockId!, state.query);
+}
+
+const slashMove = (direction: 1 | -1) => (context: KeymapContext) => {
+  const visible = visibleItems(context);
+
+  if (visible.length === 0) return false;
+
+  context.view.slash.move(direction, visible.length);
+};
+
+function indent(context: KeymapContext) {
+  const { editor, event } = context;
+  const selection = context.selection();
+
+  if (!selection || selection.from.blockId !== selection.to.blockId) return;
+
+  const block = editor.store.getBlock(selection.from.blockId);
+
+  if (!block) return;
+
+  if (block.flavour === 'block:code') {
+    if (!event.shiftKey) context.run(() => context.replaceSelection(selection, '  '));
+    return;
+  }
+
+  context.run(() => {
+    context.exec({
+      type: event.shiftKey ? 'outdentBlock' : 'indentBlock',
+      payload: { blockId: block.id },
+    });
+
+    return { blockId: block.id, offset: selection.from.offset };
+  });
+}
+
+const toggle = (format: string) => (context: KeymapContext) => context.toggleFormat(format);
+
+const align = (value: Alignment) => (context: KeymapContext) => {
+  const selection = context.selection();
+
+  if (!selection || !setAlignInSelection(context.editor, context.view, selection, value))
+    return false;
+};
+
+/**
+ * Стандартные привязки редактора, в порядке проверки. Свои привязки передаются в `<EditorProvider keymap>`:
+ * тот же `id` заменяет стандартную, новый `id` проверяется раньше стандартных.
+ */
+export const defaultKeymap: readonly KeyBinding[] = [
+  {
+    id: 'slash.next',
+    keys: ['ArrowDown', 'Shift-ArrowDown'],
+    when: slashOpen,
+    run: slashMove(1),
+  },
+  {
+    id: 'slash.previous',
+    keys: ['ArrowUp', 'Shift-ArrowUp'],
+    when: slashOpen,
+    run: slashMove(-1),
+  },
+  {
+    id: 'slash.accept',
+    keys: ['Enter', 'Shift-Enter', 'Tab', 'Shift-Tab'],
+    when: slashOpen,
+    run: (context) => {
+      const state = context.view.slash.getState();
+      const visible = visibleItems(context);
+      const item = visible[Math.min(state.activeIndex, visible.length - 1)];
+
+      if (item) {
+        applySlashItem(context.editor, context.view, item);
+        return;
+      }
+
+      // Подходящих пунктов нет: меню закрывается, клавиша работает как обычно (например, Tab-отступ).
+      context.view.slash.close();
+
+      return false;
+    },
+  },
+  {
+    id: 'slash.close',
+    keys: ['Escape', 'Shift-Escape'],
+    when: slashOpen,
+    run: ({ view }) => view.slash.close(),
+  },
+
+  // Выделить всё: нативное поведение ненадёжно для документа, начинающегося с нередактируемого блока.
+  { id: 'selectAll', keys: 'Mod-a', run: ({ root }) => selectAllText(root) },
+  { id: 'undo', keys: 'Mod-z', run: (context) => context.undo() },
+  { id: 'redo', keys: ['Mod-Shift-z', 'Mod-y'], run: (context) => context.redo() },
+  {
+    id: 'link',
+    keys: 'Mod-k',
+    run: (context) => {
+      const selection = context.selection();
+
+      if (!selection || selection.collapsed || !isFormattable(context.editor, selection)) {
+        return false;
+      }
+
+      syncToolbar(context.editor, context.view);
+      context.view.toolbar.openLink();
+    },
+  },
+
+  { id: 'format.bold', keys: 'Mod-b', run: toggle('bold') },
+  { id: 'format.italic', keys: 'Mod-i', run: toggle('italic') },
+  { id: 'format.underline', keys: 'Mod-u', run: toggle('underline') },
+  { id: 'format.code', keys: 'Mod-e', run: toggle('code') },
+  { id: 'format.strike', keys: 'Mod-Shift-x', run: toggle('strike') },
+
+  { id: 'align.left', keys: 'Mod-Shift-l', run: align('left') },
+  { id: 'align.center', keys: 'Mod-Shift-e', run: align('center') },
+  { id: 'align.right', keys: 'Mod-Shift-r', run: align('right') },
+  { id: 'align.justify', keys: 'Mod-Shift-j', run: align('justify') },
+
+  {
+    id: 'formula.inline',
+    keys: 'Mod-Shift-m',
+    run: ({ editor, view }) => openInlineFormula(editor, view),
+  },
+
+  { id: 'indent', keys: ['Tab', 'Shift-Tab'], run: indent },
+
+  /*
+   * Backspace в начале и Delete в конце блока обрабатываются уже на keydown: Safari не присылает beforeinput,
+   * если сам считает, что удалять нечего (пустой блок, соседний блок без текста), и клавиша бы не сработала.
+   */
+  {
+    id: 'delete.blockStart',
+    keys: 'Backspace',
+    when: caretAtEdge('start'),
+    run: (context) => {
+      const { blockId } = context.selection()!.from;
+
+      context.run(() =>
+        context.exec<CaretResult>({ type: 'deleteBackward', payload: { blockId, offset: 0 } }),
+      );
+    },
+  },
+  {
+    id: 'delete.blockEnd',
+    keys: 'Delete',
+    when: caretAtEdge('end'),
+    run: (context) => {
+      const { blockId } = context.selection()!.from;
+
+      context.run(() => deleteForwardAtEnd(context.editor, blockId));
+    },
+  },
+];

package/src/keymap/keymap.ts

@@ -0,0 +1,42 @@
+import { defaultKeymap } from './defaultKeymap';
+import { matchesShortcut } from './shortcut';
+import type { KeyBinding, KeymapContext } from './types';
+
+/**
+ * Собирает итоговый список привязок: свои привязки с `id` стандартной занимают её место, остальные идут
+ * перед стандартными (проверяются первыми).
+ */
+export function resolveKeymap(custom: readonly KeyBinding[] = []): readonly KeyBinding[] {
+  if (custom.length === 0) return defaultKeymap;
+
+  const overrides = new Map(custom.map((binding) => [binding.id, binding]));
+  const defaultIds = new Set(defaultKeymap.map((binding) => binding.id));
+
+  return [
+    ...custom.filter((binding) => !defaultIds.has(binding.id)),
+    ...defaultKeymap.map((binding) => overrides.get(binding.id) ?? binding),
+  ];
+}
+
+export function unbind(id: string): KeyBinding {
+  return { id, keys: [], run: () => false };
+}
+
+export function handleKeyDown(bindings: readonly KeyBinding[], context: KeymapContext): boolean {
+  const { event } = context;
+
+  for (const binding of bindings) {
+    const keys = typeof binding.keys === 'string' ? [binding.keys] : binding.keys;
+
+    if (!keys.some((spec) => matchesShortcut(event, spec))) continue;
+    if (binding.when && !binding.when(context)) continue;
+
+    if (binding.run(context) === false) continue;
+
+    event.preventDefault();
+
+    return true;
+  }
+
+  return false;
+}

package/src/keymap/shortcut.ts

@@ -0,0 +1,105 @@
+interface Shortcut {
+  mod: boolean;
+  ctrl: boolean;
+  meta: boolean;
+  alt: boolean;
+  shift: boolean;
+  key: string;
+}
+
+const MODIFIER = /^(mod|ctrl|control|meta|cmd|alt|option|shift)-/i;
+
+const KEY_ALIASES: Record<string, string> = {
+  esc: 'escape',
+  space: ' ',
+  up: 'arrowup',
+  down: 'arrowdown',
+  left: 'arrowleft',
+  right: 'arrowright',
+  del: 'delete',
+  return: 'enter',
+};
+
+const cache = new Map<string, Shortcut>();
+
+/**
+ * Разбирает запись вида `Mod-Shift-z`, `Tab`, `Shift-ArrowDown`: модификаторы (`Mod`, `Ctrl`, `Meta`/`Cmd`,
+ * `Alt`/`Option`, `Shift`) через дефис, затем клавиша (как `KeyboardEvent.key`, регистр не важен).
+ */
+function parse(spec: string): Shortcut {
+  const cached = cache.get(spec);
+
+  if (cached) return cached;
+
+  const shortcut: Shortcut = {
+    mod: false,
+    ctrl: false,
+    meta: false,
+    alt: false,
+    shift: false,
+    key: '',
+  };
+  let rest = spec.trim();
+
+  for (let match = MODIFIER.exec(rest); match; match = MODIFIER.exec(rest)) {
+    switch (match[1].toLowerCase()) {
+      case 'mod':
+        shortcut.mod = true;
+        break;
+      case 'ctrl':
+      case 'control':
+        shortcut.ctrl = true;
+        break;
+      case 'meta':
+      case 'cmd':
+        shortcut.meta = true;
+        break;
+      case 'alt':
+      case 'option':
+        shortcut.alt = true;
+        break;
+      default:
+        shortcut.shift = true;
+    }
+
+    rest = rest.slice(match[0].length);
+  }
+
+  const key = rest.toLowerCase();
+
+  if (key === '') throw new Error(`Invalid shortcut "${spec}": no key`);
+
+  shortcut.key = KEY_ALIASES[key] ?? key;
+  cache.set(spec, shortcut);
+
+  return shortcut;
+}
+
+function matchesKey(event: KeyboardEvent, key: string): boolean {
+  const pressed = event.key.toLowerCase();
+
+  if (pressed === key) return true;
+
+  // Ctrl+B на русской раскладке даёт key «и»: для латинских букв сверяем физическую клавишу.
+  return (
+    /^[a-z]$/.test(key) && !/^[a-z]$/.test(pressed) && event.code === `Key${key.toUpperCase()}`
+  );
+}
+
+/**
+ * Нажата ли ровно эта комбинация: Shift и Alt должны совпадать точно; Ctrl/Meta, если не упомянуты,
+ * не должны быть нажаты (`Mod` принимает любую из двух).
+ */
+export function matchesShortcut(event: KeyboardEvent, spec: string): boolean {
+  const shortcut = parse(spec);
+
+  if (event.shiftKey !== shortcut.shift || event.altKey !== shortcut.alt) return false;
+
+  if (shortcut.mod) {
+    if (!(event.ctrlKey || event.metaKey)) return false;
+  } else if (event.ctrlKey !== shortcut.ctrl || event.metaKey !== shortcut.meta) {
+    return false;
+  }
+
+  return matchesKey(event, shortcut.key);
+}

package/src/keymap/types.ts

@@ -0,0 +1,40 @@
+import type { CaretResult, Editor, EditorIntent } from '@inkbrick/engine';
+
+import type { EditorView } from '../editing/EditorView';
+import type { DocSelection } from '../editing/selection';
+import type { SlashMenuItem } from '../slash/types';
+
+export interface KeymapContext {
+  readonly editor: Editor;
+  readonly view: EditorView;
+  readonly root: HTMLElement;
+  readonly event: KeyboardEvent;
+  readonly slashItems: readonly SlashMenuItem[];
+
+  selection(): DocSelection | null;
+  exec<T = unknown>(intent: EditorIntent): T | undefined;
+  run(action: () => CaretResult | undefined): void;
+  replaceSelection(selection: DocSelection, text: string): CaretResult | undefined;
+  undo(): void;
+  redo(): void;
+  toggleFormat(format: string): void;
+}
+
+export interface KeyBinding {
+  /**
+   * Уникальное имя. Привязка с тем же `id`, что у стандартной, заменяет её (на её месте в порядке проверки);
+   * остальные проверяются раньше стандартных.
+   */
+  readonly id: string;
+  /**
+   * Комбинации: `'Mod-b'`, `'Mod-Shift-z'`, `'Tab'`, `'Shift-Tab'`, `'ArrowDown'`. `Mod` — Ctrl или Cmd.
+   * Shift и Alt учитываются точно (`'Tab'` не срабатывает на Shift+Tab). Пустой массив отключает привязку.
+   */
+  readonly keys: string | readonly string[];
+  readonly when?: (context: KeymapContext) => boolean;
+  /**
+   * Обработчик. `false` — «не моё»: событие идёт дальше по списку привязок и в браузер.
+   * Любой другой результат считается обработкой: `preventDefault` вызывается автоматически.
+   */
+  readonly run: (context: KeymapContext) => boolean | void;
+}

package/src/math/FormulaView.tsx

@@ -0,0 +1,62 @@
+import { useEffect, useRef, useState, type ElementType } from 'react';
+
+import { useEditorUI } from '../ui/EditorUIContext';
+import { ensureMathStyles, mountFormula } from './renderer';
+
+export interface FormulaViewProps {
+  readonly latex: string;
+  readonly display?: boolean;
+  readonly showError?: boolean;
+  readonly onSettled?: (state: 'ready' | 'error', message?: string) => void;
+}
+
+/**
+ * Формула, нарисованная выбранным в `EditorProvider` подсчётчиком (по умолчанию Temml → MathML). Пока считается и при
+ * ошибке виден исходный код. Атрибуты: `data-inkbrick-part="formula-render"`, `data-state="empty|source|loading|ready|error"`.
+ */
+export function FormulaView({
+  latex,
+  display = false,
+  showError = false,
+  onSettled,
+}: FormulaViewProps) {
+  const { formulaRenderer } = useEditorUI();
+  const ref = useRef<HTMLElement | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const Tag: ElementType = display ? 'div' : 'span';
+
+  useEffect(() => {
+    const target = ref.current;
+
+    if (!target) return;
+
+    ensureMathStyles(globalThis.document);
+    setError(null);
+
+    return mountFormula(target, latex, {
+      display,
+      renderer: formulaRenderer,
+      onSettled: (state, message) => {
+        setError(state === 'error' ? (message ?? '') : null);
+        onSettled?.(state, message);
+      },
+    });
+  }, [latex, display, formulaRenderer, onSettled]);
+
+  return (
+    <>
+      <Tag
+        ref={(node: HTMLElement | null) => {
+          ref.current = node;
+        }}
+        data-inkbrick-part="formula-render"
+        data-display={display || undefined}
+      />
+      {showError && error !== null && (
+        <span data-inkbrick-part="formula-error" role="alert">
+          {error}
+        </span>
+      )}
+    </>
+  );
+}

package/src/math/mathCss.ts

@@ -0,0 +1,4 @@
+// Стили MathML-вывода Temml (https://temml.org, лицензия MIT, © Ron Kok) — файл dist/Temml-Local.css без @font-face.
+// Файл сгенерирован из пакета temml; не правьте вручную. Лицензия — в `LICENSE` пакета temml.
+export const MATH_CSS: string =
+  "math {\n  font-family: \"Cambria Math\", 'STIXTwoMath-Regular', 'NotoSansMath-Regular', math;\n  font-style: normal;\n  font-weight: normal;\n  line-height: normal;\n  font-size-adjust: none;\n  text-indent: 0;\n  text-transform: none;\n  letter-spacing: normal;\n  word-wrap: normal;\n  direction: ltr;\n  /* Prevent Firefox from omitting the dot on i or j. */\n  font-feature-settings: \"dtls\" off;\n}\n\nmath * {\n  border-color: currentColor;\n}\n\n/* display: block is necessary in Firefox and Safari.\n * Not in Chromium, which recognizes display: \"block math\" written inline. */\n math.tml-display {\n  display: block;\n  width: 100%;\n}\n\n*.mathcal {\n  /* NotoSans */\n  font-feature-settings: 'ss01';\n}\n\nmath .mathscr {\n  font-family: \"Temml\";\n}\n\nmo.tml-prime {\n  font-family: Temml;\n}\n\n/* Cramped superscripts in WebKit */\nmfrac > :nth-child(2),\nmsqrt,\nmover > :first-child {\n  math-shift: compact\n}\n\n.menclose {\n  display: inline-block;\n  position: relative;\n  padding: 0.5ex 0ex;\n}\n.tml-cancelto {\n  display: inline-block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  padding: 0.5ex 0ex;\n  background-color: currentColor;\n  /* Use the SVG as an alpha mask (painted by background-color) */\n  -webkit-mask-image: url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><defs><marker id='a' markerHeight='5' markerUnits='strokeWidth' markerWidth='7' orient='auto' refX='7' refY='2.5'><path fill='black' d='m0 0 7 2.5L0 5z'/></marker></defs><line x2='100%25' y1='100%25' stroke='black' stroke-width='.06em' marker-end='url(%23a)' vector-effect='non-scaling-stroke'/></svg>\");\n          mask-image: url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><defs><marker id='a' markerHeight='5' markerUnits='strokeWidth' markerWidth='7' orient='auto' refX='7' refY='2.5'><path fill='black' d='m0 0 7 2.5L0 5z'/></marker></defs><line x2='100%25' y1='100%25' stroke='black' stroke-width='.06em' marker-end='url(%23a)' vector-effect='non-scaling-stroke'/></svg>\");\n  -webkit-mask-repeat: no-repeat;\n          mask-repeat: no-repeat;\n  -webkit-mask-size: 100% 100%;\n          mask-size: 100% 100%;\n  -webkit-mask-position: 0 0;\n          mask-position: 0 0;\n}\n\n@supports (-moz-appearance: none) {\n  /* \\vec w/o italic correction for Firefox */\n  .tml-vec {\n    transform: scale(0.75)\n  }\n  /* Fix \\cancelto in Firefox */\n  .ff-narrow {\n    width: 0em;\n  }\n  .ff-nudge-left {\n    margin-left: -0.2em;\n  }\n  /* Squash hidden mrows in \\bordermatrix. Messes with centering, but necessary to squash. */\n  .ff-squash mtd {\n    display: block;\n    height: 0;\n  }\n}\n\n@supports (not (-moz-appearance: none)) {\n  /* Chromium and WebKit */\n  /* prime vertical alignment */\n  mo.tml-prime {\n    font-family: Temml;\n  }\n  /* Italic correction on superscripts */\n  .tml-sml-pad {\n    padding-left: 0.05em;\n  }\n  .tml-med-pad {\n    padding-left: 0.10em;\n  }\n  .tml-lrg-pad {\n    padding-left: 0.15em;\n  }\n}\n\n@supports (-webkit-backdrop-filter: blur(1px)) {\n  /* WebKit vertical & italic correction on accents */\n  .wbk-acc {\n    /* lower by x-height distance */\n    transform: translate(0em, 0.431em);\n  }\n  .wbk-sml {\n    transform: translate(0.07em, 0);\n  }\n  .wbk-sml-acc {\n    transform: translate(0.07em, 0.431em);\n  }\n  .wbk-sml-vec {\n    transform: scale(0.75) translate(0.07em, 0);\n  }\n  .wbk-med {\n    transform: translate(0.14em, 0);\n  }\n  .wbk-med-acc {\n    transform: translate(0.14em, 0.431em);\n  }\n  .wbk-med-vec {\n    transform: scale(0.75) translate(0.14em, 0);\n  }\n  .wbk-lrg {\n    transform: translate(0.21em, 0);\n  }\n  .wbk-lrg-acc {\n    transform: translate(0.21em, 0.431em);\n  }\n  .wbk-lrg-vec {\n    transform: scale(0.75) translate(0.21em, 0);\n  }\n}\n\n/* \\cancel & \\phase use background images. Get them to print. */\nmenclose {\n  -webkit-print-color-adjust: exact;  /* Chrome & Edge */\n          print-color-adjust: exact;\n}\n\n/* Array cell justification in Firefox & WebKit */\n.tml-right {\n  text-align: right;\n}\n.tml-left {\n  text-align: left;\n}\n\n/* For CD labels that grow to the left in Firefox and WebKit */\n.tml-shift-left { margin-left:-200% }\n\n/* Styles for Chromium only */\n@supports (not (-webkit-backdrop-filter: blur(1px))) and (not (-moz-appearance: none)) {\n  /* Italic correction on accents */\n  .chr-sml {\n    transform: translate(0.07em, 0)\n  }\n  .chr-sml-vec {\n    transform: scale(0.75) translate(0.07em, 0)\n  }\n  .chr-med {\n    transform: translate(0.14em, 0)\n  }\n  .chr-med-vec {\n    transform: scale(0.75) translate(0.14em, 0)\n  }\n  .chr-lrg {\n    transform: translate(0.21em, 0)\n  }\n  .chr-lrg-vec {\n    transform: scale(0.75) translate(0.21em, 0)\n  }\n\n  /* For CD labels that grow to the left */\n  .tml-shift-left { margin-left:-100% }\n\n  /* MathML Core & Chromium do not support the MathML 3.0 element <menclose> attributes. */\n  /* So use styles. */\n  menclose {\n    position: relative;\n    padding: 0.5ex 0ex;\n  }\n  \n    .tml-overline {\n    padding: 0.1em 0 0 0;\n    border-top: 0.065em solid;\n  }\n\n  .tml-underline {\n    padding: 0 0 0.1em 0;\n    border-bottom: 0.065em solid;\n  }\n\n  .tml-cancel {\n    display: inline-block;\n    position: absolute;\n    left: 0.5px;\n    bottom: 0;\n    width: 100%;\n    height: 100%;\n    background-color: currentColor;\n  }\n  .upstrike {\n    clip-path: polygon(0.05em 100%, 0em calc(100% - 0.05em), calc(100% - 0.05em) 0em, 100% 0.05em);\n  }\n  .downstrike {\n    clip-path: polygon(0em 0.05em, 0.05em 0em, 100% calc(100% - 0.05em), calc(100% - 0.05em) 100%);\n  }\n  .sout {\n    clip-path: polygon(0em calc(55% + 0.0333em), 0em calc(55% - 0.0333em), 100% calc(55% - 0.0333em), 100% calc(55% + 0.0333em));\n  }\n  .tml-xcancel {\n    clip-path: polygon(0.05em 0em, 0em 0.05em, calc(50% - 0.05em) 50%, 0em calc(100% - 0.05em), 0.05em 100%, 50% calc(50% + 0.05em), calc(100% - 0.05em) 100%, 100% calc(100% - 0.05em), calc(50% + 0.05em) 50%, 100% 0.05em, calc(100% - 0.05em) 0%, 50% calc(50% - 0.05em));\n  }\n\n  .longdiv-top {\n    border-top: 0.067em solid;\n    padding: 0.1em 0.2em 0.2em 0.433em;\n  }\n  .longdiv-arc {\n    position: absolute;\n    top: 0;\n    bottom: 0.1em;\n    left: -0.4em;\n    width: 0.7em;\n    border: 0.067em solid;\n    transform: translateY(-0.067em);\n    border-radius: 70%;\n    clip-path: inset(0 0 0 0.4em);\n    box-sizing: border-box;}\n    .menclose {display: inline-block;\n    text-align: left;\n    position: relative;\n  }\n  \n  .phasor-bottom {\n    border-bottom: 0.067em solid;\n    padding: 0.2em 0.2em 0.1em 0.6em;\n  }\n  .phasor-angle {\n    display: inline-block;\n    position: absolute;\n    left: 0.5px;\n    bottom: -0.04em;\n    height: 100%;\n    aspect-ratio: 0.5;\n    background-color: currentColor;\n    clip-path: polygon(0.05em 100%, 0em calc(100% - 0.05em), calc(100% - 0.05em) 0em, 100% 0.05em);\n  }\n\n  .tml-fbox {\n    padding: 3pt;\n    border: 1px solid;\n  }\n\n  .circle-pad {\n    padding: 0.267em;\n  }\n  .textcircle {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    left: 0;\n    border: 0.067em solid;\n    border-radius: 50%;\n   }\n\n   .actuarial {\n    padding: 0.03889em 0.03889em 0 0.03889em;\n    border-width: 0.08em 0.08em 0em 0em;\n    border-style: solid;\n    margin-right: 0.03889em;\n   }\n\n   /* Stretch \\widetilde */\n  .tml-tilde-2 {\n    transform: scale(2.0, 1.1)\n  }\n  .tml-tilde-3 {\n    transform: scale(3.0, 1.1)\n  }\n  .tml-tilde-4 {\n    transform: scale(4.0, 1.1)\n  }\n  /* Stretch \\widehat */\n  .tml-hat-1 {\n    transform: scale(1.9, 1.0)\n  }\n  .tml-hat-2 {\n    transform: scale(3.9, 1.0)\n  }\n  .tml-hat-3 {\n    transform: scale(5.8, 1.0)\n  }\n  .tml-hat-4 {\n    transform: scale(7.8, 1.0)\n  }\n  \n  /* set array cell justification */\n  .tml-right {\n    text-align: -webkit-right;\n  }\n  .tml-left {\n    text-align: -webkit-left;\n  }\n}\n\n.special-fraction {\n  font-family: 'STIX TWO', 'Times New Roman', Times, Tinos, serif;\n}\n\n/* flex-wrap for line-breaking in Chromium */\nmath {\n  display: inline-flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n}\nmath > mrow {\n  padding: 0.5ex 0ex;\n}\n\n/* Default mtd top padding is 0.5ex per MathML-Core and user-agent CSS */\n/* We adjust for jot and small */\nmtable.tml-jot > mtr > mtd {\n  padding-top: 0.7ex;\n  padding-bottom: 0.7ex;\n}\nmtable.tml-small mtd {\n  padding-top: 0.35ex;\n  padding-bottom: 0.35ex;\n}\n\n/* Firefox */\n@-moz-document url-prefix() {\n  /* Avoid flex-wrap */\n  math { display: inline; }\n  math > mrow { padding: 0 }\n  /* Adjust Firefox spacing between array rows */\n  mtd, mtable.tml-small mtd { padding-top: 0; padding-bottom: 0; }\n  mtable.tml-jot > mtr > mtd { padding-top: 0.2ex; padding-bottom: 0.2ex; }\n}\n\n/* AMS environment auto-numbering via CSS counter. */\n.tml-eqn::before {\n  counter-increment: tmlEqnNo;\n  content: \"(\" counter(tmlEqnNo) \")\";\n}\n";