@keepkit/ui 0.16.0 → 0.18.0

package/dist/index.js

@@ -6,32 +6,94 @@ import {
   createKeepKit as createCoreKeepKit
 } from "@keepkit/core/react";
 
-// src/hooks/useKeepToastFeedback.ts
-import { useCallback } from "react";
-function useKeepToastFeedback(showToast) {
-  return useCallback(
-    (event) => {
-      if (!("undo" in event)) {
-        showToast(event.message);
-        return;
-      }
-      showToast(event.message, {
-        action: {
-          label: event.undoLabel,
-          onClick: () => void event.undo()
-        }
-      });
+// src/adapters/url-sync.tsx
+import {
+  DEFAULT_KEEP_URL_PARAMS,
+  decodeKeepListQuery,
+  encodeKeepListQuery
+} from "@keepkit/core/core";
+import { useEffect, useRef } from "react";
+function createNextPagesRouterAdapter(router) {
+  const getUrl = () => router.asPath ?? (typeof window === "undefined" ? "/" : window.location.href);
+  return {
+    getUrl,
+    subscribe: router.events ? (listener) => {
+      router.events?.on("routeChangeComplete", listener);
+      return () => router.events?.off("routeChangeComplete", listener);
+    } : void 0,
+    navigate: (url, mode) => {
+      void router[mode](url, void 0, { shallow: true });
+    }
+  };
+}
+function useKeepUrlSync({
+  enabled = true,
+  query,
+  onQueryChange,
+  options = {},
+  adapter: providedAdapter
+}) {
+  const browserAdapterRef = useRef(getBrowserAdapter());
+  const adapter = providedAdapter ?? browserAdapterRef.current;
+  const onQueryChangeRef = useRef(onQueryChange);
+  onQueryChangeRef.current = onQueryChange;
+  const skipWriteRef = useRef(true);
+  const params = options.params;
+  useEffect(() => {
+    if (!enabled) return;
+    const read = () => {
+      const url = adapter.getUrl();
+      const decoded = decodeKeepListQuery(url, { params });
+      skipWriteRef.current = true;
+      onQueryChangeRef.current((previousQuery) => ({
+        ...previousQuery,
+        ...decoded.search ? { search: decoded.search } : { search: void 0 },
+        ...decoded.tags ? { tags: decoded.tags } : { tags: void 0 },
+        ...decoded.sort ? { sort: decoded.sort } : {},
+        ...decoded.pagination ? { pagination: { ...previousQuery.pagination, ...decoded.pagination } } : {}
+      }));
+    };
+    read();
+    return adapter.subscribe?.(read);
+  }, [adapter, enabled, params]);
+  useEffect(() => {
+    if (!enabled) return;
+    if (skipWriteRef.current) {
+      skipWriteRef.current = false;
+      return;
+    }
+    const currentUrl = new URL(adapter.getUrl(), "http://keepkit.invalid");
+    const urlParams = { ...DEFAULT_KEEP_URL_PARAMS, ...params };
+    for (const key of Object.values(urlParams)) currentUrl.searchParams.delete(key);
+    const nextParams = encodeKeepListQuery(query, { params });
+    nextParams.forEach((value, key) => {
+      currentUrl.searchParams.append(key, value);
+    });
+    const nextUrl = `${currentUrl.pathname}${currentUrl.search}${currentUrl.hash}`;
+    adapter.navigate(nextUrl, options.history ?? "push");
+  }, [adapter, enabled, options.history, params, query]);
+}
+function getBrowserAdapter() {
+  return {
+    getUrl: () => typeof window === "undefined" ? "/" : window.location.href,
+    subscribe: (listener) => {
+      if (typeof window === "undefined") return () => void 0;
+      window.addEventListener("popstate", listener);
+      return () => window.removeEventListener("popstate", listener);
     },
-    [showToast]
-  );
+    navigate: (url, mode) => {
+      if (typeof window === "undefined") return;
+      window.history[mode === "push" ? "pushState" : "replaceState"]({}, "", url);
+    }
+  };
 }
 
-// src/hooks/useKeepBackup.ts
+// src/features/actions/hooks/useKeepBackup.ts
 import { useKeepContext } from "@keepkit/core/react";
-import { useRef, useState } from "react";
+import { useRef as useRef2, useState } from "react";
 
-// src/ui-context.tsx
-import { createContext, useCallback as useCallback2, useContext, useMemo } from "react";
+// src/foundation/ui-context.tsx
+import { createContext, useCallback, useContext, useMemo } from "react";
 
 // src/locales/de.ts
 var DE_LABELS = {
@@ -1356,7 +1418,7 @@ function getKeepLocaleLabels(locale) {
   return { ...KEEP_LOCALE_LABELS[normalizeKeepLocale(locale)] };
 }
 
-// src/ui-context.tsx
+// src/foundation/ui-context.tsx
 import { jsx } from "react/jsx-runtime";
 var DEFAULT_LABELS = KEEP_LOCALE_LABELS.en;
 var KeepUiLabelsContext = createContext({
@@ -1370,7 +1432,7 @@ function KeepUiProvider({
   onFeedback,
   children
 }) {
-  const emitFeedback = useCallback2(
+  const emitFeedback = useCallback(
     (event) => {
       onFeedback?.(event);
     },
@@ -1393,13 +1455,13 @@ function useUiLabel(key, override) {
 }
 function useKeepUiFeedback() {
   const { emitFeedback } = useKeepUiLabels();
-  return useCallback2((event) => emitFeedback(event), [emitFeedback]);
+  return useCallback((event) => emitFeedback(event), [emitFeedback]);
 }
 
-// src/hooks/useKeepBackup.ts
+// src/features/actions/hooks/useKeepBackup.ts
 function useKeepBackup({ filename, onExport, onImported }) {
   const context = useKeepContext();
-  const inputRef = useRef(null);
+  const inputRef = useRef2(null);
   const [mode, setMode] = useState("merge");
   const [result, setResult] = useState();
   const [error, setError] = useState();
@@ -1456,7 +1518,7 @@ function useKeepBackup({ filename, onExport, onImported }) {
   };
 }
 
-// src/KeepBackup.tsx
+// src/features/actions/KeepBackup.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function KeepBackup({
   filename = "keepkit-backup.json",
@@ -1533,16 +1595,52 @@ function getErrorMessage(error) {
   return error instanceof Error ? error.message : "Something went wrong.";
 }
 
-// src/hooks/useKeepBulkActions.ts
-import { useKeepList } from "@keepkit/core/react";
-import { useState as useState2 } from "react";
-
-// src/shared.tsx
+// src/foundation/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,
@@ -1574,7 +1672,9 @@ function renderRoot(asChild, child, props, body, componentName) {
   return /* @__PURE__ */ jsx3("div", { ...props, children: body });
 }
 
-// src/hooks/useKeepBulkActions.ts
+// src/features/actions/hooks/useKeepBulkActions.ts
+import { useKeepList } from "@keepkit/core/react";
+import { useState as useState2 } from "react";
 function isAllSelected(items, selectedIds) {
   if (items.length === 0) return false;
   const selected = new Set(selectedIds);
@@ -1667,7 +1767,7 @@ function useKeepBulkActions(options) {
   };
 }
 
-// src/KeepItemCheckbox.tsx
+// src/features/actions/KeepItemCheckbox.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
 function KeepItemCheckbox({
   item,
@@ -1700,8 +1800,8 @@ function getItemLabel(item) {
   return typeof title === "string" && title.trim() ? title.trim() : void 0;
 }
 
-// src/KeepBulkActions.tsx
-import { Fragment, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+// src/features/actions/KeepBulkActions.tsx
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 function KeepBulkActions({
   query,
   selectedIds: controlledSelectedIds,
@@ -1724,7 +1824,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: [
@@ -1815,13 +1915,13 @@ function KeepBulkActions({
   );
 }
 
-// src/KeepButton.tsx
+// src/features/actions/KeepButton.tsx
 import {
   KeepButton as CoreKeepButton
 } from "@keepkit/core/react";
-import { createElement, useEffect, useRef as useRef2 } from "react";
+import { createElement, useEffect as useEffect2, useRef as useRef3 } from "react";
 
-// src/hooks/useKeepButton.ts
+// src/features/actions/hooks/useKeepButton.ts
 import { useKeepItem } from "@keepkit/core/react";
 function useKeepButton({ item, labels, icons, children }) {
   return {
@@ -1841,8 +1941,8 @@ function useKeepButton({ item, labels, icons, children }) {
   };
 }
 
-// src/KeepButton.tsx
-import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+// src/features/actions/KeepButton.tsx
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 function KeepButton({
   labels,
   icons,
@@ -1854,8 +1954,8 @@ function KeepButton({
   ...props
 }) {
   const view = useKeepButton({ item: props.item, labels, icons, children: props.children });
-  const pendingToggle = useRef2(null);
-  useEffect(() => {
+  const pendingToggle = useRef3(null);
+  useEffect2(() => {
     const pending = pendingToggle.current;
     if (!pending || view.buttonState.isMutating || pending.wasSaved === view.buttonState.isSaved) return;
     pendingToggle.current = null;
@@ -1887,7 +1987,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,128 +2015,388 @@ 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 });
   return icon ?? null;
 }
 
-// src/KeepCollection.tsx
-import { KeepErrorBoundary as KeepErrorBoundary2 } from "@keepkit/core/react";
-
-// src/hooks/useKeepCollection.ts
-import { useKeepList as useKeepList2 } from "@keepkit/core/react";
-import { useMemo as useMemo2, useState as useState3 } from "react";
-
-// src/url-sync.tsx
-import {
-  DEFAULT_KEEP_URL_PARAMS,
-  decodeKeepListQuery,
-  encodeKeepListQuery
-} from "@keepkit/core/core";
-import { useEffect as useEffect2, useRef as useRef3 } from "react";
-function createNextPagesRouterAdapter(router) {
-  const getUrl = () => router.asPath ?? (typeof window === "undefined" ? "/" : window.location.href);
+// src/features/actions/hooks/useKeepUndo.ts
+import { useKeepContext as useKeepContext2 } from "@keepkit/core/react";
+import { useEffect as useEffect3, useState as useState3 } from "react";
+function useKeepUndo() {
+  const context = useKeepContext2();
+  const emitFeedback = useKeepUiFeedback();
+  const restoredMessage = useUiLabel("restoredMessage");
+  const { canUndo, startedAt, expiresAt } = context.undo;
+  const [now, setNow] = useState3(() => Date.now());
+  useEffect3(() => {
+    if (!canUndo || expiresAt === void 0) return;
+    setNow(Date.now());
+    const timer = setInterval(() => setNow(Date.now()), 250);
+    return () => clearInterval(timer);
+  }, [canUndo, expiresAt]);
+  const duration = Math.max(1, (expiresAt ?? now) - (startedAt ?? now));
+  const remainingMs = Math.max(0, (expiresAt ?? now) - now);
+  const remainingSeconds = Math.max(0, Math.ceil(remainingMs / 1e3));
+  const progress = Math.min(1, Math.max(0, remainingMs / duration));
   return {
-    getUrl,
-    subscribe: router.events ? (listener) => {
-      router.events?.on("routeChangeComplete", listener);
-      return () => router.events?.off("routeChangeComplete", listener);
-    } : void 0,
-    navigate: (url, mode) => {
-      void router[mode](url, void 0, { shallow: true });
-    }
+    canUndo,
+    expiresAt,
+    remainingMs,
+    remainingSeconds,
+    progress,
+    undo: async () => {
+      const items = context.lastChange?.items ?? (context.lastChange?.item ? [context.lastChange.item] : []);
+      await context.undoLastRemoval();
+      if (items.length > 0) {
+        emitFeedback({ type: "item-restored", item: items[0], items, message: restoredMessage });
+      }
+    },
+    message: useUiLabel("undoAvailable"),
+    label: useUiLabel("undo")
   };
 }
-function useKeepUrlSync({
-  enabled = true,
-  query,
-  onQueryChange,
-  options = {},
-  adapter: providedAdapter
-}) {
-  const browserAdapterRef = useRef3(getBrowserAdapter());
-  const adapter = providedAdapter ?? browserAdapterRef.current;
-  const onQueryChangeRef = useRef3(onQueryChange);
-  onQueryChangeRef.current = onQueryChange;
-  const skipWriteRef = useRef3(true);
-  const params = options.params;
-  useEffect2(() => {
-    if (!enabled) return;
-    const read = () => {
-      const url = adapter.getUrl();
-      const decoded = decodeKeepListQuery(url, { params });
-      skipWriteRef.current = true;
-      onQueryChangeRef.current((previousQuery) => ({
-        ...previousQuery,
-        ...decoded.search ? { search: decoded.search } : { search: void 0 },
-        ...decoded.tags ? { tags: decoded.tags } : { tags: void 0 },
-        ...decoded.sort ? { sort: decoded.sort } : {},
-        ...decoded.pagination ? { pagination: { ...previousQuery.pagination, ...decoded.pagination } } : {}
-      }));
-    };
-    read();
-    return adapter.subscribe?.(read);
-  }, [adapter, enabled, params]);
-  useEffect2(() => {
-    if (!enabled) return;
-    if (skipWriteRef.current) {
-      skipWriteRef.current = false;
-      return;
-    }
-    const currentUrl = new URL(adapter.getUrl(), "http://keepkit.invalid");
-    const urlParams = { ...DEFAULT_KEEP_URL_PARAMS, ...params };
-    for (const key of Object.values(urlParams)) currentUrl.searchParams.delete(key);
-    const nextParams = encodeKeepListQuery(query, { params });
-    nextParams.forEach((value, key) => {
-      currentUrl.searchParams.append(key, value);
-    });
-    const nextUrl = `${currentUrl.pathname}${currentUrl.search}${currentUrl.hash}`;
-    adapter.navigate(nextUrl, options.history ?? "push");
-  }, [adapter, enabled, options.history, params, query]);
+
+// src/features/actions/KeepUndo.tsx
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+function KeepUndo({ children, label, ...props }) {
+  const view = useKeepUndo();
+  if (!view.canUndo) return null;
+  return /* @__PURE__ */ jsxs4("div", { ...props, role: "status", "aria-live": "polite", "data-keepkit": "undo", "data-state": "available", children: [
+    /* @__PURE__ */ jsx7("span", { "data-keepkit": "undo-message", children: children ?? view.message }),
+    /* @__PURE__ */ jsxs4("span", { "data-keepkit": "undo-countdown", "aria-hidden": "true", children: [
+      view.remainingSeconds,
+      "s"
+    ] }),
+    /* @__PURE__ */ jsx7(
+      "progress",
+      {
+        "data-keepkit": "undo-progress",
+        max: 1,
+        value: view.progress,
+        "aria-label": String(view.label),
+        "aria-valuetext": `${view.remainingSeconds}s`
+      }
+    ),
+    /* @__PURE__ */ jsx7("button", { type: "button", "data-keep-action": "undo", onClick: () => void view.undo(), children: label ?? view.label })
+  ] });
 }
-function getBrowserAdapter() {
-  return {
-    getUrl: () => typeof window === "undefined" ? "/" : window.location.href,
-    subscribe: (listener) => {
-      if (typeof window === "undefined") return () => void 0;
-      window.addEventListener("popstate", listener);
-      return () => window.removeEventListener("popstate", listener);
+
+// src/features/collection/KeepCollection.tsx
+import { KeepErrorBoundary as KeepErrorBoundary2 } from "@keepkit/core/react";
+
+// src/features/query/KeepTagFilter.tsx
+import { isValidElement as isValidElement2 } from "react";
+
+// src/features/query/hooks/useKeepTagFilter.ts
+import { useKeepList as useKeepList2 } from "@keepkit/core/react";
+import { useCallback as useCallback2, useMemo as useMemo2, useState as useState4 } from "react";
+function useKeepTagFilter(options) {
+  const { query, controlledValue, defaultValue, onChange, onValueChange } = options;
+  const [uncontrolledValue, setUncontrolledValue] = useState4(defaultValue);
+  const resolvedValue = controlledValue ?? uncontrolledValue;
+  const list = useKeepList2({
+    ...query,
+    tags: resolvedValue ? [...query?.tags ?? [], resolvedValue] : query?.tags
+  });
+  const select = useCallback2(
+    (tag) => {
+      if (controlledValue === void 0) setUncontrolledValue(tag);
+      onChange?.(tag);
+      onValueChange?.(tag);
     },
-    navigate: (url, mode) => {
-      if (typeof window === "undefined") return;
-      window.history[mode === "push" ? "pushState" : "replaceState"]({}, "", url);
-    }
+    [controlledValue, onChange, onValueChange]
+  );
+  const state = useMemo2(
+    () => ({ tags: list.tags, tagCounts: list.tagCounts, value: resolvedValue, select }),
+    [list.tagCounts, list.tags, resolvedValue, select]
+  );
+  return {
+    state,
+    isLoading: list.isLoading,
+    labels: { all: useUiLabel("allTags"), aria: useUiLabel("filterTags") }
   };
 }
 
-// src/hooks/useKeepCollection.ts
-function useKeepCollection({
+// src/features/query/KeepTagFilter.tsx
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+function KeepTagFilter({
   query,
-  pageSize,
-  urlSync,
-  urlAdapter,
-  features
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  onValueChange,
+  allLabel,
+  ariaLabel,
+  renderTag,
+  render,
+  children,
+  asChild = false,
+  className,
+  ...rootProps
 }) {
-  const enabled = {
-    search: true,
-    sort: true,
-    pagination: true,
-    tagFilter: false,
-    bulkActions: false,
-    ...features
-  };
-  const [searchValue, setSearchValue] = useState3(query.search?.query ?? "");
-  const [sort, setSort] = useState3(query.sort ?? { by: "updatedAt", direction: "desc" });
-  const [tag, setTag] = useState3(query.tags?.[0]);
-  const [page, setPage] = useState3(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,
+  const view = useKeepTagFilter({ query, controlledValue, defaultValue, onChange, onValueChange });
+  const contentChildren = asChild && isValidElement2(children) ? void 0 : children;
+  const body = render ? render(view.state) : typeof contentChildren === "function" ? contentChildren(view.state) : contentChildren ?? /* @__PURE__ */ jsxs5("fieldset", { children: [
+    /* @__PURE__ */ jsx8("legend", { children: ariaLabel ?? view.labels.aria }),
+    /* @__PURE__ */ jsx8(
+      "button",
+      {
+        type: "button",
+        "data-keep-action": "filter-all-tags",
+        "aria-pressed": view.state.value === void 0,
+        onClick: () => view.state.select(),
+        children: allLabel ?? view.labels.all
+      }
+    ),
+    view.state.tags.map((tag) => /* @__PURE__ */ jsxs5(
+      "button",
+      {
+        type: "button",
+        "data-keep-action": "filter-tag",
+        "aria-pressed": view.state.value === tag,
+        onClick: () => view.state.select(tag),
+        children: [
+          renderTag ? renderTag(tag, view.state.tagCounts[tag] ?? 0, view.state.value === tag) : tag,
+          /* @__PURE__ */ jsxs5("span", { children: [
+            " (",
+            view.state.tagCounts[tag] ?? 0,
+            ")"
+          ] })
+        ]
+      },
+      tag
+    ))
+  ] });
+  return renderRoot(
+    asChild,
+    isValidElement2(children) ? children : void 0,
+    {
+      ...rootProps,
+      className,
+      "data-keepkit": "tag-filter",
+      "data-state": view.state.value === void 0 ? "all" : "filtered",
+      "data-loading": view.isLoading ? "true" : void 0
+    },
+    body,
+    "KeepTagFilter"
+  );
+}
+
+// src/features/query/hooks/useQueryControls.ts
+import { useEffect as useEffect4, useState as useState5 } from "react";
+function useKeepSearchInput(options) {
+  const { controlledValue, defaultValue, debounceMs, onValueChange } = options;
+  const [uncontrolledValue, setUncontrolledValue] = useState5(defaultValue);
+  const value = controlledValue ?? uncontrolledValue;
+  useEffect4(() => {
+    if (!onValueChange) return;
+    if (debounceMs <= 0) {
+      onValueChange(value);
+      return;
+    }
+    const timer = window.setTimeout(() => onValueChange(value), debounceMs);
+    return () => window.clearTimeout(timer);
+  }, [debounceMs, onValueChange, value]);
+  return {
+    value,
+    label: useUiLabel("search"),
+    change: (event) => {
+      if (controlledValue === void 0) setUncontrolledValue(event.currentTarget.value);
+    }
+  };
+}
+function useKeepSortSelect(options) {
+  const { controlledValue, defaultValue, onValueChange } = options;
+  const [uncontrolledValue, setUncontrolledValue] = useState5(defaultValue);
+  const value = controlledValue ?? uncontrolledValue;
+  return {
+    value,
+    change: (event) => {
+      const nextValue = event.currentTarget.value;
+      if (controlledValue === void 0) setUncontrolledValue(nextValue);
+      const [by, direction] = nextValue.split(":");
+      onValueChange?.(nextValue, { by, direction });
+    },
+    labels: {
+      sort: useUiLabel("sort"),
+      updatedNewest: useUiLabel("updatedNewest"),
+      updatedOldest: useUiLabel("updatedOldest"),
+      savedNewest: useUiLabel("savedNewest"),
+      savedOldest: useUiLabel("savedOldest")
+    }
+  };
+}
+function useKeepPagination(options) {
+  const { totalCount, pageSize, page, maxPageButtons, onPageChange } = options;
+  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);
+  };
+  return {
+    pageCount,
+    currentPage,
+    goToPage,
+    visiblePages: getVisiblePages(currentPage, pageCount, Math.max(1, maxPageButtons)),
+    labels: {
+      previous: useUiLabel("previousPage"),
+      next: useUiLabel("nextPage"),
+      page: useUiLabel("page"),
+      pagination: useUiLabel("pagination")
+    }
+  };
+}
+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/features/query/query-controls.tsx
+import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+function KeepSearchInput({
+  value: controlledValue,
+  defaultValue = "",
+  debounceMs = 300,
+  onValueChange,
+  "aria-label": ariaLabel,
+  placeholder,
+  ...props
+}) {
+  const view = useKeepSearchInput({ controlledValue, defaultValue, debounceMs, onValueChange });
+  return /* @__PURE__ */ jsx9(
+    "input",
+    {
+      ...props,
+      "data-keepkit": "search-input",
+      "data-keep-action": "search",
+      type: "search",
+      value: view.value,
+      "data-state": view.value ? "active" : "idle",
+      "data-disabled": props.disabled ? "true" : void 0,
+      "aria-label": ariaLabel ?? view.label,
+      placeholder: placeholder ?? view.label,
+      onChange: view.change
+    }
+  );
+}
+function KeepSortSelect({
+  value: controlledValue,
+  defaultValue = "updatedAt:desc",
+  onValueChange,
+  "aria-label": ariaLabel,
+  children,
+  ...props
+}) {
+  const view = useKeepSortSelect({ controlledValue, defaultValue, onValueChange });
+  const options = children ?? /* @__PURE__ */ jsxs6(Fragment4, { children: [
+    /* @__PURE__ */ jsx9("option", { value: "updatedAt:desc", children: view.labels.updatedNewest }),
+    /* @__PURE__ */ jsx9("option", { value: "updatedAt:asc", children: view.labels.updatedOldest }),
+    /* @__PURE__ */ jsx9("option", { value: "savedAt:desc", children: view.labels.savedNewest }),
+    /* @__PURE__ */ jsx9("option", { value: "savedAt:asc", children: view.labels.savedOldest })
+  ] });
+  return /* @__PURE__ */ jsx9(
+    "select",
+    {
+      ...props,
+      "data-keepkit": "sort-select",
+      "data-keep-action": "sort",
+      value: view.value,
+      "data-state": "selected",
+      "data-disabled": props.disabled ? "true" : void 0,
+      "aria-label": ariaLabel ?? view.labels.sort,
+      onChange: view.change,
+      children: options
+    }
+  );
+}
+function KeepPagination({
+  totalCount,
+  pageSize,
+  page = 1,
+  maxPageButtons = 7,
+  onPageChange,
+  render,
+  ...props
+}) {
+  const view = useKeepPagination({ totalCount, pageSize, page, maxPageButtons, onPageChange });
+  const navProps = {
+    ...props,
+    "data-keepkit": "pagination",
+    "aria-label": props["aria-label"] ?? view.labels.pagination,
+    "data-state": view.pageCount > 1 ? "active" : "idle"
+  };
+  if (render)
+    return /* @__PURE__ */ jsx9("nav", { ...navProps, children: render({ page: view.currentPage, pageCount: view.pageCount, goToPage: view.goToPage }) });
+  return /* @__PURE__ */ jsxs6("nav", { ...navProps, children: [
+    /* @__PURE__ */ jsx9(
+      "button",
+      {
+        type: "button",
+        "data-keep-action": "previous-page",
+        onClick: () => view.goToPage(view.currentPage - 1),
+        disabled: view.currentPage <= 1,
+        children: view.labels.previous
+      }
+    ),
+    view.visiblePages.map((nextPage) => /* @__PURE__ */ jsx9(
+      "button",
+      {
+        type: "button",
+        "data-keep-action": "select-page",
+        "aria-current": nextPage === view.currentPage ? "page" : void 0,
+        "aria-label": `${view.labels.page} ${nextPage}`,
+        onClick: () => view.goToPage(nextPage),
+        children: nextPage
+      },
+      nextPage
+    )),
+    /* @__PURE__ */ jsx9(
+      "button",
+      {
+        type: "button",
+        "data-keep-action": "next-page",
+        onClick: () => view.goToPage(view.currentPage + 1),
+        disabled: view.currentPage >= view.pageCount,
+        children: view.labels.next
+      }
+    )
+  ] });
+}
+
+// src/features/collection/hooks/useKeepCollection.ts
+import { useKeepList as useKeepList3 } from "@keepkit/core/react";
+import { useMemo as useMemo3, useState as useState6 } from "react";
+function useKeepCollection({
+  query,
+  pageSize,
+  urlSync,
+  urlAdapter,
+  features
+}) {
+  const enabled = {
+    search: true,
+    sort: true,
+    pagination: true,
+    tagFilter: false,
+    bulkActions: false,
+    ...features
+  };
+  const [searchValue, setSearchValue] = useState6(query.search?.query ?? "");
+  const [sort, setSort] = useState6(query.sort ?? { by: "updatedAt", direction: "desc" });
+  const [tag, setTag] = useState6(query.tags?.[0]);
+  const [page, setPage] = useState6(query.pagination?.page ?? 1);
+  const resolvedPageSize = query.pagination?.pageSize ?? pageSize;
+  const resolvedQuery = useMemo3(
+    () => ({
+      ...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
     }),
@@ -2055,7 +2415,7 @@ function useKeepCollection({
     options: typeof urlSync === "object" ? urlSync : {},
     adapter: urlAdapter
   });
-  const list = useKeepList2(resolvedQuery);
+  const list = useKeepList3(resolvedQuery);
   return {
     enabled,
     searchValue,
@@ -2080,108 +2440,38 @@ function useKeepCollection({
   };
 }
 
-// src/KeepList.tsx
+// src/features/collection/KeepList.tsx
 import { KeepErrorBoundary } from "@keepkit/core/react";
-import { isValidElement as isValidElement3 } from "react";
-
-// src/hooks/useKeepListView.ts
-import { useKeepList as useKeepList3 } from "@keepkit/core/react";
-function useKeepListView(query) {
-  return {
-    state: useKeepList3(query),
-    labels: {
-      loading: useUiLabel("loadingItems"),
-      empty: useUiLabel("noItems"),
-      error: useUiLabel("errorItems")
-    }
-  };
-}
+import { isValidElement as isValidElement4 } from "react";
 
-// src/KeepItemCard.tsx
+// src/features/item/KeepItemCard.tsx
 import {
-  createContext as createContext2,
+  createContext as createContext3,
   createElement as createElement2,
-  isValidElement as isValidElement2,
-  useContext as useContext2
+  isValidElement as isValidElement3,
+  useContext as useContext3,
+  useEffect as useEffect5,
+  useState as useState8
 } from "react";
 
-// src/hooks/useKeepItemCard.ts
-import { useKeepItem as useKeepItem2 } from "@keepkit/core/react";
-function useKeepItemCard(options) {
-  const {
-    item,
-    title,
-    getTitle,
-    getImageProps,
-    href: hrefOption,
-    linkTargetAttribute,
-    linkRel,
-    onRemoveError,
-    onRemoved
-  } = options;
-  const itemState = useKeepItem2(item);
-  const emitFeedback = useKeepUiFeedback();
-  const removedMessage = useUiLabel("removedMessage");
-  const restoredMessage = useUiLabel("restoredMessage");
-  const undoLabel = useUiLabel("undo");
-  const resolvedTitle = typeof title === "function" ? title(item) : title ?? getTitle?.(item) ?? getMetaTitle(item.meta) ?? item.id;
-  const imageProps = getImageProps?.(item, resolvedTitle);
-  const href = typeof hrefOption === "function" ? hrefOption(item) : hrefOption;
-  const isAvailable = item.status === void 0 || item.status === "available";
-  const isExternalLink = href ? /^(?:[a-z][a-z\d+.-]*:|\/\/)/i.test(href) : false;
-  const statusLabelKey = item.status && item.status !== "available" ? getStatusLabelKey(item.status) : "statusUnknown";
-  const unavailableLabel = useUiLabel(statusLabelKey);
-  const remove = async () => {
-    const wasSaved = itemState.isSaved;
-    try {
-      await itemState.removeWithUndo();
-      onRemoved?.(item);
-      if (!wasSaved) return;
-      emitFeedback({
-        type: "item-removed",
-        item,
-        message: removedMessage,
-        undoLabel,
-        undo: async () => {
-          await itemState.undo();
-          emitFeedback({ type: "item-restored", item, items: [item], message: restoredMessage });
-        }
-      });
-    } catch (cause) {
-      onRemoveError?.(cause);
-    }
-  };
-  const state = {
-    item,
-    isSaved: itemState.isSaved,
-    isMutating: itemState.isMutating,
-    error: itemState.error,
-    remove,
-    status: item.status
-  };
+// src/features/item/hooks/useKeepItemStatusBadge.ts
+function useKeepItemStatusBadge(status) {
   return {
-    itemState,
-    state,
-    resolvedTitle,
-    imageProps,
-    href,
-    isAvailable,
-    displayStatus: getDisplayStatus(item.status),
-    resolvedLinkTarget: linkTargetAttribute ?? (isExternalLink ? "_blank" : void 0),
-    resolvedLinkRel: linkRel ?? (isExternalLink ? "noreferrer" : void 0),
-    statusLabel: item.status && item.status !== "available" ? unavailableLabel : void 0,
-    remove,
-    labels: {
-      save: useUiLabel("save"),
-      savedAt: useUiLabel("saved"),
-      error: useUiLabel("error"),
-      remove: useUiLabel("remove"),
-      tags: useUiLabel("tags")
-    }
+    resolvedStatus: getDisplayStatus(status),
+    statusLabel: useUiLabel(getStatusLabelKey(status)),
+    icon: getStatusIcon(status)
   };
 }
+function getStatusIcon(status) {
+  if (status === "available") return "check";
+  if (status === "expired") return "clock";
+  if (status === "removed" || status === "deleted") return "ban";
+  return "lock";
+}
 function getStatusLabelKey(status) {
   switch (status) {
+    case "available":
+      return "statusAvailable";
     case "expired":
       return "statusExpired";
     case "removed":
@@ -2190,28 +2480,85 @@ function getStatusLabelKey(status) {
       return "statusDeleted";
     case "private":
       return "statusPrivate";
-    default:
+    case "unknown":
       return "statusUnknown";
+    case "restricted":
+      return "statusPrivate";
   }
 }
 function getDisplayStatus(status) {
-  if (status === void 0 || status === "available") return "available";
+  if (status === "available") return "available";
   if (status === "expired") return "expired";
-  if (status === "removed") return "removed";
+  if (status === "removed" || status === "deleted") return "removed";
   return "restricted";
 }
 
-// src/hooks/useKeepStaleNotice.ts
-import { useKeepContext as useKeepContext2 } from "@keepkit/core/react";
-import { useState as useState4 } from "react";
+// src/features/item/KeepItemStatusBadge.tsx
+import { Fragment as Fragment5, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+function KeepItemStatusBadge({ status = "available", label, className, ...props }) {
+  const view = useKeepItemStatusBadge(status);
+  return /* @__PURE__ */ jsxs7(
+    "span",
+    {
+      ...props,
+      className,
+      role: "img",
+      "aria-label": props["aria-label"] ?? view.statusLabel,
+      "data-keepkit": "status-badge",
+      "data-status": status,
+      "data-item-status": view.resolvedStatus,
+      children: [
+        /* @__PURE__ */ jsx10(StatusIcon, { name: view.icon }),
+        /* @__PURE__ */ jsx10("span", { "data-status-label": "true", children: label ?? view.statusLabel })
+      ]
+    }
+  );
+}
+function StatusIcon({ name }) {
+  return /* @__PURE__ */ jsxs7(
+    "svg",
+    {
+      "data-status-icon": name,
+      viewBox: "0 0 24 24",
+      width: "1em",
+      height: "1em",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        name === "check" ? /* @__PURE__ */ jsx10("path", { d: "m5 12 4 4L19 6" }) : null,
+        name === "clock" ? /* @__PURE__ */ jsxs7(Fragment5, { children: [
+          /* @__PURE__ */ jsx10("circle", { cx: "12", cy: "12", r: "8" }),
+          /* @__PURE__ */ jsx10("path", { d: "M12 7v5l3 2" })
+        ] }) : null,
+        name === "ban" ? /* @__PURE__ */ jsxs7(Fragment5, { children: [
+          /* @__PURE__ */ jsx10("circle", { cx: "12", cy: "12", r: "8" }),
+          /* @__PURE__ */ jsx10("path", { d: "m6.5 6.5 11 11" })
+        ] }) : null,
+        name === "lock" ? /* @__PURE__ */ jsxs7(Fragment5, { children: [
+          /* @__PURE__ */ jsx10("rect", { x: "5", y: "10", width: "14", height: "10", rx: "2" }),
+          /* @__PURE__ */ jsx10("path", { d: "M8 10V7a4 4 0 0 1 8 0v3" })
+        ] }) : null
+      ]
+    }
+  );
+}
+
+// src/features/status/hooks/useKeepStaleNotice.ts
+import { useKeepContext as useKeepContext3 } from "@keepkit/core/react";
+import { useState as useState7 } from "react";
 function useKeepStaleNotice({ item, onRetry, onRemoved }) {
-  const context = useKeepContext2();
+  const context = useKeepContext3();
   const emitFeedback = useKeepUiFeedback();
   const removedMessage = useUiLabel("removedMessage");
   const restoredMessage = useUiLabel("restoredMessage");
   const undoLabel = useUiLabel("undo");
-  const [isRetrying, setIsRetrying] = useState4(false);
-  const [error, setError] = useState4(null);
+  const [isRetrying, setIsRetrying] = useState7(false);
+  const [error, setError] = useState7(null);
   async function retry() {
     setError(null);
     setIsRetrying(true);
@@ -2257,7 +2604,7 @@ function useKeepStaleNotice({ item, onRetry, onRemoved }) {
   };
 }
 function useKeepPruneStale({ statuses, onPruned }) {
-  const context = useKeepContext2();
+  const context = useKeepContext3();
   const emitFeedback = useKeepUiFeedback();
   const staleItems = context.items.filter((item) => item.status && statuses.includes(item.status));
   const staleIds = staleItems.map((item) => item.id);
@@ -2290,54 +2637,8 @@ function useKeepPruneStale({ statuses, onPruned }) {
   };
 }
 
-// src/hooks/useKeepItemStatusBadge.ts
-function useKeepItemStatusBadge(status) {
-  return { resolvedStatus: getDisplayStatus2(status), statusLabel: useUiLabel(getStatusLabelKey2(status)) };
-}
-function getStatusLabelKey2(status) {
-  switch (status) {
-    case "available":
-      return "statusAvailable";
-    case "expired":
-      return "statusExpired";
-    case "removed":
-      return "statusRemoved";
-    case "deleted":
-      return "statusDeleted";
-    case "private":
-      return "statusPrivate";
-    case "unknown":
-      return "statusUnknown";
-    case "restricted":
-      return "statusPrivate";
-  }
-}
-function getDisplayStatus2(status) {
-  if (status === "available") return "available";
-  if (status === "expired") return "expired";
-  if (status === "removed") return "removed";
-  return "restricted";
-}
-
-// src/KeepItemStatusBadge.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
-function KeepItemStatusBadge({ status = "available", label, className, ...props }) {
-  const view = useKeepItemStatusBadge(status);
-  return /* @__PURE__ */ jsx7(
-    "span",
-    {
-      ...props,
-      className,
-      "data-keepkit": "status-badge",
-      "data-status": status,
-      "data-item-status": view.resolvedStatus,
-      children: label ?? view.statusLabel
-    }
-  );
-}
-
-// src/KeepStaleNotice.tsx
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+// src/features/status/KeepStaleNotice.tsx
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 function KeepStaleNotice({
   item,
   onRetry,
@@ -2349,11 +2650,11 @@ function KeepStaleNotice({
   ...props
 }) {
   const view = useKeepStaleNotice({ item, onRetry, onRemoved });
-  return /* @__PURE__ */ jsxs4("aside", { ...props, className, "data-keepkit": "stale-notice", "data-state": view.error ? "error" : "stale", children: [
-    /* @__PURE__ */ jsx8(KeepItemStatusBadge, { status: view.status }),
-    children ?? (item.statusReason ? /* @__PURE__ */ jsx8("p", { children: item.statusReason }) : null),
-    /* @__PURE__ */ jsxs4("div", { children: [
-      /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs8("aside", { ...props, className, "data-keepkit": "stale-notice", "data-state": view.error ? "error" : "stale", children: [
+    /* @__PURE__ */ jsx11(KeepItemStatusBadge, { status: view.status }),
+    children ?? (item.statusReason ? /* @__PURE__ */ jsx11("p", { children: item.statusReason }) : null),
+    /* @__PURE__ */ jsxs8("div", { children: [
+      /* @__PURE__ */ jsx11(
         "button",
         {
           type: "button",
@@ -2363,7 +2664,7 @@ function KeepStaleNotice({
           children: retryLabel ?? view.labels.retry
         }
       ),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx11(
         "button",
         {
           type: "button",
@@ -2374,7 +2675,7 @@ function KeepStaleNotice({
         }
       )
     ] }),
-    view.error ? /* @__PURE__ */ jsx8("p", { role: "alert", children: view.error instanceof Error ? view.error.message : view.labels.error }) : null
+    view.error ? /* @__PURE__ */ jsx11("p", { role: "alert", children: view.error instanceof Error ? view.error.message : view.labels.error }) : null
   ] });
 }
 function KeepPruneStaleButton({
@@ -2386,7 +2687,7 @@ function KeepPruneStaleButton({
   ...props
 }) {
   const view = useKeepPruneStale({ statuses, onPruned });
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx11(
     "button",
     {
       ...props,
@@ -2402,11 +2703,107 @@ function KeepPruneStaleButton({
   );
 }
 
-// src/KeepItemCard.tsx
-import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
-var KeepItemCardContext = createContext2(null);
+// src/features/item/hooks/useKeepItemCard.ts
+import { useKeepItem as useKeepItem2 } from "@keepkit/core/react";
+function useKeepItemCard(options) {
+  const {
+    item,
+    title,
+    getTitle,
+    getImageProps,
+    href: hrefOption,
+    linkTargetAttribute,
+    linkRel,
+    onRemoveError,
+    onRemoved
+  } = options;
+  const itemState = useKeepItem2(item);
+  const emitFeedback = useKeepUiFeedback();
+  const removedMessage = useUiLabel("removedMessage");
+  const restoredMessage = useUiLabel("restoredMessage");
+  const undoLabel = useUiLabel("undo");
+  const resolvedTitle = typeof title === "function" ? title(item) : title ?? getTitle?.(item) ?? getMetaTitle(item.meta) ?? item.id;
+  const imageProps = getImageProps?.(item, resolvedTitle);
+  const href = typeof hrefOption === "function" ? hrefOption(item) : hrefOption;
+  const isAvailable = item.status === void 0 || item.status === "available";
+  const isExternalLink = href ? /^(?:[a-z][a-z\d+.-]*:|\/\/)/i.test(href) : false;
+  const statusLabelKey = item.status && item.status !== "available" ? getStatusLabelKey2(item.status) : "statusUnknown";
+  const unavailableLabel = useUiLabel(statusLabelKey);
+  const remove = async () => {
+    const wasSaved = itemState.isSaved;
+    try {
+      await itemState.removeWithUndo();
+      onRemoved?.(item);
+      if (!wasSaved) return;
+      emitFeedback({
+        type: "item-removed",
+        item,
+        message: removedMessage,
+        undoLabel,
+        undo: async () => {
+          await itemState.undo();
+          emitFeedback({ type: "item-restored", item, items: [item], message: restoredMessage });
+        }
+      });
+    } catch (cause) {
+      onRemoveError?.(cause);
+    }
+  };
+  const state = {
+    item,
+    isSaved: itemState.isSaved,
+    isMutating: itemState.isMutating,
+    error: itemState.error,
+    remove,
+    status: item.status
+  };
+  return {
+    itemState,
+    state,
+    resolvedTitle,
+    imageProps,
+    href,
+    isAvailable,
+    displayStatus: getDisplayStatus2(item.status),
+    resolvedLinkTarget: linkTargetAttribute ?? (isExternalLink ? "_blank" : void 0),
+    resolvedLinkRel: linkRel ?? (isExternalLink ? "noreferrer" : void 0),
+    statusLabel: item.status && item.status !== "available" ? unavailableLabel : void 0,
+    remove,
+    labels: {
+      save: useUiLabel("save"),
+      savedAt: useUiLabel("saved"),
+      error: useUiLabel("error"),
+      remove: useUiLabel("remove"),
+      tags: useUiLabel("tags")
+    }
+  };
+}
+function getStatusLabelKey2(status) {
+  switch (status) {
+    case "expired":
+      return "statusExpired";
+    case "removed":
+      return "statusRemoved";
+    case "deleted":
+      return "statusDeleted";
+    case "private":
+      return "statusPrivate";
+    default:
+      return "statusUnknown";
+  }
+}
+function getDisplayStatus2(status) {
+  if (status === void 0 || status === "available") return "available";
+  if (status === "expired") return "expired";
+  if (status === "removed") return "removed";
+  return "restricted";
+}
+
+// src/features/item/KeepItemCard.tsx
+import { Fragment as Fragment6, jsx as jsx12, jsxs as jsxs9 } 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 +2833,7 @@ function KeepItemCardRoot({
   linkComponent: LinkComponent,
   linkTargetAttribute,
   linkRel,
+  highlightQuery,
   className,
   ...rootProps
 }) {
@@ -2450,7 +2848,9 @@ function KeepItemCardRoot({
     onRemoveError,
     onRemoved
   });
-  const contentChildren = asChild && isValidElement2(children) ? void 0 : children;
+  const contextQuery = useKeepSearchQuery();
+  const searchQuery = highlightQuery ?? contextQuery;
+  const contentChildren = asChild && isValidElement3(children) ? void 0 : children;
   function renderLink(content) {
     if (!view.href || !view.isAvailable) return content;
     const linkProps = {
@@ -2460,28 +2860,49 @@ function KeepItemCardRoot({
       onClick: (event) => onOpen?.(item, event),
       children: content
     };
-    return LinkComponent ? /* @__PURE__ */ jsx9(LinkComponent, { ...linkProps }) : /* @__PURE__ */ jsx9("a", { ...linkProps });
+    return LinkComponent ? /* @__PURE__ */ jsx12(LinkComponent, { ...linkProps }) : /* @__PURE__ */ jsx12("a", { ...linkProps });
   }
   function renderTitle(content) {
     if (linkTarget !== "title") return content;
     if (view.isAvailable) return renderLink(content);
-    return view.href ? /* @__PURE__ */ jsx9("span", { "aria-disabled": "true", "data-link-disabled": "true", children: content }) : content;
+    return view.href ? /* @__PURE__ */ jsx12("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] = useState8(imageSource ? "loading" : "error");
+  useEffect5(() => {
+    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__ */ jsx12(ImageComponent, { ...imagePropsWithHandlers }) : /* @__PURE__ */ jsx12("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: [
-    /* @__PURE__ */ jsxs5("span", { children: [
+  const meta = showSavedAt ? /* @__PURE__ */ jsxs9("div", { "data-card-meta": true, children: [
+    /* @__PURE__ */ jsxs9("span", { children: [
       view.labels.savedAt,
       ":"
     ] }),
     " ",
-    /* @__PURE__ */ jsx9("time", { dateTime: new Date(item.savedAt).toISOString(), children: formatSavedAt(item.savedAt) })
+    /* @__PURE__ */ jsx12("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: [
-    showSaveButton ? /* @__PURE__ */ jsx9(
+  const error = view.itemState.error ? /* @__PURE__ */ jsx12("p", { role: "alert", children: getErrorMessage2(view.itemState.error, view.labels.error) }) : null;
+  const actions = view.statusLabel ? /* @__PURE__ */ jsx12(KeepStaleNotice, { item, onRetry, onRemoved }) : /* @__PURE__ */ jsxs9(Fragment6, { children: [
+    showSaveButton ? /* @__PURE__ */ jsx12(
       KeepButton,
       {
         item: toKeepButtonItem(item),
@@ -2489,7 +2910,7 @@ function KeepItemCardRoot({
         getAriaLabel: (buttonState) => `${buttonState.isSaved ? view.labels.remove : view.labels.save} ${String(view.resolvedTitle)}`
       }
     ) : null,
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx12(
       "button",
       {
         type: "button",
@@ -2503,25 +2924,27 @@ 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__ */ jsx12(KeepHighlight, { query: searchQuery, children: content })
   };
-  const defaultBody = /* @__PURE__ */ jsxs5(Fragment3, { children: [
-    /* @__PURE__ */ jsx9(KeepItemCardMedia, {}),
-    /* @__PURE__ */ jsx9(KeepItemCardContent, {}),
-    /* @__PURE__ */ jsx9(KeepItemCardActions, {})
+  const defaultBody = /* @__PURE__ */ jsxs9(Fragment6, { children: [
+    /* @__PURE__ */ jsx12(KeepItemCardMedia, {}),
+    /* @__PURE__ */ jsx12(KeepItemCardContent, {}),
+    /* @__PURE__ */ jsx12(KeepItemCardActions, {})
   ] });
   const body = render ? render(view.state) : typeof contentChildren === "function" ? contentChildren(view.state) : contentChildren ?? defaultBody;
   const linkedBody = linkTarget === "card" && view.isAvailable ? renderLink(body) : body;
   const root = renderRoot(
     asChild,
-    isValidElement2(children) ? children : void 0,
+    isValidElement3(children) ? children : void 0,
     {
       ...rootProps,
       className,
@@ -2536,38 +2959,52 @@ function KeepItemCardRoot({
     linkedBody,
     "KeepItemCard"
   );
-  return /* @__PURE__ */ jsx9(KeepItemCardContext.Provider, { value: compoundValue, children: root });
+  return /* @__PURE__ */ jsx12(KeepItemCardContext.Provider, { value: compoundValue, children: root });
 }
 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__ */ jsx12("div", { ...props, "data-keep-card-part": "media", "data-media-status": context.imageStatus, "data-aspect-ratio": "1/1", children: children ?? context.image ?? /* @__PURE__ */ jsx12("span", { role: "img", "aria-label": context.fallbackLabel, "data-keep-card-fallback": "true", children: fallback ?? /* @__PURE__ */ jsx12(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: [
-    /* @__PURE__ */ jsx9(KeepItemCardTitle, {}),
+  return /* @__PURE__ */ jsx12("div", { ...props, "data-keep-card-part": "content", children: children === void 0 ? /* @__PURE__ */ jsxs9(Fragment6, { children: [
+    /* @__PURE__ */ jsx12(KeepItemCardTitle, {}),
     context.meta,
-    /* @__PURE__ */ jsx9(KeepItemCardTags, {}),
+    /* @__PURE__ */ jsx12(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)
+    { ...props, "data-keep-card-part": "title", "data-line-clamp": "2" },
+    context.renderTitle(context.renderText(children ?? context.resolvedTitle))
   );
 }
+function KeepMediaPlaceholderIcon() {
+  return /* @__PURE__ */ jsxs9("svg", { "data-media-fallback-icon": "true", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx12(
+      "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__ */ jsx12("circle", { cx: "9", cy: "9", r: "1.5", fill: "currentColor" }),
+    /* @__PURE__ */ jsx12("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;
   if (children === void 0 && context.tags.length === 0) return null;
-  return /* @__PURE__ */ jsx9("ul", { ...props, "aria-label": props["aria-label"] ?? context.tagsLabel, "data-keep-card-part": "tags", children: children ?? context.tags.map((tag) => /* @__PURE__ */ jsx9("li", { children: tag }, tag)) });
+  return /* @__PURE__ */ jsx12("ul", { ...props, "aria-label": props["aria-label"] ?? context.tagsLabel, "data-keep-card-part": "tags", children: children ?? context.tags.map((tag) => /* @__PURE__ */ jsx12("li", { children: tag }, tag)) });
 }
 function KeepItemCardActions({ children, ...props }) {
   const context = useKeepItemCardCompound("Actions");
-  return /* @__PURE__ */ jsx9("div", { ...props, "data-keep-card-part": "actions", children: children ?? context.actions });
+  return /* @__PURE__ */ jsx12("div", { ...props, "data-keep-card-part": "actions", children: children ?? context.actions });
 }
 var KeepItemCard = Object.assign(KeepItemCardRoot, {
   Media: KeepItemCardMedia,
@@ -2577,12 +3014,12 @@ var KeepItemCard = Object.assign(KeepItemCardRoot, {
   Actions: KeepItemCardActions
 });
 function KeepItemCardSkeleton({ layout = "list", ...props }) {
-  return /* @__PURE__ */ jsxs5("article", { ...props, "aria-hidden": "true", "data-keepkit": "card-skeleton", "data-layout": layout, "data-state": "loading", children: [
-    /* @__PURE__ */ jsx9("span", { "data-skeleton-part": "media" }),
-    /* @__PURE__ */ jsx9("span", { "data-skeleton-part": "title" }),
-    /* @__PURE__ */ jsx9("span", { "data-skeleton-part": "meta" }),
-    /* @__PURE__ */ jsx9("span", { "data-skeleton-part": "tag" }),
-    /* @__PURE__ */ jsx9("span", { "data-skeleton-part": "tag" })
+  return /* @__PURE__ */ jsxs9("article", { ...props, "aria-hidden": "true", "data-keepkit": "card-skeleton", "data-layout": layout, "data-state": "loading", children: [
+    /* @__PURE__ */ jsx12("span", { "data-skeleton-part": "media" }),
+    /* @__PURE__ */ jsx12("span", { "data-skeleton-part": "title" }),
+    /* @__PURE__ */ jsx12("span", { "data-skeleton-part": "meta" }),
+    /* @__PURE__ */ jsx12("span", { "data-skeleton-part": "tag" }),
+    /* @__PURE__ */ jsx12("span", { "data-skeleton-part": "tag" })
   ] });
 }
 function formatSavedAt(timestamp) {
@@ -2592,19 +3029,97 @@ function getErrorMessage2(error, fallback) {
   return error instanceof Error ? error.message : fallback;
 }
 
-// src/KeepList.tsx
-import { Fragment as Fragment4, 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 });
-  if (fallback === void 0 && onBoundaryError === void 0) return content;
-  return /* @__PURE__ */ jsx10(KeepErrorBoundary, { fallback, onError: onBoundaryError, resetKey: boundaryResetKey, children: content });
-}
-function KeepListContent({
-  query,
-  children,
-  renderItem,
-  loading,
+// src/features/collection/hooks/useKeepListView.ts
+import { useKeepList as useKeepList4 } from "@keepkit/core/react";
+function useKeepListView(query) {
+  return {
+    state: useKeepList4(query),
+    labels: {
+      loading: useUiLabel("loadingItems"),
+      empty: useUiLabel("noItems"),
+      error: useUiLabel("errorItems")
+    }
+  };
+}
+
+// src/features/collection/hooks/useRovingTabIndex.ts
+import { useCallback as useCallback3, useEffect as useEffect6, 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]);
+  useEffect6(() => {
+    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/features/collection/KeepList.tsx
+import { Fragment as Fragment7, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+function KeepList(props) {
+  const { fallback, onBoundaryError, boundaryResetKey, ...listProps } = props;
+  const content = /* @__PURE__ */ jsx13(KeepListContent, { ...listProps });
+  if (fallback === void 0 && onBoundaryError === void 0) return content;
+  return /* @__PURE__ */ jsx13(KeepErrorBoundary, { fallback, onError: onBoundaryError, resetKey: boundaryResetKey, children: content });
+}
+function KeepListContent({
+  query,
+  children,
+  renderItem,
+  loading,
   renderLoading,
   loadingCount = 6,
   empty,
@@ -2612,10 +3127,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,
@@ -2630,7 +3148,7 @@ function KeepListContent({
   });
   return renderRoot(
     asChild,
-    asChild && isValidElement3(children) ? children : void 0,
+    asChild && isValidElement4(children) ? children : void 0,
     {
       ...rootProps,
       className,
@@ -2638,9 +3156,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__ */ jsx13(KeepSearchQueryProvider, { query: query?.search?.query, children: body }),
     "KeepList"
   );
 }
@@ -2655,437 +3184,280 @@ 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: [
-      /* @__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) => (
+    return /* @__PURE__ */ jsxs10(Fragment7, { children: [
+      /* @__PURE__ */ jsx13("span", { role: "status", "data-keepkit": "loading-label", children: options.loadingLabel }),
+      /* @__PURE__ */ jsx13("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.
-        /* @__PURE__ */ jsx10("li", { children: /* @__PURE__ */ jsx10(KeepItemCardSkeleton, { layout: options.layout }) }, index)
+        /* @__PURE__ */ jsx13("li", { children: /* @__PURE__ */ jsx13(KeepItemCardSkeleton, { layout: options.layout }) }, index)
       )) })
     ] });
   }
   if (state.isHydrated && state.items.length === 0) return resolveContent(options.empty, state);
   if (typeof options.children === "function") return options.children(state);
-  if (options.children !== void 0 && !isValidElement3(options.children)) return options.children;
-  return /* @__PURE__ */ jsx10("ul", { "data-layout": options.layout, children: state.items.map(
-    (item) => options.renderItem ? options.renderItem(item, state) : /* @__PURE__ */ jsx10("li", { children: /* @__PURE__ */ jsx10(KeepItemCard, { item, ...options.itemCardProps }) }, item.id)
+  if (options.children !== void 0 && !isValidElement4(options.children)) return options.children;
+  return /* @__PURE__ */ jsx13("ul", { "data-layout": options.layout, children: state.items.map(
+    (item) => options.renderItem ? options.renderItem(item, state) : /* @__PURE__ */ jsx13("li", { children: /* @__PURE__ */ jsx13(KeepItemCard, { item, ...options.itemCardProps }) }, item.id)
   ) });
 }
 
-// src/KeepTagFilter.tsx
-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";
-function useKeepTagFilter(options) {
-  const { query, controlledValue, defaultValue, onChange, onValueChange } = options;
-  const [uncontrolledValue, setUncontrolledValue] = useState5(defaultValue);
-  const resolvedValue = controlledValue ?? uncontrolledValue;
-  const list = useKeepList4({
-    ...query,
-    tags: resolvedValue ? [...query?.tags ?? [], resolvedValue] : query?.tags
-  });
-  const select = useCallback3(
-    (tag) => {
-      if (controlledValue === void 0) setUncontrolledValue(tag);
-      onChange?.(tag);
-      onValueChange?.(tag);
-    },
-    [controlledValue, onChange, onValueChange]
-  );
-  const state = useMemo3(
-    () => ({ tags: list.tags, tagCounts: list.tagCounts, value: resolvedValue, select }),
-    [list.tagCounts, list.tags, resolvedValue, select]
-  );
-  return {
-    state,
-    isLoading: list.isLoading,
-    labels: { all: useUiLabel("allTags"), aria: useUiLabel("filterTags") }
-  };
+// src/features/collection/KeepCollection.tsx
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+function KeepCollection(props) {
+  const { fallback, onBoundaryError, boundaryResetKey, ...collectionProps } = props;
+  const content = /* @__PURE__ */ jsx14(KeepCollectionContent, { ...collectionProps });
+  if (fallback === void 0 && onBoundaryError === void 0) return content;
+  return /* @__PURE__ */ jsx14(KeepErrorBoundary2, { fallback, onError: onBoundaryError, resetKey: boundaryResetKey, children: content });
 }
-
-// src/KeepTagFilter.tsx
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
-function KeepTagFilter({
-  query,
-  value: controlledValue,
-  defaultValue,
-  onChange,
-  onValueChange,
-  allLabel,
-  ariaLabel,
-  renderTag,
-  render,
-  children,
-  asChild = false,
+function KeepCollectionContent({
+  query = {},
+  pageSize = 20,
+  layout = "list",
+  urlSync = false,
+  urlAdapter,
+  features,
+  renderItem,
+  itemCardProps,
+  loading,
+  renderLoading,
+  loadingCount,
+  empty,
+  error,
   className,
   ...rootProps
 }) {
-  const view = useKeepTagFilter({ query, controlledValue, defaultValue, onChange, onValueChange });
-  const contentChildren = asChild && isValidElement4(children) ? void 0 : children;
-  const body = render ? render(view.state) : typeof contentChildren === "function" ? contentChildren(view.state) : contentChildren ?? /* @__PURE__ */ jsxs7("fieldset", { children: [
-    /* @__PURE__ */ jsx11("legend", { children: ariaLabel ?? view.labels.aria }),
-    /* @__PURE__ */ jsx11(
-      "button",
-      {
-        type: "button",
-        "data-keep-action": "filter-all-tags",
-        "aria-pressed": view.state.value === void 0,
-        onClick: () => view.state.select(),
-        children: allLabel ?? view.labels.all
-      }
-    ),
-    view.state.tags.map((tag) => /* @__PURE__ */ jsxs7(
-      "button",
-      {
-        type: "button",
-        "data-keep-action": "filter-tag",
-        "aria-pressed": view.state.value === tag,
-        onClick: () => view.state.select(tag),
-        children: [
-          renderTag ? renderTag(tag, view.state.tagCounts[tag] ?? 0, view.state.value === tag) : tag,
-          /* @__PURE__ */ jsxs7("span", { children: [
-            " (",
-            view.state.tagCounts[tag] ?? 0,
-            ")"
-          ] })
-        ]
-      },
-      tag
-    ))
-  ] });
-  return renderRoot(
-    asChild,
-    isValidElement4(children) ? children : void 0,
+  const view = useKeepCollection({ query, pageSize, urlSync, urlAdapter, features });
+  return /* @__PURE__ */ jsxs11(
+    "section",
     {
       ...rootProps,
       className,
-      "data-keepkit": "tag-filter",
-      "data-state": view.state.value === void 0 ? "all" : "filtered",
-      "data-loading": view.isLoading ? "true" : void 0
-    },
-    body,
-    "KeepTagFilter"
+      "data-keepkit": "collection",
+      "data-layout": layout,
+      "aria-busy": view.list.isLoading || view.list.isMutating || rootProps["aria-busy"],
+      "data-state": getCollectionState(view.list),
+      "data-loading": view.list.isLoading || view.list.isMutating ? "true" : void 0,
+      children: [
+        /* @__PURE__ */ jsxs11("div", { children: [
+          view.enabled.search ? /* @__PURE__ */ jsx14(KeepSearchInput, { value: view.searchValue, onValueChange: view.setSearchValue }) : null,
+          view.enabled.sort ? /* @__PURE__ */ jsx14(KeepSortSelect, { value: view.sortValue, onValueChange: view.setSortValue }) : null,
+          view.enabled.tagFilter ? /* @__PURE__ */ jsx14(KeepTagFilter, { query, value: view.tag, onValueChange: view.setTag }) : null
+        ] }),
+        /* @__PURE__ */ jsx14(
+          KeepList,
+          {
+            query: view.resolvedQuery,
+            renderItem,
+            itemCardProps,
+            layout,
+            loading,
+            renderLoading,
+            loadingCount,
+            empty,
+            error
+          }
+        ),
+        view.enabled.pagination ? /* @__PURE__ */ jsx14(
+          KeepPagination,
+          {
+            totalCount: view.list.totalCount,
+            pageSize: view.resolvedPageSize,
+            page: view.list.page,
+            onPageChange: view.setPage
+          }
+        ) : null,
+        view.enabled.bulkActions ? /* @__PURE__ */ jsx14(KeepBulkActions, { query: view.resolvedQuery }) : null
+      ]
+    }
+  );
+}
+function getCollectionState(list) {
+  if (list.error && list.items.length === 0) return "error";
+  if (list.isLoading && !list.isHydrated) return "loading";
+  if (list.isHydrated && list.items.length === 0) return "empty";
+  return "ready";
+}
+
+// src/features/collection/KeepLayout.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+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__ */ jsx15(
+      "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/hooks/useQueryControls.ts
-import { useEffect as useEffect3, useState as useState6 } from "react";
-function useKeepSearchInput(options) {
-  const { controlledValue, defaultValue, debounceMs, onValueChange } = options;
-  const [uncontrolledValue, setUncontrolledValue] = useState6(defaultValue);
-  const value = controlledValue ?? uncontrolledValue;
-  useEffect3(() => {
-    if (!onValueChange) return;
-    if (debounceMs <= 0) {
-      onValueChange(value);
-      return;
+// src/features/collection/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 [dropTargetIndex, setDropTargetIndex] = 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);
+  }
+  function moveToInsertion(index, insertionIndex) {
+    const next = [...ids];
+    const [id] = next.splice(index, 1);
+    if (id === void 0) return;
+    const targetIndex = Math.min(
+      Math.max(0, insertionIndex > index ? insertionIndex - 1 : insertionIndex),
+      next.length
+    );
+    next.splice(targetIndex, 0, id);
+    if (next[index] === id) return;
+    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,
+        "data-drag-handle": "true",
+        "aria-label": itemLabel(item, index),
+        "aria-grabbed": draggedId === item.id,
+        onDragStart: () => {
+          setDraggedId(item.id);
+          setDropTargetIndex(index);
+        },
+        onDragEnd: () => {
+          setDraggedId(null);
+          setDropTargetIndex(null);
+        },
+        onKeyDown: onHandleKeyDown
+      }
+    };
+    return /* @__PURE__ */ jsx16(
+      "li",
+      {
+        "data-reorder-index": index,
+        "data-dragging": draggedId === item.id ? "true" : void 0,
+        "data-drop-target": draggedId && draggedId !== item.id ? dropTargetIndex === index ? "before" : dropTargetIndex === index + 1 ? "after" : void 0 : void 0,
+        onDragOver: (event) => {
+          if (!draggedId || draggedId === item.id) return;
+          event.preventDefault();
+          const bounds = event.currentTarget.getBoundingClientRect();
+          const insertionIndex = event.clientY > bounds.top + bounds.height / 2 ? index + 1 : index;
+          setDropTargetIndex(insertionIndex);
+        },
+        onDragLeave: (event) => {
+          if (event.currentTarget === event.target) setDropTargetIndex(null);
+        },
+        onDrop: (event) => {
+          event.preventDefault();
+          if (!draggedId || draggedId === item.id) return;
+          const sourceIndex = ids.indexOf(draggedId);
+          setDraggedId(null);
+          setDropTargetIndex(null);
+          moveToInsertion(sourceIndex, dropTargetIndex ?? index);
+        },
+        children: renderItem(item, state)
+      },
+      item.id
+    );
+  }) });
+}
+
+// src/features/editor/KeepNoteEditor.tsx
+import { isValidElement as isValidElement5 } from "react";
+
+// src/features/editor/hooks/useKeepNoteEditor.ts
+import { useKeepItem as useKeepItem3 } from "@keepkit/core/react";
+import { useCallback as useCallback4, useEffect as useEffect7, useRef as useRef5, useState as useState10 } from "react";
+function useKeepNoteEditor({ item, debounceMs, onSaved, onSaveError }) {
+  const itemState = useKeepItem3(item);
+  const { error, isMutating, item: savedItem, updateNote } = itemState;
+  const [note, setNote] = useState10(item.note ?? "");
+  const baselineNote = savedItem?.note ?? item.note ?? "";
+  const isDirty = note !== baselineNote;
+  const lastSavedNoteRef = useRef5(void 0);
+  useEffect7(() => setNote(baselineNote), [baselineNote]);
+  const save = useCallback4(async () => {
+    const nextNote = note.trim() || void 0;
+    try {
+      await updateNote(nextNote);
+      lastSavedNoteRef.current = note;
+      onSaved?.(nextNote);
+    } catch (cause) {
+      onSaveError?.(cause);
+      throw cause;
     }
-    const timer = window.setTimeout(() => onValueChange(value), debounceMs);
+  }, [note, onSaveError, onSaved, updateNote]);
+  useEffect7(() => {
+    if (!isDirty || debounceMs <= 0 || lastSavedNoteRef.current === note) return;
+    const timer = window.setTimeout(() => void save().catch(() => void 0), debounceMs);
     return () => window.clearTimeout(timer);
-  }, [debounceMs, onValueChange, value]);
-  return {
-    value,
-    label: useUiLabel("search"),
-    change: (event) => {
-      if (controlledValue === void 0) setUncontrolledValue(event.currentTarget.value);
-    }
+  }, [debounceMs, isDirty, note, save]);
+  const state = {
+    item,
+    note,
+    setNote,
+    isDirty,
+    isSaving: isMutating,
+    error,
+    save
+  };
+  const submit = (event) => {
+    event.preventDefault();
+    void save().catch(() => void 0);
   };
-}
-function useKeepSortSelect(options) {
-  const { controlledValue, defaultValue, onValueChange } = options;
-  const [uncontrolledValue, setUncontrolledValue] = useState6(defaultValue);
-  const value = controlledValue ?? uncontrolledValue;
   return {
-    value,
-    change: (event) => {
-      const nextValue = event.currentTarget.value;
-      if (controlledValue === void 0) setUncontrolledValue(nextValue);
-      const [by, direction] = nextValue.split(":");
-      onValueChange?.(nextValue, { by, direction });
-    },
-    labels: {
-      sort: useUiLabel("sort"),
-      updatedNewest: useUiLabel("updatedNewest"),
-      updatedOldest: useUiLabel("updatedOldest"),
-      savedNewest: useUiLabel("savedNewest"),
-      savedOldest: useUiLabel("savedOldest")
-    }
-  };
-}
-function useKeepPagination(options) {
-  const { totalCount, pageSize, page, maxPageButtons, onPageChange } = options;
-  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);
-  };
-  return {
-    pageCount,
-    currentPage,
-    goToPage,
-    visiblePages: getVisiblePages(currentPage, pageCount, Math.max(1, maxPageButtons)),
-    labels: {
-      previous: useUiLabel("previousPage"),
-      next: useUiLabel("nextPage"),
-      page: useUiLabel("page"),
-      pagination: useUiLabel("pagination")
-    }
-  };
-}
-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/query-controls.tsx
-import { Fragment as Fragment5, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
-function KeepSearchInput({
-  value: controlledValue,
-  defaultValue = "",
-  debounceMs = 300,
-  onValueChange,
-  "aria-label": ariaLabel,
-  placeholder,
-  ...props
-}) {
-  const view = useKeepSearchInput({ controlledValue, defaultValue, debounceMs, onValueChange });
-  return /* @__PURE__ */ jsx12(
-    "input",
-    {
-      ...props,
-      "data-keepkit": "search-input",
-      "data-keep-action": "search",
-      type: "search",
-      value: view.value,
-      "data-state": view.value ? "active" : "idle",
-      "data-disabled": props.disabled ? "true" : void 0,
-      "aria-label": ariaLabel ?? view.label,
-      placeholder: placeholder ?? view.label,
-      onChange: view.change
-    }
-  );
-}
-function KeepSortSelect({
-  value: controlledValue,
-  defaultValue = "updatedAt:desc",
-  onValueChange,
-  "aria-label": ariaLabel,
-  children,
-  ...props
-}) {
-  const view = useKeepSortSelect({ controlledValue, defaultValue, onValueChange });
-  const options = children ?? /* @__PURE__ */ jsxs8(Fragment5, { 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 }),
-    /* @__PURE__ */ jsx12("option", { value: "savedAt:asc", children: view.labels.savedOldest })
-  ] });
-  return /* @__PURE__ */ jsx12(
-    "select",
-    {
-      ...props,
-      "data-keepkit": "sort-select",
-      "data-keep-action": "sort",
-      value: view.value,
-      "data-state": "selected",
-      "data-disabled": props.disabled ? "true" : void 0,
-      "aria-label": ariaLabel ?? view.labels.sort,
-      onChange: view.change,
-      children: options
-    }
-  );
-}
-function KeepPagination({
-  totalCount,
-  pageSize,
-  page = 1,
-  maxPageButtons = 7,
-  onPageChange,
-  render,
-  ...props
-}) {
-  const view = useKeepPagination({ totalCount, pageSize, page, maxPageButtons, onPageChange });
-  const navProps = {
-    ...props,
-    "data-keepkit": "pagination",
-    "aria-label": props["aria-label"] ?? view.labels.pagination,
-    "data-state": view.pageCount > 1 ? "active" : "idle"
-  };
-  if (render)
-    return /* @__PURE__ */ jsx12("nav", { ...navProps, children: render({ page: view.currentPage, pageCount: view.pageCount, goToPage: view.goToPage }) });
-  return /* @__PURE__ */ jsxs8("nav", { ...navProps, children: [
-    /* @__PURE__ */ jsx12(
-      "button",
-      {
-        type: "button",
-        "data-keep-action": "previous-page",
-        onClick: () => view.goToPage(view.currentPage - 1),
-        disabled: view.currentPage <= 1,
-        children: view.labels.previous
-      }
-    ),
-    view.visiblePages.map((nextPage) => /* @__PURE__ */ jsx12(
-      "button",
-      {
-        type: "button",
-        "data-keep-action": "select-page",
-        "aria-current": nextPage === view.currentPage ? "page" : void 0,
-        "aria-label": `${view.labels.page} ${nextPage}`,
-        onClick: () => view.goToPage(nextPage),
-        children: nextPage
-      },
-      nextPage
-    )),
-    /* @__PURE__ */ jsx12(
-      "button",
-      {
-        type: "button",
-        "data-keep-action": "next-page",
-        onClick: () => view.goToPage(view.currentPage + 1),
-        disabled: view.currentPage >= view.pageCount,
-        children: view.labels.next
-      }
-    )
-  ] });
-}
-
-// src/KeepCollection.tsx
-import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
-function KeepCollection(props) {
-  const { fallback, onBoundaryError, boundaryResetKey, ...collectionProps } = props;
-  const content = /* @__PURE__ */ jsx13(KeepCollectionContent, { ...collectionProps });
-  if (fallback === void 0 && onBoundaryError === void 0) return content;
-  return /* @__PURE__ */ jsx13(KeepErrorBoundary2, { fallback, onError: onBoundaryError, resetKey: boundaryResetKey, children: content });
-}
-function KeepCollectionContent({
-  query = {},
-  pageSize = 20,
-  layout = "list",
-  urlSync = false,
-  urlAdapter,
-  features,
-  renderItem,
-  itemCardProps,
-  loading,
-  renderLoading,
-  loadingCount,
-  empty,
-  error,
-  className,
-  ...rootProps
-}) {
-  const view = useKeepCollection({ query, pageSize, urlSync, urlAdapter, features });
-  return /* @__PURE__ */ jsxs9(
-    "section",
-    {
-      ...rootProps,
-      className,
-      "data-keepkit": "collection",
-      "data-layout": layout,
-      "aria-busy": view.list.isLoading || view.list.isMutating || rootProps["aria-busy"],
-      "data-state": getCollectionState(view.list),
-      "data-loading": view.list.isLoading || view.list.isMutating ? "true" : void 0,
-      children: [
-        /* @__PURE__ */ jsxs9("div", { children: [
-          view.enabled.search ? /* @__PURE__ */ jsx13(KeepSearchInput, { value: view.searchValue, onValueChange: view.setSearchValue }) : null,
-          view.enabled.sort ? /* @__PURE__ */ jsx13(KeepSortSelect, { value: view.sortValue, onValueChange: view.setSortValue }) : null,
-          view.enabled.tagFilter ? /* @__PURE__ */ jsx13(KeepTagFilter, { query, value: view.tag, onValueChange: view.setTag }) : null
-        ] }),
-        /* @__PURE__ */ jsx13(
-          KeepList,
-          {
-            query: view.resolvedQuery,
-            renderItem,
-            itemCardProps,
-            layout,
-            loading,
-            renderLoading,
-            loadingCount,
-            empty,
-            error
-          }
-        ),
-        view.enabled.pagination ? /* @__PURE__ */ jsx13(
-          KeepPagination,
-          {
-            totalCount: view.list.totalCount,
-            pageSize: view.resolvedPageSize,
-            page: view.list.page,
-            onPageChange: view.setPage
-          }
-        ) : null,
-        view.enabled.bulkActions ? /* @__PURE__ */ jsx13(KeepBulkActions, { query: view.resolvedQuery }) : null
-      ]
-    }
-  );
-}
-function getCollectionState(list) {
-  if (list.error && list.items.length === 0) return "error";
-  if (list.isLoading && !list.isHydrated) return "loading";
-  if (list.isHydrated && list.items.length === 0) return "empty";
-  return "ready";
-}
-
-// 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 });
-}
-
-// src/KeepNoteEditor.tsx
-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";
-function useKeepNoteEditor({ item, debounceMs, onSaved, onSaveError }) {
-  const itemState = useKeepItem3(item);
-  const { error, isMutating, item: savedItem, updateNote } = itemState;
-  const [note, setNote] = useState7(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 nextNote = note.trim() || void 0;
-    try {
-      await updateNote(nextNote);
-      lastSavedNoteRef.current = note;
-      onSaved?.(nextNote);
-    } catch (cause) {
-      onSaveError?.(cause);
-      throw cause;
-    }
-  }, [note, onSaveError, onSaved, updateNote]);
-  useEffect4(() => {
-    if (!isDirty || debounceMs <= 0 || lastSavedNoteRef.current === note) return;
-    const timer = window.setTimeout(() => void save().catch(() => void 0), debounceMs);
-    return () => window.clearTimeout(timer);
-  }, [debounceMs, isDirty, note, save]);
-  const state = {
-    item,
-    note,
-    setNote,
-    isDirty,
-    isSaving: isMutating,
-    error,
-    save
-  };
-  const submit = (event) => {
-    event.preventDefault();
-    void save().catch(() => void 0);
-  };
-  return {
-    state,
-    submit,
-    handleKeyDown: (event) => {
-      if (event.key !== "Enter" || !event.ctrlKey && !event.metaKey) return;
-      event.preventDefault();
-      void save().catch(() => void 0);
+    state,
+    submit,
+    handleKeyDown: (event) => {
+      if (event.key !== "Enter" || !event.ctrlKey && !event.metaKey) return;
+      event.preventDefault();
+      void save().catch(() => void 0);
     },
     labels: {
       note: useUiLabel("note"),
@@ -3095,8 +3467,8 @@ function useKeepNoteEditor({ item, debounceMs, onSaved, onSaveError }) {
   };
 }
 
-// src/KeepNoteEditor.tsx
-import { Fragment as Fragment6, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+// src/features/editor/KeepNoteEditor.tsx
+import { Fragment as Fragment8, jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
 function KeepNoteEditor({
   item,
   label,
@@ -3114,10 +3486,10 @@ 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: [
-    /* @__PURE__ */ jsxs10("label", { children: [
+  const body = render ? render(view.state) : typeof contentChildren === "function" ? contentChildren(view.state) : contentChildren ?? /* @__PURE__ */ jsxs12(Fragment8, { children: [
+    /* @__PURE__ */ jsxs12("label", { children: [
       label ?? view.labels.note,
-      /* @__PURE__ */ jsx15(
+      /* @__PURE__ */ jsx17(
         "textarea",
         {
           "data-keep-action": "edit-note",
@@ -3129,10 +3501,10 @@ function KeepNoteEditor({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx15("button", { type: "submit", "data-keep-action": "save-note", disabled: isSaving, "aria-busy": isSaving, children: saveLabel ?? view.labels.save })
+    /* @__PURE__ */ jsx17("button", { type: "submit", "data-keep-action": "save-note", disabled: isSaving, "aria-busy": isSaving, children: saveLabel ?? view.labels.save })
   ] });
   if (!asChild) {
-    return /* @__PURE__ */ jsxs10(
+    return /* @__PURE__ */ jsxs12(
       "form",
       {
         ...formProps,
@@ -3145,7 +3517,7 @@ function KeepNoteEditor({
         "data-disabled": isSaving ? "true" : void 0,
         children: [
           body,
-          error ? /* @__PURE__ */ jsx15("p", { role: "alert", children: getErrorMessage3(error, view.labels.error) }) : null
+          error ? /* @__PURE__ */ jsx17("p", { role: "alert", children: getErrorMessage3(error, view.labels.error) }) : null
         ]
       }
     );
@@ -3167,20 +3539,422 @@ function KeepNoteEditor({
     "KeepNoteEditor"
   );
 }
-function getErrorMessage3(error, fallback) {
-  return error instanceof Error ? error.message : fallback;
-}
+function getErrorMessage3(error, fallback) {
+  return error instanceof Error ? error.message : fallback;
+}
+
+// src/features/editor/hooks/useKeepTagEditor.ts
+import { useKeepItem as useKeepItem4 } from "@keepkit/core/react";
+import { useCallback as useCallback5, useEffect as useEffect8, useState as useState11 } from "react";
+function useKeepTagEditor({ item, onSaved, onSaveError }) {
+  const itemState = useKeepItem4(item);
+  const [tags, setTags] = useState11(item.tags ?? []);
+  const [input, setInput] = useState11("");
+  useEffect8(() => setTags(itemState.item?.tags ?? item.tags ?? []), [item.tags, itemState.item?.tags]);
+  const save = useCallback5(async () => {
+    const nextTags = normalizeUiTags(tags);
+    try {
+      await itemState.updateTags(nextTags);
+      setTags(nextTags);
+      onSaved?.(nextTags);
+    } catch (cause) {
+      onSaveError?.(cause);
+      throw cause;
+    }
+  }, [itemState, onSaveError, onSaved, tags]);
+  const addTag = (tag) => {
+    setTags(normalizeUiTags([...tags, tag]));
+    setInput("");
+  };
+  const state = { tags, setTags, save, isSaving: itemState.isMutating };
+  return {
+    state,
+    input,
+    setInput,
+    error: itemState.error,
+    handleInputKeyDown: (event) => {
+      if (event.key === "Enter") {
+        if (event.nativeEvent.isComposing) return;
+        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));
+      }
+    },
+    removeTag: (tag) => setTags(tags.filter((current) => current !== tag)),
+    submit: (event) => {
+      event.preventDefault();
+      void save().catch(() => void 0);
+    },
+    labels: {
+      tags: useUiLabel("tagsToApply"),
+      remove: useUiLabel("remove"),
+      apply: useUiLabel("applyTags"),
+      error: useUiLabel("error")
+    }
+  };
+}
+
+// src/features/editor/KeepTagEditor.tsx
+import { Fragment as Fragment9, jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+function KeepTagEditor({
+  item,
+  availableTags = [],
+  onSaved,
+  onSaveError,
+  render,
+  ...props
+}) {
+  const view = useKeepTagEditor({ item, onSaved, onSaveError });
+  const { isSaving, tags } = view.state;
+  const body = render ? render(view.state) : /* @__PURE__ */ jsxs13(Fragment9, { children: [
+    /* @__PURE__ */ jsxs13("label", { children: [
+      view.labels.tags,
+      /* @__PURE__ */ jsx18(
+        "input",
+        {
+          "data-keep-action": "edit-tags",
+          value: view.input,
+          list: availableTags.length > 0 ? `keep-tags-${item.id}` : void 0,
+          onChange: (event) => view.setInput(event.currentTarget.value),
+          onKeyDown: view.handleInputKeyDown
+        }
+      )
+    ] }),
+    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: [
+      tag,
+      /* @__PURE__ */ jsx18("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 })
+  ] });
+  return /* @__PURE__ */ jsxs13(
+    "form",
+    {
+      ...props,
+      onSubmit: view.submit,
+      "aria-busy": isSaving || props["aria-busy"],
+      "data-keepkit": "tag-editor",
+      "data-state": view.error ? "error" : isSaving ? "saving" : "idle",
+      "data-loading": isSaving ? "true" : void 0,
+      "data-disabled": isSaving ? "true" : void 0,
+      children: [
+        body,
+        view.error ? /* @__PURE__ */ jsx18("p", { role: "alert", children: getErrorMessage4(view.error, view.labels.error) }) : null
+      ]
+    }
+  );
+}
+function getErrorMessage4(error, fallback) {
+  return error instanceof Error ? error.message : fallback;
+}
+
+// src/features/feedback/useKeepToastFeedback.ts
+import { useCallback as useCallback6 } from "react";
+function useKeepToastFeedback(showToast) {
+  return useCallback6(
+    (event) => {
+      if (!("undo" in event)) {
+        showToast(event.message);
+        return;
+      }
+      showToast(event.message, {
+        action: {
+          label: event.undoLabel,
+          onClick: () => void event.undo()
+        }
+      });
+    },
+    [showToast]
+  );
+}
+
+// src/features/navigation/KeepTourBar.tsx
+import { useKeepNavigator } from "@keepkit/core/react";
+import { useId } from "react";
+
+// src/features/navigation/hooks/useKeepTourShortcuts.ts
+import { useEffect as useEffect9 } from "react";
+function useKeepTourShortcuts({
+  onNext,
+  onPrev,
+  enabled = true,
+  allowInEditable = false,
+  preventDefault = true,
+  nextKeys = ["j", "]"],
+  prevKeys = ["k", "["],
+  onError
+}) {
+  useEffect9(() => {
+    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/features/navigation/KeepTourBar.tsx
+import { Fragment as Fragment10, jsx as jsx19, 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,
+  getItemTitle = (item) => getMetaTitle(item.meta) ?? item.id,
+  ...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__ */ jsx19("span", { "data-keepkit": "tour-progress", "aria-live": "polite", children: progress ?? `${navigation.currentPosition ?? 0} / ${navigation.items.length}` }) : null,
+    /* @__PURE__ */ jsx19(
+      TourAction,
+      {
+        href: prevHref,
+        disabled: !navigation.hasPrev,
+        onClick: prevHref ? onPrev : resolvedPrev,
+        "data-keep-action": "tour-prev",
+        preview: navigation.prevItem ? /* @__PURE__ */ jsxs14(Fragment10, { children: [
+          previousLabel,
+          ": ",
+          getItemTitle(navigation.prevItem)
+        ] }) : void 0,
+        children: previousLabel
+      }
+    ),
+    /* @__PURE__ */ jsx19(
+      TourAction,
+      {
+        href: nextHref,
+        disabled: !navigation.hasNext,
+        onClick: nextHref ? onNext : resolvedNext,
+        "data-keep-action": "tour-next",
+        preview: navigation.nextItem ? /* @__PURE__ */ jsxs14(Fragment10, { children: [
+          nextItemLabel,
+          ": ",
+          getItemTitle(navigation.nextItem)
+        ] }) : void 0,
+        children: nextItemLabel
+      }
+    ),
+    backHref || onBack ? /* @__PURE__ */ jsx19(TourAction, { href: backHref, onClick: onBack, "data-keep-action": "tour-back", children: listLabel }) : null
+  ] });
+}
+function TourAction({ href, disabled = false, onClick, children, preview, ...props }) {
+  const previewId = useId();
+  const content = /* @__PURE__ */ jsxs14(Fragment10, { children: [
+    /* @__PURE__ */ jsx19("span", { "data-tour-label": "true", children }),
+    preview ? /* @__PURE__ */ jsx19("small", { id: previewId, "data-tour-preview": "true", children: preview }) : null
+  ] });
+  if (href && !disabled) {
+    return /* @__PURE__ */ jsx19(
+      "a",
+      {
+        ...props,
+        href,
+        onClick: () => void onClick?.(),
+        "aria-label": String(children),
+        "aria-describedby": preview ? previewId : void 0,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx19(
+    "button",
+    {
+      ...props,
+      type: "button",
+      disabled,
+      onClick: () => void onClick?.(),
+      "aria-label": String(children),
+      "aria-describedby": preview ? previewId : void 0,
+      children: content
+    }
+  );
+}
+var KeepNavigator = KeepTourBar;
+function navigateTo(item, href) {
+  if (!item || !href || typeof window === "undefined") return;
+  window.location.assign(href);
+}
+
+// src/features/status/status.tsx
+import { isValidElement as isValidElement6 } from "react";
+
+// src/features/status/hooks/useStatusViews.ts
+import { useKeepContext as useKeepContext4 } from "@keepkit/core/react";
+import { useEffect as useEffect10, useRef as useRef6, useState as useState12 } from "react";
+function useKeepEmptyState() {
+  return useUiLabel("noItems").replace(/\.$/, "");
+}
+function useKeepStatus(status) {
+  const context = useKeepContext4();
+  const resolvedStatus = status ?? getDerivedStatus(context);
+  const state = {
+    status: resolvedStatus,
+    error: context.error,
+    pendingCount: context.syncState.pendingCount,
+    items: context.items
+  };
+  return { state, defaultLabel: useUiLabel(getStatusLabelKey3(resolvedStatus)) };
+}
+function useKeepAnnouncements(messages) {
+  const context = useKeepContext4();
+  const savedMessage = useUiLabel("savedMessage", messages?.save);
+  const removedMessage = useUiLabel("removedMessage", messages?.remove);
+  const noteSavedMessage = useUiLabel("noteSavedMessage", messages?.note);
+  const [message, setMessage] = useState12("");
+  const lastChangeRef = useRef6(void 0);
+  useEffect10(() => {
+    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 message;
+}
+function getDerivedStatus(context) {
+  if (context.error) return "error";
+  if (context.syncState.status === "pending" || context.syncState.status === "syncing") return "syncing";
+  if (context.isMutating) return "saving";
+  if (context.isLoading && !context.isHydrated) return "loading";
+  if (context.isHydrated && context.items.length === 0) return "empty";
+  return "idle";
+}
+function getStatusLabelKey3(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";
+}
+
+// src/features/status/status.tsx
+import { Fragment as Fragment11, jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+function KeepEmptyState({
+  title,
+  description,
+  action,
+  children,
+  asChild = false,
+  className,
+  ...rootProps
+}) {
+  const defaultTitle = useKeepEmptyState();
+  const contentChildren = asChild && isValidElement6(children) ? void 0 : children;
+  const body = contentChildren ?? /* @__PURE__ */ jsxs15(Fragment11, { children: [
+    /* @__PURE__ */ jsx20("h2", { children: title ?? defaultTitle }),
+    description ? /* @__PURE__ */ jsx20("p", { children: description }) : null,
+    action
+  ] });
+  return renderRoot(
+    asChild,
+    children,
+    { ...rootProps, className, "data-keepkit": "empty-state", "data-state": "empty" },
+    body,
+    "KeepEmptyState"
+  );
+}
+function KeepStatus({
+  status,
+  labels,
+  children,
+  render,
+  asChild = false,
+  className,
+  ...rootProps
+}) {
+  const view = useKeepStatus(status);
+  const contentChildren = asChild && isValidElement6(children) ? void 0 : children;
+  const body = render ? render(view.state) : typeof contentChildren === "function" ? contentChildren(view.state) : contentChildren ?? labels?.[view.state.status] ?? view.defaultLabel;
+  const role = rootProps.role ?? (view.state.status === "error" ? "alert" : "status");
+  return renderRoot(
+    asChild,
+    isValidElement6(children) ? children : void 0,
+    {
+      ...rootProps,
+      className,
+      "data-keepkit": "status",
+      role,
+      "aria-live": rootProps["aria-live"] ?? "polite",
+      "data-state": view.state.status,
+      "data-loading": view.state.status === "loading" || view.state.status === "saving" || view.state.status === "syncing" ? "true" : void 0
+    },
+    body,
+    "KeepStatus"
+  );
+}
+function KeepAnnouncements({ messages, ...props }) {
+  const message = useKeepAnnouncements(messages);
+  return /* @__PURE__ */ jsx20(
+    "div",
+    {
+      ...props,
+      role: props.role ?? "status",
+      "aria-live": props["aria-live"] ?? "polite",
+      "aria-atomic": "true",
+      "data-keepkit": "announcements",
+      "data-state": "announcing",
+      children: message
+    }
+  );
+}
+var KeepAnnouncer = KeepAnnouncements;
 
-// src/hooks/useKeepSyncFeedback.ts
-import { useKeepContext as useKeepContext3 } from "@keepkit/core/react";
-import { useEffect as useEffect5, useRef as useRef5 } from "react";
+// src/features/sync/hooks/useKeepSyncFeedback.ts
+import { useKeepContext as useKeepContext5 } from "@keepkit/core/react";
+import { useEffect as useEffect11, useRef as useRef7 } from "react";
 function useKeepSyncFeedback() {
-  const { syncState } = useKeepContext3();
+  const { syncState } = useKeepContext5();
   const emitFeedback = useKeepUiFeedback();
   const completedMessage = useUiLabel("syncSynced");
   const failedMessage = useUiLabel("syncFailedMessage");
-  const previousStatus = useRef5("idle");
-  useEffect5(() => {
+  const previousStatus = useRef7("idle");
+  useEffect11(() => {
     const previous = previousStatus.current;
     previousStatus.current = syncState.status;
     if (syncState.status === "error" && previous !== "error") {
@@ -3193,24 +3967,24 @@ function useKeepSyncFeedback() {
   }, [completedMessage, emitFeedback, failedMessage, syncState.error, syncState.status]);
 }
 
-// src/KeepSyncFeedbackObserver.tsx
+// src/features/sync/KeepSyncFeedbackObserver.tsx
 function KeepSyncFeedbackObserver() {
   useKeepSyncFeedback();
   return null;
 }
 
-// src/hooks/useKeepSyncRecoveryDialog.ts
-import { useKeepContext as useKeepContext4 } from "@keepkit/core/react";
-import { useEffect as useEffect6, useState as useState8 } from "react";
+// src/features/sync/hooks/useKeepSyncRecoveryDialog.ts
+import { useKeepContext as useKeepContext6 } from "@keepkit/core/react";
+import { useEffect as useEffect12, useState as useState13 } from "react";
 function useKeepSyncRecoveryDialog(options) {
   const { open, onOpenChange, conflicts, onManualMerge } = options;
-  const context = useKeepContext4();
+  const context = useKeepContext6();
   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] = useState13(false);
+  const [busyId, setBusyId] = useState13();
+  const [error, setError] = useState13();
+  useEffect12(() => {
     if (hasRecovery) setDismissed(false);
   }, [hasRecovery]);
   return {
@@ -3254,8 +4028,8 @@ function useKeepSyncRecoveryDialog(options) {
   };
 }
 
-// src/KeepSyncRecoveryDialog.tsx
-import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+// src/features/sync/KeepSyncRecoveryDialog.tsx
+import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
 function KeepSyncRecoveryDialog({
   open,
   onOpenChange,
@@ -3270,7 +4044,7 @@ function KeepSyncRecoveryDialog({
 }) {
   const view = useKeepSyncRecoveryDialog({ open, onOpenChange, conflicts, onManualMerge });
   if (!view.isOpen) return null;
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs16(
     "section",
     {
       ...props,
@@ -3284,17 +4058,17 @@ function KeepSyncRecoveryDialog({
       "data-state": view.conflictList.length > 0 ? "conflict" : "error",
       "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__ */ jsxs16("header", { children: [
+          /* @__PURE__ */ jsx21("h2", { id: "keepkit-sync-recovery-title", children: title ?? view.labels.title }),
+          /* @__PURE__ */ jsx21("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 }),
-          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__ */ jsxs11("div", { "data-conflict-preview": true, children: [
-              /* @__PURE__ */ jsx16(
+        view.conflictList.length > 0 ? /* @__PURE__ */ jsxs16("div", { children: [
+          /* @__PURE__ */ jsx21("p", { children: view.labels.conflict }),
+          view.conflictList.map((conflict) => /* @__PURE__ */ jsxs16("article", { "data-conflict-id": conflict.id, children: [
+            /* @__PURE__ */ jsx21("h3", { children: getMetaTitle(conflict.operation.item?.meta) ?? conflict.id }),
+            /* @__PURE__ */ jsxs16("div", { "data-conflict-preview": true, children: [
+              /* @__PURE__ */ jsx21(
                 ConflictPreview,
                 {
                   item: conflict.operation.item,
@@ -3304,7 +4078,7 @@ function KeepSyncRecoveryDialog({
                   side: "local"
                 }
               ),
-              /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx21(
                 ConflictPreview,
                 {
                   item: conflict.remote,
@@ -3315,8 +4089,8 @@ function KeepSyncRecoveryDialog({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs11("div", { children: [
-              /* @__PURE__ */ jsx16(
+            /* @__PURE__ */ jsxs16("div", { children: [
+              /* @__PURE__ */ jsx21(
                 "button",
                 {
                   type: "button",
@@ -3326,7 +4100,7 @@ function KeepSyncRecoveryDialog({
                   children: view.labels.keepLocal
                 }
               ),
-              /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx21(
                 "button",
                 {
                   type: "button",
@@ -3336,7 +4110,7 @@ function KeepSyncRecoveryDialog({
                   children: view.labels.useServer
                 }
               ),
-              /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx21(
                 "button",
                 {
                   type: "button",
@@ -3349,12 +4123,12 @@ 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)
+        view.showBackupRecovery ? /* @__PURE__ */ jsxs16("section", { "data-recovery": "backup", children: [
+          /* @__PURE__ */ jsx21("h3", { children: view.labels.backupRecovery }),
+          /* @__PURE__ */ jsx21("p", { children: view.labels.backupRecoveryDescription }),
+          backup ?? (showBackupControls ? /* @__PURE__ */ jsx21(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__ */ jsx21("p", { id: "keepkit-sync-recovery-error", role: "alert", "aria-live": "assertive", children: view.error instanceof Error ? view.error.message : view.labels.error }) : null
       ]
     }
   );
@@ -3366,16 +4140,16 @@ function ConflictPreview({
   noteLabel,
   side
 }) {
-  return /* @__PURE__ */ jsxs11("article", { "data-conflict-version": side, "aria-label": heading, children: [
-    /* @__PURE__ */ jsx16("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" })
+  return /* @__PURE__ */ jsxs16("article", { "data-conflict-version": side, "aria-label": heading, children: [
+    /* @__PURE__ */ jsx21("h4", { children: heading }),
+    /* @__PURE__ */ jsxs16("dl", { children: [
+      /* @__PURE__ */ jsxs16("div", { children: [
+        /* @__PURE__ */ jsx21("dt", { children: updatedAtLabel }),
+        /* @__PURE__ */ jsx21("dd", { children: item ? /* @__PURE__ */ jsx21("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__ */ jsxs16("div", { children: [
+        /* @__PURE__ */ jsx21("dt", { children: noteLabel }),
+        /* @__PURE__ */ jsx21("dd", { children: item?.note || "\u2014" })
       ] })
     ] })
   ] });
@@ -3384,10 +4158,10 @@ function formatConflictDate(timestamp) {
   return new Date(timestamp).toISOString().slice(0, 10);
 }
 
-// src/hooks/useKeepSyncStatusBanner.ts
-import { useKeepContext as useKeepContext5 } from "@keepkit/core/react";
+// src/features/sync/hooks/useKeepSyncStatusBanner.ts
+import { useKeepContext as useKeepContext7 } from "@keepkit/core/react";
 function useKeepSyncStatusBanner({ onRetry, children }) {
-  const context = useKeepContext5();
+  const context = useKeepContext7();
   const retryLabel = useUiLabel("retrySync");
   const resolveLabel = useUiLabel("resolveSync");
   const conflictLabel = useUiLabel("syncConflict");
@@ -3395,7 +4169,7 @@ function useKeepSyncStatusBanner({ onRetry, children }) {
   const syncedLabel = useUiLabel("syncSynced");
   const status = context.syncState.status;
   const hasConflicts = (context.syncState.conflicts?.length ?? 0) > 0 || context.syncState.conflictIds.length > 0;
-  const message = children ?? (status === "error" ? getErrorMessage4(context.syncState.error) : status === "conflict" || hasConflicts ? conflictLabel : status === "pending" || status === "syncing" ? pendingLabel : syncedLabel);
+  const message = children ?? (status === "error" ? getErrorMessage5(context.syncState.error) : status === "conflict" || hasConflicts ? conflictLabel : status === "pending" || status === "syncing" ? pendingLabel : syncedLabel);
   return {
     status,
     hasConflicts,
@@ -3414,12 +4188,12 @@ function useKeepSyncStatusBanner({ onRetry, children }) {
     }
   };
 }
-function getErrorMessage4(error) {
+function getErrorMessage5(error) {
   return error instanceof Error ? error.message : "Sync failed.";
 }
 
-// src/KeepSyncStatusBanner.tsx
-import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+// src/features/sync/KeepSyncStatusBanner.tsx
+import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
 function KeepSyncStatusBanner({
   onRetry,
   onResolveConflicts,
@@ -3429,7 +4203,7 @@ function KeepSyncStatusBanner({
 }) {
   const view = useKeepSyncStatusBanner({ onRetry, children });
   if (view.status === "idle" && !view.hasConflicts) return null;
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs17(
     "aside",
     {
       ...props,
@@ -3439,8 +4213,8 @@ function KeepSyncStatusBanner({
       "data-keepkit": "sync-status",
       "data-state": view.status,
       children: [
-        /* @__PURE__ */ jsx17("p", { children: view.message }),
-        view.showRetry ? /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx22("p", { children: view.message }),
+        view.showRetry ? /* @__PURE__ */ jsx22(
           "button",
           {
             type: "button",
@@ -3450,7 +4224,7 @@ function KeepSyncStatusBanner({
             children: view.retryLabel
           }
         ) : null,
-        view.hasConflicts ? /* @__PURE__ */ jsx17(
+        view.hasConflicts ? /* @__PURE__ */ jsx22(
           "button",
           {
             type: "button",
@@ -3465,273 +4239,9 @@ 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";
-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 nextTags = normalizeUiTags(tags);
-    try {
-      await itemState.updateTags(nextTags);
-      setTags(nextTags);
-      onSaved?.(nextTags);
-    } catch (cause) {
-      onSaveError?.(cause);
-      throw cause;
-    }
-  }, [itemState, onSaveError, onSaved, tags]);
-  const addTag = (tag) => {
-    setTags(normalizeUiTags([...tags, tag]));
-    setInput("");
-  };
-  const state = { tags, setTags, save, isSaving: itemState.isMutating };
-  return {
-    state,
-    input,
-    setInput,
-    error: itemState.error,
-    handleInputKeyDown: (event) => {
-      if (event.key === "Enter") {
-        if (event.nativeEvent.isComposing) return;
-        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));
-      }
-    },
-    removeTag: (tag) => setTags(tags.filter((current) => current !== tag)),
-    submit: (event) => {
-      event.preventDefault();
-      void save().catch(() => void 0);
-    },
-    labels: {
-      tags: useUiLabel("tagsToApply"),
-      remove: useUiLabel("remove"),
-      apply: useUiLabel("applyTags"),
-      error: useUiLabel("error")
-    }
-  };
-}
-
-// src/KeepTagEditor.tsx
-import { Fragment as Fragment7, jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
-function KeepTagEditor({
-  item,
-  availableTags = [],
-  onSaved,
-  onSaveError,
-  render,
-  ...props
-}) {
-  const view = useKeepTagEditor({ item, onSaved, onSaveError });
-  const { isSaving, tags } = view.state;
-  const body = render ? render(view.state) : /* @__PURE__ */ jsxs13(Fragment7, { children: [
-    /* @__PURE__ */ jsxs13("label", { children: [
-      view.labels.tags,
-      /* @__PURE__ */ jsx18(
-        "input",
-        {
-          "data-keep-action": "edit-tags",
-          value: view.input,
-          list: availableTags.length > 0 ? `keep-tags-${item.id}` : void 0,
-          onChange: (event) => view.setInput(event.currentTarget.value),
-          onKeyDown: view.handleInputKeyDown
-        }
-      )
-    ] }),
-    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: [
-      tag,
-      /* @__PURE__ */ jsx18("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 })
-  ] });
-  return /* @__PURE__ */ jsxs13(
-    "form",
-    {
-      ...props,
-      onSubmit: view.submit,
-      "aria-busy": isSaving || props["aria-busy"],
-      "data-keepkit": "tag-editor",
-      "data-state": view.error ? "error" : isSaving ? "saving" : "idle",
-      "data-loading": isSaving ? "true" : void 0,
-      "data-disabled": isSaving ? "true" : void 0,
-      children: [
-        body,
-        view.error ? /* @__PURE__ */ jsx18("p", { role: "alert", children: getErrorMessage5(view.error, view.labels.error) }) : null
-      ]
-    }
-  );
-}
-function getErrorMessage5(error, fallback) {
-  return error instanceof Error ? error.message : fallback;
-}
-
-// src/hooks/useKeepUndo.ts
-import { useKeepContext as useKeepContext6 } from "@keepkit/core/react";
-function useKeepUndo() {
-  const context = useKeepContext6();
-  const emitFeedback = useKeepUiFeedback();
-  const restoredMessage = useUiLabel("restoredMessage");
-  return {
-    canUndo: context.undo.canUndo,
-    undo: async () => {
-      const items = context.lastChange?.items ?? (context.lastChange?.item ? [context.lastChange.item] : []);
-      await context.undoLastRemoval();
-      if (items.length > 0) {
-        emitFeedback({ type: "item-restored", item: items[0], items, message: restoredMessage });
-      }
-    },
-    message: useUiLabel("undoAvailable"),
-    label: useUiLabel("undo")
-  };
-}
-
-// src/KeepUndo.tsx
-import { jsx as jsx19, jsxs as jsxs14 } 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: [
-    children ?? view.message,
-    /* @__PURE__ */ jsx19("button", { type: "button", "data-keep-action": "undo", onClick: () => void view.undo(), children: label ?? view.label })
-  ] });
-}
-
-// src/status.tsx
-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";
-function useKeepEmptyState() {
-  return useUiLabel("noItems").replace(/\.$/, "");
-}
-function useKeepStatus(status) {
-  const context = useKeepContext7();
-  const resolvedStatus = status ?? getDerivedStatus(context);
-  const state = {
-    status: resolvedStatus,
-    error: context.error,
-    pendingCount: context.syncState.pendingCount,
-    items: context.items
-  };
-  return { state, defaultLabel: useUiLabel(getStatusLabelKey3(resolvedStatus)) };
-}
-function useKeepAnnouncements(messages) {
-  const context = useKeepContext7();
-  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 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 message;
-}
-function getDerivedStatus(context) {
-  if (context.error) return "error";
-  if (context.syncState.status === "pending" || context.syncState.status === "syncing") return "syncing";
-  if (context.isMutating) return "saving";
-  if (context.isLoading && !context.isHydrated) return "loading";
-  if (context.isHydrated && context.items.length === 0) return "empty";
-  return "idle";
-}
-function getStatusLabelKey3(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";
-}
-
-// src/status.tsx
-import { Fragment as Fragment8, jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
-function KeepEmptyState({
-  title,
-  description,
-  action,
-  children,
-  asChild = false,
-  className,
-  ...rootProps
-}) {
-  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,
-    action
-  ] });
-  return renderRoot(
-    asChild,
-    children,
-    { ...rootProps, className, "data-keepkit": "empty-state", "data-state": "empty" },
-    body,
-    "KeepEmptyState"
-  );
-}
-function KeepStatus({
-  status,
-  labels,
-  children,
-  render,
-  asChild = false,
-  className,
-  ...rootProps
-}) {
-  const view = useKeepStatus(status);
-  const contentChildren = asChild && isValidElement6(children) ? void 0 : children;
-  const body = render ? render(view.state) : typeof contentChildren === "function" ? contentChildren(view.state) : contentChildren ?? labels?.[view.state.status] ?? view.defaultLabel;
-  const role = rootProps.role ?? (view.state.status === "error" ? "alert" : "status");
-  return renderRoot(
-    asChild,
-    isValidElement6(children) ? children : void 0,
-    {
-      ...rootProps,
-      className,
-      "data-keepkit": "status",
-      role,
-      "aria-live": rootProps["aria-live"] ?? "polite",
-      "data-state": view.state.status,
-      "data-loading": view.state.status === "loading" || view.state.status === "saving" || view.state.status === "syncing" ? "true" : void 0
-    },
-    body,
-    "KeepStatus"
-  );
-}
-function KeepAnnouncements({ messages, ...props }) {
-  const message = useKeepAnnouncements(messages);
-  return /* @__PURE__ */ jsx20(
-    "div",
-    {
-      ...props,
-      role: props.role ?? "status",
-      "aria-live": props["aria-live"] ?? "polite",
-      "aria-atomic": "true",
-      "data-keepkit": "announcements",
-      "data-state": "announcing",
-      children: message
-    }
-  );
-}
-var KeepAnnouncer = KeepAnnouncements;
-
-// src/theme.tsx
+// src/foundation/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 +4300,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 +4311,7 @@ import {
   useKeepContext as useKeepContext8,
   useKeepItem as useKeepItem5,
   useKeepList as useKeepList5,
+  useKeepNavigator as useKeepNavigator2,
   useKeepShortcut
 } from "@keepkit/core/react";
 import {
@@ -3813,7 +4324,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 jsxs18 } from "react/jsx-runtime";
 function KeepKitProvider({
   labels,
   locale,
@@ -3833,7 +4344,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 +4358,10 @@ function KeepKitProvider({
       className: themeClassName,
       style: themeStyle,
       asChild: themeAsChild,
-      children: /* @__PURE__ */ jsxs16(CoreKeepProvider, { ...providerProps, children: [
-        /* @__PURE__ */ jsx22(KeepSyncFeedbackObserver, {}),
+      children: /* @__PURE__ */ jsxs18(CoreKeepProvider, { ...providerProps, children: [
+        /* @__PURE__ */ jsx24(KeepSyncFeedbackObserver, {}),
         children,
-        /* @__PURE__ */ jsx22(KeepAnnouncements, {})
+        /* @__PURE__ */ jsx24(KeepAnnouncements, {})
       ] })
     }
   ) });
@@ -3877,7 +4388,7 @@ function createKeepKit(options = {}) {
   } = options;
   const coreKit = createCoreKeepKit(coreOptions);
   return {
-    Provider: (props) => /* @__PURE__ */ jsx22(
+    Provider: (props) => /* @__PURE__ */ jsx24(
       KeepKitProvider,
       {
         ...coreOptions,
@@ -3898,9 +4409,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 +4425,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 +4441,7 @@ export {
   KeepCollection,
   KeepEmptyState,
   KeepErrorBoundary3 as KeepErrorBoundary,
+  KeepHighlight,
   KeepItemCard,
   KeepItemCardSkeleton,
   KeepItemCheckbox,
@@ -3936,10 +4449,12 @@ export {
   KeepKitProvider,
   KeepLayout,
   KeepList,
+  KeepNavigator,
   KeepNoteEditor,
   KeepPagination,
   KeepProvider,
   KeepPruneStaleButton,
+  KeepReorderableList,
   KeepSearchInput,
   KeepSortSelect,
   KeepStaleNotice,
@@ -3949,6 +4464,7 @@ export {
   KeepTagEditor,
   KeepTagFilter,
   KeepThemeProvider,
+  KeepTourBar,
   KeepUiProvider,
   KeepUndo,
   LocalStorageAdapter,
@@ -3960,14 +4476,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
 };