pixelize-design-library 2.4.2-beta.59 → 2.4.2-beta.61

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

@@ -1,4 +1,4 @@
-import type { ElementType, KeyboardEvent, MouseEvent } from "react";
+import type { ElementType, KeyboardEvent, MouseEvent, ReactNode } from "react";
 import type { AppOption } from "../AppSwitcher/AppSwitcherProps";
 /** Rendered as `<Icon size={16} aria-hidden />`, so any lucide-compatible component works. */
 export type LauncherIcon = ElementType;
@@ -54,6 +54,7 @@ export type LauncherResultGroup = {
 };
 /** Every visible string and accessible name; pass any subset, the rest fall back to English. */
 export type LauncherLabels = {
+    /** Accessible name of the dialog and the results list; no longer drawn as a header pill. */
     title: string;
     searchPlaceholder: string;
     clearSearch: string;
@@ -74,18 +75,32 @@ export type LauncherLabels = {
     loading: string;
     /** Heading of the empty state shown when `sections` has nothing to render. */
     empty: string;
-    /** Footer hint after the ↑↓←→ key cap. */
+    /** Footer hint after the four arrow key caps. */
     hintMove: string;
-    /** Footer hint after the ↵ key cap. */
+    /** Footer hint after the ENTER key cap. */
     hintOpen: string;
-    /** Footer hint after the mod+↵ key cap. */
+    /** Footer hint after the mod + ENTER key caps. */
     hintNewTab: string;
     /** Footer hint after the P key cap. */
     hintPin: string;
-    /** Footer hint after the esc key cap. */
+    /** Footer hint after the ESC key cap. */
     hintClose: string;
-    /** Footer hint after `openShortcutHint`; only rendered when that prop is set. */
+    /** @deprecated No longer rendered: the launcher is already open, so the open chord is not shown. */
     hintOpenMenu: string;
+    /** Footer hint after the mod key cap for a modified click, e.g. "+ click for new tab". */
+    hintClickNewTab: string;
+    /** Tooltip of the arrow link beside a row. */
+    newTabTip: string;
+    /** Muted count beside the search field and its polite announcement, e.g. "12 results". */
+    resultsCount: (count: number) => string;
+    /** Name of the Menu / Quick access / Apps tab list shown below `lg`. */
+    tabsLabel: string;
+    /** Tab showing every module (below `lg`). */
+    tabMenu: string;
+    /** Tab showing Pinned, Frequently visited and Recent (below `lg`). */
+    tabQuickAccess: string;
+    /** Tab showing the suite's apps (below `lg`). */
+    tabApps: string;
     /** Heading and list name of the apps section. */
     apps: string;
     /** Per-section count shown while searching, e.g. "3 found". */
@@ -146,11 +161,13 @@ export interface NavLauncherProps {
     suggestions?: readonly string[];
     /** Key cap shown at the end of the search field, e.g. "/" when the app opens the launcher with it. */
     searchHint?: string;
-    /** Chord that opens the launcher in the host app, e.g. "⌘K or /"; shown as the first footer hint. Omit when the app does not own one. */
+    /** @deprecated No longer rendered: the launcher is already open. Cmd/Ctrl+K and "/" now focus the search field while it is open. */
     openShortcutHint?: string;
-    /** Printed on the mod+Enter hint; defaults to "⌘" on Apple platforms, "Ctrl" elsewhere. */
+    /** Replaces the modifier cap of the mod+Enter hint; defaults to "⌘" on Apple platforms, "Ctrl" elsewhere. */
     modKeyLabel?: string;
-    /** Panel width at `lg`+; always full width below `lg`. Defaults to "1180px". */
+    /** Rendered between the search field and the close button, e.g. a help or customise icon button; use icon-only buttons so the dialog name stays "Menu". */
+    headerActions?: ReactNode;
+    /** Panel width at `lg`+; always full width below `lg`. Defaults to "1080px". */
     maxWidth?: string;
     labels?: Partial<LauncherLabels>;
     /** Other Pixelize apps, shown as an "Apps" section at the bottom of the right rail. Same shape as AppSwitcher. */
@@ -179,8 +196,10 @@ export interface PinToggleProps {
 /** Props for the small "open in new tab" anchor beside a launcher row. */
 export interface NewTabLinkProps {
     href: string;
-    /** Accessible name and tooltip, e.g. "Open Leave in a new tab". */
+    /** Accessible name, e.g. "Open Leave in a new tab". */
     label: string;
+    /** Visible tooltip text; defaults to `label`. */
+    tip?: string;
     /** Anchor-like component receiving `href`, `target`, `rel`; defaults to `"a"`. */
     linkAs?: ElementType;
     tabIndex?: number;

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

@@ -1,3 +1,3 @@
 import type { NewTabLinkProps } from "./NavLauncherProps";
-/** "Open in a new tab" anchor; visible on row hover, focus-within or its own focus only. */
-export default function NewTabLink({ href, label, linkAs, tabIndex }: NewTabLinkProps): import("react/jsx-runtime").JSX.Element;
+/** "Open in a new tab" anchor with a tooltip; visible on row hover, keyboard-active or focus-within, or its own focus. */
+export default function NewTabLink({ href, label, tip, linkAs, tabIndex, }: NewTabLinkProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/NavLauncher/NewTabLink.js

@@ -1,4 +1,7 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = NewTabLink;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -6,9 +9,10 @@ const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 const revealStyles_1 = require("./revealStyles");
-/** "Open in a new tab" anchor; visible on row hover, focus-within or its own focus only. */
-function NewTabLink({ href, label, linkAs = "a", tabIndex }) {
+/** "Open in a new tab" anchor with a tooltip; visible on row hover, keyboard-active or focus-within, or its own focus. */
+function NewTabLink({ href, label, tip, linkAs = "a", tabIndex, }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: linkAs, href: href, target: "_blank", rel: "noopener noreferrer", "aria-label": label, title: label, tabIndex: tabIndex, display: "inline-flex", alignItems: "center", justifyContent: "center", w: "22px", h: "22px", flexShrink: 0, borderRadius: "md", color: colors.textMuted, opacity: 0, transition: (0, motion_1.transitionFor)(["opacity", "background-color"]), sx: (0, revealStyles_1.revealStyles)(colors), _hover: { bg: colors.backgroundColor.subtle }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUpRight, { size: 13, "aria-hidden": true }) }));
+    return ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: tip !== null && tip !== void 0 ? tip : label, placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: linkAs, href: href, target: "_blank", rel: "noopener noreferrer", "aria-label": label, tabIndex: tabIndex, display: "inline-flex", alignItems: "center", justifyContent: "center", w: "22px", h: "22px", flexShrink: 0, borderRadius: "md", color: colors.textMuted, opacity: 0, transition: (0, motion_1.transitionFor)(["opacity", "background-color"]), sx: (0, revealStyles_1.revealStyles)(colors), _hover: { bg: colors.backgroundColor.subtle }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUpRight, { size: 13, "aria-hidden": true }) }) }));
 }

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

@@ -1,12 +1,73 @@
-import { type ElementType, type KeyboardEvent, type MouseEvent, type ReactNode } from "react";
+import { type ElementType, type FocusEvent, type KeyboardEvent, type MouseEvent, type ReactNode } from "react";
+import type { PaletteProps } from "../../Theme/tokens/types";
 import type { AppOption } from "../AppSwitcher/AppSwitcherProps";
 import type { LauncherLabels, LauncherModule, LauncherScreen } from "./NavLauncherProps";
 export declare const ITEM_SELECTOR = "[data-launcher-item]";
+export declare const TouchDensity: import("react").Provider<boolean>;
+export declare const useTouchDensity: () => boolean;
 export declare const isPlainClick: (event: MouseEvent) => boolean;
 export type LinkCtx = {
     linkAs: ElementType;
     onPlainClick: (event: MouseEvent) => void;
 };
+export declare const WIDE_ROW = "@container launcher-row (min-width: 300px)";
+export declare const ROW_CONTAINER: {
+    containerType: string;
+    containerName: string;
+};
+export declare const activeRowStyle: (colors: PaletteProps) => {
+    edge: string;
+    fill: string;
+};
+export declare const activeRowSurface: (colors: PaletteProps) => {
+    backgroundColor: string;
+    boxShadow: string;
+    outline: string;
+    outlineOffset: string;
+};
+export declare const titleInset: (base: number, open: number, chip?: number) => {
+    "@container launcher-row (max-width: 219px)": {
+        "[data-group]:hover &, [data-group]:focus-within &, [data-group][data-reveal=true] &": {
+            "--row-pr": string;
+        };
+    };
+    "@container launcher-row (min-width: 300px)"?: {
+        "[data-group][data-reveal=true] &": {
+            "--row-pr": string;
+        };
+    } | undefined;
+    paddingRight: string;
+    "--row-pr": string;
+    "[data-group]:hover &, [data-group]:focus-within &, [data-group][data-reveal=true] &": {
+        "--row-pr": string;
+    };
+};
+export declare const useRowFocus: (isBordered?: boolean) => {
+    sx: {
+        "&[data-row-focus]": {
+            backgroundColor: string;
+            boxShadow: string;
+            outline: string;
+            outlineOffset: string;
+        } | {
+            backgroundColor: string;
+            borderColor: string;
+        };
+    };
+    primary: {
+        onFocus: (event: FocusEvent<HTMLElement>) => boolean | undefined;
+        onBlur: (event: FocusEvent<HTMLElement>) => boolean | undefined;
+    };
+};
+export declare const stretchedLink: (radius: string) => {
+    outline: string;
+    _after: {
+        content: string;
+        position: string;
+        inset: number;
+        borderRadius: string;
+    };
+};
 export declare const useRowHover: () => {
     bg: string;
     _hover: {
@@ -87,7 +148,8 @@ type AppsSectionProps = {
     hues: readonly string[];
     currentAppId?: string;
     heading: string;
+    hideHeading?: boolean;
     onSelect: (app: AppOption, event: MouseEvent | KeyboardEvent) => void;
 };
-export declare function AppsSection({ apps, hues, currentAppId, heading, onSelect, }: AppsSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppsSection({ apps, hues, currentAppId, heading, hideHeading, onSelect, }: AppsSectionProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Components/NavLauncher/launcherParts.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useRowHover = exports.isPlainClick = exports.ITEM_SELECTOR = void 0;
+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.CountBadge = CountBadge;
 exports.NewTag = NewTag;
 exports.SectionHeader = SectionHeader;
@@ -22,21 +22,92 @@ const lucide_react_1 = require("lucide-react");
 const react_2 = require("react");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
 const motion_1 = 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"));
 const match_1 = require("./match");
 const NewTabLink_1 = __importDefault(require("./NewTabLink"));
 const PinToggle_1 = __importDefault(require("./PinToggle"));
 const revealStyles_1 = require("./revealStyles");
 exports.ITEM_SELECTOR = "[data-launcher-item]";
+const TouchDensityContext = (0, react_2.createContext)(false);
+exports.TouchDensity = TouchDensityContext.Provider;
+const useTouchDensity = () => (0, react_2.useContext)(TouchDensityContext);
+exports.useTouchDensity = useTouchDensity;
 const isPlainClick = (event) => event.button === 0 &&
     !event.metaKey &&
     !event.ctrlKey &&
     !event.shiftKey &&
     !event.altKey;
 exports.isPlainClick = isPlainClick;
+const ROW_FOCUS = "data-row-focus";
+const ROW_PR = "--row-pr";
+const REVEALED = "[data-group]:hover &, [data-group]:focus-within &, [data-group][data-reveal=true] &";
+const NARROW_ROW = "@container launcher-row (max-width: 219px)";
+exports.WIDE_ROW = "@container launcher-row (min-width: 300px)";
+exports.ROW_CONTAINER = {
+    containerType: "inline-size",
+    containerName: "launcher-row",
+};
+const activeRowStyle = (colors) => {
+    const fill = (0, rowStates_1.listRowBackgrounds)(colors).active;
+    const edge = (0, outlineRung_1.liftToContrast)((0, outlineRung_1.liftToContrast)(colors.primary[500], fill, outlineRung_1.AA_NON_TEXT), colors.surfaceRaised, outlineRung_1.AA_NON_TEXT);
+    return { edge, fill };
+};
+exports.activeRowStyle = activeRowStyle;
+const activeRowSurface = (colors) => {
+    const { edge, fill } = (0, exports.activeRowStyle)(colors);
+    return {
+        backgroundColor: fill,
+        boxShadow: `inset 0 0 0 1px ${edge}`,
+        outline: "2px solid transparent",
+        outlineOffset: "-2px",
+    };
+};
+exports.activeRowSurface = activeRowSurface;
+const titleInset = (base, open, chip = 0) => ({
+    paddingRight: `var(${ROW_PR})`,
+    [ROW_PR]: `${base}px`,
+    [REVEALED]: { [ROW_PR]: `${open}px` },
+    ...(chip
+        ? {
+            [exports.WIDE_ROW]: {
+                "[data-group][data-reveal=true] &": { [ROW_PR]: `${open + chip}px` },
+            },
+        }
+        : {}),
+    [NARROW_ROW]: { [REVEALED]: { [ROW_PR]: `${base}px` } },
+});
+exports.titleInset = titleInset;
+const markRowFocus = (event, isOn) => { var _a; return (_a = event.currentTarget.closest("[data-group]")) === null || _a === void 0 ? void 0 : _a.toggleAttribute(ROW_FOCUS, isOn); };
+const useRowFocus = (isBordered = false) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const { edge, fill } = (0, exports.activeRowStyle)(colors);
+    const lit = isBordered
+        ? { backgroundColor: fill, borderColor: edge }
+        : (0, exports.activeRowSurface)(colors);
+    return {
+        sx: { [`&[${ROW_FOCUS}]`]: lit },
+        primary: {
+            onFocus: (event) => markRowFocus(event, event.currentTarget.matches(":focus-visible")),
+            onBlur: (event) => markRowFocus(event, false),
+        },
+    };
+};
+exports.useRowFocus = useRowFocus;
+const stretchedLink = (radius) => ({
+    outline: "none",
+    _after: {
+        content: '""',
+        position: "absolute",
+        inset: 0,
+        borderRadius: radius,
+    },
+});
+exports.stretchedLink = stretchedLink;
 const useRowHover = () => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const hover = (0, rowStates_1.listRowBackgrounds)(colors).active;
@@ -67,10 +138,20 @@ function RowIcon({ icon: Icon, size, stroke = 1.75, mt }) {
 }
 function Highlight({ text, query }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, match_1.highlightSegments)(text, query).map((segment, i) => segment.isMatch ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "mark", bg: colors.primary.opacity[24], color: "inherit", borderRadius: "3px", px: "1px", children: segment.text }, i)) : ((0, jsx_runtime_1.jsx)(react_2.Fragment, { children: segment.text }, i))) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, match_1.highlightSegments)(text, query).map((segment, i) => segment.isMatch ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "mark", bg: "transparent", color: "inherit", fontWeight: 650, textDecoration: "underline", textDecorationColor: colors.primary.opacity[48], textDecorationThickness: "1.5px", textUnderlineOffset: "2px", children: segment.text }, i)) : ((0, jsx_runtime_1.jsx)(react_2.Fragment, { children: segment.text }, i))) }));
 }
 function RowActions({ children }) {
-    return ((0, jsx_runtime_1.jsx)(react_1.Flex, { position: "absolute", top: "7px", right: "4px", h: "19px", align: "center", gap: "2px", zIndex: 1, children: children }));
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const isTouch = (0, exports.useTouchDensity)();
+    const revealed = REVEALED.replace(/ &/g, " > &");
+    return ((0, jsx_runtime_1.jsx)(react_1.Flex, { sx: {
+            [NARROW_ROW]: {
+                [revealed]: {
+                    backgroundColor: (0, exports.activeRowStyle)(colors).fill,
+                    borderRadius: "6px",
+                },
+            },
+        }, 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)();
@@ -79,19 +160,23 @@ function RowTip({ text }) {
 function ModuleRow({ module, keyScreens, isPinned, onTogglePin, pinId, labels, link, }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const hover = (0, exports.useRowHover)();
+    const focus = (0, exports.useRowFocus)();
     const ring = (0, focusRing_styles_1.focusVisibleStyles)(colors);
+    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: "34px", pl: "8px", pr: "4px", pt: "7px", pb: "5px", borderRadius: "8px", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: hover._hover, _focusWithin: hover._focusWithin, 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, pr: `${base}px`, _groupHover: { pr: `${open}px` }, _groupFocusWithin: { pr: `${open}px` }, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: link.linkAs, href: module.href, "data-launcher-item": true, "data-pin-id": onTogglePin ? pinId : undefined, title: module.label, onClick: link.onPlainClick, minW: 0, fontSize: "13.5px", fontWeight: 500, color: colors.text[900], noOfLines: 1, borderRadius: "sm", sx: ring, children: module.label }), module.isNew ? (0, jsx_runtime_1.jsx)(NewTag, { label: labels.newBadge }) : null] }), keyScreens.length ? ((0, jsx_runtime_1.jsx)(react_1.Box, { role: "group", "aria-label": `${module.label} ${labels.screens}`, 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, title: `${screen.label} — ${module.label}`, onClick: link.onPlainClick, color: "inherit", borderRadius: "sm", _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), linkAs: link.linkAs })] }), onTogglePin ? ((0, jsx_runtime_1.jsx)(RowTip, { text: isPinned ? labels.unpinTip : labels.pinTip })) : null] }));
+    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: {
+                                            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] }));
 }
 function RailRow({ screen, module, link, isStrong = false, trailing, pinId, }) {
     var _a;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const hover = (0, exports.useRowHover)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { "data-group": true, align: "center", gap: "10px", h: "32px", pl: "8px", pr: "4px", borderRadius: "8px", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: hover._hover, _focusWithin: hover._focusWithin, 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)(react_1.Box, { as: link.linkAs, href: screen.href, "data-launcher-item": true, "data-pin-id": pinId, onClick: link.onPlainClick, flex: 1, minW: 0, fontSize: "13px", fontWeight: isStrong ? 500 : 400, color: colors.text[900], noOfLines: 1, borderRadius: "sm", sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), children: screen.label }), trailing] }));
+    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: "13px", 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 })] }));
 }
 function PinTextButton({ label, text, onToggle }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
@@ -105,13 +190,15 @@ function PinnedTile({ screen, module, link, labels, onTogglePin, }) {
     var _a;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const Icon = (_a = screen.icon) !== null && _a !== void 0 ? _a : module.icon;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { "data-group": true, align: "center", gap: "8px", h: "36px", pl: "9px", pr: "4px", borderRadius: "9px", borderWidth: "1px", borderColor: colors.boxborder[200], bg: colors.surfaceRaised, title: screen.label, transition: (0, motion_1.transitionFor)(["border-color"]), _hover: { borderColor: colors.gray[300] }, 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)(react_1.Box, { as: link.linkAs, href: screen.href, "data-launcher-item": true, "data-pin-id": onTogglePin ? screen.id : undefined, onClick: link.onPlainClick, flex: 1, minW: 0, fontSize: "13px", fontWeight: 500, color: colors.text[900], noOfLines: 1, borderRadius: "sm", sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), children: screen.label }), (0, jsx_runtime_1.jsx)(CountBadge, { value: screen.badge, size: "tile" }), onTogglePin ? ((0, jsx_runtime_1.jsx)(react_1.Box, { 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] }));
+    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: "13px", 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] }));
 }
-function AppsSection({ apps, hues, currentAppId, heading, onSelect, }) {
+function AppsSection({ apps, hues, currentAppId, heading, hideHeading = false, onSelect, }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const rows = (0, rowStates_1.listRowBackgrounds)(colors);
-    const ring = (0, focusRing_styles_1.focusVisibleStyles)(colors);
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsx)(SectionHeader, { label: heading, isRail: true, hasCount: false }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "ul", listStyleType: "none", m: 0, p: 0, "aria-label": heading, children: apps.map((app, index) => {
+    const rowRing = (0, exports.activeRowSurface)(colors);
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { children: [hideHeading ? null : (0, jsx_runtime_1.jsx)(SectionHeader, { label: heading, isRail: true, hasCount: false }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "ul", listStyleType: "none", m: 0, p: 0, "aria-label": heading, children: apps.map((app, index) => {
                     var _a;
                     const isCurrent = app.id === currentAppId;
                     const interactive = !isCurrent && !app.locked;
@@ -125,6 +212,9 @@ function AppsSection({ apps, hues, currentAppId, heading, onSelect, }) {
                                 }
                                 : {}), "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, 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: ring, 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)(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));
+                                : 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: {
+                                _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/resultNavigation.d.ts

@@ -0,0 +1,3 @@
+export type ResultKey = "ArrowUp" | "ArrowDown" | "ArrowLeft" | "ArrowRight" | "Home" | "End" | "PageUp" | "PageDown";
+/** Next flat result index for a key, following the visual grid: rows by `columns` inside a group, reading order across columns. */
+export declare const moveResult: (sizes: readonly number[], columns: number, index: number, key: ResultKey, pageRows?: number) => number;

package/dist/Components/NavLauncher/resultNavigation.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.moveResult = void 0;
+const locate = (sizes, index) => {
+    let start = 0;
+    for (let group = 0; group < sizes.length; group += 1) {
+        if (index < start + sizes[group])
+            return { group, pos: index - start, start };
+        start += sizes[group];
+    }
+    return {
+        group: sizes.length - 1,
+        pos: 0,
+        start: start - sizes[sizes.length - 1],
+    };
+};
+const startOf = (sizes, group) => sizes.slice(0, group).reduce((sum, size) => sum + size, 0);
+const stepVertical = (sizes, columns, index, down, wrap) => {
+    const { group, pos, start } = locate(sizes, index);
+    const size = sizes[group];
+    const column = pos % columns;
+    if (down) {
+        if (pos + columns < size)
+            return index + columns;
+        if (Math.floor(pos / columns) < Math.floor((size - 1) / columns))
+            return start + size - 1;
+        const next = group + 1 < sizes.length ? group + 1 : wrap ? 0 : -1;
+        if (next < 0)
+            return index;
+        return startOf(sizes, next) + Math.min(column, sizes[next] - 1);
+    }
+    if (pos - columns >= 0)
+        return index - columns;
+    const prev = group > 0 ? group - 1 : wrap ? sizes.length - 1 : -1;
+    if (prev < 0)
+        return index;
+    const lastRow = Math.floor((sizes[prev] - 1) / columns);
+    return (startOf(sizes, prev) + Math.min(sizes[prev] - 1, lastRow * columns + column));
+};
+/** Next flat result index for a key, following the visual grid: rows by `columns` inside a group, reading order across columns. */
+const moveResult = (sizes, columns, index, key, pageRows = 1) => {
+    const total = sizes.reduce((sum, size) => sum + size, 0);
+    if (total === 0)
+        return 0;
+    switch (key) {
+        case "ArrowDown":
+        case "ArrowUp":
+            return stepVertical(sizes, columns, index, key === "ArrowDown", true);
+        case "ArrowRight":
+            return Math.min(total - 1, index + 1);
+        case "ArrowLeft":
+            return Math.max(0, index - 1);
+        case "Home":
+            return 0;
+        case "End":
+            return total - 1;
+        default: {
+            let next = index;
+            for (let i = 0; i < pageRows; i += 1)
+                next = stepVertical(sizes, columns, next, key === "PageDown", false);
+            return next;
+        }
+    }
+};
+exports.moveResult = moveResult;

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

@@ -1,4 +1,4 @@
 import type { SystemStyleObject } from "@chakra-ui/react";
 import type { PaletteProps } from "../../Theme/tokens/types";
-/** Shows a row affordance on row hover, row focus-within or its own keyboard focus, and always on touch. */
+/** Shows a row affordance on row hover, row focus-within or its own keyboard focus, and always on touch, where it also grows to a 32px hit area. */
 export declare const revealStyles: (colors: PaletteProps) => SystemStyleObject;

package/dist/Components/NavLauncher/revealStyles.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.revealStyles = void 0;
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const motion_1 = require("../../Theme/chakra/motion");
-/** Shows a row affordance on row hover, row focus-within or its own keyboard focus, and always on touch. */
+/** Shows a row affordance on row hover, row focus-within or its own keyboard focus, and always on touch, where it also grows to a 32px hit area. */
 const revealStyles = (colors) => {
     const ring = (0, focusRing_styles_1.focusVisibleStyles)(colors);
     return {
@@ -12,7 +12,7 @@ const revealStyles = (colors) => {
         _groupHover: { opacity: 1 },
         _groupFocusWithin: { opacity: 1 },
         "[data-reveal=true] &": { opacity: 1 },
-        "@media (hover: none)": { opacity: 1 },
+        "@media (hover: none)": { opacity: 1, minWidth: "32px", width: "32px", height: "32px" },
         ...(0, motion_1.reducedMotionSx)(),
     };
 };

package/dist/Components/NavigationBar/NavigationBar.js

@@ -12,6 +12,7 @@ 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");
 // Roomy enough to hover without aiming: the glyph is only 1.25rem.
@@ -52,7 +53,7 @@ function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavO
         _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: theme.colors.boxborder[200], children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { h: 16, alignItems: "center", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", gap: 1.5, alignItems: "center", 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, 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", 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", bg: theme.colors.boxborder[200] })] })), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text) && ((0, jsx_runtime_1.jsx)(react_1.Text, { color: (0, accentText_1.accentTextOnCanvas)(theme.colors.secondary, theme.colors.backgroundColor.light), fontSize: "1.25rem", 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, 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", 
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.backgroundColor.light, px: 4, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], 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: theme.colors.boxborder[200] })] })), (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: "1.25rem", 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.

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

@@ -6,6 +6,7 @@ export type NavbarProps = {
     userName: string;
     userRole?: string;
     navMenu: MenuProps[];
+    /** Right-cluster slot before the avatar (org switcher, bell, launcher trigger). Its child may shrink; give icon buttons `flexShrink={0}`. */
     moreIcon?: ReactNode;
     handleNavOnClick: (url: string) => void;
     handleLogout: () => void;

package/dist/Components/OrgSwitcher/OrgSwitcher.js

@@ -1,4 +1,7 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
@@ -10,12 +13,15 @@ const chartColorsFromTheme_1 = require("../../Theme/tokens/builders/chartColorsF
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
 const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
+const useMatchMedia_1 = require("../../Hooks/useMatchMedia");
+const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 const OrgSwitcherProps_1 = require("./OrgSwitcherProps");
 const sizeMap = {
-    sm: { h: "32px", avatar: "22px", font: "0.8rem", sub: "0.65rem", px: 2 },
-    md: { h: "40px", avatar: "28px", font: "0.9rem", sub: "0.7rem", px: 3 },
-    lg: { h: "48px", avatar: "34px", font: "1rem", sub: "0.78rem", px: 4 },
+    sm: { h: "32px", avatarH: "32px", avatar: "22px", font: "0.8rem", sub: "0.65rem", px: 2 },
+    md: { h: "40px", avatarH: "36px", avatar: "28px", font: "0.9rem", sub: "0.7rem", px: 3 },
+    lg: { h: "48px", avatarH: "48px", avatar: "34px", font: "1rem", sub: "0.78rem", px: 4 },
 };
+const MD_QUERY = "(min-width: 48em)";
 const Avatar = ({ org, boxSize, fontSize, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     if (org.logoUrl) {
@@ -24,9 +30,11 @@ const Avatar = ({ org, boxSize, fontSize, }) => {
     const fill = (0, OrgSwitcherProps_1.avatarColor)(org.name, (0, chartColorsFromTheme_1.chartMode)(colors));
     return ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: boxSize, borderRadius: "lg", flexShrink: 0, bg: fill, color: (0, accentText_1.onFilled)(fill, colors.white, colors.black), fontSize: fontSize, fontWeight: 700, children: (0, OrgSwitcherProps_1.orgInitial)(org.name) }));
 };
-const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSearchable, searchThreshold = 6, triggerVariant = "ghost", size = "md", maxWidth = "200px", menuMinWidth = "280px", placeholder = "Select organization", ariaLabel = "Switch organization", showRole = true, }) => {
-    var _a;
+const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSearchable, searchThreshold = 6, triggerVariant = "ghost", size = "md", maxWidth = "200px", menuMinWidth = "280px", placeholder = "Select organization", ariaLabel = "Switch organization", showRole = true, display = "full", }) => {
+    var _a, _b;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const isMd = (0, useMatchMedia_1.useMatchMedia)(MD_QUERY, true);
+    const avatarOnly = display === "avatar" || (display === "auto" && !isMd);
     const rowBackgrounds = (0, react_1.useMemo)(() => (0, rowStates_1.listRowBackgrounds)(theme.colors), [theme.colors]);
     const s = sizeMap[size];
     const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)();
@@ -87,10 +95,14 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
         if (org.id !== value)
             onChange(org.id, org);
     };
+    const avatarNode = selected ? ((0, jsx_runtime_1.jsx)(Avatar, { org: selected, boxSize: s.avatar, fontSize: s.sub })) : ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: s.avatar, borderRadius: "lg", bg: theme.colors.gray[100], color: (0, accentText_1.accentTextOnCanvas)(theme.colors.gray, theme.colors.gray[100]), flexShrink: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Building2, { size: 14 }) }));
+    const labelGap = s.px === 2 ? 8 : 10;
+    const squeezedWidth = `calc(${s.px * 8 + labelGap * 2 + 16}px + ${s.avatar})`;
+    const trigger = ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", "aria-label": avatarOnly && selected ? `${ariaLabel}, ${selected.name}` : ariaLabel, align: "center", justify: avatarOnly ? "center" : undefined, gap: avatarOnly ? "4px" : `${labelGap}px`, h: avatarOnly ? s.avatarH : s.h, px: avatarOnly ? "6px" : s.px, minW: avatarOnly ? undefined : squeezedWidth, flexShrink: avatarOnly ? 0 : 1, borderRadius: "lg", cursor: isLoading ? "default" : "pointer", opacity: isLoading ? 0.6 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "background 0.15s ease", _hover: { bg: triggerVariant === "ghost" ? triggerHoverBg : undefined }, ...triggerStyles, children: [avatarNode, !avatarOnly && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.font, fontWeight: 600, color: theme.colors.gray[700], maxW: maxWidth, minW: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", textAlign: "left", children: (_a = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _a !== void 0 ? _a : placeholder })), isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "xs", thickness: "1.5px", color: theme.colors.accentText, flexShrink: 0 })) : avatarOnly ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.ChevronDown, size: 12, color: theme.colors.textMuted, flexShrink: 0, "aria-hidden": "true" })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.ChevronsUpDown, size: 16, color: theme.colors.textMuted, flexShrink: 0 }))] }));
     return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isOpen, onOpen: handlePopoverOpen, onClose: () => {
             onClose();
             setQuery("");
-        }, placement: "bottom-start", initialFocusRef: showSearch ? searchRef : firstOptionRef, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", "aria-label": ariaLabel, align: "center", gap: s.px === 2 ? "8px" : "10px", h: s.h, px: s.px, borderRadius: "lg", cursor: isLoading ? "default" : "pointer", opacity: isLoading ? 0.6 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "background 0.15s ease", _hover: { bg: triggerVariant === "ghost" ? triggerHoverBg : undefined }, ...triggerStyles, children: [selected ? ((0, jsx_runtime_1.jsx)(Avatar, { org: selected, boxSize: s.avatar, fontSize: s.sub })) : ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: s.avatar, borderRadius: "lg", bg: theme.colors.gray[100], color: (0, accentText_1.accentTextOnCanvas)(theme.colors.gray, theme.colors.gray[100]), flexShrink: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Building2, { size: 14 }) })), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.font, fontWeight: 600, color: theme.colors.gray[700], maxW: maxWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", textAlign: "left", children: (_a = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _a !== void 0 ? _a : placeholder }), isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "xs", thickness: "1.5px", color: theme.colors.accentText, flexShrink: 0 })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.ChevronsUpDown, size: 16, color: theme.colors.textMuted, flexShrink: 0 }))] }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { minW: menuMinWidth, w: "auto", 
+        }, placement: "bottom-start", initialFocusRef: showSearch ? searchRef : firstOptionRef, isLazy: true, children: [avatarOnly ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: (_b = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _b !== void 0 ? _b : placeholder, placement: "bottom", isDisabled: isOpen, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, children: (0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: trigger }) }) })) : ((0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: trigger })), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { minW: menuMinWidth, maxW: "calc(100vw - 32px)", w: "auto", 
                 // NOTE: Chakra's --popper-bg is hardcoded white via dead _dark — without an explicit bg the panel stayed white.
                 bg: theme.colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}`, _focus: { outline: "none", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}` }, children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { p: 0, children: [showSearch && ((0, jsx_runtime_1.jsx)(react_2.Box, { p: 2, borderBottom: "1px solid", borderColor: theme.colors.gray[100], children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, color: theme.colors.textMuted }) }), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: searchRef, placeholder: "Search organizations", value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: (e) => {
                                             if (e.key === "ArrowDown" && filtered.length > 0) {