chartai 0.1.0 → 1.1.0

package/dist/plugins/legend.js

@@ -0,0 +1,353 @@
+import {
+  DEFAULT_FONT,
+  DEFAULT_LABEL_SIZE
+} from "../chunk-1ngxm8t2.js";
+import"../chunk-831dem4f.js";
+import {
+  ChartManager
+} from "../chunk-n8ew0z0e.js";
+import"../chunk-93yrr7er.js";
+import"../chunk-5gtx3pza.js";
+
+// src/plugins/legend.ts
+var ICON_SIZE = 28;
+var PANEL_MAX_WIDTH = 220;
+var PANEL_MIN_WIDTH = 100;
+var DEFAULT_MAX_LABEL_CHARS = 24;
+var states = new WeakMap;
+function getLegendConfig(chart) {
+  return chart.config.legend ?? {};
+}
+function getLegendStyles(chart) {
+  const dark = ChartManager.isDark;
+  const bgc = chart.config.bgColor ?? (dark ? [0.11, 0.11, 0.12] : [0.98, 0.98, 0.98]);
+  const rgb = `${Math.round(bgc[0] * 255)},${Math.round(bgc[1] * 255)},${Math.round(bgc[2] * 255)}`;
+  const border = dark ? "rgba(255,255,255,0.18)" : "rgba(0,0,0,0.14)";
+  const panelBg = dark ? `rgba(${rgb},0.95)` : "rgba(255,255,255,0.98)";
+  const closeBg = dark ? "rgba(0,0,0,0.35)" : "rgba(255,255,255,0.98)";
+  return {
+    panelBg,
+    panelBorder: border,
+    closeBg,
+    closeBgSolid: dark ? "rgba(0.2,0.2,0.22,0.98)" : "rgba(255,255,255,0.98)",
+    text: getLegendConfig(chart).textColor ?? chart.config.textColor ?? (dark ? "#c0c0c0" : "#333333"),
+    textMuted: dark ? "#888" : "#999",
+    font: getLegendConfig(chart).fontFamily ?? chart.config.fontFamily ?? DEFAULT_FONT,
+    labelSize: getLegendConfig(chart).labelSize ?? chart.config.labelSize ?? DEFAULT_LABEL_SIZE
+  };
+}
+var CLOSE_BTN_SIZE = Math.round(ICON_SIZE * 0.8);
+var PANEL_MAX_HEIGHT = 180;
+var LEGEND_HTML = `
+<div class="chart-legend-overlay" style="position:absolute;inset:0;pointer-events:none;z-index:20">
+  <div class="chart-legend-container" style="position:absolute;top:4px;right:4px;width:${ICON_SIZE}px;height:${ICON_SIZE}px;overflow:hidden;border-radius:50%;pointer-events:auto;transition:width .2s ease,height .2s ease,border-radius .2s ease">
+    <button type="button" class="chart-legend-icon" title="Legend" style="position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;border:none;border-radius:inherit;cursor:pointer;flex-shrink:0;transition:transform .18s ease,opacity .2s ease"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/></svg></button>
+    <div class="chart-legend-panel" style="position:absolute;inset:0;display:none;flex-direction:column;overflow:hidden;border-radius:inherit">
+      <div class="chart-legend-scroll" style="flex:1;min-width:0;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:10px 12px">
+        <div class="chart-legend-list" style="display:flex;flex-direction:column;gap:4px"></div>
+      </div>
+    </div>
+  </div>
+  <button type="button" class="chart-legend-close" title="Close" style="position:absolute;top:-${CLOSE_BTN_SIZE / 2}px;right:-${CLOSE_BTN_SIZE / 2}px;width:${CLOSE_BTN_SIZE}px;height:${CLOSE_BTN_SIZE}px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:none;cursor:pointer;padding:0;pointer-events:none;opacity:0;visibility:hidden;transition:transform .12s ease,opacity .18s ease .1s;z-index:21;transform:translate(-50%,50%);"><svg viewBox="0 0 24 24" width="10" height="10" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18"/><path d="M6 6l12 12"/></svg></button>
+</div>`;
+var legendPlugin = {
+  name: "legend",
+  install(chart, el) {
+    const ac = new AbortController;
+    const wrap = document.createElement("div");
+    wrap.innerHTML = LEGEND_HTML.trim();
+    const overlay = wrap.firstElementChild;
+    const container = overlay.querySelector(".chart-legend-container");
+    const iconBtn = container.querySelector(".chart-legend-icon");
+    const panel = container.querySelector(".chart-legend-panel");
+    const scrollArea = container.querySelector(".chart-legend-scroll");
+    const list = scrollArea.querySelector(".chart-legend-list");
+    const closeBtn = overlay.querySelector(".chart-legend-close");
+    el.appendChild(overlay);
+    iconBtn.addEventListener("mouseenter", () => {
+      iconBtn.style.transform = "scale(1.08)";
+    });
+    iconBtn.addEventListener("mouseleave", () => {
+      iconBtn.style.transform = "scale(1)";
+    });
+    const closeBase = "translate(-50%, 50%)";
+    closeBtn.addEventListener("mouseenter", () => {
+      closeBtn.style.transform = `${closeBase} scale(1.1)`;
+    });
+    closeBtn.addEventListener("mouseleave", () => {
+      closeBtn.style.transform = closeBase;
+    });
+    scrollArea.addEventListener("wheel", (e) => e.stopPropagation(), {
+      passive: false,
+      signal: ac.signal
+    });
+    list.addEventListener("pointerdown", (e) => {
+      const row = e.target.closest(".chart-legend-row");
+      if (!row)
+        return;
+      e.stopPropagation();
+      e.preventDefault();
+      const idx = Number(row.dataset.series);
+      if (isNaN(idx))
+        return;
+      const current = new Set(chart.config.hiddenSeries ?? []);
+      if (current.has(idx))
+        current.delete(idx);
+      else
+        current.add(idx);
+      const isNowHidden = current.has(idx);
+      const ser = chart.series[idx];
+      if (ser) {
+        const col = `rgb(${ser.color.r * 100}% ${ser.color.g * 100}% ${ser.color.b * 100}%)`;
+        const swatch = row.querySelector(".chart-legend-swatch");
+        const labelEl = row.querySelector(".chart-legend-label");
+        swatch.style.background = isNowHidden ? "transparent" : col;
+        swatch.style.border = isNowHidden ? `1.5px solid ${col}` : "";
+        labelEl.style.opacity = isNowHidden ? "0.4" : "";
+        swatch.classList.remove("chart-legend-swatch--bounce");
+        labelEl.classList.remove("chart-legend-label--bounce");
+        swatch.offsetWidth;
+        swatch.classList.add("chart-legend-swatch--bounce");
+        labelEl.classList.add("chart-legend-label--bounce");
+      }
+      ChartManager.setHiddenSeries(chart.id, [...current]);
+    }, { capture: true, signal: ac.signal });
+    const cfg = getLegendConfig(chart);
+    const alwaysOpen = cfg.alwaysOpen ?? false;
+    const defaultOpen = cfg.defaultOpen ?? false;
+    const s = {
+      overlay,
+      container,
+      iconBtn,
+      panel,
+      closeBtn,
+      scrollArea,
+      list,
+      open: alwaysOpen || defaultOpen,
+      abort: ac,
+      lastSeriesKey: "",
+      computedWidth: PANEL_MAX_WIDTH
+    };
+    states.set(chart, s);
+    if (!alwaysOpen) {
+      const toggle = () => {
+        s.open = !s.open;
+        applyOpenState(chart);
+      };
+      iconBtn.addEventListener("pointerdown", (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        toggle();
+      }, { capture: true, signal: ac.signal });
+      closeBtn.addEventListener("pointerdown", (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        s.open = false;
+        applyOpenState(chart);
+      }, { capture: true, signal: ac.signal });
+    }
+    applyStyles(chart);
+    syncSeries(chart);
+    applyOpenState(chart);
+  },
+  afterDraw(_, chart) {
+    applyStyles(chart);
+    syncSeries(chart);
+  },
+  uninstall(chart) {
+    const s = states.get(chart);
+    if (s) {
+      s.abort.abort();
+      s.overlay.remove();
+      states.delete(chart);
+    }
+  }
+};
+function applyStyles(chart) {
+  const s = states.get(chart);
+  if (!s)
+    return;
+  const styles = getLegendStyles(chart);
+  const border = `1px solid ${styles.panelBorder}`;
+  s.container.style.background = styles.panelBg;
+  s.container.style.border = border;
+  s.container.style.fontFamily = styles.font;
+  s.container.style.fontSize = `${styles.labelSize}px`;
+  s.container.style.color = styles.text;
+  s.iconBtn.style.background = styles.closeBg;
+  s.iconBtn.style.border = "none";
+  s.iconBtn.style.boxShadow = "none";
+  s.iconBtn.style.color = styles.text;
+  s.panel.style.background = styles.panelBg;
+  s.panel.style.fontFamily = styles.font;
+  s.panel.style.fontSize = `${styles.labelSize}px`;
+  s.panel.style.color = styles.text;
+  s.closeBtn.style.background = styles.closeBgSolid;
+  s.closeBtn.style.border = border;
+  s.closeBtn.style.boxShadow = "none";
+  s.closeBtn.style.color = styles.text;
+}
+function seriesKey(chart) {
+  return chart.series.map((s, i) => `${i}:${s.label}`).join("|");
+}
+function measureTextWidth(text, font, fontSize) {
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  if (!ctx)
+    return 0;
+  ctx.font = `${fontSize}px ${font}`;
+  return ctx.measureText(text).width;
+}
+function computePanelWidth(chart, labels) {
+  const styles = getLegendStyles(chart);
+  const font = styles.font;
+  const fontSize = styles.labelSize;
+  const maxChars = getLegendConfig(chart).maxLabelChars ?? DEFAULT_MAX_LABEL_CHARS;
+  let maxW = 0;
+  for (const label of labels) {
+    const truncated = label.length > maxChars ? label.slice(0, maxChars - 1) + "…" : label;
+    const w = measureTextWidth(truncated, font, fontSize);
+    if (w > maxW)
+      maxW = w;
+  }
+  const swatchGap = 18;
+  const padding = 44;
+  const target = Math.ceil(maxW) + swatchGap + padding;
+  return Math.min(Math.max(target, PANEL_MIN_WIDTH), PANEL_MAX_WIDTH);
+}
+function syncSeries(chart) {
+  const s = states.get(chart);
+  if (!s)
+    return;
+  const key = seriesKey(chart);
+  if (key === s.lastSeriesKey) {
+    applyHiddenState(chart, s);
+    return;
+  }
+  s.lastSeriesKey = key;
+  rebuildRows(chart, s);
+}
+function rebuildRows(chart, s) {
+  const series = chart.series;
+  const maxChars = getLegendConfig(chart).maxLabelChars ?? DEFAULT_MAX_LABEL_CHARS;
+  const labels = series.map((ser, i) => ser.label || `Series ${i + 1}`);
+  s.computedWidth = computePanelWidth(chart, labels);
+  const hidden = chart.config.hiddenSeries ?? new Set;
+  const rowBase = "display:flex;align-items:center;gap:8px;min-width:0;padding-right:8px;cursor:pointer;user-select:none";
+  const rowAnim = ";opacity:0;transform:translateY(6px);animation:chart-legend-row-in .25s cubic-bezier(.34,1.2,.64,1) forwards";
+  const swatchBase = "width:10px;height:10px;border-radius:2px;flex-shrink:0;box-sizing:border-box";
+  const labelBase = "min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:opacity .15s ease";
+  s.list.innerHTML = series.map((ser, i) => {
+    const col = `rgb(${ser.color.r * 100}% ${ser.color.g * 100}% ${ser.color.b * 100}%)`;
+    let label = ser.label || `Series ${i + 1}`;
+    if (label.length > maxChars)
+      label = label.slice(0, maxChars - 1) + "…";
+    const animDelay = Math.min(0.02 + i * 0.02, 0.02 + 7 * 0.02);
+    const isHidden = hidden.has(i);
+    const swatchStyle = isHidden ? `${swatchBase};background:transparent;border:1.5px solid ${col}` : `${swatchBase};background:${col}`;
+    const labelOpacity = isHidden ? "opacity:0.4;" : "";
+    return `<div class="chart-legend-row" data-series="${i}" style="${rowBase}${rowAnim};animation-delay:${animDelay}s"><span class="chart-legend-swatch" style="${swatchStyle}"></span><span class="chart-legend-label" style="${labelOpacity}${labelBase}">${escapeHtml(label)}</span></div>`;
+  }).join("");
+  if (s.open) {
+    const packedH = s.list.scrollHeight + 20;
+    s.container.style.width = `${s.computedWidth}px`;
+    s.container.style.height = `${Math.min(PANEL_MAX_HEIGHT, packedH)}px`;
+  }
+}
+function applyHiddenState(chart, s) {
+  const hidden = chart.config.hiddenSeries ?? new Set;
+  s.list.querySelectorAll(".chart-legend-row").forEach((row) => {
+    const i = Number(row.dataset.series);
+    if (isNaN(i))
+      return;
+    const ser = chart.series[i];
+    if (!ser)
+      return;
+    const col = `rgb(${ser.color.r * 100}% ${ser.color.g * 100}% ${ser.color.b * 100}%)`;
+    const isHidden = hidden.has(i);
+    const swatch = row.querySelector(".chart-legend-swatch");
+    const labelEl = row.querySelector(".chart-legend-label");
+    swatch.style.background = isHidden ? "transparent" : col;
+    swatch.style.border = isHidden ? `1.5px solid ${col}` : "";
+    labelEl.style.opacity = isHidden ? "0.4" : "";
+  });
+}
+function escapeHtml(s) {
+  const div = document.createElement("div");
+  div.textContent = s;
+  return div.innerHTML;
+}
+function applyOpenState(chart) {
+  const s = states.get(chart);
+  if (!s)
+    return;
+  const alwaysOpen = getLegendConfig(chart).alwaysOpen ?? false;
+  const open = alwaysOpen || s.open;
+  s.container.style.width = open ? `${s.computedWidth}px` : `${ICON_SIZE}px`;
+  s.container.style.height = `${ICON_SIZE}px`;
+  s.container.style.borderRadius = open ? "8px" : "50%";
+  s.container.style.overflow = "hidden";
+  s.iconBtn.style.opacity = alwaysOpen ? "0" : open ? "0" : "1";
+  s.iconBtn.style.pointerEvents = alwaysOpen ? "none" : open ? "none" : "auto";
+  s.iconBtn.style.visibility = alwaysOpen ? "hidden" : "visible";
+  s.panel.style.display = open ? "flex" : "none";
+  s.closeBtn.style.opacity = alwaysOpen ? "0" : open ? "0" : "0";
+  s.closeBtn.style.pointerEvents = alwaysOpen ? "none" : open ? "auto" : "none";
+  s.closeBtn.style.visibility = alwaysOpen ? "hidden" : open ? "visible" : "hidden";
+  s.scrollArea.style.overflowY = "hidden";
+  if (open) {
+    const packedH = s.list.scrollHeight + 20;
+    s.container.style.height = `${Math.min(PANEL_MAX_HEIGHT, packedH)}px`;
+    const onHeightDone = (e) => {
+      if (e.propertyName !== "height")
+        return;
+      s.container.removeEventListener("transitionend", onHeightDone);
+      s.scrollArea.style.overflowY = "auto";
+    };
+    s.container.addEventListener("transitionend", onHeightDone);
+    if (!alwaysOpen) {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          s.closeBtn.style.opacity = "1";
+        });
+      });
+    }
+  }
+}
+function injectLegendKeyframes() {
+  if (document.getElementById("chart-legend-keyframes"))
+    return;
+  const style = document.createElement("style");
+  style.id = "chart-legend-keyframes";
+  style.textContent = `
+    @keyframes chart-legend-row-in {
+      from { opacity: 0; transform: translateY(6px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    @keyframes chart-legend-swatch-bounce {
+      0%   { transform: scale(1); }
+      30%  { transform: scale(1.5); }
+      60%  { transform: scale(0.82); }
+      80%  { transform: scale(1.12); }
+      100% { transform: scale(1); }
+    }
+    .chart-legend-swatch--bounce { animation: chart-legend-swatch-bounce 0.28s ease-out; }
+    @keyframes chart-legend-label-bounce {
+      0%   { transform: scale(1); }
+      30%  { transform: scale(1.05); }
+      60%  { transform: scale(0.97); }
+      80%  { transform: scale(1.02); }
+      100% { transform: scale(1); }
+    }
+    .chart-legend-label--bounce { animation: chart-legend-label-bounce 0.28s ease-out; }
+    .chart-legend-scroll::-webkit-scrollbar { width: 6px; }
+    .chart-legend-scroll::-webkit-scrollbar-track { background: transparent; }
+    .chart-legend-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 3px; }
+    .chart-legend-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }
+  `;
+  document.head.appendChild(style);
+}
+injectLegendKeyframes();
+export {
+  legendPlugin
+};

package/dist/plugins/legend.min.js

@@ -0,0 +1,37 @@
+import{l as b,m as S}from"../chunk-cvtt04m6.js";import"../chunk-0eh4rzy9.js";import{q as C}from"../chunk-50bcv2hw.js";import"../chunk-wdfq2fpx.js";import"../chunk-bbyt23tw.js";var m=28,L=220,w=100,_=24,k=new WeakMap;function M(J){return J.config.legend??{}}function E(J){let q=C.isDark,Q=J.config.bgColor??(q?[0.11,0.11,0.12]:[0.98,0.98,0.98]),V=`${Math.round(Q[0]*255)},${Math.round(Q[1]*255)},${Math.round(Q[2]*255)}`,Y=q?"rgba(255,255,255,0.18)":"rgba(0,0,0,0.14)";return{panelBg:q?`rgba(${V},0.95)`:"rgba(255,255,255,0.98)",panelBorder:Y,closeBg:q?"rgba(0,0,0,0.35)":"rgba(255,255,255,0.98)",closeBgSolid:q?"rgba(0.2,0.2,0.22,0.98)":"rgba(255,255,255,0.98)",text:M(J).textColor??J.config.textColor??(q?"#c0c0c0":"#333333"),textMuted:q?"#888":"#999",font:M(J).fontFamily??J.config.fontFamily??b,labelSize:M(J).labelSize??J.config.labelSize??S}}var f=Math.round(m*0.8),g=180,p=`
+<div class="chart-legend-overlay" style="position:absolute;inset:0;pointer-events:none;z-index:20">
+  <div class="chart-legend-container" style="position:absolute;top:4px;right:4px;width:${m}px;height:${m}px;overflow:hidden;border-radius:50%;pointer-events:auto;transition:width .2s ease,height .2s ease,border-radius .2s ease">
+    <button type="button" class="chart-legend-icon" title="Legend" style="position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;border:none;border-radius:inherit;cursor:pointer;flex-shrink:0;transition:transform .18s ease,opacity .2s ease"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/></svg></button>
+    <div class="chart-legend-panel" style="position:absolute;inset:0;display:none;flex-direction:column;overflow:hidden;border-radius:inherit">
+      <div class="chart-legend-scroll" style="flex:1;min-width:0;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:10px 12px">
+        <div class="chart-legend-list" style="display:flex;flex-direction:column;gap:4px"></div>
+      </div>
+    </div>
+  </div>
+  <button type="button" class="chart-legend-close" title="Close" style="position:absolute;top:-${f/2}px;right:-${f/2}px;width:${f}px;height:${f}px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:none;cursor:pointer;padding:0;pointer-events:none;opacity:0;visibility:hidden;transition:transform .12s ease,opacity .18s ease .1s;z-index:21;transform:translate(-50%,50%);"><svg viewBox="0 0 24 24" width="10" height="10" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18"/><path d="M6 6l12 12"/></svg></button>
+</div>`,t={name:"legend",install(J,q){let Q=new AbortController,V=document.createElement("div");V.innerHTML=p.trim();let Y=V.firstElementChild,j=Y.querySelector(".chart-legend-container"),K=j.querySelector(".chart-legend-icon"),U=j.querySelector(".chart-legend-panel"),z=j.querySelector(".chart-legend-scroll"),P=z.querySelector(".chart-legend-list"),$=Y.querySelector(".chart-legend-close");q.appendChild(Y),K.addEventListener("mouseenter",()=>{K.style.transform="scale(1.08)"}),K.addEventListener("mouseleave",()=>{K.style.transform="scale(1)"});let R="translate(-50%, 50%)";$.addEventListener("mouseenter",()=>{$.style.transform=`${R} scale(1.1)`}),$.addEventListener("mouseleave",()=>{$.style.transform=R}),z.addEventListener("wheel",(F)=>F.stopPropagation(),{passive:!1,signal:Q.signal}),P.addEventListener("pointerdown",(F)=>{let G=F.target.closest(".chart-legend-row");if(!G)return;F.stopPropagation(),F.preventDefault();let Z=Number(G.dataset.series);if(isNaN(Z))return;let u=new Set(J.config.hiddenSeries??[]);if(u.has(Z))u.delete(Z);else u.add(Z);let N=u.has(Z),T=J.series[Z];if(T){let O=`rgb(${T.color.r*100}% ${T.color.g*100}% ${T.color.b*100}%)`,D=G.querySelector(".chart-legend-swatch"),I=G.querySelector(".chart-legend-label");D.style.background=N?"transparent":O,D.style.border=N?`1.5px solid ${O}`:"",I.style.opacity=N?"0.4":"",D.classList.remove("chart-legend-swatch--bounce"),I.classList.remove("chart-legend-label--bounce"),D.offsetWidth,D.classList.add("chart-legend-swatch--bounce"),I.classList.add("chart-legend-label--bounce")}C.setHiddenSeries(J.id,[...u])},{capture:!0,signal:Q.signal});let X=M(J),v=X.alwaysOpen??!1,x=X.defaultOpen??!1,W={overlay:Y,container:j,iconBtn:K,panel:U,closeBtn:$,scrollArea:z,list:P,open:v||x,abort:Q,lastSeriesKey:"",computedWidth:L};if(k.set(J,W),!v){let F=()=>{W.open=!W.open,A(J)};K.addEventListener("pointerdown",(G)=>{G.stopPropagation(),G.preventDefault(),F()},{capture:!0,signal:Q.signal}),$.addEventListener("pointerdown",(G)=>{G.stopPropagation(),G.preventDefault(),W.open=!1,A(J)},{capture:!0,signal:Q.signal})}B(J),H(J),A(J)},afterDraw(J,q){B(q),H(q)},uninstall(J){let q=k.get(J);if(q)q.abort.abort(),q.overlay.remove(),k.delete(J)}};function B(J){let q=k.get(J);if(!q)return;let Q=E(J),V=`1px solid ${Q.panelBorder}`;q.container.style.background=Q.panelBg,q.container.style.border=V,q.container.style.fontFamily=Q.font,q.container.style.fontSize=`${Q.labelSize}px`,q.container.style.color=Q.text,q.iconBtn.style.background=Q.closeBg,q.iconBtn.style.border="none",q.iconBtn.style.boxShadow="none",q.iconBtn.style.color=Q.text,q.panel.style.background=Q.panelBg,q.panel.style.fontFamily=Q.font,q.panel.style.fontSize=`${Q.labelSize}px`,q.panel.style.color=Q.text,q.closeBtn.style.background=Q.closeBgSolid,q.closeBtn.style.border=V,q.closeBtn.style.boxShadow="none",q.closeBtn.style.color=Q.text}function y(J){return J.series.map((q,Q)=>`${Q}:${q.label}`).join("|")}function d(J,q,Q){let Y=document.createElement("canvas").getContext("2d");if(!Y)return 0;return Y.font=`${Q}px ${q}`,Y.measureText(J).width}function i(J,q){let Q=E(J),V=Q.font,Y=Q.labelSize,j=M(J).maxLabelChars??_,K=0;for(let $ of q){let R=$.length>j?$.slice(0,j-1)+"…":$,X=d(R,V,Y);if(X>K)K=X}let U=18,z=44,P=Math.ceil(K)+U+z;return Math.min(Math.max(P,w),L)}function H(J){let q=k.get(J);if(!q)return;let Q=y(J);if(Q===q.lastSeriesKey){h(J,q);return}q.lastSeriesKey=Q,o(J,q)}function o(J,q){let Q=J.series,V=M(J).maxLabelChars??_,Y=Q.map(($,R)=>$.label||`Series ${R+1}`);q.computedWidth=i(J,Y);let j=J.config.hiddenSeries??new Set,K="display:flex;align-items:center;gap:8px;min-width:0;padding-right:8px;cursor:pointer;user-select:none",U=";opacity:0;transform:translateY(6px);animation:chart-legend-row-in .25s cubic-bezier(.34,1.2,.64,1) forwards",z="width:10px;height:10px;border-radius:2px;flex-shrink:0;box-sizing:border-box",P="min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:opacity .15s ease";if(q.list.innerHTML=Q.map(($,R)=>{let X=`rgb(${$.color.r*100}% ${$.color.g*100}% ${$.color.b*100}%)`,v=$.label||`Series ${R+1}`;if(v.length>V)v=v.slice(0,V-1)+"…";let x=Math.min(0.02+R*0.02,0.16),W=j.has(R),F=W?`${z};background:transparent;border:1.5px solid ${X}`:`${z};background:${X}`;return`<div class="chart-legend-row" data-series="${R}" style="${K}${U};animation-delay:${x}s"><span class="chart-legend-swatch" style="${F}"></span><span class="chart-legend-label" style="${W?"opacity:0.4;":""}${P}">${n(v)}</span></div>`}).join(""),q.open){let $=q.list.scrollHeight+20;q.container.style.width=`${q.computedWidth}px`,q.container.style.height=`${Math.min(g,$)}px`}}function h(J,q){let Q=J.config.hiddenSeries??new Set;q.list.querySelectorAll(".chart-legend-row").forEach((V)=>{let Y=Number(V.dataset.series);if(isNaN(Y))return;let j=J.series[Y];if(!j)return;let K=`rgb(${j.color.r*100}% ${j.color.g*100}% ${j.color.b*100}%)`,U=Q.has(Y),z=V.querySelector(".chart-legend-swatch"),P=V.querySelector(".chart-legend-label");z.style.background=U?"transparent":K,z.style.border=U?`1.5px solid ${K}`:"",P.style.opacity=U?"0.4":""})}function n(J){let q=document.createElement("div");return q.textContent=J,q.innerHTML}function A(J){let q=k.get(J);if(!q)return;let Q=M(J).alwaysOpen??!1,V=Q||q.open;if(q.container.style.width=V?`${q.computedWidth}px`:`${m}px`,q.container.style.height=`${m}px`,q.container.style.borderRadius=V?"8px":"50%",q.container.style.overflow="hidden",q.iconBtn.style.opacity=Q?"0":V?"0":"1",q.iconBtn.style.pointerEvents=Q?"none":V?"none":"auto",q.iconBtn.style.visibility=Q?"hidden":"visible",q.panel.style.display=V?"flex":"none",q.closeBtn.style.opacity=Q?"0":V?"0":"0",q.closeBtn.style.pointerEvents=Q?"none":V?"auto":"none",q.closeBtn.style.visibility=Q?"hidden":V?"visible":"hidden",q.scrollArea.style.overflowY="hidden",V){let Y=q.list.scrollHeight+20;q.container.style.height=`${Math.min(g,Y)}px`;let j=(K)=>{if(K.propertyName!=="height")return;q.container.removeEventListener("transitionend",j),q.scrollArea.style.overflowY="auto"};if(q.container.addEventListener("transitionend",j),!Q)requestAnimationFrame(()=>{requestAnimationFrame(()=>{q.closeBtn.style.opacity="1"})})}}function l(){if(document.getElementById("chart-legend-keyframes"))return;let J=document.createElement("style");J.id="chart-legend-keyframes",J.textContent=`
+    @keyframes chart-legend-row-in {
+      from { opacity: 0; transform: translateY(6px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    @keyframes chart-legend-swatch-bounce {
+      0%   { transform: scale(1); }
+      30%  { transform: scale(1.5); }
+      60%  { transform: scale(0.82); }
+      80%  { transform: scale(1.12); }
+      100% { transform: scale(1); }
+    }
+    .chart-legend-swatch--bounce { animation: chart-legend-swatch-bounce 0.28s ease-out; }
+    @keyframes chart-legend-label-bounce {
+      0%   { transform: scale(1); }
+      30%  { transform: scale(1.05); }
+      60%  { transform: scale(0.97); }
+      80%  { transform: scale(1.02); }
+      100% { transform: scale(1); }
+    }
+    .chart-legend-label--bounce { animation: chart-legend-label-bounce 0.28s ease-out; }
+    .chart-legend-scroll::-webkit-scrollbar { width: 6px; }
+    .chart-legend-scroll::-webkit-scrollbar-track { background: transparent; }
+    .chart-legend-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 3px; }
+    .chart-legend-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }
+  `,document.head.appendChild(J)}l();export{t as legendPlugin};

package/dist/plugins/shared.d.ts

@@ -0,0 +1,7 @@
+export declare const MARGIN: {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+};
+//# sourceMappingURL=shared.d.ts.map

package/dist/plugins/shared.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/plugins/shared.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;CAA8C,CAAC"}

package/dist/plugins/zoom.d.ts

@@ -1,6 +1,14 @@
-import type { ChartPlugin } from "../chart-library.ts";
+import type { ChartPlugin, ZoomMode } from "../types.ts";
+export interface ZoomConfig {
+    zoomMode?: ZoomMode;
+}
+declare module "../types.ts" {
+    interface ChartPluginRegistry {
+        zoom: ZoomConfig;
+    }
+}
 export interface ZoomPluginOptions {
     momentumDecay?: number;
 }
-export declare function zoomPlugin(opts?: ZoomPluginOptions): ChartPlugin;
+export declare function zoomPlugin(opts?: ZoomPluginOptions): ChartPlugin<ZoomConfig>;
 //# sourceMappingURL=zoom.d.ts.map

package/dist/plugins/zoom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"zoom.d.ts","sourceRoot":"","sources":["../../src/plugins/zoom.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAiB,MAAM,qBAAqB,CAAC;AAGtE,MAAM,WAAW,iBAAiB;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,UAAU,CAAC,IAAI,GAAE,iBAAsB,GAAG,WAAW,CA2epE"}
+{"version":3,"file":"zoom.d.ts","sourceRoot":"","sources":["../../src/plugins/zoom.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAiB,QAAQ,EAAE,MAAM,aAAa,CAAC;AAOxE,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB;AAED,OAAO,QAAQ,aAAa,CAAC;IAC3B,UAAU,mBAAmB;QAC3B,IAAI,EAAE,UAAU,CAAC;KAClB;CACF;AAED,MAAM,WAAW,iBAAiB;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,UAAU,CACxB,IAAI,GAAE,iBAAsB,GAC3B,WAAW,CAAC,UAAU,CAAC,CAiczB"}