@lumen-stack/react 0.13.0 → 0.15.0

package/dist/styles.css

@@ -713,6 +713,24 @@
     border-radius: 24px;
     overflow: hidden;
     box-shadow: var(--lumen-shadow-lg);
+    transition: width 0.28s var(--lumen-ease), height 0.28s var(--lumen-ease),
+      border-radius 0.28s var(--lumen-ease);
+  }
+  /* Expanded: blow the centered column up to the full viewport for a much
+     larger annotation canvas. */
+  .lumen-modal[data-lumen-fs="true"][data-lumen-expanded="true"] {
+    top: 0;
+    left: 0;
+    transform: none;
+    width: 100vw;
+    height: 100dvh;
+    max-height: none;
+    border-radius: 0;
+  }
+  .lumen-modal[data-lumen-fs="true"][data-lumen-expanded="true"]
+    .lumen-annotate-frame
+    canvas {
+    max-height: calc(100dvh - 322px);
   }
 }
 .lumen-modal[data-lumen-fs="true"] .lumen-modal-grabber,
@@ -753,20 +771,42 @@
 .lumen-modal[data-lumen-fs="true"] .lumen-annotate {
   position: absolute;
   inset: 0;
-  padding: calc(env(safe-area-inset-top, 0px) + 126px) 14px 192px;
+  /* Mobile: the capture takes (almost) the full height and the compose sheet
+     overlaps its lower edge — drag the grabber to push the sheet down and see
+     the rest. Desktop restores a full reserve below (landscape fits with a
+     gap, no overlap needed). */
+  padding: calc(env(safe-area-inset-top, 0px) + 126px) 14px
+    calc(env(safe-area-inset-bottom, 0px) + 20px);
   /* Theme-aware soft surround (harmonizes with the sheet — no harsh black):
      light → soft grey, dark → slightly lifted dark. */
   background: color-mix(in srgb, var(--lumen-fg) 8%, var(--lumen-bg));
   place-items: center;
 }
+@media (min-width: 640px) {
+  .lumen-modal[data-lumen-fs="true"] .lumen-annotate { padding-bottom: 192px; }
+}
 .lumen-modal[data-lumen-fs="true"] .lumen-annotate-frame {
   max-width: 100%;
   max-height: 100%;
   border-radius: var(--lumen-r-lg);
   box-shadow: 0 10px 36px -10px rgb(0 0 0 / 0.22), 0 0 0 0.5px rgb(0 0 0 / 0.07);
 }
+/* Bound the canvas to the SAME available height as the frame — the modal
+   minus the top chrome (126px) and the bottom compose sheet (192px) — so a
+   tall screenshot scales down (object-fit: contain) instead of overflowing
+   the frame and getting clipped. Mobile = full-bleed modal (100dvh); desktop
+   = the centred 88vh column (capped at the 940px modal). */
 .lumen-modal[data-lumen-fs="true"] .lumen-annotate-frame canvas {
-  max-height: calc(100dvh - 210px);
+  /* Mobile: nearly the full height — the sheet overlaps the lower edge. */
+  max-height: calc(
+    100dvh - 154px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)
+  );
+}
+@media (min-width: 640px) {
+  .lumen-modal[data-lumen-fs="true"] .lumen-annotate-frame canvas {
+    /* Desktop: fit above the sheet (landscape captures, no overlap needed). */
+    max-height: min(calc(88vh - 322px), 618px);
+  }
 }
 /* floating top chrome: ✕ · method switch · Recapture (replaces the old
    method-switch + cap-actions in the fullscreen capture surface) */
@@ -914,7 +954,12 @@
   cursor: pointer;
 }
 .lumen-fs-chip svg { width: 15px; height: 15px; }
-.lumen-fs-x { width: 38px; padding: 0; justify-content: center; font-size: 15px; }
+.lumen-fs-x { width: 38px; padding: 0; justify-content: center; font-size: 15px; margin-right: auto; }
+/* Expand toggle: icon-only chip, sits with Recapture on the right. Desktop
+   only — mobile is already full-bleed. */
+.lumen-fs-expand { width: 38px; padding: 0; justify-content: center; }
+.lumen-fs-expand[aria-pressed="true"] { background: var(--lumen-accent); }
+@media (max-width: 639px) { .lumen-fs-expand { display: none; } }
 .lumen-fs-mswitch {
   display: inline-flex;
   gap: 2px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lumen-stack/react",
-  "version": "0.13.0",
+  "version": "0.15.0",
   "description": "React SDK for Lumen — screenshot capture, annotation, and feedback widget.",
   "license": "MIT",
   "publishConfig": {
@@ -39,7 +39,7 @@
     "react-dom": ">=18"
   },
   "dependencies": {
-    "@lumen-stack/core": "^0.13.2",
+    "@lumen-stack/core": "^0.15.0",
     "html2canvas-pro": "^1.5.8",
     "sonner": "^1.7.1"
   },