@beyondwork/docx-react-component 1.0.17 → 1.0.19

package/src/ui/browser-export.ts

@@ -0,0 +1,52 @@
+import type { ExportDelivery, ExportResult } from "../api/public-types";
+
+export function withExportDelivery(
+  result: ExportResult,
+  delivery: ExportDelivery,
+): ExportResult {
+  return {
+    ...result,
+    delivery,
+  };
+}
+
+export function downloadExportResult(result: ExportResult): ExportResult {
+  const delivery = canDownloadInBrowser()
+    ? triggerBrowserDownload(result)
+    : {
+        mode: "exported-bytes-only" as const,
+      };
+  return withExportDelivery(result, delivery);
+}
+
+function canDownloadInBrowser(): boolean {
+  return (
+    typeof window !== "undefined" &&
+    typeof document !== "undefined" &&
+    typeof URL !== "undefined" &&
+    typeof URL.createObjectURL === "function" &&
+    typeof URL.revokeObjectURL === "function" &&
+    typeof Blob !== "undefined"
+  );
+}
+
+function triggerBrowserDownload(result: ExportResult): ExportDelivery {
+  const blob = new Blob([Uint8Array.from(result.bytes)], { type: result.mimeType });
+  const objectUrl = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = objectUrl;
+  link.download = result.fileName;
+  link.rel = "noopener";
+  link.style.display = "none";
+  document.body?.appendChild(link);
+  try {
+    link.click();
+  } finally {
+    link.remove();
+    URL.revokeObjectURL(objectUrl);
+  }
+
+  return {
+    mode: "downloaded",
+  };
+}

package/src/ui/headless/preserve-editor-selection.ts

@@ -0,0 +1,5 @@
+import type { MouseEvent } from "react";
+
+export function preserveEditorSelectionMouseDown(event: MouseEvent<HTMLElement>): void {
+  event.preventDefault();
+}

package/src/ui/headless/selection-helpers.ts

@@ -19,6 +19,26 @@ export function createSelectionSnapshot(anchor: number, head = anchor): Selectio
   };
 }
 
+export function createNodeSelectionSnapshot(at: number, assoc: -1 | 1 = 1): SelectionSnapshot {
+  return {
+    anchor: at,
+    head: at,
+    isCollapsed: true,
+    activeRange: {
+      kind: "node",
+      at,
+      assoc,
+    },
+  };
+}
+
+export function isCollapsedAtBlockStart(
+  selection: SelectionSnapshot,
+  blockFrom: number,
+): boolean {
+  return selection.isCollapsed && selection.head === blockFrom;
+}
+
 export function selectionTouchesRange(
   selection: SelectionSnapshot,
   from: number,

package/src/ui/headless/selection-toolbar-model.ts

@@ -0,0 +1,22 @@
+export interface SelectionToolbarBadge {
+  label: string;
+  tone?: "neutral" | "accent";
+}
+
+export interface SelectionToolbarModel {
+  previewText: string;
+  badges: SelectionToolbarBadge[];
+  canToggleFormatting: boolean;
+  boldActive: boolean;
+  italicActive: boolean;
+  underlineActive: boolean;
+  canAddComment: boolean;
+  disabledReason?: string;
+}
+
+export interface SelectionToolbarAnchor {
+  left: number;
+  right: number;
+  top: number;
+  bottom: number;
+}

package/src/ui/headless/use-editor-keyboard.ts

@@ -9,6 +9,7 @@ export interface EditorKeyboardCallbacks {
   onDeleteBackward?: () => void;
   onDeleteForward?: () => void;
   onInsertTab?: () => void;
+  onOutdentTab?: () => void;
   onInsertHardBreak?: () => void;
   onSplitParagraph?: () => void;
 }
@@ -65,7 +66,11 @@ export function createEditorKeyboardHandler(
         return;
       case "Tab":
         event.preventDefault();
-        callbacks.onInsertTab?.();
+        if (event.shiftKey) {
+          callbacks.onOutdentTab?.();
+        } else {
+          callbacks.onInsertTab?.();
+        }
         return;
       case "Enter":
         event.preventDefault();

package/src/ui-tailwind/chrome/tw-page-ruler.tsx

@@ -0,0 +1,386 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+
+import type {
+  EditorViewStateSnapshot,
+  PageLayoutSnapshot,
+} from "../../api/public-types";
+
+interface ActiveParagraphLayout {
+  leftIndent: number;
+  rightIndent: number;
+  firstLineOffset: number;
+  tabStops: Array<{ pos: number; val?: string; leader?: string }>;
+}
+
+export interface TwPageRulerProps {
+  pageLayout: PageLayoutSnapshot;
+  viewState: EditorViewStateSnapshot;
+  paragraphLayout: ActiveParagraphLayout | null;
+  readOnly: boolean;
+  onReturnToBody: () => void;
+  onOpenHeader?: () => void;
+  onOpenFooter?: () => void;
+  onSetIndentation?: (indentation: {
+    left?: number;
+    right?: number;
+    firstLine?: number;
+    hanging?: number;
+  }) => void;
+  onSetTabStops?: (tabStops: Array<{ pos: number; val?: string; leader?: string }>) => void;
+  onRestartNumbering?: () => void;
+  onContinueNumbering?: () => void;
+}
+
+type DragKind = "left-indent" | "first-line";
+
+const MIN_HANDLE_TWIPS = 0;
+const HANDLE_OVERLAP_THRESHOLD_PERCENT = 1.4;
+const HANDLE_OFFSET_PERCENT = 0.9;
+const MARKER_HALF_PX = 8;
+
+export function TwPageRuler(props: TwPageRulerProps) {
+  const trackRef = useRef<HTMLDivElement | null>(null);
+  const dragCleanupRef = useRef<(() => void) | null>(null);
+  const [, setDragState] = useState<{
+    kind: DragKind;
+    startClientX: number;
+    startLeftIndent: number;
+    startFirstLineOffset: number;
+  } | null>(null);
+  const [previewLayout, setPreviewLayout] = useState<ActiveParagraphLayout | null>(null);
+
+  const effectiveLayout = previewLayout ?? props.paragraphLayout;
+  const activeRegion = props.viewState.activePageRegion?.region ?? "body";
+  const isBodyParagraphContext =
+    activeRegion === "body" && Boolean(props.paragraphLayout);
+  const availableHeader = props.pageLayout.headerVariants[0];
+  const availableFooter = props.pageLayout.footerVariants[0];
+
+  const usablePageWidth = Math.max(
+    1440,
+    props.pageLayout.pageWidth - props.pageLayout.marginLeft - props.pageLayout.marginRight,
+  );
+
+  useEffect(() => {
+    return () => {
+      dragCleanupRef.current?.();
+    };
+  }, []);
+
+  function beginDrag(kind: DragKind, clientX: number): void {
+    if (!isBodyParagraphContext || !props.paragraphLayout || props.readOnly) {
+      return;
+    }
+
+    dragCleanupRef.current?.();
+    const activeDrag = {
+      kind,
+      startClientX: clientX,
+      startLeftIndent: props.paragraphLayout.leftIndent,
+      startFirstLineOffset: props.paragraphLayout.firstLineOffset,
+    };
+    setDragState(activeDrag);
+
+    const handleMouseMove = (event: MouseEvent): void => {
+      const track = trackRef.current;
+      if (!track) {
+        return;
+      }
+      const rect = track.getBoundingClientRect();
+      const deltaPx = event.clientX - activeDrag.startClientX;
+      const deltaTwips = pxToTwips(deltaPx, rect.width, usablePageWidth);
+
+      if (activeDrag.kind === "left-indent") {
+        setPreviewLayout({
+          ...props.paragraphLayout!,
+          leftIndent: clampTwips(activeDrag.startLeftIndent + deltaTwips),
+          firstLineOffset: activeDrag.startFirstLineOffset,
+        });
+        return;
+      }
+
+      setPreviewLayout({
+        ...props.paragraphLayout!,
+        leftIndent: activeDrag.startLeftIndent,
+        firstLineOffset: activeDrag.startFirstLineOffset + deltaTwips,
+      });
+    };
+
+    const handleMouseUp = (event: MouseEvent): void => {
+      const track = trackRef.current;
+      if (!track || !props.onSetIndentation) {
+        cleanupDrag();
+        setDragState(null);
+        setPreviewLayout(null);
+        return;
+      }
+
+      const rect = track.getBoundingClientRect();
+      const deltaPx = event.clientX - activeDrag.startClientX;
+      const deltaTwips = pxToTwips(deltaPx, rect.width, usablePageWidth);
+      const leftIndent =
+        activeDrag.kind === "left-indent"
+          ? clampTwips(activeDrag.startLeftIndent + deltaTwips)
+          : activeDrag.startLeftIndent;
+      const firstLineOffset =
+        activeDrag.kind === "first-line"
+          ? activeDrag.startFirstLineOffset + deltaTwips
+          : activeDrag.startFirstLineOffset;
+
+      cleanupDrag();
+      props.onSetIndentation(
+        composeIndentation(leftIndent, effectiveLayout?.rightIndent ?? props.paragraphLayout?.rightIndent ?? 0, firstLineOffset),
+      );
+      setDragState(null);
+      setPreviewLayout(null);
+    };
+
+    const cleanupDrag = (): void => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+      if (dragCleanupRef.current === cleanupDrag) {
+        dragCleanupRef.current = null;
+      }
+    };
+
+    dragCleanupRef.current = cleanupDrag;
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+  }
+
+  const markerLayout = useMemo(() => {
+    if (!effectiveLayout || !isBodyParagraphContext) {
+      return null;
+    }
+    return {
+      leftIndent: twipsToPercent(effectiveLayout.leftIndent, usablePageWidth),
+      firstLine: twipsToPercent(
+        Math.max(MIN_HANDLE_TWIPS, effectiveLayout.leftIndent + effectiveLayout.firstLineOffset),
+        usablePageWidth,
+      ),
+      tabStops: effectiveLayout.tabStops.map((tabStop, index) => ({
+        id: `${tabStop.pos}-${index}`,
+        left: twipsToPercent(tabStop.pos, usablePageWidth),
+      })),
+    };
+  }, [effectiveLayout, isBodyParagraphContext, usablePageWidth]);
+  const handlesOverlap = markerLayout
+    ? Math.abs(markerLayout.leftIndent - markerLayout.firstLine) < HANDLE_OVERLAP_THRESHOLD_PERCENT
+    : false;
+  const leftIndentHandleLeft = markerLayout
+    ? offsetHandlePercent(markerLayout.leftIndent, handlesOverlap ? -HANDLE_OFFSET_PERCENT : 0)
+    : 0;
+  const firstLineHandleLeft = markerLayout
+    ? offsetHandlePercent(markerLayout.firstLine, handlesOverlap ? HANDLE_OFFSET_PERCENT : 0)
+    : 0;
+
+  return (
+    <div
+      aria-label="Page ruler"
+      className="mb-4 rounded-2xl border border-border bg-surface/80 px-4 py-3 shadow-sm"
+    >
+      <div className="mb-3 flex flex-wrap items-center gap-2">
+        <button
+          type="button"
+          aria-label="Return to document body"
+          title="Return to document body"
+          onClick={props.onReturnToBody}
+          className={regionButtonClass(activeRegion === "body")}
+        >
+          Body
+        </button>
+        {availableHeader ? (
+          <button
+            type="button"
+            aria-label="Open header story"
+            title="Open header story"
+            onClick={props.onOpenHeader}
+            className={regionButtonClass(activeRegion === "header")}
+          >
+            Header
+          </button>
+        ) : null}
+        {availableFooter ? (
+          <button
+            type="button"
+            aria-label="Open footer story"
+            title="Open footer story"
+            onClick={props.onOpenFooter}
+            className={regionButtonClass(activeRegion === "footer")}
+          >
+            Footer
+          </button>
+        ) : null}
+        {props.viewState.activeListContext ? (
+          <>
+            <div className="h-4 w-px bg-border" />
+            <button
+              type="button"
+              aria-label="Continue numbering"
+              title="Continue numbering from previous list"
+              disabled={props.readOnly}
+              onClick={props.onContinueNumbering}
+              className={controlButtonClass}
+            >
+              Continue
+            </button>
+            <button
+              type="button"
+              aria-label="Restart numbering"
+              title="Restart numbering at 1"
+              disabled={props.readOnly}
+              onClick={props.onRestartNumbering}
+              className={controlButtonClass}
+            >
+              Restart
+            </button>
+          </>
+        ) : null}
+      </div>
+
+      <div
+        className="mb-2 flex items-center justify-between"
+        aria-label={`Section ${props.pageLayout.sectionIndex + 1}, ${props.pageLayout.orientation}`}
+        title={`Section ${props.pageLayout.sectionIndex + 1} · ${props.pageLayout.orientation}`}
+      >
+        <span className="sr-only">Page ruler</span>
+      </div>
+
+      <div
+        ref={trackRef}
+        aria-label="Page ruler track"
+        className="relative h-14 overflow-hidden rounded-xl border border-border bg-canvas"
+        onClick={(event) => {
+          if (
+            props.readOnly ||
+            !isBodyParagraphContext ||
+            !props.paragraphLayout ||
+            !props.onSetTabStops
+          ) {
+            return;
+          }
+          if ((event.target as HTMLElement).dataset.handle === "true") {
+            return;
+          }
+          const rect = event.currentTarget.getBoundingClientRect();
+          const nextPos = clampTwips(pxToTwips(event.clientX - rect.left, rect.width, usablePageWidth));
+          props.onSetTabStops(
+            [...props.paragraphLayout.tabStops, { pos: nextPos, val: "left" }]
+              .sort((left, right) => left.pos - right.pos),
+          );
+        }}
+      >
+        <div className="absolute inset-x-4 top-2 h-px bg-border" />
+        <div className="absolute inset-x-4 top-7 h-px bg-border/70" />
+        {Array.from({ length: 8 }, (_, index) => (
+          <div
+            key={`tick-${index}`}
+            className="absolute top-1 h-3 w-px bg-border/80"
+            style={{ left: `${12 + index * 12}%` }}
+          />
+        ))}
+
+        {markerLayout ? (
+          <>
+            <button
+              type="button"
+              data-handle="true"
+              aria-label="Left indent handle"
+              title={`Left indent: ${effectiveLayout?.leftIndent ?? 0} twips`}
+              disabled={props.readOnly}
+              className={`absolute top-8 h-4 w-4 -translate-x-1/2 rounded-[5px] border border-accent/40 bg-accent-soft shadow-sm transition-opacity ${
+                handlesOverlap ? "opacity-80 z-10" : ""
+              }`}
+              style={{ left: markerLeftStyle(leftIndentHandleLeft) }}
+              onMouseDown={(event) => {
+                event.preventDefault();
+                beginDrag("left-indent", event.clientX);
+              }}
+            />
+            <button
+              type="button"
+              data-handle="true"
+              aria-label="First line indent handle"
+              title={`First line offset: ${effectiveLayout?.firstLineOffset ?? 0} twips`}
+              disabled={props.readOnly}
+              className={`absolute top-1 h-4 w-4 -translate-x-1/2 rotate-45 rounded-[4px] border border-primary/30 bg-surface-raised shadow-sm transition-opacity ${
+                handlesOverlap ? "opacity-80 z-20" : ""
+              }`}
+              style={{ left: markerLeftStyle(firstLineHandleLeft) }}
+              onMouseDown={(event) => {
+                event.preventDefault();
+                beginDrag("first-line", event.clientX);
+              }}
+            />
+            {markerLayout.tabStops.map((tabStop) => (
+              <div
+                key={tabStop.id}
+                data-handle="true"
+                aria-label={`Tab stop at ${tabStop.left.toFixed(0)}%`}
+                title={`Tab stop`}
+                className="absolute top-5 h-4 w-4 -translate-x-1/2 rounded-sm border border-border bg-surface-raised shadow-sm"
+                style={{ left: markerLeftStyle(tabStop.left) }}
+              />
+            ))}
+          </>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function composeIndentation(leftIndent: number, rightIndent: number, firstLineOffset: number) {
+  const indentation: {
+    left?: number;
+    right?: number;
+    firstLine?: number;
+    hanging?: number;
+  } = {};
+  if (leftIndent > 0) {
+    indentation.left = leftIndent;
+  }
+  if (rightIndent > 0) {
+    indentation.right = rightIndent;
+  }
+  if (firstLineOffset > 0) {
+    indentation.firstLine = Math.round(firstLineOffset);
+  } else if (firstLineOffset < 0) {
+    indentation.hanging = Math.round(Math.abs(firstLineOffset));
+  }
+  return indentation;
+}
+
+function regionButtonClass(active: boolean): string {
+  return `inline-flex items-center rounded-full border px-3 py-1 text-xs transition-colors ${
+    active
+      ? "border-accent/30 bg-accent-soft text-accent"
+      : "border-border bg-canvas text-secondary hover:bg-surface"
+  }`;
+}
+
+const controlButtonClass =
+  "inline-flex items-center rounded-full border border-border bg-canvas px-3 py-1 text-xs text-secondary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-50";
+
+function twipsToPercent(value: number, usablePageWidth: number): number {
+  return Math.max(0, Math.min(100, (value / usablePageWidth) * 100));
+}
+
+function pxToTwips(px: number, width: number, usablePageWidth: number): number {
+  if (width <= 0) {
+    return 0;
+  }
+  return Math.round((px / width) * usablePageWidth);
+}
+
+function clampTwips(value: number): number {
+  return Math.max(MIN_HANDLE_TWIPS, Math.round(value));
+}
+
+function offsetHandlePercent(value: number, offset: number): number {
+  return Math.max(0, Math.min(100, value + offset));
+}
+
+function markerLeftStyle(value: number): string {
+  const clamped = Math.max(0, Math.min(100, value));
+  return `clamp(${MARKER_HALF_PX}px, ${clamped}%, calc(100% - ${MARKER_HALF_PX}px))`;
+}

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

@@ -1,33 +1,77 @@
-import React from "react";
+import React, { forwardRef } from "react";
+import type { FocusEventHandler } from "react";
 import * as Tooltip from "@radix-ui/react-tooltip";
-import { MessageSquare } from "lucide-react";
+import { Bold, Italic, MessageSquare, Underline } from "lucide-react";
+
+import type { SelectionToolbarModel } from "../../ui/headless/selection-toolbar-model";
+import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
 
 export interface TwSelectionToolbarProps {
-  selectionPreview: string;
-  readOnly: boolean;
-  canAddComment?: boolean;
+  model: SelectionToolbarModel;
   disabledReason?: string;
+  onFocusCapture?: FocusEventHandler<HTMLDivElement>;
+  onBlurCapture?: FocusEventHandler<HTMLDivElement>;
+  onToggleBold?: () => void;
+  onToggleItalic?: () => void;
+  onToggleUnderline?: () => void;
   onAddComment?: () => void;
 }
 
 const focusRingClass =
   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas";
 
-export function TwSelectionToolbar(props: TwSelectionToolbarProps) {
-  const addCommentDisabled = props.readOnly || props.canAddComment === false;
+export const TwSelectionToolbar = forwardRef<HTMLDivElement, TwSelectionToolbarProps>(function TwSelectionToolbar(props, ref) {
+  const { model } = props;
+  const addCommentDisabled = !model.canAddComment;
+  const formattingDisabled = !model.canToggleFormatting;
+  const contextLabel = summarizeSelectionContext(model);
   const tooltipLabel = addCommentDisabled
     ? props.disabledReason ?? "Select text within one paragraph to add a DOCX comment"
     : "Add comment";
+
   return (
-    <div className="mb-6 inline-flex items-center gap-1 rounded-lg bg-canvas shadow-lg ring-1 ring-border p-1">
+    <div
+      ref={ref}
+      data-testid="selection-toolbar"
+      className="inline-flex max-w-[min(24rem,calc(100vw-2rem))] items-center gap-1.5 rounded-xl border border-border/80 bg-canvas px-1.5 py-1.5 shadow-lg ring-1 ring-border/80"
+      role="toolbar"
+      aria-label="Selection actions"
+      onFocusCapture={props.onFocusCapture}
+      onBlurCapture={props.onBlurCapture}
+    >
+      <ToolbarActionButton
+        icon={<Bold className="h-3.5 w-3.5" />}
+        label="Bold selection"
+        pressed={model.boldActive}
+        disabled={formattingDisabled}
+        onClick={props.onToggleBold}
+      />
+      <ToolbarActionButton
+        icon={<Italic className="h-3.5 w-3.5" />}
+        label="Italic selection"
+        pressed={model.italicActive}
+        disabled={formattingDisabled}
+        onClick={props.onToggleItalic}
+      />
+      <ToolbarActionButton
+        icon={<Underline className="h-3.5 w-3.5" />}
+        label="Underline selection"
+        pressed={model.underlineActive}
+        disabled={formattingDisabled}
+        onClick={props.onToggleUnderline}
+      />
+
+      <div className="mx-0.5 h-4 w-px bg-border" />
+
       <Tooltip.Root>
         <Tooltip.Trigger asChild>
           <button
             type="button"
-            aria-label="Comment"
+            aria-label="Add comment from selection"
             disabled={addCommentDisabled}
+            onMouseDown={preserveEditorSelectionMouseDown}
             onClick={props.onAddComment}
-            className={`inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors text-accent hover:bg-accent-soft disabled:opacity-30 disabled:cursor-not-allowed ${focusRingClass}`}
+            className={`inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors text-accent hover:bg-accent-soft disabled:cursor-not-allowed disabled:opacity-30 ${focusRingClass}`}
           >
             <MessageSquare className="h-3.5 w-3.5" />
           </button>
@@ -41,10 +85,77 @@ export function TwSelectionToolbar(props: TwSelectionToolbarProps) {
           </Tooltip.Content>
         </Tooltip.Portal>
       </Tooltip.Root>
-      <div className="h-4 w-px bg-border mx-0.5" />
-      <span className="text-xs text-tertiary px-2 max-w-[200px] truncate">
-        {props.selectionPreview}
-      </span>
+
+      {contextLabel ? (
+        <>
+          <div className="mx-0.5 h-4 w-px bg-border" />
+          <span
+            className={`min-w-0 max-w-[11rem] truncate rounded-full px-2 py-0.5 text-[10px] font-medium tracking-[0.08em] ${
+              model.badges.some((badge) => badge.tone === "accent")
+                ? "bg-accent-soft text-accent"
+                : "bg-surface text-tertiary"
+            }`}
+          >
+            {contextLabel}
+          </span>
+        </>
+      ) : null}
     </div>
   );
+});
+
+function summarizeSelectionContext(model: SelectionToolbarModel): string | null {
+  if (model.badges.length === 0) {
+    return null;
+  }
+
+  const accentBadges = model.badges.filter((badge) => badge.tone === "accent");
+  const source = accentBadges.length > 0 ? accentBadges : model.badges;
+  const labels = source.slice(0, 2).map((badge) => badge.label.trim()).filter(Boolean);
+  if (labels.length === 0) {
+    return null;
+  }
+
+  const summary = labels.join(" · ");
+  return summary.length > 30 ? `${summary.slice(0, 27)}...` : summary;
+}
+
+interface ToolbarActionButtonProps {
+  icon: React.ReactNode;
+  label: string;
+  pressed: boolean;
+  disabled: boolean;
+  onClick?: () => void;
+}
+
+function ToolbarActionButton(props: ToolbarActionButtonProps) {
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <button
+          type="button"
+          aria-label={props.label}
+          aria-pressed={props.pressed}
+          disabled={props.disabled}
+          onMouseDown={preserveEditorSelectionMouseDown}
+          onClick={props.onClick}
+          className={`inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors disabled:cursor-not-allowed disabled:opacity-30 ${
+            props.pressed
+              ? "bg-accent-soft text-accent"
+              : "text-secondary hover:bg-surface"
+          } ${focusRingClass}`}
+        >
+          {props.icon}
+        </button>
+      </Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content
+          className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50"
+          sideOffset={6}
+        >
+          {props.label}
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  );
 }