@joewinke/jatui 0.2.7 → 0.2.8

package/CLAUDE.md

@@ -108,7 +108,7 @@ Then import:
 | `MarkupOverlay` | Read-only canvas layer that renders saved `MarkupShape[]` over an image | `shapes: MarkupShape[]`, `imageUrl` |
 | `ImageLightbox` | Inline image viewer with fullscreen modal, zoom controls, optional markup + annotation overlays | `imageUrl`, `filename?`, `markupShapes?`, `annotations?`, `activeAnnotationId?`, `annotationMode?`, `showResolved?` (forwarded to the internal `AnnotationLayer`; default false), `onAnnotationClick?`, `onImageClick?`, `onClose?` |
 | `AnnotationLayer` | Absolute-positioned pin overlay — renders threaded annotation pins at `x_percent`/`y_percent` coordinates | `annotations: Annotation[]`, `activeAnnotationId?`, `annotationMode?`, `showResolved?`, `onAnnotationClick?`, `onImageClick?` |
-| `AnnotationPanel` | Sidebar thread list for annotations — reply, resolve, edit, delete. Uses callback props for async ops. | `annotations`, `profiles`, `activeAnnotationId?`, `currentUserId`, `callbacks: AnnotationCallbacks`, `readOnly?`, `title?` (panel heading, default "Annotations"; pass "Comments" to match host vocabulary), `emptyText?` (empty-state line, default "No annotations yet"), `onAnnotationSelect?`, `onAnnotationsChanged?` |
+| `AnnotationPanel` | Sidebar thread list for annotations — reply, resolve, edit, delete. Uses callback props for async ops. | `annotations`, `profiles`, `activeAnnotationId?`, `currentUserId`, `callbacks: AnnotationCallbacks`, `readOnly?`, `title?` (panel heading, default "Annotations"; pass "Comments" to match host vocabulary), `emptyText?` (empty-state line, default "No annotations yet"), `badges?` (per-annotation chip label by id, e.g. "Markup"), `onAnnotationHover?` (fires root id on hover / null on leave), `onAnnotationSelect?`, `onAnnotationsChanged?` |
 
 **Types & utilities:**
 ```typescript

package/dist/components/AnnotationLayer.svelte

@@ -8,6 +8,9 @@
     showResolved?: boolean
     onAnnotationClick?: (annotation: Annotation) => void
     onImageClick?: (x: number, y: number) => void
+    /** Fires with a pin's id on hover, null on leave — lets the host light up
+     * whatever that annotation links to (e.g. its markup). */
+    onAnnotationHover?: (id: string | null) => void
   }
 
   let {
@@ -17,6 +20,7 @@
     showResolved = false,
     onAnnotationClick,
     onImageClick,
+    onAnnotationHover,
   }: Props = $props()
 
   // Group into threads (only show root pins)
@@ -60,6 +64,8 @@
       <button
         class="relative group flex flex-col items-center"
         onclick={(e) => { e.stopPropagation(); onAnnotationClick?.(thread.root) }}
+        onmouseenter={() => onAnnotationHover?.(thread.root.id)}
+        onmouseleave={() => onAnnotationHover?.(null)}
         title={thread.root.content.slice(0, 80)}
       >
         <!-- Pin icon -->

package/dist/components/AnnotationLayer.svelte.d.ts

@@ -6,6 +6,9 @@ interface Props {
     showResolved?: boolean;
     onAnnotationClick?: (annotation: Annotation) => void;
     onImageClick?: (x: number, y: number) => void;
+    /** Fires with a pin's id on hover, null on leave — lets the host light up
+     * whatever that annotation links to (e.g. its markup). */
+    onAnnotationHover?: (id: string | null) => void;
 }
 declare const AnnotationLayer: import("svelte").Component<Props, {}, "">;
 type AnnotationLayer = ReturnType<typeof AnnotationLayer>;

package/dist/components/AnnotationPanel.svelte

@@ -13,6 +13,10 @@
     title?: string
     /** Empty-state line. Defaults to "No annotations yet". */
     emptyText?: string
+    /** Optional per-annotation chip label, keyed by annotation id (e.g. "Markup"). */
+    badges?: Record<string, string>
+    /** Fires with a thread's root id on hover, null on leave. */
+    onAnnotationHover?: (id: string | null) => void
     onAnnotationSelect?: (annotation: Annotation | null) => void
     onAnnotationsChanged?: () => void
   }
@@ -26,6 +30,8 @@
     readOnly = false,
     title = "Annotations",
     emptyText = "No annotations yet",
+    badges,
+    onAnnotationHover,
     onAnnotationSelect,
     onAnnotationsChanged,
   }: Props = $props()
@@ -171,8 +177,11 @@
     {:else}
       {#each threads as thread (thread.root.id)}
         {@const isActive = activeAnnotationId === thread.root.id}
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
         <div
           class="border-b border-base-200 transition-colors {isActive ? 'bg-primary/5' : 'hover:bg-base-200/50'}"
+          onmouseenter={() => onAnnotationHover?.(thread.root.id)}
+          onmouseleave={() => onAnnotationHover?.(null)}
         >
           <!-- Root annotation -->
           <button
@@ -188,6 +197,14 @@
                 <div class="flex items-center gap-1.5">
                   <span class="text-xs font-medium text-base-content">{getAuthorName(thread.root.user_id)}</span>
                   <span class="text-[10px] text-base-content/40">{formatTime(thread.root.created_at)}</span>
+                  {#if badges?.[thread.root.id]}
+                    <span class="badge badge-xs badge-outline gap-0.5">
+                      <svg class="w-2.5 h-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                      </svg>
+                      {badges[thread.root.id]}
+                    </span>
+                  {/if}
                   {#if thread.root.resolved}
                     <span class="badge badge-xs badge-success gap-0.5">
                       <svg class="w-2.5 h-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">

package/dist/components/AnnotationPanel.svelte.d.ts

@@ -11,6 +11,10 @@ interface Props {
     title?: string;
     /** Empty-state line. Defaults to "No annotations yet". */
     emptyText?: string;
+    /** Optional per-annotation chip label, keyed by annotation id (e.g. "Markup"). */
+    badges?: Record<string, string>;
+    /** Fires with a thread's root id on hover, null on leave. */
+    onAnnotationHover?: (id: string | null) => void;
     onAnnotationSelect?: (annotation: Annotation | null) => void;
     onAnnotationsChanged?: () => void;
 }

package/dist/components/ImageLightbox.svelte

@@ -23,6 +23,10 @@
     onAnnotationClick?: (annotation: Annotation) => void
     /** Called when the image is clicked in annotation mode */
     onImageClick?: (x: number, y: number) => void
+    /** Called with a pin's id on hover, null on leave */
+    onAnnotationHover?: (id: string | null) => void
+    /** Markup shape ids to accentuate (e.g. a hovered comment's linked markup) */
+    highlightedShapeIds?: number[]
     /** Called when the lightbox requests close */
     onClose?: () => void
   }
@@ -37,6 +41,8 @@
     showResolved = false,
     onAnnotationClick,
     onImageClick,
+    onAnnotationHover,
+    highlightedShapeIds,
     onClose,
   }: Props = $props()
 
@@ -162,7 +168,7 @@
 
         <!-- Markup shapes overlay -->
         {#if markupShapes.length > 0}
-          <MarkupOverlay shapes={markupShapes} {imageUrl} />
+          <MarkupOverlay shapes={markupShapes} {imageUrl} {highlightedShapeIds} />
         {/if}
 
         <!-- Annotation overlay -->
@@ -174,6 +180,7 @@
             {showResolved}
             {onAnnotationClick}
             {onImageClick}
+            {onAnnotationHover}
           />
         {/if}
       </div>
@@ -262,7 +269,7 @@
           style="transform: scale({zoom}); transform-origin: center center;"
         />
         {#if markupShapes.length > 0}
-          <MarkupOverlay shapes={markupShapes} {imageUrl} />
+          <MarkupOverlay shapes={markupShapes} {imageUrl} {highlightedShapeIds} />
         {/if}
         {#if annotations.length > 0}
           <AnnotationLayer

package/dist/components/ImageLightbox.svelte.d.ts

@@ -19,6 +19,10 @@ interface Props {
     onAnnotationClick?: (annotation: Annotation) => void;
     /** Called when the image is clicked in annotation mode */
     onImageClick?: (x: number, y: number) => void;
+    /** Called with a pin's id on hover, null on leave */
+    onAnnotationHover?: (id: string | null) => void;
+    /** Markup shape ids to accentuate (e.g. a hovered comment's linked markup) */
+    highlightedShapeIds?: number[];
     /** Called when the lightbox requests close */
     onClose?: () => void;
 }

package/dist/components/MarkupOverlay.svelte

@@ -1,14 +1,17 @@
 <script lang="ts">
   import { onMount } from "svelte"
   import type { MarkupShape } from './markup'
-  import { renderAllShapes } from './markup'
+  import { renderAllShapes, renderShape } from './markup'
 
   interface Props {
     shapes: MarkupShape[]
     imageUrl: string
+    /** Shape ids to accentuate (e.g. the markup a hovered comment links to).
+     * Drawn again on top with a colored glow so the linkage is visible. */
+    highlightedShapeIds?: number[]
   }
 
-  let { shapes, imageUrl }: Props = $props()
+  let { shapes, imageUrl, highlightedShapeIds }: Props = $props()
 
   let canvas: HTMLCanvasElement | undefined = $state()
   let imgW = $state(0)
@@ -23,6 +26,22 @@
     canvas.height = imgH
     ctx.clearRect(0, 0, imgW, imgH)
     renderAllShapes(ctx, shapes)
+
+    // Accentuate linked shapes: a soft glow in the shape's own colour plus a
+    // second pass for a bolder line, so a hovered comment's markup stands out.
+    const hi = highlightedShapeIds
+    if (hi && hi.length) {
+      const set = new Set(hi)
+      for (const shape of shapes) {
+        if (!set.has(shape.id)) continue
+        ctx.save()
+        ctx.shadowColor = shape.color
+        ctx.shadowBlur = 24
+        renderShape(ctx, shape)
+        renderShape(ctx, shape)
+        ctx.restore()
+      }
+    }
   }
 
   onMount(() => {
@@ -37,8 +56,9 @@
     img.src = imageUrl
   })
 
-  // Re-render when shapes change
+  // Re-render when shapes OR the highlighted set change
   $effect(() => {
+    void highlightedShapeIds
     if (shapes && loaded) {
       render()
     }

package/dist/components/MarkupOverlay.svelte.d.ts

@@ -2,6 +2,9 @@ import type { MarkupShape } from './markup';
 interface Props {
     shapes: MarkupShape[];
     imageUrl: string;
+    /** Shape ids to accentuate (e.g. the markup a hovered comment links to).
+     * Drawn again on top with a colored glow so the linkage is visible. */
+    highlightedShapeIds?: number[];
 }
 declare const MarkupOverlay: import("svelte").Component<Props, {}, "">;
 type MarkupOverlay = ReturnType<typeof MarkupOverlay>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joewinke/jatui",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "private": false,
   "description": "Shared Svelte 5 component library for JAT projects",
   "type": "module",