@beyondwork/docx-react-component 1.0.53 → 1.0.55

package/src/ui-tailwind/chrome/collab-presence-strip.tsx

@@ -51,6 +51,12 @@ export function CollabPresenceStrip({
   const rootClass = [
     "tw-collab-presence-strip",
     observer ? "tw-collab-presence-observer" : null,
+    // Lane 6b §6b.S6 — token-bound default styling.  BEM classes above
+    // stay as host-CSS override hooks; the inline Tailwind below paints
+    // the calm presence strip and dims under observer posture.
+    "inline-flex items-center gap-2 px-2 py-1",
+    "text-[11px] text-[var(--color-text-tertiary)]",
+    observer ? "opacity-60" : null,
     className ?? null,
   ]
     .filter((value): value is string => value !== null)
@@ -64,14 +70,23 @@ export function CollabPresenceStrip({
       aria-label="Collaborators"
       data-observer={observer ? "true" : "false"}
     >
-      <ul className="tw-collab-presence-strip__peers" aria-live="polite">
+      <ul
+        className="tw-collab-presence-strip__peers flex items-center gap-1 list-none m-0 p-0"
+        aria-live="polite"
+      >
         {tiles.map((peer) => (
           <CollabPresencePeerTile key={peer.userId} peer={peer} />
         ))}
       </ul>
       {overflow > 0 ? (
         <span
-          className="tw-collab-presence-strip__overflow"
+          className={[
+            "tw-collab-presence-strip__overflow",
+            "inline-flex items-center justify-center",
+            "h-5 min-w-5 px-1 rounded-[var(--radius-pill)]",
+            "bg-[var(--color-bg-muted)] text-[var(--color-text-secondary)]",
+            "text-[10px] font-medium",
+          ].join(" ")}
           aria-label={`${overflow} additional peers`}
           data-testid="collab-presence-overflow"
         >
@@ -90,19 +105,38 @@ function CollabPresencePeerTile({ peer }: { peer: AwarenessPeer }) {
   const initials = computeInitials(peer.displayName);
   return (
     <li
-      className="tw-collab-presence-strip__tile"
+      className={[
+        "tw-collab-presence-strip__tile",
+        "inline-flex items-center gap-1",
+      ].join(" ")}
       data-testid={`collab-presence-peer-${peer.userId}`}
       data-author-kind={peer.authorKind}
       data-active-story={peer.activeStoryId ?? ""}
       title={peer.displayName}
     >
-      <span className="tw-collab-presence-strip__avatar" aria-hidden="true">
+      <span
+        className={[
+          "tw-collab-presence-strip__avatar",
+          "inline-flex h-5 w-5 items-center justify-center",
+          "rounded-[var(--radius-pill)]",
+          "bg-[var(--color-accent-soft)] text-[var(--color-accent-primary)]",
+          "text-[10px] font-semibold",
+        ].join(" ")}
+        aria-hidden="true"
+      >
         {initials}
       </span>
-      <span className="tw-collab-presence-strip__name">{peer.displayName}</span>
+      <span className="tw-collab-presence-strip__name sr-only">
+        {peer.displayName}
+      </span>
       {peer.authorKind !== "human" ? (
         <span
-          className="tw-collab-presence-strip__badge"
+          className={[
+            "tw-collab-presence-strip__badge",
+            "inline-flex items-center px-1 rounded-[var(--radius-pill)]",
+            "bg-[var(--color-bg-muted)] text-[var(--color-text-tertiary)]",
+            "text-[9px] font-medium uppercase tracking-wide",
+          ].join(" ")}
           data-testid={`collab-presence-peer-${peer.userId}-badge`}
         >
           {peer.authorKind}
@@ -112,6 +146,17 @@ function CollabPresencePeerTile({ peer }: { peer: AwarenessPeer }) {
   );
 }
 
+/**
+ * Lane 6b §6b.S6 — transport chip tone binding.
+ *
+ *   connected / attached → calm tertiary (no paint)
+ *   syncing / detached   → semantic-warning-soft + warning glyph
+ *   offline              → semantic-error-soft + error glyph
+ *   none                 → muted (disconnected intent)
+ *
+ * Health is the silent default — only degraded states paint, so operators
+ * who glance at the strip only see colour when something is off.
+ */
 function CollabTransportChip({
   status,
   queuedLocalEvents,
@@ -123,9 +168,25 @@ function CollabTransportChip({
     status === "offline" && queuedLocalEvents > 0
       ? `offline (${queuedLocalEvents} queued)`
       : status;
+
+  const toneClass =
+    status === "offline"
+      ? "bg-[var(--color-semantic-error-soft)] text-[var(--color-semantic-error)]"
+      : status === "syncing"
+        ? "bg-[var(--color-semantic-warning-soft)] text-[var(--color-semantic-warning)]"
+        : // connected — calm tertiary
+          "text-[var(--color-text-tertiary)]";
+
   return (
     <span
-      className={`tw-collab-presence-strip__transport tw-collab-presence-strip__transport--${status}`}
+      className={[
+        "tw-collab-presence-strip__transport",
+        `tw-collab-presence-strip__transport--${status}`,
+        "inline-flex items-center px-2 py-0.5 rounded-[var(--radius-pill)]",
+        "text-[10px] font-medium uppercase tracking-wide",
+        "transition-colors duration-[var(--motion-fast)]",
+        toneClass,
+      ].join(" ")}
       data-testid="collab-presence-transport"
       data-status={status}
       data-queued={queuedLocalEvents.toString()}

package/src/ui-tailwind/chrome/collab-role-chip.tsx

@@ -31,6 +31,14 @@ export function CollabRoleChip({
     "tw-collab-role-chip",
     `tw-collab-role-chip--${posture.role}`,
     offline ? "tw-collab-role-chip--offline" : null,
+    // Lane 6b §6b.S6 — calm token-bound chip.  Offline dims via opacity;
+    // the BEM classes above stay as hooks for host CSS to tint the role.
+    "inline-flex items-center gap-1.5 px-2 py-0.5",
+    "rounded-[var(--radius-pill)]",
+    "bg-[var(--color-bg-muted)] text-[var(--color-text-secondary)]",
+    "text-[11px] font-medium",
+    "transition-colors duration-[var(--motion-fast)]",
+    offline ? "opacity-60" : null,
     className ?? null,
   ]
     .filter((v): v is string => v !== null)
@@ -53,8 +61,19 @@ export function CollabRoleChip({
       aria-label={`Role ${posture.role}, ${peerLabel}`}
       title={`${posture.role} · ${peerLabel}`}
     >
-      <span className="tw-collab-role-chip__role">{posture.role}</span>
-      <span className="tw-collab-role-chip__peers" aria-hidden="true">
+      <span className="tw-collab-role-chip__role capitalize">
+        {posture.role}
+      </span>
+      <span
+        className={[
+          "tw-collab-role-chip__peers",
+          "inline-flex items-center justify-center",
+          "h-4 min-w-4 px-1 rounded-[var(--radius-pill)]",
+          "bg-[var(--color-accent-soft)] text-[var(--color-accent-primary)]",
+          "text-[10px] font-semibold leading-none",
+        ].join(" ")}
+        aria-hidden="true"
+      >
         {posture.peers}
       </span>
     </span>

package/src/ui-tailwind/chrome/collab-tamper-banner.tsx

@@ -35,6 +35,12 @@ export function CollabTamperBanner({
 
   const rootClass = [
     "tw-collab-tamper-banner",
+    // Lane 6b §6b.S6 — single-action semantic-error banner.  Designsystem
+    // §6.21 calls for the tamper surface to be the loudest collab chrome
+    // element (assertive) with a single recovery affordance.
+    "flex items-center gap-3 px-3 py-2 text-xs",
+    "bg-[var(--color-semantic-error-soft)] text-[var(--color-semantic-error)]",
+    "transition-colors duration-[var(--motion-fast)]",
     className ?? null,
   ]
     .filter((v): v is string => v !== null)
@@ -48,16 +54,27 @@ export function CollabTamperBanner({
       role="alert"
       aria-live="assertive"
     >
-      <span className="tw-collab-tamper-banner__icon" aria-hidden="true">
+      <span
+        className="tw-collab-tamper-banner__icon shrink-0"
+        aria-hidden="true"
+      >
         ⚠
       </span>
-      <span className="tw-collab-tamper-banner__message">
+      <span className="tw-collab-tamper-banner__message flex-1">
         Metadata integrity check failed. The workflow payload was modified
         outside the editor. Mutations are blocked until you acknowledge.
       </span>
       <button
         type="button"
-        className="tw-collab-tamper-banner__ack"
+        className={[
+          "tw-collab-tamper-banner__ack",
+          "shrink-0 inline-flex items-center",
+          "rounded-[var(--radius-sm)] px-3 py-1 text-xs font-semibold",
+          "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="collab-tamper-banner-ack"
         onClick={onAcknowledge}
       >

package/src/ui-tailwind/chrome/tw-alert-banner.tsx

@@ -1,7 +1,10 @@
-import React from "react";
+import React, { type ReactNode } from "react";
 import { AlertTriangle, XCircle } from "lucide-react";
 
-import type { RuntimeRenderSnapshot, WorkflowBlockedCommandReason } from "../../api/public-types";
+import type {
+  RuntimeRenderSnapshot,
+  WorkflowBlockedCommandReason,
+} from "../../api/public-types";
 
 export interface TwAlertBannerProps {
   snapshot: RuntimeRenderSnapshot;
@@ -9,55 +12,117 @@ export interface TwAlertBannerProps {
   workflowBlockedReasons?: WorkflowBlockedCommandReason[];
 }
 
-export function TwAlertBanner(props: TwAlertBannerProps) {
+/**
+ * TwAlertBanner — single-row chrome strip above the toolbar (designsystem §6.17).
+ *
+ * Lane 6b §6b.S5 contract:
+ *   (1) ONE banner at a time, highest severity wins.
+ *   (2) Precedence: fatalError > blockExport > workflowBlocked > preserveOnly.
+ *   (3) Severity tones bind Lane 6a `--color-semantic-*` tokens — no legacy
+ *       `bg-danger-soft` / `bg-warning-soft` / `bg-amber-50` class names.
+ *   (4) Error (fatal / blockExport)  → `--color-semantic-error(-soft)`
+ *       Warning (workflow / preserve) → `--color-semantic-warning(-soft)`
+ */
+
+type BannerSeverity = "error" | "warning";
+
+interface BannerRender {
+  severity: BannerSeverity;
+  icon: ReactNode;
+  message: ReactNode;
+  testid: string;
+}
+
+function renderBanner(variant: BannerRender): React.ReactElement {
+  const { severity, icon, message, testid } = variant;
+  const toneClass =
+    severity === "error"
+      ? "bg-[var(--color-semantic-error-soft)] text-[var(--color-semantic-error)]"
+      : "bg-[var(--color-semantic-warning-soft)] text-[var(--color-semantic-warning)]";
+  return (
+    <div
+      role="alert"
+      aria-live={severity === "error" ? "assertive" : "polite"}
+      data-testid={testid}
+      data-severity={severity}
+      className={[
+        "flex items-center gap-2 px-3 py-1.5 text-xs",
+        "transition-colors duration-[var(--motion-fast)]",
+        toneClass,
+      ].join(" ")}
+    >
+      {icon}
+      <span>{message}</span>
+    </div>
+  );
+}
+
+export function TwAlertBanner(
+  props: TwAlertBannerProps,
+): React.ReactElement | null {
   const { snapshot, preserveOnlyCount, workflowBlockedReasons = [] } = props;
 
+  // 1. Fatal runtime error — highest precedence.
   if (snapshot.fatalError) {
-    return (
-      <div className="flex items-center gap-2 px-3 py-1.5 bg-danger-soft text-danger text-xs">
-        <XCircle className="h-3.5 w-3.5 shrink-0" />
-        <span>{snapshot.fatalError.message}</span>
-      </div>
-    );
+    return renderBanner({
+      severity: "error",
+      icon: <XCircle className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />,
+      message: snapshot.fatalError.message,
+      testid: "tw-alert-banner__fatal",
+    });
   }
 
+  // 2. Export blocked — compatibility engine says we can't round-trip.
   if (snapshot.compatibility.blockExport) {
-    return (
-      <div className="flex items-center gap-2 px-3 py-1.5 bg-danger-soft text-danger text-xs">
-        <XCircle className="h-3.5 w-3.5 shrink-0" />
-        <span>
+    return renderBanner({
+      severity: "error",
+      icon: <XCircle className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />,
+      message: (
+        <>
           Export blocked &mdash;{" "}
-          {snapshot.compatibility.blockExportReasons[0] ?? "unsupported content"}
-        </span>
-      </div>
-    );
-  }
-
-  if (preserveOnlyCount > 0) {
-    return (
-      <div className="flex items-center gap-2 px-3 py-1.5 bg-warning-soft text-comment text-xs">
-        <AlertTriangle className="h-3.5 w-3.5 shrink-0" />
-        <span>
-          {preserveOnlyCount} preserve-only feature
-          {preserveOnlyCount !== 1 ? "s" : ""} detected
-        </span>
-      </div>
-    );
+          {snapshot.compatibility.blockExportReasons[0] ??
+            "unsupported content"}
+        </>
+      ),
+      testid: "tw-alert-banner__block-export",
+    });
   }
 
+  // 3. Workflow blocked — host policy refuses a command, per reasons.
   if (workflowBlockedReasons.length > 0) {
-    const firstReason = workflowBlockedReasons[0];
-    return (
-      <div className="flex items-center gap-2 px-3 py-1.5 bg-amber-50 text-amber-700 text-xs">
-        <AlertTriangle className="h-3.5 w-3.5 shrink-0" />
-        <span>
+    const firstReason = workflowBlockedReasons[0]!;
+    return renderBanner({
+      severity: "warning",
+      icon: (
+        <AlertTriangle className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />
+      ),
+      message: (
+        <>
           {firstReason.message}
           {workflowBlockedReasons.length > 1
             ? ` (+${workflowBlockedReasons.length - 1} more)`
             : ""}
-        </span>
-      </div>
-    );
+        </>
+      ),
+      testid: "tw-alert-banner__workflow-blocked",
+    });
+  }
+
+  // 4. Preserve-only features — lowest precedence warning.
+  if (preserveOnlyCount > 0) {
+    return renderBanner({
+      severity: "warning",
+      icon: (
+        <AlertTriangle className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />
+      ),
+      message: (
+        <>
+          {preserveOnlyCount} preserve-only feature
+          {preserveOnlyCount !== 1 ? "s" : ""} detected
+        </>
+      ),
+      testid: "tw-alert-banner__preserve-only",
+    });
   }
 
   return null;