pixelize-design-library 2.4.2 → 3.0.0

package/dist/Components/Timeline/Timeline.js

@@ -9,6 +9,13 @@ const lucide_react_1 = require("lucide-react");
 const react_2 = __importDefault(require("react"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const borderWidths_1 = require("../../Theme/tokens/primitives/borderWidths");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
+const motion_2 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const functions_1 = require("../../Utils/functions");
 const NoteTextArea_1 = __importDefault(require("../NoteTextArea/NoteTextArea"));
 const react_3 = require("react");
@@ -89,7 +96,14 @@ const getSourceIcon = (event, size) => {
             return (0, jsx_runtime_1.jsx)(lucide_react_1.Volleyball, { size: size });
     }
 };
-const getIcon = (event, size) => { var _a; return (_a = getActionIcon(event.title, size)) !== null && _a !== void 0 ? _a : getSourceIcon(event, size); };
+const getIcon = (event, size) => { var _a, _b; return (_b = (_a = event.icon) !== null && _a !== void 0 ? _a : getActionIcon(event.title, size)) !== null && _b !== void 0 ? _b : getSourceIcon(event, size); };
+const formatName = (name) => name
+    .split("_")
+    .filter(Boolean)
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ");
+const REVEAL_TRANSITION = (0, motion_1.transitionFor)(["opacity"]);
+const MIN_TEXT = "0.6875rem";
 const groupEventsByDate = (events) => events.reduce((groups, event, globalIndex) => {
     const date = formatTimestamp(event.created_at, "date");
     if (date !== "Invalid Date") {
@@ -128,6 +142,7 @@ const initials = (name) => (name || "")
     .slice(0, 2)
     .join("")
     .toUpperCase() || "?";
+const CARD_TRANSITION = (0, motion_1.transitionFor)(["border-color", "box-shadow", "transform"]);
 const NODE = "1.875rem"; // 30px node, centered on the spine
 const NODE_RADIUS = "0.9375rem";
 const SPINE_GAP = "1.75rem"; // gap between spine and card edge
@@ -143,41 +158,55 @@ 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 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", bg: colors.gray[50], border: `0.063rem 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: "0.6875rem", 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: "opacity 0.15s ease", 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", display: "inline-flex", alignItems: "center", justifyContent: "center", p: 1, borderRadius: "md", color: colors.textMuted, bg: "transparent", cursor: "pointer", _hover: {
-                                            bg: colors.primary[50],
-                                            color: (0, accentText_1.accentTextOnCanvas)(colors.primary, colors.primary[50]),
+    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) => {
                                             e.stopPropagation();
                                             setActiveEditNoteId(note.log_note_id);
-                                        }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 12 }) }) })), onDeleteNote && ((0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: "Delete", placement: "top", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", "aria-label": "Delete note", display: "inline-flex", alignItems: "center", justifyContent: "center", p: 1, borderRadius: "md", color: colors.textMuted, bg: "transparent", cursor: "pointer", _hover: {
+                                        }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 12 }) }) })), onDeleteNote && ((0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: "Delete", placement: "top", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", "aria-label": "Delete 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: colors.semantic.error[50],
                                             color: (0, accentText_1.accentTextOnCanvas)(colors.semantic.error, colors.semantic.error[50]),
                                         }, 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: "0.6875rem", 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: colors.primary[50], color: (0, accentText_1.accentTextOnCanvas)(colors.primary, colors.primary[50]), fontSize: "0.625rem", 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: "0.625rem", color: colors.textMuted, mt: 1, children: [note.created_by ? (0, functions_1.toWords)(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).
 // Declared at module scope: inside Timeline's body it remounts every card on each render.
-const EventCard = react_2.default.memo(function EventCard({ event, index, accent, colors, theme, isActiveNote, setActiveNoteEventIndex, activeEditNoteId, setActiveEditNoteId, showAddNote, addNoteLoading, editNoteLoading, deletingNoteId, onEventClick, onAddNote, onEditNote, onDeleteNote, }) {
-    var _a;
+const EventCard = react_2.default.memo(function EventCard({ event, index, accent, colors, isActiveNote, setActiveNoteEventIndex, activeEditNoteId, setActiveEditNoteId, showAddNote, addNoteLoading, editNoteLoading, deletingNoteId, onEventClick, onAddNote, onEditNote, onDeleteNote, }) {
     const scale = getEventScale(colors, event.title);
     const changes = (0, react_3.useMemo)(() => parseChanges(event.changes), [event.changes]);
     const clickable = typeof onEventClick === "function";
-    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, { as: clickable ? "button" : undefined, type: clickable ? "button" : undefined, display: clickable ? "block" : undefined, w: clickable ? "100%" : undefined, textAlign: clickable ? "start" : undefined, position: "relative", zIndex: 1, bg: colors.background[50], border: `0.063rem 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, transition: "all 0.15s ease", cursor: clickable ? "pointer" : "default", onClick: clickable ? () => onEventClick(event, index) : undefined, _hover: {
-                    borderColor: scale[300],
-                    boxShadow: (_a = theme.shadows) === null || _a === void 0 ? void 0 : _a.md,
-                    transform: clickable ? "translateY(-1px)" : undefined,
-                }, children: [(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: "0.8125rem", fontWeight: 600, color: colors.text[800], noOfLines: 1, children: event.action_from }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", fontSize: "0.6875rem", fontWeight: 600, lineHeight: "1", textTransform: "capitalize", color: (0, accentText_1.accentTextOnCanvas)(scale, scale[50]), bg: scale[50], border: `0.063rem solid ${scale[200]}`, borderRadius: "full", px: 2, py: 1, children: event.title })] }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.6875rem", color: colors.textMuted, whiteSpace: "nowrap", children: formatTimestamp(event.created_at, "time") })] }), 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: "0.6875rem", 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: colors.textMuted, bg: colors.gray[50], borderRadius: "base", 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: "base", 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: (0, functions_1.toWords)(event.action_by), placement: "top", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: "1.25rem", minW: "1.25rem", borderRadius: "full", bg: colors.primary.opacity[16], color: (0, accentText_1.accentTextOnCanvas)(colors.primary, colors.background[50]), fontSize: "0.5625rem", fontWeight: 700, children: initials((0, functions_1.toWords)(event.action_by)) }) }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "0.6875rem", color: colors.textMuted, children: ["by", " ", (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: colors.text[700], fontWeight: 500, children: (0, functions_1.toWords)(event.action_by) })] })] }), showAddNote && ((0, jsx_runtime_1.jsx)(react_1.Box, { className: "timeline-add-note", as: "button", type: "button", onClick: (e) => {
+    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(-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, 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);
-                                }, opacity: isActiveNote ? 1 : 0, transition: "opacity 0.15s ease", px: 2, py: 1, borderRadius: "md", fontSize: "0.75rem", fontWeight: 600, color: (0, accentText_1.accentTextOnCanvas)(colors.primary, colors.background[50]), bg: "transparent", cursor: "pointer", _hover: {
-                                    bg: colors.primary[50],
-                                }, 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: `0.063rem solid ${colors.gray[100]}`, children: event.notes.map((note, noteIndex) => {
+                                }, 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: {
+                                    bg: addNoteHover,
+                                    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 ${(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) => {
@@ -188,9 +217,9 @@ const EventCard = react_2.default.memo(function EventCard({ event, index, accent
                             setActiveNoteEventIndex(null);
                     }, handleCancel: () => setActiveNoteEventIndex(null) }) }))] }));
 });
-const Timeline = ({ timelineEvents, onEventClick, onAddNote, onEditNote, onDeleteNote, showAddNote = false, addNoteLoading, editNoteLoading, deletingNoteId, }) => {
-    const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const colors = theme.colors;
+/** Renders a grouped, alternating two-column desktop / single-rail mobile event feed with inline notes — not a generic list. */
+const Timeline = ({ timelineEvents, onEventClick, onAddNote, onEditNote, onDeleteNote, showAddNote = false, addNoteLoading, editNoteLoading, deletingNoteId, emptyText = "No timeline events to display", }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const isMobile = (0, react_1.useBreakpointValue)({ base: true, md: false });
     const [activeNoteEventIndex, setActiveNoteEventIndex] = (0, react_3.useState)(null);
     const [activeEditNoteId, setActiveEditNoteId] = (0, react_3.useState)(null);
@@ -212,31 +241,28 @@ const Timeline = ({ timelineEvents, onEventClick, onAddNote, onEditNote, onDelet
     }, [editNoteLoading]);
     const groupedEvents = (0, react_3.useMemo)(() => groupEventsByDate(timelineEvents !== null && timelineEvents !== void 0 ? timelineEvents : []), [timelineEvents]);
     if (!timelineEvents || timelineEvents.length === 0) {
-        return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", align: "center", justify: "center", py: 12, gap: 2, color: colors.textMuted, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { boxSize: "2.75rem", borderRadius: "full", bg: colors.gray[100], display: "flex", alignItems: "center", justifyContent: "center", color: (0, accentText_1.accentTextOnCanvas)(colors.gray, colors.gray[100]), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Volleyball, { size: 20 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.875rem", fontWeight: 500, children: "No timeline events to display" })] }));
+        return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", align: "center", justify: "center", py: 12, gap: 2, color: colors.textMuted, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { boxSize: "2.75rem", borderRadius: "full", bg: colors.gray[100], display: "flex", alignItems: "center", justifyContent: "center", color: (0, accentText_1.accentTextOnCanvas)(colors.gray, colors.gray[100]), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Volleyball, { size: 20 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: typography_1.fontSizes.sm, fontWeight: 500, children: emptyText })] }));
     }
     // -------------------------------------------------------------------------
     // 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: "0.75rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: (0, accentText_1.accentTextOnCanvas)(colors.gray, colors.gray[50]), bg: colors.gray[50], border: `0.063rem 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: colors.gray[300], 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, theme: theme, 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))) }));
     }
     // -------------------------------------------------------------------------
     // Desktop: center spine with cards alternating left / right (the "tree")
     // -------------------------------------------------------------------------
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", maxW: "60rem", mx: "auto", px: 4, py: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", left: "50%", top: "0.5rem", bottom: "0.5rem", w: "0.015rem", borderRadius: "full", bg: colors.gray[300], transform: "translateX(-50%)" }), Object.keys(groupedEvents).map((date) => {
-                var _a;
-                return ((0, jsx_runtime_1.jsxs)(react_1.Box, { mb: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { justify: "center", mb: 5, mt: 3, position: "relative", zIndex: 2, children: (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.75rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: colors.textMuted, bg: colors.background[50], border: `0.063rem solid ${colors.boxborder[200]}`, boxShadow: (_a = theme.shadows) === null || _a === void 0 ? void 0 : _a.xs, borderRadius: "full", px: 4, py: 1.5, whiteSpace: "nowrap", children: date }) }), groupedEvents[date].map(({ event, globalIndex }, index) => {
-                            var _a;
-                            const isLeft = index % 2 === 0;
-                            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, theme: theme, 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));
-            })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", maxW: "60rem", mx: "auto", px: 4, py: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", left: "50%", top: "0.5rem", bottom: "0.5rem", w: "0.015rem", borderRadius: "full", bg: (0, outlineRung_1.liftToContrast)(colors.gray[300], colors.backgroundColor.main, outlineRung_1.AA_NON_TEXT), transform: "translateX(-50%)" }), Object.keys(groupedEvents).map((date) => ((0, jsx_runtime_1.jsxs)(react_1.Box, { mb: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { justify: "center", mb: 5, mt: 3, position: "relative", zIndex: 2, children: (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: typography_1.fontSizes.xs, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: colors.textMuted, bg: colors.background[50], border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}`, boxShadow: "xs", borderRadius: "full", px: 4, py: 1.5, whiteSpace: "nowrap", children: date }) }), groupedEvents[date].map(({ event, globalIndex }, index) => {
+                        var _a;
+                        const isLeft = index % 2 === 0;
+                        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 ${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/Timeline/TimelineProps.d.ts

@@ -1,10 +1,19 @@
+import type { ReactNode } from "react";
+/** Config + event data for Timeline's grouped feed; onEventClick/onAddNote/onEditNote/onDeleteNote are all optional so the feed can be read-only. */
 export interface TimelineProps {
+    /** @deprecated Never read — use `timelineEvents`; passing `events` renders nothing. */
     events?: TimelineEvent[];
+    /** Grouped by `created_at` day in array order — never sorted, so pass it pre-sorted. */
     timelineEvents: TimelineEvents[];
+    /** Makes each card a button with hover lift and focus ring; without it cards are static. */
     onEventClick?: (event: TimelineEvents, index: number) => void;
+    /** `index` is the event's position in `timelineEvents`; editor closes at once unless `addNoteLoading` is wired. */
     onAddNote?: (note: string, title: string, files: File[], event: TimelineEvents, index: number) => void;
+    /** Unlike onAddNote, the edit editor only auto-closes via editNoteLoading flipping true→false — omit it and Save never closes the form. */
     onEditNote?: (logNoteId: number, note: string, title: string, files: File[], event: TimelineEvents, index: number) => void;
+    /** Fires immediately on the trash icon — no confirm step; add your own if needed. */
     onDeleteNote?: (logNoteId: number, event: TimelineEvents, index: number) => void;
+    /** Defaults to false; the "Add note" button only appears on card hover or focus. */
     showAddNote?: boolean;
     /** Spinner on the "Add note" editor while the create request is in flight. */
     addNoteLoading?: boolean;
@@ -12,34 +21,62 @@ export interface TimelineProps {
     editNoteLoading?: boolean;
     /** log_note_id currently being deleted — shows a spinner on that note. */
     deletingNoteId?: number | string | null;
+    /** Message shown when `timelineEvents` is empty. Defaults to "No timeline events to display". */
+    emptyText?: ReactNode;
 }
+/** @deprecated Shape of the dead `events` prop — Timeline renders `TimelineEvents` (plural). */
 export interface TimelineEvent {
     title: string;
     description: string;
     time: string;
 }
+/** A file attached to a manual timeline note; size is captured but never read or displayed. */
 export interface TimelineNoteAttachment {
+    /** Link target, opened in a new tab; clicks do not trigger the card's `onEventClick`. */
     url: string;
+    /** Link text; defaults to "attachment". */
     name?: string;
     size?: number | null;
 }
+/** One manual note attached to a log entry; log_note_id doubles as the React key and the edit/delete target. */
 export interface TimelineNote {
+    /** Unique note id passed back to `onEditNote` and `onDeleteNote`. */
     log_note_id: number;
+    /** @deprecated Never read — the parent event already identifies the log. */
     logs_id?: number;
+    /** Bold note heading; omitted when empty. */
     title?: string | null;
+    /** Note body, rendered with line breaks preserved; omitted when empty. */
     note?: string | null;
+    /** Rendered as link chips under the body. */
     attachments?: TimelineNoteAttachment[] | null;
+    /** Epoch ms (number or digit string) or any `Date`-parseable string. */
     created_at?: number | string | null;
+    /** Underscores become spaces and each word is capitalised, e.g. `john_doe` → "John Doe". */
     created_by?: string | null;
 }
+/** One timeline entry (despite the plural name) — the element type of the timelineEvents array Timeline actually renders. */
 export interface TimelineEvents {
+    /** Only used in the React key — duplicates are tolerated. */
     logs_id: number;
+    /** Shown as the capitalised status pill; "created"/"updated"/"delete(d)" (any case) pick the color and icon, anything else uses primary. */
     title: string;
+    /** @deprecated Never read, but required — keep passing it; do not delete. */
     primary_id: number;
+    /** @deprecated Never read, but required — `action_from` is the displayed source. */
     is_from: string;
+    /** Card heading; "Accounts" and "Notes" also select the fallback node icon. */
     action_from: string;
+    /** Shown as "by …" with underscores turned into spaces and words capitalised. */
     action_by: string;
+    /** An unparseable value drops the whole event from every render path — no fallback bucket, no error. */
     created_at: number;
+    /** Object or JSON string of `{ field: { original, updated } }`; renders a from→to diff, bad JSON renders none. */
     changes: unknown;
+    /** Manual notes listed under the card; editable and deletable through `onEditNote` and `onDeleteNote`. */
     notes?: TimelineNote[] | null;
+    /** Replaces the node icon derived from `title`/`action_from`. */
+    icon?: ReactNode;
+    /** Free text or node shown under the card header, above the changes diff. */
+    description?: ReactNode;
 }

package/dist/Components/Toaster/Toaster.d.ts

@@ -1,3 +1,4 @@
 import { ToasterChildren, ToasterContextType } from "./ToasterProps";
+/** Provides useToaster().showToast() — a transient, self-dismissing notification, not hover-triggered info (ToolTip) or a blocking confirmation (AlertDialog). */
 export default function ToasterProvider({ children }: ToasterChildren): import("react/jsx-runtime").JSX.Element;
 export declare const useToaster: () => ToasterContextType;

package/dist/Components/Toaster/Toaster.js

@@ -1,4 +1,7 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useToaster = void 0;
 exports.default = ToasterProvider;
@@ -8,9 +11,14 @@ const react_2 = require("@chakra-ui/react");
 const react_3 = require("@emotion/react");
 const framer_motion_1 = require("framer-motion");
 const lucide_react_1 = require("lucide-react");
+const Spinner_1 = __importDefault(require("../Spinner/Spinner"));
+const toastDuration_1 = require("./toastDuration");
+const motion_1 = require("../../Theme/chakra/motion");
+const motion_2 = require("../../Theme/tokens/primitives/motion");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const accentText_1 = require("../../Theme/tokens/builders/accentText");
-const statusTone_1 = require("../../Theme/tokens/builders/statusTone");
+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); }
@@ -18,100 +26,124 @@ const shrink = (0, react_3.keyframes) `
 `;
 // One-shot ring pulse on the status icon — a subtle "just happened" beat.
 const iconPulse = (0, react_3.keyframes) `
-  0%   { box-shadow: 0 0 0 0 var(--toast-pulse-color); }
-  70%  { box-shadow: 0 0 0 0.5rem transparent; }
-  100% { box-shadow: 0 0 0 0 transparent; }
+  0%   { transform: scale(1); opacity: 1; }
+  70%  { transform: scale(1.5); opacity: 0; }
+  100% { transform: scale(1.5); opacity: 0; }
 `;
 const MotionBox = (0, framer_motion_1.motion)(react_2.Box);
-/**
- * Presentational toast card. Owns hover state so the auto-dismiss countdown
- * pauses while the pointer is over the toast — the user can read and click an
- * action without the toast vanishing mid-reach.
- */
-function ToastCard({ onClose, title, description, actions, isClosable, duration, meta, colors: c, shadowLg, }) {
+const TOAST_ENTER = (0, motion_2.motionTransition)("enter", "out");
+const TOAST_EXIT = (0, motion_2.motionTransition)("exit", "in");
+// Presentational toast card — owns hover state so auto-dismiss pauses while the pointer is over it.
+function ToastCard({ onClose, title, description, actions, isClosable, duration, meta, colors: c, isUrgent, }) {
     const [paused, setPaused] = (0, react_1.useState)(false);
-    const mode = (0, accentText_1.isDarkCanvas)(c.backgroundColor.main) ? "dark" : "light";
-    const tone = (0, statusTone_1.resolveStatusTone)(meta.scale, mode);
+    const tone = (0, tone_1.resolveSoftTone)(c, meta.scale);
     const showProgress = typeof duration === "number" && duration > 0;
-    return ((0, jsx_runtime_1.jsxs)(MotionBox
-    // Refined entrance — slides in from the right and settles, never a hard pop.
-    // framer owns ALL transform animation; the CSS transition below is limited to
-    // box-shadow so it never tweens the same `transform` framer is driving frame
-    // by frame (that double-drive is what caused the ~200ms entry flicker). A
-    // tween (not spring) lands on an exact end transform, so there's no residual
-    // sub-pixel settle to shimmer.
-    , { 
-        // Refined entrance — slides in from the right and settles, never a hard pop.
-        // framer owns ALL transform animation; the CSS transition below is limited to
-        // box-shadow so it never tweens the same `transform` framer is driving frame
-        // by frame (that double-drive is what caused the ~200ms entry flicker). A
-        // tween (not spring) lands on an exact end transform, so there's no residual
-        // sub-pixel settle to shimmer.
-        initial: { opacity: 0, x: 24 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 24 }, transition: { duration: 0.24, ease: [0.22, 1, 0.36, 1] }, onHoverStart: () => setPaused(true), onHoverEnd: () => setPaused(false), position: "relative", 
-        // Surface token, not `colors.white`: `white` is a foreground token and stays
-        // white in dark mode. `background[50]` is #ffffff in light, near-black in dark.
-        bg: c.background[50], border: `0.063rem solid ${c.boxborder[200]}`, boxShadow: shadowLg !== null && shadowLg !== void 0 ? shadowLg : "lg", borderRadius: "2xl", overflow: "hidden", minW: "22.5rem", maxW: "26rem", willChange: "transform, opacity", sx: {
-            transition: "box-shadow 0.18s ease",
-            _hover: { boxShadow: "xl" },
-        }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { p: 3.5, gap: 3, align: actions ? "flex-start" : "center", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "2rem", minW: "2rem", borderRadius: "full", bg: tone.bg, color: tone.fg, sx: {
-                            ["--toast-pulse-color"]: tone.border,
-                            animation: `${iconPulse} 900ms ease-out 1`,
-                        }, children: meta.icon }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [title && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: 600, fontSize: "0.875rem", lineHeight: "1.3", color: c.text[800], children: title })), description && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "0.8125rem", lineHeight: "1.45", color: c.textMuted, mt: title ? "0.125rem" : 0, children: description })), actions && ((0, jsx_runtime_1.jsx)(react_2.Flex, { gap: 2, mt: 2.5, align: "center", wrap: "wrap", children: actions(onClose) }))] }), isClosable && ((0, jsx_runtime_1.jsx)(react_2.CloseButton, { onClick: onClose, size: "sm", color: c.textMuted, borderRadius: "md", alignSelf: "flex-start", _hover: {
-                            bg: c.gray[100],
-                            color: c.text[700],
-                        } }))] }), showProgress && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", bottom: 0, left: 0, right: 0, h: "0.1875rem", bg: meta.ink, opacity: 0.85, transformOrigin: "left", sx: {
-                    animation: `${shrink} ${duration}ms linear forwards`,
-                    animationPlayState: paused ? "paused" : "running",
-                } }))] }));
+    return ((0, jsx_runtime_1.jsx)(framer_motion_1.MotionConfig, { reducedMotion: "user", children: (0, jsx_runtime_1.jsxs)(MotionBox
+        // 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.
+        , { 
+            // 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 }, 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" },
+                ...(0, motion_1.reducedMotionSx)(),
+            }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { p: 3.5, gap: 3, align: actions ? "flex-start" : "center", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "2rem", minW: "2rem", borderRadius: "full", position: "relative", bg: (0, color_1.compositeOver)(tone.bg, c.surfaceRaised), color: tone.fg, sx: {
+                                "&::after": {
+                                    content: '""',
+                                    position: "absolute",
+                                    inset: 0,
+                                    borderRadius: "full",
+                                    bg: tone.border,
+                                    zIndex: -1,
+                                    opacity: 0,
+                                    animation: `${iconPulse} 900ms ease-out 1`,
+                                    ...(0, motion_1.reducedMotionSx)(),
+                                },
+                            }, children: meta.icon }), (0, jsx_runtime_1.jsxs)(react_2.VisuallyHidden, { children: [meta.label, ":"] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [title && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: 600, fontSize: "0.875rem", lineHeight: "1.3", color: c.text[800], children: title })), description && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "0.8125rem", lineHeight: "1.45", color: c.textMuted, mt: title ? "0.125rem" : 0, children: description })), actions && ((0, jsx_runtime_1.jsx)(react_2.Flex, { gap: 2, mt: 2.5, align: "center", wrap: "wrap", children: actions(onClose) }))] }), isClosable && ((0, jsx_runtime_1.jsx)(react_2.CloseButton, { onClick: onClose, size: "sm", color: c.textMuted, borderRadius: "md", alignSelf: "flex-start", _hover: {
+                                bg: c.gray[100],
+                                color: c.text[700],
+                            } }))] }), showProgress && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", bottom: 0, left: 0, right: 0, h: "0.1875rem", bg: meta.ink, opacity: 0.85, transformOrigin: "left", sx: {
+                        animation: `${shrink} ${duration}ms linear forwards`,
+                        animationPlayState: paused ? "paused" : "running",
+                        [motion_1.REDUCED_MOTION_QUERY]: { display: "none" },
+                    } }, duration))] }) }));
 }
+/** Provides useToaster().showToast() — a transient, self-dismissing notification, not hover-triggered info (ToolTip) or a blocking confirmation (AlertDialog). */
 function ToasterProvider({ children }) {
     const toast = (0, react_2.useToast)();
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const colors = theme.colors;
-    const shadowLg = theme.shadows.lg;
-    // Dark mode swaps the palette object, so this must re-derive per mode.
+    const live = (0, react_1.useRef)(new Map());
     const statusConfig = (0, react_1.useMemo)(() => ({
         success: {
             scale: colors.semantic.success,
             ink: colors.semanticText.success,
             icon: (0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { size: 18 }),
+            label: "Success",
         },
         error: {
             scale: colors.semantic.error,
             ink: colors.semanticText.error,
             icon: (0, jsx_runtime_1.jsx)(lucide_react_1.XCircle, { size: 18 }),
+            label: "Error",
         },
         warning: {
             scale: colors.semantic.warning,
             ink: colors.semanticText.warning,
             icon: (0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { size: 18 }),
+            label: "Warning",
         },
         info: {
             scale: colors.semantic.info,
             ink: colors.semanticText.info,
             icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { size: 18 }),
+            label: "Info",
         },
         loading: {
             scale: colors.primary,
             ink: colors.accentText,
-            icon: (0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "sm", thickness: "0.125rem", speed: "0.7s" }),
+            icon: (0, jsx_runtime_1.jsx)(Spinner_1.default, { size: "xs", color: "currentColor" }),
+            label: "Loading",
         },
     }), [colors]);
-    const showToast = (0, react_1.useCallback)(({ title, description, status = "info", duration = 5000, isClosable = true, position = "top-right", onClose, actions, }) => {
-        var _a;
-        const meta = (_a = statusConfig[status]) !== null && _a !== void 0 ? _a : statusConfig.info;
-        toast({
+    const optionsFor = (0, react_1.useCallback)((props) => {
+        const { title, description, status = "info", isClosable = true, actions } = props;
+        const duration = (0, toastDuration_1.toastDuration)(props);
+        return {
             duration,
             isClosable,
-            position,
-            onCloseComplete: onClose,
-            render: ({ onClose }) => ((0, jsx_runtime_1.jsx)(ToastCard, { onClose: onClose, title: title, description: description, actions: actions, isClosable: isClosable, duration: duration, meta: meta, colors: colors, shadowLg: shadowLg })),
+            render: ({ onClose }) => ((0, jsx_runtime_1.jsx)(ToastCard, { onClose: onClose, title: title, description: description, actions: actions, isClosable: isClosable, duration: duration, meta: statusConfig[status], colors: colors, isUrgent: status === "error" })),
+        };
+    }, [statusConfig, colors]);
+    const showToast = (0, react_1.useCallback)((props) => {
+        var _a;
+        const id = toast({
+            ...optionsFor(props),
+            position: (_a = props.position) !== null && _a !== void 0 ? _a : "top-right",
+            onCloseComplete: () => {
+                var _a;
+                live.current.delete(id);
+                (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+            },
         });
-    }, [toast, statusConfig, colors, shadowLg]);
-    // Memoized because this provider wraps the whole app: an unstable value re-renders every
-    // `useToaster()` consumer (92 files in crm-frontend) on each provider render, defeating the
-    // stable-children bail-out the consuming apps rely on.
-    const value = (0, react_1.useMemo)(() => ({ showToast }), [showToast]);
+        live.current.set(id, props);
+        return id;
+    }, [toast, optionsFor]);
+    const update = (0, react_1.useCallback)((id, patch) => {
+        const previous = live.current.get(id);
+        if (!previous)
+            return;
+        const next = { ...previous, ...patch };
+        if (patch.status !== undefined && !("duration" in patch))
+            delete next.duration;
+        live.current.set(id, next);
+        toast.update(id, optionsFor(next));
+    }, [toast, optionsFor]);
+    const close = (0, react_1.useCallback)((id) => toast.close(id), [toast]);
+    // NOTE: memoized — an unstable value re-renders every useToaster() consumer (92 files in crm-frontend) on each render.
+    const value = (0, react_1.useMemo)(() => ({ showToast, update, close }), [showToast, update, close]);
     return ((0, jsx_runtime_1.jsx)(ToasterContext.Provider, { value: value, children: children }));
 }
 const useToaster = () => {

package/dist/Components/Toaster/ToasterProps.d.ts

@@ -1,8 +1,17 @@
-import { ToastProps } from "@chakra-ui/react";
+import { ToastId, ToastProps } from "@chakra-ui/react";
 import { ReactNode } from "react";
-export type ToasterToastProps = Pick<ToastProps, 'description' | 'title' | 'isClosable' | 'duration' | 'children' | 'onClose'> & {
+/** Picks the icon and accent; "loading" never auto-dismisses unless a duration is passed. */
+export type ToasterStatus = "success" | "error" | "warning" | "info" | "loading";
+/** Options for showToast(); `children` is dead (never rendered) — pass `description` instead. */
+export type ToasterToastProps = Pick<ToastProps, 'description' | 'title' | 'isClosable' | 'onClose'> & {
+    /** @deprecated Never rendered by showToast; pass `description`. */
+    children?: ToastProps['children'];
+    /** Defaults to "top-right"; fixed at show time — update() cannot move a toast. */
     position?: "top" | "bottom" | "top-right" | "top-left" | "bottom-right" | "bottom-left";
-    status?: "success" | "error" | "warning" | "info" | "loading";
+    /** Defaults to "info". */
+    status?: ToasterStatus;
+    /** Auto-dismiss delay in ms; defaults to 5000, or null (stay until closed) for status "loading". */
+    duration?: number | null;
     /**
      * Optional action buttons rendered under the message (Jira-style "View" /
      * "Copy link" affordances). Receives the toast's own `onClose` so an action
@@ -11,9 +20,16 @@ export type ToasterToastProps = Pick<ToastProps, 'description' | 'title' | 'isCl
      */
     actions?: (onClose: () => void) => ReactNode;
 };
+/** Shape of the ToasterContext value; useToaster() throws if called outside a mounted ToasterProvider. */
 export interface ToasterContextType {
-    showToast: (children: ToasterToastProps) => void;
+    /** Shows a toast and returns its id, for a later update() or close(). */
+    showToast: (children: ToasterToastProps) => ToastId;
+    /** Merges props into a live toast (e.g. loading → success); a new status without a duration re-derives the default. */
+    update: (id: ToastId, props: Partial<ToasterToastProps>) => void;
+    /** Dismisses one toast by id. */
+    close: (id: ToastId) => void;
 }
+/** Props for ToasterProvider — just the app subtree it wraps in the toast context. */
 export interface ToasterChildren {
     children: ReactNode;
 }

package/dist/Components/Toaster/toastDuration.d.ts

@@ -0,0 +1,4 @@
+import type { ToasterToastProps } from "./ToasterProps";
+export declare const DEFAULT_TOAST_DURATION = 5000;
+/** An explicit duration wins; otherwise loading toasts stay up and the rest dismiss after 5s. */
+export declare const toastDuration: ({ duration, status }: Pick<ToasterToastProps, "duration" | "status">) => number | null;

package/dist/Components/Toaster/toastDuration.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toastDuration = exports.DEFAULT_TOAST_DURATION = void 0;
+exports.DEFAULT_TOAST_DURATION = 5000;
+/** An explicit duration wins; otherwise loading toasts stay up and the rest dismiss after 5s. */
+const toastDuration = ({ duration, status }) => duration !== undefined ? duration : status === "loading" ? null : exports.DEFAULT_TOAST_DURATION;
+exports.toastDuration = toastDuration;

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

@@ -1,4 +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. */
 declare const TableToggle: React.FC<ViewToggleProps>;
 export default TableToggle;