@plannotator/ui 0.53.1 → 0.55.0

package/components/ExportModal.tsx

@@ -10,6 +10,7 @@ import React, { useState, useEffect } from 'react';
 import { getObsidianSettings, getEffectiveVaultPath } from '../utils/obsidian';
 import { getBearSettings } from '../utils/bear';
 import { getOctarineSettings } from '../utils/octarine';
+import { getNotionParentPageId, isNotionAvailable } from '../utils/notion';
 import { wrapFeedbackForAgent } from '../utils/parser';
 import { copyTextToClipboard } from '../utils/clipboard';
 import { noteServerSessionMismatch, withServerSession } from '../utils/serverSession';
@@ -20,11 +21,12 @@ interface SaveToNotesPayload {
   obsidian?: object;
   bear?: object;
   octarine?: object;
+  notion?: object;
 }
 
 /** Parsed response from the notes endpoint. */
 interface SaveToNotesResult {
-  results?: Record<string, { success?: boolean; error?: string }>;
+  results?: Record<string, { success?: boolean; error?: string; url?: string }>;
 }
 
 /** Default save-to-notes wire: today's literal POST to /api/save-notes. */
@@ -74,7 +76,7 @@ interface ExportModalProps {
 
 type Tab = 'share' | 'annotations' | 'notes';
 
-type SaveTarget = 'obsidian' | 'bear' | 'octarine';
+type SaveTarget = 'obsidian' | 'bear' | 'octarine' | 'notion';
 type SaveStatus = 'idle' | 'saving' | 'success' | 'error';
 
 export const ExportModal: React.FC<ExportModalProps> = ({
@@ -99,8 +101,9 @@ export const ExportModal: React.FC<ExportModalProps> = ({
   const defaultTab = initialTab || (sharingEnabled ? 'share' : 'annotations');
   const [activeTab, setActiveTab] = useState<Tab>(defaultTab);
   const [copied, setCopied] = useState<'short' | 'full' | 'annotations' | false>(false);
-  const [saveStatus, setSaveStatus] = useState<Record<SaveTarget, SaveStatus>>({ obsidian: 'idle', bear: 'idle', octarine: 'idle' });
+  const [saveStatus, setSaveStatus] = useState<Record<SaveTarget, SaveStatus>>({ obsidian: 'idle', bear: 'idle', octarine: 'idle', notion: 'idle' });
   const [saveErrors, setSaveErrors] = useState<Record<string, string>>({});
+  const [savedUrls, setSavedUrls] = useState<Partial<Record<SaveTarget, string>>>({});
 
   // Reset tab when modal opens
   useEffect(() => {
@@ -112,8 +115,9 @@ export const ExportModal: React.FC<ExportModalProps> = ({
   // Reset save status when modal opens
   useEffect(() => {
     if (isOpen) {
-      setSaveStatus({ obsidian: 'idle', bear: 'idle', octarine: 'idle' });
+      setSaveStatus({ obsidian: 'idle', bear: 'idle', octarine: 'idle', notion: 'idle' });
       setSaveErrors({});
+      setSavedUrls({});
     }
   }, [isOpen]);
 
@@ -127,6 +131,10 @@ export const ExportModal: React.FC<ExportModalProps> = ({
   const isObsidianReady = obsidianSettings.enabled && effectiveVaultPath.trim().length > 0;
   const isBearReady = bearSettings.enabled;
   const isOctarineReady = octarineSettings.enabled && octarineSettings.workspace.trim().length > 0;
+  // Notion shows only when this server offers it (NOTION_TOKEN set, local session).
+  const notionAvailable = isNotionAvailable();
+  const notionParentPageId = getNotionParentPageId();
+  const isNotionReady = notionParentPageId !== null;
 
   const handleCopy = async (text: string, which: 'short' | 'full' | 'annotations') => {
     if (await copyTextToClipboard(text)) {
@@ -162,7 +170,7 @@ export const ExportModal: React.FC<ExportModalProps> = ({
     setSaveStatus(prev => ({ ...prev, [target]: 'saving' }));
     setSaveErrors(prev => { const next = { ...prev }; delete next[target]; return next; });
 
-    const body: { obsidian?: object; bear?: object; octarine?: object } = {};
+    const body: { obsidian?: object; bear?: object; octarine?: object; notion?: object } = {};
 
     if (target === 'obsidian') {
       body.obsidian = {
@@ -183,6 +191,9 @@ export const ExportModal: React.FC<ExportModalProps> = ({
         folder: octarineSettings.folder || 'plannotator',
       };
     }
+    if (target === 'notion' && notionParentPageId) {
+      body.notion = { plan: markdown, parentPageId: notionParentPageId };
+    }
 
     try {
       const data = await onSaveToNotes(body);
@@ -190,6 +201,7 @@ export const ExportModal: React.FC<ExportModalProps> = ({
 
       if (result?.success) {
         setSaveStatus(prev => ({ ...prev, [target]: 'success' }));
+        if (result.url) setSavedUrls(prev => ({ ...prev, [target]: result.url! }));
       } else {
         setSaveStatus(prev => ({ ...prev, [target]: 'error' }));
         setSaveErrors(prev => ({ ...prev, [target]: result?.error || 'Save failed' }));
@@ -205,10 +217,11 @@ export const ExportModal: React.FC<ExportModalProps> = ({
     if (isObsidianReady) targets.push('obsidian');
     if (isBearReady) targets.push('bear');
     if (isOctarineReady) targets.push('octarine');
+    if (isNotionReady) targets.push('notion');
     await Promise.all(targets.map(t => handleSaveToNotes(t)));
   };
 
-  const readyCount = [isObsidianReady, isBearReady, isOctarineReady].filter(Boolean).length;
+  const readyCount = [isObsidianReady, isBearReady, isOctarineReady, isNotionReady].filter(Boolean).length;
 
   // Determine which tabs to show
   const showTabs = sharingEnabled || showNotesTab;
@@ -538,12 +551,69 @@ export const ExportModal: React.FC<ExportModalProps> = ({
                 )}
               </div>
 
+              {/* Notion */}
+              {notionAvailable && (
+                <div className="border border-border rounded-lg p-3 space-y-2">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <span className={`w-2 h-2 rounded-full ${isNotionReady ? 'bg-success' : 'bg-muted-foreground/30'}`} />
+                      <span className="text-sm font-medium">Notion</span>
+                    </div>
+                    {isNotionReady ? (
+                      <button
+                        onClick={() => handleSaveToNotes('notion')}
+                        disabled={saveStatus.notion === 'saving'}
+                        className={`px-3 py-1 rounded-md text-xs font-medium transition-all ${
+                          saveStatus.notion === 'success'
+                            ? 'bg-success/15 text-success'
+                            : saveStatus.notion === 'error'
+                              ? 'bg-destructive/15 text-destructive'
+                              : saveStatus.notion === 'saving'
+                                ? 'bg-muted text-muted-foreground opacity-50'
+                                : 'bg-primary text-primary-foreground hover:opacity-90'
+                        }`}
+                      >
+                        {saveStatus.notion === 'saving' ? 'Saving...'
+                          : saveStatus.notion === 'success' ? 'Saved'
+                          : saveStatus.notion === 'error' ? 'Failed'
+                          : 'Save'}
+                      </button>
+                    ) : (
+                      <span className="text-xs text-muted-foreground">Not configured</span>
+                    )}
+                  </div>
+                  {isNotionReady && (
+                    <div className="text-[10px] text-muted-foreground/70">
+                      Parent page: {notionParentPageId}
+                    </div>
+                  )}
+                  {savedUrls.notion?.startsWith('https://') && (
+                    <a
+                      href={savedUrls.notion}
+                      target="_blank"
+                      rel="noreferrer"
+                      className="block text-[10px] text-primary hover:underline truncate"
+                    >
+                      Open saved page
+                    </a>
+                  )}
+                  {!isNotionReady && (
+                    <div className="text-[10px] text-muted-foreground/70">
+                      Enable in Settings &gt; Saving &gt; Notion
+                    </div>
+                  )}
+                  {saveErrors.notion && (
+                    <div className="text-[10px] text-destructive">{saveErrors.notion}</div>
+                  )}
+                </div>
+              )}
+
               {/* Save All button */}
               {readyCount >= 2 && (
                 <div className="flex justify-end">
                   <button
                     onClick={handleSaveAll}
-                    disabled={saveStatus.obsidian === 'saving' || saveStatus.bear === 'saving' || saveStatus.octarine === 'saving'}
+                    disabled={saveStatus.obsidian === 'saving' || saveStatus.bear === 'saving' || saveStatus.octarine === 'saving' || saveStatus.notion === 'saving'}
                     className="px-3 py-1.5 rounded-md text-xs font-medium bg-primary text-primary-foreground hover:opacity-90 transition-opacity disabled:opacity-50"
                   >
                     Save All

package/components/HostTitle.tsx

@@ -33,9 +33,6 @@ export function getComponentTooltips(): boolean {
   return componentTooltips;
 }
 
-/** How long the pointer rests before a component tooltip opens. */
-const HOST_TITLE_DELAY_MS = 150;
-
 /**
  * Where a tooltip for `trigger` is portaled: the open native `<dialog>` it
  * sits in (a popup in the body is drawn under the dialog's top layer), else
@@ -83,7 +80,6 @@ export function HostTitle({
       content={title}
       side={side}
       wide
-      delayDuration={HOST_TITLE_DELAY_MS}
       escapePassesThrough
       shouldOpen={(trigger) => {
         if (noHover() || (cut && !isTextCut(trigger))) return false;

package/components/ImageAnnotator/Toolbar.tsx

@@ -15,6 +15,8 @@ interface ToolbarProps {
   onRedo?: () => void;
   onClear: () => void;
   onSave: () => void;
+  /** The key named in the ✓'s title: Escape by default; Enter where Escape cancels (`escapeCancels`). */
+  saveKey?: 'Escape' | 'Enter';
 }
 
 const PenIcon = () => (
@@ -85,6 +87,15 @@ const TOOLS: { id: Tool; icon: React.FC; label: string }[] = [
 
 const STROKE_SIZES = [3, 6, 10, 16, 24];
 
+/** The colours' names, for a screen reader (the swatch shows only the colour). */
+const COLOR_NAMES: Record<string, string> = {
+  '#ef4444': 'Red',
+  '#eab308': 'Yellow',
+  '#22c55e': 'Green',
+  '#3b82f6': 'Blue',
+  '#ffffff': 'White',
+};
+
 export const Toolbar: React.FC<ToolbarProps> = ({
   tool,
   color,
@@ -98,6 +109,7 @@ export const Toolbar: React.FC<ToolbarProps> = ({
   onRedo,
   onClear,
   onSave,
+  saveKey = 'Escape',
 }) => {
   const currentSizeIndex = STROKE_SIZES.indexOf(strokeSize);
   const canDecrease = currentSizeIndex > 0;
@@ -121,6 +133,8 @@ export const Toolbar: React.FC<ToolbarProps> = ({
             type="button"
             onClick={() => onToolChange(id)}
             title={label}
+            aria-label={label}
+            aria-pressed={tool === id}
             className={`p-1.5 rounded transition-colors ${
               tool === id
                 ? 'bg-primary text-primary-foreground'
@@ -141,6 +155,7 @@ export const Toolbar: React.FC<ToolbarProps> = ({
           onClick={() => canDecrease && onStrokeSizeChange(STROKE_SIZES[currentSizeIndex - 1])}
           disabled={!canDecrease}
           title="Smaller stroke"
+          aria-label="Smaller stroke"
           className={`p-1 rounded transition-colors ${
             canDecrease
               ? 'hover:bg-muted text-muted-foreground hover:text-foreground'
@@ -152,6 +167,8 @@ export const Toolbar: React.FC<ToolbarProps> = ({
         <div
           className="w-5 h-5 flex items-center justify-center"
           title={`Stroke size: ${strokeSize}`}
+          role="img"
+          aria-label={`Stroke size: ${strokeSize}`}
         >
           <div
             className="rounded-full"
@@ -167,6 +184,7 @@ export const Toolbar: React.FC<ToolbarProps> = ({
           onClick={() => canIncrease && onStrokeSizeChange(STROKE_SIZES[currentSizeIndex + 1])}
           disabled={!canIncrease}
           title="Larger stroke"
+          aria-label="Larger stroke"
           className={`p-1 rounded transition-colors ${
             canIncrease
               ? 'hover:bg-muted text-muted-foreground hover:text-foreground'
@@ -186,6 +204,8 @@ export const Toolbar: React.FC<ToolbarProps> = ({
             key={c}
             type="button"
             onClick={() => onColorChange(c)}
+            aria-label={`Colour: ${COLOR_NAMES[c] ?? c}`}
+            aria-pressed={color === c}
             className={`w-5 h-5 rounded-full border-2 transition-transform ${
               color === c ? 'scale-110 border-foreground' : 'border-transparent hover:scale-105'
             }`}
@@ -202,6 +222,7 @@ export const Toolbar: React.FC<ToolbarProps> = ({
         onClick={onUndo}
         disabled={!canUndo}
         title="Undo (Cmd+Z)"
+        aria-label="Undo"
         className={`p-1.5 rounded transition-colors ${
           canUndo
             ? 'hover:bg-muted text-muted-foreground hover:text-foreground'
@@ -217,6 +238,7 @@ export const Toolbar: React.FC<ToolbarProps> = ({
           onClick={onRedo}
           disabled={!canRedo}
           title="Redo (Cmd+Shift+Z)"
+          aria-label="Redo"
           className={`p-1.5 rounded transition-colors ${
             canRedo
               ? 'hover:bg-muted text-muted-foreground hover:text-foreground'
@@ -232,6 +254,7 @@ export const Toolbar: React.FC<ToolbarProps> = ({
         type="button"
         onClick={onClear}
         title="Clear all"
+        aria-label="Clear all"
         className="p-1.5 rounded transition-colors hover:bg-muted text-muted-foreground hover:text-destructive"
       >
         <ClearIcon />
@@ -245,7 +268,8 @@ export const Toolbar: React.FC<ToolbarProps> = ({
       <button
         type="button"
         onClick={onSave}
-        title="Save (Esc)"
+        title={saveKey === 'Enter' ? 'Save (Enter)' : 'Save (Esc)'}
+        aria-label="Save"
         className="shrink-0 p-1.5 rounded transition-colors bg-success text-success-foreground hover:opacity-90"
       >
         <CheckIcon />

package/components/ImageAnnotator/index.tsx

@@ -20,6 +20,14 @@ interface ImageAnnotatorProps {
   onClose: () => void;
   /** Pre-populated image name (derived from filename) */
   initialName?: string;
+  /**
+   * Optional: Escape cancels (closes without accepting) and a click outside
+   * closes only an empty drawing; Enter and the ✓ accept. Absent: Escape,
+   * Enter and a click outside all accept, exactly as before.
+   */
+  escapeCancels?: boolean;
+  /** Optional: the line under the image in place of "Press Esc or Enter or click outside to accept". */
+  hint?: React.ReactNode;
 }
 
 export const ImageAnnotator: React.FC<ImageAnnotatorProps> = ({
@@ -28,6 +36,8 @@ export const ImageAnnotator: React.FC<ImageAnnotatorProps> = ({
   onAccept,
   onClose,
   initialName = '',
+  escapeCancels = false,
+  hint,
 }) => {
   const [state, setState] = useState<StrokeHistoryState>(DEFAULT_STROKE_HISTORY_STATE);
   const [saving, setSaving] = useState(false);
@@ -170,14 +180,19 @@ export const ImageAnnotator: React.FC<ImageAnnotatorProps> = ({
       },
       save: {
         when: (event) => isOpen && !saving && !keyboardTargetIsInput(event),
-        handle: () => { void handleAccept(); },
+        handle: (event) => {
+          if (escapeCancels && event.key === 'Escape') onClose();
+          else void handleAccept();
+        },
       },
     },
   });
 
   const handleBackdropClick = (e: React.MouseEvent) => {
     if (e.target === e.currentTarget) {
-      handleAccept();
+      // With escapeCancels, a click outside never takes a drawing away: it closes an empty one only.
+      if (!escapeCancels) handleAccept();
+      else if (state.strokes.length === 0) onClose();
     }
   };
 
@@ -209,6 +224,7 @@ export const ImageAnnotator: React.FC<ImageAnnotatorProps> = ({
           onRedo={handleRedo}
           onClear={handleClear}
           onSave={handleAccept}
+          saveKey={escapeCancels ? 'Enter' : 'Escape'}
         />
 
         <Canvas
@@ -250,8 +266,12 @@ export const ImageAnnotator: React.FC<ImageAnnotatorProps> = ({
         )}
 
         {/* Accept hint */}
-        <div className="text-xs text-muted-foreground">
-          Press <kbd className="px-1.5 py-0.5 bg-muted rounded text-foreground">Esc</kbd> or <kbd className="px-1.5 py-0.5 bg-muted rounded text-foreground">Enter</kbd> or click outside to accept
+        <div className="text-xs text-muted-foreground" data-pn-image-annotator-hint>
+          {hint ?? (
+            <>
+              Press <kbd className="px-1.5 py-0.5 bg-muted rounded text-foreground">Esc</kbd> or <kbd className="px-1.5 py-0.5 bg-muted rounded text-foreground">Enter</kbd> or click outside to accept
+            </>
+          )}
         </div>
       </div>