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

package/dist/Components/NavLauncher/launcherParts.js

@@ -3,7 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HighlightOptionsProvider = exports.useRowHover = exports.stretchedLink = exports.useRowFocus = exports.titleInset = exports.activeRowSurface = exports.activeRowStyle = exports.ROW_CONTAINER = exports.WIDE_ROW = exports.isPlainClick = exports.useTouchDensity = exports.TouchDensity = exports.ITEM_SELECTOR = void 0;
+exports.HighlightOptionsProvider = exports.useRowHover = exports.stretchedLink = exports.useRowFocus = exports.titleInset = exports.activeRowSurface = exports.activeRowStyle = exports.ROW_CONTAINER = exports.WIDE_ROW = exports.isPlainClick = exports.copyHint = exports.RulePlaneProvider = exports.useTouchDensity = exports.TouchDensity = exports.ITEM_SELECTOR = void 0;
+exports.HintLabel = HintLabel;
 exports.CountBadge = CountBadge;
 exports.NewTag = NewTag;
 exports.SectionHeader = SectionHeader;
@@ -21,11 +22,14 @@ const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const react_2 = require("react");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const motion_1 = require("../../Theme/chakra/motion");
 const ringShadow_1 = require("../../Theme/chakra/ringShadow");
 const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
-const motion_1 = require("../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../Theme/tokens/primitives/motion");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const OverflowToolTip_1 = __importDefault(require("../ToolTip/OverflowToolTip"));
 const AppMark_1 = __importDefault(require("../AppSwitcher/AppMark"));
@@ -38,6 +42,35 @@ const TouchDensityContext = (0, react_2.createContext)(false);
 exports.TouchDensity = TouchDensityContext.Provider;
 const useTouchDensity = () => (0, react_2.useContext)(TouchDensityContext);
 exports.useTouchDensity = useTouchDensity;
+const RulePlaneContext = (0, react_2.createContext)("raised");
+exports.RulePlaneProvider = RulePlaneContext.Provider;
+const useSectionRule = () => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const plane = (0, react_2.useContext)(RulePlaneContext);
+    return plane === "recess"
+        ? (0, planeStep_1.ruleOn)(colors, colors.backgroundColor.subtle)
+        : (0, surfaceRaised_1.raisedRule)(colors);
+};
+const copyHint = (base, copied, isCopied) => ({
+    text: isCopied ? copied : base,
+    reserve: isCopied ? base : copied,
+    isAccent: isCopied,
+});
+exports.copyHint = copyHint;
+function HintLabel({ text, reserve, isAccent = false, }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_1.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: (0, motion_2.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",
+            },
+            ...(0, motion_1.reducedMotionSx)(),
+        }, children: text }));
+}
 const isPlainClick = (event) => event.button === 0 &&
     !event.metaKey &&
     !event.ctrlKey &&
@@ -129,13 +162,14 @@ function NewTag({ label }) {
 }
 function SectionHeader({ label, meta, isDecorative = false, isRail = false, hasCount = true, }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsx)(react_1.Heading, { as: isDecorative ? "div" : "h2", m: 0, fontSize: "12.5px", fontWeight: 600, letterSpacing: "-0.003em", color: colors.text[900], children: label }), meta ? ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "11.5px", color: colors.textMuted, sx: { fontVariantNumeric: "tabular-nums" }, children: meta })) : null] }));
+    const rule = useSectionRule();
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "baseline", gap: "6px", px: isRail ? "4px" : "8px", pb: "5px", mb: hasCount ? 0 : "2px", borderBottomWidth: "1px", borderColor: rule, "aria-hidden": isDecorative || undefined, children: [(0, jsx_runtime_1.jsx)(react_1.Heading, { as: isDecorative ? "div" : "h2", m: 0, fontSize: "xs-plus", fontWeight: 600, letterSpacing: "-0.003em", color: colors.text[900], children: label }), meta ? ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs-minus", color: colors.textMuted, sx: { fontVariantNumeric: "tabular-nums" }, children: meta })) : null] }));
 }
 function RowIcon({ icon: Icon, size, stroke = 1.75, mt }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     if (!Icon)
         return null;
-    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: colors.textMuted, display: "inline-flex", flexShrink: 0, mt: mt, transition: (0, motion_1.transitionFor)(["color"]), _groupHover: { color: colors.accentText }, _groupFocusWithin: { color: colors.accentText }, sx: { "[data-reveal=true] &": { color: colors.accentText } }, children: (0, jsx_runtime_1.jsx)(Icon, { size: size, strokeWidth: stroke, "aria-hidden": true }) }));
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: colors.textMuted, display: "inline-flex", flexShrink: 0, mt: mt, transition: (0, motion_2.transitionFor)(["color"]), _groupHover: { color: colors.accentText }, _groupFocusWithin: { color: colors.accentText }, sx: { "[data-reveal=true] &": { color: colors.accentText } }, children: (0, jsx_runtime_1.jsx)(Icon, { size: size, strokeWidth: stroke, "aria-hidden": true }) }));
 }
 const HighlightOptionsContext = (0, react_2.createContext)(undefined);
 exports.HighlightOptionsProvider = HighlightOptionsContext.Provider;
@@ -152,14 +186,14 @@ function RowActions({ children }) {
             [NARROW_ROW]: {
                 [revealed]: {
                     backgroundColor: (0, exports.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 }));
 }
 function RowTip({ text }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsx)(react_1.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 ((0, jsx_runtime_1.jsx)(react_1.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 }));
 }
 function ModuleRow({ module, keyScreens, isPinned, onTogglePin, pinId, labels, link, }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
@@ -169,7 +203,7 @@ function ModuleRow({ module, keyScreens, isPinned, onTogglePin, pinId, labels, l
     const isTouch = (0, exports.useTouchDensity)();
     const base = typeof module.badge === "number" || module.badge ? 24 : 0;
     const open = base + (onTogglePin ? 46 : 24);
-    return ((0, jsx_runtime_1.jsxs)(react_1.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: (0, motion_1.transitionFor)(["background-color"]), _hover: hover._hover, _focusWithin: hover._focusWithin, sx: { ...focus.sx, ...exports.ROW_CONTAINER }, children: [(0, jsx_runtime_1.jsx)(RowIcon, { icon: module.icon, size: 16, mt: "2px" }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "6px", h: "19px", minW: 0, sx: (0, exports.titleInset)(base, open), children: [(0, jsx_runtime_1.jsx)(OverflowToolTip_1.default, { label: module.label, placement: "top-start", children: (0, jsx_runtime_1.jsx)(react_1.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: (0, exports.stretchedLink)("8px"), children: module.label }) }), module.isNew ? (0, jsx_runtime_1.jsx)(NewTag, { label: labels.newBadge }) : null] }), keyScreens.length ? ((0, jsx_runtime_1.jsx)(OverflowToolTip_1.default, { label: keyScreens.map((screen) => screen.label).join(" · "), placement: "bottom-start", children: (0, jsx_runtime_1.jsx)(react_1.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) => ((0, jsx_runtime_1.jsxs)(react_2.Fragment, { children: [i > 0 ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", "aria-hidden": true, mx: "5px", opacity: 0.7, children: "\u00B7" })) : null, (0, jsx_runtime_1.jsx)(react_1.Box, { as: link.linkAs, href: screen.href, "data-launcher-item": true, onClick: link.onPlainClick, color: "inherit", borderRadius: "sm", position: "relative", zIndex: 1, _hover: {
+    return ((0, jsx_runtime_1.jsxs)(react_1.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: (0, motion_2.transitionFor)(["background-color"]), _hover: hover._hover, _focusWithin: hover._focusWithin, sx: { ...focus.sx, ...exports.ROW_CONTAINER }, children: [(0, jsx_runtime_1.jsx)(RowIcon, { icon: module.icon, size: 16, mt: "2px" }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "6px", h: "19px", minW: 0, sx: (0, exports.titleInset)(base, open), children: [(0, jsx_runtime_1.jsx)(OverflowToolTip_1.default, { label: module.label, placement: "top-start", children: (0, jsx_runtime_1.jsx)(react_1.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: (0, exports.stretchedLink)("lg"), children: module.label }) }), module.isNew ? (0, jsx_runtime_1.jsx)(NewTag, { label: labels.newBadge }) : null] }), keyScreens.length ? ((0, jsx_runtime_1.jsx)(OverflowToolTip_1.default, { label: keyScreens.map((screen) => screen.label).join(" · "), placement: "bottom-start", children: (0, jsx_runtime_1.jsx)(react_1.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) => ((0, jsx_runtime_1.jsxs)(react_2.Fragment, { children: [i > 0 ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", "aria-hidden": true, mx: "5px", opacity: 0.7, children: "\u00B7" })) : null, (0, jsx_runtime_1.jsx)(react_1.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] }), (0, jsx_runtime_1.jsxs)(RowActions, { children: [(0, jsx_runtime_1.jsx)(CountBadge, { value: module.badge }), onTogglePin ? ((0, jsx_runtime_1.jsx)(PinToggle_1.default, { isPinned: isPinned, label: isPinned ? labels.unpin(module.label) : labels.pin(module.label), title: "", onToggle: onTogglePin })) : null, (0, jsx_runtime_1.jsx)(NewTabLink_1.default, { href: module.href, label: labels.openInNewTab(module.label), tip: labels.newTabTip, linkAs: link.linkAs })] }), onTogglePin ? ((0, jsx_runtime_1.jsx)(RowTip, { text: isPinned ? labels.unpinTip : labels.pinTip })) : null] }));
@@ -180,11 +214,11 @@ function RailRow({ screen, module, link, isStrong = false, trailing, pinId, }) {
     const hover = (0, exports.useRowHover)();
     const focus = (0, exports.useRowFocus)();
     const isTouch = (0, exports.useTouchDensity)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { "data-group": true, position: "relative", align: "center", gap: "10px", h: isTouch ? "44px" : "32px", pl: "8px", pr: "4px", borderRadius: "8px", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: hover._hover, _focusWithin: hover._focusWithin, sx: focus.sx, children: [(0, jsx_runtime_1.jsx)(RowIcon, { icon: (_a = screen.icon) !== null && _a !== void 0 ? _a : module.icon, size: 15 }), (0, jsx_runtime_1.jsx)(OverflowToolTip_1.default, { label: screen.label, placement: "top-start", children: (0, jsx_runtime_1.jsx)(react_1.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: (0, exports.stretchedLink)("8px"), children: screen.label }) }), (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "relative", zIndex: 1, align: "center", gap: "2px", children: trailing })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { "data-group": true, position: "relative", align: "center", gap: "10px", h: isTouch ? "44px" : "32px", pl: "8px", pr: "4px", borderRadius: "lg", transition: (0, motion_2.transitionFor)(["background-color"]), _hover: hover._hover, _focusWithin: hover._focusWithin, sx: focus.sx, children: [(0, jsx_runtime_1.jsx)(RowIcon, { icon: (_a = screen.icon) !== null && _a !== void 0 ? _a : module.icon, size: 15 }), (0, jsx_runtime_1.jsx)(OverflowToolTip_1.default, { label: screen.label, placement: "top-start", children: (0, jsx_runtime_1.jsx)(react_1.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: (0, exports.stretchedLink)("lg"), children: screen.label }) }), (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "relative", zIndex: 1, align: "center", gap: "2px", children: trailing })] }));
 }
 function PinTextButton({ label, text, onToggle }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.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: (0, motion_1.transitionFor)(["opacity", "background-color"]), sx: { ...(0, revealStyles_1.revealStyles)(colors), "@media (hover: none)": { opacity: 1 } }, onClick: (event) => {
+    return ((0, jsx_runtime_1.jsxs)(react_1.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: (0, surfaceRaised_1.raisedRule)(colors), bg: colors.surfaceRaised, color: colors.text[700], fontSize: "xs-minus", fontWeight: 600, cursor: "pointer", opacity: 0, transition: (0, motion_2.transitionFor)(["opacity", "background-color"]), sx: { ...(0, revealStyles_1.revealStyles)(colors), "@media (hover: none)": { opacity: 1 } }, onClick: (event) => {
             event.preventDefault();
             event.stopPropagation();
             onToggle();
@@ -196,7 +230,7 @@ function PinnedTile({ screen, module, link, labels, onTogglePin, }) {
     const Icon = (_a = screen.icon) !== null && _a !== void 0 ? _a : module.icon;
     const focus = (0, exports.useRowFocus)(true);
     const isTouch = (0, exports.useTouchDensity)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.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: (0, motion_1.transitionFor)(["border-color", "background-color"]), _hover: { borderColor: colors.gray[300] }, sx: focus.sx, children: [Icon ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", display: "inline-flex", flexShrink: 0, color: colors.accentText, children: (0, jsx_runtime_1.jsx)(Icon, { size: 15, strokeWidth: 1.8, "aria-hidden": true }) })) : null, (0, jsx_runtime_1.jsx)(OverflowToolTip_1.default, { label: screen.label, placement: "top-start", children: (0, jsx_runtime_1.jsx)(react_1.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: (0, exports.stretchedLink)("9px"), children: screen.label }) }), (0, jsx_runtime_1.jsx)(CountBadge, { value: screen.badge, size: "tile" }), onTogglePin ? ((0, jsx_runtime_1.jsx)(react_1.Box, { position: "relative", zIndex: 1, flexShrink: 0, w: "0", overflow: "hidden", transition: (0, motion_1.transitionFor)(["width"]), _groupHover: { w: "22px" }, _groupFocusWithin: { w: "22px" }, children: (0, jsx_runtime_1.jsx)(PinToggle_1.default, { isPinned: true, size: 12, label: labels.unpin(screen.label), title: labels.unpinTip, onToggle: onTogglePin }) })) : null] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.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: (0, surfaceRaised_1.raisedRule)(colors), bg: colors.surfaceRaised, transition: (0, motion_2.transitionFor)(["border-color", "background-color"]), _hover: { borderColor: colors.gray[300] }, sx: focus.sx, children: [Icon ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", display: "inline-flex", flexShrink: 0, color: colors.accentText, children: (0, jsx_runtime_1.jsx)(Icon, { size: 15, strokeWidth: 1.8, "aria-hidden": true }) })) : null, (0, jsx_runtime_1.jsx)(OverflowToolTip_1.default, { label: screen.label, placement: "top-start", children: (0, jsx_runtime_1.jsx)(react_1.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: (0, exports.stretchedLink)("9px"), children: screen.label }) }), (0, jsx_runtime_1.jsx)(CountBadge, { value: screen.badge, size: "tile" }), onTogglePin ? ((0, jsx_runtime_1.jsx)(react_1.Box, { position: "relative", zIndex: 1, flexShrink: 0, w: "0", overflow: "hidden", transition: (0, motion_2.transitionFor)(["width"]), _groupHover: { w: "22px" }, _groupFocusWithin: { w: "22px" }, children: (0, jsx_runtime_1.jsx)(PinToggle_1.default, { isPinned: true, size: 12, label: labels.unpin(screen.label), title: labels.unpinTip, onToggle: onTogglePin }) })) : null] }));
 }
 function AppsSection({ apps, hues, currentAppId, heading, hideHeading = false, onSelect, }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
@@ -216,7 +250,7 @@ function AppsSection({ apps, hues, currentAppId, heading, hideHeading = false, o
                                 }
                                 : {}), "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: (0, motion_1.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: (0, motion_2.transitionFor)(["background-color"]), _hover: interactive ? { bg: rows.active } : undefined, sx: {
                                 _focusVisible: rowRing,
                                 [focusRing_styles_1.FOCUS_VISIBLE_OVER_STATE]: rowRing,
                             }, children: [(0, jsx_runtime_1.jsx)(AppMark_1.default, { app: app, hue: hues[index], boxSize: "28px", iconSize: 15, muted: app.locked }), (0, jsx_runtime_1.jsx)(OverflowToolTip_1.default, { label: app.name, placement: "top-start", children: (0, jsx_runtime_1.jsx)(react_1.Text, { flex: 1, minW: 0, fontSize: "sm", fontWeight: "medium", noOfLines: 1, color: app.locked ? colors.textMuted : colors.text[900], children: app.name }) }), app.locked ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: lucide_react_1.Lock, size: 14, color: colors.textMuted, flexShrink: 0, "aria-hidden": true })) : null] }) }, app.id || app.name));

package/dist/Components/NavLauncher/searchLayout.d.ts

@@ -37,6 +37,7 @@ export type SearchLayout = {
     sizes: number[];
     total: number;
 };
+export declare const copiesOnEnter: (entry?: SearchEntry) => boolean;
 export declare const inScope: (groups: SearchGroup[], scope: string) => SearchGroup[];
 /** A scope's items as passed, unranked, for browsing before typing. */
 export declare const scopeGroups: (input: {

package/dist/Components/NavLauncher/searchLayout.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.layoutSearch = exports.takeTopHit = exports.countByScope = exports.scopeGroups = exports.inScope = void 0;
+exports.layoutSearch = exports.takeTopHit = exports.countByScope = exports.scopeGroups = exports.inScope = exports.copiesOnEnter = void 0;
 const spotlight_1 = require("./spotlight");
+const copiesOnEnter = (entry) => (entry === null || entry === void 0 ? void 0 : entry.type) === "answer" && !entry.item.run && !entry.item.href;
+exports.copiesOnEnter = copiesOnEnter;
 const inScope = (groups, scope) => scope === spotlight_1.SCOPE_ALL ? groups : groups.filter((g) => g.scope === scope);
 exports.inScope = inScope;
 /** A scope's items as passed, unranked, for browsing before typing. */

package/dist/Components/NavLauncher/spotlightParts.d.ts

@@ -21,7 +21,9 @@ type OptionCardProps = {
     describedBy?: string;
 };
 export declare function TopHitCard({ item, query, isActive, optionId, link, labels, onOpen, onHover, describedBy, }: OptionCardProps): import("react/jsx-runtime").JSX.Element;
-export declare function AnswerCard({ item, isActive, optionId, link, labels, onOpen, onHover, describedBy, }: Omit<OptionCardProps, "query">): import("react/jsx-runtime").JSX.Element;
+export declare function AnswerCard({ item, isActive, isCopied, optionId, link, labels, onOpen, onHover, describedBy, }: Omit<OptionCardProps, "query"> & {
+    isCopied: boolean;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function ShowMoreOption({ count, isActive, optionId, label, onExpand, onHover, }: {
     count: number;
     isActive: boolean;
@@ -38,10 +40,12 @@ export declare function FactList({ facts, labels, layout, onCopied, onCopyBlocke
     onCopied: () => void;
     onCopyBlocked: (node: HTMLElement | null) => void;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function PreviewPane({ item, placement, width, labels, onCopied, onCopyBlocked, }: {
+export declare function PreviewPane({ item, placement, width, enterCopies, isCopied, labels, onCopied, onCopyBlocked, }: {
     item?: LauncherResult;
     placement: "side" | "dock";
     width?: string;
+    enterCopies: boolean;
+    isCopied: boolean;
     labels: ResolvedLabels;
     onCopied: () => void;
     onCopyBlocked: (node: HTMLElement | null) => void;

package/dist/Components/NavLauncher/spotlightParts.js

@@ -16,6 +16,7 @@ const lucide_react_1 = require("lucide-react");
 const react_2 = require("react");
 const motion_1 = require("../../Theme/chakra/motion");
 const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const motion_2 = require("../../Theme/tokens/primitives/motion");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const Button_1 = __importDefault(require("../Button/Button"));
@@ -24,6 +25,17 @@ const Kbd_1 = require("../Kbd/Kbd");
 const launcherParts_1 = require("./launcherParts");
 exports.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,
+    },
+});
 function QuickActionsRow({ items, label, link, onRun, }) {
     return ((0, jsx_runtime_1.jsx)(react_1.Flex, { role: "group", "aria-label": label, "data-testid": "launcher-quick-actions", gap: "6px", minW: 0, flexWrap: "wrap", px: "4px", children: items.slice(0, exports.QUICK_ACTION_LIMIT).map((item) => {
             const Icon = item.icon;
@@ -46,7 +58,7 @@ const useCardSurface = (isActive) => {
         position: "relative",
         borderRadius: "xl",
         borderWidth: "1px",
-        borderColor: isActive ? edge : colors.boxborder[200],
+        borderColor: isActive ? edge : (0, surfaceRaised_1.raisedRule)(colors),
         bg: isActive ? fill : colors.surfaceRaised,
         transition: (0, motion_2.transitionFor)(["background-color", "border-color"]),
         sx: (0, motion_1.reducedMotionSx)(),
@@ -69,9 +81,9 @@ function TopHitCard({ item, query, isActive, optionId, link, labels, onOpen, onH
     return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { role: "presentation", "data-group": true, "data-reveal": isActive, direction: "column", gap: "10px", p: "12px", onMouseMove: onHover, ...surface, children: [(0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsx)(IconChip, { icon: item.icon, size: 40 }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", flex: 1, minW: 0, gap: "2px", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "md", lineHeight: "22px", fontWeight: 600, color: colors.text[900], noOfLines: 1, children: (0, jsx_runtime_1.jsx)(launcherParts_1.Highlight, { text: item.label, query: query }) }), meta ? ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "12.5px", color: colors.textMuted, noOfLines: 1, children: meta })) : null, item.keywordHint ? ((0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "xs", color: colors.textMuted, noOfLines: 1, children: [`${labels.matchedOn} “`, (0, jsx_runtime_1.jsx)(launcherParts_1.Highlight, { text: item.keywordHint, query: query }), "\u201D"] })) : null] }), (0, jsx_runtime_1.jsx)(launcherParts_1.CountBadge, { value: item.badge }), (0, jsx_runtime_1.jsx)(react_1.Box, { "aria-hidden": true, flexShrink: 0, sx: HIDE_ON_TOUCH, children: (0, jsx_runtime_1.jsx)(Kbd_1.KbdShortcut, { shortcut: "enter", size: "sm" }) })] }), (0, jsx_runtime_1.jsx)(CardAnchor, { item: item, link: link })] }));
+                }, children: [(0, jsx_runtime_1.jsx)(IconChip, { icon: item.icon, size: 40 }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", flex: 1, minW: 0, gap: "2px", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "md", lineHeight: "22px", fontWeight: 600, color: colors.text[900], noOfLines: 1, children: (0, jsx_runtime_1.jsx)(launcherParts_1.Highlight, { text: item.label, query: query }) }), meta ? ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xs-plus", color: colors.textMuted, noOfLines: 1, children: meta })) : null, item.keywordHint ? ((0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "xs", color: colors.textMuted, noOfLines: 1, children: [`${labels.matchedOn} “`, (0, jsx_runtime_1.jsx)(launcherParts_1.Highlight, { text: item.keywordHint, query: query }), "\u201D"] })) : null] }), (0, jsx_runtime_1.jsx)(launcherParts_1.CountBadge, { value: item.badge }), (0, jsx_runtime_1.jsx)(react_1.Box, { "aria-hidden": true, flexShrink: 0, visibility: isActive ? "visible" : "hidden", sx: HIDE_ON_TOUCH, children: (0, jsx_runtime_1.jsx)(Kbd_1.KbdShortcut, { shortcut: "enter", size: "sm" }) })] }), (0, jsx_runtime_1.jsx)(CardAnchor, { item: item, link: link })] }));
 }
-function AnswerCard({ item, isActive, optionId, link, labels, onOpen, onHover, describedBy, }) {
+function AnswerCard({ item, isActive, isCopied, optionId, link, labels, onOpen, onHover, describedBy, }) {
     var _a, _b;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const surface = useCardSurface(isActive);
@@ -80,15 +92,16 @@ function AnswerCard({ item, isActive, optionId, link, labels, onOpen, onHover, d
         value: item.label,
     };
     const acts = Boolean(item.href || item.run);
+    const hint = acts ? labels.hintOpen : labels.hintCopy;
     return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { role: "presentation", "data-group": true, p: "12px 14px", onMouseMove: onHover, ...surface, children: [(0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsx)(IconChip, { icon: item.icon, size: 36 }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", flex: 1, minW: 0, gap: "1px", children: [answer.label ? ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xs-minus", fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase", color: colors.textMuted, noOfLines: 1, children: answer.label })) : null, (0, jsx_runtime_1.jsx)(react_1.Text, { id: `${optionId}-value`, fontSize: "lg", lineHeight: "24px", fontWeight: 600, color: colors.text[900], noOfLines: 2, children: answer.value }), answer.hint ? ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xs", color: colors.textMuted, noOfLines: 1, children: answer.hint })) : null] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { "aria-hidden": true, align: "center", gap: "6px", flexShrink: 0, fontSize: "11.5px", color: colors.textMuted, sx: HIDE_ON_TOUCH, children: [(0, jsx_runtime_1.jsx)(Kbd_1.KbdShortcut, { shortcut: "enter", size: "xs" }), acts ? labels.hintOpen : labels.hintCopy] })] }), (0, jsx_runtime_1.jsx)(CardAnchor, { item: item, link: link })] }));
+                }, children: [(0, jsx_runtime_1.jsx)(IconChip, { icon: item.icon, size: 36 }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", flex: 1, minW: 0, gap: "1px", children: [answer.label ? ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xs-minus", fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase", color: colors.textMuted, noOfLines: 1, children: answer.label })) : null, (0, jsx_runtime_1.jsx)(react_1.Text, { id: `${optionId}-value`, fontSize: "lg", lineHeight: "24px", fontWeight: 600, color: colors.text[900], noOfLines: 2, children: answer.value }), answer.hint ? ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xs", color: colors.textMuted, noOfLines: 1, children: answer.hint })) : null] }), (0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsx)(react_1.Box, { display: "contents", sx: HIDE_ON_TOUCH, children: (0, jsx_runtime_1.jsx)(Kbd_1.KbdShortcut, { shortcut: "enter", size: "xs" }) }), (0, jsx_runtime_1.jsx)(launcherParts_1.HintLabel, { ...(0, launcherParts_1.copyHint)(hint, labels.copied, isCopied) })] })] }), (0, jsx_runtime_1.jsx)(CardAnchor, { item: item, link: link })] }));
 }
 function ShowMoreOption({ count, isActive, optionId, label, onExpand, onHover, }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const isTouch = (0, launcherParts_1.useTouchDensity)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.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: (0, rowStates_1.listRowBackgrounds)(colors).active }, sx: isActive ? (0, launcherParts_1.activeRowSurface)(colors) : undefined, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 14, strokeWidth: 2, "aria-hidden": true }), label(count)] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.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: (0, rowStates_1.listRowBackgrounds)(colors).active }, sx: isActive ? (0, launcherParts_1.activeRowSurface)(colors) : undefined, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 14, strokeWidth: 2, "aria-hidden": true }), label(count)] }));
 }
 const describeFacts = (facts) => facts.map((f) => `${f.label}: ${f.value}`).join("; ");
 exports.describeFacts = describeFacts;
@@ -96,13 +109,13 @@ function FactList({ facts, labels, layout, onCopied, onCopyBlocked, }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const values = (0, react_2.useRef)([]);
     const isPane = layout === "pane";
-    return ((0, jsx_runtime_1.jsx)(react_1.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) => ((0, jsx_runtime_1.jsxs)(react_1.Box, { minW: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { as: "dt", fontSize: "11.5px", lineHeight: "16px", color: colors.textMuted, children: fact.label }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "dd", m: 0, align: "center", gap: "2px", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { ref: (node) => {
+    return ((0, jsx_runtime_1.jsx)(react_1.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) => ((0, jsx_runtime_1.jsxs)(react_1.Box, { minW: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { as: "dt", fontSize: "xs-minus", lineHeight: "16px", color: colors.textMuted, children: fact.label }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "dd", m: 0, align: "center", gap: "2px", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_1.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 ? ((0, jsx_runtime_1.jsx)(CopyButton_1.default, { 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 ? ((0, jsx_runtime_1.jsx)(CopyButton_1.default, { 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}`))) }));
 }
-function PreviewPane({ item, placement, width, labels, onCopied, onCopyBlocked, }) {
+function PreviewPane({ item, placement, width, enterCopies, isCopied, labels, onCopied, onCopyBlocked, }) {
     var _a, _b, _c, _d, _e;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const isDock = placement === "dock";
-    return ((0, jsx_runtime_1.jsx)(react_1.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 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "10px", minW: 0, children: [(0, jsx_runtime_1.jsx)(IconChip, { icon: item.icon, size: isDock ? 28 : 36 }), (0, jsx_runtime_1.jsxs)(react_1.Box, { minW: 0, children: [(0, jsx_runtime_1.jsx)(react_1.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 ? ((0, jsx_runtime_1.jsx)(react_1.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) ? ((0, jsx_runtime_1.jsx)(FactList, { facts: item.facts, labels: labels, layout: isDock ? "inline" : "pane", onCopied: onCopied, onCopyBlocked: onCopyBlocked }, item.id)) : ((0, jsx_runtime_1.jsxs)(react_1.Flex, { "aria-hidden": true, align: "center", gap: "6px", fontSize: "xs", color: colors.textMuted, children: [(0, jsx_runtime_1.jsx)(Kbd_1.KbdShortcut, { shortcut: "enter", size: "xs" }), labels.hintOpen] }))] })) : null }));
+    return ((0, jsx_runtime_1.jsx)(react_1.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: (0, surfaceRaised_1.raisedRule)(colors), overflowY: "auto", children: item ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "10px", minW: 0, children: [(0, jsx_runtime_1.jsx)(IconChip, { icon: item.icon, size: isDock ? 28 : 36 }), (0, jsx_runtime_1.jsxs)(react_1.Box, { minW: 0, children: [(0, jsx_runtime_1.jsx)(react_1.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 ? ((0, jsx_runtime_1.jsx)(react_1.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) ? ((0, jsx_runtime_1.jsx)(FactList, { facts: item.facts, labels: labels, layout: isDock ? "inline" : "pane", onCopied: onCopied, onCopyBlocked: onCopyBlocked }, item.id)) : ((0, jsx_runtime_1.jsxs)(react_1.Flex, { "aria-hidden": true, align: "center", gap: "6px", fontSize: "xs", color: colors.textMuted, children: [(0, jsx_runtime_1.jsx)(Kbd_1.KbdShortcut, { shortcut: "enter", size: "xs" }), (0, jsx_runtime_1.jsx)(launcherParts_1.HintLabel, { ...(0, launcherParts_1.copyHint)(enterCopies ? labels.hintCopy : labels.hintOpen, labels.copied, isCopied) })] }))] })) : null }));
 }

package/dist/Components/NavLauncher/useCopiedFlash.d.ts

@@ -0,0 +1,6 @@
+export declare const COPIED_FLASH_MS = 1500;
+export declare function useCopiedFlash(): {
+    copiedId: string | null;
+    flash: (id: string) => void;
+    clear: () => void;
+};

package/dist/Components/NavLauncher/useCopiedFlash.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.COPIED_FLASH_MS = void 0;
+exports.useCopiedFlash = useCopiedFlash;
+const react_1 = require("react");
+exports.COPIED_FLASH_MS = 1500;
+function useCopiedFlash() {
+    const [copiedId, setCopiedId] = (0, react_1.useState)(null);
+    const timer = (0, react_1.useRef)();
+    (0, react_1.useEffect)(() => () => clearTimeout(timer.current), []);
+    const clear = (0, react_1.useCallback)(() => {
+        clearTimeout(timer.current);
+        setCopiedId(null);
+    }, []);
+    const flash = (0, react_1.useCallback)((id) => {
+        clearTimeout(timer.current);
+        setCopiedId(id);
+        timer.current = setTimeout(() => setCopiedId(null), exports.COPIED_FLASH_MS);
+    }, []);
+    return { copiedId, flash, clear };
+}

package/dist/Components/NavigationBar/NavigationBar.js

@@ -8,7 +8,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const Avatar_1 = __importDefault(require("../Avatar/Avatar"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
@@ -17,6 +16,8 @@ const statusTone_1 = require("../../Theme/tokens/builders/statusTone");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 const PersonChip_1 = __importDefault(require("../PersonChip/PersonChip"));
 const lucide_react_1 = require("lucide-react");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const BACKGROUND_TRANSITION = (0, motion_1.transitionFor)(["background"]);
 // Roomy enough to hover without aiming: the glyph is only 1.25rem.
 const SIDEBAR_TOGGLE_HIT = "2.5rem";
 function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavOnClick, handleLogout, logoutText, navigationBarText, sideBarToggole, onSideBarToggole, forceSideBarToggle = false, onSideBarPeek, leading, }) {
@@ -35,7 +36,7 @@ function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavO
         cursor: "pointer",
         border: "none",
         bg: "transparent",
-        transition: "background 0.15s",
+        transition: BACKGROUND_TRANSITION,
         _hover: { bg: barHoverBg },
     };
     const menuItemStyle = {
@@ -50,7 +51,7 @@ function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavO
         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 },
@@ -59,10 +60,10 @@ function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavO
                                         // 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: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", flexDirection: "column", maxH: "90vh", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { pt: 4, pb: 2, px: 4, children: (0, jsx_runtime_1.jsx)(PersonChip_1.default, { name: userName, imageUrl: userAvathar, secondary: userRole, orientation: "vertical", size: "xl", maxW: "100%" }) }), (0, jsx_runtime_1.jsx)(react_1.MenuDivider, { borderColor: (0, surfaceRaised_1.raisedRule)(theme.colors) }), (0, jsx_runtime_1.jsx)(react_1.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: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", flexDirection: "column", maxH: "90vh", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { pt: 4, pb: 2, px: 4, children: (0, jsx_runtime_1.jsx)(PersonChip_1.default, { name: userName, imageUrl: userAvathar, secondary: userRole, orientation: "vertical", size: "xl", maxW: "100%" }) }), (0, jsx_runtime_1.jsx)(react_1.MenuDivider, {}), (0, jsx_runtime_1.jsx)(react_1.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 ((0, jsx_runtime_1.jsxs)(react_1.MenuItem, { onClick: () => handleNavOnClick(menu.url), sx: menuItemStyle, children: [menu.icon && ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", flexShrink: 0, sx: { "& svg": { width: "16px", height: "16px" } }, children: menu === null || menu === void 0 ? void 0 : menu.icon })), (0, jsx_runtime_1.jsx)(react_1.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}`));
-                                                    }) }), (0, jsx_runtime_1.jsx)(react_1.MenuDivider, { borderColor: (0, surfaceRaised_1.raisedRule)(theme.colors) }), (0, jsx_runtime_1.jsxs)(react_1.MenuItem, { onClick: handleLogout, sx: {
+                                                    }) }), (0, jsx_runtime_1.jsx)(react_1.MenuDivider, {}), (0, jsx_runtime_1.jsxs)(react_1.MenuItem, { onClick: handleLogout, sx: {
                                                         ...menuItemStyle,
                                                         color: theme.colors.semanticText.error,
                                                         _hover: { bg: dangerTone.bg, color: dangerTone.fg },

package/dist/Components/NoteTextArea/NoteTextArea.js

@@ -6,16 +6,13 @@ const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const placeholderInk_1 = require("../../Theme/tokens/builders/placeholderInk");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
 const fieldStyles_1 = require("../Common/fieldStyles");
+const activationKey_1 = require("../Common/activationKey");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
-const onActivationKey = (activate) => (e) => {
-    if (e.key !== "Enter" && e.key !== " ")
-        return;
-    e.preventDefault();
-    activate();
-};
 const countWords = (text = "") => {
     const t = text.trim();
     if (!t)
@@ -35,13 +32,6 @@ const NoteTextArea = (0, react_1.forwardRef)(function NoteTextArea({ width = "10
     const [titleShow, setTitleShow] = (0, react_1.useState)(false);
     const [files, setFiles] = (0, react_1.useState)([]);
     const [fileError, setFileError] = (0, react_1.useState)("");
-    const [isSaveDisabled, setIsSaveDisabled] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
-        setIsSaveDisabled(countWords(titleValue) > maxNoteWordCount);
-    }, [titleValue, maxNoteWordCount]);
-    (0, react_1.useEffect)(() => {
-        setIsSaveDisabled(countWords(noteValue) > maxNoteWordCount);
-    }, [noteValue, maxNoteWordCount]);
     (0, react_1.useEffect)(() => {
         if (isEditable) {
             setIsActive(true);
@@ -131,14 +121,19 @@ const NoteTextArea = (0, react_1.forwardRef)(function NoteTextArea({ width = "10
     };
     const noteWordCount = countWords(noteValue);
     const isOverLimit = noteWordCount > maxNoteWordCount;
+    const isSaveDisabled = isOverLimit || countWords(titleValue) > maxNoteWordCount;
+    const activeBandBg = (0, planeStep_1.bandOn)(theme.colors.gray[50], theme.colors.background[50]);
     const collapsedHoverBg = (0, outlineRung_1.resolveHoverTint)(theme.colors.gray[50], theme.colors.background[50]);
-    const activeControlHoverBg = (0, outlineRung_1.resolveHoverTint)(theme.colors.gray[100], theme.colors.gray[50]);
+    const activeControlHoverBg = (0, outlineRung_1.resolveHoverTint)(theme.colors.gray[100], activeBandBg);
+    const chipBg = (0, planeStep_1.bandOn)(theme.colors.gray[100], activeBandBg);
+    const chipInk = (0, outlineRung_1.liftToContrast)(theme.colors.textMuted, chipBg, accentText_1.AA_NORMAL_TEXT);
+    const chipRemoveHoverBg = (0, planeStep_1.bandOn)(theme.colors.gray[200], chipBg);
     // NOTE: drawn inset because the rounded shell clips overflow.
     const placeholderFocusRing = {
         outline: "2px solid transparent",
         boxShadow: (0, focusRing_styles_1.insetFocusRingShadow)(theme.colors),
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { w: width, borderRadius: fieldStyles_1.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: (0, motion_1.transitionFor)(["border-color"]), children: [!isActive && ((0, jsx_runtime_1.jsxs)(react_2.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: fieldStyles_1.FIELD_RADIUS, minH: "2.5rem", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: collapsedHoverBg }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { size: 16, color: theme.colors.textMuted }), (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.textMuted, fontSize: "sm", children: customPlaceholder })] })), isActive && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { bg: theme.colors.background[50], children: [titleShow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Input, { value: titleValue, onChange: (e) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { w: width, borderRadius: fieldStyles_1.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: (0, motion_1.transitionFor)(["border-color"]), children: [!isActive && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { px: 3, gap: 2, align: "center", cursor: "text", role: "button", tabIndex: 0, onClick: handleTextArea, onKeyDown: (0, activationKey_1.onActivationKey)(handleTextArea), _focusVisible: placeholderFocusRing, bg: theme.colors.background[50], borderRadius: fieldStyles_1.FIELD_RADIUS, minH: "2.5rem", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: collapsedHoverBg }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { size: 16, color: theme.colors.textMuted }), (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.textMuted, fontSize: "sm", children: customPlaceholder })] })), isActive && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { bg: theme.colors.background[50], children: [titleShow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Input, { value: titleValue, onChange: (e) => {
                                             if (e.target.value.length === 0)
                                                 setTitleShow(false);
                                             setTitleValue(e.target.value);
@@ -146,7 +141,7 @@ const NoteTextArea = (0, react_1.forwardRef)(function NoteTextArea({ width = "10
                                             color: (0, placeholderInk_1.placeholderInk)(theme.colors),
                                         } }), (0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: theme.colors.gray[200] })] })), (0, jsx_runtime_1.jsx)(react_2.Box, { bg: theme.colors.background[50], minH: "76px", px: 3, pt: 2.5, position: "relative", children: (0, jsx_runtime_1.jsx)(react_2.Textarea, { ref: mergedNoteRef, value: noteValue, onChange: handleNoteChange, placeholder: customPlaceholder, "aria-label": noteAriaLabel, variant: "unstyled", resize: "none", minH: "76px", fontSize: "xs", color: theme.colors.text[700], _placeholder: {
                                         color: (0, placeholderInk_1.placeholderInk)(theme.colors),
-                                    }, style: { overflow: "hidden" }, p: 0 }) })] }), (0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: theme.colors.gray[200] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { px: 3, py: 2.5, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", w: "100%", gap: 3, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Attach files", hasArrow: true, placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", role: "button", tabIndex: 0, "aria-label": "Attach files", onClick: openFilePicker, onKeyDown: onActivationKey(openFilePicker), _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(theme.colors), cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", w: "1.75rem", h: "1.75rem", borderRadius: "md", color: theme.colors.textMuted, transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: activeControlHoverBg }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Paperclip, { size: 16 }) }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { h: "1rem", w: "1px", bg: theme.colors.gray[200] }), !titleShow ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: () => setTitleShow(true), px: 2, py: 1, borderRadius: "md", color: theme.colors.textMuted, fontWeight: 500, fontSize: "sm", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: activeControlHoverBg }, children: "+ Add a title" })) : ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: titleValue, hasArrow: true, isDisabled: !titleValue, children: (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.textMuted, fontSize: "sm", fontWeight: 500, isTruncated: true, maxW: "180px", children: titleValue || "Title" }) }))] }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 2.5, align: "center", ml: "auto", flexShrink: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", fontWeight: 500, color: isOverLimit ? theme.colors.semanticText.error : theme.colors.textMuted, whiteSpace: "nowrap", children: [noteWordCount, "/", maxNoteWordCount] }), cancelButtonHide ? null : ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleCloseTextArea, children: "Cancel" })), (0, jsx_runtime_1.jsxs)(react_2.Button, { size: "sm", variant: "solid", isLoading: !!saveButtonLoading, isDisabled: !noteValue || isSaveDisabled, onClick: () => handleSubmit(noteValue, titleValue, files), children: [saveButtonLoading ? ((0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "xs", thickness: "2px", mr: 2 })) : null, "Save"] })] })] }), (0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, id: fileInputId, type: "file", style: { display: "none" }, onChange: (e) => {
+                                    }, style: { overflow: "hidden" }, p: 0 }) })] }), (0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: theme.colors.gray[200] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { px: 3, py: 2.5, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", w: "100%", gap: 3, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Attach files", hasArrow: true, placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", role: "button", tabIndex: 0, "aria-label": "Attach files", onClick: openFilePicker, onKeyDown: (0, activationKey_1.onActivationKey)(openFilePicker), _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(theme.colors), cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", w: "1.75rem", h: "1.75rem", borderRadius: "md", color: theme.colors.textMuted, transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: activeControlHoverBg }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Paperclip, { size: 16 }) }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { h: "1rem", w: "1px", bg: theme.colors.gray[200] }), !titleShow ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: () => setTitleShow(true), px: 2, py: 1, borderRadius: "md", color: theme.colors.textMuted, fontWeight: 500, fontSize: "sm", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: activeControlHoverBg }, children: "+ Add a title" })) : ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: titleValue, hasArrow: true, isDisabled: !titleValue, children: (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.textMuted, fontSize: "sm", fontWeight: 500, isTruncated: true, maxW: "180px", children: titleValue || "Title" }) }))] }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 2.5, align: "center", ml: "auto", flexShrink: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", fontWeight: 500, color: isOverLimit ? theme.colors.semanticText.error : theme.colors.textMuted, whiteSpace: "nowrap", children: [noteWordCount, "/", maxNoteWordCount] }), cancelButtonHide ? null : ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleCloseTextArea, children: "Cancel" })), (0, jsx_runtime_1.jsxs)(react_2.Button, { size: "sm", variant: "solid", isLoading: !!saveButtonLoading, isDisabled: !noteValue || isSaveDisabled, onClick: () => handleSubmit(noteValue, titleValue, files), children: [saveButtonLoading ? ((0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "xs", thickness: "2px", mr: 2 })) : null, "Save"] })] })] }), (0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, id: fileInputId, type: "file", style: { display: "none" }, onChange: (e) => {
                                     const newFiles = Array.from(e.target.files || []);
                                     const validFiles = newFiles.filter((f) => f.size <= maxFileSize);
                                     const invalidFiles = newFiles.filter((f) => f.size > maxFileSize);
@@ -159,7 +154,7 @@ const NoteTextArea = (0, react_1.forwardRef)(function NoteTextArea({ width = "10
                                     if (validFiles.length > 0) {
                                         setFiles((prev) => [...prev, ...validFiles]);
                                     }
-                                }, multiple: true }), fileError && ((0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.semanticText.error, mt: 2, fontSize: "xs", children: fileError })), files.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.Flex, { mt: 3, gap: 2, wrap: "wrap", children: files.map((f, idx) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, pl: 2.5, pr: 1.5, py: 1, borderRadius: "full", bg: theme.colors.gray[100], maxW: "100%", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.File, { size: 13, color: theme.colors.textMuted }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: theme.colors.text[700], isTruncated: true, maxW: "160px", children: shortenFileName(f.name) }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: theme.colors.textMuted, whiteSpace: "nowrap", children: formatBytes(f.size) }), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "full", p: 0.5, color: theme.colors.textMuted, transition: (0, motion_1.transitionFor)(["background-color", "color"]), _hover: { bg: theme.colors.gray[200], color: theme.colors.semanticText.error }, onClick: () => setFiles((prev) => prev.filter((fileItem) => fileItem !== f)), children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 13 }) })] }, idx))) }))] })] }))] }));
+                                }, multiple: true }), fileError && ((0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.semanticText.error, mt: 2, fontSize: "xs", children: fileError })), files.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.Flex, { mt: 3, gap: 2, wrap: "wrap", children: files.map((f, idx) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, pl: 2.5, pr: 1.5, py: 1, borderRadius: "full", bg: chipBg, maxW: "100%", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.File, { size: 13, color: chipInk }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: theme.colors.text[700], isTruncated: true, maxW: "160px", children: shortenFileName(f.name) }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: chipInk, whiteSpace: "nowrap", children: formatBytes(f.size) }), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": `Remove ${f.name}`, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "full", p: 0.5, color: chipInk, transition: (0, motion_1.transitionFor)(["background-color", "color"]), _hover: { bg: chipRemoveHoverBg, color: theme.colors.semanticText.error }, onClick: () => setFiles((prev) => prev.filter((fileItem) => fileItem !== f)), children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 13 }) })] }, idx))) }))] })] }))] }));
 });
 NoteTextArea.displayName = "NoteTextArea";
 exports.default = NoteTextArea;

package/dist/Components/NoteTextArea/NoteTextAreaProps.d.ts

@@ -2,7 +2,9 @@
 export type NoteTextAreaProps = {
     width?: number | string;
     /** Save click with note, title and files; `resetState` is never passed. */
-    handleSubmit: (noteValue: string, titleValue: string, file: File[], resetState: void) => void;
+    handleSubmit: (noteValue: string, titleValue: string, file: File[], 
+    /** @deprecated Never passed; remove it from your handler. */
+    resetState: void) => void;
     /** Seeds the note only while isEditable is true; not a controlled value. */
     value?: string;
     /** Seeds and reveals the title input only while isEditable is true. */
@@ -11,8 +13,8 @@ export type NoteTextAreaProps = {
     file?: File[];
     /** Edit mode: opens expanded, seeds value/title/file, and keeps them after saving. */
     isEditable?: boolean;
-    /** Fires on Cancel; its argument is always false. */
-    handleCancel?: (isActive: boolean) => void;
+    /** Fires on Cancel. */
+    handleCancel?: (/** @deprecated Always false; do not read it. */ isActive: boolean) => void;
     /** Any transition to false while isEditable is not true clears the note, title and files — including after a failed save, not just success. */
     saveButtonLoading?: boolean;
     /** Per-file byte limit, default 1 MB; larger files are skipped with an error line. */