@beyondwork/docx-react-component 1.0.29 → 1.0.30

package/src/ui-tailwind/chrome/tw-selection-tool-host.tsx

@@ -0,0 +1,298 @@
+import React, { useEffect, useRef, useState, type CSSProperties, type FocusEventHandler, type Ref } from "react";
+
+import { GripHorizontal } from "lucide-react";
+
+import type { RuntimeContextAnalyticsSnapshot } from "../../api/public-types";
+import type { ActiveSelectionToolModel } from "../../ui/headless/selection-tool-types";
+import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
+import { TwContextAnalyticsSummary } from "./tw-context-analytics-summary";
+import { TwSelectionToolBlocked } from "./tw-selection-tool-blocked";
+import { TwSelectionToolComment } from "./tw-selection-tool-comment";
+import { TwSelectionToolFormatting } from "./tw-selection-tool-formatting";
+import { TwSelectionToolStructure } from "./tw-selection-tool-structure";
+import { TwSelectionToolSuggestion } from "./tw-selection-tool-suggestion";
+import { TwSelectionToolWorkflow } from "./tw-selection-tool-workflow";
+
+export interface SelectionToolPlacement {
+  placement: "right" | "left" | "above" | "below";
+  style: CSSProperties;
+}
+
+export interface TwSelectionToolHostProps {
+  tool: ActiveSelectionToolModel | null;
+  contextAnalytics?: RuntimeContextAnalyticsSnapshot | null;
+  placement: SelectionToolPlacement | null;
+  rootRef?: Ref<HTMLDivElement>;
+  onFocusCapture?: FocusEventHandler<HTMLDivElement>;
+  onBlurCapture?: FocusEventHandler<HTMLDivElement>;
+  onToggleBold?: () => void;
+  onToggleItalic?: () => void;
+  onToggleUnderline?: () => void;
+  onSetTextColor?: (color: string) => void;
+  onSetHighlightColor?: (color: string | null) => void;
+  onAddComment?: () => void;
+  onAcceptSuggestion?: () => void;
+  onRejectSuggestion?: () => void;
+  onEditSuggestion?: () => void;
+  onSetTableStyle?: (styleId: string) => void;
+  onAddRowBefore?: () => void;
+  onAddRowAfter?: () => void;
+  onAddColumnBefore?: () => void;
+  onAddColumnAfter?: () => void;
+  onDeleteRow?: () => void;
+  onDeleteColumn?: () => void;
+  onDeleteTable?: () => void;
+  onMergeCells?: () => void;
+  onSplitCell?: () => void;
+  onSetCellBackground?: (color: string) => void;
+  onSetImageLayout?: (
+    mediaId: string,
+    dimensions: { widthEmu: number; heightEmu: number },
+  ) => void;
+  onSetImageFrame?: (
+    mediaId: string,
+    offsets: { horizontalOffsetEmu?: number; verticalOffsetEmu?: number },
+  ) => void;
+  onRestartNumbering?: () => void;
+  onContinueNumbering?: () => void;
+}
+
+export function TwSelectionToolHost(props: TwSelectionToolHostProps) {
+  if (!props.tool) {
+    return null;
+  }
+
+  const [isDetached, setIsDetached] = useState(false);
+  const [detachedOffset, setDetachedOffset] = useState({ x: 0, y: 0 });
+  const dragStateRef = useRef<{
+    startX: number;
+    startY: number;
+    originX: number;
+    originY: number;
+  } | null>(null);
+  const supportsTopMenuControls = isTopMenuKind(props.tool.kind);
+
+  useEffect(() => {
+    setIsDetached(false);
+    setDetachedOffset({ x: 0, y: 0 });
+    dragStateRef.current = null;
+  }, [props.tool.kind]);
+
+  useEffect(() => {
+    if (!supportsTopMenuControls || typeof window === "undefined") {
+      return;
+    }
+
+    const handleMouseMove = (event: MouseEvent) => {
+      if (!dragStateRef.current) {
+        return;
+      }
+      setDetachedOffset({
+        x: dragStateRef.current.originX + (event.clientX - dragStateRef.current.startX),
+        y: dragStateRef.current.originY + (event.clientY - dragStateRef.current.startY),
+      });
+    };
+
+    const handleMouseUp = () => {
+      dragStateRef.current = null;
+    };
+
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [supportsTopMenuControls]);
+
+  const overlayTestId = getOverlayTestId(props.tool.kind, Boolean(props.placement));
+  const toolContent = renderTool(props, props.tool);
+  const content = toolContent ? (
+    <div
+      ref={props.rootRef}
+      onFocusCapture={props.onFocusCapture}
+      onBlurCapture={props.onBlurCapture}
+      className="flex flex-col gap-2"
+    >
+      {props.contextAnalytics ? (
+        <TwContextAnalyticsSummary
+          snapshot={props.contextAnalytics}
+          compact
+          testId="selection-context-analytics"
+        />
+      ) : null}
+      {toolContent}
+    </div>
+  ) : null;
+  const wrappedContent = content && supportsTopMenuControls ? (
+    <div className="flex flex-col gap-1.5">
+      <div className="inline-flex items-center gap-2 self-center rounded-xl border border-border/70 bg-canvas/94 px-2 py-1.5 shadow-[0_8px_20px_-18px_var(--color-shadow-strong)]">
+        <button
+          type="button"
+          aria-label="Drag top menu"
+          data-testid="selection-tool-drag-handle"
+          className="inline-flex h-7 items-center justify-center rounded-lg border border-transparent px-2 text-tertiary transition-colors hover:border-border/60 hover:bg-surface hover:text-primary"
+          onMouseDown={(event) => {
+            preserveEditorSelectionMouseDown(event);
+            setIsDetached(true);
+            dragStateRef.current = {
+              startX: event.clientX,
+              startY: event.clientY,
+              originX: isDetached ? detachedOffset.x : 0,
+              originY: isDetached ? detachedOffset.y : 0,
+            };
+          }}
+        >
+          <GripHorizontal className="h-3.5 w-3.5" />
+        </button>
+        <span className="text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+          {getTopMenuLabel(props.tool.kind)}
+        </span>
+        <button
+          type="button"
+          data-testid="selection-tool-attach-toggle"
+          className="inline-flex h-7 items-center rounded-lg border border-border/60 px-2.5 text-[11px] font-medium text-secondary transition-colors hover:bg-surface hover:text-primary"
+          onMouseDown={preserveEditorSelectionMouseDown}
+          onClick={() => {
+            setIsDetached((current) => !current);
+          }}
+        >
+          {isDetached ? "Attach menu" : "Detach menu"}
+        </button>
+      </div>
+      {content}
+    </div>
+  ) : content;
+
+  if (!wrappedContent) {
+    return null;
+  }
+
+  if (isDetached) {
+    return (
+      <div className="pointer-events-none absolute inset-0 z-20" data-testid={overlayTestId}>
+        <div
+          className="pointer-events-auto absolute"
+          data-placement="detached"
+          style={{
+            left: `calc(50% + ${detachedOffset.x}px)`,
+            top: `${12 + detachedOffset.y}px`,
+            transform: "translateX(-50%)",
+          }}
+        >
+          {wrappedContent}
+        </div>
+      </div>
+    );
+  }
+
+  if (props.placement) {
+    return (
+      <div className="pointer-events-none absolute inset-0 z-20" data-testid={overlayTestId}>
+        <div
+          className="pointer-events-auto absolute"
+          data-placement={props.placement.placement}
+          style={props.placement.style}
+        >
+          {wrappedContent}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="pointer-events-none absolute inset-x-0 top-0 z-20 flex justify-center px-4 pt-3"
+      data-testid={overlayTestId}
+    >
+      <div className="pointer-events-auto" data-placement="fallback">
+        {wrappedContent}
+      </div>
+    </div>
+  );
+}
+
+function renderTool(
+  props: TwSelectionToolHostProps,
+  tool: ActiveSelectionToolModel,
+): React.ReactNode {
+  switch (tool.kind) {
+    case "formatting-inline":
+      return (
+        <TwSelectionToolFormatting
+          model={tool}
+          onToggleBold={props.onToggleBold}
+          onToggleItalic={props.onToggleItalic}
+          onToggleUnderline={props.onToggleUnderline}
+          onSetTextColor={props.onSetTextColor}
+          onSetHighlightColor={props.onSetHighlightColor}
+          onAddComment={props.onAddComment}
+        />
+      );
+    case "suggestion-review":
+      return (
+        <TwSelectionToolSuggestion
+          model={tool}
+          onAccept={props.onAcceptSuggestion}
+          onReject={props.onRejectSuggestion}
+          onEditSuggestion={props.onEditSuggestion}
+          onAddComment={props.onAddComment}
+        />
+      );
+    case "structure-context":
+      return (
+        <TwSelectionToolStructure
+          model={tool}
+          onSetTableStyle={props.onSetTableStyle}
+          onAddRowBefore={props.onAddRowBefore}
+          onAddRowAfter={props.onAddRowAfter}
+          onAddColumnBefore={props.onAddColumnBefore}
+          onAddColumnAfter={props.onAddColumnAfter}
+          onDeleteRow={props.onDeleteRow}
+          onDeleteColumn={props.onDeleteColumn}
+          onDeleteTable={props.onDeleteTable}
+          onMergeCells={props.onMergeCells}
+          onSplitCell={props.onSplitCell}
+          onSetCellBackground={props.onSetCellBackground}
+          onSetImageLayout={props.onSetImageLayout}
+          onSetImageFrame={props.onSetImageFrame}
+          onRestartNumbering={props.onRestartNumbering}
+          onContinueNumbering={props.onContinueNumbering}
+        />
+      );
+    case "comment-thread":
+      return <TwSelectionToolComment model={tool} onAddComment={props.onAddComment} />;
+    case "workflow-task":
+      return <TwSelectionToolWorkflow model={tool} />;
+    case "blocked-explainer":
+      return <TwSelectionToolBlocked model={tool} />;
+  }
+}
+
+function getOverlayTestId(kind: ActiveSelectionToolModel["kind"], hasPlacement: boolean): string {
+  switch (kind) {
+    case "suggestion-review":
+      return hasPlacement ? "suggestion-card-overlay" : "suggestion-card-fallback";
+    case "formatting-inline":
+      return hasPlacement ? "selection-toolbar-overlay" : "selection-toolbar-fallback";
+    default:
+      return hasPlacement ? "selection-tool-overlay" : "selection-tool-fallback";
+  }
+}
+
+function isTopMenuKind(kind: ActiveSelectionToolModel["kind"]): boolean {
+  return kind === "formatting-inline" || kind === "suggestion-review" || kind === "workflow-task";
+}
+
+function getTopMenuLabel(kind: ActiveSelectionToolModel["kind"]): string {
+  switch (kind) {
+    case "formatting-inline":
+      return "Formatting";
+    case "suggestion-review":
+      return "Suggestion";
+    case "workflow-task":
+      return "Workflow";
+    default:
+      return "Menu";
+  }
+}

package/src/ui-tailwind/chrome/tw-selection-tool-structure.tsx

@@ -0,0 +1,116 @@
+import React from "react";
+
+import type { StructureContextSelectionToolModel } from "../../ui/headless/selection-tool-types";
+import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
+import { TwImageContextToolbar } from "./tw-image-context-toolbar";
+import { TwObjectContextToolbar } from "./tw-object-context-toolbar";
+import { TwTableContextToolbar } from "./tw-table-context-toolbar";
+
+export interface TwSelectionToolStructureProps {
+  model: StructureContextSelectionToolModel;
+  onSetTableStyle?: (styleId: string) => void;
+  onAddRowBefore?: () => void;
+  onAddRowAfter?: () => void;
+  onAddColumnBefore?: () => void;
+  onAddColumnAfter?: () => void;
+  onDeleteRow?: () => void;
+  onDeleteColumn?: () => void;
+  onDeleteTable?: () => void;
+  onMergeCells?: () => void;
+  onSplitCell?: () => void;
+  onSetCellBackground?: (color: string) => void;
+  onSetImageLayout?: (
+    mediaId: string,
+    dimensions: { widthEmu: number; heightEmu: number },
+  ) => void;
+  onSetImageFrame?: (
+    mediaId: string,
+    offsets: { horizontalOffsetEmu?: number; verticalOffsetEmu?: number },
+  ) => void;
+  onRestartNumbering?: () => void;
+  onContinueNumbering?: () => void;
+}
+
+export function TwSelectionToolStructure(props: TwSelectionToolStructureProps) {
+  switch (props.model.structureKind) {
+    case "image":
+      return props.model.activeImage ? (
+        <TwImageContextToolbar
+          activeImage={props.model.activeImage}
+          disabled={!props.model.canMutate}
+          onSetImageLayout={props.onSetImageLayout}
+          onSetImageFrame={props.onSetImageFrame}
+        />
+      ) : null;
+    case "object":
+      // Shapes and text boxes are shipped as informational-only structure tools
+      // until there is a real runtime-backed object mutation path.
+      return props.model.activeObject ? (
+        <TwObjectContextToolbar activeObject={props.model.activeObject} />
+      ) : null;
+    case "table":
+      return (
+        <TwTableContextToolbar
+          disabled={!props.model.canMutate}
+          tableContext={props.model.activeTable ?? null}
+          tableStyles={props.model.tableStyles ?? []}
+          onSetTableStyle={props.onSetTableStyle}
+          onAddRowBefore={props.onAddRowBefore}
+          onAddRowAfter={props.onAddRowAfter}
+          onAddColumnBefore={props.onAddColumnBefore}
+          onAddColumnAfter={props.onAddColumnAfter}
+          onDeleteRow={props.onDeleteRow}
+          onDeleteColumn={props.onDeleteColumn}
+          onDeleteTable={props.onDeleteTable}
+          onMergeCells={props.onMergeCells}
+          onSplitCell={props.onSplitCell}
+          onSetCellBackground={props.onSetCellBackground}
+        />
+      );
+    case "list":
+      return (
+        <div
+          data-testid="list-context-toolbar"
+          className="flex flex-wrap items-center gap-2 rounded-xl border border-border bg-canvas px-3 py-2 shadow-sm"
+        >
+          <span className="text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+            List
+          </span>
+          <ToolbarButton
+            ariaLabel="Continue numbering"
+            disabled={!props.model.canMutate || !props.onContinueNumbering}
+            onClick={props.onContinueNumbering}
+          >
+            Continue
+          </ToolbarButton>
+          <ToolbarButton
+            ariaLabel="Restart numbering"
+            disabled={!props.model.canMutate || !props.onRestartNumbering}
+            onClick={props.onRestartNumbering}
+          >
+            Restart
+          </ToolbarButton>
+        </div>
+      );
+  }
+}
+
+function ToolbarButton(props: {
+  ariaLabel: string;
+  disabled: boolean;
+  onClick?: () => void;
+  children: React.ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      aria-label={props.ariaLabel}
+      disabled={props.disabled}
+      onMouseDown={preserveEditorSelectionMouseDown}
+      onClick={props.onClick}
+      className="inline-flex h-8 items-center rounded-lg border border-border px-2.5 text-xs font-medium text-secondary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40"
+    >
+      {props.children}
+    </button>
+  );
+}

package/src/ui-tailwind/chrome/tw-selection-tool-suggestion.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import type { FocusEventHandler } from "react";
+
+import type { SuggestionReviewSelectionToolModel } from "../../ui/headless/selection-tool-types";
+import { TwSuggestionCard } from "./tw-suggestion-card";
+
+export interface TwSelectionToolSuggestionProps {
+  model: SuggestionReviewSelectionToolModel;
+  onFocusCapture?: FocusEventHandler<HTMLDivElement>;
+  onBlurCapture?: FocusEventHandler<HTMLDivElement>;
+  onAccept?: () => void;
+  onReject?: () => void;
+  onEditSuggestion?: () => void;
+  onAddComment?: () => void;
+}
+
+export function TwSelectionToolSuggestion(props: TwSelectionToolSuggestionProps) {
+  return (
+    <TwSuggestionCard
+      model={props.model}
+      onFocusCapture={props.onFocusCapture}
+      onBlurCapture={props.onBlurCapture}
+      onAccept={props.onAccept}
+      onReject={props.onReject}
+      onEditSuggestion={props.onEditSuggestion}
+      onAddComment={props.onAddComment}
+    />
+  );
+}

package/src/ui-tailwind/chrome/tw-selection-tool-workflow.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+import type { WorkflowTaskSelectionToolModel } from "../../ui/headless/selection-tool-types";
+
+export interface TwSelectionToolWorkflowProps {
+  model: WorkflowTaskSelectionToolModel;
+}
+
+export function TwSelectionToolWorkflow(props: TwSelectionToolWorkflowProps) {
+  return (
+    <div
+      data-testid="workflow-task-selection-tool"
+      className="max-w-[min(24rem,calc(100vw-2rem))] rounded-xl border border-border bg-canvas px-3 py-2 shadow-lg"
+    >
+      <div className="text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+        Workflow task
+      </div>
+      <div className="mt-1 text-sm text-primary">{props.model.workflowTitle ?? "Scoped task"}</div>
+      {props.model.workflowDetail ? (
+        <div className="mt-1 text-xs text-secondary">{props.model.workflowDetail}</div>
+      ) : null}
+      {props.model.disabledReason ? (
+        <div className="mt-2 text-xs text-tertiary">{props.model.disabledReason}</div>
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,186 @@
+import React, { forwardRef } from "react";
+import type { FocusEventHandler } from "react";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { Baseline, Bold, Highlighter, 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 {
+  model: SelectionToolbarModel;
+  disabledReason?: string;
+  onFocusCapture?: FocusEventHandler<HTMLDivElement>;
+  onBlurCapture?: FocusEventHandler<HTMLDivElement>;
+  onToggleBold?: () => void;
+  onToggleItalic?: () => void;
+  onToggleUnderline?: () => void;
+  onSetTextColor?: (color: string) => void;
+  onSetHighlightColor?: (color: string | null) => 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 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
+      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}
+      />
+      <ToolbarActionButton
+        icon={<Baseline className="h-3.5 w-3.5" />}
+        label="Text color blue"
+        pressed={false}
+        disabled={formattingDisabled}
+        onClick={() => props.onSetTextColor?.("#1660a8")}
+      />
+      <ToolbarActionButton
+        icon={<Highlighter className="h-3.5 w-3.5" />}
+        label="Highlight yellow"
+        pressed={false}
+        disabled={formattingDisabled}
+        onClick={() => props.onSetHighlightColor?.("#ffff00")}
+      />
+
+      <div className="mx-0.5 h-4 w-px bg-border" />
+
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          <button
+            type="button"
+            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-surface disabled:cursor-not-allowed disabled:opacity-30 ${focusRingClass}`}
+          >
+            <MessageSquare className="h-3.5 w-3.5" />
+          </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}
+          >
+            {tooltipLabel}
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+
+      {model.previewText ? (
+        <>
+          <div className="mx-0.5 h-4 w-px bg-border" />
+          <span className="max-w-[8rem] truncate text-[11px] text-secondary">
+            {model.previewText}
+          </span>
+        </>
+      ) : null}
+
+      {contextLabel ? (
+        <>
+          {!model.previewText ? <div className="mx-0.5 h-4 w-px bg-border" /> : null}
+          <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-canvas text-accent ring-1 ring-accent/25"
+                : "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-canvas text-accent ring-1 ring-accent/30 shadow-sm"
+              : "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>
+  );
+}