@keepkit/ui 0.12.0 → 0.14.0

package/dist/index.js

@@ -55,6 +55,9 @@ var DE_LABELS = {
   currentPage: "Aktuelle Seite",
   searchResults: "Aktuelle Suchergebnisse",
   allItems: "Alle gespeicherten Elemente",
+  localVersion: "Lokal",
+  remoteVersion: "Server",
+  updatedAt: "Aktualisiert",
   statusAvailable: "Verf\xFCgbar",
   noteSavedMessage: "Notiz gespeichert.",
   exportData: "JSON exportieren",
@@ -128,6 +131,9 @@ var EN_LABELS = {
   currentPage: "Current page",
   searchResults: "Current search results",
   allItems: "All saved items",
+  localVersion: "Local",
+  remoteVersion: "Remote",
+  updatedAt: "Updated",
   statusAvailable: "Available",
   noteSavedMessage: "Note saved.",
   exportData: "Export JSON",
@@ -201,6 +207,9 @@ var ES_LABELS = {
   currentPage: "P\xE1gina actual",
   searchResults: "Resultados de b\xFAsqueda actuales",
   allItems: "Todos los elementos guardados",
+  localVersion: "Local",
+  remoteVersion: "Servidor",
+  updatedAt: "Actualizado",
   statusAvailable: "Disponible",
   noteSavedMessage: "Nota guardada.",
   exportData: "Exportar JSON",
@@ -274,6 +283,9 @@ var FIL_LABELS = {
   currentPage: "Kasalukuyang pahina",
   searchResults: "Kasalukuyang resulta ng paghahanap",
   allItems: "Lahat ng naka-save na item",
+  localVersion: "Lokal",
+  remoteVersion: "Remote",
+  updatedAt: "Na-update",
   statusAvailable: "Available",
   noteSavedMessage: "Na-save ang tala.",
   exportData: "I-export ang JSON",
@@ -347,6 +359,9 @@ var FR_LABELS = {
   currentPage: "Page actuelle",
   searchResults: "R\xE9sultats de recherche actuels",
   allItems: "Tous les \xE9l\xE9ments enregistr\xE9s",
+  localVersion: "Local",
+  remoteVersion: "Distant",
+  updatedAt: "Mis \xE0 jour",
   statusAvailable: "Disponible",
   noteSavedMessage: "Note enregistr\xE9e.",
   exportData: "Exporter JSON",
@@ -420,6 +435,9 @@ var ID_LABELS = {
   currentPage: "Halaman saat ini",
   searchResults: "Hasil pencarian saat ini",
   allItems: "Semua item tersimpan",
+  localVersion: "Lokal",
+  remoteVersion: "Server",
+  updatedAt: "Diperbarui",
   statusAvailable: "Tersedia",
   noteSavedMessage: "Catatan tersimpan.",
   exportData: "Ekspor JSON",
@@ -493,6 +511,9 @@ var IT_LABELS = {
   currentPage: "Pagina corrente",
   searchResults: "Risultati di ricerca correnti",
   allItems: "Tutti gli elementi salvati",
+  localVersion: "Locale",
+  remoteVersion: "Server",
+  updatedAt: "Aggiornato",
   statusAvailable: "Disponibile",
   noteSavedMessage: "Nota salvata.",
   exportData: "Esporta JSON",
@@ -566,6 +587,9 @@ var JA_LABELS = {
   currentPage: "\u8868\u793A\u4E2D\u306E\u30DA\u30FC\u30B8",
   searchResults: "\u73FE\u5728\u306E\u691C\u7D22\u7D50\u679C\u5168\u4F53",
   allItems: "\u3059\u3079\u3066\u306E\u4FDD\u5B58\u30A2\u30A4\u30C6\u30E0",
+  localVersion: "\u30ED\u30FC\u30AB\u30EB",
+  remoteVersion: "\u30EA\u30E2\u30FC\u30C8",
+  updatedAt: "\u66F4\u65B0\u65E5\u6642",
   statusAvailable: "\u5229\u7528\u53EF\u80FD",
   noteSavedMessage: "\u30E1\u30E2\u3092\u4FDD\u5B58\u3057\u307E\u3057\u305F\u3002",
   exportData: "JSON\u3092\u30A8\u30AF\u30B9\u30DD\u30FC\u30C8",
@@ -639,6 +663,9 @@ var KO_LABELS = {
   currentPage: "\uD604\uC7AC \uD398\uC774\uC9C0",
   searchResults: "\uD604\uC7AC \uAC80\uC0C9 \uACB0\uACFC \uC804\uCCB4",
   allItems: "\uBAA8\uB4E0 \uC800\uC7A5 \uD56D\uBAA9",
+  localVersion: "\uB85C\uCEEC",
+  remoteVersion: "\uC6D0\uACA9",
+  updatedAt: "\uC5C5\uB370\uC774\uD2B8 \uC2DC\uAC04",
   statusAvailable: "\uC0AC\uC6A9 \uAC00\uB2A5",
   noteSavedMessage: "\uBA54\uBAA8\uB97C \uC800\uC7A5\uD588\uC2B5\uB2C8\uB2E4.",
   exportData: "JSON \uB0B4\uBCF4\uB0B4\uAE30",
@@ -712,6 +739,9 @@ var MS_LABELS = {
   currentPage: "Halaman semasa",
   searchResults: "Hasil carian semasa",
   allItems: "Semua item yang disimpan",
+  localVersion: "Tempatan",
+  remoteVersion: "Pelayan",
+  updatedAt: "Dikemas kini",
   statusAvailable: "Tersedia",
   noteSavedMessage: "Nota disimpan.",
   exportData: "Eksport JSON",
@@ -785,6 +815,9 @@ var PT_BR_LABELS = {
   currentPage: "P\xE1gina atual",
   searchResults: "Resultados da pesquisa atual",
   allItems: "Todos os itens salvos",
+  localVersion: "Local",
+  remoteVersion: "Servidor",
+  updatedAt: "Atualizado",
   statusAvailable: "Dispon\xEDvel",
   noteSavedMessage: "Nota salva.",
   exportData: "Exportar JSON",
@@ -858,6 +891,9 @@ var RU_LABELS = {
   currentPage: "\u0422\u0435\u043A\u0443\u0449\u0430\u044F \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0430",
   searchResults: "\u0422\u0435\u043A\u0443\u0449\u0438\u0435 \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u044B \u043F\u043E\u0438\u0441\u043A\u0430",
   allItems: "\u0412\u0441\u0435 \u0441\u043E\u0445\u0440\u0430\u043D\u0451\u043D\u043D\u044B\u0435 \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u044B",
+  localVersion: "\u041B\u043E\u043A\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u0435\u0440\u0441\u0438\u044F",
+  remoteVersion: "\u0421\u0435\u0440\u0432\u0435\u0440\u043D\u0430\u044F \u0432\u0435\u0440\u0441\u0438\u044F",
+  updatedAt: "\u041E\u0431\u043D\u043E\u0432\u043B\u0435\u043D\u043E",
   statusAvailable: "\u0414\u043E\u0441\u0442\u0443\u043F\u0435\u043D",
   noteSavedMessage: "\u0417\u0430\u043C\u0435\u0442\u043A\u0430 \u0441\u043E\u0445\u0440\u0430\u043D\u0435\u043D\u0430.",
   exportData: "\u042D\u043A\u0441\u043F\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u0430\u0442\u044C JSON",
@@ -931,6 +967,9 @@ var TH_LABELS = {
   currentPage: "\u0E2B\u0E19\u0E49\u0E32\u0E1B\u0E31\u0E08\u0E08\u0E38\u0E1A\u0E31\u0E19",
   searchResults: "\u0E1C\u0E25\u0E01\u0E32\u0E23\u0E04\u0E49\u0E19\u0E2B\u0E32\u0E1B\u0E31\u0E08\u0E08\u0E38\u0E1A\u0E31\u0E19",
   allItems: "\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23\u0E17\u0E35\u0E48\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14",
+  localVersion: "\u0E43\u0E19\u0E40\u0E04\u0E23\u0E37\u0E48\u0E2D\u0E07",
+  remoteVersion: "\u0E23\u0E30\u0E22\u0E30\u0E44\u0E01\u0E25",
+  updatedAt: "\u0E2D\u0E31\u0E1B\u0E40\u0E14\u0E15\u0E40\u0E21\u0E37\u0E48\u0E2D",
   statusAvailable: "\u0E1E\u0E23\u0E49\u0E2D\u0E21\u0E43\u0E0A\u0E49\u0E07\u0E32\u0E19",
   noteSavedMessage: "\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01\u0E22\u0E48\u0E2D\u0E41\u0E25\u0E49\u0E27",
   exportData: "\u0E2A\u0E48\u0E07\u0E2D\u0E2D\u0E01 JSON",
@@ -1004,6 +1043,9 @@ var VI_LABELS = {
   currentPage: "Trang hi\u1EC7n t\u1EA1i",
   searchResults: "K\u1EBFt qu\u1EA3 t\xECm ki\u1EBFm hi\u1EC7n t\u1EA1i",
   allItems: "T\u1EA5t c\u1EA3 m\u1EE5c \u0111\xE3 l\u01B0u",
+  localVersion: "C\u1EE5c b\u1ED9",
+  remoteVersion: "M\xE1y ch\u1EE7",
+  updatedAt: "\u0110\xE3 c\u1EADp nh\u1EADt",
   statusAvailable: "Kh\u1EA3 d\u1EE5ng",
   noteSavedMessage: "\u0110\xE3 l\u01B0u ghi ch\xFA.",
   exportData: "Xu\u1EA5t JSON",
@@ -1077,6 +1119,9 @@ var ZH_HANS_LABELS = {
   currentPage: "\u5F53\u524D\u9875",
   searchResults: "\u5F53\u524D\u5168\u90E8\u641C\u7D22\u7ED3\u679C",
   allItems: "\u5168\u90E8\u5DF2\u4FDD\u5B58\u9879\u76EE",
+  localVersion: "\u672C\u5730",
+  remoteVersion: "\u8FDC\u7A0B",
+  updatedAt: "\u66F4\u65B0\u65F6\u95F4",
   statusAvailable: "\u53EF\u7528",
   noteSavedMessage: "\u5907\u6CE8\u5DF2\u4FDD\u5B58\u3002",
   exportData: "\u5BFC\u51FAJSON",
@@ -1150,6 +1195,9 @@ var ZH_HANT_LABELS = {
   currentPage: "\u76EE\u524D\u9801\u9762",
   searchResults: "\u76EE\u524D\u5168\u90E8\u641C\u5C0B\u7D50\u679C",
   allItems: "\u6240\u6709\u5DF2\u5132\u5B58\u9805\u76EE",
+  localVersion: "\u672C\u6A5F",
+  remoteVersion: "\u9060\u7AEF",
+  updatedAt: "\u66F4\u65B0\u6642\u9593",
   statusAvailable: "\u53EF\u7528",
   noteSavedMessage: "\u5099\u8A3B\u5DF2\u5132\u5B58\u3002",
   exportData: "\u532F\u51FAJSON",
@@ -1312,37 +1360,46 @@ function KeepBackup({
       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
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ...props,
+      "data-keepkit": "backup",
+      "data-state": error ? "error" : result ? "complete" : "idle",
+      "data-loading": context.isMutating ? "true" : void 0,
+      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;
@@ -1375,6 +1432,7 @@ function KeepItemCheckbox({
       ...props,
       type: "checkbox",
       checked,
+      "data-keepkit": "item-checkbox",
       "data-state": checked ? "checked" : "unchecked",
       "data-disabled": props.disabled ? "true" : void 0,
       "aria-label": accessibleLabel,
@@ -1568,6 +1626,7 @@ function KeepBulkActions({
     "section",
     {
       ...props,
+      "data-keepkit": "bulk-actions",
       "aria-busy": list.isMutating || props["aria-busy"],
       "data-state": selectedIds.length > 0 ? "selected" : "idle",
       "data-loading": list.isLoading || list.isMutating ? "true" : void 0,
@@ -1581,23 +1640,37 @@ import {
   KeepButton as CoreKeepButton,
   useKeepItem
 } from "@keepkit/core/react";
-import { Fragment as Fragment2, jsx as jsx6 } from "react/jsx-runtime";
-function KeepButton({ labels, ...props }) {
+import { createElement } from "react";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+function KeepButton({
+  labels,
+  icons,
+  iconOnly = false,
+  showLabel = true,
+  iconClassName,
+  ...props
+}) {
   const saveLabel = useUiLabel("save", typeof labels?.unsaved === "string" ? labels.unsaved : void 0);
   const savedLabel = useUiLabel("saved", typeof labels?.saved === "string" ? labels.saved : void 0);
   const loadingLabel = useUiLabel("loading", typeof labels?.loading === "string" ? labels.loading : void 0);
   const errorLabel = useUiLabel("error", typeof labels?.error === "string" ? labels.error : void 0);
   const buttonState = useKeepItem(props.item);
-  const customStateLabel = labels?.loading !== void 0 || labels?.error !== void 0;
+  const customStateLabel = labels?.loading !== void 0 || labels?.error !== void 0 || icons !== void 0 && props.children === void 0;
   const getStateContent = (state) => {
-    if (state.error) return labels?.error ?? errorLabel;
-    if (state.isMutating) return labels?.loading ?? loadingLabel;
     if (typeof props.children === "function") return props.children(state);
     if (props.children !== void 0) return props.children;
-    return state.isSaved ? labels?.saved ?? savedLabel : labels?.unsaved ?? saveLabel;
+    const label = state.error ? labels?.error ?? errorLabel : state.isMutating ? labels?.loading ?? loadingLabel : state.isSaved ? labels?.saved ?? savedLabel : labels?.unsaved ?? saveLabel;
+    if (!icons) return label;
+    const icon = state.error ? icons.error : state.isMutating ? icons.loading : state.isSaved ? icons.remove ?? icons.saved : icons.save;
+    return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+      renderIcon(icon, iconClassName),
+      showLabel && !iconOnly ? label : null
+    ] });
   };
   const sharedProps = {
     ...props,
+    "data-keepkit": "button",
+    "data-icon-only": iconOnly ? "true" : void 0,
     "aria-busy": props["aria-busy"] ?? (buttonState.isLoading || buttonState.isMutating),
     savedLabel: labels?.saved ?? props.savedLabel ?? savedLabel,
     unsavedLabel: labels?.unsaved ?? props.unsavedLabel ?? saveLabel,
@@ -1607,6 +1680,10 @@ function KeepButton({ labels, ...props }) {
   if (!customStateLabel) return /* @__PURE__ */ jsx6(CoreKeepButton, { ...sharedProps });
   return /* @__PURE__ */ jsx6(CoreKeepButton, { ...sharedProps, children: (state) => /* @__PURE__ */ jsx6(Fragment2, { children: getStateContent(state) }) });
 }
+function renderIcon(icon, className) {
+  if (typeof icon === "function") return createElement(icon, { "aria-hidden": true, className });
+  return icon ?? null;
+}
 
 // src/KeepCollection.tsx
 import { KeepErrorBoundary as KeepErrorBoundary2, useKeepList as useKeepList4 } from "@keepkit/core/react";
@@ -1632,9 +1709,19 @@ import { useState as useState3 } from "react";
 // src/KeepItemStatusBadge.tsx
 import { jsx as jsx7 } from "react/jsx-runtime";
 function KeepItemStatusBadge({ status = "available", label, className, ...props }) {
-  const resolvedStatus = status === "available" ? "available" : status;
-  const statusLabel = useUiLabel(getStatusLabelKey(resolvedStatus));
-  return /* @__PURE__ */ jsx7("span", { ...props, className, "data-keepkit": "status-badge", "data-status": resolvedStatus, children: label ?? statusLabel });
+  const resolvedStatus = getDisplayStatus(status);
+  const statusLabel = useUiLabel(getStatusLabelKey(status));
+  return /* @__PURE__ */ jsx7(
+    "span",
+    {
+      ...props,
+      className,
+      "data-keepkit": "status-badge",
+      "data-status": status,
+      "data-item-status": resolvedStatus,
+      children: label ?? statusLabel
+    }
+  );
 }
 function getStatusLabelKey(status) {
   switch (status) {
@@ -1647,13 +1734,22 @@ function getStatusLabelKey(status) {
     case "deleted":
       return "statusDeleted";
     case "private":
+      return "statusPrivate";
     case "unknown":
-      return status === "private" ? "statusPrivate" : "statusUnknown";
+      return "statusUnknown";
+    case "restricted":
+      return "statusPrivate";
   }
 }
+function getDisplayStatus(status) {
+  if (status === "available") return "available";
+  if (status === "expired") return "expired";
+  if (status === "removed") return "removed";
+  return "restricted";
+}
 
 // src/KeepStaleNotice.tsx
-import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 function KeepStaleNotice({
   item,
   onRetry,
@@ -1691,10 +1787,10 @@ function KeepStaleNotice({
       setError(cause);
     }
   }
-  return /* @__PURE__ */ jsxs3("aside", { ...props, className, "data-keepkit": "stale-notice", "data-state": error ? "error" : "stale", children: [
+  return /* @__PURE__ */ jsxs4("aside", { ...props, className, "data-keepkit": "stale-notice", "data-state": error ? "error" : "stale", children: [
     /* @__PURE__ */ jsx8(KeepItemStatusBadge, { status }),
     children ?? (item.statusReason ? /* @__PURE__ */ jsx8("p", { children: item.statusReason }) : null),
-    /* @__PURE__ */ jsxs3("div", { children: [
+    /* @__PURE__ */ jsxs4("div", { children: [
       /* @__PURE__ */ jsx8("button", { type: "button", onClick: () => void handleRetry(), disabled: isRetrying || context.isMutating, children: retryLabel ?? retryText }),
       /* @__PURE__ */ jsx8("button", { type: "button", onClick: () => void handleRemove(), disabled: context.isMutating, children: removeLabel ?? removeText })
     ] }),
@@ -1733,7 +1829,7 @@ function KeepPruneStaleButton({
 }
 
 // src/KeepItemCard.tsx
-import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 function KeepItemCard({
   item,
   title,
@@ -1743,6 +1839,7 @@ function KeepItemCard({
   renderImage,
   renderTags,
   showTags = true,
+  showSavedAt = true,
   imageAlt,
   render,
   children,
@@ -1763,6 +1860,8 @@ function KeepItemCard({
   ...rootProps
 }) {
   const saveActionLabel = useUiLabel("save");
+  const savedAtLabel = useUiLabel("saved");
+  const errorLabel = useUiLabel("error");
   const removeActionLabel = useUiLabel("remove");
   const itemState = useKeepItem2(item);
   const contentChildren = asChild && isValidElement2(children) ? void 0 : children;
@@ -1778,6 +1877,10 @@ function KeepItemCard({
   const imageProps = getImageProps?.(item, resolvedTitle);
   const href = typeof hrefOption === "function" ? hrefOption(item) : hrefOption;
   const isAvailable = item.status === void 0 || item.status === "available";
+  const displayStatus = getDisplayStatus2(item.status);
+  const isExternalLink = href ? isExternalHref(href) : false;
+  const resolvedLinkTarget = linkTargetAttribute ?? (isExternalLink ? "_blank" : void 0);
+  const resolvedLinkRel = linkRel ?? (isExternalLink ? "noreferrer" : void 0);
   const statusLabelKey = item.status && item.status !== "available" ? getStatusLabelKey2(item.status) : "statusUnknown";
   const unavailableLabel = useUiLabel(statusLabelKey);
   const tagsLabel = useUiLabel("tags");
@@ -1786,8 +1889,8 @@ function KeepItemCard({
     if (!href || !isAvailable) return content;
     const linkProps = {
       href,
-      target: linkTargetAttribute,
-      rel: linkRel,
+      target: resolvedLinkTarget,
+      rel: resolvedLinkRel,
       onClick: (event) => onOpen?.(item, event),
       children: content
     };
@@ -1801,10 +1904,19 @@ function KeepItemCard({
       onRemoveError?.(error);
     }
   }
-  const body = render ? render(state) : typeof contentChildren === "function" ? contentChildren(state) : contentChildren ?? /* @__PURE__ */ jsxs4(Fragment3, { children: [
+  const body = render ? render(state) : typeof contentChildren === "function" ? contentChildren(state) : contentChildren ?? /* @__PURE__ */ jsxs5(Fragment3, { children: [
     imageProps ? renderImage?.({ ...imageProps, alt: imageAlt ?? imageProps.alt }, item) ?? (ImageComponent ? /* @__PURE__ */ jsx9(ImageComponent, { ...imageProps, alt: imageAlt ?? imageProps.alt }) : /* @__PURE__ */ jsx9("img", { ...imageProps, alt: imageAlt ?? imageProps.alt })) : null,
-    /* @__PURE__ */ jsx9("h3", { children: linkTarget === "title" ? renderLink(resolvedTitle) : resolvedTitle }),
+    /* @__PURE__ */ jsx9("h3", { children: linkTarget === "title" ? isAvailable ? renderLink(resolvedTitle) : href ? /* @__PURE__ */ jsx9("span", { "aria-disabled": "true", "data-link-disabled": "true", children: resolvedTitle }) : resolvedTitle : resolvedTitle }),
+    showSavedAt ? /* @__PURE__ */ jsxs5("div", { "data-card-meta": true, children: [
+      /* @__PURE__ */ jsxs5("span", { children: [
+        savedAtLabel,
+        ":"
+      ] }),
+      " ",
+      /* @__PURE__ */ jsx9("time", { dateTime: new Date(item.savedAt).toISOString(), children: formatSavedAt(item.savedAt) })
+    ] }) : null,
     showTags && (item.tags?.length ?? 0) > 0 ? renderTags ? renderTags(item.tags ?? [], item) : /* @__PURE__ */ jsx9("ul", { "aria-label": tagsLabel, children: item.tags?.map((tag) => /* @__PURE__ */ jsx9("li", { children: tag }, tag)) }) : null,
+    itemState.error ? /* @__PURE__ */ jsx9("p", { role: "alert", children: getErrorMessage2(itemState.error, errorLabel) }) : null,
     statusLabel ? /* @__PURE__ */ jsx9(KeepStaleNotice, { item, onRetry, onRemoved }) : null,
     showSaveButton && !statusLabel ? /* @__PURE__ */ jsx9(
       KeepButton,
@@ -1816,16 +1928,19 @@ function KeepItemCard({
     ) : null,
     !statusLabel ? /* @__PURE__ */ jsx9("button", { type: "button", onClick: () => void handleRemove(), disabled: itemState.isMutating, children: removeLabel ?? removeActionLabel }) : null
   ] });
-  const linkedBody = linkTarget === "card" ? renderLink(body) : body;
+  const linkedBody = linkTarget === "card" && isAvailable ? renderLink(body) : body;
   return renderRoot(
     asChild,
     isValidElement2(children) ? children : void 0,
     {
       ...rootProps,
       className,
+      "data-keepkit": "card",
       "aria-busy": itemState.isMutating || rootProps["aria-busy"],
-      "data-state": itemState.isSaved ? "saved" : "unsaved",
+      "aria-disabled": rootProps["aria-disabled"] ?? (!isAvailable ? "true" : void 0),
+      "data-state": itemState.error ? "error" : itemState.isSaved ? "saved" : "unsaved",
       "data-status": item.status ?? "available",
+      "data-item-status": displayStatus,
       "data-loading": itemState.isMutating ? "true" : void 0
     },
     linkedBody,
@@ -1846,6 +1961,21 @@ function getStatusLabelKey2(status) {
       return "statusUnknown";
   }
 }
+function getDisplayStatus2(status) {
+  if (status === void 0 || status === "available") return "available";
+  if (status === "expired") return "expired";
+  if (status === "removed") return "removed";
+  return "restricted";
+}
+function isExternalHref(href) {
+  return /^(?:[a-z][a-z\d+.-]*:|\/\/)/i.test(href);
+}
+function formatSavedAt(timestamp) {
+  return new Date(timestamp).toISOString().slice(0, 10);
+}
+function getErrorMessage2(error, fallback) {
+  return error instanceof Error ? error.message : fallback;
+}
 
 // src/KeepList.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
@@ -1887,6 +2017,8 @@ function KeepListContent({
     {
       ...rootProps,
       className,
+      "data-keepkit": "list",
+      "data-layout": layout,
       "aria-busy": state.isLoading || rootProps["aria-busy"],
       "data-state": getListState(state),
       "data-loading": state.isLoading ? "true" : void 0
@@ -1907,22 +2039,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__ */ jsx10(
-    "ul",
-    {
-      "data-layout": options.layout,
-      style: options.layout === "grid" ? { display: "grid", gap: "1rem", gridTemplateColumns: "repeat(auto-fit, minmax(16rem, 1fr))" } : options.layout === "compact" ? { display: "grid", gap: "0.5rem", gridTemplateColumns: "repeat(auto-fit, minmax(12rem, 1fr))" } : { display: "flex", flexDirection: "column", gap: "1rem" },
-      children: state.items.map(
-        (item) => options.renderItem ? options.renderItem(item, state) : /* @__PURE__ */ jsx10("li", { children: /* @__PURE__ */ jsx10(KeepItemCard, { item, ...options.itemCardProps }) }, item.id)
-      )
-    }
-  );
+  return /* @__PURE__ */ jsx10("ul", { "data-layout": options.layout, children: state.items.map(
+    (item) => options.renderItem ? options.renderItem(item, state) : /* @__PURE__ */ jsx10("li", { children: /* @__PURE__ */ jsx10(KeepItemCard, { item, ...options.itemCardProps }) }, item.id)
+  ) });
 }
 
 // src/KeepTagFilter.tsx
 import { useKeepList as useKeepList3 } from "@keepkit/core/react";
 import { isValidElement as isValidElement4, useCallback, useMemo as useMemo2, useState as useState4 } from "react";
-import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 function KeepTagFilter({
   query,
   value: controlledValue,
@@ -1959,12 +2084,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__ */ jsxs5("fieldset", { children: [
+  const body = render ? render(state) : typeof contentChildren === "function" ? contentChildren(state) : contentChildren ?? /* @__PURE__ */ jsxs6("fieldset", { children: [
     /* @__PURE__ */ jsx11("legend", { children: ariaLabel ?? uiAriaLabel }),
     /* @__PURE__ */ jsx11("button", { type: "button", "aria-pressed": resolvedValue === void 0, onClick: () => select(), children: allLabel ?? uiAllLabel }),
-    list.tags.map((tag) => /* @__PURE__ */ jsxs5("button", { type: "button", "aria-pressed": resolvedValue === tag, onClick: () => select(tag), children: [
+    list.tags.map((tag) => /* @__PURE__ */ jsxs6("button", { type: "button", "aria-pressed": resolvedValue === tag, onClick: () => select(tag), children: [
       renderTag ? renderTag(tag, list.tagCounts[tag] ?? 0, resolvedValue === tag) : tag,
-      /* @__PURE__ */ jsxs5("span", { children: [
+      /* @__PURE__ */ jsxs6("span", { children: [
         " (",
         list.tagCounts[tag] ?? 0,
         ")"
@@ -1977,6 +2102,7 @@ function KeepTagFilter({
     {
       ...rootProps,
       className,
+      "data-keepkit": "tag-filter",
       "data-state": resolvedValue === void 0 ? "all" : "filtered",
       "data-loading": list.isLoading ? "true" : void 0
     },
@@ -1987,7 +2113,7 @@ function KeepTagFilter({
 
 // src/query-controls.tsx
 import { useEffect, useState as useState5 } from "react";
-import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 function KeepSearchInput({
   value: controlledValue,
   defaultValue = "",
@@ -2013,6 +2139,7 @@ function KeepSearchInput({
     "input",
     {
       ...props,
+      "data-keepkit": "search-input",
       type: "search",
       value,
       "data-state": value ? "active" : "idle",
@@ -2041,7 +2168,7 @@ function KeepSortSelect({
   const savedOldestLabel = useUiLabel("savedOldest");
   const [uncontrolledValue, setUncontrolledValue] = useState5(defaultValue);
   const value = controlledValue ?? uncontrolledValue;
-  const options = children ?? /* @__PURE__ */ jsxs6(Fragment4, { children: [
+  const options = children ?? /* @__PURE__ */ jsxs7(Fragment4, { children: [
     /* @__PURE__ */ jsx12("option", { value: "updatedAt:desc", children: updatedNewestLabel }),
     /* @__PURE__ */ jsx12("option", { value: "updatedAt:asc", children: updatedOldestLabel }),
     /* @__PURE__ */ jsx12("option", { value: "savedAt:desc", children: savedNewestLabel }),
@@ -2051,6 +2178,7 @@ function KeepSortSelect({
     "select",
     {
       ...props,
+      "data-keepkit": "sort-select",
       value,
       "data-state": "selected",
       "data-disabled": props.disabled ? "true" : void 0,
@@ -2086,12 +2214,13 @@ function KeepPagination({
   };
   const navProps = {
     ...props,
+    "data-keepkit": "pagination",
     "aria-label": props["aria-label"] ?? paginationLabel,
     "data-state": pageCount > 1 ? "active" : "idle"
   };
   if (render) return /* @__PURE__ */ jsx12("nav", { ...navProps, children: render({ page: currentPage, pageCount, goToPage }) });
   const visiblePages = getVisiblePages(currentPage, pageCount, Math.max(1, maxPageButtons));
-  return /* @__PURE__ */ jsxs6("nav", { ...navProps, children: [
+  return /* @__PURE__ */ jsxs7("nav", { ...navProps, children: [
     /* @__PURE__ */ jsx12("button", { type: "button", onClick: () => goToPage(currentPage - 1), disabled: currentPage <= 1, children: previousPageLabel }),
     visiblePages.map((nextPage) => /* @__PURE__ */ jsx12(
       "button",
@@ -2197,7 +2326,7 @@ function getBrowserAdapter() {
 }
 
 // src/KeepCollection.tsx
-import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 function KeepCollection(props) {
   const { fallback, onBoundaryError, boundaryResetKey, ...collectionProps } = props;
   const content = /* @__PURE__ */ jsx13(KeepCollectionContent, { ...collectionProps });
@@ -2256,16 +2385,18 @@ function KeepCollectionContent({
     adapter: urlAdapter
   });
   const list = useKeepList4(resolvedQuery);
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "section",
     {
       ...rootProps,
       className,
+      "data-keepkit": "collection",
+      "data-layout": layout,
       "aria-busy": list.isLoading || list.isMutating || rootProps["aria-busy"],
       "data-state": getCollectionState(list),
       "data-loading": list.isLoading || list.isMutating ? "true" : void 0,
       children: [
-        /* @__PURE__ */ jsxs7("div", { children: [
+        /* @__PURE__ */ jsxs8("div", { children: [
           enabled.search ? /* @__PURE__ */ jsx13(
             KeepSearchInput,
             {
@@ -2333,9 +2464,8 @@ function getCollectionState(list) {
 
 // src/KeepLayout.tsx
 import { jsx as jsx14 } from "react/jsx-runtime";
-function KeepLayout({ layout = "list", children, style, ...props }) {
-  const layoutStyle = layout === "grid" ? { display: "grid", gap: "1rem", gridTemplateColumns: "repeat(auto-fit, minmax(16rem, 1fr))" } : layout === "compact" ? { display: "grid", gap: "0.5rem", gridTemplateColumns: "repeat(auto-fit, minmax(12rem, 1fr))" } : { display: "flex", flexDirection: "column", gap: "1rem" };
-  return /* @__PURE__ */ jsx14("div", { ...props, style: { ...layoutStyle, ...style }, "data-layout": layout, children });
+function KeepLayout({ layout = "list", children, ...props }) {
+  return /* @__PURE__ */ jsx14("div", { ...props, "data-keepkit": "layout", "data-layout": layout, children });
 }
 
 // src/KeepNoteEditor.tsx
@@ -2347,7 +2477,7 @@ import {
   useRef as useRef3,
   useState as useState7
 } from "react";
-import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 function KeepNoteEditor({
   item,
   label,
@@ -2364,6 +2494,7 @@ function KeepNoteEditor({
 }) {
   const defaultLabel = useUiLabel("note");
   const defaultSaveLabel = useUiLabel("saveNote");
+  const errorLabel = useUiLabel("error");
   const itemState = useKeepItem3(item);
   const { error, isMutating, item: savedItem, updateNote } = itemState;
   const contentChildren = asChild && isValidElement5(children) ? void 0 : children;
@@ -2397,8 +2528,8 @@ function KeepNoteEditor({
     error,
     save
   };
-  const body = render ? render(state) : typeof contentChildren === "function" ? contentChildren(state) : contentChildren ?? /* @__PURE__ */ jsxs8(Fragment5, { children: [
-    /* @__PURE__ */ jsxs8("label", { children: [
+  const body = render ? render(state) : typeof contentChildren === "function" ? contentChildren(state) : contentChildren ?? /* @__PURE__ */ jsxs9(Fragment5, { children: [
+    /* @__PURE__ */ jsxs9("label", { children: [
       label ?? defaultLabel,
       /* @__PURE__ */ jsx15(
         "textarea",
@@ -2423,17 +2554,21 @@ function KeepNoteEditor({
     void save().catch(() => void 0);
   };
   if (!asChild) {
-    return /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsxs9(
       "form",
       {
         ...formProps,
         className,
+        "data-keepkit": "note-editor",
         onSubmit: handleSubmit,
         "aria-busy": isMutating || formProps["aria-busy"],
-        "data-state": isDirty ? "dirty" : "clean",
+        "data-state": error ? "error" : isDirty ? "dirty" : "clean",
         "data-loading": isMutating ? "true" : void 0,
         "data-disabled": isMutating ? "true" : void 0,
-        children: body
+        children: [
+          body,
+          error ? /* @__PURE__ */ jsx15("p", { role: "alert", children: getErrorMessage3(error, errorLabel) }) : null
+        ]
       }
     );
   }
@@ -2443,9 +2578,10 @@ function KeepNoteEditor({
     {
       ...formProps,
       className,
+      "data-keepkit": "note-editor",
       onSubmit: handleSubmit,
       "aria-busy": isMutating || formProps["aria-busy"],
-      "data-state": isDirty ? "dirty" : "clean",
+      "data-state": error ? "error" : isDirty ? "dirty" : "clean",
       "data-loading": isMutating ? "true" : void 0,
       "data-disabled": isMutating ? "true" : void 0
     },
@@ -2453,11 +2589,14 @@ function KeepNoteEditor({
     "KeepNoteEditor"
   );
 }
+function getErrorMessage3(error, fallback) {
+  return error instanceof Error ? error.message : fallback;
+}
 
 // src/KeepSyncRecoveryDialog.tsx
 import { useKeepContext as useKeepContext3 } from "@keepkit/core/react";
 import { useEffect as useEffect4, useState as useState8 } from "react";
-import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
 function KeepSyncRecoveryDialog({
   open,
   onOpenChange,
@@ -2478,6 +2617,10 @@ function KeepSyncRecoveryDialog({
   const keepLocalLabel = useUiLabel("keepLocal");
   const useServerLabel = useUiLabel("useServer");
   const manualMergeLabel = useUiLabel("manualMerge");
+  const localVersionLabel = useUiLabel("localVersion");
+  const remoteVersionLabel = useUiLabel("remoteVersion");
+  const updatedAtLabel = useUiLabel("updatedAt");
+  const noteLabel = useUiLabel("note");
   const backupRecoveryLabel = useUiLabel("backupRecovery");
   const backupRecoveryDescription = useUiLabel("backupRecoveryDescription");
   const errorLabel = useUiLabel("error");
@@ -2508,7 +2651,7 @@ function KeepSyncRecoveryDialog({
       setBusyId(void 0);
     }
   }
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     "section",
     {
       ...props,
@@ -2516,19 +2659,44 @@ function KeepSyncRecoveryDialog({
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": "keepkit-sync-recovery-title",
+      "aria-describedby": error ? "keepkit-sync-recovery-error" : void 0,
+      "aria-busy": busyId !== void 0,
       "data-keepkit": "sync-recovery",
       "data-state": conflictList.length > 0 ? "conflict" : "error",
+      "data-loading": busyId !== void 0 ? "true" : void 0,
       children: [
-        /* @__PURE__ */ jsxs9("header", { children: [
+        /* @__PURE__ */ jsxs10("header", { children: [
           /* @__PURE__ */ jsx16("h2", { id: "keepkit-sync-recovery-title", children: dialogTitle }),
           /* @__PURE__ */ jsx16("button", { type: "button", onClick: close, "aria-label": closeLabel, children: closeLabel })
         ] }),
         children,
-        conflictList.length > 0 ? /* @__PURE__ */ jsxs9("div", { children: [
+        conflictList.length > 0 ? /* @__PURE__ */ jsxs10("div", { children: [
           /* @__PURE__ */ jsx16("p", { children: conflictLabel }),
-          conflictList.map((conflict) => /* @__PURE__ */ jsxs9("article", { "data-conflict-id": conflict.id, children: [
+          conflictList.map((conflict) => /* @__PURE__ */ jsxs10("article", { "data-conflict-id": conflict.id, children: [
             /* @__PURE__ */ jsx16("h3", { children: getMetaTitle(conflict.operation.item?.meta) ?? conflict.id }),
-            /* @__PURE__ */ jsxs9("div", { children: [
+            /* @__PURE__ */ jsxs10("div", { "data-conflict-preview": true, children: [
+              /* @__PURE__ */ jsx16(
+                ConflictPreview,
+                {
+                  item: conflict.operation.item,
+                  heading: localVersionLabel,
+                  updatedAtLabel,
+                  noteLabel,
+                  side: "local"
+                }
+              ),
+              /* @__PURE__ */ jsx16(
+                ConflictPreview,
+                {
+                  item: conflict.remote,
+                  heading: remoteVersionLabel,
+                  updatedAtLabel,
+                  noteLabel,
+                  side: "remote"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs10("div", { children: [
               /* @__PURE__ */ jsx16("button", { type: "button", onClick: () => void resolve(conflict, "local"), disabled: busyId !== void 0, children: keepLocalLabel }),
               /* @__PURE__ */ jsx16("button", { type: "button", onClick: () => void resolve(conflict, "remote"), disabled: busyId !== void 0, children: useServerLabel }),
               /* @__PURE__ */ jsx16(
@@ -2543,20 +2711,44 @@ function KeepSyncRecoveryDialog({
             ] })
           ] }, conflict.id))
         ] }) : null,
-        context.syncState.status === "error" || context.error ? /* @__PURE__ */ jsxs9("section", { "data-recovery": "backup", children: [
+        context.syncState.status === "error" || context.error ? /* @__PURE__ */ jsxs10("section", { "data-recovery": "backup", children: [
           /* @__PURE__ */ jsx16("h3", { children: backupRecoveryLabel }),
           /* @__PURE__ */ jsx16("p", { children: backupRecoveryDescription }),
           backup ?? (showBackupControls ? /* @__PURE__ */ jsx16(KeepBackup, {}) : null)
         ] }) : null,
-        error ? /* @__PURE__ */ jsx16("p", { role: "alert", children: error instanceof Error ? error.message : errorLabel }) : null
+        error ? /* @__PURE__ */ jsx16("p", { id: "keepkit-sync-recovery-error", role: "alert", "aria-live": "assertive", children: error instanceof Error ? error.message : errorLabel }) : null
       ]
     }
   );
 }
+function ConflictPreview({
+  item,
+  heading,
+  updatedAtLabel,
+  noteLabel,
+  side
+}) {
+  return /* @__PURE__ */ jsxs10("article", { "data-conflict-version": side, "aria-label": heading, children: [
+    /* @__PURE__ */ jsx16("h4", { children: heading }),
+    /* @__PURE__ */ jsxs10("dl", { children: [
+      /* @__PURE__ */ jsxs10("div", { children: [
+        /* @__PURE__ */ jsx16("dt", { children: updatedAtLabel }),
+        /* @__PURE__ */ jsx16("dd", { children: item ? /* @__PURE__ */ jsx16("time", { dateTime: new Date(item.updatedAt).toISOString(), children: formatConflictDate(item.updatedAt) }) : "\u2014" })
+      ] }),
+      /* @__PURE__ */ jsxs10("div", { children: [
+        /* @__PURE__ */ jsx16("dt", { children: noteLabel }),
+        /* @__PURE__ */ jsx16("dd", { children: item?.note || "\u2014" })
+      ] })
+    ] })
+  ] });
+}
+function formatConflictDate(timestamp) {
+  return new Date(timestamp).toISOString().slice(0, 10);
+}
 
 // src/KeepSyncStatusBanner.tsx
 import { useKeepContext as useKeepContext4 } from "@keepkit/core/react";
-import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
 function KeepSyncStatusBanner({
   onRetry,
   onResolveConflicts,
@@ -2573,7 +2765,7 @@ function KeepSyncStatusBanner({
   const status = context.syncState.status;
   const hasConflicts = (context.syncState.conflicts?.length ?? 0) > 0 || context.syncState.conflictIds.length > 0;
   if (status === "idle" && !hasConflicts) return null;
-  const message = children ?? (status === "error" ? getErrorMessage2(context.syncState.error) : status === "conflict" || hasConflicts ? conflictLabel : status === "pending" || status === "syncing" ? pendingLabel : syncedLabel);
+  const message = children ?? (status === "error" ? getErrorMessage4(context.syncState.error) : status === "conflict" || hasConflicts ? conflictLabel : status === "pending" || status === "syncing" ? pendingLabel : syncedLabel);
   const role = status === "error" || status === "conflict" || hasConflicts ? "alert" : "status";
   const retry = async () => {
     if (onRetry) {
@@ -2582,7 +2774,7 @@ function KeepSyncStatusBanner({
     }
     await context.flushSync();
   };
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "aside",
     {
       ...props,
@@ -2599,14 +2791,14 @@ function KeepSyncStatusBanner({
     }
   );
 }
-function getErrorMessage2(error) {
+function getErrorMessage4(error) {
   return error instanceof Error ? error.message : "Sync failed.";
 }
 
 // src/KeepTagEditor.tsx
 import { useKeepItem as useKeepItem4 } from "@keepkit/core/react";
 import { useCallback as useCallback3, useEffect as useEffect5, useState as useState9 } from "react";
-import { Fragment as Fragment6, jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 function KeepTagEditor({
   item,
   availableTags = [],
@@ -2618,6 +2810,7 @@ function KeepTagEditor({
   const tagsLabel = useUiLabel("tagsToApply");
   const removeLabel = useUiLabel("remove");
   const applyTagsLabel = useUiLabel("applyTags");
+  const errorLabel = useUiLabel("error");
   const itemState = useKeepItem4(item);
   const [tags, setTags] = useState9(item.tags ?? []);
   const [input, setInput] = useState9("");
@@ -2637,8 +2830,8 @@ function KeepTagEditor({
     setTags(normalizeUiTags([...tags, tag]));
     setInput("");
   };
-  const body = render ? render({ tags, setTags, save, isSaving: itemState.isMutating }) : /* @__PURE__ */ jsxs11(Fragment6, { children: [
-    /* @__PURE__ */ jsxs11("label", { children: [
+  const body = render ? render({ tags, setTags, save, isSaving: itemState.isMutating }) : /* @__PURE__ */ jsxs12(Fragment6, { children: [
+    /* @__PURE__ */ jsxs12("label", { children: [
       tagsLabel,
       /* @__PURE__ */ jsx18(
         "input",
@@ -2660,13 +2853,13 @@ function KeepTagEditor({
       )
     ] }),
     availableTags.length > 0 ? /* @__PURE__ */ jsx18("datalist", { id: `keep-tags-${item.id}`, children: availableTags.map((tag) => /* @__PURE__ */ jsx18("option", { value: tag }, tag)) }) : null,
-    /* @__PURE__ */ jsx18("ul", { "aria-label": tagsLabel, children: tags.map((tag) => /* @__PURE__ */ jsxs11("li", { children: [
+    /* @__PURE__ */ jsx18("ul", { "aria-label": tagsLabel, children: tags.map((tag) => /* @__PURE__ */ jsxs12("li", { children: [
       tag,
       /* @__PURE__ */ jsx18("button", { type: "button", onClick: () => setTags(tags.filter((current) => current !== tag)), children: removeLabel })
     ] }, tag)) }),
     /* @__PURE__ */ jsx18("button", { type: "submit", disabled: itemState.isMutating, "aria-busy": itemState.isMutating, children: applyTagsLabel })
   ] });
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsxs12(
     "form",
     {
       ...props,
@@ -2675,23 +2868,30 @@ function KeepTagEditor({
         void save().catch(() => void 0);
       },
       "aria-busy": itemState.isMutating || props["aria-busy"],
-      "data-state": itemState.isMutating ? "saving" : "idle",
+      "data-keepkit": "tag-editor",
+      "data-state": itemState.error ? "error" : itemState.isMutating ? "saving" : "idle",
       "data-loading": itemState.isMutating ? "true" : void 0,
       "data-disabled": itemState.isMutating ? "true" : void 0,
-      children: body
+      children: [
+        body,
+        itemState.error ? /* @__PURE__ */ jsx18("p", { role: "alert", children: getErrorMessage5(itemState.error, errorLabel) }) : null
+      ]
     }
   );
 }
+function getErrorMessage5(error, fallback) {
+  return error instanceof Error ? error.message : fallback;
+}
 
 // src/KeepUndo.tsx
 import { useKeepContext as useKeepContext5 } from "@keepkit/core/react";
-import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
 function KeepUndo({ children, label, ...props }) {
   const context = useKeepContext5();
   const message = useUiLabel("undoAvailable");
   const undoLabel = useUiLabel("undo");
   if (!context.undo.canUndo) return null;
-  return /* @__PURE__ */ jsxs12("div", { ...props, role: "status", "aria-live": "polite", "data-state": "available", children: [
+  return /* @__PURE__ */ jsxs13("div", { ...props, role: "status", "aria-live": "polite", "data-keepkit": "undo", "data-state": "available", children: [
     children ?? message,
     /* @__PURE__ */ jsx19("button", { type: "button", onClick: () => void context.undoLastRemoval(), children: label ?? undoLabel })
   ] });
@@ -2700,7 +2900,7 @@ function KeepUndo({ children, label, ...props }) {
 // src/status.tsx
 import { useKeepContext as useKeepContext6 } from "@keepkit/core/react";
 import { isValidElement as isValidElement6, useEffect as useEffect6, useRef as useRef4, useState as useState10 } from "react";
-import { Fragment as Fragment7, jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
 function KeepEmptyState({
   title,
   description,
@@ -2712,12 +2912,18 @@ function KeepEmptyState({
 }) {
   const defaultTitle = useUiLabel("noItems").replace(/\.$/, "");
   const contentChildren = asChild && isValidElement6(children) ? void 0 : children;
-  const body = contentChildren ?? /* @__PURE__ */ jsxs13(Fragment7, { children: [
+  const body = contentChildren ?? /* @__PURE__ */ jsxs14(Fragment7, { children: [
     /* @__PURE__ */ jsx20("h2", { children: title ?? defaultTitle }),
     description ? /* @__PURE__ */ jsx20("p", { children: description }) : null,
     action
   ] });
-  return renderRoot(asChild, children, { ...rootProps, className, "data-state": "empty" }, body, "KeepEmptyState");
+  return renderRoot(
+    asChild,
+    children,
+    { ...rootProps, className, "data-keepkit": "empty-state", "data-state": "empty" },
+    body,
+    "KeepEmptyState"
+  );
 }
 function KeepStatus({
   status,
@@ -2746,6 +2952,7 @@ function KeepStatus({
     {
       ...rootProps,
       className,
+      "data-keepkit": "status",
       role,
       "aria-live": rootProps["aria-live"] ?? "polite",
       "data-state": resolvedStatus,
@@ -2777,6 +2984,7 @@ function KeepAnnouncements({ messages, ...props }) {
       role: props.role ?? "status",
       "aria-live": props["aria-live"] ?? "polite",
       "aria-atomic": "true",
+      "data-keepkit": "announcements",
       "data-state": "announcing",
       children: message
     }
@@ -2800,6 +3008,58 @@ function getStatusLabelKey3(status) {
   return "saved";
 }
 
+// src/theme.tsx
+import { cloneElement as cloneElement2, isValidElement as isValidElement7 } from "react";
+import { jsx as jsx21 } from "react/jsx-runtime";
+function KeepThemeProvider({
+  children,
+  theme = "default",
+  mode = "system",
+  density = "comfortable",
+  radius = "medium",
+  accentColor,
+  highContrast = false,
+  reducedMotion = false,
+  variables,
+  style,
+  className,
+  asChild = false,
+  ...props
+}) {
+  const themeClassName = [
+    "keep-theme",
+    `keep-theme--${theme}`,
+    `keep-theme--${mode}`,
+    `keep-theme--density-${density}`,
+    `keep-theme--radius-${radius}`,
+    className
+  ].filter(Boolean).join(" ");
+  const themeStyle = {
+    ...style,
+    ...accentColor && !highContrast ? { "--keep-accent": accentColor, "--keep-primary": accentColor } : {},
+    ...variables
+  };
+  const rootProps = {
+    ...props,
+    className: themeClassName,
+    style: themeStyle,
+    "data-keep-theme": theme,
+    "data-theme": theme,
+    "data-mode": mode,
+    "data-density": density,
+    "data-radius": radius,
+    "data-accent-color": accentColor,
+    "data-high-contrast": highContrast ? "true" : void 0,
+    "data-reduced-motion": reducedMotion ? "true" : void 0
+  };
+  if (asChild) {
+    if (!isValidElement7(children))
+      throw new Error("KeepThemeProvider with asChild requires a single React element child.");
+    return cloneElement2(children, rootProps);
+  }
+  return /* @__PURE__ */ jsx21("div", { ...rootProps, children });
+}
+
 // src/index.tsx
 import { createAuthenticatedSyncKit } from "@keepkit/core/core";
 import {
@@ -2820,36 +3080,90 @@ import {
   LocalStorageSyncQueueAdapter,
   SyncStorageAdapter
 } from "@keepkit/core/storage";
-import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
 function KeepKitProvider({
   labels,
   locale,
   labelResolver,
+  theme,
+  mode,
+  density,
+  radius,
+  accentColor,
+  highContrast,
+  reducedMotion,
+  variables,
+  className: themeClassName,
+  style: themeStyle,
+  asChild: themeAsChild,
   children,
   ...providerProps
 }) {
-  return /* @__PURE__ */ jsx21(KeepUiProvider, { labels, locale, labelResolver, children: /* @__PURE__ */ jsxs14(CoreKeepProvider, { ...providerProps, children: [
-    children,
-    /* @__PURE__ */ jsx21(KeepAnnouncements, {})
-  ] }) });
+  return /* @__PURE__ */ jsx22(KeepUiProvider, { labels, locale, labelResolver, children: /* @__PURE__ */ jsx22(
+    KeepThemeProvider,
+    {
+      theme,
+      mode,
+      density,
+      radius,
+      accentColor,
+      highContrast,
+      reducedMotion,
+      variables,
+      className: themeClassName,
+      style: themeStyle,
+      asChild: themeAsChild,
+      children: /* @__PURE__ */ jsxs15(CoreKeepProvider, { ...providerProps, children: [
+        children,
+        /* @__PURE__ */ jsx22(KeepAnnouncements, {})
+      ] })
+    }
+  ) });
 }
 function createKeepKit(options = {}) {
-  const { labels, locale, labelResolver, getTitle, getImageProps, ...coreOptions } = options;
+  const {
+    labels,
+    locale,
+    labelResolver,
+    theme,
+    mode,
+    density,
+    radius,
+    accentColor,
+    highContrast,
+    reducedMotion,
+    variables,
+    themeClassName,
+    themeStyle,
+    getTitle,
+    getImageProps,
+    ...coreOptions
+  } = options;
   const coreKit = createCoreKeepKit(coreOptions);
   return {
-    Provider: (props) => /* @__PURE__ */ jsx21(
+    Provider: (props) => /* @__PURE__ */ jsx22(
       KeepKitProvider,
       {
         ...coreOptions,
         labels,
         locale,
         labelResolver,
+        theme,
+        mode,
+        density,
+        radius,
+        accentColor,
+        highContrast,
+        reducedMotion,
+        variables,
+        className: themeClassName,
+        style: themeStyle,
         ...props
       }
     ),
-    Button: (props) => /* @__PURE__ */ jsx21(KeepButton, { ...props }),
-    Backup: (props) => /* @__PURE__ */ jsx21(KeepBackup, { ...props }),
-    Collection: (props) => /* @__PURE__ */ jsx21(
+    Button: (props) => /* @__PURE__ */ jsx22(KeepButton, { ...props }),
+    Backup: (props) => /* @__PURE__ */ jsx22(KeepBackup, { ...props }),
+    Collection: (props) => /* @__PURE__ */ jsx22(
       KeepCollection,
       {
         ...props,
@@ -2896,6 +3210,7 @@ export {
   KeepSyncStatusBanner,
   KeepTagEditor,
   KeepTagFilter,
+  KeepThemeProvider,
   KeepUiProvider,
   KeepUndo,
   LocalStorageAdapter,