@lumen-stack/react 0.6.1 → 0.7.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.cjs +3 -3
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +25 -0
- package/dist/index.d.ts +25 -0
- package/dist/index.js +3 -3
- package/dist/index.js.map +1 -1
- package/dist/styles.css +317 -14
- package/package.json +2 -2
package/dist/styles.css
CHANGED
|
@@ -343,6 +343,10 @@
|
|
|
343
343
|
width: 100%;
|
|
344
344
|
max-width: 100%;
|
|
345
345
|
max-height: 92dvh;
|
|
346
|
+
/* Stable sheet height: steps fill the same space so the sheet never
|
|
347
|
+
* jumps/resizes between capture → describe → review. Content taller
|
|
348
|
+
* than this scrolls inside the body instead of growing the sheet. */
|
|
349
|
+
min-height: 58dvh;
|
|
346
350
|
margin-top: auto;
|
|
347
351
|
display: flex;
|
|
348
352
|
flex-direction: column;
|
|
@@ -384,6 +388,7 @@
|
|
|
384
388
|
.lumen-modal {
|
|
385
389
|
max-width: 760px;
|
|
386
390
|
max-height: min(86dvh, 820px);
|
|
391
|
+
min-height: min(560px, 78dvh);
|
|
387
392
|
margin: auto;
|
|
388
393
|
border-radius: var(--lumen-r-lg);
|
|
389
394
|
border: 1px solid var(--lumen-border);
|
|
@@ -622,6 +627,86 @@
|
|
|
622
627
|
touch-action: none;
|
|
623
628
|
cursor: crosshair;
|
|
624
629
|
}
|
|
630
|
+
.lumen-annotate-frame[data-lumen-tool="comment"] .lumen-annotate-overlay {
|
|
631
|
+
cursor: copy;
|
|
632
|
+
}
|
|
633
|
+
|
|
634
|
+
/* ─── Comment / speech-bubble annotations (inline-editable, Figma-style) ── */
|
|
635
|
+
.lumen-bubble-layer {
|
|
636
|
+
position: absolute;
|
|
637
|
+
inset: 0;
|
|
638
|
+
pointer-events: none;
|
|
639
|
+
}
|
|
640
|
+
.lumen-bubble {
|
|
641
|
+
position: absolute;
|
|
642
|
+
max-width: 60%;
|
|
643
|
+
min-width: 64px;
|
|
644
|
+
pointer-events: auto;
|
|
645
|
+
background: #fff;
|
|
646
|
+
color: #111318;
|
|
647
|
+
border: 1px solid rgb(0 0 0 / 0.08);
|
|
648
|
+
border-radius: 12px;
|
|
649
|
+
box-shadow: 0 6px 18px -4px rgb(0 0 0 / 0.45);
|
|
650
|
+
padding: 7px 10px;
|
|
651
|
+
font-size: 13px;
|
|
652
|
+
line-height: 1.35;
|
|
653
|
+
cursor: default;
|
|
654
|
+
}
|
|
655
|
+
.lumen-bubble::after {
|
|
656
|
+
content: "";
|
|
657
|
+
position: absolute;
|
|
658
|
+
left: 16px;
|
|
659
|
+
bottom: -7px;
|
|
660
|
+
width: 13px;
|
|
661
|
+
height: 13px;
|
|
662
|
+
background: #fff;
|
|
663
|
+
border-right: 1px solid rgb(0 0 0 / 0.08);
|
|
664
|
+
border-bottom: 1px solid rgb(0 0 0 / 0.08);
|
|
665
|
+
transform: rotate(45deg);
|
|
666
|
+
border-bottom-right-radius: 3px;
|
|
667
|
+
}
|
|
668
|
+
.lumen-bubble-label {
|
|
669
|
+
display: block;
|
|
670
|
+
font-size: 9px;
|
|
671
|
+
font-weight: 700;
|
|
672
|
+
letter-spacing: 0.05em;
|
|
673
|
+
text-transform: uppercase;
|
|
674
|
+
color: var(--lumen-bubble-accent, rgb(239, 68, 68));
|
|
675
|
+
margin-bottom: 2px;
|
|
676
|
+
}
|
|
677
|
+
.lumen-bubble-text {
|
|
678
|
+
display: block;
|
|
679
|
+
outline: none;
|
|
680
|
+
min-width: 30px;
|
|
681
|
+
white-space: pre-wrap;
|
|
682
|
+
word-break: break-word;
|
|
683
|
+
}
|
|
684
|
+
.lumen-bubble-text:empty::before {
|
|
685
|
+
content: attr(data-placeholder);
|
|
686
|
+
color: #9aa0aa;
|
|
687
|
+
}
|
|
688
|
+
.lumen-bubble-del {
|
|
689
|
+
position: absolute;
|
|
690
|
+
top: -9px;
|
|
691
|
+
right: -9px;
|
|
692
|
+
width: 19px;
|
|
693
|
+
height: 19px;
|
|
694
|
+
border-radius: 999px;
|
|
695
|
+
border: 1px solid rgb(255 255 255 / 0.3);
|
|
696
|
+
background: #18181c;
|
|
697
|
+
color: #fff;
|
|
698
|
+
font-size: 12px;
|
|
699
|
+
line-height: 1;
|
|
700
|
+
cursor: pointer;
|
|
701
|
+
padding: 0;
|
|
702
|
+
display: none;
|
|
703
|
+
align-items: center;
|
|
704
|
+
justify-content: center;
|
|
705
|
+
}
|
|
706
|
+
.lumen-bubble:hover .lumen-bubble-del,
|
|
707
|
+
.lumen-bubble:focus-within .lumen-bubble-del {
|
|
708
|
+
display: inline-flex;
|
|
709
|
+
}
|
|
625
710
|
|
|
626
711
|
/* ─── Form ────────────────────────────────────────────────────────── */
|
|
627
712
|
.lumen-form {
|
|
@@ -743,6 +828,149 @@ textarea.lumen-input { resize: vertical; min-height: 76px; }
|
|
|
743
828
|
height: 22px;
|
|
744
829
|
}
|
|
745
830
|
|
|
831
|
+
/* ─── Video: Record prompt (step 1, before recording) ────────────────── */
|
|
832
|
+
.lumen-record-prompt {
|
|
833
|
+
display: flex;
|
|
834
|
+
flex-direction: column;
|
|
835
|
+
align-items: center;
|
|
836
|
+
gap: 16px;
|
|
837
|
+
text-align: center;
|
|
838
|
+
padding: 26px 24px 16px;
|
|
839
|
+
}
|
|
840
|
+
.lumen-record-btn {
|
|
841
|
+
appearance: none;
|
|
842
|
+
width: 88px;
|
|
843
|
+
height: 88px;
|
|
844
|
+
border: 0;
|
|
845
|
+
border-radius: 999px;
|
|
846
|
+
cursor: pointer;
|
|
847
|
+
background: radial-gradient(circle at 50% 38%, #ff5b5b, #d62b2b);
|
|
848
|
+
box-shadow:
|
|
849
|
+
0 0 0 6px rgb(239 68 68 / 0.14),
|
|
850
|
+
0 0 0 12px rgb(239 68 68 / 0.07),
|
|
851
|
+
0 16px 40px -10px rgb(239 68 68 / 0.5);
|
|
852
|
+
display: grid;
|
|
853
|
+
place-items: center;
|
|
854
|
+
transition: transform var(--lumen-dur-fast) var(--lumen-ease);
|
|
855
|
+
}
|
|
856
|
+
.lumen-record-btn::after {
|
|
857
|
+
content: "";
|
|
858
|
+
width: 32px;
|
|
859
|
+
height: 32px;
|
|
860
|
+
border-radius: 999px;
|
|
861
|
+
background: #fff;
|
|
862
|
+
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.2);
|
|
863
|
+
}
|
|
864
|
+
.lumen-record-btn:hover { transform: scale(1.04); }
|
|
865
|
+
.lumen-record-btn:active { transform: scale(0.97); }
|
|
866
|
+
.lumen-record-btn:focus-visible {
|
|
867
|
+
outline: 2px solid var(--lumen-focus-ring);
|
|
868
|
+
outline-offset: 4px;
|
|
869
|
+
}
|
|
870
|
+
.lumen-record-copy {
|
|
871
|
+
display: flex;
|
|
872
|
+
flex-direction: column;
|
|
873
|
+
gap: 6px;
|
|
874
|
+
max-width: 32ch;
|
|
875
|
+
}
|
|
876
|
+
.lumen-record-title {
|
|
877
|
+
font-size: var(--lumen-fs-14);
|
|
878
|
+
font-weight: 600;
|
|
879
|
+
color: var(--lumen-fg);
|
|
880
|
+
}
|
|
881
|
+
.lumen-record-sub {
|
|
882
|
+
font-size: var(--lumen-fs-12);
|
|
883
|
+
color: var(--lumen-fg-subtle);
|
|
884
|
+
line-height: 1.5;
|
|
885
|
+
}
|
|
886
|
+
.lumen-record-unavailable {
|
|
887
|
+
margin: 8px 0 0;
|
|
888
|
+
font-size: var(--lumen-fs-13);
|
|
889
|
+
color: var(--lumen-fg-muted);
|
|
890
|
+
line-height: 1.5;
|
|
891
|
+
border: 1px dashed var(--lumen-border-strong);
|
|
892
|
+
border-radius: var(--lumen-r-md);
|
|
893
|
+
background: var(--lumen-bg-elev);
|
|
894
|
+
padding: 16px;
|
|
895
|
+
}
|
|
896
|
+
.lumen-record-unavailable strong { color: var(--lumen-fg); }
|
|
897
|
+
|
|
898
|
+
/* ─── Floating recording HUD (persists while the sheet is closed) ─────── */
|
|
899
|
+
.lumen-rec-hud {
|
|
900
|
+
position: fixed;
|
|
901
|
+
left: 50%;
|
|
902
|
+
bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
|
|
903
|
+
transform: translateX(-50%);
|
|
904
|
+
z-index: 2147483647;
|
|
905
|
+
display: flex;
|
|
906
|
+
align-items: center;
|
|
907
|
+
gap: 12px;
|
|
908
|
+
padding: 8px 8px 8px 15px;
|
|
909
|
+
background: var(--lumen-bg-elev);
|
|
910
|
+
border: 1px solid var(--lumen-border-strong);
|
|
911
|
+
border-radius: 999px;
|
|
912
|
+
box-shadow: var(--lumen-shadow-lg);
|
|
913
|
+
font-family: var(--lumen-font-ui);
|
|
914
|
+
color: var(--lumen-fg);
|
|
915
|
+
isolation: isolate;
|
|
916
|
+
}
|
|
917
|
+
.lumen-rec-hud-dot {
|
|
918
|
+
width: 9px;
|
|
919
|
+
height: 9px;
|
|
920
|
+
border-radius: 999px;
|
|
921
|
+
background: var(--lumen-danger);
|
|
922
|
+
animation: lumen-pulse 1.4s ease-in-out infinite;
|
|
923
|
+
}
|
|
924
|
+
.lumen-rec-hud-time {
|
|
925
|
+
font-size: var(--lumen-fs-13);
|
|
926
|
+
font-weight: 600;
|
|
927
|
+
font-variant-numeric: tabular-nums;
|
|
928
|
+
}
|
|
929
|
+
.lumen-rec-hud-max {
|
|
930
|
+
color: var(--lumen-fg-subtle);
|
|
931
|
+
font-weight: 400;
|
|
932
|
+
}
|
|
933
|
+
.lumen-rec-hud-cancel {
|
|
934
|
+
appearance: none;
|
|
935
|
+
background: transparent;
|
|
936
|
+
border: 0;
|
|
937
|
+
cursor: pointer;
|
|
938
|
+
font: inherit;
|
|
939
|
+
font-size: var(--lumen-fs-12);
|
|
940
|
+
color: var(--lumen-fg-muted);
|
|
941
|
+
padding: 6px 8px;
|
|
942
|
+
border-radius: var(--lumen-r-sm);
|
|
943
|
+
}
|
|
944
|
+
.lumen-rec-hud-cancel:hover {
|
|
945
|
+
color: var(--lumen-fg);
|
|
946
|
+
background: var(--lumen-bg-hover);
|
|
947
|
+
}
|
|
948
|
+
.lumen-rec-hud-stop {
|
|
949
|
+
appearance: none;
|
|
950
|
+
cursor: pointer;
|
|
951
|
+
font: inherit;
|
|
952
|
+
font-size: var(--lumen-fs-13);
|
|
953
|
+
font-weight: 600;
|
|
954
|
+
display: inline-flex;
|
|
955
|
+
align-items: center;
|
|
956
|
+
gap: 8px;
|
|
957
|
+
padding: 8px 14px;
|
|
958
|
+
border: 0;
|
|
959
|
+
border-radius: 999px;
|
|
960
|
+
background: var(--lumen-danger);
|
|
961
|
+
color: #fff;
|
|
962
|
+
}
|
|
963
|
+
.lumen-rec-hud-stop:hover { filter: brightness(1.05); }
|
|
964
|
+
.lumen-rec-hud-square {
|
|
965
|
+
width: 11px;
|
|
966
|
+
height: 11px;
|
|
967
|
+
border-radius: 2px;
|
|
968
|
+
background: #fff;
|
|
969
|
+
}
|
|
970
|
+
@media (prefers-reduced-motion: reduce) {
|
|
971
|
+
.lumen-rec-hud-dot { animation: none; }
|
|
972
|
+
}
|
|
973
|
+
|
|
746
974
|
.lumen-audio-preview {
|
|
747
975
|
display: inline-flex;
|
|
748
976
|
align-items: center;
|
|
@@ -905,11 +1133,12 @@ textarea.lumen-input { resize: vertical; min-height: 76px; }
|
|
|
905
1133
|
}
|
|
906
1134
|
.lumen-step-active .lumen-step-lbl { color: var(--lumen-fg); font-weight: 500; }
|
|
907
1135
|
|
|
908
|
-
/* ─── Wizard: step 1 capture method
|
|
1136
|
+
/* ─── Wizard: step 1 capture method picker ───────────────────────────── */
|
|
1137
|
+
/* Screenshot = prominent hero card (full width), Video + Upload below. */
|
|
909
1138
|
.lumen-method {
|
|
910
1139
|
display: grid;
|
|
911
|
-
grid-template-columns:
|
|
912
|
-
gap:
|
|
1140
|
+
grid-template-columns: 1fr 1fr;
|
|
1141
|
+
gap: 8px;
|
|
913
1142
|
padding: 12px 16px;
|
|
914
1143
|
}
|
|
915
1144
|
.lumen-method-btn {
|
|
@@ -918,33 +1147,107 @@ textarea.lumen-input { resize: vertical; min-height: 76px; }
|
|
|
918
1147
|
background: var(--lumen-bg-elev);
|
|
919
1148
|
border: 1px solid var(--lumen-border);
|
|
920
1149
|
border-radius: var(--lumen-r-md);
|
|
921
|
-
color: var(--lumen-fg
|
|
922
|
-
padding:
|
|
1150
|
+
color: var(--lumen-fg);
|
|
1151
|
+
padding: 12px;
|
|
923
1152
|
display: flex;
|
|
924
1153
|
flex-direction: column;
|
|
925
|
-
align-items:
|
|
926
|
-
gap:
|
|
1154
|
+
align-items: flex-start;
|
|
1155
|
+
gap: 8px;
|
|
1156
|
+
text-align: left;
|
|
927
1157
|
transition: all var(--lumen-dur-fast) var(--lumen-ease);
|
|
928
1158
|
}
|
|
1159
|
+
.lumen-method-ico {
|
|
1160
|
+
width: 28px;
|
|
1161
|
+
height: 28px;
|
|
1162
|
+
flex: none;
|
|
1163
|
+
display: inline-flex;
|
|
1164
|
+
align-items: center;
|
|
1165
|
+
justify-content: center;
|
|
1166
|
+
border-radius: 8px;
|
|
1167
|
+
background: var(--lumen-bg-active);
|
|
1168
|
+
color: var(--lumen-fg);
|
|
1169
|
+
}
|
|
1170
|
+
.lumen-method-ico svg { width: 16px; height: 16px; }
|
|
1171
|
+
.lumen-method-btn.lumen-method-primary {
|
|
1172
|
+
grid-column: 1 / -1;
|
|
1173
|
+
flex-direction: row;
|
|
1174
|
+
align-items: center;
|
|
1175
|
+
gap: 14px;
|
|
1176
|
+
padding: 14px 16px;
|
|
1177
|
+
}
|
|
1178
|
+
.lumen-method-primary .lumen-method-ico { width: 40px; height: 40px; border-radius: 10px; }
|
|
1179
|
+
.lumen-method-primary .lumen-method-ico svg { width: 20px; height: 20px; }
|
|
1180
|
+
.lumen-method-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
|
|
1181
|
+
.lumen-method-badge {
|
|
1182
|
+
margin-left: auto;
|
|
1183
|
+
flex: none;
|
|
1184
|
+
font-size: 10px;
|
|
1185
|
+
text-transform: uppercase;
|
|
1186
|
+
letter-spacing: 0.06em;
|
|
1187
|
+
color: var(--lumen-fg-subtle);
|
|
1188
|
+
border: 1px solid var(--lumen-border);
|
|
1189
|
+
border-radius: 999px;
|
|
1190
|
+
padding: 3px 9px;
|
|
1191
|
+
}
|
|
929
1192
|
.lumen-method-btn:hover:not(:disabled) {
|
|
930
1193
|
border-color: var(--lumen-border-strong);
|
|
931
|
-
|
|
1194
|
+
background: var(--lumen-bg-active);
|
|
1195
|
+
transform: translateY(-1px);
|
|
932
1196
|
}
|
|
933
1197
|
.lumen-method-btn:disabled { opacity: 0.55; cursor: default; }
|
|
934
1198
|
.lumen-method-btn[aria-pressed="true"] {
|
|
935
|
-
background: var(--lumen-bg);
|
|
936
|
-
color: var(--lumen-fg);
|
|
937
1199
|
border-color: var(--lumen-fg);
|
|
938
|
-
box-shadow: var(--lumen-shadow-sm);
|
|
1200
|
+
box-shadow: 0 0 0 1px var(--lumen-fg), var(--lumen-shadow-sm);
|
|
939
1201
|
}
|
|
940
1202
|
.lumen-method-btn:focus-visible {
|
|
941
1203
|
outline: 2px solid var(--lumen-focus-ring);
|
|
942
1204
|
outline-offset: 2px;
|
|
943
1205
|
}
|
|
944
|
-
.lumen-method-label { font-size: var(--lumen-fs-13); font-weight:
|
|
945
|
-
.lumen-method-
|
|
946
|
-
.lumen-method-
|
|
1206
|
+
.lumen-method-label { font-size: var(--lumen-fs-13); font-weight: 600; }
|
|
1207
|
+
.lumen-method-primary .lumen-method-label { font-size: var(--lumen-fs-14); }
|
|
1208
|
+
.lumen-method-hint { font-size: var(--lumen-fs-12); color: var(--lumen-fg-subtle); line-height: 1.3; }
|
|
1209
|
+
|
|
1210
|
+
/* Slim segmented switcher shown once a method is chosen — frees vertical
|
|
1211
|
+
* room for the preview + annotation tools while staying switchable. */
|
|
1212
|
+
.lumen-method-switch {
|
|
1213
|
+
display: flex;
|
|
1214
|
+
gap: 6px;
|
|
1215
|
+
margin: 12px 16px 0;
|
|
1216
|
+
padding: 4px;
|
|
1217
|
+
background: var(--lumen-bg-elev);
|
|
1218
|
+
border: 1px solid var(--lumen-border);
|
|
1219
|
+
border-radius: var(--lumen-r-md);
|
|
1220
|
+
}
|
|
1221
|
+
.lumen-method-switch button {
|
|
1222
|
+
flex: 1;
|
|
1223
|
+
appearance: none;
|
|
1224
|
+
cursor: pointer;
|
|
1225
|
+
display: inline-flex;
|
|
1226
|
+
align-items: center;
|
|
1227
|
+
justify-content: center;
|
|
1228
|
+
gap: 7px;
|
|
1229
|
+
font: inherit;
|
|
1230
|
+
font-size: var(--lumen-fs-13);
|
|
1231
|
+
font-weight: 500;
|
|
1232
|
+
padding: 8px 6px;
|
|
1233
|
+
background: transparent;
|
|
1234
|
+
border: 1px solid transparent;
|
|
1235
|
+
border-radius: var(--lumen-r-sm);
|
|
947
1236
|
color: var(--lumen-fg-muted);
|
|
1237
|
+
transition: all var(--lumen-dur-fast) var(--lumen-ease);
|
|
1238
|
+
}
|
|
1239
|
+
.lumen-method-switch button svg { width: 15px; height: 15px; }
|
|
1240
|
+
.lumen-method-switch button:hover:not(:disabled) { color: var(--lumen-fg); }
|
|
1241
|
+
.lumen-method-switch button:disabled { opacity: 0.5; cursor: default; }
|
|
1242
|
+
.lumen-method-switch button[aria-pressed="true"] {
|
|
1243
|
+
background: var(--lumen-bg);
|
|
1244
|
+
color: var(--lumen-fg);
|
|
1245
|
+
border-color: var(--lumen-border);
|
|
1246
|
+
box-shadow: var(--lumen-shadow-sm);
|
|
1247
|
+
}
|
|
1248
|
+
.lumen-method-switch button:focus-visible {
|
|
1249
|
+
outline: 2px solid var(--lumen-focus-ring);
|
|
1250
|
+
outline-offset: 1px;
|
|
948
1251
|
}
|
|
949
1252
|
|
|
950
1253
|
.lumen-cap-empty {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lumen-stack/react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.0",
|
|
4
4
|
"description": "React SDK for Lumen — screenshot capture, annotation, and feedback widget.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"publishConfig": {
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"react-dom": ">=18"
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@lumen-stack/core": "^0.
|
|
42
|
+
"@lumen-stack/core": "^0.6.0",
|
|
43
43
|
"html2canvas-pro": "^1.5.8",
|
|
44
44
|
"sonner": "^1.7.1"
|
|
45
45
|
},
|