@barocss/math-editor 0.1.0

package/src/style.css

@@ -0,0 +1,781 @@
+.me-editor {
+  --me-accent: #236957;
+  --me-line: #d9e1dd;
+  color: #202c27;
+  font-family: system-ui, sans-serif;
+}
+.me-tools {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 12px;
+  border-bottom: 1px solid var(--me-line);
+}
+.me-tools button {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  padding: 7px 9px;
+  color: inherit;
+  cursor: pointer;
+  font: 12px system-ui;
+}
+.me-tools button span {
+  font: 20px Georgia, serif;
+}
+.me-tools button:hover {
+  background: #edf3ef;
+}
+.me-tools button:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+.me-tools button:focus-visible {
+  outline: 2px solid var(--me-accent);
+}
+.me-divider {
+  height: 20px;
+  border-left: 1px solid var(--me-line);
+  margin: 0 6px;
+}
+.me-surface {
+  min-height: 190px;
+  padding: 48px 32px;
+  display: flex;
+  align-items: center;
+  overflow-x: auto;
+  overflow-y: visible;
+}
+.me-row {
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  min-height: 1.5em;
+}
+.me-run {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+.me-input,
+.me-measure {
+  font: italic 22px Georgia, 'Times New Roman', serif;
+  line-height: 1.35;
+  min-width: 1ch;
+  border: 0;
+  border-radius: 3px;
+  padding: 2px 0;
+  background: transparent;
+  color: inherit;
+  text-align: center;
+  outline: none;
+}
+.me-input:focus {
+  background: #e7f2ed;
+  box-shadow: 0 2px 0 var(--me-accent);
+}
+.me-input::placeholder {
+  color: #aabbb1;
+}
+.me-structure {
+  display: inline-flex;
+  align-items: center;
+  margin: 0 3px;
+}
+.me-fraction {
+  flex-direction: column;
+}
+.me-fraction > .me-slot:first-child {
+  border-bottom: 1.5px solid currentColor;
+  width: 100%;
+  text-align: center;
+}
+.me-fraction > .me-slot {
+  padding: 1px 5px;
+}
+.me-root > .me-slot {
+  border-top: 1.5px solid currentColor;
+  margin-top: 4px;
+}
+.me-radical {
+  font: 33px Georgia, serif;
+}
+.me-superscript > .me-slot:last-child {
+  align-self: flex-start;
+  transform: translateY(-0.3em);
+}
+.me-subscript > .me-slot:last-child {
+  align-self: flex-end;
+  transform: translateY(0.3em);
+}
+.me-superscript > .me-slot:last-child .me-input,
+.me-subscript > .me-slot:last-child .me-input,
+.me-superscript > .me-slot:last-child .me-measure,
+.me-subscript > .me-slot:last-child .me-measure {
+  font-size: 16px;
+}
+.me-suggestions {
+  position: absolute;
+  z-index: 5;
+  top: 100%;
+  left: 0;
+  min-width: 180px;
+  padding: 5px;
+  border: 1px solid var(--me-line);
+  border-radius: 8px;
+  background: white;
+  box-shadow: 0 8px 24px #172c2420;
+  display: flex;
+  flex-direction: column;
+}
+.me-suggestions button {
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+  border: 0;
+  background: white;
+  padding: 9px;
+  text-align: left;
+  color: #202c27;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.me-suggestions button[aria-selected='true'] {
+  background: #e7f2ed;
+}
+.me-suggestions small {
+  color: #6a7b72;
+}
+
+/* The hidden twin uses browser font shaping, including CJK fallback fonts and IME drafts.
+   It owns layout; the overlaid input cannot impose its native 20-character width. */
+.me-measure {
+  visibility: hidden;
+  white-space: pre;
+  pointer-events: none;
+  padding-inline: 0.2ch;
+  box-sizing: border-box;
+}
+.me-input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+}
+.me-empty .me-measure {
+  min-width: 32px;
+  min-height: calc(1.35em + 4px);
+  padding-inline: 4px;
+}
+.me-empty-boundary .me-measure {
+  min-width: 24px;
+}
+.me-slot .me-empty .me-measure {
+  min-width: 12px;
+  padding-inline: 1px;
+}
+.me-empty-boundary .me-input {
+  border: 1px dashed var(--me-line);
+}
+.me-suggestion-panel {
+  position: fixed;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  width: min(336px, calc(100vw - 16px));
+  background: #fff;
+  color: #202c27;
+  border: 1px solid #d9e1dd;
+  border-radius: 10px;
+  box-shadow: 0 12px 32px #172c2426;
+  font: 13px/1.4 system-ui, sans-serif;
+  overflow: hidden;
+}
+.me-suggestion-heading,
+.me-suggestion-footer {
+  padding: 10px 12px;
+  font-size: 11px;
+  color: #708075;
+  flex-shrink: 0;
+}
+.me-suggestion-heading {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid #edf0eb;
+}
+.me-suggestion-footer {
+  border-top: 1px solid #edf0eb;
+}
+.me-suggestion-panel .me-suggestions {
+  position: static;
+  min-height: 0;
+  min-width: 0;
+  overflow-y: auto;
+  box-shadow: none;
+  border: 0;
+  border-radius: 0;
+  flex: 1;
+}
+.me-suggestion-panel .me-suggestions button {
+  justify-content: flex-start;
+  align-items: center;
+  gap: 12px;
+  flex-shrink: 0;
+  min-height: 54px;
+}
+.me-candidate-glyph {
+  font: 26px Georgia, serif;
+  min-width: 42px;
+  text-align: center;
+}
+.me-suggestions strong {
+  display: block;
+  font-size: 13px;
+  font-weight: 500;
+}
+.me-suggestions small {
+  display: block;
+  margin-top: 3px;
+  font-size: 11px;
+}
+.me-limits {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+}
+.me-limit .me-input,
+.me-limit .me-measure {
+  font-size: 14px;
+}
+.me-operator-glyph {
+  font: 35px/1 Georgia, serif;
+}
+.me-large-operator {
+  gap: 8px;
+}
+.me-delimiter {
+  font: 28px/1 Georgia, serif;
+}
+
+/* Slot roles are presentation metadata, not a claim that text is a variable or constant. */
+.me-row {
+  --me-ink: #2358a0;
+  --me-tint: #eff5ff;
+  --me-focus: #dbeaff;
+  --me-ring: #3676d3;
+}
+.me-row[data-math-role='numerator'],
+.me-row[data-math-role='base'] {
+  --me-ink: #2358a0;
+  --me-tint: #eff5ff;
+  --me-focus: #dbeaff;
+  --me-ring: #3676d3;
+}
+.me-row[data-math-role='denominator'],
+.me-row[data-math-role='radicand'] {
+  --me-ink: #086b60;
+  --me-tint: #eaf7f1;
+  --me-focus: #cef0e4;
+  --me-ring: #138777;
+}
+.me-row[data-math-role='exponent'],
+.me-row[data-math-role='upper'] {
+  --me-ink: #88430b;
+  --me-tint: #fff4e5;
+  --me-focus: #ffe2b4;
+  --me-ring: #bd6a18;
+}
+.me-row[data-math-role='index'],
+.me-row[data-math-role='lower'] {
+  --me-ink: #7c3d90;
+  --me-tint: #f8eefb;
+  --me-focus: #edd7f6;
+  --me-ring: #9d50b1;
+}
+.me-row[data-math-role='group'] {
+  --me-ink: #4e53a4;
+  --me-tint: #f1f0ff;
+  --me-focus: #e1dfff;
+  --me-ring: #726ad0;
+}
+.me-input {
+  color: var(--me-ink);
+  background: var(--me-tint);
+  border-radius: 4px;
+  caret-color: var(--me-ink);
+}
+.me-input:hover:not(:focus) {
+  background: var(--me-focus);
+  box-shadow: none;
+}
+.me-input:focus {
+  background: var(--me-focus);
+  outline: 2px solid var(--me-ring);
+  outline-offset: 1px;
+  box-shadow: 0 0 0 5px var(--me-tint);
+}
+.me-input::selection {
+  color: white;
+  background: var(--me-ring);
+}
+.me-input::placeholder {
+  color: var(--me-ink);
+  opacity: 0.45;
+}
+.me-empty-boundary .me-input:not(:focus) {
+  background: transparent;
+  box-shadow: none;
+}
+.me-empty-boundary .me-input:hover:not(:focus) {
+  background: var(--me-focus);
+}
+.me-empty-boundary .me-input:focus {
+  border-color: transparent;
+}
+@media (forced-colors: active) {
+  .me-input:focus {
+    outline: 2px solid Highlight;
+  }
+}
+.me-matrix {
+  display: inline-flex;
+  align-items: stretch;
+  gap: 4px;
+  margin: 4px 6px;
+  position: relative;
+}
+.me-matrix-grid {
+  display: grid;
+  align-items: center;
+  justify-items: center;
+  gap: 12px 18px;
+  padding: 9px 7px;
+}
+.me-matrix-cell {
+  min-width: 1.4ch;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.me-matrix-delimiter {
+  width: 7px;
+  border-color: currentColor;
+  border-style: solid;
+  border-width: 1.5px 0;
+  align-self: stretch;
+}
+.me-matrix-left {
+  border-left-width: 1.5px;
+}
+.me-matrix-right {
+  border-right-width: 1.5px;
+}
+.me-matrix[data-environment='matrix'] > .me-matrix-delimiter {
+  display: none;
+}
+.me-matrix[data-environment='pmatrix'] > .me-matrix-left {
+  border-radius: 100% 0 0 100%;
+}
+.me-matrix[data-environment='pmatrix'] > .me-matrix-right {
+  border-radius: 0 100% 100% 0;
+}
+.me-matrix[data-environment='vmatrix'] > .me-matrix-delimiter,
+.me-matrix[data-environment='Vmatrix'] > .me-matrix-delimiter {
+  border-top: 0;
+  border-bottom: 0;
+  width: 3px;
+}
+.me-matrix[data-environment='Vmatrix'] > .me-matrix-left {
+  border-left: 4px double;
+}
+.me-matrix[data-environment='Vmatrix'] > .me-matrix-right {
+  border-right: 4px double;
+}
+.me-matrix[data-environment='Bmatrix'] > .me-matrix-delimiter {
+  border: 0;
+  width: 9px;
+  position: relative;
+}
+.me-matrix[data-environment='Bmatrix'] > .me-matrix-delimiter:before,
+.me-matrix[data-environment='Bmatrix'] > .me-matrix-delimiter:after {
+  content: '';
+  position: absolute;
+  width: 8px;
+  height: 50%;
+  border-left: 1.5px solid;
+  left: 1px;
+}
+.me-matrix[data-environment='Bmatrix'] > .me-matrix-delimiter:before {
+  top: 0;
+  border-radius: 8px 0 8px 0;
+}
+.me-matrix[data-environment='Bmatrix'] > .me-matrix-delimiter:after {
+  bottom: 0;
+  border-radius: 0 8px 0 8px;
+}
+.me-matrix[data-environment='Bmatrix'] > .me-matrix-right {
+  transform: scaleX(-1);
+}
+.me-matrix-tools {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 10px 14px;
+  border-bottom: 1px solid #dce2e8;
+  background: #f4f4fb;
+  font: 12px system-ui;
+  color: #4e53a4;
+}
+.me-matrix-tools button,
+.me-matrix-tools select {
+  font: inherit;
+  color: inherit;
+  background: white;
+  border: 1px solid #d6d5e6;
+  border-radius: 5px;
+  padding: 6px 8px;
+}
+.me-matrix-tools button:disabled {
+  opacity: 0.35;
+}
+.me-matrix-tools small {
+  font-size: 11px;
+  color: #77758b;
+}
+
+.me-matrix-size {
+  font: inherit;
+  font-size: 12px;
+  color: inherit;
+  background: transparent;
+  border: 1px solid #dcdfe2;
+  border-radius: 5px;
+  padding: 6px;
+  max-width: 100%;
+}
+
+.me-document-lines {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 18px;
+  min-width: 0;
+}
+.me-document-line {
+  display: flex;
+  align-items: center;
+  min-height: 44px;
+}
+.me-matrix[data-structure='aligned'] > .me-matrix-grid {
+  column-gap: 8px;
+}
+.me-matrix[data-structure='aligned'] > .me-matrix-grid > .me-matrix-cell:nth-child(odd) {
+  justify-self: end;
+}
+.me-matrix[data-structure='aligned'] > .me-matrix-grid > .me-matrix-cell:nth-child(even),
+.me-matrix[data-structure='cases'] > .me-matrix-grid > .me-matrix-cell {
+  justify-self: start;
+}
+.me-matrix[data-structure='cases'] > .me-matrix-right {
+  display: none;
+}
+
+.me-suggestions button:disabled {
+  cursor: default;
+  opacity: 0.65;
+}
+.me-run[data-token-kind='variable'] .me-input {
+  color: #245da1;
+}
+.me-run[data-token-kind='constant'] .me-input {
+  color: #a65316;
+  font-style: normal;
+}
+.me-run[data-token-kind='symbol'] .me-input {
+  color: #7853a6;
+  font-style: normal;
+}
+.me-run[data-token-kind='constant'] .me-measure,
+.me-run[data-token-kind='symbol'] .me-measure {
+  font-style: normal;
+}
+.me-run[data-token-kind='space'] .me-input:not(:hover):not(:focus) {
+  background: transparent;
+}
+.me-run + .me-run {
+  margin-left: 1px;
+}
+.me-run[data-token-kind='space'] .me-measure {
+  min-width: 0;
+  padding-inline: 0;
+}
+.me-run[data-token-kind='space'],
+.me-run[data-token-kind='space'] + .me-run {
+  margin-left: 0;
+}
+.me-token-legend {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 14px;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--me-line);
+  font: 11px system-ui;
+  color: #78857e;
+}
+.me-token-legend [data-kind='variable'] {
+  color: #245da1;
+}
+.me-token-legend [data-kind='constant'] {
+  color: #a65316;
+}
+.me-token-legend [data-kind='symbol'] {
+  color: #7853a6;
+}
+
+.me-matrix[data-selected='true'] {
+  outline: 2px solid #245da1;
+  outline-offset: 3px;
+  background: #245da112;
+  border-radius: 3px;
+}
+.me-grid-selection-hint {
+  padding: 8px 16px;
+  font: 12px system-ui;
+  color: #245da1;
+  background: #eef5ff;
+}
+.me-preview-token {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  white-space: pre;
+  font: italic 22px/1.35 Georgia, 'Times New Roman', serif;
+  color: var(--me-ink);
+  border-radius: 4px;
+  cursor: text;
+  user-select: none;
+}
+.me-preview-token:hover {
+  background: var(--me-focus);
+}
+.me-run[data-token-kind='variable'] .me-preview-token {
+  color: #245da1;
+}
+.me-run[data-token-kind='constant'] .me-preview-token {
+  color: #a65316;
+  font-style: normal;
+}
+.me-run[data-token-kind='symbol'] .me-preview-token {
+  color: #7853a6;
+  font-style: normal;
+}
+.me-superscript > .me-slot:last-child .me-preview-token,
+.me-subscript > .me-slot:last-child .me-preview-token {
+  font-size: 16px;
+}
+.me-limit .me-preview-token {
+  font-size: 14px;
+}
+.me-range-highlight,
+.me-empty[data-range-selected='true'] {
+  background: #b9d8ff;
+  color: inherit;
+  border-radius: 2px;
+}
+.me-surface:focus {
+  outline: none;
+}
+.me-surface:focus-visible {
+  outline: 2px solid #3676d3;
+  outline-offset: -2px;
+}
+.me-wrap-tools {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  padding: 8px 16px;
+  background: #eef5ff;
+  color: #245da1;
+  font: 12px system-ui;
+  border-bottom: 1px solid var(--me-line);
+}
+.me-wrap-tools button {
+  font: inherit;
+  color: inherit;
+  border: 1px solid #b9cee7;
+  background: white;
+  border-radius: 5px;
+  padding: 6px 10px;
+  cursor: pointer;
+}
+.me-wrap-tools button:hover {
+  background: #dbeaff;
+}
+.me-wrap-tools button:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+.me-line-number {
+  flex: 0 0 2.5ch;
+  margin-right: 16px;
+  text-align: right;
+  align-self: center;
+  color: #8a9790;
+  font: 11px/1.5 system-ui;
+  font-variant-numeric: tabular-nums;
+  user-select: none;
+  cursor: default;
+}
+.me-symbol-browser {
+  padding: 16px;
+  border-bottom: 1px solid var(--me-line);
+  background: #f6f8f6;
+  font: 12px/1.5 system-ui;
+}
+.me-symbol-browser-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.me-symbol-browser-heading small {
+  font-weight: 400;
+  color: #6a7b72;
+  margin-left: 8px;
+}
+.me-symbol-browser-heading button {
+  font: inherit;
+  background: white;
+  color: inherit;
+  border: 1px solid var(--me-line);
+  border-radius: 5px;
+  padding: 5px 10px;
+  cursor: pointer;
+}
+.me-symbol-search {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  margin-top: 12px;
+}
+.me-symbol-search input {
+  font: inherit;
+  border: 1px solid var(--me-line);
+  border-radius: 5px;
+  padding: 9px 10px;
+  min-width: 0;
+  background: white;
+  color: inherit;
+}
+.me-symbol-help {
+  color: #627469;
+  margin: 8px 0 12px;
+}
+.me-symbol-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
+  gap: 6px;
+  max-height: 350px;
+  overflow: auto;
+  padding: 3px;
+}
+.me-symbol-grid button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  min-height: 74px;
+  padding: 8px 5px;
+  border: 1px solid var(--me-line);
+  border-radius: 6px;
+  background: white;
+  color: inherit;
+  font: 11px/1.3 system-ui;
+  cursor: pointer;
+  overflow-wrap: anywhere;
+}
+.me-symbol-grid button:hover {
+  background: #e7f2ed;
+  border-color: #9cbbac;
+}
+.me-symbol-glyph {
+  font: 25px/1.2 Georgia, 'Times New Roman', serif;
+}
+.me-symbol-browser button:focus-visible,
+.me-symbol-search input:focus-visible {
+  outline: 2px solid var(--me-accent);
+  outline-offset: 2px;
+}
+
+/* Framework-neutral surface. Math direction remains LTR inside localized UI. */
+.me-dom-editor {
+  display: block;
+}
+.me-dom-editor .me-surface {
+  display: block;
+}
+.me-dom-editor .me-document-line {
+  display: flex;
+  align-items: center;
+}
+.me-dom-editor .me-dom-variable {
+  color: var(--me-variable, #2563a6);
+}
+.me-dom-editor .me-dom-constant {
+  color: var(--me-number, #b45309);
+}
+.me-dom-editor .me-dom-symbol {
+  color: var(--me-symbol, #7650b2);
+}
+.me-dom-editor .me-dom-selected {
+  background: #dbeafe;
+  border-radius: 3px;
+}
+.me-dom-status {
+  display: block;
+  font: 12px/1.5 sans-serif;
+}
+.me-dom-status:empty {
+  display: none;
+}
+.me-dom-menu {
+  position: fixed;
+  z-index: 1000;
+  max-height: 230px;
+  overflow-y: auto;
+  width: 290px;
+}
+.me-dom-menu[hidden] {
+  display: none;
+}
+.me-dom-menu .me-suggestions {
+  position: static;
+}
+.me-dom-editor[data-mode='inline'] {
+  display: inline-block;
+  vertical-align: middle;
+  border: 0;
+}
+.me-dom-editor[data-mode='inline'] .me-surface {
+  display: inline-block;
+  padding: 2px 4px;
+  min-height: 0;
+}
+.me-dom-editor[data-mode='inline'] .me-document-lines {
+  display: inline-flex;
+}
+.me-dom-editor[data-mode='inline'] .me-document-line {
+  min-height: 0;
+}