@joewinke/jatui 0.2.4 → 0.2.6

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?` (hides reply/resolve/edit/delete affordances; thread list stays readable), `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,8 @@
     activeAnnotationId?: string | null
     currentUserId: string
     callbacks: AnnotationCallbacks
+    /** Hides reply/resolve/edit/delete affordances — thread list stays readable */
+    readOnly?: boolean
     onAnnotationSelect?: (annotation: Annotation | null) => void
     onAnnotationsChanged?: () => void
   }
@@ -17,6 +19,7 @@
     activeAnnotationId = null,
     currentUserId,
     callbacks,
+    readOnly = false,
     onAnnotationSelect,
     onAnnotationsChanged,
   }: Props = $props()
@@ -202,37 +205,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 +262,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 +276,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 +288,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,8 @@ interface Props {
     activeAnnotationId?: string | null;
     currentUserId: string;
     callbacks: AnnotationCallbacks;
+    /** Hides reply/resolve/edit/delete affordances — thread list stays readable */
+    readOnly?: boolean;
     onAnnotationSelect?: (annotation: Annotation | null) => void;
     onAnnotationsChanged?: () => void;
 }

package/dist/components/BurndownChart.svelte

@@ -544,7 +544,7 @@
                   cy={zcY}
                   r="5"
                   style="fill:var(--color-warning)"
-                  stroke="var(--fallback-b2,oklch(var(--b2)/1))"
+                  stroke="var(--color-base-200)"
                   stroke-width="2"
                 />
                 <line
@@ -587,7 +587,7 @@
                 cy={py}
                 r="7"
                 style="fill:var(--color-success)"
-                stroke="var(--fallback-b2,oklch(var(--b2)/1))"
+                stroke="var(--color-base-200)"
                 stroke-width="2"
               />
               <text
@@ -685,7 +685,7 @@
                     cy={yMain(pt.y)}
                     r="4"
                     fill={line.color}
-                    stroke="var(--fallback-b2,oklch(var(--b2)/1))"
+                    stroke="var(--color-base-200)"
                     stroke-width="1.5"
                   />
                 {/if}

package/dist/components/CommandPalette.svelte

@@ -276,8 +276,8 @@
 	.cp-panel {
 		width: 100%;
 		max-width: 560px;
-		background: oklch(var(--b1));
-		border: var(--jatui-border-w) solid oklch(var(--b3));
+		background: var(--color-base-100);
+		border: var(--jatui-border-w) solid var(--color-base-300);
 		border-radius: var(--jatui-radius-box);
 		overflow: hidden;
 		display: flex;
@@ -291,7 +291,7 @@
 		align-items: center;
 		gap: 0.5rem;
 		padding: 0.625rem 0.875rem;
-		border-bottom: var(--jatui-border-w) solid oklch(var(--b2));
+		border-bottom: var(--jatui-border-w) solid var(--color-base-200);
 		flex-shrink: 0;
 	}
 
@@ -299,7 +299,7 @@
 		width: 1rem;
 		height: 1rem;
 		flex-shrink: 0;
-		color: oklch(var(--bc) / 0.4);
+		color: color-mix(in oklch, var(--color-base-content) 40%, transparent);
 	}
 
 	.cp-search-input {
@@ -308,13 +308,13 @@
 		border: none;
 		outline: none;
 		font-size: 0.9375rem;
-		color: oklch(var(--bc));
+		color: var(--color-base-content);
 		line-height: 1.5;
 		min-width: 0;
 	}
 
 	.cp-search-input::placeholder {
-		color: oklch(var(--bc) / 0.35);
+		color: color-mix(in oklch, var(--color-base-content) 35%, transparent);
 	}
 
 	.cp-search-clear {
@@ -326,20 +326,20 @@
 		border: none;
 		background: none;
 		cursor: pointer;
-		color: oklch(var(--bc) / 0.45);
+		color: color-mix(in oklch, var(--color-base-content) 45%, transparent);
 		transition: color var(--motion-instant) var(--motion-glide),
 		            background var(--motion-instant) var(--motion-glide);
 	}
 
 	.cp-search-clear:hover {
-		color: oklch(var(--bc));
-		background: oklch(var(--b2));
+		color: var(--color-base-content);
+		background: var(--color-base-200);
 	}
 
 	.cp-hint-kbd {
 		font-size: 0.5625rem;
 		font-family: ui-monospace, 'SF Mono', Menlo, monospace;
-		color: oklch(var(--bc) / 0.3);
+		color: color-mix(in oklch, var(--color-base-content) 30%, transparent);
 		background: none;
 		border: none;
 		padding: 0;
@@ -361,7 +361,7 @@
 		font-weight: 700;
 		text-transform: uppercase;
 		letter-spacing: 0.07em;
-		color: oklch(var(--bc) / 0.35);
+		color: color-mix(in oklch, var(--color-base-content) 35%, transparent);
 	}
 
 	.cp-item {
@@ -379,14 +379,14 @@
 		background: transparent;
 		cursor: pointer;
 		text-align: left;
-		color: oklch(var(--bc) / 0.85);
+		color: color-mix(in oklch, var(--color-base-content) 85%, transparent);
 		transition: background var(--motion-instant) var(--motion-glide),
 		            color var(--motion-instant) var(--motion-glide);
 	}
 
 	.cp-item-highlighted .cp-item-btn {
-		background: oklch(var(--b2));
-		color: oklch(var(--bc));
+		background: var(--color-base-200);
+		color: var(--color-base-content);
 	}
 
 	.cp-item-icon {
@@ -427,15 +427,15 @@
 		font-size: 0.5625rem;
 		font-family: ui-monospace, 'SF Mono', Menlo, monospace;
 		font-weight: 600;
-		color: oklch(var(--bc) / 0.55);
-		background: oklch(var(--b2));
-		border: var(--jatui-border-w) solid oklch(var(--b3));
+		color: color-mix(in oklch, var(--color-base-content) 55%, transparent);
+		background: var(--color-base-200);
+		border: var(--jatui-border-w) solid var(--color-base-300);
 		line-height: 1.4;
 	}
 
 	.cp-item-highlighted .cp-kbd {
-		color: oklch(var(--bc) / 0.7);
-		background: oklch(var(--b3));
+		color: color-mix(in oklch, var(--color-base-content) 70%, transparent);
+		background: var(--color-base-300);
 	}
 
 	/* Empty state */
@@ -443,7 +443,7 @@
 		padding: 1.5rem 0.875rem;
 		text-align: center;
 		font-size: 0.8125rem;
-		color: oklch(var(--bc) / 0.4);
+		color: color-mix(in oklch, var(--color-base-content) 40%, transparent);
 		font-family: ui-monospace, 'SF Mono', Menlo, monospace;
 	}
 
@@ -453,7 +453,7 @@
 		gap: 1rem;
 		align-items: center;
 		padding: 0.5rem 0.875rem;
-		border-top: var(--jatui-border-w) solid oklch(var(--b2));
+		border-top: var(--jatui-border-w) solid var(--color-base-200);
 		flex-shrink: 0;
 	}
 
@@ -463,7 +463,7 @@
 		gap: 0.25rem;
 		font-size: 0.5625rem;
 		font-family: ui-monospace, 'SF Mono', Menlo, monospace;
-		color: oklch(var(--bc) / 0.35);
+		color: color-mix(in oklch, var(--color-base-content) 35%, transparent);
 	}
 
 	@media (prefers-reduced-motion: reduce) {

package/dist/components/CopyButton.svelte

@@ -123,11 +123,6 @@
 	.ic-check {
 		opacity: 0;
 		transform: scale(0.5);
-		color: oklch(var(--su, 0.72 0.19 150));
-	}
-
-	/* Use DaisyUI success color if --su is not available */
-	.ic-check {
 		color: var(--color-success, #4cd08a);
 	}
 

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

@@ -743,7 +743,7 @@
                         <button
                           type="button"
                           class="w-6 h-6 rounded-full border-2 transition-transform duration-100 {annotColor === c ? 'scale-125 border-base-content' : 'border-transparent hover:scale-110'}"
-                          style="background: {c}; {c === '#111827' ? 'outline: 1px solid oklch(var(--bc)/0.2);' : ''}"
+                          style="background: {c}; {c === '#111827' ? 'outline: 1px solid color-mix(in oklch, var(--color-base-content) 20%, transparent);' : ''}"
                           onclick={() => { annotColor = c }}
                           aria-label="Color {c}"
                         ></button>

package/dist/components/PinInput.svelte

@@ -151,7 +151,7 @@
 	}
 
 	.pin-cell--filled {
-		border-color: oklch(var(--p));
+		border-color: var(--color-primary);
 	}
 
 	.pin-cell--pop {

package/dist/components/SearchDropdown.svelte

@@ -377,9 +377,9 @@
 		min-height: 2rem;
 		padding: 0 0.75rem;
 		border-radius: var(--rounded-btn, 0.5rem);
-		background: var(--b2, oklch(0.16 0.01 250));
-		border: 1px solid oklch(from var(--bc, oklch(0.85 0.02 250)) l c h / 0.3);
-		color: var(--bc, oklch(0.85 0.02 250));
+		background: var(--color-base-200, oklch(0.16 0.01 250));
+		border: 1px solid color-mix(in oklch, var(--color-base-content, oklch(0.85 0.02 250)) 30%, transparent);
+		color: var(--color-base-content, oklch(0.85 0.02 250));
 	}
 	.sd-sm .sd-chevron {
 		width: 0.625rem;

package/dist/components/Skeleton.svelte

@@ -63,9 +63,9 @@
 		border-radius: 0.375rem;
 		background: linear-gradient(
 			90deg,
-			oklch(var(--b2) / 1) 0%,
-			oklch(var(--b3) / 1) 25%,
-			oklch(var(--b2) / 1) 50%
+			var(--color-base-200) 0%,
+			var(--color-base-300) 25%,
+			var(--color-base-200) 50%
 		);
 		background-size: 280% 100%;
 		animation: skel-shimmer 1.5s linear infinite;
@@ -81,9 +81,9 @@
 		border-radius: 9999px;
 		background: linear-gradient(
 			90deg,
-			oklch(var(--b2) / 1) 0%,
-			oklch(var(--b3) / 1) 25%,
-			oklch(var(--b2) / 1) 50%
+			var(--color-base-200) 0%,
+			var(--color-base-300) 25%,
+			var(--color-base-200) 50%
 		);
 		background-size: 280% 100%;
 		animation: skel-shimmer 1.5s linear infinite;
@@ -96,9 +96,9 @@
 		border-radius: 0.5rem;
 		background: linear-gradient(
 			90deg,
-			oklch(var(--b2) / 1) 0%,
-			oklch(var(--b3) / 1) 25%,
-			oklch(var(--b2) / 1) 50%
+			var(--color-base-200) 0%,
+			var(--color-base-300) 25%,
+			var(--color-base-200) 50%
 		);
 		background-size: 280% 100%;
 		animation: skel-shimmer 1.5s linear infinite;

package/dist/components/Tabs.svelte

@@ -148,7 +148,7 @@
 
 		/* ── Pill variant ─────────────────────────────────────── */
 		.tabs-pill .tab-list {
-			background-color: oklch(var(--b2, 93% 0 0) / 1);
+			background-color: var(--color-base-200, oklch(93% 0 0));
 			border-radius: 0.75rem;
 			padding: 3px;
 			gap: 0;
@@ -158,7 +158,7 @@
 			position: absolute;
 			top: 0;
 			left: 0;
-			background-color: oklch(var(--b1, 100% 0 0) / 1);
+			background-color: var(--color-base-100, oklch(100% 0 0));
 			border-radius: 0.6rem;
 			box-shadow: 0 1px 3px oklch(0% 0 0 / 10%);
 			transition:
@@ -178,7 +178,7 @@
 
 		/* ── Underline variant ────────────────────────────────── */
 		.tabs-underline .tab-list {
-			border-bottom: 1px solid oklch(var(--b3, 88% 0 0) / 1);
+			border-bottom: 1px solid var(--color-base-300, oklch(88% 0 0));
 			padding-bottom: 0;
 			gap: 0;
 		}

package/dist/components/TextInput.svelte

@@ -206,7 +206,7 @@
 		top: 50%;
 		transform: translateY(-50%);
 		font-size: 0.875rem;
-		color: oklch(var(--bc) / 0.55);
+		color: color-mix(in oklch, var(--color-base-content) 55%, transparent);
 		pointer-events: none;
 		transform-origin: left center;
 		transition:
@@ -219,7 +219,7 @@
 	.jatui-float-field input:focus ~ .jatui-float-label,
 	.jatui-float-field input:not(:placeholder-shown) ~ .jatui-float-label {
 		transform: translateY(-130%) scale(0.82);
-		color: oklch(var(--p, var(--bc)));
+		color: var(--color-primary, var(--color-base-content));
 		font-size: 0.75rem;
 	}
 

package/dist/components/messaging/MessageInput.svelte

@@ -444,9 +444,9 @@
 
 <style>
   div[contenteditable='true'] { white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; }
-  div[contenteditable='true']:empty:before { content: attr(data-placeholder); color: oklch(var(--bc) / 0.5); pointer-events: none; }
-  div[contenteditable='true']:focus:empty:before { content: attr(data-placeholder); color: oklch(var(--bc) / 0.3); }
+  div[contenteditable='true']:empty:before { content: attr(data-placeholder); color: color-mix(in oklch, var(--color-base-content) 50%, transparent); pointer-events: none; }
+  div[contenteditable='true']:focus:empty:before { content: attr(data-placeholder); color: color-mix(in oklch, var(--color-base-content) 30%, transparent); }
   div[contenteditable='true']::-webkit-scrollbar { width: 6px; }
   div[contenteditable='true']::-webkit-scrollbar-track { background: transparent; }
-  div[contenteditable='true']::-webkit-scrollbar-thumb { background-color: oklch(var(--bc) / 0.2); border-radius: 3px; }
+  div[contenteditable='true']::-webkit-scrollbar-thumb { background-color: color-mix(in oklch, var(--color-base-content) 20%, transparent); border-radius: 3px; }
 </style>

package/dist/components/messaging/QuotedMessageDisplay.svelte

@@ -113,11 +113,11 @@
   }
 
   .message-content :global(.mention-link) {
-    color: oklch(var(--p) / 0.6);
+    color: color-mix(in oklch, var(--color-primary) 60%, transparent);
     transition: color 0.2s;
   }
 
   .message-content :global(.mention-link):hover {
-    color: oklch(var(--p) / 0.8);
+    color: color-mix(in oklch, var(--color-primary) 80%, transparent);
   }
 </style>

package/dist/components/progress/ProgressBar.svelte

@@ -36,13 +36,13 @@
 	};
 
 	const colorMap: Record<NonNullable<Props['color']>, string> = {
-		primary: 'oklch(var(--p))',
-		secondary: 'oklch(var(--s))',
-		accent: 'oklch(var(--a))',
-		success: 'oklch(var(--su))',
-		warning: 'oklch(var(--wa))',
-		error: 'oklch(var(--er))',
-		info: 'oklch(var(--in))'
+		primary: 'var(--color-primary)',
+		secondary: 'var(--color-secondary)',
+		accent: 'var(--color-accent)',
+		success: 'var(--color-success)',
+		warning: 'var(--color-warning)',
+		error: 'var(--color-error)',
+		info: 'var(--color-info)'
 	};
 
 	const trackHeight = $derived(heightMap[size]);
@@ -102,7 +102,7 @@
 		justify-content: space-between;
 		align-items: center;
 		font-size: 0.8125rem;
-		color: oklch(var(--bc) / 0.7);
+		color: color-mix(in oklch, var(--color-base-content) 70%, transparent);
 	}
 
 	.progress-pct {
@@ -114,7 +114,7 @@
 		position: relative;
 		width: 100%;
 		border-radius: 9999px;
-		background: oklch(var(--b3) / 1);
+		background: var(--color-base-300);
 		overflow: hidden;
 	}
 
@@ -155,7 +155,7 @@
 		flex: 1;
 		height: 100%;
 		border-radius: 9999px;
-		background: oklch(var(--b1) / 1);
+		background: var(--color-base-100);
 		overflow: hidden;
 		position: relative;
 	}

package/dist/components/progress/ProgressRing.svelte

@@ -28,13 +28,13 @@
 	const cy = $derived(size / 2);
 
 	const colorMap: Record<NonNullable<Props['color']>, string> = {
-		primary: 'oklch(var(--p))',
-		secondary: 'oklch(var(--s))',
-		accent: 'oklch(var(--a))',
-		success: 'oklch(var(--su))',
-		warning: 'oklch(var(--wa))',
-		error: 'oklch(var(--er))',
-		info: 'oklch(var(--in))'
+		primary: 'var(--color-primary)',
+		secondary: 'var(--color-secondary)',
+		accent: 'var(--color-accent)',
+		success: 'var(--color-success)',
+		warning: 'var(--color-warning)',
+		error: 'var(--color-error)',
+		info: 'var(--color-info)'
 	};
 
 	const strokeColor = $derived(colorMap[color]);
@@ -58,7 +58,7 @@
 			{cy}
 			r={r}
 			fill="none"
-			stroke="oklch(var(--b3) / 1)"
+			stroke="var(--color-base-300)"
 			stroke-width={strokeWidth}
 		/>
 		<!-- Progress arc -->
@@ -114,7 +114,7 @@
 		align-items: center;
 		justify-content: center;
 		line-height: 1.1;
-		color: oklch(var(--bc) / 1);
+		color: var(--color-base-content);
 		pointer-events: none;
 		z-index: 1;
 	}
@@ -126,7 +126,7 @@
 
 	.ring-sublabel {
 		font-size: 0.625em;
-		color: oklch(var(--bc) / 0.6);
+		color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
 		margin-top: 0.125em;
 	}
 

package/dist/components/progress/Steps.svelte

@@ -28,22 +28,22 @@
 	const trackFill = $derived(count > 1 ? (current - 1) / (count - 1) : 1);
 
 	const colorMap: Record<NonNullable<Props['color']>, string> = {
-		primary: 'oklch(var(--p))',
-		secondary: 'oklch(var(--s))',
-		accent: 'oklch(var(--a))',
-		success: 'oklch(var(--su))',
-		warning: 'oklch(var(--wa))',
-		error: 'oklch(var(--er))',
-		info: 'oklch(var(--in))'
+		primary: 'var(--color-primary)',
+		secondary: 'var(--color-secondary)',
+		accent: 'var(--color-accent)',
+		success: 'var(--color-success)',
+		warning: 'var(--color-warning)',
+		error: 'var(--color-error)',
+		info: 'var(--color-info)'
 	};
 	const colorFg: Record<NonNullable<Props['color']>, string> = {
-		primary: 'oklch(var(--pc))',
-		secondary: 'oklch(var(--sc))',
-		accent: 'oklch(var(--ac))',
-		success: 'oklch(var(--suc))',
-		warning: 'oklch(var(--wac))',
-		error: 'oklch(var(--erc))',
-		info: 'oklch(var(--inc))'
+		primary: 'var(--color-primary-content)',
+		secondary: 'var(--color-secondary-content)',
+		accent: 'var(--color-accent-content)',
+		success: 'var(--color-success-content)',
+		warning: 'var(--color-warning-content)',
+		error: 'var(--color-error-content)',
+		info: 'var(--color-info-content)'
 	};
 
 	const fillColor = $derived(colorMap[color]);
@@ -113,7 +113,7 @@
 		right: calc(var(--node) / 2);
 		height: 3px;
 		border-radius: 9999px;
-		background: oklch(var(--b3) / 1);
+		background: var(--color-base-300);
 		overflow: hidden;
 		transform: translateY(-50%);
 	}
@@ -139,13 +139,13 @@
 		width: var(--node);
 		height: var(--node);
 		border-radius: 9999px;
-		background: oklch(var(--b3) / 1);
-		color: oklch(var(--bc) / 0.5);
+		background: var(--color-base-300);
+		color: color-mix(in oklch, var(--color-base-content) 50%, transparent);
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		font-weight: 600;
-		border: 2px solid oklch(var(--b3) / 1);
+		border: 2px solid var(--color-base-300);
 		transition:
 			background 0.2s var(--motion-glide),
 			color 0.2s var(--motion-glide),
@@ -154,7 +154,7 @@
 	}
 
 	.step--active .step-node {
-		background: oklch(var(--b1) / 1);
+		background: var(--color-base-100);
 		border-color: var(--fill);
 		color: var(--fill);
 		transform: scale(1.18);
@@ -172,7 +172,7 @@
 	}
 
 	.step-label {
-		color: oklch(var(--bc) / 0.6);
+		color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
 		text-align: center;
 		max-width: 5rem;
 		line-height: 1.2;
@@ -181,7 +181,7 @@
 
 	.step--active .step-label,
 	.step--complete .step-label {
-		color: oklch(var(--bc) / 1);
+		color: var(--color-base-content);
 	}
 
 	@media (prefers-reduced-motion: reduce) {

package/dist/components/table/DataTable.svelte

@@ -286,7 +286,7 @@
 		user-select: none;
 	}
 	.dt-th-sortable:hover {
-		background-color: oklch(var(--b2) / 0.6);
+		background-color: color-mix(in oklch, var(--color-base-200) 60%, transparent);
 	}
 
 	.dt-th-label {
@@ -299,13 +299,13 @@
 		display: inline-flex;
 		align-items: center;
 		margin-left: var(--jatui-space-xs);
-		color: oklch(var(--bc) / 0.35);
+		color: color-mix(in oklch, var(--color-base-content) 35%, transparent);
 		transition: color var(--motion-fast) var(--motion-glide),
 		            transform var(--motion-fast) var(--motion-glide);
 	}
 
 	.dt-sort-active {
-		color: oklch(var(--p) / 0.9);
+		color: color-mix(in oklch, var(--color-primary) 90%, transparent);
 	}
 
 	@media (prefers-reduced-motion: reduce) {
@@ -313,7 +313,7 @@
 	}
 
 	.dt-row-selected {
-		background-color: oklch(var(--p) / 0.06) !important;
+		background-color: color-mix(in oklch, var(--color-primary) 6%, transparent) !important;
 	}
 
 	.dt-select-cell {
@@ -324,7 +324,7 @@
 
 	.dt-empty {
 		text-align: center;
-		color: oklch(var(--bc) / 0.35);
+		color: color-mix(in oklch, var(--color-base-content) 35%, transparent);
 		padding: 2rem 1rem;
 		font-size: 0.875rem;
 	}
@@ -334,13 +334,13 @@
 		align-items: center;
 		justify-content: space-between;
 		padding: var(--jatui-space-base) var(--jatui-space-xs);
-		border-top: var(--jatui-border-w) solid oklch(var(--b3) / 1);
+		border-top: var(--jatui-border-w) solid var(--color-base-300);
 		margin-top: var(--jatui-space-base);
 	}
 
 	.dt-page-info {
 		font-size: 0.8125rem;
-		color: oklch(var(--bc) / 0.5);
+		color: color-mix(in oklch, var(--color-base-content) 50%, transparent);
 	}
 
 	.dt-page-btns {
@@ -354,9 +354,9 @@
 		border-radius: var(--jatui-radius-selector);
 		background: linear-gradient(
 			90deg,
-			oklch(var(--b2) / 1) 0%,
-			oklch(var(--b3) / 1) 25%,
-			oklch(var(--b2) / 1) 50%
+			var(--color-base-200) 0%,
+			var(--color-base-300) 25%,
+			var(--color-base-200) 50%
 		);
 		background-size: 280% 100%;
 		animation: skel-shimmer 1.5s linear infinite;

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/dist/showcase/AnimatedBeam.svelte

@@ -30,8 +30,8 @@
 		fromId,
 		toId,
 		containerId,
-		colorFrom = 'oklch(var(--p))',
-		colorTo = 'oklch(var(--a))',
+		colorFrom = 'var(--color-primary)',
+		colorTo = 'var(--color-accent)',
 		strokeWidth = 2,
 		duration = 3,
 		dashLength = 0.25,
@@ -146,7 +146,12 @@
 
 	<!-- Static base line -->
 	{#if pathD}
-		<path d={pathD} stroke="oklch(var(--bc) / 0.08)" stroke-width={strokeWidth} fill="none" />
+		<path
+			d={pathD}
+			stroke="color-mix(in oklch, var(--color-base-content) 8%, transparent)"
+			stroke-width={strokeWidth}
+			fill="none"
+		/>
 
 		<!-- Animated beam -->
 		{#if !reducedMotion}

package/dist/showcase/AuroraDrift.svelte

@@ -34,17 +34,17 @@
 		background:
 			radial-gradient(
 				40% 50% at 30% 38%,
-				color-mix(in srgb, oklch(var(--p)) 30%, transparent),
+				color-mix(in srgb, var(--color-primary) 30%, transparent),
 				transparent 60%
 			),
 			radial-gradient(
 				45% 55% at 72% 62%,
-				color-mix(in srgb, oklch(var(--s)) 30%, transparent),
+				color-mix(in srgb, var(--color-secondary) 30%, transparent),
 				transparent 60%
 			),
 			radial-gradient(
 				40% 50% at 50% 82%,
-				color-mix(in srgb, oklch(var(--a)) 25%, transparent),
+				color-mix(in srgb, var(--color-accent) 25%, transparent),
 				transparent 60%
 			);
 		filter: blur(16px);

package/dist/showcase/BentoCard.svelte

@@ -32,14 +32,14 @@
 	.bento-card {
 		position: relative;
 		border-radius: var(--jatui-radius-box);
-		border: var(--jatui-border-w) solid oklch(var(--bc) / 0.1);
-		background: oklch(var(--b1));
+		border: var(--jatui-border-w) solid color-mix(in oklch, var(--color-base-content) 10%, transparent);
+		background: var(--color-base-100);
 		overflow: hidden;
 		transition: background var(--motion-fast) var(--motion-glide);
 	}
 
 	.bento-card:hover {
-		background: var(--bento-tint, oklch(var(--b2, var(--b1))));
+		background: var(--bento-tint, var(--color-base-200, var(--color-base-100)));
 	}
 
 	@media (prefers-reduced-motion: reduce) {

package/dist/showcase/BorderBeam.svelte

@@ -12,8 +12,8 @@
 
 	let {
 		duration = 3,
-		colorFrom = 'oklch(var(--p))',
-		colorTo = 'oklch(var(--a))',
+		colorFrom = 'var(--color-primary)',
+		colorTo = 'var(--color-accent)',
 		borderRadius = '0.75rem',
 		class: className = '',
 		children

package/dist/showcase/CursorSpotlight.svelte

@@ -64,7 +64,7 @@
 		border-radius: 50%;
 		background: radial-gradient(
 			circle,
-			color-mix(in srgb, oklch(var(--p)) 18%, transparent),
+			color-mix(in srgb, var(--color-primary) 18%, transparent),
 			transparent 70%
 		);
 		transform: translate(-50%, -50%);

package/dist/showcase/DeviceMock.svelte

@@ -72,21 +72,21 @@
 				height="842"
 				rx="55"
 				ry="55"
-				fill="oklch(var(--b2, var(--b1)))"
-				stroke="oklch(var(--bc) / 0.15)"
+				fill="var(--color-base-200, var(--color-base-100))"
+				stroke="color-mix(in oklch, var(--color-base-content) 15%, transparent)"
 				stroke-width="2"
 			/>
 			<!-- Side buttons -->
-			<rect x="-2" y="160" width="4" height="60" rx="2" fill="oklch(var(--bc) / 0.2)" />
-			<rect x="-2" y="230" width="4" height="90" rx="2" fill="oklch(var(--bc) / 0.2)" />
-			<rect x="-2" y="330" width="4" height="90" rx="2" fill="oklch(var(--bc) / 0.2)" />
-			<rect x="388" y="220" width="4" height="120" rx="2" fill="oklch(var(--bc) / 0.2)" />
+			<rect x="-2" y="160" width="4" height="60" rx="2" fill="color-mix(in oklch, var(--color-base-content) 20%, transparent)" />
+			<rect x="-2" y="230" width="4" height="90" rx="2" fill="color-mix(in oklch, var(--color-base-content) 20%, transparent)" />
+			<rect x="-2" y="330" width="4" height="90" rx="2" fill="color-mix(in oklch, var(--color-base-content) 20%, transparent)" />
+			<rect x="388" y="220" width="4" height="120" rx="2" fill="color-mix(in oklch, var(--color-base-content) 20%, transparent)" />
 			<!-- Screen bezel -->
-			<rect x="15" y="55" width="360" height="734" rx="42" ry="42" fill="oklch(var(--b1))" />
+			<rect x="15" y="55" width="360" height="734" rx="42" ry="42" fill="var(--color-base-100)" />
 			<!-- Dynamic island -->
-			<rect x="155" y="20" width="80" height="30" rx="15" fill="oklch(var(--n))" />
+			<rect x="155" y="20" width="80" height="30" rx="15" fill="var(--color-neutral)" />
 			<!-- Home indicator -->
-			<rect x="150" y="808" width="90" height="5" rx="2.5" fill="oklch(var(--bc) / 0.25)" />
+			<rect x="150" y="808" width="90" height="5" rx="2.5" fill="color-mix(in oklch, var(--color-base-content) 25%, transparent)" />
 		{:else if variant === 'safari'}
 			<!-- Safari browser window -->
 			<rect
@@ -96,13 +96,13 @@
 				height="832"
 				rx="10"
 				ry="10"
-				fill="oklch(var(--b2, var(--b1)))"
-				stroke="oklch(var(--bc) / 0.15)"
+				fill="var(--color-base-200, var(--color-base-100))"
+				stroke="color-mix(in oklch, var(--color-base-content) 15%, transparent)"
 				stroke-width="1"
 			/>
 			<!-- Title bar -->
-			<rect x="0" y="0" width="1280" height="88" rx="10" fill="oklch(var(--b3, var(--b2, var(--b1))))" />
-			<rect x="10" y="44" width="1260" height="44" rx="0" fill="oklch(var(--b3, var(--b2, var(--b1))))" />
+			<rect x="0" y="0" width="1280" height="88" rx="10" fill="var(--color-base-300, var(--color-base-200, var(--color-base-100)))" />
+			<rect x="10" y="44" width="1260" height="44" rx="0" fill="var(--color-base-300, var(--color-base-200, var(--color-base-100)))" />
 			<!-- Traffic lights -->
 			<circle cx="20" cy="22" r="7" fill="#ff5f57" />
 			<circle cx="44" cy="22" r="7" fill="#febc2e" />
@@ -114,14 +114,14 @@
 				width="640"
 				height="28"
 				rx="14"
-				fill="oklch(var(--b1))"
-				stroke="oklch(var(--bc) / 0.1)"
+				fill="var(--color-base-100)"
+				stroke="color-mix(in oklch, var(--color-base-content) 10%, transparent)"
 				stroke-width="1"
 			/>
 			<!-- Screen content area -->
-			<rect x="1" y="88" width="1278" height="743" fill="oklch(var(--b1))" />
+			<rect x="1" y="88" width="1278" height="743" fill="var(--color-base-100)" />
 			<!-- Bottom round corners clip -->
-			<rect x="0" y="822" width="1280" height="10" rx="0" fill="oklch(var(--b2, var(--b1)))" />
+			<rect x="0" y="822" width="1280" height="10" rx="0" fill="var(--color-base-200, var(--color-base-100))" />
 		{:else}
 			<!-- Android frame -->
 			<rect
@@ -131,20 +131,20 @@
 				height="842"
 				rx="42"
 				ry="42"
-				fill="oklch(var(--b2, var(--b1)))"
-				stroke="oklch(var(--bc) / 0.15)"
+				fill="var(--color-base-200, var(--color-base-100))"
+				stroke="color-mix(in oklch, var(--color-base-content) 15%, transparent)"
 				stroke-width="2"
 			/>
 			<!-- Side buttons -->
-			<rect x="-2" y="200" width="4" height="80" rx="2" fill="oklch(var(--bc) / 0.2)" />
-			<rect x="388" y="180" width="4" height="60" rx="2" fill="oklch(var(--bc) / 0.2)" />
-			<rect x="388" y="250" width="4" height="100" rx="2" fill="oklch(var(--bc) / 0.2)" />
+			<rect x="-2" y="200" width="4" height="80" rx="2" fill="color-mix(in oklch, var(--color-base-content) 20%, transparent)" />
+			<rect x="388" y="180" width="4" height="60" rx="2" fill="color-mix(in oklch, var(--color-base-content) 20%, transparent)" />
+			<rect x="388" y="250" width="4" height="100" rx="2" fill="color-mix(in oklch, var(--color-base-content) 20%, transparent)" />
 			<!-- Screen -->
-			<rect x="12" y="24" width="366" height="796" rx="34" fill="oklch(var(--b1))" />
+			<rect x="12" y="24" width="366" height="796" rx="34" fill="var(--color-base-100)" />
 			<!-- Front camera -->
-			<circle cx="195" cy="44" r="6" fill="oklch(var(--n))" />
+			<circle cx="195" cy="44" r="6" fill="var(--color-neutral)" />
 			<!-- Nav bar -->
-			<rect x="130" y="820" width="130" height="5" rx="2.5" fill="oklch(var(--bc) / 0.25)" />
+			<rect x="130" y="820" width="130" height="5" rx="2.5" fill="color-mix(in oklch, var(--color-base-content) 25%, transparent)" />
 		{/if}
 	</svg>
 

package/dist/showcase/Dock.svelte

@@ -87,8 +87,8 @@
 		align-items: flex-end;
 		gap: 8px;
 		padding: 10px 16px;
-		background: oklch(var(--b2, var(--b1)) / 0.8);
-		border: var(--jatui-border-w) solid oklch(var(--bc) / 0.1);
+		background: color-mix(in oklch, var(--color-base-200, var(--color-base-100)) 80%, transparent);
+		border: var(--jatui-border-w) solid color-mix(in oklch, var(--color-base-content) 10%, transparent);
 		border-radius: var(--jatui-radius-box);
 		backdrop-filter: blur(12px);
 	}
@@ -100,18 +100,18 @@
 		width: 56px;
 		height: 56px;
 		border-radius: var(--jatui-radius-box);
-		background: oklch(var(--b1));
-		border: var(--jatui-border-w) solid oklch(var(--bc) / 0.08);
+		background: var(--color-base-100);
+		border: var(--jatui-border-w) solid color-mix(in oklch, var(--color-base-content) 8%, transparent);
 		cursor: pointer;
 		transform-origin: bottom center;
 		transition: transform var(--motion-fast) var(--motion-glide);
-		color: oklch(var(--bc));
+		color: var(--color-base-content);
 	}
 
 	.dock-item:hover,
 	.dock-item:focus-visible {
-		background: oklch(var(--b2, var(--b1)));
-		outline: 2px solid oklch(var(--p));
+		background: var(--color-base-200, var(--color-base-100));
+		outline: 2px solid var(--color-primary);
 		outline-offset: 2px;
 	}
 

package/dist/showcase/Terminal.svelte

@@ -147,10 +147,10 @@
 		font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
 		font-size: 0.8125rem;
 		line-height: 1.6;
-		background: oklch(var(--n));
-		color: oklch(var(--nc));
+		background: var(--color-neutral);
+		color: var(--color-neutral-content);
 		border-radius: var(--jatui-radius-box);
-		border: var(--jatui-border-w) solid oklch(var(--bc) / 0.12);
+		border: var(--jatui-border-w) solid color-mix(in oklch, var(--color-base-content) 12%, transparent);
 		overflow: hidden;
 		min-width: 320px;
 	}
@@ -160,8 +160,8 @@
 		align-items: center;
 		gap: 6px;
 		padding: 10px 14px;
-		background: oklch(var(--n) / 0.8);
-		border-bottom: var(--jatui-border-w) solid oklch(var(--bc) / 0.1);
+		background: color-mix(in oklch, var(--color-neutral) 80%, transparent);
+		border-bottom: var(--jatui-border-w) solid color-mix(in oklch, var(--color-base-content) 10%, transparent);
 	}
 
 	.traffic-dot {
@@ -197,13 +197,13 @@
 	}
 
 	.terminal-prompt {
-		color: oklch(var(--su, 0.75 0.18 142));
+		color: var(--color-success, oklch(0.75 0.18 142));
 		flex-shrink: 0;
 		user-select: none;
 	}
 
 	.terminal-output {
-		color: oklch(var(--nc) / 0.7);
+		color: color-mix(in oklch, var(--color-neutral-content) 70%, transparent);
 	}
 
 	.terminal-cursor {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joewinke/jatui",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "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",