@keepkit/ui 0.9.0 → 0.11.0

package/dist/index.js

@@ -6,12 +6,297 @@ import {
   createKeepKit as createCoreKeepKit
 } from "@keepkit/core/react";
 
+// src/KeepBackup.tsx
+import { useKeepContext } from "@keepkit/core/react";
+import { useRef, useState } from "react";
+
+// src/ui-context.tsx
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+var DEFAULT_LABELS = {
+  save: "Save",
+  saved: "Saved",
+  remove: "Remove",
+  loading: "Loading\u2026",
+  saving: "Saving\u2026",
+  syncing: "Syncing\u2026",
+  error: "Something went wrong.",
+  allTags: "All",
+  tags: "Tags",
+  filterTags: "Filter saved items by tag",
+  note: "Note",
+  saveNote: "Save note",
+  noItems: "No saved items.",
+  loadingItems: "Loading saved items\u2026",
+  errorItems: "Could not load saved items.",
+  search: "Search saved items",
+  sort: "Sort saved items",
+  newest: "Newest first",
+  oldest: "Oldest first",
+  savedNewest: "Saved newest first",
+  savedOldest: "Saved oldest first",
+  updatedNewest: "Updated newest first",
+  updatedOldest: "Updated oldest first",
+  previousPage: "Previous page",
+  nextPage: "Next page",
+  pagination: "Pagination",
+  page: "Page",
+  selectItems: "Select saved items",
+  selectedCount: "selected",
+  deleteSelected: "Delete selected",
+  tagsToApply: "Tags to apply",
+  applyTags: "Apply tags",
+  savedMessage: "Item saved.",
+  removedMessage: "Item removed.",
+  undo: "Undo",
+  undoAvailable: "Item removed. Undo?",
+  selectionScope: "Selection scope",
+  currentPage: "Current page",
+  searchResults: "Current search results",
+  allItems: "All saved items",
+  statusAvailable: "Available",
+  noteSavedMessage: "Note saved.",
+  exportData: "Export JSON",
+  importData: "Import JSON",
+  importMode: "Import mode",
+  merge: "Merge",
+  replace: "Replace",
+  importedCount: "items imported",
+  failedCount: "items failed",
+  storageQuotaError: "Storage is full. Free space and try again.",
+  statusExpired: "Expired",
+  statusRemoved: "Removed",
+  statusDeleted: "Deleted",
+  statusPrivate: "Private",
+  statusUnknown: "Unavailable"
+};
+var KEEP_LOCALE_LABELS = {
+  ja: {
+    save: "\u4FDD\u5B58",
+    saved: "\u4FDD\u5B58\u6E08\u307F",
+    remove: "\u524A\u9664",
+    loading: "\u8AAD\u307F\u8FBC\u307F\u4E2D\u2026",
+    saving: "\u4FDD\u5B58\u4E2D\u2026",
+    syncing: "\u540C\u671F\u4E2D\u2026",
+    allTags: "\u3059\u3079\u3066",
+    filterTags: "\u4FDD\u5B58\u30A2\u30A4\u30C6\u30E0\u3092\u30BF\u30B0\u3067\u7D5E\u308A\u8FBC\u3080",
+    note: "\u30E1\u30E2",
+    saveNote: "\u30E1\u30E2\u3092\u4FDD\u5B58",
+    loadingItems: "\u4FDD\u5B58\u30A2\u30A4\u30C6\u30E0\u3092\u8AAD\u307F\u8FBC\u307F\u4E2D\u2026",
+    errorItems: "\u4FDD\u5B58\u30A2\u30A4\u30C6\u30E0\u3092\u8AAD\u307F\u8FBC\u3081\u307E\u305B\u3093\u3067\u3057\u305F\u3002",
+    noItems: "\u4FDD\u5B58\u3055\u308C\u305F\u30A2\u30A4\u30C6\u30E0\u306F\u3042\u308A\u307E\u305B\u3093\u3002",
+    search: "\u4FDD\u5B58\u30A2\u30A4\u30C6\u30E0\u3092\u691C\u7D22",
+    sort: "\u4FDD\u5B58\u30A2\u30A4\u30C6\u30E0\u3092\u4E26\u3079\u66FF\u3048",
+    newest: "\u65B0\u3057\u3044\u9806",
+    oldest: "\u53E4\u3044\u9806",
+    savedNewest: "\u4FDD\u5B58\u65E5\u6642\u306E\u65B0\u3057\u3044\u9806",
+    savedOldest: "\u4FDD\u5B58\u65E5\u6642\u306E\u53E4\u3044\u9806",
+    updatedNewest: "\u66F4\u65B0\u65E5\u6642\u306E\u65B0\u3057\u3044\u9806",
+    updatedOldest: "\u66F4\u65B0\u65E5\u6642\u306E\u53E4\u3044\u9806",
+    previousPage: "\u524D\u306E\u30DA\u30FC\u30B8",
+    nextPage: "\u6B21\u306E\u30DA\u30FC\u30B8",
+    pagination: "\u30DA\u30FC\u30B8\u30CD\u30FC\u30B7\u30E7\u30F3",
+    page: "\u30DA\u30FC\u30B8",
+    selectItems: "\u4FDD\u5B58\u30A2\u30A4\u30C6\u30E0\u3092\u9078\u629E",
+    selectedCount: "\u4EF6\u3092\u9078\u629E\u4E2D",
+    deleteSelected: "\u9078\u629E\u9805\u76EE\u3092\u524A\u9664",
+    undo: "\u5143\u306B\u623B\u3059",
+    undoAvailable: "\u30A2\u30A4\u30C6\u30E0\u3092\u524A\u9664\u3057\u307E\u3057\u305F\u3002\u5143\u306B\u623B\u3057\u307E\u3059\u304B\uFF1F",
+    selectionScope: "\u9078\u629E\u7BC4\u56F2",
+    currentPage: "\u8868\u793A\u4E2D\u306E\u30DA\u30FC\u30B8",
+    searchResults: "\u73FE\u5728\u306E\u691C\u7D22\u7D50\u679C\u5168\u4F53",
+    allItems: "\u3059\u3079\u3066\u306E\u4FDD\u5B58\u30A2\u30A4\u30C6\u30E0",
+    tags: "\u30BF\u30B0",
+    statusAvailable: "\u5229\u7528\u53EF\u80FD",
+    tagsToApply: "\u9069\u7528\u3059\u308B\u30BF\u30B0",
+    applyTags: "\u30BF\u30B0\u3092\u9069\u7528"
+  },
+  ko: {
+    save: "\uC800\uC7A5",
+    saved: "\uC800\uC7A5\uB428",
+    remove: "\uC0AD\uC81C",
+    loading: "\uB85C\uB4DC \uC911\u2026",
+    saving: "\uC800\uC7A5 \uC911\u2026",
+    syncing: "\uB3D9\uAE30\uD654 \uC911\u2026",
+    noItems: "\uC800\uC7A5\uB41C \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4.",
+    search: "\uC800\uC7A5\uB41C \uD56D\uBAA9 \uAC80\uC0C9",
+    sort: "\uC800\uC7A5\uB41C \uD56D\uBAA9 \uC815\uB82C",
+    previousPage: "\uC774\uC804 \uD398\uC774\uC9C0",
+    nextPage: "\uB2E4\uC74C \uD398\uC774\uC9C0",
+    pagination: "\uD398\uC774\uC9C0 \uB9E4\uAE40",
+    page: "\uD398\uC774\uC9C0",
+    undo: "\uC2E4\uD589 \uCDE8\uC18C",
+    undoAvailable: "\uD56D\uBAA9\uC744 \uC0AD\uC81C\uD588\uC2B5\uB2C8\uB2E4. \uC2E4\uD589 \uCDE8\uC18C\uD560\uAE4C\uC694?",
+    selectionScope: "\uC120\uD0DD \uBC94\uC704",
+    currentPage: "\uD604\uC7AC \uD398\uC774\uC9C0",
+    searchResults: "\uD604\uC7AC \uAC80\uC0C9 \uACB0\uACFC \uC804\uCCB4",
+    allItems: "\uBAA8\uB4E0 \uC800\uC7A5 \uD56D\uBAA9",
+    tags: "\uD0DC\uADF8"
+  },
+  "zh-CN": {
+    save: "\u4FDD\u5B58",
+    saved: "\u5DF2\u4FDD\u5B58",
+    remove: "\u5220\u9664",
+    loading: "\u52A0\u8F7D\u4E2D\u2026",
+    saving: "\u4FDD\u5B58\u4E2D\u2026",
+    syncing: "\u540C\u6B65\u4E2D\u2026",
+    noItems: "\u6CA1\u6709\u5DF2\u4FDD\u5B58\u7684\u9879\u76EE\u3002",
+    search: "\u641C\u7D22\u5DF2\u4FDD\u5B58\u9879\u76EE",
+    sort: "\u6392\u5E8F\u5DF2\u4FDD\u5B58\u9879\u76EE",
+    previousPage: "\u4E0A\u4E00\u9875",
+    nextPage: "\u4E0B\u4E00\u9875",
+    pagination: "\u5206\u9875",
+    page: "\u9875",
+    undo: "\u64A4\u9500",
+    undoAvailable: "\u9879\u76EE\u5DF2\u5220\u9664\u3002\u8981\u64A4\u9500\u5417\uFF1F",
+    selectionScope: "\u9009\u62E9\u8303\u56F4",
+    currentPage: "\u5F53\u524D\u9875",
+    searchResults: "\u5F53\u524D\u641C\u7D22\u7ED3\u679C",
+    allItems: "\u5168\u90E8\u5DF2\u4FDD\u5B58\u9879\u76EE",
+    tags: "\u6807\u7B7E"
+  },
+  "zh-TW": {
+    save: "\u5132\u5B58",
+    saved: "\u5DF2\u5132\u5B58",
+    remove: "\u522A\u9664",
+    loading: "\u8F09\u5165\u4E2D\u2026",
+    saving: "\u5132\u5B58\u4E2D\u2026",
+    syncing: "\u540C\u6B65\u4E2D\u2026",
+    noItems: "\u6C92\u6709\u5DF2\u5132\u5B58\u7684\u9805\u76EE\u3002",
+    search: "\u641C\u5C0B\u5DF2\u5132\u5B58\u9805\u76EE",
+    sort: "\u6392\u5E8F\u5DF2\u5132\u5B58\u9805\u76EE",
+    previousPage: "\u4E0A\u4E00\u9801",
+    nextPage: "\u4E0B\u4E00\u9801",
+    undo: "\u5FA9\u539F",
+    undoAvailable: "\u9805\u76EE\u5DF2\u522A\u9664\u3002\u8981\u5FA9\u539F\u55CE\uFF1F",
+    selectionScope: "\u9078\u53D6\u7BC4\u570D",
+    currentPage: "\u76EE\u524D\u9801\u9762",
+    searchResults: "\u76EE\u524D\u641C\u5C0B\u7D50\u679C",
+    allItems: "\u6240\u6709\u5DF2\u5132\u5B58\u9805\u76EE",
+    tags: "\u6A19\u7C64"
+  }
+};
+KEEP_LOCALE_LABELS.zh = KEEP_LOCALE_LABELS["zh-CN"];
+var KeepUiLabelsContext = createContext({ labels: DEFAULT_LABELS });
+function KeepUiProvider({ labels, locale, labelResolver, children }) {
+  const value = useMemo(() => {
+    const localeKey = locale?.toLowerCase() ?? "en";
+    const dictionary = KEEP_LOCALE_LABELS[localeKey] ?? KEEP_LOCALE_LABELS[localeKey.split("-")[0]] ?? {};
+    const resolved = { ...DEFAULT_LABELS, ...dictionary, ...labels };
+    return { locale, labels: resolved, customLabels: labels, labelResolver };
+  }, [labelResolver, labels, locale]);
+  return /* @__PURE__ */ jsx(KeepUiLabelsContext.Provider, { value, children });
+}
+function useKeepUiLabels() {
+  return useContext(KeepUiLabelsContext);
+}
+function useUiLabel(key, override) {
+  const context = useKeepUiLabels();
+  return override ?? context.customLabels?.[key] ?? context.labelResolver?.(key, { locale: context.locale }) ?? context.labels[key];
+}
+function getKeepLocaleLabels(locale) {
+  const key = locale?.toLowerCase() ?? "en";
+  return { ...KEEP_LOCALE_LABELS[key] ?? KEEP_LOCALE_LABELS[key.split("-")[0]] ?? {} };
+}
+
+// src/KeepBackup.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function KeepBackup({
+  filename = "keepkit-backup.json",
+  onExport,
+  onImported,
+  ...props
+}) {
+  const context = useKeepContext();
+  const exportLabel = useUiLabel("exportData");
+  const importLabel = useUiLabel("importData");
+  const importModeLabel = useUiLabel("importMode");
+  const mergeLabel = useUiLabel("merge");
+  const replaceLabel = useUiLabel("replace");
+  const importedCountLabel = useUiLabel("importedCount");
+  const failedCountLabel = useUiLabel("failedCount");
+  const quotaErrorLabel = useUiLabel("storageQuotaError");
+  const inputRef = useRef(null);
+  const [mode, setMode] = useState("merge");
+  const [result, setResult] = useState();
+  const [error, setError] = useState();
+  async function handleExport() {
+    setError(void 0);
+    try {
+      const data = await context.exportBackup();
+      onExport?.(data);
+      if (typeof document === "undefined") return;
+      const url = URL.createObjectURL(new Blob([data], { type: "application/json" }));
+      const anchor = document.createElement("a");
+      anchor.href = url;
+      anchor.download = filename;
+      anchor.click();
+      URL.revokeObjectURL(url);
+    } catch (cause) {
+      setError(cause);
+    }
+  }
+  async function handleImport(event) {
+    const file = event.currentTarget.files?.[0];
+    event.currentTarget.value = "";
+    if (!file) return;
+    setError(void 0);
+    setResult(void 0);
+    try {
+      const imported = await context.importBackup(await file.text(), { mode });
+      setResult(imported);
+      onImported?.(imported);
+    } catch (cause) {
+      setError(cause);
+    }
+  }
+  return /* @__PURE__ */ jsxs("section", { ...props, "data-state": error ? "error" : result ? "complete" : "idle", children: [
+    /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => void handleExport(), disabled: context.isMutating, children: exportLabel }),
+    /* @__PURE__ */ jsxs("label", { children: [
+      importModeLabel,
+      /* @__PURE__ */ jsxs("select", { value: mode, onChange: (event) => setMode(event.currentTarget.value), children: [
+        /* @__PURE__ */ jsx2("option", { value: "merge", children: mergeLabel }),
+        /* @__PURE__ */ jsx2("option", { value: "replace", children: replaceLabel })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => inputRef.current?.click(), disabled: context.isMutating, children: importLabel }),
+    /* @__PURE__ */ jsx2(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        accept: "application/json,.json",
+        "aria-label": importLabel,
+        onChange: (event) => void handleImport(event)
+      }
+    ),
+    result ? /* @__PURE__ */ jsxs("p", { role: "status", children: [
+      result.imported,
+      " ",
+      importedCountLabel,
+      "; ",
+      result.failed,
+      " ",
+      failedCountLabel
+    ] }) : null,
+    error ? /* @__PURE__ */ jsx2("p", { role: "alert", children: isQuotaError(error) ? quotaErrorLabel : getErrorMessage(error) }) : null
+  ] });
+}
+function isQuotaError(error) {
+  if (error instanceof Error && error.name === "KeepStorageQuotaError") return true;
+  if (error && typeof error === "object" && "cause" in error) return isQuotaError(error.cause);
+  return false;
+}
+function getErrorMessage(error) {
+  return error instanceof Error ? error.message : "Something went wrong.";
+}
+
 // src/KeepBulkActions.tsx
 import { useKeepList } from "@keepkit/core/react";
-import { useState } from "react";
+import { useState as useState2 } from "react";
 
 // src/KeepItemCheckbox.tsx
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 function KeepItemCheckbox({
   item,
   checked = false,
@@ -22,7 +307,7 @@ function KeepItemCheckbox({
 }) {
   const itemLabel = getItemLabel(item) ?? item.id;
   const accessibleLabel = ariaLabel ?? (typeof label === "string" ? label : itemLabel);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx3(
     "input",
     {
       ...props,
@@ -46,7 +331,7 @@ import {
   cloneElement,
   isValidElement
 } from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function toKeepButtonItem(item) {
   return {
     id: item.id,
@@ -75,66 +360,11 @@ function renderRoot(asChild, child, props, body, componentName) {
     if (!isValidElement(child)) throw new Error(`${componentName} with asChild requires a single React element child.`);
     return cloneElement(child, { ...props, children: body });
   }
-  return /* @__PURE__ */ jsx2("div", { ...props, children: body });
-}
-
-// src/ui-context.tsx
-import { createContext, useContext, useMemo } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var DEFAULT_LABELS = {
-  save: "Save",
-  saved: "Saved",
-  remove: "Remove",
-  loading: "Loading\u2026",
-  saving: "Saving\u2026",
-  syncing: "Syncing\u2026",
-  error: "Something went wrong.",
-  allTags: "All",
-  filterTags: "Filter saved items by tag",
-  note: "Note",
-  saveNote: "Save note",
-  noItems: "No saved items.",
-  loadingItems: "Loading saved items\u2026",
-  errorItems: "Could not load saved items.",
-  search: "Search saved items",
-  sort: "Sort saved items",
-  newest: "Newest first",
-  oldest: "Oldest first",
-  savedNewest: "Saved newest first",
-  savedOldest: "Saved oldest first",
-  updatedNewest: "Updated newest first",
-  updatedOldest: "Updated oldest first",
-  previousPage: "Previous page",
-  nextPage: "Next page",
-  pagination: "Pagination",
-  page: "Page",
-  selectItems: "Select saved items",
-  selectedCount: "selected",
-  deleteSelected: "Delete selected",
-  tagsToApply: "Tags to apply",
-  applyTags: "Apply tags",
-  savedMessage: "Item saved.",
-  removedMessage: "Item removed.",
-  noteSavedMessage: "Note saved."
-};
-var KeepUiLabelsContext = createContext({ labels: DEFAULT_LABELS });
-function KeepUiProvider({ labels, locale, labelResolver, children }) {
-  const value = useMemo(() => {
-    const resolved = { ...DEFAULT_LABELS, ...labels };
-    return { locale, labels: resolved, labelResolver };
-  }, [labelResolver, labels, locale]);
-  return /* @__PURE__ */ jsx3(KeepUiLabelsContext.Provider, { value, children });
-}
-function useKeepUiLabels() {
-  return useContext(KeepUiLabelsContext);
-}
-function useUiLabel(key, override) {
-  const context = useKeepUiLabels();
-  return override ?? context.labelResolver?.(key, { locale: context.locale }) ?? context.labels[key];
+  return /* @__PURE__ */ jsx4("div", { ...props, children: body });
 }
 
 // src/KeepBulkActions.tsx
-import { Fragment, jsx as jsx4, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 function isAllSelected(items, selectedIds) {
   if (items.length === 0) return false;
   const selected = new Set(selectedIds);
@@ -156,6 +386,8 @@ function KeepBulkActions({
   onSelectedIdsChange,
   renderItem,
   onCompleted,
+  selectionScope: controlledScope,
+  onSelectionScopeChange,
   render,
   children,
   ...props
@@ -165,21 +397,34 @@ function KeepBulkActions({
   const deleteSelectedLabel = useUiLabel("deleteSelected");
   const tagsLabel = useUiLabel("tagsToApply");
   const applyTagsLabel = useUiLabel("applyTags");
+  const selectionScopeLabel = useUiLabel("selectionScope");
+  const currentPageLabel = useUiLabel("currentPage");
+  const searchResultsLabel = useUiLabel("searchResults");
+  const allItemsLabel = useUiLabel("allItems");
   const list = useKeepList(query);
-  const [uncontrolledSelectedIds, setUncontrolledSelectedIds] = useState(defaultSelectedIds);
+  const queryList = useKeepList(query ? { ...query, pagination: void 0 } : { pagination: void 0 });
+  const allList = useKeepList({ pagination: void 0 });
+  const [uncontrolledScope, setUncontrolledScope] = useState2(controlledScope ?? "page");
+  const selectionScope = controlledScope ?? uncontrolledScope;
+  const setSelectionScope = (scope) => {
+    if (controlledScope === void 0) setUncontrolledScope(scope);
+    onSelectionScopeChange?.(scope);
+  };
+  const targetItems = selectionScope === "page" ? list.items : selectionScope === "query" ? queryList.items : allList.items;
+  const [uncontrolledSelectedIds, setUncontrolledSelectedIds] = useState2(defaultSelectedIds);
   const selectedIds = controlledSelectedIds ?? uncontrolledSelectedIds;
   const selected = new Set(selectedIds);
-  const [tagsInput, setTagsInput] = useState("");
+  const [tagsInput, setTagsInput] = useState2("");
   const setSelectedIds = (ids) => {
     if (controlledSelectedIds === void 0) setUncontrolledSelectedIds(ids);
     onSelectedIdsChange?.(ids);
   };
   const toggle = (id) => setSelectedIds(selected.has(id) ? selectedIds.filter((current) => current !== id) : [...selectedIds, id]);
-  const allSelected = isAllSelected(list.items, selectedIds);
-  const toggleAll = () => setSelectedIds(toggleSelectAll(list.items, selectedIds));
+  const allSelected = isAllSelected(targetItems, selectedIds);
+  const toggleAll = () => setSelectedIds(toggleSelectAll(targetItems, selectedIds));
   const remove = async () => {
     const ids = [...selectedIds];
-    await list.removeBatch(ids);
+    await list.removeBatchWithUndo(ids);
     onCompleted?.("remove", ids);
     setSelectedIds([]);
   };
@@ -190,7 +435,7 @@ function KeepBulkActions({
     setSelectedIds([]);
   };
   const state = {
-    items: list.items,
+    items: targetItems,
     selectedIds,
     selectedCount: selectedIds.length,
     isAllSelected: allSelected,
@@ -202,19 +447,36 @@ function KeepBulkActions({
     toggleAll,
     remove,
     updateTags,
-    isMutating: list.isMutating
+    isMutating: list.isMutating,
+    selectionScope,
+    setSelectionScope
   };
-  const body = render ? render(state) : typeof children === "function" ? children(state) : children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("fieldset", { children: [
-      /* @__PURE__ */ jsx4("legend", { children: selectItemsLabel }),
-      /* @__PURE__ */ jsxs("label", { children: [
-        /* @__PURE__ */ jsx4("input", { type: "checkbox", checked: allSelected, onChange: toggleAll, "aria-label": selectItemsLabel }),
+  const body = render ? render(state) : typeof children === "function" ? children(state) : children ?? /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsxs2("fieldset", { children: [
+      /* @__PURE__ */ jsx5("legend", { children: selectItemsLabel }),
+      /* @__PURE__ */ jsxs2("label", { children: [
+        selectionScopeLabel,
+        /* @__PURE__ */ jsxs2(
+          "select",
+          {
+            value: selectionScope,
+            onChange: (event) => setSelectionScope(event.currentTarget.value),
+            children: [
+              /* @__PURE__ */ jsx5("option", { value: "page", children: currentPageLabel }),
+              /* @__PURE__ */ jsx5("option", { value: "query", children: searchResultsLabel }),
+              /* @__PURE__ */ jsx5("option", { value: "all", children: allItemsLabel })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs2("label", { children: [
+        /* @__PURE__ */ jsx5("input", { type: "checkbox", checked: allSelected, onChange: toggleAll, "aria-label": selectItemsLabel }),
         selectedIds.length,
         " ",
         selectedCountLabel
       ] }),
-      list.items.map((item) => /* @__PURE__ */ jsxs("span", { children: [
-        /* @__PURE__ */ jsx4(
+      targetItems.map((item) => /* @__PURE__ */ jsxs2("span", { children: [
+        /* @__PURE__ */ jsx5(
           KeepItemCheckbox,
           {
             item,
@@ -225,12 +487,12 @@ function KeepBulkActions({
         renderItem ? renderItem(item, selected.has(item.id)) : getMetaTitle(item.meta) ?? item.id
       ] }, item.id))
     ] }),
-    /* @__PURE__ */ jsx4("button", { type: "button", onClick: () => void remove(), disabled: selectedIds.length === 0 || list.isMutating, children: deleteSelectedLabel }),
-    /* @__PURE__ */ jsxs("label", { children: [
+    /* @__PURE__ */ jsx5("button", { type: "button", onClick: () => void remove(), disabled: selectedIds.length === 0 || list.isMutating, children: deleteSelectedLabel }),
+    /* @__PURE__ */ jsxs2("label", { children: [
       tagsLabel,
-      /* @__PURE__ */ jsx4("input", { value: tagsInput, onChange: (event) => setTagsInput(event.currentTarget.value) })
+      /* @__PURE__ */ jsx5("input", { value: tagsInput, onChange: (event) => setTagsInput(event.currentTarget.value) })
     ] }),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       "button",
       {
         type: "button",
@@ -240,7 +502,7 @@ function KeepBulkActions({
       }
     )
   ] });
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     "section",
     {
       ...props,
@@ -257,7 +519,7 @@ import {
   KeepButton as CoreKeepButton,
   useKeepItem
 } from "@keepkit/core/react";
-import { Fragment as Fragment2, jsx as jsx5 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx6 } from "react/jsx-runtime";
 function KeepButton({ labels, ...props }) {
   const saveLabel = useUiLabel("save", typeof labels?.unsaved === "string" ? labels.unsaved : void 0);
   const savedLabel = useUiLabel("saved", typeof labels?.saved === "string" ? labels.saved : void 0);
@@ -280,13 +542,13 @@ function KeepButton({ labels, ...props }) {
     savedAriaLabel: labels?.savedAriaLabel ?? props.savedAriaLabel,
     unsavedAriaLabel: labels?.unsavedAriaLabel ?? props.unsavedAriaLabel
   };
-  if (!customStateLabel) return /* @__PURE__ */ jsx5(CoreKeepButton, { ...sharedProps });
-  return /* @__PURE__ */ jsx5(CoreKeepButton, { ...sharedProps, children: (state) => /* @__PURE__ */ jsx5(Fragment2, { children: getStateContent(state) }) });
+  if (!customStateLabel) return /* @__PURE__ */ jsx6(CoreKeepButton, { ...sharedProps });
+  return /* @__PURE__ */ jsx6(CoreKeepButton, { ...sharedProps, children: (state) => /* @__PURE__ */ jsx6(Fragment2, { children: getStateContent(state) }) });
 }
 
 // src/KeepCollection.tsx
 import { KeepErrorBoundary as KeepErrorBoundary2, useKeepList as useKeepList4 } from "@keepkit/core/react";
-import { useMemo as useMemo3, useState as useState4 } from "react";
+import { useMemo as useMemo3, useState as useState5 } from "react";
 
 // src/KeepList.tsx
 import {
@@ -297,8 +559,10 @@ import { isValidElement as isValidElement3 } from "react";
 
 // src/KeepItemCard.tsx
 import { useKeepItem as useKeepItem2 } from "@keepkit/core/react";
-import { isValidElement as isValidElement2 } from "react";
-import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+import {
+  isValidElement as isValidElement2
+} from "react";
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 function KeepItemCard({
   item,
   title,
@@ -306,6 +570,8 @@ function KeepItemCard({
   getImageProps,
   imageComponent: ImageComponent,
   renderImage,
+  renderTags,
+  showTags = true,
   imageAlt,
   render,
   children,
@@ -315,6 +581,12 @@ function KeepItemCard({
   showSaveButton = true,
   saveButtonLabels,
   asChild = false,
+  href: hrefOption,
+  onOpen,
+  linkTarget = "title",
+  linkComponent: LinkComponent,
+  linkTargetAttribute,
+  linkRel,
   className,
   ...rootProps
 }) {
@@ -327,10 +599,28 @@ function KeepItemCard({
     isSaved: itemState.isSaved,
     isMutating: itemState.isMutating,
     error: itemState.error,
-    remove: itemState.remove
+    remove: itemState.remove,
+    status: item.status
   };
   const resolvedTitle = typeof title === "function" ? title(item) : title ?? getTitle?.(item) ?? getMetaTitle(item.meta) ?? item.id;
   const imageProps = getImageProps?.(item, resolvedTitle);
+  const href = typeof hrefOption === "function" ? hrefOption(item) : hrefOption;
+  const isAvailable = item.status === void 0 || item.status === "available";
+  const statusLabelKey = item.status && item.status !== "available" ? getStatusLabelKey(item.status) : "statusUnknown";
+  const unavailableLabel = useUiLabel(statusLabelKey);
+  const tagsLabel = useUiLabel("tags");
+  const statusLabel = item.status && item.status !== "available" ? unavailableLabel : void 0;
+  function renderLink(content) {
+    if (!href || !isAvailable) return content;
+    const linkProps = {
+      href,
+      target: linkTargetAttribute,
+      rel: linkRel,
+      onClick: (event) => onOpen?.(item, event),
+      children: content
+    };
+    return LinkComponent ? /* @__PURE__ */ jsx7(LinkComponent, { ...linkProps }) : /* @__PURE__ */ jsx7("a", { ...linkProps });
+  }
   async function handleRemove() {
     try {
       await itemState.remove();
@@ -339,10 +629,12 @@ function KeepItemCard({
       onRemoveError?.(error);
     }
   }
-  const body = render ? render(state) : typeof contentChildren === "function" ? contentChildren(state) : contentChildren ?? /* @__PURE__ */ jsxs2(Fragment3, { children: [
-    imageProps ? renderImage?.({ ...imageProps, alt: imageAlt ?? imageProps.alt }, item) ?? (ImageComponent ? /* @__PURE__ */ jsx6(ImageComponent, { ...imageProps, alt: imageAlt ?? imageProps.alt }) : /* @__PURE__ */ jsx6("img", { ...imageProps, alt: imageAlt ?? imageProps.alt })) : null,
-    /* @__PURE__ */ jsx6("h3", { children: resolvedTitle }),
-    showSaveButton ? /* @__PURE__ */ jsx6(
+  const body = render ? render(state) : typeof contentChildren === "function" ? contentChildren(state) : contentChildren ?? /* @__PURE__ */ jsxs3(Fragment3, { children: [
+    imageProps ? renderImage?.({ ...imageProps, alt: imageAlt ?? imageProps.alt }, item) ?? (ImageComponent ? /* @__PURE__ */ jsx7(ImageComponent, { ...imageProps, alt: imageAlt ?? imageProps.alt }) : /* @__PURE__ */ jsx7("img", { ...imageProps, alt: imageAlt ?? imageProps.alt })) : null,
+    /* @__PURE__ */ jsx7("h3", { children: linkTarget === "title" ? renderLink(resolvedTitle) : resolvedTitle }),
+    showTags && (item.tags?.length ?? 0) > 0 ? renderTags ? renderTags(item.tags ?? [], item) : /* @__PURE__ */ jsx7("ul", { "aria-label": tagsLabel, children: item.tags?.map((tag) => /* @__PURE__ */ jsx7("li", { children: tag }, tag)) }) : null,
+    statusLabel ? /* @__PURE__ */ jsx7("p", { "data-status": item.status, children: statusLabel }) : null,
+    showSaveButton ? /* @__PURE__ */ jsx7(
       KeepButton,
       {
         item: toKeepButtonItem(item),
@@ -350,8 +642,9 @@ function KeepItemCard({
         getAriaLabel: (buttonState) => `${buttonState.isSaved ? removeActionLabel : saveActionLabel} ${String(resolvedTitle)}`
       }
     ) : null,
-    /* @__PURE__ */ jsx6("button", { type: "button", onClick: () => void handleRemove(), disabled: itemState.isMutating, children: removeLabel ?? removeActionLabel })
+    /* @__PURE__ */ jsx7("button", { type: "button", onClick: () => void handleRemove(), disabled: itemState.isMutating, children: removeLabel ?? removeActionLabel })
   ] });
+  const linkedBody = linkTarget === "card" ? renderLink(body) : body;
   return renderRoot(
     asChild,
     isValidElement2(children) ? children : void 0,
@@ -360,20 +653,35 @@ function KeepItemCard({
       className,
       "aria-busy": itemState.isMutating || rootProps["aria-busy"],
       "data-state": itemState.isSaved ? "saved" : "unsaved",
+      "data-status": item.status ?? "available",
       "data-loading": itemState.isMutating ? "true" : void 0
     },
-    body,
+    linkedBody,
     "KeepItemCard"
   );
 }
+function getStatusLabelKey(status) {
+  switch (status) {
+    case "expired":
+      return "statusExpired";
+    case "removed":
+      return "statusRemoved";
+    case "deleted":
+      return "statusDeleted";
+    case "private":
+      return "statusPrivate";
+    default:
+      return "statusUnknown";
+  }
+}
 
 // src/KeepList.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function KeepList(props) {
   const { fallback, onBoundaryError, boundaryResetKey, ...listProps } = props;
-  const content = /* @__PURE__ */ jsx7(KeepListContent, { ...listProps });
+  const content = /* @__PURE__ */ jsx8(KeepListContent, { ...listProps });
   if (fallback === void 0 && onBoundaryError === void 0) return content;
-  return /* @__PURE__ */ jsx7(KeepErrorBoundary, { fallback, onError: onBoundaryError, resetKey: boundaryResetKey, children: content });
+  return /* @__PURE__ */ jsx8(KeepErrorBoundary, { fallback, onError: onBoundaryError, resetKey: boundaryResetKey, children: content });
 }
 function KeepListContent({
   query,
@@ -383,6 +691,7 @@ function KeepListContent({
   empty,
   error: errorContent,
   itemCardProps,
+  layout = "list",
   asChild = false,
   className,
   ...rootProps
@@ -397,7 +706,8 @@ function KeepListContent({
     loading: loading ?? defaultLoading,
     empty: empty ?? defaultEmpty,
     error: errorContent ?? defaultError,
-    itemCardProps
+    itemCardProps,
+    layout
   });
   return renderRoot(
     asChild,
@@ -425,15 +735,22 @@ function getListBody(state, options) {
   if (state.isHydrated && state.items.length === 0) return resolveContent(options.empty, state);
   if (typeof options.children === "function") return options.children(state);
   if (options.children !== void 0 && !isValidElement3(options.children)) return options.children;
-  return /* @__PURE__ */ jsx7("ul", { children: state.items.map(
-    (item) => options.renderItem ? options.renderItem(item, state) : /* @__PURE__ */ jsx7("li", { children: /* @__PURE__ */ jsx7(KeepItemCard, { item, ...options.itemCardProps }) }, item.id)
-  ) });
+  return /* @__PURE__ */ jsx8(
+    "ul",
+    {
+      "data-layout": options.layout,
+      style: options.layout === "grid" ? { display: "grid", gap: "1rem", gridTemplateColumns: "repeat(auto-fit, minmax(16rem, 1fr))" } : options.layout === "compact" ? { display: "grid", gap: "0.5rem", gridTemplateColumns: "repeat(auto-fit, minmax(12rem, 1fr))" } : { display: "flex", flexDirection: "column", gap: "1rem" },
+      children: state.items.map(
+        (item) => options.renderItem ? options.renderItem(item, state) : /* @__PURE__ */ jsx8("li", { children: /* @__PURE__ */ jsx8(KeepItemCard, { item, ...options.itemCardProps }) }, item.id)
+      )
+    }
+  );
 }
 
 // src/KeepTagFilter.tsx
 import { useKeepList as useKeepList3 } from "@keepkit/core/react";
-import { isValidElement as isValidElement4, useCallback, useMemo as useMemo2, useState as useState2 } from "react";
-import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+import { isValidElement as isValidElement4, useCallback, useMemo as useMemo2, useState as useState3 } from "react";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 function KeepTagFilter({
   query,
   value: controlledValue,
@@ -451,7 +768,7 @@ function KeepTagFilter({
 }) {
   const uiAllLabel = useUiLabel("allTags");
   const uiAriaLabel = useUiLabel("filterTags");
-  const [uncontrolledValue, setUncontrolledValue] = useState2(defaultValue);
+  const [uncontrolledValue, setUncontrolledValue] = useState3(defaultValue);
   const resolvedValue = controlledValue ?? uncontrolledValue;
   const list = useKeepList3({
     ...query,
@@ -470,12 +787,12 @@ function KeepTagFilter({
     [list.tagCounts, list.tags, resolvedValue, select]
   );
   const contentChildren = asChild && isValidElement4(children) ? void 0 : children;
-  const body = render ? render(state) : typeof contentChildren === "function" ? contentChildren(state) : contentChildren ?? /* @__PURE__ */ jsxs3("fieldset", { children: [
-    /* @__PURE__ */ jsx8("legend", { children: ariaLabel ?? uiAriaLabel }),
-    /* @__PURE__ */ jsx8("button", { type: "button", "aria-pressed": resolvedValue === void 0, onClick: () => select(), children: allLabel ?? uiAllLabel }),
-    list.tags.map((tag) => /* @__PURE__ */ jsxs3("button", { type: "button", "aria-pressed": resolvedValue === tag, onClick: () => select(tag), children: [
+  const body = render ? render(state) : typeof contentChildren === "function" ? contentChildren(state) : contentChildren ?? /* @__PURE__ */ jsxs4("fieldset", { children: [
+    /* @__PURE__ */ jsx9("legend", { children: ariaLabel ?? uiAriaLabel }),
+    /* @__PURE__ */ jsx9("button", { type: "button", "aria-pressed": resolvedValue === void 0, onClick: () => select(), children: allLabel ?? uiAllLabel }),
+    list.tags.map((tag) => /* @__PURE__ */ jsxs4("button", { type: "button", "aria-pressed": resolvedValue === tag, onClick: () => select(tag), children: [
       renderTag ? renderTag(tag, list.tagCounts[tag] ?? 0, resolvedValue === tag) : tag,
-      /* @__PURE__ */ jsxs3("span", { children: [
+      /* @__PURE__ */ jsxs4("span", { children: [
         " (",
         list.tagCounts[tag] ?? 0,
         ")"
@@ -497,8 +814,8 @@ function KeepTagFilter({
 }
 
 // src/query-controls.tsx
-import { useEffect, useState as useState3 } from "react";
-import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useEffect, useState as useState4 } from "react";
+import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 function KeepSearchInput({
   value: controlledValue,
   defaultValue = "",
@@ -509,7 +826,7 @@ function KeepSearchInput({
   ...props
 }) {
   const label = useUiLabel("search");
-  const [uncontrolledValue, setUncontrolledValue] = useState3(defaultValue);
+  const [uncontrolledValue, setUncontrolledValue] = useState4(defaultValue);
   const value = controlledValue ?? uncontrolledValue;
   useEffect(() => {
     if (!onValueChange) return;
@@ -520,7 +837,7 @@ function KeepSearchInput({
     const timer = window.setTimeout(() => onValueChange(value), debounceMs);
     return () => window.clearTimeout(timer);
   }, [debounceMs, onValueChange, value]);
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     "input",
     {
       ...props,
@@ -550,15 +867,15 @@ function KeepSortSelect({
   const updatedOldestLabel = useUiLabel("updatedOldest");
   const savedNewestLabel = useUiLabel("savedNewest");
   const savedOldestLabel = useUiLabel("savedOldest");
-  const [uncontrolledValue, setUncontrolledValue] = useState3(defaultValue);
+  const [uncontrolledValue, setUncontrolledValue] = useState4(defaultValue);
   const value = controlledValue ?? uncontrolledValue;
-  const options = children ?? /* @__PURE__ */ jsxs4(Fragment4, { children: [
-    /* @__PURE__ */ jsx9("option", { value: "updatedAt:desc", children: updatedNewestLabel }),
-    /* @__PURE__ */ jsx9("option", { value: "updatedAt:asc", children: updatedOldestLabel }),
-    /* @__PURE__ */ jsx9("option", { value: "savedAt:desc", children: savedNewestLabel }),
-    /* @__PURE__ */ jsx9("option", { value: "savedAt:asc", children: savedOldestLabel })
+  const options = children ?? /* @__PURE__ */ jsxs5(Fragment4, { children: [
+    /* @__PURE__ */ jsx10("option", { value: "updatedAt:desc", children: updatedNewestLabel }),
+    /* @__PURE__ */ jsx10("option", { value: "updatedAt:asc", children: updatedOldestLabel }),
+    /* @__PURE__ */ jsx10("option", { value: "savedAt:desc", children: savedNewestLabel }),
+    /* @__PURE__ */ jsx10("option", { value: "savedAt:asc", children: savedOldestLabel })
   ] });
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     "select",
     {
       ...props,
@@ -600,11 +917,11 @@ function KeepPagination({
     "aria-label": props["aria-label"] ?? paginationLabel,
     "data-state": pageCount > 1 ? "active" : "idle"
   };
-  if (render) return /* @__PURE__ */ jsx9("nav", { ...navProps, children: render({ page: currentPage, pageCount, goToPage }) });
+  if (render) return /* @__PURE__ */ jsx10("nav", { ...navProps, children: render({ page: currentPage, pageCount, goToPage }) });
   const visiblePages = getVisiblePages(currentPage, pageCount, Math.max(1, maxPageButtons));
-  return /* @__PURE__ */ jsxs4("nav", { ...navProps, children: [
-    /* @__PURE__ */ jsx9("button", { type: "button", onClick: () => goToPage(currentPage - 1), disabled: currentPage <= 1, children: previousPageLabel }),
-    visiblePages.map((nextPage) => /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs5("nav", { ...navProps, children: [
+    /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => goToPage(currentPage - 1), disabled: currentPage <= 1, children: previousPageLabel }),
+    visiblePages.map((nextPage) => /* @__PURE__ */ jsx10(
       "button",
       {
         type: "button",
@@ -615,7 +932,7 @@ function KeepPagination({
       },
       nextPage
     )),
-    /* @__PURE__ */ jsx9("button", { type: "button", onClick: () => goToPage(currentPage + 1), disabled: currentPage >= pageCount, children: nextPageLabel })
+    /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => goToPage(currentPage + 1), disabled: currentPage >= pageCount, children: nextPageLabel })
   ] });
 }
 function getVisiblePages(currentPage, pageCount, maxPageButtons) {
@@ -625,17 +942,102 @@ function getVisiblePages(currentPage, pageCount, maxPageButtons) {
   return Array.from({ length: maxPageButtons }, (_, index) => start + index);
 }
 
+// src/url-sync.tsx
+import {
+  DEFAULT_KEEP_URL_PARAMS,
+  decodeKeepListQuery,
+  encodeKeepListQuery
+} from "@keepkit/core/core";
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+function createNextPagesRouterAdapter(router) {
+  const getUrl = () => router.asPath ?? (typeof window === "undefined" ? "/" : window.location.href);
+  return {
+    getUrl,
+    subscribe: router.events ? (listener) => {
+      router.events?.on("routeChangeComplete", listener);
+      return () => router.events?.off("routeChangeComplete", listener);
+    } : void 0,
+    navigate: (url, mode) => {
+      void router[mode](url, void 0, { shallow: true });
+    }
+  };
+}
+function useKeepUrlSync({
+  enabled = true,
+  query,
+  onQueryChange,
+  options = {},
+  adapter: providedAdapter
+}) {
+  const browserAdapterRef = useRef2(getBrowserAdapter());
+  const adapter = providedAdapter ?? browserAdapterRef.current;
+  const onQueryChangeRef = useRef2(onQueryChange);
+  onQueryChangeRef.current = onQueryChange;
+  const skipWriteRef = useRef2(true);
+  const params = options.params;
+  useEffect2(() => {
+    if (!enabled) return;
+    const read = () => {
+      const url = adapter.getUrl();
+      const decoded = decodeKeepListQuery(url, { params });
+      skipWriteRef.current = true;
+      onQueryChangeRef.current((previousQuery) => ({
+        ...previousQuery,
+        ...decoded.search ? { search: decoded.search } : { search: void 0 },
+        ...decoded.tags ? { tags: decoded.tags } : { tags: void 0 },
+        ...decoded.sort ? { sort: decoded.sort } : {},
+        ...decoded.pagination ? { pagination: { ...previousQuery.pagination, ...decoded.pagination } } : {}
+      }));
+    };
+    read();
+    return adapter.subscribe?.(read);
+  }, [adapter, enabled, params]);
+  useEffect2(() => {
+    if (!enabled) return;
+    if (skipWriteRef.current) {
+      skipWriteRef.current = false;
+      return;
+    }
+    const currentUrl = new URL(adapter.getUrl(), "http://keepkit.invalid");
+    const urlParams = { ...DEFAULT_KEEP_URL_PARAMS, ...params };
+    for (const key of Object.values(urlParams)) currentUrl.searchParams.delete(key);
+    const nextParams = encodeKeepListQuery(query, { params });
+    nextParams.forEach((value, key) => {
+      currentUrl.searchParams.append(key, value);
+    });
+    const nextUrl = `${currentUrl.pathname}${currentUrl.search}${currentUrl.hash}`;
+    adapter.navigate(nextUrl, options.history ?? "push");
+  }, [adapter, enabled, options.history, params, query]);
+}
+function getBrowserAdapter() {
+  return {
+    getUrl: () => typeof window === "undefined" ? "/" : window.location.href,
+    subscribe: (listener) => {
+      if (typeof window === "undefined") return () => void 0;
+      window.addEventListener("popstate", listener);
+      return () => window.removeEventListener("popstate", listener);
+    },
+    navigate: (url, mode) => {
+      if (typeof window === "undefined") return;
+      window.history[mode === "push" ? "pushState" : "replaceState"]({}, "", url);
+    }
+  };
+}
+
 // src/KeepCollection.tsx
-import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 function KeepCollection(props) {
   const { fallback, onBoundaryError, boundaryResetKey, ...collectionProps } = props;
-  const content = /* @__PURE__ */ jsx10(KeepCollectionContent, { ...collectionProps });
+  const content = /* @__PURE__ */ jsx11(KeepCollectionContent, { ...collectionProps });
   if (fallback === void 0 && onBoundaryError === void 0) return content;
-  return /* @__PURE__ */ jsx10(KeepErrorBoundary2, { fallback, onError: onBoundaryError, resetKey: boundaryResetKey, children: content });
+  return /* @__PURE__ */ jsx11(KeepErrorBoundary2, { fallback, onError: onBoundaryError, resetKey: boundaryResetKey, children: content });
 }
 function KeepCollectionContent({
   query = {},
   pageSize = 20,
+  layout = "list",
+  urlSync = false,
+  urlAdapter,
   features,
   renderItem,
   itemCardProps,
@@ -653,10 +1055,10 @@ function KeepCollectionContent({
     bulkActions: false,
     ...features
   };
-  const [searchValue, setSearchValue] = useState4(query.search?.query ?? "");
-  const [sort, setSort] = useState4(query.sort ?? { by: "updatedAt", direction: "desc" });
-  const [tag, setTag] = useState4(query.tags?.[0]);
-  const [page, setPage] = useState4(query.pagination?.page ?? 1);
+  const [searchValue, setSearchValue] = useState5(query.search?.query ?? "");
+  const [sort, setSort] = useState5(query.sort ?? { by: "updatedAt", direction: "desc" });
+  const [tag, setTag] = useState5(query.tags?.[0]);
+  const [page, setPage] = useState5(query.pagination?.page ?? 1);
   const resolvedPageSize = query.pagination?.pageSize ?? pageSize;
   const resolvedQuery = useMemo3(
     () => ({
@@ -668,8 +1070,21 @@ function KeepCollectionContent({
     }),
     [enabled.pagination, enabled.search, enabled.sort, page, query, resolvedPageSize, searchValue, sort, tag]
   );
+  useKeepUrlSync({
+    enabled: Boolean(urlSync),
+    query: resolvedQuery,
+    onQueryChange: (nextOrUpdater) => {
+      const next = typeof nextOrUpdater === "function" ? nextOrUpdater(resolvedQuery) : nextOrUpdater;
+      setSearchValue(next.search?.query ?? "");
+      setSort(next.sort ?? { by: "updatedAt", direction: "desc" });
+      setTag(next.tags?.[0]);
+      setPage(next.pagination?.page ?? 1);
+    },
+    options: typeof urlSync === "object" ? urlSync : {},
+    adapter: urlAdapter
+  });
   const list = useKeepList4(resolvedQuery);
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "section",
     {
       ...rootProps,
@@ -678,8 +1093,8 @@ function KeepCollectionContent({
       "data-state": getCollectionState(list),
       "data-loading": list.isLoading || list.isMutating ? "true" : void 0,
       children: [
-        /* @__PURE__ */ jsxs5("div", { children: [
-          enabled.search ? /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsxs6("div", { children: [
+          enabled.search ? /* @__PURE__ */ jsx11(
             KeepSearchInput,
             {
               value: searchValue,
@@ -689,7 +1104,7 @@ function KeepCollectionContent({
               }
             }
           ) : null,
-          enabled.sort ? /* @__PURE__ */ jsx10(
+          enabled.sort ? /* @__PURE__ */ jsx11(
             KeepSortSelect,
             {
               value: sortToValue(sort),
@@ -699,7 +1114,7 @@ function KeepCollectionContent({
               }
             }
           ) : null,
-          enabled.tagFilter ? /* @__PURE__ */ jsx10(
+          enabled.tagFilter ? /* @__PURE__ */ jsx11(
             KeepTagFilter,
             {
               query,
@@ -711,18 +1126,19 @@ function KeepCollectionContent({
             }
           ) : null
         ] }),
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx11(
           KeepList,
           {
             query: resolvedQuery,
             renderItem,
             itemCardProps,
+            layout,
             loading,
             empty,
             error
           }
         ),
-        enabled.pagination ? /* @__PURE__ */ jsx10(
+        enabled.pagination ? /* @__PURE__ */ jsx11(
           KeepPagination,
           {
             totalCount: list.totalCount,
@@ -731,7 +1147,7 @@ function KeepCollectionContent({
             onPageChange: (nextPage) => setPage(nextPage)
           }
         ) : null,
-        enabled.bulkActions ? /* @__PURE__ */ jsx10(KeepBulkActions, { query: resolvedQuery }) : null
+        enabled.bulkActions ? /* @__PURE__ */ jsx11(KeepBulkActions, { query: resolvedQuery }) : null
       ]
     }
   );
@@ -743,16 +1159,23 @@ function getCollectionState(list) {
   return "ready";
 }
 
+// src/KeepLayout.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+function KeepLayout({ layout = "list", children, style, ...props }) {
+  const layoutStyle = layout === "grid" ? { display: "grid", gap: "1rem", gridTemplateColumns: "repeat(auto-fit, minmax(16rem, 1fr))" } : layout === "compact" ? { display: "grid", gap: "0.5rem", gridTemplateColumns: "repeat(auto-fit, minmax(12rem, 1fr))" } : { display: "flex", flexDirection: "column", gap: "1rem" };
+  return /* @__PURE__ */ jsx12("div", { ...props, style: { ...layoutStyle, ...style }, "data-layout": layout, children });
+}
+
 // src/KeepNoteEditor.tsx
 import { useKeepItem as useKeepItem3 } from "@keepkit/core/react";
 import {
   isValidElement as isValidElement5,
   useCallback as useCallback2,
-  useEffect as useEffect2,
-  useRef,
-  useState as useState5
+  useEffect as useEffect3,
+  useRef as useRef3,
+  useState as useState6
 } from "react";
-import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 function KeepNoteEditor({
   item,
   label,
@@ -772,11 +1195,11 @@ function KeepNoteEditor({
   const itemState = useKeepItem3(item);
   const { error, isMutating, item: savedItem, updateNote } = itemState;
   const contentChildren = asChild && isValidElement5(children) ? void 0 : children;
-  const [note, setNote] = useState5(item.note ?? "");
+  const [note, setNote] = useState6(item.note ?? "");
   const baselineNote = savedItem?.note ?? item.note ?? "";
   const isDirty = note !== baselineNote;
-  const lastSavedNoteRef = useRef(void 0);
-  useEffect2(() => setNote(baselineNote), [baselineNote]);
+  const lastSavedNoteRef = useRef3(void 0);
+  useEffect3(() => setNote(baselineNote), [baselineNote]);
   const save = useCallback2(async () => {
     const nextNote = note.trim() || void 0;
     try {
@@ -788,7 +1211,7 @@ function KeepNoteEditor({
       throw error2;
     }
   }, [note, onSaveError, onSaved, updateNote]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!isDirty || debounceMs <= 0 || lastSavedNoteRef.current === note) return;
     const timer = window.setTimeout(() => void save().catch(() => void 0), debounceMs);
     return () => window.clearTimeout(timer);
@@ -802,10 +1225,10 @@ function KeepNoteEditor({
     error,
     save
   };
-  const body = render ? render(state) : typeof contentChildren === "function" ? contentChildren(state) : contentChildren ?? /* @__PURE__ */ jsxs6(Fragment5, { children: [
-    /* @__PURE__ */ jsxs6("label", { children: [
+  const body = render ? render(state) : typeof contentChildren === "function" ? contentChildren(state) : contentChildren ?? /* @__PURE__ */ jsxs7(Fragment5, { children: [
+    /* @__PURE__ */ jsxs7("label", { children: [
       label ?? defaultLabel,
-      /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsx13(
         "textarea",
         {
           value: note,
@@ -821,14 +1244,14 @@ function KeepNoteEditor({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx11("button", { type: "submit", disabled: isMutating, "aria-busy": isMutating, children: saveLabel ?? defaultSaveLabel })
+    /* @__PURE__ */ jsx13("button", { type: "submit", disabled: isMutating, "aria-busy": isMutating, children: saveLabel ?? defaultSaveLabel })
   ] });
   const handleSubmit = (event) => {
     event.preventDefault();
     void save().catch(() => void 0);
   };
   if (!asChild) {
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx13(
       "form",
       {
         ...formProps,
@@ -861,8 +1284,8 @@ function KeepNoteEditor({
 
 // src/KeepTagEditor.tsx
 import { useKeepItem as useKeepItem4 } from "@keepkit/core/react";
-import { useCallback as useCallback3, useEffect as useEffect3, useState as useState6 } from "react";
-import { Fragment as Fragment6, jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { useCallback as useCallback3, useEffect as useEffect4, useState as useState7 } from "react";
+import { Fragment as Fragment6, jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 function KeepTagEditor({
   item,
   availableTags = [],
@@ -875,9 +1298,9 @@ function KeepTagEditor({
   const removeLabel = useUiLabel("remove");
   const applyTagsLabel = useUiLabel("applyTags");
   const itemState = useKeepItem4(item);
-  const [tags, setTags] = useState6(item.tags ?? []);
-  const [input, setInput] = useState6("");
-  useEffect3(() => setTags(itemState.item?.tags ?? item.tags ?? []), [item.tags, itemState.item?.tags]);
+  const [tags, setTags] = useState7(item.tags ?? []);
+  const [input, setInput] = useState7("");
+  useEffect4(() => setTags(itemState.item?.tags ?? item.tags ?? []), [item.tags, itemState.item?.tags]);
   const save = useCallback3(async () => {
     const nextTags = normalizeUiTags(tags);
     try {
@@ -893,10 +1316,10 @@ function KeepTagEditor({
     setTags(normalizeUiTags([...tags, tag]));
     setInput("");
   };
-  const body = render ? render({ tags, setTags, save, isSaving: itemState.isMutating }) : /* @__PURE__ */ jsxs7(Fragment6, { children: [
-    /* @__PURE__ */ jsxs7("label", { children: [
+  const body = render ? render({ tags, setTags, save, isSaving: itemState.isMutating }) : /* @__PURE__ */ jsxs8(Fragment6, { children: [
+    /* @__PURE__ */ jsxs8("label", { children: [
       tagsLabel,
-      /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx14(
         "input",
         {
           value: input,
@@ -915,14 +1338,14 @@ function KeepTagEditor({
         }
       )
     ] }),
-    availableTags.length > 0 ? /* @__PURE__ */ jsx12("datalist", { id: `keep-tags-${item.id}`, children: availableTags.map((tag) => /* @__PURE__ */ jsx12("option", { value: tag }, tag)) }) : null,
-    /* @__PURE__ */ jsx12("ul", { "aria-label": tagsLabel, children: tags.map((tag) => /* @__PURE__ */ jsxs7("li", { children: [
+    availableTags.length > 0 ? /* @__PURE__ */ jsx14("datalist", { id: `keep-tags-${item.id}`, children: availableTags.map((tag) => /* @__PURE__ */ jsx14("option", { value: tag }, tag)) }) : null,
+    /* @__PURE__ */ jsx14("ul", { "aria-label": tagsLabel, children: tags.map((tag) => /* @__PURE__ */ jsxs8("li", { children: [
       tag,
-      /* @__PURE__ */ jsx12("button", { type: "button", onClick: () => setTags(tags.filter((current) => current !== tag)), children: removeLabel })
+      /* @__PURE__ */ jsx14("button", { type: "button", onClick: () => setTags(tags.filter((current) => current !== tag)), children: removeLabel })
     ] }, tag)) }),
-    /* @__PURE__ */ jsx12("button", { type: "submit", disabled: itemState.isMutating, "aria-busy": itemState.isMutating, children: applyTagsLabel })
+    /* @__PURE__ */ jsx14("button", { type: "submit", disabled: itemState.isMutating, "aria-busy": itemState.isMutating, children: applyTagsLabel })
   ] });
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx14(
     "form",
     {
       ...props,
@@ -939,10 +1362,24 @@ function KeepTagEditor({
   );
 }
 
+// src/KeepUndo.tsx
+import { useKeepContext as useKeepContext2 } from "@keepkit/core/react";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+function KeepUndo({ children, label, ...props }) {
+  const context = useKeepContext2();
+  const message = useUiLabel("undoAvailable");
+  const undoLabel = useUiLabel("undo");
+  if (!context.undo.canUndo) return null;
+  return /* @__PURE__ */ jsxs9("div", { ...props, role: "status", "aria-live": "polite", "data-state": "available", children: [
+    children ?? message,
+    /* @__PURE__ */ jsx15("button", { type: "button", onClick: () => void context.undoLastRemoval(), children: label ?? undoLabel })
+  ] });
+}
+
 // src/status.tsx
-import { useKeepContext } from "@keepkit/core/react";
-import { isValidElement as isValidElement6, useEffect as useEffect4, useRef as useRef2, useState as useState7 } from "react";
-import { Fragment as Fragment7, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { useKeepContext as useKeepContext3 } from "@keepkit/core/react";
+import { isValidElement as isValidElement6, useEffect as useEffect5, useRef as useRef4, useState as useState8 } from "react";
+import { Fragment as Fragment7, jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
 function KeepEmptyState({
   title,
   description,
@@ -954,9 +1391,9 @@ function KeepEmptyState({
 }) {
   const defaultTitle = useUiLabel("noItems").replace(/\.$/, "");
   const contentChildren = asChild && isValidElement6(children) ? void 0 : children;
-  const body = contentChildren ?? /* @__PURE__ */ jsxs8(Fragment7, { children: [
-    /* @__PURE__ */ jsx13("h2", { children: title ?? defaultTitle }),
-    description ? /* @__PURE__ */ jsx13("p", { children: description }) : null,
+  const body = contentChildren ?? /* @__PURE__ */ jsxs10(Fragment7, { children: [
+    /* @__PURE__ */ jsx16("h2", { children: title ?? defaultTitle }),
+    description ? /* @__PURE__ */ jsx16("p", { children: description }) : null,
     action
   ] });
   return renderRoot(asChild, children, { ...rootProps, className, "data-state": "empty" }, body, "KeepEmptyState");
@@ -970,10 +1407,10 @@ function KeepStatus({
   className,
   ...rootProps
 }) {
-  const context = useKeepContext();
+  const context = useKeepContext3();
   const contentChildren = asChild && isValidElement6(children) ? void 0 : children;
   const resolvedStatus = status ?? getDerivedStatus(context);
-  const defaultLabel = useUiLabel(getStatusLabelKey(resolvedStatus));
+  const defaultLabel = useUiLabel(getStatusLabelKey2(resolvedStatus));
   const state = {
     status: resolvedStatus,
     error: context.error,
@@ -998,13 +1435,13 @@ function KeepStatus({
   );
 }
 function KeepAnnouncements({ messages, ...props }) {
-  const context = useKeepContext();
+  const context = useKeepContext3();
   const savedMessage = useUiLabel("savedMessage", messages?.save);
   const removedMessage = useUiLabel("removedMessage", messages?.remove);
   const noteSavedMessage = useUiLabel("noteSavedMessage", messages?.note);
-  const [message, setMessage] = useState7("");
-  const lastChangeRef = useRef2(void 0);
-  useEffect4(() => {
+  const [message, setMessage] = useState8("");
+  const lastChangeRef = useRef4(void 0);
+  useEffect5(() => {
     const change = context.lastChange;
     if (!change || change === lastChangeRef.current) return;
     lastChangeRef.current = change;
@@ -1012,7 +1449,7 @@ function KeepAnnouncements({ messages, ...props }) {
     else if (change.action === "remove" || change.action === "removeBatch") setMessage(removedMessage);
     else if (change.action === "updateNote") setMessage(noteSavedMessage);
   }, [context.lastChange, noteSavedMessage, removedMessage, savedMessage]);
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx16(
     "div",
     {
       ...props,
@@ -1033,7 +1470,7 @@ function getDerivedStatus(context) {
   if (context.isHydrated && context.items.length === 0) return "empty";
   return "idle";
 }
-function getStatusLabelKey(status) {
+function getStatusLabelKey2(status) {
   if (status === "empty") return "noItems";
   if (status === "loading") return "loadingItems";
   if (status === "error") return "error";
@@ -1046,7 +1483,7 @@ function getStatusLabelKey(status) {
 import {
   KeepErrorBoundary as KeepErrorBoundary3,
   KeepProvider,
-  useKeepContext as useKeepContext2,
+  useKeepContext as useKeepContext4,
   useKeepItem as useKeepItem5,
   useKeepList as useKeepList5,
   useKeepShortcut
@@ -1061,7 +1498,7 @@ import {
   LocalStorageSyncQueueAdapter,
   SyncStorageAdapter
 } from "@keepkit/core/storage";
-import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
 function KeepKitProvider({
   labels,
   locale,
@@ -1069,16 +1506,16 @@ function KeepKitProvider({
   children,
   ...providerProps
 }) {
-  return /* @__PURE__ */ jsx14(KeepUiProvider, { labels, locale, labelResolver, children: /* @__PURE__ */ jsxs9(CoreKeepProvider, { ...providerProps, children: [
+  return /* @__PURE__ */ jsx17(KeepUiProvider, { labels, locale, labelResolver, children: /* @__PURE__ */ jsxs11(CoreKeepProvider, { ...providerProps, children: [
     children,
-    /* @__PURE__ */ jsx14(KeepAnnouncements, {})
+    /* @__PURE__ */ jsx17(KeepAnnouncements, {})
   ] }) });
 }
 function createKeepKit(options = {}) {
   const { labels, locale, labelResolver, getTitle, getImageProps, ...coreOptions } = options;
   const coreKit = createCoreKeepKit(coreOptions);
   return {
-    Provider: (props) => /* @__PURE__ */ jsx14(
+    Provider: (props) => /* @__PURE__ */ jsx17(
       KeepKitProvider,
       {
         ...coreOptions,
@@ -1088,8 +1525,9 @@ function createKeepKit(options = {}) {
         ...props
       }
     ),
-    Button: (props) => /* @__PURE__ */ jsx14(KeepButton, { ...props }),
-    Collection: (props) => /* @__PURE__ */ jsx14(
+    Button: (props) => /* @__PURE__ */ jsx17(KeepButton, { ...props }),
+    Backup: (props) => /* @__PURE__ */ jsx17(KeepBackup, { ...props }),
+    Collection: (props) => /* @__PURE__ */ jsx17(
       KeepCollection,
       {
         ...props,
@@ -1112,6 +1550,7 @@ export {
   IndexedDBSyncQueueAdapter,
   KeepAnnouncements,
   KeepAnnouncer,
+  KeepBackup,
   KeepBulkActions,
   KeepButton,
   KeepCollection,
@@ -1120,6 +1559,7 @@ export {
   KeepItemCard,
   KeepItemCheckbox,
   KeepKitProvider,
+  KeepLayout,
   KeepList,
   KeepNoteEditor,
   KeepPagination,
@@ -1130,18 +1570,22 @@ export {
   KeepTagEditor,
   KeepTagFilter,
   KeepUiProvider,
+  KeepUndo,
   LocalStorageAdapter,
   LocalStorageSyncQueueAdapter,
   SyncStorageAdapter,
   createBrowserStorageAdapter,
   createKeepKit,
+  createNextPagesRouterAdapter,
   createStorageAdapter,
+  getKeepLocaleLabels,
   isAllSelected,
   toggleSelectAll,
-  useKeepContext2 as useKeepContext,
+  useKeepContext4 as useKeepContext,
   useKeepItem5 as useKeepItem,
   useKeepList5 as useKeepList,
   useKeepShortcut,
-  useKeepUiLabels
+  useKeepUiLabels,
+  useKeepUrlSync
 };
 //# sourceMappingURL=index.js.map