@jini-ai/ui 0.5.4 → 0.5.6

package/dist/features/admin-widgets/components/ScrollJump/ScrollJump.rules.js

@@ -0,0 +1,26 @@
+/** A page must be at least this many viewports tall before the jump buttons are worth their space. */
+export const SCROLL_JUMP_MIN_VIEWPORTS = 2;
+/** Within this many px of an edge counts as AT that edge (fractional scroll positions never hit 0 exactly). */
+export const SCROLL_JUMP_EDGE_SLACK_PX = 8;
+/**
+ * Which jump buttons a scroll container shows: none on a short page, ↑ only once scrolled away from
+ * the top, ↓ only while there is more below.
+ * @complexity O(1).
+ */
+export function scrollJumpVisibility({ scrollTop, scrollHeight, clientHeight }, { minViewports = SCROLL_JUMP_MIN_VIEWPORTS, edgeSlackPx = SCROLL_JUMP_EDGE_SLACK_PX } = {}) {
+    if (clientHeight <= 0 || scrollHeight < clientHeight * minViewports)
+        return { showTop: false, showBottom: false };
+    return {
+        showTop: scrollTop > edgeSlackPx,
+        showBottom: scrollHeight - scrollTop - clientHeight > edgeSlackPx,
+    };
+}
+/** Reduced-motion users get an instant jump instead of a long animated scroll. */
+export function scrollJumpBehavior({ reducedMotion }) {
+    return reducedMotion ? "auto" : "smooth";
+}
+/** The `scrollTo` target for an edge: 0 for the top, the full content height for the bottom. */
+export function scrollJumpTarget({ edge, scrollHeight }) {
+    return edge === "top" ? 0 : scrollHeight;
+}
+//# sourceMappingURL=ScrollJump.rules.js.map

package/dist/features/admin-widgets/components/Select/Select.hooks.d.ts

@@ -2,7 +2,20 @@ export { focusableInDomOrder, resolveTabTarget } from '../../../../react/compone
 export interface SelectOption {
     value: string;
     label: string;
+    /** Heading shown above the first option of each run with this value (e.g. "Pages", "Posts").
+     *  Callers pass options already ordered by group; search narrows rows, headings follow. */
+    group?: string | undefined;
+    /** Short state shown as a muted pill after the label (e.g. "draft"); omit for the normal state. */
+    badge?: string | undefined;
+    /** Muted secondary text after the label, e.g. a slug telling two same-titled rows apart.
+     *  Search matches it too. */
+    detail?: string | undefined;
 }
+/** The group heading to paint before `options[index]`, or null when it continues the previous run. */
+export declare function groupHeadingAt({ options, index }: {
+    options: readonly SelectOption[];
+    index: number;
+}): string | null;
 export interface PanelPosition {
     top?: number | undefined;
     bottom?: number | undefined;
@@ -18,6 +31,14 @@ export interface PanelPosition {
 export declare function computePosition({ trigger }: {
     trigger: HTMLElement;
 }): PanelPosition;
+/** Top edge (viewport px, never negative) of the nearest scrollable PANE around the trigger, or 0.
+ * A pane is an `overflow-y: auto|scroll` ancestor at least half the viewport tall — whether or not
+ * it currently overflows (a short form still sits under the app bar), while a small scrolling
+ * wrapper such as a table or chip strip does not count and leaves placement as it was.
+ * @complexity O(depth) computed-style reads per measurement. */
+export declare function scrollPaneTop({ trigger }: {
+    trigger: HTMLElement;
+}, _optional?: Record<string, never>): number;
 export declare function buildOptionId({ listboxId, index }: {
     listboxId: string;
     index: number;

package/dist/features/admin-widgets/components/Select/Select.hooks.js

@@ -13,6 +13,11 @@ const SEARCH_VISIBILITY_THRESHOLD = 8;
 // 280px is only a placement heuristic; the panel actual maxHeight and scroll limit use
 // the remaining viewport space so a low trigger does not open a mostly off-screen panel.
 const ESTIMATED_PANEL_HEIGHT = 280;
+/** The group heading to paint before `options[index]`, or null when it continues the previous run. */
+export function groupHeadingAt({ options, index }) {
+    const group = options[index]?.group;
+    return group && group !== options[index - 1]?.group ? group : null;
+}
 /**
  * Use fixed viewport-relative coordinates to escape scrolling/overflow-hidden ancestors
  * without coupling to their layout. maxHeight uses actual remaining space, not the estimate,
@@ -23,13 +28,30 @@ export function computePosition({ trigger }) {
     const gap = 4;
     const viewportHeight = window.innerHeight;
     const spaceBelow = viewportHeight - rect.bottom;
-    const spaceAbove = rect.top;
+    // Space above ends at the trigger's scrolling pane, not the viewport: an app bar above that pane
+    // is not room for the panel (owner, 2026-10-15: on a short phone the list flipped up and covered
+    // the top bar). With nothing scrolling but the page this is 0 and placement is unchanged.
+    const spaceAbove = rect.top - scrollPaneTop({ trigger });
     const openUpward = spaceBelow < ESTIMATED_PANEL_HEIGHT && spaceAbove > spaceBelow;
     if (openUpward) {
         return { bottom: viewportHeight - rect.top + gap, left: rect.left, width: rect.width, maxHeight: Math.max(120, spaceAbove - gap * 2) };
     }
     return { top: rect.bottom + gap, left: rect.left, width: rect.width, maxHeight: Math.max(120, spaceBelow - gap * 2) };
 }
+/** Top edge (viewport px, never negative) of the nearest scrollable PANE around the trigger, or 0.
+ * A pane is an `overflow-y: auto|scroll` ancestor at least half the viewport tall — whether or not
+ * it currently overflows (a short form still sits under the app bar), while a small scrolling
+ * wrapper such as a table or chip strip does not count and leaves placement as it was.
+ * @complexity O(depth) computed-style reads per measurement. */
+export function scrollPaneTop({ trigger }, _optional = {}) {
+    for (let el = trigger.parentElement; el && el !== document.body && el !== document.documentElement; el = el.parentElement) {
+        const overflowY = getComputedStyle(el).overflowY;
+        if ((overflowY === "auto" || overflowY === "scroll") && el.clientHeight * 2 >= window.innerHeight) {
+            return Math.max(0, el.getBoundingClientRect().top);
+        }
+    }
+    return 0;
+}
 export function buildOptionId({ listboxId, index }) {
     return `${listboxId}-option-${index}`;
 }
@@ -118,7 +140,7 @@ export function useSelectDropdown({ value, onChange, options, }, { disabled } =
         if (!showSearch || !query.trim())
             return options;
         const q = query.trim().toLowerCase();
-        return options.filter((o) => o.label.toLowerCase().includes(q));
+        return options.filter((o) => o.label.toLowerCase().includes(q) || Boolean(o.detail?.toLowerCase().includes(q)));
     }, [options, query, showSearch]);
     const selectedOption = options.find((o) => o.value === value) ?? null;
     function openPanel() {

package/dist/features/admin-widgets/components/Select/Select.js

@@ -3,12 +3,13 @@ import { resolveSelectPortalContainer } from '../../../../react/components/selec
 import { createPortal } from "react-dom";
 import { agentHandle } from "@jini-ai/agentic";
 import { buildAgentListHandles } from "@jini-ai/agentic";
-import { useSelectDropdown } from "./Select.hooks.js";
+import { Fragment } from "react";
+import { useSelectDropdown, groupHeadingAt } from "./Select.hooks.js";
 function SelectOptionRow({ option, index, isSelected, isHighlighted, optionId, setOptionRef, onHighlight, onSelect, agentHandle: optionHandle, }) {
-    return (_jsxs("li", { ref: (el) => setOptionRef(index, el), id: optionId, role: "option", "aria-selected": isSelected, className: `select-option${isSelected ? " is-selected" : ""}${isHighlighted ? " is-highlighted" : ""}`, onMouseEnter: () => onHighlight(index), onClick: () => onSelect(option), ...(optionHandle ? agentHandle({ handle: optionHandle }, { role: "button", label: option.label }) : {}), children: [_jsx("span", { className: "select-option-label", children: option.label }), isSelected ? (_jsx("svg", { className: "select-option-check", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M3.5 8.5 6.5 11.5 12.5 4.5", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) })) : null] }));
+    return (_jsxs("li", { ref: (el) => setOptionRef(index, el), id: optionId, role: "option", "aria-selected": isSelected, className: `select-option${isSelected ? " is-selected" : ""}${isHighlighted ? " is-highlighted" : ""}`, onMouseEnter: () => onHighlight(index), onClick: () => onSelect(option), ...(optionHandle ? agentHandle({ handle: optionHandle }, { role: "button", label: option.label }) : {}), children: [_jsx("span", { className: "select-option-label", children: option.label }), option.detail ? _jsx("span", { className: "select-option-detail", children: option.detail }) : null, option.badge ? _jsx("span", { className: "select-option-badge", children: option.badge }) : null, isSelected ? (_jsx("svg", { className: "select-option-check", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M3.5 8.5 6.5 11.5 12.5 4.5", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) })) : null] }));
 }
 function SelectPanel({ panelRef, position, showSearch, searchInputRef, query, setQuery, filtered, value, highlightedIndex, listboxId, optionId, setOptionRef, onHighlight, onSelect, onKeyDown, searchHandle, optionHandles, t, }) {
-    return (_jsxs("div", { ref: panelRef, className: "select-panel", style: { left: position.left, width: position.width, top: position.top, bottom: position.bottom, maxHeight: position.maxHeight }, tabIndex: -1, onKeyDown: onKeyDown, children: [showSearch ? (_jsx("input", { ref: searchInputRef, type: "text", className: "select-search", "aria-label": t("Search options"), placeholder: t("Search…"), value: query, onChange: (e) => setQuery(e.target.value), ...(searchHandle ? agentHandle({ handle: searchHandle }, { role: "field", label: "Search the option list" }) : {}) })) : null, _jsx("ul", { className: "select-list", role: "listbox", id: listboxId, children: filtered.length === 0 ? (_jsx("li", { className: "select-empty", role: "presentation", children: t("No matches") })) : (filtered.map((option, index) => (_jsx(SelectOptionRow, { option: option, index: index, isSelected: option.value === value, isHighlighted: index === highlightedIndex, optionId: optionId(index), setOptionRef: setOptionRef, onHighlight: onHighlight, onSelect: onSelect, agentHandle: optionHandles?.[index] }, option.value)))) })] }));
+    return (_jsxs("div", { ref: panelRef, className: "select-panel", style: { left: position.left, width: position.width, top: position.top, bottom: position.bottom, maxHeight: position.maxHeight }, tabIndex: -1, onKeyDown: onKeyDown, children: [showSearch ? (_jsx("input", { ref: searchInputRef, type: "text", className: "select-search", "aria-label": t("Search options"), placeholder: t("Search…"), value: query, onChange: (e) => setQuery(e.target.value), ...(searchHandle ? agentHandle({ handle: searchHandle }, { role: "field", label: "Search the option list" }) : {}) })) : null, _jsx("ul", { className: "select-list", role: "listbox", id: listboxId, children: filtered.length === 0 ? (_jsx("li", { className: "select-empty", role: "presentation", children: t("No matches") })) : (filtered.map((option, index) => (_jsxs(Fragment, { children: [groupHeadingAt({ options: filtered, index }) ? (_jsx("li", { className: "select-group-label", role: "presentation", children: option.group })) : null, _jsx(SelectOptionRow, { option: option, index: index, isSelected: option.value === value, isHighlighted: index === highlightedIndex, optionId: optionId(index), setOptionRef: setOptionRef, onHighlight: onHighlight, onSelect: onSelect, agentHandle: optionHandles?.[index] })] }, option.value)))) })] }));
 }
 export function resolveSelectTriggerLabel({ selectedOption, placeholder }, { t = (key) => key } = {}) {
     if (selectedOption)

package/dist/features/admin-widgets/components/SuggestInput/SuggestInput.hooks.js

@@ -13,6 +13,13 @@ export function useSuggestInput({ value, suggestions }, { limit } = {}) {
     const matches = matchSuggestions({ typed: value, suggestions }, { limit });
     const visible = open && matches.length > 0;
     const current = highlighted < matches.length ? highlighted : -1;
+    const close = () => { setOpen(false); setHighlighted(-1); };
+    const move = (step) => {
+        setOpen(true);
+        const next = nextHighlight({ current, step, count: matches.length });
+        setHighlighted(next);
+        setScrollTarget({ index: next });
+    };
     return {
         open: visible,
         matches,
@@ -20,33 +27,41 @@ export function useSuggestInput({ value, suggestions }, { limit } = {}) {
         setHighlighted,
         scrollTarget,
         openList: () => setOpen(true),
-        closeList: () => { setOpen(false); setHighlighted(-1); },
+        closeList: close,
         handleKey: (key) => {
-            if (key === 'ArrowDown' || key === 'ArrowUp') {
+            const step = arrowStep(key);
+            if (step !== undefined) {
                 if (matches.length === 0)
                     return { consumed: false };
-                setOpen(true);
-                const step = key === 'ArrowDown' ? 1 : -1;
-                const next = (current + step + matches.length + (current === -1 && step === -1 ? 1 : 0)) % matches.length;
-                setHighlighted(next);
-                setScrollTarget({ index: next });
+                move(step);
                 return { consumed: true };
             }
             if (key === 'Escape' && visible) {
-                setOpen(false);
-                setHighlighted(-1);
+                close();
                 return { consumed: true };
             }
-            const picked = current >= 0 ? matches[current] : undefined;
-            if (key === 'Enter' && visible && picked !== undefined) {
-                setOpen(false);
-                setHighlighted(-1);
-                return { consumed: true, picked };
+            if (key === 'Enter' && visible && current >= 0) {
+                close();
+                return { consumed: true, picked: matches[current] };
             }
             return { consumed: false };
         },
     };
 }
+/** +1 for ArrowDown, -1 for ArrowUp, undefined for every other key. */
+function arrowStep(key) {
+    if (key === 'ArrowDown')
+        return 1;
+    if (key === 'ArrowUp')
+        return -1;
+    return undefined;
+}
+/** The row an arrow key moves to, wrapping at either end; from no highlight, ArrowUp lands on the last row. */
+function nextHighlight({ current, step, count }) {
+    if (current === -1)
+        return step === 1 ? 0 : count - 1;
+    return (current + step + count) % count;
+}
 /** Default scroller: `block: 'nearest'` moves the list only as far as needed. Optional call because
  *  non-browser DOMs (jsdom in host test suites) don't implement `scrollIntoView`. */
 export function scrollOptionIntoView(option) {

package/dist/features/admin-widgets/index.d.ts

@@ -14,8 +14,10 @@ export type { SeeMoreProps, SeeMoreView } from './components/SeeMore/SeeMore.js'
 export { useSeeMoreClamp } from './components/SeeMore/SeeMore.hooks.js';
 export { ImagePreviewModal } from './components/ImagePreviewModal.js';
 export type { ImagePreviewModalProps } from './components/ImagePreviewModal.js';
-export { useImagePreviewModal } from './components/ImagePreviewModal.hooks.js';
-export type { ImagePreviewModalController } from './components/ImagePreviewModal.hooks.js';
+export { Lightbox } from './components/Lightbox/Lightbox.js';
+export type { LightboxProps } from './components/Lightbox/Lightbox.js';
+export { useLightbox, openLightboxDialog, closeLightboxDialog } from './components/Lightbox/Lightbox.hooks.js';
+export type { LightboxController, LightboxHookInput } from './components/Lightbox/Lightbox.hooks.js';
 export { ComingSoonPanel } from './components/ComingSoonPanel.js';
 export type { ComingSoonPanelProps } from './components/ComingSoonPanel.js';
 export { ComingSoonNotice } from './components/ComingSoonNotice.js';
@@ -26,4 +28,14 @@ export { useSuggestInput, matchSuggestions } from './components/SuggestInput/Sug
 export type { SuggestInputController } from './components/SuggestInput/SuggestInput.hooks.js';
 export { useDebouncedHtmlPreview } from './components/useDebouncedHtmlPreview.hooks.js';
 export type { HtmlPreviewPort, HtmlPreviewState } from './components/useDebouncedHtmlPreview.hooks.js';
+export { MiddleTruncate } from './components/MiddleTruncate.js';
+export type { MiddleTruncateProps } from './components/MiddleTruncate.js';
+export { splitMiddleTruncation } from './components/MiddleTruncate.rules.js';
+export type { MiddleTruncationParts } from './components/MiddleTruncate.rules.js';
+export { ScrollJumpButtons } from './components/ScrollJump/ScrollJump.js';
+export type { ScrollJumpButtonsProps } from './components/ScrollJump/ScrollJump.js';
+export { useScrollJump } from './components/ScrollJump/ScrollJump.hooks.js';
+export type { ScrollJumpController } from './components/ScrollJump/ScrollJump.hooks.js';
+export { scrollJumpVisibility, scrollJumpBehavior, scrollJumpTarget } from './components/ScrollJump/ScrollJump.rules.js';
+export type { ScrollJumpVisibility, ScrollMetrics } from './components/ScrollJump/ScrollJump.rules.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/features/admin-widgets/index.js

@@ -7,10 +7,16 @@ export { placeInfoTipBubble, infoTipBubbleStyle } from './components/InfoTip.rul
 export { SeeMore, resolveSeeMoreView } from './components/SeeMore/SeeMore.js';
 export { useSeeMoreClamp } from './components/SeeMore/SeeMore.hooks.js';
 export { ImagePreviewModal } from './components/ImagePreviewModal.js';
-export { useImagePreviewModal } from './components/ImagePreviewModal.hooks.js';
+export { Lightbox } from './components/Lightbox/Lightbox.js';
+export { useLightbox, openLightboxDialog, closeLightboxDialog } from './components/Lightbox/Lightbox.hooks.js';
 export { ComingSoonPanel } from './components/ComingSoonPanel.js';
 export { ComingSoonNotice } from './components/ComingSoonNotice.js';
 export { SuggestInput } from './components/SuggestInput/SuggestInput.js';
 export { useSuggestInput, matchSuggestions } from './components/SuggestInput/SuggestInput.hooks.js';
 export { useDebouncedHtmlPreview } from './components/useDebouncedHtmlPreview.hooks.js';
+export { MiddleTruncate } from './components/MiddleTruncate.js';
+export { splitMiddleTruncation } from './components/MiddleTruncate.rules.js';
+export { ScrollJumpButtons } from './components/ScrollJump/ScrollJump.js';
+export { useScrollJump } from './components/ScrollJump/ScrollJump.hooks.js';
+export { scrollJumpVisibility, scrollJumpBehavior, scrollJumpTarget } from './components/ScrollJump/ScrollJump.rules.js';
 //# sourceMappingURL=index.js.map

package/dist/features/admin-widgets/styles/admin-widgets.css

@@ -1,2 +1,3 @@
 /* Existing ui subpath continues to load the merged admin styles. */
 @import "../../../styles/admin.css";
+@import "../../../styles/lightbox.css";

package/dist/features/asset-grid/react/components/AssetCard.js

@@ -3,9 +3,15 @@ import { useCallback } from 'react';
 import { useT } from '../../../i18n/index.js';
 import { useInView } from '../../../../react/hooks/useInView.js';
 import { resolveCheckboxClickAction, resolvePreviewClickAction } from '../../rules.js';
+function renderCardActions({ asset, renderCardExtra, onDeleteAsset, t }, _options = {}) {
+    if (!renderCardExtra && !onDeleteAsset)
+        return null;
+    return (_jsxs("div", { className: "asset-grid-card-actions", children: [renderCardExtra ? renderCardExtra(asset) : _jsx("span", {}), onDeleteAsset ? (_jsx("button", { type: "button", className: "asset-grid-card-delete-btn", onClick: () => onDeleteAsset(asset.id), children: t('Remove') })) : null] }));
+}
 export function AssetCard({ asset, index, selected, title, subtitle, kindLabel, sourceLabel, renderThumbnail, renderThumbnailPlaceholder, onToggle, onRange, onPreview, onDeleteAsset, renderCardExtra, }) {
     const t = useT();
     const { ref, inView } = useInView({ once: true, rootMargin: '300px' });
+    const selectionValue = selected ? 'true' : 'false';
     const handlePreviewClick = useCallback((e) => {
         const action = resolvePreviewClickAction(e);
         if (action === 'toggle')
@@ -22,6 +28,6 @@ export function AssetCard({ asset, index, selected, title, subtitle, kindLabel,
         else
             onToggle(asset.id, index);
     }, [asset.id, index, onToggle, onRange]);
-    return (_jsxs("figure", { className: "asset-grid-card", "data-asset-grid-id": asset.id, "data-selected": selected ? 'true' : 'false', children: [_jsxs("div", { className: "asset-grid-card-thumb", children: [_jsx("div", { ref: ref, className: "asset-grid-card-thumb-lazy", children: inView ? renderThumbnail(asset) : (renderThumbnailPlaceholder?.(asset) ?? null) }), _jsx("button", { type: "button", className: "asset-grid-card-preview-btn", onClick: handlePreviewClick, "aria-label": t('Preview {title}', { title }), children: _jsx("span", { className: "asset-grid-card-preview-overlay", "aria-hidden": true, children: _jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("circle", { cx: "11", cy: "11", r: "7" }), _jsx("path", { d: "m21 21-4.3-4.3" })] }) }) }), _jsx("button", { type: "button", className: "asset-grid-card-select-check", "data-checked": selected ? 'true' : 'false', "aria-pressed": selected, "aria-label": selected ? t('Deselect asset') : t('Select asset'), onClick: handleCheckboxClick, children: selected ? (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: _jsx("path", { d: "M20 6 9 17l-5-5" }) })) : null }), sourceLabel ? (_jsx("span", { className: "asset-grid-card-badge", "data-badge": "source", children: sourceLabel })) : null, kindLabel ? (_jsx("span", { className: "asset-grid-card-badge", "data-badge": "kind", children: kindLabel })) : null] }), _jsxs("figcaption", { className: "asset-grid-card-meta", children: [_jsx("button", { type: "button", className: "asset-grid-card-title", title: title, onClick: () => onPreview(asset.id), children: title }), subtitle ? _jsx("span", { className: "asset-grid-card-subtitle", children: subtitle }) : null] }), renderCardExtra || onDeleteAsset ? (_jsxs("div", { className: "asset-grid-card-actions", children: [renderCardExtra ? renderCardExtra(asset) : _jsx("span", {}), onDeleteAsset ? (_jsx("button", { type: "button", className: "asset-grid-card-delete-btn", onClick: () => onDeleteAsset(asset.id), children: t('Remove') })) : null] })) : null] }));
+    return (_jsxs("figure", { className: "asset-grid-card", "data-asset-grid-id": asset.id, "data-selected": selectionValue, children: [_jsxs("div", { className: "asset-grid-card-thumb", children: [_jsx("div", { ref: ref, className: "asset-grid-card-thumb-lazy", children: inView ? renderThumbnail(asset) : (renderThumbnailPlaceholder?.(asset) ?? null) }), _jsx("button", { type: "button", className: "asset-grid-card-preview-btn", onClick: handlePreviewClick, "aria-label": t('Preview {title}', { title }), children: _jsx("span", { className: "asset-grid-card-preview-overlay", "aria-hidden": true, children: _jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("circle", { cx: "11", cy: "11", r: "7" }), _jsx("path", { d: "m21 21-4.3-4.3" })] }) }) }), _jsx("button", { type: "button", className: "asset-grid-card-select-check", "data-checked": selectionValue, "aria-pressed": selected, "aria-label": selected ? t('Deselect asset') : t('Select asset'), onClick: handleCheckboxClick, children: selected ? (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: _jsx("path", { d: "M20 6 9 17l-5-5" }) })) : null }), sourceLabel ? (_jsx("span", { className: "asset-grid-card-badge", "data-badge": "source", children: sourceLabel })) : null, kindLabel ? (_jsx("span", { className: "asset-grid-card-badge", "data-badge": "kind", children: kindLabel })) : null] }), _jsxs("figcaption", { className: "asset-grid-card-meta", children: [_jsx("button", { type: "button", className: "asset-grid-card-title", title: title, onClick: () => onPreview(asset.id), children: title }), subtitle ? _jsx("span", { className: "asset-grid-card-subtitle", children: subtitle }) : null] }), renderCardActions({ asset, renderCardExtra, onDeleteAsset, t })] }));
 }
 //# sourceMappingURL=AssetCard.js.map

package/dist/features/asset-grid/react/components/AssetGrid.d.ts

@@ -41,5 +41,5 @@ export interface AssetGridProps<TAsset extends AssetGridItem> {
  * pattern behind a photo library / DAM. See `packages/ui/source-map.md` for
  * the full retained-behavior manifest against the original `LibrarySection.tsx`.
  */
-export declare function AssetGrid<TAsset extends AssetGridItem>({ active, selectors, dependencies, kindFacets, sourceFacets, renderThumbnail, renderThumbnailPlaceholder, renderCardExtra, renderBulkActions, onDeleteAsset, onDeleteSelected, onPreview, isPreviewOpen, toolbarActions, emptyState, searchPlaceholder, searchDebounceMs, liveUpdateCoalesceMs, initialViewMode, useWiredAssetGridData: useWiredAssetGridDataHook, useAssetGridSelection: useAssetGridSelectionHook, }: AssetGridProps<TAsset>): import("react").JSX.Element;
+export declare function AssetGrid<TAsset extends AssetGridItem>({ active, selectors, dependencies, kindFacets: configuredKindFacets, sourceFacets: configuredSourceFacets, renderThumbnail, renderThumbnailPlaceholder, renderCardExtra, renderBulkActions, onDeleteAsset, onDeleteSelected, onPreview, isPreviewOpen, toolbarActions, emptyState, searchPlaceholder, searchDebounceMs, liveUpdateCoalesceMs, initialViewMode, useWiredAssetGridData: useWiredAssetGridDataHook, useAssetGridSelection: useAssetGridSelectionHook, }: AssetGridProps<TAsset>): import("react").JSX.Element;
 //# sourceMappingURL=AssetGrid.d.ts.map

package/dist/features/asset-grid/react/components/AssetGrid.js

@@ -1,36 +1,42 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { useT } from '../../../i18n/index.js';
-import { useDebouncedValue } from '../../../../react/hooks/useDebouncedValue.js';
-import { DEFAULT_SEARCH_DEBOUNCE_MS } from '../../constants.js';
-import { buildFacetLabelMap, dayKeyFromTimestamp, resolveFacetLabel } from '../../rules.js';
+import { dayKeyFromTimestamp, resolveFacetLabel } from '../../rules.js';
 import { useWiredAssetGridData } from '../hooks/useAssetGridData.js';
 import { useWiredAssetGridLiveUpdates } from '../hooks/useAssetGridLiveUpdates.js';
 import { useAssetGridSelection } from '../hooks/useAssetGridSelection.js';
 import { useRubberBandDrag } from '../hooks/useRubberBandDrag.js';
 import { useAssetGridKeyboardShortcuts } from '../hooks/useAssetGridKeyboardShortcuts.js';
+import { useAssetGridFilters } from './useAssetGridFilters.js';
 import { AssetCard } from './AssetCard.js';
 import { AssetGridBody } from './AssetGridBody.js';
 import { AssetGridToolbar } from './AssetGridToolbar.js';
 import { SelectionActionBar } from './SelectionActionBar.js';
 import { SelectionBand } from './SelectionBand.js';
 import { DeleteConfirmDialog } from './DeleteConfirmDialog.js';
+function renderGridContent({ loading, emptyState, t, ...bodyProps }, _options = {}) {
+    if (loading && bodyProps.assets.length === 0)
+        return _jsx("p", { className: "asset-grid-empty", children: t('Loading…') });
+    if (bodyProps.assets.length === 0)
+        return emptyState ?? _jsx("div", { className: "asset-grid-empty", children: t('No assets yet.') });
+    return _jsx(AssetGridBody, { ...bodyProps });
+}
 /**
  * A live-updating, filterable, multi-selectable asset grid — the generic
  * pattern behind a photo library / DAM. See `packages/ui/source-map.md` for
  * the full retained-behavior manifest against the original `LibrarySection.tsx`.
  */
-export function AssetGrid({ active = true, selectors, dependencies, kindFacets = [], sourceFacets = [], renderThumbnail, renderThumbnailPlaceholder, renderCardExtra, renderBulkActions, onDeleteAsset, onDeleteSelected, onPreview, isPreviewOpen = false, toolbarActions, emptyState, searchPlaceholder, searchDebounceMs = DEFAULT_SEARCH_DEBOUNCE_MS, liveUpdateCoalesceMs, initialViewMode = 'grid', useWiredAssetGridData: useWiredAssetGridDataHook = useWiredAssetGridData, useAssetGridSelection: useAssetGridSelectionHook = useAssetGridSelection, }) {
+export function AssetGrid({ active = true, selectors, dependencies, kindFacets: configuredKindFacets, sourceFacets: configuredSourceFacets, renderThumbnail, renderThumbnailPlaceholder, renderCardExtra, renderBulkActions, onDeleteAsset, onDeleteSelected, onPreview, isPreviewOpen = false, toolbarActions, emptyState, searchPlaceholder, searchDebounceMs, liveUpdateCoalesceMs, initialViewMode = 'grid', useWiredAssetGridData: useWiredAssetGridDataHook = useWiredAssetGridData, useAssetGridSelection: useAssetGridSelectionHook = useAssetGridSelection, }) {
     const t = useT();
-    const [kind, setKind] = useState('');
-    const [source, setSource] = useState('');
-    const [search, setSearch] = useState('');
+    const { kind, setKind, source, setSource, search, setSearch, debouncedSearch, filtersActive, kindFacets, sourceFacets, kindFacetLabels, sourceFacetLabels, } = useAssetGridFilters({
+        kindFacets: configuredKindFacets,
+        sourceFacets: configuredSourceFacets,
+        searchDebounceMs,
+    });
     const [viewMode, setViewMode] = useState(initialViewMode);
     const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
     /** Message from a delete the host rejected. Rendered inline — see `runDelete`. */
     const [deleteError, setDeleteError] = useState(null);
-    const debouncedSearch = useDebouncedValue({ value: search, delayMs: searchDebounceMs });
-    const filtersActive = !!(kind || source || debouncedSearch.trim());
     // `dependencies` (host-supplied, or omitted to fall back to the package's
     // in-memory fake) is resolved by each wirer independently — neither this
     // component nor the real `useAssetGridData`/`useAssetGridLiveUpdates`
@@ -102,11 +108,16 @@ export function AssetGrid({ active = true, selectors, dependencies, kindFacets =
             setSelectedIds(new Set());
         });
     }, [selectedIds, onDeleteSelected, setAssets, setSelectedIds, runDelete]);
-    const handleDeleteAsset = useCallback(async (id) => {
-        await runDelete(onDeleteAsset ? (batch) => onDeleteAsset(batch[0]) : null, [id], () => {
-            setAssets((prev) => prev.filter((a) => a.id !== id));
-        });
-    }, [onDeleteAsset, setAssets, runDelete]);
+    // Built only when the host supplied `onDeleteAsset`: the card shows its per-asset delete control
+    // only when it receives a handler, so there is no "no handler" path to route through `runDelete`
+    // here (the old inline `onDeleteAsset ? … : null` could never see `null` from a rendered card).
+    const handleDeleteAsset = useMemo(() => onDeleteAsset
+        ? async (id) => {
+            await runDelete((batch) => onDeleteAsset(batch[0]), [id], () => {
+                setAssets((prev) => prev.filter((a) => a.id !== id));
+            });
+        }
+        : undefined, [onDeleteAsset, setAssets, runDelete]);
     const handlePreview = useCallback((id) => {
         const asset = assets.find((a) => a.id === id);
         if (asset)
@@ -122,13 +133,11 @@ export function AssetGrid({ active = true, selectors, dependencies, kindFacets =
         onClearSelection: clearSelection,
         onRequestDeleteSelected: requestDeleteSelected,
     });
-    const kindFacetLabels = useMemo(() => buildFacetLabelMap(kindFacets), [kindFacets]);
-    const sourceFacetLabels = useMemo(() => buildFacetLabelMap(sourceFacets), [sourceFacets]);
     const getDayKey = useMemo(() => selectors.getDayKey ?? ((asset) => dayKeyFromTimestamp(selectors.getTimestamp(asset))), [selectors]);
     const renderCard = useCallback((asset, index) => {
         const kindValue = selectors.getKind(asset);
         const sourceValue = selectors.getSource?.(asset);
-        return (_jsx(AssetCard, { asset: asset, index: index, selected: selectedIds.has(asset.id), title: selectors.getTitle(asset), subtitle: selectors.getSubtitle?.(asset), kindLabel: resolveFacetLabel(kindValue, kindFacetLabels), sourceLabel: sourceValue ? resolveFacetLabel(sourceValue, sourceFacetLabels) : undefined, renderThumbnail: renderThumbnail, renderThumbnailPlaceholder: renderThumbnailPlaceholder, onToggle: toggleOne, onRange: rangeTo, onPreview: handlePreview, onDeleteAsset: onDeleteAsset ? handleDeleteAsset : undefined, renderCardExtra: renderCardExtra }, asset.id));
+        return (_jsx(AssetCard, { asset: asset, index: index, selected: selectedIds.has(asset.id), title: selectors.getTitle(asset), subtitle: selectors.getSubtitle?.(asset), kindLabel: resolveFacetLabel(kindValue, kindFacetLabels), sourceLabel: sourceValue ? resolveFacetLabel(sourceValue, sourceFacetLabels) : undefined, renderThumbnail: renderThumbnail, renderThumbnailPlaceholder: renderThumbnailPlaceholder, onToggle: toggleOne, onRange: rangeTo, onPreview: handlePreview, onDeleteAsset: handleDeleteAsset, renderCardExtra: renderCardExtra }, asset.id));
     }, [
         selectedIds,
         selectors,
@@ -143,6 +152,17 @@ export function AssetGrid({ active = true, selectors, dependencies, kindFacets =
         handleDeleteAsset,
         renderCardExtra,
     ]);
-    return (_jsxs("div", { className: "asset-grid-root", children: [_jsx(AssetGridToolbar, { search: search, onSearchChange: setSearch, searchPlaceholder: searchPlaceholder, kind: kind, onKindChange: setKind, kindFacets: kindFacets, source: source, onSourceChange: setSource, sourceFacets: sourceFacets, viewMode: viewMode, onViewModeChange: setViewMode, onRefresh: () => void reload(), loading: loading, toolbarActions: toolbarActions }), selectedIds.size > 0 && !dragging ? (_jsx(SelectionActionBar, { selectedIds: [...selectedIds], onSelectAll: selectAll, onClear: clearSelection, onRequestDelete: requestDeleteSelected, renderBulkActions: renderBulkActions })) : null, loading && assets.length === 0 ? (_jsx("p", { className: "asset-grid-empty", children: t('Loading…') })) : assets.length === 0 ? ((emptyState ?? _jsx("div", { className: "asset-grid-empty", children: t('No assets yet.') }))) : (_jsx(AssetGridBody, { viewMode: viewMode, assets: assets, getDayKey: getDayKey, containerRef: containerRef, onMouseDown: onMouseDown, selecting: selectedIds.size > 0, renderCard: renderCard })), _jsx(SelectionBand, { band: band }), deleteError ? (_jsx("p", { className: "jini-hint jini-hint-error", role: "alert", children: deleteError })) : null, confirmDeleteOpen ? (_jsx(DeleteConfirmDialog, { count: selectedIds.size, onCancel: () => setConfirmDeleteOpen(false), onConfirm: () => void confirmDelete() })) : null] }));
+    return (_jsxs("div", { className: "asset-grid-root", children: [_jsx(AssetGridToolbar, { search: search, onSearchChange: setSearch, searchPlaceholder: searchPlaceholder, kind: kind, onKindChange: setKind, kindFacets: kindFacets, source: source, onSourceChange: setSource, sourceFacets: sourceFacets, viewMode: viewMode, onViewModeChange: setViewMode, onRefresh: () => void reload(), loading: loading, toolbarActions: toolbarActions }), selectedIds.size > 0 && !dragging ? (_jsx(SelectionActionBar, { selectedIds: [...selectedIds], onSelectAll: selectAll, onClear: clearSelection, onRequestDelete: requestDeleteSelected, renderBulkActions: renderBulkActions })) : null, renderGridContent({
+                loading,
+                emptyState,
+                t,
+                viewMode,
+                assets,
+                getDayKey,
+                containerRef,
+                onMouseDown,
+                selecting: selectedIds.size > 0,
+                renderCard,
+            }), _jsx(SelectionBand, { band: band }), deleteError ? (_jsx("p", { className: "jini-hint jini-hint-error", role: "alert", children: deleteError })) : null, confirmDeleteOpen ? (_jsx(DeleteConfirmDialog, { count: selectedIds.size, onCancel: () => setConfirmDeleteOpen(false), onConfirm: () => void confirmDelete() })) : null] }));
 }
 //# sourceMappingURL=AssetGrid.js.map

package/dist/features/asset-grid/react/components/useAssetGridFilters.d.ts

@@ -0,0 +1,21 @@
+import type { AssetGridFacetOption } from '../../types.js';
+/** Owns the editable filters and the debounced membership used by data/live updates. */
+export declare function useAssetGridFilters({ kindFacets, sourceFacets, searchDebounceMs, }: {
+    kindFacets: AssetGridFacetOption[] | undefined;
+    sourceFacets: AssetGridFacetOption[] | undefined;
+    searchDebounceMs: number | undefined;
+}, _options?: Record<string, never>): {
+    kind: string;
+    setKind: import("react").Dispatch<import("react").SetStateAction<string>>;
+    source: string;
+    setSource: import("react").Dispatch<import("react").SetStateAction<string>>;
+    search: string;
+    setSearch: import("react").Dispatch<import("react").SetStateAction<string>>;
+    debouncedSearch: string;
+    filtersActive: boolean;
+    kindFacets: AssetGridFacetOption[];
+    sourceFacets: AssetGridFacetOption[];
+    kindFacetLabels: Map<string, string>;
+    sourceFacetLabels: Map<string, string>;
+};
+//# sourceMappingURL=useAssetGridFilters.d.ts.map

package/dist/features/asset-grid/react/components/useAssetGridFilters.js

@@ -0,0 +1,19 @@
+import { useMemo, useState } from 'react';
+import { useDebouncedValue } from '../../../../react/hooks/useDebouncedValue.js';
+import { DEFAULT_SEARCH_DEBOUNCE_MS } from '../../constants.js';
+import { buildFacetLabelMap } from '../../rules.js';
+/** Owns the editable filters and the debounced membership used by data/live updates. */
+export function useAssetGridFilters({ kindFacets = [], sourceFacets = [], searchDebounceMs = DEFAULT_SEARCH_DEBOUNCE_MS, }, _options = {}) {
+    const [kind, setKind] = useState('');
+    const [source, setSource] = useState('');
+    const [search, setSearch] = useState('');
+    const debouncedSearch = useDebouncedValue({ value: search, delayMs: searchDebounceMs });
+    const filtersActive = !!(kind || source || debouncedSearch.trim());
+    const kindFacetLabels = useMemo(() => buildFacetLabelMap(kindFacets), [kindFacets]);
+    const sourceFacetLabels = useMemo(() => buildFacetLabelMap(sourceFacets), [sourceFacets]);
+    return {
+        kind, setKind, source, setSource, search, setSearch,
+        debouncedSearch, filtersActive, kindFacets, sourceFacets, kindFacetLabels, sourceFacetLabels,
+    };
+}
+//# sourceMappingURL=useAssetGridFilters.js.map

package/dist/features/asset-grid/react/hooks/useAssetGridKeyboardShortcuts.js

@@ -1,5 +1,19 @@
 import { useGlobalKeydown } from '../../../../browser/index.js';
 import { isTypingTarget } from '../../rules.js';
+function handleSelectionKey({ event, typing, hasSelection, isPreviewOpen, onClearSelection, onRequestDeleteSelected }, _options = {}) {
+    if (event.key === 'Escape') {
+        if (isPreviewOpen)
+            return; // the preview surface owns Escape while it's open
+        if (hasSelection)
+            onClearSelection();
+    }
+    else if (event.key === 'Delete' || event.key === 'Backspace') {
+        if (typing || isPreviewOpen || !hasSelection)
+            return;
+        event.preventDefault();
+        onRequestDeleteSelected();
+    }
+}
 /** Cmd/Ctrl+A select-all, Escape clear-selection, Delete/Backspace triggers the bulk-delete confirm flow. */
 export function useAssetGridKeyboardShortcuts(params) {
     const { active, enabled, hasAssets, hasSelection, isPreviewOpen, onSelectAll, onClearSelection, onRequestDeleteSelected, } = params;
@@ -14,17 +28,8 @@ export function useAssetGridKeyboardShortcuts(params) {
                 e.preventDefault();
                 onSelectAll();
             }
-            else if (e.key === 'Escape') {
-                if (isPreviewOpen)
-                    return; // the preview surface owns Escape while it's open
-                if (hasSelection)
-                    onClearSelection();
-            }
-            else if (e.key === 'Delete' || e.key === 'Backspace') {
-                if (typing || isPreviewOpen || !hasSelection)
-                    return;
-                e.preventDefault();
-                onRequestDeleteSelected();
+            else {
+                handleSelectionKey({ event: e, typing, hasSelection, isPreviewOpen, onClearSelection, onRequestDeleteSelected });
             }
         },
     }, { enabled: active });

package/dist/features/asset-grid/react/hooks/useAssetGridLiveUpdates.d.ts

@@ -19,6 +19,8 @@ export interface UseAssetGridLiveUpdatesParams<TAsset extends AssetGridItem> {
  * id all fall back to a single full reload for that window — see
  * `packages/ui/archived provenance ledger` for why (the original OD comment: "a filtered
  * view can't predict membership client-side").
+ * Disposed subscriptions discard in-flight incremental reads. Failed passes report a
+ * fixed diagnostic and request a full reconciliation on the next live event.
  */
 export declare function useAssetGridLiveUpdates<TAsset extends AssetGridItem>(params: UseAssetGridLiveUpdatesParams<TAsset>): void;
 export type UseWiredAssetGridLiveUpdatesParams<TAsset extends AssetGridItem> = Omit<UseAssetGridLiveUpdatesParams<TAsset>, 'liveUpdates' | 'fetchAssetById'> & {

package/dist/features/asset-grid/react/hooks/useAssetGridLiveUpdates.js

@@ -2,6 +2,18 @@ import { useEffect, useMemo, useRef } from 'react';
 import { DEFAULT_LIVE_UPDATE_COALESCE_MS } from '../../constants.js';
 import { mergeIngestedAssets } from '../../rules.js';
 import { createFakeAssetGridDependencies } from '../../dependencies.js';
+/** Drains pending deletes and cancels matching ingests before the pass can fetch.
+ * Mutates the pending sets and schedules the asset update. @complexity O(d + a) deletes and assets. */
+function applyPendingDeletes({ pendingDelete, pendingIngest, setAssets }, _options = {}) {
+    // Deletes are free (no fetch); apply them first.
+    if (pendingDelete.size) {
+        const del = new Set(pendingDelete);
+        pendingDelete.clear();
+        for (const id of del)
+            pendingIngest.delete(id);
+        setAssets((prev) => prev.filter((a) => !del.has(a.id)));
+    }
+}
 /**
  * Subscribes to a live-update transport and reconciles incremental
  * ingest/delete events into the current asset list. Events are coalesced
@@ -11,6 +23,8 @@ import { createFakeAssetGridDependencies } from '../../dependencies.js';
  * id all fall back to a single full reload for that window — see
  * `packages/ui/archived provenance ledger` for why (the original OD comment: "a filtered
  * view can't predict membership client-side").
+ * Disposed subscriptions discard in-flight incremental reads. Failed passes report a
+ * fixed diagnostic and request a full reconciliation on the next live event.
  */
 export function useAssetGridLiveUpdates(params) {
     const { active, liveUpdates, filtersActive, fetchAssetById, setAssets, reload, coalesceMs = DEFAULT_LIVE_UPDATE_COALESCE_MS } = params;
@@ -33,19 +47,17 @@ export function useAssetGridLiveUpdates(params) {
     useEffect(() => {
         if (!active || !liveUpdates)
             return;
+        let disposed = false;
         let timer = null;
         const pendingIngest = new Set();
         const pendingDelete = new Set();
         let pendingFull = false;
+        // No `disposed` check on entry: a pass only ever starts from `flush`, whose first pass runs
+        // synchronously from a timer that cleanup cancels, and whose later passes are gated by the loop's
+        // own `!disposed` condition — so a pass can never begin after disposal. The post-fetch check
+        // below still matters, because disposal can land while a pass is awaiting.
         const runFlushPass = async () => {
-            // Deletes are free (no fetch); apply them first.
-            if (pendingDelete.size) {
-                const del = new Set(pendingDelete);
-                pendingDelete.clear();
-                for (const id of del)
-                    pendingIngest.delete(id);
-                setAssets((prev) => prev.filter((a) => !del.has(a.id)));
-            }
+            applyPendingDeletes({ pendingDelete, pendingIngest, setAssets });
             if (pendingFull || filtersActiveRef.current) {
                 pendingFull = false;
                 pendingIngest.clear();
@@ -61,6 +73,9 @@ export function useAssetGridLiveUpdates(params) {
                     return;
                 }
                 const fetched = await Promise.all(ids.map((id) => fetchById(id)));
+                // The same state setter can outlive this subscription (for example after deactivation).
+                if (disposed)
+                    return;
                 // A missing fetch is ambiguous (filtered out? race?) — reload instead.
                 if (fetched.some((a) => a === null)) {
                     await reloadRef.current();
@@ -105,15 +120,23 @@ export function useAssetGridLiveUpdates(params) {
             try {
                 do {
                     rerun = false;
-                    await runFlushPass();
-                } while (rerun);
+                    try {
+                        await runFlushPass();
+                    }
+                    catch {
+                        if (!disposed) {
+                            pendingFull = true;
+                            console.error('[asset-grid] Live update failed.');
+                        }
+                    }
+                } while (rerun && !disposed);
             }
             finally {
                 flushing = false;
             }
         };
         const schedule = () => {
-            if (timer)
+            if (disposed || timer)
                 return;
             timer = setTimeout(() => void flush(), coalesceMs);
         };
@@ -132,6 +155,7 @@ export function useAssetGridLiveUpdates(params) {
             },
         });
         return () => {
+            disposed = true;
             if (timer)
                 clearTimeout(timer);
             unsubscribe();