@manzanohq/charts 0.1.1

package/cdn/chunks/chunk.J4CSMRZB.js

@@ -0,0 +1,60 @@
+var n=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var l=(o,t,i)=>t in o?n(o,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):o[t]=i;var m=(o,t,i,r)=>{for(var a=r>1?void 0:r?p(t,i):t,e=o.length-1,s;e>=0;e--)(s=o[e])&&(a=(r?s(t,i,a):s(a))||a);return r&&a&&n(t,i,a),a};var d=(o,t,i)=>l(o,typeof t!="symbol"?t+"":t,i);import{css as c}from"lit";import h from"@manzanohq/components/dist/styles/component.styles.js";var b=[h,c`
+    :host {
+      display: block;
+      position: relative;
+      width: 100%;
+    }
+
+    .chart-container {
+      position: relative;
+      width: 100%;
+      height: 100%;
+    }
+
+    canvas {
+      display: block;
+    }
+
+    .chart-tooltip {
+      position: absolute;
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity 150ms ease, transform 150ms ease;
+      z-index: 10;
+    }
+
+    .chart-tooltip.visible {
+      opacity: 1;
+    }
+
+    .chart-tooltip__inner {
+      background: var(--mz-color-gray-900, #1c1915);
+      color: var(--mz-color-gray-50, #faf9f7);
+      padding: 6px 10px;
+      border-radius: var(--mz-radius-md, 0.5rem);
+      font-family: var(--mz-font-sans, sans-serif);
+      font-size: var(--mz-font-size-xs, 0.75rem);
+      line-height: 1.4;
+      box-shadow: 0 4px 12px rgb(28 25 21 / 0.15);
+      max-width: 200px;
+    }
+
+    .chart-tooltip__title {
+      font-weight: 600;
+      margin-bottom: 2px;
+    }
+
+    .chart-tooltip__item {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .chart-tooltip__swatch {
+      width: 8px;
+      height: 8px;
+      border-radius: 2px;
+      flex-shrink: 0;
+    }
+  `];export{m as a,d as b,b as c};
+//# sourceMappingURL=chunk.J4CSMRZB.js.map

package/cdn/chunks/chunk.J4CSMRZB.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/chart.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\nimport componentStyles from '@manzanohq/components/dist/styles/component.styles.js';\n\nexport default [\n  componentStyles,\n  css`\n    :host {\n      display: block;\n      position: relative;\n      width: 100%;\n    }\n\n    .chart-container {\n      position: relative;\n      width: 100%;\n      height: 100%;\n    }\n\n    canvas {\n      display: block;\n    }\n\n    .chart-tooltip {\n      position: absolute;\n      pointer-events: none;\n      opacity: 0;\n      transition: opacity 150ms ease, transform 150ms ease;\n      z-index: 10;\n    }\n\n    .chart-tooltip.visible {\n      opacity: 1;\n    }\n\n    .chart-tooltip__inner {\n      background: var(--mz-color-gray-900, #1c1915);\n      color: var(--mz-color-gray-50, #faf9f7);\n      padding: 6px 10px;\n      border-radius: var(--mz-radius-md, 0.5rem);\n      font-family: var(--mz-font-sans, sans-serif);\n      font-size: var(--mz-font-size-xs, 0.75rem);\n      line-height: 1.4;\n      box-shadow: 0 4px 12px rgb(28 25 21 / 0.15);\n      max-width: 200px;\n    }\n\n    .chart-tooltip__title {\n      font-weight: 600;\n      margin-bottom: 2px;\n    }\n\n    .chart-tooltip__item {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .chart-tooltip__swatch {\n      width: 8px;\n      height: 8px;\n      border-radius: 2px;\n      flex-shrink: 0;\n    }\n  `\n];\n"],
+  "mappings": "gVAAA,OAAS,OAAAA,MAAW,MACpB,OAAOC,MAAqB,wDAE5B,IAAOC,EAAQ,CACbD,EACAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA2DF",
+  "names": ["css", "componentStyles", "chart_styles_default"]
+}

package/cdn/index.d.ts

@@ -0,0 +1,3 @@
+export { MzChart } from './chart.component.js';
+export type { MzChartType, ChartData, ChartOptions, ChartClickDetail } from './chart.types.js';
+//# sourceMappingURL=index.d.ts.map

package/cdn/index.js

@@ -0,0 +1,2 @@
+import{a as t}from"./chunks/chunk.DVUTXYD4.js";import"./chunks/chunk.J4CSMRZB.js";export{t as MzChart};
+//# sourceMappingURL=index.js.map

package/cdn/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/chart.component.d.ts

@@ -0,0 +1,59 @@
+import { PropertyValues } from 'lit';
+import { ManzanoElement } from '@manzanohq/components/dist/internal/manzano-element.js';
+import { Chart } from 'chart.js';
+import type { ChartData, ChartOptions } from 'chart.js';
+import type { MzChartType } from './chart.types.js';
+/**
+ * @tag mz-chart
+ * @summary Chart.js wrapper with Manzano theming, shadow DOM support, and responsive resize.
+ *
+ * @event mz-chart-click - Fires when a data point is clicked. Detail: ChartClickDetail
+ */
+export declare class MzChart extends ManzanoElement {
+    static styles: import("lit").CSSResult[];
+    /** The type of chart to render. */
+    type: MzChartType;
+    /** Chart.js data object — { labels, datasets }. */
+    data: ChartData;
+    /** Chart.js options object (merged with Manzano defaults). */
+    options: ChartOptions;
+    private canvas;
+    private tooltipEl;
+    private tooltipVisible;
+    private chart;
+    private resizeObserver;
+    private themeObserver;
+    firstUpdated(_changedProps: PropertyValues): void;
+    disconnectedCallback(): void;
+    /** Returns the underlying Chart.js instance for advanced use cases. */
+    getChartInstance(): Chart | null;
+    /** Force the chart to re-render. */
+    updateChart(): void;
+    handleDataChange(): void;
+    handleTypeChange(): void;
+    handleOptionsChange(): void;
+    private readThemeColor;
+    private readThemeFont;
+    /** Read palette colors from the current theme. */
+    private getPaletteColors;
+    /** Add alpha to a hex or CSS color string. */
+    private withAlpha;
+    /**
+     * Apply Manzano theme colors to datasets that don't already have user-specified colors.
+     * Returns a deep-ish copy so we don't mutate the user's original data object.
+     */
+    private applyThemeColors;
+    /** Build the merged Chart.js options with Manzano defaults. */
+    private buildOptions;
+    /** Simple deep merge of two objects (b overrides a). */
+    private deepMerge;
+    /** Custom tooltip rendered inside shadow DOM. */
+    private handleExternalTooltip;
+    private createChart;
+    private destroyChart;
+    private recreateChart;
+    private setupResizeObserver;
+    private setupThemeObserver;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=chart.component.d.ts.map

package/dist/chart.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.component.d.ts","sourceRoot":"","sources":["../src/chart.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAE3C,OAAO,EAAE,cAAc,EAAE,MAAM,wDAAwD,CAAC;AAExF,OAAO,EAAE,KAAK,EAAiB,MAAM,UAAU,CAAC;AAChD,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAA6B,MAAM,UAAU,CAAC;AACnF,OAAO,KAAK,EAAE,WAAW,EAAoB,MAAM,kBAAkB,CAAC;AAQtE;;;;;GAKG;AACH,qBAAa,OAAQ,SAAQ,cAAc;IACzC,OAAgB,MAAM,4BAAU;IAEhC,mCAAmC;IACN,IAAI,EAAE,WAAW,CAAS;IAEvD,mDAAmD;IACnB,IAAI,EAAE,SAAS,CAAgC;IAE/E,8DAA8D;IAC9B,OAAO,EAAE,YAAY,CAAM;IAE1C,OAAO,CAAC,MAAM,CAAqB;IAC3B,OAAO,CAAC,SAAS,CAAkB;IAEnD,OAAO,CAAC,cAAc,CAAS;IAExC,OAAO,CAAC,KAAK,CAAsB;IACnC,OAAO,CAAC,cAAc,CAA+B;IACrD,OAAO,CAAC,aAAa,CAAiC;IAE7C,YAAY,CAAC,aAAa,EAAE,cAAc;IAO1C,oBAAoB;IAS7B,uEAAuE;IACvE,gBAAgB,IAAI,KAAK,GAAG,IAAI;IAIhC,oCAAoC;IACpC,WAAW;IAOX,gBAAgB;IAOhB,gBAAgB;IAKhB,mBAAmB;IAInB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,aAAa;IAIrB,kDAAkD;IAClD,OAAO,CAAC,gBAAgB;IAIxB,8CAA8C;IAC9C,OAAO,CAAC,SAAS;IAYjB;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAoDxB,+DAA+D;IAC/D,OAAO,CAAC,YAAY;IA2FpB,wDAAwD;IACxD,OAAO,CAAC,SAAS;IAmBjB,iDAAiD;IAEjD,OAAO,CAAC,qBAAqB;IAuC7B,OAAO,CAAC,WAAW;IAcnB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,kBAAkB;IAUjB,MAAM;CAQhB"}

package/dist/chart.component.js

@@ -0,0 +1,336 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+import { html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { ManzanoElement } from "@manzanohq/components/dist/internal/manzano-element.js";
+import { watch } from "@manzanohq/components/dist/internal/watch.js";
+import { Chart, registerables } from "chart.js";
+import styles from "./chart.styles.js";
+Chart.register(...registerables);
+const PALETTE_KEYS = ["primary", "danger", "success", "warning", "neutral"];
+class MzChart extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.type = "bar";
+    this.data = { labels: [], datasets: [] };
+    this.options = {};
+    this.tooltipVisible = false;
+    this.chart = null;
+    this.resizeObserver = null;
+    this.themeObserver = null;
+  }
+  firstUpdated(_changedProps) {
+    super.firstUpdated(_changedProps);
+    this.createChart();
+    this.setupResizeObserver();
+    this.setupThemeObserver();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.destroyChart();
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = null;
+    this.themeObserver?.disconnect();
+    this.themeObserver = null;
+  }
+  /** Returns the underlying Chart.js instance for advanced use cases. */
+  getChartInstance() {
+    return this.chart;
+  }
+  /** Force the chart to re-render. */
+  updateChart() {
+    if (this.chart) {
+      this.chart.update();
+    }
+  }
+  handleDataChange() {
+    if (!this.chart) return;
+    this.chart.data = this.applyThemeColors(this.data);
+    this.chart.update();
+  }
+  handleTypeChange() {
+    this.recreateChart();
+  }
+  handleOptionsChange() {
+    this.recreateChart();
+  }
+  readThemeColor(name) {
+    return getComputedStyle(this).getPropertyValue(`--mz-color-${name}`).trim();
+  }
+  readThemeFont() {
+    return getComputedStyle(this).getPropertyValue("--mz-font-sans").trim() || "sans-serif";
+  }
+  /** Read palette colors from the current theme. */
+  getPaletteColors() {
+    return PALETTE_KEYS.map((key) => this.readThemeColor(key)).filter(Boolean);
+  }
+  /** Add alpha to a hex or CSS color string. */
+  withAlpha(color, alpha) {
+    const hex = color.replace(/^#/, "");
+    if (/^[0-9a-f]{6}$/i.test(hex)) {
+      const r = parseInt(hex.slice(0, 2), 16);
+      const g = parseInt(hex.slice(2, 4), 16);
+      const b = parseInt(hex.slice(4, 6), 16);
+      return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    }
+    return color;
+  }
+  /**
+   * Apply Manzano theme colors to datasets that don't already have user-specified colors.
+   * Returns a deep-ish copy so we don't mutate the user's original data object.
+   */
+  applyThemeColors(data) {
+    const palette = this.getPaletteColors();
+    if (palette.length === 0) return data;
+    const surfaceColor = this.readThemeColor("surface") || "#ffffff";
+    const isPieType = this.type === "pie" || this.type === "doughnut" || this.type === "polarArea";
+    const isLineType = this.type === "line" || this.type === "radar";
+    const datasets = (data.datasets ?? []).map((ds, i) => {
+      const themed = { ...ds };
+      if (isPieType) {
+        if (!ds.backgroundColor) {
+          const numPoints = Array.isArray(ds.data) ? ds.data.length : 0;
+          themed.backgroundColor = Array.from({ length: numPoints }, (_, j) => palette[j % palette.length]);
+        }
+        if (!ds.borderColor) {
+          themed.borderColor = surfaceColor;
+        }
+        if (ds.borderWidth === void 0) {
+          themed.borderWidth = 2;
+        }
+      } else if (isLineType) {
+        const color = palette[i % palette.length];
+        if (!ds.borderColor) {
+          themed.borderColor = color;
+        }
+        if (!ds.backgroundColor) {
+          themed.backgroundColor = this.withAlpha(color, 0.12);
+        }
+        if (ds.pointBackgroundColor === void 0) {
+          themed.pointBackgroundColor = color;
+        }
+      } else {
+        const color = palette[i % palette.length];
+        if (!ds.backgroundColor) {
+          themed.backgroundColor = color;
+        }
+        if (!ds.borderColor) {
+          themed.borderColor = color;
+        }
+      }
+      return themed;
+    });
+    return { ...data, datasets };
+  }
+  /** Build the merged Chart.js options with Manzano defaults. */
+  buildOptions() {
+    const textColor = this.readThemeColor("text") || "#1c1915";
+    const textSecondary = this.readThemeColor("text-secondary") || "#79726b";
+    const borderColor = this.readThemeColor("border") || "#d5d1cb";
+    const fontFamily = this.readThemeFont();
+    const defaults = {
+      responsive: true,
+      maintainAspectRatio: true,
+      animation: {
+        duration: 300,
+        easing: "easeOutQuart"
+      },
+      font: {
+        family: fontFamily,
+        size: 12
+      },
+      color: textSecondary,
+      plugins: {
+        legend: {
+          labels: {
+            color: textColor,
+            font: { family: fontFamily },
+            boxWidth: 10,
+            boxHeight: 10,
+            useBorderRadius: true,
+            borderRadius: 2,
+            padding: 16,
+            generateLabels: (chart) => {
+              const defaults2 = Chart.defaults.plugins.legend.labels.generateLabels(chart);
+              return defaults2.map((label) => ({
+                ...label,
+                fillStyle: label.strokeStyle || label.fillStyle
+              }));
+            }
+          }
+        },
+        tooltip: {
+          enabled: false,
+          external: (context) => this.handleExternalTooltip(context)
+        }
+      },
+      scales: this.type === "pie" || this.type === "doughnut" ? {} : this.type === "radar" || this.type === "polarArea" ? {
+        r: {
+          ticks: {
+            color: textSecondary,
+            font: { family: fontFamily },
+            backdropColor: "transparent"
+          },
+          grid: { color: borderColor },
+          angleLines: { color: borderColor },
+          pointLabels: { color: textSecondary, font: { family: fontFamily } }
+        }
+      } : {
+        x: {
+          ticks: { color: textSecondary, font: { family: fontFamily } },
+          grid: { color: borderColor },
+          border: { color: borderColor }
+        },
+        y: {
+          ticks: { color: textSecondary, font: { family: fontFamily } },
+          grid: { color: borderColor },
+          border: { color: borderColor }
+        }
+      },
+      onClick: (_event, elements) => {
+        if (elements.length === 0) return;
+        const el = elements[0];
+        const dataset = this.chart?.data.datasets[el.datasetIndex];
+        const value = Array.isArray(dataset?.data) ? dataset.data[el.index] : void 0;
+        const labels = this.chart?.data.labels;
+        const label = Array.isArray(labels) ? String(labels[el.index] ?? "") : "";
+        this.emit("mz-chart-click", {
+          detail: {
+            datasetIndex: el.datasetIndex,
+            index: el.index,
+            value: typeof value === "number" ? value : value?.y ?? 0,
+            label
+          }
+        });
+      }
+    };
+    return this.deepMerge(defaults, this.options);
+  }
+  /** Simple deep merge of two objects (b overrides a). */
+  deepMerge(a, b) {
+    const result = { ...a };
+    for (const key of Object.keys(b)) {
+      if (b[key] !== null && typeof b[key] === "object" && !Array.isArray(b[key]) && a[key] !== null && typeof a[key] === "object" && !Array.isArray(a[key])) {
+        result[key] = this.deepMerge(a[key], b[key]);
+      } else {
+        result[key] = b[key];
+      }
+    }
+    return result;
+  }
+  /** Custom tooltip rendered inside shadow DOM. */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  handleExternalTooltip(context) {
+    const { tooltip } = context;
+    if (tooltip.opacity === 0) {
+      this.tooltipVisible = false;
+      return;
+    }
+    const tooltipEl = this.tooltipEl;
+    if (!tooltipEl) return;
+    tooltipEl.style.left = `${tooltip.caretX}px`;
+    tooltipEl.style.top = `${tooltip.caretY}px`;
+    tooltipEl.style.transform = "translate(-50%, calc(-100% - 8px))";
+    let titleHtml = "";
+    if (tooltip.title?.length) {
+      titleHtml = `<div class="chart-tooltip__title">${tooltip.title.join(", ")}</div>`;
+    }
+    const bodyLines = tooltip.body?.map((b) => b.lines) ?? [];
+    const colors = tooltip.labelColors ?? [];
+    const itemsHtml = bodyLines.map((lines, i) => {
+      const color = colors[i]?.backgroundColor ?? "#888";
+      const bgStr = typeof color === "object" ? "#888" : String(color);
+      return lines.map(
+        (line) => `<div class="chart-tooltip__item">
+          <span class="chart-tooltip__swatch" style="background:${bgStr}"></span>
+          <span>${line}</span>
+        </div>`
+      ).join("");
+    }).join("");
+    tooltipEl.innerHTML = `<div class="chart-tooltip__inner">${titleHtml}${itemsHtml}</div>`;
+    this.tooltipVisible = true;
+  }
+  createChart() {
+    if (!this.canvas) return;
+    const ctx = this.canvas.getContext("2d");
+    if (!ctx) return;
+    this.chart = new Chart(ctx, {
+      type: this.type,
+      data: this.applyThemeColors(this.data),
+      options: this.buildOptions()
+    });
+  }
+  destroyChart() {
+    if (this.chart) {
+      this.chart.destroy();
+      this.chart = null;
+    }
+  }
+  recreateChart() {
+    this.destroyChart();
+    this.createChart();
+  }
+  setupResizeObserver() {
+    this.resizeObserver = new ResizeObserver(() => {
+      this.chart?.resize();
+    });
+    this.resizeObserver.observe(this);
+  }
+  setupThemeObserver() {
+    this.themeObserver = new MutationObserver(() => {
+      this.recreateChart();
+    });
+    this.themeObserver.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme"]
+    });
+  }
+  render() {
+    return html`
+      <div class="chart-container">
+        <canvas></canvas>
+        <div class="chart-tooltip ${this.tooltipVisible ? "visible" : ""}"></div>
+      </div>
+    `;
+  }
+}
+MzChart.styles = styles;
+__decorateClass([
+  property({ reflect: true })
+], MzChart.prototype, "type", 2);
+__decorateClass([
+  property({ attribute: false })
+], MzChart.prototype, "data", 2);
+__decorateClass([
+  property({ attribute: false })
+], MzChart.prototype, "options", 2);
+__decorateClass([
+  query("canvas")
+], MzChart.prototype, "canvas", 2);
+__decorateClass([
+  query(".chart-tooltip")
+], MzChart.prototype, "tooltipEl", 2);
+__decorateClass([
+  state()
+], MzChart.prototype, "tooltipVisible", 2);
+__decorateClass([
+  watch("data")
+], MzChart.prototype, "handleDataChange", 1);
+__decorateClass([
+  watch("type")
+], MzChart.prototype, "handleTypeChange", 1);
+__decorateClass([
+  watch("options")
+], MzChart.prototype, "handleOptionsChange", 1);
+export {
+  MzChart
+};
+//# sourceMappingURL=chart.component.js.map

package/dist/chart.component.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/chart.component.ts"],
+  "sourcesContent": ["import { html, PropertyValues } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { ManzanoElement } from '@manzanohq/components/dist/internal/manzano-element.js';\nimport { watch } from '@manzanohq/components/dist/internal/watch.js';\nimport { Chart, registerables } from 'chart.js';\nimport type { ChartData, ChartOptions, ChartEvent, ActiveElement } from 'chart.js';\nimport type { MzChartType, ChartClickDetail } from './chart.types.js';\nimport styles from './chart.styles.js';\n\nChart.register(...registerables);\n\n// Manzano palette colors for automatic dataset coloring\nconst PALETTE_KEYS = ['primary', 'danger', 'success', 'warning', 'neutral'] as const;\n\n/**\n * @tag mz-chart\n * @summary Chart.js wrapper with Manzano theming, shadow DOM support, and responsive resize.\n *\n * @event mz-chart-click - Fires when a data point is clicked. Detail: ChartClickDetail\n */\nexport class MzChart extends ManzanoElement {\n  static override styles = styles;\n\n  /** The type of chart to render. */\n  @property({ reflect: true }) type: MzChartType = 'bar';\n\n  /** Chart.js data object \u2014 { labels, datasets }. */\n  @property({ attribute: false }) data: ChartData = { labels: [], datasets: [] };\n\n  /** Chart.js options object (merged with Manzano defaults). */\n  @property({ attribute: false }) options: ChartOptions = {};\n\n  @query('canvas') private canvas!: HTMLCanvasElement;\n  @query('.chart-tooltip') private tooltipEl!: HTMLDivElement;\n\n  @state() private tooltipVisible = false;\n\n  private chart: Chart | null = null;\n  private resizeObserver: ResizeObserver | null = null;\n  private themeObserver: MutationObserver | null = null;\n\n  override firstUpdated(_changedProps: PropertyValues) {\n    super.firstUpdated(_changedProps);\n    this.createChart();\n    this.setupResizeObserver();\n    this.setupThemeObserver();\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.destroyChart();\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = null;\n    this.themeObserver?.disconnect();\n    this.themeObserver = null;\n  }\n\n  /** Returns the underlying Chart.js instance for advanced use cases. */\n  getChartInstance(): Chart | null {\n    return this.chart;\n  }\n\n  /** Force the chart to re-render. */\n  updateChart() {\n    if (this.chart) {\n      this.chart.update();\n    }\n  }\n\n  @watch('data')\n  handleDataChange() {\n    if (!this.chart) return;\n    this.chart.data = this.applyThemeColors(this.data);\n    this.chart.update();\n  }\n\n  @watch('type')\n  handleTypeChange() {\n    this.recreateChart();\n  }\n\n  @watch('options')\n  handleOptionsChange() {\n    this.recreateChart();\n  }\n\n  private readThemeColor(name: string): string {\n    return getComputedStyle(this).getPropertyValue(`--mz-color-${name}`).trim();\n  }\n\n  private readThemeFont(): string {\n    return getComputedStyle(this).getPropertyValue('--mz-font-sans').trim() || 'sans-serif';\n  }\n\n  /** Read palette colors from the current theme. */\n  private getPaletteColors(): string[] {\n    return PALETTE_KEYS.map(key => this.readThemeColor(key)).filter(Boolean);\n  }\n\n  /** Add alpha to a hex or CSS color string. */\n  private withAlpha(color: string, alpha: number): string {\n    // Handle hex colors\n    const hex = color.replace(/^#/, '');\n    if (/^[0-9a-f]{6}$/i.test(hex)) {\n      const r = parseInt(hex.slice(0, 2), 16);\n      const g = parseInt(hex.slice(2, 4), 16);\n      const b = parseInt(hex.slice(4, 6), 16);\n      return `rgba(${r}, ${g}, ${b}, ${alpha})`;\n    }\n    return color;\n  }\n\n  /**\n   * Apply Manzano theme colors to datasets that don't already have user-specified colors.\n   * Returns a deep-ish copy so we don't mutate the user's original data object.\n   */\n  private applyThemeColors(data: ChartData): ChartData {\n    const palette = this.getPaletteColors();\n    if (palette.length === 0) return data;\n\n    const surfaceColor = this.readThemeColor('surface') || '#ffffff';\n    const isPieType = this.type === 'pie' || this.type === 'doughnut' || this.type === 'polarArea';\n    const isLineType = this.type === 'line' || this.type === 'radar';\n\n    const datasets = (data.datasets ?? []).map((ds, i) => {\n      const themed = { ...ds };\n\n      if (isPieType) {\n        // Pie/doughnut/polarArea: each segment gets a color from the palette\n        if (!ds.backgroundColor) {\n          const numPoints = Array.isArray(ds.data) ? ds.data.length : 0;\n          themed.backgroundColor = Array.from({ length: numPoints }, (_, j) => palette[j % palette.length]);\n        }\n        if (!ds.borderColor) {\n          themed.borderColor = surfaceColor;\n        }\n        if ((ds as unknown as Record<string, unknown>).borderWidth === undefined) {\n          (themed as unknown as Record<string, unknown>).borderWidth = 2;\n        }\n      } else if (isLineType) {\n        // Line/radar: border color from palette, transparent fill\n        const color = palette[i % palette.length];\n        if (!ds.borderColor) {\n          themed.borderColor = color;\n        }\n        if (!ds.backgroundColor) {\n          themed.backgroundColor = this.withAlpha(color, 0.12);\n        }\n        if ((ds as unknown as Record<string, unknown>).pointBackgroundColor === undefined) {\n          (themed as unknown as Record<string, unknown>).pointBackgroundColor = color;\n        }\n      } else {\n        // Bar/scatter/bubble: solid color from palette\n        const color = palette[i % palette.length];\n        if (!ds.backgroundColor) {\n          themed.backgroundColor = color;\n        }\n        if (!ds.borderColor) {\n          themed.borderColor = color;\n        }\n      }\n\n      return themed;\n    });\n\n    return { ...data, datasets };\n  }\n\n  /** Build the merged Chart.js options with Manzano defaults. */\n  private buildOptions(): ChartOptions {\n    const textColor = this.readThemeColor('text') || '#1c1915';\n    const textSecondary = this.readThemeColor('text-secondary') || '#79726b';\n    const borderColor = this.readThemeColor('border') || '#d5d1cb';\n    const fontFamily = this.readThemeFont();\n\n    const defaults: ChartOptions = {\n      responsive: true,\n      maintainAspectRatio: true,\n      animation: {\n        duration: 300,\n        easing: 'easeOutQuart'\n      },\n      font: {\n        family: fontFamily,\n        size: 12\n      },\n      color: textSecondary,\n      plugins: {\n        legend: {\n          labels: {\n            color: textColor,\n            font: { family: fontFamily },\n            boxWidth: 10,\n            boxHeight: 10,\n            useBorderRadius: true,\n            borderRadius: 2,\n            padding: 16,\n            generateLabels: (chart) => {\n              const defaults = Chart.defaults.plugins.legend.labels.generateLabels!(chart);\n              return defaults.map(label => ({\n                ...label,\n                fillStyle: label.strokeStyle || label.fillStyle\n              }));\n            }\n          }\n        },\n        tooltip: {\n          enabled: false,\n          external: (context) => this.handleExternalTooltip(context)\n        }\n      },\n      scales: this.type === 'pie' || this.type === 'doughnut'\n        ? {}\n        : this.type === 'radar' || this.type === 'polarArea'\n        ? {\n          r: {\n            ticks: {\n              color: textSecondary,\n              font: { family: fontFamily },\n              backdropColor: 'transparent'\n            },\n            grid: { color: borderColor },\n            angleLines: { color: borderColor },\n            pointLabels: { color: textSecondary, font: { family: fontFamily } }\n          }\n        }\n        : {\n          x: {\n            ticks: { color: textSecondary, font: { family: fontFamily } },\n            grid: { color: borderColor },\n            border: { color: borderColor }\n          },\n          y: {\n            ticks: { color: textSecondary, font: { family: fontFamily } },\n            grid: { color: borderColor },\n            border: { color: borderColor }\n          }\n        },\n      onClick: (_event: ChartEvent, elements: ActiveElement[]) => {\n        if (elements.length === 0) return;\n        const el = elements[0];\n        const dataset = this.chart?.data.datasets[el.datasetIndex];\n        const value = Array.isArray(dataset?.data) ? dataset.data[el.index] : undefined;\n        const labels = this.chart?.data.labels;\n        const label = Array.isArray(labels) ? String(labels[el.index] ?? '') : '';\n\n        this.emit<ChartClickDetail>('mz-chart-click', {\n          detail: {\n            datasetIndex: el.datasetIndex,\n            index: el.index,\n            value: typeof value === 'number' ? value : (value as unknown as Record<string, number>)?.y ?? 0,\n            label\n          }\n        });\n      }\n    };\n\n    return this.deepMerge(defaults, this.options);\n  }\n\n  /** Simple deep merge of two objects (b overrides a). */\n  private deepMerge(a: Record<string, unknown>, b: Record<string, unknown>): Record<string, unknown> {\n    const result: Record<string, unknown> = { ...a };\n    for (const key of Object.keys(b)) {\n      if (\n        b[key] !== null &&\n        typeof b[key] === 'object' &&\n        !Array.isArray(b[key]) &&\n        a[key] !== null &&\n        typeof a[key] === 'object' &&\n        !Array.isArray(a[key])\n      ) {\n        result[key] = this.deepMerge(a[key] as Record<string, unknown>, b[key] as Record<string, unknown>);\n      } else {\n        result[key] = b[key];\n      }\n    }\n    return result;\n  }\n\n  /** Custom tooltip rendered inside shadow DOM. */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  private handleExternalTooltip(context: { tooltip: any }) {\n    const { tooltip } = context;\n\n    if (tooltip.opacity === 0) {\n      this.tooltipVisible = false;\n      return;\n    }\n\n    // Position\n    const tooltipEl = this.tooltipEl;\n    if (!tooltipEl) return;\n\n    tooltipEl.style.left = `${tooltip.caretX}px`;\n    tooltipEl.style.top = `${tooltip.caretY}px`;\n    tooltipEl.style.transform = 'translate(-50%, calc(-100% - 8px))';\n\n    // Build content\n    let titleHtml = '';\n    if (tooltip.title?.length) {\n      titleHtml = `<div class=\"chart-tooltip__title\">${tooltip.title.join(', ')}</div>`;\n    }\n\n    const bodyLines: string[][] = tooltip.body?.map((b: { lines: string[] }) => b.lines) ?? [];\n    const colors: { backgroundColor: string }[] = tooltip.labelColors ?? [];\n    const itemsHtml = bodyLines.map((lines: string[], i: number) => {\n      const color = colors[i]?.backgroundColor ?? '#888';\n      const bgStr = typeof color === 'object' ? '#888' : String(color);\n      return lines.map((line: string) =>\n        `<div class=\"chart-tooltip__item\">\n          <span class=\"chart-tooltip__swatch\" style=\"background:${bgStr}\"></span>\n          <span>${line}</span>\n        </div>`\n      ).join('');\n    }).join('');\n\n    tooltipEl.innerHTML = `<div class=\"chart-tooltip__inner\">${titleHtml}${itemsHtml}</div>`;\n    this.tooltipVisible = true;\n  }\n\n  private createChart() {\n    if (!this.canvas) return;\n\n    const ctx = this.canvas.getContext('2d');\n    if (!ctx) return;\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    this.chart = new Chart(ctx, {\n      type: this.type,\n      data: this.applyThemeColors(this.data),\n      options: this.buildOptions()\n    } as any);\n  }\n\n  private destroyChart() {\n    if (this.chart) {\n      this.chart.destroy();\n      this.chart = null;\n    }\n  }\n\n  private recreateChart() {\n    this.destroyChart();\n    this.createChart();\n  }\n\n  private setupResizeObserver() {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.chart?.resize();\n    });\n    this.resizeObserver.observe(this);\n  }\n\n  private setupThemeObserver() {\n    this.themeObserver = new MutationObserver(() => {\n      this.recreateChart();\n    });\n    this.themeObserver.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['data-theme']\n    });\n  }\n\n  override render() {\n    return html`\n      <div class=\"chart-container\">\n        <canvas></canvas>\n        <div class=\"chart-tooltip ${this.tooltipVisible ? 'visible' : ''}\"></div>\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["defaults"]
+}

package/dist/chart.d.ts

@@ -0,0 +1,8 @@
+import { MzChart } from './chart.component.js';
+export * from './chart.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'mz-chart': MzChart;
+    }
+}
+//# sourceMappingURL=chart.d.ts.map

package/dist/chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["../src/chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,cAAc,sBAAsB,CAAC;AAIrC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/chart.js

@@ -0,0 +1,4 @@
+import { MzChart } from "./chart.component.js";
+export * from "./chart.component.js";
+MzChart.define("mz-chart");
+//# sourceMappingURL=chart.js.map

package/dist/chart.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/chart.ts"],
+  "sourcesContent": ["import { MzChart } from './chart.component.js';\n\nexport * from './chart.component.js';\n\nMzChart.define('mz-chart');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mz-chart': MzChart;\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,eAAe;AAExB,cAAc;AAEd,QAAQ,OAAO,UAAU;",
+  "names": []
+}

package/dist/chart.styles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;
+//# sourceMappingURL=chart.styles.d.ts.map

package/dist/chart.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.styles.d.ts","sourceRoot":"","sources":["../src/chart.styles.ts"],"names":[],"mappings":";AAGA,wBA6DE"}

package/dist/chart.styles.js

@@ -0,0 +1,68 @@
+import { css } from "lit";
+import componentStyles from "@manzanohq/components/dist/styles/component.styles.js";
+var chart_styles_default = [
+  componentStyles,
+  css`
+    :host {
+      display: block;
+      position: relative;
+      width: 100%;
+    }
+
+    .chart-container {
+      position: relative;
+      width: 100%;
+      height: 100%;
+    }
+
+    canvas {
+      display: block;
+    }
+
+    .chart-tooltip {
+      position: absolute;
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity 150ms ease, transform 150ms ease;
+      z-index: 10;
+    }
+
+    .chart-tooltip.visible {
+      opacity: 1;
+    }
+
+    .chart-tooltip__inner {
+      background: var(--mz-color-gray-900, #1c1915);
+      color: var(--mz-color-gray-50, #faf9f7);
+      padding: 6px 10px;
+      border-radius: var(--mz-radius-md, 0.5rem);
+      font-family: var(--mz-font-sans, sans-serif);
+      font-size: var(--mz-font-size-xs, 0.75rem);
+      line-height: 1.4;
+      box-shadow: 0 4px 12px rgb(28 25 21 / 0.15);
+      max-width: 200px;
+    }
+
+    .chart-tooltip__title {
+      font-weight: 600;
+      margin-bottom: 2px;
+    }
+
+    .chart-tooltip__item {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .chart-tooltip__swatch {
+      width: 8px;
+      height: 8px;
+      border-radius: 2px;
+      flex-shrink: 0;
+    }
+  `
+];
+export {
+  chart_styles_default as default
+};
+//# sourceMappingURL=chart.styles.js.map

package/dist/chart.styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/chart.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\nimport componentStyles from '@manzanohq/components/dist/styles/component.styles.js';\n\nexport default [\n  componentStyles,\n  css`\n    :host {\n      display: block;\n      position: relative;\n      width: 100%;\n    }\n\n    .chart-container {\n      position: relative;\n      width: 100%;\n      height: 100%;\n    }\n\n    canvas {\n      display: block;\n    }\n\n    .chart-tooltip {\n      position: absolute;\n      pointer-events: none;\n      opacity: 0;\n      transition: opacity 150ms ease, transform 150ms ease;\n      z-index: 10;\n    }\n\n    .chart-tooltip.visible {\n      opacity: 1;\n    }\n\n    .chart-tooltip__inner {\n      background: var(--mz-color-gray-900, #1c1915);\n      color: var(--mz-color-gray-50, #faf9f7);\n      padding: 6px 10px;\n      border-radius: var(--mz-radius-md, 0.5rem);\n      font-family: var(--mz-font-sans, sans-serif);\n      font-size: var(--mz-font-size-xs, 0.75rem);\n      line-height: 1.4;\n      box-shadow: 0 4px 12px rgb(28 25 21 / 0.15);\n      max-width: 200px;\n    }\n\n    .chart-tooltip__title {\n      font-weight: 600;\n      margin-bottom: 2px;\n    }\n\n    .chart-tooltip__item {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .chart-tooltip__swatch {\n      width: 8px;\n      height: 8px;\n      border-radius: 2px;\n      flex-shrink: 0;\n    }\n  `\n];\n"],
+  "mappings": "AAAA,SAAS,WAAW;AACpB,OAAO,qBAAqB;AAE5B,IAAO,uBAAQ;AAAA,EACb;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2DF;",
+  "names": []
+}

package/dist/chart.types.d.ts

@@ -0,0 +1,13 @@
+import type { ChartData, ChartOptions } from 'chart.js';
+/** Supported chart types */
+export type MzChartType = 'bar' | 'line' | 'pie' | 'doughnut' | 'radar' | 'polarArea' | 'scatter' | 'bubble';
+/** Re-export Chart.js types under Manzano names */
+export type { ChartData, ChartOptions };
+/** Detail payload for mz-chart-click events */
+export interface ChartClickDetail {
+    datasetIndex: number;
+    index: number;
+    value: number;
+    label: string;
+}
+//# sourceMappingURL=chart.types.d.ts.map