@ciridae/ui 0.7.0 → 0.8.0

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

@@ -1,29 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowLeftIcon, MessageSquareTextIcon, PaperclipIcon } from "lucide-react";
+import { AlertTriangleIcon, ArrowLeftIcon, EyeIcon, MessageSquareTextIcon, PaperclipIcon, } from "lucide-react";
 import { formatFeedbackTimestampFull, getFeedbackTimestampDateTime } from "./feedback-date-format";
 import { FeedbackStatusBadge } from "./feedback-status-badge";
 import { FeedbackTypeBadge } from "./feedback-type-badge";
+import { Badge } from "../ui/badge";
 import { Button } from "../ui/button";
 import { Card } from "../ui/card";
 import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty";
 import { Item, ItemContent, ItemGroup, ItemGroupItem, ItemMedia, ItemTitle } from "../ui/item";
 import { PropertyList, PropertyListItem, PropertyListLabel, PropertyListValue, } from "../ui/property-list";
-function FeedbackUserDetail({ activityLabel = "Activity", activitySlot, feedback, onBack, }) {
+function FeedbackUserDetail({ activityLabel = "Activity", activitySlot, evidenceSlot, feedback, onBack, }) {
     if (!feedback)
         return _jsx(FeedbackUserDetailEmpty, {});
-    return (_jsxs("div", { className: "grid content-start gap-(--panel-gap)", children: [_jsx(FeedbackUserDetailHeader, { feedback: feedback, onBack: onBack }), _jsx(FeedbackUserDetailMeta, { feedback: feedback }), _jsx(FeedbackUserDetailBody, { feedback: feedback }), _jsx(FeedbackUserAttachments, { feedback: feedback }), activitySlot ? (_jsx(FeedbackUserActivity, { activityLabel: activityLabel, activitySlot: activitySlot })) : null] }));
+    return (_jsxs("div", { className: "grid content-start gap-(--panel-gap)", children: [_jsx(FeedbackUserDetailHeader, { feedback: feedback, onBack: onBack }), _jsx(FeedbackUserDetailMeta, { feedback: feedback }), _jsx(FeedbackUserDetailBody, { feedback: feedback }), evidenceSlot ?? _jsx(FeedbackUserAttachments, { feedback: feedback }), activitySlot ? (_jsx(FeedbackUserActivity, { activityLabel: activityLabel, activitySlot: activitySlot })) : null] }));
 }
 function FeedbackUserDetailHeader({ feedback, onBack, }) {
     return (_jsx("header", { className: "grid gap-3", children: _jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [onBack ? _jsx(FeedbackUserDetailBackButton, { onBack: onBack }) : null, _jsx("div", { className: "min-w-0 flex-1", children: _jsxs("div", { className: "flex min-w-0 items-center justify-between gap-3", children: [_jsx("h3", { className: "truncate text-sm font-medium text-foreground", children: feedback.subject }), _jsx(FeedbackUserDetailBadges, { feedback: feedback })] }) })] }) }));
 }
 function FeedbackUserDetailBadges({ feedback }) {
-    return (_jsxs("div", { className: "flex shrink-0 flex-wrap justify-end gap-2", children: [_jsx(FeedbackTypeBadge, { type: feedback.type }), _jsx(FeedbackStatusBadge, { status: feedback.status })] }));
+    return (_jsxs("div", { className: "flex shrink-0 flex-wrap justify-end gap-2", children: [feedback.hasUnreadReply ? _jsx(Badge, { variant: "secondary", children: "New reply" }) : null, feedback.urgency === "emergency" ? (_jsxs(Badge, { variant: "destructive", children: [_jsx(AlertTriangleIcon, {}), "Emergency"] })) : null, _jsx(FeedbackTypeBadge, { type: feedback.type }), _jsx(FeedbackStatusBadge, { status: feedback.status })] }));
 }
 function FeedbackUserDetailBackButton({ onBack }) {
     return (_jsx(Button, { "aria-label": "Back to my feedback", className: "-ml-2 shrink-0", onClick: onBack, size: "icon", type: "button", variant: "ghost", children: _jsx(ArrowLeftIcon, {}) }));
 }
 function FeedbackUserDetailMeta({ feedback }) {
-    return (_jsxs(PropertyList, { children: [_jsx(FeedbackProperty, { label: "Submitted", children: _jsx(FeedbackUserDateValue, { value: feedback.submittedAt }) }), _jsx(FeedbackProperty, { label: "Updated", children: _jsx(FeedbackUserDateValue, { value: feedback.updatedAt }) }), _jsx(FeedbackProperty, { label: "Reference", children: _jsx("span", { className: "font-mono text-xs tabular-nums", children: feedback.referenceId ?? feedback.id }) })] }));
+    return (_jsxs(PropertyList, { children: [_jsx(FeedbackProperty, { label: "Submitted", children: _jsx(FeedbackUserDateValue, { value: feedback.submittedAt }) }), _jsx(FeedbackProperty, { label: "Updated", children: _jsx(FeedbackUserDateValue, { value: feedback.updatedAt }) }), feedback.urgency === "emergency" && feedback.affectedScope ? (_jsx(FeedbackProperty, { label: "Affected scope", children: _jsx("span", { className: "text-xs", children: affectedScopeLabels[feedback.affectedScope] }) })) : null] }));
 }
 function FeedbackUserDetailBody({ feedback }) {
     return (_jsxs(Card, { className: "grid gap-2 p-(--panel-padding)", children: [_jsx("div", { className: "text-meta text-muted-foreground", children: "Feedback" }), _jsx("p", { className: "text-sm whitespace-pre-wrap text-foreground", children: feedback.description })] }));
@@ -49,8 +50,14 @@ function getAttachmentTitle(attachment) {
     return (_jsx("a", { className: "underline-offset-4 hover:underline", href: attachment.url, children: attachment.name }));
 }
 function FeedbackUserActivity({ activityLabel, activitySlot, }) {
-    return (_jsxs(Card, { className: "grid gap-2 p-(--panel-padding)", children: [_jsx("div", { className: "text-meta text-muted-foreground", children: activityLabel }), activitySlot] }));
+    return (_jsxs(Card, { className: "grid gap-3 p-(--panel-padding)", children: [_jsxs("div", { className: "flex items-start gap-2 border-b pb-3", children: [_jsx(EyeIcon, { className: "mt-0.5 size-4 shrink-0 text-muted-foreground" }), _jsxs("div", { className: "grid gap-0.5", children: [_jsx("div", { className: "text-sm font-medium text-foreground", children: activityLabel }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Messages here are visible to you and the support team." })] })] }), activitySlot] }));
 }
+const affectedScopeLabels = {
+    everyone: "Everyone",
+    just_me: "Just me",
+    my_team: "My team",
+    unknown: "Not sure",
+};
 function FeedbackUserDetailEmpty() {
     return (_jsx(Empty, { className: "min-h-72 border border-dashed", children: _jsxs(EmptyHeader, { children: [_jsx(EmptyMedia, { variant: "icon", children: _jsx(MessageSquareTextIcon, {}) }), _jsx(EmptyTitle, { children: "Select feedback" }), _jsx(EmptyDescription, { children: "Choose a submission to see its progress and details." })] }) }));
 }

package/dist/components/blocks/feedback-user-list.d.ts

@@ -1,9 +1,11 @@
 import type { UserFeedbackItem } from "./feedback-tracking-types";
 type FeedbackUserListProps = {
+    error?: Error | null;
     isLoading?: boolean;
     items: UserFeedbackItem[];
+    onRetry?: () => void;
     onSelectFeedback?: (item: UserFeedbackItem) => void;
     selectedId?: string;
 };
-declare function FeedbackUserList({ isLoading, items, onSelectFeedback, selectedId, }: FeedbackUserListProps): import("@types/react").JSX.Element;
+declare function FeedbackUserList({ error, isLoading, items, onRetry, onSelectFeedback, selectedId, }: FeedbackUserListProps): import("@types/react").JSX.Element;
 export { FeedbackUserList, type FeedbackUserListProps };

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

@@ -1,24 +1,32 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { InboxIcon } from "lucide-react";
+import { AlertCircleIcon, AlertTriangleIcon, InboxIcon } from "lucide-react";
 import { formatFeedbackTimestamp } from "./feedback-date-format";
 import { FeedbackStatusBadge } from "./feedback-status-badge";
 import { FeedbackTypeBadge } from "./feedback-type-badge";
+import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
+import { Badge } from "../ui/badge";
+import { Button } from "../ui/button";
 import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty";
 import { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemGroupItem, ItemTitle, } from "../ui/item";
 import { Skeleton } from "../ui/skeleton";
 import { cn } from "../../lib/utils";
-function FeedbackUserList({ isLoading = false, items, onSelectFeedback, selectedId, }) {
+function FeedbackUserList({ error, isLoading = false, items, onRetry, onSelectFeedback, selectedId, }) {
     if (isLoading)
         return _jsx(FeedbackUserListLoading, {});
+    if (error)
+        return _jsx(FeedbackUserListError, { error: error, onRetry: onRetry });
     if (items.length === 0)
         return _jsx(FeedbackUserListEmpty, {});
     return (_jsx(ItemGroup, { className: "gap-2", children: items.map((item) => (_jsx(FeedbackUserListItem, { item: item, onSelectFeedback: onSelectFeedback, selected: item.id === selectedId }, item.id))) }));
 }
+function FeedbackUserListError({ error, onRetry }) {
+    return (_jsxs(Alert, { variant: "destructive", children: [_jsx(AlertCircleIcon, {}), _jsx(AlertTitle, { children: "Feedback could not be loaded" }), _jsxs(AlertDescription, { className: "grid gap-3", children: [_jsx("span", { children: error.message }), onRetry ? (_jsx(Button, { className: "justify-self-start", onClick: onRetry, size: "sm", type: "button", variant: "outline", children: "Try again" })) : null] })] }));
+}
 function FeedbackUserListItem({ item, onSelectFeedback, selected, }) {
     return (_jsx(ItemGroupItem, { children: _jsx(Item, { "aria-current": selected ? "true" : undefined, asChild: true, className: cn("w-full cursor-pointer text-left", selected && "border-foreground/30 bg-muted/50"), size: "sm", variant: "outline", children: _jsx("button", { onClick: () => onSelectFeedback?.(item), type: "button", children: _jsx(FeedbackUserListItemContent, { item: item }) }) }) }));
 }
 function FeedbackUserListItemContent({ item }) {
-    return (_jsxs(_Fragment, { children: [_jsxs(ItemContent, { className: "min-w-0", children: [_jsx(ItemTitle, { className: "max-w-full truncate", children: item.subject }), _jsx(ItemDescription, { className: "line-clamp-1", children: item.description })] }), _jsxs(ItemActions, { className: "shrink-0", children: [_jsx(FeedbackTypeBadge, { type: item.type }), _jsx(FeedbackStatusBadge, { status: item.status })] }), _jsxs(ItemFooter, { children: [_jsx(FeedbackListDate, { label: "Submitted", value: item.submittedAt }), item.updatedAt ? _jsx(FeedbackListDate, { label: "Updated", value: item.updatedAt }) : null] })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(ItemContent, { className: "min-w-0", children: [_jsx(ItemTitle, { className: "max-w-full truncate", children: item.subject }), _jsx(ItemDescription, { className: "line-clamp-1", children: item.description })] }), _jsxs(ItemActions, { className: "shrink-0", children: [item.hasUnreadReply ? _jsx(Badge, { variant: "secondary", children: "New reply" }) : null, item.urgency === "emergency" ? (_jsxs(Badge, { variant: "destructive", children: [_jsx(AlertTriangleIcon, {}), "Emergency"] })) : null, _jsx(FeedbackTypeBadge, { type: item.type }), _jsx(FeedbackStatusBadge, { status: item.status })] }), _jsxs(ItemFooter, { children: [_jsx(FeedbackListDate, { label: "Submitted", value: item.submittedAt }), item.updatedAt ? _jsx(FeedbackListDate, { label: "Updated", value: item.updatedAt }) : null] })] }));
 }
 function FeedbackListDate({ label, value }) {
     return (_jsxs("span", { className: "font-mono text-xs text-muted-foreground tabular-nums", children: [label, " ", formatFeedbackTimestamp(value)] }));

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

@@ -0,0 +1,5 @@
+import type * as React from "react";
+import type { FeedbackComposerProps } from "./feedback-composer";
+import type { useFeedbackComposerState } from "./use-feedback-composer-state";
+declare function submitFeedbackComposer(event: React.FormEvent<HTMLFormElement>, props: FeedbackComposerProps, state: ReturnType<typeof useFeedbackComposerState>): Promise<void>;
+export { submitFeedbackComposer };

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

@@ -0,0 +1,40 @@
+async function submitFeedbackComposer(event, props, state) {
+    event.preventDefault();
+    const trimmedDescription = state.description.trim();
+    const trimmedSubject = state.subject.trim();
+    const validationError = getValidationError({
+        description: trimmedDescription,
+        emergencyConfirmed: state.emergencyConfirmed,
+        subject: trimmedSubject,
+        urgency: state.urgency,
+    });
+    state.setError(validationError);
+    state.setSubmitError(undefined);
+    if (validationError)
+        return;
+    try {
+        await props.onSubmit({
+            affectedScope: state.affectedScope,
+            attachments: state.attachments,
+            description: trimmedDescription,
+            subject: trimmedSubject,
+            type: state.type,
+            urgency: state.urgency,
+        });
+        state.setIsSubmitted(true);
+        props.onSubmittedChange?.(true);
+    }
+    catch {
+        state.setSubmitError("Unable to submit feedback. Please try again.");
+    }
+}
+function getValidationError({ description, emergencyConfirmed, subject, urgency, }) {
+    if (!subject)
+        return "subject";
+    if (!description)
+        return "description";
+    if (urgency === "emergency" && !emergencyConfirmed)
+        return "emergency_confirmation";
+    return undefined;
+}
+export { submitFeedbackComposer };

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

@@ -0,0 +1,27 @@
+import * as React from "react";
+import type { FeedbackAffectedScope, FeedbackType, FeedbackUrgency, FeedbackValidationError } from "./feedback-composer-types";
+declare function useFeedbackComposerState(defaultType: FeedbackType, defaultUrgency: FeedbackUrgency): {
+    affectedScope: FeedbackAffectedScope;
+    attachments: File[];
+    description: string;
+    emergencyConfirmed: boolean;
+    error: FeedbackValidationError;
+    isDirty: boolean;
+    isSubmitted: boolean;
+    resetForm: () => void;
+    setAffectedScope: React.Dispatch<React.SetStateAction<FeedbackAffectedScope>>;
+    setAttachments: React.Dispatch<React.SetStateAction<File[]>>;
+    setDescription: React.Dispatch<React.SetStateAction<string>>;
+    setEmergencyConfirmed: React.Dispatch<React.SetStateAction<boolean>>;
+    setError: React.Dispatch<React.SetStateAction<FeedbackValidationError>>;
+    setIsSubmitted: React.Dispatch<React.SetStateAction<boolean>>;
+    setSubmitError: React.Dispatch<React.SetStateAction<string | undefined>>;
+    setSubject: React.Dispatch<React.SetStateAction<string>>;
+    setType: React.Dispatch<React.SetStateAction<FeedbackType>>;
+    setUrgency: React.Dispatch<React.SetStateAction<FeedbackUrgency>>;
+    submitError: string | undefined;
+    subject: string;
+    type: FeedbackType;
+    urgency: FeedbackUrgency;
+};
+export { useFeedbackComposerState };

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

@@ -0,0 +1,60 @@
+import * as React from "react";
+function useFeedbackComposerState(defaultType, defaultUrgency) {
+    const [affectedScope, setAffectedScope] = React.useState("unknown");
+    const [attachments, setAttachments] = React.useState([]);
+    const [description, setDescription] = React.useState("");
+    const [emergencyConfirmed, setEmergencyConfirmed] = React.useState(false);
+    const [error, setError] = React.useState();
+    const [submitError, setSubmitError] = React.useState();
+    const [isSubmitted, setIsSubmitted] = React.useState(false);
+    const [subject, setSubject] = React.useState("");
+    const [type, setType] = React.useState(defaultType);
+    const [urgency, setUrgency] = React.useState(defaultUrgency);
+    React.useEffect(() => setType(defaultType), [defaultType]);
+    React.useEffect(() => setUrgency(defaultUrgency), [defaultUrgency]);
+    const isDirty = !isSubmitted &&
+        (attachments.length > 0 ||
+            description.length > 0 ||
+            subject.length > 0 ||
+            type !== defaultType ||
+            urgency !== defaultUrgency ||
+            affectedScope !== "unknown" ||
+            emergencyConfirmed);
+    const resetForm = () => {
+        setAffectedScope("unknown");
+        setAttachments([]);
+        setDescription("");
+        setEmergencyConfirmed(false);
+        setError(undefined);
+        setSubmitError(undefined);
+        setIsSubmitted(false);
+        setSubject("");
+        setType(defaultType);
+        setUrgency(defaultUrgency);
+    };
+    return {
+        affectedScope,
+        attachments,
+        description,
+        emergencyConfirmed,
+        error,
+        isDirty,
+        isSubmitted,
+        resetForm,
+        setAffectedScope,
+        setAttachments,
+        setDescription,
+        setEmergencyConfirmed,
+        setError,
+        setIsSubmitted,
+        setSubmitError,
+        setSubject,
+        setType,
+        setUrgency,
+        submitError,
+        subject,
+        type,
+        urgency,
+    };
+}
+export { useFeedbackComposerState };

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { PALETTE_TOKEN_NAMES, canonicalPaletteSelection, derivePaletteTokens, paletteSelectionKey, resolvePaletteSelection, } from "../../lib/palette";
+import { readStoredValue, removeStoredValue, writeStoredValue } from "../../lib/browser-storage";
 import { ThemeContext, } from "./color-theme-context";
 const defaultStorageKey = "ciridae-ui-theme";
 const defaultPaletteStorageKey = "ciridae-ui-palette";
@@ -41,18 +42,18 @@ function ThemeProvider({ children, defaultMode = "system", defaultPalette, stora
     }, []);
     const setMode = React.useCallback((nextMode) => {
         setModeState(nextMode);
-        localStorage.setItem(storageKey, nextMode);
+        writeStoredValue(storageKey, nextMode);
     }, [storageKey]);
     const toggleTheme = React.useCallback(() => {
         setMode(resolvedTheme === "dark" ? "light" : "dark");
     }, [resolvedTheme, setMode]);
     const setPalette = React.useCallback((nextPalette) => {
         setStoredPalette(nextPalette);
-        localStorage.setItem(paletteStorageKey, JSON.stringify(nextPalette));
+        writeStoredValue(paletteStorageKey, JSON.stringify(nextPalette));
     }, [paletteStorageKey]);
     const resetPalette = React.useCallback(() => {
         setStoredPalette(null);
-        localStorage.removeItem(paletteStorageKey);
+        removeStoredValue(paletteStorageKey);
     }, [paletteStorageKey]);
     const contextValue = React.useMemo(() => ({
         mode,
@@ -104,9 +105,7 @@ function usePaletteTokens(palette, mode) {
     }, [palette, mode]);
 }
 function readStoredMode(storageKey, defaultMode) {
-    if (typeof window === "undefined")
-        return defaultMode;
-    const storedMode = localStorage.getItem(storageKey);
+    const storedMode = readStoredValue(storageKey);
     if (storedMode === "light" || storedMode === "dark" || storedMode === "system") {
         return storedMode;
     }
@@ -117,9 +116,7 @@ function readStoredMode(storageKey, defaultMode) {
  * deploys, so it outlives renamed presets and older shapes of the type.
  */
 function readStoredPalette(storageKey) {
-    if (typeof window === "undefined")
-        return null;
-    const raw = localStorage.getItem(storageKey);
+    const raw = readStoredValue(storageKey);
     if (!raw)
         return null;
     try {

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

@@ -0,0 +1,15 @@
+import * as React from "react";
+type FormSheetActions = Readonly<{
+    requestClose: () => void;
+}>;
+type FormSheetProps = {
+    children: React.ReactNode;
+    closeDisabled?: boolean;
+    isDirty: boolean;
+    onOpenChange: (open: boolean) => void;
+    open: boolean;
+    trigger?: React.ReactElement;
+};
+declare function useFormSheetActions(): FormSheetActions;
+declare function FormSheet({ children, closeDisabled, isDirty, onOpenChange, open, trigger, }: FormSheetProps): React.JSX.Element;
+export { FormSheet, useFormSheetActions, type FormSheetActions, type FormSheetProps };

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

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "./alert-dialog";
+import { Sheet, SheetTrigger } from "./sheet";
+const FormSheetContext = React.createContext(null);
+function useFormSheetActions() {
+    const actions = React.useContext(FormSheetContext);
+    if (!actions)
+        throw new Error("useFormSheetActions must be used within a FormSheet");
+    return actions;
+}
+function FormSheet({ children, closeDisabled = false, isDirty, onOpenChange, open, trigger, }) {
+    const [discardPromptOpen, setDiscardPromptOpen] = React.useState(false);
+    const discardReturnFocusRef = React.useRef(null);
+    const discardingRef = React.useRef(false);
+    const returnFocus = useFormSheetReturnFocus(open);
+    const closeSheet = React.useCallback(() => {
+        returnFocus.prepareForClose();
+        onOpenChange(false);
+    }, [onOpenChange, returnFocus]);
+    const requestClose = React.useCallback(() => {
+        if (closeDisabled)
+            return;
+        if (isDirty) {
+            discardReturnFocusRef.current = getActiveElement();
+            setDiscardPromptOpen(true);
+            return;
+        }
+        closeSheet();
+    }, [closeDisabled, closeSheet, isDirty]);
+    const actions = React.useMemo(() => ({ requestClose }), [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;
+    }
+    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 })] }));
+}
+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]);
+}
+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 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/entries/feedback-center-footer.d.ts

@@ -0,0 +1 @@
+export * from "../components/blocks/feedback-center-footer";

package/dist/entries/feedback-center-footer.js

@@ -0,0 +1 @@
+export * from "../components/blocks/feedback-center-footer";

package/dist/entries/feedback-emergency-fields.d.ts

@@ -0,0 +1 @@
+export * from "../components/blocks/feedback-emergency-fields";

package/dist/entries/feedback-emergency-fields.js

@@ -0,0 +1 @@
+export * from "../components/blocks/feedback-emergency-fields";

package/dist/entries/form-sheet.d.ts

@@ -0,0 +1 @@
+export * from "../components/ui/form-sheet";

package/dist/entries/form-sheet.js

@@ -0,0 +1 @@
+export * from "../components/ui/form-sheet";

package/dist/entries/submit-feedback-composer.d.ts

@@ -0,0 +1 @@
+export * from "../components/blocks/submit-feedback-composer";

package/dist/entries/submit-feedback-composer.js

@@ -0,0 +1 @@
+export * from "../components/blocks/submit-feedback-composer";

package/dist/entries/use-feedback-composer-state.d.ts

@@ -0,0 +1 @@
+export * from "../components/blocks/use-feedback-composer-state";

package/dist/entries/use-feedback-composer-state.js

@@ -0,0 +1 @@
+export * from "../components/blocks/use-feedback-composer-state";

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

@@ -0,0 +1,13 @@
+/**
+ * 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.
+ */
+declare function readStoredValue(key: string): string | null;
+declare function writeStoredValue(key: string, value: string): void;
+declare function removeStoredValue(key: string): void;
+export { readStoredValue, removeStoredValue, writeStoredValue };

package/dist/lib/browser-storage.js

@@ -0,0 +1,43 @@
+/**
+ * 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.
+ */
+function storage() {
+    try {
+        return typeof window === "undefined" ? null : window.localStorage;
+    }
+    catch {
+        // Accessing the property itself throws when storage is blocked by policy.
+        return null;
+    }
+}
+function readStoredValue(key) {
+    try {
+        return storage()?.getItem(key) ?? null;
+    }
+    catch {
+        return null;
+    }
+}
+function writeStoredValue(key, value) {
+    try {
+        storage()?.setItem(key, value);
+    }
+    catch {
+        // Disabled or over quota: the preference lives for this session only.
+    }
+}
+function removeStoredValue(key) {
+    try {
+        storage()?.removeItem(key);
+    }
+    catch {
+        // Nothing to recover from -- the value either was not written or stays.
+    }
+}
+export { readStoredValue, removeStoredValue, writeStoredValue };

package/package.json

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