@beyondwork/docx-react-component 1.0.73 → 1.0.74

package/src/ui-tailwind/review-workspace/tw-review-workspace-page-toolbar.tsx

@@ -1,240 +0,0 @@
-import React from "react";
-
-import { ChevronRight } from "lucide-react";
-
-import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
-import { TwPageRuler } from "../chrome/tw-page-ruler";
-import { TwLayoutPanel } from "../chrome/tw-layout-panel";
-import type {
-  DocumentNavigationSnapshot,
-  EditorViewStateSnapshot,
-  HeaderFooterLinkPatch,
-  RuntimeRenderSnapshot,
-  SectionBreakType,
-  SectionLayoutPatch,
-  SectionPageNumberingPatch,
-} from "../../api/public-types";
-import type { ActiveParagraphLayout } from "./paragraph-layout";
-
-/**
- * Page-mode inline toolbar: the "Page N of M · Section N · orientation"
- * summary strip plus the expandable `TwPageRuler` + `TwLayoutPanel`
- * cluster.  Lifted verbatim from `tw-review-workspace.tsx` — no behavior
- * changes.
- */
-export interface TwReviewWorkspacePageToolbarProps {
-  /** `isPageWorkspace && chromeVisibility.pageChrome && snapshot.pageLayout` */
-  enabled: boolean;
-  pageLayout: RuntimeRenderSnapshot["pageLayout"];
-  activeStory: RuntimeRenderSnapshot["activeStory"];
-  activePage: DocumentNavigationSnapshot["pages"][number] | null;
-  pageCount: number;
-  headerVariant: HeaderFooterLinkPatch["variant"];
-  footerVariant: HeaderFooterLinkPatch["variant"];
-  allowLocalChromeMutations: boolean;
-  pageChromeReadOnly: boolean;
-  layoutToolsOpen: boolean;
-  setLayoutToolsOpen: (fn: (open: boolean) => boolean) => void;
-  viewState: EditorViewStateSnapshot;
-  activeParagraphLayout: ActiveParagraphLayout | null;
-
-  /** Dismiss the floating selection toolbar before committing any action. */
-  dismissSelectionToolbar: () => void;
-  /** Wrap an optional nullary callback so it dismisses the toolbar first. */
-  runWithSelectionToolbarDismiss: (action?: () => void) => () => void;
-
-  onCloseStory?: () => void;
-  onOpenHeaderStory?: () => void;
-  onOpenFooterStory?: () => void;
-  onSetHeaderFooterLink?: (sectionIndex: number, patch: HeaderFooterLinkPatch) => void;
-  onSetParagraphIndentation?: (indentation: Parameters<NonNullable<React.ComponentProps<typeof TwPageRuler>["onSetIndentation"]>>[0]) => void;
-  onSetParagraphTabStops?: (tabStops: Parameters<NonNullable<React.ComponentProps<typeof TwPageRuler>["onSetTabStops"]>>[0]) => void;
-  onRestartNumbering?: () => void;
-  onContinueNumbering?: () => void;
-  onInsertSectionBreak?: (type: SectionBreakType) => void;
-  onDeleteSectionBreak?: (sectionIndex: number) => void;
-  onUpdateSectionLayout?: (sectionIndex: number, patch: SectionLayoutPatch) => void;
-  onSetSectionPageNumbering?: (sectionIndex: number, patch: SectionPageNumberingPatch | null) => void;
-}
-
-export function TwReviewWorkspacePageToolbar({
-  enabled,
-  pageLayout,
-  activeStory,
-  activePage,
-  pageCount,
-  headerVariant,
-  footerVariant,
-  allowLocalChromeMutations,
-  pageChromeReadOnly,
-  layoutToolsOpen,
-  setLayoutToolsOpen,
-  viewState,
-  activeParagraphLayout,
-  dismissSelectionToolbar,
-  runWithSelectionToolbarDismiss,
-  onCloseStory,
-  onOpenHeaderStory,
-  onOpenFooterStory,
-  onSetHeaderFooterLink,
-  onSetParagraphIndentation,
-  onSetParagraphTabStops,
-  onRestartNumbering,
-  onContinueNumbering,
-  onInsertSectionBreak,
-  onDeleteSectionBreak,
-  onUpdateSectionLayout,
-  onSetSectionPageNumbering,
-}: TwReviewWorkspacePageToolbarProps): React.ReactElement | null {
-  if (!enabled || !pageLayout) return null;
-
-  return (
-    <>
-      <div className="border-b border-border/70 bg-surface/65 px-5 py-3" data-testid="page-context-summary">
-        <div className="flex flex-wrap items-center justify-between gap-2">
-          <div className="flex flex-wrap items-center gap-2 text-xs text-secondary">
-            <span className="rounded-full bg-canvas px-2 py-1 font-medium text-primary">
-              {activePage
-                ? `Page ${activePage.pageIndex + 1} of ${pageCount}`
-                : "Page workspace"}
-            </span>
-            <span>{`Section ${pageLayout.sectionIndex + 1}`}</span>
-            <span className="uppercase tracking-[0.12em] text-tertiary">
-              {pageLayout.orientation}
-            </span>
-          </div>
-          <div className="flex items-center gap-2">
-            {activeStory.kind !== "main" ? (
-              <button
-                type="button"
-                aria-label="Return to document body"
-                onMouseDown={preserveEditorSelectionMouseDown}
-                onClick={runWithSelectionToolbarDismiss(onCloseStory)}
-                className="inline-flex items-center gap-1 rounded-md border border-border bg-canvas px-2 py-1 text-xs font-medium text-primary transition-colors hover:bg-surface"
-              >
-                Body
-              </button>
-            ) : null}
-            {activeStory.kind === "main" && pageLayout.sectionIndex > 0 ? (
-              <>
-                <button
-                  type="button"
-                  aria-label="Link header to previous"
-                  disabled={!onSetHeaderFooterLink || !allowLocalChromeMutations}
-                  onMouseDown={preserveEditorSelectionMouseDown}
-                  onClick={() => {
-                    dismissSelectionToolbar();
-                    onSetHeaderFooterLink?.(pageLayout.sectionIndex, {
-                      kind: "header",
-                      variant: headerVariant,
-                      linkToPrevious: true,
-                    });
-                  }}
-                  className="inline-flex items-center gap-1 rounded-md border border-border bg-canvas px-2 py-1 text-xs font-medium text-primary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40"
-                >
-                  Link header
-                </button>
-                <button
-                  type="button"
-                  aria-label="Link footer to previous"
-                  disabled={!onSetHeaderFooterLink || !allowLocalChromeMutations}
-                  onMouseDown={preserveEditorSelectionMouseDown}
-                  onClick={() => {
-                    dismissSelectionToolbar();
-                    onSetHeaderFooterLink?.(pageLayout.sectionIndex, {
-                      kind: "footer",
-                      variant: footerVariant,
-                      linkToPrevious: true,
-                    });
-                  }}
-                  className="inline-flex items-center gap-1 rounded-md border border-border bg-canvas px-2 py-1 text-xs font-medium text-primary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40"
-                >
-                  Link footer
-                </button>
-              </>
-            ) : null}
-            <button
-              type="button"
-              aria-label="Toggle layout tools"
-              aria-expanded={layoutToolsOpen}
-              onMouseDown={preserveEditorSelectionMouseDown}
-              onClick={() => {
-                dismissSelectionToolbar();
-                setLayoutToolsOpen((open) => !open);
-              }}
-              className="inline-flex items-center gap-1 rounded-md border border-border bg-canvas px-2 py-1 text-xs font-medium text-primary transition-colors hover:bg-surface"
-            >
-              <ChevronRight className={`h-3.5 w-3.5 transition-transform ${layoutToolsOpen ? "rotate-90" : ""}`} />
-              Layout tools
-            </button>
-          </div>
-        </div>
-      </div>
-      {layoutToolsOpen ? (
-        <div className="px-5 pt-3">
-          <TwPageRuler
-            pageLayout={pageLayout}
-            viewState={viewState}
-            paragraphLayout={activeParagraphLayout}
-            readOnly={pageChromeReadOnly}
-            onReturnToBody={onCloseStory
-              ? runWithSelectionToolbarDismiss(onCloseStory)
-              : () => undefined}
-            onOpenHeader={onOpenHeaderStory
-              ? runWithSelectionToolbarDismiss(onOpenHeaderStory)
-              : undefined}
-            onOpenFooter={onOpenFooterStory
-              ? runWithSelectionToolbarDismiss(onOpenFooterStory)
-              : undefined}
-            onSetIndentation={onSetParagraphIndentation
-              ? (indentation) => {
-                dismissSelectionToolbar();
-                onSetParagraphIndentation?.(indentation);
-              }
-              : undefined}
-            onSetTabStops={onSetParagraphTabStops
-              ? (tabStops) => {
-                dismissSelectionToolbar();
-                onSetParagraphTabStops?.(tabStops);
-              }
-              : undefined}
-            onRestartNumbering={onRestartNumbering
-              ? runWithSelectionToolbarDismiss(onRestartNumbering)
-              : undefined}
-            onContinueNumbering={onContinueNumbering
-              ? runWithSelectionToolbarDismiss(onContinueNumbering)
-              : undefined}
-          />
-          <TwLayoutPanel
-            pageLayout={pageLayout}
-            readOnly={pageChromeReadOnly}
-            onInsertSectionBreak={onInsertSectionBreak
-              ? (type) => {
-                dismissSelectionToolbar();
-                onInsertSectionBreak?.(type);
-              }
-              : undefined}
-            onDeleteSectionBreak={onDeleteSectionBreak
-              ? (sectionIndex) => {
-                dismissSelectionToolbar();
-                onDeleteSectionBreak?.(sectionIndex);
-              }
-              : undefined}
-            onUpdateSectionLayout={onUpdateSectionLayout
-              ? (sectionIndex, patch) => {
-                dismissSelectionToolbar();
-                onUpdateSectionLayout?.(sectionIndex, patch);
-              }
-              : undefined}
-            onSetSectionPageNumbering={onSetSectionPageNumbering
-              ? (sectionIndex, patch) => {
-                dismissSelectionToolbar();
-                onSetSectionPageNumbering?.(sectionIndex, patch);
-              }
-              : undefined}
-          />
-        </div>
-      ) : null}
-    </>
-  );
-}