feedtack 1.1.0 → 1.2.0

package/dist/react/index.js

@@ -1,7 +1,265 @@
 import {
   FeedtackEngine,
-  PIN_PALETTE
-} from "../chunk-3INDOI4N.js";
+  PIN_PALETTE,
+  hashField,
+  isContentAdapter,
+  isContentEditAdapter,
+  scanFields,
+  warnIfNotContentAdapter,
+  warnIfNotContentEditAdapter
+} from "../chunk-GD2SY64K.js";
+
+// src/react/ContentEditToolbar.tsx
+import { useState } from "react";
+
+// src/react/toolbarStyles.ts
+var styles = {
+  toolbar: {
+    position: "fixed",
+    bottom: 16,
+    right: 16,
+    zIndex: 9999,
+    background: "#1a1614",
+    border: "1px solid #3a3330",
+    borderRadius: 8,
+    padding: "8px 12px",
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    fontFamily: "monospace",
+    fontSize: 13,
+    color: "#e5e0d8",
+    boxShadow: "0 4px 24px rgba(0,0,0,0.5)",
+    flexWrap: "wrap",
+    maxWidth: 480
+  },
+  fieldSection: {
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
+    borderRight: "1px solid #3a3330",
+    paddingRight: 8
+  },
+  fieldPath: {
+    color: "#888",
+    fontSize: 11,
+    maxWidth: 160,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  savingBadge: {
+    color: "#f59e0b",
+    fontSize: 11
+  },
+  btnPrimary: {
+    background: "#10b981",
+    color: "#fff",
+    border: "none",
+    borderRadius: 4,
+    padding: "3px 10px",
+    fontSize: 12,
+    cursor: "pointer"
+  },
+  btnSecondary: {
+    background: "transparent",
+    color: "#888",
+    border: "1px solid #3a3330",
+    borderRadius: 4,
+    padding: "3px 10px",
+    fontSize: 12,
+    cursor: "pointer"
+  },
+  btnGhost: {
+    background: "transparent",
+    color: "#e5e0d8",
+    border: "1px solid #3a3330",
+    borderRadius: 4,
+    padding: "3px 10px",
+    fontSize: 12,
+    cursor: "pointer"
+  },
+  btnSuccess: {
+    background: "#10b981",
+    color: "#fff",
+    border: "none",
+    borderRadius: 4,
+    padding: "3px 10px",
+    fontSize: 12,
+    cursor: "pointer"
+  },
+  btnDanger: {
+    background: "transparent",
+    color: "#ef4444",
+    border: "1px solid #ef4444",
+    borderRadius: 4,
+    padding: "2px 8px",
+    fontSize: 11,
+    cursor: "pointer"
+  },
+  panel: {
+    position: "absolute",
+    bottom: "100%",
+    right: 0,
+    marginBottom: 8,
+    background: "#1a1614",
+    border: "1px solid #3a3330",
+    borderRadius: 8,
+    padding: "10px 14px",
+    minWidth: 280,
+    maxWidth: 420,
+    boxShadow: "0 4px 24px rgba(0,0,0,0.5)"
+  },
+  panelTitle: {
+    fontSize: 11,
+    color: "#888",
+    marginBottom: 8,
+    textTransform: "uppercase",
+    letterSpacing: "0.05em"
+  },
+  changeRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    padding: "4px 0",
+    borderBottom: "1px solid #2a2421"
+  },
+  changePath: {
+    fontSize: 11,
+    color: "#888",
+    minWidth: 100,
+    flexShrink: 0
+  },
+  changeValue: {
+    fontSize: 12,
+    color: "#e5e0d8",
+    flex: 1,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  deployOk: {
+    color: "#10b981",
+    fontSize: 13
+  },
+  deployPendingTitle: {
+    color: "#f59e0b",
+    fontSize: 13,
+    marginBottom: 6
+  },
+  deployPendingItem: {
+    fontSize: 12,
+    color: "#888",
+    padding: "2px 0"
+  }
+};
+
+// src/react/ContentEditToolbar.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ContentEditToolbar({
+  focusedField,
+  approvalState,
+  changes,
+  saving,
+  onApprove,
+  onRevoke,
+  onRevert,
+  onCheckDeploy
+}) {
+  const [showChanges, setShowChanges] = useState(false);
+  const [deployResult, setDeployResult] = useState(
+    null
+  );
+  const [checkingDeploy, setCheckingDeploy] = useState(false);
+  const handleCheckDeploy = async () => {
+    setCheckingDeploy(true);
+    try {
+      const result = await onCheckDeploy();
+      setDeployResult(result);
+    } finally {
+      setCheckingDeploy(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { "data-feedtack-edit-ui": true, style: styles.toolbar, children: [
+    focusedField && /* @__PURE__ */ jsxs("div", { style: styles.fieldSection, children: [
+      /* @__PURE__ */ jsx("span", { style: styles.fieldPath, children: focusedField.fieldPath }),
+      saving === focusedField.fieldPath && /* @__PURE__ */ jsx("span", { style: styles.savingBadge, children: "saving\u2026" }),
+      approvalState?.stale === false ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          style: styles.btnSecondary,
+          onClick: () => onRevoke(focusedField.fieldPath),
+          children: "Unaccept"
+        }
+      ) : /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          style: styles.btnPrimary,
+          onClick: () => onApprove(focusedField.fieldPath),
+          disabled: saving === focusedField.fieldPath,
+          children: "Approve"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        style: styles.btnGhost,
+        onClick: () => {
+          setShowChanges((v) => !v);
+          setDeployResult(null);
+        },
+        children: [
+          "Changes (",
+          changes.length,
+          ")"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        style: deployResult?.approved ? styles.btnSuccess : styles.btnGhost,
+        onClick: handleCheckDeploy,
+        disabled: checkingDeploy,
+        children: checkingDeploy ? "Checking\u2026" : "Check deploy"
+      }
+    ),
+    showChanges && changes.length > 0 && /* @__PURE__ */ jsxs("div", { style: styles.panel, children: [
+      /* @__PURE__ */ jsx("div", { style: styles.panelTitle, children: "Session changes" }),
+      changes.map((c) => /* @__PURE__ */ jsxs("div", { style: styles.changeRow, children: [
+        /* @__PURE__ */ jsx("div", { style: styles.changePath, children: c.fieldPath }),
+        /* @__PURE__ */ jsxs("div", { style: styles.changeValue, title: c.to, children: [
+          c.to.slice(0, 60),
+          c.to.length > 60 ? "\u2026" : ""
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            style: styles.btnDanger,
+            onClick: () => onRevert(c.fieldPath),
+            disabled: saving === c.fieldPath,
+            children: "Revert"
+          }
+        )
+      ] }, c.fieldPath))
+    ] }),
+    deployResult && /* @__PURE__ */ jsx("div", { style: styles.panel, children: deployResult.approved ? /* @__PURE__ */ jsx("div", { style: styles.deployOk, children: "All fields approved \u2014 ready to deploy" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { style: styles.deployPendingTitle, children: [
+        deployResult.pending.length,
+        " field",
+        deployResult.pending.length !== 1 ? "s" : "",
+        " need approval:"
+      ] }),
+      deployResult.pending.map((p) => /* @__PURE__ */ jsx("div", { style: styles.deployPendingItem, children: p }, p))
+    ] }) })
+  ] });
+}
 
 // src/react/utils.ts
 function getAnchoredPosition(x, y) {
@@ -22,7 +280,7 @@ function cx(...parts) {
 }
 
 // src/react/CommentForm.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function CommentForm({
   comment,
   commentError,
@@ -36,14 +294,14 @@ function CommentForm({
   onSubmit,
   onCancel
 }) {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
       className: cx("feedtack-form", classes.form),
       style: { position: "fixed", ...formPos },
       children: [
-        /* @__PURE__ */ jsx("label", { htmlFor: "feedtack-comment", className: "feedtack-sr-only", children: "Feedback comment" }),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx2("label", { htmlFor: "feedtack-comment", className: "feedtack-sr-only", children: "Feedback comment" }),
+        /* @__PURE__ */ jsx2(
           "textarea",
           {
             id: "feedtack-comment",
@@ -62,9 +320,9 @@ function CommentForm({
             "aria-invalid": commentError || void 0
           }
         ),
-        commentError && /* @__PURE__ */ jsx("span", { id: "feedtack-comment-error", className: "feedtack-error-msg", children: "Comment is required" }),
-        /* @__PURE__ */ jsxs("div", { className: "feedtack-sentiment", children: [
-          /* @__PURE__ */ jsx(
+        commentError && /* @__PURE__ */ jsx2("span", { id: "feedtack-comment-error", className: "feedtack-error-msg", children: "Comment is required" }),
+        /* @__PURE__ */ jsxs2("div", { className: "feedtack-sentiment", children: [
+          /* @__PURE__ */ jsx2(
             "button",
             {
               type: "button",
@@ -73,7 +331,7 @@ function CommentForm({
               children: sentimentLabels.satisfied ?? "Good"
             }
           ),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2(
             "button",
             {
               type: "button",
@@ -83,8 +341,8 @@ function CommentForm({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "feedtack-form-actions", children: [
-          /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs2("div", { className: "feedtack-form-actions", children: [
+          /* @__PURE__ */ jsx2(
             "button",
             {
               type: "button",
@@ -93,7 +351,7 @@ function CommentForm({
               children: "Cancel"
             }
           ),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2(
             "button",
             {
               type: "button",
@@ -120,10 +378,10 @@ function useFeedtackContext() {
 }
 
 // src/react/FeedbackModal.tsx
-import { useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 
 // src/react/ThreadView.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function ThreadView({
   item,
   replyBody,
@@ -133,17 +391,17 @@ function ThreadView({
   onArchive,
   onBack
 }) {
-  return /* @__PURE__ */ jsxs2("div", { className: "feedtack-modal-thread-view", children: [
-    /* @__PURE__ */ jsx2("button", { type: "button", className: "feedtack-modal-back", onClick: onBack, children: "\u2190 Back" }),
-    /* @__PURE__ */ jsxs2("div", { className: "feedtack-modal-thread-content", children: [
-      /* @__PURE__ */ jsx2("strong", { children: item.payload.submittedBy.name }),
-      /* @__PURE__ */ jsx2("p", { children: item.payload.comment })
+  return /* @__PURE__ */ jsxs3("div", { className: "feedtack-modal-thread-view", children: [
+    /* @__PURE__ */ jsx3("button", { type: "button", className: "feedtack-modal-back", onClick: onBack, children: "\u2190 Back" }),
+    /* @__PURE__ */ jsxs3("div", { className: "feedtack-modal-thread-content", children: [
+      /* @__PURE__ */ jsx3("strong", { children: item.payload.submittedBy.name }),
+      /* @__PURE__ */ jsx3("p", { children: item.payload.comment })
     ] }),
-    item.replies.map((r) => /* @__PURE__ */ jsxs2("div", { className: "feedtack-modal-reply", children: [
-      /* @__PURE__ */ jsx2("span", { className: "feedtack-reply-author", children: r.author.name }),
-      /* @__PURE__ */ jsx2("p", { children: r.body })
+    item.replies.map((r) => /* @__PURE__ */ jsxs3("div", { className: "feedtack-modal-reply", children: [
+      /* @__PURE__ */ jsx3("span", { className: "feedtack-reply-author", children: r.author.name }),
+      /* @__PURE__ */ jsx3("p", { children: r.body })
     ] }, r.id)),
-    /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx3(
       "textarea",
       {
         className: "feedtack-modal-textarea",
@@ -152,9 +410,9 @@ function ThreadView({
         onChange: (e) => onReplyBodyChange(e.target.value)
       }
     ),
-    /* @__PURE__ */ jsxs2("div", { className: "feedtack-modal-actions", children: [
-      /* @__PURE__ */ jsx2("button", { type: "button", className: "feedtack-btn-submit", onClick: onReply, children: "Reply" }),
-      /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsxs3("div", { className: "feedtack-modal-actions", children: [
+      /* @__PURE__ */ jsx3("button", { type: "button", className: "feedtack-btn-submit", onClick: onReply, children: "Reply" }),
+      /* @__PURE__ */ jsx3(
         "button",
         {
           type: "button",
@@ -163,7 +421,7 @@ function ThreadView({
           children: "Resolve"
         }
       ),
-      /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx3(
         "button",
         {
           type: "button",
@@ -177,7 +435,7 @@ function ThreadView({
 }
 
 // src/react/FeedbackModal.tsx
-import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function FeedbackModal({
   isOpen,
   onClose,
@@ -201,175 +459,183 @@ function FeedbackModal({
   openThreadId,
   onOpenThread
 }) {
-  const panelRef = useRef(null);
+  const dialogRef = useRef(null);
   useEffect(() => {
-    if (!isOpen) return;
-    const onKey = (e) => {
-      if (e.key === "Escape") onClose();
-    };
-    const onDown = (e) => {
-      if (panelRef.current && !panelRef.current.contains(e.target)) {
-        const btn = document.querySelector(".feedtack-btn");
-        if (btn?.contains(e.target)) return;
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (isOpen && !dialog.open) {
+      dialog.showModal();
+    } else if (!isOpen && dialog.open) {
+      dialog.close();
+    }
+  }, [isOpen]);
+  const handleCancel = useCallback(
+    (e) => {
+      e.preventDefault();
+      onClose();
+    },
+    [onClose]
+  );
+  const handleBackdropClick = useCallback(
+    (e) => {
+      if (e.target === dialogRef.current) {
         onClose();
       }
-    };
-    window.addEventListener("keydown", onKey);
-    document.addEventListener("mousedown", onDown);
-    return () => {
-      window.removeEventListener("keydown", onKey);
-      document.removeEventListener("mousedown", onDown);
-    };
-  }, [isOpen, onClose]);
+    },
+    [onClose]
+  );
   if (!isOpen) return null;
   const threads = activeTab === "site" ? siteFeedback : pageFeedback;
   const openItem = openThreadId ? threads.find((i) => i.payload.id === openThreadId) : null;
-  return /* @__PURE__ */ jsxs3(
-    "div",
-    {
-      ref: panelRef,
-      className: "feedtack-modal",
-      role: "dialog",
-      "aria-label": "Feedback",
-      "aria-modal": "true",
-      children: [
-        /* @__PURE__ */ jsxs3("div", { className: "feedtack-modal-header", children: [
-          /* @__PURE__ */ jsx3("span", { className: "feedtack-modal-title", children: "Feedback" }),
-          /* @__PURE__ */ jsx3(
-            "button",
-            {
-              type: "button",
-              className: "feedtack-modal-close",
-              onClick: onClose,
-              "aria-label": "Close",
-              children: "\xD7"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs3("div", { className: "feedtack-modal-tabs", children: [
-          /* @__PURE__ */ jsxs3(
-            "button",
-            {
-              type: "button",
-              className: cx("feedtack-modal-tab", activeTab === "site" && "active"),
-              onClick: () => onTabChange("site"),
-              children: [
-                "Site",
-                siteFeedback.length > 0 && /* @__PURE__ */ jsx3("span", { className: "feedtack-tab-count", children: siteFeedback.length })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs3(
-            "button",
-            {
-              type: "button",
-              className: cx("feedtack-modal-tab", activeTab === "page" && "active"),
-              onClick: () => onTabChange("page"),
-              children: [
-                "Page",
-                pageFeedback.length > 0 && /* @__PURE__ */ jsx3("span", { className: "feedtack-tab-count", children: pageFeedback.length })
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx3("div", { className: "feedtack-modal-body", children: openItem ? /* @__PURE__ */ jsx3(
-          ThreadView,
-          {
-            item: openItem,
-            replyBody,
-            onReplyBodyChange,
-            onReply: () => onReply(openItem.payload.id),
-            onResolve: () => onResolve(openItem.payload.id),
-            onArchive: () => onArchive(openItem.payload.id),
-            onBack: () => onOpenThread(null)
-          }
-        ) : /* @__PURE__ */ jsxs3(Fragment, { children: [
-          threads.length > 0 && /* @__PURE__ */ jsx3("div", { className: "feedtack-modal-threads", children: threads.map((item) => /* @__PURE__ */ jsxs3(
-            "button",
-            {
-              type: "button",
-              className: "feedtack-modal-thread-item",
-              onClick: () => onOpenThread(item.payload.id),
-              children: [
-                /* @__PURE__ */ jsx3("span", { className: "feedtack-thread-author", children: item.payload.submittedBy.name }),
-                /* @__PURE__ */ jsx3("span", { className: "feedtack-thread-comment", children: item.payload.comment }),
-                /* @__PURE__ */ jsxs3("span", { className: "feedtack-thread-meta", children: [
-                  item.replies.length > 0 && `${item.replies.length} ${item.replies.length === 1 ? "reply" : "replies"}`,
-                  item.resolutions.length > 0 && " \xB7 resolved"
-                ] })
-              ]
-            },
-            item.payload.id
-          )) }),
-          /* @__PURE__ */ jsxs3("div", { className: "feedtack-modal-compose", children: [
-            /* @__PURE__ */ jsx3(
-              "textarea",
+  return (
+    // biome-ignore lint/a11y/useKeyWithClickEvents: native <dialog> handles keyboard via onCancel (Escape)
+    /* @__PURE__ */ jsxs4(
+      "dialog",
+      {
+        ref: dialogRef,
+        className: "feedtack-modal",
+        "aria-label": "Feedback",
+        onCancel: handleCancel,
+        onClick: handleBackdropClick,
+        children: [
+          /* @__PURE__ */ jsxs4("div", { className: "feedtack-modal-header", children: [
+            /* @__PURE__ */ jsx4("span", { className: "feedtack-modal-title", children: "Feedback" }),
+            /* @__PURE__ */ jsx4(
+              "button",
               {
-                className: cx(
-                  "feedtack-modal-textarea",
-                  commentError && "error"
-                ),
-                placeholder: "What's on your mind? (required)",
-                value: comment,
-                onChange: (e) => onCommentChange(e.target.value),
-                onKeyDown: (e) => {
-                  if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
-                    e.preventDefault();
-                    onSubmit();
-                  }
-                },
-                "aria-invalid": commentError || void 0
+                type: "button",
+                className: "feedtack-modal-close",
+                onClick: onClose,
+                "aria-label": "Close",
+                children: "\xD7"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs4("div", { className: "feedtack-modal-tabs", children: [
+            /* @__PURE__ */ jsxs4(
+              "button",
+              {
+                type: "button",
+                className: cx("feedtack-modal-tab", activeTab === "site" && "active"),
+                onClick: () => onTabChange("site"),
+                children: [
+                  "Site",
+                  siteFeedback.length > 0 && /* @__PURE__ */ jsx4("span", { className: "feedtack-tab-count", children: siteFeedback.length })
+                ]
               }
             ),
-            commentError && /* @__PURE__ */ jsx3("span", { className: "feedtack-error-msg", children: "Comment is required" }),
-            /* @__PURE__ */ jsxs3("div", { className: "feedtack-sentiment", children: [
-              /* @__PURE__ */ jsx3(
-                "button",
+            /* @__PURE__ */ jsxs4(
+              "button",
+              {
+                type: "button",
+                className: cx("feedtack-modal-tab", activeTab === "page" && "active"),
+                onClick: () => onTabChange("page"),
+                children: [
+                  "Page",
+                  pageFeedback.length > 0 && /* @__PURE__ */ jsx4("span", { className: "feedtack-tab-count", children: pageFeedback.length })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx4("div", { className: "feedtack-modal-body", children: openItem ? /* @__PURE__ */ jsx4(
+            ThreadView,
+            {
+              item: openItem,
+              replyBody,
+              onReplyBodyChange,
+              onReply: () => onReply(openItem.payload.id),
+              onResolve: () => onResolve(openItem.payload.id),
+              onArchive: () => onArchive(openItem.payload.id),
+              onBack: () => onOpenThread(null)
+            }
+          ) : /* @__PURE__ */ jsxs4(Fragment2, { children: [
+            threads.length > 0 && /* @__PURE__ */ jsx4("div", { className: "feedtack-modal-threads", children: threads.map((item) => /* @__PURE__ */ jsxs4(
+              "button",
+              {
+                type: "button",
+                className: "feedtack-modal-thread-item",
+                onClick: () => onOpenThread(item.payload.id),
+                children: [
+                  /* @__PURE__ */ jsx4("span", { className: "feedtack-thread-author", children: item.payload.submittedBy.name }),
+                  /* @__PURE__ */ jsx4("span", { className: "feedtack-thread-comment", children: item.payload.comment }),
+                  /* @__PURE__ */ jsxs4("span", { className: "feedtack-thread-meta", children: [
+                    item.replies.length > 0 && `${item.replies.length} ${item.replies.length === 1 ? "reply" : "replies"}`,
+                    item.resolutions.length > 0 && " \xB7 resolved"
+                  ] })
+                ]
+              },
+              item.payload.id
+            )) }),
+            /* @__PURE__ */ jsxs4("div", { className: "feedtack-modal-compose", children: [
+              /* @__PURE__ */ jsx4(
+                "textarea",
                 {
-                  type: "button",
-                  className: sentiment === "good" ? "selected" : "",
-                  onClick: () => onSentimentChange(sentiment === "good" ? null : "good"),
-                  children: "Good"
+                  className: cx(
+                    "feedtack-modal-textarea",
+                    commentError && "error"
+                  ),
+                  placeholder: "What's on your mind? (required)",
+                  value: comment,
+                  onChange: (e) => onCommentChange(e.target.value),
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+                      e.preventDefault();
+                      onSubmit();
+                    }
+                  },
+                  "aria-invalid": commentError || void 0
                 }
               ),
-              /* @__PURE__ */ jsx3(
+              commentError && /* @__PURE__ */ jsx4("span", { className: "feedtack-error-msg", children: "Comment is required" }),
+              /* @__PURE__ */ jsxs4("div", { className: "feedtack-sentiment", children: [
+                /* @__PURE__ */ jsx4(
+                  "button",
+                  {
+                    type: "button",
+                    className: sentiment === "good" ? "selected" : "",
+                    onClick: () => onSentimentChange(sentiment === "good" ? null : "good"),
+                    children: "Good"
+                  }
+                ),
+                /* @__PURE__ */ jsx4(
+                  "button",
+                  {
+                    type: "button",
+                    className: sentiment === "bad" ? "selected" : "",
+                    onClick: () => onSentimentChange(sentiment === "bad" ? null : "bad"),
+                    children: "Bad"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx4(
                 "button",
                 {
                   type: "button",
-                  className: sentiment === "bad" ? "selected" : "",
-                  onClick: () => onSentimentChange(sentiment === "bad" ? null : "bad"),
-                  children: "Bad"
+                  className: "feedtack-btn-submit",
+                  onClick: onSubmit,
+                  disabled: submitting,
+                  children: submitting ? "Sending\u2026" : "Submit"
                 }
               )
-            ] }),
-            /* @__PURE__ */ jsx3(
-              "button",
-              {
-                type: "button",
-                className: "feedtack-btn-submit",
-                onClick: onSubmit,
-                disabled: submitting,
-                children: submitting ? "Sending\u2026" : "Submit"
-              }
-            )
-          ] })
-        ] }) }),
-        /* @__PURE__ */ jsx3("div", { className: "feedtack-modal-footer", children: /* @__PURE__ */ jsx3(
-          "button",
-          {
-            type: "button",
-            className: "feedtack-modal-pin-btn",
-            onClick: onPlacePin,
-            children: "Place a pin"
-          }
-        ) })
-      ]
-    }
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx4("div", { className: "feedtack-modal-footer", children: /* @__PURE__ */ jsx4(
+            "button",
+            {
+              type: "button",
+              className: "feedtack-modal-pin-btn",
+              onClick: onPlacePin,
+              children: "Place a pin"
+            }
+          ) })
+        ]
+      }
+    )
   );
 }
 
 // src/react/PinOverlay.tsx
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function PinOverlay({
   feedbackItems,
   pathname,
@@ -382,10 +648,10 @@ function PinOverlay({
   renderPinIcon,
   pinMarkerClass
 }) {
-  return /* @__PURE__ */ jsx4(Fragment2, { children: feedbackItems.filter((item) => item.payload.page.pathname === pathname).filter((item) => !isArchivedForUser(item)).filter((item) => hasValidPins(item)).map((item) => {
+  return /* @__PURE__ */ jsx5(Fragment3, { children: feedbackItems.filter((item) => item.payload.page.pathname === pathname).filter((item) => !isArchivedForUser(item)).filter((item) => hasValidPins(item)).map((item) => {
     const pin = item.payload.pins[0];
     const pos = getPosition(item.payload.id, pin);
-    return /* @__PURE__ */ jsxs4(
+    return /* @__PURE__ */ jsxs5(
       "button",
       {
         type: "button",
@@ -405,7 +671,7 @@ function PinOverlay({
           openThreadId === item.payload.id ? null : item.payload.id
         ),
         children: [
-          renderPinIcon ? /* @__PURE__ */ jsx4("span", { className: "feedtack-pin-icon", children: renderPinIcon(item) }) : item.resolutions.length > 0 && /* @__PURE__ */ jsx4(
+          renderPinIcon ? /* @__PURE__ */ jsx5("span", { className: "feedtack-pin-icon", children: renderPinIcon(item) }) : item.resolutions.length > 0 && /* @__PURE__ */ jsx5(
             "span",
             {
               className: "feedtack-pin-icon",
@@ -414,7 +680,7 @@ function PinOverlay({
               children: "\u2713"
             }
           ),
-          hasUnread(item) && /* @__PURE__ */ jsx4("div", { className: "feedtack-pin-badge" })
+          hasUnread(item) && /* @__PURE__ */ jsx5("div", { className: "feedtack-pin-badge" })
         ]
       },
       item.payload.id
@@ -423,7 +689,7 @@ function PinOverlay({
 }
 
 // src/react/ThreadPanel.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function ThreadPanel({
   item,
   replyBody,
@@ -439,26 +705,26 @@ function ThreadPanel({
   if (!pin) return null;
   const { x, y } = pinPosition ?? pin;
   const pos = getAnchoredPosition(x, y);
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       className: cx("feedtack-thread", className),
       style: { position: "fixed", ...pos },
       children: [
-        /* @__PURE__ */ jsx5("strong", { style: { fontSize: 13 }, children: item.payload.submittedBy.name }),
-        /* @__PURE__ */ jsx5("p", { style: { fontSize: 13 }, children: item.payload.comment }),
-        item.replies.map((r) => /* @__PURE__ */ jsxs5(
+        /* @__PURE__ */ jsx6("strong", { style: { fontSize: 13 }, children: item.payload.submittedBy.name }),
+        /* @__PURE__ */ jsx6("p", { style: { fontSize: 13 }, children: item.payload.comment }),
+        item.replies.map((r) => /* @__PURE__ */ jsxs6(
           "div",
           {
             style: { borderTop: "1px solid var(--ft-border)", paddingTop: 8 },
             children: [
-              /* @__PURE__ */ jsx5("span", { style: { fontSize: 12, fontWeight: 600 }, children: r.author.name }),
-              /* @__PURE__ */ jsx5("p", { style: { fontSize: 12 }, children: r.body })
+              /* @__PURE__ */ jsx6("span", { style: { fontSize: 12, fontWeight: 600 }, children: r.author.name }),
+              /* @__PURE__ */ jsx6("p", { style: { fontSize: 12 }, children: r.body })
             ]
           },
           r.id
         )),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
           "textarea",
           {
             placeholder: "Reply\u2026",
@@ -478,8 +744,8 @@ function ThreadPanel({
             }
           }
         ),
-        /* @__PURE__ */ jsxs5("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: [
-          /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsxs6("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: [
+          /* @__PURE__ */ jsx6(
             "button",
             {
               type: "button",
@@ -489,7 +755,7 @@ function ThreadPanel({
               children: "Reply"
             }
           ),
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6(
             "button",
             {
               type: "button",
@@ -499,7 +765,7 @@ function ThreadPanel({
               children: "Mark Resolved"
             }
           ),
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6(
             "button",
             {
               type: "button",
@@ -509,7 +775,7 @@ function ThreadPanel({
               children: "Archive"
             }
           ),
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6(
             "button",
             {
               type: "button",
@@ -526,12 +792,12 @@ function ThreadPanel({
 }
 
 // src/react/useAnchoredPins.ts
-import { useCallback, useEffect as useEffect2, useState } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useState as useState2 } from "react";
 function useAnchoredPins(items, pathname) {
-  const [positions, setPositions] = useState(
+  const [positions, setPositions] = useState2(
     /* @__PURE__ */ new Map()
   );
-  const resolve = useCallback(() => {
+  const resolve = useCallback2(() => {
     const next = /* @__PURE__ */ new Map();
     for (const item of items) {
       if (item.payload.page.pathname !== pathname) continue;
@@ -559,7 +825,7 @@ function useAnchoredPins(items, pathname) {
       window.removeEventListener("scroll", handler);
     };
   }, [resolve]);
-  const getPosition = useCallback(
+  const getPosition = useCallback2(
     (itemId, fallbackPin) => {
       return positions.get(itemId) ?? { x: fallbackPin.x, y: fallbackPin.y };
     },
@@ -587,7 +853,7 @@ function resolvePin(pin) {
 }
 
 // src/react/useFeedtackState.ts
-import { useCallback as useCallback2, useEffect as useEffect3, useRef as useRef2, useSyncExternalStore } from "react";
+import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef2, useSyncExternalStore } from "react";
 function useFeedtackState({
   adapter,
   currentUser,
@@ -618,25 +884,25 @@ function useFeedtackState({
     engine.mount();
     return () => engine.destroy();
   }, [engine]);
-  const subscribe = useCallback2(
+  const subscribe = useCallback3(
     (cb) => engine.subscribe(cb),
     [engine]
   );
-  const getSnapshot = useCallback2(() => engine.getState(), [engine]);
+  const getSnapshot = useCallback3(() => engine.getState(), [engine]);
   const state = useSyncExternalStore(
     subscribe,
     getSnapshot,
     getSnapshot
   );
-  const isArchivedForUser = useCallback2(
+  const isArchivedForUser = useCallback3(
     (item) => engine.isArchivedForUser(item),
     [engine]
   );
-  const hasUnread = useCallback2(
+  const hasUnread = useCallback3(
     (item) => engine.hasUnread(item),
     [engine]
   );
-  const hasValidPins = useCallback2(
+  const hasValidPins = useCallback3(
     (item) => engine.hasValidPins(item),
     [engine]
   );
@@ -644,27 +910,27 @@ function useFeedtackState({
     // Pin mode
     isPinModeActive: state.isPinModeActive,
     isActive: state.isPinModeActive,
-    activatePinMode: useCallback2(() => engine.activatePinMode(), [engine]),
-    activate: useCallback2(() => engine.activatePinMode(), [engine]),
-    deactivatePinMode: useCallback2(() => engine.deactivatePinMode(), [engine]),
-    deactivate: useCallback2(() => engine.deactivatePinMode(), [engine]),
+    activatePinMode: useCallback3(() => engine.activatePinMode(), [engine]),
+    activate: useCallback3(() => engine.activatePinMode(), [engine]),
+    deactivatePinMode: useCallback3(() => engine.deactivatePinMode(), [engine]),
+    deactivate: useCallback3(() => engine.deactivatePinMode(), [engine]),
     pendingPins: state.pendingPins,
     selectedColor: state.selectedColor,
-    setSelectedColor: useCallback2(
+    setSelectedColor: useCallback3(
       (c) => engine.setSelectedColor(c),
       [engine]
     ),
     showForm: state.showForm,
     // Form
     comment: state.comment,
-    setComment: useCallback2((v) => engine.setComment(v), [engine]),
+    setComment: useCallback3((v) => engine.setComment(v), [engine]),
     sentiment: state.sentiment,
-    setSentiment: useCallback2(
+    setSentiment: useCallback3(
       (v) => engine.setSentiment(v),
       [engine]
     ),
     commentError: state.commentError,
-    setCommentError: useCallback2(
+    setCommentError: useCallback3(
       (v) => engine.setCommentError(v),
       [engine]
     ),
@@ -677,30 +943,30 @@ function useFeedtackState({
     pathname: state.pathname,
     // Thread
     openThreadId: state.openThreadId,
-    setOpenThreadId: useCallback2(
+    setOpenThreadId: useCallback3(
       (id) => engine.setOpenThreadId(id),
       [engine]
     ),
     replyBody: state.replyBody,
-    setReplyBody: useCallback2((v) => engine.setReplyBody(v), [engine]),
+    setReplyBody: useCallback3((v) => engine.setReplyBody(v), [engine]),
     // Modal
     isModalOpen: state.isModalOpen,
-    openModal: useCallback2(() => engine.openModal(), [engine]),
-    closeModal: useCallback2(() => engine.closeModal(), [engine]),
+    openModal: useCallback3(() => engine.openModal(), [engine]),
+    closeModal: useCallback3(() => engine.closeModal(), [engine]),
     composeScope: state.composeScope,
-    setComposeScope: useCallback2(
+    setComposeScope: useCallback3(
       (s) => engine.setComposeScope(s),
       [engine]
     ),
     // Actions
-    handleSubmit: useCallback2(() => engine.handleSubmit(), [engine]),
-    handleModalSubmit: useCallback2(() => engine.handleModalSubmit(), [engine]),
-    handleReply: useCallback2((id) => engine.handleReply(id), [engine]),
-    handleResolve: useCallback2(
+    handleSubmit: useCallback3(() => engine.handleSubmit(), [engine]),
+    handleModalSubmit: useCallback3(() => engine.handleModalSubmit(), [engine]),
+    handleReply: useCallback3((id) => engine.handleReply(id), [engine]),
+    handleResolve: useCallback3(
       (id) => engine.handleResolve(id),
       [engine]
     ),
-    handleArchive: useCallback2(
+    handleArchive: useCallback3(
       (id) => engine.handleArchive(id),
       [engine]
     ),
@@ -712,7 +978,7 @@ function useFeedtackState({
 }
 
 // src/react/FeedtackProvider.tsx
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function FeedtackProvider({
   children,
   adapter,
@@ -749,7 +1015,7 @@ function FeedtackProvider({
     state.closeModal();
     state.activatePinMode();
   };
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     FeedtackContext.Provider,
     {
       value: {
@@ -770,7 +1036,7 @@ function FeedtackProvider({
       },
       children: [
         children,
-        !disabled && showButton && /* @__PURE__ */ jsx6(
+        !disabled && showButton && /* @__PURE__ */ jsx7(
           "button",
           {
             type: "button",
@@ -785,7 +1051,7 @@ function FeedtackProvider({
             children: "Feedback"
           }
         ),
-        state.isPinModeActive && /* @__PURE__ */ jsx6("div", { className: cx("feedtack-color-picker", classes.colorPicker), children: PIN_PALETTE.map((color) => /* @__PURE__ */ jsx6(
+        state.isPinModeActive && /* @__PURE__ */ jsx7("div", { className: cx("feedtack-color-picker", classes.colorPicker), children: PIN_PALETTE.map((color) => /* @__PURE__ */ jsx7(
           "button",
           {
             type: "button",
@@ -799,7 +1065,7 @@ function FeedtackProvider({
           },
           color
         )) }),
-        state.pendingPins.map((pin) => /* @__PURE__ */ jsx6(
+        state.pendingPins.map((pin) => /* @__PURE__ */ jsx7(
           "div",
           {
             className: cx("feedtack-pin-marker", classes.pinMarker),
@@ -812,7 +1078,7 @@ function FeedtackProvider({
           },
           `${pin.x}-${pin.y}-${pin.color}`
         )),
-        state.showForm && /* @__PURE__ */ jsx6(
+        state.showForm && /* @__PURE__ */ jsx7(
           CommentForm,
           {
             comment: state.comment,
@@ -831,7 +1097,7 @@ function FeedtackProvider({
             onCancel: state.deactivatePinMode
           }
         ),
-        !state.loading && /* @__PURE__ */ jsx6(
+        !state.loading && /* @__PURE__ */ jsx7(
           PinOverlay,
           {
             feedbackItems: state.feedbackItems,
@@ -846,7 +1112,7 @@ function FeedtackProvider({
             pinMarkerClass: classes.pinMarker
           }
         ),
-        openItem && /* @__PURE__ */ jsx6(
+        openItem && /* @__PURE__ */ jsx7(
           ThreadPanel,
           {
             item: openItem,
@@ -863,7 +1129,7 @@ function FeedtackProvider({
             className: classes.thread
           }
         ),
-        !disabled && /* @__PURE__ */ jsx6(
+        !disabled && /* @__PURE__ */ jsx7(
           FeedbackModal,
           {
             isOpen: state.isModalOpen,
@@ -892,18 +1158,350 @@ function FeedtackProvider({
             onOpenThread: state.setOpenThreadId
           }
         ),
-        state.loading && /* @__PURE__ */ jsx6("div", { className: "feedtack-loading", children: "Loading feedback\u2026" })
+        state.loading && /* @__PURE__ */ jsx7("div", { className: "feedtack-loading", children: "Loading feedback\u2026" })
       ]
     }
   );
 }
 
+// src/react/useContentApproval.ts
+import { useCallback as useCallback4, useEffect as useEffect4, useState as useState3 } from "react";
+function useContentApproval(adapter, userId, options) {
+  const [fields, setFields] = useState3([]);
+  const getContentForField = useCallback4(
+    (fieldPath, domContent) => {
+      return options?.storedValues?.get(fieldPath) ?? domContent;
+    },
+    [options?.storedValues]
+  );
+  const rescan = useCallback4(async () => {
+    warnIfNotContentAdapter(adapter, "useContentApproval");
+    if (!isContentAdapter(adapter)) {
+      setFields([]);
+      return;
+    }
+    const scanned = scanFields();
+    const storedApprovals = await adapter.loadApprovals();
+    const approvalMap = new Map(
+      storedApprovals.map((s) => [s.fieldPath, s.approval])
+    );
+    const states = await Promise.all(
+      scanned.map(async (f) => {
+        const content = getContentForField(f.fieldPath, f.content);
+        const currentHash = await hashField(content);
+        const approval = approvalMap.get(f.fieldPath) ?? null;
+        return {
+          fieldPath: f.fieldPath,
+          approval,
+          stale: approval === null || approval.hash !== currentHash
+        };
+      })
+    );
+    setFields(states);
+  }, [adapter, getContentForField]);
+  useEffect4(() => {
+    void rescan();
+  }, [rescan]);
+  const approve = useCallback4(
+    async (fieldPath) => {
+      warnIfNotContentAdapter(adapter, "approve");
+      if (!isContentAdapter(adapter)) return;
+      const scanned = scanFields();
+      const field = scanned.find((f) => f.fieldPath === fieldPath);
+      if (!field) return;
+      const content = getContentForField(fieldPath, field.content);
+      const hash = await hashField(content);
+      const existing = fields.find((f) => f.fieldPath === fieldPath);
+      const existingBy = existing?.approval?.by ?? [];
+      const by = existingBy.includes(userId) ? existingBy : [...existingBy, userId];
+      await adapter.approve(fieldPath, {
+        hash,
+        by,
+        at: (/* @__PURE__ */ new Date()).toISOString()
+      });
+      setFields(
+        (prev) => prev.map(
+          (f) => f.fieldPath === fieldPath ? {
+            ...f,
+            approval: { hash, by, at: (/* @__PURE__ */ new Date()).toISOString() },
+            stale: false
+          } : f
+        )
+      );
+    },
+    [adapter, userId, fields, getContentForField]
+  );
+  const revoke = useCallback4(
+    async (fieldPath) => {
+      warnIfNotContentAdapter(adapter, "revokeApproval");
+      if (!isContentAdapter(adapter)) return;
+      await adapter.revokeApproval(fieldPath, userId);
+      setFields(
+        (prev) => prev.map((f) => {
+          if (f.fieldPath !== fieldPath || !f.approval) return f;
+          const by = f.approval.by.filter((id) => id !== userId);
+          const approval = by.length > 0 ? { ...f.approval, by } : null;
+          return { ...f, approval, stale: true };
+        })
+      );
+    },
+    [adapter, userId]
+  );
+  const checkDeploy = useCallback4(async () => {
+    warnIfNotContentAdapter(adapter, "checkDeploy");
+    if (!isContentAdapter(adapter)) {
+      return { approved: false, pending: [] };
+    }
+    const scanned = scanFields();
+    const storedApprovals = await adapter.loadApprovals();
+    const approvalMap = new Map(
+      storedApprovals.map((s) => [s.fieldPath, s.approval])
+    );
+    const pending = [];
+    await Promise.all(
+      scanned.map(async (f) => {
+        const content = getContentForField(f.fieldPath, f.content);
+        const currentHash = await hashField(content);
+        const approval = approvalMap.get(f.fieldPath) ?? null;
+        if (approval === null || approval.hash !== currentHash) {
+          pending.push(f.fieldPath);
+        }
+      })
+    );
+    return { approved: pending.length === 0, pending };
+  }, [adapter, getContentForField]);
+  return { fields, approve, revoke, rescan, checkDeploy };
+}
+
+// src/react/useContentEdit.ts
+import { useCallback as useCallback5, useRef as useRef3, useState as useState4 } from "react";
+
+// src/react/fieldDom.ts
+function getFieldValue(el) {
+  if (isFormField(el)) {
+    return el.placeholder || "";
+  }
+  return el.innerText;
+}
+function setFieldValue(el, value) {
+  if (isFormField(el)) {
+    ;
+    el.placeholder = value;
+  } else {
+    el.innerText = value;
+  }
+}
+function isFormField(el) {
+  const tag = el.tagName.toLowerCase();
+  return tag === "input" || tag === "textarea";
+}
+function findFieldElement(fieldPath) {
+  return document.querySelector(
+    `[data-feedtack-field="${fieldPath}"]`
+  );
+}
+function buildToolbarProps(focusedField, approvalFields, changes, saving, approval, revert) {
+  const approvalState = focusedField ? approvalFields.find((f) => f.fieldPath === focusedField.fieldPath) ?? null : null;
+  return {
+    focusedField,
+    approvalState,
+    changes,
+    saving,
+    onApprove: approval.approve,
+    onRevoke: approval.revoke,
+    onRevert: revert,
+    onCheckDeploy: approval.checkDeploy
+  };
+}
+
+// src/react/useContentEdit.ts
+function useContentEdit(adapter, userId) {
+  const [active, setActive] = useState4(false);
+  const [changes, setChanges] = useState4([]);
+  const [saving, setSaving] = useState4(null);
+  const [focusedField, setFocusedField] = useState4(
+    null
+  );
+  const storedValuesRef = useRef3(/* @__PURE__ */ new Map());
+  const [storedValuesVersion, setStoredValuesVersion] = useState4(0);
+  const storedValuesMap = storedValuesRef.current;
+  const approval = useContentApproval(adapter, userId, {
+    storedValues: storedValuesMap
+  });
+  const observerRef = useRef3(null);
+  const boundFieldsRef = useRef3(/* @__PURE__ */ new Set());
+  const changesRef = useRef3([]);
+  const updateStoredValue = useCallback5((fieldPath, value) => {
+    storedValuesRef.current.set(fieldPath, value);
+    setStoredValuesVersion((v) => v + 1);
+  }, []);
+  const handleFocus = useCallback5((e) => {
+    const el = e.target;
+    const fieldPath = el.dataset.feedtackField;
+    if (!fieldPath) return;
+    const storedValue = storedValuesRef.current.get(fieldPath) ?? getFieldValue(el);
+    el.dataset.feedtackOriginal = storedValue;
+    setFocusedField({ element: el, fieldPath });
+  }, []);
+  const handleBlur = useCallback5(
+    async (e) => {
+      const el = e.target;
+      const fieldPath = el.dataset.feedtackField;
+      if (!fieldPath) return;
+      setTimeout(() => {
+        const f = document.activeElement;
+        if (!f || f === document.body || f.closest?.("[data-feedtack-edit-ui]"))
+          return;
+        setFocusedField(null);
+      }, 150);
+      const value = getFieldValue(el);
+      const original = el.dataset.feedtackOriginal ?? "";
+      if (value === original) return;
+      if (!isContentEditAdapter(adapter)) return;
+      setSaving(fieldPath);
+      try {
+        await adapter.saveField(fieldPath, value);
+        updateStoredValue(fieldPath, value);
+        const existing = changesRef.current.find(
+          (c) => c.fieldPath === fieldPath
+        );
+        if (existing) {
+          changesRef.current = changesRef.current.map(
+            (c) => c.fieldPath === fieldPath ? { ...c, to: value, savedAt: Date.now() } : c
+          );
+        } else {
+          changesRef.current = [
+            ...changesRef.current,
+            { fieldPath, from: original, to: value, savedAt: Date.now() }
+          ];
+        }
+        setChanges([...changesRef.current]);
+        void approval.rescan();
+      } catch {
+        setFieldValue(el, original);
+      }
+      setTimeout(() => setSaving(null), 1500);
+    },
+    [adapter, approval, updateStoredValue]
+  );
+  const bindField = useCallback5(
+    (el) => {
+      if (boundFieldsRef.current.has(el)) return;
+      if (el.querySelector("[data-feedtack-field]")) return;
+      boundFieldsRef.current.add(el);
+      if (isFormField(el)) {
+        el.style.cursor = "pointer";
+      } else {
+        el.setAttribute("contenteditable", "true");
+        el.setAttribute("spellcheck", "true");
+      }
+      el.addEventListener("focus", handleFocus);
+      el.addEventListener("blur", handleBlur);
+    },
+    [handleFocus, handleBlur]
+  );
+  const unbindField = useCallback5(
+    (el) => {
+      boundFieldsRef.current.delete(el);
+      el.removeAttribute("contenteditable");
+      el.removeAttribute("spellcheck");
+      el.style.cursor = "";
+      delete el.dataset.feedtackOriginal;
+      el.removeEventListener("focus", handleFocus);
+      el.removeEventListener("blur", handleBlur);
+    },
+    [handleFocus, handleBlur]
+  );
+  const setupFields = useCallback5(() => {
+    document.querySelectorAll("[data-feedtack-field]").forEach(bindField);
+  }, [bindField]);
+  const activate = useCallback5(async () => {
+    warnIfNotContentEditAdapter(adapter, "activate");
+    if (!isContentEditAdapter(adapter)) return;
+    document.body.setAttribute("data-feedtack-hydrating", "true");
+    try {
+      const fields = await adapter.loadFields();
+      for (const [fp, value] of Object.entries(fields)) {
+        storedValuesRef.current.set(fp, value);
+        const el = findFieldElement(fp);
+        if (el) setFieldValue(el, value);
+      }
+      setStoredValuesVersion((v) => v + 1);
+    } finally {
+      document.body.removeAttribute("data-feedtack-hydrating");
+    }
+    setupFields();
+    const observer = new MutationObserver(() => setupFields());
+    observer.observe(document.body, { childList: true, subtree: true });
+    observerRef.current = observer;
+    setActive(true);
+    void approval.rescan();
+  }, [adapter, setupFields, approval]);
+  const deactivate = useCallback5(() => {
+    observerRef.current?.disconnect();
+    observerRef.current = null;
+    boundFieldsRef.current.forEach(unbindField);
+    boundFieldsRef.current.clear();
+    setActive(false);
+    setFocusedField(null);
+  }, [unbindField]);
+  const revert = useCallback5(
+    async (fieldPath) => {
+      warnIfNotContentEditAdapter(adapter, "revert");
+      if (!isContentEditAdapter(adapter)) return;
+      const change = changesRef.current.find((c) => c.fieldPath === fieldPath);
+      if (!change) return;
+      setSaving(fieldPath);
+      try {
+        await adapter.saveField(fieldPath, change.from);
+        updateStoredValue(fieldPath, change.from);
+        const el = findFieldElement(fieldPath);
+        if (el) setFieldValue(el, change.from);
+        changesRef.current = changesRef.current.filter(
+          (c) => c.fieldPath !== fieldPath
+        );
+        setChanges([...changesRef.current]);
+        void approval.rescan();
+      } finally {
+        setTimeout(() => setSaving(null), 1500);
+      }
+    },
+    [adapter, approval, updateStoredValue]
+  );
+  const toolbarProps = buildToolbarProps(
+    focusedField,
+    approval.fields,
+    changes,
+    saving,
+    approval,
+    revert
+  );
+  return {
+    active,
+    activate,
+    deactivate,
+    changes,
+    revert,
+    saving,
+    focusedField,
+    toolbarProps,
+    fields: approval.fields,
+    approve: approval.approve,
+    revoke: approval.revoke,
+    rescan: approval.rescan,
+    checkDeploy: approval.checkDeploy
+  };
+}
+
 // src/react/useFeedtack.ts
 function useFeedtack() {
   return useFeedtackContext();
 }
 export {
+  ContentEditToolbar,
   FeedtackProvider,
   PIN_PALETTE,
+  useContentApproval,
+  useContentEdit,
   useFeedtack
 };