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

package/dist/Components/NavLauncher/spotlight.js

@@ -0,0 +1,202 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.itemFields = exports.SCOPE_ACTIONS = exports.SCOPE_SCREENS = exports.SCOPE_ALL = void 0;
+exports.createSpotlightIndex = createSpotlightIndex;
+exports.spotlightBoosts = spotlightBoosts;
+exports.searchSpotlight = searchSpotlight;
+exports.matchAnswers = matchAnswers;
+const engine_1 = require("./engine/engine");
+exports.SCOPE_ALL = "all";
+exports.SCOPE_SCREENS = "screens";
+exports.SCOPE_ACTIONS = "actions";
+const SHOWN_FIELDS = new Set(["keyword", "fact", "answer"]);
+const RELATIVE_CUTOFF = 0.25;
+const keywordFields = (keywords) => (typeof keywords === "string" ? keywords.split(/[,;|]/) : (keywords !== null && keywords !== void 0 ? keywords : []))
+    .map((k) => k.trim())
+    .filter(Boolean)
+    .map((text) => ({ name: "keyword", text, weight: 0.75 }));
+const label = (text) => ({
+    name: "label",
+    text,
+    weight: 1,
+});
+const itemFields = (item) => {
+    var _a;
+    return [
+        label(item.label),
+        ...keywordFields(item.keywords),
+        ...(item.context
+            ? [{ name: "context", text: item.context, weight: 0.45 }]
+            : []),
+        ...((_a = item.facts) !== null && _a !== void 0 ? _a : []).map((f) => ({
+            name: "fact",
+            text: `${f.label}: ${f.value}`,
+            weight: 0.6,
+        })),
+        ...(item.answer
+            ? [
+                { name: "answer", text: item.answer.label, weight: 0.9 },
+                { name: "answer", text: item.answer.value, weight: 0.5 },
+            ]
+            : []),
+    ];
+};
+exports.itemFields = itemFields;
+const decorate = (result, hit) => {
+    var _a;
+    return ({
+        ...result,
+        score: hit.score,
+        keywordHint: (_a = hit.matches.find((m) => SHOWN_FIELDS.has(m.field))) === null || _a === void 0 ? void 0 : _a.text,
+    });
+};
+function createSpotlightIndex(sections, actions, actionsLabel) {
+    var _a;
+    const documents = [];
+    const entries = [];
+    const groups = [];
+    const seen = new Set();
+    const add = (fields, entry) => {
+        documents.push({ id: entry.result.id, fields });
+        entries.push(entry);
+    };
+    for (const section of sections) {
+        const groupId = `section:${section.id}`;
+        groups.push({
+            id: groupId,
+            label: section.label,
+            scope: exports.SCOPE_SCREENS,
+            isSection: true,
+        });
+        for (const module of section.modules) {
+            if (module.screens.length === 0)
+                continue;
+            add([
+                label(module.label),
+                ...keywordFields(module.keywords),
+                { name: "context", text: section.label, weight: 0.35 },
+            ], {
+                groupId,
+                usageId: module.screens[0].id,
+                result: {
+                    id: `module:${module.id}`,
+                    kind: "module",
+                    label: module.label,
+                    icon: module.icon,
+                    badge: module.badge,
+                    isNew: module.isNew,
+                    href: module.href,
+                    screenId: module.screens[0].id,
+                },
+            });
+            for (const screen of module.screens) {
+                if (screen.label === module.label || seen.has(screen.id))
+                    continue;
+                seen.add(screen.id);
+                add([
+                    label(screen.label),
+                    ...keywordFields(screen.keywords),
+                    { name: "context", text: module.label, weight: 0.5 },
+                    { name: "section", text: section.label, weight: 0.3 },
+                ], {
+                    groupId,
+                    usageId: screen.id,
+                    result: {
+                        id: `screen:${screen.id}`,
+                        kind: "screen",
+                        label: screen.label,
+                        context: module.label,
+                        icon: (_a = screen.icon) !== null && _a !== void 0 ? _a : module.icon,
+                        badge: screen.badge,
+                        href: screen.href,
+                    },
+                });
+            }
+        }
+    }
+    if (actions === null || actions === void 0 ? void 0 : actions.length) {
+        groups.push({
+            id: exports.SCOPE_ACTIONS,
+            label: actionsLabel,
+            scope: exports.SCOPE_ACTIONS,
+            isSection: false,
+        });
+        for (const action of actions) {
+            add((0, exports.itemFields)(action), {
+                groupId: exports.SCOPE_ACTIONS,
+                result: { ...action, id: `action:${action.id}` },
+            });
+        }
+    }
+    return { index: (0, engine_1.createSearchIndex)(documents), entries, groups };
+}
+function spotlightBoosts(spot, usage) {
+    const byScreen = (0, engine_1.usageBoosts)(usage);
+    const out = {};
+    spot.entries.forEach((entry) => {
+        const boost = entry.usageId ? byScreen[entry.usageId] : undefined;
+        if (boost)
+            out[entry.result.id] = boost;
+    });
+    return out;
+}
+const searchGroup = (group, query, synonyms) => {
+    const hits = (0, engine_1.searchDocuments)(group.items.map((item) => ({ id: item.id, fields: (0, exports.itemFields)(item) })), query, { synonyms });
+    const result = (index) => ({
+        ...group.items[index],
+        id: `${group.id}:${group.items[index].id}`,
+    });
+    if (group.matchLocally)
+        return hits.map((hit) => decorate(result(hit.index), hit));
+    const byIndex = new Map(hits.map((hit) => [hit.index, hit]));
+    return group.items.map((_, index) => {
+        const hit = byIndex.get(index);
+        return hit ? decorate(result(index), hit) : { ...result(index), score: 0 };
+    });
+};
+/** Ranked groups; local rows under 25% of the best score are dropped. */
+function searchSpotlight(spot, input) {
+    var _a, _b, _c, _d;
+    if (!input.query.trim())
+        return [];
+    const hits = (0, engine_1.searchIndex)(spot.index, input.query, {
+        synonyms: input.synonyms,
+        boosts: input.boosts,
+    });
+    const byGroup = new Map();
+    for (const hit of hits) {
+        const entry = spot.entries[hit.index];
+        const rows = (_a = byGroup.get(entry.groupId)) !== null && _a !== void 0 ? _a : [];
+        rows.push(decorate(entry.result, hit));
+        byGroup.set(entry.groupId, rows);
+    }
+    const groups = spot.groups.map((g) => {
+        var _a;
+        return ({
+            ...g,
+            items: (_a = byGroup.get(g.id)) !== null && _a !== void 0 ? _a : [],
+        });
+    });
+    for (const group of (_b = input.extraResults) !== null && _b !== void 0 ? _b : []) {
+        groups.push({
+            id: group.id,
+            label: group.label,
+            scope: (_c = group.scope) !== null && _c !== void 0 ? _c : group.id,
+            isSection: false,
+            items: searchGroup(group, input.query, input.synonyms),
+        });
+    }
+    const remote = new Set((_d = input.extraResults) === null || _d === void 0 ? void 0 : _d.filter((g) => !g.matchLocally).map((g) => g.id));
+    const floor = RELATIVE_CUTOFF *
+        Math.max(0, ...groups.flatMap((g) => g.items.map((i) => { var _a; return (_a = i.score) !== null && _a !== void 0 ? _a : 0; })));
+    return groups
+        .map((g) => remote.has(g.id)
+        ? g
+        : { ...g, items: g.items.filter((i) => { var _a; return ((_a = i.score) !== null && _a !== void 0 ? _a : 0) >= floor; }) })
+        .filter((g) => g.items.length > 0);
+}
+function matchAnswers(answers, query, synonyms) {
+    if (!(answers === null || answers === void 0 ? void 0 : answers.length))
+        return [];
+    return searchGroup({ id: "answer", label: "", items: answers, matchLocally: true }, query, synonyms);
+}

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

@@ -0,0 +1,53 @@
+import { type LinkCtx } from "./launcherParts";
+import type { LauncherResult } from "./match";
+import type { LauncherFact, LauncherLabels, LauncherSearchItem } from "./NavLauncherProps";
+export type ResolvedLabels = Required<Omit<LauncherLabels, "hintOpenMenu">>;
+export declare const QUICK_ACTION_LIMIT = 5;
+export declare function QuickActionsRow({ items, label, link, onRun, }: {
+    items: readonly LauncherSearchItem[];
+    label: string;
+    link: LinkCtx;
+    onRun: (item: LauncherSearchItem) => void;
+}): import("react/jsx-runtime").JSX.Element;
+type OptionCardProps = {
+    item: LauncherResult;
+    query: string;
+    isActive: boolean;
+    optionId: string;
+    link: LinkCtx;
+    labels: ResolvedLabels;
+    onOpen: () => void;
+    onHover: () => void;
+    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, 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;
+    optionId: string;
+    label: (count: number) => string;
+    onExpand: () => void;
+    onHover: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const describeFacts: (facts: readonly LauncherFact[]) => string;
+export declare function FactList({ facts, labels, layout, onCopied, onCopyBlocked, }: {
+    facts: readonly LauncherFact[];
+    labels: ResolvedLabels;
+    layout: "pane" | "inline";
+    onCopied: () => void;
+    onCopyBlocked: (node: HTMLElement | null) => void;
+}): import("react/jsx-runtime").JSX.Element;
+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;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Components/NavLauncher/spotlightParts.js

@@ -0,0 +1,121 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.describeFacts = exports.QUICK_ACTION_LIMIT = void 0;
+exports.QuickActionsRow = QuickActionsRow;
+exports.TopHitCard = TopHitCard;
+exports.AnswerCard = AnswerCard;
+exports.ShowMoreOption = ShowMoreOption;
+exports.FactList = FactList;
+exports.PreviewPane = PreviewPane;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const react_2 = 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"));
+const CopyButton_1 = __importDefault(require("../CopyButton/CopyButton"));
+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;
+            const common = {
+                variant: "outline",
+                colorScheme: "gray",
+                size: "sm",
+                borderRadius: "full",
+                flexShrink: 0,
+                label: item.label,
+                leftIcon: Icon ? ((0, jsx_runtime_1.jsx)(Icon, { size: 14, strokeWidth: 2, "aria-hidden": true })) : undefined,
+            };
+            return item.href && !item.run ? ((0, jsx_runtime_1.jsx)(Button_1.default, { ...common, as: link.linkAs, href: item.href, onClick: link.onPlainClick }, item.id)) : ((0, jsx_runtime_1.jsx)(Button_1.default, { ...common, onClick: () => onRun(item) }, item.id));
+        }) }));
+}
+const useCardSurface = (isActive) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const { edge, fill } = (0, launcherParts_1.activeRowStyle)(colors);
+    return {
+        position: "relative",
+        borderRadius: "xl",
+        borderWidth: "1px",
+        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)(),
+    };
+};
+function IconChip({ icon, size }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const Icon = icon !== null && icon !== void 0 ? icon : lucide_react_1.Search;
+    return ((0, jsx_runtime_1.jsx)(react_1.Flex, { boxSize: `${size}px`, borderRadius: "10px", bg: colors.primary.opacity[8], color: colors.accentText, align: "center", justify: "center", flexShrink: 0, children: (0, jsx_runtime_1.jsx)(Icon, { size: Math.round(size / 2), strokeWidth: 1.8, "aria-hidden": true }) }));
+}
+function CardAnchor({ item, link }) {
+    if (!item.href)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: link.linkAs, href: item.href, tabIndex: -1, "aria-hidden": true, onClick: link.onPlainClick, position: "absolute", inset: 0, borderRadius: "xl" }));
+}
+function TopHitCard({ item, query, isActive, optionId, link, labels, onOpen, onHover, describedBy, }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const surface = useCardSurface(isActive);
+    const meta = [item.context, item.hint].filter(Boolean).join(" · ");
+    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: "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, isCopied, optionId, link, labels, onOpen, onHover, describedBy, }) {
+    var _a, _b;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const surface = useCardSurface(isActive);
+    const answer = (_a = item.answer) !== null && _a !== void 0 ? _a : {
+        label: (_b = item.context) !== null && _b !== void 0 ? _b : "",
+        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: "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: "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;
+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: "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" : "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, 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: (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.d.ts

@@ -1,3 +1,3 @@
-import React from "react";
 import { NavbarProps } from "./NavigationBarProps";
-export default function NavBar({ userAvathar, userName, navMenu, moreIcon, handleNavOnClick, handleLogout, logoutText, navigationBarText, sideBarToggole, onSideBarToggole, }: NavbarProps): React.JSX.Element;
+/** Top bar with sidebar toggle, optional back button and title, a right-hand slot, and an avatar menu of navigation entries plus logout. */
+export default function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavOnClick, handleLogout, logoutText, navigationBarText, sideBarToggole, onSideBarToggole, forceSideBarToggle, onSideBarPeek, leading, }: NavbarProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/NavigationBar/NavigationBar.js

@@ -4,54 +4,71 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = NavBar;
-var react_1 = __importDefault(require("react"));
-var react_2 = require("@chakra-ui/react");
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var lucide_react_1 = require("lucide-react");
-function NavBar(_a) {
-    var _b, _c, _d, _e;
-    var userAvathar = _a.userAvathar, userName = _a.userName, navMenu = _a.navMenu, moreIcon = _a.moreIcon, handleNavOnClick = _a.handleNavOnClick, handleLogout = _a.handleLogout, logoutText = _a.logoutText, navigationBarText = _a.navigationBarText, sideBarToggole = _a.sideBarToggole, onSideBarToggole = _a.onSideBarToggole;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    return (react_1.default.createElement(react_2.Box, { bg: theme.colors.backgroundColor.light, px: 4, boxShadow: theme.shadows.sm },
-        react_1.default.createElement(react_2.Flex, { h: 16, alignItems: "center", justifyContent: "space-between" },
-            react_1.default.createElement(react_2.Box, { display: "flex", gap: 1.5, alignItems: "center" },
-                react_1.default.createElement(react_2.Box, { onClick: function () { return onSideBarToggole === null || onSideBarToggole === void 0 ? void 0 : onSideBarToggole(); }, display: { base: "block", lg: "none", xl: "none", md: "none" } }, sideBarToggole ? (react_1.default.createElement(lucide_react_1.PanelLeftClose, { size: "1.25rem" })) : (react_1.default.createElement(lucide_react_1.PanelRightClose, { size: "1.25rem" }))),
-                (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && (react_1.default.createElement(react_2.Box, { width: "1.5rem", height: "1.5rem", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", onClick: function () { var _a; return (_a = navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) === null || _a === void 0 ? void 0 : _a.call(navigationBarText); } },
-                    react_1.default.createElement(lucide_react_1.CircleArrowLeft, { size: "1.25rem", color: (_c = (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c[500] }))),
-                (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text) && (react_1.default.createElement(react_2.Text, { color: (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.secondary) === null || _e === void 0 ? void 0 : _e[500], fontSize: "1.25rem", fontWeight: 600, fontFamily: "open-sans, sans-serif", letterSpacing: "-0.013rem" }, navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text))),
-            react_1.default.createElement(react_2.Flex, null,
-                react_1.default.createElement(react_2.Stack, { direction: "row", alignItems: "center", spacing: 7 },
-                    react_1.default.createElement(react_2.Menu, null,
-                        react_1.default.createElement(react_2.Box, { cursor: "pointer" }, moreIcon),
-                        react_1.default.createElement(react_2.MenuButton, { as: react_2.Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0 },
-                            react_1.default.createElement(react_2.Avatar, { size: "sm", name: userName, src: userAvathar })),
-                        react_1.default.createElement(react_2.MenuList, { alignItems: "center", zIndex: 5, p: 0 },
-                            react_1.default.createElement(react_2.Box, { display: "flex", flexDirection: "column", maxH: "90vh" },
-                                react_1.default.createElement(react_2.Center, { py: 4 },
-                                    react_1.default.createElement(react_2.Avatar, { size: "xl", name: userName, src: userAvathar })),
-                                react_1.default.createElement(react_2.Center, null,
-                                    react_1.default.createElement(react_2.Text, { fontWeight: 500 }, userName)),
-                                react_1.default.createElement(react_2.MenuDivider, null),
-                                react_1.default.createElement(react_2.Box, { flex: 1, overflowY: "auto" }, navMenu === null || navMenu === void 0 ? void 0 : navMenu.map(function (menu, idx) {
-                                    var _a, _b, _c;
-                                    return (react_1.default.createElement(react_2.MenuItem, { onClick: function () { return handleNavOnClick(menu.url); }, key: "".concat(String((_c = (_b = (_a = menu.id) !== null && _a !== void 0 ? _a : menu.url) !== null && _b !== void 0 ? _b : menu.title) !== null && _c !== void 0 ? _c : idx), "-").concat(idx), sx: {
-                                            fontWeight: 500,
-                                            gap: theme.space["2"],
-                                        }, _focus: {
-                                            backgroundColor: "transparent",
-                                        }, _hover: {
-                                            backgroundColor: theme.colors.primary["50"],
-                                        } },
-                                        menu.icon && react_1.default.createElement(react_2.Box, null, menu === null || menu === void 0 ? void 0 : menu.icon),
-                                        react_1.default.createElement(react_2.Box, null, menu.title)));
-                                })),
-                                react_1.default.createElement(react_2.MenuDivider, null),
-                                react_1.default.createElement(react_2.MenuItem, { onClick: handleLogout, sx: {
-                                        fontWeight: 500,
-                                        gap: theme.space["2"],
-                                    }, _hover: {
-                                        backgroundColor: theme.colors.primary["50"],
-                                    } },
-                                    react_1.default.createElement(react_2.Box, null, react_1.default.createElement(lucide_react_1.LogOut, { size: 16 })),
-                                    react_1.default.createElement(react_2.Box, null, logoutText))))))))));
+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 planeStep_1 = require("../../Theme/tokens/builders/planeStep");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+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";
+/** Top bar with sidebar toggle, optional back button and title, a right-hand slot, and an avatar menu of navigation entries plus logout. */
+function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavOnClick, handleLogout, logoutText, navigationBarText, sideBarToggole, onSideBarToggole, forceSideBarToggle = false, onSideBarPeek, leading, }) {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const rowBackgrounds = (0, rowStates_1.listRowBackgrounds)(theme.colors);
+    const menuHoverBg = rowBackgrounds.active;
+    const barHoverBg = (0, outlineRung_1.resolveHoverTint)(theme.colors.gray[100], theme.colors.backgroundColor.light);
+    const dangerTone = (0, statusTone_1.resolveStatusTone)(theme.colors.semantic.error, (0, accentText_1.isDarkCanvas)(theme.colors.backgroundColor.main) ? "dark" : "light");
+    // Shared rounded pill affordance for the bar's icon controls.
+    const iconButtonStyle = {
+        w: "1.75rem",
+        h: "1.75rem",
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: "lg",
+        cursor: "pointer",
+        border: "none",
+        bg: "transparent",
+        transition: BACKGROUND_TRANSITION,
+        _hover: { bg: barHoverBg },
+    };
+    const menuItemStyle = {
+        bg: "transparent",
+        borderRadius: "lg",
+        // Chakra's MenuItem is width:100%, so mx added 12px and forced a horizontal scrollbar.
+        w: "calc(100% - 0.75rem)",
+        mx: "0.375rem",
+        px: "0.625rem",
+        py: "0.5rem",
+        fontWeight: 500,
+        fontSize: "xs-plus",
+        color: theme.colors.text[900],
+        gap: theme.space["2"],
+        transition: BACKGROUND_TRANSITION,
+        _hover: { bg: menuHoverBg },
+        _focus: { bg: menuHoverBg },
+        _active: { bg: rowBackgrounds.selectedActive },
+    };
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.backgroundColor.light, px: 4, borderBottom: "1px solid", borderColor: (0, planeStep_1.ruleOn)(theme.colors, theme.colors.backgroundColor.light), children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { h: 16, alignItems: "center", justifyContent: "space-between", gap: 2, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", gap: 1.5, alignItems: "center", flex: "1 1 0%", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", onClick: () => onSideBarToggole === null || onSideBarToggole === void 0 ? void 0 : onSideBarToggole(), onMouseEnter: onSideBarPeek, onFocus: onSideBarPeek, "aria-label": sideBarToggole ? "Close navigation menu" : "Open navigation menu", "aria-expanded": !!sideBarToggole, ...iconButtonStyle, flexShrink: 0, display: forceSideBarToggle ? "flex" : { base: "flex", lg: "none" }, w: SIDEBAR_TOGGLE_HIT, h: SIDEBAR_TOGGLE_HIT, children: sideBarToggole ? ((0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeftClose, { size: "1.25rem" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.PanelRightClose, { size: "1.25rem" })) }), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && ((0, jsx_runtime_1.jsx)(react_1.Box, { ...iconButtonStyle, as: "button", type: "button", "aria-label": "Go back", display: "flex", flexShrink: 0, onClick: () => { var _a; return (_a = navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) === null || _a === void 0 ? void 0 : _a.call(navigationBarText); }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CircleArrowLeft, { size: "1.25rem", color: theme.colors.text[500] }) })), leading && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [leading, (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", "aria-hidden": "true", mx: 2, w: "1px", h: "1.625rem", flexShrink: 0, bg: (0, planeStep_1.ruleOn)(theme.colors, theme.colors.backgroundColor.light) })] })), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text) && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: typeof navigationBarText.text === "string" ? navigationBarText.text : "", overflowOnly: true, placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_1.Text, { flex: "1 1 0%", w: 0, minW: 0, isTruncated: true, color: (0, accentText_1.accentTextOnCanvas)(theme.colors.secondary, theme.colors.backgroundColor.light), fontSize: "xl", fontWeight: 600, fontFamily: "open-sans, sans-serif", letterSpacing: "-0.013rem", children: navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text }) }))] }), (0, jsx_runtime_1.jsx)(react_1.Flex, { minW: 0, flexShrink: 1, children: (0, jsx_runtime_1.jsxs)(react_1.Stack, { direction: "row", alignItems: "center", spacing: 4, minW: 0, children: [moreIcon && ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", minW: 0, sx: { "& > *": { minW: 0 } }, children: moreIcon })), (0, jsx_runtime_1.jsxs)(react_1.Menu, { children: [(0, jsx_runtime_1.jsx)(react_1.MenuButton, { as: react_1.Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0, flexShrink: 0, children: (0, jsx_runtime_1.jsx)(Avatar_1.default, { size: "sm", name: userName, src: userAvathar }) }), (0, jsx_runtime_1.jsx)(react_1.MenuList, { alignItems: "center", zIndex: 5, p: 0, py: "0.375rem", 
+                                        // 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, {}), (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, {}), (0, jsx_runtime_1.jsxs)(react_1.MenuItem, { onClick: handleLogout, sx: {
+                                                        ...menuItemStyle,
+                                                        color: theme.colors.semanticText.error,
+                                                        _hover: { bg: dangerTone.bg, color: dangerTone.fg },
+                                                        _focus: { bg: dangerTone.bg, color: dangerTone.fg },
+                                                        _active: { bg: dangerTone.bg, color: dangerTone.fg },
+                                                    }, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", flexShrink: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.LogOut, { size: 16 }) }), (0, jsx_runtime_1.jsx)(react_1.Box, { minW: 0, isTruncated: true, title: String(logoutText !== null && logoutText !== void 0 ? logoutText : ""), children: logoutText })] })] }) })] })] }) })] }) }));
 }

package/dist/Components/NavigationBar/NavigationBarProps.d.ts

@@ -1,20 +1,56 @@
+import type { ReactNode } from "react";
+/** Props for the top navbar — user menu, nav items, and the toggle/peek affordances shared with SideBar. */
 export type NavbarProps = {
-    userAvathar: string;
+    /** Prop name is spelled exactly this way ("Avathar") — not a typo to correct at the call site. */
+    userAvathar?: string;
+    /** Name shown in the account menu header; also the avatar's initials source when no image is given. */
     userName: string;
+    /** Secondary line under the name in the account menu. */
+    userRole?: string;
+    /** Entries listed in the account menu, in order, above the logout item. */
     navMenu: MenuProps[];
-    moreIcon?: any;
+    /** Right-cluster slot before the avatar (org switcher, bell, launcher trigger). Its child may shrink; give icon buttons `flexShrink={0}`. */
+    moreIcon?: ReactNode;
+    /** Called with a menu entry's `url` when it is chosen; the bar does not navigate itself. */
     handleNavOnClick: (url: string) => void;
+    /** Called when the logout item is chosen. */
     handleLogout: () => void;
+    /** Label of the logout item. */
     logoutText: string;
+    /** Page title shown on the left, with an optional back button. */
     navigationBarText?: {
-        text: React.ReactNode;
+        /** Title content; truncated to one line, with a tooltip when the text is a string. */
+        text: ReactNode;
+        /** Shows a "Go back" button before the title and calls this when pressed. */
         onIconClick?: () => void;
     };
+    /** Whether the sidebar is currently open; flips the hamburger icon and its accessible name. */
     sideBarToggole?: boolean;
+    /** Called when the hamburger is pressed. */
     onSideBarToggole?: () => void;
+    /**
+     * Force the sidebar hamburger to show at all widths (not just below `lg`).
+     * Set this when the sidebar is in "mobile navbar" mode on a big screen, so the
+     * hamburger remains available to open the overlay. Defaults to `false`
+     * (hamburger shows only below `lg`).
+     */
+    forceSideBarToggle?: boolean;
+    /**
+     * Hovering the sidebar toggle peeks the sidebar open without pinning it. Wire this to the
+     * same state the SideBar's `peekOpen` reads; it closes itself when the pointer leaves.
+     */
+    onSideBarPeek?: () => void;
+    /** Rendered between the sidebar toggle/back button and the title, outside the title element, followed by a 1px divider. */
+    leading?: ReactNode;
 };
+/** One navMenu entry (id/title/url/icon) — unrelated to Chakra's own MenuProps despite the shared name. */
 export type MenuProps = {
+    /** Optional key for the entry; falls back to `url`, then `title`. */
+    id?: string | number;
+    /** Entry text, truncated to one line with a native title tooltip. */
     title: string;
+    /** Passed to `handleNavOnClick` when the entry is chosen. */
     url: string;
-    icon?: React.ReactNode;
+    /** Leading icon, shown at 16px. */
+    icon?: ReactNode;
 };

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

@@ -1,3 +1,5 @@
 import React from "react";
 import { NoteTextAreaProps } from "./NoteTextAreaProps";
-export default function NoteTextArea({ width, handleSubmit, handleCancel, value, title, file, isEditable, saveButtonLoading, maxFileSize, maxFilesSizeError, maxNoteWordCount, onChange, ref: inputRef, customPlaceholder, cancelButtonHide, }: NoteTextAreaProps): React.JSX.Element;
+/** Self-contained note composer (optional title + textarea + Save); `ref` forwards to the primary textarea. */
+declare const NoteTextArea: React.ForwardRefExoticComponent<NoteTextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export default NoteTextArea;