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

package/dist/esm/Components/NavLauncher/launcherParts.js

@@ -3,9 +3,12 @@ import { Box, Flex, Heading, Text } from "@chakra-ui/react";
 import { Lock, Star } from "lucide-react";
 import { createContext, Fragment, useContext, } from "react";
 import { FOCUS_VISIBLE_OVER_STATE, focusVisibleStyles, } from "../../Theme/chakra/focusRing.styles.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 import { insetRingShadow } from "../../Theme/chakra/ringShadow.js";
 import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
 import { AA_NON_TEXT, liftToContrast, } from "../../Theme/tokens/builders/outlineRung.js";
+import { ruleOn } from "../../Theme/tokens/builders/planeStep.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
 import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
@@ -19,6 +22,34 @@ export const ITEM_SELECTOR = "[data-launcher-item]";
 const TouchDensityContext = createContext(false);
 export const TouchDensity = TouchDensityContext.Provider;
 export const useTouchDensity = () => useContext(TouchDensityContext);
+const RulePlaneContext = createContext("raised");
+export const RulePlaneProvider = RulePlaneContext.Provider;
+const useSectionRule = () => {
+    const { colors } = useCustomTheme();
+    const plane = useContext(RulePlaneContext);
+    return plane === "recess"
+        ? ruleOn(colors, colors.backgroundColor.subtle)
+        : raisedRule(colors);
+};
+export const copyHint = (base, copied, isCopied) => ({
+    text: isCopied ? copied : base,
+    reserve: isCopied ? base : copied,
+    isAccent: isCopied,
+});
+export function HintLabel({ text, reserve, isAccent = false, }) {
+    const { colors } = useCustomTheme();
+    return (_jsx(Box, { as: "span", "data-testid": "launcher-hint-label", "data-accent": isAccent || undefined, "data-reserve": reserve, display: "inline-flex", flexDirection: "column", color: isAccent ? colors.accentText : undefined, transition: transitionFor(["color"]), sx: {
+            // NOTE: ::after reserves the widest label (one per line), so swapping text never shifts the row.
+            "&::after": {
+                content: "attr(data-reserve)",
+                whiteSpace: "pre",
+                height: "0px",
+                overflow: "hidden",
+                visibility: "hidden",
+            },
+            ...reducedMotionSx(),
+        }, children: text }));
+}
 export const isPlainClick = (event) => event.button === 0 &&
     !event.metaKey &&
     !event.ctrlKey &&
@@ -103,7 +134,8 @@ export function NewTag({ label }) {
 }
 export function SectionHeader({ label, meta, isDecorative = false, isRail = false, hasCount = true, }) {
     const { colors } = useCustomTheme();
-    return (_jsxs(Flex, { align: "baseline", gap: "6px", px: isRail ? "4px" : "8px", pb: "5px", mb: hasCount ? 0 : "2px", borderBottomWidth: "1px", borderColor: colors.boxborder[200], "aria-hidden": isDecorative || undefined, children: [_jsx(Heading, { as: isDecorative ? "div" : "h2", m: 0, fontSize: "12.5px", fontWeight: 600, letterSpacing: "-0.003em", color: colors.text[900], children: label }), meta ? (_jsx(Text, { as: "span", fontSize: "11.5px", color: colors.textMuted, sx: { fontVariantNumeric: "tabular-nums" }, children: meta })) : null] }));
+    const rule = useSectionRule();
+    return (_jsxs(Flex, { align: "baseline", gap: "6px", px: isRail ? "4px" : "8px", pb: "5px", mb: hasCount ? 0 : "2px", borderBottomWidth: "1px", borderColor: rule, "aria-hidden": isDecorative || undefined, children: [_jsx(Heading, { as: isDecorative ? "div" : "h2", m: 0, fontSize: "xs-plus", fontWeight: 600, letterSpacing: "-0.003em", color: colors.text[900], children: label }), meta ? (_jsx(Text, { as: "span", fontSize: "xs-minus", color: colors.textMuted, sx: { fontVariantNumeric: "tabular-nums" }, children: meta })) : null] }));
 }
 export function RowIcon({ icon: Icon, size, stroke = 1.75, mt }) {
     const { colors } = useCustomTheme();
@@ -126,14 +158,14 @@ export function RowActions({ children }) {
             [NARROW_ROW]: {
                 [revealed]: {
                     backgroundColor: activeRowStyle(colors).fill,
-                    borderRadius: "6px",
+                    borderRadius: "md",
                 },
             },
         }, position: "absolute", top: isTouch ? "12px" : "7px", right: "4px", h: "19px", align: "center", gap: "2px", zIndex: 1, children: children }));
 }
 export function RowTip({ text }) {
     const { colors } = useCustomTheme();
-    return (_jsx(Box, { role: "tooltip", position: "absolute", right: "20px", top: "-26px", zIndex: 2, px: "8px", py: "3px", borderRadius: "6px", fontSize: "xs-minus", fontWeight: 600, whiteSpace: "nowrap", bg: colors.text[900], color: colors.surfaceRaised, visibility: "hidden", pointerEvents: "none", _groupHover: { visibility: "visible" }, children: text }));
+    return (_jsx(Box, { role: "tooltip", position: "absolute", right: "20px", top: "-26px", zIndex: 2, px: "8px", py: "3px", borderRadius: "md", fontSize: "xs-minus", fontWeight: 600, whiteSpace: "nowrap", bg: colors.text[900], color: colors.surfaceRaised, visibility: "hidden", pointerEvents: "none", _groupHover: { visibility: "visible" }, children: text }));
 }
 export function ModuleRow({ module, keyScreens, isPinned, onTogglePin, pinId, labels, link, }) {
     const { colors } = useCustomTheme();
@@ -143,7 +175,7 @@ export function ModuleRow({ module, keyScreens, isPinned, onTogglePin, pinId, la
     const isTouch = useTouchDensity();
     const base = typeof module.badge === "number" || module.badge ? 24 : 0;
     const open = base + (onTogglePin ? 46 : 24);
-    return (_jsxs(Flex, { "data-group": true, "data-nav-cell": true, position: "relative", align: "flex-start", gap: "10px", minH: isTouch ? "44px" : "34px", pl: "8px", pr: "4px", pt: isTouch ? "12px" : "7px", pb: isTouch ? "8px" : "5px", borderRadius: "8px", transition: transitionFor(["background-color"]), _hover: hover._hover, _focusWithin: hover._focusWithin, sx: { ...focus.sx, ...ROW_CONTAINER }, children: [_jsx(RowIcon, { icon: module.icon, size: 16, mt: "2px" }), _jsxs(Flex, { direction: "column", flex: 1, minW: 0, children: [_jsxs(Flex, { align: "center", gap: "6px", h: "19px", minW: 0, sx: titleInset(base, open), children: [_jsx(OverflowToolTip, { label: module.label, placement: "top-start", children: _jsx(Box, { as: link.linkAs, href: module.href, "data-launcher-item": true, ...focus.primary, "data-pin-id": onTogglePin ? pinId : undefined, onClick: link.onPlainClick, minW: 0, fontSize: "13.5px", fontWeight: 500, color: colors.text[900], noOfLines: 1, borderRadius: "sm", sx: stretchedLink("8px"), children: module.label }) }), module.isNew ? _jsx(NewTag, { label: labels.newBadge }) : null] }), keyScreens.length ? (_jsx(OverflowToolTip, { label: keyScreens.map((screen) => screen.label).join(" · "), placement: "bottom-start", children: _jsx(Box, { role: "group", "aria-label": `${module.label} ${labels.screens}`, position: "relative", zIndex: 1, w: "fit-content", maxW: "100%", fontSize: "11.5px", lineHeight: "15px", color: colors.textMuted, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: keyScreens.map((screen, i) => (_jsxs(Fragment, { children: [i > 0 ? (_jsx(Box, { as: "span", "aria-hidden": true, mx: "5px", opacity: 0.7, children: "\u00B7" })) : null, _jsx(Box, { as: link.linkAs, href: screen.href, "data-launcher-item": true, onClick: link.onPlainClick, color: "inherit", borderRadius: "sm", position: "relative", zIndex: 1, _hover: {
+    return (_jsxs(Flex, { "data-group": true, "data-nav-cell": true, position: "relative", align: "flex-start", gap: "10px", minH: isTouch ? "44px" : "34px", pl: "8px", pr: "4px", pt: isTouch ? "12px" : "7px", pb: isTouch ? "8px" : "5px", borderRadius: "lg", transition: transitionFor(["background-color"]), _hover: hover._hover, _focusWithin: hover._focusWithin, sx: { ...focus.sx, ...ROW_CONTAINER }, children: [_jsx(RowIcon, { icon: module.icon, size: 16, mt: "2px" }), _jsxs(Flex, { direction: "column", flex: 1, minW: 0, children: [_jsxs(Flex, { align: "center", gap: "6px", h: "19px", minW: 0, sx: titleInset(base, open), children: [_jsx(OverflowToolTip, { label: module.label, placement: "top-start", children: _jsx(Box, { as: link.linkAs, href: module.href, "data-launcher-item": true, ...focus.primary, "data-pin-id": onTogglePin ? pinId : undefined, onClick: link.onPlainClick, minW: 0, fontSize: "13.5px", fontWeight: 500, color: colors.text[900], noOfLines: 1, borderRadius: "sm", sx: stretchedLink("lg"), children: module.label }) }), module.isNew ? _jsx(NewTag, { label: labels.newBadge }) : null] }), keyScreens.length ? (_jsx(OverflowToolTip, { label: keyScreens.map((screen) => screen.label).join(" · "), placement: "bottom-start", children: _jsx(Box, { role: "group", "aria-label": `${module.label} ${labels.screens}`, position: "relative", zIndex: 1, w: "fit-content", maxW: "100%", fontSize: "xs-minus", lineHeight: "15px", color: colors.textMuted, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: keyScreens.map((screen, i) => (_jsxs(Fragment, { children: [i > 0 ? (_jsx(Box, { as: "span", "aria-hidden": true, mx: "5px", opacity: 0.7, children: "\u00B7" })) : null, _jsx(Box, { as: link.linkAs, href: screen.href, "data-launcher-item": true, onClick: link.onPlainClick, color: "inherit", borderRadius: "sm", position: "relative", zIndex: 1, _hover: {
                                             textDecoration: "underline",
                                             textUnderlineOffset: "2px",
                                         }, sx: ring, children: screen.label })] }, screen.id))) }) })) : null] }), _jsxs(RowActions, { children: [_jsx(CountBadge, { value: module.badge }), onTogglePin ? (_jsx(PinToggle, { isPinned: isPinned, label: isPinned ? labels.unpin(module.label) : labels.pin(module.label), title: "", onToggle: onTogglePin })) : null, _jsx(NewTabLink, { href: module.href, label: labels.openInNewTab(module.label), tip: labels.newTabTip, linkAs: link.linkAs })] }), onTogglePin ? (_jsx(RowTip, { text: isPinned ? labels.unpinTip : labels.pinTip })) : null] }));
@@ -154,11 +186,11 @@ export function RailRow({ screen, module, link, isStrong = false, trailing, pinI
     const hover = useRowHover();
     const focus = useRowFocus();
     const isTouch = useTouchDensity();
-    return (_jsxs(Flex, { "data-group": true, position: "relative", align: "center", gap: "10px", h: isTouch ? "44px" : "32px", pl: "8px", pr: "4px", borderRadius: "8px", transition: transitionFor(["background-color"]), _hover: hover._hover, _focusWithin: hover._focusWithin, sx: focus.sx, children: [_jsx(RowIcon, { icon: (_a = screen.icon) !== null && _a !== void 0 ? _a : module.icon, size: 15 }), _jsx(OverflowToolTip, { label: screen.label, placement: "top-start", children: _jsx(Box, { as: link.linkAs, href: screen.href, "data-launcher-item": true, ...focus.primary, "data-pin-id": pinId, onClick: link.onPlainClick, flex: 1, minW: 0, fontSize: "xs-plus", fontWeight: isStrong ? 500 : 400, color: colors.text[900], noOfLines: 1, borderRadius: "sm", sx: stretchedLink("8px"), children: screen.label }) }), _jsx(Flex, { position: "relative", zIndex: 1, align: "center", gap: "2px", children: trailing })] }));
+    return (_jsxs(Flex, { "data-group": true, position: "relative", align: "center", gap: "10px", h: isTouch ? "44px" : "32px", pl: "8px", pr: "4px", borderRadius: "lg", transition: transitionFor(["background-color"]), _hover: hover._hover, _focusWithin: hover._focusWithin, sx: focus.sx, children: [_jsx(RowIcon, { icon: (_a = screen.icon) !== null && _a !== void 0 ? _a : module.icon, size: 15 }), _jsx(OverflowToolTip, { label: screen.label, placement: "top-start", children: _jsx(Box, { as: link.linkAs, href: screen.href, "data-launcher-item": true, ...focus.primary, "data-pin-id": pinId, onClick: link.onPlainClick, flex: 1, minW: 0, fontSize: "xs-plus", fontWeight: isStrong ? 500 : 400, color: colors.text[900], noOfLines: 1, borderRadius: "sm", sx: stretchedLink("lg"), children: screen.label }) }), _jsx(Flex, { position: "relative", zIndex: 1, align: "center", gap: "2px", children: trailing })] }));
 }
 export function PinTextButton({ label, text, onToggle }) {
     const { colors } = useCustomTheme();
-    return (_jsxs(Box, { as: "button", type: "button", "aria-label": label, flexShrink: 0, h: "22px", px: "7px", display: "inline-flex", alignItems: "center", gap: "4px", borderRadius: "6px", borderWidth: "1px", borderColor: colors.boxborder[200], bg: colors.surfaceRaised, color: colors.text[700], fontSize: "xs-minus", fontWeight: 600, cursor: "pointer", opacity: 0, transition: transitionFor(["opacity", "background-color"]), sx: { ...revealStyles(colors), "@media (hover: none)": { opacity: 1 } }, onClick: (event) => {
+    return (_jsxs(Box, { as: "button", type: "button", "aria-label": label, flexShrink: 0, h: "22px", px: "7px", display: "inline-flex", alignItems: "center", gap: "4px", borderRadius: "md", borderWidth: "1px", borderColor: raisedRule(colors), bg: colors.surfaceRaised, color: colors.text[700], fontSize: "xs-minus", fontWeight: 600, cursor: "pointer", opacity: 0, transition: transitionFor(["opacity", "background-color"]), sx: { ...revealStyles(colors), "@media (hover: none)": { opacity: 1 } }, onClick: (event) => {
             event.preventDefault();
             event.stopPropagation();
             onToggle();
@@ -170,7 +202,7 @@ export function PinnedTile({ screen, module, link, labels, onTogglePin, }) {
     const Icon = (_a = screen.icon) !== null && _a !== void 0 ? _a : module.icon;
     const focus = useRowFocus(true);
     const isTouch = useTouchDensity();
-    return (_jsxs(Flex, { "data-group": true, "data-nav-cell": true, position: "relative", align: "center", gap: "8px", h: isTouch ? "44px" : "36px", pl: "9px", pr: "4px", borderRadius: "9px", borderWidth: "1px", borderColor: colors.boxborder[200], bg: colors.surfaceRaised, transition: transitionFor(["border-color", "background-color"]), _hover: { borderColor: colors.gray[300] }, sx: focus.sx, children: [Icon ? (_jsx(Box, { as: "span", display: "inline-flex", flexShrink: 0, color: colors.accentText, children: _jsx(Icon, { size: 15, strokeWidth: 1.8, "aria-hidden": true }) })) : null, _jsx(OverflowToolTip, { label: screen.label, placement: "top-start", children: _jsx(Box, { as: link.linkAs, href: screen.href, "data-launcher-item": true, ...focus.primary, "data-pin-id": onTogglePin ? screen.id : undefined, onClick: link.onPlainClick, flex: 1, minW: 0, fontSize: "xs-plus", fontWeight: 500, color: colors.text[900], noOfLines: 1, borderRadius: "sm", sx: stretchedLink("9px"), children: screen.label }) }), _jsx(CountBadge, { value: screen.badge, size: "tile" }), onTogglePin ? (_jsx(Box, { position: "relative", zIndex: 1, flexShrink: 0, w: "0", overflow: "hidden", transition: transitionFor(["width"]), _groupHover: { w: "22px" }, _groupFocusWithin: { w: "22px" }, children: _jsx(PinToggle, { isPinned: true, size: 12, label: labels.unpin(screen.label), title: labels.unpinTip, onToggle: onTogglePin }) })) : null] }));
+    return (_jsxs(Flex, { "data-group": true, "data-nav-cell": true, position: "relative", align: "center", gap: "8px", h: isTouch ? "44px" : "36px", pl: "9px", pr: "4px", borderRadius: "9px", borderWidth: "1px", borderColor: raisedRule(colors), bg: colors.surfaceRaised, transition: transitionFor(["border-color", "background-color"]), _hover: { borderColor: colors.gray[300] }, sx: focus.sx, children: [Icon ? (_jsx(Box, { as: "span", display: "inline-flex", flexShrink: 0, color: colors.accentText, children: _jsx(Icon, { size: 15, strokeWidth: 1.8, "aria-hidden": true }) })) : null, _jsx(OverflowToolTip, { label: screen.label, placement: "top-start", children: _jsx(Box, { as: link.linkAs, href: screen.href, "data-launcher-item": true, ...focus.primary, "data-pin-id": onTogglePin ? screen.id : undefined, onClick: link.onPlainClick, flex: 1, minW: 0, fontSize: "xs-plus", fontWeight: 500, color: colors.text[900], noOfLines: 1, borderRadius: "sm", sx: stretchedLink("9px"), children: screen.label }) }), _jsx(CountBadge, { value: screen.badge, size: "tile" }), onTogglePin ? (_jsx(Box, { position: "relative", zIndex: 1, flexShrink: 0, w: "0", overflow: "hidden", transition: transitionFor(["width"]), _groupHover: { w: "22px" }, _groupFocusWithin: { w: "22px" }, children: _jsx(PinToggle, { isPinned: true, size: 12, label: labels.unpin(screen.label), title: labels.unpinTip, onToggle: onTogglePin }) })) : null] }));
 }
 export function AppsSection({ apps, hues, currentAppId, heading, hideHeading = false, onSelect, }) {
     const { colors } = useCustomTheme();
@@ -190,7 +222,7 @@ export function AppsSection({ apps, hues, currentAppId, heading, hideHeading = f
                                 }
                                 : {}), "aria-current": isCurrent ? "true" : undefined, title: app.locked
                                 ? ((_a = app.lockedReason) !== null && _a !== void 0 ? _a : `${app.name} is not available on your plan`)
-                                : undefined, "data-app-locked": app.locked ? "true" : undefined, "aria-disabled": app.locked ? "true" : undefined, align: "center", gap: 3, minH: "44px", px: 2, py: 1, borderRadius: "8px", textDecoration: "none", cursor: interactive ? "pointer" : "default", bg: isCurrent ? rows.selected : "transparent", transition: transitionFor(["background-color"]), _hover: interactive ? { bg: rows.active } : undefined, sx: {
+                                : undefined, "data-app-locked": app.locked ? "true" : undefined, "aria-disabled": app.locked ? "true" : undefined, align: "center", gap: 3, minH: "44px", px: 2, py: 1, borderRadius: "lg", textDecoration: "none", cursor: interactive ? "pointer" : "default", bg: isCurrent ? rows.selected : "transparent", transition: transitionFor(["background-color"]), _hover: interactive ? { bg: rows.active } : undefined, sx: {
                                 _focusVisible: rowRing,
                                 [FOCUS_VISIBLE_OVER_STATE]: rowRing,
                             }, children: [_jsx(AppMark, { app: app, hue: hues[index], boxSize: "28px", iconSize: 15, muted: app.locked }), _jsx(OverflowToolTip, { label: app.name, placement: "top-start", children: _jsx(Text, { flex: 1, minW: 0, fontSize: "sm", fontWeight: "medium", noOfLines: 1, color: app.locked ? colors.textMuted : colors.text[900], children: app.name }) }), app.locked ? (_jsx(Box, { as: Lock, size: 14, color: colors.textMuted, flexShrink: 0, "aria-hidden": true })) : null] }) }, app.id || app.name));

package/dist/esm/Components/NavLauncher/searchLayout.js

@@ -1,4 +1,5 @@
 import { SCOPE_ACTIONS, SCOPE_ALL } from "./spotlight.js";
+export const copiesOnEnter = (entry) => (entry === null || entry === void 0 ? void 0 : entry.type) === "answer" && !entry.item.run && !entry.item.href;
 export const inScope = (groups, scope) => scope === SCOPE_ALL ? groups : groups.filter((g) => g.scope === scope);
 /** A scope's items as passed, unranked, for browsing before typing. */
 export const scopeGroups = (input) => {

package/dist/esm/Components/NavLauncher/spotlightParts.js

@@ -4,14 +4,26 @@ import { ChevronDown, Search as SearchIcon } from "lucide-react";
 import { useRef } from "react";
 import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import Button from "../Button/Button.js";
 import CopyButton from "../CopyButton/CopyButton.js";
 import { KbdShortcut } from "../Kbd/Kbd.js";
-import { activeRowStyle, activeRowSurface, CountBadge, Highlight, useTouchDensity, } from "./launcherParts.js";
+import { activeRowStyle, activeRowSurface, copyHint, CountBadge, Highlight, HintLabel, useTouchDensity, } from "./launcherParts.js";
 export const QUICK_ACTION_LIMIT = 5;
 const HIDE_ON_TOUCH = { "@media (hover: none)": { display: "none" } };
+const COPIED_ON_TOUCH = (backgroundColor) => ({
+    "@media (hover: none)": {
+        position: "absolute",
+        top: "50%",
+        right: "10px",
+        transform: "translateY(-50%)",
+        padding: "2px 8px",
+        borderRadius: "md",
+        backgroundColor,
+    },
+});
 export function QuickActionsRow({ items, label, link, onRun, }) {
     return (_jsx(Flex, { role: "group", "aria-label": label, "data-testid": "launcher-quick-actions", gap: "6px", minW: 0, flexWrap: "wrap", px: "4px", children: items.slice(0, QUICK_ACTION_LIMIT).map((item) => {
             const Icon = item.icon;
@@ -34,7 +46,7 @@ const useCardSurface = (isActive) => {
         position: "relative",
         borderRadius: "xl",
         borderWidth: "1px",
-        borderColor: isActive ? edge : colors.boxborder[200],
+        borderColor: isActive ? edge : raisedRule(colors),
         bg: isActive ? fill : colors.surfaceRaised,
         transition: transitionFor(["background-color", "border-color"]),
         sx: reducedMotionSx(),
@@ -57,9 +69,9 @@ export function TopHitCard({ item, query, isActive, optionId, link, labels, onOp
     return (_jsxs(Flex, { role: "presentation", "data-group": true, "data-reveal": isActive, direction: "column", gap: "10px", p: "12px", onMouseMove: onHover, ...surface, children: [_jsxs(Flex, { id: optionId, role: "option", "aria-selected": isActive, "aria-describedby": describedBy, "data-active": isActive, align: "center", gap: "12px", minW: 0, cursor: "pointer", onClick: () => {
                     if (!item.href)
                         onOpen();
-                }, children: [_jsx(IconChip, { icon: item.icon, size: 40 }), _jsxs(Flex, { direction: "column", flex: 1, minW: 0, gap: "2px", children: [_jsx(Text, { fontSize: "md", lineHeight: "22px", fontWeight: 600, color: colors.text[900], noOfLines: 1, children: _jsx(Highlight, { text: item.label, query: query }) }), meta ? (_jsx(Text, { fontSize: "12.5px", color: colors.textMuted, noOfLines: 1, children: meta })) : null, item.keywordHint ? (_jsxs(Text, { fontSize: "xs", color: colors.textMuted, noOfLines: 1, children: [`${labels.matchedOn} “`, _jsx(Highlight, { text: item.keywordHint, query: query }), "\u201D"] })) : null] }), _jsx(CountBadge, { value: item.badge }), _jsx(Box, { "aria-hidden": true, flexShrink: 0, sx: HIDE_ON_TOUCH, children: _jsx(KbdShortcut, { shortcut: "enter", size: "sm" }) })] }), _jsx(CardAnchor, { item: item, link: link })] }));
+                }, children: [_jsx(IconChip, { icon: item.icon, size: 40 }), _jsxs(Flex, { direction: "column", flex: 1, minW: 0, gap: "2px", children: [_jsx(Text, { fontSize: "md", lineHeight: "22px", fontWeight: 600, color: colors.text[900], noOfLines: 1, children: _jsx(Highlight, { text: item.label, query: query }) }), meta ? (_jsx(Text, { fontSize: "xs-plus", color: colors.textMuted, noOfLines: 1, children: meta })) : null, item.keywordHint ? (_jsxs(Text, { fontSize: "xs", color: colors.textMuted, noOfLines: 1, children: [`${labels.matchedOn} “`, _jsx(Highlight, { text: item.keywordHint, query: query }), "\u201D"] })) : null] }), _jsx(CountBadge, { value: item.badge }), _jsx(Box, { "aria-hidden": true, flexShrink: 0, visibility: isActive ? "visible" : "hidden", sx: HIDE_ON_TOUCH, children: _jsx(KbdShortcut, { shortcut: "enter", size: "sm" }) })] }), _jsx(CardAnchor, { item: item, link: link })] }));
 }
-export function AnswerCard({ item, isActive, optionId, link, labels, onOpen, onHover, describedBy, }) {
+export function AnswerCard({ item, isActive, isCopied, optionId, link, labels, onOpen, onHover, describedBy, }) {
     var _a, _b;
     const { colors } = useCustomTheme();
     const surface = useCardSurface(isActive);
@@ -68,28 +80,29 @@ export function AnswerCard({ item, isActive, optionId, link, labels, onOpen, onH
         value: item.label,
     };
     const acts = Boolean(item.href || item.run);
+    const hint = acts ? labels.hintOpen : labels.hintCopy;
     return (_jsxs(Flex, { role: "presentation", "data-group": true, p: "12px 14px", onMouseMove: onHover, ...surface, children: [_jsxs(Flex, { id: optionId, role: "option", "aria-selected": isActive, "aria-describedby": describedBy, "data-active": isActive, align: "center", gap: "12px", flex: 1, minW: 0, cursor: "pointer", onClick: () => {
                     if (!item.href)
                         onOpen();
-                }, children: [_jsx(IconChip, { icon: item.icon, size: 36 }), _jsxs(Flex, { direction: "column", flex: 1, minW: 0, gap: "1px", children: [answer.label ? (_jsx(Text, { fontSize: "xs-minus", fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase", color: colors.textMuted, noOfLines: 1, children: answer.label })) : null, _jsx(Text, { id: `${optionId}-value`, fontSize: "lg", lineHeight: "24px", fontWeight: 600, color: colors.text[900], noOfLines: 2, children: answer.value }), answer.hint ? (_jsx(Text, { fontSize: "xs", color: colors.textMuted, noOfLines: 1, children: answer.hint })) : null] }), _jsxs(Flex, { "aria-hidden": true, align: "center", gap: "6px", flexShrink: 0, fontSize: "11.5px", color: colors.textMuted, sx: HIDE_ON_TOUCH, children: [_jsx(KbdShortcut, { shortcut: "enter", size: "xs" }), acts ? labels.hintOpen : labels.hintCopy] })] }), _jsx(CardAnchor, { item: item, link: link })] }));
+                }, children: [_jsx(IconChip, { icon: item.icon, size: 36 }), _jsxs(Flex, { direction: "column", flex: 1, minW: 0, gap: "1px", children: [answer.label ? (_jsx(Text, { fontSize: "xs-minus", fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase", color: colors.textMuted, noOfLines: 1, children: answer.label })) : null, _jsx(Text, { id: `${optionId}-value`, fontSize: "lg", lineHeight: "24px", fontWeight: 600, color: colors.text[900], noOfLines: 2, children: answer.value }), answer.hint ? (_jsx(Text, { fontSize: "xs", color: colors.textMuted, noOfLines: 1, children: answer.hint })) : null] }), _jsxs(Flex, { "aria-hidden": true, align: "center", gap: "6px", flexShrink: 0, fontSize: "xs-minus", color: colors.textMuted, visibility: isActive || isCopied ? "visible" : "hidden", sx: isCopied ? COPIED_ON_TOUCH(surface.bg) : HIDE_ON_TOUCH, children: [_jsx(Box, { display: "contents", sx: HIDE_ON_TOUCH, children: _jsx(KbdShortcut, { shortcut: "enter", size: "xs" }) }), _jsx(HintLabel, { ...copyHint(hint, labels.copied, isCopied) })] })] }), _jsx(CardAnchor, { item: item, link: link })] }));
 }
 export function ShowMoreOption({ count, isActive, optionId, label, onExpand, onHover, }) {
     const { colors } = useCustomTheme();
     const isTouch = useTouchDensity();
-    return (_jsxs(Flex, { id: optionId, role: "option", "aria-selected": isActive, "data-active": isActive, align: "center", gap: "6px", minH: isTouch ? "44px" : "30px", px: "8px", mt: "2px", borderRadius: "lg", cursor: "pointer", fontSize: "12.5px", fontWeight: 500, color: colors.accentText, onClick: onExpand, onMouseMove: onHover, _hover: { bg: listRowBackgrounds(colors).active }, sx: isActive ? activeRowSurface(colors) : undefined, children: [_jsx(ChevronDown, { size: 14, strokeWidth: 2, "aria-hidden": true }), label(count)] }));
+    return (_jsxs(Flex, { id: optionId, role: "option", "aria-selected": isActive, "data-active": isActive, align: "center", gap: "6px", minH: isTouch ? "44px" : "30px", px: "8px", mt: "2px", borderRadius: "lg", cursor: "pointer", fontSize: "xs-plus", fontWeight: 500, color: colors.accentText, onClick: onExpand, onMouseMove: onHover, _hover: { bg: listRowBackgrounds(colors).active }, sx: isActive ? activeRowSurface(colors) : undefined, children: [_jsx(ChevronDown, { size: 14, strokeWidth: 2, "aria-hidden": true }), label(count)] }));
 }
 export const describeFacts = (facts) => facts.map((f) => `${f.label}: ${f.value}`).join("; ");
 export function FactList({ facts, labels, layout, onCopied, onCopyBlocked, }) {
     const { colors } = useCustomTheme();
     const values = useRef([]);
     const isPane = layout === "pane";
-    return (_jsx(Box, { as: "dl", m: 0, display: "grid", gridTemplateColumns: isPane ? "minmax(0, 1fr)" : "repeat(auto-fill, minmax(11rem, 1fr))", gap: isPane ? "12px" : "6px 16px", children: facts.map((fact, i) => (_jsxs(Box, { minW: 0, children: [_jsx(Text, { as: "dt", fontSize: "11.5px", lineHeight: "16px", color: colors.textMuted, children: fact.label }), _jsxs(Flex, { as: "dd", m: 0, align: "center", gap: "2px", minW: 0, children: [_jsx(Text, { ref: (node) => {
+    return (_jsx(Box, { as: "dl", m: 0, display: "grid", gridTemplateColumns: isPane ? "minmax(0, 1fr)" : "repeat(auto-fill, minmax(11rem, 1fr))", gap: isPane ? "12px" : "6px 16px", children: facts.map((fact, i) => (_jsxs(Box, { minW: 0, children: [_jsx(Text, { as: "dt", fontSize: "xs-minus", lineHeight: "16px", color: colors.textMuted, children: fact.label }), _jsxs(Flex, { as: "dd", m: 0, align: "center", gap: "2px", minW: 0, children: [_jsx(Text, { ref: (node) => {
                                 values.current[i] = node;
-                            }, fontSize: isPane ? "13.5px" : "12.5px", lineHeight: "20px", color: colors.text[900], wordBreak: "break-word", minW: 0, children: fact.value }), fact.copyable ? (_jsx(CopyButton, { value: fact.value, tooltip: labels.copy(fact.label), copiedLabel: labels.copied, size: isPane ? "xs" : "sm", iconSize: 14, onCopy: onCopied, onCopyError: () => onCopyBlocked(values.current[i]) })) : null] })] }, `${fact.label}-${i}`))) }));
+                            }, fontSize: isPane ? "13.5px" : "xs-plus", lineHeight: "20px", color: colors.text[900], wordBreak: "break-word", minW: 0, children: fact.value }), fact.copyable ? (_jsx(CopyButton, { value: fact.value, tooltip: labels.copy(fact.label), copiedLabel: labels.copied, size: isPane ? "xs" : "sm", iconSize: 14, onCopy: onCopied, onCopyError: () => onCopyBlocked(values.current[i]) })) : null] })] }, `${fact.label}-${i}`))) }));
 }
-export function PreviewPane({ item, placement, width, labels, onCopied, onCopyBlocked, }) {
+export function PreviewPane({ item, placement, width, enterCopies, isCopied, labels, onCopied, onCopyBlocked, }) {
     var _a, _b, _c, _d, _e;
     const { colors } = useCustomTheme();
     const isDock = placement === "dock";
-    return (_jsx(Flex, { as: "aside", "aria-label": labels.preview, "data-testid": "launcher-preview", "data-scroll-region": true, direction: "column", gap: isDock ? "10px" : "16px", w: isDock ? "100%" : width, maxH: isDock ? "min(45vh, 20rem)" : undefined, flexShrink: 0, px: "18px", pt: isDock ? "12px" : "16px", pb: isDock ? "12px" : "16px", bg: colors.backgroundColor.subtle, ...(isDock ? { borderTopWidth: "1px" } : { borderLeftWidth: "1px" }), borderColor: colors.boxborder[200], overflowY: "auto", children: item ? (_jsxs(_Fragment, { children: [_jsxs(Flex, { align: "center", gap: "10px", minW: 0, children: [_jsx(IconChip, { icon: item.icon, size: isDock ? 28 : 36 }), _jsxs(Box, { minW: 0, children: [_jsx(Text, { fontSize: isDock ? "14px" : "15px", fontWeight: 600, color: colors.text[900], noOfLines: isDock ? 1 : 2, children: (_b = (_a = item.answer) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : item.label }), item.context || item.answer ? (_jsx(Text, { fontSize: "xs", color: colors.textMuted, noOfLines: 1, children: (_d = (_c = item.answer) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : item.context })) : null] })] }), ((_e = item.facts) === null || _e === void 0 ? void 0 : _e.length) ? (_jsx(FactList, { facts: item.facts, labels: labels, layout: isDock ? "inline" : "pane", onCopied: onCopied, onCopyBlocked: onCopyBlocked }, item.id)) : (_jsxs(Flex, { "aria-hidden": true, align: "center", gap: "6px", fontSize: "xs", color: colors.textMuted, children: [_jsx(KbdShortcut, { shortcut: "enter", size: "xs" }), labels.hintOpen] }))] })) : null }));
+    return (_jsx(Flex, { as: "aside", "aria-label": labels.preview, "data-testid": "launcher-preview", "data-scroll-region": true, direction: "column", gap: isDock ? "10px" : "16px", w: isDock ? "100%" : width, maxH: isDock ? "min(45vh, 20rem)" : undefined, flexShrink: 0, px: "18px", pt: isDock ? "12px" : "16px", pb: isDock ? "12px" : "16px", bg: colors.backgroundColor.subtle, ...(isDock ? { borderTopWidth: "1px" } : { borderLeftWidth: "1px" }), borderColor: raisedRule(colors), overflowY: "auto", children: item ? (_jsxs(_Fragment, { children: [_jsxs(Flex, { align: "center", gap: "10px", minW: 0, children: [_jsx(IconChip, { icon: item.icon, size: isDock ? 28 : 36 }), _jsxs(Box, { minW: 0, children: [_jsx(Text, { fontSize: isDock ? "14px" : "15px", fontWeight: 600, color: colors.text[900], noOfLines: isDock ? 1 : 2, children: (_b = (_a = item.answer) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : item.label }), item.context || item.answer ? (_jsx(Text, { fontSize: "xs", color: colors.textMuted, noOfLines: 1, children: (_d = (_c = item.answer) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : item.context })) : null] })] }), ((_e = item.facts) === null || _e === void 0 ? void 0 : _e.length) ? (_jsx(FactList, { facts: item.facts, labels: labels, layout: isDock ? "inline" : "pane", onCopied: onCopied, onCopyBlocked: onCopyBlocked }, item.id)) : (_jsxs(Flex, { "aria-hidden": true, align: "center", gap: "6px", fontSize: "xs", color: colors.textMuted, children: [_jsx(KbdShortcut, { shortcut: "enter", size: "xs" }), _jsx(HintLabel, { ...copyHint(enterCopies ? labels.hintCopy : labels.hintOpen, labels.copied, isCopied) })] }))] })) : null }));
 }

package/dist/esm/Components/NavLauncher/useCopiedFlash.js

@@ -0,0 +1,17 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+export const COPIED_FLASH_MS = 1500;
+export function useCopiedFlash() {
+    const [copiedId, setCopiedId] = useState(null);
+    const timer = useRef();
+    useEffect(() => () => clearTimeout(timer.current), []);
+    const clear = useCallback(() => {
+        clearTimeout(timer.current);
+        setCopiedId(null);
+    }, []);
+    const flash = useCallback((id) => {
+        clearTimeout(timer.current);
+        setCopiedId(id);
+        timer.current = setTimeout(() => setCopiedId(null), COPIED_FLASH_MS);
+    }, []);
+    return { copiedId, flash, clear };
+}

package/dist/esm/Components/NavigationBar/NavigationBar.js

@@ -2,7 +2,6 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { Box, Button, Flex, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Stack, Text, } from "@chakra-ui/react";
 import Avatar from "../Avatar/Avatar.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
 import { ruleOn } from "../../Theme/tokens/builders/planeStep.js";
 import { accentTextOnCanvas, isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
 import { resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
@@ -11,6 +10,8 @@ import { resolveStatusTone } from "../../Theme/tokens/builders/statusTone.js";
 import ToolTip from "../ToolTip/ToolTip.js";
 import PersonChip from "../PersonChip/PersonChip.js";
 import { CircleArrowLeft, LogOut, PanelLeftClose, PanelRightClose, } from "lucide-react";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+const BACKGROUND_TRANSITION = transitionFor(["background"]);
 // Roomy enough to hover without aiming: the glyph is only 1.25rem.
 const SIDEBAR_TOGGLE_HIT = "2.5rem";
 export default function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavOnClick, handleLogout, logoutText, navigationBarText, sideBarToggole, onSideBarToggole, forceSideBarToggle = false, onSideBarPeek, leading, }) {
@@ -29,7 +30,7 @@ export default function NavBar({ userAvathar, userName, userRole, navMenu, moreI
         cursor: "pointer",
         border: "none",
         bg: "transparent",
-        transition: "background 0.15s",
+        transition: BACKGROUND_TRANSITION,
         _hover: { bg: barHoverBg },
     };
     const menuItemStyle = {
@@ -44,7 +45,7 @@ export default function NavBar({ userAvathar, userName, userRole, navMenu, moreI
         fontSize: "xs-plus",
         color: theme.colors.text[900],
         gap: theme.space["2"],
-        transition: "background 0.12s",
+        transition: BACKGROUND_TRANSITION,
         _hover: { bg: menuHoverBg },
         _focus: { bg: menuHoverBg },
         _active: { bg: rowBackgrounds.selectedActive },
@@ -53,10 +54,10 @@ export default function NavBar({ userAvathar, userName, userRole, navMenu, moreI
                                         // Without a cap one long title stretches the whole dropdown; titles truncate instead.
                                         maxW: "18rem", bg: theme.colors.surfaceRaised, 
                                         // NOTE: Chakra's MenuItem inherits --menu-bg hardcoded to #fff via dead _dark — set it or items stay white.
-                                        sx: { "--menu-bg": theme.colors.backgroundColor.light }, borderRadius: "xl", boxShadow: "lg", color: theme.colors.text[900], overflow: "hidden", children: _jsxs(Box, { display: "flex", flexDirection: "column", maxH: "90vh", children: [_jsx(Box, { pt: 4, pb: 2, px: 4, children: _jsx(PersonChip, { name: userName, imageUrl: userAvathar, secondary: userRole, orientation: "vertical", size: "xl", maxW: "100%" }) }), _jsx(MenuDivider, { borderColor: raisedRule(theme.colors) }), _jsx(Box, { flex: 1, overflowY: "auto", overflowX: "hidden", children: navMenu === null || navMenu === void 0 ? void 0 : navMenu.map((menu, idx) => {
+                                        sx: { "--menu-bg": theme.colors.backgroundColor.light }, borderRadius: "xl", boxShadow: "lg", color: theme.colors.text[900], overflow: "hidden", children: _jsxs(Box, { display: "flex", flexDirection: "column", maxH: "90vh", children: [_jsx(Box, { pt: 4, pb: 2, px: 4, children: _jsx(PersonChip, { name: userName, imageUrl: userAvathar, secondary: userRole, orientation: "vertical", size: "xl", maxW: "100%" }) }), _jsx(MenuDivider, {}), _jsx(Box, { flex: 1, overflowY: "auto", overflowX: "hidden", children: navMenu === null || navMenu === void 0 ? void 0 : navMenu.map((menu, idx) => {
                                                         var _a, _b, _c, _d;
                                                         return (_jsxs(MenuItem, { onClick: () => handleNavOnClick(menu.url), sx: menuItemStyle, children: [menu.icon && (_jsx(Box, { display: "flex", alignItems: "center", flexShrink: 0, sx: { "& svg": { width: "16px", height: "16px" } }, children: menu === null || menu === void 0 ? void 0 : menu.icon })), _jsx(Box, { minW: 0, isTruncated: true, title: String((_a = menu.title) !== null && _a !== void 0 ? _a : ""), children: menu.title })] }, `${String((_d = (_c = (_b = menu.id) !== null && _b !== void 0 ? _b : menu.url) !== null && _c !== void 0 ? _c : menu.title) !== null && _d !== void 0 ? _d : idx)}-${idx}`));
-                                                    }) }), _jsx(MenuDivider, { borderColor: raisedRule(theme.colors) }), _jsxs(MenuItem, { onClick: handleLogout, sx: {
+                                                    }) }), _jsx(MenuDivider, {}), _jsxs(MenuItem, { onClick: handleLogout, sx: {
                                                         ...menuItemStyle,
                                                         color: theme.colors.semanticText.error,
                                                         _hover: { bg: dangerTone.bg, color: dangerTone.fg },

package/dist/esm/Components/NoteTextArea/NoteTextArea.js

@@ -4,16 +4,13 @@ import { Box, Flex, Text, Input, Textarea, Button, Divider, Spinner, Tooltip, us
 import { Paperclip, X, SquarePen, File as FileIcon } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { placeholderInk } from "../../Theme/tokens/builders/placeholderInk.js";
-import { resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
+import { AA_NORMAL_TEXT } from "../../Theme/tokens/builders/accentText.js";
+import { liftToContrast, resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
+import { bandOn } from "../../Theme/tokens/builders/planeStep.js";
 import { FIELD_RADIUS } from "../Common/fieldStyles.js";
+import { onActivationKey } from "../Common/activationKey.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { focusVisibleRing, insetFocusRingShadow } from "../../Theme/chakra/focusRing.styles.js";
-const onActivationKey = (activate) => (e) => {
-    if (e.key !== "Enter" && e.key !== " ")
-        return;
-    e.preventDefault();
-    activate();
-};
 const countWords = (text = "") => {
     const t = text.trim();
     if (!t)
@@ -33,13 +30,6 @@ const NoteTextArea = forwardRef(function NoteTextArea({ width = "100%", handleSu
     const [titleShow, setTitleShow] = useState(false);
     const [files, setFiles] = useState([]);
     const [fileError, setFileError] = useState("");
-    const [isSaveDisabled, setIsSaveDisabled] = useState(false);
-    useEffect(() => {
-        setIsSaveDisabled(countWords(titleValue) > maxNoteWordCount);
-    }, [titleValue, maxNoteWordCount]);
-    useEffect(() => {
-        setIsSaveDisabled(countWords(noteValue) > maxNoteWordCount);
-    }, [noteValue, maxNoteWordCount]);
     useEffect(() => {
         if (isEditable) {
             setIsActive(true);
@@ -129,14 +119,19 @@ const NoteTextArea = forwardRef(function NoteTextArea({ width = "100%", handleSu
     };
     const noteWordCount = countWords(noteValue);
     const isOverLimit = noteWordCount > maxNoteWordCount;
+    const isSaveDisabled = isOverLimit || countWords(titleValue) > maxNoteWordCount;
+    const activeBandBg = bandOn(theme.colors.gray[50], theme.colors.background[50]);
     const collapsedHoverBg = resolveHoverTint(theme.colors.gray[50], theme.colors.background[50]);
-    const activeControlHoverBg = resolveHoverTint(theme.colors.gray[100], theme.colors.gray[50]);
+    const activeControlHoverBg = resolveHoverTint(theme.colors.gray[100], activeBandBg);
+    const chipBg = bandOn(theme.colors.gray[100], activeBandBg);
+    const chipInk = liftToContrast(theme.colors.textMuted, chipBg, AA_NORMAL_TEXT);
+    const chipRemoveHoverBg = bandOn(theme.colors.gray[200], chipBg);
     // NOTE: drawn inset because the rounded shell clips overflow.
     const placeholderFocusRing = {
         outline: "2px solid transparent",
         boxShadow: insetFocusRingShadow(theme.colors),
     };
-    return (_jsxs(Box, { w: width, borderRadius: FIELD_RADIUS, overflow: "hidden", border: "1px solid", borderColor: isActive ? theme.colors.primary[500] : theme.colors.boxborder[500], bg: isActive ? theme.colors.gray[50] : theme.colors.background[50], transition: transitionFor(["border-color"]), children: [!isActive && (_jsxs(Flex, { px: 3, gap: 2, align: "center", cursor: "text", role: "button", tabIndex: 0, onClick: handleTextArea, onKeyDown: onActivationKey(handleTextArea), _focusVisible: placeholderFocusRing, bg: theme.colors.background[50], borderRadius: FIELD_RADIUS, minH: "2.5rem", transition: transitionFor(["background-color"]), _hover: { bg: collapsedHoverBg }, children: [_jsx(SquarePen, { size: 16, color: theme.colors.textMuted }), _jsx(Text, { color: theme.colors.textMuted, fontSize: "sm", children: customPlaceholder })] })), isActive && (_jsxs(_Fragment, { children: [_jsxs(Box, { bg: theme.colors.background[50], children: [titleShow && (_jsxs(_Fragment, { children: [_jsx(Input, { value: titleValue, onChange: (e) => {
+    return (_jsxs(Box, { w: width, borderRadius: FIELD_RADIUS, overflow: "hidden", border: "1px solid", borderColor: isActive ? theme.colors.primary[500] : theme.colors.boxborder[500], bg: isActive ? activeBandBg : theme.colors.background[50], transition: transitionFor(["border-color"]), children: [!isActive && (_jsxs(Flex, { px: 3, gap: 2, align: "center", cursor: "text", role: "button", tabIndex: 0, onClick: handleTextArea, onKeyDown: onActivationKey(handleTextArea), _focusVisible: placeholderFocusRing, bg: theme.colors.background[50], borderRadius: FIELD_RADIUS, minH: "2.5rem", transition: transitionFor(["background-color"]), _hover: { bg: collapsedHoverBg }, children: [_jsx(SquarePen, { size: 16, color: theme.colors.textMuted }), _jsx(Text, { color: theme.colors.textMuted, fontSize: "sm", children: customPlaceholder })] })), isActive && (_jsxs(_Fragment, { children: [_jsxs(Box, { bg: theme.colors.background[50], children: [titleShow && (_jsxs(_Fragment, { children: [_jsx(Input, { value: titleValue, onChange: (e) => {
                                             if (e.target.value.length === 0)
                                                 setTitleShow(false);
                                             setTitleValue(e.target.value);
@@ -157,7 +152,7 @@ const NoteTextArea = forwardRef(function NoteTextArea({ width = "100%", handleSu
                                     if (validFiles.length > 0) {
                                         setFiles((prev) => [...prev, ...validFiles]);
                                     }
-                                }, multiple: true }), fileError && (_jsx(Text, { color: theme.colors.semanticText.error, mt: 2, fontSize: "xs", children: fileError })), files.length > 0 && (_jsx(Flex, { mt: 3, gap: 2, wrap: "wrap", children: files.map((f, idx) => (_jsxs(Flex, { align: "center", gap: 2, pl: 2.5, pr: 1.5, py: 1, borderRadius: "full", bg: theme.colors.gray[100], maxW: "100%", children: [_jsx(FileIcon, { size: 13, color: theme.colors.textMuted }), _jsx(Text, { fontSize: "xs", color: theme.colors.text[700], isTruncated: true, maxW: "160px", children: shortenFileName(f.name) }), _jsx(Text, { fontSize: "xs", color: theme.colors.textMuted, whiteSpace: "nowrap", children: formatBytes(f.size) }), _jsx(Box, { as: "button", type: "button", display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "full", p: 0.5, color: theme.colors.textMuted, transition: transitionFor(["background-color", "color"]), _hover: { bg: theme.colors.gray[200], color: theme.colors.semanticText.error }, onClick: () => setFiles((prev) => prev.filter((fileItem) => fileItem !== f)), children: _jsx(X, { size: 13 }) })] }, idx))) }))] })] }))] }));
+                                }, multiple: true }), fileError && (_jsx(Text, { color: theme.colors.semanticText.error, mt: 2, fontSize: "xs", children: fileError })), files.length > 0 && (_jsx(Flex, { mt: 3, gap: 2, wrap: "wrap", children: files.map((f, idx) => (_jsxs(Flex, { align: "center", gap: 2, pl: 2.5, pr: 1.5, py: 1, borderRadius: "full", bg: chipBg, maxW: "100%", children: [_jsx(FileIcon, { size: 13, color: chipInk }), _jsx(Text, { fontSize: "xs", color: theme.colors.text[700], isTruncated: true, maxW: "160px", children: shortenFileName(f.name) }), _jsx(Text, { fontSize: "xs", color: chipInk, whiteSpace: "nowrap", children: formatBytes(f.size) }), _jsx(Box, { as: "button", type: "button", "aria-label": `Remove ${f.name}`, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "full", p: 0.5, color: chipInk, transition: transitionFor(["background-color", "color"]), _hover: { bg: chipRemoveHoverBg, color: theme.colors.semanticText.error }, onClick: () => setFiles((prev) => prev.filter((fileItem) => fileItem !== f)), children: _jsx(X, { size: 13 }) })] }, idx))) }))] })] }))] }));
 });
 NoteTextArea.displayName = "NoteTextArea";
 export default NoteTextArea;

package/dist/esm/Components/Notification/Notification.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Box, VStack, HStack, Text, Icon, Divider, Skeleton, SkeletonCircle, } from "@chakra-ui/react";
 import { Clock, AlertCircle, Calendar, X, User } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
@@ -10,8 +10,10 @@ import Avatar from "../Avatar/Avatar.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 { onActivationKey } from "../Common/activationKey.js";
 const CARD_TRANSITION = transitionFor(["box-shadow", "background-color", "border-color"], "base");
 const DISMISS_TRANSITION = transitionFor(["background-color", "color", "transform"], "base");
+const TICK_MS = 60000;
 /** Date-driven countdown card ("due in 3 days" / "overdue by 2 hours"). For inbox-style rows use `NotificationItem`, which cannot render a future date. */
 const Notification = ({ notification, onClose, showStatus, onClick, isLoading = false, colors, }) => {
     var _a, _b, _c, _d, _e, _f, _g;
@@ -31,6 +33,15 @@ const Notification = ({ notification, onClose, showStatus, onClick, isLoading =
     const startDate = useMemo(() => notification.startDate
         ? new Date(notification.startDate)
         : null, [notification.startDate]);
+    const hasTarget = Boolean(notification.dueDate || notification.endDate);
+    const [now, setNow] = useState(() => Date.now());
+    useEffect(() => {
+        if (!hasTarget || isLoading)
+            return;
+        setNow(Date.now());
+        const timer = setInterval(() => setNow(Date.now()), TICK_MS);
+        return () => clearInterval(timer);
+    }, [hasTarget, isLoading, notification.dueDate, notification.endDate]);
     const { timeLabel, diffDays } = useMemo(() => {
         const targetDate = notification.dueDate
             ? new Date(notification.dueDate)
@@ -39,8 +50,7 @@ const Notification = ({ notification, onClose, showStatus, onClick, isLoading =
                 : null;
         if (!targetDate)
             return { timeLabel: "", diffDays: null };
-        const now = new Date();
-        const diffMs = targetDate.getTime() - now.getTime();
+        const diffMs = targetDate.getTime() - now;
         const diffMinutes = Math.floor(diffMs / (1000 * 60));
         const diffHours = diffMinutes / 60;
         const diffDays = diffHours / 24;
@@ -54,11 +64,11 @@ const Notification = ({ notification, onClose, showStatus, onClick, isLoading =
         if (diffMs < 0) {
             const overdueMinutes = Math.abs(diffMinutes);
             if (overdueMinutes < 60)
-                label = `${typeLabel} overdue by ${overdueMinutes} minute${overdueMinutes === 1 ? "" : "s"} ago`;
+                label = `${typeLabel} overdue by ${overdueMinutes} minute${overdueMinutes === 1 ? "" : "s"}`;
             else if (overdueMinutes < 1440)
-                label = `${typeLabel} overdue by ${Math.floor(overdueMinutes / 60)} hour${Math.floor(overdueMinutes / 60) === 1 ? "" : "s"} ago`;
+                label = `${typeLabel} overdue by ${Math.floor(overdueMinutes / 60)} hour${Math.floor(overdueMinutes / 60) === 1 ? "" : "s"}`;
             else
-                label = `${typeLabel} overdue by ${Math.floor(overdueMinutes / 1440)} day${Math.floor(overdueMinutes / 1440) === 1 ? "" : "s"} ago`;
+                label = `${typeLabel} overdue by ${Math.floor(overdueMinutes / 1440)} day${Math.floor(overdueMinutes / 1440) === 1 ? "" : "s"}`;
         }
         else {
             if (diffMinutes < 60)
@@ -69,7 +79,7 @@ const Notification = ({ notification, onClose, showStatus, onClick, isLoading =
                 label = `${typeLabel} due in ${Math.ceil(diffDays)} day${Math.ceil(diffDays) === 1 ? "" : "s"}`;
         }
         return { timeLabel: label, diffDays };
-    }, [notification.dueDate, notification.endDate, notification.type]);
+    }, [notification.dueDate, notification.endDate, notification.type, now]);
     const getStatusColor = () => {
         if (diffDays === null)
             return theme.colors.textMuted;
@@ -99,29 +109,17 @@ const Notification = ({ notification, onClose, showStatus, onClick, isLoading =
             };
         return startDate.toLocaleString("en-US", options);
     }, [startDate, notification.type]);
-    // 🔄 If loading, show skeleton
     if (isLoading) {
         return (_jsx(Box, { bg: bgColor, border: "1px solid", borderColor: borderColor, borderRadius: "xl", p: 4, w: "100%", maxW: "400px", boxShadow: "sm", children: _jsxs(VStack, { align: "start", spacing: 3, w: "100%", children: [_jsxs(HStack, { spacing: 2, children: [_jsx(SkeletonCircle, { size: "4" }), _jsx(Skeleton, { height: "14px", width: "60%" })] }), _jsxs(HStack, { align: "center", spacing: 3, w: "100%", children: [_jsx(SkeletonCircle, { size: "8" }), _jsxs(VStack, { align: "start", spacing: 1, flex: "1", children: [_jsx(Skeleton, { height: "16px", width: "70%" }), _jsx(Skeleton, { height: "12px", width: "50%" })] })] }), _jsx(Divider, { borderColor: borderColor }), _jsxs(HStack, { justify: "space-between", w: "100%", children: [_jsx(Skeleton, { height: "12px", width: "40%" }), _jsx(Skeleton, { height: "12px", width: "30%" })] })] }) }));
     }
-    // 🧩 Normal render
-    return (_jsxs(Box, { bg: bgColor, border: "1px solid", borderColor: borderColor, borderRadius: "xl", p: 4, w: "100%", maxW: "400px", boxShadow: "sm", _hover: { boxShadow: "md" }, transition: CARD_TRANSITION, sx: reducedMotionSx(), position: "relative", children: [onClose && (_jsx(Box, { position: "absolute", top: "2", right: "2", cursor: "pointer", onClick: onClose, onKeyDown: (e) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                        e.preventDefault();
-                        onClose();
-                    }
-                }, role: "button", "aria-label": "Dismiss notification", tabIndex: 0, p: 1, borderRadius: "md", _hover: {
+    return (_jsxs(Box, { bg: bgColor, border: "1px solid", borderColor: borderColor, borderRadius: "xl", p: 4, w: "100%", maxW: "400px", boxShadow: "sm", _hover: { boxShadow: "md" }, transition: CARD_TRANSITION, sx: reducedMotionSx(), position: "relative", children: [onClose && (_jsx(Box, { position: "absolute", top: "2", right: "2", cursor: "pointer", onClick: onClose, onKeyDown: onActivationKey(() => onClose()), role: "button", "aria-label": "Dismiss notification", tabIndex: 0, p: 1, borderRadius: "md", _hover: {
                     bg: closeTone.bg,
                     color: closeTone.fg,
                     transform: "scale(1.1)",
-                }, transition: DISMISS_TRANSITION, sx: reducedMotionSx(), children: _jsx(X, { size: 16 }) })), _jsxs(VStack, { align: "start", spacing: 3, w: "100%", children: [_jsxs(HStack, { spacing: 2, children: [_jsx(Icon, { as: TimeIcon, color: dueLabelColor, boxSize: 4 }), _jsx(Text, { fontSize: "sm", color: dueLabelColor, fontWeight: 600, children: timeLabel })] }), _jsxs(HStack, { align: "center", spacing: 3, w: "100%", children: [_jsx(Avatar, { size: "sm", name: notification.host || notification.title, src: notification.avatarUrl || undefined }), _jsxs(VStack, { align: "start", spacing: 0, flex: "1", children: [_jsx(Text, { fontWeight: 700, fontSize: "md", color: titleColor, cursor: "pointer", _hover: { textColor: theme.colors.accentText }, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(notification.id, notification.type), ...(onClick && {
+                }, _focusVisible: focusVisibleRing(theme.colors), transition: DISMISS_TRANSITION, sx: reducedMotionSx(), children: _jsx(X, { size: 16 }) })), _jsxs(VStack, { align: "start", spacing: 3, w: "100%", children: [_jsxs(HStack, { spacing: 2, children: [_jsx(Icon, { as: TimeIcon, color: dueLabelColor, boxSize: 4 }), _jsx(Text, { fontSize: "sm", color: dueLabelColor, fontWeight: 600, children: timeLabel })] }), _jsxs(HStack, { align: "center", spacing: 3, w: "100%", children: [_jsx(Avatar, { size: "sm", name: notification.host || notification.title, src: notification.avatarUrl || undefined }), _jsxs(VStack, { align: "start", spacing: 0, flex: "1", children: [_jsx(Text, { fontWeight: 700, fontSize: "md", color: titleColor, cursor: "pointer", _hover: { textColor: theme.colors.accentText }, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(notification.id, notification.type), ...(onClick && {
                                             role: "button",
                                             tabIndex: 0,
-                                            onKeyDown: (e) => {
-                                                if (e.key !== "Enter" && e.key !== " ")
-                                                    return;
-                                                e.preventDefault();
-                                                onClick(notification.id, notification.type);
-                                            },
+                                            onKeyDown: onActivationKey(() => onClick(notification.id, notification.type)),
                                             _focusVisible: focusVisibleRing(theme.colors),
                                         }), children: notification.title }), notification.description && (_jsx(Text, { fontSize: "sm", color: textColor, children: notification.description }))] })] }), _jsx(Divider, { borderColor: borderColor }), _jsxs(HStack, { justify: "space-between", w: "100%", children: [_jsxs(HStack, { spacing: 2, children: [_jsx(Icon, { as: Calendar, color: metaColor, boxSize: 4 }), _jsx(Text, { fontSize: "sm", color: metaColor, children: formattedStartDateTime })] }), _jsxs(HStack, { spacing: 2, children: [_jsx(Icon, { as: User, color: metaColor, boxSize: 4 }), notification.host && (_jsx(Text, { fontSize: "sm", color: metaColor, children: notification.host }))] }), showStatus && (_jsx(Box, { boxSize: "3", bg: getStatusColor(), borderRadius: "full" }))] })] })] }));
 };

package/dist/esm/Components/NotificationBell/notificationHelpers.js

@@ -72,20 +72,26 @@ const MINUTE = 60;
 const HOUR = MINUTE * 60;
 const DAY = HOUR * 24;
 const WEEK = DAY * 7;
+export const DEFAULT_RELATIVE_TIME_LABELS = {
+    justNow: "Just now",
+    minutesAgo: (count) => `${count}m ago`,
+    hoursAgo: (count) => `${count}h ago`,
+    daysAgo: (count) => `${count}d ago`,
+};
 /** "Just now" / "5m ago" / "3h ago" / "2d ago"; falls back to a short date past a week. */
-export function formatRelativeTime(value, now = Date.now()) {
+export function formatRelativeTime(value, now = Date.now(), { labels = DEFAULT_RELATIVE_TIME_LABELS, locale = "en-US" } = {}) {
     const then = toDate(value);
     const nowMs = typeof now === "number" ? now : now.getTime();
     const diffSec = Math.max(0, Math.round((nowMs - then.getTime()) / 1000));
     if (diffSec < MINUTE)
-        return "Just now";
+        return labels.justNow;
     if (diffSec < HOUR)
-        return `${Math.floor(diffSec / MINUTE)}m ago`;
+        return labels.minutesAgo(Math.floor(diffSec / MINUTE));
     if (diffSec < DAY)
-        return `${Math.floor(diffSec / HOUR)}h ago`;
+        return labels.hoursAgo(Math.floor(diffSec / HOUR));
     if (diffSec < WEEK)
-        return `${Math.floor(diffSec / DAY)}d ago`;
-    return then.toLocaleDateString("en-US", { day: "2-digit", month: "short" });
+        return labels.daysAgo(Math.floor(diffSec / DAY));
+    return then.toLocaleDateString(locale, { day: "2-digit", month: "short" });
 }
 /** The tickets/hrms formula: max(min, viewport bottom edge - panel top - gutter), remeasured on resize. */
 export function useAnchoredPanelHeight(ref, options) {

package/dist/esm/Components/OffersList/OffersList.js

@@ -7,6 +7,7 @@ import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
 import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { tonalHover } from "../CheckoutKit/tonalHover.js";
 const COPIED_MS = 1600;
 const DEFAULT_LABELS = {
     summary: (count, best) => `Offers (${count}) · Best: ${best}`,
@@ -30,6 +31,7 @@ const writeToClipboard = (code) => {
 const OffersList = ({ offers, bestOfferId, isOpen, defaultOpen = false, onOpenChange, onCopy, labels, "data-testid": testId, }) => {
     var _a;
     const { colors } = useCustomTheme();
+    const hoverFill = tonalHover(colors);
     const panelId = useId();
     const [innerOpen, setInnerOpen] = useState(defaultOpen);
     const [copiedId, setCopiedId] = useState(null);
@@ -63,7 +65,7 @@ const OffersList = ({ offers, bestOfferId, isOpen, defaultOpen = false, onOpenCh
         }, COPIED_MS);
         onCopy === null || onCopy === void 0 ? void 0 : onCopy(offer);
     };
-    return (_jsxs(Box, { bg: colors.background[100], borderRadius: "xl", overflow: "hidden", "data-testid": testId, children: [_jsxs(Flex, { as: "button", type: "button", w: "100%", minH: "3rem", px: 4, py: 3, align: "center", gap: 3, textAlign: "left", borderRadius: "xl", color: colors.header[900], "aria-expanded": open, "aria-controls": panelId, onClick: toggle, transition: transitionFor(["background-color"]), _hover: { bg: colors.background[200] }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: [_jsx(Box, { as: "span", "aria-hidden": true, display: "inline-flex", flexShrink: 0, color: colors.accentText, children: _jsx(Tag, { size: 18 }) }), _jsx(Text, { as: "span", flex: "1", minW: 0, fontSize: "sm", fontWeight: 600, noOfLines: open ? undefined : 1, children: summary }), _jsx(Box, { as: "span", "aria-hidden": true, display: "inline-flex", flexShrink: 0, color: colors.textMuted, transform: open ? "rotate(180deg)" : "rotate(0deg)", transition: transitionFor(["transform"]), sx: reducedMotionSx(), children: _jsx(ChevronDown, { size: 18 }) })] }), _jsx(Box, { id: panelId, hidden: !open, children: _jsx(Box, { as: "ul", listStyleType: "none", m: 0, px: 4, pb: 2, children: offers.map((offer) => {
+    return (_jsxs(Box, { bg: colors.background[100], borderRadius: "xl", overflow: "hidden", "data-testid": testId, children: [_jsxs(Flex, { as: "button", type: "button", w: "100%", minH: "3rem", px: 4, py: 3, align: "center", gap: 3, textAlign: "left", borderRadius: "xl", color: colors.header[900], "aria-expanded": open, "aria-controls": panelId, onClick: toggle, transition: transitionFor(["background-color"]), _hover: { bg: hoverFill }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: [_jsx(Box, { as: "span", "aria-hidden": true, display: "inline-flex", flexShrink: 0, color: colors.accentText, children: _jsx(Tag, { size: 18 }) }), _jsx(Text, { as: "span", flex: "1", minW: 0, fontSize: "sm", fontWeight: 600, noOfLines: open ? undefined : 1, children: summary }), _jsx(Box, { as: "span", "aria-hidden": true, display: "inline-flex", flexShrink: 0, color: colors.textMuted, transform: open ? "rotate(180deg)" : "rotate(0deg)", transition: transitionFor(["transform"]), sx: reducedMotionSx(), children: _jsx(ChevronDown, { size: 18 }) })] }), _jsx(Box, { id: panelId, hidden: !open, children: _jsx(Box, { as: "ul", listStyleType: "none", m: 0, px: 4, pb: 2, children: offers.map((offer) => {
                         const copied = copiedId === offer.id;
                         const { code } = offer;
                         return (_jsxs(Flex, { as: "li", position: "relative", align: "center", justify: "space-between", gap: 3, py: 3, sx: {
@@ -76,7 +78,7 @@ const OffersList = ({ offers, bestOfferId, isOpen, defaultOpen = false, onOpenCh
                                     height: "1px",
                                     background: colors.background[200],
                                 },
-                            }, children: [_jsxs(Box, { minW: 0, children: [_jsx(Text, { fontSize: "sm", fontWeight: 600, color: colors.header[900], children: offer.title }), _jsx(Text, { mt: 0.5, fontSize: "sm", lineHeight: 1.45, color: colors.textMuted, children: offer.detail })] }), code ? (_jsxs(Flex, { align: "center", gap: 1, flexShrink: 0, children: [_jsx(Text, { as: "span", px: 2.5, py: 1, borderRadius: "md", bg: colors.background[200], color: colors.header[900], fontSize: "xs", fontWeight: 700, letterSpacing: "0.06em", sx: NUMERIC_TEXT, children: code }), _jsxs(Flex, { as: "button", type: "button", align: "center", gap: 1.5, minH: "2.75rem", px: 3, borderRadius: "lg", fontSize: "sm", fontWeight: 600, color: colors.accentText, "aria-label": copied ? undefined : copy.copyCode(code), onClick: () => copyCode(offer, code), transition: transitionFor(["background-color"]), _hover: { bg: colors.background[200] }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: [copied ? _jsx(Check, { size: 16, "aria-hidden": true }) : null, _jsx("span", { children: copied ? copy.copied : copy.copy })] })] })) : null] }, offer.id));
+                            }, children: [_jsxs(Box, { minW: 0, children: [_jsx(Text, { fontSize: "sm", fontWeight: 600, color: colors.header[900], children: offer.title }), _jsx(Text, { mt: 0.5, fontSize: "sm", lineHeight: 1.45, color: colors.textMuted, children: offer.detail })] }), code ? (_jsxs(Flex, { align: "center", gap: 1, flexShrink: 0, children: [_jsx(Text, { as: "span", px: 2.5, py: 1, borderRadius: "md", bg: colors.background[200], color: colors.header[900], fontSize: "xs", fontWeight: 700, letterSpacing: "0.06em", sx: NUMERIC_TEXT, children: code }), _jsxs(Flex, { as: "button", type: "button", align: "center", gap: 1.5, minH: "2.75rem", px: 3, borderRadius: "lg", fontSize: "sm", fontWeight: 600, color: colors.accentText, "aria-label": copied ? undefined : copy.copyCode(code), onClick: () => copyCode(offer, code), transition: transitionFor(["background-color"]), _hover: { bg: hoverFill }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: [copied ? _jsx(Check, { size: 16, "aria-hidden": true }) : null, _jsx("span", { children: copied ? copy.copied : copy.copy })] })] })) : null] }, offer.id));
                     }) }) }), _jsx(VisuallyHidden, { "aria-live": "polite", children: message })] }));
 };
 export default OffersList;