@moda-chart/core 0.1.2

package/dist/mount.js

@@ -0,0 +1,795 @@
+import { ChartCore } from "./core.js";
+import { escapeXml, seriesColor, svgInner } from "./svg.js";
+import { sparklineMarkup } from "./sparkline.js";
+function legendItemHtml(id, label, color, colorIndex, visible, check) {
+    const c = seriesColor(color, colorIndex, { export: false });
+    return (`<button type="button" class="mc-legend-item${visible ? "" : " mc-hidden"}" ` +
+        `data-id="${escapeXml(id)}" aria-pressed="${visible}">` +
+        (check
+            ? `<input type="checkbox" class="mc-legend-check"${visible ? " checked" : ""} tabindex="-1" aria-hidden="true">`
+            : "") +
+        `<span class="mc-legend-swatch" style="background:${escapeXml(c)}"></span>` +
+        `<span class="mc-legend-label">${escapeXml(label)}</span></button>`);
+}
+function tooltipHtml(snap) {
+    const t = snap.tooltip;
+    if (!t)
+        return "";
+    // tooltip.render의 커스텀 HTML — 신뢰된 마크업이라 escape하지 않는다
+    if (t.html != null)
+        return t.html;
+    const rows = t.rows
+        .map((r) => {
+        const c = seriesColor(r.color, r.colorIndex, { export: false });
+        return (`<div class="mc-tooltip-row">` +
+            `<span class="mc-tooltip-swatch" style="background:${escapeXml(c)}"></span>` +
+            `<span class="mc-tooltip-name">${escapeXml(r.name)}</span>` +
+            `<span class="mc-tooltip-value">${escapeXml(r.value)}</span></div>`);
+    })
+        .join("");
+    return `<div class="mc-tooltip-title">${escapeXml(t.title)}</div>${rows}`;
+}
+/** 렌더러가 공유하는 정적 뼈대 마크업 — 어댑터도 같은 구조를 만든다 */
+export function skeletonHtml() {
+    return (`<div class="mc-root">` +
+        `<div class="mc-title" hidden></div>` +
+        `<div class="mc-subtitle" hidden></div>` +
+        `<div class="mc-toolbar">` +
+        `<button type="button" class="mc-drillup" hidden>‹ Back</button>` +
+        `<button type="button" class="mc-zoom-reset">Reset</button>` +
+        `<button type="button" class="mc-export-svg">SVG</button>` +
+        `<button type="button" class="mc-export-png">PNG</button>` +
+        `</div>` +
+        `<div class="mc-viewport"><svg class="mc-svg" role="img"></svg>` +
+        `<div class="mc-overlay"></div>` +
+        `<div class="mc-tooltip" role="tooltip" hidden></div>` +
+        `<div class="mc-menu" role="menu" hidden></div>` +
+        `</div>` +
+        `<div class="mc-legend"></div>` +
+        `<div class="mc-loading" hidden><div class="mc-spinner"></div></div>` +
+        `<div class="mc-a11y" aria-live="polite"></div>` +
+        `</div>`);
+}
+const MORPH_SELECTOR = ".mc-bar, .mc-point";
+function morphKey(el) {
+    return `${el.tagName.toLowerCase()}:${el.getAttribute("data-series-id")}:${el.getAttribute("data-index")}`;
+}
+function morphBox(el) {
+    const n = (a) => Number(el.getAttribute(a) ?? 0);
+    const tag = el.tagName.toLowerCase();
+    if (tag === "rect")
+        return { x: n("x"), y: n("y"), w: n("width"), h: n("height") };
+    if (tag === "circle") {
+        const r = n("r");
+        return { x: n("cx") - r, y: n("cy") - r, w: 2 * r, h: 2 * r };
+    }
+    return null;
+}
+/**
+ * 재렌더 전 현재 .mc-bar/.mc-point의 박스를 키로 수집한다.
+ * innerHTML 교체 직전에 호출한다.
+ */
+export function captureMorph(svg) {
+    const map = new Map();
+    for (const el of svg.querySelectorAll(MORPH_SELECTOR)) {
+        const box = morphBox(el);
+        if (box)
+            map.set(morphKey(el), box);
+    }
+    return map;
+}
+/**
+ * 새 지오메트리에 이전 박스로 되돌리는 transform을 입힌다 —
+ * transition이 없는 환경에서는 transform이 즉시 해제된다.
+ * morph된 요소에는 .mc-morph가 붙고 transition 종료 후 떨어진다.
+ * 반환값은 morph가 적용된 요소 수.
+ */
+export function applyMorph(svg, prev, duration = 300) {
+    if (!prev.size)
+        return 0;
+    let applied = 0;
+    for (const el of svg.querySelectorAll(MORPH_SELECTOR)) {
+        const old = prev.get(morphKey(el));
+        const cur = morphBox(el);
+        if (!old || !cur)
+            continue;
+        const dx = old.x - cur.x;
+        const dy = old.y - cur.y;
+        const sx = cur.w ? old.w / cur.w : 1;
+        const sy = cur.h ? old.h / cur.h : 1;
+        if (!dx && !dy && sx === 1 && sy === 1)
+            continue;
+        const el2 = el;
+        el2.style.transformBox = "fill-box";
+        el2.style.transformOrigin = "0px 0px";
+        el2.style.transform = `translate(${dx}px, ${dy}px) scale(${sx}, ${sy})`;
+        el.classList.add("mc-morph");
+        applied++;
+        // reflow로 초기 상태를 확정한 뒤 해제 — transition이 보간한다
+        void el2.getBoundingClientRect?.();
+        el2.style.transform = "";
+        const off = () => el.classList.remove("mc-morph");
+        el.addEventListener("transitionend", off, { once: true });
+        // transition이 없는 환경(jsdom/애니메이션 off)용 폴백
+        setTimeout(off, duration + 150);
+    }
+    return applied;
+}
+/** 스냅샷을 루트 DOM에 반영 — mountChart와 어댑터 테스트에서 공유 */
+export function renderInto(root, snap) {
+    root.className = `mc-root${snap.animate ? " mc-animated" : ""}${snap.updating && snap.animate ? " mc-updating" : ""}${snap.drawMode ? " mc-drawing" : ""}`;
+    root.setAttribute("data-theme", snap.theme);
+    root.setAttribute("data-chart-type", snap.type);
+    root.setAttribute("data-legend", snap.legendPosition);
+    root.setAttribute("role", "figure");
+    root.setAttribute("aria-label", snap.ariaLabel);
+    root.setAttribute("tabindex", "0");
+    root.setAttribute("aria-busy", String(snap.loading));
+    root.style.setProperty("--chart-animation-duration", `${snap.animationDuration}ms`);
+    const title = root.querySelector(".mc-title");
+    title.textContent = snap.title ?? "";
+    title.hidden = snap.title === null;
+    const subtitle = root.querySelector(".mc-subtitle");
+    subtitle.textContent = snap.subtitle ?? "";
+    subtitle.hidden = snap.subtitle === null;
+    const loading = root.querySelector(".mc-loading");
+    loading.hidden = !snap.loading;
+    const svg = root.querySelector("svg.mc-svg");
+    svg.setAttribute("width", String(snap.width));
+    svg.setAttribute("height", String(snap.height));
+    svg.setAttribute("viewBox", `0 0 ${snap.width} ${snap.height}`);
+    // 데이터 갱신 전환 — 교체 전 지오메트리 박스를 키로 잡아 morph한다
+    const morphPrev = snap.updating && snap.animate ? captureMorph(svg) : null;
+    svg.innerHTML = svgInner(snap, { export: false });
+    if (morphPrev)
+        applyMorph(svg, morphPrev, snap.animationDuration);
+    const viewport = root.querySelector(".mc-viewport");
+    viewport.style.width = `${snap.width}px`;
+    viewport.style.height = `${snap.height}px`;
+    const overlay = root.querySelector(".mc-overlay");
+    overlay.style.left = `${snap.plot.x}px`;
+    overlay.style.top = `${snap.plot.y}px`;
+    overlay.style.width = `${snap.plot.w}px`;
+    overlay.style.height = `${snap.plot.h}px`;
+    const legend = root.querySelector(".mc-legend");
+    // 페이지네이션 — pageSize로 잘라 네비 버튼(.mc-legend-prev/next)을 붙인다
+    const lp = snap.legendPage;
+    const legendItems = lp
+        ? snap.legend.slice(lp.page * lp.size, (lp.page + 1) * lp.size)
+        : snap.legend;
+    legend.innerHTML =
+        (lp
+            ? `<button type="button" class="mc-legend-prev" aria-label="prev" ${lp.page === 0 ? "disabled" : ""}>‹</button>`
+            : "") +
+            legendItems
+                .map((l) => legendItemHtml(l.id, l.label, l.color, l.colorIndex, l.visible, snap.legendChecks))
+                .join("") +
+            (lp
+                ? `<span class="mc-legend-page">${lp.page + 1}/${lp.pages}</span>` +
+                    `<button type="button" class="mc-legend-next" aria-label="next" ${lp.page >= lp.pages - 1 ? "disabled" : ""}>›</button>`
+                : "");
+    const tooltip = root.querySelector(".mc-tooltip");
+    if (snap.tooltip) {
+        tooltip.innerHTML = tooltipHtml(snap);
+        tooltip.hidden = false;
+        tooltip.style.left = `${snap.tooltip.x}px`;
+        tooltip.style.top = `${snap.tooltip.y}px`;
+        tooltip.classList.toggle("mc-flip-x", snap.tooltip.x > snap.width * 0.7);
+    }
+    else {
+        tooltip.hidden = true;
+    }
+    const menu = root.querySelector(".mc-menu");
+    if (snap.menu) {
+        menu.innerHTML = snap.menu.items
+            .map((it) => `<button type="button" role="menuitem" class="mc-menu-item" ` +
+            `data-id="${escapeXml(it.id)}">${escapeXml(it.label)}</button>`)
+            .join("");
+        menu.hidden = false;
+        // 뷰포트를 넘지 않게 오른쪽/아래 가장자리에서 뒤집는다
+        menu.style.left = `${Math.min(snap.menu.x, snap.width - 140)}px`;
+        menu.style.top = `${Math.min(snap.menu.y, snap.height - 40)}px`;
+    }
+    else {
+        menu.hidden = true;
+    }
+    const reset = root.querySelector(".mc-zoom-reset");
+    if (reset) {
+        reset.disabled = !snap.zoomed;
+        reset.textContent = snap.labels.reset;
+    }
+    const drillup = root.querySelector(".mc-drillup");
+    if (drillup) {
+        drillup.hidden = snap.drillDepth === 0;
+        drillup.textContent = snap.labels.drillUp;
+    }
+    const a11y = root.querySelector(".mc-a11y");
+    a11y.textContent = snap.a11yText;
+}
+// ── 인터랙션 배선 (5개 렌더러 공용) ─────────────────────────
+/**
+ * 포인터·휠·키보드·툴바/범례 이벤트를 코어 액션으로 연결한다.
+ * 어댑터는 루트 요소를 넘겨 한 번만 호출한다 — 반환 함수는 해제용.
+ */
+export function bindChart(root, chart) {
+    const disposers = [];
+    const on = (el, type, fn, opts) => {
+        el.addEventListener(type, fn, opts);
+        disposers.push(() => el.removeEventListener(type, fn, opts));
+    };
+    const overlay = () => root.querySelector(".mc-overlay");
+    const posOf = (e) => {
+        const ov = overlay();
+        if (!ov)
+            return null;
+        const rect = ov.getBoundingClientRect();
+        const snap = chart.getSnapshot();
+        if (!rect.width || !rect.height)
+            return null;
+        return {
+            x: ((e.clientX - rect.left) / rect.width) * snap.plot.w,
+            y: ((e.clientY - rect.top) / rect.height) * snap.plot.h,
+        };
+    };
+    let downX = 0;
+    let downY = 0;
+    // 오버레이 위에서 시작된 pointerdown 여부 — 비직교 타입(지도/파이 등)은
+    // startDrag가 no-op이라 드래그 없이도 클릭으로 해석해야 한다
+    let downOnOverlay = false;
+    // 주석 그리기 드래그 진행 중 — drawMode가 켜지면 줌/선택 대신 주석을 만든다
+    let drawingDown = false;
+    // 핀치 추적 — 오버레이 위 활성 포인터들. 2개면 핀치 줌이 된다
+    const pointers = new Map();
+    let pinchDist = 0;
+    on(root, "pointermove", (e) => {
+        const t = e.target;
+        if (!t?.closest(".mc-overlay")) {
+            if (!chart.isDragging())
+                chart.clearHover();
+            return;
+        }
+        const p = posOf(e);
+        if (p && !chart.isDragging() && !drawingDown && pointers.size < 2)
+            chart.hoverAt(p.x, p.y);
+    });
+    on(root, "pointerleave", () => chart.clearHover());
+    on(root, "pointerdown", (e) => {
+        const t = e.target;
+        if (!t?.closest(".mc-overlay"))
+            return;
+        const p = posOf(e);
+        if (!p)
+            return;
+        pointers.set(e.pointerId, p);
+        if (pointers.size === 2) {
+            // 핀치 시작 — 진행 중 드래그/드로잉은 취소하고 두 손가락 간격을 잰다
+            const pts = [...pointers.values()];
+            pinchDist = Math.hypot(pts[0].x - pts[1].x, pts[0].y - pts[1].y);
+            if (chart.isDragging())
+                chart.endDrag();
+            if (drawingDown) {
+                drawingDown = false;
+                chart.drawCancel();
+            }
+            downOnOverlay = false;
+            return;
+        }
+        if (e.button !== 0)
+            return;
+        downX = p.x;
+        downY = p.y;
+        downOnOverlay = true;
+        if (chart.getDrawMode()) {
+            drawingDown = true;
+            chart.drawStartAt(p.x, p.y);
+            return;
+        }
+        chart.startDrag(p.x, e.shiftKey, p.y);
+    });
+    on(window, "pointermove", (e) => {
+        // 핀치 — 두 포인터 간격 변화율로 중점 앵커 줌 (터치 제스처)
+        if (pointers.size === 2 && pointers.has(e.pointerId)) {
+            const p = posOf(e);
+            if (!p)
+                return;
+            pointers.set(e.pointerId, p);
+            const pts = [...pointers.values()];
+            const dist = Math.hypot(pts[0].x - pts[1].x, pts[0].y - pts[1].y);
+            const mid = { x: (pts[0].x + pts[1].x) / 2, y: (pts[0].y + pts[1].y) / 2 };
+            if (pinchDist > 0 && dist > 0)
+                chart.zoomAt(mid.x, dist / pinchDist, mid.y);
+            pinchDist = dist;
+            return;
+        }
+        if (drawingDown) {
+            const p = posOf(e);
+            if (p)
+                chart.drawMoveTo(p.x, p.y);
+            return;
+        }
+        if (!chart.isDragging())
+            return;
+        const p = posOf(e);
+        if (p)
+            chart.dragTo(p.x, p.y);
+    });
+    on(window, "pointerup", (e) => {
+        pointers.delete(e.pointerId);
+        if (pointers.size < 2)
+            pinchDist = 0;
+        if (drawingDown) {
+            drawingDown = false;
+            const p = posOf(e);
+            // 거의 움직이지 않은 클릭은 주석을 만들지 않는다
+            if (p && Math.abs(p.x - downX) >= 4 || p && Math.abs(p.y - downY) >= 4)
+                chart.drawEndAt();
+            else
+                chart.drawCancel();
+            return;
+        }
+        const wasDown = downOnOverlay;
+        downOnOverlay = false;
+        const p = posOf(e);
+        if (chart.isDragging())
+            chart.endDrag();
+        // 드래그로 안 움직였으면 클릭으로 해석 — 비직교 타입처럼 드래그가
+        // 시작되지 않은 경우도 포함한다
+        if (wasDown && p && Math.abs(p.x - downX) < 4 && Math.abs(p.y - downY) < 4)
+            chart.clickAt(p.x, p.y);
+    });
+    on(window, "pointercancel", (e) => {
+        pointers.delete(e.pointerId);
+        if (pointers.size < 2)
+            pinchDist = 0;
+        if (drawingDown) {
+            drawingDown = false;
+            chart.drawCancel();
+        }
+    });
+    on(root, "dblclick", (e) => {
+        const t = e.target;
+        if (!t?.closest(".mc-overlay"))
+            return;
+        const p = posOf(e);
+        if (p)
+            chart.dblClickAt(p.x, p.y);
+        chart.resetZoom();
+    });
+    on(root, "wheel", (e) => {
+        const t = e.target;
+        if (!t?.closest(".mc-overlay"))
+            return;
+        const p = posOf(e);
+        if (!p)
+            return;
+        e.preventDefault();
+        // 지도는 연속 스텝(휠량 비례), 직교 차트는 고정 스텝
+        const factor = chart.getSnapshot().type === "map"
+            ? Math.exp(-e.deltaY * 0.0022)
+            : e.deltaY > 0
+                ? 0.8
+                : 1.25;
+        chart.zoomAt(p.x, factor, p.y);
+    }, { passive: false });
+    // ── 컨텍스트 메뉴 — 플롯 우클릭으로 .mc-menu를 연다
+    on(root, "contextmenu", (e) => {
+        const t = e.target;
+        if (!t?.closest(".mc-overlay"))
+            return;
+        const p = posOf(e);
+        if (!p)
+            return;
+        e.preventDefault();
+        const snap = chart.getSnapshot();
+        // posOf는 플롯 상대 — 메뉴는 뷰포트 기준 px로 위치한다
+        chart.openMenu(snap.plot.x + p.x, snap.plot.y + p.y);
+    });
+    // ── 네비게이터/스크롤바 — 미니맵·스트립의 창 이동/리사이즈/트랙 점프
+    // 오버레이가 플롯만 덮으므로 SVG px 좌표를 직접 변환해 코어에 전달한다
+    let navDragging = false;
+    const svgXOf = (e) => {
+        const svg = root.querySelector("svg.mc-svg");
+        if (!svg)
+            return null;
+        const rect = svg.getBoundingClientRect();
+        if (!rect.width)
+            return null;
+        return ((e.clientX - rect.left) / rect.width) * chart.getSnapshot().width;
+    };
+    on(root, "pointerdown", (e) => {
+        const t = e.target;
+        const inNav = t?.closest(".mc-navigator");
+        const inSb = !inNav && t?.closest(".mc-scrollbar");
+        if ((!inNav && !inSb) || e.button !== 0)
+            return;
+        const x = svgXOf(e);
+        if (x === null)
+            return;
+        e.preventDefault();
+        const L = inNav ? ".mc-nav-handle-l" : ".mc-sb-handle-l";
+        const R = inNav ? ".mc-nav-handle-r" : ".mc-sb-handle-r";
+        const W = inNav ? ".mc-nav-window" : ".mc-sb-window";
+        if (t.closest(L))
+            chart.navDragStart(x, "l");
+        else if (t.closest(R))
+            chart.navDragStart(x, "r");
+        else if (t.closest(W))
+            chart.navDragStart(x, "c");
+        else {
+            // 배경/트랙 클릭 — 창 중심을 그 위치로 점프 후 이동 드래그 진입
+            chart.navJump(x);
+            chart.navDragStart(x, "c");
+        }
+        navDragging = true;
+    });
+    on(window, "pointermove", (e) => {
+        if (!navDragging)
+            return;
+        const x = svgXOf(e);
+        if (x !== null)
+            chart.navDragTo(x);
+    });
+    on(window, "pointerup", () => {
+        if (!navDragging)
+            return;
+        navDragging = false;
+        chart.navDragEnd();
+    });
+    // 인쇄 이벤트 전달 — IBChart의 beforePrint/afterPrint 해당
+    on(window, "beforeprint", () => chart.emitPrint("before"));
+    on(window, "afterprint", () => chart.emitPrint("after"));
+    // 범례 hover → 다른 시리즈 강조(dim)
+    on(root, "pointerover", (e) => {
+        const t = e.target;
+        const item = t?.closest(".mc-legend-item");
+        chart.hoverLegend(item?.dataset.id ?? null);
+    });
+    on(root, "pointerout", (e) => {
+        const t = e.target;
+        if (t?.closest(".mc-legend-item"))
+            chart.hoverLegend(null);
+    });
+    // 툴바 + 범례 + 컨텍스트 메뉴 위임 클릭
+    on(root, "click", (e) => {
+        const t = e.target;
+        // 메뉴 항목 — 내장 export는 렌더러가 직접 처리한다
+        const menuItem = t?.closest(".mc-menu-item");
+        if (menuItem?.dataset.id) {
+            const id = menuItem.dataset.id;
+            if (id === "export-svg") {
+                downloadSVG(chart);
+                chart.closeMenu();
+            }
+            else if (id === "export-png") {
+                void downloadPNG(chart);
+                chart.closeMenu();
+            }
+            else
+                chart.activateMenuItem(id);
+            return;
+        }
+        // 메뉴 바깥 클릭 — 열린 메뉴를 닫는다
+        if (!t?.closest(".mc-menu"))
+            chart.closeMenu();
+        // 범례 페이지네이션 네비
+        if (t?.closest(".mc-legend-prev")) {
+            chart.setLegendPage(chart.getLegendPage() - 1);
+            return;
+        }
+        if (t?.closest(".mc-legend-next")) {
+            chart.setLegendPage(chart.getLegendPage() + 1);
+            return;
+        }
+        const legendItem = t?.closest(".mc-legend-item");
+        if (legendItem?.dataset.id) {
+            // 체크박스 클릭은 legendCheck 경로 — 이벤트가 다르다
+            if (t?.closest(".mc-legend-check"))
+                chart.legendCheck(legendItem.dataset.id);
+            else
+                chart.toggleLegend(legendItem.dataset.id);
+            return;
+        }
+        if (t?.closest(".mc-export-svg"))
+            downloadSVG(chart);
+        else if (t?.closest(".mc-export-png"))
+            void downloadPNG(chart);
+        else if (t?.closest(".mc-zoom-reset"))
+            chart.resetZoom();
+        else if (t?.closest(".mc-drillup"))
+            chart.drillUp();
+    });
+    // 키보드 포인트 내비 — IME 조합 중에는 가로채지 않는다
+    on(root, "keydown", (e) => {
+        if (e.isComposing)
+            return;
+        const map = {
+            ArrowLeft: "left",
+            ArrowRight: "right",
+            ArrowUp: "up",
+            ArrowDown: "down",
+        };
+        const dir = map[e.key];
+        if (dir) {
+            e.preventDefault();
+            chart.moveFocus(dir);
+        }
+        else if (e.key === "Home") {
+            e.preventDefault();
+            chart.clearFocus();
+            chart.moveFocus("left");
+        }
+        else if (e.key === "End") {
+            e.preventDefault();
+            for (let i = 0; i < 512; i++)
+                chart.moveFocus("right");
+        }
+        else if (e.key === "Escape") {
+            chart.escape();
+        }
+        else if (e.key === "Enter" || e.key === " ") {
+            const snap = chart.getSnapshot();
+            const f = snap.focused;
+            if (f) {
+                e.preventDefault();
+                // 포커스된 요소의 svg 좌표 → 플롯 상대 좌표로 clickAt
+                const pt = snap.geometry
+                    .flatMap((g) => {
+                    if (g.kind === "pie" ||
+                        g.kind === "funnel" ||
+                        g.kind === "cone-funnel" ||
+                        g.kind === "pyramid")
+                        return g.slices.map((s) => ({
+                            seriesId: g.seriesId,
+                            index: s.index,
+                            x: s.mx,
+                            y: s.my,
+                        }));
+                    if (g.kind === "heatmap")
+                        return g.cells.map((c) => ({
+                            seriesId: c.seriesId,
+                            index: c.index,
+                            x: c.x + c.w / 2,
+                            y: c.y + c.h / 2,
+                        }));
+                    if (g.kind === "bar")
+                        return g.bars.map((b) => ({
+                            seriesId: b.seriesId,
+                            index: b.index,
+                            x: g.horizontal ? b.x + b.w : b.x + b.w / 2,
+                            y: g.horizontal ? b.y + b.h / 2 : b.y,
+                        }));
+                    if (g.kind === "wordcloud")
+                        return g.words.map((w) => ({
+                            seriesId: g.seriesId,
+                            index: w.index,
+                            x: w.x,
+                            y: w.y,
+                        }));
+                    if (g.kind === "range-bar")
+                        return g.bars.map((b) => ({
+                            seriesId: b.seriesId,
+                            index: b.index,
+                            x: g.horizontal ? b.x + b.w : b.x + b.w / 2,
+                            y: g.horizontal ? b.y + b.h / 2 : b.y,
+                        }));
+                    if (g.kind === "candlestick" || g.kind === "ohlc")
+                        return g.candles.map((c) => ({
+                            seriesId: c.seriesId,
+                            index: c.index,
+                            x: c.cx,
+                            y: c.highY,
+                        }));
+                    if (g.kind === "boxplot")
+                        return g.boxes.map((b) => ({
+                            seriesId: b.seriesId,
+                            index: b.index,
+                            x: b.cx,
+                            y: b.medY,
+                        }));
+                    if (g.kind === "map")
+                        return [
+                            ...g.regions
+                                .filter((r) => r.index >= 0)
+                                .map((r) => ({
+                                seriesId: g.seriesId,
+                                index: r.index,
+                                x: r.cx,
+                                y: r.cy,
+                            })),
+                            ...g.markers.map((m) => ({
+                                seriesId: g.seriesId,
+                                index: -1 - m.index,
+                                x: m.x,
+                                y: m.y,
+                            })),
+                        ];
+                    if (g.kind === "sunburst")
+                        return g.nodes.map((n) => ({
+                            seriesId: g.seriesId,
+                            index: n.index,
+                            x: n.cx,
+                            y: n.cy,
+                        }));
+                    if (g.kind === "organization")
+                        return g.nodes.map((n) => ({
+                            seriesId: g.seriesId,
+                            index: n.index,
+                            x: n.cx,
+                            y: n.cy,
+                        }));
+                    if (g.kind === "treemap")
+                        return g.nodes.map((n) => ({
+                            seriesId: g.seriesId,
+                            index: n.index,
+                            x: n.x + n.w / 2,
+                            y: n.y + n.h / 2,
+                        }));
+                    if (g.kind === "sankey")
+                        return g.nodes.map((n) => ({
+                            seriesId: g.seriesId,
+                            index: n.index,
+                            x: n.x + n.w / 2,
+                            y: n.y + n.h / 2,
+                        }));
+                    if (g.kind === "chord")
+                        return g.groups.map((gr) => ({
+                            seriesId: g.seriesId,
+                            index: gr.index,
+                            x: g.cx + ((g.r + g.ri) / 2) * Math.sin((gr.a0 + gr.a1) / 2),
+                            y: g.cy - ((g.r + g.ri) / 2) * Math.cos((gr.a0 + gr.a1) / 2),
+                        }));
+                    if (g.kind === "nightingale" ||
+                        g.kind === "radial-bar" ||
+                        g.kind === "radial-column")
+                        return g.sectors.map((s) => ({
+                            seriesId: g.seriesId,
+                            index: s.index,
+                            x: s.cx,
+                            y: s.cy,
+                        }));
+                    if (g.kind === "gauge")
+                        return [
+                            {
+                                seriesId: g.seriesId,
+                                index: 0,
+                                x: g.gauge.cx,
+                                y: g.gauge.cy,
+                            },
+                        ];
+                    if (g.kind === "linear-gauge")
+                        return [
+                            {
+                                seriesId: g.seriesId,
+                                index: 0,
+                                x: g.gauge.bar.x + g.gauge.bar.w,
+                                y: g.gauge.bar.y,
+                            },
+                        ];
+                    return "points" in g ? g.points : [];
+                })
+                    .find((t) => t.seriesId === f.seriesId && t.index === f.index);
+                if (pt)
+                    chart.clickAt(pt.x - snap.plot.x, pt.y - snap.plot.y);
+            }
+        }
+    });
+    return () => {
+        for (const d of disposers)
+            d();
+    };
+}
+/** ResizeObserver 배선 — 없는 환경(SSR/happy-dom)에서는 no-op */
+export function observeSize(el, cb) {
+    if (typeof ResizeObserver === "undefined")
+        return () => { };
+    const ro = new ResizeObserver((entries) => {
+        const r = entries[0]?.contentRect;
+        if (r)
+            cb(r.width, r.height);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+}
+// ── 보내기 ──────────────────────────────────────────────────
+function download(href, filename) {
+    const a = document.createElement("a");
+    a.href = href;
+    a.download = filename;
+    a.click();
+}
+/** 현재 스냅샷을 SVG 파일로 저장한다 */
+export function downloadSVG(chart, filename = "chart.svg") {
+    const markup = chart.toSVGString();
+    const blob = new Blob([markup], { type: "image/svg+xml" });
+    const url = URL.createObjectURL(blob);
+    download(url, filename);
+    URL.revokeObjectURL(url);
+}
+/** SVG 문자열 → PNG data URL (2배 해상도) */
+export async function downloadPNG(chart, filename = "chart.png") {
+    const snap = chart.getSnapshot();
+    const markup = chart.toSVGString();
+    const url = URL.createObjectURL(new Blob([markup], { type: "image/svg+xml" }));
+    try {
+        const img = await new Promise((res, rej) => {
+            const i = new Image();
+            i.onload = () => res(i);
+            i.onerror = rej;
+            i.src = url;
+        });
+        const canvas = document.createElement("canvas");
+        canvas.width = snap.width * 2;
+        canvas.height = snap.height * 2;
+        const ctx = canvas.getContext("2d");
+        ctx.scale(2, 2);
+        ctx.drawImage(img, 0, 0);
+        download(canvas.toDataURL("image/png"), filename);
+    }
+    finally {
+        URL.revokeObjectURL(url);
+    }
+}
+/**
+ * el 안에 차트 DOM을 만들고 코어를 연결한다 — 5개 어댑터가 공유하는
+ * 렌더 경로. 어댑터는 자기 생명주기 훅에서 이 함수를 1회 호출하고
+ * 반환된 cleanup을 unmount 시 실행한다.
+ *
+ * DOM 계약:
+ *   .mc-root[role=figure][tabindex=0][data-theme][data-chart-type]
+ *   .mc-toolbar > .mc-zoom-reset / .mc-export-svg / .mc-export-png
+ *   .mc-viewport > svg.mc-svg(.mc-grid/.mc-axis/.mc-plot/.mc-series/...)
+ *                + .mc-overlay + .mc-tooltip
+ *   .mc-legend > .mc-legend-item[data-id]
+ *   .mc-a11y[aria-live=polite]
+ * 새 DOM 요소를 추가할 때는 같은 mc- 접두어와 conformance 계약을 갱신한다.
+ */
+export function attachChartView(el, chart) {
+    el.innerHTML = skeletonHtml();
+    const root = el.firstElementChild;
+    const render = () => renderInto(root, chart.getSnapshot());
+    const unsubscribe = chart.subscribe(render);
+    render();
+    const unbind = bindChart(root, chart);
+    const unobs = chart.isResponsive()
+        ? observeSize(el, (w) => chart.setSize(w))
+        : () => { };
+    chart.emitReady();
+    return () => {
+        unbind();
+        unobs();
+        unsubscribe();
+        el.textContent = "";
+    };
+}
+/**
+ * DOM 전용 렌더러 (vanilla) — 코어 생성 + attachChartView.
+ * 어댑터들과 같은 DOM 계약을 만든다.
+ */
+export function mountChart(host, options) {
+    const chart = new ChartCore(options);
+    const root = document.createElement("div");
+    root.className = "mc-host";
+    host.appendChild(root);
+    const detach = attachChartView(root, chart);
+    return {
+        chart,
+        rootEl: root.firstElementChild,
+        destroy() {
+            detach();
+            root.remove();
+        },
+    };
+}
+/**
+ * sparkline — 축/범례 없는 인라인 미니 차트 (AG Charts sparklines 해당).
+ * ChartCore 없이 el에 SVG를 바로 마운트한다. 값 갱신은 반환된 update로.
+ */
+export function mountSparkline(host, opts) {
+    host.innerHTML = sparklineMarkup(opts);
+    return {
+        update(next) {
+            host.innerHTML = sparklineMarkup(next);
+        },
+    };
+}
+//# sourceMappingURL=mount.js.map