@joewinke/jatui 0.2.5 → 0.2.7

package/CLAUDE.md

@@ -106,9 +106,9 @@ Then import:
 |-----------|---------|-----------|
 | `MarkupEditor` | Fullscreen canvas markup tool — draw arrows, boxes, ellipses, revision clouds, freehand, text over an image | `imageUrl`, `initialShapes?: MarkupShape[]`, `onsave: (shapes) => void`, `oncancel: () => void` |
 | `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?`, `onAnnotationClick?`, `onImageClick?`, `onClose?` |
+| `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`, `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
@@ -239,6 +239,23 @@ If the project uses JST (Joe's Software Template), browse component demos at `/c
 - Check the component source in `src/lib/components/` for full prop types
 - Prefer jatui components over building custom ones when there's a match
 
+## Releasing — never run `npm publish`
+
+**To cut a release: bump `version` in `package.json`, commit, push to master. That's the whole job.**
+
+`.github/workflows/publish.yml` publishes to npm on any push to master that touches
+`package.json`, authenticating via npm Trusted Publishing (OIDC) — no token, and every
+release carries a provenance attestation. The workflow is idempotent: if the version is
+already on the registry it exits green without republishing, so re-running it is safe.
+
+Publishing from a dev box instead does two bad things: the release is attributed to a
+person rather than the attested `GitHub Actions` identity (**provenance is lost**), and it
+races the workflow — that is exactly how 0.2.5 shipped by hand at 16:16:21Z and left CI red
+with an `E403: cannot publish over the previously published version`.
+
+`prepublishOnly` now runs `scripts/guard-ci-publish.mjs`, which hard-fails any publish
+outside CI. If you hit that error, you are doing it wrong — bump the version and push.
+
 # Layering Policy (DaisyUI is an implementation detail)
 
 Three rules keep DaisyUI swappable instead of load-bearing:

package/dist/components/AnnotationPanel.svelte

@@ -7,6 +7,12 @@
     activeAnnotationId?: string | null
     currentUserId: string
     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
   }
@@ -17,6 +23,9 @@
     activeAnnotationId = null,
     currentUserId,
     callbacks,
+    readOnly = false,
+    title = "Annotations",
+    emptyText = "No annotations yet",
     onAnnotationSelect,
     onAnnotationsChanged,
   }: Props = $props()
@@ -132,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}
@@ -156,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}
@@ -202,37 +211,39 @@
           {#if isActive}
             <div class="px-3 pb-3 space-y-2">
               <!-- Actions for root -->
-              <div class="flex items-center gap-1 ml-8">
-                <button
-                  class="btn btn-ghost btn-xs gap-1 {thread.root.resolved ? 'text-warning' : 'text-success'}"
-                  onclick={() => toggleResolve(thread.root)}
-                >
-                  {#if thread.root.resolved}
-                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-                    </svg>
-                    Reopen
-                  {:else}
-                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-                    </svg>
-                    Resolve
-                  {/if}
-                </button>
-                {#if thread.root.user_id === currentUserId}
-                  <button
-                    class="btn btn-ghost btn-xs text-base-content/50"
-                    onclick={() => startEdit(thread.root)}
-                  >Edit</button>
+              {#if !readOnly}
+                <div class="flex items-center gap-1 ml-8">
                   <button
-                    class="btn btn-ghost btn-xs text-error/70"
-                    onclick={() => deleteAnnotation(thread.root.id)}
-                  >Delete</button>
-                {/if}
-              </div>
+                    class="btn btn-ghost btn-xs gap-1 {thread.root.resolved ? 'text-warning' : 'text-success'}"
+                    onclick={() => toggleResolve(thread.root)}
+                  >
+                    {#if thread.root.resolved}
+                      <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                      </svg>
+                      Reopen
+                    {:else}
+                      <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                      </svg>
+                      Resolve
+                    {/if}
+                  </button>
+                  {#if thread.root.user_id === currentUserId}
+                    <button
+                      class="btn btn-ghost btn-xs text-base-content/50"
+                      onclick={() => startEdit(thread.root)}
+                    >Edit</button>
+                    <button
+                      class="btn btn-ghost btn-xs text-error/70"
+                      onclick={() => deleteAnnotation(thread.root.id)}
+                    >Delete</button>
+                  {/if}
+                </div>
+              {/if}
 
               <!-- Edit form for root -->
-              {#if editingId === thread.root.id}
+              {#if !readOnly && editingId === thread.root.id}
                 <div class="ml-8 space-y-1.5">
                   <textarea
                     class="textarea textarea-bordered textarea-sm w-full"
@@ -257,7 +268,7 @@
                       <span class="text-xs font-medium">{getAuthorName(reply.user_id)}</span>
                       <span class="text-[10px] text-base-content/40">{formatTime(reply.created_at)}</span>
                     </div>
-                    {#if editingId === reply.id}
+                    {#if !readOnly && editingId === reply.id}
                       <div class="mt-1 space-y-1.5">
                         <textarea
                           class="textarea textarea-bordered textarea-xs w-full"
@@ -271,7 +282,7 @@
                       </div>
                     {:else}
                       <p class="text-sm text-base-content/80 mt-0.5">{reply.content}</p>
-                      {#if reply.user_id === currentUserId}
+                      {#if !readOnly && reply.user_id === currentUserId}
                         <div class="flex gap-1 mt-1">
                           <button class="btn btn-ghost btn-xs text-base-content/40 h-5 min-h-0" onclick={() => startEdit(reply)}>Edit</button>
                           <button class="btn btn-ghost btn-xs text-error/50 h-5 min-h-0" onclick={() => deleteAnnotation(reply.id)}>Delete</button>
@@ -283,33 +294,35 @@
               {/each}
 
               <!-- Reply input -->
-              <div class="ml-8 flex gap-2">
-                <textarea
-                  class="textarea textarea-bordered textarea-sm flex-1 min-h-[36px]"
-                  rows="1"
-                  placeholder="Reply..."
-                  bind:value={replyContent}
-                  onkeydown={(e) => {
-                    if (e.key === "Enter" && !e.shiftKey) {
-                      e.preventDefault()
-                      submitReply(thread.root.id)
-                    }
-                  }}
-                ></textarea>
-                <button
-                  class="btn btn-sm btn-primary self-end"
-                  disabled={!replyContent.trim() || isSubmitting}
-                  onclick={() => submitReply(thread.root.id)}
-                >
-                  {#if isSubmitting}
-                    <span class="loading loading-spinner loading-xs"></span>
-                  {:else}
-                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
-                    </svg>
-                  {/if}
-                </button>
-              </div>
+              {#if !readOnly}
+                <div class="ml-8 flex gap-2">
+                  <textarea
+                    class="textarea textarea-bordered textarea-sm flex-1 min-h-[36px]"
+                    rows="1"
+                    placeholder="Reply..."
+                    bind:value={replyContent}
+                    onkeydown={(e) => {
+                      if (e.key === "Enter" && !e.shiftKey) {
+                        e.preventDefault()
+                        submitReply(thread.root.id)
+                      }
+                    }}
+                  ></textarea>
+                  <button
+                    class="btn btn-sm btn-primary self-end"
+                    disabled={!replyContent.trim() || isSubmitting}
+                    onclick={() => submitReply(thread.root.id)}
+                  >
+                    {#if isSubmitting}
+                      <span class="loading loading-spinner loading-xs"></span>
+                    {:else}
+                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
+                      </svg>
+                    {/if}
+                  </button>
+                </div>
+              {/if}
             </div>
           {/if}
         </div>

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

@@ -5,6 +5,12 @@ interface Props {
     activeAnnotationId?: string | null;
     currentUserId: string;
     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/ImageLightbox.svelte

@@ -17,6 +17,8 @@
     activeAnnotationId?: string | null
     /** Whether annotation placement mode is active */
     annotationMode?: boolean
+    /** Whether resolved annotation pins are shown on the image (default false, matching AnnotationLayer) */
+    showResolved?: boolean
     /** Called when a pin is clicked */
     onAnnotationClick?: (annotation: Annotation) => void
     /** Called when the image is clicked in annotation mode */
@@ -32,6 +34,7 @@
     annotations = [],
     activeAnnotationId = null,
     annotationMode = false,
+    showResolved = false,
     onAnnotationClick,
     onImageClick,
     onClose,
@@ -168,6 +171,7 @@
             {annotations}
             {activeAnnotationId}
             {annotationMode}
+            {showResolved}
             {onAnnotationClick}
             {onImageClick}
           />
@@ -265,6 +269,7 @@
             {annotations}
             {activeAnnotationId}
             annotationMode={false}
+            {showResolved}
             {onAnnotationClick}
           />
         {/if}

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

@@ -13,6 +13,8 @@ interface Props {
     activeAnnotationId?: string | null;
     /** Whether annotation placement mode is active */
     annotationMode?: boolean;
+    /** Whether resolved annotation pins are shown on the image (default false, matching AnnotationLayer) */
+    showResolved?: boolean;
     /** Called when a pin is clicked */
     onAnnotationClick?: (annotation: Annotation) => void;
     /** Called when the image is clicked in annotation mode */

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/dist/dnd/types.d.ts

@@ -2,16 +2,7 @@ import type { Input } from '@atlaskit/pragmatic-drag-and-drop/types';
 export interface DragData extends Record<string | symbol, unknown> {
     readonly type: string;
 }
-/**
- * Module-scoped Symbol brand for board-managed items.
- * ⚠ Symbol identity = module identity. Two copies of this module on one page makes
- * isItemData() return false across the boundary — dnd/ must exist EXACTLY ONCE.
- * Declare all @atlaskit/pragmatic-drag-and-drop* packages as peerDependencies in
- * the host app (host owns the single instance).
- */
-declare const ITEM: unique symbol;
 export interface ItemDragData<TItem = unknown> extends DragData {
-    readonly [ITEM]: true;
     readonly key: string;
     readonly item: TItem;
     readonly container: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joewinke/jatui",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "private": false,
   "description": "Shared Svelte 5 component library for JAT projects",
   "type": "module",
@@ -70,7 +70,7 @@
     "package": "svelte-package --input src/lib --output dist && node scripts/compile-rune-modules.mjs",
     "check:demos": "node scripts/check-demo-coverage.mjs",
     "guard": "node scripts/check-demo-coverage.mjs",
-    "prepublishOnly": "npm run package"
+    "prepublishOnly": "node scripts/guard-ci-publish.mjs && npm run package"
   },
   "peerDependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "~2.0.0",