@lotics/ui 46.2.0 → 46.3.0

package/src/page_header.tsx

@@ -1,9 +1,12 @@
 import { View } from "react-native";
 import { Text } from "@lotics/ui/text";
+import { Spacer } from "@lotics/ui/spacer";
 import { ReactNode } from "react";
 
 interface PageHeaderProps {
-  title: string;
+  /** The page's name. Optional only so the SHELL can delegate to this component
+   *  for a band that is description-only; a page header normally has one. */
+  title?: string;
   description?: string | null;
   /** The nav row ABOVE the title — breadcrumbs, a back control, row-level status. */
   left?: ReactNode;
@@ -60,7 +63,6 @@ export function PageHeader(props: PageHeaderProps) {
       style={{
         flexDirection: "row",
         alignItems: "center",
-        justifyContent: "space-between",
         flexWrap: "wrap",
         gap: 12,
       }}
@@ -74,9 +76,11 @@ export function PageHeader(props: PageHeaderProps) {
           minWidth: 0,
         }}
       >
-        <Text size="xxl" weight="semibold" style={{ flexShrink: 1, minWidth: 0 }}>
-          {title}
-        </Text>
+        {!!title && (
+          <Text size="xxl" weight="semibold" style={{ flexShrink: 1, minWidth: 0 }}>
+            {title}
+          </Text>
+        )}
         {/* Never shrinks: the title is what gives way, and a control squeezed
             below its own icon is not a smaller control, it is a broken one. */}
         {trailing !== undefined && <View style={{ flexShrink: 0 }}>{trailing}</View>}
@@ -84,8 +88,14 @@ export function PageHeader(props: PageHeaderProps) {
       {/* Wrapped so which side gives way is STATED rather than left to whatever
           the caller happened to pass. A bare `{actions}` inherited its own
           shrink behaviour, so the row's bargain held or broke depending on the
-          CTA — and a bargain that depends on the other party is not one. */}
-      {actions !== undefined && <View style={{ flexShrink: 0 }}>{actions}</View>}
+          CTA — and a bargain that depends on the other party is not one.
+          `marginLeft: auto` rather than the row's `justifyContent`, because
+          justification is applied PER LINE: once the row wraps, the second line
+          holds only the actions and `space-between` packs that one item at the
+          START, dropping the CTA to the left edge under the title on exactly the
+          narrow frame the wrap exists for. An auto margin right-aligns it on the
+          shared line and on a line of its own alike. */}
+      {actions !== undefined && <View style={{ flexShrink: 0, marginLeft: "auto" }}>{actions}</View>}
     </View>
   );
 
@@ -93,9 +103,45 @@ export function PageHeader(props: PageHeaderProps) {
     <View style={{ paddingBottom: 16 }}>
       {hasNav ? (
         <>
-          <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between", height: 64, paddingBottom: 16 }}>
-            {left}
-            {right}
+          {/* The SAME three facts as the title row, for the same reason — this
+              row is a pair of intrinsically-sized children too, and a
+              breadcrumb trail is exactly the kind of thing that outgrows a
+              narrow frame. `minHeight` rather than `height`: a fixed height
+              cannot absorb a wrap, so the row that most needs to grow was the
+              one forbidden to. */}
+          <View
+            style={{
+              flexDirection: "row",
+              alignItems: "center",
+              flexWrap: "wrap",
+              gap: 12,
+              minHeight: 64,
+              paddingBottom: 16,
+            }}
+          >
+            {/* `flexDirection: "row"` is not decoration: these wrappers RE-PARENT
+                what used to be a direct child of the row, and a react-native
+                `View` defaults to `column`. Both props are documented as taking
+                a nav row's worth of content — "breadcrumbs, a back control,
+                row-level status" — so a fragment of several nodes is the shape
+                they invite, and without the axis restated it lays out
+                top-to-bottom. A wrapper added to state a shrink rule must not
+                also silently state a direction. */}
+            <View style={{ flexDirection: "row", alignItems: "center", flexShrink: 1, minWidth: 0 }}>
+              {left}
+            </View>
+            {right !== undefined && (
+              <View
+                style={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                  flexShrink: 0,
+                  marginLeft: "auto",
+                }}
+              >
+                {right}
+              </View>
+            )}
           </View>
           {titleRow}
         </>
@@ -103,7 +149,10 @@ export function PageHeader(props: PageHeaderProps) {
         titleRow
       )}
       {!!description && (
-        <Text color="zinc-500">{description}</Text>
+        <>
+          {!!title && <Spacer size={8} />}
+          <Text color="zinc-500">{description}</Text>
+        </>
       )}
     </View>
   );

package/src/popover.tsx

@@ -23,6 +23,8 @@ import {
 } from "./popover_layers";
 import { PopoverNavContext, type PopoverNavContextValue } from "./popover_nav";
 import { useLoticsLocale } from "./locale";
+import { OVERLAY_Z } from "./overlay_layer";
+import { useScrollSeam } from "./use_scroll_seam";
 import { HeadingAltitudeContext } from "./heading_altitude";
 
 export type PopoverSide = "top" | "right" | "bottom" | "left";
@@ -269,6 +271,22 @@ export function PopoverContent(props: PopoverContentProps) {
   // inside it must not dismiss this popover. See popover_layers.ts.
   const modalsAtOpenRef = useRef<ReadonlySet<Element> | null>(null);
 
+  // THE SEAM EVERY SCROLLER THAT SWAPS ITS BODY IN PLACE TAKES.
+  //
+  // A routed popover is one: `PopoverScreen` renders `null` for every route but
+  // the active one, and the screens are children of THIS scroller — so
+  // navigating from a long root list to a sub-screen leaves the container at the
+  // list's offset and opens the sub-screen part-way down itself, its
+  // `PopoverNavHeader` and back chevron scrolled off the top. Same failure as a
+  // master-detail drawer's, in the kit's own navigation primitive.
+  //
+  // The route IS the content's identity, so it is read here rather than asked
+  // for: a popover with no sub-screens sits on the root route forever, its key
+  // never changes, and the seam is inert — which is exactly the opt-out
+  // `use_scroll_seam` defines.
+  const currentRoute = useContext(PopoverNavContext)?.currentRoute;
+  const bodySeam = useScrollSeam(currentRoute);
+
   const handleClose = useCallback(() => {
     if (!open) return;
     onOpenChange(false);
@@ -603,9 +621,6 @@ export function PopoverContent(props: PopoverContentProps) {
   if (!open) return null;
 
   const nestingLevel = getNestingLevel();
-  const baseZIndex = 9999;
-  const overlayZIndex = baseZIndex + nestingLevel * 2;
-  const contentZIndex = baseZIndex + nestingLevel * 2 + 1;
 
   return (
     // A popover is dialog-scale — a few hundred px with its own chrome — so a
@@ -630,7 +645,7 @@ export function PopoverContent(props: PopoverContentProps) {
               backgroundColor: "rgba(0, 0, 0, 0.5)",
               opacity: isBottomSheetShown ? 1 : 0,
               transition: "opacity 0.3s ease",
-              zIndex: overlayZIndex,
+              zIndex: OVERLAY_Z,
               pointerEvents: "auto",
             }}
             onClick={handleOverlayClick}
@@ -656,7 +671,15 @@ export function PopoverContent(props: PopoverContentProps) {
             backgroundColor: colors.background,
             boxShadow: colors.shadow,
             boxSizing: "border-box",
-            zIndex: contentZIndex,
+            // The kit's ONE overlay rung (`overlay_layer.ts`), shared with every
+            // react-native `Modal` — DOM order settles the tie, and DOM order is
+            // open order for all of them. A nested popover portals into the same
+            // host AFTER its parent; a page-level one is inside the app root,
+            // which every modal's body-level div follows; and one opened INSIDE
+            // an overlay portals into that overlay's own host. The scrim and the
+            // panel share the rung too: siblings in one container, panel written
+            // second.
+            zIndex: OVERLAY_Z,
             transition: small ? "transform 0.3s ease" : undefined,
             ...(small
               ? {
@@ -752,6 +775,7 @@ export function PopoverContent(props: PopoverContentProps) {
             // Horizontal only: the vertical padding is the gap to the header and
             // footer, which is a gap the reader wants.
             <ScrollView
+              {...bodySeam}
               style={[SCROLL_BODY, style]}
               contentContainerStyle={[SCROLL_BODY_CONTENT, contentContainerStyle]}
             >

package/src/skip_link.tsx

@@ -1,5 +1,6 @@
 import { Platform } from "react-native";
 import { colors } from "./colors";
+import { SKIP_LINK_Z } from "./overlay_layer";
 
 export interface SkipLinkProps {
   /** DOM id of the main region to jump to, e.g. `"main-content"`. */
@@ -29,7 +30,7 @@ export function SkipLink(props: SkipLinkProps) {
         color: colors.white,
         textDecoration: "none",
         borderRadius: 4,
-        zIndex: 10001,
+        zIndex: SKIP_LINK_Z,
         transform: "translateY(-200%)",
         transition: "transform 0.15s ease",
       }}

package/src/stacked_bar_chart.tsx

@@ -1,10 +1,11 @@
-import { useMemo } from "react";
+import { useMemo, type ReactNode } from "react";
 import { StyleSheet, View } from "react-native";
 import { colors } from "./colors";
 import { LegendItem } from "./legend_item";
 import { useLoticsLocale } from "./locale";
 import { SPACE } from "./spacing";
 import { Text } from "./text";
+import { TYPE_LEADING_TIGHT_DESKTOP, TYPE_LEADING_TIGHT_MOBILE } from "./type_ramp";
 import type { TextColor } from "./text_utils";
 
 export interface StackedBarSeries {
@@ -17,6 +18,20 @@ export interface StackedBarRow {
   key: string;
   /** The entity this row is about — a campaign, a depot, a month. */
   label: string;
+  /**
+   * That entity's own mark, before its name — a `BrandMark`, an `Avatar`, a
+   * status dot. A chart and a table over the SAME entities inside one card have
+   * to draw them the same way; without a slot the chart can only say the name in
+   * text, and one value ends up with two renderings a few hundred pixels apart.
+   *
+   * A slot rather than a widened `label`, following `Table`/`FileRow`: `label`
+   * is also this row's accessible name and the target of the two-line clamp, and
+   * a `ReactNode` there would lose both.
+   *
+   * The row's SERIES colours belong to the measure, so unlike a legend row this
+   * one carries no identity of its own until you give it one.
+   */
+  leading?: ReactNode;
   /** A neutral qualifier beside the label ("Đang chạy", "12 đơn"). */
   meta?: string;
   /** Per-series magnitudes, keyed by `StackedBarSeries.key`. Negatives are dropped. */
@@ -110,6 +125,9 @@ export function StackedBarChart(props: StackedBarChartProps) {
                   that also has to fit a status and a figure spends a narrow
                   container's width truncating exactly that. */}
               <View style={styles.head}>
+                {row.leading !== undefined ? (
+                  <View style={styles.leading}>{row.leading}</View>
+                ) : null}
                 <View style={styles.headText}>
                   <Text size="sm" weight="medium" numberOfLines={2} leading="tight">
                     {row.label}
@@ -181,6 +199,18 @@ const styles = StyleSheet.create({
     minWidth: 0,
     gap: 1,
   },
+  // The mark centres on the LABEL'S OWN LINE BOX, not on the head — a row that
+  // also carries `meta` is two lines tall, and centring on the head would drift
+  // the mark down between them for that row only. Giving the slot the line box's
+  // height and centring inside it lands any mark on the first line whatever the
+  // mark's size, so a dot and a 24px avatar both sit right without either being
+  // measured. `sm` is the same box at both breakpoints; the max is what keeps
+  // that from being an assumption.
+  leading: {
+    height: Math.max(TYPE_LEADING_TIGHT_MOBILE.sm, TYPE_LEADING_TIGHT_DESKTOP.sm),
+    justifyContent: "center",
+    flexShrink: 0,
+  },
   // The track is the SHARED ruler; the fill is this row's share of it, and the
   // segments split the fill. Three boxes, because collapsing the middle one is
   // exactly how a stacked bar loses its scale.

package/src/text.tsx

@@ -162,6 +162,21 @@ export function Text(props: TextProps) {
         decoration && styles[decoration],
         tabular && styles.tabular,
         transform && styles[transform],
+        // A CLAMP THAT CANNOT SHRINK CANNOT CLAMP. `numberOfLines` says "cut this
+        // to fit", and on a flex row neither platform lets it: on web a clamped
+        // Text is `white-space: nowrap`, so its min-content width is the WHOLE
+        // string and `min-width: auto` floors it there; on native a `Text` is
+        // `flexShrink: 0` (unlike the web, where 1 is the CSS default), so it
+        // holds its full width outright. Either way two labelled values on one
+        // row lay out at intrinsic width and run off the frame — measured at
+        // x=790 in a 390px frame, with no page scroll to reach it.
+        //
+        // Both halves are needed because each fixes one platform, and both are
+        // NO-OPS unless the row actually overflows: flex-shrink only acts on
+        // negative free space. It sits before the caller's `style`, so a value
+        // that must never give way still says so — `flexShrink: 0` on the site
+        // that means it, which is how a figure keeps winning over its label.
+        numberOfLines != null && styles.clamped,
         style,
       ]}
       numberOfLines={numberOfLines}
@@ -259,6 +274,12 @@ const styles = StyleSheet.create({
     fontVariant: ["tabular-nums"],
   },
 
+  /** The pair a `numberOfLines` clamp needs to mean anything on a flex row. */
+  clamped: {
+    minWidth: 0,
+    flexShrink: 1,
+  },
+
   // Text transform styles
   uppercase: {
     textTransform: "uppercase",

package/src/tooltip.tsx

@@ -1,5 +1,6 @@
 import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
+import { OVERLAY_Z_ABOVE } from "./overlay_layer";
 import { colors } from "./colors";
 import { Text } from "./text";
 
@@ -51,7 +52,7 @@ export function TooltipProvider({ children }: { children: React.ReactNode }) {
     container.style.width = "100%";
     container.style.height = "100%";
     container.style.pointerEvents = "none";
-    container.style.zIndex = "10000";
+    container.style.zIndex = String(OVERLAY_Z_ABOVE);
     document.body.appendChild(container);
 
     setPortalContainer(container);

package/src/use_change_set.ts

@@ -39,22 +39,52 @@ export interface ChangeSet<Id extends string = string> {
   settled: boolean;
 }
 
-export interface UseChangeSetOptions {
+export interface UseChangeSetOptions<Id extends string = string> {
   /**
    * What an untouched proposal counts as. Default `accepted`: the operator
    * drops the exceptions rather than approving each of eight identical lines,
    * which is the difference between a review and a second round of data entry.
    * Use `pending` when each change genuinely deserves its own verdict — and
    * gate the commit on `settled`.
+   *
+   * **A MAP when one set mixes kinds with different safe defaults** — filling a
+   * blank arrives `accepted` while overwriting a value a human already set
+   * arrives `rejected`, so the destructive half is opt-in. An id the map does
+   * not name arrives `accepted`. Deciding those rows by calling `reject()` from
+   * the result handler instead writes overrides the operator never made, and
+   * `undo` on such a row then returns it to `accepted` rather than to the safe
+   * default it was supposed to arrive at.
+   *
+   * A VALUE and not a predicate, so the default is a dependency like any other:
+   * `status` and the group arrays are derived from it together and change
+   * identity together when it changes. The caller closes over its own rows to
+   * build it (`useMemo` over the same rows it already has), which is what keeps
+   * this hook ignorant of what a proposal IS. A predicate written inline is a
+   * new function every render, so it can only be honoured by hiding it from the
+   * dependency lists — and a `status` that never changes identity is a `status`
+   * a memoizing screen reads once and then never again, which is the row
+   * rendering as kept while the commit bar counts it as dropped.
    */
-  initial?: ChangeDecision;
+  initial?: ChangeDecision | ReadonlyMap<Id, ChangeDecision>;
+}
+
+/** The default for one id: the whole set's decision, or the map's entry for it,
+ *  or `accepted` for an id nobody named. */
+function defaultFor<Id extends string>(
+  initial: ChangeDecision | ReadonlyMap<Id, ChangeDecision> | undefined,
+  id: Id,
+): ChangeDecision {
+  if (initial === undefined) return "accepted";
+  if (typeof initial === "string") return initial;
+  return initial.get(id) ?? "accepted";
 }
 
 export function useChangeSet<Id extends string = string>(
   ids: readonly Id[],
-  options?: UseChangeSetOptions,
+  options?: UseChangeSetOptions<Id>,
 ): ChangeSet<Id> {
-  const initial = options?.initial ?? "accepted";
+  const initial = options?.initial;
+
   const [overrides, setOverrides] = useState<ReadonlyMap<Id, ChangeDecision>>(new Map());
 
   const set = useCallback((id: Id, decision: ChangeDecision) => {
@@ -79,21 +109,40 @@ export function useChangeSet<Id extends string = string>(
     [ids],
   );
 
-  const status = useCallback((id: Id) => overrides.get(id) ?? initial, [overrides, initial]);
-
-  const groups = useMemo(() => {
+  // ONE derivation, feeding BOTH readers of the same fact.
+  //
+  // Deriving the groups and `status` separately is what split them: they read
+  // the same three inputs twice, and the moment one of those inputs was kept out
+  // of a dependency list the two answered differently — `status(id)` said
+  // "rejected" while `accepted`, `keptCount` and the commit still carried the
+  // row. One memo over the same deps cannot do that. There is nothing expensive
+  // here either way: it is one pass over ids, the same pass `status` used to
+  // make per call.
+  const derived = useMemo(() => {
+    const decisions = new Map<Id, ChangeDecision>();
     const accepted: Id[] = [];
     const rejected: Id[] = [];
     const pending: Id[] = [];
     for (const id of ids) {
-      const s = overrides.get(id) ?? initial;
-      if (s === "accepted") accepted.push(id);
-      else if (s === "rejected") rejected.push(id);
+      const decision = overrides.get(id) ?? defaultFor(initial, id);
+      decisions.set(id, decision);
+      if (decision === "accepted") accepted.push(id);
+      else if (decision === "rejected") rejected.push(id);
       else pending.push(id);
     }
-    return { accepted, rejected, pending };
+    return { decisions, accepted, rejected, pending };
   }, [ids, overrides, initial]);
 
+  // Reads the SAME map the groups were built from, so the two cannot disagree,
+  // and changes identity whenever an answer does — a screen that memoizes its
+  // rows on `status` re-runs when a decision moves. An id outside `ids` still
+  // answers (its own override, else the default): a row can leave the set while
+  // a handler still holds its id.
+  const status = useCallback(
+    (id: Id) => derived.decisions.get(id) ?? overrides.get(id) ?? defaultFor(initial, id),
+    [derived, overrides, initial],
+  );
+
   return useMemo(
     () => ({
       status,
@@ -103,13 +152,13 @@ export function useChangeSet<Id extends string = string>(
       acceptAll: () => all("accepted"),
       rejectAll: () => all("rejected"),
       reset: () => setOverrides(new Map()),
-      accepted: groups.accepted,
-      rejected: groups.rejected,
-      pending: groups.pending,
-      keptCount: groups.accepted.length,
+      accepted: derived.accepted,
+      rejected: derived.rejected,
+      pending: derived.pending,
+      keptCount: derived.accepted.length,
       total: ids.length,
-      settled: groups.pending.length === 0,
+      settled: derived.pending.length === 0,
     }),
-    [status, set, undo, all, groups, ids.length],
+    [status, set, undo, all, derived, ids.length],
   );
 }

package/src/use_scroll_seam.ts

@@ -0,0 +1,79 @@
+import { useCallback, useLayoutEffect, useRef } from "react";
+import type { NativeScrollEvent, NativeSyntheticEvent, ScrollView } from "react-native";
+
+/** The three props a seam needs on the `ScrollView` it manages. Spread, so a
+ *  surface cannot wire half of it. */
+export interface ScrollSeam {
+  ref: React.RefObject<ScrollView | null>;
+  onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+  scrollEventThrottle: number;
+}
+
+/**
+ * The identity of the content while nothing is swapped in.
+ *
+ * `scrollKey` is optional, and the natural call site — `scrollKey={openChild?.id}`,
+ * which is what the master-detail recipe prescribes — passes `undefined` for the
+ * MASTER leg. Reading that as "this surface opts out" broke exactly half of the
+ * seam: the forward leg worked (undefined → "child" is a change, so the child
+ * opened at 0) while the return leg restored nothing, because the master's
+ * offset had never been recorded under any key. The reader came back to the
+ * CHILD's offset inside the parent list — worse than either 0 or the remembered
+ * place.
+ *
+ * So an absent key is a KEY, not an opt-out. Opting out needs no signal of its
+ * own: a surface that never changes its key never scrolls, because the seam
+ * fires on the CHANGE and there is none.
+ */
+const ROOT_KEY = "\u0000root";
+
+/**
+ * REMEMBERED SCROLL OFFSETS ACROSS A CONTENT SWAP.
+ *
+ * A scroll container keeps its offset when its children change, because nothing
+ * tells it the content it was holding no longer exists. Swap a drawer's body for
+ * a child record and the new record opens part-way down itself, with its own
+ * heading off-screen above — invisible until the first list long enough to
+ * scroll, which is the same list that makes the swap worth having.
+ *
+ * The seam is the content's IDENTITY: while `scrollKey` holds, the container is
+ * left alone; when it changes, the outgoing key's offset is already recorded and
+ * the incoming one is restored — 0 for a key never seen, so a swap FORWARD opens
+ * at the top, and the remembered offset on the way BACK, so the reader keeps
+ * their place in the list they came from.
+ *
+ * That return leg is the whole reason this is not a React `key` on the scroll
+ * area. A key throws the container away and rebuilds it, which resets the child
+ * correctly and resets the PARENT just as thoroughly.
+ *
+ * No key CHANGE ⇒ no scrolling: a surface that does not swap content behaves
+ * exactly as it did before, whether it names its content or not. An ABSENT key
+ * is the root content's identity (see {@link ROOT_KEY}), not a request to skip
+ * the seam — which is what `scrollKey={openChild?.id}` needs on the leg where
+ * no child is open.
+ */
+export function useScrollSeam(scrollKey: string | undefined): ScrollSeam {
+  const key = scrollKey ?? ROOT_KEY;
+  const ref = useRef<ScrollView | null>(null);
+  const offsets = useRef(new Map<string, number>());
+  // Which key the live offset belongs to. Read by `onScroll`, which fires long
+  // after the render that changed the prop.
+  const liveKey = useRef(key);
+
+  const onScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    offsets.current.set(liveKey.current, event.nativeEvent.contentOffset.y);
+  }, []);
+
+  useLayoutEffect(() => {
+    const previous = liveKey.current;
+    liveKey.current = key;
+    // On mount `previous` IS the key, so nothing is scrolled — a fresh container
+    // is already at the top and moving it would be a visible jump on open.
+    if (previous === key) return;
+    ref.current?.scrollTo({ y: offsets.current.get(key) ?? 0, animated: false });
+  }, [key]);
+
+  // Native emits one scroll event per gesture without this, so the offset the
+  // seam remembers would be wherever the finger first landed.
+  return { ref, onScroll, scrollEventThrottle: 16 };
+}

package/src/line_chart_labels.ts

@@ -1,32 +0,0 @@
-/**
- * Which of a line chart's x positions get a printed label.
- *
- * A label is roughly `minLabelWidth` wide, so only so many fit across the
- * track; the rest are thinned out. The rule that matters is WHERE the thinning
- * is anchored: stepping forwards from the first point and then forcing the last
- * one in collides whenever the series length minus one is not a multiple of the
- * step — the newest label lands a few pixels from the one before it while every
- * other pair is a full step apart. Anchoring on the LAST point makes the spacing
- * uniform by construction, and the last point is the one a reader looks up
- * first. The first point is then kept only when it clears the same distance.
- */
-export function lineChartLabelIndices(
-  count: number,
-  chartWidth: number,
-  minLabelWidth = 50,
-): number[] {
-  if (count <= 0 || chartWidth <= 0) return [];
-  if (count === 1) return [0];
-
-  const last = count - 1;
-  const maxLabels = Math.max(2, Math.floor(chartWidth / minLabelWidth));
-  const step = Math.max(1, Math.ceil(count / maxLabels));
-
-  const kept: number[] = [];
-  for (let i = last; i >= 0; i -= step) kept.unshift(i);
-
-  const firstKept = kept[0] ?? 0;
-  if (firstKept > 0 && (firstKept / last) * chartWidth >= minLabelWidth) kept.unshift(0);
-
-  return kept;
-}