@beyondwork/docx-react-component 1.0.53 → 1.0.55

package/src/ui-tailwind/status/tw-status-bar.tsx

@@ -33,8 +33,34 @@ export interface TwStatusBarProps {
    * canvas backend is live vs. the empirical fallback.  Absent = skip.
    */
   measurementFidelity?: PublicMeasurementFidelity;
+  /**
+   * Lane 6b §6b.S4: opt-in diagnostics flag.  When `true`, the status
+   * bar reveals the measurement-fidelity badge on the right zone.
+   * Hosts must pair this with `debugMode` in production — the fidelity
+   * badge is a maintainer affordance, not a user-facing surface.
+   */
+  debugMode?: boolean;
+  /**
+   * Lane 6b §6b.S4: explicit opt-in to render the fidelity badge when
+   * `debugMode` is on.  Defaults to `false` so even a debug harness
+   * keeps the badge hidden unless a human asks for it.
+   */
+  showFidelityBadge?: boolean;
 }
 
+/**
+ * TwStatusBar — bottom chrome strip, 28-px tall (designsystem §6.16).
+ *
+ * Three-zone CSS grid (Lane 6b §6b.S4):
+ *   LEFT   — save state dot + export state dot + comment / change counts
+ *   CENTER — Page N of M indicator
+ *   RIGHT  — measurement fidelity badge (opt-in) + session-active label
+ *
+ * Status dots bind `--color-status-*` tokens (Lane 6a §3 semantic family)
+ * so the review / draft / paused / blocked colour ladder stays consistent
+ * with the workflow card grammar.  The fidelity badge is diagnostic-only:
+ * hidden unless `debugMode && showFidelityBadge` are both `true`.
+ */
 export function TwStatusBar(props: TwStatusBarProps) {
   const saveState = props.isExportBlocked
     ? "Read-only"
@@ -46,58 +72,100 @@ export function TwStatusBar(props: TwStatusBarProps) {
     : props.preserveOnlyCount > 0
       ? "Warnings"
       : "Ready";
+
+  const saveDotColor = props.isExportBlocked
+    ? "bg-[var(--color-status-blocked)]"
+    : props.isDirty
+      ? "bg-[var(--color-status-in-progress)]"
+      : "bg-[var(--color-status-ready)]";
+  const exportDotColor = props.isExportBlocked
+    ? "bg-[var(--color-status-blocked)]"
+    : props.preserveOnlyCount > 0
+      ? "bg-[var(--color-semantic-warning)]"
+      : "bg-[var(--color-status-ready)]";
+
+  const showFidelity =
+    props.measurementFidelity != null &&
+    props.debugMode === true &&
+    props.showFidelityBadge === true;
+
   return (
     <footer
       data-testid="status-bar"
-      className="flex h-7 shrink-0 items-center gap-3 border-t border-border/60 bg-surface/72 px-3 text-[11px] text-tertiary"
+      style={{
+        // Lane 6b §6b.U5 — density opt-in.  Scales the 28 px base by the
+        // root `--space-density-multiplier` (compact 0.85 / standard 1 /
+        // comfortable 1.15).  Hosts toggle via the `useDensity` hook
+        // from Lane 6a.
+        height:
+          "calc(28px * var(--space-density-multiplier, 1))",
+      }}
+      className={[
+        "grid shrink-0 grid-cols-[1fr_auto_1fr] items-center gap-3",
+        "border-t border-[var(--color-border-subtle)]",
+        "bg-[var(--color-bg-chrome)]/72",
+        "px-3 text-[11px] text-[var(--color-text-tertiary)]",
+      ].join(" ")}
     >
-      <span className="flex items-center gap-1.5">
-        <span
-          className={`inline-block h-1.5 w-1.5 rounded-full ${
-            props.isExportBlocked
-              ? "bg-danger"
-              : props.isDirty
-                ? "bg-comment"
-                : "bg-accent"
-          }`}
-        />
-        {saveState}
-      </span>
-      <span className="flex items-center gap-1.5">
-        <span
-          className={`inline-block h-1.5 w-1.5 rounded-full ${
-            props.isExportBlocked
-              ? "bg-danger"
-              : props.preserveOnlyCount > 0
-                ? "bg-warning"
-                : "bg-accent"
-          }`}
-        />
-        Export {exportState.toLowerCase()}
-      </span>
-      <span>
-        {props.commentCount} comment{props.commentCount !== 1 ? "s" : ""} ·{" "}
-        {props.changeCount} change{props.changeCount !== 1 ? "s" : ""}
-      </span>
-      {props.displayPageNumber != null && props.pageCount != null ? (
-        <span data-testid="status-bar-page-count">
-          Page {props.displayPageNumber} of {props.pageCount}
+      {/* LEFT zone — save + export + counts */}
+      <div
+        className="flex items-center gap-3"
+        data-region="left"
+        data-testid="status-bar__region-left"
+      >
+        <span className="flex items-center gap-1.5">
+          <span
+            className={`inline-block h-1.5 w-1.5 rounded-[var(--radius-pill)] ${saveDotColor}`}
+            data-testid="status-bar__save-dot"
+          />
+          {saveState}
+        </span>
+        <span className="flex items-center gap-1.5">
+          <span
+            className={`inline-block h-1.5 w-1.5 rounded-[var(--radius-pill)] ${exportDotColor}`}
+            data-testid="status-bar__export-dot"
+          />
+          Export {exportState.toLowerCase()}
         </span>
-      ) : null}
-      <span className="flex-1" />
-      {props.measurementFidelity ? (
-        <span
-          data-testid="status-bar-measurement-fidelity"
-          data-fidelity={props.measurementFidelity}
-          className="uppercase tracking-[0.12em] text-tertiary/70"
-          title={`Measurement fidelity: ${props.measurementFidelity}`}
-        >
-          {formatFidelityBadge(props.measurementFidelity)}
+        <span>
+          {props.commentCount} comment{props.commentCount !== 1 ? "s" : ""} ·{" "}
+          {props.changeCount} change{props.changeCount !== 1 ? "s" : ""}
+        </span>
+      </div>
+
+      {/* CENTER zone — page indicator */}
+      <div
+        className="flex items-center justify-center"
+        data-region="center"
+        data-testid="status-bar__region-center"
+      >
+        {props.displayPageNumber != null && props.pageCount != null ? (
+          <span data-testid="status-bar-page-count">
+            Page {props.displayPageNumber} of {props.pageCount}
+          </span>
+        ) : null}
+      </div>
+
+      {/* RIGHT zone — fidelity badge (opt-in) + session */}
+      <div
+        className="flex items-center justify-end gap-2"
+        data-region="right"
+        data-testid="status-bar__region-right"
+      >
+        {showFidelity ? (
+          <span
+            data-testid="status-bar-measurement-fidelity"
+            data-fidelity={props.measurementFidelity}
+            className="uppercase tracking-[0.12em] text-[var(--color-text-tertiary)]/70"
+            title={`Measurement fidelity: ${props.measurementFidelity}`}
+          >
+            {formatFidelityBadge(props.measurementFidelity!)}
+          </span>
+        ) : null}
+        <span className="truncate text-[10px] uppercase tracking-[0.12em] text-[var(--color-text-tertiary)]/80">
+          Session active
         </span>
-      ) : null}
-      <span className="truncate text-[10px] uppercase tracking-[0.12em] text-tertiary/80">
-        Session active
-      </span>
+      </div>
     </footer>
   );
 }

package/src/ui-tailwind/theme/editor-theme.css

@@ -587,6 +587,14 @@
 .wre-scope-rail-stripe.wre-scope-rail-label-secondary { color: var(--color-secondary); }
 .wre-scope-rail-stripe.wre-scope-rail-label-danger { color: var(--color-danger); }
 
+/* §3.7 canonical scope families — stripe color */
+.wre-scope-rail-stripe.wre-scope-rail-tint-blocked   { background: var(--color-scope-tint-blocked); }
+.wre-scope-rail-stripe.wre-scope-rail-tint-in-scope  { background: var(--color-scope-tint-in-scope); }
+.wre-scope-rail-stripe.wre-scope-rail-tint-suggest   { background: var(--color-scope-tint-suggest); }
+.wre-scope-rail-stripe.wre-scope-rail-tint-comment   { background: var(--color-scope-tint-comment); }
+.wre-scope-rail-stripe.wre-scope-rail-tint-scheduled { background: var(--color-scope-tint-scheduled); }
+.wre-scope-rail-stripe.wre-scope-rail-tint-proposed  { background: var(--color-scope-tint-proposed); }
+
 /*
  * ─── Scope rail label pill ───
  *
@@ -652,6 +660,38 @@
   background: color-mix(in srgb, var(--color-danger) 8%, var(--color-canvas, #fff));
 }
 
+/* §3.7 canonical scope families — label pill */
+.wre-scope-rail-label-blocked {
+  color: var(--color-semantic-error);
+  border-color: color-mix(in srgb, var(--color-semantic-error) 40%, transparent);
+  background: color-mix(in srgb, var(--color-semantic-error) 8%, var(--color-canvas, #fff));
+}
+.wre-scope-rail-label-suggest {
+  color: var(--color-semantic-warning);
+  border-color: color-mix(in srgb, var(--color-semantic-warning) 42%, transparent);
+  background: color-mix(in srgb, var(--color-semantic-warning) 8%, var(--color-canvas, #fff));
+}
+.wre-scope-rail-label-scheduled {
+  color: var(--color-semantic-info);
+  border-color: color-mix(in srgb, var(--color-semantic-info) 40%, transparent);
+  background: color-mix(in srgb, var(--color-semantic-info) 8%, var(--color-canvas, #fff));
+}
+.wre-scope-rail-label-comment {
+  color: var(--color-accent-primary);
+  border-color: color-mix(in srgb, var(--color-accent-primary) 40%, transparent);
+  background: color-mix(in srgb, var(--color-accent-primary) 8%, var(--color-canvas, #fff));
+}
+.wre-scope-rail-label-in-scope {
+  color: var(--color-accent-primary);
+  border-color: color-mix(in srgb, var(--color-accent-primary) 40%, transparent);
+  background: color-mix(in srgb, var(--color-accent-primary) 8%, var(--color-canvas, #fff));
+}
+.wre-scope-rail-label-proposed {
+  color: var(--color-accent-primary);
+  border-color: color-mix(in srgb, var(--color-accent-primary) 40%, transparent);
+  background: color-mix(in srgb, var(--color-accent-primary) 8%, var(--color-canvas, #fff));
+}
+
 .wre-scope-rail-label-active {
   box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent);
 }
@@ -784,10 +824,14 @@
  * — consumers pick whichever matches their payload shape.
  */
 .wre-rail-card {
+  --wre-rail-card-edge: var(--color-border-default);
+  --wre-rail-card-eyebrow: var(--color-text-tertiary);
   position: relative;
-  border-radius: var(--radius-card);
-  background: var(--color-surface);
-  border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
+  border-radius: var(--radius-lg);
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-border-subtle);
+  border-left: 3px solid var(--wre-rail-card-edge);
+  box-shadow: var(--shadow-soft);
   padding: 14px 16px 16px;
   overflow: hidden;
   transition: background-color var(--motion-fast) ease-out,
@@ -812,34 +856,23 @@
 }
 
 .wre-rail-card[data-tone="inReview"] {
-  --wre-rail-card-edge: var(--color-accent);
-  --wre-rail-card-eyebrow: var(--color-accent);
-  --wre-rail-card-progress-fill: var(--color-accent);
+  --wre-rail-card-edge: var(--color-semantic-warning);
+  --wre-rail-card-eyebrow: var(--color-semantic-warning);
 }
 
 .wre-rail-card[data-tone="blocked"] {
-  --wre-rail-card-edge: var(--color-danger);
-  --wre-rail-card-eyebrow: var(--color-danger);
-  --wre-rail-card-progress-fill: var(--color-danger);
-  background: color-mix(in srgb, var(--color-danger-soft) 75%, var(--color-surface));
+  --wre-rail-card-edge: var(--color-semantic-error);
+  --wre-rail-card-eyebrow: var(--color-semantic-error);
 }
 
 .wre-rail-card[data-tone="scheduled"] {
-  --wre-rail-card-edge: var(--color-tertiary);
-  --wre-rail-card-eyebrow: var(--color-tertiary);
-  --wre-rail-card-progress-fill: var(--color-tertiary);
+  --wre-rail-card-edge: var(--color-semantic-info);
+  --wre-rail-card-eyebrow: var(--color-semantic-info);
 }
 
 .wre-rail-card[data-tone="resolved"] {
-  --wre-rail-card-edge: var(--color-success);
-  --wre-rail-card-eyebrow: var(--color-success);
-  --wre-rail-card-progress-fill: var(--color-success);
-}
-
-.wre-rail-card[data-tone="neutral"] {
-  --wre-rail-card-edge: var(--color-border-strong);
-  --wre-rail-card-eyebrow: var(--color-tertiary);
-  --wre-rail-card-progress-fill: var(--color-secondary);
+  --wre-rail-card-edge: var(--color-semantic-success);
+  --wre-rail-card-eyebrow: var(--color-semantic-success);
 }
 
 .wre-rail-card__eyebrow {
@@ -1009,3 +1042,197 @@
   color: var(--color-primary);
   background: color-mix(in srgb, var(--color-accent-soft) 80%, var(--color-subtle));
 }
+
+/*
+ * Lane 6d — Slice U1 (L8 Phase E): active H/F band chrome.
+ *
+ * Idle bands sit at 0.6 opacity so the header/footer content is
+ * visible but doesn't compete with the body; hover bumps to 0.85; the
+ * active band goes to full opacity and gains a 3 px accent ribbon
+ * across its top edge plus a floating "Header — Section N" label in
+ * the top-left corner so reviewers always know which band they are
+ * editing when a section break changes the chrome.
+ *
+ * When any H/F story is active the chrome layer's root carries
+ * `data-story-active="header|footer"` and the body PM surface dims to
+ * 0.65 so the active band reads as the focal surface.
+ */
+.wre-page-band {
+  opacity: 0.6;
+  transition: opacity var(--motion-fast, 120ms) ease-out;
+  pointer-events: auto;
+}
+
+.wre-page-band:hover {
+  opacity: 0.85;
+}
+
+.wre-page-band[data-active="true"] {
+  opacity: 1;
+}
+
+.wre-page-band[data-active="true"]::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: var(--color-accent);
+  border-radius: 0 0 var(--radius-pill) var(--radius-pill);
+  pointer-events: none;
+}
+
+.wre-page-band__label {
+  position: absolute;
+  top: 6px;
+  left: 10px;
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--color-accent);
+  background: var(--color-surface);
+  padding: 2px 8px;
+  border-radius: var(--radius-pill);
+  box-shadow: var(--shadow-soft);
+  pointer-events: none;
+  z-index: 1;
+}
+
+[data-page-stack-chrome-layer][data-story-active="header"]
+  ~ [data-pm-body-slot],
+[data-page-stack-chrome-layer][data-story-active="footer"]
+  ~ [data-pm-body-slot] {
+  opacity: 0.65;
+  transition: opacity var(--motion-fast, 120ms) ease-out;
+}
+
+/*
+ * Lane 6d — Slice S2: print variant.
+ *
+ * At print time, collapse all editor chrome (toolbar, rails, overlays,
+ * page-break spacers, dock chrome) and let the browser paginate the
+ * paper cards one per physical sheet.  Intentionally no `@page` rule —
+ * the browser's print dialog owns paper size / margins so the host
+ * application doesn't need to fight it.
+ */
+@media print {
+  .wre-toolbar,
+  .wre-status-bar,
+  .wre-review-rail,
+  .wre-scope-rail-layer,
+  .wre-page-chrome-widget,
+  .wre-workspace-dock,
+  .wre-mode-dock,
+  [data-chrome-overlay],
+  [data-pin-surface] {
+    display: none !important;
+  }
+
+  [data-paper-frame] {
+    box-shadow: none !important;
+    border: none !important;
+    border-radius: 0 !important;
+    margin: 0 !important;
+    zoom: 1 !important;
+    page-break-after: always;
+  }
+
+  [data-paper-frame]:last-child {
+    page-break-after: auto;
+  }
+
+  .wre-page-surface {
+    color: #000;
+    background: #fff;
+  }
+}
+
+/*
+ * §6.23 — Scrollbar grammar (Lane 6c.S10)
+ * Thin track, thumb low-contrast until hover. Consistent across
+ * rail, long popovers, and the health panel.
+ * Scoped to the editor root class to avoid leaking into host chrome.
+ */
+.wre-editor ::-webkit-scrollbar,
+.wre-editor *::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.wre-editor ::-webkit-scrollbar-track,
+.wre-editor *::-webkit-scrollbar-track {
+  background: transparent;
+}
+.wre-editor ::-webkit-scrollbar-thumb,
+.wre-editor *::-webkit-scrollbar-thumb {
+  background: var(--color-border-default);
+  border-radius: 9999px;
+}
+.wre-editor ::-webkit-scrollbar-thumb:hover,
+.wre-editor *::-webkit-scrollbar-thumb:hover {
+  background: var(--color-border-strong);
+}
+.wre-editor,
+.wre-editor * {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border-default) transparent;
+}
+
+/*
+ * §6.9 — Table grip hit area + affordance (Lane 6c.U8 / Commit C18)
+ *
+ * Visual stripe is 2 px; hit area is extended to 8 px via ::before pseudo-
+ * element (3 px pad each side). On coarse-pointer devices the ::before extends
+ * to 44 px total for WCAG 2.5.5 touch-target compliance.
+ *
+ * State cascade:
+ *   default  → transparent background (invisible, pointer affordance only)
+ *   hover    → --color-border-default  (subtle stripe appears)
+ *   active   → --color-accent-primary  (vivid stripe during drag)
+ */
+.wre-table-grip-col {
+  position: absolute;
+  width: 2px;
+  background: transparent;
+  cursor: col-resize;
+  transition: background 75ms ease;
+}
+.wre-table-grip-col::before {
+  content: "";
+  position: absolute;
+  inset: 0 -3px;
+}
+.wre-table-grip-col:hover {
+  background: var(--color-border-default);
+}
+.wre-table-grip-col[data-active="true"] {
+  background: var(--color-accent-primary);
+}
+
+.wre-table-grip-row {
+  position: absolute;
+  height: 2px;
+  background: transparent;
+  cursor: row-resize;
+  transition: background 75ms ease;
+}
+.wre-table-grip-row::before {
+  content: "";
+  position: absolute;
+  inset: -3px 0;
+}
+.wre-table-grip-row:hover {
+  background: var(--color-border-default);
+}
+.wre-table-grip-row[data-active="true"] {
+  background: var(--color-accent-primary);
+}
+
+@media (pointer: coarse) {
+  .wre-table-grip-col::before {
+    inset: 0 -21px; /* 44 px total touch hit area */
+  }
+  .wre-table-grip-row::before {
+    inset: -21px 0; /* 44 px total touch hit area */
+  }
+}

package/src/ui-tailwind/toolbar/tw-role-action-region.tsx

@@ -52,7 +52,20 @@ import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-edi
 import { ROLE_ACTION_SETS } from "../chrome/role-action-sets";
 import { TwScopePostureMenu } from "./tw-scope-posture-menu";
 
-export type MarkupDisplayMode = "clean" | "simple" | "all";
+/**
+ * Toolbar-local alias for the markup-display union.  L6d.N2 widens
+ * this to match the `MarkupDisplay` surface in
+ * `comment-decoration-model.ts`, which now accepts Word's 4-mode
+ * grammar plus the legacy triple.
+ */
+export type MarkupDisplayMode =
+  | "all-markup"
+  | "simple-markup"
+  | "no-markup"
+  | "original"
+  | "clean"
+  | "simple"
+  | "all";
 
 export interface WorkflowWorkItemSnapshot {
   workItemId: string;