@moda-editor/core 0.1.2 → 0.1.5

package/dist/styles.css

@@ -4,14 +4,16 @@
 .me-root {
   --me-border-color: #e2e8f0;
   --me-text-color: #1e293b;
-  --me-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
-    "Liberation Mono", monospace;
+  --me-font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
   /* 거터·활성줄 변수는 루트에 둔다 — .me-gutter 오버레이가 .me-editor의
    * 형제라 .me-editor 스코프 변수를 못 본다. 자식인 .me-editor도
    * 같은 변수를 상속해 그라디언트에 쓴다 */
   --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,11 +55,10 @@
  * 크롬을 담당한다 ─────────────────────────────────────────── */
 .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,
-    "Liberation Mono", monospace;
+  --me-font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
 
   color: var(--me-text-color);
   background: #ffffff;
@@ -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);
 
@@ -108,17 +109,13 @@
     ),
     /* print margin — 80열 (Ace showPrintMargin 관례) */
     linear-gradient(
-      to right,
-      transparent 0 calc(3.9em + 80ch),
-      var(--me-print-margin) calc(3.9em + 80ch) calc(3.9em + 80ch + 1px),
-      transparent calc(3.9em + 80ch + 1px)
-    ),
+        to right,
+        transparent 0 calc(3.9em + 80ch),
+        var(--me-print-margin) calc(3.9em + 80ch) calc(3.9em + 80ch + 1px),
+        transparent calc(3.9em + 80ch + 1px)
+      ),
     /* 거터 컬럼 배경 */
-    linear-gradient(
-      to right,
-      var(--me-gutter-bg) 0 3.9em,
-      transparent 3.9em
-    ),
+    linear-gradient(to right, var(--me-gutter-bg) 0 3.9em, transparent 3.9em),
     var(--me-editor-bg);
 }
 
@@ -182,11 +179,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 {
@@ -227,12 +224,20 @@
   margin-bottom: 0;
 }
 
-.me-editor h1 { font-size: 1.55em; }
-.me-editor h2 { font-size: 1.35em; }
-.me-editor h3 { font-size: 1.2em; }
+.me-editor h1 {
+  font-size: 1.55em;
+}
+.me-editor h2 {
+  font-size: 1.35em;
+}
+.me-editor h3 {
+  font-size: 1.2em;
+}
 .me-editor h4,
 .me-editor h5,
-.me-editor h6 { font-size: 1.05em; }
+.me-editor h6 {
+  font-size: 1.05em;
+}
 
 .me-editor code {
   padding: 0.08em 0.35em;
@@ -325,6 +330,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 색이 덮는다 */
@@ -415,17 +694,13 @@
     ),
     /* print margin — 80열 (Ace showPrintMargin 관례) */
     linear-gradient(
-      to right,
-      transparent 0 calc(3.4em + 80ch),
-      var(--me-print-margin) calc(3.4em + 80ch) calc(3.4em + 80ch + 1px),
-      transparent calc(3.4em + 80ch + 1px)
-    ),
+        to right,
+        transparent 0 calc(3.4em + 80ch),
+        var(--me-print-margin) calc(3.4em + 80ch) calc(3.4em + 80ch + 1px),
+        transparent calc(3.4em + 80ch + 1px)
+      ),
     /* 거터 컬럼 배경 */
-    linear-gradient(
-      to right,
-      var(--me-gutter-bg) 0 3.4em,
-      transparent 3.4em
-    ),
+    linear-gradient(to right, var(--me-gutter-bg) 0 3.4em, transparent 3.4em),
     var(--me-code-bg);
 }
 /* 활성 줄 — 바인딩의 restoreSelection이 DOM에 is-active를 단다
@@ -467,6 +742,33 @@
   background-color: var(--me-bracket-bg, rgba(59, 130, 246, 0.28));
 }
 
+/* 검색 매치 하이라이트 — searchFeature가 CSS Custom Highlight API로
+ * "me-find"/"me-find-active" Range를 등록한다. DOM을 건드리지 않아
+ * 매핑·리렌더에 무영향 (me-bracket과 같은 계약) */
+::highlight(me-find) {
+  background-color: var(--me-find-bg, rgba(250, 204, 21, 0.35));
+}
+::highlight(me-find-active) {
+  background-color: var(--me-find-active-bg, rgba(249, 115, 22, 0.45));
+  outline: 1px solid var(--me-find-active-bg, rgba(249, 115, 22, 0.45));
+}
+
+/* 멘션 칩 — 인라인 atom. 라벨은 DOM 텍스트 없이 ::after로 그려
+ * 텍스트 누적 오프셋 매핑(dom.ts)을 건드리지 않는다 */
+.me-mention {
+  display: inline-block;
+  padding: 0 4px;
+  margin: 0 1px;
+  border-radius: 4px;
+  background: var(--me-mention-bg, rgba(59, 130, 246, 0.12));
+  color: var(--me-mention-color, #2563eb);
+  font-weight: 500;
+  cursor: default;
+}
+.me-mention::after {
+  content: "@" attr(data-label);
+}
+
 /* 구분선 — atom 노드라 data-me-path를 직접 갖는다 */
 .me-editor hr {
   border: none;
@@ -680,11 +982,18 @@
   display: flex;
   align-items: center;
   /* 한 줄 원칙 — 넘치는 항목은 두 줄로 내리지 않고 ⋯ 메뉴로 보낸다
-   * (data-rsp 티어, 아래 미디어 쿼리). 남는 초窄 폭은 overflow로 자른다 */
+   * (data-rsp 티어, 아래 미디어 쿼리).
+   * overflow:hidden을 쓰지 않는다 — absolute인 ⋯/A▾의 .me-menu가
+   * 툴바 아래로 열릴 때 같이 잘린다. ⋯는 absolute로 우측에 고정하고
+   * padding-right로 그 자리를 비워 넘치는 항목이 그 밑으로 스치게 한다 */
   flex-wrap: nowrap;
-  overflow: hidden;
+  /* 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 크롬 — 툴 라벨도 코드 에디터 폰트로 */
@@ -714,7 +1023,9 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  transition: background-color 0.12s ease, color 0.12s ease;
+  transition:
+    background-color 0.12s ease,
+    color 0.12s ease;
 }
 
 /* 툴바 아이콘 — 24px viewBox stroke 아이콘을 currentColor로.
@@ -776,13 +1087,19 @@
   position: relative;
   display: inline-flex;
 }
-/* ⋯는 항상 우측 끝에 살아있어야 한다 — 툴바가 잘려도(sticky가
- * 스크롤/클립 경계에 붙는다) 오버플로 진입점이 사라지지 않는다 */
+/* ⋯는 항상 우측 끝에 살아있어야 한다 — absolute로 핀 고정해 항목이
+ * 넘쳐도 오버플로 진입점이 사라지지 않는다. 넘친 항목이 밑으로
+ * 스치므로 불투명 배경으로 덮는다. absolute라 이 details 자체가
+ * .me-menu의 containing block이다 */
 .me-toolbar > .me-overflow {
-  position: sticky;
-  right: 0;
+  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 {
@@ -961,10 +1278,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;
 }
 
@@ -974,7 +1291,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);
 }
@@ -1037,6 +1353,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;
@@ -1064,3 +1388,105 @@
 [data-me-theme="dark"] .me-tool[data-me-cmd="theme"] {
   color: var(--me-tool-active-color);
 }
+
+/* ── 블록 드래그&드롭 — .me-dnd 오버레이(block-dnd feature)가
+ * .me-editor의 형제로 그린다. 거터 스트립(왼쪽 여백)에만 겹치게 둬
+ * Chrome 캐럿 줄 경계 계산을 지키고, 래퍼는 pointer-events:none이라
+ * 텍스트 클릭을 가로채지 않는다 */
+.me-dnd {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+/* 호버 블록의 왼쪽에 붙는 핸들 — 드래그 시작점. gutter 영역
+ * (3.9em) 안에 두고 핸들만 이벤트를 받는다 */
+.me-drag-handle {
+  position: absolute;
+  left: 0.2em;
+  width: 1.4em;
+  height: 1.4em;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  pointer-events: auto;
+  cursor: grab;
+  color: var(--me-gutter-color);
+  font-size: 12px;
+  line-height: 1;
+  letter-spacing: -0.15em;
+  border-radius: 4px;
+}
+.me-drag-handle.is-visible {
+  display: flex;
+}
+.me-drag-handle:hover {
+  background: var(--me-gutter-bg);
+  color: var(--me-text-color);
+}
+.me-drag-handle:active {
+  cursor: grabbing;
+}
+/* 드롭 경계 표시선 — dragover 동안 삽입 위치에 그린다 */
+.me-drop-line {
+  position: absolute;
+  left: 3.9em;
+  right: 0;
+  height: 2px;
+  display: none;
+  background: var(--me-node-sel-color);
+  border-radius: 1px;
+}
+.me-drop-line.is-visible {
+  display: block;
+}
+
+/* ── 뷰 데코레이션 — Plugin.decorations가 만드는 span.me-deco.
+ * 기본은 투명 — 기능/테마가 attrs.class로 모양을 준다.
+ * 데모의 TODO 데코는 me-deco-todo로 밑줄을 긋는다 */
+.me-deco.me-deco-todo {
+  background: rgba(245, 158, 11, 0.16);
+  border-bottom: 1px dashed #d97706;
+}
+
+/* ── 원격 커서 — collab-yjs의 carets extension이 paintOverlay로 그리는
+ * 협업 캐럿. .me-imgui처럼 .me-editor의 형제(.me-root의 absolute
+ * 자식)라 DOM↔Point 매핑과 무관하다. 피어별 색은 요소의
+ * --me-remote-color 인라인 변수로 들어온다 */
+.me-carets {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 35;
+  overflow: hidden;
+}
+/* 캐럿 바 — 2px 세로선, 높이는 JS가 줄 높이로 맞춘다 */
+.me-remote-caret {
+  position: absolute;
+  width: 2px;
+  background: var(--me-remote-color, #f59e0b);
+}
+/* 이름 라벨 — 캐럿 위에 붙는 작은 깃발 (y-prosemirror 관례) */
+.me-remote-caret-label {
+  position: absolute;
+  top: -1.15em;
+  left: -1px;
+  padding: 0 4px;
+  border-radius: 3px 3px 3px 0;
+  background: var(--me-remote-color, #f59e0b);
+  color: #fff;
+  font:
+    600 10px/1.5 ui-sans-serif,
+    system-ui,
+    sans-serif;
+  white-space: nowrap;
+  user-select: none;
+}
+/* 원격 선택 영역 — Range.getClientRects()로 줄별 rect를 깐다 */
+.me-remote-sel {
+  position: absolute;
+  background: color-mix(
+    in srgb,
+    var(--me-remote-color, #f59e0b) 22%,
+    transparent
+  );
+}