@pibbl/core 0.0.3-alpha.85.1 → 0.0.3-alpha.90.1

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

@@ -0,0 +1,341 @@
+import { jsx, jsxs } from "@pibbl/core/jsx-runtime";
+import { Group, SvgPath, resolveSignalValue } from "@pibbl/core";
+import {
+  defaultGraphLabelStyle,
+  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(
+      `layoutSankey: ${name} must be finite${zero ? " and nonnegative" : ""}.`
+    );
+  return value;
+}
+function path(segments) {
+  return segments.map(
+    (segment) => segment.type === "move" ? `M ${segment.x} ${segment.y}` : segment.type === "line" ? `L ${segment.x} ${segment.y}` : segment.type === "cubic" ? `C ${segment.cp1x} ${segment.cp1y} ${segment.cp2x} ${segment.cp2y} ${segment.x} ${segment.y}` : segment.type === "close" ? "Z" : ""
+  ).join(" ");
+}
+function layoutSankey(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 nodeWidth = finite(options.nodeWidth ?? 18, "nodeWidth", true), nodeGap = finite(options.nodeGap ?? 12, "nodeGap", true);
+  const nodes = /* @__PURE__ */ new Map();
+  for (const node of graph.nodes) {
+    const key = access(options.nodeKey, node);
+    if (nodes.has(key))
+      throw new Error(`layoutSankey: duplicate node key ${String(key)}.`);
+    nodes.set(key, node);
+  }
+  const edges = graph.edges.map((edge) => {
+    const key = access(options.edgeKey, edge), sourceKey = access(options.source, edge), targetKey = access(options.target, edge), value = finite(access(options.value, edge), "edge value", true);
+    if (!nodes.has(sourceKey) || !nodes.has(targetKey))
+      throw new RangeError("layoutSankey: edge endpoint is not a node key.");
+    return { key, edge, sourceKey, targetKey, value };
+  });
+  const incoming = /* @__PURE__ */ new Map(), outgoing = /* @__PURE__ */ new Map(), targets = /* @__PURE__ */ new Map();
+  for (const key of nodes.keys()) {
+    incoming.set(key, 0);
+    outgoing.set(key, 0);
+    targets.set(key, []);
+  }
+  for (const edge of edges) {
+    incoming.set(
+      edge.targetKey,
+      finite(
+        incoming.get(edge.targetKey) + edge.value,
+        "incoming total",
+        true
+      )
+    );
+    outgoing.set(
+      edge.sourceKey,
+      finite(
+        outgoing.get(edge.sourceKey) + edge.value,
+        "outgoing total",
+        true
+      )
+    );
+    targets.get(edge.sourceKey).push(edge.targetKey);
+  }
+  const ranks = /* @__PURE__ */ new Map();
+  const visit = (key, visiting = /* @__PURE__ */ new Set()) => {
+    if (ranks.has(key)) return ranks.get(key);
+    if (visiting.has(key))
+      throw new RangeError("layoutSankey: flows must be acyclic.");
+    visiting.add(key);
+    let rank = 0;
+    for (const target of targets.get(key))
+      rank = Math.max(rank, visit(target, visiting) + 1);
+    visiting.delete(key);
+    ranks.set(key, rank);
+    return rank;
+  };
+  for (const key of nodes.keys()) visit(key);
+  const maxRank = Math.max(...ranks.values(), 0);
+  for (const [key, rank] of ranks) ranks.set(key, maxRank - rank);
+  const columns = Array.from({ length: maxRank + 1 }, () => []);
+  for (const key of nodes.keys()) columns[ranks.get(key)].push(key);
+  const candidateScale = Math.min(
+    ...columns.map((column) => {
+      const sum = column.reduce(
+        (total, key) => total + Math.max(incoming.get(key), outgoing.get(key)),
+        0
+      );
+      finite(sum, "column total", true);
+      return sum > 0 ? Math.max(
+        0,
+        (b.height - Math.max(0, column.length - 1) * nodeGap) / sum
+      ) : Infinity;
+    }).filter(Number.isFinite)
+  );
+  const scale = Number.isFinite(candidateScale) ? candidateScale : 0;
+  const geometry = /* @__PURE__ */ new Map();
+  columns.forEach((column, rank) => {
+    let y = b.y;
+    for (const key of column) {
+      const datum = nodes.get(key);
+      const size = Math.max(incoming.get(key), outgoing.get(key)) * scale;
+      const bounds = Object.freeze({
+        x: b.x + rank * (maxRank === 0 ? 0 : (b.width - nodeWidth) / maxRank),
+        y,
+        width: nodeWidth,
+        height: size
+      });
+      const name = options.label ? access(options.label, datum) : String(key);
+      const quantity = Math.max(incoming.get(key), outgoing.get(key));
+      const labelBounds = Object.freeze({
+        x: bounds.x + bounds.width + 8,
+        y: bounds.y + Math.max(0, bounds.height / 2 - 14),
+        width: 132,
+        height: 16
+      });
+      const detailBounds = Object.freeze({
+        x: labelBounds.x,
+        y: labelBounds.y + 16,
+        width: labelBounds.width,
+        height: 16
+      });
+      const detailText = options.detail ? access(options.detail, datum) : options.formatValue ? options.formatValue(quantity) : `${quantity} ${options.unit}`;
+      geometry.set(
+        key,
+        Object.freeze({
+          key,
+          datum,
+          bounds,
+          incomingValue: incoming.get(key),
+          outgoingValue: outgoing.get(key),
+          netValue: outgoing.get(key) - incoming.get(key),
+          label: Object.freeze({
+            text: name,
+            bounds: labelBounds,
+            rotationDegrees: 0
+          }),
+          detail: Object.freeze({
+            text: detailText,
+            bounds: detailBounds,
+            rotationDegrees: 0
+          })
+        })
+      );
+      y += size + nodeGap;
+    }
+  });
+  const sourceOffsets = /* @__PURE__ */ new Map(), targetOffsets = /* @__PURE__ */ new Map();
+  for (const key of nodes.keys()) {
+    sourceOffsets.set(key, 0);
+    targetOffsets.set(key, 0);
+  }
+  const flows = edges.map(
+    ({ key, edge, sourceKey, targetKey, value }) => {
+      const source = geometry.get(sourceKey), target = geometry.get(targetKey), thickness = value * scale;
+      const sourceTop = source.bounds.y + sourceOffsets.get(sourceKey);
+      const targetTop = target.bounds.y + targetOffsets.get(targetKey);
+      sourceOffsets.set(sourceKey, sourceOffsets.get(sourceKey) + thickness);
+      targetOffsets.set(targetKey, targetOffsets.get(targetKey) + thickness);
+      const sourceSpan = Object.freeze({
+        top: Object.freeze({
+          x: source.bounds.x + source.bounds.width,
+          y: sourceTop
+        }),
+        bottom: Object.freeze({
+          x: source.bounds.x + source.bounds.width,
+          y: sourceTop + thickness
+        })
+      });
+      const targetSpan = Object.freeze({
+        top: Object.freeze({ x: target.bounds.x, y: targetTop }),
+        bottom: Object.freeze({ x: target.bounds.x, y: targetTop + thickness })
+      });
+      const middle = (sourceSpan.top.x + targetSpan.top.x) / 2;
+      const segments = Object.freeze([
+        { type: "move", x: sourceSpan.top.x, y: sourceSpan.top.y },
+        {
+          type: "cubic",
+          cp1x: middle,
+          cp1y: sourceSpan.top.y,
+          cp2x: middle,
+          cp2y: targetSpan.top.y,
+          x: targetSpan.top.x,
+          y: targetSpan.top.y
+        },
+        {
+          type: "line",
+          x: targetSpan.bottom.x,
+          y: targetSpan.bottom.y
+        },
+        {
+          type: "cubic",
+          cp1x: middle,
+          cp1y: targetSpan.bottom.y,
+          cp2x: middle,
+          cp2y: sourceSpan.bottom.y,
+          x: sourceSpan.bottom.x,
+          y: sourceSpan.bottom.y
+        },
+        { type: "close" }
+      ]);
+      return Object.freeze({
+        key,
+        datum: edge,
+        sourceKey,
+        targetKey,
+        value,
+        unit: options.unit,
+        thickness,
+        sourceSpan,
+        targetSpan,
+        route: Object.freeze({
+          sourceAnchor: sourceSpan.top,
+          targetAnchor: targetSpan.top,
+          segments,
+          arrowSegments: null
+        }),
+        segments,
+        path: path(segments),
+        arrowPath: null
+      });
+    }
+  );
+  return Object.freeze({
+    bounds: Object.freeze({ ...b }),
+    unit: options.unit,
+    nodes: Object.freeze(Array.from(geometry.values())),
+    flows: Object.freeze(flows)
+  });
+}
+function defaultSankeyNodeStyle(_node) {
+  return { fill: "#0f766e", cornerRadius: 3 };
+}
+function defaultSankeyFlowStyle(_flow) {
+  return { fill: "rgba(15, 118, 110, 0.34)" };
+}
+function SankeyNode({
+  node,
+  style: input,
+  children,
+  ...events
+}) {
+  return /* @__PURE__ */ jsx(GraphNode, { node, style: input, ...events, children });
+}
+function SankeyFlow({
+  flow,
+  style: input,
+  ...events
+}) {
+  return /* @__PURE__ */ jsx(
+    SvgPath,
+    {
+      ...events,
+      style: { ...resolveSignalValue(input) ?? {}, d: flow.path }
+    }
+  );
+}
+function Sankey(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 = layoutSankey(resolveSignalValue(props.graph), {
+    ...props,
+    bounds: frame.bounds,
+    nodeWidth: style.nodeWidth,
+    nodeGap: style.nodeGap
+  });
+  return /* @__PURE__ */ jsxs(Group, { style: frame.groupStyle, children: [
+    layout.flows.map((flow) => /* @__PURE__ */ jsx(
+      Group,
+      {
+        onClick: (event) => props.onFlowClick?.(flow, event),
+        children: props.renderFlow ? props.renderFlow(flow) : /* @__PURE__ */ jsx(
+          SankeyFlow,
+          {
+            flow,
+            style: {
+              ...defaultSankeyFlowStyle(flow),
+              ...resolveMarkStyle(flow, props.flowStyle)
+            }
+          }
+        )
+      },
+      String(flow.key)
+    )),
+    layout.nodes.map((node) => /* @__PURE__ */ jsx(
+      Group,
+      {
+        onClick: (event) => props.onNodeClick?.(node, event),
+        children: props.renderNode ? props.renderNode(node) : /* @__PURE__ */ jsxs(Group, { children: [
+          /* @__PURE__ */ jsx(
+            SankeyNode,
+            {
+              node,
+              style: {
+                ...defaultSankeyNodeStyle(node),
+                ...resolveMarkStyle(node, props.nodeStyle)
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            GraphLabel,
+            {
+              label: node.label,
+              style: {
+                ...defaultGraphLabelStyle(node.label),
+                ...resolveSignalValue(props.labelStyle)
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            GraphLabel,
+            {
+              label: node.detail,
+              style: {
+                ...defaultGraphLabelStyle(node.detail),
+                font: "11px sans-serif",
+                ...resolveSignalValue(props.labelStyle)
+              }
+            }
+          )
+        ] })
+      },
+      String(node.key)
+    ))
+  ] });
+}
+export {
+  Sankey,
+  SankeyFlow,
+  SankeyNode,
+  defaultSankeyFlowStyle,
+  defaultSankeyNodeStyle,
+  layoutSankey
+};
+//# sourceMappingURL=sankey.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/features/viz/lib/graph/sankey.tsx"],
+  "sourcesContent": ["import type { NodeStyle } from \"./types.js\";\nimport { Group, SvgPath, resolveSignalValue } from \"@pibbl/core\";\nimport type { PibblNode, PathSegment } from \"@pibbl/core\";\nimport type {\n  Accessor,\n  GraphData,\n  GraphNodeProps,\n  MarkInteraction,\n  SankeyFlowGeometry,\n  SankeyLayout,\n  SankeyNodeGeometry,\n  SankeyOptions,\n  SankeyProps,\n  Style,\n  EdgeStyle,\n  VizKey,\n} from \"./types.js\";\nimport {\n  defaultGraphLabelStyle,\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      `layoutSankey: ${name} must be finite${zero ? \" and nonnegative\" : \"\"}.`,\n    );\n  return value;\n}\nfunction path(segments: readonly PathSegment[]) {\n  return segments\n    .map((segment) =>\n      segment.type === \"move\"\n        ? `M ${segment.x} ${segment.y}`\n        : segment.type === \"line\"\n          ? `L ${segment.x} ${segment.y}`\n          : segment.type === \"cubic\"\n            ? `C ${segment.cp1x} ${segment.cp1y} ${segment.cp2x} ${segment.cp2y} ${segment.x} ${segment.y}`\n            : segment.type === \"close\"\n              ? \"Z\"\n              : \"\",\n    )\n    .join(\" \");\n}\n\n/** Places an acyclic weighted flow graph in deterministic left-to-right ranks.\n * @param graph - Nodes and acyclic weighted edges. See {@link GraphData}.\n * @param options - Accessors, bounds, and display unit. See {@link SankeyOptions}.\n * @returns Immutable nodes and proportional flow geometry. See {@link SankeyLayout}.\n */\nexport function layoutSankey<N, E>(\n  graph: GraphData<N, E>,\n  options: SankeyOptions<N, E>,\n): SankeyLayout<N, 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 nodeWidth = finite(options.nodeWidth ?? 18, \"nodeWidth\", true),\n    nodeGap = finite(options.nodeGap ?? 12, \"nodeGap\", true);\n  const nodes = new Map<VizKey, N>();\n  for (const node of graph.nodes) {\n    const key = access(options.nodeKey, node);\n    if (nodes.has(key))\n      throw new Error(`layoutSankey: duplicate node key ${String(key)}.`);\n    nodes.set(key, node);\n  }\n  const edges = graph.edges.map((edge) => {\n    const key = access(options.edgeKey, edge),\n      sourceKey = access(options.source, edge),\n      targetKey = access(options.target, edge),\n      value = finite(access(options.value, edge), \"edge value\", true);\n    if (!nodes.has(sourceKey) || !nodes.has(targetKey))\n      throw new RangeError(\"layoutSankey: edge endpoint is not a node key.\");\n    return { key, edge, sourceKey, targetKey, value };\n  });\n  const incoming = new Map<VizKey, number>(),\n    outgoing = new Map<VizKey, number>(),\n    targets = new Map<VizKey, VizKey[]>();\n  for (const key of nodes.keys()) {\n    incoming.set(key, 0);\n    outgoing.set(key, 0);\n    targets.set(key, []);\n  }\n  for (const edge of edges) {\n    incoming.set(\n      edge.targetKey,\n      finite(\n        incoming.get(edge.targetKey)! + edge.value,\n        \"incoming total\",\n        true,\n      ),\n    );\n    outgoing.set(\n      edge.sourceKey,\n      finite(\n        outgoing.get(edge.sourceKey)! + edge.value,\n        \"outgoing total\",\n        true,\n      ),\n    );\n    targets.get(edge.sourceKey)!.push(edge.targetKey);\n  }\n  const ranks = new Map<VizKey, number>();\n  const visit = (key: VizKey, visiting = new Set<VizKey>()): number => {\n    if (ranks.has(key)) return ranks.get(key)!;\n    if (visiting.has(key))\n      throw new RangeError(\"layoutSankey: flows must be acyclic.\");\n    visiting.add(key);\n    let rank = 0;\n    for (const target of targets.get(key)!)\n      rank = Math.max(rank, visit(target, visiting) + 1);\n    visiting.delete(key);\n    ranks.set(key, rank);\n    return rank;\n  };\n  for (const key of nodes.keys()) visit(key);\n  const maxRank = Math.max(...ranks.values(), 0);\n  for (const [key, rank] of ranks) ranks.set(key, maxRank - rank);\n  const columns = Array.from({ length: maxRank + 1 }, () => [] as VizKey[]);\n  for (const key of nodes.keys()) columns[ranks.get(key)!].push(key);\n  const candidateScale = Math.min(\n    ...columns\n      .map((column) => {\n        const sum = column.reduce<number>(\n          (total, key) =>\n            total + Math.max(incoming.get(key)!, outgoing.get(key)!),\n          0,\n        );\n        finite(sum, \"column total\", true);\n        return sum > 0\n          ? Math.max(\n              0,\n              (b.height - Math.max(0, column.length - 1) * nodeGap) / sum,\n            )\n          : Infinity;\n      })\n      .filter(Number.isFinite),\n  );\n  const scale = Number.isFinite(candidateScale) ? candidateScale : 0;\n  const geometry = new Map<VizKey, SankeyNodeGeometry<N>>();\n  columns.forEach((column, rank) => {\n    let y = b.y;\n    for (const key of column) {\n      const datum = nodes.get(key)!;\n      const size = Math.max(incoming.get(key)!, outgoing.get(key)!) * scale;\n      const bounds = Object.freeze({\n        x: b.x + rank * (maxRank === 0 ? 0 : (b.width - nodeWidth) / maxRank),\n        y,\n        width: nodeWidth,\n        height: size,\n      });\n      const name = options.label ? access(options.label, datum) : String(key);\n      const quantity = Math.max(incoming.get(key)!, outgoing.get(key)!);\n      const labelBounds = Object.freeze({\n        x: bounds.x + bounds.width + 8,\n        y: bounds.y + Math.max(0, bounds.height / 2 - 14),\n        width: 132,\n        height: 16,\n      });\n      const detailBounds = Object.freeze({\n        x: labelBounds.x,\n        y: labelBounds.y + 16,\n        width: labelBounds.width,\n        height: 16,\n      });\n      const detailText = options.detail\n        ? access(options.detail, datum)\n        : options.formatValue\n          ? options.formatValue(quantity)\n          : `${quantity} ${options.unit}`;\n      geometry.set(\n        key,\n        Object.freeze({\n          key,\n          datum,\n          bounds,\n          incomingValue: incoming.get(key)!,\n          outgoingValue: outgoing.get(key)!,\n          netValue: outgoing.get(key)! - incoming.get(key)!,\n          label: Object.freeze({\n            text: name,\n            bounds: labelBounds,\n            rotationDegrees: 0,\n          }),\n          detail: Object.freeze({\n            text: detailText,\n            bounds: detailBounds,\n            rotationDegrees: 0,\n          }),\n        }),\n      );\n      y += size + nodeGap;\n    }\n  });\n  const sourceOffsets = new Map<VizKey, number>(),\n    targetOffsets = new Map<VizKey, number>();\n  for (const key of nodes.keys()) {\n    sourceOffsets.set(key, 0);\n    targetOffsets.set(key, 0);\n  }\n  const flows: SankeyFlowGeometry<E>[] = edges.map(\n    ({ key, edge, sourceKey, targetKey, value }) => {\n      const source = geometry.get(sourceKey)!,\n        target = geometry.get(targetKey)!,\n        thickness = value * scale;\n      const sourceTop = source.bounds.y + sourceOffsets.get(sourceKey)!;\n      const targetTop = target.bounds.y + targetOffsets.get(targetKey)!;\n      sourceOffsets.set(sourceKey, sourceOffsets.get(sourceKey)! + thickness);\n      targetOffsets.set(targetKey, targetOffsets.get(targetKey)! + thickness);\n      const sourceSpan = Object.freeze({\n        top: Object.freeze({\n          x: source.bounds.x + source.bounds.width,\n          y: sourceTop,\n        }),\n        bottom: Object.freeze({\n          x: source.bounds.x + source.bounds.width,\n          y: sourceTop + thickness,\n        }),\n      });\n      const targetSpan = Object.freeze({\n        top: Object.freeze({ x: target.bounds.x, y: targetTop }),\n        bottom: Object.freeze({ x: target.bounds.x, y: targetTop + thickness }),\n      });\n      const middle = (sourceSpan.top.x + targetSpan.top.x) / 2;\n      const segments = Object.freeze([\n        { type: \"move\" as const, x: sourceSpan.top.x, y: sourceSpan.top.y },\n        {\n          type: \"cubic\" as const,\n          cp1x: middle,\n          cp1y: sourceSpan.top.y,\n          cp2x: middle,\n          cp2y: targetSpan.top.y,\n          x: targetSpan.top.x,\n          y: targetSpan.top.y,\n        },\n        {\n          type: \"line\" as const,\n          x: targetSpan.bottom.x,\n          y: targetSpan.bottom.y,\n        },\n        {\n          type: \"cubic\" as const,\n          cp1x: middle,\n          cp1y: targetSpan.bottom.y,\n          cp2x: middle,\n          cp2y: sourceSpan.bottom.y,\n          x: sourceSpan.bottom.x,\n          y: sourceSpan.bottom.y,\n        },\n        { type: \"close\" as const },\n      ]);\n      return Object.freeze({\n        key,\n        datum: edge,\n        sourceKey,\n        targetKey,\n        value,\n        unit: options.unit,\n        thickness,\n        sourceSpan,\n        targetSpan,\n        route: Object.freeze({\n          sourceAnchor: sourceSpan.top,\n          targetAnchor: targetSpan.top,\n          segments,\n          arrowSegments: null,\n        }),\n        segments,\n        path: path(segments),\n        arrowPath: null,\n      });\n    },\n  );\n  return Object.freeze({\n    bounds: Object.freeze({ ...b }),\n    unit: options.unit,\n    nodes: Object.freeze(Array.from(geometry.values())),\n    flows: Object.freeze(flows),\n  });\n}\n\n/** Default node paint for custom Sankey compositions.\n * @param _node - Node geometry.\n * @returns Resolved node paint.\n * @see {@link SankeyNode}\n */\nexport function defaultSankeyNodeStyle<N>(\n  _node: SankeyNodeGeometry<N>,\n): NodeStyle {\n  return { fill: \"#0f766e\", cornerRadius: 3 };\n}\n/** Default flow paint for custom Sankey compositions.\n * @param _flow - Flow geometry.\n * @returns Resolved flow paint.\n * @see {@link SankeyFlow}\n */\nexport function defaultSankeyFlowStyle<E>(\n  _flow: SankeyFlowGeometry<E>,\n): EdgeStyle {\n  return { fill: \"rgba(15, 118, 110, 0.34)\" };\n}\n/** Draw one supplied Sankey node.\n * @param argument - Node props.\n * @returns Canvas node.\n * @see {@link SankeyNodeGeometry}\n */\nexport function SankeyNode<N>({\n  node,\n  style: input,\n  children,\n  ...events\n}: GraphNodeProps<N> & { readonly node: SankeyNodeGeometry<N> }): PibblNode {\n  return (\n    <GraphNode node={node} style={input} {...events}>\n      {children}\n    </GraphNode>\n  );\n}\n/** Draw one supplied Sankey flow.\n * @param argument - Flow props.\n * @returns Canvas node.\n * @see {@link SankeyFlowGeometry}\n */\nexport function SankeyFlow<E>({\n  flow,\n  style: input,\n  ...events\n}: MarkInteraction & {\n  readonly flow: SankeyFlowGeometry<E>;\n  readonly style?: Style<EdgeStyle>;\n}): PibblNode {\n  return (\n    <SvgPath\n      {...events}\n      style={{ ...(resolveSignalValue(input) ?? {}), d: flow.path }}\n    />\n  );\n}\n/** Render a weighted acyclic flow graph.\n * @param props - Graph data and presentation.\n * @returns Canvas node.\n * @see {@link layoutSankey}\n */\nexport function Sankey<N, E>(props: SankeyProps<N, E>): 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 = layoutSankey(resolveSignalValue(props.graph), {\n    ...props,\n    bounds: frame.bounds,\n    nodeWidth: style.nodeWidth,\n    nodeGap: style.nodeGap,\n  });\n  return (\n    <Group style={frame.groupStyle}>\n      {layout.flows.map((flow) => (\n        <Group\n          key={String(flow.key)}\n          onClick={(event) => props.onFlowClick?.(flow, event)}\n        >\n          {props.renderFlow ? (\n            props.renderFlow(flow)\n          ) : (\n            <SankeyFlow\n              flow={flow}\n              style={{\n                ...defaultSankeyFlowStyle(flow),\n                ...resolveMarkStyle(flow, props.flowStyle),\n              }}\n            />\n          )}\n        </Group>\n      ))}\n      {layout.nodes.map((node) => (\n        <Group\n          key={String(node.key)}\n          onClick={(event) => props.onNodeClick?.(node, event)}\n        >\n          {props.renderNode ? (\n            props.renderNode(node)\n          ) : (\n            <Group>\n              <SankeyNode\n                node={node}\n                style={{\n                  ...defaultSankeyNodeStyle(node),\n                  ...resolveMarkStyle(node, props.nodeStyle),\n                }}\n              />\n              <GraphLabel\n                label={node.label}\n                style={{\n                  ...defaultGraphLabelStyle(node.label),\n                  ...resolveSignalValue(props.labelStyle),\n                }}\n              />\n              <GraphLabel\n                label={node.detail!}\n                style={{\n                  ...defaultGraphLabelStyle(node.detail!),\n                  font: \"11px sans-serif\",\n                  ...resolveSignalValue(props.labelStyle),\n                }}\n              />\n            </Group>\n          )}\n        </Group>\n      ))}\n    </Group>\n  );\n}\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,59 @@
+import type { GStyle, SystemStyle, PibblResponsiveStyle, PibblNode } from "@pibbl/core";
+import type { Accessor, Bounds, Style, MarkStyle, GraphNodeGeometry, GraphNodeProps, GraphEdgeGeometry, GraphEdgeProps, GraphLabelProps, GraphViewProps, LabelGeometry, NodeStyle, EdgeStyle, LabelStyle, VizKey } from "./types.js";
+/** Read an application's typed property or accessor without normalizing away its record. */
+export declare function readAccessor<D, V>(datum: D, accessor: Accessor<D, V>): V;
+/** Validate a finite rectangle in local logical units. */
+export declare function validateBounds(bounds: Bounds): Bounds;
+export declare function validKey(key: VizKey): VizKey;
+/** Resolve ordinary responsive frame style through public sizing and allocation. */
+export declare function useGraphFrame<S extends GStyle>(input?: Style<S>): {
+    bounds: Bounds;
+    style: S;
+    groupStyle: GStyle;
+};
+/** Resolve a per-item paint callback without hiding its signal reads. */
+export declare function resolveMarkStyle<G, S extends SystemStyle>(geometry: G, input?: MarkStyle<G, S>): PibblResponsiveStyle<S> | undefined;
+/** Build inspectable label regions and original-record node geometry. */
+export declare function graphNodeGeometry<N>(datum: N, key: VizKey, bounds: Bounds, label?: string, detail?: string): GraphNodeGeometry<N>;
+/**
+ * Return the built-in node paint as an ordinary reusable style.
+ * @param _node - The node being painted. See {@link GraphNodeGeometry}.
+ * @returns Default fill, stroke and corner radius. See {@link NodeStyle}.
+ */
+export declare function defaultGraphNodeStyle<N>(_node: GraphNodeGeometry<N>): NodeStyle;
+/**
+ * Return the built-in edge paint as an ordinary reusable style.
+ * @param _edge - The edge being painted. See {@link GraphEdgeGeometry}.
+ * @returns Default stroke and logical stroke width. See {@link EdgeStyle}.
+ */
+export declare function defaultGraphEdgeStyle<E>(_edge: GraphEdgeGeometry<E>): EdgeStyle;
+/**
+ * Return the built-in label paint as an ordinary reusable style.
+ * @param _label - The label being painted. See {@link LabelGeometry}.
+ * @returns Default Canvas font, fill and middle baseline. See {@link LabelStyle}.
+ */
+export declare function defaultGraphLabelStyle(_label: LabelGeometry): LabelStyle;
+/**
+ * Draw a node box; children use node-local coordinates and ordinary Pibbl events.
+ * @param props - Box geometry, paint and event handlers. See {@link GraphNodeProps}.
+ * @returns A group containing the box and authored children. See {@link GraphNodeProps}.
+ */
+export declare function GraphNode<N>({ node, style, children, ...events }: GraphNodeProps<N>): PibblNode;
+/**
+ * Draw an edge path and optional arrow with ordinary path targeting.
+ * @param props - Edge geometry, paint and event handlers. See {@link GraphEdgeProps}.
+ * @returns Path content in diagram-local coordinates. See {@link GraphEdgeProps}.
+ */
+export declare function GraphEdge<E>({ edge, style, ...events }: GraphEdgeProps<E>): PibblNode;
+/**
+ * Draw decorative label text at its supplied box and rotation.
+ * @param props - Text geometry and optional text paint. See {@link GraphLabelProps}.
+ * @returns A transformed decorative Text component. See {@link GraphLabelProps}.
+ */
+export declare function GraphLabel({ label, style }: GraphLabelProps): PibblNode;
+/**
+ * Render supplied graph geometry without layout, fitting, or simulation.
+ * @param props - A snapshot or signal, item overrides and events. See {@link GraphViewProps}.
+ * @returns An ordinary Pibbl composition preserving source paint order. See {@link GraphViewProps}.
+ */
+export declare function GraphView<N, E>(props: GraphViewProps<N, E>): PibblNode;