@joewinke/jatui 0.2.7 → 0.2.9

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/ContextMenu.svelte

@@ -21,18 +21,25 @@
 	 *     y={cm.y}
 	 *     header={cm.target?.name}
 	 *     items={[
-	 *       { label: "Preview",    onSelect: () => preview(cm.target) },
+	 *       { label: "Preview",    icon: "👁️", onSelect: () => preview(cm.target) },
 	 *       { label: "Copy URL",   onSelect: () => copy(cm.target) },
 	 *       { divider: true },
 	 *       { label: "Delete", variant: "danger", onSelect: () => del(cm.target) },
 	 *     ]}
 	 *   />
+	 *
+	 * Keyboard: ArrowUp/ArrowDown/Home/End move focus among items, Escape
+	 * dismisses (handled by use:floating), Enter/Space activates the focused
+	 * button natively. Focus moves to the first item when the menu opens and
+	 * returns to the trigger when it closes.
 	 */
 
 	import { floating, makeVirtualAnchor } from '../actions/floating.js';
 
 	type ActionItem = {
 		label: string;
+		/** Optional leading icon — a single emoji/glyph, rendered before the label. */
+		icon?: string;
 		onSelect: () => void;
 		variant?: 'default' | 'danger';
 		disabled?: boolean;
@@ -84,16 +91,57 @@
 
 	// Virtual anchor tracks the cursor position; rebuilt whenever x or y change.
 	let anchor = $derived(makeVirtualAnchor(x, y));
+
+	let menuEl = $state<HTMLDivElement | null>(null);
+
+	function menuItemButtons(): HTMLButtonElement[] {
+		if (!menuEl) return [];
+		return Array.from(menuEl.querySelectorAll('button[role="menuitem"]:not(:disabled)'));
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			close();
+			return;
+		}
+		if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(e.key)) return;
+		const buttons = menuItemButtons();
+		if (!buttons.length) return;
+		e.preventDefault();
+		const current = buttons.indexOf(document.activeElement as HTMLButtonElement);
+		let next: HTMLButtonElement;
+		if (e.key === 'ArrowDown') next = buttons[(current + 1 + buttons.length) % buttons.length];
+		else if (e.key === 'ArrowUp') next = buttons[(current - 1 + buttons.length) % buttons.length];
+		else if (e.key === 'Home') next = buttons[0];
+		else next = buttons[buttons.length - 1];
+		next.focus();
+	}
+
+	// Move focus into the menu (first item) whenever it opens — the floating
+	// action's returnFocusTarget already captured the pre-open activeElement
+	// by the time this effect runs, so focus-return-on-close still works.
+	$effect(() => {
+		if (open && menuEl) {
+			const el = menuEl;
+			requestAnimationFrame(() => {
+				const buttons = Array.from(
+					el.querySelectorAll('button[role="menuitem"]:not(:disabled)')
+				) as HTMLButtonElement[];
+				buttons[0]?.focus();
+			});
+		}
+	});
 </script>
 
 {#if open}
 	<div
+		bind:this={menuEl}
 		role="menu"
 		tabindex="-1"
 		class="min-w-[200px] bg-base-200 border border-base-300 rounded-md py-1 {className}"
 		style="z-index: {zIndex};"
 		use:floating={{ anchor, placement: 'bottom-start', flip: true, shift: true, offset: 2, onDismiss: close }}
-		onkeydown={(e) => e.key === 'Escape' && close()}
+		onkeydown={handleKeydown}
 	>
 		{#if header}
 			<p
@@ -110,13 +158,14 @@
 				<button
 					type="button"
 					role="menuitem"
-					class="w-full text-left px-3 py-1.5 text-sm transition-colors
+					class="w-full flex items-center gap-2 text-left px-3 py-1.5 text-sm transition-colors
 						{item.variant === 'danger' ? 'text-error hover:bg-error/10' : 'hover:bg-base-200'}
 						{item.disabled ? 'opacity-50 cursor-not-allowed' : ''}"
 					disabled={item.disabled}
 					onclick={() => handleSelect(item)}
 				>
-					{item.label}
+					{#if item.icon}<span class="shrink-0">{item.icon}</span>{/if}
+					<span class="truncate">{item.label}</span>
 				</button>
 			{/if}
 		{/each}

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

@@ -1,5 +1,7 @@
 type ActionItem = {
     label: string;
+    /** Optional leading icon — a single emoji/glyph, rendered before the label. */
+    icon?: string;
     onSelect: () => void;
     variant?: 'default' | 'danger';
     disabled?: boolean;

package/dist/components/ContextMenuTrigger.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	/**
+	 * ContextMenuTrigger — wraps content with the standard right-click +
+	 * "⋯" touch-affordance pattern, backed by ContextMenu.
+	 *
+	 * Right-click anywhere in the wrapped area opens the menu at the cursor.
+	 * A small "⋯" button (visible on hover/focus for mouse, always visible on
+	 * coarse/touch pointers) opens the same menu anchored to itself, so the
+	 * action is reachable without a right-click gesture.
+	 *
+	 * Usage:
+	 *   <ContextMenuTrigger
+	 *     items={[
+	 *       { label: "Duplicate", icon: "📄", onSelect: () => duplicate(page) },
+	 *       { divider: true },
+	 *       { label: "Delete", variant: "danger", onSelect: () => del(page) },
+	 *     ]}
+	 *   >
+	 *     <PageCard {page} />
+	 *   </ContextMenuTrigger>
+	 */
+
+	import type { Snippet } from 'svelte';
+	import ContextMenu from './ContextMenu.svelte';
+	import type { ContextMenuItem } from './ContextMenu.svelte';
+
+	interface Props {
+		/** Ordered list of items and dividers to render in the menu. */
+		items: ContextMenuItem[];
+		/** Optional small italic label rendered above the items. */
+		header?: string;
+		/** Wrapped content. */
+		children: Snippet;
+		/** aria-label for the "⋯" touch-trigger button. Default "More actions". */
+		triggerLabel?: string;
+		/** Hide the "⋯" button — e.g. right-click-only contexts. Default false. */
+		hideButton?: boolean;
+		/** Stacking context z-index, forwarded to ContextMenu. Default 70. */
+		zIndex?: number;
+		/** Additional CSS class for the wrapper element. */
+		class?: string;
+	}
+
+	let {
+		items,
+		header,
+		children,
+		triggerLabel = 'More actions',
+		hideButton = false,
+		zIndex = 70,
+		class: className = ''
+	}: Props = $props();
+
+	let cm = $state({ open: false, x: 0, y: 0 });
+
+	function openAt(x: number, y: number) {
+		cm = { open: true, x, y };
+	}
+
+	function handleContextMenu(e: MouseEvent) {
+		e.preventDefault();
+		openAt(e.clientX, e.clientY);
+	}
+
+	function handleTriggerClick(e: MouseEvent) {
+		const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+		openAt(rect.left, rect.bottom);
+	}
+</script>
+
+<div class="group relative {className}" role="group" oncontextmenu={handleContextMenu}>
+	{@render children()}
+	{#if !hideButton}
+		<button
+			type="button"
+			class="btn btn-xs btn-circle bg-base-100/85 backdrop-blur-sm shadow-sm absolute top-1 right-1 z-10 opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100 pointer-coarse:opacity-100"
+			aria-label={triggerLabel}
+			onclick={handleTriggerClick}
+		>
+			⋯
+		</button>
+	{/if}
+</div>
+
+<ContextMenu bind:open={cm.open} x={cm.x} y={cm.y} {items} {header} {zIndex} />

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

@@ -0,0 +1,41 @@
+/**
+     * ContextMenuTrigger — wraps content with the standard right-click +
+     * "⋯" touch-affordance pattern, backed by ContextMenu.
+     *
+     * Right-click anywhere in the wrapped area opens the menu at the cursor.
+     * A small "⋯" button (visible on hover/focus for mouse, always visible on
+     * coarse/touch pointers) opens the same menu anchored to itself, so the
+     * action is reachable without a right-click gesture.
+     *
+     * Usage:
+     *   <ContextMenuTrigger
+     *     items={[
+     *       { label: "Duplicate", icon: "📄", onSelect: () => duplicate(page) },
+     *       { divider: true },
+     *       { label: "Delete", variant: "danger", onSelect: () => del(page) },
+     *     ]}
+     *   >
+     *     <PageCard {page} />
+     *   </ContextMenuTrigger>
+     */
+import type { Snippet } from 'svelte';
+import type { ContextMenuItem } from './ContextMenu.svelte';
+interface Props {
+    /** Ordered list of items and dividers to render in the menu. */
+    items: ContextMenuItem[];
+    /** Optional small italic label rendered above the items. */
+    header?: string;
+    /** Wrapped content. */
+    children: Snippet;
+    /** aria-label for the "⋯" touch-trigger button. Default "More actions". */
+    triggerLabel?: string;
+    /** Hide the "⋯" button — e.g. right-click-only contexts. Default false. */
+    hideButton?: boolean;
+    /** Stacking context z-index, forwarded to ContextMenu. Default 70. */
+    zIndex?: number;
+    /** Additional CSS class for the wrapper element. */
+    class?: string;
+}
+declare const ContextMenuTrigger: import("svelte").Component<Props, {}, "">;
+type ContextMenuTrigger = ReturnType<typeof ContextMenuTrigger>;
+export default ContextMenuTrigger;

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/index.d.ts

@@ -23,6 +23,7 @@ export type { InputOptions } from './stores/inputDialog';
 export { default as SearchDropdown } from './components/SearchDropdown.svelte';
 export { default as FilterDropdown } from './components/FilterDropdown.svelte';
 export { default as ContextMenu } from './components/ContextMenu.svelte';
+export { default as ContextMenuTrigger } from './components/ContextMenuTrigger.svelte';
 export { default as ChipInput } from './components/ChipInput.svelte';
 export { default as ResizableDivider } from './components/ResizableDivider.svelte';
 export { default as DateRangePicker } from './components/DateRangePicker.svelte';

package/dist/index.js

@@ -20,6 +20,7 @@ export { showInput, submitInput, cancelInput, getPendingInput } from './stores/i
 export { default as SearchDropdown } from './components/SearchDropdown.svelte';
 export { default as FilterDropdown } from './components/FilterDropdown.svelte';
 export { default as ContextMenu } from './components/ContextMenu.svelte';
+export { default as ContextMenuTrigger } from './components/ContextMenuTrigger.svelte';
 export { default as ChipInput } from './components/ChipInput.svelte';
 export { default as ResizableDivider } from './components/ResizableDivider.svelte';
 export { default as DateRangePicker } from './components/DateRangePicker.svelte';

package/package.json

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