@keepkit/ui 0.15.0 → 0.17.0

package/dist/index.js

@@ -6,12 +6,32 @@ import {
   createKeepKit as createCoreKeepKit
 } from "@keepkit/core/react";
 
+// src/hooks/useKeepToastFeedback.ts
+import { useCallback } from "react";
+function useKeepToastFeedback(showToast) {
+  return useCallback(
+    (event) => {
+      if (!("undo" in event)) {
+        showToast(event.message);
+        return;
+      }
+      showToast(event.message, {
+        action: {
+          label: event.undoLabel,
+          onClick: () => void event.undo()
+        }
+      });
+    },
+    [showToast]
+  );
+}
+
 // src/hooks/useKeepBackup.ts
 import { useKeepContext } from "@keepkit/core/react";
 import { useRef, useState } from "react";
 
 // src/ui-context.tsx
-import { createContext, useContext, useMemo } from "react";
+import { createContext, useCallback as useCallback2, useContext, useMemo } from "react";
 
 // src/locales/de.ts
 var DE_LABELS = {
@@ -49,6 +69,9 @@ var DE_LABELS = {
   applyTags: "Tags anwenden",
   savedMessage: "Element gespeichert.",
   removedMessage: "Element entfernt.",
+  restoredMessage: "Element wiederhergestellt.",
+  syncFailedMessage: "Synchronisierung fehlgeschlagen.",
+  stalePrunedMessage: "Nicht verf\xFCgbare Elemente entfernt.",
   undo: "R\xFCckg\xE4ngig",
   undoAvailable: "Element entfernt. R\xFCckg\xE4ngig machen?",
   selectionScope: "Auswahlbereich",
@@ -125,6 +148,9 @@ var EN_LABELS = {
   applyTags: "Apply tags",
   savedMessage: "Item saved.",
   removedMessage: "Item removed.",
+  restoredMessage: "Item restored.",
+  syncFailedMessage: "Sync failed.",
+  stalePrunedMessage: "Unavailable items removed.",
   undo: "Undo",
   undoAvailable: "Item removed. Undo?",
   selectionScope: "Selection scope",
@@ -201,6 +227,9 @@ var ES_LABELS = {
   applyTags: "Aplicar etiquetas",
   savedMessage: "Elemento guardado.",
   removedMessage: "Elemento eliminado.",
+  restoredMessage: "Elemento restaurado.",
+  syncFailedMessage: "Error de sincronizaci\xF3n.",
+  stalePrunedMessage: "Elementos no disponibles eliminados.",
   undo: "Deshacer",
   undoAvailable: "Elemento eliminado. \xBFDeshacer?",
   selectionScope: "\xC1mbito de selecci\xF3n",
@@ -277,6 +306,9 @@ var FIL_LABELS = {
   applyTags: "Ilapat ang mga tag",
   savedMessage: "Na-save ang item.",
   removedMessage: "Inalis ang item.",
+  restoredMessage: "Naibalik ang item.",
+  syncFailedMessage: "Hindi nagtagumpay ang pag-sync.",
+  stalePrunedMessage: "Inalis ang mga hindi available na item.",
   undo: "I-undo",
   undoAvailable: "Inalis ang item. I-undo?",
   selectionScope: "Saklaw ng pagpili",
@@ -353,6 +385,9 @@ var FR_LABELS = {
   applyTags: "Appliquer les \xE9tiquettes",
   savedMessage: "\xC9l\xE9ment enregistr\xE9.",
   removedMessage: "\xC9l\xE9ment supprim\xE9.",
+  restoredMessage: "\xC9l\xE9ment restaur\xE9.",
+  syncFailedMessage: "\xC9chec de la synchronisation.",
+  stalePrunedMessage: "\xC9l\xE9ments indisponibles supprim\xE9s.",
   undo: "Annuler",
   undoAvailable: "\xC9l\xE9ment supprim\xE9. Annuler ?",
   selectionScope: "Port\xE9e de la s\xE9lection",
@@ -429,6 +464,9 @@ var ID_LABELS = {
   applyTags: "Terapkan tag",
   savedMessage: "Item tersimpan.",
   removedMessage: "Item dihapus.",
+  restoredMessage: "Item dipulihkan.",
+  syncFailedMessage: "Sinkronisasi gagal.",
+  stalePrunedMessage: "Item yang tidak tersedia dihapus.",
   undo: "Urungkan",
   undoAvailable: "Item dihapus. Urungkan?",
   selectionScope: "Cakupan pilihan",
@@ -505,6 +543,9 @@ var IT_LABELS = {
   applyTags: "Applica tag",
   savedMessage: "Elemento salvato.",
   removedMessage: "Elemento rimosso.",
+  restoredMessage: "Elemento ripristinato.",
+  syncFailedMessage: "Sincronizzazione non riuscita.",
+  stalePrunedMessage: "Elementi non disponibili rimossi.",
   undo: "Annulla",
   undoAvailable: "Elemento rimosso. Annullare?",
   selectionScope: "Ambito della selezione",
@@ -581,6 +622,9 @@ var JA_LABELS = {
   applyTags: "\u30BF\u30B0\u3092\u9069\u7528",
   savedMessage: "\u30A2\u30A4\u30C6\u30E0\u3092\u4FDD\u5B58\u3057\u307E\u3057\u305F\u3002",
   removedMessage: "\u30A2\u30A4\u30C6\u30E0\u3092\u524A\u9664\u3057\u307E\u3057\u305F\u3002",
+  restoredMessage: "\u30A2\u30A4\u30C6\u30E0\u3092\u5FA9\u5143\u3057\u307E\u3057\u305F\u3002",
+  syncFailedMessage: "\u540C\u671F\u306B\u5931\u6557\u3057\u307E\u3057\u305F\u3002",
+  stalePrunedMessage: "\u5229\u7528\u3067\u304D\u306A\u3044\u30A2\u30A4\u30C6\u30E0\u3092\u524A\u9664\u3057\u307E\u3057\u305F\u3002",
   undo: "\u5143\u306B\u623B\u3059",
   undoAvailable: "\u30A2\u30A4\u30C6\u30E0\u3092\u524A\u9664\u3057\u307E\u3057\u305F\u3002\u5143\u306B\u623B\u3057\u307E\u3059\u304B\uFF1F",
   selectionScope: "\u9078\u629E\u7BC4\u56F2",
@@ -657,6 +701,9 @@ var KO_LABELS = {
   applyTags: "\uD0DC\uADF8 \uC801\uC6A9",
   savedMessage: "\uD56D\uBAA9\uC744 \uC800\uC7A5\uD588\uC2B5\uB2C8\uB2E4.",
   removedMessage: "\uD56D\uBAA9\uC744 \uC0AD\uC81C\uD588\uC2B5\uB2C8\uB2E4.",
+  restoredMessage: "\uD56D\uBAA9\uC744 \uBCF5\uC6D0\uD588\uC2B5\uB2C8\uB2E4.",
+  syncFailedMessage: "\uB3D9\uAE30\uD654\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4.",
+  stalePrunedMessage: "\uC0AC\uC6A9\uD560 \uC218 \uC5C6\uB294 \uD56D\uBAA9\uC744 \uC0AD\uC81C\uD588\uC2B5\uB2C8\uB2E4.",
   undo: "\uC2E4\uD589 \uCDE8\uC18C",
   undoAvailable: "\uD56D\uBAA9\uC744 \uC0AD\uC81C\uD588\uC2B5\uB2C8\uB2E4. \uC2E4\uD589 \uCDE8\uC18C\uD560\uAE4C\uC694?",
   selectionScope: "\uC120\uD0DD \uBC94\uC704",
@@ -733,6 +780,9 @@ var MS_LABELS = {
   applyTags: "Gunakan tag",
   savedMessage: "Item disimpan.",
   removedMessage: "Item dibuang.",
+  restoredMessage: "Item dipulihkan.",
+  syncFailedMessage: "Penyegerakan gagal.",
+  stalePrunedMessage: "Item yang tidak tersedia dibuang.",
   undo: "Buat asal",
   undoAvailable: "Item dibuang. Buat asal?",
   selectionScope: "Skop pilihan",
@@ -809,6 +859,9 @@ var PT_BR_LABELS = {
   applyTags: "Aplicar tags",
   savedMessage: "Item salvo.",
   removedMessage: "Item removido.",
+  restoredMessage: "Item restaurado.",
+  syncFailedMessage: "Falha na sincroniza\xE7\xE3o.",
+  stalePrunedMessage: "Itens indispon\xEDveis removidos.",
   undo: "Desfazer",
   undoAvailable: "Item removido. Desfazer?",
   selectionScope: "Escopo da sele\xE7\xE3o",
@@ -885,6 +938,9 @@ var RU_LABELS = {
   applyTags: "\u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C \u0442\u0435\u0433\u0438",
   savedMessage: "\u042D\u043B\u0435\u043C\u0435\u043D\u0442 \u0441\u043E\u0445\u0440\u0430\u043D\u0451\u043D.",
   removedMessage: "\u042D\u043B\u0435\u043C\u0435\u043D\u0442 \u0443\u0434\u0430\u043B\u0451\u043D.",
+  restoredMessage: "\u042D\u043B\u0435\u043C\u0435\u043D\u0442 \u0432\u043E\u0441\u0441\u0442\u0430\u043D\u043E\u0432\u043B\u0435\u043D.",
+  syncFailedMessage: "\u0421\u0438\u043D\u0445\u0440\u043E\u043D\u0438\u0437\u0430\u0446\u0438\u044F \u043D\u0435 \u0432\u044B\u043F\u043E\u043B\u043D\u0435\u043D\u0430.",
+  stalePrunedMessage: "\u041D\u0435\u0434\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0435 \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u044B \u0443\u0434\u0430\u043B\u0435\u043D\u044B.",
   undo: "\u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C",
   undoAvailable: "\u042D\u043B\u0435\u043C\u0435\u043D\u0442 \u0443\u0434\u0430\u043B\u0451\u043D. \u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C?",
   selectionScope: "\u041E\u0431\u043B\u0430\u0441\u0442\u044C \u0432\u044B\u0431\u043E\u0440\u0430",
@@ -961,6 +1017,9 @@ var TH_LABELS = {
   applyTags: "\u0E43\u0E0A\u0E49\u0E41\u0E17\u0E47\u0E01",
   savedMessage: "\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23\u0E41\u0E25\u0E49\u0E27",
   removedMessage: "\u0E25\u0E1A\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23\u0E41\u0E25\u0E49\u0E27",
+  restoredMessage: "\u0E01\u0E39\u0E49\u0E04\u0E37\u0E19\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23\u0E41\u0E25\u0E49\u0E27",
+  syncFailedMessage: "\u0E0B\u0E34\u0E07\u0E04\u0E4C\u0E44\u0E21\u0E48\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08",
+  stalePrunedMessage: "\u0E25\u0E1A\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23\u0E17\u0E35\u0E48\u0E43\u0E0A\u0E49\u0E44\u0E21\u0E48\u0E44\u0E14\u0E49\u0E41\u0E25\u0E49\u0E27",
   undo: "\u0E40\u0E25\u0E34\u0E01\u0E17\u0E33",
   undoAvailable: "\u0E25\u0E1A\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23\u0E41\u0E25\u0E49\u0E27 \u0E15\u0E49\u0E2D\u0E07\u0E01\u0E32\u0E23\u0E40\u0E25\u0E34\u0E01\u0E17\u0E33\u0E2B\u0E23\u0E37\u0E2D\u0E44\u0E21\u0E48",
   selectionScope: "\u0E02\u0E2D\u0E1A\u0E40\u0E02\u0E15\u0E01\u0E32\u0E23\u0E40\u0E25\u0E37\u0E2D\u0E01",
@@ -1037,6 +1096,9 @@ var VI_LABELS = {
   applyTags: "\xC1p d\u1EE5ng th\u1EBB",
   savedMessage: "\u0110\xE3 l\u01B0u m\u1EE5c.",
   removedMessage: "\u0110\xE3 x\xF3a m\u1EE5c.",
+  restoredMessage: "\u0110\xE3 kh\xF4i ph\u1EE5c m\u1EE5c.",
+  syncFailedMessage: "\u0110\u1ED3ng b\u1ED9 kh\xF4ng th\xE0nh c\xF4ng.",
+  stalePrunedMessage: "\u0110\xE3 x\xF3a c\xE1c m\u1EE5c kh\xF4ng kh\u1EA3 d\u1EE5ng.",
   undo: "Ho\xE0n t\xE1c",
   undoAvailable: "\u0110\xE3 x\xF3a m\u1EE5c. Ho\xE0n t\xE1c?",
   selectionScope: "Ph\u1EA1m vi l\u1EF1a ch\u1ECDn",
@@ -1113,6 +1175,9 @@ var ZH_HANS_LABELS = {
   applyTags: "\u5E94\u7528\u6807\u7B7E",
   savedMessage: "\u9879\u76EE\u5DF2\u4FDD\u5B58\u3002",
   removedMessage: "\u9879\u76EE\u5DF2\u5220\u9664\u3002",
+  restoredMessage: "\u9879\u76EE\u5DF2\u6062\u590D\u3002",
+  syncFailedMessage: "\u540C\u6B65\u5931\u8D25\u3002",
+  stalePrunedMessage: "\u4E0D\u53EF\u7528\u9879\u76EE\u5DF2\u5220\u9664\u3002",
   undo: "\u64A4\u9500",
   undoAvailable: "\u9879\u76EE\u5DF2\u5220\u9664\u3002\u8981\u64A4\u9500\u5417\uFF1F",
   selectionScope: "\u9009\u62E9\u8303\u56F4",
@@ -1189,6 +1254,9 @@ var ZH_HANT_LABELS = {
   applyTags: "\u5957\u7528\u6A19\u7C64",
   savedMessage: "\u9805\u76EE\u5DF2\u5132\u5B58\u3002",
   removedMessage: "\u9805\u76EE\u5DF2\u522A\u9664\u3002",
+  restoredMessage: "\u9805\u76EE\u5DF2\u9084\u539F\u3002",
+  syncFailedMessage: "\u540C\u6B65\u5931\u6557\u3002",
+  stalePrunedMessage: "\u7121\u6CD5\u4F7F\u7528\u7684\u9805\u76EE\u5DF2\u522A\u9664\u3002",
   undo: "\u5FA9\u539F",
   undoAvailable: "\u9805\u76EE\u5DF2\u522A\u9664\u3002\u8981\u5FA9\u539F\u55CE\uFF1F",
   selectionScope: "\u9078\u53D6\u7BC4\u570D",
@@ -1291,14 +1359,29 @@ function getKeepLocaleLabels(locale) {
 // src/ui-context.tsx
 import { jsx } from "react/jsx-runtime";
 var DEFAULT_LABELS = KEEP_LOCALE_LABELS.en;
-var KeepUiLabelsContext = createContext({ labels: DEFAULT_LABELS });
-function KeepUiProvider({ labels, locale, labelResolver, children }) {
+var KeepUiLabelsContext = createContext({
+  labels: DEFAULT_LABELS,
+  emitFeedback: () => void 0
+});
+function KeepUiProvider({
+  labels,
+  locale,
+  labelResolver,
+  onFeedback,
+  children
+}) {
+  const emitFeedback = useCallback2(
+    (event) => {
+      onFeedback?.(event);
+    },
+    [onFeedback]
+  );
   const value = useMemo(() => {
     const resolvedLocale = normalizeKeepLocale(locale);
     const dictionary = getKeepLocaleLabels(resolvedLocale);
     const resolved = { ...DEFAULT_LABELS, ...dictionary, ...labels };
-    return { locale: locale ?? resolvedLocale, labels: resolved, customLabels: labels, labelResolver };
-  }, [labelResolver, labels, locale]);
+    return { locale: locale ?? resolvedLocale, labels: resolved, customLabels: labels, labelResolver, emitFeedback };
+  }, [emitFeedback, labelResolver, labels, locale]);
   return /* @__PURE__ */ jsx(KeepUiLabelsContext.Provider, { value, children });
 }
 function useKeepUiLabels() {
@@ -1308,6 +1391,10 @@ function useUiLabel(key, override) {
   const context = useKeepUiLabels();
   return override ?? context.customLabels?.[key] ?? context.labelResolver?.(key, { locale: context.locale }) ?? context.labels[key];
 }
+function useKeepUiFeedback() {
+  const { emitFeedback } = useKeepUiLabels();
+  return useCallback2((event) => emitFeedback(event), [emitFeedback]);
+}
 
 // src/hooks/useKeepBackup.ts
 function useKeepBackup({ filename, onExport, onImported }) {
@@ -1453,9 +1540,49 @@ import { useState as useState2 } from "react";
 // src/shared.tsx
 import {
   cloneElement,
-  isValidElement
+  createContext as createContext2,
+  isValidElement,
+  useContext as useContext2
 } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3 } from "react/jsx-runtime";
+var KeepSearchQueryContext = createContext2(void 0);
+function KeepSearchQueryProvider({ query, children }) {
+  return /* @__PURE__ */ jsx3(KeepSearchQueryContext.Provider, { value: query, children });
+}
+function useKeepSearchQuery() {
+  return useContext2(KeepSearchQueryContext);
+}
+function KeepHighlight({ children, query }) {
+  const contextQuery = useKeepSearchQuery();
+  const resolvedQuery = query ?? contextQuery;
+  if (typeof children !== "string" || !resolvedQuery?.trim()) return children ?? null;
+  return highlightText(children, resolvedQuery);
+}
+function highlightText(text, query) {
+  const normalizedQuery = query.trim();
+  if (!normalizedQuery) return text;
+  const matcher = new RegExp(escapeRegExp(normalizedQuery), "gi");
+  const parts = [];
+  let lastIndex = 0;
+  let matchIndex = 0;
+  while (true) {
+    const match = matcher.exec(text);
+    if (match === null) break;
+    const index = match.index;
+    if (index > lastIndex) parts.push(text.slice(lastIndex, index));
+    parts.push(
+      /* @__PURE__ */ jsx3("mark", { className: "keep-highlight", "data-highlight": "true", children: match[0] }, `highlight-${matchIndex}`)
+    );
+    lastIndex = index + match[0].length;
+    matchIndex += 1;
+  }
+  if (lastIndex === 0) return text;
+  if (lastIndex < text.length) parts.push(text.slice(lastIndex));
+  return /* @__PURE__ */ jsx3(Fragment, { children: parts });
+}
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
 function toKeepButtonItem(item) {
   return {
     id: item.id,
@@ -1614,7 +1741,7 @@ function getItemLabel(item) {
 }
 
 // src/KeepBulkActions.tsx
-import { Fragment, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 function KeepBulkActions({
   query,
   selectedIds: controlledSelectedIds,
@@ -1637,7 +1764,7 @@ function KeepBulkActions({
     controlledScope,
     onSelectionScopeChange
   });
-  const body = render ? render(state) : typeof children === "function" ? children(state) : children ?? /* @__PURE__ */ jsxs2(Fragment, { children: [
+  const body = render ? render(state) : typeof children === "function" ? children(state) : children ?? /* @__PURE__ */ jsxs2(Fragment2, { children: [
     /* @__PURE__ */ jsxs2("fieldset", { children: [
       /* @__PURE__ */ jsx5("legend", { children: labels.selectItems }),
       /* @__PURE__ */ jsxs2("label", { children: [
@@ -1732,47 +1859,91 @@ function KeepBulkActions({
 import {
   KeepButton as CoreKeepButton
 } from "@keepkit/core/react";
-import { createElement } from "react";
+import { createElement, useEffect, useRef as useRef2 } from "react";
 
 // src/hooks/useKeepButton.ts
 import { useKeepItem } from "@keepkit/core/react";
 function useKeepButton({ item, labels, icons, children }) {
   return {
     buttonState: useKeepItem(item),
+    emitFeedback: useKeepUiFeedback(),
     customStateLabel: labels?.loading !== void 0 || labels?.error !== void 0 || icons !== void 0 && children === void 0,
     labels: {
       save: useUiLabel("save", typeof labels?.unsaved === "string" ? labels.unsaved : void 0),
       saved: useUiLabel("saved", typeof labels?.saved === "string" ? labels.saved : void 0),
       loading: useUiLabel("loading", typeof labels?.loading === "string" ? labels.loading : void 0),
-      error: useUiLabel("error", typeof labels?.error === "string" ? labels.error : void 0)
+      error: useUiLabel("error", typeof labels?.error === "string" ? labels.error : void 0),
+      savedMessage: useUiLabel("savedMessage"),
+      removedMessage: useUiLabel("removedMessage"),
+      restoredMessage: useUiLabel("restoredMessage"),
+      undo: useUiLabel("undo")
     }
   };
 }
 
 // src/KeepButton.tsx
-import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 function KeepButton({
   labels,
   icons,
   iconOnly = false,
   showLabel = true,
   iconClassName,
+  onClick,
+  onToggleError,
   ...props
 }) {
   const view = useKeepButton({ item: props.item, labels, icons, children: props.children });
+  const pendingToggle = useRef2(null);
+  useEffect(() => {
+    const pending = pendingToggle.current;
+    if (!pending || view.buttonState.isMutating || pending.wasSaved === view.buttonState.isSaved) return;
+    pendingToggle.current = null;
+    if (view.buttonState.isSaved && view.buttonState.item) {
+      view.emitFeedback({ type: "item-saved", item: view.buttonState.item, message: view.labels.savedMessage });
+      return;
+    }
+    if (!pending.item) return;
+    const removedItem = pending.item;
+    view.emitFeedback({
+      type: "item-removed",
+      item: removedItem,
+      message: view.labels.removedMessage,
+      undoLabel: view.labels.undo,
+      undo: async () => {
+        await view.buttonState.save();
+        view.emitFeedback({
+          type: "item-restored",
+          item: removedItem,
+          items: [removedItem],
+          message: view.labels.restoredMessage
+        });
+      }
+    });
+  }, [view]);
   const getStateContent = (state) => {
     if (typeof props.children === "function") return props.children(state);
     if (props.children !== void 0) return props.children;
     const label = state.error ? labels?.error ?? view.labels.error : state.isMutating ? labels?.loading ?? view.labels.loading : state.isSaved ? labels?.saved ?? view.labels.saved : labels?.unsaved ?? view.labels.save;
     if (!icons) return label;
     const icon = state.error ? icons.error : state.isMutating ? icons.loading : state.isSaved ? icons.remove ?? icons.saved : icons.save;
-    return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    return /* @__PURE__ */ jsxs3(Fragment3, { children: [
       renderIcon(icon, iconClassName),
       showLabel && !iconOnly ? label : null
     ] });
   };
   const sharedProps = {
     ...props,
+    onClick: (event) => {
+      onClick?.(event);
+      if (!event.defaultPrevented) {
+        pendingToggle.current = { wasSaved: view.buttonState.isSaved, item: view.buttonState.item };
+      }
+    },
+    onToggleError: (error) => {
+      pendingToggle.current = null;
+      onToggleError?.(error);
+    },
     "data-keepkit": "button",
     "data-keep-action": "toggle-save",
     "data-has-custom-icon": icons ? "true" : void 0,
@@ -1784,7 +1955,7 @@ function KeepButton({
     unsavedAriaLabel: labels?.unsavedAriaLabel ?? props.unsavedAriaLabel
   };
   if (!view.customStateLabel) return /* @__PURE__ */ jsx6(CoreKeepButton, { ...sharedProps });
-  return /* @__PURE__ */ jsx6(CoreKeepButton, { ...sharedProps, children: (state) => /* @__PURE__ */ jsx6(Fragment2, { children: getStateContent(state) }) });
+  return /* @__PURE__ */ jsx6(CoreKeepButton, { ...sharedProps, children: (state) => /* @__PURE__ */ jsx6(Fragment3, { children: getStateContent(state) }) });
 }
 function renderIcon(icon, className) {
   if (typeof icon === "function") return createElement(icon, { "aria-hidden": true, className });
@@ -1804,7 +1975,7 @@ import {
   decodeKeepListQuery,
   encodeKeepListQuery
 } from "@keepkit/core/core";
-import { useEffect, useRef as useRef2 } from "react";
+import { useEffect as useEffect2, useRef as useRef3 } from "react";
 function createNextPagesRouterAdapter(router) {
   const getUrl = () => router.asPath ?? (typeof window === "undefined" ? "/" : window.location.href);
   return {
@@ -1825,13 +1996,13 @@ function useKeepUrlSync({
   options = {},
   adapter: providedAdapter
 }) {
-  const browserAdapterRef = useRef2(getBrowserAdapter());
+  const browserAdapterRef = useRef3(getBrowserAdapter());
   const adapter = providedAdapter ?? browserAdapterRef.current;
-  const onQueryChangeRef = useRef2(onQueryChange);
+  const onQueryChangeRef = useRef3(onQueryChange);
   onQueryChangeRef.current = onQueryChange;
-  const skipWriteRef = useRef2(true);
+  const skipWriteRef = useRef3(true);
   const params = options.params;
-  useEffect(() => {
+  useEffect2(() => {
     if (!enabled) return;
     const read = () => {
       const url = adapter.getUrl();
@@ -1848,7 +2019,7 @@ function useKeepUrlSync({
     read();
     return adapter.subscribe?.(read);
   }, [adapter, enabled, params]);
-  useEffect(() => {
+  useEffect2(() => {
     if (!enabled) return;
     if (skipWriteRef.current) {
       skipWriteRef.current = false;
@@ -1966,9 +2137,79 @@ function useKeepListView(query) {
   };
 }
 
+// src/hooks/useRovingTabIndex.ts
+import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef4 } from "react";
+function useRovingTabIndex() {
+  const ref = useRef4(null);
+  const getItems = useCallback3(() => {
+    const root = ref.current;
+    if (!root) return [];
+    return Array.from(root.querySelectorAll('[data-keepkit="card"]')).filter(
+      (item) => item.getAttribute("aria-hidden") !== "true" && item.getAttribute("data-roving-disabled") !== "true"
+    );
+  }, []);
+  const syncTabIndices = useCallback3(() => {
+    const items = getItems();
+    if (items.length === 0) return;
+    const activeElement = document.activeElement;
+    const activeItem = items.find((item) => item === activeElement || item.contains(activeElement));
+    const activeIndex = activeItem ? items.indexOf(activeItem) : 0;
+    items.forEach((item, index) => {
+      item.tabIndex = index === activeIndex ? 0 : -1;
+    });
+  }, [getItems]);
+  useEffect3(() => {
+    const root = ref.current;
+    if (!root) return;
+    syncTabIndices();
+    const observer = new MutationObserver(syncTabIndices);
+    observer.observe(root, { childList: true, subtree: true });
+    return () => observer.disconnect();
+  }, [syncTabIndices]);
+  const onFocusCapture = useCallback3(
+    (event) => {
+      if (!(event.target instanceof HTMLElement)) return;
+      const item = event.target.closest('[data-keepkit="card"]');
+      if (!item || !ref.current?.contains(item)) return;
+      getItems().forEach((candidate) => {
+        candidate.tabIndex = candidate === item ? 0 : -1;
+      });
+    },
+    [getItems]
+  );
+  const onKeyDown = useCallback3(
+    (event) => {
+      if (event.defaultPrevented) return;
+      const items = getItems();
+      if (!(event.target instanceof HTMLElement)) return;
+      const current = event.target.closest('[data-keepkit="card"]');
+      if (!current || current !== event.target || !ref.current?.contains(current)) return;
+      const currentIndex = items.indexOf(current);
+      if (currentIndex < 0) return;
+      let nextIndex;
+      if (event.key === "Home") nextIndex = 0;
+      if (event.key === "End") nextIndex = items.length - 1;
+      if (event.key === "ArrowRight" || event.key === "ArrowDown")
+        nextIndex = Math.min(currentIndex + 1, items.length - 1);
+      if (event.key === "ArrowLeft" || event.key === "ArrowUp") nextIndex = Math.max(currentIndex - 1, 0);
+      if (nextIndex === void 0) return;
+      event.preventDefault();
+      if (nextIndex === currentIndex) return;
+      items[nextIndex]?.focus();
+    },
+    [getItems]
+  );
+  return { ref, onKeyDown, onFocusCapture };
+}
+
 // src/KeepItemCard.tsx
 import {
-  isValidElement as isValidElement2
+  createContext as createContext3,
+  createElement as createElement2,
+  isValidElement as isValidElement2,
+  useContext as useContext3,
+  useEffect as useEffect4,
+  useState as useState5
 } from "react";
 
 // src/hooks/useKeepItemCard.ts
@@ -1986,6 +2227,10 @@ function useKeepItemCard(options) {
     onRemoved
   } = options;
   const itemState = useKeepItem2(item);
+  const emitFeedback = useKeepUiFeedback();
+  const removedMessage = useUiLabel("removedMessage");
+  const restoredMessage = useUiLabel("restoredMessage");
+  const undoLabel = useUiLabel("undo");
   const resolvedTitle = typeof title === "function" ? title(item) : title ?? getTitle?.(item) ?? getMetaTitle(item.meta) ?? item.id;
   const imageProps = getImageProps?.(item, resolvedTitle);
   const href = typeof hrefOption === "function" ? hrefOption(item) : hrefOption;
@@ -1993,12 +2238,32 @@ function useKeepItemCard(options) {
   const isExternalLink = href ? /^(?:[a-z][a-z\d+.-]*:|\/\/)/i.test(href) : false;
   const statusLabelKey = item.status && item.status !== "available" ? getStatusLabelKey(item.status) : "statusUnknown";
   const unavailableLabel = useUiLabel(statusLabelKey);
+  const remove = async () => {
+    const wasSaved = itemState.isSaved;
+    try {
+      await itemState.removeWithUndo();
+      onRemoved?.(item);
+      if (!wasSaved) return;
+      emitFeedback({
+        type: "item-removed",
+        item,
+        message: removedMessage,
+        undoLabel,
+        undo: async () => {
+          await itemState.undo();
+          emitFeedback({ type: "item-restored", item, items: [item], message: restoredMessage });
+        }
+      });
+    } catch (cause) {
+      onRemoveError?.(cause);
+    }
+  };
   const state = {
     item,
     isSaved: itemState.isSaved,
     isMutating: itemState.isMutating,
     error: itemState.error,
-    remove: itemState.remove,
+    remove,
     status: item.status
   };
   return {
@@ -2012,14 +2277,7 @@ function useKeepItemCard(options) {
     resolvedLinkTarget: linkTargetAttribute ?? (isExternalLink ? "_blank" : void 0),
     resolvedLinkRel: linkRel ?? (isExternalLink ? "noreferrer" : void 0),
     statusLabel: item.status && item.status !== "available" ? unavailableLabel : void 0,
-    remove: async () => {
-      try {
-        await itemState.remove();
-        onRemoved?.(item);
-      } catch (cause) {
-        onRemoveError?.(cause);
-      }
-    },
+    remove,
     labels: {
       save: useUiLabel("save"),
       savedAt: useUiLabel("saved"),
@@ -2055,6 +2313,10 @@ import { useKeepContext as useKeepContext2 } from "@keepkit/core/react";
 import { useState as useState4 } from "react";
 function useKeepStaleNotice({ item, onRetry, onRemoved }) {
   const context = useKeepContext2();
+  const emitFeedback = useKeepUiFeedback();
+  const removedMessage = useUiLabel("removedMessage");
+  const restoredMessage = useUiLabel("restoredMessage");
+  const undoLabel = useUiLabel("undo");
   const [isRetrying, setIsRetrying] = useState4(false);
   const [error, setError] = useState4(null);
   async function retry() {
@@ -2073,6 +2335,16 @@ function useKeepStaleNotice({ item, onRetry, onRemoved }) {
     try {
       await context.removeItemWithUndo(item.id);
       onRemoved?.(item);
+      emitFeedback({
+        type: "item-removed",
+        item,
+        message: removedMessage,
+        undoLabel,
+        undo: async () => {
+          await context.undoLastRemoval();
+          emitFeedback({ type: "item-restored", item, items: [item], message: restoredMessage });
+        }
+      });
     } catch (cause) {
       setError(cause);
     }
@@ -2093,15 +2365,34 @@ function useKeepStaleNotice({ item, onRetry, onRemoved }) {
 }
 function useKeepPruneStale({ statuses, onPruned }) {
   const context = useKeepContext2();
-  const staleIds = context.items.filter((item) => item.status && statuses.includes(item.status)).map((item) => item.id);
+  const emitFeedback = useKeepUiFeedback();
+  const staleItems = context.items.filter((item) => item.status && statuses.includes(item.status));
+  const staleIds = staleItems.map((item) => item.id);
+  const restoredMessage = useUiLabel("restoredMessage");
+  const prunedMessage = useUiLabel("stalePrunedMessage");
+  const undoLabel = useUiLabel("undo");
   return {
     staleIds,
     isMutating: context.isMutating,
     label: useUiLabel("pruneStale"),
     prune: async () => {
       const ids = [...staleIds];
+      const items = [...staleItems];
       await context.removeItemsWithUndo(ids);
       onPruned?.(ids);
+      if (items.length > 0) {
+        emitFeedback({
+          type: "stale-pruned",
+          item: items[0],
+          items,
+          message: prunedMessage,
+          undoLabel,
+          undo: async () => {
+            await context.undoLastRemoval();
+            emitFeedback({ type: "item-restored", item: items[0], items, message: restoredMessage });
+          }
+        });
+      }
     }
   };
 }
@@ -2219,8 +2510,14 @@ function KeepPruneStaleButton({
 }
 
 // src/KeepItemCard.tsx
-import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
-function KeepItemCard({
+import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var KeepItemCardContext = createContext3(null);
+function useKeepItemCardCompound(part) {
+  const context = useContext3(KeepItemCardContext);
+  if (!context) throw new Error(`KeepItemCard.${part} must be rendered inside KeepItemCard.`);
+  return context;
+}
+function KeepItemCardRoot({
   item,
   title,
   getTitle,
@@ -2246,6 +2543,7 @@ function KeepItemCard({
   linkComponent: LinkComponent,
   linkTargetAttribute,
   linkRel,
+  highlightQuery,
   className,
   ...rootProps
 }) {
@@ -2260,6 +2558,8 @@ function KeepItemCard({
     onRemoveError,
     onRemoved
   });
+  const contextQuery = useKeepSearchQuery();
+  const searchQuery = highlightQuery ?? contextQuery;
   const contentChildren = asChild && isValidElement2(children) ? void 0 : children;
   function renderLink(content) {
     if (!view.href || !view.isAvailable) return content;
@@ -2272,21 +2572,47 @@ function KeepItemCard({
     };
     return LinkComponent ? /* @__PURE__ */ jsx9(LinkComponent, { ...linkProps }) : /* @__PURE__ */ jsx9("a", { ...linkProps });
   }
-  const body = render ? render(view.state) : typeof contentChildren === "function" ? contentChildren(view.state) : contentChildren ?? /* @__PURE__ */ jsxs5(Fragment3, { children: [
-    view.imageProps ? renderImage?.({ ...view.imageProps, alt: imageAlt ?? view.imageProps.alt }, item) ?? (ImageComponent ? /* @__PURE__ */ jsx9(ImageComponent, { ...view.imageProps, alt: imageAlt ?? view.imageProps.alt }) : /* @__PURE__ */ jsx9("img", { ...view.imageProps, alt: imageAlt ?? view.imageProps.alt })) : null,
-    /* @__PURE__ */ jsx9("h3", { children: linkTarget === "title" ? view.isAvailable ? renderLink(view.resolvedTitle) : view.href ? /* @__PURE__ */ jsx9("span", { "aria-disabled": "true", "data-link-disabled": "true", children: view.resolvedTitle }) : view.resolvedTitle : view.resolvedTitle }),
-    showSavedAt ? /* @__PURE__ */ jsxs5("div", { "data-card-meta": true, children: [
-      /* @__PURE__ */ jsxs5("span", { children: [
-        view.labels.savedAt,
-        ":"
-      ] }),
-      " ",
-      /* @__PURE__ */ jsx9("time", { dateTime: new Date(item.savedAt).toISOString(), children: formatSavedAt(item.savedAt) })
-    ] }) : null,
-    showTags && (item.tags?.length ?? 0) > 0 ? renderTags ? renderTags(item.tags ?? [], item) : /* @__PURE__ */ jsx9("ul", { "aria-label": view.labels.tags, children: item.tags?.map((tag) => /* @__PURE__ */ jsx9("li", { children: tag }, tag)) }) : null,
-    view.itemState.error ? /* @__PURE__ */ jsx9("p", { role: "alert", children: getErrorMessage2(view.itemState.error, view.labels.error) }) : null,
-    view.statusLabel ? /* @__PURE__ */ jsx9(KeepStaleNotice, { item, onRetry, onRemoved }) : null,
-    showSaveButton && !view.statusLabel ? /* @__PURE__ */ jsx9(
+  function renderTitle(content) {
+    if (linkTarget !== "title") return content;
+    if (view.isAvailable) return renderLink(content);
+    return view.href ? /* @__PURE__ */ jsx9("span", { "aria-disabled": "true", "data-link-disabled": "true", children: content }) : content;
+  }
+  const resolvedImageProps = view.imageProps ? { ...view.imageProps, alt: imageAlt ?? view.imageProps.alt } : void 0;
+  const imageSource = resolvedImageProps?.src;
+  const [imageStatus, setImageStatus] = useState5(imageSource ? "loading" : "error");
+  useEffect4(() => {
+    setImageStatus(imageSource ? "loading" : "error");
+  }, [imageSource]);
+  let image = null;
+  if (resolvedImageProps) {
+    const imagePropsWithHandlers = {
+      ...resolvedImageProps,
+      src: resolvedImageProps.src,
+      alt: imageAlt ?? resolvedImageProps.alt,
+      onLoad: (event) => {
+        resolvedImageProps.onLoad?.(event);
+        setImageStatus("loaded");
+      },
+      onError: (event) => {
+        resolvedImageProps.onError?.(event);
+        setImageStatus("error");
+      }
+    };
+    image = renderImage?.(imagePropsWithHandlers, item) ?? (ImageComponent ? /* @__PURE__ */ jsx9(ImageComponent, { ...imagePropsWithHandlers }) : /* @__PURE__ */ jsx9("img", { ...imagePropsWithHandlers, alt: imagePropsWithHandlers.alt }));
+  }
+  const tags = showTags ? item.tags ?? [] : [];
+  const renderedTags = showTags && tags.length > 0 ? renderTags?.(tags, item) ?? null : null;
+  const meta = showSavedAt ? /* @__PURE__ */ jsxs5("div", { "data-card-meta": true, children: [
+    /* @__PURE__ */ jsxs5("span", { children: [
+      view.labels.savedAt,
+      ":"
+    ] }),
+    " ",
+    /* @__PURE__ */ jsx9("time", { dateTime: new Date(item.savedAt).toISOString(), children: formatSavedAt(item.savedAt) })
+  ] }) : null;
+  const error = view.itemState.error ? /* @__PURE__ */ jsx9("p", { role: "alert", children: getErrorMessage2(view.itemState.error, view.labels.error) }) : null;
+  const actions = view.statusLabel ? /* @__PURE__ */ jsx9(KeepStaleNotice, { item, onRetry, onRemoved }) : /* @__PURE__ */ jsxs5(Fragment4, { children: [
+    showSaveButton ? /* @__PURE__ */ jsx9(
       KeepButton,
       {
         item: toKeepButtonItem(item),
@@ -2294,7 +2620,7 @@ function KeepItemCard({
         getAriaLabel: (buttonState) => `${buttonState.isSaved ? view.labels.remove : view.labels.save} ${String(view.resolvedTitle)}`
       }
     ) : null,
-    !view.statusLabel ? /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx9(
       "button",
       {
         type: "button",
@@ -2303,10 +2629,30 @@ function KeepItemCard({
         disabled: view.itemState.isMutating,
         children: removeLabel ?? view.labels.remove
       }
-    ) : null
+    )
+  ] });
+  const compoundValue = {
+    resolvedTitle: view.resolvedTitle,
+    renderTitle,
+    image: imageStatus === "error" ? null : image,
+    imageStatus,
+    fallbackLabel: String(view.resolvedTitle),
+    tags,
+    tagsLabel: view.labels.tags,
+    renderedTags,
+    meta,
+    error,
+    actions,
+    renderText: (content) => /* @__PURE__ */ jsx9(KeepHighlight, { query: searchQuery, children: content })
+  };
+  const defaultBody = /* @__PURE__ */ jsxs5(Fragment4, { children: [
+    /* @__PURE__ */ jsx9(KeepItemCardMedia, {}),
+    /* @__PURE__ */ jsx9(KeepItemCardContent, {}),
+    /* @__PURE__ */ jsx9(KeepItemCardActions, {})
   ] });
+  const body = render ? render(view.state) : typeof contentChildren === "function" ? contentChildren(view.state) : contentChildren ?? defaultBody;
   const linkedBody = linkTarget === "card" && view.isAvailable ? renderLink(body) : body;
-  return renderRoot(
+  const root = renderRoot(
     asChild,
     isValidElement2(children) ? children : void 0,
     {
@@ -2323,6 +2669,68 @@ function KeepItemCard({
     linkedBody,
     "KeepItemCard"
   );
+  return /* @__PURE__ */ jsx9(KeepItemCardContext.Provider, { value: compoundValue, children: root });
+}
+function KeepItemCardMedia({ children, fallback, ...props }) {
+  const context = useKeepItemCardCompound("Media");
+  return /* @__PURE__ */ jsx9("div", { ...props, "data-keep-card-part": "media", "data-media-status": context.imageStatus, children: children ?? context.image ?? /* @__PURE__ */ jsx9("span", { role: "img", "aria-label": context.fallbackLabel, "data-keep-card-fallback": "true", children: fallback ?? /* @__PURE__ */ jsx9(KeepMediaPlaceholderIcon, {}) }) });
+}
+function KeepItemCardContent({ children, ...props }) {
+  const context = useKeepItemCardCompound("Content");
+  return /* @__PURE__ */ jsx9("div", { ...props, "data-keep-card-part": "content", children: children === void 0 ? /* @__PURE__ */ jsxs5(Fragment4, { children: [
+    /* @__PURE__ */ jsx9(KeepItemCardTitle, {}),
+    context.meta,
+    /* @__PURE__ */ jsx9(KeepItemCardTags, {}),
+    context.error
+  ] }) : context.renderText(children) });
+}
+function KeepItemCardTitle({ as = "h3", children, ...props }) {
+  const context = useKeepItemCardCompound("Title");
+  return createElement2(
+    as,
+    { ...props, "data-keep-card-part": "title" },
+    context.renderTitle(context.renderText(children ?? context.resolvedTitle))
+  );
+}
+function KeepMediaPlaceholderIcon() {
+  return /* @__PURE__ */ jsxs5("svg", { "data-media-fallback-icon": "true", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx9(
+      "path",
+      {
+        d: "M4 5.5A1.5 1.5 0 0 1 5.5 4h13A1.5 1.5 0 0 1 20 5.5v13a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 18.5v-13Z",
+        fill: "none",
+        stroke: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ jsx9("circle", { cx: "9", cy: "9", r: "1.5", fill: "currentColor" }),
+    /* @__PURE__ */ jsx9("path", { d: "m5.5 18 4.5-4.5 3 3 2-2L19 18", fill: "none", stroke: "currentColor" })
+  ] });
+}
+function KeepItemCardTags({ children, ...props }) {
+  const context = useKeepItemCardCompound("Tags");
+  if (children === void 0 && context.renderedTags) return context.renderedTags;
+  if (children === void 0 && context.tags.length === 0) return null;
+  return /* @__PURE__ */ jsx9("ul", { ...props, "aria-label": props["aria-label"] ?? context.tagsLabel, "data-keep-card-part": "tags", children: children ?? context.tags.map((tag) => /* @__PURE__ */ jsx9("li", { children: tag }, tag)) });
+}
+function KeepItemCardActions({ children, ...props }) {
+  const context = useKeepItemCardCompound("Actions");
+  return /* @__PURE__ */ jsx9("div", { ...props, "data-keep-card-part": "actions", children: children ?? context.actions });
+}
+var KeepItemCard = Object.assign(KeepItemCardRoot, {
+  Media: KeepItemCardMedia,
+  Content: KeepItemCardContent,
+  Title: KeepItemCardTitle,
+  Tags: KeepItemCardTags,
+  Actions: KeepItemCardActions
+});
+function KeepItemCardSkeleton({ layout = "list", ...props }) {
+  return /* @__PURE__ */ jsxs5("article", { ...props, "aria-hidden": "true", "data-keepkit": "card-skeleton", "data-layout": layout, "data-state": "loading", children: [
+    /* @__PURE__ */ jsx9("span", { "data-skeleton-part": "media" }),
+    /* @__PURE__ */ jsx9("span", { "data-skeleton-part": "title" }),
+    /* @__PURE__ */ jsx9("span", { "data-skeleton-part": "meta" }),
+    /* @__PURE__ */ jsx9("span", { "data-skeleton-part": "tag" }),
+    /* @__PURE__ */ jsx9("span", { "data-skeleton-part": "tag" })
+  ] });
 }
 function formatSavedAt(timestamp) {
   return new Date(timestamp).toISOString().slice(0, 10);
@@ -2332,7 +2740,7 @@ function getErrorMessage2(error, fallback) {
 }
 
 // src/KeepList.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 function KeepList(props) {
   const { fallback, onBoundaryError, boundaryResetKey, ...listProps } = props;
   const content = /* @__PURE__ */ jsx10(KeepListContent, { ...listProps });
@@ -2344,20 +2752,27 @@ function KeepListContent({
   children,
   renderItem,
   loading,
+  renderLoading,
+  loadingCount = 6,
   empty,
   error: errorContent,
   itemCardProps,
   layout = "list",
   asChild = false,
+  onKeyDown,
+  onFocusCapture,
   className,
   ...rootProps
 }) {
   const view = useKeepListView(query);
+  const roving = useRovingTabIndex();
   const { state } = view;
   const body = getListBody(state, {
     children,
     renderItem,
-    loading: loading ?? view.labels.loading,
+    loading: renderLoading !== void 0 ? renderLoading : loading,
+    loadingCount,
+    loadingLabel: view.labels.loading,
     empty: empty ?? view.labels.empty,
     error: errorContent ?? view.labels.error,
     itemCardProps,
@@ -2373,9 +2788,20 @@ function KeepListContent({
       "data-layout": layout,
       "aria-busy": state.isLoading || rootProps["aria-busy"],
       "data-state": getListState(state),
-      "data-loading": state.isLoading ? "true" : void 0
+      "data-loading": state.isLoading ? "true" : void 0,
+      "data-roving-tabindex": "true",
+      role: rootProps.role ?? "group",
+      ref: roving.ref,
+      onKeyDown: (event) => {
+        onKeyDown?.(event);
+        if (!event.defaultPrevented) roving.onKeyDown(event);
+      },
+      onFocusCapture: (event) => {
+        onFocusCapture?.(event);
+        if (!event.defaultPrevented) roving.onFocusCapture(event);
+      }
     },
-    body,
+    /* @__PURE__ */ jsx10(KeepSearchQueryProvider, { query: query?.search?.query, children: body }),
     "KeepList"
   );
 }
@@ -2387,7 +2813,17 @@ function getListState(state) {
 }
 function getListBody(state, options) {
   if (state.error && state.items.length === 0) return resolveContent(options.error, state);
-  if (state.isLoading && !state.isHydrated) return resolveContent(options.loading, state);
+  if (state.isLoading && !state.isHydrated) {
+    if (options.loading !== void 0) return resolveContent(options.loading, state);
+    const count = Number.isFinite(options.loadingCount) ? Math.max(0, Math.floor(options.loadingCount)) : 6;
+    return /* @__PURE__ */ jsxs6(Fragment5, { children: [
+      /* @__PURE__ */ jsx10("span", { role: "status", "data-keepkit": "loading-label", children: options.loadingLabel }),
+      /* @__PURE__ */ jsx10("ul", { "data-keepkit": "skeleton-list", "data-layout": options.layout, children: Array.from({ length: count }, (_, index) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: Static loading placeholders never reorder.
+        /* @__PURE__ */ jsx10("li", { children: /* @__PURE__ */ jsx10(KeepItemCardSkeleton, { layout: options.layout }) }, index)
+      )) })
+    ] });
+  }
   if (state.isHydrated && state.items.length === 0) return resolveContent(options.empty, state);
   if (typeof options.children === "function") return options.children(state);
   if (options.children !== void 0 && !isValidElement3(options.children)) return options.children;
@@ -2401,16 +2837,16 @@ import { isValidElement as isValidElement4 } from "react";
 
 // src/hooks/useKeepTagFilter.ts
 import { useKeepList as useKeepList4 } from "@keepkit/core/react";
-import { useCallback, useMemo as useMemo3, useState as useState5 } from "react";
+import { useCallback as useCallback4, useMemo as useMemo3, useState as useState6 } from "react";
 function useKeepTagFilter(options) {
   const { query, controlledValue, defaultValue, onChange, onValueChange } = options;
-  const [uncontrolledValue, setUncontrolledValue] = useState5(defaultValue);
+  const [uncontrolledValue, setUncontrolledValue] = useState6(defaultValue);
   const resolvedValue = controlledValue ?? uncontrolledValue;
   const list = useKeepList4({
     ...query,
     tags: resolvedValue ? [...query?.tags ?? [], resolvedValue] : query?.tags
   });
-  const select = useCallback(
+  const select = useCallback4(
     (tag) => {
       if (controlledValue === void 0) setUncontrolledValue(tag);
       onChange?.(tag);
@@ -2430,7 +2866,7 @@ function useKeepTagFilter(options) {
 }
 
 // src/KeepTagFilter.tsx
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 function KeepTagFilter({
   query,
   value: controlledValue,
@@ -2448,7 +2884,7 @@ function KeepTagFilter({
 }) {
   const view = useKeepTagFilter({ query, controlledValue, defaultValue, onChange, onValueChange });
   const contentChildren = asChild && isValidElement4(children) ? void 0 : children;
-  const body = render ? render(view.state) : typeof contentChildren === "function" ? contentChildren(view.state) : contentChildren ?? /* @__PURE__ */ jsxs6("fieldset", { children: [
+  const body = render ? render(view.state) : typeof contentChildren === "function" ? contentChildren(view.state) : contentChildren ?? /* @__PURE__ */ jsxs7("fieldset", { children: [
     /* @__PURE__ */ jsx11("legend", { children: ariaLabel ?? view.labels.aria }),
     /* @__PURE__ */ jsx11(
       "button",
@@ -2460,7 +2896,7 @@ function KeepTagFilter({
         children: allLabel ?? view.labels.all
       }
     ),
-    view.state.tags.map((tag) => /* @__PURE__ */ jsxs6(
+    view.state.tags.map((tag) => /* @__PURE__ */ jsxs7(
       "button",
       {
         type: "button",
@@ -2469,7 +2905,7 @@ function KeepTagFilter({
         onClick: () => view.state.select(tag),
         children: [
           renderTag ? renderTag(tag, view.state.tagCounts[tag] ?? 0, view.state.value === tag) : tag,
-          /* @__PURE__ */ jsxs6("span", { children: [
+          /* @__PURE__ */ jsxs7("span", { children: [
             " (",
             view.state.tagCounts[tag] ?? 0,
             ")"
@@ -2495,12 +2931,12 @@ function KeepTagFilter({
 }
 
 // src/hooks/useQueryControls.ts
-import { useEffect as useEffect2, useState as useState6 } from "react";
+import { useEffect as useEffect5, useState as useState7 } from "react";
 function useKeepSearchInput(options) {
   const { controlledValue, defaultValue, debounceMs, onValueChange } = options;
-  const [uncontrolledValue, setUncontrolledValue] = useState6(defaultValue);
+  const [uncontrolledValue, setUncontrolledValue] = useState7(defaultValue);
   const value = controlledValue ?? uncontrolledValue;
-  useEffect2(() => {
+  useEffect5(() => {
     if (!onValueChange) return;
     if (debounceMs <= 0) {
       onValueChange(value);
@@ -2519,7 +2955,7 @@ function useKeepSearchInput(options) {
 }
 function useKeepSortSelect(options) {
   const { controlledValue, defaultValue, onValueChange } = options;
-  const [uncontrolledValue, setUncontrolledValue] = useState6(defaultValue);
+  const [uncontrolledValue, setUncontrolledValue] = useState7(defaultValue);
   const value = controlledValue ?? uncontrolledValue;
   return {
     value,
@@ -2567,7 +3003,7 @@ function getVisiblePages(currentPage, pageCount, maxPageButtons) {
 }
 
 // src/query-controls.tsx
-import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 function KeepSearchInput({
   value: controlledValue,
   defaultValue = "",
@@ -2603,7 +3039,7 @@ function KeepSortSelect({
   ...props
 }) {
   const view = useKeepSortSelect({ controlledValue, defaultValue, onValueChange });
-  const options = children ?? /* @__PURE__ */ jsxs7(Fragment4, { children: [
+  const options = children ?? /* @__PURE__ */ jsxs8(Fragment6, { children: [
     /* @__PURE__ */ jsx12("option", { value: "updatedAt:desc", children: view.labels.updatedNewest }),
     /* @__PURE__ */ jsx12("option", { value: "updatedAt:asc", children: view.labels.updatedOldest }),
     /* @__PURE__ */ jsx12("option", { value: "savedAt:desc", children: view.labels.savedNewest }),
@@ -2642,7 +3078,7 @@ function KeepPagination({
   };
   if (render)
     return /* @__PURE__ */ jsx12("nav", { ...navProps, children: render({ page: view.currentPage, pageCount: view.pageCount, goToPage: view.goToPage }) });
-  return /* @__PURE__ */ jsxs7("nav", { ...navProps, children: [
+  return /* @__PURE__ */ jsxs8("nav", { ...navProps, children: [
     /* @__PURE__ */ jsx12(
       "button",
       {
@@ -2679,7 +3115,7 @@ function KeepPagination({
 }
 
 // src/KeepCollection.tsx
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 function KeepCollection(props) {
   const { fallback, onBoundaryError, boundaryResetKey, ...collectionProps } = props;
   const content = /* @__PURE__ */ jsx13(KeepCollectionContent, { ...collectionProps });
@@ -2696,13 +3132,15 @@ function KeepCollectionContent({
   renderItem,
   itemCardProps,
   loading,
+  renderLoading,
+  loadingCount,
   empty,
   error,
   className,
   ...rootProps
 }) {
   const view = useKeepCollection({ query, pageSize, urlSync, urlAdapter, features });
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "section",
     {
       ...rootProps,
@@ -2713,7 +3151,7 @@ function KeepCollectionContent({
       "data-state": getCollectionState(view.list),
       "data-loading": view.list.isLoading || view.list.isMutating ? "true" : void 0,
       children: [
-        /* @__PURE__ */ jsxs8("div", { children: [
+        /* @__PURE__ */ jsxs9("div", { children: [
           view.enabled.search ? /* @__PURE__ */ jsx13(KeepSearchInput, { value: view.searchValue, onValueChange: view.setSearchValue }) : null,
           view.enabled.sort ? /* @__PURE__ */ jsx13(KeepSortSelect, { value: view.sortValue, onValueChange: view.setSortValue }) : null,
           view.enabled.tagFilter ? /* @__PURE__ */ jsx13(KeepTagFilter, { query, value: view.tag, onValueChange: view.setTag }) : null
@@ -2726,6 +3164,8 @@ function KeepCollectionContent({
             itemCardProps,
             layout,
             loading,
+            renderLoading,
+            loadingCount,
             empty,
             error
           }
@@ -2753,8 +3193,31 @@ function getCollectionState(list) {
 
 // src/KeepLayout.tsx
 import { jsx as jsx14 } from "react/jsx-runtime";
-function KeepLayout({ layout = "list", children, ...props }) {
-  return /* @__PURE__ */ jsx14("div", { ...props, "data-keepkit": "layout", "data-layout": layout, children });
+function KeepLayout({ layout = "list", children, onKeyDown, onFocusCapture, ...props }) {
+  const roving = useRovingTabIndex();
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: The group manages keyboard focus for descendant cards.
+    /* @__PURE__ */ jsx14(
+      "div",
+      {
+        ...props,
+        ref: roving.ref,
+        "data-keepkit": "layout",
+        "data-layout": layout,
+        "data-roving-tabindex": "true",
+        role: props.role ?? "group",
+        onKeyDown: (event) => {
+          onKeyDown?.(event);
+          if (!event.defaultPrevented) roving.onKeyDown(event);
+        },
+        onFocusCapture: (event) => {
+          onFocusCapture?.(event);
+          if (!event.defaultPrevented) roving.onFocusCapture(event);
+        },
+        children
+      }
+    )
+  );
 }
 
 // src/KeepNoteEditor.tsx
@@ -2762,16 +3225,16 @@ import { isValidElement as isValidElement5 } from "react";
 
 // src/hooks/useKeepNoteEditor.ts
 import { useKeepItem as useKeepItem3 } from "@keepkit/core/react";
-import { useCallback as useCallback2, useEffect as useEffect3, useRef as useRef3, useState as useState7 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect6, useRef as useRef5, useState as useState8 } from "react";
 function useKeepNoteEditor({ item, debounceMs, onSaved, onSaveError }) {
   const itemState = useKeepItem3(item);
   const { error, isMutating, item: savedItem, updateNote } = itemState;
-  const [note, setNote] = useState7(item.note ?? "");
+  const [note, setNote] = useState8(item.note ?? "");
   const baselineNote = savedItem?.note ?? item.note ?? "";
   const isDirty = note !== baselineNote;
-  const lastSavedNoteRef = useRef3(void 0);
-  useEffect3(() => setNote(baselineNote), [baselineNote]);
-  const save = useCallback2(async () => {
+  const lastSavedNoteRef = useRef5(void 0);
+  useEffect6(() => setNote(baselineNote), [baselineNote]);
+  const save = useCallback5(async () => {
     const nextNote = note.trim() || void 0;
     try {
       await updateNote(nextNote);
@@ -2782,7 +3245,7 @@ function useKeepNoteEditor({ item, debounceMs, onSaved, onSaveError }) {
       throw cause;
     }
   }, [note, onSaveError, onSaved, updateNote]);
-  useEffect3(() => {
+  useEffect6(() => {
     if (!isDirty || debounceMs <= 0 || lastSavedNoteRef.current === note) return;
     const timer = window.setTimeout(() => void save().catch(() => void 0), debounceMs);
     return () => window.clearTimeout(timer);
@@ -2817,7 +3280,7 @@ function useKeepNoteEditor({ item, debounceMs, onSaved, onSaveError }) {
 }
 
 // src/KeepNoteEditor.tsx
-import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 function KeepNoteEditor({
   item,
   label,
@@ -2835,8 +3298,8 @@ function KeepNoteEditor({
   const view = useKeepNoteEditor({ item, debounceMs, onSaved, onSaveError });
   const { error, isDirty, isSaving, note, setNote } = view.state;
   const contentChildren = asChild && isValidElement5(children) ? void 0 : children;
-  const body = render ? render(view.state) : typeof contentChildren === "function" ? contentChildren(view.state) : contentChildren ?? /* @__PURE__ */ jsxs9(Fragment5, { children: [
-    /* @__PURE__ */ jsxs9("label", { children: [
+  const body = render ? render(view.state) : typeof contentChildren === "function" ? contentChildren(view.state) : contentChildren ?? /* @__PURE__ */ jsxs10(Fragment7, { children: [
+    /* @__PURE__ */ jsxs10("label", { children: [
       label ?? view.labels.note,
       /* @__PURE__ */ jsx15(
         "textarea",
@@ -2853,7 +3316,7 @@ function KeepNoteEditor({
     /* @__PURE__ */ jsx15("button", { type: "submit", "data-keep-action": "save-note", disabled: isSaving, "aria-busy": isSaving, children: saveLabel ?? view.labels.save })
   ] });
   if (!asChild) {
-    return /* @__PURE__ */ jsxs9(
+    return /* @__PURE__ */ jsxs10(
       "form",
       {
         ...formProps,
@@ -2892,18 +3355,119 @@ function getErrorMessage3(error, fallback) {
   return error instanceof Error ? error.message : fallback;
 }
 
-// src/hooks/useKeepSyncRecoveryDialog.ts
+// src/KeepReorderableList.tsx
+import { useState as useState9 } from "react";
+import { jsx as jsx16 } from "react/jsx-runtime";
+function KeepReorderableList({
+  items,
+  onReorder,
+  renderItem,
+  itemLabel = (_item, index) => `Move item ${index + 1}`,
+  ...props
+}) {
+  const [draggedId, setDraggedId] = useState9(null);
+  const ids = items.map((item) => item.id);
+  function commit(nextIds) {
+    void onReorder(nextIds);
+  }
+  function move(index, targetIndex) {
+    if (targetIndex < 0 || targetIndex >= ids.length || targetIndex === index) return;
+    const next = [...ids];
+    const [id] = next.splice(index, 1);
+    if (id === void 0) return;
+    next.splice(targetIndex, 0, id);
+    commit(next);
+  }
+  return /* @__PURE__ */ jsx16("ul", { ...props, "data-keepkit": "reorderable-list", children: items.map((item, index) => {
+    const moveUp = () => move(index, index - 1);
+    const moveDown = () => move(index, index + 1);
+    const onHandleKeyDown = (event) => {
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        moveUp();
+      } else if (event.key === "ArrowDown") {
+        event.preventDefault();
+        moveDown();
+      }
+    };
+    const state = {
+      index,
+      isDragging: draggedId === item.id,
+      moveUp,
+      moveDown,
+      dragHandleProps: {
+        role: "button",
+        tabIndex: 0,
+        draggable: true,
+        "aria-label": itemLabel(item, index),
+        "aria-grabbed": draggedId === item.id,
+        onDragStart: () => setDraggedId(item.id),
+        onDragEnd: () => setDraggedId(null),
+        onKeyDown: onHandleKeyDown
+      }
+    };
+    return /* @__PURE__ */ jsx16(
+      "li",
+      {
+        "data-reorder-index": index,
+        "data-dragging": draggedId === item.id ? "true" : void 0,
+        onDragOver: (event) => {
+          if (draggedId && draggedId !== item.id) event.preventDefault();
+        },
+        onDrop: (event) => {
+          event.preventDefault();
+          if (!draggedId || draggedId === item.id) return;
+          const sourceIndex = ids.indexOf(draggedId);
+          setDraggedId(null);
+          move(sourceIndex, index);
+        },
+        children: renderItem(item, state)
+      },
+      item.id
+    );
+  }) });
+}
+
+// src/hooks/useKeepSyncFeedback.ts
 import { useKeepContext as useKeepContext3 } from "@keepkit/core/react";
-import { useEffect as useEffect4, useState as useState8 } from "react";
+import { useEffect as useEffect7, useRef as useRef6 } from "react";
+function useKeepSyncFeedback() {
+  const { syncState } = useKeepContext3();
+  const emitFeedback = useKeepUiFeedback();
+  const completedMessage = useUiLabel("syncSynced");
+  const failedMessage = useUiLabel("syncFailedMessage");
+  const previousStatus = useRef6("idle");
+  useEffect7(() => {
+    const previous = previousStatus.current;
+    previousStatus.current = syncState.status;
+    if (syncState.status === "error" && previous !== "error") {
+      emitFeedback({ type: "sync-failed", error: syncState.error, message: failedMessage });
+      return;
+    }
+    if (syncState.status === "synced" && (previous === "pending" || previous === "syncing" || previous === "conflict" || previous === "error")) {
+      emitFeedback({ type: "sync-completed", message: completedMessage });
+    }
+  }, [completedMessage, emitFeedback, failedMessage, syncState.error, syncState.status]);
+}
+
+// src/KeepSyncFeedbackObserver.tsx
+function KeepSyncFeedbackObserver() {
+  useKeepSyncFeedback();
+  return null;
+}
+
+// src/hooks/useKeepSyncRecoveryDialog.ts
+import { useKeepContext as useKeepContext4 } from "@keepkit/core/react";
+import { useEffect as useEffect8, useState as useState10 } from "react";
 function useKeepSyncRecoveryDialog(options) {
   const { open, onOpenChange, conflicts, onManualMerge } = options;
-  const context = useKeepContext3();
+  const context = useKeepContext4();
   const conflictList = conflicts ?? context.syncState.conflicts ?? [];
   const hasRecovery = conflictList.length > 0 || context.syncState.status === "error" || Boolean(context.error);
-  const [dismissed, setDismissed] = useState8(false);
-  const [busyId, setBusyId] = useState8();
-  const [error, setError] = useState8();
-  useEffect4(() => {
+  const [dismissed, setDismissed] = useState10(false);
+  const [busyId, setBusyId] = useState10();
+  const [error, setError] = useState10();
+  useEffect8(() => {
     if (hasRecovery) setDismissed(false);
   }, [hasRecovery]);
   return {
@@ -2948,7 +3512,7 @@ function useKeepSyncRecoveryDialog(options) {
 }
 
 // src/KeepSyncRecoveryDialog.tsx
-import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
 function KeepSyncRecoveryDialog({
   open,
   onOpenChange,
@@ -2963,7 +3527,7 @@ function KeepSyncRecoveryDialog({
 }) {
   const view = useKeepSyncRecoveryDialog({ open, onOpenChange, conflicts, onManualMerge });
   if (!view.isOpen) return null;
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "section",
     {
       ...props,
@@ -2977,17 +3541,17 @@ function KeepSyncRecoveryDialog({
       "data-state": view.conflictList.length > 0 ? "conflict" : "error",
       "data-loading": view.busyId !== void 0 ? "true" : void 0,
       children: [
-        /* @__PURE__ */ jsxs10("header", { children: [
-          /* @__PURE__ */ jsx16("h2", { id: "keepkit-sync-recovery-title", children: title ?? view.labels.title }),
-          /* @__PURE__ */ jsx16("button", { type: "button", "data-keep-action": "close-dialog", onClick: view.close, "aria-label": view.labels.close, children: view.labels.close })
+        /* @__PURE__ */ jsxs11("header", { children: [
+          /* @__PURE__ */ jsx17("h2", { id: "keepkit-sync-recovery-title", children: title ?? view.labels.title }),
+          /* @__PURE__ */ jsx17("button", { type: "button", "data-keep-action": "close-dialog", onClick: view.close, "aria-label": view.labels.close, children: view.labels.close })
         ] }),
         children,
-        view.conflictList.length > 0 ? /* @__PURE__ */ jsxs10("div", { children: [
-          /* @__PURE__ */ jsx16("p", { children: view.labels.conflict }),
-          view.conflictList.map((conflict) => /* @__PURE__ */ jsxs10("article", { "data-conflict-id": conflict.id, children: [
-            /* @__PURE__ */ jsx16("h3", { children: getMetaTitle(conflict.operation.item?.meta) ?? conflict.id }),
-            /* @__PURE__ */ jsxs10("div", { "data-conflict-preview": true, children: [
-              /* @__PURE__ */ jsx16(
+        view.conflictList.length > 0 ? /* @__PURE__ */ jsxs11("div", { children: [
+          /* @__PURE__ */ jsx17("p", { children: view.labels.conflict }),
+          view.conflictList.map((conflict) => /* @__PURE__ */ jsxs11("article", { "data-conflict-id": conflict.id, children: [
+            /* @__PURE__ */ jsx17("h3", { children: getMetaTitle(conflict.operation.item?.meta) ?? conflict.id }),
+            /* @__PURE__ */ jsxs11("div", { "data-conflict-preview": true, children: [
+              /* @__PURE__ */ jsx17(
                 ConflictPreview,
                 {
                   item: conflict.operation.item,
@@ -2997,7 +3561,7 @@ function KeepSyncRecoveryDialog({
                   side: "local"
                 }
               ),
-              /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx17(
                 ConflictPreview,
                 {
                   item: conflict.remote,
@@ -3008,8 +3572,8 @@ function KeepSyncRecoveryDialog({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs10("div", { children: [
-              /* @__PURE__ */ jsx16(
+            /* @__PURE__ */ jsxs11("div", { children: [
+              /* @__PURE__ */ jsx17(
                 "button",
                 {
                   type: "button",
@@ -3019,7 +3583,7 @@ function KeepSyncRecoveryDialog({
                   children: view.labels.keepLocal
                 }
               ),
-              /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx17(
                 "button",
                 {
                   type: "button",
@@ -3029,7 +3593,7 @@ function KeepSyncRecoveryDialog({
                   children: view.labels.useServer
                 }
               ),
-              /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx17(
                 "button",
                 {
                   type: "button",
@@ -3042,12 +3606,12 @@ function KeepSyncRecoveryDialog({
             ] })
           ] }, conflict.id))
         ] }) : null,
-        view.showBackupRecovery ? /* @__PURE__ */ jsxs10("section", { "data-recovery": "backup", children: [
-          /* @__PURE__ */ jsx16("h3", { children: view.labels.backupRecovery }),
-          /* @__PURE__ */ jsx16("p", { children: view.labels.backupRecoveryDescription }),
-          backup ?? (showBackupControls ? /* @__PURE__ */ jsx16(KeepBackup, {}) : null)
+        view.showBackupRecovery ? /* @__PURE__ */ jsxs11("section", { "data-recovery": "backup", children: [
+          /* @__PURE__ */ jsx17("h3", { children: view.labels.backupRecovery }),
+          /* @__PURE__ */ jsx17("p", { children: view.labels.backupRecoveryDescription }),
+          backup ?? (showBackupControls ? /* @__PURE__ */ jsx17(KeepBackup, {}) : null)
         ] }) : null,
-        view.error ? /* @__PURE__ */ jsx16("p", { id: "keepkit-sync-recovery-error", role: "alert", "aria-live": "assertive", children: view.error instanceof Error ? view.error.message : view.labels.error }) : null
+        view.error ? /* @__PURE__ */ jsx17("p", { id: "keepkit-sync-recovery-error", role: "alert", "aria-live": "assertive", children: view.error instanceof Error ? view.error.message : view.labels.error }) : null
       ]
     }
   );
@@ -3059,16 +3623,16 @@ function ConflictPreview({
   noteLabel,
   side
 }) {
-  return /* @__PURE__ */ jsxs10("article", { "data-conflict-version": side, "aria-label": heading, children: [
-    /* @__PURE__ */ jsx16("h4", { children: heading }),
-    /* @__PURE__ */ jsxs10("dl", { children: [
-      /* @__PURE__ */ jsxs10("div", { children: [
-        /* @__PURE__ */ jsx16("dt", { children: updatedAtLabel }),
-        /* @__PURE__ */ jsx16("dd", { children: item ? /* @__PURE__ */ jsx16("time", { dateTime: new Date(item.updatedAt).toISOString(), children: formatConflictDate(item.updatedAt) }) : "\u2014" })
+  return /* @__PURE__ */ jsxs11("article", { "data-conflict-version": side, "aria-label": heading, children: [
+    /* @__PURE__ */ jsx17("h4", { children: heading }),
+    /* @__PURE__ */ jsxs11("dl", { children: [
+      /* @__PURE__ */ jsxs11("div", { children: [
+        /* @__PURE__ */ jsx17("dt", { children: updatedAtLabel }),
+        /* @__PURE__ */ jsx17("dd", { children: item ? /* @__PURE__ */ jsx17("time", { dateTime: new Date(item.updatedAt).toISOString(), children: formatConflictDate(item.updatedAt) }) : "\u2014" })
       ] }),
-      /* @__PURE__ */ jsxs10("div", { children: [
-        /* @__PURE__ */ jsx16("dt", { children: noteLabel }),
-        /* @__PURE__ */ jsx16("dd", { children: item?.note || "\u2014" })
+      /* @__PURE__ */ jsxs11("div", { children: [
+        /* @__PURE__ */ jsx17("dt", { children: noteLabel }),
+        /* @__PURE__ */ jsx17("dd", { children: item?.note || "\u2014" })
       ] })
     ] })
   ] });
@@ -3078,9 +3642,9 @@ function formatConflictDate(timestamp) {
 }
 
 // src/hooks/useKeepSyncStatusBanner.ts
-import { useKeepContext as useKeepContext4 } from "@keepkit/core/react";
+import { useKeepContext as useKeepContext5 } from "@keepkit/core/react";
 function useKeepSyncStatusBanner({ onRetry, children }) {
-  const context = useKeepContext4();
+  const context = useKeepContext5();
   const retryLabel = useUiLabel("retrySync");
   const resolveLabel = useUiLabel("resolveSync");
   const conflictLabel = useUiLabel("syncConflict");
@@ -3112,7 +3676,7 @@ function getErrorMessage4(error) {
 }
 
 // src/KeepSyncStatusBanner.tsx
-import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 function KeepSyncStatusBanner({
   onRetry,
   onResolveConflicts,
@@ -3122,7 +3686,7 @@ function KeepSyncStatusBanner({
 }) {
   const view = useKeepSyncStatusBanner({ onRetry, children });
   if (view.status === "idle" && !view.hasConflicts) return null;
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     "aside",
     {
       ...props,
@@ -3132,8 +3696,8 @@ function KeepSyncStatusBanner({
       "data-keepkit": "sync-status",
       "data-state": view.status,
       children: [
-        /* @__PURE__ */ jsx17("p", { children: view.message }),
-        view.showRetry ? /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx18("p", { children: view.message }),
+        view.showRetry ? /* @__PURE__ */ jsx18(
           "button",
           {
             type: "button",
@@ -3143,7 +3707,7 @@ function KeepSyncStatusBanner({
             children: view.retryLabel
           }
         ) : null,
-        view.hasConflicts ? /* @__PURE__ */ jsx17(
+        view.hasConflicts ? /* @__PURE__ */ jsx18(
           "button",
           {
             type: "button",
@@ -3160,13 +3724,13 @@ function KeepSyncStatusBanner({
 
 // src/hooks/useKeepTagEditor.ts
 import { useKeepItem as useKeepItem4 } from "@keepkit/core/react";
-import { useCallback as useCallback3, useEffect as useEffect5, useState as useState9 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect9, useState as useState11 } from "react";
 function useKeepTagEditor({ item, onSaved, onSaveError }) {
   const itemState = useKeepItem4(item);
-  const [tags, setTags] = useState9(item.tags ?? []);
-  const [input, setInput] = useState9("");
-  useEffect5(() => setTags(itemState.item?.tags ?? item.tags ?? []), [item.tags, itemState.item?.tags]);
-  const save = useCallback3(async () => {
+  const [tags, setTags] = useState11(item.tags ?? []);
+  const [input, setInput] = useState11("");
+  useEffect9(() => setTags(itemState.item?.tags ?? item.tags ?? []), [item.tags, itemState.item?.tags]);
+  const save = useCallback6(async () => {
     const nextTags = normalizeUiTags(tags);
     try {
       await itemState.updateTags(nextTags);
@@ -3212,7 +3776,7 @@ function useKeepTagEditor({ item, onSaved, onSaveError }) {
 }
 
 // src/KeepTagEditor.tsx
-import { Fragment as Fragment6, jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
 function KeepTagEditor({
   item,
   availableTags = [],
@@ -3223,10 +3787,10 @@ function KeepTagEditor({
 }) {
   const view = useKeepTagEditor({ item, onSaved, onSaveError });
   const { isSaving, tags } = view.state;
-  const body = render ? render(view.state) : /* @__PURE__ */ jsxs12(Fragment6, { children: [
-    /* @__PURE__ */ jsxs12("label", { children: [
+  const body = render ? render(view.state) : /* @__PURE__ */ jsxs13(Fragment8, { children: [
+    /* @__PURE__ */ jsxs13("label", { children: [
       view.labels.tags,
-      /* @__PURE__ */ jsx18(
+      /* @__PURE__ */ jsx19(
         "input",
         {
           "data-keep-action": "edit-tags",
@@ -3237,14 +3801,14 @@ function KeepTagEditor({
         }
       )
     ] }),
-    availableTags.length > 0 ? /* @__PURE__ */ jsx18("datalist", { id: `keep-tags-${item.id}`, children: availableTags.map((tag) => /* @__PURE__ */ jsx18("option", { value: tag }, tag)) }) : null,
-    /* @__PURE__ */ jsx18("ul", { "aria-label": view.labels.tags, children: tags.map((tag) => /* @__PURE__ */ jsxs12("li", { children: [
+    availableTags.length > 0 ? /* @__PURE__ */ jsx19("datalist", { id: `keep-tags-${item.id}`, children: availableTags.map((tag) => /* @__PURE__ */ jsx19("option", { value: tag }, tag)) }) : null,
+    /* @__PURE__ */ jsx19("ul", { "aria-label": view.labels.tags, children: tags.map((tag) => /* @__PURE__ */ jsxs13("li", { children: [
       tag,
-      /* @__PURE__ */ jsx18("button", { type: "button", "data-keep-action": "remove-tag", onClick: () => view.removeTag(tag), children: view.labels.remove })
+      /* @__PURE__ */ jsx19("button", { type: "button", "data-keep-action": "remove-tag", onClick: () => view.removeTag(tag), children: view.labels.remove })
     ] }, tag)) }),
-    /* @__PURE__ */ jsx18("button", { type: "submit", "data-keep-action": "apply-tags", disabled: isSaving, "aria-busy": isSaving, children: view.labels.apply })
+    /* @__PURE__ */ jsx19("button", { type: "submit", "data-keep-action": "apply-tags", disabled: isSaving, "aria-busy": isSaving, children: view.labels.apply })
   ] });
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(
     "form",
     {
       ...props,
@@ -3256,7 +3820,7 @@ function KeepTagEditor({
       "data-disabled": isSaving ? "true" : void 0,
       children: [
         body,
-        view.error ? /* @__PURE__ */ jsx18("p", { role: "alert", children: getErrorMessage5(view.error, view.labels.error) }) : null
+        view.error ? /* @__PURE__ */ jsx19("p", { role: "alert", children: getErrorMessage5(view.error, view.labels.error) }) : null
       ]
     }
   );
@@ -3265,26 +3829,145 @@ function getErrorMessage5(error, fallback) {
   return error instanceof Error ? error.message : fallback;
 }
 
+// src/KeepTourBar.tsx
+import { useKeepNavigator } from "@keepkit/core/react";
+
+// src/hooks/useKeepTourShortcuts.ts
+import { useEffect as useEffect10 } from "react";
+function useKeepTourShortcuts({
+  onNext,
+  onPrev,
+  enabled = true,
+  allowInEditable = false,
+  preventDefault = true,
+  nextKeys = ["j", "]"],
+  prevKeys = ["k", "["],
+  onError
+}) {
+  useEffect10(() => {
+    if (!enabled) return;
+    const handleKeyDown = (event) => {
+      if (!allowInEditable && isEditableTarget(event.target)) return;
+      if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
+      const key = event.key.toLocaleLowerCase();
+      const action = nextKeys.some((candidate) => candidate.toLocaleLowerCase() === key) ? onNext : prevKeys.some((candidate) => candidate.toLocaleLowerCase() === key) ? onPrev : void 0;
+      if (!action) return;
+      if (preventDefault) event.preventDefault();
+      void Promise.resolve(action()).catch((error) => onError?.(error));
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [allowInEditable, enabled, nextKeys, onError, onNext, onPrev, preventDefault, prevKeys]);
+}
+function isEditableTarget(target) {
+  if (!(target instanceof HTMLElement)) return false;
+  return target.isContentEditable || target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT";
+}
+
+// src/KeepTourBar.tsx
+import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+function KeepTourBar({
+  navigation: providedNavigation,
+  currentId,
+  initialIndex,
+  showProgress = true,
+  prevHref,
+  nextHref,
+  backHref,
+  onPrev,
+  onNext,
+  onBack,
+  prevLabel,
+  nextLabel,
+  backLabel,
+  keyboardShortcuts = false,
+  shortcutOptions,
+  progress,
+  ...props
+}) {
+  const ownNavigation = useKeepNavigator({ currentId, initialIndex });
+  const navigation = providedNavigation ?? ownNavigation;
+  const previousLabel = useUiLabel("previousPage", prevLabel);
+  const nextItemLabel = useUiLabel("nextPage", nextLabel);
+  const listLabel = useUiLabel("allItems", backLabel);
+  const { labels } = useKeepUiLabels();
+  const resolvedPrev = onPrev ?? (() => navigateTo(navigation.goToPrev(), prevHref));
+  const resolvedNext = onNext ?? (() => navigateTo(navigation.goToNext(), nextHref));
+  useKeepTourShortcuts({
+    ...shortcutOptions,
+    enabled: keyboardShortcuts && (shortcutOptions?.enabled ?? true),
+    onNext: () => {
+      return resolvedNext();
+    },
+    onPrev: () => {
+      return resolvedPrev();
+    }
+  });
+  return /* @__PURE__ */ jsxs14("nav", { ...props, "data-keepkit": "tour-bar", "aria-label": props["aria-label"] ?? labels.pagination, children: [
+    showProgress ? /* @__PURE__ */ jsx20("span", { "data-keepkit": "tour-progress", "aria-live": "polite", children: progress ?? `${navigation.currentPosition ?? 0} / ${navigation.items.length}` }) : null,
+    /* @__PURE__ */ jsx20(
+      TourAction,
+      {
+        href: prevHref,
+        disabled: !navigation.hasPrev,
+        onClick: prevHref ? onPrev : resolvedPrev,
+        "data-keep-action": "tour-prev",
+        children: previousLabel
+      }
+    ),
+    /* @__PURE__ */ jsx20(
+      TourAction,
+      {
+        href: nextHref,
+        disabled: !navigation.hasNext,
+        onClick: nextHref ? onNext : resolvedNext,
+        "data-keep-action": "tour-next",
+        children: nextItemLabel
+      }
+    ),
+    backHref || onBack ? /* @__PURE__ */ jsx20(TourAction, { href: backHref, onClick: onBack, "data-keep-action": "tour-back", children: listLabel }) : null
+  ] });
+}
+function TourAction({ href, disabled = false, onClick, children, ...props }) {
+  if (href && !disabled) {
+    return /* @__PURE__ */ jsx20("a", { ...props, href, onClick: () => void onClick?.(), children });
+  }
+  return /* @__PURE__ */ jsx20("button", { ...props, type: "button", disabled, onClick: () => void onClick?.(), children });
+}
+var KeepNavigator = KeepTourBar;
+function navigateTo(item, href) {
+  if (!item || !href || typeof window === "undefined") return;
+  window.location.assign(href);
+}
+
 // src/hooks/useKeepUndo.ts
-import { useKeepContext as useKeepContext5 } from "@keepkit/core/react";
+import { useKeepContext as useKeepContext6 } from "@keepkit/core/react";
 function useKeepUndo() {
-  const context = useKeepContext5();
+  const context = useKeepContext6();
+  const emitFeedback = useKeepUiFeedback();
+  const restoredMessage = useUiLabel("restoredMessage");
   return {
     canUndo: context.undo.canUndo,
-    undo: () => context.undoLastRemoval(),
+    undo: async () => {
+      const items = context.lastChange?.items ?? (context.lastChange?.item ? [context.lastChange.item] : []);
+      await context.undoLastRemoval();
+      if (items.length > 0) {
+        emitFeedback({ type: "item-restored", item: items[0], items, message: restoredMessage });
+      }
+    },
     message: useUiLabel("undoAvailable"),
     label: useUiLabel("undo")
   };
 }
 
 // src/KeepUndo.tsx
-import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
 function KeepUndo({ children, label, ...props }) {
   const view = useKeepUndo();
   if (!view.canUndo) return null;
-  return /* @__PURE__ */ jsxs13("div", { ...props, role: "status", "aria-live": "polite", "data-keepkit": "undo", "data-state": "available", children: [
+  return /* @__PURE__ */ jsxs15("div", { ...props, role: "status", "aria-live": "polite", "data-keepkit": "undo", "data-state": "available", children: [
     children ?? view.message,
-    /* @__PURE__ */ jsx19("button", { type: "button", "data-keep-action": "undo", onClick: () => void view.undo(), children: label ?? view.label })
+    /* @__PURE__ */ jsx21("button", { type: "button", "data-keep-action": "undo", onClick: () => void view.undo(), children: label ?? view.label })
   ] });
 }
 
@@ -3292,13 +3975,13 @@ function KeepUndo({ children, label, ...props }) {
 import { isValidElement as isValidElement6 } from "react";
 
 // src/hooks/useStatusViews.ts
-import { useKeepContext as useKeepContext6 } from "@keepkit/core/react";
-import { useEffect as useEffect6, useRef as useRef4, useState as useState10 } from "react";
+import { useKeepContext as useKeepContext7 } from "@keepkit/core/react";
+import { useEffect as useEffect11, useRef as useRef7, useState as useState12 } from "react";
 function useKeepEmptyState() {
   return useUiLabel("noItems").replace(/\.$/, "");
 }
 function useKeepStatus(status) {
-  const context = useKeepContext6();
+  const context = useKeepContext7();
   const resolvedStatus = status ?? getDerivedStatus(context);
   const state = {
     status: resolvedStatus,
@@ -3309,13 +3992,13 @@ function useKeepStatus(status) {
   return { state, defaultLabel: useUiLabel(getStatusLabelKey3(resolvedStatus)) };
 }
 function useKeepAnnouncements(messages) {
-  const context = useKeepContext6();
+  const context = useKeepContext7();
   const savedMessage = useUiLabel("savedMessage", messages?.save);
   const removedMessage = useUiLabel("removedMessage", messages?.remove);
   const noteSavedMessage = useUiLabel("noteSavedMessage", messages?.note);
-  const [message, setMessage] = useState10("");
-  const lastChangeRef = useRef4(void 0);
-  useEffect6(() => {
+  const [message, setMessage] = useState12("");
+  const lastChangeRef = useRef7(void 0);
+  useEffect11(() => {
     const change = context.lastChange;
     if (!change || change === lastChangeRef.current) return;
     lastChangeRef.current = change;
@@ -3343,7 +4026,7 @@ function getStatusLabelKey3(status) {
 }
 
 // src/status.tsx
-import { Fragment as Fragment7, jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
 function KeepEmptyState({
   title,
   description,
@@ -3355,9 +4038,9 @@ function KeepEmptyState({
 }) {
   const defaultTitle = useKeepEmptyState();
   const contentChildren = asChild && isValidElement6(children) ? void 0 : children;
-  const body = contentChildren ?? /* @__PURE__ */ jsxs14(Fragment7, { children: [
-    /* @__PURE__ */ jsx20("h2", { children: title ?? defaultTitle }),
-    description ? /* @__PURE__ */ jsx20("p", { children: description }) : null,
+  const body = contentChildren ?? /* @__PURE__ */ jsxs16(Fragment9, { children: [
+    /* @__PURE__ */ jsx22("h2", { children: title ?? defaultTitle }),
+    description ? /* @__PURE__ */ jsx22("p", { children: description }) : null,
     action
   ] });
   return renderRoot(
@@ -3399,7 +4082,7 @@ function KeepStatus({
 }
 function KeepAnnouncements({ messages, ...props }) {
   const message = useKeepAnnouncements(messages);
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx22(
     "div",
     {
       ...props,
@@ -3416,7 +4099,7 @@ var KeepAnnouncer = KeepAnnouncements;
 
 // src/theme.tsx
 import { cloneElement as cloneElement2, isValidElement as isValidElement7 } from "react";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var keepThemeNames = [
   "default",
   "ocean",
@@ -3475,7 +4158,7 @@ function KeepThemeProvider({
       throw new Error("KeepThemeProvider with asChild requires a single React element child.");
     return cloneElement2(children, rootProps);
   }
-  return /* @__PURE__ */ jsx21("div", { ...rootProps, children });
+  return /* @__PURE__ */ jsx23("div", { ...rootProps, children });
 }
 
 // src/index.tsx
@@ -3483,9 +4166,10 @@ import { createAuthenticatedSyncKit } from "@keepkit/core/core";
 import {
   KeepErrorBoundary as KeepErrorBoundary3,
   KeepProvider,
-  useKeepContext as useKeepContext7,
+  useKeepContext as useKeepContext8,
   useKeepItem as useKeepItem5,
   useKeepList as useKeepList5,
+  useKeepNavigator as useKeepNavigator2,
   useKeepShortcut
 } from "@keepkit/core/react";
 import {
@@ -3498,11 +4182,12 @@ import {
   LocalStorageSyncQueueAdapter,
   SyncStorageAdapter
 } from "@keepkit/core/storage";
-import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 function KeepKitProvider({
   labels,
   locale,
   labelResolver,
+  onFeedback,
   theme,
   mode,
   density,
@@ -3517,7 +4202,7 @@ function KeepKitProvider({
   children,
   ...providerProps
 }) {
-  return /* @__PURE__ */ jsx22(KeepUiProvider, { labels, locale, labelResolver, children: /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx24(KeepUiProvider, { labels, locale, labelResolver, onFeedback, children: /* @__PURE__ */ jsx24(
     KeepThemeProvider,
     {
       theme,
@@ -3531,9 +4216,10 @@ function KeepKitProvider({
       className: themeClassName,
       style: themeStyle,
       asChild: themeAsChild,
-      children: /* @__PURE__ */ jsxs15(CoreKeepProvider, { ...providerProps, children: [
+      children: /* @__PURE__ */ jsxs17(CoreKeepProvider, { ...providerProps, children: [
+        /* @__PURE__ */ jsx24(KeepSyncFeedbackObserver, {}),
         children,
-        /* @__PURE__ */ jsx22(KeepAnnouncements, {})
+        /* @__PURE__ */ jsx24(KeepAnnouncements, {})
       ] })
     }
   ) });
@@ -3543,6 +4229,7 @@ function createKeepKit(options = {}) {
     labels,
     locale,
     labelResolver,
+    onFeedback,
     theme,
     mode,
     density,
@@ -3559,13 +4246,14 @@ function createKeepKit(options = {}) {
   } = options;
   const coreKit = createCoreKeepKit(coreOptions);
   return {
-    Provider: (props) => /* @__PURE__ */ jsx22(
+    Provider: (props) => /* @__PURE__ */ jsx24(
       KeepKitProvider,
       {
         ...coreOptions,
         labels,
         locale,
         labelResolver,
+        onFeedback,
         theme,
         mode,
         density,
@@ -3579,9 +4267,9 @@ function createKeepKit(options = {}) {
         ...props
       }
     ),
-    Button: (props) => /* @__PURE__ */ jsx22(KeepButton, { ...props }),
-    Backup: (props) => /* @__PURE__ */ jsx22(KeepBackup, { ...props }),
-    Collection: (props) => /* @__PURE__ */ jsx22(
+    Button: (props) => /* @__PURE__ */ jsx24(KeepButton, { ...props }),
+    Backup: (props) => /* @__PURE__ */ jsx24(KeepBackup, { ...props }),
+    Collection: (props) => /* @__PURE__ */ jsx24(
       KeepCollection,
       {
         ...props,
@@ -3595,6 +4283,7 @@ function createKeepKit(options = {}) {
     useContext: () => coreKit.useContext(),
     useItem: (item) => coreKit.useItem(item),
     useList: (query) => coreKit.useList(query),
+    useNavigator: (navigatorOptions) => coreKit.useNavigator(navigatorOptions),
     useShortcut: (shortcutOptions) => coreKit.useShortcut(shortcutOptions)
   };
 }
@@ -3610,16 +4299,20 @@ export {
   KeepCollection,
   KeepEmptyState,
   KeepErrorBoundary3 as KeepErrorBoundary,
+  KeepHighlight,
   KeepItemCard,
+  KeepItemCardSkeleton,
   KeepItemCheckbox,
   KeepItemStatusBadge,
   KeepKitProvider,
   KeepLayout,
   KeepList,
+  KeepNavigator,
   KeepNoteEditor,
   KeepPagination,
   KeepProvider,
   KeepPruneStaleButton,
+  KeepReorderableList,
   KeepSearchInput,
   KeepSortSelect,
   KeepStaleNotice,
@@ -3629,6 +4322,7 @@ export {
   KeepTagEditor,
   KeepTagFilter,
   KeepThemeProvider,
+  KeepTourBar,
   KeepUiProvider,
   KeepUndo,
   LocalStorageAdapter,
@@ -3640,13 +4334,17 @@ export {
   createNextPagesRouterAdapter,
   createStorageAdapter,
   getKeepLocaleLabels,
+  highlightText,
   isAllSelected,
   keepThemeNames,
   toggleSelectAll,
-  useKeepContext7 as useKeepContext,
+  useKeepContext8 as useKeepContext,
   useKeepItem5 as useKeepItem,
   useKeepList5 as useKeepList,
+  useKeepNavigator2 as useKeepNavigator,
   useKeepShortcut,
+  useKeepToastFeedback,
+  useKeepTourShortcuts,
   useKeepUiLabels,
   useKeepUrlSync
 };