@ciridae/ui 0.12.1 → 0.14.0

package/dist/components/blocks/comment-thread.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
 import { MessageSquareTextIcon } from "lucide-react";
 import { CommentComposer } from "./comment-composer.js";
 import { CommentItem } from "./comment-item.js";
+import { useRevealThreadEnd } from "./use-reveal-thread-end.js";
 import { Skeleton } from "../ui/skeleton.js";
 function CommentThread({ comments, composerAuthor, composerPlaceholder, composerSubmitLabel, emptyDescription = "Start the conversation with a short update or question.", emptyTitle = "No comments yet", isLoading = false, isSubmitting = false, onSubmit, readOnly = false, renderCommentActions, showHeader = true, title = "Comments", }) {
     const { armReveal, endRef } = useRevealThreadEnd(comments.length);
@@ -14,29 +14,6 @@ function CommentThread({ comments, composerAuthor, composerPlaceholder, composer
         : undefined;
     return (_jsxs("section", { className: "relative grid w-full gap-(--panel-gap)", "aria-label": title, children: [showHeader ? _jsx(CommentThreadHeader, { count: comments.length, title: title }) : null, _jsx(CommentThreadBody, { comments: comments, emptyDescription: emptyDescription, emptyTitle: emptyTitle, isLoading: isLoading, renderCommentActions: renderCommentActions }), submitAndReveal ? (_jsx(CommentComposer, { author: composerAuthor, isSubmitting: isSubmitting, onSubmit: submitAndReveal, placeholder: composerPlaceholder, submitLabel: composerSubmitLabel })) : null, _jsx("div", { "aria-hidden": true, className: "absolute bottom-0", ref: endRef })] }));
 }
-/**
- * After a send, the thread follows its own tail: scroll once when the submit
- * resolves, and again when the posted comment actually lands in `comments` —
- * the app may only append it after a refetch.
- */
-function useRevealThreadEnd(commentCount) {
-    const endRef = React.useRef(null);
-    // A deadline, not a flag: the follow-up scroll only chases the send it
-    // belongs to, so a comment arriving minutes later cannot yank a reader
-    // who has scrolled away.
-    const armedUntil = React.useRef(0);
-    React.useEffect(() => {
-        if (armedUntil.current === 0 || Date.now() > armedUntil.current)
-            return;
-        armedUntil.current = 0;
-        endRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
-    }, [commentCount]);
-    const armReveal = React.useCallback(() => {
-        armedUntil.current = Date.now() + 5000;
-        endRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
-    }, []);
-    return { armReveal, endRef };
-}
 function CommentThreadHeader({ count, title }) {
     return (_jsxs("header", { className: "flex items-center justify-between gap-3", children: [_jsx("h3", { className: "text-sm font-medium text-foreground", children: title }), _jsx("span", { className: "font-mono text-xs text-muted-foreground tabular-nums", children: count })] }));
 }

package/dist/components/blocks/feedback-center-comments.d.ts

@@ -1,5 +1,5 @@
 import type { CommentItemData } from "./comment-types.js";
-import type { FeedbackStatusEvent, UserFeedbackItem } from "./feedback-tracking-types.js";
+import type { UserFeedbackItem, UserFeedbackStatusEvent } from "./feedback-tracking-types.js";
 type FeedbackCommentSubmitHandler = (feedback: UserFeedbackItem, body: string) => void | Promise<void>;
 type FeedbackCenterCommentThreadProps = {
     comments: CommentItemData[];
@@ -9,7 +9,7 @@ type FeedbackCenterCommentThreadProps = {
     isCommentsLoading: boolean;
     onRetry?: () => void;
     onSubmitComment?: FeedbackCommentSubmitHandler;
-    statusEvents: FeedbackStatusEvent[];
+    statusEvents: UserFeedbackStatusEvent[];
 };
 declare function FeedbackCenterCommentThread({ comments, error, feedback, isCommentSubmitting, isCommentsLoading, onRetry, onSubmitComment, statusEvents, }: FeedbackCenterCommentThreadProps): import("@types/react").JSX.Element;
 export { FeedbackCenterCommentThread, type FeedbackCommentSubmitHandler };

package/dist/components/blocks/feedback-center-comments.js

@@ -1,20 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AlertCircleIcon } from "lucide-react";
+import { AlertCircleIcon, MessageSquareTextIcon } from "lucide-react";
 import { CommentComposer } from "./comment-composer.js";
 import { CommentItem } from "./comment-item.js";
-import { formatFeedbackTimestamp, getFeedbackTimestampDateTime } from "./feedback-date-format.js";
+import { formatFeedbackTimestamp, formatFeedbackTimestampFull, getFeedbackTimestampDateTime, } from "./feedback-date-format.js";
 import { FeedbackStatusBadge } from "./feedback-status-badge.js";
+import { useRevealThreadEnd } from "./use-reveal-thread-end.js";
 import { Alert, AlertDescription, AlertTitle } from "../ui/alert.js";
 import { Button } from "../ui/button.js";
 import { Skeleton } from "../ui/skeleton.js";
 function FeedbackCenterCommentThread({ comments, error, feedback, isCommentSubmitting, isCommentsLoading, onRetry, onSubmitComment, statusEvents, }) {
+    const activity = mergeFeedbackActivity(statusEvents, comments);
+    const { armReveal, endRef } = useRevealThreadEnd(activity.length);
     // A retry in flight shows the thread's loading state, not the stale error.
     if (error && !isCommentsLoading) {
         return (_jsxs(Alert, { variant: "destructive", children: [_jsx(AlertCircleIcon, {}), _jsx(AlertTitle, { children: "Conversation could not be loaded" }), _jsxs(AlertDescription, { className: "grid gap-3", children: [_jsx("span", { children: error.message }), onRetry ? (_jsx(Button, { className: "justify-self-start", onClick: onRetry, size: "sm", type: "button", variant: "outline", children: "Try again" })) : null] })] }));
     }
-    const submitComment = getCommentSubmitHandler(feedback, onSubmitComment);
-    const activity = mergeFeedbackActivity(statusEvents, comments);
-    return (_jsxs("section", { "aria-label": "Activity", className: "grid gap-(--panel-gap)", children: [_jsxs("div", { className: "grid gap-1", children: [activity.map((entry) => entry.kind === "comment" ? (_jsx(CommentItem, { comment: entry.comment }, entry.comment.id)) : (_jsx(FeedbackStatusActivity, { event: entry.event }, entry.event.id))), isCommentsLoading ? _jsx(FeedbackActivityLoading, {}) : null] }), submitComment ? (_jsx(CommentComposer, { isSubmitting: isCommentSubmitting, onSubmit: submitComment, placeholder: "Write a reply...", submitLabel: "Reply" })) : null] }));
+    const submitComment = getCommentSubmitHandler(feedback, onSubmitComment, armReveal);
+    return (_jsxs("section", { "aria-label": "Activity", className: "relative grid gap-(--panel-gap)", children: [_jsxs("div", { className: "grid gap-1", children: [activity.length === 0 && !isCommentsLoading ? _jsx(FeedbackActivityEmpty, {}) : null, activity.map((entry) => entry.kind === "comment" ? (_jsx(CommentItem, { comment: entry.comment }, entry.comment.id)) : (_jsx(FeedbackStatusActivity, { event: entry.event }, entry.event.id))), isCommentsLoading ? _jsx(FeedbackActivityLoading, {}) : null] }), submitComment ? (_jsx(CommentComposer, { isSubmitting: isCommentSubmitting, onSubmit: submitComment, placeholder: "Write a reply...", submitLabel: "Reply" })) : null, _jsx("div", { "aria-hidden": true, className: "absolute bottom-0", ref: endRef })] }));
+}
+function FeedbackActivityEmpty() {
+    return (_jsxs("div", { className: "flex items-start gap-2 py-2 text-sm text-muted-foreground", children: [_jsx(MessageSquareTextIcon, { className: "mt-0.5 size-4 shrink-0" }), _jsx("span", { children: "No activity yet." })] }));
 }
 function mergeFeedbackActivity(statusEvents, comments) {
     return [
@@ -31,20 +36,25 @@ function mergeFeedbackActivity(statusEvents, comments) {
     ].sort(compareActivityEntries);
 }
 function compareActivityEntries(left, right) {
-    const timestampOrder = left.createdAt.localeCompare(right.createdAt);
+    const leftTimestamp = getFeedbackTimestampDateTime(left.createdAt) ?? left.createdAt;
+    const rightTimestamp = getFeedbackTimestampDateTime(right.createdAt) ?? right.createdAt;
+    const timestampOrder = leftTimestamp.localeCompare(rightTimestamp);
     if (timestampOrder !== 0)
         return timestampOrder;
     return left.kind === right.kind ? 0 : left.kind === "status" ? -1 : 1;
 }
 function FeedbackStatusActivity({ event }) {
-    return (_jsxs("div", { className: "flex min-w-0 items-center gap-2 py-2 text-xs text-muted-foreground", children: [_jsx("span", { "aria-hidden": true, className: "size-1.5 shrink-0 rounded-full bg-border" }), _jsx("span", { children: "Status changed to" }), _jsx(FeedbackStatusBadge, { status: event.status }), _jsx("time", { className: "ml-auto shrink-0 font-mono tabular-nums", dateTime: getFeedbackTimestampDateTime(event.createdAt), children: formatFeedbackTimestamp(event.createdAt) })] }));
+    return (_jsxs("div", { className: "flex min-w-0 items-center gap-2 py-2 text-xs text-muted-foreground", children: [_jsx("span", { "aria-hidden": true, className: "size-1.5 shrink-0 rounded-full bg-border" }), _jsx("span", { children: "Status changed to" }), _jsx(FeedbackStatusBadge, { status: event.status }), _jsx("time", { className: "ml-auto shrink-0 font-mono tabular-nums", dateTime: getFeedbackTimestampDateTime(event.createdAt), title: formatFeedbackTimestampFull(event.createdAt), children: formatFeedbackTimestamp(event.createdAt) })] }));
 }
 function FeedbackActivityLoading() {
     return (_jsxs("div", { "aria-label": "Loading activity", className: "flex gap-3 px-1 py-2", role: "status", children: [_jsx(Skeleton, { className: "size-6 rounded-full" }), _jsxs("div", { className: "grid flex-1 gap-2", children: [_jsx(Skeleton, { className: "h-3 w-32" }), _jsx(Skeleton, { className: "h-3 w-4/5" })] })] }));
 }
-function getCommentSubmitHandler(feedback, onSubmitComment) {
+function getCommentSubmitHandler(feedback, onSubmitComment, armReveal) {
     if (!feedback || !onSubmitComment)
         return undefined;
-    return (body) => onSubmitComment(feedback, body);
+    return async (body) => {
+        await onSubmitComment(feedback, body);
+        armReveal();
+    };
 }
 export { FeedbackCenterCommentThread };

package/dist/components/blocks/feedback-center-sheet-parts.d.ts

@@ -3,7 +3,7 @@ import type { CommentItemData } from "./comment-types.js";
 import { type FeedbackCommentSubmitHandler } from "./feedback-center-comments.js";
 import { type FeedbackComposerProps } from "./feedback-composer.js";
 import type { FeedbackUrgency } from "./feedback-composer-types.js";
-import type { FeedbackStatusEvent, UserFeedbackItem } from "./feedback-tracking-types.js";
+import type { UserFeedbackItem, UserFeedbackStatusEvent } from "./feedback-tracking-types.js";
 type FeedbackCenterTab = "mine" | "submit";
 type FeedbackCenterView = "detail" | "list";
 type FeedbackCenterComposerProps = Omit<FeedbackComposerProps, "actions" | "formId" | "onCancel" | "onDirtyChange" | "onSubmittedChange" | "onUrgencyChange">;
@@ -29,7 +29,7 @@ type FeedbackCenterTabsProps = {
     onSubmitComment?: FeedbackCommentSubmitHandler;
     selectedFeedback?: UserFeedbackItem;
     renderEvidence?: (item: UserFeedbackItem) => React.ReactNode;
-    statusEventsByFeedbackId: Record<string, FeedbackStatusEvent[]>;
+    statusEventsByFeedbackId: Record<string, UserFeedbackStatusEvent[]>;
     view: FeedbackCenterView;
 };
 declare function FeedbackCenterSheetHeader({ unreadReplyCount }: {

package/dist/components/blocks/feedback-center-sheet-parts.js

@@ -24,21 +24,16 @@ function FeedbackCenterMineContent(props) {
 }
 function FeedbackCenterMineTab({ canComment, isLoading, commentsByFeedbackId, commentsError, isCommentSubmitting, isCommentsLoading, items, itemsError, onBack, onSelectFeedback, onRetryComments, onRetryItems, onSubmitComment, selectedFeedback, renderEvidence, statusEventsByFeedbackId, view, }) {
     if (view === "detail") {
-        return (_jsx(FeedbackCenterDetailPane, { comments: getFeedbackComments(commentsByFeedbackId, selectedFeedback), canComment: canComment, commentsError: commentsError, feedback: selectedFeedback, isCommentSubmitting: isCommentSubmitting, isCommentsLoading: isCommentsLoading, onBack: onBack, onRetryComments: onRetryComments, onSubmitComment: onSubmitComment, renderEvidence: renderEvidence, statusEvents: getFeedbackStatusEvents(statusEventsByFeedbackId, selectedFeedback) }));
+        return (_jsx(FeedbackCenterDetailPane, { comments: getFeedbackScopedItems(commentsByFeedbackId, selectedFeedback), canComment: canComment, commentsError: commentsError, feedback: selectedFeedback, isCommentSubmitting: isCommentSubmitting, isCommentsLoading: isCommentsLoading, onBack: onBack, onRetryComments: onRetryComments, onSubmitComment: onSubmitComment, renderEvidence: renderEvidence, statusEvents: getFeedbackScopedItems(statusEventsByFeedbackId, selectedFeedback) }));
     }
     return (_jsx(FeedbackUserList, { error: itemsError, isLoading: isLoading, items: items, onSelectFeedback: onSelectFeedback, onRetry: onRetryItems, selectedId: selectedFeedback?.id }));
 }
 function FeedbackCenterDetailPane({ canComment, comments, commentsError, feedback, isCommentSubmitting, isCommentsLoading, onBack, onRetryComments, onSubmitComment, renderEvidence, statusEvents, }) {
     return (_jsx(FeedbackUserDetail, { activityLabel: "Activity", activitySlot: _jsx(FeedbackCenterCommentThread, { comments: comments, error: commentsError, feedback: feedback, isCommentSubmitting: isCommentSubmitting, isCommentsLoading: isCommentsLoading, onSubmitComment: feedback && canComment?.(feedback) === false ? undefined : onSubmitComment, onRetry: onRetryComments, statusEvents: statusEvents }), evidenceSlot: feedback ? renderEvidence?.(feedback) : undefined, feedback: feedback, onBack: onBack }));
 }
-function getFeedbackComments(commentsByFeedbackId, feedback) {
+function getFeedbackScopedItems(itemsByFeedbackId, feedback) {
     if (!feedback)
         return [];
-    return commentsByFeedbackId[feedback.id] ?? [];
-}
-function getFeedbackStatusEvents(statusEventsByFeedbackId, feedback) {
-    if (!feedback)
-        return [];
-    return statusEventsByFeedbackId[feedback.id] ?? [];
+    return itemsByFeedbackId[feedback.id] ?? [];
 }
 export { FeedbackCenterSheetHeader, FeedbackCenterTabs, };

package/dist/components/blocks/feedback-center-sheet.d.ts

@@ -3,7 +3,7 @@ import type { CommentItemData } from "./comment-types.js";
 import type { FeedbackCommentSubmitHandler } from "./feedback-center-comments.js";
 import { type FeedbackCenterTab } from "./feedback-center-sheet-parts.js";
 import type { FeedbackComposerProps } from "./feedback-composer.js";
-import type { FeedbackStatusEvent, UserFeedbackItem } from "./feedback-tracking-types.js";
+import type { UserFeedbackItem, UserFeedbackStatusEvent } from "./feedback-tracking-types.js";
 type FeedbackCenterSheetProps = Omit<FeedbackComposerProps, "actions" | "formId" | "onCancel" | "onDirtyChange" | "onSubmittedChange" | "onUrgencyChange"> & {
     canComment?: (item: UserFeedbackItem) => boolean;
     commentsByFeedbackId?: Record<string, CommentItemData[]>;
@@ -21,7 +21,7 @@ type FeedbackCenterSheetProps = Omit<FeedbackComposerProps, "actions" | "formId"
     onOpenChange: (open: boolean) => void;
     open: boolean;
     renderEvidence?: (item: UserFeedbackItem) => React.ReactNode;
-    statusEventsByFeedbackId?: Record<string, FeedbackStatusEvent[]>;
+    statusEventsByFeedbackId?: Record<string, UserFeedbackStatusEvent[]>;
 };
 declare function FeedbackCenterSheet(props: FeedbackCenterSheetProps): React.JSX.Element;
 export { FeedbackCenterSheet, type FeedbackCenterSheetProps, type FeedbackCenterTab };

package/dist/components/blocks/feedback-detail-sheet.js

@@ -4,7 +4,7 @@ import { PaperclipIcon } from "lucide-react";
 import { formatFeedbackTimestampFull, getFeedbackTimestampDateTime } from "./feedback-date-format.js";
 import { FeedbackStatusBadge } from "./feedback-status-badge.js";
 import { FeedbackTypeBadge } from "./feedback-type-badge.js";
-import { feedbackStatusLabels, feedbackStatusValues, getFeedbackInitials, } from "./feedback-tracking-types.js";
+import { feedbackStatusLabels, feedbackTriageStatusValues, getFeedbackInitials, } from "./feedback-tracking-types.js";
 import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar.js";
 import { Button } from "../ui/button.js";
 import { Card } from "../ui/card.js";
@@ -27,11 +27,11 @@ function FeedbackDetailContent({ feedback, onStatusChange, pendingStatus, }) {
  */
 function FeedbackDetailStatusSection({ onStatusChange, pendingStatus, status, }) {
     const selectId = React.useId();
-    return (_jsxs("div", { className: "grid gap-2", children: [_jsx("label", { className: "text-meta text-muted-foreground", htmlFor: selectId, children: "Status" }), _jsxs(Select, { disabled: pendingStatus !== undefined, onValueChange: (value) => {
-                    const next = feedbackStatusValues.find((candidate) => candidate === value);
+    return (_jsxs("div", { className: "grid gap-2", children: [_jsx("label", { className: "text-meta text-muted-foreground", htmlFor: selectId, children: "Status" }), _jsxs(Select, { disabled: status === "withdrawn" || pendingStatus !== undefined, onValueChange: (value) => {
+                    const next = feedbackTriageStatusValues.find((candidate) => candidate === value);
                     if (next && next !== status)
                         onStatusChange(next);
-                }, value: pendingStatus ?? status, children: [_jsx(SelectTrigger, { className: "w-full", id: selectId, children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: feedbackStatusValues.map((value) => (_jsx(SelectItem, { value: value, children: feedbackStatusLabels[value] }, value))) })] })] }));
+                }, value: pendingStatus ?? status, children: [_jsx(SelectTrigger, { className: "w-full", id: selectId, children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [status === "withdrawn" ? (_jsx(SelectItem, { value: "withdrawn", children: feedbackStatusLabels.withdrawn })) : null, feedbackTriageStatusValues.map((value) => (_jsx(SelectItem, { value: value, children: feedbackStatusLabels[value] }, value)))] })] })] }));
 }
 function FeedbackDetailSummary({ feedback }) {
     const submitter = feedback.submittedBy;

package/dist/components/blocks/feedback-metrics.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MetricsStrip, MetricsStripDetail, MetricsStripItem, MetricsStripLabel, MetricsStripValue, } from "../ui/metrics-strip.js";
 function FeedbackMetricsStrip({ metrics }) {
-    return (_jsxs(MetricsStrip, { className: "md:grid-cols-3 xl:grid-cols-5", children: [_jsx(FeedbackMetricItem, { detail: "Visible tickets", label: "Total", tone: "neutral", value: metrics.total }), _jsx(FeedbackMetricItem, { detail: "Awaiting triage", label: "Received", tone: "warning", value: metrics.received }), _jsx(FeedbackMetricItem, { detail: "Active work", label: "In progress", tone: "info", value: metrics.inProgress }), _jsx(FeedbackMetricItem, { detail: "Needs a decision", label: "Discussion required", tone: "warning", value: metrics.discussionRequired }), _jsx(FeedbackMetricItem, { detail: "Finished", label: "Completed", tone: "success", value: metrics.completed })] }));
+    return (_jsxs(MetricsStrip, { className: "md:grid-cols-3 xl:grid-cols-5", children: [_jsx(FeedbackMetricItem, { detail: "Visible tickets", label: "Total", tone: "neutral", value: metrics.total }), _jsx(FeedbackMetricItem, { detail: "Awaiting triage", label: "Received", tone: "warning", value: metrics.received }), _jsx(FeedbackMetricItem, { detail: "Active work", label: "In progress", tone: "info", value: metrics.inProgress }), _jsx(FeedbackMetricItem, { detail: "Needs a decision", label: "Discussion required", tone: "warning", value: metrics.discussionRequired }), _jsx(FeedbackMetricItem, { detail: "Resolved", label: "Closed", tone: "success", value: metrics.completed })] }));
 }
 function FeedbackMetricItem({ detail, label, tone, value, }) {
     return (_jsxs(MetricsStripItem, { children: [_jsx(MetricsStripLabel, { children: label }), _jsx(MetricsStripValue, { children: value }), _jsx(MetricsStripDetail, { className: feedbackMetricToneClasses[tone], children: detail })] }));

package/dist/components/blocks/feedback-tracking-types.d.ts

@@ -1,5 +1,6 @@
 declare const feedbackStatusValues: readonly ["received", "in_progress", "discussion_required", "completed", "no_action", "withdrawn"];
 type FeedbackStatus = (typeof feedbackStatusValues)[number];
+declare const feedbackTriageStatusValues: readonly ["received", "in_progress", "discussion_required", "completed", "no_action"];
 type StakeholderFeedbackType = "bug" | "feature" | "general";
 type FeedbackUrgency = "emergency" | "normal";
 type FeedbackAffectedScope = "everyone" | "just_me" | "my_team" | "unknown";
@@ -42,7 +43,7 @@ type UserFeedbackItem = {
     updatedAt?: string;
     urgency?: FeedbackUrgency;
 };
-type FeedbackStatusEvent = {
+type UserFeedbackStatusEvent = {
     createdAt: string;
     id: string;
     status: FeedbackStatus;
@@ -98,4 +99,4 @@ declare const feedbackTypeOptions: readonly [{
     readonly value: "general";
 }];
 declare function getFeedbackInitials(name: string, email: string | undefined): string;
-export { feedbackStatusLabels, feedbackStatusOptions, feedbackStatusValues, feedbackTypeLabels, feedbackTypeOptions, getFeedbackInitials, type FeedbackAffectedScope, type FeedbackAttachment, type FeedbackMetrics, type FeedbackStatus, type FeedbackStatusEvent, type FeedbackSubmittedBy, type FeedbackTimelineEvent, type FeedbackUrgency, type StakeholderFeedbackItem, type StakeholderFeedbackType, type UserFeedbackItem, };
+export { feedbackStatusLabels, feedbackStatusOptions, feedbackTriageStatusValues, feedbackStatusValues, feedbackTypeLabels, feedbackTypeOptions, getFeedbackInitials, type FeedbackAffectedScope, type FeedbackAttachment, type FeedbackMetrics, type FeedbackStatus, type FeedbackSubmittedBy, type FeedbackTimelineEvent, type FeedbackUrgency, type StakeholderFeedbackItem, type StakeholderFeedbackType, type UserFeedbackItem, type UserFeedbackStatusEvent, };

package/dist/components/blocks/feedback-tracking-types.js

@@ -7,8 +7,15 @@ const feedbackStatusValues = [
     "no_action",
     "withdrawn",
 ];
+const feedbackTriageStatusValues = [
+    "received",
+    "in_progress",
+    "discussion_required",
+    "completed",
+    "no_action",
+];
 const feedbackStatusLabels = {
-    completed: "Completed",
+    completed: "Closed",
     discussion_required: "Discussion required",
     in_progress: "In progress",
     no_action: "No action",
@@ -44,4 +51,4 @@ function getFeedbackInitials(name, email) {
         .map((part) => part.charAt(0).toUpperCase())
         .join("");
 }
-export { feedbackStatusLabels, feedbackStatusOptions, feedbackStatusValues, feedbackTypeLabels, feedbackTypeOptions, getFeedbackInitials, };
+export { feedbackStatusLabels, feedbackStatusOptions, feedbackTriageStatusValues, feedbackStatusValues, feedbackTypeLabels, feedbackTypeOptions, getFeedbackInitials, };

package/dist/components/blocks/timestamp-format.js

@@ -1,15 +1,27 @@
-import { format, formatDistanceToNowStrict, isValid, parseISO } from "date-fns";
+import { isValid, parseISO } from "date-fns";
 function formatTimestamp(value, options = {}) {
     const date = parseTimestamp(value);
     if (!date)
         return getTimestampFallback(value, options.fallback);
-    return formatDistanceToNowStrict(date, { addSuffix: true });
+    const time = timeFormatter.format(date);
+    const dayDifference = getLocalCalendarDayDifference(date, new Date());
+    if (dayDifference === 0)
+        return `Today, ${time}`;
+    if (dayDifference === -1)
+        return `Yesterday, ${time}`;
+    if (dayDifference < 0 && dayDifference > -7) {
+        return `${weekdayFormatter.format(date)}, ${time}`;
+    }
+    if (date.getFullYear() === new Date().getFullYear()) {
+        return `${monthDayFormatter.format(date)}, ${time}`;
+    }
+    return dateTimeFormatter.format(date);
 }
 function formatTimestampFull(value, options = {}) {
     const date = parseTimestamp(value);
     if (!date)
         return getTimestampFallback(value, options.fallback);
-    return format(date, "PPp");
+    return dateTimeFormatter.format(date);
 }
 function getTimestampDateTime(value) {
     const date = parseTimestamp(value);
@@ -28,10 +40,34 @@ function toUtcTimestamp(value) {
 function parseTimestamp(value) {
     if (!value)
         return undefined;
-    const date = parseISO(value);
+    const date = parseISO(toUtcTimestamp(value));
     return isValid(date) ? date : undefined;
 }
 function getTimestampFallback(value, fallback = "No update") {
     return value?.trim() || fallback;
 }
+function getLocalCalendarDayDifference(date, comparisonDate) {
+    const dateStart = new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+    const comparisonStart = new Date(comparisonDate.getFullYear(), comparisonDate.getMonth(), comparisonDate.getDate()).getTime();
+    return Math.round((dateStart - comparisonStart) / millisecondsPerDay);
+}
+const millisecondsPerDay = 24 * 60 * 60 * 1000;
+const timeFormatter = new Intl.DateTimeFormat(undefined, {
+    hour: "numeric",
+    minute: "2-digit",
+});
+const weekdayFormatter = new Intl.DateTimeFormat(undefined, {
+    weekday: "short",
+});
+const monthDayFormatter = new Intl.DateTimeFormat(undefined, {
+    day: "numeric",
+    month: "short",
+});
+const dateTimeFormatter = new Intl.DateTimeFormat(undefined, {
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    month: "short",
+    year: "numeric",
+});
 export { formatTimestamp, formatTimestampFull, getTimestampDateTime, toUtcTimestamp };

package/dist/components/blocks/use-reveal-thread-end.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+/**
+ * After a send, a thread follows its own tail: scroll once when the submit
+ * resolves, and again when the posted item actually lands in the thread. The
+ * app may only append it after a refetch.
+ */
+declare function useRevealThreadEnd(itemCount: number): {
+    armReveal: () => void;
+    endRef: React.RefObject<HTMLDivElement | null>;
+};
+export { useRevealThreadEnd };

package/dist/components/blocks/use-reveal-thread-end.js

@@ -0,0 +1,25 @@
+import * as React from "react";
+/**
+ * After a send, a thread follows its own tail: scroll once when the submit
+ * resolves, and again when the posted item actually lands in the thread. The
+ * app may only append it after a refetch.
+ */
+function useRevealThreadEnd(itemCount) {
+    const endRef = React.useRef(null);
+    // A deadline, not a flag: the follow-up scroll only chases the send it
+    // belongs to, so a comment arriving minutes later cannot yank a reader
+    // who has scrolled away.
+    const armedUntil = React.useRef(0);
+    React.useEffect(() => {
+        if (armedUntil.current === 0 || Date.now() > armedUntil.current)
+            return;
+        armedUntil.current = 0;
+        endRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
+    }, [itemCount]);
+    const armReveal = React.useCallback(() => {
+        armedUntil.current = Date.now() + 5000;
+        endRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
+    }, []);
+    return { armReveal, endRef };
+}
+export { useRevealThreadEnd };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ciridae/ui",
-	"version": "0.12.1",
+	"version": "0.14.0",
 	"type": "module",
 	"private": false,
 	"engines": {