agentation 1.2.0 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +229 -154
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +229 -154
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -72,8 +72,8 @@ var import_react_dom = require("react-dom");
|
|
|
72
72
|
var import_react = require("react");
|
|
73
73
|
|
|
74
74
|
// src/components/annotation-popup-css/styles.module.scss
|
|
75
|
-
var css = '@keyframes styles-module__popupEnter___AuQDN {\n from {\n opacity: 0;\n transform: translateX(-50%) scale(0.95) translateY(4px);\n }\n to {\n opacity: 1;\n transform: translateX(-50%) scale(1) translateY(0);\n }\n}\n@keyframes styles-module__popupExit___JJKQX {\n from {\n opacity: 1;\n transform: translateX(-50%) scale(1) translateY(0);\n }\n to {\n opacity: 0;\n transform: translateX(-50%) scale(0.95) translateY(4px);\n }\n}\n@keyframes styles-module__shake___jdbWe {\n 0%, 100% {\n transform: translateX(-50%) scale(1) translateY(0) translateX(0);\n }\n 20% {\n transform: translateX(-50%) scale(1) translateY(0) translateX(-3px);\n }\n 40% {\n transform: translateX(-50%) scale(1) translateY(0) translateX(3px);\n }\n 60% {\n transform: translateX(-50%) scale(1) translateY(0) translateX(-2px);\n }\n 80% {\n transform: translateX(-50%) scale(1) translateY(0) translateX(2px);\n }\n}\n.styles-module__popup___IhzrD {\n position: fixed;\n transform: translateX(-50%);\n width: 280px;\n padding: 0.75rem 1rem 14px;\n background: #1a1a1a;\n border-radius: 16px;\n box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08);\n cursor: default;\n z-index: 100001;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;\n will-change: transform, opacity;\n
|
|
76
|
-
var classNames = { "popup": "styles-module__popup___IhzrD", "enter": "styles-module__enter___L7U7N", "popupEnter": "styles-module__popupEnter___AuQDN", "entered": "styles-module__entered___COX-w", "exit": "styles-module__exit___5eGjE", "popupExit": "styles-module__popupExit___JJKQX", "shake": "styles-module__shake___jdbWe", "header": "styles-module__header___wWsSi", "element": "styles-module__element___fTV2z", "timestamp": "styles-module__timestamp___Dtpsv", "quote": "styles-module__quote___mcMmQ", "textarea": "styles-module__textarea___jrSae", "green": "styles-module__green___99l3h", "actions": "styles-module__actions___D6x3f", "cancel": "styles-module__cancel___hRjnL", "submit": "styles-module__submit___K-mIR", "light": "styles-module__light___6AaSQ" };
|
|
75
|
+
var css = '@keyframes styles-module__popupEnter___AuQDN {\n from {\n opacity: 0;\n transform: translateX(-50%) scale(0.95) translateY(4px);\n }\n to {\n opacity: 1;\n transform: translateX(-50%) scale(1) translateY(0);\n }\n}\n@keyframes styles-module__popupExit___JJKQX {\n from {\n opacity: 1;\n transform: translateX(-50%) scale(1) translateY(0);\n }\n to {\n opacity: 0;\n transform: translateX(-50%) scale(0.95) translateY(4px);\n }\n}\n@keyframes styles-module__shake___jdbWe {\n 0%, 100% {\n transform: translateX(-50%) scale(1) translateY(0) translateX(0);\n }\n 20% {\n transform: translateX(-50%) scale(1) translateY(0) translateX(-3px);\n }\n 40% {\n transform: translateX(-50%) scale(1) translateY(0) translateX(3px);\n }\n 60% {\n transform: translateX(-50%) scale(1) translateY(0) translateX(-2px);\n }\n 80% {\n transform: translateX(-50%) scale(1) translateY(0) translateX(2px);\n }\n}\n.styles-module__popup___IhzrD {\n position: fixed;\n transform: translateX(-50%);\n width: 280px;\n padding: 0.75rem 1rem 14px;\n background: #1a1a1a;\n border-radius: 16px;\n box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08);\n cursor: default;\n z-index: 100001;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;\n will-change: transform, opacity;\n opacity: 0;\n}\n.styles-module__popup___IhzrD.styles-module__enter___L7U7N {\n animation: styles-module__popupEnter___AuQDN 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;\n}\n.styles-module__popup___IhzrD.styles-module__entered___COX-w {\n opacity: 1;\n transform: translateX(-50%) scale(1) translateY(0);\n}\n.styles-module__popup___IhzrD.styles-module__exit___5eGjE {\n animation: styles-module__popupExit___JJKQX 0.15s ease-in forwards;\n}\n.styles-module__popup___IhzrD.styles-module__entered___COX-w.styles-module__shake___jdbWe {\n animation: styles-module__shake___jdbWe 0.25s ease-out;\n}\n\n.styles-module__header___wWsSi {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 0.5rem;\n}\n\n.styles-module__element___fTV2z {\n font-size: 0.75rem;\n font-weight: 500;\n color: rgba(255, 255, 255, 0.65);\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex: 1;\n}\n\n.styles-module__headerToggle___WpW0b {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n flex: 1;\n min-width: 0;\n text-align: left;\n}\n.styles-module__headerToggle___WpW0b .styles-module__element___fTV2z {\n flex: 1;\n}\n\n.styles-module__chevron___ZZJlR {\n color: rgba(255, 255, 255, 0.5);\n transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);\n flex-shrink: 0;\n}\n.styles-module__chevron___ZZJlR.styles-module__expanded___2Hxgv {\n transform: rotate(90deg);\n}\n\n.styles-module__stylesWrapper___pnHgy {\n display: grid;\n grid-template-rows: 0fr;\n transition: grid-template-rows 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n}\n.styles-module__stylesWrapper___pnHgy.styles-module__expanded___2Hxgv {\n grid-template-rows: 1fr;\n}\n\n.styles-module__stylesInner___YYZe2 {\n overflow: hidden;\n}\n\n.styles-module__stylesBlock___VfQKn {\n background: rgba(255, 255, 255, 0.05);\n border-radius: 0.375rem;\n padding: 0.5rem 0.625rem;\n margin-bottom: 0.5rem;\n font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;\n font-size: 0.6875rem;\n line-height: 1.5;\n}\n\n.styles-module__styleLine___1YQiD {\n color: rgba(255, 255, 255, 0.85);\n word-break: break-word;\n}\n\n.styles-module__styleProperty___84L1i {\n color: #c792ea;\n}\n\n.styles-module__styleValue___q51-h {\n color: rgba(255, 255, 255, 0.85);\n}\n\n.styles-module__timestamp___Dtpsv {\n font-size: 0.625rem;\n font-weight: 500;\n color: rgba(255, 255, 255, 0.35);\n font-variant-numeric: tabular-nums;\n margin-left: 0.5rem;\n flex-shrink: 0;\n}\n\n.styles-module__quote___mcMmQ {\n font-size: 0.6875rem;\n font-style: italic;\n color: rgba(255, 255, 255, 0.5);\n margin-bottom: 0.5rem;\n padding: 0.4rem 0.5rem;\n background: rgba(255, 255, 255, 0.05);\n border-radius: 0.25rem;\n line-height: 1.45;\n}\n\n.styles-module__textarea___jrSae {\n width: 100%;\n padding: 0.5rem 0.625rem;\n font-size: 0.8125rem;\n font-family: inherit;\n background: rgba(255, 255, 255, 0.05);\n color: #fff;\n border: 1px solid rgba(255, 255, 255, 0.15);\n border-radius: 8px;\n resize: none;\n outline: none;\n transition: border-color 0.15s ease;\n}\n.styles-module__textarea___jrSae:focus {\n border-color: #3c82f7;\n}\n.styles-module__textarea___jrSae.styles-module__green___99l3h:focus {\n border-color: #34C759;\n}\n.styles-module__textarea___jrSae::placeholder {\n color: rgba(255, 255, 255, 0.35);\n}\n.styles-module__textarea___jrSae::-webkit-scrollbar {\n width: 6px;\n}\n.styles-module__textarea___jrSae::-webkit-scrollbar-track {\n background: transparent;\n}\n.styles-module__textarea___jrSae::-webkit-scrollbar-thumb {\n background: rgba(255, 255, 255, 0.2);\n border-radius: 3px;\n}\n\n.styles-module__actions___D6x3f {\n display: flex;\n justify-content: flex-end;\n gap: 0.375rem;\n margin-top: 0.5rem;\n}\n\n.styles-module__cancel___hRjnL,\n.styles-module__submit___K-mIR {\n padding: 0.4rem 0.875rem;\n font-size: 0.75rem;\n font-weight: 500;\n border-radius: 1rem;\n border: none;\n cursor: pointer;\n transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;\n}\n\n.styles-module__cancel___hRjnL {\n background: transparent;\n color: rgba(255, 255, 255, 0.5);\n}\n.styles-module__cancel___hRjnL:hover {\n background: rgba(255, 255, 255, 0.1);\n color: rgba(255, 255, 255, 0.8);\n}\n\n.styles-module__submit___K-mIR {\n color: white;\n}\n.styles-module__submit___K-mIR:hover:not(:disabled) {\n filter: brightness(0.9);\n}\n.styles-module__submit___K-mIR:disabled {\n cursor: not-allowed;\n}\n\n.styles-module__light___6AaSQ.styles-module__popup___IhzrD {\n background: #fff;\n box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);\n}\n.styles-module__light___6AaSQ .styles-module__element___fTV2z {\n color: rgba(0, 0, 0, 0.6);\n}\n.styles-module__light___6AaSQ .styles-module__timestamp___Dtpsv {\n color: rgba(0, 0, 0, 0.4);\n}\n.styles-module__light___6AaSQ .styles-module__chevron___ZZJlR {\n color: rgba(0, 0, 0, 0.4);\n}\n.styles-module__light___6AaSQ .styles-module__stylesBlock___VfQKn {\n background: rgba(0, 0, 0, 0.03);\n}\n.styles-module__light___6AaSQ .styles-module__styleLine___1YQiD {\n color: rgba(0, 0, 0, 0.75);\n}\n.styles-module__light___6AaSQ .styles-module__styleProperty___84L1i {\n color: #7c3aed;\n}\n.styles-module__light___6AaSQ .styles-module__styleValue___q51-h {\n color: rgba(0, 0, 0, 0.75);\n}\n.styles-module__light___6AaSQ .styles-module__quote___mcMmQ {\n color: rgba(0, 0, 0, 0.55);\n background: rgba(0, 0, 0, 0.04);\n}\n.styles-module__light___6AaSQ .styles-module__textarea___jrSae {\n background: rgba(0, 0, 0, 0.03);\n color: #1a1a1a;\n border-color: rgba(0, 0, 0, 0.12);\n}\n.styles-module__light___6AaSQ .styles-module__textarea___jrSae::placeholder {\n color: rgba(0, 0, 0, 0.4);\n}\n.styles-module__light___6AaSQ .styles-module__textarea___jrSae::-webkit-scrollbar-thumb {\n background: rgba(0, 0, 0, 0.15);\n}\n.styles-module__light___6AaSQ .styles-module__cancel___hRjnL {\n color: rgba(0, 0, 0, 0.5);\n}\n.styles-module__light___6AaSQ .styles-module__cancel___hRjnL:hover {\n background: rgba(0, 0, 0, 0.06);\n color: rgba(0, 0, 0, 0.75);\n}';
|
|
76
|
+
var classNames = { "popup": "styles-module__popup___IhzrD", "enter": "styles-module__enter___L7U7N", "popupEnter": "styles-module__popupEnter___AuQDN", "entered": "styles-module__entered___COX-w", "exit": "styles-module__exit___5eGjE", "popupExit": "styles-module__popupExit___JJKQX", "shake": "styles-module__shake___jdbWe", "header": "styles-module__header___wWsSi", "element": "styles-module__element___fTV2z", "headerToggle": "styles-module__headerToggle___WpW0b", "chevron": "styles-module__chevron___ZZJlR", "expanded": "styles-module__expanded___2Hxgv", "stylesWrapper": "styles-module__stylesWrapper___pnHgy", "stylesInner": "styles-module__stylesInner___YYZe2", "stylesBlock": "styles-module__stylesBlock___VfQKn", "styleLine": "styles-module__styleLine___1YQiD", "styleProperty": "styles-module__styleProperty___84L1i", "styleValue": "styles-module__styleValue___q51-h", "timestamp": "styles-module__timestamp___Dtpsv", "quote": "styles-module__quote___mcMmQ", "textarea": "styles-module__textarea___jrSae", "green": "styles-module__green___99l3h", "actions": "styles-module__actions___D6x3f", "cancel": "styles-module__cancel___hRjnL", "submit": "styles-module__submit___K-mIR", "light": "styles-module__light___6AaSQ" };
|
|
77
77
|
if (typeof document !== "undefined") {
|
|
78
78
|
let style = document.getElementById("feedback-tool-styles-annotation-popup-css-styles");
|
|
79
79
|
if (!style) {
|
|
@@ -100,12 +100,14 @@ var AnnotationPopupCSS = (0, import_react.forwardRef)(
|
|
|
100
100
|
style,
|
|
101
101
|
accentColor = "#3c82f7",
|
|
102
102
|
isExiting = false,
|
|
103
|
-
lightMode = false
|
|
103
|
+
lightMode = false,
|
|
104
|
+
computedStyles
|
|
104
105
|
}, ref) {
|
|
105
106
|
const [text, setText] = (0, import_react.useState)(initialValue);
|
|
106
107
|
const [isShaking, setIsShaking] = (0, import_react.useState)(false);
|
|
107
108
|
const [animState, setAnimState] = (0, import_react.useState)("initial");
|
|
108
109
|
const [isFocused, setIsFocused] = (0, import_react.useState)(false);
|
|
110
|
+
const [isStylesExpanded, setIsStylesExpanded] = (0, import_react.useState)(false);
|
|
109
111
|
const textareaRef = (0, import_react.useRef)(null);
|
|
110
112
|
const popupRef = (0, import_react.useRef)(null);
|
|
111
113
|
(0, import_react.useEffect)(() => {
|
|
@@ -183,9 +185,52 @@ var AnnotationPopupCSS = (0, import_react.forwardRef)(
|
|
|
183
185
|
onClick: (e) => e.stopPropagation(),
|
|
184
186
|
children: [
|
|
185
187
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles_module_default.header, children: [
|
|
186
|
-
/* @__PURE__ */ (0, import_jsx_runtime.
|
|
188
|
+
computedStyles && Object.keys(computedStyles).length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
189
|
+
"button",
|
|
190
|
+
{
|
|
191
|
+
className: styles_module_default.headerToggle,
|
|
192
|
+
onClick: () => {
|
|
193
|
+
const wasExpanded = isStylesExpanded;
|
|
194
|
+
setIsStylesExpanded(!isStylesExpanded);
|
|
195
|
+
if (wasExpanded) {
|
|
196
|
+
setTimeout(() => textareaRef.current?.focus(), 0);
|
|
197
|
+
}
|
|
198
|
+
},
|
|
199
|
+
type: "button",
|
|
200
|
+
children: [
|
|
201
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
202
|
+
"svg",
|
|
203
|
+
{
|
|
204
|
+
className: `${styles_module_default.chevron} ${isStylesExpanded ? styles_module_default.expanded : ""}`,
|
|
205
|
+
width: "14",
|
|
206
|
+
height: "14",
|
|
207
|
+
viewBox: "0 0 14 14",
|
|
208
|
+
fill: "none",
|
|
209
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
210
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
211
|
+
"path",
|
|
212
|
+
{
|
|
213
|
+
d: "M5.5 10.25L9 7.25L5.75 4",
|
|
214
|
+
stroke: "currentColor",
|
|
215
|
+
strokeWidth: "1.5",
|
|
216
|
+
strokeLinecap: "round",
|
|
217
|
+
strokeLinejoin: "round"
|
|
218
|
+
}
|
|
219
|
+
)
|
|
220
|
+
}
|
|
221
|
+
),
|
|
222
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles_module_default.element, children: element })
|
|
223
|
+
]
|
|
224
|
+
}
|
|
225
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles_module_default.element, children: element }),
|
|
187
226
|
timestamp && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles_module_default.timestamp, children: timestamp })
|
|
188
227
|
] }),
|
|
228
|
+
computedStyles && Object.keys(computedStyles).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${styles_module_default.stylesWrapper} ${isStylesExpanded ? styles_module_default.expanded : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles_module_default.stylesInner, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles_module_default.stylesBlock, children: Object.entries(computedStyles).map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles_module_default.styleLine, children: [
|
|
229
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles_module_default.styleProperty, children: key.replace(/([A-Z])/g, "-$1").toLowerCase() }),
|
|
230
|
+
": ",
|
|
231
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles_module_default.styleValue, children: value }),
|
|
232
|
+
";"
|
|
233
|
+
] }, key)) }) }) }),
|
|
189
234
|
selectedText && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles_module_default.quote, children: [
|
|
190
235
|
"\u201C",
|
|
191
236
|
selectedText.slice(0, 80),
|
|
@@ -691,61 +736,13 @@ var IconPlayAlt = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx
|
|
|
691
736
|
strokeWidth: "1.5"
|
|
692
737
|
}
|
|
693
738
|
) });
|
|
694
|
-
var IconTrashAlt = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime2.
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
strokeWidth: "1.5",
|
|
702
|
-
strokeLinecap: "round",
|
|
703
|
-
strokeLinejoin: "round"
|
|
704
|
-
}
|
|
705
|
-
),
|
|
706
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
707
|
-
"path",
|
|
708
|
-
{
|
|
709
|
-
d: "M14 11.5L13.87 15.5",
|
|
710
|
-
stroke: "currentColor",
|
|
711
|
-
strokeOpacity: "1",
|
|
712
|
-
strokeWidth: "1.5",
|
|
713
|
-
strokeLinecap: "round",
|
|
714
|
-
strokeLinejoin: "round"
|
|
715
|
-
}
|
|
716
|
-
),
|
|
717
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
718
|
-
"path",
|
|
719
|
-
{
|
|
720
|
-
d: "M9 7.5V6.25C9 5.42157 9.67157 4.75 10.5 4.75H13.5C14.3284 4.75 15 5.42157 15 6.25V7.5",
|
|
721
|
-
stroke: "currentColor",
|
|
722
|
-
strokeOpacity: "1",
|
|
723
|
-
strokeWidth: "1.5",
|
|
724
|
-
strokeLinecap: "round",
|
|
725
|
-
strokeLinejoin: "round"
|
|
726
|
-
}
|
|
727
|
-
),
|
|
728
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
729
|
-
"path",
|
|
730
|
-
{
|
|
731
|
-
d: "M5.5 7.75H18.5",
|
|
732
|
-
stroke: "currentColor",
|
|
733
|
-
strokeOpacity: "1",
|
|
734
|
-
strokeWidth: "1.5",
|
|
735
|
-
strokeLinecap: "round"
|
|
736
|
-
}
|
|
737
|
-
),
|
|
738
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
739
|
-
"path",
|
|
740
|
-
{
|
|
741
|
-
d: "M6.75 7.75L7.11691 16.189C7.16369 17.2649 7.18708 17.8028 7.41136 18.2118C7.60875 18.5717 7.91211 18.8621 8.28026 19.0437C8.69854 19.25 9.23699 19.25 10.3139 19.25H13.6861C14.763 19.25 15.3015 19.25 15.7197 19.0437C16.0879 18.8621 16.3912 18.5717 16.5886 18.2118C16.8129 17.8028 16.8363 17.2649 16.8831 16.189L17.25 7.75",
|
|
742
|
-
stroke: "currentColor",
|
|
743
|
-
strokeOpacity: "1",
|
|
744
|
-
strokeWidth: "1.5",
|
|
745
|
-
strokeLinecap: "round"
|
|
746
|
-
}
|
|
747
|
-
)
|
|
748
|
-
] });
|
|
739
|
+
var IconTrashAlt = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
740
|
+
"path",
|
|
741
|
+
{
|
|
742
|
+
d: "M13.5 4C14.7426 4 15.75 5.00736 15.75 6.25V7H18.5C18.9142 7 19.25 7.33579 19.25 7.75C19.25 8.16421 18.9142 8.5 18.5 8.5H17.9678L17.6328 16.2217C17.61 16.7475 17.5912 17.1861 17.5469 17.543C17.5015 17.9087 17.4225 18.2506 17.2461 18.5723C16.9747 19.0671 16.5579 19.4671 16.0518 19.7168C15.7227 19.8791 15.3772 19.9422 15.0098 19.9717C14.6514 20.0004 14.2126 20 13.6865 20H10.3135C9.78735 20 9.34856 20.0004 8.99023 19.9717C8.62278 19.9422 8.27729 19.8791 7.94824 19.7168C7.44205 19.4671 7.02532 19.0671 6.75391 18.5723C6.57751 18.2506 6.49853 17.9087 6.45312 17.543C6.40883 17.1861 6.39005 16.7475 6.36719 16.2217L6.03223 8.5H5.5C5.08579 8.5 4.75 8.16421 4.75 7.75C4.75 7.33579 5.08579 7 5.5 7H8.25V6.25C8.25 5.00736 9.25736 4 10.5 4H13.5ZM7.86621 16.1562C7.89013 16.7063 7.90624 17.0751 7.94141 17.3584C7.97545 17.6326 8.02151 17.7644 8.06934 17.8516C8.19271 18.0763 8.38239 18.2577 8.6123 18.3711C8.70153 18.4151 8.83504 18.4545 9.11035 18.4766C9.39482 18.4994 9.76335 18.5 10.3135 18.5H13.6865C14.2367 18.5 14.6052 18.4994 14.8896 18.4766C15.165 18.4545 15.2985 18.4151 15.3877 18.3711C15.6176 18.2577 15.8073 18.0763 15.9307 17.8516C15.9785 17.7644 16.0245 17.6326 16.0586 17.3584C16.0938 17.0751 16.1099 16.7063 16.1338 16.1562L16.4668 8.5H7.5332L7.86621 16.1562ZM9.97656 10.75C10.3906 10.7371 10.7371 11.0626 10.75 11.4766L10.875 15.4766C10.8879 15.8906 10.5624 16.2371 10.1484 16.25C9.73443 16.2629 9.38794 15.9374 9.375 15.5234L9.25 11.5234C9.23706 11.1094 9.56255 10.7629 9.97656 10.75ZM14.0244 10.75C14.4384 10.7635 14.7635 11.1105 14.75 11.5244L14.6201 15.5244C14.6066 15.9384 14.2596 16.2634 13.8457 16.25C13.4317 16.2365 13.1067 15.8896 13.1201 15.4756L13.251 11.4756C13.2645 11.0617 13.6105 10.7366 14.0244 10.75ZM10.5 5.5C10.0858 5.5 9.75 5.83579 9.75 6.25V7H14.25V6.25C14.25 5.83579 13.9142 5.5 13.5 5.5H10.5Z",
|
|
743
|
+
fill: "currentColor"
|
|
744
|
+
}
|
|
745
|
+
) });
|
|
749
746
|
var IconChatEllipsis = ({
|
|
750
747
|
size = 16,
|
|
751
748
|
style = {}
|
|
@@ -837,31 +834,13 @@ var IconXmark = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)
|
|
|
837
834
|
] }),
|
|
838
835
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("clipPath", { id: "clip0_2_53", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { width: "24", height: "24", fill: "white" }) }) })
|
|
839
836
|
] });
|
|
840
|
-
var IconXmarkLarge = ({ size = 24 }) => /* @__PURE__ */ (0, import_jsx_runtime2.
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
strokeWidth: "1.5",
|
|
848
|
-
strokeLinecap: "round",
|
|
849
|
-
strokeLinejoin: "round"
|
|
850
|
-
}
|
|
851
|
-
),
|
|
852
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
853
|
-
"path",
|
|
854
|
-
{
|
|
855
|
-
d: "M6.75 17.25L17.25 6.75",
|
|
856
|
-
stroke: "currentColor",
|
|
857
|
-
strokeWidth: "1.5",
|
|
858
|
-
strokeLinecap: "round",
|
|
859
|
-
strokeLinejoin: "round"
|
|
860
|
-
}
|
|
861
|
-
)
|
|
862
|
-
] }),
|
|
863
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("clipPath", { id: "clip0_1_660", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { width: "24", height: "24", fill: "white" }) }) })
|
|
864
|
-
] });
|
|
837
|
+
var IconXmarkLarge = ({ size = 24 }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
838
|
+
"path",
|
|
839
|
+
{
|
|
840
|
+
d: "M16.7198 6.21973C17.0127 5.92683 17.4874 5.92683 17.7803 6.21973C18.0732 6.51262 18.0732 6.9874 17.7803 7.28027L13.0606 12L17.7803 16.7197C18.0732 17.0126 18.0732 17.4874 17.7803 17.7803C17.4875 18.0731 17.0127 18.0731 16.7198 17.7803L12.0001 13.0605L7.28033 17.7803C6.98746 18.0731 6.51268 18.0731 6.21979 17.7803C5.92689 17.4874 5.92689 17.0126 6.21979 16.7197L10.9395 12L6.21979 7.28027C5.92689 6.98738 5.92689 6.51262 6.21979 6.21973C6.51268 5.92683 6.98744 5.92683 7.28033 6.21973L12.0001 10.9395L16.7198 6.21973Z",
|
|
841
|
+
fill: "currentColor"
|
|
842
|
+
}
|
|
843
|
+
) });
|
|
865
844
|
var IconSun = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [
|
|
866
845
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "12", r: "4", stroke: "currentColor", strokeWidth: "1.5" }),
|
|
867
846
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 5V3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
|
|
@@ -1266,57 +1245,158 @@ function getElementClasses(target) {
|
|
|
1266
1245
|
}).filter((c, i, arr) => arr.indexOf(c) === i);
|
|
1267
1246
|
return classes.join(", ");
|
|
1268
1247
|
}
|
|
1248
|
+
var DEFAULT_STYLE_VALUES = /* @__PURE__ */ new Set([
|
|
1249
|
+
"none",
|
|
1250
|
+
"normal",
|
|
1251
|
+
"auto",
|
|
1252
|
+
"0px",
|
|
1253
|
+
"rgba(0, 0, 0, 0)",
|
|
1254
|
+
"transparent",
|
|
1255
|
+
"static",
|
|
1256
|
+
"visible"
|
|
1257
|
+
]);
|
|
1258
|
+
var TEXT_ELEMENTS = /* @__PURE__ */ new Set([
|
|
1259
|
+
"p",
|
|
1260
|
+
"span",
|
|
1261
|
+
"h1",
|
|
1262
|
+
"h2",
|
|
1263
|
+
"h3",
|
|
1264
|
+
"h4",
|
|
1265
|
+
"h5",
|
|
1266
|
+
"h6",
|
|
1267
|
+
"label",
|
|
1268
|
+
"li",
|
|
1269
|
+
"td",
|
|
1270
|
+
"th",
|
|
1271
|
+
"blockquote",
|
|
1272
|
+
"figcaption",
|
|
1273
|
+
"caption",
|
|
1274
|
+
"legend",
|
|
1275
|
+
"dt",
|
|
1276
|
+
"dd",
|
|
1277
|
+
"pre",
|
|
1278
|
+
"code",
|
|
1279
|
+
"em",
|
|
1280
|
+
"strong",
|
|
1281
|
+
"b",
|
|
1282
|
+
"i",
|
|
1283
|
+
"a",
|
|
1284
|
+
"time",
|
|
1285
|
+
"cite",
|
|
1286
|
+
"q"
|
|
1287
|
+
]);
|
|
1288
|
+
var FORM_INPUT_ELEMENTS = /* @__PURE__ */ new Set(["input", "textarea", "select"]);
|
|
1289
|
+
var MEDIA_ELEMENTS = /* @__PURE__ */ new Set(["img", "video", "canvas", "svg"]);
|
|
1290
|
+
var CONTAINER_ELEMENTS = /* @__PURE__ */ new Set([
|
|
1291
|
+
"div",
|
|
1292
|
+
"section",
|
|
1293
|
+
"article",
|
|
1294
|
+
"nav",
|
|
1295
|
+
"header",
|
|
1296
|
+
"footer",
|
|
1297
|
+
"aside",
|
|
1298
|
+
"main",
|
|
1299
|
+
"ul",
|
|
1300
|
+
"ol",
|
|
1301
|
+
"form",
|
|
1302
|
+
"fieldset"
|
|
1303
|
+
]);
|
|
1269
1304
|
function getDetailedComputedStyles(target) {
|
|
1270
1305
|
if (typeof window === "undefined") return {};
|
|
1271
1306
|
const styles = window.getComputedStyle(target);
|
|
1272
1307
|
const result = {};
|
|
1273
|
-
const
|
|
1274
|
-
|
|
1275
|
-
|
|
1276
|
-
"
|
|
1277
|
-
|
|
1278
|
-
|
|
1279
|
-
|
|
1280
|
-
"
|
|
1281
|
-
|
|
1282
|
-
"
|
|
1283
|
-
|
|
1284
|
-
"
|
|
1285
|
-
|
|
1286
|
-
"
|
|
1287
|
-
|
|
1288
|
-
"padding",
|
|
1289
|
-
"margin",
|
|
1290
|
-
"border",
|
|
1291
|
-
"borderRadius",
|
|
1292
|
-
// Layout
|
|
1293
|
-
"display",
|
|
1294
|
-
"position",
|
|
1295
|
-
"top",
|
|
1296
|
-
"right",
|
|
1297
|
-
"bottom",
|
|
1298
|
-
"left",
|
|
1299
|
-
"zIndex",
|
|
1300
|
-
"flexDirection",
|
|
1301
|
-
"justifyContent",
|
|
1302
|
-
"alignItems",
|
|
1303
|
-
"gap",
|
|
1304
|
-
// Visual
|
|
1305
|
-
"opacity",
|
|
1306
|
-
"visibility",
|
|
1307
|
-
"overflow",
|
|
1308
|
-
"boxShadow",
|
|
1309
|
-
// Transform
|
|
1310
|
-
"transform"
|
|
1311
|
-
];
|
|
1308
|
+
const tag = target.tagName.toLowerCase();
|
|
1309
|
+
let properties;
|
|
1310
|
+
if (TEXT_ELEMENTS.has(tag)) {
|
|
1311
|
+
properties = ["color", "fontSize", "fontWeight", "fontFamily", "lineHeight"];
|
|
1312
|
+
} else if (tag === "button" || tag === "a" && target.getAttribute("role") === "button") {
|
|
1313
|
+
properties = ["backgroundColor", "color", "padding", "borderRadius", "fontSize"];
|
|
1314
|
+
} else if (FORM_INPUT_ELEMENTS.has(tag)) {
|
|
1315
|
+
properties = ["backgroundColor", "color", "padding", "borderRadius", "fontSize"];
|
|
1316
|
+
} else if (MEDIA_ELEMENTS.has(tag)) {
|
|
1317
|
+
properties = ["width", "height", "objectFit", "borderRadius"];
|
|
1318
|
+
} else if (CONTAINER_ELEMENTS.has(tag)) {
|
|
1319
|
+
properties = ["display", "padding", "margin", "gap", "backgroundColor"];
|
|
1320
|
+
} else {
|
|
1321
|
+
properties = ["color", "fontSize", "margin", "padding", "backgroundColor"];
|
|
1322
|
+
}
|
|
1312
1323
|
for (const prop of properties) {
|
|
1313
|
-
const
|
|
1314
|
-
|
|
1324
|
+
const cssPropertyName = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
|
|
1325
|
+
const value = styles.getPropertyValue(cssPropertyName);
|
|
1326
|
+
if (value && !DEFAULT_STYLE_VALUES.has(value)) {
|
|
1315
1327
|
result[prop] = value;
|
|
1316
1328
|
}
|
|
1317
1329
|
}
|
|
1318
1330
|
return result;
|
|
1319
1331
|
}
|
|
1332
|
+
var FORENSIC_PROPERTIES = [
|
|
1333
|
+
// Colors
|
|
1334
|
+
"color",
|
|
1335
|
+
"backgroundColor",
|
|
1336
|
+
"borderColor",
|
|
1337
|
+
// Typography
|
|
1338
|
+
"fontSize",
|
|
1339
|
+
"fontWeight",
|
|
1340
|
+
"fontFamily",
|
|
1341
|
+
"lineHeight",
|
|
1342
|
+
"letterSpacing",
|
|
1343
|
+
"textAlign",
|
|
1344
|
+
// Box model
|
|
1345
|
+
"width",
|
|
1346
|
+
"height",
|
|
1347
|
+
"padding",
|
|
1348
|
+
"margin",
|
|
1349
|
+
"border",
|
|
1350
|
+
"borderRadius",
|
|
1351
|
+
// Layout & positioning
|
|
1352
|
+
"display",
|
|
1353
|
+
"position",
|
|
1354
|
+
"top",
|
|
1355
|
+
"right",
|
|
1356
|
+
"bottom",
|
|
1357
|
+
"left",
|
|
1358
|
+
"zIndex",
|
|
1359
|
+
"flexDirection",
|
|
1360
|
+
"justifyContent",
|
|
1361
|
+
"alignItems",
|
|
1362
|
+
"gap",
|
|
1363
|
+
// Visual effects
|
|
1364
|
+
"opacity",
|
|
1365
|
+
"visibility",
|
|
1366
|
+
"overflow",
|
|
1367
|
+
"boxShadow",
|
|
1368
|
+
// Transform
|
|
1369
|
+
"transform"
|
|
1370
|
+
];
|
|
1371
|
+
function getForensicComputedStyles(target) {
|
|
1372
|
+
if (typeof window === "undefined") return "";
|
|
1373
|
+
const styles = window.getComputedStyle(target);
|
|
1374
|
+
const parts = [];
|
|
1375
|
+
for (const prop of FORENSIC_PROPERTIES) {
|
|
1376
|
+
const cssPropertyName = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
|
|
1377
|
+
const value = styles.getPropertyValue(cssPropertyName);
|
|
1378
|
+
if (value && !DEFAULT_STYLE_VALUES.has(value)) {
|
|
1379
|
+
parts.push(`${cssPropertyName}: ${value}`);
|
|
1380
|
+
}
|
|
1381
|
+
}
|
|
1382
|
+
return parts.join("; ");
|
|
1383
|
+
}
|
|
1384
|
+
function parseComputedStylesString(stylesStr) {
|
|
1385
|
+
if (!stylesStr) return void 0;
|
|
1386
|
+
const result = {};
|
|
1387
|
+
const parts = stylesStr.split(";").map((p) => p.trim()).filter(Boolean);
|
|
1388
|
+
for (const part of parts) {
|
|
1389
|
+
const colonIndex = part.indexOf(":");
|
|
1390
|
+
if (colonIndex > 0) {
|
|
1391
|
+
const key = part.slice(0, colonIndex).trim();
|
|
1392
|
+
const value = part.slice(colonIndex + 1).trim();
|
|
1393
|
+
if (key && value) {
|
|
1394
|
+
result[key] = value;
|
|
1395
|
+
}
|
|
1396
|
+
}
|
|
1397
|
+
}
|
|
1398
|
+
return Object.keys(result).length > 0 ? result : void 0;
|
|
1399
|
+
}
|
|
1320
1400
|
function getAccessibilityInfo(target) {
|
|
1321
1401
|
const parts = [];
|
|
1322
1402
|
const role = target.getAttribute("role");
|
|
@@ -1898,7 +1978,7 @@ function PageFeedbackToolbarCSS({
|
|
|
1898
1978
|
selectedText = selection.toString().trim().slice(0, 500);
|
|
1899
1979
|
}
|
|
1900
1980
|
const computedStylesObj = getDetailedComputedStyles(elementUnder);
|
|
1901
|
-
const computedStylesStr =
|
|
1981
|
+
const computedStylesStr = getForensicComputedStyles(elementUnder);
|
|
1902
1982
|
setPendingAnnotation({
|
|
1903
1983
|
x,
|
|
1904
1984
|
y,
|
|
@@ -1918,6 +1998,7 @@ function PageFeedbackToolbarCSS({
|
|
|
1918
1998
|
fullPath: getFullElementPath(elementUnder),
|
|
1919
1999
|
accessibility: getAccessibilityInfo(elementUnder),
|
|
1920
2000
|
computedStyles: computedStylesStr,
|
|
2001
|
+
computedStylesObj,
|
|
1921
2002
|
nearbyElements: getNearbyElements(elementUnder)
|
|
1922
2003
|
});
|
|
1923
2004
|
setHoverInfo(null);
|
|
@@ -2180,9 +2261,7 @@ function PageFeedbackToolbarCSS({
|
|
|
2180
2261
|
const suffix = finalElements.length > 5 ? ` +${finalElements.length - 5} more` : "";
|
|
2181
2262
|
const firstElement = finalElements[0].element;
|
|
2182
2263
|
const firstElementComputedStyles = getDetailedComputedStyles(firstElement);
|
|
2183
|
-
const firstElementComputedStylesStr =
|
|
2184
|
-
firstElementComputedStyles
|
|
2185
|
-
).map(([k, v]) => `${k}: ${v}`).join("; ");
|
|
2264
|
+
const firstElementComputedStylesStr = getForensicComputedStyles(firstElement);
|
|
2186
2265
|
setPendingAnnotation({
|
|
2187
2266
|
x,
|
|
2188
2267
|
y,
|
|
@@ -2200,6 +2279,7 @@ function PageFeedbackToolbarCSS({
|
|
|
2200
2279
|
fullPath: getFullElementPath(firstElement),
|
|
2201
2280
|
accessibility: getAccessibilityInfo(firstElement),
|
|
2202
2281
|
computedStyles: firstElementComputedStylesStr,
|
|
2282
|
+
computedStylesObj: firstElementComputedStyles,
|
|
2203
2283
|
nearbyElements: getNearbyElements(firstElement),
|
|
2204
2284
|
cssClasses: getElementClasses(firstElement),
|
|
2205
2285
|
nearbyText: getNearbyText(firstElement)
|
|
@@ -3124,6 +3204,7 @@ function PageFeedbackToolbarCSS({
|
|
|
3124
3204
|
ref: popupRef,
|
|
3125
3205
|
element: pendingAnnotation.element,
|
|
3126
3206
|
selectedText: pendingAnnotation.selectedText,
|
|
3207
|
+
computedStyles: pendingAnnotation.computedStylesObj,
|
|
3127
3208
|
placeholder: pendingAnnotation.element === "Area selection" ? "What should change in this area?" : pendingAnnotation.isMultiSelect ? "Feedback for this group of elements..." : "What should change?",
|
|
3128
3209
|
onSubmit: addAnnotation,
|
|
3129
3210
|
onCancel: cancelAnnotation,
|
|
@@ -3140,13 +3221,8 @@ function PageFeedbackToolbarCSS({
|
|
|
3140
3221
|
pendingAnnotation.x / 100 * window.innerWidth
|
|
3141
3222
|
)
|
|
3142
3223
|
),
|
|
3143
|
-
|
|
3144
|
-
|
|
3145
|
-
Math.min(
|
|
3146
|
-
pendingAnnotation.clientY + 20,
|
|
3147
|
-
window.innerHeight - 180
|
|
3148
|
-
)
|
|
3149
|
-
)
|
|
3224
|
+
// Position popup above or below marker to keep marker visible
|
|
3225
|
+
...pendingAnnotation.clientY > window.innerHeight - 290 ? { bottom: window.innerHeight - pendingAnnotation.clientY + 20 } : { top: pendingAnnotation.clientY + 20 }
|
|
3150
3226
|
}
|
|
3151
3227
|
}
|
|
3152
3228
|
)
|
|
@@ -3174,6 +3250,7 @@ function PageFeedbackToolbarCSS({
|
|
|
3174
3250
|
ref: editPopupRef,
|
|
3175
3251
|
element: editingAnnotation.element,
|
|
3176
3252
|
selectedText: editingAnnotation.selectedText,
|
|
3253
|
+
computedStyles: parseComputedStylesString(editingAnnotation.computedStyles),
|
|
3177
3254
|
placeholder: "Edit your feedback...",
|
|
3178
3255
|
initialValue: editingAnnotation.comment,
|
|
3179
3256
|
submitLabel: "Save",
|
|
@@ -3182,24 +3259,22 @@ function PageFeedbackToolbarCSS({
|
|
|
3182
3259
|
isExiting: editExiting,
|
|
3183
3260
|
lightMode: !isDarkMode,
|
|
3184
3261
|
accentColor: editingAnnotation.isMultiSelect ? "#34C759" : settings.annotationColor,
|
|
3185
|
-
style: {
|
|
3186
|
-
|
|
3187
|
-
|
|
3188
|
-
|
|
3189
|
-
|
|
3190
|
-
Math.
|
|
3191
|
-
|
|
3192
|
-
|
|
3193
|
-
|
|
3194
|
-
|
|
3195
|
-
|
|
3196
|
-
|
|
3197
|
-
|
|
3198
|
-
|
|
3199
|
-
|
|
3200
|
-
|
|
3201
|
-
)
|
|
3202
|
-
}
|
|
3262
|
+
style: (() => {
|
|
3263
|
+
const markerY = editingAnnotation.isFixed ? editingAnnotation.y : editingAnnotation.y - scrollY;
|
|
3264
|
+
return {
|
|
3265
|
+
// Popup is 280px wide, centered with translateX(-50%), so 140px each side
|
|
3266
|
+
// Clamp so popup stays 20px from viewport edges
|
|
3267
|
+
left: Math.max(
|
|
3268
|
+
160,
|
|
3269
|
+
Math.min(
|
|
3270
|
+
window.innerWidth - 160,
|
|
3271
|
+
editingAnnotation.x / 100 * window.innerWidth
|
|
3272
|
+
)
|
|
3273
|
+
),
|
|
3274
|
+
// Position popup above or below marker to keep marker visible
|
|
3275
|
+
...markerY > window.innerHeight - 290 ? { bottom: window.innerHeight - markerY + 20 } : { top: markerY + 20 }
|
|
3276
|
+
};
|
|
3277
|
+
})()
|
|
3203
3278
|
}
|
|
3204
3279
|
)
|
|
3205
3280
|
] }),
|