@plannotator/ui 0.22.0

package/components/QuickLabelDropdown.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { type QuickLabel, getLabelColors } from '../utils/quickLabels';
+
+/**
+ * Shared vertical label list used by both FloatingQuickLabelPicker
+ * and the AnnotationToolbar's inline dropdown.
+ *
+ * Context-menu style: single column, colored accent bars, full-width rows.
+ */
+export const QuickLabelDropdown: React.FC<{
+  labels: QuickLabel[];
+  onSelect: (label: QuickLabel) => void;
+  /** Enable staggered row entrance animation */
+  animate?: boolean;
+}> = ({ labels, onSelect, animate = false }) => {
+  return (
+    <div className="py-1" onMouseDown={(e) => e.stopPropagation()}>
+      {animate && (
+        <style>{`
+          @keyframes qld-row-in {
+            from { opacity: 0; transform: translateX(-3px); }
+            to   { opacity: 1; transform: translateX(0); }
+          }
+        `}</style>
+      )}
+      {labels.map((label, index) => {
+        const colors = getLabelColors(label.color);
+        return (
+          <button
+            key={label.id}
+            onClick={() => onSelect(label)}
+            className="group w-full flex items-center gap-2 px-2 py-[5px] text-left transition-colors hover:bg-muted/60 active:bg-muted"
+            style={animate ? {
+              animationDelay: `${index * 18}ms`,
+              animationName: 'qld-row-in',
+              animationDuration: '0.1s',
+              animationFillMode: 'both',
+              animationTimingFunction: 'ease-out',
+            } : undefined}
+          >
+            {/* Color accent bar */}
+            <span
+              className="w-[3px] self-stretch rounded-full flex-shrink-0"
+              style={{ backgroundColor: colors.text }}
+            />
+            {/* Emoji */}
+            <span className="text-xs leading-none flex-shrink-0">{label.emoji}</span>
+            {/* Label text */}
+            <span className="text-[11px] leading-tight text-foreground/85 group-hover:text-foreground truncate flex-1">
+              {label.text}
+            </span>
+            {/* Shortcut hint */}
+            {index < 10 && (
+              <span className="text-[9px] tabular-nums text-muted-foreground/40 group-hover:text-muted-foreground/60 flex-shrink-0 font-mono">
+                {index === 9 ? '0' : index + 1}
+              </span>
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+};

package/components/RenderedMarkdown.tsx

@@ -0,0 +1,54 @@
+import React, { useMemo } from 'react';
+import { parseMarkdownToBlocks, groupBlocks, computeListIndices } from '../utils/parser';
+import { BlockRenderer } from './BlockRenderer';
+
+/**
+ * Full markdown renderer for surfaces outside the plan editor (e.g. the PR
+ * description). Reuses the shared {@link BlockRenderer} — so tables, HTML,
+ * callouts, code, and `data-block-id` all come along — without dragging in the
+ * plan Viewer's diagram/toolbar/lightbox machinery.
+ *
+ * Sizing/spacing is inherited from the wrapper: pass `className="md-compact"`
+ * (or any scope) to override the renderer's plan-sized defaults via CSS.
+ */
+export interface RenderedMarkdownProps {
+  markdown: string;
+  className?: string;
+  onImageClick?: (src: string, alt: string) => void;
+  onOpenLinkedDoc?: (path: string) => void;
+  onOpenCodeFile?: (path: string) => void;
+  githubRepo?: string;
+}
+
+export const RenderedMarkdown: React.FC<RenderedMarkdownProps> = ({
+  markdown,
+  className,
+  onImageClick,
+  onOpenLinkedDoc,
+  onOpenCodeFile,
+  githubRepo,
+}) => {
+  const groups = useMemo(() => groupBlocks(parseMarkdownToBlocks(markdown)), [markdown]);
+  const cb = { onImageClick, onOpenLinkedDoc, onOpenCodeFile, githubRepo };
+
+  return (
+    <div className={className}>
+      {groups.map((group) =>
+        group.type === 'list-group' ? (
+          (() => {
+            const indices = computeListIndices(group.blocks);
+            return (
+              <div key={group.key}>
+                {group.blocks.map((block, i) => (
+                  <BlockRenderer key={block.id} block={block} orderedIndex={indices[i]} {...cb} />
+                ))}
+              </div>
+            );
+          })()
+        ) : (
+          <BlockRenderer key={group.block.id} block={group.block} {...cb} />
+        ),
+      )}
+    </div>
+  );
+};

package/components/RepoIcon.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+export const RepoIcon: React.FC<{ className?: string }> = ({ className }) => (
+  <svg
+    className={className}
+    viewBox="0 0 768 1024"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M320 256h-64v64h64v-64z m0-128h-64v64h64v-64z m384-128c-32 0-608 0-640 0s-64 32-64 64 0 736 0 768 32 64 64 64 128 0 128 0v128l96-96 96 96v-128s288 0 320 0 64-32 64-64 0-736 0-768-32-64-64-64z m0 800c0 16-15 32-32 32s-288 0-288 0v-64h-192v64s-79 0-96 0-32-17-32-32 0-96 0-96h640s0 80 0 96z m0-160h-512v-576h513l-1 576z m-384-128h-64v64h64v-64z m0-128h-64v64h64v-64z" />
+  </svg>
+);

package/components/ResizeHandle.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import type { ResizeHandleProps as BaseProps } from '../hooks/useResizablePanel';
+
+interface Props extends BaseProps {
+  className?: string;
+  /** When provided, renders a hover-reveal collapse button centered on the
+   *  handle (prototype's gutter affordance). Chevron direction follows `side`:
+   *  a left sidebar collapses leftward, a right sidebar rightward. */
+  onCollapse?: () => void;
+  /**
+   * Which panel this handle resizes, not which side of the boundary it's on.
+   *
+   * The touch-area is an absolutely-positioned child of a `w-0` parent, so
+   * its actual width is `parent - left - right`. Because the parent is zero
+   * wide, any combination where `left` and `right` cancel produces a 0-px
+   * element and the handle becomes undraggable. See issue #354.
+   *
+   *   'left'  — resizes a left sidebar. Touch area extends slightly into the
+   *             sidebar (leftward) and slightly past the boundary (rightward).
+   *             12px total: `-left-1` (-4px) + `-right-2` (-8px) → width 12.
+   *   'right' — resizes a right panel. Touch area must NOT extend leftward,
+   *             because the adjacent content area's overlay scrollbar lives
+   *             in that region (right edge of the content, just left of the
+   *             boundary). `left-0 -right-3` → width 12, entirely to the
+   *             right of the boundary. DO NOT push `left` positive —
+   *             `left-3 -right-3` evaluates to width 0 and kills the drag.
+   */
+  side?: 'left' | 'right';
+}
+
+export const ResizeHandle: React.FC<Props> = ({
+  isDragging,
+  onPointerDown,
+  onDoubleClick,
+  style,
+  className,
+  side,
+  onCollapse,
+}) => (
+  <div
+    className={`relative w-0 cursor-col-resize flex-shrink-0 group${className ? ` ${className}` : ''}`}
+  >
+    {/* Visible track — 4px wide, centered on the zero-width layout box,
+        invisible until hover/drag. */}
+    <div className={`absolute inset-y-0 -left-0.5 -right-0.5 transition-colors ${
+      isDragging ? 'bg-transparent' : 'group-hover:bg-border'
+    }`} />
+    {/* Wider grab/touch zone — must never have zero width (see `side` docs).
+        Pointer events + setPointerCapture live here; touch-action:none (from
+        style) stops touch drags from scroll-hijacking. */}
+    <div
+      className={`absolute inset-y-0 ${
+        side === 'left' ? '-right-2 -left-1' :
+        side === 'right' ? '-right-3 left-0' :
+        '-inset-x-2'
+      }`}
+      style={style}
+      onPointerDown={onPointerDown}
+      onDoubleClick={onDoubleClick}
+    />
+    {/* Hover-reveal collapse button, centered on the handle. stopPropagation on
+        pointerdown so clicking it never starts a drag. Hidden mid-drag. */}
+    {onCollapse && !isDragging && (
+      <button
+        type="button"
+        onPointerDown={(e) => e.stopPropagation()}
+        onClick={(e) => {
+          e.stopPropagation();
+          onCollapse();
+        }}
+        title="Collapse sidebar"
+        aria-label="Collapse sidebar"
+        data-collapse={side}
+        className="absolute top-1/2 left-1/2 z-20 flex h-6 w-4 -translate-x-1/2 -translate-y-1/2 items-center justify-center before:absolute before:-inset-2 before:content-[''] rounded-sm bg-surface-1 text-muted-foreground/60 opacity-0 ring-1 ring-border/40 transition-opacity hover:text-foreground group-hover:opacity-100 group-hover/sidebar:opacity-100"
+      >
+        <svg className="size-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d={side === 'right' ? 'M9 5l7 7-7 7' : 'M15 19l-7-7 7-7'}
+          />
+        </svg>
+      </button>
+    )}
+  </div>
+);

package/components/ReviewAgentsIcon.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+interface ReviewAgentsIconProps {
+  className?: string;
+}
+
+/**
+ * Magnifying glass with cog — icon for the Review Agents tab.
+ * Uses currentColor for stroke so it inherits from parent text color.
+ */
+export const ReviewAgentsIcon: React.FC<ReviewAgentsIconProps> = ({ className = 'w-3.5 h-3.5' }) => (
+  <svg className={`${className} flex-shrink-0`} viewBox="0 0 64 64" fill="none" stroke="currentColor">
+    <path d="M40.5 40.5L55 55" strokeWidth={7} strokeLinecap="round" />
+    <circle cx="27" cy="27" r="20" strokeWidth={4} />
+    <path d="M27 14L29.2 14.3L30.2 17.2L32.6 18.6L35.5 17.5L37.2 19.2L36.1 22.1L37.5 24.5L40.4 25.5L40.7 27.7L40.4 29.9L37.5 30.9L36.1 33.3L37.2 36.2L35.5 37.9L32.6 36.8L30.2 38.2L29.2 41.1L27 41.4L24.8 41.1L23.8 38.2L21.4 36.8L18.5 37.9L16.8 36.2L17.9 33.3L16.5 30.9L13.6 29.9L13.3 27.7L13.6 25.5L16.5 24.5L17.9 22.1L16.8 19.2L18.5 17.5L21.4 18.6L23.8 17.2L24.8 14.3Z" strokeWidth={1.5} strokeLinejoin="round" />
+    <circle cx="27" cy="27.7" r="7" strokeWidth={1.5} />
+  </svg>
+);

package/components/SearchableSelect.tsx

@@ -0,0 +1,157 @@
+import React, { useState, useMemo, useRef, useCallback, type ReactNode } from 'react';
+import { Popover, PopoverTrigger, PopoverContent } from './Popover';
+
+interface SearchableSelectProps<T extends { id: string }> {
+  items: T[];
+  selectedId?: string;
+  onSelect: (item: T) => void;
+  filterFn: (item: T, query: string) => boolean;
+  renderItem: (item: T, state: { isSelected: boolean; isFocused: boolean }) => ReactNode;
+  renderTrigger: (state: { open: boolean }) => ReactNode;
+  headerContent?: ReactNode;
+  placeholder?: string;
+  emptyMessage?: string;
+  align?: 'start' | 'center' | 'end';
+  width?: string;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export function SearchableSelect<T extends { id: string }>({
+  items,
+  selectedId,
+  onSelect,
+  filterFn,
+  renderItem,
+  renderTrigger,
+  headerContent,
+  placeholder = 'Search...',
+  emptyMessage = 'No results',
+  align = 'start',
+  width = 'w-64',
+  onOpenChange,
+}: SearchableSelectProps<T>) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState('');
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const listRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const filtered = useMemo(
+    () => (search ? items.filter((item) => filterFn(item, search)) : items),
+    [items, search, filterFn],
+  );
+
+  const handleOpenChange = useCallback(
+    (next: boolean) => {
+      setOpen(next);
+      if (!next) {
+        setSearch('');
+        setFocusedIndex(-1);
+      }
+      onOpenChange?.(next);
+    },
+    [onOpenChange],
+  );
+
+  const scrollToIndex = useCallback((i: number) => {
+    listRef.current?.querySelector(`[data-index="${i}"]`)?.scrollIntoView({ block: 'nearest' });
+  }, []);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      const len = filtered.length;
+      if (len === 0) return;
+
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        const next = focusedIndex < len - 1 ? focusedIndex + 1 : 0;
+        setFocusedIndex(next);
+        scrollToIndex(next);
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        const next = focusedIndex > 0 ? focusedIndex - 1 : len - 1;
+        setFocusedIndex(next);
+        scrollToIndex(next);
+      } else if (e.key === 'Enter') {
+        e.preventDefault();
+        if (focusedIndex >= 0 && filtered[focusedIndex]) {
+          onSelect(filtered[focusedIndex]);
+          handleOpenChange(false);
+        }
+      }
+    },
+    [filtered, focusedIndex, onSelect, handleOpenChange, scrollToIndex],
+  );
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PopoverTrigger asChild>{renderTrigger({ open })}</PopoverTrigger>
+      <PopoverContent
+        align={align}
+        className={`${width} p-0`}
+        onOpenAutoFocus={(e) => {
+          e.preventDefault();
+          inputRef.current?.focus();
+        }}
+      >
+        {/* Search row */}
+        <div className="flex items-center gap-2 border-b border-border/50 px-3 py-2">
+          <svg
+            className="w-3 h-3 flex-shrink-0 text-muted-foreground/60"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2.5}
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+            />
+          </svg>
+          <input
+            ref={inputRef}
+            value={search}
+            onChange={(e) => {
+              setSearch(e.target.value);
+              setFocusedIndex(-1);
+            }}
+            onKeyDown={handleKeyDown}
+            placeholder={placeholder}
+            className="w-full bg-transparent text-xs text-foreground placeholder:text-muted-foreground/50 outline-none"
+          />
+        </div>
+
+        {headerContent}
+
+        {/* Item list */}
+        <div ref={listRef} className="max-h-60 overflow-y-auto py-1">
+          {filtered.length === 0 ? (
+            <p className="px-3 py-4 text-center text-xs text-muted-foreground/60">{emptyMessage}</p>
+          ) : (
+            filtered.map((item, i) => (
+              <button
+                key={item.id}
+                type="button"
+                data-index={i}
+                onClick={() => {
+                  onSelect(item);
+                  handleOpenChange(false);
+                }}
+                onMouseEnter={() => setFocusedIndex(i)}
+                className={`w-full text-left px-3 py-1.5 text-xs transition-colors ${
+                  focusedIndex === i ? 'bg-muted/50' : 'hover:bg-muted/40'
+                }`}
+              >
+                {renderItem(item, {
+                  isSelected: item.id === selectedId,
+                  isFocused: focusedIndex === i,
+                })}
+              </button>
+            ))
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}