@keepkit/ui 0.9.0 → 0.10.0

package/dist/index.js

@@ -6,12 +6,176 @@ 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",
+  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.",
+  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 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__ */ jsx(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];
+}
+
+// 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 +186,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 +210,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 +239,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);
@@ -166,10 +275,10 @@ function KeepBulkActions({
   const tagsLabel = useUiLabel("tagsToApply");
   const applyTagsLabel = useUiLabel("applyTags");
   const list = useKeepList(query);
-  const [uncontrolledSelectedIds, setUncontrolledSelectedIds] = useState(defaultSelectedIds);
+  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);
@@ -204,17 +313,17 @@ function KeepBulkActions({
     updateTags,
     isMutating: list.isMutating
   };
-  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: [
+        /* @__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(
+      list.items.map((item) => /* @__PURE__ */ jsxs2("span", { children: [
+        /* @__PURE__ */ jsx5(
           KeepItemCheckbox,
           {
             item,
@@ -225,12 +334,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 +349,7 @@ function KeepBulkActions({
       }
     )
   ] });
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     "section",
     {
       ...props,
@@ -257,7 +366,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 +389,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 +406,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,
@@ -315,6 +426,12 @@ function KeepItemCard({
   showSaveButton = true,
   saveButtonLabels,
   asChild = false,
+  href: hrefOption,
+  onOpen,
+  linkTarget = "title",
+  linkComponent: LinkComponent,
+  linkTargetAttribute,
+  linkRel,
   className,
   ...rootProps
 }) {
@@ -327,10 +444,27 @@ 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 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 +473,11 @@ 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 }),
+    statusLabel ? /* @__PURE__ */ jsx7("p", { "data-status": item.status, children: statusLabel }) : null,
+    showSaveButton ? /* @__PURE__ */ jsx7(
       KeepButton,
       {
         item: toKeepButtonItem(item),
@@ -350,8 +485,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 +496,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,
@@ -425,15 +576,15 @@ 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", { 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 +602,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 +621,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 +648,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 +660,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 +671,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 +701,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 +751,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 +766,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) {
@@ -626,12 +777,12 @@ function getVisiblePages(currentPage, pageCount, maxPageButtons) {
 }
 
 // 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 = {},
@@ -653,10 +804,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(
     () => ({
@@ -669,7 +820,7 @@ function KeepCollectionContent({
     [enabled.pagination, enabled.search, enabled.sort, page, query, resolvedPageSize, searchValue, sort, tag]
   );
   const list = useKeepList4(resolvedQuery);
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "section",
     {
       ...rootProps,
@@ -678,8 +829,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 +840,7 @@ function KeepCollectionContent({
               }
             }
           ) : null,
-          enabled.sort ? /* @__PURE__ */ jsx10(
+          enabled.sort ? /* @__PURE__ */ jsx11(
             KeepSortSelect,
             {
               value: sortToValue(sort),
@@ -699,7 +850,7 @@ function KeepCollectionContent({
               }
             }
           ) : null,
-          enabled.tagFilter ? /* @__PURE__ */ jsx10(
+          enabled.tagFilter ? /* @__PURE__ */ jsx11(
             KeepTagFilter,
             {
               query,
@@ -711,7 +862,7 @@ function KeepCollectionContent({
             }
           ) : null
         ] }),
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx11(
           KeepList,
           {
             query: resolvedQuery,
@@ -722,7 +873,7 @@ function KeepCollectionContent({
             error
           }
         ),
-        enabled.pagination ? /* @__PURE__ */ jsx10(
+        enabled.pagination ? /* @__PURE__ */ jsx11(
           KeepPagination,
           {
             totalCount: list.totalCount,
@@ -731,7 +882,7 @@ function KeepCollectionContent({
             onPageChange: (nextPage) => setPage(nextPage)
           }
         ) : null,
-        enabled.bulkActions ? /* @__PURE__ */ jsx10(KeepBulkActions, { query: resolvedQuery }) : null
+        enabled.bulkActions ? /* @__PURE__ */ jsx11(KeepBulkActions, { query: resolvedQuery }) : null
       ]
     }
   );
@@ -749,10 +900,10 @@ import {
   isValidElement as isValidElement5,
   useCallback as useCallback2,
   useEffect as useEffect2,
-  useRef,
-  useState as useState5
+  useRef as useRef2,
+  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 jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 function KeepNoteEditor({
   item,
   label,
@@ -772,10 +923,10 @@ 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);
+  const lastSavedNoteRef = useRef2(void 0);
   useEffect2(() => setNote(baselineNote), [baselineNote]);
   const save = useCallback2(async () => {
     const nextNote = note.trim() || void 0;
@@ -802,10 +953,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__ */ jsx12(
         "textarea",
         {
           value: note,
@@ -821,14 +972,14 @@ function KeepNoteEditor({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx11("button", { type: "submit", disabled: isMutating, "aria-busy": isMutating, children: saveLabel ?? defaultSaveLabel })
+    /* @__PURE__ */ jsx12("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__ */ jsx12(
       "form",
       {
         ...formProps,
@@ -861,8 +1012,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 useEffect3, useState as useState7 } from "react";
+import { Fragment as Fragment6, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 function KeepTagEditor({
   item,
   availableTags = [],
@@ -875,8 +1026,8 @@ function KeepTagEditor({
   const removeLabel = useUiLabel("remove");
   const applyTagsLabel = useUiLabel("applyTags");
   const itemState = useKeepItem4(item);
-  const [tags, setTags] = useState6(item.tags ?? []);
-  const [input, setInput] = useState6("");
+  const [tags, setTags] = useState7(item.tags ?? []);
+  const [input, setInput] = useState7("");
   useEffect3(() => setTags(itemState.item?.tags ?? item.tags ?? []), [item.tags, itemState.item?.tags]);
   const save = useCallback3(async () => {
     const nextTags = normalizeUiTags(tags);
@@ -893,10 +1044,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__ */ jsx13(
         "input",
         {
           value: input,
@@ -915,14 +1066,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__ */ 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: [
       tag,
-      /* @__PURE__ */ jsx12("button", { type: "button", onClick: () => setTags(tags.filter((current) => current !== tag)), children: removeLabel })
+      /* @__PURE__ */ jsx13("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__ */ jsx13("button", { type: "submit", disabled: itemState.isMutating, "aria-busy": itemState.isMutating, children: applyTagsLabel })
   ] });
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     "form",
     {
       ...props,
@@ -940,9 +1091,9 @@ function KeepTagEditor({
 }
 
 // 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 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";
 function KeepEmptyState({
   title,
   description,
@@ -954,9 +1105,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__ */ jsxs9(Fragment7, { children: [
+    /* @__PURE__ */ jsx14("h2", { children: title ?? defaultTitle }),
+    description ? /* @__PURE__ */ jsx14("p", { children: description }) : null,
     action
   ] });
   return renderRoot(asChild, children, { ...rootProps, className, "data-state": "empty" }, body, "KeepEmptyState");
@@ -970,10 +1121,10 @@ function KeepStatus({
   className,
   ...rootProps
 }) {
-  const context = useKeepContext();
+  const context = useKeepContext2();
   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,12 +1149,12 @@ function KeepStatus({
   );
 }
 function KeepAnnouncements({ messages, ...props }) {
-  const context = useKeepContext();
+  const context = useKeepContext2();
   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);
+  const [message, setMessage] = useState8("");
+  const lastChangeRef = useRef3(void 0);
   useEffect4(() => {
     const change = context.lastChange;
     if (!change || change === lastChangeRef.current) return;
@@ -1012,7 +1163,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__ */ jsx14(
     "div",
     {
       ...props,
@@ -1033,7 +1184,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 +1197,7 @@ function getStatusLabelKey(status) {
 import {
   KeepErrorBoundary as KeepErrorBoundary3,
   KeepProvider,
-  useKeepContext as useKeepContext2,
+  useKeepContext as useKeepContext3,
   useKeepItem as useKeepItem5,
   useKeepList as useKeepList5,
   useKeepShortcut
@@ -1061,7 +1212,7 @@ import {
   LocalStorageSyncQueueAdapter,
   SyncStorageAdapter
 } from "@keepkit/core/storage";
-import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 function KeepKitProvider({
   labels,
   locale,
@@ -1069,16 +1220,16 @@ function KeepKitProvider({
   children,
   ...providerProps
 }) {
-  return /* @__PURE__ */ jsx14(KeepUiProvider, { labels, locale, labelResolver, children: /* @__PURE__ */ jsxs9(CoreKeepProvider, { ...providerProps, children: [
+  return /* @__PURE__ */ jsx15(KeepUiProvider, { labels, locale, labelResolver, children: /* @__PURE__ */ jsxs10(CoreKeepProvider, { ...providerProps, children: [
     children,
-    /* @__PURE__ */ jsx14(KeepAnnouncements, {})
+    /* @__PURE__ */ jsx15(KeepAnnouncements, {})
   ] }) });
 }
 function createKeepKit(options = {}) {
   const { labels, locale, labelResolver, getTitle, getImageProps, ...coreOptions } = options;
   const coreKit = createCoreKeepKit(coreOptions);
   return {
-    Provider: (props) => /* @__PURE__ */ jsx14(
+    Provider: (props) => /* @__PURE__ */ jsx15(
       KeepKitProvider,
       {
         ...coreOptions,
@@ -1088,8 +1239,9 @@ function createKeepKit(options = {}) {
         ...props
       }
     ),
-    Button: (props) => /* @__PURE__ */ jsx14(KeepButton, { ...props }),
-    Collection: (props) => /* @__PURE__ */ jsx14(
+    Button: (props) => /* @__PURE__ */ jsx15(KeepButton, { ...props }),
+    Backup: (props) => /* @__PURE__ */ jsx15(KeepBackup, { ...props }),
+    Collection: (props) => /* @__PURE__ */ jsx15(
       KeepCollection,
       {
         ...props,
@@ -1112,6 +1264,7 @@ export {
   IndexedDBSyncQueueAdapter,
   KeepAnnouncements,
   KeepAnnouncer,
+  KeepBackup,
   KeepBulkActions,
   KeepButton,
   KeepCollection,
@@ -1138,7 +1291,7 @@ export {
   createStorageAdapter,
   isAllSelected,
   toggleSelectAll,
-  useKeepContext2 as useKeepContext,
+  useKeepContext3 as useKeepContext,
   useKeepItem5 as useKeepItem,
   useKeepList5 as useKeepList,
   useKeepShortcut,