"use client";
import * as React from 'react';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { jsx, jsxs } from 'react/jsx-runtime';

// src/lib/chart-palette.ts
var CHART_PALETTE = [
  "hsl(var(--chart-1, var(--primary)))",
  "hsl(var(--chart-2, var(--primary)))",
  "hsl(var(--chart-3, var(--primary)))",
  "hsl(var(--chart-4, var(--primary)))",
  "hsl(var(--chart-5, var(--primary)))",
  "hsl(var(--chart-6, var(--primary)))"
];
function pickChartHue(index) {
  const safe = (index % CHART_PALETTE.length + CHART_PALETTE.length) % CHART_PALETTE.length;
  return CHART_PALETTE[safe];
}
function cn(...inputs) {
  return twMerge(clsx(inputs));
}
function TreeMap({
  root,
  width = 600,
  height = 400,
  padding = 2,
  tile = "squarify",
  colorBy = "depth",
  onLeafClick,
  className,
  ...rest
}) {
  const [d3h, setD3h] = React.useState(null);
  React.useEffect(() => {
    let cancelled = false;
    void import('d3-hierarchy').then((mod) => {
      if (!cancelled) setD3h(mod);
    });
    return () => {
      cancelled = true;
    };
  }, []);
  if (!d3h) {
    return /* @__PURE__ */ jsx(
      "div",
      {
        "data-hex-tree-map-loading": true,
        "aria-busy": "true",
        className: cn("inline-block bg-muted/20", className),
        style: { width, height }
      }
    );
  }
  const leaves = layout(d3h, root, width, height, padding, tile);
  const maxValue = leaves.reduce((m, l) => l.value > m ? l.value : m, 0) || 1;
  const desc = `Tree map of ${leaves.length} leaf${leaves.length === 1 ? "" : "s"}, rooted at "${root.label}"`;
  return /* @__PURE__ */ jsxs(
    "svg",
    {
      ...rest,
      "data-hex-tree-map": true,
      "data-tile": tile,
      role: "img",
      width,
      height,
      viewBox: `0 0 ${width} ${height}`,
      className: cn("block", className),
      children: [
        /* @__PURE__ */ jsx("title", { children: "Tree map" }),
        /* @__PURE__ */ jsx("desc", { children: desc }),
        leaves.map((l) => {
          const w = l.x1 - l.x0;
          const h = l.y1 - l.y0;
          const fill = resolveFill(l, maxValue, colorBy);
          return /* @__PURE__ */ jsxs(
            "g",
            {
              "data-hex-tree-map-leaf": true,
              "data-depth": l.depth,
              transform: `translate(${l.x0},${l.y0})`,
              style: onLeafClick ? { cursor: "pointer" } : void 0,
              onClick: onLeafClick ? () => onLeafClick(l.node) : void 0,
              children: [
                /* @__PURE__ */ jsx(
                  "rect",
                  {
                    width: w,
                    height: h,
                    fill,
                    fillOpacity: 0.85,
                    stroke: "hsl(var(--background))",
                    strokeWidth: 1
                  }
                ),
                w > 40 && h > 16 ? /* @__PURE__ */ jsx(
                  "text",
                  {
                    x: 6,
                    y: 16,
                    fontSize: 12,
                    fontWeight: 500,
                    fill: "hsl(var(--background))",
                    style: {
                      pointerEvents: "none",
                      paintOrder: "stroke",
                      stroke: "hsl(var(--foreground) / 0.35)",
                      strokeWidth: 2
                    },
                    children: l.node.label
                  }
                ) : null,
                w > 60 && h > 32 ? /* @__PURE__ */ jsx(
                  "text",
                  {
                    x: 6,
                    y: 32,
                    fontSize: 11,
                    fill: "hsl(var(--background) / 0.85)",
                    style: {
                      pointerEvents: "none",
                      paintOrder: "stroke",
                      stroke: "hsl(var(--foreground) / 0.3)",
                      strokeWidth: 1.5
                    },
                    children: l.value.toLocaleString()
                  }
                ) : null
              ]
            },
            l.node.id
          );
        })
      ]
    }
  );
}
function layout(d3h, root, width, height, padding, tile) {
  const tileFn = tile === "binary" ? d3h.treemapBinary : tile === "slice-dice" ? d3h.treemapSliceDice : d3h.treemapSquarify;
  const hierarchy = d3h.hierarchy(root).sum((d) => d.children && d.children.length > 0 ? 0 : d.value ?? 0).sort((a, b) => (b.value ?? 0) - (a.value ?? 0));
  const layoutRoot = d3h.treemap().tile(tileFn).size([width, height]).padding(padding)(hierarchy);
  return layoutRoot.leaves().map((leaf, leafIdx) => {
    let cursor = leaf;
    while (cursor && cursor.depth > 1) cursor = cursor.parent;
    const ancestorIdx = cursor?.parent?.children?.indexOf(cursor) ?? leafIdx;
    return {
      node: leaf.data,
      depth: leaf.depth,
      x0: leaf.x0,
      y0: leaf.y0,
      x1: leaf.x1,
      y1: leaf.y1,
      value: leaf.value ?? 0,
      leafIdx,
      rootSiblingIdx: Math.max(0, ancestorIdx)
    };
  });
}
function resolveFill(leaf, maxValue, colorBy) {
  if (typeof colorBy === "function") return colorBy(leaf.node, leaf.depth);
  if (colorBy === "value") {
    const t = Math.max(0.2, Math.min(1, leaf.value / maxValue));
    return `hsl(var(--chart-1) / ${t.toFixed(2)})`;
  }
  const idx = leaf.depth > 1 ? leaf.rootSiblingIdx : leaf.leafIdx;
  return pickChartHue(idx);
}

export { TreeMap };
//# sourceMappingURL=tree-map.js.map
//# sourceMappingURL=tree-map.js.map