@beyondwork/docx-react-component 1.0.52 → 1.0.54

package/src/ui-tailwind/chrome/tw-selection-tool-placement.ts

@@ -43,6 +43,13 @@ export interface ResolveSelectionToolPlacementInput {
   edgePaddingPx?: number;
   /** Gap between anchor and toolbar in px.  Defaults to 12. */
   gapPx?: number;
+  /**
+   * Width of the review rail in px.  When set, the available viewport
+   * width is reduced by this amount on the right side so the toolbar
+   * never overlaps the rail.  A 1.5 rem (24px) margin is applied beyond
+   * the rail edge.  Defaults to 0 (no rail).
+   */
+  railWidthPx?: number;
 }
 
 const DEFAULT_EDGE_PADDING = 16;
@@ -79,6 +86,11 @@ export function resolveSelectionToolPlacement(
       ),
     );
 
+  // Rail-aware right boundary: viewport width minus rail width minus 1.5rem (24px) margin.
+  const RAIL_MARGIN = 24; // 1.5rem
+  const railWidthPx = input.railWidthPx ?? 0;
+  const effectiveRightEdge = container.widthPx - railWidthPx - (railWidthPx > 0 ? RAIL_MARGIN : 0);
+
   const anchorLeft = anchor.leftPx;
   const anchorRight = anchor.leftPx + anchor.widthPx;
   const anchorTop = anchor.topPx;
@@ -86,14 +98,14 @@ export function resolveSelectionToolPlacement(
   const centerX = anchorLeft + anchor.widthPx / 2;
   const centerY = anchorTop + anchor.heightPx / 2;
 
-  const rightClearance = container.widthPx - anchorRight - gapPx - edgePadding;
+  const rightClearance = effectiveRightEdge - anchorRight - gapPx - edgePadding;
   const leftClearance = anchorLeft - gapPx - edgePadding;
 
   const clampedCenterX = Math.max(
     edgePadding,
     Math.min(
       centerX,
-      Math.max(edgePadding, container.widthPx - edgePadding),
+      Math.max(edgePadding, effectiveRightEdge - edgePadding),
     ),
   );
   const clampedCenterY = Math.max(
@@ -106,7 +118,7 @@ export function resolveSelectionToolPlacement(
       ),
     ),
   );
-  const maxWidthPx = Math.max(220, container.widthPx - edgePadding * 2);
+  const maxWidthPx = Math.max(220, effectiveRightEdge - edgePadding * 2);
 
   if (rightClearance >= toolbarWidth) {
     return {

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

@@ -17,6 +17,7 @@ export interface TwSelectionToolbarProps {
   onSetTextColor?: (color: string) => void;
   onSetHighlightColor?: (color: string | null) => void;
   onAddComment?: () => void;
+  density?: "micro" | "full";
 }
 
 const focusRingClass =
@@ -33,6 +34,7 @@ const DEFAULT_HIGHLIGHT_COLOR = "#ffff00";
 
 export const TwSelectionToolbar = forwardRef<HTMLDivElement, TwSelectionToolbarProps>(function TwSelectionToolbar(props, ref) {
   const { model } = props;
+  const density = props.density ?? "full";
   const addCommentDisabled = !model.canAddComment;
   const formattingDisabled = !model.canToggleFormatting;
   const contextLabel = summarizeSelectionContext(model);
@@ -44,7 +46,13 @@ export const TwSelectionToolbar = forwardRef<HTMLDivElement, TwSelectionToolbarP
     <div
       ref={ref}
       data-testid="selection-toolbar"
-      className="inline-flex max-w-[min(22rem,calc(100vw-1.5rem))] items-center gap-1 rounded-lg border border-border/80 bg-canvas px-1 py-1 shadow-md ring-1 ring-border/70"
+      className="inline-flex max-w-[min(22rem,calc(100vw-1.5rem))] items-center gap-1 rounded-[var(--radius-lg)] border border-[var(--color-border-subtle)]/80 bg-[var(--color-bg-canvas)] px-1.5 py-1 shadow-[var(--shadow-float)] ring-1 ring-[var(--color-border-subtle)]/70"
+      style={{
+        paddingLeft: "calc(6px * var(--space-density-multiplier))",
+        paddingRight: "calc(6px * var(--space-density-multiplier))",
+        paddingTop: "calc(4px * var(--space-density-multiplier))",
+        paddingBottom: "calc(4px * var(--space-density-multiplier))",
+      }}
       role="toolbar"
       aria-label="Selection actions"
       onFocusCapture={props.onFocusCapture}
@@ -71,24 +79,28 @@ export const TwSelectionToolbar = forwardRef<HTMLDivElement, TwSelectionToolbarP
         disabled={formattingDisabled}
         onClick={props.onToggleUnderline}
       />
-      <ToolbarActionButton
-        icon={<Baseline className="h-3.5 w-3.5" />}
-        label={`Apply ${model.textColorDefault ?? DEFAULT_TEXT_COLOR}`}
-        pressed={false}
-        disabled={formattingDisabled}
-        onClick={() => props.onSetTextColor?.(model.textColorDefault ?? DEFAULT_TEXT_COLOR)}
-      />
-      <ToolbarActionButton
-        icon={<Highlighter className="h-3.5 w-3.5" />}
-        label={`Apply ${model.highlightColorDefault ?? DEFAULT_HIGHLIGHT_COLOR} highlight`}
-        pressed={false}
-        disabled={formattingDisabled}
-        onClick={() =>
-          props.onSetHighlightColor?.(model.highlightColorDefault ?? DEFAULT_HIGHLIGHT_COLOR)
-        }
-      />
 
-      <div className="mx-0.5 h-4 w-px bg-border" />
+      {density === "full" && (
+        <>
+          <ToolbarActionButton
+            icon={<Baseline className="h-3.5 w-3.5" />}
+            label={`Apply ${model.textColorDefault ?? DEFAULT_TEXT_COLOR}`}
+            pressed={false}
+            disabled={formattingDisabled}
+            onClick={() => props.onSetTextColor?.(model.textColorDefault ?? DEFAULT_TEXT_COLOR)}
+          />
+          <ToolbarActionButton
+            icon={<Highlighter className="h-3.5 w-3.5" />}
+            label={`Apply ${model.highlightColorDefault ?? DEFAULT_HIGHLIGHT_COLOR} highlight`}
+            pressed={false}
+            disabled={formattingDisabled}
+            onClick={() =>
+              props.onSetHighlightColor?.(model.highlightColorDefault ?? DEFAULT_HIGHLIGHT_COLOR)
+            }
+          />
+          <div className="mx-0.5 h-4 w-px bg-[var(--color-border-subtle)]" />
+        </>
+      )}
 
       <Tooltip.Root>
         <Tooltip.Trigger asChild>
@@ -115,7 +127,7 @@ export const TwSelectionToolbar = forwardRef<HTMLDivElement, TwSelectionToolbarP
 
       {model.previewText ? (
         <>
-          <div className="mx-0.5 h-4 w-px bg-border" />
+          <div className="mx-0.5 h-4 w-px bg-[var(--color-border-subtle)]" />
           <span className="max-w-[7rem] truncate text-[10px] text-secondary">
             {model.previewText}
           </span>
@@ -124,7 +136,7 @@ export const TwSelectionToolbar = forwardRef<HTMLDivElement, TwSelectionToolbarP
 
       {contextLabel ? (
         <>
-          {!model.previewText ? <div className="mx-0.5 h-4 w-px bg-border" /> : null}
+          {!model.previewText ? <div className="mx-0.5 h-4 w-px bg-[var(--color-border-subtle)]" /> : null}
           <span
             className={`min-w-0 max-w-[9rem] truncate rounded-full px-1.5 py-0.5 text-[9px] font-medium tracking-[0.08em] ${
               model.badges.some((badge) => badge.tone === "accent")

package/src/ui-tailwind/chrome/tw-shortcut-hint.tsx

@@ -0,0 +1,68 @@
+import * as React from "react";
+
+export type ShortcutKey =
+  | "Cmd" | "Ctrl" | "Shift" | "Alt" | "Enter" | "Esc" | "Tab" | "Backspace"
+  | string;  // fall-through for single letters/digits
+
+export interface TwShortcutHintProps {
+  keys: ShortcutKey[];
+  platform?: "mac" | "win";
+  className?: string;
+}
+
+const MAC_SYMBOL: Record<string, string> = {
+  Cmd: "⌘",
+  Shift: "⇧",
+  Alt: "⌥",
+  Ctrl: "⌃",
+  Enter: "↵",
+  Esc: "Esc",
+  Tab: "⇥",
+  Backspace: "⌫",
+};
+
+function detectPlatform(): "mac" | "win" {
+  if (typeof navigator === "undefined") return "win";
+  return /Mac|iPhone|iPad/.test(navigator.platform) ? "mac" : "win";
+}
+
+export function TwShortcutHint(props: TwShortcutHintProps): React.JSX.Element {
+  const { keys, className } = props;
+  const platform = props.platform ?? detectPlatform();
+
+  const mapped = keys.map((k) =>
+    platform === "mac"
+      ? (MAC_SYMBOL[k] ?? k)
+      : (k === "Cmd" ? "Ctrl" : k)
+  );
+
+  const containerClass = [
+    "inline-flex items-center gap-0.5",
+    "text-[9px] uppercase tracking-[0.06em]",
+    "text-[var(--color-text-tertiary)] opacity-75",
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const chipClass = [
+    "rounded-[var(--radius-sm)]",
+    "border border-[var(--color-border-default)]",
+    "bg-[var(--color-bg-muted)]",
+    "px-1 py-px leading-none font-medium",
+  ].join(" ");
+
+  return (
+    <span className={containerClass} data-testid="tw-shortcut-hint">
+      {mapped.map((label, i) => (
+        <kbd
+          key={i}
+          className={chipClass}
+          data-testid="tw-shortcut-hint__chip"
+        >
+          {label}
+        </kbd>
+      ))}
+    </span>
+  );
+}

package/src/ui-tailwind/chrome/tw-suggestion-card.tsx

@@ -29,18 +29,18 @@ export function TwSuggestionCard(props: TwSuggestionCardProps) {
   return (
     <div
       data-testid="suggestion-card"
-      className="inline-flex max-w-[min(24rem,calc(100vw-1.5rem))] flex-col gap-1.5 rounded-xl border border-border/80 bg-canvas px-2.5 py-1.5 shadow-lg ring-1 ring-border/75"
+      className="inline-flex max-w-[min(24rem,calc(100vw-1.5rem))] flex-col gap-1.5 rounded-[var(--radius-xl)] border border-[var(--color-border-subtle)]/80 bg-[var(--color-bg-canvas)] px-[10px] py-[10px] shadow-[var(--shadow-float)] ring-1 ring-[var(--color-border-subtle)]/75"
       onFocusCapture={props.onFocusCapture}
       onBlurCapture={props.onBlurCapture}
-      role="group"
-      aria-label="Suggestion actions"
+      role="region"
+      aria-label="Suggestion"
     >
       <div className="flex items-start justify-between gap-2">
         <div className="min-w-0">
-          <div className="text-[10px] font-semibold uppercase tracking-[0.12em] text-warning">
+          <div className="text-[10px] font-semibold uppercase tracking-[0.12em] text-[var(--color-semantic-warning)]">
             {props.model.kindLabel}
           </div>
-          <div className="mt-0.5 max-w-[14rem] truncate text-[13px] text-primary">
+          <div className="mt-0.5 max-w-[14rem] truncate text-[13px] text-[var(--color-text-primary)]">
             {props.model.previewText}
           </div>
         </div>
@@ -81,7 +81,7 @@ export function TwSuggestionCard(props: TwSuggestionCardProps) {
               disabled={commentDisabled}
               onMouseDown={preserveEditorSelectionMouseDown}
               onClick={props.onAddComment}
-              className={`inline-flex h-7 items-center gap-1 rounded-md border border-border px-2 text-[11px] font-medium text-secondary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
+              className={`inline-flex h-7 items-center gap-1 rounded-md border border-[var(--color-border-default)] px-2 text-[11px] font-medium text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-bg-hover)] disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
             >
               <MessageSquare className="h-3 w-3" />
               Comment
@@ -118,10 +118,10 @@ function SuggestionActionButton(props: {
   onClick?: () => void;
 }) {
   const toneClass = props.tone === "accept"
-    ? "border-success/35 bg-canvas text-success hover:bg-surface"
+    ? "border border-transparent bg-[var(--color-accent-primary)] text-[var(--color-text-on-accent)] hover:bg-[var(--color-accent-primary-hover)]"
     : props.tone === "reject"
-      ? "border-danger/35 bg-canvas text-danger hover:bg-surface"
-      : "border-border text-secondary hover:bg-surface";
+      ? "border border-[var(--color-semantic-error)]/35 bg-[var(--color-bg-canvas)] text-[var(--color-semantic-error)] hover:bg-[var(--color-semantic-error-soft)]"
+      : "border border-[var(--color-border-default)] text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-hover)]";
 
   return (
     <button
@@ -130,7 +130,7 @@ function SuggestionActionButton(props: {
       disabled={props.disabled}
       onMouseDown={preserveEditorSelectionMouseDown}
       onClick={props.onClick}
-      className={`inline-flex h-7 items-center gap-1 rounded-md border px-2 text-[11px] font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-40 ${toneClass} ${focusRingClass}`}
+      className={`inline-flex h-7 items-center gap-1 rounded-md px-2 text-[11px] font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-40 ${toneClass} ${focusRingClass}`}
     >
       {props.icon}
       {props.label.replace(" suggestion", "").replace(" on suggestion", "")}

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

@@ -108,9 +108,9 @@ export function TwTableContextToolbar(props: TwTableContextToolbarProps) {
     <div
       data-testid="table-context-toolbar"
       data-tier={tier}
-      className={`flex ${widthCap} flex-wrap items-start gap-1.5 rounded-lg border border-border bg-canvas px-2.5 py-1.5 shadow-sm`}
+      className={`flex ${widthCap} flex-wrap items-start gap-[4px] 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">
+      <span className="text-[9px] font-semibold uppercase tracking-[0.12em] text-[var(--color-text-tertiary)]">
         {tierLabel(tier)}
       </span>
       {tableSizeLabel ? <ToolbarBadge>{tableSizeLabel}</ToolbarBadge> : null}
@@ -120,6 +120,7 @@ export function TwTableContextToolbar(props: TwTableContextToolbarProps) {
       ) : null}
 
       {/* T5 whole-table: table alignment */}
+      {tier === "whole-table" ? <GroupDivider /> : null}
       {tier === "whole-table" ? (
         <ToolbarSection label="Align">
           {(["left", "center", "right"] as const).map((align) => (
@@ -166,6 +167,9 @@ export function TwTableContextToolbar(props: TwTableContextToolbarProps) {
         </ToolbarSection>
       ) : null}
 
+      {/* separator before row/column structure group */}
+      <GroupDivider />
+
       {/* T2 / T4a row-selected: row ops */}
       {(tier === "caret-in-cell" || tier === "row-selected") ? (
         <ToolbarSection label="Rows">
@@ -261,6 +265,11 @@ export function TwTableContextToolbar(props: TwTableContextToolbarProps) {
         </ToolbarSection>
       ) : null}
 
+      {/* separator before merge/split group (multi-cell, row, column) */}
+      {tier === "multi-cell" || tier === "row-selected" || tier === "column-selected" ? (
+        <GroupDivider />
+      ) : null}
+
       {/* T3 multi-cell: merge/split */}
       {tier === "multi-cell" ||
       tier === "row-selected" ||
@@ -333,6 +342,9 @@ export function TwTableContextToolbar(props: TwTableContextToolbarProps) {
         </ToolbarSection>
       ) : null}
 
+      {/* separator before delete table (whole-table only) */}
+      {tier === "whole-table" ? <GroupDivider /> : null}
+
       {/* T5 only: delete table (danger) */}
       {tier === "whole-table" ? (
         <ToolbarSection label="Table">
@@ -399,6 +411,15 @@ function tierWidthCap(tier: TableTier): string {
   }
 }
 
+function GroupDivider() {
+  return (
+    <div
+      className="mx-0.5 h-5 w-px bg-[var(--color-border-subtle)]"
+      aria-hidden="true"
+    />
+  );
+}
+
 function ToolbarBadge(props: {
   children: React.ReactNode;
   tone?: "neutral" | "accent";
@@ -422,8 +443,8 @@ function ToolbarSection(props: {
   children: React.ReactNode;
 }) {
   return (
-    <div className="flex flex-wrap items-center gap-1 rounded-md bg-surface/60 px-1.5 py-1 ring-1 ring-border/35">
-      <span className="text-[9px] font-semibold uppercase tracking-[0.08em] text-tertiary">
+    <div className="flex flex-wrap items-center gap-1 rounded-md bg-[var(--color-bg-muted)]/60 px-1.5 py-1 ring-1 ring-[var(--color-border-subtle)]/35">
+      <span className="text-[9px] font-semibold uppercase tracking-[0.08em] text-[var(--color-text-tertiary)]">
         {props.label}
       </span>
       <div className="flex flex-wrap items-center gap-1">{props.children}</div>
@@ -455,7 +476,7 @@ function ToolbarButton(props: {
         props.active
           ? "bg-accent/15 text-accent"
           : props.danger
-            ? "text-danger hover:bg-danger/10"
+            ? "text-[var(--color-semantic-error)] hover:bg-[var(--color-semantic-error-soft)]"
             : "text-primary hover:bg-surface"
       }`}
     >

package/src/ui-tailwind/chrome/tw-table-grip-layer.tsx

@@ -21,7 +21,7 @@
  * grip so PM still receives the click and places the caret.
  */
 
-import React, { useCallback, useEffect, useRef } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 
 import type {
   TableStructureContextSnapshot,
@@ -32,7 +32,8 @@ import { projectRectToOverlay } from "../chrome-overlay/chrome-overlay-projector
 import { DEFAULT_PX_PER_TWIP } from "../../runtime/render/render-frame-types";
 import { forwardNonDragClick } from "./forward-non-drag-click";
 
-const GRIP_PX = 6;
+const GRIP_PX = 2;
+const GRIP_HIT_PX = 8; // total hit area (2 px visual + 3 px pad each side)
 const DRAG_THRESHOLD_PX = 3;
 const MIN_COLUMN_TWIPS = 720;
 const MIN_ROW_TWIPS = 120;
@@ -143,6 +144,7 @@ function ColResizeGrip({
     dragStarted: boolean;
     gripEl: HTMLElement;
   } | null>(null);
+  const [isActive, setIsActive] = useState(false);
 
   const handleMouseDown = useCallback(
     (e: React.MouseEvent<HTMLElement>) => {
@@ -164,14 +166,17 @@ function ColResizeGrip({
       if (!drag.dragStarted) {
         if (Math.abs(e.clientX - drag.startX) < DRAG_THRESHOLD_PX) return;
         drag.dragStarted = true;
+        setIsActive(true);
       }
       e.preventDefault();
     };
     const handleUp = (e: MouseEvent) => {
       const drag = dragRef.current;
       if (!drag) return;
+      const wasDragging = drag.dragStarted;
       dragRef.current = null;
-      if (!drag.dragStarted) {
+      setIsActive(false);
+      if (!wasDragging) {
         forwardNonDragClick(drag.gripEl, e);
         return;
       }
@@ -196,18 +201,17 @@ function ColResizeGrip({
       aria-orientation="vertical"
       aria-label={`Resize column ${colIndex + 1}`}
       data-testid={`col-resize-grip-${colIndex}`}
+      data-active={isActive ? "true" : "false"}
       className={[
-        "pointer-events-auto absolute",
-        disabled
-          ? "cursor-default opacity-0"
-          : "cursor-col-resize opacity-0 hover:opacity-100",
-        "transition-opacity",
-        "bg-accent",
-      ].join(" ")}
+        "wre-table-grip-col pointer-events-auto absolute",
+        disabled ? "opacity-0 cursor-default" : "",
+      ]
+        .filter(Boolean)
+        .join(" ")}
       style={{
-        left: `calc(${pos.left} - ${GRIP_PX / 2}px)`,
+        left: `calc(${pos.left} - ${GRIP_HIT_PX / 2}px)`,
         top: pos.top,
-        width: `${GRIP_PX}px`,
+        width: `${GRIP_HIT_PX}px`,
         height: pos.height,
       }}
       onMouseDown={handleMouseDown}
@@ -243,6 +247,7 @@ function RowResizeGrip({
     dragStarted: boolean;
     gripEl: HTMLElement;
   } | null>(null);
+  const [isActive, setIsActive] = useState(false);
 
   const handleMouseDown = useCallback(
     (e: React.MouseEvent<HTMLElement>) => {
@@ -263,14 +268,17 @@ function RowResizeGrip({
       if (!drag.dragStarted) {
         if (Math.abs(e.clientY - drag.startY) < DRAG_THRESHOLD_PX) return;
         drag.dragStarted = true;
+        setIsActive(true);
       }
       e.preventDefault();
     };
     const handleUp = (e: MouseEvent) => {
       const drag = dragRef.current;
       if (!drag) return;
+      const wasDragging = drag.dragStarted;
       dragRef.current = null;
-      if (!drag.dragStarted) {
+      setIsActive(false);
+      if (!wasDragging) {
         forwardNonDragClick(drag.gripEl, e);
         return;
       }
@@ -296,19 +304,18 @@ function RowResizeGrip({
       aria-orientation="horizontal"
       aria-label={`Resize row ${rowIndex + 1}`}
       data-testid={`row-resize-grip-${rowIndex}`}
+      data-active={isActive ? "true" : "false"}
       className={[
-        "pointer-events-auto absolute",
-        disabled
-          ? "cursor-default opacity-0"
-          : "cursor-row-resize opacity-0 hover:opacity-100",
-        "transition-opacity",
-        "bg-accent",
-      ].join(" ")}
+        "wre-table-grip-row pointer-events-auto absolute",
+        disabled ? "opacity-0 cursor-default" : "",
+      ]
+        .filter(Boolean)
+        .join(" ")}
       style={{
         left: pos.left,
-        top: `calc(${pos.top} - ${GRIP_PX / 2}px)`,
+        top: `calc(${pos.top} - ${GRIP_HIT_PX / 2}px)`,
         width: pos.width,
-        height: `${GRIP_PX}px`,
+        height: `${GRIP_HIT_PX}px`,
       }}
       onMouseDown={handleMouseDown}
     />

package/src/ui-tailwind/chrome/tw-unsaved-modal.tsx

@@ -8,28 +8,76 @@ export interface TwUnsavedModalProps {
   onCancel: () => void;
 }
 
+/**
+ * TwUnsavedModal — blocking confirmation modal for close-with-unsaved-changes
+ * (designsystem §6.18).  Lane 6b §6b.S7 rebinds every surface, shadow,
+ * radius, and colour to the Lane 6a token vocabulary:
+ *
+ *   backdrop → bg-[var(--color-bg-overlay)] + backdrop-blur
+ *   card     → bg-[var(--color-bg-elevated)]
+ *              shadow-[var(--shadow-float)]
+ *              ring-1 ring-[var(--color-border-subtle)]
+ *              rounded-[var(--radius-sm)]
+ *   icon     → bg-[var(--color-semantic-warning-soft)] / text-semantic-warning
+ *   cancel   → hover:bg-[var(--color-bg-hover)]
+ *   discard  → bg-[var(--color-semantic-error)] + hover shade
+ *
+ * Every transition binds `duration-[var(--motion-fast)]` so the reduced-
+ * motion media override in tokens.css zeroes out appropriately.
+ */
 export function TwUnsavedModal(props: TwUnsavedModalProps) {
   if (!props.open) return null;
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="tw-unsaved-modal__title"
+      data-testid="tw-unsaved-modal"
+    >
       {/* Backdrop */}
       <div
-        className="absolute inset-0 bg-black/30 backdrop-blur-sm"
+        className={[
+          "absolute inset-0 bg-[var(--color-bg-overlay)] backdrop-blur-sm",
+          "transition-opacity duration-[var(--motion-fast)]",
+        ].join(" ")}
         onClick={props.onCancel}
+        data-testid="tw-unsaved-modal__backdrop"
       />
 
-      {/* Modal */}
-      <div className="relative mx-4 w-full max-w-md rounded-xl bg-canvas p-6 shadow-lg ring-1 ring-border">
+      {/* Card */}
+      <div
+        className={[
+          "relative mx-4 w-full max-w-md p-6",
+          "rounded-[var(--radius-sm)]",
+          "bg-[var(--color-bg-elevated)]",
+          "shadow-[var(--shadow-float)]",
+          "ring-1 ring-[var(--color-border-subtle)]",
+        ].join(" ")}
+        data-testid="tw-unsaved-modal__card"
+      >
         <div className="flex items-start gap-3">
-          <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-warning-soft">
-            <AlertTriangle className="h-5 w-5 text-warning" />
+          <div
+            className={[
+              "flex h-9 w-9 shrink-0 items-center justify-center",
+              "rounded-[var(--radius-pill)]",
+              "bg-[var(--color-semantic-warning-soft)]",
+            ].join(" ")}
+          >
+            <AlertTriangle
+              className="h-5 w-5 text-[var(--color-semantic-warning)]"
+              aria-hidden="true"
+            />
           </div>
           <div className="flex-1">
-            <h3 className="text-base font-semibold text-primary">
+            <h3
+              id="tw-unsaved-modal__title"
+              className="text-base font-semibold text-[var(--color-text-primary)]"
+            >
               Unsaved changes
             </h3>
-            <p className="mt-1.5 text-sm text-secondary leading-relaxed">
+            <p className="mt-1.5 text-sm leading-relaxed text-[var(--color-text-secondary)]">
               {props.message ??
                 "You have unsaved changes that will be lost. Your work is being autosaved, but the latest edits may not be saved yet."}
             </p>
@@ -40,14 +88,28 @@ export function TwUnsavedModal(props: TwUnsavedModalProps) {
           <button
             type="button"
             onClick={props.onCancel}
-            className="rounded-lg px-4 py-2 text-sm font-medium text-secondary hover:bg-surface transition-colors"
+            className={[
+              "rounded-[var(--radius-sm)] px-4 py-2 text-sm font-medium",
+              "text-[var(--color-text-secondary)]",
+              "hover:bg-[var(--color-bg-hover)] hover:text-[var(--color-text-primary)]",
+              "transition-colors duration-[var(--motion-fast)]",
+              "focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus)]",
+            ].join(" ")}
+            data-testid="tw-unsaved-modal__cancel"
           >
             Keep editing
           </button>
           <button
             type="button"
             onClick={props.onDiscard}
-            className="rounded-lg bg-danger px-4 py-2 text-sm font-medium text-white hover:bg-danger/90 transition-colors"
+            className={[
+              "rounded-[var(--radius-sm)] px-4 py-2 text-sm font-medium",
+              "bg-[var(--color-semantic-error)] text-[var(--color-text-on-accent)]",
+              "hover:bg-[var(--color-semantic-error)]/90",
+              "transition-colors duration-[var(--motion-fast)]",
+              "focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus)]",
+            ].join(" ")}
+            data-testid="tw-unsaved-modal__discard"
           >
             Discard changes
           </button>