@jsenv/navi 0.29.377 → 0.29.379

package/dist/dev/jsenv_navi.js

@@ -45318,6 +45318,10 @@ time.navi_text {
     border-radius: inherit;
   }
 
+  &[data-text-clamp] {
+    min-width: 0;
+  }
+
   &[data-text-overflow] {
     text-overflow: ellipsis;
     overflow-wrap: normal;
@@ -45691,6 +45695,10 @@ const shouldInjectSpacingBetween = (left, right) => {
  *   n lines. This is the only prop to use for that — `Box`'s `lineClamp` /
  *   `overflowEllipsis` are raw CSS mappings meant for elements that are not a
  *   `Text`, and `lineClamp={1}` is never the single-line truncation you want.
+ *   Either value states the `white-space` it needs — one line does not wrap,
+ *   n lines may — so it holds inside a single-line ancestor too (a `Picker`'s
+ *   value, a `Time`); an explicit `noWrap`/`pre`/`preLine` on this `Text`
+ *   still wins.
  *   Truncation only happens if the element may become narrower than its
  *   content: `maxLines` sets `min-width: 0` here, but each `Box` between this
  *   one and the element that carries the width must set it too.
@@ -45753,6 +45761,25 @@ const shouldInjectSpacingBetween = (left, right) => {
  *   internally for overlays such as the skeleton container.
  */
 const Text = props => {
+  if (props.maxLines > 1) {
+    props = {
+      ...props,
+      "data-text-clamp": ""
+    };
+    if (!saysWhiteSpace(props)) {
+      // n lines means "you may wrap". white-space is inherited, so left unsaid
+      // a single-line ancestor (a Picker's value, a Time) leaves the clamp one
+      // line to cut, and the text runs past its box. Same tag rule as
+      // TextOverflow: a paragraph keeps its line breaks.
+      props = props.as === "p" ? {
+        ...props,
+        preLine: true
+      } : {
+        ...props,
+        noWrap: false
+      };
+    }
+  }
   if (props.loading || props.skeleton) {
     return jsx(TextSkeleton, {
       ...props
@@ -45964,6 +45991,14 @@ const TextOverflow = ({
     children: children
   });
 };
+const saysWhiteSpace = ({
+  noWrap,
+  pre,
+  preWrap,
+  preLine
+}) => {
+  return noWrap !== undefined || pre !== undefined || preWrap !== undefined || preLine !== undefined;
+};
 const TextWithSelectRange = ({
   ref,
   selectRange,
@@ -60001,9 +60036,11 @@ const TimeRelative = ({
   });
 };
 const TimeText = props => {
+  // A date stays on one line, unless the caller grants it several.
+  const noWrap = props.maxLines > 1 ? undefined : true;
   return jsx(Text, {
     as: "time",
-    noWrap: true,
+    noWrap: noWrap,
     ...props
   });
 };
@@ -61244,6 +61281,10 @@ const ROOT_ATTRIBUTE = "data-navi-popup-lift";
 // What the two boxes are to each other (Dialog's `lift`: "box" | "scene"),
 // worn by the root too — it decides how each picture sits in the moving box.
 const KIND_ATTRIBUTE = "data-navi-popup-lift-kind";
+// Worn by the root when the two pictures fit the moving box the whole way
+// (see picturesFitTheBox): the box's edge then has nothing to cut but the
+// pictures' own ink — a halo, a shadow — and the CSS lets it through.
+const FIT_ATTRIBUTE = "data-navi-popup-lift-fit";
 // The one node that IS the anchor once in front: the popup itself, or a node
 // inside it.
 const TARGET_SELECTOR = "[data-lift]";
@@ -61363,6 +61404,7 @@ const liftPopupFromAnchor = (
     giveBackNameArriving?.();
     root.removeAttribute(ROOT_ATTRIBUTE);
     root.removeAttribute(KIND_ATTRIBUTE);
+    root.removeAttribute(FIT_ATTRIBUTE);
     root.style.removeProperty(DURATION_PROPERTY);
     root.style.removeProperty(BORDER_RADIUS_PROPERTY);
     root.style.removeProperty(BACKGROUND_COLOR_PROPERTY);
@@ -61374,7 +61416,7 @@ const liftPopupFromAnchor = (
     releaseScrollHold?.();
     releaseScrollHold = trapScrollInside(popupEl, { backdrop: true });
     const room = measureRoomBetweenBars();
-    const boxLeaving = room ? elementLeaving.getBoundingClientRect() : null;
+    const boxLeaving = elementLeaving.getBoundingClientRect();
     let boxArriving = null;
     let cornersArriving = null;
     const viewTransition = startViewTransition(async () => {
@@ -61392,8 +61434,9 @@ const liftPopupFromAnchor = (
       if (elementArriving) {
         giveBackNameArriving = wearLiftName(elementArriving);
         cornersArriving = readCorners(elementArriving);
-        if (room) {
-          boxArriving = elementArriving.getBoundingClientRect();
+        boxArriving = elementArriving.getBoundingClientRect();
+        if (picturesFitTheBox(lift, boxLeaving, boxArriving)) {
+          root.setAttribute(FIT_ATTRIBUTE, "");
         }
       }
     });
@@ -61697,6 +61740,30 @@ const animateMovingBox = ({ cornersFrom, cornersTo, room, boxFrom, boxTo }) => {
   });
 };
 
+// Whether both pictures fit the moving box from one end to the other. The
+// box's clip (dialog.jsx) is its edge for a picture larger than the box: what
+// a card gaining room uncovers, what a scene shows past the band cut from it.
+// Under "box" each picture keeps its own size, so both fit only when the two
+// boxes are the same size; under "scene" both are drawn as wide as the box
+// and centred, so they fit when the two boxes have the same aspect ratio —
+// each picture, drawn at the other box's width, is then that box's height.
+// A picture's ink past its own box (a halo, a shadow) is not content the clip
+// is there to cut, so when they fit, the clip is lifted.
+const picturesFitTheBox = (lift, boxFrom, boxTo) => {
+  if (lift === "scene") {
+    const heightFromAtWidthTo = (boxTo.width * boxFrom.height) / boxFrom.width;
+    const heightToAtWidthFrom = (boxFrom.width * boxTo.height) / boxTo.width;
+    return (
+      Math.abs(heightFromAtWidthTo - boxTo.height) < 1 &&
+      Math.abs(heightToAtWidthFrom - boxFrom.height) < 1
+    );
+  }
+  return (
+    Math.abs(boxFrom.width - boxTo.width) < 1 &&
+    Math.abs(boxFrom.height - boxTo.height) < 1
+  );
+};
+
 const insetToRoom = (room, box) =>
   `inset(${room.top - box.top}px ${box.right - room.right}px ${box.bottom - room.bottom}px ${room.left - box.left}px)`;
 
@@ -62345,6 +62412,12 @@ const css$E = /* css */`
        the box, and a change of width would read as the same card zooming
        then swapping.
 
+       A picture holds the element's ink past its own box too — a halo, a
+       shadow — and the clip cuts that along with the content, at the box's
+       corners. When both pictures fit the box the whole way (popup_lift.js,
+       picturesFitTheBox) there is no content to uncover, only ink to lose:
+       the clip is lifted and the box carries its ink along.
+
        The box paints what the lifted card paints behind its content
        (published by popup_lift.js): where it has grown past the picture it
        carries, it is the card that has grown. Its corners are those of the
@@ -62362,6 +62435,9 @@ const css$E = /* css */`
       block-size: auto;
       inline-size: auto;
     }
+    &[data-navi-popup-lift-fit]::view-transition-image-pair(navi-popup-lift) {
+      overflow: visible;
+    }
 
     /* The card leaves as itself and arrives as what it became: the picture
        being left stays whole for most of the way, the arriving one only shows
@@ -76389,6 +76465,12 @@ const PickerFirstResolver = props => {
  *   press, the way a click is the innermost target's. Being a gesture, the open goes through
  *   the interaction gate as one: a `readOnly` picker refuses it and says so
  *   where the finger is, whatever `openWhileReadOnly` says.
+ * @param {number} [maxLines=1] How many lines the value may take before it is
+ *   cut with an ellipsis — `Text`'s `maxLines`, put on the value box, and
+ *   granted to a `BadgeList` in the `ui`, which caps its rows to it (see
+ *   max_lines_context.js). `variant="text"` and `variant="bare"` are not
+ *   clamped: their drawing is the caller's own, a `Text` in the `ui` cuts
+ *   itself with its own `maxLines`. See docs/typography.md.
  * @param {import("ignore:preact").ComponentChildren | "default" | import("ignore:preact").ComponentType} [ui] What the
  *   trigger draws in place of the value's default rendering (a date, a list
  *   joined by commas…) — and then all it draws: `placeholder` is not shown
@@ -78160,13 +78242,7 @@ const renderDayDefault = (day, {
   type: "date",
   format: format,
   dayLabel: true,
-  lang: lang
-  // A Time keeps its date on one line by default; here a day too long for
-  // the box is meant to wrap, so that is undone — except for maxLines={1},
-  // which IS one line and cuts it itself (see Text's own TextOverflow):
-  // saying "you may wrap" there would undo the truncation instead.
-  ,
-  noWrap: maxLines === 1 || maxLines === "1" ? undefined : false,
+  lang: lang,
   maxLines: maxLines,
   children: day
 });