@nuasite/notes 0.22.2 → 0.22.3

package/dist/overlay.js

@@ -523,21 +523,23 @@ function formatTime(iso) {
     return iso;
   }
 }
-function SidebarItem({ item, active, stale, applying, onFocus, onResolve, onReopen, onDelete, onApply }) {
+function SidebarItem({ item, active, stale, applying, isAgency, onFocus, onResolve, onReopen, onDelete, onPurge, onApply }) {
   const isResolved = item.status === "resolved" || item.status === "applied";
   const isApplied = item.status === "applied";
+  const isDeleted = item.status === "deleted";
   const isSuggestion = item.type === "suggestion" && item.range;
-  const canApply = isSuggestion && !isApplied && !stale;
+  const canApply = isAgency && isSuggestion && !isApplied && !isDeleted && !stale;
   return /* @__PURE__ */ u$1(
     "div",
     {
-      class: `notes-item ${active ? "notes-item--active" : ""} ${isResolved ? "notes-item--resolved" : ""}`,
+      class: `notes-item ${active ? "notes-item--active" : ""} ${isResolved ? "notes-item--resolved" : ""} ${isDeleted ? "notes-item--deleted" : ""}`,
       onMouseEnter: onFocus,
       children: [
         /* @__PURE__ */ u$1("div", { class: "notes-item__head", children: [
           /* @__PURE__ */ u$1("div", { children: [
             /* @__PURE__ */ u$1("span", { class: `notes-item__badge notes-item__badge--${item.type}`, children: item.type }),
             isResolved ? /* @__PURE__ */ u$1("span", { class: "notes-item__badge notes-item__badge--resolved", children: item.status }) : null,
+            isDeleted ? /* @__PURE__ */ u$1("span", { class: "notes-item__badge notes-item__badge--deleted", children: "deleted" }) : null,
             /* @__PURE__ */ u$1("span", { class: "notes-item__author", children: item.author })
           ] }),
           /* @__PURE__ */ u$1("span", { class: "notes-item__time", children: formatTime(item.createdAt) })
@@ -555,18 +557,51 @@ function SidebarItem({ item, active, stale, applying, onFocus, onResolve, onReop
           item.targetSnippet ? /* @__PURE__ */ u$1("div", { class: "notes-item__snippet", children: item.targetSnippet }) : null,
           /* @__PURE__ */ u$1("div", { class: "notes-item__body", children: item.body })
         ] }),
-        /* @__PURE__ */ u$1("div", { class: "notes-item__actions", children: [
+        isAgency && item.history.length > 1 ? /* @__PURE__ */ u$1("details", { class: "notes-item__history", children: [
+          /* @__PURE__ */ u$1("summary", { children: [
+            "History (",
+            item.history.length,
+            ")"
+          ] }),
+          /* @__PURE__ */ u$1("ul", { children: item.history.map((h2, i2) => /* @__PURE__ */ u$1("li", { children: [
+            /* @__PURE__ */ u$1("span", { class: "notes-item__history-action", children: h2.action }),
+            /* @__PURE__ */ u$1("span", { class: "notes-item__history-meta", children: [
+              h2.role ? ` · ${h2.role}` : "",
+              " · ",
+              formatTime(h2.at)
+            ] }),
+            h2.note ? /* @__PURE__ */ u$1("div", { class: "notes-item__history-note", children: h2.note }) : null
+          ] }, i2)) })
+        ] }) : null,
+        isAgency ? /* @__PURE__ */ u$1("div", { class: "notes-item__actions", children: [
           canApply ? /* @__PURE__ */ u$1("button", { class: "notes-btn notes-btn--primary", onClick: onApply, disabled: applying, children: applying ? "Applying..." : "Apply" }) : null,
-          isResolved ? /* @__PURE__ */ u$1("button", { class: "notes-btn notes-btn--ghost", onClick: onReopen, children: "Reopen" }) : /* @__PURE__ */ u$1("button", { class: "notes-btn", onClick: onResolve, children: "Resolve" }),
-          /* @__PURE__ */ u$1("button", { class: "notes-btn notes-btn--ghost notes-btn--danger", onClick: onDelete, children: "Delete" })
-        ] })
+          isDeleted ? /* @__PURE__ */ u$1("button", { class: "notes-btn notes-btn--ghost notes-btn--danger", onClick: onPurge, children: "Purge" }) : isResolved ? /* @__PURE__ */ u$1("button", { class: "notes-btn notes-btn--ghost", onClick: onReopen, children: "Reopen" }) : /* @__PURE__ */ u$1("button", { class: "notes-btn", onClick: onResolve, children: "Resolve" }),
+          !isDeleted ? /* @__PURE__ */ u$1("button", { class: "notes-btn notes-btn--ghost notes-btn--danger", onClick: onDelete, children: "Delete" }) : null
+        ] }) : null
       ]
     }
   );
 }
-function Sidebar({ page, items, activeId, picking, error, staleIds, applyingId, onFocus, onResolve, onReopen, onDelete, onApply }) {
-  const open = items.filter((i2) => i2.status !== "resolved" && i2.status !== "applied");
-  const closed = items.filter((i2) => i2.status === "resolved" || i2.status === "applied");
+function Sidebar({
+  page,
+  items,
+  activeId,
+  picking,
+  error,
+  staleIds,
+  applyingId,
+  isAgency,
+  onFocus,
+  onResolve,
+  onReopen,
+  onDelete,
+  onPurge,
+  onApply
+}) {
+  const open = items.filter((i2) => i2.status === "open" || i2.status === "stale" || i2.status === "rejected");
+  const resolved = items.filter((i2) => i2.status === "resolved" || i2.status === "applied");
+  const deleted = isAgency ? items.filter((i2) => i2.status === "deleted") : [];
+  const visible = [...open, ...resolved, ...deleted];
   const renderItem = (item) => /* @__PURE__ */ u$1(
     SidebarItem,
     {
@@ -574,10 +609,12 @@ function Sidebar({ page, items, activeId, picking, error, staleIds, applyingId,
       active: item.id === activeId,
       stale: staleIds.has(item.id),
       applying: applyingId === item.id,
+      isAgency,
       onFocus: () => onFocus(item.id),
       onResolve: () => onResolve(item.id),
       onReopen: () => onReopen(item.id),
       onDelete: () => onDelete(item.id),
+      onPurge: () => onPurge(item.id),
       onApply: () => onApply(item.id)
     },
     item.id
@@ -588,18 +625,28 @@ function Sidebar({ page, items, activeId, picking, error, staleIds, applyingId,
       /* @__PURE__ */ u$1("div", { class: "notes-sidebar__meta", children: [
         open.length,
         " open · ",
-        closed.length,
-        " resolved · ",
+        resolved.length,
+        " resolved",
+        isAgency && deleted.length > 0 ? ` · ${deleted.length} deleted` : "",
+        " · ",
         /* @__PURE__ */ u$1("code", { children: page })
       ] })
     ] }),
     /* @__PURE__ */ u$1("div", { class: "notes-sidebar__list", children: [
       error ? /* @__PURE__ */ u$1("div", { class: "notes-banner", children: error }) : null,
-      items.length === 0 ? /* @__PURE__ */ u$1("div", { class: "notes-sidebar__empty", children: picking ? "Click any text or element on the page to add a comment." : 'Select text on the page to suggest an edit, or click "Pick element" to comment.' }) : null,
+      visible.length === 0 ? /* @__PURE__ */ u$1("div", { class: "notes-sidebar__empty", children: picking ? "Click any text or element on the page to add a comment." : 'Select text on the page to suggest an edit, or click "Pick element" to comment.' }) : null,
       open.map(renderItem),
-      closed.length > 0 ? /* @__PURE__ */ u$1(S, { children: [
-        /* @__PURE__ */ u$1("div", { class: "notes-sidebar__meta", style: { marginTop: "4px" }, children: "Resolved" }),
-        closed.map(renderItem)
+      resolved.length > 0 ? /* @__PURE__ */ u$1(S, { children: [
+        /* @__PURE__ */ u$1("div", { class: "notes-sidebar__section", children: "Resolved" }),
+        resolved.map(renderItem)
+      ] }) : null,
+      isAgency && deleted.length > 0 ? /* @__PURE__ */ u$1("details", { class: "notes-sidebar__deleted", children: [
+        /* @__PURE__ */ u$1("summary", { children: [
+          "Deleted (",
+          deleted.length,
+          ")"
+        ] }),
+        deleted.map(renderItem)
       ] }) : null
     ] })
   ] });
@@ -732,11 +779,12 @@ function SuggestPopover({ rect, originalText, defaultAuthor, onCancel, onSubmit
     }
   );
 }
-function Toolbar({ page, count, picking, onTogglePick, onExit }) {
+function Toolbar({ page, count, picking, role, collapsed, onTogglePick, onToggleCollapse, onExit }) {
   return /* @__PURE__ */ u$1("div", { class: "notes-toolbar", children: [
     /* @__PURE__ */ u$1("div", { class: "notes-toolbar__brand", children: [
       /* @__PURE__ */ u$1("span", { class: "notes-toolbar__dot" }),
       /* @__PURE__ */ u$1("span", { children: "Notes" }),
+      /* @__PURE__ */ u$1("span", { class: `notes-toolbar__role notes-toolbar__role--${role}`, children: role }),
       /* @__PURE__ */ u$1("span", { class: "notes-toolbar__page", children: [
         page,
         " · ",
@@ -755,10 +803,65 @@ function Toolbar({ page, count, picking, onTogglePick, onExit }) {
           children: picking ? "Cancel pick" : "Pick element"
         }
       ),
+      /* @__PURE__ */ u$1(
+        "button",
+        {
+          class: "notes-btn notes-btn--ghost",
+          onClick: onToggleCollapse,
+          title: collapsed ? "Show notes sidebar" : "Hide notes sidebar to see the full page",
+          children: collapsed ? "Show sidebar" : "Hide sidebar"
+        }
+      ),
       /* @__PURE__ */ u$1("button", { class: "notes-btn notes-btn--ghost", onClick: onExit, title: "Leave review mode", children: "Exit" })
     ] })
   ] });
 }
+const STYLE_ID = "nua-notes-cms-bridge";
+const COLLAPSE_ATTR = "data-nua-notes-collapsed";
+const STYLES = `
+	#cms-app-host { display: none !important; }
+	[data-nuasite-cms] { display: none !important; }
+
+	/* Reserve space for the notes toolbar + sidebar so they don't sit on top
+	 * of host page content. Padding the body lets the page reflow into the
+	 * visible area instead of being clipped under fixed-position chrome. */
+	html:not([${COLLAPSE_ATTR}]) body {
+		box-sizing: border-box;
+		padding-top: 40px !important;
+		padding-right: 340px !important;
+	}
+
+	/* When the sidebar is collapsed, only reserve the toolbar height. */
+	html[${COLLAPSE_ATTR}] body {
+		box-sizing: border-box;
+		padding-top: 40px !important;
+	}
+
+	/* Page-fixed elements (sticky headers, fixed nav) don't get pushed by
+	 * body padding because they're positioned against the viewport. Offset
+	 * them via top/right so they slot into the same chrome-free area. We
+	 * scope this to elements the host page declared as fixed/sticky to
+	 * avoid touching the notes UI itself (which lives in a shadow DOM). */
+	html:not([${COLLAPSE_ATTR}]) body > header[class*="fixed"],
+	html:not([${COLLAPSE_ATTR}]) body > nav[class*="fixed"],
+	html:not([${COLLAPSE_ATTR}]) body > [class*="sticky"] {
+		right: 340px !important;
+	}
+`;
+function enableCmsBridge() {
+  if (document.getElementById(STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = STYLES;
+  document.head.appendChild(style);
+}
+function setSidebarCollapsed(collapsed) {
+  if (collapsed) {
+    document.documentElement.setAttribute(COLLAPSE_ATTR, "");
+  } else {
+    document.documentElement.removeAttribute(COLLAPSE_ATTR);
+  }
+}
 function manifestUrlForPage(page) {
   if (page === "" || page === "/") return "/index.json";
   const trimmed = page.replace(/^\/+|\/+$/g, "");
@@ -776,12 +879,64 @@ async function fetchPageManifest(page) {
     return null;
   }
 }
+const MODE_COOKIE = "nua-notes-mode";
+const ROLE_COOKIE = "nua-notes-role";
+function readCookie(name) {
+  if (typeof document === "undefined") return null;
+  for (const part of document.cookie.split("; ")) {
+    const eq = part.indexOf("=");
+    if (eq < 0) continue;
+    if (part.slice(0, eq) === name) return decodeURIComponent(part.slice(eq + 1));
+  }
+  return null;
+}
+function isReviewMode(urlFlag) {
+  if (typeof window === "undefined") return false;
+  const url = new URL(window.location.href);
+  if (url.searchParams.has(urlFlag)) return true;
+  return readCookie(MODE_COOKIE) === "1";
+}
+function setReviewModeCookie() {
+  document.cookie = `${MODE_COOKIE}=1; path=/; SameSite=Lax`;
+}
+function clearReviewModeCookie() {
+  document.cookie = `${MODE_COOKIE}=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT; SameSite=Lax`;
+}
+function resolveRole(agencyFlag) {
+  if (typeof window === "undefined") return "client";
+  const url = new URL(window.location.href);
+  if (url.searchParams.has(agencyFlag)) {
+    document.cookie = `${ROLE_COOKIE}=agency; path=/; SameSite=Lax`;
+    return "agency";
+  }
+  return readCookie(ROLE_COOKIE) === "agency" ? "agency" : "client";
+}
+function clearRoleCookie() {
+  document.cookie = `${ROLE_COOKIE}=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT; SameSite=Lax`;
+}
+function exitReviewMode(urlFlag, agencyFlag) {
+  clearReviewModeCookie();
+  clearRoleCookie();
+  const url = new URL(window.location.href);
+  url.searchParams.delete(urlFlag);
+  url.searchParams.delete(agencyFlag);
+  window.location.href = url.pathname + (url.search || "") + url.hash;
+}
+function getCurrentPagePath() {
+  if (typeof window === "undefined") return "/";
+  const p2 = window.location.pathname;
+  if (p2 === "" || p2 === "/") return "/";
+  return p2.endsWith("/") ? p2.slice(0, -1) : p2;
+}
 const BASE = "/_nua/notes";
 const TIMEOUT_MS = 1e4;
+function authHeaders() {
+  return { "x-nua-role": resolveRole("nua-agency") };
+}
 async function postJson(path, body) {
   const res = await fetch(`${BASE}${path}`, {
     method: "POST",
-    headers: { "Content-Type": "application/json" },
+    headers: { "Content-Type": "application/json", ...authHeaders() },
     body: JSON.stringify(body),
     signal: AbortSignal.timeout(TIMEOUT_MS)
   });
@@ -799,7 +954,7 @@ async function postJson(path, body) {
 }
 async function listNotes(page) {
   const res = await fetch(`${BASE}/list?page=${encodeURIComponent(page)}`, {
-    headers: { Accept: "application/json" },
+    headers: { Accept: "application/json", ...authHeaders() },
     signal: AbortSignal.timeout(TIMEOUT_MS)
   });
   if (!res.ok) throw new Error(`notes: list failed (${res.status})`);
@@ -825,12 +980,16 @@ async function setNoteStatus(page, id, status) {
   return updateNote(page, id, { status });
 }
 async function deleteNote(page, id) {
-  await postJson("/delete", { page, id });
+  const res = await postJson("/delete", { page, id });
+  return res.item;
+}
+async function purgeNote(page, id) {
+  await postJson("/purge", { page, id });
 }
 async function applyNote(page, id) {
   const res = await fetch(`${BASE}/apply`, {
     method: "POST",
-    headers: { "Content-Type": "application/json" },
+    headers: { "Content-Type": "application/json", ...authHeaders() },
     body: JSON.stringify({ page, id }),
     signal: AbortSignal.timeout(TIMEOUT_MS)
   });
@@ -932,30 +1091,19 @@ function selectionInsideElement(el, selection) {
   if (!text.trim()) return null;
   return { text, rect: range.getBoundingClientRect() };
 }
-const COOKIE = "nua-notes-mode";
-function isReviewMode(urlFlag) {
-  if (typeof window === "undefined") return false;
-  const url = new URL(window.location.href);
-  if (url.searchParams.has(urlFlag)) return true;
-  return document.cookie.split("; ").some((c2) => c2.startsWith(`${COOKIE}=1`));
-}
-function setReviewModeCookie() {
-  document.cookie = `${COOKIE}=1; path=/; SameSite=Lax`;
-}
-function clearReviewModeCookie() {
-  document.cookie = `${COOKIE}=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT; SameSite=Lax`;
-}
-function exitReviewMode(urlFlag) {
-  clearReviewModeCookie();
-  const url = new URL(window.location.href);
-  url.searchParams.delete(urlFlag);
-  window.location.href = url.pathname + (url.search || "") + url.hash;
+const COLLAPSED_KEY = "nua-notes-sidebar-collapsed";
+function loadCollapsed() {
+  try {
+    return localStorage.getItem(COLLAPSED_KEY) === "1";
+  } catch {
+    return false;
+  }
 }
-function getCurrentPagePath() {
-  if (typeof window === "undefined") return "/";
-  const p2 = window.location.pathname;
-  if (p2 === "" || p2 === "/") return "/";
-  return p2.endsWith("/") ? p2.slice(0, -1) : p2;
+function saveCollapsed(value) {
+  try {
+    localStorage.setItem(COLLAPSED_KEY, value ? "1" : "0");
+  } catch {
+  }
 }
 const AUTHOR_KEY = "nua-notes-author";
 function loadAuthor() {
@@ -986,8 +1134,10 @@ function findCmsAncestor(target) {
   }
   return null;
 }
-function App({ urlFlag }) {
+function App({ urlFlag, agencyFlag }) {
   const page = T(() => getCurrentPagePath(), []);
+  const role = T(() => resolveRole(agencyFlag), [agencyFlag]);
+  const isAgency = role === "agency";
   const [items, setItems] = d([]);
   const [manifest, setManifest] = d(null);
   const [picking, setPicking] = d(false);
@@ -1001,6 +1151,17 @@ function App({ urlFlag }) {
   const [author, setAuthor] = d(() => loadAuthor());
   const [staleIds, setStaleIds] = d(/* @__PURE__ */ new Set());
   const [applyingId, setApplyingId] = d(null);
+  const [collapsed, setCollapsedState] = d(() => loadCollapsed());
+  y(() => {
+    setSidebarCollapsed(collapsed);
+    saveCollapsed(collapsed);
+  }, [collapsed]);
+  y(() => {
+    setSidebarCollapsed(loadCollapsed());
+  }, []);
+  const toggleCollapsed = q(() => {
+    setCollapsedState((c2) => !c2);
+  }, []);
   y(() => {
     let alive = true;
     Promise.all([listNotes(page), fetchPageManifest(page)]).then(([file, mf]) => {
@@ -1214,7 +1375,16 @@ function App({ urlFlag }) {
   }, [page]);
   const handleDelete = q(async (id) => {
     try {
-      await deleteNote(page, id);
+      const item = await deleteNote(page, id);
+      setItems((prev) => prev.map((i2) => i2.id === id ? item : i2));
+      if (activeId === id) setActiveId(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  }, [page, activeId]);
+  const handlePurge = q(async (id) => {
+    try {
+      await purgeNote(page, id);
       setItems((prev) => prev.filter((i2) => i2.id !== id));
       if (activeId === id) setActiveId(null);
     } catch (err) {
@@ -1256,17 +1426,20 @@ function App({ urlFlag }) {
       Toolbar,
       {
         page,
-        count: items.length,
+        count: items.filter((i2) => i2.status !== "deleted").length,
         picking,
+        role,
+        collapsed,
         onTogglePick: () => {
           setPicking((p2) => !p2);
           setPendingPick(null);
           setPendingSuggest(null);
         },
-        onExit: () => exitReviewMode(urlFlag)
+        onToggleCollapse: toggleCollapsed,
+        onExit: () => exitReviewMode(urlFlag, agencyFlag)
       }
     ),
-    /* @__PURE__ */ u$1(
+    collapsed ? null : /* @__PURE__ */ u$1(
       Sidebar,
       {
         page,
@@ -1276,10 +1449,12 @@ function App({ urlFlag }) {
         error,
         staleIds,
         applyingId,
+        isAgency,
         onFocus: setActiveId,
         onResolve: handleResolve,
         onReopen: handleReopen,
         onDelete: handleDelete,
+        onPurge: handlePurge,
         onApply: handleApply
       }
     ),
@@ -1321,25 +1496,12 @@ function App({ urlFlag }) {
     ) : null
   ] });
 }
-const STYLE_ID = "nua-notes-cms-bridge";
-const HIDE_CMS_CSS = `
-	#cms-app-host { display: none !important; }
-	[data-nuasite-cms] { display: none !important; }
-	/* Allow notes to handle clicks on annotated elements without CMS interfering */
-	[data-cms-id] { cursor: default !important; }
-`;
-function enableCmsBridge() {
-  if (document.getElementById(STYLE_ID)) return;
-  const style = document.createElement("style");
-  style.id = STYLE_ID;
-  style.textContent = HIDE_CMS_CSS;
-  document.head.appendChild(style);
-}
-const OVERLAY_STYLES = "/**\n * @nuasite/notes overlay styles.\n *\n * Imported via Vite's `?inline` query and injected into a shadow root, so\n * these styles never leak into the host page (and the host page can't\n * accidentally style notes UI). Variables on `:host` are the only knobs.\n */\n\n:host {\n	--notes-bg: #ffffff;\n	--notes-fg: #0f172a;\n	--notes-muted: #64748b;\n	--notes-border: #e2e8f0;\n	--notes-accent: #f59e0b;\n	--notes-accent-fg: #1f2937;\n	--notes-danger: #dc2626;\n	--notes-success: #16a34a;\n	--notes-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);\n	--notes-radius: 10px;\n	--notes-sidebar-w: 360px;\n	--notes-z: 2147483600;\n\n	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n	font-size: 14px;\n	line-height: 1.45;\n	color: var(--notes-fg);\n	-webkit-font-smoothing: antialiased;\n}\n\n* {\n	box-sizing: border-box;\n}\n\nbutton {\n	font: inherit;\n	cursor: pointer;\n	border: none;\n	background: none;\n	color: inherit;\n	padding: 0;\n}\n\ninput,\ntextarea {\n	font: inherit;\n	color: inherit;\n}\n\n.notes-root {\n	position: fixed;\n	inset: 0;\n	pointer-events: none;\n	z-index: var(--notes-z);\n}\n\n/* Toolbar (top, full width) */\n.notes-toolbar {\n	position: fixed;\n	top: 0;\n	left: 0;\n	right: 0;\n	height: 44px;\n	background: var(--notes-bg);\n	border-bottom: 1px solid var(--notes-border);\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	padding: 0 16px;\n	box-shadow: var(--notes-shadow);\n	pointer-events: auto;\n}\n\n.notes-toolbar__brand {\n	display: flex;\n	align-items: center;\n	gap: 8px;\n	font-weight: 600;\n}\n\n.notes-toolbar__dot {\n	width: 8px;\n	height: 8px;\n	border-radius: 50%;\n	background: var(--notes-accent);\n	box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);\n}\n\n.notes-toolbar__page {\n	color: var(--notes-muted);\n	font-weight: 400;\n	margin-left: 12px;\n	font-size: 13px;\n}\n\n.notes-toolbar__actions {\n	display: flex;\n	align-items: center;\n	gap: 8px;\n}\n\n.notes-btn {\n	padding: 6px 12px;\n	border-radius: 6px;\n	background: #f1f5f9;\n	color: var(--notes-fg);\n	font-size: 13px;\n	font-weight: 500;\n	transition: background 0.15s;\n}\n\n.notes-btn:hover {\n	background: #e2e8f0;\n}\n\n.notes-btn--primary {\n	background: var(--notes-accent);\n	color: var(--notes-accent-fg);\n}\n\n.notes-btn--primary:hover {\n	background: #d97706;\n	color: #ffffff;\n}\n\n.notes-btn--ghost {\n	background: transparent;\n	color: var(--notes-muted);\n}\n\n.notes-btn--ghost:hover {\n	color: var(--notes-fg);\n	background: #f1f5f9;\n}\n\n.notes-btn--danger {\n	color: var(--notes-danger);\n}\n\n/* Sidebar (right side) */\n.notes-sidebar {\n	position: fixed;\n	top: 44px;\n	right: 0;\n	bottom: 0;\n	width: var(--notes-sidebar-w);\n	background: var(--notes-bg);\n	border-left: 1px solid var(--notes-border);\n	box-shadow: var(--notes-shadow);\n	display: flex;\n	flex-direction: column;\n	pointer-events: auto;\n}\n\n.notes-sidebar__header {\n	padding: 16px 16px 12px;\n	border-bottom: 1px solid var(--notes-border);\n}\n\n.notes-sidebar__title {\n	font-size: 16px;\n	font-weight: 600;\n	margin: 0 0 4px;\n}\n\n.notes-sidebar__meta {\n	font-size: 12px;\n	color: var(--notes-muted);\n}\n\n.notes-sidebar__list {\n	flex: 1;\n	overflow-y: auto;\n	padding: 12px;\n	display: flex;\n	flex-direction: column;\n	gap: 10px;\n}\n\n.notes-sidebar__empty {\n	padding: 24px 16px;\n	text-align: center;\n	color: var(--notes-muted);\n	font-size: 13px;\n	line-height: 1.5;\n}\n\n.notes-sidebar__hint {\n	font-size: 12px;\n	color: var(--notes-muted);\n	margin-top: 6px;\n}\n\n/* Item card */\n.notes-item {\n	border: 1px solid var(--notes-border);\n	border-radius: var(--notes-radius);\n	padding: 12px;\n	background: #ffffff;\n	transition: border-color 0.15s, box-shadow 0.15s;\n}\n\n.notes-item:hover {\n	border-color: #cbd5e1;\n}\n\n.notes-item--active {\n	border-color: var(--notes-accent);\n	box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);\n}\n\n.notes-item--resolved {\n	opacity: 0.55;\n}\n\n.notes-item__head {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	margin-bottom: 6px;\n}\n\n.notes-item__author {\n	font-weight: 600;\n	font-size: 13px;\n}\n\n.notes-item__time {\n	font-size: 11px;\n	color: var(--notes-muted);\n}\n\n.notes-item__snippet {\n	font-size: 12px;\n	color: var(--notes-muted);\n	background: #f8fafc;\n	border-left: 3px solid var(--notes-border);\n	padding: 6px 8px;\n	margin-bottom: 6px;\n	border-radius: 0 4px 4px 0;\n	white-space: pre-wrap;\n	word-break: break-word;\n}\n\n.notes-item__body {\n	font-size: 13px;\n	white-space: pre-wrap;\n	word-break: break-word;\n}\n\n.notes-item__actions {\n	display: flex;\n	gap: 6px;\n	margin-top: 10px;\n	padding-top: 10px;\n	border-top: 1px solid #f1f5f9;\n}\n\n.notes-item__badge {\n	display: inline-block;\n	font-size: 10px;\n	font-weight: 600;\n	text-transform: uppercase;\n	letter-spacing: 0.04em;\n	padding: 2px 6px;\n	border-radius: 4px;\n	margin-right: 6px;\n}\n\n.notes-item__badge--comment {\n	background: #dbeafe;\n	color: #1e40af;\n}\n\n.notes-item__badge--suggestion {\n	background: #fef3c7;\n	color: #92400e;\n}\n\n.notes-item__badge--resolved {\n	background: #dcfce7;\n	color: #166534;\n}\n\n/* Element highlight ring */\n.notes-highlight {\n	position: fixed;\n	pointer-events: none;\n	border: 2px solid var(--notes-accent);\n	border-radius: 4px;\n	box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18);\n	transition: all 0.08s ease-out;\n}\n\n.notes-highlight--persistent {\n	border-color: rgba(245, 158, 11, 0.6);\n	box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);\n}\n\n/* Comment popover */\n.notes-popover {\n	position: fixed;\n	width: 320px;\n	background: var(--notes-bg);\n	border: 1px solid var(--notes-border);\n	border-radius: var(--notes-radius);\n	box-shadow: var(--notes-shadow);\n	padding: 14px;\n	pointer-events: auto;\n	display: flex;\n	flex-direction: column;\n	gap: 10px;\n}\n\n.notes-popover__title {\n	font-size: 13px;\n	font-weight: 600;\n	margin: 0;\n}\n\n.notes-popover__snippet {\n	font-size: 12px;\n	color: var(--notes-muted);\n	background: #f8fafc;\n	border-left: 3px solid var(--notes-border);\n	padding: 6px 8px;\n	border-radius: 0 4px 4px 0;\n	max-height: 60px;\n	overflow: hidden;\n}\n\n.notes-popover textarea {\n	width: 100%;\n	min-height: 80px;\n	resize: vertical;\n	border: 1px solid var(--notes-border);\n	border-radius: 6px;\n	padding: 8px 10px;\n	background: #ffffff;\n	outline: none;\n}\n\n.notes-popover textarea:focus {\n	border-color: var(--notes-accent);\n	box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);\n}\n\n.notes-popover input[type='text'] {\n	border: 1px solid var(--notes-border);\n	border-radius: 6px;\n	padding: 6px 10px;\n	background: #ffffff;\n	outline: none;\n}\n\n.notes-popover input[type='text']:focus {\n	border-color: var(--notes-accent);\n	box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);\n}\n\n.notes-popover__row {\n	display: flex;\n	justify-content: space-between;\n	align-items: center;\n	gap: 8px;\n}\n\n/* Selection tooltip */\n.notes-selection-tooltip {\n	position: fixed;\n	display: flex;\n	align-items: center;\n	gap: 6px;\n	padding: 4px 6px;\n	background: #0f172a;\n	color: #ffffff;\n	border-radius: 8px;\n	box-shadow: var(--notes-shadow);\n	pointer-events: auto;\n	z-index: calc(var(--notes-z) + 5);\n}\n\n.notes-selection-tooltip .notes-btn {\n	background: rgba(255, 255, 255, 0.08);\n	color: #ffffff;\n	font-size: 12px;\n	padding: 4px 8px;\n}\n\n.notes-selection-tooltip .notes-btn--primary {\n	background: var(--notes-accent);\n	color: var(--notes-accent-fg);\n}\n\n.notes-selection-tooltip .notes-btn--ghost {\n	color: #e2e8f0;\n}\n\n.notes-selection-tooltip .notes-btn--ghost:hover {\n	background: rgba(255, 255, 255, 0.16);\n	color: #ffffff;\n}\n\n/* Suggest popover variations */\n.notes-popover--suggest {\n	width: 360px;\n}\n\n.notes-popover__label {\n	display: block;\n	font-size: 11px;\n	font-weight: 600;\n	text-transform: uppercase;\n	letter-spacing: 0.04em;\n	color: var(--notes-muted);\n	margin-bottom: 4px;\n}\n\n.notes-popover__original {\n	background: #fef3c7;\n	border: 1px solid #fde68a;\n	border-radius: 6px;\n	padding: 8px 10px;\n	font-size: 13px;\n	color: #78350f;\n	max-height: 80px;\n	overflow-y: auto;\n	white-space: pre-wrap;\n	word-break: break-word;\n}\n\n.notes-strikethrough {\n	text-decoration: line-through;\n	text-decoration-color: rgba(220, 38, 38, 0.6);\n	text-decoration-thickness: 2px;\n}\n\n/* Diff preview in sidebar */\n.notes-diff {\n	font-size: 13px;\n	border-radius: 6px;\n	background: #f8fafc;\n	border: 1px solid var(--notes-border);\n	overflow: hidden;\n	margin-bottom: 8px;\n}\n\n.notes-diff__row {\n	padding: 6px 10px;\n	display: flex;\n	gap: 6px;\n	white-space: pre-wrap;\n	word-break: break-word;\n}\n\n.notes-diff__row--del {\n	background: #fef2f2;\n	color: #7f1d1d;\n	border-bottom: 1px solid #fee2e2;\n}\n\n.notes-diff__row--ins {\n	background: #f0fdf4;\n	color: #14532d;\n}\n\n.notes-diff__marker {\n	font-weight: 700;\n	font-family: ui-monospace, SFMono-Regular, monospace;\n	width: 12px;\n	flex-shrink: 0;\n	text-align: center;\n}\n\n.notes-item__rationale {\n	font-size: 12px;\n	color: var(--notes-muted);\n	margin-bottom: 6px;\n	font-style: italic;\n}\n\n.notes-item__rationale-label {\n	font-style: normal;\n	font-weight: 600;\n	color: var(--notes-fg);\n	margin-right: 4px;\n}\n\n/* Stale warning */\n.notes-stale {\n	display: flex;\n	align-items: center;\n	gap: 6px;\n	background: #fef3c7;\n	border: 1px solid #fde68a;\n	color: #92400e;\n	font-size: 12px;\n	padding: 6px 8px;\n	border-radius: 6px;\n	margin-bottom: 8px;\n}\n\n.notes-stale__icon {\n	font-size: 14px;\n}\n\n/* Persistent highlight variant for suggestion ranges */\n.notes-highlight--suggestion {\n	border-color: rgba(250, 204, 21, 0.9);\n	box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.18);\n	background: rgba(254, 243, 199, 0.25);\n}\n\n/* Banner shown when notes API fails to load */\n.notes-banner {\n	position: fixed;\n	top: 56px;\n	left: 16px;\n	right: calc(var(--notes-sidebar-w) + 16px);\n	padding: 10px 14px;\n	background: #fef2f2;\n	border: 1px solid #fecaca;\n	color: #991b1b;\n	border-radius: var(--notes-radius);\n	font-size: 13px;\n	pointer-events: auto;\n}\n";
+const OVERLAY_STYLES = "/**\n * @nuasite/notes overlay styles.\n *\n * Imported via Vite's `?inline` query and injected into a shadow root, so\n * these styles never leak into the host page (and the host page can't\n * accidentally style notes UI). Variables on `:host` are the only knobs.\n *\n * Design language: cool neutrals (slate / zinc) with a single muted blue\n * accent. No bright primaries, no rounded-blob corners. Typography sticks\n * to the system stack. The goal is to feel like a real product, not a\n * Pastel-style demo.\n */\n\n:host {\n	/* Surfaces */\n	--notes-bg: #ffffff;\n	--notes-bg-soft: #f8fafc;\n	--notes-bg-sunken: #f1f5f9;\n\n	/* Text */\n	--notes-fg: #0f172a;\n	--notes-fg-muted: #64748b;\n	--notes-fg-subtle: #94a3b8;\n\n	/* Lines */\n	--notes-border: #e2e8f0;\n	--notes-border-strong: #cbd5e1;\n\n	/* Accent — single muted blue used for primary actions and active state */\n	--notes-accent: #2563eb;\n	--notes-accent-hover: #1d4ed8;\n	--notes-accent-fg: #ffffff;\n	--notes-accent-soft: rgba(37, 99, 235, 0.08);\n	--notes-accent-ring: rgba(37, 99, 235, 0.2);\n\n	/* Status colors — used sparingly */\n	--notes-danger: #dc2626;\n	--notes-danger-soft: #fef2f2;\n	--notes-success: #16a34a;\n	--notes-warn: #d97706;\n	--notes-warn-soft: #fffbeb;\n	--notes-warn-border: #fde68a;\n\n	/* Geometry */\n	--notes-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);\n	--notes-shadow: 0 8px 24px -8px rgba(15, 23, 42, 0.16), 0 2px 4px -2px rgba(15, 23, 42, 0.06);\n	--notes-shadow-lg: 0 24px 48px -16px rgba(15, 23, 42, 0.22);\n	--notes-radius: 8px;\n	--notes-radius-sm: 5px;\n	--notes-sidebar-w: 340px;\n	--notes-z: 2147483600;\n\n	font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;\n	font-size: 13px;\n	line-height: 1.5;\n	color: var(--notes-fg);\n	-webkit-font-smoothing: antialiased;\n	font-feature-settings: 'cv11', 'ss01';\n}\n\n* {\n	box-sizing: border-box;\n}\n\nbutton {\n	font: inherit;\n	cursor: pointer;\n	border: none;\n	background: none;\n	color: inherit;\n	padding: 0;\n}\n\ninput,\ntextarea {\n	font: inherit;\n	color: inherit;\n}\n\ncode {\n	font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;\n	font-size: 0.92em;\n	background: var(--notes-bg-sunken);\n	padding: 1px 5px;\n	border-radius: 3px;\n	color: var(--notes-fg);\n}\n\n.notes-root {\n	position: fixed;\n	inset: 0;\n	pointer-events: none;\n	z-index: var(--notes-z);\n}\n\n/* ──────────────────────────────────────────────────────────────────\n * Toolbar\n * ────────────────────────────────────────────────────────────────── */\n.notes-toolbar {\n	position: fixed;\n	top: 0;\n	left: 0;\n	right: 0;\n	height: 40px;\n	background: var(--notes-bg);\n	border-bottom: 1px solid var(--notes-border);\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	padding: 0 14px;\n	pointer-events: auto;\n}\n\n.notes-toolbar__brand {\n	display: flex;\n	align-items: center;\n	gap: 8px;\n	font-weight: 600;\n	font-size: 13px;\n	letter-spacing: -0.01em;\n}\n\n.notes-toolbar__dot {\n	width: 7px;\n	height: 7px;\n	border-radius: 50%;\n	background: var(--notes-accent);\n	box-shadow: 0 0 0 3px var(--notes-accent-soft);\n}\n\n.notes-toolbar__role {\n	font-size: 10px;\n	font-weight: 600;\n	text-transform: uppercase;\n	letter-spacing: 0.06em;\n	padding: 2px 6px;\n	border-radius: 3px;\n	background: var(--notes-bg-sunken);\n	color: var(--notes-fg-muted);\n}\n\n.notes-toolbar__role--agency {\n	background: var(--notes-accent-soft);\n	color: var(--notes-accent);\n}\n\n.notes-toolbar__page {\n	color: var(--notes-fg-subtle);\n	font-weight: 400;\n	margin-left: 4px;\n	font-size: 12px;\n}\n\n.notes-toolbar__actions {\n	display: flex;\n	align-items: center;\n	gap: 6px;\n}\n\n/* ──────────────────────────────────────────────────────────────────\n * Buttons\n * ────────────────────────────────────────────────────────────────── */\n.notes-btn {\n	padding: 5px 11px;\n	border-radius: var(--notes-radius-sm);\n	background: var(--notes-bg-sunken);\n	color: var(--notes-fg);\n	font-size: 12px;\n	font-weight: 500;\n	border: 1px solid transparent;\n	transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;\n	white-space: nowrap;\n}\n\n.notes-btn:hover {\n	background: var(--notes-border);\n}\n\n.notes-btn:disabled {\n	opacity: 0.5;\n	cursor: not-allowed;\n}\n\n.notes-btn--primary {\n	background: var(--notes-accent);\n	color: var(--notes-accent-fg);\n}\n\n.notes-btn--primary:hover {\n	background: var(--notes-accent-hover);\n}\n\n.notes-btn--primary:disabled:hover {\n	background: var(--notes-accent);\n}\n\n.notes-btn--ghost {\n	background: transparent;\n	color: var(--notes-fg-muted);\n}\n\n.notes-btn--ghost:hover {\n	color: var(--notes-fg);\n	background: var(--notes-bg-sunken);\n}\n\n.notes-btn--danger {\n	color: var(--notes-danger);\n}\n\n.notes-btn--danger:hover {\n	background: var(--notes-danger-soft);\n	color: var(--notes-danger);\n}\n\n/* ──────────────────────────────────────────────────────────────────\n * Sidebar\n * ────────────────────────────────────────────────────────────────── */\n.notes-sidebar {\n	position: fixed;\n	top: 40px;\n	right: 0;\n	bottom: 0;\n	width: var(--notes-sidebar-w);\n	background: var(--notes-bg);\n	border-left: 1px solid var(--notes-border);\n	display: flex;\n	flex-direction: column;\n	pointer-events: auto;\n}\n\n.notes-sidebar__header {\n	padding: 14px 16px 12px;\n	border-bottom: 1px solid var(--notes-border);\n	background: var(--notes-bg);\n}\n\n.notes-sidebar__title {\n	font-size: 13px;\n	font-weight: 600;\n	margin: 0 0 3px;\n	color: var(--notes-fg);\n	letter-spacing: -0.01em;\n}\n\n.notes-sidebar__meta {\n	font-size: 11px;\n	color: var(--notes-fg-subtle);\n	display: flex;\n	align-items: center;\n	gap: 4px;\n	flex-wrap: wrap;\n}\n\n.notes-sidebar__list {\n	flex: 1;\n	overflow-y: auto;\n	padding: 10px;\n	display: flex;\n	flex-direction: column;\n	gap: 8px;\n}\n\n.notes-sidebar__list::-webkit-scrollbar {\n	width: 8px;\n}\n\n.notes-sidebar__list::-webkit-scrollbar-thumb {\n	background: var(--notes-border);\n	border-radius: 4px;\n}\n\n.notes-sidebar__list::-webkit-scrollbar-thumb:hover {\n	background: var(--notes-border-strong);\n}\n\n.notes-sidebar__empty {\n	padding: 32px 16px;\n	text-align: center;\n	color: var(--notes-fg-subtle);\n	font-size: 12px;\n	line-height: 1.6;\n}\n\n.notes-sidebar__hint {\n	font-size: 11px;\n	color: var(--notes-fg-subtle);\n}\n\n.notes-sidebar__section {\n	font-size: 10px;\n	font-weight: 600;\n	text-transform: uppercase;\n	letter-spacing: 0.06em;\n	color: var(--notes-fg-subtle);\n	margin: 6px 4px 2px;\n}\n\n.notes-sidebar__deleted {\n	margin-top: 4px;\n	border-top: 1px solid var(--notes-border);\n	padding-top: 8px;\n}\n\n.notes-sidebar__deleted summary {\n	font-size: 11px;\n	font-weight: 500;\n	color: var(--notes-fg-muted);\n	cursor: pointer;\n	padding: 4px 4px;\n	user-select: none;\n	list-style: none;\n}\n\n.notes-sidebar__deleted summary::-webkit-details-marker {\n	display: none;\n}\n\n.notes-sidebar__deleted summary::before {\n	content: '▸';\n	display: inline-block;\n	margin-right: 6px;\n	transition: transform 0.15s;\n	font-size: 9px;\n}\n\n.notes-sidebar__deleted[open] summary::before {\n	transform: rotate(90deg);\n}\n\n.notes-sidebar__deleted summary:hover {\n	color: var(--notes-fg);\n}\n\n.notes-sidebar__deleted[open] {\n	display: flex;\n	flex-direction: column;\n	gap: 8px;\n}\n\n/* ──────────────────────────────────────────────────────────────────\n * Item card\n * ────────────────────────────────────────────────────────────────── */\n.notes-item {\n	border: 1px solid var(--notes-border);\n	border-radius: var(--notes-radius);\n	padding: 11px 12px;\n	background: var(--notes-bg);\n	transition: border-color 0.12s, box-shadow 0.12s;\n}\n\n.notes-item:hover {\n	border-color: var(--notes-border-strong);\n}\n\n.notes-item--active {\n	border-color: var(--notes-accent);\n	box-shadow: 0 0 0 3px var(--notes-accent-ring);\n}\n\n.notes-item--resolved {\n	opacity: 0.6;\n}\n\n.notes-item--deleted {\n	opacity: 0.45;\n	background: var(--notes-bg-soft);\n}\n\n.notes-item__head {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	margin-bottom: 7px;\n	gap: 8px;\n}\n\n.notes-item__author {\n	font-weight: 600;\n	font-size: 12px;\n	color: var(--notes-fg);\n}\n\n.notes-item__time {\n	font-size: 10px;\n	color: var(--notes-fg-subtle);\n	white-space: nowrap;\n}\n\n.notes-item__snippet {\n	font-size: 11px;\n	color: var(--notes-fg-muted);\n	background: var(--notes-bg-soft);\n	border-left: 2px solid var(--notes-border);\n	padding: 5px 8px;\n	margin-bottom: 7px;\n	border-radius: 0 3px 3px 0;\n	white-space: pre-wrap;\n	word-break: break-word;\n	max-height: 48px;\n	overflow: hidden;\n}\n\n.notes-item__body {\n	font-size: 12.5px;\n	white-space: pre-wrap;\n	word-break: break-word;\n	color: var(--notes-fg);\n}\n\n.notes-item__actions {\n	display: flex;\n	gap: 5px;\n	margin-top: 10px;\n	padding-top: 9px;\n	border-top: 1px solid var(--notes-border);\n}\n\n.notes-item__badge {\n	display: inline-block;\n	font-size: 9px;\n	font-weight: 600;\n	text-transform: uppercase;\n	letter-spacing: 0.06em;\n	padding: 2px 6px;\n	border-radius: 3px;\n	margin-right: 6px;\n	vertical-align: 1px;\n}\n\n.notes-item__badge--comment {\n	background: var(--notes-accent-soft);\n	color: var(--notes-accent);\n}\n\n.notes-item__badge--suggestion {\n	background: rgba(217, 119, 6, 0.1);\n	color: var(--notes-warn);\n}\n\n.notes-item__badge--resolved {\n	background: rgba(22, 163, 74, 0.1);\n	color: var(--notes-success);\n}\n\n.notes-item__badge--deleted {\n	background: var(--notes-bg-sunken);\n	color: var(--notes-fg-subtle);\n}\n\n.notes-item__history {\n	margin-top: 8px;\n	font-size: 11px;\n}\n\n.notes-item__history summary {\n	cursor: pointer;\n	color: var(--notes-fg-subtle);\n	user-select: none;\n	font-weight: 500;\n	list-style: none;\n}\n\n.notes-item__history summary::-webkit-details-marker {\n	display: none;\n}\n\n.notes-item__history summary::before {\n	content: '▸';\n	display: inline-block;\n	margin-right: 5px;\n	transition: transform 0.15s;\n	font-size: 8px;\n}\n\n.notes-item__history[open] summary::before {\n	transform: rotate(90deg);\n}\n\n.notes-item__history summary:hover {\n	color: var(--notes-fg-muted);\n}\n\n.notes-item__history ul {\n	list-style: none;\n	padding: 6px 0 0 14px;\n	margin: 0;\n}\n\n.notes-item__history li {\n	padding: 3px 0;\n	color: var(--notes-fg-muted);\n}\n\n.notes-item__history-action {\n	font-weight: 600;\n	color: var(--notes-fg);\n	text-transform: capitalize;\n}\n\n.notes-item__history-meta {\n	color: var(--notes-fg-subtle);\n}\n\n.notes-item__history-note {\n	color: var(--notes-fg-subtle);\n	font-style: italic;\n	padding-left: 8px;\n	margin-top: 1px;\n	font-size: 10px;\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n\n/* ──────────────────────────────────────────────────────────────────\n * Element highlight ring\n * ────────────────────────────────────────────────────────────────── */\n.notes-highlight {\n	position: fixed;\n	pointer-events: none;\n	border: 2px solid var(--notes-accent);\n	border-radius: 3px;\n	box-shadow: 0 0 0 3px var(--notes-accent-ring);\n	transition: all 0.08s ease-out;\n}\n\n.notes-highlight--persistent {\n	border-color: rgba(37, 99, 235, 0.55);\n	box-shadow: 0 0 0 3px var(--notes-accent-soft);\n}\n\n/* ──────────────────────────────────────────────────────────────────\n * Popover (comment + suggest)\n * ────────────────────────────────────────────────────────────────── */\n.notes-popover {\n	position: fixed;\n	width: 320px;\n	background: var(--notes-bg);\n	border: 1px solid var(--notes-border);\n	border-radius: var(--notes-radius);\n	box-shadow: var(--notes-shadow-lg);\n	padding: 14px;\n	pointer-events: auto;\n	display: flex;\n	flex-direction: column;\n	gap: 10px;\n}\n\n.notes-popover__title {\n	font-size: 12px;\n	font-weight: 600;\n	margin: 0;\n	color: var(--notes-fg);\n	letter-spacing: -0.01em;\n}\n\n.notes-popover__snippet {\n	font-size: 11px;\n	color: var(--notes-fg-muted);\n	background: var(--notes-bg-soft);\n	border-left: 2px solid var(--notes-border);\n	padding: 6px 8px;\n	border-radius: 0 3px 3px 0;\n	max-height: 60px;\n	overflow: hidden;\n}\n\n.notes-popover textarea {\n	width: 100%;\n	min-height: 78px;\n	resize: vertical;\n	border: 1px solid var(--notes-border);\n	border-radius: var(--notes-radius-sm);\n	padding: 8px 10px;\n	background: var(--notes-bg);\n	outline: none;\n	font-size: 12.5px;\n	line-height: 1.5;\n}\n\n.notes-popover textarea:focus {\n	border-color: var(--notes-accent);\n	box-shadow: 0 0 0 3px var(--notes-accent-ring);\n}\n\n.notes-popover input[type='text'] {\n	border: 1px solid var(--notes-border);\n	border-radius: var(--notes-radius-sm);\n	padding: 6px 10px;\n	background: var(--notes-bg);\n	outline: none;\n	font-size: 12px;\n	width: 100%;\n}\n\n.notes-popover input[type='text']:focus {\n	border-color: var(--notes-accent);\n	box-shadow: 0 0 0 3px var(--notes-accent-ring);\n}\n\n.notes-popover__row {\n	display: flex;\n	justify-content: space-between;\n	align-items: center;\n	gap: 8px;\n}\n\n/* Selection tooltip */\n.notes-selection-tooltip {\n	position: fixed;\n	display: flex;\n	align-items: center;\n	gap: 4px;\n	padding: 4px 5px;\n	background: #0f172a;\n	color: #ffffff;\n	border-radius: 6px;\n	box-shadow: var(--notes-shadow);\n	pointer-events: auto;\n	z-index: calc(var(--notes-z) + 5);\n}\n\n.notes-selection-tooltip .notes-btn {\n	background: rgba(255, 255, 255, 0.06);\n	color: #ffffff;\n	font-size: 11px;\n	padding: 4px 9px;\n}\n\n.notes-selection-tooltip .notes-btn:hover {\n	background: rgba(255, 255, 255, 0.14);\n}\n\n.notes-selection-tooltip .notes-btn--primary {\n	background: var(--notes-accent);\n	color: var(--notes-accent-fg);\n}\n\n.notes-selection-tooltip .notes-btn--primary:hover {\n	background: var(--notes-accent-hover);\n}\n\n.notes-selection-tooltip .notes-btn--ghost {\n	color: #e2e8f0;\n}\n\n.notes-selection-tooltip .notes-btn--ghost:hover {\n	background: rgba(255, 255, 255, 0.14);\n	color: #ffffff;\n}\n\n/* Suggest popover variations */\n.notes-popover--suggest {\n	width: 360px;\n}\n\n.notes-popover__label {\n	display: block;\n	font-size: 10px;\n	font-weight: 600;\n	text-transform: uppercase;\n	letter-spacing: 0.06em;\n	color: var(--notes-fg-subtle);\n	margin-bottom: 4px;\n}\n\n.notes-popover__original {\n	background: var(--notes-warn-soft);\n	border: 1px solid var(--notes-warn-border);\n	border-radius: var(--notes-radius-sm);\n	padding: 8px 10px;\n	font-size: 12px;\n	color: #78350f;\n	max-height: 80px;\n	overflow-y: auto;\n	white-space: pre-wrap;\n	word-break: break-word;\n}\n\n.notes-strikethrough {\n	text-decoration: line-through;\n	text-decoration-color: rgba(220, 38, 38, 0.55);\n	text-decoration-thickness: 1.5px;\n}\n\n/* ──────────────────────────────────────────────────────────────────\n * Diff preview\n * ────────────────────────────────────────────────────────────────── */\n.notes-diff {\n	font-size: 12px;\n	border-radius: var(--notes-radius-sm);\n	background: var(--notes-bg-soft);\n	border: 1px solid var(--notes-border);\n	overflow: hidden;\n	margin-bottom: 8px;\n}\n\n.notes-diff__row {\n	padding: 6px 10px;\n	display: flex;\n	gap: 6px;\n	white-space: pre-wrap;\n	word-break: break-word;\n	line-height: 1.5;\n}\n\n.notes-diff__row--del {\n	background: #fef2f2;\n	color: #7f1d1d;\n	border-bottom: 1px solid #fee2e2;\n}\n\n.notes-diff__row--ins {\n	background: #f0fdf4;\n	color: #14532d;\n}\n\n.notes-diff__marker {\n	font-weight: 700;\n	font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;\n	width: 11px;\n	flex-shrink: 0;\n	text-align: center;\n	font-size: 11px;\n}\n\n.notes-item__rationale {\n	font-size: 11px;\n	color: var(--notes-fg-muted);\n	margin-bottom: 6px;\n	font-style: italic;\n}\n\n.notes-item__rationale-label {\n	font-style: normal;\n	font-weight: 600;\n	color: var(--notes-fg);\n	margin-right: 4px;\n}\n\n/* Stale warning */\n.notes-stale {\n	display: flex;\n	align-items: center;\n	gap: 6px;\n	background: var(--notes-warn-soft);\n	border: 1px solid var(--notes-warn-border);\n	color: #92400e;\n	font-size: 11px;\n	padding: 5px 8px;\n	border-radius: var(--notes-radius-sm);\n	margin-bottom: 8px;\n}\n\n.notes-stale__icon {\n	font-size: 12px;\n}\n\n/* Persistent highlight variant for suggestion ranges */\n.notes-highlight--suggestion {\n	border-color: rgba(217, 119, 6, 0.85);\n	box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.18);\n	background: rgba(254, 243, 199, 0.25);\n}\n\n/* Banner shown when notes API fails to load */\n.notes-banner {\n	padding: 9px 12px;\n	background: var(--notes-danger-soft);\n	border: 1px solid #fecaca;\n	color: #991b1b;\n	border-radius: var(--notes-radius-sm);\n	font-size: 12px;\n	pointer-events: auto;\n}\n";
 function init() {
   if (window.__nuasiteNotesMounted) return;
   const config = window.__NuaNotesConfig ?? {};
   const urlFlag = config.urlFlag ?? "nua-notes";
+  const agencyFlag = config.agencyFlag ?? "nua-agency";
   if (!isReviewMode(urlFlag)) return;
   window.__nuasiteNotesMounted = true;
   setReviewModeCookie();
@@ -1356,7 +1518,7 @@ function init() {
   const root = document.createElement("div");
   root.id = "nua-notes-root";
   shadow.appendChild(root);
-  R(/* @__PURE__ */ u$1(App, { urlFlag }), root);
+  R(/* @__PURE__ */ u$1(App, { urlFlag, agencyFlag }), root);
 }
 if (typeof window !== "undefined") {
   if (document.readyState === "loading") {

package/package.json

@@ -14,7 +14,7 @@
     "directory": "packages/notes"
   },
   "license": "Apache-2.0",
-  "version": "0.22.2",
+  "version": "0.22.3",
   "module": "src/index.ts",
   "types": "src/index.ts",
   "type": "module",