@plannotator/ui 0.22.0 → 0.24.0

package/components/ui/tabs.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
 import { cn } from "../../lib/utils";
 
 const Tabs = TabsPrimitive.Root;
@@ -14,18 +14,18 @@ const TabsList = React.forwardRef<
     {...props}
   />
 ));
-TabsList.displayName = TabsPrimitive.List.displayName;
+TabsList.displayName = "TabsList";
 
 const TabsTrigger = React.forwardRef<
-  React.ComponentRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+  React.ComponentRef<typeof TabsPrimitive.Tab>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Tab>
 >(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
+  <TabsPrimitive.Tab
     ref={ref}
     className={cn(
       "inline-flex items-center gap-2 rounded-md px-3 py-1.5 text-[13px] font-medium text-foreground",
       "hover:bg-surface-1",
-      "data-[state=active]:bg-primary/10 data-[state=active]:text-foreground",
+      "data-active:bg-primary/10 data-active:text-foreground",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
       "disabled:pointer-events-none disabled:opacity-50",
       className,
@@ -33,14 +33,14 @@ const TabsTrigger = React.forwardRef<
     {...props}
   />
 ));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+TabsTrigger.displayName = "TabsTrigger";
 
 const TabsContent = React.forwardRef<
-  React.ComponentRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+  React.ComponentRef<typeof TabsPrimitive.Panel>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Panel>
 >(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content ref={ref} className={cn("flex-1 outline-none", className)} {...props} />
+  <TabsPrimitive.Panel ref={ref} className={cn("flex-1 outline-none", className)} {...props} />
 ));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
+TabsContent.displayName = "TabsContent";
 
 export { Tabs, TabsList, TabsTrigger, TabsContent };

package/hooks/useAnnotationHighlighter.ts

@@ -174,6 +174,12 @@ const escapeAttrValue = (value: string): string => {
   return value.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
 };
 
+/** Whitespace-insensitive comparison for restore verification: a highlight
+ *  spanning element boundaries legitimately differs from `originalText` in
+ *  whitespace, so only content differences count as a mismatch. */
+const normalizeForRestoreCompare = (value: string): string =>
+  value.replace(/\s+/g, ' ').trim();
+
 const applyMathAnnotationClass = (
   element: HTMLElement,
   id: string,
@@ -227,6 +233,15 @@ export interface UseAnnotationHighlighterOptions {
   selectedAnnotationId: string | null;
   mode: EditorMode;
   enabled?: boolean;
+  /** Opt-in: after a meta-based restore (`fromStore`), verify the painted text
+   *  matches the annotation's `originalText` (whitespace-normalized). On
+   *  mismatch the wrong highlight is removed and the text-search fallback
+   *  runs instead; if that also fails, `onRestoreMismatch` fires and nothing
+   *  is painted. Default false — today's behavior (positions are trusted). */
+  verifyRestoredContent?: boolean;
+  /** Fires when a restore was rejected (content mismatch) and the text-search
+   *  fallback could not re-anchor the annotation either. */
+  onRestoreMismatch?: (annotation: Annotation, restoredText: string) => void;
 }
 
 export interface UseAnnotationHighlighterReturn {
@@ -258,6 +273,8 @@ export function useAnnotationHighlighter({
   selectedAnnotationId,
   mode,
   enabled = true,
+  verifyRestoredContent = false,
+  onRestoreMismatch,
 }: UseAnnotationHighlighterOptions): UseAnnotationHighlighterReturn {
   const highlighterRef = useRef<Highlighter | null>(null);
   const modeRef = useRef<EditorMode>(mode);
@@ -278,6 +295,8 @@ export function useAnnotationHighlighter({
   useEffect(() => { modeRef.current = mode; }, [mode]);
   useEffect(() => { onAddAnnotationRef.current = onAddAnnotation; }, [onAddAnnotation]);
   useEffect(() => { onSelectAnnotationRef.current = onSelectAnnotation; }, [onSelectAnnotation]);
+  const onRestoreMismatchRef = useRef(onRestoreMismatch);
+  useEffect(() => { onRestoreMismatchRef.current = onRestoreMismatch; }, [onRestoreMismatch]);
 
   const clearPendingSelection = useCallback(() => {
     pendingSourceRef.current = null;
@@ -625,23 +644,42 @@ export function useAnnotationHighlighter({
         }
       }
 
+      // When a meta-based restore paints text that no longer matches the
+      // anchor's originalText (document drift), remember what it painted so
+      // the mismatch can be reported if the text fallback also fails.
+      let rejectedRestoreText: string | null = null;
+
       if (ann.startMeta && ann.endMeta) {
         try {
           highlighter.fromStore(ann.startMeta, ann.endMeta, ann.originalText, ann.id);
           const restoredDoms = highlighter.getDoms(ann.id);
           if (restoredDoms && restoredDoms.length > 0) {
-            if (ann.type === AnnotationType.DELETION) {
-              highlighter.addClass('deletion', ann.id);
-            } else if (ann.type === AnnotationType.COMMENT) {
-              highlighter.addClass('comment', ann.id);
+            const restoredText = restoredDoms.map(dom => dom.textContent ?? '').join('');
+            if (
+              verifyRestoredContent &&
+              normalizeForRestoreCompare(restoredText) !== normalizeForRestoreCompare(ann.originalText)
+            ) {
+              // Positions resolved, but onto the WRONG text — remove the bad
+              // highlight and fall through to the text-search fallback.
+              try { highlighter.remove(ann.id); } catch {}
+              rejectedRestoreText = restoredText;
+            } else {
+              if (ann.type === AnnotationType.DELETION) {
+                highlighter.addClass('deletion', ann.id);
+              } else if (ann.type === AnnotationType.COMMENT) {
+                highlighter.addClass('comment', ann.id);
+              }
+              return;
             }
-            return;
           }
         } catch {}
       }
 
       const range = findTextInDOM(ann.originalText);
       if (!range) {
+        if (rejectedRestoreText !== null) {
+          onRestoreMismatchRef.current?.(ann, rejectedRestoreText);
+        }
         console.warn(`Could not find text for annotation ${ann.id}: "${ann.originalText.slice(0, 50)}..."`);
         return;
       }
@@ -720,7 +758,7 @@ export function useAnnotationHighlighter({
         console.warn(`Failed to apply highlight for annotation ${ann.id}:`, e);
       }
     });
-  }, [findMathElementsForAnnotation, findTextInDOM]);
+  }, [findMathElementsForAnnotation, findTextInDOM, verifyRestoredContent]);
 
   const removeHighlight = useCallback((id: string) => {
     highlighterRef.current?.remove(id);

package/hooks/useCodeAnnotationDraft.ts

@@ -20,11 +20,6 @@ interface DraftData {
   ts: number;
 }
 
-interface MissingDraftData {
-  found?: false;
-  draftGeneration?: number;
-}
-
 function readDraftGeneration(value: unknown): number | null {
   return typeof value === 'number' && Number.isInteger(value) && value >= 0 ? value : null;
 }

package/hooks/usePinpoint.ts

@@ -1,7 +1,7 @@
-import { useEffect, useState, useCallback, type RefObject } from 'react';
+import { useEffect, useState, type RefObject } from 'react';
 import type Highlighter from '@plannotator/web-highlighter';
 import type { InputMethod } from '../types';
-import { resolvePinpointTarget, type PinpointTarget } from '../utils/blockTargeting';
+import { resolvePinpointTarget } from '../utils/blockTargeting';
 
 export interface UsePinpointOptions {
   containerRef: RefObject<HTMLElement | null>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plannotator/ui",
-  "version": "0.22.0",
+  "version": "0.24.0",
   "type": "module",
   "exports": {
     "./components/*": "./components/*.tsx",
@@ -47,7 +47,7 @@
     "!test-setup"
   ],
   "dependencies": {
-    "@plannotator/atomic-editor": "^0.5.0",
+    "@base-ui/react": "^1.6.0",
     "@codemirror/autocomplete": "^6.20.3",
     "@codemirror/commands": "^6.10.3",
     "@codemirror/lang-javascript": "^6.2.5",
@@ -62,18 +62,13 @@
     "@codemirror/view": "^6.43.0",
     "@fontsource-variable/geist-mono": "5.2.7",
     "@fontsource-variable/inter": "^5.2.8",
-    "@pierre/diffs": "1.2.8",
     "@lezer/common": "^1.5.2",
     "@lezer/highlight": "^1.2.3",
+    "@pierre/diffs": "1.2.8",
+    "@plannotator/atomic-editor": "^0.5.0",
     "@plannotator/core": "0.22.0",
     "@plannotator/markdown-editor": "^0.2.0",
     "@plannotator/web-highlighter": "^0.8.1",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-tabs": "^1.1.13",
-    "@radix-ui/react-tooltip": "^1.2.8",
     "@tanstack/react-table": "^8.21.3",
     "@viz-js/viz": "^3.25.0",
     "class-variance-authority": "^0.7.1",
@@ -93,8 +88,7 @@
   "peerDependencies": {
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
-    "tailwindcss": "^4.1.18",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss": "^4.1.18"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^20.10.1",
@@ -105,7 +99,6 @@
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "tailwindcss": "^4.1.18",
-    "tailwindcss-animate": "^1.0.7",
     "typescript": "~5.8.2",
     "vite": "^6.2.0"
   },