@keepkit/ui 0.19.0 → 0.20.0

package/README.md

@@ -60,7 +60,7 @@ function SavedArticles() {
 `KeepCollection`は検索語と選択タグを`KeepActiveFiltersSummary`のチップとして表示し、個別解除と「すべての条件をクリア」を提供します。`activeFilters`でこの領域を差し替えられます。標準の`KeepList` / `KeepCollection`は、全件0件の`empty-storage`と絞り込み結果0件の`empty-filtered`を区別し、後者では`onClearFilters`付きの解除ボタンを表示します。
 `KeepItemCard`は`href`、`onOpen`、`linkTarget`、`linkComponent`に対応し、保存アイテムから詳細ページへ遷移できます。非公開・期限切れ等の`status`を持つアイテムは自動的にリンクを無効化します。`KeepBackup`はJSONのエクスポート、merge / replaceインポート、結果件数、容量エラー表示を提供します。
 `KeepTourBar`（alias: `KeepNavigator`）は進行度、前へ・次へ、一覧へ戻る操作をURLまたはコールバックで提供します。前後ボタンには隣接アイテム名のプレビューが付き、`getItemTitle`で表示名を差し替えられます。`keyboardShortcuts`を指定するとJ/Kまたは]/[で巡回でき、`useKeepTourShortcuts`ではキーと動作を個別に差し替えられます。`KeepReorderableList`はドラッグ操作と矢印キーによる並び替えを提供し、ドラッグ中の挿入位置を表示します。
-`KeepShortcutHint`はセマンティックな`<kbd>`バッジを表示します。`KeepTourBar showShortcutHint`は前へ/次へのキーを、`KeepNoteEditor showShortcutHint`は`Ctrl+Enter`を標準ボタン内に表示します。`mergeProps` / `createSlot`は`asChild`でclassName、style、ARIA属性、イベントを合成する共通基盤です。
+`KeepShortcutHint`はセマンティックな`<kbd>`バッジを表示します。`KeepTourBar showShortcutHint`は前へ/次へのキーを、`KeepNoteEditor showShortcutHint`は`Ctrl+Enter`を標準ボタン内に表示します。`mergeProps` / `createSlot`は`asChild`でclassName、style、ARIA属性、イベント、子と親のrefを合成し、`composeRefs`はcallback refとobject refをまとめる共通基盤です。フィルターチップは削除後に隣接チップへ戻り、ArrowLeft / ArrowRightで移動できます。
 `KeepList`や`KeepCollection`のカードは検索語を大文字小文字を区別せず`<mark class="keep-highlight" data-highlight="true">`で表示します。単体の`KeepItemCard`では`highlightQuery`、任意のテキストでは`KeepHighlight`を使えます。`KeepItemCard.Media`は読み込み状態を`data-media-status`で公開し、失敗時は`fallback`または標準SVGへ切り替わります。
 テーマCSSではハイライト用の`--keep-highlight-bg` / `--keep-highlight-fg`（ライト／ダーク対応）、タイトル2行・メモプレビュー3行の制限、メディアの固定アスペクト比を適用します。`KeepItemStatusBadge`は状態ラベルに加えてチェック・時計・進入禁止・鍵のSVGアイコンを表示し、状態ごとの形状とトーンを組み合わせます。個別の状態スタイルは`@keepkit/ui/styles/status.css`からも読み込めます。
 外部URLの詳細リンクには`target="_blank"`と`rel="noreferrer"`が既定で補完され、利用できないカードには`aria-disabled="true"`と`data-item-status`が付与されます。同期競合ダイアログではローカルとリモートの更新日時・メモを並べて確認できます。
@@ -88,7 +88,7 @@ const onFeedback = useKeepToastFeedback(toast);
 <KeepKitProvider storage={storage} onFeedback={onFeedback}>{children}</KeepKitProvider>;
 ```
 
-v0.19.0では`KeepTourBar` / `KeepNavigator`、`KeepReorderableList`、`useKeepTourShortcuts`を利用できます。`KeepCollection urlSync layout="list" | "grid" | "compact"`、`KeepBulkActions selectionScope="page" | "query" | "all"`、`KeepUndo`も利用できます。`createNextPagesRouterAdapter`はNext.js Pages Router用の注入adapterです。`locale`は16言語に対応し、`labels`で上書きできます。認証付き同期は`createAuthenticatedSyncKit`から利用できます。
+v0.20.0では`KeepTourBar` / `KeepNavigator`、`KeepReorderableList`、`useKeepTourShortcuts`を利用できます。`KeepCollection urlSync layout="list" | "grid" | "compact"`、`KeepBulkActions selectionScope="page" | "query" | "all"`、`KeepUndo`も利用できます。`createNextPagesRouterAdapter`はNext.js Pages Router用の注入adapterです。`locale`は16言語に対応し、`labels`で上書きできます。認証付き同期は`createAuthenticatedSyncKit`から利用できます。
 Phase 4の状態UIとして`KeepItemStatusBadge`、`KeepStaleNotice`、`KeepPruneStaleButton`、`KeepSyncStatusBanner`、`KeepSyncRecoveryDialog`を利用できます。`import "@keepkit/ui/theme.css"`でテーマCSSを有効にできます。
 
 ### Tailwind／shadcnテーマ
@@ -179,7 +179,7 @@ function SavedArticles() {
 The opt-in theme adds neutral borders, surfaces, shadows, focus treatment, and decorative action icons without changing accessible names. Target individual controls with `data-keep-action`, or override `--keep-icon-size`, `--keep-control-gap`, `--keep-shadow`, `--keep-success`, and `--keep-warning`. Consumers that omit the CSS keep the headless markup, and `KeepButton icons` continues to take precedence over the built-in icon.
 `KeepItemCard` accepts `href`, `onOpen`, `linkTarget`, and `linkComponent` for detail-page navigation. Links are disabled for unavailable `status` values such as private or expired. `KeepBackup` provides JSON export, merge/replace import, result counts, and quota-error messaging.
 `KeepTourBar` (aliased as `KeepNavigator`) provides progress, previous/next, and return-to-list actions through URLs or callbacks. Adjacent item titles are previewed below the navigation labels; customize them with `getItemTitle`. Set `keyboardShortcuts` for J/K or ]/[ tour navigation, or use `useKeepTourShortcuts` for custom bindings. `KeepReorderableList` supports drag and keyboard reordering and shows the active insertion position.
-`KeepShortcutHint` renders semantic `<kbd>` badges. `KeepTourBar showShortcutHint` displays the previous/next keys, while `KeepNoteEditor showShortcutHint` displays `Ctrl+Enter` in the save button. `mergeProps` / `createSlot` provide shared className, style, ARIA, and event composition for `asChild` slots.
+`KeepShortcutHint` renders semantic `<kbd>` badges. `KeepTourBar showShortcutHint` displays the previous/next keys, while `KeepNoteEditor showShortcutHint` displays `Ctrl+Enter` in the save button. `mergeProps` / `createSlot` compose className, style, ARIA, events, and child/parent refs for `asChild` slots; `composeRefs` combines callback and object refs. Filter chips restore focus to an adjacent chip after removal and support ArrowLeft / ArrowRight navigation.
 Cards rendered by `KeepList` and `KeepCollection` highlight case-insensitive search matches with `<mark class="keep-highlight" data-highlight="true">`. Use `highlightQuery` on a standalone `KeepItemCard` or `KeepHighlight` for arbitrary text. `KeepItemCard.Media` exposes its loading state through `data-media-status` and replaces failed images with `fallback` or the built-in SVG placeholder.
 The theme defines WCAG-oriented `--keep-highlight-bg` / `--keep-highlight-fg` pairs for light and dark modes, clamps titles to two lines and memo previews to three, and reserves a stable media aspect ratio. `KeepItemStatusBadge` combines visible status text with check, clock, ban, or lock SVG icons; import `@keepkit/ui/styles/status.css` when using the status styles independently.
 External detail URLs receive `target="_blank"` and `rel="noreferrer"` defaults. Unavailable cards expose `aria-disabled="true"` and normalized `data-item-status` values, and the sync recovery dialog compares local and remote updated dates and notes side by side.
@@ -207,7 +207,7 @@ const onFeedback = useKeepToastFeedback(toast);
 <KeepKitProvider storage={storage} onFeedback={onFeedback}>{children}</KeepKitProvider>;
 ```
 
-In v0.19.0, use `KeepTourBar` / `KeepNavigator`, `KeepReorderableList`, and `useKeepTourShortcuts` for continuous saved-item tours. `KeepCollection urlSync` with `layout="list" | "grid" | "compact"`, `KeepBulkActions selectionScope="page" | "query" | "all"`, and `KeepUndo` remain available. `createNextPagesRouterAdapter` is the injected adapter for Next.js Pages Router. `locale` includes 16 built-in dictionaries, and `labels` overrides individual entries. Authenticated sync is available through `createAuthenticatedSyncKit`.
+In v0.20.0, use `KeepTourBar` / `KeepNavigator`, `KeepReorderableList`, and `useKeepTourShortcuts` for continuous saved-item tours. `KeepCollection urlSync` with `layout="list" | "grid" | "compact"`, `KeepBulkActions selectionScope="page" | "query" | "all"`, and `KeepUndo` remain available. `createNextPagesRouterAdapter` is the injected adapter for Next.js Pages Router. `locale` includes 16 built-in dictionaries, and `labels` overrides individual entries. Authenticated sync is available through `createAuthenticatedSyncKit`.
 Phase 4 adds `KeepItemStatusBadge`, `KeepStaleNotice`, `KeepPruneStaleButton`, `KeepSyncStatusBanner`, and `KeepSyncRecoveryDialog` for unavailable items, sync failures, conflict resolution, and backup recovery. Import `@keepkit/ui/theme.css` or `@keepkit/ui/tailwind.css` for the opt-in theme layer.
 
 ### Tailwind and shadcn theme

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { HTMLAttributes, ReactNode, ComponentType, ReactElement, InputHTMLAttributes, ImgHTMLAttributes, MouseEvent, HTMLAttributeAnchorTarget, KeyboardEvent, FormHTMLAttributes, SelectHTMLAttributes, ButtonHTMLAttributes, CSSProperties } from 'react';
+import { HTMLAttributes, ReactNode, ComponentType, Ref, RefCallback, ReactElement, InputHTMLAttributes, ImgHTMLAttributes, MouseEvent, HTMLAttributeAnchorTarget, KeyboardEvent, FormHTMLAttributes, SelectHTMLAttributes, ButtonHTMLAttributes, CSSProperties } from 'react';
 import { KeepListQuery, KeepUrlSyncOptions, ImportItemsResult, KeepItem, KeepItemStatus, KeepSyncConflict, KeepItemInput } from '@keepkit/core/core';
 export { AuthenticatedSyncAuthContext, AuthenticatedSyncKit, AuthenticatedSyncKitOptions, AuthenticatedSyncRequestContext, AuthenticatedSyncTransport, KeepItem, KeepItemInput, KeepListQuery, KeepScope, KeepSyncConflict, KeepSyncResolution, KeepSyncState, KeepSyncStatus, KeepUndoState, KeepUrlSyncOptions, createAuthenticatedSyncKit } from '@keepkit/core/core';
 import { KeepButtonProps as KeepButtonProps$1, UseKeepListResult, KeepErrorBoundaryProps, UseKeepNavigatorResult, CreateKeepKitOptions as CreateKeepKitOptions$1, KeepProviderProps, useKeepContext, useKeepItem, useKeepList, UseKeepNavigatorOptions, KeepShortcutOptions } from '@keepkit/core/react';
@@ -73,6 +73,8 @@ type KeepButtonIcons = {
     error?: KeepButtonIcon;
 };
 type MergeableProps = Record<string, unknown>;
+/** Combines callback and object refs while preserving every ref target. */
+declare function composeRefs<T>(...refs: Array<Ref<T> | null | undefined>): RefCallback<T>;
 /** Chains child and component event handlers while preserving both handlers' event order. */
 declare function chainedFunction<T extends (...args: never[]) => unknown>(childHandler: T | undefined, parentHandler: T | undefined): T | undefined;
 /** Merges slot props without dropping child classes, styles, ARIA attributes, or events. */
@@ -118,6 +120,9 @@ type KeepBulkActionsProps<TMeta = Record<string, unknown>> = Omit<HTMLAttributes
 declare function KeepBulkActions<TMeta = Record<string, unknown>>({ query, selectedIds: controlledSelectedIds, defaultSelectedIds, onSelectedIdsChange, renderItem, onCompleted, selectionScope: controlledScope, onSelectionScopeChange, render, children, ...props }: KeepBulkActionsProps<TMeta>): react.JSX.Element;
 
 type KeepButtonProps<TMeta = Record<string, unknown>> = KeepButtonProps$1<TMeta> & {
+    ref?: Ref<HTMLElement> | {
+        readonly current: unknown;
+    };
     labels?: KeepButtonLabels;
     icons?: KeepButtonIcons;
     iconOnly?: boolean;
@@ -163,6 +168,9 @@ type KeepImageProps = ImgHTMLAttributes<HTMLImageElement> & {
     alt: string;
 };
 type KeepItemCardProps<TMeta = Record<string, unknown>> = Omit<HTMLAttributes<HTMLElement>, "children" | "title"> & {
+    ref?: Ref<HTMLElement> | {
+        readonly current: unknown;
+    };
     item: KeepItem<TMeta>;
     title?: ReactNode | ((item: KeepItem<TMeta>) => ReactNode);
     getTitle?: (item: KeepItem<TMeta>) => ReactNode;
@@ -503,6 +511,9 @@ declare function KeepItemCardSkeleton({ layout, ...props }: KeepItemCardSkeleton
 
 type KeepListState<TMeta = Record<string, unknown>> = UseKeepListResult<TMeta>;
 type KeepListProps<TMeta = Record<string, unknown>> = Omit<HTMLAttributes<HTMLElement>, "children"> & {
+    ref?: Ref<HTMLElement> | {
+        readonly current: unknown;
+    };
     query?: KeepListQuery<TMeta>;
     children?: ReactNode | RenderProp<KeepListState<TMeta>>;
     renderItem?: (item: KeepItem<TMeta>, state: KeepListState<TMeta>) => ReactNode;
@@ -715,6 +726,9 @@ type KeepTourShortcutsOptions = {
 declare function useKeepTourShortcuts({ onNext, onPrev, enabled, allowInEditable, preventDefault, nextKeys, prevKeys, onError, }: KeepTourShortcutsOptions): void;
 
 type KeepTourBarProps<TMeta = Record<string, unknown>> = Omit<HTMLAttributes<HTMLElement>, "children"> & {
+    ref?: Ref<HTMLElement> | {
+        readonly current: unknown;
+    };
     navigation?: UseKeepNavigatorResult<TMeta>;
     currentId?: string;
     initialIndex?: number;
@@ -741,6 +755,9 @@ declare function KeepTourBar<TMeta = Record<string, unknown>>({ navigation: prov
 declare const KeepNavigator: typeof KeepTourBar;
 
 type KeepActiveFiltersSummaryProps<TMeta = Record<string, unknown>> = Omit<HTMLAttributes<HTMLElement>, "children"> & {
+    ref?: Ref<HTMLElement> | {
+        readonly current: unknown;
+    };
     query?: KeepListQuery<TMeta>;
     search?: string;
     tags?: readonly string[];
@@ -960,4 +977,4 @@ type KeepKit<TMeta = Record<string, unknown>> = {
 /** Create one typed application API for the core and standard UI layer. */
 declare function createKeepKit<TMeta = Record<string, unknown>>(options?: CreateKeepKitOptions<TMeta>): KeepKit<TMeta>;
 
-export { type CreateKeepKitOptions, KeepActiveFiltersSummary, type KeepActiveFiltersSummaryProps, type KeepActiveFiltersSummaryState, KeepAnnouncements, type KeepAnnouncementsProps, KeepAnnouncer, KeepBackup, type KeepBackupProps, KeepBulkActions, type KeepBulkActionsProps, type KeepBulkActionsState, KeepButton, type KeepButtonIcon, type KeepButtonIconProps, type KeepButtonIcons, type KeepButtonLabels, type KeepButtonProps, KeepCollection, type KeepCollectionFeature, type KeepCollectionProps, type KeepDisplayStatus, KeepEmptyState, type KeepEmptyStateProps, type KeepEmptyStateVariant, KeepHighlight, type KeepHighlightProps, type KeepImageProps, KeepItemCard, type KeepItemCardActionsProps, type KeepItemCardContentProps, type KeepItemCardLinkProps, type KeepItemCardMediaProps, type KeepItemCardProps, KeepItemCardSkeleton, type KeepItemCardSkeletonProps, type KeepItemCardState, type KeepItemCardTagsProps, type KeepItemCardTitleProps, KeepItemCheckbox, type KeepItemCheckboxProps, KeepItemStatusBadge, type KeepItemStatusBadgeProps, type KeepKit, KeepKitProvider, type KeepKitProviderProps, KeepLayout, type KeepLayoutPreset, type KeepLayoutProps, KeepList, type KeepListProps, type KeepListState, KeepNavigator, KeepNoteEditor, type KeepNoteEditorProps, type KeepNoteEditorState, type KeepPagesRouterLike, KeepPagination, type KeepPaginationProps, type KeepPaginationState, KeepPruneStaleButton, type KeepPruneStaleButtonProps, type KeepReorderableItemState, KeepReorderableList, type KeepReorderableListProps, KeepSearchInput, type KeepSearchInputProps, type KeepSelectionScope, KeepShortcutHint, type KeepShortcutHintProps, KeepSortSelect, type KeepSortSelectProps, type KeepSortValue, KeepStaleNotice, type KeepStaleNoticeProps, KeepStatus, type KeepStatusLabels, type KeepStatusProps, type KeepStatusState, type KeepStatusValue, KeepSyncRecoveryDialog, type KeepSyncRecoveryDialogProps, KeepSyncStatusBanner, type KeepSyncStatusBannerProps, KeepTagEditor, type KeepTagEditorProps, type KeepTagEditorState, KeepTagFilter, type KeepTagFilterProps, type KeepTagFilterState, type KeepThemeDensity, type KeepThemeMode, type KeepThemeName, KeepThemeProvider, type KeepThemeProviderProps, type KeepThemeRadius, type KeepThemeVariables, type KeepToastFeedbackOptions, type KeepToastHandler, KeepTourBar, type KeepTourBarProps, type KeepTourShortcutsOptions, type KeepUiFeedbackEvent, type KeepUiLabelContext, type KeepUiLabelKey, type KeepUiLabels, type KeepUiLocale, type KeepUiLocaleLabels, KeepUiProvider, type KeepUiProviderProps, KeepUndo, type KeepUndoProps, type KeepUrlAdapter, type RenderProp, chainedFunction, createKeepKit, createNextPagesRouterAdapter, createSlot, getKeepLocaleLabels, highlightText, isAllSelected, keepThemeNames, mergeProps, toggleSelectAll, useKeepToastFeedback, useKeepTourShortcuts, useKeepUiLabels, useKeepUrlSync };
+export { type CreateKeepKitOptions, KeepActiveFiltersSummary, type KeepActiveFiltersSummaryProps, type KeepActiveFiltersSummaryState, KeepAnnouncements, type KeepAnnouncementsProps, KeepAnnouncer, KeepBackup, type KeepBackupProps, KeepBulkActions, type KeepBulkActionsProps, type KeepBulkActionsState, KeepButton, type KeepButtonIcon, type KeepButtonIconProps, type KeepButtonIcons, type KeepButtonLabels, type KeepButtonProps, KeepCollection, type KeepCollectionFeature, type KeepCollectionProps, type KeepDisplayStatus, KeepEmptyState, type KeepEmptyStateProps, type KeepEmptyStateVariant, KeepHighlight, type KeepHighlightProps, type KeepImageProps, KeepItemCard, type KeepItemCardActionsProps, type KeepItemCardContentProps, type KeepItemCardLinkProps, type KeepItemCardMediaProps, type KeepItemCardProps, KeepItemCardSkeleton, type KeepItemCardSkeletonProps, type KeepItemCardState, type KeepItemCardTagsProps, type KeepItemCardTitleProps, KeepItemCheckbox, type KeepItemCheckboxProps, KeepItemStatusBadge, type KeepItemStatusBadgeProps, type KeepKit, KeepKitProvider, type KeepKitProviderProps, KeepLayout, type KeepLayoutPreset, type KeepLayoutProps, KeepList, type KeepListProps, type KeepListState, KeepNavigator, KeepNoteEditor, type KeepNoteEditorProps, type KeepNoteEditorState, type KeepPagesRouterLike, KeepPagination, type KeepPaginationProps, type KeepPaginationState, KeepPruneStaleButton, type KeepPruneStaleButtonProps, type KeepReorderableItemState, KeepReorderableList, type KeepReorderableListProps, KeepSearchInput, type KeepSearchInputProps, type KeepSelectionScope, KeepShortcutHint, type KeepShortcutHintProps, KeepSortSelect, type KeepSortSelectProps, type KeepSortValue, KeepStaleNotice, type KeepStaleNoticeProps, KeepStatus, type KeepStatusLabels, type KeepStatusProps, type KeepStatusState, type KeepStatusValue, KeepSyncRecoveryDialog, type KeepSyncRecoveryDialogProps, KeepSyncStatusBanner, type KeepSyncStatusBannerProps, KeepTagEditor, type KeepTagEditorProps, type KeepTagEditorState, KeepTagFilter, type KeepTagFilterProps, type KeepTagFilterState, type KeepThemeDensity, type KeepThemeMode, type KeepThemeName, KeepThemeProvider, type KeepThemeProviderProps, type KeepThemeRadius, type KeepThemeVariables, type KeepToastFeedbackOptions, type KeepToastHandler, KeepTourBar, type KeepTourBarProps, type KeepTourShortcutsOptions, type KeepUiFeedbackEvent, type KeepUiLabelContext, type KeepUiLabelKey, type KeepUiLabels, type KeepUiLocale, type KeepUiLocaleLabels, KeepUiProvider, type KeepUiProviderProps, KeepUndo, type KeepUndoProps, type KeepUrlAdapter, type RenderProp, chainedFunction, composeRefs, createKeepKit, createNextPagesRouterAdapter, createSlot, getKeepLocaleLabels, highlightText, isAllSelected, keepThemeNames, mergeProps, toggleSelectAll, useKeepToastFeedback, useKeepTourShortcuts, useKeepUiLabels, useKeepUrlSync };

package/dist/index.js

@@ -1712,7 +1712,8 @@ import {
   cloneElement,
   createContext as createContext2,
   isValidElement,
-  useContext as useContext2
+  useContext as useContext2,
+  useMemo as useMemo2
 } from "react";
 import { Fragment, jsx as jsx3 } from "react/jsx-runtime";
 var KeepSearchQueryContext = createContext2(void 0);
@@ -1725,8 +1726,11 @@ function useKeepSearchQuery() {
 function KeepHighlight({ children, query }) {
   const contextQuery = useKeepSearchQuery();
   const resolvedQuery = query ?? contextQuery;
-  if (typeof children !== "string" || !resolvedQuery?.trim()) return children ?? null;
-  return highlightText(children, resolvedQuery);
+  const normalizedQuery = resolvedQuery?.trim() ?? "";
+  return useMemo2(() => {
+    if (typeof children !== "string" || !normalizedQuery) return children ?? null;
+    return highlightText(children, normalizedQuery);
+  }, [children, normalizedQuery]);
 }
 function highlightText(text, query) {
   const normalizedQuery = query.trim();
@@ -1776,6 +1780,17 @@ function sortToValue(sort) {
 function resolveContent(content, state) {
   return typeof content === "function" ? content(state) : content;
 }
+function composeRefs(...refs) {
+  return (value) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") {
+        ref(value);
+      } else if (ref !== null && ref !== void 0) {
+        ref.current = value;
+      }
+    }
+  };
+}
 function chainedFunction(childHandler, parentHandler) {
   if (!childHandler) return parentHandler;
   if (!parentHandler) return childHandler;
@@ -1786,6 +1801,12 @@ function chainedFunction(childHandler, parentHandler) {
 }
 function mergeProps(childProps, parentProps) {
   const merged = { ...parentProps, ...childProps };
+  if ("ref" in childProps || "ref" in parentProps) {
+    merged.ref = composeRefs(
+      childProps.ref,
+      parentProps.ref
+    );
+  }
   const className = mergeClassNames(childProps.className, parentProps.className);
   if (className) merged.className = className;
   const style = mergeStyles(childProps.style, parentProps.style);
@@ -2252,7 +2273,10 @@ function KeepUndo({ children, label, ...props }) {
 import { KeepErrorBoundary as KeepErrorBoundary2 } from "@keepkit/core/react";
 
 // src/features/query/KeepActiveFiltersSummary.tsx
-import { isValidElement as isValidElement2 } from "react";
+import {
+  isValidElement as isValidElement2,
+  useRef as useRef4
+} from "react";
 import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 function KeepActiveFiltersSummary({
   query,
@@ -2273,6 +2297,38 @@ function KeepActiveFiltersSummary({
   const clearAllLabel = useUiLabel("clearAllFilters");
   const clearLabel = useUiLabel("clearFilters");
   const removeLabel = useUiLabel("removeFilter");
+  const chipRefs = useRef4([]);
+  const filterCount = Number(Boolean(search)) + tags.length;
+  function focusChip(index) {
+    chipRefs.current[index]?.focus();
+  }
+  function focusAfterRemoval(index, source) {
+    const summaryRoot = source.closest('[data-keepkit="active-filters"]');
+    const fallbackScope = source.closest('[data-keepkit="collection"]') ?? summaryRoot?.parentElement ?? source.parentElement;
+    queueMicrotask(() => {
+      const nextIndex = index < filterCount - 1 ? index : index - 1;
+      const nextChip = nextIndex >= 0 ? chipRefs.current[nextIndex] : null;
+      if (nextChip?.isConnected) {
+        nextChip.focus();
+        return;
+      }
+      focusFilterFallback(fallbackScope);
+    });
+  }
+  function handleChipKeyDown(event, index) {
+    const nextIndex = event.key === "ArrowRight" ? index + 1 : event.key === "ArrowLeft" ? index - 1 : -1;
+    if (nextIndex < 0 || nextIndex >= filterCount || !chipRefs.current[nextIndex]) return;
+    event.preventDefault();
+    focusChip(nextIndex);
+  }
+  function removeSearch(event) {
+    focusAfterRemoval(0, event.currentTarget);
+    onSearchChange?.("");
+  }
+  function removeTag(tag, index, event) {
+    focusAfterRemoval(index, event.currentTarget);
+    onTagChange?.(tag);
+  }
   const state = {
     search,
     tags,
@@ -2293,12 +2349,16 @@ function KeepActiveFiltersSummary({
             type: "button",
             "data-keep-action": "remove-search-filter",
             "aria-label": `${search} ${removeLabel}`,
-            onClick: state.removeSearch,
+            ref: (element) => {
+              chipRefs.current[0] = element;
+            },
+            onKeyDown: (event) => handleChipKeyDown(event, 0),
+            onClick: removeSearch,
             children: "\xD7"
           }
         )
       ] }) : null,
-      tags.map((tag) => /* @__PURE__ */ jsxs5("li", { "data-filter-kind": "tag", children: [
+      tags.map((tag, tagIndex) => /* @__PURE__ */ jsxs5("li", { "data-filter-kind": "tag", children: [
         /* @__PURE__ */ jsx8("span", { "data-filter-value": "true", children: tag }),
         /* @__PURE__ */ jsx8(
           "button",
@@ -2306,7 +2366,11 @@ function KeepActiveFiltersSummary({
             type: "button",
             "data-keep-action": "remove-tag-filter",
             "aria-label": `${tag} ${removeLabel}`,
-            onClick: () => state.removeTag(tag),
+            ref: (element) => {
+              chipRefs.current[tagIndex + Number(Boolean(search))] = element;
+            },
+            onKeyDown: (event) => handleChipKeyDown(event, tagIndex + Number(Boolean(search))),
+            onClick: (event) => removeTag(tag, tagIndex + Number(Boolean(search)), event),
             children: "\xD7"
           }
         )
@@ -2335,13 +2399,30 @@ function normalizeTags(tags) {
 function isElement(value) {
   return isValidElement2(value);
 }
+function focusFilterFallback(scope) {
+  const searchInput = scope?.querySelector('[data-keep-action="search"]');
+  if (searchInput) {
+    searchInput.focus();
+    return;
+  }
+  const listCard = scope?.querySelector('[data-keepkit="card"][tabindex="0"]');
+  if (listCard) {
+    listCard.focus();
+    return;
+  }
+  const list = scope?.querySelector('[data-keepkit="list"]');
+  if (list) {
+    if (!list.hasAttribute("tabindex")) list.tabIndex = -1;
+    list.focus();
+  }
+}
 
 // src/features/query/KeepTagFilter.tsx
 import { isValidElement as isValidElement3 } from "react";
 
 // src/features/query/hooks/useKeepTagFilter.ts
 import { useKeepList as useKeepList2 } from "@keepkit/core/react";
-import { useCallback as useCallback2, useMemo as useMemo2, useState as useState4 } from "react";
+import { useCallback as useCallback2, useMemo as useMemo3, useState as useState4 } from "react";
 function useKeepTagFilter(options) {
   const { query, controlledValue, defaultValue, onChange, onValueChange } = options;
   const [uncontrolledValue, setUncontrolledValue] = useState4(defaultValue);
@@ -2358,7 +2439,7 @@ function useKeepTagFilter(options) {
     },
     [controlledValue, onChange, onValueChange]
   );
-  const state = useMemo2(
+  const state = useMemo3(
     () => ({ tags: list.tags, tagCounts: list.tagCounts, value: resolvedValue, select }),
     [list.tagCounts, list.tags, resolvedValue, select]
   );
@@ -2620,7 +2701,7 @@ function KeepPagination({
 
 // src/features/collection/hooks/useKeepCollection.ts
 import { useKeepList as useKeepList3 } from "@keepkit/core/react";
-import { useMemo as useMemo3, useState as useState6 } from "react";
+import { useMemo as useMemo4, useState as useState6 } from "react";
 function useKeepCollection({
   query,
   pageSize,
@@ -2641,7 +2722,7 @@ function useKeepCollection({
   const [activeTags, setActiveTags] = useState6(query.tags ?? []);
   const [page, setPage] = useState6(query.pagination?.page ?? 1);
   const resolvedPageSize = query.pagination?.pageSize ?? pageSize;
-  const resolvedQuery = useMemo3(
+  const resolvedQuery = useMemo4(
     () => ({
       ...query,
       search: enabled.search ? { ...query.search, query: searchValue } : query.search,
@@ -3339,9 +3420,9 @@ function useKeepListView(query) {
 }
 
 // src/features/collection/hooks/useRovingTabIndex.ts
-import { useCallback as useCallback3, useEffect as useEffect6, useRef as useRef4 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect6, useRef as useRef5 } from "react";
 function useRovingTabIndex() {
-  const ref = useRef4(null);
+  const ref = useRef5(null);
   const getItems = useCallback3(() => {
     const root = ref.current;
     if (!root) return [];
@@ -3459,7 +3540,7 @@ function KeepListContent({
       "data-loading": state.isLoading ? "true" : void 0,
       "data-roving-tabindex": "true",
       role: rootProps.role ?? "group",
-      ref: roving.ref,
+      ref: composeRefs(roving.ref, rootProps.ref),
       onKeyDown: (event) => {
         onKeyDown?.(event);
         if (!event.defaultPrevented) roving.onKeyDown(event);
@@ -3756,14 +3837,14 @@ function KeepShortcutHint({ shortcut, separator = "+", ...props }) {
 
 // src/features/editor/hooks/useKeepNoteEditor.ts
 import { useKeepItem as useKeepItem3 } from "@keepkit/core/react";
-import { useCallback as useCallback4, useEffect as useEffect7, useRef as useRef5, useState as useState10 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect7, useRef as useRef6, useState as useState10 } from "react";
 function useKeepNoteEditor({ item, debounceMs, onSaved, onSaveError }) {
   const itemState = useKeepItem3(item);
   const { error, isMutating, item: savedItem, updateNote } = itemState;
   const [note, setNote] = useState10(item.note ?? "");
   const baselineNote = savedItem?.note ?? item.note ?? "";
   const isDirty = note !== baselineNote;
-  const lastSavedNoteRef = useRef5(void 0);
+  const lastSavedNoteRef = useRef6(void 0);
   useEffect7(() => setNote(baselineNote), [baselineNote]);
   const save = useCallback4(async () => {
     const nextNote = note.trim() || void 0;
@@ -4184,7 +4265,7 @@ import { isValidElement as isValidElement8 } from "react";
 
 // src/features/status/hooks/useStatusViews.ts
 import { useKeepContext as useKeepContext4 } from "@keepkit/core/react";
-import { useEffect as useEffect10, useRef as useRef6, useState as useState12 } from "react";
+import { useEffect as useEffect10, useRef as useRef7, useState as useState12 } from "react";
 function useKeepStatus(status) {
   const context = useKeepContext4();
   const resolvedStatus = status ?? getDerivedStatus(context);
@@ -4202,7 +4283,7 @@ function useKeepAnnouncements(messages) {
   const removedMessage = useUiLabel("removedMessage", messages?.remove);
   const noteSavedMessage = useUiLabel("noteSavedMessage", messages?.note);
   const [message, setMessage] = useState12("");
-  const lastChangeRef = useRef6(void 0);
+  const lastChangeRef = useRef7(void 0);
   useEffect10(() => {
     const change = context.lastChange;
     if (!change || change === lastChangeRef.current) return;
@@ -4280,13 +4361,13 @@ var KeepAnnouncer = KeepAnnouncements;
 
 // src/features/sync/hooks/useKeepSyncFeedback.ts
 import { useKeepContext as useKeepContext5 } from "@keepkit/core/react";
-import { useEffect as useEffect11, useRef as useRef7 } from "react";
+import { useEffect as useEffect11, useRef as useRef8 } from "react";
 function useKeepSyncFeedback() {
   const { syncState } = useKeepContext5();
   const emitFeedback = useKeepUiFeedback();
   const completedMessage = useUiLabel("syncSynced");
   const failedMessage = useUiLabel("syncFailedMessage");
-  const previousStatus = useRef7("idle");
+  const previousStatus = useRef8("idle");
   useEffect11(() => {
     const previous = previousStatus.current;
     previousStatus.current = syncState.status;
@@ -4806,6 +4887,7 @@ export {
   LocalStorageSyncQueueAdapter,
   SyncStorageAdapter,
   chainedFunction,
+  composeRefs,
   createAuthenticatedSyncKit,
   createBrowserStorageAdapter,
   createKeepKit,