@ciridae/ui 0.8.0 → 0.8.2

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

@@ -4,7 +4,8 @@ import { CommentThread } from "./comment-thread";
 import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
 import { Button } from "../ui/button";
 function FeedbackCenterCommentThread({ comments, error, feedback, isCommentSubmitting, isCommentsLoading, onRetry, onSubmitComment, }) {
-    if (error) {
+    // 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 }));

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

@@ -10,8 +10,8 @@ function FeedbackCenterSheet(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 })] }) }));
+    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 })] }) }));
 }
 function useFeedbackCenterSheetState(props) {
     const defaultTab = props.defaultTab ?? "submit";

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

@@ -14,7 +14,7 @@ function FeedbackSheet({ onOpenChange, open, ...composerProps }) {
     return (_jsx(FormSheet, { closeDisabled: composerProps.isSubmitting ?? false, isDirty: isDirty, onOpenChange: onOpenChange, open: open, children: _jsx(FeedbackSheetContent, { composerProps: composerProps, onDirtyChange: setIsDirty, open: open }) }));
 }
 function FeedbackSheetContent({ composerProps, onDirtyChange, open, }) {
-    const { requestClose } = useFormSheetActions();
+    const { contentProps, requestClose } = useFormSheetActions();
     const formId = React.useId();
     const [isSubmitted, setIsSubmitted] = React.useState(false);
     const [urgency, setUrgency] = React.useState("normal");
@@ -24,6 +24,6 @@ function FeedbackSheetContent({ composerProps, onDirtyChange, open, }) {
             setUrgency("normal");
         }
     }, [open]);
-    return (_jsxs(SheetContent, { size: "md", children: [_jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: "Send feedback" }), _jsx(SheetDescription, { children: "Share a bug, feature request, or general note." })] }), _jsx(SheetBody, { children: _jsx(FeedbackComposer, { ...composerProps, actions: "external", formId: formId, onCancel: requestClose, onDirtyChange: onDirtyChange, onSubmittedChange: setIsSubmitted, onUrgencyChange: setUrgency }) }), isSubmitted ? null : (_jsxs(SheetFooter, { children: [_jsx(Button, { disabled: composerProps.isSubmitting, onClick: requestClose, type: "button", variant: "outline", children: "Cancel" }), _jsxs(Button, { form: formId, loading: composerProps.isSubmitting, type: "submit", variant: urgency === "emergency" ? "destructive" : "default", children: [urgency === "emergency" ? _jsx(AlertTriangleIcon, {}) : _jsx(SendIcon, {}), urgency === "emergency" ? "Send emergency" : "Submit feedback"] })] }))] }));
+    return (_jsxs(SheetContent, { size: "md", ...contentProps, children: [_jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: "Send feedback" }), _jsx(SheetDescription, { children: "Share a bug, feature request, or general note." })] }), _jsx(SheetBody, { children: _jsx(FeedbackComposer, { ...composerProps, actions: "external", formId: formId, onCancel: requestClose, onDirtyChange: onDirtyChange, onSubmittedChange: setIsSubmitted, onUrgencyChange: setUrgency }) }), isSubmitted ? null : (_jsxs(SheetFooter, { children: [_jsx(Button, { disabled: composerProps.isSubmitting, onClick: requestClose, type: "button", variant: "outline", children: "Cancel" }), _jsxs(Button, { form: formId, loading: composerProps.isSubmitting, type: "submit", variant: urgency === "emergency" ? "destructive" : "default", children: [urgency === "emergency" ? _jsx(AlertTriangleIcon, {}) : _jsx(SendIcon, {}), urgency === "emergency" ? "Send emergency" : "Submit feedback"] })] }))] }));
 }
 export { FeedbackSheet };

package/dist/components/blocks/kanban-board-parts.d.ts

@@ -22,5 +22,5 @@ declare function KanbanBoardColumn({ activeCardId, activeCardRect, activeMove, b
 declare function KanbanDragOverlay({ activeCard, activeCardRect, }: {
     activeCard: KanbanCardData | undefined;
     activeCardRect: KanbanOverlayRect | undefined;
-}): React.JSX.Element;
+}): React.ReactPortal;
 export { KanbanBoardColumn, KanbanDragOverlay };

package/dist/components/blocks/kanban-board-parts.js

@@ -45,8 +45,6 @@ function KanbanDropPlaceholder({ height }) {
 }
 function KanbanDragOverlay({ activeCard, activeCardRect, }) {
     const overlay = (_jsx(DragOverlay, { adjustScale: false, children: activeCard ? (_jsx("div", { style: { width: activeCardRect?.width }, children: _jsx(KanbanCard, { card: activeCard, isDragging: true }) })) : null }));
-    if (typeof document === "undefined")
-        return overlay;
     return createPortal(overlay, document.body);
 }
 function getSortableCardClickHandler({ card, onCardSelect, suppressSelectRef, }) {

package/dist/components/ui/color-theme.js

@@ -139,8 +139,6 @@ function parseStoredPalette(value) {
     return null;
 }
 function getSystemTheme() {
-    if (typeof window === "undefined")
-        return "light";
     return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
 export { ThemeProvider };

package/dist/components/ui/form-sheet.d.ts

@@ -1,5 +1,12 @@
 import * as React from "react";
 type FormSheetActions = Readonly<{
+    /**
+     * Spread onto the `SheetContent` this form sheet wraps. Carries the
+     * close-focus handler; without it, closing drops focus on `<body>`.
+     */
+    contentProps: Readonly<{
+        onCloseAutoFocus: (event: Event) => void;
+    }>;
     requestClose: () => void;
 }>;
 type FormSheetProps = {

package/dist/components/ui/form-sheet.js

@@ -11,13 +11,14 @@ function useFormSheetActions() {
 }
 function FormSheet({ children, closeDisabled = false, isDirty, onOpenChange, open, trigger, }) {
     const [discardPromptOpen, setDiscardPromptOpen] = React.useState(false);
+    const sheetReturnFocusRef = React.useRef(null);
     const discardReturnFocusRef = React.useRef(null);
-    const discardingRef = React.useRef(false);
-    const returnFocus = useFormSheetReturnFocus(open);
-    const closeSheet = React.useCallback(() => {
-        returnFocus.prepareForClose();
-        onOpenChange(false);
-    }, [onOpenChange, returnFocus]);
+    // Layout effect: parent layout effects run before the sheet's focus scope
+    // captures on mount, so this still sees the element focused before opening.
+    React.useLayoutEffect(() => {
+        if (open)
+            sheetReturnFocusRef.current = getActiveElement();
+    }, [open]);
     const requestClose = React.useCallback(() => {
         if (closeDisabled)
             return;
@@ -26,81 +27,48 @@ function FormSheet({ children, closeDisabled = false, isDirty, onOpenChange, ope
             setDiscardPromptOpen(true);
             return;
         }
-        closeSheet();
-    }, [closeDisabled, closeSheet, isDirty]);
-    const actions = React.useMemo(() => ({ requestClose }), [requestClose]);
+        onOpenChange(false);
+    }, [closeDisabled, isDirty, onOpenChange]);
+    const handleSheetCloseAutoFocus = React.useCallback((event) => {
+        returnFocusTo(event, sheetReturnFocusRef.current);
+    }, []);
+    const handleDiscardCloseAutoFocus = React.useCallback((event) => {
+        returnFocusTo(event, discardReturnFocusRef.current);
+    }, []);
+    const actions = React.useMemo(() => ({
+        contentProps: { onCloseAutoFocus: handleSheetCloseAutoFocus },
+        requestClose,
+    }), [handleSheetCloseAutoFocus, requestClose]);
     function handleOpenChange(nextOpen) {
         if (nextOpen) {
-            returnFocus.capture();
             onOpenChange(true);
             return;
         }
         requestClose();
     }
     function discardChanges() {
-        discardingRef.current = true;
         setDiscardPromptOpen(false);
-        closeSheet();
-    }
-    function handleDiscardPromptOpenChange(nextOpen) {
-        setDiscardPromptOpen(nextOpen);
-        if (!nextOpen && !discardingRef.current) {
-            requestAnimationFrame(() => discardReturnFocusRef.current?.focus());
-        }
-        discardingRef.current = false;
+        onOpenChange(false);
     }
-    return (_jsxs(_Fragment, { children: [_jsxs(Sheet, { onOpenChange: handleOpenChange, open: open, children: [trigger ? _jsx(SheetTrigger, { asChild: true, children: trigger }) : null, _jsx(FormSheetContext.Provider, { value: actions, children: children })] }), _jsx(DiscardChangesPrompt, { onDiscard: discardChanges, onOpenChange: handleDiscardPromptOpenChange, open: discardPromptOpen })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Sheet, { onOpenChange: handleOpenChange, open: open, children: [trigger ? _jsx(SheetTrigger, { asChild: true, children: trigger }) : null, _jsx(FormSheetContext.Provider, { value: actions, children: children })] }), _jsx(DiscardChangesPrompt, { onCloseAutoFocus: handleDiscardCloseAutoFocus, onDiscard: discardChanges, onOpenChange: setDiscardPromptOpen, open: discardPromptOpen })] }));
 }
-function useFormSheetReturnFocus(open) {
-    const activeElementDuringRender = getActiveElement();
-    const focusFrameRef = React.useRef(null);
-    const returnFocusRef = React.useRef(activeElementDuringRender);
-    const wasOpenRef = React.useRef(open);
-    const schedule = React.useCallback(() => {
-        const returnFocus = returnFocusRef.current;
-        if (!returnFocus)
-            return;
-        if (focusFrameRef.current !== null)
-            cancelAnimationFrame(focusFrameRef.current);
-        focusFrameRef.current = requestAnimationFrame(() => {
-            focusFrameRef.current = null;
-            if (returnFocus.isConnected)
-                returnFocus.focus();
-        });
-    }, []);
-    React.useEffect(() => {
-        if (open) {
-            if (!wasOpenRef.current)
-                returnFocusRef.current = activeElementDuringRender;
-            wasOpenRef.current = true;
-            return;
-        }
-        if (!wasOpenRef.current)
-            return;
-        wasOpenRef.current = false;
-        schedule();
-    }, [activeElementDuringRender, open, schedule]);
-    React.useEffect(() => () => {
-        if (wasOpenRef.current)
-            schedule();
-    }, [schedule]);
-    const capture = React.useCallback(() => {
-        returnFocusRef.current = getActiveElement();
-        wasOpenRef.current = true;
-    }, []);
-    const prepareForClose = React.useCallback(() => {
-        schedule();
-        wasOpenRef.current = false;
-    }, [schedule]);
-    return React.useMemo(() => ({ capture, prepareForClose }), [capture, prepareForClose]);
+/**
+ * Radix aims its close-focus at the overlay's trigger. A controlled sheet has
+ * no trigger, so Radix suppresses the focus scope's own fallback and then
+ * focuses nothing, leaving `<body>` active. Restoring here rather than on a
+ * timer is what keeps the timing right: Radix fires this after the content
+ * unmounts, which is the moment the element is safe to focus again.
+ */
+function returnFocusTo(event, returnFocus) {
+    if (!returnFocus?.isConnected)
+        return; // discarded: the sheet owns focus from here
+    event.preventDefault();
+    returnFocus.focus();
 }
-function DiscardChangesPrompt({ onDiscard, onOpenChange, open, }) {
-    return (_jsx(AlertDialog, { onOpenChange: onOpenChange, open: open, children: _jsxs(AlertDialogContent, { size: "sm", children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Discard unsaved changes?" }), _jsx(AlertDialogDescription, { children: "Your changes have not been saved. Keep editing or discard them and close this panel." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Keep editing" }), _jsx(AlertDialogAction, { onClick: onDiscard, variant: "destructive", children: "Discard changes" })] })] }) }));
+function DiscardChangesPrompt({ onCloseAutoFocus, onDiscard, onOpenChange, open, }) {
+    return (_jsx(AlertDialog, { onOpenChange: onOpenChange, open: open, children: _jsxs(AlertDialogContent, { onCloseAutoFocus: onCloseAutoFocus, size: "sm", children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Discard unsaved changes?" }), _jsx(AlertDialogDescription, { children: "Your changes have not been saved. Keep editing or discard them and close this panel." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Keep editing" }), _jsx(AlertDialogAction, { onClick: onDiscard, variant: "destructive", children: "Discard changes" })] })] }) }));
 }
 function getActiveElement() {
-    // Called during render, so it must be safe on the server too.
-    if (typeof document === "undefined")
-        return null;
     return document.activeElement instanceof HTMLElement ? document.activeElement : null;
 }
 export { FormSheet, useFormSheetActions };

package/dist/lib/browser-storage.d.ts

@@ -1,11 +1,10 @@
 /**
  * localStorage that cannot throw at its callers.
  *
- * Every access can raise: the API is absent during SSR, `getItem` throws when
- * storage is disabled by policy or by Safari's private mode, and `setItem`
- * throws on quota. A preference is worth remembering and never worth failing
- * over, so each call degrades to "no stored value" and the caller keeps its
- * in-memory state.
+ * Every access can raise: reading the property throws when storage is disabled
+ * by policy or by Safari's private mode, and `setItem` throws on quota. A
+ * preference is worth remembering and never worth failing over, so each call
+ * degrades to "no stored value" and the caller keeps its in-memory state.
  */
 declare function readStoredValue(key: string): string | null;
 declare function writeStoredValue(key: string, value: string): void;

package/dist/lib/browser-storage.js

@@ -1,15 +1,14 @@
 /**
  * localStorage that cannot throw at its callers.
  *
- * Every access can raise: the API is absent during SSR, `getItem` throws when
- * storage is disabled by policy or by Safari's private mode, and `setItem`
- * throws on quota. A preference is worth remembering and never worth failing
- * over, so each call degrades to "no stored value" and the caller keeps its
- * in-memory state.
+ * Every access can raise: reading the property throws when storage is disabled
+ * by policy or by Safari's private mode, and `setItem` throws on quota. A
+ * preference is worth remembering and never worth failing over, so each call
+ * degrades to "no stored value" and the caller keeps its in-memory state.
  */
 function storage() {
     try {
-        return typeof window === "undefined" ? null : window.localStorage;
+        return window.localStorage;
     }
     catch {
         // Accessing the property itself throws when storage is blocked by policy.

package/package.json

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