@plannotator/ui 0.52.1 → 0.53.1

package/components/AnnotationToolstrip.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useLayoutEffect, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import type { EditorMode, InputMethod } from '../types';
 import { TaterSpritePullup } from './TaterSpritePullup';
 
@@ -36,6 +36,12 @@ export interface AnnotationToolstripProps {
    * retain the complete action-mode group.
    */
   hideQuickLabel?: boolean;
+  /**
+   * Omit only the Redline action. Defaults to false. For a host whose
+   * composer is its own (the Inbox surface on a phone draws Select, Pinpoint,
+   * Markup and Comment).
+   */
+  hideRedline?: boolean;
 }
 
 /** Render the shared input-method and annotation-mode controls. */
@@ -50,6 +56,7 @@ export const AnnotationToolstrip: React.FC<AnnotationToolstripProps> = ({
   iconOnly = false,
   hideInputMethodSwitch = false,
   hideQuickLabel = false,
+  hideRedline = false,
 }) => {
   const [showHelp, setShowHelp] = useState(false);
   const [helpTab, setHelpTab] = useState<'selection' | 'plannotator'>('selection');
@@ -136,6 +143,7 @@ export const AnnotationToolstrip: React.FC<AnnotationToolstripProps> = ({
               </svg>
             }
           />
+          {!hideRedline && (
           <ToolstripButton
             active={mode === 'redline'}
             onClick={() => onModeChange('redline')}
@@ -150,6 +158,7 @@ export const AnnotationToolstrip: React.FC<AnnotationToolstripProps> = ({
               </svg>
             }
           />
+          )}
           {!hideQuickLabel && (
             <ToolstripButton
               active={mode === 'quickLabel'}
@@ -282,10 +291,26 @@ const ICON_SIZE = 28;       // collapsed button width (px)
 const H_PAD = 10;           // horizontal padding when expanded (px) — matches px-2.5
 const GAP = 6;              // gap between icon and label (px) — matches gap-1.5
 const ICON_INNER = 14;      // icon element width (px)
+const COLLAPSED_PAD = (ICON_SIZE - ICON_INNER) / 2;
 const DURATION = 180;       // transition ms
+const EASE = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)';
 
 /* ─── Button ─── */
 
+/**
+ * One toolstrip button: the icon, and a label that slides out beside it.
+ *
+ * The width comes from layout, never from a JS measurement. A hidden copy of
+ * the label sits in a one-column grid whose column animates `0fr` -> `1fr`, so
+ * the button's shrink-to-fit width runs from the icon-only 28 px to the icon,
+ * the gap and the label; the side padding animates 7 -> 10 px with it. The
+ * width at every frame matches the explicit-width version this replaced
+ * (28 + (12 + label) x progress, same 180 ms curve). The visible label is
+ * positioned beside the icon and clipped by the button's own edge, as before:
+ * a grid track laid out at a fraction of its width reveals its content more
+ * slowly than the button grows, so the label is not drawn inside it.
+ * Reading `offsetWidth` per button forced a layout on every document open.
+ */
 const ToolstripButton: React.FC<{
   active: boolean;
   onClick: () => void;
@@ -297,18 +322,9 @@ const ToolstripButton: React.FC<{
   iconOnly?: boolean;
 }> = ({ active, onClick, icon, label, color, mounted, compact = false, iconOnly = false }) => {
   const [hovered, setHovered] = useState(false);
-  const [labelWidth, setLabelWidth] = useState(0);
-  const measureRef = useRef<HTMLSpanElement>(null);
   const styles = colorStyles[color];
   const [isTouchDevice] = useState(() => 'ontouchstart' in window || navigator.maxTouchPoints > 0);
 
-  // Measure label text width synchronously before first paint
-  useLayoutEffect(() => {
-    if (measureRef.current) {
-      setLabelWidth(measureRef.current.offsetWidth);
-    }
-  }, [label]);
-
   // iconOnly: never expand (mobile sticky lane).
   // compact: only active expands (sm+ sticky lane — shows current mode).
   // default: active or hovered expands (top-of-doc full toolstrip).
@@ -317,8 +333,7 @@ const ToolstripButton: React.FC<{
     : compact
       ? active
       : (active || hovered || isTouchDevice);
-  const expandedWidth = H_PAD + ICON_INNER + GAP + labelWidth + H_PAD;
-  const currentWidth = expanded ? expandedWidth : ICON_SIZE;
+  const pad = expanded ? H_PAD : COLLAPSED_PAD;
 
   const colorClass = active
     ? styles.active
@@ -326,12 +341,9 @@ const ToolstripButton: React.FC<{
       ? styles.hover
       : styles.inactive;
 
+  const slide = (property: string) => `${property} ${DURATION}ms ${EASE}`;
   const transition = mounted
-    ? `width ${DURATION}ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color ${DURATION}ms ease, color ${DURATION}ms ease, box-shadow ${DURATION}ms ease`
-    : 'none';
-
-  const innerTransition = mounted
-    ? `padding-left ${DURATION}ms cubic-bezier(0.25, 0.46, 0.45, 0.94)`
+    ? `${slide('padding-inline-start')}, ${slide('padding-inline-end')}, background-color ${DURATION}ms ease, color ${DURATION}ms ease, box-shadow ${DURATION}ms ease`
     : 'none';
 
   return (
@@ -340,34 +352,36 @@ const ToolstripButton: React.FC<{
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
       aria-pressed={active}
-      className={`relative flex items-center h-7 rounded-md overflow-hidden ${colorClass}`}
-      style={{ width: currentWidth, transition }}
+      className={`relative flex items-center h-7 rounded-md overflow-hidden whitespace-nowrap ${colorClass}`}
+      style={{ paddingInlineStart: pad, paddingInlineEnd: pad, transition }}
     >
-      {/* Inner flex container — fixed layout, no layout-shifting properties animated */}
-      <div
-        className="flex items-center whitespace-nowrap"
-        style={{ paddingLeft: expanded ? H_PAD : (ICON_SIZE - ICON_INNER) / 2, gap: GAP, transition: innerTransition }}
+      {icon}
+      {/* The label people see, beside the icon, clipped at the button's edge. */}
+      <span
+        className="absolute inset-y-0 flex items-center text-xs font-medium"
+        style={{
+          insetInlineStart: pad + ICON_INNER + GAP,
+          opacity: expanded ? 1 : 0,
+          transition: mounted
+            ? `${slide('inset-inline-start')}, opacity ${expanded ? DURATION : DURATION * 0.6}ms ease ${expanded ? '60ms' : '0ms'}`
+            : 'none',
+        }}
       >
-        {icon}
-        <span
-          className="text-xs font-medium"
-          style={{
-            opacity: expanded ? 1 : 0,
-            transition: mounted ? `opacity ${expanded ? DURATION : DURATION * 0.6}ms ease ${expanded ? '60ms' : '0ms'}` : 'none',
-          }}
-        >
-          {label}
-        </span>
-      </div>
-
-      {/* Hidden measurement span — rendered offscreen to get label pixel width */}
+        {label}
+      </span>
+      {/* The width: a hidden copy of the gap and label in a column that
+          animates 0fr -> 1fr. min-width 0 and overflow hidden let it reach 0. */}
       <span
-        ref={measureRef}
-        className="text-xs font-medium absolute pointer-events-none"
-        style={{ visibility: 'hidden', position: 'absolute', left: -9999 }}
         aria-hidden
+        style={{
+          display: 'grid',
+          gridTemplateColumns: expanded ? '1fr' : '0fr',
+          transition: mounted ? slide('grid-template-columns') : 'none',
+        }}
       >
-        {label}
+        <span style={{ minWidth: 0, overflow: 'hidden', visibility: 'hidden' }}>
+          <span className="block text-xs font-medium" style={{ paddingInlineStart: GAP }}>{label}</span>
+        </span>
       </span>
     </button>
   );

package/components/BlockRenderer.tsx

@@ -6,6 +6,7 @@ import { CodeBlock } from "./blocks/CodeBlock";
 import { HtmlBlock } from "./blocks/HtmlBlock";
 import { Callout } from "./blocks/Callout";
 import { AlertBlock } from "./blocks/AlertBlock";
+import { BlockquoteBlock } from "./blocks/BlockquoteBlock";
 import { TableBlock } from "./blocks/TableBlock";
 import { MathBlock } from "./blocks/MathBlock";
 import { QuestionBlock, type QuestionBlockProps } from "./blocks/QuestionBlock";
@@ -61,7 +62,11 @@ export const BlockRenderer: React.FC<{
   onOpenQuestionDecision?: QuestionBlockProps['onOpenDecision'];
   /** `'none'` hides the card's own status tag (see `QuestionBlock`). */
   questionStatusTag?: QuestionBlockProps['statusTag'];
-}> = ({ block, onOpenLinkedDoc, onOpenCodeFile, imageBaseDir, onImageClick, onToggleCheckbox, checkboxOverrides, orderedIndex, githubRepo, repoHost, headingAnchorId, onNavigateAnchor, question, questionTotal, questionAnswer, onAnswerQuestion, onSaveQuestionAnswer, saveQuestionAnswerLabel, renderQuestionFooter, questionDecisionRecording, questionDecisionScope, onToggleQuestionDecisionRecording, onOpenQuestionDecision, questionStatusTag }) => {
+  /** The host's words for a question's status tag (see `QuestionBlock`). */
+  questionStatusLabel?: QuestionBlockProps['statusLabel'];
+  /** Host content under a question's prompt (see `QuestionBlock`). */
+  renderQuestionBelowPrompt?: QuestionBlockProps['renderBelowPrompt'];
+}> = ({ block, onOpenLinkedDoc, onOpenCodeFile, imageBaseDir, onImageClick, onToggleCheckbox, checkboxOverrides, orderedIndex, githubRepo, repoHost, headingAnchorId, onNavigateAnchor, question, questionTotal, questionAnswer, onAnswerQuestion, onSaveQuestionAnswer, saveQuestionAnswerLabel, renderQuestionFooter, questionDecisionRecording, questionDecisionScope, onToggleQuestionDecisionRecording, onOpenQuestionDecision, questionStatusTag, questionStatusLabel, renderQuestionBelowPrompt }) => {
   switch (block.type) {
     case 'heading': {
       const Tag = `h${block.level || 1}` as React.ElementType;
@@ -99,20 +104,19 @@ export const BlockRenderer: React.FC<{
           />
         );
       }
-      // Content may span multiple merged `>` lines. Split on blank-line
-      // paragraph breaks so `> a\n>\n> b` renders as two <p> children.
-      const paragraphs = block.content.split(/\n\n+/);
+      // One quote whatever it holds: its content is the quote's own markdown
+      // (paragraphs, code fences, lists, nested quotes), see BlockquoteBlock.
       return (
-        <blockquote
-          className="border-l-2 border-primary/50 pl-4 my-4 text-muted-foreground italic"
-          data-block-id={block.id}
-        >
-          {paragraphs.map((para, i) => (
-            <p key={i} className={i > 0 ? 'mt-2' : ''}>
-              <InlineMarkdown imageBaseDir={imageBaseDir} onImageClick={onImageClick} text={para} onOpenLinkedDoc={onOpenLinkedDoc} onOpenCodeFile={onOpenCodeFile} githubRepo={githubRepo} repoHost={repoHost} onNavigateAnchor={onNavigateAnchor} />
-            </p>
-          ))}
-        </blockquote>
+        <BlockquoteBlock
+          block={block}
+          onOpenLinkedDoc={onOpenLinkedDoc}
+          onOpenCodeFile={onOpenCodeFile}
+          imageBaseDir={imageBaseDir}
+          onImageClick={onImageClick}
+          githubRepo={githubRepo}
+          repoHost={repoHost}
+          onNavigateAnchor={onNavigateAnchor}
+        />
       );
     }
 
@@ -193,6 +197,8 @@ export const BlockRenderer: React.FC<{
               onToggleDecisionRecording={onToggleQuestionDecisionRecording}
               onOpenDecision={onOpenQuestionDecision}
               statusTag={questionStatusTag}
+              statusLabel={questionStatusLabel}
+              renderBelowPrompt={renderQuestionBelowPrompt}
               onOpenLinkedDoc={onOpenLinkedDoc}
               onOpenCodeFile={onOpenCodeFile}
               imageBaseDir={imageBaseDir}

package/components/CodeFilePopout.tsx

@@ -92,7 +92,7 @@ function buildPierreCSS(mode: 'dark' | 'light', bg: string, fg: string): string
     pre, code { background-color: ${bg} !important; }
     [data-column-number] { background-color: ${bg} !important; }
     [data-file] { height: 100% !important; }
-    [data-code] { height: 100% !important; overflow-y: auto !important; }
+    [data-code] { height: 100% !important; overflow-y: auto !important; align-content: start; }
     [data-line] { cursor: pointer; }
   `;
 }
@@ -180,7 +180,7 @@ const CodeInlineAnnotation: React.FC<{
         <span className="rounded bg-muted px-1.5 py-0.5 font-mono normal-case text-foreground">
           {lineLabel(annotation.lineStart, annotation.lineEnd)}
         </span>
-        {annotation.author && <span className="truncate normal-case">by {annotation.author}</span>}
+        {annotation.author && <span className="truncate normal-case">by <bdi>{annotation.author}</bdi></span>}
         <div className="ml-auto flex items-center gap-1 opacity-0 group-hover:opacity-100 [@media(hover:none)]:opacity-100">
           {onEdit && !isEditing && (
             <button
@@ -283,21 +283,46 @@ const CodeInlineAnnotation: React.FC<{
   );
 };
 
-export const CodeFilePopout: React.FC<CodeFilePopoutProps> = ({
-  open,
-  onClose,
+export interface CodeFileViewProps {
+  filepath: string;
+  contents: string;
+  prerenderedHTML?: string;
+  annotations?: CodeAnnotation[];
+  selectedAnnotationId?: string | null;
+  onAddAnnotation?: (annotation: CodeFileAnnotationInput) => void;
+  onEditAnnotation?: (id: string, updates: Partial<CodeAnnotation>) => void;
+  onDeleteAnnotation?: (id: string) => void;
+  onSelectAnnotation?: (id: string | null) => void;
+  /** Whether the comment composer offers image attachments. Default true (the popout's behavior). */
+  allowImages?: boolean;
+  /** The file area's class. Default: fills the rest of a flex column. */
+  className?: string;
+  /** The highlighting language, instead of Pierre's inference from the name (`'text'`: no highlighting, for a very large file). */
+  lang?: string;
+  /** Long lines: `'scroll'` sideways (the default) or `'wrap'` onto the next row, for a minified file. */
+  overflow?: 'scroll' | 'wrap';
+}
+
+/**
+ * One code file drawn by Pierre's `File`, with line and range comments: the
+ * gutter `+`, a click on a line, a dragged range or a text selection opens
+ * the comment composer, and saved comments render inline under their lines.
+ * The body of `CodeFilePopout`, usable on its own (the Inbox's file pane).
+ */
+export const CodeFileView: React.FC<CodeFileViewProps> = ({
   filepath,
   contents,
   prerenderedHTML,
-  error,
-  requestedPath,
   annotations = [],
   selectedAnnotationId,
   onAddAnnotation,
   onEditAnnotation,
   onDeleteAnnotation,
   onSelectAnnotation,
-  container,
+  allowImages = true,
+  className = 'flex-1 min-h-0',
+  lang,
+  overflow = 'scroll',
 }) => {
   const { resolvedMode } = useTheme();
   const mode = resolvedMode ?? 'dark';
@@ -306,7 +331,6 @@ export const CodeFilePopout: React.FC<CodeFilePopoutProps> = ({
     type: mode as 'dark' | 'light',
     css: buildPierreCSS(mode, colors.bg, colors.fg),
   }));
-  const [copied, setCopied] = useState(false);
   const [pendingComment, setPendingComment] = useState<PendingComment | null>(null);
   const fileAreaRef = useRef<HTMLDivElement>(null);
   const lastPointerRectRef = useRef<DOMRect | null>(null);
@@ -328,7 +352,6 @@ export const CodeFilePopout: React.FC<CodeFilePopoutProps> = ({
 
   const displayName = filepath.split('/').pop() || filepath;
   const relativePath = filepath.replace(/.*\/(?=.*\/)/, '');
-  const lineCount = useMemo(() => contents.split('\n').length, [contents]);
   const selectedCodeAnnotation = useMemo(
     () => annotations.find((ann) => ann.id === selectedAnnotationId),
     [annotations, selectedAnnotationId],
@@ -457,6 +480,94 @@ export const CodeFilePopout: React.FC<CodeFilePopoutProps> = ({
     );
   }, [onAddAnnotation, openCommentForRange]);
 
+  return (
+    <>
+      <div
+        ref={fileAreaRef}
+        className={className}
+        onPointerMove={(e) => {
+          lastPointerRectRef.current = new DOMRect(e.clientX, e.clientY, 0, 0);
+        }}
+        onMouseUp={() => {
+          requestAnimationFrame(openCommentForBrowserSelection);
+        }}
+      >
+        <File
+          key={filepath}
+          file={lang ? { name: displayName, contents, lang } : { name: displayName, contents }}
+          prerenderedHTML={effectivePrerenderedHTML}
+          className="h-full"
+          lineAnnotations={lineAnnotations}
+          selectedLines={selectedLines}
+          renderAnnotation={renderAnnotation}
+          renderGutterUtility={renderGutterUtility}
+          style={{
+            '--diffs-dark-bg': colors.bg,
+            '--diffs-light-bg': colors.bg,
+            '--diffs-dark': colors.fg,
+            '--diffs-light': colors.fg,
+          } as React.CSSProperties}
+          options={{
+            themeType: pierreTheme.type,
+            unsafeCSS: pierreTheme.css,
+            overflow,
+            disableFileHeader: true,
+            enableLineSelection: true,
+            enableGutterUtility: !!onAddAnnotation,
+            lineHoverHighlight: onAddAnnotation ? 'line' : 'disabled',
+            onLineClick: handleLineClick,
+            onLineSelectionEnd: handleLineSelectionEnd,
+          }}
+        />
+      </div>
+      {pendingComment && onAddAnnotation && (
+        <CommentPopover
+          anchorEl={pendingComment.anchorEl}
+          anchorRect={pendingComment.anchorRect}
+          contextText={pendingComment.contextText}
+          isGlobal={false}
+          skillReferences
+          allowImages={allowImages}
+          onSubmit={(text, images) => {
+            onAddAnnotation({
+              filePath: filepath,
+              lineStart: pendingComment.range.start,
+              lineEnd: pendingComment.range.end,
+              text,
+              images,
+              originalCode: pendingComment.originalCode,
+            });
+            setPendingComment(null);
+          }}
+          onClose={() => setPendingComment(null)}
+        />
+      )}
+    </>
+  );
+};
+
+export const CodeFilePopout: React.FC<CodeFilePopoutProps> = ({
+  open,
+  onClose,
+  filepath,
+  contents,
+  prerenderedHTML,
+  error,
+  requestedPath,
+  annotations = [],
+  selectedAnnotationId,
+  onAddAnnotation,
+  onEditAnnotation,
+  onDeleteAnnotation,
+  onSelectAnnotation,
+  container,
+}) => {
+  const [copied, setCopied] = useState(false);
+
+  const displayName = filepath.split('/').pop() || filepath;
+  const relativePath = filepath.replace(/.*\/(?=.*\/)/, '');
+  const lineCount = useMemo(() => contents.split('\n').length, [contents]);
+
   const handleCopy = async () => {
     if (await copyTextToClipboard(contents)) {
       setCopied(true);
@@ -539,65 +650,17 @@ export const CodeFilePopout: React.FC<CodeFilePopoutProps> = ({
       </div>
 
       <div className="border-t border-border/30" />
-      <div
-        ref={fileAreaRef}
-        className="flex-1 min-h-0"
-        onPointerMove={(e) => {
-          lastPointerRectRef.current = new DOMRect(e.clientX, e.clientY, 0, 0);
-        }}
-        onMouseUp={() => {
-          requestAnimationFrame(openCommentForBrowserSelection);
-        }}
-      >
-        <File
-          key={filepath}
-          file={{ name: displayName, contents }}
-          prerenderedHTML={effectivePrerenderedHTML}
-          className="h-full"
-          lineAnnotations={lineAnnotations}
-          selectedLines={selectedLines}
-          renderAnnotation={renderAnnotation}
-          renderGutterUtility={renderGutterUtility}
-          style={{
-            '--diffs-dark-bg': colors.bg,
-            '--diffs-light-bg': colors.bg,
-            '--diffs-dark': colors.fg,
-            '--diffs-light': colors.fg,
-          } as React.CSSProperties}
-          options={{
-            themeType: pierreTheme.type,
-            unsafeCSS: pierreTheme.css,
-            overflow: 'scroll',
-            disableFileHeader: true,
-            enableLineSelection: true,
-            enableGutterUtility: !!onAddAnnotation,
-            lineHoverHighlight: onAddAnnotation ? 'line' : 'disabled',
-            onLineClick: handleLineClick,
-            onLineSelectionEnd: handleLineSelectionEnd,
-          }}
-        />
-      </div>
-      {pendingComment && onAddAnnotation && (
-        <CommentPopover
-          anchorEl={pendingComment.anchorEl}
-          anchorRect={pendingComment.anchorRect}
-          contextText={pendingComment.contextText}
-          isGlobal={false}
-          skillReferences
-          onSubmit={(text, images) => {
-            onAddAnnotation({
-              filePath: filepath,
-              lineStart: pendingComment.range.start,
-              lineEnd: pendingComment.range.end,
-              text,
-              images,
-              originalCode: pendingComment.originalCode,
-            });
-            setPendingComment(null);
-          }}
-          onClose={() => setPendingComment(null)}
-        />
-      )}
+      <CodeFileView
+        filepath={filepath}
+        contents={contents}
+        prerenderedHTML={prerenderedHTML}
+        annotations={annotations}
+        selectedAnnotationId={selectedAnnotationId}
+        onAddAnnotation={onAddAnnotation}
+        onEditAnnotation={onEditAnnotation}
+        onDeleteAnnotation={onDeleteAnnotation}
+        onSelectAnnotation={onSelectAnnotation}
+      />
     </PopoutDialog>
   );
 };