@drghaliasri/butex 4.0.0 → 4.1.0

package/dist/react-document.d.mts

@@ -147,7 +147,7 @@ declare namespace ButexDocumentEditor {
     var displayName: string;
 }
 
-declare const DOCUMENT_WIDGET_CSS = "\n.butex-document-widget {\n  --butex-document-bg: var(--butex-bg, #f8fafc);\n  --butex-document-fg: var(--butex-fg, #0f172a);\n  --butex-document-muted: var(--butex-muted, #64748b);\n  --butex-document-panel: var(--butex-panel, #ffffff);\n  --butex-document-border: var(--butex-border, #e2e8f0);\n  --butex-document-accent: var(--butex-accent, #0d9488);\n  --butex-document-accent-hover: var(--butex-accent-hover, #0f766e);\n  --butex-document-accent-bg: var(--butex-toolbar-hover-bg, rgba(13, 148, 136, 0.08));\n  --butex-document-focus-shadow: var(--butex-focus-shadow, rgba(13, 148, 136, 0.16));\n  --butex-document-danger: var(--butex-danger, #dc2626);\n  --butex-document-error: var(--butex-error, #b91c1c);\n  --butex-document-error-bg: var(--butex-error-bg, #fef2f2);\n  --butex-document-shadow: var(--butex-shadow-md, 0 4px 14px rgba(15, 23, 42, 0.08));\n  --butex-document-preview-bg: var(--butex-preview-bg, #ffffff);\n  --butex-document-preview-fg: var(--butex-preview-fg, var(--butex-document-fg));\n  --butex-document-preview-font: \"Amiri\", \"Noto Serif Arabic\", Georgia, \"Times New Roman\", serif;\n  --butex-document-drawer-bg: var(--butex-document-panel);\n  --butex-document-input-bg: #ffffff;\n  --butex-document-input-border: var(--butex-document-border);\n  --butex-document-table-border: var(--butex-document-border);\n  --butex-document-raw-bg: #f8fafc;\n  --butex-document-math-bg: var(--butex-document-accent-bg);\n  --butex-document-math-border: rgba(13, 148, 136, 0.35);\n  --butex-document-dev-bg: var(--butex-dev-bg, #fffbeb);\n  --butex-document-dev-border: var(--butex-dev-border, #fcd34d);\n  --butex-document-dev-code-bg: var(--butex-dev-inset-bg, #ffffff);\n  --butex-document-dev-code-fg: var(--butex-dev-inset-fg, var(--butex-document-fg));\n  box-sizing: border-box;\n  color: var(--butex-document-fg);\n  direction: rtl;\n  font-family: ui-sans-serif, system-ui, \"Segoe UI\", Tahoma, Arial, sans-serif;\n  line-height: 1.45;\n}\n\n.butex-document-widget *,\n.butex-document-widget *::before,\n.butex-document-widget *::after {\n  box-sizing: inherit;\n}\n\n.butex-document-widget__shell {\n  display: grid;\n  gap: 12px;\n}\n\n.butex-document-widget__toolbar,\n.butex-document-widget__panel {\n  border: 1px solid var(--butex-document-border);\n  border-radius: 10px;\n  background: var(--butex-document-panel);\n  box-shadow: var(--butex-document-shadow);\n}\n\n.butex-document-widget__toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  padding: 8px;\n}\n\n.butex-document-widget button {\n  border: 1px solid var(--butex-document-border);\n  border-radius: 8px;\n  background: var(--butex-document-panel);\n  color: var(--butex-document-fg);\n  cursor: pointer;\n  min-height: 32px;\n  padding: 0 10px;\n  transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease, color 0.14s ease;\n}\n\n.butex-document-widget button[aria-pressed=\"true\"],\n.butex-document-widget button:hover {\n  border-color: var(--butex-document-accent);\n  background: var(--butex-document-accent-bg);\n}\n\n.butex-document-widget button:focus-visible,\n.butex-document-widget input:focus-visible,\n.butex-document-widget textarea:focus-visible {\n  border-color: var(--butex-document-accent);\n  box-shadow: 0 0 0 3px var(--butex-document-focus-shadow);\n  outline: none;\n}\n\n.butex-document-widget button:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.butex-document-widget__panel {\n  padding: 16px;\n}\n\n.butex-document-widget__layout {\n  align-items: start;\n  display: grid;\n  gap: 12px;\n  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);\n  transition: grid-template-columns 0.22s ease;\n}\n\n.butex-document-widget__layout--editor-open.butex-document-widget__layout--preview-open {\n  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);\n}\n\n.butex-document-widget__layout--editor-open.butex-document-widget__layout--preview-closed {\n  grid-template-columns: minmax(0, 1fr) minmax(0, 0fr);\n}\n\n.butex-document-widget__layout--editor-closed.butex-document-widget__layout--preview-open {\n  grid-template-columns: minmax(0, 0fr) minmax(0, 1fr);\n}\n\n.butex-document-widget__layout--editor-closed.butex-document-widget__layout--preview-closed {\n  grid-template-columns: minmax(0, 1fr) minmax(0, 0fr);\n}\n\n.butex-document-widget__layout--preview-open {\n  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);\n}\n\n.butex-document-widget__layout--preview-closed {\n  grid-template-columns: minmax(0, 1fr) minmax(0, 0fr);\n}\n\n.butex-document-widget__editor-panel,\n.butex-document-widget__preview-panel {\n  min-width: 0;\n  opacity: 1;\n  overflow-x: hidden;\n  overflow-y: auto;\n  transform: translateX(0);\n  transition:\n    opacity 0.18s ease,\n    transform 0.22s ease,\n    padding 0.22s ease,\n    border-width 0.22s ease,\n    box-shadow 0.22s ease;\n}\n\n.butex-document-widget__layout--editor-closed .butex-document-widget__editor-panel {\n  border-width: 0;\n  box-shadow: none;\n  opacity: 0;\n  padding-inline: 0;\n  pointer-events: none;\n  transform: translateX(10px);\n  visibility: hidden;\n}\n\n.butex-document-widget__layout--preview-closed .butex-document-widget__preview-panel {\n  border-width: 0;\n  box-shadow: none;\n  opacity: 0;\n  padding-inline: 0;\n  pointer-events: none;\n  transform: translateX(-10px);\n  visibility: hidden;\n}\n\n.butex-document-widget__block {\n  border: 1px solid var(--butex-document-border);\n  border-radius: 9px;\n  background: var(--butex-document-panel);\n  display: grid;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding: 10px;\n}\n\n.butex-document-widget__block-head,\n.butex-document-widget__row-actions,\n.butex-document-widget__drawer-head {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  justify-content: space-between;\n}\n\n.butex-document-widget__row-actions {\n  justify-content: flex-start;\n}\n\n.butex-document-widget__field {\n  display: grid;\n  gap: 6px;\n}\n\n.butex-document-widget__field--short {\n  max-width: 220px;\n}\n\n.butex-document-widget input,\n.butex-document-widget textarea {\n  background: var(--butex-document-input-bg);\n  border: 1px solid var(--butex-document-input-border);\n  border-radius: 8px;\n  color: var(--butex-document-fg);\n  font: inherit;\n  min-height: 34px;\n  padding: 7px 9px;\n}\n\n.butex-document-widget textarea {\n  min-height: 72px;\n  resize: vertical;\n}\n\n.butex-document-widget__chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n.butex-document-widget .butex-document-widget__math-chip {\n  background: var(--butex-document-math-bg);\n  border-color: var(--butex-document-math-border);\n  direction: ltr;\n  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;\n  min-height: 28px;\n  unicode-bidi: isolate;\n}\n\n.butex-document-widget__list-editor,\n.butex-document-widget__image-editor {\n  display: grid;\n  gap: 10px;\n}\n\n.butex-document-widget__list-item {\n  border-inline-start: 3px solid var(--butex-document-border);\n  display: grid;\n  gap: 8px;\n  padding-inline-start: 10px;\n}\n\n.butex-document-widget__nested {\n  display: grid;\n  gap: 6px;\n}\n\n.butex-document-widget__nested-block {\n  border: 1px dashed var(--butex-document-border);\n  border-radius: 8px;\n  color: var(--butex-document-muted);\n  background: var(--butex-document-bg);\n  padding: 8px;\n}\n\n.butex-document-widget__table-editor {\n  display: grid;\n  gap: 10px;\n}\n\n.butex-document-widget__table-grid {\n  display: grid;\n  gap: 6px;\n  overflow-x: auto;\n}\n\n.butex-document-widget__table-row {\n  display: flex;\n  gap: 6px;\n}\n\n.butex-document-widget__table-cell {\n  display: grid;\n  gap: 4px;\n  min-width: 120px;\n}\n\n.butex-document-widget__placeholder,\n.butex-document-widget__error {\n  margin: 0;\n  color: var(--butex-document-muted);\n}\n\n.butex-document-widget__error {\n  border: 1px solid var(--butex-document-error);\n  border-radius: 8px;\n  background: var(--butex-document-error-bg);\n  color: var(--butex-document-error);\n  padding: 10px;\n}\n\n.butex-document-widget__preview {\n  background: var(--butex-document-preview-bg);\n  color: var(--butex-document-preview-fg);\n  direction: rtl;\n  font-family: var(--butex-document-preview-font);\n  font-size: 1.08rem;\n  line-height: 1.9;\n}\n\n.butex-document-widget__preview h1,\n.butex-document-widget__preview h2,\n.butex-document-widget__preview h3,\n.butex-document-widget__preview p,\n.butex-document-widget__preview li,\n.butex-document-widget__preview td {\n  overflow: visible;\n}\n\n.butex-document-widget__preview h1,\n.butex-document-widget__preview h2,\n.butex-document-widget__preview h3,\n.butex-document-widget__preview p {\n  margin: 0 0 12px;\n}\n\n.butex-document-widget__preview ul,\n.butex-document-widget__preview ol {\n  margin: 0 0 12px;\n  padding-inline-start: 24px;\n}\n\n.butex-document-widget__preview img {\n  display: block;\n  height: auto;\n  max-width: 100%;\n}\n\n.butex-document-widget__preview table {\n  border-collapse: collapse;\n  margin: 12px 0;\n  width: 100%;\n}\n\n.butex-document-widget__preview td {\n  border: 1px solid var(--butex-document-table-border);\n  padding: 6px 8px;\n}\n\n.butex-document-widget .butex-document-math-island {\n  direction: ltr;\n  display: inline-block;\n  line-height: normal;\n  margin: 0 2px;\n  overflow: visible;\n  padding: 0;\n  unicode-bidi: isolate;\n  vertical-align: middle;\n}\n\n.butex-document-widget .butex-document-math-island mjx-container {\n  display: inline-block !important;\n  line-height: normal;\n  margin: 0;\n  overflow: visible;\n  vertical-align: middle;\n}\n\n.butex-document-widget .butex-document-math-island[data-math-display=\"true\"] {\n  display: block;\n  margin: 10px 0;\n  overflow: visible;\n  text-align: center;\n}\n\n.butex-document-widget .butex-document-math-island[data-math-display=\"true\"] mjx-container {\n  display: block !important;\n  margin-inline: auto;\n}\n\n.butex-document-widget__preview-error {\n  border: 1px solid var(--butex-document-error);\n  border-radius: 8px;\n  background: var(--butex-document-error-bg);\n  color: var(--butex-document-error);\n  margin: 12px 0 0;\n  padding: 8px 10px;\n}\n\n.butex-document-widget__dev {\n  border: 1px solid var(--butex-document-dev-border);\n  border-radius: 10px;\n  background: var(--butex-document-dev-bg);\n  box-shadow: var(--butex-document-shadow);\n  display: grid;\n  gap: 10px;\n  padding: 12px;\n}\n\n.butex-document-widget__dev pre {\n  border: 1px solid var(--butex-document-dev-border);\n  border-radius: 8px;\n  background: var(--butex-document-dev-code-bg);\n  color: var(--butex-document-dev-code-fg);\n  direction: ltr;\n  margin: 0;\n  max-height: 220px;\n  overflow: auto;\n  padding: 10px;\n  text-align: left;\n  white-space: pre-wrap;\n}\n\n.butex-document-widget__drawer {\n  background: var(--butex-document-drawer-bg);\n  border-inline-start: 1px solid var(--butex-document-border);\n  bottom: 0;\n  box-shadow: -8px 0 22px rgba(15, 23, 42, 0.12);\n  display: grid;\n  gap: 12px;\n  max-width: min(680px, 94vw);\n  overflow: auto;\n  padding: 14px;\n  position: fixed;\n  right: 0;\n  top: 0;\n  width: 640px;\n  z-index: 30;\n}\n\n@media (max-width: 900px) {\n  .butex-document-widget__layout {\n    grid-template-columns: 1fr;\n  }\n\n  .butex-document-widget__layout--preview-closed .butex-document-widget__preview-panel {\n    display: none;\n  }\n\n  .butex-document-widget__layout--editor-closed .butex-document-widget__editor-panel {\n    display: none;\n  }\n\n  .butex-document-widget__drawer {\n    border-inline-start: 0;\n    left: 0;\n    max-width: none;\n    width: 100%;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .butex-document-widget__layout,\n  .butex-document-widget__editor-panel,\n  .butex-document-widget__preview-panel {\n    transition: none;\n  }\n}\n";
+declare const DOCUMENT_WIDGET_CSS = "\n.butex-document-widget {\n  --butex-document-bg: var(--butex-bg, #f8fafc);\n  --butex-document-fg: var(--butex-fg, #0f172a);\n  --butex-document-muted: var(--butex-muted, #64748b);\n  --butex-document-panel: var(--butex-panel, #ffffff);\n  --butex-document-border: var(--butex-border, #e2e8f0);\n  --butex-document-accent: var(--butex-accent, #0d9488);\n  --butex-document-accent-hover: var(--butex-accent-hover, #0f766e);\n  --butex-document-accent-bg: var(--butex-toolbar-hover-bg, rgba(13, 148, 136, 0.08));\n  --butex-document-focus-shadow: var(--butex-focus-shadow, rgba(13, 148, 136, 0.16));\n  --butex-document-danger: var(--butex-danger, #dc2626);\n  --butex-document-error: var(--butex-error, #b91c1c);\n  --butex-document-error-bg: var(--butex-error-bg, #fef2f2);\n  --butex-document-shadow: var(--butex-shadow-md, 0 4px 14px rgba(15, 23, 42, 0.08));\n  --butex-document-preview-bg: var(--butex-preview-bg, #ffffff);\n  --butex-document-preview-fg: var(--butex-preview-fg, var(--butex-document-fg));\n  --butex-document-preview-font: \"Amiri\", \"Noto Serif Arabic\", Georgia, \"Times New Roman\", serif;\n  --butex-document-drawer-bg: var(--butex-document-panel);\n  --butex-document-input-bg: #ffffff;\n  --butex-document-input-border: var(--butex-document-border);\n  --butex-document-table-border: var(--butex-document-border);\n  --butex-document-raw-bg: #f8fafc;\n  --butex-document-math-bg: var(--butex-document-accent-bg);\n  --butex-document-math-border: rgba(13, 148, 136, 0.35);\n  --butex-document-dev-bg: var(--butex-dev-bg, #fffbeb);\n  --butex-document-dev-border: var(--butex-dev-border, #fcd34d);\n  --butex-document-dev-code-bg: var(--butex-dev-inset-bg, #ffffff);\n  --butex-document-dev-code-fg: var(--butex-dev-inset-fg, var(--butex-document-fg));\n  box-sizing: border-box;\n  color: var(--butex-document-fg);\n  direction: rtl;\n  font-family: ui-sans-serif, system-ui, \"Segoe UI\", Tahoma, Arial, sans-serif;\n  line-height: 1.45;\n}\n\n.butex-document-widget *,\n.butex-document-widget *::before,\n.butex-document-widget *::after {\n  box-sizing: inherit;\n}\n\n.butex-document-widget__shell {\n  display: grid;\n  gap: 12px;\n}\n\n.butex-document-widget__toolbar,\n.butex-document-widget__panel {\n  border: 1px solid var(--butex-document-border);\n  border-radius: 10px;\n  background: var(--butex-document-panel);\n  box-shadow: var(--butex-document-shadow);\n}\n\n.butex-document-widget__toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  padding: 8px;\n}\n\n.butex-document-widget button {\n  border: 1px solid var(--butex-document-border);\n  border-radius: 8px;\n  background: var(--butex-document-panel);\n  color: var(--butex-document-fg);\n  cursor: pointer;\n  min-height: 32px;\n  padding: 0 10px;\n  transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease, color 0.14s ease;\n}\n\n.butex-document-widget button[aria-pressed=\"true\"],\n.butex-document-widget button:hover {\n  border-color: var(--butex-document-accent);\n  background: var(--butex-document-accent-bg);\n}\n\n.butex-document-widget button:focus-visible,\n.butex-document-widget input:focus-visible,\n.butex-document-widget textarea:focus-visible {\n  border-color: var(--butex-document-accent);\n  box-shadow: 0 0 0 3px var(--butex-document-focus-shadow);\n  outline: none;\n}\n\n.butex-document-widget button:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.butex-document-widget__panel {\n  padding: 16px;\n}\n\n.butex-document-widget__layout {\n  align-items: start;\n  display: grid;\n  gap: 12px;\n  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);\n  transition: grid-template-columns 0.22s ease;\n}\n\n.butex-document-widget__layout--editor-open.butex-document-widget__layout--preview-open {\n  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);\n}\n\n.butex-document-widget__layout--editor-open.butex-document-widget__layout--preview-closed {\n  grid-template-columns: minmax(0, 1fr) minmax(0, 0fr);\n}\n\n.butex-document-widget__layout--editor-closed.butex-document-widget__layout--preview-open {\n  grid-template-columns: minmax(0, 0fr) minmax(0, 1fr);\n}\n\n.butex-document-widget__layout--editor-closed.butex-document-widget__layout--preview-closed {\n  grid-template-columns: minmax(0, 1fr) minmax(0, 0fr);\n}\n\n.butex-document-widget__layout--preview-open {\n  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);\n}\n\n.butex-document-widget__layout--preview-closed {\n  grid-template-columns: minmax(0, 1fr) minmax(0, 0fr);\n}\n\n.butex-document-widget__editor-panel,\n.butex-document-widget__preview-panel {\n  min-width: 0;\n  opacity: 1;\n  overflow-x: hidden;\n  overflow-y: auto;\n  transform: translateX(0);\n  transition:\n    opacity 0.18s ease,\n    transform 0.22s ease,\n    padding 0.22s ease,\n    border-width 0.22s ease,\n    box-shadow 0.22s ease;\n}\n\n.butex-document-widget__layout--editor-closed .butex-document-widget__editor-panel {\n  border-width: 0;\n  box-shadow: none;\n  opacity: 0;\n  padding-inline: 0;\n  pointer-events: none;\n  transform: translateX(10px);\n  visibility: hidden;\n}\n\n.butex-document-widget__layout--preview-closed .butex-document-widget__preview-panel {\n  border-width: 0;\n  box-shadow: none;\n  opacity: 0;\n  padding-inline: 0;\n  pointer-events: none;\n  transform: translateX(-10px);\n  visibility: hidden;\n}\n\n.butex-document-widget__block {\n  border: 1px solid var(--butex-document-border);\n  border-radius: 9px;\n  background: var(--butex-document-panel);\n  display: grid;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding: 10px;\n}\n\n.butex-document-widget__block-head,\n.butex-document-widget__row-actions,\n.butex-document-widget__drawer-head {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  justify-content: space-between;\n}\n\n.butex-document-widget__row-actions {\n  justify-content: flex-start;\n}\n\n.butex-document-widget__field {\n  display: grid;\n  gap: 6px;\n}\n\n.butex-document-widget__field--short {\n  max-width: 220px;\n}\n\n.butex-document-widget input,\n.butex-document-widget textarea {\n  background: var(--butex-document-input-bg);\n  border: 1px solid var(--butex-document-input-border);\n  border-radius: 8px;\n  color: var(--butex-document-fg);\n  font: inherit;\n  min-height: 34px;\n  padding: 7px 9px;\n}\n\n.butex-document-widget textarea {\n  min-height: 72px;\n  resize: vertical;\n}\n\n.butex-document-widget__chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n.butex-document-widget .butex-document-widget__math-chip {\n  background: var(--butex-document-math-bg);\n  border-color: var(--butex-document-math-border);\n  direction: ltr;\n  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;\n  min-height: 28px;\n  unicode-bidi: isolate;\n}\n\n.butex-document-widget__list-editor,\n.butex-document-widget__image-editor {\n  display: grid;\n  gap: 10px;\n}\n\n.butex-document-widget__list-item {\n  border-inline-start: 3px solid var(--butex-document-border);\n  display: grid;\n  gap: 8px;\n  padding-inline-start: 10px;\n}\n\n.butex-document-widget__nested {\n  display: grid;\n  gap: 6px;\n}\n\n.butex-document-widget__nested-block {\n  border: 1px dashed var(--butex-document-border);\n  border-radius: 8px;\n  color: var(--butex-document-muted);\n  background: var(--butex-document-bg);\n  padding: 8px;\n}\n\n.butex-document-widget__table-editor {\n  display: grid;\n  gap: 10px;\n}\n\n.butex-document-widget__table-grid {\n  display: grid;\n  gap: 6px;\n  overflow-x: auto;\n}\n\n.butex-document-widget__table-row {\n  display: flex;\n  gap: 6px;\n}\n\n.butex-document-widget__table-cell {\n  display: grid;\n  gap: 4px;\n  min-width: 120px;\n}\n\n.butex-document-widget__placeholder,\n.butex-document-widget__error {\n  margin: 0;\n  color: var(--butex-document-muted);\n}\n\n.butex-document-widget__error {\n  border: 1px solid var(--butex-document-error);\n  border-radius: 8px;\n  background: var(--butex-document-error-bg);\n  color: var(--butex-document-error);\n  padding: 10px;\n}\n\n.butex-document-widget__preview {\n  background: var(--butex-document-preview-bg);\n  color: var(--butex-document-preview-fg);\n  direction: rtl;\n  font-family: var(--butex-document-preview-font);\n  font-size: 1.08rem;\n  line-height: 1.9;\n}\n\n.butex-document-widget__preview h1,\n.butex-document-widget__preview h2,\n.butex-document-widget__preview h3,\n.butex-document-widget__preview p,\n.butex-document-widget__preview li,\n.butex-document-widget__preview td {\n  overflow: visible;\n}\n\n.butex-document-widget__preview h1,\n.butex-document-widget__preview h2,\n.butex-document-widget__preview h3,\n.butex-document-widget__preview p {\n  margin: 0 0 12px;\n}\n\n.butex-document-widget__preview h1 {\n  font-size: 1.75rem;\n  font-weight: 700;\n  line-height: 1.35;\n}\n\n.butex-document-widget__preview h2 {\n  font-size: 1.4rem;\n  font-weight: 600;\n  line-height: 1.4;\n}\n\n.butex-document-widget__preview h3 {\n  font-size: 1.2rem;\n  font-weight: 600;\n  line-height: 1.45;\n}\n\n.butex-document-widget__preview ul,\n.butex-document-widget__preview ol {\n  margin: 0 0 12px;\n  padding-inline-start: 24px;\n}\n\n.butex-document-widget__preview img {\n  display: block;\n  height: auto;\n  max-width: 100%;\n}\n\n.butex-document-widget__preview table {\n  border-collapse: collapse;\n  margin: 12px 0;\n  width: 100%;\n}\n\n.butex-document-widget__preview td {\n  border: 1px solid var(--butex-document-table-border);\n  padding: 6px 8px;\n}\n\n.butex-document-widget .butex-document-math-island {\n  direction: ltr;\n  display: inline-block;\n  line-height: normal;\n  margin: 0 2px;\n  overflow: visible;\n  padding: 0;\n  unicode-bidi: isolate;\n  vertical-align: middle;\n}\n\n.butex-document-widget .butex-document-math-island mjx-container {\n  display: inline-block !important;\n  line-height: normal;\n  margin: 0;\n  overflow: visible;\n  vertical-align: middle;\n}\n\n.butex-document-widget .butex-document-math-island[data-math-display=\"true\"] {\n  display: block;\n  margin: 10px 0;\n  overflow: visible;\n  text-align: center;\n}\n\n.butex-document-widget .butex-document-math-island[data-math-display=\"true\"] mjx-container {\n  display: block !important;\n  margin-inline: auto;\n}\n\n.butex-document-widget__preview-error {\n  border: 1px solid var(--butex-document-error);\n  border-radius: 8px;\n  background: var(--butex-document-error-bg);\n  color: var(--butex-document-error);\n  margin: 12px 0 0;\n  padding: 8px 10px;\n}\n\n.butex-document-widget__dev {\n  border: 1px solid var(--butex-document-dev-border);\n  border-radius: 10px;\n  background: var(--butex-document-dev-bg);\n  box-shadow: var(--butex-document-shadow);\n  display: grid;\n  gap: 10px;\n  padding: 12px;\n}\n\n.butex-document-widget__dev pre {\n  border: 1px solid var(--butex-document-dev-border);\n  border-radius: 8px;\n  background: var(--butex-document-dev-code-bg);\n  color: var(--butex-document-dev-code-fg);\n  direction: ltr;\n  margin: 0;\n  max-height: 220px;\n  overflow: auto;\n  padding: 10px;\n  text-align: left;\n  white-space: pre-wrap;\n}\n\n.butex-document-widget__drawer {\n  background: var(--butex-document-drawer-bg);\n  border-inline-start: 1px solid var(--butex-document-border);\n  bottom: 0;\n  box-shadow: -8px 0 22px rgba(15, 23, 42, 0.12);\n  display: grid;\n  gap: 12px;\n  max-width: min(680px, 94vw);\n  overflow: auto;\n  padding: 14px;\n  position: fixed;\n  right: 0;\n  top: 0;\n  width: 640px;\n  z-index: 30;\n}\n\n@media (max-width: 900px) {\n  .butex-document-widget__layout {\n    grid-template-columns: 1fr;\n  }\n\n  .butex-document-widget__layout--preview-closed .butex-document-widget__preview-panel {\n    display: none;\n  }\n\n  .butex-document-widget__layout--editor-closed .butex-document-widget__editor-panel {\n    display: none;\n  }\n\n  .butex-document-widget__drawer {\n    border-inline-start: 0;\n    left: 0;\n    max-width: none;\n    width: 100%;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .butex-document-widget__layout,\n  .butex-document-widget__editor-panel,\n  .butex-document-widget__preview-panel {\n    transition: none;\n  }\n}\n";
 declare function injectBuTeXDocumentStyles(doc?: Document): void;
 
 export { ButexDocumentEditor, type ButexDocumentEditorProps, DOCUMENT_WIDGET_CSS, type DocumentInitialState, injectBuTeXDocumentStyles, resolveInitialDocument };

package/dist/react-document.d.ts

@@ -147,7 +147,7 @@ declare namespace ButexDocumentEditor {
     var displayName: string;
 }
 
-declare const DOCUMENT_WIDGET_CSS = "\n.butex-document-widget {\n  --butex-document-bg: var(--butex-bg, #f8fafc);\n  --butex-document-fg: var(--butex-fg, #0f172a);\n  --butex-document-muted: var(--butex-muted, #64748b);\n  --butex-document-panel: var(--butex-panel, #ffffff);\n  --butex-document-border: var(--butex-border, #e2e8f0);\n  --butex-document-accent: var(--butex-accent, #0d9488);\n  --butex-document-accent-hover: var(--butex-accent-hover, #0f766e);\n  --butex-document-accent-bg: var(--butex-toolbar-hover-bg, rgba(13, 148, 136, 0.08));\n  --butex-document-focus-shadow: var(--butex-focus-shadow, rgba(13, 148, 136, 0.16));\n  --butex-document-danger: var(--butex-danger, #dc2626);\n  --butex-document-error: var(--butex-error, #b91c1c);\n  --butex-document-error-bg: var(--butex-error-bg, #fef2f2);\n  --butex-document-shadow: var(--butex-shadow-md, 0 4px 14px rgba(15, 23, 42, 0.08));\n  --butex-document-preview-bg: var(--butex-preview-bg, #ffffff);\n  --butex-document-preview-fg: var(--butex-preview-fg, var(--butex-document-fg));\n  --butex-document-preview-font: \"Amiri\", \"Noto Serif Arabic\", Georgia, \"Times New Roman\", serif;\n  --butex-document-drawer-bg: var(--butex-document-panel);\n  --butex-document-input-bg: #ffffff;\n  --butex-document-input-border: var(--butex-document-border);\n  --butex-document-table-border: var(--butex-document-border);\n  --butex-document-raw-bg: #f8fafc;\n  --butex-document-math-bg: var(--butex-document-accent-bg);\n  --butex-document-math-border: rgba(13, 148, 136, 0.35);\n  --butex-document-dev-bg: var(--butex-dev-bg, #fffbeb);\n  --butex-document-dev-border: var(--butex-dev-border, #fcd34d);\n  --butex-document-dev-code-bg: var(--butex-dev-inset-bg, #ffffff);\n  --butex-document-dev-code-fg: var(--butex-dev-inset-fg, var(--butex-document-fg));\n  box-sizing: border-box;\n  color: var(--butex-document-fg);\n  direction: rtl;\n  font-family: ui-sans-serif, system-ui, \"Segoe UI\", Tahoma, Arial, sans-serif;\n  line-height: 1.45;\n}\n\n.butex-document-widget *,\n.butex-document-widget *::before,\n.butex-document-widget *::after {\n  box-sizing: inherit;\n}\n\n.butex-document-widget__shell {\n  display: grid;\n  gap: 12px;\n}\n\n.butex-document-widget__toolbar,\n.butex-document-widget__panel {\n  border: 1px solid var(--butex-document-border);\n  border-radius: 10px;\n  background: var(--butex-document-panel);\n  box-shadow: var(--butex-document-shadow);\n}\n\n.butex-document-widget__toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  padding: 8px;\n}\n\n.butex-document-widget button {\n  border: 1px solid var(--butex-document-border);\n  border-radius: 8px;\n  background: var(--butex-document-panel);\n  color: var(--butex-document-fg);\n  cursor: pointer;\n  min-height: 32px;\n  padding: 0 10px;\n  transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease, color 0.14s ease;\n}\n\n.butex-document-widget button[aria-pressed=\"true\"],\n.butex-document-widget button:hover {\n  border-color: var(--butex-document-accent);\n  background: var(--butex-document-accent-bg);\n}\n\n.butex-document-widget button:focus-visible,\n.butex-document-widget input:focus-visible,\n.butex-document-widget textarea:focus-visible {\n  border-color: var(--butex-document-accent);\n  box-shadow: 0 0 0 3px var(--butex-document-focus-shadow);\n  outline: none;\n}\n\n.butex-document-widget button:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.butex-document-widget__panel {\n  padding: 16px;\n}\n\n.butex-document-widget__layout {\n  align-items: start;\n  display: grid;\n  gap: 12px;\n  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);\n  transition: grid-template-columns 0.22s ease;\n}\n\n.butex-document-widget__layout--editor-open.butex-document-widget__layout--preview-open {\n  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);\n}\n\n.butex-document-widget__layout--editor-open.butex-document-widget__layout--preview-closed {\n  grid-template-columns: minmax(0, 1fr) minmax(0, 0fr);\n}\n\n.butex-document-widget__layout--editor-closed.butex-document-widget__layout--preview-open {\n  grid-template-columns: minmax(0, 0fr) minmax(0, 1fr);\n}\n\n.butex-document-widget__layout--editor-closed.butex-document-widget__layout--preview-closed {\n  grid-template-columns: minmax(0, 1fr) minmax(0, 0fr);\n}\n\n.butex-document-widget__layout--preview-open {\n  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);\n}\n\n.butex-document-widget__layout--preview-closed {\n  grid-template-columns: minmax(0, 1fr) minmax(0, 0fr);\n}\n\n.butex-document-widget__editor-panel,\n.butex-document-widget__preview-panel {\n  min-width: 0;\n  opacity: 1;\n  overflow-x: hidden;\n  overflow-y: auto;\n  transform: translateX(0);\n  transition:\n    opacity 0.18s ease,\n    transform 0.22s ease,\n    padding 0.22s ease,\n    border-width 0.22s ease,\n    box-shadow 0.22s ease;\n}\n\n.butex-document-widget__layout--editor-closed .butex-document-widget__editor-panel {\n  border-width: 0;\n  box-shadow: none;\n  opacity: 0;\n  padding-inline: 0;\n  pointer-events: none;\n  transform: translateX(10px);\n  visibility: hidden;\n}\n\n.butex-document-widget__layout--preview-closed .butex-document-widget__preview-panel {\n  border-width: 0;\n  box-shadow: none;\n  opacity: 0;\n  padding-inline: 0;\n  pointer-events: none;\n  transform: translateX(-10px);\n  visibility: hidden;\n}\n\n.butex-document-widget__block {\n  border: 1px solid var(--butex-document-border);\n  border-radius: 9px;\n  background: var(--butex-document-panel);\n  display: grid;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding: 10px;\n}\n\n.butex-document-widget__block-head,\n.butex-document-widget__row-actions,\n.butex-document-widget__drawer-head {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  justify-content: space-between;\n}\n\n.butex-document-widget__row-actions {\n  justify-content: flex-start;\n}\n\n.butex-document-widget__field {\n  display: grid;\n  gap: 6px;\n}\n\n.butex-document-widget__field--short {\n  max-width: 220px;\n}\n\n.butex-document-widget input,\n.butex-document-widget textarea {\n  background: var(--butex-document-input-bg);\n  border: 1px solid var(--butex-document-input-border);\n  border-radius: 8px;\n  color: var(--butex-document-fg);\n  font: inherit;\n  min-height: 34px;\n  padding: 7px 9px;\n}\n\n.butex-document-widget textarea {\n  min-height: 72px;\n  resize: vertical;\n}\n\n.butex-document-widget__chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n.butex-document-widget .butex-document-widget__math-chip {\n  background: var(--butex-document-math-bg);\n  border-color: var(--butex-document-math-border);\n  direction: ltr;\n  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;\n  min-height: 28px;\n  unicode-bidi: isolate;\n}\n\n.butex-document-widget__list-editor,\n.butex-document-widget__image-editor {\n  display: grid;\n  gap: 10px;\n}\n\n.butex-document-widget__list-item {\n  border-inline-start: 3px solid var(--butex-document-border);\n  display: grid;\n  gap: 8px;\n  padding-inline-start: 10px;\n}\n\n.butex-document-widget__nested {\n  display: grid;\n  gap: 6px;\n}\n\n.butex-document-widget__nested-block {\n  border: 1px dashed var(--butex-document-border);\n  border-radius: 8px;\n  color: var(--butex-document-muted);\n  background: var(--butex-document-bg);\n  padding: 8px;\n}\n\n.butex-document-widget__table-editor {\n  display: grid;\n  gap: 10px;\n}\n\n.butex-document-widget__table-grid {\n  display: grid;\n  gap: 6px;\n  overflow-x: auto;\n}\n\n.butex-document-widget__table-row {\n  display: flex;\n  gap: 6px;\n}\n\n.butex-document-widget__table-cell {\n  display: grid;\n  gap: 4px;\n  min-width: 120px;\n}\n\n.butex-document-widget__placeholder,\n.butex-document-widget__error {\n  margin: 0;\n  color: var(--butex-document-muted);\n}\n\n.butex-document-widget__error {\n  border: 1px solid var(--butex-document-error);\n  border-radius: 8px;\n  background: var(--butex-document-error-bg);\n  color: var(--butex-document-error);\n  padding: 10px;\n}\n\n.butex-document-widget__preview {\n  background: var(--butex-document-preview-bg);\n  color: var(--butex-document-preview-fg);\n  direction: rtl;\n  font-family: var(--butex-document-preview-font);\n  font-size: 1.08rem;\n  line-height: 1.9;\n}\n\n.butex-document-widget__preview h1,\n.butex-document-widget__preview h2,\n.butex-document-widget__preview h3,\n.butex-document-widget__preview p,\n.butex-document-widget__preview li,\n.butex-document-widget__preview td {\n  overflow: visible;\n}\n\n.butex-document-widget__preview h1,\n.butex-document-widget__preview h2,\n.butex-document-widget__preview h3,\n.butex-document-widget__preview p {\n  margin: 0 0 12px;\n}\n\n.butex-document-widget__preview ul,\n.butex-document-widget__preview ol {\n  margin: 0 0 12px;\n  padding-inline-start: 24px;\n}\n\n.butex-document-widget__preview img {\n  display: block;\n  height: auto;\n  max-width: 100%;\n}\n\n.butex-document-widget__preview table {\n  border-collapse: collapse;\n  margin: 12px 0;\n  width: 100%;\n}\n\n.butex-document-widget__preview td {\n  border: 1px solid var(--butex-document-table-border);\n  padding: 6px 8px;\n}\n\n.butex-document-widget .butex-document-math-island {\n  direction: ltr;\n  display: inline-block;\n  line-height: normal;\n  margin: 0 2px;\n  overflow: visible;\n  padding: 0;\n  unicode-bidi: isolate;\n  vertical-align: middle;\n}\n\n.butex-document-widget .butex-document-math-island mjx-container {\n  display: inline-block !important;\n  line-height: normal;\n  margin: 0;\n  overflow: visible;\n  vertical-align: middle;\n}\n\n.butex-document-widget .butex-document-math-island[data-math-display=\"true\"] {\n  display: block;\n  margin: 10px 0;\n  overflow: visible;\n  text-align: center;\n}\n\n.butex-document-widget .butex-document-math-island[data-math-display=\"true\"] mjx-container {\n  display: block !important;\n  margin-inline: auto;\n}\n\n.butex-document-widget__preview-error {\n  border: 1px solid var(--butex-document-error);\n  border-radius: 8px;\n  background: var(--butex-document-error-bg);\n  color: var(--butex-document-error);\n  margin: 12px 0 0;\n  padding: 8px 10px;\n}\n\n.butex-document-widget__dev {\n  border: 1px solid var(--butex-document-dev-border);\n  border-radius: 10px;\n  background: var(--butex-document-dev-bg);\n  box-shadow: var(--butex-document-shadow);\n  display: grid;\n  gap: 10px;\n  padding: 12px;\n}\n\n.butex-document-widget__dev pre {\n  border: 1px solid var(--butex-document-dev-border);\n  border-radius: 8px;\n  background: var(--butex-document-dev-code-bg);\n  color: var(--butex-document-dev-code-fg);\n  direction: ltr;\n  margin: 0;\n  max-height: 220px;\n  overflow: auto;\n  padding: 10px;\n  text-align: left;\n  white-space: pre-wrap;\n}\n\n.butex-document-widget__drawer {\n  background: var(--butex-document-drawer-bg);\n  border-inline-start: 1px solid var(--butex-document-border);\n  bottom: 0;\n  box-shadow: -8px 0 22px rgba(15, 23, 42, 0.12);\n  display: grid;\n  gap: 12px;\n  max-width: min(680px, 94vw);\n  overflow: auto;\n  padding: 14px;\n  position: fixed;\n  right: 0;\n  top: 0;\n  width: 640px;\n  z-index: 30;\n}\n\n@media (max-width: 900px) {\n  .butex-document-widget__layout {\n    grid-template-columns: 1fr;\n  }\n\n  .butex-document-widget__layout--preview-closed .butex-document-widget__preview-panel {\n    display: none;\n  }\n\n  .butex-document-widget__layout--editor-closed .butex-document-widget__editor-panel {\n    display: none;\n  }\n\n  .butex-document-widget__drawer {\n    border-inline-start: 0;\n    left: 0;\n    max-width: none;\n    width: 100%;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .butex-document-widget__layout,\n  .butex-document-widget__editor-panel,\n  .butex-document-widget__preview-panel {\n    transition: none;\n  }\n}\n";
+declare const DOCUMENT_WIDGET_CSS = "\n.butex-document-widget {\n  --butex-document-bg: var(--butex-bg, #f8fafc);\n  --butex-document-fg: var(--butex-fg, #0f172a);\n  --butex-document-muted: var(--butex-muted, #64748b);\n  --butex-document-panel: var(--butex-panel, #ffffff);\n  --butex-document-border: var(--butex-border, #e2e8f0);\n  --butex-document-accent: var(--butex-accent, #0d9488);\n  --butex-document-accent-hover: var(--butex-accent-hover, #0f766e);\n  --butex-document-accent-bg: var(--butex-toolbar-hover-bg, rgba(13, 148, 136, 0.08));\n  --butex-document-focus-shadow: var(--butex-focus-shadow, rgba(13, 148, 136, 0.16));\n  --butex-document-danger: var(--butex-danger, #dc2626);\n  --butex-document-error: var(--butex-error, #b91c1c);\n  --butex-document-error-bg: var(--butex-error-bg, #fef2f2);\n  --butex-document-shadow: var(--butex-shadow-md, 0 4px 14px rgba(15, 23, 42, 0.08));\n  --butex-document-preview-bg: var(--butex-preview-bg, #ffffff);\n  --butex-document-preview-fg: var(--butex-preview-fg, var(--butex-document-fg));\n  --butex-document-preview-font: \"Amiri\", \"Noto Serif Arabic\", Georgia, \"Times New Roman\", serif;\n  --butex-document-drawer-bg: var(--butex-document-panel);\n  --butex-document-input-bg: #ffffff;\n  --butex-document-input-border: var(--butex-document-border);\n  --butex-document-table-border: var(--butex-document-border);\n  --butex-document-raw-bg: #f8fafc;\n  --butex-document-math-bg: var(--butex-document-accent-bg);\n  --butex-document-math-border: rgba(13, 148, 136, 0.35);\n  --butex-document-dev-bg: var(--butex-dev-bg, #fffbeb);\n  --butex-document-dev-border: var(--butex-dev-border, #fcd34d);\n  --butex-document-dev-code-bg: var(--butex-dev-inset-bg, #ffffff);\n  --butex-document-dev-code-fg: var(--butex-dev-inset-fg, var(--butex-document-fg));\n  box-sizing: border-box;\n  color: var(--butex-document-fg);\n  direction: rtl;\n  font-family: ui-sans-serif, system-ui, \"Segoe UI\", Tahoma, Arial, sans-serif;\n  line-height: 1.45;\n}\n\n.butex-document-widget *,\n.butex-document-widget *::before,\n.butex-document-widget *::after {\n  box-sizing: inherit;\n}\n\n.butex-document-widget__shell {\n  display: grid;\n  gap: 12px;\n}\n\n.butex-document-widget__toolbar,\n.butex-document-widget__panel {\n  border: 1px solid var(--butex-document-border);\n  border-radius: 10px;\n  background: var(--butex-document-panel);\n  box-shadow: var(--butex-document-shadow);\n}\n\n.butex-document-widget__toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  padding: 8px;\n}\n\n.butex-document-widget button {\n  border: 1px solid var(--butex-document-border);\n  border-radius: 8px;\n  background: var(--butex-document-panel);\n  color: var(--butex-document-fg);\n  cursor: pointer;\n  min-height: 32px;\n  padding: 0 10px;\n  transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease, color 0.14s ease;\n}\n\n.butex-document-widget button[aria-pressed=\"true\"],\n.butex-document-widget button:hover {\n  border-color: var(--butex-document-accent);\n  background: var(--butex-document-accent-bg);\n}\n\n.butex-document-widget button:focus-visible,\n.butex-document-widget input:focus-visible,\n.butex-document-widget textarea:focus-visible {\n  border-color: var(--butex-document-accent);\n  box-shadow: 0 0 0 3px var(--butex-document-focus-shadow);\n  outline: none;\n}\n\n.butex-document-widget button:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.butex-document-widget__panel {\n  padding: 16px;\n}\n\n.butex-document-widget__layout {\n  align-items: start;\n  display: grid;\n  gap: 12px;\n  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);\n  transition: grid-template-columns 0.22s ease;\n}\n\n.butex-document-widget__layout--editor-open.butex-document-widget__layout--preview-open {\n  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);\n}\n\n.butex-document-widget__layout--editor-open.butex-document-widget__layout--preview-closed {\n  grid-template-columns: minmax(0, 1fr) minmax(0, 0fr);\n}\n\n.butex-document-widget__layout--editor-closed.butex-document-widget__layout--preview-open {\n  grid-template-columns: minmax(0, 0fr) minmax(0, 1fr);\n}\n\n.butex-document-widget__layout--editor-closed.butex-document-widget__layout--preview-closed {\n  grid-template-columns: minmax(0, 1fr) minmax(0, 0fr);\n}\n\n.butex-document-widget__layout--preview-open {\n  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);\n}\n\n.butex-document-widget__layout--preview-closed {\n  grid-template-columns: minmax(0, 1fr) minmax(0, 0fr);\n}\n\n.butex-document-widget__editor-panel,\n.butex-document-widget__preview-panel {\n  min-width: 0;\n  opacity: 1;\n  overflow-x: hidden;\n  overflow-y: auto;\n  transform: translateX(0);\n  transition:\n    opacity 0.18s ease,\n    transform 0.22s ease,\n    padding 0.22s ease,\n    border-width 0.22s ease,\n    box-shadow 0.22s ease;\n}\n\n.butex-document-widget__layout--editor-closed .butex-document-widget__editor-panel {\n  border-width: 0;\n  box-shadow: none;\n  opacity: 0;\n  padding-inline: 0;\n  pointer-events: none;\n  transform: translateX(10px);\n  visibility: hidden;\n}\n\n.butex-document-widget__layout--preview-closed .butex-document-widget__preview-panel {\n  border-width: 0;\n  box-shadow: none;\n  opacity: 0;\n  padding-inline: 0;\n  pointer-events: none;\n  transform: translateX(-10px);\n  visibility: hidden;\n}\n\n.butex-document-widget__block {\n  border: 1px solid var(--butex-document-border);\n  border-radius: 9px;\n  background: var(--butex-document-panel);\n  display: grid;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding: 10px;\n}\n\n.butex-document-widget__block-head,\n.butex-document-widget__row-actions,\n.butex-document-widget__drawer-head {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  justify-content: space-between;\n}\n\n.butex-document-widget__row-actions {\n  justify-content: flex-start;\n}\n\n.butex-document-widget__field {\n  display: grid;\n  gap: 6px;\n}\n\n.butex-document-widget__field--short {\n  max-width: 220px;\n}\n\n.butex-document-widget input,\n.butex-document-widget textarea {\n  background: var(--butex-document-input-bg);\n  border: 1px solid var(--butex-document-input-border);\n  border-radius: 8px;\n  color: var(--butex-document-fg);\n  font: inherit;\n  min-height: 34px;\n  padding: 7px 9px;\n}\n\n.butex-document-widget textarea {\n  min-height: 72px;\n  resize: vertical;\n}\n\n.butex-document-widget__chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n.butex-document-widget .butex-document-widget__math-chip {\n  background: var(--butex-document-math-bg);\n  border-color: var(--butex-document-math-border);\n  direction: ltr;\n  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;\n  min-height: 28px;\n  unicode-bidi: isolate;\n}\n\n.butex-document-widget__list-editor,\n.butex-document-widget__image-editor {\n  display: grid;\n  gap: 10px;\n}\n\n.butex-document-widget__list-item {\n  border-inline-start: 3px solid var(--butex-document-border);\n  display: grid;\n  gap: 8px;\n  padding-inline-start: 10px;\n}\n\n.butex-document-widget__nested {\n  display: grid;\n  gap: 6px;\n}\n\n.butex-document-widget__nested-block {\n  border: 1px dashed var(--butex-document-border);\n  border-radius: 8px;\n  color: var(--butex-document-muted);\n  background: var(--butex-document-bg);\n  padding: 8px;\n}\n\n.butex-document-widget__table-editor {\n  display: grid;\n  gap: 10px;\n}\n\n.butex-document-widget__table-grid {\n  display: grid;\n  gap: 6px;\n  overflow-x: auto;\n}\n\n.butex-document-widget__table-row {\n  display: flex;\n  gap: 6px;\n}\n\n.butex-document-widget__table-cell {\n  display: grid;\n  gap: 4px;\n  min-width: 120px;\n}\n\n.butex-document-widget__placeholder,\n.butex-document-widget__error {\n  margin: 0;\n  color: var(--butex-document-muted);\n}\n\n.butex-document-widget__error {\n  border: 1px solid var(--butex-document-error);\n  border-radius: 8px;\n  background: var(--butex-document-error-bg);\n  color: var(--butex-document-error);\n  padding: 10px;\n}\n\n.butex-document-widget__preview {\n  background: var(--butex-document-preview-bg);\n  color: var(--butex-document-preview-fg);\n  direction: rtl;\n  font-family: var(--butex-document-preview-font);\n  font-size: 1.08rem;\n  line-height: 1.9;\n}\n\n.butex-document-widget__preview h1,\n.butex-document-widget__preview h2,\n.butex-document-widget__preview h3,\n.butex-document-widget__preview p,\n.butex-document-widget__preview li,\n.butex-document-widget__preview td {\n  overflow: visible;\n}\n\n.butex-document-widget__preview h1,\n.butex-document-widget__preview h2,\n.butex-document-widget__preview h3,\n.butex-document-widget__preview p {\n  margin: 0 0 12px;\n}\n\n.butex-document-widget__preview h1 {\n  font-size: 1.75rem;\n  font-weight: 700;\n  line-height: 1.35;\n}\n\n.butex-document-widget__preview h2 {\n  font-size: 1.4rem;\n  font-weight: 600;\n  line-height: 1.4;\n}\n\n.butex-document-widget__preview h3 {\n  font-size: 1.2rem;\n  font-weight: 600;\n  line-height: 1.45;\n}\n\n.butex-document-widget__preview ul,\n.butex-document-widget__preview ol {\n  margin: 0 0 12px;\n  padding-inline-start: 24px;\n}\n\n.butex-document-widget__preview img {\n  display: block;\n  height: auto;\n  max-width: 100%;\n}\n\n.butex-document-widget__preview table {\n  border-collapse: collapse;\n  margin: 12px 0;\n  width: 100%;\n}\n\n.butex-document-widget__preview td {\n  border: 1px solid var(--butex-document-table-border);\n  padding: 6px 8px;\n}\n\n.butex-document-widget .butex-document-math-island {\n  direction: ltr;\n  display: inline-block;\n  line-height: normal;\n  margin: 0 2px;\n  overflow: visible;\n  padding: 0;\n  unicode-bidi: isolate;\n  vertical-align: middle;\n}\n\n.butex-document-widget .butex-document-math-island mjx-container {\n  display: inline-block !important;\n  line-height: normal;\n  margin: 0;\n  overflow: visible;\n  vertical-align: middle;\n}\n\n.butex-document-widget .butex-document-math-island[data-math-display=\"true\"] {\n  display: block;\n  margin: 10px 0;\n  overflow: visible;\n  text-align: center;\n}\n\n.butex-document-widget .butex-document-math-island[data-math-display=\"true\"] mjx-container {\n  display: block !important;\n  margin-inline: auto;\n}\n\n.butex-document-widget__preview-error {\n  border: 1px solid var(--butex-document-error);\n  border-radius: 8px;\n  background: var(--butex-document-error-bg);\n  color: var(--butex-document-error);\n  margin: 12px 0 0;\n  padding: 8px 10px;\n}\n\n.butex-document-widget__dev {\n  border: 1px solid var(--butex-document-dev-border);\n  border-radius: 10px;\n  background: var(--butex-document-dev-bg);\n  box-shadow: var(--butex-document-shadow);\n  display: grid;\n  gap: 10px;\n  padding: 12px;\n}\n\n.butex-document-widget__dev pre {\n  border: 1px solid var(--butex-document-dev-border);\n  border-radius: 8px;\n  background: var(--butex-document-dev-code-bg);\n  color: var(--butex-document-dev-code-fg);\n  direction: ltr;\n  margin: 0;\n  max-height: 220px;\n  overflow: auto;\n  padding: 10px;\n  text-align: left;\n  white-space: pre-wrap;\n}\n\n.butex-document-widget__drawer {\n  background: var(--butex-document-drawer-bg);\n  border-inline-start: 1px solid var(--butex-document-border);\n  bottom: 0;\n  box-shadow: -8px 0 22px rgba(15, 23, 42, 0.12);\n  display: grid;\n  gap: 12px;\n  max-width: min(680px, 94vw);\n  overflow: auto;\n  padding: 14px;\n  position: fixed;\n  right: 0;\n  top: 0;\n  width: 640px;\n  z-index: 30;\n}\n\n@media (max-width: 900px) {\n  .butex-document-widget__layout {\n    grid-template-columns: 1fr;\n  }\n\n  .butex-document-widget__layout--preview-closed .butex-document-widget__preview-panel {\n    display: none;\n  }\n\n  .butex-document-widget__layout--editor-closed .butex-document-widget__editor-panel {\n    display: none;\n  }\n\n  .butex-document-widget__drawer {\n    border-inline-start: 0;\n    left: 0;\n    max-width: none;\n    width: 100%;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .butex-document-widget__layout,\n  .butex-document-widget__editor-panel,\n  .butex-document-widget__preview-panel {\n    transition: none;\n  }\n}\n";
 declare function injectBuTeXDocumentStyles(doc?: Document): void;
 
 export { ButexDocumentEditor, type ButexDocumentEditorProps, DOCUMENT_WIDGET_CSS, type DocumentInitialState, injectBuTeXDocumentStyles, resolveInitialDocument };

package/dist/react-document.js

@@ -5581,7 +5581,82 @@ function createEditorRuntime(options) {
   return api;
 }
 
+// src/document/normalizeCharImport.ts
+var WRAPPER_SPECS = [
+  { prefix: "\\butexdiwanioutline", font: "diwaniOutline" },
+  { prefix: "\\diwanioutlineshaded", font: "diwaniOutline" },
+  { prefix: "\\butexdiwani", font: "diwani" },
+  { prefix: "\\butextakween", font: "takween" },
+  { prefix: "\\diwani", font: "diwani" },
+  { prefix: "\\takween", font: "takween" },
+  { prefix: "\\text" }
+];
+function readBracedArg(source, openBraceIndex) {
+  if (source[openBraceIndex] !== "{") {
+    return null;
+  }
+  let depth = 0;
+  for (let index = openBraceIndex; index < source.length; index += 1) {
+    const char = source[index];
+    if (char === "{") {
+      depth += 1;
+    } else if (char === "}") {
+      depth -= 1;
+      if (depth === 0) {
+        return { inner: source.slice(openBraceIndex + 1, index), end: index + 1 };
+      }
+    }
+  }
+  return null;
+}
+function peelWrapper(source) {
+  for (const wrapper of WRAPPER_SPECS) {
+    if (!source.startsWith(wrapper.prefix)) {
+      continue;
+    }
+    const braced = readBracedArg(source, wrapper.prefix.length);
+    if (!braced || braced.end !== source.length) {
+      continue;
+    }
+    return { inner: braced.inner, font: wrapper.font };
+  }
+  return null;
+}
+function normalizeCharImportExpr(expr) {
+  const original = expr;
+  let current = expr;
+  let characterFont = "default";
+  let changed = false;
+  while (true) {
+    const peeled = peelWrapper(current);
+    if (!peeled) {
+      break;
+    }
+    current = peeled.inner;
+    if (peeled.font) {
+      characterFont = peeled.font;
+    }
+    changed = true;
+  }
+  if (!changed) {
+    return { expr: original, characterFont: "default" };
+  }
+  if (current.includes("\\")) {
+    return { expr: original, characterFont: "default" };
+  }
+  return { expr: current, characterFont };
+}
+
 // src/document/mathEditorAdapter.ts
+var COMMAND_FONT_MAP = {
+  "\\text": "infer",
+  "\\butextakween": "takween",
+  "\\takween": "takween",
+  "\\butexdiwani": "diwani",
+  "\\diwani": "diwani",
+  "\\butexdiwanioutline": "diwaniOutline",
+  "\\diwanioutlineshaded": "diwaniOutline"
+};
 function commandIdForTex(tex) {
   for (const spec of Object.values(ATOMIC_COMMANDS)) {
     const renderTex = spec.arabicRenderTex;
@@ -5693,6 +5768,42 @@ function envToEditorNode(node) {
   const scripts = attachScripts(node, env);
   return scripts ?? { editable: true, node: env };
 }
+function charFromTextLikeCommand(node) {
+  const commandFont = COMMAND_FONT_MAP[node.name];
+  if (commandFont === void 0) {
+    return null;
+  }
+  if (node.optionalArgs.length > 0 || node.mandatoryArgs.length !== 1) {
+    return null;
+  }
+  const arg = node.mandatoryArgs[0];
+  if (arg.chain.length !== 1) {
+    return null;
+  }
+  const child = arg.chain[0];
+  if (child instanceof CommandNode) {
+    const nested = charFromTextLikeCommand(child);
+    if (!nested?.editable) {
+      return null;
+    }
+    if (commandFont !== "infer") {
+      nested.node.characterFont = commandFont;
+    }
+    const scripts2 = attachScripts(node, nested.node);
+    return scripts2 ?? nested;
+  }
+  if (!(child instanceof CharNode)) {
+    return null;
+  }
+  const normalized = normalizeCharImportExpr(child.expr);
+  const characterFont = commandFont === "infer" ? normalized.characterFont : commandFont;
+  const editorNode = createEditorNode("char", normalized.expr);
+  if (characterFont !== "default") {
+    editorNode.characterFont = characterFont;
+  }
+  const scripts = attachScripts(node, editorNode);
+  return scripts ?? { editable: true, node: editorNode };
+}
 function commandToEditorNode(node) {
   if (node.name === "\\frac" && node.mandatoryArgs.length >= 2) {
     const frac = createFracNode();
@@ -5750,11 +5861,19 @@ function commandToEditorNode(node) {
     }
     return { editable: true, node: atomicOperator };
   }
+  const textLike = charFromTextLikeCommand(node);
+  if (textLike) {
+    return textLike;
+  }
   return { editable: false, reason: `\u0623\u0645\u0631 \u0631\u064A\u0627\u0636\u064A \u063A\u064A\u0631 \u0645\u062F\u0639\u0648\u0645 \u062D\u0627\u0644\u064A\u0627: ${node.name}` };
 }
 function astNodeToEditorNode(node) {
   if (node instanceof CharNode) {
-    const editorNode = createEditorNode("char", node.expr);
+    const normalized = normalizeCharImportExpr(node.expr);
+    const editorNode = createEditorNode("char", normalized.expr);
+    if (normalized.characterFont !== "default") {
+      editorNode.characterFont = normalized.characterFont;
+    }
     const scripts = attachScripts(node, editorNode);
     return scripts ?? { editable: true, node: editorNode };
   }
@@ -9302,6 +9421,24 @@ var DOCUMENT_WIDGET_CSS = `
   margin: 0 0 12px;
 }
 
+.butex-document-widget__preview h1 {
+  font-size: 1.75rem;
+  font-weight: 700;
+  line-height: 1.35;
+}
+
+.butex-document-widget__preview h2 {
+  font-size: 1.4rem;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.butex-document-widget__preview h3 {
+  font-size: 1.2rem;
+  font-weight: 600;
+  line-height: 1.45;
+}
+
 .butex-document-widget__preview ul,
 .butex-document-widget__preview ol {
   margin: 0 0 12px;