@beyondwork/docx-react-component 1.0.106 → 1.0.108

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

@@ -1,5 +1,4 @@
 import React, { type ReactNode } from "react";
-import * as Tabs from "@radix-ui/react-tabs";
 
 /**
  * TwShellHeader — the top "app chrome" bar above the document canvas.
@@ -7,20 +6,19 @@ import * as Tabs from "@radix-ui/react-tabs";
  * Designsystem §6.1 — three subregions on a single 48-px row:
  *   ┌─────────────────────────────────────────────────────────────────────┐
  *   │ LEFT          │          CENTER           │               RIGHT     │
- *   │ brand + slot  │ mode tabs (always-on)     │ icon actions + CTA      │
+ *   │ brand + slot  │ host-neutral center gap   │ icon actions + CTA      │
  *   └─────────────────────────────────────────────────────────────────────┘
  *
  * Layout is CSS-grid `grid-cols-[1fr_auto_1fr]` so the center zone is
- * always visually centred regardless of left / right slot width.  The
- * 4-mode switcher (edit / review / workflow / more) renders
- * unconditionally — Lane 6b §6b.S1 flips it from opt-in to always-on.
+ * always visually centred regardless of left / right slot width. Product
+ * role switching belongs to the main toolbar, not this top shell.
  *
  * All colors, shadows, radius, and motion bind to the Lane 6a token
  * substrate (`var(--color-*)` / `var(--shadow-*)` / `var(--radius-*)` /
  * `var(--motion-*)`) — no hex literals or legacy Tailwind palette names.
  */
 
-export type ShellHeaderMode = "edit" | "review" | "workflow" | "more";
+export type ShellHeaderMode = "edit" | "review" | "workflow";
 
 export interface ShellHeaderModeOption {
   id: ShellHeaderMode;
@@ -46,11 +44,13 @@ export interface ShellHeaderIconAction {
 export interface TwShellHeaderProps {
   brand?: ReactNode;
   /**
-   * Mode tab options.  When omitted, a default 4-mode set is rendered so
-   * the center subregion always has tabs per designsystem §6.1.
+   * @deprecated Product mode tabs no longer render in the shell header.
+   * Use the main toolbar role toggle instead.
    */
   modes?: readonly ShellHeaderModeOption[];
+  /** @deprecated Product mode tabs no longer render in the shell header. */
   activeMode?: ShellHeaderMode;
+  /** @deprecated Product mode tabs no longer render in the shell header. */
   onModeChange?: (mode: ShellHeaderMode) => void;
   iconActions?: readonly ShellHeaderIconAction[];
   primaryAction?: ShellHeaderPrimaryAction;
@@ -60,26 +60,19 @@ export interface TwShellHeaderProps {
 }
 
 /**
- * Default 4-mode set — designsystem §6.1.  Exported so hosts can extend
- * / relabel without reconstructing the whole list.
+ * Default product roles for hosts migrating from the old shell tabs.
+ * Rendering now lives in the main toolbar role toggle.
  */
 export const DEFAULT_SHELL_HEADER_MODES: readonly ShellHeaderModeOption[] = [
   { id: "edit", label: "Edit" },
   { id: "review", label: "Review" },
   { id: "workflow", label: "Workflow" },
-  { id: "more", label: "More" },
 ];
 
 const focusRingClass =
   "focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus)]";
 
 export function TwShellHeader(props: TwShellHeaderProps): React.ReactElement {
-  const modes =
-    props.modes && props.modes.length > 0
-      ? props.modes
-      : DEFAULT_SHELL_HEADER_MODES;
-  const activeMode: ShellHeaderMode = props.activeMode ?? modes[0]!.id;
-
   const className = [
     "grid h-12 shrink-0 grid-cols-[1fr_auto_1fr] items-center gap-2 px-4",
     "bg-[var(--color-bg-chrome)]/92 backdrop-blur-sm",
@@ -110,41 +103,12 @@ export function TwShellHeader(props: TwShellHeaderProps): React.ReactElement {
         ) : null}
       </div>
 
-      {/* CENTER: mode tabs (always on) */}
+      {/* CENTER: intentionally empty; role mode lives in the main toolbar. */}
       <div
         className="flex items-center justify-center"
         data-region="center"
         data-testid="tw-shell-header__region-center"
-      >
-        <Tabs.Root
-          value={activeMode}
-          onValueChange={(v: string) =>
-            props.onModeChange?.(v as ShellHeaderMode)
-          }
-        >
-          <Tabs.List
-            aria-label="Workspace modes"
-            className="flex items-center gap-1"
-          >
-            {modes.map((mode) => (
-              <Tabs.Trigger
-                key={mode.id}
-                value={mode.id}
-                disabled={mode.disabled}
-                onClick={() => {
-                  if (!mode.disabled) {
-                    props.onModeChange?.(mode.id);
-                  }
-                }}
-                className={`wre-rail-tab ${focusRingClass}`}
-                data-testid={`tw-shell-header__mode-${mode.id}`}
-              >
-                {mode.label}
-              </Tabs.Trigger>
-            ))}
-          </Tabs.List>
-        </Tabs.Root>
-      </div>
+      />
 
       {/* RIGHT: icon actions + primary CTA */}
       <div

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

@@ -7,6 +7,7 @@ export interface TwToolbarIconButtonProps {
   icon: React.ComponentType<{ className?: string }>;
   label: string;
   disabled?: boolean;
+  disabledReason?: string;
   /**
    * Active / pressed state.  Designsystem §6.2 + Lane 6b §6b.S2: active
    * buttons paint an accent-soft tint with an accent border ring — NOT a
@@ -27,8 +28,6 @@ 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;
 }
 
@@ -36,6 +35,10 @@ const focusRingClass =
   "focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus)]";
 
 export function TwToolbarIconButton(props: TwToolbarIconButtonProps) {
+  const titleAttr =
+    props.disabled && props.disabledReason
+      ? `Not available: ${props.disabledReason}`
+      : undefined;
   return (
     <Tooltip.Root>
       <Tooltip.Trigger asChild>
@@ -44,9 +47,11 @@ 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}
+          data-disabled-reason={
+            props.disabled && props.disabledReason ? props.disabledReason : undefined
+          }
           disabled={props.disabled}
-          title={props.disabled && props.disabledReason ? `Not available: ${props.disabledReason}` : undefined}
+          title={titleAttr}
           onMouseDown={preserveEditorSelectionMouseDown}
           onClick={props.onClick}
           className={[