@fusedashlabs/widgets 0.3.1 → 0.4.0

package/dist/components/treemap-chart/lib/normalize.js

@@ -0,0 +1,182 @@
+import { resolveFormattingColor } from "../../../utils/fuse-palette.js";
+import { seriesColor } from "../../../utils/fusedash-visual.js";
+import { isFuseWidgetPayload, firstField, rowsOf } from "../../../utils/fuse-widget.js";
+import { hasLightColor, treemapRangeColors, treemapValueRanges, treemapColorForValue } from "./color.js";
+const EMPTY = { mode: "single", tiles: [], groups: [], rangeColors: [] };
+function normalizeKey(raw) {
+  return displayLabel(raw).toLowerCase();
+}
+function displayLabel(raw) {
+  return String(raw ?? "").trim().replace(/\s+/g, " ");
+}
+function aggregateByCategory(rows, categoryKey, getValue) {
+  const byKey = /* @__PURE__ */ new Map();
+  for (const row of rows) {
+    const raw = categoryKey ? row == null ? void 0 : row[categoryKey] : "";
+    const key = normalizeKey(raw);
+    const existing = byKey.get(key);
+    if (existing) {
+      existing.value += getValue(row);
+    } else {
+      byKey.set(key, { key, label: displayLabel(raw), value: getValue(row) });
+    }
+  }
+  return [...byKey.values()].sort((a, b) => b.value - a.value || a.label.localeCompare(b.label));
+}
+function tilesFrom(entries, baseColor, paletteRange) {
+  const rangeColors = treemapRangeColors(baseColor);
+  const ranges = treemapValueRanges(
+    entries.map((entry) => entry.value),
+    paletteRange
+  );
+  const tiles = entries.map((entry) => {
+    const color = treemapColorForValue(entry.value, ranges, rangeColors, baseColor);
+    return {
+      key: entry.key,
+      label: entry.label,
+      value: entry.value,
+      color,
+      lightFill: hasLightColor(color)
+    };
+  });
+  return { tiles, rangeColors };
+}
+function singleBaseColor(formatting) {
+  return resolveFormattingColor(formatting, "default", (formatting == null ? void 0 : formatting.length) ?? 1);
+}
+function groupBaseColor(formatting, groupLabel) {
+  if (!(formatting == null ? void 0 : formatting.length) || !groupLabel) {
+    return resolveFormattingColor([{ key: "default", color: "1" }], "default", 1);
+  }
+  const matched = formatting.filter((entry) => String(entry.key) === groupLabel);
+  if (!matched.length) return resolveFormattingColor(void 0, "default", 1);
+  return resolveFormattingColor(matched, String(matched[0].key ?? "default"), 1);
+}
+function toNumber(value) {
+  const n = Number(value);
+  return Number.isFinite(n) ? n : 0;
+}
+function fromFuseWidget(widget) {
+  var _a;
+  const categoryField = firstField(widget.groupBy ?? void 0) ?? firstField(widget.xAxe ?? void 0);
+  const valueField = firstField(widget.metric ?? void 0) ?? firstField(widget.yAxe ?? void 0);
+  const rawSubgroup = widget.subgroup ? String(widget.subgroup) : void 0;
+  const subgroupField = rawSubgroup && rawSubgroup !== categoryField ? rawSubgroup : void 0;
+  const rows = rowsOf(widget);
+  const getValue = (row) => valueField ? toNumber(row == null ? void 0 : row[valueField]) : 0;
+  const axisDetails = widget.axisDetails ?? void 0;
+  const paletteRange = (_a = widget.palette) == null ? void 0 : _a.range;
+  if (!subgroupField) {
+    const entries = categoryField ? aggregateByCategory(rows, categoryField, getValue) : (
+      // Without a category dimension the client keeps the raw per-row nodes.
+      rows.map((row, i) => ({ key: String(i), label: "", value: getValue(row) }))
+    );
+    const { tiles, rangeColors } = tilesFrom(entries, singleBaseColor(widget.formatting), paletteRange);
+    return {
+      mode: "single",
+      tiles,
+      groups: [],
+      rangeColors,
+      categoryField,
+      valueField,
+      axisDetails
+    };
+  }
+  const grouped = /* @__PURE__ */ new Map();
+  for (const row of rows) {
+    if (!categoryField) continue;
+    const label = displayLabel(row == null ? void 0 : row[categoryField]);
+    if (!label) continue;
+    const key = label.toLowerCase();
+    const bucket = grouped.get(key);
+    if (bucket) bucket.rows.push(row);
+    else grouped.set(key, { label, rows: [row] });
+  }
+  const groups = [...grouped.entries()].sort(([, a], [, b]) => a.label.localeCompare(b.label)).map(([key, { label, rows: groupRows }]) => ({
+    key,
+    label,
+    tiles: tilesFrom(
+      aggregateByCategory(groupRows, subgroupField, getValue),
+      groupBaseColor(widget.formatting, label),
+      paletteRange
+    ).tiles
+  }));
+  return {
+    mode: "grouped",
+    tiles: [],
+    groups,
+    rangeColors: [],
+    categoryField,
+    valueField,
+    subgroupField,
+    axisDetails
+  };
+}
+function fromLabelValue(rows) {
+  const entries = rows.map((row) => ({
+    key: normalizeKey(row.label),
+    label: displayLabel(row.label),
+    value: Number(row.value)
+  })).filter((row) => Number.isFinite(row.value));
+  if (!entries.length) return EMPTY;
+  const { tiles, rangeColors } = tilesFrom(
+    entries.sort((a, b) => b.value - a.value || a.label.localeCompare(b.label)),
+    singleBaseColor(void 0)
+  );
+  const overrides = new Map(
+    rows.filter((row) => row.color).map((row) => [normalizeKey(row.label), row.color])
+  );
+  return {
+    mode: "single",
+    tiles: tiles.map((tile) => {
+      const override = overrides.get(tile.key);
+      return override ? { ...tile, color: override, lightFill: hasLightColor(override) } : tile;
+    }),
+    groups: [],
+    rangeColors
+  };
+}
+function fromPoints(points) {
+  return fromLabelValue(points.map((point) => ({ label: String(point.x), value: Number(point.y) })));
+}
+function fromSeries(series) {
+  const groups = series.map((entry, index) => {
+    const label = entry.name ?? entry.id;
+    const entries = aggregateByCategory(
+      entry.points ?? [],
+      "x",
+      (row) => toNumber(row.y)
+    );
+    return {
+      key: normalizeKey(label),
+      label: displayLabel(label),
+      tiles: tilesFrom(entries, entry.color ?? seriesColor(index)).tiles
+    };
+  }).filter((group) => group.tiles.length > 0);
+  if (!groups.length) return EMPTY;
+  return { mode: "grouped", tiles: [], groups, rangeColors: [] };
+}
+function isLabelValueArray(input) {
+  if (!Array.isArray(input) || !input.length) return false;
+  const first = input[0];
+  return first != null && typeof first === "object" && "label" in first && "value" in first;
+}
+function normalizeTreemapData(input) {
+  if (!input) return EMPTY;
+  if (Array.isArray(input)) {
+    return isLabelValueArray(input) ? fromLabelValue(input) : EMPTY;
+  }
+  if (isFuseWidgetPayload(input)) return fromFuseWidget(input);
+  const shorthand = input;
+  if (Array.isArray(shorthand.series) && shorthand.series.length) {
+    return fromSeries(shorthand.series);
+  }
+  if (Array.isArray(shorthand.points) && shorthand.points.length) {
+    return fromPoints(shorthand.points);
+  }
+  return EMPTY;
+}
+export {
+  normalizeTreemapData
+};
+//# sourceMappingURL=normalize.js.map

package/dist/components/treemap-chart/lib/normalize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"normalize.js","sources":["../../../../src/components/treemap-chart/lib/normalize.ts"],"sourcesContent":["import { resolveFormattingColor, type FuseFormattingEntry } from '../../../utils/fuse-palette.js';\nimport { seriesColor } from '../../../utils/fusedash-visual.js';\nimport {\n  firstField,\n  isFuseWidgetPayload,\n  rowsOf,\n  type FuseWidgetLike,\n} from '../../../utils/fuse-widget.js';\nimport {\n  hasLightColor,\n  treemapColorForValue,\n  treemapRangeColors,\n  treemapValueRanges,\n} from './color.js';\nimport type {\n  TreemapChartData,\n  TreemapGroupCard,\n  TreemapLabelValue,\n  TreemapModel,\n  TreemapPoint,\n  TreemapSeries,\n  TreemapTile,\n} from './types.js';\n\ntype RawRow = Record<string, unknown>;\n\nconst EMPTY: TreemapModel = { mode: 'single', tiles: [], groups: [], rangeColors: [] };\n\n/** Client `normalizeCategoryKey` — case- and whitespace-insensitive group key. */\nfunction normalizeKey(raw: unknown): string {\n  return displayLabel(raw).toLowerCase();\n}\n\n/** First-seen trimmed spelling, kept for display (client `aggregateByCategory`). */\nfunction displayLabel(raw: unknown): string {\n  return String(raw ?? '')\n    .trim()\n    .replace(/\\s+/g, ' ');\n}\n\ntype Aggregate = { key: string; label: string; value: number };\n\n/**\n * Mirrors client `aggregateByCategory`: one entry per normalized category with\n * the metric summed, sorted by value desc then label asc so the layout is\n * stable whatever order the payload arrives in (FUS-3836 / FUS-3868).\n */\nfunction aggregateByCategory(\n  rows: RawRow[],\n  categoryKey: string | undefined,\n  getValue: (row: RawRow) => number,\n): Aggregate[] {\n  const byKey = new Map<string, Aggregate>();\n  for (const row of rows) {\n    const raw = categoryKey ? row?.[categoryKey] : '';\n    const key = normalizeKey(raw);\n    const existing = byKey.get(key);\n    if (existing) {\n      existing.value += getValue(row);\n    } else {\n      byKey.set(key, { key, label: displayLabel(raw), value: getValue(row) });\n    }\n  }\n  return [...byKey.values()].sort((a, b) => b.value - a.value || a.label.localeCompare(b.label));\n}\n\n/** Paint one set of leaves with the seven magnitude bands of `baseColor`. */\nfunction tilesFrom(\n  entries: Aggregate[],\n  baseColor: string,\n  paletteRange?: number[] | null,\n): { tiles: TreemapTile[]; rangeColors: string[] } {\n  const rangeColors = treemapRangeColors(baseColor);\n  const ranges = treemapValueRanges(\n    entries.map((entry) => entry.value),\n    paletteRange,\n  );\n  const tiles = entries.map((entry) => {\n    const color = treemapColorForValue(entry.value, ranges, rangeColors, baseColor);\n    return {\n      key: entry.key,\n      label: entry.label,\n      value: entry.value,\n      color,\n      lightFill: hasLightColor(color),\n    };\n  });\n  return { tiles, rangeColors };\n}\n\n/**\n * Client `TreemapSingle` reads the widget's own formatting and asks for the\n * `default` key, so a single-dimension treemap always ramps one palette color.\n */\nfunction singleBaseColor(formatting: FuseFormattingEntry[] | null | undefined): string {\n  return resolveFormattingColor(formatting, 'default', formatting?.length ?? 1);\n}\n\n/**\n * Client `getFormattingByGroupName` narrows formatting to the entry matching the\n * group, so each card ramps its own qualitative color. A group with no matching\n * entry falls back to the default palette color (the client's own fallback there\n * is a raw blue, which reads as a rendering bug in chat).\n */\nfunction groupBaseColor(\n  formatting: FuseFormattingEntry[] | null | undefined,\n  groupLabel: string,\n): string {\n  if (!formatting?.length || !groupLabel) {\n    return resolveFormattingColor([{ key: 'default', color: '1' }], 'default', 1);\n  }\n  const matched = formatting.filter((entry) => String(entry.key) === groupLabel);\n  if (!matched.length) return resolveFormattingColor(undefined, 'default', 1);\n  return resolveFormattingColor(matched, String(matched[0].key ?? 'default'), 1);\n}\n\nfunction toNumber(value: unknown): number {\n  const n = Number(value);\n  return Number.isFinite(n) ? n : 0;\n}\n\nfunction fromFuseWidget(widget: FuseWidgetLike): TreemapModel {\n  const categoryField = firstField(widget.groupBy ?? undefined) ?? firstField(widget.xAxe ?? undefined);\n  const valueField = firstField(widget.metric ?? undefined) ?? firstField(widget.yAxe ?? undefined);\n  const rawSubgroup = widget.subgroup ? String(widget.subgroup) : undefined;\n  // Grouped only makes sense with a *second*, distinct dimension to nest —\n  // otherwise the area-by-value encoding is lost to equal-height bands (FUS-3868).\n  const subgroupField =\n    rawSubgroup && rawSubgroup !== categoryField ? rawSubgroup : undefined;\n\n  const rows = rowsOf(widget);\n  const getValue = (row: RawRow) => (valueField ? toNumber(row?.[valueField]) : 0);\n  const axisDetails = widget.axisDetails ?? undefined;\n  const paletteRange = widget.palette?.range;\n\n  if (!subgroupField) {\n    const entries = categoryField\n      ? aggregateByCategory(rows, categoryField, getValue)\n      : // Without a category dimension the client keeps the raw per-row nodes.\n        rows.map((row, i) => ({ key: String(i), label: '', value: getValue(row) }));\n    const { tiles, rangeColors } = tilesFrom(entries, singleBaseColor(widget.formatting), paletteRange);\n    return {\n      mode: 'single',\n      tiles,\n      groups: [],\n      rangeColors,\n      categoryField,\n      valueField,\n      axisDetails,\n    };\n  }\n\n  const grouped = new Map<string, { label: string; rows: RawRow[] }>();\n  for (const row of rows) {\n    if (!categoryField) continue;\n    const label = displayLabel(row?.[categoryField]);\n    if (!label) continue;\n    const key = label.toLowerCase();\n    const bucket = grouped.get(key);\n    if (bucket) bucket.rows.push(row);\n    else grouped.set(key, { label, rows: [row] });\n  }\n\n  const groups: TreemapGroupCard[] = [...grouped.entries()]\n    .sort(([, a], [, b]) => a.label.localeCompare(b.label))\n    .map(([key, { label, rows: groupRows }]) => ({\n      key,\n      label,\n      tiles: tilesFrom(\n        aggregateByCategory(groupRows, subgroupField, getValue),\n        groupBaseColor(widget.formatting, label),\n        paletteRange,\n      ).tiles,\n    }));\n\n  return {\n    mode: 'grouped',\n    tiles: [],\n    groups,\n    rangeColors: [],\n    categoryField,\n    valueField,\n    subgroupField,\n    axisDetails,\n  };\n}\n\nfunction fromLabelValue(rows: TreemapLabelValue[]): TreemapModel {\n  const entries = rows\n    .map((row) => ({\n      key: normalizeKey(row.label),\n      label: displayLabel(row.label),\n      value: Number(row.value),\n    }))\n    .filter((row) => Number.isFinite(row.value));\n  if (!entries.length) return EMPTY;\n\n  const { tiles, rangeColors } = tilesFrom(\n    entries.sort((a, b) => b.value - a.value || a.label.localeCompare(b.label)),\n    singleBaseColor(undefined),\n  );\n  // An explicit per-row color wins over the magnitude band.\n  const overrides = new Map(\n    rows\n      .filter((row) => row.color)\n      .map((row) => [normalizeKey(row.label), row.color as string]),\n  );\n  return {\n    mode: 'single',\n    tiles: tiles.map((tile) => {\n      const override = overrides.get(tile.key);\n      return override ? { ...tile, color: override, lightFill: hasLightColor(override) } : tile;\n    }),\n    groups: [],\n    rangeColors,\n  };\n}\n\nfunction fromPoints(points: TreemapPoint[]): TreemapModel {\n  return fromLabelValue(points.map((point) => ({ label: String(point.x), value: Number(point.y) })));\n}\n\nfunction fromSeries(series: TreemapSeries[]): TreemapModel {\n  const groups = series\n    .map((entry, index): TreemapGroupCard => {\n      const label = entry.name ?? entry.id;\n      const entries = aggregateByCategory(\n        (entry.points ?? []) as unknown as RawRow[],\n        'x',\n        (row) => toNumber(row.y),\n      );\n      return {\n        key: normalizeKey(label),\n        label: displayLabel(label),\n        tiles: tilesFrom(entries, entry.color ?? seriesColor(index)).tiles,\n      };\n    })\n    .filter((group) => group.tiles.length > 0);\n\n  if (!groups.length) return EMPTY;\n  return { mode: 'grouped', tiles: [], groups, rangeColors: [] };\n}\n\nfunction isLabelValueArray(input: unknown): input is TreemapLabelValue[] {\n  if (!Array.isArray(input) || !input.length) return false;\n  const first = input[0] as RawRow;\n  return first != null && typeof first === 'object' && 'label' in first && 'value' in first;\n}\n\n/** Normalize chat payloads and FuseDash widget mocks into treemap leaves. */\nexport function normalizeTreemapData(input: TreemapChartData): TreemapModel {\n  if (!input) return EMPTY;\n\n  if (Array.isArray(input)) {\n    return isLabelValueArray(input) ? fromLabelValue(input) : EMPTY;\n  }\n\n  if (isFuseWidgetPayload(input)) return fromFuseWidget(input);\n\n  const shorthand = input as { points?: TreemapPoint[]; series?: TreemapSeries[] };\n  if (Array.isArray(shorthand.series) && shorthand.series.length) {\n    return fromSeries(shorthand.series);\n  }\n  if (Array.isArray(shorthand.points) && shorthand.points.length) {\n    return fromPoints(shorthand.points);\n  }\n\n  return EMPTY;\n}\n"],"names":[],"mappings":"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"}

package/dist/components/treemap-chart/lib/types.d.ts

@@ -0,0 +1,63 @@
+import { FuseAxisDetail, FuseWidgetLike } from '../../../utils/fuse-widget.js';
+/**
+ * FuseDash routes on a *second* dimension: `subgroup` distinct from
+ * `groupBy[0]` renders one card per group (`TreemapGroup`), anything else
+ * renders a single area-proportional treemap (`TreemapSingle`). See FUS-3868.
+ */
+export type TreemapMode = 'single' | 'grouped';
+/** One leaf rectangle — area encodes `value`, fill encodes its magnitude band. */
+export interface TreemapTile {
+    /** Case/whitespace-normalized grouping key */
+    key: string;
+    /** Display label (first-seen trimmed spelling) */
+    label: string;
+    value: number;
+    color: string;
+    /** True when `color` is bright enough to need dark text (client `hasLightColor`) */
+    lightFill: boolean;
+}
+/** One card of the grouped treemap: a group header plus its subgroup tiles. */
+export interface TreemapGroupCard {
+    key: string;
+    label: string;
+    tiles: TreemapTile[];
+}
+export interface TreemapModel {
+    mode: TreemapMode;
+    /** Single mode leaves; empty in grouped mode */
+    tiles: TreemapTile[];
+    /** Grouped mode cards; empty in single mode */
+    groups: TreemapGroupCard[];
+    /** Sequential band colors, low → high — the palette legend in single mode */
+    rangeColors: string[];
+    /** FuseDash `groupBy[0] ?? xAxe[0]` — the category dimension */
+    categoryField?: string;
+    /** FuseDash `metric[0] ?? yAxe[0]` — the measured column */
+    valueField?: string;
+    /** FuseDash `subgroup` — the nested dimension, and each card's caption */
+    subgroupField?: string;
+    axisDetails?: Record<string, FuseAxisDetail>;
+}
+/** Chat shorthand: one tile per point. */
+export interface TreemapPoint {
+    x: string;
+    y: number;
+}
+/** Chat shorthand: one card per series, one tile per point. */
+export interface TreemapSeries {
+    id: string;
+    name?: string;
+    color?: string;
+    points: TreemapPoint[];
+}
+export type TreemapLabelValue = {
+    label: string;
+    value: number;
+    color?: string;
+};
+export type TreemapChartData = TreemapLabelValue[] | {
+    points: TreemapPoint[];
+} | {
+    series: TreemapSeries[];
+} | FuseWidgetLike | null | undefined;
+//# sourceMappingURL=types.d.ts.map

package/dist/components/treemap-chart/lib/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/treemap-chart/lib/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAEpF;;;;GAIG;AACH,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE/C,kFAAkF;AAClF,MAAM,WAAW,WAAW;IAC1B,8CAA8C;IAC9C,GAAG,EAAE,MAAM,CAAC;IACZ,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,oFAAoF;IACpF,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,+EAA+E;AAC/E,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,WAAW,EAAE,CAAC;CACtB;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,WAAW,CAAC;IAClB,gDAAgD;IAChD,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,+CAA+C;IAC/C,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,6EAA6E;IAC7E,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,gEAAgE;IAChE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,4DAA4D;IAC5D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0EAA0E;IAC1E,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;CAC9C;AAED,0CAA0C;AAC1C,MAAM,WAAW,YAAY;IAC3B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,+DAA+D;AAC/D,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,YAAY,EAAE,CAAC;CACxB;AAED,MAAM,MAAM,iBAAiB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEjF,MAAM,MAAM,gBAAgB,GACxB,iBAAiB,EAAE,GACnB;IAAE,MAAM,EAAE,YAAY,EAAE,CAAA;CAAE,GAC1B;IAAE,MAAM,EAAE,aAAa,EAAE,CAAA;CAAE,GAC3B,cAAc,GACd,IAAI,GACJ,SAAS,CAAC"}

package/dist/components/treemap-chart/metadata.json.d.ts

@@ -0,0 +1,126 @@
+declare const _default: {
+  "id": "treemap-chart",
+  "tag": "ui9000-treemap-chart",
+  "title": "Treemap",
+  "description": "Chat-optimized treemap rewritten in D3 (Visx → D3). One area-proportional `treemapBinary` layout when the widget has a single category dimension, or the FuseDash card mosaic with a nested treemap per group when `subgroup` adds a second dimension. Tiles are colored by magnitude across seven shades of the group color. No Redux.",
+  "chartTypeKeys": ["treemapChart"],
+  "chartTypeMap": {
+    "treemapChart": { "showLegend": true, "showTooltip": true }
+  },
+  "source": "client/libs/shared/components/src/Widgets/Treemap/",
+  "stack": "d3",
+  "lazyImport": "@fusedashlabs/widgets/lazy/treemap-chart",
+  "entry": "@fusedashlabs/widgets/treemap-chart",
+  "usageConditions": {
+    "host": "mcp-chat",
+    "notFor": "fusedash-editor",
+    "mapsExcluded": true,
+    "context": "theme, scale, styleId and mode come from WidgetContext CSS custom properties, not props"
+  },
+  "allowedActions": ["hover", "resize"],
+  "propsSchema": {
+    "$schema": "https://json-schema.org/draft/2020-12/schema",
+    "type": "object",
+    "properties": {
+      "data": {
+        "oneOf": [
+          {
+            "type": "array",
+            "description": "Chat shorthand — one tile per row, area proportional to `value`.",
+            "items": {
+              "type": "object",
+              "required": ["label", "value"],
+              "properties": {
+                "label": { "type": "string" },
+                "value": { "type": "number" },
+                "color": { "type": "string" }
+              }
+            }
+          },
+          {
+            "type": "object",
+            "properties": {
+              "points": {
+                "type": "array",
+                "items": {
+                  "type": "object",
+                  "required": ["x", "y"],
+                  "properties": {
+                    "x": { "type": "string" },
+                    "y": { "type": "number" }
+                  }
+                }
+              },
+              "series": {
+                "type": "array",
+                "description": "One card per series — the grouped treemap.",
+                "items": {
+                  "type": "object",
+                  "required": ["id", "points"],
+                  "properties": {
+                    "id": { "type": "string" },
+                    "name": { "type": "string" },
+                    "color": { "type": "string" },
+                    "points": {
+                      "type": "array",
+                      "items": {
+                        "type": "object",
+                        "required": ["x", "y"],
+                        "properties": {
+                          "x": { "type": "string" },
+                          "y": { "type": "number" }
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          },
+          {
+            "type": "object",
+            "description": "FuseDash WidgetItem — `data` rows plus `groupBy` / `subgroup` / `metric` / `yAxe` / `formatting`.",
+            "required": ["data"],
+            "properties": {
+              "name": { "type": "string" },
+              "data": { "type": "array", "items": { "type": "object" } },
+              "xAxe": { "type": "array", "items": { "type": "string" } },
+              "yAxe": { "type": "array", "items": { "type": "string" } },
+              "groupBy": { "type": "array", "items": { "type": "string" } },
+              "metric": { "type": "array", "items": { "type": "string" } },
+              "subgroup": {
+                "type": "string",
+                "description": "Second dimension; when set and distinct from `groupBy[0]` the chart renders one card per group."
+              },
+              "formatting": { "type": "array", "items": { "type": "object" } },
+              "palette": {
+                "type": "object",
+                "properties": {
+                  "range": {
+                    "type": "array",
+                    "items": { "type": "number" },
+                    "description": "Pins the color break points instead of deriving them from the values."
+                  }
+                }
+              },
+              "uniqueValues": { "type": "object" },
+              "axisDetails": { "type": "object" }
+            }
+          }
+        ]
+      },
+      "chartTitle": { "type": "string" },
+      "showHeader": { "type": "boolean", "default": true },
+      "showLegend": {
+        "type": "boolean",
+        "default": true,
+        "description": "Low→High palette strip; single-dimension treemaps only."
+      },
+      "showTooltip": { "type": "boolean", "default": true }
+    },
+    "required": ["data"]
+  }
+}
+;
+
+export default _default;

package/dist/components/treemap-chart/metadata.json.js

@@ -0,0 +1,45 @@
+const id = "treemap-chart";
+const tag = "ui9000-treemap-chart";
+const title = "Treemap";
+const description = "Chat-optimized treemap rewritten in D3 (Visx → D3). One area-proportional `treemapBinary` layout when the widget has a single category dimension, or the FuseDash card mosaic with a nested treemap per group when `subgroup` adds a second dimension. Tiles are colored by magnitude across seven shades of the group color. No Redux.";
+const chartTypeKeys = ["treemapChart"];
+const chartTypeMap = { "treemapChart": { "showLegend": true, "showTooltip": true } };
+const source = "client/libs/shared/components/src/Widgets/Treemap/";
+const stack = "d3";
+const lazyImport = "@fusedashlabs/widgets/lazy/treemap-chart";
+const entry = "@fusedashlabs/widgets/treemap-chart";
+const usageConditions = { "host": "mcp-chat", "notFor": "fusedash-editor", "mapsExcluded": true, "context": "theme, scale, styleId and mode come from WidgetContext CSS custom properties, not props" };
+const allowedActions = ["hover", "resize"];
+const propsSchema = { "$schema": "https://json-schema.org/draft/2020-12/schema", "type": "object", "properties": { "data": { "oneOf": [{ "type": "array", "description": "Chat shorthand — one tile per row, area proportional to `value`.", "items": { "type": "object", "required": ["label", "value"], "properties": { "label": { "type": "string" }, "value": { "type": "number" }, "color": { "type": "string" } } } }, { "type": "object", "properties": { "points": { "type": "array", "items": { "type": "object", "required": ["x", "y"], "properties": { "x": { "type": "string" }, "y": { "type": "number" } } } }, "series": { "type": "array", "description": "One card per series — the grouped treemap.", "items": { "type": "object", "required": ["id", "points"], "properties": { "id": { "type": "string" }, "name": { "type": "string" }, "color": { "type": "string" }, "points": { "type": "array", "items": { "type": "object", "required": ["x", "y"], "properties": { "x": { "type": "string" }, "y": { "type": "number" } } } } } } } } }, { "type": "object", "description": "FuseDash WidgetItem — `data` rows plus `groupBy` / `subgroup` / `metric` / `yAxe` / `formatting`.", "required": ["data"], "properties": { "name": { "type": "string" }, "data": { "type": "array", "items": { "type": "object" } }, "xAxe": { "type": "array", "items": { "type": "string" } }, "yAxe": { "type": "array", "items": { "type": "string" } }, "groupBy": { "type": "array", "items": { "type": "string" } }, "metric": { "type": "array", "items": { "type": "string" } }, "subgroup": { "type": "string", "description": "Second dimension; when set and distinct from `groupBy[0]` the chart renders one card per group." }, "formatting": { "type": "array", "items": { "type": "object" } }, "palette": { "type": "object", "properties": { "range": { "type": "array", "items": { "type": "number" }, "description": "Pins the color break points instead of deriving them from the values." } } }, "uniqueValues": { "type": "object" }, "axisDetails": { "type": "object" } } }] }, "chartTitle": { "type": "string" }, "showHeader": { "type": "boolean", "default": true }, "showLegend": { "type": "boolean", "default": true, "description": "Low→High palette strip; single-dimension treemaps only." }, "showTooltip": { "type": "boolean", "default": true } }, "required": ["data"] };
+const treemapMeta = {
+  id,
+  tag,
+  title,
+  description,
+  chartTypeKeys,
+  chartTypeMap,
+  source,
+  stack,
+  lazyImport,
+  entry,
+  usageConditions,
+  allowedActions,
+  propsSchema
+};
+export {
+  allowedActions,
+  chartTypeKeys,
+  chartTypeMap,
+  treemapMeta as default,
+  description,
+  entry,
+  id,
+  lazyImport,
+  propsSchema,
+  source,
+  stack,
+  tag,
+  title,
+  usageConditions
+};
+//# sourceMappingURL=metadata.json.js.map

package/dist/components/treemap-chart/render/draw.d.ts

@@ -0,0 +1,24 @@
+import { WidgetTheme } from '../../../types/index.js';
+import { TreemapGroupCard, TreemapModel, TreemapTile } from '../lib/types.js';
+export interface TreemapHoverPayload {
+    tile: TreemapTile;
+    /** The card the tile belongs to, in grouped mode */
+    group?: TreemapGroupCard;
+    event: MouseEvent;
+}
+export interface RenderTreemapChartOptions {
+    model: TreemapModel;
+    width: number;
+    height: number;
+    theme: WidgetTheme;
+    showTooltip?: boolean;
+    onHover?: (payload: TreemapHoverPayload) => void;
+    onLeave?: () => void;
+}
+/**
+ * FuseDash Treemap — D3 rewrite of the Visx `TreemapSingle` / `TreemapGroup`.
+ * Single mode is one area-proportional `treemapBinary` layout; grouped mode is
+ * the client's card mosaic with a nested treemap per group.
+ */
+export declare function renderTreemapChart(container: HTMLElement, options: RenderTreemapChartOptions): void;
+//# sourceMappingURL=draw.d.ts.map

package/dist/components/treemap-chart/render/draw.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"draw.d.ts","sourceRoot":"","sources":["../../../../src/components/treemap-chart/render/draw.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAI3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnF,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,WAAW,CAAC;IAClB,oDAAoD;IACpD,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,KAAK,EAAE,UAAU,CAAC;CACnB;AAED,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,YAAY,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,WAAW,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACjD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAsLD;;;;GAIG;AACH,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,WAAW,EACtB,OAAO,EAAE,yBAAyB,GACjC,IAAI,CAyDN"}

package/dist/components/treemap-chart/render/draw.js

@@ -0,0 +1,124 @@
+import { hierarchy, treemap, treemapBinary } from "d3-hierarchy";
+import { select } from "d3-selection";
+import { FD } from "../../../utils/fusedash-visual.js";
+import { formatTreemapValue } from "../lib/format.js";
+import { treemapGridTemplate } from "../lib/layout.js";
+function gradientIds(svg, colors, prefix) {
+  const defs = svg.append("defs");
+  const ids = /* @__PURE__ */ new Map();
+  let index = 0;
+  for (const color of new Set(colors)) {
+    const id = `${prefix}-fill-${index++}`;
+    const gradient = defs.append("linearGradient").attr("id", id).attr("x1", "0").attr("y1", "0").attr("x2", "0").attr("y2", "1");
+    gradient.append("stop").attr("offset", "0%").attr("stop-color", color).attr("stop-opacity", 1);
+    gradient.append("stop").attr("offset", "100%").attr("stop-color", color).attr("stop-opacity", FD.treemapGradientBottomOpacity);
+    ids.set(color, id);
+  }
+  return ids;
+}
+function appendStripes(parent, width, height, clipId) {
+  const count = Math.floor(height / FD.treemapStripeSpacing);
+  if (count <= 0) return;
+  const clip = parent.append("clipPath").attr("id", clipId);
+  clip.append("rect").attr("width", width).attr("height", height).attr("rx", FD.treemapTileRadius).attr("ry", FD.treemapTileRadius);
+  const stripes = parent.append("g").attr("clip-path", `url(#${clipId})`);
+  for (let i = 0; i < count; i++) {
+    const y = Math.round((i + 1) * FD.treemapStripeSpacing) + 0.5;
+    const progress = y / height;
+    const opacity = Math.max(0, FD.treemapStripeOpacity * (1 - progress * FD.treemapStripeFalloff));
+    stripes.append("line").attr("x1", 0).attr("x2", width).attr("y1", y).attr("y2", y).attr("stroke", FD.treemapStripeColor).attr("stroke-opacity", opacity).attr("stroke-width", 1).attr("shape-rendering", "crispEdges");
+  }
+}
+function appendLabel(parent, tile, width, height, mode) {
+  if (width <= FD.treemapMinLabelWidth || height <= FD.treemapMinLabelHeight) return;
+  const box = parent.append("foreignObject").attr("width", width).attr("height", height).append("xhtml:div").attr("class", "tile-label").style("color", tile.lightFill ? FD.treemapLabelOnLight : FD.treemapLabelOnDark);
+  box.append("xhtml:span").attr("class", "tile-name").text(tile.label);
+  if (height > FD.treemapMinValueHeight && tile.value) {
+    box.append("xhtml:span").attr("class", "tile-value").text(formatTreemapValue(tile.value, mode));
+  }
+}
+function drawTiles(host, tiles, width, height, options, layer, prefix, group) {
+  if (!tiles.length || width <= 0 || height <= 0) return;
+  const root = hierarchy({ children: tiles.map((tile) => ({ tile })) }).sum((d) => {
+    var _a;
+    return ((_a = d.tile) == null ? void 0 : _a.value) ?? 0;
+  }).sort((a, b) => (b.value ?? 0) - (a.value ?? 0));
+  const layout = treemap().tile(treemapBinary).size([width, height]).paddingInner(FD.treemapPaddingInner).round(true)(root);
+  const svg = select(host).append("svg").attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`);
+  const fills = gradientIds(
+    svg,
+    tiles.map((tile) => tile.color),
+    prefix
+  );
+  layout.leaves().forEach((leaf, index) => {
+    const tile = leaf.data.tile;
+    if (!tile) return;
+    const tileWidth = leaf.x1 - leaf.x0;
+    const tileHeight = leaf.y1 - leaf.y0;
+    if (tileWidth <= 0 || tileHeight <= 0) return;
+    const node = svg.append("g").attr("class", "treemap-tile").attr("transform", `translate(${leaf.x0}, ${leaf.y0})`);
+    node.append("rect").attr("width", tileWidth).attr("height", tileHeight).attr("rx", FD.treemapTileRadius).attr("ry", FD.treemapTileRadius).attr("fill", `url(#${fills.get(tile.color)})`);
+    appendStripes(node, tileWidth, tileHeight, `${prefix}-clip-${index}`);
+    appendLabel(node, tile, tileWidth, tileHeight, options.model.mode);
+    layer.nodes.push(node.node());
+    if (options.showTooltip && options.onHover) {
+      const dim = (hovered) => {
+        for (const other of layer.nodes) {
+          other.style.opacity = hovered == null || other === hovered ? "1" : String(FD.treemapDimOpacity);
+        }
+      };
+      node.style("cursor", "pointer").on("mouseenter", (event) => {
+        var _a;
+        dim(node.node());
+        (_a = options.onHover) == null ? void 0 : _a.call(options, { tile, group, event });
+      }).on("mousemove", (event) => {
+        var _a;
+        (_a = options.onHover) == null ? void 0 : _a.call(options, { tile, group, event });
+      }).on("mouseleave", () => {
+        var _a;
+        dim(null);
+        (_a = options.onLeave) == null ? void 0 : _a.call(options);
+      });
+    }
+  });
+}
+function renderTreemapChart(container, options) {
+  const { model, width, height, theme } = options;
+  container.replaceChildren();
+  if (width <= 0 || height <= 0) return;
+  const layer = { nodes: [] };
+  if (model.mode === "single") {
+    drawTiles(container, model.tiles, width, height, options, layer, "tm");
+    return;
+  }
+  const template = treemapGridTemplate(model.groups.length);
+  const grid = select(container).append("div").attr("class", "treemap-groups");
+  grid.style("grid-template-areas", template.areas).style("grid-template-rows", template.rows);
+  const plots = [];
+  model.groups.forEach((group, index) => {
+    const card = grid.append("div").attr("class", "treemap-card").style("grid-area", `_${index + 1}`);
+    const header = card.append("div").attr("class", "treemap-card-header");
+    header.append("span").attr("class", "treemap-card-title").attr("title", group.label).style("color", theme.text).text(group.label);
+    if (model.subgroupField) {
+      header.append("span").attr("class", "treemap-card-subtitle").attr("title", model.subgroupField).style("color", theme.textMuted).text(model.subgroupField);
+    }
+    const host = card.append("div").attr("class", "treemap-card-plot").node();
+    plots.push({ host, group, index });
+  });
+  for (const { host, group, index } of plots) {
+    drawTiles(
+      host,
+      group.tiles,
+      host.clientWidth,
+      host.clientHeight,
+      options,
+      layer,
+      `tm-${index}`,
+      group
+    );
+  }
+}
+export {
+  renderTreemapChart
+};
+//# sourceMappingURL=draw.js.map

package/dist/components/treemap-chart/render/draw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"draw.js","sources":["../../../../src/components/treemap-chart/render/draw.ts"],"sourcesContent":["import { hierarchy, treemap, treemapBinary } from 'd3-hierarchy';\nimport { select, type Selection } from 'd3-selection';\n\nimport type { WidgetTheme } from '../../../types/index.js';\nimport { FD } from '../../../utils/fusedash-visual.js';\nimport { formatTreemapValue } from '../lib/format.js';\nimport { treemapGridTemplate } from '../lib/layout.js';\nimport type { TreemapGroupCard, TreemapModel, TreemapTile } from '../lib/types.js';\n\nexport interface TreemapHoverPayload {\n  tile: TreemapTile;\n  /** The card the tile belongs to, in grouped mode */\n  group?: TreemapGroupCard;\n  event: MouseEvent;\n}\n\nexport interface RenderTreemapChartOptions {\n  model: TreemapModel;\n  width: number;\n  height: number;\n  theme: WidgetTheme;\n  showTooltip?: boolean;\n  onHover?: (payload: TreemapHoverPayload) => void;\n  onLeave?: () => void;\n}\n\ntype HierarchyDatum = { tile?: TreemapTile; children?: HierarchyDatum[] };\n\ninterface TileLayer {\n  /** Every tile group drawn for this widget — hover dims all but one */\n  nodes: SVGGElement[];\n}\n\n/** One vertical gradient per distinct band color, shared by every tile using it. */\nfunction gradientIds(\n  svg: Selection<SVGSVGElement, unknown, null, undefined>,\n  colors: string[],\n  prefix: string,\n): Map<string, string> {\n  const defs = svg.append('defs');\n  const ids = new Map<string, string>();\n  let index = 0;\n  for (const color of new Set(colors)) {\n    const id = `${prefix}-fill-${index++}`;\n    const gradient = defs\n      .append('linearGradient')\n      .attr('id', id)\n      .attr('x1', '0')\n      .attr('y1', '0')\n      .attr('x2', '0')\n      .attr('y2', '1');\n    gradient.append('stop').attr('offset', '0%').attr('stop-color', color).attr('stop-opacity', 1);\n    gradient\n      .append('stop')\n      .attr('offset', '100%')\n      .attr('stop-color', color)\n      .attr('stop-opacity', FD.treemapGradientBottomOpacity);\n    ids.set(color, id);\n  }\n  return ids;\n}\n\n/** White scanlines fading toward the bottom, clipped to the rounded tile. */\nfunction appendStripes(\n  parent: Selection<SVGGElement, unknown, null, undefined>,\n  width: number,\n  height: number,\n  clipId: string,\n): void {\n  const count = Math.floor(height / FD.treemapStripeSpacing);\n  if (count <= 0) return;\n\n  const clip = parent.append('clipPath').attr('id', clipId);\n  clip\n    .append('rect')\n    .attr('width', width)\n    .attr('height', height)\n    .attr('rx', FD.treemapTileRadius)\n    .attr('ry', FD.treemapTileRadius);\n\n  const stripes = parent.append('g').attr('clip-path', `url(#${clipId})`);\n  for (let i = 0; i < count; i++) {\n    const y = Math.round((i + 1) * FD.treemapStripeSpacing) + 0.5;\n    const progress = y / height;\n    const opacity = Math.max(0, FD.treemapStripeOpacity * (1 - progress * FD.treemapStripeFalloff));\n    stripes\n      .append('line')\n      .attr('x1', 0)\n      .attr('x2', width)\n      .attr('y1', y)\n      .attr('y2', y)\n      .attr('stroke', FD.treemapStripeColor)\n      .attr('stroke-opacity', opacity)\n      .attr('stroke-width', 1)\n      .attr('shape-rendering', 'crispEdges');\n  }\n}\n\n/** Name (+ value on taller tiles) as HTML so long labels ellipsize like the client. */\nfunction appendLabel(\n  parent: Selection<SVGGElement, unknown, null, undefined>,\n  tile: TreemapTile,\n  width: number,\n  height: number,\n  mode: TreemapModel['mode'],\n): void {\n  if (width <= FD.treemapMinLabelWidth || height <= FD.treemapMinLabelHeight) return;\n\n  const box = parent\n    .append('foreignObject')\n    .attr('width', width)\n    .attr('height', height)\n    .append('xhtml:div')\n    .attr('class', 'tile-label')\n    .style('color', tile.lightFill ? FD.treemapLabelOnLight : FD.treemapLabelOnDark);\n\n  box.append('xhtml:span').attr('class', 'tile-name').text(tile.label);\n\n  if (height > FD.treemapMinValueHeight && tile.value) {\n    box.append('xhtml:span').attr('class', 'tile-value').text(formatTreemapValue(tile.value, mode));\n  }\n}\n\nfunction drawTiles(\n  host: HTMLElement,\n  tiles: TreemapTile[],\n  width: number,\n  height: number,\n  options: RenderTreemapChartOptions,\n  layer: TileLayer,\n  prefix: string,\n  group?: TreemapGroupCard,\n): void {\n  if (!tiles.length || width <= 0 || height <= 0) return;\n\n  const root = hierarchy<HierarchyDatum>({ children: tiles.map((tile) => ({ tile })) })\n    .sum((d) => d.tile?.value ?? 0)\n    .sort((a, b) => (b.value ?? 0) - (a.value ?? 0));\n\n  const layout = treemap<HierarchyDatum>()\n    .tile(treemapBinary)\n    .size([width, height])\n    .paddingInner(FD.treemapPaddingInner)\n    .round(true)(root);\n\n  const svg = select(host)\n    .append('svg')\n    .attr('width', width)\n    .attr('height', height)\n    .attr('viewBox', `0 0 ${width} ${height}`);\n\n  const fills = gradientIds(\n    svg,\n    tiles.map((tile) => tile.color),\n    prefix,\n  );\n\n  layout.leaves().forEach((leaf, index) => {\n    const tile = leaf.data.tile;\n    if (!tile) return;\n    const tileWidth = leaf.x1 - leaf.x0;\n    const tileHeight = leaf.y1 - leaf.y0;\n    if (tileWidth <= 0 || tileHeight <= 0) return;\n\n    const node = svg\n      .append('g')\n      .attr('class', 'treemap-tile')\n      .attr('transform', `translate(${leaf.x0}, ${leaf.y0})`);\n\n    node\n      .append('rect')\n      .attr('width', tileWidth)\n      .attr('height', tileHeight)\n      .attr('rx', FD.treemapTileRadius)\n      .attr('ry', FD.treemapTileRadius)\n      .attr('fill', `url(#${fills.get(tile.color)})`);\n\n    appendStripes(node, tileWidth, tileHeight, `${prefix}-clip-${index}`);\n    appendLabel(node, tile, tileWidth, tileHeight, options.model.mode);\n\n    layer.nodes.push(node.node() as SVGGElement);\n\n    if (options.showTooltip && options.onHover) {\n      const dim = (hovered: SVGGElement | null) => {\n        for (const other of layer.nodes) {\n          other.style.opacity =\n            hovered == null || other === hovered ? '1' : String(FD.treemapDimOpacity);\n        }\n      };\n      node\n        .style('cursor', 'pointer')\n        .on('mouseenter', (event: MouseEvent) => {\n          dim(node.node() as SVGGElement);\n          options.onHover?.({ tile, group, event });\n        })\n        .on('mousemove', (event: MouseEvent) => {\n          options.onHover?.({ tile, group, event });\n        })\n        .on('mouseleave', () => {\n          dim(null);\n          options.onLeave?.();\n        });\n    }\n  });\n}\n\n/**\n * FuseDash Treemap — D3 rewrite of the Visx `TreemapSingle` / `TreemapGroup`.\n * Single mode is one area-proportional `treemapBinary` layout; grouped mode is\n * the client's card mosaic with a nested treemap per group.\n */\nexport function renderTreemapChart(\n  container: HTMLElement,\n  options: RenderTreemapChartOptions,\n): void {\n  const { model, width, height, theme } = options;\n  container.replaceChildren();\n  if (width <= 0 || height <= 0) return;\n\n  const layer: TileLayer = { nodes: [] };\n\n  if (model.mode === 'single') {\n    drawTiles(container, model.tiles, width, height, options, layer, 'tm');\n    return;\n  }\n\n  const template = treemapGridTemplate(model.groups.length);\n  const grid = select(container).append('div').attr('class', 'treemap-groups');\n  grid.style('grid-template-areas', template.areas).style('grid-template-rows', template.rows);\n\n  const plots: Array<{ host: HTMLElement; group: TreemapGroupCard; index: number }> = [];\n\n  model.groups.forEach((group, index) => {\n    const card = grid\n      .append('div')\n      .attr('class', 'treemap-card')\n      .style('grid-area', `_${index + 1}`);\n\n    const header = card.append('div').attr('class', 'treemap-card-header');\n    header\n      .append('span')\n      .attr('class', 'treemap-card-title')\n      .attr('title', group.label)\n      .style('color', theme.text)\n      .text(group.label);\n    if (model.subgroupField) {\n      header\n        .append('span')\n        .attr('class', 'treemap-card-subtitle')\n        .attr('title', model.subgroupField)\n        .style('color', theme.textMuted)\n        .text(model.subgroupField);\n    }\n\n    const host = card.append('div').attr('class', 'treemap-card-plot').node() as HTMLElement;\n    plots.push({ host, group, index });\n  });\n\n  // One layout flush, then each card draws into the box the grid gave it.\n  for (const { host, group, index } of plots) {\n    drawTiles(\n      host,\n      group.tiles,\n      host.clientWidth,\n      host.clientHeight,\n      options,\n      layer,\n      `tm-${index}`,\n      group,\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/components/treemap-chart/render/index.d.ts

@@ -0,0 +1,2 @@
+export { renderTreemapChart, type RenderTreemapChartOptions, type TreemapHoverPayload } from './draw.js';
+//# sourceMappingURL=index.d.ts.map