@beyondwork/docx-react-component 1.0.66 → 1.0.69

package/src/ui-tailwind/ui-api-context.tsx

@@ -0,0 +1,43 @@
+/**
+ * UiApiContext — React context that exposes a bound `ApiV3Ui` to chrome
+ * surfaces during render.
+ *
+ * The UI API (layer 10) is the architectural seam between runtime truth
+ * and chrome presentation (architecture 10 §U5 + designsystem §8.3). This
+ * context is how presentation surfaces see the seam at render time.
+ *
+ * Mounted editor path (refactor/11 Slice 4 target):
+ *   <UiApiProvider value={api.ui}>
+ *     <TwReviewWorkspace ... />
+ *   </UiApiProvider>
+ *
+ * When the provider is mounted, chrome hooks (e.g. `useWorkspaceComposition`)
+ * call through `api.ui.chrome.getComposition(input)` — the UI API owns the
+ * composition decision at a single site.
+ *
+ * Headless / test / pre-mount paths receive `null`; consumer hooks fall
+ * back to the pure function (e.g. `resolveChromeComposition(input)`) and
+ * produce the same output. Wrapping a mounted provider is a latency-
+ * free structural choice, not a behavioral one.
+ *
+ * U2 (UI API is bound to a controller, not React internals) — this
+ * context is a presentation-layer convenience, not part of the UI API
+ * surface itself. Non-React consumers (Playwright drivers, the debug
+ * service) construct their `ApiV3Ui` independently.
+ */
+
+import { createContext, useContext } from "react";
+
+import type { ApiV3Ui } from "../api/v3/ui";
+
+const UiApiContext = createContext<ApiV3Ui | null>(null);
+
+export const UiApiProvider = UiApiContext.Provider;
+
+/**
+ * Read the mounted UI API. Returns `null` when no provider is mounted —
+ * consumers fall back to pure functions (e.g. `resolveChromeComposition`).
+ */
+export function useUiApi(): ApiV3Ui | null {
+  return useContext(UiApiContext);
+}

package/src/ui-tailwind/ui-shell-channels-context.tsx

@@ -0,0 +1,49 @@
+/**
+ * React context exposing the shell-owned UI subscriber channels to
+ * deep consumers (primarily `tw-review-workspace.tsx`, which holds the
+ * state sources that drive emission — `renderFrameRevision`, scroll,
+ * zoom, posture slices).
+ *
+ * The channels themselves live in `WordReviewEditor.tsx` via stable
+ * `useRef` boxes; the factory at `src/ui/ui-controller-factory.ts`
+ * closes over them for the subscribe side. This context is the
+ * counterpart for the emit side — any deep React consumer can call
+ * `useUiShellChannels()?.chrome.emit(posture)` without prop-drilling
+ * the emitter identities down the tree.
+ *
+ * When no provider is mounted (headless tests, non-mounted hosts),
+ * `useUiShellChannels()` returns `null` and emission is a no-op.
+ *
+ * This is strictly a shell-local seam — the UI API layer at
+ * `src/api/v3/ui/**` knows nothing about it. Per contract U2 the UI
+ * API is bound via a `UiController`; the channel emission path is
+ * how the shell feeds events INTO its controller, not a runtime-
+ * visible contract.
+ */
+
+import { createContext, useContext } from "react";
+
+import type {
+  ChromePosture,
+  OverlayAnchorQuery,
+  ViewportState,
+} from "../api/v3/ui/_types.ts";
+import type { UiSubscriberChannel } from "../shell/ui-subscriber-channels.ts";
+
+export interface UiShellChannels {
+  readonly chrome: UiSubscriberChannel<ChromePosture>;
+  readonly viewport: UiSubscriberChannel<ViewportState>;
+  readonly overlays: UiSubscriberChannel<OverlayAnchorQuery>;
+}
+
+const UiShellChannelsContext = createContext<UiShellChannels | null>(null);
+
+export const UiShellChannelsProvider = UiShellChannelsContext.Provider;
+
+/**
+ * Read the mounted shell's emitter channels. Returns `null` when no
+ * provider is mounted — consumers should treat null as "no-op emit".
+ */
+export function useUiShellChannels(): UiShellChannels | null {
+  return useContext(UiShellChannelsContext);
+}

package/src/validation/compatibility-engine.ts

@@ -1,4 +1,4 @@
-import { createRangeAnchor } from "../core/selection/mapping.ts";
+import { createPublicRangeAnchor } from "../core/selection/anchor-conversion.ts";
 import type {
   CanonicalDocumentEnvelope,
   CompatibilityFeatureEntry,
@@ -89,7 +89,7 @@ function collectReviewFeatures(
       featureClass: "preserve-only",
       message:
         "Cross-paragraph comment anchors remain visible but detached to preserve package truth and export safety.",
-      affectedAnchor: createRangeAnchor(
+      affectedAnchor: createPublicRangeAnchor(
         multiParagraphComment.anchor.lastKnownRange.from,
         multiParagraphComment.anchor.lastKnownRange.to,
       ),
@@ -483,7 +483,7 @@ function collectPreservationFeatures(
       featureKey: descriptor.featureKey,
       featureClass: "preserve-only",
       message: descriptor.label,
-      affectedAnchor: createRangeAnchor(
+      affectedAnchor: createPublicRangeAnchor(
         fragment.lastKnownRange.from,
         fragment.lastKnownRange.to,
       ),
@@ -848,11 +848,11 @@ function toRevisionAffectedAnchor(
 ) {
   switch (revision.anchor.kind) {
     case "range":
-      return createRangeAnchor(revision.anchor.range.from, revision.anchor.range.to);
+      return createPublicRangeAnchor(revision.anchor.range.from, revision.anchor.range.to);
     case "node":
-      return createRangeAnchor(revision.anchor.at, revision.anchor.at + 1);
+      return createPublicRangeAnchor(revision.anchor.at, revision.anchor.at + 1);
     case "detached":
-      return createRangeAnchor(
+      return createPublicRangeAnchor(
         revision.anchor.lastKnownRange.from,
         revision.anchor.lastKnownRange.to,
       );

package/src/runtime/styles-cascade.ts

@@ -1,33 +0,0 @@
-/**
- * Central entry point for OOXML style cascade resolution.
- *
- * Re-exports the paragraph, character, run, numbering-marker, and table style
- * resolvers from their individual modules so downstream consumers (Lane 3a
- * measurement, Lane 1 style picker, agent tooling) can import from a single,
- * stable location.
- *
- * Adding a new resolver? Add it to its feature module (paragraph, table, etc.)
- * and re-export from here. Do not define new cascade logic in this file.
- */
-
-export {
-  resolveParagraphStyleChain,
-  resolveCharacterStyleChain,
-  resolveEffectiveParagraphFormatting,
-  resolveEffectiveRunFormatting,
-  resolveNumberingMarkerRunFormatting,
-  resolveTableCellTextFormatting,
-  resolveRunFontFamily,
-  getNextStyleId,
-  type ParagraphResolveInput,
-  type RunResolveInput,
-  type MarkerResolveInput,
-} from "./paragraph-style-resolver.ts";
-
-export {
-  resolveTableStyleResolution,
-  type ResolvedTableCellStyle,
-  type ResolvedTableRowStyle,
-  type ResolvedTableLevelProperties,
-  type ResolvedTableStyleResolution,
-} from "./table-style-resolver.ts";

package/src/ui-tailwind/chrome/tw-mode-dock.tsx

@@ -1,85 +0,0 @@
-import React, { type ReactNode } from "react";
-
-import { FOCUS_RING_CLASSES } from "../theme/tokens";
-
-export interface TwModeDockAction {
-  id: string;
-  label: string;
-  icon: ReactNode;
-  onClick: () => void;
-  isActive?: boolean;
-}
-
-export interface TwModeDockProps {
-  label: string;
-  icon?: ReactNode;
-  actions?: readonly TwModeDockAction[];
-  className?: string;
-}
-
-// TwModeDock is a deprecated harness-only surface per designsystem §6.26,
-// but its focus ring still participates in the canonical §4.7 contract —
-// import the shared token constant so a future ring update cascades here.
-const focusRingClass = FOCUS_RING_CLASSES;
-
-export function TwModeDock(props: TwModeDockProps) {
-  const actions = (props.actions ?? []).slice(0, 3);
-
-  const className = [
-    "pointer-events-auto fixed bottom-4 left-1/2 z-40 -translate-x-1/2",
-    "flex h-9 items-center gap-2 rounded-[var(--radius-pill)] border border-border bg-canvas px-2 py-1",
-    "shadow-[var(--shadow-float)] backdrop-blur-sm",
-    "transition-opacity duration-[var(--motion-fast)]",
-    props.className,
-  ]
-    .filter(Boolean)
-    .join(" ");
-
-  return (
-    <div
-      role="toolbar"
-      aria-label="Mode dock"
-      className={className}
-      data-testid="tw-mode-dock"
-      data-chrome-overlay="mode-dock"
-    >
-      <div className="flex items-center gap-1.5 pl-1 pr-1.5">
-        {props.icon ? (
-          <span aria-hidden="true" className="flex h-3.5 w-3.5 items-center text-tertiary">
-            {props.icon}
-          </span>
-        ) : null}
-        <span
-          className="text-[10px] font-semibold uppercase tracking-[0.14em] text-secondary"
-          data-testid="tw-mode-dock__label"
-        >
-          {props.label}
-        </span>
-      </div>
-      {actions.length > 0 ? (
-        <div className="flex items-center gap-0.5 border-l border-border/70 pl-1.5">
-          {actions.map((action) => (
-            <button
-              key={action.id}
-              type="button"
-              onClick={action.onClick}
-              aria-label={action.label}
-              aria-pressed={action.isActive ?? false}
-              title={action.label}
-              className={[
-                "inline-flex h-7 w-7 items-center justify-center rounded-[var(--radius-control)] transition-colors",
-                action.isActive
-                  ? "bg-accent-soft text-accent"
-                  : "text-tertiary hover:bg-surface-hover hover:text-primary",
-                focusRingClass,
-              ].join(" ")}
-              data-testid={`tw-mode-dock__action-${action.id}`}
-            >
-              <span aria-hidden="true">{action.icon}</span>
-            </button>
-          ))}
-        </div>
-      ) : null}
-    </div>
-  );
-}