@keepkit/ui 0.13.0 → 0.15.0

package/dist/index.js

@@ -6,7 +6,7 @@ import {
   createKeepKit as createCoreKeepKit
 } from "@keepkit/core/react";
 
-// src/KeepBackup.tsx
+// src/hooks/useKeepBackup.ts
 import { useKeepContext } from "@keepkit/core/react";
 import { useRef, useState } from "react";
 
@@ -55,6 +55,9 @@ var DE_LABELS = {
   currentPage: "Aktuelle Seite",
   searchResults: "Aktuelle Suchergebnisse",
   allItems: "Alle gespeicherten Elemente",
+  localVersion: "Lokal",
+  remoteVersion: "Server",
+  updatedAt: "Aktualisiert",
   statusAvailable: "Verf\xFCgbar",
   noteSavedMessage: "Notiz gespeichert.",
   exportData: "JSON exportieren",
@@ -128,6 +131,9 @@ var EN_LABELS = {
   currentPage: "Current page",
   searchResults: "Current search results",
   allItems: "All saved items",
+  localVersion: "Local",
+  remoteVersion: "Remote",
+  updatedAt: "Updated",
   statusAvailable: "Available",
   noteSavedMessage: "Note saved.",
   exportData: "Export JSON",
@@ -201,6 +207,9 @@ var ES_LABELS = {
   currentPage: "P\xE1gina actual",
   searchResults: "Resultados de b\xFAsqueda actuales",
   allItems: "Todos los elementos guardados",
+  localVersion: "Local",
+  remoteVersion: "Servidor",
+  updatedAt: "Actualizado",
   statusAvailable: "Disponible",
   noteSavedMessage: "Nota guardada.",
   exportData: "Exportar JSON",
@@ -274,6 +283,9 @@ var FIL_LABELS = {
   currentPage: "Kasalukuyang pahina",
   searchResults: "Kasalukuyang resulta ng paghahanap",
   allItems: "Lahat ng naka-save na item",
+  localVersion: "Lokal",
+  remoteVersion: "Remote",
+  updatedAt: "Na-update",
   statusAvailable: "Available",
   noteSavedMessage: "Na-save ang tala.",
   exportData: "I-export ang JSON",
@@ -347,6 +359,9 @@ var FR_LABELS = {
   currentPage: "Page actuelle",
   searchResults: "R\xE9sultats de recherche actuels",
   allItems: "Tous les \xE9l\xE9ments enregistr\xE9s",
+  localVersion: "Local",
+  remoteVersion: "Distant",
+  updatedAt: "Mis \xE0 jour",
   statusAvailable: "Disponible",
   noteSavedMessage: "Note enregistr\xE9e.",
   exportData: "Exporter JSON",
@@ -420,6 +435,9 @@ var ID_LABELS = {
   currentPage: "Halaman saat ini",
   searchResults: "Hasil pencarian saat ini",
   allItems: "Semua item tersimpan",
+  localVersion: "Lokal",
+  remoteVersion: "Server",
+  updatedAt: "Diperbarui",
   statusAvailable: "Tersedia",
   noteSavedMessage: "Catatan tersimpan.",
   exportData: "Ekspor JSON",
@@ -493,6 +511,9 @@ var IT_LABELS = {
   currentPage: "Pagina corrente",
   searchResults: "Risultati di ricerca correnti",
   allItems: "Tutti gli elementi salvati",
+  localVersion: "Locale",
+  remoteVersion: "Server",
+  updatedAt: "Aggiornato",
   statusAvailable: "Disponibile",
   noteSavedMessage: "Nota salvata.",
   exportData: "Esporta JSON",
@@ -566,6 +587,9 @@ var JA_LABELS = {
   currentPage: "\u8868\u793A\u4E2D\u306E\u30DA\u30FC\u30B8",
   searchResults: "\u73FE\u5728\u306E\u691C\u7D22\u7D50\u679C\u5168\u4F53",
   allItems: "\u3059\u3079\u3066\u306E\u4FDD\u5B58\u30A2\u30A4\u30C6\u30E0",
+  localVersion: "\u30ED\u30FC\u30AB\u30EB",
+  remoteVersion: "\u30EA\u30E2\u30FC\u30C8",
+  updatedAt: "\u66F4\u65B0\u65E5\u6642",
   statusAvailable: "\u5229\u7528\u53EF\u80FD",
   noteSavedMessage: "\u30E1\u30E2\u3092\u4FDD\u5B58\u3057\u307E\u3057\u305F\u3002",
   exportData: "JSON\u3092\u30A8\u30AF\u30B9\u30DD\u30FC\u30C8",
@@ -639,6 +663,9 @@ var KO_LABELS = {
   currentPage: "\uD604\uC7AC \uD398\uC774\uC9C0",
   searchResults: "\uD604\uC7AC \uAC80\uC0C9 \uACB0\uACFC \uC804\uCCB4",
   allItems: "\uBAA8\uB4E0 \uC800\uC7A5 \uD56D\uBAA9",
+  localVersion: "\uB85C\uCEEC",
+  remoteVersion: "\uC6D0\uACA9",
+  updatedAt: "\uC5C5\uB370\uC774\uD2B8 \uC2DC\uAC04",
   statusAvailable: "\uC0AC\uC6A9 \uAC00\uB2A5",
   noteSavedMessage: "\uBA54\uBAA8\uB97C \uC800\uC7A5\uD588\uC2B5\uB2C8\uB2E4.",
   exportData: "JSON \uB0B4\uBCF4\uB0B4\uAE30",
@@ -712,6 +739,9 @@ var MS_LABELS = {
   currentPage: "Halaman semasa",
   searchResults: "Hasil carian semasa",
   allItems: "Semua item yang disimpan",
+  localVersion: "Tempatan",
+  remoteVersion: "Pelayan",
+  updatedAt: "Dikemas kini",
   statusAvailable: "Tersedia",
   noteSavedMessage: "Nota disimpan.",
   exportData: "Eksport JSON",
@@ -785,6 +815,9 @@ var PT_BR_LABELS = {
   currentPage: "P\xE1gina atual",
   searchResults: "Resultados da pesquisa atual",
   allItems: "Todos os itens salvos",
+  localVersion: "Local",
+  remoteVersion: "Servidor",
+  updatedAt: "Atualizado",
   statusAvailable: "Dispon\xEDvel",
   noteSavedMessage: "Nota salva.",
   exportData: "Exportar JSON",
@@ -858,6 +891,9 @@ var RU_LABELS = {
   currentPage: "\u0422\u0435\u043A\u0443\u0449\u0430\u044F \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0430",
   searchResults: "\u0422\u0435\u043A\u0443\u0449\u0438\u0435 \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u044B \u043F\u043E\u0438\u0441\u043A\u0430",
   allItems: "\u0412\u0441\u0435 \u0441\u043E\u0445\u0440\u0430\u043D\u0451\u043D\u043D\u044B\u0435 \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u044B",
+  localVersion: "\u041B\u043E\u043A\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u0435\u0440\u0441\u0438\u044F",
+  remoteVersion: "\u0421\u0435\u0440\u0432\u0435\u0440\u043D\u0430\u044F \u0432\u0435\u0440\u0441\u0438\u044F",
+  updatedAt: "\u041E\u0431\u043D\u043E\u0432\u043B\u0435\u043D\u043E",
   statusAvailable: "\u0414\u043E\u0441\u0442\u0443\u043F\u0435\u043D",
   noteSavedMessage: "\u0417\u0430\u043C\u0435\u0442\u043A\u0430 \u0441\u043E\u0445\u0440\u0430\u043D\u0435\u043D\u0430.",
   exportData: "\u042D\u043A\u0441\u043F\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u0430\u0442\u044C JSON",
@@ -931,6 +967,9 @@ var TH_LABELS = {
   currentPage: "\u0E2B\u0E19\u0E49\u0E32\u0E1B\u0E31\u0E08\u0E08\u0E38\u0E1A\u0E31\u0E19",
   searchResults: "\u0E1C\u0E25\u0E01\u0E32\u0E23\u0E04\u0E49\u0E19\u0E2B\u0E32\u0E1B\u0E31\u0E08\u0E08\u0E38\u0E1A\u0E31\u0E19",
   allItems: "\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23\u0E17\u0E35\u0E48\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14",
+  localVersion: "\u0E43\u0E19\u0E40\u0E04\u0E23\u0E37\u0E48\u0E2D\u0E07",
+  remoteVersion: "\u0E23\u0E30\u0E22\u0E30\u0E44\u0E01\u0E25",
+  updatedAt: "\u0E2D\u0E31\u0E1B\u0E40\u0E14\u0E15\u0E40\u0E21\u0E37\u0E48\u0E2D",
   statusAvailable: "\u0E1E\u0E23\u0E49\u0E2D\u0E21\u0E43\u0E0A\u0E49\u0E07\u0E32\u0E19",
   noteSavedMessage: "\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01\u0E22\u0E48\u0E2D\u0E41\u0E25\u0E49\u0E27",
   exportData: "\u0E2A\u0E48\u0E07\u0E2D\u0E2D\u0E01 JSON",
@@ -1004,6 +1043,9 @@ var VI_LABELS = {
   currentPage: "Trang hi\u1EC7n t\u1EA1i",
   searchResults: "K\u1EBFt qu\u1EA3 t\xECm ki\u1EBFm hi\u1EC7n t\u1EA1i",
   allItems: "T\u1EA5t c\u1EA3 m\u1EE5c \u0111\xE3 l\u01B0u",
+  localVersion: "C\u1EE5c b\u1ED9",
+  remoteVersion: "M\xE1y ch\u1EE7",
+  updatedAt: "\u0110\xE3 c\u1EADp nh\u1EADt",
   statusAvailable: "Kh\u1EA3 d\u1EE5ng",
   noteSavedMessage: "\u0110\xE3 l\u01B0u ghi ch\xFA.",
   exportData: "Xu\u1EA5t JSON",
@@ -1077,6 +1119,9 @@ var ZH_HANS_LABELS = {
   currentPage: "\u5F53\u524D\u9875",
   searchResults: "\u5F53\u524D\u5168\u90E8\u641C\u7D22\u7ED3\u679C",
   allItems: "\u5168\u90E8\u5DF2\u4FDD\u5B58\u9879\u76EE",
+  localVersion: "\u672C\u5730",
+  remoteVersion: "\u8FDC\u7A0B",
+  updatedAt: "\u66F4\u65B0\u65F6\u95F4",
   statusAvailable: "\u53EF\u7528",
   noteSavedMessage: "\u5907\u6CE8\u5DF2\u4FDD\u5B58\u3002",
   exportData: "\u5BFC\u51FAJSON",
@@ -1150,6 +1195,9 @@ var ZH_HANT_LABELS = {
   currentPage: "\u76EE\u524D\u9801\u9762",
   searchResults: "\u76EE\u524D\u5168\u90E8\u641C\u5C0B\u7D50\u679C",
   allItems: "\u6240\u6709\u5DF2\u5132\u5B58\u9805\u76EE",
+  localVersion: "\u672C\u6A5F",
+  remoteVersion: "\u9060\u7AEF",
+  updatedAt: "\u66F4\u65B0\u6642\u9593",
   statusAvailable: "\u53EF\u7528",
   noteSavedMessage: "\u5099\u8A3B\u5DF2\u5132\u5B58\u3002",
   exportData: "\u532F\u51FAJSON",
@@ -1261,28 +1309,14 @@ function useUiLabel(key, override) {
   return override ?? context.customLabels?.[key] ?? context.labelResolver?.(key, { locale: context.locale }) ?? context.labels[key];
 }
 
-// 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();
@@ -1298,7 +1332,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;
@@ -1312,43 +1346,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
       ]
     }
   );
@@ -1362,48 +1446,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,
@@ -1432,11 +1484,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);
@@ -1451,42 +1502,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);
@@ -1523,54 +1562,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
       }
     )
   ] });
@@ -1579,9 +1720,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
     }
   );
@@ -1589,10 +1730,26 @@ function KeepBulkActions({
 
 // src/KeepButton.tsx
 import {
-  KeepButton as CoreKeepButton,
-  useKeepItem
+  KeepButton as CoreKeepButton
 } from "@keepkit/core/react";
 import { createElement } from "react";
+
+// src/hooks/useKeepButton.ts
+import { useKeepItem } from "@keepkit/core/react";
+function useKeepButton({ item, labels, icons, children }) {
+  return {
+    buttonState: useKeepItem(item),
+    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)
+    }
+  };
+}
+
+// src/KeepButton.tsx
 import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 function KeepButton({
   labels,
@@ -1602,16 +1759,11 @@ function KeepButton({
   iconClassName,
   ...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 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: [
@@ -1622,14 +1774,16 @@ function KeepButton({
   const sharedProps = {
     ...props,
     "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) {
@@ -1638,114 +1792,416 @@ 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 = status === "available" ? "available" : status;
-  const statusLabel = useUiLabel(getStatusLabelKey(resolvedStatus));
-  return /* @__PURE__ */ jsx7("span", { ...props, className, "data-keepkit": "status-badge", "data-status": resolvedStatus, children: label ?? statusLabel });
-}
-function getStatusLabelKey(status) {
-  switch (status) {
-    case "available":
-      return "statusAvailable";
-    case "expired":
-      return "statusExpired";
-    case "removed":
-      return "statusRemoved";
-    case "deleted":
-      return "statusDeleted";
-    case "private":
-    case "unknown":
-      return status === "private" ? "statusPrivate" : "statusUnknown";
-  }
-}
-
-// 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 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() {
-    setError(null);
-    setIsRetrying(true);
-    try {
-      if (onRetry) await onRetry(item);
-      else await context.revalidateItems();
-    } catch (cause) {
-      setError(cause);
-    } finally {
-      setIsRetrying(false);
-    }
-  }
-  async function handleRemove() {
-    try {
-      await context.removeItemWithUndo(item.id);
-      onRemoved?.(item);
-    } catch (cause) {
-      setError(cause);
+  DEFAULT_KEEP_URL_PARAMS,
+  decodeKeepListQuery,
+  encodeKeepListQuery
+} from "@keepkit/core/core";
+import { useEffect, 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 });
     }
-  }
-  return /* @__PURE__ */ jsxs4("aside", { ...props, className, "data-keepkit": "stale-notice", "data-state": error ? "error" : "stale", children: [
-    /* @__PURE__ */ jsx8(KeepItemStatusBadge, { 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 })
-    ] }),
-    error ? /* @__PURE__ */ jsx8("p", { role: "alert", children: error instanceof Error ? error.message : errorText }) : null
-  ] });
+  };
 }
-function KeepPruneStaleButton({
-  statuses = ["expired", "removed", "deleted", "private", "unknown"],
-  label,
-  onPruned,
-  children,
-  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);
-  }
+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;
+  useEffect(() => {
+    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]);
+  useEffect(() => {
+    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 {
+  isValidElement as isValidElement2
+} 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 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 state = {
+    item,
+    isSaved: itemState.isSaved,
+    isMutating: itemState.isMutating,
+    error: itemState.error,
+    remove: itemState.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: async () => {
+      try {
+        await itemState.remove();
+        onRemoved?.(item);
+      } catch (cause) {
+        onRemoveError?.(cause);
+      }
+    },
+    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 [isRetrying, setIsRetrying] = useState4(false);
+  const [error, setError] = useState4(null);
+  async function retry() {
+    setError(null);
+    setIsRetrying(true);
+    try {
+      if (onRetry) await onRetry(item);
+      else await context.revalidateItems();
+    } catch (cause) {
+      setError(cause);
+    } finally {
+      setIsRetrying(false);
+    }
+  }
+  async function remove() {
+    try {
+      await context.removeItemWithUndo(item.id);
+      onRemoved?.(item);
+    } catch (cause) {
+      setError(cause);
+    }
+  }
+  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 staleIds = context.items.filter((item) => item.status && statuses.includes(item.status)).map((item) => item.id);
+  return {
+    staleIds,
+    isMutating: context.isMutating,
+    label: useUiLabel("pruneStale"),
+    prune: async () => {
+      const ids = [...staleIds];
+      await context.removeItemsWithUndo(ids);
+      onPruned?.(ids);
+    }
+  };
+}
+
+// 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",
+          "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
+        }
+      )
+    ] }),
+    view.error ? /* @__PURE__ */ jsx8("p", { role: "alert", children: view.error instanceof Error ? view.error.message : view.labels.error }) : null
+  ] });
+}
+function KeepPruneStaleButton({
+  statuses = ["expired", "removed", "deleted", "private", "unknown"],
+  label,
+  onPruned,
+  children,
+  disabled,
+  ...props
+}) {
+  const view = useKeepPruneStale({ statuses, onPruned });
   return /* @__PURE__ */ jsx8(
     "button",
     {
@@ -1753,10 +2209,11 @@ 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})`
     }
   );
 }
@@ -1792,72 +2249,63 @@ 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 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: linkTargetAttribute,
-      rel: linkRel,
+      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);
-    }
-  }
-  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" ? renderLink(resolvedTitle) : resolvedTitle }),
+  const body = render ? render(view.state) : typeof contentChildren === "function" ? contentChildren(view.state) : contentChildren ?? /* @__PURE__ */ jsxs5(Fragment3, { children: [
+    view.imageProps ? renderImage?.({ ...view.imageProps, alt: imageAlt ?? view.imageProps.alt }, item) ?? (ImageComponent ? /* @__PURE__ */ jsx9(ImageComponent, { ...view.imageProps, alt: imageAlt ?? view.imageProps.alt }) : /* @__PURE__ */ jsx9("img", { ...view.imageProps, alt: imageAlt ?? view.imageProps.alt })) : null,
+    /* @__PURE__ */ jsx9("h3", { children: linkTarget === "title" ? view.isAvailable ? renderLink(view.resolvedTitle) : view.href ? /* @__PURE__ */ jsx9("span", { "aria-disabled": "true", "data-link-disabled": "true", children: view.resolvedTitle }) : view.resolvedTitle : view.resolvedTitle }),
     showSavedAt ? /* @__PURE__ */ jsxs5("div", { "data-card-meta": true, children: [
       /* @__PURE__ */ jsxs5("span", { children: [
-        savedAtLabel,
+        view.labels.savedAt,
         ":"
       ] }),
       " ",
       /* @__PURE__ */ jsx9("time", { dateTime: new Date(item.savedAt).toISOString(), children: formatSavedAt(item.savedAt) })
     ] }) : null,
-    showTags && (item.tags?.length ?? 0) > 0 ? renderTags ? renderTags(item.tags ?? [], item) : /* @__PURE__ */ jsx9("ul", { "aria-label": 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(
+    showTags && (item.tags?.length ?? 0) > 0 ? renderTags ? renderTags(item.tags ?? [], item) : /* @__PURE__ */ jsx9("ul", { "aria-label": view.labels.tags, children: item.tags?.map((tag) => /* @__PURE__ */ jsx9("li", { children: tag }, tag)) }) : null,
+    view.itemState.error ? /* @__PURE__ */ jsx9("p", { role: "alert", children: getErrorMessage2(view.itemState.error, view.labels.error) }) : null,
+    view.statusLabel ? /* @__PURE__ */ jsx9(KeepStaleNotice, { item, onRetry, onRemoved }) : null,
+    showSaveButton && !view.statusLabel ? /* @__PURE__ */ jsx9(
       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
+    !view.statusLabel ? /* @__PURE__ */ jsx9(
+      "button",
+      {
+        type: "button",
+        "data-keep-action": "remove-item",
+        onClick: () => void view.remove(),
+        disabled: view.itemState.isMutating,
+        children: removeLabel ?? view.labels.remove
+      }
+    ) : null
   ] });
-  const linkedBody = linkTarget === "card" ? renderLink(body) : body;
+  const linkedBody = linkTarget === "card" && view.isAvailable ? renderLink(body) : body;
   return renderRoot(
     asChild,
     isValidElement2(children) ? children : void 0,
@@ -1865,29 +2313,17 @@ function KeepItemCard({
       ...rootProps,
       className,
       "data-keepkit": "card",
-      "aria-busy": itemState.isMutating || rootProps["aria-busy"],
-      "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-loading": itemState.isMutating ? "true" : void 0
+      "data-item-status": view.displayStatus,
+      "data-loading": view.itemState.isMutating ? "true" : void 0
     },
     linkedBody,
     "KeepItemCard"
   );
 }
-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 formatSavedAt(timestamp) {
   return new Date(timestamp).toISOString().slice(0, 10);
 }
@@ -1916,16 +2352,14 @@ 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: loading ?? view.labels.loading,
+    empty: empty ?? view.labels.empty,
+    error: errorContent ?? view.labels.error,
     itemCardProps,
     layout
   });
@@ -1936,6 +2370,7 @@ function KeepListContent({
       ...rootProps,
       className,
       "data-keepkit": "list",
+      "data-layout": layout,
       "aria-busy": state.isLoading || rootProps["aria-busy"],
       "data-state": getListState(state),
       "data-loading": state.isLoading ? "true" : void 0
@@ -1956,21 +2391,45 @@ function getListBody(state, options) {
   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;
-  return /* @__PURE__ */ jsx10(
-    "ul",
-    {
-      "data-layout": options.layout,
-      style: options.layout === "grid" ? { display: "grid", gap: "1rem", gridTemplateColumns: "repeat(auto-fit, minmax(16rem, 1fr))" } : options.layout === "compact" ? { display: "grid", gap: "0.5rem", gridTemplateColumns: "repeat(auto-fit, minmax(12rem, 1fr))" } : { display: "flex", flexDirection: "column", gap: "1rem" },
-      children: state.items.map(
-        (item) => options.renderItem ? options.renderItem(item, state) : /* @__PURE__ */ jsx10("li", { children: /* @__PURE__ */ jsx10(KeepItemCard, { item, ...options.itemCardProps }) }, item.id)
-      )
-    }
+  return /* @__PURE__ */ jsx10("ul", { "data-layout": options.layout, children: state.items.map(
+    (item) => options.renderItem ? options.renderItem(item, state) : /* @__PURE__ */ jsx10("li", { children: /* @__PURE__ */ jsx10(KeepItemCard, { item, ...options.itemCardProps }) }, item.id)
+  ) });
+}
+
+// src/KeepTagFilter.tsx
+import { isValidElement as isValidElement4 } from "react";
+
+// src/hooks/useKeepTagFilter.ts
+import { useKeepList as useKeepList4 } from "@keepkit/core/react";
+import { useCallback, useMemo as useMemo3, useState as useState5 } from "react";
+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 = useCallback(
+    (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 { 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";
 function KeepTagFilter({
   query,
@@ -1987,38 +2446,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__ */ jsxs6("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__ */ jsxs6(
+      "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__ */ jsxs6("span", { children: [
+            " (",
+            view.state.tagCounts[tag] ?? 0,
+            ")"
+          ] })
+        ]
+      },
+      tag
+    ))
   ] });
   return renderRoot(
     asChild,
@@ -2027,16 +2486,87 @@ 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 useEffect2, useState as useState6 } from "react";
+function useKeepSearchInput(options) {
+  const { controlledValue, defaultValue, debounceMs, onValueChange } = options;
+  const [uncontrolledValue, setUncontrolledValue] = useState6(defaultValue);
+  const value = controlledValue ?? uncontrolledValue;
+  useEffect2(() => {
+    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";
 function KeepSearchInput({
   value: controlledValue,
@@ -2047,33 +2577,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
     }
   );
 }
@@ -2085,34 +2602,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 view = useKeepSortSelect({ controlledValue, defaultValue, onValueChange });
   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 })
+    /* @__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
     }
   );
@@ -2126,128 +2633,50 @@ 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));
+  if (render)
+    return /* @__PURE__ */ jsx12("nav", { ...navProps, children: render({ page: view.currentPage, pageCount: view.pageCount, goToPage: view.goToPage }) });
   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(
+    /* @__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";
@@ -2272,90 +2701,27 @@ function KeepCollectionContent({
   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);
+  const view = useKeepCollection({ query, pageSize, urlSync, urlAdapter, features });
   return /* @__PURE__ */ jsxs8(
     "section",
     {
       ...rootProps,
       className,
       "data-keepkit": "collection",
-      "aria-busy": list.isLoading || list.isMutating || rootProps["aria-busy"],
-      "data-state": getCollectionState(list),
-      "data-loading": list.isLoading || list.isMutating ? "true" : void 0,
+      "data-layout": layout,
+      "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
+          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,
@@ -2364,16 +2730,16 @@ function KeepCollectionContent({
             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
       ]
     }
   );
@@ -2387,41 +2753,19 @@ function getCollectionState(list) {
 
 // src/KeepLayout.tsx
 import { jsx as jsx14 } from "react/jsx-runtime";
-function KeepLayout({ layout = "list", children, style, ...props }) {
-  const layoutStyle = layout === "grid" ? { display: "grid", gap: "1rem", gridTemplateColumns: "repeat(auto-fit, minmax(16rem, 1fr))" } : layout === "compact" ? { display: "grid", gap: "0.5rem", gridTemplateColumns: "repeat(auto-fit, minmax(12rem, 1fr))" } : { display: "flex", flexDirection: "column", gap: "1rem" };
-  return /* @__PURE__ */ jsx14("div", { ...props, style: { ...layoutStyle, ...style }, "data-keepkit": "layout", "data-layout": layout, children });
+function KeepLayout({ layout = "list", children, ...props }) {
+  return /* @__PURE__ */ jsx14("div", { ...props, "data-keepkit": "layout", "data-layout": layout, children });
 }
 
 // src/KeepNoteEditor.tsx
+import { isValidElement as isValidElement5 } from "react";
+
+// src/hooks/useKeepNoteEditor.ts
 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 { useCallback as useCallback2, useEffect as useEffect3, useRef as useRef3, 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;
@@ -2433,9 +2777,9 @@ function KeepNoteEditor({
       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(() => {
@@ -2452,31 +2796,62 @@ function KeepNoteEditor({
     error,
     save
   };
-  const body = render ? render(state) : typeof contentChildren === "function" ? contentChildren(state) : contentChildren ?? /* @__PURE__ */ jsxs9(Fragment5, { children: [
+  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 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 view = useKeepNoteEditor({ item, debounceMs, onSaved, onSaveError });
+  const { error, isDirty, isSaving, note, setNote } = view.state;
+  const contentChildren = asChild && isValidElement5(children) ? void 0 : children;
+  const body = render ? render(view.state) : typeof contentChildren === "function" ? contentChildren(view.state) : contentChildren ?? /* @__PURE__ */ jsxs9(Fragment5, { children: [
     /* @__PURE__ */ jsxs9("label", { children: [
-      label ?? defaultLabel,
+      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(
       "form",
@@ -2484,14 +2859,14 @@ 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,
         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
         ]
       }
     );
@@ -2503,11 +2878,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"
@@ -2517,9 +2892,62 @@ function getErrorMessage3(error, fallback) {
   return error instanceof Error ? error.message : fallback;
 }
 
-// src/KeepSyncRecoveryDialog.tsx
+// src/hooks/useKeepSyncRecoveryDialog.ts
 import { useKeepContext as useKeepContext3 } from "@keepkit/core/react";
 import { useEffect as useEffect4, useState as useState8 } from "react";
+function useKeepSyncRecoveryDialog(options) {
+  const { open, onOpenChange, conflicts, onManualMerge } = options;
+  const context = useKeepContext3();
+  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]);
+  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 jsxs10 } from "react/jsx-runtime";
 function KeepSyncRecoveryDialog({
   open,
@@ -2533,44 +2961,8 @@ 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 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);
-    }
-  }
+  const view = useKeepSyncRecoveryDialog({ open, onOpenChange, conflicts, onManualMerge });
+  if (!view.isOpen) return null;
   return /* @__PURE__ */ jsxs10(
     "section",
     {
@@ -2579,55 +2971,115 @@ function KeepSyncRecoveryDialog({
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": "keepkit-sync-recovery-title",
+      "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__ */ 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__ */ jsxs10("div", { children: [
+          /* @__PURE__ */ jsx16("p", { children: view.labels.conflict }),
+          view.conflictList.map((conflict) => /* @__PURE__ */ jsxs10("article", { "data-conflict-id": conflict.id, children: [
             /* @__PURE__ */ jsx16("h3", { children: getMetaTitle(conflict.operation.item?.meta) ?? conflict.id }),
+            /* @__PURE__ */ jsxs10("div", { "data-conflict-preview": true, children: [
+              /* @__PURE__ */ jsx16(
+                ConflictPreview,
+                {
+                  item: conflict.operation.item,
+                  heading: view.labels.localVersion,
+                  updatedAtLabel: view.labels.updatedAt,
+                  noteLabel: view.labels.note,
+                  side: "local"
+                }
+              ),
+              /* @__PURE__ */ jsx16(
+                ConflictPreview,
+                {
+                  item: conflict.remote,
+                  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__ */ jsx16(
                 "button",
                 {
                   type: "button",
-                  onClick: () => void resolve(conflict, "manual"),
-                  disabled: busyId !== void 0 || !onManualMerge,
-                  children: manualMergeLabel
+                  "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",
+                  "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__ */ jsxs10("section", { "data-recovery": "backup", children: [
+          /* @__PURE__ */ jsx16("h3", { children: view.labels.backupRecovery }),
+          /* @__PURE__ */ jsx16("p", { children: view.labels.backupRecoveryDescription }),
           backup ?? (showBackupControls ? /* @__PURE__ */ jsx16(KeepBackup, {}) : null)
         ] }) : null,
-        error ? /* @__PURE__ */ jsx16("p", { role: "alert", 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
       ]
     }
   );
 }
+function ConflictPreview({
+  item,
+  heading,
+  updatedAtLabel,
+  noteLabel,
+  side
+}) {
+  return /* @__PURE__ */ jsxs10("article", { "data-conflict-version": side, "aria-label": heading, children: [
+    /* @__PURE__ */ jsx16("h4", { children: heading }),
+    /* @__PURE__ */ jsxs10("dl", { children: [
+      /* @__PURE__ */ jsxs10("div", { children: [
+        /* @__PURE__ */ jsx16("dt", { children: updatedAtLabel }),
+        /* @__PURE__ */ jsx16("dd", { children: item ? /* @__PURE__ */ jsx16("time", { dateTime: new Date(item.updatedAt).toISOString(), children: formatConflictDate(item.updatedAt) }) : "\u2014" })
+      ] }),
+      /* @__PURE__ */ jsxs10("div", { children: [
+        /* @__PURE__ */ jsx16("dt", { children: noteLabel }),
+        /* @__PURE__ */ jsx16("dd", { children: item?.note || "\u2014" })
+      ] })
+    ] })
+  ] });
+}
+function formatConflictDate(timestamp) {
+  return new Date(timestamp).toISOString().slice(0, 10);
+}
 
-// src/KeepSyncStatusBanner.tsx
+// src/hooks/useKeepSyncStatusBanner.ts
 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
-}) {
+function useKeepSyncStatusBanner({ onRetry, children }) {
   const context = useKeepContext4();
   const retryLabel = useUiLabel("retrySync");
   const resolveLabel = useUiLabel("resolveSync");
@@ -2636,53 +3088,80 @@ 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();
   };
+}
+function getErrorMessage4(error) {
+  return error instanceof Error ? error.message : "Sync failed.";
+}
+
+// src/KeepSyncStatusBanner.tsx
+import { jsx as jsx17, jsxs as jsxs11 } 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__ */ jsxs11(
     "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");
+function useKeepTagEditor({ item, onSaved, onSaveError }) {
   const itemState = useKeepItem4(item);
   const [tags, setTags] = useState9(item.tags ?? []);
   const [input, setInput] = useState9("");
@@ -2693,60 +3172,91 @@ function KeepTagEditor({
       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: [
+  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 Fragment6, jsx as jsx18, jsxs as jsxs12 } 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__ */ jsxs12(Fragment6, { children: [
     /* @__PURE__ */ jsxs12("label", { children: [
-      tagsLabel,
+      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__ */ jsxs12("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(
     "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
       ]
     }
   );
@@ -2755,23 +3265,84 @@ function getErrorMessage5(error, fallback) {
   return error instanceof Error ? error.message : fallback;
 }
 
-// src/KeepUndo.tsx
+// src/hooks/useKeepUndo.ts
 import { useKeepContext as useKeepContext5 } from "@keepkit/core/react";
+function useKeepUndo() {
+  const context = useKeepContext5();
+  return {
+    canUndo: context.undo.canUndo,
+    undo: () => context.undoLastRemoval(),
+    message: useUiLabel("undoAvailable"),
+    label: useUiLabel("undo")
+  };
+}
+
+// src/KeepUndo.tsx
 import { jsx as jsx19, jsxs as jsxs13 } 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;
+  const view = useKeepUndo();
+  if (!view.canUndo) return null;
   return /* @__PURE__ */ jsxs13("div", { ...props, role: "status", "aria-live": "polite", "data-keepkit": "undo", "data-state": "available", children: [
-    children ?? message,
-    /* @__PURE__ */ jsx19("button", { type: "button", onClick: () => void context.undoLastRemoval(), children: label ?? undoLabel })
+    children ?? view.message,
+    /* @__PURE__ */ jsx19("button", { type: "button", "data-keep-action": "undo", onClick: () => void view.undo(), children: label ?? view.label })
   ] });
 }
 
 // src/status.tsx
+import { isValidElement as isValidElement6 } from "react";
+
+// src/hooks/useStatusViews.ts
 import { useKeepContext as useKeepContext6 } from "@keepkit/core/react";
-import { isValidElement as isValidElement6, useEffect as useEffect6, useRef as useRef4, useState as useState10 } from "react";
+import { useEffect as useEffect6, useRef as useRef4, useState as useState10 } from "react";
+function useKeepEmptyState() {
+  return useUiLabel("noItems").replace(/\.$/, "");
+}
+function useKeepStatus(status) {
+  const context = useKeepContext6();
+  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 = 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]);
+  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 Fragment7, jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
 function KeepEmptyState({
   title,
@@ -2782,7 +3353,7 @@ 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: [
     /* @__PURE__ */ jsx20("h2", { children: title ?? defaultTitle }),
@@ -2806,18 +3377,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,
@@ -2827,28 +3390,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",
     {
@@ -2863,26 +3413,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",
@@ -3095,6 +3641,7 @@ export {
   createStorageAdapter,
   getKeepLocaleLabels,
   isAllSelected,
+  keepThemeNames,
   toggleSelectAll,
   useKeepContext7 as useKeepContext,
   useKeepItem5 as useKeepItem,