@ciridae/ui 0.11.3 → 0.12.1

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

@@ -55,6 +55,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 { FeedbackStatusEvent, UserFeedbackItem } 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: FeedbackStatusEvent[];
 };
-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,14 +1,46 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AlertCircleIcon } from "lucide-react";
-import { CommentThread } from "./comment-thread.js";
+import { CommentComposer } from "./comment-composer.js";
+import { CommentItem } from "./comment-item.js";
+import { formatFeedbackTimestamp, getFeedbackTimestampDateTime } from "./feedback-date-format.js";
+import { FeedbackStatusBadge } from "./feedback-status-badge.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, }) {
     // 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);
+    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] }));
+}
+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 timestampOrder = left.createdAt.localeCompare(right.createdAt);
+    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) })] }));
+}
+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) {
     if (!feedback || !onSubmitComment)

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

@@ -3,11 +3,12 @@ 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 { FeedbackStatusEvent, UserFeedbackItem } from "./feedback-tracking-types.js";
 type FeedbackCenterTab = "mine" | "submit";
 type FeedbackCenterView = "detail" | "list";
 type FeedbackCenterComposerProps = Omit<FeedbackComposerProps, "actions" | "formId" | "onCancel" | "onDirtyChange" | "onSubmittedChange" | "onUrgencyChange">;
 type FeedbackCenterTabsProps = {
+    canComment?: (item: UserFeedbackItem) => boolean;
     commentsByFeedbackId: Record<string, CommentItemData[]>;
     commentsError?: Error | null;
     composerProps: FeedbackCenterComposerProps;
@@ -28,10 +29,11 @@ type FeedbackCenterTabsProps = {
     onSubmitComment?: FeedbackCommentSubmitHandler;
     selectedFeedback?: UserFeedbackItem;
     renderEvidence?: (item: UserFeedbackItem) => React.ReactNode;
+    statusEventsByFeedbackId: Record<string, FeedbackStatusEvent[]>;
     view: FeedbackCenterView;
 };
 declare function FeedbackCenterSheetHeader({ unreadReplyCount }: {
     unreadReplyCount: number;
 }): React.JSX.Element;
-declare function FeedbackCenterTabs({ 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({ 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, 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,23 @@ function FeedbackCenterSubmitTab({ composerProps, formId, onCancel, onDirtyChang
 function FeedbackCenterMineContent(props) {
     return (_jsx(TabsContent, { className: "mt-0", value: "mine", children: _jsx(FeedbackCenterMineTab, { ...props }) }));
 }
-function FeedbackCenterMineTab({ 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), commentsError: commentsError, feedback: selectedFeedback, isCommentSubmitting: isCommentSubmitting, isCommentsLoading: isCommentsLoading, onBack: onBack, onRetryComments: onRetryComments, onSubmitComment: onSubmitComment, renderEvidence: renderEvidence }));
+        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(FeedbackUserList, { error: itemsError, isLoading: isLoading, items: items, onSelectFeedback: onSelectFeedback, onRetry: onRetryItems, selectedId: selectedFeedback?.id }));
 }
-function FeedbackCenterDetailPane({ 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: 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) {
     if (!feedback)
         return [];
     return commentsByFeedbackId[feedback.id] ?? [];
 }
+function getFeedbackStatusEvents(statusEventsByFeedbackId, feedback) {
+    if (!feedback)
+        return [];
+    return statusEventsByFeedbackId[feedback.id] ?? [];
+}
 export { FeedbackCenterSheetHeader, FeedbackCenterTabs, };

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

@@ -3,8 +3,9 @@ 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 { FeedbackStatusEvent, UserFeedbackItem } from "./feedback-tracking-types.js";
 type FeedbackCenterSheetProps = Omit<FeedbackComposerProps, "actions" | "formId" | "onCancel" | "onDirtyChange" | "onSubmittedChange" | "onUrgencyChange"> & {
+    canComment?: (item: UserFeedbackItem) => boolean;
     commentsByFeedbackId?: Record<string, CommentItemData[]>;
     commentsError?: Error | null;
     defaultTab?: FeedbackCenterTab;
@@ -20,6 +21,7 @@ type FeedbackCenterSheetProps = Omit<FeedbackComposerProps, "actions" | "formId"
     onOpenChange: (open: boolean) => void;
     open: boolean;
     renderEvidence?: (item: UserFeedbackItem) => React.ReactNode;
+    statusEventsByFeedbackId?: Record<string, FeedbackStatusEvent[]>;
 };
 declare function FeedbackCenterSheet(props: FeedbackCenterSheetProps): React.JSX.Element;
-export { FeedbackCenterSheet, type FeedbackCenterSheetProps };
+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, { 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-status-badge.js

@@ -10,5 +10,6 @@ const feedbackStatusVariants = {
     in_progress: "info",
     no_action: "secondary",
     received: "outline",
+    withdrawn: "secondary",
 };
 export { FeedbackStatusBadge };

package/dist/components/blocks/feedback-table-sort.js

@@ -72,6 +72,7 @@ const statusSortOrder = {
     in_progress: 1,
     no_action: 4,
     received: 0,
+    withdrawn: 5,
 };
 const typeSortOrder = {
     bug: 0,

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

@@ -1,4 +1,4 @@
-declare const feedbackStatusValues: readonly ["received", "in_progress", "discussion_required", "completed", "no_action"];
+declare const feedbackStatusValues: readonly ["received", "in_progress", "discussion_required", "completed", "no_action", "withdrawn"];
 type FeedbackStatus = (typeof feedbackStatusValues)[number];
 type StakeholderFeedbackType = "bug" | "feature" | "general";
 type FeedbackUrgency = "emergency" | "normal";
@@ -42,6 +42,11 @@ type UserFeedbackItem = {
     updatedAt?: string;
     urgency?: FeedbackUrgency;
 };
+type FeedbackStatusEvent = {
+    createdAt: string;
+    id: string;
+    status: FeedbackStatus;
+};
 type FeedbackMetrics = {
     completed: number;
     discussionRequired: number;
@@ -75,6 +80,9 @@ declare const feedbackStatusOptions: readonly [{
 }, {
     readonly label: string;
     readonly value: "no_action";
+}, {
+    readonly label: string;
+    readonly value: "withdrawn";
 }];
 declare const feedbackTypeOptions: readonly [{
     readonly label: "All types";
@@ -90,4 +98,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 FeedbackSubmittedBy, type FeedbackTimelineEvent, type FeedbackUrgency, type StakeholderFeedbackItem, type StakeholderFeedbackType, type UserFeedbackItem, };
+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, };

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

@@ -5,6 +5,7 @@ const feedbackStatusValues = [
     "discussion_required",
     "completed",
     "no_action",
+    "withdrawn",
 ];
 const feedbackStatusLabels = {
     completed: "Completed",
@@ -12,6 +13,7 @@ const feedbackStatusLabels = {
     in_progress: "In progress",
     no_action: "No action",
     received: "Received",
+    withdrawn: "Canceled",
 };
 const feedbackTypeLabels = {
     bug: "Bug",
@@ -25,6 +27,7 @@ const feedbackStatusOptions = [
     { label: feedbackStatusLabels.discussion_required, value: "discussion_required" },
     { label: feedbackStatusLabels.completed, value: "completed" },
     { label: feedbackStatusLabels.no_action, value: "no_action" },
+    { label: feedbackStatusLabels.withdrawn, value: "withdrawn" },
 ];
 const feedbackTypeOptions = [
     { label: "All types", value: "all" },

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,26 +1,15 @@
+import { format, formatDistanceToNowStrict, isValid, parseISO } from "date-fns";
 function formatTimestamp(value, options = {}) {
     const date = parseTimestamp(value);
     if (!date)
         return getTimestampFallback(value, options.fallback);
-    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);
+    return formatDistanceToNowStrict(date, { addSuffix: true });
 }
 function formatTimestampFull(value, options = {}) {
     const date = parseTimestamp(value);
     if (!date)
         return getTimestampFallback(value, options.fallback);
-    return dateTimeFormatter.format(date);
+    return format(date, "PPp");
 }
 function getTimestampDateTime(value) {
     const date = parseTimestamp(value);
@@ -39,36 +28,10 @@ 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(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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ciridae/ui",
-	"version": "0.11.3",
+	"version": "0.12.1",
 	"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",