@moda-editor/core 0.1.1 → 0.1.2

package/dist/styles.css

@@ -243,10 +243,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 +258,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;
@@ -509,21 +512,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 +564,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,7 +679,10 @@
 
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
+  /* 한 줄 원칙 — 넘치는 항목은 두 줄로 내리지 않고 ⋯ 메뉴로 보낸다
+   * (data-rsp 티어, 아래 미디어 쿼리). 남는 초窄 폭은 overflow로 자른다 */
+  flex-wrap: nowrap;
+  overflow: hidden;
   gap: 2px;
   padding: 6px 8px;
   background: var(--me-toolbar-bg);
@@ -669,9 +711,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 +737,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 +767,32 @@
   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 {
+/* ⋯는 항상 우측 끝에 살아있어야 한다 — 툴바가 잘려도(sticky가
+ * 스크롤/클립 경계에 붙는다) 오버플로 진입점이 사라지지 않는다 */
+.me-toolbar > .me-overflow {
+  position: sticky;
+  right: 0;
+  flex-shrink: 0;
+  background: var(--me-toolbar-bg);
+}
+.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 +801,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 +840,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moda-editor/core",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Headless core — state, snapshot, events",
   "license": "MIT",
   "type": "module",