@pibbl/core 0.0.1 → 0.0.3-alpha.109.1

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

@@ -0,0 +1,301 @@
+import { jsx, jsxs } from "@pibbl/core/jsx-runtime";
+import {
+  Group,
+  Rectangle,
+  SvgPath,
+  Text,
+  resolveSignalValue,
+  resolveBox,
+  useLayoutBox
+} from "@pibbl/core";
+const boundsKeys = ["x", "y", "width", "height"];
+const graphLayoutKeys = [
+  "rankGap",
+  "nodeGap",
+  "levelGap",
+  "siblingGap",
+  "cellGap",
+  "rowLabelWidth",
+  "columnLabelHeight",
+  "nodeWidth",
+  "columnGap",
+  "headerHeight",
+  "ringGap",
+  "bandWidth",
+  "padAngle",
+  "startAngle"
+];
+function readAccessor(datum, accessor) {
+  return typeof accessor === "function" ? accessor(datum) : datum[accessor];
+}
+function validateBounds(bounds) {
+  for (let keyIndex = 0; keyIndex < boundsKeys.length; keyIndex++) {
+    const key = boundsKeys[keyIndex];
+    if (!Number.isFinite(bounds[key]) || (key === "width" || key === "height") && bounds[key] < 0)
+      throw new RangeError(
+        `Graph bounds.${key} must be finite${key === "width" || key === "height" ? " and nonnegative" : ""}.`
+      );
+  }
+  if (!Number.isFinite(bounds.x + bounds.width) || !Number.isFinite(bounds.y + bounds.height))
+    throw new RangeError("Graph bounds overflow.");
+  return bounds;
+}
+function validKey(key) {
+  if (typeof key !== "string" && typeof key !== "number" || typeof key === "number" && !Number.isFinite(key))
+    throw new TypeError("Graph keys must be strings or finite numbers.");
+  return key;
+}
+function useGraphFrame(input) {
+  const allocation = useLayoutBox();
+  const authored = resolveSignalValue(input) ?? {};
+  const merged = { ...authored };
+  for (const rule of authored.when ?? []) {
+    const q = rule.query;
+    if ((q.minWidth === void 0 || allocation.width >= q.minWidth) && (q.maxWidth === void 0 || allocation.width <= q.maxWidth) && (q.minHeight === void 0 || allocation.height >= q.minHeight) && (q.maxHeight === void 0 || allocation.height <= q.maxHeight))
+      Object.assign(merged, rule.style);
+  }
+  delete merged.when;
+  for (const key of Object.keys(merged))
+    merged[key] = resolveSignalValue(merged[key]);
+  if (merged.width === "auto" || merged.height === "auto")
+    throw new RangeError(
+      "Graph frames require definite width and height or a finite parent allocation."
+    );
+  const style = merged;
+  const box = resolveBox(
+    {
+      ...style,
+      width: style.width ?? allocation.width,
+      height: style.height ?? allocation.height
+    },
+    {
+      minWidth: 0,
+      minHeight: 0,
+      maxWidth: allocation.width,
+      maxHeight: allocation.height
+    }
+  );
+  const bounds = validateBounds({
+    x: 0,
+    y: 0,
+    width: box.borderBox.width,
+    height: box.borderBox.height
+  });
+  const groupStyle = { ...style, width: bounds.width, height: bounds.height };
+  for (let keyIndex = 0; keyIndex < graphLayoutKeys.length; keyIndex++) {
+    const key = graphLayoutKeys[keyIndex];
+    delete groupStyle[key];
+  }
+  return { bounds, style, groupStyle };
+}
+function resolveMarkStyle(geometry, input) {
+  return resolveSignalValue(
+    typeof input === "function" ? input(geometry) : input
+  );
+}
+function graphNodeGeometry(datum, key, bounds, label = String(key), detail) {
+  return {
+    key,
+    datum,
+    bounds,
+    label: {
+      text: label,
+      bounds: {
+        x: bounds.x + 10,
+        y: bounds.y + 4,
+        width: Math.max(0, bounds.width - 20),
+        height: detail ? bounds.height / 2 : Math.max(0, bounds.height - 8)
+      },
+      rotationDegrees: 0
+    },
+    detail: detail === void 0 ? null : {
+      text: detail,
+      bounds: {
+        x: bounds.x + 10,
+        y: bounds.y + bounds.height / 2,
+        width: Math.max(0, bounds.width - 20),
+        height: bounds.height / 2 - 4
+      },
+      rotationDegrees: 0
+    }
+  };
+}
+function defaultGraphNodeStyle(_node) {
+  return {
+    fill: "#edf5f2",
+    stroke: "#8eb6aa",
+    strokeWidth: 1,
+    cornerRadius: 7
+  };
+}
+function defaultGraphEdgeStyle(_edge) {
+  return { stroke: "#91a9a3", strokeWidth: 1.5 };
+}
+function defaultGraphLabelStyle(_label) {
+  return { fill: "#203d39", font: "13px sans-serif", textBaseline: "middle" };
+}
+function GraphNode({
+  node,
+  style,
+  children,
+  ...events
+}) {
+  const { x, y, width, height } = node.bounds;
+  const {
+    keyboardFocusable,
+    keyboardNavigationBounds,
+    pointerEvents,
+    ...handlers
+  } = events;
+  return /* @__PURE__ */ jsxs(Group, { ...handlers, style: { translateX: x, translateY: y }, children: [
+    /* @__PURE__ */ jsx(
+      Rectangle,
+      {
+        keyboardFocusable: keyboardFocusable ?? Boolean(handlers.onClick || handlers.onKeyDown || handlers.onKeyUp),
+        keyboardNavigationBounds,
+        pointerEvents,
+        style: { ...resolveSignalValue(style), width, height }
+      }
+    ),
+    children
+  ] });
+}
+function GraphEdge({
+  edge,
+  style,
+  ...events
+}) {
+  const paint = resolveSignalValue(style);
+  const {
+    keyboardFocusable,
+    keyboardNavigationBounds,
+    pointerEvents,
+    ...handlers
+  } = events;
+  return /* @__PURE__ */ jsxs(Group, { ...handlers, children: [
+    /* @__PURE__ */ jsx(
+      SvgPath,
+      {
+        keyboardFocusable: keyboardFocusable ?? Boolean(handlers.onClick || handlers.onKeyDown || handlers.onKeyUp),
+        keyboardNavigationBounds,
+        pointerEvents,
+        style: { ...paint, d: edge.path }
+      }
+    ),
+    edge.arrowPath && /* @__PURE__ */ jsx(
+      SvgPath,
+      {
+        pointerEvents,
+        style: {
+          ...paint,
+          fill: paint?.stroke ?? "#91a9a3",
+          d: edge.arrowPath
+        }
+      }
+    )
+  ] });
+}
+function GraphLabel({ label, style }) {
+  const { x, y, width, height } = label.bounds;
+  const paint = resolveSignalValue(style);
+  const align = resolveSignalValue(paint?.textAlign);
+  const anchor = align === "center" ? width / 2 : align === "right" || align === "end" ? width : 0;
+  return /* @__PURE__ */ jsx(
+    Group,
+    {
+      style: {
+        translateX: x + anchor,
+        translateY: y + height / 2,
+        rotationDegrees: label.rotationDegrees
+      },
+      children: /* @__PURE__ */ jsx(
+        Text,
+        {
+          pointerEvents: "none",
+          style: { textBaseline: "middle", fit: "ellipsis", ...paint, width },
+          children: label.text
+        }
+      )
+    }
+  );
+}
+function GraphView(props) {
+  const layout = resolveSignalValue(props.layout);
+  return /* @__PURE__ */ jsxs(Group, { style: props.style, children: [
+    layout.edges.map((edge) => /* @__PURE__ */ jsx(
+      Group,
+      {
+        onClick: (event) => props.onEdgeClick?.(edge, event),
+        children: props.renderEdge ? props.renderEdge(edge) : /* @__PURE__ */ jsx(
+          GraphEdge,
+          {
+            edge,
+            keyboardFocusable: Boolean(props.onEdgeClick),
+            style: {
+              ...defaultGraphEdgeStyle(edge),
+              ...resolveMarkStyle(edge, props.edgeStyle)
+            }
+          }
+        )
+      },
+      `e:${typeof edge.key}:${edge.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(
+            GraphNode,
+            {
+              node,
+              keyboardFocusable: Boolean(props.onNodeClick),
+              style: {
+                ...defaultGraphNodeStyle(node),
+                ...resolveMarkStyle(node, props.nodeStyle)
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            GraphLabel,
+            {
+              label: node.label,
+              style: {
+                ...defaultGraphLabelStyle(node.label),
+                ...resolveMarkStyle(node, props.labelStyle)
+              }
+            }
+          ),
+          node.detail && /* @__PURE__ */ jsx(
+            GraphLabel,
+            {
+              label: node.detail,
+              style: {
+                ...defaultGraphLabelStyle(node.detail),
+                font: "11px sans-serif",
+                ...resolveMarkStyle(node, props.labelStyle)
+              }
+            }
+          )
+        ] })
+      },
+      `n:${typeof node.key}:${node.key}`
+    ))
+  ] });
+}
+export {
+  GraphEdge,
+  GraphLabel,
+  GraphNode,
+  GraphView,
+  defaultGraphEdgeStyle,
+  defaultGraphLabelStyle,
+  defaultGraphNodeStyle,
+  graphNodeGeometry,
+  readAccessor,
+  resolveMarkStyle,
+  useGraphFrame,
+  validKey,
+  validateBounds
+};
+//# sourceMappingURL=shared.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/features/viz/lib/graph/shared.tsx"],
+  "sourcesContent": ["import {\n  Group,\n  Rectangle,\n  SvgPath,\n  Text,\n  resolveSignalValue,\n  resolveBox,\n  useLayoutBox,\n} from \"@pibbl/core\";\nimport type {\n  GStyle,\n  SystemStyle,\n  PibblResponsiveStyle,\n  PibblNode,\n} from \"@pibbl/core\";\nimport type {\n  Accessor,\n  Bounds,\n  Style,\n  MarkStyle,\n  GraphNodeGeometry,\n  GraphNodeProps,\n  GraphEdgeGeometry,\n  GraphEdgeProps,\n  GraphLabelProps,\n  GraphViewProps,\n  LabelGeometry,\n  NodeStyle,\n  EdgeStyle,\n  LabelStyle,\n  VizKey,\n} from \"./types.js\";\nconst boundsKeys = [\"x\", \"y\", \"width\", \"height\"] as const;\nconst graphLayoutKeys = [\n    \"rankGap\",\n    \"nodeGap\",\n    \"levelGap\",\n    \"siblingGap\",\n    \"cellGap\",\n    \"rowLabelWidth\",\n    \"columnLabelHeight\",\n    \"nodeWidth\",\n    \"columnGap\",\n    \"headerHeight\",\n    \"ringGap\",\n    \"bandWidth\",\n    \"padAngle\",\n    \"startAngle\",\n  ] as const;\n\n/** Read an application's typed property or accessor without normalizing away its record. */\nexport function readAccessor<D, V>(datum: D, accessor: Accessor<D, V>): V {\n  return typeof accessor === \"function\"\n    ? accessor(datum)\n    : (datum[accessor] as V);\n}\n/** Validate a finite rectangle in local logical units. */\nexport function validateBounds(bounds: Bounds): Bounds {\n  for (let keyIndex = 0; keyIndex < boundsKeys.length; keyIndex++) {\n    const key = boundsKeys[keyIndex];\n    if (\n      !Number.isFinite(bounds[key]) ||\n      ((key === \"width\" || key === \"height\") && bounds[key] < 0)\n    )\n      throw new RangeError(\n        `Graph bounds.${key} must be finite${key === \"width\" || key === \"height\" ? \" and nonnegative\" : \"\"}.`,\n      );\n  }\n  if (\n    !Number.isFinite(bounds.x + bounds.width) ||\n    !Number.isFinite(bounds.y + bounds.height)\n  )\n    throw new RangeError(\"Graph bounds overflow.\");\n  return bounds;\n}\nexport function validKey(key: VizKey): VizKey {\n  if (\n    (typeof key !== \"string\" && typeof key !== \"number\") ||\n    (typeof key === \"number\" && !Number.isFinite(key))\n  )\n    throw new TypeError(\"Graph keys must be strings or finite numbers.\");\n  return key;\n}\n/** Resolve ordinary responsive frame style through public sizing and allocation. */\nexport function useGraphFrame<S extends GStyle>(\n  input?: Style<S>,\n): { bounds: Bounds; style: S; groupStyle: GStyle } {\n  const allocation = useLayoutBox();\n  const authored = (resolveSignalValue(input) ?? {}) as PibblResponsiveStyle<S>;\n  const merged = { ...authored } as Record<string, unknown>;\n  for (const rule of authored.when ?? []) {\n    const q = rule.query;\n    if (\n      (q.minWidth === undefined || allocation.width >= q.minWidth) &&\n      (q.maxWidth === undefined || allocation.width <= q.maxWidth) &&\n      (q.minHeight === undefined || allocation.height >= q.minHeight) &&\n      (q.maxHeight === undefined || allocation.height <= q.maxHeight)\n    )\n      Object.assign(merged, rule.style);\n  }\n  delete merged.when;\n  for (const key of Object.keys(merged))\n    merged[key] = resolveSignalValue(merged[key]);\n  if (merged.width === \"auto\" || merged.height === \"auto\")\n    throw new RangeError(\n      \"Graph frames require definite width and height or a finite parent allocation.\",\n    );\n  const style = merged as S;\n  const box = resolveBox(\n    {\n      ...style,\n      width: style.width ?? allocation.width,\n      height: style.height ?? allocation.height,\n    },\n    {\n      minWidth: 0,\n      minHeight: 0,\n      maxWidth: allocation.width,\n      maxHeight: allocation.height,\n    },\n  );\n  const bounds = validateBounds({\n    x: 0,\n    y: 0,\n    width: box.borderBox.width,\n    height: box.borderBox.height,\n  });\n  const groupStyle = { ...style, width: bounds.width, height: bounds.height };\n  for (let keyIndex = 0; keyIndex < graphLayoutKeys.length; keyIndex++) {\n    const key = graphLayoutKeys[keyIndex];\n    delete (groupStyle as unknown as Record<string, unknown>)[key];\n  }\n  return { bounds, style, groupStyle };\n}\n/** Resolve a per-item paint callback without hiding its signal reads. */\nexport function resolveMarkStyle<G, S extends SystemStyle>(\n  geometry: G,\n  input?: MarkStyle<G, S>,\n): PibblResponsiveStyle<S> | undefined {\n  return resolveSignalValue(\n    typeof input === \"function\" ? input(geometry) : input,\n  );\n}\n/** Build inspectable label regions and original-record node geometry. */\nexport function graphNodeGeometry<N>(\n  datum: N,\n  key: VizKey,\n  bounds: Bounds,\n  label = String(key),\n  detail?: string,\n): GraphNodeGeometry<N> {\n  return {\n    key,\n    datum,\n    bounds,\n    label: {\n      text: label,\n      bounds: {\n        x: bounds.x + 10,\n        y: bounds.y + 4,\n        width: Math.max(0, bounds.width - 20),\n        height: detail ? bounds.height / 2 : Math.max(0, bounds.height - 8),\n      },\n      rotationDegrees: 0,\n    },\n    detail:\n      detail === undefined\n        ? null\n        : {\n            text: detail,\n            bounds: {\n              x: bounds.x + 10,\n              y: bounds.y + bounds.height / 2,\n              width: Math.max(0, bounds.width - 20),\n              height: bounds.height / 2 - 4,\n            },\n            rotationDegrees: 0,\n          },\n  };\n}\n/**\n * Return the built-in node paint as an ordinary reusable style.\n * @param _node - The node being painted. See {@link GraphNodeGeometry}.\n * @returns Default fill, stroke and corner radius. See {@link NodeStyle}.\n */\nexport function defaultGraphNodeStyle<N>(\n  _node: GraphNodeGeometry<N>,\n): NodeStyle {\n  return {\n    fill: \"#edf5f2\",\n    stroke: \"#8eb6aa\",\n    strokeWidth: 1,\n    cornerRadius: 7,\n  };\n}\n/**\n * Return the built-in edge paint as an ordinary reusable style.\n * @param _edge - The edge being painted. See {@link GraphEdgeGeometry}.\n * @returns Default stroke and logical stroke width. See {@link EdgeStyle}.\n */\nexport function defaultGraphEdgeStyle<E>(\n  _edge: GraphEdgeGeometry<E>,\n): EdgeStyle {\n  return { stroke: \"#91a9a3\", strokeWidth: 1.5 };\n}\n/**\n * Return the built-in label paint as an ordinary reusable style.\n * @param _label - The label being painted. See {@link LabelGeometry}.\n * @returns Default Canvas font, fill and middle baseline. See {@link LabelStyle}.\n */\nexport function defaultGraphLabelStyle(_label: LabelGeometry): LabelStyle {\n  return { fill: \"#203d39\", font: \"13px sans-serif\", textBaseline: \"middle\" };\n}\n/**\n * Draw a node box; children use node-local coordinates and ordinary Pibbl events.\n * @param props - Box geometry, paint and event handlers. See {@link GraphNodeProps}.\n * @returns A group containing the box and authored children. See {@link GraphNodeProps}.\n */\nexport function GraphNode<N>({\n  node,\n  style,\n  children,\n  ...events\n}: GraphNodeProps<N>): PibblNode {\n  const { x, y, width, height } = node.bounds;\n  const {\n    keyboardFocusable,\n    keyboardNavigationBounds,\n    pointerEvents,\n    ...handlers\n  } = events;\n  return (\n    <Group {...handlers} style={{ translateX: x, translateY: y }}>\n      <Rectangle\n        keyboardFocusable={\n          keyboardFocusable ??\n          Boolean(handlers.onClick || handlers.onKeyDown || handlers.onKeyUp)\n        }\n        keyboardNavigationBounds={keyboardNavigationBounds}\n        pointerEvents={pointerEvents}\n        style={{ ...resolveSignalValue(style), width, height }}\n      />\n      {children}\n    </Group>\n  );\n}\n/**\n * Draw an edge path and optional arrow with ordinary path targeting.\n * @param props - Edge geometry, paint and event handlers. See {@link GraphEdgeProps}.\n * @returns Path content in diagram-local coordinates. See {@link GraphEdgeProps}.\n */\nexport function GraphEdge<E>({\n  edge,\n  style,\n  ...events\n}: GraphEdgeProps<E>): PibblNode {\n  const paint = resolveSignalValue(style);\n  const {\n    keyboardFocusable,\n    keyboardNavigationBounds,\n    pointerEvents,\n    ...handlers\n  } = events;\n  return (\n    <Group {...handlers}>\n      <SvgPath\n        keyboardFocusable={\n          keyboardFocusable ??\n          Boolean(handlers.onClick || handlers.onKeyDown || handlers.onKeyUp)\n        }\n        keyboardNavigationBounds={keyboardNavigationBounds}\n        pointerEvents={pointerEvents}\n        style={{ ...paint, d: edge.path }}\n      />\n      {edge.arrowPath && (\n        <SvgPath\n          pointerEvents={pointerEvents}\n          style={{\n            ...paint,\n            fill: paint?.stroke ?? \"#91a9a3\",\n            d: edge.arrowPath,\n          }}\n        />\n      )}\n    </Group>\n  );\n}\n/**\n * Draw decorative label text at its supplied box and rotation.\n * @param props - Text geometry and optional text paint. See {@link GraphLabelProps}.\n * @returns A transformed decorative Text component. See {@link GraphLabelProps}.\n */\nexport function GraphLabel({ label, style }: GraphLabelProps): PibblNode {\n  const { x, y, width, height } = label.bounds;\n  const paint = resolveSignalValue(style);\n  const align = resolveSignalValue(paint?.textAlign);\n  const anchor =\n    align === \"center\"\n      ? width / 2\n      : align === \"right\" || align === \"end\"\n        ? width\n        : 0;\n  return (\n    <Group\n      style={{\n        translateX: x + anchor,\n        translateY: y + height / 2,\n        rotationDegrees: label.rotationDegrees,\n      }}\n    >\n      <Text\n        pointerEvents=\"none\"\n        style={{ textBaseline: \"middle\", fit: \"ellipsis\", ...paint, width }}\n      >\n        {label.text}\n      </Text>\n    </Group>\n  );\n}\n/**\n * Render supplied graph geometry without layout, fitting, or simulation.\n * @param props - A snapshot or signal, item overrides and events. See {@link GraphViewProps}.\n * @returns An ordinary Pibbl composition preserving source paint order. See {@link GraphViewProps}.\n */\nexport function GraphView<N, E>(props: GraphViewProps<N, E>): PibblNode {\n  const layout = resolveSignalValue(props.layout);\n  return (\n    <Group style={props.style}>\n      {layout.edges.map((edge) => (\n        <Group\n          key={`e:${typeof edge.key}:${edge.key}`}\n          onClick={(event) => props.onEdgeClick?.(edge, event)}\n        >\n          {props.renderEdge ? (\n            props.renderEdge(edge)\n          ) : (\n            <GraphEdge\n              edge={edge}\n              keyboardFocusable={Boolean(props.onEdgeClick)}\n              style={{\n                ...defaultGraphEdgeStyle(edge),\n                ...resolveMarkStyle(edge, props.edgeStyle),\n              }}\n            />\n          )}\n        </Group>\n      ))}\n      {layout.nodes.map((node) => (\n        <Group\n          key={`n:${typeof node.key}:${node.key}`}\n          onClick={(event) => props.onNodeClick?.(node, event)}\n        >\n          {props.renderNode ? (\n            props.renderNode(node)\n          ) : (\n            <Group>\n              <GraphNode\n                node={node}\n                keyboardFocusable={Boolean(props.onNodeClick)}\n                style={{\n                  ...defaultGraphNodeStyle(node),\n                  ...resolveMarkStyle(node, props.nodeStyle),\n                }}\n              />\n              <GraphLabel\n                label={node.label}\n                style={{\n                  ...defaultGraphLabelStyle(node.label),\n                  ...resolveMarkStyle(node, props.labelStyle),\n                }}\n              />\n              {node.detail && (\n                <GraphLabel\n                  label={node.detail}\n                  style={{\n                    ...defaultGraphLabelStyle(node.detail),\n                    font: \"11px sans-serif\",\n                    ...resolveMarkStyle(node, props.labelStyle),\n                  }}\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/tree.d.ts

@@ -0,0 +1,11 @@
+import { type PibblNode } from "@pibbl/core";
+import type { TidyTreeProps, TreeLayout, TreeOptions } from "./types.js";
+/** Lay out a validated hierarchy with stable child order and variable node dimensions.
+ * @param root - Hierarchy root.
+ * @param options - Named hierarchy accessors and finite bounds.
+ * @returns Immutable node and edge geometry. @see {@link TreeLayout} */
+export declare function layoutTree<D>(root: D, options: TreeOptions<D>): TreeLayout<D>;
+/** Render a tidy hierarchy from ordinary data using default marks or caller compositions.
+ * @param props - Reactive hierarchy data, presentation, and frame style.
+ * @returns Canvas composition. @see {@link layoutTree} */
+export declare function TidyTree<D>(props: TidyTreeProps<D>): PibblNode;

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

@@ -0,0 +1,232 @@
+import { jsx, jsxs } from "@pibbl/core/jsx-runtime";
+import { Group, resolveSignalValue } from "@pibbl/core";
+import {
+  defaultGraphEdgeStyle,
+  defaultGraphLabelStyle,
+  defaultGraphNodeStyle,
+  GraphEdge,
+  GraphLabel,
+  GraphNode,
+  resolveMarkStyle,
+  useGraphFrame
+} from "./shared.js";
+import {
+  checkedBounds,
+  finiteGap,
+  finiteSize,
+  hierarchy,
+  hierarchyLabel
+} from "./hierarchy.js";
+function layoutTree(root, options) {
+  const bounds = checkedBounds(options.bounds, "layoutTree");
+  const siblingGap = finiteGap(options.siblingGap, 24, "layoutTree siblingGap");
+  const levelGap = finiteGap(options.levelGap, 48, "layoutTree levelGap");
+  const tree = hierarchy(root, options, "layoutTree");
+  const visible = (record) => record.collapsed ? [] : record.children;
+  const sizes = /* @__PURE__ */ new Map();
+  const spans = /* @__PURE__ */ new Map();
+  const depthHeights = [];
+  const measure = (record) => {
+    const size = finiteSize(record.datum, options.nodeSize, "layoutTree");
+    sizes.set(record, size);
+    depthHeights[record.depth] = Math.max(
+      depthHeights[record.depth] ?? 0,
+      size.height
+    );
+    const kids = visible(record);
+    const childSpan = kids.reduce(
+      (sum, child, index) => sum + measure(child) + (index ? siblingGap : 0),
+      0
+    );
+    const span = Math.max(size.width, childSpan);
+    spans.set(record, span);
+    return span;
+  };
+  const totalWidth = measure(tree);
+  const totalHeight = depthHeights.reduce(
+    (sum, height, index) => sum + height + (index ? levelGap : 0),
+    0
+  );
+  if (totalWidth > bounds.width || totalHeight > bounds.height)
+    throw new RangeError(
+      "layoutTree: bounds are too small for nodes and gaps."
+    );
+  const yAt = [];
+  let y = bounds.y;
+  for (let depth = 0; depth < depthHeights.length; depth++) {
+    yAt.push(y);
+    y += depthHeights[depth] + levelGap;
+  }
+  const positions = [];
+  const place = (record, left) => {
+    const span = spans.get(record);
+    const size = sizes.get(record);
+    const x = left + (span - size.width) / 2;
+    positions.push({ record, width: size.width, x });
+    let childLeft = left;
+    for (const child of visible(record)) {
+      place(child, childLeft);
+      childLeft += spans.get(child) + siblingGap;
+    }
+  };
+  place(tree, bounds.x + (bounds.width - totalWidth) / 2);
+  const nodes = positions.map(({ record, x }) => {
+    const size = sizes.get(record);
+    const box = Object.freeze({
+      x,
+      y: yAt[record.depth],
+      width: size.width,
+      height: size.height
+    });
+    return Object.freeze({
+      key: record.key,
+      datum: record.datum,
+      bounds: box,
+      label: hierarchyLabel(
+        record.datum,
+        options.label,
+        {
+          x: x + 10,
+          y: box.y + 10,
+          width: size.width - 20,
+          height: 18
+        },
+        String(record.key)
+      ),
+      detail: options.detail === void 0 ? null : hierarchyLabel(record.datum, options.detail, {
+        x: x + 10,
+        y: box.y + 31,
+        width: size.width - 20,
+        height: 16
+      }),
+      depth: record.depth,
+      parentKey: record.parent?.key ?? null,
+      hiddenChildren: record.hiddenChildren
+    });
+  });
+  const byKey = new Map(nodes.map((node) => [node.key, node]));
+  const edges = [];
+  for (const node of nodes)
+    if (node.parentKey !== null) {
+      const parent = byKey.get(node.parentKey);
+      const sourceAnchor = {
+        x: parent.bounds.x + parent.bounds.width / 2,
+        y: parent.bounds.y + parent.bounds.height
+      };
+      const targetAnchor = {
+        x: node.bounds.x + node.bounds.width / 2,
+        y: node.bounds.y
+      };
+      const bend = (sourceAnchor.y + targetAnchor.y) / 2;
+      const segments = Object.freeze([
+        { type: "move", ...sourceAnchor },
+        { type: "line", x: sourceAnchor.x, y: bend },
+        { type: "line", x: targetAnchor.x, y: bend },
+        { type: "line", ...targetAnchor }
+      ]);
+      edges.push(
+        Object.freeze({
+          key: `${String(parent.key)}\u2192${String(node.key)}`,
+          datum: { parent: parent.datum, child: node.datum },
+          sourceKey: parent.key,
+          targetKey: node.key,
+          route: Object.freeze({
+            sourceAnchor: Object.freeze(sourceAnchor),
+            targetAnchor: Object.freeze(targetAnchor),
+            segments,
+            arrowSegments: null
+          }),
+          path: `M ${sourceAnchor.x} ${sourceAnchor.y} L ${sourceAnchor.x} ${bend} L ${targetAnchor.x} ${bend} L ${targetAnchor.x} ${targetAnchor.y}`,
+          arrowPath: null
+        })
+      );
+    }
+  return Object.freeze({
+    bounds,
+    nodes: Object.freeze(nodes),
+    edges: Object.freeze(edges)
+  });
+}
+function TidyTree(props) {
+  const frame = useGraphFrame(props.style);
+  const root = resolveSignalValue(props.root);
+  if (frame.bounds.width === 0 || frame.bounds.height === 0)
+    return /* @__PURE__ */ jsx(Group, { style: frame.groupStyle, children: null });
+  const layout = layoutTree(root, {
+    ...props,
+    bounds: frame.bounds,
+    levelGap: frame.style.levelGap,
+    siblingGap: frame.style.siblingGap
+  });
+  return /* @__PURE__ */ jsxs(Group, { style: frame.groupStyle, children: [
+    layout.edges.map(
+      (edge) => props.renderEdge ? /* @__PURE__ */ jsx(
+        Group,
+        {
+          onClick: (event) => props.onEdgeClick?.(edge, event),
+          children: props.renderEdge(edge)
+        },
+        edge.key
+      ) : /* @__PURE__ */ jsx(
+        GraphEdge,
+        {
+          edge,
+          style: {
+            ...defaultGraphEdgeStyle(edge),
+            ...resolveMarkStyle(edge, props.edgeStyle)
+          },
+          onClick: (event) => props.onEdgeClick?.(edge, event)
+        },
+        edge.key
+      )
+    ),
+    layout.nodes.map(
+      (node) => props.renderNode ? /* @__PURE__ */ jsx(
+        Group,
+        {
+          onClick: (event) => props.onNodeClick?.(node, event),
+          children: props.renderNode(node)
+        },
+        node.key
+      ) : /* @__PURE__ */ jsxs(Group, { children: [
+        /* @__PURE__ */ jsx(
+          GraphNode,
+          {
+            node,
+            style: {
+              ...defaultGraphNodeStyle(node),
+              ...resolveMarkStyle(node, props.nodeStyle)
+            },
+            onClick: (event) => props.onNodeClick?.(node, event)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          GraphLabel,
+          {
+            label: node.label,
+            style: {
+              ...defaultGraphLabelStyle(node.label),
+              ...resolveMarkStyle(node, props.labelStyle)
+            }
+          }
+        ),
+        node.detail && /* @__PURE__ */ jsx(
+          GraphLabel,
+          {
+            label: node.detail,
+            style: {
+              ...defaultGraphLabelStyle(node.detail),
+              font: "11px sans-serif",
+              ...resolveMarkStyle(node, props.labelStyle)
+            }
+          }
+        )
+      ] }, node.key)
+    )
+  ] });
+}
+export {
+  TidyTree,
+  layoutTree
+};
+//# sourceMappingURL=tree.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/features/viz/lib/graph/tree.tsx"],
+  "sourcesContent": ["import { Group, resolveSignalValue, type PibblNode } from \"@pibbl/core\";\nimport {\n  defaultGraphEdgeStyle,\n  defaultGraphLabelStyle,\n  defaultGraphNodeStyle,\n  GraphEdge,\n  GraphLabel,\n  GraphNode,\n  resolveMarkStyle,\n  useGraphFrame,\n} from \"./shared.js\";\nimport type {\n  GraphEdgeGeometry,\n  TidyTreeProps,\n  TreeEdge,\n  TreeLayout,\n  TreeNodeGeometry,\n  TreeOptions,\n  TreeStyle,\n} from \"./types.js\";\nimport {\n  checkedBounds,\n  finiteGap,\n  finiteSize,\n  hierarchy,\n  hierarchyLabel,\n  type HierarchyRecord,\n} from \"./hierarchy.js\";\n\ninterface Positioned<D> {\n  record: HierarchyRecord<D>;\n  width: number;\n  x: number;\n}\n\n/** Lay out a validated hierarchy with stable child order and variable node dimensions.\n * @param root - Hierarchy root.\n * @param options - Named hierarchy accessors and finite bounds.\n * @returns Immutable node and edge geometry. @see {@link TreeLayout} */\nexport function layoutTree<D>(root: D, options: TreeOptions<D>): TreeLayout<D> {\n  const bounds = checkedBounds(options.bounds, \"layoutTree\");\n  const siblingGap = finiteGap(options.siblingGap, 24, \"layoutTree siblingGap\");\n  const levelGap = finiteGap(options.levelGap, 48, \"layoutTree levelGap\");\n  const tree = hierarchy(root, options, \"layoutTree\");\n  const visible = (record: HierarchyRecord<D>) =>\n    record.collapsed ? [] : record.children;\n  const sizes = new Map<\n    HierarchyRecord<D>,\n    { width: number; height: number }\n  >();\n  const spans = new Map<HierarchyRecord<D>, number>();\n  const depthHeights: number[] = [];\n  const measure = (record: HierarchyRecord<D>): number => {\n    const size = finiteSize(record.datum, options.nodeSize, \"layoutTree\");\n    sizes.set(record, size);\n    depthHeights[record.depth] = Math.max(\n      depthHeights[record.depth] ?? 0,\n      size.height,\n    );\n    const kids = visible(record);\n    const childSpan = kids.reduce(\n      (sum, child, index) => sum + measure(child) + (index ? siblingGap : 0),\n      0,\n    );\n    const span = Math.max(size.width, childSpan);\n    spans.set(record, span);\n    return span;\n  };\n  const totalWidth = measure(tree);\n  const totalHeight = depthHeights.reduce(\n    (sum, height, index) => sum + height + (index ? levelGap : 0),\n    0,\n  );\n  if (totalWidth > bounds.width || totalHeight > bounds.height)\n    throw new RangeError(\n      \"layoutTree: bounds are too small for nodes and gaps.\",\n    );\n  const yAt: number[] = [];\n  let y = bounds.y;\n  for (let depth = 0; depth < depthHeights.length; depth++) {\n    yAt.push(y);\n    y += depthHeights[depth] + levelGap;\n  }\n  const positions: Positioned<D>[] = [];\n  const place = (record: HierarchyRecord<D>, left: number) => {\n    const span = spans.get(record)!;\n    const size = sizes.get(record)!;\n    const x = left + (span - size.width) / 2;\n    positions.push({ record, width: size.width, x });\n    let childLeft = left;\n    for (const child of visible(record)) {\n      place(child, childLeft);\n      childLeft += spans.get(child)! + siblingGap;\n    }\n  };\n  place(tree, bounds.x + (bounds.width - totalWidth) / 2);\n  const nodes = positions.map(({ record, x }) => {\n    const size = sizes.get(record)!;\n    const box = Object.freeze({\n      x,\n      y: yAt[record.depth],\n      width: size.width,\n      height: size.height,\n    });\n    return Object.freeze({\n      key: record.key,\n      datum: record.datum,\n      bounds: box,\n      label: hierarchyLabel(\n        record.datum,\n        options.label,\n        {\n          x: x + 10,\n          y: box.y + 10,\n          width: size.width - 20,\n          height: 18,\n        },\n        String(record.key),\n      ),\n      detail:\n        options.detail === undefined\n          ? null\n          : hierarchyLabel(record.datum, options.detail, {\n              x: x + 10,\n              y: box.y + 31,\n              width: size.width - 20,\n              height: 16,\n            }),\n      depth: record.depth,\n      parentKey: record.parent?.key ?? null,\n      hiddenChildren: record.hiddenChildren,\n    } satisfies TreeNodeGeometry<D>);\n  });\n  const byKey = new Map(nodes.map((node) => [node.key, node]));\n  const edges: GraphEdgeGeometry<TreeEdge<D>>[] = [];\n  for (const node of nodes)\n    if (node.parentKey !== null) {\n      const parent = byKey.get(node.parentKey)!;\n      const sourceAnchor = {\n        x: parent.bounds.x + parent.bounds.width / 2,\n        y: parent.bounds.y + parent.bounds.height,\n      };\n      const targetAnchor = {\n        x: node.bounds.x + node.bounds.width / 2,\n        y: node.bounds.y,\n      };\n      const bend = (sourceAnchor.y + targetAnchor.y) / 2;\n      const segments = Object.freeze([\n        { type: \"move\" as const, ...sourceAnchor },\n        { type: \"line\" as const, x: sourceAnchor.x, y: bend },\n        { type: \"line\" as const, x: targetAnchor.x, y: bend },\n        { type: \"line\" as const, ...targetAnchor },\n      ]);\n      edges.push(\n        Object.freeze({\n          key: `${String(parent.key)}\u2192${String(node.key)}`,\n          datum: { parent: parent.datum, child: node.datum },\n          sourceKey: parent.key,\n          targetKey: node.key,\n          route: Object.freeze({\n            sourceAnchor: Object.freeze(sourceAnchor),\n            targetAnchor: Object.freeze(targetAnchor),\n            segments,\n            arrowSegments: null,\n          }),\n          path: `M ${sourceAnchor.x} ${sourceAnchor.y} L ${sourceAnchor.x} ${bend} L ${targetAnchor.x} ${bend} L ${targetAnchor.x} ${targetAnchor.y}`,\n          arrowPath: null,\n        }),\n      );\n    }\n  return Object.freeze({\n    bounds,\n    nodes: Object.freeze(nodes),\n    edges: Object.freeze(edges),\n  });\n}\n\n/** Render a tidy hierarchy from ordinary data using default marks or caller compositions.\n * @param props - Reactive hierarchy data, presentation, and frame style.\n * @returns Canvas composition. @see {@link layoutTree} */\nexport function TidyTree<D>(props: TidyTreeProps<D>): PibblNode {\n  const frame = useGraphFrame<TreeStyle>(props.style);\n  const root = resolveSignalValue(props.root);\n  if (frame.bounds.width === 0 || frame.bounds.height === 0)\n    return <Group style={frame.groupStyle}>{null}</Group>;\n  const layout = layoutTree(root, {\n    ...props,\n    bounds: frame.bounds,\n    levelGap: frame.style.levelGap,\n    siblingGap: frame.style.siblingGap,\n  });\n  return (\n    <Group style={frame.groupStyle}>\n      {layout.edges.map((edge) =>\n        props.renderEdge ? (\n          <Group\n            key={edge.key}\n            onClick={(event) => props.onEdgeClick?.(edge, event)}\n          >\n            {props.renderEdge(edge)}\n          </Group>\n        ) : (\n          <GraphEdge\n            key={edge.key}\n            edge={edge}\n            style={{\n              ...defaultGraphEdgeStyle(edge),\n              ...resolveMarkStyle(edge, props.edgeStyle),\n            }}\n            onClick={(event) => props.onEdgeClick?.(edge, event)}\n          />\n        ),\n      )}\n      {layout.nodes.map((node) =>\n        props.renderNode ? (\n          <Group\n            key={node.key}\n            onClick={(event) => props.onNodeClick?.(node, event)}\n          >\n            {props.renderNode(node)}\n          </Group>\n        ) : (\n          <Group key={node.key}>\n            <GraphNode\n              node={node}\n              style={{\n                ...defaultGraphNodeStyle(node),\n                ...resolveMarkStyle(node, props.nodeStyle),\n              }}\n              onClick={(event) => props.onNodeClick?.(node, event)}\n            />\n            <GraphLabel\n              label={node.label}\n              style={{\n                ...defaultGraphLabelStyle(node.label),\n                ...resolveMarkStyle(node, props.labelStyle),\n              }}\n            />\n            {node.detail && (\n              <GraphLabel\n                label={node.detail}\n                style={{\n                  ...defaultGraphLabelStyle(node.detail),\n                  font: \"11px sans-serif\",\n                  ...resolveMarkStyle(node, props.labelStyle),\n                }}\n              />\n            )}\n          </Group>\n        ),\n      )}\n    </Group>\n  );\n}\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,20 @@
+import type { NodeStyle } from "./types.js";
+import { type PibblNode } from "@pibbl/core";
+import type { PartitionCellGeometry, PartitionLayout, PartitionCellProps, TreemapOptions, TreemapProps } from "./types.js";
+/** Return the built-in depth-aware partition paint.
+ * @param cell - Partition cell geometry.
+ * @returns Ordinary rectangle style. @see {@link PartitionCellGeometry} */
+export declare function defaultPartitionCellStyle<D>(cell: PartitionCellGeometry<D>): NodeStyle;
+/** Squarify weighted hierarchy leaves into stable, compact rectangles.
+ * @param root - Hierarchy root.
+ * @param options - Accessors, units, and finite bounds.
+ * @returns Immutable partition geometry. @see {@link PartitionLayout} */
+export declare function layoutTreemap<D>(root: D, options: TreemapOptions<D>): PartitionLayout<D>;
+/** Paint one partition cell at its immutable geometry.
+ * @param props - Cell geometry, paint, events, and optional global-coordinate children.
+ * @returns Canvas composition. @see {@link PartitionCellGeometry} */
+export declare function TreemapCell<D>(props: PartitionCellProps<D>): PibblNode;
+/** Render a squarified hierarchy with visible quantitative labels.
+ * @param props - Reactive hierarchy data and presentation.
+ * @returns Canvas composition. @see {@link layoutTreemap} */
+export declare function Treemap<D>(props: TreemapProps<D>): PibblNode;