feat(tree-select): reorder selected chips in place + reusable drag-drop primitive

[PieterjanDeClippel]

Why

The additional-samples/tree-select-drag-drop demo was supposed to let users reorder the selected items inside bs-tree-select itself, but it shipped a workaround: a separate cdkDropList bar rendered below the component, round-tripping order through [value].

Root cause: in multiple/checkbox mode the chips render as <span class="ts-chip"> inside the web component's shadow DOM (mp-tree-select.ts renderChips()). Angular CDK's cdkDrag/cdkDropList only bind to light-DOM Angular owns — they can't reach the shadow chips.

What

• Chips now reorder in place inside the component (pointer drag, or keyboard: focus a chip → M → arrows → Enter). The separate bar is gone.
• The drag mechanism is generalized into a reusable, framework-agnostic primitive @mintplayer/web-components/drag-drop (SortableController + CDK-parity moveItemInArray/transferArrayItem) — usable by any WC, not just tree-select.
• Opt-in & tree-shakeable: the base mp-tree-select/BsTreeSelectComponent import no drag code — only a tiny register/get seam. SortableController is pulled in only when a consumer imports the opt-in artifact; otherwise reorderable is inert and the whole module is tree-shaken out.
  • Angular: BsTreeSelectReorderDirective from @mintplayer/ng-bootstrap/tree-select/reorder
  • WC / React / Vue: @mintplayer/web-components/tree-select-reorder (thin re-exports per wrapper)
• New reorderable attribute/input + reorder event across the WC and all three wrappers (reorder also flows through the form value via value-change/CVA/v-model). No @angular/cdk dependency.

PRD: docs/prd/tree-select-chip-reorder.md.

Verification

• drag-drop unit tests (geometry, moveItemInArray/transferArrayItem, keyboard reorder): 14 pass
• Full web-components suite (regression): 772 pass / 52 files
• Tree-shaking: built mp-tree-select chunk has 0 references to SortableController; the opt-in entries link it; both ./drag-drop and ./tree-select-reorder subpaths are in the package exports
• nx build green for web-components, ng-bootstrap (incl. nested tree-select/reorder secondary entry), react, vue, and the demo app

Not covered

The live pointer-drag DOM interaction (ghost/indicator/hit-testing) is covered by code + the geometry/keyboard unit tests, but not yet by a browser (Playwright) e2e — that path is hard to exercise in jsdom. Happy to add one as a follow-up.

Out of scope (follow-ups)

• Cross-list transferArrayItem drags; tree-node reorder/reparent in the dropdown panel
• Migrating dock/tile-manager/query-builder/scheduler onto the shared primitive

🤖 Generated with Claude Code

[gemini-code-assist]

Code Review

This pull request implements in-component chip reordering for the BsTreeSelect component using a new framework-agnostic, pointer-event-driven SortableController primitive, replacing the previous external Angular CDK workaround. The feedback identifies several critical improvements: adding a disabled callback to dynamically handle toggling the reorderable state, optimizing pointer-move performance by avoiding layout thrashing, ensuring the drag indicator inherits the host's theme color, correctly implementing the Escape key to cancel keyboard reordering, and removing redundant model updates in the Angular and Vue wrappers.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

When reorderable is dynamically toggled from true to false, the SortableController remains attached and active because it does not receive a disabled state. To fix this, add a disabled callback option to TreeSelectSortableOptions so the controller can dynamically check if reordering is active.

Suggested change

	export interface TreeSelectSortableOptions {
	items: () => readonly TreeNode[];
	itemId: (node: TreeNode) => string;
	onDrop: (event: { previousIndex: number; currentIndex: number }) => void;
	label?: (node: TreeNode) => string;
	announce?: (message: string) => void;
	}
	export interface TreeSelectSortableOptions {
	items: () => readonly TreeNode[];
	itemId: (node: TreeNode) => string;
	onDrop: (event: { previousIndex: number; currentIndex: number }) => void;
	label?: (node: TreeNode) => string;
	announce?: (message: string) => void;
	disabled?: () => boolean;
	}

[gemini-code-assist]

Pass the disabled callback to the sortable factory so that the underlying SortableController can dynamically disable its pointer and keyboard listeners when reorderable is set to false.

      this._sortableHandle = factory(this, {
        items: () => [...this._selected.values()],
        itemId: (node) => node.id,
        label: (node) => node.label,
        disabled: () => !this._reorderable,
        announce: (message) => this.announcer.announce(message),
        onDrop: ({ previousIndex, currentIndex }) => this.onReorderDrop(previousIndex, currentIndex),
      });

[gemini-code-assist]

Forward the disabled option from the registry options to the SortableController instance to ensure dynamic state changes are respected.

Suggested change

	const controller = new SortableController(host, {
	items: options.items,
	itemId: options.itemId,
	onDrop: options.onDrop,
	label: options.label,
	announce: options.announce,
	axis: 'both',
	});
	const controller = new SortableController(host, {
	items: options.items,
	itemId: options.itemId,
	onDrop: options.onDrop,
	label: options.label,
	announce: options.announce,
	disabled: options.disabled,
	axis: 'both',
	});

[gemini-code-assist]

Writing to this.ghost.style before calling getBoundingClientRect() on the list items causes a forced synchronous layout (layout thrashing) on every single pointermove event. Reordering these operations to read all layout properties first before writing style updates completely eliminates this performance bottleneck.

Suggested change

	private updateDrag(clientX: number, clientY: number): void {
	if (this.ghost) {
	this.ghost.style.left = `${clientX - this.grabOffsetX}px`;
	this.ghost.style.top = `${clientY - this.grabOffsetY}px`;
	}
	const others = this.itemElements().filter((el) => el !== this.sourceEl);
	const boxes = others.map((el) => el.getBoundingClientRect());
	this.dropIndex = resolveDropIndex(boxes, clientX, clientY, this.axis);
	this.positionIndicator(others, boxes);
	}
	private updateDrag(clientX: number, clientY: number): void {
	const others = this.itemElements().filter((el) => el !== this.sourceEl);
	const boxes = others.map((el) => el.getBoundingClientRect());
	this.dropIndex = resolveDropIndex(boxes, clientX, clientY, this.axis);
	if (this.ghost) {
	this.ghost.style.left = `${clientX - this.grabOffsetX}px`;
	this.ghost.style.top = `${clientY - this.grabOffsetY}px`;
	}
	this.positionIndicator(others, boxes);
	}

[gemini-code-assist]

Since the indicator is appended directly to document.body, using background: 'currentColor' means it will fall back to the body's text color instead of inheriting the host component's theme color or custom text color. Reading the computed color of the host element and applying it to the indicator ensures visual consistency across different themes.

Suggested change

	private buildIndicator(): HTMLElement {
	const el = document.createElement('div');
	el.className = 'mp-sortable-indicator';
	Object.assign(el.style, {
	position: 'fixed',
	zIndex: '2147483646',
	background: 'currentColor',
	pointerEvents: 'none',
	borderRadius: '1px',
	} satisfies Partial<CSSStyleDeclaration>);
	return el;
	}
	private buildIndicator(): HTMLElement {
	const el = document.createElement('div');
	el.className = 'mp-sortable-indicator';
	const hostColor = getComputedStyle(this.host).color;
	Object.assign(el.style, {
	position: 'fixed',
	zIndex: '2147483646',
	background: hostColor || 'currentColor',
	pointerEvents: 'none',
	borderRadius: '1px',
	} satisfies Partial<CSSStyleDeclaration>);
	return el;
	}

[gemini-code-assist]

The PRD states that the Escape key should cancel the keyboard reorder. However, the current implementation treats Escape exactly like Enter or M, committing the drop at the current position and announcing it as 'dropped'. Since the host array is mutated on every arrow key press, cancelling would require keeping track of the original index when grabbed and reverting the move if Escape is pressed.

[gemini-code-assist]

Since value-change is already fired on reorder drops and updates the form value/CVA via onValueChange, updating the value and calling onChange again in onReorder is redundant and triggers duplicate change detection cycles and form validations. onReorder should only emit the semantic reordered output.

  onReorder(event: Event): void {
    const detail = (event as CustomEvent<TreeSelectReorderEventDetail>).detail;
    this.reordered.emit(detail);
  }

[gemini-code-assist]

Updating model.value in onReorder is redundant because onValueChange already handles updating the model value for all selection and reordering changes. onReorder should only emit the reorder event.

function onReorder(ev: Event) {
  const detail = (ev as CustomEvent<TreeSelectReorderEventDetail>).detail;
  if (!detail) return;
  emit('reorder', detail);
}