Add shared UI package and hierarchical list

[FBalint]

Summary

This is the foundation PR for shared hierarchical navigation. It introduces the reusable UI layer and component without adopting it in an application yet.

Shared UI package

• add the private, source-exported @gadgets/ui workspace package for runtime UI shared by the Workshop and gatekeeper management apps
• keep React and Kumo as peer dependencies so consumers share one runtime and design-system instance
• add package-level TypeScript and Vitest configuration, root and subpath exports, ownership guidance, and lockfile entries

Hierarchical list

• add a headless HierarchicalListPrimitive that recursively renders semantic nested lists while leaving row presentation to the consumer
• support controlled or uncontrolled expansion, forced expand-all behavior, consumer-controlled selection, selection clearing, and custom structural/rendering slots
• add the Kumo HierarchicalList adapter using Kumo controls and tokens, Phosphor icons, and Motion-powered insertion indicators and drag previews
• support desktop context menus and configurable narrow-screen action drawers opened by touch long press
• support native mouse dragging and touch-pointer dragging, optional edge auto-scroll, root/sibling/folder insertion, post-removal index normalization, and rejection of self/descendant moves
• support Arrow Up/Down focus movement and accessible Alt+Arrow reordering, indenting, and unindenting for draggable rows
• preserve focus after consumer-applied moves and announce successful moves through a polite live region
• expose item flags for draggable and droppable behavior while leaving tree mutation in the consuming application

Frontend conventions

• define @gadgets/ui as the shared runtime UI ownership boundary while keeping Kumo as the primitive and token foundation
• add repository guidance for feature-oriented organization, component APIs, React effects/state, styling, accessibility, and behavior-focused tests
• add the frontend-conventions skill with the full conventions for React work under packages/
• add package-specific guidance for source exports, peer dependencies, Tailwind source scanning, and the headless-primitive/Kumo-adapter split

Scope

• this PR adds the package and reusable component only; application adoption follows separately
• consumers continue to own selected state and applying onMove results to their tree data

Testing

• pnpm --filter @gadgets/ui test:run (33 tests)
• pnpm install --lockfile-only --frozen-lockfile

---

[github-actions]

Preview: pr484-hierarchical-bf6262bd

https://pr484-hierarchical-bf6262bd-router.cloudflare-os-previews.workers.dev

Dashboard · deleted when this PR closes

[ask-bonk]

• High useHierarchicalListRowInteractions.ts:189: Invalid Alt+ArrowLeft/Right moves do not prevent browser history navigation.
• High HierarchicalList.tsx:153: Narrow layouts remove the context-menu trigger, leaving actions inaccessible to mouse and keyboard users.
• Medium HierarchicalListPrimitive.tsx:355: Focus restoration clears before deferred/transitioned consumer moves apply, so focus can be lost.
• Low HierarchicalList.tsx:127: Truthiness checking hides valid metadata such as numeric 0.

github run

[ask-bonk]

Posted 6 actionable inline findings. Tests and TypeScript checks pass.

github run

[ask-bonk]

Posted 3 actionable inline findings. CI checks pass.

github run

[ask-bonk]

• [P2] Announce moves only after success HierarchicalListPrimitive.tsx:355: A rejected onMove promise still announces that the item moved. Delay the success announcement until resolution or confirmed tree movement.

• [P2] Scope synthetic drop events to the originating list HierarchicalListDragAndDrop.tsx:219: Releasing a touch drag over an unrelated drop zone dispatches a synthetic drop to it, potentially triggering unrelated actions.

• [P2] Clear drag state when the source disappears HierarchicalListPrimitive.tsx:372: If items change mid-drag and remove the source, its end handler unmounts while draggedItem and previews remain active. Reconcile drag state with current items and disabled DnD.

github run

[ask-bonk]

Posted 3 actionable inline findings. No additional findings.

github run

[ask-bonk]

Posted 6 actionable inline findings.

github run

[ask-bonk]

• [P2] Add packages/ui/**/*.{ts,tsx} to the React/JSX accessibility lint override at vite.config.ts:103; currently shared UI bypasses those checks.

Posted 5 additional inline findings.

github run

[ask-bonk]

Posted 4 actionable inline findings.

github run

[ask-bonk]

Posted 4 actionable inline findings.

github run

[ask-bonk]

@FBalint Bonk workflow failed. Check the logs for details.

View workflow run · To retry, trigger Bonk again.

[ask-bonk]

• [P2] HierarchicalListPrimitive.tsx:342 Scope focused-row lookup to this list. A touch drag can steal focus from another list containing the same item ID.
• [P2] HierarchicalListPrimitive.tsx:363 Overlapping async moves overwrite pending focus restoration. If the newer move rejects and the older succeeds, focus is lost.
• [P2] useHierarchicalListRowInteractions.ts:117,142 Interactive descendants trigger row long-press and click behavior. Clicking or holding an input/button can unexpectedly select the row or open actions.
• [P2] HierarchicalList.tsx:191 Clear openActions when an item or its actions disappear. Restoring them currently remounts the menu already open, potentially at (0,0).

Tests were not run because pnpm is unavailable in the runner.

github run