@joewinke/jatui 0.2.3 → 0.2.5

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/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;
 		}
@@ -189,7 +189,7 @@
 			left: 0;
 			width: 1px;
 			height: 2px;
-			background-color: oklch(var(--p, 55% 0.2 270) / 1);
+			background-color: var(--color-primary, oklch(55% 0.2 270));
 			transform-origin: left center;
 			border-radius: 1px;
 			transition:
@@ -216,7 +216,7 @@
 			border: none;
 			background: transparent;
 			cursor: pointer;
-			color: oklch(var(--bc, 20% 0 0) / 0.6);
+			color: color-mix(in oklch, var(--color-base-content, oklch(20% 0 0)) 60%, transparent);
 			transition:
 				color var(--motion-fast, 150ms) var(--motion-glide, cubic-bezier(0.16, 1, 0.3, 1));
 			white-space: nowrap;
@@ -224,11 +224,11 @@
 		}
 
 		.tab-btn:hover:not(:disabled) {
-			color: oklch(var(--bc, 20% 0 0) / 0.85);
+			color: color-mix(in oklch, var(--color-base-content, oklch(20% 0 0)) 85%, transparent);
 		}
 
 		.tab-btn.tab-active {
-			color: oklch(var(--bc, 20% 0 0) / 1);
+			color: var(--color-base-content, oklch(20% 0 0));
 		}
 
 		.tab-btn:disabled {
@@ -237,13 +237,13 @@
 		}
 
 		.tab-btn:focus-visible {
-			outline: 2px solid oklch(var(--p, 55% 0.2 270) / 1);
+			outline: 2px solid var(--color-primary, oklch(55% 0.2 270));
 			outline-offset: 2px;
 		}
 
 		/* Underline: active tab gets primary color */
 		.tabs-underline .tab-btn.tab-active {
-			color: oklch(var(--p, 55% 0.2 270) / 1);
+			color: var(--color-primary, oklch(55% 0.2 270));
 		}
 
 		/* Underline: button bottom padding so indicator aligns */

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,7 +2,16 @@ 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,
@@ -112,6 +112,19 @@
 		pathLength > 0 ? `${pathLength * dashLength} ${pathLength * (1 - dashLength)}` : '0 1'
 	);
 	const dashOffset = $derived(pathLength > 0 ? (reverse ? -pathLength : pathLength) : 0);
+
+	// Per-instance keyframes go through a DOM style element created in JS.
+	// Do NOT inject them as an html-embedded style-tag string in the markup
+	// (and avoid even writing that tag literally in comments): tag-scanning
+	// preprocessors extract it as CSS, the uid placeholder fails PostCSS
+	// ("Unknown word uid"), and the consumer's whole build dies.
+	$effect(() => {
+		if (pathLength <= 0 || reducedMotion) return;
+		const styleEl = document.createElement('style');
+		styleEl.textContent = `@keyframes beam-sweep-${uid} { 0% { stroke-dashoffset: ${dashOffset}; } 100% { stroke-dashoffset: ${-dashOffset}; } }`;
+		document.head.appendChild(styleEl);
+		return () => styleEl.remove();
+	});
 </script>
 
 <!-- svelte-ignore a11y_aria_hidden_on_focusable -->
@@ -133,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}
@@ -171,13 +189,3 @@
 		pointer-events: none;
 	}
 </style>
-
-<!-- Keyframes injected per-instance via a style tag to use the dynamic dashOffset -->
-{#if pathLength > 0 && !reducedMotion}
-	{@html `<style>
-		@keyframes beam-sweep-${uid} {
-			0%   { stroke-dashoffset: ${dashOffset}; }
-			100% { stroke-dashoffset: ${-dashOffset}; }
-		}
-	</style>`}
-{/if}

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