@beyondwork/docx-react-component 1.0.93 → 1.0.95

package/src/ui-tailwind/chrome-overlay/tw-scope-rail-layer.tsx

@@ -17,6 +17,7 @@ import {
   projectRectToOverlay,
   type OverlayCoordinateSpace,
 } from "./chrome-overlay-projector";
+import { useUiApi } from "../ui-api-context";
 import type { RenderFrame, RenderFrameRect } from "../../api/public-types.ts";
 import type { ScopeRailSegment, ScopeRailPosture } from "../../api/public-types.ts";
 import type { WorkflowFacet } from "../../api/public-types.ts";
@@ -30,22 +31,29 @@ export interface TwScopeRailLayerProps {
   /**
    * Geometry facet — used for `getRenderFrame()`. Migrated from
    * `facet: WordReviewEditorLayoutFacet` in refactor/05 cross-lane-coord
-   * §8.4 pass. Rail-segment + scope-card data flows through
-   * `workflowFacet` per Layer-06 Slice 4's seam inversion.
+   * §8.4 pass. Mounted rail/card data flows through `api.ui.scope.*`.
    */
   geometryFacet: GeometryFacet;
   /**
-   * Workflow facet — canonical source of scope rail segments + scope
-   * card models (`runtime.workflow.*`). Required for the layer to
-   * render anything; passing `null` makes the layer a no-op.
+   * Workflow facet — no-provider fallback for scope rail/card reads.
+   * Mounted editor paths prefer `api.ui.scope.*`; passing `null` makes
+   * fallback reads no-op.
    */
   workflowFacet: WorkflowFacet | null;
+  /**
+   * Optional pre-read rail snapshot from `ui.scope.rail()`. When omitted,
+   * the layer reads the mounted UI API itself, then falls back to the
+   * workflow facet for no-provider paths.
+   */
+  scopeRailSegments?: readonly ScopeRailSegment[];
   /** Overlay's coordinate space.  Defaults to the overlay's own origin. */
   space?: OverlayCoordinateSpace;
   /** Horizontal pad (px) the rail gutter occupies to the left of body. */
   railLaneWidthPx?: number;
   /** Scope id that should render with the `active` emphasis. */
   activeScopeId?: string | null;
+  /** Posture filters shared with the Workflow rail. Omitted means all scopes render. */
+  visibleScopePostures?: ReadonlySet<ScopeRailPosture>;
   /**
    * Fires when the user clicks the rail stripe — opens the scope card.
    * P0 wires this directly; P1 replaces with card-layer-aware routing.
@@ -87,22 +95,32 @@ const POSTURE_STYLES: Record<ScopeRailPosture, PostureStyle> = {
 // ---------------------------------------------------------------------------
 
 const DEFAULT_RAIL_LANE_PX = 44;
-const STRIPE_WIDTH_PX = 4;
-const LABEL_WIDTH_PX = 40;
+const STRIPE_WIDTH_PX = 6;
+const LABEL_WIDTH_PX = 58;
 const STACK_OFFSET_PX = 6;
 
 export const TwScopeRailLayer: React.FC<TwScopeRailLayerProps> = ({
   geometryFacet,
   workflowFacet,
+  scopeRailSegments,
   space,
   railLaneWidthPx = DEFAULT_RAIL_LANE_PX,
   activeScopeId,
+  visibleScopePostures,
   onStripeClick,
   onSegmentClick,
   "data-testid": testId,
 }) => {
+  const ui = useUiApi();
   const frame = geometryFacet.getRenderFrame() ?? null;
-  const segments = workflowFacet?.getAllRailSegments() ?? [];
+  const railSegments =
+    scopeRailSegments ??
+    ui?.scope.rail().segments ??
+    workflowFacet?.getAllRailSegments() ??
+    [];
+  const segments = railSegments.filter((segment) =>
+    visibleScopePostures ? visibleScopePostures.has(segment.posture) : true,
+  );
 
   if (!frame || segments.length === 0) {
     return null;
@@ -110,15 +128,23 @@ export const TwScopeRailLayer: React.FC<TwScopeRailLayerProps> = ({
 
   // P2: which scopes currently have a `source: "ai"` candidate
   // overlapping — drives the agent-pending shimmer class on their
-  // tints. Reads from the workflow facet's card-model projection so the
-  // shimmer logic lives in the Layer-06 runtime, not the overlay.
-  const cardModels = workflowFacet?.getAllScopeCardModels() ?? [];
+  // tints. Mounted surfaces read card projections through ui.scope.card;
+  // no-provider paths fall back to the workflow facet.
+  const cardModels = ui ? [] : workflowFacet?.getAllScopeCardModels() ?? [];
   const agentPendingByScope = new Map<string, boolean>();
   for (const model of cardModels) {
     if (model.agentPending) {
       agentPendingByScope.set(model.scopeId, true);
     }
   }
+  if (ui) {
+    for (const segment of segments) {
+      const model = ui.scope.card(segment.scopeId);
+      if (model?.agentPending) {
+        agentPendingByScope.set(segment.scopeId, true);
+      }
+    }
+  }
 
   // P3c: stack offsets for overlapping scopes.  Two scopes whose
   // offset ranges intersect on the same page render as stacked
@@ -223,16 +249,21 @@ export const TwScopeRailLayer: React.FC<TwScopeRailLayerProps> = ({
               style={projectRectToOverlay(stripeRect, projectorSpace)}
             />
             {/* Label pill — revealed on stripe hover via CSS. */}
-            <div
-              className={`wre-scope-rail-label wre-scope-rail-label-${style.railToken}`}
+            <button
+              type="button"
+              tabIndex={-1}
+              className={`wre-scope-rail-label wre-scope-rail-label-${style.railToken} ${
+                isActive ? "wre-scope-rail-label-active" : ""
+              }`}
               data-scope-id={segment.scopeId}
               data-posture={segment.posture}
-              aria-hidden="true"
+              aria-label={`${style.labelText}${segment.label ? `: ${segment.label}` : ""}`}
+              onClick={handleActivate}
               style={projectRectToOverlay(labelRect, projectorSpace)}
             >
               <span aria-hidden="true" className={`wre-scope-rail-icon wre-scope-rail-icon-${style.icon}`} />
               <span className="wre-scope-rail-label-text">{style.labelText}</span>
-            </div>
+            </button>
           </React.Fragment>
         );
       })}

package/src/ui-tailwind/editor-surface/pm-state-from-snapshot.ts

@@ -402,13 +402,7 @@ function buildParagraph(
       indentRight: paragraphLayout.indentation?.right ?? null,
       indentFirstLine: paragraphLayout.indentation?.firstLine ?? null,
       indentHanging: paragraphLayout.indentation?.hanging ?? null,
-      numberingMarkerWidth:
-        paragraphLayout.markerLane?.width ??
-        paragraphLayout.indentation?.hanging ??
-        (paragraphLayout.indentation?.firstLine !== undefined &&
-        paragraphLayout.indentation.firstLine < 0
-          ? Math.abs(paragraphLayout.indentation.firstLine)
-          : null),
+      numberingMarkerWidth: paragraphLayout.markerLane?.width ?? null,
       numberingMarkerStart: paragraphLayout.markerLane?.start ?? null,
       numberingMarkerJustification: paragraphLayout.markerJustification ?? null,
       numberingMarkerRunProperties: block.resolvedNumbering?.markerRunProperties ?? null,

package/src/ui-tailwind/review-workspace/use-scope-card-state.ts

@@ -9,13 +9,13 @@ import {
   cycleScopeIndex,
   shouldHandleScopeNavKey,
 } from "../chrome-overlay/scope-keyboard-cycle";
+import { useUiApi } from "../ui-api-context.tsx";
 
 export interface UseScopeCardStateOptions {
   layoutFacet?: import("../../runtime/layout/index.ts").WordReviewEditorLayoutFacet;
   /**
-   * Layer-06 workflow facet — canonical source of scope card models.
-   * Required by the keyboard-nav loop + Ask-agent handler after Slice 4
-   * rail-seam inversion removed those methods from `layoutFacet`.
+   * Layer-06 workflow facet — no-provider fallback for scope card models.
+   * Mounted paths prefer `api.ui.scope.rail/card`.
    */
   workflowFacet?: import("../../runtime/workflow/rail/types.ts").WorkflowFacet;
   onScopeModeChangeRequested?: (payload: {
@@ -79,6 +79,31 @@ export function useScopeCardState(options: UseScopeCardStateOptions): ScopeCardS
   void layoutFacet;
 
   const [activeScopeId, setActiveScopeId] = useState<string | null>(null);
+  const ui = useUiApi();
+
+  const readScopeIds = useCallback((): string[] => {
+    if (ui) {
+      const ids: string[] = [];
+      const seen = new Set<string>();
+      for (const segment of ui.scope.rail().segments) {
+        if (seen.has(segment.scopeId)) continue;
+        seen.add(segment.scopeId);
+        ids.push(segment.scopeId);
+      }
+      return ids;
+    }
+    return workflowFacet?.getAllScopeCardModels().map((model) => model.scopeId) ?? [];
+  }, [ui, workflowFacet]);
+
+  const readScopeCard = useCallback(
+    (scopeId: string) => {
+      if (ui) return ui.scope.card(scopeId);
+      return workflowFacet
+        ?.getAllScopeCardModels()
+        .find((m) => m.scopeId === scopeId) ?? null;
+    },
+    [ui, workflowFacet],
+  );
 
   const handleScopeStripeClick = useCallback(
     (segment: { scopeId: string }) => {
@@ -94,14 +119,13 @@ export function useScopeCardState(options: UseScopeCardStateOptions): ScopeCardS
   }, []);
 
   useEffect(() => {
-    if (!workflowFacet) {
+    if (!ui && !workflowFacet) {
       return undefined;
     }
     const onKey = (event: KeyboardEvent) => {
       if (!shouldHandleScopeNavKey(event)) return;
-      const models = workflowFacet.getAllScopeCardModels();
-      if (models.length === 0) return;
-      const ids = models.map((model) => model.scopeId);
+      const ids = readScopeIds();
+      if (ids.length === 0) return;
       const key = event.key.toLowerCase();
       if (key === "enter") {
         if (!activeScopeId) {
@@ -117,7 +141,7 @@ export function useScopeCardState(options: UseScopeCardStateOptions): ScopeCardS
     };
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
-  }, [workflowFacet, activeScopeId]);
+  }, [ui, workflowFacet, activeScopeId, readScopeIds]);
 
   const handleScopeCardModeChange = useCallback(
     (scopeId: string, mode: WorkflowScopeMode) => {
@@ -149,12 +173,10 @@ export function useScopeCardState(options: UseScopeCardStateOptions): ScopeCardS
 
   const handleScopeCardAskAgent = useCallback(
     (scopeId: string) => {
-      const cardModel = workflowFacet
-        ?.getAllScopeCardModels()
-        .find((m) => m.scopeId === scopeId);
+      const cardModel = readScopeCard(scopeId);
       onScopeAskAgent?.({ scopeId, anchor: cardModel?.anchor });
     },
-    [onScopeAskAgent, workflowFacet],
+    [onScopeAskAgent, readScopeCard],
   );
 
   return {

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

@@ -13,8 +13,8 @@
  * traversal + claim/skip/complete.
  */
 
-import React, { useState } from "react";
-import * as Popover from "@radix-ui/react-popover";
+import React, { useLayoutEffect, useRef, useState, type CSSProperties } from "react";
+import { createPortal } from "react-dom";
 import * as Toggle from "@radix-ui/react-toggle";
 import * as Tooltip from "@radix-ui/react-tooltip";
 import {
@@ -433,38 +433,100 @@ function RoleActionOverflow({
   props,
 }: RoleActionOverflowProps): React.JSX.Element {
   const [open, setOpen] = useState(false);
+  const triggerRef = useRef<HTMLButtonElement>(null);
 
   return (
-    <Popover.Root open={open} onOpenChange={setOpen}>
-      <Popover.Trigger asChild>
+    <>
         <button
+          ref={triggerRef}
           type="button"
           aria-label="More role actions"
           aria-expanded={open}
+          aria-haspopup="menu"
           onMouseDown={preserveEditorSelectionMouseDown}
+          onClick={(event) => {
+            event.preventDefault();
+            setOpen((value) => !value);
+          }}
           title="More role actions"
-          className="inline-flex h-6 w-6 items-center justify-center rounded-md border border-border bg-canvas text-primary transition-colors hover:bg-surface outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas"
+          className={`inline-flex h-6 w-6 items-center justify-center rounded-md border border-border bg-canvas text-primary transition-colors hover:bg-surface outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas ${
+            open ? "text-accent ring-1 ring-accent/30 shadow-sm" : ""
+          }`}
           data-testid="role-action-overflow-trigger"
         >
           <MoreHorizontal className="h-3.5 w-3.5 text-tertiary" aria-hidden="true" />
         </button>
-      </Popover.Trigger>
-      <Popover.Portal>
-        <Popover.Content
-          className="z-50 w-[220px] rounded-lg bg-canvas p-1 shadow-lg ring-1 ring-border"
-          sideOffset={8}
-          align="start"
-          data-testid="role-action-overflow-content"
-        >
+      <RoleActionPortalMenu anchorRef={triggerRef} open={open}>
           {ids.map((id) => (
             <OverflowAction key={id} id={id} props={props} onClose={() => setOpen(false)} />
           ))}
-        </Popover.Content>
-      </Popover.Portal>
-    </Popover.Root>
+      </RoleActionPortalMenu>
+    </>
+  );
+}
+
+function RoleActionPortalMenu(props: {
+  anchorRef: React.RefObject<HTMLButtonElement | null>;
+  children: React.ReactNode;
+  open: boolean;
+}): React.ReactPortal | null {
+  const style = useRoleActionPortalPosition(props.anchorRef, props.open);
+  const body = props.anchorRef.current?.ownerDocument?.body;
+  if (!props.open || !body) return null;
+  return createPortal(
+    <div
+      className="z-50 w-[220px] rounded-lg bg-canvas p-1 shadow-lg ring-1 ring-border"
+      data-testid="role-action-overflow-content"
+      style={style}
+    >
+      {props.children}
+    </div>,
+    body,
   );
 }
 
+function useRoleActionPortalPosition(
+  anchorRef: React.RefObject<HTMLButtonElement | null>,
+  open: boolean,
+): CSSProperties {
+  const [style, setStyle] = useState<CSSProperties>({
+    left: 8,
+    position: "fixed",
+    top: 8,
+    zIndex: 50,
+  });
+
+  useLayoutEffect(() => {
+    if (!open) return;
+    const anchor = anchorRef.current;
+    const ownerWindow = anchor?.ownerDocument?.defaultView;
+    if (!anchor || !ownerWindow) return;
+    const update = () => {
+      const rect = anchor.getBoundingClientRect();
+      const width = 220;
+      const left = Math.min(
+        Math.max(8, rect.left),
+        Math.max(8, (ownerWindow.innerWidth || width + 16) - width - 8),
+      );
+      setStyle({
+        left,
+        position: "fixed",
+        top: Math.max(8, rect.bottom + 8),
+        zIndex: 50,
+      });
+    };
+    update();
+    ownerWindow.addEventListener("resize", update);
+    ownerWindow.addEventListener("scroll", update, true);
+    return () => {
+      ownerWindow.removeEventListener("resize", update);
+      ownerWindow.removeEventListener("scroll", update, true);
+    };
+  }, [anchorRef, open]);
+
+  return style;
+}
+
 function OverflowAction(arg: {
   id: ToolbarChromeItemId;
   props: TwRoleActionRegionProps;

package/src/ui-tailwind/toolbar/tw-toolbar-icon-button.tsx

@@ -27,6 +27,8 @@ export interface TwToolbarIconButtonProps {
    * vs. Windows however they like.
    */
   shortcut?: string;
+  /** Explanation surfaced when the button is disabled by selection/mode state. */
+  disabledReason?: string;
   onClick?: () => void;
 }
 
@@ -42,7 +44,9 @@ export function TwToolbarIconButton(props: TwToolbarIconButtonProps) {
           aria-label={props.label}
           aria-pressed={props.active ?? undefined}
           data-active={props.active ? "true" : undefined}
+          data-disabled-reason={props.disabled && props.disabledReason ? props.disabledReason : undefined}
           disabled={props.disabled}
+          title={props.disabled && props.disabledReason ? `Not available: ${props.disabledReason}` : undefined}
           onMouseDown={preserveEditorSelectionMouseDown}
           onClick={props.onClick}
           className={[