@critical-path/svelte 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @critical-path/svelte
 
+## 0.5.0
+
+### Minor Changes
+
+- 1811922: Add attachment URL validation against large data URIs, sanitize undefined properties in FirebaseStore, provide direct attachment upload routes & SDK methods, and introduce TaskActivityState for combined comment & attachment threads.
+
+### Patch Changes
+
+- Updated dependencies [1811922]
+  - @critical-path/core@0.8.0
+  - @critical-path/client@0.4.0
+
 ## 0.4.0
 
 ### Minor Changes

package/README.md

@@ -2,7 +2,7 @@
 
 > **Svelte 5 Runes Reactive Integrations for Critical Path.**
 
-`@critical-path/svelte` provides Svelte 5 Runes reactive state classes and factories (`ProjectState`, `TaskState`) for building project management UIs in Svelte 5 and SvelteKit applications.
+`@critical-path/svelte` provides Svelte 5 Runes reactive state classes and factories (`ProjectState`, `TaskState`, `WorkflowState`, `CommentState`, `AttachmentState`, `TaskActivityState`) for building project management UIs in Svelte 5 and SvelteKit applications.
 
 ---
 
@@ -16,7 +16,9 @@ pnpm add @critical-path/svelte svelte@^5.0.0
 
 ---
 
-## 💡 Usage Example (Svelte 5 Runes)
+## 💡 Usage Examples (Svelte 5 Runes)
+
+### 1. Projects & Tasks
 
 ```svelte
 <script lang="ts">
@@ -50,8 +52,56 @@ pnpm add @critical-path/svelte svelte@^5.0.0
 {/if}
 ```
 
+### 2. Unified Task Activity & Threaded Discussions (`TaskActivityState`)
+
+Combines threaded comments with inline attachments (`attachment.commentId === comment.id`) and standalone attachments in a single reactive store:
+
+```svelte
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { createCriticalPathClient, createTaskActivityState } from '@critical-path/svelte';
+
+  const client = createCriticalPathClient({ baseUrl: '/api/critical-path' });
+  const activityState = createTaskActivityState(client, 'task_1');
+
+  onMount(() => {
+    activityState.fetch();
+  });
+
+  async function handleSend(text: string, fileUrl?: string) {
+    await activityState.addComment(
+      { content: text, authorId: 'user_1', authorType: 'user' },
+      fileUrl ? [{ filename: 'upload.png', url: fileUrl, uploaderId: 'user_1', mimeType: 'image/png', sizeBytes: 1024 }] : []
+    );
+  }
+</script>
+
+{#each activityState.threads as thread}
+  <div class="comment">
+    <p><strong>{thread.authorId}</strong>: {thread.content}</p>
+    
+    <!-- Inline comment attachments -->
+    {#if thread.attachments.length > 0}
+      <div class="attachments">
+        {#each thread.attachments as att}
+          <a href={att.url} target="_blank">{att.filename}</a>
+        {/each}
+      </div>
+    {/if}
+
+    <!-- Threaded replies -->
+    {#each thread.replies as reply}
+      <div class="reply">
+        <p>↪ {reply.authorId}: {reply.content}</p>
+      </div>
+    {/each}
+  </div>
+{/each}
+```
+
 ---
 
 ## 📄 License
 
 MIT © [Critical Path](https://github.com/Pixerate/Critical-Path)
+

package/dist/activity-state.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { CriticalPathClient } from '@critical-path/client';
+import type { Comment, Attachment } from '@critical-path/core';
+export interface ThreadedCommentWithAttachments extends Comment {
+    attachments: Attachment[];
+    replies: ThreadedCommentWithAttachments[];
+}
+export declare class TaskActivityState {
+    private client;
+    taskId?: string | undefined;
+    comments: Comment[];
+    attachments: Attachment[];
+    loading: boolean;
+    error: Error | null;
+    threads: ThreadedCommentWithAttachments[];
+    standaloneAttachments: Attachment[];
+    constructor(client: CriticalPathClient, taskId?: string | undefined);
+    fetch(taskId?: string): Promise<void>;
+    addComment(input: Omit<Comment, 'id' | 'taskId' | 'createdAt' | 'updatedAt'>, attachmentInputs?: Array<Omit<Attachment, 'id' | 'taskId' | 'commentId' | 'createdAt' | 'updatedAt'>>): Promise<{
+        comment: Comment;
+        attachments: Attachment[];
+    }>;
+    addAttachment(input: Omit<Attachment, 'id' | 'taskId' | 'createdAt' | 'updatedAt'>): Promise<Attachment>;
+    deleteComment(id: string): Promise<void>;
+    deleteAttachment(id: string): Promise<void>;
+}
+export declare function createTaskActivityState(client: CriticalPathClient, taskId?: string): TaskActivityState;
+//# sourceMappingURL=activity-state.svelte.d.ts.map

package/dist/activity-state.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"activity-state.svelte.d.ts","sourceRoot":"","sources":["../src/activity-state.svelte.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAE/D,MAAM,WAAW,8BAA+B,SAAQ,OAAO;IAC7D,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,OAAO,EAAE,8BAA8B,EAAE,CAAC;CAC3C;AAED,qBAAa,iBAAiB;IA6ChB,OAAO,CAAC,MAAM;IAA6B,MAAM,CAAC,EAAE,MAAM;IA5CtE,QAAQ,YAAyB;IACjC,WAAW,eAA4B;IACvC,OAAO,UAA0B;IACjC,KAAK,eAA8B;IAEnC,OAAO,mCAiCJ;IAEH,qBAAqB,eAElB;gBAEiB,MAAM,EAAE,kBAAkB,EAAS,MAAM,CAAC,EAAE,MAAM,YAAA;IAEhE,KAAK,CAAC,MAAM,CAAC,EAAE,MAAM;IAwBrB,UAAU,CACd,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,GAAG,QAAQ,GAAG,WAAW,GAAG,WAAW,CAAC,EACjE,gBAAgB,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,GAAG,QAAQ,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC,CAAC;;;;IAiCjG,aAAa,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,GAAG,QAAQ,GAAG,WAAW,GAAG,WAAW,CAAC;IAelF,aAAa,CAAC,EAAE,EAAE,MAAM;IAWxB,gBAAgB,CAAC,EAAE,EAAE,MAAM;CAUlC;AAED,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,kBAAkB,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,iBAAiB,CAEtG"}

package/dist/index.d.ts

@@ -5,4 +5,5 @@ export * from './task-state.svelte.js';
 export * from './workflow-state.svelte.js';
 export * from './comment-state.svelte.js';
 export * from './attachment-state.svelte.js';
+export * from './activity-state.svelte.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE/E,wBAAgB,wBAAwB,CAAC,OAAO,EAAE,aAAa,GAAG,kBAAkB,CAEnF;AAED,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,8BAA8B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE/E,wBAAgB,wBAAwB,CAAC,OAAO,EAAE,aAAa,GAAG,kBAAkB,CAEnF;AAED,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,4BAA4B,CAAC"}

package/dist/index.js

@@ -383,9 +383,141 @@ function d(e, t) {
 	return new u(e, t);
 }
 //#endregion
+//#region src/activity-state.svelte.ts
+var f = class {
+	client;
+	taskId;
+	#e = t.state(t.proxy([]));
+	get comments() {
+		return t.get(this.#e);
+	}
+	set comments(e) {
+		t.set(this.#e, e, !0);
+	}
+	#t = t.state(t.proxy([]));
+	get attachments() {
+		return t.get(this.#t);
+	}
+	set attachments(e) {
+		t.set(this.#t, e, !0);
+	}
+	#n = t.state(!1);
+	get loading() {
+		return t.get(this.#n);
+	}
+	set loading(e) {
+		t.set(this.#n, e, !0);
+	}
+	#r = t.state(null);
+	get error() {
+		return t.get(this.#r);
+	}
+	set error(e) {
+		t.set(this.#r, e, !0);
+	}
+	#i = t.derived(() => {
+		let e = /* @__PURE__ */ new Map(), t = [], n = /* @__PURE__ */ new Map();
+		for (let e of this.attachments) e.commentId && (n.has(e.commentId) || n.set(e.commentId, []), n.get(e.commentId).push(e));
+		for (let t of this.comments) e.set(t.id, {
+			...t,
+			attachments: n.get(t.id) || [],
+			replies: []
+		});
+		for (let n of this.comments) {
+			let r = e.get(n.id);
+			n.parentId && e.has(n.parentId) ? e.get(n.parentId).replies.push(r) : t.push(r);
+		}
+		return t;
+	});
+	get threads() {
+		return t.get(this.#i);
+	}
+	set threads(e) {
+		t.set(this.#i, e);
+	}
+	#a = t.derived(() => this.attachments.filter((e) => !e.commentId));
+	get standaloneAttachments() {
+		return t.get(this.#a);
+	}
+	set standaloneAttachments(e) {
+		t.set(this.#a, e);
+	}
+	constructor(e, t) {
+		this.client = e, this.taskId = t;
+	}
+	async fetch(e) {
+		let t = e || this.taskId;
+		if (!t) {
+			this.comments = [], this.attachments = [];
+			return;
+		}
+		this.taskId = t, this.loading = !0, this.error = null;
+		try {
+			let [e, n] = await Promise.all([this.client.getComments(t), this.client.getAttachments({ taskId: t })]);
+			this.comments = e, this.attachments = n;
+		} catch (e) {
+			this.error = e instanceof Error ? e : Error(String(e));
+		} finally {
+			this.loading = !1;
+		}
+	}
+	async addComment(e, t) {
+		if (!this.taskId) throw Error("TaskActivityState requires a taskId to add comments.");
+		try {
+			let n = await this.client.addComment({
+				...e,
+				taskId: this.taskId
+			}), r = [];
+			return t && t.length > 0 && (r = await Promise.all(t.map((e) => this.client.createAttachment({
+				...e,
+				taskId: this.taskId,
+				commentId: n.id
+			})))), this.comments = [...this.comments, n], r.length > 0 && (this.attachments = [...this.attachments, ...r]), {
+				comment: n,
+				attachments: r
+			};
+		} catch (e) {
+			let t = e instanceof Error ? e : Error(String(e));
+			throw this.error = t, t;
+		}
+	}
+	async addAttachment(e) {
+		if (!this.taskId) throw Error("TaskActivityState requires a taskId to add attachments.");
+		try {
+			let t = await this.client.createAttachment({
+				...e,
+				taskId: this.taskId
+			});
+			return this.attachments = [t, ...this.attachments], t;
+		} catch (e) {
+			let t = e instanceof Error ? e : Error(String(e));
+			throw this.error = t, t;
+		}
+	}
+	async deleteComment(e) {
+		try {
+			await this.client.deleteComment(e), this.comments = this.comments.filter((t) => t.id !== e);
+		} catch (e) {
+			let t = e instanceof Error ? e : Error(String(e));
+			throw this.error = t, t;
+		}
+	}
+	async deleteAttachment(e) {
+		try {
+			await this.client.deleteAttachment(e), this.attachments = this.attachments.filter((t) => t.id !== e);
+		} catch (e) {
+			let t = e instanceof Error ? e : Error(String(e));
+			throw this.error = t, t;
+		}
+	}
+};
+function p(e, t) {
+	return new f(e, t);
+}
+//#endregion
 //#region src/index.ts
-function f(t) {
+function m(t) {
 	return new e(t);
 }
 //#endregion
-export { u as AttachmentState, c as CommentState, n as ProjectState, i as TaskState, o as WorkflowState, d as createAttachmentState, l as createCommentState, f as createCriticalPathClient, r as createProjectState, a as createTaskState, s as createWorkflowState };
+export { u as AttachmentState, c as CommentState, n as ProjectState, f as TaskActivityState, i as TaskState, o as WorkflowState, d as createAttachmentState, l as createCommentState, m as createCriticalPathClient, r as createProjectState, p as createTaskActivityState, a as createTaskState, s as createWorkflowState };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@critical-path/svelte",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Svelte 5 Runes state and reactive integrations for Critical Path headless project management framework",
   "author": "Jack James",
   "license": "MIT",
@@ -18,8 +18,8 @@
     }
   },
   "dependencies": {
-    "@critical-path/client": "0.3.0",
-    "@critical-path/core": "0.7.0"
+    "@critical-path/client": "0.4.0",
+    "@critical-path/core": "0.8.0"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"

package/src/activity-state.svelte.ts

@@ -0,0 +1,156 @@
+/// <reference types="svelte" />
+import type { CriticalPathClient } from '@critical-path/client';
+import type { Comment, Attachment } from '@critical-path/core';
+
+export interface ThreadedCommentWithAttachments extends Comment {
+  attachments: Attachment[];
+  replies: ThreadedCommentWithAttachments[];
+}
+
+export class TaskActivityState {
+  comments = $state<Comment[]>([]);
+  attachments = $state<Attachment[]>([]);
+  loading = $state<boolean>(false);
+  error = $state<Error | null>(null);
+
+  threads = $derived.by(() => {
+    const map = new Map<string, ThreadedCommentWithAttachments>();
+    const roots: ThreadedCommentWithAttachments[] = [];
+
+    // Group attachments by commentId
+    const attachmentsByComment = new Map<string, Attachment[]>();
+    for (const a of this.attachments) {
+      if (a.commentId) {
+        if (!attachmentsByComment.has(a.commentId)) {
+          attachmentsByComment.set(a.commentId, []);
+        }
+        attachmentsByComment.get(a.commentId)!.push(a);
+      }
+    }
+
+    for (const c of this.comments) {
+      map.set(c.id, {
+        ...c,
+        attachments: attachmentsByComment.get(c.id) || [],
+        replies: []
+      });
+    }
+
+    for (const c of this.comments) {
+      const threaded = map.get(c.id)!;
+      if (c.parentId && map.has(c.parentId)) {
+        map.get(c.parentId)!.replies.push(threaded);
+      } else {
+        roots.push(threaded);
+      }
+    }
+
+    return roots;
+  });
+
+  standaloneAttachments = $derived.by(() => {
+    return this.attachments.filter((a) => !a.commentId);
+  });
+
+  constructor(private client: CriticalPathClient, public taskId?: string) {}
+
+  async fetch(taskId?: string) {
+    const targetTaskId = taskId || this.taskId;
+    if (!targetTaskId) {
+      this.comments = [];
+      this.attachments = [];
+      return;
+    }
+    this.taskId = targetTaskId;
+    this.loading = true;
+    this.error = null;
+    try {
+      const [comments, attachments] = await Promise.all([
+        this.client.getComments(targetTaskId),
+        this.client.getAttachments({ taskId: targetTaskId })
+      ]);
+      this.comments = comments;
+      this.attachments = attachments;
+    } catch (err) {
+      this.error = err instanceof Error ? err : new Error(String(err));
+    } finally {
+      this.loading = false;
+    }
+  }
+
+  async addComment(
+    input: Omit<Comment, 'id' | 'taskId' | 'createdAt' | 'updatedAt'>,
+    attachmentInputs?: Array<Omit<Attachment, 'id' | 'taskId' | 'commentId' | 'createdAt' | 'updatedAt'>>
+  ) {
+    if (!this.taskId) {
+      throw new Error('TaskActivityState requires a taskId to add comments.');
+    }
+    try {
+      const comment = await this.client.addComment({ ...input, taskId: this.taskId });
+      let createdAttachments: Attachment[] = [];
+
+      if (attachmentInputs && attachmentInputs.length > 0) {
+        createdAttachments = await Promise.all(
+          attachmentInputs.map((att) =>
+            this.client.createAttachment({
+              ...att,
+              taskId: this.taskId,
+              commentId: comment.id
+            })
+          )
+        );
+      }
+
+      this.comments = [...this.comments, comment];
+      if (createdAttachments.length > 0) {
+        this.attachments = [...this.attachments, ...createdAttachments];
+      }
+      return { comment, attachments: createdAttachments };
+    } catch (err) {
+      const errorObj = err instanceof Error ? err : new Error(String(err));
+      this.error = errorObj;
+      throw errorObj;
+    }
+  }
+
+  async addAttachment(input: Omit<Attachment, 'id' | 'taskId' | 'createdAt' | 'updatedAt'>) {
+    if (!this.taskId) {
+      throw new Error('TaskActivityState requires a taskId to add attachments.');
+    }
+    try {
+      const created = await this.client.createAttachment({ ...input, taskId: this.taskId });
+      this.attachments = [created, ...this.attachments];
+      return created;
+    } catch (err) {
+      const errorObj = err instanceof Error ? err : new Error(String(err));
+      this.error = errorObj;
+      throw errorObj;
+    }
+  }
+
+  async deleteComment(id: string) {
+    try {
+      await this.client.deleteComment(id);
+      this.comments = this.comments.filter((c) => c.id !== id);
+    } catch (err) {
+      const errorObj = err instanceof Error ? err : new Error(String(err));
+      this.error = errorObj;
+      throw errorObj;
+    }
+  }
+
+  async deleteAttachment(id: string) {
+    try {
+      await this.client.deleteAttachment(id);
+      this.attachments = this.attachments.filter((a) => a.id !== id);
+    } catch (err) {
+      const errorObj = err instanceof Error ? err : new Error(String(err));
+      this.error = errorObj;
+      throw errorObj;
+    }
+  }
+}
+
+export function createTaskActivityState(client: CriticalPathClient, taskId?: string): TaskActivityState {
+  return new TaskActivityState(client, taskId);
+}

package/src/index.test.ts

@@ -10,10 +10,12 @@ import {
   CommentState,
   createCommentState,
   AttachmentState,
-  createAttachmentState
+  createAttachmentState,
+  TaskActivityState,
+  createTaskActivityState
 } from './index.js';
 import type { CriticalPathClient } from '@critical-path/client';
-import type { Project, Task, Workflow } from '@critical-path/core';
+import type { Project, Task, Workflow, Comment, Attachment } from '@critical-path/core';
 
 describe('@critical-path/svelte Svelte 5 Runes Test Suite', () => {
   it('exports client factory and Svelte 5 Runes state factories', () => {
@@ -21,9 +23,15 @@ describe('@critical-path/svelte Svelte 5 Runes Test Suite', () => {
     expect(createProjectState).toBeDefined();
     expect(createTaskState).toBeDefined();
     expect(createWorkflowState).toBeDefined();
+    expect(createCommentState).toBeDefined();
+    expect(createAttachmentState).toBeDefined();
+    expect(createTaskActivityState).toBeDefined();
     expect(ProjectState).toBeDefined();
     expect(TaskState).toBeDefined();
     expect(WorkflowState).toBeDefined();
+    expect(CommentState).toBeDefined();
+    expect(AttachmentState).toBeDefined();
+    expect(TaskActivityState).toBeDefined();
   });
 
   describe('WorkflowState', () => {
@@ -252,4 +260,51 @@ describe('@critical-path/svelte Svelte 5 Runes Test Suite', () => {
       expect(attachmentState.data).toEqual([]);
     });
   });
+
+  describe('TaskActivityState', () => {
+    it('fetches comments and attachments and unifies them into threads with attachments', async () => {
+      const mockComment: Comment = {
+        id: 'cmt_1',
+        taskId: 'task_1',
+        content: 'Comment with attachment',
+        authorId: 'u1',
+        authorType: 'user',
+        createdAt: '2026-01-01',
+        updatedAt: '2026-01-01'
+      };
+
+      const mockAttachment: Attachment = {
+        id: 'att_1',
+        taskId: 'task_1',
+        commentId: 'cmt_1',
+        filename: 'screenshot.png',
+        mimeType: 'image/png',
+        sizeBytes: 2048,
+        url: 'https://storage.example.com/screenshot.png',
+        uploaderId: 'u1',
+        uploaderType: 'user',
+        createdAt: '2026-01-01',
+        updatedAt: '2026-01-01'
+      };
+
+      const mockClient = {
+        getComments: vi.fn().mockResolvedValue([mockComment]),
+        getAttachments: vi.fn().mockResolvedValue([mockAttachment]),
+        addComment: vi.fn().mockResolvedValue(mockComment),
+        createAttachment: vi.fn().mockResolvedValue(mockAttachment),
+        deleteComment: vi.fn().mockResolvedValue(true),
+        deleteAttachment: vi.fn().mockResolvedValue(true)
+      } as unknown as CriticalPathClient;
+
+      const activityState = createTaskActivityState(mockClient, 'task_1');
+      await activityState.fetch();
+
+      expect(activityState.comments).toEqual([mockComment]);
+      expect(activityState.attachments).toEqual([mockAttachment]);
+      expect(activityState.threads).toHaveLength(1);
+      expect(activityState.threads[0].attachments).toEqual([mockAttachment]);
+      expect(activityState.standaloneAttachments).toHaveLength(0);
+    });
+  });
 });
+

package/src/index.ts

@@ -9,4 +9,5 @@ export * from './task-state.svelte.js';
 export * from './workflow-state.svelte.js';
 export * from './comment-state.svelte.js';
 export * from './attachment-state.svelte.js';
+export * from './activity-state.svelte.js';