pixelize-design-library 3.0.1-beta.1 → 3.1.1

package/dist/esm/Components/Timeline/Timeline.js

@@ -0,0 +1,263 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Spinner, Text, Tooltip, useBreakpointValue, } from "@chakra-ui/react";
+import { ArrowRight, FileText, IndianRupee, Paperclip, Pencil, PencilLine, Plus, StickyNote, Trash2, Volleyball, } from "lucide-react";
+import React from "react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { bandOn, cardRule } from "../../Theme/tokens/builders/planeStep.js";
+import { AA_NON_TEXT, liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
+import { fontSizes } from "../../Theme/tokens/primitives/typography.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { toWords } from "../../Utils/functions.js";
+import NoteTextArea from "../NoteTextArea/NoteTextArea.js";
+import { useEffect, useMemo, useRef, useState } from "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 _jsx(Plus, { size: size });
+        case "updated":
+            return _jsx(PencilLine, { size: size });
+        case "delete":
+        case "deleted":
+            return _jsx(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 _jsx(IndianRupee, { size: size });
+        case "Notes":
+            return _jsx(FileText, { size: size });
+        default:
+            return _jsx(Volleyball, { size: 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 = 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") {
+        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 CARD_TRANSITION = 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
+// 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.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;
+    const noteBox = bandOn(colors.gray[50], colors.background[50]);
+    const noteChip = bandOn(colors.primary[50], noteBox);
+    const noteChipInk = accentTextOnCanvas(colors.primary, noteChip);
+    const chipHover = bandOn(colors.primary[100], noteChip);
+    const chipHoverInk = accentTextOnCanvas(colors.primary, chipHover);
+    if (isEditing) {
+        return (_jsx(Box, { children: _jsx(NoteTextArea, { 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 (_jsxs(Box, { position: "relative", zIndex: 1, bg: noteBox, border: `${BORDER_WIDTHS.hairline} solid ${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: [_jsxs(Flex, { align: "center", gap: 1.5, mb: note.note ? 1 : 0, children: [_jsx(Box, { as: "span", color: accentTextOnCanvas(colors.primary, noteBox), display: "inline-flex", children: _jsx(StickyNote, { size: 12 }) }), note.title && (_jsx(Text, { fontSize: fontSizes["xs-minus"], fontWeight: 700, color: colors.text[800], noOfLines: 1, children: note.title })), (onEditNote || onDeleteNote) && (_jsx(Flex, { className: "timeline-note-actions", align: "center", gap: 0.5, ml: "auto", flexShrink: 0, opacity: isDeleting ? 1 : 0, transition: REVEAL_TRANSITION, sx: reducedMotionSx(), children: isDeleting ? (_jsx(Spinner, { size: "xs", color: colors.textMuted })) : (_jsxs(_Fragment, { children: [onEditNote && (_jsx(Tooltip, { label: "Edit", placement: "top", hasArrow: true, children: _jsx(Box, { as: "button", type: "button", "aria-label": "Edit note", sx: 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: _jsx(Pencil, { size: 12 }) }) })), onDeleteNote && (_jsx(Tooltip, { label: "Delete", placement: "top", hasArrow: true, children: _jsx(Box, { as: "button", type: "button", "aria-label": "Delete note", sx: 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: 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: _jsx(Trash2, { size: 12 }) }) }))] })) }))] }), note.note && (_jsx(Text, { fontSize: fontSizes["xs-minus"], color: colors.text[700], whiteSpace: "pre-wrap", children: note.note })), note.attachments && note.attachments.length > 0 && (_jsx(Flex, { wrap: "wrap", gap: 1.5, mt: 1.5, children: note.attachments.map((att, attIndex) => (_jsxs(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: [_jsx(Paperclip, { size: 10 }), _jsx(Box, { as: "span", noOfLines: 1, maxW: "9rem", children: att.name || "attachment" })] }, attIndex))) })), (note.created_by || note.created_at) && (_jsxs(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.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 = useMemo(() => parseChanges(event.changes), [event.changes]);
+    const clickable = typeof onEventClick === "function";
+    const actor = formatName(event.action_by);
+    const addNoteHover = bandOn(colors.primary[50], colors.background[50]);
+    const changeFromFill = bandOn(colors.gray[50], colors.background[50]);
+    return (_jsxs(Box, { _hover: { ".timeline-add-note": { opacity: 1 } }, _focusWithin: { ".timeline-add-note": { opacity: 1 } }, children: [_jsxs(Box, { position: "relative", zIndex: 1, bg: colors.background[50], border: `${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: reducedMotionSx({ transform: "none" }),
+                }), children: [clickable && (_jsx(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: focusVisibleStyles(colors) })), _jsxs(Flex, { align: "center", justify: "space-between", gap: 2, flexWrap: "wrap", children: [_jsxs(Flex, { align: "center", gap: 2, minW: 0, children: [_jsx(Text, { fontSize: fontSizes["xs-plus"], fontWeight: 600, color: colors.text[800], noOfLines: 1, children: event.action_from }), _jsx(Box, { as: "span", fontSize: fontSizes["xs-minus"], fontWeight: 600, lineHeight: "1", textTransform: "capitalize", color: accentTextOnCanvas(scale, scale[50]), bg: scale[50], border: `${BORDER_WIDTHS.hairline} solid ${scale[200]}`, borderRadius: "full", px: 2, py: 1, children: event.title })] }), _jsx(Text, { fontSize: fontSizes["xs-minus"], color: colors.textMuted, whiteSpace: "nowrap", children: formatTimestamp(event.created_at, "time") })] }), event.description != null && (_jsx(Box, { mt: 1.5, fontSize: fontSizes.xs, color: colors.text[700], children: event.description })), changes.length > 0 && (_jsx(Flex, { direction: "column", gap: 1, mt: 2, children: changes.map((c, i) => (_jsxs(Flex, { align: "center", gap: 1.5, fontSize: fontSizes["xs-minus"], lineHeight: "1.4", flexWrap: "wrap", children: [_jsx(Text, { fontWeight: 600, color: colors.text[700], children: toWords(c.field) }), c.from !== null && c.from !== undefined && (_jsxs(_Fragment, { children: [_jsx(Box, { as: "span", color: 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) }), _jsx(Box, { as: "span", color: colors.textMuted, display: "inline-flex", children: _jsx(ArrowRight, { size: 11 }) })] })), _jsx(Box, { as: "span", color: 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}`))) })), _jsxs(Flex, { align: "center", justify: "space-between", gap: 2, mt: 2, children: [_jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Tooltip, { label: actor, placement: "top", hasArrow: true, children: _jsx(Flex, { align: "center", justify: "center", boxSize: "1.5rem", minW: "1.5rem", borderRadius: "full", bg: colors.primary.opacity[16], color: accentTextOnCanvas(colors.primary, colors.background[50]), fontSize: MIN_TEXT, fontWeight: 700, children: initials(actor) }) }), _jsxs(Text, { fontSize: fontSizes["xs-minus"], color: colors.textMuted, children: ["by", " ", _jsx(Box, { as: "span", color: colors.text[700], fontWeight: 500, children: actor })] })] }), showAddNote && (_jsx(Box, { className: "timeline-add-note", as: "button", type: "button", onClick: (e) => {
+                                    e.stopPropagation();
+                                    setActiveNoteEventIndex(isActiveNote ? null : index);
+                                }, position: "relative", zIndex: 1, opacity: isActiveNote ? 1 : 0, transition: REVEAL_TRANSITION, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, px: 2, py: 1, borderRadius: "md", fontSize: fontSizes.xs, fontWeight: 600, color: accentTextOnCanvas(colors.primary, colors.background[50]), bg: "transparent", cursor: "pointer", _hover: {
+                                    bg: addNoteHover,
+                                    color: addNoteHover === colors.primary[50]
+                                        ? undefined
+                                        : accentTextOnCanvas(colors.primary, addNoteHover),
+                                }, children: isActiveNote ? "Hide note" : "Add note" }))] }), event.notes && event.notes.length > 0 && (_jsx(Flex, { direction: "column", gap: 2, mt: 2, pt: 2, borderTop: `${BORDER_WIDTHS.hairline} solid ${cardRule(colors)}`, children: event.notes.map((note, noteIndex) => {
+                            var _a;
+                            return (_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 && (_jsx(Box, { mt: 2, children: _jsx(NoteTextArea, { 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) }) }))] }));
+});
+/** 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 } = useCustomTheme();
+    const isMobile = useBreakpointValue({ base: true, md: false });
+    const [activeNoteEventIndex, setActiveNoteEventIndex] = useState(null);
+    const [activeEditNoteId, setActiveEditNoteId] = useState(null);
+    // Auto-close the add editor once the create request finishes (true -> false).
+    const prevAddLoading = useRef(addNoteLoading);
+    useEffect(() => {
+        if (prevAddLoading.current && !addNoteLoading) {
+            setActiveNoteEventIndex(null);
+        }
+        prevAddLoading.current = addNoteLoading;
+    }, [addNoteLoading]);
+    // Auto-close the edit editor once the update request finishes.
+    const prevEditLoading = useRef(editNoteLoading);
+    useEffect(() => {
+        if (prevEditLoading.current && !editNoteLoading) {
+            setActiveEditNoteId(null);
+        }
+        prevEditLoading.current = editNoteLoading;
+    }, [editNoteLoading]);
+    const groupedEvents = useMemo(() => groupEventsByDate(timelineEvents !== null && timelineEvents !== void 0 ? timelineEvents : []), [timelineEvents]);
+    if (!timelineEvents || timelineEvents.length === 0) {
+        return (_jsxs(Flex, { direction: "column", align: "center", justify: "center", py: 12, gap: 2, color: colors.textMuted, children: [_jsx(Box, { boxSize: "2.75rem", borderRadius: "full", bg: colors.gray[100], display: "flex", alignItems: "center", justifyContent: "center", color: accentTextOnCanvas(colors.gray, colors.gray[100]), children: _jsx(Volleyball, { size: 20 }) }), _jsx(Text, { fontSize: fontSizes.sm, fontWeight: 500, children: emptyText })] }));
+    }
+    // -------------------------------------------------------------------------
+    // Mobile: single left rail (alternating doesn't read well on narrow widths)
+    // -------------------------------------------------------------------------
+    if (isMobile) {
+        return (_jsx(Box, { position: "relative", maxW: "100%", px: 2, py: 2, children: Object.keys(groupedEvents).map((date) => (_jsxs(Box, { mb: 2, children: [_jsxs(Flex, { align: "center", gap: 3, mb: 4, mt: 2, children: [_jsx(Text, { fontSize: fontSizes.xs, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: accentTextOnCanvas(colors.gray, colors.gray[50]), bg: colors.gray[50], border: `${BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}`, borderRadius: "full", px: 3, py: 1, whiteSpace: "nowrap", children: date }), _jsx(Box, { flex: "1", h: BORDER_WIDTHS.hairline, bg: colors.boxborder[200] })] }), _jsxs(Box, { position: "relative", children: [_jsx(Box, { position: "absolute", left: NODE_RADIUS, top: "0.5rem", bottom: "0.5rem", w: "0.1875rem", borderRadius: "full", bg: liftToContrast(colors.gray[300], colors.backgroundColor.main, AA_NON_TEXT), transform: "translateX(-50%)" }), groupedEvents[date].map(({ event, globalIndex }, index) => {
+                                var _a;
+                                const scale = getEventScale(colors, event.title);
+                                return (_jsxs(Flex, { align: "flex-start", gap: 3, mb: index === groupedEvents[date].length - 1 ? 0 : 3, sx: OFFSCREEN_SKIP, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: NODE, minW: NODE, borderRadius: "full", bg: scale[50], color: accentTextOnCanvas(scale, scale[50]), border: `0.125rem solid ${colors.background[50]}`, boxShadow: `0 0 0 ${BORDER_WIDTHS.hairline} ${scale[200]}`, zIndex: 1, children: getIcon(event, 14) }), _jsx(Box, { flex: "1", minW: 0, children: _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 (_jsxs(Box, { position: "relative", maxW: "60rem", mx: "auto", px: 4, py: 2, children: [_jsx(Box, { position: "absolute", left: "50%", top: "0.5rem", bottom: "0.5rem", w: "0.015rem", borderRadius: "full", bg: liftToContrast(colors.gray[300], colors.backgroundColor.main, AA_NON_TEXT), transform: "translateX(-50%)" }), Object.keys(groupedEvents).map((date) => (_jsxs(Box, { mb: 2, children: [_jsx(Flex, { justify: "center", mb: 5, mt: 3, position: "relative", zIndex: 2, children: _jsx(Text, { fontSize: fontSizes.xs, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: colors.textMuted, bg: colors.background[50], border: `${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 (_jsxs(Box, { position: "relative", mb: index === groupedEvents[date].length - 1 ? 0 : 5, minH: NODE, sx: OFFSCREEN_SKIP, children: [_jsx(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 }), _jsx(Flex, { position: "absolute", left: "50%", top: "0.5rem", transform: "translateX(-50%)", align: "center", justify: "center", boxSize: NODE, borderRadius: "full", bg: scale[50], color: accentTextOnCanvas(scale, scale[50]), border: `0.125rem solid ${colors.background[50]}`, boxShadow: `0 0 0 ${BORDER_WIDTHS.hairline} ${scale[200]}`, zIndex: 2, children: getIcon(event, 15) }), _jsx(Box, { position: "relative", zIndex: 1, w: `calc(50% - ${SPINE_GAP})`, ml: isLeft ? 0 : `calc(50% + ${SPINE_GAP})`, children: _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)))] }));
+};
+export default Timeline;

package/dist/esm/Components/Timeline/TimelineProps.js

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

package/dist/esm/Components/Toaster/Toaster.js

@@ -0,0 +1,148 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useMemo, useRef, useState, } from "react";
+import { Box, CloseButton, Flex, Text, VisuallyHidden, useToast, } from "@chakra-ui/react";
+import { keyframes } from "@emotion/react";
+import { MotionConfig, motion } from "framer-motion";
+import { CheckCircle2, AlertTriangle, Info, XCircle, } from "lucide-react";
+import Spinner from "../Spinner/Spinner.js";
+import { toastDuration } from "./toastDuration.js";
+import { REDUCED_MOTION_QUERY, reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { motionTransition, transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { resolveSoftTone } from "../../Theme/tokens/builders/tone.js";
+import { compositeOver } from "../../Theme/tokens/builders/color.js";
+import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
+const ToasterContext = createContext(undefined);
+const shrink = keyframes `
+  from { transform: scaleX(1); }
+  to { transform: scaleX(0); }
+`;
+// One-shot ring pulse on the status icon — a subtle "just happened" beat.
+const iconPulse = keyframes `
+  0%   { transform: scale(1); opacity: 1; }
+  70%  { transform: scale(1.5); opacity: 0; }
+  100% { transform: scale(1.5); opacity: 0; }
+`;
+const MotionBox = motion(Box);
+const TOAST_ENTER = motionTransition("enter", "out");
+const TOAST_EXIT = 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] = useState(false);
+    const tone = resolveSoftTone(c, meta.scale);
+    const showProgress = typeof duration === "number" && duration > 0;
+    return (_jsx(MotionConfig, { reducedMotion: "user", children: _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: `${BORDER_WIDTHS.hairline} solid ${c.boxborder[200]}`, boxShadow: "md", borderRadius: "xl", overflow: "hidden", minW: "22.5rem", maxW: "26rem", sx: {
+                isolation: "isolate",
+                transition: transitionFor(["box-shadow"]),
+                _hover: { boxShadow: "lg" },
+                ...reducedMotionSx(),
+            }, children: [_jsxs(Flex, { p: 3.5, gap: 3, align: actions ? "flex-start" : "center", children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "2rem", minW: "2rem", borderRadius: "full", position: "relative", bg: 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`,
+                                    ...reducedMotionSx(),
+                                },
+                            }, children: meta.icon }), _jsxs(VisuallyHidden, { children: [meta.label, ":"] }), _jsxs(Box, { flex: "1", minW: 0, children: [title && (_jsx(Text, { fontWeight: 600, fontSize: "0.875rem", lineHeight: "1.3", color: c.text[800], children: title })), description && (_jsx(Text, { fontSize: "0.8125rem", lineHeight: "1.45", color: c.textMuted, mt: title ? "0.125rem" : 0, children: description })), actions && (_jsx(Flex, { gap: 2, mt: 2.5, align: "center", wrap: "wrap", children: actions(onClose) }))] }), isClosable && (_jsx(CloseButton, { onClick: onClose, size: "sm", color: c.textMuted, borderRadius: "md", alignSelf: "flex-start", _hover: {
+                                bg: c.gray[100],
+                                color: c.text[700],
+                            } }))] }), showProgress && (_jsx(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",
+                        [REDUCED_MOTION_QUERY]: { display: "none" },
+                    } }, duration))] }) }));
+}
+/** Provides useToaster().showToast() — a transient, self-dismissing notification, not hover-triggered info (ToolTip) or a blocking confirmation (AlertDialog). */
+export default function ToasterProvider({ children }) {
+    const toast = useToast();
+    const theme = useCustomTheme();
+    const colors = theme.colors;
+    const live = useRef(new Map());
+    const statusConfig = useMemo(() => ({
+        success: {
+            scale: colors.semantic.success,
+            ink: colors.semanticText.success,
+            icon: _jsx(CheckCircle2, { size: 18 }),
+            label: "Success",
+        },
+        error: {
+            scale: colors.semantic.error,
+            ink: colors.semanticText.error,
+            icon: _jsx(XCircle, { size: 18 }),
+            label: "Error",
+        },
+        warning: {
+            scale: colors.semantic.warning,
+            ink: colors.semanticText.warning,
+            icon: _jsx(AlertTriangle, { size: 18 }),
+            label: "Warning",
+        },
+        info: {
+            scale: colors.semantic.info,
+            ink: colors.semanticText.info,
+            icon: _jsx(Info, { size: 18 }),
+            label: "Info",
+        },
+        loading: {
+            scale: colors.primary,
+            ink: colors.accentText,
+            icon: _jsx(Spinner, { size: "xs", color: "currentColor" }),
+            label: "Loading",
+        },
+    }), [colors]);
+    const optionsFor = useCallback((props) => {
+        const { title, description, status = "info", isClosable = true, actions } = props;
+        const duration = toastDuration(props);
+        return {
+            duration,
+            isClosable,
+            render: ({ onClose }) => (_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 = 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);
+            },
+        });
+        live.current.set(id, props);
+        return id;
+    }, [toast, optionsFor]);
+    const update = 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 = 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 = useMemo(() => ({ showToast, update, close }), [showToast, update, close]);
+    return (_jsx(ToasterContext.Provider, { value: value, children: children }));
+}
+export const useToaster = () => {
+    const context = useContext(ToasterContext);
+    if (!context) {
+        throw new Error("useToaster must be used within a ToasterProvider");
+    }
+    return context;
+};

package/dist/esm/Components/Toaster/ToasterProps.js

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

package/dist/esm/Components/Toaster/toastDuration.js

@@ -0,0 +1,3 @@
+export const DEFAULT_TOAST_DURATION = 5000;
+/** An explicit duration wins; otherwise loading toasts stay up and the rest dismiss after 5s. */
+export const toastDuration = ({ duration, status }) => duration !== undefined ? duration : status === "loading" ? null : DEFAULT_TOAST_DURATION;

package/dist/esm/Components/Toggle/TableToggle.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, IconButton } from "@chakra-ui/react";
+import { Columns3, Table2 } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
+import ToolTip from "../ToolTip/ToolTip.js";
+import { useSlidingPill } from "../SegmentedControl/useSlidingPill.js";
+import { BUTTON_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
+import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { tableToggleInk } from "./tableToggleInk.js";
+const MODES = ["grid", "list"];
+const TRACK_HEIGHT = BUTTON_SIZES.sm.height;
+const SEGMENT_HEIGHT = `calc(${TRACK_HEIGHT} - 0.25rem)`;
+const INK_TRANSITION = transitionFor(["color"], "base");
+const PILL_TRANSITION = transitionFor(["transform", "width"], "base", "out");
+/** Two icon-only IconButtons (Grid/List), aria-pressed marks the active one; shares variant with SegmentedControl. */
+const TableToggle = ({ value, onChange, variant = "default" }) => {
+    const theme = useCustomTheme();
+    const { colors } = theme;
+    const isBrandSlide = variant === "brandSlide";
+    const isUnderlineSlide = variant === "underlineSlide";
+    const hasIndicator = isBrandSlide || isUnderlineSlide;
+    const brandFill = resolveFilledSurface(colors.primary, colors);
+    const { track, hover, restInk, hoverInk } = tableToggleInk(colors);
+    const selectedIndex = MODES.indexOf(value);
+    const { trackRef, itemRefs: refs, pill } = useSlidingPill(hasIndicator, selectedIndex, []);
+    const styles = {
+        container: {
+            display: "flex",
+            alignItems: "center",
+            bg: isBrandSlide ? colors.primary.opacity[8] : isUnderlineSlide ? "transparent" : track,
+            p: isUnderlineSlide ? "0" : "0.125rem",
+            borderRadius: isUnderlineSlide ? "none" : "lg",
+            borderBottom: isUnderlineSlide ? `${BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}` : undefined,
+            height: TRACK_HEIGHT,
+            gap: isUnderlineSlide ? "0" : "0.125rem",
+            width: "6.3rem",
+            position: "relative",
+        },
+        button: (mode) => ({
+            position: "relative",
+            zIndex: 1,
+            bg: hasIndicator ? "transparent" : value === mode ? colors.backgroundColor.light : "transparent",
+            boxShadow: hasIndicator ? "none" : value === mode ? "md" : "none",
+            color: isBrandSlide
+                ? value === mode
+                    ? brandFill.color
+                    : restInk
+                : value === mode
+                    ? colors.accentText
+                    : restInk,
+            borderRadius: isUnderlineSlide ? "none" : "lg",
+            height: SEGMENT_HEIGHT,
+            border: hasIndicator ? "none" : "1px solid",
+            borderColor: hasIndicator
+                ? "transparent"
+                : value === mode
+                    ? colors.primary.opacity[32]
+                    : "transparent",
+            padding: "0.313rem 0.813rem",
+            _hover: {
+                bg: hasIndicator
+                    ? "transparent"
+                    : value === mode
+                        ? colors.backgroundColor.light
+                        : hover,
+                color: isBrandSlide
+                    ? value === mode
+                        ? brandFill.color
+                        : hoverInk
+                    : value === mode
+                        ? colors.accentText
+                        : hoverInk,
+            },
+            transition: INK_TRANSITION,
+        }),
+    };
+    return (_jsxs(Box, { ref: trackRef, ...styles.container, children: [isBrandSlide && pill && (_jsx(Box, { "aria-hidden": "true", position: "absolute", top: "0.125rem", left: 0, h: SEGMENT_HEIGHT, w: `${pill.width}px`, borderRadius: "lg", bg: brandFill.fill, boxShadow: `0 0.125rem 0.5rem ${colors.boxShadow.primary}`, transform: `translateX(${pill.left}px)`, transition: PILL_TRANSITION })), isUnderlineSlide && pill && (_jsx(Box, { "aria-hidden": "true", position: "absolute", bottom: `-${BORDER_WIDTHS.hairline}`, left: 0, h: "0.125rem", w: `${pill.width}px`, borderRadius: "full", bg: colors.primary[500], transform: `translateX(${pill.left}px)`, transition: PILL_TRANSITION })), _jsx(ToolTip, { label: "Grid View", placement: "top", fontSize: "xs", hasArrow: true, children: _jsx(IconButton, { ref: (node) => {
+                        refs.current[0] = node;
+                    }, "aria-label": "Grid View", "aria-pressed": value === "grid", icon: _jsx(Table2, { size: "1.25rem" }), variant: "ghost", onClick: () => onChange("grid"), ...styles.button("grid") }) }), _jsx(ToolTip, { label: "List View", placement: "top", fontSize: "xs", hasArrow: true, children: _jsx(IconButton, { ref: (node) => {
+                        refs.current[1] = node;
+                    }, "aria-label": "List View", "aria-pressed": value === "list", icon: _jsx(Columns3, { size: "1.25rem" }), variant: "ghost", onClick: () => onChange("list"), ...styles.button("list") }) })] }));
+};
+export default TableToggle;

package/dist/esm/Components/Toggle/TableToggleProps.js

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

package/dist/esm/Components/Toggle/tableToggleInk.js

@@ -0,0 +1,24 @@
+import { AA_NON_TEXT, liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+import { segmentedTrackStep } from "../SegmentedControl/segmentedInk.js";
+// NOTE: each rung keeps its offset from the track, so Zinc's [400] track matches the others' [600].
+const RUNGS = {
+    600: { hover: 400, rest: 800, hoverInk: 900 },
+    500: { hover: 300, rest: 700, hoverInk: 800 },
+    400: { hover: 200, rest: 600, hoverInk: 700 },
+    300: { hover: 100, rest: 500, hoverInk: 600 },
+    200: { hover: 50, rest: 400, hoverInk: 500 },
+    100: { hover: 50, rest: 300, hoverInk: 400 },
+    50: { hover: 50, rest: 200, hoverInk: 300 },
+};
+export const tableToggleInk = (colors) => {
+    const step = segmentedTrackStep(colors);
+    const rungs = RUNGS[step];
+    const track = colors.background[step];
+    const hover = colors.background[rungs.hover];
+    return {
+        track,
+        hover,
+        restInk: liftToContrast(colors.background[rungs.rest], track, AA_NON_TEXT),
+        hoverInk: liftToContrast(colors.background[rungs.hoverInk], hover, AA_NON_TEXT),
+    };
+};

package/dist/esm/Components/ToggleSwitch/ToggleSwitch.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
+import { Box, Flex } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { AA_NON_TEXT, liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
+import { useFieldIds } from "../Common/useFieldIds.js";
+import FieldMessage from "../Common/FieldMessage.js";
+import { TextLabel } from "../Common/FormLabel.js";
+const SIZES = {
+    sm: { w: "2rem", h: "1.125rem", knob: "0.875rem", travel: "0.75rem" },
+    md: { w: "2.375rem", h: "1.375rem", knob: "1.125rem", travel: "0.875rem" },
+    lg: { w: "3rem", h: "1.75rem", knob: "1.375rem", travel: "1.25rem" },
+};
+const toggleOnEnter = (event) => {
+    if (event.key !== "Enter")
+        return;
+    event.preventDefault();
+    event.currentTarget.click();
+};
+/** On/off switch: a native checkbox with role="switch", label, helper and error row; `ref` is that `<input>`. */
+const ToggleSwitch = forwardRef(function ToggleSwitch({ isChecked, defaultChecked = false, onChange, isDisabled = false, isReadOnly = false, size = "md", colorScheme = "primary", id, label, fieldLabel, isInformation, informationMessage, labelPosition = "end", helperText, error = false, errorMessage, isRequired = false, name, value, onFocus, onBlur, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, m, mt, mb, ml, mr, mx, my, }, ref) {
+    const { colors } = useCustomTheme();
+    const dims = SIZES[size];
+    const ids = useFieldIds(id, { error, errorMessage, helperText });
+    const describedBy = [ariaDescribedBy, ids.describedBy].filter(Boolean).join(" ") || undefined;
+    const motion = transitionFor(["background-color", "border-color"]);
+    const filled = resolveFilledSurface(colors[colorScheme], colors);
+    const offTrack = liftToContrast(colors.background[600], colors.background[50], AA_NON_TEXT);
+    const [internalChecked, setInternalChecked] = useState(defaultChecked);
+    const checked = isChecked !== null && isChecked !== void 0 ? isChecked : internalChecked;
+    const handleChange = (event) => {
+        if (isReadOnly)
+            return;
+        const next = event.target.checked;
+        if (isChecked === undefined)
+            setInternalChecked(next);
+        onChange === null || onChange === void 0 ? void 0 : onChange(next, event);
+    };
+    const track = (_jsxs(Box, { position: "relative", display: "inline-flex", flexShrink: 0, w: dims.w, h: dims.h, sx: { "input:focus-visible + span": focusVisibleRing(colors) }, children: [_jsx(Box, { ref: ref, as: "input", type: "checkbox", role: "switch", ...ids.controlProps, "aria-describedby": describedBy, "aria-checked": checked, "aria-readonly": isReadOnly ? true : undefined, "aria-label": ariaLabel, name: name, value: value, checked: checked, disabled: isDisabled, onChange: handleChange, onKeyDown: toggleOnEnter, onFocus: onFocus, onBlur: onBlur, position: "absolute", inset: 0, w: "100%", h: "100%", m: 0, opacity: 0, zIndex: 1, cursor: isDisabled || isReadOnly ? "not-allowed" : "pointer" }), _jsx(Box, { as: "span", "aria-hidden": "true", position: "relative", display: "inline-flex", alignItems: "center", w: "100%", h: "100%", borderRadius: "full", borderWidth: "1px", borderStyle: "solid", borderColor: error ? colors.semanticText.error : checked ? filled.fill : colors.boxborder[500], bg: checked ? filled.fill : offTrack, transition: motion, sx: reducedMotionSx(), children: _jsx(Box, { as: "span", position: "absolute", left: "0.125rem", w: dims.knob, h: dims.knob, borderRadius: "full", bg: checked ? filled.color : colors.white, boxShadow: "sm", transition: transitionFor(["transform"], "base"), transform: checked ? `translateX(${dims.travel})` : "translateX(0)", sx: reducedMotionSx() }) })] }));
+    const labelNode = label && (_jsx(TextLabel, { label: label, id: ids.inputId, isRequired: isRequired && !fieldLabel, inline: true }));
+    const fieldLabelNode = fieldLabel && (_jsx(TextLabel, { label: fieldLabel, id: ids.inputId, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired }));
+    return (_jsxs(Box, { display: "inline-flex", flexDirection: "column", opacity: isDisabled ? 0.5 : 1, m: m, mt: mt, mb: mb, ml: ml, mr: mr, mx: mx, my: my, children: [fieldLabelNode, _jsxs(Flex, { align: "center", gap: 2, children: [labelPosition === "start" && labelNode, track, labelPosition === "end" && labelNode] }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+});
+ToggleSwitch.displayName = "ToggleSwitch";
+export default ToggleSwitch;

package/dist/esm/Components/ToggleSwitch/ToggleSwitchProps.js

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

package/dist/esm/Components/ToolTip/OverflowToolTip.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ToolTip from "./ToolTip.js";
+/** Tooltip that appears only when its child text is actually truncated; sugar over `<ToolTip overflowOnly>`. */
+export default function OverflowToolTip(props) {
+    return _jsx(ToolTip, { ...props, overflowOnly: true });
+}