@rebasepro/admin 0.13.0 → 0.13.1-canary.g249daa1

package/src/components/CollectionViewBinding/SearchHighlight.tsx

@@ -0,0 +1,285 @@
+import React, { useMemo } from "react";
+import type { SearchMatch } from "@rebasepro/types";
+
+/**
+ * Showing a searcher *why* a row is in their results.
+ *
+ * A ranked list answers "which rows" and never "why this one". When the term is
+ * in the title that is self-evident; when it is in a field the list does not
+ * show — a certification, a nested answer, a note — the row looks arbitrary and
+ * the only way to find out is to open it. That is the whole reason this exists.
+ *
+ * Two jobs, and they are deliberately separate:
+ *
+ * 1. {@link Highlighted} marks the term inside a value the list already shows.
+ * 2. {@link offSlotMatch} finds a match in a field that has no slot, so the
+ *    caller can put it where the subtitle would have gone.
+ */
+
+/** `<mark>` is Postgres's delimiter, and what `ts_headline` emits. */
+const MARK = /(<mark>.*?<\/mark>)/g;
+
+/**
+ * Render a `ts_headline` snippet: text with `<mark>` around each hit.
+ *
+ * Split-and-render rather than `dangerouslySetInnerHTML`. The text around the
+ * marks is whatever a user typed into their own record, and the only markup it
+ * is allowed to carry is the highlight Postgres put there. Anything else stays
+ * inert text.
+ */
+export function Snippet({ text, className }: { text: string; className?: string }) {
+    const parts = useMemo(() => text.split(MARK), [text]);
+    return (
+        <span className={className}>
+            {parts.map((part, i) =>
+                part.startsWith("<mark>")
+                    ? (
+                        <mark
+                            key={i}
+                            className="bg-amber-200/70 dark:bg-amber-400/30 text-inherit rounded-[3px] px-[1px]"
+                        >
+                            {part.slice(6, -7)}
+                        </mark>
+                    )
+                    : <React.Fragment key={i}>{part}</React.Fragment>
+            )}
+        </span>
+    );
+}
+
+/**
+ * Mark every occurrence of the searched terms inside a plain value.
+ *
+ * Used for values the list already renders, where the server's snippet would be
+ * the wrong thing to show: the snippet is truncated to a fragment and folded to
+ * the indexed form, while the cell should keep the record's real text. So the
+ * terms are re-matched here, on the display value.
+ *
+ * Deliberately dumber than the server's matching, and it has to be: this cannot
+ * stem or unaccent without reimplementing the text search configuration in the
+ * browser and getting it subtly different. It marks what it can find as a
+ * prefix, case- and accent-insensitively, and marks nothing when it cannot —
+ * a highlight that is merely absent reads as "no hit in this field", which is
+ * the honest answer for a stem the browser cannot reproduce.
+ */
+export function Highlighted({ text, terms, className }: { text: string; terms: string[]; className?: string }) {
+    const segments = useMemo(() => splitOnTerms(text, terms), [text, terms]);
+    if (segments.length <= 1) return <span className={className}>{text}</span>;
+    return (
+        <span className={className}>
+            {segments.map((seg, i) =>
+                seg.hit
+                    ? (
+                        <mark
+                            key={i}
+                            className="bg-amber-200/70 dark:bg-amber-400/30 text-inherit rounded-[3px] px-[1px]"
+                        >
+                            {seg.text}
+                        </mark>
+                    )
+                    : <React.Fragment key={i}>{seg.text}</React.Fragment>
+            )}
+        </span>
+    );
+}
+
+/** Strip diacritics so `gestion` marks `gestión`, mirroring the index's unaccent. */
+const fold = (value: string): string =>
+    value.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase();
+
+interface Segment { text: string; hit: boolean }
+
+/**
+ * Split `text` into hit / non-hit runs.
+ *
+ * Matches on the *folded* form but slices the original, so the marked text
+ * keeps its accents and case — `Gestión`, not `gestion`. Folding is
+ * length-preserving for the diacritics this handles, which is what makes the
+ * indices transferable; a fold that changed length would misalign the slices.
+ */
+export function splitOnTerms(text: string, terms: string[]): Segment[] {
+    const haystack = fold(text);
+    const needles = terms.map(fold).filter(t => t.length >= 2);
+    if (needles.length === 0) return [{ text, hit: false }];
+
+    // Word-start matches only. A search for "iso" marking the "iso" inside
+    // "revisor" is noise, and reads as a bug rather than a feature.
+    const bounds: [number, number][] = [];
+    for (const needle of needles) {
+        let from = 0;
+        for (;;) {
+            const at = haystack.indexOf(needle, from);
+            if (at === -1) break;
+            const before = at === 0 ? " " : haystack[at - 1];
+            if (!/[\p{L}\p{N}]/u.test(before)) bounds.push([at, at + needle.length]);
+            from = at + needle.length;
+        }
+    }
+    if (bounds.length === 0) return [{ text, hit: false }];
+
+    // Merge overlaps so two terms hitting the same run mark it once.
+    bounds.sort((a, b) => a[0] - b[0]);
+    const merged: [number, number][] = [];
+    for (const [start, end] of bounds) {
+        const last = merged[merged.length - 1];
+        if (last && start <= last[1]) last[1] = Math.max(last[1], end);
+        else merged.push([start, end]);
+    }
+
+    const segments: Segment[] = [];
+    let cursor = 0;
+    for (const [start, end] of merged) {
+        if (start > cursor) segments.push({ text: text.slice(cursor, start), hit: false });
+        segments.push({ text: text.slice(start, end), hit: true });
+        cursor = end;
+    }
+    if (cursor < text.length) segments.push({ text: text.slice(cursor), hit: false });
+    return segments;
+}
+
+/**
+ * The terms a searcher typed, as things to look for in a rendered value.
+ *
+ * Quoted phrases stay whole; `-excluded` terms are dropped, since marking a
+ * word the user asked *not* to see would be actively wrong. `websearch_to_tsquery`
+ * reads the same syntax on the server.
+ */
+export function searchTerms(searchString: string | undefined): string[] {
+    if (!searchString) return [];
+    const terms: string[] = [];
+    for (const [, phrase, bare] of searchString.matchAll(/"([^"]+)"|(\S+)/g)) {
+        const term = phrase ?? bare;
+        if (!term || term.startsWith("-")) continue;
+        if (/^(or|and)$/i.test(term)) continue;
+        terms.push(term);
+    }
+    return terms;
+}
+
+/**
+ * The best match to show when the term is nowhere the list already displays.
+ *
+ * `shownKeys` are the property paths the row is already rendering, so a match
+ * there needs no explaining — {@link Highlighted} marks it in place and the
+ * subtitle keeps its own job. Anything else is invisible, and one of those is
+ * what the subtitle slot gets replaced with.
+ *
+ * The first such match wins, and the server returns them in the order the
+ * collection declared its `search` fields — so the field an author put first is
+ * the one a reader sees, rather than whichever the database aggregated first.
+ */
+export function offSlotMatch(
+    matches: SearchMatch[] | undefined,
+    shownKeys: (string | undefined)[]
+): SearchMatch | undefined {
+    if (!matches || matches.length === 0) return undefined;
+    const shown = new Set(shownKeys.filter((k): k is string => Boolean(k)));
+    return matches.find(m => !shown.has(m.field));
+}
+
+// ── Finding the match locally ───────────────────────────────────────────────
+
+/**
+ * Where a search term appears in a row, computed from the row itself.
+ *
+ * The server can say this too — `_matches`, from `ts_headline` — and its answer
+ * is better, because it knows the stemming the index used. This exists because
+ * the admin cannot rely on getting it: rows reach the panel over three
+ * different transports (REST, the realtime socket, the offline cache) and only
+ * one of them carries query metadata. A feature that explains a result on some
+ * loads and not others is worse than one that always gives a slightly simpler
+ * answer.
+ *
+ * So: use the server's when it is there, fall back to this. Both produce the
+ * same `{ field, snippet }` shape, and this one marks with the same `<mark>`.
+ */
+export function localRowMatch(
+    values: Record<string, unknown> | undefined,
+    properties: Record<string, unknown> | undefined,
+    terms: string[],
+    shownKeys: (string | undefined)[]
+): SearchMatch | undefined {
+    if (!values || !properties || terms.length === 0) return undefined;
+    const shown = new Set(shownKeys.filter((k): k is string => Boolean(k)));
+
+    // Declared order, so the field an author put first wins — the same rule the
+    // server's `_matches` follows.
+    for (const [key, property] of Object.entries(properties)) {
+        if (shown.has(key)) continue;
+        const found = findInValue(values[key], terms, key, property as { type?: string });
+        if (found) return found;
+    }
+    return undefined;
+}
+
+/**
+ * Context kept before and after a hit, in characters.
+ *
+ * Asymmetric on purpose. The snippet renders on one truncated line, so anything
+ * before the hit competes with the hit itself for the width available — with a
+ * generous lead-in the mark is pushed off the right edge and the reader sees a
+ * fragment with nothing highlighted in it, which is worse than no snippet at
+ * all. Lead with just enough to not start abruptly, then run on.
+ */
+const SNIPPET_LEAD = 16;
+const SNIPPET_TRAIL = 90;
+
+function findInValue(
+    value: unknown,
+    terms: string[],
+    path: string,
+    property: { type?: string } | undefined
+): SearchMatch | undefined {
+    // An enum renders as a chip from a fixed vocabulary; marking inside one
+    // reads as noise, and `where` is the right tool for those anyway.
+    if (property && "enum" in property && property.enum) return undefined;
+
+    if (typeof value === "string") {
+        const snippet = snippetAround(value, terms);
+        return snippet ? { field: path, snippet } : undefined;
+    }
+    if (Array.isArray(value)) {
+        for (const item of value) {
+            const found = findInValue(item, terms, path, undefined);
+            if (found) return found;
+        }
+        return undefined;
+    }
+    if (value && typeof value === "object") {
+        // Nested maps: report the path the author would recognise, which is the
+        // dotted one the `search` block uses.
+        for (const [key, nested] of Object.entries(value as Record<string, unknown>)) {
+            const found = findInValue(nested, terms, `${path}.${key}`, undefined);
+            if (found) return found;
+        }
+    }
+    return undefined;
+}
+
+/**
+ * The text around the first hit, with every hit in view marked.
+ *
+ * Trimmed to a readable window rather than the whole field: a match in a long
+ * body should show the sentence it is in, not the first line of the document,
+ * and certainly not the document.
+ */
+export function snippetAround(text: string, terms: string[]): string | undefined {
+    const segments = splitOnTerms(text, terms);
+    const firstHit = segments.findIndex(s => s.hit);
+    if (firstHit === -1) return undefined;
+
+    const before = segments.slice(0, firstHit).map(s => s.text).join("");
+    const head = before.length > SNIPPET_LEAD
+        // Start at a word boundary so the snippet does not open mid-word.
+        ? "…" + before.slice(before.length - SNIPPET_LEAD).replace(/^\S*\s/, "")
+        : before;
+
+    let out = head;
+    for (let i = firstHit; i < segments.length; i++) {
+        const seg = segments[i];
+        out += seg.hit ? `<mark>${seg.text}</mark>` : seg.text;
+        // Enough context after the hit to read it, then stop.
+        if (out.length > head.length + SNIPPET_TRAIL) { out += "…"; break; }
+    }
+    return out.trim();
+}

package/src/components/CollectionViewBinding/SlotValue.tsx

@@ -0,0 +1,156 @@
+import React from "react";
+import type { PreviewSize } from "../../types/components/PropertyPreviewProps";
+import { PropertyPreview } from "../../preview";
+import { StorageThumbnail } from "../../preview/components/StorageThumbnail";
+import { UrlComponentPreview } from "../../preview/components/UrlComponentPreview";
+import { Chip } from "@rebasepro/ui";
+import type { PreviewSlot } from "./usePreviewSlots";
+
+export interface SlotValueProps {
+    slot: PreviewSlot | undefined;
+    size: PreviewSize;
+    /**
+     * Relations and references render as one line of linked text rather than as
+     * a card. Defaults to true: a slot is a line in a row or a card, and a
+     * relation that renders its own bordered card there — with its own id line
+     * and its own side-panel button — is a card inside a card.
+     *
+     * Pass `false` only for a slot with room for one, which in practice is
+     * none of them.
+     */
+    textOnly?: boolean;
+    /** Images only: fill the container rather than fitting inside it. */
+    fill?: boolean;
+}
+
+/**
+ * One display slot, rendered.
+ *
+ * A slot's value arrives one of two ways and they cannot be rendered the same:
+ *
+ * - **From a property** — render it with that property's own preview, so an
+ *   enum status keeps its colour, a date keeps its format and a storage path
+ *   becomes a thumbnail. This is why a declared path beats a resolver whenever
+ *   the value is actually on the record.
+ * - **From a resolver** — there is no property, because the value was computed
+ *   or fetched. All that can be said about it is that it is text.
+ *
+ * The branch lives here, once, rather than at each of the fourteen places the
+ * list row, the card and the board card render a slot. That count is the reason:
+ * the last time a rule like this was inlined per call site, it drifted into
+ * seven versions.
+ */
+export function SlotValue({ slot, size, textOnly = true, fill }: SlotValueProps) {
+
+    if (!slot || slot.value === undefined || slot.value === null) return null;
+
+    if (!slot.property || !slot.propertyKey) {
+        // A computed image is still an image. "There is no property, so all that
+        // can be said about it is that it is text" holds for a title and fails
+        // here: `display.image` accepts "a storage path or a URL … so a resolver
+        // may return either", and both used to be printed as their own string
+        // inside the image frame.
+        if (slot.role === "image" && typeof slot.value === "string" && slot.value.trim()) {
+            return <ComputedImage value={slot.value.trim()} size={size} fill={fill}/>;
+        }
+
+        // Computed. Arrays (a `tags` resolver) join rather than rendering as
+        // "[object Object]" via String().
+        const text = Array.isArray(slot.value)
+            ? slot.value.map(item => String(item)).join(", ")
+            : String(slot.value);
+        return <>{text}</>;
+    }
+
+    return <PropertyPreview
+        propertyKey={slot.propertyKey}
+        value={slot.value as never}
+        property={slot.property}
+        size={size}
+        textOnly={textOnly}
+        fill={fill}/>;
+}
+
+/**
+ * The `tags` slot, as chips beside the status.
+ *
+ * Honours both arms the same way the rest of the file does. A declared **path**
+ * goes through {@link SlotValue}, so an array of enum values keeps its own
+ * colours — that is the stated advantage of naming a property. A **resolver**
+ * returns bare strings with no property to render them as, so they become plain
+ * chips; a single string is accepted as one tag, which the role's type documents.
+ *
+ * Lives here rather than in the list, the card and the board card because that is
+ * three copies of the same decision, and this file exists to hold exactly one.
+ */
+export function TagChips({ slot, max = 4 }: { slot: PreviewSlot, max?: number }) {
+
+    if (slot.property && slot.propertyKey) {
+        return <SlotValue slot={slot} size="small"/>;
+    }
+
+    const values = (Array.isArray(slot.value) ? slot.value : [slot.value])
+        .filter(item => item !== undefined && item !== null && String(item).trim() !== "")
+        .map(item => String(item));
+
+    if (values.length === 0) return null;
+
+    const shown = values.slice(0, max);
+    const hidden = values.length - shown.length;
+
+    return <>
+        {shown.map(value => (
+            <Chip key={value}
+                size="smallest"
+                className="!text-[10px] !leading-tight !py-0 shrink-0 max-w-[100px] truncate">
+                {value}
+            </Chip>
+        ))}
+        {hidden > 0 && (
+            <span className="text-[10px] text-surface-400 dark:text-surface-500 shrink-0">+{hidden}</span>
+        )}
+    </>;
+}
+
+/**
+ * Whether a computed image string can be fetched as-is, or has to be resolved
+ * through storage first.
+ *
+ * Exported because it is the whole decision: rendering either branch needs a
+ * provider (a storage source, a DOM), and the thing worth pinning is which
+ * branch a given string takes. `//host/x` is protocol-relative and equally
+ * fetchable; `data:` and `blob:` are already the bytes.
+ */
+export function isFetchableImageUrl(value: string): boolean {
+    return /^(https?:)?\/\//i.test(value) || /^(data|blob):/i.test(value);
+}
+
+/**
+ * A string a resolver returned for the `image` role, rendered as a picture.
+ *
+ * Two things can arrive here and they need different handling, which is the whole
+ * reason a property-path image is preferable: a storage property knows which
+ * backend holds it, and a bare string does not.
+ *
+ * - An **absolute URL** is already fetchable. Rendering it through the storage
+ *   layer would ask a bucket to sign a path that was never in it.
+ * - Anything else is read as a **storage path** on the default source, which is
+ *   the only source a value with no property can be attributed to. A resolver
+ *   pointing at a named source should name the property instead.
+ */
+function ComputedImage({ value, size, fill }: { value: string, size: PreviewSize, fill?: boolean }) {
+    const isAbsolute = isFetchableImageUrl(value);
+
+    if (isAbsolute) {
+        return <UrlComponentPreview previewType="image"
+            url={value}
+            size={size}
+            fill={fill}
+            hint={value}/>;
+    }
+
+    return <StorageThumbnail storagePathOrDownloadUrl={value}
+        storeUrl={false}
+        size={size}
+        fill={fill}/>;
+}

package/src/components/CollectionViewBinding/SplitListCloseButton.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { IconButton, iconSize, Tooltip, XIcon } from "@rebasepro/ui";
+import { IconButton, iconSize, PanelLeftCloseIcon, Tooltip } from "@rebasepro/ui";
 import { useTranslation } from "@rebasepro/app";
 
 import { useSplitView } from "./SplitViewContext";
@@ -9,11 +9,24 @@ import { useSplitView } from "./SplitViewContext";
  * Closes the list of a split view, leaving the open record on its own.
  *
  * It leads the record's own app bar, where the breadcrumb starts — this is the
- * entity pane's old "Open full screen" button, moved to that edge and wearing an
- * X: closing the list and opening the record full screen are the same thing, so
- * there is one control and one route (`#full`) rather than two.
+ * entity pane's old "Open full screen" button, moved to that edge: closing the
+ * list and opening the record full screen are the same thing, so there is one
+ * control and one route (`#full`) rather than two. Full screen carries the
+ * mirrored icon to bring the list back.
+ *
+ * A pane glyph rather than the double chevron it wore first. Now that the bar
+ * ends in a ✕ that dismisses the record, an arrow pointing off the left edge of
+ * the record's own bar was the other thing on it that read as "close me" — and
+ * it is the one control here that does not act on the record at all.
  */
-export function SplitListCloseButton() {
+export function SplitListCloseButton({ onBeforeHide }: {
+    /**
+     * Run before the layout changes, while this form is still mounted: the edit
+     * view uses it to hand its edit in progress to the full-screen form that is
+     * about to show the same record.
+     */
+    onBeforeHide?: () => void;
+} = {}) {
 
     const { t } = useTranslation();
     const splitView = useSplitView();
@@ -24,9 +37,12 @@ export function SplitListCloseButton() {
         <Tooltip title={t("hide_list")}>
             <IconButton
                 size="small"
-                onClick={splitView.openFullScreen}
+                onClick={() => {
+                    onBeforeHide?.();
+                    splitView.openFullScreen();
+                }}
                 aria-label={t("hide_list")}>
-                <XIcon size={iconSize.smallest}/>
+                <PanelLeftCloseIcon size={iconSize.smallest}/>
             </IconButton>
         </Tooltip>
     );

package/src/components/CollectionViewBinding/SplitListShowButton.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+import { IconButton, iconSize, PanelLeftOpenIcon, Tooltip } from "@rebasepro/ui";
+import { useTranslation } from "@rebasepro/app";
+
+/**
+ * Brings the list back beside a record that was opened full screen.
+ *
+ * The mirror of {@link SplitListCloseButton}: the same edge of the same bar,
+ * the same pane glyph opening rather than closing, and the same single route —
+ * showing the list is dropping the `#full` hash. It replaces the back arrow
+ * where it applies, because the list it unfolds already holds the record.
+ */
+export function SplitListShowButton({ onClick }: { onClick: () => void }) {
+
+    const { t } = useTranslation();
+
+    return (
+        <Tooltip title={t("show_list")}>
+            <IconButton
+                size="small"
+                onClick={onClick}
+                aria-label={t("show_list")}>
+                <PanelLeftOpenIcon size={iconSize.smallest}/>
+            </IconButton>
+        </Tooltip>
+    );
+}

package/src/components/CollectionViewBinding/SplitListView.tsx

@@ -79,6 +79,21 @@ function isListShortcutTarget(target: HTMLElement | null, detailPanel: HTMLEleme
     return !detailPanel?.contains(target);
 }
 
+/**
+ * The list's share of the split, as a percentage, before anyone drags it.
+ *
+ * The list only has to identify a record — a title, a subtitle and a status
+ * chip — while the detail beside it carries the whole record and its rail. At
+ * 30% the list was taking width from the side that had four columns of fields
+ * to lay out; 26% still was, by about the width of one field.
+ *
+ * A default, not a constraint: {@link savePanelSize} remembers the drag per
+ * collection, so anyone who has already sized this list keeps their size. The
+ * drag floor is `minPanelSizePx`, and it holds below ~1100px of split — at that
+ * width this percentage is already the floor.
+ */
+const DEFAULT_PANEL_SIZE = 22;
+
 function getSavedPanelSize(path: string): number {
     try {
         const saved = localStorage.getItem(`${PANEL_SIZE_KEY}_${path}`);
@@ -87,7 +102,7 @@ function getSavedPanelSize(path: string): number {
             if (!isNaN(val) && val > 0 && val < 100) return val;
         }
     } catch { /* ignore */ }
-    return 30;
+    return DEFAULT_PANEL_SIZE;
 }
 
 function savePanelSize(path: string, size: number) {
@@ -150,8 +165,20 @@ export function SplitListView<M extends Record<string, unknown> = Record<string,
         dirty.current = modified;
     }, []);
 
-    // The form remounts per entity, so its dirty state must not leak into the next one.
+    // The form remounts per entity, so its dirty state must not leak into the
+    // next one — and it has to be cleared here rather than left to the next
+    // form's own first report, because that form spends the load in a skeleton
+    // and a navigation during it would prompt about the record before it.
+    //
+    // On a *change* of record only, never on this view's own mount: a record
+    // arriving from full screen carries its edit back in and opens dirty, and
+    // the form says so from its first effect — which runs before this one, being
+    // a child's. Clearing unconditionally overwrote that report with `false`,
+    // and the way out of the split stopped asking about a live edit.
+    const previousEntityId = useRef(selectedEntityId);
     useEffect(() => {
+        if (previousEntityId.current === selectedEntityId) return;
+        previousEntityId.current = selectedEntityId;
         dirty.current = false;
     }, [selectedEntityId]);
 
@@ -170,12 +197,19 @@ export function SplitListView<M extends Record<string, unknown> = Record<string,
         return true;
     }, []));
 
-    // Panel size state with persistence
+    // Panel size state with persistence.
+    //
+    // Written on drag, not on mount. An effect that saved on mount stored
+    // {@link DEFAULT_PANEL_SIZE} under this collection's key the first time
+    // anyone opened the split — after which the default was frozen in every
+    // browser that had ever seen it, and changing it here reached nobody but a
+    // new visitor. Only a size someone chose is a size worth remembering.
     const [panelSize, setPanelSize] = useState(() => getSavedPanelSize(path));
 
-    useEffect(() => {
-        savePanelSize(path, panelSize);
-    }, [panelSize, path]);
+    const handlePanelSizeChange = useCallback((size: number) => {
+        setPanelSize(size);
+        savePanelSize(path, size);
+    }, [path]);
 
     // ── Animation state ──
     // We track the "rendered" entity to keep the detail panel mounted during the exit animation.
@@ -366,6 +400,7 @@ export function SplitListView<M extends Record<string, unknown> = Record<string,
                         parentEntityIds={usedParentEntityIds}
                         selectedTab={selectedTab}
                         layout="split"
+                        onCloseRequest={handleCloseDetail}
                         onEditClick={() => {
                             navigate(buildUrl(`${path}/${renderedEntityId}/edit`));
                         }}
@@ -387,6 +422,11 @@ export function SplitListView<M extends Record<string, unknown> = Record<string,
                         parentEntityIds={usedParentEntityIds}
                         selectedTab={selectedTab}
                         layout="split"
+                        // The ✕, and where "save and close" lands. A plain
+                        // navigation: `useNavigationBlocker` above already
+                        // stands between it and an unsaved edit, so the ✕ asks
+                        // exactly what Escape and the browser's Back ask.
+                        onCloseRequest={handleCloseDetail}
                         onValuesModified={setDirty}
                         onSaved={() => {
                             setDirty(false);
@@ -431,7 +471,7 @@ export function SplitListView<M extends Record<string, unknown> = Record<string,
                 secondPanel={detailPanel}
                 showSecondPanel={isDetailVisible}
                 panelSizePercent={animationPhase === "entering" ? 100 : panelSize}
-                onPanelSizeChange={setPanelSize}
+                onPanelSizeChange={handlePanelSizeChange}
                 minPanelSizePx={240}
             />
 

package/src/components/CollectionViewBinding/useBoardDataController.tsx

@@ -408,7 +408,8 @@ values: { ...e.values,
             where: whereFilter,
             limit: itemCount,
             orderBy: orderByParam,
-            include: includeParams
+            include: includeParams,
+            searchString: currentSearchString
         });
 
         const onError = (error: Error) => {
@@ -446,7 +447,12 @@ values: { ...e.values,
                 where: whereFilter,
                 limit: itemCount,
                 orderBy: orderByParam,
-                include: includeParams
+                include: includeParams,
+                // Read into a local at the top of this function and then used
+                // nowhere, in both places it was read. The board took a search
+                // term, re-subscribed every column when it changed, and
+                // returned the same rows.
+                searchString: currentSearchString
             }, res => {
                 liveDataReceived = true;
                 onUpdate(res.data as Entity<M>[]);
@@ -539,7 +545,10 @@ values: { ...e.values,
                     };
 
                     accessor.count({
-                        where: whereFilter
+                        where: whereFilter,
+                        // Or the column header counts the unsearched collection
+                        // while the column beneath it shows searched rows.
+                        searchString: currentSearchString
                     }).then(count => {
                         if (isCleaningUpRef.current) return;
                         setColumnData(prev => ({