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

package/dist/Components/NavLauncher/NavLauncher.js

@@ -0,0 +1,395 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = NavLauncher;
+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 useMatchMedia_1 = require("../../Hooks/useMatchMedia");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const chartColorsFromTheme_1 = require("../../Theme/tokens/builders/chartColorsFromTheme");
+const placeholderInk_1 = require("../../Theme/tokens/builders/placeholderInk");
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
+const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const AppMark_1 = require("../AppSwitcher/AppMark");
+const Drawer_1 = __importStar(require("../Drawer/Drawer"));
+const EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
+const Kbd_1 = __importDefault(require("../Kbd/Kbd"));
+const Skeletons_1 = __importDefault(require("../Skeletons/Skeletons"));
+const launcherParts_1 = require("./launcherParts");
+const match_1 = require("./match");
+const NewTabLink_1 = __importDefault(require("./NewTabLink"));
+const PinToggle_1 = __importDefault(require("./PinToggle"));
+const NO_APPS = [];
+const MD_QUERY = "(min-width: 48em)";
+const XL_QUERY = "(min-width: 80em)";
+const CELL_SELECTOR = "[data-nav-cell]";
+const DEFAULT_LABELS = {
+    title: "Menu",
+    searchPlaceholder: "Search menus and screens",
+    clearSearch: "Clear search",
+    close: "Close menu",
+    pinned: "Pinned",
+    pinnedEmpty: "Pin the screens you use most. Pins follow your account.",
+    frequent: "Frequently visited",
+    recent: "Recent",
+    screensGroup: "Screens",
+    actionsGroup: "Actions",
+    pin: (label) => `Pin ${label}`,
+    unpin: (label) => `Unpin ${label}`,
+    openInNewTab: (label) => `Open ${label} in a new tab`,
+    noResults: (query) => `Nothing called “${query}”`,
+    noResultsHint: "Try a module name, or another word for it.",
+    searching: "Searching…",
+    loading: "Loading menu",
+    empty: "Nothing to show yet",
+    hintMove: "move",
+    hintOpen: "open here",
+    hintNewTab: "new tab",
+    hintPin: "pin",
+    hintClose: "close",
+    hintOpenMenu: "open",
+    apps: "Your apps",
+    found: (count) => `${count} found`,
+    pinTip: "Pin to quick access",
+    unpinTip: "Pinned — click to unpin",
+    quickAccess: "Quick access",
+    newBadge: "New",
+    screens: "screens",
+    pinShort: "Pin",
+    footerNote: "Pins follow your account",
+    suggestionsHint: "Try one of these",
+};
+const isApplePlatform = () => typeof navigator !== "undefined" &&
+    /Mac|iPhone|iPad/.test(navigator.platform);
+const visibleSections = (sections) => sections
+    .map((section) => ({
+    ...section,
+    modules: section.modules.filter((m) => m.screens.length > 0),
+}))
+    .filter((section) => section.modules.length > 0);
+const indexScreens = (sections) => {
+    const map = new Map();
+    for (const section of sections) {
+        for (const module of section.modules) {
+            for (const screen of module.screens)
+                if (!map.has(screen.id))
+                    map.set(screen.id, { screen, module });
+        }
+    }
+    return map;
+};
+const GRID_COLUMNS = {
+    base: "minmax(0, 1fr)",
+    md: "repeat(2, minmax(0, 1fr))",
+    xl: "repeat(3, minmax(0, 1fr))",
+};
+function ItemGrid({ children }) {
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { "data-nav-grid": true, display: "grid", gridTemplateColumns: GRID_COLUMNS, gap: "1px 8px", alignItems: "start", children: children }));
+}
+function Pane({ children }) {
+    return ((0, jsx_runtime_1.jsx)(react_1.Flex, { direction: "column", gap: "14px", flex: 1, minW: 0, px: "18px", pt: "12px", pb: "16px", overflowY: { base: "visible", lg: "auto" }, children: children }));
+}
+function Rail({ label, children }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_1.Flex, { as: "aside", "aria-label": label, direction: "column", gap: "16px", w: { base: "100%", lg: "300px" }, flexShrink: 0, px: "14px", pt: "12px", pb: "16px", bg: colors.backgroundColor.subtle, borderTopWidth: { base: "1px", lg: 0 }, borderLeftWidth: { base: 0, lg: "1px" }, borderColor: colors.boxborder[200], overflowY: { base: "visible", lg: "auto" }, children: children }));
+}
+function SkeletonLayout({ label }) {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { role: "status", "aria-busy": "true", "aria-label": label, direction: { base: "column", lg: "row" }, flex: 1, minH: 0, children: [(0, jsx_runtime_1.jsx)(Pane, { children: [0, 1, 2].map((section) => ((0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "0.75rem", width: "6rem" }), (0, jsx_runtime_1.jsx)(ItemGrid, { children: [0, 1, 2, 3].map((row) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "10px", h: "34px", mt: 2, children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "1rem", width: "1rem" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "0.875rem", width: "8rem" })] }, row))) })] }, section))) }), (0, jsx_runtime_1.jsx)(Rail, { label: label, children: [0, 1].map((group) => ((0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "0.75rem", width: "5rem" }), [0, 1, 2].map((row) => ((0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "1.5rem", width: "100%", mt: 2 }, row)))] }, group))) })] }));
+}
+function SearchField({ inputRef, value, onChange, onKeyDown, labels, hint, listboxId, activeId, isExpanded, hasResults, }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { flex: 1, maxW: "520px", h: "38px", align: "center", gap: "10px", pl: "12px", pr: "8px", borderRadius: "10px", borderWidth: "1px", borderColor: colors.primary[500], bg: colors.surfaceRaised, boxShadow: `0 0 0 3px ${colors.primary.opacity[16]}`, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: colors.accentText, display: "inline-flex", flexShrink: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 16, strokeWidth: 2.2, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "input", ref: inputRef, value: value, onChange: (event) => onChange(event.target.value), onKeyDown: onKeyDown, placeholder: labels.searchPlaceholder, "aria-label": labels.searchPlaceholder, role: "combobox", "aria-expanded": isExpanded, "aria-controls": isExpanded && hasResults ? listboxId : undefined, "aria-autocomplete": "list", "aria-activedescendant": activeId, autoComplete: "off", flex: 1, minW: 0, h: "34px", border: 0, outline: "none", bg: "transparent", fontSize: "14.5px", color: colors.text[900], _placeholder: { color: (0, placeholderInk_1.placeholderInk)(colors), opacity: 1 } }), value ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", "aria-label": labels.clearSearch, onClick: () => {
+                    var _a;
+                    onChange("");
+                    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                }, boxSize: "24px", borderRadius: "6px", bg: colors.backgroundColor.subtle, color: colors.textMuted, display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 12, strokeWidth: 2.4, "aria-hidden": true }) })) : null, hint ? ((0, jsx_runtime_1.jsx)(react_1.Box, { "aria-hidden": true, display: { base: "none", md: "block" }, children: (0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: hint }) })) : null] }));
+}
+function SearchRow({ item, query, isActive, link, labels, optionId, isPinned, canPin, onPin, onOpen, onHover, }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const isScreen = item.kind === "screen";
+    const hasStar = Boolean(item.screenId) && canPin;
+    const base = item.badge ? 24 : 0;
+    const open = base + (hasStar ? 46 : item.href ? 24 : 0);
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { role: "presentation", "data-group": true, "data-reveal": isActive, position: "relative", align: "flex-start", gap: "10px", minH: "34px", pl: "8px", pr: "4px", pt: "7px", pb: "5px", borderRadius: "8px", bg: isActive ? colors.primary[50] : "transparent", boxShadow: isActive ? (0, focusRing_styles_1.focusRingShadow)(colors) : "none", transition: (0, motion_1.transitionFor)(["background-color"]), onMouseMove: onHover, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { id: optionId, role: "option", "aria-selected": isActive, "data-active": isActive, title: isScreen ? `${item.label} — ${item.context}` : item.label, flex: 1, minW: 0, align: "flex-start", gap: "10px", cursor: "pointer", onClick: () => {
+                    if (!item.href)
+                        onOpen();
+                }, children: [(0, jsx_runtime_1.jsx)(launcherParts_1.RowIcon, { icon: item.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", minW: 0, h: "19px", pr: `${isActive ? open + 26 : base}px`, _groupHover: { pr: `${isActive ? open + 26 : open}px` }, children: [(0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "13.5px", fontWeight: 500, color: colors.text[900], noOfLines: 1, minW: 0, children: [(0, jsx_runtime_1.jsx)(launcherParts_1.Highlight, { text: item.label, query: query }), isScreen ? ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontWeight: 400, color: colors.textMuted, children: ` — ${item.context}` })) : null] }), item.isNew ? (0, jsx_runtime_1.jsx)(launcherParts_1.NewTag, { label: labels.newBadge }) : null, item.keywordHint ? ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "11.5px", color: colors.textMuted, whiteSpace: "nowrap", children: ` · ${item.keywordHint}` })) : null, item.hint ? ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "11.5px", color: colors.textMuted, whiteSpace: "nowrap", children: item.hint })) : null] }), item.context && !isScreen ? ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "11.5px", lineHeight: "15px", color: colors.textMuted, noOfLines: 1, children: item.context })) : null] })] }), item.href ? ((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: "8px" })) : null, (0, jsx_runtime_1.jsx)(launcherParts_1.RowActions, { children: (0, jsx_runtime_1.jsxs)(react_1.Box, { "aria-hidden": true, display: "contents", children: [(0, jsx_runtime_1.jsx)(launcherParts_1.CountBadge, { value: item.badge }), isActive ? (0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: "\u21B5" }) : null, hasStar ? ((0, jsx_runtime_1.jsx)(PinToggle_1.default, { isPinned: isPinned, label: isPinned ? labels.unpin(item.label) : labels.pin(item.label), title: "", onToggle: onPin, tabIndex: -1 })) : null, item.href ? ((0, jsx_runtime_1.jsx)(NewTabLink_1.default, { href: item.href, label: labels.openInNewTab(isScreen ? `${item.label} — ${item.context}` : item.label), linkAs: link.linkAs, tabIndex: -1 })) : null] }) }), hasStar ? ((0, jsx_runtime_1.jsx)(launcherParts_1.RowTip, { text: isPinned ? labels.unpinTip : labels.pinTip })) : null] }));
+}
+/** Left-drawer navigation launcher: browse every module, pins, Frequent, Recent, search and (compact) the suite's apps. */
+function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, frequentIds, recentIds, onTogglePin, onNavigate, linkAs = "a", actions, extraResults, query: controlledQuery, onQueryChange, isSearching = false, isLoading = false, keyScreenLimit = 3, frequentLimit = 4, suggestions, searchHint, openShortcutHint, modKeyLabel, maxWidth = "1180px", labels: labelOverrides, apps, currentAppId, onAppSelect, appsVisibility = "apps-on-compact", "data-testid": testId, }) {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const { colors } = theme;
+    const inputRef = (0, react_2.useRef)(null);
+    const bodyRef = (0, react_2.useRef)(null);
+    const baseId = (0, react_2.useId)();
+    const isDesktop = (0, useMatchMedia_1.useMatchMedia)(MD_QUERY, true);
+    const isWide = (0, useMatchMedia_1.useMatchMedia)(XL_QUERY, false);
+    const columns = isWide ? 3 : isDesktop ? 2 : 1;
+    const [innerQuery, setInnerQuery] = (0, react_2.useState)("");
+    const [activeIndex, setActiveIndex] = (0, react_2.useState)(0);
+    const labels = (0, react_2.useMemo)(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
+    const isControlled = controlledQuery !== undefined;
+    const query = isControlled ? controlledQuery : innerQuery;
+    const setQuery = (0, react_2.useCallback)((next) => {
+        if (!isControlled)
+            setInnerQuery(next);
+        onQueryChange === null || onQueryChange === void 0 ? void 0 : onQueryChange(next);
+    }, [isControlled, onQueryChange]);
+    const latest = (0, react_2.useRef)({ query, setQuery });
+    latest.current = { query, setQuery };
+    (0, react_2.useEffect)(() => {
+        if (!isOpen && latest.current.query !== "")
+            latest.current.setQuery("");
+    }, [isOpen]);
+    (0, react_2.useEffect)(() => setActiveIndex(0), [query]);
+    const sections = (0, react_2.useMemo)(() => visibleSections(rawSections), [rawSections]);
+    const byId = (0, react_2.useMemo)(() => indexScreens(sections), [sections]);
+    const pinned = (0, react_2.useMemo)(() => new Set(pinnedIds), [pinnedIds]);
+    const pinnedItems = (0, react_2.useMemo)(() => pinnedIds.flatMap((id) => { var _a; return (_a = byId.get(id)) !== null && _a !== void 0 ? _a : []; }), [pinnedIds, byId]);
+    const frequentItems = (0, react_2.useMemo)(() => frequentIds.flatMap((id) => { var _a; return (_a = byId.get(id)) !== null && _a !== void 0 ? _a : []; }), [frequentIds, byId]);
+    const recentItems = (0, react_2.useMemo)(() => recentIds.flatMap((id) => { var _a; return (_a = byId.get(id)) !== null && _a !== void 0 ? _a : []; }), [recentIds, byId]);
+    const found = (0, react_2.useMemo)(() => (0, match_1.searchLauncherSections)({
+        query,
+        sections,
+        actions,
+        extraResults,
+        actionsLabel: labels.actionsGroup,
+    }), [query, sections, actions, extraResults, labels.actionsGroup]);
+    const groups = (0, react_2.useMemo)(() => [
+        ...found.sections.map((s) => ({
+            id: `section:${s.id}`,
+            label: s.label,
+            meta: labels.found(s.items.length),
+            items: s.items,
+        })),
+        ...found.groups,
+    ], [found, labels]);
+    const results = (0, react_2.useMemo)(() => groups.flatMap((g) => g.items), [groups]);
+    const groupStarts = (0, react_2.useMemo)(() => groups.map((_, i) => groups.slice(0, i).reduce((n, g) => n + g.items.length, 0)), [groups]);
+    const isSearchView = query.trim().length > 0;
+    const link = (0, react_2.useMemo)(() => ({
+        linkAs,
+        onPlainClick: (event) => {
+            if ((0, launcherParts_1.isPlainClick)(event))
+                onClose();
+        },
+    }), [linkAs, onClose]);
+    const open = (0, react_2.useCallback)((item, newTab) => {
+        if (item.run) {
+            onClose();
+            item.run();
+            return;
+        }
+        if (!item.href)
+            return;
+        if (!newTab)
+            onClose();
+        onNavigate(item.href, { newTab });
+    }, [onClose, onNavigate]);
+    const moveFocus = (delta) => {
+        var _a, _b;
+        const items = Array.from((_b = (_a = bodyRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(launcherParts_1.ITEM_SELECTOR)) !== null && _b !== void 0 ? _b : []);
+        if (items.length === 0)
+            return;
+        const current = items.indexOf(document.activeElement);
+        const next = delta === "first"
+            ? 0
+            : delta === "last"
+                ? items.length - 1
+                : Math.min(items.length - 1, Math.max(0, current + delta));
+        items[next].focus();
+    };
+    const onInputKeyDown = (event) => {
+        if (!isSearchView) {
+            if (event.key === "ArrowDown") {
+                event.preventDefault();
+                moveFocus("first");
+            }
+            return;
+        }
+        if (results.length === 0)
+            return;
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            setActiveIndex((i) => (i + 1) % results.length);
+        }
+        else if (event.key === "ArrowUp") {
+            event.preventDefault();
+            setActiveIndex((i) => (i - 1 + results.length) % results.length);
+        }
+        else if (event.key === "Enter") {
+            event.preventDefault();
+            open(results[activeIndex], event.metaKey || event.ctrlKey);
+        }
+    };
+    const moveInGrid = (event, cell) => {
+        var _a, _b, _c, _d;
+        const grid = cell.closest("[data-nav-grid]");
+        const cells = Array.from((_a = grid === null || grid === void 0 ? void 0 : grid.querySelectorAll(CELL_SELECTOR)) !== null && _a !== void 0 ? _a : []);
+        const index = cells.indexOf(cell);
+        const focusCell = (target) => { var _a; return (_a = target === null || target === void 0 ? void 0 : target.querySelector(launcherParts_1.ITEM_SELECTOR)) === null || _a === void 0 ? void 0 : _a.focus(); };
+        if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
+            focusCell(cells[index + (event.key === "ArrowRight" ? 1 : -1)]);
+            return;
+        }
+        const down = event.key === "ArrowDown";
+        const within = cells[index + (down ? columns : -columns)];
+        if (within)
+            return focusCell(within);
+        const hasRowAfter = down &&
+            Math.floor(index / columns) < Math.floor((cells.length - 1) / columns);
+        if (hasRowAfter)
+            return focusCell(cells[cells.length - 1]);
+        const grids = Array.from((_c = (_b = bodyRef.current) === null || _b === void 0 ? void 0 : _b.querySelectorAll("[data-nav-grid]")) !== null && _c !== void 0 ? _c : []);
+        const neighbour = grids[grids.indexOf(grid) + (down ? 1 : -1)];
+        const neighbourCells = Array.from((_d = neighbour === null || neighbour === void 0 ? void 0 : neighbour.querySelectorAll(CELL_SELECTOR)) !== null && _d !== void 0 ? _d : []);
+        if (neighbourCells.length === 0)
+            return moveFocus(down ? 1 : -1);
+        const column = index % columns;
+        const row = down ? 0 : Math.floor((neighbourCells.length - 1) / columns);
+        focusCell(neighbourCells[Math.min(neighbourCells.length - 1, row * columns + column)]);
+    };
+    const pinFromKeyboard = (event) => {
+        var _a, _b;
+        const target = event.target;
+        const pinId = target.matches(launcherParts_1.ITEM_SELECTOR)
+            ? target.getAttribute("data-pin-id")
+            : null;
+        if (!pinId || !onTogglePin)
+            return false;
+        event.preventDefault();
+        const before = Array.from((_b = (_a = bodyRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(launcherParts_1.ITEM_SELECTOR)) !== null && _b !== void 0 ? _b : []);
+        const position = before.indexOf(target);
+        onTogglePin(pinId);
+        setTimeout(() => {
+            var _a, _b, _c;
+            if ((_a = bodyRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement))
+                return;
+            const after = (_b = bodyRef.current) === null || _b === void 0 ? void 0 : _b.querySelectorAll(launcherParts_1.ITEM_SELECTOR);
+            (_c = after === null || after === void 0 ? void 0 : after[Math.min(position, after.length - 1)]) === null || _c === void 0 ? void 0 : _c.focus();
+        }, 0);
+        return true;
+    };
+    const onBodyKeyDown = (event) => {
+        var _a;
+        if (isSearchView || event.target === inputRef.current)
+            return;
+        const isArrow = event.key.startsWith("Arrow");
+        const cell = event.target.closest(CELL_SELECTOR);
+        if (isArrow && cell && !event.altKey && !event.metaKey && !event.ctrlKey) {
+            event.preventDefault();
+            moveInGrid(event, cell);
+        }
+        else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            event.preventDefault();
+            moveFocus(event.key === "ArrowDown" ? 1 : -1);
+        }
+        else if (event.key === "Home" || event.key === "End") {
+            event.preventDefault();
+            moveFocus(event.key === "Home" ? "first" : "last");
+        }
+        else if (event.key.length === 1 &&
+            !event.metaKey &&
+            !event.ctrlKey &&
+            !event.altKey &&
+            event.key !== " ") {
+            if ((event.key === "p" || event.key === "P") && pinFromKeyboard(event))
+                return;
+            event.preventDefault();
+            setQuery(query + event.key);
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    };
+    (0, react_2.useEffect)(() => {
+        var _a, _b, _c;
+        (_c = (_b = (_a = bodyRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('[data-active="true"]')) === null || _b === void 0 ? void 0 : _b.scrollIntoView) === null || _c === void 0 ? void 0 : _c.call(_b, { block: "nearest" });
+    }, [activeIndex, results]);
+    const appList = apps !== null && apps !== void 0 ? apps : NO_APPS;
+    const hues = (0, react_2.useMemo)(() => (0, AppMark_1.assignAppHues)(appList, (0, chartColorsFromTheme_1.chartMode)(colors)), [appList, colors]);
+    const showApps = appList.some((app) => app.id !== currentAppId) &&
+        (appsVisibility === "always" || !isDesktop);
+    const handleAppSelect = (app, event) => {
+        onAppSelect === null || onAppSelect === void 0 ? void 0 : onAppSelect(app, event);
+        if (!event.defaultPrevented)
+            onClose();
+    };
+    const appsBlock = showApps ? ((0, jsx_runtime_1.jsx)(launcherParts_1.AppsSection, { apps: appList, hues: hues, currentAppId: currentAppId, heading: labels.apps, onSelect: handleAppSelect })) : null;
+    const listboxId = `${baseId}-results`;
+    const optionId = (index) => `${baseId}-opt-${index}`;
+    const togglePinFor = (id) => onTogglePin ? () => onTogglePin(id) : undefined;
+    const hasResults = results.length > 0;
+    const trimmed = query.trim();
+    const railFrequent = frequentItems
+        .filter(({ screen }) => !pinned.has(screen.id))
+        .slice(0, frequentLimit);
+    const rail = ((0, jsx_runtime_1.jsxs)(Rail, { label: labels.quickAccess, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "section", direction: "column", gap: "6px", children: [(0, jsx_runtime_1.jsx)(launcherParts_1.SectionHeader, { label: labels.pinned, meta: `(${pinnedItems.length})`, isRail: true }), pinnedItems.length === 0 ? ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "13px", color: colors.textMuted, px: "4px", children: labels.pinnedEmpty })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "grid", gridTemplateColumns: "repeat(2, minmax(0, 1fr))", gap: "6px", children: pinnedItems.map(({ screen, module }) => ((0, jsx_runtime_1.jsx)(launcherParts_1.PinnedTile, { screen: screen, module: module, link: link, labels: labels, onTogglePin: togglePinFor(screen.id) }, screen.id))) }))] }), railFrequent.length ? ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "section", direction: "column", gap: "2px", children: [(0, jsx_runtime_1.jsx)(launcherParts_1.SectionHeader, { label: labels.frequent, isRail: true, hasCount: false }), railFrequent.map(({ screen, module }) => ((0, jsx_runtime_1.jsx)(launcherParts_1.RailRow, { screen: screen, module: module, link: link, isStrong: true, pinId: onTogglePin ? screen.id : undefined, trailing: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [onTogglePin ? ((0, jsx_runtime_1.jsx)(launcherParts_1.PinTextButton, { label: labels.pin(screen.label), text: labels.pinShort, onToggle: () => onTogglePin(screen.id) })) : null, (0, jsx_runtime_1.jsx)(NewTabLink_1.default, { href: screen.href, label: labels.openInNewTab(screen.label), linkAs: link.linkAs })] }) }, screen.id)))] })) : null, recentItems.length ? ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "section", direction: "column", gap: "2px", children: [(0, jsx_runtime_1.jsx)(launcherParts_1.SectionHeader, { label: labels.recent, isRail: true, hasCount: false }), recentItems.map(({ screen, module }) => ((0, jsx_runtime_1.jsx)(launcherParts_1.RailRow, { screen: screen, module: module, link: link, trailing: (0, jsx_runtime_1.jsx)(NewTabLink_1.default, { href: screen.href, label: labels.openInNewTab(screen.label), linkAs: link.linkAs }) }, screen.id)))] })) : null, appsBlock] }));
+    const browsePane = sections.length === 0 ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { title: labels.empty, titleAs: "h3", size: "sm" })) : (sections.map((section) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "section", "aria-label": section.label, direction: "column", gap: "3px", children: [(0, jsx_runtime_1.jsx)(launcherParts_1.SectionHeader, { label: section.label, meta: `(${section.modules.length})` }), (0, jsx_runtime_1.jsx)(ItemGrid, { children: section.modules.map((module) => {
+                    const pinId = module.screens[0].id;
+                    return ((0, jsx_runtime_1.jsx)(launcherParts_1.ModuleRow, { module: module, keyScreens: module.screens
+                            .filter((s) => s.isKey && s.href !== module.href)
+                            .slice(0, keyScreenLimit), isPinned: pinned.has(pinId), onTogglePin: togglePinFor(pinId), pinId: pinId, labels: labels, link: link }, module.id));
+                }) })] }, section.id))));
+    const pickSuggestion = (value) => {
+        var _a;
+        setQuery(value);
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const noResults = ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", align: "center", gap: "12px", py: "48px", px: "20px", textAlign: "center", role: "status", children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { boxSize: "40px", borderRadius: "12px", bg: colors.backgroundColor.subtle, color: colors.textMuted, align: "center", justify: "center", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 18, strokeWidth: 2, "aria-hidden": true }) }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", gap: "3px", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "14px", fontWeight: 600, color: colors.text[900], children: isSearching ? labels.searching : labels.noResults(trimmed) }), isSearching ? null : ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "12.5px", color: colors.textMuted, children: (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length)
+                            ? labels.suggestionsHint
+                            : labels.noResultsHint }))] }), !isSearching && (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) ? ((0, jsx_runtime_1.jsx)(react_1.Flex, { wrap: "wrap", justify: "center", gap: "6px", children: suggestions.map((suggestion) => ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", onClick: () => pickSuggestion(suggestion), h: "28px", px: "11px", borderRadius: "full", borderWidth: "1px", borderColor: colors.boxborder[200], bg: colors.surfaceRaised, fontSize: "12.5px", fontWeight: 500, color: colors.text[900], transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: (0, rowStates_1.listRowBackgrounds)(colors).active }, sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), children: suggestion }, suggestion))) })) : null] }));
+    const searchPane = hasResults ? ((0, jsx_runtime_1.jsx)(react_1.Flex, { role: "listbox", id: listboxId, "aria-label": labels.title, "aria-busy": isSearching || undefined, direction: "column", gap: "14px", children: groups.map((group, groupIndex) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { role: "group", "aria-label": group.meta ? `${group.label}, ${group.meta}` : group.label, direction: "column", gap: "3px", children: [(0, jsx_runtime_1.jsx)(launcherParts_1.SectionHeader, { label: group.label, meta: group.meta ? `(${group.meta})` : undefined, isDecorative: true }), (0, jsx_runtime_1.jsx)(ItemGrid, { children: group.items.map((item, itemIndex) => {
+                        const index = groupStarts[groupIndex] + itemIndex;
+                        return ((0, jsx_runtime_1.jsx)(SearchRow, { item: item, query: query, isActive: index === activeIndex, link: link, labels: labels, optionId: optionId(index), isPinned: item.screenId ? pinned.has(item.screenId) : false, canPin: Boolean(onTogglePin) && item.kind === "module", onPin: () => item.screenId && (onTogglePin === null || onTogglePin === void 0 ? void 0 : onTogglePin(item.screenId)), onOpen: () => open(item, false), onHover: () => setActiveIndex(index) }, item.id));
+                    }) })] }, group.id))) })) : (noResults);
+    const body = isLoading ? ((0, jsx_runtime_1.jsx)(SkeletonLayout, { label: labels.loading })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Pane, { children: isSearchView ? searchPane : browsePane }), rail] }));
+    const pill = (0, filledSurface_1.resolveFilledSurface)(colors.primary, colors);
+    return ((0, jsx_runtime_1.jsxs)(Drawer_1.default, { isOpen: isOpen, onClose: onClose, placement: "left", size: "full", initialFocusRef: inputRef, hideCloseButton: true, contentProps: {
+            maxW: { base: "100vw", lg: `min(${maxWidth}, calc(100vw - 56px))` },
+            h: { base: "100%", lg: "auto" },
+            maxH: "100%",
+            bg: colors.surfaceRaised,
+            borderBottomRightRadius: { base: 0, lg: "16px" },
+            boxShadow: colors.boxShadow.default,
+            overflow: "hidden",
+            ...{ "data-testid": testId },
+        }, children: [(0, jsx_runtime_1.jsx)(Drawer_1.DrawerHeader, { p: 0, flexShrink: 0, children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "12px", h: "60px", pl: "18px", pr: "12px", children: [(0, jsx_runtime_1.jsxs)(react_1.Heading, { as: "h2", display: "inline-flex", alignItems: "center", gap: "7px", h: "32px", pl: "9px", pr: "11px", borderRadius: "9px", bg: pill.fill, color: pill.color, fontSize: "13px", fontWeight: 600, flexShrink: 0, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Compass, { size: 16, strokeWidth: 2, "aria-hidden": true }), labels.title] }), (0, jsx_runtime_1.jsx)(SearchField, { inputRef: inputRef, value: query, onChange: setQuery, onKeyDown: onInputKeyDown, labels: labels, hint: searchHint, listboxId: listboxId, activeId: isSearchView && hasResults ? optionId(activeIndex) : undefined, isExpanded: isSearchView, hasResults: hasResults }), (0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": labels.close, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 18, "aria-hidden": true }), variant: "ghost", boxSize: "34px", minW: "34px", borderRadius: "9px", color: colors.textMuted, ml: "auto", onClick: onClose })] }) }), (0, jsx_runtime_1.jsx)(Drawer_1.DrawerBody, { p: 0, display: "flex", flexDirection: { base: "column", lg: "row" }, overflowY: { base: "auto", lg: "hidden" }, minH: 0, children: (0, jsx_runtime_1.jsx)(react_1.Flex, { ref: bodyRef, onKeyDown: onBodyKeyDown, direction: { base: "column", lg: "row" }, flex: 1, minH: 0, minW: 0, children: body }) }), (0, jsx_runtime_1.jsxs)(Drawer_1.DrawerFooter, { p: 0, minH: "32px", flexShrink: 0, px: "18px", py: "6px", gap: "6px 14px", flexWrap: "wrap", bg: colors.backgroundColor.subtle, fontSize: "11.5px", color: colors.textMuted, whiteSpace: "nowrap", justifyContent: "flex-start", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: "6px 14px", align: "center", wrap: "wrap", "aria-hidden": true, children: [openShortcutHint ? ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: "5px", children: [(0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: openShortcutHint }), labels.hintOpenMenu] })) : null, (0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: "5px", children: [(0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: "\u2191\u2193\u2190\u2192" }), labels.hintMove] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: "5px", children: [(0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: "\u21B5" }), labels.hintOpen] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: "5px", children: [(0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: `${modKeyLabel !== null && modKeyLabel !== void 0 ? modKeyLabel : (isApplePlatform() ? "⌘" : "Ctrl")}↵` }), labels.hintNewTab] }), onTogglePin ? ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: "5px", children: [(0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: "P" }), labels.hintPin] })) : null, (0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: "5px", children: [(0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: "esc" }), labels.hintClose] })] }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", ml: "auto", children: labels.footerNote })] })] }));
+}

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

@@ -0,0 +1,187 @@
+import type { ElementType, KeyboardEvent, MouseEvent } 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;
+/** One destination the launcher can open; screens are what pins, Frequent and Recent refer to. */
+export type LauncherScreen = {
+    id: string;
+    label: string;
+    href: string;
+    icon?: LauncherIcon;
+    badge?: number | string;
+    keywords?: readonly string[];
+    /** Listed on the module's second line (first `keyScreenLimit` of them). */
+    isKey?: boolean;
+};
+/** A group of screens shown as one row in the browse view. */
+export type LauncherModule = {
+    id: string;
+    label: string;
+    /** Normally its first visible screen's href. */
+    href: string;
+    icon?: LauncherIcon;
+    badge?: number | string;
+    /** Shows a small "New" tag after the name. */
+    isNew?: boolean;
+    keywords?: readonly string[];
+    /** Pinning the module pins `screens[0]`; a module with no screens is not rendered. */
+    screens: readonly LauncherScreen[];
+};
+/** A labelled run of modules; a section with no renderable module is dropped. */
+export type LauncherSection = {
+    id: string;
+    label: string;
+    modules: readonly LauncherModule[];
+};
+/** A search row that is not a screen: an action (`run`) or an entity result (`href`). */
+export type LauncherSearchItem = {
+    id: string;
+    label: string;
+    /** Second line, e.g. the module a result belongs to. */
+    context?: string;
+    icon?: LauncherIcon;
+    /** Extra terms the query may match; never rendered. */
+    keywords?: string;
+    hint?: string;
+    href?: string;
+    run?: () => void;
+};
+/** A titled batch of remote results, rendered after Screens in the order given. */
+export type LauncherResultGroup = {
+    id: string;
+    label: string;
+    items: readonly LauncherSearchItem[];
+};
+/** Every visible string and accessible name; pass any subset, the rest fall back to English. */
+export type LauncherLabels = {
+    title: string;
+    searchPlaceholder: string;
+    clearSearch: string;
+    close: string;
+    pinned: string;
+    pinnedEmpty: string;
+    frequent: string;
+    recent: string;
+    screensGroup: string;
+    actionsGroup: string;
+    pin: (label: string) => string;
+    unpin: (label: string) => string;
+    openInNewTab: (label: string) => string;
+    noResults: (query: string) => string;
+    noResultsHint: string;
+    searching: string;
+    /** Accessible name of the skeleton region while `isLoading`. */
+    loading: string;
+    /** Heading of the empty state shown when `sections` has nothing to render. */
+    empty: string;
+    /** Footer hint after the ↑↓←→ key cap. */
+    hintMove: string;
+    /** Footer hint after the ↵ key cap. */
+    hintOpen: string;
+    /** Footer hint after the mod+↵ key cap. */
+    hintNewTab: string;
+    /** Footer hint after the P key cap. */
+    hintPin: string;
+    /** Footer hint after the esc key cap. */
+    hintClose: string;
+    /** Footer hint after `openShortcutHint`; only rendered when that prop is set. */
+    hintOpenMenu: string;
+    /** Heading and list name of the apps section. */
+    apps: string;
+    /** Per-section count shown while searching, e.g. "3 found". */
+    found: (count: number) => string;
+    /** Accessible name of the right-hand quick access rail. */
+    quickAccess: string;
+    /** Tag after a module marked `isNew`. */
+    newBadge: string;
+    /** Noun used in a module's key-screens group name, e.g. "Leave screens". */
+    screens: string;
+    /** Text on the Pin button of Frequently visited rows. */
+    pinShort: string;
+    /** Right-hand footer note. */
+    footerNote: string;
+    /** Line above the suggestion chips of the no-results state. */
+    suggestionsHint: string;
+    /** Tooltip on an unpinned star. */
+    pinTip: string;
+    /** Tooltip on a pinned star. */
+    unpinTip: string;
+};
+/** Passed to `onNavigate`; `newTab` is true for mod+Enter. */
+export type LauncherNavigateOptions = {
+    newTab: boolean;
+};
+/** Full-height navigation launcher: browse every screen, search, pins, Frequent, Recent and optionally the suite's apps. */
+export interface NavLauncherProps {
+    isOpen: boolean;
+    onClose: () => void;
+    /** Already permission-filtered by the app. Empty sections/modules are dropped, never rendered as gaps. */
+    sections: readonly LauncherSection[];
+    /** Screen ids in display order; ids not in `sections` are ignored silently. */
+    pinnedIds: readonly string[];
+    frequentIds: readonly string[];
+    recentIds: readonly string[];
+    /** Omit to hide every pin toggle (read-only launcher). */
+    onTogglePin?: (screenId: string) => void;
+    /** Keyboard opens only (Enter / mod+Enter); pointer clicks follow the rendered links natively. */
+    onNavigate: (href: string, options: LauncherNavigateOptions) => void;
+    /** Anchor-like component receiving `href`, `target`, `rel`, `onClick`, `ref`. Defaults to `"a"`. */
+    linkAs?: ElementType;
+    actions?: readonly LauncherSearchItem[];
+    /** Remote results, already filtered by the app; rendered after Screens in the given order. */
+    extraResults?: readonly LauncherResultGroup[];
+    /** Controlled query; omit for uncontrolled. Reset to "" on close either way. */
+    query?: string;
+    /** Fires on every change, including the reset on close. */
+    onQueryChange?: (query: string) => void;
+    /** Remote search in flight: shows the searching state when nothing local matched. */
+    isSearching?: boolean;
+    /** Sections not known yet (access loading): skeleton browse view. */
+    isLoading?: boolean;
+    /** Defaults to 3. */
+    keyScreenLimit?: number;
+    /** Most Frequently visited rows shown (pinned ones are skipped); defaults to 4. */
+    frequentLimit?: number;
+    /** Query chips offered by the no-results state; clicking one sets the query. */
+    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. */
+    openShortcutHint?: string;
+    /** Printed on 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". */
+    maxWidth?: string;
+    labels?: Partial<LauncherLabels>;
+    /** Other Pixelize apps, shown as an "Apps" section at the bottom of the right rail. Same shape as AppSwitcher. */
+    apps?: AppOption[];
+    /** The app this UI runs inside: its row is marked and never a link. */
+    currentAppId?: string;
+    /** Same contract as AppSwitcher.onSelect; preventDefault keeps the app's own routing. */
+    onAppSelect?: (app: AppOption, event: MouseEvent | KeyboardEvent) => void;
+    /** Default "apps-on-compact": the section shows only below `md`, where the 9-dot is usually hidden. */
+    appsVisibility?: "always" | "apps-on-compact";
+    "data-testid"?: string;
+}
+/** Props for the star pin toggle used on launcher rows and reusable on a landing page; shows only while its row is hovered or focused. */
+export interface PinToggleProps {
+    isPinned: boolean;
+    /** Accessible name and tooltip, e.g. "Pin Leave". */
+    label: string;
+    onToggle: () => void;
+    /** Tooltip text; defaults to `label`. */
+    title?: string;
+    /** Star size in px; defaults to 13. */
+    size?: number;
+    /** Pass -1 where the row itself is the tab stop. */
+    tabIndex?: number;
+}
+/** 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". */
+    label: string;
+    /** Anchor-like component receiving `href`, `target`, `rel`; defaults to `"a"`. */
+    linkAs?: ElementType;
+    tabIndex?: number;
+}

package/dist/Components/NavLauncher/NavLauncherProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +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;

package/dist/Components/NavLauncher/NewTabLink.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = NewTabLink;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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 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 }) {
+    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 }) }));
+}

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

@@ -0,0 +1,3 @@
+import type { PinToggleProps } from "./NavLauncherProps";
+/** Star toggle: outline when unpinned, filled in the accent when pinned; appears on row hover or focus and never follows the row link. */
+export default function PinToggle({ isPinned, label, onToggle, title, size, tabIndex }: PinToggleProps): import("react/jsx-runtime").JSX.Element;