@keepkit/ui 0.17.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,11 +1595,7 @@ 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,
   createContext as createContext2,
@@ -1614,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);
@@ -1707,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,
@@ -1740,7 +1800,7 @@ function getItemLabel(item) {
   return typeof title === "string" && title.trim() ? title.trim() : void 0;
 }
 
-// src/KeepBulkActions.tsx
+// src/features/actions/KeepBulkActions.tsx
 import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 function KeepBulkActions({
   query,
@@ -1855,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 {
@@ -1881,7 +1941,7 @@ function useKeepButton({ item, labels, icons, children }) {
   };
 }
 
-// src/KeepButton.tsx
+// src/features/actions/KeepButton.tsx
 import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 function KeepButton({
   labels,
@@ -1894,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;
@@ -1962,130 +2022,390 @@ function renderIcon(icon, 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,
-      tags: tag ? [.../* @__PURE__ */ new Set([...query.tags ?? [], tag])] : query.tags,
-      pagination: enabled.pagination ? { ...query.pagination, page, pageSize: resolvedPageSize } : query.pagination
-    }),
-    [enabled.pagination, enabled.search, enabled.sort, page, query, resolvedPageSize, searchValue, sort, tag]
-  );
-  useKeepUrlSync({
-    enabled: Boolean(urlSync),
-    query: resolvedQuery,
-    onQueryChange: (nextOrUpdater) => {
+  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
+    }),
+    [enabled.pagination, enabled.search, enabled.sort, page, query, resolvedPageSize, searchValue, sort, tag]
+  );
+  useKeepUrlSync({
+    enabled: Boolean(urlSync),
+    query: resolvedQuery,
+    onQueryChange: (nextOrUpdater) => {
       const next = typeof nextOrUpdater === "function" ? nextOrUpdater(resolvedQuery) : nextOrUpdater;
       setSearchValue(next.search?.query ?? "");
       setSort(next.sort ?? { by: "updatedAt", direction: "desc" });
@@ -2095,7 +2415,7 @@ function useKeepCollection({
     options: typeof urlSync === "object" ? urlSync : {},
     adapter: urlAdapter
   });
-  const list = useKeepList2(resolvedQuery);
+  const list = useKeepList3(resolvedQuery);
   return {
     enabled,
     searchValue,
@@ -2120,175 +2440,38 @@ function useKeepCollection({
   };
 }
 
-// src/KeepList.tsx
+// src/features/collection/KeepList.tsx
 import { KeepErrorBoundary } from "@keepkit/core/react";
-import { isValidElement as isValidElement3 } from "react";
+import { isValidElement as isValidElement4 } from "react";
 
-// src/hooks/useKeepListView.ts
-import { useKeepList as useKeepList3 } from "@keepkit/core/react";
-function useKeepListView(query) {
+// src/features/item/KeepItemCard.tsx
+import {
+  createContext as createContext3,
+  createElement as createElement2,
+  isValidElement as isValidElement3,
+  useContext as useContext3,
+  useEffect as useEffect5,
+  useState as useState8
+} from "react";
+
+// src/features/item/hooks/useKeepItemStatusBadge.ts
+function useKeepItemStatusBadge(status) {
   return {
-    state: useKeepList3(query),
-    labels: {
-      loading: useUiLabel("loadingItems"),
-      empty: useUiLabel("noItems"),
-      error: useUiLabel("errorItems")
-    }
+    resolvedStatus: getDisplayStatus(status),
+    statusLabel: useUiLabel(getStatusLabelKey(status)),
+    icon: getStatusIcon(status)
   };
 }
-
-// src/hooks/useRovingTabIndex.ts
-import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef4 } from "react";
-function useRovingTabIndex() {
-  const ref = useRef4(null);
-  const getItems = useCallback3(() => {
-    const root = ref.current;
-    if (!root) return [];
-    return Array.from(root.querySelectorAll('[data-keepkit="card"]')).filter(
-      (item) => item.getAttribute("aria-hidden") !== "true" && item.getAttribute("data-roving-disabled") !== "true"
-    );
-  }, []);
-  const syncTabIndices = useCallback3(() => {
-    const items = getItems();
-    if (items.length === 0) return;
-    const activeElement = document.activeElement;
-    const activeItem = items.find((item) => item === activeElement || item.contains(activeElement));
-    const activeIndex = activeItem ? items.indexOf(activeItem) : 0;
-    items.forEach((item, index) => {
-      item.tabIndex = index === activeIndex ? 0 : -1;
-    });
-  }, [getItems]);
-  useEffect3(() => {
-    const root = ref.current;
-    if (!root) return;
-    syncTabIndices();
-    const observer = new MutationObserver(syncTabIndices);
-    observer.observe(root, { childList: true, subtree: true });
-    return () => observer.disconnect();
-  }, [syncTabIndices]);
-  const onFocusCapture = useCallback3(
-    (event) => {
-      if (!(event.target instanceof HTMLElement)) return;
-      const item = event.target.closest('[data-keepkit="card"]');
-      if (!item || !ref.current?.contains(item)) return;
-      getItems().forEach((candidate) => {
-        candidate.tabIndex = candidate === item ? 0 : -1;
-      });
-    },
-    [getItems]
-  );
-  const onKeyDown = useCallback3(
-    (event) => {
-      if (event.defaultPrevented) return;
-      const items = getItems();
-      if (!(event.target instanceof HTMLElement)) return;
-      const current = event.target.closest('[data-keepkit="card"]');
-      if (!current || current !== event.target || !ref.current?.contains(current)) return;
-      const currentIndex = items.indexOf(current);
-      if (currentIndex < 0) return;
-      let nextIndex;
-      if (event.key === "Home") nextIndex = 0;
-      if (event.key === "End") nextIndex = items.length - 1;
-      if (event.key === "ArrowRight" || event.key === "ArrowDown")
-        nextIndex = Math.min(currentIndex + 1, items.length - 1);
-      if (event.key === "ArrowLeft" || event.key === "ArrowUp") nextIndex = Math.max(currentIndex - 1, 0);
-      if (nextIndex === void 0) return;
-      event.preventDefault();
-      if (nextIndex === currentIndex) return;
-      items[nextIndex]?.focus();
-    },
-    [getItems]
-  );
-  return { ref, onKeyDown, onFocusCapture };
-}
-
-// src/KeepItemCard.tsx
-import {
-  createContext as createContext3,
-  createElement as createElement2,
-  isValidElement as isValidElement2,
-  useContext as useContext3,
-  useEffect as useEffect4,
-  useState as useState5
-} 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
-  };
-  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")
-    }
-  };
+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":
@@ -2297,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);
@@ -2364,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);
@@ -2397,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,
@@ -2456,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",
@@ -2470,7 +2664,7 @@ function KeepStaleNotice({
           children: retryLabel ?? view.labels.retry
         }
       ),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx11(
         "button",
         {
           type: "button",
@@ -2481,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({
@@ -2493,7 +2687,7 @@ function KeepPruneStaleButton({
   ...props
 }) {
   const view = useKeepPruneStale({ statuses, onPruned });
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx11(
     "button",
     {
       ...props,
@@ -2509,47 +2703,143 @@ function KeepPruneStaleButton({
   );
 }
 
-// src/KeepItemCard.tsx
-import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
-var KeepItemCardContext = createContext3(null);
-function useKeepItemCardCompound(part) {
-  const context = useContext3(KeepItemCardContext);
-  if (!context) throw new Error(`KeepItemCard.${part} must be rendered inside KeepItemCard.`);
-  return context;
-}
-function KeepItemCardRoot({
-  item,
-  title,
-  getTitle,
-  getImageProps,
-  imageComponent: ImageComponent,
-  renderImage,
-  renderTags,
-  showTags = true,
-  showSavedAt = true,
-  imageAlt,
-  render,
-  children,
-  removeLabel,
-  onRemoveError,
-  onRemoved,
-  onRetry,
-  showSaveButton = true,
-  saveButtonLabels,
-  asChild = false,
-  href: hrefOption,
-  onOpen,
-  linkTarget = "title",
-  linkComponent: LinkComponent,
-  linkTargetAttribute,
-  linkRel,
-  highlightQuery,
-  className,
-  ...rootProps
-}) {
-  const view = useKeepItemCard({
-    item,
-    title,
+// 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 = useContext3(KeepItemCardContext);
+  if (!context) throw new Error(`KeepItemCard.${part} must be rendered inside KeepItemCard.`);
+  return context;
+}
+function KeepItemCardRoot({
+  item,
+  title,
+  getTitle,
+  getImageProps,
+  imageComponent: ImageComponent,
+  renderImage,
+  renderTags,
+  showTags = true,
+  showSavedAt = true,
+  imageAlt,
+  render,
+  children,
+  removeLabel,
+  onRemoveError,
+  onRemoved,
+  onRetry,
+  showSaveButton = true,
+  saveButtonLabels,
+  asChild = false,
+  href: hrefOption,
+  onOpen,
+  linkTarget = "title",
+  linkComponent: LinkComponent,
+  linkTargetAttribute,
+  linkRel,
+  highlightQuery,
+  className,
+  ...rootProps
+}) {
+  const view = useKeepItemCard({
+    item,
+    title,
     getTitle,
     getImageProps,
     href: hrefOption,
@@ -2560,7 +2850,7 @@ function KeepItemCardRoot({
   });
   const contextQuery = useKeepSearchQuery();
   const searchQuery = highlightQuery ?? contextQuery;
-  const contentChildren = asChild && isValidElement2(children) ? void 0 : children;
+  const contentChildren = asChild && isValidElement3(children) ? void 0 : children;
   function renderLink(content) {
     if (!view.href || !view.isAvailable) return content;
     const linkProps = {
@@ -2570,17 +2860,17 @@ 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 imageSource = resolvedImageProps?.src;
-  const [imageStatus, setImageStatus] = useState5(imageSource ? "loading" : "error");
-  useEffect4(() => {
+  const [imageStatus, setImageStatus] = useState8(imageSource ? "loading" : "error");
+  useEffect5(() => {
     setImageStatus(imageSource ? "loading" : "error");
   }, [imageSource]);
   let image = null;
@@ -2598,21 +2888,21 @@ function KeepItemCardRoot({
         setImageStatus("error");
       }
     };
-    image = renderImage?.(imagePropsWithHandlers, item) ?? (ImageComponent ? /* @__PURE__ */ jsx9(ImageComponent, { ...imagePropsWithHandlers }) : /* @__PURE__ */ jsx9("img", { ...imagePropsWithHandlers, alt: imagePropsWithHandlers.alt }));
+    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(Fragment4, { 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),
@@ -2620,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",
@@ -2643,18 +2933,18 @@ function KeepItemCardRoot({
     meta,
     error,
     actions,
-    renderText: (content) => /* @__PURE__ */ jsx9(KeepHighlight, { query: searchQuery, children: content })
+    renderText: (content) => /* @__PURE__ */ jsx12(KeepHighlight, { query: searchQuery, children: content })
   };
-  const defaultBody = /* @__PURE__ */ jsxs5(Fragment4, { 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,
@@ -2669,18 +2959,18 @@ 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", "data-media-status": context.imageStatus, children: children ?? context.image ?? /* @__PURE__ */ jsx9("span", { role: "img", "aria-label": context.fallbackLabel, "data-keep-card-fallback": "true", children: fallback ?? /* @__PURE__ */ jsx9(KeepMediaPlaceholderIcon, {}) }) });
+  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 === void 0 ? /* @__PURE__ */ jsxs5(Fragment4, { 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) });
 }
@@ -2688,13 +2978,13 @@ function KeepItemCardTitle({ as = "h3", children, ...props }) {
   const context = useKeepItemCardCompound("Title");
   return createElement2(
     as,
-    { ...props, "data-keep-card-part": "title" },
+    { ...props, "data-keep-card-part": "title", "data-line-clamp": "2" },
     context.renderTitle(context.renderText(children ?? context.resolvedTitle))
   );
 }
 function KeepMediaPlaceholderIcon() {
-  return /* @__PURE__ */ jsxs5("svg", { "data-media-fallback-icon": "true", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx9(
+  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",
@@ -2702,19 +2992,19 @@ function KeepMediaPlaceholderIcon() {
         stroke: "currentColor"
       }
     ),
-    /* @__PURE__ */ jsx9("circle", { cx: "9", cy: "9", r: "1.5", fill: "currentColor" }),
-    /* @__PURE__ */ jsx9("path", { d: "m5.5 18 4.5-4.5 3 3 2-2L19 18", fill: "none", stroke: "currentColor" })
+    /* @__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,
@@ -2724,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) {
@@ -2739,388 +3029,184 @@ function getErrorMessage2(error, fallback) {
   return error instanceof Error ? error.message : fallback;
 }
 
-// src/KeepList.tsx
-import { Fragment as Fragment5, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
-function KeepList(props) {
-  const { fallback, onBoundaryError, boundaryResetKey, ...listProps } = props;
-  const content = /* @__PURE__ */ jsx10(KeepListContent, { ...listProps });
-  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,
-  renderLoading,
-  loadingCount = 6,
-  empty,
-  error: errorContent,
-  itemCardProps,
-  layout = "list",
-  asChild = false,
-  onKeyDown,
-  onFocusCapture,
-  className,
-  ...rootProps
-}) {
-  const view = useKeepListView(query);
-  const roving = useRovingTabIndex();
-  const { state } = view;
-  const body = getListBody(state, {
-    children,
-    renderItem,
-    loading: renderLoading !== void 0 ? renderLoading : loading,
-    loadingCount,
-    loadingLabel: view.labels.loading,
-    empty: empty ?? view.labels.empty,
-    error: errorContent ?? view.labels.error,
-    itemCardProps,
-    layout
-  });
-  return renderRoot(
-    asChild,
-    asChild && isValidElement3(children) ? children : void 0,
-    {
-      ...rootProps,
-      className,
-      "data-keepkit": "list",
-      "data-layout": layout,
-      "aria-busy": state.isLoading || rootProps["aria-busy"],
-      "data-state": getListState(state),
-      "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);
-      }
-    },
-    /* @__PURE__ */ jsx10(KeepSearchQueryProvider, { query: query?.search?.query, children: body }),
-    "KeepList"
-  );
-}
-function getListState(state) {
-  if (state.error && state.items.length === 0) return "error";
-  if (state.isLoading && !state.isHydrated) return "loading";
-  if (state.isHydrated && state.items.length === 0) return "empty";
-  return "ready";
-}
-function getListBody(state, options) {
-  if (state.error && state.items.length === 0) return resolveContent(options.error, state);
-  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(Fragment5, { children: [
-      /* @__PURE__ */ jsx10("span", { role: "status", "data-keepkit": "loading-label", children: options.loadingLabel }),
-      /* @__PURE__ */ jsx10("ul", { "data-keepkit": "skeleton-list", "data-layout": options.layout, children: Array.from({ length: count }, (_, index) => (
-        // biome-ignore lint/suspicious/noArrayIndexKey: Static loading placeholders never reorder.
-        /* @__PURE__ */ jsx10("li", { children: /* @__PURE__ */ jsx10(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)
-  ) });
-}
-
-// src/KeepTagFilter.tsx
-import { isValidElement as isValidElement4 } from "react";
-
-// src/hooks/useKeepTagFilter.ts
+// src/features/collection/hooks/useKeepListView.ts
 import { useKeepList as useKeepList4 } from "@keepkit/core/react";
-import { useCallback as useCallback4, useMemo as useMemo3, useState as useState6 } from "react";
-function useKeepTagFilter(options) {
-  const { query, controlledValue, defaultValue, onChange, onValueChange } = options;
-  const [uncontrolledValue, setUncontrolledValue] = useState6(defaultValue);
-  const resolvedValue = controlledValue ?? uncontrolledValue;
-  const list = useKeepList4({
-    ...query,
-    tags: resolvedValue ? [...query?.tags ?? [], resolvedValue] : query?.tags
-  });
-  const select = useCallback4(
-    (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]
-  );
+function useKeepListView(query) {
   return {
-    state,
-    isLoading: list.isLoading,
-    labels: { all: useUiLabel("allTags"), aria: useUiLabel("filterTags") }
+    state: useKeepList4(query),
+    labels: {
+      loading: useUiLabel("loadingItems"),
+      empty: useUiLabel("noItems"),
+      error: useUiLabel("errorItems")
+    }
   };
 }
 
-// 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,
-  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,
-    {
-      ...rootProps,
-      className,
-      "data-keepkit": "tag-filter",
-      "data-state": view.state.value === void 0 ? "all" : "filtered",
-      "data-loading": view.isLoading ? "true" : void 0
+// 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;
+      });
     },
-    body,
-    "KeepTagFilter"
+    [getItems]
   );
-}
-
-// src/hooks/useQueryControls.ts
-import { useEffect as useEffect5, useState as useState7 } from "react";
-function useKeepSearchInput(options) {
-  const { controlledValue, defaultValue, debounceMs, onValueChange } = options;
-  const [uncontrolledValue, setUncontrolledValue] = useState7(defaultValue);
-  const value = controlledValue ?? uncontrolledValue;
-  useEffect5(() => {
-    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] = useState7(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 });
+  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();
     },
-    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 Fragment6, 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
-    }
+    [getItems]
   );
+  return { ref, onKeyDown, onFocusCapture };
 }
-function KeepSortSelect({
-  value: controlledValue,
-  defaultValue = "updatedAt:desc",
-  onValueChange,
-  "aria-label": ariaLabel,
+
+// 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,
-  ...props
+  renderItem,
+  loading,
+  renderLoading,
+  loadingCount = 6,
+  empty,
+  error: errorContent,
+  itemCardProps,
+  layout = "list",
+  asChild = false,
+  onKeyDown,
+  onFocusCapture,
+  className,
+  ...rootProps
 }) {
-  const view = useKeepSortSelect({ controlledValue, defaultValue, onValueChange });
-  const options = children ?? /* @__PURE__ */ jsxs8(Fragment6, { children: [
-    /* @__PURE__ */ jsx12("option", { value: "updatedAt:desc", children: view.labels.updatedNewest }),
-    /* @__PURE__ */ jsx12("option", { value: "updatedAt:asc", children: view.labels.updatedOldest }),
-    /* @__PURE__ */ jsx12("option", { value: "savedAt:desc", children: view.labels.savedNewest }),
-    /* @__PURE__ */ jsx12("option", { value: "savedAt:asc", children: view.labels.savedOldest })
-  ] });
-  return /* @__PURE__ */ jsx12(
-    "select",
+  const view = useKeepListView(query);
+  const roving = useRovingTabIndex();
+  const { state } = view;
+  const body = getListBody(state, {
+    children,
+    renderItem,
+    loading: renderLoading !== void 0 ? renderLoading : loading,
+    loadingCount,
+    loadingLabel: view.labels.loading,
+    empty: empty ?? view.labels.empty,
+    error: errorContent ?? view.labels.error,
+    itemCardProps,
+    layout
+  });
+  return renderRoot(
+    asChild,
+    asChild && isValidElement4(children) ? children : void 0,
     {
-      ...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
+      ...rootProps,
+      className,
+      "data-keepkit": "list",
+      "data-layout": layout,
+      "aria-busy": state.isLoading || rootProps["aria-busy"],
+      "data-state": getListState(state),
+      "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);
       },
-      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
+      onFocusCapture: (event) => {
+        onFocusCapture?.(event);
+        if (!event.defaultPrevented) roving.onFocusCapture(event);
       }
-    )
-  ] });
+    },
+    /* @__PURE__ */ jsx13(KeepSearchQueryProvider, { query: query?.search?.query, children: body }),
+    "KeepList"
+  );
+}
+function getListState(state) {
+  if (state.error && state.items.length === 0) return "error";
+  if (state.isLoading && !state.isHydrated) return "loading";
+  if (state.isHydrated && state.items.length === 0) return "empty";
+  return "ready";
+}
+function getListBody(state, options) {
+  if (state.error && state.items.length === 0) return resolveContent(options.error, state);
+  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__ */ 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__ */ 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 && !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/KeepCollection.tsx
-import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+// 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__ */ jsx13(KeepCollectionContent, { ...collectionProps });
+  const content = /* @__PURE__ */ jsx14(KeepCollectionContent, { ...collectionProps });
   if (fallback === void 0 && onBoundaryError === void 0) return content;
-  return /* @__PURE__ */ jsx13(KeepErrorBoundary2, { fallback, onError: onBoundaryError, resetKey: boundaryResetKey, children: content });
+  return /* @__PURE__ */ jsx14(KeepErrorBoundary2, { fallback, onError: onBoundaryError, resetKey: boundaryResetKey, children: content });
 }
 function KeepCollectionContent({
   query = {},
@@ -3140,7 +3226,7 @@ function KeepCollectionContent({
   ...rootProps
 }) {
   const view = useKeepCollection({ query, pageSize, urlSync, urlAdapter, features });
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs11(
     "section",
     {
       ...rootProps,
@@ -3151,12 +3237,12 @@ function KeepCollectionContent({
       "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__ */ 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__ */ jsx13(
+        /* @__PURE__ */ jsx14(
           KeepList,
           {
             query: view.resolvedQuery,
@@ -3170,7 +3256,7 @@ function KeepCollectionContent({
             error
           }
         ),
-        view.enabled.pagination ? /* @__PURE__ */ jsx13(
+        view.enabled.pagination ? /* @__PURE__ */ jsx14(
           KeepPagination,
           {
             totalCount: view.list.totalCount,
@@ -3179,7 +3265,7 @@ function KeepCollectionContent({
             onPageChange: view.setPage
           }
         ) : null,
-        view.enabled.bulkActions ? /* @__PURE__ */ jsx13(KeepBulkActions, { query: view.resolvedQuery }) : null
+        view.enabled.bulkActions ? /* @__PURE__ */ jsx14(KeepBulkActions, { query: view.resolvedQuery }) : null
       ]
     }
   );
@@ -3190,172 +3276,37 @@ function getCollectionState(list) {
   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, onKeyDown, onFocusCapture, ...props }) {
-  const roving = useRovingTabIndex();
-  return (
-    // biome-ignore lint/a11y/noStaticElementInteractions: The group manages keyboard focus for descendant cards.
-    /* @__PURE__ */ jsx14(
-      "div",
-      {
-        ...props,
-        ref: roving.ref,
-        "data-keepkit": "layout",
-        "data-layout": layout,
-        "data-roving-tabindex": "true",
-        role: props.role ?? "group",
-        onKeyDown: (event) => {
-          onKeyDown?.(event);
-          if (!event.defaultPrevented) roving.onKeyDown(event);
-        },
-        onFocusCapture: (event) => {
-          onFocusCapture?.(event);
-          if (!event.defaultPrevented) roving.onFocusCapture(event);
-        },
-        children
-      }
-    )
-  );
-}
-
-// src/KeepNoteEditor.tsx
-import { isValidElement as isValidElement5 } from "react";
-
-// src/hooks/useKeepNoteEditor.ts
-import { useKeepItem as useKeepItem3 } from "@keepkit/core/react";
-import { useCallback as useCallback5, useEffect as useEffect6, useRef as useRef5, useState as useState8 } from "react";
-function useKeepNoteEditor({ item, debounceMs, onSaved, onSaveError }) {
-  const itemState = useKeepItem3(item);
-  const { error, isMutating, item: savedItem, updateNote } = itemState;
-  const [note, setNote] = useState8(item.note ?? "");
-  const baselineNote = savedItem?.note ?? item.note ?? "";
-  const isDirty = note !== baselineNote;
-  const lastSavedNoteRef = useRef5(void 0);
-  useEffect6(() => setNote(baselineNote), [baselineNote]);
-  const save = useCallback5(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]);
-  useEffect6(() => {
-    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);
-    },
-    labels: {
-      note: useUiLabel("note"),
-      save: useUiLabel("saveNote"),
-      error: useUiLabel("error")
-    }
-  };
-}
-
-// src/KeepNoteEditor.tsx
-import { Fragment as Fragment7, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
-function KeepNoteEditor({
-  item,
-  label,
-  saveLabel,
-  placeholder,
-  debounceMs = 300,
-  onSaved,
-  onSaveError,
-  render,
-  children,
-  asChild = false,
-  className,
-  ...formProps
-}) {
-  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(Fragment7, { children: [
-    /* @__PURE__ */ jsxs10("label", { children: [
-      label ?? view.labels.note,
-      /* @__PURE__ */ jsx15(
-        "textarea",
-        {
-          "data-keep-action": "edit-note",
-          value: note,
-          onChange: (event) => setNote(event.currentTarget.value),
-          placeholder,
-          disabled: isSaving,
-          onKeyDown: view.handleKeyDown
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx15("button", { type: "submit", "data-keep-action": "save-note", disabled: isSaving, "aria-busy": isSaving, children: saveLabel ?? view.labels.save })
-  ] });
-  if (!asChild) {
-    return /* @__PURE__ */ jsxs10(
-      "form",
+
+// 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",
       {
-        ...formProps,
-        className,
-        "data-keepkit": "note-editor",
-        onSubmit: view.submit,
-        "aria-busy": isSaving || formProps["aria-busy"],
-        "data-state": error ? "error" : isDirty ? "dirty" : "clean",
-        "data-loading": isSaving ? "true" : void 0,
-        "data-disabled": isSaving ? "true" : void 0,
-        children: [
-          body,
-          error ? /* @__PURE__ */ jsx15("p", { role: "alert", children: getErrorMessage3(error, view.labels.error) }) : null
-        ]
+        ...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
       }
-    );
-  }
-  return renderRoot(
-    true,
-    isValidElement5(children) ? children : void 0,
-    {
-      ...formProps,
-      className,
-      "data-keepkit": "note-editor",
-      onSubmit: view.submit,
-      "aria-busy": isSaving || formProps["aria-busy"],
-      "data-state": error ? "error" : isDirty ? "dirty" : "clean",
-      "data-loading": isSaving ? "true" : void 0,
-      "data-disabled": isSaving ? "true" : void 0
-    },
-    body,
-    "KeepNoteEditor"
+    )
   );
 }
-function getErrorMessage3(error, fallback) {
-  return error instanceof Error ? error.message : fallback;
-}
 
-// src/KeepReorderableList.tsx
+// src/features/collection/KeepReorderableList.tsx
 import { useState as useState9 } from "react";
 import { jsx as jsx16 } from "react/jsx-runtime";
 function KeepReorderableList({
@@ -3366,6 +3317,7 @@ function KeepReorderableList({
   ...props
 }) {
   const [draggedId, setDraggedId] = useState9(null);
+  const [dropTargetIndex, setDropTargetIndex] = useState9(null);
   const ids = items.map((item) => item.id);
   function commit(nextIds) {
     void onReorder(nextIds);
@@ -3378,6 +3330,18 @@ function KeepReorderableList({
     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);
@@ -3398,339 +3362,196 @@ function KeepReorderableList({
       dragHandleProps: {
         role: "button",
         tabIndex: 0,
-        draggable: true,
-        "aria-label": itemLabel(item, index),
-        "aria-grabbed": draggedId === item.id,
-        onDragStart: () => setDraggedId(item.id),
-        onDragEnd: () => setDraggedId(null),
-        onKeyDown: onHandleKeyDown
-      }
-    };
-    return /* @__PURE__ */ jsx16(
-      "li",
-      {
-        "data-reorder-index": index,
-        "data-dragging": draggedId === item.id ? "true" : void 0,
-        onDragOver: (event) => {
-          if (draggedId && draggedId !== item.id) event.preventDefault();
-        },
-        onDrop: (event) => {
-          event.preventDefault();
-          if (!draggedId || draggedId === item.id) return;
-          const sourceIndex = ids.indexOf(draggedId);
-          setDraggedId(null);
-          move(sourceIndex, index);
-        },
-        children: renderItem(item, state)
-      },
-      item.id
-    );
-  }) });
-}
-
-// src/hooks/useKeepSyncFeedback.ts
-import { useKeepContext as useKeepContext3 } from "@keepkit/core/react";
-import { useEffect as useEffect7, useRef as useRef6 } from "react";
-function useKeepSyncFeedback() {
-  const { syncState } = useKeepContext3();
-  const emitFeedback = useKeepUiFeedback();
-  const completedMessage = useUiLabel("syncSynced");
-  const failedMessage = useUiLabel("syncFailedMessage");
-  const previousStatus = useRef6("idle");
-  useEffect7(() => {
-    const previous = previousStatus.current;
-    previousStatus.current = syncState.status;
-    if (syncState.status === "error" && previous !== "error") {
-      emitFeedback({ type: "sync-failed", error: syncState.error, message: failedMessage });
-      return;
-    }
-    if (syncState.status === "synced" && (previous === "pending" || previous === "syncing" || previous === "conflict" || previous === "error")) {
-      emitFeedback({ type: "sync-completed", message: completedMessage });
-    }
-  }, [completedMessage, emitFeedback, failedMessage, syncState.error, syncState.status]);
-}
-
-// src/KeepSyncFeedbackObserver.tsx
-function KeepSyncFeedbackObserver() {
-  useKeepSyncFeedback();
-  return null;
-}
-
-// src/hooks/useKeepSyncRecoveryDialog.ts
-import { useKeepContext as useKeepContext4 } from "@keepkit/core/react";
-import { useEffect as useEffect8, useState as useState10 } from "react";
-function useKeepSyncRecoveryDialog(options) {
-  const { open, onOpenChange, conflicts, onManualMerge } = options;
-  const context = useKeepContext4();
-  const conflictList = conflicts ?? context.syncState.conflicts ?? [];
-  const hasRecovery = conflictList.length > 0 || context.syncState.status === "error" || Boolean(context.error);
-  const [dismissed, setDismissed] = useState10(false);
-  const [busyId, setBusyId] = useState10();
-  const [error, setError] = useState10();
-  useEffect8(() => {
-    if (hasRecovery) setDismissed(false);
-  }, [hasRecovery]);
-  return {
-    conflictList,
-    isOpen: open ?? (hasRecovery && !dismissed),
-    busyId,
-    error,
-    showBackupRecovery: context.syncState.status === "error" || Boolean(context.error),
-    close: () => {
-      setDismissed(true);
-      onOpenChange?.(false);
-    },
-    resolve: async (conflict, resolution) => {
-      setError(void 0);
-      setBusyId(conflict.id);
-      try {
-        const merged = resolution === "manual" ? await onManualMerge?.(conflict) : void 0;
-        if (resolution === "manual" && !merged) throw new Error("A manual merge result is required.");
-        await context.resolveSyncConflict(conflict.id, resolution, merged);
-      } catch (cause) {
-        setError(cause);
-      } finally {
-        setBusyId(void 0);
-      }
-    },
-    labels: {
-      close: useUiLabel("close"),
-      title: useUiLabel("resolveSync"),
-      conflict: useUiLabel("syncConflict"),
-      keepLocal: useUiLabel("keepLocal"),
-      useServer: useUiLabel("useServer"),
-      manualMerge: useUiLabel("manualMerge"),
-      localVersion: useUiLabel("localVersion"),
-      remoteVersion: useUiLabel("remoteVersion"),
-      updatedAt: useUiLabel("updatedAt"),
-      note: useUiLabel("note"),
-      backupRecovery: useUiLabel("backupRecovery"),
-      backupRecoveryDescription: useUiLabel("backupRecoveryDescription"),
-      error: useUiLabel("error")
-    }
-  };
-}
-
-// src/KeepSyncRecoveryDialog.tsx
-import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
-function KeepSyncRecoveryDialog({
-  open,
-  onOpenChange,
-  conflicts,
-  onManualMerge,
-  backup,
-  showBackupControls = true,
-  title,
-  children,
-  className,
-  ...props
-}) {
-  const view = useKeepSyncRecoveryDialog({ open, onOpenChange, conflicts, onManualMerge });
-  if (!view.isOpen) return null;
-  return /* @__PURE__ */ jsxs11(
-    "section",
-    {
-      ...props,
-      className,
-      role: "dialog",
-      "aria-modal": "true",
-      "aria-labelledby": "keepkit-sync-recovery-title",
-      "aria-describedby": view.error ? "keepkit-sync-recovery-error" : void 0,
-      "aria-busy": view.busyId !== void 0,
-      "data-keepkit": "sync-recovery",
-      "data-state": view.conflictList.length > 0 ? "conflict" : "error",
-      "data-loading": view.busyId !== void 0 ? "true" : void 0,
-      children: [
-        /* @__PURE__ */ jsxs11("header", { children: [
-          /* @__PURE__ */ jsx17("h2", { id: "keepkit-sync-recovery-title", children: title ?? view.labels.title }),
-          /* @__PURE__ */ jsx17("button", { type: "button", "data-keep-action": "close-dialog", onClick: view.close, "aria-label": view.labels.close, children: view.labels.close })
-        ] }),
-        children,
-        view.conflictList.length > 0 ? /* @__PURE__ */ jsxs11("div", { children: [
-          /* @__PURE__ */ jsx17("p", { children: view.labels.conflict }),
-          view.conflictList.map((conflict) => /* @__PURE__ */ jsxs11("article", { "data-conflict-id": conflict.id, children: [
-            /* @__PURE__ */ jsx17("h3", { children: getMetaTitle(conflict.operation.item?.meta) ?? conflict.id }),
-            /* @__PURE__ */ jsxs11("div", { "data-conflict-preview": true, children: [
-              /* @__PURE__ */ jsx17(
-                ConflictPreview,
-                {
-                  item: conflict.operation.item,
-                  heading: view.labels.localVersion,
-                  updatedAtLabel: view.labels.updatedAt,
-                  noteLabel: view.labels.note,
-                  side: "local"
-                }
-              ),
-              /* @__PURE__ */ jsx17(
-                ConflictPreview,
-                {
-                  item: conflict.remote,
-                  heading: view.labels.remoteVersion,
-                  updatedAtLabel: view.labels.updatedAt,
-                  noteLabel: view.labels.note,
-                  side: "remote"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs11("div", { children: [
-              /* @__PURE__ */ jsx17(
-                "button",
-                {
-                  type: "button",
-                  "data-keep-action": "keep-local",
-                  onClick: () => void view.resolve(conflict, "local"),
-                  disabled: view.busyId !== void 0,
-                  children: view.labels.keepLocal
-                }
-              ),
-              /* @__PURE__ */ jsx17(
-                "button",
-                {
-                  type: "button",
-                  "data-keep-action": "use-server",
-                  onClick: () => void view.resolve(conflict, "remote"),
-                  disabled: view.busyId !== void 0,
-                  children: view.labels.useServer
-                }
-              ),
-              /* @__PURE__ */ jsx17(
-                "button",
-                {
-                  type: "button",
-                  "data-keep-action": "manual-merge",
-                  onClick: () => void view.resolve(conflict, "manual"),
-                  disabled: view.busyId !== void 0 || !onManualMerge,
-                  children: view.labels.manualMerge
-                }
-              )
-            ] })
-          ] }, conflict.id))
-        ] }) : null,
-        view.showBackupRecovery ? /* @__PURE__ */ jsxs11("section", { "data-recovery": "backup", children: [
-          /* @__PURE__ */ jsx17("h3", { children: view.labels.backupRecovery }),
-          /* @__PURE__ */ jsx17("p", { children: view.labels.backupRecoveryDescription }),
-          backup ?? (showBackupControls ? /* @__PURE__ */ jsx17(KeepBackup, {}) : null)
-        ] }) : null,
-        view.error ? /* @__PURE__ */ jsx17("p", { id: "keepkit-sync-recovery-error", role: "alert", "aria-live": "assertive", children: view.error instanceof Error ? view.error.message : view.labels.error }) : null
-      ]
-    }
-  );
-}
-function ConflictPreview({
-  item,
-  heading,
-  updatedAtLabel,
-  noteLabel,
-  side
-}) {
-  return /* @__PURE__ */ jsxs11("article", { "data-conflict-version": side, "aria-label": heading, children: [
-    /* @__PURE__ */ jsx17("h4", { children: heading }),
-    /* @__PURE__ */ jsxs11("dl", { children: [
-      /* @__PURE__ */ jsxs11("div", { children: [
-        /* @__PURE__ */ jsx17("dt", { children: updatedAtLabel }),
-        /* @__PURE__ */ jsx17("dd", { children: item ? /* @__PURE__ */ jsx17("time", { dateTime: new Date(item.updatedAt).toISOString(), children: formatConflictDate(item.updatedAt) }) : "\u2014" })
-      ] }),
-      /* @__PURE__ */ jsxs11("div", { children: [
-        /* @__PURE__ */ jsx17("dt", { children: noteLabel }),
-        /* @__PURE__ */ jsx17("dd", { children: item?.note || "\u2014" })
-      ] })
-    ] })
-  ] });
-}
-function formatConflictDate(timestamp) {
-  return new Date(timestamp).toISOString().slice(0, 10);
+        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/hooks/useKeepSyncStatusBanner.ts
-import { useKeepContext as useKeepContext5 } from "@keepkit/core/react";
-function useKeepSyncStatusBanner({ onRetry, children }) {
-  const context = useKeepContext5();
-  const retryLabel = useUiLabel("retrySync");
-  const resolveLabel = useUiLabel("resolveSync");
-  const conflictLabel = useUiLabel("syncConflict");
-  const pendingLabel = useUiLabel("syncPending");
-  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);
+// 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;
+    }
+  }, [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, isDirty, note, save]);
+  const state = {
+    item,
+    note,
+    setNote,
+    isDirty,
+    isSaving: isMutating,
+    error,
+    save
+  };
+  const submit = (event) => {
+    event.preventDefault();
+    void save().catch(() => void 0);
+  };
   return {
-    status,
-    hasConflicts,
-    message,
-    isMutating: context.isMutating,
-    role: status === "error" || status === "conflict" || hasConflicts ? "alert" : "status",
-    showRetry: status === "error" || status === "pending" || status === "syncing",
-    retryLabel,
-    resolveLabel,
-    retry: async () => {
-      if (onRetry) {
-        await onRetry();
-        return;
-      }
-      await context.flushSync();
+    state,
+    submit,
+    handleKeyDown: (event) => {
+      if (event.key !== "Enter" || !event.ctrlKey && !event.metaKey) return;
+      event.preventDefault();
+      void save().catch(() => void 0);
+    },
+    labels: {
+      note: useUiLabel("note"),
+      save: useUiLabel("saveNote"),
+      error: useUiLabel("error")
     }
   };
 }
-function getErrorMessage4(error) {
-  return error instanceof Error ? error.message : "Sync failed.";
-}
 
-// src/KeepSyncStatusBanner.tsx
-import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
-function KeepSyncStatusBanner({
-  onRetry,
-  onResolveConflicts,
+// src/features/editor/KeepNoteEditor.tsx
+import { Fragment as Fragment8, jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+function KeepNoteEditor({
+  item,
+  label,
+  saveLabel,
+  placeholder,
+  debounceMs = 300,
+  onSaved,
+  onSaveError,
+  render,
   children,
+  asChild = false,
   className,
-  ...props
+  ...formProps
 }) {
-  const view = useKeepSyncStatusBanner({ onRetry, children });
-  if (view.status === "idle" && !view.hasConflicts) return null;
-  return /* @__PURE__ */ jsxs12(
-    "aside",
+  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__ */ jsxs12(Fragment8, { children: [
+    /* @__PURE__ */ jsxs12("label", { children: [
+      label ?? view.labels.note,
+      /* @__PURE__ */ jsx17(
+        "textarea",
+        {
+          "data-keep-action": "edit-note",
+          value: note,
+          onChange: (event) => setNote(event.currentTarget.value),
+          placeholder,
+          disabled: isSaving,
+          onKeyDown: view.handleKeyDown
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx17("button", { type: "submit", "data-keep-action": "save-note", disabled: isSaving, "aria-busy": isSaving, children: saveLabel ?? view.labels.save })
+  ] });
+  if (!asChild) {
+    return /* @__PURE__ */ jsxs12(
+      "form",
+      {
+        ...formProps,
+        className,
+        "data-keepkit": "note-editor",
+        onSubmit: view.submit,
+        "aria-busy": isSaving || formProps["aria-busy"],
+        "data-state": error ? "error" : isDirty ? "dirty" : "clean",
+        "data-loading": isSaving ? "true" : void 0,
+        "data-disabled": isSaving ? "true" : void 0,
+        children: [
+          body,
+          error ? /* @__PURE__ */ jsx17("p", { role: "alert", children: getErrorMessage3(error, view.labels.error) }) : null
+        ]
+      }
+    );
+  }
+  return renderRoot(
+    true,
+    isValidElement5(children) ? children : void 0,
     {
-      ...props,
+      ...formProps,
       className,
-      role: props.role ?? view.role,
-      "aria-live": props["aria-live"] ?? "polite",
-      "data-keepkit": "sync-status",
-      "data-state": view.status,
-      children: [
-        /* @__PURE__ */ jsx18("p", { children: view.message }),
-        view.showRetry ? /* @__PURE__ */ jsx18(
-          "button",
-          {
-            type: "button",
-            "data-keep-action": "retry-sync",
-            onClick: () => void view.retry(),
-            disabled: view.isMutating,
-            children: view.retryLabel
-          }
-        ) : null,
-        view.hasConflicts ? /* @__PURE__ */ jsx18(
-          "button",
-          {
-            type: "button",
-            "data-keep-action": "resolve-conflicts",
-            onClick: onResolveConflicts,
-            disabled: !onResolveConflicts,
-            children: view.resolveLabel
-          }
-        ) : null
-      ]
-    }
+      "data-keepkit": "note-editor",
+      onSubmit: view.submit,
+      "aria-busy": isSaving || formProps["aria-busy"],
+      "data-state": error ? "error" : isDirty ? "dirty" : "clean",
+      "data-loading": isSaving ? "true" : void 0,
+      "data-disabled": isSaving ? "true" : void 0
+    },
+    body,
+    "KeepNoteEditor"
   );
 }
+function getErrorMessage3(error, fallback) {
+  return error instanceof Error ? error.message : fallback;
+}
 
-// src/hooks/useKeepTagEditor.ts
+// src/features/editor/hooks/useKeepTagEditor.ts
 import { useKeepItem as useKeepItem4 } from "@keepkit/core/react";
-import { useCallback as useCallback6, useEffect as useEffect9, useState as useState11 } from "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("");
-  useEffect9(() => setTags(itemState.item?.tags ?? item.tags ?? []), [item.tags, itemState.item?.tags]);
-  const save = useCallback6(async () => {
+  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);
@@ -3775,8 +3596,8 @@ function useKeepTagEditor({ item, onSaved, onSaveError }) {
   };
 }
 
-// src/KeepTagEditor.tsx
-import { Fragment as Fragment8, jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+// src/features/editor/KeepTagEditor.tsx
+import { Fragment as Fragment9, jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
 function KeepTagEditor({
   item,
   availableTags = [],
@@ -3787,10 +3608,10 @@ function KeepTagEditor({
 }) {
   const view = useKeepTagEditor({ item, onSaved, onSaveError });
   const { isSaving, tags } = view.state;
-  const body = render ? render(view.state) : /* @__PURE__ */ jsxs13(Fragment8, { children: [
+  const body = render ? render(view.state) : /* @__PURE__ */ jsxs13(Fragment9, { children: [
     /* @__PURE__ */ jsxs13("label", { children: [
       view.labels.tags,
-      /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsx18(
         "input",
         {
           "data-keep-action": "edit-tags",
@@ -3801,12 +3622,12 @@ function KeepTagEditor({
         }
       )
     ] }),
-    availableTags.length > 0 ? /* @__PURE__ */ jsx19("datalist", { id: `keep-tags-${item.id}`, children: availableTags.map((tag) => /* @__PURE__ */ jsx19("option", { value: tag }, tag)) }) : null,
-    /* @__PURE__ */ jsx19("ul", { "aria-label": view.labels.tags, children: tags.map((tag) => /* @__PURE__ */ jsxs13("li", { children: [
+    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__ */ jsx19("button", { type: "button", "data-keep-action": "remove-tag", onClick: () => view.removeTag(tag), children: view.labels.remove })
+      /* @__PURE__ */ jsx18("button", { type: "button", "data-keep-action": "remove-tag", onClick: () => view.removeTag(tag), children: view.labels.remove })
     ] }, tag)) }),
-    /* @__PURE__ */ jsx19("button", { type: "submit", "data-keep-action": "apply-tags", disabled: isSaving, "aria-busy": isSaving, children: view.labels.apply })
+    /* @__PURE__ */ jsx18("button", { type: "submit", "data-keep-action": "apply-tags", disabled: isSaving, "aria-busy": isSaving, children: view.labels.apply })
   ] });
   return /* @__PURE__ */ jsxs13(
     "form",
@@ -3820,20 +3641,41 @@ function KeepTagEditor({
       "data-disabled": isSaving ? "true" : void 0,
       children: [
         body,
-        view.error ? /* @__PURE__ */ jsx19("p", { role: "alert", children: getErrorMessage5(view.error, view.labels.error) }) : null
+        view.error ? /* @__PURE__ */ jsx18("p", { role: "alert", children: getErrorMessage4(view.error, view.labels.error) }) : null
       ]
     }
   );
 }
-function getErrorMessage5(error, fallback) {
+function getErrorMessage4(error, fallback) {
   return error instanceof Error ? error.message : fallback;
 }
 
-// src/KeepTourBar.tsx
+// 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/hooks/useKeepTourShortcuts.ts
-import { useEffect as useEffect10 } from "react";
+// src/features/navigation/hooks/useKeepTourShortcuts.ts
+import { useEffect as useEffect9 } from "react";
 function useKeepTourShortcuts({
   onNext,
   onPrev,
@@ -3844,7 +3686,7 @@ function useKeepTourShortcuts({
   prevKeys = ["k", "["],
   onError
 }) {
-  useEffect10(() => {
+  useEffect9(() => {
     if (!enabled) return;
     const handleKeyDown = (event) => {
       if (!allowInEditable && isEditableTarget(event.target)) return;
@@ -3864,8 +3706,8 @@ function isEditableTarget(target) {
   return target.isContentEditable || target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT";
 }
 
-// src/KeepTourBar.tsx
-import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+// src/features/navigation/KeepTourBar.tsx
+import { Fragment as Fragment10, jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
 function KeepTourBar({
   navigation: providedNavigation,
   currentId,
@@ -3883,6 +3725,7 @@ function KeepTourBar({
   keyboardShortcuts = false,
   shortcutOptions,
   progress,
+  getItemTitle = (item) => getMetaTitle(item.meta) ?? item.id,
   ...props
 }) {
   const ownNavigation = useKeepNavigator({ currentId, initialIndex });
@@ -3904,84 +3747,89 @@ function KeepTourBar({
     }
   });
   return /* @__PURE__ */ jsxs14("nav", { ...props, "data-keepkit": "tour-bar", "aria-label": props["aria-label"] ?? labels.pagination, children: [
-    showProgress ? /* @__PURE__ */ jsx20("span", { "data-keepkit": "tour-progress", "aria-live": "polite", children: progress ?? `${navigation.currentPosition ?? 0} / ${navigation.items.length}` }) : null,
-    /* @__PURE__ */ jsx20(
+    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__ */ jsx20(
+    /* @__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__ */ jsx20(TourAction, { href: backHref, onClick: onBack, "data-keep-action": "tour-back", children: listLabel }) : null
+    backHref || onBack ? /* @__PURE__ */ jsx19(TourAction, { href: backHref, onClick: onBack, "data-keep-action": "tour-back", children: listLabel }) : null
   ] });
 }
-function TourAction({ href, disabled = false, onClick, children, ...props }) {
+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__ */ jsx20("a", { ...props, href, onClick: () => void onClick?.(), children });
-  }
-  return /* @__PURE__ */ jsx20("button", { ...props, type: "button", disabled, onClick: () => void onClick?.(), children });
-}
-var KeepNavigator = KeepTourBar;
-function navigateTo(item, href) {
-  if (!item || !href || typeof window === "undefined") return;
-  window.location.assign(href);
-}
-
-// src/hooks/useKeepUndo.ts
-import { useKeepContext as useKeepContext6 } from "@keepkit/core/react";
-function useKeepUndo() {
-  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 });
+    return /* @__PURE__ */ jsx19(
+      "a",
+      {
+        ...props,
+        href,
+        onClick: () => void onClick?.(),
+        "aria-label": String(children),
+        "aria-describedby": preview ? previewId : void 0,
+        children: content
       }
-    },
-    message: useUiLabel("undoAvailable"),
-    label: useUiLabel("undo")
-  };
-}
-
-// src/KeepUndo.tsx
-import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
-function KeepUndo({ children, label, ...props }) {
-  const view = useKeepUndo();
-  if (!view.canUndo) return null;
-  return /* @__PURE__ */ jsxs15("div", { ...props, role: "status", "aria-live": "polite", "data-keepkit": "undo", "data-state": "available", children: [
-    children ?? view.message,
-    /* @__PURE__ */ jsx21("button", { type: "button", "data-keep-action": "undo", onClick: () => void view.undo(), children: label ?? view.label })
-  ] });
+    );
+  }
+  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/status.tsx
+// src/features/status/status.tsx
 import { isValidElement as isValidElement6 } from "react";
 
-// src/hooks/useStatusViews.ts
-import { useKeepContext as useKeepContext7 } from "@keepkit/core/react";
-import { useEffect as useEffect11, useRef as useRef7, useState as useState12 } 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 = useKeepContext7();
+  const context = useKeepContext4();
   const resolvedStatus = status ?? getDerivedStatus(context);
   const state = {
     status: resolvedStatus,
@@ -3992,13 +3840,13 @@ function useKeepStatus(status) {
   return { state, defaultLabel: useUiLabel(getStatusLabelKey3(resolvedStatus)) };
 }
 function useKeepAnnouncements(messages) {
-  const context = useKeepContext7();
+  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 = useRef7(void 0);
-  useEffect11(() => {
+  const lastChangeRef = useRef6(void 0);
+  useEffect10(() => {
     const change = context.lastChange;
     if (!change || change === lastChangeRef.current) return;
     lastChangeRef.current = change;
@@ -4025,8 +3873,8 @@ function getStatusLabelKey3(status) {
   return "saved";
 }
 
-// src/status.tsx
-import { Fragment as Fragment9, jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+// src/features/status/status.tsx
+import { Fragment as Fragment11, jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
 function KeepEmptyState({
   title,
   description,
@@ -4038,9 +3886,9 @@ function KeepEmptyState({
 }) {
   const defaultTitle = useKeepEmptyState();
   const contentChildren = asChild && isValidElement6(children) ? void 0 : children;
-  const body = contentChildren ?? /* @__PURE__ */ jsxs16(Fragment9, { children: [
-    /* @__PURE__ */ jsx22("h2", { children: title ?? defaultTitle }),
-    description ? /* @__PURE__ */ jsx22("p", { children: description }) : null,
+  const body = contentChildren ?? /* @__PURE__ */ jsxs15(Fragment11, { children: [
+    /* @__PURE__ */ jsx20("h2", { children: title ?? defaultTitle }),
+    description ? /* @__PURE__ */ jsx20("p", { children: description }) : null,
     action
   ] });
   return renderRoot(
@@ -4082,7 +3930,7 @@ function KeepStatus({
 }
 function KeepAnnouncements({ messages, ...props }) {
   const message = useKeepAnnouncements(messages);
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx20(
     "div",
     {
       ...props,
@@ -4097,7 +3945,301 @@ function KeepAnnouncements({ messages, ...props }) {
 }
 var KeepAnnouncer = KeepAnnouncements;
 
-// src/theme.tsx
+// 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 } = useKeepContext5();
+  const emitFeedback = useKeepUiFeedback();
+  const completedMessage = useUiLabel("syncSynced");
+  const failedMessage = useUiLabel("syncFailedMessage");
+  const previousStatus = useRef7("idle");
+  useEffect11(() => {
+    const previous = previousStatus.current;
+    previousStatus.current = syncState.status;
+    if (syncState.status === "error" && previous !== "error") {
+      emitFeedback({ type: "sync-failed", error: syncState.error, message: failedMessage });
+      return;
+    }
+    if (syncState.status === "synced" && (previous === "pending" || previous === "syncing" || previous === "conflict" || previous === "error")) {
+      emitFeedback({ type: "sync-completed", message: completedMessage });
+    }
+  }, [completedMessage, emitFeedback, failedMessage, syncState.error, syncState.status]);
+}
+
+// src/features/sync/KeepSyncFeedbackObserver.tsx
+function KeepSyncFeedbackObserver() {
+  useKeepSyncFeedback();
+  return null;
+}
+
+// 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 = useKeepContext6();
+  const conflictList = conflicts ?? context.syncState.conflicts ?? [];
+  const hasRecovery = conflictList.length > 0 || context.syncState.status === "error" || Boolean(context.error);
+  const [dismissed, setDismissed] = useState13(false);
+  const [busyId, setBusyId] = useState13();
+  const [error, setError] = useState13();
+  useEffect12(() => {
+    if (hasRecovery) setDismissed(false);
+  }, [hasRecovery]);
+  return {
+    conflictList,
+    isOpen: open ?? (hasRecovery && !dismissed),
+    busyId,
+    error,
+    showBackupRecovery: context.syncState.status === "error" || Boolean(context.error),
+    close: () => {
+      setDismissed(true);
+      onOpenChange?.(false);
+    },
+    resolve: async (conflict, resolution) => {
+      setError(void 0);
+      setBusyId(conflict.id);
+      try {
+        const merged = resolution === "manual" ? await onManualMerge?.(conflict) : void 0;
+        if (resolution === "manual" && !merged) throw new Error("A manual merge result is required.");
+        await context.resolveSyncConflict(conflict.id, resolution, merged);
+      } catch (cause) {
+        setError(cause);
+      } finally {
+        setBusyId(void 0);
+      }
+    },
+    labels: {
+      close: useUiLabel("close"),
+      title: useUiLabel("resolveSync"),
+      conflict: useUiLabel("syncConflict"),
+      keepLocal: useUiLabel("keepLocal"),
+      useServer: useUiLabel("useServer"),
+      manualMerge: useUiLabel("manualMerge"),
+      localVersion: useUiLabel("localVersion"),
+      remoteVersion: useUiLabel("remoteVersion"),
+      updatedAt: useUiLabel("updatedAt"),
+      note: useUiLabel("note"),
+      backupRecovery: useUiLabel("backupRecovery"),
+      backupRecoveryDescription: useUiLabel("backupRecoveryDescription"),
+      error: useUiLabel("error")
+    }
+  };
+}
+
+// src/features/sync/KeepSyncRecoveryDialog.tsx
+import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
+function KeepSyncRecoveryDialog({
+  open,
+  onOpenChange,
+  conflicts,
+  onManualMerge,
+  backup,
+  showBackupControls = true,
+  title,
+  children,
+  className,
+  ...props
+}) {
+  const view = useKeepSyncRecoveryDialog({ open, onOpenChange, conflicts, onManualMerge });
+  if (!view.isOpen) return null;
+  return /* @__PURE__ */ jsxs16(
+    "section",
+    {
+      ...props,
+      className,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": "keepkit-sync-recovery-title",
+      "aria-describedby": view.error ? "keepkit-sync-recovery-error" : void 0,
+      "aria-busy": view.busyId !== void 0,
+      "data-keepkit": "sync-recovery",
+      "data-state": view.conflictList.length > 0 ? "conflict" : "error",
+      "data-loading": view.busyId !== void 0 ? "true" : void 0,
+      children: [
+        /* @__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__ */ 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,
+                  heading: view.labels.localVersion,
+                  updatedAtLabel: view.labels.updatedAt,
+                  noteLabel: view.labels.note,
+                  side: "local"
+                }
+              ),
+              /* @__PURE__ */ jsx21(
+                ConflictPreview,
+                {
+                  item: conflict.remote,
+                  heading: view.labels.remoteVersion,
+                  updatedAtLabel: view.labels.updatedAt,
+                  noteLabel: view.labels.note,
+                  side: "remote"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs16("div", { children: [
+              /* @__PURE__ */ jsx21(
+                "button",
+                {
+                  type: "button",
+                  "data-keep-action": "keep-local",
+                  onClick: () => void view.resolve(conflict, "local"),
+                  disabled: view.busyId !== void 0,
+                  children: view.labels.keepLocal
+                }
+              ),
+              /* @__PURE__ */ jsx21(
+                "button",
+                {
+                  type: "button",
+                  "data-keep-action": "use-server",
+                  onClick: () => void view.resolve(conflict, "remote"),
+                  disabled: view.busyId !== void 0,
+                  children: view.labels.useServer
+                }
+              ),
+              /* @__PURE__ */ jsx21(
+                "button",
+                {
+                  type: "button",
+                  "data-keep-action": "manual-merge",
+                  onClick: () => void view.resolve(conflict, "manual"),
+                  disabled: view.busyId !== void 0 || !onManualMerge,
+                  children: view.labels.manualMerge
+                }
+              )
+            ] })
+          ] }, conflict.id))
+        ] }) : 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__ */ jsx21("p", { id: "keepkit-sync-recovery-error", role: "alert", "aria-live": "assertive", children: view.error instanceof Error ? view.error.message : view.labels.error }) : null
+      ]
+    }
+  );
+}
+function ConflictPreview({
+  item,
+  heading,
+  updatedAtLabel,
+  noteLabel,
+  side
+}) {
+  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__ */ jsxs16("div", { children: [
+        /* @__PURE__ */ jsx21("dt", { children: noteLabel }),
+        /* @__PURE__ */ jsx21("dd", { children: item?.note || "\u2014" })
+      ] })
+    ] })
+  ] });
+}
+function formatConflictDate(timestamp) {
+  return new Date(timestamp).toISOString().slice(0, 10);
+}
+
+// src/features/sync/hooks/useKeepSyncStatusBanner.ts
+import { useKeepContext as useKeepContext7 } from "@keepkit/core/react";
+function useKeepSyncStatusBanner({ onRetry, children }) {
+  const context = useKeepContext7();
+  const retryLabel = useUiLabel("retrySync");
+  const resolveLabel = useUiLabel("resolveSync");
+  const conflictLabel = useUiLabel("syncConflict");
+  const pendingLabel = useUiLabel("syncPending");
+  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" ? getErrorMessage5(context.syncState.error) : status === "conflict" || hasConflicts ? conflictLabel : status === "pending" || status === "syncing" ? pendingLabel : syncedLabel);
+  return {
+    status,
+    hasConflicts,
+    message,
+    isMutating: context.isMutating,
+    role: status === "error" || status === "conflict" || hasConflicts ? "alert" : "status",
+    showRetry: status === "error" || status === "pending" || status === "syncing",
+    retryLabel,
+    resolveLabel,
+    retry: async () => {
+      if (onRetry) {
+        await onRetry();
+        return;
+      }
+      await context.flushSync();
+    }
+  };
+}
+function getErrorMessage5(error) {
+  return error instanceof Error ? error.message : "Sync failed.";
+}
+
+// src/features/sync/KeepSyncStatusBanner.tsx
+import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
+function KeepSyncStatusBanner({
+  onRetry,
+  onResolveConflicts,
+  children,
+  className,
+  ...props
+}) {
+  const view = useKeepSyncStatusBanner({ onRetry, children });
+  if (view.status === "idle" && !view.hasConflicts) return null;
+  return /* @__PURE__ */ jsxs17(
+    "aside",
+    {
+      ...props,
+      className,
+      role: props.role ?? view.role,
+      "aria-live": props["aria-live"] ?? "polite",
+      "data-keepkit": "sync-status",
+      "data-state": view.status,
+      children: [
+        /* @__PURE__ */ jsx22("p", { children: view.message }),
+        view.showRetry ? /* @__PURE__ */ jsx22(
+          "button",
+          {
+            type: "button",
+            "data-keep-action": "retry-sync",
+            onClick: () => void view.retry(),
+            disabled: view.isMutating,
+            children: view.retryLabel
+          }
+        ) : null,
+        view.hasConflicts ? /* @__PURE__ */ jsx22(
+          "button",
+          {
+            type: "button",
+            "data-keep-action": "resolve-conflicts",
+            onClick: onResolveConflicts,
+            disabled: !onResolveConflicts,
+            children: view.resolveLabel
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/foundation/theme.tsx
 import { cloneElement as cloneElement2, isValidElement as isValidElement7 } from "react";
 import { jsx as jsx23 } from "react/jsx-runtime";
 var keepThemeNames = [
@@ -4182,7 +4324,7 @@ import {
   LocalStorageSyncQueueAdapter,
   SyncStorageAdapter
 } from "@keepkit/core/storage";
-import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
 function KeepKitProvider({
   labels,
   locale,
@@ -4216,7 +4358,7 @@ function KeepKitProvider({
       className: themeClassName,
       style: themeStyle,
       asChild: themeAsChild,
-      children: /* @__PURE__ */ jsxs17(CoreKeepProvider, { ...providerProps, children: [
+      children: /* @__PURE__ */ jsxs18(CoreKeepProvider, { ...providerProps, children: [
         /* @__PURE__ */ jsx24(KeepSyncFeedbackObserver, {}),
         children,
         /* @__PURE__ */ jsx24(KeepAnnouncements, {})