@keepkit/ui 0.15.0 → 0.16.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 }) {
@@ -1732,19 +1819,24 @@ 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")
     }
   };
 }
@@ -1757,9 +1849,38 @@ function KeepButton({
   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;
@@ -1773,6 +1894,16 @@ function KeepButton({
   };
   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,
@@ -1804,7 +1935,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 +1956,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 +1979,7 @@ function useKeepUrlSync({
     read();
     return adapter.subscribe?.(read);
   }, [adapter, enabled, params]);
-  useEffect(() => {
+  useEffect2(() => {
     if (!enabled) return;
     if (skipWriteRef.current) {
       skipWriteRef.current = false;
@@ -1968,7 +2099,10 @@ function useKeepListView(query) {
 
 // src/KeepItemCard.tsx
 import {
-  isValidElement as isValidElement2
+  createContext as createContext2,
+  createElement as createElement2,
+  isValidElement as isValidElement2,
+  useContext as useContext2
 } from "react";
 
 // src/hooks/useKeepItemCard.ts
@@ -1986,6 +2120,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 +2131,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 +2170,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 +2206,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 +2228,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 +2258,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 });
+          }
+        });
+      }
     }
   };
 }
@@ -2220,7 +2404,13 @@ function KeepPruneStaleButton({
 
 // src/KeepItemCard.tsx
 import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
-function KeepItemCard({
+var KeepItemCardContext = createContext2(null);
+function useKeepItemCardCompound(part) {
+  const context = useContext2(KeepItemCardContext);
+  if (!context) throw new Error(`KeepItemCard.${part} must be rendered inside KeepItemCard.`);
+  return context;
+}
+function KeepItemCardRoot({
   item,
   title,
   getTitle,
@@ -2272,21 +2462,26 @@ 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 image = resolvedImageProps ? renderImage?.(resolvedImageProps, item) ?? (ImageComponent ? /* @__PURE__ */ jsx9(ImageComponent, { ...resolvedImageProps }) : /* @__PURE__ */ jsx9("img", { ...resolvedImageProps, alt: resolvedImageProps.alt })) : null;
+  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(Fragment3, { children: [
+    showSaveButton ? /* @__PURE__ */ jsx9(
       KeepButton,
       {
         item: toKeepButtonItem(item),
@@ -2294,7 +2489,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 +2498,28 @@ function KeepItemCard({
         disabled: view.itemState.isMutating,
         children: removeLabel ?? view.labels.remove
       }
-    ) : null
+    )
+  ] });
+  const compoundValue = {
+    resolvedTitle: view.resolvedTitle,
+    renderTitle,
+    image,
+    fallbackLabel: String(view.resolvedTitle),
+    tags,
+    tagsLabel: view.labels.tags,
+    renderedTags,
+    meta,
+    error,
+    actions
+  };
+  const defaultBody = /* @__PURE__ */ jsxs5(Fragment3, { 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 +2536,54 @@ 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", children: children ?? context.image ?? /* @__PURE__ */ jsx9("span", { role: "img", "aria-label": context.fallbackLabel, "data-keep-card-fallback": "true", children: fallback ?? context.fallbackLabel.slice(0, 1) }) });
+}
+function KeepItemCardContent({ children, ...props }) {
+  const context = useKeepItemCardCompound("Content");
+  return /* @__PURE__ */ jsx9("div", { ...props, "data-keep-card-part": "content", children: children ?? /* @__PURE__ */ jsxs5(Fragment3, { children: [
+    /* @__PURE__ */ jsx9(KeepItemCardTitle, {}),
+    context.meta,
+    /* @__PURE__ */ jsx9(KeepItemCardTags, {}),
+    context.error
+  ] }) });
+}
+function KeepItemCardTitle({ as = "h3", children, ...props }) {
+  const context = useKeepItemCardCompound("Title");
+  return createElement2(
+    as,
+    { ...props, "data-keep-card-part": "title" },
+    context.renderTitle(children ?? context.resolvedTitle)
+  );
+}
+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 +2593,7 @@ function getErrorMessage2(error, fallback) {
 }
 
 // src/KeepList.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { Fragment as Fragment4, 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,6 +2605,8 @@ function KeepListContent({
   children,
   renderItem,
   loading,
+  renderLoading,
+  loadingCount = 6,
   empty,
   error: errorContent,
   itemCardProps,
@@ -2357,7 +2620,9 @@ function KeepListContent({
   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,
@@ -2387,7 +2652,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(Fragment4, { 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,7 +2676,7 @@ 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 useCallback3, useMemo as useMemo3, useState as useState5 } from "react";
 function useKeepTagFilter(options) {
   const { query, controlledValue, defaultValue, onChange, onValueChange } = options;
   const [uncontrolledValue, setUncontrolledValue] = useState5(defaultValue);
@@ -2410,7 +2685,7 @@ function useKeepTagFilter(options) {
     ...query,
     tags: resolvedValue ? [...query?.tags ?? [], resolvedValue] : query?.tags
   });
-  const select = useCallback(
+  const select = useCallback3(
     (tag) => {
       if (controlledValue === void 0) setUncontrolledValue(tag);
       onChange?.(tag);
@@ -2430,7 +2705,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 +2723,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 +2735,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 +2744,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 +2770,12 @@ function KeepTagFilter({
 }
 
 // src/hooks/useQueryControls.ts
-import { useEffect as useEffect2, useState as useState6 } from "react";
+import { useEffect as useEffect3, useState as useState6 } from "react";
 function useKeepSearchInput(options) {
   const { controlledValue, defaultValue, debounceMs, onValueChange } = options;
   const [uncontrolledValue, setUncontrolledValue] = useState6(defaultValue);
   const value = controlledValue ?? uncontrolledValue;
-  useEffect2(() => {
+  useEffect3(() => {
     if (!onValueChange) return;
     if (debounceMs <= 0) {
       onValueChange(value);
@@ -2567,7 +2842,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 Fragment5, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 function KeepSearchInput({
   value: controlledValue,
   defaultValue = "",
@@ -2603,7 +2878,7 @@ function KeepSortSelect({
   ...props
 }) {
   const view = useKeepSortSelect({ controlledValue, defaultValue, onValueChange });
-  const options = children ?? /* @__PURE__ */ jsxs7(Fragment4, { children: [
+  const options = children ?? /* @__PURE__ */ jsxs8(Fragment5, { 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 +2917,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 +2954,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 +2971,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 +2990,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 +3003,8 @@ function KeepCollectionContent({
             itemCardProps,
             layout,
             loading,
+            renderLoading,
+            loadingCount,
             empty,
             error
           }
@@ -2762,16 +3041,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 useCallback4, useEffect as useEffect4, useRef as useRef4, useState as useState7 } 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 baselineNote = savedItem?.note ?? item.note ?? "";
   const isDirty = note !== baselineNote;
-  const lastSavedNoteRef = useRef3(void 0);
-  useEffect3(() => setNote(baselineNote), [baselineNote]);
-  const save = useCallback2(async () => {
+  const lastSavedNoteRef = useRef4(void 0);
+  useEffect4(() => setNote(baselineNote), [baselineNote]);
+  const save = useCallback4(async () => {
     const nextNote = note.trim() || void 0;
     try {
       await updateNote(nextNote);
@@ -2782,7 +3061,7 @@ function useKeepNoteEditor({ item, debounceMs, onSaved, onSaveError }) {
       throw cause;
     }
   }, [note, onSaveError, onSaved, updateNote]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!isDirty || debounceMs <= 0 || lastSavedNoteRef.current === note) return;
     const timer = window.setTimeout(() => void save().catch(() => void 0), debounceMs);
     return () => window.clearTimeout(timer);
@@ -2817,7 +3096,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 Fragment6, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 function KeepNoteEditor({
   item,
   label,
@@ -2835,8 +3114,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(Fragment6, { children: [
+    /* @__PURE__ */ jsxs10("label", { children: [
       label ?? view.labels.note,
       /* @__PURE__ */ jsx15(
         "textarea",
@@ -2853,7 +3132,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 +3171,46 @@ function getErrorMessage3(error, fallback) {
   return error instanceof Error ? error.message : fallback;
 }
 
-// src/hooks/useKeepSyncRecoveryDialog.ts
+// src/hooks/useKeepSyncFeedback.ts
 import { useKeepContext as useKeepContext3 } from "@keepkit/core/react";
-import { useEffect as useEffect4, useState as useState8 } from "react";
+import { useEffect as useEffect5, useRef as useRef5 } from "react";
+function useKeepSyncFeedback() {
+  const { syncState } = useKeepContext3();
+  const emitFeedback = useKeepUiFeedback();
+  const completedMessage = useUiLabel("syncSynced");
+  const failedMessage = useUiLabel("syncFailedMessage");
+  const previousStatus = useRef5("idle");
+  useEffect5(() => {
+    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 useEffect6, useState as useState8 } 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(() => {
+  useEffect6(() => {
     if (hasRecovery) setDismissed(false);
   }, [hasRecovery]);
   return {
@@ -2948,7 +3255,7 @@ function useKeepSyncRecoveryDialog(options) {
 }
 
 // src/KeepSyncRecoveryDialog.tsx
-import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 function KeepSyncRecoveryDialog({
   open,
   onOpenChange,
@@ -2963,7 +3270,7 @@ function KeepSyncRecoveryDialog({
 }) {
   const view = useKeepSyncRecoveryDialog({ open, onOpenChange, conflicts, onManualMerge });
   if (!view.isOpen) return null;
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "section",
     {
       ...props,
@@ -2977,16 +3284,16 @@ 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__ */ jsxs11("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 })
         ] }),
         children,
-        view.conflictList.length > 0 ? /* @__PURE__ */ jsxs10("div", { children: [
+        view.conflictList.length > 0 ? /* @__PURE__ */ jsxs11("div", { children: [
           /* @__PURE__ */ jsx16("p", { children: view.labels.conflict }),
-          view.conflictList.map((conflict) => /* @__PURE__ */ jsxs10("article", { "data-conflict-id": conflict.id, children: [
+          view.conflictList.map((conflict) => /* @__PURE__ */ jsxs11("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__ */ jsxs11("div", { "data-conflict-preview": true, children: [
               /* @__PURE__ */ jsx16(
                 ConflictPreview,
                 {
@@ -3008,7 +3315,7 @@ function KeepSyncRecoveryDialog({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs10("div", { children: [
+            /* @__PURE__ */ jsxs11("div", { children: [
               /* @__PURE__ */ jsx16(
                 "button",
                 {
@@ -3042,7 +3349,7 @@ function KeepSyncRecoveryDialog({
             ] })
           ] }, conflict.id))
         ] }) : null,
-        view.showBackupRecovery ? /* @__PURE__ */ jsxs10("section", { "data-recovery": "backup", children: [
+        view.showBackupRecovery ? /* @__PURE__ */ jsxs11("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)
@@ -3059,14 +3366,14 @@ function ConflictPreview({
   noteLabel,
   side
 }) {
-  return /* @__PURE__ */ jsxs10("article", { "data-conflict-version": side, "aria-label": heading, children: [
+  return /* @__PURE__ */ jsxs11("article", { "data-conflict-version": side, "aria-label": heading, children: [
     /* @__PURE__ */ jsx16("h4", { children: heading }),
-    /* @__PURE__ */ jsxs10("dl", { children: [
-      /* @__PURE__ */ jsxs10("div", { children: [
+    /* @__PURE__ */ jsxs11("dl", { children: [
+      /* @__PURE__ */ jsxs11("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" })
       ] }),
-      /* @__PURE__ */ jsxs10("div", { children: [
+      /* @__PURE__ */ jsxs11("div", { children: [
         /* @__PURE__ */ jsx16("dt", { children: noteLabel }),
         /* @__PURE__ */ jsx16("dd", { children: item?.note || "\u2014" })
       ] })
@@ -3078,9 +3385,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 +3419,7 @@ function getErrorMessage4(error) {
 }
 
 // src/KeepSyncStatusBanner.tsx
-import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
 function KeepSyncStatusBanner({
   onRetry,
   onResolveConflicts,
@@ -3122,7 +3429,7 @@ function KeepSyncStatusBanner({
 }) {
   const view = useKeepSyncStatusBanner({ onRetry, children });
   if (view.status === "idle" && !view.hasConflicts) return null;
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     "aside",
     {
       ...props,
@@ -3160,13 +3467,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 useCallback5, useEffect as useEffect7, useState as useState9 } 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 () => {
+  useEffect7(() => setTags(itemState.item?.tags ?? item.tags ?? []), [item.tags, itemState.item?.tags]);
+  const save = useCallback5(async () => {
     const nextTags = normalizeUiTags(tags);
     try {
       await itemState.updateTags(nextTags);
@@ -3212,7 +3519,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 Fragment7, jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
 function KeepTagEditor({
   item,
   availableTags = [],
@@ -3223,8 +3530,8 @@ 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(Fragment7, { children: [
+    /* @__PURE__ */ jsxs13("label", { children: [
       view.labels.tags,
       /* @__PURE__ */ jsx18(
         "input",
@@ -3238,13 +3545,13 @@ 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: [
+    /* @__PURE__ */ jsx18("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 })
     ] }, tag)) }),
     /* @__PURE__ */ jsx18("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,
@@ -3266,23 +3573,31 @@ function getErrorMessage5(error, fallback) {
 }
 
 // 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 jsx19, jsxs as jsxs14 } 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__ */ jsxs14("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 })
   ] });
@@ -3292,13 +3607,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 useEffect8, useRef as useRef6, useState as useState10 } 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 +3624,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 lastChangeRef = useRef6(void 0);
+  useEffect8(() => {
     const change = context.lastChange;
     if (!change || change === lastChangeRef.current) return;
     lastChangeRef.current = change;
@@ -3343,7 +3658,7 @@ function getStatusLabelKey3(status) {
 }
 
 // src/status.tsx
-import { Fragment as Fragment7, jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
 function KeepEmptyState({
   title,
   description,
@@ -3355,7 +3670,7 @@ function KeepEmptyState({
 }) {
   const defaultTitle = useKeepEmptyState();
   const contentChildren = asChild && isValidElement6(children) ? void 0 : children;
-  const body = contentChildren ?? /* @__PURE__ */ jsxs14(Fragment7, { children: [
+  const body = contentChildren ?? /* @__PURE__ */ jsxs15(Fragment8, { children: [
     /* @__PURE__ */ jsx20("h2", { children: title ?? defaultTitle }),
     description ? /* @__PURE__ */ jsx20("p", { children: description }) : null,
     action
@@ -3483,7 +3798,7 @@ import { createAuthenticatedSyncKit } from "@keepkit/core/core";
 import {
   KeepErrorBoundary as KeepErrorBoundary3,
   KeepProvider,
-  useKeepContext as useKeepContext7,
+  useKeepContext as useKeepContext8,
   useKeepItem as useKeepItem5,
   useKeepList as useKeepList5,
   useKeepShortcut
@@ -3498,11 +3813,12 @@ import {
   LocalStorageSyncQueueAdapter,
   SyncStorageAdapter
 } from "@keepkit/core/storage";
-import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
 function KeepKitProvider({
   labels,
   locale,
   labelResolver,
+  onFeedback,
   theme,
   mode,
   density,
@@ -3517,7 +3833,7 @@ function KeepKitProvider({
   children,
   ...providerProps
 }) {
-  return /* @__PURE__ */ jsx22(KeepUiProvider, { labels, locale, labelResolver, children: /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx22(KeepUiProvider, { labels, locale, labelResolver, onFeedback, children: /* @__PURE__ */ jsx22(
     KeepThemeProvider,
     {
       theme,
@@ -3531,7 +3847,8 @@ function KeepKitProvider({
       className: themeClassName,
       style: themeStyle,
       asChild: themeAsChild,
-      children: /* @__PURE__ */ jsxs15(CoreKeepProvider, { ...providerProps, children: [
+      children: /* @__PURE__ */ jsxs16(CoreKeepProvider, { ...providerProps, children: [
+        /* @__PURE__ */ jsx22(KeepSyncFeedbackObserver, {}),
         children,
         /* @__PURE__ */ jsx22(KeepAnnouncements, {})
       ] })
@@ -3543,6 +3860,7 @@ function createKeepKit(options = {}) {
     labels,
     locale,
     labelResolver,
+    onFeedback,
     theme,
     mode,
     density,
@@ -3566,6 +3884,7 @@ function createKeepKit(options = {}) {
         labels,
         locale,
         labelResolver,
+        onFeedback,
         theme,
         mode,
         density,
@@ -3611,6 +3930,7 @@ export {
   KeepEmptyState,
   KeepErrorBoundary3 as KeepErrorBoundary,
   KeepItemCard,
+  KeepItemCardSkeleton,
   KeepItemCheckbox,
   KeepItemStatusBadge,
   KeepKitProvider,
@@ -3643,10 +3963,11 @@ export {
   isAllSelected,
   keepThemeNames,
   toggleSelectAll,
-  useKeepContext7 as useKeepContext,
+  useKeepContext8 as useKeepContext,
   useKeepItem5 as useKeepItem,
   useKeepList5 as useKeepList,
   useKeepShortcut,
+  useKeepToastFeedback,
   useKeepUiLabels,
   useKeepUrlSync
 };