@beyondwork/docx-react-component 1.0.36 → 1.0.38

package/src/ui-tailwind/toolbar/tw-scope-posture-menu.tsx

@@ -0,0 +1,182 @@
+/**
+ * Scope posture menu — replaces the old "Mark section" button with a
+ * topnav dropdown listing the seven `ScopeRailPosture` values so
+ * editors can mark regions with an explicit workflow mode instead of a
+ * single "marked" flag.
+ *
+ * Per runtime-rendering-and-chrome-phase.md §6.4, the menu lives inline
+ * in the editor role's primary action region (not in the review queue
+ * strip).  Postures align 1:1 with the rail vocabulary so the rail
+ * updates visually as soon as the user picks one.
+ */
+
+import React, { useState } from "react";
+import * as Popover from "@radix-ui/react-popover";
+import {
+  BookmarkPlus,
+  ChevronDown,
+  Eye,
+  Flag,
+  Lock,
+  MessageCircle,
+  Pencil,
+  Sparkles,
+} from "lucide-react";
+
+import type { ScopeRailPosture } from "../../api/public-types";
+import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
+
+export interface TwScopePostureMenuProps {
+  disabled?: boolean;
+  /** Called when the user picks a posture.  Host decides the scope to mark. */
+  onSelect: (posture: ScopeRailPosture) => void;
+  /** Optional explicit label override (defaults to "Mark…"). */
+  label?: string;
+  "data-testid"?: string;
+}
+
+interface PostureEntry {
+  posture: ScopeRailPosture;
+  label: string;
+  hint: string;
+  icon: React.ComponentType<{ className?: string }>;
+  tone: "accent" | "warning" | "comment" | "secondary" | "danger";
+}
+
+/**
+ * Posture catalog.  Mirrors `POSTURE_STYLES` in `tw-scope-rail-layer.tsx`
+ * but with lucide icon components (the rail uses CSS pseudo-element
+ * glyphs via the `data-icon` attribute).  Extract both into a single
+ * source of truth in a follow-up.
+ */
+const POSTURE_ENTRIES: readonly PostureEntry[] = [
+  {
+    posture: "edit",
+    label: "Edit scope",
+    hint: "Full authoring inside this region",
+    icon: Pencil,
+    tone: "accent",
+  },
+  {
+    posture: "suggest",
+    label: "Suggest scope",
+    hint: "Tracked-change suggestions only",
+    icon: Sparkles,
+    tone: "warning",
+  },
+  {
+    posture: "comment",
+    label: "Comment scope",
+    hint: "Comments only; body is read-only",
+    icon: MessageCircle,
+    tone: "comment",
+  },
+  {
+    posture: "view",
+    label: "In scope",
+    hint: "Read-only, in scope of review",
+    icon: Eye,
+    tone: "secondary",
+  },
+  {
+    posture: "candidate",
+    label: "Propose scope",
+    hint: "Candidate — not yet committed",
+    icon: Flag,
+    tone: "warning",
+  },
+  {
+    posture: "preserve-only",
+    label: "Preserve only",
+    hint: "Blocked — export-preserving only",
+    icon: Lock,
+    tone: "danger",
+  },
+  {
+    posture: "blocked-import",
+    label: "Blocked import",
+    hint: "Blocked — imported region is locked",
+    icon: Lock,
+    tone: "danger",
+  },
+];
+
+export function TwScopePostureMenu(props: TwScopePostureMenuProps): React.JSX.Element {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Popover.Root open={open} onOpenChange={setOpen}>
+      <Popover.Trigger asChild>
+        <button
+          type="button"
+          aria-label={`${props.label ?? "Mark"} section`}
+          aria-expanded={open}
+          disabled={props.disabled}
+          onMouseDown={preserveEditorSelectionMouseDown}
+          className="inline-flex h-6 items-center gap-1 rounded-md border border-border bg-canvas px-2 text-[11px] font-medium text-primary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas"
+          data-testid={props["data-testid"] ?? "scope-posture-menu-trigger"}
+        >
+          <BookmarkPlus className="h-3.5 w-3.5" />
+          <span>{props.label ?? "Mark…"}</span>
+          <ChevronDown className="h-3.5 w-3.5 text-tertiary" />
+        </button>
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content
+          className="z-50 w-[260px] rounded-lg bg-canvas p-1 shadow-lg ring-1 ring-border"
+          sideOffset={8}
+          align="start"
+          data-testid="scope-posture-menu-content"
+        >
+          <div className="mb-1 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+            Mark section with posture
+          </div>
+          {POSTURE_ENTRIES.map((entry) => (
+            <Popover.Close key={entry.posture} asChild>
+              <button
+                type="button"
+                aria-label={`Mark section as ${entry.label}`}
+                onMouseDown={preserveEditorSelectionMouseDown}
+                onClick={() => {
+                  props.onSelect(entry.posture);
+                }}
+                className="flex w-full items-start gap-2 rounded-md px-2 py-1.5 text-left text-[11px] transition-colors hover:bg-surface focus-visible:outline-none focus-visible:bg-surface"
+                data-testid={`scope-posture-option-${entry.posture}`}
+                data-posture={entry.posture}
+              >
+                <entry.icon
+                  className={[
+                    "mt-0.5 h-3.5 w-3.5 shrink-0",
+                    toneClass(entry.tone),
+                  ].join(" ")}
+                />
+                <span className="flex flex-col">
+                  <span className="font-medium text-primary">{entry.label}</span>
+                  <span className="text-[10px] text-secondary">{entry.hint}</span>
+                </span>
+              </button>
+            </Popover.Close>
+          ))}
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}
+
+function toneClass(tone: PostureEntry["tone"]): string {
+  switch (tone) {
+    case "accent":
+      return "text-accent";
+    case "warning":
+      return "text-warning";
+    case "comment":
+      return "text-comment";
+    case "danger":
+      return "text-danger";
+    case "secondary":
+    default:
+      return "text-secondary";
+  }
+}
+
+export default TwScopePostureMenu;

package/src/ui-tailwind/toolbar/tw-shell-header.tsx

@@ -0,0 +1,162 @@
+import React, { type ReactNode } from "react";
+import * as Tabs from "@radix-ui/react-tabs";
+
+/**
+ * TwShellHeader — the top "app chrome" bar above the document canvas.
+ *
+ * Anatomy matches the editorial reference mock:
+ *   ┌─────────────────────────────────────────────────────────────────────┐
+ *   │  [brand]        Edit | Review | Workflow | More          [⋯] [CTA] │
+ *   └─────────────────────────────────────────────────────────────────────┘
+ *
+ * All three regions are optional slots — hosts opt in by supplying the
+ * corresponding prop.  When nothing is supplied the header renders empty but
+ * preserves layout height so the document canvas does not jump when a CTA
+ * appears.
+ */
+
+export type ShellHeaderMode = "edit" | "review" | "workflow" | "more";
+
+export interface ShellHeaderModeOption {
+  id: ShellHeaderMode;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface ShellHeaderPrimaryAction {
+  label: string;
+  onClick: () => void;
+  tone?: "accent" | "neutral";
+  disabled?: boolean;
+}
+
+export interface ShellHeaderIconAction {
+  id: string;
+  label: string;
+  icon: ReactNode;
+  onClick?: () => void;
+  href?: string;
+}
+
+export interface TwShellHeaderProps {
+  brand?: ReactNode;
+  modes?: readonly ShellHeaderModeOption[];
+  activeMode?: ShellHeaderMode;
+  onModeChange?: (mode: ShellHeaderMode) => void;
+  iconActions?: readonly ShellHeaderIconAction[];
+  primaryAction?: ShellHeaderPrimaryAction;
+  /** Thin bottom border appears only when the document has scrolled. */
+  isScrolled?: boolean;
+  className?: string;
+}
+
+const focusRingClass =
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-canvas";
+
+export function TwShellHeader(props: TwShellHeaderProps) {
+  const hasContent =
+    props.brand ||
+    (props.modes && props.modes.length > 0) ||
+    (props.iconActions && props.iconActions.length > 0) ||
+    props.primaryAction;
+
+  if (!hasContent) {
+    return null;
+  }
+
+  const className = [
+    "flex h-12 shrink-0 items-center justify-between gap-4 px-4 bg-canvas/92 backdrop-blur-sm",
+    props.isScrolled ? "border-b border-border" : "border-b border-transparent",
+    "transition-colors duration-[var(--motion-fast)]",
+    props.className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <header className={className} data-testid="tw-shell-header">
+      <div className="flex min-w-0 items-center gap-3">
+        {props.brand ? (
+          <div
+            className="font-[family-name:var(--font-legal-serif)] text-[15px] font-semibold text-primary truncate"
+            data-testid="tw-shell-header__brand"
+          >
+            {props.brand}
+          </div>
+        ) : null}
+      </div>
+
+      {props.modes && props.modes.length > 0 && props.activeMode ? (
+        <Tabs.Root
+          value={props.activeMode}
+          onValueChange={(v: string) =>
+            props.onModeChange?.(v as ShellHeaderMode)
+          }
+        >
+          <Tabs.List
+            aria-label="Workspace modes"
+            className="flex items-center gap-1"
+          >
+            {props.modes.map((mode) => (
+              <Tabs.Trigger
+                key={mode.id}
+                value={mode.id}
+                disabled={mode.disabled}
+                className={`wre-rail-tab ${focusRingClass}`}
+                data-testid={`tw-shell-header__mode-${mode.id}`}
+              >
+                {mode.label}
+              </Tabs.Trigger>
+            ))}
+          </Tabs.List>
+        </Tabs.Root>
+      ) : (
+        <div aria-hidden="true" />
+      )}
+
+      <div className="flex items-center gap-1">
+        {props.iconActions?.map((action) => {
+          const commonProps = {
+            key: action.id,
+            "aria-label": action.label,
+            title: action.label,
+            className: `inline-flex h-8 w-8 items-center justify-center rounded-sm text-secondary transition-colors hover:bg-surface-hover hover:text-primary ${focusRingClass}`,
+          } as const;
+
+          if (action.href) {
+            return (
+              <a {...commonProps} href={action.href}>
+                <span aria-hidden="true">{action.icon}</span>
+              </a>
+            );
+          }
+
+          return (
+            <button {...commonProps} type="button" onClick={action.onClick}>
+              <span aria-hidden="true">{action.icon}</span>
+            </button>
+          );
+        })}
+
+        {props.primaryAction ? (
+          <button
+            type="button"
+            disabled={props.primaryAction.disabled}
+            onClick={props.primaryAction.onClick}
+            data-tone={props.primaryAction.tone ?? "accent"}
+            className={[
+              "ml-2 inline-flex h-8 items-center rounded-sm px-3 text-xs font-semibold transition-colors disabled:opacity-40",
+              props.primaryAction.tone === "neutral"
+                ? "bg-surface text-primary hover:bg-surface-hover"
+                : "bg-accent text-white hover:bg-[color-mix(in_srgb,var(--color-accent)_85%,#000)]",
+              focusRingClass,
+            ].join(" ")}
+            data-testid="tw-shell-header__primary-action"
+          >
+            {props.primaryAction.label}
+          </button>
+        ) : null}
+      </div>
+    </header>
+  );
+}

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

@@ -26,7 +26,7 @@ export function TwToolbarIconButton(props: TwToolbarIconButtonProps) {
           onMouseDown={preserveEditorSelectionMouseDown}
           onClick={props.onClick}
           className={[
-            "inline-flex h-7 w-7 items-center justify-center rounded-lg border border-transparent transition-colors outline-none",
+            "inline-flex h-6 w-6 items-center justify-center rounded-md border border-transparent transition-colors outline-none",
             "disabled:opacity-30 disabled:cursor-not-allowed",
             props.emphasis
               ? "text-accent hover:border-border/60 hover:bg-surface"
@@ -36,7 +36,7 @@ export function TwToolbarIconButton(props: TwToolbarIconButtonProps) {
             focusRingClass,
           ].join(" ")}
         >
-          <props.icon className="h-4 w-4" />
+          <props.icon className="h-3.5 w-3.5" />
         </button>
       </Tooltip.Trigger>
       <Tooltip.Portal>