@lumen-stack/react 0.15.2 → 0.16.0

package/dist/styles.css

@@ -1103,6 +1103,93 @@
   z-index: 5;
 }
 
+/* ─── Mobile markup: pen-notch summon ────────────────────────────────
+   On phones the always-on top tool bar sandwiched the screenshot. Instead a
+   small pen tab sits notched into the right edge; tapping it fans the palette
+   out to its left, and it fades out while a stroke is in progress — so the
+   screenshot is never obstructed. Desktop is unchanged (notch hidden below). */
+.lumen-fs-notch { display: none; }
+@media (max-width: 639px) {
+  /* the edge notch replaces the pill's pen-toggle on mobile */
+  .lumen-fs-pentog,
+  .lumen-fs-pill .lumen-fs-pill-sep { display: none; }
+
+  .lumen-fs-notch {
+    position: absolute;
+    right: 0;
+    top: 56%;
+    transform: translateY(-50%);
+    z-index: 8;
+    width: 34px;
+    height: 52px;
+    border: 0.5px solid rgb(255 255 255 / 0.14);
+    border-right: 0;
+    border-radius: 16px 0 0 16px;
+    background: rgb(20 20 24 / 0.74);
+    backdrop-filter: blur(20px) saturate(160%);
+    -webkit-backdrop-filter: blur(20px) saturate(160%);
+    box-shadow: -7px 10px 24px rgb(0 0 0 / 0.36);
+    display: grid;
+    place-items: center;
+    cursor: pointer;
+    transition: transform 0.18s var(--lumen-ease),
+      background-color 0.2s ease, opacity 0.2s ease;
+  }
+  .lumen-fs-notch svg { width: 18px; height: 18px; display: block; }
+  .lumen-fs-notch:active { transform: translateY(-50%) scale(0.94); }
+  .lumen-fs-notch[data-on="true"] {
+    background: var(--lumen-accent);
+    color: #fff !important;
+  }
+
+  /* the palette fans out to the LEFT of the tab as a vertical popover */
+  .lumen-modal[data-lumen-fs="true"] .lumen-toolbar {
+    left: auto;
+    right: 50px;
+    bottom: auto;
+    top: 56%;
+    transform: translateY(-50%);
+    transform-origin: right center;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: 4px;
+    padding: 8px 7px;
+    border-radius: 20px;
+    max-width: none;
+    animation: lumen-notch-pop 0.26s var(--lumen-ease) both;
+  }
+  .lumen-modal[data-lumen-fs="true"] .lumen-toolbar .lumen-segmented {
+    flex-direction: column;
+    gap: 2px;
+  }
+  .lumen-modal[data-lumen-fs="true"] .lumen-toolbar .lumen-toolbar-sep {
+    width: 22px;
+    height: 0.5px;
+    margin: 3px 0;
+  }
+  /* colour popover opens to the left of the vertical palette */
+  .lumen-modal[data-lumen-fs="true"] .lumen-fs-color-pop {
+    left: auto;
+    right: 34px;
+    bottom: auto;
+    top: 50%;
+    transform: translateY(-50%);
+    flex-direction: column;
+  }
+
+  /* screenshot stays clear while a stroke is in progress */
+  .lumen-modal[data-lumen-drawing="true"] .lumen-fs-notch { opacity: 0.16; }
+  .lumen-modal[data-lumen-drawing="true"][data-lumen-fs="true"] .lumen-toolbar {
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+@keyframes lumen-notch-pop {
+  from { opacity: 0; transform: translateY(-50%) translateX(12px) scale(0.65); }
+  to { opacity: 1; transform: translateY(-50%) translateX(0) scale(1); }
+}
+
 /* ─── Review & send detent (step 2) — a taller sheet that rises over the
    dimmed, annotated capture; editable priority/platform/description → Send ── */
 .lumen-rv-pane { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lumen-stack/react",
-  "version": "0.15.2",
+  "version": "0.16.0",
   "description": "React SDK for Lumen — screenshot capture, annotation, and feedback widget.",
   "license": "MIT",
   "publishConfig": {