@taterboom/shiteki 0.1.2 → 0.1.4
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 +166 -143
- package/dist/index.mjs +166 -143
- package/dist/standalone.global.js +9 -9
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -446,8 +446,37 @@ import { motion, AnimatePresence } from "motion/react";
|
|
|
446
446
|
// src/utils/spring.ts
|
|
447
447
|
var spring = { type: "spring", bounce: 0.1, duration: 0.3 };
|
|
448
448
|
|
|
449
|
-
// src/components/
|
|
449
|
+
// src/components/Logo.tsx
|
|
450
450
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
451
|
+
var Logo = () => {
|
|
452
|
+
return /* @__PURE__ */ jsxs(
|
|
453
|
+
"svg",
|
|
454
|
+
{
|
|
455
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
456
|
+
width: "22",
|
|
457
|
+
height: "22",
|
|
458
|
+
viewBox: "0 0 256 256",
|
|
459
|
+
fill: "currentColor",
|
|
460
|
+
children: [
|
|
461
|
+
/* @__PURE__ */ jsx(
|
|
462
|
+
"path",
|
|
463
|
+
{
|
|
464
|
+
d: "M 247.81,77.89 C 245.98,73.37 241.11,74.53 235.48,73.96 C 227.24,73.12 223.31,71.04 220.48,70.11 C 216.92,68.91 215.26,71.07 214.61,74.16 C 213.26,80.65 209.08,85.14 208.17,87.42 C 206.52,91.71 209.63,96.73 218.18,97.13 C 232.12,97.81 250.88,87.09 247.81,77.89 Z"
|
|
465
|
+
}
|
|
466
|
+
),
|
|
467
|
+
/* @__PURE__ */ jsx(
|
|
468
|
+
"path",
|
|
469
|
+
{
|
|
470
|
+
d: "M 226.81,110.84 C 226.56,106.67 226.51,105.11 226.15,104.34 C 225.84,103.66 225.86,103.98 225.16,104.13 C 223.16,104.58 214.15,105.42 207.69,101.21 C 202.06,97.59 198.08,90.98 201.42,84.48 C 203.75,79.86 206.15,78.28 208.27,70.79 C 209.83,65.03 211.98,64.17 214.19,63.26 C 214.85,62.97 214.62,62.88 214.25,61.79 C 212.98,58.57 197.91,22.25 154.31,22.25 C 120.74,22.25 99.34,43.86 90.92,75.12 C 86.39,92.17 82.95,108.72 64.16,108.72 C 54.19,108.08 48.41,104.41 43.82,98.75 C 36.81,91.63 33.06,87.11 24.09,87.11 C 12.17,87.11 7.88,109.92 7.88,130.65 C 7.88,173.15 36.13,232.54 115.14,232.54 C 179.88,232.54 230.95,189.87 226.81,110.84 Z M 181.96,59.19 C 187.91,59.19 189.92,66.52 189.92,70.09 C 189.92,76.29 187.29,81.66 182.58,81.66 C 176.84,81.66 173.79,74.91 173.79,70.09 C 173.79,64.72 176.27,59.19 181.96,59.19 Z M 109.32,193.56 C 92.41,193.56 75.41,185.76 75.41,175.28 C 75.41,173.21 76.03,171.74 76.52,170.31 C 67.56,166.67 57.66,157.68 57.66,146.48 C 57.66,138.16 63.95,135.45 69.89,134.75 C 79.11,133.59 86.92,131.94 96.76,131.09 C 98.17,130.97 97.19,132.06 96.41,132.49 C 88.26,137.11 79.68,138.83 72.02,140.57 C 67.22,141.66 64.78,143.11 64.78,146.13 C 64.78,153.75 73.75,163.71 89.46,167.81 C 89.82,167.93 89.68,168.28 89.41,168.36 C 86.07,169.52 83.07,171.91 83.07,175.13 C 83.07,182.39 95.68,186.48 108.05,186.48 C 129.97,186.48 145.81,172.16 149.31,153.37 C 149.81,150.85 149.76,149.48 150.29,149.48 C 151.12,149.48 151.37,153.81 151.37,155.58 C 151.37,173.91 134.62,193.56 109.32,193.56 Z"
|
|
471
|
+
}
|
|
472
|
+
)
|
|
473
|
+
]
|
|
474
|
+
}
|
|
475
|
+
);
|
|
476
|
+
};
|
|
477
|
+
|
|
478
|
+
// src/components/Toolbar.tsx
|
|
479
|
+
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
451
480
|
function Toolbar({
|
|
452
481
|
open,
|
|
453
482
|
annotationCount,
|
|
@@ -464,7 +493,7 @@ function Toolbar({
|
|
|
464
493
|
showHint,
|
|
465
494
|
onDismissHint
|
|
466
495
|
}) {
|
|
467
|
-
return /* @__PURE__ */
|
|
496
|
+
return /* @__PURE__ */ jsxs2(
|
|
468
497
|
motion.div,
|
|
469
498
|
{
|
|
470
499
|
layout: true,
|
|
@@ -487,24 +516,18 @@ function Toolbar({
|
|
|
487
516
|
whileHover: !open ? { scale: 1.08, boxShadow: "0 4px 20px rgba(37, 99, 235, 0.4)" } : void 0,
|
|
488
517
|
whileTap: !open ? { scale: 0.95 } : void 0,
|
|
489
518
|
children: [
|
|
490
|
-
/* @__PURE__ */
|
|
491
|
-
/* @__PURE__ */
|
|
519
|
+
/* @__PURE__ */ jsxs2("div", { className: "shiteki-toolbar-picker", children: [
|
|
520
|
+
/* @__PURE__ */ jsx2(
|
|
492
521
|
motion.div,
|
|
493
522
|
{
|
|
494
523
|
className: `shiteki-toolbar-btn ${open ? "shiteki-toolbar-btn--active" : ""}`,
|
|
495
524
|
whileHover: { scale: 1.1 },
|
|
496
525
|
whileTap: { scale: 0.9 },
|
|
497
526
|
style: !open ? { color: "#fff", pointerEvents: "none" } : { pointerEvents: "none" },
|
|
498
|
-
children: /* @__PURE__ */
|
|
499
|
-
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
|
|
500
|
-
/* @__PURE__ */ jsx("line", { x1: "12", y1: "2", x2: "12", y2: "6" }),
|
|
501
|
-
/* @__PURE__ */ jsx("line", { x1: "12", y1: "18", x2: "12", y2: "22" }),
|
|
502
|
-
/* @__PURE__ */ jsx("line", { x1: "2", y1: "12", x2: "6", y2: "12" }),
|
|
503
|
-
/* @__PURE__ */ jsx("line", { x1: "18", y1: "12", x2: "22", y2: "12" })
|
|
504
|
-
] })
|
|
527
|
+
children: /* @__PURE__ */ jsx2(Logo, {})
|
|
505
528
|
}
|
|
506
529
|
),
|
|
507
|
-
open && annotationCount > 0 && /* @__PURE__ */
|
|
530
|
+
open && annotationCount > 0 && /* @__PURE__ */ jsx2(
|
|
508
531
|
motion.span,
|
|
509
532
|
{
|
|
510
533
|
className: "shiteki-toolbar-badge",
|
|
@@ -515,7 +538,7 @@ function Toolbar({
|
|
|
515
538
|
}
|
|
516
539
|
)
|
|
517
540
|
] }),
|
|
518
|
-
/* @__PURE__ */
|
|
541
|
+
/* @__PURE__ */ jsx2(AnimatePresence, { children: open && /* @__PURE__ */ jsxs2(
|
|
519
542
|
motion.div,
|
|
520
543
|
{
|
|
521
544
|
initial: { opacity: 0, width: 0 },
|
|
@@ -524,50 +547,50 @@ function Toolbar({
|
|
|
524
547
|
transition: spring,
|
|
525
548
|
style: { overflow: "hidden", display: "flex", alignItems: "center", gap: 4 },
|
|
526
549
|
children: [
|
|
527
|
-
/* @__PURE__ */
|
|
528
|
-
/* @__PURE__ */
|
|
529
|
-
/* @__PURE__ */
|
|
530
|
-
/* @__PURE__ */
|
|
550
|
+
/* @__PURE__ */ jsx2("div", { className: "shiteki-toolbar-sep" }),
|
|
551
|
+
/* @__PURE__ */ jsx2("button", { className: "shiteki-toolbar-btn", onClick: onCopy, disabled: annotationCount === 0, title: "Copy to clipboard", children: copied ? /* @__PURE__ */ jsx2("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx2("polyline", { points: "20 6 9 17 4 12" }) }) : /* @__PURE__ */ jsxs2("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
552
|
+
/* @__PURE__ */ jsx2("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
|
|
553
|
+
/* @__PURE__ */ jsx2("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
|
|
531
554
|
] }) }),
|
|
532
|
-
/* @__PURE__ */
|
|
555
|
+
/* @__PURE__ */ jsx2(
|
|
533
556
|
"button",
|
|
534
557
|
{
|
|
535
558
|
className: "shiteki-toolbar-btn",
|
|
536
559
|
onClick: canSend ? onSend : onSettings,
|
|
537
560
|
disabled: sending || annotationCount === 0,
|
|
538
561
|
title: canSend ? "Send as GitHub Issue" : "Configure settings to enable send",
|
|
539
|
-
children: /* @__PURE__ */
|
|
540
|
-
/* @__PURE__ */
|
|
541
|
-
/* @__PURE__ */
|
|
562
|
+
children: /* @__PURE__ */ jsxs2("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
563
|
+
/* @__PURE__ */ jsx2("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
|
|
564
|
+
/* @__PURE__ */ jsx2("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
|
|
542
565
|
] })
|
|
543
566
|
}
|
|
544
567
|
),
|
|
545
|
-
/* @__PURE__ */
|
|
546
|
-
/* @__PURE__ */
|
|
547
|
-
/* @__PURE__ */
|
|
568
|
+
/* @__PURE__ */ jsx2("button", { className: "shiteki-toolbar-btn", onClick: onClear, disabled: annotationCount === 0, title: "Clear all annotations", children: /* @__PURE__ */ jsxs2("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
569
|
+
/* @__PURE__ */ jsx2("polyline", { points: "3 6 5 6 21 6" }),
|
|
570
|
+
/* @__PURE__ */ jsx2("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
|
|
548
571
|
] }) }),
|
|
549
|
-
/* @__PURE__ */
|
|
572
|
+
/* @__PURE__ */ jsx2(
|
|
550
573
|
"button",
|
|
551
574
|
{
|
|
552
575
|
className: `shiteki-toolbar-btn ${settingsOpen ? "shiteki-toolbar-btn--active" : ""}`,
|
|
553
576
|
onClick: onSettings,
|
|
554
577
|
title: "Settings",
|
|
555
|
-
children: /* @__PURE__ */
|
|
556
|
-
/* @__PURE__ */
|
|
557
|
-
/* @__PURE__ */
|
|
578
|
+
children: /* @__PURE__ */ jsxs2("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
579
|
+
/* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "3" }),
|
|
580
|
+
/* @__PURE__ */ jsx2("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" })
|
|
558
581
|
] })
|
|
559
582
|
}
|
|
560
583
|
),
|
|
561
|
-
/* @__PURE__ */
|
|
562
|
-
/* @__PURE__ */
|
|
563
|
-
/* @__PURE__ */
|
|
564
|
-
/* @__PURE__ */
|
|
584
|
+
/* @__PURE__ */ jsx2("div", { className: "shiteki-toolbar-sep" }),
|
|
585
|
+
/* @__PURE__ */ jsx2("button", { className: "shiteki-toolbar-btn", onClick: onClose, title: "Close", children: /* @__PURE__ */ jsxs2("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
586
|
+
/* @__PURE__ */ jsx2("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
|
|
587
|
+
/* @__PURE__ */ jsx2("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
|
|
565
588
|
] }) })
|
|
566
589
|
]
|
|
567
590
|
},
|
|
568
591
|
"expand"
|
|
569
592
|
) }),
|
|
570
|
-
/* @__PURE__ */
|
|
593
|
+
/* @__PURE__ */ jsx2(AnimatePresence, { children: open && showHint && /* @__PURE__ */ jsxs2(
|
|
571
594
|
motion.div,
|
|
572
595
|
{
|
|
573
596
|
className: "shiteki-shortcut-hint",
|
|
@@ -576,29 +599,29 @@ function Toolbar({
|
|
|
576
599
|
exit: { opacity: 0, y: 4 },
|
|
577
600
|
transition: { duration: 0.15 },
|
|
578
601
|
children: [
|
|
579
|
-
/* @__PURE__ */
|
|
580
|
-
/* @__PURE__ */
|
|
581
|
-
/* @__PURE__ */
|
|
602
|
+
/* @__PURE__ */ jsx2("button", { className: "shiteki-shortcut-hint-close", onClick: onDismissHint, "aria-label": "Dismiss", children: /* @__PURE__ */ jsxs2("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
603
|
+
/* @__PURE__ */ jsx2("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
|
|
604
|
+
/* @__PURE__ */ jsx2("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
|
|
582
605
|
] }) }),
|
|
583
|
-
/* @__PURE__ */
|
|
584
|
-
/* @__PURE__ */
|
|
585
|
-
/* @__PURE__ */
|
|
606
|
+
/* @__PURE__ */ jsxs2("div", { className: "shiteki-shortcut-hint-list", children: [
|
|
607
|
+
/* @__PURE__ */ jsxs2("span", { children: [
|
|
608
|
+
/* @__PURE__ */ jsx2("kbd", { children: "X" }),
|
|
586
609
|
" Toggle"
|
|
587
610
|
] }),
|
|
588
|
-
/* @__PURE__ */
|
|
589
|
-
/* @__PURE__ */
|
|
611
|
+
/* @__PURE__ */ jsxs2("span", { children: [
|
|
612
|
+
/* @__PURE__ */ jsx2("kbd", { children: "C" }),
|
|
590
613
|
" Copy"
|
|
591
614
|
] }),
|
|
592
|
-
/* @__PURE__ */
|
|
593
|
-
/* @__PURE__ */
|
|
615
|
+
/* @__PURE__ */ jsxs2("span", { children: [
|
|
616
|
+
/* @__PURE__ */ jsx2("kbd", { children: "S" }),
|
|
594
617
|
" Send"
|
|
595
618
|
] }),
|
|
596
|
-
/* @__PURE__ */
|
|
597
|
-
/* @__PURE__ */
|
|
619
|
+
/* @__PURE__ */ jsxs2("span", { children: [
|
|
620
|
+
/* @__PURE__ */ jsx2("kbd", { children: "DD" }),
|
|
598
621
|
" Clear"
|
|
599
622
|
] }),
|
|
600
|
-
/* @__PURE__ */
|
|
601
|
-
/* @__PURE__ */
|
|
623
|
+
/* @__PURE__ */ jsxs2("span", { children: [
|
|
624
|
+
/* @__PURE__ */ jsxs2("kbd", { children: [
|
|
602
625
|
navigator.userAgent.includes("Mac") ? "\u2318" : "Ctrl",
|
|
603
626
|
"+Click"
|
|
604
627
|
] }),
|
|
@@ -615,10 +638,10 @@ function Toolbar({
|
|
|
615
638
|
}
|
|
616
639
|
|
|
617
640
|
// src/components/ElementHighlight.tsx
|
|
618
|
-
import { jsx as
|
|
641
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
619
642
|
function ElementHighlight({ rect }) {
|
|
620
643
|
if (!rect) return null;
|
|
621
|
-
return /* @__PURE__ */
|
|
644
|
+
return /* @__PURE__ */ jsx3(
|
|
622
645
|
"div",
|
|
623
646
|
{
|
|
624
647
|
className: "shiteki-highlight",
|
|
@@ -635,7 +658,7 @@ function ElementHighlight({ rect }) {
|
|
|
635
658
|
// src/components/AnnotationPopover.tsx
|
|
636
659
|
import { useEffect as useEffect3, useRef as useRef5, useState as useState7 } from "react";
|
|
637
660
|
import { motion as motion2 } from "motion/react";
|
|
638
|
-
import { jsx as
|
|
661
|
+
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
639
662
|
function AnnotationPopover({ elementInfo, onAdd, onCancel }) {
|
|
640
663
|
const [comment, setComment] = useState7("");
|
|
641
664
|
const textareaRef = useRef5(null);
|
|
@@ -670,7 +693,7 @@ function AnnotationPopover({ elementInfo, onAdd, onCancel }) {
|
|
|
670
693
|
if (!comment.trim()) return;
|
|
671
694
|
onAdd(comment.trim());
|
|
672
695
|
};
|
|
673
|
-
return /* @__PURE__ */
|
|
696
|
+
return /* @__PURE__ */ jsxs3(
|
|
674
697
|
motion2.div,
|
|
675
698
|
{
|
|
676
699
|
className: "shiteki-popover",
|
|
@@ -680,7 +703,7 @@ function AnnotationPopover({ elementInfo, onAdd, onCancel }) {
|
|
|
680
703
|
exit: { opacity: 0, scale: 0.95, y: yOffset },
|
|
681
704
|
transition: spring,
|
|
682
705
|
children: [
|
|
683
|
-
/* @__PURE__ */
|
|
706
|
+
/* @__PURE__ */ jsxs3(
|
|
684
707
|
"div",
|
|
685
708
|
{
|
|
686
709
|
className: "shiteki-popover-info",
|
|
@@ -689,12 +712,12 @@ function AnnotationPopover({ elementInfo, onAdd, onCancel }) {
|
|
|
689
712
|
onPointerMove: handlePointerMove,
|
|
690
713
|
onPointerUp: handlePointerUp,
|
|
691
714
|
children: [
|
|
692
|
-
/* @__PURE__ */
|
|
715
|
+
/* @__PURE__ */ jsxs3("span", { className: "shiteki-popover-tag", children: [
|
|
693
716
|
"<",
|
|
694
717
|
elementInfo.tagName,
|
|
695
718
|
">"
|
|
696
719
|
] }),
|
|
697
|
-
elementInfo.textContent && /* @__PURE__ */
|
|
720
|
+
elementInfo.textContent && /* @__PURE__ */ jsxs3("span", { className: "shiteki-popover-text", children: [
|
|
698
721
|
'"',
|
|
699
722
|
elementInfo.textContent,
|
|
700
723
|
'"'
|
|
@@ -702,8 +725,8 @@ function AnnotationPopover({ elementInfo, onAdd, onCancel }) {
|
|
|
702
725
|
]
|
|
703
726
|
}
|
|
704
727
|
),
|
|
705
|
-
/* @__PURE__ */
|
|
706
|
-
/* @__PURE__ */
|
|
728
|
+
/* @__PURE__ */ jsxs3("form", { className: "shiteki-popover-form", onSubmit: handleSubmit, children: [
|
|
729
|
+
/* @__PURE__ */ jsx4(
|
|
707
730
|
"textarea",
|
|
708
731
|
{
|
|
709
732
|
ref: textareaRef,
|
|
@@ -714,9 +737,9 @@ function AnnotationPopover({ elementInfo, onAdd, onCancel }) {
|
|
|
714
737
|
rows: 3
|
|
715
738
|
}
|
|
716
739
|
),
|
|
717
|
-
/* @__PURE__ */
|
|
718
|
-
/* @__PURE__ */
|
|
719
|
-
/* @__PURE__ */
|
|
740
|
+
/* @__PURE__ */ jsxs3("div", { className: "shiteki-popover-actions", children: [
|
|
741
|
+
/* @__PURE__ */ jsx4("button", { type: "button", className: "shiteki-btn shiteki-btn--ghost", onClick: onCancel, children: "Cancel" }),
|
|
742
|
+
/* @__PURE__ */ jsx4("button", { type: "submit", className: "shiteki-btn shiteki-btn--primary", disabled: !comment.trim(), children: "Add" })
|
|
720
743
|
] })
|
|
721
744
|
] })
|
|
722
745
|
]
|
|
@@ -727,7 +750,7 @@ function AnnotationPopover({ elementInfo, onAdd, onCancel }) {
|
|
|
727
750
|
// src/components/AnnotationDetailPopover.tsx
|
|
728
751
|
import { useEffect as useEffect4, useRef as useRef6, useState as useState8 } from "react";
|
|
729
752
|
import { motion as motion3 } from "motion/react";
|
|
730
|
-
import { jsx as
|
|
753
|
+
import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
731
754
|
function AnnotationDetailPopover({ annotation, index, onUpdate, onRemove, onClose }) {
|
|
732
755
|
const [comment, setComment] = useState8(annotation.comment);
|
|
733
756
|
const textareaRef = useRef6(null);
|
|
@@ -762,7 +785,7 @@ function AnnotationDetailPopover({ annotation, index, onUpdate, onRemove, onClos
|
|
|
762
785
|
if (!comment.trim()) return;
|
|
763
786
|
onUpdate(comment.trim());
|
|
764
787
|
};
|
|
765
|
-
return /* @__PURE__ */
|
|
788
|
+
return /* @__PURE__ */ jsxs4(
|
|
766
789
|
motion3.div,
|
|
767
790
|
{
|
|
768
791
|
className: "shiteki-popover",
|
|
@@ -772,7 +795,7 @@ function AnnotationDetailPopover({ annotation, index, onUpdate, onRemove, onClos
|
|
|
772
795
|
exit: { opacity: 0, scale: 0.95, y: yOffset },
|
|
773
796
|
transition: spring,
|
|
774
797
|
children: [
|
|
775
|
-
/* @__PURE__ */
|
|
798
|
+
/* @__PURE__ */ jsxs4(
|
|
776
799
|
"div",
|
|
777
800
|
{
|
|
778
801
|
className: "shiteki-popover-info",
|
|
@@ -781,14 +804,14 @@ function AnnotationDetailPopover({ annotation, index, onUpdate, onRemove, onClos
|
|
|
781
804
|
onPointerMove: handlePointerMove,
|
|
782
805
|
onPointerUp: handlePointerUp,
|
|
783
806
|
children: [
|
|
784
|
-
/* @__PURE__ */
|
|
807
|
+
/* @__PURE__ */ jsxs4("span", { className: "shiteki-popover-tag", children: [
|
|
785
808
|
"#",
|
|
786
809
|
index,
|
|
787
810
|
" <",
|
|
788
811
|
annotation.elementInfo.tagName,
|
|
789
812
|
">"
|
|
790
813
|
] }),
|
|
791
|
-
annotation.elementInfo.textContent && /* @__PURE__ */
|
|
814
|
+
annotation.elementInfo.textContent && /* @__PURE__ */ jsxs4("span", { className: "shiteki-popover-text", children: [
|
|
792
815
|
'"',
|
|
793
816
|
annotation.elementInfo.textContent,
|
|
794
817
|
'"'
|
|
@@ -796,8 +819,8 @@ function AnnotationDetailPopover({ annotation, index, onUpdate, onRemove, onClos
|
|
|
796
819
|
]
|
|
797
820
|
}
|
|
798
821
|
),
|
|
799
|
-
/* @__PURE__ */
|
|
800
|
-
/* @__PURE__ */
|
|
822
|
+
/* @__PURE__ */ jsxs4("form", { className: "shiteki-popover-form", onSubmit: handleSubmit, children: [
|
|
823
|
+
/* @__PURE__ */ jsx5(
|
|
801
824
|
"textarea",
|
|
802
825
|
{
|
|
803
826
|
ref: textareaRef,
|
|
@@ -808,14 +831,14 @@ function AnnotationDetailPopover({ annotation, index, onUpdate, onRemove, onClos
|
|
|
808
831
|
rows: 3
|
|
809
832
|
}
|
|
810
833
|
),
|
|
811
|
-
/* @__PURE__ */
|
|
812
|
-
/* @__PURE__ */
|
|
813
|
-
/* @__PURE__ */
|
|
814
|
-
/* @__PURE__ */
|
|
834
|
+
/* @__PURE__ */ jsxs4("div", { className: "shiteki-popover-actions", children: [
|
|
835
|
+
/* @__PURE__ */ jsx5("button", { type: "button", className: "shiteki-btn shiteki-btn--danger shiteki-btn--icon", onClick: onRemove, title: "Remove annotation", children: /* @__PURE__ */ jsxs4("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
836
|
+
/* @__PURE__ */ jsx5("polyline", { points: "3 6 5 6 21 6" }),
|
|
837
|
+
/* @__PURE__ */ jsx5("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
|
|
815
838
|
] }) }),
|
|
816
|
-
/* @__PURE__ */
|
|
817
|
-
/* @__PURE__ */
|
|
818
|
-
/* @__PURE__ */
|
|
839
|
+
/* @__PURE__ */ jsx5("div", { style: { flex: 1 } }),
|
|
840
|
+
/* @__PURE__ */ jsx5("button", { type: "button", className: "shiteki-btn shiteki-btn--ghost", onClick: onClose, children: "Cancel" }),
|
|
841
|
+
/* @__PURE__ */ jsx5("button", { type: "submit", className: "shiteki-btn shiteki-btn--primary", disabled: !comment.trim(), children: "Save" })
|
|
819
842
|
] })
|
|
820
843
|
] })
|
|
821
844
|
]
|
|
@@ -857,9 +880,9 @@ function useMarkerPositions(annotations) {
|
|
|
857
880
|
|
|
858
881
|
// src/components/AnnotationMarker.tsx
|
|
859
882
|
import { motion as motion4 } from "motion/react";
|
|
860
|
-
import { jsx as
|
|
883
|
+
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
861
884
|
function AnnotationMarker({ id, index, top, left, onClick }) {
|
|
862
|
-
return /* @__PURE__ */
|
|
885
|
+
return /* @__PURE__ */ jsx6(
|
|
863
886
|
motion4.div,
|
|
864
887
|
{
|
|
865
888
|
className: "shiteki-marker",
|
|
@@ -877,10 +900,10 @@ function AnnotationMarker({ id, index, top, left, onClick }) {
|
|
|
877
900
|
}
|
|
878
901
|
|
|
879
902
|
// src/components/AnnotationMarkers.tsx
|
|
880
|
-
import { jsx as
|
|
903
|
+
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
881
904
|
function AnnotationMarkers({ annotations, onClick }) {
|
|
882
905
|
const positions = useMarkerPositions(annotations);
|
|
883
|
-
return /* @__PURE__ */
|
|
906
|
+
return /* @__PURE__ */ jsx7(AnimatePresence2, { children: positions.map((pos) => /* @__PURE__ */ jsx7(
|
|
884
907
|
AnnotationMarker,
|
|
885
908
|
{
|
|
886
909
|
id: pos.id,
|
|
@@ -896,7 +919,7 @@ function AnnotationMarkers({ annotations, onClick }) {
|
|
|
896
919
|
// src/components/StatusMessage.tsx
|
|
897
920
|
import { useEffect as useEffect6 } from "react";
|
|
898
921
|
import { motion as motion5 } from "motion/react";
|
|
899
|
-
import { jsx as
|
|
922
|
+
import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
900
923
|
function StatusMessage({ state, onDismiss }) {
|
|
901
924
|
useEffect6(() => {
|
|
902
925
|
if (state.status === "success" || state.status === "error") {
|
|
@@ -905,7 +928,7 @@ function StatusMessage({ state, onDismiss }) {
|
|
|
905
928
|
}
|
|
906
929
|
}, [state.status, onDismiss]);
|
|
907
930
|
if (state.status === "success") {
|
|
908
|
-
return /* @__PURE__ */
|
|
931
|
+
return /* @__PURE__ */ jsxs5(
|
|
909
932
|
motion5.div,
|
|
910
933
|
{
|
|
911
934
|
className: "shiteki-status shiteki-status--success",
|
|
@@ -916,7 +939,7 @@ function StatusMessage({ state, onDismiss }) {
|
|
|
916
939
|
children: [
|
|
917
940
|
"Issue created!",
|
|
918
941
|
" ",
|
|
919
|
-
/* @__PURE__ */
|
|
942
|
+
/* @__PURE__ */ jsxs5("a", { href: state.result.issueUrl, target: "_blank", rel: "noopener noreferrer", children: [
|
|
920
943
|
"#",
|
|
921
944
|
state.result.issueNumber
|
|
922
945
|
] })
|
|
@@ -925,7 +948,7 @@ function StatusMessage({ state, onDismiss }) {
|
|
|
925
948
|
);
|
|
926
949
|
}
|
|
927
950
|
if (state.status === "error") {
|
|
928
|
-
return /* @__PURE__ */
|
|
951
|
+
return /* @__PURE__ */ jsx8(
|
|
929
952
|
motion5.div,
|
|
930
953
|
{
|
|
931
954
|
className: "shiteki-status shiteki-status--error",
|
|
@@ -938,7 +961,7 @@ function StatusMessage({ state, onDismiss }) {
|
|
|
938
961
|
);
|
|
939
962
|
}
|
|
940
963
|
if (state.status === "loading") {
|
|
941
|
-
return /* @__PURE__ */
|
|
964
|
+
return /* @__PURE__ */ jsx8(
|
|
942
965
|
motion5.div,
|
|
943
966
|
{
|
|
944
967
|
className: "shiteki-status",
|
|
@@ -956,9 +979,9 @@ function StatusMessage({ state, onDismiss }) {
|
|
|
956
979
|
// src/components/SettingsPanel.tsx
|
|
957
980
|
import { useCallback as useCallback7, useState as useState10 } from "react";
|
|
958
981
|
import { motion as motion6 } from "motion/react";
|
|
959
|
-
import { jsx as
|
|
982
|
+
import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
960
983
|
function HelpLink({ href }) {
|
|
961
|
-
return /* @__PURE__ */
|
|
984
|
+
return /* @__PURE__ */ jsx9(
|
|
962
985
|
"a",
|
|
963
986
|
{
|
|
964
987
|
className: "shiteki-settings-help",
|
|
@@ -966,9 +989,9 @@ function HelpLink({ href }) {
|
|
|
966
989
|
target: "_blank",
|
|
967
990
|
rel: "noopener noreferrer",
|
|
968
991
|
onClick: (e) => e.stopPropagation(),
|
|
969
|
-
children: /* @__PURE__ */
|
|
970
|
-
/* @__PURE__ */
|
|
971
|
-
/* @__PURE__ */
|
|
992
|
+
children: /* @__PURE__ */ jsxs6("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", children: [
|
|
993
|
+
/* @__PURE__ */ jsx9("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "1.5" }),
|
|
994
|
+
/* @__PURE__ */ jsx9(
|
|
972
995
|
"text",
|
|
973
996
|
{
|
|
974
997
|
x: "8",
|
|
@@ -1004,7 +1027,7 @@ function SettingsPanel({ config, onSave, onCancel }) {
|
|
|
1004
1027
|
clearAfterCopy
|
|
1005
1028
|
});
|
|
1006
1029
|
}, [mode, endpoint, githubToken, owner, repo, labels, clearAfterCopy, onSave]);
|
|
1007
|
-
return /* @__PURE__ */
|
|
1030
|
+
return /* @__PURE__ */ jsxs6(
|
|
1008
1031
|
motion6.div,
|
|
1009
1032
|
{
|
|
1010
1033
|
className: "shiteki-settings",
|
|
@@ -1013,13 +1036,13 @@ function SettingsPanel({ config, onSave, onCancel }) {
|
|
|
1013
1036
|
exit: { opacity: 0, y: 12 },
|
|
1014
1037
|
transition: spring,
|
|
1015
1038
|
children: [
|
|
1016
|
-
/* @__PURE__ */
|
|
1017
|
-
/* @__PURE__ */
|
|
1018
|
-
/* @__PURE__ */
|
|
1019
|
-
/* @__PURE__ */
|
|
1020
|
-
/* @__PURE__ */
|
|
1021
|
-
/* @__PURE__ */
|
|
1022
|
-
/* @__PURE__ */
|
|
1039
|
+
/* @__PURE__ */ jsx9("div", { className: "shiteki-settings-header", children: "Settings" }),
|
|
1040
|
+
/* @__PURE__ */ jsxs6("div", { className: "shiteki-settings-body", children: [
|
|
1041
|
+
/* @__PURE__ */ jsxs6("div", { className: "shiteki-settings-field", children: [
|
|
1042
|
+
/* @__PURE__ */ jsx9("span", { className: "shiteki-settings-label", children: "Submit mode" }),
|
|
1043
|
+
/* @__PURE__ */ jsxs6("div", { className: "shiteki-radio-group", children: [
|
|
1044
|
+
/* @__PURE__ */ jsxs6("label", { className: "shiteki-radio", children: [
|
|
1045
|
+
/* @__PURE__ */ jsx9(
|
|
1023
1046
|
"input",
|
|
1024
1047
|
{
|
|
1025
1048
|
type: "radio",
|
|
@@ -1028,10 +1051,10 @@ function SettingsPanel({ config, onSave, onCancel }) {
|
|
|
1028
1051
|
onChange: () => setMode("endpoint")
|
|
1029
1052
|
}
|
|
1030
1053
|
),
|
|
1031
|
-
/* @__PURE__ */
|
|
1054
|
+
/* @__PURE__ */ jsx9("span", { children: "Endpoint" })
|
|
1032
1055
|
] }),
|
|
1033
|
-
/* @__PURE__ */
|
|
1034
|
-
/* @__PURE__ */
|
|
1056
|
+
/* @__PURE__ */ jsxs6("label", { className: "shiteki-radio", children: [
|
|
1057
|
+
/* @__PURE__ */ jsx9(
|
|
1035
1058
|
"input",
|
|
1036
1059
|
{
|
|
1037
1060
|
type: "radio",
|
|
@@ -1040,16 +1063,16 @@ function SettingsPanel({ config, onSave, onCancel }) {
|
|
|
1040
1063
|
onChange: () => setMode("direct")
|
|
1041
1064
|
}
|
|
1042
1065
|
),
|
|
1043
|
-
/* @__PURE__ */
|
|
1066
|
+
/* @__PURE__ */ jsx9("span", { children: "Direct" })
|
|
1044
1067
|
] })
|
|
1045
1068
|
] })
|
|
1046
1069
|
] }),
|
|
1047
|
-
mode === "endpoint" ? /* @__PURE__ */
|
|
1048
|
-
/* @__PURE__ */
|
|
1070
|
+
mode === "endpoint" ? /* @__PURE__ */ jsxs6("label", { className: "shiteki-settings-field", children: [
|
|
1071
|
+
/* @__PURE__ */ jsxs6("span", { className: "shiteki-settings-label", children: [
|
|
1049
1072
|
"Endpoint",
|
|
1050
|
-
/* @__PURE__ */
|
|
1073
|
+
/* @__PURE__ */ jsx9(HelpLink, { href: "https://github.com/taterboom/shiteki/tree/main/apps/api" })
|
|
1051
1074
|
] }),
|
|
1052
|
-
/* @__PURE__ */
|
|
1075
|
+
/* @__PURE__ */ jsx9(
|
|
1053
1076
|
"input",
|
|
1054
1077
|
{
|
|
1055
1078
|
className: "shiteki-settings-input",
|
|
@@ -1059,12 +1082,12 @@ function SettingsPanel({ config, onSave, onCancel }) {
|
|
|
1059
1082
|
placeholder: "https://..."
|
|
1060
1083
|
}
|
|
1061
1084
|
)
|
|
1062
|
-
] }) : /* @__PURE__ */
|
|
1063
|
-
/* @__PURE__ */
|
|
1085
|
+
] }) : /* @__PURE__ */ jsxs6("label", { className: "shiteki-settings-field", children: [
|
|
1086
|
+
/* @__PURE__ */ jsxs6("span", { className: "shiteki-settings-label", children: [
|
|
1064
1087
|
"GitHub Token",
|
|
1065
|
-
/* @__PURE__ */
|
|
1088
|
+
/* @__PURE__ */ jsx9(HelpLink, { href: "https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens" })
|
|
1066
1089
|
] }),
|
|
1067
|
-
/* @__PURE__ */
|
|
1090
|
+
/* @__PURE__ */ jsx9(
|
|
1068
1091
|
"input",
|
|
1069
1092
|
{
|
|
1070
1093
|
className: "shiteki-settings-input",
|
|
@@ -1075,9 +1098,9 @@ function SettingsPanel({ config, onSave, onCancel }) {
|
|
|
1075
1098
|
}
|
|
1076
1099
|
)
|
|
1077
1100
|
] }),
|
|
1078
|
-
/* @__PURE__ */
|
|
1079
|
-
/* @__PURE__ */
|
|
1080
|
-
/* @__PURE__ */
|
|
1101
|
+
/* @__PURE__ */ jsxs6("label", { className: "shiteki-settings-field", children: [
|
|
1102
|
+
/* @__PURE__ */ jsx9("span", { className: "shiteki-settings-label", children: "Owner" }),
|
|
1103
|
+
/* @__PURE__ */ jsx9(
|
|
1081
1104
|
"input",
|
|
1082
1105
|
{
|
|
1083
1106
|
className: "shiteki-settings-input",
|
|
@@ -1088,9 +1111,9 @@ function SettingsPanel({ config, onSave, onCancel }) {
|
|
|
1088
1111
|
}
|
|
1089
1112
|
)
|
|
1090
1113
|
] }),
|
|
1091
|
-
/* @__PURE__ */
|
|
1092
|
-
/* @__PURE__ */
|
|
1093
|
-
/* @__PURE__ */
|
|
1114
|
+
/* @__PURE__ */ jsxs6("label", { className: "shiteki-settings-field", children: [
|
|
1115
|
+
/* @__PURE__ */ jsx9("span", { className: "shiteki-settings-label", children: "Repo" }),
|
|
1116
|
+
/* @__PURE__ */ jsx9(
|
|
1094
1117
|
"input",
|
|
1095
1118
|
{
|
|
1096
1119
|
className: "shiteki-settings-input",
|
|
@@ -1101,12 +1124,12 @@ function SettingsPanel({ config, onSave, onCancel }) {
|
|
|
1101
1124
|
}
|
|
1102
1125
|
)
|
|
1103
1126
|
] }),
|
|
1104
|
-
/* @__PURE__ */
|
|
1105
|
-
/* @__PURE__ */
|
|
1127
|
+
/* @__PURE__ */ jsxs6("label", { className: "shiteki-settings-field", children: [
|
|
1128
|
+
/* @__PURE__ */ jsxs6("span", { className: "shiteki-settings-label", children: [
|
|
1106
1129
|
"Labels",
|
|
1107
|
-
/* @__PURE__ */
|
|
1130
|
+
/* @__PURE__ */ jsx9(HelpLink, { href: "https://docs.github.com/en/issues/using-labels-and-milestones-to-track-work/managing-labels" })
|
|
1108
1131
|
] }),
|
|
1109
|
-
/* @__PURE__ */
|
|
1132
|
+
/* @__PURE__ */ jsx9(
|
|
1110
1133
|
"input",
|
|
1111
1134
|
{
|
|
1112
1135
|
className: "shiteki-settings-input",
|
|
@@ -1117,9 +1140,9 @@ function SettingsPanel({ config, onSave, onCancel }) {
|
|
|
1117
1140
|
}
|
|
1118
1141
|
)
|
|
1119
1142
|
] }),
|
|
1120
|
-
/* @__PURE__ */
|
|
1121
|
-
/* @__PURE__ */
|
|
1122
|
-
/* @__PURE__ */
|
|
1143
|
+
/* @__PURE__ */ jsxs6("label", { className: "shiteki-settings-field shiteki-settings-field--row", children: [
|
|
1144
|
+
/* @__PURE__ */ jsx9("span", { className: "shiteki-settings-label", children: "Clear after copy" }),
|
|
1145
|
+
/* @__PURE__ */ jsx9(
|
|
1123
1146
|
"input",
|
|
1124
1147
|
{
|
|
1125
1148
|
type: "checkbox",
|
|
@@ -1130,9 +1153,9 @@ function SettingsPanel({ config, onSave, onCancel }) {
|
|
|
1130
1153
|
)
|
|
1131
1154
|
] })
|
|
1132
1155
|
] }),
|
|
1133
|
-
/* @__PURE__ */
|
|
1134
|
-
/* @__PURE__ */
|
|
1135
|
-
/* @__PURE__ */
|
|
1156
|
+
/* @__PURE__ */ jsxs6("div", { className: "shiteki-settings-actions", children: [
|
|
1157
|
+
/* @__PURE__ */ jsx9("button", { className: "shiteki-btn shiteki-btn--ghost", onClick: onCancel, children: "Cancel" }),
|
|
1158
|
+
/* @__PURE__ */ jsx9("button", { className: "shiteki-btn shiteki-btn--primary", onClick: handleSave, children: "Save" })
|
|
1136
1159
|
] })
|
|
1137
1160
|
]
|
|
1138
1161
|
}
|
|
@@ -1142,7 +1165,7 @@ function SettingsPanel({ config, onSave, onCancel }) {
|
|
|
1142
1165
|
// src/components/SendDialog.tsx
|
|
1143
1166
|
import { useCallback as useCallback8, useEffect as useEffect7, useRef as useRef7, useState as useState11 } from "react";
|
|
1144
1167
|
import { motion as motion7 } from "motion/react";
|
|
1145
|
-
import { jsx as
|
|
1168
|
+
import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
1146
1169
|
function SendDialog({ defaultTitle, sending, onConfirm, onCancel }) {
|
|
1147
1170
|
const [title, setTitle] = useState11(defaultTitle);
|
|
1148
1171
|
const inputRef = useRef7(null);
|
|
@@ -1158,7 +1181,7 @@ function SendDialog({ defaultTitle, sending, onConfirm, onCancel }) {
|
|
|
1158
1181
|
},
|
|
1159
1182
|
[title, sending, onConfirm]
|
|
1160
1183
|
);
|
|
1161
|
-
return /* @__PURE__ */
|
|
1184
|
+
return /* @__PURE__ */ jsxs7(
|
|
1162
1185
|
motion7.div,
|
|
1163
1186
|
{
|
|
1164
1187
|
className: "shiteki-popover",
|
|
@@ -1173,9 +1196,9 @@ function SendDialog({ defaultTitle, sending, onConfirm, onCancel }) {
|
|
|
1173
1196
|
exit: { opacity: 0, y: 12 },
|
|
1174
1197
|
transition: spring,
|
|
1175
1198
|
children: [
|
|
1176
|
-
/* @__PURE__ */
|
|
1177
|
-
/* @__PURE__ */
|
|
1178
|
-
/* @__PURE__ */
|
|
1199
|
+
/* @__PURE__ */ jsx10("div", { className: "shiteki-popover-info", children: /* @__PURE__ */ jsx10("span", { className: "shiteki-popover-tag", children: "Create Issue" }) }),
|
|
1200
|
+
/* @__PURE__ */ jsxs7("form", { className: "shiteki-popover-form", onSubmit: handleSubmit, children: [
|
|
1201
|
+
/* @__PURE__ */ jsx10(
|
|
1179
1202
|
"input",
|
|
1180
1203
|
{
|
|
1181
1204
|
ref: inputRef,
|
|
@@ -1186,8 +1209,8 @@ function SendDialog({ defaultTitle, sending, onConfirm, onCancel }) {
|
|
|
1186
1209
|
placeholder: "Issue title"
|
|
1187
1210
|
}
|
|
1188
1211
|
),
|
|
1189
|
-
/* @__PURE__ */
|
|
1190
|
-
/* @__PURE__ */
|
|
1212
|
+
/* @__PURE__ */ jsxs7("div", { className: "shiteki-popover-actions", children: [
|
|
1213
|
+
/* @__PURE__ */ jsx10(
|
|
1191
1214
|
"button",
|
|
1192
1215
|
{
|
|
1193
1216
|
type: "button",
|
|
@@ -1197,7 +1220,7 @@ function SendDialog({ defaultTitle, sending, onConfirm, onCancel }) {
|
|
|
1197
1220
|
children: "Cancel"
|
|
1198
1221
|
}
|
|
1199
1222
|
),
|
|
1200
|
-
/* @__PURE__ */
|
|
1223
|
+
/* @__PURE__ */ jsx10(
|
|
1201
1224
|
"button",
|
|
1202
1225
|
{
|
|
1203
1226
|
type: "submit",
|
|
@@ -1239,7 +1262,7 @@ function styleInject(css, { insertAt } = {}) {
|
|
|
1239
1262
|
styleInject('.shiteki-root {\n --shiteki-primary: #2563eb;\n --shiteki-primary-hover: #1d4ed8;\n --shiteki-bg: #ffffff;\n --shiteki-border: #e5e7eb;\n --shiteki-text: #111827;\n --shiteki-text-secondary: #6b7280;\n --shiteki-radius: 12px;\n --shiteki-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n font-family:\n -apple-system,\n BlinkMacSystemFont,\n "Segoe UI",\n Roboto,\n sans-serif;\n font-size: 14px;\n line-height: 1.5;\n color: var(--shiteki-text);\n box-sizing: border-box;\n}\n.shiteki-toolbar {\n position: fixed;\n bottom: 20px;\n right: 20px;\n display: flex;\n align-items: center;\n gap: 2px;\n border-radius: 9999px;\n z-index: 99999;\n background: var(--shiteki-bg);\n border: 1px solid var(--shiteki-border);\n box-shadow: var(--shiteki-shadow);\n}\n.shiteki-toolbar-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n border: none;\n border-radius: 50%;\n background: transparent;\n color: var(--shiteki-text);\n cursor: pointer;\n transition: background 0.15s, color 0.15s;\n}\n.shiteki-toolbar-btn:hover {\n background: #f3f4f6;\n}\n.shiteki-toolbar-btn:active {\n transform: scale(0.9);\n}\n.shiteki-toolbar-btn--active {\n background: var(--shiteki-primary);\n color: #fff;\n}\n.shiteki-toolbar-btn--active:hover {\n background: var(--shiteki-primary-hover);\n}\n.shiteki-toolbar-btn:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n.shiteki-toolbar-picker {\n position: relative;\n}\n.shiteki-toolbar-badge {\n position: absolute;\n top: -4px;\n right: -6px;\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 16px;\n height: 16px;\n padding: 0 4px;\n border-radius: 8px;\n background: #ef4444;\n color: #fff;\n font-size: 10px;\n font-weight: 700;\n line-height: 1;\n pointer-events: none;\n box-sizing: border-box;\n}\n.shiteki-toolbar-sep {\n width: 1px;\n height: 24px;\n background: var(--shiteki-border);\n margin: 0 4px;\n}\n.shiteki-highlight {\n position: fixed;\n pointer-events: none;\n border: 1.5px solid var(--shiteki-primary, #2563eb);\n background: rgba(37, 99, 235, 0.08);\n z-index: 99997;\n transition: all 0.05s ease-out;\n box-sizing: border-box;\n}\n.shiteki-marker {\n position: fixed;\n width: 22px;\n height: 22px;\n border-radius: 50%;\n background: var(--shiteki-primary, #2563eb);\n color: #fff;\n font-size: 11px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n z-index: 99998;\n box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);\n user-select: none;\n}\n.shiteki-popover {\n position: fixed;\n width: 320px;\n background: var(--shiteki-bg);\n border: 1px solid var(--shiteki-border);\n border-radius: var(--shiteki-radius);\n box-shadow: var(--shiteki-shadow);\n z-index: 99999;\n overflow: hidden;\n}\n.shiteki-popover-info {\n padding: 10px 14px;\n background: #f9fafb;\n border-bottom: 1px solid var(--shiteki-border);\n display: flex;\n align-items: baseline;\n gap: 8px;\n overflow: hidden;\n}\n.shiteki-popover-tag {\n font-family:\n ui-monospace,\n SFMono-Regular,\n "SF Mono",\n Menlo,\n monospace;\n font-size: 12px;\n font-weight: 600;\n color: var(--shiteki-primary);\n white-space: nowrap;\n}\n.shiteki-popover-text {\n font-size: 12px;\n color: var(--shiteki-text-secondary);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.shiteki-popover-form {\n padding: 12px 14px;\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n.shiteki-popover-textarea {\n width: 100%;\n padding: 8px 10px;\n border: 1px solid var(--shiteki-border);\n border-radius: 8px;\n font: inherit;\n font-size: 13px;\n color: var(--shiteki-text);\n background: transparent;\n outline: none;\n resize: vertical;\n min-height: 60px;\n box-sizing: border-box;\n transition: border-color 0.15s;\n}\n.shiteki-popover-textarea:focus {\n border-color: var(--shiteki-primary);\n}\n.shiteki-popover-comment {\n font-size: 13px;\n color: var(--shiteki-text);\n white-space: pre-wrap;\n word-break: break-word;\n}\n.shiteki-popover-actions {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n}\n.shiteki-btn {\n padding: 6px 14px;\n border: none;\n border-radius: 8px;\n font: inherit;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: background 0.15s;\n}\n.shiteki-btn:active {\n transform: scale(0.95);\n}\n.shiteki-btn--primary {\n background: var(--shiteki-primary);\n color: #fff;\n}\n.shiteki-btn--primary:hover:not(:disabled) {\n background: var(--shiteki-primary-hover);\n}\n.shiteki-btn--primary:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.shiteki-btn--ghost {\n background: transparent;\n color: var(--shiteki-text-secondary);\n}\n.shiteki-btn--ghost:hover {\n background: #f3f4f6;\n}\n.shiteki-btn--danger {\n background: #fee2e2;\n color: #dc2626;\n}\n.shiteki-btn--danger:hover {\n background: #fecaca;\n}\n.shiteki-btn--icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 30px;\n height: 30px;\n padding: 0;\n}\n.shiteki-status {\n position: fixed;\n bottom: 76px;\n right: 20px;\n padding: 8px 18px;\n background: var(--shiteki-bg);\n border: 1px solid var(--shiteki-border);\n border-radius: 8px;\n box-shadow: var(--shiteki-shadow);\n font-size: 13px;\n white-space: nowrap;\n z-index: 99998;\n}\n.shiteki-status--success {\n color: #059669;\n}\n.shiteki-status--error {\n color: #dc2626;\n}\n.shiteki-status a {\n color: inherit;\n text-decoration: underline;\n}\n.shiteki-settings {\n position: fixed;\n bottom: 76px;\n right: 20px;\n width: 280px;\n background: var(--shiteki-bg);\n border: 1px solid var(--shiteki-border);\n border-radius: var(--shiteki-radius);\n box-shadow: var(--shiteki-shadow);\n z-index: 99999;\n overflow: hidden;\n}\n.shiteki-settings-header {\n padding: 10px 14px;\n font-size: 13px;\n font-weight: 600;\n border-bottom: 1px solid var(--shiteki-border);\n background: #f9fafb;\n}\n.shiteki-settings-body {\n padding: 12px 14px;\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n.shiteki-settings-field {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n.shiteki-settings-field--row {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n}\n.shiteki-settings-checkbox {\n margin: 0;\n accent-color: var(--shiteki-primary);\n cursor: pointer;\n}\n.shiteki-settings-label {\n display: flex;\n align-items: center;\n gap: 4px;\n font-size: 12px;\n font-weight: 500;\n color: var(--shiteki-text-secondary);\n}\n.shiteki-settings-help {\n display: inline-flex;\n align-items: center;\n color: var(--shiteki-text-secondary);\n opacity: 0.5;\n transition: opacity 0.15s;\n}\n.shiteki-settings-help:hover {\n opacity: 1;\n}\n.shiteki-settings-input {\n width: 100%;\n padding: 6px 8px;\n border: 1px solid var(--shiteki-border);\n border-radius: 8px;\n font: inherit;\n font-size: 13px;\n color: var(--shiteki-text);\n background: transparent;\n outline: none;\n box-sizing: border-box;\n transition: border-color 0.15s;\n}\n.shiteki-settings-input:focus {\n border-color: var(--shiteki-primary);\n}\n.shiteki-radio-group {\n display: flex;\n gap: 12px;\n}\n.shiteki-radio {\n display: flex;\n align-items: center;\n gap: 4px;\n font-size: 13px;\n cursor: pointer;\n}\n.shiteki-radio input[type=radio] {\n margin: 0;\n accent-color: var(--shiteki-primary);\n cursor: pointer;\n}\n.shiteki-settings-actions {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n padding: 0 14px 12px;\n}\n.shiteki-shortcut-hint {\n position: absolute;\n bottom: calc(100% + 8px);\n right: 0;\n display: flex;\n flex-direction: column;\n gap: 0;\n padding: 8px 12px;\n background: var(--shiteki-bg);\n border: 1px solid var(--shiteki-border);\n border-radius: 8px;\n box-shadow: var(--shiteki-shadow);\n font-size: 12px;\n color: var(--shiteki-text-secondary);\n white-space: nowrap;\n}\n.shiteki-shortcut-hint-close {\n position: absolute;\n top: 6px;\n right: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n border: none;\n border-radius: 4px;\n background: transparent;\n color: var(--shiteki-text-secondary);\n cursor: pointer;\n padding: 0;\n}\n.shiteki-shortcut-hint-close:hover {\n background: #f3f4f6;\n}\n.shiteki-shortcut-hint-list {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n.shiteki-shortcut-hint-list span {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n.shiteki-shortcut-hint kbd {\n display: inline-block;\n padding: 1px 5px;\n background: #f3f4f6;\n border: 1px solid var(--shiteki-border);\n border-radius: 4px;\n font-family: inherit;\n font-size: 11px;\n font-weight: 600;\n color: var(--shiteki-text);\n line-height: 1.4;\n min-width: 20px;\n text-align: center;\n}\n.shiteki-shortcut-hint-close:hover {\n background: #f3f4f6;\n}\n');
|
|
1240
1263
|
|
|
1241
1264
|
// src/components/ShitekiWidget.tsx
|
|
1242
|
-
import { Fragment, jsx as
|
|
1265
|
+
import { Fragment, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
1243
1266
|
function ShitekiWidget(props) {
|
|
1244
1267
|
const { config, updateConfig } = useConfig(props);
|
|
1245
1268
|
const [open, setOpen] = useState12(false);
|
|
@@ -1389,8 +1412,8 @@ function ShitekiWidget(props) {
|
|
|
1389
1412
|
onCloseSendDialog: handleSendCancel
|
|
1390
1413
|
});
|
|
1391
1414
|
return ReactDOM.createPortal(
|
|
1392
|
-
/* @__PURE__ */
|
|
1393
|
-
/* @__PURE__ */
|
|
1415
|
+
/* @__PURE__ */ jsxs8("div", { className: "shiteki-root", children: [
|
|
1416
|
+
/* @__PURE__ */ jsx11(
|
|
1394
1417
|
Toolbar,
|
|
1395
1418
|
{
|
|
1396
1419
|
open,
|
|
@@ -1409,9 +1432,9 @@ function ShitekiWidget(props) {
|
|
|
1409
1432
|
onDismissHint: dismissHint
|
|
1410
1433
|
}
|
|
1411
1434
|
),
|
|
1412
|
-
open && /* @__PURE__ */
|
|
1413
|
-
/* @__PURE__ */
|
|
1414
|
-
/* @__PURE__ */
|
|
1435
|
+
open && /* @__PURE__ */ jsxs8(Fragment, { children: [
|
|
1436
|
+
/* @__PURE__ */ jsx11(ElementHighlight, { rect: hoveredRect }),
|
|
1437
|
+
/* @__PURE__ */ jsx11(AnimatePresence3, { children: mode === "annotating" && selectedElement && /* @__PURE__ */ jsx11(
|
|
1415
1438
|
AnnotationPopover,
|
|
1416
1439
|
{
|
|
1417
1440
|
elementInfo: selectedElement,
|
|
@@ -1420,8 +1443,8 @@ function ShitekiWidget(props) {
|
|
|
1420
1443
|
},
|
|
1421
1444
|
"popover"
|
|
1422
1445
|
) }),
|
|
1423
|
-
/* @__PURE__ */
|
|
1424
|
-
/* @__PURE__ */
|
|
1446
|
+
/* @__PURE__ */ jsx11(AnnotationMarkers, { annotations, onClick: handleMarkerClick }),
|
|
1447
|
+
/* @__PURE__ */ jsx11(AnimatePresence3, { children: viewingAnnotation && /* @__PURE__ */ jsx11(
|
|
1425
1448
|
AnnotationDetailPopover,
|
|
1426
1449
|
{
|
|
1427
1450
|
annotation: viewingAnnotation,
|
|
@@ -1432,8 +1455,8 @@ function ShitekiWidget(props) {
|
|
|
1432
1455
|
},
|
|
1433
1456
|
"detail"
|
|
1434
1457
|
) }),
|
|
1435
|
-
/* @__PURE__ */
|
|
1436
|
-
settingsOpen && /* @__PURE__ */
|
|
1458
|
+
/* @__PURE__ */ jsxs8(AnimatePresence3, { children: [
|
|
1459
|
+
settingsOpen && /* @__PURE__ */ jsx11(
|
|
1437
1460
|
SettingsPanel,
|
|
1438
1461
|
{
|
|
1439
1462
|
config,
|
|
@@ -1442,7 +1465,7 @@ function ShitekiWidget(props) {
|
|
|
1442
1465
|
},
|
|
1443
1466
|
"settings"
|
|
1444
1467
|
),
|
|
1445
|
-
sendDialogOpen && /* @__PURE__ */
|
|
1468
|
+
sendDialogOpen && /* @__PURE__ */ jsx11(
|
|
1446
1469
|
SendDialog,
|
|
1447
1470
|
{
|
|
1448
1471
|
defaultTitle: `Visual Annotations (${annotations.length}) \u2014 ${document.title || location.href}`,
|
|
@@ -1453,7 +1476,7 @@ function ShitekiWidget(props) {
|
|
|
1453
1476
|
"send-dialog"
|
|
1454
1477
|
)
|
|
1455
1478
|
] }),
|
|
1456
|
-
/* @__PURE__ */
|
|
1479
|
+
/* @__PURE__ */ jsx11(AnimatePresence3, { children: submitState.status !== "idle" && /* @__PURE__ */ jsx11(StatusMessage, { state: submitState, onDismiss: resetSubmit }, "status") })
|
|
1457
1480
|
] })
|
|
1458
1481
|
] }),
|
|
1459
1482
|
document.body
|