@keepkit/ui 0.6.0 → 0.7.0

package/dist/index.js

@@ -2,22 +2,13 @@
 
 // src/index.tsx
 import {
-  KeepButton as CoreKeepButton,
   KeepProvider as CoreKeepProvider,
-  createKeepKit as createCoreKeepKit,
-  useKeepContext,
-  useKeepItem,
-  useKeepList
+  createKeepKit as createCoreKeepKit
 } from "@keepkit/core/react";
-import {
-  cloneElement,
-  isValidElement,
-  useCallback,
-  useEffect as useEffect2,
-  useMemo as useMemo2,
-  useRef,
-  useState as useState2
-} from "react";
+
+// src/KeepBulkActions.tsx
+import { useKeepList } from "@keepkit/core/react";
+import { useState } from "react";
 
 // src/KeepItemCheckbox.tsx
 import { jsx } from "react/jsx-runtime";
@@ -48,12 +39,46 @@ function getItemLabel(item) {
   return typeof title === "string" && title.trim() ? title.trim() : void 0;
 }
 
-// src/query-controls.tsx
-import { useEffect, useState } from "react";
+// src/shared.tsx
+import {
+  cloneElement,
+  isValidElement
+} from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function toKeepButtonItem(item) {
+  return {
+    id: item.id,
+    meta: item.meta,
+    targetType: item.targetType,
+    note: item.note,
+    tags: item.tags
+  };
+}
+function getMetaTitle(meta) {
+  if (typeof meta !== "object" || meta === null || !("title" in meta)) return void 0;
+  const title = meta.title;
+  return typeof title === "string" && title.trim() ? title.trim() : void 0;
+}
+function normalizeUiTags(tags) {
+  return [...new Set(tags.map((tag) => tag.trim()).filter(Boolean))];
+}
+function sortToValue(sort) {
+  return `${sort?.by ?? "updatedAt"}:${sort?.direction ?? "desc"}`;
+}
+function resolveContent(content, state) {
+  return typeof content === "function" ? content(state) : content;
+}
+function renderRoot(asChild, child, props, body, componentName) {
+  if (asChild) {
+    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 jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var DEFAULT_LABELS = {
   save: "Save",
   saved: "Saved",
@@ -96,7 +121,7 @@ function KeepUiProvider({ labels, locale, labelResolver, children }) {
     const resolved = { ...DEFAULT_LABELS, ...labels };
     return { locale, labels: resolved, labelResolver };
   }, [labelResolver, labels, locale]);
-  return /* @__PURE__ */ jsx2(KeepUiLabelsContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx3(KeepUiLabelsContext.Provider, { value, children });
 }
 function useKeepUiLabels() {
   return useContext(KeepUiLabelsContext);
@@ -106,183 +131,106 @@ function useUiLabel(key, override) {
   return override ?? context.labelResolver?.(key, { locale: context.locale }) ?? context.labels[key];
 }
 
-// src/query-controls.tsx
-import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
-function KeepSearchInput({
-  value: controlledValue,
-  defaultValue = "",
-  debounceMs = 300,
-  onValueChange,
-  "aria-label": ariaLabel,
-  placeholder,
-  ...props
-}) {
-  const label = useUiLabel("search");
-  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
-  const value = controlledValue ?? uncontrolledValue;
-  useEffect(() => {
-    if (!onValueChange) return;
-    if (debounceMs <= 0) {
-      onValueChange(value);
-      return;
-    }
-    const timer = window.setTimeout(() => onValueChange(value), debounceMs);
-    return () => window.clearTimeout(timer);
-  }, [debounceMs, onValueChange, value]);
-  return /* @__PURE__ */ jsx3(
-    "input",
-    {
-      ...props,
-      type: "search",
-      value,
-      "aria-label": ariaLabel ?? label,
-      placeholder: placeholder ?? label,
-      onChange: (event) => {
-        const nextValue = event.currentTarget.value;
-        if (controlledValue === void 0) setUncontrolledValue(nextValue);
-      }
-    }
-  );
-}
-function KeepSortSelect({
-  value: controlledValue,
-  defaultValue = "updatedAt:desc",
-  onValueChange,
-  "aria-label": ariaLabel,
-  children,
-  ...props
-}) {
-  const label = useUiLabel("sort");
-  const updatedNewestLabel = useUiLabel("updatedNewest");
-  const updatedOldestLabel = useUiLabel("updatedOldest");
-  const savedNewestLabel = useUiLabel("savedNewest");
-  const savedOldestLabel = useUiLabel("savedOldest");
-  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
-  const value = controlledValue ?? uncontrolledValue;
-  const options = children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx3("option", { value: "updatedAt:desc", children: updatedNewestLabel }),
-    /* @__PURE__ */ jsx3("option", { value: "updatedAt:asc", children: updatedOldestLabel }),
-    /* @__PURE__ */ jsx3("option", { value: "savedAt:desc", children: savedNewestLabel }),
-    /* @__PURE__ */ jsx3("option", { value: "savedAt:asc", children: savedOldestLabel })
-  ] });
-  return /* @__PURE__ */ jsx3(
-    "select",
-    {
-      ...props,
-      value,
-      "aria-label": ariaLabel ?? label,
-      onChange: (event) => {
-        const nextValue = event.currentTarget.value;
-        if (controlledValue === void 0) setUncontrolledValue(nextValue);
-        const [by, direction] = nextValue.split(":");
-        onValueChange?.(nextValue, { by, direction });
-      },
-      children: options
-    }
-  );
-}
-function KeepPagination({
-  totalCount,
-  pageSize,
-  page = 1,
-  maxPageButtons = 7,
-  onPageChange,
+// src/KeepBulkActions.tsx
+import { Fragment, jsx as jsx4, jsxs } from "react/jsx-runtime";
+function KeepBulkActions({
+  query,
+  selectedIds: controlledSelectedIds,
+  defaultSelectedIds = [],
+  onSelectedIdsChange,
+  renderItem,
+  onCompleted,
   render,
+  children,
   ...props
 }) {
-  const previousPageLabel = useUiLabel("previousPage");
-  const nextPageLabel = useUiLabel("nextPage");
-  const pageLabel = useUiLabel("page");
-  const paginationLabel = useUiLabel("pagination");
-  const pageCount = Math.max(1, Math.ceil(totalCount / Math.max(1, pageSize)));
-  const currentPage = Math.min(Math.max(1, page), pageCount);
-  const goToPage = (nextPage) => {
-    const next = Math.min(Math.max(1, nextPage), pageCount);
-    onPageChange?.(next, (next - 1) * pageSize);
+  const selectItemsLabel = useUiLabel("selectItems");
+  const selectedCountLabel = useUiLabel("selectedCount");
+  const deleteSelectedLabel = useUiLabel("deleteSelected");
+  const tagsLabel = useUiLabel("tagsToApply");
+  const applyTagsLabel = useUiLabel("applyTags");
+  const list = useKeepList(query);
+  const [uncontrolledSelectedIds, setUncontrolledSelectedIds] = useState(defaultSelectedIds);
+  const selectedIds = controlledSelectedIds ?? uncontrolledSelectedIds;
+  const selected = new Set(selectedIds);
+  const [tagsInput, setTagsInput] = useState("");
+  const setSelectedIds = (ids) => {
+    if (controlledSelectedIds === void 0) setUncontrolledSelectedIds(ids);
+    onSelectedIdsChange?.(ids);
   };
-  const navProps = { ...props, "aria-label": props["aria-label"] ?? paginationLabel };
-  if (render) return /* @__PURE__ */ jsx3("nav", { ...navProps, children: render({ page: currentPage, pageCount, goToPage }) });
-  const visiblePages = getVisiblePages(currentPage, pageCount, Math.max(1, maxPageButtons));
-  return /* @__PURE__ */ jsxs("nav", { ...navProps, children: [
-    /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => goToPage(currentPage - 1), disabled: currentPage <= 1, children: previousPageLabel }),
-    visiblePages.map((nextPage) => /* @__PURE__ */ jsx3(
+  const toggle = (id) => setSelectedIds(selected.has(id) ? selectedIds.filter((current) => current !== id) : [...selectedIds, id]);
+  const allSelected = list.items.length > 0 && list.items.every((item) => selected.has(item.id));
+  const toggleAll = () => setSelectedIds(allSelected ? [] : list.items.map((item) => item.id));
+  const remove = async () => {
+    const ids = [...selectedIds];
+    await list.removeBatch(ids);
+    onCompleted?.("remove", ids);
+    setSelectedIds([]);
+  };
+  const updateTags = async () => {
+    const ids = [...selectedIds];
+    await list.updateTagsBatch(ids, normalizeUiTags(tagsInput.split(",")));
+    onCompleted?.("tags", ids);
+    setSelectedIds([]);
+  };
+  const state = {
+    items: list.items,
+    selectedIds,
+    selectedCount: selectedIds.length,
+    allSelected,
+    tagsInput,
+    setTagsInput,
+    toggle,
+    toggleAll,
+    remove,
+    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 }),
+        selectedIds.length,
+        " ",
+        selectedCountLabel
+      ] }),
+      list.items.map((item) => /* @__PURE__ */ jsxs("span", { children: [
+        /* @__PURE__ */ jsx4(
+          KeepItemCheckbox,
+          {
+            item,
+            checked: selected.has(item.id),
+            onCheckedChange: () => toggle(item.id)
+          }
+        ),
+        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: [
+      tagsLabel,
+      /* @__PURE__ */ jsx4("input", { value: tagsInput, onChange: (event) => setTagsInput(event.currentTarget.value) })
+    ] }),
+    /* @__PURE__ */ jsx4(
       "button",
       {
         type: "button",
-        "aria-current": nextPage === currentPage ? "page" : void 0,
-        "aria-label": `${pageLabel} ${nextPage}`,
-        onClick: () => goToPage(nextPage),
-        children: nextPage
-      },
-      nextPage
-    )),
-    /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => goToPage(currentPage + 1), disabled: currentPage >= pageCount, children: nextPageLabel })
+        onClick: () => void updateTags(),
+        disabled: selectedIds.length === 0 || list.isMutating,
+        children: applyTagsLabel
+      }
+    )
   ] });
-}
-function getVisiblePages(currentPage, pageCount, maxPageButtons) {
-  if (pageCount <= maxPageButtons) return Array.from({ length: pageCount }, (_, index) => index + 1);
-  const half = Math.floor(maxPageButtons / 2);
-  const start = Math.min(Math.max(1, currentPage - half), pageCount - maxPageButtons + 1);
-  return Array.from({ length: maxPageButtons }, (_, index) => start + index);
+  return /* @__PURE__ */ jsx4("section", { ...props, "aria-busy": list.isMutating || props["aria-busy"], children: body });
 }
 
-// src/index.tsx
-import { KeepProvider, useKeepContext as useKeepContext2, useKeepItem as useKeepItem2, useKeepList as useKeepList2, useKeepShortcut } from "@keepkit/core/react";
+// src/KeepButton.tsx
 import {
-  createBrowserStorageAdapter,
-  createStorageAdapter,
-  FallbackStorageAdapter,
-  IndexedDBAdapter,
-  IndexedDBSyncQueueAdapter,
-  LocalStorageAdapter,
-  LocalStorageSyncQueueAdapter,
-  SyncStorageAdapter
-} from "@keepkit/core/storage";
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-function KeepKitProvider({
-  labels,
-  locale,
-  labelResolver,
-  children,
-  ...providerProps
-}) {
-  return /* @__PURE__ */ jsx4(KeepUiProvider, { labels, locale, labelResolver, children: /* @__PURE__ */ jsxs2(CoreKeepProvider, { ...providerProps, children: [
-    children,
-    /* @__PURE__ */ jsx4(KeepAnnouncements, {})
-  ] }) });
-}
-function createKeepKit(options = {}) {
-  const { labels, locale, labelResolver, getTitle, getImageProps, ...coreOptions } = options;
-  const coreKit = createCoreKeepKit(coreOptions);
-  return {
-    Provider: (props) => /* @__PURE__ */ jsx4(
-      KeepKitProvider,
-      {
-        ...coreOptions,
-        labels,
-        locale,
-        labelResolver,
-        ...props
-      }
-    ),
-    Button: (props) => /* @__PURE__ */ jsx4(KeepButton, { ...props }),
-    Collection: (props) => /* @__PURE__ */ jsx4(
-      KeepCollection,
-      {
-        ...props,
-        itemCardProps: {
-          ...getTitle ? { getTitle } : {},
-          ...getImageProps ? { getImageProps } : {},
-          ...props.itemCardProps
-        }
-      }
-    ),
-    useContext: () => coreKit.useContext(),
-    useItem: (item) => coreKit.useItem(item),
-    useList: (query) => coreKit.useList(query),
-    useShortcut: (shortcutOptions) => coreKit.useShortcut(shortcutOptions)
-  };
-}
+  KeepButton as CoreKeepButton,
+  useKeepItem
+} from "@keepkit/core/react";
+import { Fragment as Fragment2, jsx as jsx5 } 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);
@@ -297,22 +245,6 @@ function KeepButton({ labels, ...props }) {
     if (props.children !== void 0) return props.children;
     return state.isSaved ? labels?.saved ?? savedLabel : labels?.unsaved ?? saveLabel;
   };
-  if (props.asChild === true) {
-    const sharedProps2 = {
-      ...props,
-      "aria-busy": props["aria-busy"] ?? (buttonState.isLoading || buttonState.isMutating),
-      savedLabel: labels?.saved ?? props.savedLabel ?? savedLabel,
-      unsavedLabel: labels?.unsaved ?? props.unsavedLabel ?? saveLabel,
-      savedAriaLabel: labels?.savedAriaLabel ?? props.savedAriaLabel,
-      unsavedAriaLabel: labels?.unsavedAriaLabel ?? props.unsavedAriaLabel
-    };
-    if (!customStateLabel) return /* @__PURE__ */ jsx4(CoreKeepButton, { ...sharedProps2 });
-    const statefulProps2 = {
-      ...sharedProps2,
-      children: (state) => /* @__PURE__ */ jsx4(Fragment2, { children: getStateContent(state) })
-    };
-    return /* @__PURE__ */ jsx4(CoreKeepButton, { ...statefulProps2 });
-  }
   const sharedProps = {
     ...props,
     "aria-busy": props["aria-busy"] ?? (buttonState.isLoading || buttonState.isMutating),
@@ -321,10 +253,22 @@ function KeepButton({ labels, ...props }) {
     savedAriaLabel: labels?.savedAriaLabel ?? props.savedAriaLabel,
     unsavedAriaLabel: labels?.unsavedAriaLabel ?? props.unsavedAriaLabel
   };
-  if (!customStateLabel) return /* @__PURE__ */ jsx4(CoreKeepButton, { ...sharedProps });
-  const statefulProps = { ...sharedProps, children: (state) => getStateContent(state) };
-  return /* @__PURE__ */ jsx4(CoreKeepButton, { ...statefulProps });
+  if (!customStateLabel) return /* @__PURE__ */ jsx5(CoreKeepButton, { ...sharedProps });
+  return /* @__PURE__ */ jsx5(CoreKeepButton, { ...sharedProps, children: (state) => /* @__PURE__ */ jsx5(Fragment2, { children: getStateContent(state) }) });
 }
+
+// src/KeepCollection.tsx
+import { useKeepList as useKeepList4 } from "@keepkit/core/react";
+import { useMemo as useMemo3, useState as useState4 } from "react";
+
+// src/KeepList.tsx
+import { useKeepList as useKeepList2 } from "@keepkit/core/react";
+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";
 function KeepItemCard({
   item,
   title,
@@ -346,8 +290,8 @@ function KeepItemCard({
 }) {
   const saveActionLabel = useUiLabel("save");
   const removeActionLabel = useUiLabel("remove");
-  const itemState = useKeepItem(item);
-  const contentChildren = asChild && isValidElement(children) ? void 0 : children;
+  const itemState = useKeepItem2(item);
+  const contentChildren = asChild && isValidElement2(children) ? void 0 : children;
   const state = {
     item,
     isSaved: itemState.isSaved,
@@ -365,10 +309,10 @@ function KeepItemCard({
       onRemoveError?.(error);
     }
   }
-  const body = render ? render(state) : typeof contentChildren === "function" ? contentChildren(state) : contentChildren ?? /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    imageProps ? renderImage?.({ ...imageProps, alt: imageAlt ?? imageProps.alt }, item) ?? (ImageComponent ? /* @__PURE__ */ jsx4(ImageComponent, { ...imageProps, alt: imageAlt ?? imageProps.alt }) : /* @__PURE__ */ jsx4("img", { ...imageProps, alt: imageAlt ?? imageProps.alt })) : null,
-    /* @__PURE__ */ jsx4("h3", { children: resolvedTitle }),
-    showSaveButton ? /* @__PURE__ */ jsx4(
+  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(
       KeepButton,
       {
         item: toKeepButtonItem(item),
@@ -376,16 +320,19 @@ function KeepItemCard({
         getAriaLabel: (buttonState) => `${buttonState.isSaved ? removeActionLabel : saveActionLabel} ${String(resolvedTitle)}`
       }
     ) : null,
-    /* @__PURE__ */ jsx4("button", { type: "button", onClick: () => void handleRemove(), disabled: itemState.isMutating, children: removeLabel ?? removeActionLabel })
+    /* @__PURE__ */ jsx6("button", { type: "button", onClick: () => void handleRemove(), disabled: itemState.isMutating, children: removeLabel ?? removeActionLabel })
   ] });
   return renderRoot(
     asChild,
-    isValidElement(children) ? children : void 0,
+    isValidElement2(children) ? children : void 0,
     { ...rootProps, className, "aria-busy": itemState.isMutating || rootProps["aria-busy"] },
     body,
     "KeepItemCard"
   );
 }
+
+// src/KeepList.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
 function KeepList({
   query,
   children,
@@ -401,7 +348,7 @@ function KeepList({
   const defaultLoading = useUiLabel("loadingItems");
   const defaultEmpty = useUiLabel("noItems");
   const defaultError = useUiLabel("errorItems");
-  const state = useKeepList(query);
+  const state = useKeepList2(query);
   const body = getListBody(state, {
     children,
     renderItem,
@@ -410,26 +357,209 @@ function KeepList({
     error: errorContent ?? defaultError,
     itemCardProps
   });
-  const root = asChild && isValidElement(children) ? children : void 0;
   return renderRoot(
     asChild,
-    root,
+    asChild && isValidElement3(children) ? children : void 0,
     { ...rootProps, className, "aria-busy": state.isLoading || rootProps["aria-busy"] },
     body,
     "KeepList"
   );
 }
-function getListBody(state, options) {
-  if (state.error && state.items.length === 0) return resolveContent(options.error, state);
-  if (state.isLoading && !state.isHydrated) return resolveContent(options.loading, state);
-  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 && !isValidElement(options.children)) return options.children;
-  const items = state.items.map(
-    (item) => options.renderItem ? options.renderItem(item, state) : /* @__PURE__ */ jsx4("li", { children: /* @__PURE__ */ jsx4(KeepItemCard, { item, ...options.itemCardProps }) }, item.id)
-  );
-  return /* @__PURE__ */ jsx4("ul", { children: items });
+function getListBody(state, options) {
+  if (state.error && state.items.length === 0) return resolveContent(options.error, state);
+  if (state.isLoading && !state.isHydrated) return resolveContent(options.loading, state);
+  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)
+  ) });
+}
+
+// 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";
+function KeepTagFilter({
+  query,
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  onValueChange,
+  allLabel,
+  ariaLabel,
+  renderTag,
+  render,
+  children,
+  asChild = false,
+  className,
+  ...rootProps
+}) {
+  const uiAllLabel = useUiLabel("allTags");
+  const uiAriaLabel = useUiLabel("filterTags");
+  const [uncontrolledValue, setUncontrolledValue] = useState2(defaultValue);
+  const resolvedValue = controlledValue ?? uncontrolledValue;
+  const list = useKeepList3({
+    ...query,
+    tags: resolvedValue ? [...query?.tags ?? [], resolvedValue] : query?.tags
+  });
+  const select = useCallback(
+    (tag) => {
+      if (controlledValue === void 0) setUncontrolledValue(tag);
+      onChange?.(tag);
+      onValueChange?.(tag);
+    },
+    [controlledValue, onChange, onValueChange]
+  );
+  const state = useMemo2(
+    () => ({ tags: list.tags, tagCounts: list.tagCounts, value: resolvedValue, select }),
+    [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: [
+      renderTag ? renderTag(tag, list.tagCounts[tag] ?? 0, resolvedValue === tag) : tag,
+      /* @__PURE__ */ jsxs3("span", { children: [
+        " (",
+        list.tagCounts[tag] ?? 0,
+        ")"
+      ] })
+    ] }, tag))
+  ] });
+  return renderRoot(
+    asChild,
+    isValidElement4(children) ? children : void 0,
+    { ...rootProps, className },
+    body,
+    "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";
+function KeepSearchInput({
+  value: controlledValue,
+  defaultValue = "",
+  debounceMs = 300,
+  onValueChange,
+  "aria-label": ariaLabel,
+  placeholder,
+  ...props
+}) {
+  const label = useUiLabel("search");
+  const [uncontrolledValue, setUncontrolledValue] = useState3(defaultValue);
+  const value = controlledValue ?? uncontrolledValue;
+  useEffect(() => {
+    if (!onValueChange) return;
+    if (debounceMs <= 0) {
+      onValueChange(value);
+      return;
+    }
+    const timer = window.setTimeout(() => onValueChange(value), debounceMs);
+    return () => window.clearTimeout(timer);
+  }, [debounceMs, onValueChange, value]);
+  return /* @__PURE__ */ jsx9(
+    "input",
+    {
+      ...props,
+      type: "search",
+      value,
+      "aria-label": ariaLabel ?? label,
+      placeholder: placeholder ?? label,
+      onChange: (event) => {
+        const nextValue = event.currentTarget.value;
+        if (controlledValue === void 0) setUncontrolledValue(nextValue);
+      }
+    }
+  );
+}
+function KeepSortSelect({
+  value: controlledValue,
+  defaultValue = "updatedAt:desc",
+  onValueChange,
+  "aria-label": ariaLabel,
+  children,
+  ...props
+}) {
+  const label = useUiLabel("sort");
+  const updatedNewestLabel = useUiLabel("updatedNewest");
+  const updatedOldestLabel = useUiLabel("updatedOldest");
+  const savedNewestLabel = useUiLabel("savedNewest");
+  const savedOldestLabel = useUiLabel("savedOldest");
+  const [uncontrolledValue, setUncontrolledValue] = useState3(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 })
+  ] });
+  return /* @__PURE__ */ jsx9(
+    "select",
+    {
+      ...props,
+      value,
+      "aria-label": ariaLabel ?? label,
+      onChange: (event) => {
+        const nextValue = event.currentTarget.value;
+        if (controlledValue === void 0) setUncontrolledValue(nextValue);
+        const [by, direction] = nextValue.split(":");
+        onValueChange?.(nextValue, { by, direction });
+      },
+      children: options
+    }
+  );
+}
+function KeepPagination({
+  totalCount,
+  pageSize,
+  page = 1,
+  maxPageButtons = 7,
+  onPageChange,
+  render,
+  ...props
+}) {
+  const previousPageLabel = useUiLabel("previousPage");
+  const nextPageLabel = useUiLabel("nextPage");
+  const pageLabel = useUiLabel("page");
+  const paginationLabel = useUiLabel("pagination");
+  const pageCount = Math.max(1, Math.ceil(totalCount / Math.max(1, pageSize)));
+  const currentPage = Math.min(Math.max(1, page), pageCount);
+  const goToPage = (nextPage) => {
+    const next = Math.min(Math.max(1, nextPage), pageCount);
+    onPageChange?.(next, (next - 1) * pageSize);
+  };
+  const navProps = { ...props, "aria-label": props["aria-label"] ?? paginationLabel };
+  if (render) return /* @__PURE__ */ jsx9("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(
+      "button",
+      {
+        type: "button",
+        "aria-current": nextPage === currentPage ? "page" : void 0,
+        "aria-label": `${pageLabel} ${nextPage}`,
+        onClick: () => goToPage(nextPage),
+        children: nextPage
+      },
+      nextPage
+    )),
+    /* @__PURE__ */ jsx9("button", { type: "button", onClick: () => goToPage(currentPage + 1), disabled: currentPage >= pageCount, children: nextPageLabel })
+  ] });
+}
+function getVisiblePages(currentPage, pageCount, maxPageButtons) {
+  if (pageCount <= maxPageButtons) return Array.from({ length: pageCount }, (_, index) => index + 1);
+  const half = Math.floor(maxPageButtons / 2);
+  const start = Math.min(Math.max(1, currentPage - half), pageCount - maxPageButtons + 1);
+  return Array.from({ length: maxPageButtons }, (_, index) => start + index);
 }
+
+// src/KeepCollection.tsx
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 function KeepCollection({
   query = {},
   pageSize = 20,
@@ -450,12 +580,12 @@ function KeepCollection({
     bulkActions: false,
     ...features
   };
-  const [searchValue, setSearchValue] = useState2(query.search?.query ?? "");
-  const [sort, setSort] = useState2(query.sort ?? { by: "updatedAt", direction: "desc" });
-  const [tag, setTag] = useState2(query.tags?.[0]);
-  const [page, setPage] = useState2(query.pagination?.page ?? 1);
+  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 resolvedPageSize = query.pagination?.pageSize ?? pageSize;
-  const resolvedQuery = useMemo2(
+  const resolvedQuery = useMemo3(
     () => ({
       ...query,
       search: enabled.search ? { ...query.search, query: searchValue } : query.search,
@@ -465,25 +595,48 @@ function KeepCollection({
     }),
     [enabled.pagination, enabled.search, enabled.sort, page, query, resolvedPageSize, searchValue, sort, tag]
   );
-  const list = useKeepList(resolvedQuery);
-  useEffect2(() => {
-    if (searchValue !== void 0 || sort.by !== void 0 || sort.direction !== void 0 || tag !== void 0) {
-      setPage(1);
-    }
-  }, [searchValue, sort.by, sort.direction, tag]);
-  return /* @__PURE__ */ jsxs2(
+  const list = useKeepList4(resolvedQuery);
+  return /* @__PURE__ */ jsxs5(
     "section",
     {
       ...rootProps,
       className,
       "aria-busy": list.isLoading || list.isMutating || rootProps["aria-busy"],
       children: [
-        /* @__PURE__ */ jsxs2("div", { children: [
-          enabled.search ? /* @__PURE__ */ jsx4(KeepSearchInput, { value: searchValue, onValueChange: setSearchValue }) : null,
-          enabled.sort ? /* @__PURE__ */ jsx4(KeepSortSelect, { value: sortToValue(sort), onValueChange: (_value, nextSort) => setSort(nextSort) }) : null,
-          enabled.tagFilter ? /* @__PURE__ */ jsx4(KeepTagFilter, { query, value: tag, onValueChange: setTag }) : null
+        /* @__PURE__ */ jsxs5("div", { children: [
+          enabled.search ? /* @__PURE__ */ jsx10(
+            KeepSearchInput,
+            {
+              value: searchValue,
+              onValueChange: (value) => {
+                setSearchValue(value);
+                setPage(1);
+              }
+            }
+          ) : null,
+          enabled.sort ? /* @__PURE__ */ jsx10(
+            KeepSortSelect,
+            {
+              value: sortToValue(sort),
+              onValueChange: (_value, nextSort) => {
+                setSort(nextSort);
+                setPage(1);
+              }
+            }
+          ) : null,
+          enabled.tagFilter ? /* @__PURE__ */ jsx10(
+            KeepTagFilter,
+            {
+              query,
+              value: tag,
+              onValueChange: (value) => {
+                setTag(value);
+                setPage(1);
+              }
+            }
+          ) : null
         ] }),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx10(
           KeepList,
           {
             query: resolvedQuery,
@@ -494,80 +647,37 @@ function KeepCollection({
             error
           }
         ),
-        enabled.pagination ? /* @__PURE__ */ jsx4(
+        enabled.pagination ? /* @__PURE__ */ jsx10(
           KeepPagination,
           {
             totalCount: list.totalCount,
             pageSize: resolvedPageSize,
             page: list.page,
-            onPageChange: (_nextPage, nextPageOffset) => setPage(Math.floor(nextPageOffset / resolvedPageSize) + 1)
+            onPageChange: (nextPage) => setPage(nextPage)
           }
         ) : null,
-        enabled.bulkActions ? /* @__PURE__ */ jsx4(KeepBulkActions, { query: resolvedQuery }) : null
+        enabled.bulkActions ? /* @__PURE__ */ jsx10(KeepBulkActions, { query: resolvedQuery }) : null
       ]
     }
   );
 }
-function KeepTagFilter({
-  query,
-  value: controlledValue,
-  defaultValue,
-  onChange,
-  onValueChange,
-  allLabel,
-  ariaLabel,
-  renderTag,
-  render,
-  children,
-  asChild = false,
-  className,
-  ...rootProps
-}) {
-  const uiAllLabel = useUiLabel("allTags");
-  const uiAriaLabel = useUiLabel("filterTags");
-  const defaultAllLabel = allLabel ?? uiAllLabel;
-  const defaultAriaLabel = ariaLabel ?? uiAriaLabel;
-  const contentChildren = asChild && isValidElement(children) ? void 0 : children;
-  const [uncontrolledValue, setUncontrolledValue] = useState2(defaultValue);
-  const value = controlledValue ?? uncontrolledValue;
-  const list = useKeepList({ ...query, tags: value ? [...query?.tags ?? [], value] : query?.tags });
-  const select = useCallback(
-    (tag) => {
-      if (controlledValue === void 0) setUncontrolledValue(tag);
-      onChange?.(tag);
-      onValueChange?.(tag);
-    },
-    [controlledValue, onChange, onValueChange]
-  );
-  const state = useMemo2(
-    () => ({ tags: list.tags, tagCounts: list.tagCounts, value, select }),
-    [list.tagCounts, list.tags, select, value]
-  );
-  const body = render ? render(state) : typeof contentChildren === "function" ? contentChildren(state) : contentChildren ?? /* @__PURE__ */ jsxs2("fieldset", { children: [
-    /* @__PURE__ */ jsx4("legend", { children: defaultAriaLabel }),
-    /* @__PURE__ */ jsx4("button", { type: "button", "aria-pressed": value === void 0, onClick: () => select(), children: defaultAllLabel }),
-    list.tags.map((tag) => /* @__PURE__ */ jsxs2("button", { type: "button", "aria-pressed": value === tag, onClick: () => select(tag), children: [
-      renderTag ? renderTag(tag, list.tagCounts[tag] ?? 0, value === tag) : tag,
-      /* @__PURE__ */ jsxs2("span", { children: [
-        " (",
-        list.tagCounts[tag] ?? 0,
-        ")"
-      ] })
-    ] }, tag))
-  ] });
-  return renderRoot(
-    asChild,
-    isValidElement(children) ? children : void 0,
-    { ...rootProps, className },
-    body,
-    "KeepTagFilter"
-  );
-}
+
+// src/KeepNoteEditor.tsx
+import { useKeepItem as useKeepItem3 } from "@keepkit/core/react";
+import {
+  isValidElement as isValidElement5,
+  useCallback as useCallback2,
+  useEffect as useEffect2,
+  useRef,
+  useState as useState5
+} from "react";
+import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 function KeepNoteEditor({
   item,
   label,
   saveLabel,
   placeholder,
+  debounceMs = 300,
   onSaved,
   onSaveError,
   render,
@@ -578,68 +688,89 @@ function KeepNoteEditor({
 }) {
   const defaultLabel = useUiLabel("note");
   const defaultSaveLabel = useUiLabel("saveNote");
-  const itemState = useKeepItem(item);
-  const contentChildren = asChild && isValidElement(children) ? void 0 : children;
-  const [note, setNote] = useState2(item.note ?? "");
-  useEffect2(() => setNote(itemState.item?.note ?? item.note ?? ""), [item.note, itemState.item?.note]);
-  const save = useCallback(async () => {
+  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 baselineNote = savedItem?.note ?? item.note ?? "";
+  const isDirty = note !== baselineNote;
+  const lastSavedNoteRef = useRef(void 0);
+  useEffect2(() => setNote(baselineNote), [baselineNote]);
+  const save = useCallback2(async () => {
     const nextNote = note.trim() || void 0;
     try {
-      await itemState.updateNote(nextNote);
+      await updateNote(nextNote);
+      lastSavedNoteRef.current = note;
       onSaved?.(nextNote);
-    } catch (error) {
-      onSaveError?.(error);
-      throw error;
+    } catch (error2) {
+      onSaveError?.(error2);
+      throw error2;
     }
-  }, [itemState, note, onSaveError, onSaved]);
+  }, [note, onSaveError, onSaved, updateNote]);
+  useEffect2(() => {
+    if (!isDirty || debounceMs <= 0 || lastSavedNoteRef.current === note) return;
+    const timer = window.setTimeout(() => void save().catch(() => void 0), debounceMs);
+    return () => window.clearTimeout(timer);
+  }, [debounceMs, isDirty, note, save]);
   const state = {
     item,
     note,
     setNote,
-    isDirty: note !== (itemState.item?.note ?? item.note ?? ""),
-    isSaving: itemState.isMutating,
-    error: itemState.error,
+    isDirty,
+    isSaving: isMutating,
+    error,
     save
   };
-  const body = render ? render(state) : typeof contentChildren === "function" ? contentChildren(state) : contentChildren ?? /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsxs2("label", { children: [
+  const body = render ? render(state) : typeof contentChildren === "function" ? contentChildren(state) : contentChildren ?? /* @__PURE__ */ jsxs6(Fragment5, { children: [
+    /* @__PURE__ */ jsxs6("label", { children: [
       label ?? defaultLabel,
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx11(
         "textarea",
         {
           value: note,
           onChange: (event) => setNote(event.currentTarget.value),
           placeholder,
-          disabled: itemState.isMutating
+          disabled: isMutating,
+          onKeyDown: (event) => {
+            if (event.key === "Enter" && (event.ctrlKey || event.metaKey)) {
+              event.preventDefault();
+              void save().catch(() => void 0);
+            }
+          }
         }
       )
     ] }),
-    /* @__PURE__ */ jsx4("button", { type: "submit", disabled: itemState.isMutating, "aria-busy": itemState.isMutating, children: saveLabel ?? defaultSaveLabel })
+    /* @__PURE__ */ jsx11("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__ */ jsx4(
+    return /* @__PURE__ */ jsx11(
       "form",
       {
         ...formProps,
         className,
         onSubmit: handleSubmit,
-        "aria-busy": itemState.isMutating || formProps["aria-busy"],
+        "aria-busy": isMutating || formProps["aria-busy"],
         children: body
       }
     );
   }
   return renderRoot(
     true,
-    isValidElement(children) ? children : void 0,
-    { ...formProps, className, onSubmit: handleSubmit, "aria-busy": itemState.isMutating || formProps["aria-busy"] },
+    isValidElement5(children) ? children : void 0,
+    { ...formProps, className, onSubmit: handleSubmit, "aria-busy": isMutating || formProps["aria-busy"] },
     body,
     "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";
 function KeepTagEditor({
   item,
   availableTags = [],
@@ -651,11 +782,11 @@ function KeepTagEditor({
   const tagsLabel = useUiLabel("tagsToApply");
   const removeLabel = useUiLabel("remove");
   const applyTagsLabel = useUiLabel("applyTags");
-  const itemState = useKeepItem(item);
-  const [tags, setTags] = useState2(item.tags ?? []);
-  const [input, setInput] = useState2("");
-  useEffect2(() => setTags(itemState.item?.tags ?? item.tags ?? []), [item.tags, itemState.item?.tags]);
-  const save = useCallback(async () => {
+  const itemState = useKeepItem4(item);
+  const [tags, setTags] = useState6(item.tags ?? []);
+  const [input, setInput] = useState6("");
+  useEffect3(() => setTags(itemState.item?.tags ?? item.tags ?? []), [item.tags, itemState.item?.tags]);
+  const save = useCallback3(async () => {
     const nextTags = normalizeUiTags(tags);
     try {
       await itemState.updateTags(nextTags);
@@ -667,14 +798,13 @@ function KeepTagEditor({
     }
   }, [itemState, onSaveError, onSaved, tags]);
   const addTag = (tag) => {
-    const next = normalizeUiTags([...tags, tag]);
-    setTags(next);
+    setTags(normalizeUiTags([...tags, tag]));
     setInput("");
   };
-  const body = render ? render({ tags, setTags, save, isSaving: itemState.isMutating }) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsxs2("label", { children: [
+  const body = render ? render({ tags, setTags, save, isSaving: itemState.isMutating }) : /* @__PURE__ */ jsxs7(Fragment6, { children: [
+    /* @__PURE__ */ jsxs7("label", { children: [
       tagsLabel,
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx12(
         "input",
         {
           value: input,
@@ -692,14 +822,14 @@ function KeepTagEditor({
         }
       )
     ] }),
-    availableTags.length > 0 ? /* @__PURE__ */ jsx4("datalist", { id: `keep-tags-${item.id}`, children: availableTags.map((tag) => /* @__PURE__ */ jsx4("option", { value: tag }, tag)) }) : null,
-    /* @__PURE__ */ jsx4("ul", { "aria-label": tagsLabel, children: tags.map((tag) => /* @__PURE__ */ jsxs2("li", { children: [
+    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: [
       tag,
-      /* @__PURE__ */ jsx4("button", { type: "button", onClick: () => setTags(tags.filter((current) => current !== tag)), children: removeLabel })
+      /* @__PURE__ */ jsx12("button", { type: "button", onClick: () => setTags(tags.filter((current) => current !== tag)), children: removeLabel })
     ] }, tag)) }),
-    /* @__PURE__ */ jsx4("button", { type: "submit", disabled: itemState.isMutating, "aria-busy": itemState.isMutating, children: applyTagsLabel })
+    /* @__PURE__ */ jsx12("button", { type: "submit", disabled: itemState.isMutating, "aria-busy": itemState.isMutating, children: applyTagsLabel })
   ] });
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx12(
     "form",
     {
       ...props,
@@ -712,96 +842,11 @@ function KeepTagEditor({
     }
   );
 }
-function KeepBulkActions({
-  query,
-  selectedIds: controlledSelectedIds,
-  defaultSelectedIds = [],
-  onSelectedIdsChange,
-  renderItem,
-  onCompleted,
-  render,
-  children,
-  ...props
-}) {
-  const selectItemsLabel = useUiLabel("selectItems");
-  const selectedCountLabel = useUiLabel("selectedCount");
-  const deleteSelectedLabel = useUiLabel("deleteSelected");
-  const tagsLabel = useUiLabel("tagsToApply");
-  const applyTagsLabel = useUiLabel("applyTags");
-  const list = useKeepList(query);
-  const [uncontrolledSelectedIds, setUncontrolledSelectedIds] = useState2(defaultSelectedIds);
-  const selectedIds = controlledSelectedIds ?? uncontrolledSelectedIds;
-  const selected = new Set(selectedIds);
-  const [tagsInput, setTagsInput] = useState2("");
-  const setSelectedIds = (ids) => {
-    if (controlledSelectedIds === void 0) setUncontrolledSelectedIds(ids);
-    onSelectedIdsChange?.(ids);
-  };
-  const toggle = (id) => setSelectedIds(selected.has(id) ? selectedIds.filter((current) => current !== id) : [...selectedIds, id]);
-  const allSelected = list.items.length > 0 && list.items.every((item) => selected.has(item.id));
-  const toggleAll = () => setSelectedIds(allSelected ? [] : list.items.map((item) => item.id));
-  const remove = async () => {
-    await list.removeBatch(selectedIds);
-    onCompleted?.("remove", selectedIds);
-    setSelectedIds([]);
-  };
-  const updateTags = async () => {
-    const tags = normalizeUiTags(tagsInput.split(","));
-    await list.updateTagsBatch(selectedIds, tags);
-    onCompleted?.("tags", selectedIds);
-    setSelectedIds([]);
-  };
-  const state = {
-    items: list.items,
-    selectedIds,
-    selectedCount: selectedIds.length,
-    allSelected,
-    tagsInput,
-    setTagsInput,
-    toggle,
-    toggleAll,
-    remove,
-    updateTags,
-    isMutating: list.isMutating
-  };
-  const body = render ? render(state) : typeof children === "function" ? children(state) : children ?? /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsxs2("fieldset", { children: [
-      /* @__PURE__ */ jsx4("legend", { children: selectItemsLabel }),
-      /* @__PURE__ */ jsxs2("label", { children: [
-        /* @__PURE__ */ jsx4("input", { type: "checkbox", checked: allSelected, onChange: toggleAll, "aria-label": selectItemsLabel }),
-        selectedIds.length,
-        " ",
-        selectedCountLabel
-      ] }),
-      list.items.map((item) => /* @__PURE__ */ jsxs2("span", { children: [
-        /* @__PURE__ */ jsx4(
-          KeepItemCheckbox,
-          {
-            item,
-            checked: selected.has(item.id),
-            onCheckedChange: () => toggle(item.id)
-          }
-        ),
-        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__ */ jsxs2("label", { children: [
-      tagsLabel,
-      /* @__PURE__ */ jsx4("input", { value: tagsInput, onChange: (event) => setTagsInput(event.currentTarget.value) })
-    ] }),
-    /* @__PURE__ */ jsx4(
-      "button",
-      {
-        type: "button",
-        onClick: () => void updateTags(),
-        disabled: selectedIds.length === 0 || list.isMutating,
-        children: applyTagsLabel
-      }
-    )
-  ] });
-  return /* @__PURE__ */ jsx4("section", { ...props, "aria-busy": list.isMutating || props["aria-busy"], children: body });
-}
+
+// 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";
 function KeepEmptyState({
   title,
   description,
@@ -812,10 +857,10 @@ function KeepEmptyState({
   ...rootProps
 }) {
   const defaultTitle = useUiLabel("noItems").replace(/\.$/, "");
-  const contentChildren = asChild && isValidElement(children) ? void 0 : children;
-  const body = contentChildren ?? /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx4("h2", { children: title ?? defaultTitle }),
-    description ? /* @__PURE__ */ jsx4("p", { children: description }) : null,
+  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,
     action
   ] });
   return renderRoot(asChild, children, { ...rootProps, className }, body, "KeepEmptyState");
@@ -830,7 +875,7 @@ function KeepStatus({
   ...rootProps
 }) {
   const context = useKeepContext();
-  const contentChildren = asChild && isValidElement(children) ? void 0 : children;
+  const contentChildren = asChild && isValidElement6(children) ? void 0 : children;
   const resolvedStatus = status ?? getDerivedStatus(context);
   const defaultLabel = useUiLabel(getStatusLabelKey(resolvedStatus));
   const state = {
@@ -843,7 +888,7 @@ function KeepStatus({
   const role = rootProps.role ?? (resolvedStatus === "error" ? "alert" : "status");
   return renderRoot(
     asChild,
-    isValidElement(children) ? children : void 0,
+    isValidElement6(children) ? children : void 0,
     { ...rootProps, className, role, "aria-live": rootProps["aria-live"] ?? "polite" },
     body,
     "KeepStatus"
@@ -854,9 +899,9 @@ function KeepAnnouncements({ messages, ...props }) {
   const savedMessage = useUiLabel("savedMessage", messages?.save);
   const removedMessage = useUiLabel("removedMessage", messages?.remove);
   const noteSavedMessage = useUiLabel("noteSavedMessage", messages?.note);
-  const [message, setMessage] = useState2("");
-  const lastChangeRef = useRef(void 0);
-  useEffect2(() => {
+  const [message, setMessage] = useState7("");
+  const lastChangeRef = useRef2(void 0);
+  useEffect4(() => {
     const change = context.lastChange;
     if (!change || change === lastChangeRef.current) return;
     lastChangeRef.current = change;
@@ -864,8 +909,9 @@ 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__ */ jsx4("div", { ...props, role: props.role ?? "status", "aria-live": props["aria-live"] ?? "polite", "aria-atomic": "true", children: message });
+  return /* @__PURE__ */ jsx13("div", { ...props, role: props.role ?? "status", "aria-live": props["aria-live"] ?? "polite", "aria-atomic": "true", children: message });
 }
+var KeepAnnouncer = KeepAnnouncements;
 function getDerivedStatus(context) {
   if (context.error) return "error";
   if (context.syncState.status === "pending" || context.syncState.status === "syncing") return "syncing";
@@ -882,41 +928,70 @@ function getStatusLabelKey(status) {
   if (status === "syncing") return "syncing";
   return "saved";
 }
-function resolveContent(content, state) {
-  return typeof content === "function" ? content(state) : content;
+
+// src/index.tsx
+import { KeepProvider, useKeepContext as useKeepContext2, useKeepItem as useKeepItem5, useKeepList as useKeepList5, useKeepShortcut } from "@keepkit/core/react";
+import {
+  createBrowserStorageAdapter,
+  createStorageAdapter,
+  FallbackStorageAdapter,
+  IndexedDBAdapter,
+  IndexedDBSyncQueueAdapter,
+  LocalStorageAdapter,
+  LocalStorageSyncQueueAdapter,
+  SyncStorageAdapter
+} from "@keepkit/core/storage";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+function KeepKitProvider({
+  labels,
+  locale,
+  labelResolver,
+  children,
+  ...providerProps
+}) {
+  return /* @__PURE__ */ jsx14(KeepUiProvider, { labels, locale, labelResolver, children: /* @__PURE__ */ jsxs9(CoreKeepProvider, { ...providerProps, children: [
+    children,
+    /* @__PURE__ */ jsx14(KeepAnnouncements, {})
+  ] }) });
 }
-function toKeepButtonItem(item) {
+function createKeepKit(options = {}) {
+  const { labels, locale, labelResolver, getTitle, getImageProps, ...coreOptions } = options;
+  const coreKit = createCoreKeepKit(coreOptions);
   return {
-    id: item.id,
-    meta: item.meta,
-    targetType: item.targetType,
-    note: item.note,
-    tags: item.tags
+    Provider: (props) => /* @__PURE__ */ jsx14(
+      KeepKitProvider,
+      {
+        ...coreOptions,
+        labels,
+        locale,
+        labelResolver,
+        ...props
+      }
+    ),
+    Button: (props) => /* @__PURE__ */ jsx14(KeepButton, { ...props }),
+    Collection: (props) => /* @__PURE__ */ jsx14(
+      KeepCollection,
+      {
+        ...props,
+        itemCardProps: {
+          ...getTitle ? { getTitle } : {},
+          ...getImageProps ? { getImageProps } : {},
+          ...props.itemCardProps
+        }
+      }
+    ),
+    useContext: () => coreKit.useContext(),
+    useItem: (item) => coreKit.useItem(item),
+    useList: (query) => coreKit.useList(query),
+    useShortcut: (shortcutOptions) => coreKit.useShortcut(shortcutOptions)
   };
 }
-function getMetaTitle(meta) {
-  if (typeof meta !== "object" || meta === null || !("title" in meta)) return void 0;
-  const title = meta.title;
-  return typeof title === "string" && title.trim() ? title.trim() : void 0;
-}
-function normalizeUiTags(tags) {
-  return [...new Set(tags.map((tag) => tag.trim()).filter(Boolean))];
-}
-function sortToValue(sort) {
-  return `${sort?.by ?? "updatedAt"}:${sort?.direction ?? "desc"}`;
-}
-function renderRoot(asChild, child, props, body, componentName) {
-  if (asChild) {
-    if (!isValidElement(child)) throw new Error(`${componentName} with asChild requires a single React element child.`);
-    return cloneElement(child, { ...props, children: body });
-  }
-  return /* @__PURE__ */ jsx4("div", { ...props, children: body });
-}
 export {
   FallbackStorageAdapter,
   IndexedDBAdapter,
   IndexedDBSyncQueueAdapter,
   KeepAnnouncements,
+  KeepAnnouncer,
   KeepBulkActions,
   KeepButton,
   KeepCollection,
@@ -941,8 +1016,8 @@ export {
   createKeepKit,
   createStorageAdapter,
   useKeepContext2 as useKeepContext,
-  useKeepItem2 as useKeepItem,
-  useKeepList2 as useKeepList,
+  useKeepItem5 as useKeepItem,
+  useKeepList5 as useKeepList,
   useKeepShortcut,
   useKeepUiLabels
 };