@rsalianto/git-heatmap-vanilla 0.1.0

package/dist/index.d.mts

@@ -0,0 +1,31 @@
+import { HeatmapData } from '@rsalianto/git-heatmap-core';
+
+declare class GitHeatmapElement extends HTMLElement {
+    static get observedAttributes(): string[];
+    private _data;
+    private _fetchData;
+    private _shadow;
+    private _tooltip;
+    set data(value: HeatmapData);
+    get data(): HeatmapData | null;
+    set fetchData(fn: () => Promise<HeatmapData>);
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, _old: string | null, _val: string | null): void;
+    private get _cellSize();
+    private get _cellGap();
+    private get _cellRadius();
+    private get _step();
+    private get _showTotal();
+    private get _showLegend();
+    private get _showMonths();
+    private get _showDays();
+    private get _label();
+    private _load;
+    private _renderSkeleton;
+    private _renderError;
+    private _render;
+    private _attachListeners;
+}
+
+export { GitHeatmapElement };

package/dist/index.d.ts

@@ -0,0 +1,31 @@
+import { HeatmapData } from '@rsalianto/git-heatmap-core';
+
+declare class GitHeatmapElement extends HTMLElement {
+    static get observedAttributes(): string[];
+    private _data;
+    private _fetchData;
+    private _shadow;
+    private _tooltip;
+    set data(value: HeatmapData);
+    get data(): HeatmapData | null;
+    set fetchData(fn: () => Promise<HeatmapData>);
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, _old: string | null, _val: string | null): void;
+    private get _cellSize();
+    private get _cellGap();
+    private get _cellRadius();
+    private get _step();
+    private get _showTotal();
+    private get _showLegend();
+    private get _showMonths();
+    private get _showDays();
+    private get _label();
+    private _load;
+    private _renderSkeleton;
+    private _renderError;
+    private _render;
+    private _attachListeners;
+}
+
+export { GitHeatmapElement };

package/dist/index.iife.js

@@ -0,0 +1,331 @@
+"use strict";
+var GitHeatmapVanilla = (() => {
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __export = (target, all) => {
+    for (var name in all)
+      __defProp(target, name, { get: all[name], enumerable: true });
+  };
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to, key) && key !== except)
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    }
+    return to;
+  };
+  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+  // src/index.ts
+  var index_exports = {};
+  __export(index_exports, {
+    GitHeatmapElement: () => GitHeatmapElement
+  });
+
+  // ../core/dist/index.mjs
+  var DEFAULT_LEVELS = [
+    { threshold: 0, color: "var(--ghm-color-l0)", label: "No contributions" },
+    { threshold: 1, color: "var(--ghm-color-l1)", label: "1\u20132 contributions" },
+    { threshold: 3, color: "var(--ghm-color-l2)", label: "3\u20135 contributions" },
+    { threshold: 6, color: "var(--ghm-color-l3)", label: "6\u201310 contributions" },
+    { threshold: 11, color: "var(--ghm-color-l4)", label: "11+ contributions" }
+  ];
+  var MONTHS = [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec"
+  ];
+  var DAY_LABELS = { 1: "Mon", 3: "Wed", 5: "Fri" };
+  function buildMonthLabels(weeks) {
+    const labels = [];
+    let lastMonth = -1;
+    for (let wi = 0; wi < weeks.length; wi++) {
+      const first = weeks[wi].days.find((d) => d.date);
+      if (!first) continue;
+      const m = (/* @__PURE__ */ new Date(first.date + "T00:00:00")).getMonth();
+      if (m !== lastMonth) {
+        labels.push({ label: MONTHS[m], col: wi });
+        lastMonth = m;
+      }
+    }
+    return labels;
+  }
+  var CELL = 10;
+  var GAP = 3;
+  var STEP = CELL + GAP;
+
+  // src/git-heatmap-element.ts
+  var BASE_STYLES = `
+  :host {
+    --ghm-color-l0: rgba(255,255,255,0.08);
+    --ghm-color-l1: #1c3d06;
+    --ghm-color-l2: #3a7510;
+    --ghm-color-l3: #6ab81e;
+    --ghm-color-l4: #aafd35;
+    --ghm-text: rgba(255,255,255,0.5);
+    --ghm-tooltip-bg: #1c2128;
+    --ghm-tooltip-border: rgba(255,255,255,0.1);
+    --ghm-tooltip-text: rgba(255,255,255,0.75);
+    --ghm-font: inherit;
+    --ghm-fs: 11px;
+    display: block;
+    position: relative;
+    width: 100%;
+    font-size: var(--ghm-fs);
+    font-family: var(--ghm-font);
+    color: var(--ghm-text);
+    user-select: none;
+    box-sizing: border-box;
+  }
+  * { box-sizing: border-box; }
+  .ghm-scroll { overflow-x: auto; overflow-y: visible; padding-bottom: 4px; }
+  .ghm-grid { display: inline-flex; flex-direction: column; }
+  .ghm-row  { display: flex; }
+  .ghm-col  { display: flex; flex-direction: column; }
+  .ghm-cell {
+    border-radius: 2px;
+    cursor: pointer;
+    transition: opacity 0.15s;
+    flex-shrink: 0;
+  }
+  .ghm-cell:hover { opacity: 0.7; }
+  .ghm-tooltip {
+    pointer-events: none;
+    position: absolute;
+    z-index: 50;
+    transform: translate(-50%, -100%);
+    background: var(--ghm-tooltip-bg);
+    border: 1px solid var(--ghm-tooltip-border);
+    color: var(--ghm-tooltip-text);
+    font-size: 0.9em;
+    border-radius: 4px;
+    padding: 3px 8px;
+    white-space: nowrap;
+  }
+  .ghm-skeleton { opacity: 0.4; }
+`;
+  var GitHeatmapElement = class extends HTMLElement {
+    constructor() {
+      super();
+      this._data = null;
+      this._fetchData = null;
+      this._tooltip = null;
+      this._shadow = this.attachShadow({ mode: "open" });
+    }
+    static get observedAttributes() {
+      return ["api-url", "cell-size", "cell-gap", "cell-radius", "show-total", "show-legend", "show-month-labels", "show-day-labels", "label"];
+    }
+    set data(value) {
+      this._data = value;
+      this._render();
+    }
+    get data() {
+      return this._data;
+    }
+    set fetchData(fn) {
+      this._fetchData = fn;
+      this._load();
+    }
+    connectedCallback() {
+      const apiUrl = this.getAttribute("api-url");
+      if (apiUrl && !this._data) {
+        this._load();
+      } else if (this._data) {
+        this._render();
+      } else {
+        this._renderSkeleton();
+      }
+    }
+    attributeChangedCallback(name, _old, _val) {
+      if (name === "api-url") {
+        this._load();
+        return;
+      }
+      if (this._data) this._render();
+    }
+    get _cellSize() {
+      return parseInt(this.getAttribute("cell-size") ?? String(CELL), 10);
+    }
+    get _cellGap() {
+      return parseInt(this.getAttribute("cell-gap") ?? String(GAP), 10);
+    }
+    get _cellRadius() {
+      return parseInt(this.getAttribute("cell-radius") ?? "2", 10);
+    }
+    get _step() {
+      return this._cellSize + this._cellGap;
+    }
+    get _showTotal() {
+      return this.getAttribute("show-total") !== "false";
+    }
+    get _showLegend() {
+      return this.getAttribute("show-legend") !== "false";
+    }
+    get _showMonths() {
+      return this.getAttribute("show-month-labels") !== "false";
+    }
+    get _showDays() {
+      return this.getAttribute("show-day-labels") !== "false";
+    }
+    get _label() {
+      return this.getAttribute("label") ?? "Contribution heatmap";
+    }
+    async _load() {
+      const apiUrl = this.getAttribute("api-url");
+      const resolver = this._fetchData ?? (apiUrl ? () => fetch(apiUrl).then((r) => r.json()) : null);
+      if (!resolver) return;
+      this._renderSkeleton();
+      try {
+        this._data = await resolver();
+        this._render();
+      } catch {
+        this._renderError();
+      }
+    }
+    _renderSkeleton() {
+      const cell = this._cellSize, gap = this._cellGap, step = this._step;
+      let cols = "";
+      for (let c = 0; c < 53; c++) {
+        let cells = "";
+        for (let r = 0; r < 7; r++) {
+          cells += `<div style="width:${cell}px;height:${cell}px;border-radius:${this._cellRadius}px;background:var(--ghm-color-l0);flex-shrink:0;"></div>`;
+        }
+        cols += `<div style="display:flex;flex-direction:column;gap:${gap}px;">${cells}</div>`;
+      }
+      this._shadow.innerHTML = `<style>${BASE_STYLES}</style>
+      <div aria-label="${this._label}" style="opacity:0.4;">
+        <div style="display:flex;gap:${gap}px;">${cols}</div>
+      </div>`;
+    }
+    _renderError() {
+      this._shadow.innerHTML = `<style>${BASE_STYLES}</style>
+      <p style="opacity:0.6;padding:1rem 0;">Could not load contribution data.</p>`;
+    }
+    _render() {
+      if (!this._data) return;
+      const d = this._data;
+      const cell = this._cellSize, gap = this._cellGap, r = this._cellRadius, step = this._step;
+      const levels = DEFAULT_LEVELS;
+      const monthLabels = this._showMonths ? buildMonthLabels(d.weeks) : [];
+      let monthRow = "";
+      if (this._showMonths) {
+        const cells = monthLabels.map(({ label, col }, idx) => {
+          const nextCol = monthLabels[idx + 1]?.col ?? d.weeks.length;
+          return `<div style="width:${(nextCol - col) * step}px;white-space:nowrap;font-size:0.9em;">${label}</div>`;
+        }).join("");
+        monthRow = `<div style="display:flex;margin-bottom:${gap}px;margin-left:${this._showDays ? 32 : 0}px;">${cells}</div>`;
+      }
+      let dayLabelCol = "";
+      if (this._showDays) {
+        const rows = Array.from(
+          { length: 7 },
+          (_, dow) => `<div style="height:${cell}px;line-height:${cell}px;width:26px;text-align:right;padding-right:4px;font-size:0.9em;">${DAY_LABELS[dow] ?? ""}</div>`
+        ).join("");
+        dayLabelCol = `<div style="display:flex;flex-direction:column;gap:${gap}px;margin-right:6px;">${rows}</div>`;
+      }
+      const weekCols = d.weeks.map((week, _wi) => {
+        const cells = Array.from({ length: 7 }, (_, dow) => {
+          const day = week.days[dow];
+          if (!day?.date) return `<div style="width:${cell}px;height:${cell}px;flex-shrink:0;"></div>`;
+          const lvl = day.level;
+          const tip = day.count === 0 ? `No contributions on ${day.date}` : `${day.count} contribution${day.count > 1 ? "s" : ""} on ${day.date}`;
+          return `<div
+          class="ghm-cell"
+          style="width:${cell}px;height:${cell}px;border-radius:${r}px;background:var(--ghm-color-l${lvl});"
+          data-date="${day.date}"
+          data-count="${day.count}"
+          aria-label="${tip}"
+          role="button"
+          tabindex="0"
+        ></div>`;
+        }).join("");
+        return `<div style="display:flex;flex-direction:column;gap:${gap}px;">${cells}</div>`;
+      }).join("");
+      let legend = "";
+      if (this._showLegend) {
+        const cells = levels.map(
+          (lvl, i) => `<div style="width:${cell}px;height:${cell}px;border-radius:${r}px;background:var(--ghm-color-l${i});" title="${lvl.label}"></div>`
+        ).join("");
+        legend = `<div style="display:flex;align-items:center;justify-content:flex-end;margin-top:8px;">
+        <div style="display:flex;align-items:center;gap:6px;font-size:0.9em;">
+          <span>Less</span>${cells}<span>More</span>
+        </div>
+      </div>`;
+      }
+      const total = this._showTotal ? `<p style="margin-bottom:12px;color:var(--ghm-text);">${d.totalContributions.toLocaleString()} contributions in the last year</p>` : "";
+      this._shadow.innerHTML = `<style>${BASE_STYLES}</style>
+      <div aria-label="${this._label}" style="position:relative;">
+        ${total}
+        <div class="ghm-scroll">
+          <div class="ghm-grid" style="min-width:${d.weeks.length * step}px;">
+            ${monthRow}
+            <div style="display:flex;">
+              ${dayLabelCol}
+              <div style="display:flex;gap:${gap}px;">${weekCols}</div>
+            </div>
+          </div>
+        </div>
+        <div id="ghm-mobile-tip" style="display:none;margin-top:8px;font-size:0.9em;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:4px;padding:6px 12px;"></div>
+        ${legend}
+        <div class="ghm-tooltip" id="ghm-tt" style="display:none;"></div>
+      </div>`;
+      this._attachListeners();
+      const scrollEl = this._shadow.querySelector(".ghm-scroll");
+      if (scrollEl) scrollEl.scrollLeft = scrollEl.scrollWidth;
+    }
+    _attachListeners() {
+      const wrapper = this._shadow.firstElementChild;
+      const tt = this._shadow.getElementById("ghm-tt");
+      const mobileTip = this._shadow.getElementById("ghm-mobile-tip");
+      let activeTapDate = "";
+      this._shadow.querySelectorAll(".ghm-cell").forEach((el) => {
+        const cell = el;
+        const date = cell.dataset["date"] ?? "";
+        const count = parseInt(cell.dataset["count"] ?? "0", 10);
+        const tip = count === 0 ? `No contributions on ${date}` : `${count} contribution${count > 1 ? "s" : ""} on ${date}`;
+        cell.addEventListener("mouseenter", (e) => {
+          const r = cell.getBoundingClientRect();
+          const wr = wrapper.getBoundingClientRect();
+          tt.textContent = tip;
+          tt.style.left = `${r.left - wr.left + this._cellSize / 2}px`;
+          tt.style.top = `${r.top - wr.top - 6}px`;
+          tt.style.display = "block";
+        });
+        cell.addEventListener("mouseleave", () => {
+          tt.style.display = "none";
+        });
+        cell.addEventListener("click", () => {
+          if (activeTapDate === date) {
+            activeTapDate = "";
+            mobileTip.style.display = "none";
+          } else {
+            activeTapDate = date;
+            mobileTip.textContent = tip;
+            mobileTip.style.display = "block";
+          }
+          this.dispatchEvent(new CustomEvent("day-click", {
+            detail: { date, count },
+            bubbles: true,
+            composed: true
+          }));
+        });
+      });
+    }
+  };
+  if (typeof customElements !== "undefined" && !customElements.get("git-heatmap")) {
+    customElements.define("git-heatmap", GitHeatmapElement);
+  }
+  return __toCommonJS(index_exports);
+})();
+//# sourceMappingURL=index.iife.js.map

package/dist/index.iife.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../../core/src/types.ts","../../core/src/levels.ts","../../core/src/normalize.ts","../../core/src/calendar.ts","../src/git-heatmap-element.ts"],"sourcesContent":["export { GitHeatmapElement } from \"./git-heatmap-element\";\n","export interface HeatmapDay {\n  date: string;\n  count: number;\n  level: 0 | 1 | 2 | 3 | 4;\n}\n\nexport interface HeatmapWeek {\n  days: HeatmapDay[];\n}\n\nexport interface HeatmapData {\n  totalContributions: number;\n  weeks: HeatmapWeek[];\n  source: \"github\" | \"gitlab\" | \"manual\";\n}\n\nexport interface LevelConfig {\n  threshold: number;\n  color: string;\n  label: string;\n}\n\nexport const DEFAULT_LEVELS: LevelConfig[] = [\n  { threshold: 0,  color: \"var(--ghm-color-l0)\", label: \"No contributions\"    },\n  { threshold: 1,  color: \"var(--ghm-color-l1)\", label: \"1–2 contributions\"   },\n  { threshold: 3,  color: \"var(--ghm-color-l2)\", label: \"3–5 contributions\"   },\n  { threshold: 6,  color: \"var(--ghm-color-l3)\", label: \"6–10 contributions\"  },\n  { threshold: 11, color: \"var(--ghm-color-l4)\", label: \"11+ contributions\"   },\n];\n\nexport interface HeatmapTheme {\n  colorL0: string;\n  colorL1: string;\n  colorL2: string;\n  colorL3: string;\n  colorL4: string;\n  textColor: string;\n  tooltipBg: string;\n  tooltipBorderColor: string;\n  tooltipTextColor: string;\n  fontFamily: string;\n  fontSize: string;\n}\n\nexport const DEFAULT_THEME: HeatmapTheme = {\n  colorL0: \"rgba(255,255,255,0.08)\",\n  colorL1: \"#1c3d06\",\n  colorL2: \"#3a7510\",\n  colorL3: \"#6ab81e\",\n  colorL4: \"#aafd35\",\n  textColor: \"rgba(255,255,255,0.5)\",\n  tooltipBg: \"#1c2128\",\n  tooltipBorderColor: \"rgba(255,255,255,0.1)\",\n  tooltipTextColor: \"rgba(255,255,255,0.75)\",\n  fontFamily: \"inherit\",\n  fontSize: \"11px\",\n};\n\nexport interface GitHubFetchOptions {\n  username: string;\n  token: string;\n  from?: string;\n  to?: string;\n}\n\nexport interface GitLabFetchOptions {\n  username: string;\n  token?: string;\n  baseUrl?: string;\n}\n","import type { LevelConfig } from \"./types\";\n\nexport function getLevel(count: number, levels: LevelConfig[]): 0 | 1 | 2 | 3 | 4 {\n  let result = 0;\n  for (let i = 0; i < levels.length && i < 5; i++) {\n    if (count >= levels[i].threshold) result = i;\n  }\n  return result as 0 | 1 | 2 | 3 | 4;\n}\n","import type { HeatmapData, HeatmapWeek, LevelConfig } from \"./types\";\nimport { DEFAULT_LEVELS } from \"./types\";\nimport { getLevel } from \"./levels\";\n\nexport interface GitHubRawCalendar {\n  totalContributions: number;\n  weeks: Array<{\n    contributionDays: Array<{\n      date: string;\n      contributionCount: number;\n    }>;\n  }>;\n}\n\nexport type GitLabRawCalendar = Record<string, number>;\n\nexport function normalizeGitHub(\n  raw: GitHubRawCalendar,\n  levels: LevelConfig[] = DEFAULT_LEVELS\n): HeatmapData {\n  const weeks: HeatmapWeek[] = raw.weeks.map((w) => ({\n    days: Array.from({ length: 7 }, (_, dow) => {\n      const day = w.contributionDays[dow];\n      const count = day?.contributionCount ?? 0;\n      return { date: day?.date ?? \"\", count, level: getLevel(count, levels) };\n    }),\n  }));\n  return { totalContributions: raw.totalContributions, weeks, source: \"github\" };\n}\n\nexport function normalizeGitLab(\n  raw: GitLabRawCalendar,\n  levels: LevelConfig[] = DEFAULT_LEVELS\n): HeatmapData {\n  const entries = Object.entries(raw).sort(([a], [b]) => a.localeCompare(b));\n  const weeks: HeatmapWeek[] = [];\n  let currentWeek: HeatmapWeek | null = null;\n\n  for (const [date, count] of entries) {\n    const dow = new Date(date + \"T00:00:00\").getDay();\n    if (dow === 0 || currentWeek === null) {\n      currentWeek = { days: [] };\n      weeks.push(currentWeek);\n    }\n    currentWeek.days[dow] = { date, count, level: getLevel(count, levels) };\n  }\n\n  const total = entries.reduce((s, [, c]) => s + c, 0);\n  return { totalContributions: total, weeks, source: \"gitlab\" };\n}\n\nexport function normalizeManual(\n  data: Array<{ date: string; count: number }>,\n  levels: LevelConfig[] = DEFAULT_LEVELS\n): HeatmapData {\n  const raw: GitLabRawCalendar = Object.fromEntries(data.map((d) => [d.date, d.count]));\n  const result = normalizeGitLab(raw, levels);\n  return { ...result, source: \"manual\" };\n}\n","export const MONTHS = [\n  \"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\",\n  \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\",\n];\n\nexport const DAY_LABELS: Record<number, string> = { 1: \"Mon\", 3: \"Wed\", 5: \"Fri\" };\n\nexport interface MonthLabel {\n  label: string;\n  col: number;\n}\n\nexport function buildMonthLabels(weeks: { days: { date: string }[] }[]): MonthLabel[] {\n  const labels: MonthLabel[] = [];\n  let lastMonth = -1;\n  for (let wi = 0; wi < weeks.length; wi++) {\n    const first = weeks[wi].days.find((d) => d.date);\n    if (!first) continue;\n    const m = new Date(first.date + \"T00:00:00\").getMonth();\n    if (m !== lastMonth) {\n      labels.push({ label: MONTHS[m], col: wi });\n      lastMonth = m;\n    }\n  }\n  return labels;\n}\n\nexport const CELL = 10;\nexport const GAP = 3;\nexport const STEP = CELL + GAP;\n","import {\n  buildMonthLabels, CELL, GAP, STEP, DAY_LABELS,\n  DEFAULT_LEVELS, DEFAULT_THEME, getLevel,\n} from \"@rsalianto/git-heatmap-core\";\nimport type { HeatmapData, HeatmapDay, LevelConfig } from \"@rsalianto/git-heatmap-core\";\n\nconst BASE_STYLES = `\n  :host {\n    --ghm-color-l0: rgba(255,255,255,0.08);\n    --ghm-color-l1: #1c3d06;\n    --ghm-color-l2: #3a7510;\n    --ghm-color-l3: #6ab81e;\n    --ghm-color-l4: #aafd35;\n    --ghm-text: rgba(255,255,255,0.5);\n    --ghm-tooltip-bg: #1c2128;\n    --ghm-tooltip-border: rgba(255,255,255,0.1);\n    --ghm-tooltip-text: rgba(255,255,255,0.75);\n    --ghm-font: inherit;\n    --ghm-fs: 11px;\n    display: block;\n    position: relative;\n    width: 100%;\n    font-size: var(--ghm-fs);\n    font-family: var(--ghm-font);\n    color: var(--ghm-text);\n    user-select: none;\n    box-sizing: border-box;\n  }\n  * { box-sizing: border-box; }\n  .ghm-scroll { overflow-x: auto; overflow-y: visible; padding-bottom: 4px; }\n  .ghm-grid { display: inline-flex; flex-direction: column; }\n  .ghm-row  { display: flex; }\n  .ghm-col  { display: flex; flex-direction: column; }\n  .ghm-cell {\n    border-radius: 2px;\n    cursor: pointer;\n    transition: opacity 0.15s;\n    flex-shrink: 0;\n  }\n  .ghm-cell:hover { opacity: 0.7; }\n  .ghm-tooltip {\n    pointer-events: none;\n    position: absolute;\n    z-index: 50;\n    transform: translate(-50%, -100%);\n    background: var(--ghm-tooltip-bg);\n    border: 1px solid var(--ghm-tooltip-border);\n    color: var(--ghm-tooltip-text);\n    font-size: 0.9em;\n    border-radius: 4px;\n    padding: 3px 8px;\n    white-space: nowrap;\n  }\n  .ghm-skeleton { opacity: 0.4; }\n`;\n\nexport class GitHeatmapElement extends HTMLElement {\n  static get observedAttributes() {\n    return [\"api-url\", \"cell-size\", \"cell-gap\", \"cell-radius\", \"show-total\", \"show-legend\", \"show-month-labels\", \"show-day-labels\", \"label\"];\n  }\n\n  private _data: HeatmapData | null = null;\n  private _fetchData: (() => Promise<HeatmapData>) | null = null;\n  private _shadow: ShadowRoot;\n  private _tooltip: HTMLDivElement | null = null;\n\n  set data(value: HeatmapData) { this._data = value; this._render(); }\n  get data(): HeatmapData | null { return this._data; }\n\n  set fetchData(fn: () => Promise<HeatmapData>) { this._fetchData = fn; this._load(); }\n\n  constructor() {\n    super();\n    this._shadow = this.attachShadow({ mode: \"open\" });\n  }\n\n  connectedCallback() {\n    const apiUrl = this.getAttribute(\"api-url\");\n    if (apiUrl && !this._data) {\n      this._load();\n    } else if (this._data) {\n      this._render();\n    } else {\n      this._renderSkeleton();\n    }\n  }\n\n  attributeChangedCallback(name: string, _old: string | null, _val: string | null) {\n    if (name === \"api-url\") { this._load(); return; }\n    if (this._data) this._render();\n  }\n\n  private get _cellSize()  { return parseInt(this.getAttribute(\"cell-size\")  ?? String(CELL), 10); }\n  private get _cellGap()   { return parseInt(this.getAttribute(\"cell-gap\")   ?? String(GAP),  10); }\n  private get _cellRadius(){ return parseInt(this.getAttribute(\"cell-radius\") ?? \"2\",           10); }\n  private get _step()      { return this._cellSize + this._cellGap; }\n  private get _showTotal() { return this.getAttribute(\"show-total\")        !== \"false\"; }\n  private get _showLegend(){ return this.getAttribute(\"show-legend\")       !== \"false\"; }\n  private get _showMonths(){ return this.getAttribute(\"show-month-labels\") !== \"false\"; }\n  private get _showDays()  { return this.getAttribute(\"show-day-labels\")   !== \"false\"; }\n  private get _label()     { return this.getAttribute(\"label\") ?? \"Contribution heatmap\"; }\n\n  private async _load() {\n    const apiUrl = this.getAttribute(\"api-url\");\n    const resolver = this._fetchData\n      ?? (apiUrl ? () => fetch(apiUrl).then((r) => r.json()) : null);\n    if (!resolver) return;\n\n    this._renderSkeleton();\n    try {\n      this._data = await resolver() as HeatmapData;\n      this._render();\n    } catch {\n      this._renderError();\n    }\n  }\n\n  private _renderSkeleton() {\n    const cell = this._cellSize, gap = this._cellGap, step = this._step;\n    let cols = \"\";\n    for (let c = 0; c < 53; c++) {\n      let cells = \"\";\n      for (let r = 0; r < 7; r++) {\n        cells += `<div style=\"width:${cell}px;height:${cell}px;border-radius:${this._cellRadius}px;background:var(--ghm-color-l0);flex-shrink:0;\"></div>`;\n      }\n      cols += `<div style=\"display:flex;flex-direction:column;gap:${gap}px;\">${cells}</div>`;\n    }\n    this._shadow.innerHTML = `<style>${BASE_STYLES}</style>\n      <div aria-label=\"${this._label}\" style=\"opacity:0.4;\">\n        <div style=\"display:flex;gap:${gap}px;\">${cols}</div>\n      </div>`;\n  }\n\n  private _renderError() {\n    this._shadow.innerHTML = `<style>${BASE_STYLES}</style>\n      <p style=\"opacity:0.6;padding:1rem 0;\">Could not load contribution data.</p>`;\n  }\n\n  private _render() {\n    if (!this._data) return;\n    const d = this._data;\n    const cell = this._cellSize, gap = this._cellGap, r = this._cellRadius, step = this._step;\n    const levels: LevelConfig[] = DEFAULT_LEVELS;\n\n    const monthLabels = this._showMonths ? buildMonthLabels(d.weeks) : [];\n\n    let monthRow = \"\";\n    if (this._showMonths) {\n      const cells = monthLabels.map(({ label, col }, idx) => {\n        const nextCol = monthLabels[idx + 1]?.col ?? d.weeks.length;\n        return `<div style=\"width:${(nextCol - col) * step}px;white-space:nowrap;font-size:0.9em;\">${label}</div>`;\n      }).join(\"\");\n      monthRow = `<div style=\"display:flex;margin-bottom:${gap}px;margin-left:${this._showDays ? 32 : 0}px;\">${cells}</div>`;\n    }\n\n    let dayLabelCol = \"\";\n    if (this._showDays) {\n      const rows = Array.from({ length: 7 }, (_, dow) =>\n        `<div style=\"height:${cell}px;line-height:${cell}px;width:26px;text-align:right;padding-right:4px;font-size:0.9em;\">${DAY_LABELS[dow] ?? \"\"}</div>`\n      ).join(\"\");\n      dayLabelCol = `<div style=\"display:flex;flex-direction:column;gap:${gap}px;margin-right:6px;\">${rows}</div>`;\n    }\n\n    const weekCols = d.weeks.map((week, _wi) => {\n      const cells = Array.from({ length: 7 }, (_, dow) => {\n        const day = week.days[dow];\n        if (!day?.date) return `<div style=\"width:${cell}px;height:${cell}px;flex-shrink:0;\"></div>`;\n        const lvl = day.level;\n        const tip = day.count === 0\n          ? `No contributions on ${day.date}`\n          : `${day.count} contribution${day.count > 1 ? \"s\" : \"\"} on ${day.date}`;\n        return `<div\n          class=\"ghm-cell\"\n          style=\"width:${cell}px;height:${cell}px;border-radius:${r}px;background:var(--ghm-color-l${lvl});\"\n          data-date=\"${day.date}\"\n          data-count=\"${day.count}\"\n          aria-label=\"${tip}\"\n          role=\"button\"\n          tabindex=\"0\"\n        ></div>`;\n      }).join(\"\");\n      return `<div style=\"display:flex;flex-direction:column;gap:${gap}px;\">${cells}</div>`;\n    }).join(\"\");\n\n    let legend = \"\";\n    if (this._showLegend) {\n      const cells = levels.map((lvl, i) =>\n        `<div style=\"width:${cell}px;height:${cell}px;border-radius:${r}px;background:var(--ghm-color-l${i});\" title=\"${lvl.label}\"></div>`\n      ).join(\"\");\n      legend = `<div style=\"display:flex;align-items:center;justify-content:flex-end;margin-top:8px;\">\n        <div style=\"display:flex;align-items:center;gap:6px;font-size:0.9em;\">\n          <span>Less</span>${cells}<span>More</span>\n        </div>\n      </div>`;\n    }\n\n    const total = this._showTotal\n      ? `<p style=\"margin-bottom:12px;color:var(--ghm-text);\">${d.totalContributions.toLocaleString()} contributions in the last year</p>`\n      : \"\";\n\n    this._shadow.innerHTML = `<style>${BASE_STYLES}</style>\n      <div aria-label=\"${this._label}\" style=\"position:relative;\">\n        ${total}\n        <div class=\"ghm-scroll\">\n          <div class=\"ghm-grid\" style=\"min-width:${d.weeks.length * step}px;\">\n            ${monthRow}\n            <div style=\"display:flex;\">\n              ${dayLabelCol}\n              <div style=\"display:flex;gap:${gap}px;\">${weekCols}</div>\n            </div>\n          </div>\n        </div>\n        <div id=\"ghm-mobile-tip\" style=\"display:none;margin-top:8px;font-size:0.9em;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:4px;padding:6px 12px;\"></div>\n        ${legend}\n        <div class=\"ghm-tooltip\" id=\"ghm-tt\" style=\"display:none;\"></div>\n      </div>`;\n\n    this._attachListeners();\n\n    // auto-scroll to end\n    const scrollEl = this._shadow.querySelector(\".ghm-scroll\") as HTMLElement | null;\n    if (scrollEl) scrollEl.scrollLeft = scrollEl.scrollWidth;\n  }\n\n  private _attachListeners() {\n    const wrapper = this._shadow.firstElementChild as HTMLElement;\n    const tt = this._shadow.getElementById(\"ghm-tt\") as HTMLDivElement;\n    const mobileTip = this._shadow.getElementById(\"ghm-mobile-tip\") as HTMLDivElement;\n    let activeTapDate = \"\";\n\n    this._shadow.querySelectorAll(\".ghm-cell\").forEach((el) => {\n      const cell = el as HTMLElement;\n      const date  = cell.dataset[\"date\"]  ?? \"\";\n      const count = parseInt(cell.dataset[\"count\"] ?? \"0\", 10);\n      const tip = count === 0\n        ? `No contributions on ${date}`\n        : `${count} contribution${count > 1 ? \"s\" : \"\"} on ${date}`;\n\n      cell.addEventListener(\"mouseenter\", (e) => {\n        const r  = cell.getBoundingClientRect();\n        const wr = wrapper.getBoundingClientRect();\n        tt.textContent = tip;\n        tt.style.left  = `${r.left - wr.left + this._cellSize / 2}px`;\n        tt.style.top   = `${r.top - wr.top - 6}px`;\n        tt.style.display = \"block\";\n      });\n      cell.addEventListener(\"mouseleave\", () => { tt.style.display = \"none\"; });\n      cell.addEventListener(\"click\", () => {\n        if (activeTapDate === date) {\n          activeTapDate = \"\";\n          mobileTip.style.display = \"none\";\n        } else {\n          activeTapDate = date;\n          mobileTip.textContent = tip;\n          mobileTip.style.display = \"block\";\n        }\n        this.dispatchEvent(new CustomEvent(\"day-click\", {\n          detail: { date, count },\n          bubbles: true,\n          composed: true,\n        }));\n      });\n    });\n  }\n}\n\nif (typeof customElements !== \"undefined\" && !customElements.get(\"git-heatmap\")) {\n  customElements.define(\"git-heatmap\", GitHeatmapElement);\n}\n"],"mappings":"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","names":[]}

package/dist/index.js

@@ -0,0 +1,293 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  GitHeatmapElement: () => GitHeatmapElement
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/git-heatmap-element.ts
+var import_git_heatmap_core = require("@rsalianto/git-heatmap-core");
+var BASE_STYLES = `
+  :host {
+    --ghm-color-l0: rgba(255,255,255,0.08);
+    --ghm-color-l1: #1c3d06;
+    --ghm-color-l2: #3a7510;
+    --ghm-color-l3: #6ab81e;
+    --ghm-color-l4: #aafd35;
+    --ghm-text: rgba(255,255,255,0.5);
+    --ghm-tooltip-bg: #1c2128;
+    --ghm-tooltip-border: rgba(255,255,255,0.1);
+    --ghm-tooltip-text: rgba(255,255,255,0.75);
+    --ghm-font: inherit;
+    --ghm-fs: 11px;
+    display: block;
+    position: relative;
+    width: 100%;
+    font-size: var(--ghm-fs);
+    font-family: var(--ghm-font);
+    color: var(--ghm-text);
+    user-select: none;
+    box-sizing: border-box;
+  }
+  * { box-sizing: border-box; }
+  .ghm-scroll { overflow-x: auto; overflow-y: visible; padding-bottom: 4px; }
+  .ghm-grid { display: inline-flex; flex-direction: column; }
+  .ghm-row  { display: flex; }
+  .ghm-col  { display: flex; flex-direction: column; }
+  .ghm-cell {
+    border-radius: 2px;
+    cursor: pointer;
+    transition: opacity 0.15s;
+    flex-shrink: 0;
+  }
+  .ghm-cell:hover { opacity: 0.7; }
+  .ghm-tooltip {
+    pointer-events: none;
+    position: absolute;
+    z-index: 50;
+    transform: translate(-50%, -100%);
+    background: var(--ghm-tooltip-bg);
+    border: 1px solid var(--ghm-tooltip-border);
+    color: var(--ghm-tooltip-text);
+    font-size: 0.9em;
+    border-radius: 4px;
+    padding: 3px 8px;
+    white-space: nowrap;
+  }
+  .ghm-skeleton { opacity: 0.4; }
+`;
+var GitHeatmapElement = class extends HTMLElement {
+  constructor() {
+    super();
+    this._data = null;
+    this._fetchData = null;
+    this._tooltip = null;
+    this._shadow = this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return ["api-url", "cell-size", "cell-gap", "cell-radius", "show-total", "show-legend", "show-month-labels", "show-day-labels", "label"];
+  }
+  set data(value) {
+    this._data = value;
+    this._render();
+  }
+  get data() {
+    return this._data;
+  }
+  set fetchData(fn) {
+    this._fetchData = fn;
+    this._load();
+  }
+  connectedCallback() {
+    const apiUrl = this.getAttribute("api-url");
+    if (apiUrl && !this._data) {
+      this._load();
+    } else if (this._data) {
+      this._render();
+    } else {
+      this._renderSkeleton();
+    }
+  }
+  attributeChangedCallback(name, _old, _val) {
+    if (name === "api-url") {
+      this._load();
+      return;
+    }
+    if (this._data) this._render();
+  }
+  get _cellSize() {
+    return parseInt(this.getAttribute("cell-size") ?? String(import_git_heatmap_core.CELL), 10);
+  }
+  get _cellGap() {
+    return parseInt(this.getAttribute("cell-gap") ?? String(import_git_heatmap_core.GAP), 10);
+  }
+  get _cellRadius() {
+    return parseInt(this.getAttribute("cell-radius") ?? "2", 10);
+  }
+  get _step() {
+    return this._cellSize + this._cellGap;
+  }
+  get _showTotal() {
+    return this.getAttribute("show-total") !== "false";
+  }
+  get _showLegend() {
+    return this.getAttribute("show-legend") !== "false";
+  }
+  get _showMonths() {
+    return this.getAttribute("show-month-labels") !== "false";
+  }
+  get _showDays() {
+    return this.getAttribute("show-day-labels") !== "false";
+  }
+  get _label() {
+    return this.getAttribute("label") ?? "Contribution heatmap";
+  }
+  async _load() {
+    const apiUrl = this.getAttribute("api-url");
+    const resolver = this._fetchData ?? (apiUrl ? () => fetch(apiUrl).then((r) => r.json()) : null);
+    if (!resolver) return;
+    this._renderSkeleton();
+    try {
+      this._data = await resolver();
+      this._render();
+    } catch {
+      this._renderError();
+    }
+  }
+  _renderSkeleton() {
+    const cell = this._cellSize, gap = this._cellGap, step = this._step;
+    let cols = "";
+    for (let c = 0; c < 53; c++) {
+      let cells = "";
+      for (let r = 0; r < 7; r++) {
+        cells += `<div style="width:${cell}px;height:${cell}px;border-radius:${this._cellRadius}px;background:var(--ghm-color-l0);flex-shrink:0;"></div>`;
+      }
+      cols += `<div style="display:flex;flex-direction:column;gap:${gap}px;">${cells}</div>`;
+    }
+    this._shadow.innerHTML = `<style>${BASE_STYLES}</style>
+      <div aria-label="${this._label}" style="opacity:0.4;">
+        <div style="display:flex;gap:${gap}px;">${cols}</div>
+      </div>`;
+  }
+  _renderError() {
+    this._shadow.innerHTML = `<style>${BASE_STYLES}</style>
+      <p style="opacity:0.6;padding:1rem 0;">Could not load contribution data.</p>`;
+  }
+  _render() {
+    if (!this._data) return;
+    const d = this._data;
+    const cell = this._cellSize, gap = this._cellGap, r = this._cellRadius, step = this._step;
+    const levels = import_git_heatmap_core.DEFAULT_LEVELS;
+    const monthLabels = this._showMonths ? (0, import_git_heatmap_core.buildMonthLabels)(d.weeks) : [];
+    let monthRow = "";
+    if (this._showMonths) {
+      const cells = monthLabels.map(({ label, col }, idx) => {
+        const nextCol = monthLabels[idx + 1]?.col ?? d.weeks.length;
+        return `<div style="width:${(nextCol - col) * step}px;white-space:nowrap;font-size:0.9em;">${label}</div>`;
+      }).join("");
+      monthRow = `<div style="display:flex;margin-bottom:${gap}px;margin-left:${this._showDays ? 32 : 0}px;">${cells}</div>`;
+    }
+    let dayLabelCol = "";
+    if (this._showDays) {
+      const rows = Array.from(
+        { length: 7 },
+        (_, dow) => `<div style="height:${cell}px;line-height:${cell}px;width:26px;text-align:right;padding-right:4px;font-size:0.9em;">${import_git_heatmap_core.DAY_LABELS[dow] ?? ""}</div>`
+      ).join("");
+      dayLabelCol = `<div style="display:flex;flex-direction:column;gap:${gap}px;margin-right:6px;">${rows}</div>`;
+    }
+    const weekCols = d.weeks.map((week, _wi) => {
+      const cells = Array.from({ length: 7 }, (_, dow) => {
+        const day = week.days[dow];
+        if (!day?.date) return `<div style="width:${cell}px;height:${cell}px;flex-shrink:0;"></div>`;
+        const lvl = day.level;
+        const tip = day.count === 0 ? `No contributions on ${day.date}` : `${day.count} contribution${day.count > 1 ? "s" : ""} on ${day.date}`;
+        return `<div
+          class="ghm-cell"
+          style="width:${cell}px;height:${cell}px;border-radius:${r}px;background:var(--ghm-color-l${lvl});"
+          data-date="${day.date}"
+          data-count="${day.count}"
+          aria-label="${tip}"
+          role="button"
+          tabindex="0"
+        ></div>`;
+      }).join("");
+      return `<div style="display:flex;flex-direction:column;gap:${gap}px;">${cells}</div>`;
+    }).join("");
+    let legend = "";
+    if (this._showLegend) {
+      const cells = levels.map(
+        (lvl, i) => `<div style="width:${cell}px;height:${cell}px;border-radius:${r}px;background:var(--ghm-color-l${i});" title="${lvl.label}"></div>`
+      ).join("");
+      legend = `<div style="display:flex;align-items:center;justify-content:flex-end;margin-top:8px;">
+        <div style="display:flex;align-items:center;gap:6px;font-size:0.9em;">
+          <span>Less</span>${cells}<span>More</span>
+        </div>
+      </div>`;
+    }
+    const total = this._showTotal ? `<p style="margin-bottom:12px;color:var(--ghm-text);">${d.totalContributions.toLocaleString()} contributions in the last year</p>` : "";
+    this._shadow.innerHTML = `<style>${BASE_STYLES}</style>
+      <div aria-label="${this._label}" style="position:relative;">
+        ${total}
+        <div class="ghm-scroll">
+          <div class="ghm-grid" style="min-width:${d.weeks.length * step}px;">
+            ${monthRow}
+            <div style="display:flex;">
+              ${dayLabelCol}
+              <div style="display:flex;gap:${gap}px;">${weekCols}</div>
+            </div>
+          </div>
+        </div>
+        <div id="ghm-mobile-tip" style="display:none;margin-top:8px;font-size:0.9em;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:4px;padding:6px 12px;"></div>
+        ${legend}
+        <div class="ghm-tooltip" id="ghm-tt" style="display:none;"></div>
+      </div>`;
+    this._attachListeners();
+    const scrollEl = this._shadow.querySelector(".ghm-scroll");
+    if (scrollEl) scrollEl.scrollLeft = scrollEl.scrollWidth;
+  }
+  _attachListeners() {
+    const wrapper = this._shadow.firstElementChild;
+    const tt = this._shadow.getElementById("ghm-tt");
+    const mobileTip = this._shadow.getElementById("ghm-mobile-tip");
+    let activeTapDate = "";
+    this._shadow.querySelectorAll(".ghm-cell").forEach((el) => {
+      const cell = el;
+      const date = cell.dataset["date"] ?? "";
+      const count = parseInt(cell.dataset["count"] ?? "0", 10);
+      const tip = count === 0 ? `No contributions on ${date}` : `${count} contribution${count > 1 ? "s" : ""} on ${date}`;
+      cell.addEventListener("mouseenter", (e) => {
+        const r = cell.getBoundingClientRect();
+        const wr = wrapper.getBoundingClientRect();
+        tt.textContent = tip;
+        tt.style.left = `${r.left - wr.left + this._cellSize / 2}px`;
+        tt.style.top = `${r.top - wr.top - 6}px`;
+        tt.style.display = "block";
+      });
+      cell.addEventListener("mouseleave", () => {
+        tt.style.display = "none";
+      });
+      cell.addEventListener("click", () => {
+        if (activeTapDate === date) {
+          activeTapDate = "";
+          mobileTip.style.display = "none";
+        } else {
+          activeTapDate = date;
+          mobileTip.textContent = tip;
+          mobileTip.style.display = "block";
+        }
+        this.dispatchEvent(new CustomEvent("day-click", {
+          detail: { date, count },
+          bubbles: true,
+          composed: true
+        }));
+      });
+    });
+  }
+};
+if (typeof customElements !== "undefined" && !customElements.get("git-heatmap")) {
+  customElements.define("git-heatmap", GitHeatmapElement);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GitHeatmapElement
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/git-heatmap-element.ts"],"sourcesContent":["export { GitHeatmapElement } from \"./git-heatmap-element\";\n","import {\n  buildMonthLabels, CELL, GAP, STEP, DAY_LABELS,\n  DEFAULT_LEVELS, DEFAULT_THEME, getLevel,\n} from \"@rsalianto/git-heatmap-core\";\nimport type { HeatmapData, HeatmapDay, LevelConfig } from \"@rsalianto/git-heatmap-core\";\n\nconst BASE_STYLES = `\n  :host {\n    --ghm-color-l0: rgba(255,255,255,0.08);\n    --ghm-color-l1: #1c3d06;\n    --ghm-color-l2: #3a7510;\n    --ghm-color-l3: #6ab81e;\n    --ghm-color-l4: #aafd35;\n    --ghm-text: rgba(255,255,255,0.5);\n    --ghm-tooltip-bg: #1c2128;\n    --ghm-tooltip-border: rgba(255,255,255,0.1);\n    --ghm-tooltip-text: rgba(255,255,255,0.75);\n    --ghm-font: inherit;\n    --ghm-fs: 11px;\n    display: block;\n    position: relative;\n    width: 100%;\n    font-size: var(--ghm-fs);\n    font-family: var(--ghm-font);\n    color: var(--ghm-text);\n    user-select: none;\n    box-sizing: border-box;\n  }\n  * { box-sizing: border-box; }\n  .ghm-scroll { overflow-x: auto; overflow-y: visible; padding-bottom: 4px; }\n  .ghm-grid { display: inline-flex; flex-direction: column; }\n  .ghm-row  { display: flex; }\n  .ghm-col  { display: flex; flex-direction: column; }\n  .ghm-cell {\n    border-radius: 2px;\n    cursor: pointer;\n    transition: opacity 0.15s;\n    flex-shrink: 0;\n  }\n  .ghm-cell:hover { opacity: 0.7; }\n  .ghm-tooltip {\n    pointer-events: none;\n    position: absolute;\n    z-index: 50;\n    transform: translate(-50%, -100%);\n    background: var(--ghm-tooltip-bg);\n    border: 1px solid var(--ghm-tooltip-border);\n    color: var(--ghm-tooltip-text);\n    font-size: 0.9em;\n    border-radius: 4px;\n    padding: 3px 8px;\n    white-space: nowrap;\n  }\n  .ghm-skeleton { opacity: 0.4; }\n`;\n\nexport class GitHeatmapElement extends HTMLElement {\n  static get observedAttributes() {\n    return [\"api-url\", \"cell-size\", \"cell-gap\", \"cell-radius\", \"show-total\", \"show-legend\", \"show-month-labels\", \"show-day-labels\", \"label\"];\n  }\n\n  private _data: HeatmapData | null = null;\n  private _fetchData: (() => Promise<HeatmapData>) | null = null;\n  private _shadow: ShadowRoot;\n  private _tooltip: HTMLDivElement | null = null;\n\n  set data(value: HeatmapData) { this._data = value; this._render(); }\n  get data(): HeatmapData | null { return this._data; }\n\n  set fetchData(fn: () => Promise<HeatmapData>) { this._fetchData = fn; this._load(); }\n\n  constructor() {\n    super();\n    this._shadow = this.attachShadow({ mode: \"open\" });\n  }\n\n  connectedCallback() {\n    const apiUrl = this.getAttribute(\"api-url\");\n    if (apiUrl && !this._data) {\n      this._load();\n    } else if (this._data) {\n      this._render();\n    } else {\n      this._renderSkeleton();\n    }\n  }\n\n  attributeChangedCallback(name: string, _old: string | null, _val: string | null) {\n    if (name === \"api-url\") { this._load(); return; }\n    if (this._data) this._render();\n  }\n\n  private get _cellSize()  { return parseInt(this.getAttribute(\"cell-size\")  ?? String(CELL), 10); }\n  private get _cellGap()   { return parseInt(this.getAttribute(\"cell-gap\")   ?? String(GAP),  10); }\n  private get _cellRadius(){ return parseInt(this.getAttribute(\"cell-radius\") ?? \"2\",           10); }\n  private get _step()      { return this._cellSize + this._cellGap; }\n  private get _showTotal() { return this.getAttribute(\"show-total\")        !== \"false\"; }\n  private get _showLegend(){ return this.getAttribute(\"show-legend\")       !== \"false\"; }\n  private get _showMonths(){ return this.getAttribute(\"show-month-labels\") !== \"false\"; }\n  private get _showDays()  { return this.getAttribute(\"show-day-labels\")   !== \"false\"; }\n  private get _label()     { return this.getAttribute(\"label\") ?? \"Contribution heatmap\"; }\n\n  private async _load() {\n    const apiUrl = this.getAttribute(\"api-url\");\n    const resolver = this._fetchData\n      ?? (apiUrl ? () => fetch(apiUrl).then((r) => r.json()) : null);\n    if (!resolver) return;\n\n    this._renderSkeleton();\n    try {\n      this._data = await resolver() as HeatmapData;\n      this._render();\n    } catch {\n      this._renderError();\n    }\n  }\n\n  private _renderSkeleton() {\n    const cell = this._cellSize, gap = this._cellGap, step = this._step;\n    let cols = \"\";\n    for (let c = 0; c < 53; c++) {\n      let cells = \"\";\n      for (let r = 0; r < 7; r++) {\n        cells += `<div style=\"width:${cell}px;height:${cell}px;border-radius:${this._cellRadius}px;background:var(--ghm-color-l0);flex-shrink:0;\"></div>`;\n      }\n      cols += `<div style=\"display:flex;flex-direction:column;gap:${gap}px;\">${cells}</div>`;\n    }\n    this._shadow.innerHTML = `<style>${BASE_STYLES}</style>\n      <div aria-label=\"${this._label}\" style=\"opacity:0.4;\">\n        <div style=\"display:flex;gap:${gap}px;\">${cols}</div>\n      </div>`;\n  }\n\n  private _renderError() {\n    this._shadow.innerHTML = `<style>${BASE_STYLES}</style>\n      <p style=\"opacity:0.6;padding:1rem 0;\">Could not load contribution data.</p>`;\n  }\n\n  private _render() {\n    if (!this._data) return;\n    const d = this._data;\n    const cell = this._cellSize, gap = this._cellGap, r = this._cellRadius, step = this._step;\n    const levels: LevelConfig[] = DEFAULT_LEVELS;\n\n    const monthLabels = this._showMonths ? buildMonthLabels(d.weeks) : [];\n\n    let monthRow = \"\";\n    if (this._showMonths) {\n      const cells = monthLabels.map(({ label, col }, idx) => {\n        const nextCol = monthLabels[idx + 1]?.col ?? d.weeks.length;\n        return `<div style=\"width:${(nextCol - col) * step}px;white-space:nowrap;font-size:0.9em;\">${label}</div>`;\n      }).join(\"\");\n      monthRow = `<div style=\"display:flex;margin-bottom:${gap}px;margin-left:${this._showDays ? 32 : 0}px;\">${cells}</div>`;\n    }\n\n    let dayLabelCol = \"\";\n    if (this._showDays) {\n      const rows = Array.from({ length: 7 }, (_, dow) =>\n        `<div style=\"height:${cell}px;line-height:${cell}px;width:26px;text-align:right;padding-right:4px;font-size:0.9em;\">${DAY_LABELS[dow] ?? \"\"}</div>`\n      ).join(\"\");\n      dayLabelCol = `<div style=\"display:flex;flex-direction:column;gap:${gap}px;margin-right:6px;\">${rows}</div>`;\n    }\n\n    const weekCols = d.weeks.map((week, _wi) => {\n      const cells = Array.from({ length: 7 }, (_, dow) => {\n        const day = week.days[dow];\n        if (!day?.date) return `<div style=\"width:${cell}px;height:${cell}px;flex-shrink:0;\"></div>`;\n        const lvl = day.level;\n        const tip = day.count === 0\n          ? `No contributions on ${day.date}`\n          : `${day.count} contribution${day.count > 1 ? \"s\" : \"\"} on ${day.date}`;\n        return `<div\n          class=\"ghm-cell\"\n          style=\"width:${cell}px;height:${cell}px;border-radius:${r}px;background:var(--ghm-color-l${lvl});\"\n          data-date=\"${day.date}\"\n          data-count=\"${day.count}\"\n          aria-label=\"${tip}\"\n          role=\"button\"\n          tabindex=\"0\"\n        ></div>`;\n      }).join(\"\");\n      return `<div style=\"display:flex;flex-direction:column;gap:${gap}px;\">${cells}</div>`;\n    }).join(\"\");\n\n    let legend = \"\";\n    if (this._showLegend) {\n      const cells = levels.map((lvl, i) =>\n        `<div style=\"width:${cell}px;height:${cell}px;border-radius:${r}px;background:var(--ghm-color-l${i});\" title=\"${lvl.label}\"></div>`\n      ).join(\"\");\n      legend = `<div style=\"display:flex;align-items:center;justify-content:flex-end;margin-top:8px;\">\n        <div style=\"display:flex;align-items:center;gap:6px;font-size:0.9em;\">\n          <span>Less</span>${cells}<span>More</span>\n        </div>\n      </div>`;\n    }\n\n    const total = this._showTotal\n      ? `<p style=\"margin-bottom:12px;color:var(--ghm-text);\">${d.totalContributions.toLocaleString()} contributions in the last year</p>`\n      : \"\";\n\n    this._shadow.innerHTML = `<style>${BASE_STYLES}</style>\n      <div aria-label=\"${this._label}\" style=\"position:relative;\">\n        ${total}\n        <div class=\"ghm-scroll\">\n          <div class=\"ghm-grid\" style=\"min-width:${d.weeks.length * step}px;\">\n            ${monthRow}\n            <div style=\"display:flex;\">\n              ${dayLabelCol}\n              <div style=\"display:flex;gap:${gap}px;\">${weekCols}</div>\n            </div>\n          </div>\n        </div>\n        <div id=\"ghm-mobile-tip\" style=\"display:none;margin-top:8px;font-size:0.9em;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:4px;padding:6px 12px;\"></div>\n        ${legend}\n        <div class=\"ghm-tooltip\" id=\"ghm-tt\" style=\"display:none;\"></div>\n      </div>`;\n\n    this._attachListeners();\n\n    // auto-scroll to end\n    const scrollEl = this._shadow.querySelector(\".ghm-scroll\") as HTMLElement | null;\n    if (scrollEl) scrollEl.scrollLeft = scrollEl.scrollWidth;\n  }\n\n  private _attachListeners() {\n    const wrapper = this._shadow.firstElementChild as HTMLElement;\n    const tt = this._shadow.getElementById(\"ghm-tt\") as HTMLDivElement;\n    const mobileTip = this._shadow.getElementById(\"ghm-mobile-tip\") as HTMLDivElement;\n    let activeTapDate = \"\";\n\n    this._shadow.querySelectorAll(\".ghm-cell\").forEach((el) => {\n      const cell = el as HTMLElement;\n      const date  = cell.dataset[\"date\"]  ?? \"\";\n      const count = parseInt(cell.dataset[\"count\"] ?? \"0\", 10);\n      const tip = count === 0\n        ? `No contributions on ${date}`\n        : `${count} contribution${count > 1 ? \"s\" : \"\"} on ${date}`;\n\n      cell.addEventListener(\"mouseenter\", (e) => {\n        const r  = cell.getBoundingClientRect();\n        const wr = wrapper.getBoundingClientRect();\n        tt.textContent = tip;\n        tt.style.left  = `${r.left - wr.left + this._cellSize / 2}px`;\n        tt.style.top   = `${r.top - wr.top - 6}px`;\n        tt.style.display = \"block\";\n      });\n      cell.addEventListener(\"mouseleave\", () => { tt.style.display = \"none\"; });\n      cell.addEventListener(\"click\", () => {\n        if (activeTapDate === date) {\n          activeTapDate = \"\";\n          mobileTip.style.display = \"none\";\n        } else {\n          activeTapDate = date;\n          mobileTip.textContent = tip;\n          mobileTip.style.display = \"block\";\n        }\n        this.dispatchEvent(new CustomEvent(\"day-click\", {\n          detail: { date, count },\n          bubbles: true,\n          composed: true,\n        }));\n      });\n    });\n  }\n}\n\nif (typeof customElements !== \"undefined\" && !customElements.get(\"git-heatmap\")) {\n  customElements.define(\"git-heatmap\", GitHeatmapElement);\n}\n"],"mappings":"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","names":[]}

package/dist/index.mjs

@@ -0,0 +1,272 @@
+// src/git-heatmap-element.ts
+import {
+  buildMonthLabels,
+  CELL,
+  GAP,
+  DAY_LABELS,
+  DEFAULT_LEVELS
+} from "@rsalianto/git-heatmap-core";
+var BASE_STYLES = `
+  :host {
+    --ghm-color-l0: rgba(255,255,255,0.08);
+    --ghm-color-l1: #1c3d06;
+    --ghm-color-l2: #3a7510;
+    --ghm-color-l3: #6ab81e;
+    --ghm-color-l4: #aafd35;
+    --ghm-text: rgba(255,255,255,0.5);
+    --ghm-tooltip-bg: #1c2128;
+    --ghm-tooltip-border: rgba(255,255,255,0.1);
+    --ghm-tooltip-text: rgba(255,255,255,0.75);
+    --ghm-font: inherit;
+    --ghm-fs: 11px;
+    display: block;
+    position: relative;
+    width: 100%;
+    font-size: var(--ghm-fs);
+    font-family: var(--ghm-font);
+    color: var(--ghm-text);
+    user-select: none;
+    box-sizing: border-box;
+  }
+  * { box-sizing: border-box; }
+  .ghm-scroll { overflow-x: auto; overflow-y: visible; padding-bottom: 4px; }
+  .ghm-grid { display: inline-flex; flex-direction: column; }
+  .ghm-row  { display: flex; }
+  .ghm-col  { display: flex; flex-direction: column; }
+  .ghm-cell {
+    border-radius: 2px;
+    cursor: pointer;
+    transition: opacity 0.15s;
+    flex-shrink: 0;
+  }
+  .ghm-cell:hover { opacity: 0.7; }
+  .ghm-tooltip {
+    pointer-events: none;
+    position: absolute;
+    z-index: 50;
+    transform: translate(-50%, -100%);
+    background: var(--ghm-tooltip-bg);
+    border: 1px solid var(--ghm-tooltip-border);
+    color: var(--ghm-tooltip-text);
+    font-size: 0.9em;
+    border-radius: 4px;
+    padding: 3px 8px;
+    white-space: nowrap;
+  }
+  .ghm-skeleton { opacity: 0.4; }
+`;
+var GitHeatmapElement = class extends HTMLElement {
+  constructor() {
+    super();
+    this._data = null;
+    this._fetchData = null;
+    this._tooltip = null;
+    this._shadow = this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return ["api-url", "cell-size", "cell-gap", "cell-radius", "show-total", "show-legend", "show-month-labels", "show-day-labels", "label"];
+  }
+  set data(value) {
+    this._data = value;
+    this._render();
+  }
+  get data() {
+    return this._data;
+  }
+  set fetchData(fn) {
+    this._fetchData = fn;
+    this._load();
+  }
+  connectedCallback() {
+    const apiUrl = this.getAttribute("api-url");
+    if (apiUrl && !this._data) {
+      this._load();
+    } else if (this._data) {
+      this._render();
+    } else {
+      this._renderSkeleton();
+    }
+  }
+  attributeChangedCallback(name, _old, _val) {
+    if (name === "api-url") {
+      this._load();
+      return;
+    }
+    if (this._data) this._render();
+  }
+  get _cellSize() {
+    return parseInt(this.getAttribute("cell-size") ?? String(CELL), 10);
+  }
+  get _cellGap() {
+    return parseInt(this.getAttribute("cell-gap") ?? String(GAP), 10);
+  }
+  get _cellRadius() {
+    return parseInt(this.getAttribute("cell-radius") ?? "2", 10);
+  }
+  get _step() {
+    return this._cellSize + this._cellGap;
+  }
+  get _showTotal() {
+    return this.getAttribute("show-total") !== "false";
+  }
+  get _showLegend() {
+    return this.getAttribute("show-legend") !== "false";
+  }
+  get _showMonths() {
+    return this.getAttribute("show-month-labels") !== "false";
+  }
+  get _showDays() {
+    return this.getAttribute("show-day-labels") !== "false";
+  }
+  get _label() {
+    return this.getAttribute("label") ?? "Contribution heatmap";
+  }
+  async _load() {
+    const apiUrl = this.getAttribute("api-url");
+    const resolver = this._fetchData ?? (apiUrl ? () => fetch(apiUrl).then((r) => r.json()) : null);
+    if (!resolver) return;
+    this._renderSkeleton();
+    try {
+      this._data = await resolver();
+      this._render();
+    } catch {
+      this._renderError();
+    }
+  }
+  _renderSkeleton() {
+    const cell = this._cellSize, gap = this._cellGap, step = this._step;
+    let cols = "";
+    for (let c = 0; c < 53; c++) {
+      let cells = "";
+      for (let r = 0; r < 7; r++) {
+        cells += `<div style="width:${cell}px;height:${cell}px;border-radius:${this._cellRadius}px;background:var(--ghm-color-l0);flex-shrink:0;"></div>`;
+      }
+      cols += `<div style="display:flex;flex-direction:column;gap:${gap}px;">${cells}</div>`;
+    }
+    this._shadow.innerHTML = `<style>${BASE_STYLES}</style>
+      <div aria-label="${this._label}" style="opacity:0.4;">
+        <div style="display:flex;gap:${gap}px;">${cols}</div>
+      </div>`;
+  }
+  _renderError() {
+    this._shadow.innerHTML = `<style>${BASE_STYLES}</style>
+      <p style="opacity:0.6;padding:1rem 0;">Could not load contribution data.</p>`;
+  }
+  _render() {
+    if (!this._data) return;
+    const d = this._data;
+    const cell = this._cellSize, gap = this._cellGap, r = this._cellRadius, step = this._step;
+    const levels = DEFAULT_LEVELS;
+    const monthLabels = this._showMonths ? buildMonthLabels(d.weeks) : [];
+    let monthRow = "";
+    if (this._showMonths) {
+      const cells = monthLabels.map(({ label, col }, idx) => {
+        const nextCol = monthLabels[idx + 1]?.col ?? d.weeks.length;
+        return `<div style="width:${(nextCol - col) * step}px;white-space:nowrap;font-size:0.9em;">${label}</div>`;
+      }).join("");
+      monthRow = `<div style="display:flex;margin-bottom:${gap}px;margin-left:${this._showDays ? 32 : 0}px;">${cells}</div>`;
+    }
+    let dayLabelCol = "";
+    if (this._showDays) {
+      const rows = Array.from(
+        { length: 7 },
+        (_, dow) => `<div style="height:${cell}px;line-height:${cell}px;width:26px;text-align:right;padding-right:4px;font-size:0.9em;">${DAY_LABELS[dow] ?? ""}</div>`
+      ).join("");
+      dayLabelCol = `<div style="display:flex;flex-direction:column;gap:${gap}px;margin-right:6px;">${rows}</div>`;
+    }
+    const weekCols = d.weeks.map((week, _wi) => {
+      const cells = Array.from({ length: 7 }, (_, dow) => {
+        const day = week.days[dow];
+        if (!day?.date) return `<div style="width:${cell}px;height:${cell}px;flex-shrink:0;"></div>`;
+        const lvl = day.level;
+        const tip = day.count === 0 ? `No contributions on ${day.date}` : `${day.count} contribution${day.count > 1 ? "s" : ""} on ${day.date}`;
+        return `<div
+          class="ghm-cell"
+          style="width:${cell}px;height:${cell}px;border-radius:${r}px;background:var(--ghm-color-l${lvl});"
+          data-date="${day.date}"
+          data-count="${day.count}"
+          aria-label="${tip}"
+          role="button"
+          tabindex="0"
+        ></div>`;
+      }).join("");
+      return `<div style="display:flex;flex-direction:column;gap:${gap}px;">${cells}</div>`;
+    }).join("");
+    let legend = "";
+    if (this._showLegend) {
+      const cells = levels.map(
+        (lvl, i) => `<div style="width:${cell}px;height:${cell}px;border-radius:${r}px;background:var(--ghm-color-l${i});" title="${lvl.label}"></div>`
+      ).join("");
+      legend = `<div style="display:flex;align-items:center;justify-content:flex-end;margin-top:8px;">
+        <div style="display:flex;align-items:center;gap:6px;font-size:0.9em;">
+          <span>Less</span>${cells}<span>More</span>
+        </div>
+      </div>`;
+    }
+    const total = this._showTotal ? `<p style="margin-bottom:12px;color:var(--ghm-text);">${d.totalContributions.toLocaleString()} contributions in the last year</p>` : "";
+    this._shadow.innerHTML = `<style>${BASE_STYLES}</style>
+      <div aria-label="${this._label}" style="position:relative;">
+        ${total}
+        <div class="ghm-scroll">
+          <div class="ghm-grid" style="min-width:${d.weeks.length * step}px;">
+            ${monthRow}
+            <div style="display:flex;">
+              ${dayLabelCol}
+              <div style="display:flex;gap:${gap}px;">${weekCols}</div>
+            </div>
+          </div>
+        </div>
+        <div id="ghm-mobile-tip" style="display:none;margin-top:8px;font-size:0.9em;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:4px;padding:6px 12px;"></div>
+        ${legend}
+        <div class="ghm-tooltip" id="ghm-tt" style="display:none;"></div>
+      </div>`;
+    this._attachListeners();
+    const scrollEl = this._shadow.querySelector(".ghm-scroll");
+    if (scrollEl) scrollEl.scrollLeft = scrollEl.scrollWidth;
+  }
+  _attachListeners() {
+    const wrapper = this._shadow.firstElementChild;
+    const tt = this._shadow.getElementById("ghm-tt");
+    const mobileTip = this._shadow.getElementById("ghm-mobile-tip");
+    let activeTapDate = "";
+    this._shadow.querySelectorAll(".ghm-cell").forEach((el) => {
+      const cell = el;
+      const date = cell.dataset["date"] ?? "";
+      const count = parseInt(cell.dataset["count"] ?? "0", 10);
+      const tip = count === 0 ? `No contributions on ${date}` : `${count} contribution${count > 1 ? "s" : ""} on ${date}`;
+      cell.addEventListener("mouseenter", (e) => {
+        const r = cell.getBoundingClientRect();
+        const wr = wrapper.getBoundingClientRect();
+        tt.textContent = tip;
+        tt.style.left = `${r.left - wr.left + this._cellSize / 2}px`;
+        tt.style.top = `${r.top - wr.top - 6}px`;
+        tt.style.display = "block";
+      });
+      cell.addEventListener("mouseleave", () => {
+        tt.style.display = "none";
+      });
+      cell.addEventListener("click", () => {
+        if (activeTapDate === date) {
+          activeTapDate = "";
+          mobileTip.style.display = "none";
+        } else {
+          activeTapDate = date;
+          mobileTip.textContent = tip;
+          mobileTip.style.display = "block";
+        }
+        this.dispatchEvent(new CustomEvent("day-click", {
+          detail: { date, count },
+          bubbles: true,
+          composed: true
+        }));
+      });
+    });
+  }
+};
+if (typeof customElements !== "undefined" && !customElements.get("git-heatmap")) {
+  customElements.define("git-heatmap", GitHeatmapElement);
+}
+export {
+  GitHeatmapElement
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/git-heatmap-element.ts"],"sourcesContent":["import {\n  buildMonthLabels, CELL, GAP, STEP, DAY_LABELS,\n  DEFAULT_LEVELS, DEFAULT_THEME, getLevel,\n} from \"@rsalianto/git-heatmap-core\";\nimport type { HeatmapData, HeatmapDay, LevelConfig } from \"@rsalianto/git-heatmap-core\";\n\nconst BASE_STYLES = `\n  :host {\n    --ghm-color-l0: rgba(255,255,255,0.08);\n    --ghm-color-l1: #1c3d06;\n    --ghm-color-l2: #3a7510;\n    --ghm-color-l3: #6ab81e;\n    --ghm-color-l4: #aafd35;\n    --ghm-text: rgba(255,255,255,0.5);\n    --ghm-tooltip-bg: #1c2128;\n    --ghm-tooltip-border: rgba(255,255,255,0.1);\n    --ghm-tooltip-text: rgba(255,255,255,0.75);\n    --ghm-font: inherit;\n    --ghm-fs: 11px;\n    display: block;\n    position: relative;\n    width: 100%;\n    font-size: var(--ghm-fs);\n    font-family: var(--ghm-font);\n    color: var(--ghm-text);\n    user-select: none;\n    box-sizing: border-box;\n  }\n  * { box-sizing: border-box; }\n  .ghm-scroll { overflow-x: auto; overflow-y: visible; padding-bottom: 4px; }\n  .ghm-grid { display: inline-flex; flex-direction: column; }\n  .ghm-row  { display: flex; }\n  .ghm-col  { display: flex; flex-direction: column; }\n  .ghm-cell {\n    border-radius: 2px;\n    cursor: pointer;\n    transition: opacity 0.15s;\n    flex-shrink: 0;\n  }\n  .ghm-cell:hover { opacity: 0.7; }\n  .ghm-tooltip {\n    pointer-events: none;\n    position: absolute;\n    z-index: 50;\n    transform: translate(-50%, -100%);\n    background: var(--ghm-tooltip-bg);\n    border: 1px solid var(--ghm-tooltip-border);\n    color: var(--ghm-tooltip-text);\n    font-size: 0.9em;\n    border-radius: 4px;\n    padding: 3px 8px;\n    white-space: nowrap;\n  }\n  .ghm-skeleton { opacity: 0.4; }\n`;\n\nexport class GitHeatmapElement extends HTMLElement {\n  static get observedAttributes() {\n    return [\"api-url\", \"cell-size\", \"cell-gap\", \"cell-radius\", \"show-total\", \"show-legend\", \"show-month-labels\", \"show-day-labels\", \"label\"];\n  }\n\n  private _data: HeatmapData | null = null;\n  private _fetchData: (() => Promise<HeatmapData>) | null = null;\n  private _shadow: ShadowRoot;\n  private _tooltip: HTMLDivElement | null = null;\n\n  set data(value: HeatmapData) { this._data = value; this._render(); }\n  get data(): HeatmapData | null { return this._data; }\n\n  set fetchData(fn: () => Promise<HeatmapData>) { this._fetchData = fn; this._load(); }\n\n  constructor() {\n    super();\n    this._shadow = this.attachShadow({ mode: \"open\" });\n  }\n\n  connectedCallback() {\n    const apiUrl = this.getAttribute(\"api-url\");\n    if (apiUrl && !this._data) {\n      this._load();\n    } else if (this._data) {\n      this._render();\n    } else {\n      this._renderSkeleton();\n    }\n  }\n\n  attributeChangedCallback(name: string, _old: string | null, _val: string | null) {\n    if (name === \"api-url\") { this._load(); return; }\n    if (this._data) this._render();\n  }\n\n  private get _cellSize()  { return parseInt(this.getAttribute(\"cell-size\")  ?? String(CELL), 10); }\n  private get _cellGap()   { return parseInt(this.getAttribute(\"cell-gap\")   ?? String(GAP),  10); }\n  private get _cellRadius(){ return parseInt(this.getAttribute(\"cell-radius\") ?? \"2\",           10); }\n  private get _step()      { return this._cellSize + this._cellGap; }\n  private get _showTotal() { return this.getAttribute(\"show-total\")        !== \"false\"; }\n  private get _showLegend(){ return this.getAttribute(\"show-legend\")       !== \"false\"; }\n  private get _showMonths(){ return this.getAttribute(\"show-month-labels\") !== \"false\"; }\n  private get _showDays()  { return this.getAttribute(\"show-day-labels\")   !== \"false\"; }\n  private get _label()     { return this.getAttribute(\"label\") ?? \"Contribution heatmap\"; }\n\n  private async _load() {\n    const apiUrl = this.getAttribute(\"api-url\");\n    const resolver = this._fetchData\n      ?? (apiUrl ? () => fetch(apiUrl).then((r) => r.json()) : null);\n    if (!resolver) return;\n\n    this._renderSkeleton();\n    try {\n      this._data = await resolver() as HeatmapData;\n      this._render();\n    } catch {\n      this._renderError();\n    }\n  }\n\n  private _renderSkeleton() {\n    const cell = this._cellSize, gap = this._cellGap, step = this._step;\n    let cols = \"\";\n    for (let c = 0; c < 53; c++) {\n      let cells = \"\";\n      for (let r = 0; r < 7; r++) {\n        cells += `<div style=\"width:${cell}px;height:${cell}px;border-radius:${this._cellRadius}px;background:var(--ghm-color-l0);flex-shrink:0;\"></div>`;\n      }\n      cols += `<div style=\"display:flex;flex-direction:column;gap:${gap}px;\">${cells}</div>`;\n    }\n    this._shadow.innerHTML = `<style>${BASE_STYLES}</style>\n      <div aria-label=\"${this._label}\" style=\"opacity:0.4;\">\n        <div style=\"display:flex;gap:${gap}px;\">${cols}</div>\n      </div>`;\n  }\n\n  private _renderError() {\n    this._shadow.innerHTML = `<style>${BASE_STYLES}</style>\n      <p style=\"opacity:0.6;padding:1rem 0;\">Could not load contribution data.</p>`;\n  }\n\n  private _render() {\n    if (!this._data) return;\n    const d = this._data;\n    const cell = this._cellSize, gap = this._cellGap, r = this._cellRadius, step = this._step;\n    const levels: LevelConfig[] = DEFAULT_LEVELS;\n\n    const monthLabels = this._showMonths ? buildMonthLabels(d.weeks) : [];\n\n    let monthRow = \"\";\n    if (this._showMonths) {\n      const cells = monthLabels.map(({ label, col }, idx) => {\n        const nextCol = monthLabels[idx + 1]?.col ?? d.weeks.length;\n        return `<div style=\"width:${(nextCol - col) * step}px;white-space:nowrap;font-size:0.9em;\">${label}</div>`;\n      }).join(\"\");\n      monthRow = `<div style=\"display:flex;margin-bottom:${gap}px;margin-left:${this._showDays ? 32 : 0}px;\">${cells}</div>`;\n    }\n\n    let dayLabelCol = \"\";\n    if (this._showDays) {\n      const rows = Array.from({ length: 7 }, (_, dow) =>\n        `<div style=\"height:${cell}px;line-height:${cell}px;width:26px;text-align:right;padding-right:4px;font-size:0.9em;\">${DAY_LABELS[dow] ?? \"\"}</div>`\n      ).join(\"\");\n      dayLabelCol = `<div style=\"display:flex;flex-direction:column;gap:${gap}px;margin-right:6px;\">${rows}</div>`;\n    }\n\n    const weekCols = d.weeks.map((week, _wi) => {\n      const cells = Array.from({ length: 7 }, (_, dow) => {\n        const day = week.days[dow];\n        if (!day?.date) return `<div style=\"width:${cell}px;height:${cell}px;flex-shrink:0;\"></div>`;\n        const lvl = day.level;\n        const tip = day.count === 0\n          ? `No contributions on ${day.date}`\n          : `${day.count} contribution${day.count > 1 ? \"s\" : \"\"} on ${day.date}`;\n        return `<div\n          class=\"ghm-cell\"\n          style=\"width:${cell}px;height:${cell}px;border-radius:${r}px;background:var(--ghm-color-l${lvl});\"\n          data-date=\"${day.date}\"\n          data-count=\"${day.count}\"\n          aria-label=\"${tip}\"\n          role=\"button\"\n          tabindex=\"0\"\n        ></div>`;\n      }).join(\"\");\n      return `<div style=\"display:flex;flex-direction:column;gap:${gap}px;\">${cells}</div>`;\n    }).join(\"\");\n\n    let legend = \"\";\n    if (this._showLegend) {\n      const cells = levels.map((lvl, i) =>\n        `<div style=\"width:${cell}px;height:${cell}px;border-radius:${r}px;background:var(--ghm-color-l${i});\" title=\"${lvl.label}\"></div>`\n      ).join(\"\");\n      legend = `<div style=\"display:flex;align-items:center;justify-content:flex-end;margin-top:8px;\">\n        <div style=\"display:flex;align-items:center;gap:6px;font-size:0.9em;\">\n          <span>Less</span>${cells}<span>More</span>\n        </div>\n      </div>`;\n    }\n\n    const total = this._showTotal\n      ? `<p style=\"margin-bottom:12px;color:var(--ghm-text);\">${d.totalContributions.toLocaleString()} contributions in the last year</p>`\n      : \"\";\n\n    this._shadow.innerHTML = `<style>${BASE_STYLES}</style>\n      <div aria-label=\"${this._label}\" style=\"position:relative;\">\n        ${total}\n        <div class=\"ghm-scroll\">\n          <div class=\"ghm-grid\" style=\"min-width:${d.weeks.length * step}px;\">\n            ${monthRow}\n            <div style=\"display:flex;\">\n              ${dayLabelCol}\n              <div style=\"display:flex;gap:${gap}px;\">${weekCols}</div>\n            </div>\n          </div>\n        </div>\n        <div id=\"ghm-mobile-tip\" style=\"display:none;margin-top:8px;font-size:0.9em;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:4px;padding:6px 12px;\"></div>\n        ${legend}\n        <div class=\"ghm-tooltip\" id=\"ghm-tt\" style=\"display:none;\"></div>\n      </div>`;\n\n    this._attachListeners();\n\n    // auto-scroll to end\n    const scrollEl = this._shadow.querySelector(\".ghm-scroll\") as HTMLElement | null;\n    if (scrollEl) scrollEl.scrollLeft = scrollEl.scrollWidth;\n  }\n\n  private _attachListeners() {\n    const wrapper = this._shadow.firstElementChild as HTMLElement;\n    const tt = this._shadow.getElementById(\"ghm-tt\") as HTMLDivElement;\n    const mobileTip = this._shadow.getElementById(\"ghm-mobile-tip\") as HTMLDivElement;\n    let activeTapDate = \"\";\n\n    this._shadow.querySelectorAll(\".ghm-cell\").forEach((el) => {\n      const cell = el as HTMLElement;\n      const date  = cell.dataset[\"date\"]  ?? \"\";\n      const count = parseInt(cell.dataset[\"count\"] ?? \"0\", 10);\n      const tip = count === 0\n        ? `No contributions on ${date}`\n        : `${count} contribution${count > 1 ? \"s\" : \"\"} on ${date}`;\n\n      cell.addEventListener(\"mouseenter\", (e) => {\n        const r  = cell.getBoundingClientRect();\n        const wr = wrapper.getBoundingClientRect();\n        tt.textContent = tip;\n        tt.style.left  = `${r.left - wr.left + this._cellSize / 2}px`;\n        tt.style.top   = `${r.top - wr.top - 6}px`;\n        tt.style.display = \"block\";\n      });\n      cell.addEventListener(\"mouseleave\", () => { tt.style.display = \"none\"; });\n      cell.addEventListener(\"click\", () => {\n        if (activeTapDate === date) {\n          activeTapDate = \"\";\n          mobileTip.style.display = \"none\";\n        } else {\n          activeTapDate = date;\n          mobileTip.textContent = tip;\n          mobileTip.style.display = \"block\";\n        }\n        this.dispatchEvent(new CustomEvent(\"day-click\", {\n          detail: { date, count },\n          bubbles: true,\n          composed: true,\n        }));\n      });\n    });\n  }\n}\n\nif (typeof customElements !== \"undefined\" && !customElements.get(\"git-heatmap\")) {\n  customElements.define(\"git-heatmap\", GitHeatmapElement);\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@rsalianto/git-heatmap-vanilla",
+  "version": "0.1.0",
+  "description": "Vanilla JS Web Component for git contribution heatmap",
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": ["dist", "README.md"],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "@rsalianto/git-heatmap-core": "*"
+  },
+  "devDependencies": {
+    "tsup": "*",
+    "typescript": "*",
+    "vitest": "*"
+  }
+}