@joewinke/jatui 0.1.23 → 0.1.25

package/src/lib/components/markup.ts

@@ -1,287 +0,0 @@
-// 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/Avatar.svelte

@@ -1,81 +0,0 @@
-<!--
-  Simple Avatar Component for Messaging
-
-  Shows user avatar image with fallback to initials.
-  Used internally by messaging components.
--->
-
-<script lang="ts">
-  interface Props {
-    name: string
-    avatarUrl?: string | null
-    size?: 'xs' | 'small' | 'medium' | 'large'
-    showStatus?: boolean
-    status?: 'online' | 'offline' | 'away' | 'busy'
-    class?: string
-  }
-
-  let {
-    name,
-    avatarUrl = null,
-    size = 'small',
-    showStatus = false,
-    status = 'offline',
-    class: className = '',
-  }: Props = $props()
-
-  const sizeClasses: Record<string, string> = {
-    xs: 'w-5 h-5 text-[10px]',
-    small: 'w-8 h-8 text-xs',
-    medium: 'w-10 h-10 text-sm',
-    large: 'w-12 h-12 text-base',
-  }
-
-  const statusDotSize: Record<string, string> = {
-    xs: 'w-1.5 h-1.5',
-    small: 'w-2 h-2',
-    medium: 'w-2.5 h-2.5',
-    large: 'w-3 h-3',
-  }
-
-  const statusColors: Record<string, string> = {
-    online: 'bg-success',
-    offline: 'bg-base-content/30',
-    away: 'bg-warning',
-    busy: 'bg-error',
-  }
-
-  function getInitials(fullName: string): string {
-    return fullName
-      .split(' ')
-      .map((part) => part[0])
-      .filter(Boolean)
-      .slice(0, 2)
-      .join('')
-      .toUpperCase()
-  }
-
-  const initials = $derived(getInitials(name))
-</script>
-
-<div class="relative inline-flex flex-shrink-0 {className}">
-  {#if avatarUrl}
-    <img
-      src={avatarUrl}
-      alt={name}
-      class="rounded-full object-cover {sizeClasses[size]}"
-    />
-  {:else}
-    <div
-      class="rounded-full bg-neutral text-neutral-content flex items-center justify-center font-medium {sizeClasses[size]}"
-    >
-      {initials}
-    </div>
-  {/if}
-
-  {#if showStatus}
-    <span
-      class="absolute bottom-0 right-0 rounded-full border-2 border-base-100 {statusDotSize[size]} {statusColors[status]}"
-    ></span>
-  {/if}
-</div>

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

@@ -1,163 +0,0 @@
-<!--
-  ChannelInfoModal Component
-
-  Displays channel information and allows admins to edit channel details.
-  All updates via callbacks.
--->
-
-<script lang="ts">
-  import type { Channel, ChannelCallbacks } from '../../types/messaging'
-
-  interface Props {
-    channel: Channel & { memberCount?: number; createdBy?: string; creatorName?: string }
-    currentUserRole: 'admin' | 'moderator' | 'member'
-    open: boolean
-    channelCallbacks?: ChannelCallbacks
-    onclose?: () => void
-    onchannelupdate?: (updatedChannel: Channel) => void
-    onchanneldelete?: (channelId: string) => void
-    onmanagemembers?: () => void
-  }
-
-  let {
-    channel,
-    currentUserRole,
-    open = false,
-    channelCallbacks,
-    onclose,
-    onchannelupdate,
-    onchanneldelete,
-    onmanagemembers,
-  }: Props = $props()
-
-  let isEditing = $state(false)
-  let editName = $state('')
-  let editDescription = $state('')
-  let saving = $state(false)
-  let showDeleteConfirm = $state(false)
-  let error = $state<string | null>(null)
-
-  const isAdmin = $derived(currentUserRole === 'admin')
-
-  function startEdit() {
-    editName = channel.name
-    editDescription = channel.description || ''
-    isEditing = true
-  }
-
-  async function saveEdit() {
-    if (!channelCallbacks || !editName.trim()) return
-    saving = true
-    error = null
-    try {
-      const updated = await channelCallbacks.updateChannel(channel.id, {
-        name: editName.trim(),
-        description: editDescription.trim() || undefined,
-      })
-      onchannelupdate?.(updated)
-      isEditing = false
-    } catch (err) {
-      error = err instanceof Error ? err.message : 'Failed to update channel'
-    } finally {
-      saving = false
-    }
-  }
-
-  async function handleDelete() {
-    if (!channelCallbacks) return
-    try {
-      await channelCallbacks.deleteChannel(channel.id)
-      onchanneldelete?.(channel.id)
-      onclose?.()
-    } catch (err) {
-      error = err instanceof Error ? err.message : 'Failed to delete channel'
-    }
-  }
-
-  function formatDate(dateString: string): string {
-    return new Date(dateString).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })
-  }
-</script>
-
-{#if open}
-  <dialog class="modal modal-open">
-    <div class="modal-box max-w-md">
-      <div class="flex items-center justify-between mb-4">
-        <h3 class="font-semibold">
-          {channel.emoji || '#'} {channel.name}
-        </h3>
-        <button class="btn btn-ghost btn-sm btn-circle" onclick={onclose}>✕</button>
-      </div>
-
-      {#if error}
-        <div class="alert alert-error mb-4"><span class="text-sm">{error}</span></div>
-      {/if}
-
-      {#if isEditing}
-        <div class="space-y-4">
-          <div>
-            <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="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">
-            <button class="btn btn-primary btn-sm" onclick={saveEdit} disabled={saving || !editName.trim()}>
-              {#if saving}<span class="loading loading-spinner loading-xs"></span>{/if}
-              Save
-            </button>
-            <button class="btn btn-ghost btn-sm" onclick={() => (isEditing = false)}>Cancel</button>
-          </div>
-        </div>
-      {:else}
-        <div class="space-y-4">
-          <div>
-            <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-[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-[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">
-            {#if isAdmin}
-              <button class="btn btn-sm btn-ghost" onclick={startEdit}>✏ Edit</button>
-            {/if}
-            {#if onmanagemembers}
-              <button class="btn btn-sm btn-ghost" onclick={onmanagemembers}>👥 Members</button>
-            {/if}
-            {#if isAdmin}
-              {#if showDeleteConfirm}
-                <div class="flex items-center gap-2">
-                  <span class="text-sm text-error">Delete this channel?</span>
-                  <button class="btn btn-sm btn-error" onclick={handleDelete}>Confirm</button>
-                  <button class="btn btn-sm btn-ghost" onclick={() => (showDeleteConfirm = false)}>Cancel</button>
-                </div>
-              {:else}
-                <button class="btn btn-sm btn-ghost text-error" onclick={() => (showDeleteConfirm = true)}>🗑 Delete</button>
-              {/if}
-            {/if}
-          </div>
-        </div>
-      {/if}
-
-      <div class="modal-action">
-        <button class="btn btn-ghost" onclick={onclose}>Close</button>
-      </div>
-    </div>
-    <form method="dialog" class="modal-backdrop">
-      <button onclick={onclose}>close</button>
-    </form>
-  </dialog>
-{/if}

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

@@ -1,107 +0,0 @@
-<!--
-  ChannelList Component
-
-  Displays list of channels with unread counts.
-  Purely presentational — receives channels via props.
--->
-
-<script lang="ts">
-  import type { Channel } from '../../types/messaging'
-
-  interface Props {
-    channels: Channel[]
-    activeChannelId?: string | null
-    onchannelselect?: (event: { channelId: string }) => void
-  }
-
-  let {
-    channels = [],
-    activeChannelId = null,
-    onchannelselect,
-  }: Props = $props()
-
-  function selectChannel(channelId: string) {
-    onchannelselect?.({ channelId })
-  }
-
-  function getChannelIconColor(type: string) {
-    switch (type) {
-      case 'private': return 'text-warning'
-      case 'direct': return 'text-info'
-      default: return 'text-base-content/50'
-    }
-  }
-
-  const sortedChannels = $derived(
-    [...(channels || [])].sort((a, b) => {
-      const typeOrder = { public: 0, private: 1, direct: 2 } as Record<string, number>
-      const aOrder = typeOrder[a.type] ?? 3
-      const bOrder = typeOrder[b.type] ?? 3
-      if (aOrder !== bOrder) return aOrder - bOrder
-      return a.name.localeCompare(b.name)
-    }),
-  )
-</script>
-
-<div class="space-y-1">
-  {#each sortedChannels as channel}
-    {@const iconColor = getChannelIconColor(channel.type)}
-
-    <button
-      class="w-full flex items-center gap-2 px-2 py-1.5 text-left rounded hover:bg-base-300 transition-colors group"
-      class:bg-primary={activeChannelId === channel.id}
-      class:text-primary-content={activeChannelId === channel.id}
-      class:font-medium={activeChannelId === channel.id}
-      onclick={() => selectChannel(channel.id)}
-    >
-      <!-- Channel icon: emoji, lock, users, or # -->
-      <span
-        class="w-4 h-4 flex-shrink-0 text-sm flex items-center justify-center {activeChannelId === channel.id ? 'text-primary-content' : iconColor}"
-      >
-        {#if channel.type === 'private'}
-          🔒
-        {:else if channel.type === 'direct'}
-          👥
-        {:else}
-          {channel.emoji || '#'}
-        {/if}
-      </span>
-
-      <div class="flex-1 min-w-0">
-        <div class="flex items-center justify-between">
-          <span class="text-sm truncate">
-            {channel.name}
-          </span>
-
-          {#if channel.unreadCount && channel.unreadCount > 0}
-            <span class="badge badge-error badge-xs text-error-content">
-              {channel.unreadCount > 99 ? '99+' : channel.unreadCount}
-            </span>
-          {/if}
-        </div>
-
-        {#if channel.description && activeChannelId !== channel.id}
-          <div class="text-xs text-base-content/50 truncate">
-            {channel.description}
-          </div>
-        {/if}
-      </div>
-
-      <!-- Admin indicator -->
-      {#if channel.memberRole === 'admin'}
-        <div
-          class="w-2 h-2 rounded-full bg-warning opacity-0 group-hover:opacity-100 transition-opacity"
-          title="Channel Admin"
-        ></div>
-      {/if}
-    </button>
-  {/each}
-
-  {#if channels.length === 0}
-    <div class="text-center py-8 text-base-content/50">
-      <div class="text-2xl mb-2">#</div>
-      <div class="text-sm">No channels yet</div>
-      <div class="text-xs">Create one to get started</div>
-    </div>
-  {/if}
-</div>

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

@@ -1,69 +0,0 @@
-<!--
-  ChannelMemberAvatarStack Component
-
-  Displays a stack of member avatars with overflow count.
-  Purely presentational — no backend dependencies.
--->
-
-<script lang="ts">
-  import type { ChannelMember, PresenceState } from '../../types/messaging'
-  import Avatar from './Avatar.svelte'
-
-  interface Props {
-    members: ChannelMember[]
-    presenceState?: PresenceState
-    maxVisible?: number
-    size?: 'xs' | 'small' | 'medium' | 'large'
-    class?: string
-  }
-
-  let {
-    members = [],
-    presenceState = {},
-    maxVisible = 4,
-    size = 'small',
-    class: className = '',
-  }: Props = $props()
-
-  const visibleMembers = $derived(members.slice(0, maxVisible))
-  const remainingCount = $derived(Math.max(0, members.length - maxVisible))
-
-  function getStatus(member: ChannelMember): 'online' | 'offline' | 'away' | 'busy' {
-    const presence = presenceState[member.userId]
-    if (presence?.status === 'online' || presence?.status === 'available') {
-      return 'online'
-    }
-    return 'offline'
-  }
-
-  const overflowSize: Record<string, string> = {
-    xs: 'w-5 h-5 text-[8px]',
-    small: 'w-8 h-8 text-xs',
-    medium: 'w-10 h-10 text-sm',
-    large: 'w-12 h-12 text-base',
-  }
-</script>
-
-<div class="flex -space-x-2 {className}">
-  {#each visibleMembers as member (member.id)}
-    <div class="border-2 border-base-100 rounded-full">
-      <Avatar
-        name={member.fullName}
-        avatarUrl={member.avatarUrl}
-        {size}
-        showStatus={true}
-        status={getStatus(member)}
-      />
-    </div>
-  {/each}
-
-  {#if remainingCount > 0}
-    <div class="border-2 border-base-100 rounded-full">
-      <div
-        class="bg-neutral text-neutral-content rounded-full flex items-center justify-center {overflowSize[size]}"
-      >
-        <span class="font-bold">+{remainingCount}</span>
-      </div>
-    </div>
-  {/if}
-</div>