@keepkit/ui 0.3.0 → 0.5.0

package/dist/index.js

@@ -3,41 +3,143 @@
 // 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,
+  useRef,
   useState
 } from "react";
-import { KeepProvider, useKeepContext as useKeepContext2, useKeepItem as useKeepItem2, useKeepList as useKeepList2 } from "@keepkit/core/react";
+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, jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_LABELS = {
+  save: "Save",
+  saved: "Saved",
+  remove: "Remove",
+  loading: "Loading\u2026",
+  saving: "Saving\u2026",
+  syncing: "Syncing\u2026",
+  error: "Something went wrong.",
+  allTags: "All",
+  filterTags: "Filter saved items by tag",
+  note: "Note",
+  saveNote: "Save note",
+  noItems: "No saved items.",
+  loadingItems: "Loading saved items\u2026",
+  errorItems: "Could not load saved items.",
+  search: "Search saved items",
+  sort: "Sort saved items",
+  newest: "Newest first",
+  oldest: "Oldest first",
+  previousPage: "Previous page",
+  nextPage: "Next page",
+  pagination: "Pagination",
+  page: "Page",
+  selectItems: "Select saved items",
+  selectedCount: "selected",
+  deleteSelected: "Delete selected",
+  tagsToApply: "Tags to apply",
+  applyTags: "Apply tags",
+  savedMessage: "Item saved.",
+  removedMessage: "Item removed.",
+  noteSavedMessage: "Note saved."
+};
+var KeepUiLabelsContext = createContext({ labels: DEFAULT_LABELS });
+function KeepUiProvider({ labels, locale, labelResolver, children }) {
+  const value = useMemo(() => {
+    const resolved = { ...DEFAULT_LABELS, ...labels };
+    return { locale, labels: resolved, labelResolver };
+  }, [labelResolver, labels, locale]);
+  return /* @__PURE__ */ jsx(KeepUiLabelsContext.Provider, { value, children });
+}
+function KeepKitProvider({
+  labels,
+  locale,
+  labelResolver,
+  children,
+  ...providerProps
+}) {
+  return /* @__PURE__ */ jsx(KeepUiProvider, { labels, locale, labelResolver, children: /* @__PURE__ */ jsx(CoreKeepProvider, { ...providerProps, children }) });
+}
+function useKeepUiLabels() {
+  return useContext(KeepUiLabelsContext);
+}
+function useUiLabel(key, override) {
+  const context = useKeepUiLabels();
+  return override ?? context.labelResolver?.(key, { locale: context.locale }) ?? context.labels[key];
+}
+function createKeepKit(options = {}) {
+  const { labels, locale, labelResolver, getTitle, getImageProps, ...coreOptions } = options;
+  const coreKit = createCoreKeepKit(coreOptions);
+  return {
+    Provider: (props) => /* @__PURE__ */ jsx(
+      KeepKitProvider,
+      {
+        ...coreOptions,
+        labels,
+        locale,
+        labelResolver,
+        ...props
+      }
+    ),
+    Button: (props) => /* @__PURE__ */ jsx(KeepButton, { ...props }),
+    Collection: (props) => /* @__PURE__ */ jsx(
+      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 buttonState = useKeepItem(props.item.id, {
-    meta: props.item.meta,
-    targetType: props.item.targetType,
-    note: props.item.note,
-    tags: props.item.tags
-  });
+  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 getStateContent = (state) => {
-    if (state.error && labels?.error !== void 0) return labels.error;
-    if (state.isMutating && labels?.loading !== void 0) return labels.loading;
+    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 ?? "Saved" : labels?.unsaved ?? "Save";
+    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,
-      unsavedLabel: labels?.unsaved ?? props.unsavedLabel,
+      savedLabel: labels?.saved ?? props.savedLabel ?? savedLabel,
+      unsavedLabel: labels?.unsaved ?? props.unsavedLabel ?? saveLabel,
       savedAriaLabel: labels?.savedAriaLabel ?? props.savedAriaLabel,
       unsavedAriaLabel: labels?.unsavedAriaLabel ?? props.unsavedAriaLabel
     };
@@ -51,8 +153,8 @@ function KeepButton({ labels, ...props }) {
   const sharedProps = {
     ...props,
     "aria-busy": props["aria-busy"] ?? (buttonState.isLoading || buttonState.isMutating),
-    savedLabel: labels?.saved ?? props.savedLabel,
-    unsavedLabel: labels?.unsaved ?? props.unsavedLabel,
+    savedLabel: labels?.saved ?? props.savedLabel ?? savedLabel,
+    unsavedLabel: labels?.unsaved ?? props.unsavedLabel ?? saveLabel,
     savedAriaLabel: labels?.savedAriaLabel ?? props.savedAriaLabel,
     unsavedAriaLabel: labels?.unsavedAriaLabel ?? props.unsavedAriaLabel
   };
@@ -63,11 +165,14 @@ function KeepButton({ labels, ...props }) {
 function KeepItemCard({
   item,
   title,
-  getImageUrl,
+  getTitle,
+  getImageProps,
+  imageComponent: ImageComponent,
+  renderImage,
   imageAlt,
   render,
   children,
-  removeLabel = "Remove",
+  removeLabel,
   onRemoveError,
   onRemoved,
   showSaveButton = true,
@@ -76,7 +181,9 @@ function KeepItemCard({
   className,
   ...rootProps
 }) {
-  const itemState = useKeepItem(item.id);
+  const saveActionLabel = useUiLabel("save");
+  const removeActionLabel = useUiLabel("remove");
+  const itemState = useKeepItem(item);
   const contentChildren = asChild && isValidElement(children) ? void 0 : children;
   const state = {
     item,
@@ -85,8 +192,8 @@ function KeepItemCard({
     error: itemState.error,
     remove: itemState.remove
   };
-  const resolvedTitle = typeof title === "function" ? title(item) : title ?? getMetaTitle(item.meta) ?? item.id;
-  const imageUrl = getImageUrl?.(item);
+  const resolvedTitle = typeof title === "function" ? title(item) : title ?? getTitle?.(item) ?? getMetaTitle(item.meta) ?? item.id;
+  const imageProps = getImageProps?.(item, resolvedTitle);
   async function handleRemove() {
     try {
       await itemState.remove();
@@ -96,17 +203,17 @@ function KeepItemCard({
     }
   }
   const body = render ? render(state) : typeof contentChildren === "function" ? contentChildren(state) : contentChildren ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-    imageUrl ? /* @__PURE__ */ jsx("img", { src: imageUrl, alt: imageAlt ?? String(resolvedTitle) }) : null,
+    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(
       KeepButton,
       {
         item: toKeepButtonItem(item),
         labels: saveButtonLabels,
-        getAriaLabel: (buttonState) => `${buttonState.isSaved ? "Remove" : "Save"} ${String(resolvedTitle)}`
+        getAriaLabel: (buttonState) => `${buttonState.isSaved ? removeActionLabel : saveActionLabel} ${String(resolvedTitle)}`
       }
     ) : null,
-    /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void handleRemove(), disabled: itemState.isMutating, children: removeLabel })
+    /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void handleRemove(), disabled: itemState.isMutating, children: removeLabel ?? removeActionLabel })
   ] });
   return renderRoot(
     asChild,
@@ -117,19 +224,29 @@ function KeepItemCard({
   );
 }
 function KeepList({
-  options,
+  query,
   children,
   renderItem,
-  loading = "Loading saved items\u2026",
-  empty = "No saved items.",
-  error: errorContent = "Could not load saved items.",
+  loading,
+  empty,
+  error: errorContent,
   itemCardProps,
   asChild = false,
   className,
   ...rootProps
 }) {
-  const state = useKeepList(options);
-  const body = getListBody(state, { children, renderItem, loading, empty, error: errorContent, itemCardProps });
+  const defaultLoading = useUiLabel("loadingItems");
+  const defaultEmpty = useUiLabel("noItems");
+  const defaultError = useUiLabel("errorItems");
+  const state = useKeepList(query);
+  const body = getListBody(state, {
+    children,
+    renderItem,
+    loading: loading ?? defaultLoading,
+    empty: empty ?? defaultEmpty,
+    error: errorContent ?? defaultError,
+    itemCardProps
+  });
   const root = asChild && isValidElement(children) ? children : void 0;
   return renderRoot(
     asChild,
@@ -150,14 +267,93 @@ function getListBody(state, options) {
   );
   return /* @__PURE__ */ jsx("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] = useState(query.search?.query ?? "");
+  const [sort, setSort] = useState(query.sort ?? { by: "updatedAt", direction: "desc" });
+  const [tag, setTag] = useState(query.tags?.[0]);
+  const [page, setPage] = useState(query.pagination?.page ?? 1);
+  const resolvedPageSize = query.pagination?.pageSize ?? pageSize;
+  const resolvedQuery = useMemo(
+    () => ({
+      ...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);
+  useEffect(() => {
+    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__ */ jsxs(
+    "section",
+    {
+      ...rootProps,
+      className,
+      "aria-busy": list.isLoading || list.isMutating || rootProps["aria-busy"],
+      children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          enabled.search ? /* @__PURE__ */ jsx(KeepSearchInput, { value: searchValue, onValueChange: setSearchValue }) : null,
+          enabled.sort ? /* @__PURE__ */ jsx(KeepSortSelect, { value: sortToValue(sort), onValueChange: (_value, nextSort) => setSort(nextSort) }) : null,
+          enabled.tagFilter ? /* @__PURE__ */ jsx(KeepTagFilter, { query, value: tag, onValueChange: setTag }) : null
+        ] }),
+        /* @__PURE__ */ jsx(
+          KeepList,
+          {
+            query: resolvedQuery,
+            renderItem,
+            itemCardProps,
+            loading,
+            empty,
+            error
+          }
+        ),
+        enabled.pagination ? /* @__PURE__ */ jsx(
+          KeepPagination,
+          {
+            totalCount: list.totalCount,
+            pageSize: resolvedPageSize,
+            page: list.page,
+            onPageChange: (_nextPage, nextPageOffset) => setPage(Math.floor(nextPageOffset / resolvedPageSize) + 1)
+          }
+        ) : null,
+        enabled.bulkActions ? /* @__PURE__ */ jsx(KeepBulkActions, { query: resolvedQuery }) : null,
+        /* @__PURE__ */ jsx(KeepAnnouncements, {})
+      ]
+    }
+  );
+}
 function KeepTagFilter({
-  listOptions,
+  query,
   value: controlledValue,
   defaultValue,
   onChange,
   onValueChange,
-  allLabel = "All",
-  ariaLabel = "Filter saved items by tag",
+  allLabel,
+  ariaLabel,
   renderTag,
   render,
   children,
@@ -165,10 +361,14 @@ function KeepTagFilter({
   className,
   ...rootProps
 }) {
-  const list = useKeepList(listOptions);
+  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] = useState(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);
@@ -182,8 +382,8 @@ function KeepTagFilter({
     [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: ariaLabel }),
-    /* @__PURE__ */ jsx("button", { type: "button", "aria-pressed": value === void 0, onClick: () => select(), children: allLabel }),
+    /* @__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: [
       renderTag ? renderTag(tag, list.tagCounts[tag] ?? 0, value === tag) : tag,
       /* @__PURE__ */ jsxs("span", { children: [
@@ -203,8 +403,8 @@ function KeepTagFilter({
 }
 function KeepNoteEditor({
   item,
-  label = "Note",
-  saveLabel = "Save note",
+  label,
+  saveLabel,
   placeholder,
   onSaved,
   onSaveError,
@@ -214,7 +414,9 @@ function KeepNoteEditor({
   className,
   ...formProps
 }) {
-  const itemState = useKeepItem(item.id);
+  const defaultLabel = useUiLabel("note");
+  const defaultSaveLabel = useUiLabel("saveNote");
+  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]);
@@ -239,7 +441,7 @@ function KeepNoteEditor({
   };
   const body = render ? render(state) : typeof contentChildren === "function" ? contentChildren(state) : contentChildren ?? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("label", { children: [
-      label,
+      label ?? defaultLabel,
       /* @__PURE__ */ jsx(
         "textarea",
         {
@@ -250,22 +452,256 @@ function KeepNoteEditor({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("button", { type: "submit", disabled: itemState.isMutating, "aria-busy": itemState.isMutating, children: saveLabel })
+    /* @__PURE__ */ jsx("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(
+      "form",
+      {
+        ...formProps,
+        className,
+        onSubmit: handleSubmit,
+        "aria-busy": itemState.isMutating || formProps["aria-busy"],
+        children: body
+      }
+    );
+  }
   return renderRoot(
-    asChild,
+    true,
     isValidElement(children) ? children : void 0,
     { ...formProps, className, onSubmit: handleSubmit, "aria-busy": itemState.isMutating || formProps["aria-busy"] },
     body,
     "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 = [],
+  onSaved,
+  onSaveError,
+  render,
+  ...props
+}) {
+  const tagsLabel = useUiLabel("tagsToApply");
+  const removeLabel = useUiLabel("remove");
+  const applyTagsLabel = useUiLabel("applyTags");
+  const itemState = useKeepItem(item);
+  const [tags, setTags] = useState(item.tags ?? []);
+  const [input, setInput] = useState("");
+  useEffect(() => setTags(itemState.item?.tags ?? item.tags ?? []), [item.tags, itemState.item?.tags]);
+  const save = useCallback(async () => {
+    const nextTags = normalizeUiTags(tags);
+    try {
+      await itemState.updateTags(nextTags);
+      setTags(nextTags);
+      onSaved?.(nextTags);
+    } catch (error) {
+      onSaveError?.(error);
+      throw error;
+    }
+  }, [itemState, onSaveError, onSaved, tags]);
+  const addTag = (tag) => {
+    const next = normalizeUiTags([...tags, tag]);
+    setTags(next);
+    setInput("");
+  };
+  const body = render ? render({ tags, setTags, save, isSaving: itemState.isMutating }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("label", { children: [
+      tagsLabel,
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          value: input,
+          list: availableTags.length > 0 ? `keep-tags-${item.id}` : void 0,
+          onChange: (event) => setInput(event.currentTarget.value),
+          onKeyDown: (event) => {
+            if (event.key === "Enter") {
+              event.preventDefault();
+              if (input.trim()) addTag(input);
+            }
+          }
+        }
+      )
+    ] }),
+    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: [
+      tag,
+      /* @__PURE__ */ jsx("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 })
+  ] });
+  return /* @__PURE__ */ jsx(
+    "form",
+    {
+      ...props,
+      onSubmit: (event) => {
+        event.preventDefault();
+        void save().catch(() => void 0);
+      },
+      "aria-busy": itemState.isMutating || props["aria-busy"],
+      children: body
+    }
+  );
+}
+function KeepBulkActions({
+  query,
+  selectedIds: controlledSelectedIds,
+  defaultSelectedIds = [],
+  onSelectedIdsChange,
+  renderItem,
+  onCompleted,
+  ...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] = 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 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([]);
+  };
+  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 }),
+        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) }),
+        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: [
+      tagsLabel,
+      /* @__PURE__ */ jsx("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 })
+  ] });
+}
 function KeepEmptyState({
-  title = "No saved items",
+  title,
   description,
   action,
   children,
@@ -273,9 +709,10 @@ function KeepEmptyState({
   className,
   ...rootProps
 }) {
+  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 }),
+    /* @__PURE__ */ jsx("h2", { children: title ?? defaultTitle }),
     description ? /* @__PURE__ */ jsx("p", { children: description }) : null,
     action
   ] });
@@ -293,13 +730,14 @@ function KeepStatus({
   const context = useKeepContext();
   const contentChildren = asChild && isValidElement(children) ? void 0 : children;
   const resolvedStatus = status ?? getDerivedStatus(context);
+  const defaultLabel = useUiLabel(getStatusLabelKey(resolvedStatus));
   const state = {
     status: resolvedStatus,
     error: context.error,
     pendingCount: context.syncState.pendingCount,
     items: context.items
   };
-  const body = render ? render(state) : typeof contentChildren === "function" ? contentChildren(state) : contentChildren ?? labels?.[resolvedStatus] ?? getDefaultStatusLabel(resolvedStatus);
+  const body = render ? render(state) : typeof contentChildren === "function" ? contentChildren(state) : contentChildren ?? labels?.[resolvedStatus] ?? defaultLabel;
   const role = rootProps.role ?? (resolvedStatus === "error" ? "alert" : "status");
   return renderRoot(
     asChild,
@@ -309,6 +747,23 @@ function KeepStatus({
     "KeepStatus"
   );
 }
+function KeepAnnouncements({ messages, ...props }) {
+  const context = useKeepContext();
+  const savedMessage = useUiLabel("savedMessage", messages?.save);
+  const removedMessage = useUiLabel("removedMessage", messages?.remove);
+  const noteSavedMessage = useUiLabel("noteSavedMessage", messages?.note);
+  const [message, setMessage] = useState("");
+  const lastChangeRef = useRef(void 0);
+  useEffect(() => {
+    const change = context.lastChange;
+    if (!change || change === lastChangeRef.current) return;
+    lastChangeRef.current = change;
+    if (change.action === "save") setMessage(savedMessage);
+    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 });
+}
 function getDerivedStatus(context) {
   if (context.error) return "error";
   if (context.syncState.status === "pending" || context.syncState.status === "syncing") return "syncing";
@@ -317,13 +772,13 @@ function getDerivedStatus(context) {
   if (context.isHydrated && context.items.length === 0) return "empty";
   return "idle";
 }
-function getDefaultStatusLabel(status) {
-  if (status === "empty") return "No saved items.";
-  if (status === "loading") return "Loading saved items\u2026";
-  if (status === "saving") return "Saving\u2026";
-  if (status === "syncing") return "Syncing\u2026";
-  if (status === "error") return "Something went wrong.";
-  return "";
+function getStatusLabelKey(status) {
+  if (status === "empty") return "noItems";
+  if (status === "loading") return "loadingItems";
+  if (status === "error") return "error";
+  if (status === "saving") return "saving";
+  if (status === "syncing") return "syncing";
+  return "saved";
 }
 function resolveContent(content, state) {
   return typeof content === "function" ? content(state) : content;
@@ -342,6 +797,12 @@ function getMetaTitle(meta) {
   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.`);
@@ -350,16 +811,36 @@ function renderRoot(asChild, child, props, body, componentName) {
   return /* @__PURE__ */ jsx("div", { ...props, children: body });
 }
 export {
+  FallbackStorageAdapter,
+  IndexedDBAdapter,
+  IndexedDBSyncQueueAdapter,
+  KeepAnnouncements,
+  KeepBulkActions,
   KeepButton,
+  KeepCollection,
   KeepEmptyState,
   KeepItemCard,
+  KeepKitProvider,
   KeepList,
   KeepNoteEditor,
+  KeepPagination,
   KeepProvider,
+  KeepSearchInput,
+  KeepSortSelect,
   KeepStatus,
+  KeepTagEditor,
   KeepTagFilter,
+  KeepUiProvider,
+  LocalStorageAdapter,
+  LocalStorageSyncQueueAdapter,
+  SyncStorageAdapter,
+  createBrowserStorageAdapter,
+  createKeepKit,
+  createStorageAdapter,
   useKeepContext2 as useKeepContext,
   useKeepItem2 as useKeepItem,
-  useKeepList2 as useKeepList
+  useKeepList2 as useKeepList,
+  useKeepShortcut,
+  useKeepUiLabels
 };
 //# sourceMappingURL=index.js.map