@joewinke/jatui 0.1.10 → 0.1.19

package/src/lib/components/markup.ts

@@ -0,0 +1,287 @@
+// Markup drawing primitives for construction drawing redlining
+// Adapted from JAT feedback annotation engine with cloud bubble tool added
+
+export type MarkupTool =
+  | "arrow"
+  | "rectangle"
+  | "ellipse"
+  | "cloud"
+  | "freehand"
+  | "text"
+
+export interface Point {
+  x: number
+  y: number
+}
+
+export interface BaseShape {
+  id: number
+  type: MarkupTool
+  color: string
+  strokeWidth: number
+}
+
+export interface ArrowShape extends BaseShape {
+  type: "arrow"
+  start: Point
+  end: Point
+}
+
+export interface RectangleShape extends BaseShape {
+  type: "rectangle"
+  start: Point
+  end: Point
+}
+
+export interface EllipseShape extends BaseShape {
+  type: "ellipse"
+  start: Point
+  end: Point
+}
+
+export interface CloudShape extends BaseShape {
+  type: "cloud"
+  start: Point
+  end: Point
+}
+
+export interface FreehandShape extends BaseShape {
+  type: "freehand"
+  points: Point[]
+}
+
+export interface TextShape extends BaseShape {
+  type: "text"
+  position: Point
+  content: string
+  fontSize: number
+}
+
+export type MarkupShape =
+  | ArrowShape
+  | RectangleShape
+  | EllipseShape
+  | CloudShape
+  | FreehandShape
+  | TextShape
+
+export const MARKUP_COLORS = [
+  "#ef4444",
+  "#eab308",
+  "#22c55e",
+  "#3b82f6",
+  "#ffffff",
+  "#111827",
+]
+
+export const DEFAULT_STROKE_WIDTH = 3
+
+let _nextId = 1
+export function nextShapeId(): number {
+  return _nextId++
+}
+
+function drawArrow(ctx: CanvasRenderingContext2D, shape: ArrowShape) {
+  const { start, end, color, strokeWidth } = shape
+  ctx.strokeStyle = color
+  ctx.lineWidth = strokeWidth
+  ctx.lineCap = "round"
+  ctx.lineJoin = "round"
+
+  ctx.beginPath()
+  ctx.moveTo(start.x, start.y)
+  ctx.lineTo(end.x, end.y)
+  ctx.stroke()
+
+  // Arrowhead
+  const angle = Math.atan2(end.y - start.y, end.x - start.x)
+  const headLen = 14
+  const headAngle = Math.PI / 7
+  ctx.beginPath()
+  ctx.moveTo(end.x, end.y)
+  ctx.lineTo(
+    end.x - headLen * Math.cos(angle - headAngle),
+    end.y - headLen * Math.sin(angle - headAngle),
+  )
+  ctx.moveTo(end.x, end.y)
+  ctx.lineTo(
+    end.x - headLen * Math.cos(angle + headAngle),
+    end.y - headLen * Math.sin(angle + headAngle),
+  )
+  ctx.stroke()
+}
+
+function drawRectangle(ctx: CanvasRenderingContext2D, shape: RectangleShape) {
+  const { start, end, color, strokeWidth } = shape
+  ctx.strokeStyle = color
+  ctx.lineWidth = strokeWidth
+  ctx.lineJoin = "round"
+  const x = Math.min(start.x, end.x)
+  const y = Math.min(start.y, end.y)
+  const w = Math.abs(end.x - start.x)
+  const h = Math.abs(end.y - start.y)
+  ctx.strokeRect(x, y, w, h)
+}
+
+function drawEllipse(ctx: CanvasRenderingContext2D, shape: EllipseShape) {
+  const { start, end, color, strokeWidth } = shape
+  ctx.strokeStyle = color
+  ctx.lineWidth = strokeWidth
+  const cx = (start.x + end.x) / 2
+  const cy = (start.y + end.y) / 2
+  const rx = Math.abs(end.x - start.x) / 2
+  const ry = Math.abs(end.y - start.y) / 2
+  if (rx < 1 || ry < 1) return
+  ctx.beginPath()
+  ctx.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2)
+  ctx.stroke()
+}
+
+/**
+ * Revision cloud — a series of small arcs along the perimeter of a rectangle.
+ * Standard construction markup tool for highlighting areas of change.
+ */
+function drawCloud(ctx: CanvasRenderingContext2D, shape: CloudShape) {
+  const { start, end, color, strokeWidth } = shape
+  ctx.strokeStyle = color
+  ctx.lineWidth = strokeWidth
+  ctx.lineCap = "round"
+  ctx.lineJoin = "round"
+
+  const x = Math.min(start.x, end.x)
+  const y = Math.min(start.y, end.y)
+  const w = Math.abs(end.x - start.x)
+  const h = Math.abs(end.y - start.y)
+  if (w < 4 || h < 4) return
+
+  // Generate perimeter points, then draw arcs between them
+  const arcSize = Math.min(w, h, 30) // arc diameter adapts to shape size
+  const perimeter = 2 * (w + h)
+  const numArcs = Math.max(8, Math.round(perimeter / arcSize))
+
+  // Collect points along the rectangle perimeter
+  const points: Point[] = []
+  const segLengths = [w, h, w, h]
+  const segDirs = [
+    { dx: 1, dy: 0 },
+    { dx: 0, dy: 1 },
+    { dx: -1, dy: 0 },
+    { dx: 0, dy: -1 },
+  ]
+  const segStarts: Point[] = [
+    { x, y },
+    { x: x + w, y },
+    { x: x + w, y: y + h },
+    { x, y: y + h },
+  ]
+
+  let totalLen = 0
+  for (const l of segLengths) totalLen += l
+  const step = totalLen / numArcs
+
+  let dist = 0
+  let segIdx = 0
+  let segDist = 0
+
+  for (let i = 0; i < numArcs; i++) {
+    const target = i * step
+    while (dist + segLengths[segIdx] - segDist < target && segIdx < 3) {
+      dist += segLengths[segIdx] - segDist
+      segIdx++
+      segDist = 0
+    }
+    const remaining = target - dist
+    points.push({
+      x: segStarts[segIdx].x + segDirs[segIdx].dx * (segDist + remaining),
+      y: segStarts[segIdx].y + segDirs[segIdx].dy * (segDist + remaining),
+    })
+  }
+
+  // Draw arcs between consecutive points
+  ctx.beginPath()
+  for (let i = 0; i < points.length; i++) {
+    const p1 = points[i]
+    const p2 = points[(i + 1) % points.length]
+    const mx = (p1.x + p2.x) / 2
+    const my = (p1.y + p2.y) / 2
+    // Bulge outward from center of rectangle
+    const cx = x + w / 2
+    const cy = y + h / 2
+    const dx = mx - cx
+    const dy = my - cy
+    const len = Math.sqrt(dx * dx + dy * dy) || 1
+    const bulge = arcSize * 0.35
+    const ctrlX = mx + (dx / len) * bulge
+    const ctrlY = my + (dy / len) * bulge
+
+    if (i === 0) {
+      ctx.moveTo(p1.x, p1.y)
+    }
+    ctx.quadraticCurveTo(ctrlX, ctrlY, p2.x, p2.y)
+  }
+  ctx.closePath()
+  ctx.stroke()
+}
+
+function drawFreehand(ctx: CanvasRenderingContext2D, shape: FreehandShape) {
+  const { points, color, strokeWidth } = shape
+  if (points.length < 2) return
+  ctx.strokeStyle = color
+  ctx.lineWidth = strokeWidth
+  ctx.lineCap = "round"
+  ctx.lineJoin = "round"
+  ctx.beginPath()
+  ctx.moveTo(points[0].x, points[0].y)
+  for (let i = 1; i < points.length; i++) {
+    ctx.lineTo(points[i].x, points[i].y)
+  }
+  ctx.stroke()
+}
+
+function drawText(ctx: CanvasRenderingContext2D, shape: TextShape) {
+  const { position, content, color, fontSize } = shape
+  if (!content) return
+  ctx.font = `bold ${fontSize}px sans-serif`
+  ctx.textBaseline = "top"
+  // Black outline for contrast on construction drawings
+  ctx.strokeStyle = "#000000"
+  ctx.lineWidth = 2
+  ctx.lineJoin = "round"
+  ctx.strokeText(content, position.x, position.y)
+  ctx.fillStyle = color
+  ctx.fillText(content, position.x, position.y)
+}
+
+export function renderShape(ctx: CanvasRenderingContext2D, shape: MarkupShape) {
+  ctx.save()
+  switch (shape.type) {
+    case "arrow":
+      drawArrow(ctx, shape)
+      break
+    case "rectangle":
+      drawRectangle(ctx, shape)
+      break
+    case "ellipse":
+      drawEllipse(ctx, shape)
+      break
+    case "cloud":
+      drawCloud(ctx, shape)
+      break
+    case "freehand":
+      drawFreehand(ctx, shape)
+      break
+    case "text":
+      drawText(ctx, shape)
+      break
+  }
+  ctx.restore()
+}
+
+export function renderAllShapes(
+  ctx: CanvasRenderingContext2D,
+  shapes: MarkupShape[],
+) {
+  for (const shape of shapes) {
+    renderShape(ctx, shape)
+  }
+}

package/src/lib/components/messaging/ChannelInfoModal.svelte

@@ -83,7 +83,7 @@
   <dialog class="modal modal-open">
     <div class="modal-box max-w-md">
       <div class="flex items-center justify-between mb-4">
-        <h3 class="font-bold text-lg">
+        <h3 class="font-semibold">
           {channel.emoji || '#'} {channel.name}
         </h3>
         <button class="btn btn-ghost btn-sm btn-circle" onclick={onclose}>✕</button>
@@ -96,11 +96,11 @@
       {#if isEditing}
         <div class="space-y-4">
           <div>
-            <label for="channel-info-name" class="label"><span class="label-text font-medium">Name</span></label>
+            <label for="channel-info-name" class="label"><span class="text-[0.8125rem] font-medium text-base-content/85">Name</span></label>
             <input id="channel-info-name" type="text" bind:value={editName} class="input input-bordered w-full" maxlength="80" />
           </div>
           <div>
-            <label for="channel-info-description" class="label"><span class="label-text font-medium">Description</span></label>
+            <label for="channel-info-description" class="label"><span class="text-[0.8125rem] font-medium text-base-content/85">Description</span></label>
             <textarea id="channel-info-description" bind:value={editDescription} class="textarea textarea-bordered w-full" rows="3" maxlength="250"></textarea>
           </div>
           <div class="flex gap-2">
@@ -114,20 +114,20 @@
       {:else}
         <div class="space-y-4">
           <div>
-            <span class="text-xs text-base-content/50 uppercase tracking-wider">Type</span>
-            <p class="text-sm">{channel.type === 'private' ? '🔒 Private' : '# Public'}</p>
+            <span class="text-[0.8125rem] text-base-content/45 tracking-[0.005em]">Type</span>
+            <p class="text-[0.9375rem]">{channel.type === 'private' ? '🔒 Private' : '# Public'}</p>
           </div>
 
           {#if channel.description}
             <div>
-              <span class="text-xs text-base-content/50 uppercase tracking-wider">Description</span>
-              <p class="text-sm">{channel.description}</p>
+              <span class="text-[0.8125rem] text-base-content/45 tracking-[0.005em]">Description</span>
+              <p class="text-[0.9375rem]">{channel.description}</p>
             </div>
           {/if}
 
           <div>
-            <span class="text-xs text-base-content/50 uppercase tracking-wider">Created</span>
-            <p class="text-sm">{formatDate(channel.createdAt)}{channel.creatorName ? ` by ${channel.creatorName}` : ''}</p>
+            <span class="text-[0.8125rem] text-base-content/45 tracking-[0.005em]">Created</span>
+            <p class="text-[0.9375rem]">{formatDate(channel.createdAt)}{channel.creatorName ? ` by ${channel.creatorName}` : ''}</p>
           </div>
 
           <div class="flex flex-wrap gap-2">

package/src/lib/components/messaging/ChannelList.svelte

@@ -74,7 +74,7 @@
           </span>
 
           {#if channel.unreadCount && channel.unreadCount > 0}
-            <span class="badge badge-error badge-xs text-white">
+            <span class="badge badge-error badge-xs text-error-content">
               {channel.unreadCount > 99 ? '99+' : channel.unreadCount}
             </span>
           {/if}

package/src/lib/components/messaging/ChannelMembersModal.svelte

@@ -100,7 +100,7 @@
   <dialog class="modal modal-open">
     <div class="modal-box max-w-md">
       <div class="flex items-center justify-between mb-4">
-        <h3 class="font-bold text-lg">Members of #{channelName}</h3>
+        <h3 class="font-semibold">Members of #{channelName}</h3>
         <button class="btn btn-ghost btn-sm btn-circle" onclick={onclose}>✕</button>
       </div>
 

package/src/lib/components/messaging/CreateChannelModal.svelte

@@ -109,7 +109,7 @@
   <dialog class="modal modal-open">
     <div class="modal-box max-w-lg">
       <div class="flex items-center justify-between mb-4">
-        <h3 class="font-bold text-lg">Create Channel</h3>
+        <h3 class="font-semibold">Create Channel</h3>
         <button class="btn btn-ghost btn-sm btn-circle" onclick={handleClose}>✕</button>
       </div>
 

package/src/lib/components/messaging/DirectMessageList.svelte

@@ -115,7 +115,7 @@
 
           <div class="flex items-center gap-1">
             {#if user.unreadCount > 0}
-              <span class="badge badge-error badge-xs text-white">
+              <span class="badge badge-error badge-xs text-error-content">
                 {user.unreadCount > 99 ? '99+' : user.unreadCount}
               </span>
             {/if}

package/src/lib/components/messaging/EmojiSelector.svelte

@@ -46,6 +46,7 @@
 
   let searchQuery = $state('')
   let activeCategory: EmojiCategory = $state('smileys_people')
+  // svelte-ignore state_referenced_locally
   let selectedSkinTone: SkinTone = $state(preferences?.skinTone || 'default')
   let hoveredEmoji = $state<{ emoji: string; name: string; shortcode: string } | null>(null)
   let loading = $state(false)
@@ -164,7 +165,7 @@
 {#if visible}
   <div
     bind:this={selectorElement}
-    class="fixed z-50 bg-base-100 border border-base-300 rounded-box shadow-xl w-88 flex flex-col"
+    class="fixed z-50 bg-base-200 border border-base-300 rounded-box w-88 flex flex-col"
     style="left: {position.x}px; top: {position.y}px; max-height: 420px;"
   >
     <!-- Search -->

package/src/lib/components/messaging/MentionAutocomplete.svelte

@@ -144,7 +144,7 @@
 {#if visible}
   <div
     bind:this={dropdownElement}
-    class="bg-base-100 border border-base-300 rounded-box shadow-lg overflow-y-auto overflow-x-hidden flex flex-col"
+    class="bg-base-200 border border-base-300 rounded-box overflow-y-auto overflow-x-hidden flex flex-col"
     style={dropdownStyle}
   >
     {#if loading}

package/src/lib/components/messaging/MessageAttachment.svelte

@@ -196,7 +196,7 @@
   {/if}
 
   {#if !compact}
-    <button type="button" class="absolute top-1 right-1 btn btn-circle btn-xs bg-base-100/80 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity" onclick={(e) => { e.stopPropagation(); handleContextMenu(e) }} title="More options">
+    <button type="button" class="absolute top-1 right-1 btn btn-circle btn-xs bg-base-100/80 opacity-0 group-hover:opacity-100 transition-opacity" onclick={(e) => { e.stopPropagation(); handleContextMenu(e) }} title="More options">
       ⋮
     </button>
   {/if}
@@ -206,7 +206,7 @@
 {#if showContextMenu}
   <!-- svelte-ignore a11y_click_events_have_key_events -->
   <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <div class="fixed z-50 bg-base-100 rounded-lg shadow-xl border border-base-300 py-1 min-w-[160px]" style="left: {contextMenuPosition.x}px; top: {contextMenuPosition.y}px;" onclick={(e) => e.stopPropagation()} role="menu" tabindex="-1">
+  <div class="fixed z-50 bg-base-200 rounded-lg border border-base-300 py-1 min-w-[160px]" style="left: {contextMenuPosition.x}px; top: {contextMenuPosition.y}px;" onclick={(e) => e.stopPropagation()} role="menu" tabindex="-1">
     <button class="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-base-200 transition-colors" onclick={handleOpenInNewTab} role="menuitem">↗ Open in new tab</button>
     <button class="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-base-200 transition-colors" onclick={handleDownload} role="menuitem">⬇ Download</button>
     <button class="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-base-200 transition-colors" onclick={handleCopyLink} role="menuitem">📋 Copy link</button>
@@ -248,7 +248,7 @@
 {#if showDetailsModal}
   <dialog class="modal modal-open">
     <div class="modal-box max-w-md">
-      <h3 class="font-bold text-lg mb-4">File Details</h3>
+      <h3 class="font-semibold mb-4">File Details</h3>
       <div class="space-y-3 text-sm">
         <div class="flex justify-between"><span class="text-base-content/60">Name</span><span class="font-medium truncate max-w-[200px]" title={attachment.file_name}>{attachment.file_name}</span></div>
         <div class="flex justify-between"><span class="text-base-content/60">Type</span><span class="font-medium">{attachment.file_type}</span></div>

package/src/lib/components/messaging/MessageAttachmentUpload.svelte

@@ -188,11 +188,11 @@
   {#if isDragging}
     <div
       bind:this={dropZoneRef}
-      class="fixed inset-0 z-50 bg-primary/10 backdrop-blur-sm flex items-center justify-center"
+      class="fixed inset-0 z-50 bg-primary/10 flex items-center justify-center"
       ondragenter={handleDragEnter} ondragleave={handleDragLeave} ondragover={handleDragOver} ondrop={handleDrop}
       role="region" aria-label="Drop zone for file uploads"
     >
-      <div class="bg-base-100 rounded-2xl border-2 border-dashed border-primary p-8 text-center shadow-xl">
+      <div class="bg-base-100 rounded-md border-2 border-dashed border-primary p-8 text-center">
         <div class="text-4xl mb-4">📎</div>
         <p class="text-lg font-medium text-primary">Drop files to upload</p>
         <p class="text-sm text-base-content/60 mt-2">Images, videos, and documents up to {maxSize}MB</p>
@@ -213,7 +213,7 @@
           </div>
 
           {#if att.uploading}
-            <div class="absolute inset-0 bg-black/50 flex items-center justify-center">
+            <div class="absolute inset-0 bg-[color-mix(in_oklch,#180042_55%,transparent)] flex items-center justify-center">
               <span class="loading loading-spinner loading-sm text-white"></span>
             </div>
           {/if}

package/src/lib/components/messaging/MessageInput.svelte

@@ -362,7 +362,7 @@
           {/if}
           <button type="button" class="absolute top-0.5 right-0.5 btn btn-circle btn-xs bg-base-100/80 hover:bg-error hover:text-error-content opacity-0 group-hover:opacity-100 transition-opacity" onclick={() => removeAttachment(att.id)} title="Remove">✕</button>
           {#if att.uploading}
-            <div class="absolute inset-0 bg-black/50 flex items-center justify-center"><span class="loading loading-spinner loading-xs text-white"></span></div>
+            <div class="absolute inset-0 bg-[color-mix(in_oklch,#180042_55%,transparent)] flex items-center justify-center"><span class="loading loading-spinner loading-xs text-white"></span></div>
           {/if}
         </div>
       {/each}

package/src/lib/components/messaging/MessageItem.svelte

@@ -183,7 +183,7 @@
 </script>
 
 <div
-  class="group flex gap-3 px-2 py-1 rounded relative transition-colors w-full text-left cursor-pointer {message.isPinned ? 'bg-warning/5 hover:bg-warning/10 border-l-4 border-warning pl-1' : 'hover:bg-base-200'}"
+  class="group flex gap-3 px-2 py-1 rounded relative transition-colors w-full text-left cursor-pointer {message.isPinned ? 'bg-warning/5 hover:bg-warning/10' : 'hover:bg-base-200'}"
   class:pt-2={!isConsecutive}
   data-message-id={message.id}
   onclick={handleMessageClick}
@@ -205,7 +205,7 @@
   <!-- Content -->
   <div class="flex-1 min-w-0 relative">
     <!-- Floating action buttons -->
-    <div class="absolute right-0 {!isConsecutive ? 'top-0' : 'top-1'} opacity-0 group-hover:opacity-100 transition-opacity bg-base-100/90 backdrop-blur-sm rounded-lg shadow-lg border border-base-300 p-1 z-10">
+    <div class="absolute right-0 {!isConsecutive ? 'top-0' : 'top-1'} opacity-0 group-hover:opacity-100 transition-opacity bg-base-200 rounded-lg border border-base-300 p-1 z-10">
       <div class="flex items-center">
         {#if reactionCallbacks && currentUserId}
           <div class="flex items-center gap-1 mr-1">
@@ -289,8 +289,11 @@
 
       <!-- Thread indicator -->
       {#if message.thread_reply_count && message.thread_reply_count > 0}
-        <button type="button" class="mt-2 p-2 bg-base-200/50 rounded-lg border-l-2 border-primary/30 hover:bg-base-300/50 transition-colors w-full text-left" onclick={(e) => { e.stopPropagation(); handleReply() }}>
+        <button type="button" class="mt-2 p-2 bg-base-200/50 rounded-lg hover:bg-base-300/50 transition-colors w-full text-left" onclick={(e) => { e.stopPropagation(); handleReply() }}>
           <div class="flex items-center gap-2 text-xs">
+            <svg class="w-3.5 h-3.5 text-primary/50 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+            </svg>
             {#if message.thread_last_sender}
               <Avatar name={message.thread_last_sender.full_name} avatarUrl={message.thread_last_sender.avatar_url} size="xs" />
             {/if}

package/src/lib/components/messaging/NotificationSettingsModal.svelte

@@ -121,7 +121,7 @@
   <dialog class="modal modal-open">
     <div class="modal-box max-w-md">
       <div class="flex items-center justify-between mb-4">
-        <h3 class="font-bold text-lg">
+        <h3 class="font-semibold">
           {type === 'global' ? 'Notification Settings' : `Notifications: #${channelName}`}
         </h3>
         <button class="btn btn-ghost btn-sm btn-circle" onclick={onclose}>✕</button>

package/src/lib/components/messaging/QuotedMessageDisplay.svelte

@@ -54,7 +54,7 @@
 
 <div class="quoted-message-display {mode} {className}">
   <div
-    class="flex items-start gap-2 p-3 bg-base-200/50 rounded-lg border-l-4 border-primary/40 relative"
+    class="flex items-start gap-2 p-3 bg-base-200/50 rounded-lg relative"
   >
     {#if mode === 'preview' && onremove}
       <button
@@ -66,6 +66,10 @@
       </button>
     {/if}
 
+    <svg class="w-3.5 h-3.5 text-primary/50 flex-shrink-0 mt-0.5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.293-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.293-3.996 5.849h3.983v10h-9.983z"/>
+    </svg>
+
     <div class="flex-shrink-0">
       <Avatar
         name={quotedMessage.senderName}
@@ -95,6 +99,7 @@
   .line-clamp-3 {
     display: -webkit-box;
     -webkit-line-clamp: 3;
+    line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
   }

package/src/lib/components/messaging/StartDMModal.svelte

@@ -50,7 +50,7 @@
   <dialog class="modal modal-open">
     <div class="modal-box max-w-md">
       <div class="flex items-center justify-between mb-4">
-        <h3 class="font-bold text-lg">New Message</h3>
+        <h3 class="font-semibold">New Message</h3>
         <button class="btn btn-ghost btn-sm btn-circle" onclick={handleClose}>✕</button>
       </div>
 

package/src/lib/components/pipeline/Pipeline.svelte

@@ -196,8 +196,8 @@
 	const sortedTableItems = $derived.by(() => {
 		if (!sortKey) return allItems;
 		return [...allItems].sort((a, b) => {
-			const av = (a as Record<string, unknown>)[sortKey] ?? '';
-			const bv = (b as Record<string, unknown>)[sortKey] ?? '';
+			const av = (a as unknown as Record<string, unknown>)[sortKey] ?? '';
+			const bv = (b as unknown as Record<string, unknown>)[sortKey] ?? '';
 			const cmp =
 				typeof av === 'number' && typeof bv === 'number'
 					? av - bv
@@ -236,7 +236,7 @@
 				day: 'numeric'
 			});
 		}
-		return String((item as Record<string, unknown>)[key] ?? '');
+		return String((item as unknown as Record<string, unknown>)[key] ?? '');
 	}
 </script>
 
@@ -245,7 +245,7 @@
 	{#if metrics && metrics.length > 0}
 		<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
 			{#each metrics as m}
-				<div class="stat bg-base-100 rounded-xl border border-base-300 p-3">
+				<div class="stat bg-base-100 rounded-md border border-base-300 p-3">
 					<div class="stat-title text-xs">{m.label}</div>
 					<div class="stat-value text-lg" style:color={m.color}>
 						{formatMetricValue(m)}

package/src/lib/components/pipeline/PipelineCard.svelte

@@ -37,7 +37,7 @@
 
 <button
 	type="button"
-	class="card card-compact bg-base-100 shadow-sm border cursor-pointer hover:shadow-md transition-shadow w-full text-left {isDragging ? 'opacity-50 rotate-2' : ''} {className}"
+	class="card card-compact bg-base-200 border cursor-pointer hover:bg-base-300/80 transition-colors w-full text-left {isDragging ? 'opacity-50 rotate-2' : ''} {className}"
 	style:border-color={colors.border}
 	onclick={() => onclick?.(item)}
 >

package/src/lib/components/pipeline/PipelineColumn.svelte

@@ -63,7 +63,7 @@
 </script>
 
 <div
-	class="flex flex-col rounded-xl border {className}"
+	class="flex flex-col rounded-md border {className}"
 	style:border-color={colors.border}
 	style:background-color={colors.bg}
 >
@@ -148,8 +148,13 @@
 				{#if emptyState}
 					{@render emptyState({ stage })}
 				{:else}
-					<div class="flex-1 flex items-center justify-center text-xs opacity-30 p-4">
-						No items
+					<div class="flex-1 flex items-center justify-center p-4 my-1">
+						<div class="w-full rounded-lg border border-dashed border-base-content/15 py-6 flex flex-col items-center gap-1.5">
+							<svg class="w-5 h-5 text-base-content/20" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+							</svg>
+							<span class="text-xs text-base-content/25">Empty</span>
+						</div>
 					</div>
 				{/if}
 			{/if}