@heyramzi/ui 2.0.1 → 2.1.0

package/src/{tasks/record → record}/project-list.svelte

@@ -2,11 +2,11 @@
 // =========================
 // IMPORTS
 // =========================
-import { cn } from "../../lib/utils.js";
-import { Progress } from "../../shadcn/progress/index.js";
-import { TONE_TEXT } from "../../lib/tone.js";
-import StatusBadge from "../status-badge.svelte";
-import { todayIso } from "../dates.js";
+import { cn } from "../lib/utils.js";
+import { Progress } from "../shadcn/progress/index.js";
+import { TONE_TEXT } from "../lib/tone.js";
+import StatusBadge from "../status/status-badge.svelte";
+import { todayIso } from "../tasks/dates.js";
 import { formatMoney, formatRange } from "./format.js";
 import {
 	resolveLabels,

package/src/{tasks/record → record}/record-demo.svelte

@@ -3,10 +3,10 @@
 // IMPORTS
 // =========================
 import { DotsThree, NotePencil } from "phosphor-svelte";
-import { SegmentedFilter } from "../../components/segmented/index.js";
-import { Button } from "../../shadcn/button/index.js";
-import { Input } from "../../shadcn/input/index.js";
-import * as Tabs from "../../shadcn/tabs/index.js";
+import { SegmentedFilter } from "../components/segmented/index.js";
+import { Button } from "../shadcn/button/index.js";
+import { Input } from "../shadcn/input/index.js";
+import * as Tabs from "../shadcn/tabs/index.js";
 import RecordShell from "./record-shell.svelte";
 import RecordHeader from "./record-header.svelte";
 import WhereWeAre from "./where-we-are.svelte";

package/src/{tasks/record → record}/record-header.svelte

@@ -4,9 +4,9 @@
 // =========================
 import type { Snippet } from "svelte";
 import { CaretLeft } from "phosphor-svelte";
-import { cn } from "../../lib/utils.js";
-import type { Tone } from "../../lib/tone.js";
-import StatusBadge from "../status-badge.svelte";
+import { cn } from "../lib/utils.js";
+import type { Tone } from "../lib/tone.js";
+import StatusBadge from "../status/status-badge.svelte";
 import { gutterClass } from "./gutter.js";
 
 // =========================

package/src/{tasks/record → record}/record-shell.svelte

@@ -4,10 +4,10 @@
 // =========================
 import type { Snippet } from "svelte";
 import { CaretRight } from "phosphor-svelte";
-import { cn } from "../../lib/utils.js";
-import { AnimatedTabs, type TabDef } from "../../components/segmented/index.js";
-import * as Sheet from "../../shadcn/sheet/index.js";
-import { Progress } from "../../shadcn/progress/index.js";
+import { cn } from "../lib/utils.js";
+import { AnimatedTabs, type TabDef } from "../components/segmented/index.js";
+import * as Sheet from "../shadcn/sheet/index.js";
+import { Progress } from "../shadcn/progress/index.js";
 import { gutterClass } from "./gutter.js";
 import { resolveLabels, type RecordLabels } from "./types.js";
 

package/src/{tasks/record → record}/record-stats.svelte

@@ -2,8 +2,8 @@
 // =========================
 // IMPORTS
 // =========================
-import { cn } from "../../lib/utils.js";
-import type { PanelStat } from "../side-panel-types.js";
+import { cn } from "../lib/utils.js";
+import type { PanelStat } from "../panel/side-panel-types.js";
 import { gutterClass } from "./gutter.js";
 
 // =========================

package/src/{tasks/record → record}/record-timeline.svelte

@@ -5,12 +5,12 @@
 import type { Snippet } from "svelte";
 import { Circle } from "phosphor-svelte";
 import { SvelteSet } from "svelte/reactivity";
-import { cn } from "../../lib/utils.js";
-import { Button } from "../../shadcn/button/index.js";
-import { Badge } from "../../shadcn/badge/index.js";
-import { Skeleton } from "../../shadcn/skeleton/index.js";
-import { SegmentedFilter } from "../../components/segmented/index.js";
-import { TONE_ICON } from "../../lib/tone.js";
+import { cn } from "../lib/utils.js";
+import { Button } from "../shadcn/button/index.js";
+import { Badge } from "../shadcn/badge/index.js";
+import { Skeleton } from "../shadcn/skeleton/index.js";
+import { SegmentedFilter } from "../components/segmented/index.js";
+import { TONE_ICON } from "../lib/tone.js";
 import { DEFAULT_RECORD_FILTERS, DEFAULT_RECORD_KINDS } from "./kinds.js";
 import { formatDayHeader, formatMoney, formatTime } from "./format.js";
 import {

package/src/{tasks/record → record}/steps-rail.svelte

@@ -12,13 +12,13 @@ import {
 	EyeSlash,
 	PencilSimple,
 } from "phosphor-svelte";
-import { cn } from "../../lib/utils.js";
-import { Button } from "../../shadcn/button/index.js";
-import { Input } from "../../shadcn/input/index.js";
-import { Skeleton } from "../../shadcn/skeleton/index.js";
-import * as Popover from "../../shadcn/popover/index.js";
-import * as ContextMenu from "../../shadcn/context-menu/index.js";
-import { todayIso } from "../dates.js";
+import { cn } from "../lib/utils.js";
+import { Button } from "../shadcn/button/index.js";
+import { Input } from "../shadcn/input/index.js";
+import { Skeleton } from "../shadcn/skeleton/index.js";
+import * as Popover from "../shadcn/popover/index.js";
+import * as ContextMenu from "../shadcn/context-menu/index.js";
+import { todayIso } from "../tasks/dates.js";
 import { formatRange } from "./format.js";
 import {
 	groupSteps,

package/src/{tasks/record → record}/types.ts

@@ -1,7 +1,7 @@
 // The view types of a client or project record. Plain data in, nothing loaded:
 // the host maps its own rows onto these and passes them down.
-import type { PhosphorIcon } from "../../lib/icon-types.js";
-import type { Tone } from "../../lib/tone.js";
+import type { PhosphorIcon } from "../lib/icon-types.js";
+import type { Tone } from "../lib/tone.js";
 
 /** Where a stage sits in the pipeline. Structure, not an agency's own names. */
 export type StageCategory = "open" | "proposal" | "ongoing" | "completed" | "lost";

package/src/{tasks/record → record}/where-we-are.svelte

@@ -3,10 +3,10 @@
 // IMPORTS
 // =========================
 import { NavigationArrow } from "phosphor-svelte";
-import { cn } from "../../lib/utils.js";
-import { Button } from "../../shadcn/button/index.js";
-import StatusBadge from "../status-badge.svelte";
-import type { Tone } from "../../lib/tone.js";
+import { cn } from "../lib/utils.js";
+import { Button } from "../shadcn/button/index.js";
+import StatusBadge from "../status/status-badge.svelte";
+import type { Tone } from "../lib/tone.js";
 import { gutterClass } from "./gutter.js";
 import { formatAge } from "./format.js";
 import { resolveLabels, type RecordLabels } from "./types.js";

package/src/status/README.md

@@ -0,0 +1,18 @@
+# @heyramzi/ui/status
+
+Status badge, dot and icon from one map. `defineStatuses` builds the map, and the three parts read it, so a status looks the same everywhere. They used to live in `@heyramzi/ui/tasks`, which still re-exports every name.
+
+```svelte
+<script lang="ts">
+  import { StatusBadge, defineStatuses } from "@heyramzi/ui/status";
+
+  const statuses = defineStatuses({
+    draft: { label: "Draft", tone: "neutral", variant: "open" },
+    sent: { label: "Sent", tone: "info", variant: "completed" },
+  });
+</script>
+
+<StatusBadge {statuses} status="sent" />
+```
+
+Exports: `StatusBadge`, `StatusDot`, `StatusIcon`, `defineStatuses` and the types `StatusDef`, `StatusDotVariant`, `StatusId`, `StatusMap`, `Statuses`. The old subpaths `tasks/status`, `tasks/status-dot` and `tasks/statuses` resolve to the same files.

package/src/status/index.ts

@@ -0,0 +1,11 @@
+export { default as StatusBadge } from "./status-badge.svelte";
+export { default as StatusDot } from "./status-dot.svelte";
+export { default as StatusIcon } from "./status-icon.svelte";
+export { defineStatuses } from "./define-statuses.js";
+export type {
+	StatusDef,
+	StatusDotVariant,
+	StatusId,
+	StatusMap,
+	Statuses,
+} from "./status-types.js";

package/src/tasks/README.md

@@ -204,7 +204,7 @@ icon, so `ChartBarHorizontal` stands in.
 `SidePanel` is a sheet for one record: a title, a description, status chips, doors
 out to other tools (`openIn`), a copy-a-prompt `handoff`, a strip of `stats`, then
 the body and an optional pinned `footer`. You pass the tools; the panel knows none.
-Import it from `@heyramzi/ui/tasks` or alone from `@heyramzi/ui/tasks/side-panel`.
+Import it from `@heyramzi/ui/panel`, or from `@heyramzi/ui/tasks` for now.
 
 ```svelte
 <SidePanel

package/src/tasks/demo.svelte

@@ -4,9 +4,9 @@
 	import TaskGantt from "./task-gantt.svelte";
 	import { SegmentedFilter } from "../components/segmented/index.js";
 	import { ChartBarHorizontal, Kanban, ListBullets } from "phosphor-svelte";
-	import StatusBadge from "./status-badge.svelte";
-	import StatusDot from "./status-dot.svelte";
-	import { defineStatuses } from "./define-statuses.js";
+	import StatusBadge from "../status/status-badge.svelte";
+	import StatusDot from "../status/status-dot.svelte";
+	import { defineStatuses } from "../status/define-statuses.js";
 	import { addDays, dayNumber, todayIso } from "./dates.js";
 	import { salesStatuses } from "./presets/sales.js";
 	import type { KanbanMove } from "./kanban-types.js";

package/src/tasks/detail/detail-demo.svelte

@@ -4,8 +4,8 @@
 	import TaskProperty from "./task-property.svelte";
 	import TaskChip from "./task-chip.svelte";
 	import TimeTracker from "../time/time-tracker.svelte";
-	import StatusDot from "../status-dot.svelte";
-	import { defineStatuses } from "../define-statuses.js";
+	import StatusDot from "../../status/status-dot.svelte";
+	import { defineStatuses } from "../../status/define-statuses.js";
 	import type { TaskComment } from "./detail-types.js";
 	import type { TimeLogInput, TimeStopInfo } from "../time/time-types.js";
 

package/src/tasks/gantt/gantt.test.ts

@@ -16,7 +16,7 @@ let app: Record<string, unknown> | undefined;
 function render(extra: Record<string, unknown> = {}) {
   target = document.createElement("div");
   document.body.append(target);
-  app = mount(TaskGantt, {
+  app = mount(TaskGantt<Task>, {
     target,
     props: {
       items,

package/src/tasks/inbox/inbox-card.svelte

@@ -5,8 +5,8 @@
 	import { Button } from "../../shadcn/button/index.js";
 	import { Textarea } from "../../shadcn/textarea/index.js";
 	import { cn } from "../../lib/utils.js";
-	import StatusBadge from "../status-badge.svelte";
-	import StatusDot from "../status-dot.svelte";
+	import StatusBadge from "../../status/status-badge.svelte";
+	import StatusDot from "../../status/status-dot.svelte";
 	import { TONE_TEXT } from "../../lib/tone.js";
 	import InboxDraftEditor from "./inbox-draft.svelte";
 	import { canUndo, isOpen, startDraft } from "./inbox-logic.js";

package/src/tasks/inbox/inbox-statuses.ts

@@ -1,4 +1,4 @@
-import { defineStatuses } from "../define-statuses.js";
+import { defineStatuses } from "../../status/define-statuses.js";
 import { ClipboardText, EnvelopeSimple, Hash, Phone } from "phosphor-svelte";
 import type { PhosphorIcon } from "../../lib/icon-types.js";
 import type { InboxSourceType } from "./inbox-types.js";

package/src/tasks/inbox/inbox.svelte

@@ -7,7 +7,7 @@
 	import { Tabs, TabsList, TabsTrigger } from "../../shadcn/tabs/index.js";
 	import { ToggleGroup, ToggleGroupItem } from "../../shadcn/toggle-group/index.js";
 	import { cn } from "../../lib/utils.js";
-	import StatusDot from "../status-dot.svelte";
+	import StatusDot from "../../status/status-dot.svelte";
 	import InboxCard from "./inbox-card.svelte";
 	import { flatten, groupByProject, inLane, isTyping, laneOf } from "./inbox-logic.js";
 	import { inboxKinds, inboxStates } from "./inbox-statuses.js";

package/src/tasks/index.ts

@@ -13,19 +13,21 @@ export type {
 	KanbanMove,
 	KanbanSortKey,
 } from "./kanban-types.js";
-export { default as StatusBadge } from "./status-badge.svelte";
-export { default as StatusDot } from "./status-dot.svelte";
-export { default as StatusIcon } from "./status-icon.svelte";
-export { defineStatuses } from "./define-statuses.js";
+export {
+	StatusBadge,
+	StatusDot,
+	StatusIcon,
+	defineStatuses,
+} from "../status/index.js";
 export type {
 	StatusDef,
 	StatusDotVariant,
 	StatusId,
 	StatusMap,
 	Statuses,
-} from "./status-types.js";
-export { default as SidePanel } from "./side-panel.svelte";
-export type { PanelStat, SidePanelWidth } from "./side-panel-types.js";
+} from "../status/index.js";
+export { SidePanel } from "../panel/index.js";
+export type { PanelStat, SidePanelWidth } from "../panel/index.js";
 export { default as TaskList } from "./task-list.svelte";
 export { default as TaskGantt } from "./task-gantt.svelte";
 export { addDays, dayNumber, isoFromDay, todayIso } from "./dates.js";

package/src/tasks/presets/sales.ts

@@ -1,4 +1,4 @@
-import { defineStatuses } from "../define-statuses.js";
+import { defineStatuses } from "../../status/define-statuses.js";
 
 /**
  * An example status map for a sales pipeline. Names are neutral on purpose:

package/src/thread/README.md

@@ -0,0 +1,31 @@
+# @heyramzi/ui/thread
+
+One comment thread for any subject: a task, a project, a doc or a diagram. The thread owns the layout and the draft state. It never fetches. You pass comments and callbacks, and it hands back what the person did.
+
+```svelte
+<script lang="ts">
+  import { Thread, type ThreadComment, type ThreadPost } from "@heyramzi/ui/thread";
+
+  let comments = $state<ThreadComment[]>([]);
+
+  async function onPost({ body, parentId }: ThreadPost) {
+    const saved = await save(body, parentId);
+    if (!saved) return false; // keeps the draft
+    comments = [...comments, saved];
+  }
+</script>
+
+<Thread {comments} {onPost} {onEdit} {onDelete} {onResolve} canEdit={(c) => c.author.name === me} />
+```
+
+- **Replies.** `parentId` points at the comment answered. A reply to a reply sits under the same root, a reply whose parent is gone becomes a root, and `buildThread(comments)` gives you the same grouping without the component.
+- **Authors.** `author.kind` is `user` or `agent`. An agent shows an "AI" chip. The `avatar` snippet replaces the face for both kinds, so an app passes its cast portrait there.
+- **Rich bodies.** A comment with `content` (Tiptap JSON) draws through `@heyramzi/ui/editor`'s renderer. `body` stays the plain-text fallback. A rich comment has no edit button, because the thread edits text only.
+- **Resolve.** Pass `onResolve` and each root gets a check. Resolved roots fold away behind a "Show N resolved" button.
+- **Anchor.** `anchor` carries `{ nodeId, dx, dy, x, y }` for a canvas pin. A pinned comment shows a chip, and `onAnchor` fires on a click so the canvas can move to the node. `anchorChip` replaces the chip.
+- **Attachments.** The `attachments` snippet draws under a comment's body.
+- **Labels.** Every string comes from `labels`, a partial of `ThreadLabels`. `showResolved` holds a `{count}` slot. `when(comment)` formats the time.
+
+```ts
+const fr = { title: "Activité", send: "Commenter", showResolved: "Afficher {count} résolu" };
+```

package/src/thread/index.ts

@@ -0,0 +1,12 @@
+export { default as Thread } from "./thread.svelte";
+export { buildThread, fillCount, resolveThreadLabels, resolvedCount } from "./logic.js";
+export { DEFAULT_THREAD_LABELS } from "./types.js";
+export type {
+	ThreadAnchor,
+	ThreadAuthor,
+	ThreadAuthorKind,
+	ThreadComment,
+	ThreadLabels,
+	ThreadNode,
+	ThreadPost,
+} from "./types.js";

package/src/thread/logic.ts

@@ -0,0 +1,58 @@
+import type { ThreadComment, ThreadLabels, ThreadNode } from "./types.js";
+import { DEFAULT_THREAD_LABELS } from "./types.js";
+
+function time(comment: ThreadComment): number {
+	const ms = Date.parse(comment.createdAt);
+	return Number.isNaN(ms) ? Number.POSITIVE_INFINITY : ms;
+}
+
+/** Oldest first, a malformed timestamp last, ties in the order they came. */
+function byTime(comments: ThreadComment[]): ThreadComment[] {
+	return comments
+		.map((comment, index) => ({ comment, index }))
+		.toSorted((a, b) => time(a.comment) - time(b.comment) || a.index - b.index)
+		.map((row) => row.comment);
+}
+
+/**
+ * Roots in time order, each with its replies. A reply to a reply joins the root's list, a reply whose
+ * parent is gone becomes a root, and a loop of parents can't hang the walk.
+ */
+export function buildThread(comments: ThreadComment[]): ThreadNode[] {
+	const byId = new Map(comments.map((comment) => [comment.id, comment]));
+
+	function rootOf(comment: ThreadComment): ThreadComment {
+		const seen = new Set<string>([comment.id]);
+		let current = comment;
+		for (;;) {
+			const parent = current.parentId ? byId.get(current.parentId) : undefined;
+			if (!parent) return current;
+			if (seen.has(parent.id)) return comment;
+			seen.add(parent.id);
+			current = parent;
+		}
+	}
+
+	const replies = new Map<string, ThreadComment[]>();
+	const roots: ThreadComment[] = [];
+	for (const comment of comments) {
+		const root = rootOf(comment);
+		if (root.id === comment.id) roots.push(comment);
+		else replies.set(root.id, [...(replies.get(root.id) ?? []), comment]);
+	}
+	return byTime(roots).map((comment) => ({ comment, replies: byTime(replies.get(comment.id) ?? []) }));
+}
+
+/** How many conversations are resolved. */
+export function resolvedCount(nodes: ThreadNode[]): number {
+	return nodes.filter((node) => node.comment.resolved).length;
+}
+
+export function resolveThreadLabels(overrides?: Partial<ThreadLabels>): ThreadLabels {
+	return { ...DEFAULT_THREAD_LABELS, ...overrides };
+}
+
+/** Fills `{count}` in a label, so a French host writes its own sentence. */
+export function fillCount(label: string, count: number): string {
+	return label.replaceAll("{count}", String(count));
+}