@keepkit/ui 0.12.0 → 0.13.0

package/dist/index.js

@@ -1312,37 +1312,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 +1384,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 +1578,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 +1592,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 +1632,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";
@@ -1653,7 +1682,7 @@ function getStatusLabelKey(status) {
 }
 
 // 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 +1720,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 +1762,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 +1772,7 @@ function KeepItemCard({
   renderImage,
   renderTags,
   showTags = true,
+  showSavedAt = true,
   imageAlt,
   render,
   children,
@@ -1763,6 +1793,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;
@@ -1801,10 +1833,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 }),
+    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,
@@ -1823,8 +1864,9 @@ function KeepItemCard({
     {
       ...rootProps,
       className,
+      "data-keepkit": "card",
       "aria-busy": itemState.isMutating || rootProps["aria-busy"],
-      "data-state": itemState.isSaved ? "saved" : "unsaved",
+      "data-state": itemState.error ? "error" : itemState.isSaved ? "saved" : "unsaved",
       "data-status": item.status ?? "available",
       "data-loading": itemState.isMutating ? "true" : void 0
     },
@@ -1846,6 +1888,12 @@ function getStatusLabelKey2(status) {
       return "statusUnknown";
   }
 }
+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 +1935,7 @@ function KeepListContent({
     {
       ...rootProps,
       className,
+      "data-keepkit": "list",
       "aria-busy": state.isLoading || rootProps["aria-busy"],
       "data-state": getListState(state),
       "data-loading": state.isLoading ? "true" : void 0
@@ -1922,7 +1971,7 @@ function getListBody(state, options) {
 // 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 +2008,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 +2026,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 +2037,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 +2063,7 @@ function KeepSearchInput({
     "input",
     {
       ...props,
+      "data-keepkit": "search-input",
       type: "search",
       value,
       "data-state": value ? "active" : "idle",
@@ -2041,7 +2092,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 +2102,7 @@ function KeepSortSelect({
     "select",
     {
       ...props,
+      "data-keepkit": "sort-select",
       value,
       "data-state": "selected",
       "data-disabled": props.disabled ? "true" : void 0,
@@ -2086,12 +2138,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 +2250,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 +2309,17 @@ function KeepCollectionContent({
     adapter: urlAdapter
   });
   const list = useKeepList4(resolvedQuery);
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "section",
     {
       ...rootProps,
       className,
+      "data-keepkit": "collection",
       "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,
             {
@@ -2335,7 +2389,7 @@ function getCollectionState(list) {
 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 });
+  return /* @__PURE__ */ jsx14("div", { ...props, style: { ...layoutStyle, ...style }, "data-keepkit": "layout", "data-layout": layout, children });
 }
 
 // src/KeepNoteEditor.tsx
@@ -2347,7 +2401,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 +2418,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 +2452,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 +2478,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 +2502,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 +2513,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,
@@ -2508,7 +2571,7 @@ function KeepSyncRecoveryDialog({
       setBusyId(void 0);
     }
   }
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     "section",
     {
       ...props,
@@ -2518,17 +2581,18 @@ function KeepSyncRecoveryDialog({
       "aria-labelledby": "keepkit-sync-recovery-title",
       "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", { 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,7 +2607,7 @@ 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)
@@ -2556,7 +2620,7 @@ function KeepSyncRecoveryDialog({
 
 // 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 +2637,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 +2646,7 @@ function KeepSyncStatusBanner({
     }
     await context.flushSync();
   };
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "aside",
     {
       ...props,
@@ -2599,14 +2663,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 +2682,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 +2702,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 +2725,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 +2740,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 +2772,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 +2784,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 +2824,7 @@ function KeepStatus({
     {
       ...rootProps,
       className,
+      "data-keepkit": "status",
       role,
       "aria-live": rootProps["aria-live"] ?? "polite",
       "data-state": resolvedStatus,
@@ -2777,6 +2856,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 +2880,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 +2952,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 +3082,7 @@ export {
   KeepSyncStatusBanner,
   KeepTagEditor,
   KeepTagFilter,
+  KeepThemeProvider,
   KeepUiProvider,
   KeepUndo,
   LocalStorageAdapter,