@keepkit/ui 0.10.0 → 0.11.0

package/dist/index.js

@@ -22,6 +22,7 @@ var DEFAULT_LABELS = {
   syncing: "Syncing\u2026",
   error: "Something went wrong.",
   allTags: "All",
+  tags: "Tags",
   filterTags: "Filter saved items by tag",
   note: "Note",
   saveNote: "Save note",
@@ -47,6 +48,13 @@ var DEFAULT_LABELS = {
   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",
@@ -62,11 +70,120 @@ var DEFAULT_LABELS = {
   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 resolved = { ...DEFAULT_LABELS, ...labels };
-    return { locale, labels: resolved, labelResolver };
+    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 });
 }
@@ -75,7 +192,11 @@ function useKeepUiLabels() {
 }
 function useUiLabel(key, override) {
   const context = useKeepUiLabels();
-  return override ?? context.labelResolver?.(key, { locale: context.locale }) ?? context.labels[key];
+  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
@@ -265,6 +386,8 @@ function KeepBulkActions({
   onSelectedIdsChange,
   renderItem,
   onCompleted,
+  selectionScope: controlledScope,
+  onSelectionScopeChange,
   render,
   children,
   ...props
@@ -274,7 +397,20 @@ 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 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);
@@ -284,11 +420,11 @@ function KeepBulkActions({
     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([]);
   };
@@ -299,7 +435,7 @@ function KeepBulkActions({
     setSelectedIds([]);
   };
   const state = {
-    items: list.items,
+    items: targetItems,
     selectedIds,
     selectedCount: selectedIds.length,
     isAllSelected: allSelected,
@@ -311,18 +447,35 @@ 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__ */ 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__ */ jsxs2("span", { children: [
+      targetItems.map((item) => /* @__PURE__ */ jsxs2("span", { children: [
         /* @__PURE__ */ jsx5(
           KeepItemCheckbox,
           {
@@ -417,6 +570,8 @@ function KeepItemCard({
   getImageProps,
   imageComponent: ImageComponent,
   renderImage,
+  renderTags,
+  showTags = true,
   imageAlt,
   render,
   children,
@@ -453,6 +608,7 @@ function KeepItemCard({
   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;
@@ -476,6 +632,7 @@ function KeepItemCard({
   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,
@@ -534,6 +691,7 @@ function KeepListContent({
   empty,
   error: errorContent,
   itemCardProps,
+  layout = "list",
   asChild = false,
   className,
   ...rootProps
@@ -548,7 +706,8 @@ function KeepListContent({
     loading: loading ?? defaultLoading,
     empty: empty ?? defaultEmpty,
     error: errorContent ?? defaultError,
-    itemCardProps
+    itemCardProps,
+    layout
   });
   return renderRoot(
     asChild,
@@ -576,9 +735,16 @@ 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__ */ jsx8("ul", { children: state.items.map(
-    (item) => options.renderItem ? options.renderItem(item, state) : /* @__PURE__ */ jsx8("li", { children: /* @__PURE__ */ jsx8(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
@@ -776,6 +942,88 @@ 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 jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 function KeepCollection(props) {
@@ -787,6 +1035,9 @@ function KeepCollection(props) {
 function KeepCollectionContent({
   query = {},
   pageSize = 20,
+  layout = "list",
+  urlSync = false,
+  urlAdapter,
   features,
   renderItem,
   itemCardProps,
@@ -819,6 +1070,19 @@ 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__ */ jsxs6(
     "section",
@@ -868,6 +1132,7 @@ function KeepCollectionContent({
             query: resolvedQuery,
             renderItem,
             itemCardProps,
+            layout,
             loading,
             empty,
             error
@@ -894,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 as useRef2,
+  useEffect as useEffect3,
+  useRef as useRef3,
   useState as useState6
 } from "react";
-import { Fragment as Fragment5, jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 function KeepNoteEditor({
   item,
   label,
@@ -926,8 +1198,8 @@ function KeepNoteEditor({
   const [note, setNote] = useState6(item.note ?? "");
   const baselineNote = savedItem?.note ?? item.note ?? "";
   const isDirty = note !== baselineNote;
-  const lastSavedNoteRef = useRef2(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 {
@@ -939,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);
@@ -956,7 +1228,7 @@ function KeepNoteEditor({
   const body = render ? render(state) : typeof contentChildren === "function" ? contentChildren(state) : contentChildren ?? /* @__PURE__ */ jsxs7(Fragment5, { children: [
     /* @__PURE__ */ jsxs7("label", { children: [
       label ?? defaultLabel,
-      /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx13(
         "textarea",
         {
           value: note,
@@ -972,14 +1244,14 @@ function KeepNoteEditor({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx12("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__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       "form",
       {
         ...formProps,
@@ -1012,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 useState7 } from "react";
-import { Fragment as Fragment6, jsx as jsx13, jsxs as jsxs8 } 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 = [],
@@ -1028,7 +1300,7 @@ function KeepTagEditor({
   const itemState = useKeepItem4(item);
   const [tags, setTags] = useState7(item.tags ?? []);
   const [input, setInput] = useState7("");
-  useEffect3(() => setTags(itemState.item?.tags ?? item.tags ?? []), [item.tags, itemState.item?.tags]);
+  useEffect4(() => setTags(itemState.item?.tags ?? item.tags ?? []), [item.tags, itemState.item?.tags]);
   const save = useCallback3(async () => {
     const nextTags = normalizeUiTags(tags);
     try {
@@ -1047,7 +1319,7 @@ function KeepTagEditor({
   const body = render ? render({ tags, setTags, save, isSaving: itemState.isMutating }) : /* @__PURE__ */ jsxs8(Fragment6, { children: [
     /* @__PURE__ */ jsxs8("label", { children: [
       tagsLabel,
-      /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx14(
         "input",
         {
           value: input,
@@ -1066,14 +1338,14 @@ function KeepTagEditor({
         }
       )
     ] }),
-    availableTags.length > 0 ? /* @__PURE__ */ jsx13("datalist", { id: `keep-tags-${item.id}`, children: availableTags.map((tag) => /* @__PURE__ */ jsx13("option", { value: tag }, tag)) }) : null,
-    /* @__PURE__ */ jsx13("ul", { "aria-label": tagsLabel, children: tags.map((tag) => /* @__PURE__ */ jsxs8("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__ */ jsx13("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__ */ jsx13("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__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     "form",
     {
       ...props,
@@ -1090,10 +1362,24 @@ function KeepTagEditor({
   );
 }
 
-// src/status.tsx
+// src/KeepUndo.tsx
 import { useKeepContext as useKeepContext2 } from "@keepkit/core/react";
-import { isValidElement as isValidElement6, useEffect as useEffect4, useRef as useRef3, useState as useState8 } from "react";
-import { Fragment as Fragment7, jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+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 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,
@@ -1105,9 +1391,9 @@ function KeepEmptyState({
 }) {
   const defaultTitle = useUiLabel("noItems").replace(/\.$/, "");
   const contentChildren = asChild && isValidElement6(children) ? void 0 : children;
-  const body = contentChildren ?? /* @__PURE__ */ jsxs9(Fragment7, { children: [
-    /* @__PURE__ */ jsx14("h2", { children: title ?? defaultTitle }),
-    description ? /* @__PURE__ */ jsx14("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");
@@ -1121,7 +1407,7 @@ function KeepStatus({
   className,
   ...rootProps
 }) {
-  const context = useKeepContext2();
+  const context = useKeepContext3();
   const contentChildren = asChild && isValidElement6(children) ? void 0 : children;
   const resolvedStatus = status ?? getDerivedStatus(context);
   const defaultLabel = useUiLabel(getStatusLabelKey2(resolvedStatus));
@@ -1149,13 +1435,13 @@ function KeepStatus({
   );
 }
 function KeepAnnouncements({ messages, ...props }) {
-  const context = useKeepContext2();
+  const context = useKeepContext3();
   const savedMessage = useUiLabel("savedMessage", messages?.save);
   const removedMessage = useUiLabel("removedMessage", messages?.remove);
   const noteSavedMessage = useUiLabel("noteSavedMessage", messages?.note);
   const [message, setMessage] = useState8("");
-  const lastChangeRef = useRef3(void 0);
-  useEffect4(() => {
+  const lastChangeRef = useRef4(void 0);
+  useEffect5(() => {
     const change = context.lastChange;
     if (!change || change === lastChangeRef.current) return;
     lastChangeRef.current = change;
@@ -1163,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__ */ jsx14(
+  return /* @__PURE__ */ jsx16(
     "div",
     {
       ...props,
@@ -1197,7 +1483,7 @@ function getStatusLabelKey2(status) {
 import {
   KeepErrorBoundary as KeepErrorBoundary3,
   KeepProvider,
-  useKeepContext as useKeepContext3,
+  useKeepContext as useKeepContext4,
   useKeepItem as useKeepItem5,
   useKeepList as useKeepList5,
   useKeepShortcut
@@ -1212,7 +1498,7 @@ import {
   LocalStorageSyncQueueAdapter,
   SyncStorageAdapter
 } from "@keepkit/core/storage";
-import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
 function KeepKitProvider({
   labels,
   locale,
@@ -1220,16 +1506,16 @@ function KeepKitProvider({
   children,
   ...providerProps
 }) {
-  return /* @__PURE__ */ jsx15(KeepUiProvider, { labels, locale, labelResolver, children: /* @__PURE__ */ jsxs10(CoreKeepProvider, { ...providerProps, children: [
+  return /* @__PURE__ */ jsx17(KeepUiProvider, { labels, locale, labelResolver, children: /* @__PURE__ */ jsxs11(CoreKeepProvider, { ...providerProps, children: [
     children,
-    /* @__PURE__ */ jsx15(KeepAnnouncements, {})
+    /* @__PURE__ */ jsx17(KeepAnnouncements, {})
   ] }) });
 }
 function createKeepKit(options = {}) {
   const { labels, locale, labelResolver, getTitle, getImageProps, ...coreOptions } = options;
   const coreKit = createCoreKeepKit(coreOptions);
   return {
-    Provider: (props) => /* @__PURE__ */ jsx15(
+    Provider: (props) => /* @__PURE__ */ jsx17(
       KeepKitProvider,
       {
         ...coreOptions,
@@ -1239,9 +1525,9 @@ function createKeepKit(options = {}) {
         ...props
       }
     ),
-    Button: (props) => /* @__PURE__ */ jsx15(KeepButton, { ...props }),
-    Backup: (props) => /* @__PURE__ */ jsx15(KeepBackup, { ...props }),
-    Collection: (props) => /* @__PURE__ */ jsx15(
+    Button: (props) => /* @__PURE__ */ jsx17(KeepButton, { ...props }),
+    Backup: (props) => /* @__PURE__ */ jsx17(KeepBackup, { ...props }),
+    Collection: (props) => /* @__PURE__ */ jsx17(
       KeepCollection,
       {
         ...props,
@@ -1273,6 +1559,7 @@ export {
   KeepItemCard,
   KeepItemCheckbox,
   KeepKitProvider,
+  KeepLayout,
   KeepList,
   KeepNoteEditor,
   KeepPagination,
@@ -1283,18 +1570,22 @@ export {
   KeepTagEditor,
   KeepTagFilter,
   KeepUiProvider,
+  KeepUndo,
   LocalStorageAdapter,
   LocalStorageSyncQueueAdapter,
   SyncStorageAdapter,
   createBrowserStorageAdapter,
   createKeepKit,
+  createNextPagesRouterAdapter,
   createStorageAdapter,
+  getKeepLocaleLabels,
   isAllSelected,
   toggleSelectAll,
-  useKeepContext3 as useKeepContext,
+  useKeepContext4 as useKeepContext,
   useKeepItem5 as useKeepItem,
   useKeepList5 as useKeepList,
   useKeepShortcut,
-  useKeepUiLabels
+  useKeepUiLabels,
+  useKeepUrlSync
 };
 //# sourceMappingURL=index.js.map