@joewinke/jatui 0.2.6 → 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?` (hides reply/resolve/edit/delete affordances; thread list stays readable), `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

@@ -9,6 +9,14 @@
     callbacks: AnnotationCallbacks
     /** Hides reply/resolve/edit/delete affordances — thread list stays readable */
     readOnly?: boolean
+    /** Panel heading. Defaults to "Annotations"; pass e.g. "Comments" to match host vocabulary. */
+    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
   }
@@ -20,6 +28,10 @@
     currentUserId,
     callbacks,
     readOnly = false,
+    title = "Annotations",
+    emptyText = "No annotations yet",
+    badges,
+    onAnnotationHover,
     onAnnotationSelect,
     onAnnotationsChanged,
   }: Props = $props()
@@ -135,7 +147,7 @@
   <!-- Header -->
   <div class="flex items-center justify-between px-3 py-2 border-b border-base-300 flex-shrink-0">
     <div class="flex items-center gap-2">
-      <h4 class="text-sm font-semibold">Annotations</h4>
+      <h4 class="text-sm font-semibold">{title}</h4>
       {#if totalRoots > 0}
         <span class="badge badge-xs badge-ghost">{totalRoots - resolvedCount} open</span>
       {/if}
@@ -159,14 +171,17 @@
         <svg class="mx-auto h-10 w-10 text-base-content/20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
         </svg>
-        <p class="text-sm text-base-content/40 mt-2">No annotations yet</p>
+        <p class="text-sm text-base-content/40 mt-2">{emptyText}</p>
         <p class="text-xs text-base-content/30 mt-1">Click the pin icon then click on the image to add one</p>
       </div>
     {: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
@@ -182,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

@@ -7,6 +7,14 @@ interface Props {
     callbacks: AnnotationCallbacks;
     /** Hides reply/resolve/edit/delete affordances — thread list stays readable */
     readOnly?: boolean;
+    /** Panel heading. Defaults to "Annotations"; pass e.g. "Comments" to match host vocabulary. */
+    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/dist/components/SearchDropdown.svelte

@@ -25,6 +25,7 @@
 		disabled = false,
 		displayValue,
 		colorFn,
+		header,
 		footer,
 		variant = 'default',
 		size = 'md',
@@ -41,6 +42,8 @@
 		disabled?: boolean;
 		displayValue?: string;
 		colorFn?: (value: string) => string | undefined;
+		/** Rendered above the search input — use for panel titles, descriptions, or controls */
+		header?: Snippet;
 		footer?: Snippet;
 		/** 'chip' renders a compact TopBar-style pill instead of the full-width trigger */
 		variant?: 'default' | 'chip';
@@ -197,6 +200,11 @@
 </script>
 
 {#snippet panelBody()}
+	{#if header}
+		<div class="sd-header">
+			{@render header()}
+		</div>
+	{/if}
 	<!-- Search input -->
 	<div class="sd-search">
 		<div class="sd-search-inner">
@@ -525,6 +533,11 @@
 		box-shadow: 0 -4px 24px oklch(0 0 0 / 0.4);
 	}
 
+	/* Header section */
+	.sd-header {
+		border-bottom: 1px solid oklch(0.25 0.02 250);
+	}
+
 	/* Search section */
 	.sd-search {
 		padding: 0.375rem 0.5rem;

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

@@ -16,6 +16,8 @@ type $$ComponentProps = {
     disabled?: boolean;
     displayValue?: string;
     colorFn?: (value: string) => string | undefined;
+    /** Rendered above the search input — use for panel titles, descriptions, or controls */
+    header?: Snippet;
     footer?: Snippet;
     /** 'chip' renders a compact TopBar-style pill instead of the full-width trigger */
     variant?: 'default' | 'chip';

package/package.json

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