@vertesia/ui 1.5.0-dev.20260826.064249Z → 1.5.0-dev.20260901.033115Z

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertesia/ui",
-  "version": "1.5.0-dev.20260826.064249Z",
+  "version": "1.5.0-dev.20260901.033115Z",
   "description": "Vertesia UI components and and hooks",
   "type": "module",
   "main": "./lib/index.js",
@@ -92,11 +92,11 @@
     "vega": "^6.3.1",
     "vega-embed": "^7.1.0",
     "vega-lite": "^6.4.3",
-    "@vertesia/client": "1.5.0-dev.20260826.064249Z",
-    "@vertesia/common": "1.5.0-dev.20260826.064249Z",
-    "@vertesia/fusion-ux": "1.5.0-dev.20260826.064249Z",
-    "@vertesia/rich-text": "1.5.0-dev.20260826.064249Z",
-    "@vertesia/json": "1.5.0-dev.20260826.064249Z"
+    "@vertesia/client": "1.5.0-dev.20260901.033115Z",
+    "@vertesia/fusion-ux": "1.5.0-dev.20260901.033115Z",
+    "@vertesia/json": "1.5.0-dev.20260901.033115Z",
+    "@vertesia/rich-text": "1.5.0-dev.20260901.033115Z",
+    "@vertesia/common": "1.5.0-dev.20260901.033115Z"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.2",
@@ -179,7 +179,7 @@
     "url": "https://github.com/vertesia/composableai.git",
     "directory": "packages/ui"
   },
-  "gitHead": "c0d6426380b6f66657db83017c90de208ee4956a",
+  "gitHead": "96b1587659282d517fe75878467b5fd82bbc1ac5",
   "scripts": {
     "clean:lib": "rimraf ./lib ./tsconfig.tsbuildinfo",
     "clean": "rimraf ./node_modules ./lib ./tsconfig.tsbuildinfo",

package/src/core/components/FormItem.tsx

@@ -1,8 +1,7 @@
 import { Env } from '@vertesia/ui/env';
 import clsx from 'clsx';
-import { Info } from 'lucide-react';
 import { Children, cloneElement, Fragment, isValidElement, type ReactNode, useId, useRef } from 'react';
-import { VTooltip } from './shadcn/tooltip';
+import { InfoTip } from './InfoTip';
 
 interface FormItemProps {
     label: ReactNode;
@@ -126,9 +125,7 @@ export function FormItem({
                 </label>
                 {description && (
                     <div className="mx-2 flex w-4 items-center">
-                        <VTooltip description={description}>
-                            <Info className="size-3 text-muted" />
-                        </VTooltip>
+                        <InfoTip description={description} />
                     </div>
                 )}
             </div>

package/src/core/components/InfoTip.test.tsx

@@ -0,0 +1,33 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { InfoTip } from './InfoTip';
+
+describe('InfoTip', () => {
+    // The point of the null return: call sites forward an optional `description`
+    // straight through, so an unset one must leave nothing behind — not a bare icon,
+    // and not an empty flex item that opens a gap beside the label or heading.
+    it('renders nothing without a description', () => {
+        const { container } = render(<InfoTip />);
+        expect(container.innerHTML).toBe('');
+    });
+
+    it('renders nothing for an empty description', () => {
+        const { container } = render(<InfoTip description="" />);
+        expect(container.innerHTML).toBe('');
+    });
+
+    it('renders a focusable trigger when a description is set', () => {
+        render(<InfoTip description="What this field does" />);
+        expect(screen.getByRole('button')).toBeDefined();
+    });
+
+    it('uses the larger icon for the md size', () => {
+        const { container } = render(<InfoTip description="Heading help" size="md" />);
+        expect(container.querySelector('svg')?.getAttribute('class')).toContain('size-4');
+    });
+
+    it('defaults to the small icon', () => {
+        const { container } = render(<InfoTip description="Label help" />);
+        expect(container.querySelector('svg')?.getAttribute('class')).toContain('size-3');
+    });
+});

package/src/core/components/InfoTip.tsx

@@ -0,0 +1,32 @@
+import { Info } from 'lucide-react';
+import type { ReactNode } from 'react';
+import { cn } from './libs/utils';
+import { VTooltip } from './shadcn/tooltip';
+
+interface InfoTipProps {
+    /** Tooltip text. Renders nothing when empty, so an optional value can be passed
+     *  straight through without guarding it at the call site. */
+    description?: ReactNode;
+    /** `sm` (default) sits beside a form label; `md` beside a panel or section title. */
+    size?: 'sm' | 'md';
+    placement?: 'top' | 'right' | 'bottom' | 'left';
+    className?: string;
+}
+
+/**
+ * The Info-icon tooltip that sits next to a label or a heading.
+ *
+ * Hover-only, like every `VTooltip`. It is NOT a substitute for `FormItem`'s `helpText`,
+ * which is the prop that links guidance to a control through `aria-describedby` — see the
+ * note on `FormItem.description`.
+ */
+export function InfoTip({ description, size = 'sm', placement = 'top', className }: InfoTipProps) {
+    if (!description) {
+        return null;
+    }
+    return (
+        <VTooltip description={description} placement={placement}>
+            <Info className={cn(size === 'md' ? 'size-4' : 'size-3', 'text-muted', className)} />
+        </VTooltip>
+    );
+}

package/src/core/components/index.ts

@@ -5,6 +5,7 @@ export * from './Divider.js';
 export * from './EmptyCollection.js';
 export * from './FileUpload.js';
 export * from './FormItem.js';
+export * from './InfoTip.js';
 export * from './InputList.js';
 export * from './Link.js';
 export * from './MenuList.js';

package/src/core/components/shadcn/Panel.tsx

@@ -1,7 +1,7 @@
-import { ChevronDown, ChevronUp, Info } from 'lucide-react';
+import { ChevronDown, ChevronUp } from 'lucide-react';
 import { useState } from 'react';
+import { InfoTip } from '../InfoTip';
 import { Button } from './button';
-import { VTooltip } from './tooltip';
 
 interface PanelProps {
     title: string | React.ReactNode;
@@ -47,11 +47,7 @@ export function Panel({
         <>
             <div className="flex items-center gap-2">
                 <div className={`font-semibold ${isSmall ? 'text-sm' : 'text-lg'}`}>{title}</div>
-                {description && (
-                    <VTooltip description={description}>
-                        <Info className="size-4 text-muted" />
-                    </VTooltip>
-                )}
+                <InfoTip description={description} size="md" />
             </div>
             <div className="flex gap-2 items-center">
                 {action}

package/src/features/store/objects/search/DocumentSearchContext.test.ts

@@ -33,6 +33,51 @@ describe('DocumentSearch', () => {
         });
     });
 
+    it('keeps deleted objects out of a refetch the index has not caught up with yet', async () => {
+        // The index applies deletes out of band, so it still returns the deleted object here.
+        const stale = [
+            { id: 'gone', name: 'Deleted object' },
+            { id: 'kept', name: 'Surviving object' },
+        ] as ContentObjectItemApiResponse[];
+        const search = new DocumentSearch(createClient(() => Promise.resolve({ results: stale })));
+        search.result.value = { objects: stale, isLoading: false, hasMore: false };
+        search.facets.value = { total: 2 };
+
+        search.removeDeletedObjects(['gone']);
+
+        // Gone from the list and the count straight away, without waiting for a refetch.
+        expect(search.objects.map((obj) => obj.id)).toEqual(['kept']);
+        expect(search.facets.value.total).toBe(1);
+
+        // The refetch still returns it, and it must not come back.
+        await expect(search.search()).resolves.toBe(true);
+        expect(search.objects.map((obj) => obj.id)).toEqual(['kept']);
+    });
+
+    it('stops hiding a deleted object once the index no longer returns it', async () => {
+        const remaining = [{ id: 'kept', name: 'Surviving object' }] as ContentObjectItemApiResponse[];
+        const search = new DocumentSearch(createClient(() => Promise.resolve({ results: remaining })));
+        search.removeDeletedObjects(['gone']);
+
+        // The index has caught up: 'gone' is absent, so the entry is reconciled away.
+        await expect(search.search()).resolves.toBe(true);
+        expect(search.objects.map((obj) => obj.id)).toEqual(['kept']);
+    });
+
+    it('keeps hiding an object the index never stops returning', async () => {
+        // Documents the current limitation deliberately: if the delete never reaches the index, the
+        // row stays hidden for the life of this DocumentSearch instance. A reload builds a new one,
+        // so it is not hidden permanently. Bounding this is a follow-up.
+        const stuck = [{ id: 'gone', name: 'Delete never reached the index' }] as ContentObjectItemApiResponse[];
+        const search = new DocumentSearch(createClient(() => Promise.resolve({ results: stuck })));
+        search.removeDeletedObjects(['gone']);
+
+        await search.search();
+        await search.search();
+
+        expect(search.objects).toEqual([]);
+    });
+
     it('handles a missing index as an empty initialized search', async () => {
         const error = Object.assign(new Error('index missing'), { status: 404 });
         const search = new DocumentSearch(createClient(() => Promise.reject(error)));

package/src/features/store/objects/search/DocumentSearchContext.ts

@@ -29,6 +29,17 @@ export class DocumentSearch implements SearchInterface {
     facetSpecs: FacetSpec[] = [];
     query: ComplexSearchQuery = {};
 
+    /**
+     * Ids the server confirmed deleted, hidden until the index stops returning them.
+     *
+     * Deletes reach the search index out of band, so a search issued right after one can still
+     * return the object. Without this the row reappears and stays until a manual refresh.
+     */
+    private deletedIds = new Set<string>();
+
+    /** Objects the server has returned so far, before hiding — `loadMore` pages on this, not on the visible count. */
+    private loadedCount = 0;
+
     constructor(
         public client: ZenoClient,
         public limit = 100,
@@ -98,8 +109,31 @@ export class DocumentSearch implements SearchInterface {
         this.query = {};
     }
 
+    /**
+     * Drop objects the server confirmed deleted, and keep them out of results until the index
+     * agrees. Reconciled in `_search`: once a full search stops returning an id, it is really gone
+     * and stops being hidden.
+     */
+    removeDeletedObjects(ids: string[]) {
+        if (ids.length === 0) return;
+        for (const id of ids) {
+            this.deletedIds.add(id);
+        }
+        const previous = this.result.value;
+        const objects = previous.objects.filter((obj) => !this.deletedIds.has(obj.id));
+        const removed = previous.objects.length - objects.length;
+        this.result.value = { ...previous, objects };
+
+        const facets = this.facets.value;
+        if (removed > 0 && typeof facets.total === 'number') {
+            this.facets.value = { ...facets, total: Math.max(0, facets.total - removed) };
+        }
+    }
+
     reset(isLoading = false) {
         this.initialized = false;
+        this.deletedIds.clear();
+        this.loadedCount = 0;
         this.result.value = {
             objects: [],
             isLoading,
@@ -161,16 +195,30 @@ export class DocumentSearch implements SearchInterface {
             hasMore: loadMore ? this.result.value.hasMore : true,
         };
         const limit = this.limit;
-        const offset = loadMore ? this.objects.length : 0;
+        const offset = loadMore ? this.loadedCount : 0;
         try {
             const res = await this._searchRequest(this.query, limit, offset, !noFacets);
             // Handle the new format with results and facets
             const results = res.results || [];
             const facets = res.facets || {};
 
+            this.loadedCount = loadMore ? this.loadedCount + results.length : results.length;
+
+            // Only a full search proves an id is gone. A `loadMore` page is a different slice, so an
+            // absence there says nothing and must not clear the entry.
+            if (!loadMore && this.deletedIds.size > 0) {
+                for (const id of [...this.deletedIds]) {
+                    if (!results.some((obj) => obj.id === id)) {
+                        this.deletedIds.delete(id);
+                    }
+                }
+            }
+            const visible = this.deletedIds.size > 0 ? results.filter((obj) => !this.deletedIds.has(obj.id)) : results;
+
             this.result.value = {
                 isLoading: false,
-                objects: loadMore ? this.objects.concat(results) : results,
+                objects: loadMore ? this.objects.concat(visible) : visible,
+                // `results`, not `visible`: paging is the server's page size, not what we show.
                 hasMore: results.length === limit,
             };
 

package/src/features/store/objects/selection/actions/DeleteObjectsAction.tsx

@@ -64,6 +64,11 @@ export function DeleteObjectsActionComponent({ action, objectIds, children }: Ac
                     if (objectIds.length === facets._value.total) {
                         search.resetFacets();
                     }
+                    // Drop the deleted rows before refetching. The search index applies deletes out
+                    // of band, so the refetch below can still return them; without this they come
+                    // back and stay until the user refreshes by hand.
+                    const failed = new Set(result.failed);
+                    search.removeDeletedObjects(objectIds.filter((id) => !failed.has(id)));
                     search.search();
                 } else {
                     // we are in the object view

package/src/features/store/types/IntakePolicyEditor.tsx

@@ -516,12 +516,11 @@ export function IntakePolicyEditor({
                     current={activeTab}
                     onTabChange={onTabChange}
                     updateHash={false}
-                    responsive
                     fullHeight
-                    className="px-0"
+                    className="px-0 flex-row!"
                 >
-                    <TabsBar sticky />
-                    <TabsPanel className="min-h-0 flex-1 overflow-auto pt-1" />
+                    <TabsBar className="py-2 w-48 shrink-0" direction="vertical" />
+                    <TabsPanel className="min-h-0 min-w-0 flex-1 overflow-auto pt-1 ps-4" />
                 </Tabs>
             </div>
         </Panel>