PT-4313: Compensate every indented paragraph marker in the gutter view

packages/platform/package.json

@@ -62,6 +62,7 @@
     "quill-delta": "^5.1.0"
   },
   "devDependencies": {
+    "postcss": "8.5.26",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "shared": "workspace:~",

packages/platform/src/usj-nodes.css

@@ -2830,17 +2830,30 @@ span.read img {
   unicode-bidi: isolate;
 }
 
-/* Indent compensation — mirrors the inline-start margin values above.
-   Only active when .text-spacing is present (same condition as the source rules).
-   pi2 and pi3 use the same primary-indent value in both LTR and RTL (10vw and 15vw
-   respectively), so no direction restriction is needed here. */
+/* Indent compensation: each marker's --para-indent must equal its text-spacing margin-left above,
+   or the gutter glyph lands in the text. The same value serves RTL margin-right, so a marker needs
+   the same margin in both directions. usj-nodes.css.gutter-coverage.test.ts enforces this for
+   margins set in THIS file; margins a host injects later (generateUsjCss, consumer commentary
+   sheets) override these and leave the compensation stale by the difference.
+   \tr needs no entry: a real row is a <tr>, not a .para. The obsolete \tr1 and \tr2 still convert
+   to plain paragraphs, so they do.
+   Out of scope: an "auto" text direction. TextDirectionPlugin sets no dir attribute for it, so the
+   [dir]-qualified margins above never apply while this compensation still does, and the
+   [dir]-qualified gutter rules never match, so RTL content keeps the LTR gutter; see the KNOWN GAP
+   note in ArrowNavigationPlugin. */
+.psc-gutter-markers.text-spacing .usfm_p2 {
+  --para-indent: 2.5vw;
+}
 .psc-gutter-markers.text-spacing .usfm_io,
 .psc-gutter-markers.text-spacing .usfm_io1,
 .psc-gutter-markers.text-spacing .usfm_ili,
 .psc-gutter-markers.text-spacing .usfm_ili1,
 .psc-gutter-markers.text-spacing .usfm_li,
 .psc-gutter-markers.text-spacing .usfm_li1,
-.psc-gutter-markers.text-spacing .usfm_pi2 {
+.psc-gutter-markers.text-spacing .usfm_ph,
+.psc-gutter-markers.text-spacing .usfm_ph1,
+.psc-gutter-markers.text-spacing .usfm_pi2,
+.psc-gutter-markers.text-spacing .usfm_tr1 {
   --para-indent: 10vw;
 }
 .psc-gutter-markers.text-spacing .usfm_q,
@@ -2853,14 +2866,23 @@ span.read img {
 .psc-gutter-markers.text-spacing .usfm_li2,
 .psc-gutter-markers.text-spacing .usfm_lim,
 .psc-gutter-markers.text-spacing .usfm_lim1,
-.psc-gutter-markers.text-spacing .usfm_pi3 {
+.psc-gutter-markers.text-spacing .usfm_ph2,
+.psc-gutter-markers.text-spacing .usfm_pi3,
+.psc-gutter-markers.text-spacing .usfm_tr2 {
   --para-indent: 15vw;
 }
 .psc-gutter-markers.text-spacing .usfm_qm,
 .psc-gutter-markers.text-spacing .usfm_qm1,
+.psc-gutter-markers.text-spacing .usfm_qm2,
+.psc-gutter-markers.text-spacing .usfm_qm3,
+.psc-gutter-markers.text-spacing .usfm_iq,
+.psc-gutter-markers.text-spacing .usfm_iq1,
+.psc-gutter-markers.text-spacing .usfm_iq2,
+.psc-gutter-markers.text-spacing .usfm_iq3,
 .psc-gutter-markers.text-spacing .usfm_io3,
 .psc-gutter-markers.text-spacing .usfm_li3,
-.psc-gutter-markers.text-spacing .usfm_lim2 {
+.psc-gutter-markers.text-spacing .usfm_lim2,
+.psc-gutter-markers.text-spacing .usfm_ph3 {
   --para-indent: 20vw;
 }
 .psc-gutter-markers.text-spacing .usfm_io4,
@@ -2873,20 +2895,26 @@ span.read img {
 }
 .psc-gutter-markers.text-spacing .usfm_ipi,
 .psc-gutter-markers.text-spacing .usfm_imi,
+.psc-gutter-markers.text-spacing .usfm_ipq,
+.psc-gutter-markers.text-spacing .usfm_imq,
+.psc-gutter-markers.text-spacing .usfm_ipr,
 .psc-gutter-markers.text-spacing .usfm_pmo,
 .psc-gutter-markers.text-spacing .usfm_pm,
 .psc-gutter-markers.text-spacing .usfm_pmc,
 .psc-gutter-markers.text-spacing .usfm_pmr,
 .psc-gutter-markers.text-spacing .usfm_pi,
 .psc-gutter-markers.text-spacing .usfm_pi1,
-.psc-gutter-markers.text-spacing .usfm_mi {
+.psc-gutter-markers.text-spacing .usfm_psi,
+.psc-gutter-markers.text-spacing .usfm_mi,
+.psc-gutter-markers.text-spacing .usfm_qd {
   --para-indent: 5vw;
 }
 
-/* --verse-text-start mirrors the text-indent values for paragraphs with a
-   negative text-indent (hanging indent). These paragraphs render their first
-   line to the inline-start of the element's border edge, so the active focus box
-   ::before must start at text-indent to align with the text. */
+/* --verse-text-start mirrors the negative text-indent (hanging indent) of poetry-style
+   paragraphs. The active focus box ::after reads it through min() against the glyph column,
+   so it only wins when a hanging indent reaches further into the gutter than
+   -(gutter width) - --para-indent. No marker in this file does, so today it is a fallback;
+   usj-nodes.css.gutter-coverage.test.ts keeps it in step with text-indent regardless. */
 .psc-gutter-markers.text-spacing .usfm_q,
 .psc-gutter-markers.text-spacing .usfm_q1 {
   --verse-text-start: -10vw;
@@ -2935,6 +2963,14 @@ span.read img {
 .psc-gutter-markers.text-spacing .usfm_iq3 {
   --verse-text-start: -5vw;
 }
+.psc-gutter-markers.text-spacing .usfm_ph,
+.psc-gutter-markers.text-spacing .usfm_ph1,
+.psc-gutter-markers.text-spacing .usfm_ph2,
+.psc-gutter-markers.text-spacing .usfm_ph3,
+.psc-gutter-markers.text-spacing .usfm_tr1,
+.psc-gutter-markers.text-spacing .usfm_tr2 {
+  --verse-text-start: -5vw;
+}
 
 /* ── Active text focus box ────────────────────────────────────────────────────
    Applied via .psc-active-focus when viewOptions.hasActiveTextFocusBox is true.
@@ -2975,6 +3011,6 @@ span.read img {
 .psc-active-focus.psc-gutter-markers .psc-active-text::after {
   inset-inline-start: min(
     var(--verse-text-start, 0px),
-    calc(-1 * var(--psc-gutter-width) - var(--para-indent))
+    calc(-1 * var(--psc-gutter-width) - var(--para-indent, 0px))
   );
 }