peter
5bfcf5d83a
The app HAS a platform layer -- AnchoredPopover (22 importers, with arrows/typeahead/Escape/anchor-flip), QueryState (21), Modal (17), PageShell, DataTable, Tabs, Tooltip and ~26 more -- but it sat flat among ~160 feature components with nothing marking it as one. Several of those files describe themselves as 'the one place' or 'canonical' and were still bypassed by hand-rolled markup, because a layer nobody can see is a layer nobody uses; three separate inventory passes of this codebase misread it the same way. Moves the 33 domain-free modules into components/ui/, rewrites the imports in 89 files, and makes the boundary a lint rule rather than a convention: inside ui/ a one-level-up import (a feature component) and any lib/api slice are errors. The rule was verified to fire on both and to leave generic lib/ helpers alone. README.md states which side of the line a component belongs on and why. No behaviour change: 3x tsc, eslint, knip, prettier and 687 vitest tests all green; no backend file touched.
15 lines
955 B
TypeScript
15 lines
955 B
TypeScript
import { type ReactNode } from "react";
|
|
import { createPortal } from "react-dom";
|
|
|
|
// The app's overlay-root convention. Any full-screen or floating overlay renders THROUGH this so it
|
|
// escapes whatever ancestor stacking context it was declared in — a `mask-image`/`transform`/`filter`
|
|
// on the page scroller (or a rail's `backdrop-filter`) would otherwise trap a `fixed` child and let
|
|
// the chrome paint over it. That is the exact class of bug that buried the players in E3; the
|
|
// modal/player family already dodges it by portaling to <body>, and this makes that the one blessed
|
|
// way. Stacking among overlays is then decided by DOM order + the z-index token scale (tailwind
|
|
// `zIndex`), never by an ad-hoc magic number. Portals to <body> (the existing de-facto target).
|
|
export default function Overlay({ children }: { children: ReactNode }) {
|
|
if (typeof document === "undefined") return null;
|
|
return createPortal(children, document.body);
|
|
}
|