@beyondwork/docx-react-component 1.0.88 → 1.0.90

package/src/ui-tailwind/review/tw-workflow-tab.tsx

@@ -10,6 +10,13 @@
 
 import React from "react";
 import type { ScopeRailSegment, ScopeRailPosture } from "../../api/public-types";
+import {
+  WORKFLOW_SCOPE_LAYER_FILTERS,
+  createDefaultWorkflowScopeLayerKeys,
+  isWorkflowScopePostureVisible,
+  toggleWorkflowScopeLayerKey,
+  type WorkflowScopeLayerKey,
+} from "../workflow-scope-layers";
 
 export interface TwWorkflowTabProps {
   segments: readonly ScopeRailSegment[];
@@ -21,6 +28,8 @@ export interface TwWorkflowTabProps {
    * matching overlay card.  If omitted, focus sync is not wired.
    */
   onActiveScopeChange?: (scopeId: string) => void;
+  enabledLayerFilters?: ReadonlySet<WorkflowScopeLayerKey>;
+  onEnabledLayerFiltersChange?: (filters: ReadonlySet<WorkflowScopeLayerKey>) => void;
 }
 
 const POSTURE_META: Record<
@@ -39,26 +48,13 @@ const POSTURE_META: Record<
 const focusRingClass =
   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas";
 
-type ScopeFilterKey = "edit" | "suggest" | "comment" | "view" | "candidate" | "blocked";
-
-const SCOPE_FILTERS: ReadonlyArray<{
-  key: ScopeFilterKey;
-  label: string;
-  postures: readonly ScopeRailPosture[];
-}> = [
-  { key: "edit", label: "Edit", postures: ["edit"] },
-  { key: "suggest", label: "Suggest", postures: ["suggest"] },
-  { key: "comment", label: "Comment", postures: ["comment"] },
-  { key: "view", label: "Review", postures: ["view"] },
-  { key: "candidate", label: "Scheduled", postures: ["candidate"] },
-  { key: "blocked", label: "Blocked", postures: ["preserve-only", "blocked-import"] },
-];
-
 export const TwWorkflowTab: React.FC<TwWorkflowTabProps> = ({
   segments,
   activeScopeId,
   onOpenScope,
   onActiveScopeChange,
+  enabledLayerFilters,
+  onEnabledLayerFiltersChange,
 }) => {
   // Dedupe by scopeId so a scope spanning multiple pages shows once.
   const uniqueSegments = React.useMemo(() => {
@@ -71,20 +67,31 @@ export const TwWorkflowTab: React.FC<TwWorkflowTabProps> = ({
     return Array.from(byScopeId.values()).sort(compareWorkflowSegments(activeScopeId ?? null));
   }, [activeScopeId, segments]);
   const [query, setQuery] = React.useState("");
-  const [enabledFilters, setEnabledFilters] = React.useState<ReadonlySet<ScopeFilterKey>>(
-    () => new Set(SCOPE_FILTERS.map((filter) => filter.key)),
+  const [uncontrolledEnabledFilters, setUncontrolledEnabledFilters] = React.useState<
+    ReadonlySet<WorkflowScopeLayerKey>
+  >(
+    createDefaultWorkflowScopeLayerKeys,
+  );
+  const activeEnabledFilters = enabledLayerFilters ?? uncontrolledEnabledFilters;
+  const setEnabledFilters = React.useCallback(
+    (next: ReadonlySet<WorkflowScopeLayerKey>) => {
+      if (!enabledLayerFilters) {
+        setUncontrolledEnabledFilters(next);
+      }
+      onEnabledLayerFiltersChange?.(next);
+    },
+    [enabledLayerFilters, onEnabledLayerFiltersChange],
   );
   const availableFilters = React.useMemo(() => {
     const presentPostures = new Set(uniqueSegments.map((segment) => segment.posture));
-    return SCOPE_FILTERS.filter((filter) =>
+    return WORKFLOW_SCOPE_LAYER_FILTERS.filter((filter) =>
       filter.postures.some((posture) => presentPostures.has(posture)),
     );
   }, [uniqueSegments]);
   const visibleSegments = React.useMemo(() => {
     const normalizedQuery = normalizeScopeQuery(query);
     return uniqueSegments.filter((segment) => {
-      const filterKey = filterKeyForPosture(segment.posture);
-      if (!enabledFilters.has(filterKey)) {
+      if (!isWorkflowScopePostureVisible(segment.posture, activeEnabledFilters)) {
         return false;
       }
       if (!normalizedQuery) {
@@ -92,7 +99,7 @@ export const TwWorkflowTab: React.FC<TwWorkflowTabProps> = ({
       }
       return scopeSearchText(segment).includes(normalizedQuery);
     });
-  }, [enabledFilters, query, uniqueSegments]);
+  }, [activeEnabledFilters, query, uniqueSegments]);
 
   if (uniqueSegments.length === 0) {
     return (
@@ -146,7 +153,7 @@ export const TwWorkflowTab: React.FC<TwWorkflowTabProps> = ({
             role="group"
           >
             {availableFilters.map((filter) => {
-              const isEnabled = enabledFilters.has(filter.key);
+              const isEnabled = activeEnabledFilters.has(filter.key);
               return (
                 <button
                   key={filter.key}
@@ -160,15 +167,9 @@ export const TwWorkflowTab: React.FC<TwWorkflowTabProps> = ({
                   ].join(" ")}
                   data-testid={`workflow-scope-filter-${filter.key}`}
                   onClick={() => {
-                    setEnabledFilters((current) => {
-                      const next = new Set(current);
-                      if (next.has(filter.key)) {
-                        next.delete(filter.key);
-                      } else {
-                        next.add(filter.key);
-                      }
-                      return next;
-                    });
+                    setEnabledFilters(
+                      toggleWorkflowScopeLayerKey(activeEnabledFilters, filter.key),
+                    );
                   }}
                 >
                   {filter.label}
@@ -245,13 +246,6 @@ function compareWorkflowSegments(activeScopeId: string | null) {
   };
 }
 
-function filterKeyForPosture(posture: ScopeRailPosture): ScopeFilterKey {
-  if (posture === "preserve-only" || posture === "blocked-import") {
-    return "blocked";
-  }
-  return posture;
-}
-
 function normalizeScopeQuery(value: string): string {
   return value.trim().toLocaleLowerCase();
 }

package/src/ui-tailwind/review-workspace/types.ts

@@ -136,6 +136,8 @@ export interface TwReviewWorkspaceProps {
     searchLabel?: string;
     helpLabel?: string;
   };
+  /** Opens the built-in inline find surface from More/Search and command palette. */
+  onOpenInlineFind?: () => void;
   document: ReactNode;
   workspaceMode: WorkspaceMode;
   zoomLevel?: ZoomLevel;

package/src/ui-tailwind/theme/editor-theme.css

@@ -475,19 +475,19 @@
 }
 
 .wre-scope-rail-tint-accent {
-  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
+  background: color-mix(in srgb, var(--color-accent) 20%, transparent);
 }
 .wre-scope-rail-tint-warning {
-  background: color-mix(in srgb, var(--color-warning) 14%, transparent);
+  background: color-mix(in srgb, var(--color-warning) 23%, transparent);
 }
 .wre-scope-rail-tint-insert {
-  background: color-mix(in srgb, var(--color-insert) 12%, transparent);
+  background: color-mix(in srgb, var(--color-insert) 20%, transparent);
 }
 .wre-scope-rail-tint-secondary {
-  background: color-mix(in srgb, var(--color-secondary) 9%, transparent);
+  background: color-mix(in srgb, var(--color-secondary) 16%, transparent);
 }
 .wre-scope-rail-tint-danger {
-  background: color-mix(in srgb, var(--color-danger) 14%, transparent);
+  background: color-mix(in srgb, var(--color-danger) 24%, transparent);
 }
 
 /* §3.7 canonical scope families */
@@ -543,22 +543,22 @@
 /*
  * ─── Scope rail stripe ───
  *
- * The rail stripe is the rest-state representation of a scope: a 4px
+ * The rail stripe is the rest-state representation of a scope: a 6px
  * color stripe in the gutter lane.  Posture color comes from the
  * accent/warning/insert/secondary/danger tokens.  Hover widens the
  * stripe via transform (zero layout cost) and reveals the label pill.
  */
 .wre-scope-rail-stripe {
   position: absolute;
-  width: 4px;
-  border-radius: 2px;
+  width: 6px;
+  border-radius: 999px;
   background: currentColor;
   pointer-events: auto;
   cursor: pointer;
   z-index: 1;
   transform-origin: left center;
   transition: transform 120ms ease-out, opacity 120ms ease-out;
-  opacity: 0.75;
+  opacity: 0.9;
   /* Reset button defaults. */
   border: none;
   padding: 0;
@@ -568,16 +568,22 @@
   background-clip: padding-box;
 }
 
+.wre-scope-rail-stripe::before {
+  content: "";
+  position: absolute;
+  inset: -5px -10px;
+}
+
 .wre-scope-rail-stripe:hover,
 .wre-scope-rail-stripe:focus-visible {
-  transform: scaleX(1.5);
+  transform: scaleX(1.45);
   opacity: 1;
   outline: none;
 }
 
 .wre-scope-rail-stripe-active {
   opacity: 1;
-  transform: scaleX(1.75);
+  transform: scaleX(1.6);
 }
 
 .wre-scope-rail-stripe.wre-scope-rail-label-accent { color: var(--color-accent); }
@@ -623,6 +629,8 @@
   pointer-events: none;
   transition: opacity 140ms ease-out, transform 140ms ease-out;
   transform: translateX(-4px);
+  margin: 0;
+  font-family: inherit;
 }
 
 .wre-scope-rail-stripe:hover + .wre-scope-rail-label,
@@ -692,7 +700,12 @@
 }
 
 .wre-scope-rail-label-active {
-  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent);
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateX(0);
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, currentColor 42%, transparent),
+    0 8px 22px color-mix(in srgb, currentColor 14%, transparent);
 }
 
 .wre-scope-rail-icon {

package/src/ui-tailwind/toolbar/tw-role-action-region.tsx

@@ -9,8 +9,8 @@
  * Review-role actions here collapse what used to live in
  * `TwReviewQueueBar` as a second strip — the review prev/next, counts,
  * active-item label, accept/reject, markup-mode, and batch operations.
- * Editor-role actions surface the scope posture menu.  Workflow-role
- * actions surface work-item traversal + claim/skip/complete.
+ * Workflow-role actions surface the scope posture menu plus work-item
+ * traversal + claim/skip/complete.
  */
 
 import React, { useState } from "react";
@@ -18,19 +18,17 @@ import * as Popover from "@radix-ui/react-popover";
 import * as Toggle from "@radix-ui/react-toggle";
 import * as Tooltip from "@radix-ui/react-tooltip";
 import {
-  BookmarkCheck,
   Check,
   CheckCheck,
-  ChevronDown,
   ChevronLeft,
   ChevronRight,
   CircleOff,
   FileDiff,
-  Flag,
   Hand,
   MessageSquare,
   MessageSquareDot,
   MessageSquareText,
+  MoreHorizontal,
   Rows3,
   SkipForward,
   Target,
@@ -48,6 +46,7 @@ import type { ScopedChromePolicy } from "../../ui/headless/scoped-chrome-policy"
 import type { ToolbarChromeItemId } from "../../ui/headless/chrome-registry";
 import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
 import { ROLE_ACTION_SETS } from "../../ui/headless/role-action-sets";
+import { TwDisplayModeSelector } from "../chrome/tw-display-mode-selector";
 import { TwScopePostureMenu } from "./tw-scope-posture-menu";
 
 /**
@@ -103,7 +102,7 @@ export interface TwRoleActionRegionProps {
   onReviewSidebarTrackedChanges?: () => void;
   onReviewSidebarComments?: () => void;
 
-  // Workflow + review role: scope posture menu
+  // Workflow role: assign authorable scope posture.
   onMarkScopePosture?: (posture: ScopeRailPosture) => void;
 
   // Review role
@@ -185,6 +184,15 @@ function isRoleActionRenderable(
     case "review-accept-all":
     case "review-reject-all":
       return reviewQueueTotal > 0;
+    case "workflow-prev":
+    case "workflow-next":
+    case "workflow-mark-complete":
+    case "workflow-claim":
+    case "workflow-skip":
+    case "workflow-mark-blocked":
+      return props.workflowItem !== undefined;
+    case "workflow-jump-to-scope":
+      return props.workflowItem !== undefined || props.onWorkflowJumpToScope !== undefined;
     default:
       return true;
   }
@@ -357,10 +365,11 @@ function RoleActionButton(arg: RoleActionButtonProps): React.JSX.Element | null
       );
     case "review-markup-mode":
       return (
-        <MarkupModeSelect
-          mode={props.markupDisplay ?? "simple"}
+        <TwDisplayModeSelector
+          value={props.markupDisplay ?? "simple"}
           onChange={(mode) => props.onReviewMarkupMode?.(mode)}
           disabled={!props.onReviewMarkupMode}
+          data-testid="role-review-markup-mode"
         />
       );
     case "workflow-prev":
@@ -433,11 +442,11 @@ function RoleActionOverflow({
           aria-label="More role actions"
           aria-expanded={open}
           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 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas"
+          title="More role actions"
+          className="inline-flex h-6 w-6 items-center justify-center rounded-md border border-border bg-canvas text-primary transition-colors hover:bg-surface outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas"
           data-testid="role-action-overflow-trigger"
         >
-          More
-          <ChevronDown className="h-3.5 w-3.5 text-tertiary" />
+          <MoreHorizontal className="h-3.5 w-3.5 text-tertiary" aria-hidden="true" />
         </button>
       </Popover.Trigger>
       <Popover.Portal>
@@ -684,30 +693,4 @@ function ReviewActiveLabel({
   );
 }
 
-function MarkupModeSelect(arg: {
-  mode: MarkupDisplayMode;
-  onChange: (mode: MarkupDisplayMode) => void;
-  disabled?: boolean;
-}): React.JSX.Element {
-  const Icon = arg.mode === "clean" ? BookmarkCheck : arg.mode === "all" ? Flag : Rows3;
-  return (
-    <button
-      type="button"
-      aria-label={`Markup display: ${arg.mode}`}
-      disabled={arg.disabled}
-      onMouseDown={preserveEditorSelectionMouseDown}
-      onClick={() => {
-        const next: MarkupDisplayMode =
-          arg.mode === "all" ? "clean" : arg.mode === "clean" ? "simple" : "all";
-        arg.onChange(next);
-      }}
-      data-testid="role-review-markup-mode"
-      className="inline-flex h-6 items-center gap-1 rounded-md border border-border bg-canvas px-2 text-[11px] font-medium text-secondary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40"
-    >
-      <Icon className="h-3.5 w-3.5" />
-      <span className="capitalize">{arg.mode}</span>
-    </button>
-  );
-}
-
 export default TwRoleActionRegion;

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

@@ -1,13 +1,15 @@
 /**
  * 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.
+ * topnav dropdown listing the authorable `ScopeRailPosture` values so
+ * workflow operators 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
+ * in the workflow 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.
+ * updates visually as soon as the user picks one. Runtime-only postures
+ * like preserve-only and blocked-import still render in overlays, but
+ * they are not choices users can assign from this product menu.
  */
 
 import React, { useState } from "react";
@@ -17,7 +19,6 @@ import {
   ChevronDown,
   Eye,
   Flag,
-  Lock,
   MessageCircle,
   Pencil,
   Sparkles,
@@ -35,12 +36,12 @@ export interface TwScopePostureMenuProps {
   "data-testid"?: string;
 }
 
-interface PostureEntry {
+export interface ScopePostureMenuEntry {
   posture: ScopeRailPosture;
   label: string;
   hint: string;
   icon: React.ComponentType<{ className?: string }>;
-  tone: "accent" | "warning" | "comment" | "secondary" | "danger";
+  tone: "accent" | "warning" | "comment" | "secondary";
 }
 
 /**
@@ -49,7 +50,7 @@ interface PostureEntry {
  * glyphs via the `data-icon` attribute).  Extract both into a single
  * source of truth in a follow-up.
  */
-const POSTURE_ENTRIES: readonly PostureEntry[] = [
+export const SCOPE_POSTURE_MENU_ENTRIES: readonly ScopePostureMenuEntry[] = [
   {
     posture: "edit",
     label: "Edit scope",
@@ -85,22 +86,11 @@ const POSTURE_ENTRIES: readonly PostureEntry[] = [
     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 const SCOPE_POSTURE_MENU_POSTURES: readonly ScopeRailPosture[] =
+  SCOPE_POSTURE_MENU_ENTRIES.map((entry) => entry.posture);
+
 export function TwScopePostureMenu(props: TwScopePostureMenuProps): React.JSX.Element {
   const [open, setOpen] = useState(false);
 
@@ -131,7 +121,7 @@ export function TwScopePostureMenu(props: TwScopePostureMenuProps): React.JSX.El
           <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) => (
+          {SCOPE_POSTURE_MENU_ENTRIES.map((entry) => (
             <Popover.Close key={entry.posture} asChild>
               <button
                 type="button"
@@ -163,7 +153,7 @@ export function TwScopePostureMenu(props: TwScopePostureMenuProps): React.JSX.El
   );
 }
 
-function toneClass(tone: PostureEntry["tone"]): string {
+function toneClass(tone: ScopePostureMenuEntry["tone"]): string {
   switch (tone) {
     case "accent":
       return "text-accent";
@@ -171,8 +161,6 @@ function toneClass(tone: PostureEntry["tone"]): string {
       return "text-warning";
     case "comment":
       return "text-comment";
-    case "danger":
-      return "text-danger";
     case "secondary":
     default:
       return "text-secondary";

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

@@ -69,8 +69,8 @@ import {
   type ScopedChromePolicy,
 } from "../../ui/headless/scoped-chrome-policy";
 import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
+import { TwDisplayModeSelector } from "../chrome/tw-display-mode-selector";
 import { type MarkupDisplayMode } from "./tw-role-action-region";
-import { TwDetachHandle } from "../chrome/tw-detach-handle";
 import { TwToolbarIconButton } from "./tw-toolbar-icon-button";
 
 export interface TwToolbarProps {
@@ -124,6 +124,8 @@ export interface TwToolbarProps {
   onToggleSidebar?: () => void;
   onZoomChange?: (level: ZoomLevel) => void;
   onShowTrackedChangesChange: (show: boolean) => void;
+  /** Top-toolbar fallback for changing redline/comment display when review context band is not active. */
+  onMarkupDisplayChange?: (mode: MarkupDisplayMode) => void;
   onRestartNumbering?: () => void;
   onContinueNumbering?: () => void;
   onUpdateFields?: () => void;
@@ -155,9 +157,9 @@ export interface TwToolbarProps {
   onReviewNext?: () => void;
   onReviewAccept?: () => void;
   onReviewReject?: () => void;
-  /** Current chrome pin state; when supplied enables the topnav detach handle. */
+  /** Current chrome pin state, retained for host compatibility. */
   chromePins?: ChromePinsState;
-  /** Called when the user detaches or re-attaches the topnav. */
+  /** Called when a host-supported chrome surface changes placement. */
   onChromePinChange?: (surface: ChromePinSurface, pin: PinState | null) => void;
 
   /**
@@ -255,13 +257,18 @@ export function TwToolbar(props: TwToolbarProps) {
   });
   const showStyleSelectors = isToolbarChromeItemVisible(scopedChromePolicy, "text-style-selectors");
   const showInlineFormatting = isToolbarChromeItemVisible(scopedChromePolicy, "inline-formatting");
-  const showAdvancedFormatting = preset === "advanced" && showInlineFormatting;
+  const showAdvancedFormatting =
+    showInlineFormatting && (preset === "advanced" || props.role === "editor");
   const showTextColors = isToolbarChromeItemVisible(scopedChromePolicy, "text-colors");
   const showParagraphAlignment = isToolbarChromeItemVisible(scopedChromePolicy, "paragraph-alignment");
   const showInsertMenu = isToolbarChromeItemVisible(scopedChromePolicy, "insert-actions");
   const showTrackedChangesToggle =
     isToolbarChromeItemVisible(scopedChromePolicy, "tracked-changes-toggle") &&
     !isChromeItemOwnedByRoleRegion("tracked-changes-toggle", props.role);
+  const showMarkupDisplaySelector =
+    props.markupDisplay !== undefined &&
+    props.onMarkupDisplayChange !== undefined &&
+    !isChromeItemOwnedByRoleRegion("review-markup-mode", props.role);
   const showRightClusterComment =
     isToolbarChromeItemVisible(scopedChromePolicy, "comment") &&
     !isChromeItemOwnedByRoleRegion("comment", props.role);
@@ -695,6 +702,17 @@ export function TwToolbar(props: TwToolbarProps) {
           </>
         ) : null}
 
+        {showMarkupDisplaySelector ? (
+          <>
+            <TwDisplayModeSelector
+              value={props.markupDisplay!}
+              onChange={(mode) => props.onMarkupDisplayChange?.(mode)}
+              data-testid="toolbar-display-mode-selector"
+            />
+            <div className="mx-1 h-4 w-px bg-border" />
+          </>
+        ) : null}
+
         {/* View mode toggle group: Canvas (clean, flowing) / Page (layout-sensitive) */}
         {isToolbarChromeItemVisible(scopedChromePolicy, "workspace-mode") ? (
           <ToggleGroup.Root
@@ -891,14 +909,6 @@ export function TwToolbar(props: TwToolbarProps) {
           />
         ) : null}
 
-        {props.onChromePinChange ? (
-          <TwDetachHandle
-            surface="topnav"
-            pin={props.chromePins?.topnav}
-            onChange={props.onChromePinChange}
-            label="Detach toolbar"
-          />
-        ) : null}
       </div>
     </header>
   );
@@ -1158,10 +1168,9 @@ function ToolbarCompactOverflow(props: {
             aria-expanded={open}
             onMouseDown={preserveEditorSelectionMouseDown}
             onClick={() => setOpen((value) => !value)}
-            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 ${focusRingClass}`}
+            className={`inline-flex h-6 w-6 items-center justify-center rounded-md border border-border bg-canvas text-primary transition-colors hover:bg-surface outline-none ${focusRingClass}`}
           >
-            More
-            <ChevronDown className="h-3.5 w-3.5 text-tertiary" />
+            <MoreHorizontal className="h-3.5 w-3.5" />
           </button>
         </Tooltip.Trigger>
         <Tooltip.Portal>