@keepkit/ui 0.21.0 → 0.22.0

package/dist/index.js

@@ -107,6 +107,8 @@ var DE_LABELS = {
   filterCollections: "Nach Sammlung filtern",
   uncategorized: "Nicht kategorisiert",
   saveWithNote: "Mit Notiz speichern",
+  editSavedItem: "Gespeichertes Element bearbeiten",
+  unsavedChanges: "Nicht gespeicherte \xC4nderungen",
   save: "Speichern",
   saved: "Gespeichert",
   remove: "Entfernen",
@@ -204,6 +206,8 @@ var EN_LABELS = {
   filterCollections: "Filter collections",
   uncategorized: "Uncategorized",
   saveWithNote: "Save with note",
+  editSavedItem: "Edit saved item",
+  unsavedChanges: "Unsaved changes",
   save: "Save",
   saved: "Saved",
   remove: "Remove",
@@ -301,6 +305,8 @@ var ES_LABELS = {
   filterCollections: "Filtrar por colecci\xF3n",
   uncategorized: "Sin categor\xEDa",
   saveWithNote: "Guardar con nota",
+  editSavedItem: "Editar elemento guardado",
+  unsavedChanges: "Cambios sin guardar",
   save: "Guardar",
   saved: "Guardado",
   remove: "Eliminar",
@@ -398,6 +404,8 @@ var FIL_LABELS = {
   filterCollections: "I-filter ayon sa koleksyon",
   uncategorized: "Walang kategorya",
   saveWithNote: "I-save na may tala",
+  editSavedItem: "I-edit ang naka-save na item",
+  unsavedChanges: "Mga hindi pa nai-save na pagbabago",
   save: "I-save",
   saved: "Nai-save",
   remove: "Alisin",
@@ -495,6 +503,8 @@ var FR_LABELS = {
   filterCollections: "Filtrer par collection",
   uncategorized: "Non class\xE9",
   saveWithNote: "Enregistrer avec une note",
+  editSavedItem: "Modifier l\u2019\xE9l\xE9ment enregistr\xE9",
+  unsavedChanges: "Modifications non enregistr\xE9es",
   save: "Enregistrer",
   saved: "Enregistr\xE9",
   remove: "Supprimer",
@@ -592,6 +602,8 @@ var ID_LABELS = {
   filterCollections: "Filter koleksi",
   uncategorized: "Tanpa kategori",
   saveWithNote: "Simpan dengan catatan",
+  editSavedItem: "Edit item tersimpan",
+  unsavedChanges: "Perubahan belum disimpan",
   save: "Simpan",
   saved: "Tersimpan",
   remove: "Hapus",
@@ -689,6 +701,8 @@ var IT_LABELS = {
   filterCollections: "Filtra per raccolta",
   uncategorized: "Senza categoria",
   saveWithNote: "Salva con nota",
+  editSavedItem: "Modifica elemento salvato",
+  unsavedChanges: "Modifiche non salvate",
   save: "Salva",
   saved: "Salvato",
   remove: "Rimuovi",
@@ -786,6 +800,8 @@ var JA_LABELS = {
   filterCollections: "\u30B3\u30EC\u30AF\u30B7\u30E7\u30F3\u3067\u7D5E\u308A\u8FBC\u3080",
   uncategorized: "\u672A\u5206\u985E",
   saveWithNote: "\u30E1\u30E2\u4ED8\u304D\u3067\u4FDD\u5B58",
+  editSavedItem: "\u4FDD\u5B58\u3057\u305F\u30A2\u30A4\u30C6\u30E0\u3092\u7DE8\u96C6",
+  unsavedChanges: "\u672A\u4FDD\u5B58\u306E\u5909\u66F4\u304C\u3042\u308A\u307E\u3059",
   save: "\u4FDD\u5B58",
   saved: "\u4FDD\u5B58\u6E08\u307F",
   remove: "\u524A\u9664",
@@ -883,6 +899,8 @@ var KO_LABELS = {
   filterCollections: "\uCEEC\uB809\uC158 \uD544\uD130",
   uncategorized: "\uBBF8\uBD84\uB958",
   saveWithNote: "\uBA54\uBAA8\uC640 \uD568\uAED8 \uC800\uC7A5",
+  editSavedItem: "\uC800\uC7A5\uB41C \uD56D\uBAA9 \uD3B8\uC9D1",
+  unsavedChanges: "\uC800\uC7A5\uB418\uC9C0 \uC54A\uC740 \uBCC0\uACBD \uC0AC\uD56D",
   save: "\uC800\uC7A5",
   saved: "\uC800\uC7A5\uB428",
   remove: "\uC0AD\uC81C",
@@ -980,6 +998,8 @@ var MS_LABELS = {
   filterCollections: "Tapis koleksi",
   uncategorized: "Tiada kategori",
   saveWithNote: "Simpan dengan nota",
+  editSavedItem: "Edit item yang disimpan",
+  unsavedChanges: "Perubahan belum disimpan",
   save: "Simpan",
   saved: "Disimpan",
   remove: "Buang",
@@ -1077,6 +1097,8 @@ var PT_BR_LABELS = {
   filterCollections: "Filtrar por cole\xE7\xE3o",
   uncategorized: "Sem categoria",
   saveWithNote: "Salvar com nota",
+  editSavedItem: "Editar item salvo",
+  unsavedChanges: "Altera\xE7\xF5es n\xE3o salvas",
   save: "Salvar",
   saved: "Salvo",
   remove: "Remover",
@@ -1174,6 +1196,8 @@ var RU_LABELS = {
   filterCollections: "\u0424\u0438\u043B\u044C\u0442\u0440 \u043A\u043E\u043B\u043B\u0435\u043A\u0446\u0438\u0439",
   uncategorized: "\u0411\u0435\u0437 \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u0438",
   saveWithNote: "\u0421\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u044C \u0441 \u0437\u0430\u043C\u0435\u0442\u043A\u043E\u0439",
+  editSavedItem: "\u0420\u0435\u0434\u0430\u043A\u0442\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0441\u043E\u0445\u0440\u0430\u043D\u0451\u043D\u043D\u044B\u0439 \u044D\u043B\u0435\u043C\u0435\u043D\u0442",
+  unsavedChanges: "\u041D\u0435\u0441\u043E\u0445\u0440\u0430\u043D\u0451\u043D\u043D\u044B\u0435 \u0438\u0437\u043C\u0435\u043D\u0435\u043D\u0438\u044F",
   save: "\u0421\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u044C",
   saved: "\u0421\u043E\u0445\u0440\u0430\u043D\u0435\u043D\u043E",
   remove: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C",
@@ -1271,6 +1295,8 @@ var TH_LABELS = {
   filterCollections: "\u0E01\u0E23\u0E2D\u0E07\u0E04\u0E2D\u0E25\u0E40\u0E25\u0E01\u0E0A\u0E31\u0E19",
   uncategorized: "\u0E44\u0E21\u0E48\u0E21\u0E35\u0E2B\u0E21\u0E27\u0E14\u0E2B\u0E21\u0E39\u0E48",
   saveWithNote: "\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01\u0E1E\u0E23\u0E49\u0E2D\u0E21\u0E42\u0E19\u0E49\u0E15",
+  editSavedItem: "\u0E41\u0E01\u0E49\u0E44\u0E02\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23\u0E17\u0E35\u0E48\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01\u0E44\u0E27\u0E49",
+  unsavedChanges: "\u0E21\u0E35\u0E01\u0E32\u0E23\u0E40\u0E1B\u0E25\u0E35\u0E48\u0E22\u0E19\u0E41\u0E1B\u0E25\u0E07\u0E17\u0E35\u0E48\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E44\u0E14\u0E49\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01",
   save: "\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01",
   saved: "\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01\u0E41\u0E25\u0E49\u0E27",
   remove: "\u0E25\u0E1A",
@@ -1368,6 +1394,8 @@ var VI_LABELS = {
   filterCollections: "L\u1ECDc theo b\u1ED9 s\u01B0u t\u1EADp",
   uncategorized: "Ch\u01B0a ph\xE2n lo\u1EA1i",
   saveWithNote: "L\u01B0u k\xE8m ghi ch\xFA",
+  editSavedItem: "Ch\u1EC9nh s\u1EEDa m\u1EE5c \u0111\xE3 l\u01B0u",
+  unsavedChanges: "Thay \u0111\u1ED5i ch\u01B0a \u0111\u01B0\u1EE3c l\u01B0u",
   save: "L\u01B0u",
   saved: "\u0110\xE3 l\u01B0u",
   remove: "X\xF3a",
@@ -1465,6 +1493,8 @@ var ZH_HANS_LABELS = {
   filterCollections: "\u6309\u96C6\u5408\u7B5B\u9009",
   uncategorized: "\u672A\u5206\u7C7B",
   saveWithNote: "\u4FDD\u5B58\u5E76\u6DFB\u52A0\u5907\u6CE8",
+  editSavedItem: "\u7F16\u8F91\u5DF2\u4FDD\u5B58\u9879\u76EE",
+  unsavedChanges: "\u6709\u672A\u4FDD\u5B58\u7684\u66F4\u6539",
   save: "\u4FDD\u5B58",
   saved: "\u5DF2\u4FDD\u5B58",
   remove: "\u5220\u9664",
@@ -1562,6 +1592,8 @@ var ZH_HANT_LABELS = {
   filterCollections: "\u4F9D\u6536\u85CF\u96C6\u7BE9\u9078",
   uncategorized: "\u672A\u5206\u985E",
   saveWithNote: "\u5132\u5B58\u4E26\u52A0\u5099\u8A3B",
+  editSavedItem: "\u7DE8\u8F2F\u5DF2\u5132\u5B58\u9805\u76EE",
+  unsavedChanges: "\u6709\u672A\u5132\u5B58\u7684\u8B8A\u66F4",
   save: "\u5132\u5B58",
   saved: "\u5DF2\u5132\u5B58",
   remove: "\u522A\u9664",
@@ -2464,7 +2496,13 @@ function renderIcon(icon, className) {
 
 // src/features/actions/KeepSavePopover.tsx
 import { useKeepItem as useKeepItem4 } from "@keepkit/core/react";
-import { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef5, useState as useState4 } from "react";
+import {
+  useCallback as useCallback3,
+  useEffect as useEffect4,
+  useId,
+  useRef as useRef5,
+  useState as useState4
+} from "react";
 
 // src/features/editor/KeepQuickEditor.tsx
 import { useKeepContext as useKeepContext2, useKeepItem as useKeepItem3 } from "@keepkit/core/react";
@@ -2483,12 +2521,16 @@ function useKeepQuickEditor(item, options = {}) {
   const [note, setNote] = useState3(baseline.note ?? "");
   const [tags, setTags] = useState3(baseline.tags ?? []);
   const [collectionId, setCollectionId] = useState3(baseline.collectionId);
+  const [saveStatus, setSaveStatus] = useState3("idle");
+  const [saveError, setSaveError] = useState3(null);
   const baselineRef = useRef4({
     note: baseline.note ?? "",
     tags: baseline.tags ?? [],
     collectionId: baseline.collectionId
   });
   const draftRef = useRef4({ note, tags, collectionId });
+  const flushRequestedRef = useRef4(false);
+  const flushPromiseRef = useRef4(null);
   draftRef.current = { note, tags, collectionId };
   useEffect3(() => {
     if (draftRef.current.note === baselineRef.current.note && sameTags(draftRef.current.tags, baselineRef.current.tags) && draftRef.current.collectionId === baselineRef.current.collectionId) {
@@ -2503,24 +2545,49 @@ function useKeepQuickEditor(item, options = {}) {
     }
   }, [baseline]);
   const isDirty = note !== baselineRef.current.note || !sameTags(tags, baselineRef.current.tags) || collectionId !== baselineRef.current.collectionId;
-  const flush = useCallback2(async () => {
-    const draft = draftRef.current;
-    try {
-      if (draft.note !== baselineRef.current.note) await updateNote(draft.note.trim() || void 0);
-      if (!sameTags(draft.tags, baselineRef.current.tags)) await updateTags(draft.tags);
-      if (draft.collectionId !== baselineRef.current.collectionId) await moveToCollection(draft.collectionId);
-      baselineRef.current = { note: draft.note, tags: [...draft.tags], collectionId: draft.collectionId };
-      const { collectionId: _oldCollectionId, ...withoutCollection } = baseline;
-      onSaved?.({
-        ...withoutCollection,
-        note: draft.note.trim() || void 0,
-        tags: draft.tags,
-        ...draft.collectionId ? { collectionId: draft.collectionId } : {}
-      });
-    } catch (error2) {
-      onSaveError?.(error2);
-      throw error2;
-    }
+  useEffect3(() => {
+    if (!isDirty && saveStatus === "dirty" && !flushPromiseRef.current) setSaveStatus("idle");
+  }, [isDirty, saveStatus]);
+  const flush = useCallback2(() => {
+    flushRequestedRef.current = true;
+    if (flushPromiseRef.current) return flushPromiseRef.current;
+    const run = async () => {
+      let saved = false;
+      while (flushRequestedRef.current || !sameDraft(draftRef.current, baselineRef.current)) {
+        flushRequestedRef.current = false;
+        const draft = { ...draftRef.current, tags: [...draftRef.current.tags] };
+        const previous = baselineRef.current;
+        if (sameDraft(draft, previous)) continue;
+        setSaveError(null);
+        setSaveStatus("saving");
+        try {
+          if (draft.note !== previous.note) await updateNote(draft.note.trim() || void 0);
+          if (!sameTags(draft.tags, previous.tags)) await updateTags(draft.tags);
+          if (draft.collectionId !== previous.collectionId) await moveToCollection(draft.collectionId);
+        } catch (error2) {
+          setSaveError(error2);
+          setSaveStatus("error");
+          onSaveError?.(error2);
+          throw error2;
+        }
+        baselineRef.current = draft;
+        saved = true;
+        const { collectionId: _oldCollectionId, ...withoutCollection } = baseline;
+        onSaved?.({
+          ...withoutCollection,
+          note: draft.note.trim() || void 0,
+          tags: draft.tags,
+          ...draft.collectionId ? { collectionId: draft.collectionId } : {}
+        });
+        if (!sameDraft(draftRef.current, baselineRef.current)) flushRequestedRef.current = true;
+      }
+      if (saved) setSaveStatus("saved");
+    };
+    const promise = run().finally(() => {
+      flushPromiseRef.current = null;
+    });
+    flushPromiseRef.current = promise;
+    return promise;
   }, [baseline, moveToCollection, onSaveError, onSaved, updateNote, updateTags]);
   useEffect3(() => {
     if (!isDirty || debounceMs <= 0) return;
@@ -2533,12 +2600,25 @@ function useKeepQuickEditor(item, options = {}) {
       note,
       tags,
       collectionId,
-      setNote,
-      setTags,
-      setCollectionId,
+      setNote: (value) => {
+        setSaveError(null);
+        setSaveStatus("dirty");
+        setNote(value);
+      },
+      setTags: (value) => {
+        setSaveError(null);
+        setSaveStatus("dirty");
+        setTags(value);
+      },
+      setCollectionId: (value) => {
+        setSaveError(null);
+        setSaveStatus("dirty");
+        setCollectionId(value);
+      },
       isDirty,
-      isSaving: isMutating,
-      error,
+      isSaving: isMutating || saveStatus === "saving",
+      saveStatus,
+      error: saveError ?? error,
       flush
     }
   };
@@ -2546,17 +2626,24 @@ function useKeepQuickEditor(item, options = {}) {
 function KeepQuickEditor({
   item,
   debounceMs = 300,
+  onSaved,
+  onSaveError,
+  ...props
+}) {
+  const view = useKeepQuickEditor(item, { debounceMs, onSaved, onSaveError });
+  return /* @__PURE__ */ jsx7(KeepQuickEditorView, { ...props, state: view.state });
+}
+function KeepQuickEditorView({
+  state,
   collectionIds,
   collectionLabels,
+  showSaveButton = true,
   children,
   onClose,
-  onSaved,
-  onSaveError,
+  focusScopeRef,
   ...props
 }) {
-  const view = useKeepQuickEditor(item, { debounceMs, onSaved, onSaveError });
   const context = useKeepContext2();
-  const { state } = view;
   const rootRef = useRef4(null);
   const noteLabel = useUiLabel("note");
   const tagsLabel = useUiLabel("tags");
@@ -2564,17 +2651,24 @@ function KeepQuickEditor({
   const uncategorizedLabel = useUiLabel("uncategorized");
   const saveLabel = useUiLabel("saveWithNote");
   const closeLabel = useUiLabel("close");
+  const unsavedChangesLabel = useUiLabel("unsavedChanges");
+  const savingLabel = useUiLabel("saving");
+  const savedLabel = useUiLabel("saved");
+  const errorLabel = useUiLabel("error");
   const submit = (event) => {
     event.preventDefault();
     void state.flush().catch(() => void 0);
   };
   const onKeyDown = (event) => {
+    props.onKeyDown?.(event);
+    if (event.defaultPrevented) return;
     if (event.key === "Escape") {
       event.preventDefault();
       void state.flush().then(() => onClose?.()).catch(() => void 0);
     }
-    if (event.key === "Tab") trapFocus(event, rootRef.current);
+    if (event.key === "Tab") trapFocus(event, focusScopeRef?.current ?? rootRef.current);
   };
+  const statusMessage = state.saveStatus === "dirty" ? unsavedChangesLabel : state.saveStatus === "saving" ? savingLabel : state.saveStatus === "saved" ? savedLabel : state.saveStatus === "error" ? getErrorMessage2(state.error, errorLabel) : null;
   const body = typeof children === "function" ? children(state) : children ?? /* @__PURE__ */ jsxs5(Fragment4, { children: [
     /* @__PURE__ */ jsxs5("label", { children: [
       noteLabel,
@@ -2610,17 +2704,28 @@ function KeepQuickEditor({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx7("button", { type: "submit", disabled: state.isSaving, "data-keep-action": "save-quick-edit", children: saveLabel }),
-    /* @__PURE__ */ jsx7(
+    statusMessage ? /* @__PURE__ */ jsx7(
+      "p",
+      {
+        role: state.saveStatus === "error" ? "alert" : "status",
+        "aria-live": state.saveStatus === "error" ? "assertive" : "polite",
+        tabIndex: state.saveStatus === "error" ? -1 : void 0,
+        "data-keep-editor-status": "true",
+        "data-state": state.saveStatus,
+        children: statusMessage
+      }
+    ) : null,
+    showSaveButton ? /* @__PURE__ */ jsx7("button", { type: "submit", disabled: state.isSaving, "data-keep-action": "save-quick-edit", children: saveLabel }) : null,
+    onClose ? /* @__PURE__ */ jsx7(
       "button",
       {
         type: "button",
-        onClick: () => void state.flush().then(() => onClose?.()).catch(() => void 0),
+        onClick: () => void state.flush().then(onClose).catch(() => void 0),
         disabled: state.isSaving,
         "data-keep-action": "close-quick-edit",
         children: closeLabel
       }
-    )
+    ) : null
   ] });
   return /* @__PURE__ */ jsx7(
     "form",
@@ -2631,11 +2736,18 @@ function KeepQuickEditor({
       onKeyDown,
       "data-keepkit": "quick-editor",
       "data-state": state.isDirty ? "dirty" : "clean",
+      "data-save-status": state.saveStatus,
       "aria-busy": state.isSaving || props["aria-busy"],
       children: body
     }
   );
 }
+function sameDraft(left, right) {
+  return left.note === right.note && sameTags(left.tags, right.tags) && left.collectionId === right.collectionId;
+}
+function getErrorMessage2(error, fallback) {
+  return error instanceof Error ? error.message : fallback;
+}
 function sameTags(left, right) {
   return left.length === right.length && left.every((tag, index) => tag === right[index]);
 }
@@ -2663,6 +2775,7 @@ function KeepSavePopover({
   open: controlledOpen,
   defaultOpen = false,
   onOpenChange,
+  dialogLabel,
   buttonProps,
   editorProps,
   children,
@@ -2672,18 +2785,24 @@ function KeepSavePopover({
   const [internalOpen, setInternalOpen] = useState4(defaultOpen);
   const isOpen = controlledOpen ?? internalOpen;
   const triggerRef = useRef5(null);
+  const wasOpenRef = useRef5(isOpen);
   const previousSaved = useRef5(state.isSaved);
   const observedHydration = useRef5(!state.isLoading);
-  const closeLabel = useUiLabel("close");
+  const panelId = useId();
+  const titleId = `${panelId}-title`;
+  const editSavedItemLabel = useUiLabel("editSavedItem");
   const { ref: _buttonRef, ...resolvedButtonProps } = buttonProps ?? {};
   const setOpen = useCallback3(
     (next) => {
       if (controlledOpen === void 0) setInternalOpen(next);
       onOpenChange?.(next);
-      if (!next) window.setTimeout(() => triggerRef.current?.focus(), 0);
     },
     [controlledOpen, onOpenChange]
   );
+  useEffect4(() => {
+    if (wasOpenRef.current && !isOpen) window.setTimeout(() => triggerRef.current?.focus(), 0);
+    wasOpenRef.current = isOpen;
+  }, [isOpen]);
   useEffect4(() => {
     if (!observedHydration.current) {
       if (state.isLoading) return;
@@ -2694,16 +2813,112 @@ function KeepSavePopover({
     if (!previousSaved.current && state.isSaved) setOpen(true);
     previousSaved.current = state.isSaved;
   }, [setOpen, state.isLoading, state.isSaved]);
+  useEffect4(() => {
+    if (isOpen && observedHydration.current && !state.isSaved) setOpen(false);
+  }, [isOpen, setOpen, state.isSaved]);
   const currentItem = state.item;
   return /* @__PURE__ */ jsxs6("div", { ...props, "data-keepkit": "save-popover", "data-open": isOpen ? "true" : "false", children: [
-    /* @__PURE__ */ jsx8(KeepButton, { ...resolvedButtonProps, item, asChild: false, ref: triggerRef }),
-    isOpen && currentItem ? /* @__PURE__ */ jsxs6("div", { role: "dialog", "aria-label": children ? void 0 : closeLabel, "data-keep-popover-panel": "true", children: [
-      children,
-      /* @__PURE__ */ jsx8(KeepQuickEditor, { ...editorProps, item: currentItem, onClose: () => setOpen(false) }),
-      /* @__PURE__ */ jsx8("button", { type: "button", onClick: () => setOpen(false), "data-keep-action": "close-save-popover", children: closeLabel })
-    ] }) : null
+    /* @__PURE__ */ jsx8(
+      KeepButton,
+      {
+        ...resolvedButtonProps,
+        item,
+        asChild: false,
+        ref: triggerRef,
+        "aria-haspopup": "dialog",
+        "aria-expanded": isOpen,
+        "aria-controls": panelId
+      }
+    ),
+    isOpen && currentItem ? /* @__PURE__ */ jsx8(
+      KeepSavePopoverPanel,
+      {
+        id: panelId,
+        titleId,
+        dialogLabel: dialogLabel ?? editSavedItemLabel,
+        item: currentItem,
+        editorProps,
+        triggerRef,
+        onClose: () => setOpen(false),
+        children
+      }
+    ) : null
   ] });
 }
+function KeepSavePopoverPanel({
+  id,
+  titleId,
+  dialogLabel,
+  item,
+  editorProps,
+  triggerRef,
+  onClose,
+  children
+}) {
+  const { debounceMs, onSaved, onSaveError, ...editorViewProps } = editorProps ?? {};
+  const { state } = useKeepQuickEditor(item, { debounceMs, onSaved, onSaveError });
+  const panelRef = useRef5(null);
+  const closingRef = useRef5(null);
+  const closeLabel = useUiLabel("close");
+  const requestClose = useCallback3(() => {
+    if (closingRef.current) return closingRef.current;
+    const promise = state.flush().then(onClose).catch(() => {
+      window.setTimeout(() => panelRef.current?.querySelector('[role="alert"]')?.focus(), 0);
+    }).finally(() => {
+      closingRef.current = null;
+    });
+    closingRef.current = promise;
+    return promise;
+  }, [onClose, state]);
+  useEffect4(() => {
+    const frame = window.requestAnimationFrame(() => {
+      panelRef.current?.querySelector('[data-keepkit="quick-editor"] :is(textarea, input, select, button)')?.focus();
+    });
+    return () => window.cancelAnimationFrame(frame);
+  }, []);
+  useEffect4(() => {
+    const closeFromOutside = (event) => {
+      const target = event.target;
+      if (!(target instanceof Node) || panelRef.current?.contains(target) || triggerRef.current?.contains(target))
+        return;
+      void requestClose();
+    };
+    document.addEventListener("pointerdown", closeFromOutside);
+    return () => document.removeEventListener("pointerdown", closeFromOutside);
+  }, [requestClose, triggerRef]);
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      ref: panelRef,
+      id,
+      role: "dialog",
+      "aria-labelledby": titleId,
+      "data-keep-popover-panel": "true",
+      "data-save-status": state.saveStatus,
+      onKeyDownCapture: (event) => {
+        if (event.key !== "Escape") return;
+        event.preventDefault();
+        event.stopPropagation();
+        void requestClose();
+      },
+      children: [
+        /* @__PURE__ */ jsx8("h2", { id: titleId, "data-keep-popover-title": "true", children: dialogLabel }),
+        children,
+        /* @__PURE__ */ jsx8(KeepQuickEditorView, { ...editorViewProps, state, focusScopeRef: panelRef }),
+        /* @__PURE__ */ jsx8(
+          "button",
+          {
+            type: "button",
+            onClick: () => void requestClose(),
+            disabled: state.isSaving,
+            "data-keep-action": "close-save-popover",
+            children: closeLabel
+          }
+        )
+      ]
+    }
+  );
+}
 
 // src/features/actions/hooks/useKeepUndo.ts
 import { useKeepContext as useKeepContext3 } from "@keepkit/core/react";
@@ -3854,26 +4069,10 @@ function KeepItemCardRoot({
     " ",
     /* @__PURE__ */ jsx16("time", { dateTime: new Date(item.savedAt).toISOString(), children: formatSavedAt(item.savedAt) })
   ] }) : null;
-  const error = view.itemState.error ? /* @__PURE__ */ jsx16("p", { role: "alert", children: getErrorMessage2(view.itemState.error, view.labels.error) }) : null;
+  const error = view.itemState.error ? /* @__PURE__ */ jsx16("p", { role: "alert", children: getErrorMessage3(view.itemState.error, view.labels.error) }) : null;
   const actions = view.statusLabel ? /* @__PURE__ */ jsx16(KeepStaleNotice, { item, onRetry, onRemoved }) : /* @__PURE__ */ jsxs14(Fragment8, { children: [
-    showSaveButton ? /* @__PURE__ */ jsx16(
-      KeepButton,
-      {
-        item: toKeepButtonItem(item),
-        labels: saveButtonLabels,
-        getAriaLabel: (buttonState) => `${buttonState.isSaved ? view.labels.remove : view.labels.save} ${String(view.resolvedTitle)}`
-      }
-    ) : null,
-    /* @__PURE__ */ jsx16(
-      "button",
-      {
-        type: "button",
-        "data-keep-action": "remove-item",
-        onClick: () => void view.remove(),
-        disabled: view.itemState.isMutating,
-        children: removeLabel ?? view.labels.remove
-      }
-    )
+    showSaveButton ? /* @__PURE__ */ jsx16(KeepItemCardSave, {}) : null,
+    /* @__PURE__ */ jsx16(KeepItemCardRemove, {})
   ] });
   const compoundValue = {
     item,
@@ -3889,6 +4088,11 @@ function KeepItemCardRoot({
     meta,
     error,
     actions,
+    saveButtonLabels,
+    removeLabel: removeLabel ?? view.labels.remove,
+    remove: view.remove,
+    isMutating: view.itemState.isMutating,
+    saveAriaLabel: `${view.labels.remove} ${String(view.resolvedTitle)}`,
     renderText: (content) => /* @__PURE__ */ jsx16(KeepHighlight, { query: searchQuery, children: content })
   };
   const defaultBody = /* @__PURE__ */ jsxs14(Fragment8, { children: [
@@ -3962,6 +4166,36 @@ function KeepItemCardActions({ children, ...props }) {
   const context = useKeepItemCardCompound("Actions");
   return /* @__PURE__ */ jsx16("div", { ...props, "data-keep-card-part": "actions", children: children ?? context.actions });
 }
+function KeepItemCardSave({ labels, getAriaLabel, ...props }) {
+  const context = useKeepItemCardCompound("Save");
+  return /* @__PURE__ */ jsx16(
+    KeepButton,
+    {
+      ...props,
+      item: toKeepButtonItem(context.item),
+      asChild: false,
+      labels: labels ?? context.saveButtonLabels,
+      getAriaLabel: getAriaLabel ?? (() => context.saveAriaLabel)
+    }
+  );
+}
+function KeepItemCardRemove({ children, disabled, onClick, ...props }) {
+  const context = useKeepItemCardCompound("Remove");
+  return /* @__PURE__ */ jsx16(
+    "button",
+    {
+      ...props,
+      type: props.type ?? "button",
+      "data-keep-action": "remove-item",
+      disabled: disabled ?? context.isMutating,
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) void context.remove();
+      },
+      children: children ?? context.removeLabel
+    }
+  );
+}
 function KeepItemCardPin({ children, ...props }) {
   const context = useKeepItemCardCompound("Pin");
   return /* @__PURE__ */ jsx16(KeepPinButton, { ...props, item: context.item, children });
@@ -3984,6 +4218,8 @@ var KeepItemCard = Object.assign(KeepItemCardRoot, {
   Title: KeepItemCardTitle,
   Tags: KeepItemCardTags,
   Actions: KeepItemCardActions,
+  Save: KeepItemCardSave,
+  Remove: KeepItemCardRemove,
   Pin: KeepItemCardPin,
   Archive: KeepItemCardArchive,
   CollectionBadge: KeepItemCardCollectionBadge
@@ -4000,7 +4236,7 @@ function KeepItemCardSkeleton({ layout = "list", ...props }) {
 function formatSavedAt(timestamp) {
   return new Date(timestamp).toISOString().slice(0, 10);
 }
-function getErrorMessage2(error, fallback) {
+function getErrorMessage3(error, fallback) {
   return error instanceof Error ? error.message : fallback;
 }
 
@@ -4588,7 +4824,7 @@ function KeepNoteEditor({
         "data-disabled": isSaving ? "true" : void 0,
         children: [
           body,
-          error ? /* @__PURE__ */ jsx23("p", { role: "alert", children: getErrorMessage3(error, view.labels.error) }) : null
+          error ? /* @__PURE__ */ jsx23("p", { role: "alert", children: getErrorMessage4(error, view.labels.error) }) : null
         ]
       }
     );
@@ -4610,7 +4846,7 @@ function KeepNoteEditor({
     "KeepNoteEditor"
   );
 }
-function getErrorMessage3(error, fallback) {
+function getErrorMessage4(error, fallback) {
   return error instanceof Error ? error.message : fallback;
 }
 
@@ -4712,12 +4948,12 @@ function KeepTagEditor({
       "data-disabled": isSaving ? "true" : void 0,
       children: [
         body,
-        view.error ? /* @__PURE__ */ jsx24("p", { role: "alert", children: getErrorMessage4(view.error, view.labels.error) }) : null
+        view.error ? /* @__PURE__ */ jsx24("p", { role: "alert", children: getErrorMessage5(view.error, view.labels.error) }) : null
       ]
     }
   );
 }
-function getErrorMessage4(error, fallback) {
+function getErrorMessage5(error, fallback) {
   return error instanceof Error ? error.message : fallback;
 }
 
@@ -4743,7 +4979,7 @@ function useKeepToastFeedback(showToast) {
 
 // src/features/navigation/KeepTourBar.tsx
 import { useKeepNavigator } from "@keepkit/core/react";
-import { useId } from "react";
+import { useId as useId2 } from "react";
 
 // src/features/navigation/hooks/useKeepTourShortcuts.ts
 import { useEffect as useEffect11 } from "react";
@@ -4865,7 +5101,7 @@ function KeepTourBar({
   );
 }
 function TourAction({ href, disabled = false, onClick, children, preview, shortcut, ...props }) {
-  const previewId = useId();
+  const previewId = useId2();
   const content = /* @__PURE__ */ jsxs21(Fragment13, { children: [
     /* @__PURE__ */ jsx25("span", { "data-tour-label": "true", children }),
     shortcut ? /* @__PURE__ */ jsx25(KeepShortcutHint, { shortcut }) : null,
@@ -5226,7 +5462,7 @@ function useKeepSyncStatusBanner({ onRetry, children }) {
   const syncedLabel = useUiLabel("syncSynced");
   const status = context.syncState.status;
   const hasConflicts = (context.syncState.conflicts?.length ?? 0) > 0 || context.syncState.conflictIds.length > 0;
-  const message = children ?? (status === "error" ? getErrorMessage5(context.syncState.error) : status === "conflict" || hasConflicts ? conflictLabel : status === "pending" || status === "syncing" ? pendingLabel : syncedLabel);
+  const message = children ?? (status === "error" ? getErrorMessage6(context.syncState.error) : status === "conflict" || hasConflicts ? conflictLabel : status === "pending" || status === "syncing" ? pendingLabel : syncedLabel);
   return {
     status,
     hasConflicts,
@@ -5245,7 +5481,7 @@ function useKeepSyncStatusBanner({ onRetry, children }) {
     }
   };
 }
-function getErrorMessage5(error) {
+function getErrorMessage6(error) {
   return error instanceof Error ? error.message : "Sync failed.";
 }