@lumen-stack/react 0.13.0 → 0.14.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 +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/styles.css +24 -2
- package/package.json +2 -2
package/dist/styles.css
CHANGED
|
@@ -753,20 +753,42 @@
|
|
|
753
753
|
.lumen-modal[data-lumen-fs="true"] .lumen-annotate {
|
|
754
754
|
position: absolute;
|
|
755
755
|
inset: 0;
|
|
756
|
-
|
|
756
|
+
/* Mobile: the capture takes (almost) the full height and the compose sheet
|
|
757
|
+
overlaps its lower edge — drag the grabber to push the sheet down and see
|
|
758
|
+
the rest. Desktop restores a full reserve below (landscape fits with a
|
|
759
|
+
gap, no overlap needed). */
|
|
760
|
+
padding: calc(env(safe-area-inset-top, 0px) + 126px) 14px
|
|
761
|
+
calc(env(safe-area-inset-bottom, 0px) + 20px);
|
|
757
762
|
/* Theme-aware soft surround (harmonizes with the sheet — no harsh black):
|
|
758
763
|
light → soft grey, dark → slightly lifted dark. */
|
|
759
764
|
background: color-mix(in srgb, var(--lumen-fg) 8%, var(--lumen-bg));
|
|
760
765
|
place-items: center;
|
|
761
766
|
}
|
|
767
|
+
@media (min-width: 640px) {
|
|
768
|
+
.lumen-modal[data-lumen-fs="true"] .lumen-annotate { padding-bottom: 192px; }
|
|
769
|
+
}
|
|
762
770
|
.lumen-modal[data-lumen-fs="true"] .lumen-annotate-frame {
|
|
763
771
|
max-width: 100%;
|
|
764
772
|
max-height: 100%;
|
|
765
773
|
border-radius: var(--lumen-r-lg);
|
|
766
774
|
box-shadow: 0 10px 36px -10px rgb(0 0 0 / 0.22), 0 0 0 0.5px rgb(0 0 0 / 0.07);
|
|
767
775
|
}
|
|
776
|
+
/* Bound the canvas to the SAME available height as the frame — the modal
|
|
777
|
+
minus the top chrome (126px) and the bottom compose sheet (192px) — so a
|
|
778
|
+
tall screenshot scales down (object-fit: contain) instead of overflowing
|
|
779
|
+
the frame and getting clipped. Mobile = full-bleed modal (100dvh); desktop
|
|
780
|
+
= the centred 88vh column (capped at the 940px modal). */
|
|
768
781
|
.lumen-modal[data-lumen-fs="true"] .lumen-annotate-frame canvas {
|
|
769
|
-
|
|
782
|
+
/* Mobile: nearly the full height — the sheet overlaps the lower edge. */
|
|
783
|
+
max-height: calc(
|
|
784
|
+
100dvh - 154px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)
|
|
785
|
+
);
|
|
786
|
+
}
|
|
787
|
+
@media (min-width: 640px) {
|
|
788
|
+
.lumen-modal[data-lumen-fs="true"] .lumen-annotate-frame canvas {
|
|
789
|
+
/* Desktop: fit above the sheet (landscape captures, no overlap needed). */
|
|
790
|
+
max-height: min(calc(88vh - 322px), 618px);
|
|
791
|
+
}
|
|
770
792
|
}
|
|
771
793
|
/* floating top chrome: ✕ · method switch · Recapture (replaces the old
|
|
772
794
|
method-switch + cap-actions in the fullscreen capture surface) */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lumen-stack/react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.14.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.14.0",
|
|
43
43
|
"html2canvas-pro": "^1.5.8",
|
|
44
44
|
"sonner": "^1.7.1"
|
|
45
45
|
},
|