setHoverRect(null)} onClick={onDevClick} />
)}
{devMode && hoverRect && (
)}
{devMode && inspect && (
)}
{/* Hatched padding + flex-gap bands. Follows the hovered element; falls back to the selection. */}
{devMode && (() => {
const reg = hoverRect ? hoverRect.regions : selPadGap;
if (!reg) return null;
return reg.pads.concat(reg.gaps).map((b, i) => (
b.width > 0 && b.height > 0 ? (
{b.label}
) : null
));
})()}
{/* Size pill on the hovered element (Figma shows W×H under the highlight). */}
{devMode && hoverRect && (
{Math.round(hoverRect.width)} × {Math.round(hoverRect.height)}
)}
{/* Distance guides: with an element selected, hovering another draws red spacing/inset lines. */}
{devMode && inspect && hoverRect &&
!(Math.abs(hoverRect.left - inspect.rect.left) < 1 && Math.abs(hoverRect.top - inspect.rect.top) < 1 &&
Math.abs(hoverRect.width - inspect.rect.width) < 1 && Math.abs(hoverRect.height - inspect.rect.height) < 1) &&
acMeasure(inspect.rect, hoverRect).map((s, i) => (
s.type === "h" ? (
{s.label}
) : (
{s.label}
)
))}
{devMode && !chromeHidden && devIntro && (
e.stopPropagation()}>
Inspecting interactive UI
Click any element to inspect it. To open a menu, dropdown, or picker, hold{" "}
⌥ Option to interact with the page — then release{" "}
⌥ and the inspector freezes whatever opened so you can examine it.
Shown the first few times you open dev mode
)}
{devMode && !chromeHidden && devInteract && (
Interacting with the page · release ⌥ to inspect
)}
{devMode && !chromeHidden && !devInteract && !inspect && (
Click to inspect · hold ⌥ to interact · Esc to exit
)}
{devMode && !chromeHidden && inspect && (
setInspect(null)} />
)}
{/* In the clean (Cmd+/) view, comment mode is intentionally minimal: just the crosshair
capture layer and the point-of-contact UI (draft composer / pins). The hint pill and the
right sidebar only appear when the chrome is visible. */}
{commentMode && !chromeHidden && !draftThread && (
Click anywhere to leave a comment · Esc to cancel
)}
{commentMode && !chromeHidden && (
)}
{shouldShowPins && visiblePins.map((thread) => {
const owner = C.getThreadOwner(usersById, thread);
return (
{owner.name} {C.formatRelativeTime(thread.updatedAt || thread.createdAt)}
{C.getThreadPreview(thread)}
);
})}
{draftThread && (
setDraftThread(null)}
onSubmit={createThread}
/>
)}
{activeThread && !draftThread && (
setActiveThreadId(null)}
onResolve={(resolved) => resolveThread(activeThread.id, resolved)}
onToggleReaction={(messageId, emoji) => toggleReaction(activeThread.id, messageId, emoji)}
onDeleteMessage={(messageId) => deleteMessage(activeThread.id, messageId)}
onSubmit={(body) => replyToThread(activeThread.id, body)}
/>
)}