apostil 0.1.0 → 0.1.2
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/README.md +26 -16
- package/dist/cli/index.js +59 -22
- package/dist/cli/index.js.map +1 -1
- package/dist/index.js +170 -112
- package/dist/index.js.map +1 -1
- package/package.json +2 -4
package/dist/index.js
CHANGED
|
@@ -417,12 +417,72 @@ function CommentPin({
|
|
|
417
417
|
|
|
418
418
|
// src/components/comment-thread.tsx
|
|
419
419
|
import { useEffect as useEffect4, useRef as useRef3, useState as useState4, useCallback as useCallback3 } from "react";
|
|
420
|
-
|
|
420
|
+
|
|
421
|
+
// src/icons.tsx
|
|
422
|
+
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
423
|
+
function Send({ className = "w-4 h-4" }) {
|
|
424
|
+
return /* @__PURE__ */ jsxs2("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
425
|
+
/* @__PURE__ */ jsx3("path", { d: "m22 2-7 20-4-9-9-4Z" }),
|
|
426
|
+
/* @__PURE__ */ jsx3("path", { d: "M22 2 11 13" })
|
|
427
|
+
] });
|
|
428
|
+
}
|
|
429
|
+
function MessageSquare({ className = "w-4 h-4" }) {
|
|
430
|
+
return /* @__PURE__ */ jsx3("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx3("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) });
|
|
431
|
+
}
|
|
432
|
+
function List({ className = "w-4 h-4" }) {
|
|
433
|
+
return /* @__PURE__ */ jsxs2("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
434
|
+
/* @__PURE__ */ jsx3("line", { x1: "8", x2: "21", y1: "6", y2: "6" }),
|
|
435
|
+
/* @__PURE__ */ jsx3("line", { x1: "8", x2: "21", y1: "12", y2: "12" }),
|
|
436
|
+
/* @__PURE__ */ jsx3("line", { x1: "8", x2: "21", y1: "18", y2: "18" }),
|
|
437
|
+
/* @__PURE__ */ jsx3("line", { x1: "3", x2: "3.01", y1: "6", y2: "6" }),
|
|
438
|
+
/* @__PURE__ */ jsx3("line", { x1: "3", x2: "3.01", y1: "12", y2: "12" }),
|
|
439
|
+
/* @__PURE__ */ jsx3("line", { x1: "3", x2: "3.01", y1: "18", y2: "18" })
|
|
440
|
+
] });
|
|
441
|
+
}
|
|
442
|
+
function X({ className = "w-4 h-4" }) {
|
|
443
|
+
return /* @__PURE__ */ jsxs2("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
444
|
+
/* @__PURE__ */ jsx3("path", { d: "M18 6 6 18" }),
|
|
445
|
+
/* @__PURE__ */ jsx3("path", { d: "m6 6 12 12" })
|
|
446
|
+
] });
|
|
447
|
+
}
|
|
448
|
+
function Check({ className = "w-4 h-4" }) {
|
|
449
|
+
return /* @__PURE__ */ jsx3("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx3("path", { d: "M20 6 9 17l-5-5" }) });
|
|
450
|
+
}
|
|
451
|
+
function Undo2({ className = "w-4 h-4" }) {
|
|
452
|
+
return /* @__PURE__ */ jsxs2("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
453
|
+
/* @__PURE__ */ jsx3("path", { d: "M9 14 4 9l5-5" }),
|
|
454
|
+
/* @__PURE__ */ jsx3("path", { d: "M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11" })
|
|
455
|
+
] });
|
|
456
|
+
}
|
|
457
|
+
function Globe({ className = "w-4 h-4" }) {
|
|
458
|
+
return /* @__PURE__ */ jsxs2("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
459
|
+
/* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "10" }),
|
|
460
|
+
/* @__PURE__ */ jsx3("path", { d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" }),
|
|
461
|
+
/* @__PURE__ */ jsx3("path", { d: "M2 12h20" })
|
|
462
|
+
] });
|
|
463
|
+
}
|
|
464
|
+
function FileText({ className = "w-4 h-4" }) {
|
|
465
|
+
return /* @__PURE__ */ jsxs2("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
466
|
+
/* @__PURE__ */ jsx3("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
|
|
467
|
+
/* @__PURE__ */ jsx3("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" }),
|
|
468
|
+
/* @__PURE__ */ jsx3("path", { d: "M10 9H8" }),
|
|
469
|
+
/* @__PURE__ */ jsx3("path", { d: "M16 13H8" }),
|
|
470
|
+
/* @__PURE__ */ jsx3("path", { d: "M16 17H8" })
|
|
471
|
+
] });
|
|
472
|
+
}
|
|
473
|
+
function Trash2({ className = "w-4 h-4" }) {
|
|
474
|
+
return /* @__PURE__ */ jsxs2("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
475
|
+
/* @__PURE__ */ jsx3("path", { d: "M3 6h18" }),
|
|
476
|
+
/* @__PURE__ */ jsx3("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }),
|
|
477
|
+
/* @__PURE__ */ jsx3("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" }),
|
|
478
|
+
/* @__PURE__ */ jsx3("line", { x1: "10", x2: "10", y1: "11", y2: "17" }),
|
|
479
|
+
/* @__PURE__ */ jsx3("line", { x1: "14", x2: "14", y1: "11", y2: "17" })
|
|
480
|
+
] });
|
|
481
|
+
}
|
|
421
482
|
|
|
422
483
|
// src/components/comment-composer.tsx
|
|
423
484
|
import { useState as useState3, useRef as useRef2, useEffect as useEffect3 } from "react";
|
|
424
|
-
import {
|
|
425
|
-
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
485
|
+
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
426
486
|
function CommentComposer({
|
|
427
487
|
onSubmit,
|
|
428
488
|
placeholder = "Add a comment...",
|
|
@@ -441,8 +501,8 @@ function CommentComposer({
|
|
|
441
501
|
onSubmit(trimmed);
|
|
442
502
|
setValue("");
|
|
443
503
|
};
|
|
444
|
-
return /* @__PURE__ */
|
|
445
|
-
/* @__PURE__ */
|
|
504
|
+
return /* @__PURE__ */ jsxs3("div", { className: "flex gap-2 items-end", children: [
|
|
505
|
+
/* @__PURE__ */ jsx4(
|
|
446
506
|
"textarea",
|
|
447
507
|
{
|
|
448
508
|
ref: inputRef,
|
|
@@ -459,20 +519,20 @@ function CommentComposer({
|
|
|
459
519
|
className: "flex-1 resize-none rounded-lg border border-neutral-200 bg-white px-3 py-2 text-sm\n placeholder:text-neutral-400 focus:outline-none focus:ring-2 focus:ring-neutral-300\n min-h-[36px] max-h-[120px]"
|
|
460
520
|
}
|
|
461
521
|
),
|
|
462
|
-
/* @__PURE__ */
|
|
522
|
+
/* @__PURE__ */ jsx4(
|
|
463
523
|
"button",
|
|
464
524
|
{
|
|
465
525
|
onClick: handleSubmit,
|
|
466
526
|
disabled: !value.trim(),
|
|
467
527
|
className: "flex items-center justify-center w-8 h-8 rounded-lg\n bg-neutral-900 text-white disabled:opacity-30\n hover:bg-neutral-700 transition-colors shrink-0",
|
|
468
|
-
children: /* @__PURE__ */
|
|
528
|
+
children: /* @__PURE__ */ jsx4(Send, { className: "w-3.5 h-3.5" })
|
|
469
529
|
}
|
|
470
530
|
)
|
|
471
531
|
] });
|
|
472
532
|
}
|
|
473
533
|
|
|
474
534
|
// src/components/comment-thread.tsx
|
|
475
|
-
import { jsx as
|
|
535
|
+
import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
476
536
|
function timeAgo(iso) {
|
|
477
537
|
const diff = Date.now() - new Date(iso).getTime();
|
|
478
538
|
const mins = Math.floor(diff / 6e4);
|
|
@@ -518,48 +578,48 @@ function ApostilThreadPopover({
|
|
|
518
578
|
};
|
|
519
579
|
}, [isOpen, setActiveThreadId]);
|
|
520
580
|
if (!isOpen || !pos) return null;
|
|
521
|
-
return /* @__PURE__ */
|
|
581
|
+
return /* @__PURE__ */ jsx5(
|
|
522
582
|
"div",
|
|
523
583
|
{
|
|
524
584
|
ref,
|
|
525
585
|
className: "absolute z-[70] ml-5 -mt-3",
|
|
526
586
|
style: { left: pos.left, top: pos.top },
|
|
527
587
|
onClick: (e) => e.stopPropagation(),
|
|
528
|
-
children: /* @__PURE__ */
|
|
529
|
-
/* @__PURE__ */
|
|
530
|
-
/* @__PURE__ */
|
|
531
|
-
/* @__PURE__ */
|
|
588
|
+
children: /* @__PURE__ */ jsxs4("div", { className: "w-80 bg-white rounded-xl shadow-2xl border border-neutral-200 overflow-hidden", children: [
|
|
589
|
+
/* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between px-4 py-2.5 border-b border-neutral-100 bg-neutral-50", children: [
|
|
590
|
+
/* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
|
|
591
|
+
/* @__PURE__ */ jsxs4("span", { className: "text-xs font-medium text-neutral-500", children: [
|
|
532
592
|
thread.comments.length,
|
|
533
593
|
" ",
|
|
534
594
|
thread.comments.length === 1 ? "comment" : "comments"
|
|
535
595
|
] }),
|
|
536
|
-
thread.targetLabel && /* @__PURE__ */
|
|
537
|
-
thread.resolved && /* @__PURE__ */
|
|
596
|
+
thread.targetLabel && /* @__PURE__ */ jsx5("span", { className: "text-[10px] bg-blue-50 text-blue-600 px-1.5 py-0.5 rounded font-medium", children: thread.targetLabel }),
|
|
597
|
+
thread.resolved && /* @__PURE__ */ jsx5("span", { className: "text-[10px] text-emerald-600 font-medium", children: "Resolved" })
|
|
538
598
|
] }),
|
|
539
|
-
/* @__PURE__ */
|
|
540
|
-
/* @__PURE__ */
|
|
599
|
+
/* @__PURE__ */ jsxs4("div", { className: "flex gap-1", children: [
|
|
600
|
+
/* @__PURE__ */ jsx5(
|
|
541
601
|
"button",
|
|
542
602
|
{
|
|
543
603
|
onClick: () => resolveThread(thread.id),
|
|
544
604
|
className: "p-1 rounded hover:bg-neutral-200 transition-colors",
|
|
545
605
|
title: thread.resolved ? "Reopen" : "Resolve",
|
|
546
|
-
children: thread.resolved ? /* @__PURE__ */
|
|
606
|
+
children: thread.resolved ? /* @__PURE__ */ jsx5(Undo2, { className: "w-3.5 h-3.5 text-neutral-500" }) : /* @__PURE__ */ jsx5(Check, { className: "w-3.5 h-3.5 text-emerald-600" })
|
|
547
607
|
}
|
|
548
608
|
),
|
|
549
|
-
/* @__PURE__ */
|
|
609
|
+
/* @__PURE__ */ jsx5(
|
|
550
610
|
"button",
|
|
551
611
|
{
|
|
552
612
|
onClick: () => deleteThread(thread.id),
|
|
553
613
|
className: "p-1 rounded hover:bg-red-50 transition-colors",
|
|
554
614
|
title: "Delete thread",
|
|
555
|
-
children: /* @__PURE__ */
|
|
615
|
+
children: /* @__PURE__ */ jsx5(Trash2, { className: "w-3.5 h-3.5 text-neutral-400 hover:text-red-500" })
|
|
556
616
|
}
|
|
557
617
|
)
|
|
558
618
|
] })
|
|
559
619
|
] }),
|
|
560
|
-
/* @__PURE__ */
|
|
561
|
-
/* @__PURE__ */
|
|
562
|
-
/* @__PURE__ */
|
|
620
|
+
/* @__PURE__ */ jsx5("div", { className: "max-h-64 overflow-y-auto", children: thread.comments.map((comment) => /* @__PURE__ */ jsxs4("div", { className: "px-4 py-3 border-b border-neutral-50 last:border-0", children: [
|
|
621
|
+
/* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 mb-1", children: [
|
|
622
|
+
/* @__PURE__ */ jsx5(
|
|
563
623
|
"div",
|
|
564
624
|
{
|
|
565
625
|
className: "w-5 h-5 rounded-full flex items-center justify-center text-white text-[10px] font-semibold shrink-0",
|
|
@@ -567,12 +627,12 @@ function ApostilThreadPopover({
|
|
|
567
627
|
children: comment.author.name[0]?.toUpperCase()
|
|
568
628
|
}
|
|
569
629
|
),
|
|
570
|
-
/* @__PURE__ */
|
|
571
|
-
/* @__PURE__ */
|
|
630
|
+
/* @__PURE__ */ jsx5("span", { className: "text-xs font-medium text-neutral-800", children: comment.author.name }),
|
|
631
|
+
/* @__PURE__ */ jsx5("span", { className: "text-[10px] text-neutral-400 ml-auto", children: timeAgo(comment.createdAt) })
|
|
572
632
|
] }),
|
|
573
|
-
/* @__PURE__ */
|
|
633
|
+
/* @__PURE__ */ jsx5("p", { className: "text-sm text-neutral-700 leading-relaxed pl-7", children: comment.body })
|
|
574
634
|
] }, comment.id)) }),
|
|
575
|
-
user && !thread.resolved && /* @__PURE__ */
|
|
635
|
+
user && !thread.resolved && /* @__PURE__ */ jsx5("div", { className: "px-3 py-2.5 border-t border-neutral-100 bg-neutral-50/50", children: /* @__PURE__ */ jsx5(
|
|
576
636
|
CommentComposer,
|
|
577
637
|
{
|
|
578
638
|
onSubmit: (body) => addReply(thread.id, body),
|
|
@@ -587,7 +647,7 @@ function ApostilThreadPopover({
|
|
|
587
647
|
|
|
588
648
|
// src/components/user-prompt.tsx
|
|
589
649
|
import { useState as useState5 } from "react";
|
|
590
|
-
import { jsx as
|
|
650
|
+
import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
591
651
|
function UserPrompt() {
|
|
592
652
|
const { user, setUser, commentMode } = useApostil();
|
|
593
653
|
const [name, setName] = useState5("");
|
|
@@ -597,10 +657,10 @@ function UserPrompt() {
|
|
|
597
657
|
if (!trimmed) return;
|
|
598
658
|
setUser(trimmed);
|
|
599
659
|
};
|
|
600
|
-
return /* @__PURE__ */
|
|
601
|
-
/* @__PURE__ */
|
|
602
|
-
/* @__PURE__ */
|
|
603
|
-
/* @__PURE__ */
|
|
660
|
+
return /* @__PURE__ */ jsx6("div", { className: "absolute inset-0 z-[80] flex items-center justify-center bg-black/20 backdrop-blur-[2px]", children: /* @__PURE__ */ jsxs5("div", { className: "bg-white rounded-xl shadow-2xl border border-neutral-200 p-6 w-80", children: [
|
|
661
|
+
/* @__PURE__ */ jsx6("h3", { className: "text-sm font-semibold text-neutral-900 mb-1", children: "What's your name?" }),
|
|
662
|
+
/* @__PURE__ */ jsx6("p", { className: "text-xs text-neutral-500 mb-4", children: "This will be shown with your comments." }),
|
|
663
|
+
/* @__PURE__ */ jsx6(
|
|
604
664
|
"input",
|
|
605
665
|
{
|
|
606
666
|
value: name,
|
|
@@ -613,7 +673,7 @@ function UserPrompt() {
|
|
|
613
673
|
className: "w-full rounded-lg border border-neutral-200 px-3 py-2 text-sm\n placeholder:text-neutral-400 focus:outline-none focus:ring-2 focus:ring-neutral-300 mb-3"
|
|
614
674
|
}
|
|
615
675
|
),
|
|
616
|
-
/* @__PURE__ */
|
|
676
|
+
/* @__PURE__ */ jsx6(
|
|
617
677
|
"button",
|
|
618
678
|
{
|
|
619
679
|
onClick: handleSubmit,
|
|
@@ -626,7 +686,7 @@ function UserPrompt() {
|
|
|
626
686
|
}
|
|
627
687
|
|
|
628
688
|
// src/components/comment-overlay.tsx
|
|
629
|
-
import { Fragment, jsx as
|
|
689
|
+
import { Fragment, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
630
690
|
var cachedHighZ = 0;
|
|
631
691
|
var cacheTimestamp = 0;
|
|
632
692
|
function getHighestZIndex() {
|
|
@@ -879,9 +939,9 @@ function CommentOverlay() {
|
|
|
879
939
|
if (a.resolved !== b.resolved) return a.resolved ? 1 : -1;
|
|
880
940
|
return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
|
|
881
941
|
});
|
|
882
|
-
return /* @__PURE__ */
|
|
883
|
-
/* @__PURE__ */
|
|
884
|
-
/* @__PURE__ */
|
|
942
|
+
return /* @__PURE__ */ jsxs6(Fragment, { children: [
|
|
943
|
+
/* @__PURE__ */ jsx7(UserPrompt, {}),
|
|
944
|
+
/* @__PURE__ */ jsxs6(
|
|
885
945
|
"div",
|
|
886
946
|
{
|
|
887
947
|
ref: overlayRef,
|
|
@@ -889,11 +949,11 @@ function CommentOverlay() {
|
|
|
889
949
|
style: { zIndex: commentMode ? getHighestZIndex() + 10 : 55 },
|
|
890
950
|
onMouseDown: handleClick,
|
|
891
951
|
children: [
|
|
892
|
-
sortedThreads.map((thread, i) => /* @__PURE__ */
|
|
893
|
-
/* @__PURE__ */
|
|
894
|
-
/* @__PURE__ */
|
|
952
|
+
sortedThreads.map((thread, i) => /* @__PURE__ */ jsxs6("div", { className: "pointer-events-auto", children: [
|
|
953
|
+
/* @__PURE__ */ jsx7(CommentPin, { thread, index: i, overlayRef }),
|
|
954
|
+
/* @__PURE__ */ jsx7(ApostilThreadPopover, { thread, overlayRef })
|
|
895
955
|
] }, thread.id)),
|
|
896
|
-
pendingPin && pendingPixel && user && /* @__PURE__ */
|
|
956
|
+
pendingPin && pendingPixel && user && /* @__PURE__ */ jsxs6(
|
|
897
957
|
"div",
|
|
898
958
|
{
|
|
899
959
|
className: "absolute z-[70] pointer-events-auto",
|
|
@@ -904,7 +964,7 @@ function CommentOverlay() {
|
|
|
904
964
|
onMouseDown: (e) => e.stopPropagation(),
|
|
905
965
|
onClick: (e) => e.stopPropagation(),
|
|
906
966
|
children: [
|
|
907
|
-
/* @__PURE__ */
|
|
967
|
+
/* @__PURE__ */ jsx7(
|
|
908
968
|
"div",
|
|
909
969
|
{
|
|
910
970
|
className: "absolute -translate-x-1/2 -translate-y-1/2 w-7 h-7 rounded-full\n flex items-center justify-center text-white text-xs font-semibold\n shadow-lg ring-2 ring-white ring-offset-2 animate-bounce",
|
|
@@ -912,12 +972,12 @@ function CommentOverlay() {
|
|
|
912
972
|
children: "+"
|
|
913
973
|
}
|
|
914
974
|
),
|
|
915
|
-
/* @__PURE__ */
|
|
916
|
-
/* @__PURE__ */
|
|
917
|
-
/* @__PURE__ */
|
|
918
|
-
pendingPin.targetLabel && /* @__PURE__ */
|
|
975
|
+
/* @__PURE__ */ jsx7("div", { className: "absolute ml-5 -mt-3 w-72", children: /* @__PURE__ */ jsxs6("div", { className: "bg-white rounded-xl shadow-2xl border border-neutral-200 p-3", children: [
|
|
976
|
+
/* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2 mb-2", children: [
|
|
977
|
+
/* @__PURE__ */ jsx7("p", { className: "text-xs text-neutral-500", children: "New comment" }),
|
|
978
|
+
pendingPin.targetLabel && /* @__PURE__ */ jsx7("span", { className: "text-[10px] bg-blue-50 text-blue-600 px-1.5 py-0.5 rounded font-medium", children: pendingPin.targetLabel })
|
|
919
979
|
] }),
|
|
920
|
-
/* @__PURE__ */
|
|
980
|
+
/* @__PURE__ */ jsx7(
|
|
921
981
|
CommentComposer,
|
|
922
982
|
{
|
|
923
983
|
onSubmit: handleNewComment,
|
|
@@ -925,7 +985,7 @@ function CommentOverlay() {
|
|
|
925
985
|
autoFocus: true
|
|
926
986
|
}
|
|
927
987
|
),
|
|
928
|
-
/* @__PURE__ */
|
|
988
|
+
/* @__PURE__ */ jsx7(
|
|
929
989
|
"button",
|
|
930
990
|
{
|
|
931
991
|
onClick: cancelPending,
|
|
@@ -940,13 +1000,12 @@ function CommentOverlay() {
|
|
|
940
1000
|
]
|
|
941
1001
|
}
|
|
942
1002
|
),
|
|
943
|
-
commentMode && !pendingPin && /* @__PURE__ */
|
|
1003
|
+
commentMode && !pendingPin && /* @__PURE__ */ jsx7("div", { className: "absolute bottom-6 left-1/2 -translate-x-1/2 z-[60] pointer-events-none", children: /* @__PURE__ */ jsx7("div", { className: "bg-neutral-900/80 text-white text-sm px-4 py-2 rounded-full backdrop-blur-sm", children: "Click anywhere to add a comment" }) })
|
|
944
1004
|
] });
|
|
945
1005
|
}
|
|
946
1006
|
|
|
947
1007
|
// src/components/comment-toggle.tsx
|
|
948
|
-
import {
|
|
949
|
-
import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
1008
|
+
import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
950
1009
|
function CommentToggle() {
|
|
951
1010
|
const {
|
|
952
1011
|
commentMode,
|
|
@@ -956,8 +1015,8 @@ function CommentToggle() {
|
|
|
956
1015
|
unresolvedCount,
|
|
957
1016
|
setActiveThreadId
|
|
958
1017
|
} = useApostil();
|
|
959
|
-
return /* @__PURE__ */
|
|
960
|
-
/* @__PURE__ */
|
|
1018
|
+
return /* @__PURE__ */ jsxs7("div", { className: "absolute bottom-5 right-5 z-[65] flex flex-col gap-2 items-end", children: [
|
|
1019
|
+
/* @__PURE__ */ jsx8(
|
|
961
1020
|
"button",
|
|
962
1021
|
{
|
|
963
1022
|
onClick: () => setSidebarOpen(!sidebarOpen),
|
|
@@ -965,10 +1024,10 @@ function CommentToggle() {
|
|
|
965
1024
|
transition-all duration-200 hover:scale-105
|
|
966
1025
|
${sidebarOpen ? "bg-neutral-900 text-white" : "bg-white text-neutral-600 hover:bg-neutral-50 border border-neutral-200"}`,
|
|
967
1026
|
title: "Toggle comment list",
|
|
968
|
-
children: /* @__PURE__ */
|
|
1027
|
+
children: /* @__PURE__ */ jsx8(List, { className: "w-4 h-4" })
|
|
969
1028
|
}
|
|
970
1029
|
),
|
|
971
|
-
/* @__PURE__ */
|
|
1030
|
+
/* @__PURE__ */ jsxs7(
|
|
972
1031
|
"button",
|
|
973
1032
|
{
|
|
974
1033
|
onClick: () => {
|
|
@@ -984,8 +1043,8 @@ function CommentToggle() {
|
|
|
984
1043
|
${commentMode ? "bg-neutral-900 text-white ring-2 ring-neutral-400" : "bg-white text-neutral-700 hover:bg-neutral-50 border border-neutral-200"}`,
|
|
985
1044
|
title: commentMode ? "Exit comment mode" : "Add comment",
|
|
986
1045
|
children: [
|
|
987
|
-
commentMode ? /* @__PURE__ */
|
|
988
|
-
unresolvedCount > 0 && !commentMode && /* @__PURE__ */
|
|
1046
|
+
commentMode ? /* @__PURE__ */ jsx8(X, { className: "w-5 h-5" }) : /* @__PURE__ */ jsx8(MessageSquare, { className: "w-5 h-5" }),
|
|
1047
|
+
unresolvedCount > 0 && !commentMode && /* @__PURE__ */ jsx8("span", { className: "absolute -top-1 -right-1 min-w-[18px] h-[18px] rounded-full\n bg-red-500 text-white text-[10px] font-semibold\n flex items-center justify-center px-1", children: unresolvedCount })
|
|
989
1048
|
]
|
|
990
1049
|
}
|
|
991
1050
|
)
|
|
@@ -994,8 +1053,7 @@ function CommentToggle() {
|
|
|
994
1053
|
|
|
995
1054
|
// src/components/comment-sidebar.tsx
|
|
996
1055
|
import { useState as useState7, useEffect as useEffect6 } from "react";
|
|
997
|
-
import {
|
|
998
|
-
import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
1056
|
+
import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
999
1057
|
function timeAgo2(iso) {
|
|
1000
1058
|
const diff = Date.now() - new Date(iso).getTime();
|
|
1001
1059
|
const mins = Math.floor(diff / 6e4);
|
|
@@ -1039,47 +1097,47 @@ function CommentSidebar() {
|
|
|
1039
1097
|
if (!sidebarOpen) return null;
|
|
1040
1098
|
const openThreads = threads.filter((t) => !t.resolved);
|
|
1041
1099
|
const resolvedThreads = threads.filter((t) => t.resolved);
|
|
1042
|
-
return /* @__PURE__ */
|
|
1043
|
-
/* @__PURE__ */
|
|
1044
|
-
/* @__PURE__ */
|
|
1045
|
-
/* @__PURE__ */
|
|
1046
|
-
/* @__PURE__ */
|
|
1100
|
+
return /* @__PURE__ */ jsxs8("div", { className: "absolute top-0 right-0 bottom-0 w-80 z-[75] bg-white border-l border-neutral-200 shadow-xl flex flex-col", children: [
|
|
1101
|
+
/* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between px-4 py-3 border-b border-neutral-100", children: [
|
|
1102
|
+
/* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
|
|
1103
|
+
/* @__PURE__ */ jsx9(MessageSquare, { className: "w-4 h-4 text-neutral-500" }),
|
|
1104
|
+
/* @__PURE__ */ jsx9("span", { className: "text-sm font-semibold text-neutral-900", children: "Comments" })
|
|
1047
1105
|
] }),
|
|
1048
|
-
/* @__PURE__ */
|
|
1106
|
+
/* @__PURE__ */ jsx9(
|
|
1049
1107
|
"button",
|
|
1050
1108
|
{
|
|
1051
1109
|
onClick: () => setSidebarOpen(false),
|
|
1052
1110
|
className: "p-1 rounded hover:bg-neutral-100 transition-colors",
|
|
1053
|
-
children: /* @__PURE__ */
|
|
1111
|
+
children: /* @__PURE__ */ jsx9(X, { className: "w-4 h-4 text-neutral-500" })
|
|
1054
1112
|
}
|
|
1055
1113
|
)
|
|
1056
1114
|
] }),
|
|
1057
|
-
/* @__PURE__ */
|
|
1058
|
-
/* @__PURE__ */
|
|
1115
|
+
/* @__PURE__ */ jsxs8("div", { className: "flex border-b border-neutral-100", children: [
|
|
1116
|
+
/* @__PURE__ */ jsxs8(
|
|
1059
1117
|
"button",
|
|
1060
1118
|
{
|
|
1061
1119
|
onClick: () => setTab("page"),
|
|
1062
1120
|
className: `flex-1 flex items-center justify-center gap-1.5 py-2 text-xs font-medium transition-colors ${tab === "page" ? "text-neutral-900 border-b-2 border-neutral-900" : "text-neutral-400 hover:text-neutral-600"}`,
|
|
1063
1121
|
children: [
|
|
1064
|
-
/* @__PURE__ */
|
|
1122
|
+
/* @__PURE__ */ jsx9(FileText, { className: "w-3 h-3" }),
|
|
1065
1123
|
"This Page",
|
|
1066
|
-
openThreads.length > 0 && /* @__PURE__ */
|
|
1124
|
+
openThreads.length > 0 && /* @__PURE__ */ jsx9("span", { className: "text-[10px] bg-red-50 text-red-600 px-1.5 py-px rounded-full", children: openThreads.length })
|
|
1067
1125
|
]
|
|
1068
1126
|
}
|
|
1069
1127
|
),
|
|
1070
|
-
/* @__PURE__ */
|
|
1128
|
+
/* @__PURE__ */ jsxs8(
|
|
1071
1129
|
"button",
|
|
1072
1130
|
{
|
|
1073
1131
|
onClick: () => setTab("all"),
|
|
1074
1132
|
className: `flex-1 flex items-center justify-center gap-1.5 py-2 text-xs font-medium transition-colors ${tab === "all" ? "text-neutral-900 border-b-2 border-neutral-900" : "text-neutral-400 hover:text-neutral-600"}`,
|
|
1075
1133
|
children: [
|
|
1076
|
-
/* @__PURE__ */
|
|
1134
|
+
/* @__PURE__ */ jsx9(Globe, { className: "w-3 h-3" }),
|
|
1077
1135
|
"All Pages"
|
|
1078
1136
|
]
|
|
1079
1137
|
}
|
|
1080
1138
|
)
|
|
1081
1139
|
] }),
|
|
1082
|
-
/* @__PURE__ */
|
|
1140
|
+
/* @__PURE__ */ jsx9("div", { className: "flex-1 overflow-y-auto", children: tab === "page" ? /* @__PURE__ */ jsx9(
|
|
1083
1141
|
PageThreads,
|
|
1084
1142
|
{
|
|
1085
1143
|
threads,
|
|
@@ -1088,7 +1146,7 @@ function CommentSidebar() {
|
|
|
1088
1146
|
onSelect: setActiveThreadId,
|
|
1089
1147
|
onResolve: resolveThread
|
|
1090
1148
|
}
|
|
1091
|
-
) : /* @__PURE__ */
|
|
1149
|
+
) : /* @__PURE__ */ jsx9(
|
|
1092
1150
|
AllPagesView,
|
|
1093
1151
|
{
|
|
1094
1152
|
pages: allPages,
|
|
@@ -1105,16 +1163,16 @@ function PageThreads({
|
|
|
1105
1163
|
onResolve
|
|
1106
1164
|
}) {
|
|
1107
1165
|
if (threads.length === 0) {
|
|
1108
|
-
return /* @__PURE__ */
|
|
1166
|
+
return /* @__PURE__ */ jsx9("div", { className: "p-6 text-center text-sm text-neutral-400", children: "No comments on this page." });
|
|
1109
1167
|
}
|
|
1110
|
-
return /* @__PURE__ */
|
|
1111
|
-
openThreads.length > 0 && /* @__PURE__ */
|
|
1112
|
-
/* @__PURE__ */
|
|
1168
|
+
return /* @__PURE__ */ jsxs8(Fragment2, { children: [
|
|
1169
|
+
openThreads.length > 0 && /* @__PURE__ */ jsxs8("div", { children: [
|
|
1170
|
+
/* @__PURE__ */ jsxs8("div", { className: "px-4 py-2 text-[10px] font-semibold text-neutral-400 uppercase tracking-wider", children: [
|
|
1113
1171
|
"Open (",
|
|
1114
1172
|
openThreads.length,
|
|
1115
1173
|
")"
|
|
1116
1174
|
] }),
|
|
1117
|
-
openThreads.map((thread) => /* @__PURE__ */
|
|
1175
|
+
openThreads.map((thread) => /* @__PURE__ */ jsx9(
|
|
1118
1176
|
ThreadItem,
|
|
1119
1177
|
{
|
|
1120
1178
|
thread,
|
|
@@ -1124,13 +1182,13 @@ function PageThreads({
|
|
|
1124
1182
|
thread.id
|
|
1125
1183
|
))
|
|
1126
1184
|
] }),
|
|
1127
|
-
resolvedThreads.length > 0 && /* @__PURE__ */
|
|
1128
|
-
/* @__PURE__ */
|
|
1185
|
+
resolvedThreads.length > 0 && /* @__PURE__ */ jsxs8("div", { children: [
|
|
1186
|
+
/* @__PURE__ */ jsxs8("div", { className: "px-4 py-2 text-[10px] font-semibold text-neutral-400 uppercase tracking-wider", children: [
|
|
1129
1187
|
"Resolved (",
|
|
1130
1188
|
resolvedThreads.length,
|
|
1131
1189
|
")"
|
|
1132
1190
|
] }),
|
|
1133
|
-
resolvedThreads.map((thread) => /* @__PURE__ */
|
|
1191
|
+
resolvedThreads.map((thread) => /* @__PURE__ */ jsx9(
|
|
1134
1192
|
ThreadItem,
|
|
1135
1193
|
{
|
|
1136
1194
|
thread,
|
|
@@ -1148,14 +1206,14 @@ function AllPagesView({
|
|
|
1148
1206
|
loading
|
|
1149
1207
|
}) {
|
|
1150
1208
|
if (loading) {
|
|
1151
|
-
return /* @__PURE__ */
|
|
1209
|
+
return /* @__PURE__ */ jsx9("div", { className: "p-6 text-center text-sm text-neutral-400", children: "Loading..." });
|
|
1152
1210
|
}
|
|
1153
1211
|
if (pages.length === 0) {
|
|
1154
|
-
return /* @__PURE__ */
|
|
1212
|
+
return /* @__PURE__ */ jsx9("div", { className: "p-6 text-center text-sm text-neutral-400", children: "No comments in this project yet." });
|
|
1155
1213
|
}
|
|
1156
1214
|
const totalOpen = pages.reduce((s, p) => s + p.threads.filter((t) => !t.resolved).length, 0);
|
|
1157
|
-
return /* @__PURE__ */
|
|
1158
|
-
totalOpen > 0 && /* @__PURE__ */
|
|
1215
|
+
return /* @__PURE__ */ jsxs8(Fragment2, { children: [
|
|
1216
|
+
totalOpen > 0 && /* @__PURE__ */ jsxs8("div", { className: "px-4 py-2 text-[10px] font-semibold text-neutral-400 uppercase tracking-wider", children: [
|
|
1159
1217
|
totalOpen,
|
|
1160
1218
|
" open across ",
|
|
1161
1219
|
pages.length,
|
|
@@ -1165,19 +1223,19 @@ function AllPagesView({
|
|
|
1165
1223
|
const open = page.threads.filter((t) => !t.resolved);
|
|
1166
1224
|
const resolved = page.threads.filter((t) => t.resolved);
|
|
1167
1225
|
const displayName = pageIdToDisplay(page.pageId);
|
|
1168
|
-
return /* @__PURE__ */
|
|
1169
|
-
/* @__PURE__ */
|
|
1170
|
-
/* @__PURE__ */
|
|
1171
|
-
/* @__PURE__ */
|
|
1172
|
-
open.length > 0 && /* @__PURE__ */
|
|
1173
|
-
resolved.length > 0 && /* @__PURE__ */
|
|
1226
|
+
return /* @__PURE__ */ jsxs8("div", { className: "border-b border-neutral-50", children: [
|
|
1227
|
+
/* @__PURE__ */ jsxs8("div", { className: "px-4 py-2.5 flex items-center justify-between bg-neutral-50/50", children: [
|
|
1228
|
+
/* @__PURE__ */ jsx9("span", { className: "text-xs font-semibold text-neutral-700 truncate", children: displayName }),
|
|
1229
|
+
/* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-1.5", children: [
|
|
1230
|
+
open.length > 0 && /* @__PURE__ */ jsx9("span", { className: "text-[10px] bg-red-50 text-red-600 px-1.5 py-px rounded-full font-medium", children: open.length }),
|
|
1231
|
+
resolved.length > 0 && /* @__PURE__ */ jsx9("span", { className: "text-[10px] bg-neutral-100 text-neutral-500 px-1.5 py-px rounded-full font-medium", children: resolved.length })
|
|
1174
1232
|
] })
|
|
1175
1233
|
] }),
|
|
1176
1234
|
[...open, ...resolved].map((thread) => {
|
|
1177
1235
|
const firstComment = thread.comments[0];
|
|
1178
1236
|
if (!firstComment) return null;
|
|
1179
1237
|
const isResolved = thread.resolved;
|
|
1180
|
-
return /* @__PURE__ */
|
|
1238
|
+
return /* @__PURE__ */ jsxs8(
|
|
1181
1239
|
"div",
|
|
1182
1240
|
{
|
|
1183
1241
|
onClick: () => {
|
|
@@ -1186,9 +1244,9 @@ function AllPagesView({
|
|
|
1186
1244
|
},
|
|
1187
1245
|
className: `px-4 py-2.5 border-b border-neutral-50 cursor-pointer hover:bg-neutral-50 transition-colors ${isResolved ? "opacity-50" : ""}`,
|
|
1188
1246
|
children: [
|
|
1189
|
-
/* @__PURE__ */
|
|
1190
|
-
/* @__PURE__ */
|
|
1191
|
-
/* @__PURE__ */
|
|
1247
|
+
/* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between mb-1", children: [
|
|
1248
|
+
/* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
|
|
1249
|
+
/* @__PURE__ */ jsx9(
|
|
1192
1250
|
"div",
|
|
1193
1251
|
{
|
|
1194
1252
|
className: "w-4 h-4 rounded-full flex items-center justify-center text-white text-[8px] font-semibold",
|
|
@@ -1196,12 +1254,12 @@ function AllPagesView({
|
|
|
1196
1254
|
children: firstComment.author.name[0]?.toUpperCase()
|
|
1197
1255
|
}
|
|
1198
1256
|
),
|
|
1199
|
-
/* @__PURE__ */
|
|
1257
|
+
/* @__PURE__ */ jsx9("span", { className: "text-xs font-medium text-neutral-700", children: firstComment.author.name })
|
|
1200
1258
|
] }),
|
|
1201
|
-
/* @__PURE__ */
|
|
1259
|
+
/* @__PURE__ */ jsx9("span", { className: "text-[10px] text-neutral-400", children: timeAgo2(firstComment.createdAt) })
|
|
1202
1260
|
] }),
|
|
1203
|
-
/* @__PURE__ */
|
|
1204
|
-
thread.comments.length > 1 && /* @__PURE__ */
|
|
1261
|
+
/* @__PURE__ */ jsx9("p", { className: "text-xs text-neutral-600 line-clamp-2 pl-6", children: firstComment.body }),
|
|
1262
|
+
thread.comments.length > 1 && /* @__PURE__ */ jsxs8("span", { className: "text-[10px] text-neutral-400 pl-6", children: [
|
|
1205
1263
|
thread.comments.length - 1,
|
|
1206
1264
|
" ",
|
|
1207
1265
|
thread.comments.length - 1 === 1 ? "reply" : "replies"
|
|
@@ -1223,16 +1281,16 @@ function ThreadItem({
|
|
|
1223
1281
|
}) {
|
|
1224
1282
|
const firstComment = thread.comments[0];
|
|
1225
1283
|
if (!firstComment) return null;
|
|
1226
|
-
return /* @__PURE__ */
|
|
1284
|
+
return /* @__PURE__ */ jsxs8(
|
|
1227
1285
|
"div",
|
|
1228
1286
|
{
|
|
1229
1287
|
onClick: onSelect,
|
|
1230
1288
|
className: `px-4 py-3 border-b border-neutral-50 cursor-pointer hover:bg-neutral-50 transition-colors
|
|
1231
1289
|
${resolved ? "opacity-60" : ""}`,
|
|
1232
1290
|
children: [
|
|
1233
|
-
/* @__PURE__ */
|
|
1234
|
-
/* @__PURE__ */
|
|
1235
|
-
/* @__PURE__ */
|
|
1291
|
+
/* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between mb-1", children: [
|
|
1292
|
+
/* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
|
|
1293
|
+
/* @__PURE__ */ jsx9(
|
|
1236
1294
|
"div",
|
|
1237
1295
|
{
|
|
1238
1296
|
className: "w-4 h-4 rounded-full flex items-center justify-center text-white text-[8px] font-semibold",
|
|
@@ -1240,11 +1298,11 @@ function ThreadItem({
|
|
|
1240
1298
|
children: firstComment.author.name[0]?.toUpperCase()
|
|
1241
1299
|
}
|
|
1242
1300
|
),
|
|
1243
|
-
/* @__PURE__ */
|
|
1301
|
+
/* @__PURE__ */ jsx9("span", { className: "text-xs font-medium text-neutral-700", children: firstComment.author.name })
|
|
1244
1302
|
] }),
|
|
1245
|
-
/* @__PURE__ */
|
|
1246
|
-
/* @__PURE__ */
|
|
1247
|
-
/* @__PURE__ */
|
|
1303
|
+
/* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-1", children: [
|
|
1304
|
+
/* @__PURE__ */ jsx9("span", { className: "text-[10px] text-neutral-400", children: timeAgo2(firstComment.createdAt) }),
|
|
1305
|
+
/* @__PURE__ */ jsx9(
|
|
1248
1306
|
"button",
|
|
1249
1307
|
{
|
|
1250
1308
|
onClick: (e) => {
|
|
@@ -1252,14 +1310,14 @@ function ThreadItem({
|
|
|
1252
1310
|
onResolve();
|
|
1253
1311
|
},
|
|
1254
1312
|
className: "p-0.5 rounded hover:bg-neutral-200 transition-colors",
|
|
1255
|
-
children: resolved ? /* @__PURE__ */
|
|
1313
|
+
children: resolved ? /* @__PURE__ */ jsx9(Undo2, { className: "w-3 h-3 text-neutral-400" }) : /* @__PURE__ */ jsx9(Check, { className: "w-3 h-3 text-emerald-600" })
|
|
1256
1314
|
}
|
|
1257
1315
|
)
|
|
1258
1316
|
] })
|
|
1259
1317
|
] }),
|
|
1260
|
-
thread.targetLabel && /* @__PURE__ */
|
|
1261
|
-
/* @__PURE__ */
|
|
1262
|
-
thread.comments.length > 1 && /* @__PURE__ */
|
|
1318
|
+
thread.targetLabel && /* @__PURE__ */ jsx9("span", { className: "inline-block text-[10px] bg-blue-50 text-blue-600 px-1.5 py-0.5 rounded font-medium ml-6 mb-1", children: thread.targetLabel }),
|
|
1319
|
+
/* @__PURE__ */ jsx9("p", { className: "text-xs text-neutral-600 line-clamp-2 pl-6", children: firstComment.body }),
|
|
1320
|
+
thread.comments.length > 1 && /* @__PURE__ */ jsxs8("span", { className: "text-[10px] text-neutral-400 pl-6", children: [
|
|
1263
1321
|
thread.comments.length - 1,
|
|
1264
1322
|
" ",
|
|
1265
1323
|
thread.comments.length - 1 === 1 ? "reply" : "replies"
|