From c48ad428141f88dc8e3c68408d0b8c386f38e184 Mon Sep 17 00:00:00 2001 From: Nicolas Jesenberger Date: Mon, 16 Mar 2026 21:24:14 +0100 Subject: [PATCH 1/3] refactor: cursor css --- .../src/components/page-toolbar-css/index.tsx | 55 ++++++------------- .../page-toolbar-css/styles.module.scss | 7 --- 2 files changed, 16 insertions(+), 46 deletions(-) diff --git a/package/src/components/page-toolbar-css/index.tsx b/package/src/components/page-toolbar-css/index.tsx index d49d2c7..313128a 100644 --- a/package/src/components/page-toolbar-css/index.tsx +++ b/package/src/components/page-toolbar-css/index.tsx @@ -1480,46 +1480,29 @@ const [settings, setSettings] = useState(() => { useEffect(() => { if (!isActive) return; + const textElementsSelector = [ + "p", "span", "h1", "h2", "h3", "h4", "h5", "h6", + "li", "td", "th", "label", "blockquote", "figcaption", + "caption", "legend", "dt", "dd", "pre", "code", + "em", "strong", "b", "i", "u", "s", "a", + "time", "address", "cite", "q", "abbr", "dfn", + "mark", "small", "sub", "sup", "[contenteditable]" + ].join(", "); + + const notAgentationSelector = `:not([data-agentation-root]):not([data-agentation-root] *)`; + const style = document.createElement("style"); style.id = "feedback-cursor-styles"; // Text elements get text cursor (higher specificity with body prefix) // Everything else gets crosshair style.textContent = ` - body * { + body ${notAgentationSelector} { cursor: crosshair !important; } - body p, body span, body h1, body h2, body h3, body h4, body h5, body h6, - body li, body td, body th, body label, body blockquote, body figcaption, - body caption, body legend, body dt, body dd, body pre, body code, - body em, body strong, body b, body i, body u, body s, body a, - body time, body address, body cite, body q, body abbr, body dfn, - body mark, body small, body sub, body sup, body [contenteditable], - body p *, body span *, body h1 *, body h2 *, body h3 *, body h4 *, - body h5 *, body h6 *, body li *, body a *, body label *, body pre *, - body code *, body blockquote *, body [contenteditable] * { - cursor: text !important; - } - [data-feedback-toolbar], [data-feedback-toolbar] * { - cursor: auto !important; - } - [data-feedback-toolbar] textarea, - [data-feedback-toolbar] input[type="text"], - [data-feedback-toolbar] input[type="url"] { + + body :is(${textElementsSelector})${notAgentationSelector} { cursor: text !important; } - [data-feedback-toolbar] button, - [data-feedback-toolbar] button *, - [data-feedback-toolbar] label, - [data-feedback-toolbar] label *, - [data-feedback-toolbar] a, - [data-feedback-toolbar] a *, - [data-feedback-toolbar] [role="button"], - [data-feedback-toolbar] [role="button"] * { - cursor: pointer !important; - } - [data-annotation-marker], [data-annotation-marker] * { - cursor: pointer !important; - } `; document.head.appendChild(style); @@ -2998,7 +2981,7 @@ const [settings, setSettings] = useState(() => { }; return createPortal( -
+
{/* Toolbar */}
(() => { > {/* Morphing container */}
{ @@ -3034,12 +3017,6 @@ const [settings, setSettings] = useState(() => { role={!isActive ? "button" : undefined} tabIndex={!isActive ? 0 : -1} title={!isActive ? "Start feedback mode" : undefined} - style={{ - ...(isDraggingToolbar && { - transform: `scale(1.05) rotate(${dragRotation}deg)`, - cursor: "grabbing", - }), - }} > {/* Toggle content - visible when collapsed */}
Date: Mon, 16 Mar 2026 21:47:23 +0100 Subject: [PATCH 2/3] cleanup cursor styles --- package/example/src/app/globals.scss | 1 - .../src/components/annotation-popup-css/styles.module.scss | 1 - package/src/components/page-toolbar-css/styles.module.scss | 7 +++---- 3 files changed, 3 insertions(+), 6 deletions(-) diff --git a/package/example/src/app/globals.scss b/package/example/src/app/globals.scss index e4a1d00..877ce65 100644 --- a/package/example/src/app/globals.scss +++ b/package/example/src/app/globals.scss @@ -147,7 +147,6 @@ button { -webkit-tap-highlight-color: transparent; &:disabled { - pointer-events: none; cursor: not-allowed; } } diff --git a/package/src/components/annotation-popup-css/styles.module.scss b/package/src/components/annotation-popup-css/styles.module.scss index c737f31..0bdacdc 100644 --- a/package/src/components/annotation-popup-css/styles.module.scss +++ b/package/src/components/annotation-popup-css/styles.module.scss @@ -74,7 +74,6 @@ box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08); - cursor: default; z-index: 100001; font-family: system-ui, diff --git a/package/src/components/page-toolbar-css/styles.module.scss b/package/src/components/page-toolbar-css/styles.module.scss index 814c221..6a398b6 100644 --- a/package/src/components/page-toolbar-css/styles.module.scss +++ b/package/src/components/page-toolbar-css/styles.module.scss @@ -399,7 +399,7 @@ .controlButton { position: relative; - cursor: pointer !important; + cursor: pointer; display: flex; align-items: center; justify-content: center; @@ -464,7 +464,7 @@ &[data-no-hover="true"], &.statusShowing { - cursor: default !important; + cursor: default; pointer-events: none; background: transparent !important; } @@ -1026,6 +1026,7 @@ &.pending { position: fixed; background-color: var(--agentation-color-blue); + cursor: default; } &.fixed { @@ -1494,7 +1495,6 @@ color: #fff; outline: none; resize: none; - cursor: text !important; user-select: text; transition: border-color 0.15s ease, @@ -2031,7 +2031,6 @@ &.disabled { opacity: 0.4; - pointer-events: none; .toggleSlider { cursor: not-allowed; From 406e2fb11677aba47927afe37e7d47ef65462bab Mon Sep 17 00:00:00 2001 From: Nicolas Jesenberger Date: Mon, 16 Mar 2026 21:50:06 +0100 Subject: [PATCH 3/3] remove: drag rotation --- package/src/components/page-toolbar-css/index.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/package/src/components/page-toolbar-css/index.tsx b/package/src/components/page-toolbar-css/index.tsx index 313128a..413dc6c 100644 --- a/package/src/components/page-toolbar-css/index.tsx +++ b/package/src/components/page-toolbar-css/index.tsx @@ -721,7 +721,6 @@ const [settings, setSettings] = useState(() => { toolbarX: number; toolbarY: number; } | null>(null); - const [dragRotation, setDragRotation] = useState(0); const justFinishedToolbarDragRef = useRef(false); // For animations - track which markers have animated in and which are exiting @@ -2758,10 +2757,6 @@ const [settings, setSettings] = useState(() => { const currentX = toolbarPosition?.x ?? rect.left; const currentY = toolbarPosition?.y ?? rect.top; - // Generate random rotation between -5 and 5 degrees - const randomRotation = (Math.random() - 0.5) * 10; // -5 to +5 - setDragRotation(randomRotation); - setDragStartPos({ x: e.clientX, y: e.clientY,