@hex-core/components 1.7.0 → 1.8.0

package/dist/flashcard.js

@@ -0,0 +1,107 @@
+"use client";
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function Flashcard({
+  front,
+  back,
+  defaultFlipped = false,
+  flipped: flippedProp,
+  onFlipChange,
+  width = 360,
+  height = 240,
+  flipDurationMs = 500,
+  className,
+  ...rest
+}) {
+  const [internalFlipped, setInternalFlipped] = React.useState(defaultFlipped);
+  const isControlled = flippedProp !== void 0;
+  const flipped = isControlled ? flippedProp : internalFlipped;
+  const toggle = React.useCallback(() => {
+    const next = !flipped;
+    if (!isControlled) setInternalFlipped(next);
+    onFlipChange?.(next);
+  }, [flipped, isControlled, onFlipChange]);
+  const handleKey = React.useCallback(
+    (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        toggle();
+      }
+    },
+    [toggle]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      "data-hex-flashcard": true,
+      "data-flipped": flipped,
+      role: "button",
+      tabIndex: 0,
+      "aria-pressed": flipped,
+      "aria-label": flipped ? "Flashcard, back side. Activate to flip to front." : "Flashcard, front side. Activate to reveal back.",
+      onClick: toggle,
+      onKeyDown: handleKey,
+      className: cn(
+        "relative inline-block cursor-pointer select-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        className
+      ),
+      style: {
+        width,
+        height,
+        perspective: 1e3
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          "data-hex-flashcard-inner": true,
+          className: "relative h-full w-full transition-transform",
+          style: {
+            transformStyle: "preserve-3d",
+            transform: flipped ? "rotateY(180deg)" : "rotateY(0deg)",
+            transitionDuration: `${flipDurationMs}ms`
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-hex-flashcard-face": true,
+                "data-side": "front",
+                className: "absolute inset-0 flex items-center justify-center rounded-lg border bg-card p-4 text-center text-card-foreground shadow-sm",
+                style: {
+                  backfaceVisibility: "hidden",
+                  WebkitBackfaceVisibility: "hidden"
+                },
+                children: front
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-hex-flashcard-face": true,
+                "data-side": "back",
+                className: "absolute inset-0 flex items-center justify-center rounded-lg border bg-card p-4 text-center text-card-foreground shadow-sm",
+                style: {
+                  backfaceVisibility: "hidden",
+                  WebkitBackfaceVisibility: "hidden",
+                  transform: "rotateY(180deg)"
+                },
+                children: back
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
+export { Flashcard };
+//# sourceMappingURL=flashcard.js.map
+//# sourceMappingURL=flashcard.js.map

package/dist/flashcard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/artifacts/flashcard/flashcard.tsx"],"names":[],"mappings":"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","file":"flashcard.js","sourcesContent":["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 { cn } from \"../../lib/utils.js\";\n\n/**\n * Flashcard — front/back card with a 3D flip animation. Click, Enter, or\n * Space to flip. Pure CSS 3D transform, no animation peer required.\n *\n * Headless on content: pass any ReactNode for `front` and `back`. Pair\n * with Deck (artifacts/deck) for shuffle / next / prev / progress, or\n * with SpacedRepetition (artifacts/spaced-repetition) for confidence\n * rating after each reveal.\n *\n * @example\n * <Flashcard\n *   front={<>What is the capital of France?</>}\n *   back={<>Paris</>}\n * />\n *\n * <Flashcard\n *   flipped={isFlipped}\n *   onFlipChange={setFlipped}\n *   front={term}\n *   back={definition}\n * />\n */\nexport interface FlashcardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> {\n\t/** Content of the front face. */\n\tfront: React.ReactNode;\n\t/** Content of the back face. */\n\tback: React.ReactNode;\n\t/** Uncontrolled initial flipped state. Default false. */\n\tdefaultFlipped?: boolean;\n\t/** Controlled flipped state. */\n\tflipped?: boolean;\n\t/** Fired with the new flipped value when the user toggles. */\n\tonFlipChange?: (flipped: boolean) => void;\n\t/** Pixel width. Default 360. */\n\twidth?: number;\n\t/** Pixel height. Default 240. */\n\theight?: number;\n\t/** Flip animation duration in ms. Default 500. Set to 0 to disable the animation entirely. */\n\tflipDurationMs?: number;\n}\n\nfunction Flashcard({\n\tfront,\n\tback,\n\tdefaultFlipped = false,\n\tflipped: flippedProp,\n\tonFlipChange,\n\twidth = 360,\n\theight = 240,\n\tflipDurationMs = 500,\n\tclassName,\n\t...rest\n}: FlashcardProps) {\n\tconst [internalFlipped, setInternalFlipped] = React.useState(defaultFlipped);\n\tconst isControlled = flippedProp !== undefined;\n\tconst flipped = isControlled ? flippedProp : internalFlipped;\n\n\tconst toggle = React.useCallback(() => {\n\t\tconst next = !flipped;\n\t\tif (!isControlled) setInternalFlipped(next);\n\t\tonFlipChange?.(next);\n\t}, [flipped, isControlled, onFlipChange]);\n\n\tconst handleKey = React.useCallback(\n\t\t(e: React.KeyboardEvent) => {\n\t\t\tif (e.key === \"Enter\" || e.key === \" \") {\n\t\t\t\te.preventDefault();\n\t\t\t\ttoggle();\n\t\t\t}\n\t\t},\n\t\t[toggle],\n\t);\n\n\treturn (\n\t\t<div\n\t\t\t{...rest}\n\t\t\tdata-hex-flashcard\n\t\t\tdata-flipped={flipped}\n\t\t\trole=\"button\"\n\t\t\ttabIndex={0}\n\t\t\taria-pressed={flipped}\n\t\t\taria-label={flipped ? \"Flashcard, back side. Activate to flip to front.\" : \"Flashcard, front side. Activate to reveal back.\"}\n\t\t\tonClick={toggle}\n\t\t\tonKeyDown={handleKey}\n\t\t\tclassName={cn(\n\t\t\t\t\"relative inline-block cursor-pointer select-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tstyle={{\n\t\t\t\twidth,\n\t\t\t\theight,\n\t\t\t\tperspective: 1000,\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tdata-hex-flashcard-inner\n\t\t\t\tclassName=\"relative h-full w-full transition-transform\"\n\t\t\t\tstyle={{\n\t\t\t\t\ttransformStyle: \"preserve-3d\",\n\t\t\t\t\ttransform: flipped ? \"rotateY(180deg)\" : \"rotateY(0deg)\",\n\t\t\t\t\ttransitionDuration: `${flipDurationMs}ms`,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tdata-hex-flashcard-face\n\t\t\t\t\tdata-side=\"front\"\n\t\t\t\t\tclassName=\"absolute inset-0 flex items-center justify-center rounded-lg border bg-card p-4 text-center text-card-foreground shadow-sm\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackfaceVisibility: \"hidden\",\n\t\t\t\t\t\tWebkitBackfaceVisibility: \"hidden\",\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{front}\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tdata-hex-flashcard-face\n\t\t\t\t\tdata-side=\"back\"\n\t\t\t\t\tclassName=\"absolute inset-0 flex items-center justify-center rounded-lg border bg-card p-4 text-center text-card-foreground shadow-sm\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackfaceVisibility: \"hidden\",\n\t\t\t\t\t\tWebkitBackfaceVisibility: \"hidden\",\n\t\t\t\t\t\ttransform: \"rotateY(180deg)\",\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{back}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport { Flashcard };\n"]}

package/dist/flowchart.d.ts

@@ -0,0 +1,4 @@
+export { FlowchartNode_alias_1 as FlowchartNode } from './_tsup-dts-rollup.js';
+export { FlowchartEdge_alias_1 as FlowchartEdge } from './_tsup-dts-rollup.js';
+export { FlowchartProps_alias_1 as FlowchartProps } from './_tsup-dts-rollup.js';
+export { Flowchart_alias_1 as Flowchart } from './_tsup-dts-rollup.js';

package/dist/flowchart.js

@@ -0,0 +1,275 @@
+"use client";
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function Flowchart({
+  nodes,
+  edges,
+  direction = "vertical",
+  width = 720,
+  height = 480,
+  nodeWidth = 140,
+  nodeHeight = 48,
+  onNodeClick,
+  className,
+  ...rest
+}) {
+  const { nodes: laidOutNodes, edges: laidOutEdges } = React.useMemo(
+    () => layout(nodes, edges, direction, width, height, nodeWidth, nodeHeight),
+    [nodes, edges, direction, width, height, nodeWidth, nodeHeight]
+  );
+  const desc = `Flowchart with ${nodes.length} node${nodes.length === 1 ? "" : "s"} and ${edges.length} edge${edges.length === 1 ? "" : "s"}, laid out ${direction}`;
+  const arrowId = React.useId().replace(/:/g, "-");
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ...rest,
+      "data-hex-flowchart": true,
+      "data-direction": direction,
+      role: "img",
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      className: cn("block", className),
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "Flowchart" }),
+        /* @__PURE__ */ jsx("desc", { children: desc }),
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
+          "marker",
+          {
+            id: `hex-flowchart-arrow-${arrowId}`,
+            viewBox: "0 0 10 10",
+            refX: "10",
+            refY: "5",
+            markerWidth: "6",
+            markerHeight: "6",
+            orient: "auto-start-reverse",
+            children: /* @__PURE__ */ jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: "hsl(var(--muted-foreground))" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx("g", { "data-hex-flowchart-edges": true, children: laidOutEdges.map((e, i) => /* @__PURE__ */ jsxs("g", { "data-hex-flowchart-edge": true, children: [
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: edgePath(e.from, e.to, direction),
+              fill: "none",
+              stroke: "hsl(var(--muted-foreground))",
+              strokeOpacity: 0.7,
+              strokeWidth: 1.25,
+              markerEnd: `url(#hex-flowchart-arrow-${arrowId})`
+            }
+          ),
+          e.edge.label ? /* @__PURE__ */ jsx(
+            "text",
+            {
+              x: (e.from.x + e.to.x) / 2,
+              y: (e.from.y + e.to.y) / 2 - 4,
+              textAnchor: "middle",
+              fontSize: 10,
+              fill: "hsl(var(--muted-foreground))",
+              style: {
+                paintOrder: "stroke"
+              },
+              stroke: "hsl(var(--background))",
+              strokeWidth: 3,
+              strokeLinejoin: "round",
+              children: e.edge.label
+            }
+          ) : null
+        ] }, `${e.edge.source}-${e.edge.target}-${i}`)) }),
+        /* @__PURE__ */ jsx("g", { "data-hex-flowchart-nodes": true, children: laidOutNodes.map((n) => {
+          const shape = n.node.shape ?? "rect";
+          const interactive = Boolean(onNodeClick);
+          const handleActivate = () => onNodeClick?.(n.node);
+          const truncated = truncate(n.node.label, Math.floor((nodeWidth - 16) / 7));
+          const isTruncated = truncated !== n.node.label;
+          return /* @__PURE__ */ jsxs(
+            "g",
+            {
+              "data-hex-flowchart-node": true,
+              "data-shape": shape,
+              "data-rank": n.rank,
+              transform: `translate(${n.x - nodeWidth / 2},${n.y - nodeHeight / 2})`,
+              role: interactive ? "button" : void 0,
+              tabIndex: interactive ? 0 : void 0,
+              "aria-label": interactive ? n.node.label : void 0,
+              style: interactive ? { cursor: "pointer" } : void 0,
+              onClick: interactive ? handleActivate : void 0,
+              onKeyDown: interactive ? (e) => activateOnKey(e, handleActivate) : void 0,
+              children: [
+                isTruncated ? /* @__PURE__ */ jsx("title", { children: n.node.label }) : null,
+                shape === "diamond" ? /* @__PURE__ */ jsx(
+                  "polygon",
+                  {
+                    points: `${nodeWidth / 2},0 ${nodeWidth},${nodeHeight / 2} ${nodeWidth / 2},${nodeHeight} 0,${nodeHeight / 2}`,
+                    fill: "hsl(var(--card))",
+                    stroke: "hsl(var(--border))",
+                    strokeWidth: 1
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "rect",
+                  {
+                    width: nodeWidth,
+                    height: nodeHeight,
+                    rx: shape === "round" ? nodeHeight / 2 : 6,
+                    ry: shape === "round" ? nodeHeight / 2 : 6,
+                    fill: "hsl(var(--card))",
+                    stroke: "hsl(var(--border))",
+                    strokeWidth: 1
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "text",
+                  {
+                    x: nodeWidth / 2,
+                    y: nodeHeight / 2,
+                    dy: "0.35em",
+                    textAnchor: "middle",
+                    fontSize: 12,
+                    fontWeight: 500,
+                    fill: "hsl(var(--foreground))",
+                    style: { pointerEvents: "none" },
+                    children: truncated
+                  }
+                )
+              ]
+            },
+            n.node.id
+          );
+        }) })
+      ]
+    }
+  );
+}
+function layout(nodes, edges, direction, width, height, nodeWidth, nodeHeight) {
+  if (nodes.length === 0) return { nodes: [], edges: [] };
+  const byId = new Map(nodes.map((n) => [n.id, n]));
+  const ranks = computeRanks(nodes, edges, byId);
+  const maxRank = Math.max(...ranks.values(), 0);
+  const rankGroups = /* @__PURE__ */ new Map();
+  for (const n of nodes) {
+    const r = ranks.get(n.id) ?? 0;
+    const arr = rankGroups.get(r) ?? [];
+    arr.push(n.id);
+    rankGroups.set(r, arr);
+  }
+  const parentsOf = /* @__PURE__ */ new Map();
+  for (const n of nodes) parentsOf.set(n.id, []);
+  for (const e of edges) {
+    const arr = parentsOf.get(e.target);
+    if (arr && byId.has(e.source)) arr.push(e.source);
+  }
+  const orderInRank = /* @__PURE__ */ new Map();
+  for (let r = 0; r <= maxRank; r++) {
+    const group = rankGroups.get(r) ?? [];
+    if (r > 0) {
+      group.sort((a, b) => meanParentIndex(a, parentsOf, orderInRank) - meanParentIndex(b, parentsOf, orderInRank));
+    }
+    group.forEach((id, i) => orderInRank.set(id, i));
+  }
+  const positions = /* @__PURE__ */ new Map();
+  const margin = 32;
+  const usableMain = (direction === "vertical" ? height : width) - margin * 2;
+  const usableCross = (direction === "vertical" ? width : height) - margin * 2;
+  const rankCount = maxRank + 1;
+  const mainStep = rankCount > 1 ? usableMain / (rankCount - 1) : 0;
+  for (let r = 0; r <= maxRank; r++) {
+    const group = rankGroups.get(r) ?? [];
+    const crossStep = group.length > 0 ? usableCross / (group.length + 1) : 0;
+    group.forEach((id, i) => {
+      const cross = margin + crossStep * (i + 1);
+      const main = margin + mainStep * r;
+      if (direction === "vertical") {
+        positions.set(id, { x: cross, y: main, rank: r });
+      } else {
+        positions.set(id, { x: main, y: cross, rank: r });
+      }
+    });
+  }
+  const laidOutNodes = nodes.map((n) => {
+    const p = positions.get(n.id) ?? { x: 0, y: 0, rank: 0 };
+    return { node: n, x: p.x, y: p.y, rank: p.rank };
+  });
+  const laidOutEdges = edges.map((edge) => {
+    const sp = positions.get(edge.source);
+    const tp = positions.get(edge.target);
+    if (!sp || !tp) return null;
+    const from = direction === "vertical" ? { x: sp.x, y: sp.y + nodeHeight / 2 } : { x: sp.x + nodeWidth / 2, y: sp.y };
+    const to = direction === "vertical" ? { x: tp.x, y: tp.y - nodeHeight / 2 } : { x: tp.x - nodeWidth / 2, y: tp.y };
+    return { edge, from, to };
+  }).filter((e) => e !== null);
+  return { nodes: laidOutNodes, edges: laidOutEdges };
+}
+function meanParentIndex(id, parentsOf, orderInRank) {
+  const parents = parentsOf.get(id) ?? [];
+  if (parents.length === 0) return Number.POSITIVE_INFINITY;
+  let sum = 0;
+  let count = 0;
+  for (const p of parents) {
+    const idx = orderInRank.get(p);
+    if (idx != null) {
+      sum += idx;
+      count++;
+    }
+  }
+  return count === 0 ? Number.POSITIVE_INFINITY : sum / count;
+}
+function computeRanks(nodes, edges, byId) {
+  const ranks = /* @__PURE__ */ new Map();
+  const incoming = /* @__PURE__ */ new Map();
+  for (const n of nodes) incoming.set(n.id, []);
+  for (const e of edges) {
+    const arr = incoming.get(e.target);
+    if (arr && byId.has(e.source)) arr.push(e.source);
+  }
+  const memo = /* @__PURE__ */ new Map();
+  const visiting = /* @__PURE__ */ new Set();
+  const rankOf = (id) => {
+    const cached = memo.get(id);
+    if (cached !== void 0) return cached;
+    if (visiting.has(id)) return 0;
+    visiting.add(id);
+    try {
+      const node = byId.get(id);
+      if (node?.rank != null) {
+        memo.set(id, node.rank);
+        return node.rank;
+      }
+      const parents = incoming.get(id) ?? [];
+      const r = parents.length === 0 ? 0 : 1 + Math.max(...parents.map((p) => rankOf(p)));
+      memo.set(id, r);
+      return r;
+    } finally {
+      visiting.delete(id);
+    }
+  };
+  for (const n of nodes) ranks.set(n.id, rankOf(n.id));
+  return ranks;
+}
+function edgePath(from, to, direction) {
+  if (direction === "vertical") {
+    const my = (from.y + to.y) / 2;
+    return `M${from.x},${from.y} C${from.x},${my} ${to.x},${my} ${to.x},${to.y}`;
+  }
+  const mx = (from.x + to.x) / 2;
+  return `M${from.x},${from.y} C${mx},${from.y} ${mx},${to.y} ${to.x},${to.y}`;
+}
+function truncate(s, max) {
+  if (s.length <= max) return s;
+  return `${s.slice(0, Math.max(1, max - 1))}\u2026`;
+}
+function activateOnKey(e, fn) {
+  if (e.key === "Enter" || e.key === " ") {
+    e.preventDefault();
+    fn();
+  }
+}
+
+export { Flowchart };
+//# sourceMappingURL=flowchart.js.map
+//# sourceMappingURL=flowchart.js.map

package/dist/flowchart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/artifacts/flowchart/flowchart.tsx"],"names":[],"mappings":"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","file":"flowchart.js","sourcesContent":["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 { cn } from \"../../lib/utils.js\";\n\n/**\n * Typed React flowchart. Pass `nodes` (with optional `shape`/`type`) and\n * `edges`; the component runs a topological-rank auto-layout and renders\n * top-to-bottom or left-to-right with directional arrows. Pure SVG; no\n * heavy peer dependency, no DAG-layout library.\n *\n * Distinct from `<Diagram>` (Mermaid string DSL) and `<Canvas>` (free-form\n * ReactFlow). Use Flowchart when you have STRUCTURED data and want a\n * polished SVG without the bundle cost or DSL of those alternatives.\n *\n * @example\n * <Flowchart\n *   nodes={[\n *     { id: \"start\", label: \"Start\", shape: \"round\" },\n *     { id: \"check\", label: \"Authorized?\", shape: \"diamond\" },\n *     { id: \"ok\", label: \"Continue\" },\n *     { id: \"denied\", label: \"Reject\", shape: \"round\" },\n *   ]}\n *   edges={[\n *     { source: \"start\", target: \"check\" },\n *     { source: \"check\", target: \"ok\", label: \"yes\" },\n *     { source: \"check\", target: \"denied\", label: \"no\" },\n *   ]}\n * />\n */\nexport type FlowchartNode = {\n\tid: string;\n\tlabel: string;\n\t/** Visual shape — \"rect\" (default), \"round\" (rounded rect, terminal markers), or \"diamond\" (decision). */\n\tshape?: \"rect\" | \"round\" | \"diamond\";\n\t/** Optional explicit rank/depth override; otherwise computed via topological sort. */\n\trank?: number;\n};\n\nexport type FlowchartEdge = {\n\tsource: string;\n\ttarget: string;\n\tlabel?: string;\n};\n\nexport interface FlowchartProps extends Omit<React.SVGAttributes<SVGSVGElement>, \"children\"> {\n\t/** Node definitions. Every edge's `source`/`target` MUST match an `id` here. */\n\tnodes: FlowchartNode[];\n\t/** Directional edges. The graph MUST be a DAG (no cycles). */\n\tedges: FlowchartEdge[];\n\t/** Layout direction. Default \"vertical\" (top-to-bottom). */\n\tdirection?: \"vertical\" | \"horizontal\";\n\t/** Pixel width of the rendered SVG. Default 720. */\n\twidth?: number;\n\t/** Pixel height of the rendered SVG. Default 480. */\n\theight?: number;\n\t/** Pixel width of each node. Default 140. */\n\tnodeWidth?: number;\n\t/** Pixel height of each node. Default 48. */\n\tnodeHeight?: number;\n\t/** Fired when a node is clicked. */\n\tonNodeClick?: (node: FlowchartNode) => void;\n}\n\ninterface LaidOutNode {\n\tnode: FlowchartNode;\n\tx: number;\n\ty: number;\n\trank: number;\n}\n\ninterface LaidOutEdge {\n\tedge: FlowchartEdge;\n\tfrom: { x: number; y: number };\n\tto: { x: number; y: number };\n}\n\nfunction Flowchart({\n\tnodes,\n\tedges,\n\tdirection = \"vertical\",\n\twidth = 720,\n\theight = 480,\n\tnodeWidth = 140,\n\tnodeHeight = 48,\n\tonNodeClick,\n\tclassName,\n\t...rest\n}: FlowchartProps) {\n\tconst { nodes: laidOutNodes, edges: laidOutEdges } = React.useMemo(\n\t\t() => layout(nodes, edges, direction, width, height, nodeWidth, nodeHeight),\n\t\t[nodes, edges, direction, width, height, nodeWidth, nodeHeight],\n\t);\n\tconst desc = `Flowchart with ${nodes.length} node${nodes.length === 1 ? \"\" : \"s\"} and ${edges.length} edge${edges.length === 1 ? \"\" : \"s\"}, laid out ${direction}`;\n\tconst arrowId = React.useId().replace(/:/g, \"-\");\n\n\treturn (\n\t\t<svg\n\t\t\t{...rest}\n\t\t\tdata-hex-flowchart\n\t\t\tdata-direction={direction}\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>Flowchart</title>\n\t\t\t<desc>{desc}</desc>\n\t\t\t<defs>\n\t\t\t\t<marker\n\t\t\t\t\tid={`hex-flowchart-arrow-${arrowId}`}\n\t\t\t\t\tviewBox=\"0 0 10 10\"\n\t\t\t\t\trefX=\"10\"\n\t\t\t\t\trefY=\"5\"\n\t\t\t\t\tmarkerWidth=\"6\"\n\t\t\t\t\tmarkerHeight=\"6\"\n\t\t\t\t\torient=\"auto-start-reverse\"\n\t\t\t\t>\n\t\t\t\t\t<path d=\"M 0 0 L 10 5 L 0 10 z\" fill=\"hsl(var(--muted-foreground))\" />\n\t\t\t\t</marker>\n\t\t\t</defs>\n\t\t\t<g data-hex-flowchart-edges>\n\t\t\t\t{laidOutEdges.map((e, i) => (\n\t\t\t\t\t<g key={`${e.edge.source}-${e.edge.target}-${i}`} data-hex-flowchart-edge>\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td={edgePath(e.from, e.to, direction)}\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\tstroke=\"hsl(var(--muted-foreground))\"\n\t\t\t\t\t\t\tstrokeOpacity={0.7}\n\t\t\t\t\t\t\tstrokeWidth={1.25}\n\t\t\t\t\t\t\tmarkerEnd={`url(#hex-flowchart-arrow-${arrowId})`}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{e.edge.label ? (\n\t\t\t\t\t\t\t<text\n\t\t\t\t\t\t\t\tx={(e.from.x + e.to.x) / 2}\n\t\t\t\t\t\t\t\ty={(e.from.y + e.to.y) / 2 - 4}\n\t\t\t\t\t\t\t\ttextAnchor=\"middle\"\n\t\t\t\t\t\t\t\tfontSize={10}\n\t\t\t\t\t\t\t\tfill=\"hsl(var(--muted-foreground))\"\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tpaintOrder: \"stroke\",\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tstroke=\"hsl(var(--background))\"\n\t\t\t\t\t\t\t\tstrokeWidth={3}\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{e.edge.label}\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</g>\n\t\t\t<g data-hex-flowchart-nodes>\n\t\t\t\t{laidOutNodes.map((n) => {\n\t\t\t\t\tconst shape = n.node.shape ?? \"rect\";\n\t\t\t\t\tconst interactive = Boolean(onNodeClick);\n\t\t\t\t\tconst handleActivate = () => onNodeClick?.(n.node);\n\t\t\t\t\tconst truncated = truncate(n.node.label, Math.floor((nodeWidth - 16) / 7));\n\t\t\t\t\tconst isTruncated = truncated !== n.node.label;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<g\n\t\t\t\t\t\t\tkey={n.node.id}\n\t\t\t\t\t\t\tdata-hex-flowchart-node\n\t\t\t\t\t\t\tdata-shape={shape}\n\t\t\t\t\t\t\tdata-rank={n.rank}\n\t\t\t\t\t\t\ttransform={`translate(${n.x - nodeWidth / 2},${n.y - nodeHeight / 2})`}\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 ? n.node.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{/* Native SVG tooltip for the full label — recovers any text\n\t\t\t\t\t\t\t    truncated by the heuristic without relying on font metrics. */}\n\t\t\t\t\t\t\t{isTruncated ? <title>{n.node.label}</title> : null}\n\t\t\t\t\t\t\t{shape === \"diamond\" ? (\n\t\t\t\t\t\t\t\t<polygon\n\t\t\t\t\t\t\t\t\tpoints={`${nodeWidth / 2},0 ${nodeWidth},${nodeHeight / 2} ${nodeWidth / 2},${nodeHeight} 0,${nodeHeight / 2}`}\n\t\t\t\t\t\t\t\t\tfill=\"hsl(var(--card))\"\n\t\t\t\t\t\t\t\t\tstroke=\"hsl(var(--border))\"\n\t\t\t\t\t\t\t\t\tstrokeWidth={1}\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<rect\n\t\t\t\t\t\t\t\t\twidth={nodeWidth}\n\t\t\t\t\t\t\t\t\theight={nodeHeight}\n\t\t\t\t\t\t\t\t\trx={shape === \"round\" ? nodeHeight / 2 : 6}\n\t\t\t\t\t\t\t\t\try={shape === \"round\" ? nodeHeight / 2 : 6}\n\t\t\t\t\t\t\t\t\tfill=\"hsl(var(--card))\"\n\t\t\t\t\t\t\t\t\tstroke=\"hsl(var(--border))\"\n\t\t\t\t\t\t\t\t\tstrokeWidth={1}\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<text\n\t\t\t\t\t\t\t\tx={nodeWidth / 2}\n\t\t\t\t\t\t\t\ty={nodeHeight / 2}\n\t\t\t\t\t\t\t\tdy=\"0.35em\"\n\t\t\t\t\t\t\t\ttextAnchor=\"middle\"\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(--foreground))\"\n\t\t\t\t\t\t\t\tstyle={{ pointerEvents: \"none\" }}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{truncated}\n\t\t\t\t\t\t\t</text>\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</svg>\n\t);\n}\n\nfunction layout(\n\tnodes: FlowchartNode[],\n\tedges: FlowchartEdge[],\n\tdirection: \"vertical\" | \"horizontal\",\n\twidth: number,\n\theight: number,\n\tnodeWidth: number,\n\tnodeHeight: number,\n): { nodes: LaidOutNode[]; edges: LaidOutEdge[] } {\n\tif (nodes.length === 0) return { nodes: [], edges: [] };\n\n\tconst byId = new Map(nodes.map((n) => [n.id, n]));\n\tconst ranks = computeRanks(nodes, edges, byId);\n\tconst maxRank = Math.max(...ranks.values(), 0);\n\n\t// Group node ids by rank.\n\tconst rankGroups = new Map<number, string[]>();\n\tfor (const n of nodes) {\n\t\tconst r = ranks.get(n.id) ?? 0;\n\t\tconst arr = rankGroups.get(r) ?? [];\n\t\tarr.push(n.id);\n\t\trankGroups.set(r, arr);\n\t}\n\n\t// Single-pass barycenter sweep: at each rank > 0, sort the rank's nodes\n\t// by the mean cross-axis index of their parents at the previous rank. Cuts\n\t// most edge crossings without pulling in dagre / elkjs. The first rank\n\t// keeps insertion order — that anchors the rest of the sweep.\n\tconst parentsOf = new Map<string, string[]>();\n\tfor (const n of nodes) parentsOf.set(n.id, []);\n\tfor (const e of edges) {\n\t\tconst arr = parentsOf.get(e.target);\n\t\tif (arr && byId.has(e.source)) arr.push(e.source);\n\t}\n\tconst orderInRank = new Map<string, number>();\n\tfor (let r = 0; r <= maxRank; r++) {\n\t\tconst group = rankGroups.get(r) ?? [];\n\t\tif (r > 0) {\n\t\t\tgroup.sort((a, b) => meanParentIndex(a, parentsOf, orderInRank) - meanParentIndex(b, parentsOf, orderInRank));\n\t\t}\n\t\tgroup.forEach((id, i) => orderInRank.set(id, i));\n\t}\n\n\tconst positions = new Map<string, { x: number; y: number; rank: number }>();\n\tconst margin = 32;\n\tconst usableMain = (direction === \"vertical\" ? height : width) - margin * 2;\n\tconst usableCross = (direction === \"vertical\" ? width : height) - margin * 2;\n\tconst rankCount = maxRank + 1;\n\tconst mainStep = rankCount > 1 ? usableMain / (rankCount - 1) : 0;\n\n\tfor (let r = 0; r <= maxRank; r++) {\n\t\tconst group = rankGroups.get(r) ?? [];\n\t\tconst crossStep = group.length > 0 ? usableCross / (group.length + 1) : 0;\n\t\tgroup.forEach((id, i) => {\n\t\t\tconst cross = margin + crossStep * (i + 1);\n\t\t\tconst main = margin + mainStep * r;\n\t\t\tif (direction === \"vertical\") {\n\t\t\t\tpositions.set(id, { x: cross, y: main, rank: r });\n\t\t\t} else {\n\t\t\t\tpositions.set(id, { x: main, y: cross, rank: r });\n\t\t\t}\n\t\t});\n\t}\n\n\tconst laidOutNodes: LaidOutNode[] = nodes.map((n) => {\n\t\tconst p = positions.get(n.id) ?? { x: 0, y: 0, rank: 0 };\n\t\treturn { node: n, x: p.x, y: p.y, rank: p.rank };\n\t});\n\n\tconst laidOutEdges: LaidOutEdge[] = edges\n\t\t.map((edge) => {\n\t\t\tconst sp = positions.get(edge.source);\n\t\t\tconst tp = positions.get(edge.target);\n\t\t\tif (!sp || !tp) return null;\n\t\t\t// Connect from the appropriate edge of the source to the appropriate edge of the target\n\t\t\tconst from =\n\t\t\t\tdirection === \"vertical\"\n\t\t\t\t\t? { x: sp.x, y: sp.y + nodeHeight / 2 }\n\t\t\t\t\t: { x: sp.x + nodeWidth / 2, y: sp.y };\n\t\t\tconst to =\n\t\t\t\tdirection === \"vertical\"\n\t\t\t\t\t? { x: tp.x, y: tp.y - nodeHeight / 2 }\n\t\t\t\t\t: { x: tp.x - nodeWidth / 2, y: tp.y };\n\t\t\treturn { edge, from, to };\n\t\t})\n\t\t.filter((e): e is LaidOutEdge => e !== null);\n\n\treturn { nodes: laidOutNodes, edges: laidOutEdges };\n}\n\nfunction meanParentIndex(\n\tid: string,\n\tparentsOf: Map<string, string[]>,\n\torderInRank: Map<string, number>,\n): number {\n\tconst parents = parentsOf.get(id) ?? [];\n\tif (parents.length === 0) return Number.POSITIVE_INFINITY; // sort orphans last\n\tlet sum = 0;\n\tlet count = 0;\n\tfor (const p of parents) {\n\t\tconst idx = orderInRank.get(p);\n\t\tif (idx != null) {\n\t\t\tsum += idx;\n\t\t\tcount++;\n\t\t}\n\t}\n\treturn count === 0 ? Number.POSITIVE_INFINITY : sum / count;\n}\n\n/**\n * Compute the rank (0-indexed depth) of each node via topological longest-path.\n * Honors any explicit `rank` overrides on the input nodes.\n *\n * Cycles: nodes inside a cycle resolve to 0. Crucially the cycle-touched\n * value is NOT memoized — the previous version cached the placeholder under\n * the first node along the cycle and poisoned every later descendant of that\n * node, even paths that didn't touch the cycle. The schema's `commonMistakes`\n * still warns DAG-only, but the failure mode is now contained to the\n * actually-cyclic nodes rather than spreading downstream.\n */\nfunction computeRanks(\n\tnodes: FlowchartNode[],\n\tedges: FlowchartEdge[],\n\tbyId: Map<string, FlowchartNode>,\n): Map<string, number> {\n\tconst ranks = new Map<string, number>();\n\tconst incoming = new Map<string, string[]>();\n\tfor (const n of nodes) incoming.set(n.id, []);\n\tfor (const e of edges) {\n\t\tconst arr = incoming.get(e.target);\n\t\tif (arr && byId.has(e.source)) arr.push(e.source);\n\t}\n\tconst memo = new Map<string, number>();\n\tconst visiting = new Set<string>();\n\n\tconst rankOf = (id: string): number => {\n\t\tconst cached = memo.get(id);\n\t\tif (cached !== undefined) return cached;\n\t\tif (visiting.has(id)) return 0; // cycle short-circuit (NOT memoized)\n\t\tvisiting.add(id);\n\t\ttry {\n\t\t\tconst node = byId.get(id);\n\t\t\tif (node?.rank != null) {\n\t\t\t\tmemo.set(id, node.rank);\n\t\t\t\treturn node.rank;\n\t\t\t}\n\t\t\tconst parents = incoming.get(id) ?? [];\n\t\t\tconst r = parents.length === 0 ? 0 : 1 + Math.max(...parents.map((p) => rankOf(p)));\n\t\t\tmemo.set(id, r);\n\t\t\treturn r;\n\t\t} finally {\n\t\t\tvisiting.delete(id);\n\t\t}\n\t};\n\n\tfor (const n of nodes) ranks.set(n.id, rankOf(n.id));\n\treturn ranks;\n}\n\nfunction edgePath(\n\tfrom: { x: number; y: number },\n\tto: { x: number; y: number },\n\tdirection: \"vertical\" | \"horizontal\",\n): string {\n\tif (direction === \"vertical\") {\n\t\tconst my = (from.y + to.y) / 2;\n\t\treturn `M${from.x},${from.y} C${from.x},${my} ${to.x},${my} ${to.x},${to.y}`;\n\t}\n\tconst mx = (from.x + to.x) / 2;\n\treturn `M${from.x},${from.y} C${mx},${from.y} ${mx},${to.y} ${to.x},${to.y}`;\n}\n\nfunction truncate(s: string, max: number): string {\n\tif (s.length <= max) return s;\n\treturn `${s.slice(0, Math.max(1, max - 1))}…`;\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 { Flowchart };\n"]}

package/dist/funnel.d.ts

@@ -0,0 +1,3 @@
+export { FunnelStage_alias_1 as FunnelStage } from './_tsup-dts-rollup.js';
+export { FunnelProps_alias_1 as FunnelProps } from './_tsup-dts-rollup.js';
+export { Funnel_alias_1 as Funnel } from './_tsup-dts-rollup.js';

package/dist/funnel.js

@@ -0,0 +1,157 @@
+"use client";
+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 Funnel({
+  stages,
+  width = 480,
+  height = 360,
+  gap = 4,
+  showConversion = true,
+  onStageClick,
+  className,
+  ...rest
+}) {
+  const laidOut = layout(stages, width, height, gap);
+  const desc = `Funnel with ${stages.length} stage${stages.length === 1 ? "" : "s"}, peak value ${stages[0]?.value ?? 0}`;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ...rest,
+      "data-hex-funnel": true,
+      role: "img",
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      className: cn("block", className),
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "Funnel chart" }),
+        /* @__PURE__ */ jsx("desc", { children: desc }),
+        /* @__PURE__ */ jsx("g", { "data-hex-funnel-stages": true, children: laidOut.map((s) => {
+          const interactive = Boolean(onStageClick);
+          const handleActivate = () => onStageClick?.(s.stage);
+          return /* @__PURE__ */ jsxs(
+            "g",
+            {
+              "data-hex-funnel-stage": true,
+              "data-depth": s.depth,
+              role: interactive ? "button" : void 0,
+              tabIndex: interactive ? 0 : void 0,
+              "aria-label": interactive ? `${s.stage.label}: ${s.stage.value}` : void 0,
+              style: interactive ? { cursor: "pointer" } : void 0,
+              onClick: interactive ? handleActivate : void 0,
+              onKeyDown: interactive ? (e) => activateOnKey(e, handleActivate) : void 0,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "polygon",
+                  {
+                    points: `${s.topLeft},${s.yTop} ${s.topRight},${s.yTop} ${s.bottomRight},${s.yBottom} ${s.bottomLeft},${s.yBottom}`,
+                    fill: pickChartHue(s.depth),
+                    fillOpacity: 0.85,
+                    stroke: "hsl(var(--background))",
+                    strokeWidth: 1
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "text",
+                  {
+                    x: width / 2,
+                    y: (s.yTop + s.yBottom) / 2,
+                    dy: "0.35em",
+                    textAnchor: "middle",
+                    fontSize: 12,
+                    fontWeight: 600,
+                    fill: "hsl(var(--background))",
+                    style: {
+                      pointerEvents: "none",
+                      paintOrder: "stroke",
+                      stroke: "hsl(var(--foreground) / 0.45)",
+                      strokeWidth: 2
+                    },
+                    children: `${s.stage.label} \xB7 ${s.stage.value.toLocaleString()}`
+                  }
+                )
+              ]
+            },
+            s.stage.id
+          );
+        }) }),
+        showConversion ? /* @__PURE__ */ jsx("g", { "data-hex-funnel-conversions": true, children: laidOut.map(
+          (s) => s.conversionFromPrev != null ? /* @__PURE__ */ jsx(
+            "text",
+            {
+              "data-hex-funnel-conversion": true,
+              x: width - 4,
+              y: s.yTop - 2,
+              textAnchor: "end",
+              fontSize: 10,
+              fill: "hsl(var(--muted-foreground))",
+              children: formatPct(s.conversionFromPrev)
+            },
+            `conv-${s.stage.id}`
+          ) : null
+        ) }) : null
+      ]
+    }
+  );
+}
+function layout(stages, width, height, gap) {
+  if (stages.length === 0) return [];
+  const peak = Math.max(...stages.map((s) => s.value), 0) || 1;
+  const usableHeight = height - gap * Math.max(0, stages.length - 1);
+  const stageHeight = usableHeight / stages.length;
+  const cx = width / 2;
+  return stages.map((stage, i) => {
+    const yTop = i * (stageHeight + gap);
+    const yBottom = yTop + stageHeight;
+    const topRatio = stage.value / peak;
+    const next = stages[i + 1];
+    const bottomRatio = next ? next.value / peak : topRatio;
+    const topHalfWidth = width / 2 * Math.max(0, Math.min(1, topRatio));
+    const bottomHalfWidth = width / 2 * Math.max(0, Math.min(1, bottomRatio));
+    const prev = stages[i - 1];
+    const conversionFromPrev = prev && prev.value > 0 ? stage.value / prev.value : null;
+    return {
+      stage,
+      depth: i,
+      topLeft: cx - topHalfWidth,
+      topRight: cx + topHalfWidth,
+      bottomLeft: cx - bottomHalfWidth,
+      bottomRight: cx + bottomHalfWidth,
+      yTop,
+      yBottom,
+      conversionFromPrev
+    };
+  });
+}
+function formatPct(ratio) {
+  if (!Number.isFinite(ratio)) return "\u2014";
+  return `${(ratio * 100).toFixed(ratio < 0.1 ? 1 : 0)}%`;
+}
+function activateOnKey(e, fn) {
+  if (e.key === "Enter" || e.key === " ") {
+    e.preventDefault();
+    fn();
+  }
+}
+
+export { Funnel };
+//# sourceMappingURL=funnel.js.map
+//# sourceMappingURL=funnel.js.map

package/dist/funnel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/chart-palette.ts","../src/lib/utils.ts","../src/artifacts/funnel/funnel.tsx"],"names":[],"mappings":"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","file":"funnel.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 * Conversion funnel — a vertical stack of trapezoidal stages whose width\n * is proportional to each stage's value. Pure SVG; no heavy peer\n * dependency. Pair with `<Sankey>` when stage-to-stage flow detail\n * matters; use Funnel when the conversion drop-off itself is the\n * message.\n *\n * @example\n * <Funnel\n *   stages={[\n *     { id: \"visit\", label: \"Visited\", value: 10000 },\n *     { id: \"signup\", label: \"Signed up\", value: 1200 },\n *     { id: \"active\", label: \"Active\", value: 480 },\n *     { id: \"paid\", label: \"Paid\", value: 95 },\n *   ]}\n * />\n */\nexport type FunnelStage = {\n\tid: string;\n\tlabel: string;\n\tvalue: number;\n};\n\nexport interface FunnelProps extends Omit<React.SVGAttributes<SVGSVGElement>, \"children\"> {\n\t/** Ordered top-to-bottom stages. Values must be non-negative. */\n\tstages: FunnelStage[];\n\t/** Pixel width of the rendered SVG. Default 480. */\n\twidth?: number;\n\t/** Pixel height of the rendered SVG. Default 360. */\n\theight?: number;\n\t/** Pixel gap between stages. Default 4. */\n\tgap?: number;\n\t/** Show conversion-rate annotations between stages. Default true. */\n\tshowConversion?: boolean;\n\t/** Fired when a stage is clicked. */\n\tonStageClick?: (stage: FunnelStage) => void;\n}\n\ninterface LaidOutStage {\n\tstage: FunnelStage;\n\tdepth: number;\n\ttopLeft: number;\n\ttopRight: number;\n\tbottomLeft: number;\n\tbottomRight: number;\n\tyTop: number;\n\tyBottom: number;\n\tconversionFromPrev: number | null;\n}\n\nfunction Funnel({\n\tstages,\n\twidth = 480,\n\theight = 360,\n\tgap = 4,\n\tshowConversion = true,\n\tonStageClick,\n\tclassName,\n\t...rest\n}: FunnelProps) {\n\tconst laidOut = layout(stages, width, height, gap);\n\tconst desc = `Funnel with ${stages.length} stage${stages.length === 1 ? \"\" : \"s\"}, peak value ${stages[0]?.value ?? 0}`;\n\n\treturn (\n\t\t<svg\n\t\t\t{...rest}\n\t\t\tdata-hex-funnel\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>Funnel chart</title>\n\t\t\t<desc>{desc}</desc>\n\t\t\t<g data-hex-funnel-stages>\n\t\t\t\t{laidOut.map((s) => {\n\t\t\t\t\tconst interactive = Boolean(onStageClick);\n\t\t\t\t\tconst handleActivate = () => onStageClick?.(s.stage);\n\t\t\t\t\treturn (\n\t\t\t\t\t<g\n\t\t\t\t\t\tkey={s.stage.id}\n\t\t\t\t\t\tdata-hex-funnel-stage\n\t\t\t\t\t\tdata-depth={s.depth}\n\t\t\t\t\t\trole={interactive ? \"button\" : undefined}\n\t\t\t\t\t\ttabIndex={interactive ? 0 : undefined}\n\t\t\t\t\t\taria-label={interactive ? `${s.stage.label}: ${s.stage.value}` : undefined}\n\t\t\t\t\t\tstyle={interactive ? { cursor: \"pointer\" } : undefined}\n\t\t\t\t\t\tonClick={interactive ? handleActivate : undefined}\n\t\t\t\t\t\tonKeyDown={interactive ? (e) => activateOnKey(e, handleActivate) : undefined}\n\t\t\t\t\t>\n\t\t\t\t\t\t<polygon\n\t\t\t\t\t\t\tpoints={`${s.topLeft},${s.yTop} ${s.topRight},${s.yTop} ${s.bottomRight},${s.yBottom} ${s.bottomLeft},${s.yBottom}`}\n\t\t\t\t\t\t\tfill={pickChartHue(s.depth)}\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<text\n\t\t\t\t\t\t\t// Page-bg fill + foreground-tinted stroke is the\n\t\t\t\t\t\t\t// classic \"outline label\" technique: text reads on\n\t\t\t\t\t\t\t// any chart-1..6 fill regardless of hue, and stays\n\t\t\t\t\t\t\t// readable when the trapezoid narrows below the\n\t\t\t\t\t\t\t// label's width (the label spans outside the\n\t\t\t\t\t\t\t// polygon onto the page bg).\n\t\t\t\t\t\t\tx={width / 2}\n\t\t\t\t\t\t\ty={(s.yTop + s.yBottom) / 2}\n\t\t\t\t\t\t\tdy=\"0.35em\"\n\t\t\t\t\t\t\ttextAnchor=\"middle\"\n\t\t\t\t\t\t\tfontSize={12}\n\t\t\t\t\t\t\tfontWeight={600}\n\t\t\t\t\t\t\tfill=\"hsl(var(--background))\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tpointerEvents: \"none\",\n\t\t\t\t\t\t\t\tpaintOrder: \"stroke\",\n\t\t\t\t\t\t\t\tstroke: \"hsl(var(--foreground) / 0.45)\",\n\t\t\t\t\t\t\t\tstrokeWidth: 2,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{`${s.stage.label} · ${s.stage.value.toLocaleString()}`}\n\t\t\t\t\t\t</text>\n\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{showConversion ? (\n\t\t\t\t<g data-hex-funnel-conversions>\n\t\t\t\t\t{laidOut.map((s) =>\n\t\t\t\t\t\ts.conversionFromPrev != null ? (\n\t\t\t\t\t\t\t<text\n\t\t\t\t\t\t\t\tkey={`conv-${s.stage.id}`}\n\t\t\t\t\t\t\t\tdata-hex-funnel-conversion\n\t\t\t\t\t\t\t\tx={width - 4}\n\t\t\t\t\t\t\t\ty={s.yTop - 2}\n\t\t\t\t\t\t\t\ttextAnchor=\"end\"\n\t\t\t\t\t\t\t\tfontSize={10}\n\t\t\t\t\t\t\t\tfill=\"hsl(var(--muted-foreground))\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{formatPct(s.conversionFromPrev)}\n\t\t\t\t\t\t\t</text>\n\t\t\t\t\t\t) : null,\n\t\t\t\t\t)}\n\t\t\t\t</g>\n\t\t\t) : null}\n\t\t</svg>\n\t);\n}\n\nfunction layout(stages: FunnelStage[], width: number, height: number, gap: number): LaidOutStage[] {\n\tif (stages.length === 0) return [];\n\tconst peak = Math.max(...stages.map((s) => s.value), 0) || 1;\n\tconst usableHeight = height - gap * Math.max(0, stages.length - 1);\n\tconst stageHeight = usableHeight / stages.length;\n\tconst cx = width / 2;\n\n\treturn stages.map((stage, i) => {\n\t\tconst yTop = i * (stageHeight + gap);\n\t\tconst yBottom = yTop + stageHeight;\n\t\tconst topRatio = stage.value / peak;\n\t\tconst next = stages[i + 1];\n\t\tconst bottomRatio = next ? next.value / peak : topRatio;\n\t\tconst topHalfWidth = (width / 2) * Math.max(0, Math.min(1, topRatio));\n\t\tconst bottomHalfWidth = (width / 2) * Math.max(0, Math.min(1, bottomRatio));\n\t\tconst prev = stages[i - 1];\n\t\tconst conversionFromPrev = prev && prev.value > 0 ? stage.value / prev.value : null;\n\t\treturn {\n\t\t\tstage,\n\t\t\tdepth: i,\n\t\t\ttopLeft: cx - topHalfWidth,\n\t\t\ttopRight: cx + topHalfWidth,\n\t\t\tbottomLeft: cx - bottomHalfWidth,\n\t\t\tbottomRight: cx + bottomHalfWidth,\n\t\t\tyTop,\n\t\t\tyBottom,\n\t\t\tconversionFromPrev,\n\t\t};\n\t});\n}\n\nfunction formatPct(ratio: number): string {\n\tif (!Number.isFinite(ratio)) return \"—\";\n\treturn `${(ratio * 100).toFixed(ratio < 0.1 ? 1 : 0)}%`;\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 { Funnel };\n"]}