@beyondwork/docx-react-component 1.0.30 → 1.0.32

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

@@ -1,7 +1,6 @@
 import React from "react";
 
 import type {
-  StyleCatalogSnapshot,
   TableOperationCapabilitySnapshot,
   TableStructureContextSnapshot,
 } from "../../api/public-types";
@@ -10,7 +9,7 @@ import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-edi
 export interface TwTableContextToolbarProps {
   disabled: boolean;
   tableContext: TableStructureContextSnapshot | null;
-  tableStyles: StyleCatalogSnapshot["tables"];
+  tableStyles: Array<{ styleId: string; displayName: string }>;
   onSetTableStyle?: (styleId: string) => void;
   onAddRowBefore?: () => void;
   onAddRowAfter?: () => void;
@@ -34,138 +33,188 @@ const CELL_COLORS = [
 ] as const;
 
 export function TwTableContextToolbar(props: TwTableContextToolbarProps) {
+  const tableContext = props.tableContext;
+  const tableSizeLabel = tableContext ? `${tableContext.rowCount} x ${tableContext.columnCount}` : null;
+  const selectionLabel = tableContext
+    ? tableContext.selectedCellCount > 1
+      ? `${tableContext.selectedCellCount} cells`
+      : `R${tableContext.currentCell.rowIndex + 1} C${tableContext.currentCell.columnIndex + 1}`
+    : null;
+
   return (
     <div
       data-testid="table-context-toolbar"
-      className="flex flex-wrap items-center gap-2 rounded-xl border border-border bg-canvas px-3 py-2 shadow-sm"
+      className="flex max-w-[min(30rem,calc(100vw-1.5rem))] flex-wrap items-start gap-1.5 rounded-lg border border-border bg-canvas px-2.5 py-1.5 shadow-sm"
     >
-      <span className="text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+      <span className="text-[9px] font-semibold uppercase tracking-[0.12em] text-tertiary">
         Table
       </span>
+      {tableSizeLabel ? <ToolbarBadge>{tableSizeLabel}</ToolbarBadge> : null}
+      {selectionLabel ? <ToolbarBadge>{selectionLabel}</ToolbarBadge> : null}
+      {tableContext?.currentCell.isHeader ? <ToolbarBadge tone="accent">Header row</ToolbarBadge> : null}
+
+      <ToolbarSection label="Style">
+        <select
+          aria-label="Table style"
+          className="h-7 min-w-[9rem] rounded-md border border-border bg-canvas px-2 text-[11px] text-primary disabled:opacity-40"
+          disabled={
+            props.disabled ||
+            props.tableStyles.length === 0 ||
+            !props.onSetTableStyle ||
+            !tableContext?.operations.setTableStyle.enabled
+          }
+          onMouseDown={preserveEditorSelectionMouseDown}
+          onChange={(event) => props.onSetTableStyle?.(event.target.value)}
+          value={tableContext?.currentStyleId ?? ""}
+          title={tableContext?.operations.setTableStyle.reason}
+        >
+          <option value="" disabled>Table style</option>
+          {props.tableStyles.map((style) => (
+            <option key={style.styleId} value={style.styleId}>
+              {style.displayName}
+            </option>
+          ))}
+        </select>
+      </ToolbarSection>
+
+      <ToolbarSection label="Rows">
+        <ToolbarButton
+          ariaLabel="Add row above"
+          capability={tableContext?.operations.addRowBefore}
+          disabled={props.disabled}
+          onClick={props.onAddRowBefore}
+        >
+          Above
+        </ToolbarButton>
+        <ToolbarButton
+          ariaLabel="Add row below"
+          capability={tableContext?.operations.addRowAfter}
+          disabled={props.disabled}
+          onClick={props.onAddRowAfter}
+        >
+          Below
+        </ToolbarButton>
+        <ToolbarButton
+          ariaLabel="Delete row"
+          capability={tableContext?.operations.deleteRow}
+          disabled={props.disabled}
+          onClick={props.onDeleteRow}
+        >
+          Delete row
+        </ToolbarButton>
+      </ToolbarSection>
 
-      {props.tableContext?.currentCell.isHeader ? (
-        <span className="rounded bg-accent-soft px-2 py-1 text-[10px] font-medium text-accent">
-          Header row
-        </span>
-      ) : null}
+      <ToolbarSection label="Columns">
+        <ToolbarButton
+          ariaLabel="Add column left"
+          capability={tableContext?.operations.addColumnBefore}
+          disabled={props.disabled}
+          onClick={props.onAddColumnBefore}
+        >
+          Left
+        </ToolbarButton>
+        <ToolbarButton
+          ariaLabel="Add column right"
+          capability={tableContext?.operations.addColumnAfter}
+          disabled={props.disabled}
+          onClick={props.onAddColumnAfter}
+        >
+          Right
+        </ToolbarButton>
+        <ToolbarButton
+          ariaLabel="Delete column"
+          capability={tableContext?.operations.deleteColumn}
+          disabled={props.disabled}
+          onClick={props.onDeleteColumn}
+        >
+          Delete column
+        </ToolbarButton>
+      </ToolbarSection>
 
-      <select
-        aria-label="Table style"
-        className="h-8 rounded-md border border-border bg-canvas px-2 text-xs text-primary disabled:opacity-40"
-        disabled={
-          props.disabled ||
-          props.tableStyles.length === 0 ||
-          !props.onSetTableStyle ||
-          !props.tableContext?.operations.setTableStyle.enabled
-        }
-        onMouseDown={preserveEditorSelectionMouseDown}
-        onChange={(event) => props.onSetTableStyle?.(event.target.value)}
-        value={props.tableContext?.currentStyleId ?? ""}
-        title={props.tableContext?.operations.setTableStyle.reason}
-      >
-        <option value="" disabled>Table style</option>
-        {props.tableStyles.map((style) => (
-          <option key={style.styleId} value={style.styleId}>
-            {style.displayName}
-          </option>
-        ))}
-      </select>
+      <ToolbarSection label="Cells">
+        <ToolbarButton
+          ariaLabel="Merge cells"
+          capability={tableContext?.operations.mergeCells}
+          disabled={props.disabled}
+          onClick={props.onMergeCells}
+        >
+          Merge
+        </ToolbarButton>
+        <ToolbarButton
+          ariaLabel="Split cell"
+          capability={tableContext?.operations.splitCell}
+          disabled={props.disabled}
+          onClick={props.onSplitCell}
+        >
+          Split
+        </ToolbarButton>
+      </ToolbarSection>
 
-      <ToolbarButton
-        ariaLabel="Add row above"
-        capability={props.tableContext?.operations.addRowBefore}
-        disabled={props.disabled}
-        onClick={props.onAddRowBefore}
-      >
-        Row above
-      </ToolbarButton>
-      <ToolbarButton
-        ariaLabel="Add row below"
-        capability={props.tableContext?.operations.addRowAfter}
-        disabled={props.disabled}
-        onClick={props.onAddRowAfter}
-      >
-        Row below
-      </ToolbarButton>
-      <ToolbarButton
-        ariaLabel="Delete row"
-        capability={props.tableContext?.operations.deleteRow}
-        disabled={props.disabled}
-        onClick={props.onDeleteRow}
-      >
-        Delete row
-      </ToolbarButton>
-      <ToolbarButton
-        ariaLabel="Add column left"
-        capability={props.tableContext?.operations.addColumnBefore}
-        disabled={props.disabled}
-        onClick={props.onAddColumnBefore}
-      >
-        Column left
-      </ToolbarButton>
-      <ToolbarButton
-        ariaLabel="Add column right"
-        capability={props.tableContext?.operations.addColumnAfter}
-        disabled={props.disabled}
-        onClick={props.onAddColumnAfter}
-      >
-        Column right
-      </ToolbarButton>
-      <ToolbarButton
-        ariaLabel="Delete column"
-        capability={props.tableContext?.operations.deleteColumn}
-        disabled={props.disabled}
-        onClick={props.onDeleteColumn}
-      >
-        Delete column
-      </ToolbarButton>
-      <ToolbarButton
-        ariaLabel="Merge cells"
-        capability={props.tableContext?.operations.mergeCells}
-        disabled={props.disabled}
-        onClick={props.onMergeCells}
-      >
-        Merge
-      </ToolbarButton>
-      <ToolbarButton
-        ariaLabel="Split cell"
-        capability={props.tableContext?.operations.splitCell}
-        disabled={props.disabled}
-        onClick={props.onSplitCell}
-      >
-        Split
-      </ToolbarButton>
+      <ToolbarSection label="Fill">
+        <div className="flex items-center gap-1">
+          {CELL_COLORS.map((color) => (
+            <button
+              key={color}
+              type="button"
+              aria-label={`Set cell fill ${color}`}
+              disabled={
+                props.disabled ||
+                !props.onSetCellBackground ||
+                !tableContext?.operations.setCellBackground.enabled
+              }
+              onMouseDown={preserveEditorSelectionMouseDown}
+              onClick={() => props.onSetCellBackground?.(color)}
+              className="h-5 w-5 rounded border border-border disabled:opacity-40"
+              style={{ backgroundColor: color }}
+              title={tableContext?.operations.setCellBackground.reason}
+            />
+          ))}
+        </div>
+      </ToolbarSection>
 
-      <div className="flex items-center gap-1">
-        <span className="text-[11px] text-secondary">Fill</span>
-        {CELL_COLORS.map((color) => (
-          <button
-            key={color}
-            type="button"
-            aria-label={`Set cell fill ${color}`}
-            disabled={
-              props.disabled ||
-              !props.onSetCellBackground ||
-              !props.tableContext?.operations.setCellBackground.enabled
-            }
-            onMouseDown={preserveEditorSelectionMouseDown}
-            onClick={() => props.onSetCellBackground?.(color)}
-            className="h-6 w-6 rounded border border-border disabled:opacity-40"
-            style={{ backgroundColor: color }}
-            title={props.tableContext?.operations.setCellBackground.reason}
-          />
-        ))}
-      </div>
+      <ToolbarSection label="Table">
+        <ToolbarButton
+          ariaLabel="Delete table"
+          capability={tableContext?.operations.deleteTable}
+          danger
+          disabled={props.disabled}
+          onClick={props.onDeleteTable}
+        >
+          Delete table
+        </ToolbarButton>
+      </ToolbarSection>
+    </div>
+  );
+}
+
+function ToolbarBadge(props: {
+  children: React.ReactNode;
+  tone?: "neutral" | "accent";
+}) {
+  return (
+    <span
+      className={[
+        "rounded-full px-1.5 py-0.5 text-[9px] font-medium uppercase tracking-[0.08em]",
+        props.tone === "accent"
+          ? "bg-accent-soft text-accent"
+          : "bg-surface text-secondary",
+      ].join(" ")}
+    >
+      {props.children}
+    </span>
+  );
+}
 
-      <ToolbarButton
-        ariaLabel="Delete table"
-        capability={props.tableContext?.operations.deleteTable}
-        danger
-        disabled={props.disabled}
-        onClick={props.onDeleteTable}
-      >
-        Delete table
-      </ToolbarButton>
+function ToolbarSection(props: {
+  label: string;
+  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">
+        {props.label}
+      </span>
+      <div className="flex flex-wrap items-center gap-1">{props.children}</div>
     </div>
   );
 }
@@ -188,7 +237,7 @@ function ToolbarButton(props: {
       onMouseDown={preserveEditorSelectionMouseDown}
       onClick={props.onClick}
       title={title}
-      className={`inline-flex h-8 items-center rounded-md px-2 text-xs font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-40 ${
+      className={`inline-flex h-7 items-center rounded-md px-2 text-[11px] font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-40 ${
         props.danger
           ? "text-danger hover:bg-danger/10"
           : "text-primary hover:bg-surface"

package/src/ui-tailwind/editor-surface/pm-decorations.ts

@@ -9,6 +9,7 @@ import type {
   EditorStoryTarget,
   WorkflowBlockedCommandReason,
   WorkflowCandidateRange,
+  WorkflowLockedZone,
   WorkflowMetadataMarkup,
   WorkflowScope,
 } from "../../api/public-types";
@@ -81,16 +82,16 @@ function getWorkflowMetadataInlineClass(): string {
 
 function getWorkflowBlockedInlineClass(reason: WorkflowBlockedCommandReason): string {
   if (reason.code === "workflow_blocked_import") {
-    return "wre-workflow-inline wre-workflow-inline-blocked-import";
+    return "wre-workflow-inline wre-workflow-inline-locked-zone wre-workflow-inline-blocked-import";
   }
-  return "wre-workflow-inline wre-workflow-inline-preserve-only";
+  return "wre-workflow-inline wre-workflow-inline-locked-zone wre-workflow-inline-preserve-only";
 }
 
 function getWorkflowBlockedRailClass(reason: WorkflowBlockedCommandReason): string {
   if (reason.code === "workflow_blocked_import") {
-    return "wre-workflow-rail wre-workflow-rail-blocked-import";
+    return "wre-workflow-rail wre-workflow-rail-locked-zone wre-workflow-rail-blocked-import";
   }
-  return "wre-workflow-rail wre-workflow-rail-preserve-only";
+  return "wre-workflow-rail wre-workflow-rail-locked-zone wre-workflow-rail-preserve-only";
 }
 
 function hasBlockChildren(node: PMNode): boolean {
@@ -172,6 +173,56 @@ function buildAnchorPmRange(
   };
 }
 
+function collectLockedPmRanges(
+  lockedZones: readonly WorkflowLockedZone[] | undefined,
+  activeStory: EditorStoryTarget,
+  positionMap: PositionMap,
+): Array<{ from: number; to: number; zone: WorkflowLockedZone }> {
+  if (!lockedZones || lockedZones.length === 0) {
+    return [];
+  }
+  const ranges: Array<{ from: number; to: number; zone: WorkflowLockedZone }> = [];
+  for (const zone of lockedZones) {
+    const zoneStoryTarget = zone.storyTarget ?? MAIN_STORY_TARGET;
+    if (!storyTargetsEqual(zoneStoryTarget, activeStory)) {
+      continue;
+    }
+    const pmRange = buildAnchorPmRange(zone.anchor, positionMap);
+    if (!pmRange || !pmRange.allowInline || pmRange.from >= pmRange.to) {
+      continue;
+    }
+    ranges.push({ from: pmRange.from, to: pmRange.to, zone });
+  }
+  return ranges;
+}
+
+function subtractInlineOverlaps(
+  baseRange: { from: number; to: number },
+  blockedRanges: Array<{ from: number; to: number }>,
+): Array<{ from: number; to: number }> {
+  let segments = [baseRange];
+  for (const blockedRange of blockedRanges) {
+    const nextSegments: Array<{ from: number; to: number }> = [];
+    for (const segment of segments) {
+      if (blockedRange.to <= segment.from || blockedRange.from >= segment.to) {
+        nextSegments.push(segment);
+        continue;
+      }
+      if (blockedRange.from > segment.from) {
+        nextSegments.push({ from: segment.from, to: blockedRange.from });
+      }
+      if (blockedRange.to < segment.to) {
+        nextSegments.push({ from: blockedRange.to, to: segment.to });
+      }
+    }
+    segments = nextSegments;
+    if (segments.length === 0) {
+      break;
+    }
+  }
+  return segments.filter((segment) => segment.from < segment.to);
+}
+
 function pushRailDecorations(
   decorations: Decoration[],
   doc: PMNode,
@@ -214,6 +265,7 @@ export function buildDecorations(
   activeStory: EditorStoryTarget = MAIN_STORY_TARGET,
   workflowCandidates?: readonly WorkflowCandidateRange[],
   workflowBlockedReasons?: readonly WorkflowBlockedCommandReason[],
+  workflowLockedZones?: readonly WorkflowLockedZone[],
   activeWorkflowWorkItemId?: string | null,
   activeWorkflowScopeIds?: readonly string[],
   workflowMetadata?: readonly WorkflowMetadataMarkup[],
@@ -221,6 +273,7 @@ export function buildDecorations(
   const decorations: Decoration[] = [];
   const railRangeCache = new Map<string, Array<{ from: number; to: number }>>();
   const activeScopeIds = new Set(activeWorkflowScopeIds ?? []);
+  const lockedPmRanges = collectLockedPmRanges(workflowLockedZones, activeStory, positionMap);
 
   // Walk comment threads and create inline decorations
   if (commentModel) {
@@ -307,15 +360,21 @@ export function buildDecorations(
         );
 
       if (pmRange.allowInline && pmRange.from < pmRange.to) {
-        decorations.push(
-          Decoration.inline(pmRange.from, pmRange.to, {
-            class: getWorkflowInlineClass(scope, isActiveWorkItem, isSelectionZone),
-            "data-workflow-scope-id": scope.scopeId,
-            "data-workflow-scope-mode": scope.mode,
-            "data-workflow-active": isActiveWorkItem ? "true" : "false",
-            ...(isSelectionZone ? { "data-workflow-zone": "selection" } : {}),
-          }),
+        const visibleScopeSegments = subtractInlineOverlaps(
+          { from: pmRange.from, to: pmRange.to },
+          lockedPmRanges.filter((range) => range.to > pmRange.from && range.from < pmRange.to),
         );
+        for (const visibleSegment of visibleScopeSegments) {
+          decorations.push(
+            Decoration.inline(visibleSegment.from, visibleSegment.to, {
+              class: getWorkflowInlineClass(scope, isActiveWorkItem, isSelectionZone),
+              "data-workflow-scope-id": scope.scopeId,
+              "data-workflow-scope-mode": scope.mode,
+              "data-workflow-active": isActiveWorkItem ? "true" : "false",
+              ...(isSelectionZone ? { "data-workflow-zone": "selection" } : {}),
+            }),
+          );
+        }
       }
 
       pushRailDecorations(decorations, doc, pmRange.from, pmRange.to, {
@@ -375,8 +434,19 @@ export function buildDecorations(
     }
   }
 
-  if (workflowBlockedReasons) {
-    for (const reason of workflowBlockedReasons) {
+  if ((workflowLockedZones && workflowLockedZones.length > 0) || workflowBlockedReasons) {
+    const blockedReasonsToRender = workflowLockedZones && workflowLockedZones.length > 0
+      ? workflowLockedZones.map((zone) => ({
+        code: zone.code,
+        message: zone.detail,
+        anchor: zone.anchor,
+        storyTarget: zone.storyTarget,
+        fragmentId: zone.fragmentId,
+        label: zone.label,
+        detail: zone.detail,
+      }))
+      : workflowBlockedReasons ?? [];
+    for (const reason of blockedReasonsToRender) {
       if (
         reason.code !== "workflow_preserve_only" &&
         reason.code !== "workflow_blocked_import"
@@ -393,6 +463,8 @@ export function buildDecorations(
           Decoration.inline(pmRange.from, pmRange.to, {
             class: getWorkflowBlockedInlineClass(reason),
             "data-workflow-blocked-code": reason.code,
+            ...(reason.fragmentId ? { "data-workflow-fragment-id": reason.fragmentId } : {}),
+            "data-workflow-zone": "locked",
           }),
         );
       }
@@ -402,6 +474,8 @@ export function buildDecorations(
         className: getWorkflowBlockedRailClass(reason),
         attrs: {
           "data-workflow-blocked-code": reason.code,
+          ...(reason.fragmentId ? { "data-workflow-fragment-id": reason.fragmentId } : {}),
+          "data-workflow-zone": "locked",
         },
       }, railRangeCache);
     }

package/src/ui-tailwind/editor-surface/pm-schema.ts

@@ -489,6 +489,7 @@ export const editorSchema = new Schema({
         label: { default: "Locked" },
         detail: { default: "" },
         presentation: { default: "inline-chip" },
+        displayText: { default: null },
       },
       toDOM(node) {
         const presentation = node.attrs.presentation as string;
@@ -505,6 +506,34 @@ export const editorSchema = new Schema({
             },
           ];
         }
+        if (presentation === "text-box") {
+          return [
+            "span",
+            {
+              class: "mx-0.5 inline-flex max-w-full whitespace-pre-wrap rounded border border-slate-300 bg-slate-50 px-2 py-1 align-top text-sm leading-snug text-slate-700 shadow-sm",
+              "data-node-type": "opaque_inline",
+              "data-inline-presentation": "text-box",
+              contenteditable: "false",
+              title: node.attrs.detail as string,
+              "aria-label": node.attrs.label as string,
+            },
+            (node.attrs.displayText as string | null) ?? (node.attrs.label as string),
+          ];
+        }
+        if (presentation === "checkbox") {
+          return [
+            "span",
+            {
+              class: "mx-0.5 inline-flex h-5 min-w-[1.25rem] items-center justify-center rounded border border-slate-300 bg-white px-1 align-text-bottom text-sm leading-none text-slate-700",
+              "data-node-type": "opaque_inline",
+              "data-inline-presentation": "checkbox",
+              contenteditable: "false",
+              title: node.attrs.detail as string,
+              "aria-label": node.attrs.label as string,
+            },
+            (node.attrs.displayText as string | null) ?? "☐",
+          ];
+        }
         return [
           "span",
           {

package/src/ui-tailwind/editor-surface/pm-state-from-snapshot.ts

@@ -34,7 +34,7 @@ export function createPMStateFromSnapshot(
   selection: SelectionSnapshot,
   plugins: Plugin[],
   mediaPreviews: Record<string, MediaPreviewDescriptor> = {},
-  showUnsupportedObjectPreviews = true,
+  showUnsupportedObjectPreviews = false,
 ): PMStateResult {
   const doc = buildPMDoc(surface, mediaPreviews, showUnsupportedObjectPreviews);
   const positionMap = buildPositionMap(surface);
@@ -508,6 +508,17 @@ function buildOpaqueInlineOrComplexAtom(
   const label = segment.label;
   const detail = segment.detail;
 
+  if (segment.presentation === "text-box" || segment.presentation === "checkbox") {
+    return editorSchema.nodes.opaque_inline.create({
+      fragmentId: segment.fragmentId,
+      warningId: segment.warningId,
+      label,
+      detail,
+      presentation: segment.presentation,
+      displayText: segment.displayText ?? null,
+    });
+  }
+
   if (showUnsupportedObjectPreviews && label === "Embedded chart") {
     return editorSchema.nodes.chart_atom.create({ detail });
   }
@@ -548,6 +559,7 @@ function buildOpaqueInlineOrComplexAtom(
     label,
     detail,
     presentation: segment.presentation ?? "inline-chip",
+    displayText: segment.displayText ?? null,
   });
 }
 

package/src/ui-tailwind/editor-surface/surface-build-keys.ts

@@ -30,7 +30,7 @@ export function createSurfaceDocumentBuildKey(input: {
         : getSurfaceIdentity(input.surface),
     activeStory: input.activeStory,
     mediaPreviewKey: input.mediaPreviewKey,
-    showUnsupportedObjectPreviews: input.showUnsupportedObjectPreviews ?? true,
+    showUnsupportedObjectPreviews: input.showUnsupportedObjectPreviews ?? false,
   });
 }
 
@@ -43,10 +43,10 @@ export function createSurfaceDecorationKey(input: {
   workflowScopeSignature?: string;
   workflowCandidateSignature?: string;
   workflowBlockedSignature?: string;
+  workflowLockedZoneSignature?: string;
   workflowMetadataSignature?: string;
   activeWorkflowWorkItemId?: string | null;
   activeWorkflowScopeIds?: readonly string[];
-  suggestionsEnabled?: boolean;
 }): string {
   return JSON.stringify({
     markupDisplay: input.markupDisplay,
@@ -57,9 +57,9 @@ export function createSurfaceDecorationKey(input: {
     workflowScopeSignature: input.workflowScopeSignature ?? null,
     workflowCandidateSignature: input.workflowCandidateSignature ?? null,
     workflowBlockedSignature: input.workflowBlockedSignature ?? null,
+    workflowLockedZoneSignature: input.workflowLockedZoneSignature ?? null,
     workflowMetadataSignature: input.workflowMetadataSignature ?? null,
     activeWorkflowWorkItemId: input.activeWorkflowWorkItemId ?? null,
     activeWorkflowScopeIds: input.activeWorkflowScopeIds ?? [],
-    suggestionsEnabled: input.suggestionsEnabled ?? false,
   });
 }

package/src/ui-tailwind/editor-surface/tw-inline-token.tsx

@@ -106,6 +106,26 @@ export function TwInlineToken(props: TwInlineTokenProps) {
       );
     }
 
+    if (segment.presentation === "checkbox") {
+      return (
+        <button
+          type="button"
+          tabIndex={-1}
+          onMouseDown={(e) => {
+            e.preventDefault();
+            props.onSelectionChange?.(createSelectionSnapshot(segment.from, segment.to));
+          }}
+          className={`inline-flex h-5 min-w-[1.25rem] items-center justify-center rounded border border-slate-300 bg-white px-1 text-sm leading-none text-slate-700 ${commentClass} ${selected ? "ring-1 ring-accent/30" : ""} ${focusRingClass}`}
+          title={segment.detail}
+          data-inline-presentation="checkbox"
+        >
+          {renderTwCaret(selection, segment.from)}
+          {segment.displayText ?? "☐"}
+          {renderTwCaret(selection, segment.to)}
+        </button>
+      );
+    }
+
     return (
       <button
         type="button"