@ciridae/ui 0.7.1 → 0.8.0

package/dist/components/blocks/comment-composer.d.ts

@@ -7,10 +7,12 @@ type CommentComposerProps = {
     defaultValue?: string;
     disabled?: boolean;
     isSubmitting?: boolean;
+    loadingLabel?: string;
     onSubmit: (body: string) => void | Promise<void>;
     onValueChange?: (value: string) => void;
     placeholder?: string;
+    submitLabel?: string;
     value?: string;
 };
-declare function CommentComposer({ actionsSlot, author, defaultExpanded, defaultValue, disabled, isSubmitting, onSubmit, onValueChange, placeholder, value, }: CommentComposerProps): React.JSX.Element;
+declare function CommentComposer({ actionsSlot, author, defaultExpanded, defaultValue, disabled, isSubmitting, loadingLabel, onSubmit, onValueChange, placeholder, submitLabel, value, }: CommentComposerProps): React.JSX.Element;
 export { CommentComposer, type CommentComposerProps };

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

@@ -4,7 +4,7 @@ import { getCommentAuthorInitials } from "./comment-types";
 import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
 import { InputGroupButton, InputGroupTextarea } from "../ui/input-group";
 const COMMENT_TEXTAREA_MAX_HEIGHT = 128;
-function CommentComposer({ actionsSlot, author, defaultExpanded = false, defaultValue = "", disabled = false, isSubmitting = false, onSubmit, onValueChange, placeholder = "Write a reply...", value, }) {
+function CommentComposer({ actionsSlot, author, defaultExpanded = false, defaultValue = "", disabled = false, isSubmitting = false, loadingLabel = "Posting...", onSubmit, onValueChange, placeholder = "Write a reply...", submitLabel = "Post", value, }) {
     const textareaRef = React.useRef(null);
     const state = useCommentComposerState({
         defaultExpanded,
@@ -19,7 +19,7 @@ function CommentComposer({ actionsSlot, author, defaultExpanded = false, default
         resizeCommentTextarea(textareaRef.current);
     }, [state.value]);
     const isDisabled = disabled || isSubmitting;
-    return (_jsx("form", { onSubmit: state.onSubmit, children: _jsxs("div", { className: "grid w-full gap-1.5 rounded-md border border-input bg-background px-2.5 py-2 shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[var(--focus-ring-width)] focus-within:ring-ring/50 dark:bg-input/30", "data-disabled": isDisabled ? "true" : undefined, children: [_jsxs("div", { className: "flex min-w-0 items-start gap-2", children: [_jsx(CommentComposerAvatar, { author: author }), _jsx(InputGroupTextarea, { "aria-label": "Comment", className: "max-h-32 min-h-7 overflow-y-hidden px-0 py-1 text-sm leading-5", disabled: isDisabled, onBlur: state.onBlur, onChange: state.onValueChange, onFocus: state.onFocus, placeholder: placeholder, ref: textareaRef, rows: 1, value: state.value })] }), _jsx(CommentComposerActions, { actionsSlot: actionsSlot, canSubmit: state.canSubmit, isSubmitting: isSubmitting, showActions: state.showActions })] }) }));
+    return (_jsx("form", { onSubmit: state.onSubmit, children: _jsxs("div", { className: "grid w-full gap-1.5 rounded-md border border-input bg-background px-2.5 py-2 shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[var(--focus-ring-width)] focus-within:ring-ring/50 dark:bg-input/30", "data-disabled": isDisabled ? "true" : undefined, children: [_jsxs("div", { className: "flex min-w-0 items-start gap-2", children: [_jsx(CommentComposerAvatar, { author: author }), _jsx(InputGroupTextarea, { "aria-label": "Comment", className: "max-h-32 min-h-7 overflow-y-hidden px-0 py-1 text-sm leading-5", disabled: isDisabled, onBlur: state.onBlur, onChange: state.onValueChange, onFocus: state.onFocus, placeholder: placeholder, ref: textareaRef, rows: 1, value: state.value })] }), _jsx(CommentComposerActions, { actionsSlot: actionsSlot, canSubmit: state.canSubmit, isSubmitting: isSubmitting, loadingLabel: loadingLabel, showActions: state.showActions, submitLabel: submitLabel })] }) }));
 }
 function useCommentComposerState({ defaultExpanded, defaultValue, disabled, isSubmitting, onSubmit, onValueChange, value, }) {
     const [localValue, setLocalValue] = React.useState(defaultValue);
@@ -75,7 +75,13 @@ function getSubmitHandler({ currentValue, disabled, isControlled, isSubmitting,
         const body = currentValue.trim();
         if (!body || disabled || isSubmitting)
             return;
-        await onSubmit(body);
+        try {
+            await onSubmit(body);
+        }
+        catch {
+            // a rejected submit keeps the draft; messaging is the handler's job
+            return;
+        }
         if (!isControlled) {
             setLocalValue("");
             setIsActive(false);
@@ -90,17 +96,17 @@ function getValueChangeHandler({ isControlled, onValueChange, setLocalValue, })
         onValueChange?.(nextValue);
     };
 }
-function CommentComposerActions({ actionsSlot, canSubmit, isSubmitting, showActions, }) {
+function CommentComposerActions({ actionsSlot, canSubmit, isSubmitting, loadingLabel, showActions, submitLabel, }) {
     if (!showActions)
         return null;
-    return (_jsxs("div", { className: "flex min-h-8 items-center justify-between gap-2 pl-8", children: [_jsx("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: actionsSlot }), _jsx(CommentSubmitButton, { canSubmit: canSubmit, isSubmitting: isSubmitting })] }));
+    return (_jsxs("div", { className: "flex min-h-8 items-center justify-between gap-2 pl-8", children: [_jsx("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: actionsSlot }), _jsx(CommentSubmitButton, { canSubmit: canSubmit, isSubmitting: isSubmitting, loadingLabel: loadingLabel, submitLabel: submitLabel })] }));
 }
 function CommentComposerAvatar({ author }) {
     const name = author?.name ?? "You";
     return (_jsxs(Avatar, { size: "sm", children: [_jsx(AvatarImage, { alt: "", src: author?.avatarUrl }), _jsx(AvatarFallback, { children: getCommentAuthorInitials(name) })] }));
 }
-function CommentSubmitButton({ canSubmit, isSubmitting, }) {
-    return (_jsx(InputGroupButton, { disabled: !canSubmit, loading: isSubmitting, loadingLabel: "Posting comment", size: "sm", type: "submit", children: "Post" }));
+function CommentSubmitButton({ canSubmit, isSubmitting, loadingLabel, submitLabel, }) {
+    return (_jsx(InputGroupButton, { disabled: !canSubmit, loading: isSubmitting, loadingLabel: loadingLabel, size: "sm", type: "submit", children: submitLabel }));
 }
 function resizeCommentTextarea(textarea) {
     if (!textarea)

package/dist/components/blocks/comment-thread.d.ts

@@ -4,6 +4,7 @@ type CommentThreadProps = {
     comments: CommentItemData[];
     composerAuthor?: CommentAuthor;
     composerPlaceholder?: string;
+    composerSubmitLabel?: string;
     emptyDescription?: string;
     emptyTitle?: string;
     isLoading?: boolean;
@@ -14,5 +15,5 @@ type CommentThreadProps = {
     showHeader?: boolean;
     title?: string;
 };
-declare function CommentThread({ comments, composerAuthor, composerPlaceholder, emptyDescription, emptyTitle, isLoading, isSubmitting, onSubmit, readOnly, renderCommentActions, showHeader, title, }: CommentThreadProps): React.JSX.Element;
+declare function CommentThread({ comments, composerAuthor, composerPlaceholder, composerSubmitLabel, emptyDescription, emptyTitle, isLoading, isSubmitting, onSubmit, readOnly, renderCommentActions, showHeader, title, }: CommentThreadProps): React.JSX.Element;
 export { CommentThread, type CommentThreadProps };

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

@@ -3,9 +3,9 @@ import { MessageSquareTextIcon } from "lucide-react";
 import { CommentComposer } from "./comment-composer";
 import { CommentItem } from "./comment-item";
 import { Skeleton } from "../ui/skeleton";
-function CommentThread({ comments, composerAuthor, composerPlaceholder, 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", }) {
+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 showComposer = !readOnly && Boolean(onSubmit);
-    return (_jsxs("section", { className: "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 }), showComposer && onSubmit ? (_jsx(CommentComposer, { author: composerAuthor, isSubmitting: isSubmitting, onSubmit: onSubmit, placeholder: composerPlaceholder })) : null] }));
+    return (_jsxs("section", { className: "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 }), showComposer && onSubmit ? (_jsx(CommentComposer, { author: composerAuthor, isSubmitting: isSubmitting, onSubmit: onSubmit, placeholder: composerPlaceholder, submitLabel: composerSubmitLabel })) : null] }));
 }
 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

@@ -3,10 +3,12 @@ import type { UserFeedbackItem } from "./feedback-tracking-types";
 type FeedbackCommentSubmitHandler = (feedback: UserFeedbackItem, body: string) => void | Promise<void>;
 type FeedbackCenterCommentThreadProps = {
     comments: CommentItemData[];
+    error?: Error | null;
     feedback?: UserFeedbackItem;
     isCommentSubmitting: boolean;
     isCommentsLoading: boolean;
+    onRetry?: () => void;
     onSubmitComment?: FeedbackCommentSubmitHandler;
 };
-declare function FeedbackCenterCommentThread({ comments, feedback, isCommentSubmitting, isCommentsLoading, onSubmitComment, }: FeedbackCenterCommentThreadProps): import("@types/react").JSX.Element;
+declare function FeedbackCenterCommentThread({ comments, error, feedback, isCommentSubmitting, isCommentsLoading, onRetry, onSubmitComment, }: FeedbackCenterCommentThreadProps): import("@types/react").JSX.Element;
 export { FeedbackCenterCommentThread, type FeedbackCommentSubmitHandler };

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

@@ -1,7 +1,13 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertCircleIcon } from "lucide-react";
 import { CommentThread } from "./comment-thread";
-function FeedbackCenterCommentThread({ comments, feedback, isCommentSubmitting, isCommentsLoading, onSubmitComment, }) {
-    return (_jsx(CommentThread, { comments: comments, composerPlaceholder: "Write a reply...", isLoading: isCommentsLoading, isSubmitting: isCommentSubmitting, onSubmit: getCommentSubmitHandler(feedback, onSubmitComment), readOnly: !onSubmitComment, showHeader: false }));
+import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
+import { Button } from "../ui/button";
+function FeedbackCenterCommentThread({ comments, error, feedback, isCommentSubmitting, isCommentsLoading, onRetry, onSubmitComment, }) {
+    if (error) {
+        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 }));
 }
 function getCommentSubmitHandler(feedback, onSubmitComment) {
     if (!feedback || !onSubmitComment)

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

@@ -0,0 +1,12 @@
+import type { FeedbackCenterTab } from "./feedback-center-sheet-parts";
+import type { FeedbackUrgency } from "./feedback-composer-types";
+type FeedbackCenterFooterProps = {
+    activeTab: FeedbackCenterTab;
+    formId: string;
+    isSubmitted: boolean;
+    isSubmitting: boolean;
+    onCancel: () => void;
+    urgency: FeedbackUrgency;
+};
+declare function FeedbackCenterFooter({ activeTab, formId, isSubmitted, isSubmitting, onCancel, urgency, }: FeedbackCenterFooterProps): import("@types/react").JSX.Element | null;
+export { FeedbackCenterFooter, type FeedbackCenterFooterProps };

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertTriangleIcon, SendIcon } from "lucide-react";
+import { Button } from "../ui/button";
+import { SheetFooter } from "../ui/sheet";
+function FeedbackCenterFooter({ activeTab, formId, isSubmitted, isSubmitting, onCancel, urgency, }) {
+    if (activeTab !== "submit" || isSubmitted)
+        return null;
+    return (_jsxs(SheetFooter, { children: [_jsx(Button, { disabled: isSubmitting, onClick: onCancel, type: "button", variant: "outline", children: "Cancel" }), _jsxs(Button, { form: formId, loading: isSubmitting, type: "submit", variant: urgency === "emergency" ? "destructive" : "default", children: [urgency === "emergency" ? _jsx(AlertTriangleIcon, {}) : _jsx(SendIcon, {}), urgency === "emergency" ? "Send emergency" : "Submit feedback"] })] }));
+}
+export { FeedbackCenterFooter };

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

@@ -2,33 +2,36 @@ import type * as React from "react";
 import type { CommentItemData } from "./comment-types";
 import { type FeedbackCommentSubmitHandler } from "./feedback-center-comments";
 import { type FeedbackComposerProps } from "./feedback-composer";
+import type { FeedbackUrgency } from "./feedback-composer-types";
 import type { UserFeedbackItem } from "./feedback-tracking-types";
 type FeedbackCenterTab = "mine" | "submit";
 type FeedbackCenterView = "detail" | "list";
-type FeedbackCenterComposerProps = Omit<FeedbackComposerProps, "actions" | "formId" | "onCancel" | "onSubmittedChange">;
+type FeedbackCenterComposerProps = Omit<FeedbackComposerProps, "actions" | "formId" | "onCancel" | "onDirtyChange" | "onSubmittedChange" | "onUrgencyChange">;
 type FeedbackCenterTabsProps = {
     commentsByFeedbackId: Record<string, CommentItemData[]>;
+    commentsError?: Error | null;
     composerProps: FeedbackCenterComposerProps;
     formId: string;
+    onDirtyChange: (dirty: boolean) => void;
+    onUrgencyChange: (urgency: FeedbackUrgency) => void;
     isCommentSubmitting: boolean;
     isCommentsLoading: boolean;
     isLoading: boolean;
     items: UserFeedbackItem[];
+    itemsError?: Error | null;
     onBack: () => void;
     onCancel: () => void;
     onSelectFeedback: (item: UserFeedbackItem) => void;
+    onRetryComments?: () => void;
+    onRetryItems?: () => void;
     onSubmittedChange: (submitted: boolean) => void;
     onSubmitComment?: FeedbackCommentSubmitHandler;
     selectedFeedback?: UserFeedbackItem;
+    renderEvidence?: (item: UserFeedbackItem) => React.ReactNode;
     view: FeedbackCenterView;
 };
-declare function FeedbackCenterSheetHeader(): React.JSX.Element;
-declare function FeedbackCenterTabs({ composerProps, commentsByFeedbackId, formId, isCommentSubmitting, isCommentsLoading, isLoading, items, onBack, onCancel, onSelectFeedback, onSubmittedChange, onSubmitComment, selectedFeedback, view, }: FeedbackCenterTabsProps): React.JSX.Element;
-declare function FeedbackCenterFooter({ activeTab, formId, isSubmitted, isSubmitting, onCancel, }: {
-    activeTab: FeedbackCenterTab;
-    formId: string;
-    isSubmitted: boolean;
-    isSubmitting: boolean;
-    onCancel: () => void;
-}): React.JSX.Element | null;
-export { FeedbackCenterFooter, FeedbackCenterSheetHeader, FeedbackCenterTabs, type FeedbackCenterTab, type 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;
+export { FeedbackCenterSheetHeader, FeedbackCenterTabs, type FeedbackCenterTab, type FeedbackCenterView, };

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

@@ -1,44 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { SendIcon } from "lucide-react";
 import { FeedbackCenterCommentThread, } from "./feedback-center-comments";
 import { FeedbackComposer } from "./feedback-composer";
 import { FeedbackUserDetail } from "./feedback-user-detail";
 import { FeedbackUserList } from "./feedback-user-list";
-import { Button } from "../ui/button";
-import { SheetDescription, SheetFooter, SheetHeader, SheetTitle } from "../ui/sheet";
+import { Badge } from "../ui/badge";
+import { SheetDescription, SheetHeader, SheetTitle } from "../ui/sheet";
 import { TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
-function FeedbackCenterSheetHeader() {
-    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, {})] }));
+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, formId, isCommentSubmitting, isCommentsLoading, isLoading, items, onBack, onCancel, onSelectFeedback, onSubmittedChange, onSubmitComment, selectedFeedback, view, }) {
-    return (_jsxs(_Fragment, { children: [_jsx(FeedbackCenterSubmitTab, { composerProps: composerProps, formId: formId, onCancel: onCancel, onSubmittedChange: onSubmittedChange }), _jsx(FeedbackCenterMineContent, { commentsByFeedbackId: commentsByFeedbackId, isCommentSubmitting: isCommentSubmitting, isCommentsLoading: isCommentsLoading, isLoading: isLoading, items: items, onBack: onBack, onSelectFeedback: onSelectFeedback, onSubmitComment: onSubmitComment, selectedFeedback: selectedFeedback, view: view })] }));
+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 FeedbackCenterTabsList() {
-    return (_jsxs(TabsList, { className: "w-full", children: [_jsx(TabsTrigger, { value: "submit", children: "Send feedback" }), _jsx(TabsTrigger, { value: "mine", children: "My feedback" })] }));
+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] })] }));
 }
-function FeedbackCenterSubmitTab({ composerProps, formId, onCancel, onSubmittedChange, }) {
-    return (_jsx(TabsContent, { className: "mt-0", value: "submit", children: _jsx(FeedbackComposer, { ...composerProps, actions: "external", formId: formId, onCancel: onCancel, onSubmittedChange: onSubmittedChange }) }));
-}
-function FeedbackCenterFooter({ activeTab, formId, isSubmitted, isSubmitting, onCancel, }) {
-    if (activeTab !== "submit" || isSubmitted)
-        return null;
-    return (_jsxs(SheetFooter, { children: [_jsx(Button, { disabled: isSubmitting, onClick: onCancel, type: "button", variant: "outline", children: "Cancel" }), _jsxs(Button, { form: formId, loading: isSubmitting, type: "submit", children: [_jsx(SendIcon, {}), "Submit feedback"] })] }));
+function FeedbackCenterSubmitTab({ composerProps, formId, onCancel, onDirtyChange, onSubmittedChange, onUrgencyChange, }) {
+    // forceMount keeps the composer draft alive across tab switches
+    return (_jsx(TabsContent, { className: "mt-0 data-[state=inactive]:hidden", forceMount: true, value: "submit", children: _jsx(FeedbackComposer, { ...composerProps, actions: "external", formId: formId, onCancel: onCancel, onDirtyChange: onDirtyChange, onSubmittedChange: onSubmittedChange, onUrgencyChange: onUrgencyChange }) }));
 }
 function FeedbackCenterMineContent(props) {
     return (_jsx(TabsContent, { className: "mt-0", value: "mine", children: _jsx(FeedbackCenterMineTab, { ...props }) }));
 }
-function FeedbackCenterMineTab({ isLoading, commentsByFeedbackId, isCommentSubmitting, isCommentsLoading, items, onBack, onSelectFeedback, onSubmitComment, selectedFeedback, view, }) {
+function FeedbackCenterMineTab({ isLoading, commentsByFeedbackId, commentsError, isCommentSubmitting, isCommentsLoading, items, itemsError, onBack, onSelectFeedback, onRetryComments, onRetryItems, onSubmitComment, selectedFeedback, renderEvidence, view, }) {
     if (view === "detail") {
-        return (_jsx(FeedbackCenterDetailPane, { comments: getFeedbackComments(commentsByFeedbackId, selectedFeedback), feedback: selectedFeedback, isCommentSubmitting: isCommentSubmitting, isCommentsLoading: isCommentsLoading, onBack: onBack, onSubmitComment: onSubmitComment }));
+        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(FeedbackUserList, { isLoading: isLoading, items: items, onSelectFeedback: onSelectFeedback, selectedId: selectedFeedback?.id }));
+    return (_jsx(FeedbackUserList, { error: itemsError, isLoading: isLoading, items: items, onSelectFeedback: onSelectFeedback, onRetry: onRetryItems, selectedId: selectedFeedback?.id }));
 }
-function FeedbackCenterDetailPane({ comments, feedback, isCommentSubmitting, isCommentsLoading, onBack, onSubmitComment, }) {
-    return (_jsx(FeedbackUserDetail, { activityLabel: "Comments", activitySlot: _jsx(FeedbackCenterCommentThread, { comments: comments, feedback: feedback, isCommentSubmitting: isCommentSubmitting, isCommentsLoading: isCommentsLoading, onSubmitComment: onSubmitComment }), feedback: feedback, onBack: onBack }));
+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 getFeedbackComments(commentsByFeedbackId, feedback) {
     if (!feedback)
         return [];
     return commentsByFeedbackId[feedback.id] ?? [];
 }
-export { FeedbackCenterFooter, FeedbackCenterSheetHeader, FeedbackCenterTabs, };
+export { FeedbackCenterSheetHeader, FeedbackCenterTabs, };

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

@@ -4,16 +4,22 @@ import type { FeedbackCommentSubmitHandler } from "./feedback-center-comments";
 import { type FeedbackCenterTab } from "./feedback-center-sheet-parts";
 import type { FeedbackComposerProps } from "./feedback-composer";
 import type { UserFeedbackItem } from "./feedback-tracking-types";
-type FeedbackCenterSheetProps = Omit<FeedbackComposerProps, "actions" | "formId" | "onCancel" | "onSubmittedChange"> & {
+type FeedbackCenterSheetProps = Omit<FeedbackComposerProps, "actions" | "formId" | "onCancel" | "onDirtyChange" | "onSubmittedChange" | "onUrgencyChange"> & {
     commentsByFeedbackId?: Record<string, CommentItemData[]>;
+    commentsError?: Error | null;
     defaultTab?: FeedbackCenterTab;
     isCommentSubmitting?: boolean;
     isCommentsLoading?: boolean;
     isLoading?: boolean;
+    itemsError?: Error | null;
     items: UserFeedbackItem[];
+    onSelectFeedback?: (item: UserFeedbackItem | undefined) => void;
+    onRetryComments?: () => void;
+    onRetryItems?: () => void;
     onSubmitComment?: FeedbackCommentSubmitHandler;
     onOpenChange: (open: boolean) => void;
     open: boolean;
+    renderEvidence?: (item: UserFeedbackItem) => React.ReactNode;
 };
-declare function FeedbackCenterSheet({ commentsByFeedbackId, defaultTab, isCommentSubmitting, isCommentsLoading, isLoading, items, onSubmitComment, onOpenChange, open, ...composerProps }: FeedbackCenterSheetProps): React.JSX.Element;
+declare function FeedbackCenterSheet(props: FeedbackCenterSheetProps): React.JSX.Element;
 export { FeedbackCenterSheet, type FeedbackCenterSheetProps };

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

@@ -1,36 +1,93 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { FeedbackCenterFooter, FeedbackCenterSheetHeader, FeedbackCenterTabs, } from "./feedback-center-sheet-parts";
-import { Sheet, SheetBody, SheetContent } from "../ui/sheet";
+import { FeedbackCenterFooter } from "./feedback-center-footer";
+import { FeedbackCenterSheetHeader, FeedbackCenterTabs, } from "./feedback-center-sheet-parts";
+import { FormSheet, useFormSheetActions } from "../ui/form-sheet";
+import { SheetBody, SheetContent } from "../ui/sheet";
 import { Tabs } from "../ui/tabs";
-function FeedbackCenterSheet({ commentsByFeedbackId = {}, defaultTab = "submit", isCommentSubmitting = false, isCommentsLoading = false, isLoading = false, items, onSubmitComment, onOpenChange, open, ...composerProps }) {
+function FeedbackCenterSheet(props) {
+    const state = useFeedbackCenterSheetState(props);
+    return (_jsx(FormSheet, { closeDisabled: props.isSubmitting ?? false, isDirty: state.isDirty, onOpenChange: props.onOpenChange, open: props.open, children: _jsx(FeedbackCenterSheetContent, { props: props, state: state }) }));
+}
+function FeedbackCenterSheetContent({ props, state, }) {
+    const { requestClose } = useFormSheetActions();
+    return (_jsx(SheetContent, { size: "md", 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 })] }) }));
+}
+function useFeedbackCenterSheetState(props) {
+    const defaultTab = props.defaultTab ?? "submit";
+    const onSelectFeedback = props.onSelectFeedback;
     const formId = React.useId();
     const [activeTab, setActiveTab] = React.useState(defaultTab);
     const [isSubmitted, setIsSubmitted] = React.useState(false);
+    const [isDirty, setIsDirty] = React.useState(false);
     const [selectedId, setSelectedId] = React.useState();
+    const [urgency, setUrgency] = React.useState("normal");
     const [view, setView] = React.useState("list");
-    const selectedFeedback = getSelectedFeedback(items, selectedId);
+    const selectedFeedback = getSelectedFeedback(props.items, selectedId);
+    const unreadReplyCount = props.items.reduce((count, item) => count + (item.unreadReplyCount ?? 0), 0);
     const handleBack = React.useCallback(() => {
+        setSelectedId(undefined);
         setView("list");
-    }, []);
+        onSelectFeedback?.(undefined);
+    }, [onSelectFeedback]);
     const handleSelectFeedback = React.useCallback((item) => {
         setSelectedId(item.id);
         setView("detail");
-    }, []);
+        onSelectFeedback?.(item);
+    }, [onSelectFeedback]);
     const handleTabChange = React.useCallback((tab) => {
         setActiveTab(tab);
-        setIsSubmitted(false);
+        setSelectedId(undefined);
         setView("list");
-    }, []);
+        onSelectFeedback?.(undefined);
+    }, [onSelectFeedback]);
+    const wasOpenRef = React.useRef(props.open);
     React.useEffect(() => {
-        if (!open) {
-            setActiveTab(defaultTab);
-            setIsSubmitted(false);
-            setSelectedId(undefined);
-            setView("list");
+        if (props.open) {
+            wasOpenRef.current = true;
+            return;
         }
-    }, [defaultTab, open]);
-    return (_jsx(Sheet, { onOpenChange: onOpenChange, open: open, children: _jsx(SheetContent, { size: "md", children: _jsxs(Tabs, { className: "min-h-0 flex-1", onValueChange: setFeedbackCenterTab(handleTabChange), value: activeTab, children: [_jsx(FeedbackCenterSheetHeader, {}), _jsx(SheetBody, { className: "pb-(--panel-padding)", children: _jsx(FeedbackCenterTabs, { composerProps: composerProps, commentsByFeedbackId: commentsByFeedbackId, formId: formId, isCommentSubmitting: isCommentSubmitting, isCommentsLoading: isCommentsLoading, isLoading: isLoading, items: items, onBack: handleBack, onCancel: () => onOpenChange(false), onSelectFeedback: handleSelectFeedback, onSubmittedChange: setIsSubmitted, onSubmitComment: onSubmitComment, selectedFeedback: selectedFeedback, view: view }) }), _jsx(FeedbackCenterFooter, { activeTab: activeTab, formId: formId, isSubmitted: isSubmitted, isSubmitting: composerProps.isSubmitting ?? false, onCancel: () => onOpenChange(false) })] }) }) }));
+        if (!wasOpenRef.current)
+            return;
+        wasOpenRef.current = false;
+        setActiveTab(defaultTab);
+        setIsSubmitted(false);
+        setIsDirty(false);
+        setSelectedId(undefined);
+        setUrgency("normal");
+        setView("list");
+        // hosts tracking selection drop it when the sheet closes
+        onSelectFeedback?.(undefined);
+    }, [defaultTab, onSelectFeedback, props.open]);
+    return {
+        activeTab,
+        formId,
+        handleBack,
+        handleSelectFeedback,
+        handleTabChange,
+        isDirty,
+        isSubmitted,
+        selectedFeedback,
+        setIsDirty,
+        setIsSubmitted,
+        setUrgency,
+        unreadReplyCount,
+        urgency,
+        view,
+    };
+}
+function getFeedbackComposerProps(props) {
+    return {
+        acceptedFileTypes: props.acceptedFileTypes,
+        attachmentsEnabled: props.attachmentsEnabled,
+        defaultType: props.defaultType,
+        defaultUrgency: props.defaultUrgency,
+        isSubmitting: props.isSubmitting,
+        maxAttachmentSizeMb: props.maxAttachmentSizeMb,
+        maxAttachments: props.maxAttachments,
+        onSubmit: props.onSubmit,
+        urgencyEnabled: props.urgencyEnabled,
+    };
 }
 function getSelectedFeedback(items, selectedId) {
     if (!selectedId)

package/dist/components/blocks/feedback-composer-parts.d.ts

@@ -1,16 +1,16 @@
-import type { FeedbackType } from "./feedback-composer-types";
+import type { FeedbackType, FeedbackUrgency } from "./feedback-composer-types";
 declare function FeedbackTypeField({ disabled, onTypeChange, type, }: {
     disabled: boolean;
     onTypeChange: (type: FeedbackType) => void;
     type: FeedbackType;
 }): import("@types/react").JSX.Element;
-declare function FeedbackSubmittedState({ onCancel, onSendAnother, referenceId, }: {
+declare function FeedbackSubmittedState({ onCancel, onSendAnother, }: {
     onCancel?: () => void;
     onSendAnother: () => void;
-    referenceId?: string;
 }): import("@types/react").JSX.Element;
-declare function FeedbackComposerActions({ isSubmitting, onCancel, }: {
+declare function FeedbackComposerActions({ isSubmitting, onCancel, urgency, }: {
     isSubmitting: boolean;
     onCancel?: () => void;
+    urgency: FeedbackUrgency;
 }): import("@types/react").JSX.Element;
 export { FeedbackComposerActions, FeedbackSubmittedState, FeedbackTypeField };

package/dist/components/blocks/feedback-composer-parts.js

@@ -31,11 +31,11 @@ function FeedbackTypeOption({ option }) {
     const Icon = option.icon;
     return (_jsxs(ToggleGroupItem, { className: "w-full px-2", value: option.value, children: [_jsx(Icon, { className: "size-4 shrink-0 text-muted-foreground" }), _jsx("span", { className: "truncate", children: option.label })] }));
 }
-function FeedbackSubmittedState({ onCancel, onSendAnother, referenceId, }) {
-    return (_jsxs("div", { className: "grid gap-(--panel-gap)", children: [_jsxs(Alert, { children: [_jsx(CheckCircle2Icon, {}), _jsx(AlertTitle, { children: "Feedback submitted" }), _jsxs(AlertDescription, { children: [_jsx("p", { children: "Your feedback has been sent to the team." }), referenceId ? (_jsxs("p", { children: ["Reference", " ", _jsx("span", { className: "font-mono text-foreground tabular-nums", children: referenceId })] })) : null] })] }), _jsxs("div", { className: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", children: [_jsx(Button, { onClick: onSendAnother, type: "button", variant: "outline", children: "Send another" }), onCancel ? (_jsx(Button, { onClick: onCancel, type: "button", children: "Done" })) : null] })] }));
+function FeedbackSubmittedState({ onCancel, onSendAnother, }) {
+    return (_jsxs("div", { className: "grid gap-(--panel-gap)", children: [_jsxs(Alert, { children: [_jsx(CheckCircle2Icon, {}), _jsx(AlertTitle, { children: "Feedback sent" }), _jsx(AlertDescription, { children: _jsx("p", { children: "The team will follow up here." }) })] }), _jsxs("div", { className: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", children: [_jsx(Button, { onClick: onSendAnother, type: "button", variant: "outline", children: "Send another" }), onCancel ? (_jsx(Button, { onClick: onCancel, type: "button", children: "Done" })) : null] })] }));
 }
-function FeedbackComposerActions({ isSubmitting, onCancel, }) {
-    return (_jsxs("div", { className: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", children: [onCancel ? (_jsx(Button, { disabled: isSubmitting, onClick: onCancel, type: "button", variant: "outline", children: "Cancel" })) : null, _jsxs(Button, { loading: isSubmitting, type: "submit", children: [_jsx(SendIcon, {}), "Submit feedback"] })] }));
+function FeedbackComposerActions({ isSubmitting, onCancel, urgency, }) {
+    return (_jsxs("div", { className: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", children: [onCancel ? (_jsx(Button, { disabled: isSubmitting, onClick: onCancel, type: "button", variant: "outline", children: "Cancel" })) : null, _jsxs(Button, { loading: isSubmitting, type: "submit", variant: urgency === "emergency" ? "destructive" : "default", children: [_jsx(SendIcon, {}), urgency === "emergency" ? "Send emergency" : "Submit feedback"] })] }));
 }
 function isFeedbackType(value) {
     return feedbackTypeOptions.some((option) => option.value === value);

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

@@ -1,11 +1,12 @@
+import type { FeedbackAffectedScope, FeedbackUrgency } from "./feedback-tracking-types";
 type FeedbackType = "bug" | "feature" | "general";
 type FeedbackSubmitValues = {
+    affectedScope: FeedbackAffectedScope;
     attachments: File[];
     description: string;
     subject: string;
     type: FeedbackType;
+    urgency: FeedbackUrgency;
 };
-type FeedbackSubmitResult = {
-    referenceId?: string;
-};
-export type { FeedbackSubmitResult, FeedbackSubmitValues, FeedbackType };
+type FeedbackValidationError = "description" | "emergency_confirmation" | "subject" | undefined;
+export type { FeedbackAffectedScope, FeedbackSubmitValues, FeedbackType, FeedbackUrgency, FeedbackValidationError, };

package/dist/components/blocks/feedback-composer.d.ts

@@ -1,17 +1,21 @@
 import * as React from "react";
-import type { FeedbackSubmitResult, FeedbackSubmitValues, FeedbackType } from "./feedback-composer-types";
+import type { FeedbackSubmitValues, FeedbackType, FeedbackUrgency } from "./feedback-composer-types";
 type FeedbackComposerProps = {
     acceptedFileTypes?: string;
     actions?: "inline" | "external";
     attachmentsEnabled?: boolean;
     defaultType?: FeedbackType;
+    defaultUrgency?: FeedbackUrgency;
     formId?: string;
     isSubmitting?: boolean;
     maxAttachmentSizeMb?: number;
     maxAttachments?: number;
     onCancel?: () => void;
+    onDirtyChange?: (dirty: boolean) => void;
     onSubmittedChange?: (submitted: boolean) => void;
-    onSubmit: (values: FeedbackSubmitValues) => void | Promise<void | FeedbackSubmitResult>;
+    onUrgencyChange?: (urgency: FeedbackUrgency) => void;
+    onSubmit: (values: FeedbackSubmitValues) => void | Promise<void>;
+    urgencyEnabled?: boolean;
 };
 declare function FeedbackComposer(props: FeedbackComposerProps): React.JSX.Element;
-export { FeedbackComposer, type FeedbackComposerProps, type FeedbackSubmitResult, type FeedbackSubmitValues, type FeedbackType, };
+export { FeedbackComposer, type FeedbackComposerProps, type FeedbackSubmitValues, type FeedbackType, };