@jsenv/navi 0.29.177 → 0.29.178

package/docs/css_architecture.md

@@ -560,28 +560,25 @@ from the app. Two reasons:
   that knob, so a popup that genuinely needs its own `maxWidth` can still say so
   without any of them escaping the app's screen.
 
-##### Current limitations
+##### Placement follows the same rectangle
 
-`--navi-app-max-width` caps how big a popup may get; it does not move where one
-is placed. Placement is still computed against the real viewport
-(`pickPositionRelativeTo`, in `@jsenv/dom`). That is invisible for anything
+`--navi-app-max-width` moves where a popup is placed, not only how big it may
+get. Placement is computed against the visual viewport narrowed to the app's
+own rectangle: navi hands the centered bands to `@jsenv/dom` once
+(`setPlacementViewportInsets`, wired in `navi_css_vars.js`), and
+`pickPositionRelativeTo` reads them on every placement. Invisible for anything
 centered on its cross axis — `center`, `bottom`, `top`, which is what a dialog
-does nearly always — but shows for anything anchored to an edge: a
-`positionArea` like `bottom-start`, a `SidePanel`. Those sit against the
-window's edge rather than the app column's, so they stay on the real viewport
-for now (`side_panel.jsx` restates `--dialog-maxmax-width` as the full viewport
-on purpose).
-
-`FixedBar` is the exception, and shows the shape of the fix: it is pinned to
-`--navi-app-inset-*` (see `docs/safe_area.md`), which describes where the app's
-rectangle is in the window rather than how wide it may be. Making the rest
-follow means narrowing the container rect placement is computed against, inside
-`pickPositionRelativeTo`, to that same rectangle.
-
-Note that an app can already get all of it, placement included, by rendering
-itself in an iframe of the target width: the viewport then genuinely _is_ the
-app's screen and no token is needed at all. `--navi-app-max-width` is the answer
-for an app that does not want to pay that price.
+does nearly always — but it is what puts anything anchored to an edge (a
+`positionArea` like `bottom-start`, a `SidePanel`) flush against the app
+column's edge rather than the window's. `FixedBar` reads the same description
+through CSS instead: it is pinned to `--navi-app-inset-*` (see
+`docs/safe_area.md`), which says where the app's rectangle is in the window
+rather than how wide it may be.
+
+Note that an app can also get all of it by rendering itself in an iframe of
+the target width: the viewport then genuinely _is_ the app's screen and no
+token is needed at all. `--navi-app-max-width` is the answer for an app that
+does not want to pay that price.
 
 ### 3. Direct rule override (avoid unless necessary)
 

package/docs/safe_area.md

@@ -151,11 +151,14 @@ _sizes_ must fit what is actually visible.
 and turns the bottom bar's number red when it goes under the keyboard. On a
 phone; a desktop has no keyboard to open.
 
-## Current limitation
-
-Popup **placement** does not follow level 1 yet: `pickPositionRelativeTo` (in
-`@jsenv/dom`) still computes against the real viewport. Invisible for anything
-centered on its cross axis — which is what a dialog does nearly always — but a
-`positionArea` like `bottom-start` or a `SidePanel` sits against the window's
-edge rather than the app column's. See "Current limitations" in
+## Placement follows level 1
+
+Popup **placement** answers to the level-1 rectangle too: `getAppInsets`
+(`src/layout/responsive.js`) is the JS reading of the level-1 bands, and
+`pickPositionRelativeTo` (in `@jsenv/dom`) computes against the visual
+viewport narrowed by them (`setPlacementViewportInsets`, wired in
+`navi_css_vars.js`). Invisible for anything centered on its cross axis —
+which is what a dialog does nearly always — but it is what puts a
+`positionArea` like `bottom-start` or a `SidePanel` against the app column's
+edge rather than the window's. See "Placement follows the same rectangle" in
 `css_architecture.md`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/navi",
-  "version": "0.29.177",
+  "version": "0.29.178",
   "type": "module",
   "description": "Library of components including navigation to create frontend applications",
   "repository": {
@@ -29,7 +29,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@jsenv/dom": "0.17.43",
+    "@jsenv/dom": "0.17.44",
     "@jsenv/humanize": "1.7.8",
     "@jsenv/validity": "0.4.3"
   },