@jsenv/navi 0.29.322 → 0.29.324

package/docs/AI_INSTRUCTIONS.md

@@ -159,11 +159,13 @@ to start when unsure which export solves a problem.
   `triggerNaviCommand` as the last resort, with the event forwarded and never
   invented; opening ON something; a press that opens and acts is a `Picker`,
   and its trigger wears the wait and the error (a card that lifts, `openOn`);
-  Escape cancels; the close cross; a popup that loads data. Read before passing
-  `open`, calling `triggerNaviCommand`, or writing a close button.
+  Escape cancels; the close cross; one panel fed by a slot (`createSlot`,
+  `open={isFilled}`); a popup that loads data. Read before passing `open`,
+  calling `triggerNaviCommand`, or writing a close button.
 - `popup_backdrop.md` — three independent questions: a wall or not
   (`backdrop={false}`), what an outside press does, how far the page withdraws;
-  `data-navi-popup-outside`. Read before writing CSS for a backdrop.
+  `data-navi-popup-outside`, and `data-navi-popup-inside` for a box of the
+  page whose press is not a dismissal. Read before writing CSS for a backdrop.
 - `dialog_shape.md` — bounds rather than a width, the container ceiling, the
   centered box versus the bottom sheet, `marginWithContainer`. Read before
   deriving `smallTouchScreenSignal` in an app or writing CSS to make a dialog

package/docs/popup_backdrop.md

@@ -167,6 +167,37 @@ Navi does not warn about a marked container: the column whose gaps must not
 dismiss and the row whose sides must are the same box from the outside, and
 only the caller knows which one it wrote.
 
+### A box of the page that is not outside
+
+`data-navi-popup-inside` is the other direction: a box of the page the caller
+says belongs to a popup, so that a press on it is not outside that popup even
+though it lies beyond the border box. A board with one panel for all its cards
+is the case: pressing another card is what changes what the panel shows, and a
+panel that closes on that press then reopens on the click that follows is a
+panel meant to stay open, blinking.
+
+```jsx
+<SidePanel id="error_panel" closeOnClickOutside backdrop={false} open={isFilled}>
+  …
+</SidePanel>
+
+<Box data-navi-popup-inside="error_panel" interactions={{ click: openCard }}>
+  …
+</Box>
+```
+
+The value names the popup by `id`, the way `commandfor` does, and the exemption
+is that popup's alone: a menu open beside the board still closes when a card is
+pressed. Several popups are named with a space between the ids.
+
+Unlike the outside marker, this one answers for its whole subtree: the outside
+marker carves free space out of a surface whose controls stay surface, this one
+adds a whole thing to the popup's ground — the card, its count, its buttons —
+and nothing in it is a dismissal.
+
+It reads a press the page hears, so it belongs with a popup that has no wall
+(`backdrop={false}`, or a popover): behind a wall, no card is pressable.
+
 ### `pointer-events: none` and `inert` are not this
 
 Neither says "this is backdrop", and reaching for them here is the natural

package/docs/popup_open.md

@@ -862,6 +862,19 @@ changes. A popup is open on exactly one value: what varies while it is open (a
 tab inside it) is a param of its own, see
 [navigation.md](./navigation.md#places-inside-the-layer).
 
+The other way round — ONE sheet showing whichever card the address names — is
+the same signal with no `value`: a popup without one reads anything the signal
+holds as open, except `false`, `null` and `undefined`. The panel's content reads
+the id from the signal, a card's press writes it, and the popup never writes
+over it: opening writes `true` only into a signal that reads closed, closing
+writes `undefined` (or `false`, where the signal held `true`).
+
+```jsx
+<SidePanel signal={errorOpenSignal} side="right">
+  <ErrorPanel /> {/* reads errorOpenSignal.value to know which card */}
+</SidePanel>
+```
+
 ### `navState` — the history entry holds it
 
 ```jsx
@@ -899,6 +912,38 @@ afterwards. `defaultOpen="interaction"` means the mount _is_ the opening (the
 entrance animation plays); any other truthy value means it was already open when
 the page appeared (no entrance).
 
+### One panel, fed by a slot
+
+A board with a detail pane wants one panel that stays open as long as something
+asks to be shown in it, and whose content changes from one card to the next
+without the panel closing and reopening. That is `open` driven by a slot:
+`createSlot(Renderer)` keeps the renderer mounted whether or not anything fills
+it, and hands it `isFilled`.
+
+```jsx
+const Panel = ({ isFilled, children }) => (
+  <SidePanel
+    open={isFilled}
+    onClose={() => {
+      openCardIdSignal.value = null;
+    }}
+  >
+    {children}
+  </SidePanel>
+);
+const [PanelSlot, PanelSlotFill] = createSlot(Panel);
+```
+
+`<PanelSlot />` sits once at the board level; the open card renders a
+`<PanelSlotFill>` holding what the panel shows. The slot holds one filler, the
+last to render: switching cards mounts the next fill in the render that unmounts
+the previous one, and the leaver, unmounting after, leaves the slot to the
+newcomer. `onClose` is the panel's own way out — the close cross, Escape, an
+outside press — and clears the state that renders the fill; the panel follows.
+A press on another card is not an outside press once the card names the panel
+with `data-navi-popup-inside` (see [popup_backdrop.md](./popup_backdrop.md)).
+The full example is `src/layout/demos/7_slot_demo.html`, "two side panels".
+
 ## A popup that loads data
 
 Being open is where the user is, and what a popup draws belongs to the screen

package/docs/scroll.md

@@ -346,10 +346,12 @@ sheet, a handful of tabs. A collection whose size the caller does not decide
 The run draws only the rows inside the **render window** — `renderBudget` of
 them, 100 by default — and holds the room of the others with fillers, so the
 scrollbar says how long the collection is and the DOM says how many rows fit a
-screen and some. The window slides as the user scrolls, and moves only when
-what is on screen nears one of its edges: a row crossed is not a window
-rebuilt. Below 30 the list warns, because a window shorter than a tall screen
-shows blank fillers under the last row.
+screen and some. The window slides as the user scrolls: it keeps three
+quarters of its spare rows ahead of the direction the user goes, and moves
+once those fall under half a screen — a row crossed is not a window rebuilt,
+and a row reached is never a blank one. So the budget has to exceed what the
+scroller shows at once, with room for that lookahead: the list warns below
+30, and when a budget leaves fewer than two rows beyond the screen.
 
 ### The first paint of a list that opens in a click
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/navi",
-  "version": "0.29.322",
+  "version": "0.29.324",
   "type": "module",
   "description": "Library of components including navigation to create frontend applications",
   "repository": {