@incodetech/prizma-core-screens 0.2.14 → 0.2.20

package/src/ScreenLayout.css

@@ -829,6 +829,206 @@
   }
 }
 
+/* ── Landscape phones: the stack keeps its order, the ring changes axis ──────
+ * WCAG 2.1 SC 1.3.4 Orientation (AA) asks every screen to work held sideways,
+ * and a phone held sideways is 375 to 440 tall (the phone catalog rotated:
+ * iPhone SE 667 x 375, the 844 x 390 reference, Large Android 915 x 412,
+ * Pro Max 956 x 440). Measured against the stacks the short-panel rules fit
+ * into 626: a capture screen needs ~557, a tutorial ~700. So two things give
+ * ground that no short panel asked for: the tutorial loses its illustration,
+ * and the capture screen turns its ring and its instruction side by side
+ * (FaceCaptureLayout.css). Everything else keeps the portrait order, title
+ * over copy over button, compacted (Camila, 2026-10-21: top-down, not side by
+ * side; the tag always centred; the button closer to the bottom).
+ *
+ * THE LINE is the shell's own shape, never the browser viewport (a 390 shell
+ * in a 1400 window is portrait): `orientation: landscape` with a 500 height
+ * cap. The cap keeps the rules off tablets, desktop windows and the iPhone
+ * Duo open full screen (626), which already have their own answers (#21,
+ * #VS-32, #F-37) and are wider than they are tall. 500 has slack above the
+ * 440 ceiling and under the 626 floor. Every rule below lives inside the one
+ * query, so outside it not one declaration exists and the portrait render is
+ * byte-identical. Exploration `face-capture-landscape` (Camila, 2026-10-20);
+ * the developer-facing list is LANDSCAPE.md. DEVIATIONS #F-39.
+ *
+ * What never changes, in either orientation: the H2, the CTA, the live
+ * instruction and where it lives (#12/#14), the status and verdict copy, and
+ * the tag's seat: bottom centre, Spacing/16 up, on every screen that has one. */
+@container pcs-screen ((orientation: landscape) and (max-height: 500px)) {
+  /* The status-bar reserve STAYS (`--pcs-status-bar`, 47 by default, the
+   * host's own value otherwise). Round 2 had zeroed it on the argument that an
+   * iPhone draws no status bar in landscape; Camila's QA of the canvas
+   * (2026-10-21) found the result screens' status mark sitting in the system
+   * bar's row (the Lab's pills at 25 to 35, Elena's landscape reference keeps
+   * a 54 bar), which no device would allow. The reserve is the one line every
+   * screen already respects in portrait, so it is kept rather than replaced
+   * by a landscape-only offset. The capture screens are unaffected: their nav
+   * is hidden below and the ring is placed on the panel's height. */
+
+  /* Capture screens drop the nav row entirely. It is already reserved and
+   * empty on a feed-open capture screen (the 2026-08-18 header rule), and a
+   * 335 ring plus the 56 row does not fit in 375. A client logo opt-in goes
+   * with it in landscape: there is no row to hold it. */
+  .prizma-screen-shell:has(> .prizma-screen-layout__content--capture) > .prizma-screen-nav {
+    display: none;
+  }
+
+  /* …and the capture column stops reserving the footer under the ring: with
+   * the reserve the ring had 328 to sit in. (0,3,0), the reserve's own
+   * specificity, later in the file. FaceCaptureLayout.css says what happens
+   * to the tag there. */
+  .prizma-screen-shell .prizma-screen-layout__content.prizma-screen-layout__content--capture {
+    padding-bottom: 0;
+  }
+
+  /* ARCHETYPE A (tutorial). The illustration goes: it is the one element that
+   * carries no task information (step 1 of the order), and in landscape it is
+   * also the only one that cannot fit above a title block and a CTA at any
+   * size that still reads (Camila, 2026-10-21: "remove it to have more space,
+   * it's not adding essential information"). Its slot stays as the flexible
+   * middle, so the band keeps sitting at the bottom of the column, above the
+   * tag, where the portrait has it; the title block stays under the logo nav.
+   * Measured on the SE (375): nav 56, title block 77, disclaimer and CTA 105,
+   * the tag's reserve 62, Spacing/16 twice: 316. The disclaimer fit, and
+   * stayed until 2026-11-03, when Camila took it off the landscape tutorial
+   * as well (below): with the art gone the line between the subtitle and the
+   * CTA read as a second subtitle, and the task is in the title block.
+   * Addressed by the archetype's own `--tutorial` class (TutorialScreen.tsx),
+   * not by `:has()` on the illustration slot: Core Lab's converter drops
+   * hidden subtrees before the scene is laid out, so a rule that needed the
+   * hidden art to match would vanish on the canvas. */
+  .prizma-screen-shell .prizma-screen-layout__content--tutorial {
+    /* The logo nav is gone in landscape (below), so the column reserves the
+     * status bar itself, Spacing/8 under it like the result screens. */
+    padding-top: calc(var(--pcs-status-bar, 47px) + var(--prizma-spacing-8));
+    /* The column centres its children (the band below is the one that is
+     * narrower than the column). `align-items` on the parent rather than
+     * `align-self` or `margin-inline: auto` on the band: Core Lab's converter
+     * reads a flex container's alignment and ignores per-child margins and
+     * `align-self`, so the first take drew the 420 band at the left edge on
+     * the canvas while the browser centred it (Camila, 2026-10-21). */
+    align-items: center;
+  }
+
+  /* Every other child keeps the full column: `align-items: center` would
+   * otherwise shrink the title block to its content. */
+  .prizma-screen-layout__content--tutorial > :not(.prizma-screen-layout__band) {
+    width: 100%;
+  }
+
+  .prizma-screen-layout__content--tutorial > .prizma-screen-layout__flex > [class*='prizma-illustration-'] {
+    display: none;
+  }
+
+  /* The disclaimer goes with the art (Camila, 2026-11-03): title, subtitle,
+   * CTA. Portrait keeps it; outside the query this rule does not exist. */
+  .prizma-screen-layout__content--tutorial > .prizma-screen-layout__band > .prizma-disclaimer {
+    display: none;
+  }
+
+  /* The slot that held the art keeps only its flexible height, not its
+   * Spacing/16 padding above and below: with the illustration gone those 32
+   * are empty, and on the SE they were what pushed the CTA onto the tag once
+   * the status bar came back (QA 2026-10-21). SE budget: nav 91, Spacing/16,
+   * title block 76, band 109, the tag's reserve 62: 354 of 375. */
+  .prizma-screen-shell .prizma-screen-layout__content--tutorial > .prizma-screen-layout__flex {
+    padding-block: 0;
+  }
+
+  /* The actions take Elena's landscape column: 420, centred (Core Lab
+   * recipes, landscape, read off the Document Capture reference 6701:8042).
+   * A CTA stretched across 796 reads as a bar, not a button; 420 is the
+   * Title's own max width, so the axis is one. The band's tag is anchored to
+   * the shell and already centres. */
+  /* (0,3,0) on purpose: Core Lab's device CSS caps `.prizma-screen-layout__band`
+   * at the panel's column with a (0,2,0) rule declared later, and at 844 that
+   * read as "no cap" on the canvas while the browser kept 420. */
+  .prizma-screen-shell .prizma-screen-layout__content--tutorial > .prizma-screen-layout__band {
+    width: 100%;
+    max-width: 420px; /* hardcoded — the actions column of Elena's landscape reference, equal to Core's Title max width */
+    gap: var(--prizma-spacing-8); /* Elena's first concession, the same rhythm as the result band below */
+  }
+
+  /* ARCHETYPE F (result with a CTA band). The logo nav goes instead of the
+   * status mark: the mark is the one thing that tells a warning from a
+   * failure, the logo is the client's presence and comes back on the next
+   * screen (Camila, 2026-10-21: remove the logo or the icon, keep the text,
+   * bring the button down). The title block centres in what is left above the
+   * band; the band keeps its portrait seat at the bottom, above the tag, with
+   * #F-37's compact rhythm already in force under 720. Measured on the SE:
+   * title block with its mark 153, band 101, the tag's reserve 62, Spacing/16:
+   * 332 in 375. The genericErrors family has no nav to begin with. */
+  .prizma-screen-shell:has(> .prizma-screen-layout__band--result) > .prizma-screen-nav {
+    display: none;
+  }
+
+  /* The title block sits at a FIXED offset under the status bar and the band
+   * at the bottom: Spacing/8 under the reserve clears the bar on both frames
+   * (mark at 55 with 47; Elena's bar ends at 54). Not `safe center`: the
+   * portrait column centres the title block in the free height, which on the
+   * SE left the mark 2.9 px inside the bar and 12.1 when the subtitle wrapped,
+   * and Core Lab's converter does not centre a column's children at all, so
+   * the canvas and the browser disagreed about where the mark was. A fixed
+   * seat is the same on both. SE budget, worst case (two-line subtitle):
+   * 55 + 132 + 16 + 109 + 62 = 374 of 375, with the band's gap conceded
+   * below. */
+  .prizma-screen-shell:has(> .prizma-screen-layout__band--result) > .prizma-screen-layout__content {
+    padding-top: calc(var(--pcs-status-bar, 47px) + var(--prizma-spacing-8));
+    justify-content: flex-start;
+  }
+
+  /* Same 420 column for the result band, centred. The band stays full width
+   * and centres its own rows (disclaimer, CTAs, extra content), each capped
+   * at 420: `align-items` on a flex column is what Core Lab's converter reads,
+   * while `margin-inline: auto` on the band, or `align-items` on the shell
+   * (whose anchored footer and tag it lays out by hand), centred in the
+   * browser and pinned the band left on the canvas (Camila, 2026-10-21).
+   * (0,3,0) for the same reason as the tutorial band above. */
+  .prizma-screen-shell:has(> .prizma-screen-layout__band--result) > .prizma-screen-layout__band--result {
+    width: 100%;
+    align-items: center;
+    box-sizing: border-box;
+    /* Elena's first concession (Core Lab recipes, landscape): gaps 16 to 8
+     * before anything else goes. It is what keeps the two-line result stack
+     * inside the 375 SE under the restored status bar. */
+    gap: var(--prizma-spacing-8);
+  }
+
+  .prizma-screen-shell:has(> .prizma-screen-layout__band--result) > .prizma-screen-layout__band--result > * {
+    width: 100%;
+    max-width: 420px; /* hardcoded — Elena's actions column, equal to Core's Title max width */
+  }
+
+  /* NO LOGO, NO TAG on any landscape screen (Camila, 2026-10-23: "they take
+   * up space that could be used by the content"). The nav row (the client
+   * logo's seat) and the verified tag go on every family; the capture screens
+   * had already dropped both. The columns that reserved the tag's 62 at the
+   * bottom keep Spacing/16 instead, and the result band sits Spacing/16 off
+   * the bottom; the capture column keeps its 0 so the ring's centre does not
+   * move. The status bar stays reserved by the columns themselves. */
+  .prizma-screen-shell > .prizma-screen-nav,
+  .prizma-screen-shell .prizma-screen-layout__footer,
+  .prizma-screen-shell .prizma-screen-layout__band__tag {
+    display: none;
+  }
+
+  .prizma-screen-shell:has(.prizma-screen-layout__band__tag) .prizma-screen-layout__content:not(.prizma-screen-layout__content--capture) {
+    padding-bottom: var(--prizma-spacing-16);
+  }
+
+  .prizma-screen-shell:has(> .prizma-screen-layout__band--result) > .prizma-screen-layout__band--result {
+    margin-bottom: var(--prizma-spacing-16);
+  }
+
+  /* The band's disclaimer ("2 attempts remaining", "Stay still…") stays on
+   * one line: in the 420 column every disclaimer the module ships fits, and
+   * Core Lab's converter wrapped it to its first word otherwise (Camila,
+   * 2026-10-23: "remaining attempts should always be in one line"). */
+  .prizma-screen-layout__band .prizma-disclaimer__text {
+    white-space: nowrap;
+  }
+}
+
 /* ── Anchored-chrome layering ─────────────────────────────────────────────────
  * The camera HUD bands lift themselves to `z-index: 1` so their copy paints
  * above `PrizmaIdCapture`'s scrim (an absolutely positioned box-shadow that

package/src/ScreenShell.css

@@ -25,6 +25,19 @@
    * layout paint` does both without forcing a composited layer the way
    * `transform` would. */
   contain: layout paint;
+  /* And it is the WINDOW Core's presenters size their overlays to. The Modal
+   * and Bottom sheet presenters draw their scrim `position: fixed` with
+   * `height: var(--prizma-overlay-height, 100dvh)` and pin the panel to the
+   * scrim's bottom, so a host whose fixed children land inside a box smaller
+   * than the viewport has to say so. Unsaid, the scrim inside this shell was
+   * the browser's height and the sheet sat at the browser's bottom edge, below
+   * the frame: on the closed iPhone Duo (678) Qualified Signature's certificate
+   * popups showed only the sheet's title peeking in at the bottom, on the open
+   * panel (626) nothing but scrim (measured 2026-10-29). 100% of the shell is
+   * the window, whatever the panel; on a real device the shell IS the viewport
+   * and the value reads the same. DEVIATIONS #F-41. */
+  --prizma-overlay-top: 0px;
+  --prizma-overlay-height: 100%;
 }
 
 /* Camera viewfinder screens — always a dark stage regardless of theme.

package/src/TutorialScreen.tsx

@@ -109,7 +109,10 @@ export const PrizmaTutorialScreen = forwardRef<HTMLDivElement, PrizmaTutorialScr
       {progress ? (
         <div className="prizma-screen-layout__progress">{progress}</div>
       ) : null}
-      <div className="prizma-screen-layout__content">
+      {/* `--tutorial` names the archetype on the column so the landscape rule
+          in ScreenLayout.css (#F-39) can address it without `:has()` on the
+          illustration slot, which that rule hides. Portrait styles none of it. */}
+      <div className="prizma-screen-layout__content prizma-screen-layout__content--tutorial">
         <PrizmaTitle
           variant={overrides?.align === 'left' ? 'left' : 'centered'}
           title={title}

package/src/index.ts

@@ -690,6 +690,17 @@ export {
 } from './ErrorScreensStrings';
 export { ErrorScreensScreen, type ErrorScreensScreenProps } from './ErrorScreensScreen';
 
+// Rotate to portrait — the one prompt every capture module shows while the
+// phone is held sideways; capture screens stay portrait (Camila, 2026-11-03).
+// Not in the generic Figma file: born in the playground
+// `artefactos/playgrounds/2026-10-29__rotate-to-portrait-prompt`. DEVIATIONS #F-42.
+export { type RotateToPortraitStrings } from './RotateToPortraitStrings';
+export {
+  RotateToPortraitScreen,
+  type RotateToPortraitScreenProps,
+  type RotateToPortraitTopEdge,
+} from './RotateToPortraitScreen';
+
 // Demo screens — the end screen; the start screen is owner-owned and pending.
 export {
   type DemoScreensStrings,

package/src/styles.css

@@ -31,6 +31,7 @@
 @import './PhoneInputLayout.css';
 @import './QualifiedSignatureLayout.css';
 @import './ReusabilityLayout.css';
+@import './RotateToPortraitScreen.css';
 @import './ScreenLayout.css';
 @import './ScreenNav.css';
 @import './ScreenShell.css';