@lumen-stack/react 0.9.2 → 0.10.0

package/dist/styles.css

@@ -327,6 +327,10 @@
   align-items: stretch;
   justify-content: center;
   padding: 0;
+  /* Raise the sheet above the soft keyboard when its height is known (a WebView
+     host injecting --lumen-keyboard-inset, or visualViewport on the web). 0 when
+     no keyboard, so non-keyboard states are pixel-identical to before. */
+  padding-bottom: var(--lumen-keyboard-inset, 0px);
   font-family: var(--lumen-font-ui);
   color: var(--lumen-fg);
   animation: lumen-backdrop-in var(--lumen-dur) var(--lumen-ease);
@@ -358,11 +362,14 @@
   letter-spacing: -0.008em;
   width: 100%;
   max-width: 100%;
-  max-height: 92dvh;
+  /* Shrink to the space left above the keyboard (var is 0 when none), so the
+   * sheet's top stays on-screen and its body scrolls. */
+  max-height: calc(92dvh - var(--lumen-keyboard-inset, 0px));
   /* Stable sheet height: steps fill the same space so the sheet never
    * jumps/resizes between capture → describe → review. Content taller
-   * than this scrolls inside the body instead of growing the sheet. */
-  min-height: 58dvh;
+   * than this scrolls inside the body instead of growing the sheet. Clamped so
+   * a tall keyboard can't force the min-height past the available space. */
+  min-height: min(58dvh, calc(92dvh - var(--lumen-keyboard-inset, 0px)));
   margin-top: auto;
   display: flex;
   flex-direction: column;
@@ -399,12 +406,16 @@
     align-items: center;
     padding: var(--lumen-s-4);
     padding-top: max(env(safe-area-inset-top, 0px), var(--lumen-s-4));
-    padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--lumen-s-4));
+    padding-bottom: max(
+      env(safe-area-inset-bottom, 0px),
+      var(--lumen-s-4),
+      var(--lumen-keyboard-inset, 0px)
+    );
   }
   .lumen-modal {
     max-width: 760px;
-    max-height: min(86dvh, 820px);
-    min-height: min(560px, 78dvh);
+    max-height: calc(min(86dvh, 820px) - var(--lumen-keyboard-inset, 0px));
+    min-height: min(560px, 78dvh, calc(86dvh - var(--lumen-keyboard-inset, 0px)));
     margin: auto;
     border-radius: var(--lumen-r-lg);
     border: 1px solid var(--lumen-border);
@@ -910,6 +921,10 @@ textarea.lumen-input { resize: vertical; min-height: 76px; }
   padding: 16px;
 }
 .lumen-record-unavailable strong { color: var(--lumen-fg); }
+.lumen-record-upload {
+  align-self: center;
+  min-width: 180px;
+}
 
 /* ─── Floating recording HUD (persists while the sheet is closed) ─────── */
 .lumen-rec-hud {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lumen-stack/react",
-  "version": "0.9.2",
+  "version": "0.10.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.10.1",
+    "@lumen-stack/core": "^0.11.0",
     "html2canvas-pro": "^1.5.8",
     "sonner": "^1.7.1"
   },