@hex-core/components 1.7.0 → 1.8.0

package/dist/tree-map.js

@@ -0,0 +1,171 @@
+"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

package/dist/tree-map.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/chart-palette.ts","../src/lib/utils.ts","../src/artifacts/tree-map/tree-map.tsx"],"names":[],"mappings":"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","file":"tree-map.js","sourcesContent":["/**\n * Categorical chart palette for diagram primitives that encode categorical\n * data (sunburst, treemap, sankey, chord, funnel, pyramid, venn, matrix).\n * Cycled by an integer key — node index, leaf index, depth-1 ancestor, etc.\n *\n * The values reach into `--chart-1` through `--chart-6`, the dedicated\n * diagram-encoding tokens added in `@hex-core/tokens` 1.4. Each token has a\n * `var(--primary)` fallback so consumers on theme presets that haven't been\n * updated to ship `--chart-N` (or who run a custom theme without the chart\n * family) still see a coherent monochrome rendering instead of black SVG\n * fills.\n *\n * Why a chart palette and not the semantic tokens: `--primary`, `--accent`,\n * `--secondary`, and `--muted` collapse to a single hue family in the\n * default monochrome theme — adjacent segments of a chart end up\n * indistinguishable. Chart tokens are tuned for perceptual differentiation.\n */\nexport const CHART_PALETTE = [\n\t\"hsl(var(--chart-1, var(--primary)))\",\n\t\"hsl(var(--chart-2, var(--primary)))\",\n\t\"hsl(var(--chart-3, var(--primary)))\",\n\t\"hsl(var(--chart-4, var(--primary)))\",\n\t\"hsl(var(--chart-5, var(--primary)))\",\n\t\"hsl(var(--chart-6, var(--primary)))\",\n] as const;\n\n/**\n * Return the chart hue at a stable index. Cycles modulo `CHART_PALETTE.length`\n * so the caller doesn't have to range-check.\n *\n * @param index - Integer key (node index, leaf index, depth-1 ancestor index, …).\n * @returns A `hsl(var(...))` string suitable for SVG `fill` / `stroke`.\n */\nexport function pickChartHue(index: number): string {\n\tconst safe = ((index % CHART_PALETTE.length) + CHART_PALETTE.length) % CHART_PALETTE.length;\n\t// `safe` is provably 0..CHART_PALETTE.length-1 — the assertion documents that.\n\treturn CHART_PALETTE[safe] as string;\n}\n","import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merge class names with Tailwind CSS conflict resolution.\n * @param inputs - Class values (strings, arrays, objects) to merge\n * @returns A single merged class string with Tailwind conflicts resolved\n */\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport * as React from \"react\";\nimport { pickChartHue } from \"../../lib/chart-palette.js\";\nimport { cn } from \"../../lib/utils.js\";\n\n/**\n * Typed React TreeMap. Each leaf is rendered as a rectangle whose area is\n * proportional to its `value`. Internal node values are summed automatically;\n * d3-hierarchy's squarified treemap layout keeps rectangles close to square\n * for legibility.\n *\n * Heavy peer: requires `d3-hierarchy` (~3 KB gzip).\n *\n * @example\n * <TreeMap\n *   root={{\n *     id: \"root\",\n *     label: \"Files\",\n *     children: [\n *       { id: \"src\", label: \"src\", value: 240 },\n *       { id: \"node_modules\", label: \"node_modules\", value: 980 },\n *     ],\n *   }}\n * />\n */\nexport type TreeMapNode = {\n\tid: string;\n\tlabel: string;\n\tvalue?: number;\n\tchildren?: TreeMapNode[];\n};\n\nexport interface TreeMapProps extends Omit<React.SVGAttributes<SVGSVGElement>, \"children\"> {\n\t/** Root of the hierarchy. Leaves require a positive `value`. */\n\troot: TreeMapNode;\n\t/** Pixel width of the rendered SVG. Default 600. */\n\twidth?: number;\n\t/** Pixel height of the rendered SVG. Default 400. */\n\theight?: number;\n\t/** Inner padding between sibling rectangles, in pixels. Default 2. */\n\tpadding?: number;\n\t/** Tiling algorithm. \"squarify\" (default) keeps rectangles close to square. */\n\ttile?: \"squarify\" | \"binary\" | \"slice-dice\";\n\t/** Choose a fill color per leaf. \"depth\" cycles through theme tokens; \"value\" interpolates by value; or pass a function. */\n\tcolorBy?: \"depth\" | \"value\" | ((node: TreeMapNode, depth: number) => string);\n\t/** Fired when a leaf is clicked. */\n\tonLeafClick?: (node: TreeMapNode) => void;\n}\n\ninterface LaidOutLeaf {\n\tnode: TreeMapNode;\n\tdepth: number;\n\tx0: number;\n\ty0: number;\n\tx1: number;\n\ty1: number;\n\tvalue: number;\n\t/** Leaf index in pre-order traversal — used to cycle through CHART_PALETTE\n\t * so adjacent rectangles read as distinct categories. */\n\tleafIdx: number;\n\t/** Index of this leaf's depth-1 ancestor; multi-level trees use this so\n\t * descendants of the same branch share a hue family. */\n\trootSiblingIdx: number;\n}\n\ntype D3HierarchyMod = typeof import(\"d3-hierarchy\");\n\nfunction TreeMap({\n\troot,\n\twidth = 600,\n\theight = 400,\n\tpadding = 2,\n\ttile = \"squarify\",\n\tcolorBy = \"depth\",\n\tonLeafClick,\n\tclassName,\n\t...rest\n}: TreeMapProps) {\n\tconst [d3h, setD3h] = React.useState<D3HierarchyMod | null>(null);\n\n\tReact.useEffect(() => {\n\t\tlet cancelled = false;\n\t\tvoid import(\"d3-hierarchy\").then((mod) => {\n\t\t\tif (!cancelled) setD3h(mod);\n\t\t});\n\t\treturn () => {\n\t\t\tcancelled = true;\n\t\t};\n\t}, []);\n\n\tif (!d3h) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tdata-hex-tree-map-loading\n\t\t\t\taria-busy=\"true\"\n\t\t\t\tclassName={cn(\"inline-block bg-muted/20\", className)}\n\t\t\t\tstyle={{ width, height }}\n\t\t\t/>\n\t\t);\n\t}\n\n\tconst leaves = layout(d3h, root, width, height, padding, tile);\n\tconst maxValue = leaves.reduce((m, l) => (l.value > m ? l.value : m), 0) || 1;\n\tconst desc = `Tree map of ${leaves.length} leaf${leaves.length === 1 ? \"\" : \"s\"}, rooted at \"${root.label}\"`;\n\n\treturn (\n\t\t<svg\n\t\t\t{...rest}\n\t\t\tdata-hex-tree-map\n\t\t\tdata-tile={tile}\n\t\t\trole=\"img\"\n\t\t\twidth={width}\n\t\t\theight={height}\n\t\t\tviewBox={`0 0 ${width} ${height}`}\n\t\t\tclassName={cn(\"block\", className)}\n\t\t>\n\t\t\t<title>Tree map</title>\n\t\t\t<desc>{desc}</desc>\n\t\t\t{leaves.map((l) => {\n\t\t\t\tconst w = l.x1 - l.x0;\n\t\t\t\tconst h = l.y1 - l.y0;\n\t\t\t\tconst fill = resolveFill(l, maxValue, colorBy);\n\t\t\t\treturn (\n\t\t\t\t\t<g\n\t\t\t\t\t\tkey={l.node.id}\n\t\t\t\t\t\tdata-hex-tree-map-leaf\n\t\t\t\t\t\tdata-depth={l.depth}\n\t\t\t\t\t\ttransform={`translate(${l.x0},${l.y0})`}\n\t\t\t\t\t\tstyle={onLeafClick ? { cursor: \"pointer\" } : undefined}\n\t\t\t\t\t\tonClick={onLeafClick ? () => onLeafClick(l.node) : undefined}\n\t\t\t\t\t>\n\t\t\t\t\t\t<rect\n\t\t\t\t\t\t\twidth={w}\n\t\t\t\t\t\t\theight={h}\n\t\t\t\t\t\t\tfill={fill}\n\t\t\t\t\t\t\tfillOpacity={0.85}\n\t\t\t\t\t\t\tstroke=\"hsl(var(--background))\"\n\t\t\t\t\t\t\tstrokeWidth={1}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{w > 40 && h > 16 ? (\n\t\t\t\t\t\t\t<text\n\t\t\t\t\t\t\t\tx={6}\n\t\t\t\t\t\t\t\ty={16}\n\t\t\t\t\t\t\t\tfontSize={12}\n\t\t\t\t\t\t\t\tfontWeight={500}\n\t\t\t\t\t\t\t\tfill=\"hsl(var(--background))\"\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tpointerEvents: \"none\",\n\t\t\t\t\t\t\t\t\tpaintOrder: \"stroke\",\n\t\t\t\t\t\t\t\t\tstroke: \"hsl(var(--foreground) / 0.35)\",\n\t\t\t\t\t\t\t\t\tstrokeWidth: 2,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{l.node.label}\n\t\t\t\t\t\t\t</text>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t{w > 60 && h > 32 ? (\n\t\t\t\t\t\t\t<text\n\t\t\t\t\t\t\t\tx={6}\n\t\t\t\t\t\t\t\ty={32}\n\t\t\t\t\t\t\t\tfontSize={11}\n\t\t\t\t\t\t\t\tfill=\"hsl(var(--background) / 0.85)\"\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tpointerEvents: \"none\",\n\t\t\t\t\t\t\t\t\tpaintOrder: \"stroke\",\n\t\t\t\t\t\t\t\t\tstroke: \"hsl(var(--foreground) / 0.3)\",\n\t\t\t\t\t\t\t\t\tstrokeWidth: 1.5,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{l.value.toLocaleString()}\n\t\t\t\t\t\t\t</text>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t</g>\n\t\t\t\t);\n\t\t\t})}\n\t\t</svg>\n\t);\n}\n\nfunction layout(\n\td3h: D3HierarchyMod,\n\troot: TreeMapNode,\n\twidth: number,\n\theight: number,\n\tpadding: number,\n\ttile: \"squarify\" | \"binary\" | \"slice-dice\",\n): LaidOutLeaf[] {\n\tconst tileFn = tile === \"binary\" ? d3h.treemapBinary : tile === \"slice-dice\" ? d3h.treemapSliceDice : d3h.treemapSquarify;\n\tconst hierarchy = d3h\n\t\t.hierarchy<TreeMapNode>(root)\n\t\t.sum((d) => (d.children && d.children.length > 0 ? 0 : d.value ?? 0))\n\t\t.sort((a, b) => (b.value ?? 0) - (a.value ?? 0));\n\t// treemap(hierarchy) returns HierarchyRectangularNode<T> with typed\n\t// x0/x1/y0/y1 (pixel coords).\n\tconst layoutRoot = d3h\n\t\t.treemap<TreeMapNode>()\n\t\t.tile(tileFn)\n\t\t.size([width, height])\n\t\t.padding(padding)(hierarchy);\n\treturn layoutRoot.leaves().map((leaf, leafIdx) => {\n\t\t// Walk up to depth-1 ancestor; descendants of the same top-level\n\t\t// branch share a hue family for tree visual cohesion.\n\t\tlet cursor: typeof leaf | null = leaf;\n\t\twhile (cursor && cursor.depth > 1) cursor = cursor.parent;\n\t\tconst ancestorIdx = cursor?.parent?.children?.indexOf(cursor) ?? leafIdx;\n\t\treturn {\n\t\t\tnode: leaf.data,\n\t\t\tdepth: leaf.depth,\n\t\t\tx0: leaf.x0,\n\t\t\ty0: leaf.y0,\n\t\t\tx1: leaf.x1,\n\t\t\ty1: leaf.y1,\n\t\t\tvalue: leaf.value ?? 0,\n\t\t\tleafIdx,\n\t\t\trootSiblingIdx: Math.max(0, ancestorIdx),\n\t\t};\n\t});\n}\n\nfunction resolveFill(\n\tleaf: LaidOutLeaf,\n\tmaxValue: number,\n\tcolorBy: TreeMapProps[\"colorBy\"],\n): string {\n\tif (typeof colorBy === \"function\") return colorBy(leaf.node, leaf.depth);\n\tif (colorBy === \"value\") {\n\t\tconst t = Math.max(0.2, Math.min(1, leaf.value / maxValue));\n\t\treturn `hsl(var(--chart-1) / ${t.toFixed(2)})`;\n\t}\n\t// \"depth\" cycles through CHART_PALETTE by ancestor for nested trees,\n\t// or by leaf index for single-level trees (where every leaf is at the\n\t// same depth and would otherwise collapse to one color).\n\tconst idx = leaf.depth > 1 ? leaf.rootSiblingIdx : leaf.leafIdx;\n\treturn pickChartHue(idx);\n}\n\nexport { TreeMap };\n"]}

package/dist/venn.d.ts

@@ -0,0 +1,3 @@
+export { VennSet_alias_1 as VennSet } from './_tsup-dts-rollup.js';
+export { VennProps_alias_1 as VennProps } from './_tsup-dts-rollup.js';
+export { Venn_alias_1 as Venn } from './_tsup-dts-rollup.js';

package/dist/venn.js

@@ -0,0 +1,196 @@
+"use client";
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx } 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 Venn({
+  sets,
+  size = 360,
+  onSetClick,
+  className,
+  ...rest
+}) {
+  const circles = React.useMemo(() => layout(sets, size), [sets, size]);
+  const desc = `Venn diagram with ${sets.length} set${sets.length === 1 ? "" : "s"}: ${sets.map((s) => s.label).join(", ") || "(empty)"}`;
+  const warnedRef = React.useRef(false);
+  const nodeEnv = globalThis.process?.env?.NODE_ENV;
+  if (nodeEnv !== "production" && !warnedRef.current && (sets.length === 0 || sets.length > 3)) {
+    warnedRef.current = true;
+    console.warn(
+      `[hex-core/Venn] Got ${sets.length} sets \u2014 Venn supports 2 or 3. Use TreeMap or Matrix for higher-arity overlaps.`
+    );
+  }
+  if (sets.length === 0 || sets.length > 3) {
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ...rest,
+        "data-hex-venn": true,
+        "data-set-count": sets.length,
+        role: "img",
+        width: size,
+        height: size,
+        viewBox: `0 0 ${size} ${size}`,
+        className: cn("block", className),
+        children: [
+          /* @__PURE__ */ jsx("title", { children: "Venn diagram" }),
+          /* @__PURE__ */ jsx("desc", { children: desc }),
+          /* @__PURE__ */ jsx(
+            "text",
+            {
+              x: size / 2,
+              y: size / 2,
+              textAnchor: "middle",
+              dy: "0.35em",
+              fontSize: 12,
+              fill: "hsl(var(--muted-foreground))",
+              children: sets.length === 0 ? "No sets" : `Venn supports 2\u20133 sets (got ${sets.length})`
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ...rest,
+      "data-hex-venn": true,
+      "data-set-count": sets.length,
+      role: "img",
+      width: size,
+      height: size,
+      viewBox: `0 0 ${size} ${size}`,
+      className: cn("block", className),
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "Venn diagram" }),
+        /* @__PURE__ */ jsx("desc", { children: desc }),
+        /* @__PURE__ */ jsx("g", { "data-hex-venn-sets": true, children: circles.map((c) => {
+          const interactive = Boolean(onSetClick);
+          const handleActivate = () => onSetClick?.(c.set);
+          return /* @__PURE__ */ jsx(
+            "g",
+            {
+              "data-hex-venn-set": true,
+              "data-depth": c.depth,
+              role: interactive ? "button" : void 0,
+              tabIndex: interactive ? 0 : void 0,
+              "aria-label": interactive ? c.set.label : void 0,
+              style: interactive ? { cursor: "pointer" } : void 0,
+              onClick: interactive ? handleActivate : void 0,
+              onKeyDown: interactive ? (e) => activateOnKey(e, handleActivate) : void 0,
+              children: /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: c.cx,
+                  cy: c.cy,
+                  r: c.r,
+                  fill: pickChartHue(c.depth),
+                  fillOpacity: 0.45,
+                  stroke: "hsl(var(--background))",
+                  strokeWidth: 1.5
+                }
+              )
+            },
+            c.set.id
+          );
+        }) }),
+        /* @__PURE__ */ jsx("g", { "data-hex-venn-labels": true, children: circles.map((c) => /* @__PURE__ */ jsx(
+          "text",
+          {
+            "data-hex-venn-label": true,
+            x: c.labelX,
+            y: c.labelY,
+            textAnchor: "middle",
+            dy: "0.35em",
+            fontSize: 12,
+            fontWeight: 600,
+            fill: "hsl(var(--foreground))",
+            style: { paintOrder: "stroke", pointerEvents: "none" },
+            stroke: "hsl(var(--background))",
+            strokeWidth: 3,
+            strokeLinejoin: "round",
+            children: `${c.set.label}${c.set.value != null ? ` (${c.set.value})` : ""}`
+          },
+          `label-${c.set.id}`
+        )) })
+      ]
+    }
+  );
+}
+function layout(sets, size) {
+  if (sets.length === 0 || sets.length > 3) return [];
+  const cx = size / 2;
+  const cy = size / 2;
+  const r = size * 0.22;
+  const sep = size * 0.12;
+  if (sets.length === 1) {
+    return [{ set: sets[0], cx, cy, r, labelX: cx, labelY: cy - r - 8, depth: 0 }];
+  }
+  if (sets.length === 2) {
+    return sets.map((s, i) => {
+      const dx = i === 0 ? -sep : sep;
+      return {
+        set: s,
+        cx: cx + dx,
+        cy,
+        r,
+        labelX: cx + dx + (i === 0 ? -r * 0.6 : r * 0.6),
+        labelY: cy - r - 8,
+        depth: i
+      };
+    });
+  }
+  const verticalOffset = sep * 0.866;
+  const triangle = [
+    { dx: -sep, dy: verticalOffset },
+    // bottom-left
+    { dx: sep, dy: verticalOffset },
+    // bottom-right
+    { dx: 0, dy: -verticalOffset }
+    // top
+  ];
+  const LABEL_PUSH = 1.7;
+  const TOP_LABEL_NUDGE = -8;
+  const BOTTOM_LABEL_NUDGE = 16;
+  return sets.map((s, i) => {
+    const { dx, dy } = triangle[i] ?? triangle[0];
+    const isTop = i === 2;
+    return {
+      set: s,
+      cx: cx + dx,
+      cy: cy + dy,
+      r,
+      labelX: cx + dx * LABEL_PUSH,
+      labelY: cy + dy * LABEL_PUSH + (isTop ? TOP_LABEL_NUDGE : BOTTOM_LABEL_NUDGE),
+      depth: i
+    };
+  });
+}
+function activateOnKey(e, fn) {
+  if (e.key === "Enter" || e.key === " ") {
+    e.preventDefault();
+    fn();
+  }
+}
+
+export { Venn };
+//# sourceMappingURL=venn.js.map
+//# sourceMappingURL=venn.js.map

package/dist/venn.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/chart-palette.ts","../src/lib/utils.ts","../src/artifacts/venn/venn.tsx"],"names":[],"mappings":"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","file":"venn.js","sourcesContent":["/**\n * Categorical chart palette for diagram primitives that encode categorical\n * data (sunburst, treemap, sankey, chord, funnel, pyramid, venn, matrix).\n * Cycled by an integer key — node index, leaf index, depth-1 ancestor, etc.\n *\n * The values reach into `--chart-1` through `--chart-6`, the dedicated\n * diagram-encoding tokens added in `@hex-core/tokens` 1.4. Each token has a\n * `var(--primary)` fallback so consumers on theme presets that haven't been\n * updated to ship `--chart-N` (or who run a custom theme without the chart\n * family) still see a coherent monochrome rendering instead of black SVG\n * fills.\n *\n * Why a chart palette and not the semantic tokens: `--primary`, `--accent`,\n * `--secondary`, and `--muted` collapse to a single hue family in the\n * default monochrome theme — adjacent segments of a chart end up\n * indistinguishable. Chart tokens are tuned for perceptual differentiation.\n */\nexport const CHART_PALETTE = [\n\t\"hsl(var(--chart-1, var(--primary)))\",\n\t\"hsl(var(--chart-2, var(--primary)))\",\n\t\"hsl(var(--chart-3, var(--primary)))\",\n\t\"hsl(var(--chart-4, var(--primary)))\",\n\t\"hsl(var(--chart-5, var(--primary)))\",\n\t\"hsl(var(--chart-6, var(--primary)))\",\n] as const;\n\n/**\n * Return the chart hue at a stable index. Cycles modulo `CHART_PALETTE.length`\n * so the caller doesn't have to range-check.\n *\n * @param index - Integer key (node index, leaf index, depth-1 ancestor index, …).\n * @returns A `hsl(var(...))` string suitable for SVG `fill` / `stroke`.\n */\nexport function pickChartHue(index: number): string {\n\tconst safe = ((index % CHART_PALETTE.length) + CHART_PALETTE.length) % CHART_PALETTE.length;\n\t// `safe` is provably 0..CHART_PALETTE.length-1 — the assertion documents that.\n\treturn CHART_PALETTE[safe] as string;\n}\n","import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merge class names with Tailwind CSS conflict resolution.\n * @param inputs - Class values (strings, arrays, objects) to merge\n * @returns A single merged class string with Tailwind conflicts resolved\n */\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport * as React from \"react\";\nimport { pickChartHue } from \"../../lib/chart-palette.js\";\nimport { cn } from \"../../lib/utils.js\";\n\n/**\n * Set-overlap (Venn) diagram for 2 or 3 sets. Pure SVG; no heavy peer\n * dependency. Set positions and radii are fixed at sensible defaults\n * — Venn is for showing CATEGORICAL overlap (Linux ∩ Mac, paid ∩ active),\n * not for showing the EXACT cardinality of intersections (that's\n * Euler-diagram territory and requires a real layout solver).\n *\n * @example\n * <Venn\n *   sets={[\n *     { id: \"linux\", label: \"Linux\" },\n *     { id: \"mac\", label: \"Mac\" },\n *     { id: \"windows\", label: \"Windows\" },\n *   ]}\n * />\n */\nexport type VennSet = {\n\tid: string;\n\tlabel: string;\n\tvalue?: number;\n};\n\nexport interface VennProps extends Omit<React.SVGAttributes<SVGSVGElement>, \"children\"> {\n\t/** 2 or 3 sets. More than 3 isn't visually tractable in a strict Venn. */\n\tsets: VennSet[];\n\t/** Pixel size of the rendered SVG (it's square). Default 360. */\n\tsize?: number;\n\t/** Fired when a set is clicked. */\n\tonSetClick?: (set: VennSet) => void;\n}\n\ninterface LaidOutCircle {\n\tset: VennSet;\n\tcx: number;\n\tcy: number;\n\tr: number;\n\tlabelX: number;\n\tlabelY: number;\n\tdepth: number;\n}\n\n// Venn supports 2 or 3 sets only — picks the first 2-3 categorical hues\n// from the shared chart palette via `pickChartHue` (which falls back to\n// `--primary` if a consumer's theme is missing the chart family).\n\nfunction Venn({\n\tsets,\n\tsize = 360,\n\tonSetClick,\n\tclassName,\n\t...rest\n}: VennProps) {\n\tconst circles = React.useMemo(() => layout(sets, size), [sets, size]);\n\tconst desc = `Venn diagram with ${sets.length} set${sets.length === 1 ? \"\" : \"s\"}: ${sets.map((s) => s.label).join(\", \") || \"(empty)\"}`;\n\n\t// Surface unsupported set counts in dev so an LLM-generated artifact with\n\t// the wrong shape isn't silently degraded to the fallback message. The\n\t// ref guard fires once per mount, not per render. Reads NODE_ENV via\n\t// globalThis to avoid pulling `@types/node` into the components package.\n\tconst warnedRef = React.useRef(false);\n\tconst nodeEnv = (globalThis as { process?: { env?: { NODE_ENV?: string } } }).process?.env?.NODE_ENV;\n\tif (\n\t\tnodeEnv !== \"production\" &&\n\t\t!warnedRef.current &&\n\t\t(sets.length === 0 || sets.length > 3)\n\t) {\n\t\twarnedRef.current = true;\n\t\t// eslint-disable-next-line no-console\n\t\tconsole.warn(\n\t\t\t`[hex-core/Venn] Got ${sets.length} sets — Venn supports 2 or 3. Use TreeMap or Matrix for higher-arity overlaps.`,\n\t\t);\n\t}\n\n\tif (sets.length === 0 || sets.length > 3) {\n\t\treturn (\n\t\t\t<svg\n\t\t\t\t{...rest}\n\t\t\t\tdata-hex-venn\n\t\t\t\tdata-set-count={sets.length}\n\t\t\t\trole=\"img\"\n\t\t\t\twidth={size}\n\t\t\t\theight={size}\n\t\t\t\tviewBox={`0 0 ${size} ${size}`}\n\t\t\t\tclassName={cn(\"block\", className)}\n\t\t\t>\n\t\t\t\t<title>Venn diagram</title>\n\t\t\t\t<desc>{desc}</desc>\n\t\t\t\t<text\n\t\t\t\t\tx={size / 2}\n\t\t\t\t\ty={size / 2}\n\t\t\t\t\ttextAnchor=\"middle\"\n\t\t\t\t\tdy=\"0.35em\"\n\t\t\t\t\tfontSize={12}\n\t\t\t\t\tfill=\"hsl(var(--muted-foreground))\"\n\t\t\t\t>\n\t\t\t\t\t{sets.length === 0 ? \"No sets\" : `Venn supports 2–3 sets (got ${sets.length})`}\n\t\t\t\t</text>\n\t\t\t</svg>\n\t\t);\n\t}\n\n\treturn (\n\t\t<svg\n\t\t\t{...rest}\n\t\t\tdata-hex-venn\n\t\t\tdata-set-count={sets.length}\n\t\t\trole=\"img\"\n\t\t\twidth={size}\n\t\t\theight={size}\n\t\t\tviewBox={`0 0 ${size} ${size}`}\n\t\t\tclassName={cn(\"block\", className)}\n\t\t>\n\t\t\t<title>Venn diagram</title>\n\t\t\t<desc>{desc}</desc>\n\t\t\t<g data-hex-venn-sets>\n\t\t\t\t{circles.map((c) => {\n\t\t\t\t\tconst interactive = Boolean(onSetClick);\n\t\t\t\t\tconst handleActivate = () => onSetClick?.(c.set);\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<g\n\t\t\t\t\t\t\tkey={c.set.id}\n\t\t\t\t\t\t\tdata-hex-venn-set\n\t\t\t\t\t\t\tdata-depth={c.depth}\n\t\t\t\t\t\t\trole={interactive ? \"button\" : undefined}\n\t\t\t\t\t\t\ttabIndex={interactive ? 0 : undefined}\n\t\t\t\t\t\t\taria-label={interactive ? c.set.label : undefined}\n\t\t\t\t\t\t\tstyle={interactive ? { cursor: \"pointer\" } : undefined}\n\t\t\t\t\t\t\tonClick={interactive ? handleActivate : undefined}\n\t\t\t\t\t\t\tonKeyDown={interactive ? (e) => activateOnKey(e, handleActivate) : undefined}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<circle\n\t\t\t\t\t\t\t\tcx={c.cx}\n\t\t\t\t\t\t\t\tcy={c.cy}\n\t\t\t\t\t\t\t\tr={c.r}\n\t\t\t\t\t\t\t\tfill={pickChartHue(c.depth)}\n\t\t\t\t\t\t\t\tfillOpacity={0.45}\n\t\t\t\t\t\t\t\tstroke=\"hsl(var(--background))\"\n\t\t\t\t\t\t\t\tstrokeWidth={1.5}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</g>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</g>\n\t\t\t<g data-hex-venn-labels>\n\t\t\t\t{circles.map((c) => (\n\t\t\t\t\t<text\n\t\t\t\t\t\tkey={`label-${c.set.id}`}\n\t\t\t\t\t\tdata-hex-venn-label\n\t\t\t\t\t\tx={c.labelX}\n\t\t\t\t\t\ty={c.labelY}\n\t\t\t\t\t\ttextAnchor=\"middle\"\n\t\t\t\t\t\tdy=\"0.35em\"\n\t\t\t\t\t\tfontSize={12}\n\t\t\t\t\t\tfontWeight={600}\n\t\t\t\t\t\tfill=\"hsl(var(--foreground))\"\n\t\t\t\t\t\tstyle={{ paintOrder: \"stroke\", pointerEvents: \"none\" }}\n\t\t\t\t\t\tstroke=\"hsl(var(--background))\"\n\t\t\t\t\t\tstrokeWidth={3}\n\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{`${c.set.label}${c.set.value != null ? ` (${c.set.value})` : \"\"}`}\n\t\t\t\t\t</text>\n\t\t\t\t))}\n\t\t\t</g>\n\t\t</svg>\n\t);\n}\n\nfunction layout(sets: VennSet[], size: number): LaidOutCircle[] {\n\tif (sets.length === 0 || sets.length > 3) return [];\n\tconst cx = size / 2;\n\tconst cy = size / 2;\n\tconst r = size * 0.22; // circle radius\n\tconst sep = size * 0.12; // half-distance between centers\n\n\tif (sets.length === 1) {\n\t\treturn [{ set: sets[0], cx, cy, r, labelX: cx, labelY: cy - r - 8, depth: 0 }];\n\t}\n\n\tif (sets.length === 2) {\n\t\treturn sets.map((s, i) => {\n\t\t\tconst dx = i === 0 ? -sep : sep;\n\t\t\treturn {\n\t\t\t\tset: s,\n\t\t\t\tcx: cx + dx,\n\t\t\t\tcy,\n\t\t\t\tr,\n\t\t\t\tlabelX: cx + dx + (i === 0 ? -r * 0.6 : r * 0.6),\n\t\t\t\tlabelY: cy - r - 8,\n\t\t\t\tdepth: i,\n\t\t\t};\n\t\t});\n\t}\n\n\t// 3 sets — equilateral triangle of centers (60° apart). Bottom-left,\n\t// bottom-right, top. Label position pushes outward along the radial\n\t// direction from the centroid so labels don't overlap the circles.\n\tconst verticalOffset = sep * 0.866; // sin(60°)\n\tconst triangle: Array<{ dx: number; dy: number }> = [\n\t\t{ dx: -sep, dy: verticalOffset }, // bottom-left\n\t\t{ dx: sep, dy: verticalOffset }, // bottom-right\n\t\t{ dx: 0, dy: -verticalOffset }, // top\n\t];\n\tconst LABEL_PUSH = 1.7;\n\tconst TOP_LABEL_NUDGE = -8; // top label sits above its circle; pull up\n\tconst BOTTOM_LABEL_NUDGE = 16; // bottom labels sit below; push down\n\treturn sets.map((s, i) => {\n\t\tconst { dx, dy } = triangle[i] ?? triangle[0];\n\t\tconst isTop = i === 2;\n\t\treturn {\n\t\t\tset: s,\n\t\t\tcx: cx + dx,\n\t\t\tcy: cy + dy,\n\t\t\tr,\n\t\t\tlabelX: cx + dx * LABEL_PUSH,\n\t\t\tlabelY: cy + dy * LABEL_PUSH + (isTop ? TOP_LABEL_NUDGE : BOTTOM_LABEL_NUDGE),\n\t\t\tdepth: i,\n\t\t};\n\t});\n}\n\nfunction activateOnKey(e: React.KeyboardEvent, fn: () => void): void {\n\tif (e.key === \"Enter\" || e.key === \" \") {\n\t\te.preventDefault();\n\t\tfn();\n\t}\n}\n\nexport { Venn };\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hex-core/components",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "AI-native React components for Hex UI — Radix UI + Tailwind CSS with machine-readable schemas. RSC-aware per-component bundles + tree-shakable.",
   "keywords": [
     "react",
@@ -88,34 +88,54 @@
   "devDependencies": {
     "@microsoft/api-extractor": "^7.58.7",
     "@tanstack/react-table": "^8.21.3",
+    "@types/d3-chord": "^3.0.6",
+    "@types/d3-hierarchy": "^3.1.7",
+    "@types/d3-sankey": "^0.12.4",
+    "@types/d3-shape": "^3.1.6",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "@xterm/xterm": "^5.5.0",
     "cmdk": "^1.1.1",
+    "d3-chord": "^3.0.1",
+    "d3-hierarchy": "^3.1.2",
+    "d3-sankey": "^0.12.3",
+    "d3-shape": "^3.2.0",
     "date-fns": "^4.1.0",
     "fast-glob": "^3.3.3",
     "input-otp": "^1.4.2",
+    "mermaid": "^11.0.0",
     "react-day-picker": "^9.14.0",
     "react-hook-form": "^7.74.0",
     "react-resizable-panels": "^4.10.0",
+    "reactflow": "^11.11.0",
     "sonner": "^2.0.7",
     "tsup": "^8.3.0",
     "typescript": "^6.0.3",
     "vaul": "^1.1.2",
-    "@hex-core/registry": "^0.3.3"
+    "wavesurfer.js": "^7.8.0",
+    "@hex-core/registry": "^0.3.4"
   },
   "peerDependencies": {
     "@hex-core/registry": "*",
     "@tanstack/react-table": "^8.0.0 || ^9.0.0",
+    "@xterm/xterm": "^5.5.0",
     "cmdk": "^1.0.0",
+    "d3-chord": "^3.0.1",
+    "d3-hierarchy": "^3.1.2",
+    "d3-sankey": "^0.12.3",
+    "d3-shape": "^3.2.0",
     "date-fns": "^3.0.0 || ^4.0.0",
     "input-otp": "^1.0.0",
+    "mermaid": "^11.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-day-picker": "^8.0.0 || ^9.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-hook-form": "^7.0.0",
     "react-resizable-panels": "^2.0.0 || ^3.0.0 || ^4.0.0",
+    "reactflow": "^11.11.0",
     "sonner": "^1.0.0 || ^2.0.0",
-    "vaul": "^1.0.0"
+    "vaul": "^1.0.0",
+    "wavesurfer.js": "^7.8.0"
   },
   "peerDependenciesMeta": {
     "@hex-core/registry": {
@@ -124,15 +144,33 @@
     "@tanstack/react-table": {
       "optional": true
     },
+    "@xterm/xterm": {
+      "optional": true
+    },
     "cmdk": {
       "optional": true
     },
+    "d3-chord": {
+      "optional": true
+    },
+    "d3-hierarchy": {
+      "optional": true
+    },
+    "d3-sankey": {
+      "optional": true
+    },
+    "d3-shape": {
+      "optional": true
+    },
     "date-fns": {
       "optional": true
     },
     "input-otp": {
       "optional": true
     },
+    "mermaid": {
+      "optional": true
+    },
     "react-day-picker": {
       "optional": true
     },
@@ -142,11 +180,17 @@
     "react-resizable-panels": {
       "optional": true
     },
+    "reactflow": {
+      "optional": true
+    },
     "sonner": {
       "optional": true
     },
     "vaul": {
       "optional": true
+    },
+    "wavesurfer.js": {
+      "optional": true
     }
   },
   "scripts": {