@pibbl/core 0.0.2 → 0.0.3-alpha.109.1

package/dist/features/viz/lib/graph/bipartite.js

@@ -0,0 +1,250 @@
+import { jsx, jsxs } from "@pibbl/core/jsx-runtime";
+import { Group, SvgPath, resolveSignalValue } from "@pibbl/core";
+import {
+  defaultGraphEdgeStyle,
+  defaultGraphLabelStyle,
+  defaultGraphNodeStyle,
+  GraphLabel,
+  GraphNode,
+  resolveMarkStyle,
+  useGraphFrame
+} from "./shared.js";
+function access(input, datum) {
+  return typeof input === "function" ? input(datum) : datum[input];
+}
+function finite(value, name, zero = false) {
+  if (!Number.isFinite(value) || zero && value < 0)
+    throw new RangeError(
+      `layoutBipartite: ${name} must be finite${zero ? " and nonnegative" : ""}.`
+    );
+  return value;
+}
+function label(text, bounds) {
+  return Object.freeze({
+    text,
+    bounds: Object.freeze(bounds),
+    rotationDegrees: 0
+  });
+}
+function route(a, b) {
+  const middle = (a.x + b.x) / 2;
+  const segments = Object.freeze([
+    { type: "move", x: a.x, y: a.y },
+    {
+      type: "cubic",
+      cp1x: middle,
+      cp1y: a.y,
+      cp2x: middle,
+      cp2y: b.y,
+      x: b.x,
+      y: b.y
+    }
+  ]);
+  return Object.freeze({
+    sourceAnchor: Object.freeze(a),
+    targetAnchor: Object.freeze(b),
+    segments,
+    arrowSegments: null
+  });
+}
+function path(route2) {
+  return route2.segments.map(
+    (segment) => segment.type === "move" ? `M ${segment.x} ${segment.y}` : segment.type === "cubic" ? `C ${segment.cp1x} ${segment.cp1y} ${segment.cp2x} ${segment.cp2y} ${segment.x} ${segment.y}` : ""
+  ).join(" ");
+}
+function placed(data, keyBy, labelBy, atX, bounds, size, gap) {
+  const total = data.reduce((sum, datum) => sum + (size?.(datum).height ?? 34), 0) + Math.max(0, data.length - 1) * gap;
+  let y = bounds.y + Math.max(0, (bounds.height - total) / 2);
+  const seen = /* @__PURE__ */ new Set();
+  return Object.freeze(
+    data.map((datum) => {
+      const key = access(keyBy, datum);
+      if (seen.has(key))
+        throw new Error(
+          `layoutBipartite: duplicate node key ${String(key)} on one side.`
+        );
+      seen.add(key);
+      const dimensions = size?.(datum) ?? { width: 150, height: 34 };
+      const box = {
+        x: atX,
+        y,
+        width: dimensions.width,
+        height: dimensions.height
+      };
+      y += dimensions.height + gap;
+      return Object.freeze({
+        key,
+        datum,
+        bounds: Object.freeze(box),
+        label: label(labelBy ? access(labelBy, datum) : String(key), box),
+        detail: null
+      });
+    })
+  );
+}
+function layoutBipartite(graph, options) {
+  const b = options.bounds;
+  finite(b.x, "bounds.x");
+  finite(b.y, "bounds.y");
+  finite(b.width, "bounds.width", true);
+  finite(b.height, "bounds.height", true);
+  const gap = finite(options.nodeGap ?? 12, "nodeGap", true), columnGap = finite(options.columnGap ?? 120, "columnGap", true);
+  const leftSize = options.leftSize, leftResolver = typeof leftSize === "function" ? leftSize : leftSize === void 0 ? void 0 : () => leftSize;
+  const rightSize = options.rightSize, rightResolver = typeof rightSize === "function" ? rightSize : rightSize === void 0 ? void 0 : () => rightSize;
+  const left = placed(
+    graph.left,
+    options.leftKey,
+    options.leftLabel,
+    b.x,
+    b,
+    leftResolver,
+    gap
+  );
+  const rightWidth = typeof rightSize === "function" ? 150 : rightSize?.width ?? 150;
+  const right = placed(
+    graph.right,
+    options.rightKey,
+    options.rightLabel,
+    Math.max(b.x, b.x + b.width - rightWidth),
+    b,
+    rightResolver,
+    gap
+  );
+  const leftByKey = new Map(left.map((node) => [node.key, node])), rightByKey = new Map(right.map((node) => [node.key, node]));
+  const edgeKeys = /* @__PURE__ */ new Set();
+  const edges = graph.edges.map((edge) => {
+    const key = access(options.edgeKey, edge);
+    if (edgeKeys.has(key))
+      throw new Error(`layoutBipartite: duplicate edge key ${String(key)}.`);
+    edgeKeys.add(key);
+    const source = access(options.source, edge), target = access(options.target, edge), leftNode = leftByKey.get(source), rightNode = rightByKey.get(target);
+    if (!leftNode || !rightNode)
+      throw new RangeError(
+        "layoutBipartite: every edge must point from a known left key to a known right key."
+      );
+    const r = route(
+      {
+        x: leftNode.bounds.x + leftNode.bounds.width,
+        y: leftNode.bounds.y + leftNode.bounds.height / 2
+      },
+      {
+        x: rightNode.bounds.x,
+        y: rightNode.bounds.y + rightNode.bounds.height / 2
+      }
+    );
+    return Object.freeze({
+      key,
+      datum: edge,
+      sourceKey: source,
+      targetKey: target,
+      left: leftNode,
+      right: rightNode,
+      route: r,
+      path: path(r),
+      arrowPath: null
+    });
+  });
+  if (left.length && right.length && right[0].bounds.x - (left[0].bounds.x + left[0].bounds.width) < columnGap)
+    throw new RangeError(
+      "layoutBipartite: bounds are too narrow for node sizes and columnGap."
+    );
+  return Object.freeze({
+    bounds: Object.freeze({ ...b }),
+    left,
+    right,
+    edges: Object.freeze(edges)
+  });
+}
+function BipartiteGraph(props) {
+  const frame = useGraphFrame(props.style), style = frame.style;
+  if (!frame.bounds.width || !frame.bounds.height)
+    return /* @__PURE__ */ jsx(Group, { style: frame.groupStyle, children: null });
+  const layout = layoutBipartite(resolveSignalValue(props.graph), {
+    ...props,
+    bounds: frame.bounds,
+    columnGap: style.columnGap,
+    nodeGap: style.nodeGap
+  });
+  return /* @__PURE__ */ jsxs(Group, { style: frame.groupStyle, children: [
+    layout.edges.map((edge) => /* @__PURE__ */ jsx(
+      Group,
+      {
+        onClick: (event) => props.onEdgeClick?.(edge, event),
+        children: props.renderEdge ? props.renderEdge(edge) : /* @__PURE__ */ jsx(
+          SvgPath,
+          {
+            style: {
+              ...defaultGraphEdgeStyle(edge),
+              ...resolveMarkStyle(edge, props.edgeStyle),
+              d: edge.path
+            }
+          }
+        )
+      },
+      String(edge.key)
+    )),
+    layout.left.map((node) => /* @__PURE__ */ jsx(
+      Group,
+      {
+        onClick: (event) => props.onLeftNodeClick?.(node, event),
+        children: props.renderLeftNode ? props.renderLeftNode(node) : /* @__PURE__ */ jsxs(Group, { children: [
+          /* @__PURE__ */ jsx(
+            GraphNode,
+            {
+              node,
+              style: {
+                ...defaultGraphNodeStyle(node),
+                ...resolveMarkStyle(node, props.leftNodeStyle)
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            GraphLabel,
+            {
+              label: node.label,
+              style: {
+                ...defaultGraphLabelStyle(node.label),
+                ...resolveSignalValue(props.labelStyle)
+              }
+            }
+          )
+        ] })
+      },
+      `left-${String(node.key)}`
+    )),
+    layout.right.map((node) => /* @__PURE__ */ jsx(
+      Group,
+      {
+        onClick: (event) => props.onRightNodeClick?.(node, event),
+        children: props.renderRightNode ? props.renderRightNode(node) : /* @__PURE__ */ jsxs(Group, { children: [
+          /* @__PURE__ */ jsx(
+            GraphNode,
+            {
+              node,
+              style: {
+                ...defaultGraphNodeStyle(node),
+                ...resolveMarkStyle(node, props.rightNodeStyle)
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            GraphLabel,
+            {
+              label: node.label,
+              style: {
+                ...defaultGraphLabelStyle(node.label),
+                ...resolveSignalValue(props.labelStyle)
+              }
+            }
+          )
+        ] })
+      },
+      `right-${String(node.key)}`
+    ))
+  ] });
+}
+export {
+  BipartiteGraph,
+  layoutBipartite
+};
+//# sourceMappingURL=bipartite.js.map

package/dist/features/viz/lib/graph/bipartite.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/features/viz/lib/graph/bipartite.tsx"],
+  "sourcesContent": ["import { Group, SvgPath, resolveSignalValue } from \"@pibbl/core\";\nimport type { PathSegment, PibblNode } from \"@pibbl/core\";\nimport type {\n  Accessor,\n  BipartiteData,\n  BipartiteGraphProps,\n  BipartiteLayout,\n  BipartiteOptions,\n  GraphNodeGeometry,\n  Size,\n  VizKey,\n} from \"./types.js\";\nimport {\n  defaultGraphEdgeStyle,\n  defaultGraphLabelStyle,\n  defaultGraphNodeStyle,\n  GraphLabel,\n  GraphNode,\n  resolveMarkStyle,\n  useGraphFrame,\n} from \"./shared.js\";\n\nfunction access<D, V>(input: Accessor<D, V>, datum: D): V {\n  return typeof input === \"function\"\n    ? input(datum)\n    : (datum as Record<PropertyKey, V>)[input];\n}\nfunction finite(value: number, name: string, zero = false) {\n  if (!Number.isFinite(value) || (zero && value < 0))\n    throw new RangeError(\n      `layoutBipartite: ${name} must be finite${zero ? \" and nonnegative\" : \"\"}.`,\n    );\n  return value;\n}\nfunction label(\n  text: string,\n  bounds: { x: number; y: number; width: number; height: number },\n) {\n  return Object.freeze({\n    text,\n    bounds: Object.freeze(bounds),\n    rotationDegrees: 0,\n  });\n}\nfunction route(a: { x: number; y: number }, b: { x: number; y: number }) {\n  const middle = (a.x + b.x) / 2;\n  const segments = Object.freeze([\n    { type: \"move\" as const, x: a.x, y: a.y },\n    {\n      type: \"cubic\" as const,\n      cp1x: middle,\n      cp1y: a.y,\n      cp2x: middle,\n      cp2y: b.y,\n      x: b.x,\n      y: b.y,\n    },\n  ]);\n  return Object.freeze({\n    sourceAnchor: Object.freeze(a),\n    targetAnchor: Object.freeze(b),\n    segments,\n    arrowSegments: null,\n  });\n}\nfunction path(route: { segments: readonly PathSegment[] }) {\n  return route.segments\n    .map((segment) =>\n      segment.type === \"move\"\n        ? `M ${segment.x} ${segment.y}`\n        : segment.type === \"cubic\"\n          ? `C ${segment.cp1x} ${segment.cp1y} ${segment.cp2x} ${segment.cp2y} ${segment.x} ${segment.y}`\n          : \"\",\n    )\n    .join(\" \");\n}\nfunction placed<D>(\n  data: readonly D[],\n  keyBy: Accessor<D, VizKey>,\n  labelBy: Accessor<D, string> | undefined,\n  atX: number,\n  bounds: { y: number; height: number },\n  size: ((datum: D) => Size) | undefined,\n  gap: number,\n): readonly GraphNodeGeometry<D>[] {\n  const total =\n    data.reduce((sum, datum) => sum + (size?.(datum).height ?? 34), 0) +\n    Math.max(0, data.length - 1) * gap;\n  let y = bounds.y + Math.max(0, (bounds.height - total) / 2);\n  const seen = new Set<VizKey>();\n  return Object.freeze(\n    data.map((datum) => {\n      const key = access(keyBy, datum);\n      if (seen.has(key))\n        throw new Error(\n          `layoutBipartite: duplicate node key ${String(key)} on one side.`,\n        );\n      seen.add(key);\n      const dimensions = size?.(datum) ?? { width: 150, height: 34 };\n      const box = {\n        x: atX,\n        y,\n        width: dimensions.width,\n        height: dimensions.height,\n      };\n      y += dimensions.height + gap;\n      return Object.freeze({\n        key,\n        datum,\n        bounds: Object.freeze(box),\n        label: label(labelBy ? access(labelBy, datum) : String(key), box),\n        detail: null,\n      });\n    }),\n  );\n}\n\n/** Arranges two explicit entity sets in columns, retaining side-qualified identity.\n * @param graph - Explicit left and right entities with cross-set edges. See {@link BipartiteData}.\n * @param options - Accessors, dimensions, and column spacing. See {@link BipartiteOptions}.\n * @returns Immutable side-aware nodes and routed edges. See {@link BipartiteLayout}.\n */\nexport function layoutBipartite<L, R, E>(\n  graph: BipartiteData<L, R, E>,\n  options: BipartiteOptions<L, R, E>,\n): BipartiteLayout<L, R, E> {\n  const b = options.bounds;\n  finite(b.x, \"bounds.x\");\n  finite(b.y, \"bounds.y\");\n  finite(b.width, \"bounds.width\", true);\n  finite(b.height, \"bounds.height\", true);\n  const gap = finite(options.nodeGap ?? 12, \"nodeGap\", true),\n    columnGap = finite(options.columnGap ?? 120, \"columnGap\", true);\n  const leftSize = options.leftSize,\n    leftResolver: ((datum: L) => Size) | undefined =\n      typeof leftSize === \"function\"\n        ? leftSize\n        : leftSize === undefined\n          ? undefined\n          : () => leftSize;\n  const rightSize = options.rightSize,\n    rightResolver: ((datum: R) => Size) | undefined =\n      typeof rightSize === \"function\"\n        ? rightSize\n        : rightSize === undefined\n          ? undefined\n          : () => rightSize;\n  const left = placed(\n    graph.left,\n    options.leftKey,\n    options.leftLabel,\n    b.x,\n    b,\n    leftResolver,\n    gap,\n  );\n  const rightWidth =\n    typeof rightSize === \"function\" ? 150 : (rightSize?.width ?? 150);\n  const right = placed(\n    graph.right,\n    options.rightKey,\n    options.rightLabel,\n    Math.max(b.x, b.x + b.width - rightWidth),\n    b,\n    rightResolver,\n    gap,\n  );\n  const leftByKey = new Map(left.map((node) => [node.key, node])),\n    rightByKey = new Map(right.map((node) => [node.key, node]));\n  const edgeKeys = new Set<VizKey>();\n  const edges = graph.edges.map((edge) => {\n    const key = access(options.edgeKey, edge);\n    if (edgeKeys.has(key))\n      throw new Error(`layoutBipartite: duplicate edge key ${String(key)}.`);\n    edgeKeys.add(key);\n    const source = access(options.source, edge),\n      target = access(options.target, edge),\n      leftNode = leftByKey.get(source),\n      rightNode = rightByKey.get(target);\n    if (!leftNode || !rightNode)\n      throw new RangeError(\n        \"layoutBipartite: every edge must point from a known left key to a known right key.\",\n      );\n    const r = route(\n      {\n        x: leftNode.bounds.x + leftNode.bounds.width,\n        y: leftNode.bounds.y + leftNode.bounds.height / 2,\n      },\n      {\n        x: rightNode.bounds.x,\n        y: rightNode.bounds.y + rightNode.bounds.height / 2,\n      },\n    );\n    return Object.freeze({\n      key,\n      datum: edge,\n      sourceKey: source,\n      targetKey: target,\n      left: leftNode,\n      right: rightNode,\n      route: r,\n      path: path(r),\n      arrowPath: null,\n    });\n  });\n  if (\n    left.length &&\n    right.length &&\n    right[0].bounds.x - (left[0].bounds.x + left[0].bounds.width) < columnGap\n  )\n    throw new RangeError(\n      \"layoutBipartite: bounds are too narrow for node sizes and columnGap.\",\n    );\n  return Object.freeze({\n    bounds: Object.freeze({ ...b }),\n    left,\n    right,\n    edges: Object.freeze(edges),\n  });\n}\n\n/** Render left/right entity sets and their cross-set relationships.\n * @param props - Entity data and presentation.\n * @returns Canvas node.\n * @see {@link layoutBipartite}\n */\nexport function BipartiteGraph<L, R, E>(\n  props: BipartiteGraphProps<L, R, E>,\n): PibblNode {\n  const frame = useGraphFrame(props.style),\n    style = frame.style;\n  if (!frame.bounds.width || !frame.bounds.height)\n    return <Group style={frame.groupStyle}>{null}</Group>;\n  const layout = layoutBipartite(resolveSignalValue(props.graph), {\n    ...props,\n    bounds: frame.bounds,\n    columnGap: style.columnGap,\n    nodeGap: style.nodeGap,\n  });\n  return (\n    <Group style={frame.groupStyle}>\n      {layout.edges.map((edge) => (\n        <Group\n          key={String(edge.key)}\n          onClick={(event) => props.onEdgeClick?.(edge, event)}\n        >\n          {props.renderEdge ? (\n            props.renderEdge(edge)\n          ) : (\n            <SvgPath\n              style={{\n                ...defaultGraphEdgeStyle(edge),\n                ...resolveMarkStyle(edge, props.edgeStyle),\n                d: edge.path,\n              }}\n            />\n          )}\n        </Group>\n      ))}\n      {layout.left.map((node) => (\n        <Group\n          key={`left-${String(node.key)}`}\n          onClick={(event) => props.onLeftNodeClick?.(node, event)}\n        >\n          {props.renderLeftNode ? (\n            props.renderLeftNode(node)\n          ) : (\n            <Group>\n              <GraphNode\n                node={node}\n                style={{\n                  ...defaultGraphNodeStyle(node),\n                  ...resolveMarkStyle(node, props.leftNodeStyle),\n                }}\n              />\n              <GraphLabel\n                label={node.label}\n                style={{\n                  ...defaultGraphLabelStyle(node.label),\n                  ...resolveSignalValue(props.labelStyle),\n                }}\n              />\n            </Group>\n          )}\n        </Group>\n      ))}\n      {layout.right.map((node) => (\n        <Group\n          key={`right-${String(node.key)}`}\n          onClick={(event) => props.onRightNodeClick?.(node, event)}\n        >\n          {props.renderRightNode ? (\n            props.renderRightNode(node)\n          ) : (\n            <Group>\n              <GraphNode\n                node={node}\n                style={{\n                  ...defaultGraphNodeStyle(node),\n                  ...resolveMarkStyle(node, props.rightNodeStyle),\n                }}\n              />\n              <GraphLabel\n                label={node.label}\n                style={{\n                  ...defaultGraphLabelStyle(node.label),\n                  ...resolveSignalValue(props.labelStyle),\n                }}\n              />\n            </Group>\n          )}\n        </Group>\n      ))}\n    </Group>\n  );\n}\n"],
+  "mappings": "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",
+  "names": ["route"]
+}

package/dist/features/viz/lib/graph/chord.d.ts

@@ -0,0 +1,44 @@
+import type { PibblNode } from "@pibbl/core";
+import type { ChordBandGeometry, ChordData, ChordDiagramProps, ChordLayout, ChordOptions, ChordRibbonGeometry, EdgeStyle, MarkInteraction, Style } from "./types.js";
+/** Computes a directed chord layout, aggregating repeated ordered transfer pairs.
+ * @param data - Ordered category transfers. See {@link ChordData}.
+ * @param options - Accessors, bounds, angular spacing, and unit. See {@link ChordOptions}.
+ * @returns Immutable bands and directed ribbon geometry. See {@link ChordLayout}.
+ */
+export declare function layoutChords<C, T>(data: ChordData<C, T>, options: ChordOptions<C, T>): ChordLayout<C, T>;
+/** Default outer-band paint for custom chord compositions.
+ * @param _band - Band geometry.
+ * @returns Resolved band paint.
+ * @see {@link ChordBand}
+ */
+export declare function defaultChordBandStyle<C>(_band: ChordBandGeometry<C>): EdgeStyle;
+/** Default directed-ribbon paint for custom chord compositions.
+ * @param _ribbon - Ribbon geometry.
+ * @returns Resolved ribbon paint.
+ * @see {@link ChordRibbon}
+ */
+export declare function defaultChordRibbonStyle<T>(_ribbon: ChordRibbonGeometry<T>): EdgeStyle;
+/** Draw one supplied category band.
+ * @param argument - Band props.
+ * @returns Canvas node.
+ * @see {@link ChordBandGeometry}
+ */
+export declare function ChordBand<C>({ band, style: input, ...events }: MarkInteraction & {
+    readonly band: ChordBandGeometry<C>;
+    readonly style?: Style<EdgeStyle>;
+}): PibblNode;
+/** Draw one supplied directed ribbon.
+ * @param argument - Ribbon props.
+ * @returns Canvas node.
+ * @see {@link ChordRibbonGeometry}
+ */
+export declare function ChordRibbon<T>({ ribbon, style: input, ...events }: MarkInteraction & {
+    readonly ribbon: ChordRibbonGeometry<T>;
+    readonly style?: Style<EdgeStyle>;
+}): PibblNode;
+/** Render a directed transfer chord diagram.
+ * @param props - Transfer data and presentation.
+ * @returns Canvas node.
+ * @see {@link layoutChords}
+ */
+export declare function ChordDiagram<C, T>(props: ChordDiagramProps<C, T>): PibblNode;

package/dist/features/viz/lib/graph/chord.js

@@ -0,0 +1,348 @@
+import { jsx, jsxs } from "@pibbl/core/jsx-runtime";
+import {
+  Group,
+  SvgPath,
+  resolveSignalValue,
+  PathGeometry,
+  toSvgPathData
+} from "@pibbl/core";
+import {
+  defaultGraphLabelStyle,
+  GraphLabel,
+  resolveMarkStyle,
+  useGraphFrame
+} from "./shared.js";
+function access(input, datum) {
+  return typeof input === "function" ? input(datum) : datum[input];
+}
+function finite(value, name, zero = false) {
+  if (!Number.isFinite(value) || zero && value < 0)
+    throw new RangeError(
+      `layoutChords: ${name} must be finite${zero ? " and nonnegative" : ""}.`
+    );
+  return value;
+}
+function point(cx, cy, radius, degrees) {
+  const radians = (degrees - 90) * Math.PI / 180;
+  return {
+    x: cx + Math.cos(radians) * radius,
+    y: cy + Math.sin(radians) * radius
+  };
+}
+function svg(segments) {
+  const geometry = new PathGeometry();
+  geometry.spliceSegments(0, 0, segments);
+  return toSvgPathData(geometry);
+}
+function bandSegments(cx, cy, outer, inner, start, end) {
+  const first = point(cx, cy, outer, start), last = point(cx, cy, inner, end), radians = Math.PI / 180;
+  return Object.freeze([
+    { type: "move", ...first },
+    {
+      type: "arc",
+      cx,
+      cy,
+      ux: outer,
+      uy: 0,
+      vx: 0,
+      vy: outer,
+      startAngle: (start - 90) * radians,
+      sweep: (end - start) * radians
+    },
+    { type: "line", ...last },
+    {
+      type: "arc",
+      cx,
+      cy,
+      ux: inner,
+      uy: 0,
+      vx: 0,
+      vy: inner,
+      startAngle: (end - 90) * radians,
+      sweep: (start - end) * radians
+    },
+    { type: "close" }
+  ]);
+}
+function layoutChords(data, options) {
+  const b = options.bounds;
+  finite(b.x, "bounds.x");
+  finite(b.y, "bounds.y");
+  finite(b.width, "bounds.width", true);
+  finite(b.height, "bounds.height", true);
+  const width = finite(options.bandWidth ?? 20, "bandWidth", true), pad = finite(options.padAngle ?? 2, "padAngle", true), start = finite(options.startAngle ?? 0, "startAngle");
+  if (data.categories.length * pad >= 360 && data.categories.length)
+    throw new RangeError(
+      "layoutChords: total padAngle must be less than 360 degrees."
+    );
+  const categories = /* @__PURE__ */ new Map();
+  for (const category of data.categories) {
+    const key = access(options.categoryKey, category);
+    if (categories.has(key))
+      throw new Error(`layoutChords: duplicate category key ${String(key)}.`);
+    categories.set(key, category);
+  }
+  const groups = /* @__PURE__ */ new Map();
+  const incoming = /* @__PURE__ */ new Map(), outgoing = /* @__PURE__ */ new Map();
+  for (const key of categories.keys()) {
+    incoming.set(key, 0);
+    outgoing.set(key, 0);
+  }
+  for (const transfer of data.transfers) {
+    const source = access(options.source, transfer), target = access(options.target, transfer), amount = finite(access(options.value, transfer), "transfer value", true);
+    if (!categories.has(source) || !categories.has(target))
+      throw new RangeError(
+        "layoutChords: transfer endpoint is not a category key."
+      );
+    incoming.set(
+      target,
+      finite(incoming.get(target) + amount, "incoming total", true)
+    );
+    outgoing.set(
+      source,
+      finite(outgoing.get(source) + amount, "outgoing total", true)
+    );
+    const id = `chord:${typeof source}:${String(source)}\0${typeof target}:${String(target)}`;
+    const prior = groups.get(id);
+    if (prior) {
+      prior.records.push(transfer);
+      prior.value = finite(prior.value + amount, "transfer total", true);
+    } else
+      groups.set(id, { source, target, records: [transfer], value: amount });
+  }
+  const total = Array.from(groups.values()).reduce(
+    (sum2, entry) => sum2 + entry.value,
+    0
+  );
+  const cx = b.x + b.width / 2, cy = b.y + b.height / 2, radius = Math.max(0, Math.min(b.width, b.height) / 2 - 28), inner = Math.max(0, radius - width);
+  const weight = Array.from(categories.keys()).map(
+    (key) => incoming.get(key) + outgoing.get(key)
+  );
+  const sum = weight.reduce((a, n) => a + n, 0);
+  finite(total, "transfer total", true);
+  finite(sum, "incident total", true);
+  const usable = 360 - data.categories.length * pad;
+  let angle = start;
+  const bands = [];
+  const arcs = /* @__PURE__ */ new Map();
+  for (let index = 0; index < data.categories.length; index++) {
+    const datum = data.categories[index], key = access(options.categoryKey, datum), span = sum === 0 ? 0 : weight[index] / sum * usable, arc = Object.freeze({
+      center: Object.freeze({ x: cx, y: cy }),
+      radius,
+      startAngleDegrees: angle,
+      endAngleDegrees: angle + span
+    });
+    const segments = bandSegments(cx, cy, radius, inner, angle, angle + span);
+    const mid = angle + span / 2, labelPoint = point(cx, cy, radius + 18, mid);
+    const label = Object.freeze({
+      text: options.label ? access(options.label, datum) : String(key),
+      bounds: Object.freeze({
+        x: labelPoint.x - 45,
+        y: labelPoint.y - 10,
+        width: 90,
+        height: 20
+      }),
+      rotationDegrees: 0
+    });
+    bands.push(
+      Object.freeze({
+        key,
+        datum,
+        incomingValue: incoming.get(key),
+        outgoingValue: outgoing.get(key),
+        arc,
+        innerRadius: inner,
+        segments,
+        path: svg(segments),
+        label
+      })
+    );
+    arcs.set(key, { start: angle, end: angle + span, cursor: angle });
+    angle += span + pad;
+  }
+  const ribbons = [];
+  for (const entry of groups.values()) {
+    if (entry.value === 0) continue;
+    const source = arcs.get(entry.source), target = arcs.get(entry.target);
+    const sourceWeight = incoming.get(entry.source) + outgoing.get(entry.source), targetWeight = incoming.get(entry.target) + outgoing.get(entry.target);
+    const sourceSpan = sourceWeight === 0 ? 0 : (source.end - source.start) * entry.value / sourceWeight, targetSpan = targetWeight === 0 ? 0 : (target.end - target.start) * entry.value / targetWeight;
+    const sourceArc = Object.freeze({
+      center: Object.freeze({ x: cx, y: cy }),
+      radius: inner,
+      startAngleDegrees: source.cursor,
+      endAngleDegrees: source.cursor + sourceSpan
+    });
+    source.cursor += sourceSpan;
+    const targetStart = target.cursor;
+    const targetArc = Object.freeze({
+      center: Object.freeze({ x: cx, y: cy }),
+      radius: inner,
+      startAngleDegrees: targetStart,
+      endAngleDegrees: targetStart + targetSpan
+    });
+    target.cursor += targetSpan;
+    const a = point(cx, cy, inner, sourceArc.startAngleDegrees), d = point(cx, cy, inner, targetArc.startAngleDegrees);
+    const segments = Object.freeze([
+      { type: "move", ...a },
+      {
+        type: "arc",
+        cx,
+        cy,
+        ux: inner,
+        uy: 0,
+        vx: 0,
+        vy: inner,
+        startAngle: (sourceArc.startAngleDegrees - 90) * Math.PI / 180,
+        sweep: (sourceArc.endAngleDegrees - sourceArc.startAngleDegrees) * Math.PI / 180
+      },
+      {
+        type: "quadratic",
+        cpx: cx,
+        cpy: cy,
+        x: d.x,
+        y: d.y
+      },
+      {
+        type: "arc",
+        cx,
+        cy,
+        ux: inner,
+        uy: 0,
+        vx: 0,
+        vy: inner,
+        startAngle: (targetArc.startAngleDegrees - 90) * Math.PI / 180,
+        sweep: (targetArc.endAngleDegrees - targetArc.startAngleDegrees) * Math.PI / 180
+      },
+      {
+        type: "quadratic",
+        cpx: cx,
+        cpy: cy,
+        x: a.x,
+        y: a.y
+      },
+      { type: "close" }
+    ]);
+    ribbons.push(
+      Object.freeze({
+        key: `${typeof entry.source}:${String(entry.source)}\0${typeof entry.target}:${String(entry.target)}`,
+        sourceKey: entry.source,
+        targetKey: entry.target,
+        records: Object.freeze(entry.records),
+        value: entry.value,
+        sourceArc,
+        targetArc,
+        segments,
+        path: svg(segments)
+      })
+    );
+  }
+  return Object.freeze({
+    bounds: Object.freeze({ ...b }),
+    unit: options.unit,
+    total,
+    bands: Object.freeze(bands),
+    ribbons: Object.freeze(ribbons)
+  });
+}
+function defaultChordBandStyle(_band) {
+  return { fill: "#0f766e" };
+}
+function defaultChordRibbonStyle(_ribbon) {
+  return { fill: "rgba(15, 118, 110, 0.3)" };
+}
+function ChordBand({
+  band,
+  style: input,
+  ...events
+}) {
+  return /* @__PURE__ */ jsx(
+    SvgPath,
+    {
+      ...events,
+      style: { ...resolveSignalValue(input) ?? {}, d: band.path }
+    }
+  );
+}
+function ChordRibbon({
+  ribbon,
+  style: input,
+  ...events
+}) {
+  return /* @__PURE__ */ jsx(
+    SvgPath,
+    {
+      ...events,
+      style: { ...resolveSignalValue(input) ?? {}, d: ribbon.path }
+    }
+  );
+}
+function ChordDiagram(props) {
+  const frame = useGraphFrame(props.style), style = frame.style;
+  if (!frame.bounds.width || !frame.bounds.height)
+    return /* @__PURE__ */ jsx(Group, { style: frame.groupStyle, children: null });
+  const layout = layoutChords(resolveSignalValue(props.data), {
+    ...props,
+    bounds: frame.bounds,
+    bandWidth: style.bandWidth,
+    padAngle: style.padAngle,
+    startAngle: style.startAngle
+  });
+  return /* @__PURE__ */ jsxs(Group, { style: frame.groupStyle, children: [
+    layout.ribbons.map((ribbon) => /* @__PURE__ */ jsx(
+      Group,
+      {
+        onClick: (event) => props.onRibbonClick?.(ribbon, event),
+        children: props.renderRibbon ? props.renderRibbon(ribbon) : /* @__PURE__ */ jsx(
+          ChordRibbon,
+          {
+            ribbon,
+            keyboardFocusable: Boolean(props.onRibbonClick),
+            style: {
+              ...defaultChordRibbonStyle(ribbon),
+              ...resolveMarkStyle(ribbon, props.ribbonStyle)
+            }
+          }
+        )
+      },
+      ribbon.key
+    )),
+    layout.bands.map((band) => /* @__PURE__ */ jsx(
+      Group,
+      {
+        onClick: (event) => props.onBandClick?.(band, event),
+        children: props.renderBand ? props.renderBand(band) : /* @__PURE__ */ jsxs(Group, { children: [
+          /* @__PURE__ */ jsx(
+            ChordBand,
+            {
+              band,
+              style: {
+                ...defaultChordBandStyle(band),
+                ...resolveMarkStyle(band, props.bandStyle)
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            GraphLabel,
+            {
+              label: band.label,
+              style: {
+                ...defaultGraphLabelStyle(band.label),
+                ...resolveSignalValue(props.labelStyle)
+              }
+            }
+          )
+        ] })
+      },
+      String(band.key)
+    ))
+  ] });
+}
+export {
+  ChordBand,
+  ChordDiagram,
+  ChordRibbon,
+  defaultChordBandStyle,
+  defaultChordRibbonStyle,
+  layoutChords
+};
+//# sourceMappingURL=chord.js.map