@ciridae/ui 0.14.0 → 0.16.0

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

@@ -10,6 +10,7 @@ type FeedbackCenterCommentThreadProps = {
     onRetry?: () => void;
     onSubmitComment?: FeedbackCommentSubmitHandler;
     statusEvents: UserFeedbackStatusEvent[];
+    submitError?: Error | null;
 };
-declare function FeedbackCenterCommentThread({ comments, error, feedback, isCommentSubmitting, isCommentsLoading, onRetry, onSubmitComment, statusEvents, }: FeedbackCenterCommentThreadProps): import("@types/react").JSX.Element;
+declare function FeedbackCenterCommentThread({ comments, error, feedback, isCommentSubmitting, isCommentsLoading, onRetry, onSubmitComment, statusEvents, submitError, }: FeedbackCenterCommentThreadProps): import("@types/react").JSX.Element;
 export { FeedbackCenterCommentThread, type FeedbackCommentSubmitHandler };

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

@@ -8,15 +8,16 @@ import { useRevealThreadEnd } from "./use-reveal-thread-end.js";
 import { Alert, AlertDescription, AlertTitle } from "../ui/alert.js";
 import { Button } from "../ui/button.js";
 import { Skeleton } from "../ui/skeleton.js";
-function FeedbackCenterCommentThread({ comments, error, feedback, isCommentSubmitting, isCommentsLoading, onRetry, onSubmitComment, statusEvents, }) {
+function FeedbackCenterCommentThread({ comments, error, feedback, isCommentSubmitting, isCommentsLoading, onRetry, onSubmitComment, statusEvents, submitError, }) {
     const activity = mergeFeedbackActivity(statusEvents, comments);
+    const initialStatusEventId = activity.find((entry) => entry.kind === "status")?.event.id;
     const { armReveal, endRef } = useRevealThreadEnd(activity.length);
     // 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] })] }));
     }
     const submitComment = getCommentSubmitHandler(feedback, onSubmitComment, armReveal);
-    return (_jsxs("section", { "aria-label": "Activity", className: "relative grid gap-(--panel-gap)", children: [_jsxs("div", { className: "grid gap-1", children: [activity.length === 0 && !isCommentsLoading ? _jsx(FeedbackActivityEmpty, {}) : null, activity.map((entry) => entry.kind === "comment" ? (_jsx(CommentItem, { comment: entry.comment }, entry.comment.id)) : (_jsx(FeedbackStatusActivity, { event: entry.event }, entry.event.id))), isCommentsLoading ? _jsx(FeedbackActivityLoading, {}) : null] }), submitComment ? (_jsx(CommentComposer, { isSubmitting: isCommentSubmitting, onSubmit: submitComment, placeholder: "Write a reply...", submitLabel: "Reply" })) : null, _jsx("div", { "aria-hidden": true, className: "absolute bottom-0", ref: endRef })] }));
+    return (_jsxs("section", { "aria-label": "Activity", className: "relative grid gap-(--panel-gap)", children: [_jsxs("div", { className: "grid gap-1", children: [activity.length === 0 && !isCommentsLoading ? _jsx(FeedbackActivityEmpty, {}) : null, activity.map((entry) => entry.kind === "comment" ? (_jsx(CommentItem, { comment: entry.comment }, entry.comment.id)) : (_jsx(FeedbackStatusActivity, { event: entry.event, isInitial: entry.event.id === initialStatusEventId }, entry.event.id))), isCommentsLoading ? _jsx(FeedbackActivityLoading, {}) : null] }), submitComment ? (_jsx(CommentComposer, { isSubmitting: isCommentSubmitting, onSubmit: submitComment, placeholder: "Write a reply...", submitLabel: "Reply" })) : null, submitError && !isCommentSubmitting ? (_jsxs(Alert, { variant: "destructive", children: [_jsx(AlertCircleIcon, {}), _jsx(AlertTitle, { children: "Reply could not be sent" }), _jsx(AlertDescription, { children: submitError.message })] })) : null, _jsx("div", { "aria-hidden": true, className: "absolute bottom-0", ref: endRef })] }));
 }
 function FeedbackActivityEmpty() {
     return (_jsxs("div", { className: "flex items-start gap-2 py-2 text-sm text-muted-foreground", children: [_jsx(MessageSquareTextIcon, { className: "mt-0.5 size-4 shrink-0" }), _jsx("span", { children: "No activity yet." })] }));
@@ -43,11 +44,11 @@ function compareActivityEntries(left, right) {
         return timestampOrder;
     return left.kind === right.kind ? 0 : left.kind === "status" ? -1 : 1;
 }
-function FeedbackStatusActivity({ event }) {
-    return (_jsxs("div", { className: "flex min-w-0 items-center gap-2 py-2 text-xs text-muted-foreground", children: [_jsx("span", { "aria-hidden": true, className: "size-1.5 shrink-0 rounded-full bg-border" }), _jsx("span", { children: "Status changed to" }), _jsx(FeedbackStatusBadge, { status: event.status }), _jsx("time", { className: "ml-auto shrink-0 font-mono tabular-nums", dateTime: getFeedbackTimestampDateTime(event.createdAt), title: formatFeedbackTimestampFull(event.createdAt), children: formatFeedbackTimestamp(event.createdAt) })] }));
+function FeedbackStatusActivity({ event, isInitial, }) {
+    return (_jsxs("div", { className: "flex min-w-0 items-center gap-2 py-2 text-xs text-muted-foreground", children: [_jsx("span", { "aria-hidden": true, className: "size-1.5 shrink-0 bg-border" }), _jsx("span", { children: isInitial ? "Initial status" : "Status changed to" }), _jsx(FeedbackStatusBadge, { status: event.status }), _jsx("time", { className: "ml-auto shrink-0 font-mono tabular-nums", dateTime: getFeedbackTimestampDateTime(event.createdAt), title: formatFeedbackTimestampFull(event.createdAt), children: formatFeedbackTimestamp(event.createdAt) })] }));
 }
 function FeedbackActivityLoading() {
-    return (_jsxs("div", { "aria-label": "Loading activity", className: "flex gap-3 px-1 py-2", role: "status", children: [_jsx(Skeleton, { className: "size-6 rounded-full" }), _jsxs("div", { className: "grid flex-1 gap-2", children: [_jsx(Skeleton, { className: "h-3 w-32" }), _jsx(Skeleton, { className: "h-3 w-4/5" })] })] }));
+    return (_jsxs("div", { "aria-label": "Loading activity", className: "flex gap-3 px-1 py-2", role: "status", children: [_jsx(Skeleton, { className: "size-6 rounded-none" }), _jsxs("div", { className: "grid flex-1 gap-2", children: [_jsx(Skeleton, { className: "h-3 w-32" }), _jsx(Skeleton, { className: "h-3 w-4/5" })] })] }));
 }
 function getCommentSubmitHandler(feedback, onSubmitComment, armReveal) {
     if (!feedback || !onSubmitComment)

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

@@ -11,6 +11,7 @@ type FeedbackCenterTabsProps = {
     canComment?: (item: UserFeedbackItem) => boolean;
     commentsByFeedbackId: Record<string, CommentItemData[]>;
     commentsError?: Error | null;
+    commentSubmitError?: Error | null;
     composerProps: FeedbackCenterComposerProps;
     formId: string;
     onDirtyChange: (dirty: boolean) => void;
@@ -35,5 +36,5 @@ type FeedbackCenterTabsProps = {
 declare function FeedbackCenterSheetHeader({ unreadReplyCount }: {
     unreadReplyCount: number;
 }): React.JSX.Element;
-declare function FeedbackCenterTabs({ canComment, composerProps, commentsByFeedbackId, commentsError, formId, onDirtyChange, onUrgencyChange, isCommentSubmitting, isCommentsLoading, isLoading, items, itemsError, onBack, onCancel, onSelectFeedback, onRetryComments, onRetryItems, onSubmittedChange, onSubmitComment, selectedFeedback, renderEvidence, statusEventsByFeedbackId, view, }: FeedbackCenterTabsProps): React.JSX.Element;
+declare function FeedbackCenterTabs({ canComment, composerProps, commentsByFeedbackId, commentsError, commentSubmitError, formId, onDirtyChange, onUrgencyChange, isCommentSubmitting, isCommentsLoading, isLoading, items, itemsError, onBack, onCancel, onSelectFeedback, onRetryComments, onRetryItems, onSubmittedChange, onSubmitComment, selectedFeedback, renderEvidence, statusEventsByFeedbackId, view, }: FeedbackCenterTabsProps): React.JSX.Element;
 export { FeedbackCenterSheetHeader, FeedbackCenterTabs, type FeedbackCenterTab, type FeedbackCenterView, };

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

@@ -9,8 +9,8 @@ import { TabsContent, TabsList, TabsTrigger } from "../ui/tabs.js";
 function FeedbackCenterSheetHeader({ unreadReplyCount }) {
     return (_jsxs(SheetHeader, { className: "gap-3", children: [_jsxs("div", { className: "grid gap-1.5 pr-12", children: [_jsx(SheetTitle, { children: "Feedback" }), _jsx(SheetDescription, { children: "Send feedback and track your submissions in one place." })] }), _jsx(FeedbackCenterTabsList, { unreadReplyCount: unreadReplyCount })] }));
 }
-function FeedbackCenterTabs({ canComment, composerProps, commentsByFeedbackId, commentsError, formId, onDirtyChange, onUrgencyChange, isCommentSubmitting, isCommentsLoading, isLoading, items, itemsError, onBack, onCancel, onSelectFeedback, onRetryComments, onRetryItems, onSubmittedChange, onSubmitComment, selectedFeedback, renderEvidence, statusEventsByFeedbackId, view, }) {
-    return (_jsxs(_Fragment, { children: [_jsx(FeedbackCenterSubmitTab, { composerProps: composerProps, formId: formId, onCancel: onCancel, onDirtyChange: onDirtyChange, onSubmittedChange: onSubmittedChange, onUrgencyChange: onUrgencyChange }), _jsx(FeedbackCenterMineContent, { commentsByFeedbackId: commentsByFeedbackId, canComment: canComment, commentsError: commentsError, isCommentSubmitting: isCommentSubmitting, isCommentsLoading: isCommentsLoading, isLoading: isLoading, items: items, itemsError: itemsError, onBack: onBack, onSelectFeedback: onSelectFeedback, onRetryComments: onRetryComments, onRetryItems: onRetryItems, onSubmitComment: onSubmitComment, selectedFeedback: selectedFeedback, renderEvidence: renderEvidence, statusEventsByFeedbackId: statusEventsByFeedbackId, view: view })] }));
+function FeedbackCenterTabs({ canComment, composerProps, commentsByFeedbackId, commentsError, commentSubmitError, formId, onDirtyChange, onUrgencyChange, isCommentSubmitting, isCommentsLoading, isLoading, items, itemsError, onBack, onCancel, onSelectFeedback, onRetryComments, onRetryItems, onSubmittedChange, onSubmitComment, selectedFeedback, renderEvidence, statusEventsByFeedbackId, view, }) {
+    return (_jsxs(_Fragment, { children: [_jsx(FeedbackCenterSubmitTab, { composerProps: composerProps, formId: formId, onCancel: onCancel, onDirtyChange: onDirtyChange, onSubmittedChange: onSubmittedChange, onUrgencyChange: onUrgencyChange }), _jsx(FeedbackCenterMineContent, { commentsByFeedbackId: commentsByFeedbackId, canComment: canComment, commentsError: commentsError, commentSubmitError: commentSubmitError, isCommentSubmitting: isCommentSubmitting, isCommentsLoading: isCommentsLoading, isLoading: isLoading, items: items, itemsError: itemsError, onBack: onBack, onSelectFeedback: onSelectFeedback, onRetryComments: onRetryComments, onRetryItems: onRetryItems, onSubmitComment: onSubmitComment, selectedFeedback: selectedFeedback, renderEvidence: renderEvidence, statusEventsByFeedbackId: statusEventsByFeedbackId, view: view })] }));
 }
 function FeedbackCenterTabsList({ unreadReplyCount }) {
     return (_jsxs(TabsList, { className: "w-full", children: [_jsx(TabsTrigger, { value: "submit", children: "Send feedback" }), _jsxs(TabsTrigger, { value: "mine", children: ["My feedback", unreadReplyCount > 0 ? _jsx(Badge, { variant: "secondary", children: unreadReplyCount }) : null] })] }));
@@ -22,14 +22,14 @@ function FeedbackCenterSubmitTab({ composerProps, formId, onCancel, onDirtyChang
 function FeedbackCenterMineContent(props) {
     return (_jsx(TabsContent, { className: "mt-0", value: "mine", children: _jsx(FeedbackCenterMineTab, { ...props }) }));
 }
-function FeedbackCenterMineTab({ canComment, isLoading, commentsByFeedbackId, commentsError, isCommentSubmitting, isCommentsLoading, items, itemsError, onBack, onSelectFeedback, onRetryComments, onRetryItems, onSubmitComment, selectedFeedback, renderEvidence, statusEventsByFeedbackId, view, }) {
+function FeedbackCenterMineTab({ canComment, isLoading, commentsByFeedbackId, commentsError, commentSubmitError, isCommentSubmitting, isCommentsLoading, items, itemsError, onBack, onSelectFeedback, onRetryComments, onRetryItems, onSubmitComment, selectedFeedback, renderEvidence, statusEventsByFeedbackId, view, }) {
     if (view === "detail") {
-        return (_jsx(FeedbackCenterDetailPane, { comments: getFeedbackScopedItems(commentsByFeedbackId, selectedFeedback), canComment: canComment, commentsError: commentsError, feedback: selectedFeedback, isCommentSubmitting: isCommentSubmitting, isCommentsLoading: isCommentsLoading, onBack: onBack, onRetryComments: onRetryComments, onSubmitComment: onSubmitComment, renderEvidence: renderEvidence, statusEvents: getFeedbackScopedItems(statusEventsByFeedbackId, selectedFeedback) }));
+        return (_jsx(FeedbackCenterDetailPane, { comments: getFeedbackScopedItems(commentsByFeedbackId, selectedFeedback), canComment: canComment, commentsError: commentsError, commentSubmitError: commentSubmitError, feedback: selectedFeedback, isCommentSubmitting: isCommentSubmitting, isCommentsLoading: isCommentsLoading, onBack: onBack, onRetryComments: onRetryComments, onSubmitComment: onSubmitComment, renderEvidence: renderEvidence, statusEvents: getFeedbackScopedItems(statusEventsByFeedbackId, selectedFeedback) }));
     }
     return (_jsx(FeedbackUserList, { error: itemsError, isLoading: isLoading, items: items, onSelectFeedback: onSelectFeedback, onRetry: onRetryItems, selectedId: selectedFeedback?.id }));
 }
-function FeedbackCenterDetailPane({ canComment, comments, commentsError, feedback, isCommentSubmitting, isCommentsLoading, onBack, onRetryComments, onSubmitComment, renderEvidence, statusEvents, }) {
-    return (_jsx(FeedbackUserDetail, { activityLabel: "Activity", activitySlot: _jsx(FeedbackCenterCommentThread, { comments: comments, error: commentsError, feedback: feedback, isCommentSubmitting: isCommentSubmitting, isCommentsLoading: isCommentsLoading, onSubmitComment: feedback && canComment?.(feedback) === false ? undefined : onSubmitComment, onRetry: onRetryComments, statusEvents: statusEvents }), evidenceSlot: feedback ? renderEvidence?.(feedback) : undefined, feedback: feedback, onBack: onBack }));
+function FeedbackCenterDetailPane({ canComment, comments, commentsError, commentSubmitError, feedback, isCommentSubmitting, isCommentsLoading, onBack, onRetryComments, onSubmitComment, renderEvidence, statusEvents, }) {
+    return (_jsx(FeedbackUserDetail, { activityLabel: "Activity", activitySlot: _jsx(FeedbackCenterCommentThread, { comments: comments, error: commentsError, feedback: feedback, isCommentSubmitting: isCommentSubmitting, isCommentsLoading: isCommentsLoading, onSubmitComment: feedback && canComment?.(feedback) === false ? undefined : onSubmitComment, onRetry: onRetryComments, statusEvents: statusEvents, submitError: commentSubmitError }), evidenceSlot: feedback ? renderEvidence?.(feedback) : undefined, feedback: feedback, onBack: onBack }));
 }
 function getFeedbackScopedItems(itemsByFeedbackId, feedback) {
     if (!feedback)

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

@@ -8,6 +8,7 @@ type FeedbackCenterSheetProps = Omit<FeedbackComposerProps, "actions" | "formId"
     canComment?: (item: UserFeedbackItem) => boolean;
     commentsByFeedbackId?: Record<string, CommentItemData[]>;
     commentsError?: Error | null;
+    commentSubmitError?: Error | null;
     defaultTab?: FeedbackCenterTab;
     isCommentSubmitting?: boolean;
     isCommentsLoading?: boolean;

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

@@ -11,7 +11,7 @@ function FeedbackCenterSheet(props) {
 }
 function FeedbackCenterSheetContent({ props, state, }) {
     const { contentProps, requestClose } = useFormSheetActions();
-    return (_jsx(SheetContent, { size: "md", ...contentProps, children: _jsxs(Tabs, { className: "min-h-0 flex-1", onValueChange: setFeedbackCenterTab(state.handleTabChange), value: state.activeTab, children: [_jsx(FeedbackCenterSheetHeader, { unreadReplyCount: state.unreadReplyCount }), _jsx(SheetBody, { className: "pb-(--panel-padding)", children: _jsx(FeedbackCenterTabs, { canComment: props.canComment, composerProps: getFeedbackComposerProps(props), commentsByFeedbackId: props.commentsByFeedbackId ?? {}, commentsError: props.commentsError, formId: state.formId, isCommentSubmitting: props.isCommentSubmitting ?? false, isCommentsLoading: props.isCommentsLoading ?? false, isLoading: props.isLoading ?? false, items: props.items, itemsError: props.itemsError, onBack: state.handleBack, onCancel: requestClose, onDirtyChange: state.setIsDirty, onRetryComments: props.onRetryComments, onRetryItems: props.onRetryItems, onSelectFeedback: state.handleSelectFeedback, onSubmitComment: props.onSubmitComment, onSubmittedChange: state.setIsSubmitted, onUrgencyChange: state.setUrgency, renderEvidence: props.renderEvidence, selectedFeedback: state.selectedFeedback, statusEventsByFeedbackId: props.statusEventsByFeedbackId ?? {}, view: state.view }) }), _jsx(FeedbackCenterFooter, { activeTab: state.activeTab, formId: state.formId, isSubmitted: state.isSubmitted, isSubmitting: props.isSubmitting ?? false, onCancel: requestClose, urgency: state.urgency })] }) }));
+    return (_jsx(SheetContent, { size: "md", ...contentProps, children: _jsxs(Tabs, { className: "min-h-0 flex-1", onValueChange: setFeedbackCenterTab(state.handleTabChange), value: state.activeTab, children: [_jsx(FeedbackCenterSheetHeader, { unreadReplyCount: state.unreadReplyCount }), _jsx(SheetBody, { className: "pb-(--panel-padding)", children: _jsx(FeedbackCenterTabs, { canComment: props.canComment, composerProps: getFeedbackComposerProps(props), commentsByFeedbackId: props.commentsByFeedbackId ?? {}, commentsError: props.commentsError, commentSubmitError: props.commentSubmitError, formId: state.formId, isCommentSubmitting: props.isCommentSubmitting ?? false, isCommentsLoading: props.isCommentsLoading ?? false, isLoading: props.isLoading ?? false, items: props.items, itemsError: props.itemsError, onBack: state.handleBack, onCancel: requestClose, onDirtyChange: state.setIsDirty, onRetryComments: props.onRetryComments, onRetryItems: props.onRetryItems, onSelectFeedback: state.handleSelectFeedback, onSubmitComment: props.onSubmitComment, onSubmittedChange: state.setIsSubmitted, onUrgencyChange: state.setUrgency, renderEvidence: props.renderEvidence, selectedFeedback: state.selectedFeedback, statusEventsByFeedbackId: props.statusEventsByFeedbackId ?? {}, view: state.view }) }), _jsx(FeedbackCenterFooter, { activeTab: state.activeTab, formId: state.formId, isSubmitted: state.isSubmitted, isSubmitting: props.isSubmitting ?? false, onCancel: requestClose, urgency: state.urgency })] }) }));
 }
 function useFeedbackCenterSheetState(props) {
     const defaultTab = props.defaultTab ?? "submit";
@@ -85,6 +85,8 @@ function getFeedbackComposerProps(props) {
         isSubmitting: props.isSubmitting,
         maxAttachmentSizeMb: props.maxAttachmentSizeMb,
         maxAttachments: props.maxAttachments,
+        maxDescriptionLength: props.maxDescriptionLength,
+        maxSubjectLength: props.maxSubjectLength,
         onSubmit: props.onSubmit,
         urgencyEnabled: props.urgencyEnabled,
     };

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

@@ -10,6 +10,8 @@ type FeedbackComposerProps = {
     isSubmitting?: boolean;
     maxAttachmentSizeMb?: number;
     maxAttachments?: number;
+    maxDescriptionLength?: number;
+    maxSubjectLength?: number;
     onCancel?: () => void;
     onDirtyChange?: (dirty: boolean) => void;
     onSubmittedChange?: (submitted: boolean) => void;

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

@@ -31,15 +31,15 @@ function FeedbackComposer(props) {
 }
 function FeedbackComposerForm({ ids, props, state, }) {
     const isSubmitting = props.isSubmitting ?? false;
-    return (_jsxs("form", { className: "grid gap-(--panel-gap)", id: props.formId, onSubmit: (event) => submitFeedbackComposer(event, props, state), children: [_jsxs(FieldGroup, { children: [state.urgency === "normal" ? (_jsx(FeedbackTypeField, { disabled: isSubmitting, onTypeChange: state.setType, type: state.type })) : null, _jsx(FeedbackSubjectField, { disabled: isSubmitting, error: state.error, errorId: ids.subjectErrorId, fieldId: ids.subjectId, onSubjectChange: state.setSubject, subject: state.subject }), _jsx(FeedbackDescriptionField, { description: state.description, disabled: isSubmitting, error: state.error, errorId: ids.descriptionErrorId, fieldId: ids.descriptionId, onDescriptionChange: state.setDescription }), _jsx(FeedbackAttachmentsField, { props: props, state: state }), _jsx(FeedbackComposerEmergencySection, { ids: ids, props: props, state: state }), state.submitError ? _jsx(FieldError, { children: state.submitError }) : null] }), props.actions === "external" ? null : (_jsx(FeedbackComposerActions, { isSubmitting: isSubmitting, onCancel: props.onCancel, urgency: state.urgency }))] }));
+    return (_jsxs("form", { className: "grid gap-(--panel-gap)", id: props.formId, onSubmit: (event) => submitFeedbackComposer(event, props, state), children: [_jsxs(FieldGroup, { children: [state.urgency === "normal" ? (_jsx(FeedbackTypeField, { disabled: isSubmitting, onTypeChange: state.setType, type: state.type })) : null, _jsx(FeedbackSubjectField, { disabled: isSubmitting, error: state.error, errorId: ids.subjectErrorId, fieldId: ids.subjectId, maxLength: props.maxSubjectLength ?? 255, onSubjectChange: state.setSubject, subject: state.subject }), _jsx(FeedbackDescriptionField, { description: state.description, disabled: isSubmitting, error: state.error, errorId: ids.descriptionErrorId, fieldId: ids.descriptionId, maxLength: props.maxDescriptionLength ?? 10000, onDescriptionChange: state.setDescription }), _jsx(FeedbackAttachmentsField, { props: props, state: state }), _jsx(FeedbackComposerEmergencySection, { ids: ids, props: props, state: state }), state.submitError ? _jsx(FieldError, { children: state.submitError }) : null] }), props.actions === "external" ? null : (_jsx(FeedbackComposerActions, { isSubmitting: isSubmitting, onCancel: props.onCancel, urgency: state.urgency }))] }));
 }
-function FeedbackSubjectField({ disabled, error, errorId, fieldId, onSubjectChange, subject, }) {
+function FeedbackSubjectField({ disabled, error, errorId, fieldId, maxLength, onSubjectChange, subject, }) {
     const invalid = error === "subject";
-    return (_jsxs(Field, { "data-invalid": invalid, children: [_jsx(FieldContent, { children: _jsx(FieldLabel, { htmlFor: fieldId, required: true, children: "Subject" }) }), _jsx(Input, { "aria-describedby": invalid ? errorId : undefined, "aria-invalid": invalid, "aria-required": "true", disabled: disabled, id: fieldId, maxLength: 255, onChange: (event) => onSubjectChange(event.target.value), placeholder: "Short subject for the team", value: subject }), invalid ? _jsx(FieldError, { id: errorId, children: "Subject is required." }) : null] }));
+    return (_jsxs(Field, { "data-invalid": invalid, children: [_jsx(FieldContent, { children: _jsx(FieldLabel, { htmlFor: fieldId, required: true, children: "Subject" }) }), _jsx(Input, { "aria-describedby": invalid ? errorId : undefined, "aria-invalid": invalid, "aria-required": "true", disabled: disabled, id: fieldId, maxLength: maxLength, onChange: (event) => onSubjectChange(event.target.value), placeholder: "Short subject for the team", value: subject }), invalid ? _jsx(FieldError, { id: errorId, children: "Subject is required." }) : null] }));
 }
-function FeedbackDescriptionField({ description, disabled, error, errorId, fieldId, onDescriptionChange, }) {
+function FeedbackDescriptionField({ description, disabled, error, errorId, fieldId, maxLength, onDescriptionChange, }) {
     const invalid = error === "description";
-    return (_jsxs(Field, { "data-invalid": invalid, children: [_jsx(FieldContent, { children: _jsx(FieldLabel, { htmlFor: fieldId, required: true, children: "Feedback" }) }), _jsx(Textarea, { "aria-describedby": invalid ? errorId : undefined, "aria-invalid": invalid, "aria-required": "true", className: "min-h-40", disabled: disabled, id: fieldId, maxLength: 10000, onChange: (event) => onDescriptionChange(event.target.value), placeholder: "What happened, what did you expect, or what would you like to see?", rows: 6, value: description }), invalid ? _jsx(FieldError, { id: errorId, children: "Feedback is required." }) : null] }));
+    return (_jsxs(Field, { "data-invalid": invalid, children: [_jsx(FieldContent, { children: _jsx(FieldLabel, { htmlFor: fieldId, required: true, children: "Feedback" }) }), _jsx(Textarea, { "aria-describedby": invalid ? errorId : undefined, "aria-invalid": invalid, "aria-required": "true", className: "min-h-40", disabled: disabled, id: fieldId, maxLength: maxLength, onChange: (event) => onDescriptionChange(event.target.value), placeholder: "What happened, what did you expect, or what would you like to see?", rows: 6, value: description }), invalid ? _jsx(FieldError, { id: errorId, children: "Feedback is required." }) : null] }));
 }
 function FeedbackAttachmentsField({ props, state, }) {
     if (props.attachmentsEnabled === false)

package/dist/components/blocks/generated-connect-link.js

@@ -58,7 +58,7 @@ export function GeneratedConnectLink({ access, createConnectLink, currentTools,
                         // well above this button, and this is the click that acts on it.
                         // Keyed on whether the grant can write rather than on the mode, so
                         // a Custom set holding an action tool does not read as read-only.
-                        variant: writeGranting ? "destructive" : "default", children: generateLabel(link !== undefined, access, writeGranting) }), createConnectLink.isPending ? (_jsx(Spinner, { "aria-label": "Generating connection code", className: "text-muted-foreground" })) : null, link === undefined ? null : (_jsxs("p", { className: "text-muted-foreground/70 text-xs", children: [_jsxs("span", { className: "font-medium", children: [ACCESS_LABEL[link.access], " access"] }), " \u00B7 single use \u00B7 expires ", expiryFormatter.format(new Date(link.expiresAt))] }))] }), staleLabel === null ? null : (_jsxs("p", { className: "text-destructive text-xs", children: ["This code was generated before you changed the access above. Generate a new one to share", " ", staleLabel, " access."] }))] }));
+                        variant: writeGranting ? "destructive" : "default", children: generateLabel(link !== undefined, access, writeGranting) }), createConnectLink.isPending ? (_jsx(Spinner, { "aria-label": "Generating connection code", className: "text-muted-foreground" })) : null, link === undefined ? null : (_jsxs("p", { className: "text-muted-foreground/70 text-xs", children: [_jsxs("span", { className: "font-medium", children: [ACCESS_LABEL[link.access], " access"] }), " \u00B7 single use \u00B7 expires ", expiryFormatter.format(link.expiresAtEpochMilliseconds)] }))] }), staleLabel === null ? null : (_jsxs("p", { className: "text-destructive text-xs", children: ["This code was generated before you changed the access above. Generate a new one to share", " ", staleLabel, " access."] }))] }));
 }
 function sameSelection(left, right) {
     if (left === null || right === null)

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

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable react-hooks/refs -- dnd-kit drag handlers need a mutable ref to suppress the click fired after a drag. */
 import * as React from "react";
 import { DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
 import { sortableKeyboardCoordinates } from "@dnd-kit/sortable";

package/dist/components/blocks/mcp-access-types.d.ts

@@ -29,13 +29,14 @@ export type McpAccessToolListing = {
  * code was stamped with, and when it stops working. The code itself is not
  * here — the app shows it through its own `CopyField`, and a type that never
  * carries the credential cannot leak it. Discriminated on `access`: only a
- * selected link carries tools, and it always does.
+ * selected link carries tools, and it always does. Expiry is integer Unix
+ * epoch milliseconds.
  */
 export type McpConnectLink = {
     access: Exclude<McpAccessMode, "selected">;
-    expiresAt: string;
+    expiresAtEpochMilliseconds: number;
 } | {
     access: "selected";
     tools: McpAccessToolSelector[];
-    expiresAt: string;
+    expiresAtEpochMilliseconds: number;
 };

package/dist/components/blocks/timestamp-format.js

@@ -1,4 +1,3 @@
-import { isValid, parseISO } from "date-fns";
 function formatTimestamp(value, options = {}) {
     const date = parseTimestamp(value);
     if (!date)
@@ -40,8 +39,8 @@ function toUtcTimestamp(value) {
 function parseTimestamp(value) {
     if (!value)
         return undefined;
-    const date = parseISO(toUtcTimestamp(value));
-    return isValid(date) ? date : undefined;
+    const date = new Date(toUtcTimestamp(value));
+    return Number.isNaN(date.getTime()) ? undefined : date;
 }
 function getTimestampFallback(value, fallback = "No update") {
     return value?.trim() || fallback;

package/dist/components/ui/app-shell-page.js

@@ -1,12 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { cn } from "../../lib/utils.js";
 import { PageHeader, PageHeaderActions, PageHeaderContent, PageHeaderDescription, PageHeaderMain, PageHeaderTitle, } from "./page-header.js";
-import { SidebarTrigger } from "./sidebar.js";
+import { SidebarTrigger, useOptionalSidebar } from "./sidebar.js";
 function AppShellPage({ className, ...props }) {
     return (_jsx("div", { "data-slot": "app-shell-page", className: cn("flex min-h-0 flex-1 flex-col bg-background text-foreground", className), ...props }));
 }
 function AppShellPageHeader({ actions, className, description, title, ...props }) {
-    return (_jsx(PageHeader, { className: className, ...props, children: _jsxs(PageHeaderMain, { className: "relative pl-14 md:pl-6 lg:pl-8", children: [_jsx(SidebarTrigger, { className: "absolute top-1/2 left-4 -translate-y-1/2 md:hidden" }), _jsxs(PageHeaderContent, { children: [_jsx(PageHeaderTitle, { children: title }), description ? _jsx(PageHeaderDescription, { children: description }) : null] }), actions ? _jsx(PageHeaderActions, { children: actions }) : null] }) }));
+    // The mobile trigger is an affordance of the shell, not of the header. Pages
+    // rendered outside a SidebarProvider get the header without it — and without
+    // the gutter that only exists to clear it — rather than a useSidebar throw.
+    const hasSidebar = useOptionalSidebar() !== null;
+    return (_jsx(PageHeader, { className: className, ...props, children: _jsxs(PageHeaderMain, { className: cn(hasSidebar && "relative pl-14 md:pl-6 lg:pl-8"), children: [hasSidebar ? (_jsx(SidebarTrigger, { className: "absolute top-1/2 left-4 -translate-y-1/2 md:hidden" })) : null, _jsxs(PageHeaderContent, { children: [_jsx(PageHeaderTitle, { children: title }), description ? _jsx(PageHeaderDescription, { children: description }) : null] }), actions ? _jsx(PageHeaderActions, { children: actions }) : null] }) }));
 }
 function AppShellWelcome({ brand, children, className, description, title, ...props }) {
     return (_jsx("div", { "data-slot": "app-shell-welcome", className: cn("flex min-h-0 flex-1 items-center justify-center p-6", className), ...props, children: _jsxs("div", { className: "flex max-w-md flex-col items-center gap-4 text-center", children: [brand ? _jsx(AppShellWelcomeBrand, { brand: brand }) : null, _jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx("h2", { className: "font-heading text-2xl tracking-normal", children: title }), description ? (_jsx("div", { className: "text-sm text-muted-foreground [&>a]:font-medium [&>a]:text-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-foreground/72", children: description })) : null] }), children] }) }));

package/dist/components/ui/data-table-context.js

@@ -48,7 +48,6 @@ function useDataTable() {
     if (context === null) {
         throw new Error("This control must be rendered inside a <TanStackDataTable />.");
     }
-    // eslint-disable-next-line no-restricted-syntax -- restores the row type erased by the context above; the provider only ever stores a TanStackTable.
     return context.table;
 }
 export { DataTableProvider, useDataTable };

package/dist/components/ui/data-table-tanstack.js

@@ -70,7 +70,6 @@ function useClampedPageIndex(table, enabled, loading, onCorrected) {
             table.setPageIndex(lastPageIndex);
     }, [lastPageIndex, outOfRange, table]);
 }
-// eslint-disable-next-line complexity -- TanStack table setup is declarative option wiring.
 function useDataTableInstance(props) {
     const [sorting, setSorting] = React.useState(props.state?.sorting ?? []);
     const [columnFilters, setColumnFilters] = React.useState(props.state?.columnFilters ?? []);
@@ -79,7 +78,6 @@ function useDataTableInstance(props) {
     const [rowSelection, setRowSelection] = React.useState(props.state?.rowSelection ?? {});
     const [globalFilter, setGlobalFilter] = React.useState(props.state?.globalFilter ?? "");
     const [pagination, setPagination] = React.useState(props.state?.pagination ?? { pageIndex: 0, pageSize: props.defaultPageSize ?? 10 });
-    // eslint-disable-next-line react-hooks/incompatible-library -- TanStack Table intentionally returns imperative table helpers.
     return useReactTable({
         data: props.data,
         columns: props.columns,

package/dist/components/ui/item.d.ts

@@ -12,7 +12,7 @@ declare function Item({ className, variant, size, asChild, ...props }: React.Com
     asChild?: boolean;
 }): React.JSX.Element;
 declare const itemMediaVariants: (props?: ({
-    variant?: "default" | "icon" | "image" | null | undefined;
+    variant?: "image" | "default" | "icon" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 declare function ItemMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>): React.JSX.Element;
 declare function ItemContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;

package/dist/components/ui/sidebar/context.d.ts

@@ -18,4 +18,10 @@ export type SidebarProviderStyle = React.CSSProperties & Record<"--sidebar-width
 export type SidebarMobileStyle = React.CSSProperties & Record<"--sidebar-width", string>;
 export type SidebarSkeletonStyle = React.CSSProperties & Record<"--skeleton-width", string>;
 export declare const SidebarContext: React.Context<SidebarContextProps | null>;
+/**
+ * The sidebar context, or `null` outside a `SidebarProvider`. For components
+ * whose sidebar affordance is optional; anything that needs the sidebar to
+ * function should keep using `useSidebar`.
+ */
+export declare function useOptionalSidebar(): SidebarContextProps | null;
 export declare function useSidebar(): SidebarContextProps;

package/dist/components/ui/sidebar/context.js

@@ -6,8 +6,16 @@ export const SIDEBAR_WIDTH_MOBILE = "18rem";
 export const SIDEBAR_WIDTH_ICON = "3rem";
 export const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 export const SidebarContext = React.createContext(null);
+/**
+ * The sidebar context, or `null` outside a `SidebarProvider`. For components
+ * whose sidebar affordance is optional; anything that needs the sidebar to
+ * function should keep using `useSidebar`.
+ */
+export function useOptionalSidebar() {
+    return React.useContext(SidebarContext);
+}
 export function useSidebar() {
-    const context = React.useContext(SidebarContext);
+    const context = useOptionalSidebar();
     if (!context) {
         throw new Error("useSidebar must be used within a SidebarProvider.");
     }

package/dist/components/ui/sidebar-account-menu.js

@@ -46,6 +46,6 @@ function getAccountLabel(username, email) {
     return "Account";
 }
 function getAccountMark(label) {
-    return label.match(/[A-Za-z0-9]/)?.[0]?.toUpperCase() ?? "U";
+    return label.match(/[a-z0-9]/i)?.[0]?.toUpperCase() ?? "U";
 }
 export { SidebarAccountMenu };

package/dist/components/ui/sidebar.d.ts

@@ -4,4 +4,4 @@ export { SidebarTrigger } from "./sidebar/trigger.js";
 export { SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, } from "./sidebar/group.js";
 export { SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, } from "./sidebar/menu.js";
 export { SidebarProvider } from "./sidebar/provider.js";
-export { useSidebar } from "./sidebar/context.js";
+export { useOptionalSidebar, useSidebar } from "./sidebar/context.js";

package/dist/components/ui/sidebar.js

@@ -4,4 +4,4 @@ export { SidebarTrigger } from "./sidebar/trigger.js";
 export { SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, } from "./sidebar/group.js";
 export { SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, } from "./sidebar/menu.js";
 export { SidebarProvider } from "./sidebar/provider.js";
-export { useSidebar } from "./sidebar/context.js";
+export { useOptionalSidebar, useSidebar } from "./sidebar/context.js";

package/dist/components/ui/tabs-variants.d.ts

@@ -1,6 +1,6 @@
 import { type VariantProps } from "class-variance-authority";
 declare const tabsListVariants: (props?: ({
-    variant?: "default" | "line" | null | undefined;
+    variant?: "line" | "default" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 type TabsListVariantProps = VariantProps<typeof tabsListVariants>;
 export { tabsListVariants, type TabsListVariantProps };

package/dist/components/walkthrough/presentation/WalkthroughCoach.d.ts

@@ -0,0 +1,14 @@
+import type { WalkthroughAdvance, WalkthroughStep } from "../runtime/walkthroughTypes.js";
+export type WalkthroughCoachState = "locating" | "missing" | "off-route" | "ready" | "restore";
+export declare function WalkthroughCoach({ advanceType, coachState, flowTitle, onBack, onNext, onPause, onReturn, step, stepCount, stepIndex, }: {
+    advanceType: WalkthroughAdvance["type"];
+    coachState: WalkthroughCoachState;
+    flowTitle: string;
+    onBack: () => void;
+    onNext: () => void;
+    onPause: () => void;
+    onReturn: () => void;
+    step: WalkthroughStep;
+    stepCount: number;
+    stepIndex: number;
+}): import("@types/react").JSX.Element;

package/dist/components/walkthrough/presentation/WalkthroughCoach.js

@@ -0,0 +1,32 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Button } from "../../ui/button.js";
+import { Card, CardContent } from "../../ui/card.js";
+export function WalkthroughCoach({ advanceType, coachState, flowTitle, onBack, onNext, onPause, onReturn, step, stepCount, stepIndex, }) {
+    return (_jsx(Card, { className: "border-foreground/20 shadow-sm", children: _jsxs(CardContent, { className: "grid gap-4 py-4", children: [_jsxs("div", { className: "grid gap-1", children: [_jsxs("p", { className: "text-meta text-muted-foreground", children: [flowTitle, " \u00B7 Step ", stepIndex + 1, " of ", stepCount] }), _jsx("h2", { className: "font-heading text-lg text-foreground", children: step.title }), _jsx("p", { className: "text-sm leading-relaxed text-muted-foreground", children: step.body }), _jsx(CoachStatus, { advanceType: advanceType, state: coachState })] }), _jsxs("div", { className: "flex flex-wrap justify-end gap-2", children: [_jsx(Button, { onClick: onPause, size: "sm", type: "button", variant: "ghost", children: "Pause" }), _jsx(Button, { disabled: stepIndex === 0, onClick: onBack, size: "sm", type: "button", variant: "outline", children: "Back" }), _jsx(CoachPrimaryAction, { advanceType: advanceType, coachState: coachState, isLast: stepIndex === stepCount - 1, onNext: onNext, onReturn: onReturn })] })] }) }));
+}
+function CoachStatus({ advanceType, state, }) {
+    if (state === "off-route") {
+        return _jsx("p", { className: "text-xs text-muted-foreground", children: "This page is outside the walkthrough." });
+    }
+    if (state === "missing") {
+        return (_jsx("p", { className: "text-xs text-muted-foreground", children: "The required control is not available in the current app state." }));
+    }
+    if (state === "locating") {
+        return _jsx("p", { className: "text-xs text-muted-foreground", children: "Locating the next control\u2026" });
+    }
+    if (state === "restore") {
+        return (_jsx("p", { className: "text-xs text-muted-foreground", children: "Use the highlighted control to reopen this step." }));
+    }
+    if (advanceType !== "manual") {
+        return (_jsx("p", { className: "text-xs text-muted-foreground", children: "Use the highlighted control to continue \u00B7 click elsewhere to pause" }));
+    }
+    return (_jsx("p", { className: "text-xs text-muted-foreground", children: "Next to continue \u00B7 click elsewhere to pause" }));
+}
+function CoachPrimaryAction({ advanceType, coachState, isLast, onNext, onReturn, }) {
+    if (coachState === "off-route") {
+        return (_jsx(Button, { onClick: onReturn, size: "sm", type: "button", children: "Return to step" }));
+    }
+    if (advanceType !== "manual" || coachState === "restore")
+        return null;
+    return (_jsx(Button, { disabled: coachState !== "ready", onClick: onNext, size: "sm", type: "button", children: isLast ? "Finish" : "Next" }));
+}

package/dist/components/walkthrough/presentation/WalkthroughHighlight.d.ts

@@ -0,0 +1,5 @@
+import type { WalkthroughTargetRect } from "../targeting/useWalkthroughTargetRect.js";
+export declare function WalkthroughHighlight({ rect, stepNumber, }: {
+    rect: WalkthroughTargetRect;
+    stepNumber: number;
+}): import("@types/react").JSX.Element;

package/dist/components/walkthrough/presentation/WalkthroughHighlight.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export function WalkthroughHighlight({ rect, stepNumber, }) {
+    const pad = 6;
+    const left = Math.min(window.innerWidth, Math.max(0, rect.left - pad));
+    const top = Math.min(window.innerHeight, Math.max(0, rect.top - pad));
+    const right = Math.max(left, Math.min(window.innerWidth, rect.left + rect.width + pad));
+    const bottom = Math.max(top, Math.min(window.innerHeight, rect.top + rect.height + pad));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { "aria-hidden": true, className: "absolute inset-x-0 top-0 bg-foreground/40", style: { height: top } }), _jsx("div", { "aria-hidden": true, className: "absolute bottom-0 inset-x-0 bg-foreground/40", style: { top: bottom } }), _jsx("div", { "aria-hidden": true, className: "absolute bg-foreground/40", style: { bottom: window.innerHeight - bottom, left: 0, top, width: left } }), _jsx("div", { "aria-hidden": true, className: "absolute bg-foreground/40", style: { bottom: window.innerHeight - bottom, left: right, right: 0, top } }), _jsx("div", { "aria-hidden": true, className: "absolute rounded-md ring-2 ring-foreground", style: { height: bottom - top, left, top, width: right - left } }), _jsx("div", { "aria-hidden": true, className: "absolute z-10 grid size-7 place-items-center rounded-full bg-foreground font-mono text-xs text-background", style: { left: Math.max(8, left - 10), top: Math.max(8, top - 10) }, children: stepNumber })] }));
+}

package/dist/components/walkthrough/presentation/WalkthroughOverlay.d.ts

@@ -0,0 +1 @@
+export declare function WalkthroughOverlay(): import("@types/react").JSX.Element | null;

package/dist/components/walkthrough/presentation/WalkthroughOverlay.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import { listenForWalkthroughEvent, listenForWalkthroughTargetClick, } from "../runtime/walkthroughEvents.js";
+import { walkthroughHrefMatches } from "../runtime/walkthroughLocation.js";
+import { useWalkthrough } from "../runtime/useWalkthrough.js";
+import { listenForOutsideWalkthroughInteraction } from "../targeting/listenForOutsideWalkthroughInteraction.js";
+import { useWalkthroughTargetRect, } from "../targeting/useWalkthroughTargetRect.js";
+import { WalkthroughCoach } from "./WalkthroughCoach.js";
+import { WalkthroughHighlight } from "./WalkthroughHighlight.js";
+import { useWalkthroughCoachPosition } from "./useWalkthroughCoachPosition.js";
+export function WalkthroughOverlay() {
+    const walkthrough = useWalkthrough();
+    if (walkthrough.progress?.status !== "active" ||
+        !walkthrough.selectedWalkthrough ||
+        !walkthrough.currentStep) {
+        return null;
+    }
+    return (_jsx(WalkthroughStepOverlay, { advance: walkthrough.advance, currentHref: walkthrough.currentHref, flowTitle: walkthrough.selectedWalkthrough.title, goBack: walkthrough.goBack, navigateToCurrentStep: walkthrough.navigateToCurrentStep, pause: walkthrough.pauseWalkthrough, step: walkthrough.currentStep, stepCount: walkthrough.selectedWalkthrough.steps.length, stepIndex: walkthrough.progress.stepIndex }, `${walkthrough.selectedWalkthrough.id}:${walkthrough.currentStep.id}`));
+}
+function WalkthroughStepOverlay({ advance, currentHref, flowTitle, goBack, navigateToCurrentStep, pause, step, stepCount, stepIndex, }) {
+    const onStepRoute = walkthroughHrefMatches(currentHref, step.href);
+    const targetObservation = useWalkthroughTargetRect(onStepRoute ? step.target : null);
+    const restoreObservation = useWalkthroughTargetRect(onStepRoute && targetObservation.status === "missing" ? (step.restoreTarget ?? null) : null);
+    const advanceRef = useLatestValue(advance);
+    const onStepRouteRef = useLatestValue(onStepRoute);
+    const coachRef = useRef(null);
+    const coachState = resolveCoachState(onStepRoute, Boolean(step.restoreTarget), targetObservation, restoreObservation);
+    const observation = coachState === "restore" ? restoreObservation : targetObservation;
+    const coachPosition = useWalkthroughCoachPosition(observation, coachRef);
+    useEffect(() => listenForStepCompletion(step, () => onStepRouteRef.current, () => advanceRef.current()), [advanceRef, onStepRouteRef, step]);
+    useEffect(() => listenForOutsideInteractionOnStepRoute(onStepRoute, step, pause), [onStepRoute, pause, step]);
+    const rect = observation.status === "found" && onStepRoute ? observation.rect : null;
+    return createPortal(_jsxs("div", { "aria-live": "polite", className: "pointer-events-none fixed inset-0 z-[100]", children: [rect ? _jsx(WalkthroughHighlight, { rect: rect, stepNumber: stepIndex + 1 }) : null, _jsx("div", { className: "pointer-events-auto absolute w-[min(24rem,calc(100%-2rem))]", "data-walkthrough-coach": "", ref: coachRef, style: coachPosition && rect
+                    ? { left: coachPosition.left, top: coachPosition.top }
+                    : { bottom: 16, right: 16 }, children: _jsx(WalkthroughCoach, { advanceType: step.advance.type, coachState: coachState, flowTitle: flowTitle, onBack: goBack, onNext: advance, onPause: pause, onReturn: navigateToCurrentStep, step: step, stepCount: stepCount, stepIndex: stepIndex }) })] }), document.body);
+}
+function listenForOutsideInteractionOnStepRoute(onStepRoute, step, pause) {
+    return onStepRoute ? listenForOutsideWalkthroughInteraction(step, pause) : undefined;
+}
+function useLatestValue(value) {
+    const valueRef = useRef(value);
+    useLayoutEffect(() => {
+        valueRef.current = value;
+    }, [value]);
+    return valueRef;
+}
+function listenForStepCompletion(step, canComplete, advance) {
+    if (step.advance.type === "manual")
+        return () => undefined;
+    if (step.advance.type === "target-click") {
+        return listenForWalkthroughTargetClick(step.target, canComplete, advance);
+    }
+    return listenForWalkthroughEvent(step.advance.event, canComplete, advance);
+}
+function resolveCoachState(onStepRoute, canRestore, targetObservation, restoreObservation) {
+    if (!onStepRoute)
+        return "off-route";
+    if (targetObservation.status === "locating")
+        return "locating";
+    if (targetObservation.status === "found")
+        return "ready";
+    if (!canRestore)
+        return "missing";
+    if (restoreObservation.status === "found")
+        return "restore";
+    if (restoreObservation.status === "locating")
+        return "locating";
+    return "missing";
+}

package/dist/components/walkthrough/presentation/positionWalkthroughCoach.d.ts

@@ -0,0 +1,11 @@
+import type { WalkthroughTargetRect } from "../targeting/useWalkthroughTargetRect.js";
+export type WalkthroughCoachPosition = {
+    left: number;
+    top: number;
+};
+type Size = {
+    height: number;
+    width: number;
+};
+export declare function positionWalkthroughCoach(target: WalkthroughTargetRect, coach: Size, viewport: Size): WalkthroughCoachPosition;
+export {};

package/dist/components/walkthrough/presentation/positionWalkthroughCoach.js

@@ -0,0 +1,24 @@
+const GAP = 16;
+const VIEWPORT_MARGIN = 16;
+export function positionWalkthroughCoach(target, coach, viewport) {
+    const candidates = [
+        { left: target.left + target.width + GAP, top: target.top },
+        { left: target.left - coach.width - GAP, top: target.top },
+        { left: target.left, top: target.top + target.height + GAP },
+        { left: target.left, top: target.top - coach.height - GAP },
+    ];
+    const fitting = candidates.find((candidate) => fits(candidate, coach, viewport));
+    return clamp(fitting ?? candidates[2], coach, viewport);
+}
+function fits(position, coach, viewport) {
+    return (position.left >= VIEWPORT_MARGIN &&
+        position.top >= VIEWPORT_MARGIN &&
+        position.left + coach.width <= viewport.width - VIEWPORT_MARGIN &&
+        position.top + coach.height <= viewport.height - VIEWPORT_MARGIN);
+}
+function clamp(position, coach, viewport) {
+    return {
+        left: Math.max(VIEWPORT_MARGIN, Math.min(position.left, viewport.width - coach.width - VIEWPORT_MARGIN)),
+        top: Math.max(VIEWPORT_MARGIN, Math.min(position.top, viewport.height - coach.height - VIEWPORT_MARGIN)),
+    };
+}

package/dist/components/walkthrough/presentation/useWalkthroughCoachPosition.d.ts

@@ -0,0 +1,4 @@
+import { type RefObject } from "react";
+import { type WalkthroughCoachPosition } from "./positionWalkthroughCoach.js";
+import type { WalkthroughTargetObservation } from "../targeting/useWalkthroughTargetRect.js";
+export declare function useWalkthroughCoachPosition(observation: WalkthroughTargetObservation, coachRef: RefObject<HTMLDivElement | null>): WalkthroughCoachPosition | null;

package/dist/components/walkthrough/presentation/useWalkthroughCoachPosition.js

@@ -0,0 +1,17 @@
+import { useLayoutEffect, useState } from "react";
+import { positionWalkthroughCoach } from "./positionWalkthroughCoach.js";
+const FALLBACK_COACH_SIZE = { height: 232, width: 384 };
+export function useWalkthroughCoachPosition(observation, coachRef) {
+    const [position, setPosition] = useState(null);
+    useLayoutEffect(() => {
+        if (observation.status !== "found")
+            return;
+        const box = coachRef.current?.getBoundingClientRect();
+        const coach = box ? { height: box.height, width: box.width } : FALLBACK_COACH_SIZE;
+        setPosition(positionWalkthroughCoach(observation.rect, coach, {
+            height: window.innerHeight,
+            width: window.innerWidth,
+        }));
+    }, [coachRef, observation]);
+    return position;
+}

package/dist/components/walkthrough/runtime/WalkthroughContextDefinition.d.ts

@@ -0,0 +1,20 @@
+import type { WalkthroughDefinition, WalkthroughProgress, WalkthroughStep } from "./walkthroughTypes.js";
+export type WalkthroughContextValue = {
+    advance: () => void;
+    clearWalkthrough: () => void;
+    currentHref: string;
+    currentStep: WalkthroughStep | null;
+    emitEvent: (event: string) => void;
+    goBack: () => void;
+    navigateToCurrentStep: () => void;
+    pauseWalkthrough: () => void;
+    progress: WalkthroughProgress | null;
+    resumeWalkthrough: () => void;
+    selectedWalkthrough: WalkthroughDefinition | null;
+    startWalkthrough: (walkthroughId: string) => Promise<void>;
+    targetProps: (target: string) => {
+        "data-walkthrough-target": string;
+    };
+    walkthroughs: readonly WalkthroughDefinition[];
+};
+export declare const WalkthroughContext: import("@types/react").Context<WalkthroughContextValue | undefined>;

package/dist/components/walkthrough/runtime/WalkthroughContextDefinition.js

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export const WalkthroughContext = createContext(undefined);

package/dist/components/walkthrough/runtime/WalkthroughProvider.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from "react";
+import type { WalkthroughDefinition, WalkthroughFreshStartHandlers } from "./walkthroughTypes.js";
+export type WalkthroughProviderProps = {
+    children: ReactNode;
+    currentHref: string;
+    freshStartHandlers: WalkthroughFreshStartHandlers;
+    navigate: (href: string) => unknown;
+    readCurrentHref: () => string;
+    storageKey: string;
+    walkthroughs: readonly WalkthroughDefinition[];
+};
+export declare function WalkthroughProvider({ children, currentHref, freshStartHandlers, navigate, readCurrentHref, storageKey, walkthroughs, }: WalkthroughProviderProps): import("@types/react").JSX.Element;

package/dist/components/walkthrough/runtime/WalkthroughProvider.js

@@ -0,0 +1,190 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { WalkthroughContext } from "./WalkthroughContextDefinition.js";
+import { emitWalkthroughEvent } from "./walkthroughEvents.js";
+import { walkthroughHrefForNavigation, walkthroughHrefMatches } from "./walkthroughLocation.js";
+import { readWalkthroughProgress, writeWalkthroughProgress } from "./walkthroughStorage.js";
+import { WalkthroughOverlay } from "../presentation/WalkthroughOverlay.js";
+import { walkthroughTargetProps } from "../targeting/walkthroughTarget.js";
+export function WalkthroughProvider({ children, currentHref, freshStartHandlers, navigate, readCurrentHref, storageKey, walkthroughs, }) {
+    const startRequests = useMemo(() => createWalkthroughStartRequests(), []);
+    const [progress, setProgress] = useState(() => readInitialProgress(storageKey, walkthroughs));
+    useEffect(() => () => startRequests.cancel(), [startRequests]);
+    useEffect(() => {
+        writeWalkthroughProgress(storageKey, progress);
+    }, [progress, storageKey]);
+    const selectedWalkthrough = walkthroughById(walkthroughs, progress?.walkthroughId);
+    const currentStep = selectedWalkthrough
+        ? stepAt(selectedWalkthrough, progress?.stepIndex ?? -1)
+        : null;
+    const controller = useMemo(() => ({
+        freshStartHandlers,
+        navigate,
+        progress,
+        readCurrentHref,
+        selectedWalkthrough,
+        setProgress,
+        startRequests,
+        walkthroughs,
+    }), [
+        freshStartHandlers,
+        navigate,
+        progress,
+        readCurrentHref,
+        selectedWalkthrough,
+        startRequests,
+        walkthroughs,
+    ]);
+    const value = useMemo(() => buildContextValue(controller, currentHref, currentStep), [controller, currentHref, currentStep]);
+    return (_jsxs(WalkthroughContext.Provider, { value: value, children: [children, _jsx(WalkthroughOverlay, {})] }));
+}
+function buildContextValue(controller, currentHref, currentStep) {
+    return {
+        advance: () => {
+            advanceWalkthrough(controller);
+        },
+        clearWalkthrough: () => {
+            controller.startRequests.cancel();
+            controller.setProgress(null);
+        },
+        currentHref,
+        currentStep,
+        emitEvent: emitWalkthroughEvent,
+        goBack: () => {
+            goBack(controller);
+        },
+        navigateToCurrentStep: () => {
+            navigateToCurrentStep(controller);
+        },
+        pauseWalkthrough: () => {
+            pauseWalkthrough(controller);
+        },
+        progress: controller.progress,
+        resumeWalkthrough: () => {
+            resumeWalkthrough(controller);
+        },
+        selectedWalkthrough: controller.selectedWalkthrough,
+        startWalkthrough: (walkthroughId) => startWalkthrough(controller, walkthroughId),
+        targetProps: walkthroughTargetProps,
+        walkthroughs: controller.walkthroughs,
+    };
+}
+async function startWalkthrough(controller, walkthroughId) {
+    const walkthrough = walkthroughById(controller.walkthroughs, walkthroughId);
+    if (!walkthrough)
+        throw new Error(`Unknown walkthrough: ${walkthroughId}`);
+    if (walkthrough.steps.length === 0)
+        throw new Error(`Walkthrough has no steps: ${walkthroughId}`);
+    const freshStart = walkthrough.freshStart
+        ? controller.freshStartHandlers[walkthrough.freshStart]
+        : null;
+    if (walkthrough.freshStart && !freshStart) {
+        throw new Error(`Missing fresh-start handler: ${walkthrough.freshStart}`);
+    }
+    const startRequest = controller.startRequests.begin();
+    controller.setProgress(null);
+    if (freshStart) {
+        try {
+            await freshStart();
+        }
+        catch (error) {
+            controller.startRequests.finishIfLatest(startRequest);
+            throw error;
+        }
+    }
+    if (!controller.startRequests.finishIfLatest(startRequest))
+        return;
+    controller.setProgress({
+        status: "active",
+        stepIndex: 0,
+        version: walkthrough.version,
+        walkthroughId,
+    });
+    navigateToStep(controller, walkthrough, 0);
+}
+function createWalkthroughStartRequests() {
+    let latestRequest = null;
+    return {
+        begin: () => {
+            const request = {};
+            latestRequest = request;
+            return request;
+        },
+        cancel: () => {
+            latestRequest = null;
+        },
+        finishIfLatest: (request) => {
+            if (latestRequest !== request)
+                return false;
+            latestRequest = null;
+            return true;
+        },
+    };
+}
+function advanceWalkthrough(controller) {
+    const { progress, selectedWalkthrough } = controller;
+    if (!progress || progress.status !== "active" || !selectedWalkthrough)
+        return;
+    const nextStepIndex = progress.stepIndex + 1;
+    if (nextStepIndex >= selectedWalkthrough.steps.length) {
+        controller.setProgress({ ...progress, status: "completed" });
+        return;
+    }
+    controller.setProgress({ ...progress, stepIndex: nextStepIndex });
+    navigateToStep(controller, selectedWalkthrough, nextStepIndex);
+}
+function goBack(controller) {
+    const { progress, selectedWalkthrough } = controller;
+    if (!progress || progress.status !== "active" || !selectedWalkthrough)
+        return;
+    const previousStepIndex = progress.stepIndex - 1;
+    if (previousStepIndex < 0)
+        return;
+    controller.setProgress({ ...progress, stepIndex: previousStepIndex });
+    navigateToStep(controller, selectedWalkthrough, previousStepIndex);
+}
+function pauseWalkthrough(controller) {
+    const { progress } = controller;
+    if (progress?.status === "active") {
+        controller.setProgress({ ...progress, status: "paused" });
+    }
+}
+function resumeWalkthrough(controller) {
+    const { progress, selectedWalkthrough } = controller;
+    if (progress?.status !== "paused" || !selectedWalkthrough)
+        return;
+    controller.setProgress({ ...progress, status: "active" });
+    navigateToStep(controller, selectedWalkthrough, progress.stepIndex);
+}
+function navigateToCurrentStep(controller) {
+    if (!controller.progress || !controller.selectedWalkthrough)
+        return;
+    navigateToStep(controller, controller.selectedWalkthrough, controller.progress.stepIndex);
+}
+function navigateToStep(controller, walkthrough, stepIndex) {
+    const step = stepAt(walkthrough, stepIndex);
+    const currentHref = controller.readCurrentHref();
+    if (step && !walkthroughHrefMatches(currentHref, step.href)) {
+        controller.navigate(walkthroughHrefForNavigation(currentHref, step.href));
+    }
+}
+function stepAt(walkthrough, stepIndex) {
+    return walkthrough.steps.find((_step, index) => index === stepIndex) ?? null;
+}
+function readInitialProgress(storageKey, walkthroughs) {
+    const stored = readWalkthroughProgress(storageKey);
+    if (!stored)
+        return null;
+    const walkthrough = walkthroughById(walkthroughs, stored.walkthroughId);
+    if (!walkthrough ||
+        walkthrough.version !== stored.version ||
+        stored.stepIndex >= walkthrough.steps.length) {
+        return null;
+    }
+    return stored.status === "active" ? { ...stored, status: "paused" } : stored;
+}
+function walkthroughById(walkthroughs, walkthroughId) {
+    if (!walkthroughId)
+        return null;
+    return walkthroughs.find((walkthrough) => walkthrough.id === walkthroughId) ?? null;
+}

package/dist/components/walkthrough/runtime/useWalkthrough.d.ts

@@ -0,0 +1 @@
+export declare function useWalkthrough(): import("./WalkthroughContextDefinition.js").WalkthroughContextValue;

package/dist/components/walkthrough/runtime/useWalkthrough.js

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { WalkthroughContext } from "./WalkthroughContextDefinition.js";
+export function useWalkthrough() {
+    const context = useContext(WalkthroughContext);
+    if (!context)
+        throw new Error("useWalkthrough must be used within WalkthroughProvider");
+    return context;
+}

package/dist/components/walkthrough/runtime/walkthroughEvents.d.ts

@@ -0,0 +1,3 @@
+export declare function emitWalkthroughEvent(event: string): void;
+export declare function listenForWalkthroughEvent(event: string, canComplete: () => boolean, onComplete: () => void): () => void;
+export declare function listenForWalkthroughTargetClick(target: string, canComplete: () => boolean, onComplete: () => void): () => void;

package/dist/components/walkthrough/runtime/walkthroughEvents.js

@@ -0,0 +1,55 @@
+import { isEnabledWalkthroughTarget, WALKTHROUGH_TARGET_ATTRIBUTE, } from "../targeting/walkthroughTarget.js";
+const WALKTHROUGH_EVENT_PREFIX = "ciridae:walkthrough:";
+export function emitWalkthroughEvent(event) {
+    window.dispatchEvent(new Event(walkthroughEventType(event)));
+}
+export function listenForWalkthroughEvent(event, canComplete, onComplete) {
+    const eventType = walkthroughEventType(event);
+    const eventListener = () => {
+        if (canComplete())
+            onComplete();
+    };
+    window.addEventListener(eventType, eventListener);
+    return () => {
+        window.removeEventListener(eventType, eventListener);
+    };
+}
+export function listenForWalkthroughTargetClick(target, canComplete, onComplete) {
+    let completionScheduled = false;
+    let completed = false;
+    const clickListener = (event) => {
+        if (completionScheduled || completed)
+            return;
+        if (!enabledTargetForEvent(event, target))
+            return;
+        if (!canComplete())
+            return;
+        completionScheduled = true;
+        queueMicrotask(() => {
+            completionScheduled = false;
+            if (completed)
+                return;
+            completed = true;
+            onComplete();
+        });
+    };
+    document.addEventListener("click", clickListener, true);
+    return () => {
+        document.removeEventListener("click", clickListener, true);
+    };
+}
+function enabledTargetForEvent(event, target) {
+    const element = event.target;
+    if (!(element instanceof Element))
+        return null;
+    const targetElement = element.closest(`[${WALKTHROUGH_TARGET_ATTRIBUTE}]`);
+    if (targetElement?.getAttribute(WALKTHROUGH_TARGET_ATTRIBUTE) !== target)
+        return null;
+    if (!isEnabledWalkthroughTarget(targetElement))
+        return null;
+    const disabledControl = element.closest(":disabled, [aria-disabled='true']");
+    return disabledControl && targetElement.contains(disabledControl) ? null : targetElement;
+}
+function walkthroughEventType(event) {
+    return `${WALKTHROUGH_EVENT_PREFIX}${event}`;
+}

package/dist/components/walkthrough/runtime/walkthroughLocation.d.ts

@@ -0,0 +1,2 @@
+export declare function walkthroughHrefMatches(currentHref: string, stepHref: string): boolean;
+export declare function walkthroughHrefForNavigation(currentHref: string, stepHref: string): string;

package/dist/components/walkthrough/runtime/walkthroughLocation.js

@@ -0,0 +1,27 @@
+export function walkthroughHrefMatches(currentHref, stepHref) {
+    const current = new URL(currentHref, window.location.origin);
+    const step = new URL(stepHref, window.location.origin);
+    if (normalizePathname(current.pathname) !== normalizePathname(step.pathname))
+        return false;
+    if (step.hash && current.hash !== step.hash)
+        return false;
+    for (const [key, value] of step.searchParams) {
+        if (current.searchParams.get(key) !== value)
+            return false;
+    }
+    return true;
+}
+export function walkthroughHrefForNavigation(currentHref, stepHref) {
+    const current = new URL(currentHref, window.location.origin);
+    const step = new URL(stepHref, window.location.origin);
+    if (normalizePathname(current.pathname) !== normalizePathname(step.pathname))
+        return stepHref;
+    for (const [key, value] of step.searchParams)
+        current.searchParams.set(key, value);
+    if (step.hash)
+        current.hash = step.hash;
+    return `${current.pathname}${current.search}${current.hash}`;
+}
+function normalizePathname(pathname) {
+    return pathname.length > 1 ? pathname.replace(/\/$/, "") : pathname;
+}

package/dist/components/walkthrough/runtime/walkthroughStorage.d.ts

@@ -0,0 +1,3 @@
+import type { WalkthroughProgress } from "./walkthroughTypes.js";
+export declare function readWalkthroughProgress(storageKey: string): WalkthroughProgress | null;
+export declare function writeWalkthroughProgress(storageKey: string, progress: WalkthroughProgress | null): void;

package/dist/components/walkthrough/runtime/walkthroughStorage.js

@@ -0,0 +1,54 @@
+import { readStoredValue, removeStoredValue, writeStoredValue } from "../../../lib/browser-storage.js";
+export function readWalkthroughProgress(storageKey) {
+    const raw = readStoredValue(storageKey);
+    if (!raw)
+        return null;
+    try {
+        const parsed = JSON.parse(raw);
+        return isWalkthroughProgress(parsed) ? parsed : null;
+    }
+    catch {
+        return null;
+    }
+}
+export function writeWalkthroughProgress(storageKey, progress) {
+    if (!progress) {
+        removeStoredValue(storageKey);
+        return;
+    }
+    writeStoredValue(storageKey, JSON.stringify(progress));
+}
+function isWalkthroughProgress(value) {
+    if (!value || typeof value !== "object")
+        return false;
+    if (!hasWalkthroughProgressFields(value))
+        return false;
+    if (!isWalkthroughStatus(value.status))
+        return false;
+    if (!isNonnegativeInteger(value.stepIndex))
+        return false;
+    if (!isPositiveInteger(value.version))
+        return false;
+    return isNonemptyString(value.walkthroughId);
+}
+function isWalkthroughStatus(value) {
+    return value === "active" || value === "completed" || value === "paused";
+}
+function hasWalkthroughProgressFields(value) {
+    if (!("status" in value))
+        return false;
+    if (!("stepIndex" in value))
+        return false;
+    if (!("version" in value))
+        return false;
+    return "walkthroughId" in value;
+}
+function isNonnegativeInteger(value) {
+    return typeof value === "number" && Number.isInteger(value) && value >= 0;
+}
+function isPositiveInteger(value) {
+    return typeof value === "number" && Number.isInteger(value) && value > 0;
+}
+function isNonemptyString(value) {
+    return typeof value === "string" && value.length > 0;
+}

package/dist/components/walkthrough/runtime/walkthroughTypes.d.ts

@@ -0,0 +1,32 @@
+export type WalkthroughAdvance = {
+    type: "manual";
+} | {
+    type: "target-click";
+} | {
+    event: string;
+    type: "event";
+};
+export type WalkthroughStep = {
+    advance: WalkthroughAdvance;
+    body: string;
+    href: string;
+    id: string;
+    restoreTarget?: string;
+    target: string;
+    title: string;
+};
+export type WalkthroughDefinition = {
+    description: string;
+    freshStart?: string;
+    id: string;
+    steps: readonly WalkthroughStep[];
+    title: string;
+    version: number;
+};
+export type WalkthroughProgress = {
+    status: "active" | "completed" | "paused";
+    stepIndex: number;
+    version: number;
+    walkthroughId: string;
+};
+export type WalkthroughFreshStartHandlers = Readonly<Partial<Record<string, () => Promise<unknown>>>>;

package/dist/components/walkthrough/runtime/walkthroughTypes.js

@@ -0,0 +1 @@
+export {};

package/dist/components/walkthrough/targeting/listenForOutsideWalkthroughInteraction.d.ts

@@ -0,0 +1,2 @@
+import type { WalkthroughStep } from "../runtime/walkthroughTypes.js";
+export declare function listenForOutsideWalkthroughInteraction(step: WalkthroughStep, pause: () => void): () => void;

package/dist/components/walkthrough/targeting/listenForOutsideWalkthroughInteraction.js

@@ -0,0 +1,19 @@
+import { WALKTHROUGH_TARGET_ATTRIBUTE } from "./walkthroughTarget.js";
+export function listenForOutsideWalkthroughInteraction(step, pause) {
+    const listener = (event) => {
+        const element = event.target;
+        if (!(element instanceof Element))
+            return;
+        if (element.closest("[data-walkthrough-coach]"))
+            return;
+        const walkthroughTarget = element.closest(`[${WALKTHROUGH_TARGET_ATTRIBUTE}]`);
+        const targetName = walkthroughTarget?.getAttribute(WALKTHROUGH_TARGET_ATTRIBUTE);
+        if (walkthroughTarget && (targetName === step.target || targetName === step.restoreTarget))
+            return;
+        pause();
+    };
+    document.addEventListener("click", listener, true);
+    return () => {
+        document.removeEventListener("click", listener, true);
+    };
+}

package/dist/components/walkthrough/targeting/useWalkthroughTargetRect.d.ts

@@ -0,0 +1,15 @@
+export type WalkthroughTargetRect = {
+    height: number;
+    left: number;
+    top: number;
+    width: number;
+};
+export type WalkthroughTargetObservation = {
+    status: "locating";
+} | {
+    status: "missing";
+} | {
+    rect: WalkthroughTargetRect;
+    status: "found";
+};
+export declare function useWalkthroughTargetRect(target: string | null): WalkthroughTargetObservation;

package/dist/components/walkthrough/targeting/useWalkthroughTargetRect.js

@@ -0,0 +1,54 @@
+import { useEffect, useState } from "react";
+import { findWalkthroughTarget } from "./walkthroughTarget.js";
+const LOCATING_TARGET_OBSERVATION = { status: "locating" };
+const MISSING_TARGET_OBSERVATION = { status: "missing" };
+export function useWalkthroughTargetRect(target) {
+    const [observation, setObservation] = useState(LOCATING_TARGET_OBSERVATION);
+    useEffect(() => {
+        if (!target) {
+            setObservation(LOCATING_TARGET_OBSERVATION);
+            return;
+        }
+        let didScroll = false;
+        const measure = (forceUpdate = false) => {
+            const element = findWalkthroughTarget(target);
+            if (!element) {
+                didScroll = false;
+                setObservation(MISSING_TARGET_OBSERVATION);
+                return;
+            }
+            if (!didScroll) {
+                element.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
+                didScroll = true;
+            }
+            const rect = element.getBoundingClientRect();
+            const next = {
+                rect: { height: rect.height, left: rect.left, top: rect.top, width: rect.width },
+                status: "found",
+            };
+            setObservation((current) => (!forceUpdate && sameObservation(current, next) ? current : next));
+        };
+        const handleResize = () => measure(true);
+        const handleScroll = () => measure();
+        measure();
+        const intervalId = window.setInterval(() => measure(), 300);
+        window.addEventListener("resize", handleResize);
+        window.addEventListener("scroll", handleScroll, true);
+        return () => {
+            window.clearInterval(intervalId);
+            window.removeEventListener("resize", handleResize);
+            window.removeEventListener("scroll", handleScroll, true);
+        };
+    }, [target]);
+    return observation;
+}
+function sameObservation(current, next) {
+    if (current.status !== next.status)
+        return false;
+    if (current.status !== "found" || next.status !== "found")
+        return true;
+    return (current.rect.height === next.rect.height &&
+        current.rect.left === next.rect.left &&
+        current.rect.top === next.rect.top &&
+        current.rect.width === next.rect.width);
+}

package/dist/components/walkthrough/targeting/walkthroughTarget.d.ts

@@ -0,0 +1,6 @@
+export declare const WALKTHROUGH_TARGET_ATTRIBUTE = "data-walkthrough-target";
+export declare function walkthroughTargetProps(target: string): {
+    "data-walkthrough-target": string;
+};
+export declare function findWalkthroughTarget(target: string): HTMLElement | null;
+export declare function isEnabledWalkthroughTarget(candidate: HTMLElement): boolean;

package/dist/components/walkthrough/targeting/walkthroughTarget.js

@@ -0,0 +1,24 @@
+export const WALKTHROUGH_TARGET_ATTRIBUTE = "data-walkthrough-target";
+export function walkthroughTargetProps(target) {
+    return { "data-walkthrough-target": target };
+}
+export function findWalkthroughTarget(target) {
+    const candidates = document.querySelectorAll(`[${WALKTHROUGH_TARGET_ATTRIBUTE}]`);
+    for (let index = candidates.length - 1; index >= 0; index -= 1) {
+        const candidate = candidates.item(index);
+        if (candidate.getAttribute(WALKTHROUGH_TARGET_ATTRIBUTE) === target &&
+            isVisibleWalkthroughTarget(candidate) &&
+            isEnabledWalkthroughTarget(candidate)) {
+            return candidate;
+        }
+    }
+    return null;
+}
+export function isEnabledWalkthroughTarget(candidate) {
+    return !candidate.matches(":disabled, [aria-disabled='true']");
+}
+function isVisibleWalkthroughTarget(candidate) {
+    const rect = candidate.getBoundingClientRect();
+    const style = window.getComputedStyle(candidate);
+    return (rect.width > 0 && rect.height > 0 && style.display !== "none" && style.visibility !== "hidden");
+}

package/dist/components/walkthrough.d.ts

@@ -0,0 +1,4 @@
+export { WalkthroughProvider, type WalkthroughProviderProps, } from "./walkthrough/runtime/WalkthroughProvider.js";
+export type { WalkthroughContextValue } from "./walkthrough/runtime/WalkthroughContextDefinition.js";
+export { useWalkthrough } from "./walkthrough/runtime/useWalkthrough.js";
+export type { WalkthroughAdvance, WalkthroughDefinition, WalkthroughFreshStartHandlers, WalkthroughProgress, WalkthroughStep, } from "./walkthrough/runtime/walkthroughTypes.js";

package/dist/components/walkthrough.js

@@ -0,0 +1,2 @@
+export { WalkthroughProvider, } from "./walkthrough/runtime/WalkthroughProvider.js";
+export { useWalkthrough } from "./walkthrough/runtime/useWalkthrough.js";

package/dist/entries/walkthrough.d.ts

@@ -0,0 +1 @@
+export * from "../components/walkthrough.js";

package/dist/entries/walkthrough.js

@@ -0,0 +1 @@
+export * from "../components/walkthrough.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ciridae/ui",
-	"version": "0.14.0",
+	"version": "0.16.0",
 	"type": "module",
 	"private": false,
 	"engines": {
@@ -87,7 +87,6 @@
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
 		"cmdk": "^1.1.1",
-		"date-fns": "^4.4.0",
 		"embla-carousel-react": "^8.6.0",
 		"input-otp": "^1.4.2",
 		"lucide-react": "^1.23.0",