@ciridae/ui 0.13.0 → 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 })] }));
 }
@@ -55,6 +32,6 @@ function CommentSkeletonRow() {
     return (_jsxs("div", { className: "flex gap-3 px-1 py-2", children: [_jsx(Skeleton, { className: "size-6 rounded-full" }), _jsxs("div", { className: "grid flex-1 gap-2", children: [_jsx(Skeleton, { className: "h-3 w-40" }), _jsx(Skeleton, { className: "h-3 w-full" }), _jsx(Skeleton, { className: "h-3 w-4/5" })] })] }));
 }
 function CommentThreadEmpty({ description, title }) {
-    return (_jsxs("div", { className: "flex min-w-0 items-start gap-2 rounded-md border border-dashed bg-muted/20 px-3 py-2.5", children: [_jsx(MessageSquareTextIcon, { className: "mt-0.5 size-4 shrink-0 text-muted-foreground" }), _jsxs("div", { className: "grid min-w-0 gap-0.5", children: [_jsx("div", { className: "text-sm font-medium text-foreground", children: title }), _jsx("p", { className: "text-sm text-muted-foreground", children: description })] })] }));
+    return (_jsxs("div", { className: "flex min-w-0 items-start gap-2 py-2", children: [_jsx(MessageSquareTextIcon, { className: "mt-0.5 size-4 shrink-0 text-muted-foreground" }), _jsxs("div", { className: "grid min-w-0 gap-0.5", children: [_jsx("div", { className: "text-sm font-medium text-foreground", children: title }), _jsx("p", { className: "text-sm text-muted-foreground", children: description })] })] }));
 }
 export { CommentThread };

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

@@ -1,5 +1,5 @@
 import type { CommentItemData } from "./comment-types.js";
-import type { 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,6 +9,7 @@ type FeedbackCenterCommentThreadProps = {
     isCommentsLoading: boolean;
     onRetry?: () => void;
     onSubmitComment?: FeedbackCommentSubmitHandler;
+    statusEvents: UserFeedbackStatusEvent[];
 };
-declare function FeedbackCenterCommentThread({ comments, error, feedback, isCommentSubmitting, isCommentsLoading, onRetry, onSubmitComment, }: FeedbackCenterCommentThreadProps): import("@types/react").JSX.Element;
+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,18 +1,60 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AlertCircleIcon } from "lucide-react";
-import { CommentThread } from "./comment-thread.js";
+import { AlertCircleIcon, MessageSquareTextIcon } from "lucide-react";
+import { CommentComposer } from "./comment-composer.js";
+import { CommentItem } from "./comment-item.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";
-function FeedbackCenterCommentThread({ comments, error, feedback, isCommentSubmitting, isCommentsLoading, onRetry, onSubmitComment, }) {
+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] })] }));
     }
-    return (_jsx(CommentThread, { comments: comments, composerPlaceholder: "Write a reply...", composerSubmitLabel: "Reply", isLoading: isCommentsLoading, isSubmitting: isCommentSubmitting, onSubmit: getCommentSubmitHandler(feedback, onSubmitComment), readOnly: !onSubmitComment, showHeader: false }));
+    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 getCommentSubmitHandler(feedback, onSubmitComment) {
+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 [
+        ...statusEvents.map((event) => ({
+            createdAt: event.createdAt,
+            event,
+            kind: "status",
+        })),
+        ...comments.map((comment) => ({
+            comment,
+            createdAt: comment.createdAt,
+            kind: "comment",
+        })),
+    ].sort(compareActivityEntries);
+}
+function compareActivityEntries(left, right) {
+    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), 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, 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 { 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,10 +29,11 @@ type FeedbackCenterTabsProps = {
     onSubmitComment?: FeedbackCommentSubmitHandler;
     selectedFeedback?: UserFeedbackItem;
     renderEvidence?: (item: UserFeedbackItem) => React.ReactNode;
+    statusEventsByFeedbackId: Record<string, UserFeedbackStatusEvent[]>;
     view: FeedbackCenterView;
 };
 declare function FeedbackCenterSheetHeader({ unreadReplyCount }: {
     unreadReplyCount: number;
 }): React.JSX.Element;
-declare function FeedbackCenterTabs({ canComment, composerProps, commentsByFeedbackId, commentsError, formId, onDirtyChange, onUrgencyChange, isCommentSubmitting, isCommentsLoading, isLoading, items, itemsError, onBack, onCancel, onSelectFeedback, onRetryComments, onRetryItems, onSubmittedChange, onSubmitComment, selectedFeedback, renderEvidence, view, }: FeedbackCenterTabsProps): React.JSX.Element;
+declare function FeedbackCenterTabs({ canComment, composerProps, commentsByFeedbackId, commentsError, formId, onDirtyChange, onUrgencyChange, isCommentSubmitting, isCommentsLoading, isLoading, items, itemsError, onBack, onCancel, onSelectFeedback, onRetryComments, onRetryItems, onSubmittedChange, onSubmitComment, selectedFeedback, renderEvidence, statusEventsByFeedbackId, view, }: FeedbackCenterTabsProps): React.JSX.Element;
 export { FeedbackCenterSheetHeader, FeedbackCenterTabs, type FeedbackCenterTab, type FeedbackCenterView, };

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

@@ -9,8 +9,8 @@ import { TabsContent, TabsList, TabsTrigger } from "../ui/tabs.js";
 function FeedbackCenterSheetHeader({ unreadReplyCount }) {
     return (_jsxs(SheetHeader, { className: "gap-3", children: [_jsxs("div", { className: "grid gap-1.5 pr-12", children: [_jsx(SheetTitle, { children: "Feedback" }), _jsx(SheetDescription, { children: "Send feedback and track your submissions in one place." })] }), _jsx(FeedbackCenterTabsList, { unreadReplyCount: unreadReplyCount })] }));
 }
-function FeedbackCenterTabs({ canComment, composerProps, commentsByFeedbackId, commentsError, formId, onDirtyChange, onUrgencyChange, isCommentSubmitting, isCommentsLoading, isLoading, items, itemsError, onBack, onCancel, onSelectFeedback, onRetryComments, onRetryItems, onSubmittedChange, onSubmitComment, selectedFeedback, renderEvidence, view, }) {
-    return (_jsxs(_Fragment, { children: [_jsx(FeedbackCenterSubmitTab, { composerProps: composerProps, formId: formId, onCancel: onCancel, onDirtyChange: onDirtyChange, onSubmittedChange: onSubmittedChange, onUrgencyChange: onUrgencyChange }), _jsx(FeedbackCenterMineContent, { commentsByFeedbackId: commentsByFeedbackId, canComment: canComment, commentsError: commentsError, isCommentSubmitting: isCommentSubmitting, isCommentsLoading: isCommentsLoading, isLoading: isLoading, items: items, itemsError: itemsError, onBack: onBack, onSelectFeedback: onSelectFeedback, onRetryComments: onRetryComments, onRetryItems: onRetryItems, onSubmitComment: onSubmitComment, selectedFeedback: selectedFeedback, renderEvidence: renderEvidence, view: view })] }));
+function FeedbackCenterTabs({ canComment, composerProps, commentsByFeedbackId, commentsError, formId, onDirtyChange, onUrgencyChange, isCommentSubmitting, isCommentsLoading, isLoading, items, itemsError, onBack, onCancel, onSelectFeedback, onRetryComments, onRetryItems, onSubmittedChange, onSubmitComment, selectedFeedback, renderEvidence, statusEventsByFeedbackId, view, }) {
+    return (_jsxs(_Fragment, { children: [_jsx(FeedbackCenterSubmitTab, { composerProps: composerProps, formId: formId, onCancel: onCancel, onDirtyChange: onDirtyChange, onSubmittedChange: onSubmittedChange, onUrgencyChange: onUrgencyChange }), _jsx(FeedbackCenterMineContent, { commentsByFeedbackId: commentsByFeedbackId, canComment: canComment, commentsError: commentsError, isCommentSubmitting: isCommentSubmitting, isCommentsLoading: isCommentsLoading, isLoading: isLoading, items: items, itemsError: itemsError, onBack: onBack, onSelectFeedback: onSelectFeedback, onRetryComments: onRetryComments, onRetryItems: onRetryItems, onSubmitComment: onSubmitComment, selectedFeedback: selectedFeedback, renderEvidence: renderEvidence, statusEventsByFeedbackId: statusEventsByFeedbackId, view: view })] }));
 }
 function FeedbackCenterTabsList({ unreadReplyCount }) {
     return (_jsxs(TabsList, { className: "w-full", children: [_jsx(TabsTrigger, { value: "submit", children: "Send feedback" }), _jsxs(TabsTrigger, { value: "mine", children: ["My feedback", unreadReplyCount > 0 ? _jsx(Badge, { variant: "secondary", children: unreadReplyCount }) : null] })] }));
@@ -22,18 +22,18 @@ function FeedbackCenterSubmitTab({ composerProps, formId, onCancel, onDirtyChang
 function FeedbackCenterMineContent(props) {
     return (_jsx(TabsContent, { className: "mt-0", value: "mine", children: _jsx(FeedbackCenterMineTab, { ...props }) }));
 }
-function FeedbackCenterMineTab({ canComment, isLoading, commentsByFeedbackId, commentsError, isCommentSubmitting, isCommentsLoading, items, itemsError, onBack, onSelectFeedback, onRetryComments, onRetryItems, onSubmitComment, selectedFeedback, renderEvidence, view, }) {
+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 }));
+        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, }) {
-    return (_jsx(FeedbackUserDetail, { activityLabel: "Public conversation", activitySlot: _jsx(FeedbackCenterCommentThread, { comments: comments, error: commentsError, feedback: feedback, isCommentSubmitting: isCommentSubmitting, isCommentsLoading: isCommentsLoading, onSubmitComment: feedback && canComment?.(feedback) === false ? undefined : onSubmitComment, onRetry: onRetryComments }), evidenceSlot: feedback ? renderEvidence?.(feedback) : undefined, feedback: feedback, onBack: onBack }));
+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] ?? [];
+    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 { 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,6 +21,7 @@ type FeedbackCenterSheetProps = Omit<FeedbackComposerProps, "actions" | "formId"
     onOpenChange: (open: boolean) => void;
     open: boolean;
     renderEvidence?: (item: UserFeedbackItem) => React.ReactNode;
+    statusEventsByFeedbackId?: Record<string, UserFeedbackStatusEvent[]>;
 };
 declare function FeedbackCenterSheet(props: FeedbackCenterSheetProps): React.JSX.Element;
 export { FeedbackCenterSheet, type FeedbackCenterSheetProps, type FeedbackCenterTab };

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

@@ -11,7 +11,7 @@ function FeedbackCenterSheet(props) {
 }
 function FeedbackCenterSheetContent({ props, state, }) {
     const { contentProps, requestClose } = useFormSheetActions();
-    return (_jsx(SheetContent, { size: "md", ...contentProps, children: _jsxs(Tabs, { className: "min-h-0 flex-1", onValueChange: setFeedbackCenterTab(state.handleTabChange), value: state.activeTab, children: [_jsx(FeedbackCenterSheetHeader, { unreadReplyCount: state.unreadReplyCount }), _jsx(SheetBody, { className: "pb-(--panel-padding)", children: _jsx(FeedbackCenterTabs, { canComment: props.canComment, composerProps: getFeedbackComposerProps(props), commentsByFeedbackId: props.commentsByFeedbackId ?? {}, commentsError: props.commentsError, formId: state.formId, isCommentSubmitting: props.isCommentSubmitting ?? false, isCommentsLoading: props.isCommentsLoading ?? false, isLoading: props.isLoading ?? false, items: props.items, itemsError: props.itemsError, onBack: state.handleBack, onCancel: requestClose, onDirtyChange: state.setIsDirty, onRetryComments: props.onRetryComments, onRetryItems: props.onRetryItems, onSelectFeedback: state.handleSelectFeedback, onSubmitComment: props.onSubmitComment, onSubmittedChange: state.setIsSubmitted, onUrgencyChange: state.setUrgency, renderEvidence: props.renderEvidence, selectedFeedback: state.selectedFeedback, view: state.view }) }), _jsx(FeedbackCenterFooter, { activeTab: state.activeTab, formId: state.formId, isSubmitted: state.isSubmitted, isSubmitting: props.isSubmitting ?? false, onCancel: requestClose, urgency: state.urgency })] }) }));
+    return (_jsx(SheetContent, { size: "md", ...contentProps, children: _jsxs(Tabs, { className: "min-h-0 flex-1", onValueChange: setFeedbackCenterTab(state.handleTabChange), value: state.activeTab, children: [_jsx(FeedbackCenterSheetHeader, { unreadReplyCount: state.unreadReplyCount }), _jsx(SheetBody, { className: "pb-(--panel-padding)", children: _jsx(FeedbackCenterTabs, { canComment: props.canComment, composerProps: getFeedbackComposerProps(props), commentsByFeedbackId: props.commentsByFeedbackId ?? {}, commentsError: props.commentsError, formId: state.formId, isCommentSubmitting: props.isCommentSubmitting ?? false, isCommentsLoading: props.isCommentsLoading ?? false, isLoading: props.isLoading ?? false, items: props.items, itemsError: props.itemsError, onBack: state.handleBack, onCancel: requestClose, onDirtyChange: state.setIsDirty, onRetryComments: props.onRetryComments, onRetryItems: props.onRetryItems, onSelectFeedback: state.handleSelectFeedback, onSubmitComment: props.onSubmitComment, onSubmittedChange: state.setIsSubmitted, onUrgencyChange: state.setUrgency, renderEvidence: props.renderEvidence, selectedFeedback: state.selectedFeedback, statusEventsByFeedbackId: props.statusEventsByFeedbackId ?? {}, view: state.view }) }), _jsx(FeedbackCenterFooter, { activeTab: state.activeTab, formId: state.formId, isSubmitted: state.isSubmitted, isSubmitting: props.isSubmitting ?? false, onCancel: requestClose, urgency: state.urgency })] }) }));
 }
 function useFeedbackCenterSheetState(props) {
     const defaultTab = props.defaultTab ?? "submit";

package/dist/components/blocks/feedback-detail-sheet.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) => {
+    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: feedbackTriageStatusValues.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

@@ -43,6 +43,11 @@ type UserFeedbackItem = {
     updatedAt?: string;
     urgency?: FeedbackUrgency;
 };
+type UserFeedbackStatusEvent = {
+    createdAt: string;
+    id: string;
+    status: FeedbackStatus;
+};
 type FeedbackMetrics = {
     completed: number;
     discussionRequired: number;
@@ -94,4 +99,4 @@ declare const feedbackTypeOptions: readonly [{
     readonly value: "general";
 }];
 declare function getFeedbackInitials(name: string, email: string | undefined): string;
-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, };
+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

@@ -15,12 +15,12 @@ const feedbackTriageStatusValues = [
     "no_action",
 ];
 const feedbackStatusLabels = {
-    completed: "Completed",
+    completed: "Closed",
     discussion_required: "Discussion required",
     in_progress: "In progress",
     no_action: "No action",
     received: "Received",
-    withdrawn: "Withdrawn",
+    withdrawn: "Canceled",
 };
 const feedbackTypeLabels = {
     bug: "Bug",

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

@@ -1,11 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AlertTriangleIcon, ArrowLeftIcon, EyeIcon, MessageSquareTextIcon, PaperclipIcon, } from "lucide-react";
-import { formatFeedbackTimestampFull, getFeedbackTimestampDateTime } from "./feedback-date-format.js";
+import { AlertTriangleIcon, ArrowLeftIcon, MessageSquareTextIcon, PaperclipIcon, } from "lucide-react";
+import { formatFeedbackTimestamp, formatFeedbackTimestampFull, getFeedbackTimestampDateTime, } from "./feedback-date-format.js";
 import { FeedbackStatusBadge } from "./feedback-status-badge.js";
 import { FeedbackTypeBadge } from "./feedback-type-badge.js";
 import { Badge } from "../ui/badge.js";
 import { Button } from "../ui/button.js";
-import { Card } from "../ui/card.js";
 import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty.js";
 import { Item, ItemContent, ItemGroup, ItemGroupItem, ItemMedia, ItemTitle } from "../ui/item.js";
 import { PropertyList, PropertyListItem, PropertyListLabel, PropertyListValue, } from "../ui/property-list.js";
@@ -24,16 +23,16 @@ function FeedbackUserDetailBackButton({ onBack }) {
     return (_jsx(Button, { "aria-label": "Back to my feedback", className: "-ml-2 shrink-0", onClick: onBack, size: "icon", type: "button", variant: "ghost", children: _jsx(ArrowLeftIcon, {}) }));
 }
 function FeedbackUserDetailMeta({ feedback }) {
-    return (_jsxs(PropertyList, { children: [_jsx(FeedbackProperty, { label: "Submitted", children: _jsx(FeedbackUserDateValue, { value: feedback.submittedAt }) }), _jsx(FeedbackProperty, { label: "Updated", children: _jsx(FeedbackUserDateValue, { value: feedback.updatedAt }) }), feedback.urgency === "emergency" && feedback.affectedScope ? (_jsx(FeedbackProperty, { label: "Affected scope", children: _jsx("span", { className: "text-xs", children: affectedScopeLabels[feedback.affectedScope] }) })) : null] }));
+    return (_jsxs(PropertyList, { children: [_jsx(FeedbackProperty, { label: "Submitted", children: _jsx(FeedbackUserDateValue, { value: feedback.submittedAt }) }), feedback.urgency === "emergency" && feedback.affectedScope ? (_jsx(FeedbackProperty, { label: "Affected scope", children: _jsx("span", { className: "text-xs", children: affectedScopeLabels[feedback.affectedScope] }) })) : null] }));
 }
 function FeedbackUserDetailBody({ feedback }) {
-    return (_jsxs(Card, { className: "grid gap-2 p-(--panel-padding)", children: [_jsx("div", { className: "text-meta text-muted-foreground", children: "Feedback" }), _jsx("p", { className: "text-sm whitespace-pre-wrap text-foreground", children: feedback.description })] }));
+    return (_jsxs("section", { className: "grid gap-2 border-t pt-4", children: [_jsx("div", { className: "text-meta text-muted-foreground", children: "Feedback" }), _jsx("p", { className: "text-sm whitespace-pre-wrap text-foreground", children: feedback.description })] }));
 }
 function FeedbackProperty({ children, label }) {
     return (_jsxs(PropertyListItem, { children: [_jsx(PropertyListLabel, { children: label }), _jsx(PropertyListValue, { children: children })] }));
 }
 function FeedbackUserDateValue({ value }) {
-    return (_jsx("time", { className: "font-mono text-xs tabular-nums", dateTime: getFeedbackTimestampDateTime(value), children: formatFeedbackTimestampFull(value) }));
+    return (_jsx("time", { className: "font-mono text-xs tabular-nums", dateTime: getFeedbackTimestampDateTime(value), title: formatFeedbackTimestampFull(value), children: formatFeedbackTimestamp(value) }));
 }
 function FeedbackUserAttachments({ feedback }) {
     const attachments = feedback.attachments ?? [];
@@ -50,7 +49,7 @@ function getAttachmentTitle(attachment) {
     return (_jsx("a", { className: "underline-offset-4 hover:underline", href: attachment.url, children: attachment.name }));
 }
 function FeedbackUserActivity({ activityLabel, activitySlot, }) {
-    return (_jsxs(Card, { className: "grid gap-3 p-(--panel-padding)", children: [_jsxs("div", { className: "flex items-start gap-2 border-b pb-3", children: [_jsx(EyeIcon, { className: "mt-0.5 size-4 shrink-0 text-muted-foreground" }), _jsxs("div", { className: "grid gap-0.5", children: [_jsx("div", { className: "text-sm font-medium text-foreground", children: activityLabel }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Messages here are visible to you and the support team." })] })] }), activitySlot] }));
+    return (_jsxs("section", { className: "grid gap-3 border-t pt-4", children: [_jsxs("div", { className: "grid gap-0.5", children: [_jsx("div", { className: "text-sm font-medium text-foreground", children: activityLabel }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Messages here are visible to you and the support team." })] }), activitySlot] }));
 }
 const affectedScopeLabels = {
     everyone: "Everyone",
@@ -59,6 +58,6 @@ const affectedScopeLabels = {
     unknown: "Not sure",
 };
 function FeedbackUserDetailEmpty() {
-    return (_jsx(Empty, { className: "min-h-72 border border-dashed", children: _jsxs(EmptyHeader, { children: [_jsx(EmptyMedia, { variant: "icon", children: _jsx(MessageSquareTextIcon, {}) }), _jsx(EmptyTitle, { children: "Select feedback" }), _jsx(EmptyDescription, { children: "Choose a submission to see its progress and details." })] }) }));
+    return (_jsx(Empty, { className: "min-h-72", children: _jsxs(EmptyHeader, { children: [_jsx(EmptyMedia, { variant: "icon", children: _jsx(MessageSquareTextIcon, {}) }), _jsx(EmptyTitle, { children: "Select feedback" }), _jsx(EmptyDescription, { children: "Choose a submission to see its progress and details." })] }) }));
 }
 export { FeedbackUserDetail };

package/dist/components/blocks/feedback-user-list.js

@@ -17,13 +17,13 @@ function FeedbackUserList({ error, isLoading = false, items, onRetry, onSelectFe
         return _jsx(FeedbackUserListError, { error: error, onRetry: onRetry });
     if (items.length === 0)
         return _jsx(FeedbackUserListEmpty, {});
-    return (_jsx(ItemGroup, { className: "gap-2", children: items.map((item) => (_jsx(FeedbackUserListItem, { item: item, onSelectFeedback: onSelectFeedback, selected: item.id === selectedId }, item.id))) }));
+    return (_jsx(ItemGroup, { className: "divide-y divide-border", children: items.map((item) => (_jsx(FeedbackUserListItem, { item: item, onSelectFeedback: onSelectFeedback, selected: item.id === selectedId }, item.id))) }));
 }
 function FeedbackUserListError({ error, onRetry }) {
     return (_jsxs(Alert, { variant: "destructive", children: [_jsx(AlertCircleIcon, {}), _jsx(AlertTitle, { children: "Feedback 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] })] }));
 }
 function FeedbackUserListItem({ item, onSelectFeedback, selected, }) {
-    return (_jsx(ItemGroupItem, { children: _jsx(Item, { "aria-current": selected ? "true" : undefined, asChild: true, className: cn("w-full cursor-pointer text-left", selected && "border-foreground/30 bg-muted/50"), size: "sm", variant: "outline", children: _jsx("button", { onClick: () => onSelectFeedback?.(item), type: "button", children: _jsx(FeedbackUserListItemContent, { item: item }) }) }) }));
+    return (_jsx(ItemGroupItem, { children: _jsx(Item, { "aria-current": selected ? "true" : undefined, asChild: true, className: cn("w-full cursor-pointer rounded-none px-0 text-left", selected && "bg-muted/50"), size: "sm", variant: "default", children: _jsx("button", { onClick: () => onSelectFeedback?.(item), type: "button", children: _jsx(FeedbackUserListItemContent, { item: item }) }) }) }));
 }
 function FeedbackUserListItemContent({ item }) {
     return (_jsxs(_Fragment, { children: [_jsxs(ItemContent, { className: "min-w-0", children: [_jsx(ItemTitle, { className: "max-w-full truncate", children: item.subject }), _jsx(ItemDescription, { className: "line-clamp-1", children: item.description })] }), _jsxs(ItemActions, { className: "shrink-0", children: [item.hasUnreadReply ? _jsx(Badge, { variant: "secondary", children: "New activity" }) : null, item.urgency === "emergency" ? (_jsxs(Badge, { variant: "destructive", children: [_jsx(AlertTriangleIcon, {}), "Emergency"] })) : null, _jsx(FeedbackTypeBadge, { type: item.type }), _jsx(FeedbackStatusBadge, { status: item.status })] }), _jsxs(ItemFooter, { children: [_jsx(FeedbackListDate, { label: "Submitted", value: item.submittedAt }), item.updatedAt ? _jsx(FeedbackListDate, { label: "Updated", value: item.updatedAt }) : null] })] }));
@@ -32,10 +32,10 @@ function FeedbackListDate({ label, value }) {
     return (_jsxs("span", { className: "font-mono text-xs text-muted-foreground tabular-nums", children: [label, " ", formatFeedbackTimestamp(value)] }));
 }
 function FeedbackUserListLoading() {
-    return (_jsx("div", { "aria-label": "Loading feedback", className: "grid gap-2", role: "status", children: loadingItems.map((item) => (_jsxs("div", { className: "rounded-md border p-(--panel-padding)", children: [_jsx(Skeleton, { className: "mb-2 h-4 w-2/3" }), _jsx(Skeleton, { className: "mb-4 h-3 w-full" }), _jsx(Skeleton, { className: "h-3 w-1/2" })] }, item))) }));
+    return (_jsx("div", { "aria-label": "Loading feedback", className: "grid gap-2", role: "status", children: loadingItems.map((item) => (_jsxs("div", { className: "py-(--panel-padding)", children: [_jsx(Skeleton, { className: "mb-2 h-4 w-2/3" }), _jsx(Skeleton, { className: "mb-4 h-3 w-full" }), _jsx(Skeleton, { className: "h-3 w-1/2" })] }, item))) }));
 }
 function FeedbackUserListEmpty() {
-    return (_jsx(Empty, { className: "min-h-72 border border-dashed", children: _jsxs(EmptyHeader, { children: [_jsx(EmptyMedia, { variant: "icon", children: _jsx(InboxIcon, {}) }), _jsx(EmptyTitle, { children: "No feedback yet" }), _jsx(EmptyDescription, { children: "Feedback you submit will appear here with its current progress." })] }) }));
+    return (_jsx(Empty, { className: "min-h-72", children: _jsxs(EmptyHeader, { children: [_jsx(EmptyMedia, { variant: "icon", children: _jsx(InboxIcon, {}) }), _jsx(EmptyTitle, { children: "No feedback yet" }), _jsx(EmptyDescription, { children: "Feedback you submit will appear here with its current progress." })] }) }));
 }
 const loadingItems = ["first", "second", "third"];
 export { FeedbackUserList };

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

@@ -1,3 +1,4 @@
+import { isValid, parseISO } from "date-fns";
 function formatTimestamp(value, options = {}) {
     const date = parseTimestamp(value);
     if (!date)
@@ -39,10 +40,8 @@ function toUtcTimestamp(value) {
 function parseTimestamp(value) {
     if (!value)
         return undefined;
-    const timestamp = Date.parse(value);
-    if (Number.isNaN(timestamp))
-        return undefined;
-    return new Date(timestamp);
+    const date = parseISO(toUtcTimestamp(value));
+    return isValid(date) ? date : undefined;
 }
 function getTimestampFallback(value, fallback = "No update") {
     return value?.trim() || fallback;

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.13.0",
+	"version": "0.14.0",
 	"type": "module",
 	"private": false,
 	"engines": {
@@ -87,6 +87,7 @@
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
 		"cmdk": "^1.1.1",
+		"date-fns": "^4.4.0",
 		"embla-carousel-react": "^8.6.0",
 		"input-otp": "^1.4.2",
 		"lucide-react": "^1.23.0",