@keepkit/ui 0.16.0 → 0.17.0

package/dist/index.js

@@ -1540,9 +1540,49 @@ import { useState as useState2 } from "react";
 // src/shared.tsx
 import {
   cloneElement,
-  isValidElement
+  createContext as createContext2,
+  isValidElement,
+  useContext as useContext2
 } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3 } from "react/jsx-runtime";
+var KeepSearchQueryContext = createContext2(void 0);
+function KeepSearchQueryProvider({ query, children }) {
+  return /* @__PURE__ */ jsx3(KeepSearchQueryContext.Provider, { value: query, children });
+}
+function useKeepSearchQuery() {
+  return useContext2(KeepSearchQueryContext);
+}
+function KeepHighlight({ children, query }) {
+  const contextQuery = useKeepSearchQuery();
+  const resolvedQuery = query ?? contextQuery;
+  if (typeof children !== "string" || !resolvedQuery?.trim()) return children ?? null;
+  return highlightText(children, resolvedQuery);
+}
+function highlightText(text, query) {
+  const normalizedQuery = query.trim();
+  if (!normalizedQuery) return text;
+  const matcher = new RegExp(escapeRegExp(normalizedQuery), "gi");
+  const parts = [];
+  let lastIndex = 0;
+  let matchIndex = 0;
+  while (true) {
+    const match = matcher.exec(text);
+    if (match === null) break;
+    const index = match.index;
+    if (index > lastIndex) parts.push(text.slice(lastIndex, index));
+    parts.push(
+      /* @__PURE__ */ jsx3("mark", { className: "keep-highlight", "data-highlight": "true", children: match[0] }, `highlight-${matchIndex}`)
+    );
+    lastIndex = index + match[0].length;
+    matchIndex += 1;
+  }
+  if (lastIndex === 0) return text;
+  if (lastIndex < text.length) parts.push(text.slice(lastIndex));
+  return /* @__PURE__ */ jsx3(Fragment, { children: parts });
+}
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
 function toKeepButtonItem(item) {
   return {
     id: item.id,
@@ -1701,7 +1741,7 @@ function getItemLabel(item) {
 }
 
 // src/KeepBulkActions.tsx
-import { Fragment, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 function KeepBulkActions({
   query,
   selectedIds: controlledSelectedIds,
@@ -1724,7 +1764,7 @@ function KeepBulkActions({
     controlledScope,
     onSelectionScopeChange
   });
-  const body = render ? render(state) : typeof children === "function" ? children(state) : children ?? /* @__PURE__ */ jsxs2(Fragment, { children: [
+  const body = render ? render(state) : typeof children === "function" ? children(state) : children ?? /* @__PURE__ */ jsxs2(Fragment2, { children: [
     /* @__PURE__ */ jsxs2("fieldset", { children: [
       /* @__PURE__ */ jsx5("legend", { children: labels.selectItems }),
       /* @__PURE__ */ jsxs2("label", { children: [
@@ -1842,7 +1882,7 @@ function useKeepButton({ item, labels, icons, children }) {
 }
 
 // src/KeepButton.tsx
-import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 function KeepButton({
   labels,
   icons,
@@ -1887,7 +1927,7 @@ function KeepButton({
     const label = state.error ? labels?.error ?? view.labels.error : state.isMutating ? labels?.loading ?? view.labels.loading : state.isSaved ? labels?.saved ?? view.labels.saved : labels?.unsaved ?? view.labels.save;
     if (!icons) return label;
     const icon = state.error ? icons.error : state.isMutating ? icons.loading : state.isSaved ? icons.remove ?? icons.saved : icons.save;
-    return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    return /* @__PURE__ */ jsxs3(Fragment3, { children: [
       renderIcon(icon, iconClassName),
       showLabel && !iconOnly ? label : null
     ] });
@@ -1915,7 +1955,7 @@ function KeepButton({
     unsavedAriaLabel: labels?.unsavedAriaLabel ?? props.unsavedAriaLabel
   };
   if (!view.customStateLabel) return /* @__PURE__ */ jsx6(CoreKeepButton, { ...sharedProps });
-  return /* @__PURE__ */ jsx6(CoreKeepButton, { ...sharedProps, children: (state) => /* @__PURE__ */ jsx6(Fragment2, { children: getStateContent(state) }) });
+  return /* @__PURE__ */ jsx6(CoreKeepButton, { ...sharedProps, children: (state) => /* @__PURE__ */ jsx6(Fragment3, { children: getStateContent(state) }) });
 }
 function renderIcon(icon, className) {
   if (typeof icon === "function") return createElement(icon, { "aria-hidden": true, className });
@@ -2097,12 +2137,79 @@ function useKeepListView(query) {
   };
 }
 
+// src/hooks/useRovingTabIndex.ts
+import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef4 } from "react";
+function useRovingTabIndex() {
+  const ref = useRef4(null);
+  const getItems = useCallback3(() => {
+    const root = ref.current;
+    if (!root) return [];
+    return Array.from(root.querySelectorAll('[data-keepkit="card"]')).filter(
+      (item) => item.getAttribute("aria-hidden") !== "true" && item.getAttribute("data-roving-disabled") !== "true"
+    );
+  }, []);
+  const syncTabIndices = useCallback3(() => {
+    const items = getItems();
+    if (items.length === 0) return;
+    const activeElement = document.activeElement;
+    const activeItem = items.find((item) => item === activeElement || item.contains(activeElement));
+    const activeIndex = activeItem ? items.indexOf(activeItem) : 0;
+    items.forEach((item, index) => {
+      item.tabIndex = index === activeIndex ? 0 : -1;
+    });
+  }, [getItems]);
+  useEffect3(() => {
+    const root = ref.current;
+    if (!root) return;
+    syncTabIndices();
+    const observer = new MutationObserver(syncTabIndices);
+    observer.observe(root, { childList: true, subtree: true });
+    return () => observer.disconnect();
+  }, [syncTabIndices]);
+  const onFocusCapture = useCallback3(
+    (event) => {
+      if (!(event.target instanceof HTMLElement)) return;
+      const item = event.target.closest('[data-keepkit="card"]');
+      if (!item || !ref.current?.contains(item)) return;
+      getItems().forEach((candidate) => {
+        candidate.tabIndex = candidate === item ? 0 : -1;
+      });
+    },
+    [getItems]
+  );
+  const onKeyDown = useCallback3(
+    (event) => {
+      if (event.defaultPrevented) return;
+      const items = getItems();
+      if (!(event.target instanceof HTMLElement)) return;
+      const current = event.target.closest('[data-keepkit="card"]');
+      if (!current || current !== event.target || !ref.current?.contains(current)) return;
+      const currentIndex = items.indexOf(current);
+      if (currentIndex < 0) return;
+      let nextIndex;
+      if (event.key === "Home") nextIndex = 0;
+      if (event.key === "End") nextIndex = items.length - 1;
+      if (event.key === "ArrowRight" || event.key === "ArrowDown")
+        nextIndex = Math.min(currentIndex + 1, items.length - 1);
+      if (event.key === "ArrowLeft" || event.key === "ArrowUp") nextIndex = Math.max(currentIndex - 1, 0);
+      if (nextIndex === void 0) return;
+      event.preventDefault();
+      if (nextIndex === currentIndex) return;
+      items[nextIndex]?.focus();
+    },
+    [getItems]
+  );
+  return { ref, onKeyDown, onFocusCapture };
+}
+
 // src/KeepItemCard.tsx
 import {
-  createContext as createContext2,
+  createContext as createContext3,
   createElement as createElement2,
   isValidElement as isValidElement2,
-  useContext as useContext2
+  useContext as useContext3,
+  useEffect as useEffect4,
+  useState as useState5
 } from "react";
 
 // src/hooks/useKeepItemCard.ts
@@ -2403,10 +2510,10 @@ function KeepPruneStaleButton({
 }
 
 // src/KeepItemCard.tsx
-import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
-var KeepItemCardContext = createContext2(null);
+import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var KeepItemCardContext = createContext3(null);
 function useKeepItemCardCompound(part) {
-  const context = useContext2(KeepItemCardContext);
+  const context = useContext3(KeepItemCardContext);
   if (!context) throw new Error(`KeepItemCard.${part} must be rendered inside KeepItemCard.`);
   return context;
 }
@@ -2436,6 +2543,7 @@ function KeepItemCardRoot({
   linkComponent: LinkComponent,
   linkTargetAttribute,
   linkRel,
+  highlightQuery,
   className,
   ...rootProps
 }) {
@@ -2450,6 +2558,8 @@ function KeepItemCardRoot({
     onRemoveError,
     onRemoved
   });
+  const contextQuery = useKeepSearchQuery();
+  const searchQuery = highlightQuery ?? contextQuery;
   const contentChildren = asChild && isValidElement2(children) ? void 0 : children;
   function renderLink(content) {
     if (!view.href || !view.isAvailable) return content;
@@ -2468,7 +2578,28 @@ function KeepItemCardRoot({
     return view.href ? /* @__PURE__ */ jsx9("span", { "aria-disabled": "true", "data-link-disabled": "true", children: content }) : content;
   }
   const resolvedImageProps = view.imageProps ? { ...view.imageProps, alt: imageAlt ?? view.imageProps.alt } : void 0;
-  const image = resolvedImageProps ? renderImage?.(resolvedImageProps, item) ?? (ImageComponent ? /* @__PURE__ */ jsx9(ImageComponent, { ...resolvedImageProps }) : /* @__PURE__ */ jsx9("img", { ...resolvedImageProps, alt: resolvedImageProps.alt })) : null;
+  const imageSource = resolvedImageProps?.src;
+  const [imageStatus, setImageStatus] = useState5(imageSource ? "loading" : "error");
+  useEffect4(() => {
+    setImageStatus(imageSource ? "loading" : "error");
+  }, [imageSource]);
+  let image = null;
+  if (resolvedImageProps) {
+    const imagePropsWithHandlers = {
+      ...resolvedImageProps,
+      src: resolvedImageProps.src,
+      alt: imageAlt ?? resolvedImageProps.alt,
+      onLoad: (event) => {
+        resolvedImageProps.onLoad?.(event);
+        setImageStatus("loaded");
+      },
+      onError: (event) => {
+        resolvedImageProps.onError?.(event);
+        setImageStatus("error");
+      }
+    };
+    image = renderImage?.(imagePropsWithHandlers, item) ?? (ImageComponent ? /* @__PURE__ */ jsx9(ImageComponent, { ...imagePropsWithHandlers }) : /* @__PURE__ */ jsx9("img", { ...imagePropsWithHandlers, alt: imagePropsWithHandlers.alt }));
+  }
   const tags = showTags ? item.tags ?? [] : [];
   const renderedTags = showTags && tags.length > 0 ? renderTags?.(tags, item) ?? null : null;
   const meta = showSavedAt ? /* @__PURE__ */ jsxs5("div", { "data-card-meta": true, children: [
@@ -2480,7 +2611,7 @@ function KeepItemCardRoot({
     /* @__PURE__ */ jsx9("time", { dateTime: new Date(item.savedAt).toISOString(), children: formatSavedAt(item.savedAt) })
   ] }) : null;
   const error = view.itemState.error ? /* @__PURE__ */ jsx9("p", { role: "alert", children: getErrorMessage2(view.itemState.error, view.labels.error) }) : null;
-  const actions = view.statusLabel ? /* @__PURE__ */ jsx9(KeepStaleNotice, { item, onRetry, onRemoved }) : /* @__PURE__ */ jsxs5(Fragment3, { children: [
+  const actions = view.statusLabel ? /* @__PURE__ */ jsx9(KeepStaleNotice, { item, onRetry, onRemoved }) : /* @__PURE__ */ jsxs5(Fragment4, { children: [
     showSaveButton ? /* @__PURE__ */ jsx9(
       KeepButton,
       {
@@ -2503,16 +2634,18 @@ function KeepItemCardRoot({
   const compoundValue = {
     resolvedTitle: view.resolvedTitle,
     renderTitle,
-    image,
+    image: imageStatus === "error" ? null : image,
+    imageStatus,
     fallbackLabel: String(view.resolvedTitle),
     tags,
     tagsLabel: view.labels.tags,
     renderedTags,
     meta,
     error,
-    actions
+    actions,
+    renderText: (content) => /* @__PURE__ */ jsx9(KeepHighlight, { query: searchQuery, children: content })
   };
-  const defaultBody = /* @__PURE__ */ jsxs5(Fragment3, { children: [
+  const defaultBody = /* @__PURE__ */ jsxs5(Fragment4, { children: [
     /* @__PURE__ */ jsx9(KeepItemCardMedia, {}),
     /* @__PURE__ */ jsx9(KeepItemCardContent, {}),
     /* @__PURE__ */ jsx9(KeepItemCardActions, {})
@@ -2540,25 +2673,39 @@ function KeepItemCardRoot({
 }
 function KeepItemCardMedia({ children, fallback, ...props }) {
   const context = useKeepItemCardCompound("Media");
-  return /* @__PURE__ */ jsx9("div", { ...props, "data-keep-card-part": "media", children: children ?? context.image ?? /* @__PURE__ */ jsx9("span", { role: "img", "aria-label": context.fallbackLabel, "data-keep-card-fallback": "true", children: fallback ?? context.fallbackLabel.slice(0, 1) }) });
+  return /* @__PURE__ */ jsx9("div", { ...props, "data-keep-card-part": "media", "data-media-status": context.imageStatus, children: children ?? context.image ?? /* @__PURE__ */ jsx9("span", { role: "img", "aria-label": context.fallbackLabel, "data-keep-card-fallback": "true", children: fallback ?? /* @__PURE__ */ jsx9(KeepMediaPlaceholderIcon, {}) }) });
 }
 function KeepItemCardContent({ children, ...props }) {
   const context = useKeepItemCardCompound("Content");
-  return /* @__PURE__ */ jsx9("div", { ...props, "data-keep-card-part": "content", children: children ?? /* @__PURE__ */ jsxs5(Fragment3, { children: [
+  return /* @__PURE__ */ jsx9("div", { ...props, "data-keep-card-part": "content", children: children === void 0 ? /* @__PURE__ */ jsxs5(Fragment4, { children: [
     /* @__PURE__ */ jsx9(KeepItemCardTitle, {}),
     context.meta,
     /* @__PURE__ */ jsx9(KeepItemCardTags, {}),
     context.error
-  ] }) });
+  ] }) : context.renderText(children) });
 }
 function KeepItemCardTitle({ as = "h3", children, ...props }) {
   const context = useKeepItemCardCompound("Title");
   return createElement2(
     as,
     { ...props, "data-keep-card-part": "title" },
-    context.renderTitle(children ?? context.resolvedTitle)
+    context.renderTitle(context.renderText(children ?? context.resolvedTitle))
   );
 }
+function KeepMediaPlaceholderIcon() {
+  return /* @__PURE__ */ jsxs5("svg", { "data-media-fallback-icon": "true", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx9(
+      "path",
+      {
+        d: "M4 5.5A1.5 1.5 0 0 1 5.5 4h13A1.5 1.5 0 0 1 20 5.5v13a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 18.5v-13Z",
+        fill: "none",
+        stroke: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ jsx9("circle", { cx: "9", cy: "9", r: "1.5", fill: "currentColor" }),
+    /* @__PURE__ */ jsx9("path", { d: "m5.5 18 4.5-4.5 3 3 2-2L19 18", fill: "none", stroke: "currentColor" })
+  ] });
+}
 function KeepItemCardTags({ children, ...props }) {
   const context = useKeepItemCardCompound("Tags");
   if (children === void 0 && context.renderedTags) return context.renderedTags;
@@ -2593,7 +2740,7 @@ function getErrorMessage2(error, fallback) {
 }
 
 // src/KeepList.tsx
-import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 function KeepList(props) {
   const { fallback, onBoundaryError, boundaryResetKey, ...listProps } = props;
   const content = /* @__PURE__ */ jsx10(KeepListContent, { ...listProps });
@@ -2612,10 +2759,13 @@ function KeepListContent({
   itemCardProps,
   layout = "list",
   asChild = false,
+  onKeyDown,
+  onFocusCapture,
   className,
   ...rootProps
 }) {
   const view = useKeepListView(query);
+  const roving = useRovingTabIndex();
   const { state } = view;
   const body = getListBody(state, {
     children,
@@ -2638,9 +2788,20 @@ function KeepListContent({
       "data-layout": layout,
       "aria-busy": state.isLoading || rootProps["aria-busy"],
       "data-state": getListState(state),
-      "data-loading": state.isLoading ? "true" : void 0
+      "data-loading": state.isLoading ? "true" : void 0,
+      "data-roving-tabindex": "true",
+      role: rootProps.role ?? "group",
+      ref: roving.ref,
+      onKeyDown: (event) => {
+        onKeyDown?.(event);
+        if (!event.defaultPrevented) roving.onKeyDown(event);
+      },
+      onFocusCapture: (event) => {
+        onFocusCapture?.(event);
+        if (!event.defaultPrevented) roving.onFocusCapture(event);
+      }
     },
-    body,
+    /* @__PURE__ */ jsx10(KeepSearchQueryProvider, { query: query?.search?.query, children: body }),
     "KeepList"
   );
 }
@@ -2655,7 +2816,7 @@ function getListBody(state, options) {
   if (state.isLoading && !state.isHydrated) {
     if (options.loading !== void 0) return resolveContent(options.loading, state);
     const count = Number.isFinite(options.loadingCount) ? Math.max(0, Math.floor(options.loadingCount)) : 6;
-    return /* @__PURE__ */ jsxs6(Fragment4, { children: [
+    return /* @__PURE__ */ jsxs6(Fragment5, { children: [
       /* @__PURE__ */ jsx10("span", { role: "status", "data-keepkit": "loading-label", children: options.loadingLabel }),
       /* @__PURE__ */ jsx10("ul", { "data-keepkit": "skeleton-list", "data-layout": options.layout, children: Array.from({ length: count }, (_, index) => (
         // biome-ignore lint/suspicious/noArrayIndexKey: Static loading placeholders never reorder.
@@ -2676,16 +2837,16 @@ import { isValidElement as isValidElement4 } from "react";
 
 // src/hooks/useKeepTagFilter.ts
 import { useKeepList as useKeepList4 } from "@keepkit/core/react";
-import { useCallback as useCallback3, useMemo as useMemo3, useState as useState5 } from "react";
+import { useCallback as useCallback4, useMemo as useMemo3, useState as useState6 } from "react";
 function useKeepTagFilter(options) {
   const { query, controlledValue, defaultValue, onChange, onValueChange } = options;
-  const [uncontrolledValue, setUncontrolledValue] = useState5(defaultValue);
+  const [uncontrolledValue, setUncontrolledValue] = useState6(defaultValue);
   const resolvedValue = controlledValue ?? uncontrolledValue;
   const list = useKeepList4({
     ...query,
     tags: resolvedValue ? [...query?.tags ?? [], resolvedValue] : query?.tags
   });
-  const select = useCallback3(
+  const select = useCallback4(
     (tag) => {
       if (controlledValue === void 0) setUncontrolledValue(tag);
       onChange?.(tag);
@@ -2770,12 +2931,12 @@ function KeepTagFilter({
 }
 
 // src/hooks/useQueryControls.ts
-import { useEffect as useEffect3, useState as useState6 } from "react";
+import { useEffect as useEffect5, useState as useState7 } from "react";
 function useKeepSearchInput(options) {
   const { controlledValue, defaultValue, debounceMs, onValueChange } = options;
-  const [uncontrolledValue, setUncontrolledValue] = useState6(defaultValue);
+  const [uncontrolledValue, setUncontrolledValue] = useState7(defaultValue);
   const value = controlledValue ?? uncontrolledValue;
-  useEffect3(() => {
+  useEffect5(() => {
     if (!onValueChange) return;
     if (debounceMs <= 0) {
       onValueChange(value);
@@ -2794,7 +2955,7 @@ function useKeepSearchInput(options) {
 }
 function useKeepSortSelect(options) {
   const { controlledValue, defaultValue, onValueChange } = options;
-  const [uncontrolledValue, setUncontrolledValue] = useState6(defaultValue);
+  const [uncontrolledValue, setUncontrolledValue] = useState7(defaultValue);
   const value = controlledValue ?? uncontrolledValue;
   return {
     value,
@@ -2842,7 +3003,7 @@ function getVisiblePages(currentPage, pageCount, maxPageButtons) {
 }
 
 // src/query-controls.tsx
-import { Fragment as Fragment5, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 function KeepSearchInput({
   value: controlledValue,
   defaultValue = "",
@@ -2878,7 +3039,7 @@ function KeepSortSelect({
   ...props
 }) {
   const view = useKeepSortSelect({ controlledValue, defaultValue, onValueChange });
-  const options = children ?? /* @__PURE__ */ jsxs8(Fragment5, { children: [
+  const options = children ?? /* @__PURE__ */ jsxs8(Fragment6, { children: [
     /* @__PURE__ */ jsx12("option", { value: "updatedAt:desc", children: view.labels.updatedNewest }),
     /* @__PURE__ */ jsx12("option", { value: "updatedAt:asc", children: view.labels.updatedOldest }),
     /* @__PURE__ */ jsx12("option", { value: "savedAt:desc", children: view.labels.savedNewest }),
@@ -3032,8 +3193,31 @@ function getCollectionState(list) {
 
 // src/KeepLayout.tsx
 import { jsx as jsx14 } from "react/jsx-runtime";
-function KeepLayout({ layout = "list", children, ...props }) {
-  return /* @__PURE__ */ jsx14("div", { ...props, "data-keepkit": "layout", "data-layout": layout, children });
+function KeepLayout({ layout = "list", children, onKeyDown, onFocusCapture, ...props }) {
+  const roving = useRovingTabIndex();
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: The group manages keyboard focus for descendant cards.
+    /* @__PURE__ */ jsx14(
+      "div",
+      {
+        ...props,
+        ref: roving.ref,
+        "data-keepkit": "layout",
+        "data-layout": layout,
+        "data-roving-tabindex": "true",
+        role: props.role ?? "group",
+        onKeyDown: (event) => {
+          onKeyDown?.(event);
+          if (!event.defaultPrevented) roving.onKeyDown(event);
+        },
+        onFocusCapture: (event) => {
+          onFocusCapture?.(event);
+          if (!event.defaultPrevented) roving.onFocusCapture(event);
+        },
+        children
+      }
+    )
+  );
 }
 
 // src/KeepNoteEditor.tsx
@@ -3041,16 +3225,16 @@ import { isValidElement as isValidElement5 } from "react";
 
 // src/hooks/useKeepNoteEditor.ts
 import { useKeepItem as useKeepItem3 } from "@keepkit/core/react";
-import { useCallback as useCallback4, useEffect as useEffect4, useRef as useRef4, useState as useState7 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect6, useRef as useRef5, useState as useState8 } from "react";
 function useKeepNoteEditor({ item, debounceMs, onSaved, onSaveError }) {
   const itemState = useKeepItem3(item);
   const { error, isMutating, item: savedItem, updateNote } = itemState;
-  const [note, setNote] = useState7(item.note ?? "");
+  const [note, setNote] = useState8(item.note ?? "");
   const baselineNote = savedItem?.note ?? item.note ?? "";
   const isDirty = note !== baselineNote;
-  const lastSavedNoteRef = useRef4(void 0);
-  useEffect4(() => setNote(baselineNote), [baselineNote]);
-  const save = useCallback4(async () => {
+  const lastSavedNoteRef = useRef5(void 0);
+  useEffect6(() => setNote(baselineNote), [baselineNote]);
+  const save = useCallback5(async () => {
     const nextNote = note.trim() || void 0;
     try {
       await updateNote(nextNote);
@@ -3061,7 +3245,7 @@ function useKeepNoteEditor({ item, debounceMs, onSaved, onSaveError }) {
       throw cause;
     }
   }, [note, onSaveError, onSaved, updateNote]);
-  useEffect4(() => {
+  useEffect6(() => {
     if (!isDirty || debounceMs <= 0 || lastSavedNoteRef.current === note) return;
     const timer = window.setTimeout(() => void save().catch(() => void 0), debounceMs);
     return () => window.clearTimeout(timer);
@@ -3096,7 +3280,7 @@ function useKeepNoteEditor({ item, debounceMs, onSaved, onSaveError }) {
 }
 
 // src/KeepNoteEditor.tsx
-import { Fragment as Fragment6, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 function KeepNoteEditor({
   item,
   label,
@@ -3114,7 +3298,7 @@ function KeepNoteEditor({
   const view = useKeepNoteEditor({ item, debounceMs, onSaved, onSaveError });
   const { error, isDirty, isSaving, note, setNote } = view.state;
   const contentChildren = asChild && isValidElement5(children) ? void 0 : children;
-  const body = render ? render(view.state) : typeof contentChildren === "function" ? contentChildren(view.state) : contentChildren ?? /* @__PURE__ */ jsxs10(Fragment6, { children: [
+  const body = render ? render(view.state) : typeof contentChildren === "function" ? contentChildren(view.state) : contentChildren ?? /* @__PURE__ */ jsxs10(Fragment7, { children: [
     /* @__PURE__ */ jsxs10("label", { children: [
       label ?? view.labels.note,
       /* @__PURE__ */ jsx15(
@@ -3171,16 +3355,89 @@ function getErrorMessage3(error, fallback) {
   return error instanceof Error ? error.message : fallback;
 }
 
+// src/KeepReorderableList.tsx
+import { useState as useState9 } from "react";
+import { jsx as jsx16 } from "react/jsx-runtime";
+function KeepReorderableList({
+  items,
+  onReorder,
+  renderItem,
+  itemLabel = (_item, index) => `Move item ${index + 1}`,
+  ...props
+}) {
+  const [draggedId, setDraggedId] = useState9(null);
+  const ids = items.map((item) => item.id);
+  function commit(nextIds) {
+    void onReorder(nextIds);
+  }
+  function move(index, targetIndex) {
+    if (targetIndex < 0 || targetIndex >= ids.length || targetIndex === index) return;
+    const next = [...ids];
+    const [id] = next.splice(index, 1);
+    if (id === void 0) return;
+    next.splice(targetIndex, 0, id);
+    commit(next);
+  }
+  return /* @__PURE__ */ jsx16("ul", { ...props, "data-keepkit": "reorderable-list", children: items.map((item, index) => {
+    const moveUp = () => move(index, index - 1);
+    const moveDown = () => move(index, index + 1);
+    const onHandleKeyDown = (event) => {
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        moveUp();
+      } else if (event.key === "ArrowDown") {
+        event.preventDefault();
+        moveDown();
+      }
+    };
+    const state = {
+      index,
+      isDragging: draggedId === item.id,
+      moveUp,
+      moveDown,
+      dragHandleProps: {
+        role: "button",
+        tabIndex: 0,
+        draggable: true,
+        "aria-label": itemLabel(item, index),
+        "aria-grabbed": draggedId === item.id,
+        onDragStart: () => setDraggedId(item.id),
+        onDragEnd: () => setDraggedId(null),
+        onKeyDown: onHandleKeyDown
+      }
+    };
+    return /* @__PURE__ */ jsx16(
+      "li",
+      {
+        "data-reorder-index": index,
+        "data-dragging": draggedId === item.id ? "true" : void 0,
+        onDragOver: (event) => {
+          if (draggedId && draggedId !== item.id) event.preventDefault();
+        },
+        onDrop: (event) => {
+          event.preventDefault();
+          if (!draggedId || draggedId === item.id) return;
+          const sourceIndex = ids.indexOf(draggedId);
+          setDraggedId(null);
+          move(sourceIndex, index);
+        },
+        children: renderItem(item, state)
+      },
+      item.id
+    );
+  }) });
+}
+
 // src/hooks/useKeepSyncFeedback.ts
 import { useKeepContext as useKeepContext3 } from "@keepkit/core/react";
-import { useEffect as useEffect5, useRef as useRef5 } from "react";
+import { useEffect as useEffect7, useRef as useRef6 } from "react";
 function useKeepSyncFeedback() {
   const { syncState } = useKeepContext3();
   const emitFeedback = useKeepUiFeedback();
   const completedMessage = useUiLabel("syncSynced");
   const failedMessage = useUiLabel("syncFailedMessage");
-  const previousStatus = useRef5("idle");
-  useEffect5(() => {
+  const previousStatus = useRef6("idle");
+  useEffect7(() => {
     const previous = previousStatus.current;
     previousStatus.current = syncState.status;
     if (syncState.status === "error" && previous !== "error") {
@@ -3201,16 +3458,16 @@ function KeepSyncFeedbackObserver() {
 
 // src/hooks/useKeepSyncRecoveryDialog.ts
 import { useKeepContext as useKeepContext4 } from "@keepkit/core/react";
-import { useEffect as useEffect6, useState as useState8 } from "react";
+import { useEffect as useEffect8, useState as useState10 } from "react";
 function useKeepSyncRecoveryDialog(options) {
   const { open, onOpenChange, conflicts, onManualMerge } = options;
   const context = useKeepContext4();
   const conflictList = conflicts ?? context.syncState.conflicts ?? [];
   const hasRecovery = conflictList.length > 0 || context.syncState.status === "error" || Boolean(context.error);
-  const [dismissed, setDismissed] = useState8(false);
-  const [busyId, setBusyId] = useState8();
-  const [error, setError] = useState8();
-  useEffect6(() => {
+  const [dismissed, setDismissed] = useState10(false);
+  const [busyId, setBusyId] = useState10();
+  const [error, setError] = useState10();
+  useEffect8(() => {
     if (hasRecovery) setDismissed(false);
   }, [hasRecovery]);
   return {
@@ -3255,7 +3512,7 @@ function useKeepSyncRecoveryDialog(options) {
 }
 
 // src/KeepSyncRecoveryDialog.tsx
-import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
 function KeepSyncRecoveryDialog({
   open,
   onOpenChange,
@@ -3285,16 +3542,16 @@ function KeepSyncRecoveryDialog({
       "data-loading": view.busyId !== void 0 ? "true" : void 0,
       children: [
         /* @__PURE__ */ jsxs11("header", { children: [
-          /* @__PURE__ */ jsx16("h2", { id: "keepkit-sync-recovery-title", children: title ?? view.labels.title }),
-          /* @__PURE__ */ jsx16("button", { type: "button", "data-keep-action": "close-dialog", onClick: view.close, "aria-label": view.labels.close, children: view.labels.close })
+          /* @__PURE__ */ jsx17("h2", { id: "keepkit-sync-recovery-title", children: title ?? view.labels.title }),
+          /* @__PURE__ */ jsx17("button", { type: "button", "data-keep-action": "close-dialog", onClick: view.close, "aria-label": view.labels.close, children: view.labels.close })
         ] }),
         children,
         view.conflictList.length > 0 ? /* @__PURE__ */ jsxs11("div", { children: [
-          /* @__PURE__ */ jsx16("p", { children: view.labels.conflict }),
+          /* @__PURE__ */ jsx17("p", { children: view.labels.conflict }),
           view.conflictList.map((conflict) => /* @__PURE__ */ jsxs11("article", { "data-conflict-id": conflict.id, children: [
-            /* @__PURE__ */ jsx16("h3", { children: getMetaTitle(conflict.operation.item?.meta) ?? conflict.id }),
+            /* @__PURE__ */ jsx17("h3", { children: getMetaTitle(conflict.operation.item?.meta) ?? conflict.id }),
             /* @__PURE__ */ jsxs11("div", { "data-conflict-preview": true, children: [
-              /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx17(
                 ConflictPreview,
                 {
                   item: conflict.operation.item,
@@ -3304,7 +3561,7 @@ function KeepSyncRecoveryDialog({
                   side: "local"
                 }
               ),
-              /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx17(
                 ConflictPreview,
                 {
                   item: conflict.remote,
@@ -3316,7 +3573,7 @@ function KeepSyncRecoveryDialog({
               )
             ] }),
             /* @__PURE__ */ jsxs11("div", { children: [
-              /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx17(
                 "button",
                 {
                   type: "button",
@@ -3326,7 +3583,7 @@ function KeepSyncRecoveryDialog({
                   children: view.labels.keepLocal
                 }
               ),
-              /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx17(
                 "button",
                 {
                   type: "button",
@@ -3336,7 +3593,7 @@ function KeepSyncRecoveryDialog({
                   children: view.labels.useServer
                 }
               ),
-              /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx17(
                 "button",
                 {
                   type: "button",
@@ -3350,11 +3607,11 @@ function KeepSyncRecoveryDialog({
           ] }, conflict.id))
         ] }) : null,
         view.showBackupRecovery ? /* @__PURE__ */ jsxs11("section", { "data-recovery": "backup", children: [
-          /* @__PURE__ */ jsx16("h3", { children: view.labels.backupRecovery }),
-          /* @__PURE__ */ jsx16("p", { children: view.labels.backupRecoveryDescription }),
-          backup ?? (showBackupControls ? /* @__PURE__ */ jsx16(KeepBackup, {}) : null)
+          /* @__PURE__ */ jsx17("h3", { children: view.labels.backupRecovery }),
+          /* @__PURE__ */ jsx17("p", { children: view.labels.backupRecoveryDescription }),
+          backup ?? (showBackupControls ? /* @__PURE__ */ jsx17(KeepBackup, {}) : null)
         ] }) : null,
-        view.error ? /* @__PURE__ */ jsx16("p", { id: "keepkit-sync-recovery-error", role: "alert", "aria-live": "assertive", children: view.error instanceof Error ? view.error.message : view.labels.error }) : null
+        view.error ? /* @__PURE__ */ jsx17("p", { id: "keepkit-sync-recovery-error", role: "alert", "aria-live": "assertive", children: view.error instanceof Error ? view.error.message : view.labels.error }) : null
       ]
     }
   );
@@ -3367,15 +3624,15 @@ function ConflictPreview({
   side
 }) {
   return /* @__PURE__ */ jsxs11("article", { "data-conflict-version": side, "aria-label": heading, children: [
-    /* @__PURE__ */ jsx16("h4", { children: heading }),
+    /* @__PURE__ */ jsx17("h4", { children: heading }),
     /* @__PURE__ */ jsxs11("dl", { children: [
       /* @__PURE__ */ jsxs11("div", { children: [
-        /* @__PURE__ */ jsx16("dt", { children: updatedAtLabel }),
-        /* @__PURE__ */ jsx16("dd", { children: item ? /* @__PURE__ */ jsx16("time", { dateTime: new Date(item.updatedAt).toISOString(), children: formatConflictDate(item.updatedAt) }) : "\u2014" })
+        /* @__PURE__ */ jsx17("dt", { children: updatedAtLabel }),
+        /* @__PURE__ */ jsx17("dd", { children: item ? /* @__PURE__ */ jsx17("time", { dateTime: new Date(item.updatedAt).toISOString(), children: formatConflictDate(item.updatedAt) }) : "\u2014" })
       ] }),
       /* @__PURE__ */ jsxs11("div", { children: [
-        /* @__PURE__ */ jsx16("dt", { children: noteLabel }),
-        /* @__PURE__ */ jsx16("dd", { children: item?.note || "\u2014" })
+        /* @__PURE__ */ jsx17("dt", { children: noteLabel }),
+        /* @__PURE__ */ jsx17("dd", { children: item?.note || "\u2014" })
       ] })
     ] })
   ] });
@@ -3419,7 +3676,7 @@ function getErrorMessage4(error) {
 }
 
 // src/KeepSyncStatusBanner.tsx
-import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 function KeepSyncStatusBanner({
   onRetry,
   onResolveConflicts,
@@ -3439,8 +3696,8 @@ function KeepSyncStatusBanner({
       "data-keepkit": "sync-status",
       "data-state": view.status,
       children: [
-        /* @__PURE__ */ jsx17("p", { children: view.message }),
-        view.showRetry ? /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx18("p", { children: view.message }),
+        view.showRetry ? /* @__PURE__ */ jsx18(
           "button",
           {
             type: "button",
@@ -3450,7 +3707,7 @@ function KeepSyncStatusBanner({
             children: view.retryLabel
           }
         ) : null,
-        view.hasConflicts ? /* @__PURE__ */ jsx17(
+        view.hasConflicts ? /* @__PURE__ */ jsx18(
           "button",
           {
             type: "button",
@@ -3467,13 +3724,13 @@ function KeepSyncStatusBanner({
 
 // src/hooks/useKeepTagEditor.ts
 import { useKeepItem as useKeepItem4 } from "@keepkit/core/react";
-import { useCallback as useCallback5, useEffect as useEffect7, useState as useState9 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect9, useState as useState11 } from "react";
 function useKeepTagEditor({ item, onSaved, onSaveError }) {
   const itemState = useKeepItem4(item);
-  const [tags, setTags] = useState9(item.tags ?? []);
-  const [input, setInput] = useState9("");
-  useEffect7(() => setTags(itemState.item?.tags ?? item.tags ?? []), [item.tags, itemState.item?.tags]);
-  const save = useCallback5(async () => {
+  const [tags, setTags] = useState11(item.tags ?? []);
+  const [input, setInput] = useState11("");
+  useEffect9(() => setTags(itemState.item?.tags ?? item.tags ?? []), [item.tags, itemState.item?.tags]);
+  const save = useCallback6(async () => {
     const nextTags = normalizeUiTags(tags);
     try {
       await itemState.updateTags(nextTags);
@@ -3519,7 +3776,7 @@ function useKeepTagEditor({ item, onSaved, onSaveError }) {
 }
 
 // src/KeepTagEditor.tsx
-import { Fragment as Fragment7, jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
 function KeepTagEditor({
   item,
   availableTags = [],
@@ -3530,10 +3787,10 @@ function KeepTagEditor({
 }) {
   const view = useKeepTagEditor({ item, onSaved, onSaveError });
   const { isSaving, tags } = view.state;
-  const body = render ? render(view.state) : /* @__PURE__ */ jsxs13(Fragment7, { children: [
+  const body = render ? render(view.state) : /* @__PURE__ */ jsxs13(Fragment8, { children: [
     /* @__PURE__ */ jsxs13("label", { children: [
       view.labels.tags,
-      /* @__PURE__ */ jsx18(
+      /* @__PURE__ */ jsx19(
         "input",
         {
           "data-keep-action": "edit-tags",
@@ -3544,12 +3801,12 @@ function KeepTagEditor({
         }
       )
     ] }),
-    availableTags.length > 0 ? /* @__PURE__ */ jsx18("datalist", { id: `keep-tags-${item.id}`, children: availableTags.map((tag) => /* @__PURE__ */ jsx18("option", { value: tag }, tag)) }) : null,
-    /* @__PURE__ */ jsx18("ul", { "aria-label": view.labels.tags, children: tags.map((tag) => /* @__PURE__ */ jsxs13("li", { children: [
+    availableTags.length > 0 ? /* @__PURE__ */ jsx19("datalist", { id: `keep-tags-${item.id}`, children: availableTags.map((tag) => /* @__PURE__ */ jsx19("option", { value: tag }, tag)) }) : null,
+    /* @__PURE__ */ jsx19("ul", { "aria-label": view.labels.tags, children: tags.map((tag) => /* @__PURE__ */ jsxs13("li", { children: [
       tag,
-      /* @__PURE__ */ jsx18("button", { type: "button", "data-keep-action": "remove-tag", onClick: () => view.removeTag(tag), children: view.labels.remove })
+      /* @__PURE__ */ jsx19("button", { type: "button", "data-keep-action": "remove-tag", onClick: () => view.removeTag(tag), children: view.labels.remove })
     ] }, tag)) }),
-    /* @__PURE__ */ jsx18("button", { type: "submit", "data-keep-action": "apply-tags", disabled: isSaving, "aria-busy": isSaving, children: view.labels.apply })
+    /* @__PURE__ */ jsx19("button", { type: "submit", "data-keep-action": "apply-tags", disabled: isSaving, "aria-busy": isSaving, children: view.labels.apply })
   ] });
   return /* @__PURE__ */ jsxs13(
     "form",
@@ -3563,7 +3820,7 @@ function KeepTagEditor({
       "data-disabled": isSaving ? "true" : void 0,
       children: [
         body,
-        view.error ? /* @__PURE__ */ jsx18("p", { role: "alert", children: getErrorMessage5(view.error, view.labels.error) }) : null
+        view.error ? /* @__PURE__ */ jsx19("p", { role: "alert", children: getErrorMessage5(view.error, view.labels.error) }) : null
       ]
     }
   );
@@ -3572,6 +3829,117 @@ function getErrorMessage5(error, fallback) {
   return error instanceof Error ? error.message : fallback;
 }
 
+// src/KeepTourBar.tsx
+import { useKeepNavigator } from "@keepkit/core/react";
+
+// src/hooks/useKeepTourShortcuts.ts
+import { useEffect as useEffect10 } from "react";
+function useKeepTourShortcuts({
+  onNext,
+  onPrev,
+  enabled = true,
+  allowInEditable = false,
+  preventDefault = true,
+  nextKeys = ["j", "]"],
+  prevKeys = ["k", "["],
+  onError
+}) {
+  useEffect10(() => {
+    if (!enabled) return;
+    const handleKeyDown = (event) => {
+      if (!allowInEditable && isEditableTarget(event.target)) return;
+      if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
+      const key = event.key.toLocaleLowerCase();
+      const action = nextKeys.some((candidate) => candidate.toLocaleLowerCase() === key) ? onNext : prevKeys.some((candidate) => candidate.toLocaleLowerCase() === key) ? onPrev : void 0;
+      if (!action) return;
+      if (preventDefault) event.preventDefault();
+      void Promise.resolve(action()).catch((error) => onError?.(error));
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [allowInEditable, enabled, nextKeys, onError, onNext, onPrev, preventDefault, prevKeys]);
+}
+function isEditableTarget(target) {
+  if (!(target instanceof HTMLElement)) return false;
+  return target.isContentEditable || target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT";
+}
+
+// src/KeepTourBar.tsx
+import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+function KeepTourBar({
+  navigation: providedNavigation,
+  currentId,
+  initialIndex,
+  showProgress = true,
+  prevHref,
+  nextHref,
+  backHref,
+  onPrev,
+  onNext,
+  onBack,
+  prevLabel,
+  nextLabel,
+  backLabel,
+  keyboardShortcuts = false,
+  shortcutOptions,
+  progress,
+  ...props
+}) {
+  const ownNavigation = useKeepNavigator({ currentId, initialIndex });
+  const navigation = providedNavigation ?? ownNavigation;
+  const previousLabel = useUiLabel("previousPage", prevLabel);
+  const nextItemLabel = useUiLabel("nextPage", nextLabel);
+  const listLabel = useUiLabel("allItems", backLabel);
+  const { labels } = useKeepUiLabels();
+  const resolvedPrev = onPrev ?? (() => navigateTo(navigation.goToPrev(), prevHref));
+  const resolvedNext = onNext ?? (() => navigateTo(navigation.goToNext(), nextHref));
+  useKeepTourShortcuts({
+    ...shortcutOptions,
+    enabled: keyboardShortcuts && (shortcutOptions?.enabled ?? true),
+    onNext: () => {
+      return resolvedNext();
+    },
+    onPrev: () => {
+      return resolvedPrev();
+    }
+  });
+  return /* @__PURE__ */ jsxs14("nav", { ...props, "data-keepkit": "tour-bar", "aria-label": props["aria-label"] ?? labels.pagination, children: [
+    showProgress ? /* @__PURE__ */ jsx20("span", { "data-keepkit": "tour-progress", "aria-live": "polite", children: progress ?? `${navigation.currentPosition ?? 0} / ${navigation.items.length}` }) : null,
+    /* @__PURE__ */ jsx20(
+      TourAction,
+      {
+        href: prevHref,
+        disabled: !navigation.hasPrev,
+        onClick: prevHref ? onPrev : resolvedPrev,
+        "data-keep-action": "tour-prev",
+        children: previousLabel
+      }
+    ),
+    /* @__PURE__ */ jsx20(
+      TourAction,
+      {
+        href: nextHref,
+        disabled: !navigation.hasNext,
+        onClick: nextHref ? onNext : resolvedNext,
+        "data-keep-action": "tour-next",
+        children: nextItemLabel
+      }
+    ),
+    backHref || onBack ? /* @__PURE__ */ jsx20(TourAction, { href: backHref, onClick: onBack, "data-keep-action": "tour-back", children: listLabel }) : null
+  ] });
+}
+function TourAction({ href, disabled = false, onClick, children, ...props }) {
+  if (href && !disabled) {
+    return /* @__PURE__ */ jsx20("a", { ...props, href, onClick: () => void onClick?.(), children });
+  }
+  return /* @__PURE__ */ jsx20("button", { ...props, type: "button", disabled, onClick: () => void onClick?.(), children });
+}
+var KeepNavigator = KeepTourBar;
+function navigateTo(item, href) {
+  if (!item || !href || typeof window === "undefined") return;
+  window.location.assign(href);
+}
+
 // src/hooks/useKeepUndo.ts
 import { useKeepContext as useKeepContext6 } from "@keepkit/core/react";
 function useKeepUndo() {
@@ -3593,13 +3961,13 @@ function useKeepUndo() {
 }
 
 // src/KeepUndo.tsx
-import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
 function KeepUndo({ children, label, ...props }) {
   const view = useKeepUndo();
   if (!view.canUndo) return null;
-  return /* @__PURE__ */ jsxs14("div", { ...props, role: "status", "aria-live": "polite", "data-keepkit": "undo", "data-state": "available", children: [
+  return /* @__PURE__ */ jsxs15("div", { ...props, role: "status", "aria-live": "polite", "data-keepkit": "undo", "data-state": "available", children: [
     children ?? view.message,
-    /* @__PURE__ */ jsx19("button", { type: "button", "data-keep-action": "undo", onClick: () => void view.undo(), children: label ?? view.label })
+    /* @__PURE__ */ jsx21("button", { type: "button", "data-keep-action": "undo", onClick: () => void view.undo(), children: label ?? view.label })
   ] });
 }
 
@@ -3608,7 +3976,7 @@ import { isValidElement as isValidElement6 } from "react";
 
 // src/hooks/useStatusViews.ts
 import { useKeepContext as useKeepContext7 } from "@keepkit/core/react";
-import { useEffect as useEffect8, useRef as useRef6, useState as useState10 } from "react";
+import { useEffect as useEffect11, useRef as useRef7, useState as useState12 } from "react";
 function useKeepEmptyState() {
   return useUiLabel("noItems").replace(/\.$/, "");
 }
@@ -3628,9 +3996,9 @@ function useKeepAnnouncements(messages) {
   const savedMessage = useUiLabel("savedMessage", messages?.save);
   const removedMessage = useUiLabel("removedMessage", messages?.remove);
   const noteSavedMessage = useUiLabel("noteSavedMessage", messages?.note);
-  const [message, setMessage] = useState10("");
-  const lastChangeRef = useRef6(void 0);
-  useEffect8(() => {
+  const [message, setMessage] = useState12("");
+  const lastChangeRef = useRef7(void 0);
+  useEffect11(() => {
     const change = context.lastChange;
     if (!change || change === lastChangeRef.current) return;
     lastChangeRef.current = change;
@@ -3658,7 +4026,7 @@ function getStatusLabelKey3(status) {
 }
 
 // src/status.tsx
-import { Fragment as Fragment8, jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
 function KeepEmptyState({
   title,
   description,
@@ -3670,9 +4038,9 @@ function KeepEmptyState({
 }) {
   const defaultTitle = useKeepEmptyState();
   const contentChildren = asChild && isValidElement6(children) ? void 0 : children;
-  const body = contentChildren ?? /* @__PURE__ */ jsxs15(Fragment8, { children: [
-    /* @__PURE__ */ jsx20("h2", { children: title ?? defaultTitle }),
-    description ? /* @__PURE__ */ jsx20("p", { children: description }) : null,
+  const body = contentChildren ?? /* @__PURE__ */ jsxs16(Fragment9, { children: [
+    /* @__PURE__ */ jsx22("h2", { children: title ?? defaultTitle }),
+    description ? /* @__PURE__ */ jsx22("p", { children: description }) : null,
     action
   ] });
   return renderRoot(
@@ -3714,7 +4082,7 @@ function KeepStatus({
 }
 function KeepAnnouncements({ messages, ...props }) {
   const message = useKeepAnnouncements(messages);
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx22(
     "div",
     {
       ...props,
@@ -3731,7 +4099,7 @@ var KeepAnnouncer = KeepAnnouncements;
 
 // src/theme.tsx
 import { cloneElement as cloneElement2, isValidElement as isValidElement7 } from "react";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var keepThemeNames = [
   "default",
   "ocean",
@@ -3790,7 +4158,7 @@ function KeepThemeProvider({
       throw new Error("KeepThemeProvider with asChild requires a single React element child.");
     return cloneElement2(children, rootProps);
   }
-  return /* @__PURE__ */ jsx21("div", { ...rootProps, children });
+  return /* @__PURE__ */ jsx23("div", { ...rootProps, children });
 }
 
 // src/index.tsx
@@ -3801,6 +4169,7 @@ import {
   useKeepContext as useKeepContext8,
   useKeepItem as useKeepItem5,
   useKeepList as useKeepList5,
+  useKeepNavigator as useKeepNavigator2,
   useKeepShortcut
 } from "@keepkit/core/react";
 import {
@@ -3813,7 +4182,7 @@ import {
   LocalStorageSyncQueueAdapter,
   SyncStorageAdapter
 } from "@keepkit/core/storage";
-import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 function KeepKitProvider({
   labels,
   locale,
@@ -3833,7 +4202,7 @@ function KeepKitProvider({
   children,
   ...providerProps
 }) {
-  return /* @__PURE__ */ jsx22(KeepUiProvider, { labels, locale, labelResolver, onFeedback, children: /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx24(KeepUiProvider, { labels, locale, labelResolver, onFeedback, children: /* @__PURE__ */ jsx24(
     KeepThemeProvider,
     {
       theme,
@@ -3847,10 +4216,10 @@ function KeepKitProvider({
       className: themeClassName,
       style: themeStyle,
       asChild: themeAsChild,
-      children: /* @__PURE__ */ jsxs16(CoreKeepProvider, { ...providerProps, children: [
-        /* @__PURE__ */ jsx22(KeepSyncFeedbackObserver, {}),
+      children: /* @__PURE__ */ jsxs17(CoreKeepProvider, { ...providerProps, children: [
+        /* @__PURE__ */ jsx24(KeepSyncFeedbackObserver, {}),
         children,
-        /* @__PURE__ */ jsx22(KeepAnnouncements, {})
+        /* @__PURE__ */ jsx24(KeepAnnouncements, {})
       ] })
     }
   ) });
@@ -3877,7 +4246,7 @@ function createKeepKit(options = {}) {
   } = options;
   const coreKit = createCoreKeepKit(coreOptions);
   return {
-    Provider: (props) => /* @__PURE__ */ jsx22(
+    Provider: (props) => /* @__PURE__ */ jsx24(
       KeepKitProvider,
       {
         ...coreOptions,
@@ -3898,9 +4267,9 @@ function createKeepKit(options = {}) {
         ...props
       }
     ),
-    Button: (props) => /* @__PURE__ */ jsx22(KeepButton, { ...props }),
-    Backup: (props) => /* @__PURE__ */ jsx22(KeepBackup, { ...props }),
-    Collection: (props) => /* @__PURE__ */ jsx22(
+    Button: (props) => /* @__PURE__ */ jsx24(KeepButton, { ...props }),
+    Backup: (props) => /* @__PURE__ */ jsx24(KeepBackup, { ...props }),
+    Collection: (props) => /* @__PURE__ */ jsx24(
       KeepCollection,
       {
         ...props,
@@ -3914,6 +4283,7 @@ function createKeepKit(options = {}) {
     useContext: () => coreKit.useContext(),
     useItem: (item) => coreKit.useItem(item),
     useList: (query) => coreKit.useList(query),
+    useNavigator: (navigatorOptions) => coreKit.useNavigator(navigatorOptions),
     useShortcut: (shortcutOptions) => coreKit.useShortcut(shortcutOptions)
   };
 }
@@ -3929,6 +4299,7 @@ export {
   KeepCollection,
   KeepEmptyState,
   KeepErrorBoundary3 as KeepErrorBoundary,
+  KeepHighlight,
   KeepItemCard,
   KeepItemCardSkeleton,
   KeepItemCheckbox,
@@ -3936,10 +4307,12 @@ export {
   KeepKitProvider,
   KeepLayout,
   KeepList,
+  KeepNavigator,
   KeepNoteEditor,
   KeepPagination,
   KeepProvider,
   KeepPruneStaleButton,
+  KeepReorderableList,
   KeepSearchInput,
   KeepSortSelect,
   KeepStaleNotice,
@@ -3949,6 +4322,7 @@ export {
   KeepTagEditor,
   KeepTagFilter,
   KeepThemeProvider,
+  KeepTourBar,
   KeepUiProvider,
   KeepUndo,
   LocalStorageAdapter,
@@ -3960,14 +4334,17 @@ export {
   createNextPagesRouterAdapter,
   createStorageAdapter,
   getKeepLocaleLabels,
+  highlightText,
   isAllSelected,
   keepThemeNames,
   toggleSelectAll,
   useKeepContext8 as useKeepContext,
   useKeepItem5 as useKeepItem,
   useKeepList5 as useKeepList,
+  useKeepNavigator2 as useKeepNavigator,
   useKeepShortcut,
   useKeepToastFeedback,
+  useKeepTourShortcuts,
   useKeepUiLabels,
   useKeepUrlSync
 };