@keepkit/ui 0.4.0 → 0.6.0

package/dist/index.js

@@ -3,23 +3,57 @@
 // src/index.tsx
 import {
   KeepButton as CoreKeepButton,
+  KeepProvider as CoreKeepProvider,
+  createKeepKit as createCoreKeepKit,
   useKeepContext,
   useKeepItem,
   useKeepList
 } from "@keepkit/core/react";
 import {
   cloneElement,
-  createContext,
   isValidElement,
   useCallback,
-  useContext,
-  useEffect,
-  useMemo,
+  useEffect as useEffect2,
+  useMemo as useMemo2,
   useRef,
-  useState
+  useState as useState2
 } from "react";
-import { KeepProvider, useKeepContext as useKeepContext2, useKeepItem as useKeepItem2, useKeepList as useKeepList2 } from "@keepkit/core/react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+// src/KeepItemCheckbox.tsx
+import { jsx } from "react/jsx-runtime";
+function KeepItemCheckbox({
+  item,
+  checked = false,
+  label,
+  onCheckedChange,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const itemLabel = getItemLabel(item) ?? item.id;
+  const accessibleLabel = ariaLabel ?? (typeof label === "string" ? label : itemLabel);
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ...props,
+      type: "checkbox",
+      checked,
+      "aria-label": accessibleLabel,
+      onChange: (event) => onCheckedChange?.(event.currentTarget.checked)
+    }
+  );
+}
+function getItemLabel(item) {
+  if (typeof item.meta !== "object" || item.meta === null || !("title" in item.meta)) return void 0;
+  const title = item.meta.title;
+  return typeof title === "string" && title.trim() ? title.trim() : void 0;
+}
+
+// src/query-controls.tsx
+import { useEffect, useState } from "react";
+
+// src/ui-context.tsx
+import { createContext, useContext, useMemo } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var DEFAULT_LABELS = {
   save: "Save",
   saved: "Saved",
@@ -39,6 +73,10 @@ var DEFAULT_LABELS = {
   sort: "Sort saved items",
   newest: "Newest first",
   oldest: "Oldest first",
+  savedNewest: "Saved newest first",
+  savedOldest: "Saved oldest first",
+  updatedNewest: "Updated newest first",
+  updatedOldest: "Updated oldest first",
   previousPage: "Previous page",
   nextPage: "Next page",
   pagination: "Pagination",
@@ -58,7 +96,7 @@ function KeepUiProvider({ labels, locale, labelResolver, children }) {
     const resolved = { ...DEFAULT_LABELS, ...labels };
     return { locale, labels: resolved, labelResolver };
   }, [labelResolver, labels, locale]);
-  return /* @__PURE__ */ jsx(KeepUiLabelsContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx2(KeepUiLabelsContext.Provider, { value, children });
 }
 function useKeepUiLabels() {
   return useContext(KeepUiLabelsContext);
@@ -67,17 +105,190 @@ function useUiLabel(key, override) {
   const context = useKeepUiLabels();
   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,
+  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__ */ 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(
+      "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 })
+  ] });
+}
+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/index.tsx
+import { KeepProvider, useKeepContext as useKeepContext2, useKeepItem as useKeepItem2, useKeepList as useKeepList2, useKeepShortcut } from "@keepkit/core/react";
+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)
+  };
+}
 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);
   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.id, {
-    meta: props.item.meta,
-    targetType: props.item.targetType,
-    note: props.item.note,
-    tags: props.item.tags
-  });
+  const buttonState = useKeepItem(props.item);
   const customStateLabel = labels?.loading !== void 0 || labels?.error !== void 0;
   const getStateContent = (state) => {
     if (state.error) return labels?.error ?? errorLabel;
@@ -90,33 +301,34 @@ function KeepButton({ labels, ...props }) {
     const sharedProps2 = {
       ...props,
       "aria-busy": props["aria-busy"] ?? (buttonState.isLoading || buttonState.isMutating),
-      savedLabel: labels?.saved ?? savedLabel,
-      unsavedLabel: labels?.unsaved ?? saveLabel,
+      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__ */ jsx(CoreKeepButton, { ...sharedProps2 });
+    if (!customStateLabel) return /* @__PURE__ */ jsx4(CoreKeepButton, { ...sharedProps2 });
     const statefulProps2 = {
       ...sharedProps2,
-      children: (state) => /* @__PURE__ */ jsx(Fragment, { children: getStateContent(state) })
+      children: (state) => /* @__PURE__ */ jsx4(Fragment2, { children: getStateContent(state) })
     };
-    return /* @__PURE__ */ jsx(CoreKeepButton, { ...statefulProps2 });
+    return /* @__PURE__ */ jsx4(CoreKeepButton, { ...statefulProps2 });
   }
   const sharedProps = {
     ...props,
     "aria-busy": props["aria-busy"] ?? (buttonState.isLoading || buttonState.isMutating),
-    savedLabel: labels?.saved ?? savedLabel,
-    unsavedLabel: labels?.unsaved ?? saveLabel,
+    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__ */ jsx(CoreKeepButton, { ...sharedProps });
+  if (!customStateLabel) return /* @__PURE__ */ jsx4(CoreKeepButton, { ...sharedProps });
   const statefulProps = { ...sharedProps, children: (state) => getStateContent(state) };
-  return /* @__PURE__ */ jsx(CoreKeepButton, { ...statefulProps });
+  return /* @__PURE__ */ jsx4(CoreKeepButton, { ...statefulProps });
 }
 function KeepItemCard({
   item,
   title,
+  getTitle,
   getImageProps,
   imageComponent: ImageComponent,
   renderImage,
@@ -134,7 +346,7 @@ function KeepItemCard({
 }) {
   const saveActionLabel = useUiLabel("save");
   const removeActionLabel = useUiLabel("remove");
-  const itemState = useKeepItem(item.id);
+  const itemState = useKeepItem(item);
   const contentChildren = asChild && isValidElement(children) ? void 0 : children;
   const state = {
     item,
@@ -143,7 +355,7 @@ function KeepItemCard({
     error: itemState.error,
     remove: itemState.remove
   };
-  const resolvedTitle = typeof title === "function" ? title(item) : title ?? getMetaTitle(item.meta) ?? item.id;
+  const resolvedTitle = typeof title === "function" ? title(item) : title ?? getTitle?.(item) ?? getMetaTitle(item.meta) ?? item.id;
   const imageProps = getImageProps?.(item, resolvedTitle);
   async function handleRemove() {
     try {
@@ -153,10 +365,10 @@ function KeepItemCard({
       onRemoveError?.(error);
     }
   }
-  const body = render ? render(state) : typeof contentChildren === "function" ? contentChildren(state) : contentChildren ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-    imageProps ? renderImage?.({ ...imageProps, alt: imageAlt ?? imageProps.alt }, item) ?? (ImageComponent ? /* @__PURE__ */ jsx(ImageComponent, { ...imageProps, alt: imageAlt ?? imageProps.alt }) : /* @__PURE__ */ jsx("img", { ...imageProps, alt: imageAlt ?? imageProps.alt })) : null,
-    /* @__PURE__ */ jsx("h3", { children: resolvedTitle }),
-    showSaveButton ? /* @__PURE__ */ jsx(
+  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(
       KeepButton,
       {
         item: toKeepButtonItem(item),
@@ -164,7 +376,7 @@ function KeepItemCard({
         getAriaLabel: (buttonState) => `${buttonState.isSaved ? removeActionLabel : saveActionLabel} ${String(resolvedTitle)}`
       }
     ) : null,
-    /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void handleRemove(), disabled: itemState.isMutating, children: removeLabel ?? removeActionLabel })
+    /* @__PURE__ */ jsx4("button", { type: "button", onClick: () => void handleRemove(), disabled: itemState.isMutating, children: removeLabel ?? removeActionLabel })
   ] });
   return renderRoot(
     asChild,
@@ -175,7 +387,7 @@ function KeepItemCard({
   );
 }
 function KeepList({
-  options,
+  query,
   children,
   renderItem,
   loading,
@@ -189,7 +401,7 @@ function KeepList({
   const defaultLoading = useUiLabel("loadingItems");
   const defaultEmpty = useUiLabel("noItems");
   const defaultError = useUiLabel("errorItems");
-  const state = useKeepList(options);
+  const state = useKeepList(query);
   const body = getListBody(state, {
     children,
     renderItem,
@@ -214,12 +426,90 @@ function getListBody(state, options) {
   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__ */ jsx("li", { children: /* @__PURE__ */ jsx(KeepItemCard, { item, ...options.itemCardProps }) }, item.id)
+    (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 KeepCollection({
+  query = {},
+  pageSize = 20,
+  features,
+  renderItem,
+  itemCardProps,
+  loading,
+  empty,
+  error,
+  className,
+  ...rootProps
+}) {
+  const enabled = {
+    search: true,
+    sort: true,
+    pagination: true,
+    tagFilter: false,
+    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 resolvedPageSize = query.pagination?.pageSize ?? pageSize;
+  const resolvedQuery = useMemo2(
+    () => ({
+      ...query,
+      search: enabled.search ? { ...query.search, query: searchValue } : query.search,
+      sort: enabled.sort ? sort : query.sort,
+      tags: tag ? [.../* @__PURE__ */ new Set([...query.tags ?? [], tag])] : query.tags,
+      pagination: enabled.pagination ? { ...query.pagination, page, pageSize: resolvedPageSize } : query.pagination
+    }),
+    [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(
+    "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__ */ jsx4(
+          KeepList,
+          {
+            query: resolvedQuery,
+            renderItem,
+            itemCardProps,
+            loading,
+            empty,
+            error
+          }
+        ),
+        enabled.pagination ? /* @__PURE__ */ jsx4(
+          KeepPagination,
+          {
+            totalCount: list.totalCount,
+            pageSize: resolvedPageSize,
+            page: list.page,
+            onPageChange: (_nextPage, nextPageOffset) => setPage(Math.floor(nextPageOffset / resolvedPageSize) + 1)
+          }
+        ) : null,
+        enabled.bulkActions ? /* @__PURE__ */ jsx4(KeepBulkActions, { query: resolvedQuery }) : null
+      ]
+    }
   );
-  return /* @__PURE__ */ jsx("ul", { children: items });
 }
 function KeepTagFilter({
-  listOptions,
+  query,
   value: controlledValue,
   defaultValue,
   onChange,
@@ -237,10 +527,10 @@ function KeepTagFilter({
   const uiAriaLabel = useUiLabel("filterTags");
   const defaultAllLabel = allLabel ?? uiAllLabel;
   const defaultAriaLabel = ariaLabel ?? uiAriaLabel;
-  const list = useKeepList(listOptions);
   const contentChildren = asChild && isValidElement(children) ? void 0 : children;
-  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  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);
@@ -249,16 +539,16 @@ function KeepTagFilter({
     },
     [controlledValue, onChange, onValueChange]
   );
-  const state = useMemo(
+  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__ */ jsxs("fieldset", { children: [
-    /* @__PURE__ */ jsx("legend", { children: defaultAriaLabel }),
-    /* @__PURE__ */ jsx("button", { type: "button", "aria-pressed": value === void 0, onClick: () => select(), children: defaultAllLabel }),
-    list.tags.map((tag) => /* @__PURE__ */ jsxs("button", { type: "button", "aria-pressed": value === tag, onClick: () => select(tag), children: [
+  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__ */ jsxs("span", { children: [
+      /* @__PURE__ */ jsxs2("span", { children: [
         " (",
         list.tagCounts[tag] ?? 0,
         ")"
@@ -288,10 +578,10 @@ function KeepNoteEditor({
 }) {
   const defaultLabel = useUiLabel("note");
   const defaultSaveLabel = useUiLabel("saveNote");
-  const itemState = useKeepItem(item.id);
+  const itemState = useKeepItem(item);
   const contentChildren = asChild && isValidElement(children) ? void 0 : children;
-  const [note, setNote] = useState(item.note ?? "");
-  useEffect(() => setNote(itemState.item?.note ?? item.note ?? ""), [item.note, itemState.item?.note]);
+  const [note, setNote] = useState2(item.note ?? "");
+  useEffect2(() => setNote(itemState.item?.note ?? item.note ?? ""), [item.note, itemState.item?.note]);
   const save = useCallback(async () => {
     const nextNote = note.trim() || void 0;
     try {
@@ -311,10 +601,10 @@ function KeepNoteEditor({
     error: itemState.error,
     save
   };
-  const body = render ? render(state) : typeof contentChildren === "function" ? contentChildren(state) : contentChildren ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("label", { children: [
+  const body = render ? render(state) : typeof contentChildren === "function" ? contentChildren(state) : contentChildren ?? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsxs2("label", { children: [
       label ?? defaultLabel,
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx4(
         "textarea",
         {
           value: note,
@@ -324,14 +614,14 @@ function KeepNoteEditor({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("button", { type: "submit", disabled: itemState.isMutating, "aria-busy": itemState.isMutating, children: saveLabel ?? defaultSaveLabel })
+    /* @__PURE__ */ jsx4("button", { type: "submit", disabled: itemState.isMutating, "aria-busy": itemState.isMutating, children: saveLabel ?? defaultSaveLabel })
   ] });
   const handleSubmit = (event) => {
     event.preventDefault();
     void save().catch(() => void 0);
   };
   if (!asChild) {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx4(
       "form",
       {
         ...formProps,
@@ -350,100 +640,6 @@ function KeepNoteEditor({
     "KeepNoteEditor"
   );
 }
-function KeepSearchInput({
-  value: controlledValue,
-  defaultValue = "",
-  onValueChange,
-  "aria-label": ariaLabel,
-  placeholder,
-  ...props
-}) {
-  const label = useUiLabel("search");
-  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
-  const value = controlledValue ?? uncontrolledValue;
-  return /* @__PURE__ */ jsx(
-    "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);
-        onValueChange?.(nextValue);
-      }
-    }
-  );
-}
-function KeepSortSelect({
-  value: controlledValue,
-  defaultValue = "updatedAt:desc",
-  onValueChange,
-  "aria-label": ariaLabel,
-  children,
-  ...props
-}) {
-  const label = useUiLabel("sort");
-  const newestLabel = useUiLabel("newest");
-  const savedLabel = useUiLabel("saved");
-  const oldestLabel = useUiLabel("oldest");
-  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
-  const value = controlledValue ?? uncontrolledValue;
-  const options = children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("option", { value: "updatedAt:desc", children: newestLabel }),
-    /* @__PURE__ */ jsx("option", { value: "savedAt:desc", children: savedLabel }),
-    /* @__PURE__ */ jsx("option", { value: "updatedAt:asc", children: oldestLabel }),
-    /* @__PURE__ */ jsx("option", { value: "savedAt:asc", children: oldestLabel })
-  ] });
-  return /* @__PURE__ */ jsx(
-    "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,
-  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);
-  };
-  if (render) return /* @__PURE__ */ jsx("nav", { ...props, children: render({ page: currentPage, pageCount, goToPage }) });
-  return /* @__PURE__ */ jsxs("nav", { ...props, "aria-label": props["aria-label"] ?? paginationLabel, children: [
-    /* @__PURE__ */ jsx("button", { type: "button", onClick: () => goToPage(currentPage - 1), disabled: currentPage <= 1, children: previousPageLabel }),
-    /* @__PURE__ */ jsxs("span", { "aria-current": "page", children: [
-      pageLabel,
-      " ",
-      currentPage,
-      " / ",
-      pageCount
-    ] }),
-    /* @__PURE__ */ jsx("button", { type: "button", onClick: () => goToPage(currentPage + 1), disabled: currentPage >= pageCount, children: nextPageLabel })
-  ] });
-}
 function KeepTagEditor({
   item,
   availableTags = [],
@@ -455,10 +651,10 @@ function KeepTagEditor({
   const tagsLabel = useUiLabel("tagsToApply");
   const removeLabel = useUiLabel("remove");
   const applyTagsLabel = useUiLabel("applyTags");
-  const itemState = useKeepItem(item.id);
-  const [tags, setTags] = useState(item.tags ?? []);
-  const [input, setInput] = useState("");
-  useEffect(() => setTags(itemState.item?.tags ?? item.tags ?? []), [item.tags, itemState.item?.tags]);
+  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 nextTags = normalizeUiTags(tags);
     try {
@@ -475,10 +671,10 @@ function KeepTagEditor({
     setTags(next);
     setInput("");
   };
-  const body = render ? render({ tags, setTags, save, isSaving: itemState.isMutating }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("label", { children: [
+  const body = render ? render({ tags, setTags, save, isSaving: itemState.isMutating }) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsxs2("label", { children: [
       tagsLabel,
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx4(
         "input",
         {
           value: input,
@@ -488,19 +684,22 @@ function KeepTagEditor({
             if (event.key === "Enter") {
               event.preventDefault();
               if (input.trim()) addTag(input);
+            } else if (event.key === "Backspace" && input.length === 0 && tags.length > 0) {
+              event.preventDefault();
+              setTags(tags.slice(0, -1));
             }
           }
         }
       )
     ] }),
-    availableTags.length > 0 ? /* @__PURE__ */ jsx("datalist", { id: `keep-tags-${item.id}`, children: availableTags.map((tag) => /* @__PURE__ */ jsx("option", { value: tag }, tag)) }) : null,
-    /* @__PURE__ */ jsx("ul", { "aria-label": tagsLabel, children: tags.map((tag) => /* @__PURE__ */ jsxs("li", { children: [
+    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: [
       tag,
-      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setTags(tags.filter((current) => current !== tag)), children: removeLabel })
+      /* @__PURE__ */ jsx4("button", { type: "button", onClick: () => setTags(tags.filter((current) => current !== tag)), children: removeLabel })
     ] }, tag)) }),
-    /* @__PURE__ */ jsx("button", { type: "submit", disabled: itemState.isMutating, "aria-busy": itemState.isMutating, children: applyTagsLabel })
+    /* @__PURE__ */ jsx4("button", { type: "submit", disabled: itemState.isMutating, "aria-busy": itemState.isMutating, children: applyTagsLabel })
   ] });
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx4(
     "form",
     {
       ...props,
@@ -514,12 +713,14 @@ function KeepTagEditor({
   );
 }
 function KeepBulkActions({
-  listOptions,
+  query,
   selectedIds: controlledSelectedIds,
   defaultSelectedIds = [],
   onSelectedIdsChange,
   renderItem,
   onCompleted,
+  render,
+  children,
   ...props
 }) {
   const selectItemsLabel = useUiLabel("selectItems");
@@ -527,11 +728,11 @@ function KeepBulkActions({
   const deleteSelectedLabel = useUiLabel("deleteSelected");
   const tagsLabel = useUiLabel("tagsToApply");
   const applyTagsLabel = useUiLabel("applyTags");
-  const list = useKeepList(listOptions);
-  const [uncontrolledSelectedIds, setUncontrolledSelectedIds] = useState(defaultSelectedIds);
+  const list = useKeepList(query);
+  const [uncontrolledSelectedIds, setUncontrolledSelectedIds] = useState2(defaultSelectedIds);
   const selectedIds = controlledSelectedIds ?? uncontrolledSelectedIds;
   const selected = new Set(selectedIds);
-  const [tagsInput, setTagsInput] = useState("");
+  const [tagsInput, setTagsInput] = useState2("");
   const setSelectedIds = (ids) => {
     if (controlledSelectedIds === void 0) setUncontrolledSelectedIds(ids);
     onSelectedIdsChange?.(ids);
@@ -550,27 +751,56 @@ function KeepBulkActions({
     onCompleted?.("tags", selectedIds);
     setSelectedIds([]);
   };
-  return /* @__PURE__ */ jsxs("section", { ...props, "aria-busy": list.isMutating || props["aria-busy"], children: [
-    /* @__PURE__ */ jsxs("fieldset", { children: [
-      /* @__PURE__ */ jsx("legend", { children: selectItemsLabel }),
-      /* @__PURE__ */ jsxs("label", { children: [
-        /* @__PURE__ */ jsx("input", { type: "checkbox", checked: allSelected, onChange: toggleAll }),
+  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__ */ jsxs("label", { children: [
-        /* @__PURE__ */ jsx("input", { type: "checkbox", checked: selected.has(item.id), onChange: () => toggle(item.id) }),
+      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__ */ jsx("button", { type: "button", onClick: () => void remove(), disabled: selectedIds.length === 0 || list.isMutating, children: deleteSelectedLabel }),
-    /* @__PURE__ */ jsxs("label", { children: [
+    /* @__PURE__ */ jsx4("button", { type: "button", onClick: () => void remove(), disabled: selectedIds.length === 0 || list.isMutating, children: deleteSelectedLabel }),
+    /* @__PURE__ */ jsxs2("label", { children: [
       tagsLabel,
-      /* @__PURE__ */ jsx("input", { value: tagsInput, onChange: (event) => setTagsInput(event.currentTarget.value) })
+      /* @__PURE__ */ jsx4("input", { value: tagsInput, onChange: (event) => setTagsInput(event.currentTarget.value) })
     ] }),
-    /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void updateTags(), disabled: selectedIds.length === 0 || list.isMutating, children: applyTagsLabel })
+    /* @__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 });
 }
 function KeepEmptyState({
   title,
@@ -583,9 +813,9 @@ function KeepEmptyState({
 }) {
   const defaultTitle = useUiLabel("noItems").replace(/\.$/, "");
   const contentChildren = asChild && isValidElement(children) ? void 0 : children;
-  const body = contentChildren ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("h2", { children: title ?? defaultTitle }),
-    description ? /* @__PURE__ */ jsx("p", { children: description }) : null,
+  const body = contentChildren ?? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx4("h2", { children: title ?? defaultTitle }),
+    description ? /* @__PURE__ */ jsx4("p", { children: description }) : null,
     action
   ] });
   return renderRoot(asChild, children, { ...rootProps, className }, body, "KeepEmptyState");
@@ -624,9 +854,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] = useState("");
+  const [message, setMessage] = useState2("");
   const lastChangeRef = useRef(void 0);
-  useEffect(() => {
+  useEffect2(() => {
     const change = context.lastChange;
     if (!change || change === lastChangeRef.current) return;
     lastChangeRef.current = change;
@@ -634,7 +864,7 @@ function KeepAnnouncements({ messages, ...props }) {
     else if (change.action === "remove" || change.action === "removeBatch") setMessage(removedMessage);
     else if (change.action === "updateNote") setMessage(noteSavedMessage);
   }, [context.lastChange, noteSavedMessage, removedMessage, savedMessage]);
-  return /* @__PURE__ */ jsx("div", { ...props, role: props.role ?? "status", "aria-live": props["aria-live"] ?? "polite", "aria-atomic": "true", children: message });
+  return /* @__PURE__ */ jsx4("div", { ...props, role: props.role ?? "status", "aria-live": props["aria-live"] ?? "polite", "aria-atomic": "true", children: message });
 }
 function getDerivedStatus(context) {
   if (context.error) return "error";
@@ -672,19 +902,28 @@ function getMetaTitle(meta) {
 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__ */ jsx("div", { ...props, children: body });
+  return /* @__PURE__ */ jsx4("div", { ...props, children: body });
 }
 export {
+  FallbackStorageAdapter,
+  IndexedDBAdapter,
+  IndexedDBSyncQueueAdapter,
   KeepAnnouncements,
   KeepBulkActions,
   KeepButton,
+  KeepCollection,
   KeepEmptyState,
   KeepItemCard,
+  KeepItemCheckbox,
+  KeepKitProvider,
   KeepList,
   KeepNoteEditor,
   KeepPagination,
@@ -695,9 +934,16 @@ export {
   KeepTagEditor,
   KeepTagFilter,
   KeepUiProvider,
+  LocalStorageAdapter,
+  LocalStorageSyncQueueAdapter,
+  SyncStorageAdapter,
+  createBrowserStorageAdapter,
+  createKeepKit,
+  createStorageAdapter,
   useKeepContext2 as useKeepContext,
   useKeepItem2 as useKeepItem,
   useKeepList2 as useKeepList,
+  useKeepShortcut,
   useKeepUiLabels
 };
 //# sourceMappingURL=index.js.map