@keepkit/ui 0.17.0 → 0.19.0

package/dist/index.js

@@ -6,32 +6,94 @@ import {
   createKeepKit as createCoreKeepKit
 } from "@keepkit/core/react";
 
-// src/hooks/useKeepToastFeedback.ts
-import { useCallback } from "react";
-function useKeepToastFeedback(showToast) {
-  return useCallback(
-    (event) => {
-      if (!("undo" in event)) {
-        showToast(event.message);
-        return;
-      }
-      showToast(event.message, {
-        action: {
-          label: event.undoLabel,
-          onClick: () => void event.undo()
-        }
-      });
+// src/adapters/url-sync.tsx
+import {
+  DEFAULT_KEEP_URL_PARAMS,
+  decodeKeepListQuery,
+  encodeKeepListQuery
+} from "@keepkit/core/core";
+import { useEffect, useRef } 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 = useRef(getBrowserAdapter());
+  const adapter = providedAdapter ?? browserAdapterRef.current;
+  const onQueryChangeRef = useRef(onQueryChange);
+  onQueryChangeRef.current = onQueryChange;
+  const skipWriteRef = useRef(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);
     },
-    [showToast]
-  );
+    navigate: (url, mode) => {
+      if (typeof window === "undefined") return;
+      window.history[mode === "push" ? "pushState" : "replaceState"]({}, "", url);
+    }
+  };
 }
 
-// src/hooks/useKeepBackup.ts
+// src/features/actions/hooks/useKeepBackup.ts
 import { useKeepContext } from "@keepkit/core/react";
-import { useRef, useState } from "react";
+import { useRef as useRef2, useState } from "react";
 
-// src/ui-context.tsx
-import { createContext, useCallback as useCallback2, useContext, useMemo } from "react";
+// src/foundation/ui-context.tsx
+import { createContext, useCallback, useContext, useMemo } from "react";
 
 // src/locales/de.ts
 var DE_LABELS = {
@@ -45,6 +107,13 @@ var DE_LABELS = {
   allTags: "Alle",
   tags: "Tags",
   filterTags: "Gespeicherte Elemente nach Tag filtern",
+  activeFilters: "Aktive Filter",
+  clearFilters: "Filter l\xF6schen",
+  clearAllFilters: "Alle Filter l\xF6schen",
+  removeFilter: "entfernen",
+  noFilteredItems: "Keine passenden Elemente gefunden.",
+  noFilteredItemsDescription: "Passe die Suche an oder entferne einen Tag-Filter.",
+  emptyStorageDescription: "Speichere ein Element, damit es hier angezeigt wird.",
   note: "Notiz",
   saveNote: "Notiz speichern",
   noItems: "Keine gespeicherten Elemente.",
@@ -124,6 +193,13 @@ var EN_LABELS = {
   allTags: "All",
   tags: "Tags",
   filterTags: "Filter saved items by tag",
+  activeFilters: "Active filters",
+  clearFilters: "Clear filters",
+  clearAllFilters: "Clear all filters",
+  removeFilter: "Remove",
+  noFilteredItems: "No matching items found.",
+  noFilteredItemsDescription: "Try adjusting your search or removing a tag filter.",
+  emptyStorageDescription: "Save an item to see it here.",
   note: "Note",
   saveNote: "Save note",
   noItems: "No saved items.",
@@ -203,6 +279,13 @@ var ES_LABELS = {
   allTags: "Todos",
   tags: "Etiquetas",
   filterTags: "Filtrar elementos guardados por etiqueta",
+  activeFilters: "Filtros activos",
+  clearFilters: "Borrar filtros",
+  clearAllFilters: "Borrar todos los filtros",
+  removeFilter: "quitar",
+  noFilteredItems: "No se encontraron elementos coincidentes.",
+  noFilteredItemsDescription: "Ajusta la b\xFAsqueda o quita un filtro de etiqueta.",
+  emptyStorageDescription: "Guarda un elemento para verlo aqu\xED.",
   note: "Nota",
   saveNote: "Guardar nota",
   noItems: "No hay elementos guardados.",
@@ -282,6 +365,13 @@ var FIL_LABELS = {
   allTags: "Lahat",
   tags: "Mga tag",
   filterTags: "I-filter ang mga naka-save na item ayon sa tag",
+  activeFilters: "Mga aktibong filter",
+  clearFilters: "I-clear ang mga filter",
+  clearAllFilters: "I-clear ang lahat ng filter",
+  removeFilter: "alisin",
+  noFilteredItems: "Walang nakitang tumutugmang item.",
+  noFilteredItemsDescription: "Baguhin ang paghahanap o alisin ang filter ng tag.",
+  emptyStorageDescription: "Mag-save ng item para makita ito rito.",
   note: "Tala",
   saveNote: "I-save ang tala",
   noItems: "Walang naka-save na item.",
@@ -361,6 +451,13 @@ var FR_LABELS = {
   allTags: "Tous",
   tags: "\xC9tiquettes",
   filterTags: "Filtrer les \xE9l\xE9ments enregistr\xE9s par \xE9tiquette",
+  activeFilters: "Filtres actifs",
+  clearFilters: "Effacer les filtres",
+  clearAllFilters: "Effacer tous les filtres",
+  removeFilter: "supprimer",
+  noFilteredItems: "Aucun \xE9l\xE9ment correspondant trouv\xE9.",
+  noFilteredItemsDescription: "Modifiez votre recherche ou supprimez un filtre de tag.",
+  emptyStorageDescription: "Enregistrez un \xE9l\xE9ment pour le voir ici.",
   note: "Note",
   saveNote: "Enregistrer la note",
   noItems: "Aucun \xE9l\xE9ment enregistr\xE9.",
@@ -440,6 +537,13 @@ var ID_LABELS = {
   allTags: "Semua",
   tags: "Tag",
   filterTags: "Filter item tersimpan berdasarkan tag",
+  activeFilters: "Filter aktif",
+  clearFilters: "Hapus filter",
+  clearAllFilters: "Hapus semua filter",
+  removeFilter: "hapus",
+  noFilteredItems: "Tidak ada item yang cocok.",
+  noFilteredItemsDescription: "Ubah pencarian atau hapus filter tag.",
+  emptyStorageDescription: "Simpan item untuk melihatnya di sini.",
   note: "Catatan",
   saveNote: "Simpan catatan",
   noItems: "Belum ada item tersimpan.",
@@ -519,6 +623,13 @@ var IT_LABELS = {
   allTags: "Tutti",
   tags: "Tag",
   filterTags: "Filtra gli elementi salvati per tag",
+  activeFilters: "Filtri attivi",
+  clearFilters: "Cancella filtri",
+  clearAllFilters: "Cancella tutti i filtri",
+  removeFilter: "rimuovi",
+  noFilteredItems: "Nessun elemento corrispondente trovato.",
+  noFilteredItemsDescription: "Modifica la ricerca o rimuovi un filtro tag.",
+  emptyStorageDescription: "Salva un elemento per visualizzarlo qui.",
   note: "Nota",
   saveNote: "Salva nota",
   noItems: "Nessun elemento salvato.",
@@ -598,6 +709,13 @@ var JA_LABELS = {
   allTags: "\u3059\u3079\u3066",
   tags: "\u30BF\u30B0",
   filterTags: "\u4FDD\u5B58\u30A2\u30A4\u30C6\u30E0\u3092\u30BF\u30B0\u3067\u7D5E\u308A\u8FBC\u3080",
+  activeFilters: "\u9069\u7528\u4E2D\u306E\u6761\u4EF6",
+  clearFilters: "\u30D5\u30A3\u30EB\u30BF\u30FC\u3092\u30AF\u30EA\u30A2",
+  clearAllFilters: "\u3059\u3079\u3066\u306E\u6761\u4EF6\u3092\u30AF\u30EA\u30A2",
+  removeFilter: "\u3092\u89E3\u9664",
+  noFilteredItems: "\u4E00\u81F4\u3059\u308B\u30A2\u30A4\u30C6\u30E0\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093\u3067\u3057\u305F",
+  noFilteredItemsDescription: "\u691C\u7D22\u8A9E\u3092\u5909\u66F4\u3059\u308B\u304B\u3001\u30BF\u30B0\u306E\u7D5E\u308A\u8FBC\u307F\u3092\u89E3\u9664\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
+  emptyStorageDescription: "\u30A2\u30A4\u30C6\u30E0\u3092\u4FDD\u5B58\u3059\u308B\u3068\u3001\u3053\u3053\u306B\u8868\u793A\u3055\u308C\u307E\u3059\u3002",
   note: "\u30E1\u30E2",
   saveNote: "\u30E1\u30E2\u3092\u4FDD\u5B58",
   noItems: "\u4FDD\u5B58\u3055\u308C\u305F\u30A2\u30A4\u30C6\u30E0\u306F\u3042\u308A\u307E\u305B\u3093\u3002",
@@ -677,6 +795,13 @@ var KO_LABELS = {
   allTags: "\uBAA8\uB450",
   tags: "\uD0DC\uADF8",
   filterTags: "\uD0DC\uADF8\uB85C \uC800\uC7A5 \uD56D\uBAA9 \uD544\uD130\uB9C1",
+  activeFilters: "\uD65C\uC131 \uD544\uD130",
+  clearFilters: "\uD544\uD130 \uC9C0\uC6B0\uAE30",
+  clearAllFilters: "\uBAA8\uB4E0 \uD544\uD130 \uC9C0\uC6B0\uAE30",
+  removeFilter: "\uC81C\uAC70",
+  noFilteredItems: "\uC77C\uCE58\uD558\uB294 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4.",
+  noFilteredItemsDescription: "\uAC80\uC0C9\uC5B4\uB97C \uBC14\uAFB8\uAC70\uB098 \uD0DC\uADF8 \uD544\uD130\uB97C \uC81C\uAC70\uD574 \uBCF4\uC138\uC694.",
+  emptyStorageDescription: "\uD56D\uBAA9\uC744 \uC800\uC7A5\uD558\uBA74 \uC5EC\uAE30\uC5D0 \uD45C\uC2DC\uB429\uB2C8\uB2E4.",
   note: "\uBA54\uBAA8",
   saveNote: "\uBA54\uBAA8 \uC800\uC7A5",
   noItems: "\uC800\uC7A5\uB41C \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4.",
@@ -756,6 +881,13 @@ var MS_LABELS = {
   allTags: "Semua",
   tags: "Tag",
   filterTags: "Tapis item yang disimpan mengikut tag",
+  activeFilters: "Penapis aktif",
+  clearFilters: "Kosongkan penapis",
+  clearAllFilters: "Kosongkan semua penapis",
+  removeFilter: "alih keluar",
+  noFilteredItems: "Tiada item yang sepadan ditemui.",
+  noFilteredItemsDescription: "Laraskan carian atau alih keluar penapis tag.",
+  emptyStorageDescription: "Simpan item untuk melihatnya di sini.",
   note: "Nota",
   saveNote: "Simpan nota",
   noItems: "Tiada item disimpan.",
@@ -835,6 +967,13 @@ var PT_BR_LABELS = {
   allTags: "Todos",
   tags: "Tags",
   filterTags: "Filtrar itens salvos por tag",
+  activeFilters: "Filtros ativos",
+  clearFilters: "Limpar filtros",
+  clearAllFilters: "Limpar todos os filtros",
+  removeFilter: "remover",
+  noFilteredItems: "Nenhum item correspondente encontrado.",
+  noFilteredItemsDescription: "Ajuste sua busca ou remova um filtro de tag.",
+  emptyStorageDescription: "Salve um item para v\xEA-lo aqui.",
   note: "Nota",
   saveNote: "Salvar nota",
   noItems: "Nenhum item salvo.",
@@ -914,6 +1053,13 @@ var RU_LABELS = {
   allTags: "\u0412\u0441\u0435",
   tags: "\u0422\u0435\u0433\u0438",
   filterTags: "\u0424\u0438\u043B\u044C\u0442\u0440\u043E\u0432\u0430\u0442\u044C \u0441\u043E\u0445\u0440\u0430\u043D\u0451\u043D\u043D\u044B\u0435 \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u044B \u043F\u043E \u0442\u0435\u0433\u0443",
+  activeFilters: "\u0410\u043A\u0442\u0438\u0432\u043D\u044B\u0435 \u0444\u0438\u043B\u044C\u0442\u0440\u044B",
+  clearFilters: "\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C \u0444\u0438\u043B\u044C\u0442\u0440\u044B",
+  clearAllFilters: "\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C \u0432\u0441\u0435 \u0444\u0438\u043B\u044C\u0442\u0440\u044B",
+  removeFilter: "\u0443\u0434\u0430\u043B\u0438\u0442\u044C",
+  noFilteredItems: "\u041F\u043E\u0434\u0445\u043E\u0434\u044F\u0449\u0438\u0435 \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u044B \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u044B.",
+  noFilteredItemsDescription: "\u0418\u0437\u043C\u0435\u043D\u0438\u0442\u0435 \u043F\u043E\u0438\u0441\u043A \u0438\u043B\u0438 \u0443\u0434\u0430\u043B\u0438\u0442\u0435 \u0444\u0438\u043B\u044C\u0442\u0440 \u0442\u0435\u0433\u0430.",
+  emptyStorageDescription: "\u0421\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u0435 \u044D\u043B\u0435\u043C\u0435\u043D\u0442, \u0447\u0442\u043E\u0431\u044B \u0443\u0432\u0438\u0434\u0435\u0442\u044C \u0435\u0433\u043E \u0437\u0434\u0435\u0441\u044C.",
   note: "\u0417\u0430\u043C\u0435\u0442\u043A\u0430",
   saveNote: "\u0421\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u044C \u0437\u0430\u043C\u0435\u0442\u043A\u0443",
   noItems: "\u041D\u0435\u0442 \u0441\u043E\u0445\u0440\u0430\u043D\u0451\u043D\u043D\u044B\u0445 \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u043E\u0432.",
@@ -993,6 +1139,13 @@ var TH_LABELS = {
   allTags: "\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14",
   tags: "\u0E41\u0E17\u0E47\u0E01",
   filterTags: "\u0E01\u0E23\u0E2D\u0E07\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23\u0E17\u0E35\u0E48\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01\u0E14\u0E49\u0E27\u0E22\u0E41\u0E17\u0E47\u0E01",
+  activeFilters: "\u0E15\u0E31\u0E27\u0E01\u0E23\u0E2D\u0E07\u0E17\u0E35\u0E48\u0E43\u0E0A\u0E49\u0E07\u0E32\u0E19\u0E2D\u0E22\u0E39\u0E48",
+  clearFilters: "\u0E25\u0E49\u0E32\u0E07\u0E15\u0E31\u0E27\u0E01\u0E23\u0E2D\u0E07",
+  clearAllFilters: "\u0E25\u0E49\u0E32\u0E07\u0E15\u0E31\u0E27\u0E01\u0E23\u0E2D\u0E07\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14",
+  removeFilter: "\u0E19\u0E33\u0E2D\u0E2D\u0E01",
+  noFilteredItems: "\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23\u0E17\u0E35\u0E48\u0E15\u0E23\u0E07\u0E01\u0E31\u0E19",
+  noFilteredItemsDescription: "\u0E25\u0E2D\u0E07\u0E1B\u0E23\u0E31\u0E1A\u0E01\u0E32\u0E23\u0E04\u0E49\u0E19\u0E2B\u0E32\u0E2B\u0E23\u0E37\u0E2D\u0E19\u0E33\u0E15\u0E31\u0E27\u0E01\u0E23\u0E2D\u0E07\u0E41\u0E17\u0E47\u0E01\u0E2D\u0E2D\u0E01",
+  emptyStorageDescription: "\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23\u0E40\u0E1E\u0E37\u0E48\u0E2D\u0E14\u0E39\u0E17\u0E35\u0E48\u0E19\u0E35\u0E48",
   note: "\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01\u0E22\u0E48\u0E2D",
   saveNote: "\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01\u0E22\u0E48\u0E2D",
   noItems: "\u0E44\u0E21\u0E48\u0E21\u0E35\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23\u0E17\u0E35\u0E48\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01\u0E44\u0E27\u0E49",
@@ -1072,6 +1225,13 @@ var VI_LABELS = {
   allTags: "T\u1EA5t c\u1EA3",
   tags: "Th\u1EBB",
   filterTags: "L\u1ECDc m\u1EE5c \u0111\xE3 l\u01B0u theo th\u1EBB",
+  activeFilters: "B\u1ED9 l\u1ECDc \u0111ang d\xF9ng",
+  clearFilters: "X\xF3a b\u1ED9 l\u1ECDc",
+  clearAllFilters: "X\xF3a t\u1EA5t c\u1EA3 b\u1ED9 l\u1ECDc",
+  removeFilter: "x\xF3a",
+  noFilteredItems: "Kh\xF4ng t\xECm th\u1EA5y m\u1EE5c ph\xF9 h\u1EE3p.",
+  noFilteredItemsDescription: "H\xE3y \u0111i\u1EC1u ch\u1EC9nh t\xECm ki\u1EBFm ho\u1EB7c x\xF3a b\u1ED9 l\u1ECDc th\u1EBB.",
+  emptyStorageDescription: "L\u01B0u m\u1ED9t m\u1EE5c \u0111\u1EC3 xem m\u1EE5c \u0111\xF3 t\u1EA1i \u0111\xE2y.",
   note: "Ghi ch\xFA",
   saveNote: "L\u01B0u ghi ch\xFA",
   noItems: "Ch\u01B0a c\xF3 m\u1EE5c n\xE0o \u0111\u01B0\u1EE3c l\u01B0u.",
@@ -1151,6 +1311,13 @@ var ZH_HANS_LABELS = {
   allTags: "\u5168\u90E8",
   tags: "\u6807\u7B7E",
   filterTags: "\u6309\u6807\u7B7E\u7B5B\u9009\u5DF2\u4FDD\u5B58\u9879\u76EE",
+  activeFilters: "\u5F53\u524D\u7B5B\u9009\u6761\u4EF6",
+  clearFilters: "\u6E05\u9664\u7B5B\u9009",
+  clearAllFilters: "\u6E05\u9664\u6240\u6709\u7B5B\u9009\u6761\u4EF6",
+  removeFilter: "\u79FB\u9664",
+  noFilteredItems: "\u672A\u627E\u5230\u5339\u914D\u9879\u76EE\u3002",
+  noFilteredItemsDescription: "\u8BF7\u8C03\u6574\u641C\u7D22\u6761\u4EF6\u6216\u79FB\u9664\u6807\u7B7E\u7B5B\u9009\u3002",
+  emptyStorageDescription: "\u4FDD\u5B58\u9879\u76EE\u540E\u4F1A\u663E\u793A\u5728\u8FD9\u91CC\u3002",
   note: "\u5907\u6CE8",
   saveNote: "\u4FDD\u5B58\u5907\u6CE8",
   noItems: "\u6CA1\u6709\u5DF2\u4FDD\u5B58\u7684\u9879\u76EE\u3002",
@@ -1230,6 +1397,13 @@ var ZH_HANT_LABELS = {
   allTags: "\u5168\u90E8",
   tags: "\u6A19\u7C64",
   filterTags: "\u4F9D\u6A19\u7C64\u7BE9\u9078\u5DF2\u5132\u5B58\u9805\u76EE",
+  activeFilters: "\u76EE\u524D\u7BE9\u9078\u689D\u4EF6",
+  clearFilters: "\u6E05\u9664\u7BE9\u9078",
+  clearAllFilters: "\u6E05\u9664\u6240\u6709\u7BE9\u9078\u689D\u4EF6",
+  removeFilter: "\u79FB\u9664",
+  noFilteredItems: "\u627E\u4E0D\u5230\u76F8\u7B26\u9805\u76EE\u3002",
+  noFilteredItemsDescription: "\u8ACB\u8ABF\u6574\u641C\u5C0B\u689D\u4EF6\u6216\u79FB\u9664\u6A19\u7C64\u7BE9\u9078\u3002",
+  emptyStorageDescription: "\u5132\u5B58\u9805\u76EE\u5F8C\u6703\u986F\u793A\u5728\u9019\u88E1\u3002",
   note: "\u5099\u8A3B",
   saveNote: "\u5132\u5B58\u5099\u8A3B",
   noItems: "\u6C92\u6709\u5DF2\u5132\u5B58\u7684\u9805\u76EE\u3002",
@@ -1356,7 +1530,7 @@ function getKeepLocaleLabels(locale) {
   return { ...KEEP_LOCALE_LABELS[normalizeKeepLocale(locale)] };
 }
 
-// src/ui-context.tsx
+// src/foundation/ui-context.tsx
 import { jsx } from "react/jsx-runtime";
 var DEFAULT_LABELS = KEEP_LOCALE_LABELS.en;
 var KeepUiLabelsContext = createContext({
@@ -1370,7 +1544,7 @@ function KeepUiProvider({
   onFeedback,
   children
 }) {
-  const emitFeedback = useCallback2(
+  const emitFeedback = useCallback(
     (event) => {
       onFeedback?.(event);
     },
@@ -1393,13 +1567,13 @@ function useUiLabel(key, override) {
 }
 function useKeepUiFeedback() {
   const { emitFeedback } = useKeepUiLabels();
-  return useCallback2((event) => emitFeedback(event), [emitFeedback]);
+  return useCallback((event) => emitFeedback(event), [emitFeedback]);
 }
 
-// src/hooks/useKeepBackup.ts
+// src/features/actions/hooks/useKeepBackup.ts
 function useKeepBackup({ filename, onExport, onImported }) {
   const context = useKeepContext();
-  const inputRef = useRef(null);
+  const inputRef = useRef2(null);
   const [mode, setMode] = useState("merge");
   const [result, setResult] = useState();
   const [error, setError] = useState();
@@ -1456,7 +1630,7 @@ function useKeepBackup({ filename, onExport, onImported }) {
   };
 }
 
-// src/KeepBackup.tsx
+// src/features/actions/KeepBackup.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function KeepBackup({
   filename = "keepkit-backup.json",
@@ -1533,11 +1707,7 @@ function getErrorMessage(error) {
   return error instanceof Error ? error.message : "Something went wrong.";
 }
 
-// src/hooks/useKeepBulkActions.ts
-import { useKeepList } from "@keepkit/core/react";
-import { useState as useState2 } from "react";
-
-// src/shared.tsx
+// src/foundation/shared.tsx
 import {
   cloneElement,
   createContext as createContext2,
@@ -1606,15 +1776,69 @@ function sortToValue(sort) {
 function resolveContent(content, state) {
   return typeof content === "function" ? content(state) : content;
 }
+function chainedFunction(childHandler, parentHandler) {
+  if (!childHandler) return parentHandler;
+  if (!parentHandler) return childHandler;
+  return ((...args) => {
+    childHandler(...args);
+    parentHandler(...args);
+  });
+}
+function mergeProps(childProps, parentProps) {
+  const merged = { ...parentProps, ...childProps };
+  const className = mergeClassNames(childProps.className, parentProps.className);
+  if (className) merged.className = className;
+  const style = mergeStyles(childProps.style, parentProps.style);
+  if (style) merged.style = style;
+  for (const key of Object.keys(parentProps)) {
+    if (!isEventProp(key)) continue;
+    const chained = chainedFunction(getHandler(childProps[key]), getHandler(parentProps[key]));
+    if (chained) merged[key] = chained;
+  }
+  for (const [key, value] of Object.entries(merged)) {
+    if (value === void 0 && key.startsWith("aria-") && childProps[key] !== void 0) {
+      merged[key] = childProps[key];
+    }
+  }
+  return merged;
+}
+function getHandler(value) {
+  return typeof value === "function" ? value : void 0;
+}
+function isEventProp(key) {
+  return key.startsWith("on") && key.length > 2 && key[2] === key[2]?.toUpperCase();
+}
+function mergeClassNames(childClassName, parentClassName) {
+  const values = [childClassName, parentClassName].filter(
+    (value) => typeof value === "string" && Boolean(value)
+  );
+  return values.length > 0 ? values.join(" ") : void 0;
+}
+function mergeStyles(childStyle, parentStyle) {
+  if (!childStyle && !parentStyle) return void 0;
+  return {
+    ...isObject(childStyle) ? childStyle : {},
+    ...isObject(parentStyle) ? parentStyle : {}
+  };
+}
+function isObject(value) {
+  return typeof value === "object" && value !== null;
+}
+function createSlot(child, props, body) {
+  const nextProps = body === void 0 ? props : { ...props, children: body };
+  return cloneElement(child, mergeProps(child.props, nextProps));
+}
 function renderRoot(asChild, child, props, body, componentName) {
   if (asChild) {
     if (!isValidElement(child)) throw new Error(`${componentName} with asChild requires a single React element child.`);
-    return cloneElement(child, { ...props, children: body });
+    return createSlot(child, props, body);
   }
   return /* @__PURE__ */ jsx3("div", { ...props, children: body });
 }
 
-// src/hooks/useKeepBulkActions.ts
+// src/features/actions/hooks/useKeepBulkActions.ts
+import { useKeepList } from "@keepkit/core/react";
+import { useState as useState2 } from "react";
 function isAllSelected(items, selectedIds) {
   if (items.length === 0) return false;
   const selected = new Set(selectedIds);
@@ -1707,7 +1931,7 @@ function useKeepBulkActions(options) {
   };
 }
 
-// src/KeepItemCheckbox.tsx
+// src/features/actions/KeepItemCheckbox.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
 function KeepItemCheckbox({
   item,
@@ -1740,7 +1964,7 @@ function getItemLabel(item) {
   return typeof title === "string" && title.trim() ? title.trim() : void 0;
 }
 
-// src/KeepBulkActions.tsx
+// src/features/actions/KeepBulkActions.tsx
 import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 function KeepBulkActions({
   query,
@@ -1855,13 +2079,13 @@ function KeepBulkActions({
   );
 }
 
-// src/KeepButton.tsx
+// src/features/actions/KeepButton.tsx
 import {
   KeepButton as CoreKeepButton
 } from "@keepkit/core/react";
-import { createElement, useEffect, useRef as useRef2 } from "react";
+import { createElement, useEffect as useEffect2, useRef as useRef3 } from "react";
 
-// src/hooks/useKeepButton.ts
+// src/features/actions/hooks/useKeepButton.ts
 import { useKeepItem } from "@keepkit/core/react";
 function useKeepButton({ item, labels, icons, children }) {
   return {
@@ -1881,7 +2105,7 @@ function useKeepButton({ item, labels, icons, children }) {
   };
 }
 
-// src/KeepButton.tsx
+// src/features/actions/KeepButton.tsx
 import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 function KeepButton({
   labels,
@@ -1894,8 +2118,8 @@ function KeepButton({
   ...props
 }) {
   const view = useKeepButton({ item: props.item, labels, icons, children: props.children });
-  const pendingToggle = useRef2(null);
-  useEffect(() => {
+  const pendingToggle = useRef3(null);
+  useEffect2(() => {
     const pending = pendingToggle.current;
     if (!pending || view.buttonState.isMutating || pending.wasSaved === view.buttonState.isSaved) return;
     pendingToggle.current = null;
@@ -1962,148 +2186,495 @@ function renderIcon(icon, className) {
   return icon ?? null;
 }
 
-// src/KeepCollection.tsx
-import { KeepErrorBoundary as KeepErrorBoundary2 } from "@keepkit/core/react";
-
-// src/hooks/useKeepCollection.ts
-import { useKeepList as useKeepList2 } from "@keepkit/core/react";
-import { useMemo as useMemo2, useState as useState3 } from "react";
-
-// src/url-sync.tsx
-import {
-  DEFAULT_KEEP_URL_PARAMS,
-  decodeKeepListQuery,
-  encodeKeepListQuery
-} from "@keepkit/core/core";
-import { useEffect as useEffect2, useRef as useRef3 } from "react";
-function createNextPagesRouterAdapter(router) {
-  const getUrl = () => router.asPath ?? (typeof window === "undefined" ? "/" : window.location.href);
-  return {
-    getUrl,
-    subscribe: router.events ? (listener) => {
-      router.events?.on("routeChangeComplete", listener);
-      return () => router.events?.off("routeChangeComplete", listener);
-    } : void 0,
-    navigate: (url, mode) => {
-      void router[mode](url, void 0, { shallow: true });
-    }
-  };
-}
-function useKeepUrlSync({
-  enabled = true,
-  query,
-  onQueryChange,
-  options = {},
-  adapter: providedAdapter
-}) {
-  const browserAdapterRef = useRef3(getBrowserAdapter());
-  const adapter = providedAdapter ?? browserAdapterRef.current;
-  const onQueryChangeRef = useRef3(onQueryChange);
-  onQueryChangeRef.current = onQueryChange;
-  const skipWriteRef = useRef3(true);
-  const params = options.params;
-  useEffect2(() => {
-    if (!enabled) return;
-    const read = () => {
-      const url = adapter.getUrl();
-      const decoded = decodeKeepListQuery(url, { params });
-      skipWriteRef.current = true;
-      onQueryChangeRef.current((previousQuery) => ({
-        ...previousQuery,
-        ...decoded.search ? { search: decoded.search } : { search: void 0 },
-        ...decoded.tags ? { tags: decoded.tags } : { tags: void 0 },
-        ...decoded.sort ? { sort: decoded.sort } : {},
-        ...decoded.pagination ? { pagination: { ...previousQuery.pagination, ...decoded.pagination } } : {}
-      }));
-    };
-    read();
-    return adapter.subscribe?.(read);
-  }, [adapter, enabled, params]);
-  useEffect2(() => {
-    if (!enabled) return;
-    if (skipWriteRef.current) {
-      skipWriteRef.current = false;
-      return;
-    }
-    const currentUrl = new URL(adapter.getUrl(), "http://keepkit.invalid");
-    const urlParams = { ...DEFAULT_KEEP_URL_PARAMS, ...params };
-    for (const key of Object.values(urlParams)) currentUrl.searchParams.delete(key);
-    const nextParams = encodeKeepListQuery(query, { params });
-    nextParams.forEach((value, key) => {
-      currentUrl.searchParams.append(key, value);
-    });
-    const nextUrl = `${currentUrl.pathname}${currentUrl.search}${currentUrl.hash}`;
-    adapter.navigate(nextUrl, options.history ?? "push");
-  }, [adapter, enabled, options.history, params, query]);
-}
-function getBrowserAdapter() {
+// src/features/actions/hooks/useKeepUndo.ts
+import { useKeepContext as useKeepContext2 } from "@keepkit/core/react";
+import { useEffect as useEffect3, useState as useState3 } from "react";
+function useKeepUndo() {
+  const context = useKeepContext2();
+  const emitFeedback = useKeepUiFeedback();
+  const restoredMessage = useUiLabel("restoredMessage");
+  const { canUndo, startedAt, expiresAt } = context.undo;
+  const [now, setNow] = useState3(() => Date.now());
+  useEffect3(() => {
+    if (!canUndo || expiresAt === void 0) return;
+    setNow(Date.now());
+    const timer = setInterval(() => setNow(Date.now()), 250);
+    return () => clearInterval(timer);
+  }, [canUndo, expiresAt]);
+  const duration = Math.max(1, (expiresAt ?? now) - (startedAt ?? now));
+  const remainingMs = Math.max(0, (expiresAt ?? now) - now);
+  const remainingSeconds = Math.max(0, Math.ceil(remainingMs / 1e3));
+  const progress = Math.min(1, Math.max(0, remainingMs / duration));
   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);
+    canUndo,
+    expiresAt,
+    remainingMs,
+    remainingSeconds,
+    progress,
+    undo: async () => {
+      const items = context.lastChange?.items ?? (context.lastChange?.item ? [context.lastChange.item] : []);
+      await context.undoLastRemoval();
+      if (items.length > 0) {
+        emitFeedback({ type: "item-restored", item: items[0], items, message: restoredMessage });
+      }
     },
-    navigate: (url, mode) => {
-      if (typeof window === "undefined") return;
-      window.history[mode === "push" ? "pushState" : "replaceState"]({}, "", url);
-    }
+    message: useUiLabel("undoAvailable"),
+    label: useUiLabel("undo")
   };
 }
 
-// src/hooks/useKeepCollection.ts
-function useKeepCollection({
+// src/features/actions/KeepUndo.tsx
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+function KeepUndo({ children, label, ...props }) {
+  const view = useKeepUndo();
+  if (!view.canUndo) return null;
+  return /* @__PURE__ */ jsxs4("div", { ...props, role: "status", "aria-live": "polite", "data-keepkit": "undo", "data-state": "available", children: [
+    /* @__PURE__ */ jsx7("span", { "data-keepkit": "undo-message", children: children ?? view.message }),
+    /* @__PURE__ */ jsxs4("span", { "data-keepkit": "undo-countdown", "aria-hidden": "true", children: [
+      view.remainingSeconds,
+      "s"
+    ] }),
+    /* @__PURE__ */ jsx7(
+      "progress",
+      {
+        "data-keepkit": "undo-progress",
+        max: 1,
+        value: view.progress,
+        "aria-label": String(view.label),
+        "aria-valuetext": `${view.remainingSeconds}s`
+      }
+    ),
+    /* @__PURE__ */ jsx7("button", { type: "button", "data-keep-action": "undo", onClick: () => void view.undo(), children: label ?? view.label })
+  ] });
+}
+
+// src/features/collection/KeepCollection.tsx
+import { KeepErrorBoundary as KeepErrorBoundary2 } from "@keepkit/core/react";
+
+// src/features/query/KeepActiveFiltersSummary.tsx
+import { isValidElement as isValidElement2 } from "react";
+import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+function KeepActiveFiltersSummary({
   query,
-  pageSize,
-  urlSync,
-  urlAdapter,
-  features
+  search: providedSearch,
+  tags: providedTags,
+  onSearchChange,
+  onTagChange,
+  onClear,
+  children,
+  asChild = false,
+  className,
+  ...rootProps
 }) {
-  const enabled = {
-    search: true,
-    sort: true,
-    pagination: true,
-    tagFilter: false,
-    bulkActions: false,
-    ...features
+  const search = (providedSearch ?? query?.search?.query ?? "").trim();
+  const tags = normalizeTags(providedTags ?? query?.tags ?? []);
+  const hasFilters = Boolean(search) || tags.length > 0;
+  const activeFiltersLabel = useUiLabel("activeFilters");
+  const clearAllLabel = useUiLabel("clearAllFilters");
+  const clearLabel = useUiLabel("clearFilters");
+  const removeLabel = useUiLabel("removeFilter");
+  const state = {
+    search,
+    tags,
+    hasFilters,
+    clear: () => onClear?.(),
+    removeSearch: () => onSearchChange?.(""),
+    removeTag: (tag) => onTagChange?.(tag)
   };
-  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]
+  const contentChildren = asChild && isElement(children) ? void 0 : children;
+  const body = typeof contentChildren === "function" ? contentChildren(state) : contentChildren ?? (hasFilters ? /* @__PURE__ */ jsxs5(Fragment4, { children: [
+    /* @__PURE__ */ jsx8("span", { "data-active-filters-label": "true", children: activeFiltersLabel }),
+    /* @__PURE__ */ jsxs5("ul", { "data-active-filters-list": "true", children: [
+      search ? /* @__PURE__ */ jsxs5("li", { "data-filter-kind": "search", children: [
+        /* @__PURE__ */ jsx8("span", { "data-filter-value": "true", children: search }),
+        /* @__PURE__ */ jsx8(
+          "button",
+          {
+            type: "button",
+            "data-keep-action": "remove-search-filter",
+            "aria-label": `${search} ${removeLabel}`,
+            onClick: state.removeSearch,
+            children: "\xD7"
+          }
+        )
+      ] }) : null,
+      tags.map((tag) => /* @__PURE__ */ jsxs5("li", { "data-filter-kind": "tag", children: [
+        /* @__PURE__ */ jsx8("span", { "data-filter-value": "true", children: tag }),
+        /* @__PURE__ */ jsx8(
+          "button",
+          {
+            type: "button",
+            "data-keep-action": "remove-tag-filter",
+            "aria-label": `${tag} ${removeLabel}`,
+            onClick: () => state.removeTag(tag),
+            children: "\xD7"
+          }
+        )
+      ] }, tag))
+    ] }),
+    /* @__PURE__ */ jsx8("button", { type: "button", "data-keep-action": "clear-filters", onClick: state.clear, children: clearAllLabel || clearLabel })
+  ] }) : null);
+  if (!hasFilters && !asChild && contentChildren === void 0) return null;
+  return renderRoot(
+    asChild,
+    isElement(children) ? children : void 0,
+    {
+      ...rootProps,
+      className,
+      "data-keepkit": "active-filters",
+      "data-state": hasFilters ? "active" : "idle",
+      "aria-label": rootProps["aria-label"] ?? activeFiltersLabel
+    },
+    body,
+    "KeepActiveFiltersSummary"
   );
-  useKeepUrlSync({
+}
+function normalizeTags(tags) {
+  return [...new Set(tags.map((tag) => tag.trim()).filter(Boolean))];
+}
+function isElement(value) {
+  return isValidElement2(value);
+}
+
+// src/features/query/KeepTagFilter.tsx
+import { isValidElement as isValidElement3 } from "react";
+
+// src/features/query/hooks/useKeepTagFilter.ts
+import { useKeepList as useKeepList2 } from "@keepkit/core/react";
+import { useCallback as useCallback2, useMemo as useMemo2, useState as useState4 } from "react";
+function useKeepTagFilter(options) {
+  const { query, controlledValue, defaultValue, onChange, onValueChange } = options;
+  const [uncontrolledValue, setUncontrolledValue] = useState4(defaultValue);
+  const resolvedValue = controlledValue ?? uncontrolledValue;
+  const list = useKeepList2({
+    ...query,
+    tags: resolvedValue ? [...query?.tags ?? [], resolvedValue] : query?.tags
+  });
+  const select = useCallback2(
+    (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]
+  );
+  return {
+    state,
+    isLoading: list.isLoading,
+    labels: { all: useUiLabel("allTags"), aria: useUiLabel("filterTags") }
+  };
+}
+
+// src/features/query/KeepTagFilter.tsx
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+function KeepTagFilter({
+  query,
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  onValueChange,
+  allLabel,
+  ariaLabel,
+  renderTag,
+  render,
+  children,
+  asChild = false,
+  className,
+  ...rootProps
+}) {
+  const view = useKeepTagFilter({ query, controlledValue, defaultValue, onChange, onValueChange });
+  const contentChildren = asChild && isValidElement3(children) ? void 0 : children;
+  const body = render ? render(view.state) : typeof contentChildren === "function" ? contentChildren(view.state) : contentChildren ?? /* @__PURE__ */ jsxs6("fieldset", { children: [
+    /* @__PURE__ */ jsx9("legend", { children: ariaLabel ?? view.labels.aria }),
+    /* @__PURE__ */ jsx9(
+      "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,
+    isValidElement3(children) ? children : void 0,
+    {
+      ...rootProps,
+      className,
+      "data-keepkit": "tag-filter",
+      "data-state": view.state.value === void 0 ? "all" : "filtered",
+      "data-loading": view.isLoading ? "true" : void 0
+    },
+    body,
+    "KeepTagFilter"
+  );
+}
+
+// src/features/query/hooks/useQueryControls.ts
+import { useEffect as useEffect4, useState as useState5 } from "react";
+function useKeepSearchInput(options) {
+  const { controlledValue, defaultValue, debounceMs, onValueChange } = options;
+  const [uncontrolledValue, setUncontrolledValue] = useState5(defaultValue);
+  const value = controlledValue ?? uncontrolledValue;
+  useEffect4(() => {
+    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] = useState5(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/features/query/query-controls.tsx
+import { Fragment as Fragment5, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+function KeepSearchInput({
+  value: controlledValue,
+  defaultValue = "",
+  debounceMs = 300,
+  onValueChange,
+  "aria-label": ariaLabel,
+  placeholder,
+  ...props
+}) {
+  const view = useKeepSearchInput({ controlledValue, defaultValue, debounceMs, onValueChange });
+  return /* @__PURE__ */ jsx10(
+    "input",
+    {
+      ...props,
+      "data-keepkit": "search-input",
+      "data-keep-action": "search",
+      type: "search",
+      value: view.value,
+      "data-state": view.value ? "active" : "idle",
+      "data-disabled": props.disabled ? "true" : void 0,
+      "aria-label": ariaLabel ?? view.label,
+      placeholder: placeholder ?? view.label,
+      onChange: view.change
+    }
+  );
+}
+function KeepSortSelect({
+  value: controlledValue,
+  defaultValue = "updatedAt:desc",
+  onValueChange,
+  "aria-label": ariaLabel,
+  children,
+  ...props
+}) {
+  const view = useKeepSortSelect({ controlledValue, defaultValue, onValueChange });
+  const options = children ?? /* @__PURE__ */ jsxs7(Fragment5, { children: [
+    /* @__PURE__ */ jsx10("option", { value: "updatedAt:desc", children: view.labels.updatedNewest }),
+    /* @__PURE__ */ jsx10("option", { value: "updatedAt:asc", children: view.labels.updatedOldest }),
+    /* @__PURE__ */ jsx10("option", { value: "savedAt:desc", children: view.labels.savedNewest }),
+    /* @__PURE__ */ jsx10("option", { value: "savedAt:asc", children: view.labels.savedOldest })
+  ] });
+  return /* @__PURE__ */ jsx10(
+    "select",
+    {
+      ...props,
+      "data-keepkit": "sort-select",
+      "data-keep-action": "sort",
+      value: view.value,
+      "data-state": "selected",
+      "data-disabled": props.disabled ? "true" : void 0,
+      "aria-label": ariaLabel ?? view.labels.sort,
+      onChange: view.change,
+      children: options
+    }
+  );
+}
+function KeepPagination({
+  totalCount,
+  pageSize,
+  page = 1,
+  maxPageButtons = 7,
+  onPageChange,
+  render,
+  ...props
+}) {
+  const view = useKeepPagination({ totalCount, pageSize, page, maxPageButtons, onPageChange });
+  const navProps = {
+    ...props,
+    "data-keepkit": "pagination",
+    "aria-label": props["aria-label"] ?? view.labels.pagination,
+    "data-state": view.pageCount > 1 ? "active" : "idle"
+  };
+  if (render)
+    return /* @__PURE__ */ jsx10("nav", { ...navProps, children: render({ page: view.currentPage, pageCount: view.pageCount, goToPage: view.goToPage }) });
+  return /* @__PURE__ */ jsxs7("nav", { ...navProps, children: [
+    /* @__PURE__ */ jsx10(
+      "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__ */ jsx10(
+      "button",
+      {
+        type: "button",
+        "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__ */ jsx10(
+      "button",
+      {
+        type: "button",
+        "data-keep-action": "next-page",
+        onClick: () => view.goToPage(view.currentPage + 1),
+        disabled: view.currentPage >= view.pageCount,
+        children: view.labels.next
+      }
+    )
+  ] });
+}
+
+// src/features/collection/hooks/useKeepCollection.ts
+import { useKeepList as useKeepList3 } from "@keepkit/core/react";
+import { useMemo as useMemo3, useState as useState6 } from "react";
+function useKeepCollection({
+  query,
+  pageSize,
+  urlSync,
+  urlAdapter,
+  features
+}) {
+  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 [activeTags, setActiveTags] = useState6(query.tags ?? []);
+  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: activeTags.length > 0 ? activeTags : void 0,
+      pagination: enabled.pagination ? { ...query.pagination, page, pageSize: resolvedPageSize } : query.pagination
+    }),
+    [activeTags, enabled.pagination, enabled.search, enabled.sort, page, query, resolvedPageSize, searchValue, sort]
+  );
+  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]);
+      setActiveTags(next.tags ?? []);
       setPage(next.pagination?.page ?? 1);
     },
     options: typeof urlSync === "object" ? urlSync : {},
     adapter: urlAdapter
   });
-  const list = useKeepList2(resolvedQuery);
+  const list = useKeepList3(resolvedQuery);
+  const allState = useKeepList3({});
   return {
     enabled,
     searchValue,
     sortValue: sortToValue(sort),
-    tag,
+    activeTags,
     resolvedPageSize,
     resolvedQuery,
     list,
+    allState,
     setSearchValue: (value) => {
       setSearchValue(value);
       setPage(1);
@@ -2113,182 +2684,54 @@ function useKeepCollection({
       setPage(1);
     },
     setTag: (value) => {
-      setTag(value);
+      setActiveTags(value ? [value] : []);
+      setPage(1);
+    },
+    removeTag: (tagToRemove) => {
+      setActiveTags((current) => current.filter((tag) => tag !== tagToRemove));
+      setPage(1);
+    },
+    clearFilters: () => {
+      setSearchValue("");
+      setActiveTags([]);
       setPage(1);
     },
     setPage
   };
 }
 
-// src/KeepList.tsx
+// src/features/collection/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/hooks/useRovingTabIndex.ts
-import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef4 } from "react";
-function useRovingTabIndex() {
-  const ref = useRef4(null);
-  const getItems = useCallback3(() => {
-    const root = ref.current;
-    if (!root) return [];
-    return Array.from(root.querySelectorAll('[data-keepkit="card"]')).filter(
-      (item) => item.getAttribute("aria-hidden") !== "true" && item.getAttribute("data-roving-disabled") !== "true"
-    );
-  }, []);
-  const syncTabIndices = useCallback3(() => {
-    const items = getItems();
-    if (items.length === 0) return;
-    const activeElement = document.activeElement;
-    const activeItem = items.find((item) => item === activeElement || item.contains(activeElement));
-    const activeIndex = activeItem ? items.indexOf(activeItem) : 0;
-    items.forEach((item, index) => {
-      item.tabIndex = index === activeIndex ? 0 : -1;
-    });
-  }, [getItems]);
-  useEffect3(() => {
-    const root = ref.current;
-    if (!root) return;
-    syncTabIndices();
-    const observer = new MutationObserver(syncTabIndices);
-    observer.observe(root, { childList: true, subtree: true });
-    return () => observer.disconnect();
-  }, [syncTabIndices]);
-  const onFocusCapture = useCallback3(
-    (event) => {
-      if (!(event.target instanceof HTMLElement)) return;
-      const item = event.target.closest('[data-keepkit="card"]');
-      if (!item || !ref.current?.contains(item)) return;
-      getItems().forEach((candidate) => {
-        candidate.tabIndex = candidate === item ? 0 : -1;
-      });
-    },
-    [getItems]
-  );
-  const onKeyDown = useCallback3(
-    (event) => {
-      if (event.defaultPrevented) return;
-      const items = getItems();
-      if (!(event.target instanceof HTMLElement)) return;
-      const current = event.target.closest('[data-keepkit="card"]');
-      if (!current || current !== event.target || !ref.current?.contains(current)) return;
-      const currentIndex = items.indexOf(current);
-      if (currentIndex < 0) return;
-      let nextIndex;
-      if (event.key === "Home") nextIndex = 0;
-      if (event.key === "End") nextIndex = items.length - 1;
-      if (event.key === "ArrowRight" || event.key === "ArrowDown")
-        nextIndex = Math.min(currentIndex + 1, items.length - 1);
-      if (event.key === "ArrowLeft" || event.key === "ArrowUp") nextIndex = Math.max(currentIndex - 1, 0);
-      if (nextIndex === void 0) return;
-      event.preventDefault();
-      if (nextIndex === currentIndex) return;
-      items[nextIndex]?.focus();
-    },
-    [getItems]
-  );
-  return { ref, onKeyDown, onFocusCapture };
-}
+import { isValidElement as isValidElement6 } from "react";
 
-// src/KeepItemCard.tsx
+// src/features/item/KeepItemCard.tsx
 import {
   createContext as createContext3,
   createElement as createElement2,
-  isValidElement as isValidElement2,
+  isValidElement as isValidElement4,
   useContext as useContext3,
-  useEffect as useEffect4,
-  useState as useState5
+  useEffect as useEffect5,
+  useState as useState8
 } from "react";
 
-// src/hooks/useKeepItemCard.ts
-import { useKeepItem as useKeepItem2 } from "@keepkit/core/react";
-function useKeepItemCard(options) {
-  const {
-    item,
-    title,
-    getTitle,
-    getImageProps,
-    href: hrefOption,
-    linkTargetAttribute,
-    linkRel,
-    onRemoveError,
-    onRemoved
-  } = options;
-  const itemState = useKeepItem2(item);
-  const emitFeedback = useKeepUiFeedback();
-  const removedMessage = useUiLabel("removedMessage");
-  const restoredMessage = useUiLabel("restoredMessage");
-  const undoLabel = useUiLabel("undo");
-  const resolvedTitle = typeof title === "function" ? title(item) : title ?? getTitle?.(item) ?? getMetaTitle(item.meta) ?? item.id;
-  const imageProps = getImageProps?.(item, resolvedTitle);
-  const href = typeof hrefOption === "function" ? hrefOption(item) : hrefOption;
-  const isAvailable = item.status === void 0 || item.status === "available";
-  const isExternalLink = href ? /^(?:[a-z][a-z\d+.-]*:|\/\/)/i.test(href) : false;
-  const statusLabelKey = item.status && item.status !== "available" ? getStatusLabelKey(item.status) : "statusUnknown";
-  const unavailableLabel = useUiLabel(statusLabelKey);
-  const remove = async () => {
-    const wasSaved = itemState.isSaved;
-    try {
-      await itemState.removeWithUndo();
-      onRemoved?.(item);
-      if (!wasSaved) return;
-      emitFeedback({
-        type: "item-removed",
-        item,
-        message: removedMessage,
-        undoLabel,
-        undo: async () => {
-          await itemState.undo();
-          emitFeedback({ type: "item-restored", item, items: [item], message: restoredMessage });
-        }
-      });
-    } catch (cause) {
-      onRemoveError?.(cause);
-    }
-  };
-  const state = {
-    item,
-    isSaved: itemState.isSaved,
-    isMutating: itemState.isMutating,
-    error: itemState.error,
-    remove,
-    status: item.status
-  };
+// src/features/item/hooks/useKeepItemStatusBadge.ts
+function useKeepItemStatusBadge(status) {
   return {
-    itemState,
-    state,
-    resolvedTitle,
-    imageProps,
-    href,
-    isAvailable,
-    displayStatus: getDisplayStatus(item.status),
-    resolvedLinkTarget: linkTargetAttribute ?? (isExternalLink ? "_blank" : void 0),
-    resolvedLinkRel: linkRel ?? (isExternalLink ? "noreferrer" : void 0),
-    statusLabel: item.status && item.status !== "available" ? unavailableLabel : void 0,
-    remove,
-    labels: {
-      save: useUiLabel("save"),
-      savedAt: useUiLabel("saved"),
-      error: useUiLabel("error"),
-      remove: useUiLabel("remove"),
-      tags: useUiLabel("tags")
-    }
+    resolvedStatus: getDisplayStatus(status),
+    statusLabel: useUiLabel(getStatusLabelKey(status)),
+    icon: getStatusIcon(status)
   };
 }
+function getStatusIcon(status) {
+  if (status === "available") return "check";
+  if (status === "expired") return "clock";
+  if (status === "removed" || status === "deleted") return "ban";
+  return "lock";
+}
 function getStatusLabelKey(status) {
   switch (status) {
+    case "available":
+      return "statusAvailable";
     case "expired":
       return "statusExpired";
     case "removed":
@@ -2297,28 +2740,85 @@ function getStatusLabelKey(status) {
       return "statusDeleted";
     case "private":
       return "statusPrivate";
-    default:
+    case "unknown":
       return "statusUnknown";
+    case "restricted":
+      return "statusPrivate";
   }
 }
 function getDisplayStatus(status) {
-  if (status === void 0 || status === "available") return "available";
+  if (status === "available") return "available";
   if (status === "expired") return "expired";
-  if (status === "removed") return "removed";
+  if (status === "removed" || status === "deleted") return "removed";
   return "restricted";
 }
 
-// src/hooks/useKeepStaleNotice.ts
-import { useKeepContext as useKeepContext2 } from "@keepkit/core/react";
-import { useState as useState4 } from "react";
+// src/features/item/KeepItemStatusBadge.tsx
+import { Fragment as Fragment6, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+function KeepItemStatusBadge({ status = "available", label, className, ...props }) {
+  const view = useKeepItemStatusBadge(status);
+  return /* @__PURE__ */ jsxs8(
+    "span",
+    {
+      ...props,
+      className,
+      role: "img",
+      "aria-label": props["aria-label"] ?? view.statusLabel,
+      "data-keepkit": "status-badge",
+      "data-status": status,
+      "data-item-status": view.resolvedStatus,
+      children: [
+        /* @__PURE__ */ jsx11(StatusIcon, { name: view.icon }),
+        /* @__PURE__ */ jsx11("span", { "data-status-label": "true", children: label ?? view.statusLabel })
+      ]
+    }
+  );
+}
+function StatusIcon({ name }) {
+  return /* @__PURE__ */ jsxs8(
+    "svg",
+    {
+      "data-status-icon": name,
+      viewBox: "0 0 24 24",
+      width: "1em",
+      height: "1em",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        name === "check" ? /* @__PURE__ */ jsx11("path", { d: "m5 12 4 4L19 6" }) : null,
+        name === "clock" ? /* @__PURE__ */ jsxs8(Fragment6, { children: [
+          /* @__PURE__ */ jsx11("circle", { cx: "12", cy: "12", r: "8" }),
+          /* @__PURE__ */ jsx11("path", { d: "M12 7v5l3 2" })
+        ] }) : null,
+        name === "ban" ? /* @__PURE__ */ jsxs8(Fragment6, { children: [
+          /* @__PURE__ */ jsx11("circle", { cx: "12", cy: "12", r: "8" }),
+          /* @__PURE__ */ jsx11("path", { d: "m6.5 6.5 11 11" })
+        ] }) : null,
+        name === "lock" ? /* @__PURE__ */ jsxs8(Fragment6, { children: [
+          /* @__PURE__ */ jsx11("rect", { x: "5", y: "10", width: "14", height: "10", rx: "2" }),
+          /* @__PURE__ */ jsx11("path", { d: "M8 10V7a4 4 0 0 1 8 0v3" })
+        ] }) : null
+      ]
+    }
+  );
+}
+
+// src/features/status/hooks/useKeepStaleNotice.ts
+import { useKeepContext as useKeepContext3 } from "@keepkit/core/react";
+import { useState as useState7 } from "react";
 function useKeepStaleNotice({ item, onRetry, onRemoved }) {
-  const context = useKeepContext2();
+  const context = useKeepContext3();
   const emitFeedback = useKeepUiFeedback();
   const removedMessage = useUiLabel("removedMessage");
   const restoredMessage = useUiLabel("restoredMessage");
   const undoLabel = useUiLabel("undo");
-  const [isRetrying, setIsRetrying] = useState4(false);
-  const [error, setError] = useState4(null);
+  const [isRetrying, setIsRetrying] = useState7(false);
+  const [error, setError] = useState7(null);
   async function retry() {
     setError(null);
     setIsRetrying(true);
@@ -2364,7 +2864,7 @@ function useKeepStaleNotice({ item, onRetry, onRemoved }) {
   };
 }
 function useKeepPruneStale({ statuses, onPruned }) {
-  const context = useKeepContext2();
+  const context = useKeepContext3();
   const emitFeedback = useKeepUiFeedback();
   const staleItems = context.items.filter((item) => item.status && statuses.includes(item.status));
   const staleIds = staleItems.map((item) => item.id);
@@ -2397,54 +2897,8 @@ function useKeepPruneStale({ statuses, onPruned }) {
   };
 }
 
-// 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";
+// src/features/status/KeepStaleNotice.tsx
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 function KeepStaleNotice({
   item,
   onRetry,
@@ -2456,11 +2910,11 @@ function KeepStaleNotice({
   ...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(
+  return /* @__PURE__ */ jsxs9("aside", { ...props, className, "data-keepkit": "stale-notice", "data-state": view.error ? "error" : "stale", children: [
+    /* @__PURE__ */ jsx12(KeepItemStatusBadge, { status: view.status }),
+    children ?? (item.statusReason ? /* @__PURE__ */ jsx12("p", { children: item.statusReason }) : null),
+    /* @__PURE__ */ jsxs9("div", { children: [
+      /* @__PURE__ */ jsx12(
         "button",
         {
           type: "button",
@@ -2470,7 +2924,7 @@ function KeepStaleNotice({
           children: retryLabel ?? view.labels.retry
         }
       ),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx12(
         "button",
         {
           type: "button",
@@ -2481,7 +2935,7 @@ function KeepStaleNotice({
         }
       )
     ] }),
-    view.error ? /* @__PURE__ */ jsx8("p", { role: "alert", children: view.error instanceof Error ? view.error.message : view.labels.error }) : null
+    view.error ? /* @__PURE__ */ jsx12("p", { role: "alert", children: view.error instanceof Error ? view.error.message : view.labels.error }) : null
   ] });
 }
 function KeepPruneStaleButton({
@@ -2493,7 +2947,7 @@ function KeepPruneStaleButton({
   ...props
 }) {
   const view = useKeepPruneStale({ statuses, onPruned });
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx12(
     "button",
     {
       ...props,
@@ -2509,8 +2963,104 @@ function KeepPruneStaleButton({
   );
 }
 
-// src/KeepItemCard.tsx
-import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+// src/features/item/hooks/useKeepItemCard.ts
+import { useKeepItem as useKeepItem2 } from "@keepkit/core/react";
+function useKeepItemCard(options) {
+  const {
+    item,
+    title,
+    getTitle,
+    getImageProps,
+    href: hrefOption,
+    linkTargetAttribute,
+    linkRel,
+    onRemoveError,
+    onRemoved
+  } = options;
+  const itemState = useKeepItem2(item);
+  const emitFeedback = useKeepUiFeedback();
+  const removedMessage = useUiLabel("removedMessage");
+  const restoredMessage = useUiLabel("restoredMessage");
+  const undoLabel = useUiLabel("undo");
+  const resolvedTitle = typeof title === "function" ? title(item) : title ?? getTitle?.(item) ?? getMetaTitle(item.meta) ?? item.id;
+  const imageProps = getImageProps?.(item, resolvedTitle);
+  const href = typeof hrefOption === "function" ? hrefOption(item) : hrefOption;
+  const isAvailable = item.status === void 0 || item.status === "available";
+  const isExternalLink = href ? /^(?:[a-z][a-z\d+.-]*:|\/\/)/i.test(href) : false;
+  const statusLabelKey = item.status && item.status !== "available" ? getStatusLabelKey2(item.status) : "statusUnknown";
+  const unavailableLabel = useUiLabel(statusLabelKey);
+  const remove = async () => {
+    const wasSaved = itemState.isSaved;
+    try {
+      await itemState.removeWithUndo();
+      onRemoved?.(item);
+      if (!wasSaved) return;
+      emitFeedback({
+        type: "item-removed",
+        item,
+        message: removedMessage,
+        undoLabel,
+        undo: async () => {
+          await itemState.undo();
+          emitFeedback({ type: "item-restored", item, items: [item], message: restoredMessage });
+        }
+      });
+    } catch (cause) {
+      onRemoveError?.(cause);
+    }
+  };
+  const state = {
+    item,
+    isSaved: itemState.isSaved,
+    isMutating: itemState.isMutating,
+    error: itemState.error,
+    remove,
+    status: item.status
+  };
+  return {
+    itemState,
+    state,
+    resolvedTitle,
+    imageProps,
+    href,
+    isAvailable,
+    displayStatus: getDisplayStatus2(item.status),
+    resolvedLinkTarget: linkTargetAttribute ?? (isExternalLink ? "_blank" : void 0),
+    resolvedLinkRel: linkRel ?? (isExternalLink ? "noreferrer" : void 0),
+    statusLabel: item.status && item.status !== "available" ? unavailableLabel : void 0,
+    remove,
+    labels: {
+      save: useUiLabel("save"),
+      savedAt: useUiLabel("saved"),
+      error: useUiLabel("error"),
+      remove: useUiLabel("remove"),
+      tags: useUiLabel("tags")
+    }
+  };
+}
+function getStatusLabelKey2(status) {
+  switch (status) {
+    case "expired":
+      return "statusExpired";
+    case "removed":
+      return "statusRemoved";
+    case "deleted":
+      return "statusDeleted";
+    case "private":
+      return "statusPrivate";
+    default:
+      return "statusUnknown";
+  }
+}
+function getDisplayStatus2(status) {
+  if (status === void 0 || status === "available") return "available";
+  if (status === "expired") return "expired";
+  if (status === "removed") return "removed";
+  return "restricted";
+}
+
+// src/features/item/KeepItemCard.tsx
+import { Fragment as Fragment7, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 var KeepItemCardContext = createContext3(null);
 function useKeepItemCardCompound(part) {
   const context = useContext3(KeepItemCardContext);
@@ -2560,7 +3110,7 @@ function KeepItemCardRoot({
   });
   const contextQuery = useKeepSearchQuery();
   const searchQuery = highlightQuery ?? contextQuery;
-  const contentChildren = asChild && isValidElement2(children) ? void 0 : children;
+  const contentChildren = asChild && isValidElement4(children) ? void 0 : children;
   function renderLink(content) {
     if (!view.href || !view.isAvailable) return content;
     const linkProps = {
@@ -2570,17 +3120,17 @@ function KeepItemCardRoot({
       onClick: (event) => onOpen?.(item, event),
       children: content
     };
-    return LinkComponent ? /* @__PURE__ */ jsx9(LinkComponent, { ...linkProps }) : /* @__PURE__ */ jsx9("a", { ...linkProps });
+    return LinkComponent ? /* @__PURE__ */ jsx13(LinkComponent, { ...linkProps }) : /* @__PURE__ */ jsx13("a", { ...linkProps });
   }
   function renderTitle(content) {
     if (linkTarget !== "title") return content;
     if (view.isAvailable) return renderLink(content);
-    return view.href ? /* @__PURE__ */ jsx9("span", { "aria-disabled": "true", "data-link-disabled": "true", children: content }) : content;
+    return view.href ? /* @__PURE__ */ jsx13("span", { "aria-disabled": "true", "data-link-disabled": "true", children: content }) : content;
   }
   const resolvedImageProps = view.imageProps ? { ...view.imageProps, alt: imageAlt ?? view.imageProps.alt } : void 0;
   const imageSource = resolvedImageProps?.src;
-  const [imageStatus, setImageStatus] = useState5(imageSource ? "loading" : "error");
-  useEffect4(() => {
+  const [imageStatus, setImageStatus] = useState8(imageSource ? "loading" : "error");
+  useEffect5(() => {
     setImageStatus(imageSource ? "loading" : "error");
   }, [imageSource]);
   let image = null;
@@ -2598,21 +3148,21 @@ function KeepItemCardRoot({
         setImageStatus("error");
       }
     };
-    image = renderImage?.(imagePropsWithHandlers, item) ?? (ImageComponent ? /* @__PURE__ */ jsx9(ImageComponent, { ...imagePropsWithHandlers }) : /* @__PURE__ */ jsx9("img", { ...imagePropsWithHandlers, alt: imagePropsWithHandlers.alt }));
+    image = renderImage?.(imagePropsWithHandlers, item) ?? (ImageComponent ? /* @__PURE__ */ jsx13(ImageComponent, { ...imagePropsWithHandlers }) : /* @__PURE__ */ jsx13("img", { ...imagePropsWithHandlers, alt: imagePropsWithHandlers.alt }));
   }
   const tags = showTags ? item.tags ?? [] : [];
   const renderedTags = showTags && tags.length > 0 ? renderTags?.(tags, item) ?? null : null;
-  const meta = showSavedAt ? /* @__PURE__ */ jsxs5("div", { "data-card-meta": true, children: [
-    /* @__PURE__ */ jsxs5("span", { children: [
+  const meta = showSavedAt ? /* @__PURE__ */ jsxs10("div", { "data-card-meta": true, children: [
+    /* @__PURE__ */ jsxs10("span", { children: [
       view.labels.savedAt,
       ":"
     ] }),
     " ",
-    /* @__PURE__ */ jsx9("time", { dateTime: new Date(item.savedAt).toISOString(), children: formatSavedAt(item.savedAt) })
+    /* @__PURE__ */ jsx13("time", { dateTime: new Date(item.savedAt).toISOString(), children: formatSavedAt(item.savedAt) })
   ] }) : null;
-  const error = view.itemState.error ? /* @__PURE__ */ jsx9("p", { role: "alert", children: getErrorMessage2(view.itemState.error, view.labels.error) }) : null;
-  const actions = view.statusLabel ? /* @__PURE__ */ jsx9(KeepStaleNotice, { item, onRetry, onRemoved }) : /* @__PURE__ */ jsxs5(Fragment4, { children: [
-    showSaveButton ? /* @__PURE__ */ jsx9(
+  const error = view.itemState.error ? /* @__PURE__ */ jsx13("p", { role: "alert", children: getErrorMessage2(view.itemState.error, view.labels.error) }) : null;
+  const actions = view.statusLabel ? /* @__PURE__ */ jsx13(KeepStaleNotice, { item, onRetry, onRemoved }) : /* @__PURE__ */ jsxs10(Fragment7, { children: [
+    showSaveButton ? /* @__PURE__ */ jsx13(
       KeepButton,
       {
         item: toKeepButtonItem(item),
@@ -2620,7 +3170,7 @@ function KeepItemCardRoot({
         getAriaLabel: (buttonState) => `${buttonState.isSaved ? view.labels.remove : view.labels.save} ${String(view.resolvedTitle)}`
       }
     ) : null,
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx13(
       "button",
       {
         type: "button",
@@ -2643,18 +3193,18 @@ function KeepItemCardRoot({
     meta,
     error,
     actions,
-    renderText: (content) => /* @__PURE__ */ jsx9(KeepHighlight, { query: searchQuery, children: content })
+    renderText: (content) => /* @__PURE__ */ jsx13(KeepHighlight, { query: searchQuery, children: content })
   };
-  const defaultBody = /* @__PURE__ */ jsxs5(Fragment4, { children: [
-    /* @__PURE__ */ jsx9(KeepItemCardMedia, {}),
-    /* @__PURE__ */ jsx9(KeepItemCardContent, {}),
-    /* @__PURE__ */ jsx9(KeepItemCardActions, {})
+  const defaultBody = /* @__PURE__ */ jsxs10(Fragment7, { children: [
+    /* @__PURE__ */ jsx13(KeepItemCardMedia, {}),
+    /* @__PURE__ */ jsx13(KeepItemCardContent, {}),
+    /* @__PURE__ */ jsx13(KeepItemCardActions, {})
   ] });
   const body = render ? render(view.state) : typeof contentChildren === "function" ? contentChildren(view.state) : contentChildren ?? defaultBody;
   const linkedBody = linkTarget === "card" && view.isAvailable ? renderLink(body) : body;
   const root = renderRoot(
     asChild,
-    isValidElement2(children) ? children : void 0,
+    isValidElement4(children) ? children : void 0,
     {
       ...rootProps,
       className,
@@ -2669,18 +3219,18 @@ function KeepItemCardRoot({
     linkedBody,
     "KeepItemCard"
   );
-  return /* @__PURE__ */ jsx9(KeepItemCardContext.Provider, { value: compoundValue, children: root });
+  return /* @__PURE__ */ jsx13(KeepItemCardContext.Provider, { value: compoundValue, children: root });
 }
 function KeepItemCardMedia({ children, fallback, ...props }) {
   const context = useKeepItemCardCompound("Media");
-  return /* @__PURE__ */ jsx9("div", { ...props, "data-keep-card-part": "media", "data-media-status": context.imageStatus, children: children ?? context.image ?? /* @__PURE__ */ jsx9("span", { role: "img", "aria-label": context.fallbackLabel, "data-keep-card-fallback": "true", children: fallback ?? /* @__PURE__ */ jsx9(KeepMediaPlaceholderIcon, {}) }) });
+  return /* @__PURE__ */ jsx13("div", { ...props, "data-keep-card-part": "media", "data-media-status": context.imageStatus, "data-aspect-ratio": "1/1", children: children ?? context.image ?? /* @__PURE__ */ jsx13("span", { role: "img", "aria-label": context.fallbackLabel, "data-keep-card-fallback": "true", children: fallback ?? /* @__PURE__ */ jsx13(KeepMediaPlaceholderIcon, {}) }) });
 }
 function KeepItemCardContent({ children, ...props }) {
   const context = useKeepItemCardCompound("Content");
-  return /* @__PURE__ */ jsx9("div", { ...props, "data-keep-card-part": "content", children: children === void 0 ? /* @__PURE__ */ jsxs5(Fragment4, { children: [
-    /* @__PURE__ */ jsx9(KeepItemCardTitle, {}),
+  return /* @__PURE__ */ jsx13("div", { ...props, "data-keep-card-part": "content", children: children === void 0 ? /* @__PURE__ */ jsxs10(Fragment7, { children: [
+    /* @__PURE__ */ jsx13(KeepItemCardTitle, {}),
     context.meta,
-    /* @__PURE__ */ jsx9(KeepItemCardTags, {}),
+    /* @__PURE__ */ jsx13(KeepItemCardTags, {}),
     context.error
   ] }) : context.renderText(children) });
 }
@@ -2688,13 +3238,13 @@ function KeepItemCardTitle({ as = "h3", children, ...props }) {
   const context = useKeepItemCardCompound("Title");
   return createElement2(
     as,
-    { ...props, "data-keep-card-part": "title" },
+    { ...props, "data-keep-card-part": "title", "data-line-clamp": "2" },
     context.renderTitle(context.renderText(children ?? context.resolvedTitle))
   );
 }
 function KeepMediaPlaceholderIcon() {
-  return /* @__PURE__ */ jsxs5("svg", { "data-media-fallback-icon": "true", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs10("svg", { "data-media-fallback-icon": "true", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx13(
       "path",
       {
         d: "M4 5.5A1.5 1.5 0 0 1 5.5 4h13A1.5 1.5 0 0 1 20 5.5v13a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 18.5v-13Z",
@@ -2702,19 +3252,19 @@ function KeepMediaPlaceholderIcon() {
         stroke: "currentColor"
       }
     ),
-    /* @__PURE__ */ jsx9("circle", { cx: "9", cy: "9", r: "1.5", fill: "currentColor" }),
-    /* @__PURE__ */ jsx9("path", { d: "m5.5 18 4.5-4.5 3 3 2-2L19 18", fill: "none", stroke: "currentColor" })
+    /* @__PURE__ */ jsx13("circle", { cx: "9", cy: "9", r: "1.5", fill: "currentColor" }),
+    /* @__PURE__ */ jsx13("path", { d: "m5.5 18 4.5-4.5 3 3 2-2L19 18", fill: "none", stroke: "currentColor" })
   ] });
 }
 function KeepItemCardTags({ children, ...props }) {
   const context = useKeepItemCardCompound("Tags");
   if (children === void 0 && context.renderedTags) return context.renderedTags;
   if (children === void 0 && context.tags.length === 0) return null;
-  return /* @__PURE__ */ jsx9("ul", { ...props, "aria-label": props["aria-label"] ?? context.tagsLabel, "data-keep-card-part": "tags", children: children ?? context.tags.map((tag) => /* @__PURE__ */ jsx9("li", { children: tag }, tag)) });
+  return /* @__PURE__ */ jsx13("ul", { ...props, "aria-label": props["aria-label"] ?? context.tagsLabel, "data-keep-card-part": "tags", children: children ?? context.tags.map((tag) => /* @__PURE__ */ jsx13("li", { children: tag }, tag)) });
 }
 function KeepItemCardActions({ children, ...props }) {
   const context = useKeepItemCardCompound("Actions");
-  return /* @__PURE__ */ jsx9("div", { ...props, "data-keep-card-part": "actions", children: children ?? context.actions });
+  return /* @__PURE__ */ jsx13("div", { ...props, "data-keep-card-part": "actions", children: children ?? context.actions });
 }
 var KeepItemCard = Object.assign(KeepItemCardRoot, {
   Media: KeepItemCardMedia,
@@ -2722,405 +3272,256 @@ var KeepItemCard = Object.assign(KeepItemCardRoot, {
   Title: KeepItemCardTitle,
   Tags: KeepItemCardTags,
   Actions: KeepItemCardActions
-});
-function KeepItemCardSkeleton({ layout = "list", ...props }) {
-  return /* @__PURE__ */ jsxs5("article", { ...props, "aria-hidden": "true", "data-keepkit": "card-skeleton", "data-layout": layout, "data-state": "loading", children: [
-    /* @__PURE__ */ jsx9("span", { "data-skeleton-part": "media" }),
-    /* @__PURE__ */ jsx9("span", { "data-skeleton-part": "title" }),
-    /* @__PURE__ */ jsx9("span", { "data-skeleton-part": "meta" }),
-    /* @__PURE__ */ jsx9("span", { "data-skeleton-part": "tag" }),
-    /* @__PURE__ */ jsx9("span", { "data-skeleton-part": "tag" })
-  ] });
-}
-function formatSavedAt(timestamp) {
-  return new Date(timestamp).toISOString().slice(0, 10);
-}
-function getErrorMessage2(error, fallback) {
-  return error instanceof Error ? error.message : fallback;
-}
-
-// src/KeepList.tsx
-import { Fragment as Fragment5, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
-function KeepList(props) {
-  const { fallback, onBoundaryError, boundaryResetKey, ...listProps } = props;
-  const content = /* @__PURE__ */ jsx10(KeepListContent, { ...listProps });
-  if (fallback === void 0 && onBoundaryError === void 0) return content;
-  return /* @__PURE__ */ jsx10(KeepErrorBoundary, { fallback, onError: onBoundaryError, resetKey: boundaryResetKey, children: content });
-}
-function KeepListContent({
-  query,
-  children,
-  renderItem,
-  loading,
-  renderLoading,
-  loadingCount = 6,
-  empty,
-  error: errorContent,
-  itemCardProps,
-  layout = "list",
-  asChild = false,
-  onKeyDown,
-  onFocusCapture,
-  className,
-  ...rootProps
-}) {
-  const view = useKeepListView(query);
-  const roving = useRovingTabIndex();
-  const { state } = view;
-  const body = getListBody(state, {
-    children,
-    renderItem,
-    loading: renderLoading !== void 0 ? renderLoading : loading,
-    loadingCount,
-    loadingLabel: view.labels.loading,
-    empty: empty ?? view.labels.empty,
-    error: errorContent ?? view.labels.error,
-    itemCardProps,
-    layout
-  });
-  return renderRoot(
-    asChild,
-    asChild && isValidElement3(children) ? children : void 0,
-    {
-      ...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,
-      "data-roving-tabindex": "true",
-      role: rootProps.role ?? "group",
-      ref: roving.ref,
-      onKeyDown: (event) => {
-        onKeyDown?.(event);
-        if (!event.defaultPrevented) roving.onKeyDown(event);
-      },
-      onFocusCapture: (event) => {
-        onFocusCapture?.(event);
-        if (!event.defaultPrevented) roving.onFocusCapture(event);
-      }
-    },
-    /* @__PURE__ */ jsx10(KeepSearchQueryProvider, { query: query?.search?.query, children: body }),
-    "KeepList"
-  );
-}
-function getListState(state) {
-  if (state.error && state.items.length === 0) return "error";
-  if (state.isLoading && !state.isHydrated) return "loading";
-  if (state.isHydrated && state.items.length === 0) return "empty";
-  return "ready";
-}
-function getListBody(state, options) {
-  if (state.error && state.items.length === 0) return resolveContent(options.error, state);
-  if (state.isLoading && !state.isHydrated) {
-    if (options.loading !== void 0) return resolveContent(options.loading, state);
-    const count = Number.isFinite(options.loadingCount) ? Math.max(0, Math.floor(options.loadingCount)) : 6;
-    return /* @__PURE__ */ jsxs6(Fragment5, { children: [
-      /* @__PURE__ */ jsx10("span", { role: "status", "data-keepkit": "loading-label", children: options.loadingLabel }),
-      /* @__PURE__ */ jsx10("ul", { "data-keepkit": "skeleton-list", "data-layout": options.layout, children: Array.from({ length: count }, (_, index) => (
-        // biome-ignore lint/suspicious/noArrayIndexKey: Static loading placeholders never reorder.
-        /* @__PURE__ */ jsx10("li", { children: /* @__PURE__ */ jsx10(KeepItemCardSkeleton, { layout: options.layout }) }, index)
-      )) })
-    ] });
-  }
-  if (state.isHydrated && state.items.length === 0) return resolveContent(options.empty, state);
-  if (typeof options.children === "function") return options.children(state);
-  if (options.children !== void 0 && !isValidElement3(options.children)) return options.children;
-  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)
-  ) });
+});
+function KeepItemCardSkeleton({ layout = "list", ...props }) {
+  return /* @__PURE__ */ jsxs10("article", { ...props, "aria-hidden": "true", "data-keepkit": "card-skeleton", "data-layout": layout, "data-state": "loading", children: [
+    /* @__PURE__ */ jsx13("span", { "data-skeleton-part": "media" }),
+    /* @__PURE__ */ jsx13("span", { "data-skeleton-part": "title" }),
+    /* @__PURE__ */ jsx13("span", { "data-skeleton-part": "meta" }),
+    /* @__PURE__ */ jsx13("span", { "data-skeleton-part": "tag" }),
+    /* @__PURE__ */ jsx13("span", { "data-skeleton-part": "tag" })
+  ] });
 }
-
-// src/KeepTagFilter.tsx
-import { isValidElement as isValidElement4 } from "react";
-
-// src/hooks/useKeepTagFilter.ts
-import { useKeepList as useKeepList4 } from "@keepkit/core/react";
-import { useCallback as useCallback4, useMemo as useMemo3, useState as useState6 } from "react";
-function useKeepTagFilter(options) {
-  const { query, controlledValue, defaultValue, onChange, onValueChange } = options;
-  const [uncontrolledValue, setUncontrolledValue] = useState6(defaultValue);
-  const resolvedValue = controlledValue ?? uncontrolledValue;
-  const list = useKeepList4({
-    ...query,
-    tags: resolvedValue ? [...query?.tags ?? [], resolvedValue] : query?.tags
-  });
-  const select = useCallback4(
-    (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") }
-  };
+function formatSavedAt(timestamp) {
+  return new Date(timestamp).toISOString().slice(0, 10);
+}
+function getErrorMessage2(error, fallback) {
+  return error instanceof Error ? error.message : fallback;
 }
 
-// src/KeepTagFilter.tsx
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
-function KeepTagFilter({
-  query,
-  value: controlledValue,
-  defaultValue,
-  onChange,
-  onValueChange,
-  allLabel,
-  ariaLabel,
-  renderTag,
-  render,
+// src/features/status/KeepEmptyState.tsx
+import { isValidElement as isValidElement5 } from "react";
+import { Fragment as Fragment8, jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+function KeepEmptyState({
+  title,
+  description,
+  action,
   children,
+  variant,
+  onClearFilters,
   asChild = false,
   className,
   ...rootProps
 }) {
-  const view = useKeepTagFilter({ query, controlledValue, defaultValue, onChange, onValueChange });
-  const contentChildren = asChild && isValidElement4(children) ? void 0 : children;
-  const body = render ? render(view.state) : typeof contentChildren === "function" ? contentChildren(view.state) : contentChildren ?? /* @__PURE__ */ jsxs7("fieldset", { children: [
-    /* @__PURE__ */ jsx11("legend", { children: ariaLabel ?? view.labels.aria }),
-    /* @__PURE__ */ jsx11(
-      "button",
-      {
-        type: "button",
-        "data-keep-action": "filter-all-tags",
-        "aria-pressed": view.state.value === void 0,
-        onClick: () => view.state.select(),
-        children: allLabel ?? view.labels.all
-      }
-    ),
-    view.state.tags.map((tag) => /* @__PURE__ */ jsxs7(
-      "button",
-      {
-        type: "button",
-        "data-keep-action": "filter-tag",
-        "aria-pressed": view.state.value === tag,
-        onClick: () => view.state.select(tag),
-        children: [
-          renderTag ? renderTag(tag, view.state.tagCounts[tag] ?? 0, view.state.value === tag) : tag,
-          /* @__PURE__ */ jsxs7("span", { children: [
-            " (",
-            view.state.tagCounts[tag] ?? 0,
-            ")"
-          ] })
-        ]
-      },
-      tag
-    ))
+  const resolvedVariant = variant ?? "empty-storage";
+  const defaultTitle = useUiLabel(resolvedVariant === "empty-filtered" ? "noFilteredItems" : "noItems");
+  const defaultDescription = useUiLabel(
+    resolvedVariant === "empty-filtered" ? "noFilteredItemsDescription" : "emptyStorageDescription"
+  );
+  const clearLabel = useUiLabel("clearFilters");
+  const contentChildren = asChild && isValidElement5(children) ? void 0 : children;
+  const body = contentChildren ?? /* @__PURE__ */ jsxs11(Fragment8, { children: [
+    /* @__PURE__ */ jsx14("h2", { children: title ?? defaultTitle }),
+    description ?? /* @__PURE__ */ jsx14("p", { children: defaultDescription }),
+    action ?? (resolvedVariant === "empty-filtered" && onClearFilters ? /* @__PURE__ */ jsx14("button", { type: "button", "data-keep-action": "clear-filters", onClick: onClearFilters, children: clearLabel }) : null)
   ] });
   return renderRoot(
     asChild,
-    isValidElement4(children) ? children : void 0,
-    {
-      ...rootProps,
-      className,
-      "data-keepkit": "tag-filter",
-      "data-state": view.state.value === void 0 ? "all" : "filtered",
-      "data-loading": view.isLoading ? "true" : void 0
-    },
+    children,
+    { ...rootProps, className, "data-keepkit": "empty-state", "data-state": variant ?? "empty" },
     body,
-    "KeepTagFilter"
+    "KeepEmptyState"
   );
 }
 
-// src/hooks/useQueryControls.ts
-import { useEffect as useEffect5, useState as useState7 } from "react";
-function useKeepSearchInput(options) {
-  const { controlledValue, defaultValue, debounceMs, onValueChange } = options;
-  const [uncontrolledValue, setUncontrolledValue] = useState7(defaultValue);
-  const value = controlledValue ?? uncontrolledValue;
-  useEffect5(() => {
-    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] = useState7(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);
-  };
+// src/features/collection/hooks/useKeepListView.ts
+import { useKeepList as useKeepList4 } from "@keepkit/core/react";
+function useKeepListView(query) {
   return {
-    pageCount,
-    currentPage,
-    goToPage,
-    visiblePages: getVisiblePages(currentPage, pageCount, Math.max(1, maxPageButtons)),
+    state: useKeepList4(query),
+    allState: useKeepList4({}),
     labels: {
-      previous: useUiLabel("previousPage"),
-      next: useUiLabel("nextPage"),
-      page: useUiLabel("page"),
-      pagination: useUiLabel("pagination")
+      loading: useUiLabel("loadingItems"),
+      empty: useUiLabel("noItems"),
+      error: useUiLabel("errorItems")
     }
   };
 }
-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 { Fragment as Fragment6, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
-function KeepSearchInput({
-  value: controlledValue,
-  defaultValue = "",
-  debounceMs = 300,
-  onValueChange,
-  "aria-label": ariaLabel,
-  placeholder,
-  ...props
-}) {
-  const view = useKeepSearchInput({ controlledValue, defaultValue, debounceMs, onValueChange });
-  return /* @__PURE__ */ jsx12(
-    "input",
-    {
-      ...props,
-      "data-keepkit": "search-input",
-      "data-keep-action": "search",
-      type: "search",
-      value: view.value,
-      "data-state": view.value ? "active" : "idle",
-      "data-disabled": props.disabled ? "true" : void 0,
-      "aria-label": ariaLabel ?? view.label,
-      placeholder: placeholder ?? view.label,
-      onChange: view.change
-    }
+// src/features/collection/hooks/useRovingTabIndex.ts
+import { useCallback as useCallback3, useEffect as useEffect6, useRef as useRef4 } from "react";
+function useRovingTabIndex() {
+  const ref = useRef4(null);
+  const getItems = useCallback3(() => {
+    const root = ref.current;
+    if (!root) return [];
+    return Array.from(root.querySelectorAll('[data-keepkit="card"]')).filter(
+      (item) => item.getAttribute("aria-hidden") !== "true" && item.getAttribute("data-roving-disabled") !== "true"
+    );
+  }, []);
+  const syncTabIndices = useCallback3(() => {
+    const items = getItems();
+    if (items.length === 0) return;
+    const activeElement = document.activeElement;
+    const activeItem = items.find((item) => item === activeElement || item.contains(activeElement));
+    const activeIndex = activeItem ? items.indexOf(activeItem) : 0;
+    items.forEach((item, index) => {
+      item.tabIndex = index === activeIndex ? 0 : -1;
+    });
+  }, [getItems]);
+  useEffect6(() => {
+    const root = ref.current;
+    if (!root) return;
+    syncTabIndices();
+    const observer = new MutationObserver(syncTabIndices);
+    observer.observe(root, { childList: true, subtree: true });
+    return () => observer.disconnect();
+  }, [syncTabIndices]);
+  const onFocusCapture = useCallback3(
+    (event) => {
+      if (!(event.target instanceof HTMLElement)) return;
+      const item = event.target.closest('[data-keepkit="card"]');
+      if (!item || !ref.current?.contains(item)) return;
+      getItems().forEach((candidate) => {
+        candidate.tabIndex = candidate === item ? 0 : -1;
+      });
+    },
+    [getItems]
   );
-}
-function KeepSortSelect({
-  value: controlledValue,
-  defaultValue = "updatedAt:desc",
-  onValueChange,
-  "aria-label": ariaLabel,
-  children,
-  ...props
-}) {
-  const view = useKeepSortSelect({ controlledValue, defaultValue, onValueChange });
-  const options = children ?? /* @__PURE__ */ jsxs8(Fragment6, { children: [
-    /* @__PURE__ */ jsx12("option", { value: "updatedAt:desc", children: view.labels.updatedNewest }),
-    /* @__PURE__ */ jsx12("option", { value: "updatedAt:asc", children: view.labels.updatedOldest }),
-    /* @__PURE__ */ jsx12("option", { value: "savedAt:desc", children: view.labels.savedNewest }),
-    /* @__PURE__ */ jsx12("option", { value: "savedAt:asc", children: view.labels.savedOldest })
-  ] });
-  return /* @__PURE__ */ jsx12(
-    "select",
-    {
-      ...props,
-      "data-keepkit": "sort-select",
-      "data-keep-action": "sort",
-      value: view.value,
-      "data-state": "selected",
-      "data-disabled": props.disabled ? "true" : void 0,
-      "aria-label": ariaLabel ?? view.labels.sort,
-      onChange: view.change,
-      children: options
-    }
+  const onKeyDown = useCallback3(
+    (event) => {
+      if (event.defaultPrevented) return;
+      const items = getItems();
+      if (!(event.target instanceof HTMLElement)) return;
+      const current = event.target.closest('[data-keepkit="card"]');
+      if (!current || current !== event.target || !ref.current?.contains(current)) return;
+      const currentIndex = items.indexOf(current);
+      if (currentIndex < 0) return;
+      let nextIndex;
+      if (event.key === "Home") nextIndex = 0;
+      if (event.key === "End") nextIndex = items.length - 1;
+      if (event.key === "ArrowRight" || event.key === "ArrowDown")
+        nextIndex = Math.min(currentIndex + 1, items.length - 1);
+      if (event.key === "ArrowLeft" || event.key === "ArrowUp") nextIndex = Math.max(currentIndex - 1, 0);
+      if (nextIndex === void 0) return;
+      event.preventDefault();
+      if (nextIndex === currentIndex) return;
+      items[nextIndex]?.focus();
+    },
+    [getItems]
   );
+  return { ref, onKeyDown, onFocusCapture };
 }
-function KeepPagination({
-  totalCount,
-  pageSize,
-  page = 1,
-  maxPageButtons = 7,
-  onPageChange,
-  render,
-  ...props
+
+// src/features/collection/KeepList.tsx
+import { Fragment as Fragment9, jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+function KeepList(props) {
+  const { fallback, onBoundaryError, boundaryResetKey, ...listProps } = props;
+  const content = /* @__PURE__ */ jsx15(KeepListContent, { ...listProps });
+  if (fallback === void 0 && onBoundaryError === void 0) return content;
+  return /* @__PURE__ */ jsx15(KeepErrorBoundary, { fallback, onError: onBoundaryError, resetKey: boundaryResetKey, children: content });
+}
+function KeepListContent({
+  query,
+  children,
+  renderItem,
+  loading,
+  renderLoading,
+  loadingCount = 6,
+  empty,
+  error: errorContent,
+  onClearFilters,
+  itemCardProps,
+  layout = "list",
+  asChild = false,
+  onKeyDown,
+  onFocusCapture,
+  className,
+  ...rootProps
 }) {
-  const view = useKeepPagination({ totalCount, pageSize, page, maxPageButtons, onPageChange });
-  const navProps = {
-    ...props,
-    "data-keepkit": "pagination",
-    "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: view.currentPage, pageCount: view.pageCount, goToPage: view.goToPage }) });
-  return /* @__PURE__ */ jsxs8("nav", { ...navProps, children: [
-    /* @__PURE__ */ jsx12(
-      "button",
-      {
-        type: "button",
-        "data-keep-action": "previous-page",
-        onClick: () => view.goToPage(view.currentPage - 1),
-        disabled: view.currentPage <= 1,
-        children: view.labels.previous
-      }
-    ),
-    view.visiblePages.map((nextPage) => /* @__PURE__ */ jsx12(
-      "button",
-      {
-        type: "button",
-        "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
+  const view = useKeepListView(query);
+  const roving = useRovingTabIndex();
+  const { state } = view;
+  const body = getListBody(state, {
+    children,
+    renderItem,
+    loading: renderLoading !== void 0 ? renderLoading : loading,
+    loadingCount,
+    loadingLabel: view.labels.loading,
+    empty,
+    error: errorContent ?? view.labels.error,
+    onClearFilters,
+    allItemCount: view.allState.totalCount,
+    query,
+    itemCardProps,
+    layout
+  });
+  return renderRoot(
+    asChild,
+    asChild && isValidElement6(children) ? children : void 0,
+    {
+      ...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,
+      "data-roving-tabindex": "true",
+      role: rootProps.role ?? "group",
+      ref: roving.ref,
+      onKeyDown: (event) => {
+        onKeyDown?.(event);
+        if (!event.defaultPrevented) roving.onKeyDown(event);
       },
-      nextPage
-    )),
-    /* @__PURE__ */ jsx12(
-      "button",
+      onFocusCapture: (event) => {
+        onFocusCapture?.(event);
+        if (!event.defaultPrevented) roving.onFocusCapture(event);
+      }
+    },
+    /* @__PURE__ */ jsx15(KeepSearchQueryProvider, { query: query?.search?.query, children: body }),
+    "KeepList"
+  );
+}
+function getListState(state) {
+  if (state.error && state.items.length === 0) return "error";
+  if (state.isLoading && !state.isHydrated) return "loading";
+  if (state.isHydrated && state.items.length === 0) return "empty";
+  return "ready";
+}
+function getListBody(state, options) {
+  if (state.error && state.items.length === 0) return resolveContent(options.error, state);
+  if (state.isLoading && !state.isHydrated) {
+    if (options.loading !== void 0) return resolveContent(options.loading, state);
+    const count = Number.isFinite(options.loadingCount) ? Math.max(0, Math.floor(options.loadingCount)) : 6;
+    return /* @__PURE__ */ jsxs12(Fragment9, { children: [
+      /* @__PURE__ */ jsx15("span", { role: "status", "data-keepkit": "loading-label", children: options.loadingLabel }),
+      /* @__PURE__ */ jsx15("ul", { "data-keepkit": "skeleton-list", "data-layout": options.layout, children: Array.from({ length: count }, (_, index) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: Static loading placeholders never reorder.
+        /* @__PURE__ */ jsx15("li", { children: /* @__PURE__ */ jsx15(KeepItemCardSkeleton, { layout: options.layout }) }, index)
+      )) })
+    ] });
+  }
+  if (state.isHydrated && state.items.length === 0) {
+    if (options.empty !== void 0) return resolveContent(options.empty, state);
+    return /* @__PURE__ */ jsx15(
+      KeepEmptyState,
       {
-        type: "button",
-        "data-keep-action": "next-page",
-        onClick: () => view.goToPage(view.currentPage + 1),
-        disabled: view.currentPage >= view.pageCount,
-        children: view.labels.next
+        variant: options.allItemCount > 0 && hasActiveQueryFilters(options.query) ? "empty-filtered" : "empty-storage",
+        onClearFilters: options.onClearFilters
       }
-    )
-  ] });
+    );
+  }
+  if (typeof options.children === "function") return options.children(state);
+  if (options.children !== void 0 && !isValidElement6(options.children)) return options.children;
+  return /* @__PURE__ */ jsx15("ul", { "data-layout": options.layout, children: state.items.map(
+    (item) => options.renderItem ? options.renderItem(item, state) : /* @__PURE__ */ jsx15("li", { children: /* @__PURE__ */ jsx15(KeepItemCard, { item, ...options.itemCardProps }) }, item.id)
+  ) });
+}
+function hasActiveQueryFilters(query) {
+  if (!query) return false;
+  return Boolean(
+    query.search?.query?.trim() || query.tags?.some((tag) => tag.trim()) || query.targetType || query.savedBetween || query.filter
+  );
 }
 
-// src/KeepCollection.tsx
-import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+// src/features/collection/KeepCollection.tsx
+import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
 function KeepCollection(props) {
   const { fallback, onBoundaryError, boundaryResetKey, ...collectionProps } = props;
-  const content = /* @__PURE__ */ jsx13(KeepCollectionContent, { ...collectionProps });
+  const content = /* @__PURE__ */ jsx16(KeepCollectionContent, { ...collectionProps });
   if (fallback === void 0 && onBoundaryError === void 0) return content;
-  return /* @__PURE__ */ jsx13(KeepErrorBoundary2, { fallback, onError: onBoundaryError, resetKey: boundaryResetKey, children: content });
+  return /* @__PURE__ */ jsx16(KeepErrorBoundary2, { fallback, onError: onBoundaryError, resetKey: boundaryResetKey, children: content });
 }
 function KeepCollectionContent({
   query = {},
@@ -3134,13 +3535,14 @@ function KeepCollectionContent({
   loading,
   renderLoading,
   loadingCount,
+  activeFilters,
   empty,
   error,
   className,
   ...rootProps
 }) {
   const view = useKeepCollection({ query, pageSize, urlSync, urlAdapter, features });
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs13(
     "section",
     {
       ...rootProps,
@@ -3151,12 +3553,22 @@ function KeepCollectionContent({
       "data-state": getCollectionState(view.list),
       "data-loading": view.list.isLoading || view.list.isMutating ? "true" : void 0,
       children: [
-        /* @__PURE__ */ jsxs9("div", { children: [
-          view.enabled.search ? /* @__PURE__ */ jsx13(KeepSearchInput, { value: view.searchValue, onValueChange: view.setSearchValue }) : null,
-          view.enabled.sort ? /* @__PURE__ */ jsx13(KeepSortSelect, { value: view.sortValue, onValueChange: view.setSortValue }) : null,
-          view.enabled.tagFilter ? /* @__PURE__ */ jsx13(KeepTagFilter, { query, value: view.tag, onValueChange: view.setTag }) : null
+        /* @__PURE__ */ jsxs13("div", { children: [
+          view.enabled.search ? /* @__PURE__ */ jsx16(KeepSearchInput, { value: view.searchValue, onValueChange: view.setSearchValue }) : null,
+          view.enabled.sort ? /* @__PURE__ */ jsx16(KeepSortSelect, { value: view.sortValue, onValueChange: view.setSortValue }) : null,
+          view.enabled.tagFilter ? /* @__PURE__ */ jsx16(KeepTagFilter, { query, value: view.activeTags[0], onValueChange: view.setTag }) : null
         ] }),
-        /* @__PURE__ */ jsx13(
+        activeFilters === void 0 ? /* @__PURE__ */ jsx16(
+          KeepActiveFiltersSummary,
+          {
+            search: view.searchValue,
+            tags: view.activeTags,
+            onSearchChange: view.setSearchValue,
+            onTagChange: view.removeTag,
+            onClear: view.clearFilters
+          }
+        ) : resolveContent(activeFilters, view.list),
+        /* @__PURE__ */ jsx16(
           KeepList,
           {
             query: view.resolvedQuery,
@@ -3166,198 +3578,64 @@ function KeepCollectionContent({
             loading,
             renderLoading,
             loadingCount,
-            empty,
+            onClearFilters: view.clearFilters,
+            empty: view.list.totalCount === 0 && view.allState.totalCount > 0 ? void 0 : empty,
             error
           }
         ),
-        view.enabled.pagination ? /* @__PURE__ */ jsx13(
+        view.enabled.pagination ? /* @__PURE__ */ jsx16(
           KeepPagination,
           {
             totalCount: view.list.totalCount,
             pageSize: view.resolvedPageSize,
             page: view.list.page,
             onPageChange: view.setPage
-          }
-        ) : null,
-        view.enabled.bulkActions ? /* @__PURE__ */ jsx13(KeepBulkActions, { query: view.resolvedQuery }) : null
-      ]
-    }
-  );
-}
-function getCollectionState(list) {
-  if (list.error && list.items.length === 0) return "error";
-  if (list.isLoading && !list.isHydrated) return "loading";
-  if (list.isHydrated && list.items.length === 0) return "empty";
-  return "ready";
-}
-
-// src/KeepLayout.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
-function KeepLayout({ layout = "list", children, onKeyDown, onFocusCapture, ...props }) {
-  const roving = useRovingTabIndex();
-  return (
-    // biome-ignore lint/a11y/noStaticElementInteractions: The group manages keyboard focus for descendant cards.
-    /* @__PURE__ */ jsx14(
-      "div",
-      {
-        ...props,
-        ref: roving.ref,
-        "data-keepkit": "layout",
-        "data-layout": layout,
-        "data-roving-tabindex": "true",
-        role: props.role ?? "group",
-        onKeyDown: (event) => {
-          onKeyDown?.(event);
-          if (!event.defaultPrevented) roving.onKeyDown(event);
-        },
-        onFocusCapture: (event) => {
-          onFocusCapture?.(event);
-          if (!event.defaultPrevented) roving.onFocusCapture(event);
-        },
-        children
-      }
-    )
-  );
-}
-
-// src/KeepNoteEditor.tsx
-import { isValidElement as isValidElement5 } from "react";
-
-// src/hooks/useKeepNoteEditor.ts
-import { useKeepItem as useKeepItem3 } from "@keepkit/core/react";
-import { useCallback as useCallback5, useEffect as useEffect6, useRef as useRef5, useState as useState8 } from "react";
-function useKeepNoteEditor({ item, debounceMs, onSaved, onSaveError }) {
-  const itemState = useKeepItem3(item);
-  const { error, isMutating, item: savedItem, updateNote } = itemState;
-  const [note, setNote] = useState8(item.note ?? "");
-  const baselineNote = savedItem?.note ?? item.note ?? "";
-  const isDirty = note !== baselineNote;
-  const lastSavedNoteRef = useRef5(void 0);
-  useEffect6(() => setNote(baselineNote), [baselineNote]);
-  const save = useCallback5(async () => {
-    const nextNote = note.trim() || void 0;
-    try {
-      await updateNote(nextNote);
-      lastSavedNoteRef.current = note;
-      onSaved?.(nextNote);
-    } catch (cause) {
-      onSaveError?.(cause);
-      throw cause;
-    }
-  }, [note, onSaveError, onSaved, updateNote]);
-  useEffect6(() => {
-    if (!isDirty || debounceMs <= 0 || lastSavedNoteRef.current === note) return;
-    const timer = window.setTimeout(() => void save().catch(() => void 0), debounceMs);
-    return () => window.clearTimeout(timer);
-  }, [debounceMs, isDirty, note, save]);
-  const state = {
-    item,
-    note,
-    setNote,
-    isDirty,
-    isSaving: isMutating,
-    error,
-    save
-  };
-  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 Fragment7, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
-function KeepNoteEditor({
-  item,
-  label,
-  saveLabel,
-  placeholder,
-  debounceMs = 300,
-  onSaved,
-  onSaveError,
-  render,
-  children,
-  asChild = false,
-  className,
-  ...formProps
-}) {
-  const view = useKeepNoteEditor({ item, debounceMs, onSaved, onSaveError });
-  const { error, isDirty, isSaving, note, setNote } = view.state;
-  const contentChildren = asChild && isValidElement5(children) ? void 0 : children;
-  const body = render ? render(view.state) : typeof contentChildren === "function" ? contentChildren(view.state) : contentChildren ?? /* @__PURE__ */ jsxs10(Fragment7, { children: [
-    /* @__PURE__ */ jsxs10("label", { children: [
-      label ?? view.labels.note,
-      /* @__PURE__ */ jsx15(
-        "textarea",
-        {
-          "data-keep-action": "edit-note",
-          value: note,
-          onChange: (event) => setNote(event.currentTarget.value),
-          placeholder,
-          disabled: isSaving,
-          onKeyDown: view.handleKeyDown
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx15("button", { type: "submit", "data-keep-action": "save-note", disabled: isSaving, "aria-busy": isSaving, children: saveLabel ?? view.labels.save })
-  ] });
-  if (!asChild) {
-    return /* @__PURE__ */ jsxs10(
-      "form",
+          }
+        ) : null,
+        view.enabled.bulkActions ? /* @__PURE__ */ jsx16(KeepBulkActions, { query: view.resolvedQuery }) : null
+      ]
+    }
+  );
+}
+function getCollectionState(list) {
+  if (list.error && list.items.length === 0) return "error";
+  if (list.isLoading && !list.isHydrated) return "loading";
+  if (list.isHydrated && list.items.length === 0) return "empty";
+  return "ready";
+}
+
+// src/features/collection/KeepLayout.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+function KeepLayout({ layout = "list", children, onKeyDown, onFocusCapture, ...props }) {
+  const roving = useRovingTabIndex();
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: The group manages keyboard focus for descendant cards.
+    /* @__PURE__ */ jsx17(
+      "div",
       {
-        ...formProps,
-        className,
-        "data-keepkit": "note-editor",
-        onSubmit: view.submit,
-        "aria-busy": isSaving || formProps["aria-busy"],
-        "data-state": error ? "error" : isDirty ? "dirty" : "clean",
-        "data-loading": isSaving ? "true" : void 0,
-        "data-disabled": isSaving ? "true" : void 0,
-        children: [
-          body,
-          error ? /* @__PURE__ */ jsx15("p", { role: "alert", children: getErrorMessage3(error, view.labels.error) }) : null
-        ]
+        ...props,
+        ref: roving.ref,
+        "data-keepkit": "layout",
+        "data-layout": layout,
+        "data-roving-tabindex": "true",
+        role: props.role ?? "group",
+        onKeyDown: (event) => {
+          onKeyDown?.(event);
+          if (!event.defaultPrevented) roving.onKeyDown(event);
+        },
+        onFocusCapture: (event) => {
+          onFocusCapture?.(event);
+          if (!event.defaultPrevented) roving.onFocusCapture(event);
+        },
+        children
       }
-    );
-  }
-  return renderRoot(
-    true,
-    isValidElement5(children) ? children : void 0,
-    {
-      ...formProps,
-      className,
-      "data-keepkit": "note-editor",
-      onSubmit: view.submit,
-      "aria-busy": isSaving || formProps["aria-busy"],
-      "data-state": error ? "error" : isDirty ? "dirty" : "clean",
-      "data-loading": isSaving ? "true" : void 0,
-      "data-disabled": isSaving ? "true" : void 0
-    },
-    body,
-    "KeepNoteEditor"
+    )
   );
 }
-function getErrorMessage3(error, fallback) {
-  return error instanceof Error ? error.message : fallback;
-}
 
-// src/KeepReorderableList.tsx
+// src/features/collection/KeepReorderableList.tsx
 import { useState as useState9 } from "react";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function KeepReorderableList({
   items,
   onReorder,
@@ -3366,6 +3644,7 @@ function KeepReorderableList({
   ...props
 }) {
   const [draggedId, setDraggedId] = useState9(null);
+  const [dropTargetIndex, setDropTargetIndex] = useState9(null);
   const ids = items.map((item) => item.id);
   function commit(nextIds) {
     void onReorder(nextIds);
@@ -3378,7 +3657,19 @@ function KeepReorderableList({
     next.splice(targetIndex, 0, id);
     commit(next);
   }
-  return /* @__PURE__ */ jsx16("ul", { ...props, "data-keepkit": "reorderable-list", children: items.map((item, index) => {
+  function moveToInsertion(index, insertionIndex) {
+    const next = [...ids];
+    const [id] = next.splice(index, 1);
+    if (id === void 0) return;
+    const targetIndex = Math.min(
+      Math.max(0, insertionIndex > index ? insertionIndex - 1 : insertionIndex),
+      next.length
+    );
+    next.splice(targetIndex, 0, id);
+    if (next[index] === id) return;
+    commit(next);
+  }
+  return /* @__PURE__ */ jsx18("ul", { ...props, "data-keepkit": "reorderable-list", children: items.map((item, index) => {
     const moveUp = () => move(index, index - 1);
     const moveDown = () => move(index, index + 1);
     const onHandleKeyDown = (event) => {
@@ -3399,27 +3690,43 @@ function KeepReorderableList({
         role: "button",
         tabIndex: 0,
         draggable: true,
+        "data-drag-handle": "true",
         "aria-label": itemLabel(item, index),
         "aria-grabbed": draggedId === item.id,
-        onDragStart: () => setDraggedId(item.id),
-        onDragEnd: () => setDraggedId(null),
+        onDragStart: () => {
+          setDraggedId(item.id);
+          setDropTargetIndex(index);
+        },
+        onDragEnd: () => {
+          setDraggedId(null);
+          setDropTargetIndex(null);
+        },
         onKeyDown: onHandleKeyDown
       }
     };
-    return /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx18(
       "li",
       {
         "data-reorder-index": index,
         "data-dragging": draggedId === item.id ? "true" : void 0,
+        "data-drop-target": draggedId && draggedId !== item.id ? dropTargetIndex === index ? "before" : dropTargetIndex === index + 1 ? "after" : void 0 : void 0,
         onDragOver: (event) => {
-          if (draggedId && draggedId !== item.id) event.preventDefault();
+          if (!draggedId || draggedId === item.id) return;
+          event.preventDefault();
+          const bounds = event.currentTarget.getBoundingClientRect();
+          const insertionIndex = event.clientY > bounds.top + bounds.height / 2 ? index + 1 : index;
+          setDropTargetIndex(insertionIndex);
+        },
+        onDragLeave: (event) => {
+          if (event.currentTarget === event.target) setDropTargetIndex(null);
         },
         onDrop: (event) => {
           event.preventDefault();
           if (!draggedId || draggedId === item.id) return;
           const sourceIndex = ids.indexOf(draggedId);
           setDraggedId(null);
-          move(sourceIndex, index);
+          setDropTargetIndex(null);
+          moveToInsertion(sourceIndex, dropTargetIndex ?? index);
         },
         children: renderItem(item, state)
       },
@@ -3428,309 +3735,170 @@ function KeepReorderableList({
   }) });
 }
 
-// src/hooks/useKeepSyncFeedback.ts
-import { useKeepContext as useKeepContext3 } from "@keepkit/core/react";
-import { useEffect as useEffect7, useRef as useRef6 } from "react";
-function useKeepSyncFeedback() {
-  const { syncState } = useKeepContext3();
-  const emitFeedback = useKeepUiFeedback();
-  const completedMessage = useUiLabel("syncSynced");
-  const failedMessage = useUiLabel("syncFailedMessage");
-  const previousStatus = useRef6("idle");
-  useEffect7(() => {
-    const previous = previousStatus.current;
-    previousStatus.current = syncState.status;
-    if (syncState.status === "error" && previous !== "error") {
-      emitFeedback({ type: "sync-failed", error: syncState.error, message: failedMessage });
-      return;
-    }
-    if (syncState.status === "synced" && (previous === "pending" || previous === "syncing" || previous === "conflict" || previous === "error")) {
-      emitFeedback({ type: "sync-completed", message: completedMessage });
-    }
-  }, [completedMessage, emitFeedback, failedMessage, syncState.error, syncState.status]);
-}
-
-// src/KeepSyncFeedbackObserver.tsx
-function KeepSyncFeedbackObserver() {
-  useKeepSyncFeedback();
-  return null;
-}
-
-// src/hooks/useKeepSyncRecoveryDialog.ts
-import { useKeepContext as useKeepContext4 } from "@keepkit/core/react";
-import { useEffect as useEffect8, useState as useState10 } from "react";
-function useKeepSyncRecoveryDialog(options) {
-  const { open, onOpenChange, conflicts, onManualMerge } = options;
-  const context = useKeepContext4();
-  const conflictList = conflicts ?? context.syncState.conflicts ?? [];
-  const hasRecovery = conflictList.length > 0 || context.syncState.status === "error" || Boolean(context.error);
-  const [dismissed, setDismissed] = useState10(false);
-  const [busyId, setBusyId] = useState10();
-  const [error, setError] = useState10();
-  useEffect8(() => {
-    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/features/editor/KeepNoteEditor.tsx
+import { isValidElement as isValidElement7 } from "react";
 
-// src/KeepSyncRecoveryDialog.tsx
-import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
-function KeepSyncRecoveryDialog({
-  open,
-  onOpenChange,
-  conflicts,
-  onManualMerge,
-  backup,
-  showBackupControls = true,
-  title,
-  children,
-  className,
-  ...props
-}) {
-  const view = useKeepSyncRecoveryDialog({ open, onOpenChange, conflicts, onManualMerge });
-  if (!view.isOpen) return null;
-  return /* @__PURE__ */ jsxs11(
-    "section",
-    {
-      ...props,
-      className,
-      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": view.conflictList.length > 0 ? "conflict" : "error",
-      "data-loading": view.busyId !== void 0 ? "true" : void 0,
-      children: [
-        /* @__PURE__ */ jsxs11("header", { children: [
-          /* @__PURE__ */ jsx17("h2", { id: "keepkit-sync-recovery-title", children: title ?? view.labels.title }),
-          /* @__PURE__ */ jsx17("button", { type: "button", "data-keep-action": "close-dialog", onClick: view.close, "aria-label": view.labels.close, children: view.labels.close })
-        ] }),
-        children,
-        view.conflictList.length > 0 ? /* @__PURE__ */ jsxs11("div", { children: [
-          /* @__PURE__ */ jsx17("p", { children: view.labels.conflict }),
-          view.conflictList.map((conflict) => /* @__PURE__ */ jsxs11("article", { "data-conflict-id": conflict.id, children: [
-            /* @__PURE__ */ jsx17("h3", { children: getMetaTitle(conflict.operation.item?.meta) ?? conflict.id }),
-            /* @__PURE__ */ jsxs11("div", { "data-conflict-preview": true, children: [
-              /* @__PURE__ */ jsx17(
-                ConflictPreview,
-                {
-                  item: conflict.operation.item,
-                  heading: view.labels.localVersion,
-                  updatedAtLabel: view.labels.updatedAt,
-                  noteLabel: view.labels.note,
-                  side: "local"
-                }
-              ),
-              /* @__PURE__ */ jsx17(
-                ConflictPreview,
-                {
-                  item: conflict.remote,
-                  heading: view.labels.remoteVersion,
-                  updatedAtLabel: view.labels.updatedAt,
-                  noteLabel: view.labels.note,
-                  side: "remote"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs11("div", { children: [
-              /* @__PURE__ */ jsx17(
-                "button",
-                {
-                  type: "button",
-                  "data-keep-action": "keep-local",
-                  onClick: () => void view.resolve(conflict, "local"),
-                  disabled: view.busyId !== void 0,
-                  children: view.labels.keepLocal
-                }
-              ),
-              /* @__PURE__ */ jsx17(
-                "button",
-                {
-                  type: "button",
-                  "data-keep-action": "use-server",
-                  onClick: () => void view.resolve(conflict, "remote"),
-                  disabled: view.busyId !== void 0,
-                  children: view.labels.useServer
-                }
-              ),
-              /* @__PURE__ */ jsx17(
-                "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,
-        view.showBackupRecovery ? /* @__PURE__ */ jsxs11("section", { "data-recovery": "backup", children: [
-          /* @__PURE__ */ jsx17("h3", { children: view.labels.backupRecovery }),
-          /* @__PURE__ */ jsx17("p", { children: view.labels.backupRecoveryDescription }),
-          backup ?? (showBackupControls ? /* @__PURE__ */ jsx17(KeepBackup, {}) : null)
-        ] }) : null,
-        view.error ? /* @__PURE__ */ jsx17("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__ */ jsxs11("article", { "data-conflict-version": side, "aria-label": heading, children: [
-    /* @__PURE__ */ jsx17("h4", { children: heading }),
-    /* @__PURE__ */ jsxs11("dl", { children: [
-      /* @__PURE__ */ jsxs11("div", { children: [
-        /* @__PURE__ */ jsx17("dt", { children: updatedAtLabel }),
-        /* @__PURE__ */ jsx17("dd", { children: item ? /* @__PURE__ */ jsx17("time", { dateTime: new Date(item.updatedAt).toISOString(), children: formatConflictDate(item.updatedAt) }) : "\u2014" })
-      ] }),
-      /* @__PURE__ */ jsxs11("div", { children: [
-        /* @__PURE__ */ jsx17("dt", { children: noteLabel }),
-        /* @__PURE__ */ jsx17("dd", { children: item?.note || "\u2014" })
-      ] })
-    ] })
-  ] });
-}
-function formatConflictDate(timestamp) {
-  return new Date(timestamp).toISOString().slice(0, 10);
+// src/features/navigation/KeepShortcutHint.tsx
+import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+function KeepShortcutHint({ shortcut, separator = "+", ...props }) {
+  const keys = typeof shortcut === "string" ? shortcut.split("+") : [...shortcut];
+  const occurrences = /* @__PURE__ */ new Map();
+  const keyedKeys = keys.map((key) => {
+    const occurrence = occurrences.get(key) ?? 0;
+    occurrences.set(key, occurrence + 1);
+    return { id: `${key}-${occurrence}`, value: key };
+  });
+  return /* @__PURE__ */ jsx19("span", { ...props, "data-keepkit": "shortcut-hint", "aria-hidden": props["aria-hidden"] ?? true, children: keyedKeys.map((key, index) => /* @__PURE__ */ jsxs14("span", { children: [
+    index > 0 ? /* @__PURE__ */ jsx19("span", { "data-shortcut-separator": "true", children: separator }) : null,
+    /* @__PURE__ */ jsx19("kbd", { children: key.value.trim() })
+  ] }, key.id)) });
 }
-
-// src/hooks/useKeepSyncStatusBanner.ts
-import { useKeepContext as useKeepContext5 } from "@keepkit/core/react";
-function useKeepSyncStatusBanner({ onRetry, children }) {
-  const context = useKeepContext5();
-  const retryLabel = useUiLabel("retrySync");
-  const resolveLabel = useUiLabel("resolveSync");
-  const conflictLabel = useUiLabel("syncConflict");
-  const pendingLabel = useUiLabel("syncPending");
-  const syncedLabel = useUiLabel("syncSynced");
-  const status = context.syncState.status;
-  const hasConflicts = (context.syncState.conflicts?.length ?? 0) > 0 || context.syncState.conflictIds.length > 0;
-  const message = children ?? (status === "error" ? getErrorMessage4(context.syncState.error) : status === "conflict" || hasConflicts ? conflictLabel : status === "pending" || status === "syncing" ? pendingLabel : syncedLabel);
+
+// src/features/editor/hooks/useKeepNoteEditor.ts
+import { useKeepItem as useKeepItem3 } from "@keepkit/core/react";
+import { useCallback as useCallback4, useEffect as useEffect7, useRef as useRef5, useState as useState10 } from "react";
+function useKeepNoteEditor({ item, debounceMs, onSaved, onSaveError }) {
+  const itemState = useKeepItem3(item);
+  const { error, isMutating, item: savedItem, updateNote } = itemState;
+  const [note, setNote] = useState10(item.note ?? "");
+  const baselineNote = savedItem?.note ?? item.note ?? "";
+  const isDirty = note !== baselineNote;
+  const lastSavedNoteRef = useRef5(void 0);
+  useEffect7(() => setNote(baselineNote), [baselineNote]);
+  const save = useCallback4(async () => {
+    const nextNote = note.trim() || void 0;
+    try {
+      await updateNote(nextNote);
+      lastSavedNoteRef.current = note;
+      onSaved?.(nextNote);
+    } catch (cause) {
+      onSaveError?.(cause);
+      throw cause;
+    }
+  }, [note, onSaveError, onSaved, updateNote]);
+  useEffect7(() => {
+    if (!isDirty || debounceMs <= 0 || lastSavedNoteRef.current === note) return;
+    const timer = window.setTimeout(() => void save().catch(() => void 0), debounceMs);
+    return () => window.clearTimeout(timer);
+  }, [debounceMs, isDirty, note, save]);
+  const state = {
+    item,
+    note,
+    setNote,
+    isDirty,
+    isSaving: isMutating,
+    error,
+    save
+  };
+  const submit = (event) => {
+    event.preventDefault();
+    void save().catch(() => void 0);
+  };
   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();
+    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")
     }
   };
 }
-function getErrorMessage4(error) {
-  return error instanceof Error ? error.message : "Sync failed.";
-}
 
-// src/KeepSyncStatusBanner.tsx
-import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
-function KeepSyncStatusBanner({
-  onRetry,
-  onResolveConflicts,
+// src/features/editor/KeepNoteEditor.tsx
+import { Fragment as Fragment10, jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+function KeepNoteEditor({
+  item,
+  label,
+  saveLabel,
+  placeholder,
+  debounceMs = 300,
+  showShortcutHint = false,
+  onSaved,
+  onSaveError,
+  render,
   children,
+  asChild = false,
   className,
-  ...props
+  ...formProps
 }) {
-  const view = useKeepSyncStatusBanner({ onRetry, children });
-  if (view.status === "idle" && !view.hasConflicts) return null;
-  return /* @__PURE__ */ jsxs12(
-    "aside",
+  const view = useKeepNoteEditor({ item, debounceMs, onSaved, onSaveError });
+  const { error, isDirty, isSaving, note, setNote } = view.state;
+  const contentChildren = asChild && isValidElement7(children) ? void 0 : children;
+  const body = render ? render(view.state) : typeof contentChildren === "function" ? contentChildren(view.state) : contentChildren ?? /* @__PURE__ */ jsxs15(Fragment10, { children: [
+    /* @__PURE__ */ jsxs15("label", { children: [
+      label ?? view.labels.note,
+      /* @__PURE__ */ jsx20(
+        "textarea",
+        {
+          "data-keep-action": "edit-note",
+          value: note,
+          onChange: (event) => setNote(event.currentTarget.value),
+          placeholder,
+          disabled: isSaving,
+          onKeyDown: view.handleKeyDown
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs15("button", { type: "submit", "data-keep-action": "save-note", disabled: isSaving, "aria-busy": isSaving, children: [
+      saveLabel ?? view.labels.save,
+      showShortcutHint ? /* @__PURE__ */ jsx20(KeepShortcutHint, { shortcut: "Ctrl+Enter" }) : null
+    ] })
+  ] });
+  if (!asChild) {
+    return /* @__PURE__ */ jsxs15(
+      "form",
+      {
+        ...formProps,
+        className,
+        "data-keepkit": "note-editor",
+        onSubmit: view.submit,
+        "aria-busy": isSaving || formProps["aria-busy"],
+        "data-state": error ? "error" : isDirty ? "dirty" : "clean",
+        "data-loading": isSaving ? "true" : void 0,
+        "data-disabled": isSaving ? "true" : void 0,
+        children: [
+          body,
+          error ? /* @__PURE__ */ jsx20("p", { role: "alert", children: getErrorMessage3(error, view.labels.error) }) : null
+        ]
+      }
+    );
+  }
+  return renderRoot(
+    true,
+    isValidElement7(children) ? children : void 0,
     {
-      ...props,
+      ...formProps,
       className,
-      role: props.role ?? view.role,
-      "aria-live": props["aria-live"] ?? "polite",
-      "data-keepkit": "sync-status",
-      "data-state": view.status,
-      children: [
-        /* @__PURE__ */ jsx18("p", { children: view.message }),
-        view.showRetry ? /* @__PURE__ */ jsx18(
-          "button",
-          {
-            type: "button",
-            "data-keep-action": "retry-sync",
-            onClick: () => void view.retry(),
-            disabled: view.isMutating,
-            children: view.retryLabel
-          }
-        ) : null,
-        view.hasConflicts ? /* @__PURE__ */ jsx18(
-          "button",
-          {
-            type: "button",
-            "data-keep-action": "resolve-conflicts",
-            onClick: onResolveConflicts,
-            disabled: !onResolveConflicts,
-            children: view.resolveLabel
-          }
-        ) : null
-      ]
-    }
+      "data-keepkit": "note-editor",
+      onSubmit: view.submit,
+      "aria-busy": isSaving || formProps["aria-busy"],
+      "data-state": error ? "error" : isDirty ? "dirty" : "clean",
+      "data-loading": isSaving ? "true" : void 0,
+      "data-disabled": isSaving ? "true" : void 0
+    },
+    body,
+    "KeepNoteEditor"
   );
 }
+function getErrorMessage3(error, fallback) {
+  return error instanceof Error ? error.message : fallback;
+}
 
-// src/hooks/useKeepTagEditor.ts
+// src/features/editor/hooks/useKeepTagEditor.ts
 import { useKeepItem as useKeepItem4 } from "@keepkit/core/react";
-import { useCallback as useCallback6, useEffect as useEffect9, useState as useState11 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect8, useState as useState11 } from "react";
 function useKeepTagEditor({ item, onSaved, onSaveError }) {
   const itemState = useKeepItem4(item);
   const [tags, setTags] = useState11(item.tags ?? []);
   const [input, setInput] = useState11("");
-  useEffect9(() => setTags(itemState.item?.tags ?? item.tags ?? []), [item.tags, itemState.item?.tags]);
-  const save = useCallback6(async () => {
+  useEffect8(() => setTags(itemState.item?.tags ?? item.tags ?? []), [item.tags, itemState.item?.tags]);
+  const save = useCallback5(async () => {
     const nextTags = normalizeUiTags(tags);
     try {
       await itemState.updateTags(nextTags);
@@ -3775,8 +3943,8 @@ function useKeepTagEditor({ item, onSaved, onSaveError }) {
   };
 }
 
-// src/KeepTagEditor.tsx
-import { Fragment as Fragment8, jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+// src/features/editor/KeepTagEditor.tsx
+import { Fragment as Fragment11, jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
 function KeepTagEditor({
   item,
   availableTags = [],
@@ -3787,10 +3955,10 @@ function KeepTagEditor({
 }) {
   const view = useKeepTagEditor({ item, onSaved, onSaveError });
   const { isSaving, tags } = view.state;
-  const body = render ? render(view.state) : /* @__PURE__ */ jsxs13(Fragment8, { children: [
-    /* @__PURE__ */ jsxs13("label", { children: [
+  const body = render ? render(view.state) : /* @__PURE__ */ jsxs16(Fragment11, { children: [
+    /* @__PURE__ */ jsxs16("label", { children: [
       view.labels.tags,
-      /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsx21(
         "input",
         {
           "data-keep-action": "edit-tags",
@@ -3801,14 +3969,14 @@ function KeepTagEditor({
         }
       )
     ] }),
-    availableTags.length > 0 ? /* @__PURE__ */ jsx19("datalist", { id: `keep-tags-${item.id}`, children: availableTags.map((tag) => /* @__PURE__ */ jsx19("option", { value: tag }, tag)) }) : null,
-    /* @__PURE__ */ jsx19("ul", { "aria-label": view.labels.tags, children: tags.map((tag) => /* @__PURE__ */ jsxs13("li", { children: [
+    availableTags.length > 0 ? /* @__PURE__ */ jsx21("datalist", { id: `keep-tags-${item.id}`, children: availableTags.map((tag) => /* @__PURE__ */ jsx21("option", { value: tag }, tag)) }) : null,
+    /* @__PURE__ */ jsx21("ul", { "aria-label": view.labels.tags, children: tags.map((tag) => /* @__PURE__ */ jsxs16("li", { children: [
       tag,
-      /* @__PURE__ */ jsx19("button", { type: "button", "data-keep-action": "remove-tag", onClick: () => view.removeTag(tag), children: view.labels.remove })
+      /* @__PURE__ */ jsx21("button", { type: "button", "data-keep-action": "remove-tag", onClick: () => view.removeTag(tag), children: view.labels.remove })
     ] }, tag)) }),
-    /* @__PURE__ */ jsx19("button", { type: "submit", "data-keep-action": "apply-tags", disabled: isSaving, "aria-busy": isSaving, children: view.labels.apply })
+    /* @__PURE__ */ jsx21("button", { type: "submit", "data-keep-action": "apply-tags", disabled: isSaving, "aria-busy": isSaving, children: view.labels.apply })
   ] });
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs16(
     "form",
     {
       ...props,
@@ -3820,20 +3988,41 @@ function KeepTagEditor({
       "data-disabled": isSaving ? "true" : void 0,
       children: [
         body,
-        view.error ? /* @__PURE__ */ jsx19("p", { role: "alert", children: getErrorMessage5(view.error, view.labels.error) }) : null
+        view.error ? /* @__PURE__ */ jsx21("p", { role: "alert", children: getErrorMessage4(view.error, view.labels.error) }) : null
       ]
     }
   );
 }
-function getErrorMessage5(error, fallback) {
+function getErrorMessage4(error, fallback) {
   return error instanceof Error ? error.message : fallback;
 }
 
-// src/KeepTourBar.tsx
+// src/features/feedback/useKeepToastFeedback.ts
+import { useCallback as useCallback6 } from "react";
+function useKeepToastFeedback(showToast) {
+  return useCallback6(
+    (event) => {
+      if (!("undo" in event)) {
+        showToast(event.message);
+        return;
+      }
+      showToast(event.message, {
+        action: {
+          label: event.undoLabel,
+          onClick: () => void event.undo()
+        }
+      });
+    },
+    [showToast]
+  );
+}
+
+// src/features/navigation/KeepTourBar.tsx
 import { useKeepNavigator } from "@keepkit/core/react";
+import { useId } from "react";
 
-// src/hooks/useKeepTourShortcuts.ts
-import { useEffect as useEffect10 } from "react";
+// src/features/navigation/hooks/useKeepTourShortcuts.ts
+import { useEffect as useEffect9 } from "react";
 function useKeepTourShortcuts({
   onNext,
   onPrev,
@@ -3844,7 +4033,7 @@ function useKeepTourShortcuts({
   prevKeys = ["k", "["],
   onError
 }) {
-  useEffect10(() => {
+  useEffect9(() => {
     if (!enabled) return;
     const handleKeyDown = (event) => {
       if (!allowInEditable && isEditableTarget(event.target)) return;
@@ -3864,8 +4053,8 @@ function isEditableTarget(target) {
   return target.isContentEditable || target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT";
 }
 
-// src/KeepTourBar.tsx
-import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+// src/features/navigation/KeepTourBar.tsx
+import { Fragment as Fragment12, jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
 function KeepTourBar({
   navigation: providedNavigation,
   currentId,
@@ -3881,8 +4070,12 @@ function KeepTourBar({
   nextLabel,
   backLabel,
   keyboardShortcuts = false,
+  showShortcutHint = false,
   shortcutOptions,
   progress,
+  getItemTitle = (item) => getMetaTitle(item.meta) ?? item.id,
+  children,
+  asChild = false,
   ...props
 }) {
   const ownNavigation = useKeepNavigator({ currentId, initialIndex });
@@ -3903,36 +4096,82 @@ function KeepTourBar({
       return resolvedPrev();
     }
   });
-  return /* @__PURE__ */ jsxs14("nav", { ...props, "data-keepkit": "tour-bar", "aria-label": props["aria-label"] ?? labels.pagination, children: [
-    showProgress ? /* @__PURE__ */ jsx20("span", { "data-keepkit": "tour-progress", "aria-live": "polite", children: progress ?? `${navigation.currentPosition ?? 0} / ${navigation.items.length}` }) : null,
-    /* @__PURE__ */ jsx20(
+  const body = /* @__PURE__ */ jsxs17(Fragment12, { children: [
+    showProgress ? /* @__PURE__ */ jsx22("span", { "data-keepkit": "tour-progress", "aria-live": "polite", children: progress ?? `${navigation.currentPosition ?? 0} / ${navigation.items.length}` }) : null,
+    /* @__PURE__ */ jsx22(
       TourAction,
       {
         href: prevHref,
         disabled: !navigation.hasPrev,
         onClick: prevHref ? onPrev : resolvedPrev,
         "data-keep-action": "tour-prev",
+        shortcut: showShortcutHint ? shortcutOptions?.prevKeys?.[0] ?? "K" : void 0,
+        preview: navigation.prevItem ? /* @__PURE__ */ jsxs17(Fragment12, { children: [
+          previousLabel,
+          ": ",
+          getItemTitle(navigation.prevItem)
+        ] }) : void 0,
         children: previousLabel
       }
     ),
-    /* @__PURE__ */ jsx20(
+    /* @__PURE__ */ jsx22(
       TourAction,
       {
         href: nextHref,
         disabled: !navigation.hasNext,
         onClick: nextHref ? onNext : resolvedNext,
         "data-keep-action": "tour-next",
+        shortcut: showShortcutHint ? shortcutOptions?.nextKeys?.[0] ?? "J" : void 0,
+        preview: navigation.nextItem ? /* @__PURE__ */ jsxs17(Fragment12, { children: [
+          nextItemLabel,
+          ": ",
+          getItemTitle(navigation.nextItem)
+        ] }) : void 0,
         children: nextItemLabel
       }
     ),
-    backHref || onBack ? /* @__PURE__ */ jsx20(TourAction, { href: backHref, onClick: onBack, "data-keep-action": "tour-back", children: listLabel }) : null
+    backHref || onBack ? /* @__PURE__ */ jsx22(TourAction, { href: backHref, onClick: onBack, "data-keep-action": "tour-back", children: listLabel }) : null
   ] });
+  return renderRoot(
+    asChild,
+    children,
+    { ...props, "data-keepkit": "tour-bar", "aria-label": props["aria-label"] ?? labels.pagination },
+    body,
+    "KeepTourBar"
+  );
 }
-function TourAction({ href, disabled = false, onClick, children, ...props }) {
+function TourAction({ href, disabled = false, onClick, children, preview, shortcut, ...props }) {
+  const previewId = useId();
+  const content = /* @__PURE__ */ jsxs17(Fragment12, { children: [
+    /* @__PURE__ */ jsx22("span", { "data-tour-label": "true", children }),
+    shortcut ? /* @__PURE__ */ jsx22(KeepShortcutHint, { shortcut }) : null,
+    preview ? /* @__PURE__ */ jsx22("small", { id: previewId, "data-tour-preview": "true", children: preview }) : null
+  ] });
   if (href && !disabled) {
-    return /* @__PURE__ */ jsx20("a", { ...props, href, onClick: () => void onClick?.(), children });
+    return /* @__PURE__ */ jsx22(
+      "a",
+      {
+        ...props,
+        href,
+        onClick: () => void onClick?.(),
+        "aria-label": String(children),
+        "aria-describedby": preview ? previewId : void 0,
+        children: content
+      }
+    );
   }
-  return /* @__PURE__ */ jsx20("button", { ...props, type: "button", disabled, onClick: () => void onClick?.(), children });
+  return /* @__PURE__ */ jsx22(
+    "button",
+    {
+      ...props,
+      type: "button",
+      disabled,
+      onClick: () => void onClick?.(),
+      "aria-label": String(children),
+      "aria-describedby": preview ? previewId : void 0,
+      children: content
+    }
+  );
 }
 var KeepNavigator = KeepTourBar;
 function navigateTo(item, href) {
@@ -3940,48 +4179,14 @@ function navigateTo(item, href) {
   window.location.assign(href);
 }
 
-// src/hooks/useKeepUndo.ts
-import { useKeepContext as useKeepContext6 } from "@keepkit/core/react";
-function useKeepUndo() {
-  const context = useKeepContext6();
-  const emitFeedback = useKeepUiFeedback();
-  const restoredMessage = useUiLabel("restoredMessage");
-  return {
-    canUndo: context.undo.canUndo,
-    undo: async () => {
-      const items = context.lastChange?.items ?? (context.lastChange?.item ? [context.lastChange.item] : []);
-      await context.undoLastRemoval();
-      if (items.length > 0) {
-        emitFeedback({ type: "item-restored", item: items[0], items, message: restoredMessage });
-      }
-    },
-    message: useUiLabel("undoAvailable"),
-    label: useUiLabel("undo")
-  };
-}
-
-// src/KeepUndo.tsx
-import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
-function KeepUndo({ children, label, ...props }) {
-  const view = useKeepUndo();
-  if (!view.canUndo) return null;
-  return /* @__PURE__ */ jsxs15("div", { ...props, role: "status", "aria-live": "polite", "data-keepkit": "undo", "data-state": "available", children: [
-    children ?? view.message,
-    /* @__PURE__ */ jsx21("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/features/status/status.tsx
+import { isValidElement as isValidElement8 } from "react";
 
-// src/hooks/useStatusViews.ts
-import { useKeepContext as useKeepContext7 } from "@keepkit/core/react";
-import { useEffect as useEffect11, useRef as useRef7, useState as useState12 } from "react";
-function useKeepEmptyState() {
-  return useUiLabel("noItems").replace(/\.$/, "");
-}
+// src/features/status/hooks/useStatusViews.ts
+import { useKeepContext as useKeepContext4 } from "@keepkit/core/react";
+import { useEffect as useEffect10, useRef as useRef6, useState as useState12 } from "react";
 function useKeepStatus(status) {
-  const context = useKeepContext7();
+  const context = useKeepContext4();
   const resolvedStatus = status ?? getDerivedStatus(context);
   const state = {
     status: resolvedStatus,
@@ -3992,13 +4197,13 @@ function useKeepStatus(status) {
   return { state, defaultLabel: useUiLabel(getStatusLabelKey3(resolvedStatus)) };
 }
 function useKeepAnnouncements(messages) {
-  const context = useKeepContext7();
+  const context = useKeepContext4();
   const savedMessage = useUiLabel("savedMessage", messages?.save);
   const removedMessage = useUiLabel("removedMessage", messages?.remove);
   const noteSavedMessage = useUiLabel("noteSavedMessage", messages?.note);
   const [message, setMessage] = useState12("");
-  const lastChangeRef = useRef7(void 0);
-  useEffect11(() => {
+  const lastChangeRef = useRef6(void 0);
+  useEffect10(() => {
     const change = context.lastChange;
     if (!change || change === lastChangeRef.current) return;
     lastChangeRef.current = change;
@@ -4014,43 +4219,19 @@ function getDerivedStatus(context) {
   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 Fragment9, jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
-function KeepEmptyState({
-  title,
-  description,
-  action,
-  children,
-  asChild = false,
-  className,
-  ...rootProps
-}) {
-  const defaultTitle = useKeepEmptyState();
-  const contentChildren = asChild && isValidElement6(children) ? void 0 : children;
-  const body = contentChildren ?? /* @__PURE__ */ jsxs16(Fragment9, { children: [
-    /* @__PURE__ */ jsx22("h2", { children: title ?? defaultTitle }),
-    description ? /* @__PURE__ */ jsx22("p", { children: description }) : null,
-    action
-  ] });
-  return renderRoot(
-    asChild,
-    children,
-    { ...rootProps, className, "data-keepkit": "empty-state", "data-state": "empty" },
-    body,
-    "KeepEmptyState"
-  );
+  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/features/status/status.tsx
+import { jsx as jsx23 } from "react/jsx-runtime";
 function KeepStatus({
   status,
   labels,
@@ -4061,12 +4242,12 @@ function KeepStatus({
   ...rootProps
 }) {
   const view = useKeepStatus(status);
-  const contentChildren = asChild && isValidElement6(children) ? void 0 : children;
+  const contentChildren = asChild && isValidElement8(children) ? void 0 : children;
   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,
+    isValidElement8(children) ? children : void 0,
     {
       ...rootProps,
       className,
@@ -4082,7 +4263,7 @@ function KeepStatus({
 }
 function KeepAnnouncements({ messages, ...props }) {
   const message = useKeepAnnouncements(messages);
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     "div",
     {
       ...props,
@@ -4097,9 +4278,303 @@ function KeepAnnouncements({ messages, ...props }) {
 }
 var KeepAnnouncer = KeepAnnouncements;
 
-// src/theme.tsx
-import { cloneElement as cloneElement2, isValidElement as isValidElement7 } from "react";
-import { jsx as jsx23 } from "react/jsx-runtime";
+// src/features/sync/hooks/useKeepSyncFeedback.ts
+import { useKeepContext as useKeepContext5 } from "@keepkit/core/react";
+import { useEffect as useEffect11, useRef as useRef7 } from "react";
+function useKeepSyncFeedback() {
+  const { syncState } = useKeepContext5();
+  const emitFeedback = useKeepUiFeedback();
+  const completedMessage = useUiLabel("syncSynced");
+  const failedMessage = useUiLabel("syncFailedMessage");
+  const previousStatus = useRef7("idle");
+  useEffect11(() => {
+    const previous = previousStatus.current;
+    previousStatus.current = syncState.status;
+    if (syncState.status === "error" && previous !== "error") {
+      emitFeedback({ type: "sync-failed", error: syncState.error, message: failedMessage });
+      return;
+    }
+    if (syncState.status === "synced" && (previous === "pending" || previous === "syncing" || previous === "conflict" || previous === "error")) {
+      emitFeedback({ type: "sync-completed", message: completedMessage });
+    }
+  }, [completedMessage, emitFeedback, failedMessage, syncState.error, syncState.status]);
+}
+
+// src/features/sync/KeepSyncFeedbackObserver.tsx
+function KeepSyncFeedbackObserver() {
+  useKeepSyncFeedback();
+  return null;
+}
+
+// src/features/sync/hooks/useKeepSyncRecoveryDialog.ts
+import { useKeepContext as useKeepContext6 } from "@keepkit/core/react";
+import { useEffect as useEffect12, useState as useState13 } from "react";
+function useKeepSyncRecoveryDialog(options) {
+  const { open, onOpenChange, conflicts, onManualMerge } = options;
+  const context = useKeepContext6();
+  const conflictList = conflicts ?? context.syncState.conflicts ?? [];
+  const hasRecovery = conflictList.length > 0 || context.syncState.status === "error" || Boolean(context.error);
+  const [dismissed, setDismissed] = useState13(false);
+  const [busyId, setBusyId] = useState13();
+  const [error, setError] = useState13();
+  useEffect12(() => {
+    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/features/sync/KeepSyncRecoveryDialog.tsx
+import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
+function KeepSyncRecoveryDialog({
+  open,
+  onOpenChange,
+  conflicts,
+  onManualMerge,
+  backup,
+  showBackupControls = true,
+  title,
+  children,
+  className,
+  ...props
+}) {
+  const view = useKeepSyncRecoveryDialog({ open, onOpenChange, conflicts, onManualMerge });
+  if (!view.isOpen) return null;
+  return /* @__PURE__ */ jsxs18(
+    "section",
+    {
+      ...props,
+      className,
+      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": view.conflictList.length > 0 ? "conflict" : "error",
+      "data-loading": view.busyId !== void 0 ? "true" : void 0,
+      children: [
+        /* @__PURE__ */ jsxs18("header", { children: [
+          /* @__PURE__ */ jsx24("h2", { id: "keepkit-sync-recovery-title", children: title ?? view.labels.title }),
+          /* @__PURE__ */ jsx24("button", { type: "button", "data-keep-action": "close-dialog", onClick: view.close, "aria-label": view.labels.close, children: view.labels.close })
+        ] }),
+        children,
+        view.conflictList.length > 0 ? /* @__PURE__ */ jsxs18("div", { children: [
+          /* @__PURE__ */ jsx24("p", { children: view.labels.conflict }),
+          view.conflictList.map((conflict) => /* @__PURE__ */ jsxs18("article", { "data-conflict-id": conflict.id, children: [
+            /* @__PURE__ */ jsx24("h3", { children: getMetaTitle(conflict.operation.item?.meta) ?? conflict.id }),
+            /* @__PURE__ */ jsxs18("div", { "data-conflict-preview": true, children: [
+              /* @__PURE__ */ jsx24(
+                ConflictPreview,
+                {
+                  item: conflict.operation.item,
+                  heading: view.labels.localVersion,
+                  updatedAtLabel: view.labels.updatedAt,
+                  noteLabel: view.labels.note,
+                  side: "local"
+                }
+              ),
+              /* @__PURE__ */ jsx24(
+                ConflictPreview,
+                {
+                  item: conflict.remote,
+                  heading: view.labels.remoteVersion,
+                  updatedAtLabel: view.labels.updatedAt,
+                  noteLabel: view.labels.note,
+                  side: "remote"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs18("div", { children: [
+              /* @__PURE__ */ jsx24(
+                "button",
+                {
+                  type: "button",
+                  "data-keep-action": "keep-local",
+                  onClick: () => void view.resolve(conflict, "local"),
+                  disabled: view.busyId !== void 0,
+                  children: view.labels.keepLocal
+                }
+              ),
+              /* @__PURE__ */ jsx24(
+                "button",
+                {
+                  type: "button",
+                  "data-keep-action": "use-server",
+                  onClick: () => void view.resolve(conflict, "remote"),
+                  disabled: view.busyId !== void 0,
+                  children: view.labels.useServer
+                }
+              ),
+              /* @__PURE__ */ jsx24(
+                "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,
+        view.showBackupRecovery ? /* @__PURE__ */ jsxs18("section", { "data-recovery": "backup", children: [
+          /* @__PURE__ */ jsx24("h3", { children: view.labels.backupRecovery }),
+          /* @__PURE__ */ jsx24("p", { children: view.labels.backupRecoveryDescription }),
+          backup ?? (showBackupControls ? /* @__PURE__ */ jsx24(KeepBackup, {}) : null)
+        ] }) : null,
+        view.error ? /* @__PURE__ */ jsx24("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__ */ jsxs18("article", { "data-conflict-version": side, "aria-label": heading, children: [
+    /* @__PURE__ */ jsx24("h4", { children: heading }),
+    /* @__PURE__ */ jsxs18("dl", { children: [
+      /* @__PURE__ */ jsxs18("div", { children: [
+        /* @__PURE__ */ jsx24("dt", { children: updatedAtLabel }),
+        /* @__PURE__ */ jsx24("dd", { children: item ? /* @__PURE__ */ jsx24("time", { dateTime: new Date(item.updatedAt).toISOString(), children: formatConflictDate(item.updatedAt) }) : "\u2014" })
+      ] }),
+      /* @__PURE__ */ jsxs18("div", { children: [
+        /* @__PURE__ */ jsx24("dt", { children: noteLabel }),
+        /* @__PURE__ */ jsx24("dd", { children: item?.note || "\u2014" })
+      ] })
+    ] })
+  ] });
+}
+function formatConflictDate(timestamp) {
+  return new Date(timestamp).toISOString().slice(0, 10);
+}
+
+// src/features/sync/hooks/useKeepSyncStatusBanner.ts
+import { useKeepContext as useKeepContext7 } from "@keepkit/core/react";
+function useKeepSyncStatusBanner({ onRetry, children }) {
+  const context = useKeepContext7();
+  const retryLabel = useUiLabel("retrySync");
+  const resolveLabel = useUiLabel("resolveSync");
+  const conflictLabel = useUiLabel("syncConflict");
+  const pendingLabel = useUiLabel("syncPending");
+  const syncedLabel = useUiLabel("syncSynced");
+  const status = context.syncState.status;
+  const hasConflicts = (context.syncState.conflicts?.length ?? 0) > 0 || context.syncState.conflictIds.length > 0;
+  const message = children ?? (status === "error" ? getErrorMessage5(context.syncState.error) : status === "conflict" || hasConflicts ? conflictLabel : status === "pending" || status === "syncing" ? pendingLabel : syncedLabel);
+  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();
+    }
+  };
+}
+function getErrorMessage5(error) {
+  return error instanceof Error ? error.message : "Sync failed.";
+}
+
+// src/features/sync/KeepSyncStatusBanner.tsx
+import { jsx as jsx25, jsxs as jsxs19 } 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__ */ jsxs19(
+    "aside",
+    {
+      ...props,
+      className,
+      role: props.role ?? view.role,
+      "aria-live": props["aria-live"] ?? "polite",
+      "data-keepkit": "sync-status",
+      "data-state": view.status,
+      children: [
+        /* @__PURE__ */ jsx25("p", { children: view.message }),
+        view.showRetry ? /* @__PURE__ */ jsx25(
+          "button",
+          {
+            type: "button",
+            "data-keep-action": "retry-sync",
+            onClick: () => void view.retry(),
+            disabled: view.isMutating,
+            children: view.retryLabel
+          }
+        ) : null,
+        view.hasConflicts ? /* @__PURE__ */ jsx25(
+          "button",
+          {
+            type: "button",
+            "data-keep-action": "resolve-conflicts",
+            onClick: onResolveConflicts,
+            disabled: !onResolveConflicts,
+            children: view.resolveLabel
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/foundation/theme.tsx
+import { isValidElement as isValidElement9 } from "react";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var keepThemeNames = [
   "default",
   "ocean",
@@ -4154,11 +4629,11 @@ function KeepThemeProvider({
     "data-reduced-motion": reducedMotion ? "true" : void 0
   };
   if (asChild) {
-    if (!isValidElement7(children))
+    if (!isValidElement9(children))
       throw new Error("KeepThemeProvider with asChild requires a single React element child.");
-    return cloneElement2(children, rootProps);
+    return createSlot(children, rootProps);
   }
-  return /* @__PURE__ */ jsx23("div", { ...rootProps, children });
+  return /* @__PURE__ */ jsx26("div", { ...rootProps, children });
 }
 
 // src/index.tsx
@@ -4182,7 +4657,7 @@ import {
   LocalStorageSyncQueueAdapter,
   SyncStorageAdapter
 } from "@keepkit/core/storage";
-import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
 function KeepKitProvider({
   labels,
   locale,
@@ -4202,7 +4677,7 @@ function KeepKitProvider({
   children,
   ...providerProps
 }) {
-  return /* @__PURE__ */ jsx24(KeepUiProvider, { labels, locale, labelResolver, onFeedback, children: /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx27(KeepUiProvider, { labels, locale, labelResolver, onFeedback, children: /* @__PURE__ */ jsx27(
     KeepThemeProvider,
     {
       theme,
@@ -4216,10 +4691,10 @@ function KeepKitProvider({
       className: themeClassName,
       style: themeStyle,
       asChild: themeAsChild,
-      children: /* @__PURE__ */ jsxs17(CoreKeepProvider, { ...providerProps, children: [
-        /* @__PURE__ */ jsx24(KeepSyncFeedbackObserver, {}),
+      children: /* @__PURE__ */ jsxs20(CoreKeepProvider, { ...providerProps, children: [
+        /* @__PURE__ */ jsx27(KeepSyncFeedbackObserver, {}),
         children,
-        /* @__PURE__ */ jsx24(KeepAnnouncements, {})
+        /* @__PURE__ */ jsx27(KeepAnnouncements, {})
       ] })
     }
   ) });
@@ -4246,7 +4721,7 @@ function createKeepKit(options = {}) {
   } = options;
   const coreKit = createCoreKeepKit(coreOptions);
   return {
-    Provider: (props) => /* @__PURE__ */ jsx24(
+    Provider: (props) => /* @__PURE__ */ jsx27(
       KeepKitProvider,
       {
         ...coreOptions,
@@ -4267,9 +4742,9 @@ function createKeepKit(options = {}) {
         ...props
       }
     ),
-    Button: (props) => /* @__PURE__ */ jsx24(KeepButton, { ...props }),
-    Backup: (props) => /* @__PURE__ */ jsx24(KeepBackup, { ...props }),
-    Collection: (props) => /* @__PURE__ */ jsx24(
+    Button: (props) => /* @__PURE__ */ jsx27(KeepButton, { ...props }),
+    Backup: (props) => /* @__PURE__ */ jsx27(KeepBackup, { ...props }),
+    Collection: (props) => /* @__PURE__ */ jsx27(
       KeepCollection,
       {
         ...props,
@@ -4291,6 +4766,7 @@ export {
   FallbackStorageAdapter,
   IndexedDBAdapter,
   IndexedDBSyncQueueAdapter,
+  KeepActiveFiltersSummary,
   KeepAnnouncements,
   KeepAnnouncer,
   KeepBackup,
@@ -4314,6 +4790,7 @@ export {
   KeepPruneStaleButton,
   KeepReorderableList,
   KeepSearchInput,
+  KeepShortcutHint,
   KeepSortSelect,
   KeepStaleNotice,
   KeepStatus,
@@ -4328,15 +4805,18 @@ export {
   LocalStorageAdapter,
   LocalStorageSyncQueueAdapter,
   SyncStorageAdapter,
+  chainedFunction,
   createAuthenticatedSyncKit,
   createBrowserStorageAdapter,
   createKeepKit,
   createNextPagesRouterAdapter,
+  createSlot,
   createStorageAdapter,
   getKeepLocaleLabels,
   highlightText,
   isAllSelected,
   keepThemeNames,
+  mergeProps,
   toggleSelectAll,
   useKeepContext8 as useKeepContext,
   useKeepItem5 as useKeepItem,