@lumen-stack/react 0.12.4 → 0.13.0

package/dist/styles.css

@@ -209,7 +209,9 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 6px;
+  /* 0 at rest so the collapsed label adds no gap that would shove the grip
+     off-centre; restored to 6px only once the label is revealed (below). */
+  gap: 0;
   background: var(--lumen-accent);
   color: var(--lumen-accent-fg);
   border: 0;
@@ -217,17 +219,23 @@
   font: inherit;
   font-size: var(--lumen-fs-13);
   font-weight: 500;
-  box-shadow: var(--lumen-shadow-lg);
+  /* A soft ambient shadow to ground the tab + a faint brand glow to lift it.
+     The glow tracks --lumen-accent (color-mix) so it follows a host's custom
+     accent. Near-symmetric so it reads on every edge. */
+  box-shadow:
+    0 2px 10px rgb(0 0 0 / 0.30),
+    0 0 18px color-mix(in oklab, var(--lumen-accent) 32%, transparent);
   transition:
     transform var(--lumen-dur) var(--lumen-ease),
     padding var(--lumen-dur) var(--lumen-ease),
+    box-shadow var(--lumen-dur) var(--lumen-ease),
     opacity var(--lumen-dur-fast) ease;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
 }
 .lumen-notch-handle {
   display: block;
-  background: rgb(255 255 255 / 0.5);
+  background: rgb(255 255 255 / 0.7);
   border-radius: 999px;
 }
 .lumen-notch-label {
@@ -235,56 +243,77 @@
   align-items: center;
   gap: 6px;
   white-space: nowrap;
+  /* Collapse on BOTH axes at rest so the resting tab is symmetric and the grip
+     sits dead-centre. max-width alone hid the text but the label's main-axis
+     size still inflated the tab — its line-box height on top/bottom, its
+     vertical-text length on left/right — centering the grip in a secretly-tall
+     tab (and on the column edges, pushing it to the top). The min-*: 0 is
+     required: a flex item's automatic minimum size otherwise refuses to shrink
+     below its content, so max-*: 0 would have no effect. */
+  min-width: 0;
+  min-height: 0;
   max-width: 0;
+  max-height: 0;
   overflow: hidden;
   opacity: 0;
   transition:
     max-width var(--lumen-dur) var(--lumen-ease),
+    max-height var(--lumen-dur) var(--lumen-ease),
     opacity var(--lumen-dur-fast) ease;
 }
 .lumen-notch-expanded .lumen-notch-label,
 .lumen-notch:hover .lumen-notch-label,
 .lumen-notch:focus-visible .lumen-notch-label {
   max-width: 12rem;
+  max-height: 12rem;
   opacity: 1;
 }
+/* On reveal: restore the handle↔label gap and lift the glow a touch. */
+.lumen-notch-expanded,
+.lumen-notch:hover,
+.lumen-notch:focus-visible {
+  gap: 6px;
+  box-shadow:
+    0 3px 14px rgb(0 0 0 / 0.34),
+    0 0 26px color-mix(in oklab, var(--lumen-accent) 52%, transparent);
+}
 .lumen-notch-top {
   top: 0;
   left: 50%;
-  transform: translate(-50%, -8px);
-  padding: 7px 14px;
+  transform: translate(-50%, 0);
+  padding: 6px 14px;
   border-radius: 0 0 999px 999px;
 }
-.lumen-notch-top .lumen-notch-handle { width: 32px; height: 4px; }
+.lumen-notch-top .lumen-notch-handle { width: 28px; height: 3px; }
 .lumen-notch-top.lumen-notch-expanded,
 .lumen-notch-top:hover,
 .lumen-notch-top:focus-visible {
   transform: translate(-50%, 0);
-  padding: 9px 16px;
+  padding: 8px 16px;
 }
 .lumen-notch-bottom {
   bottom: 0;
   left: 50%;
-  transform: translate(-50%, 8px);
-  padding: 7px 14px;
+  transform: translate(-50%, 0);
+  padding: 6px 14px;
   border-radius: 999px 999px 0 0;
 }
-.lumen-notch-bottom .lumen-notch-handle { width: 32px; height: 4px; }
+.lumen-notch-bottom .lumen-notch-handle { width: 28px; height: 3px; }
 .lumen-notch-bottom.lumen-notch-expanded,
 .lumen-notch-bottom:hover,
 .lumen-notch-bottom:focus-visible {
   transform: translate(-50%, 0);
-  padding: 9px 16px;
+  padding: 8px 16px;
 }
 .lumen-notch-right {
   right: 0;
   top: 50%;
-  transform: translate(8px, -50%);
-  padding: 14px 7px;
+  transform: translate(0, -50%);
+  padding: 14px 6px;
   border-radius: 999px 0 0 999px;
   flex-direction: column;
 }
-.lumen-notch-right .lumen-notch-handle { width: 4px; height: 32px; }
+.lumen-notch-right .lumen-notch-handle { width: 3px; height: 28px; }
 .lumen-notch-right .lumen-notch-label {
   writing-mode: vertical-rl;
   transform: rotate(180deg);
@@ -293,23 +322,23 @@
 .lumen-notch-right:hover,
 .lumen-notch-right:focus-visible {
   transform: translate(0, -50%);
-  padding: 16px 9px;
+  padding: 16px 8px;
 }
 .lumen-notch-left {
   left: 0;
   top: 50%;
-  transform: translate(-8px, -50%);
-  padding: 14px 7px;
+  transform: translate(0, -50%);
+  padding: 14px 6px;
   border-radius: 0 999px 999px 0;
   flex-direction: column;
 }
-.lumen-notch-left .lumen-notch-handle { width: 4px; height: 32px; }
+.lumen-notch-left .lumen-notch-handle { width: 3px; height: 28px; }
 .lumen-notch-left .lumen-notch-label { writing-mode: vertical-rl; }
 .lumen-notch-left.lumen-notch-expanded,
 .lumen-notch-left:hover,
 .lumen-notch-left:focus-visible {
   transform: translate(0, -50%);
-  padding: 16px 9px;
+  padding: 16px 8px;
 }
 
 /* ─── Modal shell ────────────────────────────────────────────────── */
@@ -394,8 +423,8 @@
 }
 .lumen-modal-grabber::before {
   content: "";
-  width: 36px;
-  height: 4px;
+  width: 32px;
+  height: 3px;
   border-radius: 999px;
   background: var(--lumen-border-strong);
 }
@@ -503,9 +532,12 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 10px 16px;
-  border-bottom: 1px solid var(--lumen-border);
-  background: var(--lumen-bg);
+  margin: 12px 16px 0;
+  padding: 7px 10px;
+  border-radius: var(--lumen-r-lg);
+  border: 0.5px solid var(--lumen-border);
+  background: var(--lumen-bg-elev);
+  box-shadow: var(--lumen-shadow-sm);
   flex-wrap: wrap;
   flex-shrink: 0;
 }
@@ -605,12 +637,7 @@
   position: relative;
   display: grid;
   place-items: center;
-  background:
-    linear-gradient(45deg, var(--lumen-bg-elev) 25%, transparent 25%) -8px 0 / 16px 16px,
-    linear-gradient(-45deg, var(--lumen-bg-elev) 25%, transparent 25%) -8px 0 / 16px 16px,
-    linear-gradient(45deg, transparent 75%, var(--lumen-bg-elev) 75%) 0 8px / 16px 16px,
-    linear-gradient(-45deg, transparent 75%, var(--lumen-bg-elev) 75%) 0 8px / 16px 16px,
-    var(--lumen-bg);
+  background: transparent;
   padding: 12px 16px;
   flex-shrink: 0;
 }
@@ -618,27 +645,28 @@
   position: relative;
   display: inline-block;
   max-width: 100%;
-  max-height: 46dvh;
-  border-radius: var(--lumen-r-md);
+  max-height: 54dvh;
+  border-radius: var(--lumen-r-lg);
   overflow: hidden;
-  box-shadow: var(--lumen-shadow-sm), 0 0 0 1px var(--lumen-border);
+  box-shadow: 0 1px 3px rgb(0 0 0 / 0.14), 0 18px 44px -12px rgb(0 0 0 / 0.4),
+    0 0 0 0.5px var(--lumen-border);
   line-height: 0;
 }
 @media (min-width: 640px) {
-  .lumen-annotate-frame { max-height: 56dvh; }
+  .lumen-annotate-frame { max-height: 60dvh; }
 }
 .lumen-annotate-frame canvas {
   display: block;
   /* Base canvas dictates the rendered box; constrain by both axes so
    * tall screenshots scale down preserving aspect without nested scroll. */
   max-width: 100%;
-  max-height: 46dvh;
+  max-height: 54dvh;
   width: auto;
   height: auto;
   object-fit: contain;
 }
 @media (min-width: 640px) {
-  .lumen-annotate-frame canvas { max-height: 56dvh; }
+  .lumen-annotate-frame canvas { max-height: 60dvh; }
 }
 .lumen-annotate-overlay {
   /* Absolute over the base canvas instead of CSS-grid stacking. iOS
@@ -658,6 +686,561 @@
   cursor: copy;
 }
 
+/* ─── Stage 2a: fullscreen markup capture surface ────────────────────
+   When a capture is ready, the modal goes fullscreen: the screenshot sits
+   large in a dark surround (the frame still wraps the canvas so the
+   annotation overlay stays pixel-aligned) and the chrome floats over it. */
+.lumen-modal[data-lumen-fs="true"] {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+  border-radius: 0;
+}
+/* Desktop: the fullscreen markup is a mobile pattern — center it as a phone-like
+   column over the dimmed backdrop instead of stretching edge-to-edge. */
+@media (min-width: 640px) {
+  .lumen-modal[data-lumen-fs="true"] {
+    inset: auto;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: min(820px, 92vw);
+    height: 88vh;
+    max-height: 940px;
+    border-radius: 24px;
+    overflow: hidden;
+    box-shadow: var(--lumen-shadow-lg);
+  }
+}
+.lumen-modal[data-lumen-fs="true"] .lumen-modal-grabber,
+.lumen-modal[data-lumen-fs="true"] .lumen-modal-header,
+.lumen-modal[data-lumen-fs="true"] .lumen-stepper,
+.lumen-modal[data-lumen-fs="true"] .lumen-cap-note,
+.lumen-modal[data-lumen-fs="true"] .lumen-modal-footer {
+  display: none;
+}
+.lumen-modal[data-lumen-fs="true"] .lumen-modal-body {
+  padding: 0;
+  position: relative;
+  overflow: hidden;
+  /* soft surround behind the pre-capture states (record/upload/capturing),
+     matching the annotate surround so there's no jump to the markup view */
+  background: color-mix(in srgb, var(--lumen-fg) 8%, var(--lumen-bg));
+}
+.lumen-modal[data-lumen-fs="true"] .lumen-pane { position: absolute; inset: 0; }
+/* record prompt / upload picker / "capturing…" centered on the surround */
+.lumen-fs-center {
+  position: absolute;
+  inset: calc(env(safe-area-inset-top, 0px) + 116px) 20px 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 14px;
+  text-align: center;
+}
+.lumen-fs-center .lumen-manual-drop,
+.lumen-fs-center .lumen-record-prompt { width: 100%; max-width: 360px; }
+/* method picker (fallback when auto-capture is unavailable) on the surround */
+.lumen-fs-picker { gap: 18px; }
+.lumen-fs-picker-head { display: flex; flex-direction: column; gap: 5px; }
+.lumen-fs-picker-title { font: 700 18px/1.25 var(--lumen-font-ui); color: var(--lumen-fg); }
+.lumen-fs-picker-sub { font: 400 13.5px/1.4 var(--lumen-font-ui); color: var(--lumen-fg-muted); }
+.lumen-fs-picker .lumen-method { width: 100%; max-width: 360px; padding: 0; }
+.lumen-modal[data-lumen-fs="true"] .lumen-annotate {
+  position: absolute;
+  inset: 0;
+  padding: calc(env(safe-area-inset-top, 0px) + 126px) 14px 192px;
+  /* 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;
+}
+.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);
+}
+.lumen-modal[data-lumen-fs="true"] .lumen-annotate-frame canvas {
+  max-height: calc(100dvh - 210px);
+}
+/* floating top chrome: ✕ · method switch · Recapture (replaces the old
+   method-switch + cap-actions in the fullscreen capture surface) */
+.lumen-modal[data-lumen-fs="true"] .lumen-cap-actions { display: none; }
+.lumen-fs-top {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 6;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: calc(env(safe-area-inset-top, 0px) + 18px) 12px 14px;
+  background: transparent;
+}
+.lumen-fs-toprow { display: flex; align-items: center; gap: 8px; }
+.lumen-fs-row-corners { justify-content: space-between; }
+.lumen-fs-row-pill { justify-content: center; }
+.lumen-fs-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px;
+  border-radius: 19px;
+  background: rgb(20 20 24 / 0.66);
+  backdrop-filter: blur(18px) saturate(150%);
+  -webkit-backdrop-filter: blur(18px) saturate(150%);
+}
+.lumen-fs-pill-btn {
+  width: 38px;
+  height: 30px;
+  border: 0;
+  background: transparent;
+  color: rgb(255 255 255 / 0.6);
+  border-radius: 15px;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+}
+.lumen-fs-pill-btn svg { width: 16px; height: 16px; }
+.lumen-fs-pill-btn[aria-pressed="true"] { background: rgb(255 255 255 / 0.2); color: #fff; }
+.lumen-fs-pill-btn.lumen-fs-pentog[data-on="true"] { background: var(--lumen-accent); color: #fff; }
+.lumen-fs-pill-sep { width: 0.5px; height: 20px; background: rgb(255 255 255 / 0.22); margin: 0 3px; }
+/* annotation colour: single swatch button → popover (declutters the palette) */
+.lumen-fs-color { position: relative; display: inline-flex; align-items: center; }
+.lumen-fs-color-btn {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: 2px solid rgb(255 255 255 / 0.55);
+  padding: 0;
+  cursor: pointer;
+  background-clip: padding-box;
+}
+.lumen-fs-color-overlay { position: fixed; inset: 0; z-index: 7; }
+.lumen-fs-color-pop {
+  position: absolute;
+  bottom: 42px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 8;
+  display: flex;
+  gap: 9px;
+  padding: 9px 11px;
+  border-radius: 14px;
+  background: rgb(26 26 30 / 0.98);
+  backdrop-filter: blur(20px) saturate(160%);
+  -webkit-backdrop-filter: blur(20px) saturate(160%);
+  border: 0.5px solid rgb(255 255 255 / 0.16);
+  box-shadow: 0 16px 40px rgb(0 0 0 / 0.5);
+}
+.lumen-fs-color-pop .lumen-swatch {
+  width: 26px;
+  height: 26px;
+  border-color: rgb(255 255 255 / 0.25);
+}
+.lumen-fs-color-pop .lumen-swatch[aria-pressed="true"] {
+  box-shadow: 0 0 0 2px rgb(26 26 30), 0 0 0 4px #fff;
+}
+.lumen-fs-recap { position: relative; }
+.lumen-fs-recap-overlay { position: fixed; inset: 0; z-index: 7; }
+.lumen-fs-recap-menu {
+  position: absolute;
+  right: 0;
+  top: 46px;
+  width: 252px;
+  z-index: 8;
+  padding: 6px;
+  border-radius: 14px;
+  background: rgb(26 26 30 / 0.98);
+  backdrop-filter: blur(20px) saturate(160%);
+  -webkit-backdrop-filter: blur(20px) saturate(160%);
+  border: 0.5px solid rgb(255 255 255 / 0.16);
+  box-shadow: 0 18px 44px rgb(0 0 0 / 0.5);
+}
+.lumen-fs-recap-menu button {
+  display: flex;
+  align-items: flex-start;
+  gap: 11px;
+  width: 100%;
+  padding: 9px 10px;
+  border: 0;
+  background: transparent;
+  border-radius: 9px;
+  cursor: pointer;
+  text-align: left;
+}
+.lumen-fs-recap-menu button:active { background: rgb(255 255 255 / 0.08); }
+.lumen-fs-mi-ic {
+  width: 30px;
+  height: 30px;
+  flex: none;
+  border-radius: 8px;
+  background: rgb(255 255 255 / 0.1);
+  color: #fff;
+  display: grid;
+  place-items: center;
+}
+.lumen-fs-mi-ic svg { width: 16px; height: 16px; }
+.lumen-fs-recap-menu b {
+  display: block;
+  font: 600 13px/1.2 var(--lumen-font-ui);
+  color: #fff;
+}
+.lumen-fs-recap-menu small {
+  display: block;
+  font: 400 11px/1.3 var(--lumen-font-ui);
+  color: rgb(255 255 255 / 0.55);
+  margin-top: 2px;
+}
+.lumen-fs-chip {
+  height: 38px;
+  padding: 0 14px;
+  border: 0;
+  border-radius: 19px;
+  background: rgb(20 20 24 / 0.66);
+  color: #fff;
+  backdrop-filter: blur(18px) saturate(150%);
+  -webkit-backdrop-filter: blur(18px) saturate(150%);
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font: 600 14px/1 var(--lumen-font-ui);
+  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-mswitch {
+  display: inline-flex;
+  gap: 2px;
+  padding: 4px;
+  border-radius: 19px;
+  background: rgb(20 20 24 / 0.66);
+  backdrop-filter: blur(18px) saturate(150%);
+  -webkit-backdrop-filter: blur(18px) saturate(150%);
+}
+.lumen-fs-mswitch button {
+  width: 38px;
+  height: 30px;
+  border: 0;
+  background: transparent;
+  color: rgb(255 255 255 / 0.6);
+  border-radius: 15px;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+}
+.lumen-fs-mswitch button[aria-pressed="true"] { background: rgb(255 255 255 / 0.2); color: #fff; }
+.lumen-fs-mswitch svg { width: 16px; height: 16px; }
+/* floating glass tool palette */
+.lumen-modal[data-lumen-fs="true"] .lumen-toolbar {
+  position: absolute;
+  left: 50%;
+  bottom: 168px;
+  transform: translateX(-50%);
+  z-index: 7;
+  margin: 0;
+  width: auto;
+  max-width: calc(100% - 20px);
+  justify-content: center;
+  flex-wrap: nowrap;
+  gap: 6px;
+  padding: 7px 9px;
+  background: rgb(20 20 24 / 0.82);
+  backdrop-filter: blur(22px) saturate(160%);
+  -webkit-backdrop-filter: blur(22px) saturate(160%);
+  border: 0;
+  box-shadow: 0 12px 32px rgb(0 0 0 / 0.45);
+}
+/* one-row palette: 4 colors, tight groups */
+.lumen-modal[data-lumen-fs="true"] .lumen-swatch:nth-child(n+5) { display: none; }
+.lumen-modal[data-lumen-fs="true"] .lumen-swatches { gap: 5px; }
+.lumen-modal[data-lumen-fs="true"] .lumen-segmented { gap: 1px; padding: 0; background: transparent; }
+.lumen-modal[data-lumen-fs="true"] .lumen-segmented,
+.lumen-modal[data-lumen-fs="true"] .lumen-stroke-sizes { background: rgb(255 255 255 / 0.1); border: 0; }
+.lumen-modal[data-lumen-fs="true"] .lumen-tool { color: rgb(255 255 255 / 0.7); padding: 7px; }
+.lumen-modal[data-lumen-fs="true"] .lumen-tool svg { width: 18px; height: 18px; display: block; }
+.lumen-modal[data-lumen-fs="true"] .lumen-tool[disabled] { opacity: 0.4; }
+/* top-left group: ✕ + pen-toggle (show/hide tools) */
+.lumen-fs-topl { display: flex; align-items: center; gap: 8px; }
+.lumen-fs-pentog { width: 38px; padding: 0; justify-content: center; }
+.lumen-fs-pentog[data-on="true"] { background: var(--lumen-accent); color: #fff; }
+.lumen-fs-pentog svg { width: 17px; height: 17px; }
+/* bottom compose: description + voice + Next (replaces the footer in fullscreen) */
+.lumen-fs-compose {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 6;
+  background: var(--lumen-bg);
+  border-radius: var(--lumen-r-lg) var(--lumen-r-lg) 0 0;
+  box-shadow: 0 -0.5px 0 var(--lumen-border), 0 -16px 40px rgb(0 0 0 / 0.4);
+  padding: 12px 16px calc(16px + var(--lumen-keyboard-inset, 0px));
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.lumen-fs-desc { width: 100%; }
+.lumen-fs-next { height: 48px; }
+.lumen-fs-compose .lumen-voice-capture { margin: 0; padding: 0; }
+/* grabber to minimize the sheet */
+.lumen-fs-grab {
+  display: block;
+  width: 100%;
+  height: 16px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  position: relative;
+  flex: none;
+  margin-top: -4px;
+}
+.lumen-fs-grab::before {
+  content: "";
+  position: absolute;
+  top: 4px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 36px;
+  height: 5px;
+  border-radius: 3px;
+  background: var(--lumen-border-strong);
+}
+/* compact voice: mic lives in the field; hide the big idle button + hint */
+.lumen-fs-field { position: relative; }
+.lumen-fs-field .lumen-fs-desc { padding-right: 46px; }
+.lumen-fs-mic {
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 34px;
+  height: 34px;
+  border: 0;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  color: var(--lumen-accent);
+  background: color-mix(in srgb, var(--lumen-accent) 14%, transparent);
+  cursor: pointer;
+}
+.lumen-fs-mic svg { width: 17px; height: 17px; }
+.lumen-fs-compose .lumen-voice-capture-btn,
+.lumen-fs-compose .lumen-voice-capture-hint { display: none; }
+/* collapse the sheet down to reveal the full capture */
+.lumen-fs-compose { transition: transform 0.32s var(--lumen-ease); }
+.lumen-modal[data-lumen-sheet="down"] .lumen-fs-compose {
+  transform: translateY(calc(100% - 26px));
+}
+/* Minimizing the sheet must NOT hide the tool palette — only the pen-toggle
+   (toolsHidden) controls that. */
+.lumen-modal[data-lumen-fs="true"] .lumen-tool[aria-pressed="true"] {
+  background: var(--lumen-accent);
+  color: #fff;
+  box-shadow: none;
+}
+.lumen-modal[data-lumen-fs="true"] .lumen-toolbar .lumen-btn-ghost { color: rgb(255 255 255 / 0.85); }
+.lumen-modal[data-lumen-fs="true"] .lumen-toolbar-sep { background: rgb(255 255 255 / 0.2); }
+.lumen-modal[data-lumen-fs="true"] .lumen-stroke-size-dot { background: #fff; }
+/* footer = bottom action bar over the screen */
+.lumen-modal[data-lumen-fs="true"] .lumen-modal-footer {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 5;
+}
+
+/* ─── 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; }
+.lumen-rv-pane > .lumen-rv { pointer-events: auto; }
+/* On the review step the shared AnnotationLayer is still mounted behind the
+   panel — anchor it to the top so it peeks above the sheet, and freeze it
+   (no accidental drawing while reviewing). */
+.lumen-modal[data-lumen-review="true"] .lumen-annotate {
+  padding: calc(env(safe-area-inset-top, 0px) + 22px) 14px 0;
+  align-items: start;
+  pointer-events: none;
+}
+.lumen-rv-scrim { position: absolute; inset: 0; background: rgb(8 10 18 / 0.5); }
+.lumen-rv {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 6;
+  max-height: 80%;
+  display: flex;
+  flex-direction: column;
+  background: var(--lumen-bg);
+  border-radius: var(--lumen-r-lg) var(--lumen-r-lg) 0 0;
+  box-shadow: 0 -0.5px 0 var(--lumen-border), 0 -16px 50px rgb(0 0 0 / 0.45);
+  padding: 4px 16px calc(16px + var(--lumen-keyboard-inset, 0px));
+  animation: lumen-rv-rise 0.34s var(--lumen-ease);
+}
+@keyframes lumen-rv-rise {
+  from { transform: translateY(18px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+.lumen-rv-head {
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 46px;
+}
+.lumen-rv-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 1px;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  color: var(--lumen-accent);
+  font: 600 14px/1 var(--lumen-font-ui);
+  padding: 6px 4px 6px 0;
+}
+.lumen-rv-back svg { width: 18px; height: 18px; }
+.lumen-rv-title { font: 600 15px/1 var(--lumen-font-ui); color: var(--lumen-fg); }
+.lumen-rv-spacer { width: 52px; }
+.lumen-rv-rows {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.lumen-rv-set {
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
+  padding: 12px 0;
+  border-top: 0.5px solid var(--lumen-border);
+}
+.lumen-rv-set:first-child { border-top: 0; padding-top: 4px; }
+.lumen-rv-k {
+  color: var(--lumen-fg-muted);
+  font: 600 12.5px/1.3 var(--lumen-font-ui);
+}
+.lumen-rv-muted { color: var(--lumen-fg-muted); font-weight: 400; }
+.lumen-rv-desc {
+  width: 100%;
+  min-height: 52px;
+  resize: none;
+  font: 400 15px/1.4 var(--lumen-font-ui);
+}
+.lumen-rv-chips, .lumen-rv-prio { display: flex; gap: 7px; flex-wrap: wrap; }
+.lumen-rv-chip,
+.lumen-rv-prio-opt {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  height: 34px;
+  padding: 0 13px;
+  border-radius: 9px;
+  border: 1px solid var(--lumen-border);
+  background: transparent;
+  color: var(--lumen-fg);
+  font: 600 13px/1 var(--lumen-font-ui);
+  cursor: pointer;
+}
+.lumen-rv-chip[aria-pressed="true"],
+.lumen-rv-prio-opt[aria-pressed="true"] {
+  border-color: var(--lumen-accent);
+  background: color-mix(in srgb, var(--lumen-accent) 10%, transparent);
+  color: var(--lumen-accent);
+}
+/* Linear-style priority glyphs */
+.lumen-pri-ic {
+  display: inline-flex;
+  align-items: flex-end;
+  gap: 2px;
+  height: 12px;
+  color: var(--lumen-fg-muted);
+}
+.lumen-rv-prio-opt[aria-pressed="true"] .lumen-pri-ic { color: var(--lumen-accent); }
+.lumen-pri-bars i { width: 3px; border-radius: 1px; background: currentColor; opacity: 0.3; }
+.lumen-pri-bars i:nth-child(1) { height: 5px; }
+.lumen-pri-bars i:nth-child(2) { height: 8px; }
+.lumen-pri-bars i:nth-child(3) { height: 12px; }
+.lumen-pri-bars[data-level="1"] i:nth-child(1),
+.lumen-pri-bars[data-level="2"] i:nth-child(1),
+.lumen-pri-bars[data-level="2"] i:nth-child(2),
+.lumen-pri-bars[data-level="3"] i { opacity: 1; }
+.lumen-pri-urgent {
+  width: 14px;
+  height: 14px;
+  border-radius: 4px;
+  background: #f2994a;
+  color: #fff;
+  align-items: center;
+  justify-content: center;
+  font: 800 10px/1 var(--lumen-font-ui);
+}
+.lumen-rv-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 11px 0;
+  border-top: 0.5px solid var(--lumen-border);
+  font: 400 13px/1.3 var(--lumen-font-ui);
+}
+.lumen-rv-rk { color: var(--lumen-fg-muted); font-weight: 600; }
+.lumen-rv-rv {
+  color: var(--lumen-fg);
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+.lumen-rv-rows .lumen-label { padding: 12px 0 0; border-top: 0.5px solid var(--lumen-border); }
+/* voice control reads as a neat bordered pill in the review (no oversized icon
+   / no text wrap) — matching the dashed "Attach a video" affordance */
+.lumen-rv-rows .lumen-audio-row .lumen-btn-ghost {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  white-space: nowrap;
+  height: 36px;
+  padding: 0 14px;
+  border: 1px solid var(--lumen-border);
+  border-radius: 10px;
+}
+.lumen-rv-rows .lumen-audio-row .lumen-btn-ghost svg { width: 17px; height: 17px; flex: none; }
+.lumen-rv-attachrow { padding: 12px 0 2px; }
+.lumen-rv-attach {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  height: 36px;
+  padding: 0 13px;
+  border-radius: 10px;
+  border: 1px dashed color-mix(in srgb, var(--lumen-fg) 28%, transparent);
+  background: transparent;
+  color: var(--lumen-fg-muted);
+  font: 600 13px/1 var(--lumen-font-ui);
+  cursor: pointer;
+}
+.lumen-rv-attach svg { width: 15px; height: 15px; }
+.lumen-rv-attach input { display: none; }
+.lumen-rv-send {
+  flex: none;
+  height: 50px;
+  margin-top: 12px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 9px;
+}
+.lumen-rv-send svg { width: 18px; height: 18px; }
+
 /* ─── Comment / speech-bubble annotations (inline-editable, Figma-style) ── */
 .lumen-bubble-layer {
   position: absolute;