@beyondwork/docx-react-component 1.0.41 → 1.0.43

package/src/ui-tailwind/index.ts

@@ -11,7 +11,11 @@ export { renderTwCaret } from "./editor-surface/tw-caret";
 
 // Review rail
 export { TwReviewRail, type TwReviewRailProps, type ReviewRailTab } from "./review/tw-review-rail";
-export { TwCommentSidebar } from "./review/tw-comment-sidebar";
+export { TwCommentSidebar, type TwCommentSidebarProps } from "./review/tw-comment-sidebar";
+export {
+  CommentMarkdownRenderer,
+  type CommentMarkdownRendererProps,
+} from "./review/comment-markdown-renderer";
 export { TwRevisionSidebar } from "./review/tw-revision-sidebar";
 export { TwHealthPanel } from "./review/tw-health-panel";
 export { TwWorkflowTab, type TwWorkflowTabProps } from "./review/tw-workflow-tab";
@@ -53,6 +57,38 @@ export {
   type TwModeDockProps,
 } from "./chrome/tw-mode-dock";
 
+// Collab chrome (P9) — mount when chromePreset === "collab"; each
+// component is pure presentational and takes snapshots + callbacks.
+export {
+  CollabPresenceStrip,
+  type CollabPresenceStripProps,
+} from "./chrome/collab-presence-strip";
+export {
+  CollabRoleChip,
+  type CollabRoleChipProps,
+} from "./chrome/collab-role-chip";
+export {
+  CollabAudienceChip,
+  type CollabAudienceChipProps,
+} from "./chrome/collab-audience-chip";
+export {
+  CollabTamperBanner,
+  type CollabTamperBannerProps,
+} from "./chrome/collab-tamper-banner";
+export {
+  CollabNegotiationActionBar,
+  type CollabNegotiationActionBarProps,
+} from "./chrome/collab-negotiation-action-bar";
+export {
+  CollabSendToSupplierButton,
+  type CollabSendToSupplierButtonProps,
+} from "./chrome/collab-send-to-supplier-button";
+export {
+  CollabSendToSupplierModal,
+  type CollabSendToSupplierModalProps,
+  type CollabSendToSupplierSubmitArgs,
+} from "./chrome/collab-send-to-supplier-modal";
+
 // Chrome overlay plane (R3a — scope rail layer)
 export {
   TwChromeOverlay,

package/src/ui-tailwind/page-stack/tw-endnote-area.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+
+import type { SurfaceBlockSnapshot } from "../../api/public-types.ts";
+import { TwRegionBlockRenderer } from "./tw-region-block-renderer.tsx";
+
+// ---------------------------------------------------------------------------
+// TwEndnoteArea (P8.7)
+//
+// Read-only area for document-end endnote placement.  Unlike footnotes, which
+// the chrome layer positions per-page via an absolute rectangle, endnotes in
+// the default mode sit at the end of the document (Word's `w:pos="docEnd"`
+// behavior).  This component is mounted as a sibling of the chrome layer
+// after the last page rect — not as an absolutely positioned chrome overlay.
+//
+// It renders:
+//   1. A default 1px separator (1/3 of the parent width) along the top edge,
+//      and
+//   2. The ordered endnote bodies via `TwRegionBlockRenderer` (P8.4).
+//
+// When `blocks` is empty the component returns `null` so the document-end
+// slot stays visually absent.
+//
+// Per-section endnote placement (`w:endnotePr/w:pos` other than `docEnd`)
+// is a follow-up — tracked with the P8.b polish pass.
+// ---------------------------------------------------------------------------
+
+export interface TwEndnoteAreaProps {
+  blocks: readonly SurfaceBlockSnapshot[];
+  "data-testid"?: string;
+}
+
+export const TwEndnoteArea: React.FC<TwEndnoteAreaProps> = ({
+  blocks,
+  "data-testid": testId,
+}) => {
+  if (blocks.length === 0) return null;
+  return (
+    <div
+      data-endnote-area
+      data-testid={testId}
+      style={{ marginTop: "24pt" }}
+    >
+      <div
+        data-endnote-separator
+        style={{
+          width: "33%",
+          height: "1px",
+          backgroundColor: "currentColor",
+          marginBottom: "8pt",
+        }}
+      />
+      <TwRegionBlockRenderer blocks={blocks} />
+    </div>
+  );
+};
+
+export default TwEndnoteArea;

package/src/ui-tailwind/page-stack/tw-footnote-area.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+
+import type { SurfaceBlockSnapshot } from "../../api/public-types.ts";
+import { TwRegionBlockRenderer } from "./tw-region-block-renderer.tsx";
+
+// ---------------------------------------------------------------------------
+// TwFootnoteArea (P8.6)
+//
+// Read-only area mounted at an absolute pixel rectangle inside a per-page
+// chrome overlay.  Renders:
+//   1. A default 1px separator (1/3 of the parent width) along the top edge,
+//      and
+//   2. The ordered footnote bodies via `TwRegionBlockRenderer` (P8.4).
+//
+// The chrome layer (P8.8) computes the `topPx / leftPx / widthPx / heightPx`
+// rectangle from the page graph's `regions.footnotes` geometry and mounts
+// this component above the footer band.
+//
+// The default separator matches Word's implicit footnote separator; reading
+// the `w:separator` / `w:continuationSeparator` parts from the footnotes
+// package is deferred to P8.b polish.  No active-slot / portal plumbing in
+// this pass — the P8 plan only reserves portal slots for header / footer.
+// ---------------------------------------------------------------------------
+
+export interface TwFootnoteAreaProps {
+  pageIndex: number;
+  blocks: readonly SurfaceBlockSnapshot[];
+  topPx: number;
+  leftPx: number;
+  widthPx: number;
+  heightPx: number;
+  "data-testid"?: string;
+}
+
+export const TwFootnoteArea: React.FC<TwFootnoteAreaProps> = ({
+  pageIndex,
+  blocks,
+  topPx,
+  leftPx,
+  widthPx,
+  heightPx,
+  "data-testid": testId,
+}) => {
+  return (
+    <div
+      data-footnote-area
+      data-page-index={pageIndex}
+      data-testid={testId}
+      style={{
+        position: "absolute",
+        top: `${topPx}px`,
+        left: `${leftPx}px`,
+        width: `${widthPx}px`,
+        height: `${heightPx}px`,
+      }}
+    >
+      <div
+        data-footnote-separator
+        style={{
+          width: `${Math.round(widthPx / 3)}px`,
+          height: "1px",
+          backgroundColor: "currentColor",
+          marginBottom: "4pt",
+        }}
+      />
+      <TwRegionBlockRenderer blocks={blocks} />
+    </div>
+  );
+};
+
+export default TwFootnoteArea;

package/src/ui-tailwind/page-stack/tw-page-footer-band.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+
+import type { SurfaceBlockSnapshot } from "../../api/public-types.ts";
+import { TwRegionBlockRenderer } from "./tw-region-block-renderer.tsx";
+
+// ---------------------------------------------------------------------------
+// TwPageFooterBand (P8.5)
+//
+// Symmetric counterpart to `TwPageHeaderBand` (see its header for design
+// context).  The footer band positions itself via `bottom` rather than
+// `top` so the chrome layer can measure the footer margin up from the
+// page rect's bottom edge and keep footer content pinned correctly when
+// page size / margin changes.
+//
+// When `isActiveSlot` is true, the band emits a single `data-pm-portal-slot`
+// div tagged `data-page-band-slot="footer"` — the chrome layer portals the
+// PM surface into this target in P8.10.  Otherwise it renders the footer
+// story's `SurfaceBlockSnapshot[]` through `TwRegionBlockRenderer` (P8.4).
+// ---------------------------------------------------------------------------
+
+export interface TwPageFooterBandProps {
+  pageIndex: number;
+  blocks: readonly SurfaceBlockSnapshot[];
+  bandHeightPx: number;
+  bottomPx: number;
+  leftPx: number;
+  widthPx: number;
+  /** True when this band is the active-story slot. Renders portal target instead of read-only DOM. */
+  isActiveSlot: boolean;
+  onClick: () => void;
+  "data-testid"?: string;
+}
+
+export const TwPageFooterBand: React.FC<TwPageFooterBandProps> = ({
+  pageIndex,
+  blocks,
+  bandHeightPx,
+  bottomPx,
+  leftPx,
+  widthPx,
+  isActiveSlot,
+  onClick,
+  "data-testid": testId,
+}) => {
+  return (
+    <div
+      data-page-band="footer"
+      data-page-index={pageIndex}
+      data-testid={testId}
+      onClick={onClick}
+      style={{
+        position: "absolute",
+        bottom: `${bottomPx}px`,
+        left: `${leftPx}px`,
+        width: `${widthPx}px`,
+        height: `${bandHeightPx}px`,
+        cursor: "pointer",
+      }}
+    >
+      {isActiveSlot ? (
+        <div
+          data-pm-portal-slot
+          data-page-band-slot="footer"
+          style={{ width: "100%", height: "100%" }}
+        />
+      ) : (
+        <TwRegionBlockRenderer blocks={blocks} />
+      )}
+    </div>
+  );
+};
+
+export default TwPageFooterBand;

package/src/ui-tailwind/page-stack/tw-page-header-band.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+
+import type { SurfaceBlockSnapshot } from "../../api/public-types.ts";
+import { TwRegionBlockRenderer } from "./tw-region-block-renderer.tsx";
+
+// ---------------------------------------------------------------------------
+// TwPageHeaderBand (P8.5)
+//
+// Read-only band mounted at an absolute pixel position inside a per-page
+// chrome overlay.  The band either:
+//   - Renders the header story's `SurfaceBlockSnapshot[]` through
+//     `TwRegionBlockRenderer` (P8.4) as pure presentational DOM, or
+//   - Emits a single `data-pm-portal-slot` div when the chrome layer has
+//     promoted this band to the active story slot (P8.10 wires the PM
+//     surface into this target via React portal).
+//
+// Clicks on the band bubble to the chrome layer's `openStory` dispatch
+// (wired in P8.8 / P8.10) so legal reviewers can promote a header into
+// the active editing surface.
+// ---------------------------------------------------------------------------
+
+export interface TwPageHeaderBandProps {
+  pageIndex: number;
+  blocks: readonly SurfaceBlockSnapshot[];
+  bandHeightPx: number;
+  topPx: number;
+  leftPx: number;
+  widthPx: number;
+  /** True when this band is the active-story slot. Renders portal target instead of read-only DOM. */
+  isActiveSlot: boolean;
+  onClick: () => void;
+  "data-testid"?: string;
+}
+
+export const TwPageHeaderBand: React.FC<TwPageHeaderBandProps> = ({
+  pageIndex,
+  blocks,
+  bandHeightPx,
+  topPx,
+  leftPx,
+  widthPx,
+  isActiveSlot,
+  onClick,
+  "data-testid": testId,
+}) => {
+  return (
+    <div
+      data-page-band="header"
+      data-page-index={pageIndex}
+      data-testid={testId}
+      onClick={onClick}
+      style={{
+        position: "absolute",
+        top: `${topPx}px`,
+        left: `${leftPx}px`,
+        width: `${widthPx}px`,
+        height: `${bandHeightPx}px`,
+        cursor: "pointer",
+      }}
+    >
+      {isActiveSlot ? (
+        <div
+          data-pm-portal-slot
+          data-page-band-slot="header"
+          style={{ width: "100%", height: "100%" }}
+        />
+      ) : (
+        <TwRegionBlockRenderer blocks={blocks} />
+      )}
+    </div>
+  );
+};
+
+export default TwPageHeaderBand;