@moda-editor/core 0.1.1 → 0.1.3

package/dist/styles.css

@@ -12,6 +12,8 @@
   --me-gutter-bg: rgba(15, 23, 42, 0.035);
   --me-gutter-color: #94a3b8;
   --me-line-active-num: #3b82f6;
+  /* atom 노드 셀렉션 링 + 이미지 핸들 — 거터와 같은 이유로 루트에 둔다 */
+  --me-node-sel-color: #3b82f6;
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -53,7 +55,6 @@
  * 크롬을 담당한다 ─────────────────────────────────────────── */
 .me-frame {
   --me-frame-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
-  --me-focus-ring: rgba(59, 130, 246, 0.18);
   --me-border-color: #e2e8f0;
   --me-text-color: #1e293b;
   --me-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
@@ -67,9 +68,10 @@
   overflow: hidden;
 }
 
+/* 포커스 표시는 테두리 색만 — 글로우 링은 입력 중 카드 전체를
+ * 파란 띠로 둘러 산만했다 */
 .me-frame:focus-within {
   border-color: var(--me-editor-focus, #3b82f6);
-  box-shadow: 0 0 0 3px var(--me-focus-ring);
 }
 
 /* ── 에디터 — Ace 계열 코드 에디터 서페이스: 모노스페이스 본문 +
@@ -82,7 +84,6 @@
   --me-code-bg: #f1f5f9;
   --me-code-border: #e2e8f0;
   --me-gutter-border: var(--me-border-color);
-  --me-line-active-bg: rgba(59, 130, 246, 0.07);
   --me-sel-bg: rgba(59, 130, 246, 0.22);
   --me-print-margin: rgba(148, 163, 184, 0.4);
 
@@ -182,11 +183,11 @@
 }
 
 /* 활성 라인 — aceFeature의 paintOverlay가 캐럿의 최상위 블록에
- * me-line-active를 단다 (Ace highlightActiveLine 관례).
- * 코드블록은 .me-cl.is-active가 이미 줄 단위로 칠하니 배경은 뺀다 */
-.me-editor > *.me-line-active:not(pre) {
-  background-color: var(--me-line-active-bg);
-}
+ * me-line-active를 단다. 배경 띠는 칠하지 않는다(문서 편집에서
+ * 파란 띠가 산만하다는 피드백) — 활성 표시는 거터 번호 강조
+ * (.me-gnum.is-active)로만 한다. 코드블록은 코드 에디터 관례대로
+ * .me-cl.is-active가 줄 단위 배경을 칠한다. 클래스는 계속 달리므로
+ * 원하면 제품 CSS에서 배경을 되살릴 수 있다 */
 
 /* 선택 영역 — Ace 선택색 관례 (코드블록 안도 같은 변수) */
 .me-editor ::selection {
@@ -243,10 +244,12 @@
   font-size: 0.88em;
 }
 
-/* 리스트 — li 안 문단은 자체 여백이 없다 (li가 줄 간격을 담당) */
+/* 리스트 — li 안 문단은 자체 여백이 없다 (li가 줄 간격을 담당).
+ * 패딩이 마커 열이다: outside 마커(•, 1.)가 텍스트 왼쪽에 붙어
+ * 그려지므로, 마커가 거터 구분선에 닿지 않을 만큼의 들여쓰기가 필요 */
 .me-editor ul,
 .me-editor ol {
-  padding-left: 1.4em;
+  padding-left: 2.1em;
 }
 .me-editor li > p {
   margin: 0;
@@ -256,14 +259,15 @@
   margin: 2px 0;
 }
 
-/* 할일 목록 — 마커는 ::before, 클릭 영역은 li의 왼쪽 패딩(~28px) */
+/* 할일 목록 — 마커는 ::before, 클릭 영역은 li의 왼쪽 패딩(~24px).
+ * ul 패딩과 li 패딩을 더해 텍스트 시작점이 다른 리스트와 맞는다 */
 .me-editor ul.me-tasks {
-  padding-left: 4px;
+  padding-left: 8px;
 }
 .me-editor li.me-task {
   list-style: none;
   position: relative;
-  padding-left: 28px;
+  padding-left: 24px;
 }
 .me-editor li.me-task::before {
   --me-checkbox-border: #94a3b8;
@@ -322,6 +326,280 @@
   max-width: 100%;
   border-radius: 6px;
   margin: 0 0 8px;
+  cursor: default;
+}
+
+/* atom 노드 셀렉션 — 클릭으로 선택된 img/hr 등에 파란 링을 둔다
+ * (input.ts의 paintOverlays가 is-selected를 마킹한다) */
+.me-editor [data-me-path].is-selected {
+  outline: 2px solid var(--me-node-sel-color);
+  outline-offset: 2px;
+}
+.me-editor hr.is-selected {
+  /* hr은 테두리가 굵어 outline이 묻힌다 — 위아래 여백으로 링을 띄운다 */
+  outline-offset: 4px;
+}
+
+/* ── 이미지 선택 오버레이 — 선택된 img 위에 얹히는 편집/리사이즈 UI.
+ * .me-editor의 형제(.me-root의 absolute 자식)로 둬 DOM↔Point 매핑을
+ * 깨지 않는다. 래퍼는 pointer-events:none — 이미지 자체 클릭은 그대로
+ * 통과하고 핸들/바만 이벤트를 받는다 */
+.me-imgui {
+  position: absolute;
+  z-index: 40;
+  pointer-events: none;
+}
+.me-imgui[hidden] {
+  display: none;
+}
+/* 우하단 크기 핸들 — nwse-resize (GDocs/Word 관례) */
+.me-imgui .me-img-handle {
+  position: absolute;
+  right: -6px;
+  bottom: -6px;
+  width: 12px;
+  height: 12px;
+  border-radius: 4px;
+  background: var(--me-toolbar-bg, #fff);
+  border: 2px solid var(--me-node-sel-color);
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3);
+  cursor: nwse-resize;
+  pointer-events: auto;
+  touch-action: none;
+}
+/* 액션 바 — 이미지 위쪽. 루트 상단에 붙으면 is-below로 아래로 뒤집는다 */
+.me-imgui .me-img-bar {
+  position: absolute;
+  left: 0;
+  top: -6px;
+  transform: translateY(-100%);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 3px;
+  padding: 4px;
+  max-width: min(320px, 90vw);
+  background: var(--me-toolbar-bg, #fff);
+  border: 1px solid var(--me-border-color);
+  border-radius: 6px;
+  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
+  pointer-events: auto;
+}
+.me-imgui.is-below .me-img-bar {
+  top: auto;
+  bottom: -6px;
+  transform: translateY(100%);
+}
+.me-imgui .me-imgbtn {
+  padding: 3px 8px;
+  font: inherit;
+  font-size: 12px;
+  color: inherit;
+  background: var(--me-btn-bg, transparent);
+  border: 1px solid var(--me-border-color);
+  border-radius: 4px;
+  cursor: pointer;
+}
+.me-imgui .me-imgbtn:hover {
+  background: var(--me-tool-hover-bg, #e2e8f0);
+}
+.me-imgui .me-imgbtn[data-img-act="del"]:hover {
+  color: #dc2626;
+  border-color: #dc2626;
+}
+/* 편집 폼 — 액션 바 안의 두 번째 행 (wrap으로 전체 폭을 차지) */
+.me-imgui .me-imgedit {
+  flex-basis: 100%;
+  display: flex;
+  gap: 4px;
+}
+.me-imgui .me-imgedit[hidden] {
+  display: none;
+}
+.me-imgui .me-imged-src,
+.me-imgui .me-imged-alt {
+  width: min(150px, 30vw);
+  padding: 4px 6px;
+  font: inherit;
+  font-size: 12px;
+  color: inherit;
+  background: transparent;
+  border: 1px solid var(--me-border-color);
+  border-radius: 4px;
+  outline: none;
+}
+.me-imgui .me-imged-src:focus,
+.me-imgui .me-imged-alt:focus {
+  border-color: var(--me-accent, #2563eb);
+}
+
+/* ── 표 편집 오버레이 — 캐럿이 셀 안에 있을 때 표 위에 얹히는 UI.
+ * .me-imgui와 같은 패턴: 래퍼 pointer-events:none, 바/핸들만 받는다 */
+.me-tableui {
+  position: absolute;
+  z-index: 40;
+  pointer-events: none;
+}
+.me-tableui[hidden] {
+  display: none;
+}
+/* 액션 바 — 표 위쪽 중앙. 루트 상단에 붙으면 is-below로 안쪽에 띄운다 */
+.me-tableui .me-tbl-bar {
+  position: absolute;
+  left: 50%;
+  top: -6px;
+  transform: translate(-50%, -100%);
+  display: flex;
+  gap: 3px;
+  padding: 4px;
+  background: var(--me-toolbar-bg, #fff);
+  border: 1px solid var(--me-border-color);
+  border-radius: 6px;
+  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
+  white-space: nowrap;
+  pointer-events: auto;
+}
+.me-tableui.is-below .me-tbl-bar {
+  top: 4px;
+  transform: translate(-50%, 0);
+}
+.me-tableui .me-tblbtn {
+  padding: 3px 8px;
+  font: inherit;
+  font-size: 12px;
+  color: inherit;
+  background: var(--me-btn-bg, transparent);
+  border: 1px solid var(--me-border-color);
+  border-radius: 4px;
+  cursor: pointer;
+}
+.me-tableui .me-tblbtn:hover {
+  background: var(--me-tool-hover-bg, #e2e8f0);
+}
+.me-tableui .me-tblbtn[data-tbl-act="tabledel"]:hover,
+.me-tableui .me-tblbtn[data-tbl-act="rowdel"]:hover,
+.me-tableui .me-tblbtn[data-tbl-act="coldel"]:hover {
+  color: #dc2626;
+  border-color: #dc2626;
+}
+/* 열 경계 핸들 — 각 열 우측 경계의 8px 스트립. 평소엔 투명하고
+ * hover/드래그 시 리사이즈 커서 + 강조선 (GDocs 열 리사이즈 관례) */
+.me-tableui .me-tbl-cols {
+  position: absolute;
+  inset: 0;
+}
+.me-tableui .me-col-handle {
+  position: absolute;
+  top: 0;
+  width: 8px;
+  cursor: col-resize;
+  pointer-events: auto;
+  touch-action: none;
+}
+.me-tableui .me-col-handle::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 3px;
+  width: 2px;
+  background: transparent;
+  transition: background 0.1s;
+}
+.me-tableui .me-col-handle:hover::after,
+.me-tableui .me-col-handle:active::after {
+  background: var(--me-node-sel-color, #2563eb);
+}
+
+/* 코드블록 크롬 바 — 캐럿이 들어간 pre의 우측 상단(언어 라벨 자리).
+ * Notion 코드블록 언어 피커 관례. 래퍼는 좌표만 잡고 자식이 이벤트를 받는다 */
+.me-codeui {
+  position: absolute;
+  z-index: 40;
+  transform: translateX(-100%);
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  padding: 2px 4px;
+  background: var(--me-toolbar-bg, #fff);
+  border: 1px solid var(--me-border-color);
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
+  white-space: nowrap;
+}
+.me-codeui[hidden] {
+  display: none;
+}
+.me-codeui .me-codelang,
+.me-codehead .me-codelang {
+  font: inherit;
+  font-size: 11px;
+  max-width: 7.5em;
+  padding: 1px 2px;
+  color: var(--me-text-muted, #64748b);
+  background: transparent;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+}
+.me-codeui .me-codelang:hover,
+.me-codehead .me-codelang:hover {
+  background: var(--me-tool-hover-bg, #e2e8f0);
+}
+.me-codeui .me-codebtn,
+.me-codehead .me-codebtn {
+  padding: 1px 7px;
+  font: inherit;
+  font-size: 11px;
+  color: var(--me-text-muted, #64748b);
+  background: transparent;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+}
+.me-codeui .me-codebtn:hover,
+.me-codehead .me-codebtn:hover {
+  color: inherit;
+  background: var(--me-tool-hover-bg, #e2e8f0);
+}
+/* 캐럿이 들어간 코드블록은 첫 줄 우측에 바 자리를 넓힌다 —
+ * 바가 코드 텍스트를 가리지 않도록 (기본 언어 라벨 패딩 5em을 덮는다) */
+.me-editor pre.me-line-active .me-cl:first-child {
+  padding-right: 13.5em;
+}
+
+/* 코드블록 노드 뷰 — 언어/정리/복사 크롬 헤더(.me-codehead) + pre
+ * 아울렛을 한 장의 카드로 묶는다 (Notion/VS Code 코드 카드 관례).
+ * 헤더는 .me-node-view의 ce=false 영역이라 캐럿 매핑에 무영향 */
+.me-codeview {
+  background: var(--me-code-bg);
+  border: 1px solid var(--me-code-border);
+  border-radius: 6px;
+}
+.me-codehead {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 3px;
+  padding: 2px 6px;
+  border-bottom: 1px solid var(--me-code-border);
+  border-radius: 6px 6px 0 0;
+  user-select: none;
+}
+/* Notion 관례 — 언어 표시는 좌측, 액션 버튼은 우측 */
+.me-codehead .me-codelang {
+  margin-right: auto;
+}
+/* 카드 안 pre — 카드가 배경/테두리를 담당하므로 pre 자체 크롬은 뗀다 */
+.me-codeview > .me-node-content {
+  margin: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+}
+/* 노드 뷰 코드블록은 헤더가 언어·액션을 담당 — 오버레이 라벨/바용
+ * 첫 줄 우측 패딩(5em/13.5em 규칙보다 뒤에 선언해 덮는다)을 되돌린다 */
+.me-editor .me-codeview .me-cl:first-child {
+  padding-right: 0;
 }
 
 /* 형광펜 — 브라우저 기본 mark 색을 attr 색이 덮는다 */
@@ -509,21 +787,25 @@
   font-size: 12px;
 }
 
-/* 팝오버 — 링크/이미지 입력 패널 (버블 메뉴와 같은 크롬) */
+/* 팝오버 — 링크/이미지 입력 패널 + 표 크기 피커 (버블 메뉴와 같은
+ * 크롬). 트리거 버튼 아래에 앵커로 뜨고, 좁은 뷰포트에서는 접혀서
+ * 넘치지 않는다 (flex-wrap + max-width) */
 .me-pop {
   position: fixed;
   z-index: 60;
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 4px;
   padding: 6px;
+  max-width: calc(100vw - 16px);
   background: var(--me-toolbar-bg, #fff);
   border: 1px solid var(--me-border-color);
   border-radius: 8px;
   box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
 }
 .me-pop-input {
-  width: 220px;
+  width: min(220px, 46vw);
   padding: 5px 8px;
   font-size: 12px;
   color: inherit;
@@ -557,6 +839,38 @@
   align-items: center;
 }
 
+/* 표 크기 피커 — GDocs 표 삽입 그리드 관례. 열 수는 data.ts의
+ * TGRID_COLS(10)와 짝 — 바꾸면 둘 다 갱신한다 */
+.me-tgrid {
+  display: grid;
+  grid-template-columns: repeat(10, 18px);
+  gap: 2px;
+}
+.me-tcell {
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: 1px solid var(--me-border-color);
+  border-radius: 3px;
+  background: transparent;
+  cursor: pointer;
+}
+.me-tcell.is-on {
+  background: var(--me-tool-active-bg, #dbeafe);
+  border-color: var(--me-accent, #2563eb);
+}
+.me-tcell:focus-visible {
+  outline: 2px solid var(--me-editor-focus, #3b82f6);
+  outline-offset: -2px;
+}
+.me-tgrid-label {
+  padding: 0 4px;
+  font-size: 11px;
+  color: var(--me-text-color);
+  opacity: 0.7;
+  white-space: nowrap;
+}
+
 /* 링크 카드 — 캐럿이 링크 위에 있을 때 뜨는 액션 칩 (GDocs 관례):
  * URL 표시 + 복사/수정/제거. 수정은 링크 팝오버로 이어진다 */
 .me-linkcard {
@@ -640,9 +954,19 @@
 
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
+  /* 한 줄 원칙 — 넘치는 항목은 두 줄로 내리지 않고 ⋯ 메뉴로 보낸다
+   * (data-rsp 티어, 아래 미디어 쿼리).
+   * overflow:hidden을 쓰지 않는다 — absolute인 ⋯/A▾의 .me-menu가
+   * 툴바 아래로 열릴 때 같이 잘린다. ⋯는 absolute로 우측에 고정하고
+   * padding-right로 그 자리를 비워 넘치는 항목이 그 밑으로 스치게 한다 */
+  flex-wrap: nowrap;
+  /* relative+z-index: 툴바 전체를 에디터(.me-editor relative) 위에
+   * 올려 ⋯/A▾ 드롭다운이 본문에 가려지지 않게 한다. 팝오버/버블
+   * (fixed, z 50~60)보다는 아래라 겹쳐도 그쪽이 위에 뜬다 */
+  position: relative;
+  z-index: 20;
   gap: 2px;
-  padding: 6px 8px;
+  padding: 6px 44px 6px 8px;
   background: var(--me-toolbar-bg);
   border-bottom: 1px solid var(--me-border-color);
   /* IDE 크롬 — 툴 라벨도 코드 에디터 폰트로 */
@@ -669,9 +993,25 @@
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   transition: background-color 0.12s ease, color 0.12s ease;
 }
 
+/* 툴바 아이콘 — 24px viewBox stroke 아이콘을 currentColor로.
+ * fragment는 경로만 들고 있으므로 스트로크는 여기서 공급한다 */
+.me-ic {
+  display: block;
+  width: 16px;
+  height: 16px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
 .me-tool:hover:not(:disabled) {
   background: var(--me-tool-hover-bg);
 }
@@ -679,6 +1019,7 @@
 /* 키보드 포커스 표시 — VSCode 크롬 관례 (마우스 클릭엔 링 없음) */
 .me-tool:focus-visible,
 .me-overflow > summary:focus-visible,
+.me-styles > summary:focus-visible,
 .me-size:focus-visible,
 .me-blockfmt:focus-visible {
   outline: 2px solid var(--me-editor-focus, #3b82f6);
@@ -708,20 +1049,38 @@
   min-width: 74px;
 }
 
-/* 오버플로 패널 — 덜 쓰는 커맨드는 ⋯ 아래에 모은다 (GDocs ⋮
- * overflow 관례). details/summary라 프레임워크 상태 없이 토글되고,
- * 패널 크롬은 버블 메뉴와 같다 */
-.me-overflow {
+/* 오버플로/스타일 드롭다운 — 덜 쓰는 커맨드는 ⋯ 아래, 인라인 글자
+ * 서식은 A▾ 아래에 모은다 (GDocs ⋮ overflow·Format 메뉴 관례).
+ * details/summary라 프레임워크 상태 없이 토글되고, 패널 크롬은
+ * 버블 메뉴와 같다 */
+.me-overflow,
+.me-styles {
   position: relative;
   display: inline-flex;
 }
-.me-overflow > summary {
+/* ⋯는 항상 우측 끝에 살아있어야 한다 — absolute로 핀 고정해 항목이
+ * 넘쳐도 오버플로 진입점이 사라지지 않는다. 넘친 항목이 밑으로
+ * 스치므로 불투명 배경으로 덮는다. absolute라 이 details 자체가
+ * .me-menu의 containing block이다 */
+.me-toolbar > .me-overflow {
+  position: absolute;
+  /* translateY 중앙정렬 대신 패딩과 같은 top — transform은 스태킹
+   * 컨텍스트를 만들어 자식 .me-menu의 z-index를 가둔다 */
+  right: 8px;
+  top: 6px;
+  flex-shrink: 0;
+  background: var(--me-toolbar-bg);
+  border-radius: 6px;
+}
+.me-overflow > summary,
+.me-styles > summary {
   list-style: none;
   cursor: pointer;
   user-select: none;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  gap: 2px;
   min-width: 30px;
   height: 30px;
   padding: 0 7px;
@@ -730,20 +1089,34 @@
   font-weight: 600;
   color: var(--me-text-color);
 }
-.me-overflow > summary::-webkit-details-marker {
+.me-overflow > summary::-webkit-details-marker,
+.me-styles > summary::-webkit-details-marker {
   display: none;
 }
-.me-overflow > summary:hover {
+.me-overflow > summary:hover,
+.me-styles > summary:hover {
   background: var(--me-tool-hover-bg);
 }
-.me-overflow[open] > summary {
+.me-overflow[open] > summary,
+.me-styles[open] > summary {
   background: var(--me-tool-active-bg);
   color: var(--me-tool-active-color);
 }
+/* A▾ 드롭다운 표시 — 스타일 패널 버튼 뒤의 캐럿 */
+.me-styles > summary::after {
+  content: "";
+  width: 0;
+  height: 0;
+  border-left: 3px solid transparent;
+  border-right: 3px solid transparent;
+  border-top: 4px solid currentColor;
+  opacity: 0.6;
+}
 .me-menu {
   position: absolute;
   top: calc(100% + 6px);
   right: 0;
+  left: auto;
   z-index: 60;
   display: flex;
   align-items: center;
@@ -755,8 +1128,41 @@
   box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
   white-space: nowrap;
 }
+/* A▾ 패널은 툴바 중간에서 열리므로 버튼 왼쪽 아래에 붙인다 */
+.me-styles .me-menu {
+  right: auto;
+  left: 0;
+}
 
-/* 툴바 인라인 스타일 컨트롤 — 컬러 피커/크기 셀렉트 */
+/* ── 반응형 툴바 — 한 줄 원칙 + ⋯ 오버플로 축소 ────────────────
+ * data-rsp 티어: 1 = ≤900px(삽입/정렬 그룹), 2 = ≤620px(목록·보조
+ * 서식 + A▾ 패널). 본줄의 티어 요소는 숨기고, ⋯ 메뉴 안의 같은
+ * 항목(data-rsp가 달린 복사본)만 연다 — 항목은 양쪽에 렌더되고
+ * 표시 여부만 CSS가 가른다. 브레이크포인트는 TOOL_ITEMS의 rsp
+ * 값과 짝이다 (뷰포트 기준 — 데모 .page가 툴바 폭을 지배한다) */
+.me-menu [data-rsp] {
+  display: none;
+}
+@media (max-width: 900px) {
+  .me-toolbar > [data-rsp="1"],
+  .me-toolbar > .me-styles[data-rsp="1"] {
+    display: none;
+  }
+  .me-menu [data-rsp="1"] {
+    display: inline-flex;
+  }
+}
+@media (max-width: 620px) {
+  .me-toolbar > [data-rsp="2"],
+  .me-toolbar > .me-styles[data-rsp="2"] {
+    display: none;
+  }
+  .me-menu [data-rsp="2"] {
+    display: inline-flex;
+  }
+}
+
+/* 툴바 인라인 스타일 컨트롤 — A▾ 패널 안의 컬러 피커/크기 셀렉트 */
 .me-style {
   display: inline-flex;
   align-items: center;
@@ -843,10 +1249,10 @@
   --me-gutter-bg: rgba(0, 0, 0, 0.22);
   --me-gutter-color: #8f908a;
   --me-line-active-num: #c2c2bf;
+  --me-node-sel-color: #66d9ef;
 }
 
 .me-frame[data-me-theme="dark"] {
-  --me-focus-ring: rgba(102, 217, 239, 0.25);
   background: #1e1f1c;
 }
 
@@ -856,7 +1262,6 @@
   --me-code-bg: #1e1f1c;
   --me-code-border: #3e3d32;
   --me-gutter-border: #3e3d32;
-  --me-line-active-bg: rgba(255, 255, 255, 0.045);
   --me-sel-bg: rgba(73, 72, 62, 0.95);
   --me-print-margin: rgba(73, 72, 62, 0.9);
 }
@@ -919,6 +1324,14 @@
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
 }
 
+[data-me-theme="dark"] .me-imgui {
+  --me-toolbar-bg: #1e1f1c;
+  --me-btn-bg: #3e3d32;
+  --me-tool-hover-bg: #575643;
+  --me-accent: #66d9ef;
+  box-shadow: none;
+}
+
 [data-me-theme="dark"] .me-pop,
 [data-me-theme="dark"] .me-linkcard {
   --me-toolbar-bg: #1e1f1c;

package/dist/view/dom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../src/view/dom.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAEnD;;;;;;;;GAQG;AAEH,eAAO,MAAM,SAAS,iBAAiB,CAAC;AAqDxC,wCAAwC;AACxC,wBAAgB,UAAU,CACxB,IAAI,EAAE,WAAW,EACjB,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,MAAM,GAChB,KAAK,GAAG,IAAI,CA0Cd;AAED,+CAA+C;AAC/C,wBAAgB,UAAU,CACxB,IAAI,EAAE,WAAW,EACjB,KAAK,EAAE,KAAK,GACX;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAmFvC;AAED,6CAA6C;AAC7C,wBAAgB,YAAY,CAC1B,IAAI,EAAE,WAAW,GAChB;IAAE,MAAM,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,KAAK,CAAA;CAAE,GAAG,IAAI,CAmCxC;AAED,8BAA8B;AAC9B,wBAAgB,iBAAiB,CAC/B,IAAI,EAAE,WAAW,EACjB,MAAM,EAAE,KAAK,EACb,KAAK,EAAE,KAAK,GACX,IAAI,CAMN"}
+{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../src/view/dom.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAEnD;;;;;;;;GAQG;AAEH,eAAO,MAAM,SAAS,iBAAiB,CAAC;AAqDxC,wCAAwC;AACxC,wBAAgB,UAAU,CACxB,IAAI,EAAE,WAAW,EACjB,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,MAAM,GAChB,KAAK,GAAG,IAAI,CA0Cd;AAED,+CAA+C;AAC/C,wBAAgB,UAAU,CACxB,IAAI,EAAE,WAAW,EACjB,KAAK,EAAE,KAAK,GACX;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAsHvC;AAED,6CAA6C;AAC7C,wBAAgB,YAAY,CAC1B,IAAI,EAAE,WAAW,GAChB;IAAE,MAAM,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,KAAK,CAAA;CAAE,GAAG,IAAI,CAmCxC;AAED,8BAA8B;AAC9B,wBAAgB,iBAAiB,CAC/B,IAAI,EAAE,WAAW,EACjB,MAAM,EAAE,KAAK,EACb,KAAK,EAAE,KAAK,GACX,IAAI,CAMN"}