@beyondwork/docx-react-component 1.0.52 → 1.0.54

package/src/ui-tailwind/theme/use-density.ts

@@ -0,0 +1,60 @@
+/**
+ * Density mode hook — reads and writes `document.documentElement.dataset.density`
+ * and persists the preference in `localStorage["wre.density"]`.
+ *
+ * Components that use spacing gaps / paddings should multiply by
+ * `var(--space-density-multiplier)` in their CSS; this hook owns the
+ * attribute that drives the CSS override blocks in `tokens.css`.
+ *
+ * No component consumer lands in Lane 6a — Lane 6b.U5 / 6c.U9 own the
+ * opt-in plumbing. This module ships the hook so downstream lanes can
+ * import without a dependency on 6a being in-progress.
+ */
+
+import { useCallback, useEffect, useState } from "react";
+
+export type DensityMode = "compact" | "standard" | "comfortable";
+
+const STORAGE_KEY = "wre.density";
+const DEFAULT_DENSITY: DensityMode = "standard";
+
+function readPersistedDensity(): DensityMode {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored === "compact" || stored === "standard" || stored === "comfortable") {
+      return stored;
+    }
+  } catch {
+    // localStorage unavailable (SSR, sandboxed iframe, etc.)
+  }
+  return DEFAULT_DENSITY;
+}
+
+function applyDensity(mode: DensityMode): void {
+  document.documentElement.dataset.density = mode;
+  try {
+    localStorage.setItem(STORAGE_KEY, mode);
+  } catch {
+    // ignore
+  }
+}
+
+export function useDensity(): {
+  density: DensityMode;
+  setDensity: (mode: DensityMode) => void;
+} {
+  const [density, setDensityState] = useState<DensityMode>(DEFAULT_DENSITY);
+
+  useEffect(() => {
+    const initial = readPersistedDensity();
+    applyDensity(initial);
+    setDensityState(initial);
+  }, []);
+
+  const setDensity = useCallback((mode: DensityMode) => {
+    applyDensity(mode);
+    setDensityState(mode);
+  }, []);
+
+  return { density, setDensity };
+}

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

@@ -52,7 +52,20 @@ import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-edi
 import { ROLE_ACTION_SETS } from "../chrome/role-action-sets";
 import { TwScopePostureMenu } from "./tw-scope-posture-menu";
 
-export type MarkupDisplayMode = "clean" | "simple" | "all";
+/**
+ * Toolbar-local alias for the markup-display union.  L6d.N2 widens
+ * this to match the `MarkupDisplay` surface in
+ * `comment-decoration-model.ts`, which now accepts Word's 4-mode
+ * grammar plus the legacy triple.
+ */
+export type MarkupDisplayMode =
+  | "all-markup"
+  | "simple-markup"
+  | "no-markup"
+  | "original"
+  | "clean"
+  | "simple"
+  | "all";
 
 export interface WorkflowWorkItemSnapshot {
   workItemId: string;

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

@@ -4,15 +4,20 @@ import * as Tabs from "@radix-ui/react-tabs";
 /**
  * TwShellHeader — the top "app chrome" bar above the document canvas.
  *
- * Anatomy matches the editorial reference mock:
+ * Designsystem §6.1 — three subregions on a single 48-px row:
  *   ┌─────────────────────────────────────────────────────────────────────┐
- *   │  [brand]        Edit | Review | Workflow | More          [⋯] [CTA] │
+ *   │ LEFT          │          CENTER           │               RIGHT     │
+ *   │ brand + slot  │ mode tabs (always-on)     │ icon actions + CTA      │
  *   └─────────────────────────────────────────────────────────────────────┘
  *
- * All three regions are optional slots — hosts opt in by supplying the
- * corresponding prop.  When nothing is supplied the header renders empty but
- * preserves layout height so the document canvas does not jump when a CTA
- * appears.
+ * Layout is CSS-grid `grid-cols-[1fr_auto_1fr]` so the center zone is
+ * always visually centred regardless of left / right slot width.  The
+ * 4-mode switcher (edit / review / workflow / more) renders
+ * unconditionally — Lane 6b §6b.S1 flips it from opt-in to always-on.
+ *
+ * All colors, shadows, radius, and motion bind to the Lane 6a token
+ * substrate (`var(--color-*)` / `var(--shadow-*)` / `var(--radius-*)` /
+ * `var(--motion-*)`) — no hex literals or legacy Tailwind palette names.
  */
 
 export type ShellHeaderMode = "edit" | "review" | "workflow" | "more";
@@ -40,6 +45,10 @@ export interface ShellHeaderIconAction {
 
 export interface TwShellHeaderProps {
   brand?: ReactNode;
+  /**
+   * Mode tab options.  When omitted, a default 4-mode set is rendered so
+   * the center subregion always has tabs per designsystem §6.1.
+   */
   modes?: readonly ShellHeaderModeOption[];
   activeMode?: ShellHeaderMode;
   onModeChange?: (mode: ShellHeaderMode) => void;
@@ -50,23 +59,33 @@ export interface TwShellHeaderProps {
   className?: string;
 }
 
-const focusRingClass =
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-canvas";
+/**
+ * Default 4-mode set — designsystem §6.1.  Exported so hosts can extend
+ * / relabel without reconstructing the whole list.
+ */
+export const DEFAULT_SHELL_HEADER_MODES: readonly ShellHeaderModeOption[] = [
+  { id: "edit", label: "Edit" },
+  { id: "review", label: "Review" },
+  { id: "workflow", label: "Workflow" },
+  { id: "more", label: "More" },
+];
 
-export function TwShellHeader(props: TwShellHeaderProps) {
-  const hasContent =
-    props.brand ||
-    (props.modes && props.modes.length > 0) ||
-    (props.iconActions && props.iconActions.length > 0) ||
-    props.primaryAction;
+const focusRingClass =
+  "focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus)]";
 
-  if (!hasContent) {
-    return null;
-  }
+export function TwShellHeader(props: TwShellHeaderProps): React.ReactElement {
+  const modes =
+    props.modes && props.modes.length > 0
+      ? props.modes
+      : DEFAULT_SHELL_HEADER_MODES;
+  const activeMode: ShellHeaderMode = props.activeMode ?? modes[0]!.id;
 
   const className = [
-    "flex h-12 shrink-0 items-center justify-between gap-4 px-4 bg-canvas/92 backdrop-blur-sm",
-    props.isScrolled ? "border-b border-border" : "border-b border-transparent",
+    "grid h-12 shrink-0 grid-cols-[1fr_auto_1fr] items-center gap-2 px-4",
+    "bg-[var(--color-bg-chrome)]/92 backdrop-blur-sm",
+    props.isScrolled
+      ? "border-b border-[var(--color-border-subtle)]"
+      : "border-b border-transparent",
     "transition-colors duration-[var(--motion-fast)]",
     props.className,
   ]
@@ -75,10 +94,15 @@ export function TwShellHeader(props: TwShellHeaderProps) {
 
   return (
     <header className={className} data-testid="tw-shell-header">
-      <div className="flex min-w-0 items-center gap-3">
+      {/* LEFT: brand + host-supplied slot */}
+      <div
+        className="flex min-w-0 items-center gap-3"
+        data-region="left"
+        data-testid="tw-shell-header__region-left"
+      >
         {props.brand ? (
           <div
-            className="font-[family-name:var(--font-legal-serif)] text-[15px] font-semibold text-primary truncate"
+            className="truncate font-[family-name:var(--font-legal-serif)] text-[15px] font-semibold text-[var(--color-text-primary)]"
             data-testid="tw-shell-header__brand"
           >
             {props.brand}
@@ -86,9 +110,14 @@ export function TwShellHeader(props: TwShellHeaderProps) {
         ) : null}
       </div>
 
-      {props.modes && props.modes.length > 0 && props.activeMode ? (
+      {/* CENTER: mode tabs (always on) */}
+      <div
+        className="flex items-center justify-center"
+        data-region="center"
+        data-testid="tw-shell-header__region-center"
+      >
         <Tabs.Root
-          value={props.activeMode}
+          value={activeMode}
           onValueChange={(v: string) =>
             props.onModeChange?.(v as ShellHeaderMode)
           }
@@ -97,7 +126,7 @@ export function TwShellHeader(props: TwShellHeaderProps) {
             aria-label="Workspace modes"
             className="flex items-center gap-1"
           >
-            {props.modes.map((mode) => (
+            {modes.map((mode) => (
               <Tabs.Trigger
                 key={mode.id}
                 value={mode.id}
@@ -110,17 +139,26 @@ export function TwShellHeader(props: TwShellHeaderProps) {
             ))}
           </Tabs.List>
         </Tabs.Root>
-      ) : (
-        <div aria-hidden="true" />
-      )}
+      </div>
 
-      <div className="flex items-center gap-1">
+      {/* RIGHT: icon actions + primary CTA */}
+      <div
+        className="flex items-center justify-end gap-1"
+        data-region="right"
+        data-testid="tw-shell-header__region-right"
+      >
         {props.iconActions?.map((action) => {
           const commonProps = {
             key: action.id,
             "aria-label": action.label,
             title: action.label,
-            className: `inline-flex h-8 w-8 items-center justify-center rounded-sm text-secondary transition-colors hover:bg-surface-hover hover:text-primary ${focusRingClass}`,
+            className: [
+              "inline-flex h-8 w-8 items-center justify-center rounded-[var(--radius-sm)]",
+              "text-[var(--color-text-secondary)]",
+              "transition-colors duration-[var(--motion-fast)]",
+              "hover:bg-[var(--color-bg-hover)] hover:text-[var(--color-text-primary)]",
+              focusRingClass,
+            ].join(" "),
           } as const;
 
           if (action.href) {
@@ -145,10 +183,13 @@ export function TwShellHeader(props: TwShellHeaderProps) {
             onClick={props.primaryAction.onClick}
             data-tone={props.primaryAction.tone ?? "accent"}
             className={[
-              "ml-2 inline-flex h-8 items-center rounded-sm px-3 text-xs font-semibold transition-colors disabled:opacity-40",
+              "ml-2 inline-flex h-8 items-center rounded-[var(--radius-sm)] px-3",
+              "text-xs font-semibold",
+              "transition-colors duration-[var(--motion-fast)]",
+              "disabled:opacity-40",
               props.primaryAction.tone === "neutral"
-                ? "bg-surface text-primary hover:bg-surface-hover"
-                : "bg-accent text-white hover:bg-[color-mix(in_srgb,var(--color-accent)_85%,#000)]",
+                ? "bg-[var(--color-bg-muted)] text-[var(--color-text-primary)] hover:bg-[var(--color-bg-hover)]"
+                : "bg-[var(--color-accent-primary)] text-[var(--color-text-on-accent)] hover:bg-[var(--color-accent-primary-hover)]",
               focusRingClass,
             ].join(" ")}
             data-testid="tw-shell-header__primary-action"

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

@@ -7,13 +7,31 @@ export interface TwToolbarIconButtonProps {
   icon: React.ComponentType<{ className?: string }>;
   label: string;
   disabled?: boolean;
+  /**
+   * Active / pressed state.  Designsystem §6.2 + Lane 6b §6b.S2: active
+   * buttons paint an accent-soft tint with an accent border ring — NOT a
+   * filled accent CTA.  The filled-CTA grammar is reserved for the shell
+   * header primary action only.
+   */
   active?: boolean;
+  /**
+   * Emphasis variant — used for "stand-out" toolbar items (e.g. a pinned
+   * AI action).  Paints the accent glyph color at rest; still tints on
+   * hover and on active.
+   */
   emphasis?: boolean;
+  /**
+   * Lane 6b §6b.U6 — optional keyboard-shortcut hint rendered as a small
+   * `<kbd>` chip to the right of the label inside the tooltip.  Use
+   * platform-agnostic symbols (⌘, ⇧, ⌥, ⌃) — callers format for macOS
+   * vs. Windows however they like.
+   */
+  shortcut?: string;
   onClick?: () => 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";
+  "focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus)]";
 
 export function TwToolbarIconButton(props: TwToolbarIconButtonProps) {
   return (
@@ -22,17 +40,22 @@ export function TwToolbarIconButton(props: TwToolbarIconButtonProps) {
         <button
           type="button"
           aria-label={props.label}
+          aria-pressed={props.active ?? undefined}
+          data-active={props.active ? "true" : undefined}
           disabled={props.disabled}
           onMouseDown={preserveEditorSelectionMouseDown}
           onClick={props.onClick}
           className={[
-            "inline-flex h-6 w-6 items-center justify-center rounded-md border border-transparent transition-colors outline-none",
+            "inline-flex h-6 w-6 items-center justify-center rounded-[var(--radius-sm)]",
+            "border border-transparent outline-none",
+            "transition-colors duration-[var(--motion-fast)]",
             "disabled:opacity-30 disabled:cursor-not-allowed",
-            props.emphasis
-              ? "text-accent hover:border-border/60 hover:bg-surface"
-              : props.active
-                ? "border-border/70 bg-surface text-accent shadow-[0_4px_12px_-10px_var(--color-shadow-strong)]"
-                : "text-secondary hover:border-border/60 hover:bg-surface hover:text-primary",
+            props.active
+              ? // Active = underline-tint grammar: accent-soft fill, accent-primary glyph, accent border ring.
+                "bg-[var(--color-accent-soft)] text-[var(--color-accent-primary)] border-[var(--color-border-accent)]"
+              : props.emphasis
+                ? "text-[var(--color-accent-primary)] hover:bg-[var(--color-bg-hover)] hover:border-[var(--color-border-subtle)]"
+                : "text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-hover)] hover:text-[var(--color-text-primary)] hover:border-[var(--color-border-subtle)]",
             focusRingClass,
           ].join(" ")}
         >
@@ -41,10 +64,27 @@ export function TwToolbarIconButton(props: TwToolbarIconButtonProps) {
       </Tooltip.Trigger>
       <Tooltip.Portal>
         <Tooltip.Content
-          className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50"
+          className={[
+            "inline-flex items-center gap-2 rounded-[var(--radius-sm)] px-2 py-1 text-xs z-50",
+            "bg-[var(--color-text-primary)] text-[var(--color-text-inverse)]",
+            "shadow-[var(--shadow-soft)]",
+          ].join(" ")}
           sideOffset={6}
         >
-          {props.label}
+          <span>{props.label}</span>
+          {props.shortcut ? (
+            <kbd
+              className={[
+                "inline-flex items-center rounded-[var(--radius-sm)]",
+                "px-1 py-0.5 font-sans text-[10px] font-medium",
+                "border border-[var(--color-border-subtle)]/40",
+                "bg-[var(--color-bg-overlay)] text-[var(--color-text-inverse)]/80",
+              ].join(" ")}
+              data-testid="tw-toolbar-icon-button__shortcut"
+            >
+              {props.shortcut}
+            </kbd>
+          ) : null}
         </Tooltip.Content>
       </Tooltip.Portal>
     </Tooltip.Root>