@moda-editor/core 0.1.3 → 0.2.0

package/dist/styles.css

@@ -4,8 +4,8 @@
 .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도
    * 같은 변수를 상속해 그라디언트에 쓴다 */
@@ -53,19 +53,35 @@
 /* ── 에디터 크롬 — .me-frame이 툴바+에디터+상태바를 하나의 카드로
  * 묶는다. 단독 .me-editor도 테두리를 갖지만 frame 안에서는 frame이
  * 크롬을 담당한다 ─────────────────────────────────────────── */
+/* ── 테마 허브 — 크롬 변수는 .me-frame에, 본문 변수는 .me-editor에
+ * 모아 둔다. 리프 요소(.me-toolbar/.me-statusbar/.me-pop/blockquote/
+ * pre 토큰 등)는 변수를 자체 정의하지 않고 var()로만 소비한다 —
+ * 그래야 applyTheme이 허브에 박은 변수 맵이 상속으로 전부 도달해
+ * 테마가 플랫한 { --me-*: 값 } 객체 하나로 표현된다 ────────────── */
 .me-frame {
+  --me-frame-bg: #ffffff;
   --me-frame-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
   --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-toolbar-bg: #f8fafc;
+  --me-tool-hover-bg: #e2e8f0;
+  --me-tool-active-bg: #dbeafe;
+  --me-tool-active-color: #1d4ed8;
+  --me-status-color: #64748b;
+  /* 뜨는 UI(팝오버/버블/카드/그리드)의 공통 그림자 */
+  --me-pop-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
 
   color: var(--me-text-color);
-  background: #ffffff;
+  background: var(--me-frame-bg);
   border: 1px solid var(--me-border-color);
   border-radius: 10px;
   box-shadow: var(--me-frame-shadow);
   overflow: hidden;
+  /* 우하단 앵커 요소(상태바 탭·출력 패널)의 containing block */
+  position: relative;
 }
 
 /* 포커스 표시는 테두리 색만 — 글로우 링은 입력 중 카드 전체를
@@ -86,6 +102,26 @@
   --me-gutter-border: var(--me-border-color);
   --me-sel-bg: rgba(59, 130, 246, 0.22);
   --me-print-margin: rgba(148, 163, 184, 0.4);
+  /* 본문 콘텐츠 변수 — 인용구/링크/플레이스홀더/체크박스/콜아웃은
+   * 모두 .me-editor 안에 렌더되므로 여기가 기본값의 고향이다 */
+  --me-quote-color: #64748b;
+  --me-link-color: #2563eb;
+  --me-placeholder-color: #94a3b8;
+  --me-checkbox-border: #94a3b8;
+  --me-checkbox-checked: #2563eb;
+  --me-callout-bg: #eff6ff;
+  --me-callout-border: #bfdbfe;
+  --me-callout-accent: #3b82f6;
+  /* 구문 하이라이트 토큰 팔레트 — GitHub Light 계열 (pre가 아니라
+   * 허브에 둬야 테마 변수가 .me-tok-* 소비자까지 상속된다) */
+  --me-tok-keyword: #cf222e;
+  --me-tok-string: #0a3069;
+  --me-tok-comment: #6e7781;
+  --me-tok-number: #0550ae;
+  --me-tok-literal: #0550ae;
+  --me-tok-function: #8250df;
+  --me-tok-tag: #116329;
+  --me-tok-attr: #953800;
 
   min-height: 160px;
   position: relative;
@@ -109,17 +145,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);
 }
 
@@ -228,22 +260,40 @@
   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;
+}
 
+/* 인라인 코드 — GitHub/Slack/Notion 관례의 옅은 배경 + 고정폭.
+ * 테두리를 두지 않는다 — 테두리 칩은 멘션 등 interactive atom의
+ * 시각 언어라 코드 마크와 겹치면 구분이 안 된다 */
 .me-editor code {
   padding: 0.08em 0.35em;
   background: var(--me-code-bg);
-  border: 1px solid var(--me-code-border);
   border-radius: 4px;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 0.88em;
 }
 
+/* 빈 코드 칩 — CODE_CHIP(zwsp) 자리표시자는 내용이 없어 보이지
+ * 않으니 </> 힌트를 옅게 띄운다 (버튼 아이콘과 같은 모양).
+ * 타이핑이 zwsp를 대체하면 클래스가 빠져 힌트도 사라진다 */
+.me-editor code.me-codechip::after {
+  content: "</>";
+  opacity: 0.45;
+}
+
 /* 리스트 — li 안 문단은 자체 여백이 없다 (li가 줄 간격을 담당).
  * 패딩이 마커 열이다: outside 마커(•, 1.)가 텍스트 왼쪽에 붙어
  * 그려지므로, 마커가 거터 구분선에 닿지 않을 만큼의 들여쓰기가 필요 */
@@ -270,8 +320,6 @@
   padding-left: 24px;
 }
 .me-editor li.me-task::before {
-  --me-checkbox-border: #94a3b8;
-  --me-checkbox-checked: #2563eb;
   content: "";
   position: absolute;
   left: 4px;
@@ -339,6 +387,12 @@
   /* hr은 테두리가 굵어 outline이 묻힌다 — 위아래 여백으로 링을 띄운다 */
   outline-offset: 4px;
 }
+/* 노드 뷰 컴포넌트 셀렉션 — data-me-path는 안쪽 아울렛에 달리므로
+ * 래퍼에 별도 룰을 둔다 (input.ts가 래퍼로 올려 마킹한다) */
+.me-editor .me-node-view.is-selected {
+  outline: 2px solid var(--me-node-sel-color);
+  outline-offset: 2px;
+}
 
 /* ── 이미지 선택 오버레이 — 선택된 img 위에 얹히는 편집/리사이즈 UI.
  * .me-editor의 형제(.me-root의 absolute 자식)로 둬 DOM↔Point 매핑을
@@ -377,11 +431,11 @@
   flex-wrap: wrap;
   gap: 3px;
   padding: 4px;
-  max-width: min(320px, 90vw);
+  max-width: min(400px, 92vw);
   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);
+  box-shadow: var(--me-pop-shadow, 0 4px 14px rgba(15, 23, 42, 0.18));
   pointer-events: auto;
 }
 .me-imgui.is-below .me-img-bar {
@@ -390,9 +444,11 @@
   transform: translateY(100%);
 }
 .me-imgui .me-imgbtn {
+  flex: none;
   padding: 3px 8px;
   font: inherit;
   font-size: 12px;
+  white-space: nowrap;
   color: inherit;
   background: var(--me-btn-bg, transparent);
   border: 1px solid var(--me-border-color);
@@ -406,18 +462,27 @@
   color: #dc2626;
   border-color: #dc2626;
 }
-/* 편집 폼 — 액션 바 안의 두 번째 행 (wrap으로 전체 폭을 차지) */
+/* 편집 폼 — 액션 바 안의 두 번째 행 (wrap으로 전체 폭을 차지).
+ * 최소 폭을 둬 버튼 행보다 바가 좁아져 입력이 찌그러지지 않게 한다 */
 .me-imgui .me-imgedit {
   flex-basis: 100%;
+  min-width: min(300px, 80vw);
   display: flex;
   gap: 4px;
 }
 .me-imgui .me-imgedit[hidden] {
   display: none;
 }
+.me-imgui .me-imged-src {
+  flex: 3 1 0;
+}
+.me-imgui .me-imged-alt {
+  flex: 2 1 0;
+}
 .me-imgui .me-imged-src,
 .me-imgui .me-imged-alt {
-  width: min(150px, 30vw);
+  width: 0;
+  min-width: 0;
   padding: 4px 6px;
   font: inherit;
   font-size: 12px;
@@ -454,7 +519,7 @@
   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);
+  box-shadow: var(--me-pop-shadow, 0 4px 14px rgba(15, 23, 42, 0.18));
   white-space: nowrap;
   pointer-events: auto;
 }
@@ -523,7 +588,7 @@
   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);
+  box-shadow: var(--me-pop-shadow, 0 2px 8px rgba(15, 23, 42, 0.12));
   white-space: nowrap;
 }
 .me-codeui[hidden] {
@@ -610,7 +675,6 @@
 
 /* 인용구 */
 .me-editor blockquote {
-  --me-quote-color: #64748b;
   padding: 2px 0 2px 12px;
   border-left: 3px solid var(--me-border-color);
   color: var(--me-quote-color);
@@ -630,17 +694,6 @@
   white-space: pre-wrap;
   /* 코드블록 Tab은 \t 문자를 넣는다 — 탭 폭은 4 (CodeMirror 관례) */
   tab-size: 4;
-
-  /* 구문 하이라이트 토큰 팔레트 — GitHub Light 계열.
-   * 테마는 --me-tok-* 변수로 바꾼다 */
-  --me-tok-keyword: #cf222e;
-  --me-tok-string: #0a3069;
-  --me-tok-comment: #6e7781;
-  --me-tok-number: #0550ae;
-  --me-tok-literal: #0550ae;
-  --me-tok-function: #8250df;
-  --me-tok-tag: #116329;
-  --me-tok-attr: #953800;
 }
 .me-editor pre code {
   padding: 0;
@@ -690,17 +743,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를 단다
@@ -742,6 +791,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;
@@ -751,7 +827,6 @@
 
 /* 링크 */
 .me-editor a {
-  --me-link-color: #2563eb;
   color: var(--me-link-color);
   text-decoration: underline;
   text-underline-offset: 2px;
@@ -760,7 +835,6 @@
 /* 플레이스홀더 — 문서가 빈 문단 하나뿐일 때만 표시 (PM 관례) */
 .me-editor > p:only-child:has(> br:only-child)::before,
 .me-editor > p:only-child:has(> span > br:only-child)::before {
-  --me-placeholder-color: #94a3b8;
   content: var(--me-placeholder-text, "내용을 입력하세요…");
   float: left;
   height: 0;
@@ -779,7 +853,7 @@
   background: var(--me-toolbar-bg, #fff);
   border: 1px solid var(--me-border-color);
   border-radius: 8px;
-  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.14);
+  box-shadow: var(--me-pop-shadow, 0 4px 16px rgba(15, 23, 42, 0.14));
 }
 .me-bubble .me-tool {
   min-width: 26px;
@@ -802,7 +876,7 @@
   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);
+  box-shadow: var(--me-pop-shadow, 0 8px 24px rgba(15, 23, 42, 0.18));
 }
 .me-pop-input {
   width: min(220px, 46vw);
@@ -838,6 +912,114 @@
   display: inline-flex;
   align-items: center;
 }
+/* 찾기 팝 — 검색 줄 + 바꾸기 줄 두 행 (VS Code/GDocs find-replace 관례).
+ * 너비를 고정해 dev-shared의 위치 추정치(POP_SIZE.find)와 맞춘다 —
+ * 우상단 정렬이 실측 너비에 흔들리지 않게.
+ * absolute라 .me-frame 안에 갇힌다 — fixed면 스크롤 시 프레임과
+ * 분리돼 컴포넌트 밖으로 새나간다 */
+.me-pop-find {
+  position: absolute;
+  flex-direction: column;
+  align-items: stretch;
+  width: 320px;
+  max-width: calc(100vw - 16px);
+  box-sizing: border-box;
+}
+.me-pop-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.me-pop-row > .me-pop-input {
+  flex: 1;
+  min-width: 0;
+}
+/* 찾기 팝의 n/total 카운터 — GDocs 찾기 바 관례 */
+.me-pop-count {
+  min-width: 34px;
+  font-size: 11px;
+  color: var(--me-muted-color, #64748b);
+  text-align: center;
+}
+/* 보기 전환 탭 — 상태바 우측의 에디터/마크다운 세그먼트
+ * (VS Code editor|preview 관례). .me-frame의 data-me-view를 바꾼다 */
+.me-viewtabs {
+  display: inline-flex;
+  margin-left: 8px;
+  border: 1px solid var(--me-border-color);
+  border-radius: 5px;
+  overflow: hidden;
+}
+.me-viewtabs button {
+  padding: 0 8px;
+  font: inherit;
+  color: inherit;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+.me-viewtabs button + button {
+  border-left: 1px solid var(--me-border-color);
+}
+.me-viewtabs button:hover {
+  background: var(--me-btn-hover-bg, #e2e8f0);
+}
+.me-viewtabs button.is-on {
+  background: var(--me-btn-hover-bg, #e2e8f0);
+  color: var(--me-accent, #2563eb);
+}
+
+/* 마크다운 뷰 — [data-me-view="md"]일 때 에디터 영역을 대체한다.
+ * .me-root는 display:none으로 숨기되 DOM은 유지해 셀렉션/바인딩이
+ * 깨지지 않는다 — 돌아오면 그대로 이어진다 */
+.me-md-view {
+  display: none;
+}
+.me-frame[data-me-view="md"] .me-root {
+  display: none;
+}
+/* 숨은 에디터 위에 떠 있는 플로팅 요소도 함께 가린다 */
+.me-frame[data-me-view="md"] .me-bubble,
+.me-frame[data-me-view="md"] .me-linkcard {
+  display: none;
+}
+.me-frame[data-me-view="md"] > .me-md-view {
+  display: flex;
+  flex-direction: column;
+}
+.me-md-view .me-md-head {
+  display: flex;
+  justify-content: flex-end;
+  padding: 4px 8px;
+  border-bottom: 1px solid var(--me-border-color);
+}
+.me-md-view .me-md-text {
+  min-height: 220px;
+  padding: 10px 16px;
+  border: none;
+  resize: vertical;
+  font-family: var(--me-font-mono);
+  font-size: 12.5px;
+  line-height: 1.6;
+  color: var(--me-text-color);
+  background: transparent;
+}
+.me-md-view .me-md-text:focus {
+  outline: none;
+}
+.me-pop-textarea {
+  width: 100%;
+  height: 160px;
+  padding: 6px 8px;
+  font-family: var(--me-font-mono, monospace);
+  font-size: 12px;
+  color: inherit;
+  background: transparent;
+  border: 1px solid var(--me-border-color);
+  border-radius: 5px;
+  outline: none;
+  resize: vertical;
+}
 
 /* 표 크기 피커 — GDocs 표 삽입 그리드 관례. 열 수는 data.ts의
  * TGRID_COLS(10)와 짝 — 바꾸면 둘 다 갱신한다 */
@@ -884,7 +1066,7 @@
   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);
+  box-shadow: var(--me-pop-shadow, 0 8px 24px rgba(15, 23, 42, 0.18));
 }
 .me-linkcard-url {
   flex: 1;
@@ -923,9 +1105,6 @@
 /* 데모용 callout 노드 컴포넌트 — 아이콘 크롬 + 편집 콘텐츠.
  * 왼쪽 액센트 바는 GitHub alert/Notion callout 관례 */
 .me-callout {
-  --me-callout-bg: #eff6ff;
-  --me-callout-border: #bfdbfe;
-  --me-callout-accent: #3b82f6;
 
   display: flex;
   gap: 8px;
@@ -947,19 +1126,15 @@
 /* ── 툴바 — 데모/스타터용 에디터 크롬. 어댑터 계약이 아니라
  * 선택적 UI라 앱이 자체 툴바를 써도 된다 ─────────────────────── */
 .me-toolbar {
-  --me-toolbar-bg: #f8fafc;
-  --me-tool-hover-bg: #e2e8f0;
-  --me-tool-active-bg: #dbeafe;
-  --me-tool-active-color: #1d4ed8;
-
   display: flex;
   align-items: center;
-  /* 한 줄 원칙 — 넘치는 항목은 두 줄로 내리지 않고 ⋯ 메뉴로 보낸다
-   * (data-rsp 티어, 아래 미디어 쿼리).
-   * overflow:hidden을 쓰지 않는다 — absolute인 ⋯/A▾의 .me-menu가
-   * 툴바 아래로 열릴 때 같이 잘린다. ⋯는 absolute로 우측에 고정하고
-   * padding-right로 그 자리를 비워 넘치는 항목이 그 밑으로 스치게 한다 */
-  flex-wrap: nowrap;
+  /* 좁은 폭에서는 항목을 숨기지 않고 다음 줄로 감는다 (GDocs/Word
+   * 리본 관례 — 2~3줄까지 늘어난다). overflow:hidden을 쓰지 않는다 —
+   * absolute인 ⋯/A▾의 .me-menu가 툴바 아래로 열릴 때 같이 잘린다.
+   * ⋯는 absolute로 우측 상단에 고정하고 padding-right로 첫 줄 자리를
+   * 비워 둔다 — 줄이 늘어나도 ⋯ 위치는 항상 같다 */
+  flex-wrap: wrap;
+  row-gap: 4px;
   /* relative+z-index: 툴바 전체를 에디터(.me-editor relative) 위에
    * 올려 ⋯/A▾ 드롭다운이 본문에 가려지지 않게 한다. 팝오버/버블
    * (fixed, z 50~60)보다는 아래라 겹쳐도 그쪽이 위에 뜬다 */
@@ -967,7 +1142,7 @@
   z-index: 20;
   gap: 2px;
   padding: 6px 44px 6px 8px;
-  background: var(--me-toolbar-bg);
+  background: var(--me-toolbar-bg, #f8fafc);
   border-bottom: 1px solid var(--me-border-color);
   /* IDE 크롬 — 툴 라벨도 코드 에디터 폰트로 */
   font-family: var(--me-font-mono);
@@ -996,7 +1171,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로.
@@ -1013,7 +1190,7 @@
 }
 
 .me-tool:hover:not(:disabled) {
-  background: var(--me-tool-hover-bg);
+  background: var(--me-tool-hover-bg, #e2e8f0);
 }
 
 /* 키보드 포커스 표시 — VSCode 크롬 관례 (마우스 클릭엔 링 없음) */
@@ -1027,8 +1204,8 @@
 }
 
 .me-tool.is-active {
-  background: var(--me-tool-active-bg);
-  color: var(--me-tool-active-color);
+  background: var(--me-tool-active-bg, #dbeafe);
+  color: var(--me-tool-active-color, #1d4ed8);
 }
 
 .me-tool:disabled {
@@ -1069,7 +1246,7 @@
   right: 8px;
   top: 6px;
   flex-shrink: 0;
-  background: var(--me-toolbar-bg);
+  background: var(--me-toolbar-bg, #f8fafc);
   border-radius: 6px;
 }
 .me-overflow > summary,
@@ -1095,12 +1272,12 @@
 }
 .me-overflow > summary:hover,
 .me-styles > summary:hover {
-  background: var(--me-tool-hover-bg);
+  background: var(--me-tool-hover-bg, #e2e8f0);
 }
 .me-overflow[open] > summary,
 .me-styles[open] > summary {
-  background: var(--me-tool-active-bg);
-  color: var(--me-tool-active-color);
+  background: var(--me-tool-active-bg, #dbeafe);
+  color: var(--me-tool-active-color, #1d4ed8);
 }
 /* A▾ 드롭다운 표시 — 스타일 패널 버튼 뒤의 캐럿 */
 .me-styles > summary::after {
@@ -1125,7 +1302,7 @@
   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);
+  box-shadow: var(--me-pop-shadow, 0 8px 24px rgba(15, 23, 42, 0.18));
   white-space: nowrap;
 }
 /* A▾ 패널은 툴바 중간에서 열리므로 버튼 왼쪽 아래에 붙인다 */
@@ -1134,33 +1311,10 @@
   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;
-  }
-}
+/* ── 좁은 폭 — 툴바는 flex-wrap으로 여러 줄로 감긴다 ───────────
+ * 항목을 숨기지 않는다 — 자주 안 쓰는 커맨드만 TOOL_ITEMS의 menu
+ * 표시로 ⋯ 패널에 둔다 (정적 구성). ⋯ 버튼은 첫 줄 우측에 고정돼
+ * 줄 수와 무관하게 같은 곳에서 연다 */
 
 /* 툴바 인라인 스타일 컨트롤 — A▾ 패널 안의 컬러 피커/크기 셀렉트 */
 .me-style {
@@ -1192,7 +1346,7 @@
   padding: 0 6px;
   border: 1px solid var(--me-border-color);
   border-radius: 6px;
-  background: var(--me-toolbar-bg);
+  background: var(--me-toolbar-bg, #f8fafc);
   color: var(--me-text-color);
   font: inherit;
   font-size: 13px;
@@ -1202,7 +1356,6 @@
 /* 상태 표시줄 — 왼쪽은 블록/마크, 오른쪽은 Ln·Col/블록 수
  * (VSCode 상태바 관례 — 위치 정보는 우측 정렬) */
 .me-statusbar {
-  --me-status-color: #64748b;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1212,7 +1365,7 @@
   background: var(--me-toolbar-bg, #f8fafc);
   font-size: 11px;
   font-family: ui-monospace, monospace;
-  color: var(--me-status-color);
+  color: var(--me-status-color, #64748b);
   white-space: nowrap;
 }
 .me-status-left,
@@ -1223,6 +1376,9 @@
 }
 .me-status-right {
   flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
 }
 
 /* frame 밖 단독 사용 시 */
@@ -1233,129 +1389,161 @@
   opacity: 0.7;
 }
 
-/* ── 다크 테마 — Ace Monokai 계열. .me-frame 또는 그 조상에
- * data-me-theme="dark" ────────────────────────────────────── */
-[data-me-theme="dark"] {
-  --me-border-color: #3e3d32;
-  --me-text-color: #f8f8f2;
-}
+/* ── 테마 — 프리셋/커스텀 테마는 ME_THEMES(theme.ts)의 --me-*
+ * 변수 맵을 허브(.me-frame/.me-root/.me-editor)에 인라인으로 박는다.
+ * [data-me-theme] 속성은 테마가 켜져 있다는 표시만 남는다 ────────── */
 
-/* EditorView/WidgetView의 .me-root 래퍼가 팔레트 기본값을 갖고 있어
- * frame의 다크 변수를 중간에서 덮는다 — 테마 아래의 .me-root는
- * 테마 변수를 그대로 상속하도록 명시 오버라이드 */
-[data-me-theme="dark"] .me-root {
-  --me-border-color: #3e3d32;
-  --me-text-color: #f8f8f2;
-  --me-gutter-bg: rgba(0, 0, 0, 0.22);
-  --me-gutter-color: #8f908a;
-  --me-line-active-num: #c2c2bf;
-  --me-node-sel-color: #66d9ef;
+/* 테마가 켜진 동안 ◐ 버튼을 활성색으로 — 팔레트가 바뀐다는 표시 */
+[data-me-theme] .me-tool[data-me-cmd="theme"] {
+  color: var(--me-tool-active-color, #1d4ed8);
 }
 
-.me-frame[data-me-theme="dark"] {
-  background: #1e1f1c;
+/* 테마 피커 — ◐ 팝오버의 세로 목록. 스와치 원은 각 테마의
+ * 배경/액센트 2색 그라디언트로 미리보기다 */
+.me-pop-themes {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 1px;
+  width: 200px;
+  padding: 4px;
 }
-
-[data-me-theme="dark"] .me-editor {
-  --me-editor-bg: #272822;
-  --me-editor-focus: #66d9ef;
-  --me-code-bg: #1e1f1c;
-  --me-code-border: #3e3d32;
-  --me-gutter-border: #3e3d32;
-  --me-sel-bg: rgba(73, 72, 62, 0.95);
-  --me-print-margin: rgba(73, 72, 62, 0.9);
+.me-pop-theme {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 6px 9px;
+  border: none;
+  border-radius: 6px;
+  background: none;
+  color: var(--me-text-color);
+  font: inherit;
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
 }
-
-/* 구문 하이라이트 다크 팔레트 — Monokai */
-[data-me-theme="dark"] .me-editor pre {
-  --me-tok-keyword: #f92672;
-  --me-tok-string: #e6db74;
-  --me-tok-comment: #75715e;
-  --me-tok-number: #ae81ff;
-  --me-tok-literal: #ae81ff;
-  --me-tok-function: #a6e22e;
-  --me-tok-tag: #f92672;
-  --me-tok-attr: #a6e22e;
-  --me-code-active-bg: rgba(255, 255, 255, 0.05);
+.me-pop-theme:hover {
+  background: var(--me-tool-hover-bg, #e2e8f0);
 }
-
-[data-me-theme="dark"] .me-toolbar {
-  --me-toolbar-bg: #1e1f1c;
-  --me-tool-hover-bg: #3e3d32;
-  --me-tool-active-bg: rgba(102, 217, 239, 0.14);
-  --me-tool-active-color: #66d9ef;
+.me-pop-theme.is-on {
+  color: var(--me-tool-active-color, #1d4ed8);
+  font-weight: 600;
 }
-
-/* 폼 컨트롤은 UA 라이트 기본값을 상속해 다크에서 튄다 — 명시 오버라이드 */
-[data-me-theme="dark"] .me-toolbar .me-size,
-[data-me-theme="dark"] .me-toolbar .me-blockfmt,
-[data-me-theme="dark"] .me-toolbar .me-style input[type="color"] {
-  background: #1e1f1c;
-  border-color: #3e3d32;
-  color: #f8f8f2;
+.me-theme-swatch {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 1px solid var(--me-border-color);
+  background: linear-gradient(
+    135deg,
+    var(--me-swatch-a) 0 55%,
+    var(--me-swatch-b) 55% 100%
+  );
 }
-
-[data-me-theme="dark"] .me-statusbar {
-  --me-toolbar-bg: #1e1f1c;
-  --me-status-color: #8f908a;
+.me-pop-theme .me-theme-check {
+  margin-left: auto;
+  font-weight: 600;
 }
 
-[data-me-theme="dark"] .me-callout {
-  --me-callout-bg: #2d2e25;
-  --me-callout-border: #575643;
-  --me-callout-accent: #66d9ef;
-}
 
-[data-me-theme="dark"] .me-editor blockquote {
-  --me-quote-color: #a09f93;
+/* ── 블록 드래그&드롭 — .me-dnd 오버레이(block-dnd feature)가
+ * .me-editor의 형제로 그린다. 거터 스트립(왼쪽 여백)에만 겹치게 둬
+ * Chrome 캐럿 줄 경계 계산을 지키고, 래퍼는 pointer-events:none이라
+ * 텍스트 클릭을 가로채지 않는다 */
+.me-dnd {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
 }
-
-[data-me-theme="dark"] .me-editor a {
-  --me-link-color: #66d9ef;
+/* 호버 블록의 왼쪽에 붙는 핸들 — 드래그 시작점. 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;
 }
-
-[data-me-theme="dark"] .me-editor li.me-task::before {
-  --me-checkbox-border: #575643;
-  --me-checkbox-checked: #a6e22e;
+.me-drag-handle.is-visible {
+  display: flex;
 }
-
-[data-me-theme="dark"] .me-bubble {
-  --me-toolbar-bg: #1e1f1c;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
+.me-drag-handle:hover {
+  background: var(--me-gutter-bg);
+  color: var(--me-text-color);
 }
-
-[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;
+.me-drag-handle:active {
+  cursor: grabbing;
 }
-
-[data-me-theme="dark"] .me-pop,
-[data-me-theme="dark"] .me-linkcard {
-  --me-toolbar-bg: #1e1f1c;
-  --me-btn-bg: #3e3d32;
-  --me-btn-hover-bg: #575643;
-  --me-accent: #66d9ef;
-  --me-link-color: #66d9ef;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+/* 드롭 경계 표시선 — dragover 동안 삽입 위치에 그린다 */
+.me-drop-line {
+  position: absolute;
+  left: 3.9em;
+  right: 0;
+  height: 2px;
+  display: none;
+  background: var(--me-node-sel-color);
+  border-radius: 1px;
 }
-
-[data-me-theme="dark"] .me-glang {
-  --me-text-muted: #8f908a;
-  --me-btn-bg: #3e3d32;
+.me-drop-line.is-visible {
+  display: block;
 }
 
-[data-me-theme="dark"] .me-editor ::placeholder,
-[data-me-theme="dark"] .me-editor > p:only-child:has(> br:only-child)::before,
-[data-me-theme="dark"]
-  .me-editor
-  > p:only-child:has(> span > br:only-child)::before {
-  --me-placeholder-color: #6a6b60;
+/* ── 뷰 데코레이션 — 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;
 }
 
-/* 테마 토글 버튼 — 다크 상태에서는 활성색으로 표시 */
-[data-me-theme="dark"] .me-tool[data-me-cmd="theme"] {
-  color: var(--me-tool-active-color);
+/* ── 원격 커서 — 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
+  );
 }