@plannotator/ui 0.30.0 → 0.32.0

package/components/ThemeProvider.tsx

@@ -2,6 +2,7 @@ import { createContext, useCallback, useContext, useEffect, useMemo, useRef, use
 import { configStore } from '../config/configStore';
 import { readThemePairCookies, writeThemePairCookies } from '../config/settings';
 import { useConfigValue } from '../config/useConfig';
+import { faviconDataUrl } from '@plannotator/core/favicon';
 import { storage } from '../utils/storage';
 import {
   BUILT_IN_THEMES,
@@ -36,6 +37,12 @@ type ThemeProviderState = {
   darkTheme: string;
   setHalfTheme: (half: ThemeHalf, theme: string) => void;
   availableThemes: ThemeInfo[];
+  /**
+   * Whether this provider owns the document's favicon. Published so the Settings
+   * UI can hide the favicon control on hosts that did not opt in: a knob that
+   * changes nothing is worse than no knob.
+   */
+  manageFavicon: boolean;
 };
 
 const ThemeProviderContext = createContext<ThemeProviderState>({
@@ -51,6 +58,7 @@ const ThemeProviderContext = createContext<ThemeProviderState>({
   darkTheme: 'plannotator',
   setHalfTheme: () => null,
   availableThemes: BUILT_IN_THEMES,
+  manageFavicon: false,
 });
 
 /** Sync theme classes on <html> without stripping non-theme classes (e.g. transitions-ready). */
@@ -94,6 +102,18 @@ interface ThemeProviderProps {
    * `plannotator-dark-theme`; these props rename only the two legacy values.
    */
   colorThemeStorageKey?: string;
+  /**
+   * Opt in to letting this provider own `<link rel="icon">` on the document.
+   *
+   * OFF by default, and deliberately so: `@plannotator/ui` is installed into
+   * host applications with their own branding, and a mounted provider must not
+   * silently replace a host page's favicon with Plannotator's. Plannotator's own
+   * apps pass `manageFavicon`; hosts opt in only if they want the same feature.
+   *
+   * The value also gates the Settings favicon control (see ThemeTab), so a host
+   * that leaves it off never renders a switch that would do nothing.
+   */
+  manageFavicon?: boolean;
 }
 
 export function ThemeProvider({
@@ -102,6 +122,7 @@ export function ThemeProvider({
   defaultColorTheme = 'plannotator',
   storageKey = 'plannotator-theme',
   colorThemeStorageKey = 'plannotator-color-theme',
+  manageFavicon = false,
 }: ThemeProviderProps) {
   const legacyKeys = useMemo(
     () => ({ mode: storageKey, colorTheme: colorThemeStorageKey }),
@@ -124,6 +145,26 @@ export function ThemeProvider({
   const storePair = useConfigValue('themePair');
   const pair = pendingSeed.current ?? storePair;
   const mode = pair.mode;
+  const faviconStyle = useConfigValue('faviconStyle');
+
+  useEffect(() => {
+    if (!manageFavicon) return;
+    if (typeof document === 'undefined') return;
+    let link = document.head.querySelector<HTMLLinkElement>('link[rel="icon"]');
+    if (!link) {
+      link = document.createElement('link');
+      link.rel = 'icon';
+      document.head.appendChild(link);
+    }
+    if (faviconStyle === 'classic') {
+      link.type = 'image/svg+xml';
+      link.removeAttribute('sizes');
+    } else {
+      link.type = 'image/png';
+      link.setAttribute('sizes', '64x64');
+    }
+    link.href = faviconDataUrl(faviconStyle);
+  }, [faviconStyle, manageFavicon]);
 
   // Hand the resolved pair to the store as a SEED, not a user choice: seeding
   // writes memory + cookies only. Routing it through set() would queue a
@@ -243,7 +284,8 @@ export function ThemeProvider({
     darkTheme: pair.dark,
     setHalfTheme,
     availableThemes: BUILT_IN_THEMES,
-  }), [mode, preferredMode, resolvedMode, colorTheme, pair.light, pair.dark, setMode, setColorTheme, setHalfTheme]);
+    manageFavicon,
+  }), [mode, preferredMode, resolvedMode, colorTheme, pair.light, pair.dark, setMode, setColorTheme, setHalfTheme, manageFavicon]);
 
   return (
     <ThemeProviderContext.Provider value={value}>

package/components/ThemeTab.tsx

@@ -2,6 +2,9 @@ import React, { useEffect, useState } from 'react';
 import { useTheme } from './ThemeProvider';
 import { THEME_MODES } from './themeModes';
 import { themesForHalf, type ThemeHalf } from '../utils/themeRegistry';
+import { configStore } from '../config/configStore';
+import { useConfigValue } from '../config/useConfig';
+import { faviconDataUrl, type FaviconStyle } from '@plannotator/core/favicon';
 
 interface ThemeTabProps {
   onPreview?: () => void;
@@ -13,12 +16,46 @@ const HALVES: { id: ThemeHalf; label: string }[] = [
   { id: 'dark', label: 'Dark' },
 ];
 
+const FAVICON_STYLES: { id: FaviconStyle; label: string }[] = [
+  { id: 'totman', label: 'Totman' },
+  { id: 'classic', label: 'Classic P' },
+];
+
 const SyntaxLinesIcon: React.FC<{ className?: string }> = ({ className }) => (
   <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
     <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h7" />
   </svg>
 );
 
+/**
+ * The favicon style choices. Rendered in both layouts, so it lives in one place.
+ * The compact layout drops the visible "Favicon" heading the full layout has, so
+ * the group carries its own accessible name and two unlabelled image buttons are
+ * never all a screen reader gets.
+ */
+const FaviconStyleControl: React.FC<{ selected: FaviconStyle }> = ({ selected }) => (
+  <div className="flex gap-1" role="group" aria-label="Favicon style">
+    {FAVICON_STYLES.map(({ id, label }) => (
+      <button
+        key={id}
+        type="button"
+        aria-pressed={selected === id}
+        onClick={() => configStore.set('faviconStyle', id)}
+        className={`px-2.5 py-1.5 rounded-md text-xs font-medium transition-colors ${
+          selected === id
+            ? 'bg-primary text-primary-foreground'
+            : 'bg-muted text-muted-foreground hover:text-foreground'
+        }`}
+      >
+        <span className="flex items-center gap-1.5">
+          <img src={faviconDataUrl(id)} alt="" className="w-5 h-5 rounded-sm shrink-0" />
+          {label}
+        </span>
+      </button>
+    ))}
+  </div>
+);
+
 export const ThemeTab: React.FC<ThemeTabProps> = ({ onPreview, compact }) => {
   const {
     mode,
@@ -28,7 +65,9 @@ export const ThemeTab: React.FC<ThemeTabProps> = ({ onPreview, compact }) => {
     setHalfTheme,
     availableThemes,
     preferredMode,
+    manageFavicon,
   } = useTheme();
+  const faviconStyle = useConfigValue('faviconStyle');
 
   // Which half the grid assigns to. Follows the mode you are actually seeing,
   // so opening Settings in dark mode edits the dark half first.
@@ -68,6 +107,7 @@ export const ThemeTab: React.FC<ThemeTabProps> = ({ onPreview, compact }) => {
           {THEME_MODES.map(({ id, label, Icon }) => (
             <button
               key={id}
+              type="button"
               onClick={() => setMode(id)}
               className={`px-2.5 py-1.5 rounded-md text-xs font-medium transition-colors ${
                 mode === id
@@ -82,12 +122,23 @@ export const ThemeTab: React.FC<ThemeTabProps> = ({ onPreview, compact }) => {
             </button>
           ))}
         </div>
+        {!compact && manageFavicon && (
+          <div className="space-y-1.5 pt-1">
+            <label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Favicon</label>
+            <FaviconStyleControl selected={faviconStyle} />
+          </div>
+        )}
         {!compact && (
           <p className="text-[11px] text-muted-foreground/70">
             System follows your OS and switches between the two themes below.
           </p>
         )}
-        {compact && <div className="ml-auto">{summary}</div>}
+        {compact && (
+          <>
+            {manageFavicon && <FaviconStyleControl selected={faviconStyle} />}
+            <div className="ml-auto">{summary}</div>
+          </>
+        )}
       </div>
 
       {/* Theme pair */}

package/components/Tooltip.tsx

@@ -63,7 +63,9 @@ export const Tooltip: React.FC<TooltipProps> = ({
         <BaseTooltip.Positioner side={side} align={align} sideOffset={sideOffset} className="isolate z-50">
           <BaseTooltip.Popup
             className={`z-50 px-2 py-1 text-xs bg-popover text-popover-foreground border border-border rounded shadow-md origin-[var(--transform-origin)] transition-[opacity,scale] duration-150 ease-out data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95 ${
-              wide ? 'max-w-[260px] leading-snug whitespace-normal' : 'whitespace-nowrap'
+              wide
+                ? 'max-w-[min(260px,calc(100vw-1rem))] leading-snug whitespace-normal [overflow-wrap:anywhere]'
+                : 'whitespace-nowrap'
             }`}
           >
             {content}

package/components/Viewer.tsx

@@ -49,7 +49,13 @@ import { PinpointOverlay } from './PinpointOverlay';
 import { usePinpoint } from '../hooks/usePinpoint';
 import { useAnnotationHighlighter } from '../hooks/useAnnotationHighlighter';
 import { useVimSelection } from '../hooks/useVimSelection';
-import { useScrollViewport } from '../hooks/useScrollViewport';
+import {
+  getScrollViewportIntersectionRoot,
+  getScrollViewportRect,
+  getScrollViewportTop,
+  scrollViewportTo,
+  useScrollViewport,
+} from '../hooks/useScrollViewport';
 import { decodeAnchorHash } from '../utils/anchors';
 import { VimModeOverlay } from './VimModeOverlay';
 
@@ -602,7 +608,7 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
     if (!stickyActions || !stickySentinelRef.current || !scrollViewport) return;
     const observer = new IntersectionObserver(
       ([entry]) => setIsStuck(!entry.isIntersecting),
-      { root: scrollViewport, threshold: 0 }
+      { root: getScrollViewportIntersectionRoot(scrollViewport), threshold: 0 }
     );
     observer.observe(stickySentinelRef.current);
     return () => observer.disconnect();
@@ -635,12 +641,12 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
     const headerOffset = stickyActionsEl
       ? stickyActionsEl.getBoundingClientRect().height + stickyTop
       : 0;
-    const containerRect = scrollViewport.getBoundingClientRect();
+    const containerRect = getScrollViewportRect(scrollViewport);
     const targetRect = target.getBoundingClientRect();
     const relativeTop = targetRect.top - containerRect.top;
-    const offsetPosition = scrollViewport.scrollTop + relativeTop - headerOffset;
+    const offsetPosition = getScrollViewportTop(scrollViewport) + relativeTop - headerOffset;
 
-    scrollViewport.scrollTo({
+    scrollViewportTo(scrollViewport, {
       top: Math.max(0, offsetPosition),
       behavior: 'smooth',
     });
@@ -778,6 +784,8 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
     setViewerCommentPopover(null);
   }, []);
 
+  const commentDraftScope = linkedDocInfo?.filepath ?? sourceInfo ?? markdown.slice(0, 120);
+
   const codePathValidation = useValidatedCodePaths(markdown, codePathBaseDir, disableCodePathValidation);
 
   return (
@@ -1154,6 +1162,7 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
               contextText={hookCommentPopover.contextText}
               isGlobal={false}
               initialText={hookCommentPopover.initialText}
+              draftKey={`plan:${commentDraftScope}:${hookCommentPopover.draftKey}`}
               onSubmit={hookCommentSubmit}
               onClose={hookCommentClose}
               allowImages={allowImages}
@@ -1173,6 +1182,11 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
             contextText={viewerCommentPopover.contextText}
             isGlobal={viewerCommentPopover.isGlobal}
             initialText={viewerCommentPopover.initialText}
+            draftKey={`plan:${commentDraftScope}:${
+              viewerCommentPopover.isGlobal
+                ? 'global'
+                : `code-block:${viewerCommentPopover.codeBlock?.block.id ?? viewerCommentPopover.contextText}`
+            }`}
             onSubmit={handleViewerCommentSubmit}
             onClose={handleViewerCommentClose}
             allowImages={allowImages}

package/components/VimTargetReticle.tsx

@@ -4,7 +4,11 @@ import {
   useState,
   type RefObject,
 } from 'react';
-import { useScrollViewport } from '../hooks/useScrollViewport';
+import {
+  addScrollViewportListener,
+  getScrollViewportRect,
+  useScrollViewport,
+} from '../hooks/useScrollViewport';
 import type { SemanticTarget } from '../utils/blockTargeting';
 import {
   createRangeBetweenTextPositions,
@@ -186,7 +190,9 @@ export function VimTargetReticle({
         return;
       }
       const containerRect = container.getBoundingClientRect();
-      const viewportTop = scrollViewport?.getBoundingClientRect().top ?? containerRect.top;
+      const viewportTop = scrollViewport
+        ? getScrollViewportRect(scrollViewport).top
+        : containerRect.top;
       const stickyBottom = container
         .querySelector<HTMLElement>('[data-sticky-actions]')
         ?.getBoundingClientRect()
@@ -205,7 +211,9 @@ export function VimTargetReticle({
 
     update();
     window.addEventListener('resize', scheduleUpdate, { passive: true });
-    scrollViewport?.addEventListener('scroll', scheduleUpdate, { passive: true });
+    const removeScrollListener = scrollViewport
+      ? addScrollViewportListener(scrollViewport, scheduleUpdate)
+      : undefined;
     const resizeObserver = typeof ResizeObserver === 'undefined'
       ? null
       : new ResizeObserver(scheduleUpdate);
@@ -214,7 +222,7 @@ export function VimTargetReticle({
     return () => {
       cancelAnimationFrame(rafRef.current);
       window.removeEventListener('resize', scheduleUpdate);
-      scrollViewport?.removeEventListener('scroll', scheduleUpdate);
+      removeScrollListener?.();
       resizeObserver?.disconnect();
     };
   }, [containerRef, restoredState, scrollViewport, target]);

package/components/ai/DocumentAIChatPanel.tsx

@@ -268,6 +268,7 @@ const GeneralInput: React.FC<{
     <div className="border-t border-border/50 p-2">
       <div className="flex items-end gap-1.5">
         <textarea
+          data-pn-mobile-editable="true"
           ref={textareaRef}
           value={value}
           onChange={(event) => onChange(event.target.value)}

package/components/blocks/MathBlock.tsx

@@ -1,26 +1,38 @@
 import React, { useMemo } from 'react';
-import katex from 'katex';
 import type { Block } from '../../types';
+import { normalizeMathTex, renderMathToHtml } from '../../utils/math';
+import { useMathRenderer } from '../../hooks/useMathRenderer';
+
+// Kept as re-exports: InlineMarkdown and older consumers import them from here.
+export { normalizeMathTex, renderMathToHtml };
 
 type MathBlockProps = {
   block: Block;
 };
 
-export const normalizeMathTex = (tex: string): string => tex.trim();
-
-export const renderMathToHtml = (tex: string, displayMode: boolean): string => (
-  katex.renderToString(tex, {
-    displayMode,
-    throwOnError: false,
-    strict: 'warn',
-    trust: false,
-    output: 'html',
-  })
-);
-
 export const MathBlock: React.FC<MathBlockProps> = ({ block }) => {
   const tex = normalizeMathTex(block.content);
-  const html = useMemo(() => renderMathToHtml(tex, true), [tex]);
+  const renderer = useMathRenderer();
+  const html = useMemo(() => renderMathToHtml(tex, true, renderer), [tex, renderer]);
+
+  // The wrapper (class names, data-* anchors, aria-label) is identical in both
+  // branches: block targeting and math-annotation restore key on these
+  // attributes, so a placeholder must be addressable exactly like the typeset
+  // block. The placeholder's child is a React text node, never markup.
+  if (html === null) {
+    return (
+      <div
+        className="math-block math-annotatable my-5 overflow-x-auto py-2 text-foreground"
+        data-block-id={block.id}
+        data-block-type="math"
+        data-math-tex={tex}
+        data-math-display="true"
+        aria-label={tex}
+      >
+        {tex}
+      </div>
+    );
+  }
 
   return (
     <div

package/components/core/button.tsx

@@ -13,6 +13,12 @@ function cx(...classes: Array<string | false | null | undefined>): string {
   return classes.filter(Boolean).join(' ');
 }
 
+/**
+ * Legacy shared button primitive.
+ *
+ * The visual sizes remain compact, while the shared touch marker expands the
+ * physical target only when a coarse pointer is present.
+ */
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({
   className,
   variant = 'outline',
@@ -22,23 +28,25 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({
   ...props
 }, ref) => (
   <button
+    {...props}
     ref={ref}
     type={type}
+    data-pn-touch-target="true"
+    data-pn-touch-target-icon={size === 'icon' || variant === 'icon' ? 'true' : undefined}
     className={cx(
       'inline-flex items-center justify-center gap-2 rounded-md text-xs font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50',
       size === 'sm' && 'h-8 px-2.5',
       size === 'md' && 'h-9 px-3',
       size === 'icon' && 'h-8 w-8',
-      variant === 'primary' && 'bg-primary text-primary-foreground hover:opacity-90',
-      variant === 'outline' && 'border border-border bg-card text-foreground hover:bg-muted',
-      variant === 'ghost' && 'text-muted-foreground hover:bg-muted hover:text-foreground',
+      variant === 'primary' && 'bg-primary text-primary-foreground [@media(hover:hover)_and_(pointer:fine)]:hover:opacity-90',
+      variant === 'outline' && 'border border-border bg-card text-foreground [@media(hover:hover)_and_(pointer:fine)]:hover:bg-muted',
+      variant === 'ghost' && 'text-muted-foreground [@media(hover:hover)_and_(pointer:fine)]:hover:bg-muted [@media(hover:hover)_and_(pointer:fine)]:hover:text-foreground',
       variant === 'icon' && (active
         ? 'border border-primary/50 bg-primary/10 text-primary'
-        : 'border border-border bg-background text-muted-foreground hover:bg-muted hover:text-foreground'),
-      variant === 'danger' && 'border border-border bg-background text-muted-foreground hover:border-destructive/50 hover:bg-destructive/10 hover:text-destructive',
+        : 'border border-border bg-background text-muted-foreground [@media(hover:hover)_and_(pointer:fine)]:hover:bg-muted [@media(hover:hover)_and_(pointer:fine)]:hover:text-foreground'),
+      variant === 'danger' && 'border border-border bg-background text-muted-foreground [@media(hover:hover)_and_(pointer:fine)]:hover:border-destructive/50 [@media(hover:hover)_and_(pointer:fine)]:hover:bg-destructive/10 [@media(hover:hover)_and_(pointer:fine)]:hover:text-destructive',
       className
     )}
-    {...props}
   />
 ));
 Button.displayName = 'Button';