@hex-core/components 1.6.0 → 1.8.0

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.6.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.1"
+    "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": {