@keepkit/ui 0.14.0 → 0.16.0

package/dist/index.js

@@ -6,12 +6,32 @@ import {
   createKeepKit as createCoreKeepKit
 } from "@keepkit/core/react";
 
-// src/KeepBackup.tsx
+// 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,29 +1391,19 @@ 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/KeepBackup.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-function KeepBackup({
-  filename = "keepkit-backup.json",
-  onExport,
-  onImported,
-  ...props
-}) {
+// src/hooks/useKeepBackup.ts
+function useKeepBackup({ filename, onExport, onImported }) {
   const context = useKeepContext();
-  const exportLabel = useUiLabel("exportData");
-  const importLabel = useUiLabel("importData");
-  const importModeLabel = useUiLabel("importMode");
-  const mergeLabel = useUiLabel("merge");
-  const replaceLabel = useUiLabel("replace");
-  const importedCountLabel = useUiLabel("importedCount");
-  const failedCountLabel = useUiLabel("failedCount");
-  const quotaErrorLabel = useUiLabel("storageQuotaError");
   const inputRef = useRef(null);
   const [mode, setMode] = useState("merge");
   const [result, setResult] = useState();
   const [error, setError] = useState();
-  async function handleExport() {
+  async function exportBackup() {
     setError(void 0);
     try {
       const data = await context.exportBackup();
@@ -1346,7 +1419,7 @@ function KeepBackup({
       setError(cause);
     }
   }
-  async function handleImport(event) {
+  async function importBackup(event) {
     const file = event.currentTarget.files?.[0];
     event.currentTarget.value = "";
     if (!file) return;
@@ -1360,43 +1433,93 @@ function KeepBackup({
       setError(cause);
     }
   }
+  return {
+    inputRef,
+    mode,
+    setMode,
+    result,
+    error,
+    isMutating: context.isMutating,
+    exportBackup,
+    importBackup,
+    openFilePicker: () => inputRef.current?.click(),
+    labels: {
+      export: useUiLabel("exportData"),
+      import: useUiLabel("importData"),
+      importMode: useUiLabel("importMode"),
+      merge: useUiLabel("merge"),
+      replace: useUiLabel("replace"),
+      importedCount: useUiLabel("importedCount"),
+      failedCount: useUiLabel("failedCount"),
+      quotaError: useUiLabel("storageQuotaError")
+    }
+  };
+}
+
+// src/KeepBackup.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function KeepBackup({
+  filename = "keepkit-backup.json",
+  onExport,
+  onImported,
+  ...props
+}) {
+  const view = useKeepBackup({ filename, onExport, onImported });
   return /* @__PURE__ */ jsxs(
     "section",
     {
       ...props,
       "data-keepkit": "backup",
-      "data-state": error ? "error" : result ? "complete" : "idle",
-      "data-loading": context.isMutating ? "true" : void 0,
+      "data-state": view.error ? "error" : view.result ? "complete" : "idle",
+      "data-loading": view.isMutating ? "true" : void 0,
       children: [
-        /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => void handleExport(), disabled: context.isMutating, children: exportLabel }),
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            "data-keep-action": "export-backup",
+            onClick: () => void view.exportBackup(),
+            disabled: view.isMutating,
+            children: view.labels.export
+          }
+        ),
         /* @__PURE__ */ jsxs("label", { children: [
-          importModeLabel,
-          /* @__PURE__ */ jsxs("select", { value: mode, onChange: (event) => setMode(event.currentTarget.value), children: [
-            /* @__PURE__ */ jsx2("option", { value: "merge", children: mergeLabel }),
-            /* @__PURE__ */ jsx2("option", { value: "replace", children: replaceLabel })
-          ] })
+          view.labels.importMode,
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              "data-keep-action": "select-import-mode",
+              value: view.mode,
+              onChange: (event) => view.setMode(event.currentTarget.value),
+              children: [
+                /* @__PURE__ */ jsx2("option", { value: "merge", children: view.labels.merge }),
+                /* @__PURE__ */ jsx2("option", { value: "replace", children: view.labels.replace })
+              ]
+            }
+          )
         ] }),
-        /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => inputRef.current?.click(), disabled: context.isMutating, children: importLabel }),
+        /* @__PURE__ */ jsx2("button", { type: "button", "data-keep-action": "import-backup", onClick: view.openFilePicker, disabled: view.isMutating, children: view.labels.import }),
         /* @__PURE__ */ jsx2(
           "input",
           {
-            ref: inputRef,
+            ref: view.inputRef,
             type: "file",
+            "data-keep-action": "select-backup-file",
             accept: "application/json,.json",
-            "aria-label": importLabel,
-            onChange: (event) => void handleImport(event)
+            "aria-label": view.labels.import,
+            onChange: (event) => void view.importBackup(event)
           }
         ),
-        result ? /* @__PURE__ */ jsxs("p", { role: "status", children: [
-          result.imported,
+        view.result ? /* @__PURE__ */ jsxs("p", { role: "status", children: [
+          view.result.imported,
           " ",
-          importedCountLabel,
+          view.labels.importedCount,
           "; ",
-          result.failed,
+          view.result.failed,
           " ",
-          failedCountLabel
+          view.labels.failedCount
         ] }) : null,
-        error ? /* @__PURE__ */ jsx2("p", { role: "alert", children: isQuotaError(error) ? quotaErrorLabel : getErrorMessage(error) }) : null
+        view.error ? /* @__PURE__ */ jsx2("p", { role: "alert", children: isQuotaError(view.error) ? view.labels.quotaError : getErrorMessage(view.error) }) : null
       ]
     }
   );
@@ -1410,48 +1533,16 @@ function getErrorMessage(error) {
   return error instanceof Error ? error.message : "Something went wrong.";
 }
 
-// src/KeepBulkActions.tsx
+// src/hooks/useKeepBulkActions.ts
 import { useKeepList } from "@keepkit/core/react";
 import { useState as useState2 } from "react";
 
-// src/KeepItemCheckbox.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-function KeepItemCheckbox({
-  item,
-  checked = false,
-  label,
-  onCheckedChange,
-  "aria-label": ariaLabel,
-  ...props
-}) {
-  const itemLabel = getItemLabel(item) ?? item.id;
-  const accessibleLabel = ariaLabel ?? (typeof label === "string" ? label : itemLabel);
-  return /* @__PURE__ */ jsx3(
-    "input",
-    {
-      ...props,
-      type: "checkbox",
-      checked,
-      "data-keepkit": "item-checkbox",
-      "data-state": checked ? "checked" : "unchecked",
-      "data-disabled": props.disabled ? "true" : void 0,
-      "aria-label": accessibleLabel,
-      onChange: (event) => onCheckedChange?.(event.currentTarget.checked)
-    }
-  );
-}
-function getItemLabel(item) {
-  if (typeof item.meta !== "object" || item.meta === null || !("title" in item.meta)) return void 0;
-  const title = item.meta.title;
-  return typeof title === "string" && title.trim() ? title.trim() : void 0;
-}
-
 // src/shared.tsx
 import {
   cloneElement,
   isValidElement
 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 function toKeepButtonItem(item) {
   return {
     id: item.id,
@@ -1480,11 +1571,10 @@ function renderRoot(asChild, child, props, body, componentName) {
     if (!isValidElement(child)) throw new Error(`${componentName} with asChild requires a single React element child.`);
     return cloneElement(child, { ...props, children: body });
   }
-  return /* @__PURE__ */ jsx4("div", { ...props, children: body });
+  return /* @__PURE__ */ jsx3("div", { ...props, children: body });
 }
 
-// src/KeepBulkActions.tsx
-import { Fragment, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+// src/hooks/useKeepBulkActions.ts
 function isAllSelected(items, selectedIds) {
   if (items.length === 0) return false;
   const selected = new Set(selectedIds);
@@ -1499,42 +1589,30 @@ function toggleSelectAll(items, selectedIds) {
   }
   return nextIds;
 }
-function KeepBulkActions({
-  query,
-  selectedIds: controlledSelectedIds,
-  defaultSelectedIds = [],
-  onSelectedIdsChange,
-  renderItem,
-  onCompleted,
-  selectionScope: controlledScope,
-  onSelectionScopeChange,
-  render,
-  children,
-  ...props
-}) {
-  const selectItemsLabel = useUiLabel("selectItems");
-  const selectedCountLabel = useUiLabel("selectedCount");
-  const deleteSelectedLabel = useUiLabel("deleteSelected");
-  const tagsLabel = useUiLabel("tagsToApply");
-  const applyTagsLabel = useUiLabel("applyTags");
-  const selectionScopeLabel = useUiLabel("selectionScope");
-  const currentPageLabel = useUiLabel("currentPage");
-  const searchResultsLabel = useUiLabel("searchResults");
-  const allItemsLabel = useUiLabel("allItems");
+function useKeepBulkActions(options) {
+  const {
+    query,
+    controlledSelectedIds,
+    defaultSelectedIds,
+    onSelectedIdsChange,
+    onCompleted,
+    controlledScope,
+    onSelectionScopeChange
+  } = options;
   const list = useKeepList(query);
   const queryList = useKeepList(query ? { ...query, pagination: void 0 } : { pagination: void 0 });
   const allList = useKeepList({ pagination: void 0 });
   const [uncontrolledScope, setUncontrolledScope] = useState2(controlledScope ?? "page");
   const selectionScope = controlledScope ?? uncontrolledScope;
-  const setSelectionScope = (scope) => {
-    if (controlledScope === void 0) setUncontrolledScope(scope);
-    onSelectionScopeChange?.(scope);
-  };
   const targetItems = selectionScope === "page" ? list.items : selectionScope === "query" ? queryList.items : allList.items;
   const [uncontrolledSelectedIds, setUncontrolledSelectedIds] = useState2(defaultSelectedIds);
   const selectedIds = controlledSelectedIds ?? uncontrolledSelectedIds;
   const selected = new Set(selectedIds);
   const [tagsInput, setTagsInput] = useState2("");
+  const setSelectionScope = (scope) => {
+    if (controlledScope === void 0) setUncontrolledScope(scope);
+    onSelectionScopeChange?.(scope);
+  };
   const setSelectedIds = (ids) => {
     if (controlledSelectedIds === void 0) setUncontrolledSelectedIds(ids);
     onSelectedIdsChange?.(ids);
@@ -1571,54 +1649,156 @@ function KeepBulkActions({
     selectionScope,
     setSelectionScope
   };
+  return {
+    state,
+    selected,
+    isLoading: list.isLoading,
+    labels: {
+      selectItems: useUiLabel("selectItems"),
+      selectedCount: useUiLabel("selectedCount"),
+      deleteSelected: useUiLabel("deleteSelected"),
+      tags: useUiLabel("tagsToApply"),
+      applyTags: useUiLabel("applyTags"),
+      selectionScope: useUiLabel("selectionScope"),
+      currentPage: useUiLabel("currentPage"),
+      searchResults: useUiLabel("searchResults"),
+      allItems: useUiLabel("allItems")
+    }
+  };
+}
+
+// src/KeepItemCheckbox.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function KeepItemCheckbox({
+  item,
+  checked = false,
+  label,
+  onCheckedChange,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const itemLabel = getItemLabel(item) ?? item.id;
+  const accessibleLabel = ariaLabel ?? (typeof label === "string" ? label : itemLabel);
+  return /* @__PURE__ */ jsx4(
+    "input",
+    {
+      ...props,
+      type: "checkbox",
+      checked,
+      "data-keepkit": "item-checkbox",
+      "data-keep-action": "select-item",
+      "data-state": checked ? "checked" : "unchecked",
+      "data-disabled": props.disabled ? "true" : void 0,
+      "aria-label": accessibleLabel,
+      onChange: (event) => onCheckedChange?.(event.currentTarget.checked)
+    }
+  );
+}
+function getItemLabel(item) {
+  if (typeof item.meta !== "object" || item.meta === null || !("title" in item.meta)) return void 0;
+  const title = item.meta.title;
+  return typeof title === "string" && title.trim() ? title.trim() : void 0;
+}
+
+// src/KeepBulkActions.tsx
+import { Fragment, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function KeepBulkActions({
+  query,
+  selectedIds: controlledSelectedIds,
+  defaultSelectedIds = [],
+  onSelectedIdsChange,
+  renderItem,
+  onCompleted,
+  selectionScope: controlledScope,
+  onSelectionScopeChange,
+  render,
+  children,
+  ...props
+}) {
+  const { state, selected, isLoading, labels } = useKeepBulkActions({
+    query,
+    controlledSelectedIds,
+    defaultSelectedIds,
+    onSelectedIdsChange,
+    onCompleted,
+    controlledScope,
+    onSelectionScopeChange
+  });
   const body = render ? render(state) : typeof children === "function" ? children(state) : children ?? /* @__PURE__ */ jsxs2(Fragment, { children: [
     /* @__PURE__ */ jsxs2("fieldset", { children: [
-      /* @__PURE__ */ jsx5("legend", { children: selectItemsLabel }),
+      /* @__PURE__ */ jsx5("legend", { children: labels.selectItems }),
       /* @__PURE__ */ jsxs2("label", { children: [
-        selectionScopeLabel,
+        labels.selectionScope,
         /* @__PURE__ */ jsxs2(
           "select",
           {
-            value: selectionScope,
-            onChange: (event) => setSelectionScope(event.currentTarget.value),
+            "data-keep-action": "select-scope",
+            value: state.selectionScope,
+            onChange: (event) => state.setSelectionScope(event.currentTarget.value),
             children: [
-              /* @__PURE__ */ jsx5("option", { value: "page", children: currentPageLabel }),
-              /* @__PURE__ */ jsx5("option", { value: "query", children: searchResultsLabel }),
-              /* @__PURE__ */ jsx5("option", { value: "all", children: allItemsLabel })
+              /* @__PURE__ */ jsx5("option", { value: "page", children: labels.currentPage }),
+              /* @__PURE__ */ jsx5("option", { value: "query", children: labels.searchResults }),
+              /* @__PURE__ */ jsx5("option", { value: "all", children: labels.allItems })
             ]
           }
         )
       ] }),
       /* @__PURE__ */ jsxs2("label", { children: [
-        /* @__PURE__ */ jsx5("input", { type: "checkbox", checked: allSelected, onChange: toggleAll, "aria-label": selectItemsLabel }),
-        selectedIds.length,
+        /* @__PURE__ */ jsx5(
+          "input",
+          {
+            type: "checkbox",
+            "data-keep-action": "select-all",
+            checked: state.allSelected,
+            onChange: state.toggleAll,
+            "aria-label": labels.selectItems
+          }
+        ),
+        state.selectedIds.length,
         " ",
-        selectedCountLabel
+        labels.selectedCount
       ] }),
-      targetItems.map((item) => /* @__PURE__ */ jsxs2("span", { children: [
+      state.items.map((item) => /* @__PURE__ */ jsxs2("span", { children: [
         /* @__PURE__ */ jsx5(
           KeepItemCheckbox,
           {
             item,
             checked: selected.has(item.id),
-            onCheckedChange: () => toggle(item.id)
+            onCheckedChange: () => state.toggle(item.id)
           }
         ),
         renderItem ? renderItem(item, selected.has(item.id)) : getMetaTitle(item.meta) ?? item.id
       ] }, item.id))
     ] }),
-    /* @__PURE__ */ jsx5("button", { type: "button", onClick: () => void remove(), disabled: selectedIds.length === 0 || list.isMutating, children: deleteSelectedLabel }),
+    /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        "data-keep-action": "delete-selected",
+        onClick: () => void state.remove(),
+        disabled: state.selectedIds.length === 0 || state.isMutating,
+        children: labels.deleteSelected
+      }
+    ),
     /* @__PURE__ */ jsxs2("label", { children: [
-      tagsLabel,
-      /* @__PURE__ */ jsx5("input", { value: tagsInput, onChange: (event) => setTagsInput(event.currentTarget.value) })
+      labels.tags,
+      /* @__PURE__ */ jsx5(
+        "input",
+        {
+          "data-keep-action": "edit-tags",
+          value: state.tagsInput,
+          onChange: (event) => state.setTagsInput(event.currentTarget.value)
+        }
+      )
     ] }),
     /* @__PURE__ */ jsx5(
       "button",
       {
         type: "button",
-        onClick: () => void updateTags(),
-        disabled: selectedIds.length === 0 || list.isMutating,
-        children: applyTagsLabel
+        "data-keep-action": "apply-tags",
+        onClick: () => void state.updateTags(),
+        disabled: state.selectedIds.length === 0 || state.isMutating,
+        children: labels.applyTags
       }
     )
   ] });
@@ -1627,9 +1807,9 @@ function KeepBulkActions({
     {
       ...props,
       "data-keepkit": "bulk-actions",
-      "aria-busy": list.isMutating || props["aria-busy"],
-      "data-state": selectedIds.length > 0 ? "selected" : "idle",
-      "data-loading": list.isLoading || list.isMutating ? "true" : void 0,
+      "aria-busy": state.isMutating || props["aria-busy"],
+      "data-state": state.selectedIds.length > 0 ? "selected" : "idle",
+      "data-loading": isLoading || state.isMutating ? "true" : void 0,
       children: body
     }
   );
@@ -1637,10 +1817,31 @@ function KeepBulkActions({
 
 // src/KeepButton.tsx
 import {
-  KeepButton as CoreKeepButton,
-  useKeepItem
+  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),
+      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";
 function KeepButton({
   labels,
@@ -1648,18 +1849,42 @@ function KeepButton({
   iconOnly = false,
   showLabel = true,
   iconClassName,
+  onClick,
+  onToggleError,
   ...props
 }) {
-  const saveLabel = useUiLabel("save", typeof labels?.unsaved === "string" ? labels.unsaved : void 0);
-  const savedLabel = useUiLabel("saved", typeof labels?.saved === "string" ? labels.saved : void 0);
-  const loadingLabel = useUiLabel("loading", typeof labels?.loading === "string" ? labels.loading : void 0);
-  const errorLabel = useUiLabel("error", typeof labels?.error === "string" ? labels.error : void 0);
-  const buttonState = useKeepItem(props.item);
-  const customStateLabel = labels?.loading !== void 0 || labels?.error !== void 0 || icons !== void 0 && props.children === void 0;
+  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 ?? errorLabel : state.isMutating ? labels?.loading ?? loadingLabel : state.isSaved ? labels?.saved ?? savedLabel : labels?.unsaved ?? saveLabel;
+    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: [
@@ -1669,15 +1894,27 @@ 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,
     "data-icon-only": iconOnly ? "true" : void 0,
-    "aria-busy": props["aria-busy"] ?? (buttonState.isLoading || buttonState.isMutating),
-    savedLabel: labels?.saved ?? props.savedLabel ?? savedLabel,
-    unsavedLabel: labels?.unsaved ?? props.unsavedLabel ?? saveLabel,
+    "aria-busy": props["aria-busy"] ?? (view.buttonState.isLoading || view.buttonState.isMutating),
+    savedLabel: labels?.saved ?? props.savedLabel ?? view.labels.saved,
+    unsavedLabel: labels?.unsaved ?? props.unsavedLabel ?? view.labels.save,
     savedAriaLabel: labels?.savedAriaLabel ?? props.savedAriaLabel,
     unsavedAriaLabel: labels?.unsavedAriaLabel ?? props.unsavedAriaLabel
   };
-  if (!customStateLabel) return /* @__PURE__ */ jsx6(CoreKeepButton, { ...sharedProps });
+  if (!view.customStateLabel) return /* @__PURE__ */ jsx6(CoreKeepButton, { ...sharedProps });
   return /* @__PURE__ */ jsx6(CoreKeepButton, { ...sharedProps, children: (state) => /* @__PURE__ */ jsx6(Fragment2, { children: getStateContent(state) }) });
 }
 function renderIcon(icon, className) {
@@ -1686,88 +1923,296 @@ function renderIcon(icon, className) {
 }
 
 // src/KeepCollection.tsx
-import { KeepErrorBoundary as KeepErrorBoundary2, useKeepList as useKeepList4 } from "@keepkit/core/react";
-import { useMemo as useMemo3, useState as useState6 } from "react";
+import { KeepErrorBoundary as KeepErrorBoundary2 } from "@keepkit/core/react";
 
-// src/KeepList.tsx
-import {
-  KeepErrorBoundary,
-  useKeepList as useKeepList2
-} from "@keepkit/core/react";
-import { isValidElement as isValidElement3 } from "react";
+// src/hooks/useKeepCollection.ts
+import { useKeepList as useKeepList2 } from "@keepkit/core/react";
+import { useMemo as useMemo2, useState as useState3 } from "react";
 
-// src/KeepItemCard.tsx
-import { useKeepItem as useKeepItem2 } from "@keepkit/core/react";
+// src/url-sync.tsx
 import {
-  isValidElement as isValidElement2
-} from "react";
-
-// src/KeepStaleNotice.tsx
-import { useKeepContext as useKeepContext2 } from "@keepkit/core/react";
-import { useState as useState3 } from "react";
-
-// src/KeepItemStatusBadge.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
-function KeepItemStatusBadge({ status = "available", label, className, ...props }) {
-  const resolvedStatus = getDisplayStatus(status);
-  const statusLabel = useUiLabel(getStatusLabelKey(status));
-  return /* @__PURE__ */ jsx7(
-    "span",
-    {
-      ...props,
-      className,
-      "data-keepkit": "status-badge",
-      "data-status": status,
-      "data-item-status": resolvedStatus,
-      children: label ?? statusLabel
+  DEFAULT_KEEP_URL_PARAMS,
+  decodeKeepListQuery,
+  encodeKeepListQuery
+} from "@keepkit/core/core";
+import { useEffect as useEffect2, useRef as useRef3 } from "react";
+function createNextPagesRouterAdapter(router) {
+  const getUrl = () => router.asPath ?? (typeof window === "undefined" ? "/" : window.location.href);
+  return {
+    getUrl,
+    subscribe: router.events ? (listener) => {
+      router.events?.on("routeChangeComplete", listener);
+      return () => router.events?.off("routeChangeComplete", listener);
+    } : void 0,
+    navigate: (url, mode) => {
+      void router[mode](url, void 0, { shallow: true });
     }
-  );
-}
-function getStatusLabelKey(status) {
-  switch (status) {
-    case "available":
-      return "statusAvailable";
-    case "expired":
-      return "statusExpired";
-    case "removed":
-      return "statusRemoved";
-    case "deleted":
-      return "statusDeleted";
-    case "private":
-      return "statusPrivate";
-    case "unknown":
-      return "statusUnknown";
-    case "restricted":
-      return "statusPrivate";
-  }
-}
-function getDisplayStatus(status) {
-  if (status === "available") return "available";
-  if (status === "expired") return "expired";
-  if (status === "removed") return "removed";
-  return "restricted";
+  };
 }
-
-// src/KeepStaleNotice.tsx
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
-function KeepStaleNotice({
-  item,
-  onRetry,
-  onRemoved,
-  retryLabel,
-  removeLabel,
-  children,
-  className,
-  ...props
+function useKeepUrlSync({
+  enabled = true,
+  query,
+  onQueryChange,
+  options = {},
+  adapter: providedAdapter
+}) {
+  const browserAdapterRef = useRef3(getBrowserAdapter());
+  const adapter = providedAdapter ?? browserAdapterRef.current;
+  const onQueryChangeRef = useRef3(onQueryChange);
+  onQueryChangeRef.current = onQueryChange;
+  const skipWriteRef = useRef3(true);
+  const params = options.params;
+  useEffect2(() => {
+    if (!enabled) return;
+    const read = () => {
+      const url = adapter.getUrl();
+      const decoded = decodeKeepListQuery(url, { params });
+      skipWriteRef.current = true;
+      onQueryChangeRef.current((previousQuery) => ({
+        ...previousQuery,
+        ...decoded.search ? { search: decoded.search } : { search: void 0 },
+        ...decoded.tags ? { tags: decoded.tags } : { tags: void 0 },
+        ...decoded.sort ? { sort: decoded.sort } : {},
+        ...decoded.pagination ? { pagination: { ...previousQuery.pagination, ...decoded.pagination } } : {}
+      }));
+    };
+    read();
+    return adapter.subscribe?.(read);
+  }, [adapter, enabled, params]);
+  useEffect2(() => {
+    if (!enabled) return;
+    if (skipWriteRef.current) {
+      skipWriteRef.current = false;
+      return;
+    }
+    const currentUrl = new URL(adapter.getUrl(), "http://keepkit.invalid");
+    const urlParams = { ...DEFAULT_KEEP_URL_PARAMS, ...params };
+    for (const key of Object.values(urlParams)) currentUrl.searchParams.delete(key);
+    const nextParams = encodeKeepListQuery(query, { params });
+    nextParams.forEach((value, key) => {
+      currentUrl.searchParams.append(key, value);
+    });
+    const nextUrl = `${currentUrl.pathname}${currentUrl.search}${currentUrl.hash}`;
+    adapter.navigate(nextUrl, options.history ?? "push");
+  }, [adapter, enabled, options.history, params, query]);
+}
+function getBrowserAdapter() {
+  return {
+    getUrl: () => typeof window === "undefined" ? "/" : window.location.href,
+    subscribe: (listener) => {
+      if (typeof window === "undefined") return () => void 0;
+      window.addEventListener("popstate", listener);
+      return () => window.removeEventListener("popstate", listener);
+    },
+    navigate: (url, mode) => {
+      if (typeof window === "undefined") return;
+      window.history[mode === "push" ? "pushState" : "replaceState"]({}, "", url);
+    }
+  };
+}
+
+// src/hooks/useKeepCollection.ts
+function useKeepCollection({
+  query,
+  pageSize,
+  urlSync,
+  urlAdapter,
+  features
 }) {
+  const enabled = {
+    search: true,
+    sort: true,
+    pagination: true,
+    tagFilter: false,
+    bulkActions: false,
+    ...features
+  };
+  const [searchValue, setSearchValue] = useState3(query.search?.query ?? "");
+  const [sort, setSort] = useState3(query.sort ?? { by: "updatedAt", direction: "desc" });
+  const [tag, setTag] = useState3(query.tags?.[0]);
+  const [page, setPage] = useState3(query.pagination?.page ?? 1);
+  const resolvedPageSize = query.pagination?.pageSize ?? pageSize;
+  const resolvedQuery = useMemo2(
+    () => ({
+      ...query,
+      search: enabled.search ? { ...query.search, query: searchValue } : query.search,
+      sort: enabled.sort ? sort : query.sort,
+      tags: tag ? [.../* @__PURE__ */ new Set([...query.tags ?? [], tag])] : query.tags,
+      pagination: enabled.pagination ? { ...query.pagination, page, pageSize: resolvedPageSize } : query.pagination
+    }),
+    [enabled.pagination, enabled.search, enabled.sort, page, query, resolvedPageSize, searchValue, sort, tag]
+  );
+  useKeepUrlSync({
+    enabled: Boolean(urlSync),
+    query: resolvedQuery,
+    onQueryChange: (nextOrUpdater) => {
+      const next = typeof nextOrUpdater === "function" ? nextOrUpdater(resolvedQuery) : nextOrUpdater;
+      setSearchValue(next.search?.query ?? "");
+      setSort(next.sort ?? { by: "updatedAt", direction: "desc" });
+      setTag(next.tags?.[0]);
+      setPage(next.pagination?.page ?? 1);
+    },
+    options: typeof urlSync === "object" ? urlSync : {},
+    adapter: urlAdapter
+  });
+  const list = useKeepList2(resolvedQuery);
+  return {
+    enabled,
+    searchValue,
+    sortValue: sortToValue(sort),
+    tag,
+    resolvedPageSize,
+    resolvedQuery,
+    list,
+    setSearchValue: (value) => {
+      setSearchValue(value);
+      setPage(1);
+    },
+    setSortValue: (_value, nextSort) => {
+      setSort(nextSort);
+      setPage(1);
+    },
+    setTag: (value) => {
+      setTag(value);
+      setPage(1);
+    },
+    setPage
+  };
+}
+
+// src/KeepList.tsx
+import { KeepErrorBoundary } from "@keepkit/core/react";
+import { isValidElement as isValidElement3 } from "react";
+
+// src/hooks/useKeepListView.ts
+import { useKeepList as useKeepList3 } from "@keepkit/core/react";
+function useKeepListView(query) {
+  return {
+    state: useKeepList3(query),
+    labels: {
+      loading: useUiLabel("loadingItems"),
+      empty: useUiLabel("noItems"),
+      error: useUiLabel("errorItems")
+    }
+  };
+}
+
+// src/KeepItemCard.tsx
+import {
+  createContext as createContext2,
+  createElement as createElement2,
+  isValidElement as isValidElement2,
+  useContext as useContext2
+} from "react";
+
+// src/hooks/useKeepItemCard.ts
+import { useKeepItem as useKeepItem2 } from "@keepkit/core/react";
+function useKeepItemCard(options) {
+  const {
+    item,
+    title,
+    getTitle,
+    getImageProps,
+    href: hrefOption,
+    linkTargetAttribute,
+    linkRel,
+    onRemoveError,
+    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;
+  const isAvailable = item.status === void 0 || item.status === "available";
+  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,
+    status: item.status
+  };
+  return {
+    itemState,
+    state,
+    resolvedTitle,
+    imageProps,
+    href,
+    isAvailable,
+    displayStatus: getDisplayStatus(item.status),
+    resolvedLinkTarget: linkTargetAttribute ?? (isExternalLink ? "_blank" : void 0),
+    resolvedLinkRel: linkRel ?? (isExternalLink ? "noreferrer" : void 0),
+    statusLabel: item.status && item.status !== "available" ? unavailableLabel : void 0,
+    remove,
+    labels: {
+      save: useUiLabel("save"),
+      savedAt: useUiLabel("saved"),
+      error: useUiLabel("error"),
+      remove: useUiLabel("remove"),
+      tags: useUiLabel("tags")
+    }
+  };
+}
+function getStatusLabelKey(status) {
+  switch (status) {
+    case "expired":
+      return "statusExpired";
+    case "removed":
+      return "statusRemoved";
+    case "deleted":
+      return "statusDeleted";
+    case "private":
+      return "statusPrivate";
+    default:
+      return "statusUnknown";
+  }
+}
+function getDisplayStatus(status) {
+  if (status === void 0 || status === "available") return "available";
+  if (status === "expired") return "expired";
+  if (status === "removed") return "removed";
+  return "restricted";
+}
+
+// src/hooks/useKeepStaleNotice.ts
+import { useKeepContext as useKeepContext2 } from "@keepkit/core/react";
+import { useState as useState4 } from "react";
+function useKeepStaleNotice({ item, onRetry, onRemoved }) {
   const context = useKeepContext2();
-  const retryText = useUiLabel("retry");
-  const removeText = useUiLabel("removeFromList");
-  const errorText = useUiLabel("error");
-  const [isRetrying, setIsRetrying] = useState3(false);
-  const [error, setError] = useState3(null);
-  const status = item.status && item.status !== "available" ? item.status : "unknown";
-  async function handleRetry() {
+  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() {
     setError(null);
     setIsRetrying(true);
     try {
@@ -1779,22 +2224,157 @@ function KeepStaleNotice({
       setIsRetrying(false);
     }
   }
-  async function handleRemove() {
+  async function remove() {
     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);
     }
   }
-  return /* @__PURE__ */ jsxs4("aside", { ...props, className, "data-keepkit": "stale-notice", "data-state": error ? "error" : "stale", children: [
-    /* @__PURE__ */ jsx8(KeepItemStatusBadge, { status }),
+  return {
+    status: item.status && item.status !== "available" ? item.status : "unknown",
+    error,
+    isRetrying,
+    isMutating: context.isMutating,
+    retry,
+    remove,
+    labels: {
+      retry: useUiLabel("retry"),
+      remove: useUiLabel("removeFromList"),
+      error: useUiLabel("error")
+    }
+  };
+}
+function useKeepPruneStale({ statuses, onPruned }) {
+  const context = useKeepContext2();
+  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 });
+          }
+        });
+      }
+    }
+  };
+}
+
+// src/hooks/useKeepItemStatusBadge.ts
+function useKeepItemStatusBadge(status) {
+  return { resolvedStatus: getDisplayStatus2(status), statusLabel: useUiLabel(getStatusLabelKey2(status)) };
+}
+function getStatusLabelKey2(status) {
+  switch (status) {
+    case "available":
+      return "statusAvailable";
+    case "expired":
+      return "statusExpired";
+    case "removed":
+      return "statusRemoved";
+    case "deleted":
+      return "statusDeleted";
+    case "private":
+      return "statusPrivate";
+    case "unknown":
+      return "statusUnknown";
+    case "restricted":
+      return "statusPrivate";
+  }
+}
+function getDisplayStatus2(status) {
+  if (status === "available") return "available";
+  if (status === "expired") return "expired";
+  if (status === "removed") return "removed";
+  return "restricted";
+}
+
+// src/KeepItemStatusBadge.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function KeepItemStatusBadge({ status = "available", label, className, ...props }) {
+  const view = useKeepItemStatusBadge(status);
+  return /* @__PURE__ */ jsx7(
+    "span",
+    {
+      ...props,
+      className,
+      "data-keepkit": "status-badge",
+      "data-status": status,
+      "data-item-status": view.resolvedStatus,
+      children: label ?? view.statusLabel
+    }
+  );
+}
+
+// src/KeepStaleNotice.tsx
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+function KeepStaleNotice({
+  item,
+  onRetry,
+  onRemoved,
+  retryLabel,
+  removeLabel,
+  children,
+  className,
+  ...props
+}) {
+  const view = useKeepStaleNotice({ item, onRetry, onRemoved });
+  return /* @__PURE__ */ jsxs4("aside", { ...props, className, "data-keepkit": "stale-notice", "data-state": view.error ? "error" : "stale", children: [
+    /* @__PURE__ */ jsx8(KeepItemStatusBadge, { status: view.status }),
     children ?? (item.statusReason ? /* @__PURE__ */ jsx8("p", { children: item.statusReason }) : null),
     /* @__PURE__ */ jsxs4("div", { children: [
-      /* @__PURE__ */ jsx8("button", { type: "button", onClick: () => void handleRetry(), disabled: isRetrying || context.isMutating, children: retryLabel ?? retryText }),
-      /* @__PURE__ */ jsx8("button", { type: "button", onClick: () => void handleRemove(), disabled: context.isMutating, children: removeLabel ?? removeText })
+      /* @__PURE__ */ jsx8(
+        "button",
+        {
+          type: "button",
+          "data-keep-action": "retry-item",
+          onClick: () => void view.retry(),
+          disabled: view.isRetrying || view.isMutating,
+          children: retryLabel ?? view.labels.retry
+        }
+      ),
+      /* @__PURE__ */ jsx8(
+        "button",
+        {
+          type: "button",
+          "data-keep-action": "remove-item",
+          onClick: () => void view.remove(),
+          disabled: view.isMutating,
+          children: removeLabel ?? view.labels.remove
+        }
+      )
     ] }),
-    error ? /* @__PURE__ */ jsx8("p", { role: "alert", children: error instanceof Error ? error.message : errorText }) : null
+    view.error ? /* @__PURE__ */ jsx8("p", { role: "alert", children: view.error instanceof Error ? view.error.message : view.labels.error }) : null
   ] });
 }
 function KeepPruneStaleButton({
@@ -1805,14 +2385,7 @@ function KeepPruneStaleButton({
   disabled,
   ...props
 }) {
-  const context = useKeepContext2();
-  const defaultLabel = useUiLabel("pruneStale");
-  const staleIds = context.items.filter((item) => item.status && statuses.includes(item.status)).map((item) => item.id);
-  async function handlePrune() {
-    const ids = [...staleIds];
-    await context.removeItemsWithUndo(ids);
-    onPruned?.(ids);
-  }
+  const view = useKeepPruneStale({ statuses, onPruned });
   return /* @__PURE__ */ jsx8(
     "button",
     {
@@ -1820,17 +2393,24 @@ function KeepPruneStaleButton({
       type: "button",
       className: props.className,
       "data-keepkit": "prune-stale",
-      "data-state": staleIds.length > 0 ? "available" : "empty",
-      disabled: staleIds.length === 0 || context.isMutating || disabled,
-      onClick: () => void handlePrune(),
-      children: children ?? label ?? `${defaultLabel} (${staleIds.length})`
+      "data-keep-action": "prune-stale",
+      "data-state": view.staleIds.length > 0 ? "available" : "empty",
+      disabled: view.staleIds.length === 0 || view.isMutating || disabled,
+      onClick: () => void view.prune(),
+      children: children ?? label ?? `${view.label} (${view.staleIds.length})`
     }
   );
 }
 
 // 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,
@@ -1859,116 +2439,151 @@ function KeepItemCard({
   className,
   ...rootProps
 }) {
-  const saveActionLabel = useUiLabel("save");
-  const savedAtLabel = useUiLabel("saved");
-  const errorLabel = useUiLabel("error");
-  const removeActionLabel = useUiLabel("remove");
-  const itemState = useKeepItem2(item);
-  const contentChildren = asChild && isValidElement2(children) ? void 0 : children;
-  const state = {
+  const view = useKeepItemCard({
     item,
-    isSaved: itemState.isSaved,
-    isMutating: itemState.isMutating,
-    error: itemState.error,
-    remove: itemState.remove,
-    status: item.status
-  };
-  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;
-  const isAvailable = item.status === void 0 || item.status === "available";
-  const displayStatus = getDisplayStatus2(item.status);
-  const isExternalLink = href ? isExternalHref(href) : false;
-  const resolvedLinkTarget = linkTargetAttribute ?? (isExternalLink ? "_blank" : void 0);
-  const resolvedLinkRel = linkRel ?? (isExternalLink ? "noreferrer" : void 0);
-  const statusLabelKey = item.status && item.status !== "available" ? getStatusLabelKey2(item.status) : "statusUnknown";
-  const unavailableLabel = useUiLabel(statusLabelKey);
-  const tagsLabel = useUiLabel("tags");
-  const statusLabel = item.status && item.status !== "available" ? unavailableLabel : void 0;
+    title,
+    getTitle,
+    getImageProps,
+    href: hrefOption,
+    linkTargetAttribute,
+    linkRel,
+    onRemoveError,
+    onRemoved
+  });
+  const contentChildren = asChild && isValidElement2(children) ? void 0 : children;
   function renderLink(content) {
-    if (!href || !isAvailable) return content;
+    if (!view.href || !view.isAvailable) return content;
     const linkProps = {
-      href,
-      target: resolvedLinkTarget,
-      rel: resolvedLinkRel,
+      href: view.href,
+      target: view.resolvedLinkTarget,
+      rel: view.resolvedLinkRel,
       onClick: (event) => onOpen?.(item, event),
       children: content
     };
     return LinkComponent ? /* @__PURE__ */ jsx9(LinkComponent, { ...linkProps }) : /* @__PURE__ */ jsx9("a", { ...linkProps });
   }
-  async function handleRemove() {
-    try {
-      await itemState.remove();
-      onRemoved?.(item);
-    } catch (error) {
-      onRemoveError?.(error);
-    }
+  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 body = render ? render(state) : typeof contentChildren === "function" ? contentChildren(state) : contentChildren ?? /* @__PURE__ */ jsxs5(Fragment3, { children: [
-    imageProps ? renderImage?.({ ...imageProps, alt: imageAlt ?? imageProps.alt }, item) ?? (ImageComponent ? /* @__PURE__ */ jsx9(ImageComponent, { ...imageProps, alt: imageAlt ?? imageProps.alt }) : /* @__PURE__ */ jsx9("img", { ...imageProps, alt: imageAlt ?? imageProps.alt })) : null,
-    /* @__PURE__ */ jsx9("h3", { children: linkTarget === "title" ? isAvailable ? renderLink(resolvedTitle) : href ? /* @__PURE__ */ jsx9("span", { "aria-disabled": "true", "data-link-disabled": "true", children: resolvedTitle }) : resolvedTitle : resolvedTitle }),
-    showSavedAt ? /* @__PURE__ */ jsxs5("div", { "data-card-meta": true, children: [
-      /* @__PURE__ */ jsxs5("span", { children: [
-        savedAtLabel,
-        ":"
-      ] }),
-      " ",
-      /* @__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": tagsLabel, children: item.tags?.map((tag) => /* @__PURE__ */ jsx9("li", { children: tag }, tag)) }) : null,
-    itemState.error ? /* @__PURE__ */ jsx9("p", { role: "alert", children: getErrorMessage2(itemState.error, errorLabel) }) : null,
-    statusLabel ? /* @__PURE__ */ jsx9(KeepStaleNotice, { item, onRetry, onRemoved }) : null,
-    showSaveButton && !statusLabel ? /* @__PURE__ */ jsx9(
+  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),
         labels: saveButtonLabels,
-        getAriaLabel: (buttonState) => `${buttonState.isSaved ? removeActionLabel : saveActionLabel} ${String(resolvedTitle)}`
+        getAriaLabel: (buttonState) => `${buttonState.isSaved ? view.labels.remove : view.labels.save} ${String(view.resolvedTitle)}`
       }
     ) : null,
-    !statusLabel ? /* @__PURE__ */ jsx9("button", { type: "button", onClick: () => void handleRemove(), disabled: itemState.isMutating, children: removeLabel ?? removeActionLabel }) : null
+    /* @__PURE__ */ jsx9(
+      "button",
+      {
+        type: "button",
+        "data-keep-action": "remove-item",
+        onClick: () => void view.remove(),
+        disabled: view.itemState.isMutating,
+        children: removeLabel ?? view.labels.remove
+      }
+    )
   ] });
-  const linkedBody = linkTarget === "card" && isAvailable ? renderLink(body) : body;
-  return renderRoot(
+  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;
+  const root = renderRoot(
     asChild,
     isValidElement2(children) ? children : void 0,
     {
       ...rootProps,
       className,
       "data-keepkit": "card",
-      "aria-busy": itemState.isMutating || rootProps["aria-busy"],
-      "aria-disabled": rootProps["aria-disabled"] ?? (!isAvailable ? "true" : void 0),
-      "data-state": itemState.error ? "error" : itemState.isSaved ? "saved" : "unsaved",
+      "aria-busy": view.itemState.isMutating || rootProps["aria-busy"],
+      "aria-disabled": rootProps["aria-disabled"] ?? (!view.isAvailable ? "true" : void 0),
+      "data-state": view.itemState.error ? "error" : view.itemState.isSaved ? "saved" : "unsaved",
       "data-status": item.status ?? "available",
-      "data-item-status": displayStatus,
-      "data-loading": itemState.isMutating ? "true" : void 0
+      "data-item-status": view.displayStatus,
+      "data-loading": view.itemState.isMutating ? "true" : void 0
     },
     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 getStatusLabelKey2(status) {
-  switch (status) {
-    case "expired":
-      return "statusExpired";
-    case "removed":
-      return "statusRemoved";
-    case "deleted":
-      return "statusDeleted";
-    case "private":
-      return "statusPrivate";
-    default:
-      return "statusUnknown";
-  }
-}
-function getDisplayStatus2(status) {
-  if (status === void 0 || status === "available") return "available";
-  if (status === "expired") return "expired";
-  if (status === "removed") return "removed";
-  return "restricted";
-}
-function isExternalHref(href) {
-  return /^(?:[a-z][a-z\d+.-]*:|\/\/)/i.test(href);
+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);
@@ -1978,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 });
@@ -1990,6 +2605,8 @@ function KeepListContent({
   children,
   renderItem,
   loading,
+  renderLoading,
+  loadingCount = 6,
   empty,
   error: errorContent,
   itemCardProps,
@@ -1998,16 +2615,16 @@ function KeepListContent({
   className,
   ...rootProps
 }) {
-  const defaultLoading = useUiLabel("loadingItems");
-  const defaultEmpty = useUiLabel("noItems");
-  const defaultError = useUiLabel("errorItems");
-  const state = useKeepList2(query);
+  const view = useKeepListView(query);
+  const { state } = view;
   const body = getListBody(state, {
     children,
     renderItem,
-    loading: loading ?? defaultLoading,
-    empty: empty ?? defaultEmpty,
-    error: errorContent ?? defaultError,
+    loading: renderLoading !== void 0 ? renderLoading : loading,
+    loadingCount,
+    loadingLabel: view.labels.loading,
+    empty: empty ?? view.labels.empty,
+    error: errorContent ?? view.labels.error,
     itemCardProps,
     layout
   });
@@ -2035,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;
@@ -2045,9 +2672,40 @@ function getListBody(state, options) {
 }
 
 // src/KeepTagFilter.tsx
-import { useKeepList as useKeepList3 } from "@keepkit/core/react";
-import { isValidElement as isValidElement4, useCallback, useMemo as useMemo2, useState as useState4 } from "react";
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import { isValidElement as isValidElement4 } from "react";
+
+// src/hooks/useKeepTagFilter.ts
+import { useKeepList as useKeepList4 } from "@keepkit/core/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);
+  const resolvedValue = controlledValue ?? uncontrolledValue;
+  const list = useKeepList4({
+    ...query,
+    tags: resolvedValue ? [...query?.tags ?? [], resolvedValue] : query?.tags
+  });
+  const select = useCallback3(
+    (tag) => {
+      if (controlledValue === void 0) setUncontrolledValue(tag);
+      onChange?.(tag);
+      onValueChange?.(tag);
+    },
+    [controlledValue, onChange, onValueChange]
+  );
+  const state = useMemo3(
+    () => ({ tags: list.tags, tagCounts: list.tagCounts, value: resolvedValue, select }),
+    [list.tagCounts, list.tags, resolvedValue, select]
+  );
+  return {
+    state,
+    isLoading: list.isLoading,
+    labels: { all: useUiLabel("allTags"), aria: useUiLabel("filterTags") }
+  };
+}
+
+// src/KeepTagFilter.tsx
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 function KeepTagFilter({
   query,
   value: controlledValue,
@@ -2063,38 +2721,38 @@ function KeepTagFilter({
   className,
   ...rootProps
 }) {
-  const uiAllLabel = useUiLabel("allTags");
-  const uiAriaLabel = useUiLabel("filterTags");
-  const [uncontrolledValue, setUncontrolledValue] = useState4(defaultValue);
-  const resolvedValue = controlledValue ?? uncontrolledValue;
-  const list = useKeepList3({
-    ...query,
-    tags: resolvedValue ? [...query?.tags ?? [], resolvedValue] : query?.tags
-  });
-  const select = useCallback(
-    (tag) => {
-      if (controlledValue === void 0) setUncontrolledValue(tag);
-      onChange?.(tag);
-      onValueChange?.(tag);
-    },
-    [controlledValue, onChange, onValueChange]
-  );
-  const state = useMemo2(
-    () => ({ tags: list.tags, tagCounts: list.tagCounts, value: resolvedValue, select }),
-    [list.tagCounts, list.tags, resolvedValue, select]
-  );
+  const view = useKeepTagFilter({ query, controlledValue, defaultValue, onChange, onValueChange });
   const contentChildren = asChild && isValidElement4(children) ? void 0 : children;
-  const body = render ? render(state) : typeof contentChildren === "function" ? contentChildren(state) : contentChildren ?? /* @__PURE__ */ jsxs6("fieldset", { children: [
-    /* @__PURE__ */ jsx11("legend", { children: ariaLabel ?? uiAriaLabel }),
-    /* @__PURE__ */ jsx11("button", { type: "button", "aria-pressed": resolvedValue === void 0, onClick: () => select(), children: allLabel ?? uiAllLabel }),
-    list.tags.map((tag) => /* @__PURE__ */ jsxs6("button", { type: "button", "aria-pressed": resolvedValue === tag, onClick: () => select(tag), children: [
-      renderTag ? renderTag(tag, list.tagCounts[tag] ?? 0, resolvedValue === tag) : tag,
-      /* @__PURE__ */ jsxs6("span", { children: [
-        " (",
-        list.tagCounts[tag] ?? 0,
-        ")"
-      ] })
-    ] }, tag))
+  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",
+      {
+        type: "button",
+        "data-keep-action": "filter-all-tags",
+        "aria-pressed": view.state.value === void 0,
+        onClick: () => view.state.select(),
+        children: allLabel ?? view.labels.all
+      }
+    ),
+    view.state.tags.map((tag) => /* @__PURE__ */ jsxs7(
+      "button",
+      {
+        type: "button",
+        "data-keep-action": "filter-tag",
+        "aria-pressed": view.state.value === tag,
+        onClick: () => view.state.select(tag),
+        children: [
+          renderTag ? renderTag(tag, view.state.tagCounts[tag] ?? 0, view.state.value === tag) : tag,
+          /* @__PURE__ */ jsxs7("span", { children: [
+            " (",
+            view.state.tagCounts[tag] ?? 0,
+            ")"
+          ] })
+        ]
+      },
+      tag
+    ))
   ] });
   return renderRoot(
     asChild,
@@ -2103,17 +2761,88 @@ function KeepTagFilter({
       ...rootProps,
       className,
       "data-keepkit": "tag-filter",
-      "data-state": resolvedValue === void 0 ? "all" : "filtered",
-      "data-loading": list.isLoading ? "true" : void 0
+      "data-state": view.state.value === void 0 ? "all" : "filtered",
+      "data-loading": view.isLoading ? "true" : void 0
     },
     body,
     "KeepTagFilter"
   );
 }
 
+// src/hooks/useQueryControls.ts
+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;
+  useEffect3(() => {
+    if (!onValueChange) return;
+    if (debounceMs <= 0) {
+      onValueChange(value);
+      return;
+    }
+    const timer = window.setTimeout(() => onValueChange(value), debounceMs);
+    return () => window.clearTimeout(timer);
+  }, [debounceMs, onValueChange, value]);
+  return {
+    value,
+    label: useUiLabel("search"),
+    change: (event) => {
+      if (controlledValue === void 0) setUncontrolledValue(event.currentTarget.value);
+    }
+  };
+}
+function useKeepSortSelect(options) {
+  const { controlledValue, defaultValue, onValueChange } = options;
+  const [uncontrolledValue, setUncontrolledValue] = useState6(defaultValue);
+  const value = controlledValue ?? uncontrolledValue;
+  return {
+    value,
+    change: (event) => {
+      const nextValue = event.currentTarget.value;
+      if (controlledValue === void 0) setUncontrolledValue(nextValue);
+      const [by, direction] = nextValue.split(":");
+      onValueChange?.(nextValue, { by, direction });
+    },
+    labels: {
+      sort: useUiLabel("sort"),
+      updatedNewest: useUiLabel("updatedNewest"),
+      updatedOldest: useUiLabel("updatedOldest"),
+      savedNewest: useUiLabel("savedNewest"),
+      savedOldest: useUiLabel("savedOldest")
+    }
+  };
+}
+function useKeepPagination(options) {
+  const { totalCount, pageSize, page, maxPageButtons, onPageChange } = options;
+  const pageCount = Math.max(1, Math.ceil(totalCount / Math.max(1, pageSize)));
+  const currentPage = Math.min(Math.max(1, page), pageCount);
+  const goToPage = (nextPage) => {
+    const next = Math.min(Math.max(1, nextPage), pageCount);
+    onPageChange?.(next, (next - 1) * pageSize);
+  };
+  return {
+    pageCount,
+    currentPage,
+    goToPage,
+    visiblePages: getVisiblePages(currentPage, pageCount, Math.max(1, maxPageButtons)),
+    labels: {
+      previous: useUiLabel("previousPage"),
+      next: useUiLabel("nextPage"),
+      page: useUiLabel("page"),
+      pagination: useUiLabel("pagination")
+    }
+  };
+}
+function getVisiblePages(currentPage, pageCount, maxPageButtons) {
+  if (pageCount <= maxPageButtons) return Array.from({ length: pageCount }, (_, index) => index + 1);
+  const half = Math.floor(maxPageButtons / 2);
+  const start = Math.min(Math.max(1, currentPage - half), pageCount - maxPageButtons + 1);
+  return Array.from({ length: maxPageButtons }, (_, index) => start + index);
+}
+
 // src/query-controls.tsx
-import { useEffect, useState as useState5 } from "react";
-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 = "",
@@ -2123,33 +2852,20 @@ function KeepSearchInput({
   placeholder,
   ...props
 }) {
-  const label = useUiLabel("search");
-  const [uncontrolledValue, setUncontrolledValue] = useState5(defaultValue);
-  const value = controlledValue ?? uncontrolledValue;
-  useEffect(() => {
-    if (!onValueChange) return;
-    if (debounceMs <= 0) {
-      onValueChange(value);
-      return;
-    }
-    const timer = window.setTimeout(() => onValueChange(value), debounceMs);
-    return () => window.clearTimeout(timer);
-  }, [debounceMs, onValueChange, value]);
+  const view = useKeepSearchInput({ controlledValue, defaultValue, debounceMs, onValueChange });
   return /* @__PURE__ */ jsx12(
     "input",
     {
       ...props,
       "data-keepkit": "search-input",
+      "data-keep-action": "search",
       type: "search",
-      value,
-      "data-state": value ? "active" : "idle",
+      value: view.value,
+      "data-state": view.value ? "active" : "idle",
       "data-disabled": props.disabled ? "true" : void 0,
-      "aria-label": ariaLabel ?? label,
-      placeholder: placeholder ?? label,
-      onChange: (event) => {
-        const nextValue = event.currentTarget.value;
-        if (controlledValue === void 0) setUncontrolledValue(nextValue);
-      }
+      "aria-label": ariaLabel ?? view.label,
+      placeholder: placeholder ?? view.label,
+      onChange: view.change
     }
   );
 }
@@ -2161,34 +2877,24 @@ function KeepSortSelect({
   children,
   ...props
 }) {
-  const label = useUiLabel("sort");
-  const updatedNewestLabel = useUiLabel("updatedNewest");
-  const updatedOldestLabel = useUiLabel("updatedOldest");
-  const savedNewestLabel = useUiLabel("savedNewest");
-  const savedOldestLabel = useUiLabel("savedOldest");
-  const [uncontrolledValue, setUncontrolledValue] = useState5(defaultValue);
-  const value = controlledValue ?? uncontrolledValue;
-  const options = children ?? /* @__PURE__ */ jsxs7(Fragment4, { children: [
-    /* @__PURE__ */ jsx12("option", { value: "updatedAt:desc", children: updatedNewestLabel }),
-    /* @__PURE__ */ jsx12("option", { value: "updatedAt:asc", children: updatedOldestLabel }),
-    /* @__PURE__ */ jsx12("option", { value: "savedAt:desc", children: savedNewestLabel }),
-    /* @__PURE__ */ jsx12("option", { value: "savedAt:asc", children: savedOldestLabel })
+  const view = useKeepSortSelect({ controlledValue, defaultValue, onValueChange });
+  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 }),
+    /* @__PURE__ */ jsx12("option", { value: "savedAt:asc", children: view.labels.savedOldest })
   ] });
   return /* @__PURE__ */ jsx12(
     "select",
     {
       ...props,
       "data-keepkit": "sort-select",
-      value,
+      "data-keep-action": "sort",
+      value: view.value,
       "data-state": "selected",
       "data-disabled": props.disabled ? "true" : void 0,
-      "aria-label": ariaLabel ?? label,
-      onChange: (event) => {
-        const nextValue = event.currentTarget.value;
-        if (controlledValue === void 0) setUncontrolledValue(nextValue);
-        const [by, direction] = nextValue.split(":");
-        onValueChange?.(nextValue, { by, direction });
-      },
+      "aria-label": ariaLabel ?? view.labels.sort,
+      onChange: view.change,
       children: options
     }
   );
@@ -2202,131 +2908,53 @@ function KeepPagination({
   render,
   ...props
 }) {
-  const previousPageLabel = useUiLabel("previousPage");
-  const nextPageLabel = useUiLabel("nextPage");
-  const pageLabel = useUiLabel("page");
-  const paginationLabel = useUiLabel("pagination");
-  const pageCount = Math.max(1, Math.ceil(totalCount / Math.max(1, pageSize)));
-  const currentPage = Math.min(Math.max(1, page), pageCount);
-  const goToPage = (nextPage) => {
-    const next = Math.min(Math.max(1, nextPage), pageCount);
-    onPageChange?.(next, (next - 1) * pageSize);
-  };
+  const view = useKeepPagination({ totalCount, pageSize, page, maxPageButtons, onPageChange });
   const navProps = {
     ...props,
     "data-keepkit": "pagination",
-    "aria-label": props["aria-label"] ?? paginationLabel,
-    "data-state": pageCount > 1 ? "active" : "idle"
+    "aria-label": props["aria-label"] ?? view.labels.pagination,
+    "data-state": view.pageCount > 1 ? "active" : "idle"
   };
-  if (render) return /* @__PURE__ */ jsx12("nav", { ...navProps, children: render({ page: currentPage, pageCount, goToPage }) });
-  const visiblePages = getVisiblePages(currentPage, pageCount, Math.max(1, maxPageButtons));
-  return /* @__PURE__ */ jsxs7("nav", { ...navProps, children: [
-    /* @__PURE__ */ jsx12("button", { type: "button", onClick: () => goToPage(currentPage - 1), disabled: currentPage <= 1, children: previousPageLabel }),
-    visiblePages.map((nextPage) => /* @__PURE__ */ jsx12(
+  if (render)
+    return /* @__PURE__ */ jsx12("nav", { ...navProps, children: render({ page: view.currentPage, pageCount: view.pageCount, goToPage: view.goToPage }) });
+  return /* @__PURE__ */ jsxs8("nav", { ...navProps, children: [
+    /* @__PURE__ */ jsx12(
+      "button",
+      {
+        type: "button",
+        "data-keep-action": "previous-page",
+        onClick: () => view.goToPage(view.currentPage - 1),
+        disabled: view.currentPage <= 1,
+        children: view.labels.previous
+      }
+    ),
+    view.visiblePages.map((nextPage) => /* @__PURE__ */ jsx12(
       "button",
       {
         type: "button",
-        "aria-current": nextPage === currentPage ? "page" : void 0,
-        "aria-label": `${pageLabel} ${nextPage}`,
-        onClick: () => goToPage(nextPage),
+        "data-keep-action": "select-page",
+        "aria-current": nextPage === view.currentPage ? "page" : void 0,
+        "aria-label": `${view.labels.page} ${nextPage}`,
+        onClick: () => view.goToPage(nextPage),
         children: nextPage
       },
       nextPage
     )),
-    /* @__PURE__ */ jsx12("button", { type: "button", onClick: () => goToPage(currentPage + 1), disabled: currentPage >= pageCount, children: nextPageLabel })
+    /* @__PURE__ */ jsx12(
+      "button",
+      {
+        type: "button",
+        "data-keep-action": "next-page",
+        onClick: () => view.goToPage(view.currentPage + 1),
+        disabled: view.currentPage >= view.pageCount,
+        children: view.labels.next
+      }
+    )
   ] });
 }
-function getVisiblePages(currentPage, pageCount, maxPageButtons) {
-  if (pageCount <= maxPageButtons) return Array.from({ length: pageCount }, (_, index) => index + 1);
-  const half = Math.floor(maxPageButtons / 2);
-  const start = Math.min(Math.max(1, currentPage - half), pageCount - maxPageButtons + 1);
-  return Array.from({ length: maxPageButtons }, (_, index) => start + index);
-}
-
-// src/url-sync.tsx
-import {
-  DEFAULT_KEEP_URL_PARAMS,
-  decodeKeepListQuery,
-  encodeKeepListQuery
-} from "@keepkit/core/core";
-import { useEffect as useEffect2, useRef as useRef2 } from "react";
-function createNextPagesRouterAdapter(router) {
-  const getUrl = () => router.asPath ?? (typeof window === "undefined" ? "/" : window.location.href);
-  return {
-    getUrl,
-    subscribe: router.events ? (listener) => {
-      router.events?.on("routeChangeComplete", listener);
-      return () => router.events?.off("routeChangeComplete", listener);
-    } : void 0,
-    navigate: (url, mode) => {
-      void router[mode](url, void 0, { shallow: true });
-    }
-  };
-}
-function useKeepUrlSync({
-  enabled = true,
-  query,
-  onQueryChange,
-  options = {},
-  adapter: providedAdapter
-}) {
-  const browserAdapterRef = useRef2(getBrowserAdapter());
-  const adapter = providedAdapter ?? browserAdapterRef.current;
-  const onQueryChangeRef = useRef2(onQueryChange);
-  onQueryChangeRef.current = onQueryChange;
-  const skipWriteRef = useRef2(true);
-  const params = options.params;
-  useEffect2(() => {
-    if (!enabled) return;
-    const read = () => {
-      const url = adapter.getUrl();
-      const decoded = decodeKeepListQuery(url, { params });
-      skipWriteRef.current = true;
-      onQueryChangeRef.current((previousQuery) => ({
-        ...previousQuery,
-        ...decoded.search ? { search: decoded.search } : { search: void 0 },
-        ...decoded.tags ? { tags: decoded.tags } : { tags: void 0 },
-        ...decoded.sort ? { sort: decoded.sort } : {},
-        ...decoded.pagination ? { pagination: { ...previousQuery.pagination, ...decoded.pagination } } : {}
-      }));
-    };
-    read();
-    return adapter.subscribe?.(read);
-  }, [adapter, enabled, params]);
-  useEffect2(() => {
-    if (!enabled) return;
-    if (skipWriteRef.current) {
-      skipWriteRef.current = false;
-      return;
-    }
-    const currentUrl = new URL(adapter.getUrl(), "http://keepkit.invalid");
-    const urlParams = { ...DEFAULT_KEEP_URL_PARAMS, ...params };
-    for (const key of Object.values(urlParams)) currentUrl.searchParams.delete(key);
-    const nextParams = encodeKeepListQuery(query, { params });
-    nextParams.forEach((value, key) => {
-      currentUrl.searchParams.append(key, value);
-    });
-    const nextUrl = `${currentUrl.pathname}${currentUrl.search}${currentUrl.hash}`;
-    adapter.navigate(nextUrl, options.history ?? "push");
-  }, [adapter, enabled, options.history, params, query]);
-}
-function getBrowserAdapter() {
-  return {
-    getUrl: () => typeof window === "undefined" ? "/" : window.location.href,
-    subscribe: (listener) => {
-      if (typeof window === "undefined") return () => void 0;
-      window.addEventListener("popstate", listener);
-      return () => window.removeEventListener("popstate", listener);
-    },
-    navigate: (url, mode) => {
-      if (typeof window === "undefined") return;
-      window.history[mode === "push" ? "pushState" : "replaceState"]({}, "", url);
-    }
-  };
-}
 
 // 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 });
@@ -2343,114 +2971,54 @@ function KeepCollectionContent({
   renderItem,
   itemCardProps,
   loading,
+  renderLoading,
+  loadingCount,
   empty,
   error,
   className,
   ...rootProps
 }) {
-  const enabled = {
-    search: true,
-    sort: true,
-    pagination: true,
-    tagFilter: false,
-    bulkActions: false,
-    ...features
-  };
-  const [searchValue, setSearchValue] = useState6(query.search?.query ?? "");
-  const [sort, setSort] = useState6(query.sort ?? { by: "updatedAt", direction: "desc" });
-  const [tag, setTag] = useState6(query.tags?.[0]);
-  const [page, setPage] = useState6(query.pagination?.page ?? 1);
-  const resolvedPageSize = query.pagination?.pageSize ?? pageSize;
-  const resolvedQuery = useMemo3(
-    () => ({
-      ...query,
-      search: enabled.search ? { ...query.search, query: searchValue } : query.search,
-      sort: enabled.sort ? sort : query.sort,
-      tags: tag ? [.../* @__PURE__ */ new Set([...query.tags ?? [], tag])] : query.tags,
-      pagination: enabled.pagination ? { ...query.pagination, page, pageSize: resolvedPageSize } : query.pagination
-    }),
-    [enabled.pagination, enabled.search, enabled.sort, page, query, resolvedPageSize, searchValue, sort, tag]
-  );
-  useKeepUrlSync({
-    enabled: Boolean(urlSync),
-    query: resolvedQuery,
-    onQueryChange: (nextOrUpdater) => {
-      const next = typeof nextOrUpdater === "function" ? nextOrUpdater(resolvedQuery) : nextOrUpdater;
-      setSearchValue(next.search?.query ?? "");
-      setSort(next.sort ?? { by: "updatedAt", direction: "desc" });
-      setTag(next.tags?.[0]);
-      setPage(next.pagination?.page ?? 1);
-    },
-    options: typeof urlSync === "object" ? urlSync : {},
-    adapter: urlAdapter
-  });
-  const list = useKeepList4(resolvedQuery);
-  return /* @__PURE__ */ jsxs8(
+  const view = useKeepCollection({ query, pageSize, urlSync, urlAdapter, features });
+  return /* @__PURE__ */ jsxs9(
     "section",
     {
       ...rootProps,
       className,
       "data-keepkit": "collection",
       "data-layout": layout,
-      "aria-busy": list.isLoading || list.isMutating || rootProps["aria-busy"],
-      "data-state": getCollectionState(list),
-      "data-loading": list.isLoading || list.isMutating ? "true" : void 0,
+      "aria-busy": view.list.isLoading || view.list.isMutating || rootProps["aria-busy"],
+      "data-state": getCollectionState(view.list),
+      "data-loading": view.list.isLoading || view.list.isMutating ? "true" : void 0,
       children: [
-        /* @__PURE__ */ jsxs8("div", { children: [
-          enabled.search ? /* @__PURE__ */ jsx13(
-            KeepSearchInput,
-            {
-              value: searchValue,
-              onValueChange: (value) => {
-                setSearchValue(value);
-                setPage(1);
-              }
-            }
-          ) : null,
-          enabled.sort ? /* @__PURE__ */ jsx13(
-            KeepSortSelect,
-            {
-              value: sortToValue(sort),
-              onValueChange: (_value, nextSort) => {
-                setSort(nextSort);
-                setPage(1);
-              }
-            }
-          ) : null,
-          enabled.tagFilter ? /* @__PURE__ */ jsx13(
-            KeepTagFilter,
-            {
-              query,
-              value: tag,
-              onValueChange: (value) => {
-                setTag(value);
-                setPage(1);
-              }
-            }
-          ) : null
+        /* @__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
         ] }),
         /* @__PURE__ */ jsx13(
           KeepList,
           {
-            query: resolvedQuery,
+            query: view.resolvedQuery,
             renderItem,
             itemCardProps,
             layout,
             loading,
+            renderLoading,
+            loadingCount,
             empty,
             error
           }
         ),
-        enabled.pagination ? /* @__PURE__ */ jsx13(
+        view.enabled.pagination ? /* @__PURE__ */ jsx13(
           KeepPagination,
           {
-            totalCount: list.totalCount,
-            pageSize: resolvedPageSize,
-            page: list.page,
-            onPageChange: (nextPage) => setPage(nextPage)
+            totalCount: view.list.totalCount,
+            pageSize: view.resolvedPageSize,
+            page: view.list.page,
+            onPageChange: view.setPage
           }
         ) : null,
-        enabled.bulkActions ? /* @__PURE__ */ jsx13(KeepBulkActions, { query: resolvedQuery }) : null
+        view.enabled.bulkActions ? /* @__PURE__ */ jsx13(KeepBulkActions, { query: view.resolvedQuery }) : null
       ]
     }
   );
@@ -2469,52 +3037,31 @@ function KeepLayout({ layout = "list", children, ...props }) {
 }
 
 // src/KeepNoteEditor.tsx
-import { useKeepItem as useKeepItem3 } from "@keepkit/core/react";
-import {
-  isValidElement as isValidElement5,
-  useCallback as useCallback2,
-  useEffect as useEffect3,
-  useRef as useRef3,
-  useState as useState7
-} from "react";
-import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
-function KeepNoteEditor({
-  item,
-  label,
-  saveLabel,
-  placeholder,
-  debounceMs = 300,
-  onSaved,
-  onSaveError,
-  render,
-  children,
-  asChild = false,
-  className,
-  ...formProps
-}) {
-  const defaultLabel = useUiLabel("note");
-  const defaultSaveLabel = useUiLabel("saveNote");
-  const errorLabel = useUiLabel("error");
+import { isValidElement as isValidElement5 } from "react";
+
+// src/hooks/useKeepNoteEditor.ts
+import { useKeepItem as useKeepItem3 } from "@keepkit/core/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 contentChildren = asChild && isValidElement5(children) ? void 0 : children;
   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);
       lastSavedNoteRef.current = note;
       onSaved?.(nextNote);
-    } catch (error2) {
-      onSaveError?.(error2);
-      throw error2;
+    } catch (cause) {
+      onSaveError?.(cause);
+      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);
@@ -2528,46 +3075,77 @@ function KeepNoteEditor({
     error,
     save
   };
-  const body = render ? render(state) : typeof contentChildren === "function" ? contentChildren(state) : contentChildren ?? /* @__PURE__ */ jsxs9(Fragment5, { children: [
-    /* @__PURE__ */ jsxs9("label", { children: [
-      label ?? defaultLabel,
+  const submit = (event) => {
+    event.preventDefault();
+    void save().catch(() => void 0);
+  };
+  return {
+    state,
+    submit,
+    handleKeyDown: (event) => {
+      if (event.key !== "Enter" || !event.ctrlKey && !event.metaKey) return;
+      event.preventDefault();
+      void save().catch(() => void 0);
+    },
+    labels: {
+      note: useUiLabel("note"),
+      save: useUiLabel("saveNote"),
+      error: useUiLabel("error")
+    }
+  };
+}
+
+// src/KeepNoteEditor.tsx
+import { Fragment as Fragment6, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+function KeepNoteEditor({
+  item,
+  label,
+  saveLabel,
+  placeholder,
+  debounceMs = 300,
+  onSaved,
+  onSaveError,
+  render,
+  children,
+  asChild = false,
+  className,
+  ...formProps
+}) {
+  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__ */ jsxs10(Fragment6, { children: [
+    /* @__PURE__ */ jsxs10("label", { children: [
+      label ?? view.labels.note,
       /* @__PURE__ */ jsx15(
         "textarea",
         {
+          "data-keep-action": "edit-note",
           value: note,
           onChange: (event) => setNote(event.currentTarget.value),
           placeholder,
-          disabled: isMutating,
-          onKeyDown: (event) => {
-            if (event.key === "Enter" && (event.ctrlKey || event.metaKey)) {
-              event.preventDefault();
-              void save().catch(() => void 0);
-            }
-          }
+          disabled: isSaving,
+          onKeyDown: view.handleKeyDown
         }
       )
     ] }),
-    /* @__PURE__ */ jsx15("button", { type: "submit", disabled: isMutating, "aria-busy": isMutating, children: saveLabel ?? defaultSaveLabel })
+    /* @__PURE__ */ jsx15("button", { type: "submit", "data-keep-action": "save-note", disabled: isSaving, "aria-busy": isSaving, children: saveLabel ?? view.labels.save })
   ] });
-  const handleSubmit = (event) => {
-    event.preventDefault();
-    void save().catch(() => void 0);
-  };
   if (!asChild) {
-    return /* @__PURE__ */ jsxs9(
+    return /* @__PURE__ */ jsxs10(
       "form",
       {
         ...formProps,
         className,
         "data-keepkit": "note-editor",
-        onSubmit: handleSubmit,
-        "aria-busy": isMutating || formProps["aria-busy"],
+        onSubmit: view.submit,
+        "aria-busy": isSaving || formProps["aria-busy"],
         "data-state": error ? "error" : isDirty ? "dirty" : "clean",
-        "data-loading": isMutating ? "true" : void 0,
-        "data-disabled": isMutating ? "true" : void 0,
+        "data-loading": isSaving ? "true" : void 0,
+        "data-disabled": isSaving ? "true" : void 0,
         children: [
           body,
-          error ? /* @__PURE__ */ jsx15("p", { role: "alert", children: getErrorMessage3(error, errorLabel) }) : null
+          error ? /* @__PURE__ */ jsx15("p", { role: "alert", children: getErrorMessage3(error, view.labels.error) }) : null
         ]
       }
     );
@@ -2579,11 +3157,11 @@ function KeepNoteEditor({
       ...formProps,
       className,
       "data-keepkit": "note-editor",
-      onSubmit: handleSubmit,
-      "aria-busy": isMutating || formProps["aria-busy"],
+      onSubmit: view.submit,
+      "aria-busy": isSaving || formProps["aria-busy"],
       "data-state": error ? "error" : isDirty ? "dirty" : "clean",
-      "data-loading": isMutating ? "true" : void 0,
-      "data-disabled": isMutating ? "true" : void 0
+      "data-loading": isSaving ? "true" : void 0,
+      "data-disabled": isSaving ? "true" : void 0
     },
     body,
     "KeepNoteEditor"
@@ -2593,10 +3171,91 @@ function getErrorMessage3(error, fallback) {
   return error instanceof Error ? error.message : fallback;
 }
 
-// src/KeepSyncRecoveryDialog.tsx
+// src/hooks/useKeepSyncFeedback.ts
 import { useKeepContext as useKeepContext3 } from "@keepkit/core/react";
-import { useEffect as useEffect4, useState as useState8 } from "react";
-import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+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 = 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();
+  useEffect6(() => {
+    if (hasRecovery) setDismissed(false);
+  }, [hasRecovery]);
+  return {
+    conflictList,
+    isOpen: open ?? (hasRecovery && !dismissed),
+    busyId,
+    error,
+    showBackupRecovery: context.syncState.status === "error" || Boolean(context.error),
+    close: () => {
+      setDismissed(true);
+      onOpenChange?.(false);
+    },
+    resolve: async (conflict, resolution) => {
+      setError(void 0);
+      setBusyId(conflict.id);
+      try {
+        const merged = resolution === "manual" ? await onManualMerge?.(conflict) : void 0;
+        if (resolution === "manual" && !merged) throw new Error("A manual merge result is required.");
+        await context.resolveSyncConflict(conflict.id, resolution, merged);
+      } catch (cause) {
+        setError(cause);
+      } finally {
+        setBusyId(void 0);
+      }
+    },
+    labels: {
+      close: useUiLabel("close"),
+      title: useUiLabel("resolveSync"),
+      conflict: useUiLabel("syncConflict"),
+      keepLocal: useUiLabel("keepLocal"),
+      useServer: useUiLabel("useServer"),
+      manualMerge: useUiLabel("manualMerge"),
+      localVersion: useUiLabel("localVersion"),
+      remoteVersion: useUiLabel("remoteVersion"),
+      updatedAt: useUiLabel("updatedAt"),
+      note: useUiLabel("note"),
+      backupRecovery: useUiLabel("backupRecovery"),
+      backupRecoveryDescription: useUiLabel("backupRecoveryDescription"),
+      error: useUiLabel("error")
+    }
+  };
+}
+
+// src/KeepSyncRecoveryDialog.tsx
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 function KeepSyncRecoveryDialog({
   open,
   onOpenChange,
@@ -2609,49 +3268,9 @@ function KeepSyncRecoveryDialog({
   className,
   ...props
 }) {
-  const context = useKeepContext3();
-  const closeLabel = useUiLabel("close");
-  const defaultDialogTitle = useUiLabel("resolveSync");
-  const dialogTitle = title ?? defaultDialogTitle;
-  const conflictLabel = useUiLabel("syncConflict");
-  const keepLocalLabel = useUiLabel("keepLocal");
-  const useServerLabel = useUiLabel("useServer");
-  const manualMergeLabel = useUiLabel("manualMerge");
-  const localVersionLabel = useUiLabel("localVersion");
-  const remoteVersionLabel = useUiLabel("remoteVersion");
-  const updatedAtLabel = useUiLabel("updatedAt");
-  const noteLabel = useUiLabel("note");
-  const backupRecoveryLabel = useUiLabel("backupRecovery");
-  const backupRecoveryDescription = useUiLabel("backupRecoveryDescription");
-  const errorLabel = useUiLabel("error");
-  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(() => {
-    if (hasRecovery) setDismissed(false);
-  }, [hasRecovery]);
-  const isOpen = open ?? (hasRecovery && !dismissed);
-  if (!isOpen) return null;
-  const close = () => {
-    setDismissed(true);
-    onOpenChange?.(false);
-  };
-  async function resolve(conflict, resolution) {
-    setError(void 0);
-    setBusyId(conflict.id);
-    try {
-      const merged = resolution === "manual" ? await onManualMerge?.(conflict) : void 0;
-      if (resolution === "manual" && !merged) throw new Error("A manual merge result is required.");
-      await context.resolveSyncConflict(conflict.id, resolution, merged);
-    } catch (cause) {
-      setError(cause);
-    } finally {
-      setBusyId(void 0);
-    }
-  }
-  return /* @__PURE__ */ jsxs10(
+  const view = useKeepSyncRecoveryDialog({ open, onOpenChange, conflicts, onManualMerge });
+  if (!view.isOpen) return null;
+  return /* @__PURE__ */ jsxs11(
     "section",
     {
       ...props,
@@ -2659,29 +3278,29 @@ function KeepSyncRecoveryDialog({
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": "keepkit-sync-recovery-title",
-      "aria-describedby": error ? "keepkit-sync-recovery-error" : void 0,
-      "aria-busy": busyId !== void 0,
+      "aria-describedby": view.error ? "keepkit-sync-recovery-error" : void 0,
+      "aria-busy": view.busyId !== void 0,
       "data-keepkit": "sync-recovery",
-      "data-state": conflictList.length > 0 ? "conflict" : "error",
-      "data-loading": busyId !== void 0 ? "true" : void 0,
+      "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: dialogTitle }),
-          /* @__PURE__ */ jsx16("button", { type: "button", onClick: close, "aria-label": closeLabel, children: closeLabel })
+        /* @__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,
-        conflictList.length > 0 ? /* @__PURE__ */ jsxs10("div", { children: [
-          /* @__PURE__ */ jsx16("p", { children: conflictLabel }),
-          conflictList.map((conflict) => /* @__PURE__ */ jsxs10("article", { "data-conflict-id": conflict.id, children: [
+        view.conflictList.length > 0 ? /* @__PURE__ */ jsxs11("div", { children: [
+          /* @__PURE__ */ jsx16("p", { children: view.labels.conflict }),
+          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,
                 {
                   item: conflict.operation.item,
-                  heading: localVersionLabel,
-                  updatedAtLabel,
-                  noteLabel,
+                  heading: view.labels.localVersion,
+                  updatedAtLabel: view.labels.updatedAt,
+                  noteLabel: view.labels.note,
                   side: "local"
                 }
               ),
@@ -2689,34 +3308,53 @@ function KeepSyncRecoveryDialog({
                 ConflictPreview,
                 {
                   item: conflict.remote,
-                  heading: remoteVersionLabel,
-                  updatedAtLabel,
-                  noteLabel,
+                  heading: view.labels.remoteVersion,
+                  updatedAtLabel: view.labels.updatedAt,
+                  noteLabel: view.labels.note,
                   side: "remote"
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs10("div", { children: [
-              /* @__PURE__ */ jsx16("button", { type: "button", onClick: () => void resolve(conflict, "local"), disabled: busyId !== void 0, children: keepLocalLabel }),
-              /* @__PURE__ */ jsx16("button", { type: "button", onClick: () => void resolve(conflict, "remote"), disabled: busyId !== void 0, children: useServerLabel }),
+            /* @__PURE__ */ jsxs11("div", { children: [
+              /* @__PURE__ */ jsx16(
+                "button",
+                {
+                  type: "button",
+                  "data-keep-action": "keep-local",
+                  onClick: () => void view.resolve(conflict, "local"),
+                  disabled: view.busyId !== void 0,
+                  children: view.labels.keepLocal
+                }
+              ),
               /* @__PURE__ */ jsx16(
                 "button",
                 {
                   type: "button",
-                  onClick: () => void resolve(conflict, "manual"),
-                  disabled: busyId !== void 0 || !onManualMerge,
-                  children: manualMergeLabel
+                  "data-keep-action": "use-server",
+                  onClick: () => void view.resolve(conflict, "remote"),
+                  disabled: view.busyId !== void 0,
+                  children: view.labels.useServer
+                }
+              ),
+              /* @__PURE__ */ jsx16(
+                "button",
+                {
+                  type: "button",
+                  "data-keep-action": "manual-merge",
+                  onClick: () => void view.resolve(conflict, "manual"),
+                  disabled: view.busyId !== void 0 || !onManualMerge,
+                  children: view.labels.manualMerge
                 }
               )
             ] })
           ] }, conflict.id))
         ] }) : null,
-        context.syncState.status === "error" || context.error ? /* @__PURE__ */ jsxs10("section", { "data-recovery": "backup", children: [
-          /* @__PURE__ */ jsx16("h3", { children: backupRecoveryLabel }),
-          /* @__PURE__ */ jsx16("p", { children: backupRecoveryDescription }),
+        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)
         ] }) : null,
-        error ? /* @__PURE__ */ jsx16("p", { id: "keepkit-sync-recovery-error", role: "alert", "aria-live": "assertive", children: error instanceof Error ? error.message : errorLabel }) : 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
       ]
     }
   );
@@ -2728,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" })
       ] })
@@ -2746,17 +3384,10 @@ function formatConflictDate(timestamp) {
   return new Date(timestamp).toISOString().slice(0, 10);
 }
 
-// src/KeepSyncStatusBanner.tsx
-import { useKeepContext as useKeepContext4 } from "@keepkit/core/react";
-import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
-function KeepSyncStatusBanner({
-  onRetry,
-  onResolveConflicts,
-  children,
-  className,
-  ...props
-}) {
-  const context = useKeepContext4();
+// src/hooks/useKeepSyncStatusBanner.ts
+import { useKeepContext as useKeepContext5 } from "@keepkit/core/react";
+function useKeepSyncStatusBanner({ onRetry, children }) {
+  const context = useKeepContext5();
   const retryLabel = useUiLabel("retrySync");
   const resolveLabel = useUiLabel("resolveSync");
   const conflictLabel = useUiLabel("syncConflict");
@@ -2764,117 +3395,175 @@ function KeepSyncStatusBanner({
   const syncedLabel = useUiLabel("syncSynced");
   const status = context.syncState.status;
   const hasConflicts = (context.syncState.conflicts?.length ?? 0) > 0 || context.syncState.conflictIds.length > 0;
-  if (status === "idle" && !hasConflicts) return null;
   const message = children ?? (status === "error" ? getErrorMessage4(context.syncState.error) : status === "conflict" || hasConflicts ? conflictLabel : status === "pending" || status === "syncing" ? pendingLabel : syncedLabel);
-  const role = status === "error" || status === "conflict" || hasConflicts ? "alert" : "status";
-  const retry = async () => {
-    if (onRetry) {
-      await onRetry();
-      return;
+  return {
+    status,
+    hasConflicts,
+    message,
+    isMutating: context.isMutating,
+    role: status === "error" || status === "conflict" || hasConflicts ? "alert" : "status",
+    showRetry: status === "error" || status === "pending" || status === "syncing",
+    retryLabel,
+    resolveLabel,
+    retry: async () => {
+      if (onRetry) {
+        await onRetry();
+        return;
+      }
+      await context.flushSync();
     }
-    await context.flushSync();
   };
-  return /* @__PURE__ */ jsxs11(
+}
+function getErrorMessage4(error) {
+  return error instanceof Error ? error.message : "Sync failed.";
+}
+
+// src/KeepSyncStatusBanner.tsx
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+function KeepSyncStatusBanner({
+  onRetry,
+  onResolveConflicts,
+  children,
+  className,
+  ...props
+}) {
+  const view = useKeepSyncStatusBanner({ onRetry, children });
+  if (view.status === "idle" && !view.hasConflicts) return null;
+  return /* @__PURE__ */ jsxs12(
     "aside",
     {
       ...props,
       className,
-      role: props.role ?? role,
+      role: props.role ?? view.role,
       "aria-live": props["aria-live"] ?? "polite",
       "data-keepkit": "sync-status",
-      "data-state": status,
+      "data-state": view.status,
       children: [
-        /* @__PURE__ */ jsx17("p", { children: message }),
-        status === "error" || status === "pending" || status === "syncing" ? /* @__PURE__ */ jsx17("button", { type: "button", onClick: () => void retry(), disabled: context.isMutating, children: retryLabel }) : null,
-        hasConflicts ? /* @__PURE__ */ jsx17("button", { type: "button", onClick: onResolveConflicts, disabled: !onResolveConflicts, children: resolveLabel }) : null
+        /* @__PURE__ */ jsx17("p", { children: view.message }),
+        view.showRetry ? /* @__PURE__ */ jsx17(
+          "button",
+          {
+            type: "button",
+            "data-keep-action": "retry-sync",
+            onClick: () => void view.retry(),
+            disabled: view.isMutating,
+            children: view.retryLabel
+          }
+        ) : null,
+        view.hasConflicts ? /* @__PURE__ */ jsx17(
+          "button",
+          {
+            type: "button",
+            "data-keep-action": "resolve-conflicts",
+            onClick: onResolveConflicts,
+            disabled: !onResolveConflicts,
+            children: view.resolveLabel
+          }
+        ) : null
       ]
     }
   );
 }
-function getErrorMessage4(error) {
-  return error instanceof Error ? error.message : "Sync failed.";
-}
 
-// src/KeepTagEditor.tsx
+// 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 { Fragment as Fragment6, jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
-function KeepTagEditor({
-  item,
-  availableTags = [],
-  onSaved,
-  onSaveError,
-  render,
-  ...props
-}) {
-  const tagsLabel = useUiLabel("tagsToApply");
-  const removeLabel = useUiLabel("remove");
-  const applyTagsLabel = useUiLabel("applyTags");
-  const errorLabel = useUiLabel("error");
+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);
       setTags(nextTags);
       onSaved?.(nextTags);
-    } catch (error) {
-      onSaveError?.(error);
-      throw error;
+    } catch (cause) {
+      onSaveError?.(cause);
+      throw cause;
     }
   }, [itemState, onSaveError, onSaved, tags]);
   const addTag = (tag) => {
     setTags(normalizeUiTags([...tags, tag]));
     setInput("");
   };
-  const body = render ? render({ tags, setTags, save, isSaving: itemState.isMutating }) : /* @__PURE__ */ jsxs12(Fragment6, { children: [
-    /* @__PURE__ */ jsxs12("label", { children: [
-      tagsLabel,
+  const state = { tags, setTags, save, isSaving: itemState.isMutating };
+  return {
+    state,
+    input,
+    setInput,
+    error: itemState.error,
+    handleInputKeyDown: (event) => {
+      if (event.key === "Enter") {
+        if (event.nativeEvent.isComposing) return;
+        event.preventDefault();
+        if (input.trim()) addTag(input);
+      } else if (event.key === "Backspace" && input.length === 0 && tags.length > 0) {
+        event.preventDefault();
+        setTags(tags.slice(0, -1));
+      }
+    },
+    removeTag: (tag) => setTags(tags.filter((current) => current !== tag)),
+    submit: (event) => {
+      event.preventDefault();
+      void save().catch(() => void 0);
+    },
+    labels: {
+      tags: useUiLabel("tagsToApply"),
+      remove: useUiLabel("remove"),
+      apply: useUiLabel("applyTags"),
+      error: useUiLabel("error")
+    }
+  };
+}
+
+// src/KeepTagEditor.tsx
+import { Fragment as Fragment7, jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+function KeepTagEditor({
+  item,
+  availableTags = [],
+  onSaved,
+  onSaveError,
+  render,
+  ...props
+}) {
+  const view = useKeepTagEditor({ item, onSaved, onSaveError });
+  const { isSaving, tags } = view.state;
+  const body = render ? render(view.state) : /* @__PURE__ */ jsxs13(Fragment7, { children: [
+    /* @__PURE__ */ jsxs13("label", { children: [
+      view.labels.tags,
       /* @__PURE__ */ jsx18(
         "input",
         {
-          value: input,
+          "data-keep-action": "edit-tags",
+          value: view.input,
           list: availableTags.length > 0 ? `keep-tags-${item.id}` : void 0,
-          onChange: (event) => setInput(event.currentTarget.value),
-          onKeyDown: (event) => {
-            if (event.key === "Enter") {
-              if (event.nativeEvent.isComposing) return;
-              event.preventDefault();
-              if (input.trim()) addTag(input);
-            } else if (event.key === "Backspace" && input.length === 0 && tags.length > 0) {
-              event.preventDefault();
-              setTags(tags.slice(0, -1));
-            }
-          }
+          onChange: (event) => view.setInput(event.currentTarget.value),
+          onKeyDown: view.handleInputKeyDown
         }
       )
     ] }),
     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": tagsLabel, 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", onClick: () => setTags(tags.filter((current) => current !== tag)), children: removeLabel })
+      /* @__PURE__ */ jsx18("button", { type: "button", "data-keep-action": "remove-tag", onClick: () => view.removeTag(tag), children: view.labels.remove })
     ] }, tag)) }),
-    /* @__PURE__ */ jsx18("button", { type: "submit", disabled: itemState.isMutating, "aria-busy": itemState.isMutating, children: applyTagsLabel })
+    /* @__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,
-      onSubmit: (event) => {
-        event.preventDefault();
-        void save().catch(() => void 0);
-      },
-      "aria-busy": itemState.isMutating || props["aria-busy"],
+      onSubmit: view.submit,
+      "aria-busy": isSaving || props["aria-busy"],
       "data-keepkit": "tag-editor",
-      "data-state": itemState.error ? "error" : itemState.isMutating ? "saving" : "idle",
-      "data-loading": itemState.isMutating ? "true" : void 0,
-      "data-disabled": itemState.isMutating ? "true" : void 0,
+      "data-state": view.error ? "error" : isSaving ? "saving" : "idle",
+      "data-loading": isSaving ? "true" : void 0,
+      "data-disabled": isSaving ? "true" : void 0,
       children: [
         body,
-        itemState.error ? /* @__PURE__ */ jsx18("p", { role: "alert", children: getErrorMessage5(itemState.error, errorLabel) }) : null
+        view.error ? /* @__PURE__ */ jsx18("p", { role: "alert", children: getErrorMessage5(view.error, view.labels.error) }) : null
       ]
     }
   );
@@ -2883,24 +3572,93 @@ function getErrorMessage5(error, fallback) {
   return error instanceof Error ? error.message : fallback;
 }
 
+// src/hooks/useKeepUndo.ts
+import { useKeepContext as useKeepContext6 } from "@keepkit/core/react";
+function useKeepUndo() {
+  const context = useKeepContext6();
+  const emitFeedback = useKeepUiFeedback();
+  const restoredMessage = useUiLabel("restoredMessage");
+  return {
+    canUndo: context.undo.canUndo,
+    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 { useKeepContext as useKeepContext5 } from "@keepkit/core/react";
-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 context = useKeepContext5();
-  const message = useUiLabel("undoAvailable");
-  const undoLabel = useUiLabel("undo");
-  if (!context.undo.canUndo) return null;
-  return /* @__PURE__ */ jsxs13("div", { ...props, role: "status", "aria-live": "polite", "data-keepkit": "undo", "data-state": "available", children: [
-    children ?? message,
-    /* @__PURE__ */ jsx19("button", { type: "button", onClick: () => void context.undoLastRemoval(), children: label ?? undoLabel })
+  const view = useKeepUndo();
+  if (!view.canUndo) return null;
+  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 })
   ] });
 }
 
 // src/status.tsx
-import { useKeepContext as useKeepContext6 } from "@keepkit/core/react";
-import { isValidElement as isValidElement6, useEffect as useEffect6, useRef as useRef4, useState as useState10 } from "react";
-import { Fragment as Fragment7, jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+import { isValidElement as isValidElement6 } from "react";
+
+// src/hooks/useStatusViews.ts
+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 = useKeepContext7();
+  const resolvedStatus = status ?? getDerivedStatus(context);
+  const state = {
+    status: resolvedStatus,
+    error: context.error,
+    pendingCount: context.syncState.pendingCount,
+    items: context.items
+  };
+  return { state, defaultLabel: useUiLabel(getStatusLabelKey3(resolvedStatus)) };
+}
+function useKeepAnnouncements(messages) {
+  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 = useRef6(void 0);
+  useEffect8(() => {
+    const change = context.lastChange;
+    if (!change || change === lastChangeRef.current) return;
+    lastChangeRef.current = change;
+    if (change.action === "save") setMessage(savedMessage);
+    else if (change.action === "remove" || change.action === "removeBatch") setMessage(removedMessage);
+    else if (change.action === "updateNote") setMessage(noteSavedMessage);
+  }, [context.lastChange, noteSavedMessage, removedMessage, savedMessage]);
+  return message;
+}
+function getDerivedStatus(context) {
+  if (context.error) return "error";
+  if (context.syncState.status === "pending" || context.syncState.status === "syncing") return "syncing";
+  if (context.isMutating) return "saving";
+  if (context.isLoading && !context.isHydrated) return "loading";
+  if (context.isHydrated && context.items.length === 0) return "empty";
+  return "idle";
+}
+function getStatusLabelKey3(status) {
+  if (status === "empty") return "noItems";
+  if (status === "loading") return "loadingItems";
+  if (status === "error") return "error";
+  if (status === "saving") return "saving";
+  if (status === "syncing") return "syncing";
+  return "saved";
+}
+
+// src/status.tsx
+import { Fragment as Fragment8, jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
 function KeepEmptyState({
   title,
   description,
@@ -2910,9 +3668,9 @@ function KeepEmptyState({
   className,
   ...rootProps
 }) {
-  const defaultTitle = useUiLabel("noItems").replace(/\.$/, "");
+  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
@@ -2934,18 +3692,10 @@ function KeepStatus({
   className,
   ...rootProps
 }) {
-  const context = useKeepContext6();
+  const view = useKeepStatus(status);
   const contentChildren = asChild && isValidElement6(children) ? void 0 : children;
-  const resolvedStatus = status ?? getDerivedStatus(context);
-  const defaultLabel = useUiLabel(getStatusLabelKey3(resolvedStatus));
-  const state = {
-    status: resolvedStatus,
-    error: context.error,
-    pendingCount: context.syncState.pendingCount,
-    items: context.items
-  };
-  const body = render ? render(state) : typeof contentChildren === "function" ? contentChildren(state) : contentChildren ?? labels?.[resolvedStatus] ?? defaultLabel;
-  const role = rootProps.role ?? (resolvedStatus === "error" ? "alert" : "status");
+  const body = render ? render(view.state) : typeof contentChildren === "function" ? contentChildren(view.state) : contentChildren ?? labels?.[view.state.status] ?? view.defaultLabel;
+  const role = rootProps.role ?? (view.state.status === "error" ? "alert" : "status");
   return renderRoot(
     asChild,
     isValidElement6(children) ? children : void 0,
@@ -2955,28 +3705,15 @@ function KeepStatus({
       "data-keepkit": "status",
       role,
       "aria-live": rootProps["aria-live"] ?? "polite",
-      "data-state": resolvedStatus,
-      "data-loading": resolvedStatus === "loading" || resolvedStatus === "saving" || resolvedStatus === "syncing" ? "true" : void 0
+      "data-state": view.state.status,
+      "data-loading": view.state.status === "loading" || view.state.status === "saving" || view.state.status === "syncing" ? "true" : void 0
     },
     body,
     "KeepStatus"
   );
 }
 function KeepAnnouncements({ messages, ...props }) {
-  const context = useKeepContext6();
-  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 change = context.lastChange;
-    if (!change || change === lastChangeRef.current) return;
-    lastChangeRef.current = change;
-    if (change.action === "save") setMessage(savedMessage);
-    else if (change.action === "remove" || change.action === "removeBatch") setMessage(removedMessage);
-    else if (change.action === "updateNote") setMessage(noteSavedMessage);
-  }, [context.lastChange, noteSavedMessage, removedMessage, savedMessage]);
+  const message = useKeepAnnouncements(messages);
   return /* @__PURE__ */ jsx20(
     "div",
     {
@@ -2991,26 +3728,22 @@ function KeepAnnouncements({ messages, ...props }) {
   );
 }
 var KeepAnnouncer = KeepAnnouncements;
-function getDerivedStatus(context) {
-  if (context.error) return "error";
-  if (context.syncState.status === "pending" || context.syncState.status === "syncing") return "syncing";
-  if (context.isMutating) return "saving";
-  if (context.isLoading && !context.isHydrated) return "loading";
-  if (context.isHydrated && context.items.length === 0) return "empty";
-  return "idle";
-}
-function getStatusLabelKey3(status) {
-  if (status === "empty") return "noItems";
-  if (status === "loading") return "loadingItems";
-  if (status === "error") return "error";
-  if (status === "saving") return "saving";
-  if (status === "syncing") return "syncing";
-  return "saved";
-}
 
 // src/theme.tsx
 import { cloneElement as cloneElement2, isValidElement as isValidElement7 } from "react";
 import { jsx as jsx21 } from "react/jsx-runtime";
+var keepThemeNames = [
+  "default",
+  "ocean",
+  "forest",
+  "sunset",
+  "lavender",
+  "compact",
+  "minimal",
+  "rounded",
+  "high-contrast",
+  "dark"
+];
 function KeepThemeProvider({
   children,
   theme = "default",
@@ -3065,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
@@ -3080,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,
@@ -3099,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,
@@ -3113,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, {})
       ] })
@@ -3125,6 +3860,7 @@ function createKeepKit(options = {}) {
     labels,
     locale,
     labelResolver,
+    onFeedback,
     theme,
     mode,
     density,
@@ -3148,6 +3884,7 @@ function createKeepKit(options = {}) {
         labels,
         locale,
         labelResolver,
+        onFeedback,
         theme,
         mode,
         density,
@@ -3193,6 +3930,7 @@ export {
   KeepEmptyState,
   KeepErrorBoundary3 as KeepErrorBoundary,
   KeepItemCard,
+  KeepItemCardSkeleton,
   KeepItemCheckbox,
   KeepItemStatusBadge,
   KeepKitProvider,
@@ -3223,11 +3961,13 @@ export {
   createStorageAdapter,
   getKeepLocaleLabels,
   isAllSelected,
+  keepThemeNames,
   toggleSelectAll,
-  useKeepContext7 as useKeepContext,
+  useKeepContext8 as useKeepContext,
   useKeepItem5 as useKeepItem,
   useKeepList5 as useKeepList,
   useKeepShortcut,
+  useKeepToastFeedback,
   useKeepUiLabels,
   useKeepUrlSync
 };