pixelize-design-library 2.4.2-beta.65 → 2.4.2-beta.66

package/dist/Components/Timeline/Timeline.js

@@ -158,12 +158,15 @@ const NoteItem = react_2.default.memo(function NoteItem({ note, event, index, co
     var _a, _b;
     const isEditing = activeEditNoteId === note.log_note_id;
     const isDeleting = deletingNoteId != null && deletingNoteId === note.log_note_id;
-    const noteChip = (0, planeStep_1.bandOn)(colors.primary[50], colors.gray[50]);
+    const noteBox = (0, planeStep_1.bandOn)(colors.gray[50], colors.background[50]);
+    const noteChip = (0, planeStep_1.bandOn)(colors.primary[50], noteBox);
     const noteChipInk = (0, accentText_1.accentTextOnCanvas)(colors.primary, noteChip);
+    const chipHover = (0, planeStep_1.bandOn)(colors.primary[100], noteChip);
+    const chipHoverInk = (0, accentText_1.accentTextOnCanvas)(colors.primary, chipHover);
     if (isEditing) {
         return ((0, jsx_runtime_1.jsx)(react_1.Box, { children: (0, jsx_runtime_1.jsx)(NoteTextArea_1.default, { isEditable: true, value: (_a = note.note) !== null && _a !== void 0 ? _a : "", title: (_b = note.title) !== null && _b !== void 0 ? _b : "", saveButtonLoading: editNoteLoading, handleSubmit: (n, t, f) => onEditNote === null || onEditNote === void 0 ? void 0 : onEditNote(note.log_note_id, n, t, f, event, index), handleCancel: () => setActiveEditNoteId(null) }) }));
     }
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", zIndex: 1, bg: colors.gray[50], border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}`, borderRadius: "lg", px: 2.5, py: 2, opacity: isDeleting ? 0.6 : 1, _hover: { ".timeline-note-actions": { opacity: 1 } }, _focusWithin: { ".timeline-note-actions": { opacity: 1 } }, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 1.5, mb: note.note ? 1 : 0, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: (0, accentText_1.accentTextOnCanvas)(colors.primary, colors.gray[50]), display: "inline-flex", children: (0, jsx_runtime_1.jsx)(lucide_react_1.StickyNote, { size: 12 }) }), note.title && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: typography_1.fontSizes["xs-minus"], fontWeight: 700, color: colors.text[800], noOfLines: 1, children: note.title })), (onEditNote || onDeleteNote) && ((0, jsx_runtime_1.jsx)(react_1.Flex, { className: "timeline-note-actions", align: "center", gap: 0.5, ml: "auto", flexShrink: 0, opacity: isDeleting ? 1 : 0, transition: REVEAL_TRANSITION, sx: (0, motion_2.reducedMotionSx)(), children: isDeleting ? ((0, jsx_runtime_1.jsx)(react_1.Spinner, { size: "xs", color: colors.textMuted })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [onEditNote && ((0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: "Edit", placement: "top", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", "aria-label": "Edit note", sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), display: "inline-flex", alignItems: "center", justifyContent: "center", p: 1, borderRadius: "md", color: colors.textMuted, bg: "transparent", cursor: "pointer", _hover: {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", zIndex: 1, bg: noteBox, border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${(0, planeStep_1.cardRule)(colors)}`, borderRadius: "lg", px: 2.5, py: 2, opacity: isDeleting ? 0.6 : 1, _hover: { ".timeline-note-actions": { opacity: 1 } }, _focusWithin: { ".timeline-note-actions": { opacity: 1 } }, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 1.5, mb: note.note ? 1 : 0, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: (0, accentText_1.accentTextOnCanvas)(colors.primary, noteBox), display: "inline-flex", children: (0, jsx_runtime_1.jsx)(lucide_react_1.StickyNote, { size: 12 }) }), note.title && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: typography_1.fontSizes["xs-minus"], fontWeight: 700, color: colors.text[800], noOfLines: 1, children: note.title })), (onEditNote || onDeleteNote) && ((0, jsx_runtime_1.jsx)(react_1.Flex, { className: "timeline-note-actions", align: "center", gap: 0.5, ml: "auto", flexShrink: 0, opacity: isDeleting ? 1 : 0, transition: REVEAL_TRANSITION, sx: (0, motion_2.reducedMotionSx)(), children: isDeleting ? ((0, jsx_runtime_1.jsx)(react_1.Spinner, { size: "xs", color: colors.textMuted })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [onEditNote && ((0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: "Edit", placement: "top", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", "aria-label": "Edit note", sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), display: "inline-flex", alignItems: "center", justifyContent: "center", p: 1, borderRadius: "md", color: colors.textMuted, bg: "transparent", cursor: "pointer", _hover: {
                                             bg: noteChip,
                                             color: noteChipInk,
                                         }, onClick: (e) => {
@@ -175,7 +178,7 @@ const NoteItem = react_2.default.memo(function NoteItem({ note, event, index, co
                                         }, onClick: (e) => {
                                             e.stopPropagation();
                                             onDeleteNote === null || onDeleteNote === void 0 ? void 0 : onDeleteNote(note.log_note_id, event, index);
-                                        }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 12 }) }) }))] })) }))] }), note.note && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: typography_1.fontSizes["xs-minus"], color: colors.text[700], whiteSpace: "pre-wrap", children: note.note })), note.attachments && note.attachments.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.Flex, { wrap: "wrap", gap: 1.5, mt: 1.5, children: note.attachments.map((att, attIndex) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "a", href: att.url, target: "_blank", rel: "noopener noreferrer", onClick: (e) => e.stopPropagation(), align: "center", gap: 1, px: 1.5, py: 0.5, borderRadius: "full", bg: noteChip, color: noteChipInk, fontSize: MIN_TEXT, maxW: "100%", _hover: { bg: colors.primary[100] }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Paperclip, { size: 10 }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", noOfLines: 1, maxW: "9rem", children: att.name || "attachment" })] }, attIndex))) })), (note.created_by || note.created_at) && ((0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: MIN_TEXT, color: colors.textMuted, mt: 1, children: [note.created_by ? formatName(note.created_by) : "", note.created_by && note.created_at ? " · " : "", note.created_at ? formatTimestamp(note.created_at, "time") : ""] }))] }));
+                                        }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 12 }) }) }))] })) }))] }), note.note && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: typography_1.fontSizes["xs-minus"], color: colors.text[700], whiteSpace: "pre-wrap", children: note.note })), note.attachments && note.attachments.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.Flex, { wrap: "wrap", gap: 1.5, mt: 1.5, children: note.attachments.map((att, attIndex) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "a", href: att.url, target: "_blank", rel: "noopener noreferrer", onClick: (e) => e.stopPropagation(), align: "center", gap: 1, px: 1.5, py: 0.5, borderRadius: "full", bg: noteChip, color: noteChipInk, fontSize: MIN_TEXT, maxW: "100%", _hover: { bg: chipHover, color: chipHoverInk }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Paperclip, { size: 10 }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", noOfLines: 1, maxW: "9rem", children: att.name || "attachment" })] }, attIndex))) })), (note.created_by || note.created_at) && ((0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: MIN_TEXT, color: colors.textMuted, mt: 1, children: [note.created_by ? formatName(note.created_by) : "", note.created_by && note.created_at ? " · " : "", note.created_at ? formatTimestamp(note.created_at, "time") : ""] }))] }));
 });
 // The colored event card (shared by both the desktop "tree" and mobile rail).
 // `accent` decides which edge carries the colored bar (pointing toward the spine).
@@ -186,15 +189,16 @@ const EventCard = react_2.default.memo(function EventCard({ event, index, accent
     const clickable = typeof onEventClick === "function";
     const actor = formatName(event.action_by);
     const addNoteHover = (0, planeStep_1.bandOn)(colors.primary[50], colors.background[50]);
+    const changeFromFill = (0, planeStep_1.bandOn)(colors.gray[50], colors.background[50]);
     return ((0, jsx_runtime_1.jsxs)(react_1.Box, { _hover: { ".timeline-add-note": { opacity: 1 } }, _focusWithin: { ".timeline-add-note": { opacity: 1 } }, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", zIndex: 1, bg: colors.background[50], border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}`, borderInlineStartWidth: accent === "left" ? "0.1875rem" : undefined, borderInlineEndWidth: accent === "right" ? "0.1875rem" : undefined, borderInlineStartColor: accent === "left" ? scale[400] : undefined, borderInlineEndColor: accent === "right" ? scale[400] : undefined, borderRadius: "xl", px: 3.5, py: 2.5, ...(clickable && {
                     transition: CARD_TRANSITION,
                     _hover: {
                         borderColor: scale[300],
                         boxShadow: "md",
-                        transform: "translateY(-0.063rem)",
+                        transform: "translateY(-1px)",
                     },
                     sx: (0, motion_2.reducedMotionSx)({ transform: "none" }),
-                }), children: [clickable && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", "aria-label": `View details${event.action_from ? ` for ${event.action_from}` : ""}`, onClick: () => onEventClick(event, index), position: "absolute", inset: 0, w: "100%", h: "100%", p: 0, m: 0, bg: "transparent", border: "none", borderRadius: "inherit", cursor: "pointer", zIndex: 0, sx: (0, focusRing_styles_1.focusVisibleStyles)(colors) })), (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "space-between", gap: 2, flexWrap: "wrap", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: typography_1.fontSizes["xs-plus"], fontWeight: 600, color: colors.text[800], noOfLines: 1, children: event.action_from }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", fontSize: typography_1.fontSizes["xs-minus"], fontWeight: 600, lineHeight: "1", textTransform: "capitalize", color: (0, accentText_1.accentTextOnCanvas)(scale, scale[50]), bg: scale[50], border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${scale[200]}`, borderRadius: "full", px: 2, py: 1, children: event.title })] }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: typography_1.fontSizes["xs-minus"], color: colors.textMuted, whiteSpace: "nowrap", children: formatTimestamp(event.created_at, "time") })] }), event.description != null && ((0, jsx_runtime_1.jsx)(react_1.Box, { mt: 1.5, fontSize: typography_1.fontSizes.xs, color: colors.text[700], children: event.description })), changes.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.Flex, { direction: "column", gap: 1, mt: 2, children: changes.map((c, i) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 1.5, fontSize: typography_1.fontSizes["xs-minus"], lineHeight: "1.4", flexWrap: "wrap", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: 600, color: colors.text[700], children: (0, functions_1.toWords)(c.field) }), c.from !== null && c.from !== undefined && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: (0, accentText_1.accentTextOnCanvas)(colors.gray, colors.gray[50]), bg: colors.gray[50], borderRadius: "full", px: 1.5, textDecoration: "line-through", maxW: "10rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: String(c.from) }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: colors.textMuted, display: "inline-flex", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRight, { size: 11 }) })] })), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: (0, accentText_1.accentTextOnCanvas)(colors.semantic.success, colors.semantic.success[50]), bg: colors.semantic.success[50], borderRadius: "full", px: 1.5, maxW: "12rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: String(c.to) })] }, `${c.field}-${i}`))) })), (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "space-between", gap: 2, mt: 2, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: actor, placement: "top", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: "1.5rem", minW: "1.5rem", borderRadius: "full", bg: colors.primary.opacity[16], color: (0, accentText_1.accentTextOnCanvas)(colors.primary, colors.background[50]), fontSize: MIN_TEXT, fontWeight: 700, children: initials(actor) }) }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: typography_1.fontSizes["xs-minus"], color: colors.textMuted, children: ["by", " ", (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: colors.text[700], fontWeight: 500, children: actor })] })] }), showAddNote && ((0, jsx_runtime_1.jsx)(react_1.Box, { className: "timeline-add-note", as: "button", type: "button", onClick: (e) => {
+                }), children: [clickable && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", "aria-label": `View details${event.action_from ? ` for ${event.action_from}` : ""}`, onClick: () => onEventClick(event, index), position: "absolute", inset: 0, w: "100%", h: "100%", p: 0, m: 0, bg: "transparent", border: "none", borderRadius: "inherit", cursor: "pointer", zIndex: 0, sx: (0, focusRing_styles_1.focusVisibleStyles)(colors) })), (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "space-between", gap: 2, flexWrap: "wrap", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: typography_1.fontSizes["xs-plus"], fontWeight: 600, color: colors.text[800], noOfLines: 1, children: event.action_from }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", fontSize: typography_1.fontSizes["xs-minus"], fontWeight: 600, lineHeight: "1", textTransform: "capitalize", color: (0, accentText_1.accentTextOnCanvas)(scale, scale[50]), bg: scale[50], border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${scale[200]}`, borderRadius: "full", px: 2, py: 1, children: event.title })] }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: typography_1.fontSizes["xs-minus"], color: colors.textMuted, whiteSpace: "nowrap", children: formatTimestamp(event.created_at, "time") })] }), event.description != null && ((0, jsx_runtime_1.jsx)(react_1.Box, { mt: 1.5, fontSize: typography_1.fontSizes.xs, color: colors.text[700], children: event.description })), changes.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.Flex, { direction: "column", gap: 1, mt: 2, children: changes.map((c, i) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 1.5, fontSize: typography_1.fontSizes["xs-minus"], lineHeight: "1.4", flexWrap: "wrap", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: 600, color: colors.text[700], children: (0, functions_1.toWords)(c.field) }), c.from !== null && c.from !== undefined && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: (0, accentText_1.accentTextOnCanvas)(colors.gray, changeFromFill), bg: changeFromFill, borderRadius: "full", px: 1.5, textDecoration: "line-through", maxW: "10rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: String(c.from) }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: colors.textMuted, display: "inline-flex", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRight, { size: 11 }) })] })), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: (0, accentText_1.accentTextOnCanvas)(colors.semantic.success, colors.semantic.success[50]), bg: colors.semantic.success[50], borderRadius: "full", px: 1.5, maxW: "12rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: String(c.to) })] }, `${c.field}-${i}`))) })), (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "space-between", gap: 2, mt: 2, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: actor, placement: "top", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: "1.5rem", minW: "1.5rem", borderRadius: "full", bg: colors.primary.opacity[16], color: (0, accentText_1.accentTextOnCanvas)(colors.primary, colors.background[50]), fontSize: MIN_TEXT, fontWeight: 700, children: initials(actor) }) }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: typography_1.fontSizes["xs-minus"], color: colors.textMuted, children: ["by", " ", (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: colors.text[700], fontWeight: 500, children: actor })] })] }), showAddNote && ((0, jsx_runtime_1.jsx)(react_1.Box, { className: "timeline-add-note", as: "button", type: "button", onClick: (e) => {
                                     e.stopPropagation();
                                     setActiveNoteEventIndex(isActiveNote ? null : index);
                                 }, position: "relative", zIndex: 1, opacity: isActiveNote ? 1 : 0, transition: REVEAL_TRANSITION, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, px: 2, py: 1, borderRadius: "md", fontSize: typography_1.fontSizes.xs, fontWeight: 600, color: (0, accentText_1.accentTextOnCanvas)(colors.primary, colors.background[50]), bg: "transparent", cursor: "pointer", _hover: {
@@ -202,7 +206,7 @@ const EventCard = react_2.default.memo(function EventCard({ event, index, accent
                                     color: addNoteHover === colors.primary[50]
                                         ? undefined
                                         : (0, accentText_1.accentTextOnCanvas)(colors.primary, addNoteHover),
-                                }, children: isActiveNote ? "Hide note" : "Add note" }))] }), event.notes && event.notes.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.Flex, { direction: "column", gap: 2, mt: 2, pt: 2, borderTop: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}`, children: event.notes.map((note, noteIndex) => {
+                                }, children: isActiveNote ? "Hide note" : "Add note" }))] }), event.notes && event.notes.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.Flex, { direction: "column", gap: 2, mt: 2, pt: 2, borderTop: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${(0, planeStep_1.cardRule)(colors)}`, children: event.notes.map((note, noteIndex) => {
                             var _a;
                             return ((0, jsx_runtime_1.jsx)(NoteItem, { note: note, event: event, index: index, colors: colors, activeEditNoteId: activeEditNoteId, setActiveEditNoteId: setActiveEditNoteId, editNoteLoading: editNoteLoading, deletingNoteId: deletingNoteId, onEditNote: onEditNote, onDeleteNote: onDeleteNote }, (_a = note.log_note_id) !== null && _a !== void 0 ? _a : noteIndex));
                         }) }))] }), isActiveNote && ((0, jsx_runtime_1.jsx)(react_1.Box, { mt: 2, children: (0, jsx_runtime_1.jsx)(NoteTextArea_1.default, { saveButtonLoading: addNoteLoading, handleSubmit: (note, title, files) => {
@@ -243,10 +247,10 @@ const Timeline = ({ timelineEvents, onEventClick, onAddNote, onEditNote, onDelet
     // Mobile: single left rail (alternating doesn't read well on narrow widths)
     // -------------------------------------------------------------------------
     if (isMobile) {
-        return ((0, jsx_runtime_1.jsx)(react_1.Box, { position: "relative", maxW: "100%", px: 2, py: 2, children: Object.keys(groupedEvents).map((date) => ((0, jsx_runtime_1.jsxs)(react_1.Box, { mb: 2, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 3, mb: 4, mt: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: typography_1.fontSizes.xs, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: (0, accentText_1.accentTextOnCanvas)(colors.gray, colors.gray[50]), bg: colors.gray[50], border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}`, borderRadius: "full", px: 3, py: 1, whiteSpace: "nowrap", children: date }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: "1", h: "0.063rem", bg: colors.boxborder[200] })] }), (0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", left: NODE_RADIUS, top: "0.5rem", bottom: "0.5rem", w: "0.1875rem", borderRadius: "full", bg: (0, outlineRung_1.liftToContrast)(colors.gray[300], colors.backgroundColor.main, outlineRung_1.AA_NON_TEXT), transform: "translateX(-50%)" }), groupedEvents[date].map(({ event, globalIndex }, index) => {
+        return ((0, jsx_runtime_1.jsx)(react_1.Box, { position: "relative", maxW: "100%", px: 2, py: 2, children: Object.keys(groupedEvents).map((date) => ((0, jsx_runtime_1.jsxs)(react_1.Box, { mb: 2, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 3, mb: 4, mt: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: typography_1.fontSizes.xs, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: (0, accentText_1.accentTextOnCanvas)(colors.gray, colors.gray[50]), bg: colors.gray[50], border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}`, borderRadius: "full", px: 3, py: 1, whiteSpace: "nowrap", children: date }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: "1", h: borderWidths_1.BORDER_WIDTHS.hairline, bg: colors.boxborder[200] })] }), (0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", left: NODE_RADIUS, top: "0.5rem", bottom: "0.5rem", w: "0.1875rem", borderRadius: "full", bg: (0, outlineRung_1.liftToContrast)(colors.gray[300], colors.backgroundColor.main, outlineRung_1.AA_NON_TEXT), transform: "translateX(-50%)" }), groupedEvents[date].map(({ event, globalIndex }, index) => {
                                 var _a;
                                 const scale = getEventScale(colors, event.title);
-                                return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "flex-start", gap: 3, mb: index === groupedEvents[date].length - 1 ? 0 : 3, sx: OFFSCREEN_SKIP, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: NODE, minW: NODE, borderRadius: "full", bg: scale[50], color: (0, accentText_1.accentTextOnCanvas)(scale, scale[50]), border: `0.125rem solid ${colors.background[50]}`, boxShadow: `0 0 0 0.063rem ${scale[200]}`, zIndex: 1, children: getIcon(event, 14) }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(EventCard, { event: event, index: globalIndex, accent: "left", colors: colors, isActiveNote: activeNoteEventIndex === globalIndex, setActiveNoteEventIndex: setActiveNoteEventIndex, activeEditNoteId: activeEditNoteId, setActiveEditNoteId: setActiveEditNoteId, showAddNote: showAddNote, addNoteLoading: addNoteLoading, editNoteLoading: editNoteLoading, deletingNoteId: deletingNoteId, onEventClick: onEventClick, onAddNote: onAddNote, onEditNote: onEditNote, onDeleteNote: onDeleteNote }) })] }, `${(_a = event.logs_id) !== null && _a !== void 0 ? _a : date}-${index}`));
+                                return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "flex-start", gap: 3, mb: index === groupedEvents[date].length - 1 ? 0 : 3, sx: OFFSCREEN_SKIP, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: NODE, minW: NODE, borderRadius: "full", bg: scale[50], color: (0, accentText_1.accentTextOnCanvas)(scale, scale[50]), border: `0.125rem solid ${colors.background[50]}`, boxShadow: `0 0 0 ${borderWidths_1.BORDER_WIDTHS.hairline} ${scale[200]}`, zIndex: 1, children: getIcon(event, 14) }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(EventCard, { event: event, index: globalIndex, accent: "left", colors: colors, isActiveNote: activeNoteEventIndex === globalIndex, setActiveNoteEventIndex: setActiveNoteEventIndex, activeEditNoteId: activeEditNoteId, setActiveEditNoteId: setActiveEditNoteId, showAddNote: showAddNote, addNoteLoading: addNoteLoading, editNoteLoading: editNoteLoading, deletingNoteId: deletingNoteId, onEventClick: onEventClick, onAddNote: onAddNote, onEditNote: onEditNote, onDeleteNote: onDeleteNote }) })] }, `${(_a = event.logs_id) !== null && _a !== void 0 ? _a : date}-${index}`));
                             })] })] }, date))) }));
     }
     // -------------------------------------------------------------------------
@@ -258,7 +262,7 @@ const Timeline = ({ timelineEvents, onEventClick, onAddNote, onEditNote, onDelet
                         const scale = getEventScale(colors, event.title);
                         return ((0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", mb: index === groupedEvents[date].length - 1 ? 0 : 5, minH: NODE, sx: OFFSCREEN_SKIP, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: "1.375rem", h: "0.125rem", w: "0.8125rem", bg: scale[300], left: isLeft
                                         ? `calc(50% - ${SPINE_GAP})`
-                                        : `calc(50% + ${NODE_RADIUS})`, zIndex: 0 }), (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "absolute", left: "50%", top: "0.5rem", transform: "translateX(-50%)", align: "center", justify: "center", boxSize: NODE, borderRadius: "full", bg: scale[50], color: (0, accentText_1.accentTextOnCanvas)(scale, scale[50]), border: `0.125rem solid ${colors.background[50]}`, boxShadow: `0 0 0 0.063rem ${scale[200]}`, zIndex: 2, children: getIcon(event, 15) }), (0, jsx_runtime_1.jsx)(react_1.Box, { position: "relative", zIndex: 1, w: `calc(50% - ${SPINE_GAP})`, ml: isLeft ? 0 : `calc(50% + ${SPINE_GAP})`, children: (0, jsx_runtime_1.jsx)(EventCard, { event: event, index: globalIndex, accent: isLeft ? "right" : "left", colors: colors, isActiveNote: activeNoteEventIndex === globalIndex, setActiveNoteEventIndex: setActiveNoteEventIndex, activeEditNoteId: activeEditNoteId, setActiveEditNoteId: setActiveEditNoteId, showAddNote: showAddNote, addNoteLoading: addNoteLoading, editNoteLoading: editNoteLoading, deletingNoteId: deletingNoteId, onEventClick: onEventClick, onAddNote: onAddNote, onEditNote: onEditNote, onDeleteNote: onDeleteNote }) })] }, `${(_a = event.logs_id) !== null && _a !== void 0 ? _a : date}-${index}`));
+                                        : `calc(50% + ${NODE_RADIUS})`, zIndex: 0 }), (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "absolute", left: "50%", top: "0.5rem", transform: "translateX(-50%)", align: "center", justify: "center", boxSize: NODE, borderRadius: "full", bg: scale[50], color: (0, accentText_1.accentTextOnCanvas)(scale, scale[50]), border: `0.125rem solid ${colors.background[50]}`, boxShadow: `0 0 0 ${borderWidths_1.BORDER_WIDTHS.hairline} ${scale[200]}`, zIndex: 2, children: getIcon(event, 15) }), (0, jsx_runtime_1.jsx)(react_1.Box, { position: "relative", zIndex: 1, w: `calc(50% - ${SPINE_GAP})`, ml: isLeft ? 0 : `calc(50% + ${SPINE_GAP})`, children: (0, jsx_runtime_1.jsx)(EventCard, { event: event, index: globalIndex, accent: isLeft ? "right" : "left", colors: colors, isActiveNote: activeNoteEventIndex === globalIndex, setActiveNoteEventIndex: setActiveNoteEventIndex, activeEditNoteId: activeEditNoteId, setActiveEditNoteId: setActiveEditNoteId, showAddNote: showAddNote, addNoteLoading: addNoteLoading, editNoteLoading: editNoteLoading, deletingNoteId: deletingNoteId, onEventClick: onEventClick, onAddNote: onAddNote, onEditNote: onEditNote, onDeleteNote: onDeleteNote }) })] }, `${(_a = event.logs_id) !== null && _a !== void 0 ? _a : date}-${index}`));
                     })] }, date)))] }));
 };
 exports.default = Timeline;

package/dist/Components/Toaster/Toaster.js

@@ -18,6 +18,7 @@ const motion_2 = require("../../Theme/tokens/primitives/motion");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const tone_1 = require("../../Theme/tokens/builders/tone");
 const color_1 = require("../../Theme/tokens/builders/color");
+const borderWidths_1 = require("../../Theme/tokens/primitives/borderWidths");
 const ToasterContext = (0, react_1.createContext)(undefined);
 const shrink = (0, react_3.keyframes) `
   from { transform: scaleX(1); }
@@ -43,7 +44,7 @@ function ToastCard({ onClose, title, description, actions, isClosable, duration,
         , { 
             // The single live-region root: an explicit aria-live here, on the card's own
             // root, keeps errors from being announced a second time by a duplicate wrapper.
-            role: isUrgent ? "alert" : undefined, "aria-live": isUrgent ? "assertive" : undefined, initial: { opacity: 0, x: 24 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 24, transition: TOAST_EXIT }, transition: TOAST_ENTER, onHoverStart: () => setPaused(true), onHoverEnd: () => setPaused(false), position: "relative", bg: c.surfaceRaised, border: `0.0625rem solid ${c.boxborder[200]}`, boxShadow: "md", borderRadius: "xl", overflow: "hidden", minW: "22.5rem", maxW: "26rem", sx: {
+            role: isUrgent ? "alert" : undefined, "aria-live": isUrgent ? "assertive" : undefined, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0, transition: TOAST_EXIT }, transition: TOAST_ENTER, onHoverStart: () => setPaused(true), onHoverEnd: () => setPaused(false), position: "relative", bg: c.surfaceRaised, border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${c.boxborder[200]}`, boxShadow: "md", borderRadius: "xl", overflow: "hidden", minW: "22.5rem", maxW: "26rem", sx: {
                 isolation: "isolate",
                 transition: (0, motion_2.transitionFor)(["box-shadow"]),
                 _hover: { boxShadow: "lg" },

package/dist/Components/Toggle/TableToggle.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import { ViewToggleProps } from "./TableToggleProps";
-/** Two icon-only IconButtons (Grid/List), aria-pressed marks the active one; shares variant with SegmentedControl (see MODULE.md). */
+/** Two icon-only IconButtons (Grid/List), aria-pressed marks the active one; shares variant with SegmentedControl. */
 declare const TableToggle: React.FC<ViewToggleProps>;
 export default TableToggle;

package/dist/Components/Toggle/TableToggle.js

@@ -19,7 +19,7 @@ const TRACK_HEIGHT = controlSizes_1.BUTTON_SIZES.sm.height;
 const SEGMENT_HEIGHT = `calc(${TRACK_HEIGHT} - 0.25rem)`;
 const INK_TRANSITION = (0, motion_1.transitionFor)(["color"], "base");
 const PILL_TRANSITION = (0, motion_1.transitionFor)(["transform", "width"], "base", "out");
-/** Two icon-only IconButtons (Grid/List), aria-pressed marks the active one; shares variant with SegmentedControl (see MODULE.md). */
+/** Two icon-only IconButtons (Grid/List), aria-pressed marks the active one; shares variant with SegmentedControl. */
 const TableToggle = ({ value, onChange, variant = "default" }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const { colors } = theme;

package/dist/Components/UpgradeButton/UpgradeButton.js

@@ -4,6 +4,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const states_1 = require("../../Theme/tokens/primitives/states");
 const gradientInk_1 = require("../../Theme/tokens/builders/gradientInk");
 const color_1 = require("../../Theme/tokens/builders/color");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
@@ -47,7 +48,7 @@ const UpgradeButton = ({ label, mobileLabel, subtitle, icon = lucide_react_1.Spa
     const g = `linear-gradient(135deg, ${resolved.from} 0%, ${resolved.to} 100%)`;
     const gReversed = `linear-gradient(135deg, ${resolved.to} 0%, ${resolved.from} 100%)`;
     const hasMobile = !!mobileLabel && mobileLabel !== label;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", "aria-label": ariaLabel || label, onClick: blocked ? undefined : onClick, disabled: isDisabled, position: "relative", cursor: blocked ? "default" : "pointer", opacity: isDisabled ? 0.6 : 1, px: { base: s.px === "20px" ? "14px" : s.px, md: s.px }, py: s.py, bgImage: g, color: ink, borderRadius: s.radius, fontWeight: 700, textAlign: "center", overflow: "hidden", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", transition: "transform 0.3s ease, box-shadow 0.3s ease, background-image 0.3s ease", _hover: blocked
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", "aria-label": ariaLabel, onClick: blocked ? undefined : onClick, disabled: isDisabled, position: "relative", cursor: blocked ? "default" : "pointer", opacity: isDisabled ? states_1.DISABLED_OPACITY : 1, px: { base: s.px === "20px" ? "14px" : s.px, md: s.px }, py: s.py, bgImage: g, color: ink, borderRadius: s.radius, fontWeight: 700, textAlign: "center", overflow: "hidden", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", transition: "transform 0.3s ease, box-shadow 0.3s ease, background-image 0.3s ease", _hover: blocked
             ? undefined
             : {
                 transform: "translateY(-2px)",
@@ -71,6 +72,6 @@ const UpgradeButton = ({ label, mobileLabel, subtitle, icon = lucide_react_1.Spa
                 },
                 ...(0, motion_1.reducedMotionSx)({ "&::before": { transition: "none" } }),
             }
-            : { ...(0, focusRing_styles_1.focusVisibleStyles)(c), ...(0, motion_1.reducedMotionSx)() }, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "6px", maxW: maxLabelWidth, overflow: "hidden", whiteSpace: "nowrap", zIndex: 1, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: hasMobile ? { base: "none", md: "block" } : "block", children: label }), hasMobile && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: { base: "block", md: "none" }, children: mobileLabel })), isLoading ? ((0, jsx_runtime_1.jsx)(react_1.Spinner, { size: "xs", thickness: "1.5px", color: resolvedIconColor })) : (Icon && (0, jsx_runtime_1.jsx)(Icon, { size: s.icon, color: resolvedIconColor, style: { flexShrink: 0 } }))] }), subtitle && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", mt: "1px", fontSize: s.sub, fontWeight: 700, color: ink, maxW: maxLabelWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", zIndex: 1, children: subtitle }))] }));
+            : { ...(0, focusRing_styles_1.focusVisibleStyles)(c), ...(0, motion_1.reducedMotionSx)() }, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "6px", maxW: maxLabelWidth, overflow: "hidden", whiteSpace: "nowrap", zIndex: 1, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: hasMobile ? { base: "none", md: "block" } : "block", children: label }), hasMobile && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: { base: "block", md: "none" }, children: mobileLabel })), isLoading ? ((0, jsx_runtime_1.jsx)(react_1.Spinner, { size: "xs", thickness: "1.5px", color: resolvedIconColor, label: "" })) : (Icon && (0, jsx_runtime_1.jsx)(Icon, { size: s.icon, color: resolvedIconColor, style: { flexShrink: 0 } }))] }), subtitle && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", mt: "1px", fontSize: s.sub, fontWeight: 700, color: ink, maxW: maxLabelWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", zIndex: 1, children: subtitle }))] }));
 };
 exports.default = UpgradeButton;

package/dist/Components/UpgradeButton/UpgradeButtonProps.d.ts

@@ -41,7 +41,7 @@ export interface UpgradeButtonProps {
     isDisabled?: boolean;
     /** Truncate the label beyond this width. */
     maxLabelWidth?: string;
-    /** Accessible label (falls back to `label`). */
+    /** Replaces the name read from the visible text; it must contain that text, or voice control cannot match it. */
     ariaLabel?: string;
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }

package/dist/Components/UserDetails/UserDetails.js

@@ -52,6 +52,9 @@ const PersonChip_1 = __importDefault(require("../PersonChip/PersonChip"));
 const AddUserModal_1 = __importDefault(require("./AddUserModal"));
 const ChangeRoleModal_1 = __importDefault(require("./ChangeRoleModal"));
 const DeactivateConfirmModal_1 = __importDefault(require("./DeactivateConfirmModal"));
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const activationKey_1 = require("../Common/activationKey");
+const BACKGROUND_TRANSITION = (0, motion_1.transitionFor)(["background"]);
 const DEFAULT_LABELS = {
     teamMembers: "Team Members",
     refreshList: "Refresh list",
@@ -117,12 +120,7 @@ const UserDetails = ({ users, selectedUser, selectedUserId, roleOptions = [], ca
                                         background: isSelected
                                             ? rowBackgrounds.selectedActive
                                             : rowBackgrounds.active,
-                                    }, transition: "background 0.15s ease", borderRadius: "lg", position: "relative", role: "button", tabIndex: 0, "aria-current": isSelected ? true : undefined, _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(colors), onClick: () => onSelectUser === null || onSelectUser === void 0 ? void 0 : onSelectUser(user), onKeyDown: (e) => {
-                                        if (e.key !== "Enter" && e.key !== " ")
-                                            return;
-                                        e.preventDefault();
-                                        onSelectUser === null || onSelectUser === void 0 ? void 0 : onSelectUser(user);
-                                    }, children: [isSelected && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: 0, top: "20%", bottom: "20%", width: "3px", borderRadius: "full", bg: colors.primary[500] })), (0, jsx_runtime_1.jsx)(PersonChip_1.default, { size: "sm", name: `${user.firstName} ${user.lastName}`, imageUrl: user.profile, secondary: user.email }), renderStatusBadge(user.isActive)] }, user.id));
+                                    }, transition: BACKGROUND_TRANSITION, borderRadius: "lg", position: "relative", role: "button", tabIndex: 0, "aria-current": isSelected ? true : undefined, _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(colors), onClick: () => onSelectUser === null || onSelectUser === void 0 ? void 0 : onSelectUser(user), onKeyDown: (0, activationKey_1.onActivationKey)(() => onSelectUser === null || onSelectUser === void 0 ? void 0 : onSelectUser(user)), children: [isSelected && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: 0, top: "20%", bottom: "20%", width: "3px", borderRadius: "full", bg: colors.primary[500] })), (0, jsx_runtime_1.jsx)(PersonChip_1.default, { size: "sm", name: `${user.firstName} ${user.lastName}`, imageUrl: user.profile, secondary: user.email }), renderStatusBadge(user.isActive)] }, user.id));
                             }) })) })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, backgroundColor: surface, borderRadius: "xl", boxShadow: "sm", border: "1px solid", borderColor: border, display: "flex", flexDirection: "column", order: { base: 1, lg: 2 }, overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { justifyContent: "space-between", alignItems: "center", px: 4, py: 3, borderBottom: "1px solid", borderColor: border, children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", fontWeight: 600, color: heading, children: selectedUser ? labels.userDetails : labels.selectTeamMember }), canManageUsers && ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", colorScheme: "primary", fontSize: "xs", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.UserPlus, { size: 15 }), onClick: onAddUserOpen, children: labels.addUser }))] }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, overflowY: "auto", tabIndex: 0, role: "region", "aria-label": selectedUser ? labels.userDetails : labels.selectTeamMember, children: isUsersLoading ? ((0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, p: 4, align: "stretch", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 4, children: [(0, jsx_runtime_1.jsx)(react_2.SkeletonCircle, { size: "16" }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "18px", width: "50%", mb: 2 }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "12px", width: "35%" })] })] }), Array.from({ length: 4 }).map((_, idx) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "12px", width: "30%", mb: 2 }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "10px", width: "80%" })] }, idx)))] })) : selectedUser ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: { base: "column", md: "row" }, alignItems: { base: "flex-start", md: "center" }, justifyContent: "space-between", gap: 4, p: 4, borderBottom: "1px solid", borderColor: border, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { alignItems: "center", gap: 4, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", children: [(0, jsx_runtime_1.jsx)(Avatar_1.default, { size: "lg", name: selectedUser.name, src: selectedUser.profilePhoto }), selectedUser.isCurrent && ((0, jsx_runtime_1.jsx)(react_2.Badge, { position: "absolute", bottom: -1, right: -1, colorScheme: "blue", variant: "solid", fontSize: "xs", borderRadius: "full", px: 2, py: 0.5, boxShadow: "sm", textTransform: "none", children: labels.you }))] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { size: "md", mb: 1, color: heading, children: selectedUser.name }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: muted, mb: 2, children: selectedUser.role }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [renderStatusBadge(selectedUser.isActive), selectedUser.isPending && ((0, jsx_runtime_1.jsx)(react_2.Badge, { variant: "subtle", borderRadius: "full", px: 2, py: 0.5, fontSize: "xs", fontWeight: 600, colorScheme: "orange", textTransform: "none", children: labels.pendingInvitation }))] })] })] }), canManageUsers &&
                                             !selectedUser.isSuperAdmin && ((0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, flexWrap: "wrap", children: [!selectedUser.isCurrent && !selectedUser.isActive && ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "xs", variant: "outline", colorScheme: "blue", fontSize: "xs", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Send, { size: 13 }), isLoading: isInviteLoading, onClick: () => selectedUser.userId != null &&
                                                         (onReinvite === null || onReinvite === void 0 ? void 0 : onReinvite(selectedUser.userId)), children: labels.resendInvitation })), (0, jsx_runtime_1.jsx)(react_2.Button, { size: "xs", variant: "outline", colorScheme: "gray", fontSize: "xs", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Shield, { size: 13 }), onClick: () => {
@@ -140,7 +138,7 @@ const UserDetails = ({ users, selectedUser, selectedUserId, roleOptions = [], ca
                                                 const Icon = (_a = detail.icon) !== null && _a !== void 0 ? _a : lucide_react_1.UserRound;
                                                 return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 3, px: 3, py: 2.5, _hover: {
                                                                 bg: (0, outlineRung_1.resolveHoverTint)(colors.gray[50], surface),
-                                                            }, alignItems: "center", transition: "background 0.15s ease", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "30px", bg: detailTile, borderRadius: "lg", color: (0, accentText_1.accentTextOnCanvas)(colors.primary, detailTile), flexShrink: 0, children: (0, jsx_runtime_1.jsx)(Icon, { size: 15 }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { minWidth: "110px", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", fontWeight: 600, color: muted, children: detail.label }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: heading, fontWeight: 500, children: detail.value }) })] }), index < selectedUser.details.length - 1 && ((0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: border }))] }, index));
+                                                            }, alignItems: "center", transition: BACKGROUND_TRANSITION, children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "30px", bg: detailTile, borderRadius: "lg", color: (0, accentText_1.accentTextOnCanvas)(colors.primary, detailTile), flexShrink: 0, children: (0, jsx_runtime_1.jsx)(Icon, { size: 15 }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { minWidth: "110px", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", fontWeight: 600, color: muted, children: detail.label }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: heading, fontWeight: 500, children: detail.value }) })] }), index < selectedUser.details.length - 1 && ((0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: border }))] }, index));
                                             }) })] })] })) : ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.UserRound, title: labels.selectTeamMember, description: labels.noUserSelected, minH: "300px" })) })] }), (0, jsx_runtime_1.jsx)(AddUserModal_1.default, { isOpen: isAddUserOpen, onClose: onAddUserClose, roleOptions: roleOptions, isLoading: isAddUserLoading, onSubmit: async (values) => {
                     await (onAddUserSubmit === null || onAddUserSubmit === void 0 ? void 0 : onAddUserSubmit(values));
                     onAddUserClose();

package/dist/Components/WishlistToggle/WishlistToggle.js

@@ -12,6 +12,7 @@ const motion_2 = require("../../Theme/chakra/motion");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
 const scrim_1 = require("../../Theme/tokens/builders/scrim");
+const tonalHover_1 = require("../CheckoutKit/tonalHover");
 const HIT_PX = { sm: 32, md: 44, lg: 48 };
 const POP_MS = 320;
 const pop = (0, react_3.keyframes) `
@@ -48,7 +49,7 @@ const WishlistToggle = ({ selected, defaultSelected = false, onSelectedChange, s
         const ink = on ? colors.semanticText.error : variant === "soft" ? colors.header[900] : colors.textMuted;
         return {
             bg: variant === "soft" ? colors.background[100] : colors.transparent,
-            hoverBg: variant === "soft" ? colors.background[200] : colors.background[100],
+            hoverBg: variant === "soft" ? (0, tonalHover_1.tonalHover)(colors) : (0, tonalHover_1.tonalHover)(colors, colors.background[50], colors.background[100]),
             color: ink,
         };
     })();

package/dist/Components/WorkspaceWindow/WorkspaceTrayPreview.js

@@ -9,6 +9,7 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const zIndices_1 = __importDefault(require("../../Theme/tokens/primitives/zIndices"));
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const PLACEMENT_STYLE = {
     "top-end": { bottom: "100%", right: 0, marginBottom: "6px" },
     "top-start": { bottom: "100%", left: 0, marginBottom: "6px" },
@@ -18,6 +19,7 @@ const PLACEMENT_STYLE = {
 // Presentational, app-agnostic hover-preview (intent-safe: open delay, close grace, Escape dismisses).
 function WorkspaceTrayPreview({ children, preview, enabled = true, openDelayMs = 350, closeDelayMs = 200, placement = "top-end", onOpenChange, width = "340px", testId = "workspace-tray-preview", }) {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const cardId = (0, react_1.useId)();
     const [open, setOpen] = (0, react_1.useState)(false);
     const openTimer = (0, react_1.useRef)(null);
     const closeTimer = (0, react_1.useRef)(null);
@@ -75,7 +77,15 @@ function WorkspaceTrayPreview({ children, preview, enabled = true, openDelayMs =
                 e.stopPropagation();
                 closeNow();
             }
-        }, children: [children, open && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", ...PLACEMENT_STYLE[placement], w: typeof width === "number" ? `${width}px` : width, maxW: "min(360px, calc(100vw - 2rem))", bg: theme.colors.surfaceRaised, borderWidth: "1px", borderColor: theme.colors.boxborder[200], borderRadius: "lg", boxShadow: "xl", zIndex: zIndices_1.default.popover, pointerEvents: "auto", p: 3, textAlign: "left", color: theme.colors.text[700], cursor: "default", onMouseEnter: clearCloseTimer, onMouseLeave: scheduleClose, "data-testid": testId, children: typeof preview === "function"
+        }, children: [typeof children === "function"
+                ? children({
+                    triggerProps: {
+                        "aria-expanded": open,
+                        "aria-controls": open ? cardId : undefined,
+                        "aria-describedby": open ? cardId : undefined,
+                    },
+                })
+                : children, open && ((0, jsx_runtime_1.jsx)(react_2.Box, { id: cardId, position: "absolute", ...PLACEMENT_STYLE[placement], w: typeof width === "number" ? `${width}px` : width, maxW: "min(360px, calc(100vw - 2rem))", bg: theme.colors.surfaceRaised, borderWidth: "1px", borderColor: (0, surfaceRaised_1.raisedRule)(theme.colors), borderRadius: "lg", boxShadow: "xl", zIndex: zIndices_1.default.popover, pointerEvents: "auto", p: 3, textAlign: "left", color: theme.colors.text[700], cursor: "default", "data-testid": testId, children: typeof preview === "function"
                     ? preview({ close: closeNow })
                     : preview }))] }));
 }

package/dist/Components/WorkspaceWindow/WorkspaceWindow.js

@@ -12,6 +12,8 @@ const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const zIndices_1 = __importDefault(require("../../Theme/tokens/primitives/zIndices"));
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 // NOTE: no maximize/restore toggle (removed by product decision); onMedium/onMaximize stay as deprecated no-ops.
 const WINDOW_SIZE = { maxW: "88rem", h: "92vh" };
 const WindowTitle = ({ testId, color, children }) => {
@@ -39,7 +41,7 @@ function WorkspaceWindow({ title, state, children, onMinimize, onClose, onOpenFu
                 onMouseDown: (e) => {
                     if (e.target === e.currentTarget)
                         onOverlayClick === null || onOverlayClick === void 0 ? void 0 : onOverlayClick();
-                }, "data-testid": `${testId}-backdrop`, children: (0, jsx_runtime_1.jsxs)(react_1.Box, { bg: theme.colors.surfaceRaised, borderRadius: "xl", boxShadow: "2xl", overflow: "hidden", w: "100%", maxW: size.maxW, h: size.h, display: "flex", flexDirection: "column", "data-testid": testId, "data-window-state": state, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "space-between", px: 3, py: 2, borderBottomWidth: "1px", borderColor: theme.colors.boxborder[200], bg: theme.colors.background[100], flexShrink: 0, children: [(0, jsx_runtime_1.jsx)(WindowTitle, { testId: testId, color: theme.colors.text[700], children: title }), (0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 1, children: [headerActions, onOpenFullPage ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": (_a = labels === null || labels === void 0 ? void 0 : labels.openFullPage) !== null && _a !== void 0 ? _a : "Open full page", size: "xs", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 14 }), onClick: onOpenFullPage, "data-testid": `${testId}-fullpage` })) : null, onMinimize ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": (_b = labels === null || labels === void 0 ? void 0 : labels.minimize) !== null && _b !== void 0 ? _b : "Minimize", size: "xs", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Minus, { size: 15 }), onClick: onMinimize, "data-testid": `${testId}-minimize` })) : null, onClose ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": (_c = labels === null || labels === void 0 ? void 0 : labels.close) !== null && _c !== void 0 ? _c : "Close", size: "xs", variant: "ghost", colorScheme: "red", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15 }), onClick: onClose, "data-testid": `${testId}-close` })) : null] })] }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: "1", overflow: "auto", px: { base: 3, md: 5 }, py: 4, children: children })] }) })] }));
+                }, "data-testid": `${testId}-backdrop`, children: (0, jsx_runtime_1.jsxs)(react_1.Box, { bg: theme.colors.surfaceRaised, borderRadius: "xl", boxShadow: "2xl", overflow: "hidden", w: "100%", maxW: size.maxW, h: size.h, display: "flex", flexDirection: "column", "data-testid": testId, "data-window-state": state, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "space-between", px: 3, py: 2, borderBottomWidth: "1px", borderColor: (0, surfaceRaised_1.raisedRule)(theme.colors), bg: (0, planeStep_1.bandOn)(theme.colors.background[100], theme.colors.surfaceRaised), flexShrink: 0, children: [(0, jsx_runtime_1.jsx)(WindowTitle, { testId: testId, color: theme.colors.text[700], children: title }), (0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 1, children: [headerActions, onOpenFullPage ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": (_a = labels === null || labels === void 0 ? void 0 : labels.openFullPage) !== null && _a !== void 0 ? _a : "Open full page", size: "xs", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 14 }), onClick: onOpenFullPage, "data-testid": `${testId}-fullpage` })) : null, onMinimize ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": (_b = labels === null || labels === void 0 ? void 0 : labels.minimize) !== null && _b !== void 0 ? _b : "Minimize", size: "xs", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Minus, { size: 15 }), onClick: onMinimize, "data-testid": `${testId}-minimize` })) : null, onClose ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": (_c = labels === null || labels === void 0 ? void 0 : labels.close) !== null && _c !== void 0 ? _c : "Close", size: "xs", variant: "ghost", colorScheme: "red", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15 }), onClick: onClose, "data-testid": `${testId}-close` })) : null] })] }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: "1", overflow: "auto", px: { base: 3, md: 5 }, py: 4, children: children })] }) })] }));
 }
 const cssLength = (value) => (typeof value === "number" ? `${value}px` : value);
 // Portalled above modal overlays; aria-live keeps Chakra's modal aria-hidden off it, data-no-focus-lock keeps the focus trap off it.

package/dist/Components/WorkspaceWindow/WorkspaceWindowProps.d.ts

@@ -66,10 +66,7 @@ export interface WorkspaceTrayProps {
     onRestore?: (id: string) => void;
     onClose?: (id: string) => void;
     testId?: string;
-    /**
-     * Which bottom corner the tray sits in. Default "bottom-end". The tray is portalled above modals and stays
-     * reachable while a modal is open.
-     */
+    /** Which bottom corner the tray sits in. Default "bottom-end". Portalled above modals but outside their focus trap: a pointer restores a pill while a modal is open, Tab does not reach it. */
     placement?: "bottom-end" | "bottom-start";
     /** Distance from the viewport edges, to clear a sticky bar. Numbers are px, strings any CSS length. Default 1rem each. */
     offset?: {
@@ -88,14 +85,23 @@ export interface WorkspaceTrayProps {
         close: () => void;
     }, pill: ReactNode) => ReactNode;
 }
+type WorkspaceTrayPreviewTriggerProps = {
+    "aria-expanded": boolean;
+    "aria-controls": string | undefined;
+    "aria-describedby": string | undefined;
+};
 /** Props for WorkspaceTrayPreview — despite the name, works for any hover trigger, not just tray pills. */
 export interface WorkspaceTrayPreviewProps {
     /**
      * The trigger markup (typically a tray pill). The preview + trigger share one
      * open/close timer so the cursor can travel pill ⇄ preview without the card
-     * closing (hover-bridge pattern).
+     * closing (hover-bridge pattern). A render-prop form receives `triggerProps`
+     * (aria-expanded, plus aria-controls/aria-describedby while open): spread them
+     * on the one focusable trigger so assistive tech hears the card.
      */
-    children: ReactNode;
+    children: ReactNode | ((api: {
+        triggerProps: WorkspaceTrayPreviewTriggerProps;
+    }) => ReactNode);
     /**
      * The preview body, rendered inside the floating card. Headless: the consumer
      * supplies whatever it wants to show (ticket summary, chips, actions, etc.).
@@ -116,10 +122,11 @@ export interface WorkspaceTrayPreviewProps {
      * right-aligned) — matches a bottom-right tray.
      */
     placement?: "top-start" | "top-end" | "bottom-start" | "bottom-end";
-    /** Fires when the card actually opens — use to lazy-load the preview data. */
+    /** Fires with `true` when the card opens and `false` when it closes (never before it opened) — use `true` to lazy-load the preview data. */
     onOpenChange?: (open: boolean) => void;
     /** Card width. Default 340px, capped to the viewport on small screens. */
     width?: string | number;
     /** data-testid for the floating card. */
     testId?: string;
 }
+export {};

package/dist/Hooks/useOutsideMouseDown.d.ts

@@ -0,0 +1,11 @@
+import { type RefObject } from "react";
+interface OutsideMouseDownOptions {
+    enabled?: boolean;
+    /** Listen in the capture phase, so a descendant's `stopPropagation` cannot hide the press. */
+    capture?: boolean;
+    /** Also fire on `click`, for pickers that must finalise on either event. */
+    includeClick?: boolean;
+}
+/** Calls `onOutside` for a document `mousedown` outside every ref; a null ref contains nothing. Unlike Chakra's `useOutsideClick` it never waits for `mouseup`. */
+export declare const useOutsideMouseDown: (refs: readonly RefObject<Element | null>[], onOutside: (event: MouseEvent) => void, { enabled, capture, includeClick }?: OutsideMouseDownOptions) => void;
+export {};

package/dist/Hooks/useOutsideMouseDown.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOutsideMouseDown = void 0;
+const react_1 = require("react");
+/** Calls `onOutside` for a document `mousedown` outside every ref; a null ref contains nothing. Unlike Chakra's `useOutsideClick` it never waits for `mouseup`. */
+const useOutsideMouseDown = (refs, onOutside, { enabled = true, capture = false, includeClick = false } = {}) => {
+    const latest = (0, react_1.useRef)({ refs, onOutside });
+    (0, react_1.useEffect)(() => {
+        latest.current = { refs, onOutside };
+    });
+    (0, react_1.useEffect)(() => {
+        if (!enabled)
+            return;
+        const handle = (event) => {
+            const target = event.target;
+            if (latest.current.refs.some((ref) => { var _a; return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.contains(target); }))
+                return;
+            latest.current.onOutside(event);
+        };
+        document.addEventListener("mousedown", handle, capture);
+        if (includeClick)
+            document.addEventListener("click", handle, capture);
+        return () => {
+            document.removeEventListener("mousedown", handle, capture);
+            if (includeClick)
+                document.removeEventListener("click", handle, capture);
+        };
+    }, [enabled, capture, includeClick]);
+};
+exports.useOutsideMouseDown = useOutsideMouseDown;

package/dist/Hooks/usePreferences.js

@@ -19,28 +19,45 @@ const constructUrl = ({ baseUrl, key, page, name, orgId }) => {
     const queryString = params.toString();
     return `${baseUrl}${queryString ? `?${queryString}` : ""}`;
 };
+const NO_PREFERENCES = [];
 const useGetPreferences = ({ baseUrl = "", key = "", page = "", name = "", authToken = "", orgId = "", }) => {
-    const [preferences, setPreferences] = (0, react_1.useState)([]);
-    // NOTE: must start true — KanbanBoard's hydration effect reads this before this hook's mount effect runs.
-    const [loading, setLoading] = (0, react_1.useState)(() => Boolean(baseUrl));
+    const url = baseUrl ? constructUrl({ baseUrl, key, page, name, orgId }) : "";
+    const requestKey = url ? JSON.stringify([url, authToken]) : "";
+    const [settled, setSettled] = (0, react_1.useState)({
+        requestKey: "",
+        preferences: NO_PREFERENCES,
+    });
     (0, react_1.useEffect)(() => {
-        if (!baseUrl) {
+        if (!url) {
             return;
         }
-        setLoading(true);
-        const url = constructUrl({ baseUrl, key, page, name, orgId });
+        let cancelled = false;
         fetch(url, {
             headers: {
                 Authorization: authToken,
             },
         })
             .then((response) => response.json())
-            .then((data) => setPreferences(data))
-            .catch((error) => console.error(error))
-            .finally(() => setLoading(false));
-        /* eslint-disable */
-    }, [baseUrl]);
-    return { preferences, loading };
+            .then((data) => {
+            if (!cancelled)
+                setSettled({ requestKey, preferences: data });
+        })
+            .catch((error) => {
+            if (cancelled)
+                return;
+            console.error(error);
+            setSettled({ requestKey, preferences: NO_PREFERENCES });
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [url, authToken, requestKey]);
+    const isSettled = settled.requestKey === requestKey;
+    return {
+        preferences: isSettled ? settled.preferences : NO_PREFERENCES,
+        // NOTE: derived so KanbanBoard never reads a stale loading=false, on mount or re-key.
+        loading: Boolean(baseUrl) && !isSettled,
+    };
 };
 exports.useGetPreferences = useGetPreferences;
 const useSavePreferences = ({ baseUrl = "", key = "", page = "", name = "", authToken = "", orgId = "", }) => {
@@ -59,6 +76,7 @@ const useSavePreferences = ({ baseUrl = "", key = "", page = "", name = "", auth
             body: JSON.stringify({ key, page, name, json: data }),
         })
             .then((r) => r.json())
+            .then(() => setError(null))
             .catch((e) => setError(e))
             .finally(() => setLoading(false));
     }, [baseUrl, orgId, authToken, key, page, name]);

package/dist/Hooks/useScrollableRegion.d.ts

@@ -0,0 +1,17 @@
+/** `label` or `labelledBy` names the scroller; `keepRole` stops it taking role=region. */
+export type ScrollableRegionOptions = {
+    label?: string;
+    labelledBy?: string;
+    keepRole?: boolean;
+};
+/** Attributes to spread on a scroller; empty unless it overflows with nothing focusable inside. */
+export type ScrollableRegionProps = {
+    tabIndex?: 0;
+    role?: "region";
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+};
+export declare function useScrollableRegion<T extends HTMLElement = HTMLElement>({ label, labelledBy, keepRole, }?: ScrollableRegionOptions): {
+    ref: (node: T | null) => void;
+    props: ScrollableRegionProps;
+};

package/dist/Hooks/useScrollableRegion.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useScrollableRegion = useScrollableRegion;
+const react_1 = require("react");
+const sharedResizeObserver_1 = require("./sharedResizeObserver");
+const FOCUSABLE_CONTENT = 'a[href], area[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), summary, iframe, [contenteditable]:not([contenteditable="false"]), [tabindex]:not([tabindex="-1"])';
+const USER_SCROLLABLE = /auto|scroll/;
+const SLACK_PX = 1;
+const needsFocusStop = (el) => {
+    const { overflowX, overflowY } = getComputedStyle(el);
+    const scrollsX = USER_SCROLLABLE.test(overflowX) && el.scrollWidth > el.clientWidth + SLACK_PX;
+    const scrollsY = USER_SCROLLABLE.test(overflowY) && el.scrollHeight > el.clientHeight + SLACK_PX;
+    return (scrollsX || scrollsY) && !el.querySelector(FOCUSABLE_CONTENT);
+};
+function useScrollableRegion({ label, labelledBy, keepRole = false, } = {}) {
+    const [element, setElement] = (0, react_1.useState)(null);
+    const [isStop, setIsStop] = (0, react_1.useState)(false);
+    const measure = (0, react_1.useCallback)(() => setIsStop(element !== null && needsFocusStop(element)), [element]);
+    (0, react_1.useEffect)(() => {
+        if (!element)
+            return undefined;
+        return (0, sharedResizeObserver_1.observeResize)(element, measure);
+    }, [element, measure]);
+    // NOTE: also runs after every commit; an equal state bails out, so no loop.
+    (0, react_1.useEffect)(measure);
+    const named = Boolean(label || labelledBy);
+    const props = isStop
+        ? {
+            tabIndex: 0,
+            role: named && !keepRole ? "region" : undefined,
+            "aria-label": label,
+            "aria-labelledby": labelledBy,
+        }
+        : {};
+    return { ref: setElement, props };
+}

package/dist/Hooks/useSidebarPrefs.d.ts

@@ -3,6 +3,7 @@ export type SidebarPrefs = {
     collapsed: boolean;
     mobileOpen: boolean;
 };
+/** Persistence key and first-visit defaults for sidebar preferences. */
 export type UseSidebarPrefsOptions = {
     /** localStorage key. Versioned so a future shape change can bump it. */
     storageKey?: string;

package/dist/Theme/chakra/Menu.styles.d.ts

@@ -14,6 +14,10 @@ export declare const Menu: {
             borderStyle: string;
             borderColor: string;
         };
+        divider: {
+            opacity?: number | undefined;
+            borderColor: string;
+        };
         item: {
             color: string;
             minH: string;

package/dist/Theme/chakra/Menu.styles.js

@@ -8,6 +8,8 @@ const optionRowInk_1 = require("../../Components/Select/optionRowInk");
 const optionRowSizes_1 = require("../tokens/primitives/optionRowSizes");
 const paletteFromTheme_1 = require("./paletteFromTheme");
 const overlay_styles_1 = require("./overlay.styles");
+const accentText_1 = require("../tokens/builders/accentText");
+const surfaceRaised_1 = require("../tokens/builders/surfaceRaised");
 const itemRowSpec = optionRowSizes_1.OPTION_ROW_SIZES.sm;
 const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.menuAnatomy.keys);
 const $bg = (0, react_1.cssVar)("menu-bg");
@@ -28,6 +30,10 @@ const baseStyle = definePartsStyle(({ theme }) => {
             borderColor: colors.boxborder[200],
             ...overlay_styles_1.POPUP_SURFACE,
         },
+        divider: {
+            borderColor: (0, surfaceRaised_1.raisedRule)(colors),
+            ...((0, accentText_1.isDarkCanvas)(colors.surfaceRaised) && { opacity: 1 }),
+        },
         item: {
             color: (0, optionRowInk_1.optionRowInk)(colors, false),
             minH: itemRowSpec.minH,