pixelize-design-library 2.4.2-beta.62 → 2.4.2-beta.63

package/dist/esm/Components/Table/components/TableActions.js

@@ -3,6 +3,7 @@ import React, { forwardRef, useEffect, useId, useLayoutEffect, useRef, useState
 import { Button, IconButton, Popover, PopoverAnchor, PopoverBody, PopoverContent, Portal, VStack, } from "@chakra-ui/react";
 import { EllipsisVertical, ExternalLink, Pencil, Trash2 } from "lucide-react";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { raisedRule } from "../../../Theme/tokens/builders/surfaceRaised.js";
 const assignRef = (ref, value) => {
     if (typeof ref === "function")
         ref(value);
@@ -53,11 +54,11 @@ const TableActions = React.memo(({ row }) => {
     // ✅ if row itself is missing, render nothing
     if (!row)
         return null;
-    return (_jsxs("div", { ref: ref, children: [_jsx(IconButton, { ref: triggerRef, id: `popover-trigger-${popoverId}`, "aria-label": "Actions", "aria-haspopup": "dialog", "aria-expanded": isOpen, "aria-controls": `popover-content-${popoverId}`, color: theme.colors.text[900], icon: _jsx(EllipsisVertical, { size: 17 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" }, onClick: () => (isOpen ? handleClose() : handleOpen()) }), isOpen && (_jsxs(Popover, { id: popoverId, placement: "bottom-start", isOpen: true, onClose: handleClose, closeOnBlur: false, returnFocusOnClose: false, children: [_jsx(PopoverAnchor, { children: _jsx(TriggerAnchor, { target: triggerRef }) }), _jsx(Portal, { children: _jsx(PopoverContent, { w: "auto", minW: "100px", boxShadow: "lg", p: 0, zIndex: 999, bg: theme.colors.surfaceRaised, children: _jsx(PopoverBody, { p: 0, m: 0, children: _jsxs(VStack, { align: "stretch", spacing: 1, p: 0, m: 0, children: [row.onLink && (_jsxs(Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", borderBottom: `1px solid ${theme.colors.boxborder[200]}`, borderRadius: 0, gap: 2, onClick: () => {
+    return (_jsxs("div", { ref: ref, children: [_jsx(IconButton, { ref: triggerRef, id: `popover-trigger-${popoverId}`, "aria-label": "Actions", "aria-haspopup": "dialog", "aria-expanded": isOpen, "aria-controls": `popover-content-${popoverId}`, color: theme.colors.text[900], icon: _jsx(EllipsisVertical, { size: 17 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" }, onClick: () => (isOpen ? handleClose() : handleOpen()) }), isOpen && (_jsxs(Popover, { id: popoverId, placement: "bottom-start", isOpen: true, onClose: handleClose, closeOnBlur: false, returnFocusOnClose: false, children: [_jsx(PopoverAnchor, { children: _jsx(TriggerAnchor, { target: triggerRef }) }), _jsx(Portal, { children: _jsx(PopoverContent, { w: "auto", minW: "100px", boxShadow: "lg", p: 0, zIndex: 999, bg: theme.colors.surfaceRaised, children: _jsx(PopoverBody, { p: 0, m: 0, children: _jsxs(VStack, { align: "stretch", spacing: 1, p: 0, m: 0, children: [row.onLink && (_jsxs(Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", borderBottom: `1px solid ${raisedRule(theme.colors)}`, borderRadius: 0, gap: 2, onClick: () => {
                                                 var _a;
                                                 (_a = row.onLink) === null || _a === void 0 ? void 0 : _a.call(row, row);
                                                 handleClose();
-                                            }, children: [_jsx(ExternalLink, { size: 17 }), " View"] })), row.onEdit && (_jsxs(Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, borderBottom: `1px solid ${theme.colors.boxborder[200]}`, borderRadius: 0, onClick: () => {
+                                            }, children: [_jsx(ExternalLink, { size: 17 }), " View"] })), row.onEdit && (_jsxs(Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, borderBottom: `1px solid ${raisedRule(theme.colors)}`, borderRadius: 0, onClick: () => {
                                                 var _a;
                                                 (_a = row.onEdit) === null || _a === void 0 ? void 0 : _a.call(row, row);
                                                 handleClose();

package/dist/esm/Components/Table/filters/CompactSelect.js

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Box, Text, Input, Popover, PopoverTrigger, PopoverContent, PopoverBody, VStack, Portal } from "@chakra-ui/react";
 import { ChevronDown, ChevronUp, Check } from "lucide-react";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { raisedRule } from "../../../Theme/tokens/builders/surfaceRaised.js";
 import { listRowBackgrounds } from "../../../Theme/tokens/builders/rowStates.js";
 import { optionRowSpec, OPTION_ROW_RADIUS } from "../../../Theme/tokens/primitives/optionRowSizes.js";
 import { optionRowInk, optionRowWeight } from "../../Select/optionRowInk.js";
@@ -54,7 +55,7 @@ const CompactSelect = ({ options, value, placeholder = "Select", height = "22px"
                                             e.preventDefault();
                                             focusOption(0);
                                         }
-                                    }, sx: { fontSize: "0.75rem", height: "22px" } }), _jsxs(Box, { role: "listbox", "aria-label": placeholder, maxH: "12rem", overflowY: "auto", borderTop: "1px solid", borderColor: theme.colors.boxborder[200], onKeyDown: handleListKeyDown, children: [filtered.map((opt, i) => {
+                                    }, sx: { fontSize: "0.75rem", height: "22px" } }), _jsxs(Box, { role: "listbox", "aria-label": placeholder, maxH: "12rem", overflowY: "auto", borderTop: "1px solid", borderColor: raisedRule(theme.colors), onKeyDown: handleListKeyDown, children: [filtered.map((opt, i) => {
                                             const selected = (value === null || value === void 0 ? void 0 : value.id) === opt.id;
                                             const isActive = i === activeIndex;
                                             const rowBg = selected

package/dist/esm/Components/Table/settings/TableSettings.js

@@ -5,13 +5,17 @@ import { motion } from "framer-motion";
 import ManageColumns from "./ManageColumns.js";
 import Button from "../../Button/Button.js";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { raisedRule } from "../../../Theme/tokens/builders/surfaceRaised.js";
 import { scrollbarStyles } from "../../../Theme/tokens/builders/scrollbar.js";
 import { columnLabelText } from "../columnLabel.js";
 import { Settings, Check } from "lucide-react";
 import ToolTip from "../../ToolTip/ToolTip.js";
 import { listRowBackgrounds } from "../../../Theme/tokens/builders/rowStates.js";
-import { transitionFor } from "../../../Theme/tokens/primitives/motion.js";
+import { motionTransition, transitionFor } from "../../../Theme/tokens/primitives/motion.js";
+import { usePrefersReducedMotion } from "../../../Theme/chakra/motion.js";
 const MotionModalContent = motion(ModalContent);
+const SHEET_ENTER = motionTransition("enter", "out");
+const SHEET_EXIT = motionTransition("exit", "in");
 const DENSITY_OPTIONS = [
     { value: "compact", label: "Compact", desc: "Tight rows — fit more data on screen" },
     { value: "normal", label: "Normal", desc: "Balanced default spacing" },
@@ -19,6 +23,7 @@ const DENSITY_OPTIONS = [
 ];
 const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, groupBy, }) => {
     const theme = useCustomTheme();
+    const sheetOffset = usePrefersReducedMotion() ? 0 : "-100%";
     const rowBackgrounds = useMemo(() => listRowBackgrounds(theme.colors), [theme.colors]);
     const childInputMethodsRef = useRef({});
     const [settingsOpen, setSettingsOpen] = useState(false);
@@ -52,7 +57,7 @@ const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, g
     return (_jsxs(Box, { children: [_jsx(ToolTip, { label: "Table Settings", placement: "top", children: _jsx(IconButton, { "aria-label": "Table settings", icon: _jsx(Settings, { size: "1.25rem" }), onClick: handleOpen, variant: "unstyled", minW: "auto", h: "auto", display: "flex", justifyContent: "flex-end", cursor: "pointer", transition: transitionFor(["color", "transform"], "base"), color: theme.colors.text[500], _hover: {
                         transform: "scale(1.1)",
                         color: theme.colors.accentText
-                    } }) }), _jsxs(Modal, { isOpen: settingsOpen, onClose: () => setSettingsOpen(false), size: { base: "full", md: "md" }, children: [_jsx(ModalOverlay, {}), _jsxs(MotionModalContent, { mt: "0", top: "0", left: { base: 0, md: "auto" }, right: { base: 0, md: "auto" }, position: "absolute", borderTopRadius: "none", initial: { y: "-100%", opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: "-100%", opacity: 0 }, transition: { duration: 0.4, ease: "easeOut" }, padding: "0", minW: { base: "auto", md: "620px" }, minH: { base: "auto", md: "520px" }, maxH: "90vh", display: "flex", flexDirection: "column", bg: theme.colors.surfaceRaised, overflow: "hidden", children: [_jsx(ModalCloseButton, { top: 3, right: 3, zIndex: 2 }), _jsxs(Tabs, { index: selectedIndex, onChange: setSelectedIndex, variant: "unstyled", display: "flex", flexDirection: "column", flex: "1", minH: 0, children: [_jsxs(Box, { pt: 4, px: 4, children: [_jsx(Text, { fontWeight: 600, fontSize: "md", mb: 3, children: "Table Settings" }), _jsxs(TabList, { gap: 0, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: [_jsx(Tab, { ...tabStyle, children: "Density" }), _jsx(Tab, { ...tabStyle, children: "Manage Columns" }), _jsx(Tab, { ...tabStyle, children: "Group" })] })] }), _jsx(ModalBody, { px: 4, py: 3, flex: "1", overflowY: "auto", sx: scrollbarStyles(theme.colors), children: _jsxs(TabPanels, { children: [_jsx(TabPanel, { px: 0, py: 1, children: _jsx(Flex, { direction: "column", gap: 2, children: DENSITY_OPTIONS.map((opt) => {
+                    } }) }), _jsxs(Modal, { isOpen: settingsOpen, onClose: () => setSettingsOpen(false), size: { base: "full", md: "md" }, children: [_jsx(ModalOverlay, {}), _jsxs(MotionModalContent, { mt: "0", top: "0", left: { base: 0, md: "auto" }, right: { base: 0, md: "auto" }, position: "absolute", borderTopRadius: "none", initial: { y: sheetOffset, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: sheetOffset, opacity: 0, transition: SHEET_EXIT }, transition: SHEET_ENTER, padding: "0", minW: { base: "auto", md: "620px" }, minH: { base: "auto", md: "520px" }, maxH: "90vh", display: "flex", flexDirection: "column", bg: theme.colors.surfaceRaised, overflow: "hidden", children: [_jsx(ModalCloseButton, { top: 3, right: 3, zIndex: 2 }), _jsxs(Tabs, { index: selectedIndex, onChange: setSelectedIndex, variant: "unstyled", display: "flex", flexDirection: "column", flex: "1", minH: 0, children: [_jsxs(Box, { pt: 4, px: 4, children: [_jsx(Text, { fontWeight: 600, fontSize: "md", mb: 3, children: "Table Settings" }), _jsxs(TabList, { gap: 0, borderBottom: "1px solid", borderColor: raisedRule(theme.colors), children: [_jsx(Tab, { ...tabStyle, children: "Density" }), _jsx(Tab, { ...tabStyle, children: "Manage Columns" }), _jsx(Tab, { ...tabStyle, children: "Group" })] })] }), _jsx(ModalBody, { px: 4, py: 3, flex: "1", overflowY: "auto", sx: scrollbarStyles(theme.colors), children: _jsxs(TabPanels, { children: [_jsx(TabPanel, { px: 0, py: 1, children: _jsx(Flex, { direction: "column", gap: 2, children: DENSITY_OPTIONS.map((opt) => {
                                                             const selected = density === opt.value;
                                                             return (_jsxs(Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "lg", border: "1px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[200], bg: selected ? rowBackgrounds.selected : theme.colors.transparent, transition: transitionFor(["background-color", "border-color"]), _hover: { borderColor: theme.colors.accentText }, onClick: () => onDensityChange === null || onDensityChange === void 0 ? void 0 : onDensityChange(opt.value), children: [_jsx(Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[500], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && _jsx(Check, { size: 11, color: theme.colors.accentText, strokeWidth: 3 }) }), _jsxs(Box, { textAlign: "left", children: [_jsx(Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700], children: opt.label }), _jsx(Text, { fontSize: "11px", color: theme.colors.textMuted, children: opt.desc })] })] }, opt.value));
                                                         }) }) }), _jsx(TabPanel, { px: 0, py: 0, children: _jsx(Box, { sx: {
@@ -73,6 +78,6 @@ const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, g
                                                                 var _a;
                                                                 const selected = selectedGroup === opt.id;
                                                                 return (_jsxs(Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "lg", border: "1px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[200], bg: selected ? rowBackgrounds.selected : theme.colors.transparent, transition: transitionFor(["background-color", "border-color"]), _hover: { borderColor: theme.colors.accentText }, onClick: () => setSelectedGroup(opt.id), children: [_jsx(Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[500], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && _jsx(Check, { size: 11, color: theme.colors.accentText, strokeWidth: 3 }) }), _jsx(Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700], textAlign: "left", children: opt.label })] }, String((_a = opt.id) !== null && _a !== void 0 ? _a : "__none__")));
-                                                            }) })] })] }) })] }), _jsxs(ModalFooter, { gap: "0.5rem", borderTop: "1px solid", borderColor: theme.colors.boxborder[200], pt: 3, pb: 3, px: 4, children: [_jsx(Button, { label: "Close", size: "sm", onClick: () => setSettingsOpen(false), variant: "outline", colorScheme: "red" }), _jsx(Button, { label: "Save", size: "sm", onClick: handleSave })] })] })] })] }));
+                                                            }) })] })] }) })] }), _jsxs(ModalFooter, { gap: "0.5rem", borderTop: "1px solid", borderColor: raisedRule(theme.colors), pt: 3, pb: 3, px: 4, children: [_jsx(Button, { label: "Close", size: "sm", onClick: () => setSettingsOpen(false), variant: "outline", colorScheme: "red" }), _jsx(Button, { label: "Save", size: "sm", onClick: handleSave })] })] })] })] }));
 };
 export default TableSettings;

package/dist/esm/Components/Table/variants/classic.js

@@ -1,4 +1,5 @@
 import { accentTextOnCanvas } from "../../../Theme/tokens/builders/accentText.js";
+import { cardRule } from "../../../Theme/tokens/builders/planeStep.js";
 import { getTableRowHoverStyle } from "../components/tableRowHoverStyle.js";
 import { stripeFill } from "./stripe.js";
 /**
@@ -16,14 +17,14 @@ export const classicPreset = (colors, isDark) => {
             textTransform: "capitalize",
             letterSpacing: "normal",
             height: "45px",
-            ruleColor: colors.boxborder[200],
+            ruleColor: cardRule(colors),
             showColumnRule: true,
             actions: "always",
         },
         row: {
             hoverBg: getTableRowHoverStyle(colors, isDark).backgroundColor,
             hoverScope: "cell",
-            ruleColor: colors.boxborder[200],
+            ruleColor: cardRule(colors),
             frozenRuleColor: colors.boxborder[300],
             selectedBg: colors.primary.opacity[16],
             selectedBarColor: colors.primary[500],

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

@@ -4,6 +4,7 @@ import { ArrowRight, FileText, IndianRupee, Paperclip, Pencil, PencilLine, Plus,
 import React from "react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { bandOn } 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";
@@ -152,12 +153,14 @@ const NoteItem = React.memo(function NoteItem({ note, event, index, colors, acti
     var _a, _b;
     const isEditing = activeEditNoteId === note.log_note_id;
     const isDeleting = deletingNoteId != null && deletingNoteId === note.log_note_id;
+    const noteChip = bandOn(colors.primary[50], colors.gray[50]);
+    const noteChipInk = accentTextOnCanvas(colors.primary, noteChip);
     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: colors.gray[50], border: `${BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}`, borderRadius: "lg", px: 2.5, py: 2, opacity: isDeleting ? 0.6 : 1, _hover: { ".timeline-note-actions": { opacity: 1 } }, _focusWithin: { ".timeline-note-actions": { opacity: 1 } }, children: [_jsxs(Flex, { align: "center", gap: 1.5, mb: note.note ? 1 : 0, children: [_jsx(Box, { as: "span", color: accentTextOnCanvas(colors.primary, colors.gray[50]), 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: colors.primary[50],
-                                            color: accentTextOnCanvas(colors.primary, colors.primary[50]),
+                                            bg: noteChip,
+                                            color: noteChipInk,
                                         }, onClick: (e) => {
                                             e.stopPropagation();
                                             setActiveEditNoteId(note.log_note_id);
@@ -167,7 +170,7 @@ const NoteItem = React.memo(function NoteItem({ note, event, index, colors, acti
                                         }, 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: colors.primary[50], color: accentTextOnCanvas(colors.primary, colors.primary[50]), fontSize: MIN_TEXT, maxW: "100%", _hover: { bg: colors.primary[100] }, 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") : ""] }))] }));
+                                        }, 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: colors.primary[100] }, 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).
@@ -177,6 +180,7 @@ const EventCard = React.memo(function EventCard({ event, index, accent, colors,
     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]);
     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: {
@@ -189,7 +193,10 @@ const EventCard = React.memo(function EventCard({ event, index, accent, colors,
                                     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: colors.primary[50],
+                                    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 ${colors.boxborder[200]}`, 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));

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

@@ -7,9 +7,10 @@ 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 { transitionFor } from "../../Theme/tokens/primitives/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";
 const ToasterContext = createContext(undefined);
 const shrink = keyframes `
   from { transform: scaleX(1); }
@@ -17,11 +18,13 @@ const shrink = keyframes `
 `;
 // One-shot ring pulse on the status icon — a subtle "just happened" beat.
 const iconPulse = keyframes `
-  0%   { box-shadow: 0 0 0 0 var(--toast-pulse-color); }
-  70%  { box-shadow: 0 0 0 0.5rem transparent; }
-  100% { box-shadow: 0 0 0 0 transparent; }
+  0%   { transform: scale(1); opacity: 1; }
+  70%  { transform: scale(1.5); opacity: 0; }
+  100% { transform: scale(1.5); opacity: 0; }
 `;
 const MotionBox = 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);
@@ -33,15 +36,23 @@ function ToastCard({ onClose, title, description, actions, isClosable, duration,
         , { 
             // The single live-region root: an explicit aria-live here, on the card's own
             // root, keeps errors from being announced a second time by a duplicate wrapper.
-            role: isUrgent ? "alert" : undefined, "aria-live": isUrgent ? "assertive" : undefined, initial: { opacity: 0, x: 24 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 24 }, transition: { duration: 0.24, ease: [0.22, 1, 0.36, 1] }, onHoverStart: () => setPaused(true), onHoverEnd: () => setPaused(false), position: "relative", bg: c.surfaceRaised, border: `0.0625rem solid ${c.boxborder[200]}`, boxShadow: "md", borderRadius: "xl", overflow: "hidden", minW: "22.5rem", maxW: "26rem", sx: {
+            role: isUrgent ? "alert" : undefined, "aria-live": isUrgent ? "assertive" : undefined, initial: { opacity: 0, x: 24 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 24, transition: TOAST_EXIT }, transition: TOAST_ENTER, onHoverStart: () => setPaused(true), onHoverEnd: () => setPaused(false), position: "relative", bg: c.surfaceRaised, border: `0.0625rem solid ${c.boxborder[200]}`, boxShadow: "md", borderRadius: "xl", overflow: "hidden", minW: "22.5rem", maxW: "26rem", sx: {
                 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", bg: tone.bg, color: tone.fg, sx: {
-                                ["--toast-pulse-color"]: tone.border,
-                                animation: `${iconPulse} 900ms ease-out 1`,
-                                ...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],

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

@@ -8,9 +8,12 @@ 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";
 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 (see MODULE.md). */
 const TableToggle = ({ value, onChange, variant = "default" }) => {
     const theme = useCustomTheme();
@@ -71,10 +74,10 @@ const TableToggle = ({ value, onChange, variant = "default" }) => {
                         ? colors.accentText
                         : hoverInk,
             },
-            transition: "color 0.2s ease-in-out",
+            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: "transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.24s cubic-bezier(0.2, 0.8, 0.2, 1)" })), 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: "transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.24s cubic-bezier(0.2, 0.8, 0.2, 1)" })), _jsx(ToolTip, { label: "Grid View", placement: "top", fontSize: "xs", hasArrow: true, children: _jsx(IconButton, { ref: (node) => {
+    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;

package/dist/esm/Components/UserDetails/AddUserModal.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, FormControl, VStack, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
 import Button from "../Button/Button.js";
 import TextInput from "../Input/TextInput.js";
 import SearchSelect from "../SearchSelect/SearchSelect.js";
@@ -75,7 +76,7 @@ const AddUserModal = ({ isOpen, onClose, roleOptions, isLoading, onSubmit, onAdd
             type: "email",
         },
     ];
-    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [_jsxs(ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], children: [labels.addNewUser, upgradeNotice] }), _jsx(ModalCloseButton, {}), _jsx(ModalBody, { py: 5, children: _jsxs(VStack, { spacing: 4, align: "stretch", children: [textFields.map((field) => (_jsx(FormControl, { isInvalid: !!errors[field.id], children: _jsx(TextInput, { id: field.id, name: field.id, type: field.type, label: field.label, placeholder: field.placeholder, value: values[field.id], onChange: handleChange(field.id), isRequired: true, error: !!errors[field.id], errorMessage: errors[field.id], width: "100%" }) }, field.id))), _jsx(FormControl, { isInvalid: !!errors.role, isRequired: true, children: _jsx(SearchSelect, { label: labels.role, options: roleOptions.map((item) => ({
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [_jsxs(ModalHeader, { borderBottom: "1px solid", borderColor: raisedRule(colors), children: [labels.addNewUser, upgradeNotice] }), _jsx(ModalCloseButton, {}), _jsx(ModalBody, { py: 5, children: _jsxs(VStack, { spacing: 4, align: "stretch", children: [textFields.map((field) => (_jsx(FormControl, { isInvalid: !!errors[field.id], children: _jsx(TextInput, { id: field.id, name: field.id, type: field.type, label: field.label, placeholder: field.placeholder, value: values[field.id], onChange: handleChange(field.id), isRequired: true, error: !!errors[field.id], errorMessage: errors[field.id], width: "100%" }) }, field.id))), _jsx(FormControl, { isInvalid: !!errors.role, isRequired: true, children: _jsx(SearchSelect, { label: labels.role, options: roleOptions.map((item) => ({
                                             id: item.id,
                                             label: item.label,
                                         })), value: (_a = values.role) !== null && _a !== void 0 ? _a : undefined, onSelect: (option) => {

package/dist/esm/Components/UserDetails/ChangeRoleModal.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, FormControl, VStack, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
 import Button from "../Button/Button.js";
 import TextInput from "../Input/TextInput.js";
 import SearchSelect from "../SearchSelect/SearchSelect.js";
@@ -31,7 +32,7 @@ const ChangeRoleModal = ({ isOpen, onClose, userId, email, currentRole, roleOpti
             return;
         await (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit({ userId, roleId: selectedRole.id }));
     };
-    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [_jsx(ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], children: labels.changeRoleTitle }), _jsx(ModalCloseButton, {}), _jsx(ModalBody, { py: 5, children: _jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsx(TextInput, { label: labels.email, value: email !== null && email !== void 0 ? email : "", isDisabled: true, width: "100%" }), _jsx(FormControl, { isInvalid: !!error, isRequired: true, children: _jsx(SearchSelect, { label: labels.role, options: roleOptions.map((item) => ({
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [_jsx(ModalHeader, { borderBottom: "1px solid", borderColor: raisedRule(colors), children: labels.changeRoleTitle }), _jsx(ModalCloseButton, {}), _jsx(ModalBody, { py: 5, children: _jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsx(TextInput, { label: labels.email, value: email !== null && email !== void 0 ? email : "", isDisabled: true, width: "100%" }), _jsx(FormControl, { isInvalid: !!error, isRequired: true, children: _jsx(SearchSelect, { label: labels.role, options: roleOptions.map((item) => ({
                                             id: item.id,
                                             label: item.label,
                                         })), value: selectedRole !== null && selectedRole !== void 0 ? selectedRole : undefined, onSelect: (option) => {

package/dist/esm/Components/UserDetails/UserDetails.js

@@ -6,6 +6,7 @@ import { ChevronLeft, RefreshCw, Send, Shield, Trash2, UserPlus, Users, UserRoun
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
 import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { bandOn } from "../../Theme/tokens/builders/planeStep.js";
 import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
 import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
 import EmptyState from "../EmptyState/EmptyState.js";
@@ -60,6 +61,7 @@ const UserDetails = ({ users, selectedUser, selectedUserId, roleOptions = [], ca
     const [actionUserId, setActionUserId] = useState(null);
     const border = colors.boxborder[200];
     const surface = colors.background[50];
+    const detailTile = bandOn(colors.primary[50], surface);
     const rowBackgrounds = useMemo(() => listRowBackgrounds(colors), [colors]);
     const muted = colors.textMuted;
     const heading = colors.text[900];
@@ -100,7 +102,7 @@ const UserDetails = ({ users, selectedUser, selectedUserId, roleOptions = [], ca
                                                 const Icon = (_a = detail.icon) !== null && _a !== void 0 ? _a : UserRound;
                                                 return (_jsxs(React.Fragment, { children: [_jsxs(Flex, { gap: 3, px: 3, py: 2.5, _hover: {
                                                                 bg: resolveHoverTint(colors.gray[50], surface),
-                                                            }, alignItems: "center", transition: "background 0.15s ease", children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "30px", bg: colors.primary[50], borderRadius: "lg", color: accentTextOnCanvas(colors.primary, colors.primary[50]), flexShrink: 0, children: _jsx(Icon, { size: 15 }) }), _jsx(Box, { minWidth: "110px", children: _jsx(Text, { fontSize: "xs", fontWeight: 600, color: muted, children: detail.label }) }), _jsx(Box, { flex: 1, children: _jsx(Text, { fontSize: "sm", color: heading, fontWeight: 500, children: detail.value }) })] }), index < selectedUser.details.length - 1 && (_jsx(Divider, { borderColor: border }))] }, index));
+                                                            }, alignItems: "center", transition: "background 0.15s ease", children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "30px", bg: detailTile, borderRadius: "lg", color: accentTextOnCanvas(colors.primary, detailTile), flexShrink: 0, children: _jsx(Icon, { size: 15 }) }), _jsx(Box, { minWidth: "110px", children: _jsx(Text, { fontSize: "xs", fontWeight: 600, color: muted, children: detail.label }) }), _jsx(Box, { flex: 1, children: _jsx(Text, { fontSize: "sm", color: heading, fontWeight: 500, children: detail.value }) })] }), index < selectedUser.details.length - 1 && (_jsx(Divider, { borderColor: border }))] }, index));
                                             }) })] })] })) : (_jsx(EmptyState, { icon: UserRound, title: labels.selectTeamMember, description: labels.noUserSelected, minH: "300px" })) })] }), _jsx(AddUserModal, { isOpen: isAddUserOpen, onClose: onAddUserClose, roleOptions: roleOptions, isLoading: isAddUserLoading, onSubmit: async (values) => {
                     await (onAddUserSubmit === null || onAddUserSubmit === void 0 ? void 0 : onAddUserSubmit(values));
                     onAddUserClose();

package/dist/esm/Theme/chakra/Card.styles.js

@@ -36,10 +36,13 @@ const variants = {
     outline: definePartsStyle({
         container: { [$border.variable]: "1px", [$shadow.variable]: "none" },
     }),
+    elevated: definePartsStyle({
+        container: { [$border.variable]: "0", [$shadow.variable]: "shadows.card" },
+    }),
 };
 export const Card = defineMultiStyleConfig({
     baseStyle,
     sizes,
     variants,
-    defaultProps: { variant: "outline", size: "md" },
+    defaultProps: { variant: "elevated", size: "md" },
 });

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

@@ -3,6 +3,7 @@ import { menuAnatomy } from "@chakra-ui/anatomy";
 import { listRowBackgrounds } from "../tokens/builders/rowStates.js";
 import { OPTION_ROW_SIZES, OPTION_ROW_RADIUS } from "../tokens/primitives/optionRowSizes.js";
 import { paletteOf } from "./paletteFromTheme.js";
+import { POPUP_SURFACE } from "./overlay.styles.js";
 const itemRowSpec = OPTION_ROW_SIZES.sm;
 const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(menuAnatomy.keys);
 const $bg = cssVar("menu-bg");
@@ -21,12 +22,14 @@ const baseStyle = definePartsStyle(({ theme }) => {
             borderWidth: "1px",
             borderStyle: "solid",
             borderColor: colors.boxborder[200],
+            ...POPUP_SURFACE,
         },
         item: {
             minH: itemRowSpec.minH,
             px: itemRowSpec.px,
             py: itemRowSpec.py,
             mx: itemRowSpec.mx,
+            width: `calc(100% - 2 * ${itemRowSpec.mx})`,
             fontSize: itemRowSpec.fontSize,
             borderRadius: OPTION_ROW_RADIUS,
             bg: "transparent",

package/dist/esm/Theme/chakra/Popover.styles.js

@@ -1,6 +1,7 @@
 import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
 import { popoverAnatomy } from "@chakra-ui/anatomy";
 import { paletteOf } from "./paletteFromTheme.js";
+import { POPUP_SURFACE } from "./overlay.styles.js";
 const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(popoverAnatomy.keys);
 const $popperBg = cssVar("popper-bg");
 const $arrowShadowColor = cssVar("popper-arrow-shadow-color");
@@ -16,6 +17,7 @@ const baseStyle = definePartsStyle(({ theme }) => {
             borderWidth: "1px",
             borderStyle: "solid",
             borderColor: colors.boxborder[200],
+            ...POPUP_SURFACE,
         },
     };
 });

package/dist/esm/Theme/chakra/componentStyles.js

@@ -12,6 +12,7 @@ import { AA_NORMAL_TEXT, accentTextOnCanvas, isDarkCanvas } from "../tokens/buil
 import { labelOnFill, solidFillRung } from "../tokens/builders/filledSurface.js";
 import { liftToContrast, resolveHoverTint } from "../tokens/builders/outlineRung.js";
 import { resolveSoftTone } from "../tokens/builders/tone.js";
+import { skeletonShimmer } from "../tokens/builders/skeletonShimmer.js";
 import { tooltipSurface } from "../tokens/builders/tooltipSurface.js";
 import { Drawer } from "./Drawer.styles.js";
 import { Menu } from "./Menu.styles.js";
@@ -142,12 +143,15 @@ const $skeletonStart = cssVar("skeleton-start-color");
 const $skeletonEnd = cssVar("skeleton-end-color");
 // NOTE: fixes Chakra's Skeleton hardcoding gray.100/.400 via `_dark` (dead here) — an explicit startColor/endColor prop still wins.
 const Skeleton = {
-    baseStyle: ({ theme }) => ({
-        [$skeletonStart.variable]: paletteOf(theme).gray[100],
-        [$skeletonEnd.variable]: paletteOf(theme).gray[300],
-        background: $skeletonStart.reference,
-        borderColor: $skeletonEnd.reference,
-    }),
+    baseStyle: ({ theme }) => {
+        const shimmer = skeletonShimmer(paletteOf(theme));
+        return {
+            [$skeletonStart.variable]: shimmer.start,
+            [$skeletonEnd.variable]: shimmer.end,
+            background: $skeletonStart.reference,
+            borderColor: $skeletonEnd.reference,
+        };
+    },
 };
 // NOTE: uses Chakra's own shorthand style keys (bg/w/h/pos) + !important — extendTheme deep-merges by key, so mismatched keys let Chakra's stock value win.
 const Radio = {

package/dist/esm/Theme/chakra/motion.js

@@ -1,5 +1,6 @@
 import { useMatchMedia } from "../../Hooks/useMatchMedia.js";
 export const REDUCED_MOTION_QUERY = "@media (prefers-reduced-motion: reduce)";
+export const MOTION_OK_QUERY = "@media (prefers-reduced-motion: no-preference)";
 const MEDIA = "(prefers-reduced-motion: reduce)";
 export const usePrefersReducedMotion = () => useMatchMedia(MEDIA, false);
 /** Spread into `sx`: drops transitions and animations when the user asks for less motion. */

package/dist/esm/Theme/chakra/overlay.styles.js

@@ -1,6 +1,9 @@
 import { overlayScrim } from "../tokens/builders/scrim.js";
 import { raisedRule } from "../tokens/builders/surfaceRaised.js";
+import { RADIUS_ROLE } from "../tokens/primitives/radii.js";
 export const OVERLAY_BLUR = "blur(4px)";
+/** Radius and elevation every anchored popup shares: menus, popovers, selects, dropdowns. */
+export const POPUP_SURFACE = { borderRadius: RADIUS_ROLE.float, boxShadow: "md" };
 /** The one Modal/Drawer backdrop; reuse it for any custom full-screen scrim. */
 export const overlayScrimStyles = (colors) => ({
     bg: overlayScrim(colors),

package/dist/esm/Theme/tokens/brands/index.js

@@ -27,9 +27,25 @@ import { withSurfaceRungs } from "../builders/surfaceRungs.js";
 import { buildSurfaceRaised, withSurfaceRaised } from "../builders/surfaceRaised.js";
 import { buildStar } from "../builders/star.js";
 import { lazyPalette } from "../builders/lazy.js";
+import { contrastRatio, mix } from "../builders/color.js";
+export const LIGHT_CANVAS_STEP = 1.09;
+const CANVAS_MIX_STEP = 0.0025;
+const CANVAS_MIX_MAX = 0.5;
+const lightCanvas = (canvas, card, ink) => {
+    for (let weight = 0; weight < CANVAS_MIX_MAX; weight += CANVAS_MIX_STEP) {
+        const next = mix(canvas, ink, weight);
+        if (contrastRatio(next, card) >= LIGHT_CANVAS_STEP)
+            return next;
+    }
+    return mix(canvas, ink, CANVAS_MIX_MAX);
+};
 /** Derived, never hand-written: a copied hex goes stale the moment a canvas moves. */
 export const finalizeLightPalette = (source) => ({
     ...source,
+    backgroundColor: {
+        ...source.backgroundColor,
+        base: lightCanvas(source.backgroundColor.base, source.background[50], source.text[900]),
+    },
     sidebar: withSidebarTokens(source),
     accentText: pickAccentText(source.primary, source.backgroundColor.main),
     textMuted: buildMutedText(source.text, source.backgroundColor.main),

package/dist/esm/Theme/tokens/brands/radiant/palette.light.js

@@ -15,8 +15,22 @@ const primary = {
     900: "#531a14",
     opacity: buildPrimaryOpacity(PRIMARY_500),
 };
+const danger = {
+    50: "#fcedf3",
+    100: "#f5c5db",
+    200: "#f1a9ca",
+    300: "#ec82b4",
+    400: "#ea69a7",
+    500: "#e74494",
+    600: "#d23e87",
+    700: "#a43069",
+    800: "#7f2651",
+    900: "#611c3e",
+};
 const palette = {
     ...neutralTokens,
+    red: danger,
+    semantic: { ...neutralTokens.semantic, error: danger },
     ...buildBrandInk(PRIMARY_500),
     // NOTE: stops retuned so white gradient-button text clears AA at both ends — original let it drop to 4.37/2.15.
     gradient: { from: "#cd4733", to: "#a36807" }, // terracotta red → amber
@@ -118,6 +132,7 @@ const palette = {
     boxShadow: {
         primary: buildPrimaryShadowTint(PRIMARY_500),
         ...sharedBoxShadow,
+        error: `${danger[500]}47`,
     },
 };
 export default palette;

package/dist/esm/Theme/tokens/brands/rosewood/palette.light.js

@@ -1,18 +1,18 @@
 import { neutralTokens, sharedBoxShadow } from "../neutrals.js";
 import { buildPrimaryOpacity, buildPrimaryShadowTint } from "../../builders/buildBrandTokens.js";
 import { buildBrandInk } from "../../builders/brandInk.js";
-const PRIMARY_500 = "#d16a7e"; // muted warm rose (not neon pink)
+const PRIMARY_500 = "#cb6b94";
 const primary = {
-    50: "#fdf2f5",
-    100: "#f9d6de",
-    200: "#f2aaba",
-    300: "#ea7f96",
-    400: "#de627d",
+    50: "#fcf2f7",
+    100: "#f6d6e5",
+    200: "#edabc9",
+    300: "#e480ad",
+    400: "#d76398",
     500: PRIMARY_500,
-    600: "#b9556b",
-    700: "#984558",
-    800: "#763646",
-    900: "#552634",
+    600: "#b35681",
+    700: "#93466a",
+    800: "#723754",
+    900: "#52273e",
     opacity: buildPrimaryOpacity(PRIMARY_500),
 };
 const palette = {