@ciridae/ui 0.10.0 → 0.11.2

package/dist/components/blocks/admin-users-table.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { MoreHorizontalIcon, ShieldCheckIcon, UserPlusIcon } from "lucide-react";
-import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
-import { Badge } from "../ui/badge";
-import { Button } from "../ui/button";
-import { DataTable, DataTableContent, DataTableEmpty, DataTableSkeleton } from "../ui/data-table";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "../ui/dropdown-menu";
-import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar.js";
+import { Badge } from "../ui/badge.js";
+import { Button } from "../ui/button.js";
+import { DataTable, DataTableContent, DataTableEmpty, DataTableSkeleton } from "../ui/data-table.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "../ui/dropdown-menu.js";
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table.js";
 function AdminUsersTable({ isLoading = false, users, ...actions }) {
     if (isLoading) {
         return _jsx(AdminUsersTableLoading, {});

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { type CommentAuthor } from "./comment-types";
+import { type CommentAuthor } from "./comment-types.js";
 type CommentComposerProps = {
     actionsSlot?: React.ReactNode;
     author?: CommentAuthor;

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

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { getCommentAuthorInitials } from "./comment-types";
-import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
-import { InputGroupButton, InputGroupTextarea } from "../ui/input-group";
+import { getCommentAuthorInitials } from "./comment-types.js";
+import { cn } from "../../lib/utils.js";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar.js";
+import { InputGroupButton, InputGroupTextarea } from "../ui/input-group.js";
 const COMMENT_TEXTAREA_MAX_HEIGHT = 128;
 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);
@@ -17,9 +18,17 @@ function CommentComposer({ actionsSlot, author, defaultExpanded = false, default
     });
     React.useEffect(() => {
         resizeCommentTextarea(textareaRef.current);
-    }, [state.value]);
+        // showActions is a dep because each min-height bakes into the inline
+        // height this writes; a collapse without a value change must recompute.
+    }, [state.showActions, 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, loadingLabel: loadingLabel, showActions: state.showActions, submitLabel: submitLabel })] }) }));
+    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", 
+                            // An active composer opens a few lines of room; min-height beats
+                            // the resize logic's inline height, so growth still works. The
+                            // two min-heights are exclusive because cn resolves no conflicts,
+                            // and important because the base Textarea's own min-h-16 is
+                            // emitted after both and would otherwise win in every state.
+                            className: cn("max-h-32 overflow-y-hidden px-0 py-1 text-sm leading-5", state.showActions ? "min-h-14!" : "min-h-7!"), disabled: isDisabled, onBlur: state.onBlur, onChange: state.onValueChange, onFocus: state.onFocus, onKeyDown: onComposerKeyDown, 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);
@@ -108,6 +117,15 @@ function CommentComposerAvatar({ author }) {
 function CommentSubmitButton({ canSubmit, isSubmitting, loadingLabel, submitLabel, }) {
     return (_jsx(InputGroupButton, { disabled: !canSubmit, loading: isSubmitting, loadingLabel: loadingLabel, size: "sm", type: "submit", children: submitLabel }));
 }
+/** Cmd/Ctrl+Enter posts; plain Enter keeps writing, as in every comment box. */
+function onComposerKeyDown(event) {
+    if (event.key !== "Enter" || !(event.metaKey || event.ctrlKey))
+        return;
+    if (event.nativeEvent.isComposing)
+        return; // mid-IME Enter confirms the composition
+    event.preventDefault();
+    event.currentTarget.form?.requestSubmit();
+}
 function resizeCommentTextarea(textarea) {
     if (!textarea)
         return;

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

@@ -1,5 +1,5 @@
 import type * as React from "react";
-import { type CommentItemData } from "./comment-types";
+import { type CommentItemData } from "./comment-types.js";
 type CommentItemProps = {
     actionsSlot?: React.ReactNode;
     comment: CommentItemData;

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "../../lib/utils";
-import { formatTimestamp, formatTimestampFull, getTimestampDateTime } from "./timestamp-format";
-import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
-import { getCommentAuthorInitials } from "./comment-types";
+import { cn } from "../../lib/utils.js";
+import { formatTimestamp, formatTimestampFull, getTimestampDateTime } from "./timestamp-format.js";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar.js";
+import { getCommentAuthorInitials } from "./comment-types.js";
 function CommentItem({ actionsSlot, comment }) {
     return (_jsxs("article", { className: "group/comment flex min-w-0 gap-3 rounded-md px-1 py-3", children: [_jsx(CommentAvatar, { comment: comment }), _jsxs("div", { className: "grid min-w-0 flex-1 gap-1.5", children: [_jsx(CommentHeader, { actionsSlot: actionsSlot, comment: comment }), _jsx("p", { className: "text-sm leading-relaxed break-words whitespace-pre-wrap text-foreground", children: comment.body })] })] }));
 }

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

@@ -1,5 +1,5 @@
-import type * as React from "react";
-import type { CommentAuthor, CommentItemData } from "./comment-types";
+import * as React from "react";
+import type { CommentAuthor, CommentItemData } from "./comment-types.js";
 type CommentThreadProps = {
     comments: CommentItemData[];
     composerAuthor?: CommentAuthor;

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

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

package/dist/components/blocks/copy-field.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CheckIcon, CopyIcon } from "lucide-react";
 import { useEffect, useId, useState } from "react";
 import { toast } from "sonner";
-import { Button } from "../ui/button";
-import { Input } from "../ui/input";
-import { Label } from "../ui/label";
+import { Button } from "../ui/button.js";
+import { Input } from "../ui/input.js";
+import { Label } from "../ui/label.js";
 /** PostHog's own no-capture vocabulary — a fixed class name, not app config. */
 const POSTHOG_NO_CAPTURE_CLASS_NAME = "ph-no-capture";
 const COPIED_RESET_DELAY = 2000;

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

@@ -1,5 +1,5 @@
-import type { CommentItemData } from "./comment-types";
-import type { UserFeedbackItem } from "./feedback-tracking-types";
+import type { CommentItemData } from "./comment-types.js";
+import type { UserFeedbackItem } from "./feedback-tracking-types.js";
 type FeedbackCommentSubmitHandler = (feedback: UserFeedbackItem, body: string) => void | Promise<void>;
 type FeedbackCenterCommentThreadProps = {
     comments: CommentItemData[];

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AlertCircleIcon } from "lucide-react";
-import { CommentThread } from "./comment-thread";
-import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
-import { Button } from "../ui/button";
+import { CommentThread } from "./comment-thread.js";
+import { Alert, AlertDescription, AlertTitle } from "../ui/alert.js";
+import { Button } from "../ui/button.js";
 function FeedbackCenterCommentThread({ comments, error, feedback, isCommentSubmitting, isCommentsLoading, onRetry, onSubmitComment, }) {
     // A retry in flight shows the thread's loading state, not the stale error.
     if (error && !isCommentsLoading) {

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

@@ -1,5 +1,5 @@
-import type { FeedbackCenterTab } from "./feedback-center-sheet-parts";
-import type { FeedbackUrgency } from "./feedback-composer-types";
+import type { FeedbackCenterTab } from "./feedback-center-sheet-parts.js";
+import type { FeedbackUrgency } from "./feedback-composer-types.js";
 type FeedbackCenterFooterProps = {
     activeTab: FeedbackCenterTab;
     formId: string;

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

@@ -1,7 +1,7 @@
 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";
+import { Button } from "../ui/button.js";
+import { SheetFooter } from "../ui/sheet.js";
 function FeedbackCenterFooter({ activeTab, formId, isSubmitted, isSubmitting, onCancel, urgency, }) {
     if (activeTab !== "submit" || isSubmitted)
         return null;

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

@@ -1,9 +1,9 @@
 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";
+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";
 type FeedbackCenterTab = "mine" | "submit";
 type FeedbackCenterView = "detail" | "list";
 type FeedbackCenterComposerProps = Omit<FeedbackComposerProps, "actions" | "formId" | "onCancel" | "onDirtyChange" | "onSubmittedChange" | "onUrgencyChange">;

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

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { FeedbackCenterCommentThread, } from "./feedback-center-comments";
-import { FeedbackComposer } from "./feedback-composer";
-import { FeedbackUserDetail } from "./feedback-user-detail";
-import { FeedbackUserList } from "./feedback-user-list";
-import { Badge } from "../ui/badge";
-import { SheetDescription, SheetHeader, SheetTitle } from "../ui/sheet";
-import { TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
+import { FeedbackCenterCommentThread, } from "./feedback-center-comments.js";
+import { FeedbackComposer } from "./feedback-composer.js";
+import { FeedbackUserDetail } from "./feedback-user-detail.js";
+import { FeedbackUserList } from "./feedback-user-list.js";
+import { Badge } from "../ui/badge.js";
+import { SheetDescription, SheetHeader, SheetTitle } from "../ui/sheet.js";
+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 })] }));
 }

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

@@ -1,9 +1,9 @@
 import * as React from "react";
-import type { CommentItemData } from "./comment-types";
-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";
+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";
 type FeedbackCenterSheetProps = Omit<FeedbackComposerProps, "actions" | "formId" | "onCancel" | "onDirtyChange" | "onSubmittedChange" | "onUrgencyChange"> & {
     commentsByFeedbackId?: Record<string, CommentItemData[]>;
     commentsError?: Error | null;

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-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";
+import { FeedbackCenterFooter } from "./feedback-center-footer.js";
+import { FeedbackCenterSheetHeader, FeedbackCenterTabs, } from "./feedback-center-sheet-parts.js";
+import { FormSheet, useFormSheetActions } from "../ui/form-sheet.js";
+import { SheetBody, SheetContent } from "../ui/sheet.js";
+import { Tabs } from "../ui/tabs.js";
 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 }) }));

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

@@ -1,4 +1,4 @@
-import type { FeedbackType, FeedbackUrgency } from "./feedback-composer-types";
+import type { FeedbackType, FeedbackUrgency } from "./feedback-composer-types.js";
 declare function FeedbackTypeField({ disabled, onTypeChange, type, }: {
     disabled: boolean;
     onTypeChange: (type: FeedbackType) => void;

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BugIcon, CheckCircle2Icon, LightbulbIcon, MessageSquareTextIcon, SendIcon, } from "lucide-react";
-import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
-import { Button } from "../ui/button";
-import { FieldContent, FieldSet, FieldTitle } from "../ui/field";
-import { ToggleGroup, ToggleGroupItem } from "../ui/toggle-group";
+import { Alert, AlertDescription, AlertTitle } from "../ui/alert.js";
+import { Button } from "../ui/button.js";
+import { FieldContent, FieldSet, FieldTitle } from "../ui/field.js";
+import { ToggleGroup, ToggleGroupItem } from "../ui/toggle-group.js";
 const feedbackTypeOptions = [
     {
         icon: BugIcon,

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

@@ -1,4 +1,4 @@
-import type { FeedbackAffectedScope, FeedbackUrgency } from "./feedback-tracking-types";
+import type { FeedbackAffectedScope, FeedbackUrgency } from "./feedback-tracking-types.js";
 type FeedbackType = "bug" | "feature" | "general";
 type FeedbackSubmitValues = {
     affectedScope: FeedbackAffectedScope;

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { FeedbackSubmitValues, FeedbackType, FeedbackUrgency } from "./feedback-composer-types";
+import type { FeedbackSubmitValues, FeedbackType, FeedbackUrgency } from "./feedback-composer-types.js";
 type FeedbackComposerProps = {
     acceptedFileTypes?: string;
     actions?: "inline" | "external";

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

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { FeedbackComposerActions, FeedbackSubmittedState, FeedbackTypeField, } from "./feedback-composer-parts";
-import { FeedbackEmergencyFields } from "./feedback-emergency-fields";
-import { submitFeedbackComposer } from "./submit-feedback-composer";
-import { useFeedbackComposerState } from "./use-feedback-composer-state";
-import { FileUploadField } from "../ui/file-upload-field";
-import { Field, FieldContent, FieldError, FieldGroup, FieldLabel } from "../ui/field";
-import { Input } from "../ui/input";
-import { Textarea } from "../ui/textarea";
+import { FeedbackComposerActions, FeedbackSubmittedState, FeedbackTypeField, } from "./feedback-composer-parts.js";
+import { FeedbackEmergencyFields } from "./feedback-emergency-fields.js";
+import { submitFeedbackComposer } from "./submit-feedback-composer.js";
+import { useFeedbackComposerState } from "./use-feedback-composer-state.js";
+import { FileUploadField } from "../ui/file-upload-field.js";
+import { Field, FieldContent, FieldError, FieldGroup, FieldLabel } from "../ui/field.js";
+import { Input } from "../ui/input.js";
+import { Textarea } from "../ui/textarea.js";
 function FeedbackComposer(props) {
     // Without its controls, emergency could never be confirmed — a hidden
     // emergency default would soft-lock submit — so it needs urgencyEnabled.

package/dist/components/blocks/feedback-date-format.d.ts

@@ -1,5 +1,5 @@
-import { type TimestampFormatOptions } from "./timestamp-format";
+import { toUtcTimestamp, type TimestampFormatOptions } from "./timestamp-format.js";
 declare function formatFeedbackTimestamp(value: string | undefined, options?: TimestampFormatOptions): string;
 declare function formatFeedbackTimestampFull(value: string | undefined, options?: TimestampFormatOptions): string;
 declare function getFeedbackTimestampDateTime(value: string | undefined): string | undefined;
-export { formatFeedbackTimestamp, formatFeedbackTimestampFull, getFeedbackTimestampDateTime };
+export { formatFeedbackTimestamp, formatFeedbackTimestampFull, getFeedbackTimestampDateTime, toUtcTimestamp, };

package/dist/components/blocks/feedback-date-format.js

@@ -1,4 +1,4 @@
-import { formatTimestamp, formatTimestampFull, getTimestampDateTime, } from "./timestamp-format";
+import { formatTimestamp, formatTimestampFull, getTimestampDateTime, toUtcTimestamp, } from "./timestamp-format.js";
 function formatFeedbackTimestamp(value, options = {}) {
     return formatTimestamp(value, options);
 }
@@ -8,4 +8,4 @@ function formatFeedbackTimestampFull(value, options = {}) {
 function getFeedbackTimestampDateTime(value) {
     return getTimestampDateTime(value);
 }
-export { formatFeedbackTimestamp, formatFeedbackTimestampFull, getFeedbackTimestampDateTime };
+export { formatFeedbackTimestamp, formatFeedbackTimestampFull, getFeedbackTimestampDateTime, toUtcTimestamp, };

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { type FeedbackStatus, type StakeholderFeedbackItem } from "./feedback-tracking-types";
+import { type FeedbackStatus, type StakeholderFeedbackItem } from "./feedback-tracking-types.js";
 type FeedbackDetailSheetProps = {
     /** Rendered after the submission — the slot for a comment thread. */
     conversation?: React.ReactNode;

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

@@ -1,17 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { PaperclipIcon } from "lucide-react";
-import { formatFeedbackTimestampFull, getFeedbackTimestampDateTime } from "./feedback-date-format";
-import { FeedbackStatusBadge } from "./feedback-status-badge";
-import { FeedbackTypeBadge } from "./feedback-type-badge";
-import { feedbackStatusLabels, feedbackStatusValues, getFeedbackInitials, } from "./feedback-tracking-types";
-import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
-import { Button } from "../ui/button";
-import { Card } from "../ui/card";
-import { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemGroupItem, ItemMedia, ItemTitle, } from "../ui/item";
-import { NativeSelect, NativeSelectOption } from "../ui/native-select";
-import { PropertyList, PropertyListItem, PropertyListLabel, PropertyListValue, } from "../ui/property-list";
-import { Sheet, SheetBody, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, } from "../ui/sheet";
+import { formatFeedbackTimestampFull, getFeedbackTimestampDateTime } from "./feedback-date-format.js";
+import { FeedbackStatusBadge } from "./feedback-status-badge.js";
+import { FeedbackTypeBadge } from "./feedback-type-badge.js";
+import { feedbackStatusLabels, feedbackStatusValues, getFeedbackInitials, } from "./feedback-tracking-types.js";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar.js";
+import { Button } from "../ui/button.js";
+import { Card } from "../ui/card.js";
+import { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemGroupItem, ItemMedia, ItemTitle, } from "../ui/item.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select.js";
+import { PropertyList, PropertyListItem, PropertyListLabel, PropertyListValue, } from "../ui/property-list.js";
+import { Sheet, SheetBody, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, } from "../ui/sheet.js";
 function FeedbackDetailSheet({ conversation, feedback, onOpenChange, onStatusChange, open, pendingStatus, }) {
     return (_jsx(Sheet, { onOpenChange: onOpenChange, open: open, children: _jsxs(SheetContent, { size: "md", children: [_jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: feedback?.subject ?? "Feedback" }), _jsx(SheetDescription, { children: onStatusChange
                                 ? "Review the submission and set where it stands."
@@ -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" }), _jsx(NativeSelect, { disabled: pendingStatus !== undefined, id: selectId, onChange: (event) => {
-                    const next = feedbackStatusValues.find((value) => value === event.target.value);
+    return (_jsxs("div", { className: "grid gap-2", children: [_jsx("label", { className: "text-meta text-muted-foreground", htmlFor: selectId, children: "Status" }), _jsxs(Select, { disabled: pendingStatus !== undefined, onValueChange: (value) => {
+                    const next = feedbackStatusValues.find((candidate) => candidate === value);
                     if (next && next !== status)
                         onStatusChange(next);
-                }, value: pendingStatus ?? status, children: feedbackStatusValues.map((value) => (_jsx(NativeSelectOption, { value: value, children: feedbackStatusLabels[value] }, value))) })] }));
+                }, value: pendingStatus ?? status, children: [_jsx(SelectTrigger, { className: "w-full", id: selectId, children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: feedbackStatusValues.map((value) => (_jsx(SelectItem, { value: value, children: feedbackStatusLabels[value] }, value))) })] })] }));
 }
 function FeedbackDetailSummary({ feedback }) {
     const submitter = feedback.submittedBy;

package/dist/components/blocks/feedback-emergency-fields.d.ts

@@ -1,4 +1,4 @@
-import type { FeedbackAffectedScope } from "./feedback-composer-types";
+import type { FeedbackAffectedScope } from "./feedback-composer-types.js";
 type FeedbackEmergencyFieldsProps = {
     affectedScope: FeedbackAffectedScope;
     affectedScopeId: string;

package/dist/components/blocks/feedback-emergency-fields.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AlertTriangleIcon } from "lucide-react";
-import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
-import { Button } from "../ui/button";
-import { Checkbox } from "../ui/checkbox";
-import { Field, FieldContent, FieldDescription, FieldError, FieldLabel } from "../ui/field";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
+import { Alert, AlertDescription, AlertTitle } from "../ui/alert.js";
+import { Button } from "../ui/button.js";
+import { Checkbox } from "../ui/checkbox.js";
+import { Field, FieldContent, FieldDescription, FieldError, FieldLabel } from "../ui/field.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select.js";
 function FeedbackEmergencyFields({ affectedScope, affectedScopeId, confirmed, confirmationDescriptionId, confirmationErrorId, confirmationId, confirmationInvalid, disabled, onAffectedScopeChange, onConfirmedChange, onEmergencyChange, isEmergency, }) {
     if (!isEmergency)
         return _jsx(FeedbackEmergencyEntry, { disabled: disabled, onEmergencyChange: onEmergencyChange });
@@ -14,7 +14,7 @@ function FeedbackEmergencyEntry({ disabled, onEmergencyChange, }) {
     return (_jsxs("div", { className: "border-t pt-(--panel-gap)", children: [_jsxs(Button, { className: "w-full justify-start text-destructive hover:text-destructive", disabled: disabled, onClick: () => onEmergencyChange(true), type: "button", variant: "outline", children: [_jsx(AlertTriangleIcon, {}), "Report an emergency"] }), _jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: "Use this when service or time-sensitive work is blocked and the team needs to respond now." })] }));
 }
 function FeedbackEmergencyNotice() {
-    return (_jsxs(Alert, { variant: "destructive", children: [_jsx(AlertTriangleIcon, {}), _jsx(AlertTitle, { children: "Emergency feedback" }), _jsx(AlertDescription, { children: "This follows the same support workflow, with an urgent priority and an immediate notification to the configured response team." })] }));
+    return (_jsxs(Alert, { variant: "destructive", children: [_jsx(AlertTriangleIcon, {}), _jsx(AlertTitle, { children: "Emergency feedback" }), _jsx(AlertDescription, { children: "This follows the same support workflow, marked as urgent so the team knows it needs an immediate response." })] }));
 }
 function FeedbackAffectedScopeField({ affectedScope, affectedScopeId, disabled, onAffectedScopeChange, }) {
     return (_jsxs(Field, { children: [_jsx(FieldContent, { children: _jsx(FieldLabel, { htmlFor: affectedScopeId, required: true, children: "Who is affected?" }) }), _jsxs(Select, { disabled: disabled, onValueChange: (value) => {
@@ -24,7 +24,7 @@ function FeedbackAffectedScopeField({ affectedScope, affectedScopeId, disabled,
 }
 function FeedbackEmergencyConfirmation({ confirmed, descriptionId, disabled, errorId, fieldId, invalid, onConfirmedChange, }) {
     const describedBy = invalid ? `${descriptionId} ${errorId}` : descriptionId;
-    return (_jsxs(Field, { "data-invalid": invalid, orientation: "horizontal", children: [_jsx(Checkbox, { "aria-describedby": describedBy, "aria-invalid": invalid, "aria-required": "true", checked: confirmed, disabled: disabled, id: fieldId, onCheckedChange: (checked) => onConfirmedChange(checked === true) }), _jsxs("div", { className: "grid gap-1", children: [_jsx(FieldLabel, { htmlFor: fieldId, required: true, children: "This needs an immediate response" }), _jsx(FieldDescription, { id: descriptionId, children: "I understand this will notify the configured emergency response team." }), invalid ? (_jsx(FieldError, { id: errorId, children: "Confirm that this needs an immediate response before sending." })) : null] })] }));
+    return (_jsxs(Field, { "data-invalid": invalid, orientation: "horizontal", children: [_jsx(Checkbox, { "aria-describedby": describedBy, "aria-invalid": invalid, "aria-required": "true", checked: confirmed, disabled: disabled, id: fieldId, onCheckedChange: (checked) => onConfirmedChange(checked === true) }), _jsxs("div", { className: "grid gap-1", children: [_jsx(FieldLabel, { htmlFor: fieldId, required: true, children: "This needs an immediate response" }), _jsx(FieldDescription, { id: descriptionId, children: "I understand this marks the feedback as an emergency requiring an immediate response." }), invalid ? (_jsx(FieldError, { id: errorId, children: "Confirm that this needs an immediate response before sending." })) : null] })] }));
 }
 function isAffectedScope(value) {
     return ["everyone", "just_me", "my_team", "unknown"].includes(value);

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

@@ -1,4 +1,4 @@
-import type { FeedbackMetrics } from "./feedback-tracking-types";
+import type { FeedbackMetrics } from "./feedback-tracking-types.js";
 type FeedbackMetricsProps = {
     metrics: FeedbackMetrics;
 };

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { MetricsStrip, MetricsStripDetail, MetricsStripItem, MetricsStripLabel, MetricsStripValue, } from "../ui/metrics-strip";
+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 })] }));
 }

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { type FeedbackComposerProps } from "./feedback-composer";
+import { type FeedbackComposerProps } from "./feedback-composer.js";
 type FeedbackSheetProps = Omit<FeedbackComposerProps, "actions" | "formId" | "onCancel" | "onDirtyChange" | "onSubmittedChange" | "onUrgencyChange"> & {
     onOpenChange: (open: boolean) => void;
     open: boolean;

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { AlertTriangleIcon, SendIcon } from "lucide-react";
-import { FeedbackComposer } from "./feedback-composer";
-import { Button } from "../ui/button";
-import { FormSheet, useFormSheetActions } from "../ui/form-sheet";
-import { SheetBody, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, } from "../ui/sheet";
+import { FeedbackComposer } from "./feedback-composer.js";
+import { Button } from "../ui/button.js";
+import { FormSheet, useFormSheetActions } from "../ui/form-sheet.js";
+import { SheetBody, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, } from "../ui/sheet.js";
 function FeedbackSheet({ onOpenChange, open, ...composerProps }) {
     const [isDirty, setIsDirty] = React.useState(false);
     React.useEffect(() => {

package/dist/components/blocks/feedback-status-badge.d.ts

@@ -1,4 +1,4 @@
-import { type FeedbackStatus } from "./feedback-tracking-types";
+import { type FeedbackStatus } from "./feedback-tracking-types.js";
 type FeedbackStatusBadgeProps = {
     status: FeedbackStatus;
 };

package/dist/components/blocks/feedback-status-badge.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Badge } from "../ui/badge";
-import { feedbackStatusLabels } from "./feedback-tracking-types";
+import { Badge } from "../ui/badge.js";
+import { feedbackStatusLabels } from "./feedback-tracking-types.js";
 function FeedbackStatusBadge({ status }) {
     return _jsx(Badge, { variant: feedbackStatusVariants[status], children: feedbackStatusLabels[status] });
 }

package/dist/components/blocks/feedback-table-row.d.ts

@@ -1,4 +1,4 @@
-import { type StakeholderFeedbackItem } from "./feedback-tracking-types";
+import { type StakeholderFeedbackItem } from "./feedback-tracking-types.js";
 declare function FeedbackTableRow({ item, onSelectFeedback, }: {
     item: StakeholderFeedbackItem;
     onSelectFeedback?: (item: StakeholderFeedbackItem) => void;

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

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AlertTriangleIcon, MessageCircleMoreIcon } from "lucide-react";
-import { formatFeedbackTimestamp, getFeedbackTimestampDateTime } from "./feedback-date-format";
-import { FeedbackStatusBadge } from "./feedback-status-badge";
-import { FeedbackTypeBadge } from "./feedback-type-badge";
-import { getFeedbackInitials } from "./feedback-tracking-types";
-import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
-import { Badge } from "../ui/badge";
-import { Button } from "../ui/button";
-import { TableCell, TableRow } from "../ui/table";
+import { formatFeedbackTimestamp, getFeedbackTimestampDateTime } from "./feedback-date-format.js";
+import { FeedbackStatusBadge } from "./feedback-status-badge.js";
+import { FeedbackTypeBadge } from "./feedback-type-badge.js";
+import { getFeedbackInitials } from "./feedback-tracking-types.js";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar.js";
+import { Badge } from "../ui/badge.js";
+import { Button } from "../ui/button.js";
+import { TableCell, TableRow } from "../ui/table.js";
 function FeedbackTableRow({ item, onSelectFeedback, }) {
     return (_jsxs(TableRow, { className: onSelectFeedback ? "cursor-pointer focus-within:bg-muted/60" : undefined, onClick: () => onSelectFeedback?.(item), children: [_jsx(TableCell, { className: "max-w-[22rem]", children: onSelectFeedback ? (_jsx(Button, { "aria-label": `Open feedback: ${item.subject}`, className: "h-auto w-full justify-start p-0 text-left whitespace-normal hover:bg-transparent", onClick: (event) => {
                         event.stopPropagation();

package/dist/components/blocks/feedback-table-sort.d.ts

@@ -1,5 +1,5 @@
-import type { SortDirection } from "../ui/data-table";
-import type { StakeholderFeedbackItem } from "./feedback-tracking-types";
+import type { SortDirection } from "../ui/data-table.js";
+import type { StakeholderFeedbackItem } from "./feedback-tracking-types.js";
 type FeedbackTableSortKey = "status" | "submittedAt" | "submittedBy" | "type" | "updatedAt";
 type FeedbackTableSort = {
     direction: SortDirection;

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

@@ -1,6 +1,6 @@
 import * as React from "react";
-import type { StakeholderFeedbackItem } from "./feedback-tracking-types";
-import { type FeedbackTableSort, type FeedbackTableSortKey } from "./feedback-table-sort";
+import type { StakeholderFeedbackItem } from "./feedback-tracking-types.js";
+import { type FeedbackTableSort, type FeedbackTableSortKey } from "./feedback-table-sort.js";
 type FeedbackTableProps = {
     defaultSort?: FeedbackTableSort;
     emptyAction?: React.ReactNode;