Skip to content

refactor(ui): move floating selectors and menus to Astryx - #1673

Merged
Astro-Han merged 8 commits into
mainfrom
refactor/1565-floating-controls
Jul 31, 2026
Merged

refactor(ui): move floating selectors and menus to Astryx#1673
Astro-Han merged 8 commits into
mainfrom
refactor/1565-floating-controls

Conversation

@Astro-Han

@Astro-Han Astro-Han commented Jul 30, 2026

Copy link
Copy Markdown
Contributor

Summary

Refs #1565.

This is the first half of logical PR 6. It moves Select/Combobox and Menu to Astryx as the single behavior and styling authority while preserving the append-only @maka/ui surface.

  • Migrates renderer and shared-UI consumers onto the closest Astryx selector and menu seams.
  • Removes replaced Base UI recipes, portal/z-index patches, and obsolete product CSS.
  • Keeps product-owned state and data shaping local to Maka.
  • Preserves native trigger layout through Astryx icon/end-content slots.
  • Keeps model-picker active-descendant state aligned with rendered filtered options and scrolls keyboard highlights into the bounded list viewport.
  • Lets menus close and restore their trigger before product actions mount a confirmation dialog.
  • Keeps native light-dark() values through the Electron 43 / Chrome 150 CSS target so scoped theme focus rings remain valid.
  • Keeps panel-switching Tabs on the existing Base UI primitive: Astryx TabList is a navigation seam (nav + aria-current), not a tablist/tab/tabpanel seam.

The Dialog/AlertDialog/Toast half remains stacked as #1674 because both halves touch the same consumer files.

Verification

  • npm run format:check
  • npm run lint
  • npm run build:test && npm run typecheck
  • npm --workspace @maka/ui test — 283 passed
  • npm --workspace @maka/desktop test — 2,967 passed; console/a11y/copy checks clean
  • npm --workspace @maka/desktop run build:with-deps
  • npx playwright test --config e2e/playwright.config.ts e2e/floating-layers.spec.ts e2e/permission-mode-surface.spec.ts e2e/sidebar-navigation.spec.ts e2e/topbar-overflow.spec.ts — 11 passed
  • node scripts/check-visual-contract.mjs --against origin/main --scopes scripts/visual-contract-scopes/pr6-floating-controls.json — 20 comparisons clean
  • npm run check:hit-test — 5 routes clean
  • npm --workspace @maka/desktop run build-storybook
  • npm --workspace @maka/desktop run smoke:storybook — 26 render/play checks passed
  • Full npm test was also attempted: scripts, UI, Desktop, and Storage passed; the unrelated Runtime Host timing test startup failure uses the active shutdown deadline without releasing ownership failed under existing stale Host test processes. Remote CI is the merge authority.

Root cause

The migration originally treated API-shape compatibility as sufficient. The real contract is semantic ownership: rendered option identity, event ordering, focus ownership, ARIA roles, viewport bounds, and scoped CSS evaluation must remain coherent across the whole interaction.

Two review findings exposed that boundary directly:

  • Astryx TabList solves navigation, so using it for same-page panels erased required tab semantics. The smallest correct fix is to retain the existing semantic owner instead of building an adapter that imitates another primitive.
  • The model list inherited a Floating UI custom property that Astryx never defines, invalidating the entire max-height declaration. A real local viewport bound plus nearest-item scrolling restores the single invariant: the active option is visible.

Review focus

  • One Astryx behavior/focus/layer authority per migrated selector or menu; no Base UI/Astryx nesting.
  • Base UI remains only where it still owns a distinct semantic contract, notably panel tabs.
  • Maka retains only product-specific state, grouped model data, event-order bridging, and stable compatibility exports.
  • Visual declarations are component-bounded and anchored by stable contract hooks.

@Astro-Han
Astro-Han force-pushed the refactor/1565-floating-controls branch from 0871f48 to 9b4b53e Compare July 31, 2026 03:08
@Astro-Han Astro-Han changed the title refactor(ui): move floating controls to Astryx refactor(ui): move floating selectors and menus to Astryx Jul 31, 2026
@Astro-Han
Astro-Han force-pushed the refactor/1565-floating-controls branch from 9b4b53e to 8a3d8ab Compare July 31, 2026 03:54
@Astro-Han
Astro-Han marked this pull request as ready for review July 31, 2026 04:03
@Astro-Han
Astro-Han merged commit 7981bd6 into main Jul 31, 2026
3 checks passed
@Astro-Han
Astro-Han deleted the refactor/1565-floating-controls branch July 31, 2026 04:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant