pixelize-design-library 2.4.1 → 2.4.2-beta.1

package/dist/Components/Timeline/Timeline.js

@@ -6,249 +6,236 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 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 functions_1 = require("../../Utils/functions");
 const NoteTextArea_1 = __importDefault(require("../NoteTextArea/NoteTextArea"));
-const react_2 = require("react");
+const react_3 = require("react");
+// Building an Intl formatter costs ~50-200µs on a low-end phone; one per format, not per event.
+const DATE_FMT = new Intl.DateTimeFormat("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+});
+const TIME_FMT = new Intl.DateTimeFormat("en-US", {
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true,
+});
+const formatTimestamp = (timestamp, type) => {
+    if (typeof timestamp === "string" && !timestamp.match(/^\d+$/)) {
+        const date = new Date(timestamp);
+        if (!isNaN(date.getTime())) {
+            if (type === "date") {
+                return DATE_FMT.format(date);
+            }
+            else if (type === "time") {
+                return TIME_FMT.format(date);
+            }
+            return date.toLocaleString();
+        }
+    }
+    const parsedTimestamp = parseInt(String(timestamp), 10);
+    const date = new Date(parsedTimestamp);
+    if (isNaN(date.getTime())) {
+        console.warn("Invalid timestamp:", timestamp);
+        return "Invalid Date";
+    }
+    if (type === "date") {
+        return DATE_FMT.format(date);
+    }
+    else if (type === "time") {
+        return TIME_FMT.format(date);
+    }
+    return date.toLocaleString();
+};
+// A semantic color scale chosen by the action title (created / updated / delete).
+const getEventScale = (colors, title) => {
+    switch ((title || "").toLowerCase()) {
+        case "created":
+            return colors.semantic.success;
+        case "updated":
+            return colors.semantic.warning;
+        case "delete":
+        case "deleted":
+            return colors.semantic.error;
+        default:
+            return colors.primary;
+    }
+};
+// Action-title icon (what happened); falls back to the source icon below.
+const getActionIcon = (title, size) => {
+    switch ((title || "").toLowerCase()) {
+        case "created":
+            return (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: size });
+        case "updated":
+            return (0, jsx_runtime_1.jsx)(lucide_react_1.PencilLine, { size: size });
+        case "delete":
+        case "deleted":
+            return (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: size });
+        default:
+            return null;
+    }
+};
+// Source icon (where it came from) — preserves the original mapping.
+const getSourceIcon = (event, size) => {
+    switch (event.action_from) {
+        case "Accounts":
+            return (0, jsx_runtime_1.jsx)(lucide_react_1.IndianRupee, { size: size });
+        case "Notes":
+            return (0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { size: size });
+        default:
+            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 groupEventsByDate = (events) => events.reduce((groups, event, globalIndex) => {
+    const date = formatTimestamp(event.created_at, "date");
+    if (date !== "Invalid Date") {
+        if (!groups[date])
+            groups[date] = [];
+        groups[date].push({ event, globalIndex });
+    }
+    return groups;
+}, {});
+const parseChanges = (changes) => {
+    if (!changes || changes === "null")
+        return [];
+    try {
+        const parsed = typeof changes === "string" ? JSON.parse(changes) : changes;
+        if (typeof parsed !== "object" || parsed === null)
+            return [];
+        return Object.entries(parsed).map(([key, value]) => {
+            var _a;
+            const record = value;
+            return {
+                field: key,
+                from: (_a = record === null || record === void 0 ? void 0 : record.original) !== null && _a !== void 0 ? _a : null,
+                to: record === null || record === void 0 ? void 0 : record.updated,
+            };
+        });
+    }
+    catch (error) {
+        console.error("Error parsing changes:", error);
+        return [];
+    }
+};
+const initials = (name) => (name || "")
+    .trim()
+    .split(/\s+/)
+    .map((p) => p[0])
+    .slice(0, 2)
+    .join("")
+    .toUpperCase() || "?";
+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
+// Cheap alternative to windowing: off-screen cards skip layout and paint.
+const OFFSCREEN_SKIP = {
+    contentVisibility: "auto",
+    containIntrinsicSize: "0 96px",
+};
+// A single manual note attached to a log — read view + edit/delete on hover or focus,
+// swapping to an inline NoteTextArea while editing.
+// Declared at module scope: inside Timeline's body it remounts every note on each render.
+const NoteItem = react_2.default.memo(function NoteItem({ note, event, index, colors, activeEditNoteId, setActiveEditNoteId, editNoteLoading, deletingNoteId, onEditNote, onDeleteNote, }) {
+    var _a, _b;
+    const isEditing = activeEditNoteId === note.log_note_id;
+    const isDeleting = deletingNoteId != null && deletingNoteId === note.log_note_id;
+    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]),
+                                        }, 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: {
+                                            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") : ""] }))] }));
+});
+// 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 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[300]}`, 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) => {
+                                    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) => {
+                            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) => {
+                        onAddNote === null || onAddNote === void 0 ? void 0 : onAddNote(note, title, files, event, index);
+                        // When the consumer wires addNoteLoading, the effect closes the
+                        // editor on completion; otherwise close immediately.
+                        if (addNoteLoading === undefined)
+                            setActiveNoteEventIndex(null);
+                    }, handleCancel: () => setActiveNoteEventIndex(null) }) }))] }));
+});
 const Timeline = ({ timelineEvents, onEventClick, onAddNote, onEditNote, onDeleteNote, showAddNote = false, addNoteLoading, editNoteLoading, deletingNoteId, }) => {
-    var _a, _b, _c, _d, _e, _f, _g;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const colors = (_a = theme.colors) !== null && _a !== void 0 ? _a : {};
+    const colors = theme.colors;
     const isMobile = (0, react_1.useBreakpointValue)({ base: true, md: false });
-    const [activeNoteEventIndex, setActiveNoteEventIndex] = (0, react_2.useState)(null);
-    const [activeEditNoteId, setActiveEditNoteId] = (0, react_2.useState)(null);
+    const [activeNoteEventIndex, setActiveNoteEventIndex] = (0, react_3.useState)(null);
+    const [activeEditNoteId, setActiveEditNoteId] = (0, react_3.useState)(null);
     // Auto-close the add editor once the create request finishes (true -> false).
-    const prevAddLoading = (0, react_2.useRef)(addNoteLoading);
-    (0, react_2.useEffect)(() => {
+    const prevAddLoading = (0, react_3.useRef)(addNoteLoading);
+    (0, react_3.useEffect)(() => {
         if (prevAddLoading.current && !addNoteLoading) {
             setActiveNoteEventIndex(null);
         }
         prevAddLoading.current = addNoteLoading;
     }, [addNoteLoading]);
     // Auto-close the edit editor once the update request finishes.
-    const prevEditLoading = (0, react_2.useRef)(editNoteLoading);
-    (0, react_2.useEffect)(() => {
+    const prevEditLoading = (0, react_3.useRef)(editNoteLoading);
+    (0, react_3.useEffect)(() => {
         if (prevEditLoading.current && !editNoteLoading) {
             setActiveEditNoteId(null);
         }
         prevEditLoading.current = editNoteLoading;
     }, [editNoteLoading]);
-    const formatTimestamp = (timestamp, type) => {
-        if (typeof timestamp === "string" && !timestamp.match(/^\d+$/)) {
-            const date = new Date(timestamp);
-            if (!isNaN(date.getTime())) {
-                if (type === "date") {
-                    return date.toLocaleDateString("en-US", {
-                        month: "long",
-                        day: "numeric",
-                        year: "numeric",
-                    });
-                }
-                else if (type === "time") {
-                    return date.toLocaleTimeString("en-US", {
-                        hour: "numeric",
-                        minute: "2-digit",
-                        hour12: true,
-                    });
-                }
-                return date.toLocaleString();
-            }
-        }
-        const parsedTimestamp = parseInt(String(timestamp), 10);
-        const date = new Date(parsedTimestamp);
-        if (isNaN(date.getTime())) {
-            console.warn("Invalid timestamp:", timestamp);
-            return "Invalid Date";
-        }
-        if (type === "date") {
-            return date.toLocaleDateString("en-US", {
-                month: "long",
-                day: "numeric",
-                year: "numeric",
-            });
-        }
-        else if (type === "time") {
-            return date.toLocaleTimeString("en-US", {
-                hour: "numeric",
-                minute: "2-digit",
-                hour12: true,
-            });
-        }
-        return date.toLocaleString();
-    };
-    // A semantic color scale chosen by the action title (created / updated / delete).
-    const getEventScale = (title) => {
-        var _a, _b, _c, _d, _e, _f;
-        switch ((title || "").toLowerCase()) {
-            case "created":
-                return (_b = (_a = colors.semantic) === null || _a === void 0 ? void 0 : _a.success) !== null && _b !== void 0 ? _b : colors.green;
-            case "updated":
-                return (_d = (_c = colors.semantic) === null || _c === void 0 ? void 0 : _c.warning) !== null && _d !== void 0 ? _d : colors.orange;
-            case "delete":
-            case "deleted":
-                return (_f = (_e = colors.semantic) === null || _e === void 0 ? void 0 : _e.error) !== null && _f !== void 0 ? _f : colors.red;
-            default:
-                return colors.primary;
-        }
-    };
-    // Action-title icon (what happened); falls back to the source icon below.
-    const getActionIcon = (title, size) => {
-        switch ((title || "").toLowerCase()) {
-            case "created":
-                return (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: size });
-            case "updated":
-                return (0, jsx_runtime_1.jsx)(lucide_react_1.PencilLine, { size: size });
-            case "delete":
-            case "deleted":
-                return (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: size });
-            default:
-                return null;
-        }
-    };
-    // Source icon (where it came from) — preserves the original mapping.
-    const getSourceIcon = (event, size) => {
-        switch (event.action_from) {
-            case "Accounts":
-                return (0, jsx_runtime_1.jsx)(lucide_react_1.IndianRupee, { size: size });
-            case "Notes":
-                return (0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { size: size });
-            default:
-                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 groupEventsByDate = (events) => events.reduce((groups, event) => {
-        const date = formatTimestamp(event.created_at, "date");
-        if (date !== "Invalid Date") {
-            if (!groups[date])
-                groups[date] = [];
-            groups[date].push(event);
-        }
-        return groups;
-    }, {});
-    const groupedEvents = groupEventsByDate(timelineEvents);
-    const parseChanges = (changes) => {
-        if (!changes || changes === "null")
-            return [];
-        try {
-            const parsed = typeof changes === "string" ? JSON.parse(changes) : changes;
-            if (typeof parsed !== "object" || parsed === null)
-                return [];
-            return Object.entries(parsed).map(([key, value]) => {
-                var _a;
-                const record = value;
-                return {
-                    field: key,
-                    from: (_a = record === null || record === void 0 ? void 0 : record.original) !== null && _a !== void 0 ? _a : null,
-                    to: record === null || record === void 0 ? void 0 : record.updated,
-                };
-            });
-        }
-        catch (error) {
-            console.error("Error parsing changes:", error);
-            return [];
-        }
-    };
-    const initials = (name) => (name || "")
-        .trim()
-        .split(/\s+/)
-        .map((p) => p[0])
-        .slice(0, 2)
-        .join("")
-        .toUpperCase() || "?";
+    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: (_b = colors.gray) === null || _b === void 0 ? void 0 : _b[500], children: [(0, jsx_runtime_1.jsx)(react_1.Box, { boxSize: "2.75rem", borderRadius: "full", bg: (_c = colors.gray) === null || _c === void 0 ? void 0 : _c[100], display: "flex", alignItems: "center", justifyContent: "center", color: (_d = colors.gray) === null || _d === void 0 ? void 0 : _d[400], 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: "0.875rem", fontWeight: 500, children: "No timeline events to display" })] }));
     }
-    // A single manual note attached to a log — read view + hover edit/delete,
-    // swapping to an inline NoteTextArea while editing.
-    const NoteItem = ({ note, event, index, }) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
-        const [hovered, setHovered] = (0, react_2.useState)(false);
-        const isEditing = activeEditNoteId === note.log_note_id;
-        const isDeleting = deletingNoteId != null && deletingNoteId === note.log_note_id;
-        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, { onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), position: "relative", bg: (_c = colors.gray) === null || _c === void 0 ? void 0 : _c[50], border: `0.063rem solid ${(_e = (_d = colors.boxborder) === null || _d === void 0 ? void 0 : _d[200]) !== null && _e !== void 0 ? _e : (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[200]}`, borderRadius: "0.5rem", px: 2.5, py: 2, opacity: isDeleting ? 0.6 : 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: (_g = colors.primary) === null || _g === void 0 ? void 0 : _g[500], 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: (_j = (_h = colors.text) === null || _h === void 0 ? void 0 : _h[800]) !== null && _j !== void 0 ? _j : (_k = colors.gray) === null || _k === void 0 ? void 0 : _k[800], noOfLines: 1, children: note.title })), (onEditNote || onDeleteNote) && (hovered || isDeleting) && ((0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", gap: 0.5, ml: "auto", flexShrink: 0, children: isDeleting ? ((0, jsx_runtime_1.jsx)(react_1.Spinner, { size: "xs", color: (_l = colors.gray) === null || _l === void 0 ? void 0 : _l[500] })) : ((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", display: "inline-flex", alignItems: "center", justifyContent: "center", p: 1, borderRadius: "0.375rem", color: (_m = colors.gray) === null || _m === void 0 ? void 0 : _m[500], bg: "transparent", cursor: "pointer", _hover: {
-                                                bg: (_o = colors.primary) === null || _o === void 0 ? void 0 : _o[50],
-                                                color: (_p = colors.primary) === null || _p === void 0 ? void 0 : _p[600],
-                                            }, 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", display: "inline-flex", alignItems: "center", justifyContent: "center", p: 1, borderRadius: "0.375rem", color: (_q = colors.gray) === null || _q === void 0 ? void 0 : _q[500], bg: "transparent", cursor: "pointer", _hover: {
-                                                bg: (_t = (_s = (_r = colors.semantic) === null || _r === void 0 ? void 0 : _r.error) === null || _s === void 0 ? void 0 : _s[50]) !== null && _t !== void 0 ? _t : (_u = colors.red) === null || _u === void 0 ? void 0 : _u[50],
-                                                color: (_x = (_w = (_v = colors.semantic) === null || _v === void 0 ? void 0 : _v.error) === null || _w === void 0 ? void 0 : _w[600]) !== null && _x !== void 0 ? _x : (_y = colors.red) === null || _y === void 0 ? void 0 : _y[600],
-                                            }, 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: (_0 = (_z = colors.text) === null || _z === void 0 ? void 0 : _z[700]) !== null && _0 !== void 0 ? _0 : (_1 = colors.gray) === null || _1 === void 0 ? void 0 : _1[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) => {
-                        var _a, _b, _c;
-                        return ((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: (_a = colors.primary) === null || _a === void 0 ? void 0 : _a[50], color: (_b = colors.primary) === null || _b === void 0 ? void 0 : _b[700], fontSize: "0.625rem", maxW: "100%", _hover: { bg: (_c = colors.primary) === null || _c === void 0 ? void 0 : _c[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: (_2 = colors.gray) === null || _2 === void 0 ? void 0 : _2[500], 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") : ""] }))] }));
-    };
-    // 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).
-    const EventCard = ({ event, index, accent, }) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
-        const scale = getEventScale(event.title);
-        const changes = parseChanges(event.changes);
-        const clickable = typeof onEventClick === "function";
-        const isActiveNote = activeNoteEventIndex === index;
-        const [isHovered, setIsHovered] = (0, react_2.useState)(false);
-        return ((0, jsx_runtime_1.jsxs)(react_1.Box, { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", zIndex: 1, bg: (_b = (_a = colors.background) === null || _a === void 0 ? void 0 : _a[50]) !== null && _b !== void 0 ? _b : "#fff", border: `0.063rem solid ${(_d = (_c = colors.boxborder) === null || _c === void 0 ? void 0 : _c[300]) !== null && _d !== void 0 ? _d : (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[200]}`, borderInlineStartWidth: accent === "left" ? "0.1875rem" : undefined, borderInlineEndWidth: accent === "right" ? "0.1875rem" : undefined, borderInlineStartColor: accent === "left" ? scale === null || scale === void 0 ? void 0 : scale[400] : undefined, borderInlineEndColor: accent === "right" ? scale === null || scale === void 0 ? void 0 : scale[400] : undefined, borderRadius: "0.625rem", px: 3.5, py: 2.5, transition: "all 0.15s ease", cursor: clickable ? "pointer" : "default", onClick: clickable ? () => onEventClick(event, index) : undefined, _hover: {
-                        borderColor: (_f = scale === null || scale === void 0 ? void 0 : scale[300]) !== null && _f !== void 0 ? _f : (_g = colors.gray) === null || _g === void 0 ? void 0 : _g[300],
-                        boxShadow: (_h = theme.shadows) === null || _h === void 0 ? void 0 : _h.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: (_k = (_j = colors.text) === null || _j === void 0 ? void 0 : _j[800]) !== null && _k !== void 0 ? _k : (_l = colors.gray) === null || _l === void 0 ? void 0 : _l[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, (_m = scale === null || scale === void 0 ? void 0 : scale[50]) !== null && _m !== void 0 ? _m : "#ffffff"), bg: scale === null || scale === void 0 ? void 0 : scale[50], border: `0.063rem solid ${(_o = scale === null || scale === void 0 ? void 0 : scale[200]) !== null && _o !== void 0 ? _o : (_p = colors.gray) === null || _p === void 0 ? void 0 : _p[200]}`, borderRadius: "full", px: 2, py: 1, children: event.title })] }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.6875rem", color: (_q = colors.gray) === null || _q === void 0 ? void 0 : _q[500], 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) => {
-                                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
-                                return ((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: (_b = (_a = colors.text) === null || _a === void 0 ? void 0 : _a[700]) !== null && _b !== void 0 ? _b : (_c = colors.gray) === null || _c === void 0 ? void 0 : _c[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: (_d = colors.gray) === null || _d === void 0 ? void 0 : _d[500], bg: (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[50], borderRadius: "0.25rem", 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: (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[400], 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)(((_h = (_g = colors.semantic) === null || _g === void 0 ? void 0 : _g.success) !== null && _h !== void 0 ? _h : colors.green), ((_l = (_k = (_j = colors.semantic) === null || _j === void 0 ? void 0 : _j.success) === null || _k === void 0 ? void 0 : _k[50]) !== null && _l !== void 0 ? _l : (_m = colors.green) === null || _m === void 0 ? void 0 : _m[50])), bg: (_q = (_p = (_o = colors.semantic) === null || _o === void 0 ? void 0 : _o.success) === null || _p === void 0 ? void 0 : _p[50]) !== null && _q !== void 0 ? _q : (_r = colors.green) === null || _r === void 0 ? void 0 : _r[50], borderRadius: "0.25rem", 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: (_t = (_s = (_r = colors.primary) === null || _r === void 0 ? void 0 : _r.opacity) === null || _s === void 0 ? void 0 : _s[16]) !== null && _t !== void 0 ? _t : (_u = colors.primary) === null || _u === void 0 ? void 0 : _u[50], color: (_v = colors.primary) === null || _v === void 0 ? void 0 : _v[600], 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: (_w = colors.gray) === null || _w === void 0 ? void 0 : _w[500], children: ["by", " ", (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: (_y = (_x = colors.text) === null || _x === void 0 ? void 0 : _x[700]) !== null && _y !== void 0 ? _y : (_z = colors.gray) === null || _z === void 0 ? void 0 : _z[700], fontWeight: 500, children: (0, functions_1.toWords)(event.action_by) })] })] }), showAddNote && (isHovered || isActiveNote) && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", onClick: (e) => {
-                                        e.stopPropagation();
-                                        setActiveNoteEventIndex(isActiveNote ? null : index);
-                                    }, px: 2, py: 1, borderRadius: "0.375rem", fontSize: "0.75rem", fontWeight: 600, color: (_0 = colors.primary) === null || _0 === void 0 ? void 0 : _0[700], bg: "transparent", cursor: "pointer", _hover: {
-                                        bg: (_1 = colors.primary) === null || _1 === void 0 ? void 0 : _1[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 ${(_3 = (_2 = colors.gray) === null || _2 === void 0 ? void 0 : _2[100]) !== null && _3 !== void 0 ? _3 : (_4 = colors.boxborder) === null || _4 === void 0 ? void 0 : _4[200]}`, children: event.notes.map((note, noteIndex) => {
-                                var _a;
-                                return ((0, jsx_runtime_1.jsx)(NoteItem, { note: note, event: event, index: index }, (_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) => {
-                            onAddNote === null || onAddNote === void 0 ? void 0 : onAddNote(note, title, files, event, index);
-                            // When the consumer wires addNoteLoading, the effect closes the
-                            // editor on completion; otherwise close immediately.
-                            if (addNoteLoading === undefined)
-                                setActiveNoteEventIndex(null);
-                        }, handleCancel: () => setActiveNoteEventIndex(null) }) }))] }));
-    };
-    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
     // -------------------------------------------------------------------------
     // 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) => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-                return ((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: (_a = colors.gray) === null || _a === void 0 ? void 0 : _a[500], bg: (_b = colors.gray) === null || _b === void 0 ? void 0 : _b[50], border: `0.063rem solid ${(_d = (_c = colors.boxborder) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[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: (_g = (_f = colors.boxborder) === null || _f === void 0 ? void 0 : _f[200]) !== null && _g !== void 0 ? _g : (_h = colors.gray) === null || _h === void 0 ? void 0 : _h[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: (_k = (_j = colors.gray) === null || _j === void 0 ? void 0 : _j[300]) !== null && _k !== void 0 ? _k : (_l = colors.boxborder) === null || _l === void 0 ? void 0 : _l[400], transform: "translateX(-50%)" }), groupedEvents[date].map((event, index) => {
-                                    var _a, _b, _c, _d, _e;
-                                    const scale = getEventScale(event.title);
-                                    const globalIndex = timelineEvents.indexOf(event);
-                                    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "flex-start", gap: 3, mb: index === groupedEvents[date].length - 1 ? 0 : 3, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: NODE, minW: NODE, borderRadius: "full", bg: scale === null || scale === void 0 ? void 0 : scale[50], color: scale === null || scale === void 0 ? void 0 : scale[600], border: `0.125rem solid ${(_b = (_a = colors.background) === null || _a === void 0 ? void 0 : _a[50]) !== null && _b !== void 0 ? _b : "#fff"}`, boxShadow: `0 0 0 0.063rem ${(_c = scale === null || scale === void 0 ? void 0 : scale[200]) !== null && _c !== void 0 ? _c : (_d = colors.gray) === null || _d === void 0 ? void 0 : _d[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" }) })] }, `${(_e = event.logs_id) !== null && _e !== void 0 ? _e : date}-${index}`));
-                                })] })] }, date));
-            }) }));
+        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) => {
+                                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}`));
+                            })] })] }, 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: (_f = (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[300]) !== null && _f !== void 0 ? _f : (_g = colors.boxborder) === null || _g === void 0 ? void 0 : _g[400], transform: "translateX(-50%)" }), Object.keys(groupedEvents).map((date) => {
-                var _a, _b, _c, _d, _e, _f, _g;
-                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: (_a = colors.gray) === null || _a === void 0 ? void 0 : _a[600], bg: (_c = (_b = colors.background) === null || _b === void 0 ? void 0 : _b[50]) !== null && _c !== void 0 ? _c : "#fff", border: `0.063rem solid ${(_e = (_d = colors.boxborder) === null || _d === void 0 ? void 0 : _d[300]) !== null && _e !== void 0 ? _e : (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[200]}`, boxShadow: (_g = theme.shadows) === null || _g === void 0 ? void 0 : _g.xs, borderRadius: "full", px: 4, py: 1.5, whiteSpace: "nowrap", children: date }) }), groupedEvents[date].map((event, index) => {
-                            var _a, _b, _c, _d, _e, _f, _g;
+    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[300]}`, 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(event.title);
-                            const globalIndex = timelineEvents.indexOf(event);
-                            return ((0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", mb: index === groupedEvents[date].length - 1 ? 0 : 5, minH: NODE, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: "1.375rem", h: "0.125rem", w: "0.8125rem", bg: (_a = scale === null || scale === void 0 ? void 0 : scale[300]) !== null && _a !== void 0 ? _a : (_b = colors.gray) === null || _b === void 0 ? void 0 : _b[300], left: isLeft
+                            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 === null || scale === void 0 ? void 0 : scale[50], color: scale === null || scale === void 0 ? void 0 : scale[600], border: `0.125rem solid ${(_d = (_c = colors.background) === null || _c === void 0 ? void 0 : _c[50]) !== null && _d !== void 0 ? _d : "#fff"}`, boxShadow: `0 0 0 0.063rem ${(_e = scale === null || scale === void 0 ? void 0 : scale[200]) !== null && _e !== void 0 ? _e : (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[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" }) })] }, `${(_g = event.logs_id) !== null && _g !== void 0 ? _g : 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 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));
             })] }));
 };

package/dist/Components/Timeline/TimelineProps.d.ts

@@ -43,4 +43,3 @@ export interface TimelineEvents {
     changes: unknown;
     notes?: TimelineNote[] | null;
 }
-//# sourceMappingURL=TimelineProps.d.ts.map

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

@@ -1,4 +1,3 @@
 import { ToasterChildren, ToasterContextType } from "./ToasterProps";
 export default function ToasterProvider({ children }: ToasterChildren): import("react/jsx-runtime").JSX.Element;
 export declare const useToaster: () => ToasterContextType;
-//# sourceMappingURL=Toaster.d.ts.map