@plannotator/ui 0.55.0 → 0.56.0

package/components/TableOfContents.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo, useCallback } from 'react';
+import { basenameFromPath } from '@plannotator/core/source-save';
 import type { Block, Annotation } from '../types';
 import {
   buildTocHierarchy,
@@ -146,7 +147,7 @@ export function TableOfContents({
               )}
             </div>
             <p className="text-[11px] text-foreground/70 truncate mt-0.5" title={linkedDocFilepath}>
-              {linkedDocFilepath.split('/').pop()}
+              {basenameFromPath(linkedDocFilepath)}
             </p>
           </div>
         )}

package/components/Viewer.tsx

@@ -86,9 +86,10 @@ import { type QuickLabel } from '../utils/quickLabels';
 import type { SelectionAction } from '../utils/selectionActions';
 import type { MentionSource } from '../utils/mentions';
 import { DocBadges, type DocBadgesProps, type LinkedDocBadgeInfo } from './DocBadges';
+import { legacyBadgesMaxWidth } from './docBadgesWidth';
 import { PinpointOverlay } from './PinpointOverlay';
 import { usePinpoint } from '../hooks/usePinpoint';
-import { useAnnotationHighlighter, type AnnotationRestoreReport } from '../hooks/useAnnotationHighlighter';
+import { rangeInsideExcluded, useAnnotationHighlighter, type AnnotationRestoreReport } from '../hooks/useAnnotationHighlighter';
 import { useVimSelection } from '../hooks/useVimSelection';
 import {
   getScrollViewportIntersectionRoot,
@@ -403,12 +404,14 @@ export interface ViewerProps {
    * Opt-in host capability, with `answerOnly`: the reader may comment on the
    * text. A text selection opens the selection toolbar, comment-only
    * (Comment and the one-click 👍; no Delete, no label picker), and its
-   * comment composer; `annotations` are drawn as highlights. Question cards
-   * are left out of selection (their text is not commented on), and nothing
-   * else of authoring comes back (no pinpoint, code-block toolbar, Global
-   * comment or Copy, no Vim). For a host that shows a message whose words
-   * can be commented on (the Plannotator Inbox's agent messages). Ignored
-   * without `answerOnly` and under `readOnly`. Absent → unchanged.
+   * comment composer; `annotations` are drawn as highlights. A rendered
+   * diagram takes comments on its parts the same way (`onAddAnnotation` gets
+   * a row with `diagramAnchor`). Question cards are left out of selection
+   * (their text is not commented on), and nothing else of authoring comes
+   * back (no pinpoint, code-block toolbar, Global comment or Copy, no Vim).
+   * For a host that shows a message whose words can be commented on (the
+   * Plannotator Inbox's agent messages). Ignored without `answerOnly` and
+   * under `readOnly`. Absent → unchanged.
    */
   textComments?: boolean;
   /**
@@ -647,6 +650,7 @@ const StickyActionsLane: React.FC<{ className: string; children: React.ReactNode
       {/* After the lane: the lane is a flex box, so a float placed before it would narrow it. */}
       <div
         data-print-hide
+        data-sticky-actions-spacer
         aria-hidden="true"
         className="float-right"
         style={box ? { width: box.width, height: box.height, marginTop: box.marginTop, marginRight: box.marginRight } : undefined}
@@ -920,27 +924,41 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
   // card's top padding. One row fits; a second row (diff badge) or mobile
   // wrapping outgrows the padding and lands on the document's first heading.
   // Measure the cluster and insert exactly the clearance it needs (0 when it fits).
+  // The cluster also stops where the action cluster starts on the same row, so
+  // a long file name truncates at the buttons instead of running under them;
+  // with no buttons on its row (the phone layout) it stops inside the card.
   const docBadgesRef = useRef<HTMLDivElement | null>(null);
   const [badgeClearance, setBadgeClearance] = useState(0);
+  const [badgeMaxWidth, setBadgeMaxWidth] = useState<number | null>(null);
   useEffect(() => {
     if (hasViewerAnnotationHeader) {
       setBadgeClearance(0);
+      setBadgeMaxWidth(null);
       return;
     }
     const el = docBadgesRef.current;
     const article = containerRef.current;
-    if (!el || !article) { setBadgeClearance(0); return; }
+    if (!el || !article) { setBadgeClearance(0); setBadgeMaxWidth(null); return; }
+    // The static float that holds the actions' place: the sticky lane's spacer
+    // (the lane itself moves while stuck), or the plain float without one.
+    const actions = article.querySelector<HTMLElement>('[data-sticky-actions-spacer]')
+      ?? article.querySelector<HTMLElement>('[data-sticky-actions]');
     const measure = () => {
       const pad = parseFloat(getComputedStyle(article).paddingTop) || 0;
       const overflow = el.offsetTop + el.offsetHeight - pad;
       setBadgeClearance(overflow > 1 ? overflow + 4 : 0);
+      setBadgeMaxWidth(legacyBadgesMaxWidth(el.getBoundingClientRect(), actions?.getBoundingClientRect() ?? null, article.getBoundingClientRect()));
     };
     measure();
     const ro = new ResizeObserver(measure);
     ro.observe(el);
+    // The card too: when it narrows (the sidebar opens, the layout settles after
+    // first paint) the actions float moves without changing size.
+    ro.observe(article);
+    if (actions) ro.observe(actions);
     window.addEventListener('resize', measure);
     return () => { ro.disconnect(); window.removeEventListener('resize', measure); };
-  }, [hasViewerAnnotationHeader, repoInfo, hasPreviousVersion, showDemoBadge, linkedDocInfo, archiveInfo, sourceInfo, planDiffStats, openInAppPath]);
+  }, [hasViewerAnnotationHeader, stickyActions, repoInfo, hasPreviousVersion, showDemoBadge, linkedDocInfo, archiveInfo, sourceInfo, planDiffStats, openInAppPath]);
 
   // Per-doc heading slug map with dedup — computed once per blocks array so
   // anchor ids stay stable across re-renders and duplicate heading texts get
@@ -1380,6 +1398,10 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
     const handleCopy = (e: ClipboardEvent) => {
       const tag = (e.target as HTMLElement)?.tagName;
       if (tag === 'INPUT' || tag === 'TEXTAREA') return;
+      // A live selection where nothing is annotated (an Inbox action item's text) is
+      // the person's own: the browser copies it, never an older toolbar's text.
+      const live = window.getSelection();
+      if (live && !live.isCollapsed && live.rangeCount > 0 && containerRef.current && rangeInsideExcluded(containerRef.current, live.getRangeAt(0))) return;
 
       if (toolbarState?.selectionText) {
         e.preventDefault();
@@ -1731,9 +1753,13 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
           ...(vimModeActive ? { outline: 'none' } : {}),
         } as React.CSSProperties}
       >
-        {/* Legacy badge placement remains byte-for-byte opt-out behavior. */}
         {!viewerAnnotationHeader && (repoInfo || hasPreviousVersion || showDemoBadge || linkedDocInfo || archiveInfo || sourceInfo || openInAppPath) && (
-          <div ref={docBadgesRef} data-print-hide className={`absolute top-3 md:top-4 ${gridEnabled ? 'left-3 md:left-5' : 'left-0'}`}>
+          <div
+            ref={docBadgesRef}
+            data-print-hide
+            className={`absolute top-3 md:top-4 ${gridEnabled ? 'left-3 md:left-5' : 'left-0'}`}
+            style={badgeMaxWidth !== null ? { maxWidth: badgeMaxWidth } : undefined}
+          >
             <DocBadges
               layout="column"
               repoInfo={repoInfo}
@@ -1840,10 +1866,10 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
                   annotations={annotations}
                   selectedAnnotationId={selectedAnnotationId}
                   onSelectAnnotation={onSelectAnnotation}
-                  onAddAnnotation={authoringOff ? undefined : onAddAnnotation}
-                  readOnly={authoringOff}
+                  onAddAnnotation={selectionCommentsOn ? onAddAnnotation : undefined}
+                  readOnly={!selectionCommentsOn}
                   onRestoreReport={onRestoreReport}
-                  onAskAI={authoringOff ? undefined : onAskAI}
+                  onAskAI={selectionCommentsOn ? onAskAI : undefined}
                   askAISourcePath={linkedDocInfo?.filepath ?? sourceInfo}
                 />
               </Suspense>
@@ -1856,10 +1882,10 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
                   annotations={annotations}
                   selectedAnnotationId={selectedAnnotationId}
                   onSelectAnnotation={onSelectAnnotation}
-                  onAddAnnotation={authoringOff ? undefined : onAddAnnotation}
-                  readOnly={authoringOff}
+                  onAddAnnotation={selectionCommentsOn ? onAddAnnotation : undefined}
+                  readOnly={!selectionCommentsOn}
                   onRestoreReport={onRestoreReport}
-                  onAskAI={authoringOff ? undefined : onAskAI}
+                  onAskAI={selectionCommentsOn ? onAskAI : undefined}
                   askAISourcePath={linkedDocInfo?.filepath ?? sourceInfo}
                 />
               </Suspense>

package/components/chat/ChatComposer.tsx

@@ -0,0 +1,192 @@
+import { Send, Square } from 'lucide-react';
+import type * as React from 'react';
+
+import { cn } from '../../lib/utils';
+import { isImeCompositionKey } from '../../utils/commentSubmitKey';
+import { Button } from '../ui/button';
+import { Textarea } from '../ui/textarea';
+import { CHAT_SEND_BUTTON, CHAT_STOP_BUTTON, FOCUS_RING } from './chatRecipes';
+
+/**
+ * The text box's own box: border, radius, padding and type size. Spelled once
+ * so a host's layer painted over the field (`overlay`) can share its metrics.
+ * The scrollbar gutter is reserved, so a field that scrolls wraps where the
+ * layer does. 16 px below md keeps iOS Safari from zooming on focus.
+ */
+export const CHAT_COMPOSER_FIELD_BOX =
+  'rounded-md border px-3 py-2 text-base md:text-sm [scrollbar-gutter:stable]';
+
+export interface ChatComposerProps {
+  /** The field's text. The composer is controlled: it holds none itself, so
+   * `onChange` must set this in the same tick or typing and IME input are lost. */
+  readonly value: string;
+  readonly onChange: (value: string) => void;
+  /** Enter in the field, Mod+Enter included, and the Send button. It runs even
+   * while `busy` or with an empty box, so a host decides what those mean. */
+  readonly onSend: () => void;
+  /** False: plain Enter is a new line and Mod+Enter or the button sends. For a
+   * touch keyboard, which has no Shift to make a new line with. */
+  readonly sendOnEnter?: boolean;
+  /** Stop, while `busy`. */
+  readonly onStop?: () => void;
+  /** A reply is running: the Send button becomes Stop. */
+  readonly busy?: boolean;
+  readonly disabled?: boolean;
+  /** The field's accessible name. */
+  readonly label?: string;
+  readonly placeholder?: string;
+  readonly sendLabel?: string;
+  readonly stopLabel?: string;
+  /** The host's handle on the field. */
+  readonly composerRef?: React.RefObject<HTMLTextAreaElement | null>;
+  /** Above the box (errors, queued messages). */
+  readonly notices?: React.ReactNode;
+  /** The quiet context line under the box. */
+  readonly below?: React.ReactNode;
+  /** The row with Send, left of it. */
+  readonly toolbar?: React.ReactNode;
+  /** In the box's positioned wrapper, before the field (a host's own menu). */
+  readonly assist?: React.ReactNode;
+  /** Painted over the field, in the field's own box. */
+  readonly overlay?: React.ReactNode;
+  /** Extra field classes. */
+  readonly fieldClassName?: string;
+  /** The id of the element describing what the message carries. */
+  readonly describedBy?: string;
+  /** With a host's menu in `assist`: whether it is open and which row is active. */
+  readonly expanded?: boolean;
+  readonly activeDescendant?: string;
+  /** Files pasted into the field. Absent: the paste is left to the browser. */
+  readonly onFiles?: (files: readonly File[]) => void;
+  /** Pasted text, before the field takes it: true when the host took it. */
+  readonly onPasteText?: (text: string) => boolean;
+  /** The caret or the selection moved. */
+  readonly onCaret?: (field: HTMLTextAreaElement) => void;
+  /** An IME composition started (true) or ended (false). */
+  readonly onComposing?: (composing: boolean) => void;
+  /** Runs before the composer's own keys; `preventDefault` keeps Enter from sending. */
+  readonly onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+}
+
+/** The message box. It has no picker of its own; a host adds one through `assist`. */
+export function ChatComposer({
+  value,
+  onChange,
+  onSend,
+  sendOnEnter = true,
+  onStop,
+  busy = false,
+  disabled,
+  label = 'Message',
+  placeholder,
+  sendLabel = 'Send',
+  stopLabel = 'Stop',
+  composerRef,
+  notices,
+  below,
+  toolbar,
+  assist,
+  overlay,
+  fieldClassName,
+  describedBy,
+  expanded,
+  activeDescendant,
+  onFiles,
+  onPasteText,
+  onCaret,
+  onComposing,
+  onKeyDown,
+}: ChatComposerProps) {
+  return (
+    <div className="flex max-h-[60%] shrink-0 flex-col gap-2 border-t border-border px-3 pb-2 pt-2.5">
+      <div className="flex min-h-0 flex-col gap-2 overflow-y-auto empty:hidden">{notices}</div>
+      <div className="relative shrink-0">
+        {assist}
+        <Textarea
+          ref={composerRef}
+          rows={2}
+          value={value}
+          disabled={disabled}
+          placeholder={placeholder}
+          aria-label={label}
+          aria-autocomplete={expanded === undefined ? undefined : 'list'}
+          aria-expanded={expanded}
+          aria-activedescendant={activeDescendant}
+          aria-describedby={describedBy}
+          // The box grows with its text up to 128 px, then scrolls inside itself.
+          className={cn(
+            CHAT_COMPOSER_FIELD_BOX,
+            'field-sizing-content max-h-32 min-h-16 resize-none bg-card shadow-none',
+            FOCUS_RING,
+            fieldClassName,
+          )}
+          onChange={(event) => onChange(event.target.value)}
+          onSelect={(event) => onCaret?.(event.currentTarget)}
+          onClick={(event) => onCaret?.(event.currentTarget)}
+          onKeyUp={(event) => {
+            if (event.key.startsWith('Arrow') || event.key === 'Home' || event.key === 'End') {
+              onCaret?.(event.currentTarget);
+            }
+          }}
+          onCompositionStart={() => onComposing?.(true)}
+          onCompositionEnd={() => onComposing?.(false)}
+          onPaste={(event) => {
+            const files = Array.from(event.clipboardData?.files ?? []);
+            if (files.length > 0 && onFiles !== undefined) {
+              event.preventDefault();
+              onFiles(files);
+              return;
+            }
+            const text = event.clipboardData?.getData('text/plain') ?? '';
+            if (text !== '' && onPasteText?.(text) === true) event.preventDefault();
+          }}
+          onKeyDown={(event) => {
+            // Enter, in any chord, does not bubble past the React root, so a
+            // bubble listener on window or document (a Send elsewhere on the
+            // page) does not hear it. Capture listeners and native listeners on
+            // the box's ancestors still do, and keyup is not stopped.
+            const enter = event.key === 'Enter';
+            if (enter) event.stopPropagation();
+            // Safari's Enter that commits a composition has isComposing false
+            // and keyCode 229; this checks both.
+            if (isImeCompositionKey(event)) return;
+            onKeyDown?.(event);
+            if (!enter || event.defaultPrevented) return;
+            const mod = event.metaKey || event.ctrlKey;
+            if (!mod && (event.shiftKey || !sendOnEnter)) return; // a new line
+            event.preventDefault();
+            if (!event.shiftKey) onSend();
+          }}
+        />
+        {overlay}
+      </div>
+      {below}
+      <div className="flex min-w-0 shrink-0 items-center gap-1" data-chat-composer-toolbar>
+        {toolbar}
+        <div className="ml-auto shrink-0">
+          {busy ? (
+            <Button
+              variant="ghost"
+              size="icon"
+              aria-label={stopLabel}
+              className={CHAT_STOP_BUTTON}
+              onClick={onStop}
+            >
+              <Square aria-hidden="true" className="size-3" />
+            </Button>
+          ) : (
+            <Button
+              size="icon"
+              aria-label={sendLabel}
+              className={CHAT_SEND_BUTTON}
+              disabled={disabled}
+              onClick={onSend}
+            >
+              <Send aria-hidden="true" className="size-3.5" />
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}