feat(layout): add overlap support for dock components

[quanho]

Problem

Previously, multiple components docked to the same edge (e.g. top) would always stack — each one consuming space and pushing the center area further inward. There was no way for two components to share the same edge position independently with their own sizes.

Solution

Adds an overlap option to the dock configuration. When overlap: true, a component is positioned at the inner edge of the center area for its dock direction (anchored from the center outward), without affecting how other components are laid out.

Behavior

The center boundary per direction is determined by:

center_boundary = max(sum of normal components, max overlap component size)

This means:

• If the overlap component fits within the space already claimed by normal components, the center doesn't move.
• If the overlap component is larger than all normal components combined, the center expands just enough.

All overlap components share the same anchor point (the center boundary), so their inner edges are aligned. Normal components also align outward from this same boundary.

Examples

Basic overlap — A normal 30px, B overlap 20px, C overlap 15px:

y=0  ┌── A (30px normal) ────────────────┐
y=10 │  ┌── B (20px overlap) ────────────┤  inner edges align at y=30
y=15 │  │  ┌── C (15px overlap) ─────────┤
y=30 └──┴──┴──── center boundary ────────┘

Center stays at y=30 — max(30, 20) = 30.

Overlap exceeds normals — A 30px, B 20px normals, C 70px overlap:

y=0  ┌── C (70px overlap) ───────────────┐
y=20 │  ┌── B (20px normal) ─────────────┤
y=40 │  │  ┌── A (30px normal) ──────────┤  inner edges align at y=70
y=70 └──┴──┴──── center boundary ────────┘

Center moves to y=70 — max(50, 70) = 70.

Combining with @ references — components can dock at overlap components using the existing @key syntax, inheriting their rect.

Usage

{
  key: 'myAxis',
  type: 'axis',
  layout: {
    dock: 'top',
    // overlap: false (default) — stacks normally
  },
}

{
  key: 'myBand',
  type: 'band',
  layout: {
    dock: 'top',
    overlap: true,       // shares the top edge, does not push center
    preferredSize: 20,   // own height, anchored at center boundary
  },
}

Checklist

• tests added
• commits conform to the commit guidelines
• documentation updated

[Copilot]

Pull request overview

Adds an overlap option to the dock layout system so multiple components can share the same dock edge without stacking (i.e., without each consuming additional center space), while still ensuring the center boundary accounts for the largest overlap component per direction.

Changes:

• Introduces layout.overlap in dock config + component factory plumbing.
• Updates dock layout reduction + positioning logic to support overlap anchoring at the center boundary.
• Adds overlap-focused layout tests and updates public chart settings documentation.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/picasso.js/src/core/layout/dock/docker.js	Skips size-reduction for overlap components, adjusts center boundary by max overlap size, and anchors overlap components to the center boundary during positioning.
packages/picasso.js/src/core/layout/dock/config.js	Adds overlap() getter/setter to dock config with default false.
packages/picasso.js/src/core/layout/dock/tests/dock-layout.spec.js	Adds test cases validating overlap positioning, center boundary behavior, and @key reference compatibility.
packages/picasso.js/src/core/component/component-factory.js	Wires overlap into dock definition extraction/migration into settings.layout.
packages/picasso.js/src/core/chart/index.js	Documents layout.overlap in ComponentSettings.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Caele]

looks good as far as I can tell, but i'm no picasso.