@beyondwork/docx-react-component 1.0.53 → 1.0.54

package/src/ui-tailwind/chrome/tw-display-mode-selector.tsx

@@ -0,0 +1,136 @@
+/**
+ * Lane 6d — Slice N2: display-mode selector (P11.10).
+ *
+ * Chrome-toolbar Popover exposing Word's 4 markup display modes:
+ *   - All Markup     — every tracked change + comment highlighted
+ *   - Simple Markup  — compact indicators in the gutter, subtle spans
+ *   - No Markup      — accepted-preview: insertions inline, deletions hidden
+ *   - Original       — rejected-preview: insertions hidden, deletions as plain text
+ *
+ * Values are emitted in Word's canonical grammar (`"all-markup"` etc.).
+ * Legacy `"clean" | "simple" | "all"` values are accepted as `value`
+ * via `normalizeMarkupDisplay`, so a host that already passes the old
+ * names sees the right option highlighted without code changes.
+ */
+
+import React, { useState } from "react";
+import * as Popover from "@radix-ui/react-popover";
+import { ChevronDown, Eye, EyeOff, Highlighter, Scroll } from "lucide-react";
+
+import {
+  normalizeMarkupDisplay,
+  type MarkupDisplay,
+} from "../../ui/headless/comment-decoration-model";
+
+export type DisplayMode = "all-markup" | "simple-markup" | "no-markup" | "original";
+
+export interface TwDisplayModeSelectorProps {
+  value: MarkupDisplay;
+  onChange: (value: DisplayMode) => void;
+  disabled?: boolean;
+  "data-testid"?: string;
+}
+
+interface ModeEntry {
+  mode: DisplayMode;
+  label: string;
+  hint: string;
+  icon: React.ComponentType<{ className?: string }>;
+}
+
+const MODES: readonly ModeEntry[] = [
+  {
+    mode: "all-markup",
+    label: "All Markup",
+    hint: "Every tracked change and comment visible",
+    icon: Highlighter,
+  },
+  {
+    mode: "simple-markup",
+    label: "Simple Markup",
+    hint: "Compact indicators in the gutter",
+    icon: Scroll,
+  },
+  {
+    mode: "no-markup",
+    label: "No Markup",
+    hint: "Preview as if all changes accepted",
+    icon: Eye,
+  },
+  {
+    mode: "original",
+    label: "Original",
+    hint: "Preview as if all changes rejected",
+    icon: EyeOff,
+  },
+];
+
+export function TwDisplayModeSelector(props: TwDisplayModeSelectorProps): React.ReactElement {
+  const [open, setOpen] = useState(false);
+  const canonical = normalizeMarkupDisplay(props.value);
+  const activeEntry = MODES.find((m) => m.mode === canonical) ?? MODES[0]!;
+
+  return (
+    <Popover.Root open={open} onOpenChange={setOpen}>
+      <Popover.Trigger asChild>
+        <button
+          type="button"
+          disabled={props.disabled}
+          data-testid={props["data-testid"] ?? "display-mode-selector-trigger"}
+          aria-label={`Display mode: ${activeEntry.label}`}
+          className="inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-[11px] font-medium text-primary hover:bg-surface focus-visible:outline-none focus-visible:bg-surface disabled:opacity-50"
+        >
+          <activeEntry.icon className="h-3.5 w-3.5 text-tertiary" />
+          <span>{activeEntry.label}</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="end"
+          data-testid="display-mode-selector-content"
+        >
+          <div className="mb-1 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+            Display mode
+          </div>
+          {MODES.map((entry) => {
+            const isActive = entry.mode === canonical;
+            return (
+              <Popover.Close key={entry.mode} asChild>
+                <button
+                  type="button"
+                  role="menuitemradio"
+                  aria-checked={isActive}
+                  onClick={() => {
+                    props.onChange(entry.mode);
+                  }}
+                  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={`display-mode-option-${entry.mode}`}
+                  data-mode={entry.mode}
+                  data-active={isActive ? "true" : undefined}
+                >
+                  <entry.icon
+                    className={[
+                      "mt-0.5 h-3.5 w-3.5 shrink-0",
+                      isActive ? "text-accent" : "text-tertiary",
+                    ].join(" ")}
+                  />
+                  <span className="flex flex-col">
+                    <span className={`font-medium ${isActive ? "text-accent" : "text-primary"}`}>
+                      {entry.label}
+                    </span>
+                    <span className="text-[10px] text-secondary">{entry.hint}</span>
+                  </span>
+                </button>
+              </Popover.Close>
+            );
+          })}
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}
+
+export default TwDisplayModeSelector;

package/src/ui-tailwind/chrome/tw-empty-state.tsx

@@ -0,0 +1,76 @@
+import React, { type ReactNode } from "react";
+
+export interface TwEmptyStateProps {
+  icon?: ReactNode;
+  title?: string;
+  body?: string;
+  action?: { label: string; onClick: () => void };
+  className?: string;
+}
+
+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 TwEmptyState(props: TwEmptyStateProps): React.JSX.Element {
+  const { icon, title, body, action, className } = props;
+
+  const containerClass = [
+    "rounded-[var(--radius-lg)]",
+    "bg-[var(--color-bg-muted)]",
+    "ring-1 ring-[var(--color-border-subtle)]/40",
+    "px-4 py-5",
+    "flex flex-col items-center text-center gap-1.5",
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <div
+      className={containerClass}
+      data-testid="tw-empty-state"
+    >
+      {icon !== undefined && (
+        <span
+          className="h-5 w-5 text-[var(--color-text-tertiary)]"
+          data-testid="tw-empty-state__icon"
+          aria-hidden="true"
+        >
+          {icon}
+        </span>
+      )}
+      {title !== undefined && (
+        <p
+          className="text-[13px] font-semibold text-[var(--color-text-primary)]"
+          data-testid="tw-empty-state__title"
+        >
+          {title}
+        </p>
+      )}
+      {body !== undefined && (
+        <p
+          className="text-[12px] text-[var(--color-text-tertiary)] leading-snug"
+          data-testid="tw-empty-state__body"
+        >
+          {body}
+        </p>
+      )}
+      {action !== undefined && (
+        <button
+          type="button"
+          className={[
+            "mt-1 inline-flex items-center h-7 rounded-[var(--radius-sm)]",
+            "border border-[var(--color-border-default)] bg-[var(--color-bg-canvas)]",
+            "px-3 text-[12px] font-medium text-[var(--color-text-primary)]",
+            "hover:bg-[var(--color-bg-hover)]",
+            focusRingClass,
+          ].join(" ")}
+          data-testid="tw-empty-state__action"
+          onClick={action.onClick}
+        >
+          {action.label}
+        </button>
+      )}
+    </div>
+  );
+}

package/src/ui-tailwind/chrome/tw-image-context-toolbar.tsx

@@ -30,7 +30,7 @@ export function TwImageContextToolbar(props: TwImageContextToolbarProps) {
   return (
     <div
       data-testid="image-context-toolbar"
-      className="flex flex-wrap items-center gap-1.5 rounded-lg border border-border bg-canvas px-2.5 py-1.5 shadow-sm"
+      className="flex flex-wrap items-center gap-1.5 rounded-[var(--radius-lg)] border border-[var(--color-border-subtle)] bg-[var(--color-bg-canvas)] px-2.5 py-1.5 shadow-[var(--shadow-float)]"
     >
       <span className="text-[9px] font-semibold uppercase tracking-[0.12em] text-tertiary">
         Image
@@ -38,20 +38,34 @@ export function TwImageContextToolbar(props: TwImageContextToolbarProps) {
       <span className="rounded-full bg-surface px-1.5 py-0.5 text-[9px] font-medium uppercase tracking-[0.1em] text-secondary">
         {activeImage.display}
       </span>
-      {IMAGE_SIZE_PRESETS.map((preset) => (
-        <ToolbarButton
-          key={preset.label}
-          ariaLabel={preset.label}
-          disabled={props.disabled || !props.onSetImageLayout}
-          onClick={() =>
-            props.onSetImageLayout?.(activeImage.mediaId, {
-              widthEmu: preset.widthEmu,
-              heightEmu: preset.heightEmu,
-            })}
-        >
-          {preset.label.replace(" image", "")}
-        </ToolbarButton>
-      ))}
+      <div role="group" aria-label="Image size" className="inline-flex items-center rounded-[var(--radius-sm)] bg-[var(--color-bg-muted)] p-0.5">
+        {IMAGE_SIZE_PRESETS.map((preset) => {
+          const isActive =
+            activeImage.widthEmu === preset.widthEmu &&
+            activeImage.heightEmu === preset.heightEmu;
+          const shortLabel = preset.label.replace(" image", "");
+          return (
+            <button
+              key={preset.label}
+              type="button"
+              aria-pressed={isActive}
+              aria-label={preset.label}
+              disabled={props.disabled || !props.onSetImageLayout}
+              onMouseDown={preserveEditorSelectionMouseDown}
+              onClick={() =>
+                props.onSetImageLayout?.(activeImage.mediaId, {
+                  widthEmu: preset.widthEmu,
+                  heightEmu: preset.heightEmu,
+                })}
+              className={`inline-flex h-6 items-center px-2 text-[11px] font-medium rounded-[var(--radius-sm)] transition-colors disabled:cursor-not-allowed disabled:opacity-40
+                aria-pressed:bg-[var(--color-bg-selected)] aria-pressed:text-[var(--color-accent-primary)]
+                text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]`}
+            >
+              {shortLabel}
+            </button>
+          );
+        })}
+      </div>
       {activeImage.display === "floating" ? (
         <>
           <ToolbarButton
@@ -113,7 +127,7 @@ function ToolbarButton(props: {
       disabled={props.disabled}
       onMouseDown={preserveEditorSelectionMouseDown}
       onClick={props.onClick}
-      className="inline-flex h-7 items-center rounded-md px-2 text-[11px] font-medium text-primary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40"
+      className="inline-flex h-7 items-center rounded-md px-2 text-[11px] font-medium text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-accent-soft)] disabled:cursor-not-allowed disabled:opacity-40"
     >
       {props.children}
     </button>

package/src/ui-tailwind/chrome/tw-object-context-toolbar.tsx

@@ -5,13 +5,31 @@ export interface TwObjectContextToolbarProps {
   activeObject: ActiveObjectContext;
 }
 
+function InfoIcon(props: { className?: string; "aria-hidden"?: boolean }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+      className={props.className}
+      aria-hidden={props["aria-hidden"]}
+    >
+      <path
+        fillRule="evenodd"
+        d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}
+
 export function TwObjectContextToolbar(props: TwObjectContextToolbarProps) {
   const label = props.activeObject.kind === "textbox" ? "Text box" : "Shape";
 
   return (
     <div
       data-testid="object-context-toolbar"
-      className="flex flex-wrap items-center gap-1.5 rounded-lg border border-border bg-canvas px-2.5 py-1.5 shadow-sm"
+      className="flex flex-wrap items-center gap-1.5 rounded-[var(--radius-lg)] border border-[var(--color-border-subtle)] bg-[var(--color-bg-canvas)] px-2.5 py-1.5 shadow-[var(--shadow-float)]"
     >
       <span className="text-[9px] font-semibold uppercase tracking-[0.12em] text-tertiary">
         Object
@@ -22,9 +40,10 @@ export function TwObjectContextToolbar(props: TwObjectContextToolbarProps) {
       <span className="rounded-full bg-surface px-1.5 py-0.5 text-[9px] font-medium uppercase tracking-[0.1em] text-secondary">
         {props.activeObject.display}
       </span>
-      <span className="text-[11px] text-secondary">
-        Object selection is active.
-      </span>
+      <div className="inline-flex items-center gap-1.5">
+        <InfoIcon className="h-3.5 w-3.5 text-[var(--color-semantic-info)]" aria-hidden={true} />
+        <span className="text-[11px] text-[var(--color-text-secondary)]">Shape preserved for export — opens in Word.</span>
+      </div>
     </div>
   );
 }

package/src/ui-tailwind/chrome/tw-paste-drop-toast.tsx

@@ -0,0 +1,113 @@
+import React, { useEffect, useState } from "react";
+import { AlertTriangle } from "lucide-react";
+
+export interface TwPasteDropToastProps {
+  /**
+   * Current blocked-input payload.  When it changes to a non-null value
+   * the toast renders and self-dismisses after `durationMs`.  Pass a
+   * fresh object (not the same reference) for each new event — the
+   * identity change triggers the timer.
+   */
+  event: {
+    command: "paste" | "drop";
+    message: string;
+    /**
+     * Optional unique id per event so repeated events with the same
+     * command / message still re-trigger the toast.  Defaults to the
+     * current time when unset.
+     */
+    eventId?: string;
+  } | null;
+  /** How long the toast stays visible, in ms (default 3000). */
+  durationMs?: number;
+  /** Called when the toast fades out. */
+  onDismiss?: () => void;
+  className?: string;
+}
+
+/**
+ * TwPasteDropToast — non-blocking bottom-right toast surfaced when the
+ * runtime refuses a paste / drop input (Lane 6b §6b.U7).
+ *
+ * Host wiring pattern (see `src/ui-tailwind/editor-surface/tw-prosemirror-
+ * surface.tsx`):
+ *
+ *     const [blockedInput, setBlockedInput] = useState(null);
+ *     // Wire the surface callback → state:
+ *     onBlockedInput={(command, message) =>
+ *       setBlockedInput({ command, message, eventId: String(Date.now()) })
+ *     }
+ *
+ *     // Mount the toast once in the shell zone:
+ *     <TwPasteDropToast
+ *       event={blockedInput}
+ *       onDismiss={() => setBlockedInput(null)}
+ *     />
+ *
+ * All colours / shadow / radius / motion bind Lane 6a tokens.  Severity
+ * is treated as `warning` (semantic-warning-soft bg + semantic-warning
+ * glyph) — the input was refused, not dropped to the floor.
+ */
+export function TwPasteDropToast(
+  props: TwPasteDropToastProps,
+): React.ReactElement | null {
+  // Start visible on any non-null event so SSR renders the toast.  Auto-
+  // dismiss runs client-side via setTimeout after `durationMs`.
+  const [dismissed, setDismissed] = useState(false);
+  const duration = props.durationMs ?? 3000;
+  const eventKey = props.event
+    ? `${props.event.command}:${props.event.eventId ?? props.event.message}`
+    : null;
+
+  useEffect(() => {
+    if (!props.event) {
+      setDismissed(false);
+      return;
+    }
+    setDismissed(false);
+    const handle = setTimeout(() => {
+      setDismissed(true);
+      props.onDismiss?.();
+    }, duration);
+    return () => clearTimeout(handle);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [eventKey, duration]);
+
+  if (!props.event || dismissed) return null;
+
+  const label =
+    props.event.command === "paste" ? "Paste blocked" : "Drop blocked";
+
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      data-testid="tw-paste-drop-toast"
+      data-command={props.event.command}
+      className={[
+        "fixed bottom-4 right-4 z-50",
+        "inline-flex items-start gap-3",
+        "max-w-sm px-3 py-2",
+        "rounded-[var(--radius-sm)]",
+        "bg-[var(--color-semantic-warning-soft)] text-[var(--color-semantic-warning)]",
+        "shadow-[var(--shadow-float)]",
+        "border border-[var(--color-border-subtle)]",
+        "transition-opacity duration-[var(--motion-default)]",
+        props.className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      <AlertTriangle
+        className="mt-0.5 h-4 w-4 shrink-0"
+        aria-hidden="true"
+      />
+      <div className="min-w-0 flex-1">
+        <div className="text-xs font-semibold">{label}</div>
+        <div className="mt-0.5 text-[11px] text-[var(--color-text-secondary)]">
+          {props.event.message}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/ui-tailwind/chrome/tw-revision-hover-preview.tsx

@@ -0,0 +1,150 @@
+/**
+ * Lane 6d — Slice N4: revision hover preview (P11.12).
+ *
+ * Wrapper that renders its children unchanged, but attaches a
+ * 250 ms-delayed Radix Popover showing a compact summary card for a
+ * tracked change:
+ *   - Author display name (optionally colored by N3's palette index)
+ *   - Relative timestamp (e.g. "3 hours ago")
+ *   - Kind label ("Inserted", "Deleted", "Formatting")
+ *   - Short excerpt of the affected text
+ *
+ * Re-entering the Popover.Content keeps it open so the reviewer can
+ * click through to the change card.  When `hidden` is true (e.g. the
+ * host is in `no-markup` display mode) the wrapper passes its children
+ * through without attaching the popover at all.
+ */
+
+import React, { useCallback, useRef, useState } from "react";
+import * as Popover from "@radix-ui/react-popover";
+
+import {
+  AUTHOR_PALETTE,
+  getAuthorColor,
+} from "../../ui/headless/revision-decoration-model";
+
+export const HOVER_DELAY_MS = 250;
+
+export type RevisionKind = "insertion" | "deletion" | "formatting";
+
+export interface TwRevisionHoverPreviewProps {
+  /** Stable id for the tracked change — used as the Popover's aria key. */
+  revisionId: string;
+  authorId?: string;
+  authorDisplayName?: string;
+  /** Relative-time string (e.g. "3 hours ago"); rendered verbatim. */
+  relativeTime?: string;
+  kind: RevisionKind;
+  excerpt?: string;
+  /**
+   * When true, pass children through without the popover wrapper.
+   * Hosts set this when `markupDisplay === "no-markup"` or when
+   * hovering previews would be noisy (selection active, print preview,
+   * etc).
+   */
+  hidden?: boolean;
+  children: React.ReactNode;
+}
+
+const KIND_LABEL: Record<RevisionKind, string> = {
+  insertion: "Inserted",
+  deletion: "Deleted",
+  formatting: "Formatting change",
+};
+
+export function TwRevisionHoverPreview(props: TwRevisionHoverPreviewProps): React.ReactElement {
+  const { hidden, children } = props;
+  const [open, setOpen] = useState(false);
+  const openTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const cancelTimer = useCallback(() => {
+    if (openTimerRef.current !== null) {
+      clearTimeout(openTimerRef.current);
+      openTimerRef.current = null;
+    }
+  }, []);
+
+  const handleMouseEnter = useCallback(() => {
+    cancelTimer();
+    openTimerRef.current = setTimeout(() => {
+      setOpen(true);
+      openTimerRef.current = null;
+    }, HOVER_DELAY_MS);
+  }, [cancelTimer]);
+
+  const handleMouseLeave = useCallback(() => {
+    cancelTimer();
+    // Defer close so moving onto the Popover.Content keeps it open.
+    openTimerRef.current = setTimeout(() => {
+      setOpen(false);
+      openTimerRef.current = null;
+    }, 80);
+  }, [cancelTimer]);
+
+  if (hidden) {
+    return <>{children}</>;
+  }
+
+  const authorColor = getAuthorColor(props.authorId);
+  const author = props.authorDisplayName ?? props.authorId ?? "Unknown author";
+
+  return (
+    <Popover.Root open={open} onOpenChange={setOpen}>
+      <Popover.Trigger asChild>
+        <span
+          data-revision-id={props.revisionId}
+          data-revision-hover-trigger=""
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+        >
+          {children}
+        </span>
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content
+          role="dialog"
+          aria-label={`Revision by ${author}`}
+          className="wre-revision-hover-card z-50 w-[280px] rounded-[var(--radius-card,8px)] bg-[var(--color-card,var(--color-surface))] p-3 text-[11px] shadow-[var(--shadow-soft)] ring-1 ring-[var(--color-border-default)]"
+          sideOffset={6}
+          onMouseEnter={cancelTimer}
+          onMouseLeave={handleMouseLeave}
+          data-testid="revision-hover-preview-content"
+        >
+          <div className="flex items-center gap-2">
+            {authorColor ? (
+              <span
+                aria-hidden="true"
+                data-kind="author-swatch"
+                style={{
+                  display: "inline-block",
+                  width: "10px",
+                  height: "10px",
+                  borderRadius: "var(--radius-pill)",
+                  backgroundColor: authorColor,
+                }}
+              />
+            ) : null}
+            <span className="font-medium text-primary">{author}</span>
+            {props.relativeTime ? (
+              <span className="text-tertiary">· {props.relativeTime}</span>
+            ) : null}
+          </div>
+          <div className="mt-1 text-tertiary">{KIND_LABEL[props.kind]}</div>
+          {props.excerpt ? (
+            <div className="mt-2 rounded bg-[var(--color-surface)] p-2 text-secondary">
+              {props.excerpt}
+            </div>
+          ) : null}
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}
+
+/**
+ * Exported for tests — guards against the palette drifting out of
+ * sync with the hover-preview swatch.
+ */
+export { AUTHOR_PALETTE };
+
+export default TwRevisionHoverPreview;

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

@@ -14,6 +14,7 @@ export interface TwSelectionToolFormattingProps {
   onSetTextColor?: (color: string) => void;
   onSetHighlightColor?: (color: string | null) => void;
   onAddComment?: () => void;
+  density?: "micro" | "full";
 }
 
 export const TwSelectionToolFormatting = forwardRef<HTMLDivElement, TwSelectionToolFormattingProps>(
@@ -31,6 +32,7 @@ export const TwSelectionToolFormatting = forwardRef<HTMLDivElement, TwSelectionT
         onSetTextColor={props.onSetTextColor}
         onSetHighlightColor={props.onSetHighlightColor}
         onAddComment={props.onAddComment}
+        density={props.density}
       />
     );
   },

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

@@ -1,4 +1,4 @@
-import React, { useCallback, type CSSProperties, type FocusEventHandler, type Ref } from "react";
+import React, { useCallback, useEffect, useState, type CSSProperties, type FocusEventHandler, type Ref } from "react";
 
 import type {
   ChromePinsState,
@@ -73,7 +73,41 @@ export interface TwSelectionToolHostProps {
   onSetCellVerticalAlign?: (align: "top" | "center" | "bottom") => void;
 }
 
+/**
+ * Dwell promotion: starts at "micro" on selection change, promotes to
+ * "full" after 150ms of selection stability.  Keyed on the tool kind and
+ * previewText so that a new selection (which produces a new previewText)
+ * resets the timer.  Pure re-renders with the same selection do not reset.
+ */
+function useDwellDensity(tool: ActiveSelectionToolModel | null): "micro" | "full" {
+  // Derive a stable selection key from the tool.  For formatting-inline we
+  // use the previewText (reflects selected content).  For other kinds we use
+  // a fixed sentinel so they never reset mid-render.
+  const selectionKey = tool
+    ? `${tool.kind}:${tool.previewText ?? "none"}`
+    : null;
+  const [density, setDensity] = useState<"micro" | "full">("micro");
+
+  useEffect(() => {
+    if (selectionKey === null) {
+      setDensity("micro");
+      return;
+    }
+    setDensity("micro");
+    const handle = window.setTimeout(() => {
+      setDensity("full");
+    }, 150);
+    return () => {
+      window.clearTimeout(handle);
+    };
+  }, [selectionKey]);
+
+  return density;
+}
+
 export function TwSelectionToolHost(props: TwSelectionToolHostProps) {
+  const density = useDwellDensity(props.tool);
+
   if (!props.tool) {
     return null;
   }
@@ -96,7 +130,7 @@ export function TwSelectionToolHost(props: TwSelectionToolHostProps) {
   );
 
   const overlayTestId = getOverlayTestId(props.tool.kind, Boolean(props.placement));
-  const toolContent = renderTool(props, props.tool);
+  const toolContent = renderTool(props, props.tool, density);
   const content = toolContent ? (
     <div
       ref={props.rootRef}
@@ -185,6 +219,7 @@ export function TwSelectionToolHost(props: TwSelectionToolHostProps) {
 function renderTool(
   props: TwSelectionToolHostProps,
   tool: ActiveSelectionToolModel,
+  density: "micro" | "full",
 ): React.ReactNode {
   switch (tool.kind) {
     case "formatting-inline":
@@ -197,6 +232,7 @@ function renderTool(
           onSetTextColor={props.onSetTextColor}
           onSetHighlightColor={props.onSetHighlightColor}
           onAddComment={props.onAddComment}
+          density={density}
         />
       );
     case "suggestion-review":