@joewinke/jatui 0.1.25 → 0.1.26

package/dist/components/markup.js

@@ -0,0 +1,201 @@
+// Markup drawing primitives for construction drawing redlining
+// Adapted from JAT feedback annotation engine with cloud bubble tool added
+export var MARKUP_COLORS = [
+    "#ef4444",
+    "#eab308",
+    "#22c55e",
+    "#3b82f6",
+    "#ffffff",
+    "#111827",
+];
+export var DEFAULT_STROKE_WIDTH = 3;
+var _nextId = 1;
+export function nextShapeId() {
+    return _nextId++;
+}
+function drawArrow(ctx, shape) {
+    var start = shape.start, end = shape.end, color = shape.color, strokeWidth = shape.strokeWidth;
+    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
+    var angle = Math.atan2(end.y - start.y, end.x - start.x);
+    var headLen = 14;
+    var 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, shape) {
+    var start = shape.start, end = shape.end, color = shape.color, strokeWidth = shape.strokeWidth;
+    ctx.strokeStyle = color;
+    ctx.lineWidth = strokeWidth;
+    ctx.lineJoin = "round";
+    var x = Math.min(start.x, end.x);
+    var y = Math.min(start.y, end.y);
+    var w = Math.abs(end.x - start.x);
+    var h = Math.abs(end.y - start.y);
+    ctx.strokeRect(x, y, w, h);
+}
+function drawEllipse(ctx, shape) {
+    var start = shape.start, end = shape.end, color = shape.color, strokeWidth = shape.strokeWidth;
+    ctx.strokeStyle = color;
+    ctx.lineWidth = strokeWidth;
+    var cx = (start.x + end.x) / 2;
+    var cy = (start.y + end.y) / 2;
+    var rx = Math.abs(end.x - start.x) / 2;
+    var 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, shape) {
+    var start = shape.start, end = shape.end, color = shape.color, strokeWidth = shape.strokeWidth;
+    ctx.strokeStyle = color;
+    ctx.lineWidth = strokeWidth;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    var x = Math.min(start.x, end.x);
+    var y = Math.min(start.y, end.y);
+    var w = Math.abs(end.x - start.x);
+    var h = Math.abs(end.y - start.y);
+    if (w < 4 || h < 4)
+        return;
+    // Generate perimeter points, then draw arcs between them
+    var arcSize = Math.min(w, h, 30); // arc diameter adapts to shape size
+    var perimeter = 2 * (w + h);
+    var numArcs = Math.max(8, Math.round(perimeter / arcSize));
+    // Collect points along the rectangle perimeter
+    var points = [];
+    var segLengths = [w, h, w, h];
+    var segDirs = [
+        { dx: 1, dy: 0 },
+        { dx: 0, dy: 1 },
+        { dx: -1, dy: 0 },
+        { dx: 0, dy: -1 },
+    ];
+    var segStarts = [
+        { x: x, y: y },
+        { x: x + w, y: y },
+        { x: x + w, y: y + h },
+        { x: x, y: y + h },
+    ];
+    var totalLen = 0;
+    for (var _i = 0, segLengths_1 = segLengths; _i < segLengths_1.length; _i++) {
+        var l = segLengths_1[_i];
+        totalLen += l;
+    }
+    var step = totalLen / numArcs;
+    var dist = 0;
+    var segIdx = 0;
+    var segDist = 0;
+    for (var i = 0; i < numArcs; i++) {
+        var target = i * step;
+        while (dist + segLengths[segIdx] - segDist < target && segIdx < 3) {
+            dist += segLengths[segIdx] - segDist;
+            segIdx++;
+            segDist = 0;
+        }
+        var 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 (var i = 0; i < points.length; i++) {
+        var p1 = points[i];
+        var p2 = points[(i + 1) % points.length];
+        var mx = (p1.x + p2.x) / 2;
+        var my = (p1.y + p2.y) / 2;
+        // Bulge outward from center of rectangle
+        var cx = x + w / 2;
+        var cy = y + h / 2;
+        var dx = mx - cx;
+        var dy = my - cy;
+        var len = Math.sqrt(dx * dx + dy * dy) || 1;
+        var bulge = arcSize * 0.35;
+        var ctrlX = mx + (dx / len) * bulge;
+        var 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, shape) {
+    var points = shape.points, color = shape.color, strokeWidth = shape.strokeWidth;
+    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 (var i = 1; i < points.length; i++) {
+        ctx.lineTo(points[i].x, points[i].y);
+    }
+    ctx.stroke();
+}
+function drawText(ctx, shape) {
+    var position = shape.position, content = shape.content, color = shape.color, fontSize = shape.fontSize;
+    if (!content)
+        return;
+    ctx.font = "bold ".concat(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, shape) {
+    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, shapes) {
+    for (var _i = 0, shapes_1 = shapes; _i < shapes_1.length; _i++) {
+        var shape = shapes_1[_i];
+        renderShape(ctx, shape);
+    }
+}

package/dist/components/messaging/Avatar.svelte

@@ -0,0 +1,81 @@
+<!--
+  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/dist/components/messaging/Avatar.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    name: string;
+    avatarUrl?: string | null;
+    size?: 'xs' | 'small' | 'medium' | 'large';
+    showStatus?: boolean;
+    status?: 'online' | 'offline' | 'away' | 'busy';
+    class?: string;
+}
+declare const Avatar: import("svelte").Component<Props, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/components/messaging/ChannelInfoModal.svelte

@@ -0,0 +1,163 @@
+<!--
+  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/dist/components/messaging/ChannelInfoModal.svelte.d.ts

@@ -0,0 +1,18 @@
+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;
+}
+declare const ChannelInfoModal: import("svelte").Component<Props, {}, "">;
+type ChannelInfoModal = ReturnType<typeof ChannelInfoModal>;
+export default ChannelInfoModal;

package/dist/components/messaging/ChannelList.svelte

@@ -0,0 +1,107 @@
+<!--
+  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/dist/components/messaging/ChannelList.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Channel } from '../../types/messaging';
+interface Props {
+    channels: Channel[];
+    activeChannelId?: string | null;
+    onchannelselect?: (event: {
+        channelId: string;
+    }) => void;
+}
+declare const ChannelList: import("svelte").Component<Props, {}, "">;
+type ChannelList = ReturnType<typeof ChannelList>;
+export default ChannelList;

package/dist/components/messaging/ChannelMemberAvatarStack.svelte

@@ -0,0 +1,69 @@
+<!--
+  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>

package/dist/components/messaging/ChannelMemberAvatarStack.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { ChannelMember, PresenceState } from '../../types/messaging';
+interface Props {
+    members: ChannelMember[];
+    presenceState?: PresenceState;
+    maxVisible?: number;
+    size?: 'xs' | 'small' | 'medium' | 'large';
+    class?: string;
+}
+declare const ChannelMemberAvatarStack: import("svelte").Component<Props, {}, "">;
+type ChannelMemberAvatarStack = ReturnType<typeof ChannelMemberAvatarStack>;
+export default ChannelMemberAvatarStack;