@beyondwork/docx-react-component 1.0.28 → 1.0.30

package/src/ui-tailwind/editor-surface/tw-table-node-view.tsx

@@ -277,6 +277,69 @@ function requestTableLayoutSync(start: HTMLElement): void {
   table?.dispatchEvent(new Event(TABLE_LAYOUT_SYNC_EVENT));
 }
 
+function applyTableAttrs(table: HTMLTableElement, node: PMNode): void {
+  table.className = "border-collapse w-full my-2 text-sm";
+  table.setAttribute("data-pm-table-root", "true");
+  table.style.marginLeft = "";
+  table.style.marginRight = "";
+  const alignment = node.attrs.alignment as string | null | undefined;
+  if (alignment === "center") {
+    table.style.marginLeft = "auto";
+    table.style.marginRight = "auto";
+  } else if (alignment === "right") {
+    table.style.marginLeft = "auto";
+  }
+}
+
+function applyRowAttrs(row: HTMLTableRowElement, node: PMNode): void {
+  row.style.height = "";
+  row.style.minHeight = "";
+  const height = node.attrs.height as number | null | undefined;
+  const heightRule = node.attrs.heightRule as string | null | undefined;
+  if (typeof height !== "number" || height <= 0) {
+    return;
+  }
+  const points = `${height / 20}pt`;
+  if (heightRule === "exact") {
+    row.style.height = points;
+  } else if (heightRule === "atLeast") {
+    row.style.minHeight = points;
+  }
+}
+
+function applyCellAttrs(cell: HTMLTableCellElement, node: PMNode, isHeader: boolean): void {
+  cell.className = isHeader
+    ? "border border-primary/20 p-2 align-top font-semibold bg-surface-raised"
+    : "border border-primary/20 p-2 align-top";
+
+  const backgroundColor = node.attrs.backgroundColor as string | null | undefined;
+  const verticalAlign = node.attrs.verticalAlign as "top" | "center" | "bottom" | null | undefined;
+  const borderTop = node.attrs.borderTop as string | null | undefined;
+  const borderRight = node.attrs.borderRight as string | null | undefined;
+  const borderBottom = node.attrs.borderBottom as string | null | undefined;
+  const borderLeft = node.attrs.borderLeft as string | null | undefined;
+
+  if (backgroundColor) cell.setAttribute("data-cell-background", backgroundColor);
+  else cell.removeAttribute("data-cell-background");
+  if (verticalAlign && verticalAlign !== "top") cell.setAttribute("data-vertical-align", verticalAlign);
+  else cell.removeAttribute("data-vertical-align");
+  if (borderTop) cell.setAttribute("data-border-top", borderTop);
+  else cell.removeAttribute("data-border-top");
+  if (borderRight) cell.setAttribute("data-border-right", borderRight);
+  else cell.removeAttribute("data-border-right");
+  if (borderBottom) cell.setAttribute("data-border-bottom", borderBottom);
+  else cell.removeAttribute("data-border-bottom");
+  if (borderLeft) cell.setAttribute("data-border-left", borderLeft);
+  else cell.removeAttribute("data-border-left");
+
+  cell.style.backgroundColor = backgroundColor ?? "";
+  cell.style.verticalAlign = verticalAlign === "center" ? "middle" : (verticalAlign ?? "");
+  cell.style.borderTop = borderTop ?? "";
+  cell.style.borderRight = borderRight ?? "";
+  cell.style.borderBottom = borderBottom ?? "";
+  cell.style.borderLeft = borderLeft ?? "";
+}
+
 /**
  * NodeView for the table node.
  * Renders as <table><tbody>...</tbody></table>.
@@ -293,8 +356,7 @@ export class TableNodeView {
     this.node = node;
 
     const table = document.createElement("table");
-    table.className = "border-collapse w-full my-2 text-sm";
-    table.setAttribute("data-pm-table-root", "true");
+    applyTableAttrs(table, node);
 
     const tbody = document.createElement("tbody");
     table.appendChild(tbody);
@@ -314,6 +376,7 @@ export class TableNodeView {
     }
 
     this.node = node;
+    applyTableAttrs(this.dom as HTMLTableElement, node);
     this.scheduleLayoutSync();
     return true;
   }
@@ -357,11 +420,17 @@ export class TableRowNodeView {
   dom: HTMLElement;
   contentDOM: HTMLElement;
 
-  constructor(_node: PMNode) {
+  constructor(node: PMNode) {
     const tr = document.createElement("tr");
+    applyRowAttrs(tr, node);
     this.dom = tr;
     this.contentDOM = tr;
   }
+
+  update(node: PMNode): boolean {
+    applyRowAttrs(this.dom as HTMLTableRowElement, node);
+    return true;
+  }
 }
 
 /**
@@ -377,10 +446,7 @@ export class TableCellNodeView {
   constructor(node: PMNode) {
     const isHeader = (node.type.spec as { tableRole?: string }).tableRole === "header_cell";
     const cell = document.createElement(isHeader ? "th" : "td");
-
-    cell.className = isHeader
-      ? "border border-primary/20 p-2 align-top font-semibold bg-surface-raised"
-      : "border border-primary/20 p-2 align-top";
+    applyCellAttrs(cell, node, isHeader);
 
     const colspan = resolveRenderedColspan(node);
     const rowspan = resolveRenderedRowspan(node);
@@ -409,6 +475,7 @@ export class TableCellNodeView {
     const colspan = resolveRenderedColspan(node);
     const rowspan = resolveRenderedRowspan(node);
     const cell = this.dom as HTMLTableCellElement;
+    applyCellAttrs(cell, node, isHeader);
     cell.colSpan = colspan > 1 ? colspan : 1;
     cell.rowSpan = rowspan > 1 ? rowspan : 1;
     cell.style.display = "";

package/src/ui-tailwind/review/tw-comment-sidebar.tsx

@@ -22,7 +22,7 @@ export function TwCommentSidebar(props: TwCommentSidebarProps) {
 
   return (
     <div className="outline-none">
-      <div className="mb-2 flex items-center gap-2 text-[10px] text-tertiary">
+      <div className="mb-3 flex items-center gap-2 text-[11px] text-tertiary">
         <span>{comments.openCommentIds.length} open</span>
         <span className="text-border">·</span>
         <span>{comments.resolvedCommentIds.length} resolved</span>
@@ -34,7 +34,7 @@ export function TwCommentSidebar(props: TwCommentSidebarProps) {
         )}
       </div>
       {comments.threads.length > 0 ? (
-        <div className="space-y-1.5">
+        <div className="space-y-2">
           {comments.threads.map((thread) => (
             <CommentThreadCard
               key={thread.commentId}
@@ -50,7 +50,7 @@ export function TwCommentSidebar(props: TwCommentSidebarProps) {
           ))}
         </div>
       ) : (
-        <div className="rounded-lg border border-dashed border-border bg-surface/60 px-2.5 py-3 text-[10px] leading-4 text-tertiary">
+        <div className="rounded-lg bg-surface px-3 py-3 text-[11px] leading-5 text-tertiary ring-1 ring-border/40">
           No comment threads yet. Select text and add one from the toolbar.
         </div>
       )}
@@ -93,11 +93,11 @@ function CommentThreadCard(props: {
       role="button"
       tabIndex={0}
       className={[
-        "cursor-pointer rounded-lg border px-2 py-1.5 transition-colors",
+        "cursor-pointer rounded-md bg-surface/90 px-3 py-2.5 transition-colors ring-1 ring-border/40",
         focusRingClass,
         isActive
-          ? "border-accent/25 bg-accent-soft/35"
-          : "border-border bg-canvas hover:border-border-strong hover:bg-surface/70",
+          ? "bg-accent-soft/40 ring-accent/25"
+          : "hover:bg-surface",
         thread.status === "detached" ? "opacity-70" : "",
       ].join(" ")}
       onClick={() => props.onOpenComment?.(thread)}
@@ -109,8 +109,8 @@ function CommentThreadCard(props: {
       }}
     >
       {/* Header row: avatar + author + date + status */}
-      <div className="mb-1 flex items-center gap-1.5">
-        <span className="inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-accent/10 text-[8px] font-semibold text-accent">
+      <div className="mb-1.5 flex items-center gap-1.5">
+        <span className="inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-subtle text-[8px] font-semibold text-secondary">
           {thread.createdBy.charAt(0).toUpperCase()}
         </span>
         <span className="truncate text-[10px] font-medium text-primary">{thread.createdBy}</span>
@@ -125,7 +125,7 @@ function CommentThreadCard(props: {
 
       {/* Excerpt — anchored text from document */}
       {showExcerpt ? (
-        <p className="mb-1 rounded-md border-l-2 border-comment/25 bg-comment-soft/30 px-2 py-1 text-[9px] leading-4 text-comment/80 italic whitespace-pre-wrap break-words line-clamp-2">
+        <p className="mb-1.5 rounded-md bg-comment-soft px-2 py-1 text-[9px] leading-4 text-secondary italic whitespace-pre-wrap break-words line-clamp-2">
           {thread.excerpt}
         </p>
       ) : null}
@@ -159,7 +159,7 @@ function CommentThreadCard(props: {
 
       {/* Reply entries (compact) */}
       {thread.entries.slice(1).map((entry) => (
-        <div key={entry.entryId} className="mt-1.5 ml-4 border-l border-border/50 pl-2.5">
+        <div key={entry.entryId} className="mt-2 ml-4 border-l border-border/50 pl-2.5">
           <div className="mb-0.5 flex items-center gap-1">
             <span className="text-[9px] font-medium text-secondary">{entry.authorId}</span>
             <span className="text-[9px] text-tertiary">{formatCommentDate(entry.createdAt)}</span>
@@ -180,12 +180,12 @@ function CommentThreadCard(props: {
       ) : null}
 
       {/* Inline actions — compact, horizontal */}
-      <div className="mt-1 flex items-center gap-0.5">
+      <div className="mt-2 flex items-center gap-1">
         {thread.status === "open" && (
           <>
             <button
               type="button"
-              className="inline-flex items-center gap-0.5 rounded px-1 py-0.5 text-[9px] font-medium text-insert hover:bg-insert-soft transition-colors"
+              className="inline-flex items-center gap-0.5 rounded px-1 py-0.5 text-[9px] font-medium text-accent hover:bg-accent-soft transition-colors"
               onClick={(e) => { e.stopPropagation(); props.onResolveComment?.(thread.commentId); }}
             >
               <Check className="h-2 w-2" /> Resolve
@@ -198,7 +198,7 @@ function CommentThreadCard(props: {
         {thread.status === "resolved" && (
           <button
             type="button"
-            className="inline-flex items-center gap-0.5 rounded px-1 py-0.5 text-[9px] font-medium text-secondary hover:bg-surface transition-colors"
+            className="inline-flex items-center gap-0.5 rounded px-1 py-0.5 text-[9px] font-medium text-secondary hover:bg-surface-hover transition-colors"
             data-comment-thread-action="reopen"
             onClick={(e) => { e.stopPropagation(); props.onReopenComment?.(thread.commentId); }}
           >
@@ -233,7 +233,7 @@ function InlineEditableBody(props: {
   if (!isEditing) {
     return (
       <p
-        className={`cursor-text rounded px-1 text-[10px] leading-[1.15rem] -mx-1 transition-colors hover:bg-surface ${props.body ? "text-secondary" : "text-tertiary italic"}`}
+        className={`-mx-1 cursor-text rounded px-1 text-[10px] leading-[1.15rem] transition-colors hover:bg-surface ${props.body ? "text-secondary" : "text-tertiary italic"}`}
         onClick={(e) => {
           e.stopPropagation();
           setDraft(props.body);
@@ -255,7 +255,7 @@ function InlineEditableBody(props: {
       ) : null}
       <textarea
         ref={textareaRef}
-        className="w-full resize-none rounded-md border border-border bg-surface px-2 py-1.5 text-[10px] leading-4 text-primary placeholder:text-tertiary focus:outline-none focus:ring-1 focus:ring-accent"
+        className="w-full resize-none rounded-md bg-surface px-2 py-1.5 text-[10px] leading-4 text-primary placeholder:text-tertiary focus:outline-none focus:ring-1 focus:ring-accent ring-1 ring-border/50"
         rows={2}
         value={draft}
         placeholder="Type your comment..."
@@ -301,7 +301,7 @@ function ReplyInput(props: { commentId: string; onAddReply: (commentId: string,
     return (
       <button
         type="button"
-        className="inline-flex items-center gap-0.5 rounded px-1.5 py-0.5 text-[10px] font-medium text-tertiary hover:text-secondary hover:bg-surface transition-colors"
+        className="inline-flex items-center gap-0.5 rounded px-1.5 py-0.5 text-[10px] font-medium text-tertiary hover:bg-surface-hover hover:text-secondary transition-colors"
         onClick={(e) => {
           e.stopPropagation();
           setIsOpen(true);
@@ -316,7 +316,7 @@ function ReplyInput(props: { commentId: string; onAddReply: (commentId: string,
     <div className="w-full mt-1.5" onClick={(e) => e.stopPropagation()}>
       <textarea
         ref={inputRef}
-        className="w-full rounded border border-border bg-surface px-2 py-1 text-[11px] text-primary placeholder:text-tertiary resize-none focus:outline-none focus:ring-1 focus:ring-accent"
+        className="w-full resize-none rounded bg-surface px-2 py-1 text-[11px] text-primary placeholder:text-tertiary focus:outline-none focus:ring-1 focus:ring-accent ring-1 ring-border/50"
         rows={2}
         placeholder="Reply..."
         value={body}

package/src/ui-tailwind/review/tw-review-rail.tsx

@@ -8,13 +8,13 @@ import type {
   CommentSidebarThreadSnapshot,
   CompatibilityPanelSnapshot,
   EditorWarning,
+  RuntimeContextAnalyticsSnapshot,
   TrackedChangesSnapshot,
   TrackedChangeEntrySnapshot,
 } from "../../api/public-types";
 import type { MarkupDisplay } from "../../ui/headless/comment-decoration-model";
 import { TwCommentSidebar } from "./tw-comment-sidebar";
 import { TwRevisionSidebar } from "./tw-revision-sidebar";
-import { TwHealthPanel } from "./tw-health-panel";
 
 export type ReviewRailTab = "comments" | "changes";
 
@@ -26,6 +26,7 @@ export interface TwReviewRailProps {
   compatibility: CompatibilityPanelSnapshot;
   warnings: EditorWarning[];
   markupDisplay: MarkupDisplay;
+  contextAnalytics?: RuntimeContextAnalyticsSnapshot | null;
   activeCommentId?: string;
   activeRevisionId?: string;
   onActiveTabChange: (tab: ReviewRailTab) => void;
@@ -45,41 +46,44 @@ 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 TwReviewRail(props: TwReviewRailProps) {
-  const warningCount = props.compatibility.featureEntries.filter(
-    (e) => e.featureClass !== "supported-roundtrip",
-  ).length + props.warnings.length;
-
   return (
     <aside
       aria-label="Review rail"
-      className="flex w-[304px] shrink-0 flex-col border-l border-border bg-canvas"
+      className="flex w-[336px] shrink-0 flex-col border-l border-border/60 bg-[var(--color-sidebar-tint)]"
     >
       <Tabs.Root
         value={props.activeTab}
         onValueChange={(v: string) => props.onActiveTabChange(v as ReviewRailTab)}
         className="flex flex-1 flex-col min-h-0"
       >
-        <Tabs.List className="flex shrink-0 border-b border-border px-2">
+        <Tabs.List className="flex shrink-0 border-b border-border/60 px-3 py-2">
           <Tabs.Trigger
             value="comments"
-            className={`flex-1 py-2 text-xs text-tertiary font-medium transition-colors data-[state=active]:text-primary data-[state=active]:font-semibold data-[state=active]:shadow-[inset_0_-2px_0_var(--color-accent)] outline-none ${focusRingClass}`}
+            className={`flex-1 rounded-lg px-3 py-1.5 text-xs font-medium text-tertiary transition-colors data-[state=active]:bg-surface data-[state=active]:text-primary data-[state=active]:shadow-[0_1px_0_var(--color-shadow)] outline-none ${focusRingClass}`}
           >
             Comments{" "}
-            <span className="ml-1 inline-flex min-w-[14px] items-center justify-center rounded-full bg-subtle px-1.5 py-px text-[10px] font-medium text-tertiary">{props.comments.totalCount}</span>
+            {props.comments.totalCount > 0 ? (
+              <span className="ml-1 inline-flex min-w-[14px] items-center justify-center rounded-full bg-subtle px-1.5 py-px text-[10px] font-medium text-tertiary">
+                {props.comments.totalCount}
+              </span>
+            ) : null}
           </Tabs.Trigger>
           <Tabs.Trigger
             value="changes"
-            className={`flex-1 py-2 text-xs text-tertiary font-medium transition-colors data-[state=active]:text-primary data-[state=active]:font-semibold data-[state=active]:shadow-[inset_0_-2px_0_var(--color-accent)] outline-none ${focusRingClass}`}
+            className={`flex-1 rounded-lg px-3 py-1.5 text-xs font-medium text-tertiary transition-colors data-[state=active]:bg-surface data-[state=active]:text-primary data-[state=active]:shadow-[0_1px_0_var(--color-shadow)] outline-none ${focusRingClass}`}
           >
             Changes{" "}
-            <span className="ml-1 inline-flex min-w-[14px] items-center justify-center rounded-full bg-subtle px-1.5 py-px text-[10px] font-medium text-tertiary">{props.trackedChanges.totalCount}</span>
+            {props.trackedChanges.totalCount > 0 ? (
+              <span className="ml-1 inline-flex min-w-[14px] items-center justify-center rounded-full bg-subtle px-1.5 py-px text-[10px] font-medium text-tertiary">
+                {props.trackedChanges.totalCount}
+              </span>
+            ) : null}
           </Tabs.Trigger>
-          {/* Health moved to toolbar popover */}
         </Tabs.List>
 
         <ScrollArea.Root className="flex-1 min-h-0">
           <ScrollArea.Viewport className="h-full w-full">
-            <Tabs.Content value="comments" className="p-2.5 outline-none">
+            <Tabs.Content value="comments" className="p-3 outline-none">
               <TwCommentSidebar
                 currentUserId={props.currentUserId}
                 comments={props.comments}
@@ -92,7 +96,7 @@ export function TwReviewRail(props: TwReviewRailProps) {
               />
             </Tabs.Content>
 
-            <Tabs.Content value="changes" className="p-2.5 outline-none">
+            <Tabs.Content value="changes" className="p-3 outline-none">
               <TwRevisionSidebar
                 trackedChanges={props.trackedChanges}
                 markupDisplay={props.markupDisplay}
@@ -104,14 +108,12 @@ export function TwReviewRail(props: TwReviewRailProps) {
                 onRejectAllChanges={props.onRejectAllChanges}
               />
             </Tabs.Content>
-
-            {/* Health panel moved to toolbar popover */}
           </ScrollArea.Viewport>
           <ScrollArea.Scrollbar
             orientation="vertical"
             className="flex w-1.5 touch-none select-none p-0.5"
           >
-            <ScrollArea.Thumb className="relative flex-1 rounded-full bg-black/[0.12]" />
+            <ScrollArea.Thumb className="relative flex-1 rounded-full bg-[color:color-mix(in_srgb,var(--color-secondary)_18%,transparent)]" />
           </ScrollArea.Scrollbar>
         </ScrollArea.Root>
       </Tabs.Root>

package/src/ui-tailwind/review/tw-revision-sidebar.tsx

@@ -28,12 +28,12 @@ export function TwRevisionSidebar(props: TwRevisionSidebarProps) {
 
   return (
     <div className="outline-none">
-      <p className="mb-2 text-[10px] text-tertiary">
+      <p className="mb-3 text-[11px] text-tertiary">
         {trackedChanges.pendingChangeIds.length} active · {trackedChanges.acceptedChangeIds.length} accepted · {trackedChanges.preserveOnlyChangeIds.length} preserve-only
       </p>
 
       {/* Bulk actions */}
-      <div className="mb-2 flex gap-1">
+      <div className="mb-3 flex gap-1.5">
         <button
           type="button"
           disabled={actionablePendingCount === 0}
@@ -45,7 +45,7 @@ export function TwRevisionSidebar(props: TwRevisionSidebarProps) {
         <button
           type="button"
           disabled={actionablePendingCount === 0}
-          className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-[10px] text-secondary hover:bg-surface transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+          className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-[10px] text-secondary hover:bg-surface-hover transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
           onClick={props.onRejectAllChanges}
         >
           Reject all
@@ -53,7 +53,7 @@ export function TwRevisionSidebar(props: TwRevisionSidebarProps) {
       </div>
 
       {visibleRevisions.length > 0 ? (
-        <div className="space-y-1">
+        <div className="space-y-2">
           {visibleRevisions.map((rev) => {
             const isActive = activeRevisionId === rev.revisionId;
 
@@ -62,7 +62,7 @@ export function TwRevisionSidebar(props: TwRevisionSidebarProps) {
                 key={rev.revisionId}
                 role="button"
                 tabIndex={0}
-                className={`flex rounded-lg transition-colors cursor-pointer ${focusRingClass} ${isActive ? "bg-accent-soft" : "hover:bg-surface"}`}
+                className={`flex cursor-pointer rounded-md bg-surface/90 transition-colors ring-1 ring-border/40 ${focusRingClass} ${isActive ? "bg-accent-soft/40 ring-accent/25" : "hover:bg-surface"}`}
                 onClick={() => props.onOpenRevision?.(rev)}
                 onKeyDown={(event) => {
                   if (event.key === "Enter" || event.key === " ") {
@@ -71,7 +71,7 @@ export function TwRevisionSidebar(props: TwRevisionSidebarProps) {
                   }
                 }}
               >
-                <div className={`w-0.5 shrink-0 rounded-l-lg ${
+                <div className={`w-0.5 shrink-0 rounded-l-md ${
                   rev.kind === "insertion" ? "bg-insert"
                   : rev.kind === "deletion" ? "bg-danger"
                   : "bg-tertiary"
@@ -96,13 +96,13 @@ export function TwRevisionSidebar(props: TwRevisionSidebarProps) {
                   {rev.detail ? (
                     <p className="mt-1 text-[10px] text-secondary">{rev.detail}</p>
                   ) : null}
-                  <div className="mt-1.5 flex gap-1">
+                  <div className="mt-2 flex gap-1.5">
                     {rev.actionability === "actionable" ? (
                       <>
                         <button
                           type="button"
                           disabled={!rev.canAccept || rev.status === "accepted"}
-                          className="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] text-insert hover:bg-insert-soft transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+                          className="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] text-accent hover:bg-accent-soft transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
                           onClick={(e) => {
                             e.stopPropagation();
                             props.onAcceptRevision?.(rev.revisionId);
@@ -113,7 +113,7 @@ export function TwRevisionSidebar(props: TwRevisionSidebarProps) {
                         <button
                           type="button"
                           disabled={!rev.canReject || rev.status === "rejected"}
-                          className="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] text-danger hover:bg-delete-soft transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+                          className="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] text-danger hover:bg-danger-soft transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
                           onClick={(e) => {
                             e.stopPropagation();
                             props.onRejectRevision?.(rev.revisionId);
@@ -132,7 +132,7 @@ export function TwRevisionSidebar(props: TwRevisionSidebarProps) {
           })}
         </div>
       ) : (
-        <p className="text-xs text-tertiary py-4">
+        <p className="rounded-lg bg-surface px-3 py-4 text-xs text-tertiary ring-1 ring-border/40">
           {trackedChanges.totalCount > 0
             ? "Switch to Full markup to see all tracked changes."
             : "Tracked change cards will appear here when present."}

package/src/ui-tailwind/status/tw-status-bar.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 
+import type { RuntimeContextAnalyticsSnapshot } from "../../api/public-types";
+
 export interface TwStatusBarProps {
   isDirty: boolean;
   isExportBlocked: boolean;
@@ -7,6 +9,7 @@ export interface TwStatusBarProps {
   commentCount: number;
   changeCount: number;
   sessionId: string;
+  contextAnalytics?: RuntimeContextAnalyticsSnapshot | null;
 }
 
 export function TwStatusBar(props: TwStatusBarProps) {
@@ -20,11 +23,10 @@ export function TwStatusBar(props: TwStatusBarProps) {
     : props.preserveOnlyCount > 0
       ? "Warnings"
       : "Ready";
-
   return (
     <footer
       data-testid="status-bar"
-      className="flex h-7 shrink-0 items-center gap-4 border-t border-border px-3 text-xs text-tertiary"
+      className="flex h-7 shrink-0 items-center gap-3 border-t border-border/60 bg-surface/72 px-3 text-[11px] text-tertiary"
     >
       <span className="flex items-center gap-1.5">
         <span
@@ -33,7 +35,7 @@ export function TwStatusBar(props: TwStatusBarProps) {
               ? "bg-danger"
               : props.isDirty
                 ? "bg-comment"
-                : "bg-insert"
+                : "bg-accent"
           }`}
         />
         {saveState}
@@ -44,8 +46,8 @@ export function TwStatusBar(props: TwStatusBarProps) {
             props.isExportBlocked
               ? "bg-danger"
               : props.preserveOnlyCount > 0
-                ? "bg-comment"
-                : "bg-insert"
+                ? "bg-warning"
+                : "bg-accent"
           }`}
         />
         Export {exportState.toLowerCase()}
@@ -55,7 +57,9 @@ export function TwStatusBar(props: TwStatusBarProps) {
         {props.changeCount} change{props.changeCount !== 1 ? "s" : ""}
       </span>
       <span className="flex-1" />
-      <span>{props.sessionId}</span>
+      <span className="truncate text-[10px] uppercase tracking-[0.12em] text-tertiary/80">
+        Session active
+      </span>
     </footer>
   );
 }

package/src/ui-tailwind/theme/editor-theme.css

@@ -17,14 +17,15 @@
 
 @theme {
   /* Backgrounds */
-  --color-surface: #f7f7f5;
-  --color-surface-hover: #ebebea;
-  --color-surface-active: #e3e3e1;
-  --color-subtle: #f0f0ee;
+  --color-surface: #fafbf9;
+  --color-surface-hover: #f1f4f1;
+  --color-surface-active: #e8eeea;
+  --color-subtle: #eff3ef;
   --color-canvas: #ffffff;
-  --color-shell-bg: #f3efe7;
-  --color-card: #faf8f2;
-  --color-editor-frame: #f6f3ee;
+  --color-shell-bg: #f4f8f5;
+  --color-card: #ffffff;
+  --color-editor-frame: #f7faf7;
+  --color-sidebar-tint: rgba(247, 250, 247, 0.92);
 
   /* Text */
   --color-primary: #1f1f1f;
@@ -32,29 +33,31 @@
   --color-tertiary: #616161;
 
   /* Accent */
-  --color-accent: #1660a8;
-  --color-accent-soft: rgba(22, 96, 168, 0.08);
+  --color-accent: #18b394;
+  --color-accent-soft: rgba(24, 179, 148, 0.1);
+  --color-workflow: #7557d8;
+  --color-workflow-soft: rgba(117, 87, 216, 0.12);
 
   /* Review — comments */
-  --color-comment: #7a4f00;
-  --color-comment-soft: rgba(255, 212, 0, 0.14);
-  --color-comment-strong: rgba(255, 212, 0, 0.25);
+  --color-comment: #7557d8;
+  --color-comment-soft: rgba(117, 87, 216, 0.12);
+  --color-comment-strong: rgba(117, 87, 216, 0.18);
 
   /* Review — insertions */
-  --color-insert: #1a7f37;
-  --color-insert-soft: rgba(26, 127, 55, 0.08);
+  --color-insert: #2f6b4f;
+  --color-insert-soft: rgba(47, 107, 79, 0.1);
 
   /* Review — deletions */
-  --color-delete: #cf222e;
-  --color-delete-soft: rgba(207, 34, 46, 0.06);
+  --color-delete: #9b4f49;
+  --color-delete-soft: rgba(155, 79, 73, 0.08);
 
   /* Semantic */
-  --color-warning: #7a4f00;
-  --color-warning-soft: rgba(154, 103, 0, 0.08);
-  --color-danger: #cf222e;
-  --color-danger-soft: rgba(207, 34, 46, 0.08);
-  --color-success: #1a7f37;
-  --color-success-soft: rgba(26, 127, 55, 0.08);
+  --color-warning: #7557d8;
+  --color-warning-soft: rgba(117, 87, 216, 0.12);
+  --color-danger: #9b4f49;
+  --color-danger-soft: rgba(155, 79, 73, 0.1);
+  --color-success: #2f6b4f;
+  --color-success-soft: rgba(47, 107, 79, 0.1);
 
   /* Borders */
   --color-border: rgba(0, 0, 0, 0.06);
@@ -85,28 +88,31 @@
   --color-shell-bg: #171514;
   --color-card: #23211f;
   --color-editor-frame: #1d1b19;
+  --color-sidebar-tint: rgba(29, 27, 25, 0.94);
 
   --color-primary: #e4e4e4;
   --color-secondary: #a0a0a0;
   --color-tertiary: #6e6e6e;
 
-  --color-accent: #4ca6f0;
-  --color-accent-soft: rgba(76, 166, 240, 0.12);
-
-  --color-comment: #d4a020;
-  --color-comment-soft: rgba(212, 160, 32, 0.16);
-  --color-comment-strong: rgba(212, 160, 32, 0.28);
-  --color-insert: #3fb950;
-  --color-insert-soft: rgba(63, 185, 80, 0.12);
-  --color-delete: #f85149;
-  --color-delete-soft: rgba(248, 81, 73, 0.12);
-
-  --color-warning: #d4a020;
-  --color-warning-soft: rgba(212, 160, 32, 0.12);
-  --color-danger: #f85149;
-  --color-danger-soft: rgba(248, 81, 73, 0.12);
-  --color-success: #3fb950;
-  --color-success-soft: rgba(63, 185, 80, 0.12);
+  --color-accent: #5edec1;
+  --color-accent-soft: rgba(94, 222, 193, 0.14);
+  --color-workflow: #c7b6ff;
+  --color-workflow-soft: rgba(199, 182, 255, 0.16);
+
+  --color-comment: #c7b6ff;
+  --color-comment-soft: rgba(199, 182, 255, 0.18);
+  --color-comment-strong: rgba(199, 182, 255, 0.24);
+  --color-insert: #8fd2a9;
+  --color-insert-soft: rgba(143, 210, 169, 0.18);
+  --color-delete: #d78d84;
+  --color-delete-soft: rgba(215, 141, 132, 0.14);
+
+  --color-warning: #c7b6ff;
+  --color-warning-soft: rgba(199, 182, 255, 0.16);
+  --color-danger: #d78d84;
+  --color-danger-soft: rgba(215, 141, 132, 0.16);
+  --color-success: #8fd2a9;
+  --color-success-soft: rgba(143, 210, 169, 0.18);
 
   --color-border: rgba(255, 255, 255, 0.08);
   --color-border-strong: rgba(255, 255, 255, 0.14);
@@ -184,7 +190,7 @@
   background: var(--color-page-bg);
   border: 1px solid var(--color-page-border);
   border-radius: 2px;
-  box-shadow: 0 1px 4px var(--color-page-shadow);
+  box-shadow: 0 8px 24px -20px var(--color-page-shadow);
 }
 
 /* Canvas-mode typography — lighter, review-first baseline */
@@ -193,6 +199,12 @@
   font-size: 15px;
   line-height: 1.6;
   color: var(--color-primary);
+  width: min(100%, 920px);
+  min-height: 100%;
+  background: var(--color-page-bg);
+  border: 1px solid var(--color-page-border);
+  border-radius: 2px;
+  box-shadow: 0 6px 18px -14px var(--color-page-shadow);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
@@ -248,6 +260,7 @@
   cursor: text;
   border: none;
   box-shadow: none;
+  white-space: pre-wrap;
 }
 
 .prosemirror-surface .ProseMirror:focus {
@@ -294,6 +307,11 @@
   text-underline-offset: 0.18em;
 }
 
+.prosemirror-surface .ProseMirror .wre-workflow-inline-metadata {
+  background: color-mix(in srgb, var(--wre-workflow-metadata-color, var(--color-accent)) 12%, transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wre-workflow-metadata-color, var(--color-accent)) 22%, transparent);
+}
+
 .prosemirror-surface .ProseMirror .wre-workflow-inline-preserve-only {
   background: color-mix(in srgb, var(--color-danger) 7%, transparent);
   box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-danger) 18%, transparent);