@heyramzi/ui 2.23.0 → 3.0.0

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

@@ -1,255 +0,0 @@
-<script lang="ts">
-	import {
-		CalendarBlank,
-		CircleDashed,
-		CircleHalf,
-		Flag,
-		Folder,
-		Timer,
-		User,
-		UserCircle,
-	} from "phosphor-svelte";
-	import { Button } from "../../shadcn/button/index.js";
-	import { Card } from "../../shadcn/card/index.js";
-	import * as Avatar from "../../shadcn/avatar/index.js";
-	import TaskDetail from "./task-detail.svelte";
-	import TaskProperty from "./task-property.svelte";
-	import TaskChip from "./task-chip.svelte";
-	import TimeTracker from "../time/time-tracker.svelte";
-	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";
-
-	type Scenario =
-		| "default"
-		| "long"
-		| "emptyDescription"
-		| "unassigned"
-		| "running"
-		| "busy"
-		| "closed"
-		| "loading";
-
-	const statuses = defineStatuses({
-		todo: { label: "To do", tone: "neutral", variant: "open" },
-		doing: { label: "In progress", tone: "info", variant: "progress", progress: 0.5 },
-		done: { label: "Done", tone: "success", variant: "completed" },
-	});
-
-	const scenarios: { id: Scenario; label: string }[] = [
-		{ id: "default", label: "Default" },
-		{ id: "long", label: "Long title" },
-		{ id: "emptyDescription", label: "Empty description" },
-		{ id: "unassigned", label: "No assignee" },
-		{ id: "running", label: "Running timer" },
-		{ id: "busy", label: "24 comments" },
-		{ id: "closed", label: "Closed" },
-		{ id: "loading", label: "Loading" },
-	];
-
-	const people = ["Ada Lovelace", "Bo Chen", "Cy Park"];
-	const now = Date.now();
-	const hour = 3_600_000;
-	const stamp = (agoHours: number) => new Date(now - agoHours * hour).toISOString();
-
-	const seed: TaskComment[] = [
-		{
-			id: "c1",
-			author: "Ada Lovelace",
-			body: "Calls with Yoan: the format that sold the template was simple. A board on why, then the system, then the demo.",
-			createdAt: stamp(30),
-		},
-		{
-			id: "c2",
-			author: "Planner",
-			agent: true,
-			body: "Reused that shape for the outline. Three sections, the demo last, one call to action at the end.",
-			createdAt: stamp(26),
-		},
-		{
-			id: "c3",
-			author: "Bo Chen",
-			body: "Looks right. I'll record Thursday.",
-			createdAt: stamp(5),
-			edited: true,
-		},
-	];
-	const crowd: TaskComment[] = Array.from({ length: 24 }, (_, i) => ({
-		id: `b${i}`,
-		author: i % 4 === 1 ? "Planner" : (people[i % people.length] ?? "Ada Lovelace"),
-		agent: i % 4 === 1,
-		body:
-			i % 5 === 0
-				? "Pushed the second cut. The intro runs 40 seconds, so I trimmed the first example and kept the one with numbers."
-				: "Noted, moving on to the next step.",
-		createdAt: stamp(60 - i * 2),
-	}));
-
-	const longTitle =
-		"Run one awareness-only live session for an entrepreneur group, record it, and hand the raw take to the editor with a thumbnail brief";
-	const brief =
-		"Record the video about how the notebook is orchestrated.\n\nSteps: pick the angle from the notebook's own list, record, drop the raw take in the drive, and open one task per handoff (editor cut, thumbnail, storage link).\n\nDone when the raw take is in the drive and the three handoff tasks exist.";
-
-	let scenario = $state<Scenario>("default");
-	let narrow = $state(false);
-	let title = $state("Record the video and hand it off");
-	let description = $state<string | null>(brief);
-	let thread = $state<TaskComment[]>([...seed]);
-	let done = $state(false);
-	let timer = $state<{ startedAt: number } | null>(null);
-	let entries = $state([
-		{
-			id: "e1",
-			minutes: 90,
-			day: new Date(now - 24 * hour).toISOString().slice(0, 10),
-			person: "Ada Lovelace",
-			note: "Outline",
-		},
-	]);
-
-	$effect(() => {
-		const s = scenario;
-		title = s === "long" ? longTitle : "Record the video and hand it off";
-		description = s === "emptyDescription" ? null : brief;
-		thread = s === "busy" ? [...crowd] : s === "loading" ? [] : [...seed];
-		done = s === "closed";
-		timer = s === "running" ? { startedAt: Date.now() - 754_000 } : null;
-	});
-
-	let assignee = $derived(scenario === "unassigned" ? null : "Ada Lovelace");
-	let status = $derived(done ? "done" : scenario === "running" ? "doing" : "todo");
-	let statusLabel = $derived(statuses.label(status));
-
-	function onLog(input: TimeLogInput) {
-		entries = [
-			{
-				id: `e${entries.length + 1}`,
-				minutes: input.minutes,
-				day: input.day,
-				person: "Ada Lovelace",
-				note: input.note ?? "",
-			},
-			...entries,
-		];
-		return true;
-	}
-
-	function onStop(info: TimeStopInfo) {
-		onLog({ minutes: info.minutes, day: info.day });
-		timer = null;
-	}
-
-	function onSend(body: string) {
-		thread = [
-			...thread,
-			{
-				id: `n${thread.length}`,
-				author: "Ada Lovelace",
-				body,
-				createdAt: new Date().toISOString(),
-			},
-		];
-	}
-</script>
-
-<div class="flex flex-col gap-3">
-	<div class="flex flex-wrap items-center gap-1.5" role="group" aria-label="Scenario">
-		{#each scenarios as item (item.id)}
-			<Button
-				size="sm"
-				variant={scenario === item.id ? "default" : "outline"}
-				aria-pressed={scenario === item.id}
-				onclick={() => (scenario = item.id)}
-			>
-				{item.label}
-			</Button>
-		{/each}
-		<Button
-			size="sm"
-			variant={narrow ? "default" : "outline"}
-			class="ms-auto"
-			aria-pressed={narrow}
-			onclick={() => (narrow = !narrow)}
-		>
-			390 wide
-		</Button>
-	</div>
-
-	<Card class="mx-auto w-full gap-0 py-0" style="max-width: {narrow ? '390px' : 'none'}">
-		<TaskDetail
-			{title}
-			onTitleChange={(next) => {
-				title = next;
-			}}
-			{done}
-			closed={done}
-			onToggleDone={() => (done = !done)}
-			{description}
-			onDescriptionChange={(next) => {
-				description = next;
-			}}
-			comments={thread}
-			loadingComments={scenario === "loading"}
-			{onSend}
-			onDeleteComment={(comment) => {
-				thread = thread.filter((row) => row.id !== comment.id);
-			}}
-			canEditComment={(comment) => !comment.agent && comment.author === "Ada Lovelace"}
-		>
-			{#snippet meta()}
-				<span>From a call</span>
-				<span class="tabular-nums">Created Sep 9, 2026</span>
-			{/snippet}
-			{#snippet properties()}
-				<TaskProperty label="Status" icon={CircleHalf}>
-					<TaskChip aria-label="Status: {statusLabel}"
-						><StatusDot {statuses} {status} size={14} animate={false} />{statusLabel}</TaskChip
-					>
-				</TaskProperty>
-				<TaskProperty label="Priority" icon={Flag}>
-					<TaskChip><Flag weight="fill" class="text-destructive" aria-hidden="true" />High</TaskChip
-					>
-				</TaskProperty>
-				<TaskProperty label="Assignee" icon={UserCircle}>
-					{#if assignee}
-						<TaskChip>
-							<Avatar.Root class="size-4" aria-hidden="true">
-								<Avatar.Fallback><User class="size-3" /></Avatar.Fallback>
-							</Avatar.Root>
-							{assignee}
-						</TaskChip>
-					{:else}
-						<TaskChip empty><CircleDashed aria-hidden="true" />Assign</TaskChip>
-					{/if}
-				</TaskProperty>
-				<TaskProperty label="Due date" icon={CalendarBlank}>
-					<TaskChip><CalendarBlank aria-hidden="true" />Oct 9, 2026</TaskChip>
-				</TaskProperty>
-				<TaskProperty label="Project" icon={Folder}>
-					<TaskChip><Folder aria-hidden="true" />Agency OS</TaskChip>
-				</TaskProperty>
-				<TaskProperty label="Time" icon={Timer}>
-					<TimeTracker
-						{entries}
-						running={timer}
-						estimate={240}
-						getId={(entry) => entry.id}
-						getMinutes={(entry) => entry.minutes}
-						getDay={(entry) => entry.day}
-						getPerson={(entry) => entry.person}
-						getNote={(entry) => entry.note}
-						onStart={() => {
-							timer = { startedAt: Date.now() };
-						}}
-						{onStop}
-						{onLog}
-						onDelete={(entry) => {
-							entries = entries.filter((row) => row.id !== entry.id);
-						}}
-					/>
-				</TaskProperty>
-			{/snippet}
-		</TaskDetail>
-	</Card>
-</div>

package/src/work/detail/task-property.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-	import type { Component, Snippet } from "svelte";
-	import PropertyRow from "../../components/work-parts/property-row.svelte";
-
-	interface Props {
-		label: string;
-		/** A Phosphor icon before the label, shown when the rail is wide. */
-		icon?: Component<{ class?: string; "aria-hidden"?: boolean | "true" | "false" }>;
-		children: Snippet;
-	}
-
-	let { label, icon, children }: Props = $props();
-</script>
-
-<!-- A labelled row in the rail: icon, label, value. In the narrow chip row the label hides and
-     names the group for assistive tech. -->
-<PropertyRow {label} {icon} layout="responsive">{@render children()}</PropertyRow>

package/src/work/detail/task-thread.svelte

@@ -1,221 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from "svelte";
-	import { PencilSimple, Trash } from "phosphor-svelte";
-	import { initial } from "../../lib/initials.js";
-	import { AgentAvatar } from "../../agents/index.js";
-	import { Skeleton } from "../../shadcn/skeleton/index.js";
-	import { Button } from "../../shadcn/button/index.js";
-	import { Textarea } from "../../shadcn/textarea/index.js";
-	import * as Avatar from "../../shadcn/avatar/index.js";
-	import {
-		DEFAULT_TASK_DETAIL_LABELS,
-		type TaskComment,
-		type TaskDetailLabels,
-	} from "./detail-types.js";
-
-	interface Props {
-		comments: TaskComment[];
-		/** Rows still on their way. Draws skeleton rows in place of the thread. */
-		loading?: boolean;
-		labels?: Partial<TaskDetailLabels>;
-		/** Replaces the default agent avatar, drawn in a 24px slot. */
-		agentAvatar?: Snippet<[TaskComment]>;
-		/** Replaces the default initial for a person, drawn in a 24px slot. */
-		avatar?: Snippet<[TaskComment]>;
-		/** How a timestamp reads. Defaults to a short date. */
-		when?: (comment: TaskComment) => string;
-		/** The locale the default times read in. */
-		locale?: string;
-		/** Returns false to keep the draft. Without it the composer is hidden. */
-		onSend?: (body: string) => void | boolean | Promise<void | boolean>;
-		onEdit?: (comment: TaskComment, body: string) => void | Promise<void>;
-		onDelete?: (comment: TaskComment) => void | Promise<void>;
-		canEdit?: (comment: TaskComment) => boolean;
-	}
-
-	let {
-		comments,
-		loading = false,
-		labels: labelOverrides,
-		agentAvatar,
-		avatar,
-		locale = "en-GB",
-		when = (comment) =>
-			new Intl.DateTimeFormat(locale, { month: "short", day: "numeric" }).format(
-				new Date(comment.createdAt),
-			),
-		onSend,
-		onEdit,
-		onDelete,
-		canEdit = () => false,
-	}: Props = $props();
-
-	let labels = $derived({ ...DEFAULT_TASK_DETAIL_LABELS, ...labelOverrides });
-	let draft = $state("");
-	let sending = $state(false);
-	let editingId = $state<string | null>(null);
-	let editDraft = $state("");
-	let canSend = $derived(draft.trim().length > 0 && !sending);
-
-	async function send(): Promise<void> {
-		if (!canSend || !onSend) return;
-		sending = true;
-		try {
-			const result = await onSend(draft.trim());
-			if (result !== false) draft = "";
-		} finally {
-			sending = false;
-		}
-	}
-
-	function onComposerKeydown(event: KeyboardEvent): void {
-		if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
-			event.preventDefault();
-			void send();
-		}
-	}
-
-	function startEdit(comment: TaskComment): void {
-		editingId = comment.id;
-		editDraft = comment.body;
-	}
-
-	async function saveEdit(comment: TaskComment): Promise<void> {
-		const body = editDraft.trim();
-		editingId = null;
-		if (!body || body === comment.body) return;
-		await onEdit?.(comment, body);
-	}
-</script>
-
-<section aria-label={labels.comments} class="flex flex-col gap-3">
-	<h2 class="flex h-7 items-center text-xs font-medium text-muted-foreground">{labels.comments}</h2>
-
-	{#if loading}
-		<ol class="flex flex-col gap-4" aria-busy="true">
-			{#each [0, 1] as row (row)}
-				<li class="flex gap-3">
-					<Skeleton class="size-6 shrink-0 rounded-full" />
-					<div class="flex flex-1 flex-col gap-2">
-						<Skeleton class="h-3.5 w-28" />
-						<Skeleton class="h-3.5 w-full" />
-					</div>
-				</li>
-			{/each}
-		</ol>
-	{:else if comments.length > 0}
-		<ol class="flex flex-col gap-4">
-			{#each comments as comment (comment.id)}
-				<li class="group hover-row relative flex gap-3">
-					<!-- The rail that ties one avatar to the next, as in an activity feed. -->
-					<span
-						class="absolute start-[11.5px] top-8 -bottom-3 w-px bg-border group-last:hidden"
-						aria-hidden="true"
-					></span>
-					<span class="relative size-6 shrink-0">
-						{#if comment.agent}
-							{#if agentAvatar}
-								{@render agentAvatar(comment)}
-							{:else}
-								<AgentAvatar name={comment.author} size={24} paused interactive={false} />
-							{/if}
-						{:else if avatar}
-							{@render avatar(comment)}
-						{:else}
-							<Avatar.Root class="size-6" aria-hidden="true">
-								<Avatar.Fallback class="text-xs font-medium"
-									>{initial(comment.author)}</Avatar.Fallback
-								>
-							</Avatar.Root>
-						{/if}
-					</span>
-
-					<div class="min-w-0 flex-1">
-						<div class="flex h-6 items-center gap-2">
-							<span class="truncate text-(length:--text-control) font-medium">{comment.author}</span
-							>
-							{#if comment.agent}
-								<span class="sr-only">{labels.ai}</span>
-							{/if}
-							<span class="text-xs text-muted-foreground tabular-nums">{when(comment)}</span>
-							{#if comment.edited}
-								<span class="text-xs text-muted-foreground">{labels.commentEdited}</span>
-							{/if}
-							{#if canEdit(comment) && editingId !== comment.id}
-								<span class="row-action ms-auto flex gap-0.5">
-									{#if onEdit}
-										<Button
-											variant="ghost"
-											size="sm"
-											icon
-											class="text-muted-foreground"
-											aria-label={labels.commentEdit}
-											onclick={() => startEdit(comment)}
-										>
-											<PencilSimple aria-hidden="true" />
-										</Button>
-									{/if}
-									{#if onDelete}
-										<Button
-											variant="ghost"
-											size="sm"
-											icon
-											class="text-muted-foreground"
-											aria-label={labels.commentDelete}
-											onclick={() => onDelete?.(comment)}
-										>
-											<Trash aria-hidden="true" />
-										</Button>
-									{/if}
-								</span>
-							{/if}
-						</div>
-
-						{#if editingId === comment.id}
-							<Textarea
-								bind:value={editDraft}
-								rows={3}
-								aria-label={labels.comments}
-								class="mt-1 resize-y leading-relaxed"
-							/>
-							<div class="mt-2 flex justify-end gap-1.5">
-								<Button variant="ghost" size="sm" onclick={() => (editingId = null)}
-									>{labels.cancel}</Button
-								>
-								<Button size="sm" onclick={() => saveEdit(comment)}>{labels.save}</Button>
-							</div>
-						{:else}
-							<p class="text-sm leading-relaxed whitespace-pre-wrap text-pretty">{comment.body}</p>
-						{/if}
-					</div>
-				</li>
-			{/each}
-		</ol>
-	{:else if !onSend}
-		<p class="text-(length:--text-control) text-muted-foreground">{labels.commentsEmpty}</p>
-	{/if}
-
-	{#if onSend}
-		<!-- The send button sits inside the field's bottom edge, so the composer reads as one box. -->
-		<div class="relative">
-			<Textarea
-				bind:value={draft}
-				onkeydown={onComposerKeydown}
-				rows={2}
-				placeholder={labels.commentPlaceholder}
-				aria-label={labels.commentPlaceholder}
-				class="max-h-60 resize-none px-3 pb-11 leading-relaxed"
-			/>
-			<!-- An empty draft reads as an outlined button, not a faded fill. -->
-			<Button
-				size="sm"
-				variant={canSend ? "default" : "outline"}
-				class="absolute end-2 bottom-2 disabled:opacity-100"
-				onclick={send}
-				disabled={!canSend}
-			>
-				{sending ? labels.saving : labels.commentSend}
-			</Button>
-		</div>
-	{/if}
-</section>