@joewinke/jatui 0.2.6 → 0.2.7

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"), `onAnnotationSelect?`, `onAnnotationsChanged?` |
 
 **Types & utilities:**
 ```typescript

package/dist/components/AnnotationPanel.svelte

@@ -9,6 +9,10 @@
     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
     onAnnotationSelect?: (annotation: Annotation | null) => void
     onAnnotationsChanged?: () => void
   }
@@ -20,6 +24,8 @@
     currentUserId,
     callbacks,
     readOnly = false,
+    title = "Annotations",
+    emptyText = "No annotations yet",
     onAnnotationSelect,
     onAnnotationsChanged,
   }: Props = $props()
@@ -135,7 +141,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,7 +165,7 @@
         <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}

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

@@ -7,6 +7,10 @@ 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;
     onAnnotationSelect?: (annotation: Annotation | null) => void;
     onAnnotationsChanged?: () => void;
 }

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.7",
   "private": false,
   "description": "Shared Svelte 5 component library for JAT projects",
   "type": "module",